/* SECTION 01 — THEME TOKENS */
:root{--bg:#0f1115;--panel:#151925;--panel2:#10131b;--text:#e9ecf1;--muted:#aab2c0;--line:#2a3142;--slot:#1b2130;--slot2:#0f1422;--accent:#6ee7ff;--bad:#ff6e6e;--good:#7dffb0;--bar:#1e1e1e;--stage:600px;--headerH:64px;--footerH:20px;--topGap:10px;--bottomGap:10px;--adAnchorH:60px;--overlayShift:-70px;--sideTop:200px;--trayLift:-110px;}
:root{--bottomGap:5px;}

/* SECTION 02 — GLOBAL RESET */
*{box-sizing:border-box;} html,body{height:100%;} body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#1a2236 0%,var(--bg) 55%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

/* SECTION 03 — FIXED HEADER */
.gameHeader{position:fixed;top:0;left:0;width:100%;height:var(--headerH);z-index:1000;display:flex;justify-content:center;pointer-events:none;}
.gameHeader .bar{width:min(var(--stage),100%);height:var(--headerH);background:var(--bar);display:flex;align-items:center;pointer-events:auto;}
.gameHeader .barGrid{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;}
.gameHeader .barLeft{justify-self:start;font-weight:800;font-size:12px;letter-spacing:.14em;color:#fff;}
.gameHeader .barTitle{justify-self:center;font-weight:900;font-size:16px;letter-spacing:.20em;color:#fff;}
.gameHeader .barRight{justify-self:end;min-width:36px;}

/* SECTION 04 — APP MUST LIVE BETWEEN BARS */
.topbar{display:none;} .status{display:none;}
.app{width:100%;max-width:980px;margin:0 auto;padding:calc(var(--headerH) + var(--topGap)) 14px calc(var(--footerH) + var(--bottomGap));display:flex;flex-direction:column;gap:14px;align-items:stretch;min-height:calc(100vh - var(--headerH) - var(--footerH));}

/* SECTION 05 — STAGE + SCALE IMAGE (VISUAL TOP = header + 10px) */ 
.scaleStage{position:relative;width:min(var(--stage),100%);height:auto;display:flex;align-items:flex-start;justify-content:center;margin:0 auto;z-index:1;}
.scaleImage{display:block;width:100%;height:auto;pointer-events:none;user-select:none;position:relative;z-index:1;}
.board.overlay{position:absolute;inset:0;pointer-events:auto;margin:0;z-index:2;transform:translateY(var(--overlayShift));}
.divider{display:none;}


/* SECTION 06 — SIDES (PANS) */
.side{background:transparent;border:none;border-radius:0;padding:0;position:absolute;}
#side-left{left:-20px;top:200px;width:290px;display:flex;justify-content:center;}
#side-right{right:-20px;top:200px;width:290px;display:flex;justify-content:center;}
.sideHeader{display:none;}
.words{display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;width:100%;}
.wordRow{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:0;min-height:0;width:100%;position:relative;}
.wordMeta{display:none;}
.slots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;max-width:290px;}

/* SECTION 07 — SLOT TILES */
.slot{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,var(--slot),var(--slot2));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;user-select:none;cursor:pointer;position:relative;}
.slot.empty{color:#48506a;} .slot.filled{color:var(--text);}
/*.slot.active{outline:2px solid var(--accent);outline-offset:2px;}
.slot.active::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:1px solid rgba(110,231,255,0.25);}
*/
/* SECTION 08 — CELL LAYOUT */
.cell{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.cell .ch{font-weight:900;font-size:18px;}
.cell .wt{margin-top:4px;font-size:10px;color:var(--muted);font-weight:800;}
.slot .cell .wt{opacity:0.95;} .slot.empty .cell .wt{opacity:0.55;}

/* SECTION 09 — TRAY */
.trayWrap{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;width:min(var(--stage),100%);margin:-175px auto;position:relative;z-index:3;}
.trayHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;}
.trayTitle{font-weight:800;font-size:13px;letter-spacing:0.08em;color:#cfe0ff;}
.trayControls{display:flex;gap:8px;position:relative;}
.btn{background:#0f1422;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 10px;font-weight:800;font-size:12px;cursor:pointer;}
.btn:active{transform:translateY(1px);}
.tray{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:58px;padding:4px 0;width:100%;}
.tile{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#1d2440,#10162a);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;cursor:pointer;user-select:none;}
.tile:active{transform:translateY(1px);}
.hintRow{display:flex;justify-content:center;}
.hint{font-size:12px;color:var(--muted);text-align:center;}
.dragging{opacity:.8;}
.dropping{outline:2px dashed rgba(110,231,255,0.35);outline-offset:2px;}


/* SECTION 10 — SCORE RATIOS */
.wordRatio,.sideTotalText{font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;}
.wordRatio .cur,.wordRatio .sep,.wordRatio .tot,.sideTotalText .cur,.sideTotalText .sep,.sideTotalText .tot{color:#fff;}
.wordRatio .cur.over,.sideTotalText .cur.over{color:var(--bad);}
.wordRatio{position:absolute;top:50%;transform:translateY(-50%);margin:0;white-space:nowrap;}
.wordRow[data-side="left"][data-word-index="0"] .wordRatio{right:9px;}
.wordRow[data-side="left"][data-word-index="1"] .wordRatio{right:-15px;}
.wordRow[data-side="right"][data-word-index="0"] .wordRatio{left:10px;}
.wordRow[data-side="right"][data-word-index="1"] .wordRatio{left:-14px;}
.sideTotalText{position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);font-size:13px;white-space:nowrap;}

/* SECTION 11 — CHECK MENU */
#btnCheck{min-width:40px;}
.checkMenu{position:absolute;right:0;top:-6px;transform:translateY(-100%);background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:6px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.35);}
.checkMenu[hidden]{display:none;}
.checkMenu .menuItem{background:#0f1422;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 10px;font-weight:800;font-size:12px;cursor:pointer;text-align:left;}
.checkMenu .menuItem:hover{filter:brightness(1.08);}
.checkMenu .menuItem.isOn{outline:2px solid rgba(125,255,176,.35);}

/* SECTION 12 — WORD LOCK VISUAL */
.wordRow.isLocked .slot{outline:2px solid rgba(125,255,176,.55);outline-offset:2px;}
.wordRow.isLocked .slot::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:1px solid rgba(125,255,176,.25);}
.wordRow.isLocked .slot,.wordRow.isLocked .slot *{cursor:not-allowed;}
.wordRow.isLocked .slot{pointer-events:none;}
.wordRow.isLocked .wordRatio{color:var(--good);}

/* SECTION 13 — CHECK ENABLED GLOW */
#btnCheck.isEnabled{outline:2px solid rgba(125,255,176,.6);outline-offset:2px;box-shadow:0 0 0 2px rgba(125,255,176,.15),0 0 14px rgba(125,255,176,.45);}

/* SECTION 14 — HOW TO PLAY MODAL */
#howToOverlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;}
#howToOverlay[hidden]{display:none;}
#howToModal{width:90%;max-width:calc(var(--stage) * 0.9);max-height:calc(100vh - (var(--headerH) + var(--footerH) + 40px));overflow:auto;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:20px 22px;color:var(--text);position:relative;}
#howToModal h2{margin:0 0 10px;font-size:20px;letter-spacing:.08em;}
#howToModal h3{margin:14px 0 6px;font-size:14px;letter-spacing:.06em;}
#howToModal p{margin:0 0 10px;font-size:13px;line-height:1.45;}
#howToModal ul{margin:8px 0 0 18px;}
#howToModal li{margin:6px 0;font-size:13px;line-height:1.45;}
#howToClose{position:absolute;top:10px;right:12px;background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;}


/* SECTION 90 — MOBILE (≤ 640px) */
@media (max-width:640px){
  :root{--topGap:10px;--bottomGap:5px;}

  .header-title{font-size:18px;letter-spacing:.10em;}
  .header-left{font-size:13px;}

  #side-left{left:2%;top:34%;width:46%;}
  #side-right{right:2%;top:34%;width:46%;}

  .trayWrap{margin:-140px auto;}
}

/* SECTION 91 — SMALL MOBILE (≤ 420px) */
@media (max-width:420px){
  .slot{width:40px;height:40px;border-radius:10px;font-size:17px;}
  .tile{width:42px;height:42px;border-radius:12px;font-size:17px;}

  .cell .ch{font-size:17px;}
  .cell .wt{font-size:9px;margin-top:3px;}

  .slots{gap:5px;}
  .tray{gap:8px;}

  .wordRatio,.sideTotalText{font-size:11px;}
}

/* SECTION 154 — AD ZONE BASE */
.ad-zone{min-height:var(--adAnchorH);height:var(--adAnchorH);border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;}
/* SECTION 155 — DESKTOP ADS (SHOW RAILS) */
@media (min-width:641px){#ad-left-rail,#ad-right-rail{width:160px;min-height:600px;}}

/* SECTION 156 — BOTTOM ANCHOR (FIXED: bottom = footer + bottomGap) */
#ad-mobile-anchor{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--footerH) + var(--bottomGap));width:calc(100% - 28px);max-width:600px;height:var(--adAnchorH);z-index:950;}
.app{padding-bottom:calc(var(--footerH) + var(--bottomGap) + var(--adAnchorH) + 12px);}
@media (max-width:640px){#ad-left-rail,#ad-right-rail{display:none!important;}}

/* SECTION 157 — DESKTOP APP GRID (RAILS + 600 CENTER) */ @media (min-width:641px){.app{max-width:980px;margin:0 auto;padding:calc(var(--headerH) + var(--topGap)) 14px calc(var(--footerH) + var(--bottomGap));display:grid;grid-template-columns:160px 600px 160px;grid-auto-rows:auto;column-gap:18px;justify-content:center;align-items:start;min-height:calc(100vh - var(--headerH) - var(--footerH));}}
/* SECTION 158 — GRID PLACEMENT */ @media (min-width:641px){#ad-left-rail{grid-column:1;grid-row:1/span 2;} .scaleStage{grid-column:2;grid-row:1;} .trayWrap{grid-column:2;grid-row:2;} #ad-right-rail{grid-column:3;grid-row:1/span 2;} #ad-post-game{grid-column:2;grid-row:3;}}
/* SECTION 159 — RAIL STICKY */ @media (min-width:641px){#ad-left-rail,#ad-right-rail{position:sticky;top:calc(var(--headerH) + var(--topGap));align-self:start;}}




/* SECTION 999 — HIDE SCROLLBAR (SCROLL STILL WORKS) */
html{
  scrollbar-width:none;          /* Firefox */
}
html::-webkit-scrollbar{
  display:none;                  /* Chrome / Edge / Safari */
}