*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:0 16px 48px;background:#f4f1ea;color:#222;line-height:1.5;font-size:16px}
.container{max-width:760px;margin:0 auto}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;flex-wrap:wrap}
.header h1{margin:0;font-size:2rem}
.tagline{margin:4px 0 0;color:#666}
.scores{display:flex;gap:8px;flex-wrap:wrap}
.score-box{background:#fff;border:1px solid #ddd;border-radius:8px;padding:8px 12px;text-align:center;min-width:64px}
.score-box span{display:block;font-size:.8rem;color:#666}
.score-box strong{font-size:1.2rem}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.controls button{background:#2fae4e;color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:16px;min-height:44px}
.controls button:active{transform:scale(.97)}
.message{min-height:24px;margin:8px 0;color:#666}
.game{display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.board-wrap{position:relative;touch-action:none}
.board{display:grid;grid-template-columns:repeat(10,1fr);width:min(320px,86vw);aspect-ratio:10/20;background:#111827;border:3px solid #444;border-radius:8px;overflow:hidden}
.cell{border:1px solid rgba(255,255,255,.08)}
.cell.I{background:#22d3ee}.cell.O{background:#facc15}.cell.T{background:#a855f7}.cell.S{background:#22c55e}.cell.Z{background:#ef4444}.cell.J{background:#3b82f6}.cell.L{background:#f97316}
.cell.ghost{background:transparent;border:2px solid rgba(255,255,255,.5)}
.cell.clearing{background:#fff !important}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;text-align:center;padding:16px}
.overlay[hidden]{display:none}
.overlay p{margin:0;font-size:1.2rem;font-weight:700}
.overlay button{background:#2fae4e;color:#fff;border:0;padding:10px 18px;border-radius:8px;cursor:pointer;font-size:16px;min-height:44px}
.side{width:140px}
.side h2{font-size:1rem;margin:12px 0 6px}
.side h2:first-child{margin-top:0}
.mini{display:grid;grid-template-columns:repeat(4,22px);grid-auto-rows:22px;gap:1px;margin-bottom:10px}
.mini .cell{border:0;border-radius:2px}
.mini .cell.empty{background:transparent}
.side-note{color:#666;font-size:.9rem}
.pad{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.pad button{background:#333;color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:20px;min-width:52px;min-height:48px}
.pad button:active{transform:scale(.95)}
.help{color:#555;max-width:640px;margin:0 auto}
@media(max-width:600px){
  body{padding-left:12px;padding-right:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .header{padding:8px 0}
  .header h1{font-size:1.6rem}
  .tagline{display:none}
  .controls{margin:4px 0 8px}
  .message{min-height:0;margin:4px 0}
  /* Board + Next/After side by side, not stacked: stacking pushed
     the buttons below the fold, under Safari's bottom bar. */
  .game{flex-wrap:nowrap;gap:10px}
  .board{width:min(62vw,280px)}
  .side{width:auto;flex:1 1 0;min-width:0}
  .side h2{margin:6px 0 4px}
  .mini{margin-bottom:6px}
  .side-note{display:none}
  .score-box{min-width:56px;padding:6px 8px}
  /* Buttons stay on screen: one row, stuck to the bottom, above
     the home indicator / Safari bar, instead of scrolling away. */
  .pad{position:sticky;bottom:0;z-index:10;flex-wrap:nowrap;gap:6px;margin:12px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f4f1ea}
  .pad button{flex:1 1 0;min-width:0;padding:10px 4px;font-size:18px}
  .help{margin-top:16px}
}
@media(prefers-color-scheme:dark){
  body{background:#121212;color:#e8e8e8}
  .tagline,.message,.help{color:#aaa}
  .score-box{background:#1e1e1e;border-color:#333}
}
@media(max-width:600px) and (prefers-color-scheme:dark){
  .pad{background:#121212}
}