:root{color-scheme:dark}
*{box-sizing:border-box}
html,body,main{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#edf2e7;font:14px/1.5 system-ui,sans-serif}
.stage{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:#000}
canvas{display:block;touch-action:none;outline:none;max-width:100%;max-height:100%}
#credits{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:5;
 padding:3px 8px;border-radius:4px;background:#131910e8;color:#f4f1db;font-size:clamp(9px,1.55vmin,13px);white-space:nowrap}
#credits{pointer-events:none}
#credits a{color:inherit;pointer-events:auto}
body.playing:has(#tower-status:not([hidden])) #credits{top:clamp(36px,7vh,66px)}
button{border:1px solid #a8c681;border-radius:7px;background:#badb8c;color:#17210f;padding:10px 20px;font:inherit;font-weight:700;cursor:pointer}
button:hover:enabled{filter:brightness(1.08)}
button:focus-visible{outline:2px solid #d0ecab;outline-offset:3px}
.secondary{background:transparent;color:#d4e1c6;border-color:#61784d}
#startup-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:10px 14px;
 background:#152011ed;color:#edf2e7;border:1px solid #61784d;border-radius:8px;pointer-events:none;white-space:nowrap}
#error{position:absolute;inset:0;overflow:auto;background:#211610f5;color:#ffd2b4;padding:25px;z-index:8}
#error pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;user-select:text}
#error h2{margin-top:0}
.error-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
body.playing.portrait-game .stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
#web-text-input{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:8px;padding:10px;background:#17210ff5}
#web-text-value{flex:1;min-width:0;padding:8px;font:16px system-ui;background:#fff;color:#111}
#diagnostics-dialog{width:min(800px,94vw);max-height:90dvh;overflow:auto;background:#192316;color:#e9efdf;border:1px solid #a8c681;border-radius:12px;padding:20px}
#diagnostics-dialog::backdrop{background:#000b}
#diagnostics-text{display:block;width:100%;height:45dvh;resize:vertical;margin:12px 0;padding:10px;background:#10170f;color:#edf2e7;font:12px/1.5 monospace}
#diagnostics-dialog>div{display:flex;gap:8px;flex-wrap:wrap}
#audio-warning{position:absolute;bottom:8px;left:8px;z-index:8;max-width:85%;padding:7px 10px;border-radius:6px;background:#30220ee8;color:#ffe3a1;font-size:12px;pointer-events:none}
#tower-menu{position:absolute;inset:0;z-index:2;pointer-events:none}
#tower-menu[hidden]{display:none}
#tower-start{position:absolute;left:66%;top:34%;transform:translate(-50%,-50%) rotate(5deg);pointer-events:auto;
 background:linear-gradient(155deg,#b9b7bd,#777482 54%,#504e5b);border:4px solid #3d3b44;border-radius:16px 18px 9px 9px;
 padding:.55em 1.45em;color:#ccfb76;text-shadow:0 2px #394614,1px 0 #394614;box-shadow:inset 0 2px 0 #e0dce283,0 5px 0 #27252dcc;
 font-size:clamp(19px,4.1vmin,37px);letter-spacing:.12em;white-space:nowrap}

#tower-status{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;padding:4px 10px;border-radius:4px;background:#182013e8;color:#fff1c4;font:600 13px/1.35 system-ui;white-space:nowrap;pointer-events:none}
#tower-status[hidden]{display:none}
#coop-open{position:absolute;left:66%;top:46%;transform:translate(-50%,-50%) rotate(5deg);pointer-events:auto;
 background:linear-gradient(155deg,#b9b7bd,#777482 54%,#504e5b);border:4px solid #3d3b44;border-radius:14px;
 padding:.55em 1.4em;color:#ccfb76;text-shadow:0 2px #394614;box-shadow:0 4px #27252dcc;
 font-size:clamp(17px,3.2vmin,29px);white-space:nowrap}
#coop-lobby{color:#eef1e2;background:#1a2418;border:1px solid #657c4f;border-radius:12px;
 width:min(92vw,552px);max-height:92dvh;overflow:auto;padding:clamp(14px,4vw,24px)}
#coop-lobby::backdrop{background:#000a}
#coop-lobby h2{margin:0 0 16px}
#coop-lobby form,#coop-waiting{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#coop-rules{flex-basis:100%;width:100%;min-width:0;margin:2px 0 6px;padding:10px 12px;
 border:1px solid #536748;border-radius:6px}
#coop-rules legend{padding:0 4px;font-weight:700}
.coop-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.coop-rule-grid label{display:grid;gap:3px;font-size:13px}
#coop-rules input,#coop-rules select{width:100%;min-width:0}
#coop-rules p{margin:8px 0 0;color:#c1d3af;font-size:12px}
.coop-more{margin-top:10px}
.coop-more summary{cursor:pointer}
.coop-more label{display:block;margin-top:7px}
#coop-rules .coop-more input{width:auto;vertical-align:middle}
#coop-summary{width:100%;color:#ffe4a1}
#coop-settings{width:100%}
#coop-lobby input,#coop-lobby select{max-width:100%;font:inherit;padding:8px;color:inherit;background:#263322;border:1px solid #7d9166;border-radius:5px}
#coop-join input{width:8ch;text-transform:uppercase}
#coop-invite{width:min(50vw,245px)}
#coop-message{display:block;min-height:2em;margin-bottom:8px;color:#ffe4a1;overflow-wrap:anywhere}
#coop-host{position:absolute;z-index:5;bottom:36px;right:9px;display:flex;gap:7px;align-items:center;
 padding:4px 7px;background:#182013ec;border-radius:4px;color:#fff1c4;pointer-events:none;font-size:12px}
#coop-host button{padding:2px 7px;pointer-events:auto}
#coop-layout{position:absolute;z-index:6;right:9px;bottom:74px;width:min(370px,calc(100% - 18px),55dvh);
 padding:9px;background:#182013f5;border:1px solid #819763;border-radius:8px;color:#fff1c4;box-shadow:0 4px 14px #0008;font-size:13px}
.coop-layout-header{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.coop-layout-header label{font-weight:700;margin-right:auto}
.coop-layout-header select,.coop-layout-header button{border-radius:4px;padding:4px 6px;font:inherit}
.coop-layout-header select{background:#273522;color:inherit;border:1px solid #819763}
#coop-layout-map{width:100%;height:auto;border-radius:3px}
#coop-layout-status{margin:6px 0 0}
#versus-lobby-rules{flex-basis:100%;margin:4px 0;color:#d6e5c9}
#versus-draft{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:auto;padding:8px;
 background:#202d1b url('./coop-art/background1.jpg') 9% center/cover no-repeat}
.versus-draft-inner{position:relative;width:min(1050px,100%,146dvh);min-width:min(375px,100%);margin:auto;color:#ffedaf;
 --tray-wood:url('./coop-art/SeedBank.png');--deck-wood:url('./coop-art/SeedChooser_Background.png');--card-size:clamp(27px,7.6dvh,62px)}
.versus-trays,.versus-decks{display:grid;grid-template-columns:minmax(0,61fr) minmax(0,39fr);gap:3px}
.versus-trays{margin-bottom:3px}
.versus-tray{position:relative;isolation:isolate;display:flex;align-items:center;gap:2%;min-width:0;
 height:calc(var(--card-size) + 10px);padding:5px 3%;box-shadow:0 2px 2px #0009}
.versus-tray::before,.versus-deck::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--tray-wood) center/100% 100% no-repeat}
.zombie-tray::before,.zombie-deck::before{filter:hue-rotate(207deg) saturate(.63) brightness(.83)}
.versus-tray>span{flex:0 1 12%;min-width:28px;align-self:stretch;display:grid;align-content:end;justify-items:center;
 padding:0 2px 1px;border:1px solid #62431e;border-radius:4px;background:#f5dfa6 url('./coop-art/Sun1.png') center 4%/auto 68% no-repeat;
 color:#332913;font-weight:900;font-size:clamp(9px,2dvh,16px);line-height:1.1}
.zombie-tray>span{order:1;background-color:#e8dcee;background-image:url('./coop-art/brain.png');border-color:#555577}
.versus-picked{min-width:0;flex:1;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:3px;height:100%}
.versus-empty-card{border:1px solid #1d0d048c;border-radius:3px;background:#2e10094f}
.zombie-tray .versus-empty-card{background:#160e3355;border-color:#120e2b9c}
.versus-deck{position:relative;isolation:isolate;min-width:0;min-height:calc(7 * var(--card-size) + 28px);padding:clamp(5px,1.3vw,13px)}
.versus-deck::before{background-image:var(--deck-wood);filter:brightness(.8) saturate(1.25)}
.zombie-deck::before{filter:hue-rotate(207deg) saturate(.60) brightness(.76)}
.versus-deck h3{position:relative;display:flex;justify-content:center;align-items:center;gap:.5em;margin:0 0 4px;
 color:#ffd26a;font-size:clamp(11px,2.6vmin,21px);font-weight:950;line-height:1.15;text-shadow:1px 2px 1px #281300}
.zombie-deck h3{color:#a6de78;text-shadow:1px 2px 1px #0b0920}
.versus-deck h3 small{font-size:.68em;color:#f7e1a9}
.versus-deck:has(.active-side) h3::before{content:'▼';font-size:.8em;color:#ffe354;text-shadow:0 1px 3px #100a00}
.zombie-deck:has(.active-side) h3::before{color:#9ad4ff}
.versus-deck .versus-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.zombie-deck .versus-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
.versus-card{position:relative;isolation:isolate;display:block;min-width:0;width:100%;height:var(--card-size,42px);padding:0;overflow:hidden;
 border:1px solid #382c1a;border-radius:3px;color:#231d11;background:#ece2b6;box-shadow:0 1px 1px #0009}
.versus-card-picture{position:absolute;inset:0 0 15%;z-index:-1;background:url('./coop-art/cards.png') no-repeat;background-size:400% 1300%}
.zombie-card{background:#c7cae6 url('./coop-art/Almanac_ZombieWindow.png') center/100% 100% no-repeat;border-color:#494568}
.zombie-card .versus-card-picture{inset:0 3% 12%;background-image:url('./coop-art/versus-zombies.png');background-size:600% 600%}
.versus-card-cost{display:block;position:absolute;bottom:0;left:0;right:0;padding:0 2px;background:#efe5bd;
 text-align:center;font-size:clamp(8px,1.6dvh,13px);line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums}
.zombie-card .versus-card-cost{background:#dddaf0;color:#301b45}
.versus-card:disabled,.versus-card[aria-disabled=true]{filter:brightness(.67);cursor:default}
.versus-card[data-picked]{filter:brightness(.44)}
.versus-card[data-unavailable]{filter:grayscale(1) brightness(.56)}
.versus-picked .versus-card{height:100%;filter:none}
.versus-card[aria-pressed=true],.versus-card:hover:enabled:not([aria-disabled=true]),.versus-card:focus-visible:not([aria-disabled=true]){z-index:1;outline:2px solid #ffe365;outline-offset:-2px;filter:brightness(1.13)}
.zombie-card[aria-pressed=true],.zombie-card:hover:enabled:not([aria-disabled=true]),.zombie-card:focus-visible:not([aria-disabled=true]){outline-color:#97c8ff}
.versus-draft-footer{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:3px 0}
.versus-draft-footer p{margin:0;padding:2px 8px;border-radius:3px;background:#111107df;color:#fff2b8;font-weight:700}
#versus-draft-confirm{margin-left:auto;padding:3px 8px;font-size:12px}
#versus-draft-confirm:disabled{opacity:.75;cursor:default}
#versus-draft-exit{margin-left:auto}
#versus-draft-confirm:not([hidden])+#versus-draft-exit{margin-left:0}
#versus-draft-exit{background:#291c10e6;color:#fff0c5;border-color:#c6a467}
#versus-tip{position:absolute;z-index:3;display:grid;width:max-content;max-width:min(250px,100%);gap:2px;padding:4px 8px;pointer-events:none;
 border:2px solid #885a2b;border-radius:3px;background:#ffffc7;color:#22180c;font-size:clamp(10px,1.7vmin,14px);box-shadow:0 2px 4px #0009}
#versus-tip strong{font-size:1.05em}
#versus-hand{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
#versus-hand .versus-card{width:45px}
#versus-hud{position:absolute;z-index:7;right:8px;bottom:7px;max-width:min(510px,calc(100% - 16px));padding:6px 8px;border:1px solid #8b8068;border-radius:7px;background:#1c2119f2;color:#fff1c4;font-size:12px}
.versus-score,.versus-tools,#versus-lanes{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap}
.versus-tools{margin-top:3px}
#versus-lanes{gap:3px;margin:4px 0}
#versus-hud button:not(.versus-card),#versus-draft-exit{padding:3px 6px;font-size:12px}
#versus-notice{display:block;color:#ffdb83}
#versus-notice:empty{display:none}
#versus-remote{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#0e120e}
#versus-frame{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
#versus-frame-message{position:absolute;padding:7px 10px;background:#21241be0;border-radius:5px}
@media(max-height:430px){.versus-deck{padding:5px}#versus-hud{font-size:11px}}
[hidden]{display:none!important}