/* ============================================================
   TT GAME ENGINE — shared stylesheet
   Nothing here is lesson-specific. Colours come from CSS
   variables that the engine sets from the pack's theme.
   ============================================================ */

:root{
  --bg:#0e1420;
  --bg2:#161f30;
  --panel:#1c2637;
  --panel2:#233046;
  --line:#31405c;
  --text:#eaf0fa;
  --muted:#9bb0cf;
  --t1:#2fb5f0;          /* Team 1 */
  --t1d:#0d5f85;
  --t2:#ff9f2e;          /* Team 2 */
  --t2d:#8a5000;
  --good:#3ddc84;
  --bad:#ff5d6c;
  --tile:#f4f7fd;
  --tileText:#16223a;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 50% -10%, #1d2a41 0%, var(--bg) 60%);
  color:var(--text);
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  overflow:hidden;user-select:none;-webkit-user-select:none;
}

/* ---------- Layout ---------- */
#app{display:flex;flex-direction:column;height:100vh;padding:14px 18px 18px;gap:12px}
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:800;font-size:clamp(15px,1.5vw,21px);letter-spacing:.5px;white-space:nowrap;line-height:1.15}
.brand .b1{color:var(--t1)} .brand .b2{color:var(--t2)}
.brand small{display:block;font-size:.62em;color:var(--muted);letter-spacing:1px;font-weight:700}

.scoreboard{display:flex;gap:12px;margin-left:auto;align-items:stretch;flex-wrap:wrap}
.team{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:2px solid var(--line);
  border-radius:var(--radius);padding:6px 12px;min-width:190px;
  transition:transform .2s,box-shadow .25s,border-color .25s;
}
.team .nm{font-weight:800;font-size:clamp(12px,1.1vw,15px);letter-spacing:.6px;line-height:1.1}
.team .pts{font-size:clamp(24px,2.6vw,36px);font-weight:800;line-height:1;margin-left:auto;font-variant-numeric:tabular-nums}
.team.t1{border-color:var(--t1d)} .team.t1 .nm{color:var(--t1)}
.team.t2{border-color:var(--t2d)} .team.t2 .nm{color:var(--t2)}
.team.active{transform:translateY(-2px)}
.team.t1.active{border-color:var(--t1);box-shadow:0 0 0 3px rgba(47,181,240,.22),0 0 26px rgba(47,181,240,.35)}
.team.t2.active{border-color:var(--t2);box-shadow:0 0 0 3px rgba(255,159,46,.22),0 0 26px rgba(255,159,46,.35)}
.adj{display:flex;flex-direction:column;gap:3px}
.adj button{width:26px;height:19px;border:1px solid var(--line);background:var(--panel2);
  color:var(--muted);border-radius:6px;cursor:pointer;font-size:11px;line-height:1;padding:0}
.adj button:hover{background:#2c3b56;color:#fff}

.iconbtn{background:var(--panel);border:2px solid var(--line);color:var(--muted);
  border-radius:12px;width:42px;height:42px;font-size:18px;cursor:pointer}
.iconbtn:hover{color:#fff;border-color:#4a5f85}

/* ---------- Turn bar ---------- */
#turnBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:10px 16px}
#turnBar.t1{border-color:var(--t1d);background:linear-gradient(90deg,rgba(47,181,240,.16),transparent 55%)}
#turnBar.t2{border-color:var(--t2d);background:linear-gradient(90deg,rgba(255,159,46,.16),transparent 55%)}
#turnText{font-weight:800;font-size:clamp(15px,1.5vw,21px);letter-spacing:.4px}
#roundInfo{color:var(--muted);font-size:clamp(12px,1.1vw,15px);margin-left:auto;font-weight:600}

/* three neutral tones so any pack can label its own categories */
.badge{padding:5px 12px;border-radius:999px;font-size:clamp(11px,1vw,13px);
  font-weight:800;letter-spacing:1px;border:2px solid;white-space:nowrap}
.badge.tone-a{color:#7ee2a8;border-color:#2f7a52;background:rgba(61,220,132,.10)}
.badge.tone-b{color:#ff96a1;border-color:#8a3a44;background:rgba(255,93,108,.10)}
.badge.tone-c{color:#a9c4ff;border-color:#3e56a0;background:rgba(120,150,255,.10)}
.badge.tone-d{color:#ffd479;border-color:#8a6a1e;background:rgba(255,212,121,.10)}

/* ---------- Timer ---------- */
#timer{display:flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--panel2);border:2px solid var(--line);border-radius:12px;
  padding:5px 14px;font-variant-numeric:tabular-nums;
  font-weight:800;font-size:clamp(17px,2vw,27px);letter-spacing:1px;
  transition:color .2s,border-color .2s,background .2s}
#timer .clockface{font-size:.72em}
#timer.warn{color:#ffc861;border-color:#8a6a1e;background:rgba(255,200,97,.10)}
#timer.danger{color:#ff7b87;border-color:#8a3a44;background:rgba(255,93,108,.14);
  animation:pulse .9s ease-in-out infinite}
#timer.paused{color:var(--muted);border-style:dashed;animation:none}
#timer.off{color:var(--muted);font-size:clamp(12px,1.1vw,15px);letter-spacing:.5px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- Board ---------- */
#board{display:grid;grid-template-columns:1fr 300px;gap:14px;flex:1;min-height:0}
#stage{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:2px solid var(--line);border-radius:20px;padding:20px 24px;
  display:flex;flex-direction:column;gap:16px;min-height:0;position:relative;overflow:hidden}
#stage.flash-good{animation:flashGood .7s ease}
#stage.flash-bad{animation:flashBad .6s ease}
@keyframes flashGood{0%,100%{box-shadow:none}30%{box-shadow:inset 0 0 90px rgba(61,220,132,.45)}}
@keyframes flashBad{0%,100%{box-shadow:none;transform:translateX(0)}
  15%{transform:translateX(-9px)}30%{transform:translateX(9px)}45%{transform:translateX(-6px)}
  60%{transform:translateX(6px);box-shadow:inset 0 0 90px rgba(255,93,108,.4)}80%{transform:translateX(0)}}

.hint{color:var(--muted);font-size:clamp(13px,1.25vw,17px);font-style:italic;line-height:1.35}
.hint b{color:#cfe0f7;font-style:normal}
#sentence{flex:1;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:9px;align-content:center;overflow:auto;padding:6px}

.blank{min-width:96px;height:60px;border-radius:12px;
  border:2px dashed #48597b;background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .15s}
.blank.over{border-color:var(--good);background:rgba(61,220,132,.16);transform:scale(1.05)}
.blank.filled{border-style:solid;border-color:transparent;background:transparent;padding:0}
.blank.right{box-shadow:0 0 0 3px rgba(61,220,132,.55)}
.blank.wrong{box-shadow:0 0 0 3px rgba(255,93,108,.6)}
.endmark{font-size:clamp(28px,3.4vw,46px);font-weight:800;color:var(--muted);align-self:center}

/* ---------- Tiles ---------- */
.tile{background:var(--tile);color:var(--tileText);
  border:none;border-bottom:4px solid #b9c6dd;border-radius:12px;padding:0 16px;height:60px;
  font-size:clamp(17px,1.9vw,27px);font-weight:700;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.3);transition:transform .12s,box-shadow .12s,background .12s}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.4)}
.tile.selected{background:#ffe9b8;border-bottom-color:#c99a2e;transform:translateY(-3px);
  box-shadow:0 0 0 3px var(--t2),0 8px 18px rgba(0,0,0,.45)}
.tile.dragging{opacity:.25}
.tile.ghost{position:fixed;z-index:9999;pointer-events:none;transform:rotate(-3deg) scale(1.06);
  box-shadow:0 18px 34px rgba(0,0,0,.55);opacity:.97}
/* a word the engine gives the team for free */
.tile.fixed{background:#c9d8ef;color:#2b3a55;border-bottom-color:#8fa4c4;
  cursor:default;box-shadow:inset 0 0 0 2px rgba(43,58,85,.25)}
.tile.fixed:hover{transform:none;box-shadow:inset 0 0 0 2px rgba(43,58,85,.25)}

#trayPanel{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:2px solid var(--line);border-radius:20px;padding:14px;
  display:flex;flex-direction:column;gap:10px;min-height:0}
#trayPanel h3{margin:0;font-size:12px;letter-spacing:1.6px;color:var(--muted);
  text-transform:uppercase;text-align:center}
#tray{flex:1;display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start;justify-content:center;
  overflow:auto;padding:6px;border-radius:12px;border:2px dashed transparent;
  transition:border-color .15s,background .15s}
#tray.over{border-color:#5b7099;background:rgba(255,255,255,.04)}

/* ---------- Controls ---------- */
#controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{font-family:inherit;font-weight:800;font-size:clamp(13px,1.25vw,17px);letter-spacing:.6px;
  border-radius:14px;padding:14px 26px;border:2px solid transparent;cursor:pointer;
  transition:transform .12s,filter .15s,box-shadow .15s}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.check{background:linear-gradient(180deg,#46e08e,#22b268);color:#062615;box-shadow:0 6px 0 #12784a}
.btn.check:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #12784a}
.btn.pass{background:linear-gradient(180deg,#ffb45c,#f08a12);color:#3a1f00;box-shadow:0 6px 0 #a85c00}
.btn.pass:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #a85c00}
.btn.clear{background:var(--panel2);color:var(--muted);border-color:var(--line)}
.btn.big{font-size:clamp(16px,1.8vw,24px);padding:18px 44px}
.btn.blue{background:linear-gradient(180deg,#54c8ff,#1f9ad6);color:#03202e;box-shadow:0 6px 0 #10658f}
#msg{margin-left:auto;font-weight:800;font-size:clamp(14px,1.5vw,20px);text-align:right;min-height:1.2em}
#msg.good{color:var(--good)} #msg.bad{color:var(--bad)} #msg.info{color:var(--muted)}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(6,10,18,.93);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  z-index:500;padding:24px;text-align:center}
.overlay.hidden{display:none}
.overlay h1{margin:0;font-size:clamp(26px,4.6vw,60px);font-weight:900;letter-spacing:2px;line-height:1.05}
.overlay h1 .q{color:var(--t1)} .overlay h1 .t{color:var(--t2)}
.overlay p{margin:0;color:var(--muted);font-size:clamp(14px,1.5vw,20px);max-width:780px;line-height:1.55}
.optrow{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:flex-end}
.opt{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.opt label{font-size:12px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;font-weight:700}
.opt select{font-family:inherit;font-size:16px;font-weight:700;padding:11px 14px;border-radius:12px;
  background:var(--panel2);color:var(--text);border:2px solid var(--line);min-width:210px;cursor:pointer}
.rules{background:var(--panel);border:2px solid var(--line);border-radius:16px;
  padding:16px 24px;max-width:840px;text-align:left}
.rules li{color:var(--muted);font-size:clamp(13px,1.2vw,16px);margin:7px 0;line-height:1.45}
.rules li b{color:var(--text)}
.backlink{position:fixed;top:14px;left:18px;z-index:700;color:var(--muted);
  text-decoration:none;font-weight:700;font-size:13px;background:var(--panel);
  border:2px solid var(--line);border-radius:10px;padding:7px 13px}
.backlink:hover{color:#fff;border-color:#4a5f85}

/* ---------- Wheel ---------- */
#wheelWrap{position:relative;width:min(46vh,320px);aspect-ratio:1}
#wheel{width:100%;height:100%;border-radius:50%;
  border:8px solid #f0f4fb;box-shadow:0 0 0 5px #0c1626,0 18px 46px rgba(0,0,0,.6);
  background:conic-gradient(
    var(--t1) 0deg 45deg,   var(--t2) 45deg 90deg,
    var(--t1) 90deg 135deg, var(--t2) 135deg 180deg,
    var(--t1) 180deg 225deg,var(--t2) 225deg 270deg,
    var(--t1) 270deg 315deg,var(--t2) 315deg 360deg);
  position:relative;transform:rotate(0deg)}
#wheel .lbl{position:absolute;left:50%;top:0;width:7em;height:50%;margin-left:-3.5em;
  transform-origin:50% 100%;display:flex;align-items:flex-start;justify-content:center;
  padding-top:6%;font-weight:900;font-size:clamp(9px,1.25vh,14px);letter-spacing:.5px;
  color:#08131f;white-space:nowrap;pointer-events:none}
#hub{position:absolute;left:50%;top:50%;width:19%;height:19%;transform:translate(-50%,-50%);
  background:#f0f4fb;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:22px}
#pointer{position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;
  border-top:28px solid #f0f4fb;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));z-index:5}
#wheelResult{font-size:clamp(22px,3.6vw,44px);font-weight:900;letter-spacing:2px;min-height:1.3em}
#wheelResult.t1{color:var(--t1)} #wheelResult.t2{color:var(--t2)}

/* ---------- Lucky Cards ---------- */
#luckyScreen{gap:16px;z-index:600}
#luckyStage{display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity .35s,filter .35s}
#luckyStage.dim{opacity:.28;filter:blur(3px)}
#cardGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:min(96vw,900px);width:100%}
@media (max-width:900px){#cardGrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){#cardGrid{grid-template-columns:repeat(3,1fr)}}
.lcard{aspect-ratio:120/168;perspective:1000px;cursor:pointer;border:none;padding:0;background:none}
.lcard .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.4,.05,.2,1)}
.lcard.flipped .inner{transform:rotateY(180deg)}
.lcard .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:11px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.lcard .face.down{display:flex;align-items:center;justify-content:center}
.lcard .face.down svg{width:100%;height:100%;display:block}
.lcard .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,3.1vw,34px);font-weight:900;color:#ffe9b0;
  text-shadow:0 2px 6px rgba(0,0,0,.85);pointer-events:none}
.lcard .face.up{transform:rotateY(180deg);background:linear-gradient(170deg,#f7fafe,#d9e3f2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px;text-align:center;border:2px solid #b9c6dd}
.lcard .face.up .g{font-size:clamp(19px,2.9vw,30px);font-weight:900;line-height:1}
.lcard .face.up .l{font-size:clamp(7px,.92vw,11px);font-weight:800;color:#3a4a66;
  letter-spacing:.3px;line-height:1.15;text-transform:uppercase}
.lcard:not(.used):not(.flipped):hover .inner{transform:translateY(-9px) scale(1.05)}
.lcard:not(.used):not(.flipped):hover .face{box-shadow:0 16px 30px rgba(0,0,0,.6)}
.lcard.used{cursor:not-allowed}
.lcard.used .face.up{filter:grayscale(.55) brightness(.78)}
.lcard.picking .inner{animation:cardPop 1.1s ease}
@keyframes cardPop{0%{transform:rotateY(0) scale(1)}
  40%{transform:rotateY(90deg) scale(1.16)}100%{transform:rotateY(180deg) scale(1)}}

#perkReveal{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:26px;text-align:center}
#perkReveal.hidden{display:none}
#perkGlyph{font-size:clamp(54px,11vw,130px);font-weight:900;line-height:1;
  animation:glyphIn .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes glyphIn{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
#perkTitle{font-size:clamp(26px,5.4vw,66px);font-weight:900;letter-spacing:2px;line-height:1}
#perkDesc{font-size:clamp(17px,2.8vw,34px);font-weight:800;color:var(--text);max-width:900px;line-height:1.35}
.perk-good{color:var(--good)} .perk-bad{color:var(--bad)}
.perk-neutral{color:#ffd479} .perk-swap{color:#9db8ff}
.pts.bump{animation:bump .6s ease}
@keyframes bump{0%,100%{transform:scale(1)}35%{transform:scale(1.5)}}
.pts.neg{color:var(--bad)}

.confetti{position:fixed;width:11px;height:16px;z-index:9998;pointer-events:none;border-radius:2px}

@media (max-width:1000px){
  #board{grid-template-columns:1fr;grid-template-rows:1fr auto}
  #trayPanel{max-height:32vh}
  .team{min-width:150px}
}