/* Phone-first polish: clear setup, lively feedback, predictable touch targets. */
html{overflow-x:clip}body{overflow-x:clip}button{touch-action:manipulation}header{gap:20px}.header-tools{display:flex;align-items:center;gap:13px}.sound-toggle{display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:44px;background:transparent;border:1px solid var(--line);border-radius:30px}.sound-toggle svg{width:18px;height:18px;stroke-width:1.8}.sound-toggle span{font-size:8px;font-weight:800;letter-spacing:.06em}.sound-toggle.muted{opacity:.6}.help-button{border:1px solid var(--ink);border-radius:50%;min-height:44px;width:44px;background:transparent;font-size:20px}.home-layout{align-items:center;gap:70px;min-height:calc(100svh - 183px)}.brand-panel h1{font-size:clamp(68px,7.7vw,105px)}.brand-panel .intro{max-width:390px}.learn-button{display:flex;gap:24px;justify-content:space-between;align-items:center;background:transparent;border-bottom:1px solid var(--ink);padding:14px 0;font-size:10px;font-weight:800;letter-spacing:.04em;min-height:46px;width:260px;margin-top:13px}.learn-button span{font-size:24px}.mascots{width:300px;height:155px;position:relative;margin:28px 0 15px}.mascot{position:absolute;display:grid;place-items:center;width:115px;height:115px;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);animation:mascot-float 4s ease-in-out infinite}.mascot-check{left:17px;top:6px;background:var(--lime);border-radius:50%;--tilt:-11deg}.mascot-x{right:18px;top:27px;background:#ff8c4c;border-radius:25px;--tilt:11deg;animation-delay:-2s}.mascot>svg{height:69px;width:69px;fill:none;stroke:var(--ink);stroke-width:3}.mascot-eyes{display:flex;position:absolute;top:26px;gap:8px;left:43px;transform:rotate(10deg)}.mascot-eyes i{background:var(--ink);width:5px;height:7px;border-radius:50%;animation:blink 5s infinite}.mascot-x .mascot-eyes{top:23px;left:49px;transform:rotate(-10deg)}.mascot-spark{position:absolute;font-size:30px;color:var(--purple);animation:sparkle 3s ease-in-out infinite}.spark-one{left:0;bottom:0}.spark-two{right:0;top:0;animation-delay:-1.5s}.setup-panel{width:100%;min-width:0;min-height:430px;align-self:center;animation:card-in .28s ease-out both}.panel-title h2{font-size:54px;line-height:.96;margin:13px 0 14px}.panel-title>p:last-child{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:27px 0 24px}.count-tile{background:var(--paper);border:1px solid var(--ink);border-radius:12px;min-height:93px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .15s,background .15s}.count-tile:hover,.count-tile.selected{background:var(--lime);transform:translateY(-3px);box-shadow:2px 3px 0 var(--ink)}.count-tile strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:44px;line-height:1}.count-tile span{font-size:7px;font-weight:800;letter-spacing:.1em;margin-top:8px}.count-art{display:grid;place-items:center}.count-art svg{height:50px;width:50px;fill:none;stroke:var(--purple);stroke-width:3;transform:rotate(-10deg);animation:sparkle 3s ease-in-out infinite}.setup-names{margin-top:25px}.setup-next{margin-top:22px}.name-row{min-height:54px}.name-row input{min-height:36px;font-size:16px}.subtle-button{min-height:44px;padding:10px;font-size:11px}.text-link{min-height:44px}.pack-options{gap:10px}.pack-option strong{font-size:clamp(19px,2.2vw,26px)}.pack-option small{font-size:7px}.rounds-row{gap:18px}.rounds-row select{min-height:46px}.back-link{min-height:44px}.score-strip{max-width:100%}.score-chip{max-width:100%;min-width:0}.score-chip>span:not(.avatar){max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pass-orbit svg{width:38px;height:38px;stroke:currentColor;stroke-width:1.5;fill:none;transform:rotate(-30deg)}.pass-orbit{display:grid;place-items:center;animation:pass-bob 2.5s ease-in-out infinite}.pass-card,.play-card,.word-card,.final-card{animation:card-in .3s ease-out both}.difficulty:hover{transform:translateY(-4px)}.difficulty{transition:transform .15s}.big-word{animation:word-in .4s cubic-bezier(.15,.8,.3,1.2) both}.decision-illustration span{animation:mascot-float 4s ease-in-out infinite;--tilt:-9deg}.decision-illustration span:last-child{--tilt:9deg;animation-delay:-2s}.challenger.chosen .checkbox{animation:pop-in .2s ease-out}.result-card,.final-card{position:relative;overflow:hidden}.result-stamp{animation:stamp-in .45s cubic-bezier(.18,.8,.32,1.3) both}.burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}.burst i{position:absolute;left:50%;top:70px;width:7px;height:11px;background:var(--color);border-radius:2px;transform-origin:0 0;animation:confetti-burst 1.2s ease-out both;animation-delay:calc(var(--i)*.015s)}.score-num,.score-chip b{font-variant-numeric:tabular-nums}.tutorial-modal{max-width:470px;padding:32px;overflow:auto}.tutorial-progress{display:flex;gap:5px;margin:0 38px 21px 0}.tutorial-progress i{height:4px;flex:1;border-radius:2px;background:#ddd4e7}.tutorial-progress i.filled{background:var(--purple)}.tutorial-modal>.eyebrow{font-size:9px}.tutorial-modal>h2{font-size:43px;line-height:.98;margin:18px 0 15px}.tutorial-art{min-height:160px;display:flex;flex-direction:column;justify-content:center;margin:20px 0 10px}.tutorial-art .mascots{margin:0 auto;transform:scale(.95);transform-origin:center}.tutorial-modal p.tutorial-copy{font-size:13px;line-height:1.7;color:#5c5065;margin-bottom:24px}.tutorial-nav{display:flex;gap:10px}.tutorial-back{min-width:48px;border:1px solid var(--ink);border-radius:9px;background:transparent;font-size:27px}.tutorial-modal .subtle-button{margin-top:10px}.tutorial-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tutorial-choices button{background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;padding:21px 12px;font-weight:800;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:10px}.tutorial-choices button:last-child{background:var(--purple);color:white}.tutorial-choices button.picked{box-shadow:4px 4px 0 var(--ink);transform:translateY(-4px);background:var(--lime);color:var(--ink)}.tutorial-choices b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px}.tutorial-hint{font-size:10px;line-height:1.6;text-align:center;margin:18px 0 0;color:#75677c}.tutorial-word{background:var(--purple);color:white;padding:20px;border:1.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg)}.tutorial-word>span{font-size:8px;letter-spacing:.1em;display:block;text-align:center}.tutorial-word strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:46px;display:block;text-align:center;margin:15px 0}.tutorial-word>div{display:flex;align-items:center;justify-content:center;gap:8px}.tutorial-word svg{width:16px;height:16px;stroke:var(--lime);stroke-width:2.5;fill:none}.tutorial-word small{font-size:9px}.tutorial-word i{font-family:Georgia,serif;margin:0 4px;font-size:12px}.tutorial-score{position:relative;background:var(--lime);border:1.5px solid var(--ink);width:130px;height:130px;border-radius:50%;margin:auto;text-align:center;box-shadow:4px 4px 0 var(--ink);animation:mascot-float 4s ease-in-out infinite;--tilt:-7deg}.tutorial-score strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:70px;display:block;line-height:1;margin-top:18px}.tutorial-score span{font-size:8px;font-weight:800;letter-spacing:.08em}.tutorial-score svg{position:absolute;right:-16px;top:-4px;width:37px;height:37px;fill:none;stroke:var(--purple);stroke-width:3}.close-modal{height:38px;width:38px}.modal>p{overflow-wrap:anywhere}.primary,.lime-button,.dark-button,.outline-light{line-height:1.4;min-width:0}.primary svg{flex-shrink:0}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-9px) rotate(calc(var(--tilt,0deg) + 5deg))}}@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}@keyframes sparkle{0%,100%{transform:scale(.85) rotate(-10deg)}50%{transform:scale(1.1) rotate(10deg)}}@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes word-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes pop-in{from{transform:scale(.5)}to{transform:scale(1)}}@keyframes stamp-in{from{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(-8deg);opacity:1}}@keyframes pass-bob{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-6px) rotate(0)}}@keyframes confetti-burst{0%{opacity:1;transform:rotate(calc(var(--i)*25.7deg)) translateY(0)}85%{opacity:.8}100%{opacity:0;transform:rotate(calc(var(--i)*25.7deg + 100deg)) translateY(220px)}}
@media(max-width:700px){header{height:87px;padding:16px max(18px,env(safe-area-inset-left));gap:8px}.header-tools{gap:8px}.sound-toggle{padding:9px;min-width:44px;justify-content:center}.sound-toggle span{display:none}.help-button{width:44px;height:44px;font-size:19px}.brand{flex-shrink:0}.home-layout{display:flex;flex-direction:column;gap:23px;min-height:0;padding:25px max(18px,env(safe-area-inset-left)) 30px}.brand-panel{width:100%;padding-right:100px;min-height:144px}.brand-panel h1{font-size:45px;line-height:.94;margin:14px 0 12px;max-width:250px}.brand-panel h1 span{display:inline}.brand-panel .intro{font-size:11px;line-height:1.6;width:calc(100% + 100px);max-width:none}.brand-panel .intro br{display:none}.brand-panel>.eyebrow{font-size:7px;letter-spacing:.12em;white-space:nowrap}.brand-panel>.mascots{position:absolute;right:-5px;top:9px;width:112px;height:126px;margin:0}.brand-panel .mascot{width:63px;height:63px;border-width:1.5px;box-shadow:2px 3px 0 var(--ink)}.brand-panel .mascot-check{left:0;top:15px}.brand-panel .mascot-x{right:0;top:63px;border-radius:15px}.brand-panel .mascot>svg{width:37px;height:37px}.brand-panel .mascot-eyes{top:14px;left:25px;gap:4px}.brand-panel .mascot-eyes i{height:4px;width:3px}.brand-panel .mascot-x .mascot-eyes{top:12px;left:27px}.brand-panel .mascot-spark{font-size:18px}.brand-panel .spark-one{bottom:3px;left:4px}.brand-panel .spark-two{right:0;top:0}.brand-panel .learn-button{margin-top:11px;padding:9px 0;min-height:44px;width:225px;font-size:9px}.home-foot{display:none}.setup-panel{min-height:0;padding:25px 21px;border-radius:16px;box-shadow:3px 4px 0 var(--ink)}.panel-title h2{font-size:42px;margin:12px 0}.panel-title>p:last-child{font-size:12px;line-height:1.6}.count-grid{gap:9px;margin:24px 0 17px}.count-tile{min-height:78px;border-radius:10px}.count-tile strong{font-size:38px}.count-tile span{font-size:6px;letter-spacing:.04em}.count-art svg{width:42px;height:42px}.setup-note{font-size:10px;line-height:1.5}.setup-names{margin-top:22px;gap:10px}.name-row{padding:8px;gap:9px}.name-row input{font-size:16px;min-width:0}.name-row .avatar{width:29px;height:29px;flex-basis:29px}.setup-next{margin-top:22px}.wizard-step-2 .brand-panel,.wizard-step-3 .brand-panel{display:none}.wizard-step-2,.wizard-step-3{padding-top:25px}.pack-options{gap:7px}.pack-option{padding:13px 7px 12px}.pack-option strong{font-size:21px}.pack-option small{font-size:6px;letter-spacing:0}.rounds-row p{font-size:9px}.rounds-row select{font-size:14px;max-width:120px;padding:10px}.rounds-row{gap:8px}.label-row label{font-size:9px}.label-row .text-link{font-size:9px}.game-layout{padding:12px max(15px,env(safe-area-inset-left)) 23px;min-height:calc(100svh - 161px)}.game-top{gap:8px;margin-bottom:8px}.game-top .text-link,.back-link{font-size:9px}.game-progress{margin-bottom:16px}.pass-card{padding:30px 18px 24px}.player-name{font-size:clamp(40px,18vw,76px);line-height:1.03;overflow-wrap:anywhere}.pass-card .lime-button{font-size:10px;overflow-wrap:anywhere;max-width:100%;padding:14px 12px}.play-card{padding:26px 20px}.play-card>h1{font-size:51px;line-height:.96}.word-card{padding:21px 17px}.word-instruction{margin-top:37px}.word-prompt{margin-bottom:32px}.big-word{font-size:clamp(22px,calc((100vw - 74px)/var(--word-length)*1.56),68px);margin:23px 0}.word-actions button{min-height:54px}.score-strip{gap:6px;justify-content:center;margin-top:22px}.score-chip{max-width:calc(50% - 3px);font-size:10px;gap:6px;padding:7px}.score-chip>span:not(.avatar){max-width:95px}.score-chip b{font-size:14px}.score-chip.active{border-color:var(--purple)}.definition-heading{font-size:7px;line-height:1.5}.definition h3{font-size:34px}.two-actions{gap:9px}.two-actions button{font-size:11px}.two-actions small{overflow-wrap:anywhere;line-height:1.4;font-size:9px}.challenger strong{overflow-wrap:anywhere;min-width:0}.challenger .checkbox{flex:0 0 24px}.difficulty{padding:17px 13px}.difficulty strong{font-size:40px}.difficulty small{font-size:9px;max-width:100%}.difficulty>svg{display:none}.modal-backdrop{padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));align-items:center}.modal{max-height:calc(100svh - 24px);padding:37px 23px 23px}.tutorial-modal{padding:29px 24px 17px;max-height:calc(100svh - 20px)}.tutorial-modal>.eyebrow{font-size:8px}.tutorial-modal>h2{font-size:37px;margin:15px 0 12px}.tutorial-art{min-height:143px;margin:16px 0 8px}.tutorial-art .mascots{height:143px;width:280px;max-width:100%;transform:scale(.83);margin:-6px auto}.tutorial-modal p.tutorial-copy{font-size:12px;line-height:1.65;margin-bottom:19px}.tutorial-progress{margin-bottom:19px}.tutorial-choices{gap:10px}.tutorial-choices button{font-size:11px;padding:17px 9px}.tutorial-choices b{font-size:39px}.tutorial-word strong{font-size:41px}.tutorial-word{padding:18px 12px}.tutorial-score{height:115px;width:115px}.tutorial-score strong{font-size:62px;margin-top:15px}.tutorial-hint{font-size:10px;margin-top:14px}.tutorial-modal .subtle-button{margin-top:5px;font-size:10px}.tutorial-nav .primary{min-height:53px}footer{margin:0 18px;padding:16px 0 calc(16px + env(safe-area-inset-bottom))}footer>span{font-size:6px;max-width:170px}footer button{min-height:44px;font-size:8px}.final-layout{padding-top:22px}.end-summary{line-height:1.6}.confetti{margin-bottom:20px}.burst i{top:65px}}
@media(max-width:360px){.brand-panel h1{font-size:40px}.brand-panel .intro{font-size:10px}.setup-panel{padding:23px 17px}.pack-option strong{font-size:19px}.pack-option small{font-size:5.5px}.panel-title h2{font-size:39px}.tutorial-modal{padding-left:20px;padding-right:20px}.tutorial-modal>h2{font-size:34px}.tutorial-modal p.tutorial-copy{font-size:11px}.tutorial-art{min-height:130px}.tutorial-word strong{font-size:37px}.score-chip>span:not(.avatar){max-width:76px}}
@media(orientation:landscape) and (max-height:600px){.word-mode .word-card{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));min-height:calc(100svh - 24px)}.word-mode .big-word{font-size:clamp(34px,calc((100vw - 100px)/var(--word-length)*1.65),102px)}.word-mode .word-prompt{margin-bottom:12px}.tutorial-modal{max-width:650px}.tutorial-art{float:right;width:43%;margin:20px 0 10px 20px}.tutorial-modal>.tutorial-copy{max-width:54%}.tutorial-nav{clear:both}.tutorial-modal>h2{font-size:35px}.tutorial-modal .mascots{transform:scale(.75);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.burst{display:none}.mascot{transform:rotate(var(--tilt,0deg))}}
/* The exact approved left-hand 2D artwork, clipped non-destructively. */
.approved-art{position:relative;width:330px;aspect-ratio:1;overflow:hidden;max-width:100%;isolation:isolate;border-radius:18px;mix-blend-mode:multiply}.approved-art img{display:block;width:200%;height:100%;max-width:none;object-fit:fill}.animated-art{animation:approved-float 5s ease-in-out infinite}.exact-brand{width:157px;height:69px;display:block;flex-shrink:0}.approved-wordmark{display:block!important;width:157px;height:69px;background-image:url('approved-logo-original.png');background-repeat:no-repeat;background-size:355px 177.5px;background-position:-14px -90px;mix-blend-mode:multiply}.brand-panel>.approved-art{margin:18px 0 8px;width:350px}.brand-panel .intro strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;font-weight:800;line-height:1.5}.brand-panel .intro{font-size:14px;line-height:1.65}.brand-panel .learn-button{margin-top:18px}.tutorial-art .approved-art{width:205px;margin:-12px auto -8px}.tutorial-art:has(.approved-art){min-height:190px}.brand-panel{min-width:0}.pass-orbit{border-color:#ffffff77}
@keyframes approved-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(max-width:700px){.exact-brand{width:132px;height:58px}.approved-wordmark{width:132px;height:58px;background-size:298.5px 149.25px;background-position:-11.8px -75.7px}.home-layout{gap:17px;padding-top:20px}.brand-panel{padding:0;min-height:0;display:grid;grid-template-columns:137px 1fr;column-gap:12px;align-items:center}.brand-panel>.eyebrow{grid-column:1/-1;text-align:center;margin-bottom:5px}.brand-panel>.approved-art{width:137px;margin:9px 0 4px;grid-column:1;grid-row:2}.brand-panel .intro{font-size:10px;width:auto;grid-column:2;grid-row:2;line-height:1.65}.brand-panel .intro strong{font-size:24px;line-height:1.15;display:block;margin-bottom:8px}.brand-panel .intro br{display:none}.brand-panel .intro strong+br{display:none}.brand-panel .learn-button{grid-column:1/-1;width:100%;margin-top:4px;font-size:9px;padding:7px 0;min-height:42px}.tutorial-art .approved-art{width:180px;margin:-10px auto -5px}.tutorial-art:has(.approved-art){min-height:175px}.tutorial-modal>h2{font-size:36px}.tutorial-modal p.tutorial-copy{font-size:12px}.tutorial-progress{margin-bottom:16px}.setup-panel{padding-top:22px;padding-bottom:20px}.count-grid{margin-top:22px;margin-bottom:13px}.count-tile{min-height:76px}.panel-title h2{font-size:40px}.setup-panel .setup-note{font-size:9px}.tutorial-art{margin-top:12px}.pass-card .lime-button{letter-spacing:.01em}}
@media(max-width:360px){.brand-panel{grid-template-columns:120px 1fr;gap:8px}.brand-panel>.approved-art{width:120px}.brand-panel .intro strong{font-size:22px}.brand-panel .intro{font-size:9px}.tutorial-art .approved-art{width:160px}.tutorial-art:has(.approved-art){min-height:155px}.tutorial-modal>h2{font-size:33px}}
@media(orientation:landscape) and (max-height:600px){.tutorial-art .approved-art{width:180px;margin:0 auto}.tutorial-art:has(.approved-art){min-height:170px}}
@media(prefers-reduced-motion:reduce){.animated-art{animation:none!important}}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){header{height:76px}.exact-brand{transform:scale(.9);transform-origin:left center}.pass-card{padding:22px 16px 18px}.pass-orbit{width:43px;height:43px;margin-bottom:17px}.pass-orbit svg{width:29px;height:29px}.player-name{font-size:clamp(38px,16vw,65px);margin:14px 0 17px}.pass-description{font-size:11px;line-height:1.5;margin-bottom:22px}.pass-card .lime-button{min-height:51px}.pass-card .tiny-note{margin-top:12px}.word-instruction{margin-top:25px}.word-prompt{margin-bottom:24px}.word-actions button{min-height:49px}.word-card .tiny-note{margin-top:13px}.tutorial-art .approved-art{width:135px}.tutorial-art:has(.approved-art){min-height:135px}.tutorial-modal>h2{font-size:31px}.tutorial-modal p.tutorial-copy{font-size:11px;margin-bottom:14px}.tutorial-modal .tutorial-art{min-height:122px;margin-top:9px}.tutorial-progress{margin-bottom:12px}.tutorial-modal .subtle-button{min-height:35px;padding:7px}.tutorial-nav .primary{min-height:48px}}
