:root{--f-pixel: "Press Start 2P", var(--f-mono)}.ps{position:relative;min-height:100vh;padding:calc(var(--win-top) + 100px) 6vw 6vh;background-color:#12131a;color:var(--white);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px);overflow:hidden}.ps-top{font:400 12px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase;letter-spacing:.1em}.blink{animation:ps-blink 1s steps(1) infinite}@keyframes ps-blink{50%{opacity:0}}.ps-grid{display:grid;grid-template-columns:minmax(280px,1fr) 1.4fr;gap:5vw;margin-top:4vh;align-items:start}.ps-portrait{position:relative}.ps-frame{position:relative;height:min(46vh,420px);display:grid;place-items:end center;border:6px solid var(--yellow);background:var(--blue);background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;box-shadow:10px 10px 0 var(--red)}.ps-sprite{position:relative;z-index:1;height:78%;image-rendering:pixelated;margin-bottom:7%}.ps-pedestal{position:absolute;left:50%;bottom:5%;width:46%;height:6%;transform:translate(-50%);background:var(--ink);border-radius:50%;opacity:.35}.ps-irl{position:absolute;right:-24px;top:-26px;width:110px;margin:0;padding:6px 6px 22px;background:var(--white);transform:rotate(8deg);box-shadow:0 10px 20px #0006}.ps-irl img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:top}.ps-irl figcaption{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:400 15px/1 var(--f-marker);color:var(--ink)}.ps-name{margin-top:26px;font:400 clamp(20px,2.2vw,30px)/1.3 var(--f-pixel);text-transform:uppercase}.ps-sub{margin-top:10px;font:400 13px/1.4 var(--f-mono);color:#aaa}.ps-h{margin:0 0 12px;font:400 12px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase;letter-spacing:.08em}.ps-h:not(:first-child){margin-top:30px}.ps-classes{display:flex;flex-wrap:wrap;gap:8px}.ps-classes span{padding:9px 12px;border:3px solid var(--white);font:400 11px/1 var(--f-pixel);text-transform:uppercase}.ps-classes span:nth-child(3n+1){background:var(--red);border-color:var(--red)}.ps-classes span:nth-child(3n+2){background:var(--blue);border-color:var(--blue)}.ps-guilds{list-style:none;display:grid;gap:8px;font:400 15px/1.3 var(--f-mono)}.ps-guilds b{display:inline-block;min-width:84px;margin-right:8px;font:400 10px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase}.ps-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.pst{padding:14px;border:3px solid #2e3142;background:#1a1c26}.pst b{display:block;font:400 26px/1 var(--f-pixel);color:var(--yellow)}.pst span{display:block;margin-top:8px;font:400 12px/1.35 var(--f-mono);color:#bbb}.ps-dialog{position:relative;display:flex;gap:18px;align-items:center;margin-top:5vh;padding:18px 22px;min-height:110px;cursor:pointer;background:var(--white);color:var(--ink);border:4px solid var(--ink);outline:4px solid var(--white);box-shadow:8px 8px 0 var(--yellow)}.pd-face{width:64px;height:64px;object-fit:cover;object-position:top;image-rendering:pixelated;border:3px solid var(--ink);background:var(--yellow);flex:none}.pd-who{font:400 11px/1 var(--f-pixel);color:var(--red);text-transform:uppercase;margin-bottom:10px}.ps-lore{max-width:900px;margin-top:22px;font:400 14px/1.65 var(--f-mono);color:#b9bac4}.ps-lore b{margin-right:10px;font:400 11px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase;letter-spacing:.08em}.pd-text{font:400 clamp(17px,1.5vw,21px)/1.45 var(--f-mono);min-height:2.9em}.pd-next{position:absolute;right:18px;bottom:12px;font-size:14px;opacity:0}.ps-dialog.done .pd-next{opacity:1;animation:ps-bob .8s ease-in-out infinite}@keyframes ps-bob{50%{transform:translateY(5px)}}.ach,.inv,.world{position:relative;padding:14vh 6vw 10vh;background:#12131a;color:var(--white);border-top:4px dashed #2e3142}.ach-k{font:400 11px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase}.ach-title,.inv-title{margin:2.4vh 0 5vh;font:400 clamp(22px,3vw,44px)/1.3 var(--f-pixel);text-transform:uppercase}.ach-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.badge{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 12px 18px;border:4px solid #2e3142;background:#1a1c26;color:#555;transition:border-color .4s,background .4s,color .4s}.b-icon svg{width:48px;height:48px;fill:#3a3d4f;transition:fill .4s;image-rendering:pixelated}.badge b{font:400 13px/1.3 var(--f-pixel);text-transform:uppercase}.badge>span:not(.b-icon){font:400 12px/1.35 var(--f-mono)}.b-lock{position:absolute;top:8px;right:8px;font:400 8px/1 var(--f-pixel);text-transform:uppercase;font-style:normal;color:#555}.badge.on{border-color:var(--c);background:#20232f;color:var(--white)}.badge.on .b-icon svg{fill:var(--c)}.badge.on .b-lock{display:none}.ach-toast{position:fixed;z-index:60;right:calc(var(--gut) + 22px);bottom:calc(var(--gut) + 22px);display:flex;gap:14px;align-items:center;padding:14px 18px;max-width:360px;background:var(--ink);color:var(--white);border:3px solid var(--yellow);opacity:0;visibility:hidden;transform:translateY(30px)}.ach-toast svg{width:34px;height:34px;flex:none}.ach-toast b{display:block;font:400 10px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase;margin-bottom:6px}.ach-toast em{font:400 13px/1.3 var(--f-mono);font-style:normal}.bp{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:22px;align-items:start;max-width:1180px}.bp-bag{padding:14px;background:#2a2d3b;border:4px solid var(--ink);outline:4px solid #3e4257;box-shadow:10px 10px 0 var(--yellow)}.bp-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:400 11px/1 var(--f-pixel);text-transform:uppercase;color:#cfd2e0}.bp-bar b{color:var(--yellow);font-weight:400}.bp-grid{display:grid;grid-template-columns:repeat(8,64px);gap:6px}.slot{position:relative;width:64px;height:64px;display:grid;place-items:center;padding:0;background:#171922;border:0;cursor:pointer;box-shadow:inset 4px 4px #0c0d12,inset -4px -4px #3a3e52}.slot canvas{width:40px;height:40px;image-rendering:pixelated;transition:translate .2s}.slot em{position:absolute;right:6px;bottom:5px;font:400 9px/1 var(--f-pixel);font-style:normal;color:var(--white);text-shadow:2px 2px 0 var(--ink)}.slot-empty{cursor:default;opacity:.55}.slot:hover canvas,.slot.on canvas{translate:0 -3px}.slot.on{background:#232637;box-shadow:inset 4px 4px #0c0d12,inset -4px -4px #3a3e52,0 0 0 3px var(--yellow)}.slot:focus-visible{outline:3px solid var(--white);outline-offset:2px}.bp-hint{margin-top:12px;font:400 9px/1 var(--f-pixel);color:#8b8fa6;text-transform:uppercase}.bp-info{padding:22px;min-height:100%;background:#1a1c26;border:4px solid #2e3142;display:flex;flex-direction:column;gap:10px}.bi-icon{width:96px;height:96px;image-rendering:pixelated;padding:10px;background:#12131a;box-shadow:inset 4px 4px #0c0d12,inset -4px -4px #3a3e52;box-sizing:content-box}.bi-type{font:400 10px/1 var(--f-pixel);color:var(--yellow);text-transform:uppercase;margin-top:6px}.bi-name{font:400 clamp(18px,1.8vw,24px)/1.3 var(--f-pixel);text-transform:uppercase}.bi-k{margin-top:4px;font:400 9px/1 var(--f-pixel);color:#8b8fa6;text-transform:uppercase}.bi-used{list-style:none;display:flex;flex-wrap:wrap;gap:6px}.bi-used li{padding:6px 9px;border:2px solid #3a3e52;font:400 13px/1 var(--f-mono);color:#ddd}.bi-xp{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;font:400 9px/1 var(--f-pixel);color:#8b8fa6;text-transform:uppercase}.bi-xp i{flex:1;height:12px;border:2px solid #3a3e52;background:#12131a}.bi-xp b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#28c840 0,#28c840 8px,#1f9e33 8px,#1f9e33 10px);transition:width .5s}.world .geo{width:100%;max-width:1100px}.nav-right .pill-solid{background:var(--yellow);color:var(--ink)}@media(max-width:860px){.ps{padding:calc(var(--win-top) + 80px) 22px 6vh}.ps-grid{grid-template-columns:1fr;gap:34px}.ps-frame{height:34vh}.ps-irl{width:86px;right:4px}.ps-dialog{padding:14px;gap:12px}.pd-face{width:48px;height:48px}.ach,.inv,.world{padding:10vh 22px 8vh}.ach-grid{grid-template-columns:1fr 1fr;gap:10px}.bp{grid-template-columns:1fr}.bp-grid{grid-template-columns:repeat(6,1fr);gap:5px}.slot{width:auto;height:auto;aspect-ratio:1}.slot canvas{width:32px;height:32px}.bi-icon{width:64px;height:64px}}
