@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cinzel-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cinzel-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cinzel-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cinzel-700.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-sans-400.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-sans-500.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/dm-sans-600.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/dm-sans-700.ttf) format('truetype');
}
:root{color-scheme:dark;--gold:#dec087;--pale:#f3e8d2;--ink:#172127;--muted:#acb5af;--line:rgba(222,192,135,.22);--panel:rgba(18,29,32,.87);--green:#97bea3}
*{box-sizing:border-box}body{margin:0;background:#1b2e35;color:var(--pale);font:14px 'DM Sans','Segoe UI',sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button,input,select{outline:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;display:block}#vignette{position:fixed;inset:0;background:radial-gradient(ellipse at 60% 40%,transparent 46%,rgba(8,16,20,.16));pointer-events:none}a{color:inherit;text-decoration:none}.lobby{position:fixed;inset:0;background:linear-gradient(90deg,rgba(12,24,29,.92),rgba(12,24,29,.77) 31%,rgba(12,24,29,.13) 66%,rgba(12,24,29,.10))}.lobby-top{display:flex;justify-content:space-between;align-items:center;padding:30px 44px}.wordmark{display:flex;align-items:center;gap:14px;font:600 20px Cinzel,Georgia,serif;letter-spacing:5px}.crest{width:36px;height:42px;display:grid;place-items:center;border:1px solid var(--gold);clip-path:polygon(0 0,100% 0,100% 77%,50% 100%,0 77%);background:linear-gradient(130deg,#3e493a,#172628);color:var(--gold);font:600 25px Cinzel,Georgia,serif;line-height:1;padding-bottom:4px}.crest.large{width:60px;height:70px;font-size:42px}.build-label{font-size:10px;letter-spacing:2px;color:#ede5cf;display:flex;align-items:center;gap:10px}.build-label span{color:#b4b9ae}.build-label i,.connection i,.small-dot,.map-footer i{width:5px;height:5px;background:var(--green);border-radius:50%;display:inline-block;box-shadow:0 0 8px #a3db9870}.welcome{position:absolute;top:50%;left:6%;transform:translateY(-46%);width:440px;max-width:calc(100vw - 48px)}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2.8px;font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow>span:empty{width:24px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font:400 clamp(40px,4vw,64px)/1.12 Cinzel,Georgia,serif;letter-spacing:-1.8px;margin:19px 0;color:#f8eed7}.intro{font-size:14px;line-height:1.8;color:#c2c8bc;margin-bottom:26px}.auth-card{padding:23px 24px;background:linear-gradient(125deg,rgba(29,41,43,.94),rgba(16,28,33,.87));border:1px solid var(--line);box-shadow:0 16px 50px #06101640;border-radius:3px;backdrop-filter:blur(12px)}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.card-heading h2{font-size:13px;font-weight:500;margin:0}.card-heading>span{color:var(--gold);font-size:9px;letter-spacing:1.2px;white-space:nowrap}.auth-tabs{display:flex;border-bottom:1px solid #fff1;margin-bottom:16px;gap:20px}.auth-tabs button{padding:0 0 10px;background:none;border:0;color:#8e9b96;font-size:11px;border-bottom:1px solid transparent}.auth-tabs .active{color:var(--gold);border-bottom-color:var(--gold)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row label{font-size:10px;color:#b4bfb7;display:grid;gap:7px}.form-row input,select{width:100%;padding:11px 10px;background:#101c21b0;border:1px solid #7e927632;border-radius:2px;color:var(--pale);font-size:11px}.form-row input::placeholder{color:#73847e;font-size:10px}.field-label{font-size:9px;letter-spacing:1.7px;color:#aebbb3;margin:18px 0 9px}.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.roles button{border:1px solid #80928330;background:#12202688;color:#95a89f;padding:11px 8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;border-radius:2px}.roles button svg{width:19px;height:19px}.roles button.active{color:var(--gold);border-color:#c5aa695e;background:#68614530}.village-heading{display:flex;justify-content:space-between;align-items:center}.text-button{background:none;border:none;color:#c1c6ba;font-size:10px;padding:5px 0}.text-button:hover{color:var(--gold)}.village-heading .text-button{margin-top:9px}.village-info{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px;font-size:9px;color:#80978c}.primary-button{width:100%;border:1px solid #e1c790;background:linear-gradient(100deg,#d5b77b,#e7ce98);border-radius:2px;color:#222c28;letter-spacing:2px;font-size:11px;font-weight:700;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;transition:filter .15s,transform .15s}.primary-button:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary-button span{font-size:20px;line-height:10px}.form-error{font-size:11px;line-height:1.4;color:#f4b1a1;margin:7px 0;min-height:0}.welcome-foot{font-size:8px;color:#98aa9b;letter-spacing:1.1px;display:flex;align-items:center;gap:8px;margin:18px 0 0}.welcome-foot>span:not(.small-dot){color:#788679}.scene-caption{position:absolute;bottom:125px;right:6%;text-align:right}.scene-caption .eyebrow{justify-content:flex-end;font-size:9px;color:#efcf9b;text-shadow:0 2px 7px #17262d}.scene-caption h2{font:400 26px Cinzel,Georgia,serif;margin:13px 0;color:#f5e8cb;text-shadow:0 2px 7px #17262d}.scene-caption p{font-size:11px;color:#d3d7c9;text-shadow:0 2px 7px #17262d}.lobby-bottom{position:absolute;bottom:24px;left:44px;right:44px;display:flex;align-items:center;justify-content:space-between;color:#b4c0b0;font-size:8px;letter-spacing:1.6px}.lobby-bottom button{letter-spacing:1.5px}.lobby-bottom button span{padding-left:8px;color:var(--gold)}
#loading,#fatal{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#17282e}#loading p{margin-top:25px;color:var(--gold);letter-spacing:2px;font-size:12px}#fatal{padding:40px;text-align:center}#fatal h1{font-size:30px}#fatal p{max-width:600px;color:var(--muted);line-height:1.7}#fatal button{padding:12px 25px;border:1px solid var(--line);background:#31413a;color:var(--gold)}
#hud{position:fixed;inset:0;pointer-events:none;user-select:none}#hud button,#hotbar,#interaction{pointer-events:auto}.hud-top{position:absolute;top:22px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between}.hud-brand{display:flex;gap:12px;align-items:center;text-shadow:0 2px 8px #000}.hud-brand .crest{width:30px;height:36px;font-size:21px}.hud-brand strong{display:block;font:600 15px Cinzel,Georgia,serif;letter-spacing:3px}.hud-brand>div>span{display:block;font-size:10px;letter-spacing:1px;color:#d4d7bf;margin-top:5px}.day-panel{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 21px;border:1px solid var(--line);border-radius:3px;background:var(--panel);box-shadow:0 4px 25px #0002;min-width:260px}.day-panel>span:first-child{font-size:25px;color:var(--gold)}.day-panel>div strong{font-size:12px;letter-spacing:1.4px;display:block}.day-panel>div span{color:#b5bfae;font-size:10px;display:block;margin-top:3px}.divider{width:1px;height:26px;background:var(--line);margin-left:auto}#clock{font:400 20px Cinzel,Georgia,serif;font-variant-numeric:tabular-nums}.top-actions{display:flex;align-items:center;gap:10px}.connection{color:#d5e2cc;font-size:9px;letter-spacing:1.3px;text-shadow:0 1px 4px #000;display:flex;align-items:center;gap:7px;margin-right:8px}.top-actions button{width:30px;height:30px;color:var(--gold);border:1px solid var(--line);background:var(--panel);border-radius:2px;font-size:16px}.panel{border:1px solid var(--line);background:var(--panel);box-shadow:0 4px 25px #0002;backdrop-filter:blur(8px);border-radius:3px}.objectives{position:absolute;left:28px;top:104px;width:247px;padding:19px}.objectives .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:11px}.objectives h2{font:500 14px Cinzel,Georgia,serif;margin-bottom:10px}.objectives>p:not(.eyebrow){font-size:10px;line-height:1.8;color:#adbdb1;margin-bottom:15px}.objective-line{border-top:1px solid #cad6ae1a;padding-top:12px;display:flex;align-items:center;gap:9px;color:#d3d8bd;font-size:9px}.diamond{width:6px;height:6px;transform:rotate(45deg);background:var(--gold);flex-shrink:0}.fortifications{position:absolute;top:104px;right:28px;width:214px;padding:16px}.fortifications>div:first-child,.keep-line{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.3px}.fortifications strong{font-size:9px;font-weight:400;color:#cfddca;letter-spacing:0}.meter{height:5px;background:#020e167d;margin-top:8px;border-radius:1px;overflow:hidden}.meter i{height:100%;width:100%;background:linear-gradient(90deg,#928353,#dcc28a);display:block;transition:width .18s}.meter.small{height:3px}.meter.small i{background:#779a8c}.keep-line{margin-top:15px;color:#a8b9aa}.map-panel{position:absolute;top:230px;right:28px;width:214px;border:1px solid var(--line);background:#152329df;border-radius:3px;padding:10px;box-shadow:0 6px 25px #0002}.map-heading,.map-footer{display:flex;justify-content:space-between;align-items:center;color:#c1cfba;letter-spacing:1px;font-size:8px}.map-heading{padding:2px 2px 8px;border-bottom:1px solid #b7c29922}.map-heading>span:last-child{color:var(--gold)}#minimap{width:100%;height:auto;display:block;margin:5px 0}.map-footer{border-top:1px solid #b7c29922;padding:10px 2px 2px;justify-content:center;gap:8px}.player-panel{position:absolute;left:28px;bottom:35px;width:255px;padding:17px 18px;background:var(--panel);border:1px solid var(--line);border-radius:3px}.player-top{display:flex;gap:10px;align-items:center}.portrait{display:grid;place-items:center;width:36px;height:40px;border:1px solid #b99f5a66;background:#5c664033;color:var(--gold);clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)}.portrait svg{width:23px;height:23px}.player-top>div strong{font:500 13px Cinzel,Georgia,serif;display:block}.player-top>div>span{color:#a4b9a6;display:block;font-size:8px;letter-spacing:1.6px;margin-top:5px}.wallet{margin-left:auto;white-space:nowrap;font-size:12px}.wallet>span{color:var(--gold);font-size:15px}.hp-label{display:flex;justify-content:space-between;margin-top:16px;font-size:8px;letter-spacing:1.3px;color:#9caf9e}.hp-label strong{font-weight:400;letter-spacing:0;color:#d6dfc9}.meter.health{height:6px}.health i{background:linear-gradient(90deg,#6b987d,#acd1a2)}.supplies{display:flex;gap:13px;margin-top:13px;color:#c6d4c4;font-size:10px}.supplies>span{display:flex;align-items:center;gap:6px}.supplies svg{width:13px;height:13px;color:#c4b688}.hotbar-wrap{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);text-align:center}.hotbar{display:flex;gap:6px;padding:7px;border:1px solid var(--line);background:var(--panel);border-radius:4px;backdrop-filter:blur(7px)}.slot{width:49px;height:55px;position:relative;display:flex;align-items:center;justify-content:center;background:#2434318c;border:1px solid #b3c79f26;border-radius:2px;color:#b7bfab;transition:background .15s,border-color .15s}.slot.active{background:linear-gradient(140deg,#7771477a,#55523955);border-color:var(--gold);color:#f3d79c;box-shadow:inset 0 0 15px #ccba7233}.slot:hover{border-color:#a5a888}.slot svg{height:27px;width:27px}.slot .slot-key{position:absolute;left:5px;top:4px;font-size:8px;opacity:.7}.slot .slot-count{position:absolute;right:5px;bottom:5px;font-size:9px}.slot .durability{position:absolute;bottom:4px;left:5px;right:5px;height:2px;background:#d0bd7540}.slot .durability i{display:block;height:2px;width:100%;background:#c5c09a}.slot.disabled{opacity:.3}.slot:not(.active) .durability{opacity:.5}#tool-caption{font-size:9px;letter-spacing:2px;text-shadow:0 2px 8px #000;margin-bottom:11px;color:#f0e2bf}#tool-caption span{color:var(--gold);margin:0 6px}.control-hint{font-size:8px;color:#d7ddc8;white-space:nowrap;margin:11px 0 0;text-shadow:0 2px 6px #000}.control-hint>span{margin:0 6px;color:#899a90}kbd{font:inherit;font-size:9px;padding:2px 4px;border:1px solid #e2dabb36;border-radius:2px;background:#101d2480;color:#e5dcbd}.pack-button{position:absolute;bottom:35px;right:28px;display:flex;align-items:center;gap:11px;padding:12px 16px;border:1px solid var(--line);background:var(--panel);color:var(--gold);border-radius:3px}.pack-button>span:first-child{font-size:28px}.pack-button>span:last-child{font-size:9px;letter-spacing:1.4px}.pack-button kbd{margin-left:6px}#crosshair{position:absolute;top:50%;left:50%;width:12px;height:12px;border:1px solid #eee6c654;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center}#crosshair i{width:2px;height:2px;background:#ede4cc;border-radius:50%}#interaction{position:absolute;left:50%;top:60%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;padding:11px 15px;background:#15272ae3;border:1px solid var(--line);border-radius:3px;min-width:190px;cursor:pointer}#interaction>kbd{font-size:15px;padding:7px 11px;border-color:#ceb97966}#interaction strong{font-size:12px;font-weight:500;display:block}#interaction span{color:#aabdac;font-size:9px;margin-top:4px;display:block}#toast-area{position:absolute;right:28px;bottom:105px;display:grid;gap:6px;text-align:left;width:290px;max-width:40vw}.toast{font-size:11px;padding:10px 16px;background:#16282bea;border:1px solid #cfba734d;border-radius:3px;animation:toastIn .2s ease-out;color:#e6ddba}.toast.error{border-color:#a6645470;color:#eab6a4}@keyframes toastIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}#downed,#fallen{position:absolute;inset:0;display:grid;place-items:center;background:#111c2866;pointer-events:auto;backdrop-filter:grayscale(.7)}.downed-card{width:400px;max-width:90vw;border:1px solid var(--line);background:var(--panel);padding:30px;box-shadow:0 20px 100px #0007}.downed-card h2{font:400 30px Cinzel,Georgia,serif}.downed-card p:not(.eyebrow){font-size:12px;line-height:1.7;color:#b9c2b4}.downed-card .fine-print{margin:15px 0 0;font-size:10px!important}dialog{background:#192a2f;color:var(--pale);border:1px solid var(--line);border-radius:5px;padding:30px;width:470px;max-width:90vw;max-height:85vh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#08171cb3;backdrop-filter:blur(4px)}dialog h2{font:500 24px Cinzel,Georgia,serif;margin-bottom:13px}dialog h3{font:500 14px Cinzel,Georgia,serif;color:var(--gold);margin:24px 0 12px}dialog p{color:#acbeb0;font-size:12px;line-height:1.7}dialog .close-dialog{position:absolute;right:13px;top:10px;border:0;background:none;color:#cdbb93;font-size:25px}.panel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #c0c7ad20;font-size:12px}.panel-row>span{display:flex;align-items:center;gap:8px}.panel-row svg{width:18px;height:18px;color:var(--gold)}.panel-row button,dialog .secondary-button{border:1px solid #a9b17c55;background:#7a805d22;color:#d9cfac;padding:8px 12px;border-radius:2px;font-size:10px}.panel-row button:hover,dialog .secondary-button:hover{background:#7a805d44}.panel-row small{color:#9baf9f;font-size:10px}.panel-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.panel-actions>*{flex:1}.help-grid{display:grid;grid-template-columns:100px 1fr;gap:13px;margin-top:20px;font-size:11px;color:#b8c8b9}.help-grid kbd{justify-self:start;align-self:start}.create-village-input{width:100%;padding:12px;background:#101e25;color:var(--pale);border:1px solid var(--line);margin:10px 0 18px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-height:920px){.welcome{transform:translateY(-48%)}h1{margin:27px 0}.intro{margin-bottom:34px}.auth-card{padding:27px}.form-row input,select{padding:13px 10px}.roles button{padding:14px 8px}}
@media(max-height:790px){.welcome{top:53%;width:410px}.welcome h1{font-size:43px;margin:13px 0}.intro{font-size:12px;margin-bottom:18px}.auth-card{padding:17px 20px}.card-heading{margin-bottom:13px}.auth-tabs{margin-bottom:13px}.field-label{margin-top:13px}.roles button{padding:9px}.welcome-foot{margin-top:12px;font-size:7px}.lobby-top{padding-top:22px}.scene-caption{bottom:90px}.hotbar-wrap{bottom:20px}.map-panel{top:220px;width:180px}.fortifications{width:180px}.objectives{width:226px;padding:15px}}
@media(max-width:1100px){.welcome{left:4%}.scene-caption{right:4%;max-width:300px}.scene-caption h2{font-size:22px}.build-label{font-size:8px}.lobby-top{padding:24px 4%}.lobby-bottom{left:4%;right:4%}.lobby-bottom>span:last-child{display:none}.player-panel{width:210px;left:18px;bottom:32px;padding:13px}.hud-top{left:18px;right:18px}.objectives{left:18px}.fortifications,.map-panel{right:18px}.slot{width:42px;height:51px}.hotbar{gap:4px}.control-hint{font-size:7px}.pack-button{right:18px;padding:10px}.pack-button>span:last-child{display:none}.connection{display:none}.hud-brand strong{font-size:12px}.hud-brand>div>span{font-size:9px}}
@media(max-width:760px){.lobby{overflow:auto;background:linear-gradient(90deg,#0f222aec,#112731a0)}.welcome{position:relative;left:0;top:0;transform:none!important;margin:35px auto 80px}.scene-caption{display:none}.lobby-top{padding:20px 24px}.wordmark{font-size:15px;letter-spacing:3px}.build-label{max-width:130px;line-height:1.7;font-size:7px;letter-spacing:1px}.lobby-bottom{position:fixed;bottom:0;padding:12px;background:#14242bf5;left:0;right:0;justify-content:center}.lobby-bottom>button{display:none}.welcome h1{font-size:42px}.objectives{display:none}.hud-brand>div{display:none}.day-panel{min-width:230px;padding:9px 14px;gap:10px}.hud-top{top:15px}.fortifications{top:82px;width:155px;right:12px;padding:11px}.map-panel{top:200px;right:12px;width:145px}.player-panel{bottom:136px;width:170px;left:12px;padding:11px}.player-top{gap:6px}.player-top>div strong{font-size:11px}.wallet{font-size:10px}.portrait{width:27px;height:32px}.hp-label{margin-top:10px}.hotbar-wrap{bottom:18px}.slot{width:37px;height:46px}.hotbar{gap:3px;padding:5px}.slot svg{width:23px;height:23px}.control-hint{white-space:normal;line-height:1.7;max-width:350px}.pack-button{bottom:147px;right:12px}.top-actions{gap:5px}.top-actions button{width:26px;height:26px}#tool-caption{font-size:8px;letter-spacing:1px}.map-heading{font-size:6px}.map-footer{font-size:7px}.supplies{font-size:9px;gap:9px}}

/* Keep the two-line title clear of the footer at laptop heights. */
.welcome h1{font-size:clamp(36px,3.2vw,48px);letter-spacing:-1.2px}.welcome-foot{line-height:1.6}#world:focus{outline:none}

#nameplates{position:absolute;inset:0;pointer-events:none}.nameplate{position:absolute;top:0;left:0;text-align:center;min-width:67px;font-size:10px;color:#e5e6cf;text-shadow:0 1px 4px #081215}.nameplate>i{display:block;width:46px;height:3px;margin:5px auto 0;background:#111b21c9;border:1px solid #bed3b233;box-sizing:content-box}.nameplate b{display:block;height:100%;background:#98c8c0}.nameplate.enemy b{background:#bf866e}.nameplate.enemy{color:#edcbbb}

/* Persistent needs display and stock-priced treasury trade. */
.hunger-label{display:flex;justify-content:space-between;gap:8px;margin-top:11px;font-size:8px;letter-spacing:1.2px;color:#c0b58f}
.hunger-label strong{font-weight:400;letter-spacing:0;color:#ead9a9;font-variant-numeric:tabular-nums}
.meter.hunger{height:5px;margin-top:6px}.hunger i{background:linear-gradient(90deg,#ad8844,#edc878)}.hunger.low i{background:#e28a62}
.market-row{padding:14px 0;border-bottom:1px solid #c0c7ad20}.market-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.market-heading strong{display:flex;align-items:center;gap:7px;font-weight:500}.market-heading svg{width:18px;height:18px;color:var(--gold)}.market-heading>span{font-size:11px;color:#bdcbbb}.market-row p{font-size:11px;margin:8px 0 10px}.market-buttons{display:flex;gap:6px;flex-wrap:wrap}.market-buttons button{flex:1;white-space:nowrap}dialog button:disabled{opacity:.42;cursor:not-allowed}.market-buttons button:disabled:hover{background:#7a805d22}

/* A fallen dwarf can still look around and choose when to respawn. */
#downed,#fallen{pointer-events:none;place-items:end center;padding-bottom:135px;background:#111c2830;backdrop-filter:none}
.downed-card{pointer-events:auto;padding:18px 22px}
.downed-card h2{font-size:24px}
#shield-status .hp-label{margin-top:10px}
.meter.shield i{background:linear-gradient(90deg,#4d89a1,#a0d7e4)}

/* Crates use saved item previews; no second WebGL renderer is required. */
.lobby-crates{display:block;width:100%;margin-top:13px;padding:7px 2px;text-align:center;color:var(--gold);font-size:11px}
.phoenix-button{margin-bottom:8px;background:linear-gradient(115deg,#b77b37,#f2cb78);color:#302311;font-size:10px!important;letter-spacing:.6px!important}
#phoenix-status{margin:3px 0 13px;color:#dcc295}
dialog:has(.crates-panel){width:980px;max-width:94vw;padding:28px 32px;background:linear-gradient(135deg,#20343a,#15252a 70%)}
.crates-panel h2{font-size:29px;margin-bottom:21px}.crates-panel h3{font-size:16px;margin:20px 0 10px}.crates-panel p{line-height:1.65}.crates-panel button{min-height:36px}.crates-panel button.primary-button{padding:13px 18px;font-size:11px;letter-spacing:.6px;white-space:normal}.crates-panel select{width:100%;color:#f0e2c9;background:#12252b;border:1px solid #bba57855;border-radius:4px;padding:11px;font-size:12px;min-height:41px}.crates-panel label{display:grid;gap:8px;font-size:12px;color:#e1d4b6}.crates-panel small{display:block;color:#b1c2b9;font-size:10px;line-height:1.55}.crates-panel .crate-small{font-size:10px;color:#a4b8ad;margin:19px 0 0}.crates-panel .eyebrow{font-size:9px;letter-spacing:2px}
.crate-balances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:#071b2380;border:1px solid #b59c6440;border-radius:5px}.crate-balances>div{display:grid;gap:7px}.crate-balances span{font-size:8px;letter-spacing:1.5px;color:#aabeaf}.crate-balances strong{font:500 20px Cinzel,Georgia,serif;color:#ecd5a4}.crate-nav{display:flex;gap:8px;flex-wrap:wrap;margin:19px 0 22px;padding-bottom:17px;border-bottom:1px solid #bca36c30}.crate-nav>*{flex:1}.crate-nav .selected,.crate-tier.selected{background:#b9a36d33;border-color:#dab778;color:#ffe3a2}
.crate-tier-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.crate-tier{border:1px solid #aec0af42;background:#14272cc9;color:#d8d8be;border-radius:4px;padding:12px 6px;font-size:12px}.crate-tier:hover{border-color:#d8bd84}
.crate-purchase{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.72fr);gap:14px 24px;padding:23px;border:1px solid #c4aa724d;border-radius:5px;background:linear-gradient(130deg,#3d463733,#081e2955)}.crate-purchase .eyebrow{margin-bottom:12px}.crate-purchase h3{margin:0 0 10px;font:500 20px Cinzel,Georgia,serif;color:#f0dfb9}.crate-purchase p{margin-bottom:0}.crate-purchase>button{grid-column:2}.crate-purchase .crate-purchase-note{grid-column:1/-1;font-size:11px;border-top:1px solid #b9a47833;padding-top:15px;color:#bdc7b2}.crate-purchase-note strong{color:#e6d2a3}
.crate-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:19px}.crate-item{position:relative;padding:15px;background:#0e202868;border:1px solid #a6b4a32e;border-top:2px solid var(--crate-color,#c4ba91);border-radius:5px;min-width:0}.crate-item.owned{background:#23382c66}.crate-item img{display:block;width:100%;height:163px;object-fit:contain;filter:drop-shadow(0 8px 9px #020b0f55)}.crate-item .crate-item-tier{margin:5px 0 9px;color:var(--crate-color);font-size:8px;letter-spacing:1.1px;text-transform:uppercase}.crate-item h3{font-size:14px;line-height:1.5;color:#ecdebf;margin:0 0 9px}.crate-item p{font-size:11px;margin-bottom:11px}.crate-owned{display:block;font-size:10px;color:#c2bb99;padding-top:10px;border-top:1px solid #97ae9030}.crate-item.owned .crate-owned{color:#abd7aa}.crate-item>small{color:var(--crate-color);margin-top:8px}
.crate-earned,.crate-history{display:grid;gap:8px}.crate-earned>div,.crate-history>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 15px;background:#152822;border:1px solid #95b48438;border-radius:4px}.crate-earned strong,.crate-history strong{font-size:12px;color:#e4d6af}.crate-earned small,.crate-history small{margin-top:5px}.crate-earned button,.crate-history button{flex-shrink:0}
.crate-important{border-left:3px solid #c8ab6d;background:#b28b4420;padding:15px;color:#e9d7ad!important}.crate-loadout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.crate-loadout>label{padding:14px;border:1px solid #b6b8952b;border-radius:4px;background:#10262b66}.crates-panel .crate-toggle{display:flex;align-items:center;gap:10px;margin:17px 0;font-size:12px}.crate-toggle input{width:16px;height:16px;accent-color:#d5b473;flex-shrink:0}.crate-motion{border-top:1px solid #b69e7033;padding-top:20px}.crate-current{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crate-current>div{padding:12px;background:#091d255e;border:1px solid #bcb59624;border-radius:4px}.crate-current span{display:block;text-transform:uppercase;font-size:8px;color:#afc2ae;letter-spacing:1px;margin-bottom:6px}.crate-current strong{font-size:12px}
.crate-milestone-next{display:grid;gap:10px;border:1px solid #c3a97766;border-radius:4px;padding:19px;background:#6e643522;margin:20px 0}.crate-milestone-next strong{font:500 19px Cinzel,Georgia,serif;color:#e3c789}.crate-milestone-next span{font-size:12px;color:#cad4b3}.crate-milestone-next progress{appearance:none;width:100%;height:7px;border:0;background:#10252d}.crate-milestone-next progress::-webkit-progress-bar{background:#10252d}.crate-milestone-next progress::-webkit-progress-value{background:#d3b879}.crate-milestone-next progress::-moz-progress-bar{background:#d3b879}.crate-milestone-table{border-collapse:collapse;width:100%;font-size:12px;margin-bottom:21px}.crate-milestone-table th{text-align:left;color:#d4bd8f;background:#283b3955}.crate-milestone-table td,.crate-milestone-table th{padding:13px;border-bottom:1px solid #b1bb9333;line-height:1.5}.crate-helmet{display:flex;align-items:center;gap:26px;padding:18px;border:1px solid #cba85466;border-radius:5px;background:radial-gradient(ellipse at left,#baa3531c,transparent 70%)}.crate-helmet img{flex:0 0 180px;max-width:33%;height:auto}.crate-helmet h3{color:#edcf80}
.crate-error,.crate-success,.crate-recovery{padding:14px 17px;border-radius:4px}.crates-panel .crate-error{color:#f0bfab;background:#753f302d;border:1px solid #cc866166}.crates-panel .crate-success{color:#b9dbb6;background:#56794726;border:1px solid #8fb87855}.crate-recovery{border:1px solid #bfaa6766;background:#9d7e3222;margin:17px 0}.crate-recovery p{color:#ddc995;margin-bottom:10px}.crate-wait{padding:45px 15px;text-align:center}.crate-wait>span{font-size:38px;color:#e9c678}.crate-wait h3{font-size:20px}.crate-result{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1fr);gap:28px;align-items:center;padding:21px 0}.crate-result .crate-result-image{width:100%;height:300px;object-fit:contain;filter:drop-shadow(0 14px 16px #010c1366)}.crate-result h3{font:500 25px Cinzel,Georgia,serif;line-height:1.35;color:#f5e4b3;margin:8px 0 14px}.crate-result strong{display:block;font-size:12px;line-height:1.65;color:#c9ddad}.crate-result .panel-actions{flex-wrap:wrap}
.crate-reel{position:relative;height:225px;overflow:hidden;border:1px solid #dac08766;border-radius:5px;background:radial-gradient(ellipse at center,#4650455e,#0c2029);margin:20px 0 13px}.crate-reel::before,.crate-reel::after{content:'';position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}.crate-reel::before{left:0;background:linear-gradient(90deg,#10252d,transparent)}.crate-reel::after{right:0;background:linear-gradient(-90deg,#10252d,transparent)}.crate-reel-pointer{position:absolute;top:0;left:50%;height:100%;width:2px;background:#eacb7e55;z-index:3;transform:translateX(-50%)}.crate-reel-pointer::before,.crate-reel-pointer::after{content:'';position:absolute;left:-8px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent}.crate-reel-pointer::before{top:0;border-top:14px solid #f6d391}.crate-reel-pointer::after{bottom:0;border-bottom:14px solid #f6d391}.crate-reel-track{display:flex;gap:12px;width:100%;padding:22px 0;animation:crateOpening 4s cubic-bezier(.08,.72,.08,1) forwards;will-change:transform}.crate-reel-card{flex:0 0 136px;height:180px;border:1px solid #e5d19c4a;background:#20363ace;border-radius:4px;text-align:center;padding:8px}.crate-reel-card img{width:116px;height:127px;object-fit:contain}.crate-reel-card strong{display:block;color:#e6d5af;font-size:10px;line-height:1.45}@keyframes crateOpening{0%,7%{transform:translateX(calc(50% - 68px - 296px))}100%{transform:translateX(calc(50% - 68px - var(--crate-stop)))}}
@media(prefers-reduced-motion:reduce){.crate-reel-track{animation:none;transform:translateX(calc(50% - 68px - var(--crate-stop)))}}
@media(max-width:720px){dialog:has(.crates-panel){padding:23px 17px}.crate-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crate-item{padding:11px}.crate-item img{height:130px}.crate-purchase{grid-template-columns:1fr;padding:17px}.crate-purchase>button{grid-column:1}.crate-result{grid-template-columns:1fr;gap:6px}.crate-result .crate-result-image{height:220px}.crate-loadout{grid-template-columns:1fr}.crate-nav{gap:6px}.crate-nav>button{flex:1 1 40%;font-size:10px}.crate-balances{padding:12px;gap:9px}.crate-balances strong{font-size:14px}.crate-balances span{font-size:7px;letter-spacing:.7px}.crate-earned>div,.crate-history>div{align-items:flex-start;flex-direction:column;gap:9px}.crate-helmet{gap:12px;padding:12px}.crate-helmet img{flex-basis:100px}.crate-milestone-table{font-size:10px}.crate-milestone-table th,.crate-milestone-table td{padding:10px 8px}.crate-current{grid-template-columns:1fr}}