/* Worn bronze and deep blue stone over the shared layout. Owned game art arrives from the cache.
   Grain is one static 128px PNG; regenerate with platform/tools/generate-shell-grain.py.
   No live texture filters, scrolling overlays or extra asset requests. */
@font-face{font-family:Cinzel;src:url('/shell/cinzel.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:Source;src:url('/shell/source-sans.ttf') format('truetype');font-weight:200 900;font-display:swap}
:root{color-scheme:dark;--ink:#02050b;--bg:#060d1a;--panel:#0d1c37;--panel-hi:#173363;--panel-lo:#091428;--well:#050b15;--line:#484233;--line-hi:#6c6048;
  --bronze:#74603b;--bronze-hi:#af9257;--gold:#c7ac72;--gold-hi:#ead7a8;--gold-glow:#c4913d45;--teal:#a8bbdf;--focus:#d5e1fc;
  --blue:#a0b9e5;--red:#f28e91;--riot:#c53b48;--good:#b7c9ed;--warn:#dbb17c;--bad:#f28e91;--text:#e1d8c0;--muted:#bfc3cc;--dim:#a5adbd;
  --grain:url("data:image/png;base64,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");
  --metal:var(--grain),linear-gradient(100deg,#0005,transparent 25%,#c8b3820d 46%,#0004 80%),linear-gradient(#142b53,#0d1c37 44%,#0a172d 48%,#102344);
  --slab:var(--grain),radial-gradient(ellipse at 45% 0%,#1e428026,transparent 70%),linear-gradient(#0d1c37,#091426 55%,#070f1d);
  --bevel:inset 0 1px 0 #d4c39940,inset 1px 0 0 #c3ae7422,inset 0 -2px 0 #000a,inset -1px 0 0 #0008,0 2px 2px #000b;
  --display:Cinzel,Georgia,serif;--ui:Source,'Trebuchet MS',sans-serif;--r:2px;--ease:cubic-bezier(.2,.7,.2,1);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140f05' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  font:clamp(13px,calc(10px + .3125vw),24px)/1.4 var(--ui);color:var(--text)}
html,body{height:100%}
body{margin:0;min-width:320px;display:flex;flex-direction:column;overflow:hidden;color:var(--text);
  background:var(--grain),radial-gradient(ellipse 70% 80% at 50% 5%,#16305d50,transparent 75%),radial-gradient(ellipse at 50% 40%,transparent 40%,#000b),var(--bg)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.28;background:url('/shell/ornament.svg') center/cover}
*{scrollbar-width:thin;scrollbar-color:#736344 #050a14}
h1,h2,h3,h4,p{margin:0}
h1,h2,.brand,.mode-title,.slot-title b,.totals b{text-shadow:0 2px 1px #000,0 -1px 0 #d9bf7a30}
h3,.eyebrow{text-shadow:0 1px 1px #000}
h1{font:600 2rem/1.1 var(--display);letter-spacing:.02em;color:var(--gold-hi)}
h2{font:600 1.35rem/1.15 var(--display);letter-spacing:.02em;color:var(--gold-hi)}
h3{font:700 .8rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.45rem}
h4{font:600 .9rem var(--ui)}
.eyebrow{margin:0 0 .3rem;font:700 .7rem/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem}
.eyebrow .icon{width:1.1em;height:1.1em}
.muted{color:var(--muted)}.small{font-size:.78rem}.gold{color:var(--gold)}.good{color:var(--good)}.warn{color:var(--warn)}
.key{font:.72rem ui-monospace,monospace;word-break:break-all;color:var(--muted)}
.icon{width:1.15em;height:1.15em;flex:none;pointer-events:none;vertical-align:-.2em}
[hidden]{display:none!important}

/* The selected Rift tile expands into its four scene choices. */
.map-tiles:has(.sr-map-choice){align-items:flex-start}
.sr-map-choice{width:15rem;max-width:100%;flex:none;display:flex;flex-direction:column;gap:.4rem}
.sr-map-choice>.map-tile{width:100%}
.sr-visuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
.map-tiles.compact .sr-visuals .visual-tile{min-width:0;height:3rem;padding:.35rem .45rem}
.sr-visuals .map-name{display:flex;align-items:center;gap:.25rem;font-size:.72rem}
.sr-visuals .map-art img{transform:none;object-fit:cover}
.visual-random .map-art{display:flex}
.visual-random .map-art .visual-slice{position:relative;width:33.333%;height:100%;flex:1;min-width:0}
.visual-summary{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.75rem;letter-spacing:0;text-transform:none}
.sr-map-choice>.visual-summary{font-size:.7rem}
.draft-screen:has(.sr-map-choice) .practice-band{flex-shrink:0}

/* Controls */
button{font:600 .85rem/1.1 var(--ui);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem 1rem;
  border:1px solid var(--bronze);border-color:#8c7951 #4c402c #322a1d #716044;border-radius:var(--r);background:var(--metal);box-shadow:var(--bevel);text-shadow:0 1px 1px #000;cursor:pointer;
  transition:transform .15s var(--ease),border-color .15s,background .15s,box-shadow .2s,color .15s,filter .2s,opacity .2s}
button:hover:enabled{border-color:var(--gold);background:var(--grain),linear-gradient(#183566,#12284d 48%,#142c56);box-shadow:var(--bevel),0 0 10px var(--gold-glow);transform:translateY(-1px)}
button:active:enabled{transform:translateY(1px);box-shadow:inset 0 2px 5px #000d,inset 0 0 0 1px #0009}
button:disabled{opacity:.42;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 4px #0b1b36}
.primary{color:#fff0cf;border-color:#dac18a #6c5029 #4b351a #a18a53;background:var(--grain),linear-gradient(100deg,#fff1,transparent 25%,#18060922 70%,#fff1),linear-gradient(#79232e,#571923 43%,#44121a 48%,#72212b 92%,#90313b);text-shadow:0 1px 0 #180609;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  box-shadow:inset 0 0 0 1px #38260c,inset 0 0 0 2px #f8db8b55,inset 0 3px 0 #fff3,inset 0 -3px 0 #35200b80,0 3px 0 #02050b,0 5px 10px #0009}
.primary:hover:enabled{color:#fff0cf;background:var(--grain),linear-gradient(#982f3b,#7e2330 43%,#601723 48%,#8f2937);box-shadow:inset 0 0 0 1px #553b17,inset 0 0 0 2px #f8db8b88,inset 0 3px 0 #fff4,inset 0 -3px 0 #35200b80,0 3px 0 #02050b,0 0 18px var(--gold-glow)}
.primary:active:enabled{background:var(--grain),linear-gradient(#4e1520,#7d2430);box-shadow:inset 0 3px 6px #231707,inset 0 0 0 2px #36270f,0 1px 0 #000}
.quiet{background:var(--grain),linear-gradient(#0d1d39,#091325);box-shadow:var(--bevel);border-color:var(--line-hi)}
.danger{color:var(--bad)}
.icon-button{width:2.3rem;height:2.3rem;padding:0;flex:none}
.icon-button .icon{width:1.2rem;height:1.2rem}
.icon-button.small{width:1.7rem;height:1.7rem}.icon-button.small .icon{width:.9rem;height:.9rem}
.icon-button.tall{height:auto;align-self:stretch;width:3.6rem}
.icon-button.danger:hover:enabled{border-color:var(--bad)}
.back,.text-button{background:none;border:0;box-shadow:none;color:var(--gold);padding:.3rem .2rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.back:hover:enabled,.text-button:hover:enabled{background:none;box-shadow:none;color:var(--gold-hi);transform:translateX(-2px)}
input,select,textarea{font:inherit;color:var(--text);width:100%;padding:.5rem .7rem;border:1px solid var(--line-hi);border-radius:var(--r);background:var(--grain),linear-gradient(#04080f,#081121);box-shadow:inset 0 2px 4px #000c,0 1px 0 #a88d4933;transition:border-color .15s}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:hover:enabled{border-color:var(--bronze)}
input:focus{border-color:var(--teal)}
input[type=range]{padding:0;border:0;background:none;box-shadow:none;accent-color:var(--gold);height:1.4rem;cursor:pointer}
input[type=number]{font-variant-numeric:tabular-nums}
label{display:block;color:inherit;font-size:inherit}
.search{position:relative;display:flex;align-items:center;min-width:10rem}
.search .icon{position:absolute;left:.6rem;color:var(--dim)}
.search input{padding-left:2rem}
.switch{position:relative;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--muted);font-size:.8rem}
.switch input,.config-row.toggle input,.mini-switch input,.mute-toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch-track{flex:none;position:relative;width:2.5rem;height:1.3rem;border:1px solid var(--line-hi);border-radius:3px;background:var(--grain),var(--well);box-shadow:inset 0 2px 4px #000,0 1px 0 #c2a26c22;transition:background .2s,border-color .2s}
.switch-track:after{content:"";position:absolute;top:.15rem;left:.15rem;width:.9rem;height:.9rem;border-radius:2px;background:linear-gradient(#b0ab8c,#81765f 45%,#514838);box-shadow:inset 0 0 0 1px #d9cc9944,0 1px 2px #000;transition:transform .2s var(--ease),background .2s}
input:checked+.switch-track{background:linear-gradient(#7a6230,#4c3b19);border-color:var(--gold)}
input:checked+.switch-track:after{transform:translateX(1.2rem);background:linear-gradient(#eee0b1,#ad8d4e 48%,#d3b775);box-shadow:inset 0 0 0 1px #fff3,0 1px 3px #000,0 0 6px var(--gold-glow)}
input:focus-visible+.switch-track{outline:2px solid var(--focus);outline-offset:2px}
input:disabled+.switch-track{opacity:.45}
.switch-label{display:inline-flex;align-items:center;gap:.35rem}
.seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--well);box-shadow:inset 0 1px 3px #000a}
.seg>button{background:none;border:1px solid transparent;box-shadow:none;color:var(--muted);padding:.32rem .65rem;font-size:.78rem;min-width:1.9rem}
.seg>button:hover:enabled{background:#ffffff0d;box-shadow:none;transform:none;color:var(--text);border-color:transparent}
.seg>button[aria-pressed=true]{color:var(--gold-hi);background:var(--grain),linear-gradient(#5e5030,#302b19);border-color:var(--bronze-hi);box-shadow:inset 0 1px 0 #ffffff1a,0 0 8px #f3c96a22}
.seg.icons>button{padding:.3rem;width:1.95rem;height:1.95rem;min-width:0}
.seg.icons .icon{width:1.1rem;height:1.1rem}
.pips>button{width:1.9rem;height:1.9rem;padding:0;font-weight:800}
.chip{padding:.32rem .7rem;font-size:.78rem;border-radius:3px;border-color:var(--line-hi);background:var(--metal)}
.chip[aria-pressed=true]{color:var(--gold-hi);border-color:var(--gold);background:var(--grain),linear-gradient(#5e5030,#302b19);box-shadow:0 0 8px #f3c96a33}
.pill,.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border:1px solid var(--line-hi);border-radius:3px;font:700 .66rem/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--grain),#081121ee;box-shadow:inset 0 1px 2px #000b;white-space:nowrap}
.badge{letter-spacing:.04em;text-transform:none;font-size:.72rem;font-weight:600}
.pill.good,.badge.good{color:var(--good);border-color:#657b9e}.badge.warn{color:var(--warn);border-color:#7a5a3a}.badge.bad{color:var(--bad);border-color:#7a3f3a}
.count-badge{display:inline-flex;align-items:center;gap:.35rem;font:700 .9rem var(--ui);color:var(--gold);padding:.3rem .6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--well)}
kbd{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .3em;font:800 .68rem/1 var(--ui);color:var(--gold-hi);background:var(--grain),linear-gradient(#16305c,#0b182e);border:1px solid #706b4e;border-bottom-width:2px;border-radius:3px}
.info{display:inline-grid;place-items:center;color:var(--dim);cursor:help}

/* Cast bronze frames: inset bevels, carved corner plates and rivets. */
.panel{position:relative;padding:1rem;border:1px solid var(--bronze);border-radius:var(--r);background:var(--slab);
  box-shadow:inset 0 0 0 1px #03070e,inset 0 0 0 3px #8c75413b,inset 0 5px 12px #0009,inset 0 -2px 0 #b7a16c33,0 2px 0 #000,0 8px 18px #0008}
.panel:before,.home-hero:before,.selection-pane:before{content:"";position:absolute;inset:-2px;pointer-events:none;z-index:3;border:24px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%22.6%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23eee0aa%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23a98a4a%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22%2351452b%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23b99b5d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23382b18%22%2F%3E%3C%2FlinearGradient%3E%3Cg%20id%3D%22c%22%3E%3Cpath%20d%3D%22M1%2027V1h26l-7%205H9l6%206-3%203-6-6v11Z%22%20fill%3D%22url%28%23b%29%22%20stroke%3D%22%230d1117%22%2F%3E%3Cpath%20d%3D%22M2%2026V2h24M7%2019V7h12%22%20fill%3D%22none%22%20stroke%3D%22%23d0b475%22%20stroke-opacity%3D%22.65%22%2F%3E%3Cpath%20d%3D%22m12%2012%207%201%205%207-4%204-7-5Z%22%20fill%3D%22url%28%23b%29%22%20stroke%3D%22%2310141c%22%2F%3E%3Cpath%20d%3D%22m14%2014%206%202%202%204-2%202-4-2Z%22%20fill%3D%22none%22%20stroke%3D%22%23ddc58c%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%222.2%22%20fill%3D%22%2311151d%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%224.5%22%20r%3D%221.25%22%20fill%3D%22%23baa374%22%2F%3E%3Cpath%20d%3D%22m5%2011%201%201m5-7%201%201m8%2012%201%201%22%20stroke%3D%22%23e5cb8f%22%20stroke-opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M1%2024v48m94-48v48M24%201h48M24%2095h48%22%20stroke%3D%22%238e794e%22%2F%3E%3Cpath%20d%3D%22M3%2024v48m90-48v48M24%203h48M24%2093h48%22%20stroke%3D%22%2310131b%22%2F%3E%3Cuse%20href%3D%22%23c%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%2896%200%29%20rotate%2890%29%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%2896%2096%29%20rotate%28180%29%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%280%2096%29%20rotate%28270%29%22%2F%3E%3C%2Fsvg%3E") 28 / 1.7rem / 0 stretch}
.panel-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;color:var(--gold)}
.panel-head h2,.panel-head h3{margin:0;font-size:1rem}
.panel-head .pill,.panel-head .icon-button{margin-left:auto}

/* Chrome */
.home-hero:before{inset:0}
.skip-link{position:fixed;top:-5rem;left:1rem;z-index:40;padding:.8rem;background:#11264b;color:#fff}.skip-link:focus{top:.6rem}
body>header{position:relative;z-index:5;flex:none;height:4rem;display:flex;align-items:center;gap:2rem;padding:0 max(1.25rem,calc((100% - 112rem)/2));
  border-bottom:1px solid #a88b50;background:var(--grain),repeating-linear-gradient(0deg,#0000 0 2px,#0002 3px,#c9b07d08 4px),linear-gradient(#112547,#0c1a32 45%,#081120 90%,#483e26);box-shadow:inset 0 1px 0 #bcad782f,inset 0 -2px 0 #02050b,0 2px 0 #17160d,0 4px 0 #5e503233,0 7px 16px #000b}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--gold-hi);text-decoration:none;font:700 1.45rem/1 var(--display);letter-spacing:.04em}
.brand img{height:2.6rem;width:auto;filter:drop-shadow(0 2px 6px #000)}
.brand small{display:block;margin-top:.2rem;font:700 .52rem/1 var(--ui);letter-spacing:.3em;color:var(--gold)}
body>header nav{display:flex;gap:.2rem;height:100%}
.nav{height:100%;padding:0 .9rem;border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font:700 .78rem var(--ui);letter-spacing:.12em;text-transform:uppercase;position:relative}
.nav .icon{width:1.2rem;height:1.2rem;color:var(--dim);transition:color .15s}
.nav:hover:enabled{background:linear-gradient(transparent,#d6bc7d12);transform:none;color:var(--text)}
.nav:hover:enabled .icon{color:var(--gold)}
.nav.active{color:var(--gold-hi);background:var(--grain),linear-gradient(#0003,#b58b3b20);box-shadow:inset 1px 0 0 #b69a5630,inset -1px 0 0 #0009}
.nav.active .icon{color:var(--gold)}
.nav.active:after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:3px;background:linear-gradient(#f28e91,#a82435);border:1px solid var(--riot);box-shadow:0 1px 2px #000,0 0 7px #c9a04c66}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:.4rem;height:100%}
.identity-badge{margin:0;color:var(--muted);font-size:.8rem}
.identity-badge button{background:none;border:1px solid transparent;box-shadow:none;padding:.4rem .6rem;color:var(--text);font-weight:600}
.identity-badge button:hover:enabled{border-color:var(--line-hi);background:#ffffff08;transform:none}
.identity-badge span{color:var(--dim);font-weight:500}
.identity-dot,.status-gem{display:inline-block;width:.45rem;height:.45rem;background:var(--teal);transform:rotate(45deg);box-shadow:0 0 8px #5f81c488;margin-right:.35rem}
main{position:relative;z-index:1;flex:1;min-height:0;max-width:none;width:100%;margin:0;overflow:auto;display:flex;flex-direction:column;
  padding:1.1rem max(1.25rem,calc((100% - 112rem)/2)) 1.25rem;outline:none;scrollbar-gutter:stable}
main>p.muted{margin:auto;display:flex;flex-direction:column;align-items:center;gap:1rem;font:600 1rem var(--display);color:var(--gold)}
.loading-crest{width:3.5rem;height:3.5rem;color:var(--gold);animation:pulse 1.6s ease-in-out infinite}
footer{position:relative;z-index:5;flex:none;height:1.9rem;max-width:none;margin:0;padding:0 max(1.25rem,calc((100% - 112rem)/2));display:flex;align-items:center;gap:1.25rem;
  border-top:1px solid #665535;background:var(--grain),linear-gradient(#0f203e,#070f1d);box-shadow:inset 0 1px 0 #b4a46a33,inset 0 3px 0 #0007;color:var(--dim);font-size:.7rem;letter-spacing:.04em}
footer>span:first-child{color:var(--muted)}
footer .text-button{margin-left:auto;font-size:.68rem;display:inline-flex;gap:.35rem}
.notice{position:fixed;left:50%;bottom:2.6rem;transform:translateX(-50%);z-index:30;max-width:min(36rem,92vw);padding:.7rem 1.1rem;border:1px solid var(--gold);border-radius:var(--r);
  background:var(--metal);color:var(--gold-hi);box-shadow:0 8px 30px #000c;font-size:.85rem}
.tooltip{position:fixed;left:0;top:0;z-index:50;max-width:18rem;padding:.3rem .55rem;pointer-events:none;border:1px solid var(--bronze-hi);border-radius:var(--r);
  background:var(--grain),#081121fa;color:var(--gold-hi);font:600 .74rem/1.3 var(--ui);box-shadow:0 6px 18px #000c}
.error{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .8rem;padding:.6rem .9rem;border:1px solid var(--riot);border-radius:var(--r);background:var(--panel-lo);color:var(--bad);font-size:.85rem}
.error button{padding:.3rem .6rem;font-size:.75rem}
.empty-state{flex:1;display:grid;place-items:center;align-content:center;gap:.7rem;padding:2rem;text-align:center;color:var(--muted)}
.empty-state h3{color:var(--muted)}
.empty-glyph{width:3rem;height:3rem;color:var(--bronze-hi);opacity:.8}
.empty-inline{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;color:var(--dim);padding:1rem}

/* Page headings and screen bars */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.page-heading h1{font-size:1.9rem}
.page-heading .intro{display:none}
.heading-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.heading-tools .search{width:13rem}
.screen-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.screen-title h1{font-size:1.6rem}
.screen-bar>.presets,.screen-bar>.invite{margin-left:auto}
.action-bar{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;margin-top:.9rem;flex-wrap:wrap}
.action-bar .primary{min-width:13rem;padding:.75rem 1.4rem}
.action-status{margin-right:auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--warn);font-size:.85rem}
.action-status.good{color:var(--good)}

/* Art */
img[data-art]{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease,transform .35s var(--ease)}
img[data-art][src]{opacity:1}
img.art-unavailable,img[data-art=""]{display:none}
.portrait{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--slab)}
.portrait>img{position:absolute;inset:0}
.portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;font:700 .9rem var(--display);color:#a5adbd;text-transform:uppercase}
:is(.portrait,.map-art,.skin-card,.item-tile,.spell-pick,.spell-slot,.selection-art,.ability-button,.loadout-slot):has(>img[data-art]:not([src]):not([data-art=""]):not(.art-unavailable)){
  background-image:linear-gradient(100deg,transparent 30%,#ffffff10 50%,transparent 70%),linear-gradient(135deg,#132950,#091426);background-size:250% 100%,auto;animation:shimmer 1.3s linear infinite}

/* Art stays clear inside a raised metal rim; check badges and locks keep their semantics. */
.champion-tile,.map-tile,.mode-tile,.skin-card,.item-tile,.spell-pick,.role-pick,.mouse-mode,.pack-button,.utility-tiles button,.custom-tile{position:relative;overflow:hidden;padding:0;border:1px solid #655f44;border-color:#82724e #3d3929 #28271c #5f593c;border-radius:var(--r);background:var(--panel-lo);box-shadow:var(--bevel)}
.champion-tile:hover:enabled,.map-tile:hover:enabled,.mode-tile:hover:enabled,.skin-card:hover:enabled,.item-tile:hover:enabled,.spell-pick:hover:enabled,.role-pick:hover:enabled,.pack-button:hover:enabled{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 14px #000a,0 0 0 1px #d6bc7d44}
:is(.champion-tile,.map-tile,.skin-card,.item-tile,.spell-pick,.role-pick,.mouse-mode,.ability-button):is([aria-pressed=true],.selected){border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold),0 0 16px var(--gold-glow)}
:is(.champion-tile,.map-tile,.skin-card,.item-tile):is([aria-pressed=true],.selected):after{content:"";position:absolute;z-index:2;top:.22rem;right:.22rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--gold-hi) var(--check) center/72% no-repeat;box-shadow:0 1px 3px #000}
:is(.champion-tile,.map-tile,.skin-card,.item-tile,.spell-pick):disabled{filter:grayscale(.85) brightness(.7)}
.champion-tile:disabled[aria-pressed=true]{filter:none}
.champion-tile .tile-name{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.6rem .2rem .2rem;background:linear-gradient(transparent,#000d);font:700 .66rem/1.1 var(--ui);color:var(--gold-hi);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(.3rem);transition:opacity .15s,transform .15s}
.champion-tile:is(:hover,:focus-visible) .tile-name{opacity:1;transform:none}
.champion-tile{display:block}
.champion-tile .portrait{border-radius:0}
.champion-tile:hover:enabled .portrait img{transform:scale(1.08)}
.champion-tile.taken{opacity:.35}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.1rem,1fr));gap:.4rem;align-content:start;overflow:auto;max-height:none;padding:.25rem}

.map-tiles{display:flex;gap:.5rem}
.map-tile{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;min-width:9rem;height:4.4rem;padding:.45rem .6rem;color:var(--text)}
.map-tile:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#030810ee 15%,#03081066 70%,transparent),linear-gradient(transparent 40%,#030810aa)}
.map-art{position:absolute;inset:0;background:var(--slab)}
.map-art img{transform:scale(1.15)}
.map-tile:hover:enabled .map-art img{transform:scale(1.25)}
.map-glyph,.map-name,.map-meta,.map-lock{position:relative;z-index:2}
.map-glyph{position:absolute;top:.4rem;left:.5rem;color:var(--gold)}
.map-glyph .icon{width:1.2rem;height:1.2rem}
.map-name{font:700 .85rem/1.1 var(--display);color:var(--gold-hi);text-shadow:0 1px 3px #000}
.map-meta{display:flex;align-items:center;gap:.3rem;font:700 .64rem var(--ui);letter-spacing:.1em;color:var(--muted)}
.map-lock{position:absolute;top:.4rem;right:.5rem;color:var(--muted)}
.map-tile:disabled{opacity:.6}
.map-tile[aria-pressed=true]:before{background:linear-gradient(90deg,#06152bdd 10%,#06152b88 70%,transparent),linear-gradient(transparent 40%,#030810aa)}
.map-tiles.compact .map-tile{min-width:8.6rem;height:3.6rem}
.map-tiles.compact .map-meta{display:none}
.map-tiles.mini .map-tile,.map-tile.mini{min-width:0;width:3rem;height:3rem;padding:0}
.map-tile.mini .map-glyph,.map-tiles.mini .map-glyph{top:50%;left:50%;transform:translate(-50%,-50%)}
.map-tiles.mini :is(.map-name,.map-meta,.map-lock){display:none}

/* The image fills each tile, so its bevel sits above it without taking pointer events. */
.champion-tile:before,.skin-card:before,.ability-button:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:2px solid #07101f;box-shadow:inset 0 1px 0 #e4cf8b70,inset 1px 0 0 #b5a16c44,inset 0 -2px 0 #000a}
.map-tile:before,.pack-button:before{box-shadow:inset 0 1px 0 #dac48c66,inset 1px 0 0 #a7925955,inset 0 0 0 3px #050a1499,inset 0 -4px 0 #0009}
:is(.champion-tile,.skin-card,.map-tile,.item-tile,.spell-pick,.pack-button):active:enabled{transform:translateY(1px);box-shadow:inset 0 3px 5px #000c,0 0 0 1px var(--gold)}
.roster,.item-grid{background:linear-gradient(#03060b55,#03060b22);box-shadow:inset 0 2px 5px #0008}
/* Rings */
.ring{position:relative;display:inline-grid;place-items:center;width:3rem;height:3rem;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:#ffffff12;stroke-width:3}
.ring-fill{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .45s var(--ease),stroke .3s;filter:drop-shadow(0 0 2px #f3c96a88)}
.ring.done .ring-fill{stroke:var(--good);filter:drop-shadow(0 0 3px #7f9ad188)}
.ring-label{position:relative;font:800 .78rem/1 var(--ui);color:var(--gold-hi);display:flex;align-items:baseline}
.ring-label small{font-size:.6em;opacity:.7}
.ring.done .ring-label{color:var(--good)}
.ring.tiny{width:1.1rem;height:1.1rem}.ring.tiny .ring-label{display:none}.ring.tiny .ring-track,.ring.tiny .ring-fill{stroke-width:5}
.ring.big{width:5.5rem;height:5.5rem}.ring.big .ring-label{font-size:1.25rem}.ring.big .ring-track,.ring.big .ring-fill{stroke-width:2.4}
.ring.spin svg{animation:spin 1.1s linear infinite}
.ring.spin .ring-fill{stroke-dasharray:24 100!important}

/* Grids of overflow-clipped tiles size rows from content, not from a constrained container height. */
.palette-grid,.roster,.item-grid,.pack-champions,.pack-big,.spell-row,.match-cards{grid-auto-rows:max-content}

/* Home */
.home{flex:1;min-height:31rem;display:grid;gap:.9rem;grid-template-columns:minmax(0,2.3fr) minmax(16rem,1fr);grid-template-rows:minmax(19rem,1.75fr) minmax(9rem,1fr);
  grid-template-areas:"hero modes" "maps dispatch"}
.home-hero{grid-area:hero;position:relative;overflow:hidden;border:1px solid var(--bronze);border-radius:var(--r);isolation:isolate;
  background:var(--grain),radial-gradient(ellipse 60% 80% at 75% 40%,#1e428088,transparent 70%),linear-gradient(110deg,#0c1b35,#060d1a 55%,#12274c);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 4px #a38c4c4a,0 3px 0 #03060b,0 10px 24px #000b}
.hero-engraving{position:absolute;inset:0;z-index:-1;background:url('/shell/ornament.svg') center/cover;opacity:.5}
.hero-art{position:absolute;inset:0 0 0 38%;display:flex;justify-content:flex-end;align-items:stretch;gap:0;padding-right:1.5rem;z-index:-1}
.art-banner{position:relative;flex:0 0 31%;margin-left:-4%;overflow:hidden;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);background:linear-gradient(#11264b,#091325);
  transform:translateY(var(--dy,0));transition:transform .6s var(--ease),filter .4s}
.art-banner:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 55%,#081121e6),linear-gradient(90deg,#d6bc7d55 0 1.5px,transparent 1.5px calc(100% - 1.5px),#d6bc7d55 0)}
.art-banner img{object-position:center 12%}
.art-banner.banner-0{flex-basis:36%;z-index:2}
.art-banner.banner-1{filter:brightness(.8) saturate(.9)}
.art-banner.banner-2{filter:brightness(.65) saturate(.8)}
.art-banner img{transition:transform .8s var(--ease),opacity .35s}
.home-hero:hover .art-banner.banner-0 img{transform:scale(1.04)}
.home-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain),linear-gradient(90deg,#091529 30%,#091529cc 45%,transparent 70%),linear-gradient(transparent 75%,#03060cbb)}
.hero-copy{position:relative;height:100%;max-width:min(30rem,58%);display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.6rem 2rem}
.hero-copy h1{font:700 clamp(2.4rem,4.2vw,3.6rem)/1 var(--display);letter-spacing:.01em;color:#ead8a8;text-shadow:0 2px 0 #1e180b,0 3px 3px #000,0 -1px 0 #fff0b866}
.loadout{list-style:none;margin:0;padding:0;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.loadout li{position:relative;width:2.7rem;height:2.7rem;display:grid;place-items:center;border:1px solid var(--bronze-hi);border-radius:var(--r);overflow:hidden;background:var(--well);box-shadow:0 2px 6px #000a;color:var(--gold)}
.loadout li .icon{width:1.35rem;height:1.35rem}
.loadout .loadout-map{width:4.2rem}
.loadout .loadout-map img{position:absolute;inset:0;opacity:.55}
.loadout .loadout-map img[src]{opacity:.55}
.loadout-glyph{position:relative}
.loadout .loadout-champion{width:3.3rem;height:3.3rem;border-color:var(--gold)}
.loadout .portrait,.loadout-spell img{position:absolute;inset:0;width:100%;height:100%}
.loadout kbd,.spell-slot kbd,.spell-pick kbd,.ability-button kbd{position:absolute;right:1px;bottom:1px;font-size:.55rem;min-width:1.1em;height:1.1em;z-index:2}
.loadout-bots{gap:0}.loadout-bots b{position:absolute;right:.2rem;bottom:.05rem;font-size:.7rem;color:var(--gold-hi)}
.play-row{display:flex;gap:.6rem;align-items:stretch}
.play-button{position:relative;overflow:hidden;min-width:15rem;padding:.85rem 2rem .85rem 1.1rem;gap:.9rem;justify-content:flex-start}
.play-button:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#fff1 50%,transparent 65%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.play-button:hover:enabled:after{transform:translateX(110%)}
.play-gem{width:2.4rem;height:2.4rem;display:grid;place-items:center;transform:rotate(45deg);border:1px solid #6d4f1f;background:var(--grain),linear-gradient(135deg,#eee0ad,#8b6c35 52%,#c9a665);box-shadow:inset 0 0 0 1px #e9d394,inset 0 0 0 3px #35260d66,2px 2px 3px #3c270a80}
.play-gem .icon{transform:rotate(-45deg);width:1.2rem;height:1.2rem;fill:#2a1c06;stroke:#2a1c06}
.play-word{font:800 1.75rem/1 var(--display);letter-spacing:.14em}
.hero-status{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
.hero-status.good{color:var(--good)}
.home-modes{grid-area:modes;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:.35rem;min-height:0;overflow:visible;padding:2px}
.mode-tile{display:flex;align-items:center;gap:.65rem;padding:.25rem .75rem;text-align:left;justify-content:flex-start;min-height:0;border-color:var(--bronze)}
.mode-tile:before{content:"";position:absolute;inset:0;z-index:1;background:var(--grain),linear-gradient(90deg,#0b182ef2 30%,#0a162aaa 75%,#050a1388);box-shadow:inset 0 1px 0 #d4c19244,inset 0 0 0 3px #b19a5a20,inset 0 -3px 0 #0009}
.mode-art{position:absolute;inset:0;background:var(--slab)}
.mode-art img{transform:scale(1.3);filter:saturate(.8)}
.mode-tile:hover:enabled .mode-art img{transform:scale(1.4)}
.mode-glyph,.mode-title,.mode-arrow{position:relative;z-index:2}
.mode-glyph{width:1.85rem;height:1.85rem;flex:none;padding:.35rem;border:1px solid var(--bronze-hi);border-radius:50%;background:var(--grain),radial-gradient(#514629,#081224);color:var(--gold-hi);box-shadow:inset 0 2px 2px #000,0 0 0 2px #081223,0 0 0 3px #9a8249,0 2px 3px 4px #0009}
.mode-title{font:700 1rem/1.15 var(--display);color:var(--gold-hi);letter-spacing:.02em}
.mode-arrow{margin-left:auto;color:var(--gold);opacity:0;transform:translateX(-.5rem);transition:opacity .2s,transform .2s var(--ease)}
.mode-tile:is(:hover,:focus-visible) .mode-arrow{opacity:1;transform:none}
.home-maps{grid-area:maps;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.map-tile.big{height:auto;min-height:7rem;padding:.8rem 1rem;border-color:var(--bronze)}
.map-tile.big .map-name{font-size:1.15rem}
.map-tile.big .map-glyph .icon{width:1.6rem;height:1.6rem}
.map-tile.big:before{background:linear-gradient(transparent 20%,#030810f0),linear-gradient(90deg,#03081088,transparent 60%)}
.home-dispatch{grid-area:dispatch;display:flex;flex-direction:column;gap:.45rem;padding:.7rem .8rem;min-height:0;overflow:hidden}
.dispatch-head{justify-content:flex-start;background:none;border:0;box-shadow:none;padding:.2rem 0;color:var(--gold);font:700 .72rem var(--ui);letter-spacing:.16em;text-transform:uppercase}
.dispatch-head:hover:enabled{background:none;box-shadow:none;transform:none;color:var(--gold-hi)}
.dispatch-head b{margin-left:auto;font:800 .95rem var(--ui);color:var(--gold-hi);letter-spacing:0}
.recent-strip{display:flex;gap:.35rem}
.recent{position:relative;width:2.3rem;border:1px solid var(--line-hi)}
.recent i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--dim)}
.recent.win i{background:var(--good)}.recent.loss i{background:var(--bad)}
.recent-empty{display:grid;place-items:center;width:2.3rem;aspect-ratio:1;border:1px dashed var(--line-hi);color:var(--dim)}

/* Presets */
.presets{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.presets-glyph{color:var(--gold);display:inline-grid}
.chip-pair{display:inline-flex;align-items:stretch}
.chip-pair .chip{border-radius:3px 0 0 3px;padding-right:.5rem}
.chip-x{padding:0 .4rem;border-radius:0 3px 3px 0;border-left:0;border-color:var(--line-hi);background:var(--metal);color:var(--dim)}
.chip-x:hover:enabled{color:var(--bad);transform:none}
.chip-x .icon{width:.8rem;height:.8rem}
.preset-new{display:inline-flex;gap:2px}
.preset-new input{width:8.5rem;padding:.32rem .6rem;font-size:.78rem;border-radius:3px 0 0 3px}
.preset-new .icon-button{width:1.95rem;height:auto;border-radius:0 3px 3px 0}

/* Draft */
.draft-screen{flex:1;min-height:34rem;display:flex;flex-direction:column}
.practice-band{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--grain),linear-gradient(#091325,#0d1c35);box-shadow:inset 0 1px 3px #000b,0 1px 0 #bda76830}
.level-dial{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold)}
.level-dial input{width:9rem}
.level-dial output,.range-control output,.channel output{min-width:2.4rem;text-align:center;font:800 .95rem var(--ui);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.gold-picker{display:inline-flex;align-items:center;gap:.3rem}
.gold-glyph,.rule-glyph{display:inline-grid;color:var(--gold)}
.gold-glyph .icon,.rule-glyph{width:1.2rem;height:1.2rem}
.gold-picker input{width:5.5rem;padding:.3rem .5rem;font-size:.8rem}
.fixed{opacity:.55}
.draft-team{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.draft-member{display:flex;align-items:center;gap:.5rem;padding:.25rem .6rem .25rem .25rem;border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--panel-lo);font-size:.75rem}
.draft-member.chaos{border-left-color:var(--red)}
.draft-member.locked{border-color:var(--bronze-hi)}
.draft-member .portrait{width:2rem}
.draft-member span{display:grid}.draft-member small{color:var(--muted)}
.draft-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(19rem,27vw,30rem);gap:.9rem}
.roster-pane{display:flex;flex-direction:column;min-height:0;padding:.75rem}
.roster-tools{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem}
.roster-tools .search{flex:1;max-width:18rem}
.roster-tools .count-badge{margin-left:auto}
.roster-pane .roster{flex:1;min-height:12rem}
.selection-pane{position:relative;display:flex;flex-direction:column;min-height:0;border:1px solid var(--bronze);border-radius:var(--r);background:var(--slab);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px #aa8e4b38,0 4px 14px #000b}
.selection-art{position:relative;flex:1;height:auto;margin:0;border-radius:0;min-height:11rem;overflow:hidden;background:var(--slab)}
.selection-art img{object-position:center 14%;transition:opacity .35s}
.selection-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#091426)}
.selection-name{position:absolute;z-index:1;left:1rem;right:1rem;bottom:.6rem}
.selection-name h2{font-size:1.6rem;text-shadow:0 2px 8px #000}
.selection-name span{font-size:.78rem;color:var(--gold);letter-spacing:.06em}
.lock-seal{position:absolute;z-index:2;top:.7rem;right:.7rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;transform:rotate(45deg);border:1px solid var(--gold-hi);background:linear-gradient(135deg,#5a4520,#2a1f0c);color:var(--gold-hi);box-shadow:0 0 14px var(--gold-glow)}
.lock-seal .icon{transform:rotate(-45deg)}
.skin-strip{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem .6rem;scroll-snap-type:x proximity;background:var(--grain),#040911;border-block:1px solid var(--bronze);box-shadow:inset 0 2px 5px #000,0 1px 0 #a18b4c33}
.skin-card{flex:0 0 auto;width:3.4rem;aspect-ratio:.56;scroll-snap-align:start;background:var(--slab)}
.skin-card img{object-position:center 15%}
.skin-strip.wide{border:0;background:none;padding:.3rem 0 .5rem}
.skin-strip.wide .skin-card{width:6.2rem}
.skin-name{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.9rem .3rem .3rem;background:linear-gradient(transparent,#000e);font:700 .66rem/1.15 var(--ui);color:var(--gold-hi);text-align:center}
.spell-bench{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center;padding:.6rem}
.spell-slots{display:flex;gap:.35rem}
.spell-slot{position:relative;width:3.1rem;height:3.1rem;padding:0;overflow:hidden;border-color:var(--line-hi);background:var(--well)}
.spell-slot[aria-pressed=true]{border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold),0 0 14px var(--gold-glow)}
.spell-slot[aria-pressed=true]:before{content:"";position:absolute;inset:0;z-index:2;border:2px solid var(--gold-hi);animation:pulse 1.6s ease-in-out infinite}
.spell-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.1rem,1fr));gap:.25rem}

.spell-pick.is-d,.spell-pick.is-f{border-color:var(--bronze-hi)}
.spell-fallback{position:absolute;inset:0;display:grid;place-items:center;font:700 .6rem var(--ui);color:var(--dim);text-transform:uppercase}
.draft-foot{display:flex;align-items:center;gap:.5rem;padding:.6rem;border-top:1px solid var(--line)}
.draft-foot .start-button{margin-left:auto;padding:.75rem 1.2rem}
.draft-files{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted)}
.draft-files.good{color:var(--good)}

/* Rules bar, team board and inline slot editing */
.rules-bar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.8rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r);background:var(--grain),linear-gradient(#091325,#0d1c35);box-shadow:inset 0 1px 3px #000b,0 1px 0 #bda76830}
.rule{display:inline-flex;align-items:center;gap:.45rem}
.rules-bar>.pill{margin-left:auto}
.team-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;align-items:start}
.team-col{padding:.6rem;border:1px solid var(--line);border-top:2px solid var(--blue);border-radius:var(--r);background:var(--slab);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px #a88d4422,0 3px 8px #0008}
.team-col.chaos{border-top-color:var(--red)}
.team-head{display:flex;align-items:center;gap:.45rem;padding:.1rem .2rem .3rem;color:var(--blue);font:700 .78rem var(--ui);letter-spacing:.16em;text-transform:uppercase}
.team-col.chaos .team-head{color:var(--red)}
.team-head .icon{width:1.2rem;height:1.2rem}
.team-count{margin-left:auto;font:800 1rem var(--ui);color:var(--text);letter-spacing:0}
.team-count small{color:var(--dim);font-size:.75rem}
.slot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem .7rem;align-items:center;margin-top:.45rem;padding:.5rem;border:1px solid #514735;border-radius:var(--r);background:var(--grain),linear-gradient(#102242,#0a172d);box-shadow:var(--bevel);transition:border-color .2s,box-shadow .2s}
.slot:hover{border-color:#8b7d51}
.slot.editing{border-color:var(--bronze-hi);box-shadow:0 0 0 1px #b3945744,0 10px 24px #000a}
.slot-portrait{position:relative;width:3.7rem;height:3.7rem;padding:0;overflow:hidden;border:1px solid var(--bronze);background:var(--well);align-self:start}
.slot-portrait .portrait{width:100%;height:100%}
.slot-edit{position:absolute;inset:0;display:grid;place-items:center;background:#000a;color:var(--gold-hi);opacity:0;transition:opacity .15s}
.slot-edit .icon{width:1.4rem;height:1.4rem}
button.slot-portrait:is(:hover,:focus-visible) .slot-edit,button.slot-portrait[aria-expanded=true] .slot-edit{opacity:1}
button.slot-portrait[aria-expanded=true]{border-color:var(--gold-hi);box-shadow:0 0 12px var(--gold-glow)}
.slot-badge{position:absolute;z-index:2;right:1px;bottom:1px;width:1.15rem;height:1.15rem;display:grid;place-items:center;border-radius:2px;background:#2d230f;border:1px solid var(--gold);color:var(--gold-hi)}
.slot-badge .icon{width:.75rem;height:.75rem}
.slot-main{display:grid;gap:.35rem;min-width:0}
.slot-title{display:flex;align-items:center;gap:.4rem;min-width:0}
.slot-title b{font:700 .95rem var(--display);color:var(--gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-kind{display:inline-grid;color:var(--dim)}.slot-kind.host{color:var(--gold)}
.fingerprint{font:.68rem ui-monospace,monospace;color:var(--dim)}
.slot-controls{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.tier{display:inline-flex;align-items:flex-end;gap:1px;padding:2px 4px;border:1px solid var(--line);border-radius:var(--r);background:var(--well);height:1.95rem}
.tier .pip{width:.95rem;height:100%;padding:0;border:0;background:none;box-shadow:none;align-items:flex-end}
.tier .pip i{display:block;width:.42rem;background:#173363;transform:skewX(-12deg);transition:background .2s,box-shadow .2s,height .2s}
.tier .pip:nth-child(1) i{height:.45rem}.tier .pip:nth-child(2) i{height:.75rem}.tier .pip:nth-child(3) i{height:1.05rem}.tier .pip:nth-child(4) i{height:1.35rem}
.tier .pip.lit i{background:var(--bronze-hi)}
.tier .pip[aria-pressed=true] i{background:var(--gold-hi);box-shadow:0 0 6px var(--gold)}
.tier .pip:hover:enabled{transform:none;background:none}
.tier .pip:hover:enabled i{background:var(--gold)}
.tier .special{width:1.45rem;height:100%;padding:0;border:0;background:none;box-shadow:none;color:var(--dim);margin-left:.15rem}
.tier .special[aria-pressed=true]{color:var(--gold-hi);filter:drop-shadow(0 0 4px var(--gold))}
.tier .special:hover:enabled{transform:none;background:none;color:var(--text)}
.slot-loadout{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.loadout-gap{width:.4rem}
.loadout-slot{position:relative;width:1.9rem;height:1.9rem;padding:0;overflow:hidden;border:1px dashed #6c6048;background:var(--well);box-shadow:none}
.loadout-slot.filled{border-style:solid;border-color:var(--bronze)}
.loadout-slot.targeted,.loadout-slot[aria-expanded=true]{border:1px solid var(--gold-hi);box-shadow:0 0 10px var(--gold-glow)}
.slot-key{font:700 .65rem var(--ui);color:var(--dim)}
.slot-swap{align-self:start}
.slot-palette{grid-column:1/-1;display:grid;gap:.45rem;margin-top:.15rem;padding:.55rem;border:1px solid var(--bronze);border-radius:var(--r);background:var(--grain),#060d18;box-shadow:inset 0 2px 5px #000}
.palette-head{display:flex;align-items:center;gap:.4rem;color:var(--gold);font:700 .8rem var(--ui)}
.palette-head .icon-button{margin-left:auto;width:1.8rem;height:1.8rem}
.palette-roles{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.palette-dice{color:var(--gold);width:1.3rem;height:1.3rem}
.role-pick{width:2.1rem;height:2.1rem;display:grid;place-items:center;color:var(--muted);background:var(--well)}
.role-pick .icon{width:1.3rem;height:1.3rem}
.palette-grid{display:grid;gap:.25rem;max-height:13.5rem;overflow:auto;padding:.15rem}
.palette-grid.champions{grid-template-columns:repeat(auto-fill,minmax(2.9rem,1fr))}
.palette-grid.spells{grid-template-columns:repeat(auto-fill,minmax(2.3rem,2.6rem))}
.palette-grid.items{grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr))}
.palette-grid .champion-tile .tile-name{font-size:.55rem}
.item-tile,.spell-pick{display:block;background:var(--well)}
.item-tile:before,.spell-pick:before{content:"";display:block;padding-top:100%}
.item-tile>img,.spell-pick>img{position:absolute;inset:0}
.item-tile .price{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.05rem 0;background:#000b;font:800 .58rem/1.2 var(--ui);color:var(--gold);text-align:center}
.item-tile.default>.icon,.spell-pick.default>.icon{position:absolute;inset:0;margin:auto;color:var(--muted)}
.open-slot{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;color:var(--dim);border-style:dashed;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.human-slot{border-color:var(--bronze)}
.slot-hint{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.8rem}
.you-badge{background:#112649;border-color:var(--teal);color:var(--teal)}
.configure-screen{flex:1;display:flex;flex-direction:column}

/* Lobby */
.lobby-screen{display:flex;flex-direction:column;flex:1}
.lobby-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(17rem,22vw,24rem);gap:.9rem}
.lobby-main{display:flex;flex-direction:column;min-width:0}
.lobby-main .team-board,.configure-screen .team-board{flex:1;align-items:stretch}
.invite{display:flex;align-items:center;gap:.4rem;color:var(--gold)}
.invite input{width:15rem;font:.75rem ui-monospace,monospace;padding:.45rem .6rem}
.member-slot .avatar{width:3.7rem;height:3.7rem;border:0;background:var(--grain),radial-gradient(#183568,#081224);border-radius:50%;display:grid;place-items:center}
.member-slot .avatar .ring{position:absolute;inset:0;width:100%;height:100%}
.member-slot .avatar .ring-label{display:none}
.avatar-initials{font:700 1.05rem var(--display);color:var(--gold-hi)}
.slot-status{display:flex;gap:.35rem;flex-wrap:wrap}
.member-slot.ready{border-color:#536887}
.lobby-side{display:flex;flex-direction:column;gap:.9rem}
.lobby-side .chat-panel{flex:1;display:flex;flex-direction:column;min-height:16rem}
.lobby-side .chat{flex:1;height:auto;min-height:8rem}
.chat-panel{padding:.75rem}
.chat{height:13rem;overflow:auto;display:flex;flex-direction:column;gap:.35rem;margin:0 0 .6rem;padding:.4rem;background:var(--well);border:1px solid var(--line);font-size:.82rem}
.chat-message{display:flex;gap:.4rem;align-items:baseline;overflow-wrap:anywhere}
.chat-message b{color:var(--gold)}
.chat-message.system{color:var(--muted);font-size:.75rem}
.chat-message.system .icon{width:.7rem;height:.7rem;color:var(--bronze-hi)}
.chat-form{display:flex;gap:.35rem}
.chat-form .icon-button{padding:0}
.readiness-panel{display:grid;gap:.8rem;padding:.8rem}
.readiness{display:flex;align-items:center;gap:.7rem}
.readiness-text{display:grid;min-width:0;font-size:.75rem;color:var(--muted)}
.readiness-text b{font-size:.9rem;color:var(--text)}
.readiness-file{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
.readiness .pill{margin-left:auto}
.readiness.is-ready b{color:var(--good)}
.net-check{display:flex;align-items:center;gap:.7rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.75rem}
.net-check div{display:grid}
.net-check b{font-size:.85rem}
.radar.busy .icon,.radar-button.busy .icon{animation:spin 1.4s linear infinite}

/* Custom */
.custom-screen{flex:1;display:flex;flex-direction:column}
.custom-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;min-height:18rem}
.custom-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;border-color:var(--bronze);text-align:center}
.custom-tile:before{content:"";position:absolute;inset:0;z-index:1;background:var(--grain),radial-gradient(ellipse at center,#070f1de0 20%,#070f1d80 75%);box-shadow:inset 0 0 0 3px #bfa46844,inset 0 0 50px #0009}
.custom-art{position:absolute;inset:0}
.custom-art img{transform:scale(1.1);filter:saturate(.7)}
.custom-tile>:not(.custom-art){position:relative;z-index:2}
.custom-glyph{width:4rem;height:4rem;color:var(--gold-hi);filter:drop-shadow(0 0 12px var(--gold-glow))}
.custom-tile h2{font-size:2rem}
.custom-tile .primary{min-width:13rem;padding:.8rem 1.4rem}
.join-row{display:flex;gap:.4rem;width:min(26rem,100%)}
.join-row input{font:.85rem ui-monospace,monospace}
.facts{list-style:none;margin:.9rem 0 0;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:.8rem}
.facts li{display:flex;align-items:center;gap:.4rem}.facts .icon{color:var(--gold)}

/* Collections */
.collection-grid{flex:1;min-height:30rem;display:grid;grid-template-columns:minmax(17rem,.85fr) minmax(0,1.5fr);gap:.9rem}
.collection-grid .roster-pane .search{margin-bottom:.6rem}
.dossier{display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
.dossier-hero{position:relative;flex:none;height:11.5rem;overflow:hidden;background:var(--slab)}
.dossier-art{position:absolute;inset:0;object-position:center 18%}
.dossier-hero:after{content:"";position:absolute;inset:0;background:var(--grain),linear-gradient(90deg,#081120f2 25%,#08112088 60%,transparent),linear-gradient(transparent 60%,#081223)}
.dossier-title{position:absolute;z-index:1;left:1.2rem;bottom:1rem;display:grid;gap:.35rem}
.dossier-title h2{font-size:2.1rem}
.stats{display:flex;gap:.35rem;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border:1px solid var(--line-hi);border-radius:var(--r);background:var(--grain),#071020ee;color:var(--gold);font-size:.75rem}
.stat b{color:var(--text);font-variant-numeric:tabular-nums}
.dossier-body{flex:1;min-height:0;overflow:auto;padding:.9rem 1.1rem;display:grid;gap:1.1rem;align-content:start}
.dossier-section h3 .count{margin-left:.2rem;color:var(--dim)}
.dossier-section>h3{margin-bottom:.5rem}
.ability-bar{display:flex;gap:.4rem;margin-bottom:.7rem}
.ability-button{position:relative;width:3.2rem;height:3.2rem;padding:0;overflow:hidden;border-color:var(--line-hi);background:var(--well)}
.ability-detail{padding:.7rem .8rem;border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--grain),#081223;display:grid;gap:.45rem;font-size:.85rem}
.ability-detail h3{text-transform:none;letter-spacing:.02em;font:700 1rem var(--display);color:var(--gold-hi)}
.ability-icon{width:1.6rem!important;height:1.6rem!important;border:1px solid var(--bronze)}
.tooltip-copy{color:var(--muted);font-size:.8rem}
.ability-numbers{display:flex;gap:.35rem;flex-wrap:wrap}
.shop-grid{flex:1;min-height:28rem;display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,25vw,26rem);gap:.9rem}
.item-pane{display:flex;min-height:0;padding:.7rem}
.item-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(4.3rem,1fr));gap:.35rem;align-content:start;overflow:auto;max-height:none;padding:.2rem}
.item-detail{display:flex;flex-direction:column;gap:.7rem;overflow:auto;min-height:0}
.item-head{display:flex;gap:.8rem;align-items:center}
.item-large{width:4.2rem!important;height:4.2rem!important;flex:none;border:1px solid var(--gold);box-shadow:0 0 14px var(--gold-glow)}
.price-line{display:flex;align-items:center;gap:.35rem;color:var(--gold);margin-top:.25rem}
.price-line b{font-size:1.1rem;color:var(--gold-hi)}
.item-description{font-size:.85rem;color:var(--muted);line-height:1.5}
.recipe{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.recipe-plus{color:var(--dim)}
.item-tile.small{width:2.6rem}
.news-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr);gap:.9rem;align-items:start}
.bulletin{display:flex;gap:1rem;align-items:flex-start;min-height:8rem}
.seal{flex:none;width:3.6rem;height:3.6rem;display:grid;place-items:center;border:1px solid var(--bronze-hi);border-radius:50%;background:radial-gradient(#2a2416,#081223);color:var(--muted)}
.seal .icon{width:1.6rem;height:1.6rem}
.bulletin.verified .seal{color:var(--gold-hi);border-color:var(--gold);box-shadow:0 0 16px var(--gold-glow)}
.notice-copy{white-space:pre-wrap;line-height:1.6;font-size:.9rem}
.rules-card{display:grid;gap:.7rem}
.rule-stats{display:flex;gap:.4rem;flex-wrap:wrap}
.rule-stats .stat{font-size:.9rem;padding:.35rem .6rem}
.mini-maps{display:flex;gap:.4rem}
.downloads-top{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:.8rem}
.totals{display:grid}
.totals b{font:700 1.4rem var(--display);color:var(--gold-hi)}
.totals span{font-size:.8rem;color:var(--muted)}
.upload-cap{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-left:auto}
.upload-cap input{width:5.5rem;padding:.3rem .5rem;font-size:.8rem}
.upload-cap small{color:var(--dim);font-size:.7rem}
.confirm{margin-bottom:.8rem}
.pack-tools{display:flex;gap:.6rem;margin-bottom:.6rem}
.pack-tools .search{width:16rem}
.pack-groups{display:grid;gap:.8rem}
.pack-big{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.6rem}
.pack-champions{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));gap:.45rem}
.pack-tile{position:relative;display:flex;flex-direction:column;gap:.25rem}
.pack-button{width:100%;aspect-ratio:1;display:grid;place-items:center;color:var(--gold);background:var(--metal)}
.pack-big .pack-button{aspect-ratio:auto;height:5.5rem}
.pack-button .portrait{position:absolute;inset:0}
.pack-button:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 50%,#000a)}
.pack-glyph{position:relative;z-index:2;width:2rem;height:2rem}
.pack-state{position:absolute;z-index:2;right:.25rem;bottom:.25rem;width:1.3rem;height:1.3rem;display:grid;place-items:center;border-radius:50%;background:#060e1dee;border:1px solid var(--line-hi);color:var(--muted)}
.pack-state .icon{width:.8rem;height:.8rem}
.pack-tile.done .pack-state{background:#12284f;border-color:var(--good);color:var(--good)}
.pack-tile.done .pack-button{border-color:#657b9e}
.pack-seed{position:absolute;z-index:2;left:.25rem;bottom:.25rem;color:var(--teal)}
.pack-progress{display:grid;gap:.15rem}
.progress-track{height:4px;margin:0;border-radius:2px;background:#04080f;box-shadow:inset 0 1px 2px #000,0 1px 0 #90784544;overflow:hidden}
.progress-track>div{height:100%;background:linear-gradient(#dfc589,#8d7137 50%,#b4944f);box-shadow:inset 0 1px 0 #fff4;transition:width .4s var(--ease)}
.pack-tile.done .progress-track>div{background:var(--good)}
.pack-progress>span{font-size:.6rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pack-name{position:absolute;z-index:2;left:.6rem;top:.45rem;font:700 .85rem var(--display);color:var(--gold-hi);text-shadow:0 1px 3px #000}

/* Parchment reading surfaces: local ink colours preserve contrast on the light stock. */
.ability-detail,.bulletin{--text:#21190d;--muted:#382b18;--dim:#382b18;--gold:#3f2911;--gold-hi:#30200a;--line:#968153;--line-hi:#8e774c;
  color:var(--text);border-color:#8d7343;background:var(--grain),radial-gradient(ellipse at 50% 45%,transparent 20%,#5d3c1818),linear-gradient(105deg,#cbbb92,#d3c39b 45%,#c8b98d);
  box-shadow:inset 0 0 0 1px #231a0e,inset 0 0 0 3px #e1cea46b,inset 0 0 18px #61431b28,0 3px 8px #0008}
.ability-detail h3,.bulletin h2,.bulletin .eyebrow{text-shadow:0 1px 0 #fbeac280}
.ability-detail .stat{background:#eadab144;border-color:#8e774c;box-shadow:inset 0 1px 2px #6e52292b}
.ability-detail kbd{color:#33250f;background:linear-gradient(#e4d3a9,#b29a6d);border-color:#8a7146;text-shadow:0 1px 0 #fff5}
.bulletin .seal,.bulletin.verified .seal{color:#e8d5a9;border-color:#8f7340;background:var(--grain),radial-gradient(#786039,#382811);box-shadow:inset 0 2px 4px #160f06,0 1px 0 #efdfa466}

/* Settings */
.settings-file{display:flex;align-items:center;gap:.35rem}
.settings-file p{font-size:.75rem;color:var(--muted);max-width:16rem}
.settings-editor{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.9rem;align-items:start}
.settings-tabs{display:flex;flex-direction:column;gap:.3rem}
.settings-tabs button{justify-content:flex-start;gap:.65rem;padding:.7rem .8rem;border-color:var(--line);background:var(--metal);color:var(--muted);font-weight:700;letter-spacing:.06em}
.settings-tabs button .icon{width:1.3rem;height:1.3rem;color:var(--dim);transition:color .15s}
.settings-tabs button[aria-selected=true]{color:var(--gold-hi);border-color:var(--gold);background:var(--grain),linear-gradient(#193c68,#0b1c36);box-shadow:var(--bevel),inset 3px 0 0 var(--riot),0 0 10px var(--gold-glow)}
.settings-tabs button[aria-selected=true] .icon{color:var(--gold)}
#settings-content{min-height:18rem}
.config-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));gap:0 1.6rem;align-content:start}
.config-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.8rem;padding:.35rem .2rem;border-bottom:1px solid #62543d38;cursor:pointer}
.config-row>span:first-child{font-size:.88rem}
.config-row.select{cursor:default}
.config-row.range .range-control{display:flex;align-items:center;gap:.5rem;width:12rem}
.seg.meter{align-items:flex-end;height:1.95rem}
.seg.meter>button{width:1.5rem;min-width:0;height:100%;padding:0;align-items:flex-end;padding-bottom:3px}
.seg.meter>button i{display:block;width:.55rem;background:#173363;transform:skewX(-12deg)}
.seg.meter>button:nth-child(1) i{height:.3rem}.seg.meter>button:nth-child(2) i{height:.55rem}.seg.meter>button:nth-child(3) i{height:.8rem}.seg.meter>button:nth-child(4) i{height:1.05rem}.seg.meter>button:nth-child(5) i{height:1.3rem}
.seg.meter>button.lit i{background:var(--bronze-hi)}
.seg.meter>button[aria-pressed=true]{background:none;border-color:transparent;box-shadow:none}
.seg.meter>button[aria-pressed=true] i{background:var(--gold-hi);box-shadow:0 0 6px var(--gold)}
.seg.meter>button .icon{width:.9rem;height:.9rem;margin:auto}
.section-note{display:flex;align-items:center;gap:.45rem;margin-bottom:.6rem;font-size:.78rem;color:var(--dim)}
.sound-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.sound-head .config-row{flex:1;max-width:24rem}
.mixer{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.6rem}
.channel{display:grid;justify-items:center;gap:.5rem;padding:.9rem .6rem;border:1px solid var(--line);background:var(--slab);box-shadow:var(--bevel);transition:opacity .2s,border-color .2s}
.channel-glyph{width:1.8rem;height:1.8rem;color:var(--gold)}
.channel-name{font:700 .78rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.channel .fader{width:100%}
.channel.muted{border-color:#4a2c28}
.channel.muted :is(.fader,output,.channel-glyph){opacity:.4}
.mute-toggle{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--line-hi);border-radius:50%;cursor:pointer;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.mute-toggle:hover{border-color:var(--gold);color:var(--text)}
.mute-toggle:has(input:checked){color:var(--bad);border-color:var(--bad);background:var(--panel-lo)}
.mute-toggle:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.keys-hint{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;font-size:.78rem;color:var(--dim)}
.key-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.8rem;align-items:start}
.key-group{padding:.6rem .7rem;border:1px solid var(--line);background:var(--grain),#081223}
.key-group h3{margin-bottom:.4rem}
.binding-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.35rem;align-items:center;padding:.2rem 0;font-size:.8rem}
.binding-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keycap{min-width:4.5rem;padding:.25rem .45rem;gap:.15rem;background:var(--well);border-color:var(--line-hi);box-shadow:none}
.keycap i{font-style:normal;color:var(--dim);margin:0 .15rem}
.keycap .unbound{color:var(--dim)}
.keycap.recording{border-color:var(--teal);color:var(--teal);animation:pulse 1.2s ease-in-out infinite}
.keycap.wide{min-width:9rem}
.quick-matrix{display:grid;grid-template-columns:1fr auto auto;gap:.3rem .8rem;align-items:center;font-size:.8rem}
.quick-matrix>span[data-tip]{color:var(--gold);justify-self:center}
.mini-switch{position:relative;display:inline-flex;cursor:pointer}
.mini-switch .switch-track{width:2.1rem;height:1.15rem}.mini-switch .switch-track:after{width:.75rem;height:.75rem}
.mini-switch input:checked+.switch-track:after{transform:translateX(.95rem)}
.hud-controls{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap;margin-bottom:.6rem;padding:.5rem .6rem;border:1px solid var(--line);background:var(--grain),#081223}
.hud-controls .config-row{border:0;min-height:0}
.mouse-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem;margin-bottom:.9rem}
.mouse-mode{display:grid;justify-items:start;justify-content:stretch;align-content:start;gap:.3rem;padding:.9rem 1rem;text-align:left;background:var(--metal)}
.mouse-mode .mode-glyph{width:2.3rem;height:2.3rem;padding:.45rem}
.mouse-mode b{font:700 1rem var(--display);color:var(--gold-hi)}
.mouse-mode small{color:var(--muted);font-weight:400;font-size:.75rem;line-height:1.35}
.release-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.85rem}
#editor-status{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.78rem}

/* Browser, profile, setup, launching */
.browser-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(16rem,1fr);gap:.9rem;align-items:start}
.capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.capability{position:relative;display:grid;justify-content:stretch;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 .7rem;padding:.8rem;border:1px solid var(--line);background:var(--grain),#081223;font-size:inherit}
.capability:last-child{border:1px solid var(--line)}
.capability.ok{border-color:#4d6285}
.capability.bad{border-color:#6b3c33}
.cap-icon{grid-row:span 2;width:2rem;height:2rem;color:var(--gold)}
.capability b{font-size:.95rem}
.cap-name{grid-column:2;font-size:.72rem;color:var(--muted)}
.cap-state{grid-row:1/span 2;grid-column:3;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid currentColor}
.capability.ok .cap-state{color:var(--good)}.capability.bad .cap-state{color:var(--bad)}
.capability p{grid-column:1/-1;margin:.4rem 0 0;font-size:.75rem;color:var(--warn)}
.connection-card{display:grid;justify-items:center;gap:.8rem;text-align:center}
.radar-button{flex-direction:column;width:8rem;height:8rem;border-radius:50%;border-color:var(--bronze-hi);background:var(--grain),radial-gradient(#173261,#081223 70%);color:var(--gold-hi);box-shadow:0 0 0 4px #060d1a,0 0 0 5px #7c684366,0 8px 24px #000a}
.radar-button .icon{width:2.6rem;height:2.6rem}
.radar-button span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.radar-button:hover:enabled{box-shadow:0 0 0 4px #060d1a,0 0 0 5px var(--gold),0 0 24px var(--gold-glow)}
.connection-result{display:grid;gap:.5rem;justify-items:center}
.verdict{display:flex;align-items:center;gap:.4rem;font-weight:700}
.verdict.good{color:var(--good)}.verdict.warn{color:var(--warn)}
.badges{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.connection-result .muted{display:flex;gap:.4rem;align-items:center;font-size:.8rem}
.utility-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
.utility-tiles button{display:flex;gap:.7rem;justify-content:flex-start;padding:1rem;background:var(--metal);font:700 .95rem var(--display);color:var(--gold-hi)}
.utility-tiles button .icon{width:1.6rem;height:1.6rem;color:var(--gold)}
.profile-grid{display:grid;grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);gap:.9rem;align-items:start}
.identity-card{display:grid;justify-items:center;gap:.7rem;text-align:center}
.profile-crest{width:5.5rem;height:5.5rem;display:grid;place-items:center;transform:rotate(45deg);margin:1rem;border:1px solid var(--gold);background:linear-gradient(135deg,#3a2d12,#0a162a);box-shadow:0 0 0 4px #060d1a,0 0 0 5px #7c684388,0 0 24px var(--gold-glow);font:700 1.8rem var(--display);color:var(--gold-hi)}
.profile-crest>*{transform:rotate(-45deg)}
.profile-crest .icon{width:2rem;height:2rem}
.name-form{display:flex;gap:.35rem;width:100%}
.register{display:grid;gap:.3rem;justify-items:center}
.identity-card details{width:100%;text-align:left;font-size:.8rem;color:var(--muted)}
.identity-card summary{display:flex;align-items:center;gap:.4rem;cursor:pointer;color:var(--gold)}
.match-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.5rem}
.match-card{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.5rem;overflow:hidden;border:1px solid var(--line);border-left:3px solid var(--dim);background:var(--grain),#081223}
.match-card.win{border-left-color:var(--good)}.match-card.loss{border-left-color:var(--bad)}
.match-map{position:absolute;inset:0;opacity:.18}
.match-card>:not(.match-map){position:relative}
.match-card h3{text-transform:none;letter-spacing:.02em;font:700 .95rem var(--display);color:var(--gold-hi)}
.match-meta{display:flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.75rem}
.result{font:800 .7rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.match-card.win .result{color:var(--good)}.match-card.loss .result{color:var(--bad)}
.setup-screen{flex:1;display:grid;grid-template-columns:minmax(0,30rem) minmax(0,28rem);gap:1.2rem;justify-content:center;align-content:center}
.setup-card{display:grid;justify-items:center;gap:.8rem;padding:2rem;text-align:center}
.setup-card .back{justify-self:start}
.setup-crest .icon{width:4rem;height:4rem;color:var(--gold);filter:drop-shadow(0 0 12px var(--gold-glow))}
.setup-card .readiness{width:100%;justify-content:center}
.enter-button{min-width:14rem;padding:.8rem 1.4rem}
.setup-checks .capabilities{grid-template-columns:1fr}
.launch-screen{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;min-height:24rem}
.launch-art{position:absolute;inset:-2rem;filter:blur(18px) brightness(.45) saturate(.8)}
.launch-card{position:relative;display:grid;justify-items:center;gap:.9rem;padding:2rem 2.5rem;min-width:22rem;text-align:center}
.launch-card h1{font-size:2.4rem}

/* Game */
.game-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.game-title{display:flex;align-items:center;gap:.7rem}
.game-glyph{width:2.2rem;height:2.2rem;color:var(--gold)}
.game-top h1{font-size:1.3rem}
.game-top p{font-size:.78rem;color:var(--muted);margin:0}
.game-tools{display:flex;align-items:center;gap:.5rem}
#game-mount{flex:1;min-height:20rem;aspect-ratio:auto;border:1px solid #b6975a;border-radius:0;box-shadow:0 0 0 3px #0b1931,0 0 0 4px #594a31;background:#02060d;overflow:hidden;position:relative}
#game-mount:empty:after{content:'Starting the match…';position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);background:url('/shell/ornament.svg') center/cover;font-family:Cinzel,serif;font-size:1.2rem}
#game-mount iframe{display:block;border:0;width:100%;height:100%}
#game-mount:fullscreen{height:100vh!important;border:0;box-shadow:none}
.game-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;font-size:.72rem;color:var(--muted)}
.hints kbd{margin:0 .1rem}
.runtime-details{margin-top:.4rem;color:var(--dim);font-size:.7rem}
.runtime-details pre{max-height:9rem;overflow:auto;white-space:pre-wrap;font:.65rem/1.5 ui-monospace,monospace}
body[data-screen=game]>header{height:3.2rem}
body[data-screen=game]>header nav{display:none}
body[data-screen=game] .brand{font-size:1.1rem}body[data-screen=game] .brand img{height:2rem}body[data-screen=game] .brand small{display:none}
body[data-screen=game] main{padding:.6rem 1rem}
body[data-screen=game] footer{display:none}

/* Beta gate */
.beta-page main{display:grid;place-items:center;overflow:auto}
.beta-gate{width:min(30rem,94vw);display:grid;justify-items:center;gap:.7rem;padding:2.4rem;text-align:center}
.beta-gate form{width:100%;display:grid;gap:.8rem;margin:1rem 0;text-align:left}
.beta-gate label{display:grid;gap:.35rem;color:var(--muted);font-size:.8rem}
.gate-mark{filter:drop-shadow(0 8px 15px #000)}
.ornamental-rule{color:var(--bronze-hi);letter-spacing:1rem}

/* Motion */
@keyframes enter{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:150% 0,0 0}to{background-position:-100% 0,0 0}}
@keyframes spin{to{transform:rotate(270deg)}from{transform:rotate(-90deg)}}
@keyframes pulse{50%{opacity:.45}}
main.screen-enter>*{animation:enter .4s var(--ease) both}
main.screen-enter .home>*{animation:enter .5s var(--ease) both}
main.screen-enter .home>:nth-child(2){animation-delay:.06s}main.screen-enter .home>:nth-child(3){animation-delay:.12s}main.screen-enter .home>:nth-child(4){animation-delay:.18s}
main.screen-enter .home-hero .art-banner{animation:enter .7s var(--ease) both}
main.screen-enter .home-hero .banner-1{animation-delay:.12s}main.screen-enter .home-hero .banner-2{animation-delay:.22s}
.radar-button.busy .icon,.radar.busy .icon{animation:spin 1.4s linear infinite}

/* Responsive */
@media (max-height:800px){
  .home{grid-template-rows:minmax(17rem,1.8fr) minmax(7.5rem,1fr)}
  .hero-copy{gap:.7rem;padding:1.2rem 1.6rem}
  .play-word{font-size:1.5rem}
  .map-tile.big{min-height:5.5rem}
  .selection-art{min-height:9rem}
}
@media (max-width:1100px){
  .home{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"hero" "modes" "maps" "dispatch"}
  .home-hero{min-height:22rem}
  .home-modes{grid-template-columns:repeat(3,1fr);overflow:visible;scrollbar-gutter:auto}
  .draft-layout,.lobby-grid,.collection-grid,.shop-grid,.news-grid,.browser-grid,.profile-grid,.setup-screen{grid-template-columns:1fr}
  .roster-pane .roster{max-height:24rem}
  .selection-pane{min-height:30rem}
  .collection-grid .roster{max-height:16rem}
  .dossier-body{overflow:visible}
  .settings-editor{grid-template-columns:1fr}
  .settings-tabs{flex-direction:row;overflow-x:auto}
  .settings-tabs button{flex:none}
}
@media (max-width:760px){
  :root{font-size:14px}
  body>header{gap:.6rem;padding:0 .75rem}
  .brand span{display:none}
  .nav{padding:0 .55rem;font-size:0}
  .nav .icon{width:1.35rem;height:1.35rem}
  .header-tools .nav span,.identity-badge{display:none}
  main{padding:.8rem 1rem 1rem}
  .home-modes,.home-maps,.team-board,.custom-grid,.capabilities,.utility-tiles{grid-template-columns:1fr}
  .hero-art{inset:0 0 0 45%;opacity:.5}
  .hero-copy{max-width:100%}
  .play-button{min-width:0;flex:1}
  .map-tiles{flex-wrap:wrap}
  .rules-bar>.pill{margin-left:0}
  .invite input{width:100%}
  .screen-bar>.presets,.screen-bar>.invite{margin-left:0;width:100%}
  .config-fields{grid-template-columns:1fr}
  .channel{grid-template-columns:1fr}
  footer span:nth-child(2){display:none}
}
@media (min-width:2600px){.roster{grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr))}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:1100px){.draft-screen:has(.sr-map-choice){flex:none}.draft-screen:has(.sr-map-choice) .draft-layout{flex:none;grid-template-rows:auto auto}.draft-screen:has(.sr-map-choice) .roster-pane{min-height:20rem}}

/* Download flow remains independent of the current launcher screen. */
.download-status{position:fixed;right:1rem;bottom:2.6rem;z-index:30;display:flex;gap:.65rem;padding:.65rem .9rem;border:1px solid var(--bronze);background:var(--panel-lo);box-shadow:0 3px 12px #0009;text-align:left;font-size:.85rem}
.download-status small{display:block;color:var(--muted);font-size:.75rem;margin-top:.2rem}
.download-status.ready{opacity:.75;padding:.4rem .7rem;font-size:.75rem}
.download-status .icon{width:1rem;height:1rem;flex:none}
.download-welcome{position:fixed;z-index:40;width:min(31rem,calc(100vw - 2rem));left:50%;top:50%;transform:translate(-50%,-50%);padding:1.5rem;box-shadow:0 0 0 100vmax #02050b99,0 8px 50px #000}
.download-welcome h2{margin:.4rem 0 1rem;color:var(--gold-hi)}
.download-welcome p{line-height:1.5;margin-bottom:1rem}
.download-fallback{position:fixed;z-index:41;bottom:6rem;right:1rem;max-width:28rem;padding:1rem}
@media(min-width:1101px) and (max-height:680px){.mode-title{font-size:.9rem}.mode-glyph{width:1.55rem;height:1.55rem;padding:.25rem}.home{min-height:27rem}.home-modes{gap:.25rem}}
@media(max-width:1100px){.home-modes{grid-template-rows:none;grid-auto-rows:minmax(3.3rem,auto)}}

body[data-screen=game]>.download-status{display:none}
.hosting-hint{display:inline-block;margin-left:.75rem;padding-left:.75rem;border-left:1px solid var(--line, rgba(200,170,110,.35));color:var(--gold, #c8aa6e)}