@charset "UTF-8";
:root {
  color-scheme:dark;
  --ink:#f4ead3;
  --muted:#c4bfa9;
  --gold:#d8b56e;
  --gold-bright:#f9db8b;
  --felt:#214b42;
  --dark:#0d211f;
  --serif:"Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei",sans-serif;
  --card-w:112px;
  --card-ratio:500 / 706;
  --unit-back:url("art/card-back-unit-restored-v2.png");
  --land-back:url("art/card-back-land-original-v2.png");
  --turn:#f9db8b;
  --respond:#a9ddf4
}

* {
  box-sizing:border-box
}

html { overflow:clip }

body {
  margin:0;
  background:#101b19;
  color:var(--ink);
  font:14px var(--sans);
  overflow:clip
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:disabled {
  cursor:default;
  opacity:.4
}

button:focus-visible {
  outline:3px solid #ffe5a0;
  outline-offset:4px
}

button {
  touch-action:manipulation
}

h1,h2,p {
  margin:0
}

.game-shell {
  min-height:100svh;
  background:radial-gradient(ellipse at 50% 0,#2f3e32 0,transparent 55%),repeating-linear-gradient(92deg,#181e18 0,#181e18 3px,#1c221b 4px,#151d18 12px)
}

.masthead {
  height:88px;
  padding:16px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #78634444;
  background:linear-gradient(#101c1ae6,#101c1a88);
  position:relative;
  z-index:5
}

.wordmark {
  display:flex;
  gap:13px;
  align-items:center
}

.seal {
  display:grid;
  place-items:center;
  font:30px var(--serif);
  color:#f6d59c;
  background:#6b352a;
  border:1px solid #bd8c58;
  border-radius:8px 3px;
  box-shadow:0 3px 9px #0006;
  width:48px;
  height:48px;
  transform:rotate(-4deg)
}

h1 {
  font:700 26px var(--serif);
  letter-spacing:5px;
  color:#f4e2b9
}

.wordmark p {
  font-size:11px;
  color:#b8b9a6;
  letter-spacing:1.8px;
  margin-top:6px
}

.table-controls {
  display:flex;
  align-items:center;
  gap:12px
}

.seat-switch {
  display:flex;
  background:#0d1a17;
  border:1px solid #8b79514d;
  border-radius:30px;
  padding:4px
}

.seat-switch button {
  min-height:34px;
  border:0;
  border-radius:30px;
  padding:0 16px;
  background:transparent;
  color:#c7c7b4
}

.seat-switch button[aria-pressed=true] {
  background:#b89558;
  color:#18231b;
  box-shadow:0 2px 5px #0005;
  font-weight:bold
}

.quiet-button {
  background:none;
  border:1px solid #b5996244;
  border-radius:5px;
  padding:10px 13px;
  min-height:40px;
  color:#d9ceb5
}

.quiet-button:hover {
  background:#b9a2761a;
  border-color:#b59962
}

.table-stage {
  height:calc(100svh - 88px);
  min-height:680px;
  max-height:1100px;
  position:relative;
  max-width:1660px;
  margin:auto;
  isolation:isolate
}

.table-wood {
  position:absolute;
  inset:20px 32px 70px;
  border-radius:47% 47% 43% 43%/38% 38% 47% 47%;
  background:repeating-linear-gradient(8deg,#61412c 0px,#6b4a33 2px,#513722 4px,#67462c 9px);
  box-shadow:0 25px 35px #000a,0 0 0 3px #1d1712,inset 0 3px 2px #cfa16c55,inset 0 -12px 7px #241b14;
  padding:21px;
  z-index:-2
}

.table-felt {
  width:100%;
  height:100%;
  border-radius:inherit;
  position:relative;
  background:radial-gradient(ellipse at 50% 40%,#42715a22,transparent 60%),repeating-radial-gradient(ellipse at 30% 50%,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(145deg,#1b4039,#234e43 45%,#153a32);
  border:3px solid #b98c4f;
  box-shadow:inset 0 0 0 3px #18382e,inset 0 0 0 4px #b19b5b44,inset 0 0 70px 22px #051b1788,0 0 0 3px #30271b,0 3px 10px #0007
}

.table-felt:after {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid #bfa77635;
  border-radius:inherit
}

.table-engraving {
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  text-align:center;
  font:12px Georgia,serif;
  letter-spacing:8px;
  color:#b9ba8829;
  white-space:nowrap;
  z-index:-1
}

.table-engraving span {
  display:block;
  font:11px var(--serif);
  letter-spacing:10px;
  margin-top:160px
}

.round-banner {
  position:absolute;
  left:50%;
  top:17px;
  transform:translateX(-50%);
  display:flex;
  gap:11px;
  align-items:center;
  white-space:nowrap;
  padding:9px 24px;
  background:linear-gradient(90deg,transparent,#0d2623e6 15% 85%,transparent);
  font-size:12px;
  color:#ddd0b1;
  z-index:2
}

.round-banner strong {
  font-weight:500;
  letter-spacing:1px
}

.round-banner>span:first-child {
  color:var(--gold)
}

.edition {
  font-size:10px;
  opacity:.65;
  border-left:1px solid #ac9a6a66;
  padding-left:11px
}

.seat {
  position:absolute;
  z-index:3;
  width:270px;
  transform:translate(-50%,-50%);
  text-align:center
}

.seat-1 {
  left:25%;
  top:24%
}

.seat-2 {
  left:75%;
  top:24%
}

.seat-human {
  left:50%;
  top:74%;
  width:300px
}

.two-player .seat-1 {
  left:50%;
  top:19%
}

.seat-heading {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-align:left;
  position:relative
}

.portrait {
  width:60px;
  height:60px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:50%;
  border:3px solid #b8a071;
  box-shadow:0 4px 10px #0008,0 0 0 4px #19352c;
  filter:sepia(.15)
}

.seat.is-turn .portrait {
  border-color:var(--turn);
  box-shadow:0 0 0 4px #a4823c66,0 0 24px #f2ce7366
}

.seat.is-responding .portrait {
  border-color:var(--respond);
  box-shadow:0 0 0 4px #4d9ab666,0 0 22px #91d8f466
}

.seat.is-turn .seat-heading:before,.seat.is-responding .seat-heading:before {
  content:"";
  position:absolute;
  inset:-8px -10px;
  border-bottom:3px solid var(--turn);
  border-radius:40%;
  box-shadow:0 8px 16px -9px var(--turn);
  pointer-events:none
}

.seat.is-responding .seat-heading:before {
  border-color:var(--respond);
  box-shadow:0 8px 16px -9px var(--respond)
}

.seat-status {
  display:block;
  min-height:17px;
  margin-top:4px;
  color:#d6d4bf;
  font:11px/1.4 var(--sans);
  letter-spacing:0
}

.is-turn .seat-status { color:var(--turn); font-weight:700 }
.is-responding .seat-status { color:var(--respond); font-weight:700 }

.seat-name {
  font:700 17px var(--serif);
  letter-spacing:1px;
  white-space:nowrap
}

.seat-score {
  font-size:11px;
  color:#d2cbb1;
  margin-top:5px;
  white-space:nowrap
}

.seat-score strong {
  font:700 20px Georgia,serif;
  color:#f2d797;
  margin-right:3px
}

.seat-inventory {
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  margin:8px auto 0;
  color:#e7dabb;
  font:11px/1.25 var(--sans);
  white-space:nowrap
}

.card-pile {
  --pile-art:var(--unit-back);
  --pile-card-w:22px;
  --pile-card-h:calc(1.4 * var(--pile-card-w));
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}

.pile-cards {
  position:relative;
  flex:none;
  width:calc(var(--pile-card-w) + 4px);
  height:calc(var(--pile-card-h) + 4px);
  rotate:-5deg
}

.card-pile[data-pile$="discard"] .pile-cards { rotate:5deg }

.pile-cards i,
.card-pile.is-empty .pile-cards::before {
  position:absolute;
  inset:0 auto auto 0;
  width:var(--pile-card-w);
  height:var(--pile-card-h);
  border-radius:3px
}

.pile-cards i {
  --layer:0;
  z-index:calc(3 - var(--layer));
  transform:translate(calc(var(--layer) * 2px),calc(var(--layer) * 2px));
  opacity:clamp(0,calc(var(--pile-depth,1) - var(--layer)),1);
  background:#3b2b23 var(--pile-art) center / cover no-repeat;
  box-shadow:0 1px 3px #0009,0 0 0 1px #d6b17170;
  filter:brightness(calc(1 - .18 * var(--layer)))
}

.pile-cards i:nth-child(2) { --layer:1 }
.pile-cards i:nth-child(3) { --layer:2 }

.card-pile.is-empty .pile-cards i { display:none }

.card-pile.is-empty .pile-cards::before {
  content:"";
  border:1px dashed #d8b56e80;
  background:#102a2366
}

.pile-label b { color:#ffe1a0; font-variant-numeric:tabular-nums }

.opponent-hand {
  height:74px;
  position:relative;
  margin:12px auto 0;
  width:190px
}

.opponent-hand .card-back {
  position:absolute;
  width:48px;
  height:67px;
  left:calc(50% + var(--x));
  top:var(--y);
  transform:translateX(-50%) rotate(var(--r));
  background:#3b2b23 var(--unit-back) center / cover no-repeat;
  border-radius:4px;
  box-shadow:0 3px 7px #0009,0 0 0 1px #d6b17170
}

.seat-1 .opponent-hand {
  transform:rotate(-13deg)
}

.seat-2 .opponent-hand {
  transform:rotate(13deg)
}

.two-player .seat-1 .opponent-hand {
  transform:none
}

.owned-lands {
  display:flex;
  justify-content:center;
  gap:4px;
  min-height:25px;
  margin-top:6px
}

.owned-land {
  display:block;
  flex:none;
  width:28px;
  aspect-ratio:var(--card-ratio);
  position:relative;
  padding:0;
  border:0;
  background:none
}

.owned-land > span:not(.card-face) {
  position:absolute;
  inset:auto 0 1px;
  border-radius:2px;
  background:#172a20e6;
  font-size:7px;
  color:#fff6de;
  white-space:nowrap
}

.tableau-slot {
  position:absolute;
  top:68px;
  width:50px;
  aspect-ratio:var(--card-ratio);
  display:grid;
  place-items:center;
  right:calc(50% - 172px);
  transform:rotate(7deg)
}

.tableau-slot.empty {
  border:1px dashed #c0ba8255;
  border-radius:5px;
  color:#c4c5a177;
  font-size:10px;
  writing-mode:vertical-rl;
  letter-spacing:3px
}

.tableau-card {
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:none
}

.seat-human .portrait {
  width:49px;
  height:49px
}

.seat-human .seat-heading {
  background:#123328f0;
  border:1px solid #ad975c77;
  padding:6px 18px 6px 8px;
  border-radius:40px;
  box-shadow:0 5px 15px #0004
}

.seat-human .seat-name {
  font-size:15px
}

.seat-human .seat-score {
  margin-top:2px
}

.seat-human .seat-score strong {
  font-size:16px
}

.seat-human .seat-inventory {
  position:absolute;
  left:0;
  top:17px;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0
}

.seat-human .owned-lands {
  position:absolute;
  left:100%;
  top:8px;
  justify-content:flex-start;
  max-width:150px;
  flex-wrap:wrap;
  width:150px;
  margin-left:8px
}

.seat-human .tableau-slot {
  top:-1px;
  right:calc(100% + 9px);
  width:46px;
  height:65px
}

.arena {
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  width:520px;
  height:220px
}

.arena-ring {
  position:absolute;
  inset:-46px 3px -40px;
  border-radius:50%;
  border:1px solid #d6bc7430;
  box-shadow:0 0 0 12px #d6bc7405,inset 0 0 0 14px #d6bc7404
}

.arena-ring:before,.arena-ring:after {
  content:"✧";
  position:absolute;
  top:47%;
  color:#cbb87966;
  font-size:25px
}

.arena-ring:before {
  left:-14px
}

.arena-ring:after {
  right:-14px
}

.land-zone {
  position:absolute;
  left:92px;
  top:7px;
  width:125px;
  text-align:center
}

.land-caption {
  font:11px var(--sans);
  letter-spacing:3px;
  color:#d5c490;
  margin-bottom:7px
}

.land-supply {
  position:absolute;
  top:24px;
  right:calc(100% + 15px);
  display:grid;
  gap:8px;
  color:#e7dabb;
  font:11px/1.25 var(--sans)
}

.land-pile {
  --pile-art:var(--land-back);
  --pile-card-w:30px;
  flex-direction:column;
  gap:3px
}

.land-card {
  display:block;
  width:100%;
  transform:rotate(-7deg);
  position:relative;
  padding:0;
  border:0;
  background:none
}

.contest-zone {
  position:absolute;
  left:260px;
  top:12px;
  width:150px;
  text-align:center
}

.contest-label {
  font-size:10px;
  color:#c7c6a9;
  letter-spacing:2px;
  margin-bottom:9px
}

.contest-empty {
  height:161px;
  border:1px dashed #d2bd7444;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#d2d4b3aa;
  font:14px var(--serif);
  gap:10px;
  transform:rotate(5deg)
}

.contest-empty span {
  font:10px var(--sans);
  color:#c8c5a877;
  letter-spacing:2px
}

.played-card {
  width:112px;
  margin:auto;
  transform:rotate(5deg);
  position:relative
}

.played-by {
  font-size:10px;
  color:#ead8a8;
  margin-top:11px;
  white-space:nowrap
}

.lead-tag {
  display:inline-block;
  background:#5e673d;
  border:1px solid #c5ad6e;
  color:#f9e2a8;
  font-size:9px;
  padding:2px 7px;
  border-radius:3px;
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap
}

.table-message {
  position:absolute;
  top:64%;
  left:50%;
  transform:translateX(-50%);
  width:min(620px,76%);
  max-width:90%;
  z-index:2;
  font-size:12px;
  line-height:1.5;
  color:#e2dbc3;
  text-align:center;
  pointer-events:none
}

.event-note {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.event-note + .event-note { color:#c6cbb7; font-size:11px }
.table-message.is-warning { color:#ffcc94 }

.leader-banner {
  position:relative;
  left:50%;
  transform:translateX(-50%) rotate(-5deg);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:4px;
  width:max-content;
  margin-top:4px;
  padding:3px 6px;
  border:1px solid #c2a55e99;
  border-radius:6px;
  background:#102e27f2;
  color:#eee3bf;
  font-size:13px;
  box-shadow:0 4px 12px #0004;
  white-space:nowrap
}

.leader-banner strong { color:#ffe2a0; font-size:15px }
.leader-banner b { color:#ffe2a0; font:700 15px Georgia,serif }
.leader-banner[hidden] { display:none }

.round-stake {
  display:block;
  margin-top:10px;
  padding:5px 8px;
  border:1px solid #dbc77777;
  border-radius:4px;
  background:#18382ef5;
  color:#f5e5b0;
  font:12px/1.45 var(--sans);
  letter-spacing:0
}

.round-stake.is-threat { background:#573322; border-color:#e6b37e; color:#ffe0b4 }
.round-stake:empty { display:none }

.unit-card {
  position:relative;
  width:var(--card-w);
  border:0;
  padding:0;
  background:none
}

.played-card .unit-card {
  width:100%
}

.card-face {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:var(--card-ratio);
  filter:drop-shadow(0 3px 5px #0007)
}

.card-face-art,.card-face-value {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none
}

.human-area {
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:min(850px,82%);
  z-index:5
}

.hand-area {
  position:relative;
  height:214px
}

.hand-label {
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:2px;
  color:#d3c7a8;
  display:flex;
  gap:8px;
  white-space:nowrap
}

.hand {
  height:calc(100% - 10px);
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding:0 30px 44px;
  width:100%;
  perspective:800px
}

.hand-card {
  --intent:#d7bf85;
  margin-left:var(--overlap,-26px);
  flex:0 0 var(--card-w);
  display:block;
  border-radius:5px;
  appearance:none;
  transform:translateY(var(--lift)) rotate(var(--rotation));
  transform-origin:50% 110%;
  transition:transform .2s ease,box-shadow .2s ease;
  z-index:var(--order);
  cursor:pointer;
  user-select:none
}

.hand-card:first-child {
  margin-left:0
}

.hand-card.selected,.hand-card:focus-visible {
  transform:translateY(-23px) rotate(0deg);
  z-index:30;
  box-shadow:0 9px 18px #000b,0 0 0 2px #ffe3a3
}

.hand-card.selected {
  box-shadow:0 12px 25px #0009,0 0 0 2px #f4d892,0 0 25px #edc67355
}

.hand-card:hover {
  z-index:30;
  box-shadow:0 9px 18px #000b,0 0 0 2px #ffe3a3
}

/* Intent describes an available play, not whether a lower-power play is legal. */
.hand-card[data-intent=open] { --intent:#a7d7a0 }
.hand-card[data-intent=cover] { --intent:#ffda80 }
.hand-card[data-intent=combo] { --intent:#9cdbe0 }
.hand-card[data-intent=response] { --intent:#a9ddf4 }
.hand-card[data-intent=under] { --intent:#dfbb92 }
.hand-card[data-intent=blocked] { --intent:#c1bbb0 }
.hand-intent {
  display:block;
  position:absolute;
  inset:calc(100% + 2px) 0 auto;
  padding:3px 2px;
  border-radius:3px;
  background:#203c31;
  border-top:2px solid var(--intent);
  color:#fff1ce;
  font:700 11px/1.25 var(--sans);
  text-align:center;
  white-space:nowrap
}

.hand-card[data-actionable=false] .hand-intent { color:#d4d2c2; border-top-color:#aaa795 }
.hand-card[data-actionable=false] { cursor:default }
.hand-card[data-intent=blocked] .card-face { filter:saturate(.55) brightness(.9) }
.hand-card[data-actionable=true][data-intent=cover] .hand-intent,
.hand-card[data-actionable=true][data-intent=combo] .hand-intent { box-shadow:0 0 8px var(--intent) }

.hand-card[draggable=true]:active {
  cursor:grabbing
}

.action-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:10px 12px 7px;
  position:relative;
  border-top:1px solid #d7c39133;
  background:linear-gradient(90deg,transparent,#101e18e6 15% 85%,transparent);
  min-height:60px
}

.action-bar p {
  font-size:11px;
  color:#d2c7aa;
  max-width:130px
}

.action-buttons {
  display:flex;
  gap:8px
}

.action-buttons button {
  min-height:40px;
  border-radius:5px;
  padding:9px 15px;
  white-space:nowrap;
  font-size:12px
}

.play-button {
  border:1px solid #f7dc97;
  background:linear-gradient(#e9c882,#be934e);
  box-shadow:0 3px 0 #735327,0 5px 12px #0004;
  color:#263529;
  font-weight:700;
  border-radius:5px;
  padding:12px 26px;
  min-height:44px
}

.play-button:hover:enabled {
  filter:brightness(1.12)
}

.play-button span {
  font-size:15px;
  margin-left:6px
}

.secondary-action {
  border:1px solid #bca87588;
  background:#324c3b;
  color:#f0dfba
}

.skip-button {
  background:#182f27;
  border:1px solid #bca87555;
  color:#d4c8aa
}

.secondary-action:hover:enabled,.skip-button:hover:enabled {
  background:#466449
}

.journal-button {
  position:absolute;
  bottom:26px;
  left:32px;
  background:transparent;
  border:0;
  color:#c4bd9e;
  font-size:10px;
  letter-spacing:1px;
  padding:10px;
  z-index:6
}

.journal-button span {
  font-size:16px;
  vertical-align:-1px;
  margin-right:4px
}

.offline-note {
  position:absolute;
  right:34px;
  bottom:31px;
  font-size:9px;
  letter-spacing:2px;
  color:#a9a88f
}

.card-flight {
  position:fixed;
  z-index:100;
  pointer-events:none;
  transform-origin:center;
  perspective:640px
}

.flight-turner {
  position:absolute;
  inset:0;
  transform-style:preserve-3d
}

.flight-face {
  position:absolute;
  inset:0;
  backface-visibility:hidden
}

.flight-back {
  --flight-art:var(--unit-back);
  background:var(--flight-art) center / contain no-repeat;
  border-radius:6px;
  box-shadow:0 8px 22px #0009,0 0 0 1px #d6b17170
}

.card-flight.is-land .flight-back { --flight-art:var(--land-back) }
.flight-front { transform:rotateY(180deg) }

.flight-front > :is(.unit-card,.land-card,.tableau-card,.tableau-contents,.card-face),
.flight-front .card-face {
  width:100%;
  height:100%;
  margin:0;
  transform:none
}

.flight-front .tableau-contents .card-face { flex:none }
.flight-front .hand-intent,
.flight-front .round-stake,
.flight-front .card-rules,
.flight-front .tableau-contents > span:not(.card-face) { display:none }

.arena.drop-ready .arena-ring {
  border-color:#f4d484;
  box-shadow:0 0 30px #e8c66a66,inset 0 0 40px #e8c66a22
}

.drop-preview {
  position:absolute;
  display:grid;
  gap:3px;
  padding:8px 12px;
  border:1px solid #b5c0a2;
  border-radius:6px;
  background:#112d26f5;
  box-shadow:0 4px 14px #0006;
  color:#e8e8d2;
  font:13px/1.4 var(--sans);
  pointer-events:none;
  z-index:8
}
.drop-preview strong { color:#fce4a7; font-size:14px }
.drop-preview > strong,.drop-preview > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.drop-preview[hidden] { display:none }
#play-preview { bottom:4px; left:50%; transform:translateX(-50%); width:92%; text-align:center }
#tableau-preview { top:calc(100% + 5px); left:0; width:180px; max-width:42vw }
.drop-ready .drop-preview { border-color:#f6d787; color:#fff0ca }

.info-dialog,.result-dialog {
  color:#ece1c6;
  background:radial-gradient(ellipse at top,#375144,#192e26 70%);
  border:1px solid #c0a66d;
  border-radius:12px;
  box-shadow:0 30px 100px #000b;
  padding:32px;
  width:min(520px,calc(100% - 32px));
  max-height:85svh
}

.info-dialog::backdrop,.result-dialog::backdrop {
  background:#071210c9;
  backdrop-filter:blur(6px)
}

.dialog-close {
  position:absolute;
  right:10px;
  top:7px;
  background:none;
  border:0;
  color:#daccaa;
  font-size:28px;
  width:40px;
  height:40px
}

.info-dialog h2 {
  font:700 26px var(--serif);
  margin-bottom:20px;
  color:#f0d59c
}

.info-dialog p {
  font-size:13px;
  line-height:1.9;
  margin:12px 0;
  color:#dbd4ba
}

.info-dialog h3 {
  font:700 17px var(--serif);
  color:#ead2a1;
  margin:23px 0 5px
}

.info-dialog .note {
  font-size:11px;
  color:#babaa3
}

.rule-number {
  font:italic 23px Georgia,serif;
  color:#ad925b;
  margin-right:8px
}

.journal-list {
  margin:0;
  padding:0 0 0 19px
}

.journal-list li {
  font-size:12px;
  line-height:1.8;
  padding:8px 0;
  border-bottom:1px solid #c7b78222;
  color:#ded8c1
}

.detail-face {
  width:min(100%,420px);
  margin-inline:auto
}

.detail-power {
  display:inline-block;
  font:bold 25px Georgia,serif;
  color:#efcb7c;
  margin-left:10px
}

.result-dialog {
  text-align:center;
  max-width:470px;
  padding:32px 34px
}

.result-flourish {
  font-size:46px;
  color:#e7c474;
  text-shadow:0 0 30px #eec56888
}

.eyebrow {
  font-size:10px;
  letter-spacing:4px;
  color:#c6bc9c;
  margin-top:8px
}

.result-dialog h2 {
  font:700 34px var(--serif);
  color:#ffe1a0;
  margin:15px 0
}

.result-dialog>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.8;
  color:#d4cfb8
}

.result-score {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid #b99e5f33;
  font-size:13px
}

.result-score strong {
  font:24px Georgia,serif;
  color:#f2d18e
}

.result-dialog .play-button {
  margin-top:24px;
  width:100%
}

.result-dismiss {
  margin-top:13px;
  background:none;
  border:0;
  color:#c6bfa5;
  font-size:11px;
  padding:8px
}

.fatal-error {
  text-align:center;
  padding:20vh 20px;
  line-height:2
}

.fatal-error h2 {
  font:26px var(--serif);
  color:var(--gold)
}

@media(min-width:1450px) {
  :root {
    --card-w:122px
  }

  .hand-area {
    height:228px
  }

  .human-area {
    bottom:13px
  }

  .seat-human {
    top:72%
  }

  .table-message {
    top:61%
  }

  .arena {
    top:43%
  }

}

@media(max-width:1100px) {
  .masthead {
    padding:14px 23px
  }

  .table-wood {
    inset:25px 17px 80px
  }


  .arena {
    width:440px;
    left:48%;
    top:44%;
    transform:translate(-50%,-50%) scale(.92)
  }

  .land-zone {
    left:55px
  }

  .contest-zone {
    left:225px
  }

  .seat-1 {
    left:24%
  }

  .seat-2 {
    left:76%
  }

  .human-area {
    width:80%
  }

  .table-message {
    top:63%;
    font-size:11px
  }

  .seat-human {
    top:72%
  }

  .offline-note {
    display:none
  }

  .journal-button {
    left:15px;
    bottom:27px
  }

  .action-bar {
    gap:10px
  }

  .action-buttons button {
    padding:9px 11px
  }

  .action-bar p {
    max-width:100px;
    font-size:10px
  }

}

@media(max-width:760px) {
  .masthead {
    height:76px;
    padding:12px 17px;
    gap:10px
  }

  .seal {
    width:37px;
    height:39px;
    font-size:25px
  }

  .wordmark {
    gap:9px
  }

  h1 {
    font-size:21px;
    letter-spacing:3px
  }

  .wordmark p {
    font-size:8px;
    letter-spacing:1px
  }

  .table-controls {
    gap:7px
  }

  .quiet-button {
    font-size:11px;
    padding:8px
  }

  .seat-switch {
    padding:3px
  }

  .seat-switch button {
    font-size:10px;
    padding:0 10px;
    min-height:30px
  }

  .table-stage {
    height:calc(100svh - 76px);
    min-height:670px
  }

  .table-wood {
    inset:20px 8px 73px;
    padding:13px
  }

  .table-felt {
    border-width:2px
  }

  .round-banner {
    top:11px;
    padding:8px 15px;
    font-size:10px;
    gap:8px
  }

  .edition {
    font-size:8px
  }

  .seat {
    width:200px
  }

  .seat-1 {
    left:23%;
    top:23%
  }

  .seat-2 {
    left:77%;
    top:23%
  }

  .portrait {
    width:45px;
    height:45px;
    border-width:2px
  }

  .seat-name {
    font-size:13px
  }

  .seat-score {
    font-size:9px;
    margin-top:3px
  }

  .seat-score strong {
    font-size:17px
  }

  .seat-heading {
    gap:7px
  }


  .seat-inventory {
    gap:8px;
    font-size:10px;
    margin-top:5px
  }

  .seat-inventory .card-pile { --pile-card-w:19px; gap:4px }

  .land-supply { font-size:12px }

  .opponent-hand {
    height:61px;
    width:155px;
    margin-top:9px
  }

  .opponent-hand .card-back {
    width:39px;
    height:55px
  }

  .tableau-slot {
    right:calc(50% - 113px);
    top:60px;
    width:36px
  }

  .owned-lands {
    min-height:17px;
    margin-top:4px;
    gap:3px
  }

  .owned-land {
    width:22px
  }

  .owned-land > span:not(.card-face) {
    font-size:5px
  }

  .arena {
    width:400px;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%) scale(.82)
  }

  .land-zone {
    left:45px
  }

  .contest-zone {
    left:215px
  }

  .arena-ring {
    inset:-33px 0 -22px
  }

  .table-engraving {
    font-size:8px;
    letter-spacing:6px
  }

  .table-engraving span {
    font-size:8px;
    letter-spacing:5px;
    margin-top:125px
  }

  .table-message {
    top:62%;
    font-size:10px;
    letter-spacing:0
  }


  .seat-human {
    top:70%;
    width:235px
  }

  .seat-human .portrait {
    width:39px;
    height:39px
  }

  .seat-human .seat-heading {
    padding:5px 13px 5px 6px
  }

  .seat-human .seat-name {
    font-size:13px
  }

  .seat-human .seat-score {
    font-size:9px
  }

  .seat-human .seat-score strong {
    font-size:14px
  }

  .seat-human .seat-inventory {
    left:0;
    top:14px;
    gap:5px
  }

  .seat-human .tableau-slot {
    width:36px;
    height:51px;
    right:calc(100% + 1px);
    top:0
  }

  .seat-human .owned-lands {
    width:80px;
    left:calc(100% - 4px);
    top:6px
  }

  .human-area {
    width:94%;
    bottom:9px
  }

  .hand-label {
    font-size:8px;
    top:5px
  }

  .action-bar {
    padding:8px 4px 4px;
    gap:7px;
    min-height:53px;
    flex-direction:column
  }

  .action-bar p {
    max-width:none;
    font-size:9px;
    min-height:12px
  }

  .action-buttons {
    gap:6px;
    justify-content:center;
    width:100%
  }

  .action-buttons button {
    font-size:11px;
    padding:8px 12px;
    min-height:36px
  }

  .journal-button {
    font-size:8px;
    bottom:212px;
    left:15px;
    padding:7px
  }

  .table-wood {
    bottom:83px
  }

  .two-player .seat-1 {
    top:20%
  }

}

@media(max-width:480px) {
  .masthead {
    padding:10px 12px;
    height:70px
  }

  .wordmark p {
    display:none
  }

  h1 {
    font-size:19px;
    letter-spacing:2px
  }

  .seal {
    width:32px;
    height:35px;
    font-size:23px
  }

  .table-controls {
    gap:5px
  }

  .quiet-button {
    font-size:10px;
    min-height:34px;
    padding:6px
  }

  .seat-switch button {
    padding:0 8px;
    font-size:9px;
    min-height:27px
  }

  .table-stage {
    height:calc(100svh - 70px);
    min-height:620px
  }

  .table-wood {
    inset:23px 3px 78px;
    padding:10px;
    border-radius:46% 46% 38% 38%/30% 30% 42% 42%
  }

  .table-felt:after {
    inset:10px
  }

  .round-banner {
    top:10px;
    font-size:9px;
    gap:7px;
    padding:7px 9px
  }

  .edition {
    font-size:7px;
    padding-left:7px
  }

  .seat {
    width:162px
  }

  .seat-1 {
    left:25%;
    top:24%
  }

  .seat-2 {
    left:75%;
    top:24%
  }

  .seat-heading {
    gap:5px
  }

  .portrait {
    width:36px;
    height:36px
  }

  .seat-name {
    font-size:11px;
    letter-spacing:0
  }

  .seat-score {
    font-size:8px
  }

  .seat-score strong {
    font-size:14px
  }


  .seat-inventory {
    font-size:9px;
    gap:6px;
    margin-top:4px
  }

  .seat-inventory .card-pile { --pile-card-w:17px; gap:3px }

  .opponent-hand {
    width:130px;
    height:53px;
    margin-top:7px
  }

  .opponent-hand .card-back {
    width:34px;
    height:48px
  }

  .tableau-slot {
    right:calc(50% - 89px);
    top:52px;
    width:29px
  }

  .tableau-slot.empty {
    font-size:8px;
    letter-spacing:2px
  }

  .owned-land {
    width:20px
  }

  .arena {
    top:46%;
    transform:translate(-50%,-50%) scale(.7);
    width:400px
  }

  .arena-ring {
    inset:-26px 8px -12px
  }

  .table-message {
    top:62%;
    font-size:9px;
    max-width:94%
  }

  .seat-human {
    top:70%;
    width:206px
  }

  .seat-human .seat-name {
    font-size:12px
  }

  .seat-human .seat-score {
    font-size:8px
  }

  .seat-human .portrait {
    width:34px;
    height:34px
  }

  .seat-human .seat-heading {
    padding:4px 10px 4px 5px
  }

  .seat-human .seat-inventory {
    left:-8px;
    top:11px
  }

  .seat-human .owned-lands {
    width:58px;
    left:calc(100% - 6px);
    top:1px
  }

  .seat-human .tableau-slot {
    width:31px;
    height:45px;
    right:calc(100% + 15px)
  }

  .hand-label {
    top:1px;
    font-size:7px
  }

  .hand-card.selected,.hand-card:focus-visible {
    transform:translateY(-20px) rotate(0)
  }

  .human-area {
    bottom:7px;
    width:98%
  }

  .action-bar {
    padding-top:5px;
    gap:5px
  }

  .action-buttons button {
    padding:7px 10px;
    min-height:35px;
    font-size:10px
  }

  .action-bar p {
    font-size:8px;
    min-height:11px
  }







  .journal-button {
    bottom:195px;
    left:7px;
    font-size:7px
  }

  .table-engraving {
    top:47%;
    font-size:7px;
    letter-spacing:4px
  }

  .table-engraving span {
    font-size:7px;
    letter-spacing:4px;
    margin-top:115px
  }

  .info-dialog {
    padding:27px 23px
  }

  .info-dialog h2 {
    font-size:23px
  }

  .result-dialog {
    padding:28px 22px
  }

}

@media(max-height:740px) and (min-width:761px) {
  :root {
    --card-w:100px
  }

  .table-stage {
    min-height:610px
  }

  .masthead {
    height:70px;
    padding-top:9px;
    padding-bottom:9px
  }

  .table-stage {
    height:calc(100svh - 70px)
  }

  .seat-1,.seat-2 {
    top:22%
  }

  .arena {
    top:43%;
    transform:translate(-50%,-50%) scale(.85)
  }

  .seat-human {
    top:68%
  }

  .table-message {
    top:60%
  }

  .human-area {
    bottom:3px
  }

  .hand-area {
    height:196px
  }


}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }

  .hand-card.selected,.hand-card:focus-visible {
    transform:translateY(-10px) rotate(0)
  }

  .card-flight { display:none }

}

/* Seat coordinates are calculated on one circle in table.js. Anchor each
   heading to that point rather than centering a variable-height inventory. */
.seat {
  transform: translate(-50%, -30px);
}

.seat-human {
  transform: translate(-50%, -31px);
}

.result-score small {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  color: #c9c4ab;
}

.owned-lands {
  max-width: 200px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:760px) {
  .seat {
    transform: translate(-50%, -23px);
  }

  .seat-human {
    transform: translate(-50%, -25px);
  }

  .owned-lands {
    max-width: 125px;
  }

}

@media (max-width:480px) {
  .seat {
    transform: translate(-50%, -18px);
  }

  .seat-human {
    transform: translate(-50%, -23px);
  }

  .arena {
    transform: translate(-50%, -50%) scale(.62);
  }

  .opponent-hand {
    width: 100px;
    height: 49px;
  }

}

/* A stable drop target beside the local player's hand, clear of the battle area. */
.personal-tableau {
  position: absolute;
  right: calc(50% + clamp(62px, 12vw, 165px));
  transform: translateY(-50%);
  width: clamp(84px, 16vw, 174px);
  min-height: 60px;
  padding: 7px 10px;
  z-index: 6;
  text-align: left;
  border: 2px dashed #9baf84;
  border-radius: 10px;
  background: #193729;
  color: #f3e9c9;
}
.tableau-caption {
  display: block;
  font: bold 12px var(--serif);
  letter-spacing: .1em;
  color: #edd69a;
}
.tableau-contents {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 11px;
}
.tableau-contents .card-face {
  flex: 0 0 32px;
  width: 32px;
}
.personal-tableau.drop-ready {
  border-color: #ffda75;
  background: #34523c;
  box-shadow: 0 0 15px #eac36070;
}
.personal-tableau.has-card { border-style: solid; }
.seat-human .seat-inventory {
  position: static;
  flex-direction: row;
  margin: 2px auto 0;
}
.choice-options {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}
.choice-options button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #91835e;
  border-radius: 6px;
  text-align: left;
  background: #27473a;
}
.choice-options button:hover,
.choice-options button:focus-visible { background: #41614b; }
.touch-ghost {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  padding: 8px 12px;
  border: 1px solid #edd69a;
  border-radius: 5px;
  background: #284638;
  color: #fff5d3;
}
.hand-card[draggable="true"] { touch-action: none; }
@media (max-width: 480px) {
  .personal-tableau { padding: 4px 6px; min-height: 54px; }
  .tableau-caption, .tableau-contents { font-size: 10px; }
  .tableau-contents .card-face { flex-basis: 23px; width: 23px; }
}
.personal-tableau.can-place { border-color: #e9ca78; }
.personal-tableau.can-place:hover { background: #34523c; }

@media (max-width:760px) {
  .seat-status { font-size:10px; min-height:14px; margin-top:2px }
  .seat.is-turn .seat-heading:before,.seat.is-responding .seat-heading:before { inset:-5px -6px }
  .leader-banner { font-size:14px }
  .round-stake { font-size:14px; padding:4px 5px; margin-top:7px }
  .table-message { width:72%; font-size:11px; line-height:1.4 }
  .event-note + .event-note { font-size:10px }
  .action-bar p { font-size:11px; line-height:1.4; min-height:16px }
  .action-buttons button { min-height:40px; font-size:11px }
  .human-area { width:100%; max-width:100%; bottom:32px }
  .hand-area { height:192px }
  .hand {
    left:0;
    transform:none;
    justify-content:flex-start;
    align-items:flex-end;
    padding:14px 14px 28px;
    gap:10px;
    perspective:none
  }
  .hand .hand-card {
    --card-w:100px;
    margin:0;
    transform:none
  }
  .hand .hand-card.selected,.hand .hand-card:focus-visible {
    transform:none;
    box-shadow:0 0 0 2px #ffe3a3,0 4px 10px #0008
  }
  .hand-label { top:0; font-size:10px }
  .journal-button { left:8px; bottom:0; min-height:30px; padding:5px 8px; font-size:11px }
  .journal-button span { font-size:16px }
  .hand-intent { font-size:11px; padding:3px 1px }
  .drop-preview { font-size:15px }
  .drop-preview strong { font-size:16px }
  #tableau-preview { font-size:11px; width:165px; max-width:44vw }
  #tableau-preview strong { font-size:12px }
}
@media (max-width:480px) {
  .leader-banner { font-size:16px }
  .leader-banner strong,.leader-banner b { font-size:19px }
  .round-stake { font-size:16px }
  .table-message { width:76%; font-size:11px }
  .hand-intent { font-size:11px; letter-spacing:0 }
  .drop-preview { font-size:17px }
  .drop-preview strong { font-size:18px }
  #tableau-preview { font-size:11px }
  #tableau-preview strong { font-size:12px }
}

/* Opponents' hands face the outside of the table; leave the bidding lanes clear. */
.seat:not(.seat-human) .opponent-hand {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  margin: 0;
  translate: -50% 0;
  pointer-events: none;
}

/* Flank the centered opponent so their cards clear the round banner. */
.two-player .seat-1 { --fan-offset: 168px; --pile-offset: 145px; }
.two-player .seat-1 .opponent-hand {
  left: calc(50% + var(--fan-offset));
  top: -17px;
  bottom: auto;
}
.two-player .seat-1 .seat-inventory {
  position: absolute;
  right: calc(50% + var(--pile-offset));
  top: -5px;
  width: max-content;
  margin: 0;
}
.two-player .seat-1 .hand-total {
  position: absolute;
  left: calc(100% + var(--pile-offset) + var(--fan-offset));
  top: 67px;
  transform: translateX(-50%);
}
.seat-1:not(.seat-human) .tableau-slot { left: 0; right: auto; top: 0; }
.seat-2 .tableau-slot { left: auto; right: 0; top: 0; }
.hand-card[data-actionable=true] { touch-action: none; cursor: grab; }
.hand-card[data-actionable=true]:active { cursor: grabbing; }
.land-card .round-stake {
  position: absolute;
  inset: calc(100% + 3px) 0 auto;
  margin: 0;
  padding: 3px;
  line-height: 1.2;
}
@media (max-width: 760px) {
  .seat:not(.seat-human) .seat-status:empty { display: none; }
  .seat:not(.seat-human) .owned-lands { position: absolute; top: -29px; }
  .seat-1 .owned-lands { right: 65%; }
  .seat-2 .owned-lands { left: 65%; }
  .two-player .seat-1 { --fan-offset: 145px; --pile-offset: 106px; }
  .two-player .seat-1 .opponent-hand { top: -13px; }
}
@media (max-width: 480px) {
  .seat:not(.seat-human) .seat-inventory {
    position: absolute;
    bottom: calc(100% + 53px);
    width: 100%;
  }
  .seat-1 .seat-inventory { justify-content: flex-start; }
  .seat-2 .seat-inventory { justify-content: flex-end; }
  .seat-1 .hand-total, .seat-2 .hand-total { position: absolute; top: calc(100% + 1px); }
  .seat-1 .hand-total { left: 0; }
  .seat-2 .hand-total { right: 0; }
  .two-player .seat-1 { --fan-offset: 103px; --pile-offset: 87px; }
  .two-player .seat-1 .opponent-hand { top: -10px; }
  .two-player .seat-1 .seat-inventory {
    top: -16px;
    bottom: auto;
    width: max-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
.touch-ghost { display: grid; gap: 3px; width: 70px; padding: 4px; text-align: center; }
.touch-ghost > span:not(.card-face) { font: 12px var(--serif); }

/* The board tracks share the space left below the masthead. */
.game-shell {
  --masthead-h:46px;
  display:grid;
  grid-template-rows:calc(var(--masthead-h) + env(safe-area-inset-top)) minmax(0,1fr);
  height:100vh;
  height:100dvh;
  min-height:0;
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}

.game-shell .masthead {
  height:auto;
  min-width:0;
  padding:env(safe-area-inset-top) clamp(8px,2vw,28px) 0;
  gap:8px;
}

.masthead .wordmark,.masthead .table-controls { gap:clamp(4px,1vw,12px) }
.masthead .seal { width:28px; height:28px; font-size:19px; flex:none }
.masthead h1 { font-size:18px; letter-spacing:.12em; white-space:nowrap }
.masthead .wordmark p { display:none }
.masthead .seat-switch { padding:2px }
.masthead :is(.seat-switch button,.quiet-button) {
  min-height:28px;
  padding:0 clamp(5px,1vw,13px);
  font-size:12px;
  white-space:nowrap;
}

.readable-table {
  --board-gap:clamp(5px,1vh,10px);
  --board-pad:clamp(8px,1.45vh,17px);
  --board-line:#bdab744a;
  --seat-local:#a6e0d4;
  --seat-one:#f4b7a0;
  --seat-two:#d8c3f2;
  --opponent-row:clamp(122px,15.4vh,144px);
  --local-row:82px;
  --tableau-face:23px;
  --hold-card-h:28px;
  --arena-caption:19px;
  --arena-inner-gap:5px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:26px var(--opponent-row) minmax(0,1fr) var(--local-row) minmax(0,1fr);
  grid-template-areas:
    "round message journal"
    "opponents opponents opponents"
    "arena arena arena"
    "human human human"
    "hand hand hand";
  gap:var(--board-gap);
  width:100%;
  max-width:1600px;
  height:100%;
  min-height:0;
  max-height:none;
  padding:var(--board-pad);
}

.readable-table .table-wood {
  inset:3px;
  padding:4px;
  border-radius:18px;
  pointer-events:none;
}

.readable-table .table-felt {
  border-width:2px;
  background:
    radial-gradient(ellipse at 50% 37%,#4d765e66,transparent 58%),
    repeating-linear-gradient(126deg,#ffffff03 0 1px,transparent 1px 4px),
    linear-gradient(#183a32,#285547 40%,#15382e);
}

.readable-table .table-felt::after { inset:4px; border-color:#d5bd6c24 }
.readable-table :is(.table-engraving,.offline-note,.card-rules,#my-tableau-rules) { display:none }
.readable-table .fatal-error { grid-column:1 / -1; grid-row:1 / -1; align-self:center; padding:20px }

.readable-table :is(.round-banner,.table-message,.seat,.land-zone,.contest-zone,.human-area,.hand-label,.journal-button) {
  position:static;
  transform:none;
  min-width:0;
  min-height:0;
}

.readable-table .round-banner {
  grid-area:round;
  gap:5px 9px;
  padding:0 9px;
  border:1px solid var(--board-line);
  border-radius:7px;
  background:#102b24;
  font-size:12px;
}

.readable-table .round-banner strong { letter-spacing:0 }
.readable-table .edition { display:none }

.readable-table .table-message {
  grid-area:message;
  align-self:center;
  width:100%;
  max-width:none;
  overflow:hidden;
  color:#e2dbc3;
  font:12px/1.35 var(--sans);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.readable-table .table-message.is-warning { color:#ffcc94; line-height:1.1; white-space:normal }
.readable-table .event-note:not(:last-child) { display:none }

.readable-table .journal-button {
  grid-area:journal;
  justify-self:end;
  min-height:0;
  padding:0 7px;
  border:1px solid var(--board-line);
  border-radius:6px;
  background:#102b24;
  font-size:12px;
  letter-spacing:0;
  white-space:nowrap;
}

.readable-table .journal-button span { margin-right:0; font-size:14px }

.readable-table .opponent-seats {
  grid-area:opponents;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:0;
  gap:var(--board-gap);
}

.readable-table.two-player .opponent-seats {
  grid-template-columns:minmax(0,850px);
  justify-content:center;
}

.readable-table .seat-1,
.readable-table [data-leader-seat="1"] { --seat-color:var(--seat-one) }
.readable-table .seat-2,
.readable-table [data-leader-seat="2"] { --seat-color:var(--seat-two) }
.readable-table .seat-human,
.readable-table [data-leader-seat="0"] { --seat-color:var(--seat-local) }

.readable-table .seat {
  display:grid;
  grid-template-rows:36px minmax(0,1fr);
  gap:4px;
  width:100%;
  padding:5px 7px;
  border:1px solid var(--board-line);
  border-radius:11px;
  background:linear-gradient(180deg,#163128,#183d32);
  box-shadow:0 4px 10px #0b261f75,inset 0 1px 0 #fff1c21c;
  text-align:left;
}

.readable-table .seat-human {
  grid-area:human;
  grid-template-columns:minmax(145px,17%) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:7px;
}

.readable-table .seat:is(.is-turn,.is-responding) {
  border-color:var(--seat-color);
  box-shadow:0 0 14px color-mix(in srgb,var(--seat-color) 22%,transparent),inset 0 1px 0 #fff1c21c;
}

.readable-table .seat-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(76px,1fr) auto;
  grid-template-areas:"avatar fan inventory";
  align-items:center;
  gap:4px 7px;
  min-width:0;
  min-height:0;
}

.readable-table .seat-human .seat-header {
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"avatar" "inventory";
  grid-template-rows:minmax(0,1fr) 18px;
}

.readable-table .seat-heading { grid-area:avatar; gap:6px; min-width:0 }
.readable-table .seat-heading::before { display:none }
.readable-table .seat-human .seat-heading { border:0; background:none; box-shadow:none; padding:0 }
.readable-table .seat-heading > div {
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;
  gap:1px 5px;
  min-width:0;
}

.readable-table .seat .portrait {
  flex:none;
  width:32px;
  height:32px;
  border:2px solid var(--seat-color);
}

.readable-table .seat-name {
  color:var(--seat-color);
  font-size:14px;
  line-height:1.2;
  letter-spacing:0;
}

.readable-table .seat-score {
  grid-column:1 / -1;
  margin-top:0;
  font:11px/1.2 var(--sans);
}

.readable-table .seat-score strong { font-size:15px }
.readable-table .seat-status { min-height:0; margin:0; font:10px/1.2 var(--sans); white-space:nowrap }
.readable-table .seat-status:empty { display:none }

.readable-table .seat .seat-inventory {
  grid-area:inventory;
  position:static;
  flex-direction:row;
  justify-content:flex-end;
  gap:5px;
  width:auto;
  min-width:0;
  margin:0;
  font-size:11px;
}

.readable-table .seat-human .seat-inventory { justify-content:flex-start }
.readable-table .seat-inventory .card-pile { --pile-card-w:10px; gap:2px }
.readable-table .seat .hand-total {
  position:static;
  margin:0;
  padding:2px 3px;
  border-radius:3px;
  background:#0c2821;
  transform:none;
}

.readable-table .seat .opponent-hand {
  grid-area:fan;
  position:relative;
  inset:auto;
  width:min(100%,106px);
  height:32px;
  justify-self:center;
  margin:0;
  translate:none;
  transform:none;
}

.readable-table .opponent-hand .card-back {
  width:19px;
  height:27px;
  left:calc(50% + .61 * var(--x));
  top:calc(.63 * var(--y));
  border-radius:2px;
}

.readable-table .seat-domains {
  display:grid;
  grid-template-columns:minmax(115px,1fr) minmax(0,3.3fr);
  gap:5px;
  min-width:0;
  min-height:0;
}

.readable-table .seat-human .seat-domains { grid-template-columns:minmax(130px,1fr) minmax(0,3fr) }

.readable-table :is(.seat-tableau,.seat-territories) {
  display:grid;
  grid-template-rows:14px minmax(0,1fr);
  align-content:start;
  gap:2px;
  min-width:0;
  min-height:0;
  padding:3px 5px;
  border:1px solid #a890573c;
  border-radius:6px;
  background:#0e2b24b8;
}

.readable-table .seat-territories:has(.land-pages:not(:empty)) {
  grid-template-rows:14px minmax(0,1fr) 16px;
}

.readable-table .zone-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:4px;
  margin:0;
  color:var(--seat-color);
  font:700 11px/14px var(--sans);
  white-space:nowrap;
}

.readable-table .zone-meta { color:#ddd4b9; font-size:10px; font-weight:400 }
.readable-table .zone-empty { display:block; color:#d1d1bb; font:11px/1.25 var(--sans) }

.readable-table .seat .owned-lands {
  position:static;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:3px;
  width:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  margin:0;
}

.readable-table .owned-land {
  display:grid;
  grid-template-columns:calc((var(--hold-card-h) - 4px) * .7082) minmax(0,1fr);
  align-items:center;
  gap:3px;
  flex:1 1 0;
  width:auto;
  min-width:0;
  max-width:112px;
  height:var(--hold-card-h);
  aspect-ratio:auto;
  padding:1px 3px;
  border:1px solid #a890574d;
  border-radius:4px;
  background:#173b31;
  text-align:left;
}

.readable-table .owned-land > .owned-land-label {
  position:static;
  min-width:0;
  background:none;
  color:#f4ead3;
  font:10px/1.1 var(--sans);
}

.readable-table .owned-land-label :is(b,span) {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.readable-table .owned-land-label > span { color:#ffdf96; font-size:9px }
.readable-table .owned-land:hover { border-color:var(--seat-color) }

.readable-table .land-pages:empty { display:none }

.readable-table .land-pages:not(:empty) {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:#e1d7b8;
  font:10px/1 var(--sans);
  white-space:nowrap;
}

.readable-table .land-pages button {
  display:grid;
  place-items:center;
  width:22px;
  height:16px;
  padding:0;
  border:1px solid var(--board-line);
  border-radius:3px;
  background:#173b31;
  color:#f6e5b7;
  font:700 12px/1 var(--sans);
}

.readable-table .seat .tableau-slot,
.readable-table .personal-tableau {
  position:relative;
  inset:auto;
  width:100%;
  min-width:0;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  transform:none;
}

.readable-table .seat .tableau-slot {
  grid-template-columns:var(--tableau-face) minmax(0,1fr);
  align-items:center;
  justify-items:stretch;
  gap:5px;
}

.readable-table .seat .tableau-slot.empty {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding:2px;
  border:1px dashed var(--board-line);
  border-radius:4px;
  writing-mode:horizontal-tb;
  letter-spacing:0;
}

.readable-table .personal-tableau {
  display:block;
  padding:1px 4px;
  border:1px dashed var(--board-line);
  border-radius:4px;
  background:#17392f;
}

.readable-table .personal-tableau.has-card { border-style:solid }
.readable-table .personal-tableau.can-place { border-color:var(--seat-color) }
.readable-table .personal-tableau.drop-ready { border-color:var(--gold-bright); background:#34523c }
.readable-table .personal-tableau .tableau-contents { gap:5px; min-height:0 }
.readable-table .tableau-contents .card-face { flex:0 0 var(--tableau-face); width:var(--tableau-face) }
.readable-table :is(.tableau-name,.personal-tableau.has-card .tableau-contents > :not(.card-face)) {
  color:#f8e8ba;
  font:700 12px/1.2 var(--serif);
  overflow-wrap:anywhere;
}

.readable-table #tableau-preview { top:auto; bottom:calc(100% + 4px); width:max-content; max-width:220px }

.readable-table .arena {
  grid-area:arena;
  position:relative;
  inset:auto;
  transform:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:var(--arena-caption) minmax(0,1fr);
  grid-template-areas:"arena-title arena-title" "objective contest";
  gap:var(--arena-inner-gap);
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:clamp(5px,1vh,10px);
  isolation:isolate;
}

.readable-table .arena-ring {
  inset:0;
  z-index:-1;
  border:1px solid #c5ad6970;
  border-radius:12px;
  background:
    radial-gradient(ellipse at 68% 43%,#577b565c,transparent 67%),
    linear-gradient(145deg,#153e32,#224c3b 58%,#153a31);
  box-shadow:inset 0 0 0 3px #122f255e,inset 0 0 28px #0e2d2480,0 4px 8px #0b251f60;
  pointer-events:none;
}

.readable-table .arena-ring::before,
.readable-table .arena-ring::after { display:none }

.readable-table .arena.drop-ready .arena-ring {
  border-color:#f4d484;
  box-shadow:0 0 24px #e8c66a66,inset 0 0 24px #e8c66a22;
}

.readable-table .arena-heading {
  grid-area:arena-title;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:9px;
  min-width:0;
  color:#ffedc0;
  font:700 15px/var(--arena-caption) var(--serif);
  white-space:nowrap;
}

.readable-table .arena-heading h2 { font:inherit }
.readable-table #contest-summary { color:#e1dac2; font:11px/1.2 var(--sans) }

.readable-table :is(.land-zone,.contest-zone) { width:100%; text-align:left }

.readable-table .land-zone {
  grid-area:objective;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"land-supply round-objective";
  gap:var(--arena-inner-gap);
}

.readable-table :is(.round-objective,.contest-zone) {
  container-type:size;
  display:grid;
  grid-template-rows:var(--arena-caption) minmax(0,1fr);
  gap:var(--arena-inner-gap);
  min-width:0;
  min-height:0;
  padding:clamp(4px,.7vw,10px);
  border:1px solid var(--board-line);
  border-radius:8px;
}

.readable-table :is(.round-objective,.land-zone > .land-caption) { grid-area:round-objective }
.readable-table .round-objective { background:linear-gradient(135deg,#17382ef7,#17392f76) }
.readable-table .contest-zone { grid-area:contest; background:radial-gradient(ellipse at 35% 38%,#8b956831,transparent 72%),#193b30a6 }

.readable-table :is(.land-caption,.contest-label) {
  margin:0;
  color:#f6e3b5;
  font:700 12px/var(--arena-caption) var(--sans);
  letter-spacing:.03em;
}

.readable-table .land-supply {
  grid-area:land-supply;
  position:static;
  align-content:center;
  gap:7px;
  padding:3px 4px;
  border:1px solid #c0a76d33;
  border-radius:6px;
  background:#12352ab3;
  font-size:10px;
}

.readable-table .land-pile { --pile-card-w:19px; gap:2px }

.readable-table :is(.objective-body,.played-card) {
  --arena-face-w:clamp(36px,12vh,150px);
  display:grid;
  grid-template-columns:minmax(0,min(53%,var(--arena-face-w))) minmax(0,1fr);
  align-items:center;
  gap:clamp(4px,1vw,12px);
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
}

@supports (height:1cqh) {
  .readable-table :is(.objective-body,.played-card) {
    --arena-face-w:clamp(0px,calc((100cqh - var(--arena-caption) - var(--arena-inner-gap) - 2px) * .7082),205px);
  }
}

.readable-table :is(.land-card,.played-card,.contest-empty,.leader-banner) { transform:none }

.readable-table :is(.objective-summary h2,.played-name) {
  display:block;
  color:#ffe9ad;
  font:700 clamp(15px,1.6vw,23px)/1.2 var(--serif);
  overflow-wrap:anywhere;
}

.readable-table .objective-points {
  display:inline-block;
  margin-top:3px;
  color:#f4d788;
  font:700 14px/1.2 var(--sans);
}

.readable-table .objective-summary .round-stake {
  margin:4px 0 0;
  padding:2px 3px;
  font:11px/1.25 var(--sans);
  overflow-wrap:anywhere;
}

.readable-table .contest-empty {
  gap:4px;
  height:100%;
  min-height:0;
  padding:4px;
  border-color:#e4cc824d;
  color:#f4ebcc;
  font-size:15px;
  text-align:center;
}

.readable-table .contest-empty span { color:#dbd4ba; font-size:11px; letter-spacing:0 }

.readable-table .played-by {
  margin-top:4px;
  color:#e1dac2;
  font:11px/1.3 var(--sans);
  white-space:normal;
  overflow-wrap:anywhere;
}

.readable-table .leader-banner {
  left:auto;
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:2px 4px;
  margin:3px 0 0;
  padding:2px 4px;
  border-color:var(--seat-color,var(--board-line));
  font:11px/1.2 var(--sans);
  white-space:normal;
}

.readable-table .leader-banner strong { color:var(--seat-color,#ffe2a0); font-size:12px }
.readable-table .leader-banner b { font-size:13px }

.readable-table .human-area {
  grid-area:hand;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(252px,29%);
  grid-template-rows:minmax(0,1fr) 34px;
  grid-template-areas:"cards selection" "actions actions";
  gap:5px;
  width:100%;
  max-width:none;
}

.readable-table .hand-area {
  grid-area:cards;
  display:grid;
  grid-template-rows:19px minmax(0,1fr);
  min-width:0;
  height:auto;
  min-height:0;
  border:1px solid var(--board-line);
  border-radius:7px;
  background:linear-gradient(#17382e,#112c2466);
}

.readable-table .hand-label {
  gap:7px;
  padding:2px 6px 0;
  color:#f1dfb7;
  font:12px/16px var(--sans);
  letter-spacing:0;
}

.readable-table .hand {
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  overflow:visible;
  transform:none;
  perspective:none;
}

.readable-table .hand-entry {
  position:absolute;
  bottom:20px;
  z-index:var(--hand-order,0);
  width:var(--hand-face-w,60px);
  min-width:0;
}

.readable-table .hand-entry.is-selected { z-index:100 }
.readable-table .hand-entry:focus-within { z-index:101 }

.readable-table .hand .hand-card {
  width:100%;
  margin:0;
  transform:none;
  transition:transform .15s ease,box-shadow .15s ease;
  z-index:auto;
  touch-action:manipulation;
}

.readable-table .hand .hand-card:hover { box-shadow:none }
.readable-table .hand .hand-card.selected {
  transform:translateY(-5px);
  box-shadow:0 0 0 2px #f4d892;
}

.readable-table .hand .hand-card[data-actionable=true] { cursor:grab }
.readable-table .hand .hand-card[data-actionable=true]:active { cursor:grabbing }

.readable-table .hand-intent {
  padding:1px 1px 2px;
  overflow:hidden;
  font-size:10px;
  line-height:12px;
  text-overflow:ellipsis;
}

.readable-table .selection-readout {
  grid-area:selection;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 22px;
  gap:3px;
  min-width:0;
  min-height:0;
  padding:5px 8px;
  border:1px solid var(--board-line);
  border-radius:7px;
  background:#112e25;
}

.readable-table .selection-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  min-width:0;
  gap:4px;
  color:#ffebba;
  font:700 15px/1.2 var(--serif);
}

.readable-table #selection-name { margin:0; font:inherit }

.readable-table #selection-value {
  flex:none;
  color:#f4d788;
  font:700 12px/1.2 var(--sans);
}

.readable-table #selection-body {
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  color:#f3e9d0;
  font:15px/1.5 var(--sans);
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.readable-table .selection-pages:not([hidden]) {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  font:11px/1 var(--sans);
  white-space:nowrap;
}

.readable-table .selection-pages button {
  min-width:26px;
  min-height:22px;
  padding:0 3px;
  border:1px solid var(--board-line);
  border-radius:3px;
  background:#173b31;
  color:#f6e5b7;
}

.readable-table .action-bar {
  grid-area:actions;
  flex-direction:row;
  justify-content:space-between;
  min-width:0;
  min-height:0;
  gap:6px;
  padding:0 5px;
  border:1px solid #ac945b80;
  border-radius:6px;
  background:#132820;
}

.readable-table .action-bar p {
  flex:1;
  min-width:0;
  min-height:0;
  max-width:none;
  overflow:hidden;
  font:12px/1.25 var(--sans);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.readable-table .action-buttons { flex:none; gap:5px; width:auto }
.readable-table .action-buttons button { min-height:27px; padding:1px 8px; font-size:12px }
.readable-table .action-buttons .play-button span { margin-left:0; font-size:12px }

@media (max-width:1000px) {
  .readable-table .seat-domains { grid-template-columns:minmax(94px,1fr) minmax(0,2.75fr) }
  .readable-table .seat-human .seat-domains { grid-template-columns:minmax(105px,1fr) minmax(0,2.75fr) }
  .readable-table .seat .seat-inventory { font-size:10px }
}

@media (max-width:760px) {
  .readable-table { --tableau-face:18px; --hold-card-h:23px }
  .readable-table .seat-domains { grid-template-columns:minmax(62px,1fr) minmax(0,3.3fr) }
  .readable-table .owned-land { gap:2px; padding-inline:2px }
  .readable-table .seat-header { grid-template-columns:minmax(0,1fr) minmax(34px,.5fr) }
  .readable-table .seat:not(.seat-human) .seat-header {
    grid-template-areas:"avatar fan" "inventory inventory";
    grid-template-rows:25px 14px;
    gap:0 3px;
  }
  .readable-table .seat:not(.seat-human) { grid-template-rows:39px minmax(0,1fr) }
  .readable-table .seat .portrait { width:23px; height:23px }
  .readable-table .seat-heading { gap:3px }
  .readable-table .seat-name { font-size:12px }
  .readable-table .seat-score { font-size:10px }
  .readable-table .seat-score strong { font-size:12px }
  .readable-table .seat .seat-inventory { justify-content:flex-start; gap:4px }
  .readable-table .seat-inventory .card-pile { --pile-card-w:6px }
  .readable-table .seat .opponent-hand { height:24px }
  .readable-table .opponent-hand .card-back {
    width:13px;
    height:18px;
    left:calc(50% + .42 * var(--x));
    top:calc(.4 * var(--y));
  }
  .readable-table .land-zone {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) 20px;
    grid-template-areas:"round-objective" "land-supply";
  }
  .readable-table .land-supply { display:flex; justify-content:center; gap:5px; padding:0 2px }
  .readable-table .land-pile { --pile-card-w:8px; flex-direction:row }
}

@media (max-width:600px) {
  .game-shell { --masthead-h:41px }
  .masthead .seal { width:23px; height:24px; font-size:16px }
  .masthead h1 { font-size:16px; letter-spacing:0 }
  .masthead :is(.seat-switch button,.quiet-button) { font-size:11px }
  .readable-table {
    --board-gap:5px;
    --board-pad:7px;
    --opponent-row:118px;
    --local-row:100px;
    --hold-card-h:23px;
    grid-template-rows:24px var(--opponent-row) minmax(0,.78fr) var(--local-row) minmax(0,1.22fr);
  }
  .readable-table .round-banner { padding:0 4px; gap:3px; font-size:10px }
  .readable-table .journal-button { padding:0 3px; font-size:10px }
  .readable-table .table-message { font-size:10px }
  .readable-table .seat { padding:4px }
  .readable-table .seat-human {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:24px minmax(0,1fr);
    gap:3px;
  }
  .readable-table .seat-human .seat-header {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"avatar inventory";
    grid-template-rows:minmax(0,1fr);
  }
  .readable-table .seat-domains { grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr); gap:3px }
  .readable-table .seat-human .seat-domains { grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) }
  .readable-table :is(.seat-tableau,.seat-territories) { padding:2px; }
  .readable-table .zone-heading { gap:2px; font-size:10px }
  .readable-table .zone-meta { font-size:9px }
  .readable-table .seat:not(.seat-human) .seat-tableau .zone-meta { display:none }
  .readable-table .seat:not(.seat-human) .seat-territories .zone-meta { display:none }
  .readable-table .zone-empty { font-size:10px }
  .readable-table .tableau-name { font-size:10px }
  .readable-table .seat .tableau-slot { gap:2px }
  .readable-table .owned-land { padding:1px 2px }
  .readable-table .opponent-hand .card-back { left:calc(50% + .35 * var(--x)) }
  .readable-table .arena-heading { font-size:13px; gap:5px }
  .readable-table #contest-summary { font-size:10px }
  .readable-table .objective-points { font-size:12px }
  .readable-table .played-by { font-size:10px }
  .readable-table .human-area {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) 29px;
    grid-template-areas:"cards" "selection" "actions";
    gap:4px;
  }
  .readable-table .selection-readout { padding:4px 5px }
  .readable-table #selection-body { font-size:14px }
  .readable-table .action-bar { padding-inline:3px }
  .readable-table .action-bar p { font-size:10px }
  .readable-table .action-buttons { gap:3px }
  .readable-table .action-buttons button { min-height:24px; padding-inline:4px; font-size:11px }
}

/* Short windows give the hand and its readout a column beside the arena. */
@media (max-height:540px) and (min-width:601px) {
  .game-shell { --masthead-h:35px }
  .masthead .seal { width:22px; height:23px; font-size:16px }
  .masthead :is(.seat-switch button,.quiet-button) { min-height:24px }
  .readable-table {
    --board-gap:4px;
    --board-pad:7px;
    --opponent-row:97px;
    --local-row:66px;
    --hold-card-h:20px;
    --tableau-face:16px;
    --arena-caption:15px;
    --arena-inner-gap:3px;
    grid-template-columns:auto minmax(0,1fr) minmax(0,46%);
    grid-template-rows:22px var(--opponent-row) minmax(0,1fr) var(--local-row);
    grid-template-areas:
      "round message journal"
      "opponents opponents opponents"
      "arena arena hand"
      "human human hand";
  }
  .readable-table .seat:not(.seat-human) { grid-template-rows:28px minmax(0,1fr); gap:3px }
  .readable-table .seat { padding:3px 5px }
  .readable-table .seat .portrait { width:23px; height:23px }
  .readable-table .seat .opponent-hand { height:25px }
  .readable-table .opponent-hand .card-back { width:14px; height:20px; top:calc(.42 * var(--y)) }
  .readable-table .seat-human { grid-template-columns:minmax(107px,27%) minmax(0,1fr); gap:3px }
  .readable-table .seat-human .seat-domains { grid-template-columns:minmax(58px,.8fr) minmax(0,2.4fr); gap:3px }
  .readable-table .seat-human .seat-inventory { gap:2px; font-size:9px }
  .readable-table .seat-human .seat-inventory .card-pile { --pile-card-w:6px }
  .readable-table .seat-human .zone-meta { display:none }
  .readable-table :is(.seat-tableau,.seat-territories) { padding:1px 3px }
  .readable-table .owned-land-label :is(b,span) { font-size:9px }
  .readable-table .arena-heading { font-size:13px }
  .readable-table :is(.land-caption,.contest-label) { font-size:11px }
  .readable-table .arena { padding:4px }
  .readable-table :is(.round-objective,.contest-zone) { padding:4px }
  .readable-table .human-area {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1.16fr) minmax(0,.84fr) 28px;
    grid-template-areas:"cards" "selection" "actions";
    gap:3px;
  }
  .readable-table .hand-area { grid-template-rows:15px minmax(0,1fr) }
  .readable-table .hand-label { padding-top:0; font-size:11px; line-height:15px }
  .readable-table .selection-readout { grid-template-rows:auto minmax(0,1fr) 18px; gap:2px; padding:3px 5px }
  .readable-table .selection-heading { font-size:13px }
  .readable-table #selection-body { font-size:14px; line-height:1.35 }
  .readable-table .selection-pages button { min-height:18px }
  .readable-table .action-bar p { font-size:10px }
  .readable-table .action-buttons { gap:3px }
  .readable-table .action-buttons button { min-height:22px; padding-inline:4px; font-size:10px }
}

@media (max-height:540px) and (min-width:601px) and (max-width:760px) {
  .readable-table { --local-row:82px }
  .readable-table .seat:not(.seat-human) .seat-header {
    grid-template-columns:minmax(0,1fr) minmax(35px,.5fr) auto;
    grid-template-areas:"avatar fan inventory";
    grid-template-rows:minmax(0,1fr);
  }
  .readable-table .seat-human {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:21px minmax(0,1fr);
  }
  .readable-table .seat-human .seat-header {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"avatar inventory";
    grid-template-rows:minmax(0,1fr);
  }
}

@media (max-width:600px) and (max-height:720px) {
  .readable-table {
    --opponent-row:108px;
    --local-row:92px;
    --hold-card-h:21px;
    --tableau-face:15px;
    grid-template-rows:24px var(--opponent-row) minmax(0,.72fr) var(--local-row) minmax(0,1.28fr);
  }
  .readable-table .seat { padding-block:2px }
  .readable-table :is(.seat-tableau,.seat-territories) { padding-block:1px }
  .readable-table .hand-area { grid-template-rows:16px minmax(0,1fr) }
  .readable-table .hand-label { padding-top:0; font-size:11px }
  .readable-table .selection-readout { grid-template-rows:auto minmax(0,1fr) 19px; gap:2px }
  .readable-table .selection-heading { font-size:13px }
  .readable-table #selection-body { line-height:1.35 }
  .readable-table .selection-pages button { min-height:19px }
}

@media (max-width:600px) and (max-height:620px) {
  .readable-table .human-area {
    grid-template-columns:minmax(0,1.4fr) minmax(130px,1fr);
    grid-template-rows:minmax(0,1fr) 29px;
    grid-template-areas:"cards selection" "actions actions";
  }
}