:root{--navy:#102b50;--purple:#7656dc;--gold:#ffd768;--cream:#fff9e9;--clay:#b95f3c;--panel:rgba(255,252,239,.97)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#79cde8;color:var(--navy);font-family:"Trebuchet MS",Arial,sans-serif}
button,a{font:inherit}button{touch-action:manipulation}
#game-shell{position:relative;width:100%;height:100%;min-height:520px;overflow:hidden;isolation:isolate;background:linear-gradient(#75cce8,#e9f4b5)}
#game-canvas,#game-canvas canvas{display:block;width:100%;height:100%}
.hud{position:absolute;z-index:20;inset:0 0 auto;min-height:82px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:20px;color:white;background:linear-gradient(180deg,rgba(10,39,74,.94),rgba(10,39,74,.46),transparent);pointer-events:none}
.brand{display:flex;pointer-events:auto;text-decoration:none;color:inherit;cursor:pointer;align-items:center;gap:8px;font-size:20px;text-shadow:0 2px 5px #17345a}.brand-mark{color:var(--gold);filter:drop-shadow(0 0 7px var(--gold))}.brand em{font-style:normal;font-size:11px;letter-spacing:.08em;background:var(--purple);padding:5px 9px;border-radius:999px}
.progress-wrap{display:grid;justify-items:center;gap:6px;font-weight:900;font-size:13px;text-shadow:0 2px 4px #17345a}.day-progress{display:flex;gap:7px;pointer-events:auto}.day-dot{width:31px;height:31px;padding:0;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:#294a78;color:white;font-weight:1000;cursor:pointer;transition:.22s}.day-dot.ready{background:var(--gold);color:#493414;box-shadow:0 0 18px var(--gold);animation:dotPulse 1.4s infinite}.day-dot.done{background:#6aaa58}.day-dot.locked{opacity:.58;cursor:not-allowed}.day-dot:hover:not(.locked),.day-dot:focus-visible:not(.locked){transform:scale(1.16)}
.tools{display:flex;gap:8px;pointer-events:auto}.round-button{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(255,255,255,.17);color:white;font-size:20px;font-weight:900;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:.18s}.round-button:hover,.round-button:focus-visible{background:var(--purple);transform:translateY(-2px) scale(1.05)}.round-button:active{transform:scale(.9)}
.screen{position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:90px 20px 96px;background:radial-gradient(circle at 50% 35%,rgba(255,226,112,.3),transparent 30%),linear-gradient(155deg,rgba(12,43,80,.94),rgba(70,56,123,.9));opacity:0;visibility:hidden;transition:.4s}.screen.open{opacity:1;visibility:visible}
.start-card{position:relative;width:min(660px,94vw);padding:30px 48px 26px;text-align:center;border:3px solid #f4d38b;border-radius:34px;background:linear-gradient(145deg,#fffdf4,#fff0c9);box-shadow:0 28px 75px rgba(0,0,0,.38),inset 0 0 35px white;overflow:hidden}.start-card:before{content:"";position:absolute;inset:8px;border:1px dashed rgba(159,88,47,.36);border-radius:26px;pointer-events:none}.eyebrow{margin:0 0 6px;color:#a05335;font-size:11px;font-weight:1000;letter-spacing:.14em}.start-card h1,.start-card h2{position:relative;margin:0;font:900 clamp(40px,7vw,70px)/.94 Georgia,serif;color:#15345e;text-shadow:0 3px white}.start-card h1 span{font-size:.47em;color:#a75537}.start-card>p:not(.eyebrow):not(.passage){max-width:520px;margin:10px auto;font-size:18px;font-weight:800;line-height:1.4}.passage{margin:8px 0 14px;color:var(--purple);font-weight:1000}.start-card small{display:block;margin-top:14px;color:#5b6b7d;font-weight:900}.baby-badge{position:relative;height:92px;display:grid;place-items:center}.baby-badge span{position:relative;z-index:1;font-size:74px;animation:babyBob 1.8s ease-in-out infinite}.baby-badge i{position:absolute;width:120px;height:70px;border-radius:50%;background:#ffe170;filter:blur(22px);animation:glow 1.8s ease-in-out infinite}
.big-button{position:relative;min-height:60px;padding:0 26px;border:0;border-radius:19px;background:linear-gradient(135deg,#8a68eb,#6948c9);color:white;font-size:18px;font-weight:1000;letter-spacing:.03em;cursor:pointer;box-shadow:0 8px 0 #47308d,0 14px 27px rgba(53,35,105,.28);transition:.17s}.big-button b{display:inline-grid;place-items:center;margin-left:12px;width:31px;height:31px;border-radius:50%;background:rgba(255,255,255,.2)}.big-button:hover,.big-button:focus-visible{transform:translateY(-3px) scale(1.035);filter:brightness(1.07)}.big-button:active{transform:translateY(5px) scale(.97);box-shadow:0 3px 0 #47308d}.big-button:disabled{filter:grayscale(.6);opacity:.56;cursor:not-allowed;transform:none}.big-button.small{min-height:50px;font-size:15px}
.instruction{position:absolute;z-index:18;left:50%;bottom:86px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:10px 17px;border:2px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(16,43,80,.92);color:white;font-size:14px;box-shadow:0 9px 25px rgba(0,0,0,.25);animation:instructionFloat 1.6s ease-in-out infinite}.instruction span{font-size:22px}.instruction[hidden]{display:none}
.video-screen{position:absolute;z-index:70;inset:0;padding:18px;display:grid;place-items:center;background:rgba(5,21,42,.9);backdrop-filter:blur(9px)}.video-screen[hidden]{display:none}.video-card{width:min(1000px,98vw);max-height:96vh;padding:18px;border:3px solid #f0cf85;border-radius:27px;background:var(--panel);box-shadow:0 30px 100px rgba(0,0,0,.55);overflow:auto}.video-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:2px 4px 12px}.video-card h2{margin:0;font:900 clamp(27px,4vw,42px) Georgia,serif}.video-card header p:last-child{margin:4px 0 0;color:var(--purple);font-weight:900}.close-button{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:#eadffb;color:#3b297c;font-size:30px;line-height:1;cursor:pointer}.video-frame{position:relative;overflow:hidden;border:4px solid #18345f;border-radius:18px;background:#020712;aspect-ratio:720/404}.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#020712}.video-play-cover{position:absolute;inset:0;width:100%;border:0;background:rgba(4,18,38,.7);color:white;font-size:20px;font-weight:1000;cursor:pointer}.video-play-cover span{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 12px;border-radius:50%;background:var(--purple);font-size:33px;box-shadow:0 0 0 10px rgba(255,255,255,.17)}.video-card>footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 4px 1px}.video-card footer p{margin:0;font-weight:800;color:#52647a}
.finish-card blockquote{margin:17px 0;padding:14px;border-radius:16px;background:#17345f;color:white;font:700 18px/1.45 Georgia,serif}.finish-card cite{display:block;margin-top:6px;color:#ffe17b;font:900 12px "Trebuchet MS",sans-serif}.celebration{font-size:42px;letter-spacing:7px;margin:12px;color:#d99921;animation:glow 1.5s infinite}
.hashchurch{position:absolute;z-index:20;left:50%;bottom:10px;transform:translateX(-50%);width:min(710px,calc(100% - 28px));height:62px;padding:9px 15px;display:flex;align-items:center;gap:12px;border:2px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(255,252,240,.96);color:#15345e;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.24);transition:.2s}.hashchurch:hover,.hashchurch:focus-visible{transform:translateX(-50%) translateY(-3px);background:white}.hashchurch>span:first-child{display:grid;place-items:center;width:41px;height:41px;border-radius:12px;background:var(--purple);color:white;font-size:22px}.hashchurch span:nth-child(2){display:flex;flex-direction:column;line-height:1.05}.hashchurch small{color:#a05335;font-size:9px;font-weight:1000;letter-spacing:.1em}.hashchurch strong{margin-top:5px;font-size:14px}.hashchurch>b{margin-left:auto;padding:8px 12px;border-radius:999px;background:var(--purple);color:white;font-size:12px}
@keyframes dotPulse{50%{transform:scale(1.18);box-shadow:0 0 27px #fff0a6}}@keyframes instructionFloat{50%{transform:translate(-50%,-7px)}}@keyframes babyBob{50%{transform:translateY(-6px) rotate(3deg)}}@keyframes glow{50%{transform:scale(1.13);opacity:.75}}
@media(max-width:760px){.brand em{display:none}.hud{align-items:flex-start;min-height:110px}.progress-wrap{position:absolute;top:62px;left:50%;transform:translateX(-50%);white-space:nowrap}.day-progress{gap:4px}.day-dot{width:28px;height:28px}.start-card{padding:27px 20px}.video-card{padding:10px}.video-card>footer{align-items:stretch;flex-direction:column}.video-card footer p{text-align:center}.instruction{bottom:77px;max-width:calc(100% - 24px);white-space:nowrap}.hashchurch{height:55px}.hashchurch>b{display:none}}
@media(max-height:670px){.hashchurch{display:none}.instruction{bottom:12px}.start-card{transform:scale(.85)}.screen{padding:58px 10px 10px}.video-card{max-height:98vh}.video-card>header{padding-bottom:7px}.video-card>footer{padding-top:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}