@import url('../naopoyo-chapter1/style.css');
:root{color:#eaf0d6;background:#1f382d}body{background:linear-gradient(#1c3625bf,#183729e8),url('../../assets/world/forest-v1.webp') center/cover}.brand span{color:#e6cb85}.brand small,.intro>div{color:#c6d6b0}canvas{outline:3px solid #b6c79c;box-shadow:0 5px 0 #152d23,0 14px 40px #10231c99;border-radius:12px}button{background:#ecf0d9;color:#304d3c;border-color:#a7b88c}#status{color:#e0eacb;font-size:12px}dialog{background:#f3f5e5;color:#314c3a;border-color:#b9c899}dialog .primary{background:#4e7052}.tag,dialog small{color:#697f59}.level.available{border-color:#73966d;background:#e4edce}.game-links a{color:#496e4c}.intro h1{font-size:18px}#clock{font-size:10px}#chapter{font-size:11px}
nav button{white-space:nowrap;padding:6px 3px;font-size:12px}nav button span{font-size:11px}
/* Keep intrinsic text widths from widening the board's grid track on Safari. */
main{grid-template-columns:minmax(0,1fr);padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
header,.intro,.arena,nav,.intro>div{min-width:0}.intro h1{max-width:100%;overflow:hidden;text-overflow:ellipsis}.intro>div{gap:5px;letter-spacing:0}#chapter{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#clock{flex-shrink:0;font-size:9px}nav{grid-template-columns:repeat(4,minmax(0,1fr))}nav button{min-width:0}dialog .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}dialog .level{min-width:0;overflow-wrap:anywhere}
@media(orientation:landscape) and (max-height:550px){main{grid-template-columns:minmax(150px,1fr) minmax(0,2fr)}.intro>div{flex-wrap:wrap}}
.status-line{min-width:0;display:flex;align-items:center;justify-content:center;text-align:center}
#split-preview-note{color:#d9f5f3;font-size:11px;line-height:1.25}
nav{grid-template-columns:repeat(5,minmax(0,1fr))}
dialog.example{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#203b2d;color:#f2f6e4;overflow:hidden}
.example::backdrop{background:#10251cdd}.example-shell{height:100%;box-sizing:border-box;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:5px}.example-head{display:flex;align-items:center;justify-content:space-between;gap:5px}.example-head strong{font-size:15px}.example-head button{font-size:11px;padding:6px}.example-count{text-align:center;font-size:13px;font-weight:bold}.example-arena{display:flex;justify-content:center;align-items:center;min-height:0}.example-arena canvas{display:block;width:min(100%,calc(100vh - 210px));height:auto;aspect-ratio:1}.example-info{text-align:center;font-size:12px;line-height:1.25;min-height:2.5em}.example-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.example-controls button{padding:8px 2px;font-size:12px;white-space:nowrap}.example-note{text-align:center;font-size:10px;line-height:1.2;color:#d2dfc3}
/* All five labels remain readable at the 320px QA width. */
@media(max-width:350px){nav button span{display:block;margin:0;font-size:11px}nav button{line-height:1.1;min-height:44px}}
/* Reuse the heading row: counting does not take space from the board. */
.intro .stage-heading{justify-content:flex-start;align-items:baseline;gap:10px;color:inherit;flex-wrap:nowrap}
.stage-heading #title{min-width:0;white-space:nowrap}
#moves{flex:0 0 auto;white-space:nowrap;font-size:13px;line-height:1.2;letter-spacing:0;color:#d2dfc3;font-variant-numeric:tabular-nums}