/* Handheld RPG layout: one viewport, tiled overworld and framed commands. */
:root{--ink:#303c52;--paper:#fff8df;--accent:#d55056}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;padding:12px;background:#27384b;font-family:'Courier New',monospace;color:var(--ink);height:100dvh;display:grid;place-items:center}.shell{width:min(1080px,100%);height:calc(100dvh - 24px);max-height:960px;margin:0;background:#eff1dc;border:4px solid #182638;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 5px 0 #111c2d}.topbar{height:54px;min-height:54px;margin:0;padding:8px 16px;background:#d54f58;border:0;color:#fff6dc;display:flex;align-items:center;justify-content:space-between}.wordmark{color:#fff9de;font-size:16px}.edition{font-size:9px;color:#ffe1b5}.header-actions{gap:7px}.topbar button{background:#fff6dc;color:#354056;border:2px solid #833741;min-height:36px;font:11px monospace}.intro,.journey,.run-meta{display:none}.shell>footer{margin:0;padding:5px 12px;min-height:24px;font:9px monospace;border-top:2px solid #596b75;background:#e2e8cf}.shell>footer>span:last-child{display:none}button{font-family:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #3288b1;outline-offset:3px}.karipap-logo{width:30px;height:26px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 0 #833741)}main.game{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;border:0;border-radius:0;box-shadow:none;margin:0;overflow:hidden}.arena{flex:1;min-height:0;border:0;border-radius:0;display:flex;flex-direction:column;background:#d9e6c3;overflow:hidden}.arena-top{padding:7px 16px;flex:none;font:10px monospace}.health-row{padding:0 16px;gap:20px;flex:none;display:grid;grid-template-columns:1fr 1fr}.health-card{border:3px solid #3c4855;border-radius:0 0 12px 0;padding:8px 12px;background:#fff8df;box-shadow:3px 3px 0 #94a58e}.fighter h2{font:bold 19px monospace;margin:0}.fighter{gap:8px}.health-meta{font:10px monospace;margin-top:5px}.meter{height:9px;border:2px solid #384453;border-radius:0;background:#a4b49c}.meter>div{background:#50b76d}.type{font-size:8px;padding:3px 5px}.scene-wrap{flex:1!important;min-height:0;position:relative;width:100%!important;height:auto!important;aspect-ratio:auto;margin:0;overflow:hidden}.scene-wrap canvas#pixel-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;image-rendering:pixelated}.arena-bottom{display:none}.command-panel{flex:none;padding:12px 16px;border:4px solid #354457;border-radius:8px;background:#fff8df;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;max-height:45%;overflow:auto;box-shadow:inset 0 0 0 3px #b6c6ad}.command-heading{grid-column:1;grid-row:1;margin:0;align-items:center}.command-heading .eyebrow{display:none}.command-heading h2{font:bold 17px monospace;margin:0}.energy>span{font-size:8px}.energy i{width:8px;height:15px}.intent{grid-column:1;grid-row:2;padding:6px 8px;border:0;border-left:4px solid #d59d4a;background:#efe7cb;margin:0;gap:7px}.intent small{font-size:8px;letter-spacing:0}.intent strong{font:12px monospace}.intent p{font:10px/1.4 monospace;margin:3px 0}.intent-mark{font-size:19px}.enemy-hint{display:none}.moves{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}.move{padding:9px 10px;min-height:68px;border:2px solid #48566b;border-radius:5px;box-shadow:0 3px 0 #9da98f;background:#f3ecd1;text-align:left}.move strong{font:bold 13px monospace}.move-top,.move-en{display:none}.move-info{font-size:9px;margin-top:8px}.move-info b{font-size:9px}.move.quick{background:#f7d990}.move.iron{background:#c4dfed}.move.guard{background:#c9dfb0}.move.heal{background:#f1c5bd}.battle-message{grid-column:1;grid-row:3;margin:0;padding:7px 0;background:transparent;min-height:42px;font:11px/1.5 monospace}.battle-message p{font:inherit;margin:0}.history{display:none}.boost{grid-column:1;font-size:10px;margin:0}.result{grid-column:1/-1;padding:12px;margin:0;max-height:none}.result h2{font:bold 23px monospace}.result p{font:12px/1.5 monospace}.upgrade-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.camp-note{grid-column:1/-1;margin:0}.upgrade-choices button{padding:10px;border:2px solid #657c69;background:#f0e9c8}.upgrade-choices button strong{font:12px monospace}.upgrade-choices button small{font:10px monospace}.primary{font:bold 14px monospace;border:2px solid #344456;border-radius:5px;background:#e5bc55;color:#283849;padding:12px 20px;min-height:44px}.badge{font-size:32px;width:60px;height:60px;margin:auto}.result:has(#badge:not([hidden])){text-align:center}
#opening-screen{flex:1;min-height:0;overflow:auto;text-align:center;padding:clamp(24px,7vh,70px) 20px;background:repeating-linear-gradient(0deg,#f5edcd 0px,#f5edcd 3px,#efe7c7 3px,#efe7c7 4px)}.title-logo{font:bold clamp(32px,7vw,65px)/1.1 monospace;color:#f2c63e;text-shadow:3px 3px #2b6192,-2px -2px #2b6192;letter-spacing:-3px;margin:20px 0 8px}.title-sub{font:bold 16px monospace;letter-spacing:3px;color:#447f77}.title-pika{font-size:68px;margin:20px auto;color:#de9f20}.title-actions{display:flex;flex-direction:column;gap:12px;max-width:290px;margin:25px auto}.title-actions button{min-height:48px}.opening-copy{font:12px/1.8 monospace;max-width:400px;margin:20px auto}.title-tag{font:10px monospace;color:#60735f}
#world-screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:#c9dba9}.world-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;gap:10px;background:#fff8df;border-bottom:3px solid #465b66}.world-header h2{font:bold 17px monospace;margin:0}.world-header small{font:10px monospace}.world-field{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#355b4d}.world-square{height:100%;max-width:100%;aspect-ratio:1;position:relative}#world{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation;cursor:pointer}.world-dialogue{flex:none;padding:10px 16px;border:4px double #3c4a5d;background:#fff8df;min-height:72px}.world-dialogue p{font:12px/1.5 monospace;margin:3px 0}#world-objective{font-weight:bold}#world-interaction{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 24px));background:#fff8df;border:4px solid #354457;padding:16px;box-shadow:4px 4px #142e3a55;z-index:2}#world-interaction h3{font:19px monospace;margin:0 0 8px}#world-interaction p{font:12px/1.5 monospace}#world-interaction button{min-height:44px;padding:9px 18px;border:2px solid #445268;background:#f1d483}#interact-close{background:#eee8d5!important}#save-note{font:9px monospace;margin-left:8px}.world-chip{font:bold 10px monospace;border:2px solid #657b68;padding:7px;background:#e9eccb}dialog{background:#fff7dc;border:4px double #354457;border-radius:5px;max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto}dialog h2{font:bold 24px monospace}dialog p,dialog li{font:12px/1.6 monospace}dialog::backdrop{background:#182638aa}
@media(max-width:650px){body{padding:0}.shell{height:100dvh;max-height:none;border-width:0;border-radius:0}.topbar{padding:6px 10px;height:48px;min-height:48px}.wordmark{font-size:13px}.edition{display:none}.topbar button{font-size:9px;padding:5px 8px}.health-row{padding:0 10px;gap:10px}.health-card{padding:6px 8px;border-width:2px}.fighter h2{font-size:14px}.health-meta{font-size:9px}.health-meta>span{display:none}.type{font-size:7px}.command-panel{padding:10px;grid-template-columns:1fr;gap:5px;max-height:48%;border-width:3px}.command-heading{grid-column:1;grid-row:1}.command-heading h2{font-size:14px}.intent{grid-column:1;grid-row:2;display:none}.battle-message{grid-column:1;grid-row:2;min-height:28px;font-size:10px;padding:3px 0}.moves{grid-column:1;grid-row:3;gap:6px}.move{min-height:55px;padding:7px 9px}.move strong{font-size:12px}.move-info{margin-top:5px}.upgrade-choices{grid-template-columns:1fr}.upgrade-choices button{min-height:44px}.world-header h2{font-size:13px}.world-header small{font-size:8px}.world-chip{font-size:9px}.world-square{height:auto;width:100%;max-height:100%;aspect-ratio:1}.world-dialogue p{font-size:10px}.world-dialogue{min-height:78px;padding:8px 10px}}
@media(max-height:520px) and (min-width:651px){.topbar{height:40px;min-height:40px}.command-panel{max-height:43%;padding:7px 12px}.intent{display:none}.move{min-height:46px;padding:5px 10px}.health-card{padding:4px 8px}.arena-top{padding:3px 12px}.battle-message{font-size:10px}.world-dialogue{min-height:52px;padding:5px 12px}}

.shell{padding:0}.health-row{margin:0}#world{visibility:visible;position:static}#return-map{margin:8px}

@media(max-width:650px){.intent{display:flex;grid-row:2;padding:3px 7px;gap:4px}.intent small,.intent-mark{display:none}.intent strong{display:inline;font-size:10px;margin:0 5px 0 0}.intent p{display:inline;font-size:9px}.battle-message{grid-row:3}.moves{grid-row:4}}
/* Rotating 3D overworld fills the map region; camera ray picking handles rotation. */
.world-square{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}.world-field{overflow:hidden}#world{position:absolute;inset:0;width:100%;height:100%}.camera-controls{position:absolute;right:10px;bottom:10px;z-index:1;display:flex;gap:5px}.camera-controls button{min-width:44px;min-height:44px;border:2px solid #354457;background:#fff4d7;color:#354457;font:bold 13px monospace;padding:7px 10px;box-shadow:2px 2px #293b4055}.camera-controls button:first-child,.camera-controls button:last-child{font-size:23px}#camera-reset{font-size:10px}

.map-label{position:absolute;transform:translate(-50%,-50%);font:bold 10px monospace;white-space:nowrap;background:#fff5d9;color:#294d42;border:1px solid #294d42;padding:4px 6px;pointer-events:none;box-shadow:1px 2px #1c383b33}@media(max-width:650px){.map-label{font-size:9px;padding:3px 4px}}

#world-weather{display:block;margin-top:4px;font:10px/1.3 monospace;color:#526272}
/* Supplied transparent title artwork; controls remain native HTML. */
body[data-view="opening"]{background:#f7f1d5}
body[data-view="opening"] .shell{border:0;border-radius:0;box-shadow:none;background:#f7f1d5}
body[data-view="opening"] .topbar,body[data-view="opening"] .shell>footer{display:none}
#opening-screen{display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(8px,1.7vh,18px);padding:32px 20px;background:repeating-linear-gradient(0deg,#f7f2d9 0px,#f7f2d9 2px,#f5efd3 2px,#f5efd3 4px)}
.title-art{position:relative;flex:none;width:min(720px,90%);aspect-ratio:3/1;margin:8px 0 0}
.title-art img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
#opening-screen .title-tag{font:bold clamp(10px,1.4vw,15px)/1.6 monospace;color:#5a7c79;margin:0}
#opening-screen .title-pika{font:clamp(44px,6vh,64px)/1 monospace;color:#e5a21b;margin:0}
#opening-screen .opening-copy{font:clamp(12px,1.65vw,18px)/1.8 monospace;color:#24496a;max-width:620px;margin:4px 0 10px}
#opening-screen .title-actions{width:min(510px,94%);max-width:none;flex:none;margin:4px 0 8px;gap:14px}
#opening-screen .title-actions button{min-height:62px;padding:14px 20px;border:3px solid #214968;border-radius:3px;background:linear-gradient(110deg,#f4c94e,#eabe4c);box-shadow:inset 0 0 0 2px #ffe8a1,0 3px 0 #7f957f;color:#214968;font:bold clamp(13px,1.9vw,21px)/1.2 monospace;letter-spacing:.3px}
#opening-screen .title-actions button:hover{background:#ffdb68}
#opening-screen .title-actions button:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #ffe8a1}
@media(max-width:600px){#opening-screen{padding:28px 14px;gap:18px}.title-art{width:100%;margin:4px 0}#opening-screen .title-actions button{min-height:56px}#opening-screen .opening-copy{font-size:12px}#opening-screen>.title-tag:last-child{max-width:290px}}
@media(max-height:620px){#opening-screen{justify-content:flex-start;gap:10px;padding-top:20px}.title-art{width:min(390px,85%)}#opening-screen .title-actions button{min-height:48px}#opening-screen .title-pika{font-size:36px}}


#opening-options:focus-visible{outline:3px solid #315e80;outline-offset:3px}
#options-dialog h2{font: bold 24px monospace;margin:16px 0 26px}
.volume-label{display:flex;justify-content:space-between;gap:20px;font:bold 14px monospace;margin-top:20px}
#options-dialog input[type=range]{display:block;width:100%;min-height:44px;margin:6px 0 12px;accent-color:#315e80;touch-action:pan-y;cursor:pointer}
.mute-option{display:flex;align-items:center;gap:10px;min-height:48px;font:13px monospace}
.mute-option input{width:20px;height:20px;accent-color:#315e80}
#options-audio-note{font:12px/1.6 monospace;min-height:38px}
#preview-effect:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){.header-actions{gap:4px}.topbar .wordmark{font-size:11px}.topbar button{padding:5px}.topbar{padding-inline:8px}}

#options-dialog{width:min(460px,calc(100vw - 28px));max-width:460px;max-height:85dvh;padding:26px 24px;overflow:auto;border:3px solid #354457;border-radius:8px}

.world-tools{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;justify-content:flex-end;flex:none}
#journal-dialog{width:min(700px,calc(100vw - 24px));padding:24px;scrollbar-gutter:stable}
#journal-dialog h2{margin:10px 0 20px}#journal-dialog h3{font:bold 14px monospace;margin:24px 0 12px}
.journal-current{padding:12px;border-left:4px solid #477ca1;background:#e4edd3;font-weight:bold!important}
#journal-steps{list-style:none;padding:0}#journal-steps li{padding:12px 0;border-bottom:1px solid #c5c5a6}#journal-steps li strong{font-size:13px}#journal-steps li p{margin:6px 0 0}#journal-steps .done strong{color:#376344}
#journal-areas{display:grid;grid-template-columns:1fr 1fr;gap:8px}#journal-areas article{padding:12px;border:2px solid #c5c5a6;background:#f3ecd1}#journal-areas .current{border-color:#477ca1;background:#dfebdd}#journal-areas strong{font:12px monospace}#journal-areas p,.journal-legend{font:10px/1.6 monospace!important}
.story-modal{width:min(550px,calc(100vw - 24px));padding:clamp(20px,4vw,40px);text-align:center;border:4px double #354457;box-shadow:8px 8px #172a3155}.story-modal h2{line-height:1.3}.story-modal p{line-height:1.9}.story-symbol{font-size:54px;color:#d59d4a}.story-modal .primary{margin-top:14px;width:100%}
.ending-modal{background:radial-gradient(ellipse at top,#fff19b,#fff7dc 65%)}.ending-beacon{font-size:58px;color:#e9be3f;text-shadow:3px 3px #365c7c;margin:12px}.ending-badge{display:block;font:11px/1.6 monospace;border:2px solid #b8996d;padding:12px;background:#f7edc7}.ending-note{color:#526272}
#game-menu-toggle{width:44px;min-height:44px;flex:none;padding:0;font:26px/1 monospace;border:2px solid #657b68;border-radius:4px;background:#fff6dc;color:#354056;cursor:pointer}
#game-menu,#music-dialog{width:min(420px,calc(100vw - 24px));padding:26px 22px;border:3px solid #354457;border-radius:8px}#game-menu h2,#music-dialog h2{font:bold 22px monospace;margin:14px 0 24px}.game-menu-items{display:grid;gap:10px}.game-menu-items button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 14px;text-align:left;font:bold 13px monospace;border:2px solid #657b68;border-radius:4px;background:#f3ecd1;color:#283849;box-shadow:0 2px #b6c6ad}.game-menu-items #menu-exit{background:#f1d5bd}.game-menu-items button:disabled{opacity:.5;cursor:wait}#menu-save-note{font:11px/1.6 monospace;margin:20px 0 0}
#music-choice{width:100%;min-height:48px;margin:12px 0;padding:10px;border:2px solid #657b68;background:#fff8df;color:#283849;font:12px monospace}#music-status{background:#e4edd3;border-left:3px solid #657b68;padding:10px}.audio-extra{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.audio-extra button{min-height:44px;border:1px solid #657b68;padding:8px 12px;background:#f3ecd1;color:#283849;font:12px monospace}
body[data-view="exit"] .topbar,body[data-view="exit"] .shell>footer{display:none}#exit-screen{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;padding:30px 24px;text-align:center;background:#fff7dc}#exit-screen h1{font:bold clamp(24px,4vw,36px) monospace;margin:0}#exit-screen p{font:13px/1.8 monospace;max-width:440px;margin:0}#exit-screen .primary{margin-top:20px}

@media(max-width:650px){.world-header{padding:7px 9px;gap:5px}.world-tools{gap:7px}.world-chip{border:0;background:transparent;padding:0;font-size:9px}#journal-dialog{padding:20px 16px}#journal-areas{grid-template-columns:1fr}.world-dialogue{max-height:120px;overflow:auto}#world-interaction{bottom:110px;max-height:55%;overflow:auto}}