:root {
  --bg: #07080b;
  --ink: #f4f6fa;
  --mut: rgba(244, 246, 250, .62);
  --glass: rgba(12, 14, 19, .5);
  --line: rgba(255, 255, 255, .1);
  --r: 22px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }

#app {
  position: absolute;
  top: env(safe-area-inset-top); right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left);
  container-type: size;
}
#board { position: absolute; inset: 0; }
@media (orientation: portrait) {
  #board {
    inset: auto; top: 0; left: 0; width: 100cqh; height: 100cqw;
    transform-origin: 0 0; transform: translateX(100cqw) rotate(90deg);
  }
}

/* ---------- Sitzplätze und Spielerfelder ---------- */
.seat {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  padding: 4px; container-type: size;
}
.panel {
  position: absolute; left: 50%; top: 50%;
  width: 100cqw; height: 100cqh;
  transform: translate(-50%, -50%) rotate(var(--rot));
  border-radius: var(--r); overflow: hidden; container-type: size;
  display: flex; flex-direction: column; isolation: isolate; background: #12141a;
}
.seat.side .panel { width: 100cqh; height: 100cqw; }
.bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: 50% 22%;
  transition: filter .6s;
}
.bg.l { right: 42%; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.bg.r { left: 42%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.panel.has-art .shade { background: linear-gradient(180deg, rgba(7,8,11,.8) 0%, rgba(7,8,11,.5) 34%, rgba(7,8,11,.58) 68%, rgba(7,8,11,.92) 100%); }
.shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,8,11,.62) 0%, rgba(7,8,11,.26) 36%, rgba(7,8,11,.48) 68%, rgba(7,8,11,.88) 100%);
}
.panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: box-shadow .3s;
}
.panel.active::after { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 46px -10px var(--accent); }
.panel.pick::after { box-shadow: inset 0 0 0 4px #fff, inset 0 0 60px -6px #fff; transition: none; }
.panel.picked::after { box-shadow: inset 0 0 0 4px #fff, inset 0 0 80px -6px var(--accent); }
.panel.picked::before {
  content: "Startspieler"; position: absolute; top: 16%; left: 50%; translate: -50% 0; z-index: 7;
  padding: .45em 1.1em; border-radius: 99px; background: #fff; color: #07080b;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: min(6cqh, 4cqw);
  animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.panel.dead .bg { filter: grayscale(1) brightness(.45); }

.head {
  display: flex; align-items: center; gap: 8px; min-height: 50px;
  padding: calc(8px + var(--pt, 0px)) calc(10px + var(--pr, 0px)) 0 calc(8px + var(--pl, 0px));
}
.who { display: flex; flex-direction: column; min-width: 0; max-width: 62%; }
.name {
  display: flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%;
  padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); flex: none; }
.name em { font-style: normal; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.16); white-space: nowrap; }
.name { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name:active { background: rgba(255,255,255,.1); }
.cmdr { padding-left: 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit { padding-left: 12px; margin-top: 1px; font-size: 9px; color: rgba(255,255,255,.6); text-shadow: 0 1px 4px rgba(0,0,0,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flags { display: flex; gap: 6px; margin-left: auto; }
.flag {
  min-width: 48px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass);
  color: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: all .2s;
}
.flag svg { width: 18px; height: 18px; }
.flag span { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.flag.on { color: #1a1405; background: linear-gradient(#ffe07a, #f0a92c); border-color: transparent; box-shadow: 0 0 24px rgba(255,200,80,.6); }
.flag.f-initiative.on { background: linear-gradient(#9fd0ff, #4f8cff); box-shadow: 0 0 24px rgba(90,150,255,.6); color: #04122b; }
.flag.f-blessing.on { background: linear-gradient(#d9c7ff, #9a72f5); box-shadow: 0 0 24px rgba(160,120,255,.6); color: #160933; }

.life { position: relative; flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.zone { position: absolute; top: 0; bottom: 0; width: 50%; }
.zone.minus { left: 0; } .zone.plus { right: 0; }
.zone.minus.down { background: linear-gradient(90deg, rgba(255,255,255,.13), transparent 85%); }
.zone.plus.down { background: linear-gradient(270deg, rgba(255,255,255,.13), transparent 85%); }
.num {
  font-size: min(88cqh, 40cqw); font-weight: 700; line-height: 1; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 6px 40px rgba(0,0,0,.7);
}
.panel.low .num { color: #ff9a8c; }
.hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: min(26cqh, 9cqw); font-weight: 200; opacity: .4; pointer-events: none; }
.hint.minus { left: 5cqw; } .hint.plus { right: 5cqw; }
.delta {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-size: min(15cqh, 7cqw); font-weight: 700; opacity: 0; transition: opacity .25s; pointer-events: none;
  padding: .12em .6em; border-radius: 99px; background: rgba(0,0,0,.45); font-variant-numeric: tabular-nums;
}
.delta.show { opacity: 1; }
.delta.neg { color: #ff8a80; } .delta.pos { color: #7dffb0; }

.strip { display: grid; gap: 6px; padding: 0 8px 8px; grid-auto-rows: var(--th, 72px); }
.tile {
  position: relative; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr; place-items: center;
  padding: 5px 4px 3px; container-type: size; min-width: 0;
}
.t-lab {
  display: flex; align-items: center; gap: 4px; max-width: calc(100% - 8px);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
  white-space: nowrap; pointer-events: none;
}
.t-lab svg { width: 12px; height: 12px; flex: none; }
.t-lab span { overflow: hidden; text-overflow: ellipsis; }
.t-val { font-size: min(58cqh, 36cqw); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.4); pointer-events: none; }
.tile.on .t-val { color: #fff; }
.tile.cmd { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.tile.cmd .t-lab { color: color-mix(in srgb, var(--c) 75%, #fff); }
.tile.cmd.on { background: color-mix(in srgb, var(--c) 24%, rgba(12,14,19,.6)); }
.tile.k-poison.on { background: rgba(30,120,60,.42); border-color: rgba(90,230,130,.5); }
.tile.k-poison.on .t-lab { color: #8dfab0; }
.tile.warn { box-shadow: inset 0 0 0 2px #ffb347; }
.tile.warn .t-val { color: #ffcf8a; }
.tz { position: absolute; top: 0; bottom: 0; width: 50%; }
.tz.minus { left: 0; } .tz.plus { right: 0; }
.tz::after { content: "−"; position: absolute; left: 7px; top: 56%; translate: 0 -50%; font-size: 16px; font-weight: 300; opacity: .4; }
.tz.plus::after { content: "+"; left: auto; right: 7px; }
.tz.down { background: rgba(255,255,255,.14); }

/* ---------- Spieler-Menü im Feld ---------- */
.pmenu {
  position: absolute; inset: 0; z-index: 7; display: none; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 14px; background: rgba(5,6,9,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pmenu.show { display: flex; animation: ovIn .2s both; }

.btn {
  min-height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.btn:active { background: rgba(255,255,255,.2); }
.btn.pri { background: #f4f6fa; color: #07080b; border-color: transparent; }
.btn.danger { color: #ff9a8c; border-color: rgba(255,120,100,.4); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 11px; }

/* ---------- Niederlage und Sieg ---------- */
.ov {
  position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4cqh; text-align: center; padding: 12px; background: rgba(5,6,9,.7);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.ov.show { display: flex; animation: ovIn .45s ease both; }
.ov .fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.ov .big { width: min(26cqh, 15cqw); height: min(26cqh, 15cqw); animation: drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.ov .big svg { width: 100%; height: 100%; }
.ov h2 { margin: 0; font-size: min(13cqh, 7.5cqw); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; animation: rise .6s .15s both; }
.ov p { margin: 0; color: var(--mut); font-size: max(12px, min(5.5cqh, 3.4cqw)); animation: rise .6s .25s both; }
.ov .btns { display: flex; gap: 10px; margin-top: 1.5cqh; animation: rise .6s .5s both; }

.c-poison { background: rgba(3,14,8,.72); }
.c-poison .big { color: #6dff9e; filter: drop-shadow(0 0 22px #2cff7a); }
.c-poison h2 { color: #8dfab0; }
.c-poison .fx::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 115%;
  background: linear-gradient(180deg, rgba(60,255,120,0), rgba(40,210,95,.5) 14%, rgba(8,70,34,.86));
  animation: flood 1.5s cubic-bezier(.2,.8,.2,1) both;
}
.c-poison .fx i {
  position: absolute; bottom: -20px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(140,255,180,.7); animation: bubble 2.6s linear infinite;
}
.c-life { background: rgba(16,3,3,.74); }
.c-life .big { color: #ff6b5e; filter: drop-shadow(0 0 22px #ff3a2a); }
.c-life h2 { color: #ff9a8c; }
.c-life .fx::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,60,40,.75), rgba(120,10,5,.2) 60%, transparent 80%);
  animation: flash 1.3s ease-out both;
}
.c-cmd { background: rgba(8,8,12,.76); }
.c-cmd .big { color: var(--killer, #fff); filter: drop-shadow(0 0 22px var(--killer, #fff)); }
.c-cmd .fx::before, .c-cmd .fx::after {
  content: ""; position: absolute; left: -30%; top: 50%; width: 160%; height: 7px;
  background: linear-gradient(90deg, transparent, #fff 45%, var(--killer, #fff) 55%, transparent);
  animation: slash .55s .05s ease-out both; --a: -22deg;
}
.c-cmd .fx::after { animation-delay: .28s; --a: 20deg; }
.c-concede .big, .c-deck .big { color: #c8d0dc; }
.c-win { background: rgba(14,10,2,.55); }
.c-win .big { color: #ffd96b; filter: drop-shadow(0 0 26px #ffb52e); animation: drop .7s cubic-bezier(.2,1.5,.4,1) both, bob 2.4s 1s ease-in-out infinite; }
.c-win h2 { color: #ffe59a; }
.c-win .fx::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220cqmax; height: 220cqmax; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255,205,90,.2) 0 9deg, transparent 9deg 18deg);
  animation: spin 26s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%);
}

@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drop { from { transform: translateY(-40%) scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flood { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bubble { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-120cqh) scale(1.3); opacity: 0; } }
@keyframes flash { from { opacity: 1; transform: scale(1.4); } to { opacity: .35; transform: scale(1); } }
@keyframes slash { from { transform: rotate(var(--a)) translateX(-110%); opacity: 1; } to { transform: rotate(var(--a)) translateX(110%); opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 50% { transform: translateY(-6%); } }
@keyframes shake { 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.panel.justdied { animation: shake .4s; }

/* ---------- Mittelleiste ---------- */
#hub {
  position: absolute; left: calc(var(--hx) * 1%); top: calc(var(--hy) * 1%); transform: translate(-50%, -50%); z-index: 20;
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 28px;
  background: rgba(14,16,22,.84); border: 1px solid rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0,0,0,.55);
}
#hub.v { flex-direction: column; }
#hub.top { top: 34px; }
.chip {
  height: 42px; min-width: 42px; padding: 0 11px; border-radius: 99px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip svg { width: 21px; height: 21px; }
.chip.down, .chip:active { background: rgba(255,255,255,.15); }
.chip.dim { color: rgba(255,255,255,.45); }
.chip.day { color: #ffd96b; } .chip.night { color: #9db8ff; }

/* ---------- Menü ---------- */
#sheet {
  position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(3,4,6,.66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: ovIn .2s both;
}
#sheet[hidden] { display: none; }
.card {
  width: min(880px, 100%); height: min(760px, 100%); display: flex; flex-direction: column;
  background: #111319; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.tabs { display: flex; align-items: center; gap: 4px; padding: 10px 10px 0; }
.tab {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; background: transparent;
  color: var(--mut); font-weight: 600; font-size: 15px;
}
.tab.on { background: rgba(255,255,255,.1); color: var(--ink); }
.tabs .close { margin-left: auto; }
.body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.body h3 { margin: 10px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-weight: 700; }
.body p.note { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.45; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.box { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.opt .lab { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.opt .lab small { display: block; font-weight: 400; color: var(--mut); font-size: 12.5px; margin-top: 2px; }
.sw { width: 52px; height: 32px; border-radius: 99px; border: 0; background: rgba(255,255,255,.16); position: relative; flex: none; transition: background .2s; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw.on { background: #35c26b; } .sw.on::after { transform: translateX(20px); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: rgba(255,255,255,.07); flex-wrap: wrap; }
.seg button { min-height: 40px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; color: var(--mut); font-weight: 600; font-size: 15px; }
.seg button.on { background: #f4f6fa; color: #07080b; }
.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); font-size: 20px; padding: 0; }
.step b { min-width: 46px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 22px; }

input[type=text], input[type=search] {
  -webkit-user-select: text; user-select: text; min-height: 44px; padding: 0 14px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); color: var(--ink); font: inherit; font-size: 16px; min-width: 0;
}
input:focus { outline: 2px solid #6aa5ff; outline-offset: 1px; }
.pcard .sw-bg { width: 74px; height: 52px; border-radius: 12px; background-size: cover; background-position: 50% 22%; flex: none; border: 1px solid rgba(255,255,255,.15); }
.mana { display: flex; gap: 6px; }
.mana button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; background: var(--c); opacity: .3; padding: 0; font-size: 12px; font-weight: 800; color: rgba(0,0,0,.6); }
.mana button.on { opacity: 1; border-color: #fff; }

.lays { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lay { border: 2px solid transparent; border-radius: 18px; background: rgba(255,255,255,.05); padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.lay.on { border-color: #f4f6fa; color: var(--ink); }
.lp { position: relative; aspect-ratio: 4 / 3; width: 100%; }
.lp div { position: absolute; padding: 2px; }
.lp div i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 7px; background: var(--c); font-style: normal; color: #07080b; font-weight: 800; font-size: 13px; }
.lp div i span { display: block; rotate: var(--rot); line-height: 1; }

.arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.art { border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #000; position: relative; aspect-ratio: 4 / 3; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11px; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dice { font-size: 54px; font-weight: 800; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 12px; }

/* Menü im Querformat: Reiter als Seitenleiste, Inhalt nutzt die Breite */
@media (orientation: landscape) and (min-width: 900px) {
  .card { flex-direction: row; width: min(1160px, 100%); height: min(780px, 100%); }
  .tabs { flex-direction: column; align-items: stretch; width: 200px; flex: none; padding: 14px 10px; gap: 6px; border-right: 1px solid rgba(255,255,255,.08); }
  .tab { text-align: left; min-height: 48px; }
  .tabs .close { margin: auto 0 0; }
  .body { padding: 20px 22px 26px; }
}

/* Sitzplan im Spieler-Reiter */
.seatbox { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.seatmap { width: min(340px, 100%); flex: none; }
.seatmap div button { display: grid; place-items: center; width: 100%; height: 100%; padding: 2px; border: 3px solid transparent; border-radius: 10px; background: var(--c); color: #07080b; overflow: hidden; }
.seatmap div button.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 22px var(--c); }
.seatmap div button b { display: flex; flex-direction: column; align-items: center; gap: 2px; rotate: var(--rot); font-size: 13px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.seatmap div button small { font-size: 9px; font-weight: 700; opacity: .7; letter-spacing: .04em; }
.seatside { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.seatno { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }