:root { --ink:#1c2924; --cream:#f7f1e5; --sun:#d7a74d; --serif:"Iowan Old Style","Baskerville","Songti SC","STSong",serif; --sans:"Avenir Next","Helvetica Neue","PingFang SC",sans-serif; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#26362f; }
body { margin:0; color:var(--cream); font-family:var(--sans); }
button, a { color:inherit; font-family:inherit; }
.game-shell,.game-frame { width:100%; height:100%; }
.game-shell { position:relative; display:grid; place-items:center; background:#26362f; }
.game-frame { position:relative; isolation:isolate; overflow:hidden; background:#9eb8b2; }
.game-frame::after { position:absolute; inset:0; z-index:8; pointer-events:none; content:""; opacity:.17; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; outline:none; background:#26362f; cursor:pointer; touch-action:manipulation; }
canvas:focus-visible { box-shadow:inset 0 0 0 4px #f1c252; }
.game-hud { position:absolute; z-index:5; top:max(18px,env(safe-area-inset-top)); right:max(22px,env(safe-area-inset-right)); left:max(22px,env(safe-area-inset-left)); display:grid; grid-template-columns:1fr auto 1fr; align-items:start; pointer-events:none; }
.game-hud a,.game-hud button { pointer-events:auto; }
.back-link { display:inline-flex; gap:7px; align-items:center; justify-self:start; min-height:42px; padding:0 15px; border:1px solid #ffffff42; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; background:#20312b8c; backdrop-filter:blur(7px); }
.game-title { text-align:center; text-shadow:0 2px 10px #20312b70; }
.game-title>span { display:block; margin-bottom:2px; color:#f3cb6b; font-size:.5rem; font-weight:800; letter-spacing:.2em; }
h1 { margin:0; font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,2rem); font-style:italic; font-weight:400; letter-spacing:-.035em; }
.hud-actions { display:flex; gap:7px; justify-self:end; }
.hud-actions button { display:grid; place-items:center; align-content:center; width:52px; height:46px; padding:0; border:1px solid #ffffff42; border-radius:13px; background:#20312b8c; backdrop-filter:blur(7px); cursor:pointer; }
.hud-actions button span { font-size:1.05rem; line-height:1; }
.hud-actions button b { margin-top:3px; color:#d7dfd7; font-size:.48rem; letter-spacing:.08em; }
.hud-actions button[aria-pressed="false"] { opacity:.58; }
.hud-actions button[hidden] { display:none; }
.scorebar { position:absolute; z-index:4; top:max(82px,calc(env(safe-area-inset-top) + 70px)); left:max(24px,env(safe-area-inset-left)); display:flex; align-items:center; gap:14px; padding:10px 15px; border:1px solid #ffffff30; border-radius:14px; background:#20312b8c; backdrop-filter:blur(7px); box-shadow:0 8px 25px #12201933; }
.scorebar div { display:grid; min-width:42px; }
.scorebar span { color:#d5ddd6; font-size:.48rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.scorebar strong { color:#fff7e5; font:700 1.45rem/1 var(--serif); }
.scorebar i { width:1px; height:28px; background:#ffffff30; }
.game-overlay { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:84px 24px 28px; background:#20312b9c; backdrop-filter:blur(4px); text-align:center; }
.game-overlay[hidden] { display:none; }
.overlay-mark { display:grid; place-items:center; width:clamp(44px,6vw,64px); aspect-ratio:1; margin-bottom:12px; border:1px solid #f8f2e67a; border-radius:50%; color:#f1c252; font-size:clamp(1.25rem,2.6vw,1.8rem); transform:rotate(-8deg); }
.game-overlay p { margin:0 0 7px; font-family:var(--serif); font-size:clamp(2.2rem,6vw,4.8rem); letter-spacing:-.05em; line-height:.9; }
.game-overlay>span { color:#dce2d9; font-size:clamp(.72rem,1.3vw,.92rem); }
.game-overlay button { margin-top:19px; padding:12px 23px; color:#29362f; border:0; border-radius:11px; font-size:.78rem; font-weight:800; letter-spacing:.08em; background:var(--sun); box-shadow:0 9px 22px #111c1790,inset 0 1px #fff7; cursor:pointer; }
.game-overlay small { margin-top:13px; color:#d4dcd5; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.flap-button { position:absolute; z-index:3; right:max(24px,env(safe-area-inset-right)); bottom:max(22px,env(safe-area-inset-bottom)); display:grid; place-items:center; width:64px; height:64px; padding:0; color:#29362f; border:1px solid #ffe7a1; border-radius:50%; background:#e0b34ecc; box-shadow:0 9px 25px #20312b5c,inset 0 1px #fff8; backdrop-filter:blur(5px); cursor:pointer; }
.flap-button span { font-size:1.25rem; line-height:.8; }.flap-button b { font-size:.5rem; letter-spacing:.08em; }
.landscape-hint { display:none; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (orientation:portrait) and (max-width:760px) {
  .game-frame { height:min(100%,56.25vw); }
  canvas { object-fit:contain; }
  .game-hud { top:9px; right:10px; left:10px; grid-template-columns:auto 1fr auto; }
  .game-title { display:none; }.back-link { min-height:38px; padding:0 11px; }.back-link span { display:none; }
  .hud-actions { gap:5px; }.hud-actions button { width:42px; height:38px; border-radius:10px; }.hud-actions button b { display:none; }
  .scorebar { top:9px; left:58px; gap:8px; padding:6px 9px; }.scorebar div { min-width:30px; }.scorebar strong { font-size:1.05rem; }.scorebar i { height:22px; }
  .flap-button { right:12px; bottom:10px; width:52px; height:52px; }.game-overlay { padding-top:54px; }.game-overlay p { font-size:clamp(2rem,10vw,3rem); }
  .landscape-hint { position:fixed; z-index:12; right:50%; bottom:max(18px,env(safe-area-inset-bottom)); display:flex; gap:8px; align-items:center; padding:10px 14px; border:1px solid #ffffff35; border-radius:999px; font-size:.66rem; font-weight:700; background:#20312bd9; box-shadow:0 8px 24px #14221c5c; transform:translateX(50%); }
  .landscape-hint span { color:var(--sun); font-size:1rem; }
}
@media (orientation:landscape) and (max-height:540px) {
  .game-hud { top:max(8px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); left:max(10px,env(safe-area-inset-left)); }
  .back-link { min-height:38px; }.hud-actions button { width:44px; height:40px; }
  .scorebar { top:auto; bottom:max(10px,env(safe-area-inset-bottom)); left:max(10px,env(safe-area-inset-left)); padding:7px 10px; }
  .flap-button { right:max(12px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); width:54px; height:54px; }
  .game-overlay { padding-top:48px; }.game-overlay p { font-size:clamp(2.2rem,8vh,3.4rem); }.overlay-mark { width:42px; margin-bottom:8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }