button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.game-ui .pause { position:absolute;left:50%;top:14px;transform:translateX(-50%);pointer-events:auto;background:#24253cd9;color:#fff0c7;border:1px solid #e0c792;border-radius:8px;min-width:44px;min-height:44px;font-size:18px;cursor:pointer; }
.card { max-height:calc(100% - 24px); overflow:auto; overscroll-behavior:contain; }
.mobile { user-select:none;-webkit-user-select:none; }
.mobile .directions { display:flex;gap:12px; }
.mobile button.pressed { background:#b96b50;transform:translateY(3px);box-shadow:0 2px #101329; }
.touch-tip { display:none; }
.wrap:fullscreen { width:100vw;max-width:none;height:100dvh;padding:8px;display:flex;flex-direction:column;background:#171a38; }
.wrap:fullscreen .top,.wrap:fullscreen .intro,.wrap:fullscreen .foot { display:none; }
.wrap:fullscreen .frame { flex:1;min-height:0;aspect-ratio:auto; }
.wrap:fullscreen .bottom { flex:none;margin:8px 0 0; }
.wrap:fullscreen .mobile { display:flex;flex:1;justify-content:space-between; }
.wrap:fullscreen .help,.wrap:fullscreen .hint { display:none; }
@media (pointer:coarse), (max-width:900px) {
  html,body { width:100%;height:100%;overflow:hidden;overscroll-behavior:none; }
  .wrap { display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .top { flex:none;min-height:35px;margin:0 2px 8px;gap:10px; }
  .brand { gap:9px; }.brand span{font-size:9px;line-height:1.25;}.logo{width:27px;height:24px;border-width:3px;}.logo:after{left:5px;width:10px;height:10px;}
  .intro,.topright,.badge,.foot,.help,.hint { display:none; }
  .touch-tip { display:block;color:#bcc5d8;font-size:10px;max-width:160px;text-align:right; }
  .frame { flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;border-width:3px;box-shadow:0 0 0 2px #574d56; }
  .hud { padding:9px 8px;gap:48px;font-size:11px;line-height:1.4; }
  .hud>div { padding:6px 7px;max-width:46%;border-width:1px; }
  .hud-right { max-width:55%;font-size:10px; }
  .hud .count,#lives { font-size:14px;font-weight:bold;white-space:nowrap; }
  .game-ui .pause { top:9px;min-width:36px;min-height:38px;font-size:16px; }
  .bottom { flex:none;display:flex;flex-wrap:nowrap;gap:10px;height:96px;margin:10px 0 0;position:relative; }
  .mobile { display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;width:100%; }
  .mobile button { width:72px;height:72px;border:2px solid #8489a3;border-bottom:5px solid #151a32;border-radius:17px;font-size:28px;background:#353c5d;box-shadow:0 4px #101329;touch-action:none; }
  .mobile #jump { width:86px;height:80px;background:#b8664c;border-color:#f8b27b;color:#fff0c9;font-size:32px; }
  .mobile .jump-label { display:block;font-size:10px;letter-spacing:.8px; }
  .fullscreen { position:absolute;left:50%;top:27px;transform:translateX(-50%);font-size:0;width:40px;height:40px;padding:0;border-radius:9px; }
  .fullscreen:before { content:'⛶';font-size:24px; }
  .card { width:min(510px,92%);max-height:calc(100% - 18px);padding:20px 16px;border-width:4px;box-shadow:5px 5px #202139; }
  .card h2 { font-size:clamp(22px,6vw,30px);margin:12px 0; }.card p,.letter-open #message { font-size:16px;line-height:1.5; }.card .small{font-size:10px;letter-spacing:1px;}
  .btn,.letter-open .btn { font-size:14px;min-height:48px;padding:13px 18px; }
  .finale-controls button { min-height:44px;font-size:14px;background:#171a38eb; }
  .credits-roll { left:8%;width:84%;font-size:22px; }
}
@media (pointer:coarse) and (orientation:landscape), (max-width:900px) and (orientation:landscape) {
  .top { display:none; }.bottom{height:78px;margin-top:6px;}.mobile button{height:64px;width:76px;border-radius:14px;}.mobile #jump{height:68px;width:92px;}.fullscreen{top:18px;}
  .card { padding:12px 22px;max-width:540px; }.card h2{font-size:24px;margin:6px 0;}.card p{margin:6px 0 12px;}.hud{font-size:10px;}
}
.immersive .top { display:none; }
@media (max-width:360px) { .mobile button{width:62px;height:68px;}.mobile #jump{width:78px;}.mobile .directions{gap:8px;}.fullscreen{left:52%;width:34px;} }

canvas { touch-action:none; }
.overlay,.card { touch-action:pan-y; }