:root{font-family:'Malgun Gothic',system-ui,sans-serif;color:#342c35;background:#f6f1e9;font-synthesis:none;--brown:#79533d;--green:#38715b;--line:#e5d9cb}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 10% 0,#fff4d3,transparent 42%),radial-gradient(ellipse at 100% 25%,#e3efe5,transparent 44%),#f6f1e9}.app{width:min(1100px,100%);margin:auto;padding:24px 24px 32px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;font-weight:700;touch-action:manipulation}button:hover{filter:brightness(.97)}button:disabled{cursor:wait;opacity:.65}button:focus-visible,summary:focus-visible{outline:3px solid #529f78;outline-offset:3px}.primary{background:var(--brown);border-color:var(--brown);color:white}.big{padding:16px 48px;font-size:21px;border-radius:16px;box-shadow:0 4px 0 #5f3d2e}.text-button{background:none;border:0;color:var(--green);text-decoration:underline}.welcome{display:flex;align-items:center;justify-content:space-between;max-width:850px;margin:0 auto 18px;gap:25px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;color:#8c725b}h1{font-size:clamp(31px,5vw,48px);line-height:1.2;letter-spacing:-.055em;margin:12px 0}h1 span{font-size:.8em}.lead{font-size:15px;color:#796c71;line-height:1.7}#hero-preview{width:210px;height:210px;flex-shrink:0;filter:drop-shadow(0 8px 10px #44311d16)}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.setup-card{background:#fffcf7;border:1px solid var(--line);border-radius:20px;padding:20px}.setup-card h2{font-size:18px;margin:0 0 15px;display:flex;gap:9px;align-items:center}.step-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ede0cc;font-size:14px}.mode-options{display:flex;gap:10px}.mode-card{flex:1;min-width:0;text-align:left;padding:16px 12px;line-height:1.6}.mode-card strong{font-size:20px}.mode-card span,.mode-card small{display:block;font-weight:400;font-size:12px}.mode-card small{margin-top:9px;color:#8b7772;font-size:11px}.mode-card[aria-pressed=true]{background:#ecf4e8;border:2px solid #629778;padding:15px 11px}.companion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.companion-card{padding:6px 3px;border-radius:12px;text-align:center;font-size:11px;min-width:0}.companion-card img{width:100%;height:76px;object-fit:contain;display:block}.companion-card[aria-pressed=true]{background:#fbeedc;border:2px solid #bd8f58;padding:5px 2px}.subtle{font-size:12px;color:#85767c;margin:-6px 0 12px}.companion-message{font-size:12px;color:#6e5b60;line-height:1.5;min-height:20px;margin:10px 0 0}.journey{display:flex;justify-content:center;align-items:center;gap:14px;margin:20px 0;font-size:13px;color:#746458}.journey span{background:#fff9ed;padding:9px 14px;border-radius:20px;border:1px solid #eadfce}.journey i{font-style:normal;color:#a69683}.start-actions{text-align:center}.start-actions p{font-size:12px;color:#81716e}.menu-best{text-align:center;margin:18px auto;font-size:12px;color:#74646c;line-height:1.8}.sound-settings{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px 0}.sound-settings button{font-size:12px;padding:8px 11px}.sound-settings small{font-size:11px;color:#8b7c7c}.records,.instructions{background:#fffaf4;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;color:#74626a;font-size:12px;line-height:1.7}summary{cursor:pointer;font-weight:700}.records ol{padding-left:21px;font-size:12px;line-height:1.9}.records p,.instructions p{margin-bottom:0}footer{text-align:center;color:#978783;font-size:11px;margin-top:22px}.play-screen{background:#fffaf5;border:1px solid var(--line);border-radius:18px;overflow:hidden}.play-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px}.play-toolbar>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.play-toolbar strong{font-size:16px}.play-toolbar small{color:#8a7a7c;font-size:12px}.pill{padding:4px 8px;border-radius:20px;background:#e6efdc;color:#4e7659;font-size:11px;font-weight:800}.toolbar-buttons{display:flex;gap:5px}.toolbar-buttons button{font-size:12px;padding:7px 10px}.hud{display:flex;align-items:center;flex-wrap:wrap;gap:9px 20px;padding:0 14px 10px;color:#806871;font-size:12px}.hud strong{color:#4e3937;font-variant-numeric:tabular-nums}.lives{letter-spacing:2px;font-size:18px}.family-progress{display:flex;gap:7px;padding:0 14px 10px;flex-wrap:wrap}.family-chip{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px 3px 4px;border:1px solid #e3d7ca;background:#f1ebe5;border-radius:20px;color:#998a82}.family-chip img{width:24px;height:24px;object-fit:contain;filter:grayscale(.7);opacity:.7}.family-chip.visited{background:#e3f0df;border-color:#9bc595;color:#3b6b45}.family-chip.visited img{filter:none;opacity:1}.board-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:0 12px 12px}.canvas-wrap{grid-column:1/-1;position:relative;background:#080709;border-radius:10px;overflow:hidden;aspect-ratio:833/517;width:100%;line-height:0;isolation:isolate}#game{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}.touch-directions{display:flex;gap:7px;align-items:center;justify-content:flex-start;user-select:none;-webkit-user-select:none}.touch-directions button,.touch-action .jump{touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 3px 0 #d9c8b5;min-width:58px;height:58px;font-size:22px;padding:6px;background:#fff}.vertical{display:flex;flex-direction:column;gap:6px}.vertical button{height:38px}.touch-action{display:flex;align-items:center;justify-content:flex-end}.touch-action .jump{background:#dfeedd;border-color:#bed4b7;color:#3c6845;width:92px;height:72px;border-radius:50%;font-size:16px}.jump span{display:block;font-size:18px}.touch-directions button.pressed,.jump.pressed{transform:translateY(2px);box-shadow:0 1px 0 #d9c8b5;background:#f2e4d4}.skip-hug{position:absolute;bottom:8px;right:8px;line-height:1.2;padding:8px 10px;font-size:11px;background:#fff3e9ed;z-index:2}.hint-strip{display:flex;align-items:center;gap:8px;padding:0 14px 8px;min-height:42px}.hint-strip button{display:flex;gap:5px;align-items:center;padding:3px 7px;font-size:10px;flex-shrink:0;border-radius:20px}.hint-strip img{height:31px;width:27px;object-fit:contain}.hint-strip p{font-size:12px;margin:0;color:#766668}.orientation-hint{font-size:11px;text-align:center;color:#9a8174;margin:0 0 8px}.best-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:11px;color:#957b7b;padding:0 12px 10px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#211923bd;line-height:1.5;z-index:3;overflow:auto;padding:10px}.dialog{background:#fffaf3;border:1px solid #fff;border-radius:20px;text-align:center;padding:22px 26px;box-shadow:0 14px 40px #0005;max-width:min(440px,94%)}.dialog-icon{font-size:32px}.dialog h2{font-size:23px;line-height:1.3;margin:6px 0}.dialog p{color:#857176;font-size:13px;white-space:pre-line;margin:8px 0}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:13px}.dialog-actions button{font-size:13px}.overlay-stars{font-size:30px;color:#d89929;letter-spacing:5px;line-height:1.5}.play-screen.is-immersive,.play-screen:fullscreen{position:fixed;inset:0;z-index:100;background:#f6f0e6;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:100%;height:100dvh;display:flex;flex-direction:column}.is-immersive .play-toolbar,:fullscreen .play-toolbar{padding:5px 10px;flex-shrink:0}.is-immersive .hud,:fullscreen .hud{padding:0 10px 3px;gap:6px 14px}.is-immersive .family-progress,:fullscreen .family-progress{padding:0 10px 4px;gap:5px}.is-immersive .board-layout,:fullscreen .board-layout{flex:1;min-height:0;padding:0 6px 6px;gap:7px;align-items:center}.is-immersive .hint-strip,:fullscreen .hint-strip,.is-immersive .best-strip,:fullscreen .best-strip,.is-immersive .orientation-hint,:fullscreen .orientation-hint{display:none}.is-immersive .canvas-wrap,:fullscreen .canvas-wrap{max-height:100%;justify-self:center}.is-immersive .family-chip,:fullscreen .family-chip{font-size:10px;padding:1px 6px}.is-immersive .family-chip img,:fullscreen .family-chip img{width:18px;height:18px}
@media(max-width:650px){.app{padding:16px 10px 24px}.welcome{gap:10px}.welcome h1{font-size:32px}.lead{font-size:12px}#hero-preview{width:120px;height:160px}.eyebrow{font-size:10px;letter-spacing:.03em}.setup-grid{grid-template-columns:1fr;gap:12px}.setup-card{padding:16px}.journey{font-size:10px;gap:5px}.journey span{padding:6px 8px}.big{font-size:19px;padding:15px 42px}.play-toolbar{padding:8px;gap:5px}.play-toolbar>div:first-child{gap:5px}.play-toolbar strong{font-size:13px}.play-toolbar small{display:none}.toolbar-buttons{gap:3px}.toolbar-buttons button{font-size:10px;padding:7px}.hud{gap:5px 11px;padding:0 9px 6px;font-size:10px}.lives{font-size:15px;letter-spacing:0}.family-progress{padding:0 8px 7px;gap:4px}.family-chip{font-size:9px;padding:2px 5px 2px 2px}.family-chip img{width:20px;height:20px}.board-layout{padding:0 5px 10px;gap:11px 8px}.canvas-wrap{border-radius:5px}.touch-directions{gap:6px}.touch-directions button{min-width:55px;height:55px}.vertical button{height:37px}.touch-action .jump{width:85px;height:70px}.dialog{padding:14px 16px}.dialog h2{font-size:18px}.dialog p{font-size:11px}.dialog-icon{font-size:25px}.dialog-actions button{font-size:12px;padding:8px 11px}.overlay-stars{font-size:24px}.hint-strip{padding:0 8px 7px}.hint-strip p{font-size:11px}.sound-settings{margin:13px 0}.sound-settings small{width:100%;text-align:center}.records,.instructions{font-size:11px}.skip-hug{font-size:10px;bottom:5px;right:5px;padding:7px}}
@media(orientation:landscape) and (max-height:600px){body.in-game{overflow:hidden}.play-screen{position:fixed;inset:0;z-index:50;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);height:100dvh;background:#f6f0e6;display:flex;flex-direction:column}.play-toolbar{padding:4px 8px}.play-toolbar strong{font-size:13px}.play-toolbar small{font-size:10px}.toolbar-buttons button{padding:5px 8px;font-size:11px}.hud{padding:0 8px 2px;gap:6px 14px;font-size:11px}.lives{font-size:15px}.family-progress{padding:0 8px 3px;gap:5px}.family-chip{padding:0 5px;font-size:9px}.family-chip img{height:17px;width:17px}.board-layout,.is-immersive .board-layout,:fullscreen .board-layout{grid-template-columns:100px minmax(0,1fr)88px;grid-template-rows:1fr;flex:1;min-height:0;gap:6px;padding:0 4px 5px;align-items:center}.canvas-wrap,.is-immersive .canvas-wrap,:fullscreen .canvas-wrap{grid-column:2;grid-row:1;width:min(100%,calc((100dvh - 92px)*833/517));max-height:calc(100dvh - 92px);justify-self:center}.touch-directions{grid-column:1;grid-row:1;display:grid;grid-template-columns:44px 44px;gap:6px;align-self:end;margin-bottom:12px}.touch-directions button{min-width:44px;width:44px;height:48px;padding:3px;font-size:19px}.touch-directions>button:first-child{grid-column:1;grid-row:2}.touch-directions>button:last-child{grid-column:2;grid-row:2}.vertical{grid-column:1/-1;grid-row:1;display:flex;flex-direction:row;gap:6px}.vertical button{height:38px}.touch-action{grid-column:3;grid-row:1;align-self:end;margin-bottom:15px;justify-content:center}.touch-action .jump{width:76px;height:76px;min-width:0}.hint-strip,.orientation-hint,.best-strip{display:none}.dialog{padding:10px 18px}.dialog-icon{font-size:22px}.dialog h2{font-size:17px}.dialog p{font-size:11px;margin:4px 0}.overlay-stars{font-size:22px}.dialog-actions{margin-top:7px}.dialog-actions button{font-size:11px;padding:6px 10px}.skip-hug{font-size:9px;padding:5px;bottom:3px;right:3px}}

.play-toolbar>div:first-child{min-width:0;flex:1}.toolbar-buttons{flex-shrink:0}#play-mute{font-size:14px;min-width:30px;padding:5px}.play-toolbar strong{max-width:240px}@media(max-width:650px){.play-toolbar strong{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-toolbar>div:first-child{gap:3px}.pill{padding:3px 5px;font-size:9px}}
.celebration{display:block;width:min(340px,100%);height:110px;margin:0 auto}.overlay[data-phase=ending] .overlay-stars{font-size:22px;letter-spacing:2px}.overlay[data-phase=ending] .dialog-icon{display:none}@media(max-width:650px){.celebration{height:52px}.dialog{padding:11px 14px;max-height:100%;overflow:auto}.dialog p{font-size:11px;line-height:1.35}.overlay[data-phase=ending] .overlay-stars{font-size:17px;letter-spacing:1px}.dialog-actions{margin-top:7px}}@media(orientation:landscape) and (max-height:600px){.celebration{height:62px;width:230px}.overlay[data-phase=ending] .overlay-stars{font-size:17px;letter-spacing:1px}}
@media(max-width:650px){
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .dialog{padding:8px 12px}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .dialog-icon{display:none}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) h2{font-size:16px;margin:0 0 4px}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) p{font-size:10px;line-height:1.25;margin:4px 0}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .overlay-stars{font-size:15px;line-height:1.3;letter-spacing:1px}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .celebration{height:42px}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .dialog-actions{margin-top:4px}
 .overlay:is([data-phase=ending],[data-phase=stage-clear]) .dialog-actions button{font-size:11px;padding:6px 10px}
}
