/* One material family; generated frame corners remain fixed under nine-slice. */
:root{--control-dark:#10261d;--control-rim:#bc9555;--control-light:#f1deaf;--frame-art:url('/assets/control-frame-v37.png')}
.game .actions button,.game .hand-tools button,.menu-resume{
 position:relative;isolation:isolate;border:0;border-radius:5px;
 background:linear-gradient(180deg,#354935 0%,#203728 45%,#142b20 100%);
 box-shadow:inset 0 1px 0 #e4c7883b,inset 0 -3px 5px #030d0999,0 5px 9px #0006;
 color:var(--control-light);text-shadow:0 1px 2px #000b;
 transition:background .18s ease,box-shadow .18s ease,translate .12s ease;
}
.game .actions button::before,.game .hand-tools button::before,.menu-resume::before{
 content:'';position:absolute;inset:-2px;pointer-events:none;border:10px solid transparent;border-image:var(--frame-art) 190 / 10px / 0 stretch;
}
.game .actions button{background:linear-gradient(180deg,#4b5636,#293c29 48%,#1c3022);font-size:1.7cqw;letter-spacing:.02em}
.game .hand-tools button{background:linear-gradient(180deg,#1e3326,#12271d);box-shadow:inset 0 1px 0 #d5b97c26,0 3px 6px #0005;color:#deceb0}
.game .hand-tools button::before{border-image-width:7px;opacity:.62}
.game .hand-tools button[aria-pressed=true]{background:linear-gradient(180deg,#37452d,#243825);box-shadow:inset 0 0 14px #d2b36318,0 3px 6px #0005;color:#ffedc5}
.game .hand-tools button[aria-pressed=true]::before{opacity:1}
.game .hand-tools button[aria-pressed=true]::after{content:'';position:absolute;bottom:5px;width:22px;height:1px;left:calc(50% - 11px);background:#d8b56e;box-shadow:0 0 4px #d4b06055}
.game .actions button:hover,.game .hand-tools button:hover,.menu-resume:hover{filter:none;background:linear-gradient(180deg,#4a583b,#293f2b);box-shadow:inset 0 1px 0 #ffe4a559,0 5px 12px #0007}
.game .actions button:active,.game .hand-tools button:active,.menu-resume:active{translate:0 1px;box-shadow:inset 0 3px 7px #0008,0 1px 3px #0007}
body.in-game #sound,.game .game-menu{
 border:1px solid #ae8a4d;background:radial-gradient(ellipse at 40% 20%,#3a4933,#192e22 58%,#0d1d17 85%);
 box-shadow:0 0 0 2px #101a12,0 0 0 3px #8c703b,inset 0 2px 2px #e2c18170,inset 0 -3px 4px #0009,0 5px 9px #0008;
 transition:box-shadow .18s,translate .12s;
}
body.in-game #sound:hover,.game .game-menu:hover{filter:none;box-shadow:0 0 0 2px #172118,0 0 0 3px #d3b575,inset 0 2px 2px #ffe1a577,0 5px 12px #0009}
body.in-game #sound:active,.game .game-menu:active{translate:0 1px}
.game .opponent .portrait{box-shadow:0 0 0 2px #201d11,0 0 0 3px #96733f,inset 0 2px 3px #fff2,0 5px 10px #0009}
.game .opponent.active .portrait{box-shadow:0 0 0 2px #3a321d,0 0 0 3px #dab777,0 0 15px #d8ae533d,0 5px 10px #0009}
.game .opponent-count{box-shadow:0 2px 4px #0009,0 0 0 2px #19271c}
dialog#modal{
 width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:36px;border:1px solid #917442;border-radius:10px;
 background:radial-gradient(ellipse at top,#273728,#14231a 70%);color:#efe0be;
 box-shadow:0 24px 90px #000c,inset 0 0 0 5px #131b13,inset 0 0 0 6px #776239;
 overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8a754e #19281e;
}
dialog#modal::before{content:'';position:absolute;inset:0;pointer-events:none;border:15px solid transparent;border-image:var(--frame-art) 190 / 15px / 0 stretch}
dialog#modal::backdrop{background:#030b08bd;backdrop-filter:blur(4px)}
dialog#modal .close{top:17px;right:17px;width:36px;height:36px;min-width:36px;min-height:36px;border:1px solid #82704766;border-radius:50%;background:#0d1c1566;box-shadow:inset 0 1px 2px #d5bd8040;z-index:2;display:grid;place-items:center;padding:0}
dialog#modal .close .ui-icon{width:20px;height:25px}
dialog#modal .close:hover{background:#3b4630;border-color:#c4a76b}
dialog#modal h2{font:32px/1.15 "Literata", Georgia,serif;margin:10px 0 16px;padding-right:20px;color:#f4dfb5}
dialog#modal p,dialog#modal li{font-size:16px;line-height:1.55;color:#cbbb9c}
dialog#modal .eyebrow{font:11px/1.4 "Golos Text", Arial,sans-serif;letter-spacing:.16em;color:#bea572}
.menu-heading{padding:4px 24px 0 0}
dialog#modal .menu-heading h2{margin-bottom:8px}
dialog#modal .menu-heading p{margin:0 0 24px;font:14px/1.4 "Literata", Georgia,serif;color:#aeaa8e}
.menu-resume{white-space:nowrap;display:block;width:100%;height:56px;min-height:56px;padding:10px 20px;font:21px "Literata", Georgia,serif;margin-bottom:22px}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.menu-tile{min-width:0;position:relative;display:flex;align-items:center;gap:10px;min-height:82px;padding:14px 12px;text-align:left;border:1px solid #80704666;border-radius:5px;background:linear-gradient(#25392a80,#0f221880);color:#e8d8b6;box-shadow:inset 0 1px 0 #e6cf8520;transition:border-color .16s,background .16s}
.menu-tile>.ui-icon{width:24px;height:30px;opacity:.88}
.menu-tile>span:not(.ui-icon):not(.sound-switch){min-width:0;font:17px/1.25 "Literata", Georgia,serif}
.menu-tile small{display:block;margin-top:6px;font:12px/1.3 "Golos Text", Arial,sans-serif;color:#a7ac92}
.menu-tile:hover{border-color:#b69a61;background:#334330}
.menu-tile:active{background:#122219}
.menu-tile[role=switch]{padding-right:28px}
.sound-switch{position:absolute;right:8px;top:15px;width:17px;height:9px;border:1px solid #8d7b4e;border-radius:5px;background:#101c14}
.sound-switch::before{content:'';position:absolute;width:5px;height:5px;left:1px;top:1px;border-radius:50%;background:#8d886e;transition:translate .15s}
[aria-checked=true] .sound-switch{background:#4d5f3d;border-color:#bea26b}
[aria-checked=true] .sound-switch::before{translate:8px;background:#eed49a}
.menu-footer{margin-top:22px;padding-top:17px;border-top:1px solid #b198612e;text-align:center}
.menu-footer button{display:block;width:100%;min-height:40px;padding:8px;background:none;border:1px solid transparent;color:#cdbb9b;font:16px "Literata", Georgia,serif}
.menu-footer button:hover{border-color:#a382533d;background:#71543a19;color:#f1d7b0}
.menu-footer>span{display:block;font:12px/1.4 "Golos Text", Arial,sans-serif;color:#939781;margin-top:2px}
#modal-back{display:block;min-height:32px;margin:0 0 16px;padding:0;background:none;border:0;color:#bea571;font:14px "Literata", Georgia,serif}
#modal-back:hover{color:#ffe4ad}
dialog#modal button:focus-visible{outline:2px solid #efd291;outline-offset:3px}
@media(max-width:420px){dialog#modal{padding:28px 23px}dialog#modal h2{font-size:29px}.menu-heading{padding-right:18px}.menu-grid{gap:8px}.menu-tile{min-height:76px;padding:12px 9px;gap:7px}.menu-tile>.ui-icon{width:20px;height:26px}.menu-tile>span:not(.ui-icon):not(.sound-switch){font-size:15px}.menu-tile small{font-size:11px}.menu-resume{font-size:20px;height:52px;min-height:52px}.menu-footer{margin-top:18px}}
@media(max-height:620px){dialog#modal{padding-top:25px;padding-bottom:23px}.menu-heading p{margin-bottom:18px!important}.menu-resume{margin-bottom:14px}.menu-tile{min-height:65px}.menu-footer{margin-top:14px;padding-top:10px}}
@media(max-width:900px) and (orientation:portrait){.game .actions button{font-size:17px;line-height:1.1;padding:3px 7px}.game .actions button::before{border-image-width:9px}.game .hand-tools button::before{border-image-width:6px}}
@media(max-height:500px) and (orientation:landscape){.game .actions button{font-size:18px}}
@media(max-height:500px) and (orientation:landscape){
 dialog#modal.is-game-menu{width:min(720px,calc(100vw - 32px));padding:25px 30px}
 .is-game-menu .game-menu-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:24px}
 .is-game-menu .menu-heading{grid-column:1;grid-row:1;padding-right:0}
 .is-game-menu .menu-heading h2{font-size:28px}
 .is-game-menu .menu-resume{grid-column:1;grid-row:2;align-self:end;margin-bottom:0;height:48px;min-height:48px;font-size:19px}
 .is-game-menu .menu-grid{grid-column:2;grid-row:1 / span 2;margin-top:38px}
 .is-game-menu .menu-tile{min-height:70px}
 .is-game-menu .menu-footer{grid-column:1 / -1;grid-row:3;margin-top:16px;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.menu-tile,.menu-resume,.sound-switch::before{transition:none}}
/* The same selected back is used by the HTML fallback, previews and opponents. */
.game .mini-back,.game .supply-cards .back,.card.back{background-image:var(--deck-back)!important;background-position:center;background-size:cover}
.deck-options{display:grid;gap:12px;margin:22px 0}
.deck-option{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:18px;text-align:left;padding:14px;border:1px solid #8f774969;background:#12251bb3;border-radius:6px;color:#ecd9b2;min-width:0}
.deck-option[aria-pressed=true]{border-color:#dbb876;background:#34442ba6;box-shadow:inset 0 0 0 1px #c5a56a44}
.deck-option:hover{border-color:#dab576}.deck-option:disabled{cursor:wait;opacity:.65}
.deck-preview{height:102px;position:relative;display:block;pointer-events:none}
.deck-preview img{position:absolute;width:65px;height:98px;object-fit:contain;border-radius:4px;box-shadow:0 3px 7px #0008;left:0;top:0;transform:rotate(-8deg)}
.deck-preview img+img{left:30px;top:2px;transform:rotate(5deg)}
.deck-option strong{display:block;font:20px/1.25 "Literata", Georgia,serif}.deck-option small{display:block;color:#b8b59b;font:12px/1.5 "Golos Text", Arial,sans-serif;margin-top:7px}.deck-option em{display:block;color:#e7c486;font:13px "Literata", Georgia,serif;margin-top:10px}
@media(max-width:420px){.deck-option{grid-template-columns:74px minmax(0,1fr);gap:12px;padding:12px}.deck-preview{height:86px}.deck-preview img{width:54px;height:81px}.deck-preview img+img{left:20px}.deck-option strong{font-size:18px}}