/* static/style.css -- the hub and the table. Dark, warm, a little arcane. */

:root {
  --bg: #121318; --bg2: #1a1c23; --panel: #20232c; --line: #30343f;
  --text: #e9e6df; --muted: #9a9789; --gold: #e9c46a; --gold-d: #b8860b;
  --red: #e61607; --yellow: #db910f; --green: #06ba1e; --blue: #4083f7;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 500 16px/1.45 "Roboto Condensed", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #2a2533, transparent), var(--bg);
  min-height: 100vh;
}
a { color: var(--gold); }
h1, h2, h3 { font-family: "Quintessential", serif; font-weight: 400; margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; color: var(--gold); }
/* No italics in the UI: Roboto Condensed is set upright everywhere, and
   <em> marks emphasis by color or weight instead. */
em, i, cite { font-style: normal; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* controls */
button, .btn {
  font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1em; border-radius: 8px; border: 1px solid #5a4a2a;
  background: linear-gradient(#3a3122, #2a241a); color: var(--gold); text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(#e9c46a, #b8860b); color: #1a1408; border-color: #e9c46a; }
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.small, .btn.small { padding: .25em .7em; font-size: .85rem; }
button.picked { background: var(--gold); color: #1a1408; }
input, select {
  font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; padding: .5em .7em; min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--gold-d); border-color: transparent; }
form.inline, .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row > input { flex: 1; }
label.check { display: flex; gap: .5em; align-items: center; color: var(--muted); }

/* chrome */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25);
}
.brand { font: 1.6rem "Quintessential", serif; color: var(--text); text-decoration: none; }
.brand span { font-size: .7em; color: var(--muted); }
.topbar-links { display: flex; gap: 1.2rem; }
.topbar-links a { color: var(--muted); text-decoration: none; }
.topbar-links a:hover { color: var(--gold); }
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.panel.narrow { max-width: 480px; margin: 0 auto; }

.notice { padding: .6em .9em; border-radius: 8px; background: #2b2f3a; border-left: 3px solid var(--gold); }
.notice-warning { border-left-color: var(--yellow); }
.notice-error { border-left-color: var(--red); }

/* sign-in (signin_form.du markup, from arland) */
.signin, .interstitial { max-width: 440px; margin: 3rem auto; text-align: center; }
.signin-head .tagline { color: var(--muted); }
.provider-list { display: grid; gap: .6rem; margin: 1.5rem 0; }
.provider-btn { display: flex; gap: .7em; align-items: center; justify-content: center; padding: .7em; border-radius: 8px;
  background: #f3f1ec; color: #222; text-decoration: none; font-weight: 700; }
.provider-mark { width: 20px; height: 20px; }
.magic-form { text-align: left; display: grid; gap: .5rem; margin-top: 1rem; }
.magic-field { display: flex; gap: .5rem; } .magic-field input { flex: 1; }
.hp-field { display: none; }
.signin-note { color: var(--muted); font-size: .9rem; }
.signin form.stack, .magic-confirm { display: grid; gap: .8rem; }

/* dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; }
.side { display: grid; gap: 1.2rem; align-content: start; }
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; } }
.create-lobby { display: grid; gap: .6rem; margin: 1.2rem 0; padding: 1rem; border-radius: 8px; background: var(--bg2); }
.create-lobby .row input { flex: 1; }
.match { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.match > span:first-child { margin-right: .4rem; color: var(--muted); }
.match.searching { gap: .8rem; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gold); border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lobby-list, .friend-list, .seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lobby-row { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center;
  padding: .55rem .7rem; border-radius: 8px; background: var(--bg2); }
.lobby-row .muted { font-size: .85rem; margin-left: .4em; }
.pill { font-size: .78rem; padding: .15em .6em; border-radius: 99px; background: #2c303b; color: var(--muted); white-space: nowrap; }
.pill.playing { background: #3b2a1a; color: var(--yellow); }
.pill.ready { background: #183222; color: #6ee38a; }
.friend { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #262a33; }
.friend > span:last-child { display: flex; gap: .3rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #555; margin-right: .5em; vertical-align: middle; }
.dot.on { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.role { font-style: normal; font-size: .75rem; color: var(--muted); margin-left: .3em; text-transform: uppercase; letter-spacing: .05em; }
.role.owner { color: var(--gold); }
#friends form, #guild form { margin: .6rem 0; }
table { width: 100%; border-collapse: collapse; } td, th { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }

.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 60; }
.toast { background: var(--panel); border: 1px solid var(--gold-d); border-radius: 8px; padding: .8rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------- the table */

/* The game page is the window: the top bar, then the table taking exactly
   what's left — no guessing the bar's height, so nothing ever scrolls. */
body.wide { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.wide .table-main { padding: 0; flex: 1; min-height: 0; display: flex; }
/* The table is exactly the window below the top bar. Nothing in it may
   make the page taller: the table scrolls inside itself if it must, and
   the log and chat each scroll inside their half of the side panel. */
#game { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 980px) {
  #game { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40dvh; }
  .table-side { border-left: 0; border-top: 1px solid var(--line); }
}
.table-area { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; overflow-y: auto;
  background: radial-gradient(900px 500px at 50% 45%, #22351f, #141a14 70%); }
.lobby-room .table-area { background: none; }
.table-side { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg2); }
.table-side .panel { border: 0; border-radius: 0; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; background: transparent; }
.table-side .scroller { list-style: none; padding: 0 .2rem 0 0; margin: 0; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: .92rem; }
.table-side li { padding: .15rem 0; }

/* The feed: people bright, the table talking in grey. */
.feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.feed-head h3 { margin: 0; }
.chips { display: flex; gap: .3rem; }
.chip { font-size: .78rem; padding: .15em .7em; border-radius: 99px; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.chip[aria-pressed="true"] { background: #2e2a20; border-color: var(--gold-d); color: var(--gold); }
.feed li.game { color: #7d7a70; font-size: .86rem; }
.feed li.game.turn-line { color: #a29d8e; margin-top: .5rem; }
.feed li.game.sys { color: #8f8a7b; }
.feed li.chat b { color: var(--gold); }
.feed ol.hide-chat li.chat, .feed ol.hide-game li.game { display: none; }
.feed form { margin-top: .5rem; } .feed input { width: 100%; }

.lobby-panel { max-width: 640px; margin: 2rem auto; width: 100%; }
.seat-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--bg2); border-radius: 8px; }
.seat-row .seat-name { flex: 1; }
.seat-row.empty { color: var(--muted); border: 1px dashed var(--line); background: none; }
.lobby-controls { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.share { margin: 1rem 0; } .share label { color: var(--muted); font-size: .85rem; }
.banner { padding: .7rem 1rem; border-radius: 8px; text-align: center; font: 1.3rem "Quintessential", serif; }
.banner.win { background: linear-gradient(90deg, transparent, rgba(233,196,106,.18), transparent); color: var(--gold); }

.seat { position: relative; display: flex; gap: .7rem; align-items: flex-start; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: .6rem .7rem;
  transition: box-shadow .15s, border-color .15s; }
.seat-body { min-width: 0; flex: 1; display: grid; gap: .25rem; }
.avatar { flex: none; width: clamp(40px, 7vh, 64px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font: 700 clamp(.9rem, 2.2vh, 1.3rem) "Quintessential", serif; color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 55% 55%), hsl(var(--hue) 45% 25%));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 4px 10px rgba(0,0,0,.4); }
.seat.active { border-color: var(--gold); box-shadow: 0 0 18px rgba(233,196,106,.25); }
.seat.thinking .seat-name::after { content: " …"; color: var(--gold); }
.seat.defeated { opacity: .5; }
.seat.selectable { cursor: pointer; box-shadow: 0 0 0 2px #e9c46a, 0 0 18px rgba(233,196,106,.5); }
.seat.picked { box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255,255,255,.6); }
.seat-name { font-weight: 700; }
/* The 12 pips share the seat's width, so the track can never run off the
   edge; a slightly wider gap marks each tier. */
.hp { display: flex; align-items: center; gap: 2px; width: 100%; max-width: 168px; }
.pip { flex: 1 1 0; min-width: 2px; height: 12px; border-radius: 2px; opacity: .22; }
.pip.on { opacity: 1; }
.pip.t1 { background: var(--red); } .pip.t2 { background: var(--yellow); } .pip.t3 { background: var(--green); }
.pip:nth-of-type(5), .pip:nth-of-type(9) { margin-left: 3px; }
.affects { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; min-height: 1px; }
.affect { font-size: .75rem; padding: .1em .5em; border-radius: 99px; background: #2c303b; cursor: help; }
.affect-banish { background: #3a1f4d; } .affect-defend { background: #1d3d27; }
.affect-daze { background: #403818; } .affect-expose { background: #1e3346; }
.mini-hand { display: flex; margin-top: .4rem; min-height: 32px; }
.mini-hand .card-xs + .card-xs { margin-left: -12px; }
.mini-hand.revealed { gap: 3px; flex-wrap: wrap; }

.middle { display: flex; gap: 2rem; align-items: center; justify-content: center; flex: 1; min-height: 150px; }
.piles { display: flex; gap: .8rem; }
.pile-count { position: absolute; bottom: -8px; right: -8px; background: #000; color: var(--gold); font-size: .8rem;
  padding: 0 .45em; border-radius: 99px; border: 1px solid var(--gold-d); z-index: 2; }
.plays { display: flex; gap: 1rem; flex-wrap: wrap; }
.play { display: grid; justify-items: center; gap: .3rem; }
.play.inactive { opacity: .55; filter: saturate(.6); }
.play-stack { display: flex; } .play-stack .card + .card { margin-left: -36px; transform: translateY(10px); }
.play-cap { font-size: .8rem; color: var(--muted); }

/* The prompt slot never changes height. Its bar is anchored to the slot's
   bottom and grows upward over the stage when it needs room — the compose
   panel, card backs to pick from — floating instead of pushing. */
.prompt-slot { position: relative; height: 3.4rem; z-index: 8; }
.prompt-slot > .prompt-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.prompt-bar { position: relative; min-height: 3.2rem; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: .6rem 1rem; border-radius: var(--radius); }
.prompt-bar.asking { background: #24231f; border: 1px solid var(--gold-d); box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
.prompt-text strong { color: var(--gold); margin-right: .4em; }
.prompt-actions, .prompt-cards { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pick-card { cursor: pointer; } .pick-card.picked .card { box-shadow: 0 0 0 3px #fff; }
.waiting { color: var(--muted); }

/* The hand. A hovered card grows by animating its width — not a scale —
   so the flex row reflows and its neighbours slide aside, animated by the
   same transition. Everything on a face is sized in cqw, so the whole card
   grows with it.

   The row is exactly as tall as a resting card, and a hovered card grows
   up out of it — over the prompt bar, only while it's hovered — so the
   bigger hover costs the table no space. Cards sit on the row's bottom, so
   nothing else moves vertically. */
.hand { --card-w: 128px; --card-hover-w: 200px;
  display: flex; gap: 1.1rem; justify-content: center; flex-wrap: nowrap; align-items: end;
  padding: 0 1rem 1rem; box-sizing: content-box; overflow: visible; position: relative; z-index: 9;
  height: calc(var(--card-w) * 638 / 415); flex: none; }
.hand .card { --w: var(--card-w); transition: width .18s ease, box-shadow .18s ease; }
.hand .card:hover, .hand .card.tip-open { --w: var(--card-hover-w); z-index: 6; }
@media (prefers-reduced-motion: reduce) { .hand .card { transition: none; } }

.float { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: 700 1.4rem "Roboto Condensed";
  animation: floatup 1.4s ease-out forwards; pointer-events: none; }
.float.hurt { color: #ff6b5b; } .float.heal { color: #6ee38a; } .float.blocked { color: #8ab4ff; font-size: 1.1rem; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -40px); } }

/* ---------------------------------------------------------------- piles */

.discard-pile { cursor: pointer; }
.discard-pile:hover { box-shadow: 0 0 0 2px var(--gold-d); }
.pile-tip { position: fixed; z-index: 45; display: grid; gap: 2px; width: 260px; padding: 4px;
  background: #1b1d24; border: 1px solid #4a4030; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .12s; }
.pile-tip.show { opacity: 1; pointer-events: auto; }
.pile-line { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px;
  color: var(--text); padding: .45rem .6rem; font-weight: 500; }
.pile-line:hover { background: #2a2d36; }
.pile-line b { color: var(--gold); margin-right: .2em; }
.pile-line span { display: block; color: var(--muted); font-size: .85rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 1rem; }
.modal-backdrop.show { display: flex; }
.modal { background: var(--panel); border: 1px solid #4a4030; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
  width: min(960px, 100%); max-height: 90dvh; display: flex; flex-direction: column; padding: 1rem; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tabs { display: flex; gap: .3rem; }
.tab { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tab.on { background: #2e2a20; border-color: var(--gold-d); color: var(--gold); }
.pile-summary { margin: .6rem 0; }
/* Laid out like a hand: one scrolling row, cards grow on hover. */
.pile-grid { --card-w: 128px; --card-hover-w: 168px; display: flex; gap: 1.1rem; align-items: end;
  overflow-x: auto; overflow-y: hidden; padding: .5rem .5rem 1rem; box-sizing: content-box;
  height: calc(var(--card-hover-w) * 638 / 415); }
.pile-grid .card { --w: var(--card-w); transition: width .18s ease, box-shadow .18s ease; }
.pile-grid .card:hover, .pile-grid .card.tip-open { --w: var(--card-hover-w); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .pile-grid .card { transition: none; } }

/* ---------------------------------------------------------------- table layout */

/* The game screen is exactly the window: stage, prompt, hand. Card sizes
   follow the window's height (clamped), so a short window gets smaller
   cards instead of a scrollbar. */
.table-area[data-mode="table"] {
  --card-w: clamp(84px, 13.5vh, 128px); --card-hover-w: clamp(124px, 21vh, 200px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: .5rem; overflow: hidden; padding: .8rem 1rem .4rem;
}
/* The battle line: you on the left, the opponents side by side on the
   right. Seats stand on a common floor (align end). */
.stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: end; min-height: 0; }
.side-me, .side-them { display: flex; gap: .8rem; align-items: flex-end; min-width: 0; }
.side-them { justify-content: flex-end; overflow-x: auto; }

/* The piles and this turn's plays: one row, right above your hand. */
.table-area[data-mode="table"] .middle { display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 1.5rem; min-height: 0; flex: none; padding: .2rem 0; }
.table-area[data-mode="table"] .plays { flex-wrap: nowrap; overflow-x: auto; }

/* A seat stands up: avatar on top, then name, HP, hand, statuses. */
.stage .seat { flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  width: clamp(130px, 19vh, 190px); padding: .6rem .5rem; }
.stage .seat .avatar { width: clamp(56px, 11vh, 104px); font-size: clamp(1rem, 3vh, 1.8rem); }
.stage .seat-body { justify-items: center; width: 100%; }
.stage .hp { justify-self: center; }
.stage .affects, .stage .mini-hand { justify-content: center; }
.side-me .seat { border-color: rgba(233,196,106,.25); }

/* Where your turn falls among the opponents' (3+ players). */
.turn-gap { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 1.8rem; color: var(--gold-d); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.turn-gap::before, .turn-gap::after { content: ""; flex: 1; border-left: 1px dashed rgba(233,196,106,.4); }
.table-area[data-mode="table"] .hand { --card-w: inherit; --card-hover-w: inherit; }
.hand[hidden] { display: none; }
/* Your hand's row: a usable Stash (and what it holds) on the left, set
   off by a rule, then the hand. One row, as tall as the hand. */
.hand-row { display: flex; justify-content: center; align-items: end; min-width: 0; position: relative; z-index: 9; }
.hand-row .hand { min-width: 0; }
.usable-row { display: flex; gap: 1rem; align-items: end; flex: none;
  padding: 0 1.4rem 1rem 0; margin-right: .4rem; border-right: 1px solid rgba(233,196,106,.2); }
.usable-row[hidden] { display: none; }
.usable { display: flex; align-items: flex-end; gap: .5rem; }
.usable .card { --w: var(--card-w, 128px); cursor: pointer; }
.usable-held { display: flex; align-items: flex-end; opacity: .9; }
.usable-held .card { --w: calc(var(--card-w, 128px) * .5); }
.usable-held .card + .card { margin-left: calc(var(--card-w, 128px) * -.32); }


/* Tall windows: the line becomes a column — you at the bottom, turn order
   reading upward. Seats lie on their side (avatar left) to save height. */
.table-area.tall .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch; }
.table-area.tall .side-them { grid-column: 1; grid-row: 1; flex-direction: column-reverse; justify-content: flex-start;
  align-items: stretch; overflow-x: hidden; overflow-y: auto; }
.table-area.tall .side-me { grid-column: 1; grid-row: 2; }
.table-area.tall .stage .seat { flex-direction: row; align-items: center; text-align: left; width: 100%; max-width: 420px; }
.table-area.tall .stage .seat .avatar { width: clamp(44px, 9vw, 72px); font-size: clamp(.9rem, 2.4vw, 1.4rem); }
.table-area.tall .stage .seat-body { justify-items: start; }
.table-area.tall .stage .hp { justify-self: start; }
.table-area.tall .stage .affects, .table-area.tall .stage .mini-hand { justify-content: flex-start; }

/* A seat's stats line: HP, then cards in hand. */
.seat-stats { display: flex; gap: .9rem; align-items: center; }
.stat { display: inline-flex; align-items: center; gap: .25rem; color: var(--text); font-size: .95rem; }
.stat b { font-weight: 700; }
.hp-stat .ic { width: 16px; height: 16px; color: #e05a4f; }
.hand-count .hand-icon { width: 16px; height: 18px; color: #d9cfae; }
/* The cards icon lies on its side, turned a quarter clockwise. */
.hand-count > .ic { transform: rotate(90deg); }
.hand-count.revealed { color: #8ab4ff; cursor: help; }
.hand-count.revealed .hand-icon { color: #8ab4ff; }
.hand-count .eye { font-size: .8rem; }
.stage .seat-stats { justify-content: center; }
.table-area.tall .stage .seat-stats { justify-content: flex-start; }
.pile-line.static { cursor: default; }
.pile-line.static:hover { background: transparent; }

/* Steal: pick a face-down card, watch it turn over, see it fly to your hand. */
.blind-slot { cursor: pointer; transition: transform .15s; }
.blind-slot:hover { transform: translateY(-6px); }
.blind-slot .card { --w: clamp(72px, 11vh, 112px); }
.flyer { position: fixed; z-index: 70; pointer-events: none; perspective: 900px; aspect-ratio: 415 / 638; }
.flyer.moving { transition: left .45s cubic-bezier(.3,.7,.2,1), top .45s cubic-bezier(.3,.7,.2,1), width .45s ease; }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.flyer.turned .flip { transform: rotateY(180deg); }
.flip .card { position: absolute; inset: 0; --w: 100%; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .flip-face { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .flip, .flyer.moving { transition: none; } }

/* ---------------------------------------------------------------- icons */
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex: none; }
.hand-count .ic { width: 18px; height: 18px; color: #d9cfae; }
.hand-count.revealed .ic { color: #8ab4ff; }
.hand-count .eye .ic { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- the end */
.result { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(10,10,14,.55), rgba(5,5,8,.85)); animation: dimIn .35s ease; }
.result-card { text-align: center; animation: riseIn .6s cubic-bezier(.2,.9,.25,1.2); }
.result-icon .ic { width: clamp(56px, 10vh, 96px); height: auto; }
.result-title { font: clamp(3.2rem, 12vh, 7rem)/1 "Quintessential", serif; margin: .2em 0 .1em; letter-spacing: .03em;
  text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.result-sub { color: #cfc8b4; font-size: 1.1rem; margin: 0 0 1.6rem; }
.result-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.result.victory .result-title, .result.victory .result-icon { color: #f2cf6b; }
.result.victory .result-title { text-shadow: 0 0 40px rgba(242,207,107,.45), 0 6px 30px rgba(0,0,0,.6); }
.result.defeat .result-title, .result.defeat .result-icon { color: #e05a4f; }
.result.neutral .result-title, .result.neutral .result-icon { color: var(--text); }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: scale(.7) translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .result, .result-card { animation: none; } }

/* ---------------------------------------------------------------- chat drawer */
#game { transition: grid-template-columns .25s ease; }
#game.drawer-closed { grid-template-columns: minmax(0, 1fr) 0; }
#game.drawer-closed .table-side { visibility: hidden; border: 0; }
/* One toggle, always in the same spot at the right end of the top bar.
   The icon is mirrored so its panel line sits on the right, like the
   drawer it opens. Pressed while the drawer is open. */
.drawer-toggle { position: fixed; right: 12px; top: 10px; z-index: 30; padding: .45rem; border-radius: 8px;
  background: transparent; border: 1px solid var(--line); color: var(--muted); }
.drawer-toggle .ic { width: 22px; height: 22px; transform: scaleX(-1); }
.drawer-toggle[aria-pressed="true"] { background: #2e2a20; border-color: var(--gold-d); color: var(--gold); }
.drawer-toggle .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: #d9443b; color: #fff; font: 700 .75rem/20px "Roboto Condensed", sans-serif; text-align: center; }
@media (max-width: 980px) {
  #game.drawer-closed { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 0; }
}

/* The turn clock: the last ten seconds, burning down under the prompt bar. */
.turn-clock { position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px;
  transform-origin: left center; transform: scaleX(1); opacity: 0; pointer-events: none;
  background: color-mix(in srgb, #e9c46a calc((1 - var(--heat, 0)) * 100%), #e0402f);
  box-shadow: 0 0 10px color-mix(in srgb, #e9c46a calc((1 - var(--heat, 0)) * 100%), #e0402f); }
.turn-clock.on { opacity: 1; }

/* Pause */
.stage { position: relative; }
.host-tools { position: absolute; top: 0; left: 0; z-index: 3; }
.host-tools .ic { width: 16px; height: 16px; }
.result.paused .result-title, .result.paused .result-icon { color: #9fb7d9; }
.result-actions .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- composing */

/* The targeting arrow: chevrons flowing toward the head. */
.arrow-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 65; }
.arrow .seg, .arrow .head { fill: #f2cf6b; stroke: #7a5a12; stroke-width: 1.2; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(242,207,107,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.arrow.aim .seg, .arrow.aim .head { fill: #e6dcbc; stroke: #6d6450; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.arrow.bad .seg { fill: #e0402f; stroke: #6e1a12; filter: drop-shadow(0 0 5px rgba(224,64,47,.6)); }
.arrow .ring { fill: rgba(30,10,8,.85); stroke: #e0402f; stroke-width: 3; }
.arrow .x { stroke: #ff6b5b; stroke-width: 4; stroke-linecap: round; }
.arrow .why { fill: #fff; font: 700 14px "Roboto Condensed", sans-serif; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.composing .seat.aim-blocked { box-shadow: 0 0 0 2px rgba(224,64,47,.55); }

/* While aiming, who can be targeted glows; the one under the pointer more. */
.composing .seat.aim-valid { box-shadow: 0 0 0 2px rgba(242,207,107,.6), 0 0 16px rgba(242,207,107,.35); cursor: crosshair; }
.composing .seat.aim-hover { box-shadow: 0 0 0 3px #f2cf6b, 0 0 26px rgba(242,207,107,.7); }
.composing, .composing * { cursor: crosshair; }

/* The card being composed leaves the hand for the staging spot. */
.hand .card.away { display: none; }
.compose-bar { justify-content: space-between; gap: 1.2rem; left: 50% !important; right: auto !important;
  transform: translateX(-50%); width: min(820px, 100%); padding: .7rem 1rem; }
.staged { display: flex; align-items: flex-end; gap: .3rem; }
.staged .staged-card { --w: clamp(84px, 12vh, 118px); box-shadow: 0 0 0 2px #f2cf6b, 0 0 24px rgba(242,207,107,.5); }
.staged-mods { display: flex; gap: 4px; }
.staged-mods .card { --w: clamp(48px, 7vh, 64px); cursor: pointer; }
.staged-mods .card:hover { box-shadow: 0 0 0 2px #e0402f; }
.compose-text { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.compose-text strong { color: var(--gold); margin-right: .3em; }
.mode-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.mode-chips .chip[aria-pressed="true"] { background: #2e2a20; border-color: var(--gold-d); color: var(--gold); }
.hand .card { touch-action: none; }

/* "End action phase" sits apart at the far end of the prompt bar. */
.prompt-bar .end-phase { margin-left: auto; }
.prompt-bar.asking:has(.end-phase) { justify-content: flex-start; }

/* ---- the deck builder (routes/decks.du, static/decks.js)
   The whole window: a bar with the deck's name and what you can do with
   it, the card pool filling the left, the deck itself down the right. */
.builder { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.builder button .ic { margin-right: .35em; }
.builder .icon-btn .ic, .builder .stepper .ic, .builder .pool-minus .ic { margin: 0; }

.builder-bar { display: flex; align-items: center; gap: .9rem; padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line); background: var(--bg2); }
.menu-btn .ic:last-child { margin: 0 0 0 .3em; opacity: .6; }
.deck-name { flex: 0 1 22rem; min-width: 8rem; background: transparent; border: 1px solid transparent;
  font: 1.45rem "Quintessential", serif; color: var(--text); padding: .15em .35em; border-radius: 6px;
  transition: border-color .15s, background .15s; }
.deck-name:hover { border-color: var(--line); }
.deck-name:focus { outline: none; border-color: var(--gold-d); background: var(--bg); }
.deck-count { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.deck-state { font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1; transition: color .2s; }
.deck-state.ok { color: #6ee38a; }
.deck-state.error { color: #ff8a7a; white-space: normal; }
.builder-actions { display: flex; gap: .5rem; margin-left: auto; flex: none; }

.builder-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }

.pool { display: flex; flex-direction: column; min-height: 0; }
.pool-filters { display: flex; gap: 1rem; align-items: center; padding: .8rem 1.2rem; }
.pool-filters .chips { flex: 1; flex-wrap: wrap; }
.pool-filters .chip { cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.pool-filters .chip:hover { color: var(--text); }
.pool-filters input[type=search] { width: 13rem; }
.pool-grid { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem 1.2rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 1.1rem .8rem;
  align-content: start; justify-items: center; }
.pool-none { grid-column: 1 / -1; color: var(--muted); }
.pool-card { position: relative; cursor: pointer; padding: 6px; border-radius: 12px;
  transition: background .15s; }
.pool-card .card { transition: transform .12s ease, box-shadow .15s, opacity .15s; }
.pool-card:hover .card { transform: translateY(-3px); }
.pool-card:active .card { transform: translateY(-1px) scale(.98); }
.pool-card.in-deck { background: rgba(233,196,106,.09); }
.pool-card.in-deck .card { box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.5); }
.pool-card.unplayable .card { opacity: .5; }
.pool-count { position: absolute; top: -2px; right: -2px; min-width: 1.9em; padding: .1em .45em; border-radius: 99px;
  background: var(--gold); color: #1a1408; font-weight: 700; font-size: .85rem; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; font-variant-numeric: tabular-nums; }
.pool-count:empty { display: none; }
.pool-count.bump { animation: bump .22s ease; }
@keyframes bump { 40% { transform: scale(1.25); } }
.pool-minus { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 40%); padding: .2em .45em; border-radius: 99px;
  background: var(--panel); line-height: 1; opacity: 0; pointer-events: none; transition: opacity .12s; }
.pool-card.in-deck:hover .pool-minus { opacity: 1; pointer-events: auto; }
.pool-note { display: block; text-align: center; font-size: .75rem; color: var(--muted); margin-top: .3rem; }

.deck-side { border-left: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; padding: .6rem 0 1rem; }
.deck-empty { margin: auto; text-align: center; padding: 2rem; }
.deck-empty p { margin: .3rem 0; }
.deck-cards { list-style: none; margin: 0; padding: 0; }
.deck-group { display: flex; justify-content: space-between; padding: .9rem 1.1rem .3rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.deck-row { display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem .3rem 1.1rem; transition: background .12s; }
.deck-row:hover { background: rgba(255,255,255,.04); }
.deck-row.unplayable .deck-row-name { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--fill); flex: none; }
.deck-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: .15rem; }
.stepper b { min-width: 1.8em; text-align: center; font-variant-numeric: tabular-nums; }
.stepper button { padding: .25em; line-height: 1; background: transparent; border-color: transparent; color: var(--muted);
  opacity: 0; transition: opacity .12s, color .12s; }
.deck-row:hover .stepper button, .stepper button:focus-visible { opacity: 1; }
.stepper button:hover { color: var(--gold); border-color: transparent; }
.deck-foot { padding: 0 1.1rem; font-size: .85rem; color: var(--yellow); }
.deck-foot p { margin: 1rem 0 0; }

/* Popovers: the Decks menu, Save as, Share, Host. Opened by the browser's
   popover API and placed under their button by decks.js. */
.pop { margin: 0; inset: auto; width: 20rem; max-height: min(70vh, 34rem); overflow-y: auto;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, overlay .14s allow-discrete, display .14s allow-discrete; }
.pop:popover-open { opacity: 1; transform: none; }
@starting-style { .pop:popover-open { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pop { transition: none; } }
.pop h4 { margin: 1rem 0 .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.pop-form { display: grid; gap: .6rem; }
.pop-form label:not(.check) { font-size: .85rem; color: var(--muted); }
.pop-form .notice { margin: 0; font-size: .9rem; }
.pop-note { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.menu-pop { width: 18rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-row { display: flex; align-items: center; border-radius: 6px; transition: background .12s; }
.menu-row:hover { background: rgba(255,255,255,.05); }
.menu-row.current .menu-item { color: var(--gold); }
.menu-item { flex: 1; display: flex; justify-content: space-between; gap: .6rem; align-items: center; text-align: left;
  background: transparent; border: 0; padding: .45rem .6rem; color: var(--text); border-radius: 6px; }
.menu-item:hover { border: 0; }
.menu-item.new-deck { justify-content: flex-start; width: 100%; color: var(--gold); }
.menu-item.new-deck:hover { background: rgba(255,255,255,.05); }
.menu-meta { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.menu-empty { color: var(--muted); font-size: .9rem; margin: .2rem .6rem; }
.icon-btn { background: transparent; border-color: transparent; color: var(--muted); padding: .35em .45em; line-height: 1; }
.icon-btn:hover { color: var(--text); border-color: transparent; }
.menu-row .icon-btn { opacity: 0; transition: opacity .12s, color .12s; }
.menu-row:hover .icon-btn, .menu-row .icon-btn:focus-visible { opacity: 1; }
.menu-row .icon-btn:hover { color: #ff8a7a; }
.icon-btn.copied { color: #6ee38a; }
.paste-form { display: grid; gap: .5rem; }
.paste-form textarea { width: 100%; resize: vertical; font: .85rem ui-monospace, monospace; background: var(--bg);
  color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: .5em .6em; }
.paste-form button { justify-self: end; }
.copy-field { display: flex; gap: .3rem; }
.copy-field input { flex: 1; min-width: 0; font: .85rem ui-monospace, monospace; }

.lobby-deck { display: flex; align-items: center; gap: .4em; color: var(--muted); margin: -.3rem 0 .6rem; }
.lobby-deck .ic { width: 1.1em; height: 1.1em; fill: currentColor; }

@media (max-width: 860px) {
  .builder-bar { flex-wrap: wrap; }
  .builder-actions { margin-left: 0; width: 100%; }
  .builder-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40%; }
  .deck-side { border-left: 0; border-top: 1px solid var(--line); }
}