:root{--ink:#0a0d12;--panel:rgba(14,18,26,.9);--glass:rgba(18,24,34,.72);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--gold:#e8c96a;--gold2:#f0d888;--hp:#e0555f;--sp:#e6a24a;--xp:#5ecf7a;--text:#eef2f8;--muted:#8790a0;--accent:#6ee0b0;--accent2:#3aa77e}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--ink);color:var(--text);overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased;font-family:"IBM Plex Sans",system-ui,sans-serif}
.hidden{display:none!important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastMobileIn{from{opacity:0;transform:translate(-50%,-4px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(110,224,176,0)}50%{box-shadow:0 0 18px rgba(110,224,176,.35)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes promptFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes bossPulse{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 rgba(255,78,36,0)}50%{box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 22px rgba(255,78,36,.24)}}
@keyframes bossDockIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes catchLand{0%{opacity:0;transform:translateY(16px) scale(.86)}35%{opacity:1;transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* BOOT */
#boot{position:fixed;inset:0;display:grid;place-items:center;z-index:50;background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(60,120,90,.3),transparent 55%),radial-gradient(ellipse 70% 45% at 85% 105%,rgba(50,60,110,.28),transparent),#080b10;animation:fadeIn .4s}
#boot-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.boot-card{text-align:center;padding:2.8rem 2.2rem 1.7rem;width:min(420px,90vw);background:linear-gradient(180deg,rgba(20,26,36,.92),rgba(12,16,22,.92));border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);position:relative;z-index:2}
.boot-kicker{font-family:"Cinzel",serif;letter-spacing:.4em;font-size:.6rem;color:var(--muted);margin-bottom:.7rem;animation:fadeIn .6s .2s both}
.boot-card h1{font-family:"Cinzel",serif;font-size:3.2rem;letter-spacing:.3em;background:linear-gradient(180deg,#f5e4a8,#d0a94a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;filter:drop-shadow(0 0 30px rgba(232,201,106,.3));margin-bottom:.4rem;animation:titleGlow 3s ease-in-out infinite}
@keyframes titleGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(232,201,106,.25))}50%{filter:drop-shadow(0 0 40px rgba(232,201,106,.5))}}
.boot-sub{color:var(--muted);font-size:.86rem;margin-bottom:1.2rem;animation:fadeIn .6s .4s both}
.loading-bar-wrap{width:100%;height:8px;background:rgba(0,0,0,.4);border-radius:5px;overflow:hidden;margin-bottom:.8rem;border:1px solid var(--line)}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,#3aa77e,#6ee0b0,#e8c96a);border-radius:5px;transition:width .3s ease;box-shadow:0 0 12px rgba(110,224,176,.4)}
#boot-status{color:var(--accent);min-height:1.2em;margin-bottom:1.2rem;font-size:.82rem}
.boot-credit{margin-top:1.4rem;color:var(--muted);font-size:.6rem;opacity:.6}
button{font-family:inherit;cursor:pointer}
#btn-start,#btn-respawn,#btn-level-ok,#btn-pet-ok,#btn-enter{background:linear-gradient(180deg,#43a179,#2b6b4e);border:1px solid rgba(110,224,176,.5);color:#fff;font-weight:600;padding:.75rem 2rem;border-radius:9px;letter-spacing:.05em;font-size:.9rem;transition:filter .15s,transform .12s,box-shadow .2s;box-shadow:0 6px 18px rgba(20,60,40,.4)}
#btn-start:disabled{opacity:.4;cursor:not-allowed}
#btn-start:not(:disabled):hover,#btn-respawn:hover,#btn-level-ok:hover,#btn-pet-ok:hover,#btn-enter:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,60,40,.5)}
kbd{display:inline-block;padding:.12rem .38rem;border:1px solid var(--line2);border-radius:5px;background:rgba(255,255,255,.06);color:#cbd2de;font-size:.66rem;font-family:inherit;box-shadow:0 1px 0 rgba(0,0,0,.3)}

/* CHARACTER CREATOR */
#creator{position:fixed;inset:0;display:grid;place-items:center;z-index:48;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(50,100,80,.22),transparent),#080b10;animation:fadeIn .35s;padding:16px;overflow:auto}

/* LOGIN */
#login{position:fixed;inset:0;display:grid;place-items:center;z-index:49;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(80,40,120,.2),transparent),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(40,80,60,.15),transparent),#0a0a14;animation:fadeIn .4s}
#login-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.login-card{position:relative;z-index:1;text-align:center;padding:2.5rem 2rem 1.8rem;background:rgba(15,16,28,.92);border:2px solid rgba(120,100,200,.35);border-radius:14px;box-shadow:0 0 40px rgba(80,60,140,.3),inset 0 0 30px rgba(40,30,80,.15);max-width:360px;width:90%;animation:loginPop .5s cubic-bezier(.18,1.2,.4,1)}
@keyframes loginPop{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.login-glow{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(180,140,255,.12),transparent)}
.login-sub{color:#9890b0;font-size:.82rem;margin:0.4rem 0 1.4rem;font-family:'IBM Plex Sans',sans-serif}
.login-input-wrap{margin-bottom:1.2rem}
#login-name{width:100%;padding:0.8rem 1rem;font-size:1rem;background:rgba(20,22,36,.8);border:2px solid rgba(100,90,160,.4);border-radius:8px;color:#e8e0f0;font-family:'IBM Plex Sans',sans-serif;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}
#login-name:focus{border-color:rgba(180,140,255,.7);box-shadow:0 0 15px rgba(120,80,200,.3)}
#login-name::placeholder{color:#555068}
.login-existing{margin-bottom:1rem;padding:1rem;background:rgba(60,40,100,.15);border:1px solid rgba(140,100,200,.3);border-radius:8px}
.login-return{color:#c8b8e8;font-size:.9rem;margin:0 0 .3rem}
.login-return b{color:#e8d8ff}
.login-stats{color:#9088a8;font-size:.75rem;margin:0 0 .8rem}
.login-divider{position:relative;text-align:center;margin:1.2rem 0;color:#4a4460;font-size:.72rem}
.login-divider::before,.login-divider::after{content:'';position:absolute;top:50%;width:35%;height:1px;background:rgba(80,70,120,.3)}
.login-divider::before{left:0}.login-divider::after{right:0}
.login-divider span{background:rgba(15,16,28,.92);padding:0 8px}
.login-quick{display:flex;gap:6px;justify-content:center;margin-bottom:1rem;flex-wrap:wrap}
.quick-btn{padding:5px 14px;font-size:.78rem;background:rgba(30,28,48,.7);border:1px solid rgba(90,80,140,.4);border-radius:6px;color:#a090c8;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;transition:all .15s}
.quick-btn:hover{background:rgba(50,40,80,.8);border-color:rgba(140,120,200,.6);color:#d0c0f0;transform:translateY(-1px)}
.login-note{color:#3a3850;font-size:.68rem;margin-top:0.8rem}
.creator-card{width:min(640px,95vw);background:linear-gradient(180deg,rgba(20,26,36,.95),rgba(12,16,22,.95));border:1px solid var(--line2);border-radius:16px;padding:1.5rem;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.creator-card h2{font-family:"Cinzel",serif;color:var(--gold);text-align:center;font-size:1.3rem;letter-spacing:.1em;margin-bottom:1.2rem}
.creator-body{display:flex;gap:1.4rem;flex-wrap:wrap}
.creator-preview{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;gap:10px}
#char-preview{width:150px;height:190px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 70%,rgba(60,120,90,.25),rgba(10,14,20,.6));border:1px solid var(--line);border-radius:12px}
.preview-rot{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%}
.rot-btn{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:7px;color:var(--text);padding:.4rem;font-size:.9rem;transition:.15s}
.rot-btn.active,.rot-btn:hover{background:rgba(110,224,176,.2);border-color:var(--accent)}
.creator-opts{flex:1;min-width:240px;display:flex;flex-direction:column;gap:.7rem}
.opt-name{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.04em}
.opt-name input{background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:.55rem .7rem;font-family:inherit;font-size:.95rem}
.opt-name input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,224,176,.15)}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opt-row>span{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.03em;flex:0 0 74px}
.swatches{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.swatch{width:26px;height:26px;border-radius:7px;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:transform .12s,border-color .12s;font-size:.7rem;font-weight:700;color:#fff;background:rgba(255,255,255,.08)}
.swatch:hover{transform:scale(1.12)}
.swatch.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,201,106,.35),0 0 12px rgba(232,201,106,.3)}
.creator-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.4rem;gap:10px}
/* class / gender picker buttons */
.class-pick{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.cls-btn{padding:.4rem .8rem;border-radius:8px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--muted);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.02em}
.cls-btn:hover{filter:brightness(1.15);border-color:rgba(255,255,255,.25)}
.cls-btn.sel{border-color:var(--gold);color:#fff;background:rgba(232,201,106,.18);box-shadow:0 0 0 2px rgba(232,201,106,.25),0 0 12px rgba(232,201,106,.25)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--text);padding:.6rem 1rem;border-radius:9px;font-size:.82rem;transition:.15s}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* GAME */
#game-wrap{position:fixed;inset:0;background:#0a0f0a;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;background:#3a5a38;cursor:crosshair}
#hud{position:absolute;inset:0;z-index:2;pointer-events:none}
#status-card{position:absolute;left:14px;top:14px;width:230px;padding:11px 13px;background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);animation:slideDown .4s}
.status-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.status-name{font-family:"Cinzel",serif;font-size:.86rem;font-weight:600}
.status-lvl{font-size:.68rem;font-weight:700;color:var(--gold);background:rgba(232,201,106,.12);padding:2px 7px;border-radius:20px}
.bar-row{display:grid;grid-template-columns:20px 1fr 30px;align-items:center;gap:7px;margin-bottom:6px}
.bar-row.xp-row{grid-template-columns:1fr;margin:3px 0 7px}
.bar-label{font-size:.58rem;font-weight:700;color:var(--muted)}
.bar-val{font-size:.64rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bar{height:8px;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative}
.bar-fill{height:100%;width:100%;transition:width .18s cubic-bezier(.4,0,.2,1);border-radius:20px}
.bar.hp .bar-fill{background:linear-gradient(90deg,#b03040,var(--hp))}
.bar.sp .bar-fill{background:linear-gradient(90deg,#a06820,var(--sp))}
.bar.xp{height:4px}.bar.xp .bar-fill{background:linear-gradient(90deg,#2a7a40,var(--xp))}
.clock-row{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);border-top:1px solid var(--line);padding-top:7px;margin-top:3px}
#pet-chip{color:var(--accent)}
#boss-hud{position:absolute;right:14px;top:194px;left:auto;transform:none;width:300px;max-width:calc(100vw - 28px);min-width:0;padding:9px 12px 10px;color:#ffe7d0;background:linear-gradient(180deg,rgba(31,12,12,.95),rgba(13,8,12,.94));border:2px solid #6f2b24;outline:1px solid rgba(255,172,91,.25);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);text-shadow:1px 1px 0 #160706;animation:bossDockIn .35s,bossPulse 2.4s ease-in-out infinite}
.boss-hud-top,.boss-title-row,.boss-hud-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}.boss-hud-top{font-family:"Press Start 2P",monospace;font-size:.45rem;letter-spacing:.08em;color:#ffb86b}.boss-kicker{color:#ff6b42}.boss-title-row{margin:4px 0 6px}.boss-title-row strong{font-family:"Cinzel",serif;font-size:.9rem;letter-spacing:.04em}.boss-title-row span{font-size:.58rem;color:#cba58f;white-space:nowrap}.boss-health-track{position:relative;height:12px;padding:2px;background:#120707;border:1px solid #7e3428;box-shadow:inset 0 0 0 1px #260b09}.boss-health-track:after{content:"";position:absolute;inset:2px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(0,0,0,.22) calc(10% - 1px),rgba(0,0,0,.22) 10%);pointer-events:none}.boss-rage-mark{position:absolute;left:50%;top:-3px;width:2px;height:16px;background:#ffd16d;box-shadow:0 0 6px #ff7a32;z-index:2}#boss-health-fill{height:100%;width:100%;background:linear-gradient(90deg,#8e1f24 0%,#e44429 55%,#ff9c3d 100%);box-shadow:0 0 10px rgba(255,91,41,.55);transition:width .12s linear}.boss-hud-bottom{margin-top:5px;font-family:"IBM Plex Sans",sans-serif;font-size:.57rem;color:#bd9584}#boss-state{color:#ffcb7c;text-transform:uppercase;letter-spacing:.05em}#boss-hud.rage{border-color:#d9482f;outline-color:rgba(255,190,73,.55);animation:bossPulse 1s ease-in-out infinite}#boss-hud.rage #boss-health-fill{background:linear-gradient(90deg,#b91f20,#ff3b20,#ffc044)}#boss-hud.warning{border-color:#ffb24d;outline-color:rgba(255,215,118,.7)}#boss-hud.warning #boss-state{color:#fff1a6;text-shadow:0 0 9px rgba(255,151,55,.8)}
#minimap-wrap{position:absolute;right:14px;top:14px;padding:4px;background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(0,0,0,.4);animation:slideDown .4s}
#minimap{width:120px;height:120px;display:block;image-rendering:pixelated;border-radius:8px}
#skillbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px;padding:9px 11px;background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(12px);pointer-events:auto;box-shadow:0 14px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.sk{position:relative;width:58px;height:54px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line2);border-radius:11px;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
.sk:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(110,224,176,.14),rgba(110,224,176,.04));border-color:rgba(110,224,176,.45);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.sk:active{transform:translateY(0) scale(.96)}
.sk-key{position:absolute;top:4px;left:6px;font-size:.54rem;color:var(--muted);font-weight:700}
.sk-name{font-size:.68rem;font-weight:600}
.sk-cd{position:absolute;inset:0;background:rgba(0,0,0,.6);transform-origin:bottom;transform:scaleY(0);border-radius:11px;pointer-events:none}
.sk-div{width:1px;background:var(--line2);margin:5px 2px}
.sk-util .sk-name{font-size:.62rem;color:var(--muted)}
.sk[data-class="mage"]{border-color:rgba(164,121,223,.32);box-shadow:inset 0 -3px 0 rgba(128,77,181,.18)}.sk[data-class="archer"]{border-color:rgba(92,196,143,.32);box-shadow:inset 0 -3px 0 rgba(58,147,107,.18)}.sk[data-class="warrior"]{border-color:rgba(218,103,69,.3);box-shadow:inset 0 -3px 0 rgba(173,70,43,.16)}
#toast{position:absolute;top:20px;left:50%;z-index:28;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line2);padding:.5rem 1.1rem;border-radius:10px;opacity:0;font-size:.84rem;max-width:70%;text-align:center;line-height:1.3;overflow-wrap:anywhere;pointer-events:none;backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
#toast.show{animation:slideDown .3s forwards}
#interact-prompt{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(24,31,32,.96),rgba(10,15,18,.96));border:2px solid #537c68;padding:.45rem .85rem;border-radius:4px;font-size:.75rem;backdrop-filter:blur(8px);box-shadow:0 5px 0 rgba(0,0,0,.32),0 0 18px rgba(110,224,176,.12);animation:promptFloat 1.45s ease-in-out infinite;white-space:nowrap}
#interact-prompt kbd{border:1px solid #78b392;background:#183027;color:#d9ffeb;border-radius:2px;box-shadow:0 2px 0 #07100c;margin-right:3px}
#hud.fishing-active #interact-prompt{bottom:226px}
#fishing-hud{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:min(390px,calc(100vw - 32px));padding:10px 12px;background:linear-gradient(180deg,rgba(8,27,37,.96),rgba(5,15,24,.96));border:2px solid #3d7f91;outline:1px solid rgba(125,225,245,.18);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);box-shadow:0 12px 30px rgba(0,0,0,.48),0 0 20px rgba(57,174,202,.12)}
.fishing-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:"Press Start 2P",monospace;font-size:.48rem;color:#75dded}.fishing-head b{font-family:"IBM Plex Sans",sans-serif;font-size:.62rem;color:#a7c7ca;font-weight:600}.fishing-row{display:grid;grid-template-columns:42px 1fr 42px;gap:7px;align-items:center;margin:5px 0;font-size:.58rem;color:#8db0b7}.fishing-row>b{text-align:right;font-size:.54rem;color:#dffaff}.fishing-meter{position:relative;height:9px;background:#071116;border:1px solid #305664;overflow:hidden}.fishing-meter>div{height:100%;width:0;transition:width .1s linear}.fishing-meter.catch>div{background:linear-gradient(90deg,#2887a0,#59d9d2,#d5f59f)}.fishing-meter.tension>div{background:linear-gradient(90deg,#58d3a0 0%,#e8c75f 62%,#ef4b43 100%)}.fishing-meter.tension>i{position:absolute;left:28%;width:36%;top:0;bottom:0;background:rgba(139,239,174,.12);border-left:1px solid rgba(163,255,190,.4);border-right:1px solid rgba(163,255,190,.4);z-index:2}#fishing-tip{margin:7px 0 0!important;text-align:center;font-size:.63rem!important;color:#c4e2e5!important}
.catch-card{position:absolute;left:14px;bottom:92px;width:264px;display:grid;grid-template-columns:82px 1fr;align-items:center;gap:8px;padding:8px 10px;color:#def8f2;background:linear-gradient(135deg,rgba(6,26,32,.96),rgba(15,19,32,.96));border:2px solid #3a8b83;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);box-shadow:0 12px 28px rgba(0,0,0,.48),inset 3px 0 0 rgba(105,225,190,.35)}.catch-card.landed{animation:catchLand .34s cubic-bezier(.2,1.35,.4,1)}.catch-art{height:48px;display:grid;place-items:center;background:repeating-linear-gradient(0deg,rgba(106,222,210,.06) 0 2px,transparent 2px 4px);border:1px solid rgba(125,225,214,.15)}#catch-fish-art{width:72px;height:44px;image-rendering:pixelated}.catch-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.catch-copy>span{font-family:"Press Start 2P",monospace;font-size:.38rem;letter-spacing:.07em;color:#78d9c7}.catch-copy>strong{overflow:hidden;font-family:"Cinzel",serif;font-size:.85rem;color:#f5eac9;text-overflow:ellipsis;white-space:nowrap}.catch-copy>small{display:flex;align-items:center;gap:6px;color:#95afb3;font-size:.58rem}.catch-copy>small i{color:#4c8d89;font-style:normal}.catch-copy>small b:last-child{color:#f1cc72}.catch-card[data-rarity="rare"]{border-color:#8d6ac7;box-shadow:0 12px 28px rgba(0,0,0,.48),0 0 20px rgba(141,106,199,.2),inset 3px 0 0 rgba(189,153,255,.45)}.catch-card[data-rarity="rare"] .catch-copy>span{color:#cfadff}.catch-card[data-rarity="legendary"]{border-color:#dcae45;box-shadow:0 12px 28px rgba(0,0,0,.48),0 0 24px rgba(255,205,87,.28),inset 3px 0 0 rgba(255,225,127,.55)}.catch-card[data-rarity="legendary"] .catch-copy>span{color:#ffe58a}
#dmg-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dmg-num{position:absolute;font-weight:800;font-size:14px;color:#fff;text-shadow:0 1px 2px #000,0 0 5px #000;animation:fd .7s ease-out forwards;font-variant-numeric:tabular-nums}
.dmg-num.crit{color:var(--gold2);font-size:18px}.dmg-num.heal{color:#88f0a8}
@keyframes fd{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-6px) scale(1.15);opacity:1}100%{transform:translate(-50%,-40px) scale(.9);opacity:0}}

/* PANELS */
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92%);max-height:82%;overflow:auto;background:linear-gradient(180deg,rgba(18,24,34,.98),rgba(12,16,22,.98));border:1px solid var(--line2);border-radius:16px;padding:1.1rem 1.2rem 1.2rem;pointer-events:auto;z-index:30;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);animation:popIn .28s cubic-bezier(.34,1.4,.5,1)}
.panel-wide{width:min(760px,94%)}.panel-kicker{display:block;margin-bottom:3px;font-family:"Press Start 2P",monospace;font-size:.43rem;color:#d99b55;letter-spacing:.09em}
.panel.modal{text-align:center;width:min(340px,90%)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.panel-head h2,.panel h2{font-family:"Cinzel",serif;color:var(--gold);font-size:1.05rem;letter-spacing:.06em;font-weight:600}
.panel-close{background:rgba(255,255,255,.05);border:1px solid var(--line);width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:1.1rem;line-height:1;transition:.15s}
.panel-close:hover{color:#fff;background:rgba(224,85,95,.25);border-color:rgba(224,85,95,.5)}
.panel p{color:var(--muted);margin:.6rem 0 1rem;line-height:1.5;font-size:.88rem}
.panel-foot{margin-top:.9rem;display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line);padding-top:.8rem}
.panel-foot b{color:var(--gold)}
#inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.inv-cell{aspect-ratio:1;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;font-size:.6rem;color:var(--muted);text-align:center;padding:3px;transition:.15s}
.inv-cell.weapon{cursor:pointer;color:var(--text)}
.inv-cell.weapon:hover{border-color:var(--accent);background:rgba(110,224,176,.08)}
.inv-cell.equipped{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(232,201,106,.3),0 0 12px rgba(232,201,106,.15)}
.inv-glyph{display:grid;place-items:center;width:24px;height:24px;margin-bottom:3px;background:#13191c;border:1px solid #3d4b4d;color:#e8c96a;font-family:"Press Start 2P",monospace;font-size:.65rem;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.inv-name{font-weight:600;font-size:.6rem;line-height:1.15}.inv-cell{flex-direction:column}
.inv-cell .qty{position:absolute;right:5px;bottom:3px;font-size:.6rem;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
#craft-list,#quest-list,#dialog-quests{display:flex;flex-direction:column;gap:9px}
.forge-guide{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:12px;padding:13px 14px;background:linear-gradient(135deg,rgba(132,64,30,.28),rgba(40,23,20,.62));border:1px solid rgba(224,143,77,.3);border-left:4px solid #c36d38;border-radius:8px}.forge-guide-copy strong{display:block;margin:4px 0 2px;font-size:.8rem}.forge-guide-copy p{margin:0!important;font-size:.67rem!important}.forge-step{font-family:"Press Start 2P",monospace;font-size:.44rem;color:#f0a764}.forge-flow{display:flex;align-items:center;gap:7px;font-size:.62rem;color:#c5a085}.forge-flow span{padding:5px 7px;border:1px solid rgba(224,143,77,.25);background:rgba(0,0,0,.25);border-radius:3px}.forge-flow i{font-style:normal;color:#e8a45b}.forge-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 12px}.forge-summary>div{padding:8px 9px;border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:6px}.forge-summary span{display:block;font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.forge-summary b{font-size:.72rem;color:#f2d4ae}.craft-group-title{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-family:"Press Start 2P",monospace;font-size:.48rem;color:#dba064}.craft-group-title:after{content:"";height:1px;background:rgba(219,160,100,.22);flex:1}.craft-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(28,20,18,.3));border:1px solid var(--line);border-radius:8px;padding:10px 11px;transition:.15s}
.craft-row:hover{border-color:var(--line2)}
.craft-row.recommended{border-color:rgba(104,206,163,.35);box-shadow:inset 3px 0 0 #53bd8f}.craft-rune{width:34px;height:34px;display:grid;place-items:center;background:#171211;border:1px solid #59402f;color:#f1bd71;font-family:"Press Start 2P",monospace;font-size:.7rem;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}.craft-info h3{font-size:.82rem;font-weight:700}.craft-badges{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}.craft-badge{padding:2px 4px;border:1px solid rgba(255,255,255,.1);border-radius:3px;font-size:.48rem;color:#adbac5}.craft-badge.class{color:#71d8ae;border-color:rgba(104,206,163,.3)}.craft-stats{display:flex;gap:8px;margin-top:5px!important}.craft-stats span{color:#d6b78d}.craft-actions{display:flex;flex-direction:column;gap:5px;min-width:78px}.craft-equip{background:transparent;border:1px solid rgba(232,201,106,.4);color:#e8c96a;padding:.35rem .55rem;border-radius:6px;font-size:.65rem}.craft-equip:disabled{opacity:.35}.missing-source{color:#d89076!important}
.craft-info p{font-size:.7rem;color:var(--muted);margin:2px 0 0}
.craft-info .need{color:#e06070}.craft-info .ok{color:var(--accent)}
.craft-btn{background:linear-gradient(180deg,#43a179,#2b6b4e);border:1px solid rgba(110,224,176,.4);color:#fff;font-weight:600;padding:.45rem .85rem;border-radius:9px;font-size:.74rem;transition:.15s}
.craft-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.craft-btn:disabled{opacity:.32;cursor:not-allowed;filter:grayscale(.6)}
/* quests */
.quest-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:11px;padding:11px}
.quest-row.done{opacity:.55}
.q-info h4{font-size:.84rem;font-weight:600;margin-bottom:2px}
.q-info p{font-size:.72rem;color:var(--muted);margin:1px 0}
.q-reward{color:var(--gold)!important}
.q-btn{background:linear-gradient(180deg,#43a179,#2b6b4e);border:1px solid rgba(110,224,176,.4);color:#fff;font-weight:600;padding:.45rem .8rem;border-radius:9px;font-size:.74rem;white-space:nowrap;transition:.15s}
.q-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.q-btn.ready{background:linear-gradient(180deg,#e0b84a,#b8902c);border-color:rgba(240,216,136,.5);animation:glowPulse 1.6s infinite}
.q-status{font-size:.72rem;color:var(--muted);font-weight:600;white-space:nowrap}
.q-status.done{color:var(--accent)}
.q-prog{height:5px;background:rgba(0,0,0,.5);border-radius:20px;overflow:hidden;margin-top:5px}
.q-prog-fill{height:100%;background:linear-gradient(90deg,#2a7a40,var(--xp));transition:width .3s}
/* touch */
#touch-ui{position:absolute;inset:0;pointer-events:none;z-index:15}
#stick{position:absolute;left:20px;bottom:92px;width:112px;height:112px;border-radius:50%;background:rgba(10,14,20,.35);border:1px solid var(--line2);pointer-events:auto;touch-action:none;backdrop-filter:blur(4px)}
#stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(150,240,200,.7),rgba(110,224,176,.5));border:1px solid rgba(255,255,255,.25)}
#touch-btns{position:absolute;right:14px;bottom:92px;display:grid;grid-template-columns:repeat(2,62px);gap:10px;pointer-events:auto}
.tbtn{width:62px;height:62px;min-width:56px;min-height:56px;border-radius:50%;border:1px solid var(--line2);background:rgba(14,18,26,.75);color:var(--text);font-weight:700;font-size:.62rem;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;appearance:none;user-select:none;backdrop-filter:blur(4px);transition:transform .1s,filter .1s,border-color .1s;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.tbtn.atk{background:rgba(180,58,68,.85)}.tbtn.shd{background:rgba(58,90,160,.85)}.tbtn.evd{background:rgba(160,110,40,.85)}.tbtn.intr{background:rgba(60,140,100,.85)}.tbtn.intr.fishing-action{background:linear-gradient(180deg,rgba(45,153,179,.96),rgba(18,88,112,.96));border-color:rgba(149,238,248,.65);box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 16px rgba(78,206,226,.3);font-size:.54rem}
.tbtn:active{transform:scale(.92);filter:brightness(1.16)}.tbtn:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:3px}
@media(max-width:900px){#boss-hud{right:12px;top:190px;width:276px;max-width:calc(100vw - 24px)}}
@media(max-width:760px){#status-card{width:160px;padding:8px 10px;left:8px;top:8px}.status-name{font-size:.74rem}#minimap-wrap{right:8px;top:8px}#minimap{width:82px;height:82px}#skillbar{bottom:10px;gap:4px;padding:6px 7px;border-radius:13px}.sk{width:42px;height:42px;border-radius:9px}.sk-name{font-size:.55rem}.sk-key{font-size:.48rem}.sk-div{display:none}.sk-util{display:none}#btn-inv-hot,#btn-craft-hot,#btn-quest-hot{display:flex}#fishing-hud{bottom:62px;width:min(360px,calc(100vw - 16px));padding:8px 9px}#hud.fishing-active #interact-prompt{bottom:190px}.forge-guide{grid-template-columns:1fr}.forge-flow{display:none}.forge-summary{grid-template-columns:1fr}.craft-row{grid-template-columns:30px minmax(0,1fr)}.craft-rune{width:29px;height:29px}.craft-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.panel-wide{width:96%;padding:.9rem}}
@media(max-width:360px){#skillbar{gap:3px;padding:5px}.sk{width:38px;height:40px}.sk-name{font-size:.49rem}.sk-key{font-size:.43rem}}
@media(min-width:1000px) and (pointer:fine){#touch-ui{display:none}}
@media(pointer:coarse){#touch-ui{display:block}}
@media(max-height:480px){#skillbar{bottom:6px}#stick{bottom:70px}#dpad{bottom:70px}#touch-btns{bottom:70px}}
@media(max-height:480px) and (min-width:650px){#boss-hud{right:154px;top:8px;width:270px;max-width:calc(100vw - 410px)}}

/* ===== PIXEL-ART TITLE + BUTTONS ===== */
.title-scene{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.title-stars{position:absolute;inset:0;background:
  radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.8),transparent),
  radial-gradient(1px 1px at 60% 20%,rgba(200,230,255,.7),transparent),
  radial-gradient(2px 2px at 80% 60%,rgba(255,255,255,.6),transparent),
  radial-gradient(1px 1px at 35% 70%,rgba(180,220,255,.6),transparent),
  radial-gradient(1px 1px at 75% 85%,rgba(255,255,255,.5),transparent);
  background-size:cover;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}
.pixel-title{font-family:"Press Start 2P",monospace!important;font-size:2.6rem!important;letter-spacing:.06em!important;color:#f5e4a8!important;-webkit-text-fill-color:#f5e4a8!important;text-shadow:3px 3px 0 #7d3029,6px 6px 0 rgba(0,0,0,.4),0 0 24px rgba(232,201,106,.4)!important;image-rendering:pixelated;animation:floatY 3s ease-in-out infinite}
.boot-kicker{font-family:"VT323",monospace;font-size:.95rem!important;letter-spacing:.2em!important;color:var(--gold)!important}
.pixel-btn{font-family:"Press Start 2P",monospace!important;font-size:.72rem!important;background:linear-gradient(180deg,#43a179,#2b6b4e)!important;border:3px solid #1a3a2a!important;box-shadow:0 4px 0 #14281c,0 6px 12px rgba(0,0,0,.4)!important;border-radius:4px!important;padding:.9rem 1.4rem!important;color:#fff!important;text-shadow:2px 2px 0 rgba(0,0,0,.4);animation:pixelPulse 1.6s ease-in-out infinite;transition:transform .08s!important}
.pixel-btn.small{font-size:.62rem!important;padding:.7rem 1.1rem!important;animation:none}
.pixel-btn:not(:disabled):hover{filter:brightness(1.12)}
.pixel-btn:not(:disabled):active{transform:translateY(4px)!important;box-shadow:0 0 0 #14281c,0 2px 6px rgba(0,0,0,.4)!important}
.pixel-btn:disabled{opacity:.5;animation:none}
@keyframes pixelPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.pixel-h2{font-family:"Press Start 2P",monospace!important;font-size:.9rem!important;color:var(--gold)!important;text-shadow:2px 2px 0 rgba(0,0,0,.5)!important;letter-spacing:.02em!important}

/* creator eye/more swatches: text style for hairstyle */
.swatch.txt{width:auto;min-width:34px;padding:0 6px;font-size:.56rem;text-transform:capitalize;background:rgba(255,255,255,.08)}
.swatch.txt.sel{background:rgba(232,201,106,.2)}

/* top-right cluster + settings gear */
#top-right{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.top-right-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px}.realm-status{min-height:34px;display:flex;align-items:center;gap:7px;padding:5px 9px 5px 7px;color:#cde9e8;background:linear-gradient(180deg,rgba(16,35,43,.9),rgba(10,19,27,.9));border:1px solid rgba(89,190,186,.28);border-radius:9px;box-shadow:0 6px 16px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(8px)}.realm-sigil{width:20px;height:20px;display:grid;place-items:center;color:#79e2cb;background:rgba(69,178,159,.1);border:1px solid rgba(102,226,202,.28);border-radius:5px;font-size:.9rem;line-height:1}.realm-status-copy{display:flex;flex-direction:column;gap:2px}.realm-status-copy b{font-family:"Press Start 2P",monospace;font-size:.43rem;letter-spacing:.05em;color:#d9fff3}.realm-status-copy small{font-size:.48rem;letter-spacing:.07em;color:#70aaa8}
.icon-btn{pointer-events:auto;width:34px;height:34px;border-radius:9px;background:var(--glass);border:1px solid var(--line2);color:var(--text);font-size:1.1rem;backdrop-filter:blur(8px);transition:.15s;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.icon-btn:hover{background:rgba(110,224,176,.2);border-color:var(--accent);transform:rotate(45deg)}
#minimap-wrap{position:static}

/* settings panel */
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.55rem 0;border-bottom:1px solid var(--line)}
.set-row>span{font-size:.82rem;color:var(--text);font-weight:600}
.set-row input[type=range]{flex:1;max-width:150px;accent-color:var(--accent)}
.seg{display:flex;background:rgba(0,0,0,.35);border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg-btn{padding:.4rem .8rem;font-size:.74rem;background:none;border:none;color:var(--muted);transition:.15s}
.seg-btn.active{background:linear-gradient(180deg,#43a179,#2b6b4e);color:#fff}
.set-help{margin-top:.9rem;font-size:.68rem;color:var(--muted);line-height:1.6}
.realm-passport{margin:0 0 .8rem;padding:.85rem;background:linear-gradient(145deg,rgba(39,77,82,.28),rgba(25,23,52,.38));border:1px solid rgba(104,207,190,.22);border-radius:11px;box-shadow:inset 3px 0 0 rgba(93,216,186,.55)}.realm-passport-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.realm-passport-kicker{display:block;margin-bottom:3px;font-family:"Press Start 2P",monospace;font-size:.4rem;letter-spacing:.08em;color:#74d9c2}.realm-passport h3{font-family:"Cinzel",serif;font-size:.92rem;color:#f0e0ae}.realm-roadmap-tag{padding:3px 6px;color:#d0c7ff;background:rgba(117,94,190,.16);border:1px solid rgba(164,143,224,.28);border-radius:4px;font-family:"Press Start 2P",monospace;font-size:.36rem;letter-spacing:.06em}.realm-passport>p{margin:.45rem 0 .65rem!important;color:#96aeb3!important;font-size:.68rem!important;line-height:1.45!important}.realm-passport-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 .65rem}.realm-passport-grid>div{min-width:0;padding:7px 8px;background:rgba(3,10,15,.3);border:1px solid rgba(255,255,255,.07);border-radius:6px}.realm-passport-grid dt{margin-bottom:3px;color:#6f888e;font-size:.52rem;text-transform:uppercase;letter-spacing:.06em}.realm-passport-grid dd{overflow:hidden;color:#dce9e9;font-size:.66rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.realm-passport-grid dd i{display:inline-block;width:6px;height:6px;margin-right:4px;background:#69d7ae;border-radius:50%;box-shadow:0 0 7px rgba(105,215,174,.7)}.realm-connect-button{width:100%;padding:.55rem;color:#799092;background:rgba(4,11,17,.38);border:1px dashed rgba(108,169,164,.25);border-radius:7px;font-size:.66rem;cursor:not-allowed;opacity:.78}

/* D-PAD */
.ctrl-dpad{position:absolute;left:26px;bottom:92px;width:120px;height:120px;pointer-events:auto}
.dpad-btn{position:absolute;width:40px;height:40px;background:rgba(14,18,26,.8);border:1px solid var(--line2);color:var(--text);font-size:.8rem;border-radius:8px;backdrop-filter:blur(4px);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.dpad-btn:active{background:rgba(110,224,176,.3)}
.dpad-btn.up{left:40px;top:0}.dpad-btn.down{left:40px;top:80px}.dpad-btn.left{left:0;top:40px}.dpad-btn.right{left:80px;top:40px}
#touch-btns{grid-template-columns:repeat(2,58px)}

/* Final responsive HUD overrides live after the top-right cluster rules. */
@media(max-width:760px){#top-right{right:8px;top:8px;gap:6px}.top-right-tools{gap:5px}.realm-status{min-height:30px;padding:4px 6px}.realm-sigil{width:18px;height:18px}.realm-status-copy small{display:none}.realm-status-copy b{font-size:.38rem}#boss-hud{right:auto;left:8px;top:126px;width:176px;max-width:calc(100vw - 16px);padding:7px 8px}.boss-hud-top{display:none}.boss-title-row{margin:0 0 5px}.boss-title-row strong{overflow:hidden;font-size:.69rem;text-overflow:ellipsis;white-space:nowrap}.boss-title-row span,#boss-health-text{display:none}.boss-health-track{height:10px}.boss-rage-mark{height:14px}.boss-hud-bottom{justify-content:flex-start;margin-top:4px;font-size:.48rem}#boss-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.realm-passport-grid{grid-template-columns:1fr}.realm-passport{padding:.75rem}.realm-passport-head{gap:8px}}
@media(max-width:380px){#boss-hud{top:122px;width:164px}.realm-status-copy{display:none}.realm-status{padding:4px}.realm-roadmap-tag{display:none}}
@media(max-height:480px) and (min-width:650px){#top-right{right:8px;top:8px}.realm-status-copy small{display:none}#boss-hud{right:142px;left:auto;top:8px;width:258px;max-width:calc(100vw - 390px)}.boss-hud-top{display:none}.boss-title-row{margin:0 0 4px}.boss-hud-bottom{margin-top:4px}}
@media(max-width:760px){.catch-card{right:8px;left:8px;bottom:232px;width:min(280px,calc(100vw - 16px));margin:0 auto;grid-template-columns:74px minmax(0,1fr);padding:7px 8px}.catch-art{height:44px}#catch-fish-art{width:66px;height:40px}}
@media(max-height:480px) and (min-width:650px){.catch-card{top:76px;right:auto;bottom:auto;left:8px;width:242px;margin:0}}

/* ===== CHRONICLE GATE / CREATOR II / COMPANION SANCTUARY ===== */
@keyframes realmDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-14px,5px,0)}}
@keyframes lanternBreath{0%,100%{filter:brightness(.8);box-shadow:0 0 8px rgba(255,158,70,.25)}50%{filter:brightness(1.28);box-shadow:0 0 26px rgba(255,158,70,.62)}}
@keyframes sealTurn{to{transform:rotate(360deg)}}
@keyframes heroHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sparkOrbit{0%{transform:translate(0,0) scale(.7);opacity:.25}50%{opacity:1}100%{transform:translate(16px,-28px) scale(1.15);opacity:0}}
@keyframes creatorMist{0%{transform:translateX(-12%);opacity:.22}50%{opacity:.5}100%{transform:translateX(12%);opacity:.22}}
@keyframes arrivalIn{0%{opacity:0;transform:translate(-50%,18px) scale(.94)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes companionPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.08);opacity:1}}

#boot{background:#05090c;isolation:isolate}.chronicle-scene{position:absolute;inset:0;overflow:hidden;z-index:0;background:linear-gradient(180deg,#071119 0%,#0c1b20 45%,#10231d 67%,#07100e 100%)}
.chronicle-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,11,.85),transparent 25%,transparent 75%,rgba(3,8,11,.85)),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);z-index:8}.scene-moon{position:absolute;left:50%;top:8%;width:210px;height:210px;margin-left:-105px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fffbd4 0 3%,#d9efc0 4% 53%,#8ab48d 54% 57%,rgba(118,184,156,.18) 58% 68%,transparent 69%);filter:drop-shadow(0 0 34px rgba(153,232,196,.28))}.scene-moon:after{content:"";position:absolute;left:27px;top:38px;width:28px;height:18px;border-radius:50%;background:rgba(62,104,83,.18);box-shadow:74px 15px 0 7px rgba(62,104,83,.12),42px 78px 0 4px rgba(62,104,83,.14)}
.scene-ridge{position:absolute;left:-6%;width:112%;bottom:19%;height:43%;transform-origin:bottom;clip-path:polygon(0 73%,7% 46%,12% 59%,18% 31%,24% 56%,31% 22%,38% 57%,45% 38%,52% 65%,61% 25%,68% 54%,75% 31%,83% 62%,91% 39%,100% 64%,100% 100%,0 100%)}.ridge-far{background:#102b29;opacity:.86;bottom:22%;animation:realmDrift 14s ease-in-out infinite}.ridge-near{background:#091a18;bottom:7%;height:42%;clip-path:polygon(0 71%,5% 52%,9% 66%,15% 35%,21% 69%,28% 46%,34% 73%,42% 41%,49% 67%,58% 38%,66% 70%,75% 43%,83% 66%,91% 36%,100% 59%,100% 100%,0 100%)}
.scene-torii{position:absolute;left:50%;bottom:7%;width:250px;height:250px;margin-left:-125px;opacity:.74;filter:drop-shadow(0 10px 10px #030706)}.scene-torii:before,.scene-torii:after{content:"";position:absolute;top:64px;width:25px;height:186px;background:linear-gradient(90deg,#321518,#8c322b 42%,#431a1a);clip-path:polygon(11% 0,89% 0,100% 100%,0 100%)}.scene-torii:before{left:35px}.scene-torii:after{right:35px}.scene-torii i,.scene-torii b{position:absolute;left:0;right:0;background:linear-gradient(#a83b32,#4d1c1d);z-index:2}.scene-torii i{top:35px;height:24px;clip-path:polygon(2% 0,98% 0,100% 66%,85% 100%,15% 100%,0 66%)}.scene-torii b{top:70px;left:22px;right:22px;height:18px}.scene-torii span{position:absolute;left:108px;top:58px;width:34px;height:35px;background:#27191b;border:4px solid #87342d;z-index:3}
.scene-lantern{position:absolute;bottom:14%;width:10px;height:65px;background:#17120f;border-radius:2px;z-index:6}.scene-lantern:before{content:"";position:absolute;left:-7px;top:-13px;width:24px;height:25px;background:#e58d42;border:5px solid #342019;clip-path:polygon(16% 0,84% 0,100% 18%,86% 100%,14% 100%,0 18%);animation:lanternBreath 2.6s steps(5) infinite}.lantern-left{left:14%}.lantern-right{right:14%;transform:scale(.82)}.scene-grass{position:absolute;left:0;right:0;bottom:0;height:20%;background:repeating-linear-gradient(105deg,transparent 0 8px,#10291f 9px 12px,transparent 13px 19px),linear-gradient(transparent,#06100d 62%)}
.boot-layout{position:relative;z-index:4;width:min(1120px,94vw);display:grid;grid-template-columns:minmax(170px,235px) minmax(390px,520px) minmax(110px,160px);align-items:center;justify-content:center;gap:32px}.boot-card{width:auto;padding:2.25rem 2.5rem 1.55rem;background:linear-gradient(180deg,rgba(8,17,22,.86),rgba(5,11,14,.94));border:1px solid rgba(184,218,180,.24);border-radius:3px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);box-shadow:0 32px 90px rgba(0,0,0,.7),inset 0 0 0 3px rgba(116,175,148,.035)}.boot-seal{position:relative;width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border:1px solid rgba(232,201,106,.48);transform:rotate(45deg);background:rgba(7,15,18,.78);box-shadow:0 0 24px rgba(232,201,106,.13)}.boot-seal:before,.boot-seal:after{content:"";position:absolute;inset:5px;border:1px solid rgba(232,201,106,.18)}.boot-seal:after{inset:-7px;border-style:dashed;animation:sealTurn 22s linear infinite}.boot-seal span{transform:rotate(-45deg);font-family:"Cinzel",serif;font-size:1.45rem;color:#f0d888}.boot-seal i{position:absolute;width:6px;height:6px;background:#70d6aa;box-shadow:0 0 12px #70d6aa;transform:rotate(-45deg)}
.boot-card .pixel-title{font-size:clamp(2.25rem,5vw,3.65rem)!important;margin:0 0 .65rem;letter-spacing:.13em!important}.boot-card .boot-kicker{margin-bottom:.65rem!important;color:#86bfa5!important;font-size:.78rem!important;letter-spacing:.28em!important}.boot-card .boot-sub{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:1.45rem;color:#9db1ac;font-family:"VT323",monospace;font-size:1rem;letter-spacing:.08em}.boot-sub i{width:3px;height:3px;background:#d9bb68;transform:rotate(45deg)}.boot-card .loading-bar-wrap{height:10px;margin:0;border:1px solid rgba(138,194,163,.22);border-radius:0;padding:2px;background:#03080a}.boot-card .loading-bar{border-radius:0;background:repeating-linear-gradient(90deg,#3d9c76 0 9px,#5fc79c 9px 16px,#91dfb7 16px 18px);box-shadow:0 0 14px rgba(88,204,151,.3)}.boot-load-row{display:flex;justify-content:space-between;align-items:center;margin:7px 0 1.15rem;font-family:"VT323",monospace}.boot-load-row #boot-status{margin:0;min-height:0;font-size:.9rem;color:#8ee0b6}.boot-load-row>span{font-size:.66rem;color:#59736d;letter-spacing:.13em}.boot-card #btn-start{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:.95rem 1rem!important;border-color:#29543f!important;animation:none;background:linear-gradient(180deg,#438d6c,#24533e)!important}.boot-card #btn-start kbd{border-color:rgba(255,255,255,.18);color:#c6e8d8;background:rgba(0,0,0,.18);font-size:.45rem}.boot-card .boot-credit{margin-top:1.15rem;font-family:"VT323",monospace;font-size:.72rem;letter-spacing:.13em;color:#5c716c;opacity:1}
.boot-world-note,.boot-build-note{align-self:end;margin-bottom:6vh;color:#8ca59e;text-shadow:0 2px 8px #000}.boot-world-note{padding:15px 0 15px 16px;border-left:2px solid rgba(103,189,151,.45)}.world-note-index,.boot-build-note>span{display:block;margin-bottom:9px;font-family:"Press Start 2P",monospace;font-size:.43rem;letter-spacing:.1em;color:#68c99d}.boot-world-note strong{display:block;color:#eef0da;font-family:"Cinzel",serif;font-size:1.05rem}.boot-world-note p{margin:7px 0 12px;font-size:.7rem;line-height:1.55;color:#829791}.world-note-tags{display:flex;gap:5px;flex-wrap:wrap}.world-note-tags span{padding:4px 5px;border:1px solid rgba(145,196,170,.19);font-size:.45rem;color:#9fb4ad;background:rgba(4,10,12,.36)}.boot-build-note{display:flex;flex-direction:column;gap:3px;padding-bottom:16px}.boot-build-note b{font-family:"Cinzel",serif;color:#e6dba9;font-size:.85rem}.boot-build-note small{font-size:.58rem;color:#6e8580}

#login{overflow:auto;padding:24px;background:radial-gradient(circle at 18% 40%,rgba(31,103,79,.24),transparent 34%),linear-gradient(118deg,#07100f 0 55%,#0b1019 55% 100%)}#login:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent 0 54.8%,rgba(128,203,167,.2) 55%,transparent 55.2%);pointer-events:none}.login-shell{position:relative;z-index:1;width:min(1080px,95vw);min-height:min(680px,90vh);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(355px,.85fr);align-items:center;gap:clamp(30px,6vw,90px)}.realm-showcase{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:50px 0 30px}.realm-eyebrow,.login-step{display:block;font-family:"Press Start 2P",monospace;font-size:.46rem;letter-spacing:.12em;color:#6bd0a2}.realm-showcase h1{max-width:600px;margin:13px 0 16px;font-family:"Cinzel",serif;font-size:clamp(2.2rem,4.2vw,4.25rem);line-height:.98;color:#f4ecd0;text-shadow:0 10px 28px rgba(0,0,0,.55)}.realm-showcase>p{max-width:500px;color:#8da49e;font-size:.86rem;line-height:1.7}.login-hero-art{position:relative;width:210px;height:220px;margin:28px 0 20px 90px;animation:heroHover 3s ease-in-out infinite;filter:drop-shadow(0 18px 12px rgba(0,0,0,.65))}.hero-shadow{position:absolute;left:31px;bottom:4px;width:145px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 26px rgba(69,206,146,.18)}.hero-cape{position:absolute;left:58px;top:62px;width:100px;height:130px;background:linear-gradient(90deg,#172839,#305263 45%,#162735);clip-path:polygon(25% 0,75% 0,98% 94%,72% 87%,51% 100%,28% 88%,3% 95%)}.hero-body{position:absolute;left:75px;top:76px;width:66px;height:106px;background:linear-gradient(90deg,#21372f,#57856d 45%,#263f35);clip-path:polygon(12% 0,88% 0,100% 58%,82% 100%,18% 100%,0 58%);box-shadow:inset 0 -10px 0 #17251f,inset 0 -15px 0 #b28d4c}.hero-head{position:absolute;left:81px;top:31px;width:55px;height:54px;background:#d9a57e;clip-path:polygon(13% 0,87% 0,100% 25%,90% 100%,10% 100%,0 25%);box-shadow:inset -8px 0 #a97457}.hero-hair{position:absolute;left:73px;top:17px;width:72px;height:43px;background:#2b2328;clip-path:polygon(8% 18%,24% 0,82% 0,100% 31%,88% 90%,72% 61%,61% 100%,46% 58%,29% 91%,11% 72%,0 40%)}.hero-blade{position:absolute;left:147px;top:50px;width:9px;height:142px;background:linear-gradient(90deg,#6b7b7c 0 25%,#e5eee6 26% 70%,#758b8a 71%);transform:rotate(22deg);box-shadow:0 0 9px rgba(183,241,219,.35)}.hero-blade:before{content:"";position:absolute;left:-13px;top:104px;width:34px;height:9px;background:#c49b50}.hero-spark{position:absolute;width:5px;height:5px;background:#80e7b4;box-shadow:0 0 10px #80e7b4;animation:sparkOrbit 2.4s steps(8) infinite}.hero-spark.s1{left:37px;top:88px}.hero-spark.s2{left:167px;top:92px;animation-delay:.7s}.hero-spark.s3{left:115px;top:7px;animation-delay:1.3s}.realm-pillars{display:grid;grid-template-columns:repeat(3,minmax(85px,130px));gap:6px}.realm-pillars>div{padding:10px 12px;border-left:1px solid rgba(109,207,162,.28);background:linear-gradient(90deg,rgba(19,57,43,.2),transparent)}.realm-pillars b{display:block;color:#e9dca9;font-family:"Cinzel",serif;font-size:1.35rem}.realm-pillars span{font-family:"Press Start 2P",monospace;font-size:.36rem;color:#718d85;letter-spacing:.07em}
.login-card{max-width:none;width:100%;text-align:left;padding:2.2rem 2rem;background:linear-gradient(180deg,rgba(16,23,31,.96),rgba(8,13,19,.97));border:1px solid rgba(126,180,158,.25);border-radius:3px;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);box-shadow:0 35px 90px rgba(0,0,0,.55),inset 3px 0 0 rgba(100,200,154,.13);animation:loginPop .5s cubic-bezier(.18,1.2,.4,1)}.login-card:after{content:"";position:absolute;right:14px;top:14px;width:30px;height:30px;border-top:1px solid rgba(232,201,106,.35);border-right:1px solid rgba(232,201,106,.35)}.login-sigil{width:44px;height:44px;margin-bottom:22px;display:grid;place-items:center;background:#13251f;border:1px solid #4f8d70;transform:rotate(45deg);box-shadow:0 0 20px rgba(79,171,126,.17)}.login-sigil span{transform:rotate(-45deg);font-family:"Cinzel",serif;color:#f0d888;font-size:1.15rem}.login-step{margin-bottom:8px}.login-card .pixel-h2{text-align:left;font-size:1rem!important;line-height:1.45;color:#f0e5bd!important}.login-card .login-sub{margin:.5rem 0 1.45rem;color:#82948f}.login-input-wrap{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.login-input-wrap>span{font-family:"Press Start 2P",monospace;font-size:.42rem;color:#75948b;letter-spacing:.08em}.login-card #login-name{text-align:left;padding:.85rem .95rem;background:#070c11;border:1px solid #283b3b;border-radius:2px;color:#eff5e7;font-family:"VT323",monospace;font-size:1.25rem;letter-spacing:.06em}.login-card #login-name:focus{border-color:#5db28a;box-shadow:0 0 0 3px rgba(85,190,141,.1)}.login-existing{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 10px;padding:10px;background:linear-gradient(90deg,rgba(48,111,83,.22),rgba(20,39,35,.16));border:1px solid rgba(93,184,141,.26);border-radius:2px}.save-rune{width:22px;height:22px;border:1px solid #70bd95;transform:rotate(45deg);box-shadow:inset 0 0 0 4px rgba(66,142,103,.13)}.login-return{font-family:"Press Start 2P",monospace;font-size:.4rem;color:#91c7ad;margin:0 0 4px}.login-stats{margin:0;color:#6f8d84;font-size:.65rem;text-transform:uppercase}.login-card .pixel-btn{border-radius:2px!important;animation:none!important}.login-existing #btn-continue{width:auto;padding:.62rem .7rem!important;font-size:.5rem!important;box-shadow:none!important}.login-new{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.88rem 1rem!important;font-size:.57rem!important}.login-new span,.login-existing .pixel-btn span{font-size:1rem;color:#c9f0db}.login-divider{display:flex;align-items:center;gap:10px;margin:1.2rem 0 .8rem;color:#566c67}.login-divider:before,.login-divider:after{position:static;content:"";flex:1;width:auto;background:#243330}.login-divider span{padding:0;background:transparent;font-family:"Press Start 2P",monospace;font-size:.36rem}.login-quick{justify-content:stretch;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.quick-btn{padding:7px 4px;border-radius:2px;background:#0b1218;border-color:#253633;color:#859b95;font-family:"VT323",monospace;font-size:.92rem}.quick-btn:hover{background:#15251f;border-color:#4e8e70;color:#c8e4d5}.login-note{display:flex;align-items:flex-start;gap:7px;margin-top:1rem;color:#536863;font-size:.6rem;line-height:1.45}.login-note i{flex:0 0 6px;width:6px;height:6px;margin-top:3px;background:#65c697;border-radius:50%;box-shadow:0 0 8px rgba(101,198,151,.6)}

#creator{display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(circle at 24% 32%,rgba(48,113,83,.22),transparent 33%),linear-gradient(135deg,#07100e,#0a1118 58%,#0b0c15);isolation:isolate}.creator-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}.creator-backdrop:before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,#07100d),repeating-linear-gradient(108deg,transparent 0 15px,rgba(44,104,72,.18) 16px 20px,transparent 21px 34px)}.creator-backdrop i{position:absolute;width:260px;height:80px;border-radius:50%;background:rgba(134,202,170,.05);filter:blur(12px);animation:creatorMist 11s ease-in-out infinite}.creator-backdrop i:nth-child(1){left:4%;top:14%}.creator-backdrop i:nth-child(2){right:5%;top:42%;animation-delay:-4s}.creator-backdrop i:nth-child(3){left:34%;bottom:5%;animation-delay:-8s}.creator-card{position:relative;z-index:1;width:min(1040px,96vw);max-height:calc(100vh - 44px);display:flex;flex-direction:column;padding:0;background:linear-gradient(180deg,rgba(15,22,28,.98),rgba(8,13,18,.99));border:1px solid rgba(125,184,158,.24);border-radius:3px;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);box-shadow:0 42px 100px rgba(0,0,0,.68),inset 0 0 0 3px rgba(255,255,255,.018)}.creator-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 24px 17px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,rgba(48,103,78,.13),transparent 55%)}.creator-step{display:block;margin-bottom:7px;font-family:"Press Start 2P",monospace;font-size:.4rem;letter-spacing:.1em;color:#64c496}.creator-card .creator-head h2{text-align:left;margin:0;font-size:1rem!important;color:#f1e3b3!important}.creator-head p{margin-top:5px;color:#728680;font-size:.7rem}.creator-progress{display:grid;grid-template-columns:repeat(3,28px);align-items:center;gap:5px}.creator-progress i{height:3px;background:#283934}.creator-progress i.done,.creator-progress i.active{background:#56bb8b;box-shadow:0 0 8px rgba(86,187,139,.4)}.creator-progress span{grid-column:1/-1;text-align:right;font-family:"Press Start 2P",monospace;font-size:.33rem;color:#5f8176}.creator-body{min-height:0;display:grid;grid-template-columns:310px minmax(0,1fr);gap:0;flex:1;overflow:hidden}.creator-preview{min-width:0;flex:none;display:flex;flex-direction:column;gap:9px;padding:18px;border-right:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(18,43,35,.26),rgba(4,9,12,.25))}.preview-stage{position:relative;flex:1;min-height:260px;overflow:hidden;border:1px solid rgba(114,176,149,.2);background:radial-gradient(circle at 50% 27%,rgba(166,220,181,.13),transparent 30%),linear-gradient(#0b1b1d 0 58%,#10271e 59% 100%);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.preview-stage:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.25));z-index:4;pointer-events:none}.preview-zone{position:absolute;left:8px;top:8px;z-index:5;font-family:"Press Start 2P",monospace;font-size:.32rem;letter-spacing:.07em;color:#5b8a79}.preview-moon{position:absolute;right:22px;top:24px;width:56px;height:56px;border-radius:50%;background:#b8d9b0;box-shadow:0 0 24px rgba(157,221,183,.22)}.preview-moon:after{content:"";position:absolute;right:-8px;top:-5px;width:57px;height:57px;border-radius:50%;background:#0b1b1d}.preview-shrine{position:absolute;left:25px;right:25px;bottom:43px;height:100px;border-bottom:12px solid #0a1512;opacity:.68}.preview-shrine:before{content:"";position:absolute;left:17px;right:17px;top:22px;height:8px;background:#743129;box-shadow:0 -12px 0 2px #9a4435}.preview-shrine:after{content:"";position:absolute;left:30px;top:26px;width:8px;height:72px;background:#662922;box-shadow:118px 0 #662922}.preview-ground{position:absolute;left:12%;right:12%;bottom:16px;height:22px;border-radius:50%;background:rgba(0,0,0,.48);box-shadow:0 0 22px rgba(77,198,139,.15)}#char-preview{position:absolute;inset:auto 0 0;width:100%;height:100%;z-index:3;image-rendering:pixelated;background:none;border:0;border-radius:0}.preview-summary{padding:9px 10px;border-left:2px solid var(--preview-accent,#d0603a);background:rgba(0,0,0,.25)}.preview-summary>span{display:block;font-family:"Press Start 2P",monospace;font-size:.31rem;color:var(--preview-accent,#d0603a);letter-spacing:.08em}.preview-summary>strong{display:block;margin:4px 0 2px;font-family:"Cinzel",serif;font-size:.88rem;color:#eee5c9}.preview-summary>p{font-size:.58rem;color:#758983;line-height:1.35}.preview-summary>div{display:flex;gap:4px;margin-top:6px}.preview-summary>div span{padding:3px 5px;border:1px solid rgba(255,255,255,.08);font-size:.43rem;color:#8ca29b}.preview-motion{display:flex;align-items:center;gap:4px}.preview-motion>span{margin-right:auto;font-family:"Press Start 2P",monospace;font-size:.35rem;color:#5e7770}.preview-state{padding:5px 7px;background:#0b1216;border:1px solid #273833;color:#71867f;font-size:.49rem}.preview-state.active,.preview-state:hover{color:#d6eee2;border-color:#4c9f79;background:#183027}.preview-rot{grid-template-columns:repeat(4,1fr);gap:4px}.rot-btn{min-height:30px;padding:.25rem;border-radius:2px;background:#0a1115}.creator-opts{min-width:0;gap:0;overflow:hidden}.creator-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,.07);background:#080e12}.creator-tab{position:relative;min-height:46px;padding:7px 5px;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.055);color:#647a74;font-family:"Press Start 2P",monospace;font-size:.4rem;letter-spacing:.03em}.creator-tab:after{content:"";position:absolute;left:15%;right:15%;bottom:0;height:2px;background:transparent}.creator-tab.active{color:#d5e7dc;background:linear-gradient(180deg,rgba(52,119,87,.13),transparent)}.creator-tab.active:after{background:#5ec18e;box-shadow:0 0 8px #5ec18e}.creator-panel{display:none;height:100%;overflow:auto;padding:22px 24px}.creator-panel.active{display:flex;flex-direction:column;gap:16px}.creator-panel .opt-row{align-items:flex-start;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.055)}.creator-panel .opt-row>span{flex:0 0 95px;padding-top:8px;font-family:"Press Start 2P",monospace;font-size:.36rem;color:#71867f;line-height:1.45}.creator-panel .swatches{gap:7px}.creator-panel .swatch{min-width:31px;width:31px;height:31px;border-radius:2px;background-color:#131b1f}.creator-panel .swatch.txt{width:auto;min-width:54px;min-height:31px;padding:0 8px;border-radius:2px;font-family:"VT323",monospace;font-size:.82rem;letter-spacing:.02em}.creator-panel .swatch.sel{border-color:#e2c86d;box-shadow:0 0 0 1px rgba(226,200,109,.24),0 0 12px rgba(226,200,109,.16)}.opt-name>span{font-family:"Press Start 2P",monospace;font-size:.37rem;color:#71867f}.opt-name input{padding:.7rem .75rem;border-radius:2px;background:#080d11;font-family:"VT323",monospace;font-size:1.2rem;letter-spacing:.05em}.creator-panel .class-pick{gap:7px}.creator-panel .cls-btn{min-height:35px;border-radius:2px;background:#0c1318}.class-choice-row{flex-direction:column}.class-choice-row>span{flex:auto!important}.class-choice-row .class-pick{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.class-choice-row .cls-btn{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:2px 8px;text-align:left;padding:9px}.class-choice-row .cls-btn i{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;background:#15251f;border:1px solid #345346;color:#d7c47d;font-family:"Cinzel",serif;font-style:normal}.class-choice-row .cls-btn b{font-size:.7rem;color:#dce6df}.class-choice-row .cls-btn small{font-size:.52rem;color:#667c75}.class-choice-row .cls-btn.sel{background:linear-gradient(135deg,rgba(70,147,108,.24),rgba(17,27,29,.7));border-color:#5ca37e}.arcana-intro{display:flex;gap:13px;padding:14px;background:linear-gradient(120deg,rgba(87,61,151,.2),rgba(29,66,63,.18));border:1px solid rgba(147,119,205,.2)}.arcana-intro>i{flex:0 0 38px;width:38px;height:38px;border:1px solid #8c6bc0;transform:rotate(45deg);box-shadow:inset 0 0 0 7px rgba(123,91,178,.12),0 0 16px rgba(131,96,194,.15)}.arcana-intro span,.creator-proof>span{display:block;margin-bottom:4px;font-family:"Press Start 2P",monospace;font-size:.35rem;color:#b194df}.arcana-intro strong,.creator-proof>b{display:block;color:#eee7f5;font-size:.74rem}.arcana-intro p{margin-top:4px;color:#7f8895;font-size:.62rem}.creator-proof{margin-top:auto;padding:13px;border-left:2px solid #65bda0;background:rgba(35,76,67,.15)}.creator-proof>span{color:#69c4a5}.creator-proof small{display:block;margin-top:4px;color:#677d78;font-size:.55rem}.creator-foot{flex:0 0 auto;margin:0;padding:13px 18px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.07);background:#080e12}.creator-foot-copy{display:flex;align-items:center;gap:14px}.creator-foot-copy>span{color:#536a63;font-size:.57rem}.creator-foot .btn-ghost{border-radius:2px;font-family:"Press Start 2P",monospace;font-size:.43rem}.creator-foot .pixel-btn{display:flex;align-items:center;gap:12px;border-radius:2px!important}.creator-foot .pixel-btn b{font-size:1rem}

#pet-chip{pointer-events:auto;min-height:30px;max-width:145px;display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:5px;margin:-4px 0 -4px 5px;padding:3px 6px;background:rgba(38,91,69,.22);border:1px solid rgba(92,194,145,.25);border-radius:3px;color:#b7e6cf}.pet-chip-orb{width:12px;height:12px;border:2px solid var(--pet-color,#65d29c);transform:rotate(45deg);box-shadow:0 0 7px rgba(101,210,156,.55);animation:companionPulse 2.2s ease-in-out infinite}#pet-chip b{overflow:hidden;font-family:"VT323",monospace;font-size:.78rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap}#pet-chip small{font-size:.42rem;color:#6ca98e}.clock-row{align-items:center}.arrival-banner{position:absolute;left:50%;bottom:92px;z-index:25;width:min(620px,calc(100vw - 28px));display:grid;grid-template-columns:58px minmax(0,1fr) 28px;gap:13px;align-items:center;padding:13px 14px;color:#dcebe2;background:linear-gradient(100deg,rgba(8,21,20,.97),rgba(14,29,35,.95));border:1px solid rgba(103,193,151,.37);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);box-shadow:0 18px 48px rgba(0,0,0,.55),inset 3px 0 0 #54b783;pointer-events:auto;animation:arrivalIn .45s cubic-bezier(.2,1,.3,1)}.arrival-sigil{width:48px;height:48px;display:grid;place-items:center;border:1px solid #9d8450;background:rgba(139,103,48,.12);transform:rotate(45deg)}.arrival-sigil span{transform:rotate(-45deg);font-family:"Cinzel",serif;font-size:1.2rem;color:#ecd582}.arrival-copy>span{font-family:"Press Start 2P",monospace;font-size:.34rem;letter-spacing:.08em;color:#61c795}.arrival-copy>strong{display:block;margin:4px 0 2px;font-family:"Cinzel",serif;font-size:.94rem;color:#f1e6bd}.arrival-copy>p{font-size:.64rem;color:#8ba39b;line-height:1.4}.arrival-actions{display:flex;gap:11px;margin-top:8px}.arrival-actions span{font-family:"Press Start 2P",monospace;font-size:.31rem;color:#79928a}.arrival-actions kbd{margin-right:4px;font-size:.32rem;color:#b6dec9;border-radius:2px}.arrival-banner>button{align-self:start;width:26px;height:26px;background:#111d20;border:1px solid #2b4140;color:#738985}.arrival-banner.leaving{opacity:0;transform:translate(-50%,12px);transition:.32s}
.companion-panel{width:min(820px,94%);padding:0;overflow:hidden}.companion-panel .panel-head{margin:0;padding:15px 18px;background:linear-gradient(90deg,rgba(41,102,75,.22),transparent)}.companion-panel .panel-head h2{font-size:1.1rem}.companion-hero{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:18px;padding:17px 19px;background:radial-gradient(circle at 84px 50%,rgba(79,194,137,.14),transparent 100px),linear-gradient(105deg,rgba(33,74,61,.26),rgba(13,20,27,.65));border-bottom:1px solid var(--line)}.companion-hero-art{position:relative;width:116px;height:116px;display:grid;place-items:center;background:radial-gradient(circle,rgba(60,137,99,.19),transparent 67%);border:1px solid rgba(108,191,151,.18);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}#companion-active-art{width:96px;height:96px;image-rendering:pixelated;position:relative;z-index:2}#companion-element-orb{position:absolute;inset:20px;border:1px solid rgba(104,214,164,.36);transform:rotate(45deg);animation:sealTurn 14s linear infinite}.companion-hero-copy>span{font-family:"Press Start 2P",monospace;font-size:.38rem;letter-spacing:.08em;color:#6ccfa0}.companion-hero-copy>strong{display:block;margin:5px 0 3px;font-family:"Cinzel",serif;font-size:1.1rem;color:#efe3bc}.companion-hero-copy>p{max-width:480px;margin:0 0 9px;font-size:.67rem;line-height:1.45}.companion-progress{display:flex;align-items:center;gap:8px}.companion-progress>div{width:min(240px,60%);height:6px;padding:1px;background:#07100f;border:1px solid #263c36}.companion-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#378d66,#67d29c);transition:width .25s}.companion-progress b{font-family:"Press Start 2P",monospace;font-size:.33rem;color:#728c83}.companion-cycle{min-width:95px;padding:10px 9px;display:flex;flex-direction:column;gap:5px;align-items:center;background:#101c20;border:1px solid #315146;color:#a5c8b7;font-family:"Press Start 2P",monospace;font-size:.38rem}.companion-cycle kbd{font-size:.36rem}.companion-grid-head{display:flex;align-items:center;justify-content:space-between;padding:13px 19px 8px}.companion-grid-head span{display:block;font-family:"Press Start 2P",monospace;font-size:.4rem;color:#c8d7d0}.companion-grid-head small{display:block;margin-top:4px;color:#6d817c;font-size:.58rem}.element-key{display:flex;gap:4px}.element-key i{width:8px;height:8px;transform:rotate(45deg)}.element-key .grass{background:#66c98c}.element-key .fire{background:#ed7b46}.element-key .water{background:#59b8d0}.element-key .arcane{background:#9d79dc}.companion-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:7px 18px 18px;max-height:340px;overflow:auto}.companion-card{position:relative;min-width:0;padding:7px 5px 8px;text-align:center;background:linear-gradient(180deg,rgba(22,31,38,.92),rgba(9,15,20,.92));border:1px solid rgba(255,255,255,.07);color:#85968f;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:.16s}.companion-card.owned{cursor:pointer;border-color:rgba(96,184,140,.25);color:#d8e6df}.companion-card.owned:hover{transform:translateY(-2px);border-color:#5bb987;background:linear-gradient(180deg,rgba(37,81,63,.52),rgba(11,20,23,.94))}.companion-card.active{border-color:#e2c66e;box-shadow:inset 0 0 0 1px rgba(226,198,110,.2),0 0 14px rgba(226,198,110,.12)}.companion-card.locked{filter:saturate(.1);opacity:.45}.companion-card canvas{display:block;width:64px;height:64px;max-width:100%;margin:auto;image-rendering:pixelated}.companion-card strong{display:block;overflow:hidden;margin-top:2px;font-family:"VT323",monospace;font-size:.75rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}.companion-card small{font-family:"Press Start 2P",monospace;font-size:.27rem;color:#647a73;text-transform:uppercase}.companion-card.active:after{content:"ACTIVE";position:absolute;right:3px;top:3px;padding:2px 3px;background:#a18136;color:#fff5cb;font-family:"Press Start 2P",monospace;font-size:.24rem}

@media(max-width:900px){.boot-layout{grid-template-columns:minmax(360px,520px)}.boot-world-note,.boot-build-note{display:none}.login-shell{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:28px}.realm-showcase h1{font-size:2.6rem}.login-hero-art{margin-left:40px;transform:scale(.85);transform-origin:left bottom}.creator-card{width:min(900px,97vw)}.creator-body{grid-template-columns:280px minmax(0,1fr)}.companion-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:720px){#boot{align-items:stretch}.chronicle-scene .scene-moon{top:10%;width:150px;height:150px;margin-left:-75px}.scene-torii{transform:scale(.78);transform-origin:bottom}.boot-layout{width:100%;grid-template-columns:1fr;padding:18px}.boot-card{width:min(430px,100%);margin:auto;padding:1.7rem 1.15rem 1.2rem}.boot-seal{width:44px;height:44px;margin-bottom:12px}.boot-card .pixel-title{font-size:clamp(2rem,11vw,2.8rem)!important}.boot-card .boot-sub{font-size:.86rem;gap:6px}.boot-load-row>span{display:none}.boot-card #btn-start{font-size:.56rem!important}.boot-card #btn-start kbd{display:none}#login{align-items:flex-start;padding:12px;background:linear-gradient(180deg,#07120f,#0a1018)}#login:before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px)}.login-shell{display:block;width:min(440px,100%);min-height:0;margin:auto}.realm-showcase{display:block;min-height:185px;padding:22px 16px 8px}.realm-showcase h1{max-width:320px;margin:8px 0;font-size:1.72rem;line-height:1.04}.realm-showcase>p{max-width:270px;font-size:.66rem;line-height:1.45}.realm-eyebrow{font-size:.37rem}.login-hero-art{position:absolute;right:-14px;bottom:-6px;width:150px;height:165px;margin:0;transform:scale(.65);transform-origin:right bottom}.realm-pillars{display:none}.login-card{padding:1.35rem 1.1rem}.login-sigil{position:absolute;right:20px;top:18px;width:34px;height:34px;margin:0}.login-step{font-size:.35rem}.login-card .pixel-h2{font-size:.78rem!important}.login-card .login-sub{margin:.35rem 0 1rem}.login-existing{grid-template-columns:22px minmax(0,1fr);padding:8px}.login-existing #btn-continue{grid-column:1/-1;width:100%}.login-note{font-size:.54rem}#creator{display:block;padding:7px;overflow:auto}.creator-card{width:100%;max-height:none;min-height:calc(100vh - 14px);overflow:visible}.creator-head{padding:13px 14px}.creator-head p,.creator-progress{display:none}.creator-card .creator-head h2{font-size:.73rem!important}.creator-body{display:flex;flex-direction:column;overflow:visible}.creator-preview{display:grid;grid-template-columns:142px minmax(0,1fr);grid-template-rows:auto auto;gap:7px;padding:10px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.preview-stage{grid-row:1/3;min-height:160px;height:160px}.preview-summary{align-self:stretch}.preview-summary>p{font-size:.54rem}.preview-summary>div{flex-wrap:wrap}.preview-motion{align-self:end}.preview-motion>span{display:none}.preview-state{padding:5px;font-size:.42rem}.preview-rot{grid-column:1/-1}.creator-opts{overflow:visible}.creator-tabs{position:sticky;top:0;z-index:7;overflow-x:auto;grid-template-columns:repeat(4,minmax(100px,1fr))}.creator-tab{min-height:42px;font-size:.33rem}.creator-panel{height:auto;max-height:none;padding:15px 12px}.creator-panel.active{gap:12px}.creator-panel .opt-row{flex-direction:column;gap:7px;padding-bottom:11px}.creator-panel .opt-row>span{flex:auto;padding:0}.creator-panel .swatches{width:100%}.creator-panel .swatch{min-width:36px;width:36px;height:36px}.creator-panel .swatch.txt{min-width:58px}.class-choice-row .class-pick{grid-template-columns:1fr}.class-choice-row .cls-btn{min-height:48px}.creator-foot{position:sticky;bottom:0;z-index:8;padding:9px 10px;background:rgba(8,14,18,.98)}.creator-foot-copy>span{display:none}.creator-foot .pixel-btn{font-size:.48rem!important;padding:.65rem .75rem!important}.creator-foot .btn-ghost{padding:.55rem .7rem}.clock-row{gap:5px}#status-card{width:188px}#pet-chip{max-width:112px}.arrival-banner{bottom:62px;grid-template-columns:42px minmax(0,1fr) 24px;gap:9px;padding:10px;width:calc(100vw - 12px)}.arrival-sigil{width:36px;height:36px}.arrival-copy>strong{font-size:.78rem}.arrival-copy>p{font-size:.55rem}.arrival-actions{gap:6px;flex-wrap:wrap}.arrival-actions span{font-size:.27rem}.companion-panel{width:96%;max-height:92%;overflow:auto}.companion-hero{grid-template-columns:88px minmax(0,1fr);gap:10px;padding:12px}.companion-hero-art{width:82px;height:82px}#companion-active-art{width:72px;height:72px}.companion-cycle{grid-column:1/-1;min-height:42px;display:flex;flex-direction:row;justify-content:center}.companion-grid{grid-template-columns:repeat(3,1fr);gap:6px;padding:7px 10px 14px}.companion-grid-head{padding:11px 11px 6px}.companion-card{min-height:92px}.companion-card canvas{width:58px;height:58px}}
@media(max-width:390px){.realm-showcase h1{font-size:1.5rem}.realm-showcase>p{max-width:235px}.login-hero-art{right:-27px}.creator-preview{grid-template-columns:126px minmax(0,1fr)}.preview-stage{height:150px;min-height:150px}.preview-summary>div{display:none}.preview-state{font-size:.36rem;padding:4px}.creator-tabs{grid-template-columns:repeat(4,minmax(90px,1fr))}.companion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#pet-chip{max-width:110px}.arrival-copy>p{display:none}}
@media(max-height:520px) and (min-width:650px){#creator{padding:5px}.creator-card{max-height:calc(100vh - 10px)}.creator-head{padding:9px 17px}.creator-head p{display:none}.creator-body{grid-template-columns:240px minmax(0,1fr)}.creator-preview{padding:9px}.preview-stage{min-height:160px}.preview-summary>p,.preview-summary>div{display:none}.creator-panel{padding:10px 15px}.creator-panel.active{gap:8px}.creator-panel .opt-row{padding-bottom:8px}.creator-foot{padding:7px 13px}.arrival-banner{left:8px;bottom:8px;width:340px;transform:none;animation:none;grid-template-columns:38px minmax(0,1fr) 22px}.arrival-banner.leaving{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.chronicle-scene *,.boot-seal:after,.login-hero-art,.hero-spark,.creator-backdrop i,.pet-chip-orb,#companion-element-orb{animation:none!important}}

/* Ritual identity + explicit save affordance. The save action mirrors the
   autosave model without turning the menu into a settings spreadsheet. */
.ritual-boot-lockup{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:-.12rem 0 .72rem;padding:4px 8px;border:1px solid rgba(116,212,170,.2);background:rgba(4,14,13,.45);color:#9fe2bf;font-family:"Press Start 2P",monospace;font-size:.33rem;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 18px rgba(70,170,125,.08)}
.ritual-boot-lockup img{width:18px;height:18px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 0 6px rgba(173,255,211,.22))}
.save-progress-card{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:11px;margin:0 0 14px;padding:11px 13px;background:linear-gradient(100deg,rgba(34,91,69,.28),rgba(12,26,28,.56));border:1px solid rgba(95,186,142,.25);box-shadow:inset 3px 0 0 rgba(99,205,156,.52)}
.save-progress-mark{width:22px;height:22px;display:grid;place-items:center;border:1px solid #6fc69a;transform:rotate(45deg);background:rgba(104,203,153,.08)}
.save-progress-mark i{width:7px;height:7px;background:#e0c86f;box-shadow:0 0 9px rgba(224,200,111,.5)}
.save-progress-card>div:nth-child(2)>span{display:block;font-family:"Press Start 2P",monospace;font-size:.31rem;letter-spacing:.1em;color:#66c99c}
.save-progress-card strong{display:block;margin:3px 0 2px;font-family:"VT323",monospace;font-size:1.05rem;font-weight:400;color:#e6f2e8;letter-spacing:.06em}
.save-progress-card p{max-width:540px;margin:0;color:#78928a;font-size:.57rem;line-height:1.35}
.save-progress-card button{min-width:104px;padding:9px 10px;border:1px solid #4d9d79;background:#173b2d;color:#c5efd8;font-family:"Press Start 2P",monospace;font-size:.36rem;letter-spacing:.03em;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.save-progress-card button:hover,.save-progress-card button:focus-visible{transform:translateY(-1px);border-color:#8dd9b1;background:#21553f;outline:none}
.save-progress-card button em{font-style:normal;margin-left:5px;color:#e4cc72}
@media(max-width:720px){.ritual-boot-lockup{font-size:.28rem;letter-spacing:.04em}.ritual-boot-lockup img{width:16px;height:16px}.save-progress-card{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:9px}.save-progress-card button{grid-column:2;justify-self:start;min-width:120px;padding:8px;font-size:.33rem}.save-progress-card p{font-size:.53rem}}

/* Logo-led boot and quieter, non-blocking level feedback */
.boot-logo-wrap{position:relative;width:min(520px,100%);margin:-.15rem auto .72rem;filter:drop-shadow(0 12px 22px rgba(0,0,0,.62));animation:bootLogoFloat 5.4s ease-in-out infinite;isolation:isolate}
.boot-logo{display:block;width:100%;height:auto;object-fit:contain;image-rendering:auto;position:relative;z-index:1}
.boot-logo-wrap:after{content:"";position:absolute;left:9%;right:9%;bottom:4%;height:16%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(136,255,198,.15),transparent);mix-blend-mode:screen;animation:bootLogoScan 3.8s ease-in-out infinite}
.boot-logo-spark{position:absolute;z-index:3;width:5px;height:5px;background:#a8ffd0;box-shadow:0 0 0 2px rgba(94,213,156,.16),0 0 17px #70e3ae;transform:rotate(45deg);animation:bootLogoSpark 2.6s steps(6,end) infinite}
.boot-logo-spark.spark-a{left:13%;top:41%;animation-delay:-.5s}.boot-logo-spark.spark-b{right:16%;top:29%;animation-delay:-1.4s}.boot-logo-spark.spark-c{left:53%;bottom:3%;animation-delay:-2.1s}
@keyframes bootLogoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.008)}}
@keyframes bootLogoScan{0%,100%{opacity:0;transform:translateY(-18px)}25%,72%{opacity:.9}55%{transform:translateY(18px)}}
@keyframes bootLogoSpark{0%,100%{opacity:.15;transform:translate(0,2px) rotate(45deg) scale(.7)}35%{opacity:1}65%{opacity:.4;transform:translate(5px,-8px) rotate(45deg) scale(1.35)}}

/* A shrine silhouette keeps the menu atmospheric without a fake hero render. */
.login-hero-art{width:250px;height:190px;margin:22px 0 22px 72px;filter:drop-shadow(0 18px 14px rgba(0,0,0,.72));animation:heroShrineDrift 5.5s ease-in-out infinite}
.login-hero-art:before{content:"";position:absolute;left:4px;right:4px;bottom:7px;height:2px;background:#335b4a;box-shadow:0 8px 0 rgba(36,79,62,.55),0 16px 0 rgba(19,45,38,.45)}
.hero-mist{position:absolute;left:0;right:0;bottom:24px;height:72px;background:radial-gradient(ellipse at 18% 70%,rgba(107,194,155,.28),transparent 48%),radial-gradient(ellipse at 76% 60%,rgba(89,139,183,.2),transparent 52%);filter:blur(5px);opacity:.7}
.hero-torii{position:absolute;left:71px;bottom:20px;width:112px;height:128px}
.hero-torii:before{content:"";position:absolute;left:7px;top:0;width:98px;height:12px;background:#9c7040;box-shadow:0 4px 0 #4c3728,0 8px 0 #bd8a4e;clip-path:polygon(4% 20%,96% 0,100% 64%,0 100%)}
.hero-torii:after{content:"";position:absolute;left:17px;top:17px;width:78px;height:8px;background:#bd8a4e;box-shadow:0 3px 0 #4c3728}
.hero-torii i,.hero-torii b{position:absolute;bottom:0;width:13px;height:112px;background:linear-gradient(90deg,#513928,#b17f45 45%,#5b3f2d);box-shadow:inset 3px 0 rgba(235,185,102,.28)}
.hero-torii i{left:15px}.hero-torii b{right:15px}.hero-torii span{position:absolute;left:31px;top:31px;width:50px;height:78px;border:3px solid #654731;border-top:0;background:linear-gradient(180deg,rgba(7,19,20,.7),rgba(11,39,31,.95));box-shadow:inset 0 0 0 3px rgba(84,143,112,.15)}
.hero-lantern{position:absolute;bottom:36px;width:16px;height:24px;background:#d89945;border:2px solid #503827;box-shadow:0 0 19px rgba(255,173,83,.75),0 0 7px #ffbf68 inset;animation:lanternPulse 2.2s ease-in-out infinite}
.hero-lantern:before{content:"";position:absolute;left:4px;top:-8px;width:5px;height:7px;background:#bd8a4e}.hero-lantern:after{content:"";position:absolute;left:3px;bottom:-7px;width:7px;height:6px;background:#4a3324}
.hero-lantern.l1{left:42px}.hero-lantern.l2{right:38px;animation-delay:-1s}
.hero-firefly{position:absolute;width:4px;height:4px;background:#b0ffd0;box-shadow:0 0 12px 3px rgba(107,237,174,.6);animation:fireflyFloat 3.8s ease-in-out infinite}
.hero-firefly.f1{left:15%;top:27%}.hero-firefly.f2{right:17%;top:42%;animation-delay:-1.4s}.hero-firefly.f3{left:64%;top:9%;animation-delay:-2.6s}
@keyframes heroShrineDrift{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@keyframes lanternPulse{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.3)}}
@keyframes fireflyFloat{0%,100%{opacity:.2;transform:translate(0,7px)}40%{opacity:1}70%{opacity:.4;transform:translate(8px,-9px)}}

.main-menu-choices{display:grid;gap:8px;margin-top:1.05rem}.menu-choice{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:left;border:1px solid rgba(99,161,133,.23);border-radius:2px;background:linear-gradient(100deg,rgba(24,51,42,.66),rgba(8,18,23,.84));color:#e8f1db;transition:transform .16s,border-color .16s,background .16s}.menu-choice:hover,.menu-choice:focus-visible{transform:translateX(4px);border-color:rgba(126,224,171,.7);background:linear-gradient(100deg,rgba(37,82,62,.82),rgba(11,25,29,.95));outline:none}.menu-choice-icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid #75bf94;color:#d6efad;font-family:"Cinzel",serif;font-size:1.1rem;transform:rotate(45deg);background:rgba(7,15,17,.65)}.menu-choice-icon::first-letter{transform:rotate(-45deg)}.menu-choice>span:nth-child(2){display:grid;gap:3px}.menu-choice b{font-family:"Press Start 2P",monospace;font-size:.43rem;letter-spacing:.06em;color:#e9dca9}.menu-choice small{font-family:"VT323",monospace;font-size:1rem;color:#7e9d92}.menu-choice>strong{font-size:1.35rem;color:#80d5a7;font-weight:400}.wallet-choice{border-color:rgba(229,190,94,.3);background:linear-gradient(100deg,rgba(77,59,27,.34),rgba(13,22,25,.9))}.access-panel{margin-top:1rem}.access-back{margin-bottom:12px;border:0;background:none;color:#80cfa4;font-family:"Press Start 2P",monospace;font-size:.38rem;letter-spacing:.06em}.access-back:hover{color:#f2dda0}.wallet-status-card{display:flex;align-items:flex-start;gap:10px;padding:11px;background:rgba(9,20,23,.76);border:1px solid rgba(110,180,150,.23);margin-bottom:10px}.wallet-status-dot{flex:0 0 9px;width:9px;height:9px;margin-top:4px;border-radius:50%;background:#e5ba61;box-shadow:0 0 10px rgba(229,186,97,.7)}.wallet-status-card b{display:block;font-family:"Press Start 2P",monospace;font-size:.4rem;color:#e8d99e}.wallet-status-card small{display:block;margin-top:6px;color:#8fa69b;font-size:.68rem;line-height:1.4}.wallet-profile-actions{display:grid;gap:7px}.wallet-secondary{background:linear-gradient(180deg,#355d50,#203c36)!important}.access-danger{border:0;background:none;color:#c17d75;font-family:"Press Start 2P",monospace;font-size:.35rem;padding:7px;text-align:left}.about-panel{margin-top:1rem;padding-top:4px}.about-kicker{font-family:"Press Start 2P",monospace;font-size:.38rem;color:#76c99f;letter-spacing:.12em}.about-panel h3{margin:.6rem 0 1rem;font-family:"Cinzel",serif;font-size:1.28rem;line-height:1.12;color:#f0e4ba}.credit-list{display:grid;gap:6px}.credit-list>div{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-left:2px solid #62b58b;background:rgba(26,54,44,.35)}.credit-list b{font-family:"Cinzel",serif;color:#e7d898}.credit-list span{font-family:"VT323",monospace;color:#83a096;font-size:1rem}.about-panel>p{margin-top:1.1rem;color:#82968d;font-size:.66rem;line-height:1.55}.level-ceremony{top:calc(var(--realm-safe-top, 0px) + 18px)!important;left:50%!important;transform:translateX(-50%)!important;width:min(390px,calc(100vw - 24px))!important;min-height:0!important;padding:10px 13px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:11px;align-items:center;pointer-events:auto!important;box-shadow:0 16px 42px rgba(0,0,0,.62),inset 0 0 0 2px rgba(232,203,118,.05)!important;animation:levelToastIn .24s cubic-bezier(.17,1,.32,1)!important}.level-ceremony .level-rays,.level-ceremony .level-gains{display:none!important}.level-ceremony .level-emblem{grid-row:1 / span 4;width:42px!important;height:42px!important;margin:0!important}.level-ceremony .level-emblem strong{font-size:1.05rem}.level-ceremony .level-kicker{grid-column:2;font-size:.3rem;margin:0}.level-ceremony h2{grid-column:2;font-size:.83rem!important;text-align:left;margin:1px 0 0!important}.level-ceremony>p{grid-column:2;font-size:.57rem!important;text-align:left;margin:2px 0 3px!important;line-height:1.35}.level-ceremony #btn-level-ok{grid-column:2;width:auto;justify-self:start;padding:5px 8px!important;font-size:.34rem!important}.level-ceremony:after{inset:4px}.level-ceremony.hidden{display:none!important}
.server-picker{margin-top:1rem;padding-top:10px;border-top:1px solid rgba(110,180,150,.16)}.server-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#c7d6b3;font-family:"Press Start 2P",monospace;font-size:.34rem;letter-spacing:.07em}.server-picker-head small{color:#66877b;font-size:.28rem;letter-spacing:.03em}.server-picker-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.server-option{position:relative;display:grid;grid-template-columns:8px 20px 1fr;align-items:center;gap:6px;min-width:0;padding:7px 6px;border:1px solid rgba(99,161,133,.2);background:rgba(10,24,26,.72);color:#d7e6cf;text-align:left;cursor:pointer}.server-option:hover,.server-option:focus-visible{border-color:rgba(126,224,171,.66);outline:none}.server-option.selected{border-color:#e5ba61;background:linear-gradient(145deg,rgba(74,62,29,.42),rgba(15,29,30,.9));box-shadow:inset 0 -2px #e5ba61}.server-dot{width:6px;height:6px;border-radius:50%;background:#5ecb91;box-shadow:0 0 7px rgba(94,203,145,.75)}.server-option strong{font: .42rem "Press Start 2P",monospace;color:#e5ba61}.server-option-copy{display:grid;min-width:0}.server-option-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font: .39rem "Press Start 2P",monospace;color:#e9dfb1}.server-option-copy small{margin-top:4px;color:#6f9285;font: .8rem "VT323",monospace}.server-option em{position:absolute;right:5px;top:5px;color:#6e9b88;font: .3rem "Press Start 2P",monospace;font-style:normal}.server-option.selected em{color:#e5ba61}
.onchain-policy{margin:11px 0 0;padding:9px;background:rgba(6,15,18,.58);border:1px solid rgba(229,190,94,.18)}.onchain-policy>span{display:block;font-family:"Press Start 2P",monospace;font-size:.34rem;letter-spacing:.08em;color:#d8bd73}.onchain-policy>div{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.onchain-policy button{padding:6px 4px;border:1px solid rgba(116,173,148,.3);background:#0b1719;color:#89a89b;font-family:"Press Start 2P",monospace;font-size:.3rem}.onchain-policy button.active{border-color:#d8bd73;background:rgba(116,91,35,.45);color:#f3df9a}.onchain-policy small{display:block;margin-top:6px;color:#728b82;font-size:.57rem;line-height:1.35}
@keyframes levelToastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.realm-connect-button:not(:disabled){cursor:pointer;opacity:1;color:#d7eee4;border-style:solid;border-color:rgba(104,207,190,.45);background:linear-gradient(180deg,rgba(39,103,83,.55),rgba(17,48,42,.7))}.realm-connect-button:not(:disabled):hover{filter:brightness(1.16);transform:translateY(-1px)}
@media(max-width:720px){.boot-logo-wrap{width:min(470px,94vw);margin-bottom:.45rem}.login-hero-art{position:absolute;right:-8px;bottom:-3px;width:190px;height:155px;margin:0;transform:scale(.86);transform-origin:right bottom}.main-menu-choices{margin-top:.75rem}.menu-choice{padding:10px}.menu-choice b{font-size:.38rem}.menu-choice small{font-size:.9rem}.access-panel{margin-top:.75rem}.level-ceremony{top:calc(env(safe-area-inset-top,0px) + 12px)!important;width:min(360px,calc(100vw - 18px))!important}}
@media(max-width:720px){.server-picker-list{grid-template-columns:1fr}.server-option{padding:8px}.server-option em{right:8px;top:8px}}
#char-preview{left:50%;right:auto;width:auto;height:100%;transform:translateX(-50%)}
@media(max-width:720px){#char-preview{height:96%}}
.creator-preview{align-items:stretch}.preview-stage{width:100%}
#login{overflow-x:hidden}
@media(max-width:720px){.realm-showcase{overflow:hidden}}
.companion-panel{display:flex;flex-direction:column;max-height:min(86vh,720px);overflow:hidden}.companion-panel>.panel-head,.companion-hero,.companion-grid-head{flex:0 0 auto}.companion-grid{min-height:0;flex:1;overflow:auto}.companion-card.active{cursor:default}
@media(pointer:coarse){#pet-chip{min-height:44px;padding:5px 7px}}
@media(max-height:560px){.companion-panel{max-height:96%;width:min(820px,96%)}.companion-hero{grid-template-columns:82px minmax(0,1fr) auto;padding:9px 12px}.companion-hero-art{width:76px;height:76px}#companion-active-art{width:68px;height:68px}.companion-hero-copy>p{display:none}.companion-grid-head{padding-top:8px}.companion-grid{grid-template-columns:repeat(7,1fr);padding-bottom:10px}}
.companion-grid,.creator-panel{scrollbar-width:thin;scrollbar-color:#456f61 #091116}.companion-grid::-webkit-scrollbar,.creator-panel::-webkit-scrollbar{width:6px;height:6px}.companion-grid::-webkit-scrollbar-track,.creator-panel::-webkit-scrollbar-track{background:#091116}.companion-grid::-webkit-scrollbar-thumb,.creator-panel::-webkit-scrollbar-thumb{background:#456f61;border:1px solid #172923}

/* ===== REALM COMMAND UI ===== */
#status-card{width:246px;padding:10px 12px 9px;border-radius:3px;border-color:rgba(114,188,156,.3);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));background:linear-gradient(104deg,rgba(7,18,20,.94),rgba(12,25,30,.88));box-shadow:0 15px 34px rgba(0,0,0,.42),inset 3px 0 0 rgba(91,193,145,.35)}
.status-identity{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;margin-bottom:7px}.status-identity>div{min-width:0}.status-class-crest,.menu-class-crest{display:grid;place-items:center;width:30px;height:30px;color:#f3ddb0;background:linear-gradient(135deg,#20382f,#101c21);border:1px solid #7b966c;box-shadow:inset 0 0 0 4px rgba(7,13,16,.65),0 0 12px rgba(94,193,147,.12);font-family:"Cinzel",serif;font-size:.9rem;transform:rotate(45deg)}.status-class-crest{margin-left:2px}.status-class-crest::first-letter,.menu-class-crest::first-letter{transform:rotate(-45deg)}
.status-identity .status-row{margin:0}.status-class-name{display:block;margin-top:2px;font-family:"Press Start 2P",monospace;font-size:.31rem;letter-spacing:.11em;color:#5f9881}.status-name{font-family:"Cinzel",serif;font-size:.83rem;color:#f4ebce}.status-lvl{padding:2px 4px;border:1px solid rgba(216,190,103,.27);background:rgba(173,137,48,.12);font-family:"Press Start 2P",monospace;font-size:.34rem;color:#efd77f}.bar-row{grid-template-columns:19px 1fr 29px;gap:6px}.bar-label{font-family:"Press Start 2P",monospace;font-size:.3rem}.bar{height:7px;border-radius:0;border:1px solid rgba(255,255,255,.07);background:#050a0d}.bar-fill{border-radius:0}.bar.hp .bar-fill{background:linear-gradient(90deg,#9f2f3d,#e35a52,#f18562)}.bar.sp .bar-fill{background:linear-gradient(90deg,#28668c,#3c9bb2,#79d6cf)}.bar.xp .bar-fill{background:linear-gradient(90deg,#9b7a2c,#efd170)}.bar-val{font-family:"VT323",monospace;font-size:.76rem}.xp-row{margin-top:4px}.clock-row{margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.055)}#clock{font-family:"Press Start 2P",monospace;font-size:.3rem;letter-spacing:.04em;color:#76998f}

.realm-menu-trigger{position:relative;width:58px!important;min-width:58px;height:34px!important;display:grid!important;grid-template-columns:repeat(2,5px) 1fr;grid-template-rows:repeat(2,5px);gap:3px;padding:8px 7px!important;border-radius:2px!important;background:linear-gradient(180deg,#172b28,#0a1519)!important;border-color:rgba(95,192,151,.4)!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.realm-menu-trigger>i{display:block;width:5px;height:5px;background:#72d4a6;box-shadow:0 0 5px rgba(114,212,166,.35)}.realm-menu-trigger>span{grid-column:3;grid-row:1/3;align-self:center;margin-left:2px;font-family:"Press Start 2P",monospace;font-size:.29rem;letter-spacing:.04em;color:#a4c7b7}.realm-menu-trigger:hover{filter:brightness(1.22)}

#skillbar{gap:5px;padding:7px 9px;border-radius:3px;border-color:rgba(117,168,149,.25);background:linear-gradient(180deg,rgba(9,18,23,.95),rgba(5,11,16,.96));clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);box-shadow:0 18px 42px rgba(0,0,0,.52),inset 0 -3px 0 rgba(65,131,108,.14)}.sk{width:60px;height:58px;gap:1px;border-radius:2px;background:linear-gradient(145deg,rgba(33,47,53,.9),rgba(10,17,22,.94));clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.sk:hover{background:linear-gradient(145deg,rgba(45,84,69,.88),rgba(11,25,28,.96));transform:translateY(-3px)}.sk-icon{position:relative;width:22px;height:22px;display:block;margin-top:2px;filter:drop-shadow(0 0 4px rgba(125,221,181,.25))}.sk-icon:before,.sk-icon:after{content:"";position:absolute;display:block}.sk[data-i="0"] .sk-icon:before{left:9px;top:0;width:4px;height:18px;background:linear-gradient(90deg,#5d716f,#e4eee1 50%,#718985);clip-path:polygon(50% 0,100% 15%,75% 100%,25% 100%,0 15%);transform:rotate(38deg)}.sk[data-i="0"] .sk-icon:after{left:4px;top:14px;width:15px;height:3px;background:#d1ab57;transform:rotate(38deg)}.sk[data-i="1"] .sk-icon:before{left:7px;top:2px;width:8px;height:18px;background:#70cda0;box-shadow:0 0 7px rgba(112,205,160,.45)}.sk[data-i="1"] .sk-icon:after{left:2px;top:7px;width:18px;height:8px;background:#70cda0}.sk[data-i="2"] .sk-icon{border:2px solid #e1c471;border-left-color:#69bea0;border-radius:50%}.sk[data-i="2"] .sk-icon:before{left:7px;top:-4px;width:5px;height:5px;background:#e6d590;transform:rotate(45deg)}.sk[data-i="2"] .sk-icon:after{left:-3px;bottom:0;width:6px;height:2px;background:#78c6a7;box-shadow:18px -8px #e1b96a}.sk[data-i="3"] .sk-icon:before{left:2px;top:4px;width:17px;height:5px;border-top:3px solid #78cfad;border-right:3px solid #78cfad;transform:skewX(-28deg)}.sk[data-i="3"] .sk-icon:after{left:5px;top:12px;width:14px;height:5px;border-top:2px solid #a7ddc5;border-right:2px solid #a7ddc5;transform:skewX(-28deg)}.sk-name{font-family:"VT323",monospace;font-size:.75rem;letter-spacing:.03em}.sk-key{top:3px;left:4px;padding:1px 3px;background:#080e12;border:1px solid #30433e;font-family:"Press Start 2P",monospace;font-size:.3rem;color:#7f9990}.sk-cd{border-radius:0;background:linear-gradient(0deg,rgba(3,6,9,.9),rgba(11,18,24,.68))}.sk-util{width:48px}.sk-util .sk-name{font-family:"VT323",monospace;font-size:.7rem}.sk-div{margin:5px 3px;background:linear-gradient(transparent,#48665b,transparent)}

.chat-dock{position:absolute;left:14px;bottom:18px;z-index:18;width:270px;min-height:48px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 9px;text-align:left;color:#cfddd7;background:linear-gradient(105deg,rgba(7,19,23,.94),rgba(13,26,31,.9));border:1px solid rgba(92,157,140,.3);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);box-shadow:0 12px 28px rgba(0,0,0,.42),inset 3px 0 0 rgba(72,173,139,.3);pointer-events:auto}.chat-dock:hover{border-color:rgba(99,206,164,.6);background:linear-gradient(105deg,rgba(13,37,34,.96),rgba(15,31,36,.94))}.chat-dock-sigil{position:relative;width:28px;height:24px;border:1px solid #4b8774;background:#102923;clip-path:polygon(0 0,100% 0,100% 75%,62% 75%,49% 100%,42% 75%,0 75%)}.chat-dock-sigil i{position:absolute;top:8px;width:3px;height:3px;background:#76d2a9}.chat-dock-sigil i:nth-child(1){left:6px}.chat-dock-sigil i:nth-child(2){left:12px}.chat-dock-sigil i:nth-child(3){left:18px}.chat-dock-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.chat-dock-copy small{font-family:"Press Start 2P",monospace;font-size:.29rem;letter-spacing:.08em;color:#62b892}.chat-dock-copy b{overflow:hidden;font-size:.61rem;font-weight:500;color:#8fa8a0;text-overflow:ellipsis;white-space:nowrap}.chat-dock kbd{padding:3px 4px;border-radius:1px;background:#0b1216;border-color:#30453f;font-family:"Press Start 2P",monospace;font-size:.26rem;color:#78978b}.chat-unread{position:absolute;left:24px;top:-7px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border-radius:9px;background:#c54f43;border:1px solid #ff9a7c;color:#fff;font-family:"Press Start 2P",monospace;font-size:.27rem;box-shadow:0 0 9px rgba(218,72,57,.55)}

.realm-menu-panel,.chat-panel,.collection-panel{width:min(780px,94%);padding:0;overflow:hidden;border-radius:3px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:linear-gradient(160deg,rgba(13,24,29,.99),rgba(7,13,19,.99));border-color:rgba(104,177,150,.27);box-shadow:0 0 0 100vmax rgba(2,7,9,.58),0 35px 90px rgba(0,0,0,.72),inset 0 0 0 3px rgba(255,255,255,.016)}.realm-menu-panel>.panel-head,.chat-panel>.panel-head,.collection-panel>.panel-head{margin:0;padding:15px 18px;background:linear-gradient(90deg,rgba(49,111,84,.2),transparent 58%)}.realm-menu-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:17px 20px;background:radial-gradient(circle at 56px 40px,rgba(80,187,137,.14),transparent 80px),linear-gradient(105deg,rgba(28,67,55,.24),rgba(13,24,31,.34));border-bottom:1px solid rgba(255,255,255,.06)}.realm-menu-profile{display:flex;align-items:center;gap:15px}.menu-class-crest{width:48px;height:48px;flex:0 0 48px;font-size:1.3rem}.realm-menu-profile small,.realm-menu-location small{display:block;font-family:"Press Start 2P",monospace;font-size:.34rem;letter-spacing:.09em;color:#60bd91}.realm-menu-profile strong{display:block;margin:3px 0;font-family:"Cinzel",serif;font-size:1.18rem;color:#f2e6c1}.realm-menu-profile p{display:flex;align-items:center;gap:7px;margin:0;font-size:.61rem;color:#81978f}.realm-menu-profile p i{width:3px;height:3px;background:#50736a;transform:rotate(45deg)}.realm-menu-location{text-align:right}.realm-menu-location b{display:block;margin:5px 0 2px;font-family:"Cinzel",serif;font-size:.84rem;color:#d9c998}.realm-menu-location span{font-size:.58rem;color:#718780}.realm-menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:15px 18px 12px}.realm-menu-grid>button{position:relative;min-height:62px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 11px;text-align:left;background:linear-gradient(110deg,rgba(20,32,38,.9),rgba(9,17,22,.9));border:1px solid rgba(255,255,255,.075);color:#cddad5;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:transform .14s,border-color .14s,background .14s}.realm-menu-grid>button:hover{transform:translateX(3px);border-color:rgba(94,196,150,.45);background:linear-gradient(110deg,rgba(37,73,58,.64),rgba(10,22,25,.94))}.realm-menu-grid>button>span{display:flex;min-width:0;flex-direction:column;gap:3px}.realm-menu-grid>button b{font-family:"Cinzel",serif;font-size:.8rem;color:#e9e1c7}.realm-menu-grid>button small{overflow:hidden;font-size:.57rem;color:#6f8580;text-overflow:ellipsis;white-space:nowrap}.realm-menu-grid>button em{padding:3px 4px;border:1px solid #2b423b;color:#58796e;font-family:"Press Start 2P",monospace;font-size:.26rem;font-style:normal}.menu-rune{position:relative;width:34px;height:34px;display:grid;place-items:center;background:#101d20;border:1px solid #38564d;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.menu-rune:before,.menu-rune:after{content:"";position:absolute}.menu-rune.bag:before{width:17px;height:16px;bottom:6px;border:2px solid #c4aa60;border-top:0}.menu-rune.bag:after{width:10px;height:6px;top:6px;border:2px solid #c4aa60;border-bottom:0;border-radius:6px 6px 0 0}.menu-rune.forge:before{width:20px;height:8px;bottom:8px;background:#b86e43;clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}.menu-rune.forge:after{width:6px;height:19px;top:4px;background:#d1b66b;transform:rotate(37deg);box-shadow:0 0 5px rgba(255,162,85,.3)}.menu-rune.quest:before{width:17px;height:22px;border:2px solid #74b295;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(116,178,149,.35) 4px 5px)}.menu-rune.quest:after{right:6px;top:6px;border:4px solid transparent;border-top-color:#d8c16d;transform:rotate(45deg)}.menu-rune.fish:before{width:21px;height:12px;border:2px solid #64bbca;border-radius:55% 45% 45% 55%;transform:rotate(-8deg)}.menu-rune.fish:after{right:4px;width:8px;height:10px;background:#64bbca;clip-path:polygon(100% 0,100% 100%,0 50%)}.menu-rune.pet:before{width:15px;height:14px;border:2px solid #78c993;border-radius:45% 45% 50% 50%;bottom:5px}.menu-rune.pet:after{width:5px;height:5px;border-radius:50%;background:#78c993;top:5px;box-shadow:-8px 3px #78c993,8px 3px #78c993,-4px -3px #78c993,4px -3px #78c993}.menu-rune.chat:before{width:20px;height:14px;border:2px solid #77bba4;clip-path:polygon(0 0,100% 0,100% 75%,65% 75%,50% 100%,42% 75%,0 75%)}.menu-rune.chat:after{width:3px;height:3px;background:#77bba4;box-shadow:-6px 0 #77bba4,6px 0 #77bba4}.menu-rune.settings:before{width:18px;height:18px;border:3px dotted #92a89f;border-radius:50%}.menu-rune.settings:after{width:5px;height:5px;border:2px solid #92a89f;border-radius:50%}.duel-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;margin:0 18px 17px;padding:12px 13px;background:linear-gradient(100deg,rgba(70,28,31,.42),rgba(24,22,27,.56));border:1px solid rgba(186,83,75,.28);border-left:3px solid #a84d45}.duel-swords{position:relative;width:42px;height:42px}.duel-swords i{position:absolute;left:19px;top:2px;width:5px;height:34px;background:linear-gradient(90deg,#776e68,#e2d8c8,#706967);clip-path:polygon(50% 0,100% 12%,72% 79%,100% 82%,100% 90%,64% 88%,64% 100%,36% 100%,36% 88%,0 90%,0 82%,28% 79%,0 12%);transform:rotate(40deg)}.duel-swords i:last-child{transform:rotate(-40deg)}.duel-card>div>span{font-family:"Press Start 2P",monospace;font-size:.31rem;color:#d37166}.duel-card strong{display:block;margin:3px 0;font-family:"Cinzel",serif;font-size:.82rem;color:#edddca}.duel-card p{margin:0;font-size:.6rem;line-height:1.4;color:#8e7c79}.duel-card>button{min-width:110px;height:40px;display:flex;align-items:center;gap:7px;padding:5px 8px;background:#11191c;border:1px solid #4a4b48;color:#88938e}.duel-card>button>i{position:relative;width:30px;height:16px;background:#293234;border:1px solid #4d5858;border-radius:10px}.duel-card>button>i:after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#82908b;transition:.18s}.duel-card>button>span{font-family:"Press Start 2P",monospace;font-size:.29rem}.duel-card>button[aria-checked="true"]{border-color:#b8564c;color:#f19a88;background:rgba(99,33,34,.42);box-shadow:0 0 15px rgba(190,63,51,.15)}.duel-card>button[aria-checked="true"]>i{background:#702f2e;border-color:#bb5a50}.duel-card>button[aria-checked="true"]>i:after{left:16px;background:#ffb09a;box-shadow:0 0 7px #df5a4e}

.chat-panel{display:flex;flex-direction:column;height:min(620px,86vh)}.chat-panel .panel-head{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto 30px}.chat-presence{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #29443b;color:#78968b;font-family:"Press Start 2P",monospace;font-size:.29rem}.chat-presence i{width:6px;height:6px;border-radius:50%;background:#887a63}.chat-presence.online i{background:#69d19c;box-shadow:0 0 7px #69d19c}.chat-messages{min-height:180px;flex:1;overflow:auto;padding:15px 18px;background:linear-gradient(rgba(4,11,14,.5),rgba(8,15,19,.7)),repeating-linear-gradient(0deg,transparent 0 33px,rgba(117,165,148,.025) 33px 34px);scrollbar-width:thin;scrollbar-color:#3c6759 #081015}.chat-empty{height:100%;display:grid;place-content:center;text-align:center;color:#5d746c}.chat-empty>i{width:36px;height:30px;margin:0 auto 9px;border:1px solid #35554b;clip-path:polygon(0 0,100% 0,100% 75%,64% 75%,50% 100%,42% 75%,0 75%)}.chat-empty strong{font-family:"Cinzel",serif;font-size:.86rem;color:#859990}.chat-empty p{margin:4px 0;font-size:.62rem}.chat-message{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;margin-bottom:10px;animation:chatIn .22s ease-out}.chat-avatar{width:32px;height:32px;display:grid;place-items:center;border:1px solid #3f6759;background:#10251f;color:#8fc8ae;font-family:"Cinzel",serif;font-size:.7rem;transform:rotate(45deg)}.chat-avatar span{transform:rotate(-45deg)}.chat-bubble{min-width:0}.chat-meta{display:flex;align-items:center;gap:7px;margin-bottom:3px}.chat-meta b{font-family:"Cinzel",serif;font-size:.68rem;color:#bcd4c8}.chat-meta time{font-family:"Press Start 2P",monospace;font-size:.25rem;color:#536a63}.chat-bubble p{display:inline-block;max-width:100%;margin:0;padding:7px 9px;background:#101d22;border-left:2px solid #3f7d68;color:#c3d0cb;font-size:.68rem;line-height:1.45;overflow-wrap:anywhere}.chat-message.self .chat-avatar{border-color:#a88b4a;background:#302816;color:#ecd37f}.chat-message.self .chat-bubble p{border-left-color:#b69245;background:#211e18}.chat-message.system{display:block;margin:9px 0;text-align:center}.chat-message.system p{display:inline-block;margin:0;padding:4px 8px;border:1px solid #273e38;color:#648078;font-family:"Press Start 2P",monospace;font-size:.27rem}.chat-compose{flex:0 0 auto;padding:12px 18px 15px;border-top:1px solid rgba(255,255,255,.07);background:#091116}.chat-compose>label{display:block;margin-bottom:6px;font-family:"Press Start 2P",monospace;font-size:.31rem;letter-spacing:.08em;color:#5fae8c}.chat-compose>div{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto}.chat-compose input{min-width:0;height:44px;padding:8px 62px 8px 11px;background:#050a0e;border:1px solid #2e4640;border-right:0;color:#e1e8e3;font-family:"IBM Plex Sans",sans-serif;font-size:.72rem;outline:none}.chat-compose input:focus{border-color:#5aaa86;box-shadow:inset 3px 0 0 #5aaa86}.chat-compose #chat-count{position:absolute;right:88px;top:16px;font-size:.48rem;color:#50645e}.chat-compose button{min-width:78px;background:linear-gradient(180deg,#347a5c,#21513e);border:1px solid #5ca27f;color:#e9fff4;font-family:"Press Start 2P",monospace;font-size:.32rem}.chat-compose button i{font-size:.7rem;font-style:normal}.chat-compose>small{display:block;margin-top:5px;color:#4e615b;font-size:.52rem}

.collection-panel{max-height:min(760px,90vh);display:flex;flex-direction:column}.collection-summary{flex:0 0 auto;display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;background:radial-gradient(circle at 51px 48px,rgba(67,157,170,.13),transparent 70px),linear-gradient(95deg,rgba(26,66,70,.28),rgba(13,25,31,.32));border-bottom:1px solid rgba(255,255,255,.06)}.collection-seal{position:relative;width:58px;height:58px;display:grid;place-items:center;border:1px solid #467d78;transform:rotate(45deg);box-shadow:inset 0 0 0 5px rgba(10,24,27,.75)}.collection-seal i{position:absolute;inset:9px;border:1px dotted #63a6a0;border-radius:50%}.collection-seal strong{transform:rotate(-45deg);font-family:"Press Start 2P",monospace;font-size:.47rem;color:#8ed4c6}.collection-summary>div:nth-child(2)>span{font-family:"Press Start 2P",monospace;font-size:.32rem;letter-spacing:.08em;color:#5cb8ad}.collection-summary>div:nth-child(2)>b{display:block;margin:4px 0 2px;font-family:"Cinzel",serif;font-size:1.05rem;color:#e9e1c3}.collection-summary>div:nth-child(2)>p{margin:0;font-size:.59rem;color:#728883}.collection-summary dl{display:grid;grid-template-columns:repeat(2,auto);gap:7px;margin:0}.collection-summary dl>div{min-width:92px;padding:7px 9px;background:rgba(5,12,16,.48);border:1px solid rgba(92,145,137,.16)}.collection-summary dt{font-size:.49rem;color:#657b76}.collection-summary dd{margin-top:3px;font-family:"VT323",monospace;font-size:.9rem;color:#d5dfd9}.collection-legend{display:flex;justify-content:flex-end;gap:10px;padding:8px 18px 4px;color:#637873;font-size:.5rem}.collection-legend span{display:flex;align-items:center;gap:4px}.collection-legend i{width:6px;height:6px;transform:rotate(45deg)}.collection-legend .common{background:#718b84}.collection-legend .uncommon{background:#55b98a}.collection-legend .rare{background:#9e78d3}.collection-legend .legendary{background:#e5bd58;box-shadow:0 0 5px #e5bd58}.fish-collection-grid{min-height:0;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:8px 18px 18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3e6a63 #081015}.fish-card{position:relative;min-width:0;padding:8px 7px 9px;background:linear-gradient(165deg,rgba(19,32,38,.94),rgba(7,14,19,.96));border:1px solid rgba(255,255,255,.075);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.fish-card[data-rarity="uncommon"]{border-color:rgba(75,178,130,.25)}.fish-card[data-rarity="rare"]{border-color:rgba(144,107,200,.28)}.fish-card[data-rarity="legendary"]{border-color:rgba(218,179,79,.35);box-shadow:inset 0 2px 0 rgba(240,197,89,.14)}.fish-card.locked{filter:saturate(.15);opacity:.58}.fish-card-art{position:relative;height:70px;display:grid;place-items:center;margin-bottom:7px;background:radial-gradient(ellipse at center,rgba(64,152,163,.15),transparent 65%),repeating-linear-gradient(0deg,transparent 0 5px,rgba(86,155,161,.025) 5px 6px);border-bottom:1px solid rgba(255,255,255,.055)}.fish-card canvas{width:96px;max-width:100%;height:58px;image-rendering:pixelated}.fish-card.locked canvas{filter:brightness(0) opacity(.5)}.fish-lock{position:absolute;right:4px;top:4px;width:13px;height:15px;border:1px solid #58645f;background:#121b1c}.fish-lock:before{content:"";position:absolute;left:2px;top:-7px;width:7px;height:8px;border:1px solid #58645f;border-bottom:0;border-radius:5px 5px 0 0}.fish-card>span{display:block;font-family:"Press Start 2P",monospace;font-size:.27rem;text-transform:uppercase;color:#5e9992}.fish-card[data-rarity="rare"]>span{color:#a88bd2}.fish-card[data-rarity="legendary"]>span{color:#d4ad54}.fish-card strong{display:block;overflow:hidden;margin:4px 0 5px;font-family:"Cinzel",serif;font-size:.68rem;color:#dce2d5;text-overflow:ellipsis;white-space:nowrap}.fish-card.locked strong{color:#68746f}.fish-card dl{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0}.fish-card dl>div{padding:4px;background:rgba(0,0,0,.22)}.fish-card dt{font-size:.42rem;color:#52655f}.fish-card dd{margin-top:1px;font-family:"VT323",monospace;font-size:.72rem;color:#aebdb6}.fish-card>small{display:block;overflow:hidden;margin-top:5px;color:#526a65;font-size:.45rem;text-overflow:ellipsis;white-space:nowrap}.inv-cell.fish-entry{cursor:pointer;border-color:rgba(67,149,158,.35);background:radial-gradient(circle,rgba(67,149,158,.15),rgba(0,0,0,.4))}.inv-cell.fish-entry:hover{border-color:#61b9bd}.inv-fish-art{display:block;width:48px;height:28px;image-rendering:pixelated}.inv-cell.fish-entry .inv-name{color:#83c7c5}

.level-ceremony{width:min(440px,92%)!important;overflow:hidden!important;padding:28px 24px 22px!important;border-radius:3px!important;border-color:rgba(226,193,102,.58)!important;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);background:radial-gradient(circle at 50% 30%,rgba(98,153,109,.2),transparent 42%),linear-gradient(160deg,#17231f,#0b1116 67%)!important;box-shadow:0 0 0 100vmax rgba(1,5,7,.72),0 30px 90px rgba(0,0,0,.8),inset 0 0 0 3px rgba(232,203,118,.06)!important;animation:levelCeremonyIn .42s cubic-bezier(.17,1,.32,1)!important}.level-ceremony:after{content:"";position:absolute;inset:8px;border:1px solid rgba(227,195,103,.15);pointer-events:none}.level-rays{position:absolute;left:50%;top:85px;width:260px;height:260px;transform:translate(-50%,-50%);opacity:.28;animation:levelRayTurn 18s linear infinite}.level-rays i{position:absolute;left:128px;top:0;width:4px;height:260px;background:linear-gradient(transparent,rgba(239,214,135,.45),transparent);transform-origin:center}.level-rays i:nth-child(2){transform:rotate(45deg)}.level-rays i:nth-child(3){transform:rotate(90deg)}.level-rays i:nth-child(4){transform:rotate(135deg)}.level-kicker{position:relative;z-index:1;display:block;font-family:"Press Start 2P",monospace;font-size:.37rem;letter-spacing:.13em;color:#d8b85e}.level-emblem{position:relative;z-index:1;width:82px;height:82px;display:grid;place-items:center;margin:18px auto 16px;border:1px solid #d0b25c;background:linear-gradient(135deg,rgba(69,121,87,.78),rgba(20,37,32,.92));transform:rotate(45deg);box-shadow:inset 0 0 0 7px rgba(7,14,15,.7),0 0 30px rgba(209,181,93,.22)}.level-emblem i{position:absolute;inset:12px;border:1px dashed rgba(236,212,136,.48);animation:levelSealTurn 12s linear infinite}.level-emblem strong{transform:rotate(-45deg);font-family:"Cinzel",serif;font-size:2rem;color:#fff0b2;text-shadow:0 0 12px rgba(255,213,100,.45)}.level-ceremony h2{position:relative;z-index:1;margin:0!important;font-size:1.3rem!important;color:#f2e4b3!important}.level-ceremony>p{position:relative;z-index:1;margin:6px 0 16px!important;color:#8fa49b!important;font-size:.7rem!important}.level-gains{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}.level-gains>span{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:2px;padding:8px 4px;background:rgba(5,12,14,.5);border:1px solid rgba(217,190,104,.16)}.level-gains i{color:#6bc696;font-size:.65rem;font-style:normal}.level-gains b{font-family:"Cinzel",serif;font-size:1rem;color:#ecd781}.level-gains small{grid-column:1/-1;font-family:"Press Start 2P",monospace;font-size:.25rem;color:#6f837b}.level-ceremony #btn-level-ok{position:relative;z-index:1;width:100%;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:2px!important;font-family:"Press Start 2P",monospace;font-size:.43rem!important;animation:none!important}.level-ceremony #btn-level-ok b{font-size:.8rem}

@keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes levelCeremonyIn{from{opacity:0;transform:translate(-50%,-47%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes levelRayTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes levelSealTurn{to{transform:rotate(360deg)}}

@media(max-width:760px){#status-card{left:7px;top:7px;width:184px;padding:7px 8px}.status-identity{grid-template-columns:28px minmax(0,1fr);gap:7px;margin-bottom:5px}.status-class-crest{width:24px;height:24px;font-size:.7rem}.status-class-name{font-size:.26rem}.status-name{font-size:.7rem}.status-lvl{font-size:.27rem}.bar-row{grid-template-columns:16px 1fr 24px;gap:4px}.clock-row{margin-top:4px;padding-top:3px}#clock{font-size:.26rem}.realm-status{display:none}.realm-menu-trigger{width:44px!important;min-width:44px;height:38px!important;grid-template-columns:repeat(2,6px);justify-content:center}.realm-menu-trigger>i{width:6px;height:6px}.realm-menu-trigger>span{display:none}#skillbar{bottom:8px;gap:3px;padding:5px 6px}.sk{width:46px;height:46px}.sk-icon{width:17px;height:17px;transform:scale(.78);margin:0}.sk-name{font-size:.59rem}.sk-key{font-size:.24rem}.sk-util{display:none!important}.chat-dock{left:auto;right:7px;top:96px;bottom:auto;width:44px;min-height:44px;display:grid;grid-template-columns:1fr;padding:7px}.chat-dock-sigil{margin:auto}.chat-dock-copy,.chat-dock kbd{display:none}.chat-unread{left:auto;right:-3px;top:-5px}.realm-menu-panel,.chat-panel,.collection-panel{width:calc(100% - 12px);max-height:calc(100% - 12px)}.realm-menu-panel{overflow:auto}.realm-menu-overview{grid-template-columns:1fr;padding:12px 14px}.realm-menu-location{display:none}.realm-menu-grid{grid-template-columns:1fr;gap:5px;padding:11px 12px}.realm-menu-grid>button{min-height:54px}.duel-card{grid-template-columns:38px minmax(0,1fr);margin:0 12px 13px}.duel-swords{width:36px}.duel-card>button{grid-column:1/-1;width:100%;justify-content:center}.chat-panel .panel-head{padding:12px;grid-template-columns:minmax(0,1fr) auto 30px}.chat-panel .panel-head .panel-kicker{display:none}.chat-presence{padding:4px 6px}.chat-messages{padding:11px}.chat-compose{padding:10px 11px 12px}.collection-summary{grid-template-columns:54px minmax(0,1fr);padding:12px}.collection-seal{width:44px;height:44px}.collection-summary dl{grid-column:1/-1;width:100%;grid-template-columns:1fr 1fr}.collection-summary dl>div{min-width:0}.collection-legend{justify-content:flex-start;overflow-x:auto;padding:7px 12px 3px}.fish-collection-grid{grid-template-columns:repeat(2,1fr);padding:7px 11px 14px}.fish-card-art{height:62px}.level-ceremony{padding:24px 17px 18px!important}.level-emblem{width:68px;height:68px;margin:16px auto}.level-ceremony h2{font-size:1.05rem!important}.level-gains{gap:4px}.level-gains small{font-size:.22rem}}
@media(max-width:370px){#status-card{width:171px}.status-name{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fish-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fish-card{padding:6px 5px}.fish-card strong{font-size:.6rem}.chat-compose #chat-count{display:none}.chat-compose input{padding-right:9px}.realm-menu-grid>button em{display:none}}
@media(max-height:520px) and (min-width:650px){.chat-dock{display:none}.realm-menu-panel{max-height:96%;overflow:auto}.realm-menu-overview{padding:10px 16px}.realm-menu-grid{grid-template-columns:repeat(2,1fr);padding:9px 15px}.realm-menu-grid>button{min-height:50px}.duel-card{margin:0 15px 12px;padding:8px}.collection-panel{max-height:96%}.collection-summary{padding:8px 15px}.fish-collection-grid{grid-template-columns:repeat(5,1fr)}.level-ceremony{max-height:96%;padding:18px!important}.level-emblem{width:58px;height:58px;margin:9px auto}.level-gains{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.level-rays,.level-emblem i{animation:none!important}.chat-message,.level-ceremony{animation:none!important}}
.status-class-crest,.menu-class-crest{transform:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.inv-material-art,.inv-weapon-art{display:block;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}.inv-material-art{width:36px;height:36px}.inv-weapon-art{width:36px;height:43px;margin:-6px 0 -4px}.inv-cell.weapon .inv-name{color:#e5d7ad}

/* Skill sigils follow the actual class skill, not a generic slot number. */
.sk[data-skill] .sk-icon{border:0;border-radius:0;background:transparent}.sk[data-skill] .sk-icon:before,.sk[data-skill] .sk-icon:after{left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;border:0;border-radius:0;background:transparent;box-shadow:none;clip-path:none;transform:none}
.sk[data-skill="powerstrike"] .sk-icon:before{left:9px;top:0;width:4px;height:18px;background:linear-gradient(90deg,#71837f,#f2f1db 50%,#7a8e89);clip-path:polygon(50% 0,100% 14%,75% 100%,25% 100%,0 14%);transform:rotate(38deg)}.sk[data-skill="powerstrike"] .sk-icon:after{left:3px;top:14px;width:16px;height:3px;background:#d5b25e;transform:rotate(38deg)}
.sk[data-skill="whirlwind"] .sk-icon{border:2px solid #e3c369;border-left-color:#68b896;border-radius:50%}.sk[data-skill="whirlwind"] .sk-icon:before{right:-2px;top:1px;width:6px;height:6px;background:#f1db8b;clip-path:polygon(0 0,100% 50%,0 100%)}.sk[data-skill="whirlwind"] .sk-icon:after{left:6px;top:6px;width:6px;height:6px;border:1px solid #78c7a7;border-radius:50%}
.sk[data-skill="warcry"] .sk-icon:before{left:3px;top:1px;width:16px;height:20px;background:linear-gradient(90deg,#a95342,#e4bd68 50%,#a95342);clip-path:polygon(50% 0,100% 18%,86% 76%,50% 100%,14% 76%,0 18%)}.sk[data-skill="warcry"] .sk-icon:after{left:9px;top:5px;width:3px;height:10px;background:#fff0ab;box-shadow:-3px 3px 0 -1px #fff0ab,3px 3px 0 -1px #fff0ab}
.sk[data-skill="fireball"] .sk-icon:before{left:4px;top:1px;width:15px;height:20px;background:linear-gradient(#fff0a0 0 27%,#f79b3d 28% 64%,#d94a35 65%);clip-path:polygon(52% 0,75% 29%,91% 14%,100% 62%,77% 100%,25% 100%,0 66%,16% 30%,32% 45%);filter:drop-shadow(0 0 4px rgba(255,129,48,.7))}.sk[data-skill="fireball"] .sk-icon:after{left:8px;bottom:2px;width:7px;height:8px;background:#fff3b0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sk[data-skill="frostnova"] .sk-icon:before{left:9px;top:0;width:3px;height:22px;background:#bfeeff;box-shadow:0 0 5px rgba(137,220,255,.55)}.sk[data-skill="frostnova"] .sk-icon:after{left:0;top:9px;width:22px;height:3px;background:#bfeeff;box-shadow:0 0 5px rgba(137,220,255,.55);transform:rotate(45deg)}
.sk[data-skill="heal"] .sk-icon:before{left:8px;top:1px;width:7px;height:21px;background:#7ee2a5;box-shadow:0 0 5px rgba(92,226,150,.42)}.sk[data-skill="heal"] .sk-icon:after{left:1px;top:8px;width:21px;height:7px;background:#7ee2a5}
.sk[data-skill="blink"] .sk-icon:before{left:3px;top:3px;width:15px;height:15px;border:2px solid #bd92f0;transform:rotate(45deg);box-shadow:inset 0 0 6px rgba(177,119,239,.45),0 0 5px rgba(177,119,239,.35)}.sk[data-skill="blink"] .sk-icon:after{left:9px;top:9px;width:4px;height:4px;background:#f2e4ff;transform:rotate(45deg)}
.sk[data-skill="arrowshot"] .sk-icon:before,.sk[data-skill="multishot"] .sk-icon:before{left:1px;top:9px;width:17px;height:3px;background:#d9b96a;transform:rotate(-18deg)}.sk[data-skill="arrowshot"] .sk-icon:after,.sk[data-skill="multishot"] .sk-icon:after{right:0;top:5px;border-left:7px solid #eaf6df;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(-18deg)}.sk[data-skill="multishot"] .sk-icon:before{box-shadow:-2px -6px 0 #83d6a6,2px 6px 0 #83d6a6}.sk[data-skill="multishot"] .sk-icon:after{filter:drop-shadow(-3px -5px 0 #bdebc9) drop-shadow(3px 5px 0 #bdebc9)}
.sk[data-skill="dash"] .sk-icon:before,.sk[data-skill="roll"] .sk-icon:before{left:1px;top:3px;width:14px;height:7px;border-top:3px solid #87d6b5;border-right:3px solid #87d6b5;transform:skewX(-25deg)}.sk[data-skill="dash"] .sk-icon:after,.sk[data-skill="roll"] .sk-icon:after{left:5px;top:12px;width:12px;height:6px;border-top:2px solid #c1ead9;border-right:2px solid #c1ead9;transform:skewX(-25deg)}

.realm-menu-panel{overflow:auto;max-height:min(90vh,780px)}.realm-menu-grid>button:last-child{grid-column:1/-1}.realm-menu-trigger:hover{transform:none!important}.fish-card>span{font-family:"IBM Plex Sans",sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.08em}.realm-menu-profile small,.realm-menu-location small{font-size:.4rem}.duel-card>div>span,.chat-compose>label{font-size:.38rem}.chat-presence,.chat-dock-copy small{font-size:.36rem}
@media(max-width:1100px) and (min-width:761px) and (pointer:fine){.chat-dock{bottom:86px}}
@media(pointer:coarse) and (min-width:761px){.chat-dock{left:274px;right:auto;top:14px;bottom:auto}}
@media(max-width:760px){.chat-dock{left:auto;right:59px;top:7px;bottom:auto}.chat-panel{height:min(620px,92dvh)}.chat-compose input{font-size:16px}.panel-close{width:44px;height:44px;font-size:1.35rem}.realm-menu-trigger{min-height:44px!important;height:44px!important}.status-class-name{font-family:"IBM Plex Sans",sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.08em}.sk-key{font-family:"VT323",monospace;font-size:.68rem}.level-gains small{font-family:"IBM Plex Sans",sans-serif;font-size:.48rem;font-weight:700}.fish-card>span{font-size:.55rem}.realm-menu-grid>button em{font-family:"IBM Plex Sans",sans-serif;font-size:.5rem;font-weight:700}.chat-presence,.chat-compose>label,.duel-card>div>span{font-family:"IBM Plex Sans",sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.07em}}
.sk-name{max-width:100%;line-height:.84;text-align:center;white-space:normal}
.boss-coop-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,174,80,.12);font-family:"Press Start 2P",monospace;font-size:.28rem;letter-spacing:.05em;color:#916d5f}.boss-coop-row span{display:flex;align-items:center;gap:5px}.boss-coop-row i{width:5px;height:5px;border-radius:50%;background:#69d39b;box-shadow:0 0 6px rgba(105,211,155,.7)}.boss-coop-row b{color:#d8ae72;font-weight:400}#boss-hud.rage .boss-coop-row i{background:#ff9251;box-shadow:0 0 7px #ff683c}
@media(max-width:760px){.boss-coop-row{font-family:"IBM Plex Sans",sans-serif;font-size:.48rem;font-weight:700}.boss-coop-row span{font-size:0}.boss-coop-row span:after{content:"CO-OP";font-size:.48rem}}

/* ===== AUTHORED FOREST-REALM UI PASS =====
   A single tactile language: charred lacquer, moss ink, brass and vermilion.
   These late overrides intentionally preserve every existing interaction hook. */
:root{
  --realm-night:#05090b;
  --realm-lacquer:#0b1416;
  --realm-lacquer-2:#101d1d;
  --realm-moss:#315f4c;
  --realm-jade:#69bf91;
  --realm-jade-pale:#b8d9c5;
  --realm-brass:#c9aa5b;
  --realm-paper:#e8dfbf;
  --realm-vermilion:#b44b3f;
  --realm-groove:rgba(173,205,185,.12);
  --realm-safe-left:max(12px,env(safe-area-inset-left));
  --realm-safe-right:max(12px,env(safe-area-inset-right));
  --realm-safe-top:max(12px,env(safe-area-inset-top));
  --realm-safe-bottom:max(12px,env(safe-area-inset-bottom));
}

.realm-ui button,
.realm-ui input{
  -webkit-tap-highlight-color:transparent;
}
.realm-ui button{touch-action:manipulation}
.realm-ui button:focus-visible,
.realm-ui input:focus-visible{
  outline:2px solid #d7bd72;
  outline-offset:3px;
}

@keyframes realmPanelIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(.975)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes realmSigilAnswer{
  0%,100%{filter:drop-shadow(0 0 2px rgba(105,191,145,.18))}
  50%{filter:drop-shadow(0 0 7px rgba(105,191,145,.42))}
}
@keyframes realmMapPulse{
  0%,100%{opacity:.45;transform:scale(.75)}
  50%{opacity:1;transform:scale(1)}
}
@keyframes realmSkillAnswer{
  0%{transform:translateY(1px) scale(.86);filter:brightness(.8)}
  70%{transform:translateY(-2px) scale(1.08);filter:brightness(1.25)}
  100%{transform:none;filter:none}
}
@keyframes realmHudSettle{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@keyframes realmBossEdge{
  0%,100%{box-shadow:0 14px 32px rgba(0,0,0,.5),inset 3px 0 0 rgba(190,62,45,.38)}
  50%{box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 15px rgba(255,98,54,.16),inset 3px 0 0 rgba(255,116,68,.62)}
}

/* Gate, login and creator: less generic glow-card, more printed chronicle. */
.boot-card,
.login-card,
.creator-card{
  border-color:rgba(142,181,153,.28);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.013) 0 1px,transparent 1px 4px),
    linear-gradient(155deg,rgba(16,29,28,.97),rgba(5,11,14,.99) 64%);
}
.boot-card::before,
.login-card::before,
.creator-card::before{
  content:"";
  position:absolute;
  z-index:2;
  top:8px;
  left:22px;
  right:22px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#8daf92 18%,#c7a957 50%,#8daf92 82%,transparent);
  opacity:.45;
}
.pixel-btn{
  border:1px solid #557d62!important;
  border-bottom:4px solid #183326!important;
  border-radius:1px!important;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#39795a,#24513e)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(225,255,237,.16)!important;
  animation:none!important;
  transition:transform .12s ease,filter .15s ease,box-shadow .12s ease!important;
}
.pixel-btn:not(:disabled):active{
  transform:translateY(3px)!important;
  border-bottom-width:1px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.42)!important;
}
.quick-btn,
.btn-ghost,
.creator-tab,
.preview-state,
.rot-btn{
  border-radius:1px;
}
.quick-btn{
  border-bottom:2px solid #111a18;
  background:linear-gradient(180deg,#15231f,#0a1214);
}
.login-card #login-name,
.opt-name input{
  border-radius:1px;
  box-shadow:inset 3px 0 0 rgba(101,172,133,.12);
}
.creator-tab.active{
  color:#eef2df;
  text-shadow:0 0 10px rgba(105,191,145,.35);
}

/* A quiet optical frame keeps HUD pieces related without veiling the world. */
#hud::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,7,7,.22),transparent 11%,transparent 89%,rgba(2,7,7,.2)),
    linear-gradient(180deg,rgba(2,7,7,.16),transparent 13%,transparent 84%,rgba(2,7,7,.14));
  box-shadow:inset 0 0 0 1px rgba(194,216,191,.035),inset 0 0 65px rgba(1,5,5,.17);
}
#status-card,
#top-right,
#boss-hud{z-index:20}
#skillbar{z-index:23}
.chat-dock{z-index:24}

#status-card{
  left:var(--realm-safe-left);
  top:var(--realm-safe-top);
  width:250px;
  overflow:hidden;
  padding:12px 13px 10px;
  border:1px solid #37594c;
  border-left:3px solid #739b73;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,10px 100%,0 calc(100% - 10px));
  background:
    repeating-linear-gradient(0deg,rgba(181,212,192,.018) 0 1px,transparent 1px 4px),
    linear-gradient(108deg,rgba(7,18,18,.96),rgba(12,25,26,.91));
  backdrop-filter:blur(6px);
  box-shadow:0 14px 30px rgba(0,0,0,.44),inset 0 1px 0 rgba(218,233,213,.08);
  animation:realmHudSettle .32s cubic-bezier(.2,.8,.25,1);
}
#status-card::before{
  content:"";
  position:absolute;
  right:15px;
  top:0;
  width:38px;
  height:3px;
  background:linear-gradient(90deg,var(--realm-vermilion) 0 58%,var(--realm-brass) 58% 72%,transparent 72%);
  opacity:.8;
}
.status-class-crest,
.menu-class-crest{
  border-color:#899066;
  background:radial-gradient(circle,#21392f 0 31%,#0c1718 32% 54%,#253a31 55%);
  box-shadow:inset 0 0 0 2px rgba(198,172,91,.14),0 3px 10px rgba(0,0,0,.35);
  animation:realmSigilAnswer 4.6s steps(5,end) infinite;
}
.status-name{letter-spacing:.025em}
.status-class-name{color:#77a78d}
.status-lvl{
  border-color:rgba(201,170,91,.38);
  border-radius:1px;
  color:#ead485;
  background:#211e15;
}
.bar{
  height:8px;
  border-color:rgba(215,230,215,.1);
  box-shadow:inset 0 1px 3px #020505;
}
.bar-fill{position:relative}
.bar-fill::after{
  content:"";
  position:absolute;
  inset:1px 2px auto;
  height:1px;
  background:rgba(255,255,255,.24);
}
.clock-row{border-top-color:rgba(150,181,160,.12)}

#top-right{
  right:var(--realm-safe-right);
  top:var(--realm-safe-top);
  gap:7px;
}
.realm-status{
  min-height:36px;
  border:1px solid #31584f;
  border-radius:0;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  background:
    repeating-linear-gradient(90deg,rgba(131,195,168,.02) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(13,31,32,.94),rgba(6,16,20,.96));
  backdrop-filter:blur(5px);
}
.realm-sigil{
  border-radius:0;
  transform:rotate(45deg) scale(.82);
  color:#9ad9b9;
  background:#10261f;
}
.realm-menu-trigger{
  border-bottom:3px solid #132b21!important;
  box-shadow:0 7px 15px rgba(0,0,0,.36),inset 0 1px 0 rgba(204,239,220,.1)!important;
}
.realm-menu-trigger:active{
  transform:translateY(2px)!important;
  border-bottom-width:1px!important;
}

#minimap-wrap{
  position:relative;
  width:132px;
  padding:0 5px 5px;
  overflow:hidden;
  border:1px solid #405c50;
  border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  background:
    repeating-linear-gradient(0deg,rgba(166,198,178,.018) 0 1px,transparent 1px 4px),
    rgba(6,15,17,.94);
  backdrop-filter:blur(5px);
  box-shadow:0 13px 27px rgba(0,0,0,.4),inset 0 0 0 2px rgba(173,200,180,.025);
  animation:realmHudSettle .35s cubic-bezier(.2,.8,.25,1);
}
.minimap-head{
  height:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 0 3px;
  color:#728d7f;
  font-family:"Press Start 2P",monospace;
  font-size:.29rem;
  letter-spacing:.07em;
}
.minimap-head b{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  color:#e0c56f;
  border:1px solid #776a3d;
  font-size:0;
  font-weight:400;
  transform:rotate(45deg);
}
.minimap-head b::before{content:"N";font-size:.3rem;transform:rotate(-45deg)}
#minimap{
  width:120px;
  height:120px;
  border:1px solid rgba(138,178,153,.23);
  border-radius:0;
  box-shadow:inset 0 0 18px rgba(1,6,7,.48);
}
.minimap-foot{
  height:14px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  padding:0 2px;
  color:#4e6f62;
  font-family:"Press Start 2P",monospace;
  font-size:.23rem;
  letter-spacing:.06em;
}
.minimap-foot i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#68c492;
  box-shadow:0 0 7px rgba(104,196,146,.68);
  animation:realmMapPulse 2.2s steps(4,end) infinite;
}

#boss-hud{
  top:216px;
  border-width:1px;
  border-left:3px solid #9a3d32;
  outline:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,208,174,.018) 0 1px,transparent 1px 4px),
    linear-gradient(105deg,rgba(38,13,14,.96),rgba(13,9,12,.96));
  animation:bossDockIn .28s ease-out;
}
#boss-hud.rage{animation:realmBossEdge 1.35s steps(5,end) infinite}
.boss-health-track{height:13px;border-color:#713027}
.boss-health-track::before{
  content:"";
  position:absolute;
  inset:3px auto 3px 50%;
  width:1px;
  z-index:3;
  background:rgba(255,226,156,.55);
}

/* Skill tray: named class inks and a compact, physical press response. */
#skillbar{
  bottom:var(--realm-safe-bottom);
  gap:5px;
  padding:16px 9px 7px;
  overflow:visible;
  border:1px solid #374f49;
  border-bottom:3px solid #13241f;
  border-radius:1px;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 8px);
  background:
    repeating-linear-gradient(90deg,rgba(190,216,198,.018) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,rgba(10,21,22,.97),rgba(4,10,13,.98));
  backdrop-filter:blur(6px);
  box-shadow:0 18px 38px rgba(0,0,0,.5),inset 0 1px 0 rgba(223,237,218,.07);
}
.skillbar-caption{
  position:absolute;
  left:50%;
  top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#607e71;
  font-family:"Press Start 2P",monospace;
  font-size:.24rem;
  letter-spacing:.11em;
  transform:translateX(-50%);
  white-space:nowrap;
  pointer-events:none;
}
.skillbar-caption i{width:18px;height:1px;background:linear-gradient(90deg,transparent,#617e70)}
.skillbar-caption i:last-child{background:linear-gradient(90deg,#617e70,transparent)}
.sk{
  --skill-ink:#6cad90;
  height:58px;
  border:1px solid #314a42;
  border-top-color:color-mix(in srgb,var(--skill-ink) 58%,#314a42);
  border-bottom:3px solid #101d1b;
  border-radius:1px;
  background:
    radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--skill-ink) 13%,transparent),transparent 55%),
    linear-gradient(150deg,#1a2929,#091215 72%);
  box-shadow:inset 0 1px 0 rgba(226,239,222,.07);
}
.sk[data-class="warrior"]{--skill-ink:#cf6d4d}
.sk[data-class="mage"]{--skill-ink:#9d79d4}
.sk[data-class="archer"]{--skill-ink:#65bd83}
.sk:active{
  transform:translateY(2px) scale(.98);
  border-bottom-width:1px;
}
.sk-icon{filter:drop-shadow(0 2px 1px rgba(0,0,0,.7)) drop-shadow(0 0 4px color-mix(in srgb,var(--skill-ink) 38%,transparent))}
.sk-name{
  width:100%;
  min-height:1.55em;
  max-height:1.55em;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0 2px;
  color:#d9dfd3;
  font-size:.67rem;
  line-height:.78;
  letter-spacing:.025em;
  overflow-wrap:anywhere;
}
.sk-key{
  z-index:3;
  border-color:#41564f;
  border-radius:0;
  color:#a7b8ad;
  background:#07100f;
}
.sk-util{
  --skill-ink:#aa9258;
  background:linear-gradient(150deg,#28271f,#111614 72%);
}
.sk-cd{z-index:2;clip-path:inherit}
.sk[data-skill="windward"] .sk-icon::before{
  content:"";
  position:absolute;
  left:3px;
  top:2px;
  width:15px;
  height:18px;
  border:2px solid #7ed5a4;
  border-top-color:#d7f2c8;
  border-radius:50% 48% 55% 45%;
  clip-path:polygon(50% 0,100% 22%,88% 72%,50% 100%,12% 72%,0 22%);
  background:linear-gradient(135deg,rgba(201,244,213,.16),rgba(63,150,104,.34));
  box-shadow:inset 0 0 5px rgba(107,220,151,.34),0 0 5px rgba(107,220,151,.26);
  transform:rotate(-8deg);
}
.sk[data-skill="windward"] .sk-icon::after{
  content:"";
  position:absolute;
  left:9px;
  top:5px;
  width:3px;
  height:12px;
  background:#d8f0bf;
  box-shadow:-4px 4px 0 -1px #77c997,4px -2px 0 -1px #a7e2af;
  transform:rotate(25deg);
}

/* Panels and menus share one carved surface instead of unrelated glass cards. */
.panel{
  border:1px solid #40584f;
  border-top-color:#657669;
  border-radius:1px;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  background:
    repeating-linear-gradient(0deg,rgba(190,213,194,.016) 0 1px,transparent 1px 4px),
    linear-gradient(155deg,rgba(16,29,29,.99),rgba(5,11,14,.995) 66%);
  box-shadow:0 0 0 100vmax rgba(1,5,6,.64),0 32px 76px rgba(0,0,0,.72),inset 0 0 0 3px rgba(203,222,202,.018);
  animation:realmPanelIn .24s cubic-bezier(.2,.85,.25,1);
  scrollbar-width:thin;
  scrollbar-color:#4c725f #08110f;
}
.panel>.panel-head{
  position:sticky;
  z-index:5;
  top:0;
  border-bottom:1px solid rgba(160,188,168,.13);
  background:
    linear-gradient(90deg,rgba(51,92,70,.27),rgba(10,19,20,.97) 68%),
    #0a1314;
}
.panel-head h2,
.panel h2{color:var(--realm-paper);text-shadow:0 2px 0 #030606}
.panel-kicker{color:#c98052}
.panel-close{
  border:1px solid #4e5f57;
  border-bottom:3px solid #18221f;
  border-radius:0;
  background:#111c1b;
  color:#8fa097;
}
.panel-close:active{transform:translateY(2px);border-bottom-width:1px}
.realm-menu-panel,
.chat-panel,
.collection-panel{
  border-color:#445d53;
  background:
    repeating-linear-gradient(0deg,rgba(190,213,194,.016) 0 1px,transparent 1px 4px),
    linear-gradient(155deg,rgba(16,29,29,.995),rgba(5,11,14,.995) 68%);
}
.realm-menu-overview{
  position:relative;
  border-bottom-color:rgba(157,185,164,.12);
  background:
    radial-gradient(circle at 62px 48px,rgba(78,150,106,.2),transparent 78px),
    repeating-linear-gradient(90deg,rgba(197,218,197,.018) 0 1px,transparent 1px 8px),
    linear-gradient(105deg,#10241f,#0a1417);
}
.realm-menu-overview::after{
  content:"旅";
  position:absolute;
  right:20%;
  top:50%;
  color:rgba(201,170,91,.07);
  font-family:serif;
  font-size:4.1rem;
  line-height:1;
  transform:translateY(-50%);
  pointer-events:none;
}
.realm-menu-grid{gap:8px;padding:16px 18px 13px}
.realm-menu-grid>button{
  min-height:64px;
  border:1px solid #2f443e;
  border-left:3px solid var(--menu-ink,#5c9b7b);
  background:
    repeating-linear-gradient(0deg,rgba(207,225,208,.015) 0 1px,transparent 1px 4px),
    linear-gradient(105deg,#152421,#091315 74%);
  box-shadow:inset 0 1px 0 rgba(217,231,212,.04);
}
.realm-menu-grid>button:nth-child(2){--menu-ink:#c07a47}
.realm-menu-grid>button:nth-child(3){--menu-ink:#bd9c50}
.realm-menu-grid>button:nth-child(4){--menu-ink:#4c9aaa}
.realm-menu-grid>button:nth-child(5){--menu-ink:#70a975}
.realm-menu-grid>button:nth-child(6){--menu-ink:#629a8a}
.realm-menu-grid>button:nth-child(7){--menu-ink:#8b8795}
.realm-menu-grid>button:active{transform:translate(2px,1px)}
.realm-menu-grid>button b{color:#e8dfc3}
.realm-menu-grid>button em{border-radius:0;background:#07100f}
.menu-rune{
  border-color:color-mix(in srgb,var(--menu-ink,#5c9b7b) 56%,#243932);
  background:radial-gradient(circle,#192a26,#091211 70%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.22);
}
.duel-card{
  border-radius:0;
  background:
    repeating-linear-gradient(135deg,rgba(220,126,101,.025) 0 2px,transparent 2px 7px),
    linear-gradient(100deg,rgba(71,26,27,.55),rgba(18,20,20,.72));
}
.duel-card>button{border-radius:1px;border-bottom:3px solid #191e1c}

.inv-cell,
.forge-guide,
.forge-summary>div,
.craft-row,
.quest-row,
.seg,
.realm-passport,
.realm-passport-grid>div,
.realm-connect-button{
  border-radius:1px;
}
.inv-cell{
  border-color:#283c36;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  background:
    linear-gradient(135deg,rgba(49,81,64,.12),transparent 46%),
    #091211;
}
.inv-cell::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(191,211,194,.025);
  pointer-events:none;
}
.craft-row,
.quest-row{border-left:3px solid #4d725f;background:linear-gradient(100deg,rgba(22,41,34,.82),rgba(8,14,16,.88))}
.forge-guide{border-left-color:#b45f38}
.seg-btn{border-radius:0}

/* Chat: readable parchment-dark speech, with a clear world-channel identity. */
.chat-dock{
  left:var(--realm-safe-left);
  bottom:var(--realm-safe-bottom);
  width:286px;
  min-height:52px;
  border:1px solid #36574c;
  border-left:3px solid #5ca17f;
  border-bottom:3px solid #101e1a;
  background:
    repeating-linear-gradient(0deg,rgba(190,216,198,.018) 0 1px,transparent 1px 4px),
    linear-gradient(105deg,rgba(8,22,21,.97),rgba(9,17,20,.96));
  box-shadow:0 13px 28px rgba(0,0,0,.44),inset 0 1px 0 rgba(209,230,211,.06);
}
.chat-dock:active{transform:translateY(2px);border-bottom-width:1px}
.chat-dock-sigil{border-color:#548873;background:#112b23}
.chat-dock-copy small{color:#76b995}
.chat-panel::before{
  content:"WORLD / 01";
  position:absolute;
  z-index:6;
  right:76px;
  top:17px;
  padding:3px 5px;
  border:1px solid rgba(180,75,63,.42);
  color:#bc7165;
  font-family:"Press Start 2P",monospace;
  font-size:.25rem;
  letter-spacing:.06em;
  pointer-events:none;
}
.chat-messages{
  background:
    linear-gradient(rgba(4,11,12,.48),rgba(7,14,15,.76)),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(128,160,140,.032) 35px 36px),
    repeating-linear-gradient(90deg,transparent 0 35px,rgba(128,160,140,.018) 35px 36px);
}
.chat-avatar{
  border-color:#547a68;
  background:radial-gradient(circle,#183128,#0a1715 68%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25);
}
.chat-bubble p{
  position:relative;
  border:1px solid #263d36;
  border-left:3px solid #4f8b70;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
  background:#0d1a1a;
  color:#c8d5ca;
}
.chat-message.self .chat-bubble p{border-color:#4a4329;border-left-color:#b39650;background:#1b1b15}
.chat-compose{
  padding-bottom:max(15px,env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(90deg,rgba(194,216,197,.018) 0 1px,transparent 1px 7px),
    #07100f;
}
.chat-compose input{
  border-color:#365449;
  border-radius:0;
  background:#030908;
  box-shadow:inset 3px 0 0 rgba(91,166,128,.12);
}
.chat-compose button{
  border-bottom:3px solid #163327;
  background:linear-gradient(180deg,#367a58,#20513c);
}
.chat-compose button:active{transform:translateY(2px);border-bottom-width:1px}

/* Touch controls feel like carved controls, not translucent template circles. */
#stick{
  left:max(18px,env(safe-area-inset-left));
  bottom:calc(86px + env(safe-area-inset-bottom));
  border:1px solid rgba(143,183,160,.32);
  background:radial-gradient(circle,rgba(21,48,39,.52) 0 29%,rgba(6,14,15,.48) 30% 55%,rgba(13,28,25,.68) 56%);
  box-shadow:inset 0 0 0 7px rgba(2,8,8,.22),0 9px 22px rgba(0,0,0,.32);
}
#stick::before,
#stick::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:rgba(137,177,154,.13);
}
#stick::before{left:12px;right:12px;top:50%;height:1px}
#stick::after{top:12px;bottom:12px;left:50%;width:1px}
#stick-knob{
  background:radial-gradient(circle at 38% 33%,#8ac6a0,#315f4c 54%,#10231e 55%);
  border:2px solid rgba(196,218,196,.28);
  box-shadow:0 5px 11px rgba(0,0,0,.42),inset 0 0 0 5px rgba(6,18,14,.2);
}
#touch-btns{
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(86px + env(safe-area-inset-bottom));
  gap:8px;
}
.tbtn{
  border:1px solid rgba(226,222,192,.24);
  border-bottom:4px solid rgba(5,11,11,.58);
  border-radius:0;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
  backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 3px rgba(2,7,7,.16),0 7px 14px rgba(0,0,0,.34);
  text-shadow:0 2px 0 rgba(0,0,0,.48);
}
.tbtn.atk{background:linear-gradient(145deg,#b84c42,#642724)}
.tbtn.shd{background:linear-gradient(145deg,#4b7690,#233b4b)}
.tbtn.evd{background:linear-gradient(145deg,#a47d3e,#58411f)}
.tbtn.intr{background:linear-gradient(145deg,#4e9a6d,#25503a)}
.tbtn:active{transform:translateY(3px) scale(.96);border-bottom-width:1px}
.dpad-btn{
  border-radius:1px;
  border-bottom:3px solid #111d1a;
  background:linear-gradient(145deg,rgba(26,49,41,.91),rgba(7,15,16,.94));
}

@media(hover:hover){
  .pixel-btn:not(:disabled):hover{transform:translateY(-2px)!important;filter:brightness(1.1)}
  .sk:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--skill-ink) 58%,#314a42)}
  .sk:hover .sk-icon{animation:realmSkillAnswer .32s steps(4,end)}
  .realm-menu-grid>button:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--menu-ink,#5c9b7b) 72%,#31463e)}
  .panel-close:hover{color:#f2c2b8;background:#4a201e;border-color:#a85247}
}

/* Tablet safe zones: chat rises above the centered tray before they can collide. */
@media(pointer:coarse) and (min-width:761px){
  .chat-dock{
    left:var(--realm-safe-left);
    right:auto;
    top:auto;
    bottom:calc(var(--realm-safe-bottom) + 88px);
    height:auto;
  }
}
@media(max-width:1180px) and (min-width:761px){
  .chat-dock{top:auto;bottom:calc(var(--realm-safe-bottom) + 88px);height:auto}
}

@media(max-width:760px){
  :root{
    --realm-safe-left:max(7px,env(safe-area-inset-left));
    --realm-safe-right:max(7px,env(safe-area-inset-right));
    --realm-safe-top:max(7px,env(safe-area-inset-top));
    --realm-safe-bottom:max(7px,env(safe-area-inset-bottom));
  }
  #status-card{
    left:var(--realm-safe-left);
    top:var(--realm-safe-top);
    width:min(184px,calc(100vw - 132px));
    min-width:164px;
    padding:8px 9px 7px;
    border-left-width:2px;
  }
  #top-right{right:var(--realm-safe-right);top:var(--realm-safe-top)}
  .realm-menu-trigger{width:44px!important;min-width:44px}
  #minimap-wrap{width:92px;padding:0 4px 4px}
  .minimap-head{height:18px;padding:0 1px;font-size:.22rem}
  .minimap-head b{width:12px;height:12px}
  .minimap-head b::before{font-size:.24rem}
  #minimap{width:82px;height:82px}
  .minimap-foot{display:none}
  #boss-hud{top:126px}
  #skillbar{
    bottom:var(--realm-safe-bottom);
    gap:3px;
    padding:5px 6px;
    border-bottom-width:2px;
  }
  .skillbar-caption{display:none}
  .sk{width:46px;height:47px;border-bottom-width:2px}
  .sk-name{min-height:1.5em;max-height:1.5em;padding:0 1px;font-size:.53rem;line-height:.76}
  .chat-dock{
    left:auto;
    right:calc(var(--realm-safe-right) + 51px);
    top:var(--realm-safe-top);
    bottom:auto;
    width:44px;
    min-height:44px;
    padding:7px;
    border-left-width:1px;
    border-bottom-width:2px;
  }
  .chat-panel{
    width:calc(100% - 12px);
    height:min(620px,calc(100dvh - 12px));
    max-height:calc(100dvh - 12px);
  }
  .chat-panel::before{display:none}
  .chat-messages{padding:12px 10px}
  .chat-message{grid-template-columns:29px minmax(0,1fr);gap:8px}
  .chat-avatar{width:27px;height:27px;font-size:.58rem}
  .chat-bubble p{padding:7px 8px;font-size:.69rem}
  .chat-compose{padding:10px 10px max(12px,env(safe-area-inset-bottom))}
  .chat-compose input,
  #login-name,
  #opt-name{font-size:16px!important}
  .panel{
    max-height:calc(100dvh - 12px);
    animation:realmPanelIn .2s ease-out;
  }
  .panel>.panel-head{min-height:52px}
  .realm-menu-panel{width:calc(100% - 12px)}
  .realm-menu-overview::after{right:8%;font-size:3rem}
  .realm-menu-grid>button{min-height:56px}
  #stick{bottom:calc(78px + env(safe-area-inset-bottom))}
  #touch-btns{bottom:calc(78px + env(safe-area-inset-bottom))}
}

@media(max-width:370px){
  #status-card{width:166px;min-width:0}
  #minimap-wrap{width:82px}
  #minimap{width:72px;height:72px}
  .minimap-head span{font-size:0}
  .minimap-head span::after{content:"MAP";font-size:.22rem}
  .sk{width:42px}
  .chat-compose button{min-width:68px}
}

@media(max-height:520px) and (min-width:650px){
  #minimap-wrap{width:104px}
  #minimap{width:94px;height:68px}
  .minimap-foot{display:none}
  .minimap-head{height:18px}
  #boss-hud{top:8px;right:126px}
  #skillbar{padding-top:5px}
  .skillbar-caption{display:none}
}

@media(prefers-reduced-motion:reduce){
  .status-class-crest,
  .menu-class-crest,
  .minimap-foot i,
  #boss-hud.rage,
  .sk:hover .sk-icon{
    animation:none!important;
  }
  .panel,
  #minimap-wrap{
    animation:none!important;
  }
  #status-card{animation:none!important}
}

/* ===== REALM CHAT / NATIVE-RESOLUTION TEXT ===============================
   Chat is a social surface, not a debug console. Keep it on the same paper
   and carved-wood system as the other in-game panels, while leaving message
   copy anti-aliased at the device's native resolution. */
.chat-panel{
  width:min(580px,calc(100vw - 32px))!important;
  height:min(620px,calc(100dvh - 56px))!important;
  max-height:calc(100dvh - 24px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  border:3px solid #704735!important;
  border-radius:0!important;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)!important;
  background:linear-gradient(160deg,#f3dda8,#dfbd7d)!important;
  box-shadow:0 0 0 2px #b47c4e,0 24px 70px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,246,194,.55)!important;
}
/* Keep dialog visibility authoritative. The chat layout uses an intentional
   !important display override, so the generic .hidden utility needs the
   dialog id's higher specificity to win on initial load and after Close. */
#panel-chat.hidden{display:none!important}
.chat-panel::before{content:"WORLD / 01";right:76px;top:15px;color:#f4e3a6;border-color:rgba(255,236,164,.46);font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em}
.chat-panel>.panel-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 30px!important;
  align-items:center!important;
  padding:11px 13px!important;
  min-height:58px!important;
  background:linear-gradient(180deg,#67bc86,#45996b)!important;
  border-bottom:3px solid #704735!important;
  box-shadow:inset 0 2px 0 rgba(219,246,174,.48),inset 0 -2px 0 rgba(34,77,54,.22)!important;
}
.chat-panel>.panel-head h2{font-family:"VT323",monospace!important;font-size:1.55rem!important;letter-spacing:.04em;color:#263f31!important;text-shadow:1px 1px 0 #bfe09f!important}
.chat-panel>.panel-head .panel-kicker{font-family:"Press Start 2P",monospace!important;font-size:7px!important;color:#f5e6a8!important}
.chat-presence{padding:5px 7px!important;border:2px solid rgba(49,94,68,.55)!important;background:rgba(255,238,177,.4)!important;color:#315b42!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:10px!important;font-weight:800!important;letter-spacing:.04em!important}
.chat-presence i{width:7px;height:7px;background:#a8754b}.chat-presence.online i{background:#2f8d5a;box-shadow:0 0 7px #baf08b}
.chat-panel>.panel-head .panel-close{width:30px!important;height:30px!important;background:#efd597!important;border:2px solid #704735!important;color:#2f4735!important;box-shadow:0 2px 0 #523526!important}
.chat-messages{
  min-height:0!important;
  padding:15px 15px 12px!important;
  background:repeating-linear-gradient(0deg,rgba(111,70,44,.035) 0 1px,transparent 1px 6px),linear-gradient(180deg,#e7c98e,#d9b679)!important;
  scrollbar-color:#7b9a63 #d8b477!important;
}
.chat-empty{color:#5c684f!important}.chat-empty>i{border:2px solid #98704a!important;background:rgba(255,239,180,.45)}.chat-empty strong{font-family:"VT323",monospace!important;font-size:1.45rem!important;color:#40523d!important}.chat-empty p{font-size:13px!important;color:#687052!important}
.chat-message{grid-template-columns:36px minmax(0,1fr)!important;gap:9px!important;margin-bottom:11px!important}
.chat-avatar{width:32px!important;height:32px!important;border:2px solid #704735!important;background:#4b936d!important;color:#fff0b2!important;box-shadow:inset 0 0 0 3px #2f644a,0 2px 0 #6c4936!important;transform:none!important}
.chat-avatar span{transform:none!important;font-family:"VT323",monospace!important;font-size:1.15rem!important;text-shadow:1px 1px 0 #31543f}
.chat-meta{gap:7px!important;margin-bottom:4px!important}.chat-meta b{font-family:"IBM Plex Sans",sans-serif!important;font-size:12px!important;font-weight:800!important;color:#40533e!important}.chat-meta time{font-family:"IBM Plex Sans",sans-serif!important;font-size:10px!important;color:#777052!important}
.chat-bubble p{padding:8px 10px!important;border:2px solid #986b49!important;border-left:4px solid #4e936a!important;border-radius:0!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important;background:#f3dda8!important;color:#304334!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important;box-shadow:inset 0 2px 0 rgba(255,246,194,.65),0 2px 0 #7a523d!important}
.chat-message.self .chat-avatar{background:#b18443!important;border-color:#704735!important}.chat-message.self .chat-bubble p{border-color:#8a653f!important;border-left-color:#477e5a!important;background:#c7df9c!important;color:#294333!important}
.chat-message.system{margin:9px 0!important}.chat-message.system p{padding:5px 8px!important;border:2px solid #98704a!important;background:#d9b477!important;color:#536047!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:11px!important;font-weight:800!important}
.chat-compose{padding:11px 13px max(13px,env(safe-area-inset-bottom))!important;border-top:3px solid #704735!important;background:#d2aa6c!important}.chat-compose>label{margin-bottom:6px!important;font-family:"Press Start 2P",monospace!important;font-size:7px!important;color:#5b684a!important}.chat-compose>div{gap:7px!important}.chat-compose input{height:44px!important;padding:8px 10px!important;border:2px solid #8a5c41!important;background:#fff0bb!important;color:#2d4033!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:14px!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.65)!important}.chat-compose input::placeholder{color:#778064!important}.chat-compose input:focus{border-color:#4a8e65!important;box-shadow:0 0 0 2px rgba(74,142,101,.18),inset 0 2px 0 rgba(255,255,255,.65)!important}.chat-compose #chat-count{right:88px!important;top:15px!important;color:#6d7558!important;font-size:10px!important}.chat-compose button{min-width:82px!important;border:2px solid #2d674a!important;border-bottom:4px solid #214a37!important;background:linear-gradient(180deg,#69c487,#489f6e)!important;color:#102d22!important;font-family:"Press Start 2P",monospace!important;font-size:8px!important;text-shadow:1px 1px 0 rgba(195,241,165,.45)!important}.chat-compose>small{margin-top:6px!important;color:#697052!important;font-size:11px!important}
.world-chat-bubble{border:2px solid #704735;border-radius:0 0 4px 4px;background:#f1d89f;color:#2e4032;box-shadow:0 4px 12px rgba(0,0,0,.34),inset 3px 0 0 var(--chat-accent),inset 0 2px 0 rgba(255,246,194,.7);font-family:"IBM Plex Sans",sans-serif}.world-chat-bubble::before{border-left-color:#704735;background:#f1d89f}.world-chat-bubble>span{color:#4b7653;font-size:9px;font-weight:800}.world-chat-bubble>p{color:#304334;font-size:13px;font-weight:600}.world-chat-bubble.self{background:#c7df9c}.world-chat-bubble.duel{background:#f0c3a0}
@media(max-width:760px){
  .chat-panel{width:calc(100vw - 18px)!important;height:min(650px,calc(100dvh - 20px))!important;max-height:calc(100dvh - 20px)!important}
  .chat-panel>.panel-head{padding:10px 10px!important;min-height:53px!important}.chat-panel>.panel-head h2{font-size:1.45rem!important}.chat-panel>.panel-head .panel-kicker{display:none}.chat-presence{font-size:9px!important}.chat-messages{padding:12px 10px 10px!important}.chat-compose{padding:10px 10px max(12px,env(safe-area-inset-bottom))!important}.chat-compose>small{font-size:10px!important}.chat-compose input{font-size:16px!important}.chat-compose button{min-width:74px!important;font-size:8px!important}.chat-message{grid-template-columns:31px minmax(0,1fr)!important;gap:7px!important}.chat-avatar{width:28px!important;height:28px!important}.chat-bubble p{font-size:13px!important;line-height:1.38!important}
}

/* Final player-facing polish: the world remains visible, controls read as a
   small pixel console, and the two interruptive moments (arrival/death) have
   a stable hierarchy on narrow screens. */
.arrival-banner{
  top:calc(72px + env(safe-area-inset-top));
  bottom:auto;
  width:min(490px,calc(100vw - 28px));
  padding:10px 12px;
  gap:10px;
  grid-template-columns:44px minmax(0,1fr) 24px;
  box-shadow:0 12px 30px rgba(0,0,0,.48),inset 3px 0 0 #54b783;
}
.arrival-copy>strong{font-size:.82rem;line-height:1.15}
.arrival-copy>p{display:-webkit-box;overflow:hidden;max-width:420px;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.arrival-actions{gap:8px;margin-top:6px}
.arrival-actions span{font-size:.28rem}
.arrival-sigil{width:38px;height:38px}
.arrival-banner.leaving{transform:translate(-50%,-8px)}

.death-panel{
  width:min(390px,calc(100vw - 28px))!important;
  padding:24px 24px 22px!important;
  border:1px solid rgba(215,163,91,.36)!important;
  border-left:3px solid #c56b56!important;
  border-radius:0!important;
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)!important;
  background:radial-gradient(circle at 50% 16%,rgba(153,65,49,.18),transparent 42%),linear-gradient(155deg,rgba(24,17,23,.98),rgba(10,14,20,.99))!important;
  box-shadow:0 28px 80px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,228,190,.08)!important;
}
.death-panel.death-enter{animation:deathPanelIn .34s cubic-bezier(.2,1.18,.32,1)}
.death-kicker{display:block;color:#e18b6e;font-family:"Press Start 2P",monospace;font-size:.34rem;letter-spacing:.14em}
.death-mark{position:relative;width:62px;height:62px;display:grid;place-items:center;margin:13px auto 9px;border:1px solid #bd7a58;transform:rotate(45deg);background:rgba(103,45,39,.18);box-shadow:inset 0 0 0 7px rgba(204,116,78,.07),0 0 20px rgba(205,92,61,.12)}
.death-mark i{width:28px;height:28px;border:1px solid #ebc374;box-shadow:inset 0 0 0 5px rgba(222,112,75,.16)}
.death-mark b{position:absolute;transform:rotate(-45deg);font-family:"Cinzel",serif;font-size:1.2rem;font-weight:400;color:#f2c979;text-shadow:0 0 10px rgba(242,201,121,.45)}
.death-panel h2{margin:0;color:#f1dfb4;font-size:1.1rem!important;letter-spacing:.06em;text-transform:uppercase}
.death-panel p{max-width:286px;margin:.65rem auto 1.2rem;color:#9a918c;font-size:.68rem;line-height:1.5}
.death-panel .pixel-btn{min-width:220px;border-color:#63352a!important;background:linear-gradient(180deg,#b85e4d,#76372e)!important;box-shadow:0 4px 0 #3f201c,0 8px 18px rgba(0,0,0,.42)!important}
@keyframes deathPanelIn{0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Buttons retain a handcrafted silhouette without rotating the whole hitbox. */
.icon-btn{border-radius:2px!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important}
.icon-btn:hover{transform:translateY(-2px)!important}
.panel-close,.btn-ghost,.craft-btn,.q-btn{border-radius:2px!important}

@media(max-width:760px){
  .arrival-banner{left:8px;right:8px;top:calc(214px + env(safe-area-inset-top));bottom:auto;width:auto;transform:none;grid-template-columns:34px minmax(0,1fr) 22px;gap:8px;padding:8px 9px}
  .arrival-banner.leaving{transform:translateY(-8px)}
  .arrival-sigil{width:30px;height:30px}.arrival-sigil span{font-size:.9rem}
  .arrival-copy>strong{font-size:.67rem}.arrival-copy>p{font-size:.54rem;line-height:1.3;-webkit-line-clamp:2}
  .arrival-actions{gap:5px;flex-wrap:nowrap;overflow:hidden}.arrival-actions span{font-size:.23rem;white-space:nowrap}.arrival-actions span:nth-child(n+3){display:none}
  .arrival-banner>button{width:22px;height:22px}
  #btn-craft-hot,#btn-quest-hot{display:none!important}
  #skillbar{gap:3px;padding:5px 6px;box-shadow:0 12px 25px rgba(0,0,0,.46),inset 0 -3px 0 rgba(65,131,108,.13)}
  #minimap-wrap{opacity:.86;transform:scale(.88);transform-origin:top right}
  .death-panel{width:min(350px,calc(100vw - 24px))!important;padding:20px 16px 18px!important}
  .death-mark{width:54px;height:54px;margin:11px auto 8px}.death-panel h2{font-size:.9rem!important}.death-panel p{font-size:.62rem;margin:.55rem auto 1rem}.death-panel .pixel-btn{min-width:200px;font-size:.48rem!important}
}
@media(max-width:390px){
  .arrival-banner{top:calc(206px + env(safe-area-inset-top));grid-template-columns:28px minmax(0,1fr) 20px;padding:7px 8px}
  .arrival-sigil{width:25px;height:25px}.arrival-copy>p{display:-webkit-box;font-size:.5rem}.arrival-copy>strong{font-size:.62rem}.arrival-actions{display:none}
  #minimap-wrap{transform:scale(.78)}
}

/* Crisp speech layer -------------------------------------------------------
   The world stays deliberately pixelated; readable conversation does not. */
#world-chat-layer{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}
#world-name-layer{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}
.world-name-tag{
  --name-accent:#86d5ae;
  position:fixed;
  width:max-content;
  max-width:min(210px,calc(100vw - 26px));
  padding:4px 8px 5px 10px;
  transform:translate(-50%,-100%);
  border:1px solid color-mix(in srgb,var(--name-accent) 55%,#25352f);
  border-radius:4px 4px 4px 1px;
  background:linear-gradient(145deg,rgba(9,24,21,.94),rgba(4,12,14,.94));
  box-shadow:0 4px 12px rgba(0,0,0,.35),inset 3px 0 0 var(--name-accent),inset 0 1px 0 rgba(255,255,255,.08);
  color:#f2f7ef;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.world-name-tag::before{
  content:"";
  position:absolute;
  left:calc(50% - 5px);
  bottom:-6px;
  width:10px;
  height:7px;
  border-left:1px solid color-mix(in srgb,var(--name-accent) 50%,#25352f);
  background:#071311;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.world-name-tag.duel{
  --name-accent:#e16b5e;
  background:linear-gradient(145deg,rgba(49,20,22,.96),rgba(20,10,13,.96));
  color:#ffe1d3;
}
.world-name-tag.duel::after{
  content:"DUEL";
  margin-left:6px;
  padding-left:6px;
  border-left:1px solid rgba(255,174,148,.35);
  color:#ffad91;
  font-size:9px;
  letter-spacing:.08em;
}
.world-chat-bubble{
  --chat-accent:#63c69e;
  position:fixed;
  width:max-content;
  min-width:96px;
  max-width:min(230px,calc(100vw - 24px));
  padding:8px 11px 9px 13px;
  transform:translate(-50%,calc(-100% - 10px));
  border:1px solid color-mix(in srgb,var(--chat-accent) 54%,#25352f);
  border-radius:11px 11px 11px 4px;
  background:linear-gradient(145deg,rgba(18,31,29,.97),rgba(6,14,16,.97));
  box-shadow:0 7px 18px rgba(0,0,0,.36),inset 3px 0 0 var(--chat-accent),inset 0 1px 0 rgba(255,255,255,.07);
  color:#f1f5f1;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  will-change:left,top,opacity;
}
.world-chat-bubble::before{
  content:"";
  position:absolute;
  left:calc(50% - 7px + var(--chat-tail-shift,0px));
  bottom:-8px;
  width:13px;
  height:9px;
  border-left:1px solid color-mix(in srgb,var(--chat-accent) 50%,#25352f);
  background:linear-gradient(135deg,transparent 48%,#091315 50%);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.world-chat-bubble>span{
  display:block;
  margin:0 0 3px;
  color:color-mix(in srgb,var(--chat-accent) 80%,white);
  font-size:10px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.world-chat-bubble>p{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#f1f5f1;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.world-chat-bubble.self{background:linear-gradient(145deg,rgba(37,34,23,.98),rgba(14,16,15,.97))}
.world-chat-bubble.duel{box-shadow:0 7px 18px rgba(0,0,0,.36),0 0 15px rgba(223,102,85,.14),inset 3px 0 0 var(--chat-accent)}
.world-chat-bubble.arrive{animation:worldChatArrive .18s cubic-bezier(.2,.85,.3,1.1)}
@keyframes worldChatArrive{
  from{transform:translate(-50%,calc(-100% - 4px)) scale(.92)}
  to{transform:translate(-50%,calc(-100% - 10px)) scale(1)}
}

/* Realm Chat typography is UI text, so it stays anti-aliased and comfortably
   sized instead of inheriting tiny bitmap-label treatments. */
.chat-messages,.chat-compose input,.chat-bubble,.chat-empty{
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.chat-meta b{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.01em}
.chat-meta time{font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.02em}
.chat-bubble p{font-size:13px;line-height:1.5;letter-spacing:.005em}
.chat-message.system p{font-family:inherit;font-size:11px;font-weight:600;line-height:1.45;letter-spacing:.035em}
.chat-empty strong{font-family:"Cinzel",serif;font-size:15px}
.chat-empty p{font-size:12px;line-height:1.5}

@media(max-width:600px){
  .world-name-tag{max-width:min(170px,calc(100vw - 22px));padding:4px 7px 5px 9px;font-size:11px}
  .world-name-tag.duel::after{font-size:8px}
  .world-chat-bubble{min-width:86px;max-width:min(190px,calc(100vw - 20px));padding:7px 10px 8px 12px}
  .world-chat-bubble>span{font-size:9px}
  .world-chat-bubble>p{font-size:12.5px;line-height:1.32}
  .chat-bubble p{font-size:13px!important;line-height:1.48}
}

@media(prefers-reduced-motion:reduce){.world-chat-bubble.arrive{animation:none}}

/* Companion mounts -------------------------------------------------------- */
#mount-chip{
  pointer-events:auto;
  min-width:31px;
  height:28px;
  display:grid;
  grid-template-columns:15px minmax(0,1fr);
  align-items:center;
  gap:4px;
  padding:3px 6px;
  overflow:hidden;
  border:1px solid rgba(205,168,87,.34);
  border-radius:3px;
  background:linear-gradient(145deg,rgba(72,52,28,.4),rgba(18,25,25,.82));
  color:#e5cd88;
}
#mount-chip>i{position:relative;width:14px;height:10px;border:2px solid currentColor;border-radius:7px 7px 4px 4px}
#mount-chip>i::before{content:"";position:absolute;left:1px;top:-7px;width:5px;height:7px;border:2px solid currentColor;border-bottom:0;transform:skewX(-15deg)}
#mount-chip>i::after{content:"";position:absolute;left:1px;bottom:-6px;width:2px;height:5px;background:currentColor;box-shadow:7px 0 currentColor}
#mount-chip span{overflow:hidden;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
#mount-chip kbd{display:none}
#mount-chip.active{border-color:#70d2a4;background:linear-gradient(145deg,rgba(33,101,70,.52),rgba(11,26,27,.9));color:#a8f0c9;box-shadow:0 0 10px rgba(83,202,145,.16)}
.companion-actions{display:grid;gap:7px;min-width:108px}
.companion-mount{min-width:108px;padding:10px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #7b6537;background:linear-gradient(180deg,#2d271b,#171b1c);color:#e5cc81;font-family:"Press Start 2P",monospace;font-size:.34rem}
.companion-mount.active{border-color:#58b884;background:linear-gradient(180deg,#214b39,#10231f);color:#baf0d1}
.companion-mount kbd{font-size:.32rem}
.mount-badge{position:absolute;left:4px;top:4px;padding:2px 3px;border:1px solid rgba(226,190,94,.38);background:rgba(61,46,22,.88);color:#edcf79;font-family:"Press Start 2P",monospace;font-size:.22rem;font-style:normal;letter-spacing:.03em}
.companion-card small{display:-webkit-box;min-height:2.4em;overflow:hidden;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Timed food buffs stay visible without adding another large HUD card. */
.food-buff-hud{position:absolute;left:14px;top:190px;display:flex;flex-wrap:wrap;gap:5px;max-width:246px;pointer-events:none}
.food-buff-hud>span{display:grid;grid-template-columns:7px auto auto;align-items:center;gap:5px;padding:4px 6px;border:1px solid rgba(216,179,92,.3);background:rgba(9,18,18,.9);box-shadow:0 5px 13px rgba(0,0,0,.28);color:#d9cfad;font-family:"IBM Plex Sans",sans-serif;font-size:9px}
.food-buff-hud i{width:6px;height:6px;background:#e1b85e;transform:rotate(45deg);box-shadow:0 0 6px rgba(225,184,94,.45)}
.food-buff-hud b{font-size:9px;letter-spacing:.06em}.food-buff-hud em{color:#76c89c;font-size:9px;font-style:normal;font-variant-numeric:tabular-nums}

/* Hearth Kitchen ---------------------------------------------------------- */
.cooking-panel{width:min(860px,94%);max-height:min(780px,92vh);display:flex;flex-direction:column;padding:0;overflow:hidden;background:linear-gradient(155deg,rgba(22,25,22,.99),rgba(8,15,17,.99));border-color:rgba(204,152,75,.3);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.cooking-panel>.panel-head{flex:0 0 auto;margin:0;padding:15px 18px;background:linear-gradient(90deg,rgba(119,67,33,.35),rgba(31,48,40,.16),transparent)}
.cooking-hero{flex:0 0 auto;display:grid;grid-template-columns:116px minmax(0,1fr) auto;align-items:center;gap:17px;padding:15px 19px;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 72px 44px,rgba(236,119,46,.14),transparent 85px),linear-gradient(100deg,rgba(75,45,28,.3),rgba(19,36,31,.28))}
.cooking-hearth{position:relative;width:102px;height:88px;border:1px solid rgba(204,143,69,.2);background:radial-gradient(circle at 50% 62%,rgba(233,112,40,.2),transparent 48%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,255,255,.018) 7px 8px)}
.cooking-hearth .pot{position:absolute;left:27px;bottom:14px;width:48px;height:24px;border:4px solid #302b29;border-top:0;border-radius:3px 3px 18px 18px;background:linear-gradient(90deg,#4b4743,#82766a 45%,#443f3c)}
.cooking-hearth .pot::before{content:"";position:absolute;left:-7px;top:-6px;width:54px;height:7px;border:3px solid #292626;border-radius:50%;background:#756b60}
.cooking-hearth .pot::after{content:"";position:absolute;left:5px;bottom:-8px;width:7px;height:8px;background:#302725;box-shadow:27px 0 #302725}
.cooking-hearth .flame-a,.cooking-hearth .flame-b{position:absolute;bottom:4px;left:42px;width:20px;height:25px;background:#e85e2e;clip-path:polygon(50% 0,75% 34%,100% 58%,79% 100%,20% 100%,0 58%,27% 35%);animation:hearthFlame .72s steps(3,end) infinite;filter:drop-shadow(0 0 7px rgba(235,93,42,.55))}
.cooking-hearth .flame-b{left:47px;bottom:5px;width:11px;height:17px;background:#ffd56b;animation-direction:reverse}
.cooking-hearth>span{position:absolute;left:20px;right:20px;bottom:3px;height:4px;background:#5b3426;box-shadow:0 -3px #8d5731;transform:rotate(4deg)}
@keyframes hearthFlame{50%{transform:translateY(-2px) scaleX(.86)}75%{transform:translateX(2px) scaleY(1.06)}}
.cooking-hero>div:nth-child(2)>span{font-family:"Press Start 2P",monospace;font-size:.32rem;letter-spacing:.08em;color:#dd9250}
.cooking-hero strong{display:block;margin:5px 0 3px;font-family:"Cinzel",serif;font-size:1rem;color:#f1dfb5}
.cooking-hero p{max-width:510px;margin:0;color:#87968c;font-size:.65rem;line-height:1.5}
.cooking-hero dl{display:grid;grid-template-columns:repeat(2,minmax(88px,1fr));gap:6px;margin:0}
.cooking-hero dl>div{padding:8px 9px;border:1px solid rgba(199,151,77,.17);background:rgba(8,15,15,.46)}
.cooking-hero dt{color:#7d887e;font-size:.5rem}.cooking-hero dd{margin-top:3px;color:#dfc680;font-family:"VT323",monospace;font-size:.88rem}
.cooking-guide{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 15px;border-bottom:1px solid rgba(255,255,255,.055);color:#7c8d83;font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600}
.cooking-guide span{display:flex;align-items:center;gap:6px}.cooking-guide i{width:19px;height:19px;display:grid;place-items:center;border:1px solid #6e5a35;color:#e0b760;font-family:"VT323",monospace;font-size:.8rem;font-style:normal;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.cooking-guide b{width:35px;height:1px;background:linear-gradient(90deg,#5c4b30,transparent)}
.cooking-buff-strip{flex:0 0 auto;display:flex;gap:6px;min-height:35px;padding:7px 18px;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.055);background:rgba(5,11,12,.45)}
.cooking-buff-strip>p{margin:auto 0;color:#697871;font-size:11px}
.cooking-buff-strip article{position:relative;min-width:184px;padding:6px 54px 6px 8px;border:1px solid rgba(99,174,130,.22);background:rgba(22,45,36,.37)}
.cooking-buff-strip article>span{display:block;color:#64b98a;font-family:"Press Start 2P",monospace;font-size:.25rem}.cooking-buff-strip strong{display:block;margin:2px 0;color:#d6e0d8;font-size:11px}.cooking-buff-strip p{margin:0;color:#789087;font-size:9px}.cooking-buff-strip time{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#e0c06e;font-family:"VT323",monospace;font-size:1rem}
.cooking-list{min-height:0;flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:7px;padding:7px 17px 18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6b5432 #0b1212}
.cooking-group-title{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:9px 0 1px;color:#cfaa66;font-family:"Press Start 2P",monospace;font-size:.35rem;letter-spacing:.05em}.cooking-group-title::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(207,170,102,.28),transparent)}
.cooking-recipe{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;padding:10px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(120deg,rgba(28,35,31,.92),rgba(9,16,18,.92));clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.cooking-recipe.ready{border-color:rgba(88,184,129,.34);box-shadow:inset 3px 0 0 rgba(88,184,129,.52)}
.cooking-recipe.locked{filter:saturate(.35);opacity:.62}
.cooking-recipe-art{width:66px;height:66px;display:grid;place-items:center;border:1px solid rgba(208,160,83,.15);background:radial-gradient(circle,rgba(197,139,66,.13),transparent 68%)}
.cooking-recipe-art canvas{width:60px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 5px 4px rgba(0,0,0,.4))}
.cooking-recipe-copy h4{margin:0 0 3px;color:#eee2c0;font-family:"Cinzel",serif;font-size:.75rem}.cooking-recipe-copy>p{margin:0 0 6px;color:#7d8c84;font-size:.56rem;line-height:1.42}.cooking-recipe-copy>small{display:block;margin:0 0 6px;color:#b18364;font-size:.52rem}
.cooking-ingredients{display:flex;flex-wrap:wrap;gap:3px}.cooking-ingredients span{padding:2px 4px;border:1px solid #32453c;color:#6e8b7c;font-size:.46rem}.cooking-ingredients span.ok{border-color:rgba(81,166,120,.3);color:#7bc79d}.cooking-ingredients span.missing{border-color:rgba(176,91,67,.24);color:#b87867}
.cooking-effects{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.cooking-effects span{padding:2px 4px;background:rgba(90,142,111,.13);color:#a5cbb2;font-family:"Press Start 2P",monospace;font-size:.23rem}
.cooking-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:6px}.cooking-actions button{min-height:32px;padding:6px 9px;font-family:"Press Start 2P",monospace;font-size:.27rem}.cook-button{border:1px solid #6c5532;background:linear-gradient(180deg,#6f4a2d,#412d22);color:#f0cd83}.cook-button:disabled{opacity:.35}.eat-button{border:1px solid #3e795d;background:linear-gradient(180deg,#316448,#1b3b31);color:#b9e5ca}
.menu-rune.cooking::before{width:20px;height:12px;bottom:6px;border:2px solid #d39c57;border-top:0;border-radius:0 0 9px 9px;background:#5d3f2c}.menu-rune.cooking::after{width:13px;height:12px;top:4px;border-left:2px solid #e6c079;border-right:2px solid #e6c079;clip-path:polygon(0 100%,0 34%,18% 0,36% 45%,54% 6%,72% 50%,100% 20%,100% 100%)}
.inv-food-art{display:block;width:40px;height:40px;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}.inv-cell.food-entry{cursor:pointer;border-color:rgba(196,146,72,.3);background:radial-gradient(circle,rgba(174,115,57,.14),rgba(0,0,0,.42))}.inv-cell.food-entry:hover{border-color:#bf9658}.inv-cell.food-entry .inv-name{color:#ddc78d}

@media(max-width:760px){
  #mount-chip{width:29px;min-width:29px;padding:3px 5px;grid-template-columns:1fr}#mount-chip span{display:none}
  .food-buff-hud{left:7px;top:166px;max-width:184px}.food-buff-hud>span{padding:3px 5px}.food-buff-hud b{display:none}
  .companion-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;width:100%}.companion-cycle,.companion-mount{min-width:0;min-height:42px;flex-direction:row;justify-content:center}
  .cooking-panel{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}
  .cooking-hero{grid-template-columns:76px minmax(0,1fr);gap:10px;padding:11px}.cooking-hearth{width:72px;height:72px;transform:scale(.82);transform-origin:left center}.cooking-hero dl{grid-column:1/-1;width:100%}.cooking-hero p{font-size:.58rem}.cooking-guide{justify-content:flex-start;overflow-x:auto}.cooking-guide b{width:16px;flex:0 0 16px}.cooking-list{grid-template-columns:1fr;padding:7px 10px 14px}.cooking-recipe{grid-template-columns:60px minmax(0,1fr);padding:8px}.cooking-recipe-art{width:58px;height:58px}.cooking-recipe-art canvas{width:54px;height:54px}
}

@media(max-width:390px){.cooking-hero>div:nth-child(2)>span{display:none}.cooking-hero strong{font-size:.82rem}.cooking-guide{display:none}.companion-card small{font-size:.24rem}}

@media(prefers-reduced-motion:reduce){.cooking-hearth .flame-a,.cooking-hearth .flame-b{animation:none}}

/* Final readability and responsive composition pass. */
.clock-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px}
#pet-chip{width:100%;min-width:0;max-width:none;margin:-4px 0;padding-inline:5px}
#mount-chip{width:32px;min-width:32px;grid-template-columns:1fr;justify-items:center;padding-inline:5px}
#mount-chip span{display:none}
#mount-chip>i{justify-self:center}
.realm-menu-grid>button:last-child{grid-column:auto}
.realm-menu-grid>button[data-open-panel="inv"]{--menu-ink:#68aa7c}
.realm-menu-grid>button[data-open-panel="craft"]{--menu-ink:#c07a47}
.realm-menu-grid>button[data-open-panel="cooking"]{--menu-ink:#d49a4f}
.realm-menu-grid>button[data-open-panel="quest"]{--menu-ink:#bd9c50}
.realm-menu-grid>button[data-open-panel="collection"]{--menu-ink:#4c9aaa}
.realm-menu-grid>button[data-open-panel="companions"]{--menu-ink:#70a975}
.realm-menu-grid>button[data-open-panel="chat"]{--menu-ink:#629a8a}
.realm-menu-grid>button[data-open-panel="settings"]{--menu-ink:#8b8795}
.companion-card small{font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:600;line-height:1.25;text-transform:none}
.companion-hero-copy>span{font-size:8px}
.companion-mount{font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:700;letter-spacing:.04em}
.companion-mount kbd{font-family:"VT323",monospace;font-size:12px}
.food-buff-hud{z-index:20}
#hud.boss-active .food-buff-hud{top:250px}
.cooking-hero>div:nth-child(2)>span{font-size:8px}
.cooking-guide span{flex:0 0 auto;white-space:nowrap}
.cooking-list{padding-bottom:max(18px,env(safe-area-inset-bottom))}
.cooking-recipe-copy>p{font-family:"IBM Plex Sans",sans-serif;font-size:11px}
.cooking-recipe-copy>small{font-family:"IBM Plex Sans",sans-serif;font-size:10px;line-height:1.35}
.cooking-ingredients span{font-family:"IBM Plex Sans",sans-serif;font-size:10px;line-height:1.3}
.cooking-effects span{font-family:"IBM Plex Sans",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.02em}
.cooking-actions button{min-height:36px;font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:700;letter-spacing:.04em}

@media(max-width:760px){
  #pet-chip{grid-template-columns:12px minmax(0,1fr);gap:4px}
  #pet-chip small{display:none}
  #mount-chip{width:32px;min-width:32px;padding-inline:5px}
  .food-buff-hud{top:190px;max-width:184px}
  #hud.boss-active .food-buff-hud{top:250px}
  .companion-actions .companion-cycle{grid-column:auto}
  .cooking-actions button{min-height:44px;font-size:11px}
  .cooking-list{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}

@media(max-width:390px){
  .cooking-hero>div:nth-child(2)>span{display:block}
  .companion-card small{font-size:8.5px}
}

/* Companion acquisition is taught in-place instead of being hidden behind
   random-cache luck or a button that only appears after ownership. */
.companion-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px 18px;border-bottom:1px solid rgba(255,255,255,.055);background:rgba(5,13,15,.46)}
.companion-panel{display:flex;flex-direction:column;max-height:min(820px,92vh)}
.companion-panel .companion-grid{min-height:0;flex:1}
.companion-guide article{min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;padding:7px 8px;border:1px solid rgba(101,178,142,.14);background:linear-gradient(120deg,rgba(30,61,48,.24),rgba(10,17,20,.34))}
.companion-guide article>i{width:22px;height:22px;display:grid;place-items:center;border:1px solid #8b7543;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);color:#f0d27c;font-family:"VT323",monospace;font-size:15px;font-style:normal}
.companion-guide span{display:block;margin-bottom:3px;color:#69be91;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.08em}
.companion-guide b{display:block;color:#9daea5;font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:500;line-height:1.3}
.companion-card.starter-hint{filter:none;opacity:.9;border-color:rgba(226,190,94,.5);box-shadow:inset 0 0 0 1px rgba(226,190,94,.1),0 0 14px rgba(211,171,78,.09)}
.companion-card.starter-hint strong{color:#ecd68f}.companion-card.starter-hint small{color:#b59b63}
.companion-mount.locked{border-style:dashed;border-color:#9b7640;background:linear-gradient(180deg,rgba(87,61,28,.72),#171b1c);color:#e3c577}
#mount-chip.locked{border-style:dashed;color:#b99d64;opacity:.82}
.duel-card>button.unavailable{border-style:dashed;border-color:#6b6255;color:#b6a98f;background:rgba(45,38,31,.48)}
.duel-card>button.unavailable>i{background:#3e3932;border-color:#716759}

@media(max-width:760px){
  .companion-guide{grid-template-columns:1fr;padding:7px 10px}
  .companion-guide article{min-height:44px}
}

/* Merchant market + Angler offline dock. Everything here is code-drawn so the
   service screens still belong to the game's hand-built pixel world. */
.realm-menu-grid>button[data-open-panel="shop"]{--menu-ink:#d19b55}
.realm-menu-grid>button[data-open-panel="gacha"]{--menu-ink:#a978e8}
.realm-menu-grid>button[data-open-panel="afk"]{--menu-ink:#4d9eb2}

/* Relic Constellation — an authored pixel altar, not a generic shop grid. */
.gacha-panel{--gacha-ink:#b68af3;max-width:1040px;background:linear-gradient(180deg,#171525 0,#0d121b 100%);border-color:#70548e;box-shadow:0 0 0 3px #211832,0 0 0 5px #0a0c13,0 24px 70px #05050acc}
.gacha-panel:before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid #b994e52d;background:radial-gradient(circle at 17% 16%,#b984f41a 0 1px,transparent 2px),radial-gradient(circle at 76% 24%,#fff2a52b 0 1px,transparent 2px);background-size:31px 29px,43px 37px}
.gacha-hero{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) 230px;gap:24px;align-items:center;margin:2px 22px 18px;padding:20px 22px;background:linear-gradient(135deg,#251b36e8,#101b25e8);border:2px solid #493760;box-shadow:inset 0 0 0 2px #0b0c14,6px 6px 0 #090b12}
.gacha-hero>div:nth-child(2)>span,.gacha-hero dt{font:700 9px/1.2 var(--font-pixel);letter-spacing:.12em;color:#bda5d4}.gacha-hero strong{display:block;margin:5px 0 7px;color:#f7e9c5;font:700 clamp(17px,2.1vw,27px)/1.15 var(--font-display)}.gacha-hero p{margin:0;color:#aeb5c7;line-height:1.55}.gacha-hero dl{margin:0;display:grid;gap:7px}.gacha-hero dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;background:#090d16;border:1px solid #3f3650}.gacha-hero dd{margin:0;color:#f4d986;font:700 10px var(--font-pixel)}
#gacha-connect{margin-top:10px;padding:7px 9px;border:1px solid #8964ad;border-bottom:3px solid #352144;background:#30203f;color:#efd8ff;font:700 7px var(--font-pixel)}#gacha-connect:hover{border-color:#d2a3fa;background:#432958}#gacha-connect.linked{display:none}
.gacha-orbit{width:108px;height:108px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 14px #9e66e66b)}.gacha-orbit:before,.gacha-orbit:after,.gacha-orbit i{content:"";position:absolute;inset:8px;border:3px solid #8061aa;transform:rotate(45deg)}.gacha-orbit:after{inset:24px;border-color:#e0b55c;animation:gachaOrbit 7s linear infinite reverse}.gacha-orbit i:nth-child(1){inset:1px;border-width:1px;border-color:#d7a5ff66;animation:gachaOrbit 10s linear infinite}.gacha-orbit i:nth-child(2){inset:34px;border-color:#6ce5d0}.gacha-orbit b{z-index:2;color:#fff0a1;font-size:30px;text-shadow:0 0 12px #d991ff}.summoning .gacha-orbit{animation:gachaPulse .5s steps(2) infinite}
.gacha-reveal{--reveal:#a66cf0;--reveal-glow:#ead0ff;position:relative;display:flex;gap:10px;min-height:168px;margin:0 22px 16px;padding:14px;overflow-x:auto;overflow-y:hidden;background:radial-gradient(circle at 50% 55%,#2a1742 0,#0a0d17 58%);border:2px solid #4f3768;box-shadow:inset 0 0 34px #05060c,0 0 15px #6f44a62b;isolation:isolate}.gacha-reveal.empty{display:grid;place-content:center;text-align:center}.gacha-reveal.empty span{color:#a995bf;font:700 10px var(--font-pixel);letter-spacing:.11em}.gacha-reveal.empty p{margin:8px 0 0;color:#737b8e}.gacha-reveal.failed{border-color:#7e4e58;background:radial-gradient(circle,#321a24,#0b0d14 64%)}
.gacha-cinematic{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 54%,color-mix(in srgb,var(--reveal) 24%,transparent),transparent 42%)}.gacha-portal{position:absolute;left:50%;top:52%;width:118px;height:118px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 14px #9e75dc)}.gacha-portal:before,.gacha-portal:after,.gacha-portal i{content:"";position:absolute;inset:0;border:2px solid #9c78d1;clip-path:polygon(50% 0,85% 15%,100% 50%,85% 85%,50% 100%,15% 85%,0 50%,15% 15%);animation:gachaSealSpin 2.8s steps(24) infinite}.gacha-portal:after{inset:16px;border-color:#e8c66f;animation-direction:reverse;animation-duration:1.9s}.gacha-portal i:nth-child(1){inset:29px;border-color:#6ef0d4;animation-duration:1.2s}.gacha-portal i:nth-child(2){inset:43px;background:#fff0a6;border-color:#fff;box-shadow:0 0 18px #fff09a;animation:gachaCoreBeat .55s steps(3) infinite}.gacha-portal i:nth-child(3){inset:-13px;border:1px dashed #ac83e988;animation-duration:5s}.gacha-portal b{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:#fff;font-size:22px;text-shadow:0 0 7px #fff,0 0 18px #bd7cff;animation:gachaCoreBeat .55s steps(3) infinite}
.gacha-runes{position:absolute;left:50%;top:52%;width:260px;height:150px;transform:translate(-50%,-50%);pointer-events:none}.gacha-runes i{position:absolute;color:#caa9f1;font:400 15px serif;text-shadow:0 0 8px #c986ff;animation:gachaRuneFloat 1.35s ease-in-out infinite alternate}.gacha-runes i:nth-child(1){left:4%;top:43%}.gacha-runes i:nth-child(2){left:18%;top:7%;animation-delay:-.2s}.gacha-runes i:nth-child(3){right:18%;top:7%;animation-delay:-.4s}.gacha-runes i:nth-child(4){right:4%;top:43%;animation-delay:-.6s}.gacha-runes i:nth-child(5){right:19%;bottom:4%;animation-delay:-.8s}.gacha-runes i:nth-child(6){left:19%;bottom:4%;animation-delay:-1s}.gacha-charge-copy{position:absolute;left:16px;bottom:13px;z-index:3}.gacha-charge-copy small,.gacha-charge-copy strong,.gacha-charge-copy span{display:block}.gacha-charge-copy small{color:#b99bd8;font:700 7px var(--font-pixel)}.gacha-charge-copy strong{margin:5px 0;color:#f7e7b2;font:700 9px var(--font-pixel);letter-spacing:.06em}.gacha-charge-copy span{color:#818da0;font-size:9px;letter-spacing:.12em}
.gacha-shards i{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#e8d4ff;box-shadow:0 0 7px #c488ff;animation:gachaShard 1.1s linear infinite}.gacha-shards i:nth-child(2){animation-delay:-.1s}.gacha-shards i:nth-child(3){animation-delay:-.2s}.gacha-shards i:nth-child(4){animation-delay:-.3s}.gacha-shards i:nth-child(5){animation-delay:-.4s}.gacha-shards i:nth-child(6){animation-delay:-.5s}.gacha-shards i:nth-child(7){animation-delay:-.6s}.gacha-shards i:nth-child(8){animation-delay:-.7s}.gacha-shards i:nth-child(9){animation-delay:-.8s}.gacha-shards i:nth-child(10){animation-delay:-.9s}
.gacha-reveal.opening{border-color:var(--reveal);box-shadow:inset 0 0 46px color-mix(in srgb,var(--reveal) 38%,#05060c),0 0 28px color-mix(in srgb,var(--reveal-glow) 50%,transparent);animation:gachaAltarOpen .72s steps(8) both}.gacha-reveal.opening .gacha-portal{animation:gachaPortalOpen .72s cubic-bezier(.15,.75,.25,1) both}.gacha-reveal.opening .gacha-runes{animation:gachaRunesOpen .7s ease-out both}.gacha-reveal.opening:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:#fff;mix-blend-mode:screen;animation:gachaFlash .7s steps(7) both}.gacha-reveal.results{align-items:stretch;min-height:168px;border-color:color-mix(in srgb,var(--reveal) 75%,#564268);background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--reveal) 18%,transparent),#090d16 62%)}
.gacha-card{--relic:#b8c0c7;--relic-glow:#fff;flex:0 0 148px;position:relative;padding:8px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--relic) 18%,#151824),#0b0f17);border:2px solid var(--relic);box-shadow:inset 0 0 0 2px #090b12,0 0 16px color-mix(in srgb,var(--relic-glow) 25%,transparent);animation:relicReveal .48s steps(6) var(--reveal-delay,0ms) both}.gacha-card:only-child{margin:auto}.gacha-card:before{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--relic) 38%,transparent);pointer-events:none}.gacha-card canvas{width:80px;height:80px;image-rendering:pixelated;filter:drop-shadow(0 0 7px var(--relic-glow));animation:relicHover 1.8s steps(5) infinite alternate}.gacha-card small,.gacha-card strong,.gacha-card span{display:block}.gacha-card small{color:var(--relic);font:700 7px var(--font-pixel);text-transform:uppercase}.gacha-card strong{margin:5px 0;color:#f5edda;font-size:13px}.gacha-card span{color:#929cad;font-size:10px}
.gacha-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:0 22px 15px}.gacha-actions button{min-height:82px;padding:10px 8px;color:#d6d9e2;text-align:left;background:linear-gradient(180deg,#29203a,#151522);border:2px solid #57436e;box-shadow:inset 0 0 0 2px #10101a,3px 3px 0 #080a10}.gacha-actions button:hover:not(:disabled){transform:translate(-1px,-1px);border-color:#c59aef;box-shadow:inset 0 0 0 2px #10101a,4px 4px 0 #080a10,0 0 16px #a56ce53b}.gacha-actions button:disabled{opacity:.38;filter:grayscale(.7)}.gacha-actions small,.gacha-actions b,.gacha-actions span{display:block}.gacha-actions small{color:#a98ac5;font:700 7px var(--font-pixel)}.gacha-actions b{margin:7px 0 5px;color:#ffe3a0;font:700 10px var(--font-pixel)}.gacha-actions span{font-size:10px;color:#9299aa;line-height:1.35}.gacha-rarity-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 22px;justify-content:center}.gacha-rarity-strip span{padding:5px 7px;background:#0b0e15;border:1px solid currentColor;font:700 6px var(--font-pixel)}.gacha-rarity-strip .common{color:#b8c0c7}.gacha-rarity-strip .uncommon{color:#65c979}.gacha-rarity-strip .rare{color:#54a9ef}.gacha-rarity-strip .epic{color:#a66cf0}.gacha-rarity-strip .ultra_rare{color:#ef67c5}.gacha-rarity-strip .legendary{color:#f2a633}.gacha-rarity-strip .mythical{color:#ed5353}.gacha-rarity-strip .mythical_radiant{color:#77f7e5}.gacha-chain-note{text-align:center;color:#737d90;font-size:10px;margin:11px 22px 2px}
@keyframes gachaOrbit{to{transform:rotate(405deg)}}@keyframes gachaPulse{50%{filter:drop-shadow(0 0 22px #f0d078)}}@keyframes gachaSealSpin{to{transform:rotate(360deg)}}@keyframes gachaCoreBeat{50%{transform:scale(1.3);filter:brightness(1.6)}}@keyframes gachaRuneFloat{to{transform:translateY(-8px);color:#fff0ae}}@keyframes gachaShard{from{transform:rotate(0) translateX(24px) scale(0);opacity:0}35%{opacity:1}to{transform:rotate(360deg) translateX(86px) scale(1.4);opacity:0}}@keyframes gachaAltarOpen{0%{filter:brightness(1)}45%{filter:brightness(1.7)}100%{filter:brightness(1.1)}}@keyframes gachaPortalOpen{0%{transform:translate(-50%,-50%) scale(.8)}65%{transform:translate(-50%,-50%) scale(1.7);filter:drop-shadow(0 0 34px var(--reveal-glow))}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}@keyframes gachaRunesOpen{to{transform:translate(-50%,-50%) scale(1.7);opacity:0}}@keyframes gachaFlash{0%,35%{opacity:0}48%{opacity:.92}62%{opacity:.22}100%{opacity:0}}@keyframes relicReveal{from{opacity:0;transform:translateY(28px) scale(.72);filter:brightness(2.2)}70%{transform:translateY(-4px) scale(1.04)}to{opacity:1;transform:none;filter:none}}@keyframes relicHover{to{transform:translateY(-3px);filter:drop-shadow(0 0 12px var(--relic-glow)) brightness(1.14)}}
@media(max-width:720px){.gacha-panel{inset:max(8px,env(safe-area-inset-top)) 7px max(8px,env(safe-area-inset-bottom));width:auto;max-height:none;transform:none!important;box-sizing:border-box}.gacha-hero{grid-template-columns:72px 1fr;margin:0 8px 10px;padding:12px;gap:11px}.gacha-orbit{width:64px;height:64px}.gacha-orbit b{font-size:20px}.gacha-hero dl{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.gacha-hero dl div{display:block;text-align:center;padding:6px 3px}.gacha-hero dd{margin-top:4px;font-size:7px}.gacha-reveal{margin:0 8px 10px;min-height:112px;padding:8px}.gacha-card{flex-basis:116px}.gacha-card canvas{width:62px;height:62px}.gacha-actions{grid-template-columns:repeat(2,1fr);margin:0 8px 10px}.gacha-actions button{min-height:70px}.gacha-actions button:last-child{grid-column:1/-1}.gacha-rarity-strip{margin:0 8px}.gacha-chain-note{margin:8px 8px 0;font-size:9px}}
@media(prefers-reduced-motion:reduce){.gacha-portal:before,.gacha-portal:after,.gacha-portal i,.gacha-portal b,.gacha-runes i,.gacha-shards i,.gacha-card canvas{animation:none!important}.gacha-reveal.opening{animation:gachaFlash .15s linear both}.gacha-card{animation-duration:.12s}}
.menu-rune.shop:before{width:22px;height:13px;bottom:5px;border:2px solid #d4a45e;background:repeating-linear-gradient(90deg,#9d5740 0 4px,#ead08a 4px 8px);clip-path:polygon(0 0,100% 0,87% 100%,13% 100%)}
.menu-rune.shop:after{width:16px;height:11px;bottom:5px;border:2px solid #aa7448;border-top:0;background:linear-gradient(90deg,transparent 0 6px,#c79053 6px 9px,transparent 9px)}
.menu-rune.afk:before{width:21px;height:9px;bottom:6px;border-bottom:2px solid #63b8c5;border-radius:50%;box-shadow:0 4px 0 -2px #386c7d}
.menu-rune.afk:after{left:9px;top:4px;width:12px;height:20px;border-right:2px solid #d6b36d;transform:rotate(23deg);box-shadow:5px 9px 0 -4px #ef7560}

.market-panel,.afk-panel{display:flex;flex-direction:column;width:min(840px,94%);max-height:min(88vh,760px);padding:0;overflow:hidden;border-radius:3px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:linear-gradient(160deg,rgba(16,25,28,.99),rgba(7,13,18,.99));border-color:rgba(194,145,78,.28);box-shadow:0 0 0 100vmax rgba(2,7,9,.6),0 35px 90px rgba(0,0,0,.72),inset 0 0 0 3px rgba(255,255,255,.016)}
.market-panel>.panel-head,.afk-panel>.panel-head{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;gap:13px;margin:0;padding:14px 18px;background:linear-gradient(90deg,rgba(126,77,39,.3),rgba(34,67,60,.14),transparent 72%)}
.afk-panel{border-color:rgba(84,158,180,.31)}.afk-panel>.panel-head{grid-template-columns:minmax(0,1fr) 34px;background:linear-gradient(90deg,rgba(35,91,109,.34),rgba(28,61,66,.16),transparent 72%)}
.market-wallet{text-align:right}.market-wallet small{display:block;color:#83765d;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em}.market-wallet b{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#f1d583;font-family:"Cinzel",serif;font-size:.9rem}.market-wallet b>i,.shop-trade>b>i{width:9px;height:9px;display:inline-block;border:1px solid #f2d379;border-radius:50%;background:#ae7730;box-shadow:inset 0 0 0 2px #d9ab55}

.market-hero,.afk-hero{flex:0 0 auto;display:grid;grid-template-columns:116px minmax(0,1fr) auto;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.065);background:radial-gradient(circle at 72px 45px,rgba(203,144,70,.11),transparent 95px),linear-gradient(100deg,rgba(50,40,29,.3),rgba(12,24,26,.58))}
.market-hero>div:nth-child(2)>span,.afk-hero-copy>span{display:block;color:#d09a58;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em}.market-hero strong,.afk-hero-copy>strong{display:block;margin:4px 0;color:#eadfbd;font-family:"Cinzel",serif;font-size:1rem}.market-hero p,.afk-hero-copy>p{max-width:510px;margin:0;color:#899891;font-family:"IBM Plex Sans",sans-serif;font-size:11px;line-height:1.45}.market-hero dl,.afk-hero dl{display:grid;gap:6px;margin:0}.market-hero dl>div,.afk-hero dl>div{min-width:112px;padding:7px 9px;border-left:2px solid #876436;background:rgba(4,10,12,.45)}.market-hero dt,.afk-hero dt{color:#64746e;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.market-hero dd,.afk-hero dd{margin:2px 0 0;color:#c8c2a9;font-size:11px}
.market-stall-art{position:relative;width:108px;height:74px;background:linear-gradient(180deg,transparent 0 20px,#392b24 20px 24px,transparent 24px),linear-gradient(90deg,#251c18 0 7px,transparent 7px 101px,#251c18 101px);filter:drop-shadow(0 7px 7px rgba(0,0,0,.35))}.market-stall-art .awning{position:absolute;left:5px;top:0;width:98px;height:25px;border-top:3px solid #d1aa66;background:repeating-linear-gradient(90deg,#8e3f37 0 14px,#d6bb7d 14px 28px);clip-path:polygon(0 0,100% 0,94% 82%,88% 100%,81% 82%,74% 100%,67% 82%,60% 100%,53% 82%,46% 100%,39% 82%,32% 100%,25% 82%,18% 100%,11% 82%,5% 100%)}.market-stall-art .shelf{position:absolute;left:9px;right:9px;bottom:10px;height:8px;background:#735139;border-top:2px solid #a57a4d;box-shadow:0 9px 0 #30231d}.market-stall-art .jar{position:absolute;bottom:20px;width:14px;height:18px;border:2px solid #9f7552;border-top:4px solid #d0ad6c;background:linear-gradient(#426f62,#27483f)}.market-stall-art .jar.one{left:19px}.market-stall-art .jar.two{left:40px;background:linear-gradient(#85545e,#56333d)}.market-stall-art .crate{position:absolute;right:14px;bottom:18px;width:29px;height:23px;border:3px solid #80603f;background:repeating-linear-gradient(45deg,#59402e 0 3px,#684c35 3px 6px)}
.market-tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;padding:9px 18px 0;background:#091115}.market-tabs button{min-height:38px;border:0;border-bottom:2px solid #24352f;background:transparent;color:#71847c;font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em}.market-tabs button.active{border-bottom-color:#c5904c;color:#edcf8a;background:linear-gradient(180deg,rgba(175,112,49,.08),transparent)}
.shop-list{min-height:0;flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 18px 18px;scrollbar-width:thin;scrollbar-color:#765b39 #091115}.shop-row{display:grid;grid-template-columns:66px minmax(0,1fr) 202px;align-items:center;gap:12px;min-height:82px;padding:8px 10px;background:linear-gradient(105deg,rgba(27,39,38,.87),rgba(9,16,19,.94));border:1px solid rgba(255,255,255,.07);border-left:3px solid #587262}.shop-row.featured{border-left-color:#d3a54f;background:radial-gradient(circle at 25px 25px,rgba(231,184,84,.1),transparent 70px),linear-gradient(105deg,rgba(47,42,28,.9),rgba(10,17,19,.94))}.shop-row.locked{filter:saturate(.5);opacity:.72}.shop-row.protected{border-left-color:#765c7e}.shop-item-art{width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(204,160,89,.18);background:radial-gradient(circle,rgba(205,164,89,.09),transparent 66%),#091215}.shop-item-art canvas{width:60px;height:60px;image-rendering:pixelated}.shop-item-copy{min-width:0}.shop-item-copy>span{display:block;color:#719b84;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.09em}.shop-row.featured .shop-item-copy>span{color:#d6a85d}.shop-item-copy h3{margin:3px 0 2px;color:#e4dbc1;font-family:"Cinzel",serif;font-size:.82rem}.shop-item-copy p{margin:0;color:#778a83;font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;line-height:1.4}.shop-trade{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:center}.shop-trade>b{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#e5c471;font-family:"Cinzel",serif;font-size:.85rem}.shop-trade>b small{color:#756d59;font-family:"IBM Plex Sans",sans-serif;font-size:8px;letter-spacing:.08em}.shop-trade button{min-height:34px;border:1px solid #4f806b;background:linear-gradient(180deg,#285b49,#173c31);color:#d9f0e4;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.05em}.shop-trade .trade-five{border-color:#866a3c;background:linear-gradient(180deg,#65502e,#3d301e);color:#f0d58b}.shop-trade button:disabled{cursor:not-allowed;border-color:#2e3b38;background:#141c1d;color:#53615d;opacity:.7}.shop-lock{grid-column:1/-1;min-height:32px;display:grid;place-items:center;border:1px dashed #63573e;color:#9f8854;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.08em}.shop-lock.protected{border-color:#695572;color:#a68cad}.shop-empty{min-height:230px;display:grid;place-content:center;text-align:center;color:#667a72}.shop-empty>i{width:48px;height:37px;margin:0 auto 10px;border:2px solid #465e54;border-top:0;transform:skew(-8deg)}.shop-empty strong{color:#aebdb5;font-family:"Cinzel",serif}.shop-empty p{max-width:330px;margin:5px 0;font-size:11px}

.afk-hero{grid-template-columns:130px minmax(0,1fr) auto;background:radial-gradient(circle at 78px 44px,rgba(100,179,202,.13),transparent 108px),linear-gradient(100deg,rgba(21,50,61,.42),rgba(10,21,27,.72))}.afk-hero-copy>span{color:#69b6c6}.afk-hero dl>div{border-left-color:#487f8d}.afk-water-art{position:relative;width:124px;height:86px;overflow:hidden;background:linear-gradient(180deg,#101c2b 0 58%,#17465a 58% 62%,#123746 62%);border-bottom:3px solid #356b79;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.afk-water-art:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:20px;background:repeating-radial-gradient(ellipse at center,transparent 0 10px,rgba(110,201,216,.24) 11px 12px,transparent 13px 19px);animation:afkWater 3.6s linear infinite}.afk-water-art .moon{position:absolute;right:12px;top:8px;width:22px;height:22px;border-radius:50%;background:#e5dbad;box-shadow:0 0 16px rgba(216,226,184,.38)}.afk-water-art .moon:after{content:"";position:absolute;left:7px;top:-2px;width:21px;height:21px;border-radius:50%;background:#101c2b}.afk-water-art .rod{position:absolute;left:31px;top:12px;width:4px;height:57px;background:linear-gradient(90deg,#5a3827,#d2a968,#5e3b27);transform:rotate(28deg);transform-origin:bottom}.afk-water-art .line{position:absolute;left:57px;top:15px;width:39px;height:44px;border-top:1px solid rgba(218,231,220,.7);border-right:1px solid rgba(218,231,220,.7);border-radius:0 38px 0 0}.afk-water-art .bobber{position:absolute;left:91px;top:55px;width:6px;height:9px;border-radius:50% 50% 45% 45%;background:linear-gradient(#f0e6c0 0 45%,#e15f51 45%);z-index:2;animation:afkBob 1.8s ease-in-out infinite}.afk-water-art>span{position:absolute;left:79px;top:59px;width:31px;height:9px;border:1px solid rgba(105,195,211,.45);border-radius:50%}
.afk-progress{display:grid;grid-template-columns:minmax(0,280px) auto;align-items:center;gap:9px;margin-top:10px}.afk-progress>div{height:7px;padding:1px;border:1px solid #2d5964;background:#071217}.afk-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#367c90,#6dc4cf,#d7c475);transition:width .25s}.afk-progress b{color:#73b8c2;font-family:"VT323",monospace;font-size:15px;font-weight:400;letter-spacing:.08em}
.afk-duration-list{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:13px 18px 9px}.afk-duration{min-width:0;min-height:82px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:9px;padding:9px;text-align:left;border:1px solid rgba(83,141,153,.23);background:linear-gradient(130deg,rgba(18,42,49,.75),rgba(8,17,21,.9));color:#8da4a5}.afk-duration>i{position:relative;width:32px;height:32px;border:1px solid #385b62;transform:rotate(45deg)}.afk-duration>i span{position:absolute;inset:8px;border:2px solid #65aab7;border-radius:50%}.afk-duration small{display:block;color:#5e8991;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.09em}.afk-duration strong{display:block;margin:2px 0;color:#d2d9cb;font-family:"Cinzel",serif;font-size:.88rem}.afk-duration p{margin:0;color:#61777a;font-family:"IBM Plex Sans",sans-serif;font-size:9px}.afk-duration em{grid-column:1/-1;justify-self:end;margin-top:-14px;color:#496d73;font-family:"IBM Plex Sans",sans-serif;font-size:7px;font-style:normal;font-weight:800;letter-spacing:.08em}.afk-duration.selected{border-color:#6ab6c5;box-shadow:inset 3px 0 0 #65adbb;background:linear-gradient(130deg,rgba(26,69,79,.82),rgba(9,22,27,.94));color:#bdd9d9}.afk-duration.selected em{color:#78c2cc}.afk-duration:disabled{cursor:default;opacity:.62}.afk-reward-summary{min-height:0;margin:0 18px 9px;padding:10px;border:1px solid rgba(104,177,150,.2);background:rgba(6,15,18,.72)}.afk-reward-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.afk-reward-head span{color:#6ea590;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.1em}.afk-reward-head strong{color:#e6c875;font-family:"Cinzel",serif;font-size:.75rem}.afk-species{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}.afk-species article{flex:0 0 154px;display:grid;grid-template-columns:55px minmax(0,1fr);align-items:center;gap:6px;padding:5px;border-left:2px solid #578f78;background:#101e21}.afk-species article[data-rarity="rare"]{border-left-color:#9773c2}.afk-species article[data-rarity="legendary"]{border-left-color:#d7ae4e}.afk-species canvas{width:54px;height:34px;image-rendering:pixelated}.afk-species b,.afk-species span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.afk-species b{color:#c7d5cf;font-size:9px}.afk-species span{margin-top:3px;color:#657d78;font-size:8px}.afk-actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:7px;padding:4px 18px 10px}.afk-actions button{min-height:40px;padding:7px 15px;font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:800;letter-spacing:.07em}.afk-primary{min-width:230px;border:1px solid #67afbb;background:linear-gradient(180deg,#337c8d,#1c5260);color:#e9fbfa}.afk-primary:disabled{border-color:#334c50;background:#18262a;color:#607376}.afk-cancel{border:1px solid #75514d;background:#352321;color:#c9978f}.afk-note{flex:0 0 auto;display:flex;align-items:center;gap:7px;margin:0;padding:8px 18px 12px;border-top:1px solid rgba(255,255,255,.04);color:#526b69;font-family:"IBM Plex Sans",sans-serif;font-size:9px}.afk-note i{width:7px;height:7px;flex:0 0 7px;border:1px solid #5a928c;transform:rotate(45deg)}

.npc-service-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid rgba(103,173,146,.23);border-left:3px solid #5c9f80;background:linear-gradient(100deg,rgba(31,70,56,.45),rgba(8,17,20,.86))}.npc-service-card>i{position:relative;width:40px;height:40px;border:1px solid #3d6557;background:#101f20}.npc-service-card>i.shop:before{content:"";position:absolute;left:7px;right:7px;top:9px;height:11px;background:repeating-linear-gradient(90deg,#9c4f3e 0 6px,#d6b978 6px 12px);clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}.npc-service-card>i.shop:after{content:"";position:absolute;left:9px;right:9px;bottom:7px;height:15px;border:2px solid #98734d;border-top:0}.npc-service-card>i.afk:before{content:"";position:absolute;left:7px;bottom:8px;width:25px;height:8px;border-bottom:2px solid #66b1c1;border-radius:50%}.npc-service-card>i.afk:after{content:"";position:absolute;left:15px;top:5px;width:2px;height:26px;background:#d0a65e;transform:rotate(25deg)}.npc-service-card span{display:block;color:#6ab18e;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.1em}.npc-service-card strong{display:block;margin:2px 0;color:#d7dfd3;font-family:"Cinzel",serif;font-size:.76rem}.npc-service-card p{margin:0;color:#70847d;font-size:10px}.npc-service-card button{min-height:38px;padding:7px 10px;border:1px solid #5b9a7c;background:#235340;color:#e3f5e9;font-family:"IBM Plex Sans",sans-serif;font-size:9px;font-weight:800;letter-spacing:.05em}

@keyframes afkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes afkWater{from{transform:translateX(-12px)}to{transform:translateX(12px)}}

@media(max-width:760px){
  .market-panel,.afk-panel{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}
  .market-panel>.panel-head,.afk-panel>.panel-head{padding:11px 12px}.market-panel>.panel-head{grid-template-columns:minmax(0,1fr) auto 44px}.afk-panel>.panel-head{grid-template-columns:minmax(0,1fr) 44px}.market-panel .panel-kicker,.afk-panel .panel-kicker{display:none}.market-wallet small{display:none}
  .market-hero,.afk-hero{grid-template-columns:82px minmax(0,1fr);gap:10px;padding:10px 12px}.market-stall-art{width:80px;height:64px;transform:scale(.72);transform-origin:left center}.market-hero dl,.afk-hero dl{display:none}.market-hero strong,.afk-hero-copy>strong{font-size:.78rem}.market-hero p,.afk-hero-copy>p{font-size:9.5px;line-height:1.35}.market-hero>div:nth-child(2)>span,.afk-hero-copy>span{font-size:8px}
  .market-tabs{padding:8px 10px 0}.market-tabs button{min-height:44px}.shop-list{padding:8px 10px max(12px,env(safe-area-inset-bottom))}.shop-row{grid-template-columns:52px minmax(0,1fr);gap:8px;min-height:0;padding:8px}.shop-item-art{width:50px;height:50px}.shop-item-art canvas{width:48px;height:48px}.shop-item-copy h3{font-size:.72rem}.shop-item-copy p{font-size:9px}.shop-trade{grid-column:1/-1;grid-template-columns:auto 1fr 1fr}.shop-trade>b{grid-column:auto;justify-content:flex-start}.shop-trade button,.shop-lock{min-height:44px}
  .afk-water-art{width:78px;height:70px}.afk-water-art .moon{right:7px}.afk-water-art .rod{left:18px}.afk-water-art .line{left:44px;width:27px}.afk-water-art .bobber{left:66px}.afk-water-art>span{left:54px}.afk-progress{grid-template-columns:minmax(0,1fr) auto;margin-top:7px}.afk-duration-list{grid-template-columns:1fr;gap:5px;padding:8px 10px}.afk-duration{min-height:64px;grid-template-columns:32px minmax(0,1fr) auto;padding:7px 9px}.afk-duration>i{width:28px;height:28px}.afk-duration em{grid-column:auto;margin:0}.afk-reward-summary{margin:0 10px 7px}.afk-reward-head{align-items:flex-start;gap:6px}.afk-reward-head strong{text-align:right}.afk-actions{padding:4px 10px 9px}.afk-actions button{min-height:46px}.afk-primary{min-width:0;flex:1}.afk-note{padding:7px 10px max(9px,env(safe-area-inset-bottom))}
  .npc-service-card{grid-template-columns:38px minmax(0,1fr)}.npc-service-card>i{width:36px;height:36px}.npc-service-card button{grid-column:1/-1;min-height:44px;width:100%}
}

@media(max-width:390px){.market-hero p{display:none}.shop-row{grid-template-columns:46px minmax(0,1fr)}.shop-item-art{width:44px;height:44px}.shop-item-art canvas{width:42px;height:42px}.shop-trade{grid-template-columns:1fr 1fr}.shop-trade>b{grid-column:1/-1}.afk-hero-copy>p{display:none}.afk-duration p{display:none}.afk-note{font-size:8px}}
@media(max-height:520px) and (min-width:650px){.market-panel,.afk-panel{max-height:96%}.market-hero,.afk-hero{padding-block:8px}.market-hero p,.afk-hero-copy>p{display:none}.afk-duration-list{grid-template-columns:repeat(3,1fr);padding-block:7px}.afk-duration{min-height:60px}.afk-note{display:none}}
@media(prefers-reduced-motion:reduce){.afk-water-art:after,.afk-water-art .bobber{animation:none}}
.shop-list>.shop-row{flex:0 0 auto}
@media(max-width:760px){
  .afk-duration-list{min-height:0;flex:1 1 180px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#376d78 #091419}
  .afk-actions{flex:0 0 auto}
}
@media(max-height:520px){
  .afk-hero-copy>p,.afk-note{display:none}
  .afk-hero{padding-block:7px}
  .afk-duration-list{padding-block:6px}
}

/* ===== SIX DISCIPLINES + AUTONOMOUS PATROL =====
   Class identity and the AFK battle board stay CSS/canvas-native. */
.class-choice-row .cls-btn{
  --class-accent:#5ca37e;
  position:relative;
  min-height:56px;
  overflow:hidden;
  border-left:3px solid color-mix(in srgb,var(--class-accent) 62%,#263a35);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--class-accent) 8%,transparent),transparent 58%),
    #0b1317;
}
.class-choice-row .cls-btn::after{
  content:"";
  position:absolute;
  right:-14px;
  bottom:-21px;
  width:46px;
  height:46px;
  border:1px solid color-mix(in srgb,var(--class-accent) 24%,transparent);
  transform:rotate(45deg);
}
.class-choice-row .cls-btn i{
  border-color:color-mix(in srgb,var(--class-accent) 62%,#314a42);
  color:color-mix(in srgb,var(--class-accent) 75%,#fff0c4);
  background:color-mix(in srgb,var(--class-accent) 13%,#10201c);
  box-shadow:inset 0 0 0 3px rgba(3,9,11,.55),0 0 11px color-mix(in srgb,var(--class-accent) 15%,transparent);
}
.class-choice-row .cls-btn small{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600;line-height:1.1;color:#82958e}
.class-choice-row .cls-btn.sel{
  border-color:color-mix(in srgb,var(--class-accent) 72%,#708f7e);
  border-left-color:var(--class-accent);
  background:
    radial-gradient(circle at 31px 50%,color-mix(in srgb,var(--class-accent) 19%,transparent),transparent 43px),
    linear-gradient(110deg,color-mix(in srgb,var(--class-accent) 18%,#14211f),#0b1518 72%);
  box-shadow:inset 3px 0 0 var(--class-accent),0 0 14px color-mix(in srgb,var(--class-accent) 10%,transparent);
}
.class-choice-row .cls-btn.sel::before{
  content:"ACTIVE";
  position:absolute;
  right:6px;
  top:5px;
  color:color-mix(in srgb,var(--class-accent) 82%,#fff);
  font-family:"IBM Plex Sans",sans-serif;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
}
.creator-class-kit{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin-top:2px;
}
.creator-class-kit article{
  min-width:0;
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  align-items:start;
  gap:7px;
  padding:7px 8px;
  border:1px solid rgba(132,164,151,.13);
  border-left:2px solid var(--selected-class,#5ca37e);
  background:linear-gradient(105deg,color-mix(in srgb,var(--selected-class,#5ca37e) 7%,#101a1b),#090f13);
}
.creator-class-kit article>i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--selected-class,#5ca37e) 50%,#394a45);
  color:color-mix(in srgb,var(--selected-class,#5ca37e) 68%,#f6e8c4);
  font-family:"Cinzel",serif;
  font-size:.7rem;
  font-style:normal;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.creator-class-kit b{
  display:block;
  overflow:hidden;
  color:#dce4da;
  font-family:"Cinzel",serif;
  font-size:.66rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.creator-class-kit span{
  display:-webkit-box;
  margin-top:2px;
  overflow:hidden;
  color:#71837e;
  font-family:"IBM Plex Sans",sans-serif;
  font-size:10px;
  line-height:1.3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#status-card{
  border-left:3px solid var(--class-accent,#5ec18e);
  box-shadow:0 14px 30px rgba(0,0,0,.44),inset 3px 0 0 color-mix(in srgb,var(--class-accent,#5ec18e) 26%,transparent),inset 0 1px 0 rgba(218,233,213,.08);
}
#status-card::before{background:linear-gradient(90deg,var(--class-accent,#5ec18e) 0 58%,var(--realm-brass) 58% 72%,transparent 72%)}
#status-card .status-class-crest,.realm-menu-panel .menu-class-crest{
  border-color:color-mix(in srgb,var(--class-accent,#5ec18e) 68%,#8f9368);
  color:color-mix(in srgb,var(--class-accent,#5ec18e) 66%,#fff1bc);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--class-accent,#5ec18e) 16%,transparent),0 3px 10px rgba(0,0,0,.35),0 0 10px color-mix(in srgb,var(--class-accent,#5ec18e) 13%,transparent);
}
#status-card .status-class-name{color:color-mix(in srgb,var(--class-accent,#5ec18e) 67%,#9db6aa)}

.sk[data-class="priest"]{--skill-ink:#ddc46d}
.sk[data-class="slayer"]{--skill-ink:#d05260}
.sk[data-class="hunter"]{--skill-ink:#8dbb5b}

/* Priest: guided dawn, consecrated circle, seal, blessing. */
.sk[data-skill="dawnbolt"] .sk-icon::before{left:6px;top:3px;width:12px;height:12px;background:#f5dc79;box-shadow:0 0 7px #d7ad55;transform:rotate(45deg)}
.sk[data-skill="dawnbolt"] .sk-icon::after{left:10px;top:-1px;width:3px;height:24px;background:#fff0a4;box-shadow:-8px 10px 0 -1px #d8b75b,8px 10px 0 -1px #d8b75b;transform:rotate(45deg)}
.sk[data-skill="sanctuary"] .sk-icon::before{inset:1px;border:2px solid #e9cf74;border-radius:50%;box-shadow:inset 0 0 5px rgba(255,223,116,.45),0 0 5px rgba(255,223,116,.35)}
.sk[data-skill="sanctuary"] .sk-icon::after{left:9px;top:5px;width:5px;height:14px;background:#fff1a0;box-shadow:-5px 5px 0 -1px #fff1a0,5px 5px 0 -1px #fff1a0}
.sk[data-skill="exorcism"] .sk-icon::before{left:4px;top:0;width:14px;height:21px;border:2px solid #d8b961;background:linear-gradient(180deg,#f2df9a22,#9c733536);clip-path:polygon(0 0,100% 0,100% 82%,70% 100%,50% 84%,30% 100%,0 82%)}
.sk[data-skill="exorcism"] .sk-icon::after{left:9px;top:3px;width:3px;height:14px;background:#fff0a2;box-shadow:-4px 5px 0 -1px #e8ce72,4px 5px 0 -1px #e8ce72}
.sk[data-skill="benediction"] .sk-icon::before{left:2px;top:6px;width:19px;height:13px;border:2px solid #f0d87e;border-top:0;clip-path:polygon(0 0,25% 45%,50% 0,75% 45%,100% 0,88% 100%,12% 100%);background:#b68a3555}
.sk[data-skill="benediction"] .sk-icon::after{left:8px;top:1px;width:7px;height:7px;border-radius:50%;background:#fff2ae;box-shadow:0 0 7px #e5bd55}

/* Slayer: heavy edge, blood ring, finisher, oath sigil. */
.sk[data-skill="nightrend"] .sk-icon::before{left:8px;top:-1px;width:6px;height:24px;background:linear-gradient(90deg,#5b303d,#f07778 48%,#7d3445);clip-path:polygon(50% 0,100% 16%,78% 100%,22% 100%,0 16%);transform:rotate(38deg);box-shadow:0 0 5px #b63d50}
.sk[data-skill="nightrend"] .sk-icon::after{left:1px;top:15px;width:20px;height:3px;background:#d9a76c;transform:rotate(38deg)}
.sk[data-skill="bloodstorm"] .sk-icon{border:2px solid #d24d5d;border-right-color:#f3a06f;border-radius:50%;box-shadow:0 0 6px rgba(203,57,76,.5)}
.sk[data-skill="bloodstorm"] .sk-icon::before{right:-3px;top:1px;border-left:7px solid #f28a70;border-top:4px solid transparent;border-bottom:4px solid transparent}
.sk[data-skill="bloodstorm"] .sk-icon::after{left:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#7e1f38}
.sk[data-skill="execution"] .sk-icon::before{left:8px;top:0;width:8px;height:19px;background:linear-gradient(90deg,#7c3444,#efa1a0,#76283d);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);transform:rotate(-18deg)}
.sk[data-skill="execution"] .sk-icon::after{left:1px;bottom:1px;width:21px;height:5px;border-top:2px solid #ef6f71;border-bottom:2px solid #7d263e;transform:skewX(-25deg)}
.sk[data-skill="bloodoath"] .sk-icon::before{left:5px;top:0;width:13px;height:20px;border-radius:55% 45% 58% 42%;background:linear-gradient(145deg,#ef7375,#7e1739 70%);clip-path:polygon(50% 0,100% 55%,78% 100%,22% 100%,0 55%);box-shadow:0 0 6px rgba(209,54,78,.55)}
.sk[data-skill="bloodoath"] .sk-icon::after{left:9px;top:7px;width:5px;height:8px;border:1px solid #ffc4aa;border-radius:50%}

/* Hunter: bolt sight, thorn trap, spirit flock, retreating vault. */
.sk[data-skill="predatorbolt"] .sk-icon::before{inset:2px;border:2px solid #9fc96a;border-radius:50%;box-shadow:0 0 5px rgba(134,190,84,.4)}
.sk[data-skill="predatorbolt"] .sk-icon::after{left:0;top:10px;width:22px;height:3px;background:#e5ce72;clip-path:polygon(0 33%,72% 33%,72% 0,100% 50%,72% 100%,72% 67%,0 67%)}
.sk[data-skill="briarsnare"] .sk-icon::before{inset:2px;border:3px dotted #8fbd5c;border-radius:50%;transform:rotate(14deg)}
.sk[data-skill="briarsnare"] .sk-icon::after{left:9px;top:4px;width:5px;height:15px;background:#d5d66e;clip-path:polygon(50% 0,100% 45%,67% 45%,100% 100%,0 55%,33% 55%,0 0)}
.sk[data-skill="spiritflock"] .sk-icon::before{left:1px;top:5px;width:9px;height:8px;border-top:3px solid #8ad1ae;border-left:3px solid #8ad1ae;transform:rotate(35deg);box-shadow:7px -6px 0 -1px #b7e5bc,13px 3px 0 -1px #71b99a}
.sk[data-skill="spiritflock"] .sk-icon::after{right:1px;bottom:3px;width:8px;height:6px;border-right:2px solid #d8e5a0;border-bottom:2px solid #d8e5a0;transform:rotate(-25deg)}
.sk[data-skill="wildvault"] .sk-icon::before{left:2px;top:3px;width:16px;height:7px;border-top:3px solid #8dca72;border-right:3px solid #8dca72;transform:skewX(-30deg) rotate(-16deg)}
.sk[data-skill="wildvault"] .sk-icon::after{left:4px;top:13px;width:17px;height:5px;border-top:2px solid #d7dc81;border-right:2px solid #d7dc81;transform:skewX(-30deg) rotate(8deg)}

#auto-battle-toggle{--menu-ink:#bd5d50}
#auto-battle-toggle[aria-checked="true"]{border-color:#d16859;border-left-color:#ef7563;background:linear-gradient(110deg,rgba(83,31,33,.78),rgba(10,24,24,.96));box-shadow:inset 3px 0 0 #d85f52,0 0 15px rgba(201,70,63,.12)}
#auto-battle-toggle[aria-checked="true"] .menu-rune{border-color:#db7363;background:#30191b;box-shadow:0 0 12px rgba(220,86,72,.22)}
#auto-battle-toggle[aria-checked="true"] em{border-color:#b85b50;color:#f1a18e}
.menu-rune.battle::before{left:8px;top:4px;width:4px;height:24px;background:linear-gradient(90deg,#725b58,#e2d5bd,#75605d);clip-path:polygon(50% 0,100% 12%,72% 80%,100% 85%,100% 93%,63% 91%,63% 100%,37% 100%,37% 91%,0 93%,0 85%,28% 80%,0 12%);transform:rotate(39deg)}
.menu-rune.battle::after{right:8px;top:4px;width:4px;height:24px;background:linear-gradient(90deg,#725b58,#e2d5bd,#75605d);clip-path:polygon(50% 0,100% 12%,72% 80%,100% 85%,100% 93%,63% 91%,63% 100%,37% 100%,37% 91%,0 93%,0 85%,28% 80%,0 12%);transform:rotate(-39deg)}
.npc-service-card>i.battle::before,.npc-service-card>i.battle::after{content:"";position:absolute;left:18px;top:5px;width:4px;height:29px;background:linear-gradient(90deg,#75534f,#dbcba9,#75534f);clip-path:polygon(50% 0,100% 14%,70% 80%,100% 84%,100% 91%,65% 90%,65% 100%,35% 100%,35% 90%,0 91%,0 84%,30% 80%,0 14%);transform:rotate(40deg)}
.npc-service-card>i.battle::after{transform:rotate(-40deg)}

@media(max-width:720px){
  .creator-body,.creator-opts,.creator-tabs,.creator-panel{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  .class-choice-row .class-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .class-choice-row .cls-btn{min-height:58px}
  .creator-class-kit{grid-template-columns:1fr}
  .creator-class-kit article{min-height:46px}
}
@media(max-width:370px){
  .class-choice-row .class-pick{grid-template-columns:1fr}
  .creator-class-kit span{font-size:10px}
}

/* Real-time Auto Battle status and water-edge fishing mode chooser. */
.auto-battle-chip{
  --auto-ink:#df6958;
  position:absolute;
  left:50%;
  bottom:92px;
  z-index:22;
  min-width:230px;
  min-height:44px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  text-align:left;
  border:1px solid #7d403c;
  border-left:3px solid var(--auto-ink);
  background:linear-gradient(105deg,rgba(66,24,27,.95),rgba(8,18,20,.96));
  color:#d9dfd6;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  box-shadow:0 13px 30px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,213,184,.06);
  transform:translateX(-50%);
  pointer-events:auto;
}
.auto-battle-chip:hover{border-color:#d76a5b;background:linear-gradient(105deg,rgba(92,31,34,.98),rgba(10,26,25,.98))}
.auto-battle-chip>i{position:relative;width:28px;height:28px;border:1px solid #823f3d;background:#261719}
.auto-battle-chip>i::before,.auto-battle-chip>i::after{content:"";position:absolute;left:12px;top:3px;width:4px;height:22px;background:linear-gradient(90deg,#735c58,#f0dfc5,#725b57);clip-path:polygon(50% 0,100% 12%,72% 78%,100% 83%,100% 91%,64% 90%,64% 100%,36% 100%,36% 90%,0 91%,0 83%,28% 78%,0 12%);transform:rotate(40deg)}
.auto-battle-chip>i::after{transform:rotate(-40deg)}
.auto-battle-chip>span{min-width:0}.auto-battle-chip small{display:block;color:#dc6f61;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.11em}.auto-battle-chip b{display:block;overflow:hidden;margin-top:2px;color:#eee1c9;font-family:"Cinzel",serif;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.auto-battle-chip kbd{padding:4px 5px;border:1px solid #744039;background:#190f12;color:#c98274;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800}

.fishing-mode-panel{width:min(720px,94%);padding:0;overflow:hidden;border-color:rgba(78,158,177,.36);background:linear-gradient(160deg,rgba(12,27,32,.99),rgba(6,13,18,.995))}
.fishing-mode-panel>.panel-head{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:12px;margin:0;padding:14px 18px;background:linear-gradient(90deg,rgba(34,98,112,.34),rgba(14,37,40,.18),transparent 72%)}
.fishing-mode-hero{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:15px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 70px 45px,rgba(87,190,206,.13),transparent 92px),linear-gradient(105deg,rgba(18,52,61,.4),rgba(8,19,24,.74))}
.fishing-mode-water{position:relative;width:110px;height:70px;overflow:hidden;border-bottom:3px solid #3b7884;background:linear-gradient(180deg,#132236 0 57%,#1c586a 58% 64%,#123d4c 65%);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.fishing-mode-water::after{content:"";position:absolute;left:-8px;right:-8px;bottom:7px;height:13px;background:repeating-radial-gradient(ellipse at center,transparent 0 9px,rgba(125,216,226,.28) 10px 11px,transparent 12px 18px)}
.fishing-mode-water>i{position:absolute;left:30px;top:8px;width:4px;height:48px;background:linear-gradient(90deg,#573823,#d3a45c,#573823);transform:rotate(28deg);transform-origin:bottom}
.fishing-mode-water>b{position:absolute;left:55px;top:11px;width:35px;height:39px;border-top:1px solid #dbe9de;border-right:1px solid #dbe9de;border-radius:0 35px 0 0}
.fishing-mode-water>span{position:absolute;left:84px;top:47px;width:7px;height:10px;border-radius:50%;background:linear-gradient(#f1e9cb 0 44%,#e06053 45%);z-index:2}
.fishing-mode-hero>div:last-child>span{display:block;color:#6eb8c6;font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.1em}.fishing-mode-hero strong{display:block;margin:3px 0;color:#e7dfc3;font-family:"Cinzel",serif;font-size:.92rem}.fishing-mode-hero p{margin:0;color:#7f918d;font-family:"IBM Plex Sans",sans-serif;font-size:10px;line-height:1.4}
.fishing-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px 18px}
.fishing-mode-grid>button{min-width:0;min-height:126px;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:11px;padding:12px;text-align:left;border:1px solid rgba(92,155,151,.24);border-left:3px solid var(--mode-ink);background:linear-gradient(125deg,color-mix(in srgb,var(--mode-ink) 10%,#132021),#081216 74%);color:#859791;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.fishing-mode-grid>button:first-child{--mode-ink:#63c99a}.fishing-mode-grid>button:last-child{--mode-ink:#62b5c4}.fishing-mode-grid>button:hover{border-color:var(--mode-ink);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.fishing-mode-grid>button>i{position:relative;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--mode-ink) 58%,#354b45);background:color-mix(in srgb,var(--mode-ink) 10%,#0d191a)}
.fishing-mode-grid>button>i.manual::before{content:"";position:absolute;left:21px;top:7px;width:4px;height:33px;background:linear-gradient(90deg,#5b3924,#d8aa63,#5b3924);transform:rotate(24deg)}
.fishing-mode-grid>button>i.manual::after{content:"";position:absolute;left:9px;bottom:7px;width:29px;height:9px;border-bottom:2px solid #76d5c9;border-radius:50%}
.fishing-mode-grid>button>i.auto::before{content:"";position:absolute;inset:9px;border:2px solid #6fc1ce;border-radius:50%;box-shadow:inset 0 0 0 4px #12272b}
.fishing-mode-grid>button>i.auto::after{content:"";position:absolute;left:22px;top:13px;width:3px;height:12px;background:#e9d98b;box-shadow:5px 8px 0 -1px #e9d98b;transform:rotate(-18deg);transform-origin:bottom}
.fishing-mode-grid small{display:block;color:var(--mode-ink);font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.1em}.fishing-mode-grid strong{display:block;margin:3px 0;color:#e4e3d4;font-family:"Cinzel",serif;font-size:.82rem}.fishing-mode-grid p{margin:0;color:#71847f;font-family:"IBM Plex Sans",sans-serif;font-size:10px;line-height:1.35}.fishing-mode-grid kbd{grid-column:1/-1;justify-self:end;margin-top:-4px;padding:4px 6px;border:1px solid color-mix(in srgb,var(--mode-ink) 52%,#354943);background:#081113;color:color-mix(in srgb,var(--mode-ink) 72%,#d9e4d8);font-family:"IBM Plex Sans",sans-serif;font-size:8px;font-weight:800;letter-spacing:.08em}
.fishing-mode-note{display:flex;align-items:center;gap:7px;margin:0;padding:9px 18px 12px;border-top:1px solid rgba(255,255,255,.04);color:#58716d;font-family:"IBM Plex Sans",sans-serif;font-size:9px}.fishing-mode-note i{width:7px;height:7px;flex:0 0 7px;border:1px solid #60aeb9;transform:rotate(45deg)}

@media(max-width:760px){
  .auto-battle-chip{bottom:72px;min-width:214px;min-height:42px;padding:5px 7px}.auto-battle-chip>i{width:26px;height:26px}.auto-battle-chip>i::before,.auto-battle-chip>i::after{left:11px;height:20px}.auto-battle-chip b{font-size:.62rem}.auto-battle-chip kbd{font-size:7px}
  .fishing-mode-panel{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}.fishing-mode-panel>.panel-head{grid-template-columns:minmax(0,1fr) 44px;padding:11px 12px}.fishing-mode-panel .panel-kicker{display:none}.fishing-mode-hero{grid-template-columns:76px minmax(0,1fr);gap:9px;padding:9px 11px}.fishing-mode-water{width:72px;height:58px}.fishing-mode-water>i{left:19px;height:40px}.fishing-mode-water>b{left:40px;width:25px;height:32px}.fishing-mode-water>span{left:61px;top:40px}.fishing-mode-grid{grid-template-columns:1fr;gap:6px;padding:9px 10px}.fishing-mode-grid>button{min-height:93px;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:9px}.fishing-mode-grid>button>i{width:40px;height:40px}.fishing-mode-grid>button>i.manual::before{left:18px;top:5px;height:29px}.fishing-mode-grid>button>i.manual::after{left:7px;width:25px}.fishing-mode-grid>button>i.auto::before{inset:7px}.fishing-mode-grid>button>i.auto::after{left:18px;top:10px}.fishing-mode-grid kbd{grid-column:auto;margin:0}.fishing-mode-note{padding:8px 10px max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:390px){.fishing-mode-hero p,.fishing-mode-grid p{display:none}.fishing-mode-grid>button{min-height:75px}.fishing-mode-note{font-size:8px}}

/* ===== LANDING + ARSENAL POLISH ==========================================
   The gate reads like a title screen and inventory weapons read like gear,
   not text cards. This is intentionally a late override so it does not
   disturb any existing menu hooks or canvas combat logic. */
#boot .boot-card{
  width:min(560px,92vw);
  padding:2rem 2.2rem 1.35rem;
  background:
    linear-gradient(90deg,rgba(115,194,148,.045) 1px,transparent 1px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,rgba(8,20,21,.95),rgba(4,10,14,.985));
  background-size:18px 18px,auto,auto;
  box-shadow:0 34px 90px rgba(0,0,0,.76),inset 0 0 0 1px rgba(211,232,204,.045),inset 0 -5px 0 rgba(52,125,91,.16);
}
#boot .boot-card::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,#6cc69a 22%,#d3b766 50%,#6cc69a 78%,transparent);
  opacity:.35;
}
#boot .boot-world-note{max-width:190px;margin-bottom:7vh;border-left:1px solid rgba(105,197,151,.48);}
#boot .boot-world-note p{max-width:174px;line-height:1.45}
#boot .boot-build-note{border-right:1px solid rgba(105,197,151,.28);padding-right:12px;text-align:right;}
#boot .boot-load-row{border-top:1px solid rgba(111,176,143,.12);padding-top:8px}
#boot .boot-card #btn-start{min-height:48px;letter-spacing:.07em}

#login .login-shell{width:min(1120px,94vw);grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);gap:clamp(28px,5vw,76px)}
#login .realm-showcase{padding-top:38px;padding-bottom:26px}
#login .realm-showcase::after{
  content:"REALM 01  /  VERDANT TRAIL";
  position:absolute;left:0;bottom:5px;
  color:#52776b;font: .34rem "Press Start 2P",monospace;letter-spacing:.12em;
}
#login .realm-showcase h1{max-width:520px;font-size:clamp(2.5rem,4.6vw,4.6rem);letter-spacing:.015em}
#login .realm-showcase>p{max-width:440px;font-size:.78rem;line-height:1.55;color:#91aaa0}
#login .login-card{
  padding:1.8rem 1.55rem 1.45rem;
  background:
    repeating-linear-gradient(0deg,rgba(206,230,206,.014) 0 1px,transparent 1px 5px),
    linear-gradient(160deg,rgba(12,27,27,.98),rgba(5,12,16,.99));
  box-shadow:0 32px 78px rgba(0,0,0,.7),inset 3px 0 0 rgba(101,195,146,.13),inset 0 -4px 0 rgba(90,148,105,.12);
}
#login .login-sigil{width:38px;height:38px;margin-bottom:17px;background:#10231e;border-color:#5b9e78;box-shadow:0 0 22px rgba(83,196,139,.14)}
#login .login-card .pixel-h2{font-size:.9rem!important;letter-spacing:.11em}
#login .login-card .login-sub{font-size:.68rem;line-height:1.45;max-width:290px}
.main-menu-choices{gap:6px}
.menu-choice{
  min-height:59px;
  grid-template-columns:36px minmax(0,1fr) 16px;
  padding:9px 10px;
  border-left:2px solid rgba(102,192,145,.45);
  background:linear-gradient(100deg,rgba(25,60,48,.72),rgba(7,17,21,.94));
  box-shadow:inset 0 1px 0 rgba(225,245,218,.035);
}
.menu-choice:hover,.menu-choice:focus-visible{transform:translateX(5px);box-shadow:inset 3px 0 #d9b867,0 8px 18px rgba(0,0,0,.25)}
.menu-choice-icon{width:29px;height:29px;transform:none;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);background:#0a1919;box-shadow:inset 0 0 0 2px rgba(87,157,117,.12)}
.menu-choice-icon::first-letter{transform:none}
.menu-choice b{font-size:.4rem}
.menu-choice small{font-size:.92rem;color:#83a399}
.menu-choice>strong{font-family:"VT323",monospace;font-size:1.45rem}
.wallet-choice{border-left-color:#c6a14f;background:linear-gradient(100deg,rgba(77,60,28,.42),rgba(8,18,22,.95))}
.server-picker{margin-top:.85rem}

#panel-inv{
  width:min(650px,94%);
  padding:0;
  overflow:hidden;
  border-radius:3px;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  background:linear-gradient(155deg,rgba(13,29,29,.99),rgba(5,12,16,.995));
  border-color:rgba(111,185,149,.28);
  box-shadow:0 0 0 100vmax rgba(2,7,9,.5),0 32px 88px rgba(0,0,0,.74),inset 0 -4px 0 rgba(62,132,96,.12);
}
#panel-inv .panel-head{margin:0;padding:14px 17px;background:linear-gradient(90deg,rgba(41,103,76,.25),transparent 70%);border-bottom:1px solid rgba(142,205,173,.12)}
#panel-inv .panel-head h2{font-size:1rem;letter-spacing:.1em}
#inv-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 14px 14px}
.inv-cell.weapon-card{
  min-height:126px;
  aspect-ratio:auto;
  padding:6px 5px 7px;
  justify-content:flex-start;
  border-color:rgba(172,188,171,.14);
  background:linear-gradient(160deg,rgba(27,45,42,.72),rgba(7,15,19,.96));
  box-shadow:inset 0 1px 0 rgba(236,246,224,.035);
}
.inv-cell.weapon-card:hover{transform:translateY(-2px);border-color:rgba(109,213,163,.7);background:linear-gradient(160deg,rgba(34,76,57,.8),rgba(7,17,20,.98));box-shadow:0 10px 20px rgba(0,0,0,.35),inset 0 0 0 1px rgba(109,213,163,.12)}
.inv-cell.weapon-card.equipped{border-color:#d6b75d;box-shadow:inset 0 0 0 1px rgba(214,183,93,.34),0 0 16px rgba(214,183,93,.14)}
.inv-weapon-frame{position:relative;width:100%;height:71px;display:grid;place-items:center;margin-bottom:4px;overflow:hidden;border:1px solid rgba(125,181,151,.16);background:radial-gradient(circle at 50% 48%,rgba(99,180,143,.15),transparent 62%),linear-gradient(180deg,rgba(3,12,15,.16),rgba(3,9,12,.8));}
.inv-weapon-frame::before{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,#7f9e83,transparent);opacity:.35}
.inv-weapon-art{width:64px!important;height:64px!important;margin:0!important;filter:drop-shadow(0 4px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(110,211,161,.18))}
.inv-cell.weapon-card .inv-name{max-width:100%;overflow:hidden;color:#ebe0bc;font-family:"Cinzel",serif;font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}
.inv-cell.weapon-card .inv-weapon-stat{display:block;margin-top:3px;color:#77ad94;font: .56rem "VT323",monospace;letter-spacing:.05em}
.inv-cell.weapon-card.rare-weapon .inv-weapon-frame{border-color:rgba(218,180,77,.4);background:radial-gradient(circle at 50% 48%,rgba(213,162,62,.23),transparent 63%),linear-gradient(180deg,rgba(40,28,12,.28),rgba(12,12,12,.86))}
.inv-cell.weapon-card.rare-weapon .inv-name{color:#f0cc72}
#panel-inv .panel-foot{margin:0;padding:9px 15px;background:rgba(4,10,13,.7);border-top:1px solid rgba(142,205,173,.1);font-size:.68rem}

/* Skill tray: treat each slot like a small engraved weapon plate. */
#skillbar{padding-top:14px}
.sk{height:62px;border-top:2px solid color-mix(in srgb,var(--skill-ink,#6cad90) 62%,#314a42);background:linear-gradient(145deg,rgba(30,49,48,.95),rgba(6,14,18,.98));box-shadow:inset 0 1px 0 rgba(237,247,224,.08),inset 0 -3px 0 color-mix(in srgb,var(--skill-ink,#6cad90) 16%,transparent),0 8px 18px rgba(0,0,0,.22)}
.sk::after{content:"";position:absolute;right:4px;top:4px;width:4px;height:4px;background:var(--skill-ink,#6cad90);box-shadow:0 0 7px color-mix(in srgb,var(--skill-ink,#6cad90) 75%,transparent);opacity:.8}
.sk-icon{width:26px;height:26px;transform:scale(1.08);filter:drop-shadow(0 2px 1px rgba(0,0,0,.8)) drop-shadow(0 0 6px color-mix(in srgb,var(--skill-ink,#6cad90) 40%,transparent))}
.sk-key{color:#d8c580;border-color:rgba(216,197,128,.3)}
.sk-name{font-size:.72rem;letter-spacing:.05em}

@media(max-width:760px){
  #login .login-shell{width:100%;}.login-card{padding:1.2rem 1rem 1rem}.realm-showcase::after{display:none}
  #panel-inv{width:calc(100% - 12px)}#inv-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:9px 10px 11px;gap:6px}.inv-cell.weapon-card{min-height:112px}.inv-weapon-frame{height:61px}.inv-weapon-art{width:57px!important;height:57px!important}.inv-cell.weapon-card .inv-name{font-size:.52rem}.inv-cell.weapon-card .inv-weapon-stat{font-size:.52rem}
  #skillbar{padding-top:5px}.sk{height:49px}.sk-icon{width:21px;height:21px;transform:scale(.92)}.sk-name{font-size:.55rem}
}
@media(max-width:380px){#inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inv-cell.weapon-card{min-height:116px}.menu-choice small{font-size:.84rem}}

/* ===== PIXEL RELIC UI SYSTEM ==============================================
   Final visual pass: the menu keeps the bright title-screen silhouette while
   game panels use one readable parchment / wood / moss language. The canvas
   remains visible behind every surface, so this is a frame system rather than
   a stack of unrelated dark cards. */
.menu-logo{
  display:block;
  width:min(330px,92%);
  max-height:112px;
  object-fit:contain;
  image-rendering:pixelated;
  margin:-4px auto 10px;
  filter:drop-shadow(0 5px 0 #141d1b) drop-shadow(0 0 14px rgba(227,186,79,.22));
}
#login .login-card{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),
    linear-gradient(160deg,#214d43 0%,#12332f 53%,#0b211f 100%);
  border:3px solid #6f4832;
  box-shadow:0 0 0 2px #b57d4d,0 22px 70px rgba(0,0,0,.62),inset 0 0 0 2px rgba(228,207,142,.13);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
#login .login-card::after{border-color:rgba(238,201,104,.55)}
#login .login-sigil{background:#e0bd70;border-color:#70472e;color:#203b31;box-shadow:inset 0 0 0 4px #f3db9c,0 3px 0 #573622}
#login .login-sigil span{color:#254437;text-shadow:1px 1px 0 #f8e5a9}
#login .login-step{color:#f2dda0}
#login .login-card .pixel-h2{color:#f6e9b6!important;text-shadow:2px 2px 0 #17352f}
#login .login-card .login-sub{color:#b7d2b1}
.main-menu-choices{margin-top:1rem}
.menu-choice{
  min-height:58px;
  border:3px solid #734a35;
  border-bottom-width:5px;
  border-radius:0;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:linear-gradient(180deg,#d39467,#ad654e)!important;
  box-shadow:inset 0 2px 0 #efbd83,inset 0 -3px 0 rgba(86,48,39,.3),0 4px 0 #402a28;
  color:#271e20;
}
.menu-choice:hover,.menu-choice:focus-visible{transform:translateY(-2px) translateX(2px);border-color:#f4cf83;background:linear-gradient(180deg,#e7aa73,#c87558)!important;box-shadow:inset 0 2px 0 #ffe3a4,inset 0 -3px 0 rgba(86,48,39,.26),0 6px 0 #402a28;outline:none}
.menu-choice-icon{width:30px;height:30px;background:#346c59;border:2px solid #d4a45f;color:#f9e4a3;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);box-shadow:inset 0 0 0 2px #21473d,0 2px 0 #60402d}
.menu-choice b{color:#2f2722;text-shadow:1px 1px 0 rgba(255,214,157,.55);font-size:.43rem}
.menu-choice small{color:#593e38}
.menu-choice>strong{color:#fff0bd;text-shadow:2px 2px 0 #6b4030}
.wallet-choice{border-color:#755032;background:linear-gradient(180deg,#c98d59,#986041)!important}
.wallet-choice .menu-choice-icon{background:#7a5a35}
.server-picker{padding:9px 10px;background:rgba(9,31,29,.5);border:2px solid rgba(197,161,89,.5);border-radius:0}
.server-picker-head span{color:#f3d58b}.server-picker-head small{color:#a4c7a2}
.server-picker-list button{border-radius:0!important;border-color:#557d62!important;background:#214d3d!important;color:#ecedbf!important}
.server-picker-list button.selected{background:#5fae79!important;color:#102d23!important;border-color:#e6ca7a!important}

/* Shared parchment frame for every in-game panel. */
:root{
  --ui-paper:#f0d9a4;
  --ui-paper-deep:#d3ad73;
  --ui-paper-shadow:#b47c4e;
  --ui-wood:#6f4633;
  --ui-wood-hi:#a66c43;
  --ui-moss:#4ea978;
  --ui-moss-dark:#234f3c;
  --ui-ink:#26362e;
}
.panel:not(.level-ceremony):not(.death-panel){
  color:var(--ui-ink)!important;
  border:3px solid var(--ui-wood)!important;
  border-radius:0!important;
  background:
    repeating-linear-gradient(0deg,rgba(100,65,35,.035) 0 1px,transparent 1px 5px),
    linear-gradient(160deg,var(--ui-paper) 0%,#e9cb91 100%)!important;
  box-shadow:0 0 0 2px var(--ui-wood-hi),0 24px 60px rgba(0,0,0,.58),inset 0 0 0 2px rgba(255,245,194,.45)!important;
}
.panel:not(.level-ceremony):not(.death-panel)>.panel-head,
.panel:not(.level-ceremony):not(.death-panel) .panel-head{
  margin:0!important;
  padding:11px 14px!important;
  min-height:48px;
  background:linear-gradient(180deg,#67bc86,#45996b)!important;
  border-bottom:3px solid var(--ui-wood)!important;
  box-shadow:inset 0 2px 0 rgba(219,246,174,.48),inset 0 -2px 0 rgba(34,77,54,.22);
}
.panel:not(.level-ceremony):not(.death-panel) .panel-head h2,
.panel:not(.level-ceremony):not(.death-panel) h2{color:var(--ui-ink)!important;text-shadow:1px 1px 0 rgba(239,218,160,.7)!important;font-family:"VT323",monospace;font-size:1.35rem;letter-spacing:.05em;text-transform:uppercase}
.panel:not(.level-ceremony):not(.death-panel) .panel-kicker{color:#f3f2b9!important;font-family:"Press Start 2P",monospace;font-size:.34rem}
.panel:not(.level-ceremony):not(.death-panel) .panel-close{width:28px;height:28px;background:#ecd296!important;border:2px solid var(--ui-wood)!important;border-radius:0!important;color:var(--ui-ink)!important;box-shadow:0 2px 0 #523526}
.panel:not(.level-ceremony):not(.death-panel) .panel-close:hover{background:#fff0bd!important;color:#4c2e2a!important}
.panel:not(.level-ceremony):not(.death-panel) p,
.panel:not(.level-ceremony):not(.death-panel) small,
.panel:not(.level-ceremony):not(.death-panel) label{color:#536653}
.panel:not(.level-ceremony):not(.death-panel) .panel-foot{margin:0!important;padding:8px 14px!important;border-top:2px solid var(--ui-wood)!important;color:#526251;background:rgba(183,133,79,.2)}
.panel:not(.level-ceremony):not(.death-panel) .panel-foot b{color:#7c492e}

/* The world-menu cards, forge rows, fish book and inventory all share the
   same inset wooden tile treatment. */
.realm-menu-overview,.collection-summary,.companion-hero,.forge-guide,.forge-summary,.save-progress-card{background:rgba(185,135,78,.2)!important;border-color:rgba(111,70,44,.45)!important}
.realm-menu-grid,.fish-collection-grid,.companion-grid,#inv-grid,.craft-list,#quest-list,.shop-list,.cooking-grid{background:rgba(175,126,74,.24)!important}
.realm-menu-grid>button,.duel-card,.craft-row,.quest-row,.shop-row,.fish-card,.companion-card,.inv-cell,.save-progress-card,.fishing-mode-grid>button,.afk-stat,.cooking-card{
  border:2px solid #8a5a3f!important;
  border-radius:0!important;
  background:linear-gradient(150deg,#efd8a3,#d9b77c)!important;
  color:var(--ui-ink)!important;
  box-shadow:inset 0 2px 0 rgba(255,245,194,.58),inset 0 -3px 0 rgba(117,76,47,.15),0 2px 0 #82563d;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
}
.realm-menu-grid>button:hover,.fish-card:hover,.companion-card.owned:hover,.inv-cell:hover,.craft-row:hover{background:linear-gradient(150deg,#f7e3b4,#e2c487)!important;border-color:#4e936b!important;transform:translateY(-1px)}
.realm-menu-grid>button b,.craft-info h3,.shop-item-copy h3,.fish-card strong,.companion-card strong,.inv-cell .inv-name,.save-progress-card strong{color:var(--ui-ink)!important;text-shadow:1px 1px 0 rgba(255,237,179,.55)}
.realm-menu-grid>button small,.craft-info p,.shop-item-copy p,.fish-card>small,.companion-card small,.save-progress-card p{color:#5d6d59!important}
.realm-menu-grid>button em,.craft-badge,.menu-rune,.craft-rune{background:#387c5d!important;border:2px solid #315d46!important;color:#f4e2a1!important;border-radius:0!important}
.craft-group-title,.craft-step,.collection-summary>div:nth-child(2)>span{color:#6d422d!important}
.fish-card-art,.companion-hero-art,.inv-weapon-frame{background:rgba(90,152,107,.12)!important;border-color:#8e6b46!important}
.fish-card dl>div,.collection-summary dl>div{background:rgba(151,105,61,.18)!important;border:1px solid rgba(111,70,44,.34)!important}
.fish-card dt,.collection-summary dt{color:#6c6d52!important}.fish-card dd,.collection-summary dd{color:#354b3b!important}
.inv-cell.weapon-card{background:linear-gradient(150deg,#e3c88d,#caa66b)!important;border-color:#79503a!important}
.inv-cell.weapon-card .inv-weapon-stat{color:#466b51!important}
.inv-cell.weapon-card.equipped,.inv-cell.weapon-card.rare-weapon{border-color:#b17a35!important;box-shadow:inset 0 0 0 2px rgba(241,205,106,.42),0 3px 0 #6d4937!important}
.inv-cell.weapon-card .inv-weapon-frame{background:rgba(49,101,73,.15)!important}

/* Buttons read as green carved tabs, including small action controls. */
.panel:not(.level-ceremony):not(.death-panel) .pixel-btn,
.panel:not(.level-ceremony):not(.death-panel) .craft-btn,
.panel:not(.level-ceremony):not(.death-panel) .craft-equip,
.panel:not(.level-ceremony):not(.death-panel) .q-btn,
.panel:not(.level-ceremony):not(.death-panel) .trade-one,
.panel:not(.level-ceremony):not(.death-panel) .trade-five,
.panel:not(.level-ceremony):not(.death-panel) .shop-tab,
.panel:not(.level-ceremony):not(.death-panel) .eat-button,
.panel:not(.level-ceremony):not(.death-panel) .chat-compose button,
.panel:not(.level-ceremony):not(.death-panel) .fishing-mode-grid>button{
  border:2px solid #2d674a!important;
  border-bottom:4px solid #214a37!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#69c487,#489f6e)!important;
  color:#102d22!important;
  text-shadow:1px 1px 0 rgba(195,241,165,.45);
  box-shadow:inset 0 2px 0 rgba(226,255,194,.42),0 3px 0 #65432f!important;
}
.panel:not(.level-ceremony):not(.death-panel) button:active{transform:translateY(2px)}

/* HUD stays compact and dark enough to preserve contrast over the forest,
   but uses the same wood edge and square pixel corners as the panels. */
#status-card,#minimap-wrap,#chat-dock,#arrival-banner,#fishing-hud,#catch-card,#auto-battle-chip{
  border-radius:0!important;
  border-color:#8d5b3e!important;
  box-shadow:0 4px 0 #4c332c,0 14px 28px rgba(0,0,0,.34)!important;
}
#status-card,#chat-dock,#arrival-banner,#auto-battle-chip{background:linear-gradient(150deg,#204d3e,#14362f)!important}
#minimap-wrap{background:#6e4934!important;border:3px solid #be8d54!important;padding:4px}
#skillbar{border-radius:0!important;border:3px solid #704833!important;background:linear-gradient(180deg,#754b36,#4d332d)!important;box-shadow:0 5px 0 #2f2525,0 15px 30px rgba(0,0,0,.4)!important}
.sk{border-radius:0!important;border:2px solid #bc8954!important;background:linear-gradient(150deg,#ecd39b,#c89f66)!important;color:var(--ui-ink)!important;box-shadow:inset 0 2px 0 #fff0bb,0 2px 0 #3e2a29!important}
.sk-name,.sk-key{color:#2b4335!important;text-shadow:1px 1px 0 #f7df9f}.sk-key{border-color:#6c4934!important}
#chat-dock{border-width:3px!important}.chat-dock-copy strong{color:#f1d891!important}.chat-dock-copy small{color:#a8d5a4!important}

@media(max-width:760px){
  .menu-logo{width:min(270px,90%);max-height:78px;margin:-2px auto 7px}
  .panel:not(.level-ceremony):not(.death-panel)>.panel-head{padding:9px 11px!important;min-height:44px}
  .panel:not(.level-ceremony):not(.death-panel) .panel-head h2{font-size:1.12rem}
  #skillbar{border-width:2px!important}
  .sk{width:46px;height:46px}
}

/* ===== TITLE SCREEN + ARRIVAL SIGNOFF =====================================
   The first frame is intentionally a bright, daytime pixel title card. The
   old night gate made the logo and loading state feel like a developer modal;
   this gives it the same sky / meadow / salmon-slab silhouette as the menu
   reference while keeping the existing boot logic untouched. */
.realm-ui{font-family:"VT323","Courier New",monospace}
#boot{
  overflow:hidden;
  background:#63b8d1!important;
  color:#283d36;
}
#boot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:11;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}
#boot-fx{opacity:.2;mix-blend-mode:multiply}
.chronicle-scene{
  background:
    linear-gradient(180deg,#58b5d4 0 55%,#8fd0d0 56% 64%,#6dbd82 65% 100%)!important;
}
.chronicle-scene:before{
  z-index:2!important;
  background:
    radial-gradient(ellipse 230px 54px at 19% 23%,rgba(255,255,233,.78),transparent 68%),
    radial-gradient(ellipse 260px 62px at 78% 31%,rgba(255,255,239,.72),transparent 68%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px)!important;
}
.chronicle-scene:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:36%;
  z-index:3;
  background:
    linear-gradient(180deg,transparent 0 24%,rgba(44,122,78,.18) 25% 27%,transparent 28%),
    repeating-linear-gradient(105deg,transparent 0 11px,#4b9a67 12px 15px,transparent 16px 24px),
    linear-gradient(180deg,#79c27e,#4d9965 72%,#326b55);
  clip-path:polygon(0 14%,7% 6%,15% 13%,24% 2%,33% 15%,42% 7%,52% 16%,61% 4%,71% 13%,82% 5%,92% 14%,100% 7%,100% 100%,0 100%);
}
.scene-moon{
  left:auto!important;right:12%!important;top:11%!important;width:70px!important;height:70px!important;margin:0!important;
  border-radius:0!important;
  clip-path:polygon(22% 0,78% 0,78% 8%,92% 8%,92% 23%,100% 23%,100% 78%,92% 78%,92% 92%,78% 92%,78% 100%,22% 100%,22% 92%,8% 92%,8% 78%,0 78%,0 23%,8% 23%,8% 8%,22% 8%);
  background:#ffe89a!important;
  box-shadow:0 0 0 6px rgba(255,238,167,.15),0 0 34px rgba(255,234,145,.65)!important;
  filter:none!important;
}
.scene-moon:after{display:none}
.scene-ridge.ridge-far{bottom:30%!important;height:34%!important;background:#4e9c79!important;opacity:1!important}
.scene-ridge.ridge-near{bottom:24%!important;height:29%!important;background:#337b61!important}
.scene-torii{display:none}
.scene-lantern{display:none}
.scene-grass{height:25%!important;z-index:5!important;background:repeating-linear-gradient(105deg,transparent 0 8px,#3c8d5e 9px 12px,transparent 13px 19px),linear-gradient(180deg,transparent,#326b53 73%)!important}
#boot .title-scene{place-items:start center;padding-top:clamp(18px,5vh,54px)}
#boot .boot-layout{display:block;width:min(650px,94vw)!important}
#boot .boot-world-note,#boot .boot-build-note{display:none!important}
#boot .boot-card{
  width:100%!important;
  padding:0 22px 22px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
}
#boot .boot-card::before,#boot .boot-card::after{display:none!important}
#boot .boot-logo-wrap{width:min(560px,94vw)!important;margin:0 auto 5px!important;filter:drop-shadow(0 7px 0 rgba(51,58,47,.62)) drop-shadow(0 12px 12px rgba(34,82,73,.25))!important;animation:bootLogoFloat 5.4s steps(5,end) infinite}
#boot .boot-logo{image-rendering:pixelated!important}
#boot .boot-logo-wrap:after{background:linear-gradient(180deg,transparent,rgba(255,245,171,.3),transparent);mix-blend-mode:screen}
#boot .boot-kicker{font-family:"Press Start 2P",monospace!important;font-size:.45rem!important;letter-spacing:.14em!important;color:#fff7cc!important;text-shadow:2px 2px 0 #34725c;margin:.1rem 0 .5rem!important}
#boot .ritual-boot-lockup{margin:0 auto .5rem;padding:5px 9px;background:#2c775d;border:2px solid #e0c06b;color:#fff2bd;box-shadow:0 3px 0 #365344;font-size:.31rem}
#boot .ritual-boot-lockup img{width:17px;height:17px}
#boot .boot-sub{font-family:"Press Start 2P",monospace!important;font-size:.38rem!important;letter-spacing:.08em!important;color:#f9f2c8!important;text-shadow:1px 1px 0 #397155;margin:0 auto .7rem!important}
#boot .boot-sub i{width:4px;height:4px;background:#ffe08a}
#boot .boot-card .loading-bar-wrap{width:min(390px,92%);height:12px;margin:0 auto 4px;border:3px solid #52744f;background:#2b5e4c;padding:2px;box-shadow:0 3px 0 #315342}
#boot .boot-card .loading-bar{background:repeating-linear-gradient(90deg,#f1bd67 0 10px,#f6da8b 10px 17px,#e88961 17px 20px);box-shadow:none}
#boot .boot-load-row{width:min(390px,92%);margin:0 auto 12px;font-family:"VT323",monospace}
#boot .boot-load-row #boot-status{font-size:1rem;color:#fff5cf;text-shadow:1px 1px 0 #397155}
#boot .boot-load-row>span{font-family:"Press Start 2P",monospace;font-size:.28rem;color:#fff1bd}
#boot .boot-card #btn-start{
  width:min(390px,92%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#e79a6f,#b96356)!important;
  border:3px solid #713e39!important;border-bottom-width:6px!important;color:#2f2626!important;
  box-shadow:inset 0 2px 0 #f8c08b,0 5px 0 #4c3835!important;text-shadow:1px 1px 0 #f6c893;
}
#boot .boot-card #btn-start:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px)!important}
#boot .boot-card #btn-start kbd{border:2px solid #8e5146;color:#ffe8b4;background:#8b5047;font-family:"VT323",monospace;font-size:.8rem}
#boot .boot-card .boot-credit{margin-top:.75rem;font-family:"Press Start 2P",monospace;font-size:.25rem;letter-spacing:.08em;color:#fff0bf;text-shadow:1px 1px 0 #397155}

/* Welcome sign: one clear pixel heading, one readable instruction, no mixed
   serif/tech typography fighting for attention when the player spawns. */
#arrival-banner{
  width:min(520px,calc(100vw - 24px));
  grid-template-columns:54px minmax(0,1fr) 28px;
  padding:11px 13px;
  background:linear-gradient(160deg,#f3dda9,#dfbd7d)!important;
  border:3px solid #734a35!important;
  color:#2d3e32!important;
  box-shadow:0 0 0 2px #ba8150,0 14px 30px rgba(0,0,0,.45),inset 0 2px 0 #fff0bb!important;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
.arrival-sigil{width:43px;height:43px;transform:none!important;background:#4a9b70!important;border:3px solid #315f4a!important;box-shadow:inset 0 0 0 3px #9ad28c,0 3px 0 #5d3e31}
.arrival-sigil span{transform:none!important;font-family:"Press Start 2P",monospace!important;font-size:.86rem;color:#fff0b4!important;text-shadow:2px 2px 0 #315f4a}
.arrival-copy>span{font-family:"Press Start 2P",monospace!important;font-size:.31rem;color:#477b55!important;letter-spacing:.08em}
.arrival-copy>strong{font-family:"Press Start 2P",monospace!important;font-size:.64rem;line-height:1.35;color:#2e3a2e!important;text-shadow:1px 1px 0 #f7e0a6}
.arrival-copy>p{font-family:"VT323",monospace!important;font-size:1.1rem;color:#5a684e!important;line-height:1.12}
.arrival-actions{gap:8px;margin-top:7px}
.arrival-actions span{font-family:"Press Start 2P",monospace!important;font-size:.25rem;color:#4b6955!important}
.arrival-actions kbd{border:2px solid #876046;background:#f7df9d;color:#3b4c3b;font-family:"VT323",monospace;font-size:.68rem;box-shadow:0 2px 0 #714a37}
.arrival-banner>button{background:#f1d395!important;border:2px solid #734a35!important;color:#3b4c3b!important}

@media(max-width:720px){
  #boot .title-scene{padding-top:20px}
  #boot .boot-card{padding:0 10px 16px!important}
  #boot .boot-logo-wrap{width:min(470px,94vw)!important}
  #boot .boot-kicker{font-size:.35rem!important}
  #boot .ritual-boot-lockup{font-size:.25rem}
  #boot .boot-sub{font-size:.3rem!important}
  #boot .boot-load-row>span{display:none}
  #boot .boot-card #btn-start{font-size:.47rem!important}
  #arrival-banner{top:calc(206px + env(safe-area-inset-top));bottom:auto;grid-template-columns:36px minmax(0,1fr) 22px;gap:9px;padding:8px 9px}
  .arrival-sigil{width:32px;height:32px}
  .arrival-sigil span{font-size:.64rem!important}
  .arrival-copy>strong{font-size:.53rem}
  .arrival-copy>p{font-size:.9rem;line-height:1.08}
  .arrival-actions{gap:5px;flex-wrap:nowrap;overflow:hidden}
  .arrival-actions span{font-size:.2rem;white-space:nowrap}
}

/* Battle Realms ---------------------------------------------------------- */
#panel-realms.hidden{display:none!important}
.battle-realms-panel{
  --realm-panel:#0d1c1c;
  top:50%;left:50%;width:min(920px,calc(100vw - 34px));height:min(690px,calc(100dvh - 32px));
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;
  transform:translate(-50%,-50%);border:2px solid #8f7047;border-radius:2px;
  background:linear-gradient(155deg,rgba(17,38,35,.98),rgba(8,18,21,.99));
  box-shadow:0 24px 70px rgba(0,0,0,.72),inset 0 0 0 3px #192e29,inset 0 0 0 5px #503e2b;
}
.battle-realms-panel>.panel-head{border-bottom:2px solid #755837;background:linear-gradient(90deg,#214f3c,#173a32 60%,#291f1b)}
.battle-realms-intro{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid #355248;background:repeating-linear-gradient(135deg,rgba(105,177,140,.04) 0 2px,transparent 2px 7px)}
.battle-realms-intro>i{position:relative;width:48px;height:48px;border:2px solid #c7a963;transform:rotate(45deg);box-shadow:inset 0 0 0 4px #173229,0 0 18px rgba(103,210,164,.14)}
.battle-realms-intro>i::before,.battle-realms-intro>i::after{content:"";position:absolute;inset:9px;border:2px solid #62bb91}
.battle-realms-intro>i::after{inset:17px;background:#e0c878;border:0;box-shadow:0 0 8px #62bb91}
.battle-realms-intro span,.realm-gate-copy>small{color:#85c9a8;font-family:"Press Start 2P",monospace;font-size:.45rem;letter-spacing:.09em}
.battle-realms-intro strong{display:block;margin:4px 0;color:#f2dfad;font-family:"Cinzel",serif;font-size:1.15rem}
.battle-realms-intro p{color:#9fb0a9;font-size:.72rem;line-height:1.45}
.battle-realm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;padding:15px 18px 18px;overflow:auto}
.realm-gate-card{position:relative;display:grid;grid-template-rows:126px minmax(0,1fr) auto;min-width:0;overflow:hidden;border:2px solid #76543a;background:#14211f;box-shadow:inset 0 0 0 2px #0a1112,0 8px 22px rgba(0,0,0,.32)}
.realm-gate-card.active{border-color:#e0c16f;box-shadow:inset 0 0 0 2px #0a1112,0 0 22px rgba(224,193,111,.18)}
.realm-gate-art{position:relative;overflow:hidden;border-bottom:2px solid #4e3a2d;background:linear-gradient(#1e3031 0 54%,#293d35 54% 68%,#9a7650 68% 100%)}
.realm-gate-art::before{content:"";position:absolute;inset:auto 0 0;height:42px;background:repeating-linear-gradient(90deg,transparent 0 21px,rgba(40,25,19,.3) 21px 23px),repeating-linear-gradient(0deg,#886445 0 8px,#a98258 8px 15px)}
.realm-gate-art>i{position:absolute;left:50%;bottom:15px;width:152px;height:66px;transform:translateX(-50%);border:4px solid #4f3d32;border-radius:50%;background:radial-gradient(ellipse,#513733 0 35%,#24211f 36% 45%,#9c7651 46% 58%,transparent 59%);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.realm-gate-art>b,.realm-gate-art>span{position:absolute;bottom:18px;width:9px;height:74px;background:#563e31;box-shadow:inset 2px 0 #b08a56}
.realm-gate-art>b{left:24%}.realm-gate-art>span{right:24%}
.realm-gate-art>b::before,.realm-gate-art>span::before{content:"";position:absolute;left:-8px;top:0;width:25px;height:11px;background:#d7b05f;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}
.realm-gate-card.duel .realm-gate-art{background:linear-gradient(#2d2026 0 54%,#382b2b 54% 68%,#8a604b 68% 100%)}
.realm-gate-card.duel .realm-gate-art>i{border-color:#803d3d;background:radial-gradient(ellipse,#b74f48 0 5%,#3c1b21 6% 35%,#d0a35f 36% 39%,#292020 40% 48%,#98664e 49% 58%,transparent 59%);box-shadow:0 0 25px rgba(201,72,66,.32)}
.realm-gate-card.raid .realm-gate-art{background:linear-gradient(#161421 0 54%,#232132 54% 68%,#4a3e46 68% 100%)}
.realm-gate-card.raid .realm-gate-art>i{border-color:#6e4b7e;background:radial-gradient(ellipse,#f0783e 0 5%,#321828 6% 28%,#8c507d 29% 35%,#16131c 36% 49%,#654c5d 50% 58%,transparent 59%);box-shadow:0 0 30px rgba(195,74,55,.38)}
.realm-gate-copy{padding:14px 15px 12px}.realm-gate-copy h3{margin:5px 0 8px;color:#f0dfb5;font-family:"Cinzel",serif;font-size:1.05rem}.realm-gate-copy p{color:#a9b5ae;font-size:.72rem;line-height:1.48}.realm-gate-copy ul{display:grid;gap:5px;margin:11px 0 0;padding:0;list-style:none}.realm-gate-copy li{position:relative;padding-left:15px;color:#c6d3c9;font-size:.66rem}.realm-gate-copy li::before{content:"";position:absolute;left:0;top:4px;width:7px;height:7px;border:1px solid #c9aa62;transform:rotate(45deg)}
.realm-gate-card>button{display:flex;align-items:center;justify-content:space-between;margin:0 13px 13px;padding:11px 12px;border:2px solid #927044;background:linear-gradient(#3e8464,#285c49);color:#fff1c9;font-family:"Press Start 2P",monospace;font-size:.52rem;box-shadow:inset 0 0 0 2px #17372d,0 3px 0 #07110e}.realm-gate-card.duel>button{background:linear-gradient(#a54d48,#733137);border-color:#c68c5c;box-shadow:inset 0 0 0 2px #4b2025,0 3px 0 #16080b}.realm-gate-card>button em{font-size:1rem;font-style:normal}.realm-gate-card>button:disabled{filter:saturate(.45);opacity:.7;cursor:default}
.battle-realms-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-top:2px solid #4d3b2d;background:#111b1b}.battle-realms-footer>div{display:flex;align-items:center;gap:8px;color:#9eb4aa;font-size:.68rem}.battle-realms-footer>div>i{width:8px;height:8px;border-radius:50%;background:#65d29e;box-shadow:0 0 8px #65d29e}.battle-realms-footer>button{padding:8px 11px;border:1px solid #a8794c;background:#4f2c29;color:#f4d6a5;font-family:"Press Start 2P",monospace;font-size:.46rem}
.menu-rune.realms::before,.menu-rune.realms::after{content:"";position:absolute;top:5px;width:9px;height:22px;border:2px solid currentColor;border-radius:50% 50% 2px 2px}.menu-rune.realms::before{left:4px;transform:rotate(-12deg)}.menu-rune.realms::after{right:4px;transform:rotate(12deg)}

.battle-realm-hud{position:absolute;z-index:42;top:13px;left:50%;width:min(280px,calc(100vw - 260px));padding:7px 10px 8px;transform:translateX(-50%);border:2px solid #8a6640;background:linear-gradient(100deg,rgba(16,32,30,.96),rgba(9,18,21,.96));box-shadow:0 7px 18px rgba(0,0,0,.42),inset 0 0 0 1px rgba(224,196,129,.15);text-align:center;pointer-events:auto;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.battle-realm-hud.duel{border-color:#a9584f;background:linear-gradient(100deg,rgba(55,22,26,.97),rgba(20,14,19,.97))}.battle-realm-hud.raid{border-color:#735482;background:linear-gradient(100deg,rgba(32,20,40,.97),rgba(16,12,20,.97))}
.battle-realm-hud>span{display:block;color:#d2b66d;font-family:"Press Start 2P",monospace;font-size:.38rem;letter-spacing:.1em}.battle-realm-hud>strong{display:block;margin:4px 0 2px;color:#fff0c6;font-family:"Cinzel",serif;font-size:.84rem}.battle-realm-hud>small{display:block;color:#8ebaa5;font-size:.48rem;letter-spacing:.08em}.battle-realm-hud>button{position:relative;z-index:1;margin-top:5px;padding:7px 10px;border:1px solid #846b49;background:#203c32;color:#e8d8ae;font-size:.48rem;font-weight:700;pointer-events:auto;touch-action:manipulation}
.battle-realm-hud>#battle-realm-duel{border-color:#a85d58;background:linear-gradient(#5a272d,#351b22);color:#ffd8c1;text-shadow:0 1px #1b0d12}.battle-realm-hud>#battle-realm-duel.active{border-color:#ffb36c;background:linear-gradient(#aa3f39,#6d2027);color:#fff3cf;box-shadow:0 0 0 1px rgba(255,191,102,.25),0 0 12px rgba(224,70,58,.3)}.battle-realm-hud>#battle-realm-duel.unavailable{opacity:.48}

.world-name-tag.npc-name-tag{--name-accent:var(--npc-accent,#79c9a4);padding:5px 9px 5px 11px;border-color:color-mix(in srgb,var(--npc-accent,#79c9a4) 65%,#3a423b);background:linear-gradient(145deg,rgba(22,34,29,.97),rgba(9,16,16,.97));font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.4),inset 3px 0 0 var(--npc-accent,#79c9a4)}
.world-name-tag.npc-name-tag small{margin-left:7px;padding-left:7px;border-left:1px solid rgba(213,226,213,.25);color:#aebfb4;font-size:8px;font-weight:600;letter-spacing:.08em}.world-name-tag.npc-name-tag.ambient{opacity:.92}

@media(max-width:720px){
  .battle-realms-panel{top:6px;left:6px;width:calc(100vw - 12px);height:calc(100dvh - 12px);transform:none}
  .battle-realms-intro{grid-template-columns:42px 1fr;padding:9px 11px}.battle-realms-intro>i{width:34px;height:34px}.battle-realms-intro>i::before{inset:6px}.battle-realms-intro>i::after{inset:12px}.battle-realms-intro strong{font-size:.9rem}.battle-realms-intro p{font-size:.64rem}
  .battle-realm-grid{grid-template-columns:1fr;padding:10px;gap:10px}.realm-gate-card{grid-template-columns:104px minmax(0,1fr);grid-template-rows:minmax(132px,auto) auto}.realm-gate-art{grid-row:1/3;border:0;border-right:2px solid #4e3a2d}.realm-gate-art>i{left:50%;bottom:42px;width:96px;height:52px}.realm-gate-art>b{left:17%}.realm-gate-art>span{right:17%}.realm-gate-copy{padding:10px}.realm-gate-copy h3{font-size:.87rem}.realm-gate-copy p{font-size:.64rem}.realm-gate-copy ul{gap:3px;margin-top:7px}.realm-gate-copy li{font-size:.58rem}.realm-gate-card>button{grid-column:2;margin:0 9px 9px;padding:9px;font-size:.44rem}
  .battle-realms-footer{padding:8px 10px}.battle-realms-footer>div{font-size:.59rem}.battle-realms-footer>button{font-size:.4rem}
  .battle-realm-hud{top:calc(8px + env(safe-area-inset-top));width:min(222px,calc(100vw - 148px));padding:5px 7px}.battle-realm-hud>strong{font-size:.65rem}.battle-realm-hud>small{font-size:.4rem}.battle-realm-hud>button{font-size:.42rem}
  .world-name-tag.npc-name-tag{font-size:11px}.world-name-tag.npc-name-tag small{font-size:7px}
}
@media(max-width:430px){
  .battle-realms-intro p{display:none}.battle-realm-grid{padding:8px}.realm-gate-card{grid-template-columns:82px minmax(0,1fr)}.realm-gate-art>i{width:74px;height:42px}.realm-gate-art>b,.realm-gate-art>span{width:6px;height:57px}.realm-gate-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.realm-gate-copy li{font-size:.54rem}.battle-realms-footer>div{max-width:58%}.battle-realm-hud{left:auto;right:70px;width:170px;transform:none}.battle-realm-hud>span,.battle-realm-hud>small{display:none}.battle-realm-hud>strong{margin:0 0 3px;font-size:.58rem}
}

/* ===== UNIFIED PIXEL CHRONICLE UI ========================================
   Creator and HUD now use the same paper / carved wood / moss language as
   the title screen and inventory reference.  This block intentionally lives
   last so old experimental dark-card rules cannot leak back into the flow. */
#creator{
  padding:18px;
  background:
    radial-gradient(ellipse 260px 100px at 20% 24%,rgba(255,250,215,.5),transparent 72%),
    linear-gradient(180deg,#65b8d1 0 45%,#9dd3c4 46% 59%,#6dbb7e 60% 100%)!important;
}
#creator::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 5px)}
#creator .creator-backdrop{opacity:.24}
#creator .creator-card{
  width:min(1080px,calc(100vw - 36px));
  max-height:calc(100dvh - 36px);
  color:#2c3f32;
  border:4px solid #704735!important;
  background:linear-gradient(160deg,#f2dda8,#dfbd7d)!important;
  box-shadow:0 0 0 3px #bd8550,0 30px 75px rgba(34,66,53,.46),inset 0 0 0 2px rgba(255,246,194,.66)!important;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
#creator .creator-card::before{display:none}
#creator .creator-head{
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:13px 18px;
  border-bottom:4px solid #704735;
  background:linear-gradient(180deg,#69bc86,#45986a)!important;
  box-shadow:inset 0 2px 0 rgba(224,248,176,.48),inset 0 -3px 0 rgba(34,77,54,.2);
}
.creator-logo{display:block;width:146px;height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #365441)}
#creator .creator-step{margin-bottom:5px;color:#f7e7a7!important;font-size:max(.48rem,8px);text-shadow:1px 1px 0 #356244}
#creator .creator-card .creator-head h2{color:#21392c!important;font-family:"Press Start 2P",monospace!important;font-size:1rem!important;text-shadow:1px 1px 0 #bfe1a0!important}
#creator .creator-head p{color:#31583e!important;font-family:"VT323",monospace;font-size:1.05rem;line-height:1.1}
#creator .creator-progress i{height:5px;border:1px solid #315c42;background:#2f6d4c}.creator-progress i.done,.creator-progress i.active{background:#f0d37b;box-shadow:none}
#creator .creator-progress span{color:#f7e8aa!important;font-size:max(.42rem,8px);text-shadow:1px 1px 0 #356244}
#creator .creator-body{grid-template-columns:320px minmax(0,1fr);background:#e7c98e}
#creator .creator-preview{gap:10px;padding:14px;border-right:4px solid #704735;background:linear-gradient(160deg,#d9b474,#c49459)!important}
#creator .preview-stage{min-height:300px;border:3px solid #704735;background:radial-gradient(circle at 50% 22%,rgba(246,231,163,.25),transparent 32%),linear-gradient(#4b8277 0 54%,#4d9366 55% 100%);box-shadow:inset 0 0 0 2px rgba(255,240,178,.25),0 4px 0 #6b4938}
#creator .preview-zone{padding:4px 5px;background:#f0d697;border:1px solid #704735;color:#355b40;font-size:max(.37rem,8px)}
#creator .preview-summary{padding:10px 11px;border:2px solid #704735;border-left:5px solid var(--preview-accent,#4e9d70);background:#efd8a2!important;box-shadow:inset 0 2px 0 #fff0bb}
#creator .preview-summary>span{font-size:.4rem;color:#55734c}.preview-summary>strong{color:#2e4333!important;font-family:"VT323",monospace!important;font-size:1.25rem!important;text-shadow:1px 1px 0 #fff0bb}.preview-summary>p{color:#5f654d!important;font-size:.82rem!important;line-height:1.25}.preview-summary>div span{border:1px solid #98704a!important;background:#dfbd80;color:#42563f!important;font-size:.62rem!important}
#creator .preview-motion>span{color:#5a604a;font-size:.42rem}.preview-state,.rot-btn{min-height:34px;border:2px solid #81563d!important;background:#e9cd94!important;color:#465640!important;box-shadow:0 2px 0 #6d4938}.preview-state.active,.preview-state:hover,.rot-btn.active,.rot-btn:hover{background:#61ae79!important;color:#173827!important;border-color:#315f45!important}
#creator .creator-opts{background:#efd8a4}
#creator .creator-tabs{border-bottom:4px solid #704735;background:#365e47!important}
#creator .creator-tab{min-height:52px;border-right:2px solid #704735!important;background:linear-gradient(180deg,#5cad79,#438963)!important;color:#f6e4a4!important;font-size:max(.48rem,9px);text-shadow:1px 1px 0 #315b43}
#creator .creator-tab.active{background:linear-gradient(180deg,#f0d596,#d5ad70)!important;color:#2c4433!important;text-shadow:1px 1px 0 #fff0bd!important}
#creator .creator-tab.active::after{height:4px;left:8%;right:8%;background:#b7684f!important;box-shadow:none}
#creator .creator-panel{padding:18px 20px;background:repeating-linear-gradient(0deg,rgba(111,70,44,.035) 0 1px,transparent 1px 5px)}
#creator .creator-panel .opt-row{padding-bottom:14px;border-bottom:2px solid rgba(123,78,48,.24)}
#creator .creator-panel .opt-row>span,.opt-name>span{color:#5c5f46!important;font-size:max(.48rem,9px)!important;line-height:1.55}
#creator .opt-name input{background:#fff0bc!important;border:2px solid #83583e!important;color:#2c4032!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6)!important}
#creator .creator-panel .swatch{width:36px;height:36px;min-width:36px;border:2px solid #79513b!important;background-color:#d8b578;box-shadow:inset 0 2px 0 rgba(255,247,194,.45),0 2px 0 #694535}
#creator .creator-panel .swatch.sel{border-color:#315f45!important;box-shadow:0 0 0 2px #e9c96e,0 3px 0 #674635!important}
#creator .creator-panel .swatch.txt{min-width:62px;font-size:1rem;color:#334839}
#creator .class-choice-row .cls-btn{position:relative;min-height:62px;border:2px solid #86583e!important;background:linear-gradient(150deg,#f0daa5,#d9b77c)!important;color:#2f4233!important;box-shadow:inset 0 2px 0 #fff0bd,0 3px 0 #6d4938}
#creator .class-choice-row .cls-btn.sel{border-color:var(--class-accent,#3f8b62)!important;background:linear-gradient(145deg,#fff0ba,#dfc080)!important;box-shadow:inset 4px 0 0 var(--class-accent,#3f8b62),0 3px 0 #674635!important}
#creator .class-choice-row .cls-btn i{background:#397c5b!important;border:2px solid #315d45!important;color:#f9e5a3!important;font-family:"Press Start 2P",monospace!important}
#creator .class-choice-row .cls-btn b{color:#2c4032!important;font-family:"VT323",monospace;font-size:1.1rem}.class-choice-row .cls-btn small{color:#667050!important;font-size:.78rem}
#creator .class-choice-row .cls-btn.sel::before{color:#486344;font-size:8px}
#creator .creator-class-kit article{border:2px solid #8a5a3f;border-left:4px solid var(--selected-class,#5ca37e);background:#e7c98f!important;box-shadow:inset 0 2px 0 #fbe5ae}
#creator .creator-class-kit article>i{color:#f5e3a2;background:#3f815f;border-color:#315f47}.creator-class-kit b{color:#2f4233!important;font-family:"VT323",monospace;font-size:1rem}.creator-class-kit span{color:#5e654d!important;font-size:.74rem;line-height:1.25}
#creator .arcana-intro,#creator .creator-proof{border:2px solid #86583e;background:#e5c487!important}.arcana-intro span,.creator-proof>span{color:#5d6750!important}.arcana-intro strong,.creator-proof>b{color:#2f4233!important}.arcana-intro p,.creator-proof small{color:#65684f!important}
#creator .creator-foot{margin:0;padding:11px 16px;border-top:4px solid #704735;background:linear-gradient(180deg,#d6ae70,#bf8f58)!important}
#creator .creator-foot-copy>span{color:#4e5c45;font-size:.78rem}.creator-foot .btn-ghost{min-height:42px;border:2px solid #79513b;background:#eed397;color:#354b3a;font-size:.48rem;box-shadow:0 3px 0 #654334}.creator-foot .pixel-btn{min-height:44px;font-size:.54rem!important}

/* Desktop HUD: stronger type and fewer washed-out micro labels. */
#status-card,.realm-status,#minimap-wrap,#chat-dock,#skillbar{font-family:"VT323",monospace}
.status-name{font-size:1.02rem!important;color:#fff0be!important}.status-lvl{font-size:.42rem!important}.status-class-name{font-size:.52rem!important;font-weight:700;letter-spacing:.08em}.bar-label,.bar-val{font-size:.72rem!important;color:#dce7cb!important}.clock-row>#clock{font-size:.48rem!important;color:#c8d9bd!important}
.realm-status-copy b{font-size:.48rem!important}.realm-status-copy small{font-size:.42rem!important;color:#9ab5a5!important}.minimap-head{font-size:.36rem!important;color:#c4d5bd!important}.minimap-foot{font-size:.31rem!important;color:#91ad9c!important}
.sk-name{font-size:.84rem!important;color:#2d4435!important}.sk-key{font-size:.42rem!important}.chat-dock-copy small{font-size:.4rem!important}.chat-dock-copy b{font-size:.78rem!important;color:#c8ddd0!important}
.panel:not(.level-ceremony):not(.death-panel) .panel-kicker{font-size:.45rem!important}.panel:not(.level-ceremony):not(.death-panel) p,.panel:not(.level-ceremony):not(.death-panel) small,.panel:not(.level-ceremony):not(.death-panel) label{font-size:max(.72rem,11px);color:#4f624e!important}
.realm-menu-grid>button b,.craft-info h3,.shop-item-copy h3,.fish-card strong,.companion-card strong{font-size:max(.82rem,13px)!important}.realm-menu-grid>button small,.craft-info p,.shop-item-copy p,.fish-card>small,.companion-card small{font-size:max(.68rem,11px)!important}

@media(max-width:720px){
  #creator{padding:6px;overflow:hidden}
  #creator .creator-card{width:100%;height:calc(100dvh - 12px);min-height:0;max-height:calc(100dvh - 12px);overflow:hidden;border-width:3px!important;box-shadow:0 0 0 2px #bd8550,0 18px 45px rgba(34,66,53,.42)!important}
  #creator .creator-head{grid-template-columns:86px minmax(0,1fr);gap:9px;padding:8px 9px;border-bottom-width:3px}
  .creator-logo{width:82px;height:42px}
  #creator .creator-head p,#creator .creator-progress{display:none}
  #creator .creator-step{font-size:8px}.creator-card .creator-head h2{font-size:.64rem!important;line-height:1.4!important}
  #creator .creator-body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
  #creator .creator-preview{display:flex;grid-template:none;min-width:0;padding:7px;gap:6px;border-right:3px solid #704735;border-bottom:0;overflow:hidden}
  #creator .preview-stage{width:100%;height:auto;min-height:178px;flex:0 0 178px;grid-row:auto}
  #creator .preview-zone{font-family:"VT323",monospace;font-size:.72rem}.preview-summary{padding:7px!important}.preview-summary>span{font-family:"VT323",monospace;font-size:.72rem!important}.preview-summary>strong{font-size:1rem!important}.preview-summary>p,.preview-summary>div{display:none!important}
  #creator .preview-motion{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.preview-motion>span{display:none}.preview-state{min-width:0;padding:4px 2px;font-size:.55rem}
  #creator .preview-rot{grid-template-columns:repeat(2,1fr);gap:3px}.rot-btn{min-height:28px}
  #creator .creator-opts{display:flex;min-height:0;overflow:hidden}
  #creator .creator-tabs{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;flex:0 0 auto;border-bottom-width:3px}
  #creator .creator-tab{min-height:43px;padding:6px 2px;font-family:"VT323",monospace;font-size:.82rem;letter-spacing:0;white-space:nowrap}
  #creator .creator-panel{height:auto;max-height:none;min-height:0;overflow-y:auto;padding:10px 9px 90px}
  #creator .creator-panel.active{display:flex;gap:10px}
  #creator .creator-panel .opt-row{gap:6px;padding-bottom:9px}.creator-panel .opt-row>span,.opt-name>span{font-family:"VT323",monospace;font-size:.78rem!important;letter-spacing:.03em}
  #creator .class-choice-row .class-pick{grid-template-columns:1fr;gap:6px}
  #creator .class-choice-row .cls-btn{min-height:54px;padding:7px;grid-template-columns:30px 1fr}.class-choice-row .cls-btn i{width:28px;height:28px}.class-choice-row .cls-btn b{font-size:1rem}.class-choice-row .cls-btn small{font-size:.68rem}
  #creator .creator-class-kit{grid-template-columns:1fr}.creator-class-kit article{padding:6px}.creator-class-kit span{font-size:.68rem}
  #creator .creator-panel .swatches{display:flex;flex-wrap:wrap}.creator-panel .swatch{width:38px;height:38px;min-width:38px}.creator-panel .swatch.txt{min-width:64px}
  #creator .creator-foot{position:absolute;left:3px;right:3px;bottom:3px;z-index:15;gap:7px;padding:8px;border-top-width:3px}.creator-foot-copy{margin-left:auto}.creator-foot-copy>span{display:none}.creator-foot .btn-ghost{min-height:40px;padding:7px;font-size:.36rem}.creator-foot .pixel-btn{min-height:42px;padding:8px!important;font-size:.4rem!important}

  /* Mobile is a composed HUD, not a shrunken desktop dashboard. */
  #hud::before{display:none}
  #status-card{left:6px;top:max(6px,env(safe-area-inset-top));width:166px;min-width:0;padding:7px 8px 6px;border-width:2px;border-left-width:3px;backdrop-filter:none;animation:none!important}
  .status-identity{grid-template-columns:27px minmax(0,1fr);gap:6px;margin-bottom:4px}.status-class-crest{width:25px;height:25px;font-size:.68rem}.status-name{font-size:.88rem!important;max-width:83px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-lvl{font-size:.34rem!important;padding:2px 3px}.status-class-name{font-size:.42rem!important}.bar-row{grid-template-columns:16px 1fr 25px;gap:3px}.bar-label,.bar-val{font-size:.62rem!important}.bar{height:7px}.clock-row{margin-top:3px;padding-top:3px}.clock-row>#clock{font-size:.4rem!important}
  #pet-chip{max-width:30px!important;width:30px;min-height:25px;padding:3px;margin-left:auto;grid-template-columns:1fr}.pet-chip-orb{margin:auto}.pet-chip-orb~b,.pet-chip-orb~small{display:none!important}
  #mount-chip{min-width:30px!important;width:30px;padding:3px!important;grid-template-columns:1fr!important}.mount-chip span,.mount-chip kbd,#mount-chip-label,#mount-chip kbd{display:none!important}
  #top-right{right:6px!important;top:max(6px,env(safe-area-inset-top))!important;gap:5px!important}.realm-status{display:none!important}.top-right-tools{justify-content:flex-end;gap:5px}.realm-menu-trigger{width:42px!important;min-width:42px!important;height:42px!important;padding:7px!important}.realm-menu-trigger>span{display:none!important}
  #chat-dock{right:53px!important;top:max(6px,env(safe-area-inset-top))!important;width:42px!important;min-height:42px!important;padding:6px!important}
  #minimap-wrap{width:76px!important;margin-top:0;padding:3px!important;border-width:2px!important}.minimap-head,.minimap-foot{display:none!important}#minimap{width:68px!important;height:68px!important;border:0!important}
  #boss-hud{left:6px!important;right:6px!important;top:116px!important;width:auto!important;max-width:none!important;padding:7px 9px!important}.boss-title-row strong{font-size:.82rem!important}.boss-hud-bottom{font-size:.58rem!important}.boss-coop-row{font-size:.34rem!important}
  #skillbar{left:50%;bottom:max(7px,env(safe-area-inset-bottom));gap:4px;padding:5px;border:2px solid #704833!important;width:auto;max-width:calc(100vw - 128px)}
  .sk{width:45px;height:48px;min-width:0;padding:3px 2px!important}.sk-icon{width:20px!important;height:20px!important;transform:scale(.88)!important}.sk-name{font-size:.66rem!important;line-height:.8!important;color:#2d4435!important}.sk-key{font-size:.5rem!important;padding:1px 2px!important}.sk-util,.sk-div{display:none!important}
  #stick{left:12px!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;width:82px!important;height:82px!important}
  #stick-knob{width:38px!important;height:38px!important}
  #touch-btns{right:10px!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;gap:5px!important}.tbtn{width:48px!important;height:48px!important;font-size:.58rem!important}.tbtn.atk{width:56px!important;height:56px!important;font-size:.7rem!important}
  #interact-prompt{bottom:132px!important;font-size:.72rem!important}
  #fishing-hud{bottom:72px!important;width:calc(100vw - 20px)!important}.fishing-head,.fishing-row,#fishing-tip{font-size:.72rem!important}
  .food-buff-hud{display:none!important}
  .arrival-banner{top:104px!important;width:min(330px,calc(100vw - 24px))!important;grid-template-columns:32px minmax(0,1fr) 22px!important;gap:7px!important;padding:7px 8px!important;animation:none!important;transform:none!important}.arrival-sigil{width:30px!important;height:30px!important}.arrival-copy>span{font-size:.28rem!important}.arrival-copy>strong{font-size:.46rem!important;line-height:1.45!important}.arrival-copy>p{font-size:.73rem!important;line-height:1!important}.arrival-actions{display:none!important}.arrival-close{width:22px!important;height:22px!important}
  .panel:not(.level-ceremony):not(.death-panel) .panel-kicker{font-size:.4rem!important}.panel:not(.level-ceremony):not(.death-panel) p,.panel:not(.level-ceremony):not(.death-panel) small,.panel:not(.level-ceremony):not(.death-panel) label{font-size:max(.76rem,12px)!important}
}

@media(max-width:370px){
  #creator .creator-body{grid-template-columns:108px minmax(0,1fr)}
  #creator .creator-tab{font-size:.72rem!important}
  #status-card{width:154px}.status-name{max-width:71px}.sk{width:41px}.tbtn{width:45px!important;height:45px!important}
}

/* Chronicle resume: paint a real transition before synchronous world assembly. */
.resume-loading{position:fixed;inset:0;z-index:59;display:grid;place-content:center;justify-items:center;gap:10px;background:radial-gradient(circle at 50% 44%,#1d493b 0,#091713 38%,#05090c 76%);color:#e9dfb7;text-align:center}.resume-loading.hidden{display:none}.resume-loading:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px);pointer-events:none}.resume-loading>span{font:700 8px var(--font-pixel);letter-spacing:.18em;color:#70d1a2}.resume-loading>strong{font:700 clamp(17px,3vw,27px) var(--font-display);color:#fff0bd}.resume-loading>small{color:#77958b;font-size:12px}.resume-sigil{position:relative;width:86px;height:86px;display:grid;place-items:center;margin-bottom:8px;filter:drop-shadow(0 0 18px #5ce1a56f)}.resume-sigil i{position:absolute;inset:8px;border:3px solid #65ca98;transform:rotate(45deg);animation:resumeSeal 1.8s steps(16) infinite}.resume-sigil i:nth-child(2){inset:24px;border-color:#e6c66f;animation-direction:reverse;animation-duration:1.1s}.resume-sigil b{font-size:25px;color:#fff2ac;text-shadow:0 0 10px #fff}@keyframes resumeSeal{to{transform:rotate(405deg)}}

/* Live wardrobe and locked gacha cosmetics. */
.creator-head{position:relative}.creator-close{position:absolute;right:0;top:0;width:38px;height:38px;border:2px solid #8e6648;background:#2b1f1b;color:#f3d79b;font-size:22px}.creator-close:hover{background:#513429}.swatch.relic-swatch{border-color:currentColor;box-shadow:inset 0 0 0 2px #0a0c12,0 0 9px color-mix(in srgb,currentColor 35%,transparent)}.swatch.relic-swatch.common{color:#b8c0c7}.swatch.relic-swatch.uncommon{color:#65c979}.swatch.relic-swatch.rare{color:#54a9ef}.swatch.relic-swatch.epic{color:#a66cf0}.swatch.relic-swatch.ultra_rare{color:#ef67c5}.swatch.relic-swatch.legendary{color:#f2a633}.swatch.relic-swatch.mythical{color:#ed5353}.swatch.relic-swatch.mythical_radiant{color:#77f7e5}.swatch.locked{opacity:.45;filter:grayscale(.75);cursor:not-allowed}.swatch.locked:hover{transform:none}.menu-rune.wardrobe:before{width:24px;height:19px;bottom:4px;background:linear-gradient(90deg,#d4b56e 0 4px,#56866e 4px 20px,#d4b56e 20px);clip-path:polygon(18% 0,39% 18%,61% 18%,82% 0,100% 24%,82% 42%,82% 100%,18% 100%,18% 42%,0 24%)}.menu-rune.wardrobe:after{width:8px;height:8px;left:12px;top:7px;border:2px solid #e8d491;border-radius:50%}

/* Every rarity has its own reveal language, not only a palette swap. */
.gacha-reveal[data-fx="dust"] .gacha-portal{filter:drop-shadow(0 0 7px #e4e8ec)}
.gacha-reveal[data-fx="leaves"]{background-image:radial-gradient(ellipse at 20% 30%,#62d07842 0 3px,transparent 4px),radial-gradient(ellipse at 78% 68%,#a9f5a936 0 4px,transparent 5px)}
.gacha-reveal[data-fx="tide"]{background-image:repeating-radial-gradient(ellipse at 50% 120%,#63bfff2f 0 3px,transparent 4px 15px)}
.gacha-reveal[data-fx="arcane"] .gacha-runes{filter:drop-shadow(0 0 7px #c58aff);transform:translate(-50%,-50%) rotate(8deg)}
.gacha-reveal[data-fx="blossom"]{background-image:radial-gradient(circle at 18% 22%,#ffb8ed66 0 2px,transparent 3px),radial-gradient(circle at 78% 32%,#ef67c566 0 3px,transparent 4px),radial-gradient(circle at 65% 80%,#fff 0 1px,transparent 2px)}
.gacha-reveal[data-fx="sunfire"] .gacha-portal:before{border-width:5px;border-color:#f2a633;box-shadow:0 0 24px #ffe08a}.gacha-reveal[data-fx="sunfire"]{background-image:repeating-conic-gradient(from 0deg at 50% 52%,#ffd66a24 0 8deg,transparent 8deg 18deg)}
.gacha-reveal[data-fx="eclipse"]{background:radial-gradient(circle at 50% 52%,#050308 0 18%,#ed535344 20%,#150911 38%,#070911 70%)}.gacha-reveal[data-fx="eclipse"] .gacha-portal{filter:drop-shadow(0 0 24px #ff493e)}
.gacha-reveal[data-fx="radiant"]{background:repeating-conic-gradient(from 0deg at 50% 52%,#77f7e53d 0 8deg,#fff7a81f 8deg 16deg,transparent 16deg 28deg),radial-gradient(circle,#ffffff55,#090d16 62%)}.gacha-reveal[data-fx="radiant"] .gacha-portal{filter:drop-shadow(0 0 14px #77f7e5) drop-shadow(0 0 30px #fff7a8);animation:gachaRadiantFloat .45s steps(2) infinite alternate}.gacha-card.cosmetic-reward:after{content:"STYLE ECHO";position:absolute;right:5px;top:5px;padding:3px 4px;background:#080b12;border:1px solid var(--relic);color:var(--relic);font:700 5px var(--font-pixel)}.gacha-card.duplicate{filter:saturate(.65)}.gacha-card.duplicate:after{content:"ECHO OWNED"}@keyframes gachaRadiantFloat{to{transform:translate(-50%,-52%) scale(1.06);filter:drop-shadow(0 0 22px #77f7e5) drop-shadow(0 0 38px #fff7a8)}}

@media(max-width:720px){.resume-loading{padding:20px}.resume-loading>strong{font-size:18px}.creator-close{right:5px;top:5px;z-index:4}.swatch.relic-swatch.txt{min-width:112px!important;max-width:160px!important;white-space:normal!important;line-height:1.1!important}.gacha-card.cosmetic-reward:after{font-size:4px}}

/* ===== DAYLIGHT TITLE MENU / PASSPORT CLEANUP ============================
   The loading card is the visual promise of the game.  Keep the first menu
   in that same sky, paper and wood palette instead of switching to a second
   green-on-black product language after START. */
#login{
  overflow:hidden;
  background:
    linear-gradient(180deg,#61b9d4 0 47%,#a6d5cf 48% 61%,#6dbd80 62% 100%)!important;
  color:#2a3b35;
}
#login::before{
  opacity:.2!important;
  background:
    radial-gradient(ellipse 260px 90px at 16% 24%,rgba(255,250,220,.75),transparent 70%),
    radial-gradient(ellipse 330px 110px at 78% 30%,rgba(255,250,230,.58),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 5px)!important;
}
#login .login-shell{position:relative;z-index:2}
#login .realm-showcase{padding:clamp(26px,5vh,56px) 0 40px!important}
#login .realm-eyebrow{color:#fff2b9!important;text-shadow:2px 2px 0 #39755c!important}
#login .realm-showcase h1{color:#fff2bd!important;text-shadow:3px 3px 0 #39755c,5px 5px 0 rgba(58,79,54,.26)!important}
#login .realm-showcase>p{color:#294b41!important;text-shadow:1px 1px 0 rgba(240,246,194,.65)!important}
#login .realm-showcase::after{color:#2f7852!important}
#login .realm-pillars>div{background:rgba(246,218,154,.7)!important;border-color:#755038!important;box-shadow:0 3px 0 #4a3a32!important}
#login .realm-pillars b,#login .realm-pillars span{color:#3d553f!important}
#login .login-card{
  background:
    repeating-linear-gradient(0deg,rgba(111,70,44,.035) 0 1px,transparent 1px 5px),
    linear-gradient(160deg,#f3dda7 0%,#e1bd7d 100%)!important;
  border:3px solid #704735!important;
  box-shadow:0 0 0 2px #bd8550,0 24px 70px rgba(37,67,55,.42),inset 0 0 0 2px rgba(255,246,194,.65)!important;
}
#login .login-card::after{border-color:rgba(102,65,43,.55)!important}
#login .login-glow{opacity:.14!important;background:#fff0a8!important}
#login .menu-logo{filter:drop-shadow(0 4px 0 #5d3a31) drop-shadow(0 0 12px rgba(255,243,171,.4))!important}
#login .login-sigil{background:#4e9d70!important;border-color:#315f49!important;box-shadow:inset 0 0 0 3px #a9d58f,0 3px 0 #5a3e31!important}
#login .login-sigil span{color:#fff1b0!important;text-shadow:2px 2px 0 #315f49!important}
#login .login-step{color:#5a7d54!important}
#login .login-card .pixel-h2{color:#2b3d31!important;text-shadow:1px 1px 0 #fff0b8!important}
#login .login-card .login-sub{color:#5a6349!important}
#login .menu-choice{border-color:#734a35!important;background:linear-gradient(180deg,#e4a36e,#bb6d56)!important;box-shadow:inset 0 2px 0 #f7ca8e,inset 0 -3px 0 rgba(86,48,39,.25),0 4px 0 #52362e!important}
#login .menu-choice:hover,#login .menu-choice:focus-visible{background:linear-gradient(180deg,#f0b77c,#d27b5d)!important;border-color:#f7d88b!important}
#login .menu-choice-icon{background:#478d67!important;border-color:#6a452f!important}
#login .menu-choice b{color:#302724!important}.menu-choice small{color:#61443a!important}.menu-choice>strong{color:#fff1bc!important}
#login .wallet-choice{background:linear-gradient(180deg,#d18f57,#a76247)!important}
#login .server-picker{background:rgba(255,239,180,.48)!important;border-color:#8f6242!important}
#login .server-picker-head span{color:#4a704d!important}.server-picker-head small{color:#6a654b!important}
#login .server-picker-list button{background:#f0d399!important;border-color:#86593d!important;color:#334c3b!important;box-shadow:inset 0 2px 0 #fff0b8,0 2px 0 #684536!important}
#login .server-picker-list button.selected{background:#68b47c!important;color:#173b2a!important;border-color:#f1d37e!important}
#login .access-back{color:#4a704d!important}
#login .login-input-wrap>span{color:#5c704f!important}
#login .login-card #login-name{background:#fff0bf!important;border-color:#85583d!important;color:#2c3d31!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.7)!important}
#login .login-existing,.wallet-status-card,.wallet-profile-actions,.onchain-policy{background:rgba(255,238,181,.58)!important;border-color:#a07049!important;color:#3b503c!important}
#login .login-return{color:#55764e!important}.login-stats{color:#6a654d!important}
#login .quick-btn{background:#f1d69a!important;border-color:#936344!important;color:#4b503d!important}
#login .login-divider{color:#79634b!important}.login-divider:before,.login-divider:after{background:#b28a5c!important}
#login .login-note{color:#617052!important}.login-note i{background:#4e9d70!important}
#login .wallet-status-card b{color:#38533e!important}.wallet-status-card small{color:#636a51!important}
#login .access-sync{display:block;width:100%;margin:-3px 0 10px;padding:7px 9px;border:2px solid #8d6242;background:#f1d69a;color:#476043;font: .58rem "Press Start 2P",monospace;box-shadow:inset 0 2px 0 #fff1b6,0 2px 0 #674536;cursor:pointer}
#login .access-sync:hover{background:#ffe6ad;border-color:#4d8f65}#login .access-sync:disabled{opacity:.55;cursor:wait}
#login .wallet-action-note{display:block;margin-top:7px;color:#6d634a;font: .72rem "VT323",monospace;line-height:1.1}
#login .access-danger{color:#754137!important;border-color:#a76a4f!important;background:rgba(224,137,99,.18)!important}
#login .onchain-policy>span{color:#55714d!important}.onchain-policy small{color:#6c684e!important}
#login .about-kicker{color:#557b51!important}
#login .about-panel h3{color:#2f4033!important;text-shadow:1px 1px 0 #fff0b8!important}
#login .credit-list>div{border-left:3px solid #4d9b6d!important;background:rgba(255,238,181,.58)!important;border-top:1px solid rgba(119,77,48,.24);border-bottom:1px solid rgba(119,77,48,.24)}
#login .credit-list b{color:#3c4d37!important}.credit-list span{color:#6d674d!important}.about-panel>p{color:#60684e!important}
#login .wallet-profile-actions .login-new{background:linear-gradient(180deg,#65bd83,#438f65)!important;border-color:#2e6749!important;color:#173b2a!important}
#login-fx{opacity:.5!important;mix-blend-mode:multiply!important}

/* Ritual branding is a landmark, not a tiny green pixel lost in the roof. */
.ritual-boot-lockup{font-size:clamp(.42rem,1vw,.62rem)!important;gap:11px!important;padding:8px 13px!important;border-width:2px!important;letter-spacing:.1em!important}
.ritual-boot-lockup img{width:26px!important;height:26px!important}
#boot .ritual-boot-lockup{font-size:clamp(.42rem,1vw,.62rem)!important;padding:8px 13px!important;gap:11px!important}
#boot .ritual-boot-lockup img{width:26px!important;height:26px!important}

@media(max-width:720px){
  #login .login-shell{width:min(470px,100%)!important}
  #login .realm-showcase{min-height:205px;padding:18px 13px 10px!important}
  #login .realm-showcase h1{font-size:clamp(2rem,9vw,3rem)!important}
  #login .login-card{padding:1.15rem .9rem 1rem!important}
  #login .menu-logo{width:min(290px,94%)!important;max-height:86px!important}
  #login .server-picker{margin-top:.65rem}
  #boot .ritual-boot-lockup{font-size:.38rem!important;padding:7px 9px!important}
  #boot .ritual-boot-lockup img{width:22px!important;height:22px!important}
}

/* ===== MOBILE GAME-FIRST COMPOSITION ====================================
   A phone is not a squeezed desktop. Keep one clear focal layer per state:
   gate, menu, creator, then world controls. */
.death-panel.death-enter{animation:none!important}

@media(max-width:760px){
  html,body{width:100%;height:100%;overflow:hidden}

  /* Loading gate: one centered pixel poster with no dead lower half. */
  #boot .title-scene{display:grid!important;place-items:center!important;padding:0!important;min-height:100dvh}
  #boot .boot-layout{width:100%!important;padding:14px 14px calc(20px + env(safe-area-inset-bottom))!important}
  #boot .boot-card{width:min(386px,100%)!important;margin:auto!important;padding:8px 10px 14px!important;transform:translateY(-2dvh)}
  #boot .boot-logo-wrap{width:min(340px,92vw)!important;margin:0 auto 8px!important}
  #boot .boot-kicker{font-size:max(.38rem,7px)!important;margin-bottom:9px!important}
  #boot .ritual-boot-lockup{font-size:max(.4rem,8px)!important;padding:7px 10px!important;margin-bottom:9px!important}
  #boot .boot-sub{font-size:max(.31rem,6px)!important;margin-bottom:10px!important}
  #boot .boot-card .loading-bar-wrap{width:100%;height:13px;margin-bottom:5px}
  #boot .boot-load-row{width:100%;margin-bottom:12px}
  #boot .boot-load-row #boot-status{font-size:1rem}
  #boot .boot-card #btn-start{width:100%;min-height:50px;font-size:max(.5rem,9px)!important}
  #boot .boot-credit{font-size:max(.25rem,5px);line-height:1.5}

  /* Entry menu: a short world masthead followed by one readable passport. */
  #login{display:block;padding:0!important;overflow-y:auto!important;overscroll-behavior:none}
  #login .login-shell{display:flex!important;flex-direction:column;width:100%!important;min-height:100dvh!important;margin:0!important;gap:0!important}
  #login .realm-showcase{flex:0 0 118px;min-height:118px!important;max-height:118px;padding:18px 16px 8px!important;overflow:hidden;border-bottom:3px solid #704735}
  #login .realm-eyebrow{font-size:max(.36rem,7px)!important}
  #login .realm-showcase h1{width:190px;margin:8px 0 0!important;font-size:1.42rem!important;line-height:1.08!important}
  #login .realm-showcase>p,#login .realm-pillars{display:none!important}
  #login .login-hero-art{right:4px!important;bottom:-8px!important;width:132px!important;height:120px!important;transform:scale(.78)!important}
  #login .login-card{flex:1;width:100%!important;min-height:calc(100dvh - 118px);padding:12px 14px calc(16px + env(safe-area-inset-bottom))!important;border-width:0 0 0 0!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important}
  #login .login-card[data-login-mode]:not([data-login-mode="menu"]){padding-top:14px!important}
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.menu-logo,
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.login-sigil,
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.login-step,
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.pixel-h2,
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.login-sub{display:none!important}
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.access-panel,
  #login .login-card[data-login-mode]:not([data-login-mode="menu"])>.about-panel{margin-top:0!important;padding-top:0!important}
  #login .menu-logo{width:min(210px,68vw)!important;height:55px!important;margin:0 auto 2px!important}
  #login .login-sigil{right:16px!important;top:16px!important;width:34px!important;height:34px!important}
  #login .login-step{font-size:max(.36rem,7px)!important}
  #login .login-card .pixel-h2{font-size:max(.72rem,12px)!important;margin-top:6px!important}
  #login .login-sub{font-size:1rem!important;margin:.3rem 0 .7rem!important}
  #login .main-menu-choices{gap:8px!important;margin-top:6px!important}
  #login .menu-choice{min-height:58px;padding:8px 10px!important}
  #login .menu-choice b{font-size:max(.4rem,8px)!important}.menu-choice small{font-size:.92rem!important}
  #login .server-picker{margin-top:10px!important;padding:8px!important}
  #login .server-picker-head span{font-size:max(.34rem,7px)!important}.server-picker-head small{font-size:.72rem!important}
  #login .server-picker-list{gap:5px!important}.server-picker-list button{min-height:42px!important;padding:6px 8px!important}
  #login .server-option.selected strong,#login .server-option.selected b{color:#173b30!important}#login .server-option.selected small,#login .server-option.selected em{color:#285844!important}
  #login .access-panel{margin-top:6px!important}.login-input-wrap input{min-height:48px}
  #login .about-panel .access-back{display:block;margin-bottom:12px!important}
  #login .credit-list{grid-template-columns:1fr 1fr;gap:8px}.credit-list>div{min-height:62px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}.credit-list span{font-size:.88rem!important;line-height:1.05}

  /* Creator: preview strip above a full-width editor, never a split desktop. */
  #creator{padding:0!important;background:#69b9cf!important}
  #creator .creator-card{width:100%!important;height:100dvh!important;max-height:100dvh!important;border:0!important;clip-path:none!important;box-shadow:none!important}
  #creator .creator-head{flex:0 0 66px;grid-template-columns:72px minmax(0,1fr)!important;gap:8px!important;padding:7px 10px!important;border-bottom:3px solid #704735!important}
  #creator .creator-logo{width:68px!important;height:45px!important}
  #creator .creator-step{font-size:7px!important;margin-bottom:4px!important}
  #creator .creator-card .creator-head h2{font-size:max(.58rem,10px)!important;line-height:1.35!important}
  #creator .creator-body{display:flex!important;flex-direction:column;min-height:0!important;overflow:hidden!important}
  #creator .creator-preview{flex:0 0 126px;display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:8px!important;padding:8px!important;border:0!important;border-bottom:3px solid #704735!important;overflow:hidden!important}
  #creator .preview-stage{grid-column:1;grid-row:1;width:96px!important;height:108px!important;min-height:108px!important;flex:none!important}
  #creator .preview-zone{font-size:.62rem!important;padding:2px 3px!important}
  #creator .preview-summary{grid-column:2;grid-row:1;align-self:stretch;margin:0!important;padding:8px 9px!important;overflow:hidden}
  #creator .preview-summary>span{font-size:.68rem!important}#creator .preview-summary>strong{font-size:1.25rem!important;margin:4px 0!important}
  #creator .preview-summary>p{display:-webkit-box!important;font-size:.78rem!important;line-height:1.15!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #creator .preview-summary>div{display:flex!important;gap:3px!important;overflow:hidden}#creator .preview-summary>div span{font-size:.58rem!important;padding:2px 3px!important;white-space:nowrap}
  #creator .preview-motion,#creator .preview-rot{display:none!important}
  #creator .creator-opts{flex:1;display:flex!important;min-height:0!important;overflow:hidden!important}
  #creator .creator-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;flex:0 0 43px;overflow:hidden!important;border-bottom:3px solid #704735!important}
  #creator .creator-tab{min-width:0!important;min-height:43px!important;padding:4px 1px!important;font-size:.72rem!important;white-space:normal!important;line-height:1!important}
  #creator .creator-panel{flex:1;height:auto!important;min-height:0!important;padding:11px 11px 76px!important;overflow-y:auto!important;overscroll-behavior:contain}
  #creator .creator-panel.active{gap:10px!important}
  #creator .opt-name input{min-height:46px;font-size:1.15rem!important}
  #creator .creator-panel .opt-row{gap:6px!important;padding-bottom:8px!important}
  #creator .creator-panel .opt-row>span,#creator .opt-name>span{font-size:.76rem!important}
  #creator .class-choice-row .class-pick{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #creator .class-choice-row .cls-btn{min-height:52px!important;padding:6px!important;grid-template-columns:28px minmax(0,1fr)!important;gap:1px 6px!important}
  #creator .class-choice-row .cls-btn i{width:27px!important;height:27px!important}#creator .class-choice-row .cls-btn b{font-size:1rem!important}#creator .class-choice-row .cls-btn small{font-size:.7rem!important}
  #creator .creator-class-kit{display:none!important}
  #creator .creator-foot{left:0!important;right:0!important;bottom:0!important;padding:7px 9px calc(7px + env(safe-area-inset-bottom))!important;border-top:3px solid #704735!important}
  #creator .creator-foot .btn-ghost{min-height:43px!important;font-size:.7rem!important;padding:6px 9px!important}
  #creator .creator-foot .pixel-btn{min-height:45px!important;font-size:max(.42rem,8px)!important;padding:7px 10px!important}

  /* World HUD: game space first. Secondary information lives in Realm Menu. */
  #hud::before{display:none!important}
  #status-card{left:6px!important;top:max(6px,env(safe-area-inset-top))!important;width:154px!important;padding:6px 7px 5px!important;border-width:2px!important;border-left-width:3px!important;animation:none!important;backdrop-filter:none!important}
  .status-identity{grid-template-columns:25px minmax(0,1fr)!important;gap:6px!important;margin-bottom:3px!important}.status-class-crest{width:24px!important;height:24px!important}.status-name{font-size:.84rem!important}.status-lvl{font-size:.34rem!important}.status-class-name{font-size:.38rem!important}
  .bar-row{grid-template-columns:16px 1fr 22px!important;gap:3px!important}.bar-label,.bar-val{font-size:.58rem!important}.bar{height:7px!important}.xp-row{margin-top:2px!important}.clock-row{margin-top:3px!important;padding-top:3px!important}.clock-row>#clock{font-size:.38rem!important}
  #pet-chip,#mount-chip{display:none!important}
  #minimap-wrap{display:none!important}
  #top-right{right:6px!important;top:max(6px,env(safe-area-inset-top))!important}.realm-menu-trigger{width:42px!important;min-width:42px!important;height:42px!important}
  #chat-dock{right:54px!important;top:max(6px,env(safe-area-inset-top))!important;width:42px!important;min-height:42px!important}
  #boss-hud{left:8px!important;right:8px!important;top:62px!important;width:auto!important;padding:7px 9px!important}
  .arrival-banner{left:8px!important;right:8px!important;top:102px!important;width:auto!important;grid-template-columns:28px minmax(0,1fr) 20px!important;padding:7px 8px!important;animation:none!important;transform:none!important}.arrival-copy>p{font-size:.72rem!important;line-height:1!important;-webkit-line-clamp:2}.arrival-copy>strong{font-size:.46rem!important}.arrival-actions{display:none!important}
  #skillbar{left:50%!important;bottom:max(6px,env(safe-area-inset-bottom))!important;width:214px!important;max-width:214px!important;gap:3px!important;padding:4px!important}.skillbar-caption{display:none!important}.sk{width:49px!important;height:52px!important}.sk-name{font-size:.65rem!important}.sk-key{font-size:.46rem!important}
  #stick{left:10px!important;bottom:calc(68px + env(safe-area-inset-bottom))!important;width:78px!important;height:78px!important}#stick-knob{width:36px!important;height:36px!important}
  #touch-btns{right:9px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:58px 46px!important;grid-template-rows:46px 46px!important;gap:5px!important;align-items:end}
  #btn-shield{display:none!important}#btn-attack{grid-row:1/3;width:58px!important;height:58px!important;align-self:center;font-size:.72rem!important}#btn-evade,#btn-interact{width:46px!important;height:46px!important;font-size:.62rem!important}
  #interact-prompt{bottom:138px!important;max-width:210px!important;font-size:.7rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #toast{top:calc(max(116px,env(safe-area-inset-top) + 116px))!important;bottom:auto!important;width:max-content!important;min-width:0!important;max-width:calc(100vw - 20px)!important;padding:8px 11px!important;border:2px solid #704735!important;border-radius:0!important;background:#efd497!important;color:#304334!important;font-size:.82rem!important;line-height:1.28!important;white-space:normal!important;overflow-wrap:anywhere!important;backdrop-filter:none!important;box-shadow:0 4px 0 #634333,0 10px 24px rgba(31,45,36,.35)!important}
  #toast.show{animation:toastMobileIn .18s steps(2,end) forwards!important}
  #hud:has(#boss-hud:not(.hidden)) #toast{top:calc(max(166px,env(safe-area-inset-top) + 166px))!important}
  #hud:has(.arrival-banner:not(.hidden)) #toast{top:calc(max(188px,env(safe-area-inset-top) + 188px))!important}
  #fishing-hud{left:8px!important;right:8px!important;bottom:calc(180px + env(safe-area-inset-bottom))!important;width:auto!important;padding:9px 10px!important;z-index:24;transform:none!important}.fishing-head,.fishing-row,#fishing-tip{font-size:.72rem!important}
  #hud.fishing-active #interact-prompt{bottom:calc(300px + env(safe-area-inset-bottom))!important}
  #catch-card{top:auto!important;right:8px!important;bottom:calc(180px + env(safe-area-inset-bottom))!important;left:8px!important;width:auto!important;max-width:330px!important;height:auto!important;min-height:64px;margin:0 auto!important;overflow:hidden!important;z-index:27}.catch-copy>strong{white-space:normal!important;line-height:1.05;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.catch-copy>small{flex-wrap:wrap}
  .food-buff-hud{display:none!important}

  /* Mobile panels use the viewport instead of piling cards over controls. */
  .panel:not(.level-ceremony):not(.death-panel){width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100dvh - 12px)!important;border-width:3px!important}
  .fishing-mode-panel{width:calc(100vw - 20px)!important}.fishing-mode-grid{grid-template-columns:1fr!important;gap:8px!important;padding:10px!important}.fishing-mode-grid>button{min-height:94px!important}.fishing-mode-hero{grid-template-columns:76px minmax(0,1fr)!important;padding:10px!important}.fishing-mode-water{width:72px!important;height:62px!important}

  /* Death/respawn is a calm decision state—no shake, bounce, or zoom. */
  .death-panel{width:calc(100vw - 28px)!important;padding:22px 18px 18px!important;border:3px solid #704735!important;border-left-width:5px!important;background:linear-gradient(160deg,#f0d79c,#c8935d)!important;box-shadow:0 18px 50px rgba(23,35,28,.55),inset 0 2px 0 #fff0bb!important;color:#2f4233!important}
  .death-panel.death-enter{animation:none!important}.death-kicker{color:#7e4437!important;font-size:max(.38rem,8px)!important}.death-mark{width:52px;height:52px;margin:12px auto 10px;border:3px solid #7b4936;background:#d79065;box-shadow:inset 0 0 0 6px #efc786}.death-panel h2{color:#2f4233!important;text-shadow:1px 1px 0 #f8e5aa;font-size:.9rem!important}.death-panel p{color:#5d5f47!important;font-size:.86rem!important;line-height:1.2!important}.death-panel .pixel-btn{width:100%!important;min-width:0!important;min-height:48px!important}
}

@media(max-width:370px){
  #creator .creator-preview{grid-template-columns:88px minmax(0,1fr)!important}#creator .preview-stage{width:88px!important}
  #creator .creator-tab{font-size:.66rem!important}
  #skillbar{width:198px!important;max-width:198px!important}.sk{width:45px!important}
  #touch-btns{grid-template-columns:54px 43px!important}#btn-attack{width:54px!important}#btn-evade,#btn-interact{width:43px!important;height:43px!important}
}

/* ===== MOBILE GATE + CREATOR / SINGLE PIXEL PASSPORT ====================
   The phone entry flow deliberately uses one visual language: a compact
   teal masthead, a parchment passport, and clear state headings. The large
   illustrated login hero remains a desktop treatment only; it was competing
   with the actual choices on small screens. */
@media(max-width:760px){
  #login .login-card{animation:none!important;transform:none!important;opacity:1!important}
  #login .access-panel.hidden,#login .about-panel.hidden{display:none!important}
  #login{background:#5eafc3!important;padding:0!important}
  #login .realm-showcase{
    flex:0 0 82px!important;min-height:82px!important;max-height:82px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:10px 12px!important;background:linear-gradient(180deg,#4f9db1,#397b79)!important;
    border-bottom:4px solid #6f4331!important;box-shadow:inset 0 2px 0 rgba(255,244,185,.34)!important
  }
  #login .realm-eyebrow{font-size:max(.48rem,9px)!important;line-height:1.45!important;text-align:center;color:#ffe6a9!important;text-shadow:2px 2px 0 #28585a!important;letter-spacing:.08em!important}
  #login .realm-showcase h1,#login .realm-showcase>p,#login .login-hero-art,#login .realm-pillars{display:none!important}
  #login .login-card{
    flex:1!important;min-height:calc(100dvh - 82px)!important;width:100%!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
    padding:15px 14px calc(17px + env(safe-area-inset-bottom))!important;
    background:repeating-linear-gradient(0deg,rgba(112,70,44,.035) 0 1px,transparent 1px 5px),linear-gradient(160deg,#f4dda8,#dfb979)!important;
    border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:inset 0 3px 0 rgba(255,244,190,.8)!important
  }
  #login .login-card:after{right:9px!important;top:9px!important;width:24px!important;height:24px!important;border-color:rgba(103,64,42,.35)!important}
  #login .login-card[data-login-mode="menu"] .menu-logo{display:block!important;width:min(250px,76vw)!important;height:auto!important;max-height:72px!important;margin:0 auto 5px!important;filter:drop-shadow(0 3px 0 #5d3a31)!important}
  #login .login-card[data-login-mode="menu"] .login-sigil{display:none!important}
  #login .login-card[data-login-mode="menu"] .login-step{display:block!important;margin:0 auto 5px!important;color:#557c55!important;font-size:max(.38rem,7px)!important;text-align:center!important}
  #login .login-card[data-login-mode="menu"] .pixel-h2{margin:0!important;text-align:center!important;color:#2c4937!important;font-size:max(.78rem,14px)!important;line-height:1.3!important;text-shadow:1px 1px 0 #fff0ba!important}
  #login .login-card[data-login-mode="menu"] .login-sub{margin:5px 16px 11px!important;text-align:center!important;color:#5f6349!important;font-size:1rem!important;line-height:1.08!important}
  #login .main-menu-choices{gap:9px!important;margin:0!important}
  #login .menu-choice{grid-template-columns:38px minmax(0,1fr) 18px!important;min-height:62px!important;padding:9px 10px!important;border:2px solid #754934!important;background:linear-gradient(180deg,#e5a26d,#bd6d56)!important;box-shadow:inset 0 2px 0 #f8ca8d,inset 0 -3px 0 rgba(86,48,39,.22),0 4px 0 #59372e!important}
  #login .menu-choice:hover,#login .menu-choice:focus-visible{transform:translateY(-1px)!important;background:linear-gradient(180deg,#efb578,#ce785d)!important;border-color:#f7d88b!important}
  #login .menu-choice-icon{width:30px!important;height:30px!important;font-size:1rem!important;background:#438562!important;border:2px solid #6b452f!important;box-shadow:inset 0 0 0 2px #2b5c49,0 2px 0 #60402d!important}
  #login .menu-choice b{font-size:max(.43rem,8px)!important;color:#302724!important;line-height:1.25!important}
  #login .menu-choice small{font-size:1rem!important;line-height:1!important;color:#61443a!important}
  #login .menu-choice>strong{font-size:1.5rem!important;color:#fff1bc!important;text-shadow:2px 2px 0 #6b4030!important}
  #login .server-picker{margin:13px 0 0!important;padding:9px!important;background:rgba(255,239,180,.62)!important;border:2px solid #966345!important;box-shadow:inset 0 2px 0 rgba(255,249,202,.82),0 3px 0 #684536!important}
  #login .server-picker-head{align-items:baseline!important}.server-picker-head span{font-size:max(.39rem,8px)!important;color:#4a704d!important}.server-picker-head small{font-size:.78rem!important;color:#6a654b!important}
  #login .server-picker-list{gap:6px!important;margin-top:7px!important}.server-picker-list button{min-height:40px!important;padding:6px 8px!important;border:2px solid #86593d!important;box-shadow:inset 0 2px 0 #fff0b8,0 2px 0 #684536!important}.server-option-copy b{font-size:.85rem!important}.server-option-copy small{font-size:.65rem!important}.server-option em{font-size:.58rem!important}
  #login .login-card:not([data-login-mode="menu"]){padding-top:12px!important}
  #login .login-card:not([data-login-mode="menu"])>.menu-logo,#login .login-card:not([data-login-mode="menu"])>.login-sigil,#login .login-card:not([data-login-mode="menu"])>.login-step,#login .login-card:not([data-login-mode="menu"])>.pixel-h2,#login .login-card:not([data-login-mode="menu"])>.login-sub{display:none!important}
  #login .access-panel,#login .about-panel{margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:0!important}
  #login .access-back{align-self:flex-start!important;margin:0 0 10px!important;padding:5px 0!important;color:#4a704d!important;font-size:max(.4rem,8px)!important}
  #login .access-heading{margin:0 0 11px!important;padding:10px 11px 11px!important;border-left:4px solid #4d9569!important;background:rgba(255,239,180,.62)!important;box-shadow:inset 0 2px 0 rgba(255,249,202,.7),0 3px 0 rgba(104,69,54,.26)!important}
  #login .access-kicker{display:block!important;font:700 max(.38rem,7px) "Press Start 2P",monospace!important;letter-spacing:.09em!important;color:#557b51!important}
  #login .access-heading h3{margin:5px 0 2px!important;font:700 1.55rem/1 "Cinzel",serif!important;color:#2f4937!important;text-shadow:1px 1px 0 #fff0b8!important}
  #login .access-heading p{margin:0!important;font:1rem/1.05 "VT323",monospace!important;color:#666348!important}
  #login .login-input-wrap{gap:6px!important;margin-bottom:10px!important}.login-input-wrap>span{font-size:max(.38rem,7px)!important;color:#5c704f!important}.login-card #login-name{min-height:48px!important;padding:8px 10px!important;font-size:1.3rem!important;background:#fff0bf!important;border:2px solid #85583d!important}
  #login .login-existing{grid-template-columns:28px minmax(0,1fr)!important;gap:8px!important;margin:0 0 9px!important;padding:9px!important;border:2px solid #a07049!important;background:rgba(255,238,181,.72)!important;box-shadow:inset 0 2px 0 rgba(255,249,202,.7),0 3px 0 rgba(104,69,54,.24)!important}
  #login .login-existing .save-rune{width:21px!important;height:21px!important}.login-return{font-size:max(.38rem,7px)!important;line-height:1.25!important}.login-stats{font-size:.88rem!important}
  #login .login-existing #btn-continue{grid-column:1/-1!important;width:100%!important;min-height:45px!important;padding:8px!important;font-size:max(.44rem,8px)!important}
  #login .login-new{min-height:48px!important;padding:8px 10px!important;font-size:max(.44rem,8px)!important}.login-divider{margin:12px 0 7px!important}.login-divider span{font-size:max(.35rem,7px)!important}.quick-btn{min-height:36px!important;font-size:1rem!important}.login-note{margin-top:10px!important;font-size:.78rem!important;line-height:1.15!important}.login-recovery-error{margin:0 0 9px!important;padding:8px 9px!important;border:2px solid #a35d4e!important;background:#f1c69a!important;color:#643c35!important;font:1rem/1.05 "VT323",monospace!important;box-shadow:0 3px 0 #704735!important}
  #login .wallet-status-card{margin-bottom:8px!important;padding:10px!important;border:2px solid #a07049!important;background:rgba(255,238,181,.72)!important;box-shadow:inset 0 2px 0 rgba(255,249,202,.7),0 3px 0 rgba(104,69,54,.24)!important}.wallet-status-card b{font-size:max(.38rem,7px)!important}.wallet-status-card small{font-size:.9rem!important;line-height:1.1!important}.wallet-profile-actions{gap:8px!important;padding:9px!important;border:2px solid #a07049!important}.wallet-action-note{font-size:.9rem!important}.onchain-policy{margin-top:10px!important;padding:9px!important;border:2px solid #a07049!important}.onchain-policy>span{font-size:max(.38rem,7px)!important}.onchain-policy small{font-size:.88rem!important;line-height:1.05!important}
  #login .about-panel .access-heading{margin-bottom:10px!important}.about-panel .credit-list{grid-template-columns:1fr!important;gap:7px!important}.credit-list>div{min-height:48px!important;padding:8px 10px!important;flex-direction:row!important;align-items:center!important}.credit-list b{font-size:1.1rem!important}.credit-list span{font-size:1rem!important}.about-panel>p{margin-top:11px!important;font-size:.9rem!important;line-height:1.2!important}

  /* Character creation uses the same paper/wood frame, with a short title bar
     and a compact preview strip so the editor remains the focal area. */
  #creator{padding:0!important;background:#5eafc3!important}
  #creator .creator-backdrop{display:none!important}
  #creator .creator-card{width:100%!important;height:100dvh!important;max-height:100dvh!important;background:#f0d49a!important;border:0!important;border-radius:0!important;clip-path:none!important;box-shadow:inset 0 3px 0 #fff0b8!important}
  #creator .creator-head{flex:0 0 62px!important;display:grid!important;grid-template-columns:55px minmax(0,1fr) 28px!important;gap:8px!important;padding:7px 10px!important;background:linear-gradient(180deg,#4d9478,#367260)!important;border-bottom:4px solid #704735!important}
  #creator .creator-logo{width:52px!important;height:38px!important;object-fit:contain!important;filter:drop-shadow(0 2px 0 #2d4d3a)!important}.creator-head>div:nth-child(2){min-width:0!important}.creator-step{font-size:max(.38rem,7px)!important;color:#ffe7a8!important;margin-bottom:4px!important}.creator-card .creator-head h2{font-size:max(.62rem,11px)!important;line-height:1.22!important;color:#fff1b0!important;text-shadow:2px 2px 0 #315b4a!important}.creator-head p{display:none!important}.creator-progress{display:none!important}.creator-close{right:7px!important;top:7px!important;width:28px!important;height:28px!important;border:2px solid #a86f4b!important;background:#6a4538!important;color:#ffe1a4!important;font-size:18px!important}
  #creator .creator-preview{flex:0 0 176px!important;grid-template-columns:144px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:10px!important;padding:8px!important;background:#dfb879!important;border:0!important;border-bottom:4px solid #704735!important}#creator .preview-stage{width:144px!important;height:156px!important;min-height:156px!important;border:3px solid #8c5b3d!important;clip-path:none!important;background:linear-gradient(#6ba7b0 0 58%,#69a968 59% 100%)!important;box-shadow:inset 0 0 0 2px rgba(255,240,178,.34),0 3px 0 #704735!important}#creator .preview-zone{font-size:.53rem!important;color:#fff0b2!important;text-shadow:1px 1px 0 #4c543a!important}#creator .preview-summary{padding:10px 11px!important;background:rgba(255,239,180,.66)!important;border-left:4px solid var(--preview-accent,#d0603a)!important;overflow:hidden!important}#creator .preview-summary>span{font-size:.6rem!important}#creator .preview-summary>strong{font-size:1.35rem!important;color:#334a37!important;margin:5px 0!important}#creator .preview-summary>p{font-size:.88rem!important;line-height:1.08!important;color:#5d6049!important;-webkit-line-clamp:4!important}#creator .preview-summary>div{margin-top:8px!important;flex-wrap:wrap!important}#creator .preview-summary>div span{font-size:.62rem!important;color:#4c5d45!important;border-color:#b58a59!important}
  #creator .creator-tabs{flex:0 0 42px!important;background:#704735!important;border-bottom:4px solid #4c342c!important}.creator-tab{min-height:42px!important;color:#f3d79b!important;font-size:max(.38rem,7px)!important;border-right:1px solid rgba(255,241,176,.2)!important}.creator-tab.active{color:#fff5c4!important;background:#4d9276!important}.creator-tab.active:after{background:#f2d27d!important;box-shadow:none!important}
  #creator .creator-panel{background:#f0d49a!important;padding:10px 10px 72px!important}.creator-panel .opt-row{border-bottom:2px solid rgba(112,71,53,.18)!important}.creator-panel .opt-row>span,#creator .opt-name>span{font-size:max(.4rem,8px)!important;color:#526047!important}.creator-panel .swatch{border:2px solid #9c704b!important;background:var(--swatch-color,#e0bc7d)!important;background-image:none!important;-webkit-appearance:none!important;appearance:none!important}.creator-panel .swatch[data-color]{box-shadow:inset 0 0 0 2px rgba(255,240,184,.32),0 2px 0 rgba(91,57,40,.35)}.creator-panel .swatch.sel{border-color:#39765a!important;box-shadow:inset 0 0 0 2px rgba(255,255,210,.42),0 0 0 3px #f6df9c!important}.class-choice-row .cls-btn{background:#dfbd80!important;border:2px solid #a07049!important}.class-choice-row .cls-btn b{color:#334a37!important}.class-choice-row .cls-btn small{color:#5c624d!important}.class-choice-row .cls-btn.sel{background:#8fc486!important;border-color:#477b5d!important}.class-choice-row .cls-btn i{background:#477b5d!important;border-color:#315d48!important;color:#ffe3a0!important}
  #creator .creator-foot{background:#4a806b!important;border-top:4px solid #704735!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important}.creator-foot .btn-ghost{min-height:42px!important;background:#e0b477!important;border:2px solid #704735!important;color:#4d3b32!important;font-size:max(.38rem,7px)!important}.creator-foot .pixel-btn{min-height:42px!important;background:#f0b76d!important;border:2px solid #704735!important;color:#3a3029!important;font-size:max(.42rem,8px)!important}
}

@media(max-width:430px){
  #creator .creator-preview{flex-basis:156px!important;grid-template-columns:120px minmax(0,1fr)!important;gap:8px!important;padding:7px!important}
  #creator .preview-stage{width:120px!important;height:136px!important;min-height:136px!important}
  #creator .preview-summary{padding:8px!important}
  #creator .preview-summary>strong{font-size:1.18rem!important;margin:3px 0!important}
  #creator .preview-summary>p{font-size:.78rem!important;-webkit-line-clamp:3!important}
  #creator .preview-summary>div span{font-size:.54rem!important}
}

/* Color presets must win in every creator layout, including iPad landscape
   where the desktop parchment rule remains active. */
#creator .creator-panel .swatch[data-color]{background:var(--swatch-color)!important;background-image:none!important;-webkit-appearance:none!important;appearance:none!important}
#creator #char-preview{max-width:100%!important;max-height:100%!important}

/* ===== FINAL REALM CHAT SURFACE ========================================== */
.chat-panel{
  width:min(580px,calc(100vw - 32px))!important;
  height:min(620px,calc(100dvh - 56px))!important;
  max-height:calc(100dvh - 24px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  border:3px solid #704735!important;
  border-radius:0!important;
  background:linear-gradient(160deg,#f3dda8,#dfbd7d)!important;
  box-shadow:0 0 0 2px #b47c4e,0 24px 70px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,246,194,.55)!important;
}
.chat-panel::before{content:"WORLD / 01";right:76px;top:15px;color:#f4e3a6;border-color:rgba(255,236,164,.46);font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em}
.chat-panel>.panel-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto 30px!important;align-items:center!important;padding:11px 13px!important;min-height:58px!important;background:linear-gradient(180deg,#67bc86,#45996b)!important;border-bottom:3px solid #704735!important;box-shadow:inset 0 2px 0 rgba(219,246,174,.48),inset 0 -2px 0 rgba(34,77,54,.22)!important}
.chat-panel>.panel-head h2{font-family:"VT323",monospace!important;font-size:1.55rem!important;letter-spacing:.04em;color:#263f31!important;text-shadow:1px 1px 0 #bfe09f!important}.chat-panel>.panel-head .panel-kicker{font-family:"Press Start 2P",monospace!important;font-size:7px!important;color:#f5e6a8!important}
.chat-presence{padding:5px 7px!important;border:2px solid rgba(49,94,68,.55)!important;background:rgba(255,238,177,.4)!important;color:#315b42!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:10px!important;font-weight:800!important;letter-spacing:.04em!important}.chat-presence i{width:7px;height:7px;background:#a8754b}.chat-presence.online i{background:#2f8d5a;box-shadow:0 0 7px #baf08b}.chat-panel>.panel-head .panel-close{width:30px!important;height:30px!important;background:#efd597!important;border:2px solid #704735!important;color:#2f4735!important;box-shadow:0 2px 0 #523526!important}
.chat-messages{min-height:0!important;padding:15px 15px 12px!important;background:repeating-linear-gradient(0deg,rgba(111,70,44,.035) 0 1px,transparent 1px 6px),linear-gradient(180deg,#e7c98e,#d9b679)!important;scrollbar-color:#7b9a63 #d8b477!important}.chat-empty{color:#5c684f!important}.chat-empty>i{border:2px solid #98704a!important;background:rgba(255,239,180,.45)}.chat-empty strong{font-family:"VT323",monospace!important;font-size:1.45rem!important;color:#40523d!important}.chat-empty p{font-size:13px!important;color:#687052!important}
.chat-message{grid-template-columns:36px minmax(0,1fr)!important;gap:9px!important;margin-bottom:11px!important}.chat-avatar{width:32px!important;height:32px!important;border:2px solid #704735!important;background:#4b936d!important;color:#fff0b2!important;box-shadow:inset 0 0 0 3px #2f644a,0 2px 0 #6c4936!important;transform:none!important}.chat-avatar span{transform:none!important;font-family:"VT323",monospace!important;font-size:1.15rem!important;text-shadow:1px 1px 0 #31543f}.chat-meta{gap:7px!important;margin-bottom:4px!important}.chat-meta b{font-family:"IBM Plex Sans",sans-serif!important;font-size:12px!important;font-weight:800!important;color:#40533e!important}.chat-meta time{font-family:"IBM Plex Sans",sans-serif!important;font-size:10px!important;color:#777052!important}
.chat-bubble p{padding:8px 10px!important;border:2px solid #986b49!important;border-left:4px solid #4e936a!important;border-radius:0!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important;background:#f3dda8!important;color:#304334!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important;box-shadow:inset 0 2px 0 rgba(255,246,194,.65),0 2px 0 #7a523d!important}.chat-message.self .chat-avatar{background:#b18443!important;border-color:#704735!important}.chat-message.self .chat-bubble p{border-color:#8a653f!important;border-left-color:#477e5a!important;background:#c7df9c!important;color:#294333!important}.chat-message.system{margin:9px 0!important}.chat-message.system p{padding:5px 8px!important;border:2px solid #98704a!important;background:#d9b477!important;color:#536047!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:11px!important;font-weight:800!important}
.chat-compose{padding:11px 13px max(13px,env(safe-area-inset-bottom))!important;border-top:3px solid #704735!important;background:#d2aa6c!important}.chat-compose>label{margin-bottom:6px!important;font-family:"Press Start 2P",monospace!important;font-size:7px!important;color:#5b684a!important}.chat-compose>div{gap:7px!important}.chat-compose input{height:44px!important;padding:8px 10px!important;border:2px solid #8a5c41!important;background:#fff0bb!important;color:#2d4033!important;font-family:"IBM Plex Sans",sans-serif!important;font-size:14px!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.65)!important}.chat-compose input::placeholder{color:#778064!important}.chat-compose input:focus{border-color:#4a8e65!important;box-shadow:0 0 0 2px rgba(74,142,101,.18),inset 0 2px 0 rgba(255,255,255,.65)!important}.chat-compose #chat-count{right:88px!important;top:15px!important;color:#6d7558!important;font-size:10px!important}.chat-compose button{min-width:82px!important;border:2px solid #2d674a!important;border-bottom:4px solid #214a37!important;background:linear-gradient(180deg,#69c487,#489f6e)!important;color:#102d22!important;font-family:"Press Start 2P",monospace!important;font-size:8px!important;text-shadow:1px 1px 0 rgba(195,241,165,.45)!important}.chat-compose>small{margin-top:6px!important;color:#697052!important;font-size:11px!important}
.world-chat-bubble{border:2px solid #704735;border-radius:0 0 4px 4px;background:#f1d89f;color:#2e4032;box-shadow:0 4px 12px rgba(0,0,0,.34),inset 3px 0 0 var(--chat-accent),inset 0 2px 0 rgba(255,246,194,.7);font-family:"IBM Plex Sans",sans-serif}.world-chat-bubble::before{border-left-color:#704735;background:#f1d89f}.world-chat-bubble>span{color:#4b7653;font-size:9px;font-weight:800}.world-chat-bubble>p{color:#304334;font-size:13px;font-weight:600}.world-chat-bubble.self{background:#c7df9c}.world-chat-bubble.duel{background:#f0c3a0}
@media(max-width:760px){.chat-panel{width:calc(100vw - 18px)!important;height:min(650px,calc(100dvh - 20px))!important;max-height:calc(100dvh - 20px)!important}.chat-panel>.panel-head{padding:10px!important;min-height:53px!important}.chat-panel>.panel-head h2{font-size:1.45rem!important}.chat-panel>.panel-head .panel-kicker{display:none}.chat-presence{font-size:9px!important}.chat-messages{padding:12px 10px 10px!important}.chat-compose{padding:10px 10px max(12px,env(safe-area-inset-bottom))!important}.chat-compose>small{font-size:10px!important}.chat-compose input{font-size:16px!important}.chat-compose button{min-width:74px!important;font-size:8px!important}.chat-message{grid-template-columns:31px minmax(0,1fr)!important;gap:7px!important}.chat-avatar{width:28px!important;height:28px!important}.chat-bubble p{font-size:13px!important;line-height:1.38!important}}

/* The dock is the chat panel's signpost: same wood edge, readable copy, no
   dark debug-console treatment leaking into the bright game HUD. */
#chat-dock{
  width:min(300px,calc(100vw - 28px))!important;
  min-height:52px!important;
  padding:8px 10px!important;
  border:2px solid #704735!important;
  border-bottom-width:4px!important;
  border-radius:0!important;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)!important;
  background:linear-gradient(180deg,#f0d39a,#cfa56b)!important;
  color:#2f4737!important;
  box-shadow:inset 0 2px 0 rgba(255,246,194,.72),0 4px 0 #4d332d,0 14px 28px rgba(0,0,0,.36)!important;
}
#chat-dock:hover,#chat-dock:focus-visible{border-color:#b47c4e!important;background:linear-gradient(180deg,#f8dfa5,#d8b376)!important;transform:translateY(-1px)!important}
#chat-dock:active{transform:translateY(2px)!important;border-bottom-width:2px!important}
#chat-dock .chat-dock-sigil{border:2px solid #704735;background:#4a8b68;box-shadow:inset 0 0 0 2px #2e644b,0 2px 0 #704735}
#chat-dock .chat-dock-sigil i{background:#f8e0a0;box-shadow:0 0 5px rgba(255,233,160,.4)}
#chat-dock .chat-dock-copy{gap:2px}
#chat-dock .chat-dock-copy small{font-family:"Press Start 2P",monospace;font-size:7px;color:#4c7655;letter-spacing:.08em}
#chat-dock .chat-dock-copy b{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12px;font-weight:700;color:#344c3b}
#chat-dock kbd{background:#f4dda8;border:2px solid #98704a;color:#5d684e;font-family:"Press Start 2P",monospace;font-size:7px;box-shadow:0 2px 0 #704735}
@media(max-width:760px){
  #chat-dock{width:42px!important;min-height:42px!important;padding:6px!important;background:linear-gradient(180deg,#f0d39a,#cfa56b)!important}
  #chat-dock .chat-dock-sigil{width:28px;height:24px}
  #chat-dock .chat-dock-copy,#chat-dock kbd{display:none!important}
}
/* Tablet and phone-landscape HUD: keep chat beside the status card. The old
   300px bottom-left dock occupied the same touch zone as the analog stick. */
@media(min-width:761px) and (max-width:1180px){
  #chat-dock{
    left:calc(var(--realm-safe-left) + 262px)!important;
    right:auto!important;
    top:var(--realm-safe-top)!important;
    bottom:auto!important;
    width:48px!important;
    min-height:48px!important;
    padding:7px!important;
    grid-template-columns:1fr!important;
  }
  #chat-dock .chat-dock-sigil{margin:auto}
  #chat-dock .chat-dock-copy,#chat-dock kbd{display:none!important}
  #chat-dock .chat-unread{left:auto;right:-4px;top:-6px}
}

/* ===== STARTER GUIDE / TRAVELER HANDBOOK ================================ */
.guide-panel{
  width:min(860px,calc(100vw - 28px))!important;
  height:min(720px,calc(100dvh - 28px))!important;
  max-height:calc(100dvh - 20px)!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:0!important;
  overflow:hidden!important;
  border:3px solid #704735!important;
  border-radius:0!important;
  background:linear-gradient(160deg,#f3dda8,#dfbd7d)!important;
  box-shadow:0 0 0 2px #b47c4e,0 28px 80px rgba(0,0,0,.68),inset 0 0 0 2px rgba(255,246,194,.55)!important;
}
#panel-guide.hidden{display:none!important}
.guide-panel>.guide-head{display:grid!important;grid-template-columns:minmax(0,1fr) 150px 32px;align-items:center;gap:14px;margin:0!important;padding:12px 15px!important;background:linear-gradient(180deg,#67bc86,#45996b)!important;border-bottom:3px solid #704735!important;box-shadow:inset 0 2px 0 rgba(219,246,174,.48)!important}
.guide-head h2{font-family:"VT323",monospace!important;font-size:1.65rem!important;letter-spacing:.04em;color:#263f31!important;text-shadow:1px 1px 0 #bfe09f!important}.guide-head .panel-kicker{font-size:7px!important;color:#fff0b2!important}.guide-progress>span{display:block;margin-bottom:5px;font-family:"Press Start 2P",monospace;font-size:6px;color:#315b42}.guide-progress>div{height:8px;padding:1px;background:#28543e;border:1px solid #704735}.guide-progress i{display:block;width:25%;height:100%;background:#ffe19a;transition:width .2s steps(4)}
.guide-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#704735;border-bottom:3px solid #4d332d}.guide-tabs button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px;border:0;border-right:1px solid rgba(255,235,174,.2);background:#8b5d43;color:#f3d99c}.guide-tabs button:last-child{border-right:0}.guide-tabs button i{display:grid;place-items:center;width:25px;height:25px;background:#52382f;border:1px solid #d2a66c;font-family:"VT323",monospace;font-size:1rem;font-style:normal}.guide-tabs button span{font-family:"Press Start 2P",monospace;font-size:7px}.guide-tabs button.active{background:#4c8f6c;color:#fff0b2}.guide-tabs button.active i{background:#f0d397;border-color:#704735;color:#36533f;box-shadow:0 2px 0 #57382e}
.guide-pages{min-height:0;overflow:auto;background:repeating-linear-gradient(0deg,rgba(111,70,44,.035) 0 1px,transparent 1px 6px),linear-gradient(160deg,#f1daa4,#ddb87a)}.guide-page{min-height:100%;padding:18px}.guide-page.hidden{display:none!important}.guide-hero{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:18px;padding:18px;background:linear-gradient(110deg,#4b916c,#397557);border:3px solid #704735;box-shadow:inset 0 2px 0 rgba(203,241,164,.45),0 4px 0 rgba(112,71,53,.35)}.guide-seal{position:relative;width:84px;height:84px;display:grid;place-items:center;margin:auto;background:#efd28d;border:3px solid #704735;transform:rotate(45deg);box-shadow:inset 0 0 0 5px #c18d56,0 5px 0 #50342d}.guide-seal span{font-family:"VT323",monospace;font-size:3rem;color:#385a43;transform:rotate(-45deg)}.guide-seal i{position:absolute;inset:13px;border:2px solid #4b8764}.guide-hero>div:last-child>span,.guide-section-title>span,.guide-section-title>div>span{font-family:"Press Start 2P",monospace;font-size:7px;color:#ffe7a4}.guide-hero h3,.guide-section-title h3{margin:5px 0 3px;font-family:"VT323",monospace;font-size:1.8rem;color:#fff1b2;text-shadow:2px 2px 0 #31533e}.guide-hero p{margin:0!important;color:#d5e4bd!important;font-family:"IBM Plex Sans",sans-serif;font-size:13px!important;line-height:1.45!important}
.guide-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.guide-control-grid article{padding:13px;background:#f0d79f;border:2px solid #986a49;box-shadow:inset 0 2px 0 #fff0bb,0 3px 0 #76503c}.guide-control-grid article>span{font-family:"Press Start 2P",monospace;font-size:7px;color:#4b7c58}.guide-control-grid strong{display:block;margin:5px 0 9px;font-family:"VT323",monospace;font-size:1.25rem;color:#344b39}.guide-control-grid article>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 8px}.guide-control-grid kbd{min-width:58px;padding:5px;text-align:center;background:#4b8968;border:2px solid #704735;color:#fff0b2;font-family:"VT323",monospace;font-size:.95rem;box-shadow:0 2px 0 #50342d}.guide-control-grid b{font-size:12px;color:#5a624b}
.guide-callout{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;margin-top:12px;padding:11px 13px;background:#d3e29a;border:2px solid #6d824d;box-shadow:inset 4px 0 0 #4b8b62}.guide-callout>i{width:28px;height:24px;background:#d7a64c;border:2px solid #704735;box-shadow:inset 0 0 0 4px #f4d77e}.guide-callout strong{font-family:"VT323",monospace;font-size:1.12rem;color:#354938}.guide-callout p{margin:2px 0 0!important;font-size:12px!important;color:#5b664d!important}
.guide-section-title{margin-bottom:13px;padding:13px 15px;background:#4a8967;border:3px solid #704735}.guide-section-title h3{font-size:1.55rem}.guide-section-title p{margin:2px 0 0!important;color:#d6e7c3!important;font-size:12px!important}.guide-checklist{display:grid;gap:8px}.guide-checklist article{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;background:#efd497;border:2px solid #986a49;box-shadow:inset 0 2px 0 #fff0ba,0 3px 0 rgba(112,71,53,.35)}.guide-checklist article>i{width:34px;height:34px;display:grid;place-items:center;background:#a86a45;border:2px solid #704735;color:#ffe29c;font-family:"VT323",monospace;font-size:1.25rem;font-style:normal}.guide-checklist strong{font-family:"VT323",monospace;font-size:1.2rem;color:#344b39}.guide-checklist p{margin:2px 0 0!important;color:#60674e!important;font-size:12px!important}.guide-checklist article>b{min-width:58px;padding:6px;text-align:center;background:#a65e4d;border:2px solid #704735;color:#ffe3a4;font-family:"Press Start 2P",monospace;font-size:6px}.guide-checklist article.done{background:#cfe0a0;border-color:#668050}.guide-checklist article.done>i,.guide-checklist article.done>b{background:#4d9168}.guide-checklist article.done>i{font-size:0}.guide-checklist article.done>i::after{content:"✓";font-size:1.2rem}
.guide-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.guide-feature-grid article{position:relative;min-height:116px;padding:13px 11px 10px;background:#efd497;border:2px solid #986a49;box-shadow:inset 0 2px 0 #fff0ba,0 3px 0 rgba(112,71,53,.35)}.guide-feature-grid article>i{position:absolute;right:8px;top:7px;color:#a47a50;font-family:"VT323",monospace;font-size:1rem;font-style:normal}.guide-feature-grid strong{display:block;padding-right:24px;font-family:"VT323",monospace;font-size:1.16rem;color:#354a39}.guide-feature-grid p{margin:7px 0 0!important;color:#60664e!important;font-size:11px!important;line-height:1.4!important}
.guide-quest-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.guide-quest-title button{min-height:38px;padding:7px 10px;background:#efd497;border:2px solid #704735;border-bottom-width:4px;color:#36513d;font-family:"Press Start 2P",monospace;font-size:7px}.guide-quest-list{display:grid;gap:7px}.guide-quest-card{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 10px;background:#efd497;border:2px solid #986a49;box-shadow:inset 0 2px 0 #fff0ba}.guide-quest-giver{display:flex;align-items:center;gap:6px}.guide-quest-giver i{width:28px;height:28px;display:grid;place-items:center;background:#4c8b68;border:2px solid #704735;color:#ffe7a3;font-family:"VT323",monospace;font-size:1.1rem;font-style:normal}.guide-quest-giver span{font-family:"VT323",monospace;font-size:1rem;color:#4c5d45}.guide-quest-card strong{font-family:"VT323",monospace;font-size:1.08rem;color:#334a38}.guide-quest-card p{margin:1px 0!important;color:#63684f!important;font-size:11px!important}.guide-quest-card small{font-family:"IBM Plex Sans",sans-serif;font-size:9px;color:#8a6a45}.guide-quest-card>b{min-width:70px;padding:6px;text-align:center;background:#a66a49;border:2px solid #704735;color:#ffe4a3;font-family:"Press Start 2P",monospace;font-size:6px}.guide-quest-card.active{background:#d9e2a0;border-color:#66804f}.guide-quest-card.active>b{background:#4d8e67}.guide-quest-card.done{opacity:.65}.guide-quest-card.done>b{background:#58745e}
.guide-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px max(10px,env(safe-area-inset-bottom));background:#6c4738;border-top:3px solid #4d332d}.guide-footer>button,.guide-footer>div>button{min-height:40px;padding:8px 11px;border:2px solid #3d2c29;border-bottom-width:4px;background:#d6ad72;color:#403831;font-family:"Press Start 2P",monospace;font-size:7px}.guide-footer>div{display:flex;gap:7px}.guide-footer #guide-next{background:#67b982;color:#183a29;border-color:#315842}.guide-footer button:disabled{opacity:.38}
@media(max-width:720px){
  .guide-panel{width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important}.guide-panel>.guide-head{grid-template-columns:minmax(0,1fr) 86px 32px;padding:9px 10px!important;gap:8px}.guide-head h2{font-size:1.35rem!important}.guide-progress>span{font-size:5px}.guide-tabs button{min-height:42px;gap:4px}.guide-tabs button i{width:22px;height:22px}.guide-tabs button span{font-size:6px}.guide-page{padding:10px}.guide-hero{grid-template-columns:68px minmax(0,1fr);gap:11px;padding:12px}.guide-seal{width:58px;height:58px}.guide-seal span{font-size:2rem}.guide-hero h3{font-size:1.35rem}.guide-hero p{font-size:11px!important}.guide-control-grid{grid-template-columns:1fr;gap:7px;margin-top:8px}.guide-control-grid article{padding:9px}.guide-control-grid strong{margin:3px 0 6px}.guide-callout{margin-top:8px;padding:8px}.guide-section-title{padding:9px 10px;margin-bottom:8px}.guide-section-title h3{font-size:1.3rem}.guide-checklist{gap:6px}.guide-checklist article{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:8px}.guide-checklist article>i{width:28px;height:28px}.guide-checklist p{font-size:10px!important}.guide-feature-grid{grid-template-columns:repeat(2,1fr);gap:6px}.guide-feature-grid article{min-height:96px;padding:9px}.guide-feature-grid p{font-size:10px!important}.guide-quest-title{align-items:flex-start}.guide-quest-title button{font-size:6px;padding:6px}.guide-quest-card{grid-template-columns:60px minmax(0,1fr) auto;gap:7px;padding:7px}.guide-quest-giver{display:grid;justify-items:center}.guide-quest-giver span{font-size:.85rem}.guide-quest-card p{font-size:10px!important}.guide-quest-card>b{min-width:58px;font-size:5px}.guide-footer{padding:7px}.guide-footer>button,.guide-footer>div>button{min-height:38px;padding:7px;font-size:6px}
}
@media(max-width:390px){
  .guide-tabs button span{display:none}.guide-tabs button i{width:26px}.guide-progress{display:none}.guide-panel>.guide-head{grid-template-columns:minmax(0,1fr) 32px}.guide-hero{grid-template-columns:52px minmax(0,1fr)}.guide-seal{width:46px;height:46px}.guide-seal i{inset:8px}.guide-hero p{display:none}.guide-feature-grid{grid-template-columns:1fr}.guide-feature-grid article{min-height:76px}.guide-checklist article{grid-template-columns:28px minmax(0,1fr)}.guide-checklist article>b{grid-column:2;justify-self:start}.guide-checklist p{display:none}.guide-quest-title button{display:none}.guide-quest-card{grid-template-columns:42px minmax(0,1fr)}.guide-quest-giver span{display:none}.guide-quest-card>b{grid-column:2;justify-self:start}.guide-quest-card p{display:none}.guide-footer #guide-skip{font-size:0}.guide-footer #guide-skip::after{content:"CLOSE";font-size:6px}
}

@media(max-width:720px){
  #panel-realms.battle-realms-panel{top:6px!important;right:auto!important;bottom:auto!important;left:6px!important;width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:none!important;transform:none!important;animation:none!important}
}