/* Crate Clear UI — one quiet language: slate, warm white, a single yellow accent. */
:root {
  --ink: #22303a; --ink-soft: #6b767e; --paper: #f4f2ec; --paper-2: #e9e6de; --line: #dcd8ce;
  --accent: #f2c94c; --accent-deep: #d9b03a; --ok: #4f8f45; --bad: #d8463a;
  --radius: 22px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { display: grid; place-items: center; background: #0f171d; color: var(--ink); font: 14px/1.4 var(--font); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#game { position: relative; width: min(100vw, 70dvh); height: 100dvh; overflow: hidden; background: #56656b; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Header: three quiet circles and a number. */
header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
header button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--line), 0 6px 14px #0004; }
header button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), 0 3px 8px #0004; }
header button:disabled { opacity: .45; cursor: default; }
header button svg { width: 22px; height: 22px; }
.level { margin-left: 2px; padding: 0 14px; min-width: 56px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 20px; font-weight: 800; box-shadow: 0 3px 0 var(--line), 0 6px 14px #0004; }
#status { display: none; }
#undo { margin-left: auto; }
body.home-open header, body.home-open .progress { display: none; }
.progress { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: 14px; width: 120px; height: 10px; border-radius: 6px; background: var(--paper); box-shadow: 0 2px 0 var(--line); z-index: 3; overflow: hidden; }
#progress { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent); transition: width .4s; }

/* Sheets: outcome, ad. */
.sign { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: #0f171db3; transition: opacity .25s; }
.sign[hidden] { display: grid; opacity: 0; pointer-events: none; }
.board { width: 100%; max-width: 360px; transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.sign[hidden] .board { transform: translateY(24px); }
.stripe { display: none; }
.plate { position: relative; background: var(--paper); border-radius: var(--radius); padding: 30px 22px 22px; box-shadow: 0 30px 70px #000a; }
.stencil, .plate p { display: none; }
.plate h1 { margin: 0 0 20px; font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.plate h1:empty { display: none; }
.badge { display: grid; width: 60px; height: 60px; margin: -60px auto 14px; border-radius: 50%; background: var(--ok); color: #fff; place-items: center; box-shadow: 0 10px 24px #0006; }
.sign.win .badge::after { content: ''; width: 16px; height: 30px; margin-top: -6px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(45deg); }
.sign.stuck .badge { background: var(--bad); }
.sign.stuck .badge::after { content: ''; width: 28px; height: 6px; background: #fff; border-radius: 3px; }
.stars { display: none; justify-content: center; align-items: flex-end; gap: 6px; height: 54px; margin: 0 0 6px; }
.stars i { width: 40px; height: 40px; background: var(--line); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: linear-gradient(#ffd75e, #e8b52d); }
.stars i:nth-child(2) { width: 50px; height: 50px; margin-bottom: 6px; }
.sign.win .stars { display: flex; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 22px; }
.stats[hidden] { display: none; }
.stats div { display: grid; justify-items: center; gap: 5px; padding: 2px 0; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt svg { width: 22px; height: 22px; color: var(--ink-soft); }
.stats dd { margin: 0; font-size: 19px; font-weight: 800; }
.actions { display: flex; gap: 10px; }
/* Plates: painted steel. Yellow has a darker bottom edge, steel has rivets in the corners. */
.actions button { flex: 1; min-height: 60px; padding: 0 8px; display: grid; place-items: center; border: 0; border-radius: 14px; transition: transform .08s, box-shadow .08s; position: relative; }
.actions button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep) !important; }
.steel::before, .steel::after { content: ''; position: absolute; top: 7px; bottom: 7px; width: 5px; border-radius: 3px; background: radial-gradient(circle at 50% 2.5px, #9aa0a4 2.5px, transparent 3px) top / 5px 5px no-repeat, radial-gradient(circle at 50% calc(100% - 2.5px), #9aa0a4 2.5px, transparent 3px) bottom / 5px 5px no-repeat; }
.steel::before { left: 7px; }
.steel::after { right: 7px; }
.actions button[hidden] { display: none; }
.actions button:disabled { opacity: .4; }
.actions button svg { width: 26px; height: 26px; }
.actions button.big { flex: 2.2; }
.actions button.big svg { width: 32px; height: 32px; }
.yellow { background: var(--accent); color: var(--ink); box-shadow: 0 6px 0 var(--accent-deep); }
.steel { background: #e3e2db; color: var(--ink); box-shadow: 0 6px 0 #b9b7ad; }
.steel:active { box-shadow: 0 1px 0 #b9b7ad !important; }
/* Stuck: the ad plate is the primary way out, so it gets the full width and the accent. */
.ad { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 12px; min-height: 66px; border: 0; border-radius: 16px; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 28px; box-shadow: 0 6px 0 var(--accent-deep); transition: transform .08s, box-shadow .08s; }
.ad:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep); }
.ad[hidden], .sign.win .ad { display: none !important; }
.ad svg { width: 34px; height: 34px; }
.sign.stuck #result-undo { background: var(--paper-2); box-shadow: 0 6px 0 #b9b7ad; }
.sign.stuck .confetti { display: none; }
.ad-art { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 22px; font-size: 40px; font-weight: 800; }
.ad-art svg { width: 60px; height: 60px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: fall 2.6s linear forwards; }
.sign[hidden] .confetti i { animation: none; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .9; } }

/* Home: the scene plays the hero up top; a sheet with the plate button and level tiles below. */
.home { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.home[hidden] { display: none; }
.home-sheet { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; height: 58%; padding: 18px 16px max(14px, env(safe-area-inset-bottom)); background: var(--paper); border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px #0005; }
.play { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(100%, 320px); min-height: 72px; margin-top: -54px; border: 0; border-radius: 16px; background: var(--accent); color: var(--ink); font-size: 34px; font-weight: 800; box-shadow: 0 7px 0 var(--accent-deep), 0 14px 30px #0005; transition: transform .08s, box-shadow .08s; }
.play:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--accent-deep), 0 6px 16px #0005; }
.play svg { width: 34px; height: 34px; }
.levels { flex: 1; width: 100%; max-width: 400px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; overflow-y: auto; align-content: start; padding: 2px 2px 14px; scrollbar-width: none; }
.levels::-webkit-scrollbar { display: none; }
.levels button { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 800; display: grid; place-items: center; align-content: center; gap: 4px; box-shadow: 0 4px 0 var(--line); padding-bottom: 4px; }
.levels button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.levels button.current { background: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); }
.levels button:disabled { background: #e3e2db; color: #a7aba8; cursor: default; box-shadow: 0 4px 0 #cfccc2; }
.levels button:disabled svg { width: 20px; height: 20px; color: #a7aba8; }
.levels button .s { display: flex; justify-content: center; gap: 2px; }
.levels button .s i { width: 9px; height: 9px; background: #d6d3c9; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.levels button .s i.on { background: #e8b52d; }
.levels button.current .s i { background: #c9a23a66; }
.levels button.current .s i.on { background: var(--ink); }

#error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: #0f171d; color: #fff; }
#error[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }