:root { font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; color: #333464; background: #7779ba; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
button { font: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 8px #575797; }
#game-shell { position: fixed; inset: 0; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }
.hud { position: absolute; top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.cookie-count, .time-count, .sound-button { background: rgba(255, 251, 241, .9); box-shadow: 0 5px 0 rgba(67, 56, 107, .14), 0 9px 30px rgba(50, 45, 98, .12); border: 2px solid rgba(255,255,255,.7); border-radius: 19px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.cookie-count { gap: 9px; padding: 5px 15px; font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cookie-count span { color: #efb54f; font-size: 33px; line-height: 1; -webkit-text-stroke: 1px #b8763e; }
.cookie-count .cookie-goal { color: #766e91; font-size: 16px; -webkit-text-stroke: 0; white-space: nowrap; }
.time-count { padding: 5px 14px; color: #494077; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sound-button { pointer-events: auto; color: #454077; font-size: 15px; font-weight: 900; padding: 8px 15px; }
.sound-button[aria-pressed="true"] { background: #e4e1f0; }
.float-button { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 150px; height: 104px; border-radius: 30px; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1px; color: #4b4272; background: #ffe5a5; border: 3px solid #fff5d8; box-shadow: 0 8px 0 #d3a973, 0 14px 28px rgba(68, 54, 100, .18); font-size: 19px; font-weight: 900; touch-action: none; user-select: none; }
.float-arrow { font-size: 39px; line-height: 1; }
.float-button.is-held { transform: translateY(5px); box-shadow: 0 3px 0 #d3a973, 0 8px 20px rgba(68,54,100,.14); background: #ffdc86; }
.playing .float-button { display: flex; }
.title-screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 20px; background: rgba(88, 79, 155, .14); }
.title-screen[hidden] { display: none; }
.title-card { position: relative; width: min(480px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; text-align: center; border-radius: 37px; padding: clamp(22px, 5vh, 42px) 24px; color: #484375; background: #fff7e8; border: 5px solid #fffdf5; box-shadow: 0 14px 0 rgba(73, 63, 129, .22), 0 30px 75px rgba(55, 48, 107, .28); }
.title-star { position: absolute; right: 28px; top: 16px; font-size: 37px; color: #efbf66; }
.eyebrow { margin: 0 0 12px; color: #8c77a5; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: #494077; font-size: clamp(38px, 8vw, 58px); line-height: .96; letter-spacing: -.055em; }
h1 span { font-size: .67em; letter-spacing: -.045em; }
.finish-card h2 { max-width: 340px; margin: 0 auto; color: #494077; font-size: clamp(32px, 7vw, 47px); line-height: 1.05; letter-spacing: -.045em; }
.finish-time { margin: 23px 0 4px; font-size: clamp(19px, 4vw, 24px); font-weight: 800; }
.finish-time strong { display: block; margin-top: 3px; color: #9e647e; font-size: clamp(36px, 8vw, 54px); font-variant-numeric: tabular-nums; }
.finish-note { margin: 4px 0 25px; color: #776b8b; font-size: 15px; font-weight: 700; }
.instructions { margin: 22px 0 25px; font-size: clamp(17px, 4vw, 21px); font-weight: 700; line-height: 1.35; }
.play-button { min-width: 190px; min-height: 64px; border-radius: 22px; color: #4b3c68; background: #ffd98c; border: 3px solid #ffe9bc; box-shadow: 0 6px 0 #d6aa69; font-size: 27px; font-weight: 900; }
.play-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #d6aa69; }
.play-button span { color: #bf803f; font-size: 22px; }
body .ghs-open { left: max(16px, env(safe-area-inset-left)); top: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; min-width: 140px; height: 52px; padding: 7px 13px; border: 3px solid #fff5d8; border-radius: 18px; background: #ffe5a5; color: #4b4272; font: 900 16px ui-rounded, "Trebuchet MS", system-ui, sans-serif; box-shadow: 0 5px 0 #d3a973, 0 9px 25px rgba(68,54,100,.2); }
body .ghs-open:focus-visible, body .ghs-panel button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #575797; }
body .ghs-shade { background: rgba(64, 53, 108, .72); color: #484375; }
body .ghs-panel { border: 5px solid #fffdf5; border-radius: 30px; background: #fff7e8; box-shadow: 0 20px 65px rgba(55,48,107,.32); color: #484375; }
body .ghs-panel h2 { color: #494077; font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; }
body .ghs-panel p, body .ghs-panel table { color: #514970; }
body .ghs-panel form { background: #eee9f5; }
body .ghs-panel button { min-height: 44px; border-radius: 12px; background: #756aa4; color: #fffdf8; font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; }
@media (max-height: 500px) { .title-card { width: min(560px, 100%); padding: 15px 20px; border-radius: 25px; } .eyebrow { margin-bottom: 5px; } h1 { font-size: clamp(32px, 7vh, 46px); } .instructions { margin: 9px 0 12px; font-size: 16px; } .finish-time { margin: 8px 0 0; } .finish-time strong { font-size: 32px; } .finish-note { margin: 0 0 12px; } .play-button { min-height: 48px; font-size: 22px; } .float-button { width: 122px; height: 76px; border-radius: 23px; font-size: 16px; } .float-arrow { font-size: 27px; } }
@media (max-width: 450px) { .hud { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); gap: 5px; } .cookie-count, .time-count, .sound-button { min-height: 45px; border-radius: 16px; } .cookie-count { gap: 4px; padding: 5px 8px; font-size: 18px; } .cookie-count span { font-size: 24px; } .cookie-count .cookie-goal { font-size: 12px; } .time-count { padding: 5px 9px; font-size: 17px; } .sound-button { padding: 7px 9px; font-size: 12px; } .float-button { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 134px; height: 92px; } }