/* Nine Lives Circuit — cozy "warm room" art direction. Zero asset files: all art is canvas / CSS,
   all sound synthesized. */
:root{
  --bg-0:#3a2c3e; --bg-1:#2c2230; --bg-2:#201822;
  --cream:#fbf3e8; --cream-2:#fff9f0;
  --ink:#4a3a40; --ink-soft:#7a6a68; --ink-faint:#a8978f;
  --line:#e7d8c6;
  --wood:#c89b67;
  --laser:#ff4d57; --sun:#ffc24a; --box:#c98a4b; --toy:#7fb5c9; --cup:#7ec6a8; --barrier:#9b7bb0;
  --bowl:#e07a4f; --mouse:#b98ad0;
  --go:#ff8a5c; --go-d:#d9603f;
  --safe:#5fce93; --warn:#ffc24a; --danger:#ff6a62;
  --r-lg:22px; --r-md:15px; --r-sm:10px;
  --shadow:0 18px 44px rgba(0,0,0,.42);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Quicksand', ui-rounded, 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(130% 110% at 50% -10%, var(--bg-0) 0%, var(--bg-1) 52%, var(--bg-2) 100%) fixed;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  touch-action:manipulation;
}
.app{
  position:relative; height:100%; max-width:1024px; margin:0 auto;
  display:flex; flex-direction:column;
  padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.sr-summary{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===================== Top bar ===================== */
.topbar{
  display:flex; align-items:center; gap:10px; padding:4px 4px 8px;
}
.icon-btn{
  width:44px; height:44px; flex:0 0 auto; border-radius:14px; cursor:pointer;
  font-size:1.3rem; font-weight:800; line-height:1; color:#f3e7da;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ transform:translateY(1px); }
.lvl-id{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; color:#f3e7da; }
.lvl-no{ font-weight:900; font-size:1.05rem; opacity:.55; }
.lvl-no::before{ content:'#'; opacity:.6; }
.lvl-name{ font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvl-stars{ display:flex; gap:3px; font-size:1rem; }
.lvl-stars .st{ filter:grayscale(1) opacity(.45); }
.lvl-stars .st.on{ filter:none; }

/* ===================== Play layout ===================== */
.play{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.board-wrap{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
#board{
  width:100%; height:100%; display:block; border-radius:var(--r-lg);
  touch-action:none; outline:none;
}
#board:focus-visible{ box-shadow:0 0 0 3px rgba(255,206,120,.6); }
/* persistent failure note — outlives the toast, stays until the player edits */
.fail-note{
  position:absolute; top:10px; left:50%; transform:translateX(-50%) translateY(-6px);
  max-width:min(92%,40ch); padding:7px 14px; border-radius:12px; z-index:6;
  font-weight:800; font-size:.82rem; text-align:center; line-height:1.3; color:#ffd9d4;
  background:rgba(120,40,38,.92); box-shadow:var(--shadow);
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
}
.fail-note.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.instinct-tag{
  position:absolute; top:10px; left:50%; transform:translateX(-50%) translateY(-6px);
  padding:5px 13px; border-radius:999px; font-weight:800; font-size:.84rem; white-space:nowrap;
  background:rgba(28,20,28,.72); color:#fff; backdrop-filter:blur(5px);
  box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0; transition:opacity .18s, transform .18s; pointer-events:none; z-index:5;
}
.instinct-tag.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.instinct-tag .ic{ margin-right:5px; }
.toast{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%) translateY(10px);
  padding:9px 16px; border-radius:14px; font-weight:800; font-size:.9rem;
  white-space:normal; text-align:center; line-height:1.3; word-break:break-word;
  background:rgba(28,20,28,.88); color:#fff; box-shadow:var(--shadow);
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:6; max-width:min(92%, 38ch);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.good{ background:rgba(34,90,60,.92); }
.toast.bad{ background:rgba(120,46,42,.92); }

/* ===================== Panel ===================== */
.panel{
  flex:0 0 auto; background:var(--cream); border-radius:var(--r-lg); padding:10px 12px 12px;
  box-shadow:var(--shadow); border:2px solid #fff;
  display:flex; flex-direction:column; gap:9px;
}
.legend{ background:#fff7ec; border:1.5px solid var(--line); border-radius:var(--r-md); padding:7px 9px; }
.legend-title{ font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px; }
.legend-title span{ color:var(--ink-faint); font-weight:700; text-transform:none; letter-spacing:0; }
.legend-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px 6px; }
.legend-list li{
  display:flex; align-items:center; gap:5px; font-size:.74rem; font-weight:800; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:3px 9px 3px 6px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.legend-list li .rk{ font-size:.6rem; font-weight:900; color:#fff; background:var(--ink-faint); border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; }
.legend-list li .ic{ width:16px; height:16px; }
.legend-list li.active{ transform:translateY(-2px) scale(1.05); box-shadow:0 5px 12px rgba(0,0,0,.18); border-color:currentColor; }
.legend-list li.active .rk{ background:currentColor; color:var(--ink); text-shadow:0 0 1px rgba(255,255,255,.7); }   /* dark badge stays legible on every tier */

.tray-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.tray-title{ font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.objectives{ font-size:.72rem; font-weight:800; color:var(--ink-soft); display:flex; gap:9px; align-items:center; }
.objectives .ok{ color:var(--safe); }
.tray{ display:flex; gap:7px; flex-wrap:wrap; }
.tool{
  position:relative; flex:1 1 0; min-width:62px; cursor:pointer;
  background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:7px 4px 5px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .12s, box-shadow .14s, border-color .14s, opacity .14s;
}
.tool:active{ transform:translateY(1px); }
.tool .tool-ic{ width:34px; height:34px; }
.tool .tool-name{ font-size:.6rem; font-weight:800; color:var(--ink-soft); }
.tool .tool-count{
  position:absolute; top:-7px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:var(--ink); color:#fff; border-radius:999px; font-size:.72rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.tool.armed{ border-color:var(--go); box-shadow:0 0 0 3px rgba(255,138,92,.28), 0 8px 18px rgba(0,0,0,.12); transform:translateY(-2px); }
.tool.empty{ opacity:.4; pointer-events:none; }
.tool.empty .tool-count{ background:var(--ink-faint); }

.controls{ display:flex; gap:7px; }
.btn{
  font-family:inherit; font-weight:800; cursor:pointer; border:none; border-radius:var(--r-md);
  padding:12px 14px; min-height:46px; font-size:.95rem; color:#fff; flex:1;
  background:linear-gradient(#8c7a86,#6d5d68); box-shadow:0 4px 0 #4f4350; transition:transform .1s, box-shadow .1s, filter .12s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #4f4350; }
.btn.go{ background:linear-gradient(var(--go),var(--go-d)); box-shadow:0 4px 0 #b14e30; flex:1.5; }
.btn.go.running{ background:linear-gradient(#6d8c7a,#4f6d5d); box-shadow:0 4px 0 #3a5044; }
.btn.ghost{ background:#fff; color:var(--ink-soft); box-shadow:0 4px 0 var(--line); border:1.5px solid var(--line); }
.btn.ghost:active{ box-shadow:0 1px 0 var(--line); }
.btn:disabled{ opacity:.4; pointer-events:none; }
.btn.big{ flex:none; width:100%; font-size:1.2rem; padding:15px; background:linear-gradient(var(--go),var(--go-d)); box-shadow:0 5px 0 #b14e30; }

.speed{ display:flex; align-items:center; gap:6px; justify-content:center; }
.speed-lbl{ font-size:.6rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px; }
.speed-btn{
  font-family:inherit; font-weight:800; font-size:.72rem; color:var(--ink-soft); cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:6px 14px;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
.speed-btn.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ===================== Drag ghost ===================== */
.drag-ghost{
  position:fixed; width:46px; height:46px; pointer-events:none; z-index:200;
  transform:translate(-50%,-50%) scale(1.1); opacity:0; transition:opacity .1s;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
.drag-ghost.show{ opacity:.92; }
.drag-ghost svg{ width:100%; height:100%; display:block; }

/* ===================== Screens ===================== */
.screen{
  position:absolute; inset:0; z-index:50; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:18px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:radial-gradient(130% 110% at 50% -10%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
}
.screen.active{ display:flex; animation:fadein .3s ease; }
/* start screen: top-align + reserve footer room so a tall card never collides with .foot on short/landscape */
.screen.start{ justify-content:flex-start; padding-top:clamp(14px,5vh,56px); padding-bottom:clamp(44px,9vh,76px); }
.screen.select{ justify-content:flex-start; }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.card{
  width:100%; max-width:380px; text-align:center; color:var(--ink);
  background:var(--cream-2); border-radius:26px; padding:24px 22px;
  box-shadow:var(--shadow); border:3px solid #fff;
  animation:cardin .4s cubic-bezier(.34,1.5,.6,1);
}
@keyframes cardin{ from{ transform:translateY(16px) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.brand{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.brand-cat, .win-cat{ width:120px; height:104px; }
.brand h1{ margin:2px 0 0; font-size:2.05rem; line-height:.98; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.brand h1 span{ color:var(--go-d); }
.tagline{ margin:8px 0 4px; font-weight:700; color:var(--ink-soft); }
.tagline b{ color:var(--go-d); }
.how{ list-style:none; margin:12px auto; padding:0; display:inline-block; text-align:left; }
.how li{ margin:7px 0; font-weight:700; font-size:.92rem; color:var(--ink); display:flex; align-items:flex-start; gap:9px; }
.how b{ color:var(--go-d); }
.how-i{ width:1.7rem; text-align:center; font-size:1.1rem; flex:0 0 auto; }
.how-t{ flex:1; }
.start-row{ display:flex; gap:8px; margin-top:10px; }
.start-row .btn{ font-size:.85rem; padding:9px; }
.progress-note{ margin:12px 0 0; font-size:.8rem; font-weight:700; color:var(--ink-faint); }
.foot{ position:absolute; bottom:max(10px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center; font-size:.7rem; font-weight:600; color:rgba(255,255,255,.62); padding:0 16px; }

/* level select */
.select-head{ display:flex; align-items:center; gap:12px; width:100%; max-width:560px; margin-bottom:14px; color:#f3e7da; }
.select-head h2{ flex:1; margin:0; font-size:1.4rem; font-weight:900; }
.total-stars{ font-weight:900; color:var(--sun); background:rgba(0,0,0,.2); padding:5px 12px; border-radius:999px; }
.level-grid{
  width:100%; max-width:560px; display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:11px; overflow-y:auto; flex:1 1 auto; min-height:0; max-height:calc(100dvh - 110px); padding:4px;
  align-content:start;
}
.lvl-card{
  position:relative; aspect-ratio:1/1; cursor:pointer; color:var(--ink);
  background:var(--cream-2); border-radius:18px; border:2px solid #fff; box-shadow:0 8px 18px rgba(0,0,0,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .12s, box-shadow .12s;
}
.lvl-card:active{ transform:scale(.96); }
.lvl-card .n{ font-size:1.7rem; font-weight:900; line-height:1; }
.lvl-card .nm{ font-size:.56rem; font-weight:800; color:var(--ink-soft); text-align:center; padding:0 4px; line-height:1.1; }
.lvl-card .cs{ display:flex; gap:1px; font-size:.7rem; margin-top:2px; }
.lvl-card .cs .st{ filter:grayscale(1) opacity(.35); }
.lvl-card .cs .st.on{ filter:none; }
.lvl-card.locked{ background:#cfc4cc; color:#8a7d86; cursor:not-allowed; box-shadow:none; border-color:#d8cdd5; }
.lvl-card.locked .n{ opacity:.4; }
.lvl-card.locked::after{ content:'🔒'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.5rem; opacity:.55; }
.lvl-card.locked .n, .lvl-card.locked .nm, .lvl-card.locked .cs{ visibility:hidden; }
.lvl-card.done{ border-color:var(--sun); }

/* win screen */
.win-card{ max-width:340px; }
.win-card h2{ margin:4px 0 0; font-size:1.7rem; font-weight:900; color:var(--go-d); }
.win-stars{ display:flex; justify-content:center; gap:8px; margin:14px 0 6px; }
.win-stars .ws{ font-size:2.6rem; filter:grayscale(1) opacity(.3); transform:scale(.7); transition:none; }
.win-stars .ws.on{ filter:none; animation:starpop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes starpop{ 0%{ transform:scale(.2) rotate(-30deg); opacity:0; } 70%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.win-rank{ font-weight:800; color:var(--ink-soft); min-height:1.2em; margin:6px 0 2px; }
.win-row{ display:flex; gap:8px; margin-top:14px; }
.win-row .btn{ font-size:.9rem; padding:11px 8px; }

/* ===================== Responsive: side-by-side on wide ===================== */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  .play{ flex-direction:row; align-items:stretch; }
  .board-wrap{ flex:1 1 60%; }
  /* panel scrolls internally instead of being clipped by .app{overflow:hidden} on short/landscape */
  .panel{ flex:0 0 320px; width:320px; align-self:stretch; justify-content:flex-start; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
}
/* only stack the legend vertically when there's vertical room (else keep it short + wrapping) */
@media (min-width:760px) and (min-aspect-ratio:1/1) and (min-height:640px){
  .legend-list{ flex-direction:column; }
  .legend-list li{ width:100%; }
}
@media (max-width:420px){
  .brand h1{ font-size:1.8rem; }
  .tool{ min-width:52px; }
  .btn{ padding:10px 8px; font-size:.86rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
}