@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f5ed;--ink:#193b36;--muted:#718078;--yellow:#ffda44;--pink:#de728e;--green:#247e66}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}body{background-image:radial-gradient(#254f4210 .7px,transparent .7px);background-size:6px 6px}button,select,input{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #dd6c8a;outline-offset:4px}button{color:inherit}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.page{max-width:1240px;margin:auto;padding:0 48px}.header{height:99px;border-bottom:1px solid #193b361a;display:flex;align-items:center;justify-content:space-between}.brand{font-size:17px;letter-spacing:1px;font-weight:800;color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-card{width:17px;height:23px;background:var(--yellow);border:2px solid var(--ink);border-radius:3px;transform:rotate(-13deg);box-shadow:2px 2px 0 var(--ink)}.brand-period{font-size:9px;align-self:flex-start}.nav{display:flex;align-items:center;gap:24px}.text-button{font-size:12px;background:none;border:0;padding:8px 0;font-weight:600}.nav select{font-size:11px;font-weight:700;border:0;background:transparent;color:var(--ink);padding:7px 0}.sound-button{display:grid;place-items:center;width:36px;height:36px;border:1px solid #193b3633;border-radius:50%;background:transparent}.sound-button svg{width:19px;height:19px}.sound-button.muted{opacity:.5}.sound-button.muted .sound-waves{display:none}main{display:grid;grid-template-columns:1fr 430px;gap:65px;align-items:center;padding:43px 0 32px}.intro{padding-bottom:15px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:800;display:flex;align-items:center;gap:7px}.eyebrow>span:first-child:not(:last-child){width:6px;height:6px;border-radius:50%;background:var(--green)}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:104px;letter-spacing:-1px;line-height:.87;margin:32px 0 0;position:relative;font-weight:900}h1>span{font-size:94px;font-style:italic;letter-spacing:-2px;display:inline-block;position:relative;isolation:isolate}h1>span:before{content:'';position:absolute;inset:0 -9px -6px -7px;background:var(--yellow);transform:rotate(-2deg);z-index:-1}.title-card{position:absolute;width:37px;height:51px;border:3px solid var(--ink);border-radius:6px;transform:rotate(18deg);background:var(--yellow);left:270px;top:-1px;box-shadow:4px 4px 0 var(--ink)}.title-card:before,.title-card:after{content:'';position:absolute;background:var(--ink);height:3px;width:13px;top:-12px;right:-14px;transform:rotate(-20deg)}.title-card:after{top:3px;right:-22px;transform:rotate(10deg)}.handwritten{font-family:'Segoe Print','Comic Sans MS',cursive;font-style:italic;color:#b9506d;transform:rotate(-5deg);font-size:23px;margin:22px 0 27px 110px;white-space:nowrap}.description{font-size:17px;line-height:1.7;margin:24px 0;color:#5c716a}.rule-list{display:flex;flex-direction:column;gap:15px;font-size:13px;font-weight:600;margin-top:27px}.rule-list>div{display:flex;align-items:center;gap:14px}.rule-icon{display:inline-grid;place-items:center;width:24px;height:24px}.yellow-mini:before{content:'';width:13px;height:20px;border:1.8px solid var(--ink);border-radius:3px;background:var(--yellow);transform:rotate(-12deg)}.stop-icon{font-size:20px;filter:grayscale(.4)}.clock-icon{border:1.8px solid var(--ink);border-radius:50%;font-size:10px}.desktop-aside{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:22px 25px 0 0;transform:rotate(-5deg);font-family:'Segoe Print','Comic Sans MS',cursive;font-style:italic;font-size:14px;line-height:1.4;color:#76847c}.swoop{font-size:65px;line-height:1}.game-topline,.game-bottomline{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.1px;font-weight:700}.game-topline{margin:0 4px 11px}.game-topline>span:first-child{display:flex;align-items:center;gap:6px}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}.round-label{color:#879188}.game-shell{position:relative;border:2px solid var(--ink);border-radius:17px;overflow:hidden;background:#a5c8ab;box-shadow:6px 7px 0 #193b36;isolation:isolate;aspect-ratio:420/560;touch-action:none;user-select:none}.hud{position:absolute;z-index:2;top:0;left:0;right:0;background:#fbfaf2;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.score-stat{display:flex;gap:9px;align-items:center}.score-stat strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:36px;line-height:1}.stat-label{font-size:8px;font-weight:700;letter-spacing:1px;color:#738078}.tiny-card{width:13px;height:19px;background:var(--yellow);border:1.5px solid var(--ink);border-radius:2px;transform:rotate(-9deg)}.time-stat{display:flex;gap:10px;align-items:center}.time-stat strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;font-variant-numeric:tabular-nums;width:43px;text-align:right}.time-stat strong span{font-size:18px;color:#809187}.time-track{position:absolute;top:64px;z-index:3;width:100%;height:3px;background:#d8d9ca}.time-track div{height:100%;width:100%;background:var(--yellow);transition:background .2s}canvas#game{display:block;width:100%;height:100%;outline:none;touch-action:none}.canvas-bottom{position:absolute;bottom:0;left:0;right:0;height:31px;padding:0 15px;display:flex;justify-content:space-between;align-items:center;background:#124b3b36;color:#f9fff6;font-size:8px;letter-spacing:1.4px;font-weight:600;pointer-events:none}.canvas-bottom>span:last-child{letter-spacing:5px;opacity:.7}.game-bottomline{margin:19px 3px 0;color:#7c897f;font-size:8px;letter-spacing:1px}.game-bottomline b{color:var(--ink);font-size:12px;margin-left:6px}.game-bottomline>span:first-child{display:flex;gap:5px;align-items:center}.game-overlay{position:absolute;z-index:5;inset:0;display:flex;align-items:flex-end;padding:0 20px 44px;pointer-events:none}.overlay-panel{width:100%;text-align:center;pointer-events:auto}.overlay-kicker{font-size:7px;letter-spacing:1.1px;font-weight:700;color:#faffed}.overlay-panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:31px;margin:7px 0 5px;color:#fffdf1;line-height:1.1;font-weight:800}.overlay-panel p{font-size:10px;color:#e4eee3;margin:0 0 17px;line-height:1.6}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;background:var(--yellow);border:2px solid var(--ink);border-radius:8px;box-shadow:0 4px 0 var(--ink);font-size:12px;font-weight:800;letter-spacing:1px;transition:transform .1s,box-shadow .1s}.primary:hover{background:#ffe16d;transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.primary>span:last-child{font-size:21px;line-height:1}.play-note{display:block;margin-top:14px;font-size:6.8px;letter-spacing:1.1px;color:#dcebdc}.game-overlay.result,.game-overlay.paused{align-items:center;padding:30px 28px;background:#193b36dc;backdrop-filter:blur(5px)}.result .overlay-kicker{color:var(--yellow);font-size:9px}.result .overlay-panel h2{font-size:43px;margin:10px 0}.result .overlay-panel p{font-size:12px;margin:0 0 15px}.result-stats{display:flex;justify-content:center;gap:20px;color:white;margin:17px 0 23px}.result-stats strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:47px;color:var(--yellow);display:block;line-height:1.1}.result-stats span{display:block;font-size:8px;letter-spacing:1.3px;margin-top:3px}.secondary{width:100%;padding:14px;background:transparent;border:1px solid #d9e4d778;color:#f9fbef;border-radius:7px;font-size:10px;letter-spacing:1px;font-weight:700;margin-top:13px}.secondary:hover{background:#ffffff15}.secondary-actions{display:flex;justify-content:center;gap:25px;margin-top:17px}.secondary-actions button{font-size:9px;border:0;border-bottom:1px solid #edf2e54f;padding:4px 0;background:none;color:#edf2e5}.callout{position:absolute;top:34%;left:50%;transform:translateX(-50%) rotate(-3deg);background:#fffbe6;color:var(--ink);padding:12px 21px;border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);border-radius:7px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:30px;white-space:nowrap;z-index:4;pointer-events:none}.callout.freeze{background:var(--yellow);font-size:39px}.callout.go{background:#eaffcb}.combo{position:absolute;top:53%;left:50%;transform:translateX(-50%) rotate(-7deg);font-size:14px;font-weight:800;color:var(--yellow);text-shadow:1px 2px var(--ink);pointer-events:none;z-index:4}.countdown{position:absolute;inset:0;display:grid;place-items:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:105px;color:#fffce5;text-shadow:5px 5px var(--ink);background:#193b3622;z-index:6;pointer-events:none}.challenge-intro{margin:20px 0 0;background:#ffe99c;padding:12px 16px;border-left:3px solid var(--ink);font-size:13px;font-weight:700}footer{border-top:1px solid #193b361a;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;color:#8b958d;letter-spacing:.2px;padding:20px 0 23px}.footer-note{font-size:8px}dialog{border:2px solid var(--ink);border-radius:17px;background:var(--paper);color:var(--ink);padding:34px;width:min(440px,calc(100% - 32px));box-shadow:7px 8px 0 #163f3655}dialog::backdrop{background:#142d2a88;backdrop-filter:blur(6px)}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:39px;line-height:1.1;margin:17px 0 20px}dialog p{font-size:13px;line-height:1.7}.close-button{position:absolute;right:13px;top:8px;font-size:27px;background:none;border:0;line-height:1;padding:8px}dialog ol{padding-left:19px;font-size:13px;line-height:1.65}dialog li{padding-left:6px;margin-bottom:12px}.dialog-note{font-size:10px!important;color:#76877d;margin:18px 0}dialog label{display:block;font-size:10px;letter-spacing:.6px;font-weight:700;margin-bottom:8px}dialog input{width:100%;border:1px solid #b8c2b6;border-radius:5px;padding:12px;font-size:12px;margin-bottom:17px;background:#fffefa;color:var(--ink)}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:30;background:var(--ink);color:white;border-radius:9px;padding:12px 20px;font-size:12px;max-width:90%;text-align:center}.shake{animation:shake .32s}@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media(min-width:1400px){main{padding-top:65px;padding-bottom:45px;gap:105px;grid-template-columns:1fr 450px}.page{max-width:1270px}h1{font-size:117px}h1>span{font-size:105px}}
@media(max-width:1000px){.page{padding:0 30px}main{gap:35px;grid-template-columns:1fr 380px}h1{font-size:82px}h1>span{font-size:73px}.title-card{left:219px;width:31px;height:42px}.handwritten{margin-left:55px;font-size:21px}.description{font-size:15px}.eyebrow{font-size:7px;letter-spacing:1px}.rule-list{font-size:12px}.game-column .stat-label{font-size:7px}}
@media(max-width:760px){.page{padding:0 18px;max-width:500px}.header{height:62px}.brand{font-size:12px;gap:8px}.brand-card{width:13px;height:18px}.nav{gap:14px}.text-button{font-size:10px}.sound-button{width:29px;height:29px}.sound-button svg{width:16px}.nav select{font-size:10px}main{display:flex;flex-direction:column;gap:20px;padding:21px 0 0;align-items:stretch}.intro{padding:0}.intro .eyebrow,.description,.rule-list,.desktop-aside,.title-card{display:none}h1{font-size:46px;line-height:1;margin:0;display:flex;gap:8px;justify-content:center;white-space:nowrap;letter-spacing:-.5px}h1 br{display:none}h1>span{font-size:46px;letter-spacing:-1px}h1>span:before{inset:2px -4px -2px}.handwritten{font-size:16px;text-align:right;margin:9px 15px 0;transform:rotate(-4deg)}.game-column{width:100%;max-width:420px;align-self:center}.game-topline{font-size:8px;letter-spacing:.8px;margin-bottom:8px}.game-shell{border-radius:13px;box-shadow:4px 5px 0 var(--ink)}.hud{height:57px;padding:0 15px}.time-track{top:57px}.game-bottomline{margin-top:15px;font-size:7px}.game-bottomline b{font-size:11px}footer{margin-top:20px;padding:15px 0 18px;font-size:7px;gap:10px;letter-spacing:0}.footer-note{font-size:7px}.challenge-intro{font-size:11px;margin:14px 0 0}.overlay-panel h2{font-size:29px}.overlay-kicker{font-size:6.5px}.game-overlay{padding:0 17px 40px}.result .overlay-panel h2{font-size:38px}.game-overlay.result{padding:25px}.result-stats strong{font-size:43px}.callout{font-size:27px}.callout.freeze{font-size:34px}.primary{padding:14px 17px;font-size:11px}.secondary{padding:12px}.play-note{font-size:6px}}
@media(max-width:760px) and (max-height:760px){.header{height:52px}main{padding-top:14px;gap:14px}h1,h1>span{font-size:40px}.handwritten{font-size:13px;margin-top:7px}.game-column{max-width:min(100%,calc((100svh - 206px)*.75))}.game-topline{font-size:6px}.game-bottomline{font-size:6px;margin-top:13px}.hud{height:49px}.time-track{top:49px}.score-stat strong{font-size:30px}.score-stat .stat-label{display:none}.time-stat strong{font-size:23px}.overlay-panel h2{font-size:25px}.overlay-panel p{font-size:9px;margin-bottom:12px}.overlay-kicker{display:none}.primary{padding:11px 15px;font-size:10px}.play-note{font-size:5px}.canvas-bottom{height:25px;font-size:6px}.game-overlay{padding-bottom:33px}.result-stats{margin:10px 0 15px;gap:14px}.result-stats strong{font-size:34px}.result .overlay-panel h2{font-size:31px}.result .overlay-panel p{font-size:10px}.secondary{font-size:8px;padding:10px;margin-top:10px}.secondary-actions{gap:15px;margin-top:12px}.secondary-actions button{font-size:8px}.result-stats span{font-size:6px}footer{margin-top:15px;padding:11px 0}.callout{font-size:24px;padding:9px 15px}.callout.freeze{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.game-overlay.ready .overlay-kicker{display:none}

.audio-previews{display:flex;flex-wrap:wrap;gap:7px}.audio-previews button{padding:8px 10px;font-size:10px;font-weight:600;background:#ffdf7b;border:1px solid #193b3655;border-radius:6px}.audio-credit{font-size:9px;margin:11px 0 20px;color:#718078}.audio-credit a{color:inherit;text-underline-offset:3px}dialog{max-height:calc(100svh - 32px);overflow:auto}

.audio-status{display:block;font-size:9px;color:#247e66;min-height:14px;margin-top:7px}

.round-label[data-stage="0"]{color:#718078}.round-label[data-stage="1"]{color:#347f65}.round-label[data-stage="2"]{color:#a26b17}.round-label[data-stage="3"]{color:#bd456b;font-weight:800;letter-spacing:1.2px}.round-label[data-stage="3"]:before{content:'● ';font-size:7px}.combo.penalty{color:#fff8dd;background:#a5384f;border:2px solid #193b36;border-radius:7px;padding:9px 12px;text-shadow:none;white-space:nowrap;font-size:11px;top:57%;transform:translateX(-50%) rotate(-3deg)}

/* Post-round sharing: a photo first, then a compact set of explicit actions. */
#shareDialog{width:min(500px,calc(100% - 28px));padding:30px 22px 20px;background:#193b36;color:#f7f5ed;border-color:#c7d2c555;box-shadow:7px 8px 0 #163f3655}
#shareDialog .close-button{color:#f7f5ed}#shareDialog .share-heading{display:flex;gap:16px;align-items:center;padding-right:14px;margin:12px 0 22px}#shareDialog .share-heading img{width:76px;height:95px;object-fit:cover;border-radius:5px;border:1px solid #f7f5ed55;flex:none}#shareDialog .eyebrow{font-size:8px;color:#e6bc65;letter-spacing:1.2px}#shareDialog h2{font-size:31px;margin:8px 0;line-height:1.04}#shareDialog p{margin:0;font-size:11px;color:#d3ded8;line-height:1.5}
.share-photo{width:100%;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#e66b90;border:1px solid #ef91ac;border-radius:8px;padding:15px 12px;color:#26131c;text-align:center}.share-photo strong{font-size:20px;font-weight:800}.share-photo span{font-size:11px;line-height:1.5}.share-photo:hover{background:#ed81a1}.share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.share-grid a,.share-grid button{display:flex;align-items:center;justify-content:center;min-height:58px;background:#ffffff04;border:1px solid #9db8ac66;border-radius:6px;padding:12px 10px;font-size:12px;font-weight:500;color:#f7f5ed;text-align:center;text-decoration:none;line-height:1.5}.share-grid a:hover,.share-grid button:hover{background:#ffffff12;border-color:#de728e}.share-grid a:focus-visible,.share-grid button:focus-visible,.share-photo:focus-visible{outline:3px solid #ffda44;outline-offset:2px}
#shareDialog .share-help{margin-top:14px;font-size:10px;color:#c0d0c7}#shareDialog details{margin-top:15px;font-size:11px;color:#e2eae5}#shareDialog summary{cursor:pointer;padding:6px 0}#shareDialog textarea{width:100%;resize:vertical;min-height:90px;border:1px solid #9db8ac66;border-radius:5px;background:#102e28;color:#f7f5ed;font:11px/1.5 'DM Sans',Arial,sans-serif;padding:10px;margin-top:8px;user-select:text}#shareDialog .dialog-note{margin:12px 0 0;color:#aec3b6;font-size:9px!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:400px){#shareDialog{padding:25px 16px 16px}#shareDialog .share-heading{gap:12px;margin-bottom:16px}#shareDialog h2{font-size:28px}.share-photo strong{font-size:18px}.share-photo span{font-size:10px}.share-grid a,.share-grid button{font-size:11px;min-height:56px;padding:10px 7px}}