/* across/css/across.css - ACROSS THE CORN's page: the curtain, the door, the corner, a crossing's HUD and the lineup's
 * cards, laid over the 3D field (across/js/across-scene.js). The Herd's colours are gold, pink and mint; the Horde's
 * violet and toxic green (html[data-side], set by across/js/across-main.js).
 *
 * The series' lessons, kept here from the first draw (docs/READABILITY.md, ARCHITECTURE.md conventions 35 to 37):
 * words never under 16 CSS px and 18 for reading on a phone; every button 44 px or more (48 on a touch screen);
 * nothing lies on a button (the World door keeps the bottom right of the door to itself, the copyright mark the
 * bottom left); every edge steps in past an iPhone's camera and rounded corners (env(safe-area-inset-*), and
 * --sotc-edge-l/-r from js/friends.js THE ISLAND'S SIDE); the field fills the whole window on a computer, at any shape. */
:root {
  --ink: #120A1E;
  --glass: rgba(22, 12, 36, 0.78);
  --glass-2: rgba(38, 22, 60, 0.82);
  --line: rgba(255, 255, 255, 0.18);
  --text: #FBF3E7;
  --muted: #DCCFF0;
  --gold: #F5C242;
  --a: #FF6FB5;
  --b: #7FE0D6;
  --font: 'Trebuchet MS', 'Lucida Grande', Verdana, sans-serif;
  --title-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --edge-l: var(--sotc-edge-l, env(safe-area-inset-left, 0px));
  --edge-r: var(--sotc-edge-r, env(safe-area-inset-right, 0px));
  --tap: 48px;
}
html[data-side="horde"] { --a: #A78BFA; --b: #6BE04A; --ink: #0C0A14; }
@media (pointer: fine) { :root { --tap: 44px; } }

html, body { margin: 0; padding: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }

/* ---- the loading curtain ---------------------------------------------------------------------------------------------- */
.curtain { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 40%, #3A2160 0%, var(--ink) 72%); transition: opacity 0.5s ease; }
.curtain.is-gone { opacity: 0; }
.curtain-art { width: 140px; height: auto; animation: curtain-hop 0.9s cubic-bezier(.3, .0, .5, 1) infinite alternate; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45)); }
@keyframes curtain-hop { from { transform: translateY(14px) scale(1.04, 0.94); } to { transform: translateY(-22px) scale(0.97, 1.04); } }
.curtain-title { margin: 0; font-family: var(--title-font); font-weight: bold; letter-spacing: 0.2em; font-size: 24px; color: var(--gold); text-align: center; }
.curtain-bar { width: min(280px, 70vw); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.curtain-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--a), var(--gold), var(--b)); transition: width 0.4s ease; }
.curtain-line { margin: 0; color: var(--muted); font-size: 18px; }

/* ---- buttons and chips ------------------------------------------------------------------------------------------------- */
.btn { appearance: none; min-height: var(--tap); border: 1px solid var(--line); background: var(--glass-2); color: var(--text); border-radius: 14px;
  padding: 10px 18px; font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease, background 0.2s; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .chip:focus-visible, .hud-pause:focus-visible, .acr-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-ghost { background: var(--glass); }
.btn-play { position: relative; border: 0; min-height: 64px; padding: 14px 40px; font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase; color: #1A0F24;
  background: linear-gradient(135deg, var(--gold), #FFE9A8 45%, var(--a)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 10px 34px rgba(245, 194, 66, 0.45); }
html[data-side="horde"] .btn-play { background: linear-gradient(135deg, #C9F27A, #F5E9A8 40%, var(--a)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 10px 34px rgba(107, 224, 74, 0.4); }
.btn-play::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--gold); opacity: 0.6; animation: halo 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 0.15; } }
.chip { appearance: none; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--glass);
  color: var(--text); border-radius: 999px; padding: 6px 16px; font-size: 16px; font-weight: bold; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-sizing: border-box; }
.chip-acct { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-friends { gap: 6px; border-color: rgba(245, 194, 66, 0.55); color: #FFE9A8; }
.chip-friends::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-7 8-7s8 3 8 7z'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M15.5 13.2c4 .2 7.5 2.6 7.5 6.8h-4.6c0-2.6-1-4.9-2.9-6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-7 8-7s8 3 8 7z'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M15.5 13.2c4 .2 7.5 2.6 7.5 6.8h-4.6c0-2.6-1-4.9-2.9-6.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip-friends[aria-expanded="true"] { border-color: var(--gold); background: rgba(245, 194, 66, 0.22); }
.chip-side { padding: 4px 16px 4px 10px; cursor: default; }
.chip-side.side-badge--herd { border-color: rgba(255, 143, 199, 0.5); }
.chip-side.side-badge--horde { border-color: rgba(107, 224, 74, 0.5); }
.chip-side[role="button"] { cursor: pointer; }
/* the shared badge's two lines are 9px and 14px: the series' least is 16px (a guest's practice badge shows them) */
.chip-side .side-badge__kick { font-size: 16px; letter-spacing: 0.02em; text-transform: none; opacity: 1; }
.chip-side .side-badge__name { font-size: 16px; letter-spacing: 0.1em; }

/* ---- the door ---------------------------------------------------------------------------------------------------------- */
/* Held upright: one column in the middle, the corner above it and the World door below it. On a wide screen: a column
   on the left with the field drifting by on the right. The column scrolls on a very short screen rather than shrink. */
.door { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden;
  box-sizing: border-box; padding: calc(72px + var(--safe-t)) calc(16px + var(--edge-r)) calc(122px + var(--safe-b)) calc(16px + var(--edge-l));
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(12, 6, 22, 0.72) 0%, rgba(12, 6, 22, 0.55) 50%, rgba(12, 6, 22, 0.16) 100%); }
.door-col { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin: auto 0; }
.door-kicker { margin: 0; color: var(--muted); letter-spacing: 0.3em; text-transform: uppercase; font-size: 16px; font-weight: bold; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.door-title { margin: 0; font-family: var(--title-font); font-weight: bold; line-height: 0.95; font-size: clamp(44px, 13vw, 92px); letter-spacing: 0.04em; }
.door-title span { display: block; background: linear-gradient(180deg, #FFF6D0 0%, var(--gold) 50%, var(--a) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(245, 194, 66, 0.35)); }
.door-title span + span { font-size: 0.62em; letter-spacing: 0.12em; background: linear-gradient(180deg, #FFFFFF 0%, var(--b) 55%, var(--a) 100%); -webkit-background-clip: text; background-clip: text; }
.door-sub { margin: 0 0 4px; font-size: 19px; line-height: 1.35; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); }
.door-hopper { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 8px 10px 8px 8px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); text-align: left; }
.door-hopper__art { flex: none; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(245, 194, 66, 0.45), rgba(255, 111, 181, 0.12) 70%); }
.door-hopper__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.door-hopper__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.door-hopper__label { font-size: 16px; color: var(--muted); }
.door-hopper__name { font-size: 21px; font-weight: bold; color: var(--gold); overflow-wrap: anywhere; }
.door-hopper__who { font-size: 16px; color: var(--muted); line-height: 1.3; }
.door-hopper__change { flex: none; }
.door-best { margin: 0; font-size: 18px; font-weight: bold; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.door-next-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.door-next { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); overflow: hidden; border: 1px solid var(--line); }
.door-next span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #FFE9A8); transition: width 0.6s ease; }
.door-next-text { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.35; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }
.door-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.door-copy { position: fixed; left: calc(14px + var(--edge-l)); bottom: calc(8px + var(--safe-b)); margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 12px; z-index: 21; pointer-events: none; }
/* a computer or a phone held sideways: the column on the left, the field on the right */
@media (min-aspect-ratio: 5/4) {
  .door { justify-content: flex-start; padding: calc(70px + var(--safe-t)) calc(24px + var(--edge-r)) calc(24px + var(--safe-b)) calc(max(24px, 6vw) + var(--edge-l));
    background: linear-gradient(90deg, rgba(12, 6, 22, 0.72) 0%, rgba(12, 6, 22, 0.42) 38%, rgba(12, 6, 22, 0) 62%); }
  .door-col { align-items: flex-start; text-align: left; width: min(460px, 46vw); }
  .door-row { justify-content: flex-start; }
  /* the copyright line goes over the field, left of the World door, clear of the column's buttons */
  .door-copy { left: auto; right: calc(124px + var(--edge-r)); }
}
/* a phone held sideways: short, so the column is tighter and the title smaller */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .door { padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  .door-col { gap: 8px; width: min(420px, 52vw); }
  .door-kicker { display: none; }
  .door-title { font-size: clamp(34px, 9vh, 52px); }
  .door-title span { display: inline; }
  .door-title span + span { font-size: 1em; letter-spacing: 0.04em; }
  .door-title span + span::before { content: ' '; }
  .door-sub { display: none; }
  .door-hopper__art { width: 56px; height: 56px; }
  .btn-play { min-height: 56px; font-size: 22px; padding: 10px 34px; }
}
/* THE DOOR FITS ITS WINDOW (across-main.js fitDoor): where the door would run past its foot in the device's own face, the
   app held upright first takes back the room kept for the website's World door (it has none: html[data-app]); then the
   line over the title and the line under it go; then the bar to the next hopper (the Lineup shows it), and the title and
   the big button come down to a short phone's sizes; last, the line of your best goes */
@media (max-aspect-ratio: 5/4) { html[data-app] .door.door--snug { padding-top: calc(64px + var(--safe-t)); padding-bottom: calc(40px + var(--safe-b)); } }
.door--tight .door-kicker, .door--tight .door-sub { display: none; }
.door--tight .door-col { gap: 8px; }
.door--tighter .door-next-wrap { display: none; }
.door--tighter .door-title { font-size: clamp(34px, min(10vw, 8vh), 52px); }
.door--tighter .btn-play { min-height: 52px; font-size: 20px; padding: 8px 30px; }
.door--tighter .door-hopper__art { width: 56px; height: 56px; }
.door--tighter .door-col { gap: 6px; }
.door--tighter .door-row { gap: 8px; }
.door--tightest .door-best { display: none; }
/* ---- the corner: top right, in past the island when it is on the right ---------------------------------------------------- */
.corner { position: fixed; top: calc(12px + var(--safe-t)); right: calc(12px + var(--edge-r)); z-index: 45; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 24px - var(--edge-l) - var(--edge-r)); }
@media (max-width: 420px) { .corner { left: calc(12px + var(--edge-l)); justify-content: center; } .chip { padding: 6px 11px; font-size: 16px; } .chip-acct { max-width: 120px; } }
/* a phone held sideways: the chips stacked down the right edge, clear of the door's column (a guest's side badge
   made a second row that came down over the title) */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) { .corner { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; } }

/* ---- a crossing ---------------------------------------------------------------------------------------------------------- */
.pad { position: fixed; inset: 0; z-index: 25; touch-action: none; outline: none; cursor: pointer; }
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.hud-dark { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; opacity: 0; transition: opacity 0.25s linear;
  background: linear-gradient(0deg, rgba(40, 10, 70, 0.85) 0%, rgba(40, 10, 70, 0.4) 45%, rgba(40, 10, 70, 0) 100%); }
html[data-side="horde"] .hud-dark { background: linear-gradient(0deg, rgba(6, 2, 14, 0.92) 0%, rgba(30, 10, 60, 0.45) 45%, rgba(30, 10, 60, 0) 100%); }
.hud-top { position: absolute; top: calc(10px + var(--safe-t)); left: calc(12px + var(--edge-l)); right: calc(12px + var(--edge-r));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.hud-kern { justify-self: start; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line); font-size: 24px; font-weight: bold; color: #FFE9A8; min-height: 44px; box-sizing: border-box; }
.hud-kern img { width: 34px; height: 34px; object-fit: contain; }
.hud-kern.is-up { animation: pop 0.35s ease; }
.hud-score-wrap { text-align: center; }
.hud-score { margin: 0; font-family: var(--title-font); font-weight: bold; font-size: 64px; line-height: 1; color: #FFFFFF;
  -webkit-text-stroke: 2px rgba(26, 12, 40, 0.9); text-shadow: 0 4px 0 rgba(26, 12, 40, 0.75), 0 0 20px rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.hud-score.is-up { animation: pop 0.25s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.hud-best { margin: 2px 0 0; font-size: 18px; font-weight: bold; color: #FFE9A8; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); min-height: 1em; }
.hud-line { margin: 6px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; max-width: min(56vw, 300px); padding: 4px 12px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); font-size: 16px; font-weight: bold; line-height: 1.3; color: var(--text); }
.hud-line > span { white-space: nowrap; }
.hud-line__barn { color: #FFE9A8; }
.hud-line.is-full { border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 194, 66, 0.55); }
.hud-call { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 48px);
  padding: 10px 20px; border-radius: 18px; background: var(--glass-2); border: 2px solid var(--line); font-size: 20px; font-weight: bold;
  line-height: 1.3; text-align: center; color: var(--text); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); opacity: 0; }
.hud-call.is-gold { color: #1A0F24; text-shadow: none; background: linear-gradient(135deg, var(--gold), #FFE9A8); border-color: #FFF4CC; }
.hud-call.is-warn { border-color: #FF8A6A; }
.hud-call.is-good { border-color: var(--b); }
.hud-call.is-on { animation: callout 2.2s ease forwards; }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.92); } 10% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.hud-newbest { margin: 6px auto 0; display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 18px; font-weight: bold; color: #1A0F24;
  background: linear-gradient(135deg, var(--gold), #FFE9A8); box-shadow: 0 4px 14px rgba(245, 194, 66, 0.5); opacity: 0; }
.hud-newbest.is-on { animation: newbest 2.6s ease forwards; }
@keyframes newbest { 0% { opacity: 0; transform: translateY(-8px) scale(0.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.hud-pause { justify-self: end; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 233, 168, 0.7); background: var(--glass);
  display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.hud-pause span { width: 16px; height: 18px; border-left: 5px solid #FFE9A8; border-right: 5px solid #FFE9A8; box-sizing: border-box; }
.hud-pause:active { transform: scale(0.94); }
.hud-hint { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 40px);
  padding: 10px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 18px; text-align: center; line-height: 1.35;
  animation: hint-in 0.5s ease 0.4s both; }
.hud-hint.is-gone { animation: hint-out 0.6s ease forwards; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hint-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (max-height: 560px) and (min-aspect-ratio: 5/4) { .hud-score { font-size: 48px; } .hud-call { top: 44%; } }

/* ---- the pause sheet (js/room-ui.js dialog) ------------------------------------------------------------------------------- */
.acr-pause__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.acr-how .acr-how__h { margin: 18px 0 4px; font: bold var(--rui-h2, 22px)/1.2 var(--title-font); color: var(--rui-gold, #F5C242); }
.acr-how .acr-how__h:first-child { margin-top: 0; }
/* the privacy policy and help: two buttons that are links (each opens the site's page; in the app, in Safari) */
.acr-how__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.acr-how__links .rui-btn { text-decoration: none; }

/* ---- THE LINEUP (a readable room: js/room-ui.js) -------------------------------------------------------------------------- */
/* The room stands over the door's painting (mount({ paint })). The kit's scrim is made for the main game's calm painted
   rooms; this painting is the field itself, busy and bright, so its scrim is darker and the words sit on a calm ground. */
.rui.acr-room[data-paint] {
  background:
    linear-gradient(180deg, rgba(11, 8, 20, 0.84), rgba(11, 8, 20, 0.9)),
    var(--rui-paint) center / cover no-repeat,
    #120D1D;
}
.acr-next__row { display: flex; align-items: center; gap: 16px; }
.acr-next__art { flex: none; width: calc(104px * var(--rui-s, 1)); height: calc(104px * var(--rui-s, 1)); object-fit: contain; object-position: center bottom; border-radius: 16px;
  background: radial-gradient(circle at 50% 70%, rgba(245, 194, 66, 0.4), rgba(255, 111, 181, 0.1) 70%); }
.acr-next__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acr-next__name { margin: 0; font-size: var(--rui-h2, 22px); font-weight: bold; color: var(--rui-gold, #F5C242); }
.acr-next__who, .acr-next__left { margin: 0; }
.acr-count { margin: 0 0 8px; }
.acr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(158px * var(--rui-s, 1)), calc(50% - 6px)), 1fr)); gap: 12px; margin: 10px 0; }
.acr-card { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 12px; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--rui-panel-2, #251C38); border: 2px solid var(--rui-line, rgba(201, 168, 245, 0.4)); color: var(--rui-ink, #FBF3E7); min-height: 44px; font: inherit; }
.acr-card:hover { filter: brightness(1.12); }
.acr-card.is-on { border-color: var(--rui-gold, #F5C242); box-shadow: 0 0 0 2px rgba(245, 194, 66, 0.35), 0 6px 22px rgba(245, 194, 66, 0.25); }
.acr-card__art { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 72%, rgba(245, 194, 66, 0.38), rgba(255, 111, 181, 0.1) 72%); }
.rui[data-side="horde"] .acr-card__art { background: radial-gradient(circle at 50% 72%, rgba(107, 224, 74, 0.3), rgba(167, 139, 250, 0.12) 72%); }
.acr-card__art img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; object-position: center; }
/* Upcoming hoppers keep their full artwork visible. The unlock text and closed card state explain the lock. */
.acr-card__name { font-size: var(--rui-body, 18px); font-weight: bold; color: var(--rui-gold, #F5C242); line-height: 1.2; overflow-wrap: anywhere; }
.acr-card.is-shut .acr-card__name { color: var(--rui-ink, #FBF3E7); }
.acr-card__who { font-size: var(--rui-min, 16px); color: var(--rui-soft, #DED4F2); line-height: 1.3; }
.acr-card__state { margin-top: 2px; font-size: var(--rui-min, 16px); line-height: 1.3; color: var(--rui-warn, #FFD27A); }
.acr-card__state.is-open { color: var(--rui-good, #8EF07A); font-weight: bold; }
.acr-card.is-on .acr-card__state { color: var(--rui-gold, #F5C242); }
@media (max-width: 380px) { .acr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---- small things -------------------------------------------------------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 14px;
  background: var(--glass-2); border: 1px solid var(--line); font-size: 18px; text-align: center; }
.boot-error { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  background: var(--ink); font-size: 18px; }
.boot-error__title { font-size: 24px; font-weight: bold; color: var(--gold); margin: 0; }
.boot-error a { color: var(--b); }

/* ---- a big screen: the door's column, the corner and the crossing's words grow with it, so a PC reads as well as a
   phone held close (the readable rooms grow the same way, by --rui-s) ------------------------------------------------------ */
@media (min-width: 1400px) and (min-height: 820px) { .door-col, .corner, .hud-top, .hud-hint, .hud-call, .door-copy { zoom: 1.3; } }
@media (min-width: 2300px) and (min-height: 1250px) { .door-col, .corner, .hud-top, .hud-hint, .hud-call, .door-copy { zoom: 1.65; } }

@media (prefers-reduced-motion: reduce) {
  .btn-play::after, .curtain-art, .hud-hint, .hud-newbest.is-on, .hud-score.is-up, .hud-kern.is-up, .hud-call.is-on { animation: none; }
  .hud-call.is-on { opacity: 1; }
  .hud-newbest.is-on { opacity: 1; }
}