:root{
  --night:#1B1630; --panel:#262040; --panel-2:#2F2750; --ink:#0F0C1C; --frame:#8E7CC3;
  --text:#F4EFFF; --muted:#BDB3DA; --hp:#E86A8A; --sp:#6FA8F0; --exp:#F2C46D; --gold:#E29F51;
  --pixel:'Pixelify Sans','Courier New',monospace; --body:'Nunito','Trebuchet MS',sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --night:#1B1630; --panel:#262040; --text:#F4EFFF; } }
:root[data-theme="dark"]{ --night:#1B1630; --panel:#262040; --text:#F4EFFF; }
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--night);color:var(--text);font-family:var(--body);overflow:hidden;-webkit-user-select:none;user-select:none}
#game{position:fixed;inset:0}
#game canvas{display:block;image-rendering:pixelated}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 58%,rgba(10,8,30,.55) 100%)}
.frame{background:var(--panel);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--frame),0 0 0 9px var(--ink)}
.hud{position:fixed;pointer-events:none;z-index:5}
.hud *{pointer-events:auto}
#status{top:calc(18px + env(safe-area-inset-top,0px));left:18px;width:250px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
#status .who{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--pixel);font-size:18px;font-weight:600}
#status .who span:last-child{font-size:14px;color:var(--muted);font-weight:400}
.bar{position:relative;height:13px;background:#140F26;box-shadow:inset 0 0 0 2px var(--ink)}
.bar i{position:absolute;left:2px;top:2px;bottom:2px;display:block;transition:width .25s steps(6)}
.bar b{position:absolute;inset:0;font:600 10px/13px var(--pixel);text-align:center;color:#fff;text-shadow:1px 1px 0 var(--ink)}
.hp i{background:var(--hp)} .sp i{background:var(--sp)} .exp i{background:var(--exp)} .exp{height:9px} .exp b{line-height:9px;font-size:8px}
#inv{font-family:var(--pixel);font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
#inv strong{color:var(--text)}
#target{top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:220px;padding:9px 12px;display:none;flex-direction:column;gap:6px}
#target .who{font-family:var(--pixel);font-size:15px;display:flex;justify-content:space-between}
#target .who span:last-child{color:var(--muted)}
#hotbar{bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;gap:10px;padding:10px}
.slot{position:relative;width:56px;height:56px;border:0;padding:0;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer;color:var(--text);font-family:var(--pixel)}
.slot:focus-visible{outline:3px solid var(--exp);outline-offset:3px}
.slot .key{position:absolute;left:4px;top:2px;font-size:12px;color:var(--muted)}
.slot .ico{position:absolute;inset:10px 10px 14px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#fff6d8 0 18%,#ffcf7a 30%,#b98cff 62%,rgba(0,0,0,0) 72%)}
.slot .name{position:absolute;left:0;right:0;bottom:2px;font-size:9px;text-align:center;color:var(--muted)}
.slot .cd{position:absolute;inset:0;background:rgba(15,12,28,.7);transform-origin:bottom;transform:scaleY(0)}
.slot .ico.swarm{background:radial-gradient(circle at 30% 35%,#fff3b0 0 8%,rgba(0,0,0,0) 12%),radial-gradient(circle at 68% 30%,#fff3b0 0 7%,rgba(0,0,0,0) 11%),radial-gradient(circle at 52% 66%,#fff3b0 0 9%,rgba(0,0,0,0) 13%),radial-gradient(circle at 25% 72%,#ffe28a 0 6%,rgba(0,0,0,0) 10%),radial-gradient(circle at 78% 70%,#ffe28a 0 6%,rgba(0,0,0,0) 10%),radial-gradient(circle,#3b2f6b 0 60%,rgba(0,0,0,0) 72%)}
.slot .ico.sit{border-radius:0;background:none;inset:12px 12px 16px}
.slot .ico.sit::before{content:'';position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#e9dcc4}
.slot .ico.sit::after{content:'';position:absolute;left:4px;right:4px;bottom:0;height:12px;border-radius:12px 12px 4px 4px;background:#b99c7a}
.slot .ico.gear{border-radius:0;background:none;inset:12px 14px 16px}
.slot .ico.gear::before{content:'';position:absolute;left:4px;right:4px;top:0;height:9px;border-radius:8px 8px 2px 2px;background:#b98cff}
.slot .ico.gear::after{content:'';position:absolute;left:10px;right:10px;top:9px;bottom:0;background:#e9dcc4;border-radius:2px}
.slot.on{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--exp)}
.slot.empty{cursor:default;opacity:.5}
.slot.zoom .ico{background:none;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px}
#log{bottom:calc(20px + env(safe-area-inset-bottom,0px));left:18px;width:340px;max-width:calc(100vw - 36px);padding:10px 12px;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
#log p{margin:0;color:var(--muted)} #log p.good{color:var(--exp)} #log p.bad{color:var(--hp)} #log p.loot{color:#9FE3C9}
#help{top:calc(18px + env(safe-area-inset-top,0px));right:18px;width:236px;padding:12px 14px;font-size:13px;line-height:1.5}
#help h2{margin:0 0 6px;font:600 16px var(--pixel)}
#help dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
#help dt{font-family:var(--pixel);color:var(--exp)} #help dd{margin:0;color:var(--muted)}
#help button{margin-top:8px;background:none;border:0;padding:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
#help.min dl{display:none}
#toast{position:fixed;left:50%;top:32%;transform:translate(-50%,-50%);font:700 40px var(--pixel);color:var(--exp);text-shadow:3px 3px 0 var(--ink);opacity:0;pointer-events:none;z-index:6;transition:opacity .3s}
#quest{top:calc(326px + env(safe-area-inset-top,0px));right:18px;width:236px;padding:12px 14px;display:none;flex-direction:column;gap:6px}
#quest h2{margin:0;font:600 15px var(--pixel);color:var(--exp)}
#quest p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
#quest .obj{display:flex;justify-content:space-between;font-family:var(--pixel);font-size:14px;color:var(--text)}
#quest .obj.done{color:#9FE3C9}

#dialog{position:fixed;left:50%;bottom:calc(128px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(640px,calc(100vw - 36px));padding:18px 20px 14px;display:none;flex-direction:column;gap:12px;z-index:7}
#dialog .speaker{position:absolute;top:-14px;left:16px;padding:3px 12px;background:var(--panel-2);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--frame),0 0 0 9px var(--ink);font:600 16px var(--pixel);color:var(--exp)}
#dialog .line{margin:6px 0 0;min-height:66px;font-size:16px;line-height:1.55;color:var(--text)}
#dialog .line em{color:var(--muted);font-style:italic}
#dialog .acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
#dialog button{min-height:40px;padding:0 16px;border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);font:600 15px var(--pixel);cursor:pointer}
#dialog button.primary{background:var(--exp);color:var(--ink)}
#dialog button:focus-visible{outline:3px solid var(--exp);outline-offset:3px}
@media (max-width:760px){#quest{top:auto;bottom:calc(104px + env(safe-area-inset-bottom,0px));right:18px;width:180px}#dialog{bottom:calc(20px + env(safe-area-inset-bottom,0px))}}
body.talking #log{opacity:0;pointer-events:none}
#log{transition:opacity .2s}
#select{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#2F2750 0,#1B1630 70%)}
#select .box{padding:28px 32px;display:flex;flex-direction:column;gap:18px;align-items:center;max-width:calc(100vw - 40px)}
#select h1{margin:0;font:600 28px var(--pixel)}
#select p{margin:0;color:var(--muted);font-size:15px;text-align:center;max-width:44ch}
#select .cards{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
#select button.card{width:170px;padding:14px 10px 12px;border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;font:600 16px var(--pixel)}
#select button.card img{height:150px;image-rendering:pixelated}
#select button.card:hover,#select button.card:focus-visible{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--exp);outline:none}
#equip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(600px,calc(100vw - 36px));max-height:calc(100vh - 60px);overflow:auto;padding:18px 20px;display:none;flex-direction:column;gap:14px;z-index:8}
#equip header{display:flex;justify-content:space-between;align-items:center}
#equip h2{margin:0;font:600 22px var(--pixel)}
#equip .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
#equip .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
#equip h3{margin:0 0 8px;font:600 13px var(--pixel);letter-spacing:2px;color:var(--muted)}
#equip .slots{display:flex;flex-direction:column;gap:5px}
#equip .srow{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 8px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;width:100%}
#equip .srow[disabled]{cursor:default}
#equip .srow .lab{width:106px;flex-shrink:0;font:12px var(--pixel);color:var(--muted)}
#equip .srow .nm{font-size:14px}
#equip .srow .nm.empty{color:#6f6790}
#equip .srow img,#equip .icon img{image-rendering:pixelated;width:28px;height:28px;object-fit:contain}
#equip .grid{display:grid;grid-template-columns:repeat(4,56px);gap:8px}
#equip .icon{position:relative;width:56px;height:56px;border:0;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#equip .icon img{width:36px;height:36px}
#equip .icon.on::after{content:'E';position:absolute;right:3px;top:1px;font:600 11px var(--pixel);color:var(--exp)}
#equip .icon:focus-visible,#equip .srow:focus-visible{outline:3px solid var(--exp);outline-offset:2px}
#equip .empty-note{font-size:13px;color:var(--muted);line-height:1.45;grid-column:1/-1}
#equip .tip{min-height:92px;padding:10px 12px;background:#1f1936;box-shadow:inset 0 0 0 2px var(--ink);font-size:13px;line-height:1.45;color:var(--muted)}
#equip .tip b{display:block;font:600 16px var(--pixel)}
#equip .tip .rar{font:12px var(--pixel);letter-spacing:1px}
#equip .tip .st{color:var(--text)}
#equip .bonus{font-size:13px;color:var(--muted)} #equip .bonus strong{color:var(--text)}
.r-Plain{color:#cfc8e6}.r-Fine{color:#9FE3C9}.r-Storied{color:#8FC1FF}.r-Fabled{color:#F7A8C8}.r-Legendary{color:#F2C46D}
@media (max-width:560px){#equip .cols{grid-template-columns:1fr}}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:600 22px var(--pixel);color:var(--muted);z-index:9;background:var(--night)}
@media (max-width:760px){#help{display:none}#log{width:calc(100vw - 36px);bottom:calc(122px + env(safe-area-inset-bottom,0px));font-size:12px;padding:8px 10px}#log p:not(:nth-last-child(-n+3)){display:none}#status{width:200px}}
@media (prefers-reduced-motion: reduce){.bar i{transition:none}}

#where{margin-top:4px;font:12px var(--pixel);letter-spacing:1px;color:var(--muted)}
#where::before{content:'◆ ';color:var(--exp)}

/* right column: minimap, quest tracker, help (stacked, never overlapping) */
#rightcol{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:18px;width:236px;display:flex;flex-direction:column;gap:22px;z-index:5;pointer-events:none}
#rightcol > .hud{position:relative;top:auto;right:auto;width:auto}
#minimap{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
#minimap header{display:flex;justify-content:space-between;font:600 13px var(--pixel)}
#minimap header #mmXY{color:var(--muted);font-weight:400}
#minimap .mmBody{position:relative;line-height:0;box-shadow:inset 0 0 0 2px var(--ink);background:#140F26}
#minimap img{width:100%;display:block;image-rendering:auto;opacity:.92}
#minimap canvas,#worldmap canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
#mmBig{align-self:flex-end;background:none;border:0;padding:0;color:var(--muted);font:12px var(--pixel);text-decoration:underline;cursor:pointer}
#worldmap{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;display:none;flex-direction:column;gap:10px;padding:14px 16px;max-width:calc(100vw - 40px)}
#worldmap header{display:flex;justify-content:space-between;align-items:center}
#worldmap h2{margin:0;font:600 22px var(--pixel)}
#worldmap .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
#worldmap .wmBody{position:relative;line-height:0;box-shadow:inset 0 0 0 2px var(--ink)}
#worldmap img{display:block;width:min(900px,calc(100vw - 72px),calc((100vh - 170px) * var(--ar,1.14)))}
#worldmap .lab{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:600 13px var(--pixel);line-height:1.2;color:#fff;background:rgba(15,12,28,.78);padding:3px 7px;pointer-events:none}
#worldmap .lab::before{content:'▲ ';color:var(--exp)}
.wmHint{margin:0;font-size:12px;color:var(--muted)}
@media (max-width:760px){#status{width:168px}#rightcol{width:112px}#minimap{padding:6px 8px 8px}#minimap header{font-size:12px}#minimap header #mmXY,#mmBig{display:none}#rightcol > #quest{position:fixed;top:calc(206px + env(safe-area-inset-top,0px));bottom:auto;left:18px;right:auto;width:168px;padding:9px 12px}#quest p{display:none}#quest h2{font-size:14px}}

/* v0.11: Glimmer, potions, bag tabs, shops */
#inv{display:flex;justify-content:space-between;align-items:baseline}
#inv .gold{font-family:var(--pixel);color:var(--exp)}
.slot .ico.img{position:absolute;inset:10px 12px 18px;width:auto;height:auto;margin:auto;image-rendering:pixelated;background:none;border-radius:0}
.slot .cnt{position:absolute;right:4px;bottom:15px;font:600 11px var(--pixel);color:var(--text);text-shadow:1px 1px 0 var(--ink)}
.tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tabs button{border:0;background:var(--panel-2);color:var(--muted);box-shadow:inset 0 0 0 2px var(--ink);font:600 12px var(--pixel);padding:6px 10px;cursor:pointer}
.tabs button.on{color:var(--text);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--exp)}
#equip .icon .cnt{position:absolute;right:3px;bottom:1px;font:600 11px var(--pixel);color:var(--text);text-shadow:1px 1px 0 var(--ink)}
#equip .icon.rb-Fine{box-shadow:inset 0 0 0 2px #9FE3C9}#equip .icon.rb-Storied{box-shadow:inset 0 0 0 2px #8FC1FF}
#equip .icon.rb-Fabled{box-shadow:inset 0 0 0 2px #F7A8C8}#equip .icon.rb-Legendary{box-shadow:inset 0 0 0 2px #F2C46D,0 0 10px rgba(242,196,109,.5)}
.tip .traits{margin:6px 0;color:var(--text)} .tip .traits i{font-style:normal;font-family:var(--pixel);display:inline-block;min-width:22px}
.tip .sig{margin:6px 0;padding:6px 8px;background:rgba(242,196,109,.12);color:#F2C46D;font-size:12px}
.tip .sell{margin-top:6px;font-size:12px;color:var(--muted)}
#equip .grid{grid-template-columns:repeat(5,52px)} #equip .icon{width:52px;height:52px}
#shop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 36px));max-height:calc(100vh - 60px);overflow:auto;padding:18px 20px;display:none;flex-direction:column;gap:10px;z-index:8}
#shop header{display:flex;align-items:center;gap:12px}#shop h2{margin:0;font:600 22px var(--pixel);flex:1}
#shop .goldtag{font:600 16px var(--pixel);color:var(--exp)}
#shop .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
#shop .greet{margin:0;color:var(--muted);font-size:14px}
#shop .cols{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.shoplist{display:flex;flex-direction:column;gap:5px}
.shoprow{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink)}
.shoprow img{width:28px;height:28px;image-rendering:pixelated}
.shoprow .nm{flex:1;font-size:14px}.shoprow .price{font:13px var(--pixel);color:var(--exp);white-space:nowrap}
.shoprow .btns{display:flex;gap:4px}
.shoprow button{border:0;background:#3a3066;color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);font:600 12px var(--pixel);padding:5px 8px;cursor:pointer}
.shoprow button:disabled{opacity:.4;cursor:default}
#shop .tip{min-height:120px;padding:10px 12px;background:#1f1936;box-shadow:inset 0 0 0 2px var(--ink);font-size:13px;line-height:1.45;color:var(--muted)}
#shop .tip b{display:block;font:600 16px var(--pixel)}#shop .tip .rar{font:12px var(--pixel);letter-spacing:1px}#shop .tip .st{color:var(--text)}
#log p.r-Fine{color:#9FE3C9}#log p.r-Storied{color:#8FC1FF}#log p.r-Fabled{color:#F7A8C8}#log p.r-Legendary{color:#F2C46D;font-weight:700}
@media (max-width:560px){#shop .cols{grid-template-columns:1fr}}
@media (max-width:760px){#hotbar{gap:5px;padding:8px}#hotbar .slot{width:44px;height:52px}#hotbar .slot .name{font-size:9px}}

/* v0.12: Folio's Story Ink Workbench (gilding, reforge, harmonies) */
#bench{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,calc(100vw - 36px));max-height:calc(100vh - 60px);overflow:auto;padding:18px 20px;display:none;flex-direction:column;gap:10px;z-index:8}
#bench header{display:flex;align-items:baseline;gap:14px}#bench h2{margin:0;font:600 22px var(--pixel)}#bench .who{flex:1;font-size:14px;color:var(--muted)}
#bench .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
#bench h3{margin:0 0 8px;font:600 13px var(--pixel);letter-spacing:2px;color:var(--muted)}
#bench .bcols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}
#bench .grid{display:grid;grid-template-columns:repeat(4,52px);gap:8px;margin-bottom:12px}
#bench .icon{position:relative;width:52px;height:52px;border:0;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#bench .icon img{width:36px;height:36px;image-rendering:pixelated}
#bench .icon.sel{outline:3px solid var(--exp);outline-offset:1px}
#bench .icon.on::after{content:'E';position:absolute;right:3px;top:1px;font:600 11px var(--pixel);color:var(--exp)}
#bench .icon .g{position:absolute;left:3px;bottom:1px;font:600 11px var(--pixel);color:#F2C46D;text-shadow:1px 1px 0 var(--ink)}
#bench .icon.rb-Fine{box-shadow:inset 0 0 0 2px #9FE3C9}#bench .icon.rb-Storied{box-shadow:inset 0 0 0 2px #8FC1FF}#bench .icon.rb-Fabled{box-shadow:inset 0 0 0 2px #F7A8C8}#bench .icon.rb-Legendary{box-shadow:inset 0 0 0 2px #F2C46D}
#bench .bcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;background:#1f1936;box-shadow:inset 0 0 0 2px var(--ink);text-align:center}
#bench .bcard img{width:72px;height:72px;image-rendering:pixelated}
#bench .bcard b{font:600 16px var(--pixel)}#bench .bcard .rar{font:12px var(--pixel);letter-spacing:1px}
#bench .mats{margin-top:12px;display:flex;flex-direction:column;gap:4px;font-size:14px}
#bench .mats div{display:flex;justify-content:space-between}#bench .mats span:last-child{font-family:var(--pixel)}
#bench .bright{display:flex;flex-direction:column;gap:12px;min-width:0}
#bench .panel{background:#1f1936;box-shadow:inset 0 0 0 2px #3E3566;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#bench .panel.hot{box-shadow:inset 0 0 0 2px #8FE3C2}
#bench .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#bench .tl{display:flex;gap:8px;align-items:center;min-height:40px;font-size:14px;line-height:1.35}
#bench .tier{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;flex-shrink:0;color:#1B1630;font:700 13px var(--pixel)}
#bench .tl .tx{flex:1}
#bench .tag{flex-shrink:0;font:12px var(--pixel)}
#bench .lock{flex-shrink:0;width:70px;height:36px;border:0;background:#262040;color:var(--text);box-shadow:inset 0 0 0 2px #F7A8C8;font:13px var(--pixel);cursor:pointer}
#bench .lock.on{background:#F7A8C8;color:#1B1630}#bench .lock:disabled{opacity:.5;cursor:default}
#bench .bar{height:14px;background:#1B1630;box-shadow:inset 0 0 0 2px #3E3566;padding:3px;box-sizing:border-box}#bench .bar i{display:block;height:100%;background:#F7A8C8}
#bench .odds{display:flex;height:14px;box-shadow:0 0 0 2px var(--ink)}#bench .oddl{display:flex;font:12px var(--pixel);color:var(--muted)}
#bench .lab{display:flex;justify-content:space-between;font:13px var(--pixel);letter-spacing:1px;color:var(--muted)}
#bench .note{font-size:13px;color:var(--muted);line-height:1.45}
#bench .act{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#bench .msg{font-size:14px;color:#8FE3C2;line-height:1.4;flex:1;min-width:180px}#bench .msg.bad{color:#FFB3C7}
#bench .btn{height:46px;padding:0 20px;border:0;box-shadow:0 0 0 3px var(--ink);font:600 16px var(--pixel);cursor:pointer;background:#F7A8C8;color:#1B1630}
#bench .btn.ghost{background:#262040;color:var(--text);box-shadow:inset 0 0 0 2px #8E7CC3,0 0 0 3px var(--ink);font-weight:400}
#bench .btn.go{background:#8FE3C2}#bench .btn:disabled{opacity:.45;cursor:default}
#bench .big{font:600 30px var(--pixel);display:flex;align-items:center;gap:14px}#bench .big .arrow{color:var(--muted);font-size:22px}
#bench .harm{display:flex;flex-direction:column;gap:3px}#bench .harm b{font:600 15px var(--pixel)}#bench .harm.on b{color:#F2C46D}
#bench .harm .pairtx{font:12px var(--pixel);color:#C9A7FF}#bench .harm.unk b{color:#6f6790}
#bench .badge{font:11px var(--pixel);padding:2px 6px;background:#F2C46D;color:#1B1630;margin-left:6px}
#bench .empty-note{font-size:13px;color:var(--muted);line-height:1.45;grid-column:1/-1}
@media (max-width:700px){#bench .bcard{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:8px}#bench .bcard img{width:40px;height:40px}#bench .bcols{grid-template-columns:1fr}#bench .pair{grid-template-columns:1fr}#bench .grid{grid-template-columns:repeat(5,48px)}#bench .icon{width:48px;height:48px}}
#banner{position:fixed;left:50%;top:22%;transform:translate(-50%,-10px);z-index:12;pointer-events:none;opacity:0;transition:opacity .35s,transform .35s;
  background:var(--panel);box-shadow:0 0 0 3px var(--ink),0 0 0 6px #F2C46D,0 0 0 9px var(--ink),0 0 30px rgba(242,196,109,.45);padding:14px 22px;text-align:center;max-width:calc(100vw - 60px)}
#banner.show{opacity:1;transform:translate(-50%,0)}
#banner small{display:block;font:12px var(--pixel);letter-spacing:2px;color:#F2C46D}#banner b{display:block;font:600 22px var(--pixel);margin:2px 0}#banner span{font-size:14px;color:var(--muted)}

/* v0.13: pets */
#target #tameBtn{display:none;border:0;background:#8FE3C2;color:#1B1630;box-shadow:inset 0 0 0 2px var(--ink);font:600 12px var(--pixel);padding:6px 8px;cursor:pointer;min-height:32px}
#target #tameBtn.ready{display:block}#target #tameBtn.weak{background:#3a3066;color:var(--muted)}
#pets{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 36px));max-height:calc(100vh - 60px);overflow:auto;padding:18px 20px;display:none;flex-direction:column;gap:12px;z-index:8}
#pets header{display:flex;align-items:baseline;gap:14px}#pets h2{margin:0;font:600 22px var(--pixel)}#pets .who{flex:1;font-size:14px;color:var(--muted)}
#pets .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
#pets .pcols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}
#pets .plist{display:flex;flex-direction:column;gap:6px}
#pets .pcard{display:flex;align-items:center;gap:10px;padding:6px 10px;border:0;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);color:var(--text);text-align:left;cursor:pointer;min-height:56px;font:inherit}
#pets .pcard.sel{box-shadow:inset 0 0 0 2px var(--exp)}#pets .pcard img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
#pets .pcard b{display:block;font:600 15px var(--pixel)}#pets .pcard span{font-size:12px;color:var(--muted)}
#pets .pcard .out{color:#8FE3C2}
#pets .pdetail{display:flex;flex-direction:column;gap:10px;background:#1f1936;box-shadow:inset 0 0 0 2px var(--ink);padding:14px}
#pets .ptop{display:flex;gap:14px;align-items:center}#pets .ptop img{width:88px;height:88px;object-fit:contain;image-rendering:pixelated;background:#262040;box-shadow:inset 0 0 0 2px #3E3566}
#pets .ptop input{width:100%;box-sizing:border-box;background:#262040;border:0;box-shadow:inset 0 0 0 2px #3E3566;color:var(--text);font:600 18px var(--pixel);padding:6px 8px}
#pets .ptop .sub{font-size:13px;color:var(--muted);margin-top:4px}
#pets .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#pets .stats div{background:#262040;padding:6px 8px;box-shadow:inset 0 0 0 2px #3E3566}#pets .stats small{display:block;font:11px var(--pixel);color:var(--muted);letter-spacing:1px}#pets .stats b{font:600 16px var(--pixel)}
#pets .row{display:flex;flex-direction:column;gap:3px}#pets .row small{font:12px var(--pixel);letter-spacing:1px;color:var(--muted)}#pets .row .t{font-size:14px}#pets .row .t b{font-family:var(--pixel);color:#C9A7FF}
#pets .lab{display:flex;justify-content:space-between;font:12px var(--pixel);letter-spacing:1px;color:var(--muted)}
#pets .pbar{height:12px;background:#1B1630;box-shadow:inset 0 0 0 2px #3E3566;padding:2px;box-sizing:border-box}#pets .pbar i{display:block;height:100%}
#pets .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#pets .btn{height:42px;padding:0 16px;border:0;box-shadow:0 0 0 3px var(--ink);font:600 14px var(--pixel);cursor:pointer;background:#8FE3C2;color:#1B1630}
#pets .btn.ghost{background:#262040;color:var(--text);box-shadow:inset 0 0 0 2px #8E7CC3,0 0 0 3px var(--ink);font-weight:400}
#pets .btn.warn{background:#262040;color:#FFB3C7;box-shadow:inset 0 0 0 2px #FFB3C7,0 0 0 3px var(--ink);font-weight:400}
#pets .btn:disabled{opacity:.45;cursor:default}
#pets .msg{font-size:13px;color:#8FE3C2}#pets .empty-note{font-size:14px;color:var(--muted);line-height:1.5}
@media (max-width:640px){#pets .pcols{grid-template-columns:1fr}#pets .plist{flex-direction:row;overflow:auto}#pets .pcard{min-width:160px}}
@media (max-width:420px){#hotbar{gap:4px;padding:6px}#hotbar .slot{width:40px;height:50px}}
@media (min-width:761px){#hotbar{gap:6px;left:max(50%,calc(400px + 240px))}#hotbar .slot{width:52px}}
#icPet{object-fit:contain}

/* v0.14: stats, class change, skills */
#charTabs{margin:0}
#charStats,#charSkills{display:none;flex-direction:column;gap:10px}
.dot{position:absolute;right:3px;top:3px;width:10px;height:10px;background:#F7A8C8;box-shadow:0 0 0 2px var(--ink);border-radius:50%}
.slot .ico.lance{background:radial-gradient(circle at 50% 50%,#fff 0 12%,#bfe3ff 13% 30%,transparent 31%),linear-gradient(135deg,transparent 44%,#bfe3ff 45% 55%,transparent 56%)}
.stathead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.stathead .job{font:600 16px var(--pixel)}.stathead .pts{font:600 15px var(--pixel);color:#F7A8C8}
.statrow{display:grid;grid-template-columns:52px 44px 44px 1fr;gap:10px;align-items:center;padding:6px 8px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink)}
.statrow b{font:600 16px var(--pixel)}.statrow .v{font:600 18px var(--pixel);text-align:right}
.statrow button,.skrow button{border:0;background:#F7A8C8;color:#1B1630;box-shadow:inset 0 0 0 2px var(--ink);font:700 16px var(--pixel);height:36px;cursor:pointer}
.statrow button:disabled,.skrow button:disabled{background:#3a3066;color:#6f6790;cursor:default}
.statrow .d{font-size:13px;color:var(--muted);line-height:1.35}
.derived{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.derived div{background:#1f1936;box-shadow:inset 0 0 0 2px var(--ink);padding:6px 8px}.derived small{display:block;font:11px var(--pixel);letter-spacing:1px;color:var(--muted)}.derived b{font:600 15px var(--pixel)}
.skrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 10px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink)}
.skrow button{padding:0 14px;font-size:13px}
.skrow b{font:600 15px var(--pixel)}.skrow .lv{font:12px var(--pixel);color:#F2C46D;margin-left:8px}.skrow .d{font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}.skrow .req{font-size:12px;color:#FFB3C7}
.skrow.active b{color:#bfe3ff}
.note2{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:560px){.statrow{grid-template-columns:44px 36px 40px 1fr}.derived{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){#hotbar{gap:3px;padding:5px}#hotbar .slot{width:37px}}
@media (min-width:761px){#hotbar{left:max(50%,700px)}}
@media (max-width:420px){#zoomBtn{display:none}}
#icPet{inset:auto;width:32px;height:30px;left:calc(50% - 16px);top:7px}

/* v0.15: fashion (hair dye, costume look) */
#style{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 36px));max-height:calc(100vh - 60px);overflow:auto;padding:18px 20px;display:none;flex-direction:column;gap:12px;z-index:8}
#style header{display:flex;align-items:center;gap:12px}#style h2{margin:0;font:600 22px var(--pixel);flex:1}#style .goldtag{font:600 16px var(--pixel);color:var(--exp)}
#style .x{border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);width:36px;height:36px;font:600 16px var(--pixel);cursor:pointer}
.dyewrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.mirror{display:flex;flex-direction:column;align-items:center;gap:8px;background:#1f1936;box-shadow:inset 0 0 0 2px #3E3566;padding:12px}
.mirror canvas{width:180px;height:180px;image-rendering:pixelated;background:radial-gradient(circle at 50% 60%,#3a3066,#1f1936 70%)}
.mirror b{font:600 15px var(--pixel)}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swatch{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 8px;border:0;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);color:var(--text);font:13px var(--body);cursor:pointer;text-align:left}
.swatch i{width:22px;height:22px;flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(15,12,28,.6)}
.swatch.sel{box-shadow:inset 0 0 0 2px var(--exp)}.swatch.cur::after{content:'worn';margin-left:auto;font:11px var(--pixel);color:#8FE3C2}
.sbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sbtn{height:44px;padding:0 18px;border:0;box-shadow:0 0 0 3px var(--ink);font:600 15px var(--pixel);cursor:pointer;background:#F7A8C8;color:#1B1630}.sbtn:disabled{opacity:.45;cursor:default}
.smsg{font-size:13px;color:#8FE3C2}
.lookrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink)}
.lookrow .lab{font:12px var(--pixel);color:var(--muted);letter-spacing:1px}
.lookopts{display:flex;gap:6px;flex-wrap:wrap}
.lookopts button{display:flex;align-items:center;gap:6px;border:0;background:#262040;color:var(--text);box-shadow:inset 0 0 0 2px #3E3566;font:12px var(--pixel);padding:5px 8px;min-height:36px;cursor:pointer}
.lookopts button.on{box-shadow:inset 0 0 0 2px var(--exp);color:var(--exp)}.lookopts img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.costbuy{display:flex;flex-direction:column;gap:6px}
#charLook{display:none;flex-direction:column;gap:8px}
@media (max-width:600px){.dyewrap{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.lookrow{grid-template-columns:1fr}}

/* v0.16: bonds (stances, Wisp Swap) */
#pets .stances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#pets .stances button{display:flex;flex-direction:column;gap:3px;text-align:left;border:0;background:#262040;color:var(--text);box-shadow:inset 0 0 0 2px #3E3566;padding:7px 8px;cursor:pointer;font:inherit;min-height:44px}
#pets .stances button b{font:600 14px var(--pixel)}#pets .stances button span{font-size:11px;color:var(--muted);line-height:1.3}
#pets .stances button.on{box-shadow:inset 0 0 0 2px #8FE3C2}#pets .stances button.on b{color:#8FE3C2}
.bondtag{font:10px var(--pixel);padding:1px 5px;margin-left:8px;background:#F7A8C8;color:#1B1630;vertical-align:2px}
.slot .ico.swapico{background:radial-gradient(circle at 32% 58%,#fff0c0 0 14%,transparent 15%),radial-gradient(circle at 68% 42%,#c9a7ff 0 14%,transparent 15%),conic-gradient(from 45deg,transparent 0 40%,rgba(201,167,255,.5) 40% 50%,transparent 50% 90%,rgba(255,240,192,.5) 90%)}
@media (max-width:560px){#pets .stances{grid-template-columns:1fr}}
@media (max-width:420px){#hotbar{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 16px)}#zoomBtn{display:none}}

/* ---- account: sign in, character select, character creator ---- */
.acct{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#2F2750 0,#1B1630 70%);overflow:auto;padding:24px 16px;box-sizing:border-box}
.acct.on{display:flex}
.acct .box{padding:26px 30px;display:flex;flex-direction:column;gap:14px;max-width:min(760px,calc(100vw - 48px));box-sizing:border-box;-webkit-user-select:text;user-select:text}
.acct .box[hidden]{display:none}
.acct h1{margin:0;font:600 28px var(--pixel);text-align:center}
.acct .sub{margin:0;color:var(--muted);text-align:center}
.acct form{display:flex;flex-direction:column;gap:8px;width:min(340px,80vw);margin:0 auto}
.acct label,.acct legend{font:600 14px var(--pixel);color:var(--muted)}
.acct input{font:16px var(--body);padding:10px 12px;border:0;background:#140F26;color:var(--text);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px #3a3160}
.acct input:focus-visible{outline:3px solid var(--exp);outline-offset:2px}
.acct .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.acct button{font:600 15px var(--pixel);min-height:44px;padding:0 16px;border:0;background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 2px var(--ink);cursor:pointer}
.acct button.primary{background:#6B4FA8;color:#fff}
.acct button:hover:not(:disabled),.acct button:focus-visible{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--exp);outline:none}
.acct button:disabled{opacity:.5;cursor:default}
.acct button.link{background:none;box-shadow:none;color:#CFC3F2;text-decoration:underline;min-height:36px;align-self:center}
.acct .msg{margin:0;min-height:1.3em;text-align:center;color:var(--exp)}
.acct .hint{margin:0;min-height:1.2em;font-size:13px;color:var(--muted)}
.acctHead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.slots{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.slotCard{width:190px;padding:12px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px}
.slotCard canvas{width:150px;height:150px;image-rendering:pixelated}
.slotCard .nm{font:600 18px var(--pixel)}
.slotCard .lv{font-size:13px;color:var(--muted)}
.slotCard .acts{display:flex;gap:8px}
.slotCard.empty{justify-content:center;min-height:250px}
.maker{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.maker .preview{background:#1f1938;box-shadow:inset 0 0 0 2px var(--ink);display:flex;align-items:flex-end;justify-content:center;width:220px;height:260px}
.maker canvas{width:220px;height:220px;image-rendering:pixelated}
.maker .opts{display:flex;flex-direction:column;gap:8px;min-width:280px;max-width:360px}
.maker fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button[aria-pressed="true"]{background:#6B4FA8;color:#fff}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw button{width:44px;min-height:44px;padding:0;position:relative}
.sw button i{position:absolute;inset:8px;box-shadow:inset 0 0 0 2px var(--ink)}
.sw button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px #fff}
/* multiplayer: online count + chat (v0.18) */
#logLines{display:flex;flex-direction:column;gap:2px}
#log p.chat{color:#F4EFFF} #log p.chat.me{color:#FFE3A3}
#netBar{margin-top:6px;display:flex;flex-direction:column;gap:6px}
#netBar[hidden]{display:none}
#netBar .row{display:flex;gap:6px;align-items:center}
#netOnline{flex:none;font:600 12px var(--pixel);color:#9FE3C9;background:#1B1630;border:0;box-shadow:inset 0 0 0 2px var(--ink);padding:5px 8px;cursor:pointer}
#chatForm{flex:1;margin:0;display:flex}
#chatIn{flex:1;min-width:0;font:13px var(--body);color:var(--text);background:#140F26;border:0;box-shadow:inset 0 0 0 2px var(--ink);padding:6px 8px;-webkit-user-select:text;user-select:text}
#chatIn:focus{outline:2px solid var(--frame)}
#chatIn::placeholder{color:#8A80A8}
#netWho{list-style:none;margin:0;padding:6px 8px;background:#1B1630;box-shadow:inset 0 0 0 2px var(--ink);font-size:12px;max-height:120px;overflow:auto;color:var(--muted)}
#netWho b{color:#FFE3A3;font-weight:700}
@media (max-width:760px){#chatIn{font-size:16px}}