/* v8 approved UI: styles scoped to game only. No simulation or canvas rendering changes. */
@font-face{font-family:OkDanDan;src:url('../assets/play-ui-v8/OkDanDan-Bold.ttf') format('truetype');font-display:swap}
#screen-game{font-family:OkDanDan,'Malgun Gothic',sans-serif;color:#684a2f;background:#c7d982 url('../assets/play-ui-v8/third-background.png') center/cover}
#screen-game button{font-family:inherit;color:#684a2f}
#screen-game .topbar{background:#e9f0bfeb;border-bottom:2px solid #b38a60;gap:9px;padding:4px 12px}
#screen-game .topbar .logo{display:block!important;min-width:0}
#screen-game .v8-title-logo{display:block;height:36px;max-width:min(33vw,230px);object-fit:contain;image-rendering:pixelated}
#screen-game .topbar .btn,#screen-game .map-controls .btn,#screen-game .time-bar button,#screen-game #btn-tiny-observe{background:transparent url('../assets/play-ui-v8/sprites/control-0.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;min-height:36px;padding:6px 10px;font-size:13px;white-space:nowrap}
#screen-game .topbar .btn:active,#screen-game .map-controls .btn:active,#screen-game .time-bar button.active{background-image:url('../assets/play-ui-v8/sprites/control-1.png')}
#screen-game .stage-chip,#screen-game .save-pill{background:transparent url('../assets/play-ui-v8/sprites/header-1.png') center/100% 100% no-repeat;border:0;border-radius:0;color:#684a2f;font-size:13px}
#screen-game .game-main{gap:10px;padding:9px;min-height:0}
#screen-game .canvas-wrap{border:3px solid #ad865b;border-radius:5px;box-shadow:inset 0 0 0 3px #f3d3a9;background:#e7bd8e;min-height:0}
#screen-game .time-bar{background:transparent;gap:5px}
#screen-game .time-bar .clock{background:transparent url('../assets/play-ui-v8/sprites/header-0.png') center/100% 100% no-repeat;border:0;border-radius:0;padding:8px 16px;font-size:15px}
#screen-game .map-controls{gap:5px;bottom:10px;left:10px}
#screen-game .side-panel{width:286px;max-width:45vw;background:#f8e7c8 url('../assets/play-ui-v8/sprites/panel-0.png') center/100% 100% no-repeat;border:0;border-radius:10px;padding:11px 10px;gap:8px;overflow:hidden}
#screen-game .v8-tool-area{display:flex;flex-direction:column;gap:7px;flex:none;min-width:0}
#screen-game .tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0;border:0;min-width:0}
#screen-game .tool-grid .tool-btn{background:transparent url('../assets/play-ui-v8/sprites/button-0.png') center/100% 100% no-repeat;border:0;border-radius:0;min-width:0;width:100%;height:57px;min-height:57px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;white-space:nowrap;overflow:visible}
#screen-game .tool-grid .tool-btn.active{background-image:url('../assets/play-ui-v8/sprites/button-1.png')}
#screen-game .v8-tool-icon{width:23px;height:23px;object-fit:contain;image-rendering:pixelated}
#screen-game .undo-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0;margin:0;border:0}
#screen-game .undo-row .btn{background:transparent url('../assets/play-ui-v8/sprites/control-0.png') center/100% 100% no-repeat;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:36px;font-size:15px;padding:5px 3px;white-space:nowrap}
#screen-game .undo-row .btn img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
#screen-game .undo-row .btn:disabled{background-image:url('../assets/play-ui-v8/sprites/control-3.png');opacity:.7}
#screen-game .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0;background:transparent}
#screen-game .tabs .tab{background:transparent url('../assets/play-ui-v8/sprites/tab-0.png') center/100% 100% no-repeat;border:0;border-radius:0;min-width:0;min-height:32px;font-size:13px}
#screen-game .tabs .tab.active{background-image:url('../assets/play-ui-v8/sprites/tab-1.png')}
#screen-game .tab-body{background:#fffaf0;border:2px solid #d9ba8d;border-radius:7px;padding:9px;min-height:0;overflow:auto}
#screen-game .tab-body button{font-family:inherit}
#screen-game .tab-body .card{font-size:16px}
#screen-game .bottombar{background:#f9eed8e8;border-top:2px solid #b48a5e;font-size:13px}
@media(max-width:850px){#screen-game .side-panel{width:240px;padding:8px 6px}#screen-game .game-main{gap:6px;padding:6px}#screen-game .tool-grid .tool-btn{font-size:10px}#screen-game .undo-row .btn{font-size:13px}#screen-game .topbar .btn{padding:5px 7px}}

/* v29.1 — consistent OkDanDan font throughout the game */
@font-face{font-family:'OkDanDanGlobal';src:url('../assets/play-ui-v8/OkDanDan-Bold.ttf') format('truetype');font-display:swap}
html,body,body *,button,input,select,textarea,option,dialog,
body *::before,body *::after{font-family:'OkDanDanGlobal','Malgun Gothic',sans-serif!important}
/* The toggle and view buttons must never occupy the same bottom-left slot. */
#screen-game .canvas-wrap .tiny-toggle{
 left:10px;bottom:68px;z-index:6;max-width:calc(100% - 20px);
 min-height:32px;font-size:12px;
}
#screen-game .canvas-wrap .map-controls{
 left:10px;bottom:10px;right:10px;z-index:5;
 display:flex;align-items:center;flex-wrap:nowrap;gap:5px;
 width:max-content;max-width:calc(100% - 20px);overflow-x:auto;
}
#screen-game .canvas-wrap .map-controls .btn{
 flex:0 0 auto;min-width:38px;min-height:36px;
 padding:6px 12px;font-size:13px;
}