/* The one theme for every Prize Race page. The colours are the table's own (Palette in
   unity/Assets/PrizeRace/Ui/UiKit.cs); change them in both places. */
:root {
  color-scheme: dark;
  --bg: #0e131b;
  --felt: #162130;
  --line: #24344a;
  --panel: #1b2636;
  --raised: #243247;
  --hover: #2e405a;
  --text: #e8edf4;
  --muted: #8fa0b5;
  --dark: #10161f;
  --gold: #f4c152;
  --cyan: #4cc9f0;
  --green: #48c774;
  --act: #4cf05c;
  --red: #e5484d;
  --red-text: #ff8f93;   /* red as text on a panel: --red itself is 3.9:1 there, this is 7.0:1 */
  --orange: #f2994a;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: .01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* Header */
.topbar { display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { color: var(--gold); font-size: 20px; font-weight: 700; letter-spacing: .03em; }
.brand:hover { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand img { width: 26px; height: 26px; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: var(--muted); padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.topbar nav a:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.topbar nav a.current { color: var(--text); background: var(--raised); }
.topbar .spacer { flex: 1; }
.sitenotice { padding: 9px 20px; text-align: center; font-weight: 600; font-size: 14px; overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line); }
.sitenotice.info { background: #16303f; color: #bfeaf8; }
.sitenotice.warning { background: #40301c; color: #ffd9a8; }
/* The player at the right of the header: their name is a button that opens their own pages and Sign out. */
.who { position: relative; flex: none; color: var(--muted); }
.who img { width: 28px; height: 28px; border-radius: 50%; background: var(--raised); }
.who b { color: var(--text); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.whobtn { padding: 4px 8px 4px 4px; gap: 8px; }
.whobtn.current, .whobtn[aria-expanded="true"] { background: var(--raised); color: var(--text); }
.whobtn .caret { font-size: 12px; }
.whomenu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 200px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.whomenu a, .whomenu button, .nav-own button { color: var(--muted); padding: 9px 12px; border-radius: 8px; font-weight: 600; background: transparent;
  justify-content: flex-start; text-align: left; }
.whomenu a:hover, .whomenu button:hover, .nav-own button:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.whomenu a.current { color: var(--text); background: var(--raised); }
.whomenu .signout { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 11px; }
/* The Menu button and the player's part of the list belong to the narrow header, further down. */
.navtoggle, .nav-own { display: none; }
.navtoggle .bars { width: 16px; height: 12px; flex: none; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
  linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.navtoggle[aria-expanded="true"] { background: var(--hover); }

/* The queue indicator in the header, on every page while the player is in the quick match queue: a pill
   with the formats and the time waited; pressing it opens the details and Cancel. */
.queuepill { position: relative; flex: none; }
.queuepill > button { padding: 6px 12px; border-radius: 999px; background: rgba(244, 193, 82, .14); color: var(--gold);
  font-size: 13px; font-variant-numeric: tabular-nums; gap: 7px; max-width: 220px; }
.queuepill > button:hover { background: rgba(244, 193, 82, .22); }
.queuepill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; animation: queue-pulse 1.4s ease-in-out infinite; }
.queuepill .label { overflow: hidden; text-overflow: ellipsis; }
.queuepill .time:empty { display: none; }
.queuepill.found > button { background: var(--gold); color: var(--dark); }
.queuepill.found .dot { background: var(--dark); }
@keyframes queue-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.queuepop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(320px, calc(100vw - 24px)); padding: 14px;
  display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); color: var(--text); font-size: 14px; }
.queuepop .qp-head { display: flex; align-items: baseline; gap: 10px; }
.queuepop .qp-head .time { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.queuepop .qp-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.queuepop .qp-line b { font-weight: 600; flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queuepop .qp-line .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queuepop .qp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.queuepop .qp-foot a { margin-right: auto; }
@media (max-width: 1320px) { .queuepill .label { display: none; } .queuepill.found .label { display: inline; } }
@media (max-width: 768px) {
  .queuepill > button { padding: 6px 10px; }
  .queuepop { position: fixed; left: 12px; right: 12px; top: 62px; width: auto; }
}

/* The match-found prompt: what was found, the seconds left, Accept and Decline. */
dialog.matchfound { width: min(420px, calc(100vw - 32px)); border-color: var(--gold); }
dialog.matchfound .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; }
dialog.matchfound .facts dt { color: var(--muted); font-size: 13px; align-self: center; }
dialog.matchfound .facts dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
dialog.matchfound .countdown { display: flex; align-items: center; gap: 12px; }
dialog.matchfound .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
dialog.matchfound .bar span { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .25s linear; }
dialog.matchfound .count { width: 2ch; text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
dialog.matchfound.ending .bar span { background: var(--orange); }
dialog.matchfound.ending .count { color: var(--orange); }
dialog.matchfound p { margin: 0; }
dialog.matchfound .buttons button { flex: 1 1 0; justify-content: center; padding: 12px 16px; }

/* The prompt a challenged player answers (PR.acceptPrompt). */
dialog.acceptprompt { width: min(560px, calc(100vw - 32px)); }
dialog.acceptprompt .notes { display: flex; flex-direction: column; gap: 8px; }
dialog.acceptprompt .deckpick .rows { max-height: min(360px, 45vh); }
@media (max-width: 768px) { dialog.acceptprompt { width: calc(100vw - 16px); } }

/* Layout */
.page { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* Footer. A short page still fills the window, so the footer sits at the bottom and not under the last panel. */
main.page { min-height: calc(100vh - 56px - 82px); }
.sitefoot { min-height: 82px; padding: 16px 20px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sitefoot nav { display: flex; gap: 18px; }
.sitefoot a { color: var(--muted); font-weight: 600; }
.sitefoot a:hover { color: var(--text); }

/* Pages of plain words: About and Privacy. */
.prose { max-width: 780px; margin: 0 auto; padding: 28px 32px 30px; }
.prose h1 { font-size: 26px; margin-bottom: 4px; }
.prose h2 { margin: 26px 0 8px; }
.prose p, .prose ul { margin: 0 0 12px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose .fine { color: var(--muted); font-size: 13px; }

/* Controls */
button, .button { font: inherit; font-weight: 650; padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--raised); color: var(--text); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
button:hover, .button:hover { background: var(--hover); text-decoration: none; }
button.primary, .button.primary { background: var(--gold); color: var(--dark); }
button.primary:hover, .button.primary:hover { filter: brightness(1.08); background: var(--gold); }
button.danger { background: transparent; color: var(--red-text); border: 1px solid var(--line); }
button.danger:hover { background: rgba(229, 72, 77, .12); }
button.danger.solid { background: var(--red); color: #fff; border-color: var(--red); }
button.danger.solid:hover { filter: brightness(1.1); background: var(--red); }
button.quiet { background: transparent; color: var(--muted); padding: 6px 10px; }
button.quiet:hover { color: var(--text); background: var(--raised); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.small { padding: 5px 10px; font-size: 13px; }
button.vote { font-variant-numeric: tabular-nums; }
button.vote.on { background: rgba(244, 193, 82, .16); color: var(--gold); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* The ring stays outside a rounded tile or row, so it isn't lost against the card's own outline. */
.tile:focus-visible, .peek-card:focus-visible, .decktile .cover-art:focus-visible, .deckpick .deckrow:focus-visible, .line:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; }
.tabs button:focus-visible { outline-offset: -2px; }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--hover); border-radius: 8px; }
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; margin: 0; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--gold); }
.segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--hover); border-radius: 8px; padding: 3px; }
.segmented button { background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 6px; }
.segmented button.on { background: var(--raised); color: var(--text); }

/* Badges and messages */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--raised); color: var(--muted); }
.badge.green { background: rgba(72, 199, 116, .16); color: var(--green); }
.badge.gold { background: rgba(244, 193, 82, .16); color: var(--gold); }
.badge.red { background: rgba(229, 72, 77, .16); color: var(--red-text); }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--raised); color: var(--text); }
.notice.warn { background: rgba(242, 153, 74, .14); color: var(--orange); }
.notice.error { background: rgba(229, 72, 77, .14); color: #ff8f93; }
.notice.good { background: rgba(72, 199, 116, .14); color: var(--green); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
/* What a list shows while it has nothing to list (PR.state): loading, empty, or failed with a Retry. */
.state { padding: 36px 16px; text-align: center; color: var(--muted); grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; gap: 12px; }
.state .text { max-width: 440px; }
.state.loading .text { animation: state-pulse 1.4s ease-in-out infinite; }
.state.loading .text::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--muted); animation: state-spin .9s linear infinite; }
.state.error .text { color: #ff8f93; }
@keyframes state-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state.loading .text, .state.loading .text::before { animation: none; } }

/* Toasts: short notices that go away by themselves, stacked at the bottom right (bottom centre on a phone). */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  font-size: 14px; animation: toast-in .18s ease-out; }
.toast .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast button { flex: none; background: rgba(255, 255, 255, .1); color: inherit; }
.toast button:hover { background: rgba(255, 255, 255, .18); }
.toast.good { background: #15301f; color: var(--green); border-color: rgba(72, 199, 116, .35); }
.toast.warn { background: #40301c; color: var(--orange); border-color: rgba(242, 153, 74, .35); }
.toast.error { background: #3a1a1c; color: #ff8f93; border-color: rgba(229, 72, 77, .4); }
.toast.out { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) { .toasts { right: 50%; transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } }

/* Tables */
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; padding: 10px 16px; border-bottom: 1px solid var(--line); }
table.list td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover { background: rgba(46, 64, 90, .25); }
table.list td.actions { text-align: right; white-space: nowrap; }
table.list td.actions button { margin-left: 6px; }

/* Dialogs */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
  padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
dialog::backdrop { background: rgba(8, 13, 20, .72); }
/* A dialog taller than the window scrolls inside itself, so its buttons are always reachable. */
dialog form { padding: 22px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); overflow-y: auto; }
dialog h2 { font-size: 19px; }
dialog .buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* The list of keyboard shortcuts ("?"). */
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; text-align: center; font: 600 12px/1.4 ui-monospace, Consolas, monospace;
  color: var(--text); background: var(--bg); border: 1px solid var(--hover); box-shadow: inset 0 -2px 0 var(--line); }
table.keys { border-collapse: collapse; }
table.keys td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.keys td:first-child { white-space: nowrap; width: 1%; }
table.keys tr:last-child td { border-bottom: 0; }

/* Card art */
.cardimg { aspect-ratio: 245 / 342; border-radius: 4.2% / 3%; background: var(--raised); display: block; width: 100%; }
#preview { position: fixed; z-index: 50; width: 300px; pointer-events: none; border-radius: 13px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .7); display: none; }

/* A card's art, cropped, standing for a deck: on deck tiles, in the builder and in the deck picker. */
.cover-art { background: var(--bg) center 22% / 170% no-repeat; border-radius: 6px; }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { background: transparent; color: var(--muted); border-radius: 0; padding: 12px 14px; border-bottom: 2px solid transparent; }
.tabs button:hover { background: transparent; color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--gold); }

/* Choosing a deck: the same list wherever a deck is picked. */
.deckpick { border: 1px solid var(--hover); border-radius: 8px; background: var(--bg); overflow: hidden; }
.deckpick .tabs button { padding: 8px 12px; font-size: 13px; }
.deckpick .rows { max-height: 208px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.deckpick .deckrow { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 7px; background: transparent;
  border: 1px solid transparent; text-align: left; font-weight: 600; width: 100%; justify-content: flex-start; }
.deckpick .deckrow:hover { background: var(--raised); }
.deckpick .deckrow.on { border-color: var(--gold); background: rgba(244, 193, 82, .08); }
.deckpick .deckrow { cursor: pointer; }
.deckpick .deckrow.off { cursor: default; }
.deckpick .deckrow.off .cover-art, .deckpick .deckrow.off .name { opacity: .5; }
.deckpick .deckrow .cover-art { width: 62px; height: 40px; flex: none; }
.deckpick .deckrow .name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.deckpick .deckrow .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckpick .deckrow .desc { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; white-space: normal; }
.deckpick .deckrow .badge { flex: none; }
.deckpick .none { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; }

.deckpick .filter { margin: 6px 6px 0; width: calc(100% - 12px); padding: 6px 10px; font-size: 13px; }
.deckpick .deckrow .eye { flex: none; }

/* A button that is only an icon. */
button.icon { padding: 6px; width: 32px; height: 32px; justify-content: center; flex: none; }
button.icon svg { width: 18px; height: 18px; display: block; }
button.icon.small { width: 28px; height: 28px; padding: 5px; }

/* Energy symbols: the table's own symbol font (one letter per type) on a disc in the type's colour. */
@font-face { font-family: "ptcg"; src: url("/fonts/ptcg.ttf") format("truetype"); font-display: block; }
.en { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 50%;
  font-family: "ptcg"; font-size: 1em; font-weight: 400; line-height: 1; color: #14181f; vertical-align: middle; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.en.free { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
/* The disc colours are the table's (Symbols.ColorFor in the Unity project). The symbol is dark on every
   disc but Darkness, as it is printed on the cards; white was hard to read on the lighter colours. */
.en[data-type=Grass] { background: #4fa84a; } .en[data-type=Fire] { background: #e2533a; }
.en[data-type=Water] { background: #3a97e0; } .en[data-type=Lightning] { background: #e9b81c; }
.en[data-type=Psychic] { background: #9e55c4; } .en[data-type=Fighting] { background: #c2703a; }
.en[data-type=Darkness] { background: #3b4b57; color: #fff; } .en[data-type=Metal] { background: #8c98a6; }
.en[data-type=Colorless] { background: #c9ced6; }
.en[data-type=Dragon] { background: #a98f35; } .en[data-type=Fairy] { background: #e56ba8; }

/* A card's printed details, written out beside its picture. */
.carddetails { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.carddetails .facts { color: var(--text); }
.carddetails .facts div + div { color: var(--muted); }
.carddetails .block b { display: block; }
.carddetails .block .kind { color: var(--orange); font-weight: 650; }
.carddetails .attack-head { display: flex; align-items: center; gap: 7px; font-weight: 650; }
.carddetails .attack-head .cost { display: inline-flex; align-items: center; gap: 2px; }
.carddetails .attack-head .cost:empty { display: none; }
.carddetails .attack-head .dmg { margin-left: auto; font-variant-numeric: tabular-nums; }
.carddetails .small-facts { color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.carddetails .small-facts > div, .carddetails .small-facts .mod { display: flex; align-items: center; gap: 4px; }

/* Looking through a deck without opening it. */
dialog.peek { width: min(1180px, calc(100vw - 32px)); }
dialog.peek form { gap: 14px; }
.peek-main { display: flex; gap: 16px; min-height: 0; }
.peek-grid { flex: 1; max-height: 70vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; align-content: start; padding: 2px; }
.peek-card { position: relative; cursor: pointer; border-radius: 6px; container-type: inline-size; }
.peek-card img { display: block; width: 100%; aspect-ratio: 245 / 342; border-radius: 4.2% / 3%; background: var(--raised); }
.peek-card.on img { outline: 2px solid var(--cyan); outline-offset: 1px; }
.peek-card .n { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); width: 34cqw; height: 34cqw; border-radius: 50%;
  background: var(--gold); color: var(--dark); font-weight: 800; font-size: 21cqw; line-height: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--dark); box-shadow: 0 2px 8px rgba(0, 0, 0, .65); }
.peek-side { width: 320px; flex: none; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.peek-side img { width: 100%; aspect-ratio: 245 / 342; border-radius: 4.2% / 3%; background: var(--raised); }
.peek-side .hint { color: var(--muted); text-align: center; padding: 60px 10px; }

/* ----- Tables that turn into stacked rows on a phone or small tablet (class "stacked") ----- */
@media (max-width: 900px) {
  table.list.stacked, table.list.stacked tbody { display: block; }
  table.list.stacked thead { display: none; }
  table.list.stacked tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.list.stacked tr:last-child { border-bottom: 0; }
  table.list.stacked td { display: block; padding: 0; border: 0; }
  table.list.stacked td.grow { flex: 1; min-width: 0; }
  table.list.stacked td.actions { width: 100%; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
  table.list.stacked td.actions button { margin-left: 0; }
}

/* ----- Phones and small tablets ----- */
@media (max-width: 768px) {
  .page { padding: 14px 12px 40px; }
  .panel-head { flex-wrap: wrap; padding: 12px; }
  .panel-body { padding: 12px; }
  .prose { padding: 20px 16px 24px; }
  h1 { font-size: 20px; }
  /* Tap targets: 40px or more for anything that is pressed. */
  button, .button, .tabs button, .segmented button { min-height: 40px; }
  button.small, .button.small, button.quiet, .deckpick .tabs button { min-height: 40px; }
  button.icon, button.icon.small { width: 40px; height: 40px; }
  .chip { min-height: 36px; }
  .topbar nav a, .sitefoot a { display: inline-flex; align-items: center; min-height: 40px; }
  .sitefoot nav { flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .check input { width: 20px; height: 20px; }
  .check { min-height: 40px; }
  input[type=text], input[type=password], input[type=search], select { min-height: 40px; }
  .segmented { flex-wrap: wrap; }
  dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  dialog form { padding: 16px; max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); }
  dialog .buttons { flex-wrap: wrap; }
  dialog.peek { width: calc(100vw - 16px); }
  dialog.peek form > .row { flex-wrap: wrap; }
  dialog.peek form > .row > div { flex-basis: 160px !important; }
  .peek-main { flex-direction: column; }
  .peek-grid { max-height: 42vh; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); flex: none; }
  .peek-side { width: auto; max-height: none; }
  .peek-side img { max-width: 260px; margin: 0 auto; display: block; }
  .peek-side .hint { padding: 16px 10px; }
  .deckpick .deckrow .eye { width: 40px; height: 40px; }
  #preview { display: none !important; }
}
/* The narrow header: the links don't fit in a row, so a Menu button at the right opens them as a list
   under the header, the player's own pages and Sign out at its end. Nothing scrolls sideways. */
@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .navtoggle { display: inline-flex; order: 5; flex: none; padding: 9px 12px; }
  .who { display: none; }
  .topbar nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 8px 12px 14px;
    background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0, 0, 0, .5);
    max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; }
  .topbar.nav-open nav { display: flex; }
  .topbar nav a, .nav-own button { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font-size: 16px; }
  .nav-own { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .nav-name { padding: 4px 12px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* On a phone the mark alone stands for the brand. */
@media (max-width: 600px) {
  .brand .brand-name { display: none; }
}

/* ----- Less motion: no hover lifts, no spinning, no sliding toasts ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .decktile, .decktile:hover { transform: none; transition: none; }
  .state.loading .text, .state.loading .text::before, .toast, .toast.out { animation: none; }
  .toast.out { opacity: 0; }
}