/* AI_TAG: FRONTEND_COMPONENT | TicTacPige layout and visuals */
:root{ --bg:#0b1016; --panel:#0e1622; --accent:#4da3ff; --soft:#eaf2ff; --grid:#0f1823 }
#wrap{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
header{padding:16px 20px;background:linear-gradient(180deg,#0f1722,#0b1016)}
header h1{margin:0 0 6px;font-size:20px;color:var(--soft)}
header .sub{opacity:.75;font-size:13px}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
#stageWrap{position:relative;display:flex;gap:16px;align-items:flex-start;justify-content:center;background:radial-gradient(1200px 600px at 25% -10%, #1d3b5e 0%, #0e1622 55%);padding:16px;border-radius:14px;box-shadow:0 10px 40px #0008, inset 0 0 0 1px #ffffff12}
#board{display:block;background:#0a141e;border-radius:12px;box-shadow:inset 0 6px 22px #000d;border:1px solid #22354d}
#side{width:240px;display:flex;flex-direction:column;gap:10px}
.chip{background:linear-gradient(135deg,#0e1a28,#0c1522);border:1px solid #2a4668;box-shadow:0 3px 12px #000a;backdrop-filter:blur(6px);color:#e8f1ff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.panel{background:linear-gradient(135deg,#0c141e,#0b121c);border:1px solid #22354d;border-radius:12px;padding:10px;box-shadow:inset 0 0 0 1px #ffffff0d}
.panel-title{font-size:12px;opacity:.8;margin:2px 0 8px}
.panel .row{display:flex;gap:8px;margin-bottom:8px}
#help{opacity:.7;font-size:12px}
footer{padding:14px 20px;border-top:1px solid #101824;background:#0a111b}
footer .back{color:var(--accent);text-decoration:none}

/* Overlay */
#overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center}
#overlay .card{background:linear-gradient(135deg,rgba(17,26,38,.95),rgba(20,30,42,.95));border:1px solid rgba(118,190,255,0.35);box-shadow:0 14px 50px rgba(0,0,0,0.5), 0 0 60px rgba(118,190,255,0.2);border-radius:14px;padding:22px 20px;text-align:center;max-width:320px}
#overlay .card #overlayTitle{font-size:22px;font-weight:900;margin-bottom:6px;color:#eef5ff;text-shadow:0 2px 8px rgba(118,190,255,0.35)}
#overlay .card #overlaySub{font-size:13px;opacity:.8;margin-bottom:14px}
#overlay .actions{display:flex;gap:8px;justify-content:center}
#overlay button{cursor:pointer;padding:8px 12px;border-radius:10px;border:1px solid rgba(118,190,255,0.25);background:linear-gradient(180deg, rgba(118,190,255,0.12), rgba(118,190,255,0.04));color:#e6f3ff;font-weight:800;letter-spacing:.3px;}

/* Touch Controls */
@media (pointer: coarse){
  #touchControls{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:5}
  #touchControls button{border-radius:12px;border:1px solid #294a6c;background:linear-gradient(135deg,#0e1a28,#0c1522);color:#e8f1ff;font-weight:800;box-shadow:0 6px 20px #000a;min-width:72px;min-height:44px}
  #touchControls .primary{min-width:120px;min-height:56px}
}