:root{color-scheme:dark;--bg:#101b20;--panel:#17262c;--line:#304148;--ink:#f2f1e9;--muted:#95a8ac;--mint:#aceecb;--orange:#eca989;--mono:Consolas,'Courier New',monospace;--sans:'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button{transition:background .15s,transform .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.1)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:4px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:clamp(48px,5.5vw,78px);line-height:1.02;letter-spacing:-4px;font-weight:650}h2{font-size:32px;letter-spacing:-1px;font-weight:600}h3{font-size:18px;font-weight:600}p{line-height:1.7}.topbar{height:88px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:1px}.brand-light{font-weight:350;margin-left:5px}.brand-mark{height:34px;width:34px;background:var(--mint);color:var(--bg);font-size:25px;line-height:34px;text-align:center;position:relative;transform:skew(-7deg);font-weight:900}.brand-mark span{font-size:16px;position:absolute;right:-5px;top:-8px}.top-nav{display:flex;gap:30px;align-items:center}.build-tag,.eyebrow{font:11px var(--mono);letter-spacing:2px;color:var(--muted)}.build-tag b{color:var(--mint);margin-left:10px}.text-button{border:0;color:var(--ink);background:transparent;padding:9px 0;font-size:13px}.text-button span{margin-left:12px;color:var(--mint)}main{max-width:1500px;margin:auto;padding:0 5%}footer{max-width:1500px;padding:28px 5% 24px;margin:auto;display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:1px}.status-dot{display:inline-block;background:var(--mint);border-radius:50%;height:6px;width:6px;margin-right:8px}.hero{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;padding:64px 0 54px}.hero-copy .eyebrow{color:var(--mint);display:block;margin-bottom:25px}.hero-copy h1 em{font-style:normal;color:var(--mint)}.hero-copy>p{color:var(--muted);font-size:16px;max-width:380px;margin:23px 0 27px}.hero-details{display:flex;gap:22px;font:10px var(--mono);color:#bcc9c9;letter-spacing:1px}.hero-details span:before{content:'+';margin-right:8px;color:var(--mint)}.arena-preview{position:relative;border:1px solid #40534f;border-radius:12px;background:#1c3030;overflow:hidden;box-shadow:0 20px 90px #0003;transform:rotate(-1deg)}.arena-label{padding:15px 20px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1.5px;background:#152528}.arena-label .mint{color:var(--mint)}.arena-preview canvas{width:100%;display:block;aspect-ratio:1.63}.preview-bottom{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid #40534f;font-size:12px}.preview-bottom span{font:10px var(--mono);color:var(--muted)}.section-label{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}.section-label span{font:11px var(--mono);color:var(--muted);letter-spacing:1.5px}.section-label small{font-size:11px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.mode-card{border:1px solid var(--line);background:#16252b;border-radius:8px;padding:24px;display:flex;flex-direction:column;align-items:start;position:relative;min-height:247px}.mode-card.featured{background:#213932;border-color:#526f5e}.mode-icon{font-size:26px;color:var(--mint);margin-bottom:18px;line-height:1}.mode-card .index{position:absolute;right:23px;top:25px;font:10px var(--mono);color:var(--muted)}.mode-card p{color:var(--muted);font-size:13px;margin:10px 0 21px;max-width:320px}.primary,.secondary,.quiet{border-radius:5px;padding:12px 18px;font-weight:600;font-size:13px;border:1px solid transparent}.primary{background:var(--mint);color:#152820}.secondary{background:transparent;border-color:#607570;color:var(--ink)}.quiet{background:#26383f;color:#d0dddd;border-color:#354c54}.mode-card button{margin-top:auto;width:100%;text-align:left;display:flex;justify-content:space-between}.lobby-tools{margin-top:18px;display:flex;justify-content:space-between;gap:20px;align-items:center;background:#132127;border:1px solid var(--line);border-radius:8px;padding:18px 24px}.name-field{display:flex;gap:14px;align-items:center}.small-label{font:10px var(--mono);color:var(--muted);letter-spacing:1px}input,select{background:#101c21;border:1px solid #40565e;border-radius:5px;color:var(--ink);padding:10px 12px;min-width:0}input::placeholder{color:#72888e}.join-form{display:flex;gap:8px;align-items:center}.join-form input{width:110px;text-transform:uppercase;font-family:var(--mono);letter-spacing:2px}.roster-strip{display:flex;gap:18px;align-items:center;margin-top:34px;flex-wrap:wrap}.roster-chip{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted)}.roster-chip svg{width:21px;height:21px}.session-head{display:flex;justify-content:space-between;align-items:center;padding:25px 0 20px;gap:15px}.session-head h2{font-size:24px}.session-head .eyebrow{display:block;margin-bottom:7px}.session-actions{display:flex;gap:12px;align-items:center}.pill{font:10px var(--mono);letter-spacing:1px;border:1px solid #466054;border-radius:30px;color:var(--mint);padding:7px 11px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:18px}.battle-panel{border:1px solid #3a5156;border-radius:9px;overflow:hidden;background:#172e30}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:17px 22px;background:#192a30}.commander{display:flex;gap:11px;align-items:center;min-width:0}.commander.enemy{flex-direction:row-reverse;text-align:right}.avatar{width:34px;height:34px;border:1px solid #54796b;background:#2c4940;border-radius:7px;display:grid;place-items:center;color:var(--mint);font-weight:700;font-size:17px}.enemy .avatar{background:#483531;color:var(--orange);border-color:#7c5a4e}.commander-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:160px;white-space:nowrap}.hearts{font-size:13px;letter-spacing:3px;color:var(--mint);margin-top:4px}.enemy .hearts{color:var(--orange)}.heart-empty{opacity:.2}.round-label{text-align:center;font:10px var(--mono);color:var(--muted);letter-spacing:1px}.round-label strong{font-size:22px;display:block;color:var(--ink);margin-top:4px;font-weight:500}.canvas-wrap{position:relative;line-height:0}.canvas-wrap canvas{display:block;width:100%;aspect-ratio:1.75}.canvas-caption{position:absolute;bottom:14px;left:18px;right:18px;display:flex;justify-content:space-between;color:#98b5b2;font:9px var(--mono);letter-spacing:1px;pointer-events:none}.phase-bar{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:15px;background:#1b3034;border-top:1px solid #395054}.phase-title{font-size:13px;font-weight:600}.phase-sub{font-size:11px;color:var(--muted);margin-top:5px}.timer{font:20px var(--mono);color:var(--mint);min-width:44px;text-align:right}.side-panel{background:#17262c;border:1px solid var(--line);border-radius:9px;padding:20px;display:flex;flex-direction:column}.side-panel h3{font-size:14px;margin:12px 0 18px}.rule-item{border-bottom:1px solid var(--line);padding:0 0 13px;margin-bottom:13px}.rule-item b{font-size:12px;font-weight:600}.rule-item p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:6px}.round-history{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.round-dot{width:28px;height:28px;display:grid;place-items:center;border:1px solid #456256;font:11px var(--mono);background:#2e4d40;color:var(--mint);border-radius:4px}.round-dot.loss{background:#483632;border-color:#6a5147;color:var(--orange)}.round-dot.draw{background:#34424b;color:#a9b8ca;border-color:#4a5f6c}.side-panel .connection{font:10px var(--mono);color:var(--muted);margin-top:auto;padding-top:18px;line-height:1.7}.draft-panel{margin-top:22px}.draft-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.draft-heading h3{font-size:16px}.draft-heading span{font:10px var(--mono);color:var(--muted)}.draft-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.unit-card{background:#1a2a31;border:1px solid #3c5058;text-align:left;color:var(--ink);padding:15px;border-radius:7px;position:relative;min-height:161px}.unit-card.selected{border-color:var(--mint);background:#284137;box-shadow:0 0 0 1px var(--mint)}.unit-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.unit-icon{width:41px;height:41px;border:1px solid currentColor;border-radius:10px;padding:8px;background:#101b2070}.unit-icon svg{width:100%;height:100%}.unit-card .small-label{font-size:9px;letter-spacing:.5px}.unit-card h3{font-size:16px;margin-bottom:7px}.unit-card p{font-size:11px;line-height:1.5;color:var(--muted);min-height:34px}.unit-stats{display:flex;gap:13px;margin-top:13px;font:10px var(--mono);color:#bdcece}.formation-heading{margin:18px 0 10px;display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:1px}.formation{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.slot{padding:10px 6px;min-height:68px;background:#17262b;border:1px dashed #3d5358;color:var(--muted);border-radius:5px;text-align:center;font-size:10px;position:relative}.slot.occupied{border-style:solid}.slot.selected{border-color:var(--mint);background:#29463a}.slot svg{height:20px;width:20px;display:block;margin:0 auto 5px}.slot small{font:9px var(--mono);display:block;margin-top:5px;color:var(--muted)}.slot .plus{display:block;font-size:21px;line-height:25px;color:#6c878b}.formation-actions{margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:15px}.formation-actions p{font-size:11px;color:var(--muted)}.recap{margin-top:20px;background:#17282d;border:1px solid #385159;border-radius:8px;padding:20px}.recap-top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.recap-top p{font-size:12px;color:var(--muted);margin-top:7px}.recap-buttons{display:flex;gap:8px;flex-wrap:wrap}.stat-table{width:100%;border-collapse:collapse;font-size:11px}.stat-table th{text-align:right;font:9px var(--mono);letter-spacing:1px;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line)}.stat-table td{padding:9px 6px;text-align:right;border-bottom:1px solid #293d43}.stat-table th:first-child,.stat-table td:first-child{text-align:left}.stat-table td:first-child span{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px}.stat-table tr.enemy-row{opacity:.72}.waiting{padding:65px 30px;max-width:620px;margin:45px auto;text-align:center;border:1px solid #3a514f;border-radius:12px;background:radial-gradient(ellipse at top,#29483d,#17262c 70%)}.waiting .eyebrow{color:var(--mint)}.waiting h2{margin:18px 0 12px}.waiting p{color:var(--muted);max-width:420px;margin:auto}.room-code{font:48px var(--mono);letter-spacing:12px;color:var(--mint);padding:32px 0}.waiting button{margin:10px 4px}.waiting .note{font-size:11px;margin-top:18px}.sandbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.sandbox-editor{padding:18px;border:1px solid var(--line);border-radius:8px;background:#17262c}.sandbox-editor h3{font-size:14px;margin-bottom:14px}.editor-row{display:grid;grid-template-columns:58px 1fr 68px;gap:8px;align-items:center;margin-top:8px}.editor-row label{font:10px var(--mono);color:var(--muted)}.editor-row select{width:100%;font-size:12px;padding:8px}.sandbox-controls{display:flex;align-items:center;gap:12px;margin:18px 0;flex-wrap:wrap}.sandbox-controls input{width:100px}.sandbox-controls .small-label{margin-left:auto}.empty-note{padding:25px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:8px;font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#e6eee4;color:#1e302b;padding:13px 22px;max-width:90vw;border-radius:6px;z-index:20;box-shadow:0 8px 40px #0005;font-size:13px;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{background:#1a2b30;border:1px solid #567168;color:var(--ink);border-radius:12px;padding:36px;max-width:560px;width:calc(100% - 30px)}dialog::backdrop{background:#081114cc;backdrop-filter:blur(5px)}dialog h2{margin:16px 0 24px}dialog ol{padding-left:20px}dialog li{padding-left:7px;margin-bottom:15px;line-height:1.6;color:#b1c1c3;font-size:13px}dialog li b{color:var(--ink)}dialog p{font-size:12px;margin:22px 0}dialog .primary{width:100%}.close-button{position:absolute;right:20px;top:14px;border:0;background:transparent;font-size:28px;color:var(--muted)}.muted{color:var(--muted)}
@media(min-width:1600px){.hero{padding-top:80px}.hero-copy h1{font-size:85px}}
@media(max-width:1000px){.hero{gap:28px}.hero-copy h1{font-size:57px}.game-layout{grid-template-columns:minmax(0,1fr) 215px}.side-panel{padding:16px}.hero-details{gap:13px;letter-spacing:0}.lobby-tools{flex-wrap:wrap}.mode-card{padding:20px}.unit-card{padding:12px}}
@media(max-width:760px){.topbar{height:70px}.top-nav{gap:15px}.build-tag{display:none}.hero{grid-template-columns:1fr;padding:35px 0 30px;gap:30px}.hero-copy h1{font-size:59px}.hero-copy>p{max-width:100%;margin:18px 0}.arena-preview{transform:none}.hero-details{gap:20px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:0;padding:20px 20px 20px 72px}.mode-card .mode-icon{position:absolute;top:23px;left:23px}.mode-card .index{display:none}.mode-card p{max-width:100%;margin-bottom:16px}.mode-card button{width:100%}.lobby-tools{padding:18px;gap:16px}.name-field{width:100%;justify-content:space-between}.name-field input{width:65%}.join-form{width:100%;justify-content:space-between}.join-form input{flex:1}.roster-strip{gap:15px}.roster-strip>.small-label{width:100%}.game-layout{grid-template-columns:1fr}.side-panel{display:none}.session-head{padding-top:20px}.session-head h2{font-size:20px}.session-actions{gap:8px}.session-actions .pill{display:none}.scoreboard{padding:13px 12px;gap:8px}.commander-name{max-width:95px;font-size:11px}.avatar{width:27px;height:30px}.round-label strong{font-size:18px}.draft-cards{gap:7px}.unit-card{padding:10px;min-height:185px}.unit-card h3{font-size:13px}.unit-card-top{display:block}.unit-card .small-label{font-size:8px;display:block;margin-top:9px;min-height:18px}.unit-icon{width:31px;height:31px;padding:6px}.unit-card p{font-size:10px;min-height:61px}.unit-stats{font-size:9px;gap:6px;flex-wrap:wrap}.formation{grid-template-columns:repeat(3,1fr)}.formation-actions{align-items:flex-start}.formation-actions p{max-width:55%}.formation-heading{font-size:8px}.recap{padding:15px}.recap-top{align-items:start;flex-direction:column}.recap h2{font-size:25px}.sandbox-grid{grid-template-columns:1fr}.canvas-wrap canvas{aspect-ratio:1.5}.canvas-caption{font-size:8px;bottom:10px}.phase-bar{padding:12px}.phase-sub{font-size:10px}.sandbox-controls .small-label{margin-left:0}footer{gap:20px;font-size:8px;line-height:1.5}.room-code{font-size:36px;letter-spacing:8px}.waiting{padding:40px 18px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Three-row combat presentation */
.hero{grid-template-columns:1fr 1fr;gap:70px;padding:40px 0}.arena-preview{width:min(100%,410px);justify-self:center;transform:rotate(-1deg)}.arena-preview canvas{aspect-ratio:10.6/14.3}.hero-copy h1{font-size:clamp(48px,5.2vw,76px)}
.vertical-duel{grid-template-columns:minmax(340px,520px) minmax(340px,1fr);align-items:start;max-width:1150px;margin:0 auto;gap:28px}.combat-column,.command-column{min-width:0}.combat-column{position:sticky;top:12px}.sandbox-layout .combat-column{position:static}.canvas-wrap canvas{aspect-ratio:10.6/14.3}.battle-panel{box-shadow:0 12px 40px #0003;border-color:#607469}.canvas-caption{top:27px;bottom:auto;justify-content:center;font-size:8px;color:#edf5da;opacity:.85}.scoreboard{padding:13px 16px;background:#1b2e31}.scoreboard .commander.enemy{flex-direction:row;text-align:left}.scoreboard .commander:last-child{flex-direction:row-reverse;text-align:right}.phase-bar{padding:14px}.phase-title{font-size:12px}.phase-sub{font-size:10px;line-height:1.5}.command-column .draft-panel{margin-top:0}.draft-heading h3{font-size:18px}.draft-heading{margin-bottom:14px}.draft-cards{gap:10px}.unit-card{padding:0;overflow:hidden;min-height:0;background:#213239;border-color:#42565b}.card-portrait{height:132px;display:flex;justify-content:center;align-items:flex-end;position:relative;background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--unit-color) 24%,transparent),transparent 75%),linear-gradient(#2c4044,#23353b)}.card-portrait:after{content:'';position:absolute;inset:9px;border:1px solid #d5e6d414;border-radius:50% 50% 12px 12px;pointer-events:none}.card-portrait img{width:120px;height:128px;object-fit:contain;filter:drop-shadow(0 4px 3px #0003);transition:transform .18s}.unit-card:hover:not(:disabled) .card-portrait img{transform:translateY(-4px)}.unit-card.selected{background:#2b443b}.row-badge{position:absolute;top:7px;left:7px;padding:3px 6px;background:#142521cf;border-radius:3px;font:8px var(--mono);text-transform:uppercase;color:#cee1d3;letter-spacing:.6px}.card-copy{padding:12px 11px}.card-copy h3{font-size:15px;margin:0 0 4px}.card-trait{font-size:10px;color:#bacac6}.unit-stats{margin-top:10px}.unit-detail{margin-top:12px;border:1px solid #476556;border-radius:6px;padding:12px 14px;background:#223a32;font-size:11px;display:grid;gap:6px;min-height:115px}.unit-detail b{font-size:12px}.unit-detail p{font-size:11px;color:#b4c5bf;line-height:1.5;margin-top:5px}.strength{color:#b5dfbc}.weakness{color:#e5b495}.draft-hint{color:var(--muted);font-size:11px;padding:13px 2px;min-height:58px}.formation-heading{margin-top:13px;margin-bottom:10px}.formation-row{background:#17282d;border:1px solid #354b50;border-radius:7px;padding:10px;margin:8px 0}.formation-row.active-row{border-color:#a8d9b2;background:#233b32;box-shadow:0 0 0 1px #a8d9b230}.row-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.row-title b{font-size:11px;color:#cedbd5}.row-title span{font:8px var(--mono);color:#95aba3;letter-spacing:1px}.formation{grid-template-columns:repeat(3,1fr);gap:7px}.slot{min-height:65px;padding:4px 5px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;background:#1c3033}.slot.occupied{justify-content:flex-start}.slot img{width:42px;height:49px;object-fit:contain}.slot .plus{font-size:20px;margin:0 5px 0 0}.slot:disabled{opacity:.26}.slot.occupied:disabled{opacity:.55}.formation-actions{align-items:center}.formation-actions p{font-size:10px;max-width:58%;line-height:1.5}.formation-actions .primary{white-space:nowrap;padding:12px}.command-column .side-panel{margin-top:20px;padding:16px;background:transparent}.command-column .side-panel h3{display:none}.command-column .side-panel .rule-item{margin-top:10px;margin-bottom:0;padding-bottom:10px}.command-column .side-panel .rule-item p{font-size:11px}.command-column .side-panel .small-label{margin-top:14px}.command-column .recap{margin-top:0}.sandbox-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:0}.sandbox-editor{padding:12px}.sandbox-editor h3{font-size:12px;line-height:1.4;min-height:32px;margin-bottom:5px}.editor-row-label{font:10px var(--mono);color:var(--mint);margin:18px 0 10px;text-transform:uppercase;letter-spacing:1px}.editor-row{grid-template-columns:1fr 64px;gap:5px;margin-bottom:9px}.editor-row label{grid-column:1/-1;font-size:8px}.editor-row select{padding:8px 4px;font-size:11px}.sandbox-controls{gap:8px}.sandbox-controls .small-label{margin-left:0}.sandbox-controls input{width:70px}.unit-guide{margin-top:18px;border:1px solid var(--line);border-radius:7px;padding:14px;background:#17282d}.unit-guide summary{cursor:pointer;font-size:12px;color:var(--mint)}.guide-unit{display:flex;gap:12px;align-items:center;padding-top:15px}.guide-unit img{width:50px;height:62px;object-fit:contain}.guide-unit b{font-size:12px}.guide-unit p{font-size:11px;line-height:1.6}.stat-table{font-size:10px}.recap-buttons .primary,.recap-buttons .secondary{font-size:12px;padding:10px}.recap-top{flex-wrap:wrap}
@media(max-width:1100px){.vertical-duel{grid-template-columns:minmax(310px,.95fr) minmax(330px,1fr);gap:20px}.hero{gap:35px}.card-portrait{height:115px}.card-portrait img{width:107px;height:115px}.slot{font-size:9px}.slot img{width:31px;height:41px}.card-copy{padding:10px 8px}.card-copy h3{font-size:13px}.card-trait{font-size:9px}.formation-actions{flex-wrap:wrap}.formation-actions p{max-width:100%}.sandbox-grid{grid-template-columns:1fr}.sandbox-editor h3{min-height:0}.editor-row{grid-template-columns:48px 1fr 65px}.editor-row label{grid-column:auto}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:28px;padding:30px 0}.arena-preview{max-width:350px;transform:none}.vertical-duel{grid-template-columns:1fr;gap:22px;max-width:520px}.combat-column{position:static}.canvas-wrap canvas{aspect-ratio:10.6/14.3}.side-panel{display:none}.card-portrait{height:116px}.card-portrait img{height:112px;width:105px}.draft-cards{gap:7px}.unit-card{min-height:0}.card-copy{padding:10px}.card-copy h3{font-size:13px}.unit-stats{font-size:10px;gap:12px}.formation-actions{flex-wrap:nowrap}.formation-actions p{max-width:55%}.slot{font-size:10px;min-height:66px}.slot img{width:39px;height:49px}.scoreboard .commander-name{max-width:100px}.sandbox-grid{grid-template-columns:1fr}.sandbox-controls .primary,.sandbox-controls .secondary{padding:10px;font-size:11px}.sandbox-controls input{width:65px}.command-column .recap{margin-top:0}.hero-copy h1{font-size:58px}.draft-heading h3{font-size:17px}.unit-detail{min-height:115px}.sandbox-editor{padding:16px}}
.deck-screen{max-width:1060px;margin:0 auto}.deck-screen .session-head p{color:var(--muted);margin:12px 0 0}.deck-status{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid #314347;font-size:11px;letter-spacing:1px;color:#a8b9b5}.deck-status b{color:#c3f2d6;font-size:20px;margin-right:8px}.deck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.deck-card{text-align:left;padding:0;border:1px solid #33484a;border-radius:13px;overflow:hidden;background:#17282b;color:#e5eee7;cursor:pointer;transition:transform .15s,border-color .15s}.deck-card:hover{transform:translateY(-3px);border-color:#a9e8c5}.deck-card.chosen{border-color:#b4eccb;box-shadow:0 0 0 1px #b4eccb}.deck-card:disabled{cursor:default;opacity:.8}.deck-portrait{height:142px;position:relative;background:radial-gradient(ellipse at center,#799785 0,#334e47 80%);overflow:hidden}.deck-portrait img{display:block;height:170px;width:100%;object-fit:contain;margin-top:0}.deck-portrait .row-badge{position:absolute;left:12px;bottom:10px}.selection-check{position:absolute;right:12px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#263e35;color:#c2eed3}.chosen .selection-check{background:#b4eccb;color:#1d382d}.deck-copy{padding:15px 18px}.deck-copy h3{margin:0 0 5px;font-size:20px}.deck-copy p{font-size:11px;line-height:1.5;margin:9px 0 0}.deck-copy .card-trait{font-size:12px}.deck-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0}.deck-footer p{font-size:13px;line-height:1.7;color:#a4b8b1;margin:8px 0}.deck-footer .primary{min-width:220px}.army-row{padding:14px 0;border-bottom:1px solid #2a3b3e}.army-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}.army-chip{display:flex;align-items:center;gap:7px;font-size:12px;background:#22383a;border-radius:8px;padding:3px 10px 3px 0}.army-chip img{width:36px;height:40px;object-fit:contain}.army-chip b{color:#c2efd2}.comeback{color:#f3ca91;font-size:11px;letter-spacing:.5px}.add-unit{display:block;color:#b6eecd;margin-top:10px;font-size:11px}.quantity-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 25px}.quantity-grid label{display:flex;align-items:center;gap:6px;background:#203336;padding:6px;border-radius:8px;font-size:12px}.quantity-grid img{width:32px;height:43px;object-fit:contain}.quantity-grid small{display:block;color:#9aafa7;font-size:9px;margin-top:3px}.quantity-grid input{width:48px;margin-left:auto;padding:6px}.deck-card:focus-visible{outline:3px solid #f4d298;outline-offset:3px}
@media(max-width:760px){.deck-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.deck-portrait{height:120px}.deck-portrait img{height:145px}.deck-copy{padding:12px}.deck-copy h3{font-size:17px}.deck-footer{align-items:stretch;flex-direction:column}.deck-status{font-size:9px;letter-spacing:0}.deck-status b{font-size:17px}.deck-screen .session-head{align-items:flex-start}.quantity-grid{grid-template-columns:1fr 1fr}}
.deck-portrait .row-badge{top:auto}
.commander-bar{display:flex;align-items:center;gap:16px;padding:13px 17px;min-height:66px}.commander-bar .commander{flex:1;text-align:left;flex-direction:row}.commander-bar .commander-name{max-width:220px;font-size:13px}.commander-bar .hearts{font-size:18px;white-space:nowrap;margin:0}.commander-bar .team-label{display:block;font:8px var(--mono);letter-spacing:1.1px;margin-bottom:5px}.friendly-bar{background:linear-gradient(100deg,#183c58,#182d3c);border-top:2px solid #58b7f6}.friendly-bar .team-label,.friendly-bar .hearts{color:#85d1ff}.friendly-bar .avatar{background:#245580;border-color:#5aa6de;color:#c6eaff}.enemy-bar{background:linear-gradient(100deg,#4b2e29,#2f292b);border-bottom:2px solid #f19570}.enemy-bar .team-label,.enemy-bar .hearts{color:#ffac8e}.enemy-bar .avatar{background:#703e32;border-color:#de8d6c;color:#ffdac2}.commander-bar .round-label{border-left:1px solid #ffffff20;padding-left:16px;font-size:8px}.commander-bar .round-label strong{font-size:20px}.friendly-bar .hearts{margin-left:auto}@media(max-width:760px){.commander-bar{padding:10px 12px;gap:12px;min-height:62px}.commander-bar .commander-name{max-width:155px}.commander-bar .hearts{font-size:16px}.commander-bar .team-label{font-size:7px}}
.card-portrait .animated-portrait{width:120px;height:128px;display:block;filter:drop-shadow(0 4px 3px #0003)}.deck-portrait .animated-portrait{width:100%;height:142px;display:block}.unit-card:hover .animated-portrait{filter:drop-shadow(0 4px 6px #b5e9d344)}@media(max-width:760px){.card-portrait .animated-portrait{width:105px;height:112px}.deck-portrait .animated-portrait{height:120px}}
.pick-reveals{padding:12px;border:1px solid #48636b;background:#14282e;border-radius:8px;margin-bottom:14px}.reveal-pair{display:grid;grid-template-columns:42px 1fr 1fr;align-items:center;gap:7px;margin-top:10px;animation:reveal-in .35s ease-out}.reveal-unit{display:flex;align-items:center;gap:6px;border-left:2px solid #69c4ff;background:#243e51;padding:5px;border-radius:4px}.reveal-unit.foe{background:#49332e;border-color:#ff9275}.reveal-unit img{width:34px;height:42px;object-fit:contain}.reveal-unit small{font:8px var(--mono);display:block;color:#aacbdc}.reveal-unit.foe small{color:#e6b39f}.reveal-unit b{font-size:11px}.reveal-pair>.small-label{font-size:8px}@keyframes reveal-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.reveal-pair{animation:none}}
.unit-card.bonus-card{border-color:#e6c376;background:linear-gradient(145deg,#403821,#253839);box-shadow:0 0 14px #e6bb5325}.bonus-card .add-unit{color:#ffe3a0;font-weight:800;line-height:1.5}.unit-card .counter-hint{font-size:10px;min-height:0;line-height:1.5;margin:7px 0;color:#b4d9c7}
.round-result-note{color:#c0d4c9;font-size:11px;padding:10px 12px;border-left:2px solid #8bc6ab;background:#23372f;margin-bottom:14px}
.deck-stats{display:flex;gap:12px;flex-wrap:wrap;padding:9px 0 12px;font-size:11px;color:#b9cec9}.deck-stats b{color:#f3e3af;margin-left:3px}.deck-copy .card-trait{display:block;color:#d7b8ed;font-weight:600}.deck-card:last-child:nth-child(3n+1){grid-column:2}@media(max-width:760px){.deck-card:last-child:nth-child(3n+1){grid-column:auto}}

/* Larger battlefield; tactical lanes are intentionally invisible. */
main{max-width:1600px;padding-left:3%;padding-right:3%}
.vertical-duel{max-width:1400px;grid-template-columns:minmax(420px,1.4fr) minmax(340px,1fr);gap:26px}
.round-announcement{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:1.1;background:linear-gradient(transparent 30%,#10232caa 50%,transparent 70%);text-align:center}
.round-announcement[hidden]{display:none}
.round-announcement span{font:700 clamp(16px,3vw,32px) var(--mono);letter-spacing:.28em;color:#fff4ce;text-shadow:0 3px 0 #162d35}
.round-announcement strong{font:900 italic clamp(48px,7vw,92px) var(--sans);letter-spacing:-.06em;color:#fff5d6;text-shadow:3px 5px 0 #203e48,0 0 32px #fff5d650;animation:round-slam .4s cubic-bezier(.16,.8,.3,1) both}
.round-announcement i{width:45%;height:3px;background:linear-gradient(90deg,transparent,#ffe1a0,transparent);margin-top:16px;animation:phase-sweep .6s both}
.round-announcement[data-stage=start] strong{color:#c1f5dc}
/* RD-018 round intro. Resting styles are the final/static state (used as-is with reduced motion); decorative layers rest hidden. */
.round-announcement[data-stage]{background:none;overflow:hidden}
.round-announcement .ra-band,.round-announcement .ra-streak,.round-announcement .ra-ring,.round-announcement .ra-flash,.round-announcement .ra-rays{position:absolute;pointer-events:none;display:block}
.ra-band{left:-5%;right:-5%;top:50%;height:clamp(150px,34%,230px);transform:translateY(-50%) skewY(-4deg);background:linear-gradient(90deg,#0b1d24e6,#15343fd9 50%,#0b1d24e6);border-block:2px solid #ffe1a0aa;box-shadow:0 0 40px #0008;animation:ra-wipe .32s cubic-bezier(.2,.9,.25,1) both}
.ra-streak{top:50%;left:0;width:22%;height:clamp(150px,34%,230px);transform:translate(-120%,-50%) skewX(-24deg);background:linear-gradient(90deg,transparent,#fff6d8aa,transparent);opacity:0;animation:ra-streak .75s .45s ease-in-out both}
.round-announcement .ra-label{position:relative;font:800 clamp(16px,3vw,30px) var(--mono);letter-spacing:.42em;padding-left:.42em;color:#ffe7ae;text-shadow:0 3px 0 #162d35,0 0 18px #ffd88a66;animation:ra-label .45s .08s cubic-bezier(.2,.9,.3,1) both}
.round-announcement .ra-num{position:relative;font:900 italic clamp(72px,12vw,140px) var(--sans);line-height:.95;letter-spacing:-.04em;color:#fff6db;text-shadow:4px 6px 0 #203e48,0 0 36px #ffe1a080;animation:ra-slam .42s .32s cubic-bezier(.12,.85,.3,1.25) both,ra-glow 1.4s .8s ease-in-out infinite alternate}
.ra-ring{top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:4px solid #ffe1a0;box-shadow:0 0 24px #ffe1a0aa,inset 0 0 18px #ffe1a066;opacity:0;animation:ra-ring .7s .6s cubic-bezier(.1,.7,.3,1) both}
.round-announcement .ra-sub{position:relative;margin-top:8px;font:700 normal clamp(11px,1.8vw,16px) var(--mono);letter-spacing:.5em;padding-left:.5em;color:#c1f5dc;animation:ra-flicker .6s .95s steps(1) both}
.round-announcement[data-stage=start] .ra-ring{border-color:#c1f5dc;box-shadow:0 0 30px #c1f5dcaa,inset 0 0 20px #c1f5dc66;animation-delay:0s;animation-duration:.6s}
.ra-flash{inset:0;background:radial-gradient(circle at 50% 50%,#fffbe8cc,#c1f5dc55 30%,transparent 65%);opacity:0;animation:ra-flash .38s ease-out both}
.ra-rays{top:50%;left:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,#c1f5dc33 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 42%);mask:radial-gradient(circle,#000 8%,transparent 42%);opacity:0;animation:ra-rays .7s ease-out both}
.round-announcement[data-stage=start] .ra-start{position:relative;font:900 italic clamp(64px,11vw,128px) var(--sans);letter-spacing:-.05em;color:#dcffec;text-shadow:0 -2px 0 #ffffff,4px 6px 0 #1b3a36,0 0 28px #7fe0a8cc,0 0 60px #7fe0a866;animation:ra-burst .7s cubic-bezier(.15,.9,.3,1) both}
@keyframes ra-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ra-streak{from{opacity:0;transform:translate(-120%,-50%) skewX(-24deg)}20%{opacity:1}to{opacity:0;transform:translate(560%,-50%) skewX(-24deg)}}
@keyframes ra-label{from{opacity:0;transform:translateX(-70px);letter-spacing:1.2em}to{opacity:1;transform:none;letter-spacing:.42em}}
@keyframes ra-slam{0%{opacity:0;transform:scale(3.2) rotate(-8deg);filter:blur(8px)}70%{opacity:1;transform:scale(.9) rotate(-3deg);filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes ra-glow{from{text-shadow:4px 6px 0 #203e48,0 0 24px #ffe1a060}to{text-shadow:4px 6px 0 #203e48,0 0 48px #ffe1a0bb}}
@keyframes ra-ring{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(3.4)}}
@keyframes ra-flicker{0%{opacity:0}20%{opacity:1}35%{opacity:.2}50%{opacity:1}65%{opacity:.4}80%,100%{opacity:1}}
@keyframes ra-flash{from{opacity:1}to{opacity:0}}
@keyframes ra-rays{0%{opacity:0;transform:scale(.5) rotate(0)}25%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(40deg)}}
@keyframes ra-burst{0%{opacity:0;transform:scale(.3) rotate(-6deg)}35%{opacity:1;transform:scale(1.18) rotate(-3deg)}55%{transform:scale(1) rotate(-3deg)}80%{opacity:1;transform:scale(1.04) rotate(-3deg)}100%{opacity:0;transform:scale(1.5) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.round-announcement .ra-start{opacity:1}}
.phase-enter[data-phase=deck] .deck-card{animation:card-deal .55s both}
.phase-enter[data-phase=draft] .unit-card{animation:card-deal .45s both}
.phase-enter .unit-card:nth-child(2),.phase-enter .deck-card:nth-child(2){animation-delay:70ms}
.phase-enter .unit-card:nth-child(3),.phase-enter .deck-card:nth-child(3){animation-delay:140ms}
.phase-enter .deck-card:nth-child(n+4){animation-delay:210ms}
.phase-enter[data-phase=reveal] .reveal-pair:last-child .reveal-unit{animation:reveal-turn .55s both}
.phase-enter[data-phase=reveal] .reveal-pair:last-child .foe{animation-delay:120ms}
[data-phase=locked] .draft-heading h3,[data-phase=waiting] .room-code{animation:waiting-glow 1.8s ease-in-out infinite}
.phase-enter[data-phase=battle] .commander-bar{animation:battle-flash .8s both}
.phase-enter[data-phase=finished] .recap{animation:result-rise .7s both}
.phase-enter[data-phase=draft] .round-result-note{animation:result-rise .5s both}
.phase-enter .phase-bar{animation:phase-sweep .35s both}
.deck-card.chosen .selection-check{animation:selection-pop .25s both}
@keyframes card-deal{from{opacity:0;transform:translateY(24px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes reveal-turn{from{opacity:0;transform:perspective(600px) rotateY(80deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes waiting-glow{50%{color:#c1f5dc;text-shadow:0 0 20px #a6edbe70}}
@keyframes battle-flash{50%{filter:brightness(1.6)}}
@keyframes result-rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes round-slam{from{opacity:0;transform:scale(1.65) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes phase-sweep{from{opacity:0;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1)}}
@keyframes selection-pop{50%{transform:scale(1.25)}}
@media(max-width:900px){.vertical-duel{grid-template-columns:1fr;max-width:680px}.combat-column{position:static}.command-column .side-panel{display:none}}
@media(prefers-reduced-motion:reduce){.phase-enter *,[data-phase=locked] .draft-heading h3,[data-phase=waiting] .room-code,.round-announcement *,.deck-card.chosen .selection-check{animation:none!important}}

.canvas-caption{top:48px}

/* One contained app screen: arena, choices and actions share the same surface. */
body.in-game{height:100dvh;overflow:hidden}
.in-game>.topbar,.in-game>footer{display:none}
.in-game main{height:100dvh;padding:10px;display:flex;align-items:center;justify-content:center}
/* The match window fills the screen's height at a portrait shape (owner request, RD-118: it looked much smaller than it
   should on some screens, capped at 820 × 1100 px). The battlefield is portrait, so on wide screens the height sets
   the size and the width follows at MATCH_ASPECT; phones and tablets in portrait use their full width. */
.match-window{--match-aspect:.8;width:min(100%,calc((100dvh - 20px) * var(--match-aspect)));height:100%;display:flex;flex-direction:column;position:relative;margin:auto}
.arena-toolbar{display:flex;align-items:center;justify-content:space-between;padding:7px 15px;background:#112329;border-bottom:1px solid #3b5157;gap:12px;flex-shrink:0}
.arena-brand{font-size:13px;font-weight:800;letter-spacing:1px}
.arena-brand small{display:block;font:8px var(--mono);color:#a4b9b8;letter-spacing:1px;margin-top:4px}
.arena-logo{display:block;height:24px;width:auto}/* the painted logo in the match header (RD-248) */
.arena-toolbar>div{display:flex;gap:18px}
.arena-toolbar button{font-size:11px;min-height:36px}
.match-window>.commander-bar,.match-window>.phase-bar{flex-shrink:0}
.match-window>.commander-bar{min-height:54px;padding:8px 14px}
.match-window>.phase-bar{padding:9px 14px}
.match-window>.canvas-wrap{flex:1;min-height:0}
.match-window>.canvas-wrap>canvas{height:100%;width:100%;aspect-ratio:auto}
.arena-dock{position:absolute;z-index:3;left:14px;right:14px;bottom:12px;max-height:88%;overflow:auto;overscroll-behavior:contain;line-height:1.4;background:#12272bf5;border:1px solid #66847b;border-radius:14px;padding:16px;box-shadow:0 10px 40px #071b25a0;scrollbar-width:thin;backdrop-filter:blur(10px)}
.arena-dock .draft-panel,.arena-dock .recap{margin:0}
.arena-dock .draft-heading{margin-bottom:9px}
.arena-dock .draft-heading h3{font-size:17px}
.arena-dock .draft-cards{gap:9px}
.arena-dock .card-portrait{height:100px}
.arena-dock .card-portrait .animated-portrait{height:100px;width:100px;aspect-ratio:auto}
.arena-dock .card-copy{padding:9px}
.arena-dock .card-copy h3{font-size:14px}
.arena-dock .counter-hint{display:none}
.arena-dock .card-trait{font-size:10px}
.arena-dock .add-unit{font-size:10px;margin-top:7px}
.arena-dock .draft-hint{min-height:0;padding:8px 0;font-size:10px}
.arena-dock .pick-reveals{padding:7px 9px;margin-bottom:9px}
.arena-dock .reveal-pair{margin-top:5px}
.arena-dock .reveal-unit img{height:30px;width:26px}
.arena-dock .round-result-note{padding:6px 9px;margin-bottom:8px}
.army-details{border-top:1px solid #405659;font-size:11px;padding-top:8px}
.army-details summary{cursor:pointer;color:#b8d8cd}
.result-dock .recap{border:0;padding:0;background:none}
.result-dock .recap-top{gap:12px}
.result-dock .recap-buttons{position:sticky;top:0;background:#12272b;padding:8px 0;z-index:1}
.result-dock.replaying{visibility:hidden;pointer-events:none}
.in-game .deck-screen{width:100%;max-width:820px;height:100%;overflow:auto;border:1px solid #526c66;background:#172b2e;border-radius:12px;padding:0 18px;overscroll-behavior:contain}
.in-game .deck-screen .session-head{padding:20px 0}
.in-game .deck-screen .session-head h2{font-size:26px}
.in-game .deck-screen .session-head p{font-size:12px}
.in-game .deck-footer{position:sticky;bottom:0;background:#172b2ef5;border-top:1px solid #526c66;padding:12px 0;z-index:2}
.in-game .deck-footer>div{font-size:11px}
.in-game .deck-footer p,.in-game .deck-footer small{display:none}
.in-game .waiting{margin:auto;max-width:700px;max-height:100%;overflow:auto}
.sandbox-toolbar{padding:8px 14px;flex-shrink:0}
.sandbox-toolbar h2{font-size:18px}
.sandbox-toolbar .eyebrow{font-size:8px}
.sandbox-drawer{flex-shrink:0;max-height:65%;overflow:auto;background:#162c31;padding:10px 14px;font-size:12px}
.sandbox-drawer>summary{cursor:pointer;color:#c1ebd1;padding:4px}
.sandbox-drawer .draft-panel{margin-top:12px}
@media(max-width:600px){
 .in-game main{padding:0}
 .match-window,.in-game .deck-screen{border-radius:0;border:0}
 .arena-dock{left:7px;right:7px;bottom:7px;padding:10px;border-radius:10px}
 .arena-dock .card-copy h3{font-size:12px}
 .arena-dock .card-portrait,.arena-dock .card-portrait .animated-portrait{height:76px}
 .arena-dock .card-portrait .animated-portrait{width:80px}
 .arena-dock .draft-heading h3{font-size:14px}
 .arena-dock .unit-stats{gap:8px;font-size:9px}
 .arena-dock .card-copy{padding:7px}
 .arena-dock .draft-cards{gap:6px}
 .arena-toolbar{padding:5px 12px}
 .in-game .deck-footer{gap:8px;flex-direction:row;align-items:center}
 .in-game .deck-footer .primary{min-width:0}
 .in-game .deck-footer>div{max-width:100px}
}
@media(max-height:650px){
 .arena-dock .card-portrait,.arena-dock .card-portrait .animated-portrait{height:56px}
 .arena-dock .pick-reveals .reveal-unit img{display:none}
 .arena-dock .draft-hint{padding:4px 0}
 .match-window .phase-sub{display:none}
}

/* A compact picker centred in the gap the arena opens between the two armies. */
.arena-dock.draft-dock{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(420px,calc(100% - 24px));max-height:45%;padding:10px;border-radius:10px}
.draft-dock .draft-heading{margin:0 0 7px}
.draft-dock .draft-heading h3{font-size:13px}
.draft-dock .draft-heading>span{font-size:9px}
.draft-dock .draft-cards{gap:6px}
.draft-dock .card-portrait,.draft-dock .card-portrait .animated-portrait{height:48px}
.draft-dock .card-portrait .animated-portrait{width:60px}
.draft-dock .row-badge,.draft-dock .card-trait,.draft-dock .unit-stats,.draft-dock .counter-hint{display:none}
.draft-dock .card-copy{padding:5px 4px;text-align:center}
.draft-dock .card-copy h3{font-size:11px;line-height:1.2;margin:0}
.draft-dock .add-unit{font-size:9px;line-height:1.2;margin-top:4px}
.compact-reveal{display:flex;justify-content:center;flex-wrap:wrap;gap:3px 12px;margin-top:7px;font-size:9px;line-height:1.3;color:#abc0ba}
.compact-reveal .own-pick{color:#92d4ff}
.compact-reveal .foe-pick{color:#ffb19b}

/* The full seven-character roster fits within the app viewport. */
.in-game .deck-screen{display:flex;flex-direction:column;overflow:hidden;padding:0 14px}
.in-game .deck-screen .session-head{flex-shrink:0;padding:12px 0;gap:8px}
.in-game .deck-screen .session-head h2{font-size:23px}
.in-game .deck-screen .session-head p{font-size:11px;margin-top:5px}
.in-game .deck-status{flex-shrink:0;padding:9px 0;gap:7px;font-size:9px}
.in-game .deck-grid{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:2px}
.in-game .deck-card{min-height:0;display:flex;flex-direction:column}
.in-game .deck-card:last-child:nth-child(3n+1){grid-column:auto}
.in-game .deck-portrait{flex:1;min-height:0;height:auto}
.in-game .deck-portrait .animated-portrait{height:100%;width:100%}
.in-game .deck-copy{padding:8px;flex-shrink:0}
.in-game .deck-copy h3{font-size:15px;margin-bottom:3px}
.in-game .deck-stats{font-size:10px;gap:8px;padding:3px 0 6px}
.in-game .deck-copy .card-trait{font-size:10px}
.in-game .deck-copy .strength,.in-game .deck-copy .weakness{display:none}
.in-game .deck-footer{position:static;flex-shrink:0;padding:10px 0;margin-top:8px}
@media(max-width:600px){
 .in-game .deck-screen{padding:0 10px}
 .in-game .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px}
 .in-game .deck-screen .session-head{padding:8px 0}
 .in-game .deck-screen .session-head p{display:none}
 .in-game .deck-screen .session-head .eyebrow{font-size:8px}
 .in-game .deck-copy{padding:5px 7px}
 .in-game .deck-copy h3{font-size:12px}
 .in-game .deck-stats{font-size:9px;padding:1px 0 3px;gap:6px}
 .in-game .deck-copy .card-trait{font-size:9px}
 .in-game .deck-portrait .row-badge{font-size:7px;bottom:3px;left:5px;padding:2px 4px}
 .in-game .selection-check{right:6px;top:5px;height:18px;width:18px;font-size:11px}
}

/* Roster catalog: complete numerical cards, separate rarity frames and rank gems. */
.deck-builder .catalog-grid{overflow:auto;min-height:0;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:6px}
.deck-builder .catalog-controls{display:flex;gap:10px;align-items:center;font-size:10px;margin:8px 0}
.catalog-controls label{display:flex;align-items:center;gap:5px}.catalog-controls input{width:150px}
.deck-builder .deck-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex-shrink:0}
.deck-slot{background:#294046;border-radius:5px;padding:5px;font-size:10px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.deck-slot b{flex:1}.deck-slot select{padding:3px;font-size:10px}.deck-slot .text-button{padding:2px 5px}
.roster-card{border:2px solid #a8b2be;background:#22353b;border-radius:9px;min-width:0;overflow:hidden;color:#e5eee8;position:relative}
.roster-card.rarity-rare{border-color:#64b5fc;background:linear-gradient(140deg,#203d58,#203236);box-shadow:inset 0 0 0 2px #7fcaff25}
.roster-card.rarity-epic{border:3px double #c99aff;background:repeating-linear-gradient(45deg,#b581f008,#b581f008 3px,transparent 3px,transparent 15px),#2b2942}
.roster-card.rarity-legendary{border:3px double #e5bd63;box-shadow:0 0 12px #e8c06330,inset 0 0 12px #e8c06318;background:linear-gradient(130deg,#4d4024,#272e32)}
.rarity-legendary:before,.rarity-legendary:after{content:'❖';position:absolute;top:22px;color:#efd18d;font-size:20px;pointer-events:none}.rarity-legendary:before{left:4px}.rarity-legendary:after{right:4px}
.rarity-heading{display:flex;gap:5px;justify-content:space-between;flex-wrap:wrap;font-size:9px;padding:6px;background:#0d202977}
.rank-gems{color:#fbefcc;letter-spacing:2px;white-space:nowrap}
.roster-art{display:block;width:100%;height:110px;background:radial-gradient(ellipse at center,#a1c4ae30,transparent 70%)}
.roster-copy{padding:9px}.roster-copy h3{font-size:15px}.roster-role{font-size:10px;color:#bccdcc}
.roster-core{display:flex;gap:10px;font-size:11px;margin:7px 0}
.card-info{font-size:10px;line-height:1.5}.card-info summary{cursor:pointer;color:#e6dcae;padding:5px 0}
.card-info p{font-size:10px;line-height:1.6;margin:7px 0}.card-info small{font-size:8px;color:#b8c5c9}
.card-info .next-rank{color:#c6e7ba}.card-action{width:100%;margin-top:7px;padding:7px;font-size:11px}
.draft-dock .roster-art{height:54px}.draft-dock .roster-copy{padding:5px}.draft-dock .roster-copy h3{font-size:11px}
.draft-dock .rarity-heading{font-size:8px;padding:3px}.draft-dock .roster-role,.draft-dock .roster-core,.draft-dock .card-info{font-size:9px}
.draft-dock .roster-core{gap:5px;margin:4px 0}.draft-dock .card-action{font-size:10px;padding:6px}
.arena-dock.draft-dock{width:min(560px,calc(100% - 20px));max-height:45%}
/* Compact pick cards (portrait beside the name) keep the bottom picker short so the field above stays large. */
.draft-dock .roster-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center}
.draft-dock .rarity-heading{grid-column:1/-1;padding:2px 4px}
.draft-dock .roster-art{width:46px;height:46px}.draft-dock .roster-copy{padding:3px 5px}
.draft-dock .roster-core{margin:1px 0;gap:6px}.draft-dock .card-info summary{padding:1px 0}
.draft-dock .card-action{margin-top:3px;padding:4px}
.draft-dock .rarity-legendary:before{top:auto;bottom:2px;left:auto;right:5px;font-size:11px}.draft-dock .rarity-legendary:after{display:none}
/* Keep the picker short so the gap the arena opens for it stays small: since RD-041 it is only the cards (no header
   row), and each card's HP/power sits on the same line as its stats toggle. */
.draft-dock .draft-panel{display:block}
.draft-dock .roster-copy{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.draft-dock .roster-copy h3,.draft-dock .roster-role,.draft-dock .card-action{flex-basis:100%}
.draft-dock .card-info[open]{flex-basis:100%}
@media(max-width:600px){.draft-dock .roster-card{grid-template-columns:1fr}.draft-dock .roster-art{width:100%;height:34px}.draft-dock .roster-core{font-size:8px}.draft-dock .compact-reveal{font-size:8px}}
.update-banner{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#12272bf5;border:1px solid var(--mint);box-shadow:0 10px 30px #0008;color:#eef5ef;font-size:13px}
.update-banner .primary{width:auto;padding:6px 14px}
/* RD-020: pick cards use the deck builder's art-first tile, a little shorter, with the pick button under the art. */
.arena-dock.draft-dock{max-height:62%}
.draft-dock .art-tile{display:block;cursor:default}.draft-dock .art-tile:hover{transform:none;filter:none}
.draft-dock .art-tile .tile-stage{height:150px}.draft-dock .art-tile .tile-art{width:100%;height:100%}
.draft-dock .art-tile .tile-top{font-size:8px;padding:4px 6px 10px}.draft-dock .art-tile .tile-bottom{padding:14px 6px 4px}
.draft-dock .art-tile h3{font-size:13px}.draft-dock .art-tile .roster-role{font-size:9px}.draft-dock .art-tile .roster-core{font-size:10px;margin:2px 0 0}
.draft-dock .art-tile .card-action{width:calc(100% - 12px);margin:6px 6px 2px;padding:6px}.draft-dock .art-tile .card-info{padding:0 6px 4px}
@media(max-width:600px){.draft-dock .art-tile .tile-stage{height:118px}.draft-dock .art-tile h3{font-size:11px}.draft-dock .art-tile .roster-core{font-size:9px;gap:5px}.draft-dock .art-tile .tile-top{flex-wrap:wrap;gap:0 4px}}
.sandbox-armies{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sandbox-slot{display:flex;gap:4px}.sandbox-slot select{min-width:0;max-width:65%;padding:5px}
@media(max-width:600px){.deck-builder .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.deck-builder .deck-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-controls{flex-wrap:wrap}.catalog-controls small{display:none}.roster-art{height:75px}.roster-copy h3{font-size:13px}.sandbox-armies{grid-template-columns:1fr}.draft-dock .rarity-heading{font-size:7px}.draft-dock .rank-gems{letter-spacing:0}.draft-dock .roster-art{height:42px}.draft-dock .roster-copy h3{font-size:10px}}

.deck-builder .catalog-grid{grid-auto-rows:max-content;align-content:start}
/* Art-first deck-builder tiles (RD-018): the character art fills a ~200px stage; rarity/rank/cost and name/stats sit on
   translucent strips over it. Tap anywhere to select/deselect; checked tiles are outlined and badged. */
.deck-builder .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;align-items:start}
.art-tile{padding:0;cursor:pointer;user-select:none;transition:box-shadow .15s,filter .15s,transform .15s}
.art-tile .tile-stage{position:relative;height:210px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#ffffff22,transparent 70%)}
.art-tile .tile-art{position:absolute;inset:0;width:100%;height:100%;background:none}
.art-tile .tile-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px 14px;font-size:9px;background:linear-gradient(#0d1f26d9,#0d1f2600);color:#eef5ef}
.art-tile .tile-top strong{font-size:11px;white-space:nowrap}.art-tile .rank-gems{letter-spacing:1px;color:#fbefcc}
.art-tile .tile-bottom{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(#0d1f2600,#0d1f26e6 45%);color:#f1f6f1}
.art-tile h3{font-size:15px;line-height:1.15;text-shadow:0 1px 3px #000a}
.art-tile .roster-role{font-size:10px;margin-top:1px;color:#cfe0dc}
.art-tile .roster-core{font-size:11px;gap:10px;margin:3px 0 0;align-items:center;flex-wrap:wrap;row-gap:3px}.art-tile .roster-core span{white-space:nowrap}
.art-tile .card-copy{margin-left:auto;padding:2px 10px;font-size:11px;background:#0d1f26cc}.art-tile .card-copy[hidden]{display:none}
.art-tile .card-info{padding:0 8px 4px;cursor:auto;user-select:text}.art-tile .card-info summary{padding:3px 0;font-size:10px}
.select-mark{position:absolute;top:28px;left:8px;z-index:1;box-shadow:0 1px 4px #0008;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--mint);color:#152820;font-size:13px;font-weight:800;display:none;align-items:center;justify-content:center}
.art-tile.in-deck .select-mark{display:flex}
.catalog-grid .art-tile.in-deck{outline:3px solid var(--mint);outline-offset:-3px;box-shadow:0 0 0 1px var(--mint),0 0 18px #7fe0a855}
.art-tile.unavailable{opacity:.5;cursor:not-allowed}.art-tile:hover:not(.unavailable){filter:brightness(1.1);transform:translateY(-2px)}
.catalog-grid .art-tile:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.art-tile.rarity-legendary:before{top:auto;bottom:34px;left:auto;right:8px;font-size:14px;z-index:1}.art-tile.rarity-legendary:after{display:none}
@media(max-width:600px){.deck-builder .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.art-tile .tile-stage{height:190px}.art-tile h3{font-size:13px}.art-tile .roster-core{font-size:10px;gap:6px}.art-tile .card-copy{padding:4px 12px}}
/* In-arena status (RD-023): translucent, animated single-line pills over the battlefield that never intercept taps.
   RD-027: one fixed row per message category (--row, set by app.mjs from STATUS_ROWS), stacked up from the bottom edge
   of the arena, so a category always appears at the same height; empty rows stay empty. Every pill is the same height. */
.status-stack{position:absolute;z-index:4;left:14px;right:14px;bottom:8px;height:0;pointer-events:none;--row-h:36px;--pill-h:30px}
.arena-status{position:absolute;left:50%;bottom:calc(var(--row,0)*var(--row-h));transform:translateX(-50%);display:flex;align-items:center;gap:9px;box-sizing:border-box;height:var(--pill-h);max-width:100%;padding:0 14px 0 12px;white-space:nowrap;line-height:1.25;border-radius:999px;background:#10232c52;border:1px solid #e6f3d82e;box-shadow:0 4px 18px #071b2526;backdrop-filter:blur(1.5px);color:#f4f7e6;text-shadow:0 1px 3px #0b1a1fcc;overflow:hidden;transition:opacity .45s ease,translate .45s ease}
.arena-status.enter{animation:status-in .55s cubic-bezier(.2,.9,.3,1.25) backwards}
.arena-status.swap{animation:status-swap .35s ease-out}
.arena-status.older{opacity:.72}
.arena-status.leaving{opacity:0;translate:0 6px}
.arena-status:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#ffffff24 50%,transparent 65%);translate:-100% 0;animation:status-shimmer 3.4s .6s ease-in-out infinite}
.arena-status .status-pulse{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--mint);animation:status-pulse 1.6s ease-out infinite}
.arena-status[data-mode=locked] .status-pulse,.arena-status[data-mode=reveal] .status-pulse{background:#ffe1a0}
.arena-status[data-mode=battle] .status-pulse,.arena-status[data-mode=alert] .status-pulse{background:#ff8a6a}
.arena-status .phase-title{flex-shrink:0;font-size:13px;font-weight:700;letter-spacing:.02em;animation:status-breathe 2.8s ease-in-out infinite}
.arena-status .phase-sub{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#e8efe2d9}
.arena-status .phase-sub:empty,.arena-status .timer:empty{display:none}
.arena-status[data-mode=alert] .phase-sub{color:#ffd0b8}
.arena-status .timer{flex-shrink:0;min-width:0;font:16px var(--mono);color:var(--mint);text-shadow:0 0 10px #7fe0a866}
@media(max-width:600px){.status-stack{left:8px;right:8px;--row-h:32px;--pill-h:27px}.arena-status{gap:7px;padding:0 11px 0 10px}.arena-status .phase-title{font-size:12px}.arena-status .phase-sub{font-size:10px}.arena-status .timer{font-size:14px}}
@keyframes status-in{from{opacity:0;translate:0 12px;scale:.92}}
@keyframes status-swap{40%{scale:1.05}}
@keyframes status-shimmer{0%{translate:-100% 0}45%,100%{translate:100% 0}}
@keyframes status-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}70%{box-shadow:0 0 0 7px transparent;opacity:.75}100%{opacity:1}}
@keyframes status-breathe{50%{opacity:.82}}
@media(prefers-reduced-motion:reduce){.arena-status,.arena-status *,.arena-status:after{animation:none!important;transition:none}.arena-status:after{display:none}}
/* Deck draft (RD-028): four offers across, your match deck and the rival's revealed deck below. */
.in-game .deck-screen.deck-draft{overflow:auto}
.deck-draft-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;margin-bottom:12px;padding:10px 14px;border-radius:10px;background:#20373b;border:1px solid #3c5a57;font-size:12px;line-height:1.35;color:#d7e6df}
.deck-draft-status.revealing{border-color:#ffe1a0;background:#2d3a2e;animation:deck-reveal .7s ease-out}
.deck-draft-status .timer{flex-shrink:0;min-width:0;font:18px var(--mono);color:var(--mint)}
.deck-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex-shrink:0}
.deck-offers .art-tile{cursor:default;height:100%}.deck-offers .art-tile:hover{transform:none;filter:none}
.deck-offers .art-tile .tile-stage{height:190px}
.art-tile .tile-top .recruit-count{padding:1px 6px;border-radius:999px;background:#0d1f26cc;border:1px solid #7fe0a866;color:var(--mint);font-size:10px}
.deck-offers .art-tile .card-action{width:calc(100% - 12px);margin:6px 6px 2px;padding:7px}
.deck-offer{transition:opacity .3s,filter .3s}
.deck-offer.passed{opacity:.38;filter:saturate(.4)}
.deck-offer.chosen .art-tile{outline:3px solid var(--mint);outline-offset:-3px;box-shadow:0 0 18px #7fe0a855}
.deck-wait{grid-column:1/-1;margin:0;padding:40px 0;text-align:center;color:#a8b9b5}
.deck-lanes{display:grid;gap:10px;flex-shrink:0;margin-top:14px}
.deck-lane{padding:8px 10px;border-radius:10px;background:#1c3236;border:1px solid #33504d}
.deck-lane.rival{background:#2a2628;border-color:#6b4038}
.lane-label{display:block;margin-bottom:6px;font:700 10px var(--mono);letter-spacing:.12em;color:#9ec9b5}.lane-label small{letter-spacing:0;color:#7f9791}
.deck-lane.rival .lane-label{color:#ffb39c}
.lane-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.deck-chip{display:grid;grid-template-rows:64px auto auto;justify-items:center;min-width:0;padding:4px 4px 6px;border-radius:8px;background:#122427;border:1px solid #3a5652;text-align:center}
.deck-chip canvas{width:100%;height:64px}
.deck-chip b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25}
.deck-chip small{font-size:9px;color:#9fb4ad}
.deck-chip.empty{display:flex;align-items:center;justify-content:center;min-height:98px;border-style:dashed;font:700 18px var(--mono);color:#56706b}
.deck-chip.rarity-common{border-color:#8f99a4}.deck-chip.rarity-rare{border-color:#65b5ff}.deck-chip.rarity-epic{border-color:#c995ff}.deck-chip.rarity-legendary{border-color:#f3cd76}
.deck-chip.fresh{animation:chip-in .6s cubic-bezier(.2,.9,.3,1.3) both}
.deck-lane.rival .deck-chip.fresh{box-shadow:0 0 0 2px #ff9a7a,0 0 18px #ff9a7a88}
.deck-note{margin:12px 0 16px;font-size:11px;line-height:1.5;color:#8ea39d}
@media(max-width:600px){.deck-offers{gap:5px}.deck-offers .art-tile .tile-stage{height:124px}.deck-offers .art-tile h3{font-size:11px}.deck-offers .art-tile .roster-role,.deck-offers .art-tile .roster-core{display:none}.deck-offers .art-tile .tile-top{font-size:8px;padding:4px 5px 10px}.deck-offers .art-tile .card-action{width:calc(100% - 6px);margin:4px 3px 2px;padding:6px 2px;font-size:11px}.deck-offers .art-tile .card-info{padding:0 4px 3px}.deck-offers .art-tile .card-info summary{font-size:9px}.deck-draft-status{font-size:11px;padding:8px 10px}.lane-slots{gap:4px}.deck-chip{grid-template-rows:44px auto;padding:3px 2px 4px}.deck-chip canvas{height:44px}.deck-chip b{font-size:9px}.deck-chip small{display:none}.deck-chip.empty{min-height:62px}}
@keyframes chip-in{from{opacity:0;scale:.7}}
@keyframes deck-reveal{from{box-shadow:0 0 0 0 #ffe1a0aa}to{box-shadow:0 0 0 12px transparent}}
@media(prefers-reduced-motion:reduce){.deck-chip.fresh,.deck-draft-status.revealing{animation:none}}
/* RD-030: the picker only reserves part of its height between the armies, so its frame is translucent where it overlaps the front rows. */
.arena-dock.draft-dock{background:#12272b8c;backdrop-filter:blur(1.5px);box-shadow:0 10px 30px #071b2566}
.draft-dock .art-tile{background:#0d1f2640}.draft-dock .art-tile .tile-stage{background:#0d1f26b3}.draft-dock .art-tile .card-info{background:transparent}
/* Profiles and modes (RD-031) */
.avatar-art{overflow:hidden;padding:0}.avatar-art canvas{width:100%;height:100%;display:block}
.mode-actions{margin-top:auto;display:grid;gap:8px}.mode-actions button{margin-top:0;width:100%}
.profile-chip{display:flex;align-items:center;gap:12px;min-width:0}
.profile-chip>div{display:grid;gap:2px;min-width:0}.profile-chip b{font-size:15px}
.profile-chip small{font-size:10px;color:#9fb4ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Your record and the practice bot's difficulty (RD-053), above the profile row. */
.record-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:14px 0 0;padding:14px 18px;border-radius:10px;background:var(--panel-bg,#182224);border:1px solid var(--panel-edge,#5d4a30);box-shadow:var(--panel-shadow,none)}
.record-stats{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;min-width:0;flex:1 1 280px}
.record-stats .small-label{grid-column:1/-1}
.record-stats b{font-family:var(--display,Georgia,serif);font-size:28px;color:var(--gold,#f0cd7c);font-variant-numeric:tabular-nums}
.record-stats small{color:var(--muted-warm,#a99d82);font-size:12px;min-width:0}
.difficulty-field{display:grid;gap:4px}
.difficulty-field select{min-width:190px;padding:8px 10px;border-radius:8px;background:var(--ink-1,#121b1d);color:var(--parchment,#f3e6c8);border:1px solid var(--brass-lo,#6c5331);font:inherit}
.difficulty-note{flex:1 1 100%;color:var(--muted-warm,#a99d82);font-size:12px}
.me-rating{display:block;font-style:normal;font-size:12px;color:var(--parchment-dim,#cdbd99)}
.me-rating b.up{color:#8fd07a}.me-rating b.down{color:#f08a7a}
.players-table-wrap{overflow-x:auto;max-width:100%}
.players-table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.players-table th,.players-table td{padding:7px 10px;text-align:left;border-bottom:1px solid #ffffff14;white-space:nowrap}
.players-table th{font-size:11px;letter-spacing:1px;color:var(--brass-hi,#e5c990)}
.players-table small{color:var(--muted-warm,#a99d82)}
@media(max-width:600px){.record-bar{padding:12px}.difficulty-field,.difficulty-field select{width:100%;min-width:0}}
.profile-avatar{width:48px;height:48px;border-radius:10px}
.profile-screen{max-width:980px;margin:0 auto;padding:0 4px 24px}
.profile-top{display:flex;align-items:center;gap:16px;padding:6px 0 10px}
.profile-preview{width:72px;height:72px;border-radius:14px;flex-shrink:0}
.profile-top .name-field input{width:220px}
.profile-heading{margin:18px 0 8px;font-size:15px}.profile-heading small{font:12px var(--mono);color:var(--mint);margin-left:6px}
.profile-note{margin:0 0 10px;font-size:12px;color:#9fb4ad}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.profile-unit{position:relative;display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:2px;min-width:0;padding:5px 4px 7px;border-radius:9px;background:#132428;border:1px solid #33504d;color:#e8f0ea;cursor:pointer;text-align:center;font:inherit}
.profile-unit canvas{width:100%;height:64px}.deck-grid .profile-unit canvas{height:96px}
.profile-unit b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.profile-unit small{font-size:9px;color:#9fb4ad}
.profile-unit.rarity-rare{border-color:#3e6f97}.profile-unit.rarity-epic{border-color:#6f5a91}.profile-unit.rarity-legendary{border-color:#8f7a45}
.profile-unit:hover{filter:brightness(1.12)}
.profile-unit.chosen{outline:3px solid var(--mint);outline-offset:-3px;box-shadow:0 0 16px #7fe0a855;background:#1b3531}
.profile-unit .select-mark{display:none;position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:var(--mint);color:#10231f;font-size:12px;font-weight:800;place-items:center}
.profile-unit.chosen .select-mark{display:grid}
.profile-unit.unavailable{opacity:.5}
.profile-footer{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 0;background:linear-gradient(transparent,var(--bg,#0f1d21) 30%);font-size:12px;color:#b9cbc4}
.profile-footer .primary{min-width:200px}
@media(max-width:600px){.profile-top{flex-wrap:wrap}.profile-top .name-field input{width:100%}.avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.avatar-grid .profile-unit canvas{height:48px}.avatar-grid .profile-unit b{font-size:9px}.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-grid .profile-unit canvas{height:72px}.profile-footer{flex-direction:column;align-items:stretch}.profile-footer .primary{min-width:0}.profile-chip{width:100%}}
/* RD-032: the recruit-count badge wraps under rarity/rank on narrow cards instead of being clipped. */
@media(max-width:600px){.art-tile .tile-top{flex-wrap:wrap;row-gap:2px}.art-tile .tile-top .recruit-count{font-size:8px;padding:0 4px}}
/* Unit editor (RD-034) */
.unit-editor{max-width:1180px;margin:0 auto;padding:0 4px 24px}
.editor-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.editor-access,.editor-access form{display:flex;align-items:center;gap:6px}.editor-access small{font-size:11px;color:#9fb4ad}
.editor-access input{width:150px;padding:5px 8px;font-size:12px}
.unit-editor button:disabled{opacity:.45;cursor:not-allowed}
/* Global settings (RD-043) */
.editor-unit.settings-entry{border-color:#5f8f7d;background:#163029}
.settings-icon{display:grid;place-items:center;width:40px;height:40px;font-size:22px;color:var(--mint)}
.settings-group legend span{font-weight:400;letter-spacing:.04em;text-transform:none}
.settings-group .scope-battle{color:#f3cd76}.settings-group .scope-match{color:#65b5ff}.settings-group .scope-display{color:#9fb4ad}
.setting-help{grid-column:1/-1;margin:0;font-size:11px;color:#9fb4ad}
.editor-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
.editor-list{position:sticky;top:8px;display:grid;gap:4px;max-height:calc(100vh - 140px);overflow:auto;padding-right:4px}
.editor-unit{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:8px;background:#132428;border:1px solid #33504d;color:#e8f0ea;text-align:left;cursor:pointer;font:inherit}
.editor-unit canvas{width:40px;height:40px}
.editor-unit span{display:grid;min-width:0}.editor-unit b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-unit small{font-size:10px;color:#9fb4ad}
.editor-unit.chosen{outline:2px solid var(--mint);outline-offset:-2px;background:#1b3531}
.editor-unit.rarity-rare{border-color:#3e6f97}.editor-unit.rarity-epic{border-color:#6f5a91}.editor-unit.rarity-legendary{border-color:#8f7a45}
.editor-form{display:grid;gap:10px}
.editor-animation{min-width:0;padding:12px;border:1px solid #9b8051;border-radius:12px;background:linear-gradient(135deg,#27392f,#182a29);box-shadow:inset 0 0 0 2px #182422;color:#f4e4bc}
.editor-animation h3{margin:0 0 8px;font-family:var(--display,Georgia,serif);color:#ecd19b}
.editor-animation canvas{display:block;width:100%;height:285px;border-radius:8px;background:radial-gradient(ellipse at center,#87977a,#586e60)}
.animation-controls{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:10px 0}
.animation-controls>label{flex:1 1 130px}.animation-controls>button{padding:9px 12px}
.animation-controls label.check{flex-basis:100%;align-self:center}
.animation-controls input[type=checkbox]{width:auto}
.editor-animation p{margin:5px 0 0;color:#c4d0bd;font-size:12px;min-height:18px}
.editor-preview{background:#6d7f6c;border-radius:10px;padding:6px 8px 4px;border:1px solid #33504d}
.editor-preview canvas{display:block;width:100%;height:230px}
.editor-preview p{margin:2px 0 0;font-size:11px;color:#f1f6f1;text-shadow:0 1px 2px #0008}
.editor-form fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 12px;margin:0;padding:10px 12px 12px;border:1px solid #33504d;border-radius:10px;background:#132428}
.editor-form legend{padding:0 6px;font:700 11px var(--mono);letter-spacing:.1em;color:#9ec9b5}
.editor-form label{display:grid;gap:3px;font-size:11px;color:#b9cbc4}.editor-form label small{color:#7f9791}
.editor-form label.check{display:flex;align-items:center;gap:6px}
.editor-form input,.editor-form select{width:100%;min-width:0}
.editor-form input[type=color]{height:30px;padding:0 2px}
.editor-history{background:#132428;border:1px solid #33504d;border-radius:10px;padding:10px 12px}
.editor-history h3{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.1em;color:#9ec9b5;text-transform:uppercase}
.editor-history .profile-note.warning{color:#f3cd76}
.editor-history ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto}
.editor-history li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;background:#0e1c1f;font-size:12px;color:#e8f0ea}
.editor-history li small{display:block;margin-top:2px;font-size:11px;color:#9fb4ad;overflow-wrap:anywhere}
.editor-history .history-current{font:700 10px var(--mono);letter-spacing:.08em;color:var(--mint);white-space:nowrap}
.editor-history .history-empty{color:#9fb4ad}
.editor-summary{font-size:11px;line-height:1.6;color:#b9cbc4;background:#132428;border:1px solid #33504d;border-radius:10px;padding:8px 12px}
@media(max-width:700px){.editor-layout{grid-template-columns:1fr}.editor-list{position:static;max-height:none;grid-auto-flow:column;grid-auto-columns:84px;overflow-x:auto;padding-bottom:6px}.editor-unit{grid-template-columns:1fr;justify-items:center;text-align:center;padding:4px}.editor-unit canvas{width:44px;height:44px}.editor-preview canvas{height:190px}}
/* End-of-battle result (RD-035): same layers as the round intro, coloured by outcome, held until the next draft. */
.round-announcement[data-stage=result],.round-announcement[data-stage=final]{background:linear-gradient(transparent 26%,#0b1a1fc0 50%,transparent 74%)}
.round-announcement .ra-result{position:relative;font:900 italic clamp(58px,10vw,124px) var(--sans);line-height:.95;letter-spacing:-.04em;animation:ra-result .55s cubic-bezier(.15,.9,.3,1.25) both}
.round-announcement .ra-note{position:relative;margin-top:10px;font:700 normal clamp(11px,1.8vw,16px) var(--mono);letter-spacing:.32em;padding-left:.32em;color:#e8efe2;text-shadow:0 2px 0 #10232c;animation:ra-label .45s .35s cubic-bezier(.2,.9,.3,1) both}
.round-announcement[data-outcome=win] .ra-result{color:#fff1b8;text-shadow:0 -2px 0 #ffffff,4px 6px 0 #5a3d0e,0 0 30px #ffd76acc,0 0 70px #ffcf5a77}
.round-announcement[data-outcome=win] .ra-note{color:#ffe7ae}
.round-announcement[data-outcome=win] .ra-rays{background:repeating-conic-gradient(from 0deg,#ffd76a40 0deg 6deg,transparent 6deg 18deg);animation-duration:1.6s}
.round-announcement[data-outcome=win] .ra-ring{border-color:#ffd76a;box-shadow:0 0 30px #ffd76aaa,inset 0 0 20px #ffd76a66;animation-delay:0s}
.round-announcement[data-outcome=lose] .ra-result{color:#ffd1c4;text-shadow:4px 6px 0 #4a1d18,0 0 26px #ff6b4a99;animation:ra-result .55s cubic-bezier(.15,.9,.3,1.25) both,ra-shake .42s .55s both}
.round-announcement[data-outcome=lose] .ra-flash{background:radial-gradient(circle at 50% 50%,#ff6b4a88,transparent 60%)}
.round-announcement[data-outcome=lose] .ra-ring{border-color:#ff8a6a;box-shadow:0 0 26px #ff6b4a99;animation-delay:0s}
.round-announcement[data-outcome=draw] .ra-result{color:#e6ecef;text-shadow:4px 6px 0 #26363c,0 0 22px #cfd8dc88}
.round-announcement[data-outcome=draw] .ra-ring{border-color:#cfd8dc;animation-delay:0s}
.round-announcement[data-stage=final] .ra-result{font-size:clamp(66px,12vw,140px)}
@keyframes ra-result{0%{opacity:0;transform:scale(.3) rotate(-6deg)}60%{opacity:1;transform:scale(1.12) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes ra-shake{20%,60%{translate:-7px 0}40%,80%{translate:7px 0}}
/* RD-036: the picker follows the arena's gap, which sits half a sprite above centre so both armies get equal room. */
.arena-dock.draft-dock{transform:translate(-50%,calc(-50% - var(--picker-shift,0px)))}
/* Match end screen (RD-037): brass-and-ink frame like the commander banner, staged entrance, outcome colours. */
.arena-dock.result-dock{inset:8px;left:8px;right:8px;bottom:8px;max-height:none;display:flex;align-items:flex-start;justify-content:center;padding:6px;border:0;border-radius:12px;background:#0b141aa8;box-shadow:none;backdrop-filter:blur(3px);overflow:auto}
.match-end{--accent:#ffd76a;--accent-dark:#5a3d0e;position:relative;isolation:isolate;width:min(660px,100%);margin:auto;padding:22px 24px 18px;font-family:Georgia,serif;text-align:center;color:#f5e3bb;background:radial-gradient(ellipse at 50% 0%,#47737766,transparent 62%),linear-gradient(170deg,#1f383e,#182329 55%,#2c2422);border:2px solid #b28b50;box-shadow:inset 0 3px #e5c99024,inset 0 -6px 14px #090f18a0,0 10px 40px #050b10cc;clip-path:polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px));animation:me-in .7s cubic-bezier(.2,.9,.3,1.1) both}
.match-end[data-outcome=lose]{--accent:#ff8a6a;--accent-dark:#4a1d18}
.match-end[data-outcome=draw]{--accent:#cfd8dc;--accent-dark:#26363c}
.match-end:before{content:'';position:absolute;inset:6px;z-index:-1;border:1px solid #d4b47559;clip-path:inherit;pointer-events:none}
.me-glow{position:absolute;z-index:-1;left:50%;top:-120px;width:520px;height:300px;margin-left:-260px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 40%,transparent),transparent 65%);animation:me-glow 3.2s ease-in-out infinite alternate;pointer-events:none}
.me-sparks{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.me-sparks i{position:absolute;bottom:-10px;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);opacity:0;box-shadow:0 0 8px var(--accent)}
.match-end[data-outcome=win] .me-sparks i{animation:me-spark 3.6s linear infinite}
.me-sparks i:nth-child(odd){width:5px;height:5px}
.me-sparks i:nth-child(1){left:6%;animation-delay:.2s}.me-sparks i:nth-child(2){left:14%;animation-delay:1.4s}.me-sparks i:nth-child(3){left:22%;animation-delay:.8s}.me-sparks i:nth-child(4){left:30%;animation-delay:2.2s}.me-sparks i:nth-child(5){left:38%;animation-delay:.5s}.me-sparks i:nth-child(6){left:46%;animation-delay:1.8s}.me-sparks i:nth-child(7){left:54%;animation-delay:1s}.me-sparks i:nth-child(8){left:62%;animation-delay:2.6s}.me-sparks i:nth-child(9){left:70%;animation-delay:.3s}.me-sparks i:nth-child(10){left:78%;animation-delay:1.6s}.me-sparks i:nth-child(11){left:86%;animation-delay:.9s}.me-sparks i:nth-child(12){left:94%;animation-delay:2.4s}.me-sparks i:nth-child(13){left:50%;animation-delay:3s}.me-sparks i:nth-child(14){left:18%;animation-delay:3.2s}
.me-eyebrow{display:block;font:600 10px Georgia,serif;letter-spacing:3px;color:#d6bd8d}
.me-title{margin:6px 0 2px;font:900 italic clamp(44px,9vw,88px) var(--sans);line-height:1;letter-spacing:-.03em;color:color-mix(in srgb,var(--accent) 45%,#fff8e6);text-shadow:0 -2px 0 #fff,4px 6px 0 var(--accent-dark),0 0 30px color-mix(in srgb,var(--accent) 70%,transparent);white-space:nowrap}
.me-title span{display:inline-block;animation:me-letter .6s calc(.25s + var(--i)*55ms) cubic-bezier(.15,.9,.3,1.35) both}
.match-end[data-outcome=lose] .me-title{animation:ra-shake .45s 1s both}
.me-reason{margin:4px 0 14px;font-size:13px;color:#d6bd8d;animation:me-up .5s .7s both}
.me-versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;border-block:1px solid #c3a16940;animation:me-up .5s .8s both}
.me-commander{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.me-commander.me-rival{flex-direction:row-reverse;text-align:right}
.me-commander>span{display:grid;min-width:0}.me-commander b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.me-commander small{font-size:15px;letter-spacing:2px;color:#7acbfa}.me-rival small{color:#ff997e}
.me-commander .heart-empty{opacity:.28}
.me-avatar{flex:none;position:relative;display:grid;place-items:center;width:46px;height:52px;border:2px solid #d1af70;border-radius:42% 42% 45% 45%;background:#254c61;box-shadow:0 0 0 2px #1b2228,0 0 0 3px #947044;overflow:hidden;color:#9bdcf2;font:700 22px Georgia,serif}
.me-rival .me-avatar{background:#713f39;color:#ffc4a4}
.me-avatar canvas{position:absolute;inset:0;width:100%;height:100%}
.me-record{display:grid;justify-items:center;gap:2px}.me-record small{font-size:9px;letter-spacing:2px;color:#cfac70}
.me-record strong{font:700 34px Georgia,serif;color:#f8e7bf;text-shadow:0 2px 2px #080d17}.me-record strong span{margin:0 6px;color:#cfac70}
.me-rounds{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.me-rounds li{display:grid;min-width:62px;padding:5px 8px;border:1px solid #c3a16966;border-radius:8px;background:#132428;animation:me-pop .45s calc(.9s + var(--i)*90ms) cubic-bezier(.2,.9,.3,1.4) both}
.me-rounds b{font-size:11px;color:#d6bd8d}.me-rounds span{font:700 13px var(--mono);letter-spacing:1px}.me-rounds small{font-size:10px;color:#9fb4ad}
.me-rounds .me-win{border-color:#7fe0a8aa}.me-rounds .me-win span{color:var(--mint)}
.me-rounds .me-lose{border-color:#ff8a6a99}.me-rounds .me-lose span{color:#ff9e86}
.me-rounds .me-draw span{color:#cfd8dc}
.me-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.me-stat{display:grid;gap:3px;padding:10px 10px 9px;border:1px solid #c3a16955;border-radius:10px;background:linear-gradient(180deg,#1a2f34,#132226);text-align:left;animation:me-up .5s calc(1.1s + var(--i)*110ms) both}
.me-stat small{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#cfac70}
.me-stat b{font:700 26px var(--mono);color:#f8e7bf}
.me-stat em{font-style:normal;font-size:11px;color:#ffb39c}
.me-bar{display:block;height:5px;border-radius:3px;background:#ff8a6a55;overflow:hidden}.me-bar i{display:block;height:100%;background:linear-gradient(90deg,#48b6ff,#9bdcf2);animation:me-bar 1s 1.4s cubic-bezier(.2,.9,.3,1) both}
.me-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:12px}
.me-hero{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #c3a16966;border-radius:12px;background:radial-gradient(circle at 20% 50%,#ffffff12,transparent 60%),#152a2e;text-align:left;animation:me-slide .55s 1.5s cubic-bezier(.2,.9,.3,1.1) both}
.me-hero:nth-child(2){animation-delay:1.62s}.me-hero:nth-child(3){animation-delay:1.74s}
.me-hero-art{flex:none;width:64px;height:64px;border:2px solid #d1af70;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a5a5f,#122126);overflow:hidden}
.me-hero-art canvas{width:100%;height:100%}
.me-hero-copy{display:grid;min-width:0}.me-hero-copy small{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#cfac70}
.me-hero-copy b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-hero-copy em{font-style:normal;font-size:11px;color:#c9d6cf}
.me-facts{margin:0 0 12px;padding:0;list-style:none;text-align:left;font-size:12px;line-height:1.6;color:#e2d4b3}
.me-facts li{position:relative;padding-left:16px;animation:me-up .4s calc(1.8s + var(--i)*90ms) both}.me-facts li:before{content:'◆';position:absolute;left:0;color:#cfac70;font-size:9px;top:3px}
.me-details{margin-bottom:12px;text-align:left;font-size:12px}.me-details summary{cursor:pointer;color:#d6bd8d}.me-details .stat-table{margin-top:6px;font-size:11px}
.me-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;animation:me-up .4s 2s both}
@keyframes me-in{from{opacity:0;transform:translateY(18px) scale(.95)}}
@keyframes me-letter{0%{opacity:0;transform:translateY(-40px) rotate(-10deg) scale(1.4)}70%{opacity:1;transform:translateY(4px) rotate(2deg) scale(.96)}100%{opacity:1;transform:none}}
@keyframes me-up{from{opacity:0;transform:translateY(10px)}}
@keyframes me-pop{from{opacity:0;transform:scale(.5)}}
@keyframes me-slide{from{opacity:0;transform:translateX(-16px)}}
@keyframes me-bar{from{width:0}}
@keyframes me-glow{from{opacity:.55}to{opacity:1}}
@keyframes me-spark{0%{opacity:0;transform:translateY(0) rotate(45deg)}10%{opacity:1}100%{opacity:0;transform:translateY(-420px) rotate(225deg)}}
@media(max-width:600px){.match-end{padding:16px 12px 14px}.me-versus{gap:6px;padding:8px 2px}.me-avatar{width:36px;height:42px}.me-commander b{font-size:13px}.me-commander small{font-size:12px;letter-spacing:1px}.me-record strong{font-size:26px}.me-stat b{font-size:21px}.me-hero-art{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.match-end,.match-end *{animation:none!important}}
/* RD-038: instant feedback while a match is being created. */
.waiting.opening .opening-bar{width:min(260px,70%);height:4px;margin:18px auto 0;border-radius:2px;background:#ffffff1a;overflow:hidden}.waiting.opening .opening-bar i{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--mint),transparent);animation:opening-slide 1.1s ease-in-out infinite}
@keyframes opening-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.waiting.opening .opening-bar i{animation:none;width:100%;opacity:.5}}

/* First-load bar (owner request, RD-117): static markup in index.html, so it shows before any script runs. It creeps
   forward on its own, the app drives it with real progress (unit and arena art) and fades it out once the home arena's
   skirmish can draw; it also fades out by itself after 15 s, so it can never get stuck. */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#1c2a2c 0,#0c1214 60%);
 animation:boot-giveup .5s 15s forwards;transition:opacity .45s ease,visibility .45s}
.boot.done{opacity:0;visibility:hidden}
.boot-card{display:grid;justify-items:center;gap:14px;width:min(320px,80vw)}
/* The cracking crown (owner request, RD-232; scripts/build-crown.mjs): eight frames in one strip, played with CSS so it
   moves before any script loads. Whole for 0.6 s, cracks apart over about 0.8 s, holds shattered for 0.45 s, loops. */
.boot-crown{width:min(180px,46vw);aspect-ratio:1;background:url(/assets/ui/crown-loading.webp) 0 0/1600% 100% no-repeat;filter:drop-shadow(0 8px 18px #000b);animation:crown-crack 2.43s infinite;animation-timing-function:steps(1,end)}
@keyframes crown-crack{0%{background-position:0 0}22.6%{background-position:6.6667% 0}27.6%{background-position:13.3333% 0}32.5%{background-position:20% 0}37.4%{background-position:26.6667% 0}42.4%{background-position:33.3333% 0}47.3%{background-position:40% 0}52.3%{background-position:46.6667% 0}64.6%{background-position:53.3333% 0}68.7%{background-position:60% 0}72.8%{background-position:66.6667% 0}77%{background-position:73.3333% 0}81.1%{background-position:80% 0}85.2%{background-position:86.6667% 0}89.3%{background-position:93.3333% 0}95.9%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.boot-crown{animation:none}}
/* Throne Fracture (RD-231) is longer than the old name: the title shrinks on narrow screens so it never clips (RD-232). */
.boot-logo{display:block;width:min(300px,72vw);height:auto;margin:-4px auto 0;filter:drop-shadow(0 4px 10px #000a)}
.boot-bar{width:100%;height:10px;border-radius:6px;background:#22302f;box-shadow:inset 0 1px 3px #0009;overflow:hidden}
.boot-bar i{display:block;height:100%;width:var(--p,0%);min-width:6%;border-radius:6px;background:linear-gradient(90deg,#b28b50,#ffd98c);box-shadow:0 0 12px #d4ad6699;
 transition:width .35s ease;animation:boot-creep 6s cubic-bezier(.1,.6,.3,1) forwards}
.boot[style*="--p"] .boot-bar i{animation:none}
.boot small{color:#9c8f72;letter-spacing:1px}
@keyframes boot-creep{from{width:4%}to{width:38%}}
@keyframes boot-giveup{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.boot-bar i{animation:none;width:var(--p,30%)}}
/* Short screens (laptops, landscape tablets; RD-118): the toolbar and score banner take less height and the window loses
   its outer padding, so the battlefield keeps most of the screen. */
@media(max-height:900px) and (min-width:481px){
 .in-game main{padding:0}
 .match-window{border-radius:0;border-top:0;border-bottom:0;width:min(100%,calc(100dvh * var(--match-aspect)))}
 .match-window>.arena-toolbar{padding:3px 12px}
 .match-window>.arena-toolbar button{min-height:30px}
 .match-window .duel-banner{padding:7px 14px 8px;gap:7px}
 .match-window .duel-avatar{width:34px;height:42px}
}