:root {
  color-scheme:dark;
  --cream:#f0e5ca;
  --muted:#a1aca7;
  --gold:#c5b27d;
  --yellow:#e6de2f;
  --blue:#6596bb;
  --ink:#14242b;
  font-family:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden
}

body {
  background:#0c171c;
  color:var(--cream)
}

button,a {
  -webkit-tap-highlight-color:transparent
}

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

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:5px
}

button {
  touch-action:manipulation
}

button[hidden],[hidden] {
  display:none!important
}

#viewport {
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 50% 40%,#26373b,#080f13 85%);
  overflow:hidden
}

#table {
  width:1440px;
  height:960px;
  position:absolute;
  transform-origin:top left;
  overflow:hidden;
  background:radial-gradient(ellipse at 47% 37%,#30494a 0,#223c3f 40%,#192e35 74%,#101e25 100%);
  box-shadow:0 0 100px #000a,inset 0 0 100px #08171da0
}

.table-grain {
  position:absolute;
  inset:0;
  opacity:.17;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.35' d='M0 0h160v160H0z'/%3E%3C/svg%3E")
}

.table-border {
  position:absolute;
  inset:90px 28px 34px;
  border:1px solid #baa46b3d;
  border-radius:160px 160px 170px 170px;
  box-shadow:inset 0 0 0 5px #07161a30,0 0 0 6px #07161a20;
  pointer-events:none
}

.table-border:after {
  content:'♛';
  position:absolute;
  left:50%;
  top:44%;
  font-size:200px;
  color:#b9ae7810;
  transform:translate(-50%,-50%)
}

.game-header {
  height:83px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:22px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #bba66f32;
  background:linear-gradient(#0b171e9c,#0b171e30)
}

.wordmark {
  text-decoration:none;
  color:var(--cream);
  font:700 23px Georgia,serif;
  letter-spacing:3px;
  position:relative
}

.wordmark-diamond {
  font-size:12px;
  color:var(--yellow)
}

.wordmark small {
  display:block;
  text-align:center;
  font:9px Arial,sans-serif;
  letter-spacing:6px;
  margin-top:5px;
  color:var(--gold)
}

.session-label {
  font-size:10px;
  letter-spacing:3px;
  color:#bec6bb
}

.session-label span {
  color:var(--gold);
  padding:0 12px
}

.game-header nav {
  display:flex;
  gap:12px
}

.icon-button {
  border:1px solid #c5b27d33;
  background:#14272e99;
  padding:10px 14px;
  border-radius:4px;
  font-size:12px;
  transition:.15s
}

.icon-button:hover {
  border-color:var(--gold);
  background:#304248
}

.seat {
  position:absolute;
  display:flex;
  gap:13px;
  align-items:center;
  z-index:2
}

.opponent-seat {
  top:119px;
  left:63px
}

.own-seat {
  top:805px;
  left:63px
}

.seat h2 {
  font:20px Georgia,serif;
  margin:0 0 7px
}

.seat p {
  font-size:12px;
  color:var(--muted);
  margin:0
}

.crest {
  width:49px;
  height:57px;
  display:grid;
  place-items:center;
  font:33px Georgia,serif;
  border:1px solid #c6b78a66;
  background:linear-gradient(140deg,#456f8b,#254453);
  clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
  color:#eddbb0;
  filter:drop-shadow(0 3px 3px #000)
}


.glory {
  margin-left:15px;
  text-align:center;
  padding-left:20px;
  border-left:1px solid #c5b27d44
}

.glory b {
  font:30px Georgia,serif;
  color:var(--cream);
  display:block
}

.glory span {
  font-size:8px;
  letter-spacing:2px;
  color:var(--gold)
}

.hand {
  position:absolute
}

.opponent-hand {
  left:440px;
  top:104px;
  width:605px;
  height:143px
}

.own-hand {
  left:360px;
  top:750px;
  width:755px;
  height:180px;
  z-index:20
}

.card {
  position:absolute;
  padding:0;
  margin:0;
  border:0;
  border-radius:7px;
  background:transparent;
  width:120px;
  height:176px;
  transform:rotate(var(--tilt,0deg));
  transform-origin:50% 100%;
  box-shadow:0 5px 9px #07101580;
  user-select:none;
  touch-action:none;
  transition:filter .15s,box-shadow .15s;
  isolation:isolate
}

.card svg {
  width:100%;
  height:100%;
  display:block;
  border-radius:7px;
  pointer-events:none
}

.card .card-face {
  width:100%;
  height:100%;
  transition:transform .15s;
  pointer-events:none
}

.card.selectable {
  cursor:pointer
}

.card.selectable:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:3px
}

.card.selected {
  box-shadow:0 0 0 3px var(--yellow),0 8px 15px #0008
}

.card.ineligible {
  filter:brightness(.72) saturate(.75)
}



.court-divider {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,#bcaa712d 20%,#bcaa7140 80%,transparent);
  text-align:center;
  pointer-events:none
}

.court-divider span {
  position:relative;
  top:-5px;
  font-size:8px;
  letter-spacing:3px;
  background:#243c40;
  padding:0 17px;
  color:#a8b2a589
}

.upper-divider {
  left:320px;
  top:242px;
  width:794px
}

.lower-divider {
  left:65px;
  top:580px;
  width:1043px
}

.turn-standard {
  position:absolute;
  left:67px;
  top:300px;
  width:168px;
  text-align:center
}

.eyebrow {
  font-size:10px;
  letter-spacing:3px;
  color:var(--gold)
}

.phase-medallion {
  width:62px;
  height:62px;
  border:1px solid #c8b78366;
  margin:17px auto 15px;
  display:grid;
  place-items:center;
  transform:rotate(45deg);
  font:38px Georgia,serif;
  background:#c6b57c0b;
  box-shadow:inset 0 0 0 5px #14292c
}

.phase-medallion span {
  transform:rotate(-45deg);
  display:block
}

.turn-standard h1 {
  font:25px Georgia,serif;
  margin:0 0 12px
}

.turn-standard p {
  font-size:12px;
  line-height:1.6;
  color:#bdc5b8;
  margin:0
}

.phase-track {
  list-style:none;
  display:flex;
  padding:0;
  gap:9px;
  font-size:10px;
  justify-content:center;
  margin:24px -10px 0;
  color:#91a49d
}

.phase-track li {
  padding-bottom:6px;
  border-bottom:2px solid #49615c
}

.phase-track .active {
  color:var(--yellow);
  border-color:var(--yellow)
}

.phase-track .done {
  border-color:#a5ac7e
}

.spades-counter {
  margin-top:22px!important;
  font-size:10px!important;
  color:#94a79f!important
}

#last-stand {
  font-size:10px;
  letter-spacing:2px;
  color:var(--yellow);
  margin-top:18px
}

.market-heading {
  position:absolute;
  top:345px;
  left:445px;
  width:462px;
  display:flex;
  align-items:center;
  gap:15px
}

.market-heading h2 {
  font:12px Georgia,serif;
  letter-spacing:4px;
  margin:0;
  color:#d1c6a4
}

.market-heading span {
  height:1px;
  background:#c7b37c4d;
  flex:1
}

#market {
  position:absolute;
  left:440px;
  top:380px;
  display:flex;
  gap:33px
}

.market-slot {
  position:relative;
  width:122px;
  height:213px
}

.slot-name {
  height:24px;
  color:var(--gold);
  font:14px Georgia,serif;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:10px
}

.slot-name span {
  font:8px Arial,sans-serif;
  letter-spacing:1.5px;
  color:#b2bcac
}

.slot-bed {
  position:absolute;
  top:27px;
  left:0;
  width:120px;
  height:176px;
  border:1px solid #a5a58540;
  border-radius:7px;
  background:#081a1a22
}

.slot-bed:empty:after {
  content:'◆';
  color:#c6b57c25;
  font-size:22px;
  position:absolute;
  top:70px;
  left:48px
}

.slot-price {
  position:absolute;
  top:191px;
  left:38px;
  z-index:5;
  background:linear-gradient(#e4d7ad,#bba976);
  color:#25373a;
  border:1px solid #efe1b4;
  border-radius:50%;
  width:39px;
  height:39px;
  font:700 19px Georgia,serif;
  box-shadow:0 3px 6px #0006
}

.slot-price.chosen {
  background:var(--yellow);
  box-shadow:0 0 14px #e6de2f66
}

.pile {
  position:absolute;
  top:407px;
  width:120px;
  text-align:center
}

.draw-pile {
  left:278px
}

.discard-pile {
  left:951px
}

.pile-cards {
  position:relative;
  height:176px;
  border:1px solid #a5a58530;
  border-radius:7px;
  background:#081a1a22
}

.pile h3 {
  font-size:10px;
  letter-spacing:2px;
  margin:17px 0 5px;
  color:#cfc7ab
}

.pile h3 b {
  color:var(--gold);
  font-weight:normal;
  margin-left:5px
}

.pile p {
  font-size:10px;
  margin:0;
  color:#99aaa0
}

.action-panel {
  position:absolute;
  left:1172px;
  top:327px;
  width:216px;
  min-height:335px;
  text-align:center;
  padding:24px 20px 19px;
  border:1px solid #c6b57c66;
  border-radius:4px;
  background:linear-gradient(145deg,#30424a,#15272f);
  box-shadow:0 12px 30px #06131880,inset 0 0 0 5px #14282d55
}

.action-panel:before,.action-panel:after {
  content:'◆';
  position:absolute;
  left:calc(50% - 5px);
  color:#c5b27d;
  font-size:10px;
  top:-6px;
  background:#283d44;
  padding:0 5px
}

.action-panel:after {
  top:auto;
  bottom:-6px
}

.action-panel>.eyebrow {
  font-size:9px;
  letter-spacing:2px
}

.av-display {
  margin:16px 0 12px
}

.av-display b {
  display:block;
  font:54px Georgia,serif;
  color:#efe2ba;
  line-height:1
}

.av-display span {
  font-size:8px;
  letter-spacing:2px;
  color:var(--gold);
  display:block;
  margin-top:8px
}

.action-panel p {
  font-size:11px;
  line-height:1.6;
  color:#c5cbbe;
  min-height:37px
}

.action-button {
  display:block;
  width:100%;
  padding:12px 8px;
  margin:9px 0 0;
  background:linear-gradient(#e6de2f,#c4bc20);
  border:1px solid #eee56b;
  color:#1c2d32;
  border-radius:3px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.3px;
  box-shadow:0 3px 8px #0004;
  transition:transform .15s,filter .15s
}

.action-button:hover:not(:disabled) {
  filter:brightness(1.1);
  transform:translateY(-2px)
}

.action-button:active:not(:disabled) {
  transform:translateY(1px)
}

.action-button.secondary {
  background:#3b5054;
  color:#f0e5ca;
  border-color:#84908788
}

.action-button:disabled {
  opacity:.35;
  box-shadow:none
}

.quiet-button {
  background:transparent;
  border:0;
  color:#c4c8b7;
  font-size:11px;
  padding:10px 2px;
  text-decoration:underline;
  text-decoration-color:#c4c8b744;
  text-underline-offset:4px
}

.quiet-button:hover {
  color:var(--yellow)
}

.guard-field {
  position:absolute;
  display:flex;
  gap:15px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#a2956a55 transparent;
  padding:8px 4px 10px;
  height:124px
}

.opponent-guards {
  left:357px;
  top:252px;
  width:750px
}

.own-guards {
  left:75px;
  top:604px;
  width:406px;
  height:149px
}

.empty-field {
  align-self:center;
  color:#9cad9b80;
  font:italic 13px Georgia,serif;
  letter-spacing:.5px;
  width:100%;
  text-align:center;
  pointer-events:none
}

.guard {
  --guard-card-width:48px;
  position:relative;
  min-width:145px;
  height:109px;
  padding:8px 9px;
  border:1px solid #d4bc7c44;
  border-radius:5px;
  background:#101e2540;
  cursor:pointer
}

.guard.targetable {
  border-color:#e6de2f80;
  box-shadow:inset 0 0 15px #e6de2f0e
}

.guard.targeted {
  border:2px solid var(--yellow);
  background:#63653330
}

.guard.defeated {
  filter:saturate(.3);
  opacity:.6
}

.guard .guard-cards {
  position:absolute;
  left:9px;
  top:27px;
  right:74px;
  height:77px
}

.guard h3 {
  font:10px Arial,sans-serif;
  letter-spacing:1px;
  margin:0;
  color:#d8cda8
}

.guard .hp {
  position:absolute;
  right:8px;
  top:36px;
  font:23px Georgia,serif;
  color:#ead7a3
}

.guard .hp small {
  font:9px Arial,sans-serif;
  color:#b0bba9;
  display:block;
  margin-top:5px
}

.guard .health-track {
  position:absolute;
  right:9px;
  top:87px;
  width:35px;
  height:3px;
  background:#587165
}

.guard .health-track span {
  display:block;
  height:3px;
  background:#cabb7a
}

.guard .card {
  pointer-events:none;
  width:48px;
  height:70px;
  border-radius:3px
}

.guard .card svg {
  border-radius:3px
}

.own-guards .guard {
  --guard-card-width:62px;
  height:130px;
  min-width:179px
}

.own-guards .guard .card {
  width:62px;
  height:91px
}

.own-guards .guard .guard-cards {
  top:28px
}

.own-guards .guard .hp {
  top:43px
}

.own-guards .guard .health-track {
  top:98px
}

.play-zone {
  position:absolute;
  left:513px;
  top:617px;
  width:554px;
  height:124px;
  text-align:center
}

.play-zone-outline {
  position:absolute;
  inset:0;
  border:1px dashed #b2ad7855;
  border-radius:10px;
  background:#13282b25;
  transition:.2s
}



#play-prompt {
  position:absolute;
  top:34px;
  left:0;
  right:0;
  font:13px Georgia,serif;
  letter-spacing:3px;
  color:#c8c3a9aa;
  pointer-events:none
}

#play-detail {
  position:absolute;
  bottom:27px;
  left:0;
  right:0;
  font-size:10px;
  color:#a1b0a0aa;
  pointer-events:none
}

#staged-cards {
  position:absolute;
  inset:0;
  z-index:2
}

#staged-cards .card {
  width:77px;
  height:113px;
  top:5px
}

.play-zone.has-cards #play-prompt,.play-zone.has-cards #play-detail {
  display:none
}

.pending-banner {
  position:absolute;
  left:490px;
  top:580px;
  max-width:580px;
  font-size:11px;
  color:var(--yellow);
  letter-spacing:.6px
}

.game-footer {
  position:absolute;
  left:65px;
  right:55px;
  bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#899e97
}

.game-footer .quiet-button {
  padding:0;
  font-size:10px
}

.announcement {
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  z-index:150;
  pointer-events:none;
  text-align:center;
  opacity:0;
  white-space:nowrap;
  font:42px Georgia,serif;
  text-shadow:0 4px 16px #000;
  background:linear-gradient(90deg,transparent,#10242bf0 20%,#10242bf0 80%,transparent);
  padding:25px 85px;
  border-top:1px solid #d4bd7944;
  border-bottom:1px solid #d4bd7944
}

.announcement small {
  display:block;
  font:10px Arial,sans-serif;
  letter-spacing:4px;
  color:var(--gold);
  margin-bottom:12px
}

#effects {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:140;
  overflow:hidden
}

.impact {
  position:absolute;
  font:44px Georgia,serif;
  color:#efdb95;
  text-shadow:0 0 20px #b3853a
}

.impact.defeat {
  color:#ec8f82
}

.spark {
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e6cc7b;
  box-shadow:0 0 6px #e6cc7b
}

.overlay {
  position:fixed;
  inset:0;
  z-index:300;
  background:#071318c9;
  backdrop-filter:blur(9px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto
}

.modal {
  position:relative;
  width:min(580px,100%);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0,#35494e,#172b33 75%);
  border:1px solid #d0b87580;
  box-shadow:0 25px 100px #0008;
  padding:40px 42px 35px;
  border-radius:8px
}

.modal:before {
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid #d0b87522;
  pointer-events:none;
  border-radius:3px
}

.modal .modal-symbol {
  font:55px Georgia,serif;
  color:var(--gold);
  line-height:1;
  margin-bottom:19px
}

.modal h1,.modal h2 {
  font:36px Georgia,serif;
  margin:8px 0 16px;
  color:#f1e7cd
}

.modal h1 {
  font-size:47px;
  letter-spacing:2px
}

.modal p {
  font-size:14px;
  line-height:1.7;
  color:#bec9be;
  margin:12px 0 20px
}

.modal .eyebrow {
  font-size:10px
}

.modal .choice-row {
  display:flex;
  gap:15px;
  margin-top:24px
}

.court-choice {
  flex:1;
  border:1px solid #c6b57c77;
  border-radius:4px;
  padding:15px 10px;
  background:linear-gradient(#853f49,#472b34);
  font:18px Georgia,serif
}

.court-choice.blue {
  background:linear-gradient(#456781,#263f50)
}

.court-choice:hover {
  border-color:var(--yellow);
  filter:brightness(1.15)
}

.court-choice small {
  display:block;
  font:10px Arial,sans-serif;
  margin-top:7px;
  color:#dfd9c5
}

.modal .action-button {
  max-width:350px;
  margin:15px auto 0
}

.modal .quiet-button {
  margin-top:12px
}

.modal ul,.modal ol {
  text-align:left;
  font-size:13px;
  line-height:1.8;
  color:#c4cbbb;
  padding-left:22px
}

.modal a {
  color:var(--yellow)
}

.modal .mode-note {
  font-size:11px;
  color:#94aaa4;
  margin-top:24px;
  margin-bottom:0
}

.modal .close {
  position:absolute;
  right:17px;
  top:13px;
  border:0;
  background:transparent;
  color:#c7cbbd;
  font-size:24px;
  line-height:1;
  padding:6px
}

.inspect-card {
  width:175px;
  margin:20px auto;
  filter:drop-shadow(0 10px 16px #0006)
}

.inspect-card svg {
  width:100%;
  display:block
}

.inspect-hint {
  color:var(--gold)!important;
  font-size:12px!important
}

.history-list {
  list-style:none!important;
  max-height:45vh;
  overflow-y:auto;
  padding:0!important
}

.history-list li {
  border-bottom:1px solid #c6b57c22;
  padding:12px 0;
  font-size:12px
}

.history-list b {
  color:#e6d5a6;
  display:block;
  font-size:10px;
  letter-spacing:1px
}

.reveal-row {
  display:flex;
  gap:22px;
  justify-content:center
}

.reveal-card {
  width:135px
}

.reveal-card svg {
  width:100%
}

.reveal-card span {
  display:block;
  font-size:12px;
  margin-top:10px
}

.reveal-card.kept span {
  color:#dfdf7a
}

.reveal-card.rejected span {
  color:#e2998e
}

.result-score {
  display:flex;
  gap:30px;
  justify-content:center;
  margin:25px 0
}

.result-score b {
  font:55px Georgia,serif;
  display:block
}

.result-score span {
  font-size:12px;
  color:var(--gold)
}

.toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:#e9dfc3;
  color:#26333b;
  padding:14px 22px;
  border-radius:4px;
  font-size:13px;
  z-index:1000;
  box-shadow:0 5px 25px #0008;
  pointer-events:none;
  opacity:0;
  max-width:90vw;
  text-align:center
}

.guard-inspect {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center
}

.guard-inspect svg {
  width:75px
}

.modal-divider {
  border:0;
  border-top:1px solid #c6b57c44;
  margin:25px 0
}

.screen-note {
  position:absolute;
  bottom:44px;
  left:1150px;
  width:230px;
  color:#839c94;
  font-size:10px;
  line-height:1.6;
  text-align:center
}

@media(max-width:640px) {
  .overlay {
    padding:14px
  }
  .modal {
    padding:28px 23px;
    max-height:calc(100dvh - 28px)
  }
  .modal h1 {
    font-size:36px
  }
  .modal h2 {
    font-size:28px
  }
  .modal p {
    font-size:13px
  }
  .court-choice {
    font-size:16px
  }
  .modal .modal-symbol {
    font-size:40px
  }
}

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

.hit-badge {
  position:absolute;
  left:62px;
  top:67px;
  border:1px solid #c5b27d66;
  background:#20373e;
  color:#e6d295;
  border-radius:3px;
  padding:7px 12px;
  font-size:11px;
  white-space:nowrap
}

.hit-badge:hover {
  border-color:var(--yellow)
}


/* Keep the HUD readable in a compact desktop viewport. */
@media (max-width: 1100px) {
  .turn-standard p, .action-panel p { font-size: 15px; }
  .action-button, .icon-button { font-size: 15px; }
  .seat p, .quiet-button { font-size: 14px; }
  .phase-track, .eyebrow { font-size: 12px; }
  .slot-name span { font-size: 11px; }
  .game-footer, .game-footer .quiet-button { font-size: 12px; }
  .action-panel { min-height: 360px; }
}

/* Leave a clear line between the upper battlefield and the Market title. */
.opponent-guards { top: 246px; height: 98px; }
.opponent-guards .guard { height: 84px; }
.opponent-guards .guard .guard-cards { top: 20px; }
.opponent-guards .guard .card { width: 42px; height: 61px; }
.opponent-guards .guard .hp { top: 28px; font-size: 20px; }
.opponent-guards .guard .health-track { top: 72px; }
.opponent-guards .guard h3 { font-size: 9px; letter-spacing: .5px; }

#board-layer,#hand-layer,#incoming-layer { display:contents; }
#layer-controls,.board-instruction { display:none; }

/* Phones use a hand in the foreground and a board underneath it. */
@media (max-width:900px), (orientation:portrait) {
  #viewport { overflow:hidden; }
  #table {
    position:relative;width:100%;height:100dvh;min-height:0;
    --dock-height:150px;--hand-height:206px;--hand-tuck:60px;--view-bar:calc(64px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .table-border { inset:58px 7px 65px;border-radius:65px; }
  .game-header { height:56px;padding:6px 12px;gap:8px;z-index:100; }
  .wordmark { font-size:14px;letter-spacing:1px; }
  .wordmark small { font-size:6px;letter-spacing:2px; }
  .game-header nav { gap:4px; }
  .icon-button { min-height:44px;padding:8px;font-size:11px; }
  .game-header .icon-button { font-size:10px;padding:6px; }
  .session-label,.court-divider,.game-footer,.phase-medallion,.phase-track,.turn-standard #phase-copy { display:none; }
  .turn-standard { top:66px;left:15px;right:15px;width:auto;display:flex;align-items:center;gap:12px;text-align:left;z-index:70; }
  .turn-standard h1 { margin:0;font-size:23px; }
  .turn-standard .eyebrow { font-size:9px;letter-spacing:1px; }
  .spades-counter { margin:0 0 0 auto!important;font-size:9px!important;white-space:nowrap; }
  #last-stand { position:absolute;right:0;top:25px;margin:0;font-size:9px; }
  #board-layer {
    display:block;position:absolute;inset:110px 14px calc(var(--view-bar) + 4px);z-index:2;
    transition:opacity .24s,filter .24s,transform .28s;
  }
  .seat { gap:8px;min-height:46px;left:0;right:0;flex-wrap:nowrap; }
  .opponent-seat { top:0; }
  .own-seat { top:auto;bottom:0; }
  .seat h2 { font-size:17px;margin:0 0 4px; }
  .seat p { font-size:10px; }
  .crest { width:30px;height:35px;font-size:22px; }
  .glory { margin-left:auto;padding-left:10px; }
  .glory b { font-size:24px; }
  .glory span { font-size:7px;letter-spacing:1px; }
  .hit-badge { position:static;max-width:115px;min-height:44px;white-space:normal;padding:5px;font-size:10px; }
  .opponent-hand { display:none; }
  .guard-field { left:0;width:100%;height:108px;padding:4px 2px 10px;gap:10px; }
  .opponent-guards { top:65px; }
  .own-guards { top:auto;bottom:60px; }
  .guard-field .guard { --guard-card-width:42px;min-width:153px;height:90px; }
  .guard-field .guard .guard-cards { top:23px; }
  .guard-field .guard .card { width:42px!important;height:61px!important; }
  .guard-field .guard h3 { font-size:9px;letter-spacing:.6px; }
  .guard-field .guard .hp { top:28px;font-size:23px; }
  .guard-field .guard .health-track { top:77px; }
  .empty-field { font-size:12px; }
  .market-heading { top:35%;left:0;right:0;width:auto;gap:12px; }
  .market-heading h2 { font-size:12px;letter-spacing:3px; }
  #market { top:calc(35% + 28px);left:50%;width:min(100%,430px);transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
  .market-slot { width:100%;height:auto;aspect-ratio:120 / 235; }
  .slot-name { font-size:13px;gap:5px;letter-spacing:0; }
  .slot-name span { font-size:8px;letter-spacing:.3px; }
  .slot-bed { width:100%;height:auto;aspect-ratio:120 / 176; }
  .slot-bed:empty:after { top:40%;left:43%; }
  .slot-price { top:auto;bottom:0;left:calc(50% - 22px);width:44px;height:44px;font-size:18px; }
  .pile { top:auto;bottom:48px;width:auto;text-align:left; }
  .draw-pile { left:0; }
  .discard-pile { left:auto;right:0; }
  .pile-cards,.pile p { display:none; }
  .pile h3 { font-size:9px;letter-spacing:1px;margin:0; }
  #hand-layer {
    display:block;position:absolute;left:0;right:0;top:auto;bottom:calc(var(--dock-height) + var(--view-bar) - var(--hand-tuck));height:calc(var(--hand-height) + 8px);z-index:30;pointer-events:none;
    transition:opacity .24s,transform .28s cubic-bezier(.2,.8,.2,1);
  }
  #hand-layer>* { pointer-events:auto; }
  #incoming-layer { display:block;position:absolute;inset:0;z-index:31;pointer-events:none;transition:opacity .24s,transform .28s; }
  #table:not([data-view=hand]) #incoming-layer { opacity:0;transform:translateY(80px); }
  .own-hand { left:14px;right:14px;top:auto;bottom:0;width:auto;height:var(--hand-height);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;z-index:20; }
  .own-hand .card { touch-action:pan-x; }
  .play-zone { left:16px;right:16px;top:auto;bottom:calc(var(--dock-height) + var(--view-bar) + var(--hand-height) - var(--hand-tuck) + 20px);width:auto;height:103px; }
  .play-zone-outline { background:#10262c55; }
  #play-prompt { top:30px;font-size:12px;letter-spacing:2px; }
  #play-detail { bottom:24px;font-size:10px; }
  .pending-banner { left:16px;right:16px;top:auto;bottom:calc(var(--dock-height) + var(--view-bar) + var(--hand-height) - var(--hand-tuck) + 20px);max-width:none;font-size:11px;line-height:1.5; }
  .action-panel {
    left:12px;right:12px;top:auto;bottom:var(--view-bar);width:auto;height:var(--dock-height);min-height:0;
    z-index:60;padding:10px 12px;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:18px 36px minmax(44px,1fr);gap:6px 12px;text-align:left;
    transition:opacity .2s,transform .25s;
  }
  .action-panel>.eyebrow { grid-column:1 / -1;font-size:9px;letter-spacing:1.5px;align-self:center; }
  .av-display { grid-column:1;grid-row:2 / 4;margin:0;text-align:center;align-self:center; }
  .av-display b { font-size:36px; }
  .av-display span { font-size:7px;letter-spacing:0;margin-top:5px; }
  .action-panel p { grid-column:2;margin:0;min-height:0;font-size:11px;line-height:1.5;align-self:center; }
  #actions { grid-column:2;display:flex;gap:7px;align-items:stretch; }
  #actions .action-button { flex:1;width:0;min-width:0;min-height:44px;margin:0;font-size:12px;padding:8px 5px;letter-spacing:0; }
  #return-cards { position:absolute;right:12px;top:0;min-height:38px;padding:5px 0;font-size:10px; }
  #layer-controls { display:flex;position:absolute;left:0;right:0;bottom:0;height:var(--view-bar);padding:6px 12px max(6px,env(safe-area-inset-bottom));gap:8px;z-index:90;background:linear-gradient(#10232c,#0c1d26);border-top:1px solid #b7ab7144; }
  #layer-back { min-width:108px;background:#263b44;font-size:12px; }
  #peek-view { flex:1;min-height:48px;border:1px solid #c5b27d66;border-radius:30px;background:#324b53;color:var(--cream);touch-action:none;user-select:none;-webkit-user-select:none; }
  #peek-view>span { display:block;font-size:13px; }
  #peek-view>small { display:block;margin-top:3px;color:#abbcb7;font-size:9px;letter-spacing:1px; }
  #peek-view[aria-pressed=true] { background:#c4b378;color:#14252c;box-shadow:0 0 20px #c5b27d44; }
  #peek-view[aria-pressed=true]>small { color:#30454a; }
  #peek-view:disabled { opacity:.4; }
  [data-view=hand] #board-layer { opacity:1;filter:none; }
  [data-incoming=true] .pending-banner { bottom:calc(var(--dock-height) + var(--view-bar) + var(--hand-height) - var(--hand-tuck) + 130px); }
  [data-view=board] #hand-layer,[data-view=market] #hand-layer,[data-view=target] #hand-layer,[data-view=concealed] #hand-layer { opacity:0;transform:translateY(80px);pointer-events:none; }
  [data-view=board] #hand-layer>*,[data-view=market] #hand-layer>*,[data-view=target] #hand-layer>*,[data-view=concealed] #hand-layer>* { pointer-events:none; }
  .peeking .action-panel { opacity:0;transform:translateY(25px);pointer-events:none; }
  [data-view=market] #board-layer { bottom:calc(var(--view-bar) + var(--dock-height) + 20px); }
  [data-view=market] .market-heading { top:27%; }
  [data-view=market] #market { top:calc(27% + 35px); }
  [data-view=market] .guard-field,[data-view=market] .own-seat { opacity:0;pointer-events:none; }
  [data-view=market] .pile { bottom:8px; }
  [data-view=target] #board-layer { bottom:calc(var(--view-bar) + var(--dock-height) + 12px); }
  [data-view=target] .opponent-guards { top:105px;height:145px; }
  [data-view=target] .opponent-guards .guard { --guard-card-width:61px;height:126px;min-width:173px; }
  [data-view=target] .opponent-guards .guard .card { width:61px!important;height:89px!important; }
  [data-view=target] .opponent-guards .guard .health-track { top:108px; }
  [data-view=target] #market,[data-view=target] .market-heading { opacity:0;pointer-events:none; }
  .board-instruction { position:absolute;top:58px;left:0;right:0;font:15px Georgia,serif;color:var(--yellow);line-height:1.3;margin:0; }
  [data-view=target] .board-instruction { display:block; }
  [data-view=target] .own-guards { opacity:.25; }
  .announcement { position:fixed;top:35%;width:100%;font-size:29px;white-space:normal;padding:20px; }
  .toast { width:max-content;max-width:90vw;bottom:calc(var(--view-bar) + var(--dock-height) + 12px); }
}
@media (max-width:900px) and (max-height:750px) {
  #table { --hand-height:184px;--hand-tuck:60px;--dock-height:139px; }
  .turn-standard { top:59px; }
  #board-layer { top:98px; }
  .pending-banner { font-size:10px; }
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
  #table { --hand-height:146px;--hand-tuck:0px;--dock-height:126px;--view-bar:56px; }
  .game-header { height:44px; }
  .turn-standard { top:48px; }
  .turn-standard h1 { font-size:20px; }
  #board-layer { top:85px; }
  #hand-layer { right:40%;bottom:var(--view-bar); }
  .own-hand { right:14px;bottom:0; }
  .play-zone { left:61%;right:14px;top:87px;bottom:auto;height:88px; }
  .pending-banner,[data-incoming=true] .pending-banner { left:61%;right:14px;top:71px;bottom:auto;font-size:9px; }
  .action-panel { left:61%;bottom:var(--view-bar); }
  #market { max-width:330px;top:42px; }
  .market-heading { top:12px; }
  [data-view=market] #board-layer,[data-view=target] #board-layer { right:41%;bottom:var(--view-bar); }
  [data-view=market] #market { top:42px;max-width:330px; }
  [data-view=market] .market-heading { top:12px; }
  [data-view=market] .opponent-seat { display:none; }
  [data-view=target] .opponent-guards { top:73px; }
  [data-view=target] .board-instruction { top:35px;font-size:14px; }
}
@media (max-width:900px), (orientation:portrait) {
  .action-panel { border:0;border-radius:16px;background:linear-gradient(140deg,#29434dd9,#132b35f5);box-shadow:0 8px 22px #07131b55; }
  .action-panel:before,.action-panel:after { display:none; }
}
@media (max-width:900px), (orientation:portrait) {
  #layer-controls { display:grid;grid-template-columns:110px minmax(0,1fr); }
  #peek-view { grid-column:2;grid-row:1; }
  #layer-back,#layer-court { grid-column:1;grid-row:1; }
  #layer-court { align-self:center;text-align:center;color:var(--gold);font-size:12px; }
}
@media (max-width:900px), (orientation:portrait) {
  .market-heading { top:31%; }
  #market { top:calc(31% + 28px); }
}
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
  .opponent-seat { right:56%; }
  .own-seat { top:0;bottom:auto;left:73%; }
  .opponent-guards { top:65px;width:28%; }
  .own-guards { top:65px;bottom:auto;left:72%;width:28%; }
  .market-heading { top:0;left:34%;right:34%; }
  .market-heading h2 { font-size:10px;letter-spacing:1px; }
  #market { top:25px; }
  [data-view=target] .opponent-seat { right:0; }
  [data-view=target] .opponent-guards { width:100%; }
  [data-view=target] .own-seat,[data-view=target] .own-guards { display:none; }
}