/* Thumb controls share the game's warm palette, with quiet glass surfaces. */
.menu-vignette{display:none}
.joystick-wrap,.throw-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.joystick{--stick-x:0px;--stick-y:0px;position:relative;width:132px;height:132px;border-radius:50%;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(circle,#fff2da08 35%,#fff2da12 72%);border:1px solid #fff0d746;box-shadow:inset 0 1px 0 #ffefd523,0 9px 34px #180e1b30;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.joystick:after{content:'';position:absolute;inset:12px;border:1px solid #ffedca22;border-radius:50%;pointer-events:none}
.joystick-knob{position:absolute;left:calc(50% - 29px);top:calc(50% - 29px);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;transform:translate(var(--stick-x),var(--stick-y));background:linear-gradient(145deg,#fff5e5e8,#cbb69de0);border:1px solid #fff8ecbd;box-shadow:inset 0 2px 0 #fff9ed,0 5px 0 #6e51496b,0 9px 22px #130b2440;transition:transform .14s ease-out;pointer-events:none}
.joystick.engaged .joystick-knob{transition:none;background:linear-gradient(145deg,#fff8ed,#e6d1b4);box-shadow:inset 0 2px 0 #fff9ed,0 3px 0 #6e51496b,0 0 24px #fff3c31c}
.joystick-knob svg{width:24px;height:24px;fill:none;stroke:#866e57;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.joystick-guide i{position:absolute;width:3px;height:3px;background:#f8e6c990;border-radius:50%}.joystick-guide i:nth-child(1){left:calc(50% - 1px);top:7px}.joystick-guide i:nth-child(2){right:7px;top:calc(50% - 1px)}.joystick-guide i:nth-child(3){left:calc(50% - 1px);bottom:7px}.joystick-guide i:nth-child(4){left:7px;top:calc(50% - 1px)}
.touch-controls .control-label{font-size:9px;letter-spacing:2px;font-weight:700;color:#f5e8d1b3;text-shadow:0 2px 7px #1f121b;line-height:1;margin-top:16px;pointer-events:none}
.touch-controls .throw-wrap{width:112px;padding-bottom:15px}
.touch-controls .touch-throw{position:relative;display:grid;place-items:center;width:92px;height:92px;padding:0;border:1px solid #ffcae1be;border-radius:50%;background:radial-gradient(circle at 33% 20%,#f8a6c3,#d96392 55%,#a23b68);box-shadow:inset 0 2px 1px #ffd7e4, inset 0 -5px 0 #95305b66,0 7px 0 #5a274185,0 12px 30px #24102066,0 0 0 7px #f095b51a;touch-action:none;user-select:none;-webkit-user-select:none;transition:filter .15s,transform .15s,opacity .15s}
.touch-throw img{width:52px;height:52px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 1px #7a254c8c);image-rendering:pixelated}
.touch-controls .touch-throw .throw-count{position:absolute;right:-1px;top:0;margin:0;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:2px solid #553248;background:#ffdaa0;color:#674430;font:bold 13px 'Trebuchet MS',sans-serif;letter-spacing:0;box-shadow:0 2px 6px #20131c50}
.touch-controls .throw-halo{position:absolute;inset:6px;display:block;border:1px solid #ffd2e35c;border-radius:50%;margin:0;pointer-events:none}
.touch-controls .touch-throw.empty{filter:saturate(.35);opacity:.72;background:radial-gradient(circle at 33% 20%,#ba9fa9,#6f5662);box-shadow:inset 0 2px 1px #dccbd65c,0 5px 0 #382c3885,0 9px 25px #24102044,0 0 0 7px #d6b6c20c}
.touch-controls .touch-throw.tossed{animation:yarn-toss .25s ease-out}.touch-controls .touch-throw:active{transform:translateY(3px) scale(.97)}
.ammo-dots{display:flex;gap:5px;position:absolute;bottom:0}.ammo-dots i{width:5px;height:5px;border-radius:50%;background:#eebcc730;box-shadow:inset 0 0 0 1px #fff0d733}.ammo-dots i.loaded{background:#ffd6b0;box-shadow:0 0 7px #ffc88b6b}
@keyframes yarn-toss{0%{transform:scale(.88)}65%{transform:scale(1.06)}100%{transform:scale(1)}}

@media(max-width:760px),(pointer:coarse){
  body.playing{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:#2a1c20;min-height:0}
  body.playing .app{margin:0;padding:0;max-width:none;width:100%;height:100%;overflow:hidden}
  body.playing .topbar,body.playing footer,body.playing .below-stage,body.playing .stage-bottom{display:none}
  body.playing main,body.playing .stage-wrap{width:100%;height:100%;padding:0;border:0;border-radius:0;box-shadow:none}
  body.playing .stage{position:relative;width:100%;height:100%;height:100dvh;aspect-ratio:auto;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
  body.playing .stage canvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  body.playing .stage:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#20162088,transparent 20%,transparent 67%,#24162233 80%,#211424b8)}
  body.playing .hud{top:calc(env(safe-area-inset-top,0px) + 16px);left:18px;right:18px;align-items:flex-start;gap:10px;z-index:3}
  .playing .hud-group{gap:18px;min-width:0;padding:12px 17px;border:1px solid #fff1d42b;border-radius:19px;background:#2b2027b8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 22px #10091b22,inset 0 1px 0 #fff2d411}
  .playing .hud-group span{font-size:8px;color:#eedcc7b0;letter-spacing:1.6px;margin-bottom:5px}.playing .hud-score{min-width:64px}.playing .hud-score strong{font:700 27px 'Trebuchet MS',sans-serif;letter-spacing:-.7px}.playing .hud-combo{min-width:35px}.playing .hud-combo strong{font:700 22px 'Trebuchet MS',sans-serif;color:#ffd380}.playing .combo-track{margin-top:6px;height:3px;background:#ffddb91c}.playing .combo-track i{background:#ffd087}
  .playing .hud-right{align-items:center;gap:10px}.playing .timer{font:11px 'Trebuchet MS',sans-serif;color:#ffedd3bd;letter-spacing:.5px;padding:15px 0}.playing .yarn-count{display:none}
  .playing .pause-btn{height:44px;width:44px;margin:0;border:1px solid #fff0d52e;border-radius:15px;background:#2b2027b8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff0d6;font-size:17px;box-shadow:inset 0 1px 0 #fff2d410}
  body.playing .touch-controls:not(.hidden){display:flex;left:26px;right:25px;bottom:calc(env(safe-area-inset-bottom,0px) + 29px);align-items:flex-end;z-index:4}
  body.playing .run-toast{bottom:calc(env(safe-area-inset-bottom,0px) + 210px);font-size:11px;line-height:1.5;padding:10px 16px;max-width:86%;width:max-content;white-space:normal;border:1px solid #ffe9cf29;background:#2b2027d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#f7e8d3}
  body.playing .countdown{inset:0 0 120px;background:transparent;z-index:3}.playing .countdown>span{font-size:10px;letter-spacing:2.5px}.playing .countdown strong{font-size:96px}.playing .countdown small{font-size:11px}
  .playing .modal-backdrop{padding:calc(env(safe-area-inset-top,0px) + 22px) 22px calc(env(safe-area-inset-bottom,0px) + 22px);z-index:6;background:#2316219c;backdrop-filter:blur(12px)}
  .playing .modal{width:370px;padding:32px 27px;border-radius:25px;box-shadow:0 24px 70px #10091b66}.playing .modal h2{font-size:30px}.playing .modal .eyebrow{font-size:8px}.playing .modal p{font-size:12px}.playing .modal .play-btn{height:52px;font-size:13px}.playing .secondary-btn{min-height:45px;font-size:10px}.playing .big-score{font-size:62px}.playing .results{margin:23px 0 18px}.playing .results strong{font-size:22px}.playing .results span{font-size:8px}
}
@media(max-width:359px){.playing .hud{left:12px;right:12px}.playing .hud-group{padding:10px 13px;gap:12px}.playing .hud-score strong{font-size:24px}.playing .hud-right{gap:7px}.joystick{width:116px;height:116px}body.playing .touch-controls:not(.hidden){left:19px;right:15px}.touch-controls .touch-throw{width:84px;height:84px}}
@media(max-height:500px) and (orientation:landscape){body.playing .touch-controls:not(.hidden){bottom:16px;left:24px;right:24px}.joystick{width:104px;height:104px}.touch-controls .touch-throw{width:76px;height:76px}.touch-throw img{width:44px;height:44px}.touch-controls .control-label{margin-top:9px;font-size:8px}.touch-controls .throw-wrap{padding-bottom:11px}.playing .hud-group{padding:8px 14px}.playing .hud-group span{font-size:7px;margin-bottom:3px}.playing .hud-score strong{font-size:23px}.playing .hud-combo strong{font-size:19px}body.playing .run-toast{bottom:30px;max-width:45%;font-size:10px}body.playing .countdown{inset:0}}
@media(prefers-reduced-motion:reduce){.joystick-knob{transition:none}.touch-controls .touch-throw.tossed{animation:none}}

/* A portrait title screen, laid out as a whole screen rather than a small desktop panel. */
@media(max-width:760px),(pointer:coarse){
  body:not(.playing){margin:0;background:#302127;min-height:100svh;overscroll-behavior-y:none}
  body:not(.playing) .app{padding:0;max-width:none;margin:0;min-height:100svh}
  body:not(.playing) .topbar{position:absolute;z-index:4;left:20px;right:20px;top:calc(env(safe-area-inset-top,0px) + 13px);height:44px;align-items:center}
  body:not(.playing) .wordmark,body:not(.playing) .top-divider,body:not(.playing) footer,body:not(.playing) .below-stage,body:not(.playing) .stage-bottom{display:none}
  body:not(.playing) .top-actions{width:100%;gap:8px;padding:0;align-items:center}
  body:not(.playing) .best-label{font-size:0;gap:7px;margin-right:auto;background:#251e26a3;border:1px solid #f9dfbf25;border-radius:30px;padding:10px 12px;color:#d6b792;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  body:not(.playing) .best-label:before{content:'BEST';font-size:8px;letter-spacing:1.2px;order:0}.best-label svg{flex-shrink:0}
  body:not(.playing) .best-label svg{width:15px;height:15px;stroke:#eac184;order:-1}
  body:not(.playing) .best-label strong{font-size:14px;letter-spacing:0;color:#ffe6bb;line-height:1;margin:0}
  body:not(.playing) .icon-btn{height:42px;width:42px;padding:11px;border:1px solid #f9dfbf25;border-radius:50%;background:#251e26a3;color:#ecd9bd;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  body:not(.playing) .icon-btn svg{width:18px;height:18px}
  body:not(.playing) .stage-wrap{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
  body:not(.playing) .stage{min-height:560px;height:100svh;height:100dvh;aspect-ratio:auto;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 50% 37%,#885a3838,transparent 57%),linear-gradient(150deg,#473229,#2c202a 80%)}
  body:not(.playing) .stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.16;filter:blur(2px);pointer-events:none}
  body:not(.playing) .stage-shade{background:linear-gradient(180deg,#30212733,#3b29244d 40%,#2c2029ed 77%,#2c202a);z-index:1}
  body:not(.playing) .menu{top:calc(env(safe-area-inset-top,0px) + 83px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:400px;display:flex;flex-direction:column;align-items:stretch;margin:0;text-align:center}
  .menu>.eyebrow{flex:none;font-size:8px;letter-spacing:2.8px;gap:10px;margin:0 0 13px;color:#d6b897}.menu>.eyebrow>span{width:23px;background:#d9b37750}
  .menu .title-lockup{flex:none;align-self:center;width:90%;max-width:330px;margin:0;transform:rotate(-3deg)}
  .menu .menu-tagline{flex:none;font:italic 14px Georgia,serif;color:#e0c9ad;letter-spacing:.3px;margin:16px 0 0}
  .menu-vignette{display:block;position:relative;flex:1;min-height:110px;margin:0 -5px 12px;pointer-events:none}
  .vignette-scene{position:absolute;left:0;right:0;bottom:0;height:100%;max-height:260px}
  .vignette-scene img{position:absolute;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 5px #160d1d55)}
  .vignette-glow{position:absolute;inset:0 -20px -10px;background:radial-gradient(ellipse at 50% 60%,#f8b65316,transparent 65%)}
  .vignette-rug{position:absolute;bottom:5%;left:8%;right:8%;height:22%;border-radius:50%;background:repeating-radial-gradient(ellipse,#b0845630 0 3px,#d4a16525 3px 6px);border:2px solid #d9ac7440;box-shadow:0 8px 16px #170f1a20,inset 0 0 0 5px #81563522;transform:rotate(-4deg)}
  .vignette-sheep{height:92%;max-width:66%;left:-1%;bottom:-2%;z-index:3;transform:rotate(-5deg)}
  .vignette-pig{height:85%;max-width:63%;right:0;bottom:0;z-index:2;transform:rotate(6deg)}
  .vignette-cat{height:67%;max-width:47%;left:50%;top:-3%;transform:translateX(-50%);z-index:1;opacity:.95}
  .vignette-yarn{width:20%;height:29%;left:42%;bottom:-1%;z-index:4;transform:rotate(12deg)}
  .vignette-button{position:absolute;right:12%;bottom:4%;width:23px;height:23px;border:2px solid #8cacbd;border-radius:50%;background:#4c8397;color:#c6dce0;box-shadow:0 3px 0 #173440;font:23px Georgia,serif;line-height:17px;transform:rotate(22deg);z-index:5}
  .menu>.play-btn{flex:none;height:58px;min-height:58px;margin:0 0 16px;border-radius:17px;border:1px solid #ffdd9a;box-shadow:inset 0 2px 0 #ffeac0,inset 0 -4px 0 #c58b3f70,0 5px 0 #6c412ddd,0 10px 28px #100b1840;font-size:17px;letter-spacing:1.7px;background:linear-gradient(130deg,#ffdb8e,#efb558);color:#58371f}
  .menu>.play-btn:after{inset:6px;border-color:#a46b3260;border-radius:11px}.menu .key-pill{display:none}.menu .play-triangle{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
  .menu .menu-secondary{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .menu .menu-secondary button{height:60px;min-height:44px;padding:0 15px;border:1px solid #ead0ab2b;border-radius:14px;background:linear-gradient(120deg,#ffffff0c,#ffffff04);box-shadow:inset 0 1px 0 #fff1db07;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:#f0dfc6;font-size:10px;letter-spacing:1px;gap:9px;justify-content:center}
  .menu .menu-secondary button:after{display:none}.menu .menu-secondary .menu-icon{font-size:22px;width:22px;color:#dcb985}.menu .menu-secondary .chevron{display:none}
  .menu #character-btn{grid-column:1/-1;height:49px;justify-content:flex-start;font-size:10px;letter-spacing:1.4px}.menu #character-btn .chevron{display:block;margin-left:0;font-size:22px;color:#d2b794}
  .menu #selected-name{margin-left:auto;font-size:9px;letter-spacing:1px;padding:5px 8px;border-radius:6px;background:#f4d9b014;color:#f2ce95}
  .menu .how-link{flex:none;min-height:44px;margin:3px 0 0;padding:13px 0 9px;font-size:11px;letter-spacing:.2px;color:#c9b49e}.menu .how-link>span{width:17px;height:17px;font-size:11px;margin-right:7px}
  .modal-backdrop{grid-template-columns:minmax(0,1fr)}.modal{min-width:0}.characters{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.playing) .modal-backdrop{z-index:6;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);background:#241925b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  body:not(.playing) .modal{width:400px;padding:31px 25px;border-radius:24px;background:radial-gradient(ellipse at top,#674633,#37262c);border:1px solid #c99f6c70;outline-color:#c79f6433;outline-offset:-7px}
  body:not(.playing) .modal-close{top:7px;right:7px;width:44px;height:44px;font-size:27px}
  body:not(.playing) .modal h2{font-size:30px;margin:9px 0 12px}.modal .eyebrow{line-height:1.5}
  body:not(.playing) .modal>.eyebrow{font-size:8px;letter-spacing:1.6px;margin:5px 16px 8px}body:not(.playing) .modal p{font-size:12px;line-height:1.65}
  body:not(.playing) .modal .play-btn{height:51px;margin:15px 0 5px;border-radius:12px;font-size:12px}
  body:not(.playing) .characters{gap:12px;margin:20px 0}.character-card:focus-visible{outline-offset:2px}
  body:not(.playing) .character-card{min-width:0;min-height:177px;padding:17px 10px;gap:11px;border-radius:15px}body:not(.playing) .character-card img{width:95px;max-width:100%;height:auto;aspect-ratio:1}body:not(.playing) .character-card b{font-size:12px}body:not(.playing) .character-card small{font-size:10px;line-height:1.4}
  body:not(.playing) .wallet{font-size:12px;padding:8px 13px;margin:4px 0 12px}body:not(.playing) .upgrade-card{padding:15px;border-radius:13px;margin:11px 0}body:not(.playing) .upgrade-card h3{font-size:11px;letter-spacing:1px}body:not(.playing) .upgrade-card p{font-size:11px;margin:9px 0 12px}body:not(.playing) .buy-btn{min-height:44px;font-size:11px;line-height:1.5;padding:8px;border-radius:8px}body:not(.playing) .upgrade-note{font-size:10px!important;line-height:1.6}
  body:not(.playing) .scores-table{font-size:13px;margin-top:22px}body:not(.playing) .scores-table th{font-size:9px}body:not(.playing) .scores-table td{padding:14px 8px}
  body:not(.playing) .instructions{gap:17px;margin:22px 0}body:not(.playing) .instruction strong{font-size:13px}body:not(.playing) .instruction p{font-size:11px;margin:0}body:not(.playing) .instruction>span{width:36px;min-width:36px;height:36px;font-size:23px}
}
@media(max-height:700px) and (max-width:760px){
  body:not(.playing) .menu{top:calc(env(safe-area-inset-top,0px) + 72px);bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .menu>.eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:9px}.menu .menu-tagline{font-size:12px;margin-top:11px}.menu-vignette{min-height:94px;margin-bottom:8px}.vignette-scene{max-height:180px}.menu>.play-btn{height:52px;min-height:52px;font-size:15px;margin-bottom:13px}.menu .menu-secondary{gap:7px}.menu .menu-secondary button{height:51px;font-size:9px}.menu #character-btn{height:44px}.menu .how-link{margin-top:1px;min-height:44px}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:760px){
  body:not(.playing) .stage{min-height:470px}.menu .title-lockup{max-width:255px}.menu-vignette{display:none}.menu{justify-content:space-between}.menu .menu-tagline{margin:8px 0 12px}.menu .menu-secondary{grid-template-columns:1fr 1fr 1fr}.menu #character-btn{grid-column:auto;height:51px}.menu #character-btn .menu-icon,.menu #character-btn .chevron,.menu #selected-name{display:none}
}

/* Loading resolves once, so the final art appears together. */
.art-loading #game,.art-loading .menu-vignette{opacity:0}
.modal-open .topbar{visibility:hidden}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.modal .tutorial-head .eyebrow{margin:0;font-size:10px;letter-spacing:1.5px}.tutorial-skip{background:none;border:0;color:#dfcbb0;min-width:44px;min-height:44px;font-size:13px;padding:8px}.tutorial-art{display:block;width:98px;height:98px;object-fit:contain;margin:9px auto 12px;image-rendering:pixelated}.tutorial-art-1{width:73px;height:73px;margin:22px auto 24px}.tutorial-art-2{image-rendering:auto;width:113px;height:84px;margin:16px auto 19px}.modal:has(.tutorial-head) h2{font-size:29px!important;margin:10px 0 17px!important}.modal .tutorial-lead{font-size:16px!important;font-weight:bold;line-height:1.45!important;color:#ffe3aa;margin:0 0 10px!important}.modal .tutorial-detail{font-size:14px!important;line-height:1.6!important;margin:0 0 16px!important}.tutorial-note{padding:14px;border:1px solid #edc78d30;background:#eec78c0b;border-radius:13px;color:#dac6ac;font-size:13px;line-height:1.6}.tutorial-dots{display:flex;gap:7px;justify-content:center;margin:22px 0 17px}.tutorial-dots i{width:6px;height:6px;border-radius:6px;background:#d5b78633}.tutorial-dots .on{width:20px;background:#eec582}.modal .tutorial-back{min-height:44px;padding:12px;margin:0}.modal:has(.tutorial-head) .play-btn{font-size:13px;min-height:48px;margin-bottom:3px}.play-hint{position:absolute;z-index:4;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:440px;padding:9px 8px 9px 15px;border:1px solid #efd8b73d;border-radius:14px;background:#30252aeb;color:#f3dfc1;box-shadow:0 7px 25px #170e1826;font-size:13px;line-height:1.5;backdrop-filter:blur(8px)}.play-hint button{flex:none;width:44px;height:44px;background:none;border:0;color:#debea0;font-size:24px}.modal-open .play-hint{display:none}
@media(max-width:760px),(pointer:coarse){.play-hint{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 130px);max-width:calc(100% - 36px);width:360px;font-size:12px;padding:8px 6px 8px 12px}body:not(.playing) .modal:has(.tutorial-head),.playing .modal:has(.tutorial-head){padding:20px 23px 18px}.modal .tutorial-head .eyebrow{font-size:9px;letter-spacing:1px}.modal:has(.tutorial-head) .play-btn{font-size:12px!important}.tutorial-dots{margin:17px 0 13px}}
@media(max-width:359px){.modal:has(.tutorial-head) h2{font-size:25px!important}.tutorial-art{height:75px;width:75px;margin:3px auto 8px}.tutorial-art-2{width:100px}.modal .tutorial-lead{font-size:15px!important}.modal .tutorial-detail{font-size:13px!important}.tutorial-note{padding:11px;font-size:12px}.play-hint{top:calc(env(safe-area-inset-top,0px) + 119px)}}
#game,.menu-vignette{transition:opacity .22s ease-out}
.art-loading #play-text{font-size:.75em;letter-spacing:1px}
.run-progress{display:none;position:absolute;z-index:3;top:95px;left:30px;width:190px;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;color:#f9e4be;pointer-events:none;text-shadow:0 2px 7px #24151e}
.playing .run-progress{display:grid}.run-progress b{font-size:12px;letter-spacing:.5px}.run-progress>span{font-size:10px;letter-spacing:.6px;text-align:right}.growth-track{grid-column:1/-1;height:4px;border-radius:4px;overflow:hidden;background:#fff0d325}.growth-track i{display:block;height:100%;width:0;background:#e5c995;border-radius:4px;transition:width .15s}.run-progress.rush{color:#ffdf89}.rush .growth-track i{background:#ffc86b;box-shadow:0 0 12px #ffe095}
.special-btn{--charge:100%;position:relative;border:1px solid #e6d7fa55;border-radius:15px;background:linear-gradient(0deg,#b6a2dc35 var(--charge),#30283860 var(--charge));color:#e6d8f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:58px;min-height:56px;padding:6px 10px;touch-action:none;pointer-events:auto;box-shadow:inset 0 1px 0 #ffffff18;backdrop-filter:blur(4px)}
.special-btn>span{font-size:22px;line-height:1}.special-btn b{font-size:9px;letter-spacing:1px}.special-btn small{font-size:8px;letter-spacing:.8px}.special-btn.ready{border-color:#e4d4ff9c;color:#f4eaff}.special-btn.active{background:#b699da80;box-shadow:0 0 20px #c7a9ef55}
.desktop-special{flex-direction:row;flex-wrap:wrap;gap:4px;width:84px;min-height:44px}.desktop-special small{width:100%}
.touch-actions{display:flex;align-items:flex-end;gap:12px;pointer-events:none}.touch-special{margin-bottom:27px;width:76px;min-width:76px;padding:8px 3px;height:78px;border-radius:23px;opacity:1;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.touch-special>span{font-size:29px}.touch-special b{font-size:11px;letter-spacing:.3px}.touch-special small{font-size:11px;letter-spacing:.4px}.touch-special.ready{background:#504162de;border-color:#e4d4ffc2;box-shadow:inset 0 1px 0 #ffffff30,0 4px 14px #25122240}.touch-special:not(.ready){color:#d7c9e7;opacity:.78}.touch-special.pressed,.touch-special.active{transform:translateY(2px) scale(.97);background:#9074b8d9;box-shadow:0 0 20px #c7a9ef55}.touch-special>*{pointer-events:none}.desktop-special{width:96px}
.touch-controls .touch-throw{background:radial-gradient(circle at 35% 22%,#f4afc657,#b8638770);border-color:#ffcae16b;box-shadow:inset 0 1px 0 #ffdae74d,0 4px 14px #25122226,0 0 0 5px #f095b50a;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:.78}
.touch-controls .touch-throw:active,.touch-controls .touch-throw.aiming{opacity:1}.touch-controls .touch-throw img{opacity:.94}.touch-controls .throw-wrap{width:96px}.touch-controls .touch-throw.empty{opacity:.48;background:#96708340;box-shadow:inset 0 1px 0 #ffffff22}
.aim-line{display:none;position:absolute;left:50%;top:50%;width:74px;height:2px;transform-origin:left;transform:rotate(var(--aim-angle));background:linear-gradient(90deg,transparent 60%,#ffe4f3);pointer-events:none}.aiming .aim-line{display:block}.aim-line:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid #ffe4f3;border-right:2px solid #ffe4f3;transform:rotate(45deg)}
.closet-tabs{display:flex;border:1px solid #dfc09735;border-radius:13px;background:#251b253f;padding:4px;gap:4px;margin:18px 0 14px}.closet-tabs button{flex:1;min-height:42px;border:0;border-radius:9px;background:transparent;color:#c8b59e;font-size:13px;font-weight:bold}.closet-tabs button[aria-pressed=true]{background:#d7b78624;color:#ffdfaa;box-shadow:0 2px 5px #130e1722}
.toy-portrait{position:relative;display:inline-block;width:96px;height:96px;flex:none}.toy-portrait .toy-image{width:100%!important;height:100%!important;object-fit:contain;image-rendering:pixelated}.toy-portrait .outfit{position:absolute;height:auto!important;aspect-ratio:auto!important;max-width:none!important;image-rendering:auto!important;pointer-events:none}
.wardrobe-preview{display:flex;align-items:center;gap:14px;text-align:left;min-height:125px;padding:2px 0 10px}.wardrobe-preview .toy-portrait{width:124px;height:124px}.wardrobe-preview>div{min-width:0}.wardrobe-preview b{font-size:17px;color:#ffe4b8}.wardrobe-preview p{font-size:12px!important;line-height:1.5!important;margin:6px 0!important}.wardrobe-preview .wallet{font-size:11px!important;display:inline-flex;gap:6px;padding:5px 8px!important;white-space:nowrap}
.wardrobe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.wardrobe-card{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:107px;border-radius:13px;border:1px solid #cfa97a33;background:#211a282f;color:#ead8be;padding:10px 7px}.wardrobe-card.selected{border-color:#f2c584;background:#d8a85518;box-shadow:inset 0 0 0 1px #e7b67244}.wardrobe-card img{width:64px;height:38px;object-fit:contain;pointer-events:none}.wardrobe-card b{font-size:12px;line-height:1.4}.wardrobe-card small{font-size:10px;color:#c2ab90}.bare-toy{font-size:31px;height:38px;line-height:38px;color:#e4c499}.wardrobe-note{font-size:11px!important;line-height:1.5!important;margin:13px 0 0!important;color:#bda58c}.wardrobe-buy{font-size:12px!important;letter-spacing:.7px}.next-unlock{font-size:12px!important;color:#efd093!important;margin:0 0 20px!important}.result-actions{display:flex;gap:14px;justify-content:center}.result-actions .secondary-btn{font-size:11px}.modal .character-card{gap:9px}.modal .character-card .toy-portrait{width:96px;height:96px}
@media(max-width:760px),(pointer:coarse){
  body.playing .stage{touch-action:none}
  .playing .desktop-special{display:none}
  body.playing .touch-controls:not(.hidden){left:20px;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 68px);align-items:flex-end}
  .joystick{width:116px;height:116px;opacity:.66;background:#ffffff06;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-color:#fff0d733}.joystick.engaged{opacity:.92}.joystick-knob{width:48px;height:48px;left:calc(50% - 24px);top:calc(50% - 24px);background:linear-gradient(145deg,#fff5e5b0,#cbb69d7a);box-shadow:inset 0 1px 0 #fff9ed88,0 4px 14px #130b2426;border-color:#fff8ec88}.touch-controls .control-label{font-size:8px;letter-spacing:1.1px;margin-top:13px;color:#f5e8d18c}
  .touch-controls .touch-throw{width:84px;height:84px}.touch-throw img{width:49px;height:49px}.touch-actions{gap:10px;margin-bottom:10px}
  .playing .run-progress{top:calc(env(safe-area-inset-top,0px) + 96px);left:20px;width:187px}.playing .run-toast{bottom:calc(env(safe-area-inset-bottom,0px) + 233px)}
  body:not(.playing) .modal .closet-tabs{margin:14px 0 10px}.playing .modal .closet-tabs{margin-top:14px}
  body:not(.playing) .modal:has(.wardrobe-grid){padding:26px 20px 22px}
  .modal .wardrobe-preview .toy-portrait{width:111px;height:111px}.wardrobe-preview{gap:7px;min-height:115px}.wardrobe-preview b{font-size:15px}.modal .wardrobe-buy{margin:15px 0 0}
}
@media(max-width:359px){body.playing .touch-controls:not(.hidden){left:15px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 57px)}.joystick{width:102px;height:102px}.touch-actions{gap:10px}.touch-special{width:66px;min-width:66px;height:72px;padding:6px 2px}.touch-special b{font-size:10px}.touch-controls .throw-wrap{width:85px}.touch-controls .touch-throw{width:77px;height:77px}.playing .run-progress{top:calc(env(safe-area-inset-top,0px) + 86px);left:16px;width:179px}.wardrobe-preview .toy-portrait{width:93px!important;height:93px!important}.wardrobe-preview b{font-size:14px}.wardrobe-card{min-height:100px}.wardrobe-card b{font-size:11px}.wardrobe-card small{font-size:10px}body:not(.playing) .modal:has(.wardrobe-grid) h2{font-size:25px}}
@media(max-height:500px) and (orientation:landscape){body.playing .touch-controls:not(.hidden){bottom:20px}.joystick{width:95px;height:95px}.touch-controls .touch-throw{width:70px;height:70px}.touch-special{height:70px;margin-bottom:24px}.playing .run-progress{top:80px}.playing .run-toast{bottom:30px;max-width:40%}}

/* The crocheted logo replaces the lettered title and the header mark. */
.title-lockup,.menu .title-lockup{transform:rotate(-2deg);margin:0 -6% 2px;width:auto;max-width:none;align-self:stretch}
.menu h1{font-size:0;line-height:0}
.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px #1a0f0c99);user-select:none;-webkit-user-drag:none}
.wordmark-logo{display:block;height:58px;width:auto;margin-top:-4px;filter:drop-shadow(0 3px 4px #4a372b40)}
@media(max-width:760px){.wordmark-logo{height:46px}.menu .title-lockup{margin:0 auto;width:92%;max-width:340px}}
@media(max-height:620px) and (max-width:760px){.menu .title-lockup{max-width:230px}}
/* Upgrade offers on the results screen. */
.hud-combo{position:relative}
.hud-streak{position:absolute;left:calc(100% + 13px);bottom:5px;width:max-content;padding:5px 7px;border:1px solid #edc78d40;border-radius:7px;background:#30252ae8;color:#ffdc9b;font:700 10px 'Trebuchet MS',sans-serif;letter-spacing:.5px;pointer-events:none}
.hud-streak[hidden]{display:none}
.run-results .eyebrow{justify-content:center;margin-bottom:8px}
.run-results h2{margin:4px 0 17px}
.run-results .new-best{color:#ffd071}
.result-scores{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:15px 0;border-block:1px solid #edc78d26}
.run-results .big-score{font-size:48px;letter-spacing:-2px;margin:5px 0 0;overflow-wrap:anywhere}
.personal-best{border-left:1px solid #edc78d33;padding-left:17px;min-width:0}
.personal-best strong{display:block;font:700 25px 'Courier New',monospace;color:#f5e0b8;margin-top:9px;overflow-wrap:anywhere}
.run-results .score-label{font-size:9px;letter-spacing:1px}
.run-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:11px;text-align:left;margin:19px 0 16px}
.run-stats>div{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}
.run-stats>div:last-child{grid-column:1/-1;border-top:1px solid #edc78d1c;padding-top:10px}
.run-stats dt{font-size:8px;line-height:1.5;color:#c4ab8a;letter-spacing:.5px}
.run-stats dd{font:700 17px 'Courier New',monospace;margin:0;color:#f9e8c7}
.run-results .near-best{font-size:10px!important;letter-spacing:.6px;color:#f5c877;margin:12px 0 0!important}
.run-results .earned{margin:0 0 15px!important}
.run-results .play-btn{margin-bottom:5px}
.run-results .result-actions{margin-bottom:16px}
.run-results .next-unlock{font-size:10px!important;line-height:1.5;margin:8px 0 0!important}
@media(max-width:760px),(pointer:coarse){
  .playing .hud-streak{left:calc(100% + 30px);bottom:5px;font-size:9px;padding:3px 5px}
  .playing .modal.run-results{padding:24px 22px}
  .playing .run-results h2{font-size:27px;margin-bottom:14px}
  .playing .run-results .big-score{font-size:42px}
  .playing .run-results .personal-best strong{font-size:23px}
  .playing .run-results .score-label{font-size:8px}
  .playing .run-results .result-actions{gap:9px;margin-bottom:10px}
  .playing .run-results .result-actions .secondary-btn{font-size:10px;padding:10px 7px}
  .run-stats{column-gap:15px}.run-stats dt{font-size:8px;letter-spacing:0}
}
@media(max-width:359px){
  .playing .run-results .personal-best{padding-left:10px}
  .playing .run-results .personal-best strong{font-size:19px}
  .playing .run-results .big-score{font-size:38px}
}
.quick-upgrades{display:grid;gap:7px;margin:4px 0 14px;padding:12px;border:1px solid #f5b74755;border-radius:14px;background:#f5b7470f}
.quick-upgrades .eyebrow{margin:0 0 3px;color:#f5c877}
.quick-upgrades .buy-btn{display:flex;flex-direction:column;gap:3px;width:100%;height:auto;padding:9px 12px;line-height:1.25}
.quick-upgrades .buy-btn b{letter-spacing:1.2px}.quick-upgrades .buy-btn span{font-size:.86em;opacity:.85}
.level-dots{display:flex;gap:4px}
/* Language switch: shows the active language code. */
.lang-btn{width:auto;min-width:38px;padding:0 9px;font:700 11px 'Trebuchet MS',Arial,sans-serif;letter-spacing:1.2px}

/* Practice round: the hint becomes the teacher, and the control being taught glows. */
.play-hint.lesson:not(.hidden){display:flex;width:max-content;max-width:min(560px,calc(100% - 28px));font-size:15px;line-height:1.45;border-color:#f5b74799;box-shadow:0 10px 30px #170e1866}
.play-hint.lesson.alert{background:#7b2c3cf2;border-color:#ffd76a;color:#fff4dc;animation:lesson-pulse .9s ease-in-out infinite}
.play-hint.lesson button{width:auto;min-width:44px;padding:0 10px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.teach{outline:3px solid #ffd76a;outline-offset:5px;animation:teach-glow 1s ease-in-out infinite}
.lesson-facts{margin:10px 0 20px;padding-left:20px;text-align:left;font-size:14px;line-height:1.5}.lesson-facts li{margin:7px 0}
@keyframes lesson-pulse{50%{transform:translateX(-50%) scale(1.04)}}
@keyframes teach-glow{50%{outline-color:#ffd76a33;box-shadow:0 0 22px #ffd76acc}}
@media(max-width:760px),(pointer:coarse){.play-hint.lesson:not(.hidden){font-size:13px}}
@media(prefers-reduced-motion:reduce){.play-hint.lesson.alert,.teach{animation:none}}

/* Actual toy portraits are buttons, with the same selection on desktop and touch. */
.menu-choices{position:absolute;inset:0;z-index:3;pointer-events:none}
.menu-choices>button{position:absolute;padding:0;border:0;border-radius:35%;background:transparent;color:#f2dec2;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.toy-choice-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;align-items:center;white-space:nowrap;padding:7px 12px;border:1px solid #e9c99840;border-radius:11px;background:#2b2224ed;box-shadow:0 5px 12px #160d1633;transition:background .18s,border-color .18s}
.toy-choice-label b{font-size:11px;letter-spacing:1px}.toy-choice-label small{font-size:7px;letter-spacing:1.2px;color:#bba88c}
.menu-choices>button[aria-pressed=true] .toy-choice-label{border-color:#f4c878;background:#684828f2;color:#ffe6ac}.menu-choices>button[aria-pressed=true] small{color:#f2d09b}
.menu-choices>button:hover .toy-choice-label{border-color:#ffe2a7;background:#614b35}.menu-choices>button:focus-visible{outline:2px dashed #ffe0a1;outline-offset:4px}
body.playing .menu-choices,.art-loading .menu-choices{display:none}
@media(max-width:760px),(pointer:coarse){
  body:not(.playing) .stage #menu-toys{position:absolute;inset:0;width:100%;height:100%;opacity:1;filter:none;pointer-events:none}
  .toy-choice-label{padding:5px 9px;gap:2px;border-radius:9px}.toy-choice-label b{font-size:10px}.toy-choice-label small{font-size:6px}
}
@media(max-height:500px) and (orientation:landscape) and (max-width:760px){
  body:not(.playing) .stage{min-height:640px}.menu-vignette{display:block;min-height:140px}
}