/* ======================================================
   PIQ – The Partner Intimacy Quiz
   Global Stylesheet
   ------------------------------------------------------
   Sections:
   1. Base / Layout
   2. Typography
   3. Logo Sizing
   4. Buttons
   5. Button Gradients
   6. Button Hover Glow
   7. Footer
   8. Screens
   9. Merged Results Bar
   10. Spicebar
   11. Code Entry
   12. Utilities
====================================================== */

/* ------------------------------ 1. BASE / LAYOUT */
body {
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  margin: 20px auto;
  max-width: 500px;
  text-align: center;
}

/* ------------------------------ screen show/hide */
.screen { display: none; }
.screen.active { display: block; }

/* ------------------------------ 2. TYPOGRAPHY */
p.narrow { font-size: 18px; margin: 10px auto; line-height: 1.5; }
p.small-text { font-size: 14px; margin-bottom: 15px; color: #ccc; }
footer.footnote { font-size: 12px; margin-top: 30px; text-align: center; }

/* ------------------------------ forms */
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
  width: 100%;
  max-width: 320px;
  padding: 12px 14px;
  font-size: 18px;
  border: 2px solid #ccc;
  border-radius: 8px;
  margin: 10px auto 20px;
  box-sizing: border-box;
  text-align: center;
}
input[type="text"]:focus, textarea:focus {
  border-color: #FF9500;
  outline: none;
  box-shadow: 0 0 10px rgba(255,149,0,.8);
}

/* ------------------------------ 3. LOGO SIZING */
.logo-main { max-width: 80%; }
.logo-small { max-width: 250px; width: 60%; display:block; margin:6px auto 6px; }

/* ------------------------------ 4. BUTTONS */
.btn {
  display:block; width:100%; max-width:320px; margin:10px auto;
  padding:14px; border:none; border-radius:8px; font-size:18px; font-weight:bold;
  cursor:pointer; color:#fff; transition: box-shadow .2s ease, transform .2s ease;
}

/* ------------------------------ 5. GRADIENTS */
.btn.green  { background: linear-gradient(0deg, rgba(0,99,5,1) 0%, rgba(107,255,8,1) 100%); }
.btn.orange { background: linear-gradient(0deg, rgba(212,63,0,1) 0%, rgba(255,195,0,1) 100%); }
.btn.red    { background: linear-gradient(0deg, rgba(140,0,0,1) 0%, rgba(255,0,0,1) 100%); }
.btn.blue   { background: linear-gradient(0deg, rgba(0,44,138,1) 0%, rgba(0,166,255,1) 100%); }
.btn.pink   { background: linear-gradient(0deg, rgba(166,0,97,1) 0%, rgba(255,59,242,1) 100%); }
.btn.black  {
  background: #141414;
  background: linear-gradient(0deg, rgba(20,20,20,1) 0%, rgba(46,46,46,1) 27%, rgba(0,0,0,1) 74%, rgba(77,77,77,1) 100%);
  margin-bottom: 15px;
}

/* ------------------------------ 6. HOVER GLOW */
.btn.green:hover  { box-shadow: 0 0 20px rgba(107,255,8,.8); }
.btn.orange:hover { box-shadow: 0 0 20px rgba(255,195,0,.8); }
.btn.red:hover    { box-shadow: 0 0 20px rgba(255,0,0,.8); }
.btn.blue:hover   { box-shadow: 0 0 20px rgba(0,166,255,.8); }
.btn.pink:hover   { box-shadow: 0 0 20px rgba(255,59,242,.8); }
.btn.black:hover  { box-shadow: 0 0 20px rgba(145,145,145,.8); }

/* ------------------------------ 7. FOOTER LINKS */
footer.footnote a { color: #FF9500; text-decoration: none; }
footer.footnote a:hover { text-decoration: underline; }

/* ------------------------------ 8. SCREENS helpers */
.result-bar-wrap { max-width: 560px; margin: 0 auto; }
.result-bar {
  width: 0; height: 6px; background: linear-gradient(90deg, #00b800, #ffc300);
  border-radius: 4px; transition: width .25s ease;
}

/* ------------------------------ 9. Merged Results Bar */
.merged-bar {
  display:flex; max-width:560px; height:40px; margin:12px auto 20px;
  border-radius:999px; overflow:hidden; font-size:16px; font-weight:700;
  letter-spacing:.5px; color:#fff; text-shadow:0 0 4px rgba(0,0,0,.4);
}
.bar-left  { flex:1; background:linear-gradient(90deg, rgba(0,99,5,1) 0%, rgba(107,255,8,1) 100%);  display:flex; align-items:center; justify-content:center; }
.bar-right { flex:1; background:linear-gradient(90deg, rgba(255,195,0,1) 0%, rgba(212,63,0,1) 100%); display:flex; align-items:center; justify-content:center; }

/* ------------------------------ 10. SPICEBAR */
.spicebar { max-width: 100%; margin: 8px auto 0; text-align: center; }
/* Stage keeps native 1015×113 ratio */
.spicebar-stage { position:relative; width:100%; aspect-ratio:1015 / 113; }
.spicebar-stage::before { content:""; display:block; padding-top:11.133%; }
.sb-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.sb-grow-clip { position:absolute; left:0; top:0; bottom:0; height:100%; width:5%; overflow:hidden; }
.sb-grow-clip .sb-layer { width:auto; height:100%; left:0; right:auto; }
/* name + count line */
.who-count { font-weight:400; letter-spacing:.02em; margin:0 auto; }

/* ------------------------------ 11. CODE ENTRY */
.code-input-group{
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:12px auto 8px;
}
.code-chunk{
  width:92px; max-width:30vw; height:56px;
  border-radius:14px; border:2px solid #2b8f2b;
  background:rgba(25,120,25,.2);
  box-shadow:0 0 18px rgba(0,255,0,.18) inset;
  color:#fff; text-transform:uppercase; font-weight:800;
  letter-spacing:.2em; font-size:28px; text-align:center;
}
.code-chunk:focus{
  outline:none; border-color:#6fff6f; box-shadow:0 0 10px rgba(111,255,111,.6);
}
.code-dash{
  display:inline-block; min-width:12px; font-size:28px; opacity:.9;
}
.code-hint{ font-size:12px; opacity:.8; margin-bottom:10px; }

/* ------------------------------ 12. Utilities */
.hidden { display: none !important; }
.vspace-20 { height: 20px; }
.vspace-30 { height: 30px; }
.thin-sep{border:0;border-top:1px solid #666;margin:0 auto;max-width:540px}