/* Layout: full-bleed pixel world; wood-and-brass HUD frames pinned to corners; parchment dialogs center-bottom like a JRPG */
:root{
  --night:#0f0b14; --wood:#2b1d1a; --wood2:#3d2a23; --brass:#e9b95c; --brass2:#9a6c2c;
  --parch:#f4e7c9; --parch2:#e0cba0; --ink:#3a2618; --text:#f6ead2;
  --hp:#e0485a; --mp:#4a8cf0; --xp:#9be05a;
  --display:"Pixelify Sans","Courier New",monospace; --body:"Sarabun",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--night);color:var(--text);font-family:var(--body);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h3v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-3v2h1v2h-2v-2h-1v-1h-1v1h-1v1h-2z' fill='%23f4e7c9' stroke='%232b1d1a'/%3E%3C/svg%3E") 1 1,auto}
.frame{position:absolute;background:var(--wood);border:2px solid var(--brass2);outline:2px solid #000;box-shadow:inset 0 0 0 2px var(--wood2),0 4px 0 #0007;border-radius:2px}
.pix{font-family:var(--display);letter-spacing:.03em}
/* HUD */
#hud{top:calc(8px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));display:flex;gap:8px;padding:6px 8px 6px 6px;width:250px}
#face{width:48px;height:48px;image-rendering:pixelated;background:#1a1220;border:2px solid var(--brass2)}
#hud .info{flex:1;display:grid;gap:3px;min-width:0}
#hud .nm{display:flex;align-items:center;gap:6px;font:600 13px var(--display)}
.rank{background:var(--brass);color:var(--wood);font:700 11px var(--display);padding:0 5px;border-radius:2px}
.bar{position:relative;height:11px;background:#140d12;border:1px solid #000}
.bar i{position:absolute;inset:0 auto 0 0;display:block;transition:width .15s}
.bar i::after{content:"";position:absolute;inset:0 0 50% 0;background:#ffffff30}
.bar span{position:absolute;inset:0;font:10px/11px var(--display);text-align:center;color:#fff;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
.gold{font:12px var(--display);color:var(--brass);display:flex;justify-content:space-between}
/* minimap + quest */
#mapbox{top:calc(8px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));padding:5px;width:170px}
#mini{display:block;width:156px;height:110px;image-rendering:pixelated;border:1px solid #000}
#mapbox .row{display:flex;justify-content:space-between;font:11px var(--display);margin-top:4px;color:var(--parch2)}
#track{top:calc(160px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));width:170px;padding:6px 8px;font-size:12px;line-height:1.4}
#track h4{margin:0 0 2px;font:600 12px var(--display);color:var(--brass)}
#track .q{margin-bottom:6px}
#track .q:last-child{margin-bottom:0}
#track .ok{color:var(--xp)}
/* log */
#log{left:max(8px,env(safe-area-inset-left,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 16px));height:104px;overflow-y:auto;padding:5px 8px;font-size:12px;line-height:1.45;background:#1a1210d9}
/* hotbar */
#bar{left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px));display:flex;gap:5px;padding:5px}
.slot{width:54px;height:54px;background:#1a1220;border:2px solid var(--brass2);position:relative;cursor:pointer;display:grid;place-items:center;padding:0;color:var(--text)}
.slot:hover,.slot:focus-visible{border-color:var(--brass);outline:none}
.slot canvas{width:32px;height:32px;image-rendering:pixelated}
.slot kbd{position:absolute;top:1px;left:3px;font:10px var(--display);color:var(--brass)}
.slot em{position:absolute;bottom:1px;right:3px;font:10px var(--display);font-style:normal}
.slot .cd{position:absolute;inset:0;background:conic-gradient(#000b var(--p,0%),transparent 0);pointer-events:none}
.slot .tip{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--wood);border:1px solid var(--brass2);padding:2px 6px;font-size:11px;display:none}
.slot:hover .tip{display:block}
.sbtn{font:11px var(--display);background:var(--wood2);color:var(--parch);border:1px solid var(--brass2);cursor:pointer;padding:2px 6px}
#menu{left:max(8px,env(safe-area-inset-left,0px));flex-wrap:wrap;max-width:min(380px,calc(100% - 16px));bottom:calc(186px + env(safe-area-inset-bottom,0px));display:flex;gap:4px;padding:4px}
/* dialog */
#dlg{left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(600px,calc(100% - 16px));background:var(--parch);color:var(--ink);border-color:var(--brass2);display:flex;gap:12px;padding:12px}
#dlg canvas{width:72px;height:72px;image-rendering:pixelated;background:var(--parch2);border:2px solid var(--brass2);flex:none}
#dlg .body{flex:1;min-width:0;display:grid;gap:8px}
#dlg h3{margin:0;font:700 15px var(--display);color:var(--brass2)}
#dlg p{margin:0;font-size:15px;line-height:1.55}
#dlg .acts{display:flex;flex-wrap:wrap;gap:6px}
#dlg button{font:600 13px var(--body);background:var(--wood);color:var(--parch);border:2px solid var(--brass2);padding:4px 10px;cursor:pointer}
#dlg button:hover,#dlg button:focus-visible{background:var(--wood2);border-color:var(--brass);outline:none}
#dlg .card{background:#fff6;border:1px solid var(--parch2);padding:6px 8px;display:grid;gap:3px;font-size:13px}
#dlg .card b{font-family:var(--display)}
#dlg .more{font:11px var(--display);color:var(--brass2);text-align:right}
/* bag */
#bag{top:calc(80px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));width:min(340px,calc(100% - 16px));max-height:calc(100% - 300px);overflow-y:auto;padding:8px;font-size:13px}
#bag .bb{display:flex;flex-direction:column;gap:3px;flex:none}
#bag h4{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:8px 0 4px}
#bag small{color:#cbbfa8}
#dlg .body{max-height:60vh;overflow-y:auto}
#bag h4{margin:0 0 6px;font:600 13px var(--display);color:var(--brass)}
#bag .it{display:flex;justify-content:space-between;border-bottom:1px dashed #ffffff22;padding:2px 0}
/* banner & fade */
#banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
#banner b{display:block;font:700 30px var(--display);color:var(--parch);text-shadow:3px 3px 0 #000}
#banner span{font:13px var(--display);color:var(--brass);letter-spacing:.2em}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s}
/* title */
#title{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,#3b2a5a 0%,#140f22 55%,#08060e 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));overflow-y:auto;z-index:5}
#title::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(2px 2px at 40% 30%,#ffe9a8,transparent),radial-gradient(1px 1px at 88% 40%,#fff,transparent),radial-gradient(1px 1px at 25% 55%,#cfe,transparent),radial-gradient(1px 1px at 60% 48%,#fff,transparent);pointer-events:none}
#title h1{margin:0;font:700 clamp(30px,6vw,54px) var(--display);color:var(--parch);text-shadow:4px 4px 0 #000,0 0 24px #e9b95c66;text-align:center;line-height:1.1;text-wrap:balance}
#title h1 small{display:block;font-size:.38em;color:var(--brass);letter-spacing:.3em;margin-top:6px}
#title .story{max-width:56ch;text-align:center;color:#d8cde8;font-size:15px;line-height:1.6}
.classes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cls{width:170px;background:var(--wood);border:2px solid var(--brass2);outline:2px solid #000;padding:10px;display:grid;gap:6px;justify-items:center;cursor:pointer;color:var(--text);font-family:var(--body)}
.cls:hover,.cls:focus-visible{border-color:var(--brass);transform:translateY(-3px);outline-color:var(--brass2)}
.cls canvas{width:96px;height:96px;image-rendering:pixelated}
.cls b{font:700 16px var(--display);color:var(--parch)}
.cls p{margin:0;font-size:12px;text-align:center;color:#cbbfa8}
.cls .st{font:11px var(--display);color:var(--brass)}
#cont{font:600 14px var(--display);background:var(--brass);color:var(--wood);border:2px solid #000;padding:6px 16px;cursor:pointer}
@media (max-width:720px){#log{height:64px;bottom:calc(72px + env(safe-area-inset-bottom,0px))}#track{display:none}.slot{width:46px;height:46px}#hud{width:210px}#menu{bottom:calc(142px + env(safe-area-inset-bottom,0px))}#mapbox{width:120px}#mini{width:106px;height:75px}}
@media (prefers-reduced-motion:reduce){.cls:hover{transform:none}}
/* menu as a column under the HUD so it never covers the play area */
#menu{top:calc(124px + env(safe-area-inset-top,0px));bottom:auto!important;flex-direction:column;flex-wrap:nowrap;max-width:none}
#menu .sbtn{text-align:left}
#bag{left:calc(max(8px,env(safe-area-inset-left,0px)) + 132px)}
@media (max-width:720px){#menu{top:calc(112px + env(safe-area-inset-top,0px));flex-direction:row;flex-wrap:wrap;max-width:calc(100% - 160px);gap:3px;padding:3px}#menu .sbtn{font-size:10px;padding:2px 4px}#bag{left:max(8px,env(safe-area-inset-left,0px))}}
#bag .gi,#dlg .gi{width:24px;height:24px;image-rendering:pixelated;vertical-align:middle;margin-right:4px;background:#0006;border:1px solid #fff2}