/* ============================================================
   SPĒLES — shared Windows 98 design system
   Elderly-first + OLD-BROWSER-SAFE (Android 8.1 / older Chrome).

   IMPORTANT: we do NOT use flexbox `gap` anywhere — flex-gap only
   works in Chrome 84+. All spacing uses margins (the `> * + *`
   "owl" pattern) so it renders correctly on old tablets too.
   ============================================================ */
:root{
  --bar:#000; --bar-fg:#fff;
  --board-bg:#000; --cell:#c0c0c0; --cell-hi:#fff; --cell-lo:#808080;
  --app-bg:#d4d0c8; --app-fg:#000; --panel:#d4d0c8;
  --btn:#d4d0c8;
  --gap:2px; --sz:44px; --n:9;
  --tile:#c0c0c0; --tile-lo:#9a968f;
}
[data-theme="wood"]{
  --board-bg:#2b1a0e; --cell:#a97c50; --cell-hi:#d8b48a; --cell-lo:#6b4423;
  --app-bg:#4a2f1b; --app-fg:#f2e3cf; --panel:#5c3c24; --btn:#8a6340;
  --tile:#6b4423; --tile-lo:#4a2f1b;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--app-bg); color:var(--app-fg);
  font:16px/1.4 "Segoe UI",Tahoma,system-ui,sans-serif;
  display:flex; align-items:flex-start; justify-content:center;
  padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom);
  overscroll-behavior:none; touch-action:manipulation;
}
#app{
  width:100%; max-width:600px; min-height:100vh;
  display:flex; flex-direction:column; padding:12px 0 16px;
}

/* reusable 98 bevels */
.bevel-out{border:3px solid;border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi)}
.bevel-in {border:3px solid;border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo)}

/* views */
.view{display:none;flex-direction:column;flex:1}
.view.on{display:flex}

/* ============ HOME ============ */
#homeHead{
  display:flex; align-items:center;
  background:var(--bar); color:var(--bar-fg); padding:16px 18px;
  border:3px solid; border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo);
  margin-bottom:16px;
}
#homeHead h1{font:900 32px/1 "Arial Black","Arial Bold",Impact,sans-serif;letter-spacing:.02em}
#homeStreak{margin-left:auto;font:700 18px/1 ui-monospace,monospace;white-space:nowrap}

#games{display:flex;flex-direction:column}
#games > * + *{margin-top:16px}
.gcard{
  display:flex; align-items:center; width:100%; text-align:left;
  padding:18px; background:var(--btn); color:var(--app-fg); min-height:118px;
  border:4px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
}
.gcard:active{border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo)}
[data-theme="wood"] .gcard{color:#1c1006}
.gcard .gicon{width:84px;height:84px;flex:0 0 84px;margin-right:18px}
.gcard .gtext{min-width:0}
.gcard .gtitle{font:900 25px/1.05 "Arial Black",sans-serif}
.gcard .gsub{font-size:16px;opacity:.75;margin-top:6px}
.gcard .gbest{font:700 15px/1 ui-monospace,monospace;margin-top:8px;opacity:.9;font-variant-numeric:tabular-nums}

#install{display:flex;margin-top:16px}
#install:empty{display:none}
#install button{flex:1;padding:18px;font-size:18px;font-weight:700}

/* bottom icon bar (language / style / feedback) */
#homeBar{
  display:flex; align-items:stretch; margin-top:auto; padding-top:18px;
}
#homeBar > * + *{margin-left:10px}
#homeBar button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 6px; font-size:14px; font-weight:700; min-height:64px;
}
#homeBar .ic{font-size:24px;line-height:1;margin-bottom:4px}

/* ============ game chrome (shared) ============ */
.gbar{
  display:flex; align-items:center;
  background:var(--bar); color:var(--bar-fg); padding:10px 12px;
  border:3px solid; border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo);
  margin-bottom:14px;
}
.gbar > * + *{margin-left:12px}
.gbar .back{
  font:800 17px/1 "Segoe UI",sans-serif; color:#000; background:var(--btn);
  padding:12px 16px; flex:0 0 auto; min-height:48px;
  border:3px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
}
.gbar .back:active{border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo)}
.gbar .glogo{font:900 22px/1 "Arial Black",Impact,sans-serif;white-space:nowrap}
.gbar .gnext{display:flex;align-items:center;margin-left:auto}
.gbar .gnext > * + *{margin-left:6px}

/* ---- difficulty chooser ---- */
.chooser{display:flex;flex-direction:column;flex:1}
.chooser h2{
  font:900 22px/1.1 "Arial Black",sans-serif; text-align:center; margin-bottom:16px; padding:0 6px;
}
.diffs{display:flex;flex-direction:column}
.diffs > * + *{margin-top:12px}
.diffs button{
  width:100%; text-align:left; padding:18px 20px; min-height:74px;
  font:900 22px/1.1 "Arial Black",sans-serif;
}
.diffs button small{display:block;font:400 15px/1.2 "Segoe UI",sans-serif;opacity:.75;margin-top:6px}

/* ---- scoreboard ---- */
.hud{display:flex;margin-bottom:14px}
.hud > * + *{margin-left:8px}
.stat{
  flex:1; background:var(--cell); color:#000; padding:8px 10px; min-width:0;
  border:3px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
}
.stat span{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.stat b{font:700 24px/1.1 ui-monospace,"Consolas",monospace;font-variant-numeric:tabular-nums;display:block}
.stat.hot b{color:#c22}
[data-theme="wood"] .stat.hot b{color:#ffb14e}

/* ---- boards ---- */
.boardWrap{display:flex;justify-content:center;margin-bottom:14px}
.board{
  display:grid; grid-gap:var(--gap); gap:var(--gap); background:var(--board-bg); padding:var(--gap);
  border:3px solid; border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo);
  touch-action:none;
}
.cell{
  width:var(--sz); height:var(--sz); background:var(--cell);
  border:2px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.cell:focus-visible{outline:3px dashed #000;outline-offset:-4px}
.cell.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* ---- Lines balls ---- */
.ball{
  width:82%; height:82%; border-radius:50%;
  background:radial-gradient(circle at 33% 29%,#fff 1%,var(--c1) 42%,var(--c2) 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.45);
}
.ball.small{width:22px;height:22px;box-shadow:none}
.ball.sel{animation:bob .5s infinite}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-22%) scale(.94,1.06)}70%{transform:translateY(0) scale(1.06,.94)}}
.ball.grow{animation:grow .22s ease-out}
@keyframes grow{from{transform:scale(.15);opacity:.2}to{transform:scale(1);opacity:1}}
.ball.pop{animation:pop .26s ease-in forwards}
@keyframes pop{40%{transform:scale(1.25)}to{transform:scale(0);opacity:0}}
.ball.hop{animation:hop .09s}
@keyframes hop{50%{transform:translateY(-16%) scale(1.05)}}

/* ---- Blocks tiles ---- */
.cell.blk{background:var(--tile)}
.tileFill{
  position:absolute; inset:2px; border-radius:3px;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 60%),var(--f1);
  border:2px solid; border-color:rgba(255,255,255,.5) rgba(0,0,0,.35) rgba(0,0,0,.35) rgba(255,255,255,.5);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25);
}
.tileFill.pop{animation:tpop .28s ease-in forwards}
@keyframes tpop{30%{transform:scale(1.12)}to{transform:scale(0);opacity:0}}
.tileFill.drop{animation:tdrop .16s ease-out}
@keyframes tdrop{from{transform:scale(.4);opacity:.3}to{transform:scale(1);opacity:1}}
.cell.ghost-ok  .ghost{position:absolute;inset:3px;border-radius:3px;background:rgba(60,200,90,.6);border:2px dashed #0a0}
.cell.ghost-bad .ghost{position:absolute;inset:3px;border-radius:3px;background:rgba(220,60,60,.45);border:2px dashed #900}

/* ---- Blocks tray (bigger, clearer pieces) ---- */
#blkTray{display:flex;align-items:stretch;margin-bottom:14px}
#blkTray > * + *{margin-left:10px}
.tray{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:120px; padding:8px;
  background:var(--cell);
  border:3px solid; border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo);
  touch-action:none;
}
.tray.used{opacity:.2}
.tray.sel{background:#a8dca8;border-color:#0a0 #0a0 #0a0 #0a0}
[data-theme="wood"] .tray.sel{background:#7a5a2a}
.trayGrid{display:grid;grid-gap:3px;gap:3px}
.trayCell{width:var(--tsz,24px);height:var(--tsz,24px);border-radius:3px}
.trayCell.on{
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 60%),var(--f1);
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.2);
}
/* floating drag preview */
#dragGhost{position:fixed;left:0;top:0;pointer-events:none;z-index:50;display:none}
#dragGhost .trayGrid{grid-gap:3px;gap:3px}
#dragGhost .trayCell{width:var(--gsz,34px);height:var(--gsz,34px)}

/* ============ buttons / controls ============ */
button{
  font:700 17px/1 inherit; padding:15px 18px; color:#000; cursor:pointer; background:var(--btn); min-height:54px;
  border:3px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
}
[data-theme="wood"] button{color:#1c1006}
button:active:not(:disabled){border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo)}
button:disabled{opacity:.4;cursor:default}
button.grow{flex:1}

.tools{display:flex;margin-bottom:14px}
.tools > * + *{margin-left:10px}

/* how-to line (kept legible for older eyes) */
.howto{font-size:15px;line-height:1.45;opacity:.9;text-align:center;padding:2px 8px;margin-top:2px}

/* ============ dialog (game-over + confirm + info + feedback) ============ */
#over{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
#over.on{display:flex}
#overBox{
  background:var(--panel); color:var(--app-fg); padding:24px; max-width:360px; width:100%; text-align:center;
  border:4px solid; border-color:var(--cell-hi) var(--cell-lo) var(--cell-lo) var(--cell-hi);
}
#overBox h2{font:900 24px/1.1 "Arial Black",sans-serif;margin-bottom:16px}
#overBody p{margin-bottom:8px;font-size:18px;font-variant-numeric:tabular-nums}
#overBody textarea{
  width:100%; min-height:110px; padding:12px; font:16px/1.4 "Segoe UI",sans-serif; margin-top:6px;
  border:3px solid; border-color:var(--cell-lo) var(--cell-hi) var(--cell-hi) var(--cell-lo);
  background:#fff; color:#000; resize:vertical;
}
#overBtns{display:flex;flex-direction:column;margin-top:18px}
#overBtns > * + *{margin-top:10px}
#overBtns button{width:100%}

@media (prefers-reduced-motion:reduce){
  .ball,.tileFill,.cell{animation:none!important}
}