:root{
  --bg1:#0b1220;
  --bg2:#111827;
  --panel:rgba(17,24,39,.98);
  --panel2:#0f172a;
  --cell:#f8fafc;
  --fixed:#c7d2e9;
  --user:#bfdbfe;
  --userText:#1d4ed8;
  --notesText:#94a3b8;
  --grid:#334155;
  --thick:#020617;
  --accent:#2563eb;
  --accent2:#dbeafe;
  --related:rgba(37,99,235,.08);
  --error:#fecaca;
  --errorText:#991b1b;
  --good:#dcfce7;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --button:#1f2937;
  --buttonText:#fff;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --shadow:rgba(0,0,0,.24);
  --riftAccent:#a78bfa;
  --riftGlow:rgba(167,139,250,.45);
}

body.light{
  --bg1:#eef2ff;
  --bg2:#f8fafc;
  --panel:rgba(255,255,255,.98);
  --panel2:#e8eef7;
  --cell:#ffffff;
  --fixed:#c7d2e9;
  --user:#bfdbfe;
  --userText:#1d4ed8;
  --notesText:#475569;
  --grid:#94a3b8;
  --thick:#334155;
  --accent:#2563eb;
  --accent2:#dbeafe;
  --related:rgba(37,99,235,.07);
  --error:#fee2e2;
  --errorText:#991b1b;
  --good:#dcfce7;
  --text:#0f172a;
  --muted:#475569;
  --button:#e2e8f0;
  --buttonText:#0f172a;
  --shadow:rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html{height:100%;overflow-x:hidden}
body{
  margin:0;
  min-height:100%;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  padding:calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom));
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  transition:background .2s ease,color .2s ease;
}

.app{
  width:100%;
  max-width:600px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 36px var(--shadow);
  backdrop-filter:blur(10px);
}

/* ── Compact top bar ─────────────────────────────────────────────────────── */
.top-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 8px;
}
.top-bar h1{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  flex:1;
  white-space:nowrap;
}
.top-stats{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.88rem;
  font-weight:600;
}
.top-stats #timeStat{
  background:var(--panel2);
  padding:4px 8px;
  border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.error-chip{
  background:var(--error);
  color:var(--errorText);
  padding:4px 8px;
  border-radius:8px;
  font-size:.8rem;
  font-weight:700;
}
.icon-btn{
  background:var(--button);
  color:var(--buttonText);
  border:none;
  border-radius:10px;
  padding:7px 10px;
  min-height:36px;
  font-size:1.05rem;
  cursor:pointer;
  touch-action:manipulation;
  flex-shrink:0;
}
.icon-btn:active{transform:scale(.95)}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-wrap{
  height:4px;
  background:var(--panel2);
  overflow:hidden;
  margin:0 10px 8px;
  border-radius:2px;
}
.progress-fill{
  height:100%;
  background:var(--accent);
  border-radius:2px;
  transition:width .35s ease;
  width:0%;
}

button,select{
  appearance:none;
  border:none;
  border-radius:14px;
  padding:14px 10px;
  background:var(--button);
  color:var(--buttonText);
  font:inherit;
  font-size:16px;
  min-height:48px;
  touch-action:manipulation;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  cursor:pointer;
}
button:active,select:active{transform:scale(.985)}
.primary{background:var(--accent);color:#fff}

/* Notes toggle — plain off state, vivid on state */
.toggle.active{background:#065f46;color:#fff}
.notes-toggle.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 0 2px var(--accent2),0 0 10px rgba(37,99,235,.35);
}

.main{padding:0 10px 12px}
.board-shell{
  background:var(--panel2);
  border-radius:18px;
  padding:10px;
  box-shadow:0 4px 12px var(--shadow) inset;
  transition:filter .25s ease,transform .25s ease,box-shadow .25s ease;
}
.board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  width:100%;
  aspect-ratio:1/1;
  background:var(--thick);
  padding:6px;
  border-radius:12px;
  user-select:none;
  touch-action:pan-y;
}
.block{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--thick);
}

.cell{
  position:relative;
  background:var(--cell);
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:clamp(18px,5.3vw,31px);
  margin:0;
  border-radius:6px;
  padding:0;
  user-select:none;
}
.cell.fixed{background:var(--fixed);color:#111827}
.cell.user{background:var(--user);color:var(--userText)}
.cell.related{box-shadow:inset 0 0 0 999px var(--related)}
.cell.selected{background:var(--accent2);outline:3px solid var(--accent);z-index:2}
.cell.error{background:var(--error);color:var(--errorText);outline:2px solid #dc2626}
.cell.error.selected{outline:3px solid #dc2626}
.cell.okflash{background:var(--good)}
.cell.rift-node{
  outline:2px dashed var(--riftAccent);
  box-shadow:0 0 0 2px rgba(255,255,255,.8) inset,0 0 18px var(--riftGlow);
}
.cell.rift-node::after{
  content:'◈';
  position:absolute;
  right:2px;
  bottom:1px;
  font-size:.62rem;
  color:#4c1d95;
  text-shadow:0 0 4px rgba(255,255,255,.8);
}

.notes{
  position:absolute;
  inset:2px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  font-size:clamp(7px,1.9vw,12px);
  font-weight:600;
  color:var(--notesText);
  pointer-events:none;
}
.notes span{display:flex;align-items:center;justify-content:center;line-height:1}

.status{
  margin-top:10px;
  padding:11px 13px;
  background:var(--panel2);
  border-radius:14px;
  color:var(--text);
  line-height:1.32;
  min-height:44px;
  font-size:.9rem;
}
.status.rift-status{
  border:1px solid rgba(167,139,250,.45);
  box-shadow:0 0 16px rgba(167,139,250,.16) inset;
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.controls{
  position:sticky;
  bottom:0;
  margin-top:10px;
  padding-top:8px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.06) 24%,rgba(0,0,0,0) 100%);
}

/* 3-column digit pad */
.digit-pad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding-bottom:8px;
}
.digit-pad button{
  min-height:58px;
  font-size:1.2rem;
  font-weight:700;
  padding:0;
  border-radius:16px;
}

.action-row,.action-row2{
  display:grid;
  gap:8px;
  margin-bottom:8px;
}
.action-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.action-row2{grid-template-columns:1fr 2fr}

.install-btn{
  width:100%;
  margin-top:4px;
  background:var(--accent);
  color:#fff;
  font-size:.9rem;
  min-height:44px;
}

/* ── Settings bottom sheet ───────────────────────────────────────────────── */
.settings-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.settings-modal[hidden]{display:none}
.settings-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}
.settings-sheet{
  position:relative;
  background:var(--panel);
  border-radius:24px 24px 0 0;
  padding:20px 16px calc(16px + var(--safe-bottom));
  max-height:80vh;
  overflow-y:auto;
}
.settings-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.settings-title{
  font-size:1.05rem;
  font-weight:700;
}
.legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:14px;
}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{
  width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.08)
}
.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.resume-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:flex-end;justify-content:center;padding:0 20px calc(80px + var(--safe-bottom));
}
.resume-modal[hidden]{display:none}
.resume-card{
  background:var(--panel);border-radius:16px;
  padding:24px 20px;max-width:280px;width:100%;
  text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.45);
}
.resume-msg{margin:0 0 20px;font-size:1rem;color:var(--text)}
.resume-btns{display:flex;flex-direction:column;gap:10px}

/* ── Rift mode ───────────────────────────────────────────────────────────── */
.board-shell.rift-locked{pointer-events:none}
.board-shell.rift-glitch{
  animation:rift-glitch .52s cubic-bezier(.2,.8,.2,1);
  filter:saturate(1.15) contrast(1.05);
}
.board-shell.rift-active{
  box-shadow:0 0 0 1px rgba(167,139,250,.6),0 4px 12px var(--shadow) inset;
}
@keyframes rift-glitch{
  0%{transform:translateX(0)}
  20%{transform:translateX(-3px) skewX(-1deg)}
  40%{transform:translateX(3px) skewX(1deg)}
  60%{transform:translateY(1px)}
  100%{transform:translateX(0)}
}
.rift-modal{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:flex-end;
}
.rift-modal[hidden]{display:none}
.rift-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.58);
}
.rift-card{
  position:relative;
  width:100%;
  background:var(--panel);
  border-radius:22px 22px 0 0;
  border-top:1px solid rgba(167,139,250,.42);
  padding:18px 14px calc(16px + var(--safe-bottom));
  box-shadow:0 -12px 30px rgba(0,0,0,.32);
}
.rift-kicker{
  margin:0 0 4px;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--riftAccent);
  font-weight:700;
}
.rift-card h2{margin:0 0 8px;font-size:1.05rem}
.rift-body{margin:0;color:var(--text);line-height:1.4}
.rift-btns{
  display:grid;
  gap:8px;
  margin-top:14px;
}

/* ── Splash screen ───────────────────────────────────────────────────────── */
.splash{
  position:fixed;
  inset:0;
  background:#0b1220;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  z-index:9999;
  transition:opacity .5s ease-out;
}
.splash.fade-out{opacity:0;pointer-events:none}
.splash-title{
  font-size:3rem;
  font-weight:800;
  letter-spacing:.15rem;
  color:#00ffcc;
  margin:0;
  animation:splash-pulse 1.5s infinite alternate;
}
@keyframes splash-pulse{
  from{text-shadow:0 0 6px #00ffcc}
  to{text-shadow:0 0 22px #00ffcc,0 0 44px rgba(0,255,204,.45)}
}
.splash-oval{
  width:160px;
  height:210px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #00ffcc;
  box-shadow:0 0 28px rgba(0,255,204,.5);
  animation:whimsical-spin 3s ease-in-out infinite;
  flex-shrink:0;
}
.splash-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
}
@keyframes whimsical-spin{
  0%  {transform:scale(1)    rotate(0deg)}
  10% {transform:scale(1.08) rotate(20deg)}
  25% {transform:scale(1)    rotate(-15deg)}
  40% {transform:scale(1.05) rotate(15deg)}
  100%{transform:scale(1)    rotate(360deg)}
}
.splash-dots{
  font-size:1.5rem;
  color:rgba(255,255,255,.6);
  margin:0;
  animation:dot-fade 1.5s infinite;
}
@keyframes dot-fade{
  0%,100%{opacity:1}
  50%{opacity:.25}
}

@media(prefers-reduced-motion:reduce){
  .splash-title,.splash-oval,.splash-dots{animation:none}
  .board-shell.rift-glitch{animation:none}
}

/* ── Error shake ─────────────────────────────────────────────────────────── */
.error-shake{
  animation:shake .4s cubic-bezier(.36,.07,.19,.97) both;
  color:#ff4d4d !important;
}
@keyframes shake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}
  40%,60%{transform:translate3d(4px,0,0)}
}

/* ── Victory glow ────────────────────────────────────────────────────────── */
.victory-glow{
  animation:glow-pulse 2s infinite alternate;
  border-color:#00ffcc !important;
}
@keyframes glow-pulse{
  from{box-shadow:0 0 10px #00ffcc,0 0 20px #00ffcc;filter:brightness(1)}
  to{box-shadow:0 0 20px #00ffcc,0 0 40px #33ffeb;filter:brightness(1.2)}
}

/* ── Completed digit button ──────────────────────────────────────────────── */
.digit-pad button.completed{
  opacity:.3;
  pointer-events:none;
}