:root{
  --till:#0B3D2E;
  --till-dark:#082B20;
  --gold:#E8B93E;
  --gold-dark:#C99A25;
  --cream:#F7F0DE;
  --ink:#16232B;
  --crimson:#C0392B;
  --leaf:#3FA34D;
  --slot-shadow: rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(circle at 20% -10%, #114F3B 0%, transparent 55%),
    radial-gradient(circle at 85% 110%, #0E4531 0%, transparent 50%),
    var(--till);
  font-family:'Nunito', sans-serif;
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- MARQUEE HEADER ---------- */
.marquee{
  position:relative;
  padding: 18px 10px 22px;
  text-align:center;
  background:var(--till-dark);
  border-bottom:6px solid var(--gold);
}
.bulbs{
  position:absolute; top:8px; left:0; right:0;
  display:flex; justify-content:space-between;
  padding:0 18px;
  pointer-events:none;
}
.bulbs span{
  width:10px;height:10px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px 2px rgba(232,185,62,.9);
  animation: blink 1.4s infinite;
}
.bulbs span:nth-child(even){animation-delay:.7s;}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

h1.title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(28px, 4.2vw, 56px);
  margin:14px 0 4px;
  color:var(--gold);
  text-shadow: 3px 3px 0 rgba(0,0,0,.35);
  letter-spacing:.5px;
}
.subtitle{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: clamp(15px, 1.6vw, 22px);
  color:var(--cream);
  opacity:.9;
}
.rules-strip{
  margin-top:10px;
  font-size:clamp(12px,1.1vw,15px);
  color:var(--gold);
  opacity:.85;
  font-weight:700;
}

/* ---------- MAIN LAYOUT ---------- */
.stage{
  display:grid;
  grid-template-columns: 1fr;
  gap:22px;
  max-width:1400px;
  margin: 0 auto;
  padding: 24px 20px 50px;
}
@media(min-width:1000px){
  .stage{ grid-template-columns: 300px 1fr; align-items:start; }
}

/* ---------- CONTROL PANEL (LED / scoreboard) ---------- */
.panel{
  background: linear-gradient(180deg, #0F4A38, #082B20);
  border: 3px solid var(--gold-dark);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 3px rgba(232,185,62,.08);
}
.panel h2{
  font-family:'Baloo 2', sans-serif;
  font-size:18px;
  margin:0 0 12px;
  color:var(--gold);
  text-align:center;
  letter-spacing:1px;
}

.timer-display{
  font-family:'Share Tech Mono', monospace;
  font-size:56px;
  text-align:center;
  background:#031A12;
  color:#FF5A4E;
  border-radius:10px;
  padding:10px 0;
  letter-spacing:4px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
  border:2px solid #0a3a2a;
  text-shadow: 0 0 10px rgba(255,90,78,.7);
}
.timer-display.low{ animation: blinkRed .5s infinite; color:#FF2A1B; }
@keyframes blinkRed{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.timer-btns{ display:flex; gap:8px; margin-top:10px; }
.btn{
  flex:1;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:14px;
  padding:10px 6px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:var(--gold);
  color:var(--ink);
  box-shadow: 0 4px 0 var(--gold-dark);
  transition: transform .06s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--gold-dark); }
.btn.secondary{ background:#2E6E56; color:var(--cream); box-shadow:0 4px 0 #1c4a39;}
.btn.danger{ background:var(--crimson); color:#fff; box-shadow:0 4px 0 #8e2a20;}

.divider{ height:2px; background:rgba(232,185,62,.25); margin:18px 0; border-radius:2px;}

.teams{ display:flex; flex-direction:column; gap:10px; }
.team-row{
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  padding: 8px 10px;
  border:1px solid rgba(232,185,62,.25);
}
.team-row input[type=text]{
  background:transparent;
  border:none;
  color:var(--cream);
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  width:100px;
  outline:none;
}
.score-controls{ display:flex; align-items:center; gap:6px; }
.score-val{
  font-family:'Share Tech Mono', monospace;
  font-size:22px;
  color:var(--gold);
  min-width:28px;
  text-align:center;
}
.score-btn{
  width:26px;height:26px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-weight:800;
  background:var(--gold);
  color:var(--ink);
}
.score-btn.minus{ background:#5a5a5a; color:#fff; }

.sortear-box{ margin-top:14px; text-align:center; }
.sorteio-result{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:20px;
  color:#fff;
  background: var(--crimson);
  border-radius: 10px;
  padding:10px;
  margin-top:10px;
  min-height:20px;
  display:none;
}
.sorteio-result.show{ display:block; animation: pop .35s ease; }
@keyframes pop{ from{transform:scale(.7); opacity:0;} to{transform:scale(1); opacity:1;} }

/* ---------- CASH DRAWER GRID ---------- */
.drawer-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--gold);
  text-align:center;
  margin-bottom:12px;
  letter-spacing:1px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:16px;
}
@media(max-width:800px){ .grid{ grid-template-columns: repeat(2,1fr); } }

.box{
  position:relative;
  aspect-ratio: 1 / 0.95;
  perspective: 1000px;
  cursor:pointer;
}
.box-inner{
  position:relative;
  width:100%; height:100%;
  border-radius:14px;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-dark) 100%);
  border: 3px solid #FFE9A8;
  box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 10px 18px var(--slot-shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: transform .12s ease;
}
.box:hover .box-inner{ transform: translateY(-3px); }
.box.used .box-inner{
  background: linear-gradient(160deg, #4a4a4a, #2c2c2c);
  border-color:#6b6b6b;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.box-num{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(30px, 3vw, 42px);
  color: var(--ink);
}
.box.used .box-num{ color:#bbb; }
.box-cifrao{
  font-family:'Share Tech Mono', monospace;
  font-size:16px;
  color: var(--till-dark);
  opacity:.75;
  margin-top:2px;
}
.box.used .box-cifrao{ color:#888; }
.box-check{
  position:absolute; top:6px; right:8px;
  font-size:18px; color:var(--leaf);
  display:none;
}
.box.used .box-check{ display:block; }

/* ---------- MODAL / RECEIPT ---------- */
.overlay{
  position:fixed; inset:0;
  background:rgba(4,20,14,.88);
  display:none;
  align-items:center; justify-content:center;
  z-index:50;
  padding:20px;
}
.overlay.show{ display:flex; }
.receipt{
  background:var(--cream);
  color:var(--ink);
  width:100%; max-width:820px;
  border-radius:14px;
  padding: clamp(20px,3vw,42px);
  position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: dropIn .28s cubic-bezier(.2,.9,.3,1.2);
  border: 4px dashed var(--gold-dark);
}
@keyframes dropIn{ from{ transform:translateY(-40px) scale(.95); opacity:0;} to{transform:translateY(0) scale(1); opacity:1;} }

.receipt-close{
  position:absolute; top:12px; right:16px;
  background:none; border:none;
  font-size:26px; cursor:pointer;
  color:var(--ink); opacity:.5;
}
.receipt-close:hover{ opacity:1; }

.receipt-tag{
  font-family:'Share Tech Mono', monospace;
  font-size:14px;
  color:var(--till);
  background:rgba(11,61,46,.08);
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:14px;
  letter-spacing:1px;
}
.receipt-question{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: clamp(22px, 3vw, 32px);
  line-height:1.3;
  margin-bottom:24px;
}
.options{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media(max-width:600px){ .options{ grid-template-columns:1fr; } }

.opt{
  font-family:'Share Tech Mono', monospace;
  font-size: clamp(20px, 2.4vw, 28px);
  background:#fff;
  border:3px solid var(--till);
  border-radius:12px;
  padding:16px 10px;
  text-align:center;
  cursor:pointer;
  transition: all .1s;
  font-weight:700;
}
.opt:hover{ background:#eef7f0; transform:translateY(-2px); }
.opt.correct{ background:var(--leaf); border-color:#276b34; color:#fff; }
.opt.wrong{ background:var(--crimson); border-color:#8e2a20; color:#fff; }
.opt.disabled{ pointer-events:none; }

.feedback{
  margin-top:20px;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: clamp(18px, 2.2vw, 24px);
  text-align:center;
  min-height:32px;
}
.feedback.correct{ color:var(--leaf); }
.feedback.wrong{ color:var(--crimson); }

.next-btn{
  display:none;
  margin: 18px auto 0;
}

footer.tip{
  text-align:center;
  max-width:1000px;
  margin: 0 auto 30px;
  padding: 0 20px;
  font-size:13px;
  color:var(--gold);
  opacity:.65;
}