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

/* =========================
   SECTION 01: RESET
   ========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:Arial,Helvetica,sans-serif;color:#fff;}

/* =========================
   SECTION 02: BASE THEME (NO VIDEO)
   ========================= */
:root{--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;--danger:#ff3a3a;}
body{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:hidden;}

/* =========================
   SECTION 03: APP WRAPPER (CENTERED EXPERIENCE)
   ========================= */
#app{height:100%;display:flex;flex-direction:column;gap:10px;padding:16px;max-width:600px;margin:0 auto;align-items:center;}

/* =========================
   SECTION 04: TOPBAR (STAYS, INSTRUCTIONS WILL MOVE TO MODAL LATER)
   ========================= */
#topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,0.03);}
#titleBlock{display:flex;flex-direction:column;gap:3px;text-align:center;flex:1;}
#gameTitle{font-size:18px;font-weight:900;letter-spacing:0.2px;}
#gameSubtitle{font-size:12px;color:var(--text2);}
#topbarRight{display:flex;align-items:center;gap:8px;}


/* =========================
   SECTION 05: MAIN LAYOUT (BOARD CENTERED)
   ========================= */
#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 06: 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 07: BUTTONS
   ========================= */
.btn{background:rgba(255,255,255,0.10);border:1px solid var(--stroke2);color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:transform 0.06s,background 0.15s,border-color 0.15s;}
.btn:hover{background:rgba(255,255,255,0.16);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;}

/* =========================
   SECTION 08: SCORE BLOCK (HIDE FOR NOW; MOVING INTO HUD STRIP)
   ========================= */
#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 09: HUD STRIP (COMPACT, INSIDE BOARD CARD)
   ========================= */
#statusStrip{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;margin:0 0 10px 0;padding:0;}
.statusGroup{display:flex;flex-direction:column;gap:2px;padding:0;border:none;background:transparent;min-height:auto;}
.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;}
.nextLetterBox{width:30px;height:30px;border-radius:10px;font-size:15px;letter-spacing:1px;}
.statusGroup .btn{padding:6px 10px;border-radius:10px;font-size:12px;font-weight:800;line-height:1;}



/* =========================
   SECTION 10: BOARD WRAP + LEGEND (LEGEND COMPACT)
   ========================= */
#boardWrap{width:100%;display:flex;flex-direction:column;gap:8px;min-height:0;align-items:center;}
#boardLegend{width:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:0;}
.legendPill{font-size:11px;color:rgba(255,255,255,0.82);padding:5px 9px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);}
.legendPill.danger{background:rgba(255,58,58,0.14);border-color:rgba(255,58,58,0.32);}

/* =========================
   SECTION 11: BOARD GRID (CENTERED)
   ========================= */
#board{display:grid;grid-template-columns:repeat(7,62px);grid-template-rows:repeat(7,62px);gap:8px;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%;}

.cell{display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);font-size: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 12: DANGER ROW STYLING
   ========================= */
.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 13: 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 14: MATCH HIGHLIGHT + POP ANIMATION HOOKS
   ========================= */
.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 15: CONTROLS (HIDE FOR NOW; MOVING INTO HUD STRIP)
   ========================= */
#controls{display:none;}
#controls .btn{flex:1;}

/* =========================
   SECTION 16: RIGHT PANEL WORD LOG (DISABLED; MOVING TO MODAL)
   ========================= */
#wordLogCard{display:none;}
#wordLogHeader{display:none;}
#wordLogTitle{display:none;}
#wordLogSubtitle{display:none;}
#wordLog{display:none;}
.log-item{display:none;}
.log-item.is-seven{display:none;}
.log-word{display:none;}
.log-meta{display:none;}
.tag-seven{display:none;}

/* =========================
   SECTION 17: WORD LOG MODAL (CENTERED, NARROW)
   NOTE: This is styling for the upcoming Word Log modal content area.
   ========================= */
#wordLogModalTitle{font-size:16px;font-weight:900;letter-spacing:0.2px;}
#wordLogModalCount{opacity:0.85;}
#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 18: UTILITY CLASSES
   ========================= */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;}
.hidden{display:none;}
.text-center{text-align:center;}

/* =========================
   SECTION 19: BODY MODAL OPEN (PREVENT SCROLL)
   ========================= */
body.modal-open{overflow:hidden;}

/* =========================
   SECTION 20: RESPONSIVE (KEEP BOARD CENTERED)
   ========================= */
@media (max-width: 620px){
  #app{padding:12px;gap:10px;max-width:600px;}
  #topbar{gap:10px;}
  #gameTitle{font-size:17px;}
  #gameSubtitle{font-size:11px;}
  #statusStrip{grid-template-columns:repeat(2,1fr);gap:8px;}
  #board{grid-template-columns:repeat(7,44px);grid-template-rows:repeat(7,44px);gap:7px;padding:10px;}
  .cell{border-radius:12px;font-size:16px;}
  .nextLetterBox{width:32px;height:32px;font-size:15px;border-radius:10px;}
}


/* =========================
   SECTION 21: PLACEHOLDER
   ========================= */
/* intentionally blank */


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