/* The menus: splash, sign-in, home, map, shop, profile and settings. A walnut cloakroom at night, with brass as the only
   accent. Everything here is scoped to .menu, so the game view keeps its own look. */
.menu, .screen ~ .modal-wrap {
  color-scheme: dark;
  --m-brass: #d9b566;
  --m-brass-hi: #f0dca6;
  --m-brass-lo: #a57c33;
  --m-hair: rgba(217, 181, 102, .24);
  --m-hair-soft: rgba(243, 233, 212, .1);
  --m-panel: rgba(17, 25, 22, .84);
  --m-panel-2: rgba(29, 39, 34, .9);
  --ink: #f3e9d4;
  --ink-soft: #b5ab96;
  --plum: #f3e9d4;
  --plum-2: #d9b566;
  --paper: #121a17;
  --paper-2: #1d2722;
  --line: rgba(217, 181, 102, .24);
  --glass: rgba(17, 25, 22, .84);
  --teal: #d9b566;
  --teal-deep: #d9b566;
  --coral: #f3e9d4;
  --display: "Cormorant Garamond", "Didot", "Bodoni 72", Georgia, serif;
  --shadow-md: 0 10px 26px rgba(0, 0, 0, .34);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  color: var(--ink);
}
.menu { background: #0a1210; }
body:has(.menu) { background: #0a1210; }

/* The room behind every page. Home sits in the light, and inner pages sit further into the dark. */
.room { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 11, .86), rgba(7, 13, 11, .95) 55%, #0a1210), url("assets/ui/cloakroom.jpg") center top / cover no-repeat #0a1210; }
.home .room, .auth .room, .splash .room { background: linear-gradient(180deg, rgba(7, 13, 11, .34) 0, rgba(7, 13, 11, .62) 36%, rgba(7, 13, 11, .94) 68%, #0a1210 100%), url("assets/ui/cloakroom.jpg") center top / cover no-repeat #0a1210; }
.menu .dust i { background: radial-gradient(circle, rgba(240, 220, 166, .8), transparent 70%); opacity: .5; }
.brass-token { display: block; width: var(--token, 160px); height: var(--token, 160px); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }

/* Type */
.menu .logo { display: flex; flex-direction: row; justify-content: center; gap: .24em; font: 600 clamp(3rem, 13vw, 4.6rem)/1 var(--display); letter-spacing: -.005em; text-shadow: none; }
.menu .logo span { background: linear-gradient(178deg, #f8ecc8 12%, #dcb96b 58%, #b28a3f 96%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; animation: none; }
.menu .logo span + span { margin-left: 0; }
.menu .auth-brand > .logo-sub { display: block; }
.menu .logo-sub { margin: -4px 0 0; padding-left: .42em; font: 700 clamp(.72rem, 2.6vw, .86rem)/1.2 var(--body); letter-spacing: .42em; text-transform: uppercase; color: var(--m-brass); }
.menu .eyebrow-gold, .menu .kicker { font: 600 .72rem/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--m-brass); text-shadow: none; }
.menu .page-title h1 { font: 600 clamp(2.3rem, 7vw, 3.2rem)/1.04 var(--display); color: var(--ink); text-shadow: none; overflow-wrap: break-word; }
.menu .back-btn + .page-title h1 { font-size: clamp(1.9rem, 8.2vw, 3rem); }

.menu .logo { direction: ltr; }
/* Slanted type only suits the Latin display font. */
:lang(ur) .menu .hero-tag, :lang(ar) .menu .hero-tag, :lang(hi) .menu .hero-tag, :lang(ja) .menu .hero-tag, :lang(ur) .menu .splash-line, :lang(ar) .menu .splash-line, :lang(hi) .menu .splash-line, :lang(ja) .menu .splash-line { font-family: var(--body); font-style: normal; font-size: 1rem; }

/* Buttons */
.menu .btn-brass, .screen ~ .modal-wrap .btn-brass { min-height: 50px; font: 700 1rem var(--body); letter-spacing: .01em; color: #1b1407; text-shadow: none; background: linear-gradient(180deg, #efd894, #d0a653 58%, #b58a3b); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 248, 220, .75), 0 8px 18px rgba(0, 0, 0, .36); filter: none; }
.menu .btn-brass:hover, .screen ~ .modal-wrap .btn-brass:hover { filter: brightness(1.06); transform: none; }
.menu .btn-brass:active, .screen ~ .modal-wrap .btn-brass:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .5), 0 3px 8px rgba(0, 0, 0, .4); }
.menu .btn-brass:disabled { color: var(--ink-soft); background: rgba(243, 233, 212, .06); box-shadow: inset 0 0 0 1px var(--m-hair-soft); filter: none; opacity: 1; }
.menu .btn-brass:disabled .coin { filter: grayscale(1) brightness(.7); }
.menu .btn-plain, .screen ~ .modal-wrap .btn-plain { min-height: 48px; color: var(--ink); background: transparent; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .btn-plain:hover, .screen ~ .modal-wrap .btn-plain:hover { background: rgba(217, 181, 102, .1); }
.menu .btn-danger { color: #ec9c92; box-shadow: inset 0 0 0 1px rgba(236, 156, 146, .4); }
.menu .back-btn { width: 42px; height: 42px; font: 500 1.7rem/1 var(--display); color: var(--ink); background: var(--m-panel); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .link, .screen ~ .modal-wrap .link-btn { color: var(--m-brass); }
.menu .link-light { font-size: .92rem; font-weight: 600; color: var(--ink-soft); text-shadow: none; }

/* Small parts */
.menu .pill { min-height: 36px; padding: 0 12px 0 7px; font: 600 .95rem var(--body); color: var(--ink); background: rgba(10, 17, 15, .62); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--m-hair); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.menu .pill b { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.menu .coin { box-shadow: 0 0 0 1px rgba(90, 62, 16, .9); }
.menu .card, .menu .stat { background: var(--m-panel); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--m-hair-soft), var(--shadow-md); }
.menu .meter { background: rgba(243, 233, 212, .1); height: 4px; }
.menu .meter i { background: linear-gradient(90deg, var(--m-brass-lo), var(--m-brass-hi)); }
.menu .week-dots i, .menu .pips i { background: rgba(243, 233, 212, .12); box-shadow: none; }
.menu .week-dots i { width: 7px; height: 7px; }
.menu .week-dots i.rush { transform: rotate(45deg) scale(.82); border-radius: 1px; }
.menu .week-dots i.open { background: transparent; box-shadow: inset 0 0 0 1px var(--m-brass); }
.menu .week-dots i.done, .menu .pips i.on { background: var(--m-brass); box-shadow: none; }
.menu .pips i { width: 6px; height: 6px; }
.menu .journey-lock { color: var(--ink); background: rgba(8, 13, 11, .66); }

/* Splash */
.menu.splash { display: grid; place-items: center; }
.splash .splash-center { gap: 16px; }
.splash .brass-token { --token: clamp(128px, 36vw, 190px); animation: coin-in 1.1s cubic-bezier(.2, .8, .3, 1.15) both; }
.splash .splash-line { font: 500 clamp(1.05rem, 3.6vw, 1.3rem) var(--display); font-style: italic; color: var(--ink-soft); text-shadow: none; }
.splash .loader { width: min(180px, 50vw); height: 2px; margin-top: 12px; background: rgba(243, 233, 212, .14); }
.splash .loader i { background: var(--m-brass); }

/* Sign-in */
.menu.auth { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.auth .brass-token { --token: clamp(96px, 24vh, 190px); }
.auth .auth-brand > p { color: var(--ink-soft); text-shadow: none; }
.auth .auth-card { background: var(--m-panel); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--m-hair), var(--shadow-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.auth .auth-card h2 { font-size: 2.1rem; font-weight: 600; color: var(--ink); }
.auth .demo-note { color: var(--m-brass-hi); background: rgba(217, 181, 102, .1); box-shadow: inset 0 0 0 1px var(--m-hair); }
.auth .field label { font-weight: 600; color: var(--ink-soft); }
.auth .input-wrap { background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--m-hair); }
.auth .input-wrap:focus-within { box-shadow: inset 0 0 0 1.5px var(--m-brass), 0 0 0 3px rgba(217, 181, 102, .16); }
.auth .input-wrap.bad { box-shadow: inset 0 0 0 1.5px #ec9c92; }
.auth .input-wrap input { color: var(--ink); }
.auth .eye { color: var(--m-brass); }
.auth .field-error { color: #ec9c92; }
.auth .or::before, .auth .or::after { height: 1px; background: var(--m-hair); }

/* Home */
.home .player { padding: 3px 14px 3px 3px; background: rgba(10, 17, 15, .62); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--m-hair); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.menu .avatar { background: #24332d; box-shadow: 0 0 0 1px var(--m-brass); }
.home .player-text b { font: 600 .92rem var(--body); color: var(--ink); }
.home .player-text small { font-size: .7rem; font-weight: 500; color: var(--m-brass); }
.home .hero { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 560px; margin: clamp(14px, 4vh, 40px) auto 0; text-align: center; }
.home .brass-token { --token: clamp(136px, 26vh, 230px); animation: rise-in .7s cubic-bezier(.2, .9, .3, 1.1) both; }
.home .hero-brand { align-self: center; align-items: center; gap: 8px; margin-top: 8px; animation: rise-in .7s .05s ease both; }
.home .hero-brand .logo { flex-direction: row; font-size: clamp(3rem, 13.5vw, 4.6rem); }
.home .hero-tag { max-width: 22em; font: 500 clamp(1.05rem, 3.6vw, 1.22rem)/1.3 var(--display); font-style: italic; color: var(--ink); opacity: .82; text-shadow: none; }
.home .hero-action { align-self: center; align-items: center; width: 100%; gap: 4px; margin-top: 20px; }
.home .cta { width: 100%; max-width: 420px; min-height: 68px; padding: 8px 18px 8px 10px; gap: 12px; color: #1b1407; background: linear-gradient(180deg, #f1dc9c, #d3aa58 58%, #b48a3c); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 248, 220, .8), 0 14px 30px rgba(0, 0, 0, .5); }
.home .cta::after { display: none; }
.home .cta:hover { filter: brightness(1.05); transform: none; }
.home .cta:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 248, 220, .5), 0 5px 12px rgba(0, 0, 0, .5); }
.home .cta-ring { width: 46px; height: 46px; background: conic-gradient(#1b1407 calc(var(--pct) * 1%), rgba(27, 20, 7, .2) 0); }
.home .cta-ring span { width: 40px; height: 40px; font-size: .74rem; font-weight: 700; background: #dcb769; }
.home .cta-text small { font-size: .78rem; font-weight: 600; opacity: .72; }
.home .cta-text b { font: 700 1.5rem/1.1 var(--display); }
.home .cta-arrow { font: 500 2rem/1 var(--display); }

.menu .journey { margin-top: clamp(22px, 5vh, 40px); max-width: 1040px; }
.menu .journey h2 { margin-bottom: 10px; font: 600 1.6rem var(--display); color: var(--ink); text-shadow: none; }
.menu .journey-row { display: flex; gap: 10px; overflow-x: auto; margin-inline: -18px; padding: 2px 18px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.menu .journey-row::-webkit-scrollbar { display: none; }
.menu .journey-card { position: relative; flex: 0 0 150px; height: 196px; overflow: hidden; background: #121a17; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--m-hair-soft); scroll-snap-align: start; }
.menu .journey-card:not(:disabled):hover { transform: none; box-shadow: inset 0 0 0 1px var(--m-brass); }
.menu .journey-art { position: absolute; inset: 0; height: auto; }
.menu .journey-art .backdrop { height: 56%; }
.menu .journey-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 13, 11, .06) 0, rgba(8, 13, 11, .32) 30%, #0f1714 56%); }
.menu .journey-lock { z-index: 1; align-items: start; padding-top: 30%; background: rgba(8, 13, 11, .5); }
.menu .journey-lock svg { width: 22px; height: 22px; }
.menu .journey-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; gap: 4px; padding: 10px 12px 12px; }
.menu .journey-body small { font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: var(--m-brass); }
.menu .journey-body b { min-height: 0; font: 600 1.16rem/1.08 var(--display); color: var(--ink); }
.menu .journey-meta { font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.menu .inline-star .star { width: 14px; height: 14px; }
.menu .star:not(.lit) path { fill: rgba(243, 233, 212, .1); stroke: rgba(243, 233, 212, .22); }
.menu .journey-card:disabled .journey-body b { color: var(--ink-soft); }

/* Nav bar */
.menu .dock { width: min(460px, calc(100% - 20px)); padding: 0 4px; background: rgba(9, 15, 13, .88); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--m-hair), 0 18px 40px rgba(0, 0, 0, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.menu .dock button { min-height: 58px; font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: #8e8676; background: none; border-radius: 0; box-shadow: none; }
.menu .dock button:hover { color: var(--ink); }
.menu .dock-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.menu .dock button[aria-current="page"] { color: var(--m-brass-hi); background: none; box-shadow: none; }
.menu .dock button[aria-current="page"] .dock-icon { color: var(--m-brass); }
.menu .dock button[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--m-brass); border-radius: 0 0 2px 2px; }

/* Map: one line through ten places */
.menu .road { gap: 12px; padding-left: 40px; }
.menu .road::before { left: 15px; top: 22px; bottom: 60px; width: 1px; border-radius: 0; background: var(--m-hair); box-shadow: none; }
.menu .stop-node { left: -40px; top: 18px; width: 40px; }
.menu .medal { left: 0; width: 31px; height: 31px; font: 600 1.05rem/1 var(--display); font-variant-numeric: lining-nums; color: var(--m-brass); background: #0d1512; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .medal svg { width: 13px; height: 13px; }
.menu .stop.locked .medal { color: #7c7566; background: #0d1512; box-shadow: inset 0 0 0 1px var(--m-hair-soft); }
.menu .stop.complete .medal { color: #1b1407; background: var(--m-brass); box-shadow: none; }
.menu .stop.current .medal { animation: none; color: #1b1407; background: linear-gradient(180deg, #f1dc9c, #c99f4d); box-shadow: 0 0 0 4px rgba(217, 181, 102, .16); }
.menu .map-card { position: relative; display: block; min-height: 200px; background: #121a17; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--m-hair-soft); }
.menu .stop.current .map-card { box-shadow: inset 0 0 0 1px var(--m-brass); }
.menu .map-card:not(:disabled):hover { transform: none; box-shadow: inset 0 0 0 1px var(--m-brass); }
.menu .map-art { position: absolute; inset: 0; min-height: 0; }
.menu .map-art .backdrop { height: 58%; }
.menu .map-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 13, 11, .08) 0, rgba(8, 13, 11, .3) 26%, #111916 58%); }
.menu .stop.locked .backdrop { filter: grayscale(.9) brightness(.5); }
.menu .map-art .journey-lock { z-index: 1; display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px; background: none; }
.menu .map-art .journey-lock svg { width: 18px; height: 18px; }
.menu .stop.buyable .backdrop { filter: none; }
.menu .stop.buyable .map-card { box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .stop.buyable .map-text b { color: var(--ink); }
.menu .stop.buyable .journey-lock { color: var(--m-brass); }
.menu .map-flag { z-index: 1; left: 12px; top: 12px; padding: 2px 10px; font-size: .66rem; font-weight: 600; letter-spacing: .06em; color: #1b1407; background: var(--m-brass); border-radius: 6px; }
.menu .map-flag.done { color: var(--m-brass-hi); background: rgba(10, 17, 15, .78); box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .map-text { position: relative; z-index: 1; justify-content: flex-end; min-height: 200px; padding: 88px 14px 13px; font-size: .86rem; line-height: 1.28; color: var(--ink-soft); }
.menu .map-text small { font-size: .62rem; font-weight: 600; letter-spacing: .15em; color: var(--m-brass); }
.menu .map-text b { font: 600 1.62rem/1.05 var(--display); color: var(--ink); }
.menu .map-meta { gap: 10px; margin-top: 6px; font-size: .74rem; font-weight: 500; color: var(--ink-soft); }
.menu .stop.locked .map-text b { color: var(--ink-soft); }

/* A week in one place */
.menu .week-panel { padding: 16px; }
.menu .area-desc { font: 500 1.14rem/1.3 var(--display); color: var(--ink); }
.menu .rush-key { font-size: .76rem; font-weight: 500; color: var(--ink-soft); }
.menu .rush-key i { width: 8px; height: 8px; border-radius: 1px; background: var(--m-brass); }
.menu .week { gap: 7px; }
.menu .day { background: rgba(243, 233, 212, .035); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-hair-soft); }
.menu .day:not(:disabled):hover { transform: none; box-shadow: inset 0 0 0 1px var(--m-brass); }
.menu .day-short { display: none; }
.menu .day-art { display: none; }
.menu .day-body { gap: 4px; padding: 16px 4px 10px; }
.menu .day-body b { font: 600 clamp(.92rem, 4vw, 1.1rem)/1.1 var(--display); color: var(--ink); }
.menu .day-note { font-size: .7rem; font-weight: 500; }
.menu .rush-badge { padding: 0; font-size: .66rem; font-weight: 600; color: var(--m-brass); background: none; }
.menu .day.locked { background: none; }
.menu .day.locked .day-body b { color: #7c7566; }
.menu .day-lock { color: #7c7566; }
.menu .day-lock svg { width: 14px; height: 14px; }
.menu .day.current { box-shadow: inset 0 0 0 1px var(--m-brass), 0 0 22px rgba(217, 181, 102, .16); }
.menu .day.current::after { top: 4px; right: 4px; padding: 0 5px; font-size: .56rem; font-weight: 700; color: #1b1407; background: var(--m-brass); border-radius: 4px; }
.menu .day .mini-stars .star { width: 13px; height: 13px; }
.menu .first-rack .box { background: rgba(243, 233, 212, .05); }

/* Shop */
.menu .chips { gap: 18px; padding: 0 2px; border-bottom: 1px solid var(--m-hair-soft); }
.menu .chips button { min-height: 38px; padding: 0 1px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); background: none; border-radius: 0; box-shadow: none; }
.menu .chips button[aria-pressed="true"] { color: var(--m-brass-hi); background: none; box-shadow: inset 0 -2px 0 var(--m-brass); }
.menu .shop-grid { gap: 8px; }
.menu .shop-item { align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; }
.menu .shop-text b { font: 600 1.2rem/1.1 var(--display); color: var(--ink); }
.menu .shop-text p { margin-top: 2px; font-size: .8rem; line-height: 1.28; color: var(--ink-soft); }
.menu .wage-line, .menu .on-counter { display: block; margin-top: 3px; font-size: .7rem; font-weight: 500; color: #998f7b; }
.menu .on-counter { color: var(--m-brass); }
.menu .shop-note { font-size: .74rem; font-weight: 500; color: #998f7b; }
.menu .shop-note.owned { color: var(--m-brass); }
.menu .btn-buy { min-height: 38px; padding: 2px 11px; font-size: .86rem; border-radius: 10px; font-variant-numeric: lining-nums tabular-nums; }
.menu .btn-buy .coin { width: 15px; height: 15px; }
.menu .btn-unhire, .menu .shop-actions .btn-plain { min-height: 36px; padding: 2px 10px; font-size: .8rem; }
.menu .shop-item.locked { opacity: 1; }
.menu .shop-item.locked .shop-text b { color: var(--ink-soft); }
.menu .shop-item.locked .shop-icon svg { filter: grayscale(1) brightness(.62); }
.menu .shop-icon, .screen ~ .modal-wrap .shop-icon { width: 52px; height: 52px; background: radial-gradient(circle at 50% 28%, rgba(243, 233, 212, .13), rgba(243, 233, 212, .03) 72%); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-hair); filter: none; }
.menu .shop-icon svg, .screen ~ .modal-wrap .shop-icon svg { width: 38px; height: 38px; filter: saturate(.85) drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* Profile and settings */
.menu .profile-text h2 { font: 600 2rem/1.05 var(--display); color: var(--ink); }
.menu .rank { padding: 0; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--m-brass); background: none; }
.menu .stats { gap: 7px; }
.menu .stat b { font: 600 1.7rem/1.1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.menu .stat span { font-size: .7rem; color: var(--ink-soft); }
.menu .profile-areas h3 { font: 600 1.4rem var(--display); color: var(--ink); }
.menu .progress-row { font-size: .84rem; color: var(--ink-soft); }
.menu .progress-row b { font-weight: 500; }

/* The full game */
.menu .paywall { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 22px 18px; text-align: center; }
.menu .paywall .brass-token { --token: 96px; }
.menu .paywall h2 { font: 600 2.1rem/1.1 var(--display); color: var(--ink); }
.menu .paywall > p { color: var(--ink-soft); }
.paywall-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; width: 100%; margin: 0; padding: 0; list-style: none; font: 500 1.08rem/1.25 var(--display); color: var(--ink); }
.menu .paywall-price { display: flex; flex-direction: column; color: var(--ink-soft); font-size: .86rem; }
.menu .paywall-price b { font: 600 2.6rem/1.1 var(--display); font-variant-numeric: lining-nums; color: var(--m-brass-hi); }
.paywall-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.menu .notice-line { padding: 10px 14px; font-size: .88rem; color: var(--m-brass-hi); background: rgba(217, 181, 102, .09); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--m-hair); }
.menu .field-error:empty, .screen ~ .modal-wrap .field-error:empty { display: none; }
.screen ~ .modal-wrap .input-wrap { background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--m-hair); }
.screen ~ .modal-wrap .input-wrap input { color: var(--ink); }
.screen ~ .modal-wrap .eye { color: var(--m-brass); }
.screen ~ .modal-wrap .field label { color: var(--ink-soft); }
.screen ~ .modal-wrap .field-error { color: #ec9c92; }
.veil { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5, 9, 8, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.veil-card { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #f3e9d4; font-weight: 600; background: #121a17; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(217, 181, 102, .35); }
.veil-spin { width: 20px; height: 20px; border: 2px solid rgba(217, 181, 102, .25); border-top-color: #d9b566; border-radius: 50%; animation: veil-spin .8s linear infinite; }
@keyframes veil-spin { to { transform: rotate(360deg); } }

/* Pop-ups opened from the menus */
.screen ~ .modal-wrap { background: rgba(5, 9, 8, .68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.screen ~ .modal-wrap .modal { background: #121a17; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--m-hair), var(--shadow-lg); }
.screen ~ .modal-wrap .modal h2 { font-weight: 600; font-size: 2.2rem; color: var(--ink); }
.screen ~ .modal-wrap .kicker { font: 600 .68rem/1.3 var(--body); letter-spacing: .18em; color: var(--m-brass); }
.screen ~ .modal-wrap .round-facts div { background: rgba(243, 233, 212, .04); box-shadow: inset 0 0 0 1px var(--m-hair-soft); }
.screen ~ .modal-wrap .round-facts b { font-weight: 600; font-size: 1.7rem; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.screen ~ .modal-wrap .day-tip { background: rgba(217, 181, 102, .08); box-shadow: inset 0 0 0 1px var(--m-hair); }
.screen ~ .modal-wrap .day-tip-text b, .screen ~ .modal-wrap .machine-label { font-weight: 600; letter-spacing: .14em; color: var(--m-brass); }
.screen ~ .modal-wrap .day-tip-face { background: #24332d; }
.screen ~ .modal-wrap .equip-row { color: var(--ink); background: rgba(243, 233, 212, .03); box-shadow: inset 0 0 0 1px var(--m-hair-soft); opacity: .72; }
.screen ~ .modal-wrap .equip-row.on { background: rgba(217, 181, 102, .09); box-shadow: inset 0 0 0 1px var(--m-brass); opacity: 1; }
.screen ~ .modal-wrap .equip-row .shop-icon { width: 38px; height: 38px; border-radius: 10px; }
.screen ~ .modal-wrap .equip-row .shop-icon svg { width: 28px; height: 28px; }
.screen ~ .modal-wrap .day-tip .shop-icon { width: 46px; height: 46px; }
.screen ~ .modal-wrap .day-tip .shop-icon svg { width: 34px; height: 34px; }
.screen ~ .modal-wrap .equip-row[aria-checked="true"] .switch { background: var(--m-brass); }
.screen ~ .modal-wrap .equip-total b { color: var(--ink); }
.screen ~ .modal-wrap .new-rule { color: var(--ink); background: rgba(243, 233, 212, .04); box-shadow: inset 0 0 0 1px var(--m-hair-soft); }
.screen ~ .modal-wrap .step-art { background: #1d2722; }

@media (min-aspect-ratio: 1/1) and (min-height: 481px) {
  .menu .shop-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .menu .road { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding-left: 0; }
  .menu .road::before, .menu .stop-node { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  .menu.auth { grid-template-columns: minmax(0, 1fr); }
  .auth .brass-token { --token: clamp(84px, 15vh, 130px); }
  .menu .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu .map-card { display: block; }
  .menu .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .menu .journey-row { margin-inline: -14px; padding-inline: 14px; }
  .menu .dock { width: calc(100% - 20px); }
  .menu .dock button { min-height: 56px; }
}
/* Phone, on its side: the token moves beside the title so the button stays on screen. */
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .home .hero { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "token brand" "token action"; column-gap: 16px; max-width: 640px; margin-top: 6px; text-align: left; }
  .home .brass-token { grid-area: token; --token: 110px; align-self: center; }
  .home .hero-brand { grid-area: brand; align-self: end; align-items: flex-start; margin: 0; }
  .home .hero-brand .logo { font-size: 2.3rem; }
  .home .hero-tag { display: none; }
  .home .hero-action { grid-area: action; align-self: start; align-items: flex-start; margin-top: 8px; }
  .home .cta { min-height: 54px; }
  .auth .brass-token { display: none; }
  .menu .dock button { min-height: 44px; }
}