:root {
  --bg: #0f1117; --bg-soft: #161923; --card: #1a1e2b; --card-hover: #212636; --line: #2a3042;
  --text: #e8eaf0; --muted: #969db4; --accent: #6ea8fe; --accent-warm: #f0b354;
  --good: #6ee7a8; --bad: #f08c8c; --hp: #ef5468; --vp: #f0b354; --en: #f4c542;
  --city: #2a1f3d; --bay: #16304a;
  --radius: 12px; --tabbar: 58px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button, input, select { font: inherit; color: inherit; }
#app { height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.view { display: none; flex: 1; min-height: 0; padding: 10px 12px 8px; }
.view.on { display: flex; flex-direction: column; }

/* ------------------------------------------------ tab bar (phone bottom, laptop top) */
nav.tabs { order: 2; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: #12151e; border-top: 1px solid var(--line); flex: none; }
nav.tabs button { flex: 1; background: none; border: 0; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
nav.tabs button svg { width: 22px; height: 22px; }
nav.tabs button.on { color: var(--accent); }
nav.tabs .brand { display: none; }
@media (min-width: 900px) {
  nav.tabs { order: 0; height: 52px; padding: 0 16px; border-top: 0; border-bottom: 1px solid var(--line); justify-content: flex-start; gap: 6px; }
  nav.tabs .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; margin-right: 22px; color: var(--text); text-decoration: none; }
  nav.tabs .brand img { width: 26px; height: 26px; border-radius: 6px; }
  nav.tabs button { flex: none; flex-direction: row; font-size: 14px; padding: 0 14px; gap: 8px; border-radius: 9px; height: 38px; align-self: center; }
  nav.tabs button.on { background: rgba(110,168,254,.12); }
  nav.tabs button svg { width: 18px; height: 18px; }
  .view { padding: 14px 18px 14px; }
}

/* ------------------------------------------------ common bits */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; cursor: pointer;
  font-weight: 650; transition: background .12s, transform .08s, border-color .12s; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .38; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0d1424; }
.btn.warm { background: var(--accent-warm); border-color: var(--accent-warm); color: #24180a; }
.btn.danger { background: #3a1f26; border-color: #6b2c38; color: #ffc2c9; }
.btn.ghost { background: transparent; }
.btn.primary .muted { color: rgba(13,20,36,.62); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 13.5px; border-radius: 8px; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; min-height: 40px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 14px; padding: 4px 6px; }
.seg button[aria-pressed="true"] { background: rgba(110,168,254,.14); border-color: var(--accent); color: var(--accent); }
.seg button small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; min-width: 0; }
.q { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; vertical-align: middle; flex: none; }
.pop { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 32px)); background: #232838; border: 1px solid #3a4258; border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #2f3548; border-radius: 14px; transition: background .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .4; cursor: default; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.pct { font-variant-numeric: tabular-nums; font-weight: 750; }
.num { font-variant-numeric: tabular-nums; }
.txt { font-size: 16px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: 8px; min-height: 42px; padding: 0 12px; width: 100%; min-width: 0; }
.txt.code { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.code-big { font-size: 36px; font-weight: 800; letter-spacing: .2em; padding-left: .2em; color: var(--accent-warm); font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #2a3042; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; z-index: 80; animation: up .2s; max-width: calc(100vw - 32px); }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ------------------------------------------------ dice: the real ones are black with green symbols */
.die { width: 44px; height: 44px; border-radius: 10px; border: 0; padding: 0; flex: none; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 24%, #4b4e57, #1c1d22 58%, #0d0e11);
  box-shadow: inset -2px -3px 4px rgba(0,0,0,.65), inset 2px 2px 2px rgba(255,255,255,.14), 2px 4px 6px rgba(0,0,0,.55);
  transform: rotate(var(--tilt, 0deg)); transition: transform .16s ease, box-shadow .16s; }
.die svg { width: 72%; height: 72%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.die.kept { transform: translateY(-7px) rotate(var(--tilt, 0deg)); box-shadow: inset -2px -3px 4px rgba(0,0,0,.65), inset 2px 2px 2px rgba(255,255,255,.14), 0 0 0 2px var(--accent-warm), 2px 11px 12px rgba(0,0,0,.55); }
.die.hint::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.die.kept.hint::after { bottom: -16px; }
.die.roll { animation: tumble .5s cubic-bezier(.3,.7,.4,1) both; }
.die.ghost { opacity: .22; cursor: default; }
.die.pick { outline: 2px dashed var(--accent); outline-offset: 2px; }
.die.sm { width: 30px; height: 30px; border-radius: 7px; }
@keyframes tumble { 0% { transform: translateY(-16px) rotate(-200deg) scale(.7); opacity: .2; } 60% { transform: translateY(2px) rotate(12deg) scale(1.05); opacity: 1; } 100% { transform: rotate(var(--tilt, 0deg)); } }
.dice { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 58px; padding-top: 8px; }

/* ------------------------------------------------ power cards (poker size 63 x 88, dark frame, laid out like the real ones) */
.pc { position: relative; aspect-ratio: 63 / 88; width: 100%; min-width: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden; color: #1d1b17; font: inherit;
  background: #f3ead3; border: 3px solid #211d2a; border-radius: 6px;
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.42); outline: 2px solid transparent; outline-offset: 1px;
  transition: outline-color .14s, box-shadow .14s; }
.pc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 38%, transparent 72%, rgba(0,0,0,.07)); }
.pc .nm { flex: none; background: linear-gradient(#3d3652, #262130); color: #fff; font-weight: 800; font-size: 10px; line-height: 1.12;
  padding: 3px 4px; min-height: calc(2.24em + 6px); display: flex; align-items: center; text-align: center; justify-content: center; letter-spacing: .01em; overflow: hidden; }
.pc .cst { position: absolute; left: 2px; top: calc(2.24em + 9px); font-size: 9px; z-index: 2; display: inline-flex; align-items: center; height: 17px; padding: 0 5px 0 1px;
  border-radius: 9px; background: #1b1d27; color: var(--en); border: 1px solid #6b561c; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pc .cst b { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pc .cst svg { width: 13px; height: 13px; }
.pc .art { flex: 1; min-height: 0; display: grid; place-items: center; border-bottom: 1px solid rgba(0,0,0,.25);
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.55), transparent 62%), var(--art, #c9b98f); }
.pc .art svg { width: 46%; height: auto; max-height: 80%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.art.kVP { --art: #e8b25a; } .art.kE { --art: #e7cf55; } .art.kH { --art: #e7838d; } .art.kC { --art: #b9ae96; } .art.kD { --art: #8ea6cf; }
.pc .ty { flex: none; font-size: 7.5px; letter-spacing: .12em; font-weight: 900; padding: 2px 4px; color: #fff; text-align: center; }
.pc.K .ty { background: #3f7d4a; } .pc.D .ty { background: #a2463b; }
.pc .tx { display: none; font-size: 11.5px; line-height: 1.22; padding: 3px 5px; color: #2e2a22; }
.pc.can { outline-color: rgba(110,168,254,.95); box-shadow: 0 0 0 1px rgba(110,168,254,.5), 0 0 14px rgba(110,168,254,.45), 0 3px 8px rgba(0,0,0,.42); }
.pc.dim { opacity: .55; }
.pc.deal { animation: flipin .34s ease-out .3s both; }
@keyframes flipin { 0% { transform: perspective(500px) rotateY(90deg); filter: brightness(.6); } 100% { transform: none; filter: none; } }
.pc.secret { background: #e6dcf5; }
.pc.used { background: #ece2c8; }
.pc.used::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#3d3652, #262130) top / 100% 24% no-repeat, linear-gradient(#a2463b, #a2463b) 0 70% / 100% 9% no-repeat; opacity: .8; }
.pc.big { width: 100%; max-width: 230px; margin: 0 auto; cursor: default; border-width: 5px; border-radius: 12px; }
.pc.big .nm { font-size: 17px; padding: 8px 10px; }
.pc.big .cst { top: calc(2.24em + 18px); left: 6px; height: 26px; padding: 0 8px 0 3px; border-radius: 13px; }
.pc.big .cst b { font-size: 17px; } .pc.big .cst svg { width: 20px; height: 20px; }
.pc.big .art svg { width: 34%; }
.pc.big .ty { font-size: 11px; padding: 4px 10px; }
.pc.big .tx { display: block; font-size: 14px; padding: 7px 11px 10px; }
.cost { display: inline-flex; align-items: center; gap: 1px; background: #1b1d27; color: var(--en); border: 1px solid #5e4b17; border-radius: 12px; padding: 0 7px 0 3px; height: 20px; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cost svg { width: 14px; height: 14px; }

/* small keep cards laid on the table in front of their owner */
.chipcard.mini { position: relative; flex: none; width: 46px; aspect-ratio: 63 / 88; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: #f3ead3; border: 2px solid #211d2a; border-radius: 4px; color: #1d1b17; box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.4); }
.chipcard.mini::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 40%); }
.chipcard.mini .nm { background: linear-gradient(#3d3652, #262130); color: #fff; font-size: 7px; font-weight: 800; line-height: 1.1; padding: 2px; text-align: center; min-height: 2.6em; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.chipcard.mini .art { flex: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.55), transparent 62%), var(--art, #c9b98f); }
.chipcard.mini .art svg { width: 50%; height: auto; }
.chipcard.mini .as { position: absolute; left: 0; right: 0; bottom: 0; font-size: 6.5px; font-weight: 800; text-align: center; background: rgba(33,29,42,.85); color: #fff; padding: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipcard.mini .ctr { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 900; color: #3b2a12;
  background: radial-gradient(closest-side, #e7c477 0 74%, #8a6a2c 78% 84%, #e7c477 88%); box-shadow: 0 1px 0 #5d4a2a, 0 2px 3px rgba(0,0,0,.45); }
.chipcard.mini.ab { box-shadow: 0 0 0 2px rgba(110,168,254,.9), 0 3px 6px rgba(0,0,0,.4); }
.chipcard.mini.top { background: #e6dcf5; width: 56px; }
.chipcard.mini.top .nm { flex: 1; min-height: 0; }

/* ------------------------------------------------ the table */
/* phone: rivals across the top; the Tokyo board (true 2:1) with the deck on its left and the discard pile on
   its right, the three face-up cards right under it; then the talk, dice, odds, your board and the buttons */
#game { flex: 1; min-height: 0; display: grid; gap: 6px; --side: 50px;
  margin: -10px -12px -8px; padding: 8px 10px 8px; border-radius: 0;
  grid-template-columns: var(--side) repeat(3, minmax(0, 1fr)) var(--side);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto;
  grid-template-areas: "opps opps opps opps opps" "deck board board board pile" "deck c1 c2 c3 pile" "status status status status status"
    "dice dice dice dice dice" "odds odds odds odds odds" "me me me me me" "acts acts acts acts acts"; }

/* seats: a cardboard monster board in the monster's colour, with a heart dial, a star dial and a pile of green energy cubes */
.opps { grid-area: opps; display: flex; gap: 5px; min-width: 0; }
.seat { position: relative; flex: 1 1 0; min-width: 0; display: grid; cursor: pointer; padding: 4px 4px 4px; border-radius: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 24px 24px; grid-template-areas: "av nm nm" "hp vp en"; column-gap: 3px; row-gap: 3px; align-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.28) 70%), var(--mc);
  border: 1px solid rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #24170d, 0 4px 9px rgba(0,0,0,.5);
  transition: box-shadow .15s, opacity .2s; }
.seat .mboard { display: contents; }
.seat .av { grid-area: av; width: 24px; height: 24px; display: block; justify-self: center; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.seat .av svg { width: 100%; height: 100%; display: block; }
.seat .nmx { grid-area: nm; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dial { position: relative; justify-self: center; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #f5efdf 0 56%, transparent 58%), repeating-conic-gradient(rgba(255,255,255,.55) 0 4deg, transparent 4deg 18deg), var(--ring);
  box-shadow: inset 0 -2px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5); }
.dial.hp { grid-area: hp; --ring: #b8283a; } .dial.vp { grid-area: vp; --ring: #2a5ea8; }
.dial b { font-size: 12px; font-weight: 900; color: #1d1b17; font-variant-numeric: tabular-nums; line-height: 1; position: relative; z-index: 1; }
.dial svg { position: absolute; left: -4px; top: -4px; width: 11px; height: 11px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.cubes { grid-area: en; justify-self: center; display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.cube { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: linear-gradient(135deg, rgba(220,255,220,.95), rgba(70,210,100,.85) 45%, rgba(20,120,50,.9));
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), inset 1px 1px 0 rgba(255,255,255,.5), 1px 2px 2px rgba(0,0,0,.5); }
.cube.c2 { margin-left: -4px; transform: rotate(14deg) translateY(-2px); } .cube.c3 { margin-left: -4px; transform: rotate(-9deg) translateY(1px); }
.seat .tok { position: absolute; bottom: -5px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 900; z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.45); color: #fff; }
.seat .tok.poison { right: -3px; background: radial-gradient(closest-side, #5a9a3a 0 74%, #1d3a12 78%); }
.seat .tok.shrink { right: 14px; background: radial-gradient(closest-side, #3a7ab8 0 74%, #12304a 78%); }
.where { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 10px; line-height: 1.2; font-weight: 900; letter-spacing: .06em; padding: 0 4px; border-radius: 3px; background: #7b3fd0; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.where.bay { background: #2f7fc4; }
.seat .scards { display: none; }
/* the rival's little card fan hangs off the bottom-left corner of its board, clear of the name */
.seat .ncards { position: absolute; left: 3px; bottom: -6px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 2; pointer-events: none; }
.seat .ncards i { --c: #f3ead3; width: 8px; height: 11px; border-radius: 1.5px; border: 1px solid #211d2a; background: linear-gradient(#262130 0 30%, var(--c) 30%); box-shadow: 1px 1px 1px rgba(0,0,0,.45); }
.seat .ncards i:nth-child(odd) { transform: rotate(-8deg); } .seat .ncards i:nth-child(even) { transform: rotate(7deg); }
.seat .ncards i + i { margin-left: -3px; }
.seat .ncards i.kVP { --c: #e8b25a; } .seat .ncards i.kE { --c: #e7cf55; } .seat .ncards i.kH { --c: #e7838d; } .seat .ncards i.kC { --c: #b9ae96; } .seat .ncards i.kD { --c: #8ea6cf; }
.seat .ncards b { margin-left: 2px; }
.seat.turn { box-shadow: 0 0 0 2px var(--accent-warm), 0 0 14px rgba(240,179,84,.55), 0 4px 9px rgba(0,0,0,.5); }
.seat.wait { box-shadow: 0 0 0 2px var(--accent), 0 4px 9px rgba(0,0,0,.5); }
.seat.out { opacity: .38; filter: grayscale(.7); }
.mon.hit { animation: shake .35s; }
.float { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: 15px; pointer-events: none; animation: floatup 1.1s ease-out forwards; text-shadow: 0 1px 3px #000; z-index: 5; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -26px); } }
@keyframes shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

@media (max-width: 899px) {
  .opps.many { gap: 3px; }
  .opps.many .seat { padding: 4px 2px 5px; column-gap: 0; grid-template-rows: 20px 23px; }
  .opps.many .seat .nmx { font-size: 10px; }
  .opps.many .seat .av { width: 19px; height: 19px; }
  .opps.many .dial { width: 23px; height: 23px; } .opps.many .dial b { font-size: 12px; letter-spacing: -.03em; } .opps.many .dial svg { width: 9px; height: 9px; left: -3px; top: -3px; }
  .opps.many .cube.c2, .opps.many .cube.c3 { display: none; } .opps.many .cube { width: 8px; height: 8px; } .opps.many .cubes { font-size: 12px; }
}
/* my seat at the bottom edge: my board, then my keep cards in a row */
.myarea { grid-area: me; display: flex; gap: 8px; align-items: center; min-width: 0; min-height: 66px; }
.seat.me { flex: 0 1 auto; min-width: 104px; width: 136px; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); grid-template-rows: 18px 26px; grid-template-areas: "av nm nm nm" "av hp vp en"; padding: 6px 6px; }
.seat.me .av { width: 38px; height: 38px; }
.seat.me .dial { width: 25px; height: 25px; } .seat.me .dial b { font-size: 12px; }
.seat.me .cubes { font-size: 12.5px; }
.mine { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; --mw: 46px; min-width: min(100%, calc(var(--mw) + (var(--n) - 1) * 14px + 4px)); }
.mine::-webkit-scrollbar { display: none; }
/* my keep cards overlap just enough that the whole row fits (each keeps at least a 14 px strip; tap a strip for all of them) */
.mine .chipcard.mini { width: var(--mw); }
.mine .chipcard.mini + .chipcard.mini { margin-left: max(calc(14px - var(--mw)), min(-8px, calc((100% - var(--n) * var(--mw)) / (var(--n) - 1)))); }
.tight .chipcard.mini .nm { justify-content: flex-start; text-align: left; padding-left: 3px; }
.abil { flex: none; display: flex; flex-direction: column; flex-wrap: wrap; max-height: 76px; gap: 4px; align-items: stretch; }
.abil .btn.small { flex: none; }
.mine .nocards { font-size: 12px; color: rgba(243,239,228,.55); padding-left: 2px; }

/* the Tokyo board: printed city over the bay, a standee on each taken spot */
/* the wrapper is the space the board may use; the board itself keeps the real board's 2:1 shape inside it,
   as large as fits, and everything on it scales with it (cqh = 1% of the board's height) */
.bwrap { grid-area: board; min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; }
.board { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;
  border: 3px solid #1b120b; box-shadow: inset 0 0 0 1px rgba(255,230,180,.35), 0 3px 0 #0d0906, 0 8px 18px rgba(0,0,0,.55); }
@supports (container-type: size) {
  .board { width: min(100cqw, 200cqh); height: auto; aspect-ratio: 2 / 1; container-type: size; }
}
.board .bart { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 7px 5px; min-width: 0; z-index: 1; }
.spot::before { content: ""; position: absolute; inset: 4px; border: 2px solid rgba(255,240,210,.75); border-radius: 9px; background: rgba(30,12,40,.28); box-shadow: inset 0 0 12px rgba(0,0,0,.35); pointer-events: none; }
.spot.bay::before { background: rgba(14,52,100,.45); border-color: rgba(190,225,255,.8); }
.spot .tag { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #fff;
  background: #6a2fb8; padding: 1px 6px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }
.spot.bay .tag { background: #2a6fae; }
/* the standee stands on its spot with its owner's name on a plate at its feet */
.spot .occ { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.spot .occ.enter { animation: stomp .45s ease-out both; }
.standee { position: relative; flex: none; display: block; }
.standee svg { display: block; width: 52px; height: 52px; position: relative; z-index: 1;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.standee::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 9px; border-radius: 50%; background: linear-gradient(#5b616e, #23262d); box-shadow: 0 2px 3px rgba(0,0,0,.6); }
.plate { position: relative; z-index: 2; margin-top: -7px; min-width: 0; max-width: 100%; background: rgba(12,8,16,.62); padding: 1px 6px; border-radius: 4px; color: #fff; text-align: center; }
.plate b { display: block; font-size: 12px; line-height: 1.15; overflow-wrap: normal; }
.plate span { font-size: 11.5px; color: #e9e3f2; white-space: nowrap; }
.plate svg { width: 11px; height: 11px; vertical-align: -1px; }
.spot .empty { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: rgba(255,240,210,.8); text-transform: uppercase; text-shadow: 0 1px 2px #000; }
@supports (container-type: size) {
  .spot { padding: clamp(15px, 13cqh, 34px) 7px clamp(5px, 4cqh, 16px); }
  .spot .tag { font-size: clamp(10px, 7.5cqh, 15px); top: clamp(3px, 2.5cqh, 9px); }
  .standee svg { width: clamp(26px, 46cqh, 170px); height: clamp(26px, 46cqh, 170px); }
  .plate b { font-size: clamp(11px, 9cqh, 22px); }
  .spot .empty { font-size: clamp(11px, 8cqh, 20px); }
  /* a small board: names sit on the bottom edge and the standee shrinks, so a two-line name never reaches the tag */
  @container (max-height: 100px) { .spot { justify-content: flex-end; padding-bottom: 3px; } .standee svg { width: 22px; height: 22px; } }
}
@keyframes stomp { from { transform: translateY(-24px) scale(.8); opacity: 0; } 70% { transform: translateY(2px); } to { transform: none; opacity: 1; } }

/* the market: deck, three cards, discard pile */
/* the market's pieces sit straight on the table grid: deck left of the board, the 3 cards under it, discard right */
.market { display: contents; }
.market > .mcol:first-child { grid-area: deck; }
.market > :nth-child(2) { grid-area: c1; } .market > :nth-child(3) { grid-area: c2; } .market > :nth-child(4) { grid-area: c3; }
.market > .mcol:last-child { grid-area: pile; }
.market > .pc, .market > .slot { align-self: center; }
.mcol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.deck, .dpile { --card-w: 44px; }
.kback { --back: #3b1f5e; --ink: rgba(244,197,66,.2); --back-frame: #211d2a; }
.kback::before { content: ""; position: absolute; inset: 24% 18%; z-index: 1; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f4c542' stroke='%237a5512' stroke-width='.8'%3E%3Cpath d='M5 20C6 13 9 7 14 3c-2.6 5-3.6 10-3.8 16z'/%3E%3Cpath d='M10.5 21c1-6 3.4-11 7.8-15-2 4.7-2.8 9.4-3 14.6z'/%3E%3Cpath d='M16 21.5c.9-4.2 2.6-7.8 5.2-10.5-1 3.3-1.4 6.6-1.4 10.2z'/%3E%3C/g%3E%3C/svg%3E"); }
.dpile .pc { width: var(--card-w); border-width: 2px; border-radius: 4px; }
.dpile .pc .nm { font-size: 6px; min-height: 2.4em; padding: 1px; }
.dpile .pc .cst, .dpile .pc .tx { display: none; }
.dpile .pc .ty { font-size: 5px; padding: 1px; }
.dpile .pc.used::before { display: block; }
.market .slot { width: 100%; aspect-ratio: 63 / 88; height: auto; }
.market .sweep { width: 44px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; cursor: pointer;
  font-size: 9px; font-weight: 800; color: #f3efe4; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); line-height: 1.05; }
.market .sweep svg { display: none; }
.market .sweep b { font-size: 12px; color: var(--en); }
.market .sweep b::after { content: "⚡"; font-size: 10px; }
.market .sweep:disabled { opacity: .4; cursor: default; }

/* talk on the table: status line, odds note, buttons */
.status { grid-area: status; display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 14px; min-width: 0; color: #f6f1e4; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.status .who { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .sub { color: rgba(246,241,228,.75); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.38); color: #f3efe4; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; }
#game .dice { grid-area: dice; }
.odds { grid-area: odds; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #f3efe4; background: rgba(8,6,4,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 3px 10px; min-height: 32px; cursor: pointer; min-width: 0; white-space: nowrap; overflow: hidden; }
.odds b { font-variant-numeric: tabular-nums; }
.odds .muted { color: rgba(243,239,228,.6); }
.odds .cells { display: flex; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.acts { grid-area: acts; display: flex; gap: 8px; }
.acts .btn { flex: 1; padding: 0 8px; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.acts .btn:not(.primary):not(.warm) { background: rgba(26,22,18,.85); border-color: rgba(255,255,255,.16); }
#g-side { display: none; }

/* laptop: the others round the far side; the Tokyo board (2:1, as big as fits) on the left, the deck, the
   3 cards and the discard pile to its right with the talk, dice and odds under them; your board at the bottom.
   Wide screens (1700+) add the odds + log side panel; below that the log is behind its button. */
@media (min-width: 900px) {
  #game { margin: -14px -18px; padding: 14px 18px; column-gap: 12px; row-gap: 8px;
    --side: 84px; --cw: clamp(100px, 15vh, 140px);
    grid-template-columns: minmax(0, 1fr) var(--side) repeat(3, var(--cw)) var(--side);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "opps opps opps opps opps opps" "board . . . . ." "board deck c1 c2 c3 pile" "board status status status status status"
      "board dice dice dice dice dice" "board odds odds odds odds odds" "board acts acts acts acts acts" "board . . . . ." "me . . . . ."; }
  .bwrap { margin-right: 6px; }
  .opps { justify-content: space-around; gap: 14px; align-items: flex-start; }
  .opps .seat { align-content: start; }
  .opps .seat { flex: 0 1 230px; }
  .seat { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); grid-template-rows: 20px 28px auto; grid-template-areas: "av nm nm nm" "av hp vp en" "sc sc sc sc"; padding: 7px 8px; column-gap: 5px; }
  .seat .av { width: 42px; height: 42px; }
  .seat .nmx { font-size: 13px; }
  .dial { width: 28px; height: 28px; } .dial b { font-size: 13px; } .dial svg { width: 13px; height: 13px; }
  .cubes { font-size: 13px; } .cube { width: 12px; height: 12px; }
  .seat .ncards { display: none; }
  .seat .scards { grid-area: sc; display: flex; gap: 0; margin-top: 5px; min-height: 0; }
  .seat .scards:empty { display: none; }
  /* a rival's keep cards overlap just enough to stay on its own board (tap the board for the full list) */
  .seat .scards .chipcard.mini { width: 58px; }
  .seat .scards .chipcard.mini .nm { font-size: 10px; }
  .seat .scards .chipcard.mini + .chipcard.mini { margin-left: max(-44px, min(-6px, calc((100% - var(--n) * 58px) / (var(--n) - 1)))); }
  .seat.me { width: 230px; grid-template-rows: 22px 30px; grid-template-areas: "av nm nm nm" "av hp vp en"; padding: 9px 10px; }
  .seat.me .av { width: 48px; height: 48px; }
  .seat.me .dial { width: 30px; height: 30px; } .seat.me .dial b { font-size: 14px; }
  .myarea { gap: 16px; min-height: 96px; }
  .mine { --mw: 68px; }
  .mine .chipcard.mini .nm { font-size: 10px; }
  .abil { flex-direction: row; max-height: none; order: 1; }
  .myarea .mine { order: 2; }
  .plate { padding: 3px 12px; }
  .plate span { font-size: 14px; } .plate svg { width: 14px; height: 14px; }
  .spot .tag { padding: 2px 10px; }
  .spot::before { inset: 8px; }
  .deck, .dpile { --card-w: 84px; }
  .market .sweep { width: 84px; height: 40px; flex-direction: row; gap: 5px; font-size: 12px; }
  .market .sweep b { font-size: 14px; }
  .market .pc .nm { font-size: 11.5px; }
  .market .pc .cst { top: calc(2.24em + 11px); }
  /* the rules text gets the lower half of the card; the picture shrinks to what's left */
  .market .pc .tx { display: block; font-size: clamp(10px, calc(var(--cw) * .082), 11.5px); line-height: 1.17; padding: 2px 5px 3px; flex: none; }
  .market .pc .art svg { width: 30%; max-height: 70%; }
  .dpile .pc .nm { font-size: 8px; } .dpile .pc .ty { font-size: 7px; }
  .die { width: 62px; height: 62px; border-radius: 13px; }
  .dice { gap: 14px; min-height: 80px; }
  .acts { justify-content: center; }
  .acts .btn { flex: none; min-width: 150px; }
  #game .odds { max-width: 100%; }
  ul.log { font-size: 13px; gap: 3px; }
}
@media (min-width: 1700px) {
  #game { grid-template-columns: minmax(0, 1fr) var(--side) repeat(3, var(--cw)) var(--side) 300px;
    grid-template-areas: "opps opps opps opps opps opps side" "board . . . . . side" "board deck c1 c2 c3 pile side" "board status status status status status side"
      "board dice dice dice dice dice side" "board odds odds odds odds odds side" "board acts acts acts acts acts side" "board . . . . . side" "me . . . . . side"; }
  #btn-log { display: none; }
  #g-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-height: 0;
    margin: -14px -18px -14px 0; padding: 14px 18px 14px 14px; background: var(--bg); border-left: 1px solid #000; box-shadow: -6px 0 18px rgba(0,0,0,.45); }
  #g-side .odds { background: var(--card); border-color: var(--line); color: var(--text); white-space: normal; min-height: 40px; padding: 6px 10px; }
  #g-side .odds .cells { flex-wrap: wrap; gap: 4px 12px; }
  #g-side .logbox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  ul.log { font-size: 13px; gap: 3px; }
}

/* phone held sideways: rivals across the top; board, deck, cards and pile on the left; talk, dice, odds,
   your board and the buttons on the right */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  #game { --side: 40px; column-gap: 6px; row-gap: 4px;
    grid-template-columns: var(--side) repeat(3, minmax(0, 58px)) var(--side) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "opps opps opps opps opps opps" "board board board board board status" "board board board board board dice" "board board board board board odds"
      "board board board board board ." "deck c1 c2 c3 pile me" "deck c1 c2 c3 pile acts"; }
  #game .bwrap { margin-top: 4px; }
  .deck, .dpile { --card-w: 40px; }
  .market .sweep { width: 40px; height: 34px; }
  .acts .btn, .myarea { min-height: 40px; }
  .status { min-height: 34px; } .status .icon-btn { width: 36px; height: 36px; }
  .dice { min-height: 50px; padding-top: 6px; }
  .die { width: 40px; height: 40px; }
  .myarea { min-height: 58px; }
  .seat.me .av { width: 32px; height: 32px; }
}

ul.log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
ul.log li { color: var(--muted); }
ul.log li.me { color: var(--text); }
ul.log li b { color: var(--text); font-weight: 650; }

/* ------------------------------------------------ sheets + overlays */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s; }
.sheet { width: 100%; max-width: 520px; max-height: 82dvh; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; animation: up .22s ease-out; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet > * { flex-shrink: 0; }
.sheet > .scroll { flex-shrink: 1; }
@media (min-width: 900px) { .sheet-back { align-items: center; } .sheet { border-radius: 16px; max-width: 460px; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.facepick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.facepick .die { width: 100%; height: 48px; }

/* ------------------------------------------------ setup / lobby */
.setup { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; overflow-y: auto; }
.hero { display: flex; align-items: center; gap: 12px; }
.hero img { width: 46px; height: 46px; border-radius: 10px; }
.hero h1 { margin: 0; font-size: 23px; letter-spacing: -.01em; }
.hero p { margin: 0; color: var(--muted); font-size: 13px; }
.setup .panel { display: flex; flex-direction: column; gap: 9px; }
.seats { display: flex; flex-direction: column; gap: 5px; }
.seatrow { display: flex; align-items: center; gap: 9px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 3px 6px 3px 6px; font-size: 14px; min-height: 40px; }
.seatrow svg { width: 30px; height: 30px; flex: none; }
.seats.dense { gap: 3px; }
.seats.dense .seatrow { min-height: 32px; padding: 1px 6px; }
.seats.dense .btn.small { min-height: 30px; }
.seats.dense [data-mon-pick] { height: 30px !important; }
.seats.dense .seatrow svg { width: 26px; height: 26px; }
.seatrow .nmx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.kindbtn { min-width: 98px; }
@media (min-width: 900px) {
  .setup { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .setup .hero { grid-column: 1 / 3; }
}

/* ------------------------------------------------ end of game */
.endcard { display: flex; flex-direction: column; gap: 10px; }
.endcard .win { display: flex; align-items: center; gap: 12px; }
.endcard .win svg { width: 64px; height: 64px; }
.endcard .win b { font-size: 20px; display: block; }
table.res { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.res th { text-align: right; color: var(--muted); font-weight: 600; font-size: 11px; padding: 3px 5px; }
table.res td { text-align: right; padding: 4px 5px; border-top: 1px solid #222838; }
table.res th:first-child, table.res td:first-child { text-align: left; }
.lost { font-variant-numeric: tabular-nums; font-weight: 750; }

/* ------------------------------------------------ odds tab */
.oddsv { flex: 1; min-height: 0; display: grid; gap: 10px; grid-template-rows: auto minmax(0, 1fr); max-width: 1100px; width: 100%; margin: 0 auto; }
.oddsv .panel { display: flex; flex-direction: column; gap: 8px; }
.ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13.5px; }
.ogrid div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #222838; padding: 3px 0; }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.stepper button { width: 34px; height: 34px; background: var(--bg-soft); border: 0; cursor: pointer; font-weight: 800; font-size: 16px; }
.stepper b { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .oddsv { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); }
}

/* ------------------------------------------------ cards tab */
.cardsv { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; max-width: 1100px; width: 100%; margin: 0 auto; }
.clist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.crow { display: flex; gap: 9px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; min-width: 0; cursor: pointer; }
.crow .ct { flex: 1; min-width: 0; }
.crow .cn { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.crow .cx { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .cv { text-align: right; flex: none; font-size: 10.5px; color: var(--muted); line-height: 1.15; min-width: 48px; }
.crow .cv .pct { font-size: 15px; display: block; }
.tagk { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #fff; padding: 1px 5px; border-radius: 4px; }
.tagk.K { background: #3f7d4a; } .tagk.D { background: #a2463b; }
@media (min-width: 900px) { .clist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------ settings */
.set { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.setrow { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.setrow .grow b { display: block; font-weight: 650; }
.setrow .grow span { font-size: 12.5px; color: var(--muted); }
.ver { color: #59607a; font-size: 12px; text-align: center; }
.ver a { color: #59607a; }

@media (max-width: 360px) { .opps.many .seat { grid-template-areas: "nm nm nm" "hp vp en"; } .opps.many .seat .av { display: none; } .opps.many .seat .nmx { text-align: center; } .die { width: 38px; height: 38px; } .seat.me { width: 124px; } .opps .seat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game { --side: 40px; }
  .myarea { gap: 6px; }
  .abil .btn.small { max-width: 50px; white-space: normal; line-height: 1.15; padding: 4px 4px; }
  .spot .tag { letter-spacing: 0; padding: 1px 4px; } }
@media (max-height: 640px) and (max-width: 899px) and (orientation: portrait) { #game { gap: 4px; } .dice { min-height: 50px; padding-top: 6px; } .die { width: 40px; height: 40px; } .myarea { min-height: 60px; } }

/* Sound & effects (js/fx.js): rows match the other Settings rows; the switches gate the game's own animations too */
.fx-set .fx-row { padding: 0; min-height: 46px; border-top: 0; }
.fx-set .fx-lab { font-weight: 650; }
.fx-set .seg { width: 170px; flex: none; }
.fx-noanim .die.roll, .fx-noanim .pc.deal, .fx-noanim .spot .occ, .fx-noanim .float, .fx-noanim .mon.hit,
.fx-noanim .sheet, .fx-noanim .sheet-back, .fx-noanim .toast { animation: none !important; }
.fx-fast .die.roll { animation-duration: .28s; }
.fx-fast .pc.deal { animation-duration: .18s; }
.fx-fast .spot .occ { animation-duration: .25s; }
.fx-fast .mon.hit { animation-duration: .2s; }
.fx-fast .float { animation-duration: .6s; }
.fx-set .switch { width: 48px; height: 28px; }
.fx-set .switch input { width: 0; height: 0; }
.fx-set .switch span { background: #2f3548; border-radius: 14px; }
.fx-set .switch span::after { width: 22px; height: 22px; }
.fx-set .switch input:checked + span { background: var(--accent); }
.fx-set .switch input:checked + span::after { transform: translateX(20px); }
.fx-set .seg button { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--text); font-size: 14px; padding: 4px 6px; }
.fx-set .seg button[aria-pressed="true"] { background: rgba(110,168,254,.14); border-color: var(--accent); color: var(--accent); }
.fx-set .seg { background: none; border: 0; padding: 0; gap: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q { position: relative; }
.q::before { content: ""; position: absolute; inset: -11px; }
/* long card names stay on two lines on the phone's small cards, clear of the cost badge */
@media (max-width: 899px) { .pc:not(.big) .nm { padding: 3px 2px; letter-spacing: -.01em; } .pc:not(.big) .nm.long { letter-spacing: -.03em; } }
@media (min-width: 900px) { .seat .tok { width: 21px; height: 21px; font-size: 11px; } .dial svg { left: -6px; top: -6px; } }
/* coach (css/coach.css): the first-visit offer sits above the phone's tab bar */
:root { --coach-offer-bottom: calc(var(--tabbar) + 10px); }
@media (min-width: 900px) { :root { --coach-offer-bottom: 18px; } }
/* rules sheet: the dice drawn as the real black dice */
.coach-rules .kdie { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #17191f; vertical-align: middle; margin: 1px; }
.coach-rules td:first-child { white-space: nowrap; }