:root{color-scheme:dark;--bg:#14211d;--panel:#13211ef5;--line:#7c704a;--ink:#f2ecd5;--gold:#dec27c;--muted:#aebaaa}*{box-sizing:border-box}body{margin:0;background:#0b1411;color:var(--ink);font:16px/1.5 system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button{background:#20312b;border:1px solid var(--line);border-radius:5px;padding:10px 14px;cursor:pointer}button:hover:not(:disabled),button.selected{background:#344b3f;border-color:var(--gold)}button:disabled{opacity:.42;cursor:default}button:focus-visible{outline:2px solid #cfe7ff;outline-offset:2px}input,select{background:#0e1915;border:1px solid #596d60;padding:10px;border-radius:4px}h1,h2,h3,p{margin:0 0 12px}small{font-size:14px;color:var(--muted)}[hidden]{display:none!important}#app{height:100dvh;position:relative;overflow:hidden;min-height:480px}#scene{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;inset:0 0 auto;display:flex;gap:15px;align-items:center;padding:12px 20px;background:linear-gradient(#101e19f5,#101e1988);z-index:3}header>div{flex:1;display:flex;gap:20px;align-items:baseline}header b{font-size:28px;color:var(--gold)}#objective{position:absolute;top:90px;left:20px;max-width:290px;background:#102119df;border-left:3px solid var(--gold);padding:14px;white-space:pre-line;font-size:14px;pointer-events:none}#exploreNav{position:absolute;bottom:22px;right:22px;display:flex;gap:7px;flex-wrap:wrap;max-width:80%;justify-content:end}#interaction{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:var(--panel);padding:8px 20px;border:1px solid var(--gold);pointer-events:none}#touchControls{position:absolute;bottom:20px;left:20px;display:flex;gap:15px;align-items:end}#pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,40px);gap:4px}#pad button{padding:0;touch-action:none;background:#102119a0}#pad button:first-child{grid-column:2}#pad button:nth-child(2){grid-column:1;grid-row:2}#pad button:nth-child(3){grid-column:2;grid-row:2}#pad button:nth-child(4){grid-column:3;grid-row:2}#interact{font-size:14px}#toast{position:absolute;left:50%;top:90px;transform:translateX(-50%);background:#17281df5;border:1px solid var(--gold);padding:10px 22px;border-radius:6px;z-index:15;opacity:0;pointer-events:none;max-width:90%;text-align:center}#toast.show{opacity:1}#start{position:absolute;inset:0;background:#09150fd9;display:grid;place-items:center;z-index:20}.start-card{width:min(440px,90vw);border:1px solid var(--line);padding:40px;background:var(--panel);box-shadow:0 20px 60px #0009}.start-card h1{font-size:60px;color:var(--gold)}.start-card label{display:grid;gap:8px;margin:25px 0}.start-card button{width:100%;background:#645431}.start-card small{display:block;margin-top:16px}#startError{color:#ffb7ad;margin-top:12px}dialog{width:min(1160px,96vw);max-height:91dvh;background:var(--panel);border:1px solid var(--gold);border-radius:8px;padding:24px;color:var(--ink)}dialog::backdrop{background:#0009}#close{float:right;margin:0 0 12px 20px}#modalContent{clear:both}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.toolbar button{font-size:14px}.split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}.details{padding:18px;background:#0e1916;border:1px solid #4f5946;align-self:start;position:sticky;top:0;white-space:pre-line}.details h3{color:var(--gold)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}.card{text-align:left;padding:12px;min-width:0}.card strong,.card small{display:block}.card canvas{display:block;margin:auto;image-rendering:pixelated}.card p{font-size:14px}.icon{width:54px;height:54px;image-rendering:pixelated;vertical-align:middle;flex-shrink:0}.skill-tree{height:60dvh;overflow:auto;background:#0c1512;border:1px solid #3c4a3e}.tree-row{display:grid;grid-template-columns:58px repeat(5,minmax(104px,1fr));min-width:680px;gap:8px;padding:12px 10px;border-bottom:1px solid #334334}.tree-row:nth-child(even){background:#18221bb0}.tree-level{align-self:center;font-size:14px;color:var(--muted)}.skill-node{position:relative;padding:5px 2px;text-align:center;border-color:var(--type);border-width:2px;min-height:91px;background:#15221c}.skill-node:before{content:'';position:absolute;width:2px;background:#a38d55;top:-14px;height:12px;left:50%}.tree-row:first-child .skill-node:before{display:none}.skill-node.locked{filter:grayscale(.65);opacity:.48}.skill-node strong{display:block;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-node small{font-size:12px}.legend{display:flex;gap:18px}.legend span{border-bottom:3px solid var(--type)}.loadout{display:flex;gap:6px;overflow:auto;padding:8px 0}.loadout button{min-width:78px;font-size:13px;padding:5px}.loadout .icon{width:40px;height:40px}.formation{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;background:#213228}.formation select{width:100%;font-size:14px}.formation small{display:block}.floor-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.floor-list button{text-align:left}.floor-list .boss{border-color:#d38375}#turnOrder{position:absolute;left:20px;right:240px;top:76px;display:flex;gap:6px;overflow:auto;padding:8px;background:#0d1913df;z-index:2}#turnOrder .turn{min-width:65px;padding:5px 8px;font-size:13px;background:#223c30;border:1px solid #6c806d}#turnOrder .turn.enemy{background:#482c29}#turnOrder .turn.active{border:2px solid var(--gold);color:var(--gold)}#partyHud{position:absolute;bottom:15px;left:20px;right:245px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.party-card{background:#11241ce8;padding:10px;border:1px solid #56715c;min-width:0}.party-card.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.party-card button{padding:3px 6px;width:100%;text-align:left;background:transparent;border:0}.party-card small{font-size:12px}.meter{height:8px;background:#27342d;margin:5px 0}.meter i{display:block;height:100%;background:#92c46d}.meter.mp i{background:#5badd5}#battleCommands{position:absolute;right:18px;top:90px;bottom:20px;width:205px;background:var(--panel);padding:14px;overflow:auto;border:1px solid var(--line)}#battleCommands>button{display:block;width:100%;margin-bottom:7px}#battlePrompt,#skillHint{font-size:14px;white-space:pre-line;color:#d5dcca}#battleSkills{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}#battleSkills button{padding:4px;font-size:12px;border-color:var(--type)}#battleSkills .icon{width:40px;height:40px}#battleLog{position:absolute;left:20px;bottom:150px;max-width:calc(100% - 265px);padding:6px 12px;background:#0b1913bd;font-size:14px;white-space:pre-line;pointer-events:none}#result{position:absolute;inset:0;display:grid;place-items:center;background:#05100bbb;z-index:8}.result-card{background:var(--panel);border:1px solid var(--gold);padding:32px;width:min(470px,90%);text-align:center}.result-card h2{color:var(--gold)}.result-card p{white-space:pre-line}.inventory-layout{display:grid;grid-template-columns:260px 1fr 240px;gap:16px}.equipment-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.equipment-slot{padding:5px;font-size:12px}.equipment-slot span,.equipment-slot small{display:block}.equipment-portrait{display:none}.item-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.item-slot{aspect-ratio:1;position:relative;padding:2px;min-width:0}.item-icon{width:48px;height:48px;max-width:100%;image-rendering:pixelated}.item-count{position:absolute;bottom:0;right:3px;font-size:12px}.inventory-tabs,.inventory-pager{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}.inventory-tabs button{font-size:13px;padding:5px}.item-detail{background:#101c17;padding:12px}.item-detail button{display:block;margin:8px 0}.equipment-stats{font-size:14px;white-space:pre-line}.gear-store{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gear-card{padding:12px;border:1px solid var(--line)}.gear-card p{font-size:14px}.gear-card h4{margin:5px 0}.subtitle{white-space:pre-line;color:var(--muted)}
@media(max-width:800px){header{padding:8px 10px;gap:6px}header b{font-size:22px}header>div{gap:8px}header span{font-size:13px}#connection{font-size:11px}header button{font-size:12px;padding:6px}#objective{top:62px;left:10px;max-width:190px;font-size:12px;padding:8px}#exploreNav{right:8px;bottom:10px;max-width:55%;gap:4px}#exploreNav button{font-size:12px;padding:7px}#touchControls{left:8px;bottom:10px;gap:5px}#interact{font-size:12px;padding:8px}#interaction{bottom:110px;max-width:80%;font-size:13px}.split{grid-template-columns:1fr}.details{position:static}.skill-tree{height:45dvh}.formation{grid-template-columns:repeat(2,1fr)}#turnOrder{top:58px;left:8px;right:150px;padding:4px}#turnOrder .turn{font-size:11px;min-width:48px}#battleCommands{right:6px;top:65px;bottom:8px;width:135px;padding:8px}#battleCommands h3{font-size:15px}#battleCommands>button{font-size:13px;padding:6px}#battlePrompt,#skillHint{font-size:12px}#battleSkills{grid-template-columns:repeat(2,1fr)}#battleSkills .icon{width:30px;height:30px}#partyHud{left:6px;right:148px;bottom:8px;grid-template-columns:repeat(2,1fr);gap:4px}.party-card{padding:5px}.party-card button{font-size:12px}.party-card small{font-size:10px}.meter{height:5px;margin:3px 0}#battleLog{bottom:167px;left:6px;max-width:calc(100% - 154px);font-size:11px}.inventory-layout{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(6,1fr)}dialog{padding:14px}.gear-store{grid-template-columns:repeat(2,1fr)}}
.cards>button small,.cards>button b,.floor-list small,.floor-list b,.loadout small,#battleSkills small,.party-card small,.turn small{display:block}.icon{border:2px solid transparent;border-radius:4px}.empty-slot{min-height:100px;border:1px solid #475443;background:#0d1814}.equipment-slots{grid-template-columns:repeat(4,1fr);margin:15px 0}.equipment-slot{border:1px solid #5b634b;background:#1b2b23}.equipment-slot small{display:block}.equipment-slot>button{font-size:12px;padding:4px}.merc-portrait{image-rendering:pixelated;display:block;margin:auto}.card{border:1px solid #5b634b;background:#19291f}.muted{color:var(--muted)}#modalContent>p{white-space:pre-line}.card b,.card small{display:block}.card button{width:100%}.loadout button:focus{border-color:#ffe9a0}#battleSkills .icon{border:2px solid}.party-card>b{font-size:14px}.floor-list{max-height:65dvh;overflow:auto}#turnOrder>b{font-size:12px;min-width:36px;align-self:center}@media(max-width:800px){.equipment-slots{grid-template-columns:repeat(2,1fr)}.party-card>b{font-size:11px}}
.modal-notice{position:sticky;bottom:0;background:#263a2a;border:1px solid #bca063;padding:12px;color:#fff1bd}
#chatPanel{position:absolute;right:20px;top:70px;z-index:5;width:310px;background:#10221feb;border:1px solid #647653;border-radius:5px;font-size:14px}#chatPanel summary{padding:8px 12px;cursor:pointer;color:#e4d39f}#chatMessages{height:150px;overflow:auto;padding:6px 10px;overflow-wrap:anywhere}#chatMessages>div{padding:3px 0}.chat-compose{display:flex;gap:4px;padding:6px}.chat-compose input{width:0;min-width:0;flex:1;padding:6px}.chat-compose button{padding:6px;font-size:14px}#exploreNav{max-width:70%}body:has(#battleCommands:not([hidden])) #chatPanel{top:auto;bottom:180px;right:245px;width:280px}body:has(#battleCommands:not([hidden])) #chatPanel:not([open]){width:auto}body:has(#battleCommands:not([hidden])) #chatMessages{height:110px}@media(max-width:800px){#chatPanel{right:8px;top:62px;width:220px;font-size:12px}#chatMessages{height:110px}#exploreNav{max-width:56%}body:has(#battleCommands:not([hidden])) #chatPanel{right:148px;bottom:210px;width:210px}}
#start{padding:20px;background:linear-gradient(#08140eea,#0c1b18ed)}.start-card{width:min(1080px,96vw);max-height:94dvh;overflow:auto;padding:28px 32px;border-radius:10px}.selection-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.selection-heading h1{font-size:32px;letter-spacing:.04em;margin:5px 0}.selection-heading a{color:#d8d9bd;font-size:14px;padding:10px}.selection-heading small{letter-spacing:.3em;margin:0}.character-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.character-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:245px;padding:14px 8px;background:linear-gradient(155deg,#2c4238,#17261e);border:1px solid var(--class-color);border-top:4px solid var(--class-color)}.character-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 5px 18px #0005}.character-card b{font-size:17px;overflow-wrap:anywhere}.character-card span{font-size:14px}.character-card small{font-size:12px;margin:6px 0 0}.character-art{width:130px;height:auto;image-rendering:pixelated}.character-card.empty{border:1px dashed #65766a;opacity:.8;background:#16271f}.character-card .slot-plus{font-size:54px;font-weight:200;color:#a7b4a4;margin-bottom:20px}.start-card>#startButton{width:auto;min-width:230px}.start-card>#startError{color:#f4c097}#characterCreator{border-top:1px solid #536748;margin-top:22px;padding-top:20px}#characterCreator label{margin:12px 0}#characterCreator select{width:100%}.creator-actions{display:flex;gap:10px}.creator-actions>button{width:auto;min-width:140px}#jobDescription{font-size:14px;color:#c5d3ba}@media(max-width:650px){#start{padding:8px}.start-card{padding:18px;max-height:96dvh}.selection-heading h1{font-size:25px}.character-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.character-card{min-height:210px;padding:8px}.character-art{width:110px}.character-card b{font-size:15px}.character-card small{font-size:12px}.creator-actions>button{min-width:0;flex:1}}

.skill-tree{overflow-anchor:none;scroll-behavior:auto}.skill-node .cross-link{color:#dfc27e;white-space:normal;font-size:10px}.skill-node:has(.cross-link):after{content:"";position:absolute;top:-14px;left:50%;width:110%;height:12px;border-top:2px dashed #b19b67;transform:skewY(-5deg);pointer-events:none}.skill-node strong{white-space:normal;min-height:28px}.tree-row{padding-top:22px}.skill-node:before{top:-24px;height:22px}
/* Pixel framed game surfaces: readable typography, fewer floating blocks. */
:root{--bg:#111923;--panel:#131c29fa;--ink:#ede8da;--line:#8b7956;--gold:#e4c982;--muted:#a6b3bc}body{font-family:system-ui,'Malgun Gothic',sans-serif;caret-color:transparent;user-select:none}input,textarea,[contenteditable=true]{caret-color:auto;user-select:text}textarea{display:block;width:100%;min-height:100px;background:#101722;border:1px solid #657383;color:var(--ink);font:inherit;padding:12px;resize:vertical}button{border-radius:2px;border:1px solid #8b7956;box-shadow:inset 0 1px #ffffff12,inset 0 -2px #0004;background:linear-gradient(#273343,#182330);transition:background .12s,border-color .12s}button:hover:not(:disabled){background:#35465a;border-color:#f1db9b}button:active:not(:disabled){transform:translateY(1px)}header{height:62px;background:#0b1420ed;border-bottom:2px solid #8b7956;box-shadow:0 2px #0008}header b{font-family:Georgia,serif;letter-spacing:3px}.card,.details{background:#182331;border:1px solid #4e5e6a;border-radius:2px}.card{box-shadow:inset 0 0 0 3px #101923;transition:border-color .15s}.card b,.card h3{color:#ece0c1}.details{border-top:3px solid #c6aa68}.toolbar{padding:10px;background:#0d1723;border:1px solid #354657}dialog{padding:26px;border-radius:2px;border:2px solid #bfa772;box-shadow:0 0 0 4px #172332,0 0 0 5px #5e563f,0 20px 70px #000b;overflow-anchor:none}dialog h2{font-size:25px;letter-spacing:.03em;border-bottom:1px solid #495264;padding-bottom:14px;color:#ebd6a0}#objective{top:78px;left:18px;border:1px solid #77674c;border-left:3px solid #cab075;background:#0c1723d9;border-radius:2px;font-size:12px;padding:10px 14px;line-height:1.65;max-width:265px;box-shadow:0 3px 15px #0004}#exploreNav{right:14px;bottom:14px;max-width:calc(100% - 345px);gap:5px}#exploreNav button{font-size:12px;padding:9px 11px}#chatPanel{left:14px;right:auto;top:auto;bottom:14px;width:305px;background:#101b2bef;border:1px solid #8b7956;border-radius:2px}#chatPanel summary{font-size:12px;border-bottom:1px solid #3c4c5b;padding:6px 10px}#chatMessages{height:115px;font-size:12px;line-height:1.6}#touchControls{left:auto;right:15px;bottom:115px}#interact{padding:8px 12px}#pad{display:none}#interaction{bottom:115px;max-width:50%;font-size:13px;border-radius:2px}#battleCommands{border:2px solid #a68e5a;background:#101a29ef;box-shadow:inset 0 0 0 3px #1f2c3a}#battleCommands h3{font-size:16px;color:#ebd6a0;padding-bottom:10px;border-bottom:1px solid #53606c}#partyHud{left:335px;right:245px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.party-card{background:#14283be8;border:1px solid #637c8d}.party-card.active{border-color:#ffe19a;box-shadow:inset 0 0 0 2px #c5a96855}#battleLog{bottom:160px;font-size:12px;background:#101a2988}body:has(#battleCommands:not([hidden])) #chatPanel{left:14px;right:auto;top:auto;bottom:14px;width:305px}#turnOrder{background:#101a29ed;border:1px solid #6d6950}#turnOrder .turn{background:#22384c;border-radius:2px}#turnOrder .turn.enemy{background:#482c38}#turnOrder .turn.active{border-color:#ffe6a1}#toast{background:#182b39;border:2px solid #d0b775;box-shadow:0 3px 20px #0007}.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.admin-grid input{width:100%;margin:8px 0}.profile-hero{display:flex;gap:25px;align-items:center;white-space:pre-line;padding:15px;background:#0c1624;margin-bottom:20px;border:1px solid #4c5d6e}.stat-row{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:10px 0;border-bottom:1px solid #354252}.stat-row small{grid-column:1/-1;grid-row:2;font-size:12px}.stat-row button{padding:5px 8px}.record-row{display:grid;grid-template-columns:70px 1fr 190px;gap:12px;border-bottom:1px solid #354657;padding:12px}.trade-item{display:flex;align-items:center;gap:12px;padding:6px}.trade-offer{background:#24364b;padding:15px;border-left:3px solid #e0c47c;white-space:pre-line}.skill-tree{background:#101824}.tree-row:nth-child(even){background:#1c283680}.skill-node{background:#142331}.empty-slot{background:#0c1623;border:1px solid #314453}
@media(pointer:coarse){#pad{display:grid}#touchControls{bottom:170px}#interact{font-size:12px}}@media(max-width:800px){#objective{top:70px;max-width:185px;font-size:10px;left:8px}#chatPanel,body:has(#battleCommands:not([hidden])) #chatPanel{left:8px;bottom:8px;width:190px}#chatMessages{height:65px}.chat-compose{padding:3px}#exploreNav{max-width:calc(100% - 210px);right:8px;bottom:8px}#exploreNav button{font-size:10px;padding:5px 7px}#partyHud{left:205px;right:148px;grid-template-columns:1fr;max-height:160px;overflow:auto}#partyHud .party-card{padding:3px}#turnOrder{top:65px}#interaction{bottom:150px}.admin-grid{grid-template-columns:repeat(2,1fr)}.record-row{grid-template-columns:50px 1fr}.record-row small{grid-column:2}.profile-hero{gap:10px;font-size:12px}#battleCommands{top:75px}#touchControls{bottom:160px}}

#turnBanner{position:absolute;top:136px;left:20px;right:245px;padding:10px 16px;background:#102c40f5;border:2px solid #70d5ff;color:#e5f8ff;font-weight:700;text-align:center;z-index:5;pointer-events:none;box-shadow:0 4px 16px #0008}#turnBanner[data-side="enemy"]{background:#491b22f5;border-color:#ff7f83;color:#fff1ed}#turnBanner[data-side="other"]{background:#342b49f5;border-color:#bf9ee8}#battleCommands .command-selected{border:2px solid #ffe1a0;background:#574522;color:#fff6dc;box-shadow:inset 4px 0 #ffe1a0}#battleCommands .command-selected:before{content:'▶ ';color:#ffe1a0}#turnOrder .turn.active{background:#38526b;box-shadow:0 0 10px #80d7ff88}#turnOrder .turn.enemy.active{background:#75313b;border-color:#ff9296}@media(max-width:800px){#turnBanner{top:120px;left:8px;right:165px;padding:6px 8px;font-size:14px}}

.account-panel{max-width:460px;margin:24px auto;padding:24px;border:1px solid #9b8858;background:#102032}.account-panel label{display:block;margin:16px 0;font-size:16px}.account-panel input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;padding:12px;font-size:16px;margin-top:8px}.account-panel a{color:#d9c58b}.account-panel p{line-height:1.6}.account-panel [type=checkbox]{width:20px;height:20px;vertical-align:middle}#accountError{color:#ffc3aa}[hidden]{display:none!important}
