.barber-scope{--xmas-red:oklch(55% .21 27);--xmas-red-deep:oklch(43% .18 27);--xmas-green:oklch(48% .13 152);--xmas-gold:oklch(83% .15 85);--xmas-cream:oklch(96% .03 90);--xmas-wood:oklch(34% .06 55);--tray-blue:oklch(55% .16 250);--tray-blue-deep:oklch(38% .14 255);--tray-blue-light:oklch(72% .13 245);--ink:oklch(21% .03 50);--game-font:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;--toon-outline:3px solid var(--ink);--toon-shadow:0 6px 0 oklch(25% .05 260/.55), 0 12px 24px oklch(0% 0 0/.35)}.barber-scope .game-root{width:100vw;height:100dvh;font-family:var(--game-font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0}.barber-scope .stage{touch-action:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.barber-scope .bg-layer{opacity:0;background-position:50%;background-size:cover;transition:opacity .46s,transform .62s;position:absolute;inset:0;transform:scale(1.06)}.barber-scope .bg-layer.is-visible{opacity:1;transform:scale(1)}.barber-scope .vignette{pointer-events:none;background:radial-gradient(120% 85% at 50% 42%,#0000 45%,oklch(12% .04 40/.55) 100%);position:absolute;inset:0}.barber-scope .scotty-wrap{touch-action:none;cursor:crosshair;filter:drop-shadow(0 18px 24px oklch(0% 0 0/.45));display:block;position:absolute;inset:0}.barber-scope .scotty-canvas-host,.barber-scope .scotty-canvas-host{position:absolute;inset:0;overflow:hidden}.barber-scope .scotty-canvas-host>canvas,.barber-scope .fx-canvas{aspect-ratio:16/9;width:max(min(100vw,177.778dvh),max(100vw,177.778dvh)/1.16279);height:auto;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.barber-scope .fx-canvas{pointer-events:none}.barber-scope .reaction-bubble{border:var(--toon-outline);background:var(--xmas-cream);color:var(--ink);box-shadow:var(--toon-shadow);pointer-events:none;border-radius:999px;padding:.45rem .9rem;font-size:clamp(.9rem,2.4vw,1.25rem);font-weight:800;animation:.22s ease-out pop-in;position:absolute;top:4%;right:-8%}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.barber-scope .top-controls{top:max(.25rem, env(safe-area-inset-top));z-index:5;justify-content:center;align-items:center;gap:clamp(.5rem,2vw,1rem);padding:0 .75rem;display:flex;position:absolute;left:0;right:0}.barber-scope .back-btn{text-decoration:none;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.barber-scope .back-btn-pill{border:var(--toon-outline);background:linear-gradient(180deg, var(--xmas-gold), oklch(72% .16 70));color:var(--ink);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--toon-shadow);border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .8rem;font-size:clamp(.55rem,1.6vw,.8rem);font-weight:800;transition:transform .12s,filter .12s;display:inline-flex}.barber-scope .back-btn:active .back-btn-pill{filter:brightness(1.06);transform:scale(.96)}@media (width<=540px){.top-controls{flex-wrap:wrap;row-gap:.4rem}.barber-scope .back-btn{flex:0 0 100%;order:-1;justify-content:center;display:flex;position:static;transform:none}}.barber-scope .round-btn{border:var(--toon-outline);background:radial-gradient(circle at 34% 26%, var(--xmas-red), var(--xmas-red-deep));width:clamp(46px,10vw,60px);height:clamp(46px,10vw,60px);color:var(--xmas-cream);box-shadow:var(--toon-shadow);border-radius:999px;place-items:center;transition:transform .12s,filter .12s;display:grid}.barber-scope .round-btn:active{filter:brightness(1.08);transform:translateY(4px)scale(.96)}.barber-scope .round-btn svg{width:58%;height:58%}.barber-scope .round-btn-alt{background:radial-gradient(circle at 34% 26%, var(--xmas-green), oklch(34% .1 152))}.barber-scope .view-pill{border:var(--toon-outline);background:var(--xmas-cream);color:var(--ink);letter-spacing:.02em;text-transform:uppercase;box-shadow:var(--toon-shadow);border-radius:999px;padding:.4rem 1.1rem;font-size:clamp(.7rem,2.2vw,1rem);font-weight:800}.barber-scope .tray{left:50%;bottom:max(.5rem, env(safe-area-inset-bottom));z-index:5;width:min(1120px,98vw);position:absolute;transform:translate(-50%)}.barber-scope .tray-inner{border:var(--toon-outline);background:linear-gradient(180deg, var(--tray-blue-light), var(--tray-blue) 45%, var(--tray-blue-deep));box-shadow:var(--toon-shadow), inset 0 3px 0 oklch(100% 0 0/.35);scrollbar-width:none;border-radius:1.5rem;justify-content:center;align-items:stretch;gap:clamp(.3rem,1.2vw,.7rem);padding:clamp(.4rem,1.4vw,.8rem);display:flex;overflow-x:auto}.barber-scope .tray-inner::-webkit-scrollbar{display:none}.barber-scope .clipper-size-selector{border:var(--toon-outline);background:linear-gradient(180deg, var(--tray-blue-light), var(--tray-blue-deep));border-radius:.8rem;gap:.25rem;padding:.3rem;display:flex;position:absolute;bottom:calc(100% + .45rem);left:50%;transform:translate(-50%);box-shadow:0 4px oklch(25% .05 260/.5)}.barber-scope .clipper-size-btn{min-width:4.6rem;color:var(--ink);text-transform:uppercase;background:oklch(96% .03 90);border:2px solid oklch(25% .05 260);border-radius:.55rem;padding:.4rem .65rem;font-size:.72rem;font-weight:900}.barber-scope .clipper-size-btn.is-active{background:var(--xmas-gold);box-shadow:inset 0 2px oklch(100% 0 0/.45)}.barber-scope .tool-btn{border:var(--toon-outline);background:linear-gradient(oklch(98% .02 90),oklch(88% .04 85));border-radius:1rem;flex:none;justify-items:center;gap:.1rem;width:clamp(52px,7vw,84px);padding:.3rem .2rem .25rem;transition:transform .12s,box-shadow .12s,background .16s;display:grid;box-shadow:0 4px oklch(25% .05 260/.5)}.barber-scope .tool-btn:active{transform:translateY(3px);box-shadow:0 1px oklch(25% .05 260/.5)}.barber-scope .tool-btn.is-active{background:linear-gradient(180deg, var(--xmas-gold), oklch(72% .16 70));transform:translateY(-5px);box-shadow:0 8px oklch(25% .05 260/.5),0 0 0 4px oklch(96% .1 95/.6)}.barber-scope .tool-svg{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:clamp(30px,5vw,46px);height:clamp(30px,5vw,46px)}.barber-scope .tool-label{color:var(--ink);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.55rem,1.6vw,.75rem);font-weight:800}.barber-scope .done-btn{border:var(--toon-outline);color:var(--xmas-cream);text-transform:uppercase;background:linear-gradient(oklch(62% .18 145),oklch(44% .14 148));border-radius:1rem;flex:none;margin-left:clamp(.2rem,1vw,.6rem);padding:0 clamp(.8rem,2.4vw,1.4rem);font-size:clamp(.8rem,2.4vw,1.15rem);font-weight:900;box-shadow:0 5px oklch(25% .05 160/.6)}.barber-scope .done-btn:active{transform:translateY(3px);box-shadow:0 2px oklch(25% .05 160/.6)}.barber-scope .tool-cursor{z-index:6;pointer-events:none;filter:drop-shadow(0 6px 8px oklch(0% 0 0/.45));transition:scale .12s;position:fixed;translate:-18% -18%}.barber-scope .tool-cursor.is-active{scale:1.08}.barber-scope .tool-cursor.is-active.is-buzzing{animation:70ms linear infinite buzz}.barber-scope .tool-cursor-svg{width:100%;height:100%}@keyframes buzz{0%{translate:-18% -18%}50%{translate:-16% -20%}to{translate:-18% -18%}}.barber-scope .overlay{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:oklch(15% .04 40/.62);place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.barber-scope .overlay-soft{background:oklch(15% .04 40/.45)}.barber-scope .completion-overlay{z-index:30;background:oklch(10% .03 40/.9);place-items:center;padding:clamp(.75rem,3vw,2rem);display:grid;position:absolute;inset:0;overflow:hidden}.barber-scope .completion-video{z-index:2;aspect-ratio:736/416;object-fit:contain;border:var(--toon-outline);width:min(92vw,1100px);max-height:88vh;box-shadow:var(--toon-shadow);background:var(--ink);border-radius:1rem;display:block;position:relative}.barber-scope .completion-overlay .panel{z-index:2;position:relative}.barber-scope .confetti{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.barber-scope .confetti i{--hue:calc(var(--i) * 47deg);left:var(--x);background:hsl(var(--hue) 88% 58%);width:10px;height:18px;animation:confetti-fall 2.7s var(--delay) linear infinite;border-radius:2px;position:absolute;top:-8%}@keyframes confetti-fall{0%{transform:translateY(-12vh)rotate(0)}to{transform:translate3d(calc((var(--i) % 9) * 5px - 20px), 116vh, 0) rotate(720deg)}}.barber-scope .panel{border:var(--toon-outline);background:linear-gradient(180deg, var(--xmas-cream), oklch(90% .05 85));width:min(420px,92vw);box-shadow:var(--toon-shadow);text-align:center;border-radius:1.75rem;gap:.7rem;padding:clamp(1rem,3vw,1.6rem);animation:.22s ease-out pop-in;display:grid}.barber-scope .panel-title{color:var(--xmas-red-deep);font-size:clamp(1.1rem,4vw,1.5rem);font-weight:900}.barber-scope .panel-title-big{font-size:clamp(1.4rem,5.5vw,2rem)}.barber-scope .panel-text{color:var(--ink);font-weight:600}.barber-scope .panel-row{gap:.6rem;display:flex}.barber-scope .panel-row>*{flex:1}.barber-scope .volume-control{border:var(--toon-outline);background:linear-gradient(180deg, var(--tray-blue-light), var(--tray-blue));color:var(--xmas-cream);text-align:left;text-transform:uppercase;border-radius:1rem;grid-template-columns:1fr auto;align-items:center;gap:.55rem .8rem;padding:.75rem 1rem;font-size:clamp(.85rem,2.8vw,1.05rem);font-weight:900;display:grid;box-shadow:0 5px oklch(30% .08 260/.6)}.barber-scope .volume-control input[type=range]{width:100%;accent-color:var(--xmas-red);cursor:pointer;touch-action:pan-x;grid-column:1/-1}.barber-scope .panel-btn{border:var(--toon-outline);background:linear-gradient(180deg, var(--tray-blue-light), var(--tray-blue));color:var(--xmas-cream);text-transform:uppercase;border-radius:1rem;padding:.7rem 1rem;font-size:clamp(.85rem,2.8vw,1.05rem);font-weight:900;box-shadow:0 5px oklch(30% .08 260/.6)}.barber-scope .panel-btn:active{transform:translateY(3px);box-shadow:0 2px oklch(30% .08 260/.6)}.barber-scope .panel-btn-warn{background:linear-gradient(180deg, oklch(64% .2 30), var(--xmas-red-deep));box-shadow:0 5px oklch(30% .1 30/.6)}.barber-scope .panel-btn-ghost{color:var(--ink);background:linear-gradient(oklch(95% .02 90),oklch(85% .03 85));box-shadow:0 5px oklch(40% .03 60/.5)}.barber-scope .loading{z-index:20;color:var(--xmas-cream);background:linear-gradient(oklch(28% .07 30),oklch(18% .05 40));place-content:center;justify-items:center;gap:.5rem;display:grid;position:absolute;inset:0}.barber-scope .loading span{font-size:clamp(1.3rem,6vw,2.4rem);font-weight:900}.barber-scope .loading small{opacity:.8;font-weight:600}@media (orientation:landscape) and (height<=520px){.barber-scope .tool-btn{width:clamp(44px,7vw,64px)}.barber-scope .tool-svg{width:clamp(27px,5vw,38px);height:clamp(27px,5vw,38px)}}@media (prefers-reduced-motion:reduce){.barber-scope .confetti i{animation-duration:5s}}@media (width<=640px){.barber-scope .clipper-size-btn{min-width:4rem;padding:.35rem .45rem}.barber-scope .tray-inner{flex-wrap:wrap;row-gap:.45rem;overflow-x:visible}.barber-scope .tool-btn{width:calc(25% - .55rem);max-width:110px}.barber-scope .done-btn{flex:100%;margin-left:0;padding:.55rem 1rem}}.dentist-scope{--game-panel:oklch(25% .09 27);--game-foreground:oklch(98% .02 94);--game-border:oklch(78% .16 51/.72);--tool-surface:oklch(96% .025 91/.94);--tool-hover:oklch(100% 0 0);--tool-foreground:oklch(22% .04 29);--tool-border:oklch(49% .11 31/.65);--tool-active:oklch(58% .21 27);--tool-active-foreground:oklch(99% .01 90);--tool-active-border:oklch(88% .18 87);--shadow-game:0 4px 0 oklch(18% .07 27/.82), 0 8px 24px oklch(12% .03 25/.24);--shadow-tool:0 4px 0 oklch(47% .08 34/.76), 0 8px 18px oklch(16% .04 25/.22);--shadow-tool-active:0 6px 0 oklch(34% .14 24), 0 12px 25px oklch(17% .07 24/.38);--celebration-red:oklch(58% .23 26);--celebration-green:oklch(48% .15 151);--celebration-gold:oklch(84% .18 83);--celebration-snow:oklch(100% 0 0);z-index:1000;-webkit-user-select:none;user-select:none;font-family:Arial,Helvetica,sans-serif;position:fixed;inset:0;overflow:hidden}.dentist-scope button,.dentist-scope input{font:inherit}.dentist-scope h1{font-family:inherit}.dentist-scope .dentist-button-game{border-color:var(--game-border);background:color-mix(in oklab, var(--game-panel) 92%, transparent);color:var(--game-foreground);box-shadow:var(--shadow-game)}.dentist-scope .dentist-button-game:hover{background:var(--game-panel)}.dentist-scope .dentist-button-tool{border-color:var(--tool-border);background:var(--tool-surface);color:var(--tool-foreground);box-shadow:var(--shadow-tool)}.dentist-scope .dentist-button-tool:hover{background:var(--tool-hover)}.dentist-scope .dentist-button-tool-active{border-color:var(--tool-active-border);background:var(--tool-active);color:var(--tool-active-foreground);box-shadow:var(--shadow-tool-active)}.dentist-scope .game-shell{background:oklch(12% .025 28);place-items:center;width:100vw;height:100dvh;display:grid;overflow:hidden}.dentist-scope .game-stage{aspect-ratio:16/9;background:var(--game-panel);width:min(100vw,177.778dvh);max-height:100dvh;position:relative;overflow:hidden;box-shadow:0 0 60px oklch(0% 0 0/.45)}.dentist-scope .game-canvas{cursor:none;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.dentist-scope .loading-screen{z-index:40;background:var(--game-panel);color:var(--game-foreground);text-transform:uppercase;place-items:center;font-weight:900;display:grid;position:absolute;inset:0}.dentist-scope .celebration-video{z-index:6;object-fit:contain;background:var(--game-panel);pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.dentist-scope .game-header{z-index:10;pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:start;display:grid;position:absolute;top:clamp(.45rem,1.5vh,1rem);left:clamp(.45rem,1.3vw,1.2rem);right:clamp(.45rem,1.3vw,1.2rem)}.dentist-scope .game-header>*,.dentist-scope .header-actions>*{pointer-events:auto}.dentist-scope .header-actions{justify-content:flex-end;gap:.45rem;display:flex}.dentist-scope .game-title-wrap{border:1px solid var(--game-border);background:color-mix(in oklab, var(--game-panel) 94%, transparent);min-width:min(42vw,30rem);color:var(--game-foreground);text-align:center;box-shadow:var(--shadow-game);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.5rem;padding:.45rem 1.4rem .6rem;position:relative}.dentist-scope .game-title-wrap h1{text-transform:uppercase;letter-spacing:0;text-shadow:0 2px oklch(15% .08 27);margin:0;font-size:clamp(.85rem,2.1vw,1.65rem);font-weight:1000;line-height:1}.dentist-scope .progress-track{background:oklch(15% .03 25/.62);border:1px solid oklch(100% 0 0/.42);border-radius:999px;height:.35rem;margin-top:.45rem;overflow:hidden}.dentist-scope .progress-track span{border-radius:inherit;background:linear-gradient(90deg, var(--celebration-red), var(--celebration-gold), var(--celebration-green));height:100%;transition:width .18s;display:block}.dentist-scope .holly-dot{background:var(--celebration-red);width:.55rem;height:.55rem;box-shadow:-.42rem .15rem 0 var(--celebration-green), .42rem .15rem 0 var(--celebration-green);border-radius:50%;position:absolute;top:-.28rem;left:50%}.dentist-scope .settings-panel{z-index:20;border:1px solid var(--game-border);background:color-mix(in oklab, var(--game-panel) 96%, transparent);width:min(17rem,100% - 1rem);color:var(--game-foreground);box-shadow:var(--shadow-game);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:.5rem;padding:.8rem;position:absolute;top:4.3rem;right:clamp(.45rem,1.3vw,1.2rem)}.dentist-scope .settings-heading,.dentist-scope .settings-panel label{align-items:center;gap:.55rem;display:flex}.dentist-scope .settings-heading button{color:inherit;margin-left:auto}.dentist-scope .settings-panel label{justify-content:space-between;margin:.6rem 0 .25rem;font-size:.78rem;font-weight:800}.dentist-scope .settings-panel input{width:100%;accent-color:var(--celebration-gold)}.dentist-scope .tool-tray{z-index:12;border:clamp(.18rem, .35vw, .28rem) solid var(--celebration-red);background:color-mix(in oklab, var(--celebration-red) 86%, oklch(36% .16 28));border-radius:.85rem;gap:clamp(.2rem,.45vw,.38rem);width:min(96%,57rem);padding:clamp(.28rem,.55vw,.45rem);display:flex;position:absolute;bottom:clamp(.4rem,1.4vh,.85rem);left:50%;transform:translate(-50%);box-shadow:inset 0 .18rem oklch(75% .19 32/.9),inset 0 -.22rem oklch(29% .15 28/.9),0 .34rem oklch(25% .12 27/.92),0 .7rem 1.3rem oklch(0% 0 0/.35)}.dentist-scope .tool-button{color:oklch(24% .06 30);background:linear-gradient(oklch(95% .1 83),oklch(84% .13 72));border:.16rem solid oklch(95% .12 83);border-radius:.7rem;overflow:hidden;box-shadow:inset 0 .16rem .3rem oklch(100% 0 0/.65),inset 0 -.2rem .28rem oklch(61% .13 59/.34),0 .12rem .12rem oklch(20% .08 26/.7)}.dentist-scope .tool-button:hover{background:linear-gradient(oklch(98% .09 84),oklch(88% .13 73))}.dentist-scope .tool-button[aria-pressed=true]{background:linear-gradient(oklch(98% .1 91),oklch(90% .15 76));border-color:oklch(84% .19 216);box-shadow:inset 0 .16rem .3rem oklch(100% 0 0/.76),0 0 0 .12rem oklch(94% .06 216),0 0 .7rem .2rem oklch(75% .2 221/.85)}.dentist-scope .tool-button span:last-child{text-overflow:ellipsis;max-width:100%;overflow:hidden}.dentist-scope .tool-icon{flex:1;place-items:center;width:100%;min-height:0;display:grid}.dentist-scope .tool-icon img{object-fit:contain;filter:drop-shadow(0 .12rem .12rem oklch(0% 0 0/.32));width:min(100%,4.8rem);height:100%;min-height:0}.dentist-scope .tool-accent-red .tool-icon{color:var(--celebration-red)}.dentist-scope .tool-accent-green .tool-icon{color:var(--celebration-green)}.dentist-scope .tool-accent-blue .tool-icon{color:oklch(57% .16 240)}.dentist-scope .tool-accent-gold .tool-icon{color:oklch(67% .16 73)}.dentist-scope .tool-button[aria-pressed=true] .tool-icon{color:var(--tool-active-foreground)}.dentist-scope .tool-cursor{z-index:15;width:clamp(3rem,6vw,5rem);height:clamp(3rem,6vw,5rem);color:inherit;box-shadow:none;pointer-events:none;background:0 0;border:0;border-radius:0;place-items:center;transition:opacity .12s;display:grid;position:absolute}.dentist-scope .tool-cursor img{object-fit:contain;filter:drop-shadow(0 .18rem .18rem oklch(0% 0 0/.32));width:100%;height:100%}.dentist-scope .tool-cursor.is-active{animation:.12s steps(2,end) infinite dentist-tool-buzz}.dentist-scope .tool-blue,.dentist-scope .tool-green,.dentist-scope .tool-gold{background:0 0}.dentist-scope .spray{background:radial-gradient(at top,oklch(88% .08 225/.9),#0000 68%);width:1.8rem;height:1rem;animation:.35s infinite alternate dentist-spray-pulse;position:absolute;top:88%}.dentist-scope .completion{z-index:18;pointer-events:none;position:absolute;inset:0}.dentist-scope .completion-badge{border:2px solid var(--celebration-gold);background:var(--game-panel);color:var(--game-foreground);box-shadow:var(--shadow-game);text-transform:uppercase;white-space:nowrap;border-radius:.55rem;align-items:center;gap:.55rem;padding:.7rem 1.15rem;font-size:clamp(1rem,2.4vw,1.8rem);font-weight:1000;animation:.5s cubic-bezier(.2,1.6,.4,1) dentist-celebration-pop;display:flex;position:absolute;top:17%;left:50%;transform:translate(-50%)}.dentist-scope .confetti{position:absolute;inset:0;overflow:hidden}.dentist-scope .confetti i{border-radius:.1rem;width:.55rem;height:1rem;animation:2s linear infinite dentist-confetti-fall;position:absolute;top:-8%}@media (width<=680px),(height<=500px){.dentist-scope .game-header span:not(.holly-dot),.dentist-scope .header-actions span{display:none}.dentist-scope .game-title-wrap{min-width:47vw;padding-inline:.6rem}.dentist-scope .tool-tray{gap:.16rem;width:98%;padding:.22rem;bottom:.22rem}.dentist-scope .tool-button{padding-inline:.1rem}}@media (prefers-reduced-motion:reduce){.dentist-scope,.dentist-scope *,.dentist-scope :before,.dentist-scope :after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.dentist-scope .stage-hint{opacity:.9;white-space:nowrap;font-size:clamp(.55rem,1vw,.8rem);font-weight:700}.dentist-scope .tool-button:disabled{opacity:.52;filter:grayscale(.72)}@keyframes dentist-tool-buzz{0%{transform:translate(-20%,-80%)rotate(-28deg)}to{transform:translate(-20%,-80%)rotate(-20deg)}}@keyframes dentist-spray-pulse{0%{opacity:.35;transform:scaleY(.65)}to{opacity:1;transform:scaleY(1.25)}}@keyframes dentist-celebration-pop{0%{opacity:0;transform:translate(-50%)scale(.6)rotate(-4deg)}to{opacity:1;transform:translate(-50%)scale(1)rotate(0)}}@keyframes dentist-confetti-fall{to{transform:translateY(120vh)rotate(700deg)}}
