:root {
  color-scheme: light;
  --abyss: #171725;
  --deep: #18265f;
  --deep-2: #25336e;
  --table: #256557;
  --table-dark: #193e39;
  --ivory: #fff2db;
  --ivory-soft: #efd8b4;
  --tile-edge: #b98236;
  --muted: #7f675c;
  --mint: #2f9d68;
  --mint-dark: #24784f;
  --brass: #f2b83d;
  --brass-soft: #a5681d;
  --blue: #315a9f;
  --coral: #c8323c;
  --ink: #171725;
  --walnut: #5b3424;
  --walnut-dark: #2c1918;
  --line: rgba(71, 39, 29, .2);
  --panel: rgba(255, 242, 219, .96);
  --panel-soft: rgba(246, 222, 184, .94);
  --shadow: 0 28px 76px rgba(30, 13, 18, .38);
  --radius: 15px;
  --courtyard-art: url('./assets/usak-courtyard-backdrop.png');
  --textile-art: url('./assets/usak-textile-pattern.png');
  --frame-art: url('./assets/usak-frame-material.png');
  --host-art: url('./assets/usak-host-face.png');
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
}

html { background: #160f1b; }
body {
  color: var(--ink);
  background-color: #efd09a;
  background-image: var(--textile-art);
  background-size: 480px 480px;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 242, 219, .82);
}
.board-app { position: relative; }
.board-header {
  min-height: 76px;
  color: var(--ivory);
  border-bottom: 3px solid var(--brass);
  background: rgba(24, 38, 95, .98);
  backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(31, 17, 26, .22);
}
.brand-mark {
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(8, 10, 28, .42), 0 0 0 2px var(--brass);
}
.board-title strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}
.board-title span { color: #e7cfae; }
.direction-pill {
  color: var(--ink);
  border: 1px solid #ffe39a;
  background: var(--brass);
  font-weight: 800;
}
.device-switch {
  border: 1px solid rgba(255, 242, 219, .34);
  background: #101a48;
}
.device-switch button { color: #d6cbbf; }
.device-switch button.active {
  color: var(--ink);
  background: var(--ivory);
}
.board-layout { grid-template-columns: 250px minmax(0, 1fr); }
.screen-nav {
  border-right: 0;
  color: var(--ivory);
  background-color: #151e4d;
  background-image: var(--textile-art);
  background-size: 330px;
  background-blend-mode: multiply;
  box-shadow: 8px 0 28px rgba(31, 14, 21, .18);
}
.nav-group-label { color: #e7b94d; }
.nav-item {
  color: #e7ded0;
  border-radius: 8px 13px 13px 8px;
}
.nav-item:hover { color: #fff; background: rgba(255, 242, 219, .1); }
.nav-item.active {
  color: var(--ink);
  background: var(--ivory);
  box-shadow: inset 5px 0 var(--coral), 0 7px 16px rgba(10, 8, 30, .2);
  font-weight: 800;
}
.nav-number { color: #c7ad82; }
.nav-item.active .nav-number { color: var(--coral); }
.board-main { padding-top: 20px; }
.preview-kicker { color: var(--coral); }
.preview-title h1 {
  font-family: Georgia, "Times New Roman", serif;
  color: #32201f;
}
.preview-title p { color: #7e5f52; }
.preview-status {
  color: #62483e;
  border: 1px solid rgba(91, 52, 36, .25);
  background: rgba(255, 242, 219, .68);
}
.device-shell {
  padding: 10px;
  border-radius: 27px;
  background-color: var(--walnut-dark);
  background-image: var(--frame-art);
  background-size: 100% 100%;
  box-shadow: var(--shadow), inset 0 0 0 2px #c58a2c;
}
.game-screen { border-radius: 18px; background: var(--ink); }
.device-notch { background: rgba(23, 23, 37, .72); }
.note-card {
  border: 1px solid rgba(91, 52, 36, .24);
  border-radius: 11px;
  background: rgba(255, 242, 219, .9);
  box-shadow: 0 8px 18px rgba(75, 45, 31, .08);
}
.note-card span { color: var(--coral); }
.note-card strong { color: #3d2a26; }

/* Shared game world */
.scene {
  color: var(--ivory);
  background-color: rgba(23, 23, 37, .78);
  background-image: var(--courtyard-art);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}
.scene::before {
  opacity: .16;
  background-image: var(--textile-art);
  background-size: 15em 15em;
  mask-image: linear-gradient(to bottom, black, transparent 64%);
  animation: textile-drift 12s ease-in-out infinite alternate;
}
.screen-changing .scene { animation: scene-arrive .42s cubic-bezier(.2,.8,.2,1) both; }
.screen-changing .content > *,
.screen-changing .matchmaking-body > *,
.screen-changing .result-body > * {
  animation: content-rise .34s cubic-bezier(.2,.8,.2,1) both;
}
.screen-changing .content > *:nth-child(2),
.screen-changing .matchmaking-body > *:nth-child(2),
.screen-changing .result-body > *:nth-child(2) { animation-delay: .055s; }
.game-topbar {
  height: 12.4%;
  color: var(--ivory);
  border-bottom: 2px solid var(--brass);
  background: rgba(24, 38, 95, .96);
  box-shadow: 0 .55em 1.2em rgba(27, 14, 20, .2);
}
.game-logo-mark { border: .13em solid var(--brass); border-radius: .65em; }
.game-logo strong,
.top-title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
}
.game-logo small { color: var(--brass); }
.top-label { color: #d7c4ae; }
.back-button,
.round-icon {
  border: 1px solid rgba(255, 242, 219, .32);
  border-radius: .72em;
  color: var(--ivory);
  background: #24336f;
  cursor: pointer;
}
.balance {
  color: #2e2008;
  border-color: #ffe29a;
  background: var(--brass);
  box-shadow: inset 0 1px rgba(255,255,255,.4);
}
.balance .coin { background: #fff2b2; border: .12em solid #b77419; }
.avatar {
  color: var(--ivory);
  background-image: var(--host-art);
  background-size: 190%;
  background-position: 52% 18%;
  border-color: var(--brass);
  cursor: pointer;
  text-indent: -9999px;
}
.avatar::after { background: var(--green, #2f9d68); border-color: var(--deep); }
.display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -.025em;
}
.eyebrow { color: var(--coral); }
.lede { color: #eadac5; }
.panel {
  color: var(--ink);
  border: .13em solid var(--brass);
  border-radius: 11px 18px 11px 18px;
  background: rgba(255, 242, 219, .96);
  box-shadow: 0 1em 2.2em rgba(32, 15, 22, .26), inset 0 0 0 .16em rgba(24,38,95,.1);
}
.panel .section-copy,
.panel .lede,
.panel p,
.panel small,
.panel .stat-label { color: #725e54; }
.panel-brass { border-color: var(--coral); }
.btn {
  border: .13em solid #ffdc83;
  border-radius: .7em 1.05em .7em 1.05em;
  color: #fff8e9;
  background: var(--coral);
  box-shadow: 0 .5em 1em rgba(117, 27, 39, .28), inset 0 1px rgba(255,255,255,.3);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-.12em); filter: brightness(1.06); }
.btn:active { transform: translateY(.08em) scale(.98); }
.btn.secondary {
  color: var(--ivory);
  background: var(--deep);
  border-color: #7181bd;
}
.btn.brass {
  color: var(--ink);
  background: var(--brass);
  border-color: #ffe6a7;
  box-shadow: 0 .55em 1.3em rgba(134, 80, 14, .28), inset 0 1px rgba(255,255,255,.4);
}
.btn.ghost {
  color: var(--deep);
  background: rgba(255, 242, 219, .72);
  border-color: rgba(24, 38, 95, .35);
}
.btn.coral { color: white; background: #9e2532; border-color: #e18085; }
.pill {
  color: var(--deep);
  border-color: rgba(24, 38, 95, .22);
  background: #f4dfbd;
}
.pill.brass { color: #4a3107; background: var(--brass); border-color: #d79221; }
.pill.coral { color: #fff; background: var(--coral); border-color: #ee8c91; }
.progress { background: rgba(24, 38, 95, .14); }
.progress > i {
  background: var(--coral);
  transform-origin: left;
  animation: progress-fill .62s cubic-bezier(.2,.8,.2,1) both;
}
.divider { background: rgba(91, 52, 36, .22); }
.mini-avatar {
  color: #fff8e9;
  border: .12em solid var(--brass);
  border-radius: 50%;
  background: var(--deep);
}
.online { background: var(--mint); }
.bottom-nav {
  border: .14em solid var(--brass);
  border-radius: 1em 1.6em 1em 1.6em;
  background: rgba(24, 38, 95, .97);
  box-shadow: 0 .9em 2em rgba(27, 14, 22, .35), inset 0 0 0 .16em rgba(255,242,219,.08);
}
.bottom-nav .nav-action {
  border: 0;
  color: #d9c9b6;
  background: transparent;
  cursor: pointer;
}
.bottom-nav .nav-action.active { color: var(--ink); background: var(--brass); }

/* Chosen reference screen */
.home-reference-scene { background: var(--ink); }
.home-reference-scene::before { display: none; }
.home-reference { position: absolute; inset: 0; overflow: hidden; }
.home-reference > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  animation: home-reveal .7s ease both;
}
.home-hotspot {
  position: absolute;
  z-index: 3;
  border: 0;
  border-radius: 1em;
  background: transparent;
  cursor: pointer;
}
.home-hotspot:hover { box-shadow: inset 0 0 0 .18em rgba(255, 235, 164, .9), 0 0 2.3em rgba(255, 197, 66, .42); }
.home-hotspot:focus-visible { outline: .22em solid #fff; outline-offset: .16em; }
.home-hotspot.play { left: 27%; top: 61%; width: 42%; height: 15%; animation: cta-breathe 2.3s ease-in-out infinite; }
.home-hotspot.event { left: 23%; bottom: 1%; width: 12%; height: 15%; }
.home-hotspot.social { left: 36%; bottom: 1%; width: 12%; height: 15%; }
.home-hotspot.store { left: 64%; bottom: 1%; width: 12%; height: 15%; }
.home-hotspot.profile { left: 77%; bottom: 1%; width: 12%; height: 15%; }
.home-hotspot.settings { right: 1.5%; top: 1.5%; width: 5.7%; height: 9%; border-radius: 50%; }

/* Overview and onboarding */
.overview-scene { background-color: rgba(24,38,95,.74); background-image: var(--courtyard-art); }
.overview-head {
  height: 23%;
  padding-top: 1.45em;
  align-items: center;
  background: rgba(24, 38, 95, .88);
  border-bottom: .18em solid var(--brass);
}
.overview-head .eyebrow { color: var(--brass); }
.overview-head .lede { color: #ead8c3; }
.overview-count strong { color: var(--brass); }
.overview-grid { height: 77%; padding-top: 1em; }
.overview-card {
  appearance: none;
  text-align: left;
  font: inherit;
  color: var(--ink);
  border: .11em solid var(--brass);
  border-radius: .5em 1em .5em 1em;
  background: rgba(255, 242, 219, .95);
  box-shadow: 0 .55em 1em rgba(28, 14, 20, .18);
  cursor: pointer;
}
.overview-card:nth-child(3n+2) { color: var(--ivory); background: rgba(24, 38, 95, .96); }
.overview-card:nth-child(3n) { background: rgba(242, 184, 61, .95); }
.overview-card span { color: currentColor; opacity: .68; }
.overview-card i { background: var(--coral); }
.overview-card::after { display: none; }
.bootstrap-scene {
  background-color: rgba(24,38,95,.38);
  background-image: var(--courtyard-art);
  background-position: center;
}
.bootstrap-scene::after {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  background-image: var(--textile-art);
  background-size: 18em;
  opacity: .16;
  box-shadow: none;
  animation: textile-drift 12s ease-in-out infinite alternate;
}
.bootstrap-center {
  padding: 1.35em 3em;
  border: .18em solid var(--brass);
  border-radius: 1.1em 2em 1.1em 2em;
  color: var(--ivory);
  background: rgba(24, 38, 95, .94);
  box-shadow: 0 1.4em 3em rgba(35, 15, 22, .38);
}
.bootstrap-logo { border: .16em solid var(--brass); border-radius: 1.2em; }
.bootstrap-word { font-family: Georgia, "Times New Roman", serif; }
.bootstrap-sub { color: var(--brass); }
.loader { background: rgba(255,242,219,.14); }
.loader i { background: var(--coral); animation: loader-weave 1.8s ease-in-out infinite; }
.bootstrap-status { color: #f2dfc7; }
.bootstrap-footer { color: #fff1dc; text-shadow: 0 1px 3px #21101a; }
.onboarding-layout { background: rgba(24,38,95,.84); }
.onboarding-art {
  color: var(--ivory);
  background-color: rgba(24, 38, 95, .9);
  background-image: var(--textile-art);
  background-size: 26em;
  background-blend-mode: multiply;
}
.onboarding-art::after {
  width: 15em; height: 15em;
  right: -1.5em; bottom: -2em;
  border: .25em solid var(--brass);
  border-radius: 50%;
  background-image: var(--host-art);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 .45em rgba(200, 50, 60, .72);
}
.onboarding-art .display { max-width: 7em; }
.onboarding-form {
  color: var(--ink);
  background: rgba(255, 242, 219, .97);
  border-left: .3em solid var(--brass);
}
.onboarding-form .eyebrow { color: var(--coral); }
.step { background: #d4c09d; }
.step.done { background: var(--coral); }
.choice {
  color: var(--ink);
  border-color: rgba(24,38,95,.2);
  background: #f4dfbd;
}
.choice.selected { border-color: var(--coral); background: #ffeac7; box-shadow: inset 0 0 0 .12em rgba(200,50,60,.12); }
.choice small,
.consent { color: #725e54; }
.choice-icon,
.check { color: var(--ivory); background: var(--deep); }

/* Selection, social and settings */
.catalog-head .eyebrow,
.hub-title-row .eyebrow,
.settings-title .eyebrow { color: var(--brass); }
.filter-tabs {
  border-color: var(--brass);
  background: rgba(24,38,95,.92);
}
.filter-tab { color: #e4d2bd; cursor: pointer; }
.filter-tab.active { color: var(--ink); background: var(--brass); }
.mode-grid { gap: .78em; }
.mode-card { border-width: .16em; }
.mode-card:nth-child(1),
.mode-card:nth-child(5) { color: var(--ivory); background: rgba(200, 50, 60, .96); }
.mode-card:nth-child(2),
.mode-card:nth-child(4) { color: var(--ivory); background: rgba(24, 38, 95, .96); }
.mode-card:nth-child(3),
.mode-card:nth-child(6) { background-color: rgba(255,242,219,.96); background-image: var(--textile-art); background-size: 18em; background-blend-mode: soft-light; }
.mode-card p { color: currentColor; opacity: .74; }
.mode-card .big-number { color: rgba(255,242,219,.16); }
.mode-card:nth-child(3) .big-number,
.mode-card:nth-child(6) .big-number { color: rgba(24,38,95,.12); }
.tier-summary,
.result-hero,
.event-hero,
.wallet-card {
  border: 1.15em solid transparent;
  border-image-source: var(--frame-art);
  border-image-slice: 145;
  border-image-width: 1.2em;
  border-image-repeat: stretch;
  background: rgba(255,242,219,.96);
}
.tier-card.selected { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.tier-card.selected small { color: #dbc9b6; }
.tier-medal { color: var(--ink); background: var(--brass); }
.tier-price { color: var(--coral); }
.match-ring {
  border-color: var(--brass);
  background-color: rgba(24,38,95,.84);
  background-image: var(--textile-art);
  background-size: cover;
  box-shadow: 0 0 0 1.2em rgba(200,50,60,.16), inset 0 0 4em rgba(23,23,37,.34);
  animation: medallion-breathe 4s ease-in-out infinite;
}
.match-ring::before { border-color: rgba(255,242,219,.64); animation: orbit 10s linear infinite; }
.match-center strong { color: var(--brass); text-shadow: 0 .1em .2em #431924; }
.match-center span { color: var(--ivory); }
.seat-dot { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.seat-dot.found { color: var(--ink); background: var(--ivory); }
.fact { color: var(--ink); background: rgba(255,242,219,.92); border-left: .24em solid var(--coral); }
.fact span { color: #786154; }
.private-tabs { background-image: var(--textile-art); background-size: 32em; background-blend-mode: soft-light; }
.private-tab { color: #6c594f; }
.private-tab.active { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.field-card,
.setting-section,
.profile-level,
.voice-controls,
.room-card,
.search {
  color: var(--ink);
  border-color: rgba(24,38,95,.18);
  background: #f2ddba;
}
.field-card label,
.setting-copy small,
.list-row-copy small,
.speaker small,
.room-card small,
.mail-item small { color: #725e54; }
.segmented span { color: var(--deep); background: #dec49b; cursor: pointer; }
.segmented span.active { color: var(--ivory); background: var(--coral); }
.toggle { background: #b9a17d; cursor: pointer; }
.toggle.on { background: var(--mint); }
.toggle.on i { background: var(--ivory); }
.slider { background: #cbb28b; }
.slider i { background: var(--coral); }
.slider i::after { background: var(--deep); }
.list-row + .list-row,
.chat-head,
.chat-input,
.score-row,
.match-row,
.setting-row { border-color: rgba(91,52,36,.14); }
.list-row.selected,
.mail-item.unread,
.speaker.active,
.rank-row.self {
  color: var(--ink);
  border-color: var(--coral);
  background: #ffe1b3;
}
.message { color: var(--ivory); background: var(--deep); }
.message.self { color: var(--ink); background: var(--brass); }
.chat-input span { color: #796257; }
.speaker.active { animation: speaker-pulse 1.3s ease-in-out infinite; }
.mail-icon,
.gift-box,
.task-icon { color: var(--ivory); background: var(--coral); }
.gift-card { border-color: #d49b30; background: #f5ddb4; }
.profile-card { background-image: var(--textile-art); background-size: 28em; background-blend-mode: soft-light; }
.profile-avatar {
  color: transparent;
  background-image: var(--host-art);
  background-size: 150%;
  background-position: 53% 22%;
  border-color: var(--brass);
}
.profile-name small { color: #725e54; }
.hub-tab,
.settings-link { color: #6f5a50; cursor: pointer; }
.hub-tab.active,
.settings-link.active { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.stat-card:nth-child(2) { color: var(--ivory); background: var(--coral); }
.stat-card:nth-child(2) .stat-label { color: #ffe5d1; }
.task-card:nth-child(3n+2) { border-color: var(--coral); }
.season-hero {
  color: var(--ivory);
  border-color: var(--brass);
  background-color: rgba(24,38,95,.9);
  background-image: var(--textile-art);
  background-size: 26em;
  background-blend-mode: multiply;
}
.season-tier { color: var(--ink); border-color: #cab184; background: #f0dbb7; }
.season-tier.unlocked { border-color: var(--coral); }
.season-tier .tier-dot { color: var(--ivory); background: var(--coral); }
.season-tier.locked .tier-dot { color: #8b765f; background: #d5c09b; }
.podium-step { color: var(--ink); background: var(--brass); }
.podium-player.second .podium-step { background: #e8ddc8; }
.podium-player.third .podium-step { color: #fff; background: var(--coral); }
.tourney-card,
.replay-item,
.matchup { color: var(--ink); border-color: #c4aa7e; background: #f1ddb9; }
.tourney-card.selected,
.replay-item.selected { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.tourney-card.selected small,
.replay-item.selected small { color: #dbcab7; }
.matchup span.winner { color: var(--coral); }
.event-hero {
  color: var(--ink);
  background-color: #fff0d2;
  background-image: var(--textile-art);
  background-size: 34em;
  background-blend-mode: soft-light;
}
.event-hero::after { display: none; }
.event-mission { color: var(--ivory); border-color: var(--brass); background: var(--deep); }
.event-mission b { color: var(--ivory); }
.ticket-count,
.wallet-balance { color: var(--coral); }
.event-calendar span { color: #735f55; background: #ead4ad; }
.event-calendar span.active { color: var(--ivory); background: var(--coral); }
.package.popular { color: var(--ivory); border-color: var(--brass); background: var(--deep); transform: translateY(-.22em); }
.package.popular small { color: #d9c8b6; }
.chip-stack { color: var(--ink); border-color: #b2701e; background: var(--brass); }
.replay-view { background-color: rgba(24,38,95,.9); }
.timeline { color: var(--ivory); border-color: var(--brass); background: rgba(24,38,95,.95); }
.timeline-track { background: #6370a1; }
.timeline-track i { background: var(--coral); }
.timeline-track i::after { border-color: var(--coral); background: var(--ivory); }
.support-card:nth-child(2),
.support-card:nth-child(3) { border-color: var(--coral); }
.support-footer { color: var(--ink); border-color: #d29e37; background: #f3ddb7; }
.support-footer code { color: var(--coral); }

/* Table family stays calm and readable */
.table-scene { color: var(--ivory); background: #160f1b; }
.table-scene::before { opacity: .08; }
.table-art { opacity: .8; filter: sepia(.18) saturate(1.2) contrast(1.04); }
.table-vignette { background: rgba(19, 12, 24, .22); box-shadow: inset 0 0 8em rgba(22, 10, 18, .7); }
.table-mode,
.table-voice span,
.seat,
.turn-banner {
  color: var(--ivory);
  border-color: rgba(242,184,61,.6);
  background: rgba(24,38,95,.94);
}
.table-mode b,
.seat .timer { color: var(--brass); }
.seat-meta,
.discard-zone small { color: #dbcbb8; }
.seat.turn { border-color: var(--brass); box-shadow: 0 0 0 .16em rgba(242,184,61,.28), 0 .65em 1.4em rgba(0,0,0,.28); animation: turn-pulse 1.2s ease-in-out infinite; }
.deck-stack { border-color: var(--brass); background: var(--deep); box-shadow: .42em -.32em 0 #34427b, .76em -.58em 0 #222e69; }
.meld-zone { border-color: rgba(242,184,61,.54); background: rgba(24,38,95,.45); }
.rack {
  border-color: var(--brass);
  background-color: rgba(54,31,24,.96);
  background-image: var(--textile-art);
  background-size: 24em;
  background-blend-mode: multiply;
  box-shadow: 0 -.7em 2em rgba(0,0,0,.35), inset 0 .2em .4em rgba(255,218,143,.16);
}
.tile { color: #24242b; background: var(--ivory); border-color: #b88033; }
.tile.selected { box-shadow: 0 0 0 .15em var(--brass), 0 .55em .9em rgba(0,0,0,.4); animation: tile-lift .7s ease-in-out infinite alternate; }
.turn-banner i { background: var(--brass); }
.connection-banner { color: #fff; background: var(--coral); border-color: #f19a9d; }
.bottom-sheet {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--ivory);
}
.bottom-sheet .stat-label,
.exchange-copy p { color: #725e54; }
.selected-tiles { border-color: var(--coral); background: #f0dbb8; }
.coach {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--ivory);
}
.coach-step { color: var(--coral); }
.coach p { color: #725e54; }
.tutorial-focus { border-color: var(--brass); box-shadow: 0 0 0 999px rgba(18, 11, 22, .58), 0 0 2em rgba(242,184,61,.44); }
.result-scene { background-color: rgba(24,38,95,.74); background-image: var(--courtyard-art); }
.result-hero h2 { color: var(--ink); }
.winner-ring {
  color: transparent;
  background-image: var(--host-art);
  background-size: 150%;
  background-position: 53% 22%;
  border-color: var(--coral);
  box-shadow: 0 0 0 .6em rgba(242,184,61,.36), 0 1.2em 2.5em rgba(0,0,0,.28);
  animation: winner-pop .68s cubic-bezier(.18,.9,.25,1.25) both;
}
.reward-chip { color: var(--ink); border-color: #d49b2e; background: var(--brass); }
.win { color: var(--mint); }
.loss { color: var(--coral); }

/* Interaction and focus */
button,
[data-open],
.filter-tab,
.segmented span,
.private-tab,
.list-row,
.mail-item,
.tourney-card,
.replay-item,
.hub-tab,
.settings-link,
.toggle { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
[data-open]:focus-visible,
.filter-tab:focus-visible,
.segmented span:focus-visible,
.hub-tab:focus-visible,
.settings-link:focus-visible,
.toggle:focus-visible {
  outline: .18em solid #fff;
  outline-offset: .15em;
  box-shadow: 0 0 0 .32em var(--coral);
}
.toast {
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: 1.4em;
  transform: translateX(-50%);
  padding: .65em 1em;
  border: .12em solid var(--brass);
  border-radius: .7em 1.1em .7em 1.1em;
  color: var(--ivory);
  background: var(--deep);
  box-shadow: 0 .8em 2em rgba(18,9,16,.34);
  font-size: .62em;
  animation: toast-in .25s ease both;
}

@keyframes scene-arrive {
  from { opacity: .35; transform: scale(.985) translateY(.35em); }
  to { opacity: 1; transform: none; }
}
@keyframes content-rise {
  from { opacity: 0; transform: translateY(.7em); }
  to { opacity: 1; transform: none; }
}
@keyframes textile-drift {
  from { background-position: 0 0; }
  to { background-position: 1.2em .8em; }
}
@keyframes home-reveal {
  from { transform: scale(1.02); }
  to { transform: scale(1); }
}
@keyframes cta-breathe {
  0%,100% { box-shadow: inset 0 0 0 .05em rgba(255,235,164,.15), 0 0 0 rgba(242,184,61,0); }
  50% { box-shadow: inset 0 0 0 .16em rgba(255,235,164,.7), 0 0 2.2em rgba(242,184,61,.3); }
}
@keyframes loader-weave {
  0% { width: 12%; transform: translateX(-20%); }
  55% { width: 72%; }
  100% { width: 28%; transform: translateX(320%); }
}
@keyframes progress-fill { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@keyframes medallion-breathe {
  0%,100% { box-shadow: 0 0 0 1.2em rgba(200,50,60,.12), inset 0 0 4em rgba(23,23,37,.34); }
  50% { box-shadow: 0 0 0 1.45em rgba(242,184,61,.18), inset 0 0 3em rgba(23,23,37,.18); }
}
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes turn-pulse {
  0%,100% { box-shadow: 0 0 0 .12em rgba(242,184,61,.2), 0 .65em 1.4em rgba(0,0,0,.28); }
  50% { box-shadow: 0 0 0 .28em rgba(242,184,61,.38), 0 .65em 1.4em rgba(0,0,0,.28); }
}
@keyframes tile-lift { from { transform: translateY(-.35em); } to { transform: translateY(-.62em); } }
@keyframes speaker-pulse { 50% { box-shadow: 0 0 0 .22em rgba(47,157,104,.32); } }
@keyframes winner-pop {
  0% { opacity: 0; transform: scale(.6) rotate(-8deg); }
  75% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1); }
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, .8em); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 900px) {
  .board-layout { grid-template-columns: 1fr; }
  .screen-nav { background-color: #151e4d; background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}