/* Bundled so they work offline (SIL Open Font License). IM Fell English only has weight 400: never set bold on --serif text. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/im-fell-english-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url(../assets/fonts/im-fell-english-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/cinzel-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #070b0d;
  --panel: #0e1618;
  --panel-2: #152124;
  --line: #24383a;
  --text: #e6e2d6;
  --dim: #8f9a95;
  --amber: #e8a33d;
  --blood: #d8473f;
  --bone: #d9cdb4;
  --violet: #a47be0;
  --arsenic: #a6d63f;
  --teal: #3fb8aa;
  --ember: #ec7a3a;
  --accent: var(--amber);
  --serif: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --display: "Cinzel", "IM Fell English", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overscroll-behavior: none; }
body { background: linear-gradient(rgba(7,11,13,.62), rgba(7,11,13,.86)), var(--bg) url(../assets/backdrop.webp) center / cover no-repeat fixed; }
body { overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }

#fog { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; height: 100%; height: 100dvh; max-width: 480px; margin: 0 auto; } /* phone-width column on desktop */

.screen {
  height: 100%; display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #3a3324 transparent; /* dark brass, no white track on desktop */
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: #3a3324; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.screen::-webkit-scrollbar-thumb:hover { background-color: #5a4c30; }

/* ---- menu ---- */
.menu-head { text-align: center; padding: 18px 0 14px; }
.menu-head h1 { font-family: var(--display); font-weight: 700; font-size: 2rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--amber); text-shadow: 0 0 22px rgba(232,163,61,.35); }
.menu-head p { margin: 6px 0 0; color: var(--dim); font-family: var(--serif); font-style: italic; }
.carriages { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 8px; }
.carriage {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 2px 12px;
  container-type: inline-size; aspect-ratio: 3 / 1; padding: 12px 14px 12px 22px; border-radius: 14px;
  background: var(--banner) 0% 50% / 112% auto no-repeat, var(--panel);
  border: 1px solid var(--line); overflow: hidden;
}
.carriage::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(7,11,13,.78) 0%, rgba(7,11,13,.45) 40%, transparent 70%); }
.carriage > span { position: relative; z-index: 1; text-shadow: 0 1px 6px #000; }
.carriage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.carriage:active { transform: scale(.985); border-color: var(--accent); }
.car-no, .car-meta { background: rgba(7,11,13,.62); padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(2px); }
.car-no { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; color: var(--text); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-align: right; }
.car-title { grid-column: 1; grid-row: 1 / 3; font-family: var(--serif); font-size: 7.6cqw; line-height: 1.02; color: var(--accent); align-self: center; max-width: 46cqw; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 8px #000; }
.car-kind { grid-column: 1; grid-row: 3; color: var(--text); font-size: .8rem; align-self: end; }
.car-meta { grid-column: 2; grid-row: 3; color: var(--text); font-size: .75rem; text-align: right; align-self: end; justify-self: end; }
.offline-badge { margin: 0; padding: 0 0 10px; text-align: center; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; color: var(--dim); }
.offline-badge.ready { color: var(--accent); }
.menu-foot { margin-top: auto; padding: 14px 0 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.link { background: none; border: 0; color: var(--dim); font: inherit; padding: 8px 12px; }

/* ---- top bar ---- */
.topbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 2px 0 8px; flex: none; }
.back { font-size: 2rem; line-height: 1; color: var(--accent); padding: 0 8px 4px; }
.top-title { text-align: center; font-family: var(--serif); font-size: 1.3rem; color: var(--accent); }
.top-right { text-align: right; }
.icon-btn { background: none; border: 0; color: var(--accent); font-size: 1.5rem; padding: 4px 8px; }
.hero { flex: none; aspect-ratio: 3 / 1; border-radius: 14px; border: 1px solid var(--accent); background: 0% 50% / 112% auto no-repeat; margin-bottom: 10px; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 25%, transparent); }
.tagline { color: var(--dim); font-family: var(--serif); font-style: italic; text-align: center; margin: 0 0 14px; }

/* ---- level select ---- */
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-bottom: 12px; }
.lvl {
  position: relative; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel); border: 1.5px solid var(--line); font-family: var(--serif);
}
.lvl b { font-family: var(--display); font-size: 1rem; font-weight: 700; }
.lvl i { font-style: normal; font-size: .55rem; color: var(--accent); letter-spacing: -.05em; min-height: .8em; }
.lvl.done { border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.lvl.locked { opacity: .3; }
.lvl:not(.locked):active { background: var(--panel-2); }

/* ---- play area ---- */
.play { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.sealed { margin: auto; text-align: center; color: var(--dim); font-family: var(--serif); font-style: italic; line-height: 1.6; }

/* ---- shared controls games can reuse ---- */
.btn {
  background: var(--panel-2); color: var(--text); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 20px; font: inherit; font-size: 1rem;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0f10; font-weight: 600; }
.btn:active { transform: scale(.97); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.hud { color: var(--dim); font-size: .9rem; display: flex; gap: 16px; justify-content: center; padding: 4px 0 8px; }

/* ---- win overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(4,7,8,.82); display: flex; align-items: center; justify-content: center; z-index: 10; animation: fade-in .35s ease-out; }
.overlay .card { animation: rise .45s cubic-bezier(.2, .8, .2, 1); }
.card { background: var(--panel); border: 1px solid var(--accent); border-radius: 18px; padding: 26px 28px; text-align: center; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 30%, transparent); min-width: 260px; }
.win-char { display: block; height: 140px; width: auto; max-width: 100%; margin: -8px auto 6px; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.off { opacity: .25; }
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 0 0 6px; color: var(--accent); }
.card p { color: var(--dim); margin: 6px 0 0; }
.big-stars { font-size: 2rem; letter-spacing: .15em; color: var(--accent); }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) { .overlay, .overlay .card { animation: none; } }

/* ================= motion ================= */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; }

/* menu: cards rise in one after another; the banner art drifts in choppy steps like a stop-motion camera; a lantern flickers */
.carriages.enter .carriage { animation: card-in .6s cubic-bezier(.2, .8, .2, 1) both, drift 16s steps(80) infinite alternate; animation-delay: calc(var(--i) * 80ms), calc(var(--i) * -3s); }
.carriage { transition: transform .12s ease-out, border-color .12s; }
.carriage:active { transform: scale(.965, .94); }
.carriage.locked { filter: saturate(.55) brightness(.7); cursor: default; }
.carriage.locked:active { transform: none; }
.carriage.locked .flick { display: none; }
.flick { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 80% 22%, rgba(255, 170, 70, .34), transparent 48%); animation: flick 3.1s steps(1) infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.menu-head h1 { animation: title-flick 7s steps(1) infinite; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.95, 1.04); } to { opacity: 1; transform: none; } }
@keyframes drift { from { background-position: 0% 50%, 0 0; } to { background-position: 100% 50%, 0 0; } }
@keyframes flick { 0% { opacity: .9 } 18% { opacity: .35 } 31% { opacity: 1 } 47% { opacity: .55 } 66% { opacity: .95 } 82% { opacity: .4 } 100% { opacity: .9 } }
@keyframes title-flick { 0%, 91% { opacity: 1 } 92% { opacity: .35 } 93% { opacity: 1 } 95% { opacity: .55 } 96% { opacity: 1 } 100% { opacity: 1 } }

/* level select */
.hero { animation: drift 18s steps(90) infinite alternate; }
.levels .lvl { animation: lvl-in .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i), 40) * 14ms); }
.lvl.done::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); animation: lantern 3.2s steps(1) infinite; animation-delay: calc(var(--i) * -.37s); }
.lvl.next { border-color: var(--accent); animation: lvl-in .4s cubic-bezier(.2, .8, .2, 1) both, pulse 1.7s ease-in-out .7s infinite; animation-delay: calc(min(var(--i), 40) * 14ms), .7s; }
.lvl.fresh { animation: fresh .95s cubic-bezier(.2, .8, .2, 1) .25s both; }
@keyframes lvl-in { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes lantern { 0% { opacity: .95 } 22% { opacity: .5 } 47% { opacity: 1 } 71% { opacity: .62 } 100% { opacity: .95 } }
@keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { transform: scale(1.07); box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
@keyframes fresh { 0% { opacity: .2; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.4); } 68% { transform: scale(.9); } 100% { transform: none; } }

/* win card */
.overlay { background: radial-gradient(circle at 50% 40%, rgba(20, 12, 28, .78), rgba(4, 7, 8, .92)); }
.big-stars .st { display: inline-block; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
.big-stars .st.off { text-shadow: none; }

/* screen transitions (View Transitions API): only the app column slides, the backdrop and fog stay put */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
html[data-dir="fwd"]::view-transition-old(app) { animation: vt-out-l .26s ease-in both; }
html[data-dir="fwd"]::view-transition-new(app) { animation: vt-in-r .36s cubic-bezier(.2, .8, .2, 1) both; }
html[data-dir="back"]::view-transition-old(app) { animation: vt-out-r .24s ease-in both; }
html[data-dir="back"]::view-transition-new(app) { animation: vt-in-l .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out-l { to { opacity: 0; transform: translateX(-9%) scale(.97); } }
@keyframes vt-in-r { from { opacity: 0; transform: translateX(11%) scale(.98); } }
@keyframes vt-out-r { to { opacity: 0; transform: translateX(9%) scale(.97); } }
@keyframes vt-in-l { from { opacity: 0; transform: translateX(-11%) scale(.98); } }

/* ================= hints, tiers, stats ================= */
.topbar { grid-template-columns: 1fr auto 1fr; }
.back { justify-self: start; }
.top-right { justify-self: end; display: flex; align-items: center; gap: 2px; }
.hint-btn { position: relative; line-height: 0; padding: 6px 8px; }
.hint-btn[hidden] { display: none; }
.hint-btn::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-size: 10px; line-height: 1; letter-spacing: 1px; color: var(--accent); }
.hint-btn[data-step="1"]::after { content: "\2022"; } .hint-btn[data-step="2"]::after { content: "\2022\2022"; } .hint-btn[data-step="3"]::after { content: "\2022\2022\2022"; }
.hint-btn.nudge { animation: nudge 1.1s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent)); }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.toast { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 380px); text-align: center; padding: 10px 16px;
  background: rgba(14, 22, 24, .94); border: 1px solid var(--accent); border-radius: 12px; color: var(--text); font-family: var(--serif); font-size: 1.02rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .6); pointer-events: none; }
.tier { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 8px 2px 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-family: var(--serif); color: var(--accent); font-size: 1.15rem; letter-spacing: .04em; }
.tier small { color: var(--dim); font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; }
.card .meta { font-size: .85rem; letter-spacing: .04em; }