.adventure { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; overflow:hidden; color:#263b31; background:#f5f4ed; }
.adventure::backdrop { background:#f5f4ed; }
.adventure-toolbar { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; gap:20px; padding:18px 4%; border-bottom:1px solid #cdd4ca; background:#f5f4ede8; font-size:12px; }
.game-score { margin-left:auto; font-variant-numeric:tabular-nums; }
.adventure-toolbar button,.steering button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #b5c0b6; border-radius:50%; color:#263b31; background:#f5f4ed; font-size:24px; }
.adventure-canvas { display:block; position:absolute; top:78px; left:0; width:100%; height:calc(100% - 78px); touch-action:none; outline-offset:-4px; }
.game-message { position:absolute; z-index:2; left:50%; top:48%; transform:translate(-50%,-50%); width:min(440px,calc(100% - 48px)); text-align:center; padding:30px 18px; background:#f5f4edf5; }
.game-message h2 { font:italic 46px/1.05 Georgia,serif; margin:20px 0; }
.game-message p { line-height:1.5; font-size:14px; }
.game-message .game-best { color:#707570; font-size:11px; }
.start-game { border:0; border-bottom:1px solid #263b31; padding:15px 0 9px; margin:12px 0; background:none; color:#263b31; font-size:17px; }
.steering { position:absolute; bottom:24px; right:4%; display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(2,48px); gap:6px; z-index:2; }
.steer-up { grid-column:2; grid-row:1; }
.steer-left { grid-column:1; grid-row:2; }
.steer-down { grid-column:2; grid-row:2; }
.steer-right { grid-column:3; grid-row:2; }
.steering button { width:48px; height:48px; touch-action:none; }
.steering button:active { background:#dbe5dc; }
.paper-fold { position:absolute; inset:0; z-index:10; pointer-events:none; perspective:1100px; overflow:hidden; }
.paper-piece { position:absolute; inset:0; background:var(--paper); overflow:hidden; transform-origin:50% 50%; animation:fold-away 1.4s cubic-bezier(.5,0,.5,1) both; }
.fold-copy { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.piece-0 { clip-path:polygon(0 0,100% 0,50% 50%); --fold:rotateX(75deg); }
.piece-1 { clip-path:polygon(100% 0,100% 100%,50% 50%); --fold:rotateY(-75deg); animation-delay:50ms; }
.piece-2 { clip-path:polygon(0 100%,100% 100%,50% 50%); --fold:rotateX(-75deg); animation-delay:80ms; }
.piece-3 { clip-path:polygon(0 0,0 100%,50% 50%); --fold:rotateY(75deg); animation-delay:100ms; }
@keyframes fold-away { 0% { transform:none; } 45% { transform:var(--fold) scale(.6); } 78% { transform:var(--fold) scale(.08) rotate(-15deg); opacity:1; } 100% { transform:translate(-34vw,4vh) scale(.025) rotate(-25deg); opacity:0; } }
@media(max-width:600px){ .adventure-toolbar { gap:10px; padding:14px 16px; font-size:10px; } .adventure-name { max-width:100px; line-height:1.4; } .game-score { min-width:55px; } .adventure-toolbar button { width:34px;height:34px;flex-shrink:0; } .game-message h2 { font-size:38px; } }
@media(prefers-reduced-motion:reduce){ .paper-piece { animation:none; } }