/* Shared presentation and play shell for Boardgame and CardVerse. */
.play-experience{
  --px-bg:#0d1719;
  --px-surface:#172527;
  --px-panel:#1d2e30;
  --px-ink:#f5f0e7;
  --px-muted:#c5ceca;
  --px-line:#d9c79b42;
  --px-accent:#e6c98b;
  --px-accent-ink:#172423;
  color:var(--px-ink);
}
.play-experience[data-hub=boardgame]{--px-accent:#cfe5ba;--px-accent-ink:#18342b}
.play-experience.game-landing,.play-experience.px-game-landing{max-width:1440px;margin:18px auto 60px;padding:0 clamp(12px,2vw,28px)}
.play-experience .landing-demo{background:var(--px-panel);color:var(--px-ink);border:1px solid var(--px-line)}
.play-experience .landing-demo span{color:var(--px-accent)}
.play-experience .landing-related a{background:var(--px-panel);border-color:var(--px-line);color:var(--px-ink)}
.play-experience .landing-related a span{color:var(--px-muted)}
.play-experience .content-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.28fr);gap:18px}
.play-experience .content-layout :is(.prose-card,.facts-card){background:var(--px-panel);border:1px solid var(--px-line);color:var(--px-ink)}
.play-experience .content-layout :is(h2,h3,strong){color:var(--px-ink)}
.play-experience .content-layout :is(p,li,dd,dt){color:var(--px-muted)}
.play-experience .game-view-videos{margin-top:16px}
.play-experience :is(button,a,input,select):focus-visible{outline:3px solid var(--px-accent);outline-offset:3px}
.play-experience .px-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;width:fit-content;max-width:100%;margin:0 0 18px;padding:9px 13px;border:1px solid var(--px-line);border-radius:9px;background:var(--px-surface);color:var(--px-muted);font-size:.78rem}
.play-experience .px-breadcrumb a{color:var(--px-muted);text-decoration:none}
.play-experience .px-breadcrumb a:hover{color:var(--px-accent)}
.play-experience .px-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(20px,4vw,64px);align-items:center;min-height:430px;padding:clamp(24px,4vw,56px);border:1px solid var(--px-line);border-radius:22px;background:radial-gradient(circle at 84% 20%,color-mix(in srgb,var(--px-accent) 14%,transparent),transparent 42%),linear-gradient(135deg,#213436,#111c1e 72%);box-shadow:0 24px 60px #0003}
.play-experience .px-hero-copy{max-width:660px}
.play-experience .px-kicker{display:block;color:var(--px-accent);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.play-experience .px-hero h1{margin:.55rem 0 .8rem;color:var(--px-ink);font:600 clamp(2.8rem,5vw,5.5rem)/1.02 Georgia,serif;letter-spacing:-.035em}
.play-experience .px-lead{max-width:55ch;color:var(--px-ink);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55}
.play-experience .px-sublead{max-width:58ch;margin:12px 0 0;color:var(--px-muted);line-height:1.6}
.play-experience .px-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.play-experience .px-facts li{padding:7px 11px;border:1px solid var(--px-line);border-radius:999px;color:var(--px-muted);font-size:.78rem}
.play-experience .px-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:27px}
.play-experience .px-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid var(--px-line);border-radius:10px;background:var(--px-panel);color:var(--px-ink);font-family:inherit;font-size:.88rem;font-weight:700;line-height:1.3;text-decoration:none;cursor:pointer}
.play-experience .px-button:hover{border-color:var(--px-accent);color:var(--px-ink)}
.play-experience .px-button-primary{background:var(--px-accent);border-color:var(--px-accent);color:var(--px-accent-ink)}
.play-experience .px-button-primary:hover{background:#f3ddab;color:var(--px-accent-ink)}
.play-experience .px-hero-media{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--px-line);border-radius:17px;background:#0b1415}
.play-experience .px-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.play-experience .px-hero-media figcaption{position:absolute;inset:auto 0 0;padding:18px 20px;background:linear-gradient(transparent,#081112dc);color:var(--px-ink);font-size:.77rem}
.play-experience .px-launch{margin:18px 0 0;padding:clamp(20px,3vw,34px);border:1px solid var(--px-line);border-radius:20px;background:var(--px-surface)}
.play-experience .px-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.play-experience .px-section-heading h2{margin:5px 0 0;color:var(--px-ink);font:600 clamp(1.8rem,3vw,2.6rem)/1.12 Georgia,serif}
.play-experience .px-section-heading p{max-width:50ch;margin:0;color:var(--px-muted);font-size:.88rem;line-height:1.55}
.play-experience .px-launch-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:18px}
.play-experience .px-choice,.play-experience .px-fields{min-width:0;margin:0;padding:18px;border:1px solid var(--px-line);border-radius:15px;background:var(--px-panel)}
.play-experience .px-choice legend{float:none;width:100%;margin-bottom:13px;padding:0;color:var(--px-ink);font-weight:750;font-size:.85rem}
.play-experience .px-choice-grid{display:grid;gap:9px}
.play-experience .px-choice-card{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;min-height:60px;padding:11px 13px;border:1px solid var(--px-line);border-radius:10px;background:#ffffff07;cursor:pointer}
.play-experience .px-choice-card:has(input:checked){border-color:var(--px-accent);background:color-mix(in srgb,var(--px-accent) 13%,var(--px-panel));box-shadow:inset 0 0 0 1px var(--px-accent)}
.play-experience .px-choice-card:has(input:disabled){opacity:.5;cursor:not-allowed}
.play-experience .px-choice-card input{margin:3px 0 0;accent-color:var(--px-accent)}
.play-experience .px-choice-card strong,.play-experience .px-choice-card small{display:block}
.play-experience .px-choice-card strong{color:var(--px-ink);font-size:.86rem}
.play-experience .px-choice-card small{margin-top:2px;color:var(--px-muted);font-size:.73rem;line-height:1.35}
.play-experience .px-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-content:start}
.play-experience .px-field{display:grid;gap:7px;color:var(--px-ink);font-weight:700;font-size:.8rem}
.play-experience .px-field[hidden]{display:none}
.play-experience .px-field select,.play-experience .px-field input{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--px-line);border-radius:8px;background:#0f1c1e;color:var(--px-ink);font-family:inherit;font-size:.85rem;font-weight:500;line-height:1.3}
.play-experience .px-field select:disabled{opacity:.55}
.play-experience .px-view-options{display:flex;gap:7px}
.play-experience .px-view-options label{flex:1;position:relative}
.play-experience .px-view-options input{position:absolute;opacity:0;pointer-events:none}
.play-experience .px-view-options span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px;border:1px solid var(--px-line);border-radius:8px;background:#0f1c1e;color:var(--px-muted);font-size:.83rem;cursor:pointer}
.play-experience .px-view-options input:checked+span{border-color:var(--px-accent);background:var(--px-accent);color:var(--px-accent-ink);font-weight:800}
.play-experience .px-view-options input:focus-visible+span{outline:3px solid var(--px-accent);outline-offset:3px}
.play-experience .px-launch-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.play-experience .px-launch-summary{max-width:64ch;color:var(--px-muted);font-size:.81rem;line-height:1.5}
.play-experience .px-launch-footer .px-button{min-width:220px}
.play-experience .px-section{margin:32px 0 0;padding:clamp(18px,2.5vw,32px);border:1px solid var(--px-line);border-radius:18px;background:var(--px-surface)}
.play-experience .px-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.play-experience .px-media-grid figure{min-width:0;margin:0;overflow:hidden;border:1px solid var(--px-line);border-radius:13px;background:var(--px-panel)}
.play-experience .px-media-grid :is(img,video,iframe){display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:0;background:#0b1415}
.play-experience .px-media-grid figcaption{padding:13px 15px;color:var(--px-muted);font-size:.8rem}
.play-experience .px-media-grid figcaption strong{display:block;color:var(--px-ink);font-size:.92rem}
.play-experience .px-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.38fr);gap:18px}
.play-experience .px-detail-grid>*{min-width:0}
.play-experience .px-detail-grid h2,.play-experience .px-detail-grid h3{color:var(--px-ink);font-family:Georgia,serif}
.play-experience .px-detail-grid p,.play-experience .px-detail-grid li{color:var(--px-muted);line-height:1.65}

/* The same visual shell surrounds each live game without changing its rules. */
.play-page:has(#game-app.play-experience){max-width:1680px;padding:16px clamp(12px,2vw,30px) 40px}
body.boardgame-hub:has(#game-app.play-experience) :is(.header,.footer){background:#172527!important;color:#f5f0e7!important}
body.boardgame-hub:has(#game-app.play-experience) .header :is(.brand,.main-nav a),
body.boardgame-hub:has(#game-app.play-experience) .footer :is(a,p,strong,small){color:#f5f0e7!important}
#game-app.play-experience .play-heading,body.play-experience .game-header{display:flex;align-items:center;gap:14px;min-height:68px;margin:0 0 13px;padding:10px 16px;border:1px solid var(--px-line);border-radius:12px;background:var(--px-surface);color:var(--px-ink)}
#game-app.play-experience .play-heading h1,body.play-experience .game-title{font:600 clamp(1.15rem,1.8vw,1.65rem)/1.15 Georgia,serif;color:var(--px-ink)}
#game-app.play-experience .play-heading .eyebrow{color:var(--px-accent)}
#game-app.play-experience .play-heading .back-link{color:var(--px-muted)}
#game-app.play-experience .game-layout,body.play-experience .immersive-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,300px);align-items:start;gap:16px;max-width:1680px;margin-inline:auto}
#game-app.play-experience .board-area{width:100%;max-width:none;margin:0}
#game-app.play-experience .game-sidebar,body.play-experience .table-guide{display:block;position:sticky;top:82px;max-height:calc(100dvh - 96px);overflow-y:auto;padding:0;background:transparent;border:0;scrollbar-width:thin}
#game-app.play-experience .game-sidebar>.panel,body.play-experience .table-guide{margin:0 0 12px;padding:18px;border:1px solid var(--px-line);border-radius:13px;background:var(--px-panel);color:var(--px-ink)}
#game-app.play-experience .game-sidebar .panel h2,body.play-experience .table-phase{font:600 1.4rem/1.2 Georgia,serif;color:var(--px-ink)}
#game-app.play-experience .game-sidebar :is(.muted,.mode-button small,.panel p,.setting),body.play-experience .table-instruction{color:var(--px-muted)}
#game-app.play-experience .game-sidebar .mode-button{background:#ffffff08;border-color:var(--px-line);color:var(--px-ink)}
#game-app.play-experience .game-sidebar .mode-button:hover{border-color:var(--px-accent)}
#game-app.play-experience .game-sidebar :is(select,input){background:#0f1c1e;border-color:var(--px-line);color:var(--px-ink)}
#game-app.play-experience .game-sidebar .button.subtle{background:#ffffff0b;border-color:var(--px-line);color:var(--px-ink)}
/* Setup can move out of .game-sidebar into the mobile rail. Keep its text
   paired with the actual panel/button surface, rather than the board ink. */
#game-app.play-experience #setup{background:var(--px-panel)!important;color:var(--px-ink)!important}
#game-app.play-experience #setup :is(h2,h3,.setting,summary){color:var(--px-ink)!important}
#game-app.play-experience #setup .eyebrow{color:var(--px-accent)!important}
#game-app.play-experience #setup :is(.muted,.service-note){color:var(--px-muted)!important}
#game-app.play-experience #setup .mode-button{background:var(--px-accent)!important;color:var(--px-accent-ink)!important;text-shadow:none!important}
#game-app.play-experience #setup .mode-button :is(strong,small,.mode-icon){color:inherit!important;opacity:1}
#game-app.play-experience #setup :is(select,input:not([type=checkbox])){background:var(--px-surface)!important;color:var(--px-ink)!important}
#game-app.play-experience .table-universe,#game-app.play-experience .salons3d-toolbar{background:var(--px-surface);border:1px solid var(--px-line);color:var(--px-ink)}
#game-app.play-experience .table-universe{margin-bottom:10px}
#game-app.play-experience .player-bar{color:var(--px-ink)}
#game-app.play-experience .player-bar small{color:var(--px-muted)}
#game-app.play-experience .salons3d-toolbar{border-radius:11px 11px 0 0}
#game-app.play-experience .salons3d-toolbar select{background:#0f1c1e;border-color:var(--px-line);color:var(--px-ink)}
#game-app.play-experience .board-frame{padding:7px;border-color:var(--px-line);border-radius:0 0 11px 11px;background:var(--px-surface)}
#game-app.play-experience .board-frame:not(.salons3d-visible) .board{max-width:850px;margin-inline:auto}
#game-app.play-experience .turn-status,#game-app.play-experience .board-controls{border-color:var(--px-line);background:var(--px-surface);color:var(--px-ink)}
#game-app.play-experience .turn-status{margin-top:7px}
#game-app.play-experience .board-controls{padding:10px;border:1px solid var(--px-line);border-radius:10px;margin-top:8px}
body.play-experience{background:var(--px-bg);color:var(--px-ink)}
body.play-experience .game-header{position:sticky;top:0;z-index:30;width:100%;min-width:0;max-width:1680px;margin:0 auto;border-radius:0 0 12px 12px}
body.play-experience .game-controls{min-width:0}
body.play-experience .game-stage{background:var(--px-bg)}
body.play-experience .immersive-table{padding:16px;background:transparent;min-height:0}
body.play-experience .table-guide{grid-column:2;grid-row:1}
body.play-experience .table-play-area{grid-column:1;grid-row:1;border:1px solid var(--px-line);border-radius:13px;background:var(--px-surface)}
body.play-experience .table-actions{background:var(--px-panel);border-color:var(--px-line);color:var(--px-ink)}
body.play-experience .table-rules-link{color:var(--px-accent)}
body.play-experience .match-setup{background:var(--px-panel);border-color:var(--px-line);color:var(--px-ink)}
/* Shared controls stay legible independently of the arena's decorative textures. */
body.play-experience :is(.hud-btn,.table-button,.match-setup button),
#game-app.play-experience :is(.icon-button,.salons3d-modes button,.game-sidebar .button){
  min-height:40px;padding:9px 13px;border:1px solid var(--px-line)!important;border-radius:9px!important;
  background:var(--px-surface)!important;color:var(--px-ink)!important;font-family:inherit;font-size:.82rem;font-weight:600;line-height:1.3;
  text-shadow:none;box-shadow:none;cursor:pointer;
}
body.play-experience .mobile-button-frame{display:none}
body.play-experience :is(.hud-btn,.table-button):hover:not(:disabled),
#game-app.play-experience :is(.icon-button,.salons3d-modes button,.game-sidebar .button):hover:not(:disabled){border-color:var(--px-accent)!important}
body.play-experience :is(.hud-btn,.table-button)[aria-pressed=true],
#game-app.play-experience .salons3d-modes button[aria-pressed=true]{background:var(--px-accent)!important;color:var(--px-accent-ink)!important;border-color:var(--px-accent)!important}
body.play-experience :is(.hud-btn,.table-button):disabled{opacity:.5;cursor:not-allowed}
body.play-experience .game-header select{min-height:40px;max-width:min(300px,100%);padding:9px 12px;border:1px solid var(--px-line);border-radius:9px;background:var(--px-surface);color:var(--px-ink);font:inherit}
body.play-experience .game-header .game-title{margin-right:auto}
body.play-experience .server-lobby-wait{width:min(620px,calc(100% - 32px));margin:32px auto;padding:clamp(20px,3vw,34px);border:1px solid var(--px-line);border-radius:16px;background:var(--px-panel);color:var(--px-ink)}
body.play-experience .server-lobby-wait input{width:100%;min-width:0;margin-block:14px;padding:12px;border:1px solid var(--px-line);border-radius:8px;background:var(--px-bg);color:var(--px-ink)}

@media(max-width:980px){
  .play-experience .px-hero{grid-template-columns:1fr 1fr}
  #game-app.play-experience .game-layout,body.play-experience .immersive-table{grid-template-columns:minmax(0,1fr) 260px}
}
@media(max-width:850px){
  .play-experience .px-hero,.play-experience .px-launch-grid,.play-experience .px-detail-grid,.play-experience .content-layout{grid-template-columns:1fr}
  .play-experience .px-hero-media{max-height:420px}
  #game-app.play-experience .game-layout,body.play-experience .immersive-table{display:flex;flex-direction:column}
  #game-app.play-experience .game-sidebar,body.play-experience .table-guide{position:static;max-height:none;overflow:visible;width:100%}
  #game-app.play-experience .board-area,body.play-experience .table-play-area{order:0;width:100%}
  #game-app.play-experience .game-sidebar,body.play-experience .table-guide{order:1}
}
@media(max-width:600px){
  .play-experience .px-hero{padding:21px;min-height:0}
  .play-experience .px-hero h1{font-size:2.8rem}
  .play-experience .px-section-heading,.play-experience .px-launch-footer{align-items:stretch;flex-direction:column}
  .play-experience .px-fields,.play-experience .px-media-grid{grid-template-columns:1fr}
  .play-experience .px-launch-footer .px-button{width:100%}
  #game-app.play-experience .play-heading,body.play-experience .game-header{flex-wrap:wrap}
}