/* WordPop FILE: /css/style.css */

/* SECTION 01 — RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;color:#fff;}

/* SECTION 02 — BASE THEME */
:root{--appFont:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--sgMenuFontFamily:var(--appFont);--bg0:#070812;--bg1:#0b0d1d;--card:rgba(255,255,255,0.06);--card2:rgba(255,255,255,0.09);--stroke:rgba(255,255,255,0.14);--stroke2:rgba(255,255,255,0.22);--text2:rgba(255,255,255,0.78);--good:#8eff8e;--bad:#ff8e8e;--warn:#ffd28e;--accent:#9aa8ff;--accent2:#ff86c8;--accent3:#7bffda;--danger:#ff3a3a;--stage:600px;--headerH:60px;--footerH:20px;--bar:#1e1e1e;--uiPad:16px;--tile:clamp(38px,calc((min(100vw,var(--stage)) - (var(--uiPad)*2) - 12px) / 7),62px);--tileGap:clamp(4px,calc(var(--tile)/10),7px);--tileRadius:clamp(10px,calc(var(--tile)/4.8),14px);--btnRadius:12px;--btnBg:rgba(255,255,255,0.10);--btnBgHover:rgba(255,255,255,0.16);}
body{font-family:var(--appFont);background:radial-gradient(1200px 800px at 25% 20%, rgba(80,95,255,0.18), transparent 60%),radial-gradient(900px 600px at 80% 70%, rgba(255,120,180,0.12), transparent 55%),linear-gradient(180deg,var(--bg0),var(--bg1));overflow-x:hidden;overflow-y:hidden;}

/* 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 05 — SCROLL AREA + STAGE */
.scrollArea{min-height:calc(100vh - var(--headerH) - var(--footerH));padding-top:var(--headerH);padding-bottom:var(--footerH);overflow-x:hidden;overflow-y:auto;}
.stage{width:min(var(--stage),100%);margin:0 auto;}


/* SECTION 06 — APP WRAPPER */
#app{height:100%;display:flex;flex-direction:column;gap:12px;padding:var(--uiPad) var(--uiPad) 18px;max-width:600px;margin:0 auto;align-items:center;}

/* SECTION 07 — MAIN LAYOUT */
#layout{flex:1;display:flex;justify-content:center;align-items:center;min-height:0;width:100%;}
#leftPanel{width:100%;display:flex;flex-direction:column;gap:10px;min-height:0;align-items:center;}
#rightPanel{display:none;}

/* SECTION 08 — CARDS */
.card{width:100%;background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:10px 12px;box-shadow:0 0 18px rgba(0,0,0,0.35);}
.card:hover{border-color:rgba(255,255,255,0.18);}

/* SECTION 09 — BUTTONS */
.btn{background:var(--btnBg);border:1px solid var(--stroke2);color:#fff;padding:10px 14px;border-radius:var(--btnRadius);font-size:14px;font-weight:800;cursor:pointer;transition:transform 0.06s,background 0.15s,border-color 0.15s,filter 0.15s;}
.btn:hover{background:var(--btnBgHover);border-color:rgba(255,255,255,0.28);}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:transparent;}
.btn.danger{background:rgba(255,58,58,0.14);border-color:rgba(255,58,58,0.45);}
button:disabled{opacity:0.5;cursor:default;}
#openWordLogBtn{background:linear-gradient(180deg,rgba(154,168,255,0.20),rgba(154,168,255,0.10));border-color:rgba(154,168,255,0.45);box-shadow:0 0 14px rgba(154,168,255,0.10);}
#openWordLogBtn:hover{background:linear-gradient(180deg,rgba(154,168,255,0.28),rgba(154,168,255,0.14));border-color:rgba(154,168,255,0.60);}
#shuffleBtn{background:linear-gradient(180deg,rgba(123,255,218,0.22),rgba(123,255,218,0.10));border-color:rgba(123,255,218,0.48);box-shadow:0 0 14px rgba(123,255,218,0.10);}
#shuffleBtn:hover{background:linear-gradient(180deg,rgba(123,255,218,0.30),rgba(123,255,218,0.14));border-color:rgba(123,255,218,0.64);}
#restartBtn{background:linear-gradient(180deg,rgba(255,134,200,0.20),rgba(255,134,200,0.10));border-color:rgba(255,134,200,0.48);box-shadow:0 0 14px rgba(255,134,200,0.10);}
#restartBtn:hover{background:linear-gradient(180deg,rgba(255,134,200,0.28),rgba(255,134,200,0.14));border-color:rgba(255,134,200,0.64);}
.btn.iconBtn{padding:10px 12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1;font-size:16px;border-radius:14px;}
.btn.iconBtn.off{opacity:0.42;filter:saturate(0.5);}
#helpBtn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.20);color:#fff;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform 0.06s,background 0.15s,border-color 0.15s,opacity 0.15s;}
#helpBtn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.30);opacity:0.98;}
#helpBtn:active{transform:translateY(1px);}

/* SECTION 10 — SCORE BLOCK */
#scoreBlock{display:none;}
.scoreRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);}
.scoreLabel{font-size:13px;color:var(--text2);}
.scoreValue{font-size:16px;font-weight:800;color:#fff;letter-spacing:0.2px;}

/* SECTION 11 — HUD STRIP */
#statusStrip.hudGrid{width:100%;display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;grid-template-rows:auto auto;gap:10px;align-items:start;margin:0;padding:0;}
.statusLabel{font-size:11px;color:rgba(255,255,255,0.70);line-height:1.05;}
.statusValue{font-size:13px;font-weight:900;line-height:1.1;}
#statusStrip.hudGrid .btn{padding:8px 10px;border-radius:12px;font-size:12px;font-weight:900;line-height:1;}
.hudNext{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;}
.nextLetterBox{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);box-shadow:0 0 14px rgba(0,0,0,0.25);font-size:22px;font-weight:900;letter-spacing:1px;line-height:1;}
.hudWords{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;margin-left:8px;}
.hudLetters{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:2px;margin-left:8px;}
.hudWordLogBtn{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:2px;align-self:start;justify-self:start;}
.hudLastWord{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:2px;max-width:180px;}
#lastWordText{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hudShuffleRemaining{grid-column:4;grid-row:1;display:flex;flex-direction:column;gap:2px;}
.hudShuffleBtn{grid-column:4;grid-row:2;display:flex;flex-direction:column;gap:2px;align-self:end;justify-self:start;}
.hudShuffleBtn .btn{padding:10px 12px;border-radius:14px;font-size:16px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
.hudHowTo{grid-column:5;grid-row:1;justify-self:end;align-self:start;display:flex;align-items:flex-start;}
.hudSpacer{grid-column:5;grid-row:2;}
#message{grid-column:1 / -1;grid-row:3;min-height:18px;font-size:12px;font-weight:800;opacity:0.92;}

/* SECTION 12 — UI ACTIONS */
#uiActions{display:none;}

/* SECTION 13 — BOARD WRAP */
#boardWrap{width:100%;display:flex;flex-direction:column;gap:8px;min-height:0;align-items:center;overflow:hidden;}

/* SECTION 14 — BOARD GRID */
#board{display:grid;grid-template-columns:repeat(7,var(--tile));grid-template-rows:repeat(7,var(--tile));gap:var(--tileGap);justify-content:center;align-content:center;padding:6px 0 2px 0;border-radius:0;background:transparent;border:none;user-select:none;min-height:0;width:100%;touch-action:manipulation;}
.cell{display:flex;align-items:center;justify-content:center;border-radius:var(--tileRadius);border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);font-size:clamp(14px,calc(var(--tile)/3.2),18px);font-weight:900;letter-spacing:1px;transition:transform 0.07s,background 0.12s,border-color 0.12s,box-shadow 0.12s,filter 0.12s;}
.cell.empty{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10);}
.cell:hover{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.07);}

/* SECTION 15 — DANGER ROW */
.cell.danger-row{background:rgba(255,58,58,0.10);border-color:rgba(255,58,58,0.28);}
.cell.danger-row.empty{background:rgba(255,58,58,0.06);border-color:rgba(255,58,58,0.20);}
.cell.danger-row:not(.empty){box-shadow:0 0 18px rgba(255,58,58,0.18);}

/* SECTION 16 — COLUMN HOVER */
#board.hovering .cell.colHover{background:rgba(154,168,255,0.14);border-color:rgba(154,168,255,0.30);}
#board.hovering .cell.danger-row.colHover{background:rgba(255,58,58,0.14);border-color:rgba(255,58,58,0.36);}

/* SECTION 17 — MATCH + POP ANIMATION */
.cell.match{background:rgba(255,210,142,0.18);border-color:rgba(255,210,142,0.40);box-shadow:0 0 18px rgba(255,210,142,0.14);}
.cell.pop{animation:popPulse 0.16s ease-in-out 1;}
@keyframes popPulse{0%{transform:scale(1);}60%{transform:scale(1.06);}100%{transform:scale(0.98);}}

/* SECTION 18 — CONTROLS */
#controls{display:none;}
#controls .btn{flex:1;}

/* SECTION 19 — RIGHT PANEL WORD LOG */
#wordLogCard{display:none;}
#wordLogHeader{display:none;}
#wordLogTitle{display:none;}
#wordLogSubtitle{display:none;}
#wordLog{display:none;}

/* SECTION 20 — WORD LOG MODAL */
#wordLogModalList{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:54vh;overflow:auto;padding:10px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.12);}
#wordLogModalList::-webkit-scrollbar{width:10px;}
#wordLogModalList::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:999px;border:2px solid rgba(0,0,0,0.22);}
#wordLogModalList::-webkit-scrollbar-track{background:transparent;}

/* SECTION 21 — UTILITY */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;}
.hidden{display:none;}
.text-center{text-align:center;}

/* SECTION 22 — BODY MODAL OPEN */
body.modal-open{overflow:hidden;}
body.modal-open .gameHeader .bar{pointer-events:none;}
body.modal-open .gameFooter{pointer-events:none;}
body.modal-open .scrollArea{pointer-events:none;}
body.modal-open .modal{pointer-events:auto;}

/* SECTION 23 — RESPONSIVE */
@media (max-width:620px){
  :root{--uiPad:12px;}
  #app{padding:var(--uiPad);gap:10px;max-width:600px;}
  #statusStrip.hudGrid{grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto auto;gap:8px;}
  .hudNext{grid-column:1;grid-row:1 / span 3;}
  .nextLetterBox{width:40px;height:40px;font-size:20px;border-radius:12px;}
  .hudWords{grid-column:2;grid-row:1;margin-left:0;}
  .hudLetters{grid-column:3;grid-row:1;margin-left:0;}
  .hudWordLogBtn{grid-column:2;grid-row:2;}
  .hudLastWord{grid-column:3;grid-row:2;max-width:140px;}
  #lastWordText{max-width:140px;}
  .hudShuffleRemaining{grid-column:2;grid-row:3;}
  .hudShuffleBtn{grid-column:3;grid-row:3;justify-self:end;}
  .hudHowTo{grid-column:2 / span 2;grid-row:4;justify-self:end;}
  #statusStrip.hudGrid .btn{font-size:12px;}
}

/* SECTION 24 — PLACEHOLDER */
 /* intentionally blank */

/* SECTION 25 — HIDE LEGEND PILLS */
#boardLegend{display:none !important;}

/* SECTION 60 — SG MENU SAFETY */
.sgMenuPanel{
  position:fixed;
  background:#2b2b2b;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:14px;
  max-height:calc(100vh - var(--headerH) - 24px);
  overflow:auto;
  font-family:var(--sgMenuFontFamily);
  line-height:1.25;
}



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