:root{--ink:#171717;--paper:#fdfcf7;--grass:#92dc78;--yellow:#f8db26}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171717;color:var(--ink);font-family:"Courier New",monospace}button{font:inherit}.shell{width:100%;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;background:#d9d4c7;padding:9px;gap:7px}.bar,.hud,.hotbar,footer{background:var(--paper);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}.bar{min-height:50px;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px}.bar>div{display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;width:32px;height:32px;background:var(--yellow);border:3px solid var(--ink);font-weight:900;transform:rotate(-3deg)}h1{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.25rem,3vw,2rem);letter-spacing:.035em}.badge{padding:3px 7px;background:var(--grass);border:2px solid var(--ink);font-weight:700;font-size:.72rem}.status{font-weight:700;font-size:.8rem;white-space:nowrap}.status:before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:2px solid var(--ink);border-radius:50%;background:#f15b4d}.status.online:before{background:#48cc5d}.stage{position:relative;width:100%;height:100%;min-height:0;background:var(--paper);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.hotbar{justify-self:center;display:grid;grid-template-columns:repeat(4,minmax(70px,120px));gap:5px;padding:5px;margin-top:-2px;background:#b9ef9f}.hot-slot{min-height:40px;border:3px solid var(--ink);background:#fff;display:grid;place-items:center;text-align:center;font-weight:900;font-size:.7rem;padding:3px;cursor:pointer}.hot-slot small{display:block}.hud{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(230px,1fr) minmax(280px,.85fr);background:linear-gradient(#b9ef9f,#8fdb75)}.vitals,.levelbox,.quest{padding:7px 12px}.vitals{display:grid;gap:1px}.vitals span{font-weight:900;font-size:.92rem}.levelbox{border-left:4px solid var(--ink);display:grid;align-content:center;gap:3px}.levelbox strong{font-family:Impact,"Arial Black",sans-serif;font-size:1.12rem;letter-spacing:.03em}.quest{border-left:4px solid var(--ink);display:grid;gap:1px;font-size:.8rem}.quest small{font-weight:900}.quest strong{font-family:Arial,sans-serif}.xpbar{height:13px;border:3px solid var(--ink);background:#fff}.xpbar i{display:block;height:100%;background:#7c3aed}.exptext{font-weight:900;font-size:.72rem}.controls{display:none}footer{padding:4px 10px;text-align:center;font-size:.68rem;font-weight:700}.panel{position:fixed;z-index:5;top:64px;right:18px;width:min(370px,calc(100vw - 24px));max-height:calc(100dvh - 80px);overflow:auto;background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:15px}.panel.wide{width:min(620px,calc(100vw - 24px))}.panel[hidden],.prompt[hidden]{display:none}.panel h2{margin:0 0 5px;font-family:Impact,"Arial Black",sans-serif}.panel>button{position:absolute;right:9px;top:9px;border:2px solid var(--ink);background:#fff;font-weight:900}.slots,.items,.item-grid{display:grid;gap:8px;margin-top:12px}.item-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.slot,.item,.ability,.shop-item,.job-card{border:3px solid var(--ink);padding:9px;background:#fff}.slot b,.item b,.ability b{display:block}.item,.ability,.shop-item,.job-card{width:100%;text-align:left;cursor:pointer}.item:hover,.ability:hover,.shop-item:hover,.job-card:hover{background:var(--yellow)}.drop-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.dropzone{display:grid;place-items:center;min-height:64px;border:3px dashed var(--ink);background:#d7efff;font-weight:900;text-align:center}.dropzone.danger{background:#ffb5ad}.empty{padding:16px;border:3px dashed var(--ink);text-align:center}.prompt{position:fixed;z-index:3;left:50%;bottom:155px;translate:-50%;padding:8px 12px;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:900;text-align:center}.npc-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.npc-list{display:grid;gap:7px}.offline{position:fixed;inset:50% auto auto 50%;translate:-50% -50%;display:none;gap:8px;background:var(--yellow);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px;text-align:center;z-index:8}.offline.show{display:grid}
@media(max-width:700px){.shell{padding:5px;gap:4px;grid-template-rows:auto minmax(0,1fr) auto auto auto auto}.badge{display:none}.bar{min-height:39px;padding:3px 7px}.bar h1{font-size:1.1rem}.mark{width:28px;height:28px}.hotbar{grid-template-columns:repeat(4,1fr);width:100%;padding:3px;gap:3px}.hot-slot{min-height:31px;font-size:.58rem}.hud{grid-template-columns:1fr 1fr}.vitals,.levelbox,.quest{padding:4px 7px}.vitals span{font-size:.72rem}.vitals small{display:none}.levelbox{border-left:4px solid var(--ink)}.levelbox strong{font-size:.86rem}.exptext{font-size:.58rem}.quest{grid-column:1/-1;border-left:0;border-top:4px solid var(--ink);font-size:.62rem}.controls{display:flex;justify-content:space-between;align-items:center;height:54px}.controls>div:last-child{display:flex;gap:5px}.dpad{display:grid;grid-template-columns:repeat(3,38px);gap:2px}.dpad button:first-child{grid-column:2}.dpad button{height:25px;border:3px solid var(--ink);background:#fff;font-weight:900}.attack{width:50px;height:50px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);font-size:.6rem;font-weight:900;box-shadow:3px 3px 0 var(--ink)}.ultimate{background:#bd8cff}footer{display:none}.panel{top:45px;right:7px;max-height:calc(100dvh - 52px)}.prompt{bottom:180px;font-size:.65rem}}
@media(max-height:620px){.shell{padding:4px;gap:3px}.bar{min-height:36px}.hot-slot{min-height:28px}.hud{font-size:.68rem}.quest span{display:none}}
.prompt{top:68px;bottom:auto}
@media(max-width:700px){.prompt{top:48px;bottom:auto}}
.account-status{justify-content:flex-end}.account-status>span:first-child{font-weight:900}.account-status button{border:2px solid var(--ink);background:#fff;font-weight:900;cursor:pointer}
.panel{font-family:Arial,sans-serif;line-height:1.35}.panel h2{letter-spacing:.04em}.slot,.item,.ability,.shop-item,.job-card{line-height:1.35}.slot b,.item b,.ability b,.shop-item b,.job-card b{display:block;margin-bottom:4px}.item-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.item>div{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.item button{border:2px solid var(--ink);background:var(--paper);font-size:.75rem;font-weight:800}
.auth-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#87cfee,#b9ef9f 55%,#f8db26)}.auth-screen[hidden]{display:none}.auth-card{width:min(460px,100%);display:grid;gap:12px;padding:24px;background:var(--paper);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);font-family:Arial,sans-serif}.auth-card h2{margin:0;font:900 2rem/1 Impact,"Arial Black",sans-serif;letter-spacing:.04em}.auth-card p{margin:0;line-height:1.45}.auth-stamp{justify-self:start;padding:5px 8px;background:var(--yellow);border:3px solid var(--ink);font:900 .75rem "Courier New",monospace;transform:rotate(-1deg)}.auth-card label{display:grid;gap:5px;font-weight:900}.auth-card input{width:100%;padding:11px;border:3px solid var(--ink);background:#fff;font:700 1rem Arial,sans-serif}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.auth-actions button{padding:11px;border:3px solid var(--ink);background:var(--grass);font-weight:900;cursor:pointer}.auth-actions button:first-child{background:var(--yellow)}.auth-error{min-height:1.25em;color:#b42318;font-weight:900;line-height:1.35}
.color-step{grid-template-columns:120px 1fr;align-items:center;gap:8px 14px;margin:0;padding:8px 12px 12px;border:3px solid var(--ink);background:#e8f7ff}.color-step[hidden]{display:none}.color-step legend{padding:0 6px;font-weight:900}.color-step canvas{grid-row:1/3;width:110px;height:110px;background:#fff;border:3px solid var(--ink)}.color-step small{line-height:1.3}.color-choices{display:flex;flex-wrap:wrap;gap:8px}.color-choices button{width:38px;height:38px;padding:0;border:4px solid #fff;outline:3px solid var(--ink);background:var(--swatch);cursor:pointer}.color-choices button[aria-pressed="true"]{outline-width:5px;transform:rotate(-4deg) scale(1.08)}.color-choices button:focus-visible{box-shadow:0 0 0 5px var(--yellow)}
@media(max-width:700px){.account-status>span:first-child{display:none}.account-status{gap:5px!important}.account-status button{font-size:.6rem}.auth-card{padding:18px}.auth-card h2{font-size:1.6rem}}
.rarity-key{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:10px;font-size:.72rem;font-weight:900}.rarity-key span:before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border:1px solid var(--ink);background:currentColor}.rarity-common{color:#68717a}.rarity-uncommon{color:#16803a}.rarity-rare{color:#1971d4}.rarity-epic{color:#8637b9}.rarity-legendary{color:#c66a00}.item-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));align-items:start}.item{--rarity:#68717a;padding:0;border-color:var(--rarity);box-shadow:3px 3px 0 color-mix(in srgb,var(--rarity) 35%,transparent);cursor:grab;overflow:hidden}.item.rarity-uncommon{--rarity:#16803a}.item.rarity-rare{--rarity:#1971d4}.item.rarity-epic{--rarity:#8637b9}.item.rarity-legendary{--rarity:#c66a00}.item-summary{display:grid!important;grid-template-columns:13px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;margin:0!important;padding:9px;background:#fff}.item-summary .rarity-dot{grid-row:1/3;width:11px;height:11px;border:2px solid var(--ink);background:var(--rarity);transform:rotate(45deg)}.item-summary b{margin:0!important;color:var(--rarity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-summary small{font-size:.68rem;font-weight:900;color:#555}.item-details{display:none!important;margin:0!important;padding:9px;border-top:2px solid var(--rarity);background:#f7f7f7}.item-details>span{font-size:.65rem;font-weight:900;color:#555}.item:hover .item-details,.item:focus .item-details,.item:focus-within .item-details{display:block!important}.item:hover,.item:focus,.item:focus-within{outline:3px solid var(--rarity);outline-offset:2px;background:#fff}.item ul{margin:5px 0 8px;padding-left:18px;font-size:.8rem;line-height:1.4}.item-actions{display:flex!important;flex-wrap:wrap;gap:4px;margin:0!important}.item-actions button{border:2px solid var(--ink);background:#fff;font-size:.7rem;font-weight:900}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:3px solid var(--ink);background:#fff}.stat-row b,.stat-row small{display:block}.stat-row b{font-size:1rem}.stat-row b span{display:inline-grid;place-items:center;min-width:28px;padding:2px 5px;background:var(--yellow);border:2px solid var(--ink)}.stat-row em{font-size:.72rem;color:#315c9b}.stat-row button{flex:0 0 40px;height:40px;border:3px solid var(--ink);background:var(--grass);font-size:1.4rem;font-weight:900;cursor:pointer}.stat-row button:disabled{background:#ddd;color:#777;cursor:not-allowed}@media(max-width:560px){.stat-grid{grid-template-columns:1fr}.item-grid{grid-template-columns:1fr 1fr}}