/* Deployed playable ad styles (copied from playable_ad/styles.css) */
:root {
  --bg: #0a0a0a;
  --panel: #10131a;
  --text: #e8ecf1;
  --muted: #a7b0ba;
  --grid: #1a202a;
  --cell: #1e1e28;
  --accent-green: #00ff88;
  --accent-across: #ff0080;
  --accent-down: #00ffff;
  --danger: #ef4444;
  --brand-pink: #ff00ff;
  --brand-cyan: #00ffff;
  --shadow: 0 6px 18px rgba(0,0,0,0.35);
  --kbd-h: 210px; --rail-h: 56px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; color: var(--text); background: linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 50%,#0a0a0a 100%); overflow:hidden; }
.app { max-width:500px; margin:0 auto; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); height:100%; position:relative; }
.game-header { padding: 8px 6px 2px; }
.header-row { display:flex; align-items:center; }
.header-row .slot { width: 40px; height: 24px; }
.icon-btn { appearance:none; width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: var(--text); display:flex; align-items:center; justify-content:center; text-decoration:none; font-weight:900; box-shadow: var(--shadow); }
.icon-btn:active { transform: translateY(1px); }
.timer { flex:1; display:flex; align-items:center; justify-content:center; }
.timer span { font-weight:900; color:var(--accent-green); letter-spacing:1px; }
.vs-row { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 6px; }
.player-pill { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:16px; border:1px solid; }
.player-pill.you { border-color:#ff2c93; background: rgba(255,44,147,0.15); }
.player-pill.lola { border-color:#00e8ff; background: rgba(0,232,255,0.15); }
.player-pill .name { font-size:10px; font-weight:700; opacity:0.9; }
.player-pill .score { font-size:20px; font-weight:900; }
.vs { font-weight:900; letter-spacing:1px; opacity:0.9; }
.content { padding:6px; height: calc(100% - 140px); overflow:hidden; }
.board-and-clues { display:flex; flex-direction:column; gap:12px; }
.board-wrap { position:relative; }
.grid { display:grid; grid-template-columns: repeat(5,1fr); gap:2px; background:#22283a; padding:3px; border-radius:12px; box-shadow:var(--shadow); }
.cell { aspect-ratio:1/1; background:var(--cell); border-radius:6px; position:relative; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:var(--text); border:1px solid rgba(255,255,255,0.08); }
.cell .num { position:absolute; top:2px; left:3px; font-size:10px; font-weight:800; padding:1px 2px; border-radius:3px; }
.cell.block { background:#05070a; }
.cell.highlight { background: rgba(0,255,136,0.15); border-color: var(--accent-green); }
.cell.revealed { background: rgba(255,255,255,0.07); }
.cell.celebrate { transform: scale(1.06); transition: transform 200ms ease; }
.cell.correct-flash { box-shadow: 0 0 0 2px rgba(0,255,136,0.7) inset, 0 0 16px rgba(0,255,136,0.4); animation: correctFlash 380ms ease-out; }
.points-pop { position: fixed; z-index: 100; font-weight: 1000; transform: translate(-50%, -50%); animation: popUp 1400ms cubic-bezier(.2,.8,.2,1) forwards; padding:6px 12px; border-radius:999px; letter-spacing:0.4px; background: linear-gradient(90deg, var(--brand-pink), var(--brand-cyan)); color:#0a0d12; border:1px solid rgba(255,255,255,0.25); box-shadow:0 6px 18px rgba(0,0,0,0.35), 0 0 20px rgba(0,255,255,0.25); }
.cell .letter { transform: translateY(0); transition: transform 150ms ease; }
.cell.wrong { animation: shake 150ms linear; }
@keyframes shake { 0%{ transform:translateX(0);} 33%{ transform:translateX(-2px);} 66%{ transform:translateX(2px);} 100%{ transform:translateX(0);} }
@keyframes correctFlash { from { box-shadow: 0 0 0 0 rgba(0,255,136,0.0) inset, 0 0 0 rgba(0,255,136,0.0);} to { box-shadow: 0 0 0 2px rgba(0,255,136,0.7) inset, 0 0 16px rgba(0,255,136,0.4);} }
@keyframes popUp { 0% { opacity:0; transform: translate(-50%,-50%) scale(0.7);} 18% { opacity:1; transform: translate(-50%,-62%) scale(1.06);} 24% { opacity:1; transform: translate(-50%,-65%) scale(1.0);} 86% { opacity:1; transform: translate(-50%,-65%) scale(1.0);} 100% { opacity:0; transform: translate(-50%,-65%) scale(1.0);} }
.clues { display:flex; gap:8px; }
.clue-section { flex:1; }
.clue-header { padding:6px 8px; border:1px solid; border-radius:8px 8px 0 0; font-size:12px; font-weight:800; letter-spacing:1px; text-align:center; }
.clue-header.across { border-color: var(--accent-across); background: rgba(255,0,128,0.25); color:#ff80c0; }
.clue-header.down { border-color: var(--accent-down); background: rgba(0,255,255,0.25); color:#80ffff; }
.clue-list { border:1px solid rgba(255,255,255,0.12); border-top:0; border-radius:0 0 8px 8px; background:rgba(0,0,0,0.2); padding:6px; height:24vh; overflow:auto; }
.clue-item { padding:8px; border:1px solid rgba(255,255,255,0.1); border-radius:6px; margin-bottom:6px; background: rgba(255,255,255,0.04); display:flex; gap:6px; }
.clue-item.selected { border-color: var(--accent-green); background: rgba(0,255,136,0.18); }
.clue-item.solved { opacity:0.75; }
.clue-item.solved .clue-text { text-decoration: line-through; text-decoration-thickness:2px; text-decoration-color: rgba(255,255,255,0.5); }
.solver-emoji { margin-left:6px; font-size:14px; vertical-align:baseline; }
.clue-num { font-size:12px; font-weight:900; }
.clue-text { font-size:12px; }
.clue-len { opacity:0.8; font-size:11px; margin-left:4px; }
.num.across { color: var(--accent-across); background: rgba(255,0,128,0.15); }
.num.down { color: var(--accent-down); background: rgba(0,255,255,0.15); }
.input-rail { position:fixed; left:50%; transform: translateX(-50%); bottom:0; width:min(500px,100vw); display:flex; align-items:center; gap:6px; padding:8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); border-top:1px solid rgba(255,255,255,0.1); z-index:20; }
.app:not(.keyboard-open) .input-rail { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.rail-btn { width:36px; height:36px; border:1px solid rgba(255,255,255,0.2); background:transparent; color:var(--text); border-radius:8px; }
.clue-center { flex:1; display:flex; flex-direction:column; gap:6px; }
.clue-center-label { text-align:center; font-weight:700; font-size:12px; opacity:0.95; color:var(--accent-green); }
.answer-input { width:100%; height:40px; border-radius:10px; border:2px solid rgba(255,255,255,0.2); background: rgba(30,30,40,0.9); color:var(--text); font-weight:700; letter-spacing:2px; text-align:center; }
.answer-input.error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.2) inset; }
.submit { height:36px; padding:0 16px; border-radius:10px; border:0; font-weight:900; background: linear-gradient(90deg, var(--accent-green), #00cc6a); color:#0a0d12; }
.keyboard { position:fixed; left:50%; transform: translateX(-50%); bottom:0; width:min(500px,100vw); background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-top:1px solid rgba(255,255,255,0.15); padding:8px 8px calc(18px + env(safe-area-inset-bottom)); z-index:10; }
.keyboard.hidden { display:none; }
.kbd-keys { display:flex; flex-direction: column; gap:8px; }
.kbd-row { display:flex; justify-content:center; gap:6px; }
.kbd-row.row2 { padding-left:10px; }
.kbd-row.row3 { padding-left:20px; }
.key { user-select:none; background:#1a2130; border:1px solid #2b3546; border-radius:8px; height:38px; min-width:30px; padding:0 8px; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: var(--shadow); }
.key:active { transform: translateY(1px); }
.key.wide { grid-column: span 2; }
.app.keyboard-open .input-rail { bottom: var(--kbd-h); }
.app.keyboard-open .content { overflow:auto; padding-bottom: calc(var(--kbd-h) + var(--rail-h) + 16px); }
.app.keyboard-open .clue-list { min-height:72px; }
.toast { position:fixed; left:50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); background:#1a2130; border:1px solid #2b3546; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition: opacity 160ms ease; }
.toast.show { opacity:1; }
.end-card { position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,0.6); }
.end-card.hidden { display:none; }
.end-card .card { width:88%; max-width:420px; background:#0e131a; border:1px solid #2b3546; padding:18px; border-radius:14px; text-align:center; box-shadow:var(--shadow); }
.end-card .end-close { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#e8ecf1; text-decoration:none; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); box-shadow: var(--shadow); }
.end-card .headline { font-size:20px; font-weight:800; margin-bottom:12px; }
.store-buttons { display:flex; gap:10px; justify-content:center; }
.store-btn { appearance:none; border:0; font-weight:900; border-radius:12px; height:44px; padding:0 16px; color:#0a0d12; box-shadow: var(--shadow); }
.store-btn.apple { background: linear-gradient(90deg, var(--brand-pink), #00a0ff); }
.store-btn.google { background: linear-gradient(90deg, var(--accent-green), var(--brand-cyan)); }
@media (min-width: 420px) { .cell { font-size:22px; } }
.splash { position:fixed; inset:0; display:grid; place-items:center; background: radial-gradient(120% 120% at 50% 0%, #0f1724 0%, #0a0f18 55%, #05070a 100%); z-index:50; padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom); opacity:1; transition: opacity 260ms ease; }
.splash.fading { opacity:0; }
.splash.hidden { display:none; }
.splash-card { width:100%; max-width:none; background:transparent; border:0; border-radius:0; padding:6vh 16px 8vh; text-align:center; animation: popIn 380ms cubic-bezier(.2,.8,.2,1) both; }
.splash-title { margin-bottom:10px; text-align:center; }
.splash-title .brand-line1 { font-size:34px; font-weight:1000; letter-spacing:2px; background: linear-gradient(90deg, var(--brand-pink), var(--brand-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 20px rgba(255,0,255,0.25), 0 0 20px rgba(0,255,255,0.25); animation: titleGlow 1600ms ease-in-out infinite alternate; }
.splash-title .brand-line2 { font-size:25.5px; font-weight:700; letter-spacing:3px; color:var(--brand-cyan); opacity:0.95; text-shadow:0 0 16px rgba(0,255,255,0.4); margin-top:2px; }
.splash-sub { font-size:14px; opacity:0.9; margin-bottom:20px; }
.splash-vs { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:24px; animation: floatIn 500ms ease 120ms both; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
.splash-vs .pill { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); box-shadow: 0 0 18px rgba(0,255,255,0.12); }
.splash-vs .pill.you { border-color:#ff2c93; background: rgba(255,44,147,0.18); box-shadow:0 0 16px rgba(255,44,147,0.25); }
.splash-vs .pill.lola { border-color:#00e8ff; background: rgba(0,232,255,0.18); box-shadow:0 0 16px rgba(0,232,255,0.25); }
.splash-vs .emoji { font-size:20px; line-height:1; }
.splash-vs .label { font-weight:900; font-size:13px; letter-spacing:0.6px; }
.splash-vs .vs { font-weight:1000; font-size:20px; letter-spacing:1.2px; background: linear-gradient(90deg, var(--brand-pink), var(--brand-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(255,0,255,0.35), 0 0 18px rgba(0,255,255,0.35); animation: vsPulse 1600ms ease-in-out infinite; }
.splash-vs.big { gap:20px; margin:14px 0 26px; }
.splash-vs.big .player { display:flex; flex-direction:column; align-items:center; gap:8px; }
.splash-vs.big .avatar-circle { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:42px; background:#0e131a; border:2px solid rgba(255,255,255,0.2); box-shadow:0 0 24px rgba(0,0,0,0.45), inset 0 0 12px rgba(255,255,255,0.03); position:relative; }
.splash-vs.big .you .avatar-circle { border-color:#ff2c93; box-shadow:0 0 20px rgba(255,44,147,0.35), inset 0 0 12px rgba(255,44,147,0.15); }
.splash-vs.big .lola .avatar-circle { border-color:#00e8ff; box-shadow:0 0 20px rgba(0,232,255,0.35), inset 0 0 12px rgba(0,232,255,0.15); }
.splash-vs.big .name { font-weight:900; font-size:14px; letter-spacing:0.6px; opacity:0.95; }
.splash-vs.big .vs { font-size:22px; font-weight:1000; letter-spacing:1.4px; background: linear-gradient(90deg, var(--brand-pink), var(--brand-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 20px rgba(255,0,255,0.4), 0 0 20px rgba(0,255,255,0.4); animation: vsPulse 1400ms ease-in-out infinite; }
@media (max-height:720px){ .splash-vs.big .avatar-circle { width:74px; height:74px; font-size:36px; } }
@media (max-width:360px){ .splash-vs.big .avatar-circle { width:70px; height:70px; font-size:34px; } }
@keyframes vsPulse { 0%{ transform:scale(1);} 50%{ transform:scale(1.08);} 100%{ transform:scale(1);} }
.splash-cta { font-weight:900; color:var(--accent-green); font-size:14px; opacity:0.95; animation: floatIn 500ms ease 200ms both; }
@keyframes titleGlow { from { text-shadow:0 0 8px rgba(255,0,255,0.18), 0 0 8px rgba(0,255,255,0.18);} to { text-shadow:0 0 16px rgba(255,0,255,0.35), 0 0 24px rgba(0,255,255,0.30);} }
@keyframes popIn { from { opacity:0; transform: translateY(6px) scale(0.98);} to { opacity:1; transform: translateY(0) scale(1);} }
@keyframes floatIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }