/* Styles for color_pop. */
:root{--ink:#100522;--glass:rgba(20,8,46,.76);--line:rgba(255,255,255,.17);--white:#fff;--muted:#d9cfea;--pink:#ff4fa3;--violet:#7c4dff;--cyan:#36d9ef;--yellow:#ffd84d;--green:#48dc91;--red:#ff5d67}
    *{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Noto Sans Thai",Tahoma,sans-serif;color:var(--white);background:radial-gradient(circle at 15% 15%,#4b1678 0,transparent 32%),radial-gradient(circle at 85% 80%,#093d6f 0,transparent 35%),var(--ink);touch-action:none}h1,h2,.eyebrow,.target-name,.pill strong{font-family:"Mitr","Noto Sans Thai",sans-serif}
    button,select{font:inherit}.hidden{display:none!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}
    #camera{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(.9) brightness(.62);opacity:.82}
    #trackingCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
    #aurora{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,3,31,.34),transparent 28%,transparent 70%,rgba(12,3,31,.55))}
    #game{position:fixed;inset:0;z-index:3}.topbar{position:absolute;inset:max(12px,env(safe-area-inset-top)) 14px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;pointer-events:none}.hud-group{display:flex;gap:8px}.hud-group:last-child{justify-content:flex-end}.pill{min-width:82px;padding:9px 14px;border:1px solid var(--line);border-radius:18px;background:var(--glass);box-shadow:0 12px 35px rgba(5,1,18,.24);backdrop-filter:blur(14px);text-align:center}.pill span{display:block;color:#cabee3;font-size:.65rem;font-weight:800;letter-spacing:.08em}.pill strong{display:block;margin-top:2px;font-size:clamp(1rem,2.3vw,1.4rem);line-height:1}
    .target-card{min-width:min(310px,44vw);padding:10px 18px 12px;border:1px solid var(--line);border-radius:24px;background:var(--glass);box-shadow:0 14px 40px rgba(5,1,18,.26);backdrop-filter:blur(16px);text-align:center}.target-card small{display:block;color:#d9cfea;font-size:.64rem;font-weight:900;letter-spacing:.14em}.target-name{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:3px;font-size:clamp(1.2rem,3.5vw,2rem);font-weight:1000}.target-dot{width:22px;height:22px;border:3px solid rgba(255,255,255,.84);border-radius:50%;box-shadow:0 0 18px currentColor}
    .round-progress{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 78px);left:50%;width:min(360px,64vw);height:5px;overflow:hidden;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.16)}.round-progress span{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--pink));transition:transform .2s linear}
    #playfield{position:absolute;inset:118px 18px 76px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:30px;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:34px 34px;box-shadow:inset 0 0 80px rgba(22,5,48,.22)}
    .orb{position:absolute;display:grid;place-items:center;padding:0;border:6px solid rgba(255,255,255,.78);border-radius:50%;color:#fff;box-shadow:0 12px 30px rgba(5,1,18,.3),inset 0 0 0 5px rgba(255,255,255,.14);font-size:clamp(1.5rem,4vw,2.7rem);font-weight:1000;text-shadow:0 3px 10px rgba(0,0,0,.22);transition:filter .12s,scale .12s;will-change:transform;user-select:none}.orb:after{content:"";position:absolute;inset:9%;border:2px solid rgba(255,255,255,.28);border-radius:50%}.orb.is-hovered{filter:brightness(1.25);scale:1.12;outline:6px solid rgba(255,255,255,.28)}.orb.is-correct{animation:pop .4s ease-out forwards}.orb.is-wrong{animation:shake .32s ease-out}.orb .hold-ring{position:absolute;inset:-12px;border:5px solid transparent;border-top-color:#fff;border-radius:50%;opacity:0}.orb.is-hovered .hold-ring{opacity:1;animation:hold .42s linear forwards}
    @keyframes hold{to{transform:rotate(360deg)}}@keyframes pop{65%{scale:1.45;filter:brightness(1.6)}to{scale:0;opacity:0}}@keyframes shake{25%{translate:-8px 0}50%{translate:8px 0}75%{translate:-5px 0}}
    #finger{position:fixed;z-index:8;width:34px;height:34px;translate:-50% -50%;pointer-events:none;border:4px solid #fff;border-radius:50%;background:rgba(54,217,239,.32);box-shadow:0 0 0 8px rgba(54,217,239,.14),0 0 24px var(--cyan);transition:opacity .2s}#finger:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}#finger.lost{opacity:.25}
    .bottom-bar{position:absolute;inset:auto 14px max(12px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;gap:12px;pointer-events:none}.tracking-status{display:flex;align-items:center;gap:9px;max-width:min(430px,65vw);padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(13px);color:#e7def4;font-size:.76rem}.status-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px currentColor}.status-dot.ready{color:var(--green);background:var(--green)}.game-actions{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:15px;color:#fff;background:var(--glass);backdrop-filter:blur(13px);cursor:pointer;font-size:1.15rem}.icon-btn:hover,.icon-btn:focus-visible{background:rgba(124,77,255,.7);outline:3px solid rgba(255,255,255,.25)}
    #feedback{position:fixed;z-index:12;left:50%;top:50%;translate:-50% -50%;pointer-events:none;font-size:clamp(2rem,8vw,5rem);font-weight:1000;text-align:center;text-shadow:0 8px 35px rgba(0,0,0,.42);opacity:0}#feedback.show{animation:feedback .65s ease-out}@keyframes feedback{20%,60%{opacity:1;scale:1.08}to{opacity:0;translate:-50% -85%}}
    .screen{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:clamp(16px,3vw,34px);overflow:auto;background:radial-gradient(circle at 18% 15%,rgba(255,79,163,.34),transparent 27%),radial-gradient(circle at 82% 78%,rgba(54,217,239,.26),transparent 29%),linear-gradient(150deg,#12062b,#29104f 56%,#071f40)}.screen:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:radial-gradient(#fff 1.2px,transparent 1.2px);background-size:32px 32px}.panel{position:relative;width:min(920px,100%);padding:clamp(22px,4vw,44px);border:1px solid rgba(255,255,255,.2);border-radius:34px;background:rgba(16,5,34,.7);box-shadow:0 35px 100px rgba(4,1,13,.46);backdrop-filter:blur(20px)}
    .welcome-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(25px,5vw,64px);align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;color:#74ebf5;font-size:.75rem;font-weight:900;letter-spacing:.16em}.eyebrow:before{content:"";width:28px;height:3px;border-radius:99px;background:var(--cyan)}h1{margin:12px 0 14px;font-size:clamp(3.8rem,10vw,8.5rem);line-height:.72;letter-spacing:-.09em}.color-word{display:block;color:transparent;background:linear-gradient(90deg,var(--yellow),var(--pink) 40%,#b287ff 70%,var(--cyan));-webkit-background-clip:text;background-clip:text}.pop-word{display:inline-block;color:#fff;rotate:-3deg}.lead{max-width:570px;margin:22px 0 26px;color:var(--muted);font-size:clamp(.96rem,2vw,1.16rem);line-height:1.7}.features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.chip{padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:99px;color:#e7def4;background:rgba(255,255,255,.06);font-size:.72rem;font-weight:800}
    .settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.field{display:grid;gap:6px;color:#cfc2e5;font-size:.72rem;font-weight:800}.field select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.15);border-radius:13px;color:#fff;background:#241047;outline:none}.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(54,217,239,.15)}
    .primary-btn,.secondary-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 20px;border-radius:16px;cursor:pointer;color:#fff;font-weight:900}.primary-btn{border:0;background:linear-gradient(135deg,#ff4fa3,#7c4dff);box-shadow:0 15px 35px rgba(173,47,183,.32)}.secondary-btn{margin-top:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07)}.primary-btn:hover,.secondary-btn:hover,.primary-btn:focus-visible,.secondary-btn:focus-visible{translate:0 -2px;filter:brightness(1.1);outline:3px solid rgba(255,255,255,.2)}.privacy{margin:14px 0 0;color:#a99dbd;font-size:.68rem;text-align:center}
    .demo{position:relative;aspect-ratio:1;max-width:350px;margin:auto}.demo-ring{position:absolute;inset:5%;border:1px dashed rgba(255,255,255,.28);border-radius:50%;animation:spin 18s linear infinite}.demo-ring:nth-child(2){inset:22%;animation-direction:reverse;animation-duration:11s}.demo-orb{position:absolute;width:31%;aspect-ratio:1;display:grid;place-items:center;border:7px solid rgba(255,255,255,.75);border-radius:50%;font-size:3rem;box-shadow:0 18px 35px rgba(0,0,0,.28)}.demo-orb.a{left:2%;top:16%;background:var(--pink)}.demo-orb.b{right:0;top:33%;background:var(--cyan)}.demo-orb.c{left:29%;bottom:0;background:var(--yellow)}.demo-hand{position:absolute;left:43%;top:35%;font-size:clamp(4rem,10vw,7rem);filter:drop-shadow(0 18px 18px rgba(0,0,0,.3));animation:point 2s ease-in-out infinite}@keyframes spin{to{rotate:360deg}}@keyframes point{50%{translate:28px -18px;rotate:8deg}}
    .result-panel{max-width:620px;text-align:center}.trophy{font-size:clamp(4rem,12vw,7rem);filter:drop-shadow(0 18px 20px rgba(0,0,0,.3))}.result-panel h2{margin:8px 0 2px;font-size:clamp(2.2rem,7vw,4.4rem);line-height:1}.result-sub{margin:8px 0 22px;color:#d5c9e7}.score-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:18px 0}.score-card div{padding:17px 8px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06)}.score-card span{display:block;color:#baafd0;font-size:.67rem;font-weight:800;letter-spacing:.08em}.score-card strong{display:block;margin-top:4px;font-size:clamp(1.3rem,4vw,2rem)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions .secondary-btn{margin:0}
    .paused{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:rgba(8,2,20,.72);backdrop-filter:blur(10px)}.pause-card{width:min(390px,calc(100% - 32px));padding:32px;border:1px solid var(--line);border-radius:28px;background:#21103e;text-align:center}.pause-card h2{margin:5px 0 8px;font-size:2rem}.pause-card p{margin:0 0 20px;color:var(--muted)}
    .confetti{position:fixed;z-index:40;width:12px;height:20px;pointer-events:none;animation:fall 1.5s ease-in forwards}@keyframes fall{to{translate:var(--dx) 110vh;rotate:760deg;opacity:.2}}
    @media(max-width:760px){.welcome-grid{grid-template-columns:1fr}.demo{display:none}.panel{border-radius:26px}h1{font-size:clamp(4.2rem,21vw,7rem)}.pill{min-width:68px;padding:8px 9px}.pill.combo-pill{display:none}.target-card{min-width:42vw;padding-inline:10px}.topbar{gap:7px}.hud-group{gap:5px}#playfield{inset:108px 9px 70px;border-radius:22px}.tracking-status{max-width:70vw;padding:9px 11px}.settings{grid-template-columns:1fr 1fr}}
    @media(max-width:430px){.pill span{font-size:.55rem}.pill strong{font-size:.95rem}.target-card small{font-size:.54rem}.target-name{font-size:1.1rem}.target-dot{width:17px;height:17px}.score-card{gap:5px}.score-card div{padding:13px 5px}.result-actions{grid-template-columns:1fr}.settings{grid-template-columns:1fr}.welcome-grid{gap:15px}.lead{margin-block:14px 18px}.features{margin-bottom:17px}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}