*{box-sizing:border-box}body{margin:0;background:#111d19;color:#f1eadb;font-family:system-ui,-apple-system,sans-serif}#app{max-width:900px;margin:auto;padding:12px;display:grid;gap:10px}header{display:flex;justify-content:space-between;align-items:center}header b{font-size:18px;letter-spacing:.5px}header small{display:block;color:#b8b5a8;font-size:10px;letter-spacing:2px}.pill{font-size:11px;padding:6px 10px;border:1px solid #586b5d;border-radius:20px}.panel{background:#202e28;border:1px solid #42584a;border-radius:13px;padding:11px}.auth{max-width:460px;width:100%;margin:8vh auto}.auth input{width:100%;padding:12px;margin:5px 0;border-radius:8px;border:1px solid #56685c;background:#14221c;color:white}.row{display:flex;gap:8px}button{background:#9d7436;color:#fff5df;border:1px solid #d0a95f;border-radius:9px;padding:9px 12px;font-weight:700}button.secondary{background:#33483b;border-color:#647968}.stats{display:flex;justify-content:space-between;gap:10px}.stats small{display:block;color:#c3c4b8;font-size:11px}.right{text-align:right;display:grid;align-content:space-between}.bar{height:6px;background:#39463d;border-radius:9px;margin:4px 0 7px;overflow:hidden;width:min(55vw,380px)}.bar i{display:block;height:100%;width:100%;background:#d94c48}.bar.gold i{background:#d9ad45}.world{height:min(58vh,520px);min-height:340px;position:relative;overflow:hidden;border-radius:13px;border:1px solid #65745b;background:#4a7047}.world canvas{width:100%;height:100%;display:block;touch-action:none}.hudtop{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}.hudtop span{font-size:11px;background:#17231dcc;padding:5px 8px;border-radius:7px}.controls{position:absolute;bottom:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controls button{pointer-events:auto;min-width:43px;min-height:42px;padding:5px;background:#17231ddd;border-color:#ffffff66}.pad{display:grid;grid-template-columns:repeat(2,43px);gap:4px}.actions{display:grid;grid-template-columns:repeat(2, minmax(48px,1fr));gap:4px;max-width:190px}.actions button{font-size:10px}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}nav button{padding:10px 3px;background:#293b30;border-color:#536957;font-size:11px}#panel{min-height:100px}#panel h3{margin:0 0 9px;font-size:14px}.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.tiles button{text-align:left;background:#314538;border-color:#647966;font-size:11px}.tiles small{display:block;color:#d2d0c4;font-weight:400}#notice{font-size:11px;color:#d8c58e;min-height:16px;margin:0}@media(min-width:650px){#app{padding:20px}.world{height:490px}.actions{max-width:230px}.actions button{font-size:12px}}
/* v0.4.0 skill bar + NPC panel */
#skillbar{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:160px}
#skillbar button{font-size:11px;padding:4px 6px}

/* v0.4.3: jade and bronze visual polish, responsive controls */
:root{color-scheme:dark}body{background:radial-gradient(circle at 50% -15%,#344b3d,#111b18 65%)}
.panel{background:linear-gradient(155deg,#293d32,#18271f);border-color:#7c805b;box-shadow:0 7px 25px #07120e55}
button{transition:filter .15s,transform .15s;box-shadow:inset 0 1px #ffffff22}button:active{transform:scale(.96)}button:hover{filter:brightness(1.14)}
button:focus-visible{outline:3px solid #f0c46d;outline-offset:2px}
.world{border:2px solid #a38a53;box-shadow:0 12px 30px #07110e77}
.hudtop span{background:#13261ee8;border:1px solid #aa925c77;backdrop-filter:blur(5px)}
.bar{height:9px;border:1px solid #8e986755}.bar i{background:linear-gradient(90deg,#b83939,#f17655)}.bar.gold i{background:linear-gradient(90deg,#c58a32,#f0d073)}
nav button{background:linear-gradient(#395544,#253b2f)}.controls button{background:#182e27ee;border-color:#d5b16e99}
@media(max-width:430px){#app{padding:6px;gap:7px}.world{min-height:360px;height:58vh}.stats{gap:4px}.controls{bottom:6px;left:5px;right:5px}.actions{max-width:145px}.actions button{min-height:45px}.hudtop span{font-size:10px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* v0.4.6: usable touch targets and character selection */
button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:not-allowed}input,select{min-height:46px;border-radius:9px;padding:10px;background:#14221c;color:#f8f1df;border:1px solid #7b8c75}.auth{max-width:520px;padding:22px}.auth input:not([type=checkbox]),.auth select{width:100%;margin:7px 0}.auth .row button{flex:1}.remember{display:flex;align-items:center;gap:9px;font-size:13px;margin:10px 0}.remember input{min-height:auto;width:20px;height:20px}.character-list{display:grid;gap:12px;margin:18px 0}.character-card{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:10px;min-height:76px;padding:16px;background:linear-gradient(115deg,#314d3d,#20372c);border:1px solid #ba9959}.character-card strong{font-size:17px}.character-card small{color:#dfd2a7}.character-card span{color:#f2cb75}.game-toolbar{justify-content:flex-end}.game-toolbar button{font-size:12px;min-height:38px}nav{grid-template-columns:repeat(3,minmax(0,1fr))}nav button{min-height:48px;font-size:12px}.pad{grid-template-columns:repeat(2,52px)}.controls button{min-width:52px;min-height:52px}.actions{max-width:230px;grid-template-columns:repeat(2,minmax(68px,1fr))}.actions button{font-size:12px;min-height:48px}#skillbar{max-width:100%}.tiles button{min-height:54px}.row{align-items:center;flex-wrap:wrap}@media(max-width:430px){.auth{padding:15px;margin:4vh auto}.actions{max-width:174px}.actions button{font-size:11px;min-width:70px;min-height:49px}.controls{bottom:5px}.world{min-height:390px}.character-card{flex-wrap:wrap}}


/* PONELIA mobile UX refinement: visual-only, no gameplay changes */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;line-height:1.45}
#app{padding-bottom:max(18px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
header{gap:12px;padding:7px 2px}
header b{font-size:clamp(19px,4.6vw,25px);letter-spacing:.065em}
header small{font-size:11px;letter-spacing:.2em}
.pill{white-space:nowrap;font-weight:750;letter-spacing:.035em}
.stats{align-items:start;padding:14px;gap:12px}
.stats>div:first-child{min-width:0;flex:1}
.stats #char{display:block;font-size:clamp(15px,3.8vw,19px);line-height:1.35}
.stats small{font-size:12px;line-height:1.55}
.stats .right{min-width:100px;max-width:42%;gap:8px}
.stats .right b{font-size:18px}
.bar{width:100%;max-width:440px;margin:6px 0 9px}
.game-toolbar{gap:8px}
.game-toolbar button{padding:8px 12px;min-height:44px}
.world{isolation:isolate}
.hudtop{top:10px;left:10px;right:10px;gap:8px}
.hudtop span{font-size:12px;padding:7px 10px;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.controls{gap:10px;align-items:end}
.pad{grid-template-columns:repeat(2,minmax(48px,58px));gap:7px}
.pad button{font-size:18px;font-weight:800;touch-action:manipulation}
.actions{width:min(48%,230px);max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.actions button{font-size:clamp(11px,2.6vw,13px);line-height:1.2;min-width:0;padding:8px 5px;overflow-wrap:normal;touch-action:manipulation}
#skillbar{grid-column:1/-1;max-width:100%;justify-content:flex-end}
#skillbar button{min-height:44px;font-size:12px}
nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
nav button{min-width:0;min-height:54px;font-size:13px;line-height:1.3;padding:9px 5px}
#panel{padding:15px;min-height:120px}
#panel h3{font-size:16px;line-height:1.4}
.tiles{gap:9px}
.tiles button{font-size:13px;line-height:1.4;padding:12px}
.tiles small{font-size:12px;line-height:1.45;margin-top:3px}
#notice{font-size:13px;line-height:1.5}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0c46d;outline-offset:3px}
@media(max-width:430px){
 #app{padding:8px 8px max(18px,env(safe-area-inset-bottom));gap:9px}
 .stats{padding:12px 10px}
 .stats .right{min-width:95px}
 .world{height:min(61dvh,560px);min-height:390px}
 .controls{left:8px;right:8px;bottom:9px}
 .pad{grid-template-columns:repeat(2,52px);gap:6px}
 .pad button{min-width:52px;min-height:52px}
 .actions{width:min(49%,190px);gap:6px}
 .actions button{min-height:48px}
 nav{gap:6px}
 nav button{font-size:12px;min-height:54px}
}
@media(max-width:360px){
 .stats .right{min-width:82px}
 .actions{width:49%}
 .pad{grid-template-columns:repeat(2,48px)}
 .pad button{min-width:48px;min-height:48px}
 .actions button{font-size:11px}
}
@media(min-width:700px){
 nav{grid-template-columns:repeat(6,minmax(0,1fr))}
 .world{height:520px}
}
@media(prefers-reduced-motion:reduce){button{transition:none;scroll-behavior:auto}}

/* Expedition HUD and menu */
#app:has(#game:not([hidden])) { max-width: 1180px; padding: 0; gap: 0; }
#app:has(#game:not([hidden])) > header { position: absolute; z-index: 2; top: max(6px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 0; }
#app:has(#game:not([hidden])) > header > div { display: none; }
#app:has(#game:not([hidden])) > header .pill { background: #112725; color: #f7e4ac; border-color: #bba36a; }
#game .world { height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
.field-hud { position: absolute; inset: max(36px, calc(env(safe-area-inset-top) + 31px)) max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left)); max-width: 570px; pointer-events: none; }
.field-hud .stats { background: linear-gradient(105deg, #132824f5, #14282acc); border-color: #c5a76f; padding: 10px 12px; border-radius: 12px; }
.field-hud .stats .right { min-width: 0; }
.field-hud .stats .right b { font-size: 14px; }
.field-hud .stats #char { font-size: clamp(13px, 3.6vw, 17px); }
.field-hud .bar { height: 5px; margin: 3px 0; }
.field-links, .field-links > div { display: flex; align-items: center; gap: 5px; }
.field-links { justify-content: space-between; margin-top: 5px; }
.field-links span { padding: 4px 6px; background: #142421ee; border-radius: 6px; font-size: 11px; }
.field-links button, #closeMenu { pointer-events: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #172e2d; border-color: #c5a76f; font-size: 20px; }
#game .controls { bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
#game .pad { grid-template: repeat(3, 44px) / repeat(3, 44px); gap: 0; }
#game .pad button { min-width: 44px; min-height: 44px; border-radius: 50%; padding: 0; background: #102523c9; touch-action: none; }
.pad [data-d="up"] { grid-area: 1 / 2; }
.pad [data-d="left"] { grid-area: 2 / 1; }
.pad [data-d="right"] { grid-area: 2 / 3; }
.pad [data-d="down"] { grid-area: 3 / 2; }
#game .actions { width: min(49%, 250px); }
#game .actions button { background: #152f2eee; border-color: #c5a76f; border-radius: 14px; }
#game .actions button.active { background: #caaa60; color: #162421; }
#game #skillbar:empty { display: none; }
#game #skillbar { max-height: 94px; overflow: auto; pointer-events: auto; }
#game #notice { position: absolute; inset: auto 12px max(5px, env(safe-area-inset-bottom)) 12px; background: #122421de; border-radius: 7px; color: #ffebba; padding: 4px 8px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#game #notice:empty { padding: 0; }
#gameMenu { color: #fff0d5; background: #112827; border: 1px solid #bd9b5c; border-radius: 16px; padding: 16px; width: min(94vw, 620px); max-height: 88dvh; overflow: auto; }
#gameMenu::backdrop { background: #071716b3; }
.sheet-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sheet-heading small { color: #dcc181; letter-spacing: .12em; }
.sheet-heading h2 { font-size: 21px; margin: 0; }
#gameMenu nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
#gameMenu nav button { background: #1c3935; border-color: #786b50; }
#gameMenu nav button span { display: block; color: #ebc885; font-size: 19px; }
#gameMenu nav button[aria-pressed="true"] { border-color: #efd597; background: #34544a; }
#gameMenu #panel { background: #142e2a; border-color: #736248; padding: 12px; }
#gameMenu .game-toolbar { margin-top: 12px; }
.world-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.world-routes button { display: grid; justify-items: start; gap: 2px; background: #1e3b36; min-width: 0; }
.world-routes button > span { font-size: 23px; }
.world-routes button > small { font-weight: 400; color: #f0d9a6; }
.world-routes [aria-current="location"] { background: #34594d; outline: 1px solid #ebc885; }
@media (max-width: 650px) {
  #gameMenu { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}