/* Settli's table: a sea-blue ground with the island drawn on it, warm cream cards, and the
   motion that makes a hand feel held — Skami's sibling, out at sea. One size variable, --u (the
   width of a card in your hand), is set from the window by main.js; every context sizes its own
   cards as --cw, a share of it. */

:root {
  --sea: #17506b;
  --sea-hi: #2a7aa0;
  --sea-lo: #0a2a3b;
  --panel: #0b2c3dd9;
  --panel-solid: #0e3346;
  --line: #ffffff22;
  --ink: #fdf6e3;
  --corgi: #f08a24;
  --cream: #fff6e6;
  --gold: #ffd166;
  --go: #7cf29a;
  --doom: #e05a4f;
  --sky: #6fb1e8;
  --u: 72px;
  --cw: var(--u);
  --round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  /* each resource's colour, for its card's frame and its chip */
  --r-stick: #4f8a3c;
  --r-mud: #b8613a;
  --r-fluff: #86b94c;
  --r-kibble: #dba631;
  --r-bone: #8a8fa6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Height is 100% down from html, never 100vh: on an iPhone's home screen 100vh is not the screen,
   and the gap it leaves is the well-known one at the top or bottom of an installed app. */
html, body { margin: 0; height: 100%; overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--sea-lo);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
#app { height: 100%; }
kbd { font: 600 10px system-ui; margin-left: 6px; opacity: .6; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ——— the sea, under the board and the screens before it ——— */
.game, .screen {
  background:
    repeating-radial-gradient(ellipse 60px 24px at 20% 30%, #ffffff05 0 2px, transparent 2px 9px),
    radial-gradient(ellipse 90% 80% at 50% 40%, var(--sea-hi), var(--sea) 55%, var(--sea-lo));
}

/* ——— a card ———
   A resource card is its painting edge to edge under a name ribbon. A trick card is Skami's:
   the picture in a window, the name across its foot, the kind, and the words, sized to be read
   at preview size, as in Hearthstone. */
.card {
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .09);
  overflow: hidden;
  font-family: var(--round);
}
.card-art { position: absolute; overflow: hidden; background: #fbf4e6; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card-art .glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .42); line-height: 1; }
.card-name {
  position: absolute; left: 6%; right: 6%;
  padding: .14em .2em .12em;
  border-radius: calc(var(--cw) * .045);
  color: #fff;
  font-weight: 900;
  font-size: calc(var(--cw) * .14);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px #0007;
  box-shadow: 0 calc(var(--cw) * .012) calc(var(--cw) * .03) #0005;
}
.card.res { background: #fbf4e6; box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--res), inset 0 0 0 calc(var(--cw) * .066) #fffc, 0 3px 8px #0007; }
.card.res .card-art { inset: calc(var(--cw) * .066); border-radius: calc(var(--cw) * .05); }
.card.res .card-art img { object-position: 50% 40%; }
.card.res .card-name { bottom: 6%; background: linear-gradient(color-mix(in srgb, var(--res) 80%, #fff), var(--res)); }
.r-stick { --res: var(--r-stick); }
.r-mud { --res: var(--r-mud); }
.r-fluff { --res: var(--r-fluff); }
.r-kibble { --res: var(--r-kibble); }
.r-bone { --res: var(--r-bone); }
.card.trick {
  --fam: #c0503a;
  background: linear-gradient(172deg, color-mix(in srgb, var(--fam) 14%, #fffaf0), color-mix(in srgb, var(--fam) 30%, #f3e5ca));
  box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--fam), inset 0 0 0 calc(var(--cw) * .064) #fffb, 0 3px 8px #0007;
  color: #34241a;
}
.card.trick .card-art { top: 5%; left: 7%; right: 7%; height: 47%; border-radius: calc(var(--cw) * .06) calc(var(--cw) * .06) calc(var(--cw) * .025) calc(var(--cw) * .025); box-shadow: inset 0 0 0 1px #0002; }
.card.trick .card-name { top: 47%; background: linear-gradient(color-mix(in srgb, var(--fam) 85%, #fff), var(--fam)); }
.card-fam { position: absolute; top: 61%; left: 0; right: 0; font-size: calc(var(--cw) * .06); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--fam) 60%, #000); }
.card-text {
  position: absolute; top: 67%; left: 8%; right: 8%; bottom: 5%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font: 650 calc(var(--cw) * .085)/1.15 system-ui, -apple-system, sans-serif;
  text-align: center;
  text-wrap: balance;
}
/* each family its own colour: as specific as .card.trick, and after it, so the family wins */
.card.k-herdi { --fam: #c0503a; }
.card.k-diggi { --fam: #8a5a3c; }
.card.k-fetchi { --fam: #3b7dd8; }
.card.k-greedi { --fam: #8e44ad; }
.card.k-trophi { --fam: #c9971a; }
.card.back {
  display: grid; place-items: center;
  background: url(/art/back.jpg) 50% 50% / cover, repeating-linear-gradient(45deg, #2a7aa0 0 calc(var(--cw) * .07), #23688a calc(var(--cw) * .07) calc(var(--cw) * .14));
  box-shadow: inset 0 0 0 calc(var(--cw) * .045) var(--cream), inset 0 0 0 calc(var(--cw) * .065) #1b5a78, 0 3px 8px #0007;
}
.back-mark { display: none; }
/* a card too small to read keeps its picture and loses its words */
.chip-card .card-name, .bank-res .card-name, .cost-cards .card-name, .build-icon .card-name { display: none; }

/* ——— the board ———
   The safe area — the notch and status bar above, the home indicator below, the sides of a phone
   turned on its side — is padded ONCE, here and on .screen. */
.game {
  --side: clamp(250px, 23vw, 330px);
  position: relative;
  height: 100%;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "stage dogs" "stage log" "bar log";
  overflow: hidden;
  overflow: clip; /* nothing, not even a focused field in a drawer sliding in, scrolls the table */
}
.topbar { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; z-index: 6; }
.brand { font: 900 21px var(--round); color: var(--corgi); text-shadow: 0 2px 0 #0006; margin-right: 4px; text-decoration: none; }
a.brand:hover { color: var(--gold); }
.code, .icon {
  height: 30px; padding: 0 12px;
  border: 1px solid #ffffff30; border-radius: 999px;
  background: #00000040;
  font-size: 13px;
}
.code:hover, .icon:hover { background: #00000066; }
.with-badge { position: relative; }
.with-badge .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--doom); color: #fff; font: 800 11px/16px var(--round); text-align: center; box-shadow: 0 2px 6px #0007; }
.badge:empty { display: none; }
.spacer { flex: 1; }
/* what wins at this table: the points to play to, beside the table's code */
.goal { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 0 2px; font: 800 13px var(--round); color: var(--cream); white-space: nowrap; opacity: .9; }
.goal b { color: var(--gold); font-weight: 900; font-size: 15px; }
.goal-sub { display: none; font-size: 9.5px; font-weight: 700; opacity: .75; }
.clock { padding: 4px 11px; border-radius: 999px; background: #00000048; font: 900 14px var(--round); color: var(--cream); white-space: nowrap; }
.clock:empty { display: none; }
.clock.low { background: #7a1f14; color: #ffe1dc; animation: ready 1s ease-in-out infinite; }
.log-btn { display: none; }

/* the sound panel the 🔊 opens and the ☰ menu; the veil behind them takes the tap that closes them */
.sound-veil { position: fixed; inset: 0; z-index: 49; display: none; }
.sound-veil.on { display: block; }
.sound-pop {
  position: absolute; top: calc(52px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 50;
  display: none; flex-direction: column;
  width: min(260px, calc(100vw - 24px));
  padding: 8px 16px 12px;
  border: 2px solid #ffd16655; border-radius: 16px;
  background: linear-gradient(#123d54, #0b2c3d);
  box-shadow: 0 20px 50px #000c;
  transform-origin: top right;
  animation: pop .18s ease-out;
}
.sound-pop.on { display: flex; }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; font: 800 15px var(--round); color: var(--cream); cursor: pointer; }
.sound-pop input[type="range"] { width: 100%; height: 28px; margin: 0 0 4px; accent-color: var(--corgi); transition: opacity .15s; }
.sound-row.off + input[type="range"] { opacity: .45; }
.switch {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 46px; height: 26px; margin: 0;
  border: 1px solid #ffffff30; border-radius: 999px;
  background: radial-gradient(circle, var(--cream) 0 9px, #0000 10px) 1px 50% / 22px 22px no-repeat #00000060;
  cursor: pointer;
  transition: background-color .15s, background-position .15s, border-color .15s;
}
.switch:checked { border-color: #7a4a14; background-color: var(--corgi); background-position: calc(100% - 1px) 50%; }
.sound-hint { margin: 6px 0 0; font-size: 12px; opacity: .65; }
.sound-hint kbd { margin: 0 2px 0 0; }
.menu-pop { width: min(300px, calc(100vw - 24px)); padding: 8px; gap: 2px; }
.menu-item { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: none; font: 700 14.5px var(--round); text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: #ffffff14; }
.menu-item.warn { color: #ffb4ab; }

/* ——— a dog's portrait ——— */
.avatar {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--face, none) 50% 30% / cover no-repeat, radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--coat, var(--corgi)) 55%, #fff), var(--coat, var(--corgi)));
  box-shadow: 0 0 0 3px var(--coat, var(--corgi)), 0 0 0 4px #0005, 0 2px 8px #0008;
  color: #fff;
  font: 900 18px var(--round);
  text-shadow: 0 1px 2px #0008;
}
.avatar[data-coat="snow"] { box-shadow: 0 0 0 3px var(--coat), 0 0 0 4.5px #1d1410, 0 2px 8px #0008; }
.avatar span { opacity: 0; }

/* ——— the dogs' panel ——— */
.dogs { grid-area: dogs; display: flex; flex-direction: column; gap: 6px; padding: 4px 14px 0 4px; z-index: 4; }
.dog {
  --coat: var(--corgi);
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--line); border-left: 4px solid var(--coat); border-radius: 14px;
  background: var(--panel);
  transition: box-shadow .25s, border-color .25s, opacity .3s;
}
.dog[data-seat="0"] { --coat: #D64545; }
.dog[data-seat="1"] { --coat: #3B7DD8; }
.dog[data-seat="2"] { --coat: #F4F1EA; }
.dog[data-seat="3"] { --coat: #F08A24; }
.dog[data-seat="4"] { --coat: #3FA864; }
.dog[data-seat="5"] { --coat: #8A5A3C; }
.dog.current { border-color: var(--gold); border-left-color: var(--coat); box-shadow: 0 0 0 1px var(--gold), 0 0 20px #ffd16648; }
.dog.owes { box-shadow: 0 0 0 1px var(--doom), 0 0 16px #e05a4f55; }
.dog.won { border-color: var(--go); box-shadow: 0 0 0 1px var(--go), 0 0 24px #7cf29a66; }
.dog.gone .dog-name { opacity: .7; }
.dog.away .avatar { filter: grayscale(.8); opacity: .7; }
.dog.you { background: color-mix(in srgb, var(--panel-solid) 80%, var(--coat) 20%); }
.dog-face { position: relative; width: 44px; height: 44px; }
.dog-face .avatar { width: 100%; height: 100%; }
.ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; }
.dog.acting .ring { box-shadow: 0 0 0 2px var(--gold), 0 0 14px #ffd166aa; animation: breathe 1.6s ease-in-out infinite; }
.ring.timed { box-shadow: none !important; animation: none; background: conic-gradient(var(--gold) calc(var(--left, 1) * 360deg), #ffffff26 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.dog-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14.5px var(--round); }
.dog-pts { flex: none; display: inline-flex; align-items: baseline; gap: 3px; font: 900 17px var(--round); color: var(--gold); }
.dog-pts span { font-size: 12px; }
.dog-pts small { font-size: 11px; opacity: .8; }
.dog-stats { display: flex; gap: 9px; font-size: 12.5px; }
.stat { display: inline-flex; align-items: center; gap: 2px; opacity: .88; white-space: nowrap; }
.stat i { font-style: normal; font-size: 11px; }
.stat.heavy { color: #ffb4ab; opacity: 1; font-weight: 800; }
.dog-badges { display: flex; flex-direction: column; gap: 3px; }
.dog-badges:empty { display: none; }
.dog-badges .special { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 8px; background: #ffd16633; box-shadow: inset 0 0 0 1px #ffd16688; font-size: 15px; }

/* ——— the island ——— */
.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; margin: 4px 0 0 14px; }
.island {
  position: absolute; inset: 0;
  /* the room game.js makes for the offers on the table and for the bank, so the island is never under them */
  padding: var(--room-top, 0px) var(--room-right, 0px) 0 var(--room-left, 0px);
  transition: padding .2s ease;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 45%, #2a7aa055, #0a2a3bb0 85%), url(/art/tile-sea.jpg) 50% 50% / 240px repeat, #1d6489;
  box-shadow: inset 0 0 0 2px #ffffff14, inset 0 0 60px #0009, 0 10px 30px #0006;
}
.island-svg { display: block; width: 100%; height: 100%; }
.island.zoomed { overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.island.zoomed::-webkit-scrollbar { display: none; }
.island.zoomed .island-svg { width: 200%; height: 200%; }
.zoom-btn { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 18px; }
.zoom-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.sand { fill: #dcc184; }
.shore { fill: #f2e4b8; }
.hex-art { pointer-events: none; }
.hex-rim { fill: none; stroke: #2b1a0d38; stroke-width: 3; }
.token-face { fill: #f8eed4; stroke: #6b4f2a; stroke-width: 3.5; }
.token-num { font: 900 29px var(--round); fill: #2b1a0d; text-anchor: middle; dominant-baseline: central; }
.token-pips circle { fill: #2b1a0d; }
.token.red .token-num, .token.red .token-pips circle { fill: #c62f2f; }
.token { transition: opacity .3s; }
.token.blocked { opacity: .55; }
.token.hot .token-face { animation: hot 1.6s ease-out; }
.pier { stroke: #5e3b1c; stroke-width: 12; stroke-linecap: round; }
.planks { stroke: #b88550; stroke-width: 7; stroke-dasharray: 7 4; }
.dock-face { fill: #fff6e3; stroke: var(--ring, #7a4b22); stroke-width: 7; }
.dock.any .dock-face { stroke: #7a4b22; }
.dock-rate { font: 900 15px var(--round); fill: #3a2208; text-anchor: middle; dominant-baseline: central; }
.dock-rate.big { font-size: 19px; }
.dock-any { font: 800 10px var(--round); fill: #7a4b22; text-anchor: middle; dominant-baseline: central; letter-spacing: .06em; }
.dock-glyph { font-size: 21px; text-anchor: middle; dominant-baseline: central; }
.path-edge { stroke-width: 22; stroke-linecap: round; }
.path-body { stroke-width: 13; stroke-linecap: round; }
.piece.path.fresh .path-edge { stroke: var(--gold); }
.house-body { stroke-width: 5; stroke-linejoin: round; }
.house-door { fill: #2b1a0daa; }
.house-shadow { fill: #0006; }
.fresh-ring { fill: none; stroke: var(--gold); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-in-out infinite; }
.popping .pop { transform-box: fill-box; transform-origin: 50% 80%; animation: pieceIn .55s cubic-bezier(.2, 1.6, .4, 1); }
.squirrel-layer { transition: opacity .15s; }
.squirrel-layer.away { opacity: 0; transition: none; }
.squirrel-shadow { fill: #0006; }
.squirrel-glyph { font-size: 56px; text-anchor: middle; dominant-baseline: central; }
/* the spots that glow while a dog chooses, and take the click */
.spot { cursor: pointer; outline: none; }
.spot .hit { fill: transparent; stroke: transparent; pointer-events: all; }
.spot line.hit { stroke-width: 46; stroke-linecap: round; pointer-events: stroke; }
.spot .ghost { opacity: 0; transition: opacity .12s; pointer-events: none; }
.spot:hover .ghost, .spot:focus-visible .ghost { opacity: .92; }
.spot circle.glow { fill: #fff7; stroke: var(--gold); stroke-width: 5; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: spot 1.1s ease-in-out infinite; }
.spot:hover circle.glow { fill: var(--gold); }
.s-castle circle.glow { fill: none; stroke-width: 6; stroke-dasharray: 12 8; }
.s-castle:hover circle.glow { fill: none; }
.spot line.halo { stroke: var(--gold); stroke-width: 24; stroke-linecap: round; opacity: .38; pointer-events: none; animation: breathe 1.3s ease-in-out infinite; }
.spot line.glow { stroke: #fff6d8; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 9 9; pointer-events: none; animation: march .8s linear infinite; }
.s-path:hover line.glow, .s-path:hover line.halo { opacity: 0; }
.s-squirrel polygon.glow { fill: #ffd16622; stroke: var(--gold); stroke-width: 6; stroke-dasharray: 16 10; pointer-events: none; animation: march-hex .9s linear infinite; }
.s-squirrel:hover polygon.glow { fill: #ffd16660; stroke: #fff; }
.spot:focus-visible .glow { stroke: #fff; stroke-width: 8; }

/* the bank and the trick deck, in the island's corner */
.bank { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 5px; padding: 6px 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); pointer-events: auto; }
.bank-res { --cw: 20px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 24px; }
.res-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(color-mix(in srgb, var(--res) 82%, #fff), var(--res)); box-shadow: inset 0 0 0 1.5px #ffffff66, 0 1px 3px #0006; font-size: 14px; font-style: normal; line-height: 1; }
.bank-res .card.back { height: 24px; width: 18px; }
.bank-res b { font: 800 11px var(--round); }
.bank-res.out { opacity: .4; }
.bank-res.deck { margin-left: 4px; padding-left: 7px; border-left: 1px solid var(--line); }

/* ——— the offers on the table, and the trade panel ——— */
.offers { position: absolute; top: 10px; left: 10px; z-index: 4; display: none; flex-direction: column; gap: 8px; width: min(350px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto; overscroll-behavior: contain; }
.offers.on { display: flex; }
.offer { flex: none; padding: 8px 10px 9px; border-radius: 14px; background: #fff6e6f4; color: #34241a; box-shadow: 0 8px 22px #0008; animation: offerIn .3s cubic-bezier(.2, 1.4, .4, 1); }
.offer.to-you { box-shadow: 0 0 0 3px var(--gold), 0 8px 22px #0008; }
.offer.mine { background: #e9f3fbf4; }
.offer .avatar { width: 26px; height: 26px; font-size: 12px; box-shadow: 0 0 0 2px var(--coat), 0 1px 4px #0006; }
.offer-head { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.25; }
.offer-deal { display: flex; align-items: center; gap: 10px; margin: 7px 0 6px; }
.deal-side { display: flex; flex-direction: column; gap: 3px; }
.deal-side small { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.deal-arrow { font-size: 20px; opacity: .55; }
.chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.chips em { font-size: 12px; opacity: .7; }
/* a resource as a chip: its colour, its glyph, and how many */
.res-chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 7px 0 5px; border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--res) 82%, #fff), var(--res)); box-shadow: inset 0 0 0 1.5px #ffffff66, 0 1px 3px #0006; color: #fff; font: 900 12px var(--round); text-shadow: 0 1px 1px #0007; white-space: nowrap; }
.res-chip i { font-style: normal; font-size: 14px; line-height: 1; text-shadow: none; }
.chips.inline { gap: 3px; margin: 0 2px; }
.chips.inline .res-chip { height: 19px; padding: 0 5px 0 3px; border-radius: 6px; font-size: 11px; }
.chips.inline .res-chip i { font-size: 12px; }
.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.answers { display: flex; gap: 7px; }
.answer { position: relative; }
.answer i { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #c9b99b; color: #fff; font: 900 9px var(--round); font-style: normal; }
.answer.accept i { background: #2e9d57; }
.answer.decline i { background: #c0392b; }
.offer-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.offer-btn { padding: 6px 11px; border: 1px solid #0002; border-radius: 999px; background: #fff; color: #34241a; font: 800 12px var(--round); }
.offer-btn.go { background: #2e9d57; border-color: #1d6b3a; color: #fff; }
.offer-btn.no { background: #f6e1dd; }
.offer-btn.quiet { background: transparent; }
.offer-btn.chosen { box-shadow: 0 0 0 2px #34241a; }
.offer-btn:disabled { opacity: .45; }
.offer-wait { margin: 5px 0 0; font-size: 11.5px; opacity: .7; }

.trade-panel {
  position: absolute; left: 50%; bottom: 10px; z-index: 6;
  display: none;
  width: min(580px, calc(100% - 20px)); max-height: calc(100% - 20px);
  padding: 10px 14px 12px;
  overflow: auto; overscroll-behavior: contain;
  border: 2px solid #ffd16660; border-radius: 18px;
  background: linear-gradient(#123d54f7, #0b2c3df7);
  box-shadow: 0 20px 50px #000b;
  transform: translateX(-50%);
}
.trade-panel.on { display: block; animation: rise .2s ease-out; }
.trade-head { display: flex; align-items: center; justify-content: space-between; }
.trade-head h3 { margin: 0; font: 900 17px var(--round); color: var(--gold); }
.trade-side { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.trade-label { flex: none; width: 58px; font: 800 12px var(--round); opacity: .8; }
.trade-side .picker { flex: 1; justify-content: space-between; }
.trade-to { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.to-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px; border: 1px solid #ffffff30; border-radius: 999px; background: #ffffff10; font: 700 12.5px var(--round); }
.to-chip .avatar { width: 22px; height: 22px; margin-left: -8px; font-size: 10px; box-shadow: 0 0 0 2px var(--coat); }
.to-chip[aria-pressed="true"] { border-color: transparent; background: var(--corgi); color: #3a2208; }
.trade-go { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.bank-btn { padding: 10px 16px; border: 1px solid #ffffff38; border-radius: 12px; background: #ffffff16; font: 800 14px var(--round); }
.bank-btn:disabled { opacity: .45; }
.trade-why { min-height: 1.2em; margin: 2px 0 6px; font-size: 12px; text-align: right; opacity: .75; }

/* the resource picker: a card to tap and a stepper, for the trade panel and the dialogs */
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pick-cell { --cw: calc(var(--u) * .74); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border-radius: 12px; transition: background .15s; }
.pick-cell.some { background: #ffd16626; box-shadow: inset 0 0 0 1px #ffd16666; }
.pick-card { padding: 0; border: 0; border-radius: calc(var(--cw) * .09); background: none; transition: transform .12s; }
.pick-card:not(:disabled):hover { transform: translateY(-3px); }
.pick-card:disabled .card { filter: grayscale(.6) brightness(.75); }
.pick-row { display: flex; align-items: center; gap: 4px; }
.pick-step { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #ffffff38; border-radius: 50%; background: #ffffff14; font: 900 16px/1 var(--round); }
.pick-step:disabled { opacity: .3; }
.pick-n { min-width: 16px; font: 900 15px var(--round); text-align: center; }
.pick-note { padding: 0; border: 0; background: none; color: inherit; font: 700 11px var(--round); opacity: .75; }
button.pick-note { min-height: 22px; padding: 1px 7px; border-radius: 999px; background: #ffd16622; color: var(--gold); opacity: 1; }
button.pick-note:hover { background: #ffd16644; }

/* ——— the log ——— */
.log-panel { grid-area: log; display: flex; flex-direction: column; min-height: 0; margin: 8px 14px 12px 4px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); z-index: 3; }
.log-panel .drawer-head { margin-bottom: 4px; }
.log-panel .drawer-x { display: none; }
.lines { flex: 1; min-height: 0; margin: 0; padding: 0 2px 0 0; overflow: auto; list-style: none; font-size: 12.5px; line-height: 1.45; user-select: text; -webkit-user-select: text; overscroll-behavior: contain; }
.lines li { padding: 2px 0; }
.lines li.turn { margin-top: 8px; padding-top: 6px; border-top: 1px solid #ffffff14; font: 800 11px var(--round); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.lines li.quiet { opacity: .62; }
.lines li.special, .lines li.won { color: var(--gold); }
.lines li.rolled .roll-sum { color: var(--gold); font-size: 14px; }
.lines li.trick b:not(.nm) { color: #ffc98a; }
.nm { font-weight: 800; color: #ffd9a8; }
.nm[data-coat="cherry"] { color: #ff8c8c; }
.nm[data-coat="sky"] { color: #8fbdff; }
.nm[data-coat="snow"] { color: #ffffff; }
.nm[data-coat="corgi"] { color: #ffb36b; }
.nm[data-coat="moss"] { color: #7fdc9c; }
.nm[data-coat="cocoa"] { color: #e0a982; }

/* ——— along the bottom: what to do, your cards, and the turn's buttons ——— */
.bar { grid-area: bar; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 10px 14px; }
.prompt { min-height: 1.35em; font: 700 14px var(--round); text-align: center; text-shadow: 0 1px 2px #0009; }
.prompt.urgent { color: var(--gold); }
.bar-row { display: flex; align-items: flex-end; gap: 14px; }
.hand { --cw: var(--u); position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; height: calc(var(--cw) * 1.4 + 10px); padding: 6px 4px 0; }
.hand-empty { align-self: center; margin: 0 auto; font-size: 13px; opacity: .6; }
.hcard { position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); padding: 0; border: 0; border-radius: calc(var(--cw) * .09); background: none; }
.hcard + .hcard { margin-left: var(--ov, 8px); }
.hcard.tcard.first { margin-left: calc(var(--ov, 8px) + 12px); }
.hand > .hcard.tcard.first:first-child { margin-left: 0; }
.lift { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform .18s ease-out; }
.stack .card { position: absolute; inset: 0; transform: translate(calc(var(--k, 0) * 3px), calc(var(--k, 0) * -3px)); }
.count { position: absolute; top: -8px; right: -8px; z-index: 5; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #3a2208; box-shadow: 0 2px 6px #0008; font: 900 14px/24px var(--round); text-align: center; }
.tcard.play .card { box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--fam), 0 0 0 2px var(--go), 0 0 14px #7cf29ac0, 0 4px 10px #0007; }
.tcard.fresh .card { filter: saturate(.55) brightness(.85); }
.tcard.fresh::before {
  content: "New"; position: absolute; z-index: 6; left: 50%; top: -9px; transform: translateX(-50%);
  padding: 0 7px; border-radius: 999px; background: var(--sky); color: #08263a; box-shadow: 0 2px 6px #0007;
  font: 900 10px/16px var(--round); letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .hcard:hover { z-index: 30; }
  .hcard:hover .lift { transform: translateY(-12%) scale(var(--zoom, 1.9)); }
  .hcard:hover .lift .card { box-shadow: 0 18px 40px #000b; }
  .hcard.stack:hover .card { transform: none; }
  .hcard.stack:hover .card:not(:last-of-type) { opacity: 0; }
  .hcard:hover .count { top: -4px; right: -4px; font-size: 9px; line-height: 15px; min-width: 15px; padding: 0 3px; }
  .hcard.tcard.fresh:hover::before { display: none; }
}

.actions { flex: none; display: flex; align-items: flex-end; gap: 10px; padding-right: 2px; }
.dice-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dice { display: flex; gap: 6px; }
.die {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: calc(var(--u) * .54); height: calc(var(--u) * .54);
  padding: 13%;
  border-radius: 22%;
  background: linear-gradient(#fffdf6, #eadcbd);
  box-shadow: inset 0 -3px 0 #cdb98d, 0 3px 6px #0007;
}
.die i { border-radius: 50%; background: #2b1a0d; opacity: 0; transform: scale(.82); }
.die i.on { opacity: 1; }
.die:nth-child(2) i { background: #b0281f; }
.dice.old .die { opacity: .5; }
.dice.blank .die i { opacity: 0; }
.die.rolling { animation: tumble .16s linear infinite; }
.dice.landed { animation: landed .45s cubic-bezier(.2, 1.6, .4, 1); }
.roll {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 34px; padding: 6px 12px;
  border: 2px solid #00000050; border-radius: 12px;
  background: linear-gradient(#3e6f88, #284e62);
  font: 900 15px var(--round);
  box-shadow: 0 3px 0 #0007;
}
.roll:disabled { opacity: .55; }
.roll.ready { border-color: #7a4a14; background: linear-gradient(#ffd166, #e8963c); color: #3a2208; animation: ready 1.6s ease-in-out infinite; }
.roll.ready:active { transform: translateY(2px); box-shadow: 0 1px 0 #0007; }
.build-bar { display: flex; gap: 6px; }
.build {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: calc(var(--u) * 1.02); min-height: 44px;
  padding: 6px 4px 5px;
  border: 1px solid #ffffff2a; border-radius: 12px;
  background: linear-gradient(#1f5d7c, #143f57);
  box-shadow: 0 3px 0 #0006;
}
.build:not([aria-disabled="true"]):hover { background: linear-gradient(#2a7398, #1a4d69); }
.build[aria-disabled="true"] { opacity: .5; cursor: default; }
.build.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 18px #ffd16688; background: linear-gradient(#2c6f8f, #1a4d69); }
.build-icon { display: grid; place-items: center; width: calc(var(--u) * .46); height: calc(var(--u) * .46); }
.piece-icon { width: 100%; height: 100%; overflow: visible; }
.build-icon .card.back { --cw: calc(var(--u) * .3); }
.build-name { font: 800 12px var(--round); }
.build-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.cost { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--res); box-shadow: inset 0 0 0 1px #ffffff55; font-size: 9px; font-style: normal; line-height: 1; opacity: .3; }
.cost.have { opacity: 1; }
.build-left { font-size: 10px; opacity: .65; }
.turn-acts { display: flex; flex-direction: column; gap: 6px; }
.act { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: calc(var(--u) * 1.5); min-height: 40px; padding: 7px 14px; border: 2px solid #00000050; border-radius: 12px; font: 900 14px var(--round); box-shadow: 0 3px 0 #0007; white-space: nowrap; }
.act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0007; }
.act-icon { font-size: 15px; }
.trade-btn { background: linear-gradient(#4a8be0, #2b5fa8); }
.trade-btn.on { box-shadow: 0 0 0 2px var(--gold), 0 3px 0 #0007; }
.end-btn { border-color: #7a4a14; background: linear-gradient(#ffd166, #e8963c); color: #3a2208; }
.act:disabled { filter: grayscale(.85); opacity: .5; }

/* ——— cards in flight, bursts, banners, toasts ——— */
.flyer { --cw: var(--u); position: fixed; left: 0; top: 0; z-index: 45; width: var(--cw); height: calc(var(--cw) * 1.4); margin: calc(var(--cw) * -.7) 0 0 calc(var(--cw) * -.5); pointer-events: none; perspective: 900px; }
.flyer.small { --cw: calc(var(--u) * .7); }
.flyer-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.side.rear { transform: rotateY(180deg); }
.spot-scrim { position: fixed; inset: 0; z-index: 44; background: radial-gradient(circle, #0003, #0008); pointer-events: none; }
.flyer.spot { --lit: var(--gold); z-index: 46; }
.flyer.spot.won { --lit: var(--go); }
.flyer.spot.lost { --lit: #ff6b5b; }
.flyer.spot .side.front > .card { box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--res, var(--fam)), 0 0 0 2px var(--lit), 0 0 28px var(--lit), 0 16px 34px #000a; }
.spot-caption {
  --lit: var(--gold);
  position: fixed; z-index: 47; max-width: calc(100vw - 32px);
  padding: 7px 16px; border: 2px solid var(--lit); border-radius: 999px;
  background: #0b2c3df4; color: #fff3d6; box-shadow: 0 0 18px color-mix(in srgb, var(--lit) 50%, transparent), 0 6px 18px #0008;
  font: 800 16px/1.25 var(--round); text-align: center; text-wrap: balance;
  pointer-events: none;
}
.spot-caption.won { --lit: var(--go); }
.spot-caption.lost { --lit: #ff6b5b; color: #ffe4df; }
.hopper { position: fixed; left: 0; top: 0; z-index: 45; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; }
.hopper img { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px #0008); }
.hopper span { font-size: 44px; }
.burst {
  position: fixed; z-index: 60; transform: translate(-50%, -50%);
  font: 900 clamp(26px, 4.6vw, 52px) var(--round);
  color: var(--cream); -webkit-text-stroke: 2px #2a7aa0; text-shadow: 0 4px 0 #0b3b56;
  white-space: nowrap; pointer-events: none;
  animation: burst 1s ease-out forwards;
}
.burst.trick { -webkit-text-stroke-color: var(--corgi); text-shadow: 0 4px 0 #6b3f10; }
.burst.walk { -webkit-text-stroke-color: #d9a433; text-shadow: 0 4px 0 #6b4d10; font-size: clamp(20px, 3vw, 32px); }
.flash { position: fixed; inset: 0; z-index: 55; pointer-events: none; animation: flash .9s ease-out forwards; }
.flash.doom { background: radial-gradient(ellipse at center, transparent 25%, #e05a4f90); }
.banner { position: fixed; left: 50%; top: 42%; z-index: 58; display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: banner 1.7s ease-out forwards; }
.banner strong { font: 900 clamp(30px, 6vw, 62px) var(--round); color: var(--gold); text-shadow: 0 4px 0 #6b3f10, 0 0 30px #0009; white-space: nowrap; }
.banner span { font-weight: 800; text-shadow: 0 2px 4px #000; }
.toasts { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(calc(100vw - 32px), 380px); transform: translateX(-50%); pointer-events: none; }
.toast { padding: 8px 14px; border: 1px solid #ffffff2a; border-radius: 12px; background: #0b2c3df4; box-shadow: 0 6px 20px #0009; font-size: 13.5px; text-align: center; transition: opacity .4s, transform .4s; }
.toast.error { border-color: var(--doom); }
.toast.good { border-color: var(--go); }
.toast.gone { opacity: 0; transform: translateY(-6px); }
body.offline::after { content: "Reconnecting to the table…"; position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 80; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #4a1310f0; font-size: 13px; }

/* ——— the chat drawer, and the end of a game ——— */
.drawer {
  position: absolute; top: calc(52px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 31;
  display: flex; flex-direction: column;
  width: min(340px, 88vw);
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #08202ef4;
  box-shadow: 0 20px 50px #000a;
  transform: translateX(calc(100% + 28px));
  visibility: hidden;
  transition: transform .25s, visibility 0s .25s;
}
.game.show-chat .chat-drawer { transform: none; visibility: visible; transition: transform .25s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drawer-head h3 { margin: 0; font: 800 14px var(--round); color: var(--gold); }
.drawer-x { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #ffffff14; font-size: 18px; line-height: 1; }

/* the table's chat: in the lobby, and in the board's drawer */
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.chat-lines { flex: 1; min-height: 0; margin: 0; padding: 2px 2px 4px; overflow: auto; list-style: none; display: flex; flex-direction: column; gap: 8px; user-select: text; -webkit-user-select: text; overscroll-behavior: contain; }
.chat-lines li { display: flex; align-items: flex-end; gap: 7px; max-width: 92%; }
.chat-lines li.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-lines .avatar { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--coat, var(--corgi)), 0 1px 4px #0008; }
.chat-bubble { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 7px; border-radius: 14px 14px 14px 4px; background: #ffffff16; font-size: 13.5px; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
.chat-bubble b { font-size: 11px; color: var(--gold); opacity: .9; }
.mine .chat-bubble { border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--corgi) 34%, #0b2c3d); }
.mine .chat-bubble b { display: none; }
.chat-empty { align-self: center; max-width: none !important; margin: auto; font-size: 13px; opacity: .6; }
.chat-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button { flex: none; padding: 4px 10px; border: 1px solid #ffffff2a; border-radius: 999px; background: #ffffff10; font-size: 12.5px; white-space: nowrap; }
.chat-quick button:hover { background: #ffffff22; }
.chat-say { display: flex; gap: 6px; flex: none; }
.chat-say input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #ffffff38; border-radius: 12px; background: #00000055; color: var(--ink); font-size: 16px; user-select: text; -webkit-user-select: text; }
.chat-say input:focus { outline: 2px solid #f08a2490; outline-offset: 0; }
.chat-send { padding: 0 14px; border: 0; border-radius: 12px; background: linear-gradient(#ffd166, #e8963c); color: #3a2208; font: 900 14px var(--round); }
.chat-send:disabled { opacity: .6; }
/* a line said aloud, beside the dog who said it */
.say-bubble {
  position: absolute; right: calc(100% + 10px); top: 50%; z-index: 20;
  width: max-content; max-width: min(220px, 60vw);
  padding: 6px 11px; border-radius: 14px;
  background: var(--cream); color: #34241a; box-shadow: 0 6px 18px #000a;
  font: 700 13px/1.3 var(--round); text-align: left; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  transform: translateY(-50%); pointer-events: none;
  animation: say .22s cubic-bezier(.2, 1.5, .4, 1); transition: opacity .5s;
}
.say-bubble.gone { opacity: 0; }

/* the scores lie over the table but under the top bar, its drawers and its menus: the chat and
   the menu stay at hand once a game is over */
.game[data-phase="over"] .topbar { z-index: 30; }
/* the card starts below the top bar and ends above "Look at the island", so neither is ever over it */
.over { --top: 58px; position: absolute; inset: 0; z-index: 29; display: none; place-items: center; padding: calc(var(--top) + env(safe-area-inset-top, 0px)) 16px calc(68px + env(safe-area-inset-bottom, 0px)); background: #000a; backdrop-filter: blur(2px); }
.over.on { display: grid; }
.over.peeking { background: transparent; backdrop-filter: none; pointer-events: none; }
.over.peeking .over-card { display: none; }
.over-peek { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 8px 16px; border: 1px solid #ffffff3a; border-radius: 999px; background: #0b2c3df0; font: 800 13px var(--round); pointer-events: auto; }
/* the rows scroll inside the card; Play again, Home and Leave sit in its foot, always in view */
.over-card { display: flex; flex-direction: column; width: min(540px, 100%); max-height: 100%; overflow: hidden; border: 2px solid #ffd16688; border-radius: 22px; background: linear-gradient(#123d54, #0a2a3b); box-shadow: 0 20px 60px #000c; text-align: center; animation: pop .45s cubic-bezier(.2, 1.5, .4, 1); }
.over-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 26px 4px; }
.over-foot { flex: none; padding: 12px 26px 16px; border-top: 1px solid #ffffff1c; background: #0a2a3b; box-shadow: 0 -10px 18px -10px #000c; }
.over-foot .hint { margin: 0; }
.over-card h2 { margin: 2px 0; font: 900 32px var(--round); color: var(--gold); }
.over-sub { margin: 0 0 12px; opacity: .85; }
.trophy { font-size: 60px; animation: bob 1.4s ease-in-out infinite; }
.final { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; text-align: left; }
.final li { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: #ffffff0c; }
.final li.winner { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 1px #ffd16688; }
.final li.you { outline: 1px solid #ffffff33; }
.final .avatar { width: 34px; height: 34px; font-size: 14px; }
.final-place { font: 900 15px var(--round); text-align: center; opacity: .9; }
.final-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.final-main > b { font: 800 14.5px var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final-main em { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #ffffff22; font-size: 10.5px; font-style: normal; font-weight: 700; }
.final-why { display: flex; flex-wrap: wrap; gap: 4px; }
.why { padding: 1px 7px; border-radius: 999px; background: #ffffff14; font-size: 11.5px; }
.final-trophi { display: flex; gap: 4px; margin-top: 2px; }
.final-trophi .card { --cw: 48px; }
.final-trophi .card-fam, .final-trophi .card-text, .final-trophi .card-name { display: none; }
.final-trophi .card.trick .card-art { inset: 6%; height: auto; }
.final-points { font: 900 24px var(--round); color: var(--gold); }
.over-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* a quiet button: home, leave, close */
.ghost-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 1px solid #ffffff2e; border-radius: 12px; background: #ffffff10; color: var(--ink); font: 700 13.5px var(--round); text-decoration: none; white-space: nowrap; }
.ghost-btn:hover { background: #ffffff20; }
.ghost-btn.warn { border-color: #e05a4f80; color: #ffb4ab; }

/* ——— dialogs ——— */
dialog.panel {
  max-width: min(92vw, 660px); max-height: 88vh;
  padding: 18px 20px 20px;
  overflow: auto;
  border: 2px solid #ffd16660; border-radius: 18px;
  background: linear-gradient(#123d54, #0a2a3b);
  color: var(--ink);
  box-shadow: 0 30px 80px #000c;
  user-select: none;
}
dialog.panel::backdrop { background: #0009; backdrop-filter: blur(2px); }
dialog.panel h2 { margin: 0 30px 12px 0; font: 900 20px var(--round); color: var(--gold); }
dialog.panel h3 { margin: 16px 0 8px; font: 800 15px var(--round); color: var(--corgi); }
dialog.panel p, dialog.panel li { font-size: 14px; line-height: 1.5; }
dialog .close { position: absolute; top: 8px; right: 12px; padding: 4px; border: 0; background: none; font-size: 26px; line-height: 1; opacity: .7; }
dialog.panel.choose { width: min(94vw, 560px); }
.choose .pick-cell { --cw: min(76px, 15vw); }
.choose-status { margin: 10px 0 0; color: var(--gold); font-weight: 800; text-align: center; }
.choose-go { display: flex; justify-content: center; margin-top: 12px; }
.steal-list { display: flex; flex-direction: column; gap: 8px; }
.steal-dog { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 10px; border: 1px solid #ffffff2a; border-radius: 14px; background: #ffffff10; text-align: left; }
.steal-dog:hover, .steal-dog:focus-visible { border-color: var(--gold); background: #ffffff20; }
.steal-name { flex: 1; display: flex; flex-direction: column; }
.steal-name b { font: 800 15px var(--round); }
.steal-name span { font-size: 12.5px; opacity: .75; }
.steal-backs { display: flex; padding-left: 8px; }
.steal-backs i { width: 16px; height: 23px; margin-left: -7px; border-radius: 3px; background: url(/art/back.jpg) 50% 50% / cover, #2a7aa0; box-shadow: 0 0 0 1.5px var(--cream), 0 1px 3px #0007; }
.greedi-list { --cw: min(84px, 16vw); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.greedi-list .pick-card:hover { transform: translateY(-5px) scale(1.05); }
dialog.panel.rules { width: min(92vw, 680px); }
.rules ol, .rules ul { padding-left: 20px; }
.costs { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.cost-row { display: grid; grid-template-columns: 64px 170px 1fr; align-items: center; gap: 10px; }
.cost-cards { gap: 4px; }
.cost-what { font-size: 13px; opacity: .85; }
/* a narrow dialog: what each thing does goes under its price, not in a column a word wide */
@media (max-width: 560px) {
  .cost-row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 2px; }
  .cost-what { grid-column: 2; }
}
.rule-tricks { --cw: 106px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; justify-items: center; }
.small { margin: 0; font-size: 12px; opacity: .65; }
.hint { font-size: 12.5px; opacity: .8; }
/* a card up close: a tap on a touch screen opens it large, with what it can do beneath it */
dialog.panel.peek { width: min(92vw, 380px); padding: 14px 16px 16px; text-align: center; }
dialog.panel.peek h2 { margin: 0 30px 10px; }
.peek-card { --cw: min(60vw, 250px, 36vh); display: grid; place-items: center; }
.peek-card .card { box-shadow: inset 0 0 0 calc(var(--cw) * .045) var(--res, var(--fam)), 0 16px 40px #000b; }
.peek-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.peek-actions button { width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 15px; }
.peek-actions button:not(.primary) { border: 1px solid #ffffff2a; background: #ffffff12; }
.peek-why { margin: 0; font-size: 13px; opacity: .8; }
/* a dog up close, from a tap on its chip on a phone */
.dog-card-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.dog-card-head .avatar { width: 64px; height: 64px; font-size: 26px; }
.dog-card-pts { font: 900 28px var(--round); color: var(--gold); }
.dog-card-pts span { font-size: 20px; margin-right: 4px; }
.dog-card-facts { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.dog-card-facts li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #ffffff0c; }
.dog-card-facts i { width: 22px; font-style: normal; text-align: center; }
dialog.panel.ask { width: min(92vw, 400px); }
.ask-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ask-row button:not(.primary) { padding: 10px 16px; border: 1px solid #ffffff2a; border-radius: 12px; background: #ffffff12; }
.primary {
  display: inline-block;
  padding: 10px 20px;
  border: 0; border-radius: 12px;
  background: linear-gradient(#ffd166, #e8963c);
  box-shadow: 0 4px 0 #7a4a14, 0 8px 20px #0006;
  color: #3a2208;
  font: 900 15px var(--round);
  text-decoration: none;
}
.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #7a4a14; }
.primary:disabled { filter: grayscale(.7); opacity: .65; }
.primary.danger { background: linear-gradient(#ff8a7a, #e05a4f); box-shadow: 0 4px 0 #7a1f14, 0 8px 20px #0006; color: #2b0703; }

/* ——— the screens before the board ———
   Taller than the window, a screen scrolls from its top: the margin centres it only while there is room. */
.screen { height: 100%; overflow: auto; display: flex; flex-direction: column; padding: calc(28px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); overscroll-behavior: contain; }
.screen-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 480px); margin: auto; text-align: center; }
h1 { margin: 0; font: 900 clamp(52px, 13vw, 88px)/1 var(--round); color: var(--corgi); text-shadow: 0 5px 0 #6b3f10, 0 0 40px #0006; }
.tag { margin: 0; font-size: 15px; opacity: .9; }
.hero { --cw: min(var(--u), 92px); position: relative; width: 100%; height: calc(var(--cw) * 1.4 + 34px); }
.hero .card { position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--cw) / -2); transform-origin: 50% 130%; box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--res), 0 10px 24px #0009; }
.hero-squirrel { position: absolute; left: calc(50% + var(--cw) * .82); bottom: calc(var(--cw) * 1.05); z-index: 9; width: calc(var(--cw) * .9); filter: drop-shadow(0 6px 6px #0008); animation: bob 1.8s ease-in-out infinite; }
.welcome { display: flex; gap: 8px; width: 100%; }
.welcome input, .linkrow input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #ffffff38; border-radius: 12px; background: #00000055; color: var(--ink); font-size: 16px; user-select: text; -webkit-user-select: text; }
.link { padding: 0; border: 0; background: none; color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.join-code { display: flex; align-items: center; gap: 8px; }
.join-code label { font-size: 13px; opacity: .8; }
.join-code input { width: 8ch; padding: 8px 10px; border: 1px solid #ffffff38; border-radius: 10px; background: #00000055; color: var(--ink); font: 800 16px var(--round); letter-spacing: .2em; text-align: center; text-transform: uppercase; user-select: text; -webkit-user-select: text; }
.join-code button { padding: 8px 14px; border: 1px solid #ffffff38; border-radius: 10px; background: #ffffff18; }
.table-code { display: flex; align-items: baseline; justify-content: space-between; }
.table-code span { font-size: 13px; opacity: .8; }
.table-code b { font: 900 28px var(--round); letter-spacing: .18em; color: var(--gold); }
.handoff-code { display: flex; gap: 10px; }
.handoff-code span { display: grid; place-items: center; width: 52px; height: 64px; border: 2px solid #ffffff38; border-radius: 12px; background: #00000048; color: var(--gold); font: 900 34px var(--round); }
.whoami { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: #00000038; font-size: 14px; }
.whoami .avatar { width: 34px; height: 34px; }
.invite { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #00000038; text-align: left; }
.invite label { font-size: 13px; opacity: .85; }
.invite .link { align-self: flex-start; font-size: 13px; }
.linkrow { display: flex; gap: 6px; }
.linkrow input { font-size: 13px; }
.linkrow button { padding: 0 14px; border: 1px solid #ffffff38; border-radius: 12px; background: #ffffff18; }
.seats { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.seats li { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #00000038; text-align: left; }
.seats .avatar { width: 32px; height: 32px; font-size: 15px; }
.seats em, .chair em { padding: 1px 8px; border-radius: 999px; background: #ffffff1c; font-size: 11px; font-style: normal; white-space: nowrap; }
.seats em:first-of-type { margin-left: auto; }
.bot-tag { background: #6fb1e830 !important; }
em.away { background: #e05a4f40 !important; }

/* the lobby: the chairs, the table's options, the deal */
.screen.lobby .screen-inner { width: min(100%, 520px); }
.chairs-box, .options { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #00000038; text-align: left; }
.chairs-box h3, .options h3 { margin: 0; font: 800 14px var(--round); color: var(--gold); }
.chairs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chair { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 4px; border-radius: 999px; background: #00000040; }
.chair .avatar { width: 34px; height: 34px; font-size: 15px; }
.chair.vacant { background: transparent; box-shadow: inset 0 0 0 2px #ffffff22; }
.empty-seat { display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px; opacity: .55; }
.chair-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.chair.vacant .chair-name { font-weight: 500; opacity: .6; }
.chair-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #ffffff18; font-size: 17px; line-height: 1; }
.chair-x:hover { background: #e05a4f80; }
.add-bot, .fill-btn { flex: none; padding: 6px 12px; border: 1px solid #ffd16699; border-radius: 999px; background: #ffd16622; color: var(--gold); font: 800 12.5px var(--round); white-space: nowrap; }
.add-bot:hover, .fill-btn:hover:not(:disabled) { background: #ffd16640; }
.fill-btn { align-self: flex-end; padding: 8px 14px; }
.fill-btn:disabled { opacity: .4; }
.opt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.opt-label { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; }
.opt-label small { font-size: 11.5px; font-weight: 400; opacity: .7; }
.opt.toggle { cursor: pointer; }
.opt.bots { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; border-top: 1px solid #ffffff14; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: #00000048; }
.seg button { min-height: 30px; padding: 5px 12px; border: 0; border-radius: 999px; background: none; font: 800 12.5px var(--round); opacity: .78; }
.seg button[aria-pressed="true"] { background: var(--corgi); color: #3a2208; opacity: 1; }
.seg button:disabled { opacity: .3; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 32px; height: 32px; padding: 0; border: 1px solid #ffffff38; border-radius: 50%; background: #ffffff14; font: 900 17px/1 var(--round); }
.stepper button:disabled { opacity: .3; }
.stepper output { min-width: 70px; font: 900 15px var(--round); text-align: center; }
.opt-read { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.opt-read li { display: flex; justify-content: space-between; font-size: 13.5px; }
.opt-read span { opacity: .75; }
.primary.deal { padding: 12px 28px; font-size: 17px; }
.lobby-chat { display: flex; flex-direction: column; width: 100%; height: 280px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: #00000038; text-align: left; }
.lobby-chat h3 { margin: 0 0 6px; font: 800 14px var(--round); color: var(--gold); }
.lobby-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* the home screen: the buttons, then your tables, your stats and the leaderboard (home.js) */
.home .hero { --cw: min(var(--u), 78px); }
.home h1 { font-size: clamp(46px, 11vw, 72px); }
.home-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.home-tabs { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 16px; background: #00000038; text-align: left; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid #ffffff1a; }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px 10px; border: 0; border-bottom: 3px solid transparent; background: none; font: 800 14px var(--round); opacity: .7; white-space: nowrap; }
.tab[aria-selected="true"] { border-bottom-color: var(--corgi); color: var(--gold); opacity: 1; }
.tab-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--corgi); color: #3a2208; font-size: 11px; line-height: 17px; text-align: center; }
.tab-count:empty { display: none; }
.tab-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 120px; }
.tab-panel h3 { margin: 6px 0 0; font: 800 14px var(--round); color: var(--corgi); }
.empty { margin: auto; padding: 18px 8px; font-size: 13.5px; text-align: center; opacity: .7; }
.faces { display: inline-flex; flex: none; }
.faces .avatar { width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 2px var(--coat, var(--corgi)), 0 0 0 3px #0006; }
.faces .avatar + .avatar { margin-left: -6px; }
.my-tables { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.my-table { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid #ffffff1c; border-radius: 12px; background: #ffffff0a; }
.my-table.hot { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px #ffd16640; }
.my-table-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; color: inherit; text-decoration: none; }
.my-table-top { display: flex; align-items: center; gap: 8px; }
.my-code { font: 900 17px var(--round); letter-spacing: .14em; color: var(--gold); }
.my-table-top em { padding: 0 7px; border-radius: 999px; background: #ffffff1c; font-size: 10.5px; font-style: normal; }
.state { margin-left: auto; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot .state { color: var(--gold); font-weight: 800; opacity: 1; }
.my-table-dogs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.names { font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-table-acts { display: flex; flex-direction: column; gap: 5px; }
.my-table-acts .ghost-btn { justify-content: center; padding: 5px 10px; font-size: 12px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 12px; background: #ffffff0d; }
.tile b { font: 900 24px var(--round); color: var(--gold); }
.tile span { font-size: 11.5px; opacity: .75; }
.moments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.moments span { padding: 3px 9px; border-radius: 999px; background: #ffffff10; font-size: 12px; }
.history { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.past { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #ffffff09; }
.past.won { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.place { flex: none; width: 36px; font: 900 15px var(--round); text-align: center; opacity: .85; }
.past.won .place { font-size: 20px; opacity: 1; }
.past-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.past-line { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past-meta { font-size: 11.5px; opacity: .65; }
.ranks { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ranks li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #ffffff09; }
.ranks li.you { background: color-mix(in srgb, var(--corgi) 26%, transparent); box-shadow: inset 0 0 0 1px #f08a2490; }
.ranks .avatar { width: 30px; height: 30px; font-size: 13px; }
.rank { flex: none; width: 28px; font: 900 15px var(--round); text-align: center; opacity: .85; }
.rank-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-name em { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #ffffff22; font-size: 10.5px; font-style: normal; font-weight: 700; }
.rank-stats { flex: none; font-size: 12px; opacity: .85; text-align: right; }
.rank-stats b { color: var(--gold); }

/* ——— motion ——— */
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0; } }
@keyframes offerIn { from { transform: translateX(-20px) scale(.92); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ready { 0%, 100% { box-shadow: 0 3px 0 #7a4a14, 0 0 0 #ffd16600; } 50% { box-shadow: 0 3px 0 #7a4a14, 0 0 22px #ffd166bb; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes march { to { stroke-dashoffset: -18; } }
@keyframes march-hex { to { stroke-dashoffset: -26; } }
@keyframes spot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.12); opacity: .45; } }
@keyframes pieceIn { 0% { transform: translateY(-40px) scale(1.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes hot { 0% { stroke: var(--gold); stroke-width: 3.5; } 20% { stroke: var(--gold); stroke-width: 14; } 100% { stroke: #6b4f2a; stroke-width: 3.5; } }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.86); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes landed { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -85%) scale(1); opacity: 0; } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes banner { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
@keyframes say { from { scale: .7; opacity: 0; } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.shake { animation: shake .5s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .05s !important; }
}

/* ——— a phone, or a tablet held upright: the dogs in a strip above the island, the island the
   width, your cards and the buttons beneath it, the log a drawer ——— */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "dogs" "stage" "bar"; }
  .log-btn { display: inline-block; }
  .dogs { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 5px; padding: 2px 8px 0; }
  .dogs[data-count="2"] { --cols: 2; }
  .dogs[data-count="3"] { --cols: 3; }
  .dogs[data-count="5"], .dogs[data-count="6"] { --cols: 3; }
  .stage { margin: 6px 6px 0; }
  .zoom-btn { display: block; left: 8px; bottom: 8px; }
  .log-panel {
    position: absolute; top: calc(46px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    width: min(330px, 88vw); margin: 0;
    background: #08202ef4; box-shadow: 0 20px 50px #000a;
    transform: translateX(calc(100% + 28px)); visibility: hidden; transition: transform .25s, visibility 0s .25s;
  }
  .game.show-log .log-panel { transform: none; visibility: visible; transition: transform .25s; }
  .log-panel .drawer-x { display: block; }
  .drawer { top: calc(46px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .bar-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 6px; padding: 0; }
  .build { flex: 1; width: auto; min-width: 0; padding: 4px 2px; gap: 1px; }
  .build-left { display: none; }
  .turn-acts { gap: 4px; }
  .act { min-width: 0; min-height: 0; flex: 1; padding: 5px 9px; font-size: 12.5px; gap: 4px; }
}
/* a phone's width: everything a size smaller, each dog a small chip */
@media (max-width: 760px) {
  .chat-drawer { width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  .topbar { gap: 4px; padding: 6px 10px 4px; }
  .brand { font-size: 18px; }
  .code, .icon { padding: 0 8px; font-size: 12.5px; }
  .code-word, .rules-btn { display: none; }
  .clock { padding: 3px 7px; font-size: 13px; }
  .clock-icon { display: none; }
  /* what wins, in two short lines: "10 🏆" over "to win"; it steps aside while the turn timer runs */
  .goal { flex-direction: column; gap: 0; padding: 0 1px; line-height: 1.05; }
  .goal-word { display: none; }
  .goal-sub { display: block; }
  .goal b { font-size: 14px; }
  .topbar:has(.clock:not(:empty)) .goal { display: none; }
  /* a chip each: the portrait and the name, and under them the points and the cards */
  .dog { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "face name" "pts stats"; align-items: center; gap: 2px 6px; padding: 4px 5px 3px 5px; border-left-width: 3px; border-radius: 11px; }
  .dog-main, .dog-top { display: contents; }
  .dog-face { grid-area: face; }
  .dog-name { grid-area: name; }
  .dog-pts { grid-area: pts; justify-self: center; }
  .dog-stats { grid-area: stats; justify-self: end; }
  .dog-face { width: 28px; height: 28px; }
  .ring { inset: -5px; }
  .avatar { font-size: 13px; }
  .dog-main { row-gap: 1px; }
  .dog-name { font-size: 12px; line-height: 1.15; }
  .dog-pts { font-size: 13.5px; gap: 1px; }
  .dog-pts span { font-size: 9px; }
  .dog-pts small { display: none; }
  .dog-stats { gap: 6px; font-size: 11px; }
  .dog-stats .stat:nth-child(n + 2) { display: none; }
  .dog { cursor: pointer; }
  .stat i { font-size: 9.5px; }
  .dog-badges { position: absolute; top: -7px; right: -3px; flex-direction: row; gap: 2px; }
  .dog-badges .special { width: 20px; height: 18px; border-radius: 6px; font-size: 11px; background: #3b2e10; }
  .say-bubble { right: auto; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); max-width: 60vw; font-size: 12px; }
  .island { border-radius: 16px; }
  .bank { top: 6px; right: 6px; gap: 3px; padding: 4px 5px 3px; border-radius: 10px; }
  .bank-res b { font-size: 10px; }
  .bank-res.deck { margin-left: 2px; padding-left: 4px; }
  .offers { top: 6px; left: 6px; width: calc(100% - 12px); max-height: calc(100% - 12px); }
  .offers.on ~ .bank { display: none; }
  .bank-res { min-width: 19px; }
  .res-dot { width: 19px; height: 19px; border-radius: 5px; font-size: 11px; }
  .bank-res .card.back { width: 14px; height: 19px; }
  .bar { gap: 4px; padding: 4px 8px 8px; }
  .prompt { font-size: 13px; line-height: 1.3; }
  .hand { height: calc(var(--cw) * 1.4 + 8px); padding: 6px 2px 0; }
  .dice-box { justify-content: space-between; gap: 4px; }
  .die { width: calc(var(--u) * .44); height: calc(var(--u) * .44); }
  .dice { gap: 4px; }
  .roll { min-height: 32px; padding: 4px 8px; font-size: 13.5px; }
  .roll kbd, .act kbd { display: none; }
  .build-bar { gap: 4px; }
  .build-icon { width: calc(var(--u) * .4); height: calc(var(--u) * .4); }
  .build-name { font-size: 10.5px; }
  .build-cost { gap: 1px; }
  .cost { width: 11px; height: 11px; border-radius: 3px; font-size: 7px; }
  .act-icon { font-size: 13px; }
  /* the trade panel: the width of the stage, and room up over the dogs' strip (--above, from
     game.js), so all of it shows without scrolling on a 360 phone */
  .trade-panel { bottom: 0; width: 100%; max-height: calc(100% + var(--above, 0px)); padding: 4px 10px 10px; border-radius: 16px 16px 0 0; }
  .trade-side { gap: 6px; margin: 4px 0; }
  .trade-label { width: 30px; font-size: 11.5px; line-height: 1.15; }
  .trade-side .picker { gap: 2px; flex-wrap: nowrap; }
  .pick-cell { --cw: min(46px, 12vw); }
  .trade-to { gap: 5px; margin: 6px 0; }
  .trade-to > .trade-label { width: auto; }
  /* whom to offer to: the dogs by their portraits, named for a screen reader */
  .to-chip { padding: 3px 5px; }
  .to-chip .avatar { width: 28px; height: 28px; margin: 0; }
  .to-chip .avatar + span { display: none; }
  /* with four dogs or more to choose from, the row goes without its word to stay one line */
  .trade-to:has(.to-chip:nth-of-type(5)) > .trade-label { display: none; }
  .trade-go button { flex: 1; padding: 9px 10px; font-size: 13.5px; }
  .over { --top: 56px; padding-left: 10px; padding-right: 10px; }
  .over-body { padding: 14px 14px 4px; }
  .over-foot { padding: 10px 12px 12px; }
  .trophy { font-size: 40px; }
  .over-card h2 { font-size: 26px; }
  .final li { grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 7px; padding: 6px 8px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tab { font-size: 13px; }
  .rank-stats { font-size: 11px; }
  .sound-pop { top: calc(44px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
  .toasts { top: calc(46px + env(safe-area-inset-top, 0px)); }
}
/* a short window on its side, a phone above all: the island down the left at full height, the
   dogs and your hand and buttons down the right, the log a drawer */
@media (max-height: 560px) and (orientation: landscape) {
  .game { grid-template-columns: minmax(0, 1fr) clamp(300px, 42vw, 420px); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "stage dogs" "stage bar"; }
  .topbar { gap: 6px; padding: 4px 10px 2px; }
  .brand { font-size: 17px; }
  .code, .icon { height: 28px; font-size: 12px; }
  .code-word, .rules-btn { display: none; }
  .log-btn { display: inline-block; }
  .dogs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 2px 8px 0 6px; }
  .dog { gap: 6px; padding: 2px 6px 2px 4px; border-left-width: 3px; border-radius: 10px; }
  .dog-face { width: 26px; height: 26px; }
  .ring { inset: -4px; }
  .avatar { font-size: 12px; }
  .dog-main { gap: 0; }
  .dog-name { font-size: 12px; }
  .dog-pts { font-size: 13px; }
  .dog-pts span { font-size: 9px; }
  .dog-stats { gap: 5px; font-size: 10.5px; }
  .dog-stats .stat:nth-child(n + 3) { display: none; }
  .dog-badges .special { width: 18px; height: 16px; font-size: 10px; }
  .stage { margin: 2px 0 6px 8px; }
  .zoom-btn { display: block; }
  .bank { scale: .8; transform-origin: top right; }
  .log-panel {
    position: absolute; top: calc(38px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    width: min(330px, 60vw); margin: 0;
    background: #08202ef4; box-shadow: 0 20px 50px #000a;
    transform: translateX(calc(100% + 28px)); visibility: hidden; transition: transform .25s, visibility 0s .25s;
  }
  .game.show-log .log-panel { transform: none; visibility: visible; transition: transform .25s; }
  .log-panel .drawer-x { display: block; }
  .drawer { top: calc(38px + env(safe-area-inset-top, 0px)); }
  .over { --top: 50px; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .over-body { padding: 12px 18px 4px; }
  .over-foot { padding: 8px 18px 10px; }
  .trophy { font-size: 34px; }
  .over-card h2 { font-size: 24px; }
  .bar { justify-content: flex-end; gap: 2px; padding: 2px 8px 6px 6px; }
  .prompt { min-height: 0; font-size: 12px; line-height: 1.25; }
  .bar-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .hand { height: calc(var(--cw) * 1.4 + 6px); padding: 4px 2px 0; }
  .actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 4px; padding: 0; }
  .dice-box { justify-content: space-between; gap: 3px; }
  .die { width: calc(var(--u) * .42); height: calc(var(--u) * .42); }
  .roll { min-height: 28px; padding: 2px 6px; font-size: 12.5px; }
  .roll kbd { display: none; }
  .build-bar { gap: 3px; }
  .build { flex: 1; width: auto; min-width: 0; min-height: 0; padding: 3px 2px; gap: 1px; }
  .build-icon { width: calc(var(--u) * .36); height: calc(var(--u) * .36); }
  .build-name { font-size: 10px; }
  .build-cost, .build-left { display: none; }
  .turn-acts { gap: 3px; }
  .act { min-width: 0; min-height: 0; flex: 1; padding: 4px 8px; font-size: 12px; gap: 3px; }
  .trade-panel { bottom: 0; width: 100%; max-height: 100%; padding: 6px 10px 8px; }
  .trade-side { margin: 2px 0; }
  .pick-cell { --cw: 40px; padding: 2px; gap: 2px; }
  .pick-step { width: 22px; height: 22px; }
}
/* a finger has no keys to be told about */
@media (pointer: coarse) {
  kbd, .sound-hint { display: none; }
}

/* ——— a finger's targets (SPEC §8): on a phone, and wherever the pointer is a finger, everything a
   dog taps is at least 40 px each way ——— */
@media (max-width: 760px), (pointer: coarse) {
  .code, .icon { height: 40px; min-width: 40px; }
  .roll, .act { min-height: 40px; }
  .build { min-height: 44px; }
  .offer-btn { min-height: 40px; padding: 9px 14px; }
  .drawer-x { width: 40px; height: 40px; }
  .to-chip { min-height: 40px; }
  .pick-step { width: 40px; height: 40px; }
  button.pick-note { min-height: 40px; }
  .over-peek { min-height: 40px; }
  .primary, .ghost-btn, .bank-btn, .ask-row button:not(.primary) { min-height: 40px; }
  dialog .close { min-width: 40px; min-height: 40px; }
  .peek-actions button { min-height: 44px; }
  .chat-quick button, .chat-send { min-height: 40px; }
  .chat-say input, .welcome input, .linkrow input, .join-code input { min-height: 44px; }
  .linkrow button, .join-code button { min-width: 56px; min-height: 44px; }
  .sound-pop input[type="range"] { height: 40px; }
  .seg button, .stepper button { min-width: 40px; min-height: 40px; }
  .opt.toggle { min-height: 44px; }
  .add-bot, .fill-btn { min-height: 40px; }
  .chair-x { width: 40px; height: 40px; }
  .link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 6px; }
  .brand { display: inline-flex; align-items: center; min-height: 40px; }
  .tab { min-height: 44px; }
  .menu-item { min-height: 44px; }
}
/* the resource picker where five steppers of 40 px can't sit side by side (a phone upright, or on
   its side): a tap on the card adds one, its count rides on it as a badge, and the one stepper
   beneath takes one back */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .pick-cell { position: relative; padding: 4px 0 0; gap: 3px; }
  .choose .pick-cell { --cw: min(60px, 14vw); padding: 4px 0 0; }
  .pick-row { width: 100%; }
  .pick-row .pick-step:first-child { width: 100%; min-width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
  .pick-row .pick-step:last-child { display: none; }
  .pick-n { position: absolute; top: 0; right: calc(50% - var(--cw) / 2 - 6px); z-index: 2; min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #3a2208; box-shadow: 0 2px 5px #0008; font: 900 12px/20px var(--round); pointer-events: none; }
  .pick-cell:not(.some) .pick-n { display: none; }
  button.pick-note { width: 100%; min-height: 40px; padding: 0 3px; border-radius: 12px; }
  span.pick-note { font-size: 10.5px; }
}