/* Full viewport shell; the original illustrations, controls and modal views are retained. */
html,body,html[data-input=touch],html[data-input=touch] body{height:var(--game-vh,100dvh);overflow:hidden;overscroll-behavior:none}
#app,html[data-input=touch] #app{height:var(--game-vh,100dvh);min-height:0;display:flex;flex-direction:column}
.topbar,html[data-input=touch] .topbar{height:50px;min-height:50px;padding:0 max(10px,env(safe-area-inset-left));gap:10px;flex-shrink:0}.brand{gap:8px}.brand b{font-size:16px}.brand small{display:none}.seal{width:30px;height:32px;font-size:21px}.topbar>.icon-button,html[data-input=touch] .topbar>.icon-button{min-width:44px;min-height:44px;margin:0}.status{gap:16px}
#app main,html[data-input=touch] #app main{width:100%;max-width:none;margin:0;padding:0;min-height:0;flex:1;display:flex;flex-direction:column}
.chapter,.below,#app>footer,html[data-input=touch] .chapter,html[data-input=touch] .below,html[data-input=touch] #app>footer{display:none}
.tabs,html[data-input=touch] .tabs{height:44px;min-height:44px;flex-shrink:0;margin:0;gap:0;overflow-x:auto;background:var(--paper);scrollbar-width:none}.tabs button,html[data-input=touch] .tabs button{padding:8px 16px;min-height:44px;white-space:nowrap}
.layout,html[data-input=touch] .layout{position:relative;flex:1;min-height:0;display:flex;gap:0;grid-template-columns:none}
.world-card,html[data-input=touch] .world-card{position:relative;width:100%;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.canvas-wrap,html[data-input=touch] .canvas-wrap{position:absolute;inset:0;width:100%;height:100%;min-height:0;display:block;background:#344c49}
canvas#world,html[data-input=touch] canvas#world{display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:fill;image-rendering:pixelated}
.world-top,html[data-input=touch] .world-top{position:absolute;z-index:2;top:0;left:0;right:0;height:38px;padding:0 12px;background:#f6f3e9e8;gap:12px;pointer-events:none}.world-top>div{gap:8px}.world-top button{pointer-events:auto;padding:5px 12px;min-height:34px;font-size:12px}.world-top .muted{display:none}#world-progress{margin-left:auto}
.map-note{display:none}.controls{position:absolute;bottom:0;left:0;right:0;z-index:2;background:#f6f3e9eb;min-height:29px;padding:5px 12px}.interaction{bottom:48px;z-index:2}
.sidebar,html[data-input=touch] .sidebar{display:none;position:absolute;z-index:5;right:10px;top:48px;bottom:42px;width:min(310px,calc(100% - 20px));overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 4px 20px #243f3b44;overscroll-behavior:contain}.layout[data-journal=open] .sidebar,html[data-input=touch] .layout[data-journal=open] .sidebar{display:flex;flex-direction:column;gap:10px}.sidebar .mentor-card{display:none}.journal-card{padding:10px}.mini-stats{margin-top:8px}
html[data-input=touch] .touch-controls{position:absolute;z-index:3;bottom:max(12px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));min-height:0;padding:0;border:0;background:none;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end}html[data-input=touch] .touch-controls>#joystick,html[data-input=touch] .touch-actions{pointer-events:auto}#joystick{background:#e5e9d8cf}html[data-input=touch] .interaction{display:none}html[data-input=touch] .sidebar{bottom:140px}html[data-input=touch] .touch-actions{gap:10px}
.modal-layer,html[data-input=touch] .modal-layer{top:var(--visual-top,0px);height:var(--game-vh,100dvh);bottom:auto;padding:10px max(10px,env(safe-area-inset-left))}
#modal,html[data-input=touch] #modal{width:min(1240px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden}.modal-header{padding:12px 20px;flex-shrink:0}.modal-header h2{font-size:23px}#modal-body{padding:16px 20px;min-height:0;overflow:auto;overscroll-behavior:contain}
@media(max-width:900px){.status .xp-block{display:none}.brand b{font-size:14px}.tabs button,html[data-input=touch] .tabs button{padding:8px 10px}.world-top .muted{display:none}}
@media(max-width:600px){.brand b{display:none}.status .stat-count{display:none}.topbar,html[data-input=touch] .topbar{gap:2px}.world-top,html[data-input=touch] .world-top{padding:0 8px;font-size:11px}.modal-header{padding:10px 12px}#modal-body{padding:12px}.world-top>div{gap:4px}}
.herb-photo{width:100%;height:128px;object-fit:contain!important;object-position:center;image-rendering:auto!important;background:transparent}.herb-photo.pixel-art{image-rendering:pixelated!important}.herb-photo.herb-enlarged{display:block;margin:auto;max-width:min(100%,640px);width:100%;height:min(42vh,420px);object-fit:contain!important}.herb-drawer .herb-photo{height:110px;min-width:0}.craft-chip .herb-photo{width:38px;height:38px}.fact-box .herb-photo{display:inline-block;width:68px;height:54px;vertical-align:middle;margin:4px 8px 4px 0}.image-editor{max-width:800px;margin:auto}.image-editor input[type=file]{display:block;width:100%;padding:14px;border:1px solid var(--line);margin-top:10px}.image-editor .info-line{margin:12px 0}.image-editor label{display:block;line-height:1.6}.herb-visual-grid .herb-photo{width:100%;height:128px}
.key-clue{position:relative;background:#e8eee1;border-left:3px solid #708c62;border-radius:4px;padding:10px!important}.clue-star{color:#7c652d;margin-right:6px}.general-evidence{margin-top:12px;font-size:13px}.general-evidence summary{cursor:pointer;min-height:36px;line-height:36px}.focus-reason{font-size:15px;line-height:1.8;margin-top:14px;padding:12px;background:#ecefdf;border-radius:5px}.full-lecture-review{margin:14px 0}.full-lecture-review>summary{min-height:44px;cursor:pointer;padding:12px;background:#ebeadd;border-radius:4px}.focus-review .comparison .fact-box{margin-top:0}.chart .key-evidence{margin-bottom:8px}.herb-drawer .art-pending{min-height:110px;height:110px;font-size:12px}