/* Shared product components; scene geometry and historical card art stay in scene styles. */
:root{--surface:#14261f;--surface-raised:#20362b;--ink:#f0e3c6;--ink-muted:#bdc4b0;--line:#ae946263;--line-active:#d4b77d;--action-top:#694338;--action-bottom:#452b26;--control-radius:5px;--control-height:48px;--space:8px}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--line-active);outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}
body .home-menu button,body #modal button,body .result button{min-height:44px}
body #modal{background:linear-gradient(150deg,#20362b,#101e18);border:1px solid var(--line);border-radius:12px;color:var(--ink);max-height:calc(100dvh - 32px);max-width:min(680px,calc(100vw - 24px));padding:40px 30px 26px;box-shadow:0 18px 80px #0008}
body #modal::backdrop{background:#030a07b8;backdrop-filter:blur(3px)}
body #modal h2{font:30px/1.2 "Literata", Georgia,serif;margin:0 42px 20px 0}
body #modal p,body #modal li{line-height:1.6}
body #modal .close{position:sticky;float:right;top:0;margin:-24px -16px 0 0;width:44px;height:44px;min-height:44px;z-index:4;border:0;background:#15271f;border-radius:50%}
body #modal #modal-back{font:15px "Golos Text", system-ui;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink-muted)}
body #modal button,body .result button{border-radius:var(--control-radius);font:18px/1.3 "Literata", Georgia,serif;padding:12px 18px;background:var(--surface-raised);border:1px solid var(--line);color:var(--ink);box-shadow:inset 0 1px #f1d3a011}
body #modal button:hover,body .result button:hover{border-color:var(--line-active);filter:brightness(1.12)}
body #modal .primary,body #modal .menu-resume,body .result .primary{background:linear-gradient(var(--action-top),var(--action-bottom));border-color:#b38f61}
body #modal .danger{background:transparent;color:#e6b5a6}
.dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dialog-actions button{flex:1}
.variant-choice{margin:0 0 18px}
.ranked-size-choice{margin:0 0 24px}
#queue-progress{font-variant-numeric:tabular-nums;color:var(--ink)}
.lobby-variant{margin:6px 0 10px;font:14px/1.4 "Golos Text", system-ui;color:var(--ink-muted)}
body #modal.is-card-choice{width:min(440px,calc(100vw - 32px));padding:30px;max-height:calc(100dvh - 24px)}
body #modal.is-card-choice h2{font-size:26px;margin:0 30px 20px 0}
.card-choice-preview{display:flex;align-items:center;gap:22px}
.card-choice-preview img{width:80px;height:120px;object-fit:contain;flex:none}
.card-choice-preview p{min-width:0;overflow-wrap:anywhere}
.card-choice-preview small{display:block;font:14px/1.5 "Golos Text", system-ui;color:var(--ink-muted);margin-top:8px}
body #modal.is-card-choice .dialog-actions{gap:8px;margin-top:20px}
body #modal.is-card-choice button{min-height:44px;font-size:17px}
body #modal.is-card-choice #cancel-card-choice{display:block;margin:12px auto 0;background:transparent;border-color:transparent}
.home-main{align-items:flex-start;padding-top:clamp(48px,10vh,110px)}
.home-menu{width:370px}
.home-menu h1{max-width:320px;margin-bottom:24px}
.home-menu-wide{width:min(540px,100%)}
.home-menu .home-back{min-height:44px;padding-inline:8px;margin-left:-8px}
.home-menu button[aria-busy="true"]{opacity:.65;cursor:wait}
.home-menu .account-form{display:grid;gap:10px}
.account-form label{font:14px/1.4 "Golos Text", system-ui;color:var(--ink-muted);margin-top:6px}
.account-form .home-primary{margin-top:8px}
.form-note{font:14px/1.55 "Golos Text", system-ui;color:var(--ink-muted);margin:12px 0}
.form-note strong{color:var(--ink)}
.form-error{font:14px/1.5 "Golos Text", system-ui;color:#ffb5a6;margin:8px 0;overflow-wrap:anywhere}
.form-error:empty{display:none}
.account-links{display:flex;flex-direction:column;align-items:flex-start;margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.home-menu .account-links button{font:15px "Golos Text", system-ui;padding:10px 0}
.account-summary{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line);min-width:0}
.account-summary>.avatar-art{width:48px;height:48px;flex:0 0 48px;border:1px solid var(--line-active);border-radius:50%}
.account-summary>span:nth-child(2){min-width:0;flex:1}
.account-summary strong{display:block;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:19px "Literata", Georgia,serif}
.account-summary small{display:block;font:13px/1.7 "Golos Text", system-ui;color:var(--ink-muted)}
.home-menu .account-summary button{font:14px "Golos Text", system-ui;min-width:60px;padding:8px}
.guest-summary{justify-content:space-between;font:14px "Golos Text", system-ui;color:var(--ink-muted)}
.recovery-code{display:block;margin:20px 0;padding:16px;background:#061810;border:1px solid var(--line-active);border-radius:5px;font:18px/1.5 monospace;overflow-wrap:anywhere;user-select:all;color:var(--ink)}
.rating-intro>strong{display:block;font:52px/1.1 "Literata", Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.rating-intro small{font:16px "Golos Text", system-ui;margin-left:10px;color:var(--ink-muted)}
.rating-intro>p{font:18px/1.4 "Literata", Georgia,serif;margin:14px 0 24px}
.home-content details,body #modal details{border-top:1px solid var(--line);margin-top:20px;padding:12px 0;font:15px/1.6 "Golos Text", system-ui;color:var(--ink-muted)}
summary{min-height:44px;cursor:pointer;display:list-item;align-content:center;color:var(--ink);font:18px/1.4 "Literata", Georgia,serif;padding:10px 0}
.queue-state{text-align:left;padding:16px 0 24px}
.queue-state h3{font:28px "Literata", Georgia,serif;margin:18px 0}
.queue-state #queue-time{font:14px "Golos Text", system-ui;color:var(--ink-muted)}
.queue-pulse{display:block;width:34px;height:34px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:queue-spin 1.5s linear infinite}
@keyframes queue-spin{to{transform:rotate(360deg)}}
.leaderboard,.match-history,.event-history{list-style:none;margin:0;padding:0}
.leaderboard li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.leaderboard .rank-number{min-width:24px;font:18px "Literata", Georgia;color:var(--ink-muted)}
.leaderboard .avatar-art{display:block;flex:0 0 42px;width:42px;height:42px;border-radius:50%}
.leaderboard li>div{flex:1;min-width:0}
.leaderboard strong{display:block;font:19px "Literata", Georgia;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.leaderboard small{display:block;font:12px/1.8 "Golos Text", system-ui;color:var(--ink-muted)}
.leaderboard b{font:22px "Literata", Georgia;text-align:right;font-variant-numeric:tabular-nums}
.leaderboard .is-self{background:#657e3c22;border-left:2px solid var(--line-active);padding-left:10px}
.empty-state{font:17px/1.6 "Literata", Georgia;color:var(--ink-muted);padding:24px 0}
.match-history>li{padding:16px 0;border-bottom:1px solid var(--line)}
.match-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.match-heading strong{font:21px "Literata", Georgia}
.match-heading time{font:12px "Golos Text", system-ui;color:var(--ink-muted)}
.history-opponents{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.history-opponents>span{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere;font:15px "Literata", Georgia}
.history-opponents .avatar-art{width:32px;height:32px;flex:0 0 32px;border-radius:50%}
.match-history p{font:13px/1.6 "Golos Text", system-ui;color:var(--ink-muted);margin-bottom:0}
.outcome-win{color:#bfd19f}.outcome-loss{color:#e8ab97}.outcome-draw{color:#dfd2af}
.history-pages{display:flex;justify-content:space-between;margin-top:16px}
#network-notice{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:10000;background:#50352d;color:#fff0d9;border:1px solid #bd9467;border-radius:6px;padding:10px 18px;font:14px/1.4 "Golos Text", system-ui;text-align:center;max-width:calc(100vw - 24px);width:max-content;box-shadow:0 4px 16px #0007;pointer-events:none}
#network-notice[hidden]{display:none}
.ranked-clock{display:block!important;font:13px/1.4 "Golos Text", system-ui!important;color:#dfc18f!important;margin-top:6px;position:static!important;white-space:nowrap}
.ranked-clock.urgent{color:#ffc0a1!important}
body .result .panel{background:linear-gradient(145deg,#22362b,#0e1c15);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 90px #000a;max-width:440px;width:calc(100vw - 32px);padding:30px}
body .result h2{font:36px "Literata", Georgia;margin:16px 0}
body .result .result-avatar{display:block;position:static;width:72px;height:72px;margin:0 auto;border:1px solid var(--line-active);border-radius:50%}
.result p{font:16px/1.6 "Golos Text", system-ui;color:var(--ink-muted)}
.result .result-rating{font:28px "Literata", Georgia;color:var(--ink);margin:22px 0}
.result-rating strong{margin-left:12px;font-size:22px}
body .result button{display:block;width:100%;margin-top:10px}
body .result .leave{background:transparent}
.event-history>li{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.event-history .action-avatar{position:static!important;display:block;width:40px!important;height:40px!important;flex:0 0 40px;border-radius:50%}
.event-history>li>div{flex:1;min-width:0;overflow-wrap:anywhere}
.event-history p{margin:3px 0!important;font:15px "Golos Text", system-ui}
.event-history small{font:12px "Golos Text", system-ui;color:var(--ink-muted)}
.event-history img{width:38px;height:56px;object-fit:contain;flex:0 0 38px}
.rules-examples{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px}
.rules-examples figure{margin:0}
.rules-examples img{width:65px;height:95px;object-fit:contain}
.rules-examples img+img{margin-left:-14px;transform:translateY(5px)}
.rules-examples figcaption{font:12px "Golos Text", system-ui;margin-top:12px}
.lobby-menu .seat>div:last-child{flex:1}
.lobby-menu .remove-bot{font:12px "Golos Text", system-ui!important;padding:8px!important;min-width:44px}
.lobby-menu .start-hint{margin:8px 0;font:13px "Golos Text", system-ui;color:var(--ink-muted)}
body #modal .menu-tile{min-height:76px}
body #modal .menu-heading p{color:var(--ink-muted)}
body #modal .deck-option{grid-template-columns:112px minmax(0,1fr)}
body #modal .deck-preview{min-width:0;width:112px;background:#d9cda822;border-radius:5px}
body #modal .deck-preview img{width:58px;height:85px;object-fit:contain}
body #modal .deck-preview img+img{margin-left:0;left:27px;transform:rotate(0deg)}
body #modal .deck-preview img:nth-child(3){left:52px;transform:rotate(8deg)}
@media(max-width:650px){
 .home-main{padding:84px 24px 28px;align-items:flex-start}
 .home-menu{width:100%;margin:0}
 .home-menu h1{width:240px;max-width:85%;margin-bottom:18px}
 .home-menu .home-nav button{font-size:19px}
 .account-summary{margin-bottom:14px;padding-bottom:12px}
 .home-subhead{gap:12px}
 .home-subhead h2{font-size:24px}
 body #modal{padding:32px 20px 20px}
 body #modal h2{font-size:26px}
 .match-heading{align-items:flex-start;flex-direction:column;gap:6px}
}
@media(max-height:700px){
 .waiting.home-main{height:100dvh;min-height:0;align-items:flex-start;padding:18px 24px 12px}
 .lobby-menu{height:100%;display:flex;flex-direction:column;max-width:440px;min-height:0}
 .lobby-menu h1{width:180px;max-width:65%;margin:0 0 10px;flex:none}
 .lobby-menu .home-subhead{margin:0;padding-bottom:8px;flex:none}
 .lobby-menu .home-subhead h2{font-size:23px}
 .lobby-menu .lobby-invite{padding:8px 0;flex:none}
 .lobby-menu .lobby-invite .code{font-size:23px}
 .lobby-menu .seats{flex:1;min-height:60px;overflow:auto;margin:4px 0 8px;display:block}
 .lobby-menu .seat{min-height:48px;padding:5px 0;font-size:16px}
 .lobby-menu .seat .portrait{width:36px;height:36px;flex-basis:36px}
 .lobby-menu .seat-empty{min-height:43px}
 .lobby-menu .lobby-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .lobby-menu .lobby-actions button{font:15px/1.2 "Literata", Georgia;min-height:44px;padding:8px}
 .lobby-menu .lobby-leave{flex:none;margin-top:4px;min-height:44px}
 .lobby-menu .start-hint{flex:none;margin:4px 0;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.queue-pulse{animation:none}}
@media(max-height:500px) and (orientation:landscape){
 body #modal.is-game-menu{padding:24px 26px 16px}
 body #modal.is-game-menu .menu-grid{margin-top:16px;gap:8px}
 body #modal.is-game-menu .menu-tile{min-height:66px;padding:10px}
 body #modal.is-game-menu .menu-footer{margin-top:10px;padding-top:6px}
 body #modal.is-game-menu h2{font-size:26px;margin-bottom:10px}
}

@media(max-width:420px){body #modal .deck-option{grid-template-columns:98px minmax(0,1fr);gap:12px;padding:10px}body #modal .deck-preview{width:98px}body #modal .deck-preview img{width:50px;height:75px}body #modal .deck-preview img:nth-child(3){left:46px}body #modal .deck-option strong{font-size:17px}}
.audio-settings{max-width:440px;margin:auto}.audio-settings label{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0 8px;font:20px "Literata", Georgia,serif}.audio-settings output{font:16px "Golos Text", system-ui;color:var(--ink-muted)}body #modal .audio-settings input[type=range]{width:100%;padding:0;height:36px;accent-color:#c7ae70;cursor:pointer;background:transparent;border:0}.audio-settings .form-note{margin-top:20px}.audio-settings #audio-done{width:100%}

/* Deck selection: a single surface owns its choice and independent description. */
body #modal .deck-picker h2{margin-bottom:8px;padding-right:48px}
.deck-picker .deck-help{margin:0;color:var(--ink-muted);font:14px/1.5 "Golos Text", system-ui}
.deck-picker .deck-options{gap:14px;margin:22px 0 14px}
.deck-choice{border:1px solid #8f774969;border-radius:8px;background:#1b3026;overflow:hidden;min-width:0}
.deck-choice[data-selected=true]{border-color:#d4b77c;box-shadow:inset 0 0 0 1px #d4b77c28}
body #modal .deck-choice .deck-option{width:100%;grid-template-columns:104px minmax(0,1fr) 20px;gap:16px;border:0;border-radius:0;margin:0;padding:18px 16px;background:transparent;box-shadow:none;min-height:136px}
body #modal .deck-choice .deck-option:hover{background:#ffffff06}
body #modal .deck-choice .deck-option:focus-visible{outline:2px solid #f1d79b;outline-offset:-4px}
body #modal .deck-choice .deck-preview{width:104px;height:98px;background:none}
body #modal .deck-choice .deck-preview img{height:90px;width:60px}
body #modal .deck-choice .deck-preview img+img{left:23px}
body #modal .deck-choice .deck-preview img:nth-child(3){left:44px}
.deck-copy{min-width:0}.deck-copy small{overflow-wrap:anywhere}
.deck-selected-mark{align-self:start;color:#e8cd91;font:18px/1.2 "Golos Text", system-ui;visibility:hidden}
.deck-choice[data-selected=true] .deck-selected-mark{visibility:visible}
.deck-option[aria-disabled=true]{cursor:progress}
body #modal .deck-description{margin:0;border:0;border-top:1px solid #b09b6b30;padding:0}
body #modal .deck-description summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 16px;font:13px/1.4 "Golos Text", system-ui;list-style:none;color:#cfbea0;cursor:pointer}
.deck-description summary::-webkit-details-marker{display:none}
.deck-description summary:focus-visible{outline:2px solid #f1d79b;outline-offset:-4px}
.deck-description summary:hover{background:#ffffff05;color:#f1d79b}
.deck-description-chevron{font-size:18px}.deck-description[open] .deck-description-chevron{transform:rotate(180deg)}
body #modal .deck-description p{font:13px/1.65 "Golos Text", system-ui;margin:0;padding:0 16px 16px;color:#c6c5b2;overflow-wrap:anywhere}
.deck-save-note{font:12px/1.5 "Golos Text", system-ui;color:var(--ink-muted);margin:0}
.deck-feedback:empty{display:none}.deck-feedback{font:13px/1.5 "Golos Text", system-ui;color:#f0b9a4;margin:12px 0 0}
@media(max-width:420px){body #modal .deck-choice .deck-option{grid-template-columns:80px minmax(0,1fr) 14px;gap:12px;padding:14px 12px;min-height:122px}body #modal .deck-choice .deck-preview{width:80px;height:84px}body #modal .deck-choice .deck-preview img{width:48px;height:72px}body #modal .deck-choice .deck-preview img+img{left:16px}body #modal .deck-choice .deck-preview img:nth-child(3){left:32px}body #modal .deck-choice strong{font-size:17px}.deck-description summary{padding-inline:12px}}

.game .multi-controls{order:2;display:flex;gap:6px}.game .multi-controls button{flex:1;min-height:32px;padding:5px 8px;white-space:nowrap;border-radius:4px;font:1cqw "Literata", Georgia,serif;border:1px solid #8c754b;background:#193025;color:#eadbbd}.game .control-stack .actions{order:3}.game .multi-controls button:disabled{opacity:.45}@media(max-width:900px){.game .multi-controls button{font-size:12px}}