/* Styles for chem_ar_match. */
:root{--ink:#071827;--deep:#08101f;--cyan:#42e8ed;--blue:#3e7cff;--violet:#8b5cf6;--yellow:#ffd84d;--green:#39d98a;--red:#ff6172;--glass:rgba(5,24,39,.78);--line:rgba(255,255,255,.17);--muted:#bed4dd}
    *{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Noto Sans Thai",Tahoma,sans-serif;color:#fff;background:radial-gradient(circle at 50% 115%,#164c62 0,transparent 48%),var(--ink);touch-action:none;user-select:none}button,select{font:inherit}h1,h2,h3,.element-symbol,.pill strong,.target-main{font-family:"Mitr","Noto Sans Thai",sans-serif}.hidden{display:none!important}
    #camera{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(.78) brightness(.45);opacity:.82}#handCanvas{position:fixed;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}.lab-overlay{position:fixed;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,15,26,.66),transparent 24%,transparent 72%,rgba(3,15,26,.8)),radial-gradient(circle at 50% 48%,transparent 18%,rgba(3,16,27,.27))}
    #game{position:fixed;z-index:3;inset:0}.topbar{position:absolute;z-index:5;inset:max(10px,env(safe-area-inset-top)) 12px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;pointer-events:none}.hud-side{display:flex;gap:7px}.hud-side:last-child{justify-content:flex-end}.pill{min-width:82px;padding:8px 12px;border:1px solid var(--line);border-radius:17px;background:var(--glass);box-shadow:0 12px 35px rgba(0,0,0,.28);backdrop-filter:blur(14px);text-align:center}.pill span{display:block;color:#afc9d2;font-size:.59rem;font-weight:900;letter-spacing:.09em}.pill strong{display:block;margin-top:1px;font-size:clamp(.96rem,2.5vw,1.35rem)}.mission{min-width:min(390px,46vw);padding:9px 18px;border:1px solid rgba(66,232,237,.3);border-radius:20px;background:rgba(5,28,45,.82);box-shadow:0 0 35px rgba(66,232,237,.08);backdrop-filter:blur(15px);text-align:center}.mission small{display:block;color:#77f2f4;font-size:.58rem;font-weight:900;letter-spacing:.15em}.mission strong{display:block;margin-top:2px;font-size:clamp(.8rem,2.2vw,1.08rem)}
    #playfield{position:absolute;z-index:3;inset:84px 10px 70px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:28px;background:linear-gradient(rgba(66,232,237,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(66,232,237,.025) 1px,transparent 1px),rgba(3,19,32,.17);background-size:34px 34px;box-shadow:inset 0 0 70px rgba(4,16,28,.28)}
    .zone-label{display:flex;align-items:center;gap:8px;color:#a9cbd3;font-size:.64rem;font-weight:900;letter-spacing:.1em}.zone-label:before{content:"";width:22px;height:2px;border-radius:9px;background:var(--cyan)}#targetsZone{position:absolute;inset:12px 12px auto;height:48%;pointer-events:none}#targets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:7px auto 0;height:calc(100% - 28px);max-width:1100px}
    .target{position:relative;display:grid;place-items:center;padding:8px 5px;border:2px dashed rgba(255,255,255,.26);border-radius:18px;background:rgba(7,29,47,.56);color:#dcecf0;text-align:center;transition:.2s}.target:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.06);border-radius:13px}.target.hover{border-color:var(--yellow);background:rgba(255,216,77,.13);box-shadow:0 0 25px rgba(255,216,77,.18)}.target.wrong{animation:wrong .35s;background:rgba(255,97,114,.16);border-color:var(--red)}.target.matched{border-style:solid;border-color:var(--green);background:rgba(57,217,138,.16);box-shadow:0 0 25px rgba(57,217,138,.12)}.target-main{position:relative;font-size:clamp(.82rem,2.1vw,1.28rem);font-weight:700;line-height:1.15}.target-sub{position:relative;margin-top:3px;color:#8eb0ba;font-size:clamp(.55rem,1.2vw,.7rem)}.target-check{position:absolute;right:6px;top:4px;color:#73efac;font-size:1rem;font-weight:900;opacity:0}.target.matched .target-check{opacity:1}
    #deckLabel{position:absolute;left:14px;top:53%}#cards{position:absolute;inset:calc(53% + 25px) 0 0}.element-card{position:absolute;display:grid;place-items:center;padding:5px;border:3px solid rgba(255,255,255,.8);border-radius:17px;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.36),inset 0 0 0 4px rgba(255,255,255,.12);cursor:grab;touch-action:none;will-change:transform;transition:filter .12s,box-shadow .12s,opacity .25s}.element-card:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.28);border-radius:11px}.element-card.dragging{z-index:30;cursor:grabbing;filter:brightness(1.14);box-shadow:0 22px 45px rgba(0,0,0,.5),0 0 0 8px rgba(66,232,237,.22);transition:none}.element-card.correct{animation:cardMatch .42s ease-out forwards}.element-card.returning{transition:transform .36s cubic-bezier(.2,.8,.2,1)}.card-number{position:absolute;left:8px;top:5px;font-size:.58rem;font-weight:800;opacity:.86}.element-symbol{position:relative;font-size:clamp(1.5rem,4.2vw,2.8rem);font-weight:700;line-height:1}.card-caption{position:relative;margin-top:-3px;font-size:clamp(.5rem,1.25vw,.68rem);font-weight:700}.cat-nonmetal{background:linear-gradient(145deg,#0f9f74,#087860)}.cat-noble{background:linear-gradient(145deg,#5268d8,#3947a2)}.cat-alkali{background:linear-gradient(145deg,#e94f74,#a82f54)}.cat-alkaline{background:linear-gradient(145deg,#e78a35,#ad5b20)}.cat-metalloid{background:linear-gradient(145deg,#1594a7,#0b687b)}.cat-transition{background:linear-gradient(145deg,#8059cf,#5735a1)}.cat-post{background:linear-gradient(145deg,#657989,#405565)}.cat-halogen{background:linear-gradient(145deg,#c49820,#8b6911)}.cat-actinide{background:linear-gradient(145deg,#b8449b,#80316e)}
    @keyframes wrong{25%{translate:-7px 0}50%{translate:7px 0}75%{translate:-4px 0}}@keyframes cardMatch{65%{scale:1.2;filter:brightness(1.5)}to{scale:.15;opacity:0}}#finger{position:fixed;z-index:20;width:34px;height:34px;translate:-50% -50%;pointer-events:none;border:4px solid #fff;border-radius:50%;background:rgba(66,232,237,.3);box-shadow:0 0 0 8px rgba(66,232,237,.12),0 0 24px var(--cyan);opacity:.25;transition:opacity .15s,scale .12s}#finger.seen{opacity:1}#finger.pinching{scale:.7;background:var(--yellow);box-shadow:0 0 0 10px rgba(255,216,77,.18),0 0 26px var(--yellow)}
    .bottom-bar{position:absolute;z-index:7;inset:auto 12px max(10px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;gap:10px;pointer-events:none}.tracking{display:flex;align-items:center;gap:9px;max-width:min(510px,72vw);padding:9px 13px;border:1px solid var(--line);border-radius:15px;background:var(--glass);backdrop-filter:blur(14px);color:#d5e6eb;font-size:.7rem}.status-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;color:var(--yellow);background:currentColor;box-shadow:0 0 13px currentColor}.status-dot.ready{color:var(--green)}.status-dot.touch{color:var(--violet)}.actions{display:flex;gap:7px;pointer-events:auto}.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;color:#fff;background:var(--glass);cursor:pointer}.icon-btn:hover,.icon-btn:focus-visible{background:rgba(62,124,255,.68);outline:3px solid rgba(66,232,237,.2)}
    #feedback{position:fixed;z-index:22;left:50%;top:50%;translate:-50% -50%;pointer-events:none;opacity:0;font-size:clamp(2rem,7vw,4.5rem);font-family:"Mitr","Noto Sans Thai",sans-serif;font-weight:700;text-align:center;text-shadow:0 8px 35px rgba(0,0,0,.55)}#feedback.show{animation:feedback .7s ease-out}@keyframes feedback{20%,65%{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 14% 16%,rgba(62,124,255,.25),transparent 28%),radial-gradient(circle at 86% 80%,rgba(66,232,237,.22),transparent 29%),linear-gradient(145deg,#061523,#0b2b40 54%,#111d3e)}.screen:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(66,232,237,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(66,232,237,.16) 1px,transparent 1px);background-size:42px 42px}.panel{position:relative;width:min(1020px,100%);padding:clamp(23px,4vw,46px);border:1px solid rgba(255,255,255,.18);border-radius:34px;background:rgba(4,22,36,.75);box-shadow:0 36px 110px rgba(0,0,0,.5);backdrop-filter:blur(22px)}.welcome{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,68px);align-items:center}.eyebrow{display:flex;align-items:center;gap:10px;color:#75eff2;font-size:.7rem;font-weight:900;letter-spacing:.16em}.eyebrow:before{content:"";width:30px;height:3px;border-radius:9px;background:var(--cyan)}h1{margin:14px 0 16px;font-size:clamp(3.8rem,9vw,7.4rem);font-weight:700;line-height:.78;letter-spacing:-.07em}.chem{display:block;color:#fff}.match{display:block;color:transparent;background:linear-gradient(90deg,var(--cyan),#79a5ff 42%,#b984ff 70%,var(--yellow));-webkit-background-clip:text;background-clip:text}.lead{margin:22px 0;color:var(--muted);font-size:clamp(.94rem,2vw,1.12rem);line-height:1.75}.features,.legend{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.chip{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:rgba(255,255,255,.055);color:#dfedf1;font-size:.69rem;font-weight:800}.settings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:13px}.field{display:grid;gap:5px;color:#b9d0d8;font-size:.68rem;font-weight:800}.field select{width:100%;padding:10px 11px;border:1px solid rgba(255,255,255,.14);border-radius:13px;color:#fff;background:#0b2a40;outline:none}.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(66,232,237,.13)}
    .primary,.secondary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:12px 20px;border-radius:16px;color:#fff;cursor:pointer;font-weight:900}.primary{border:0;background:linear-gradient(135deg,#168ca5,#5268dc);box-shadow:0 15px 38px rgba(31,107,177,.34)}.secondary{margin-top:9px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.06)}.primary:hover,.secondary:hover,.primary:focus-visible,.secondary:focus-visible{translate:0 -2px;filter:brightness(1.12);outline:3px solid rgba(66,232,237,.2)}.note{margin:12px 0 0;color:#94aeb8;font-size:.66rem;text-align:center}.visual{position:relative;aspect-ratio:1;max-width:390px;margin:auto}.atom-ring{position:absolute;inset:7%;border:2px solid rgba(66,232,237,.35);border-radius:50%;animation:spin 11s linear infinite}.atom-ring.b{rotate:60deg;border-color:rgba(139,92,246,.4);animation-direction:reverse;animation-duration:8s}.atom-ring.c{rotate:-60deg;inset:20%;border-color:rgba(255,216,77,.42);animation-duration:6s}.atom-ring:before{content:"";position:absolute;left:48%;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.visual-card{position:absolute;inset:27%;display:grid;place-items:center;border:8px solid rgba(255,255,255,.78);border-radius:25px;background:linear-gradient(145deg,#7c55d5,#4b2d9a);box-shadow:0 20px 45px rgba(0,0,0,.37);font-family:"Mitr";font-size:5rem;font-weight:700}.visual-card small{position:absolute;left:8px;top:5px;font:700 .7rem "Noto Sans Thai"}.visual-hand{position:absolute;right:0;bottom:5%;font-size:4.5rem;filter:drop-shadow(0 15px 14px rgba(0,0,0,.4));animation:grab 2.2s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes grab{50%{translate:-45px -35px;rotate:-15deg}}
    .result{max-width:660px;text-align:center}.trophy{font-size:clamp(4.5rem,12vw,7rem)}.result h2{margin:6px 0 3px;font-size:clamp(2.3rem,7vw,4.5rem);font-weight:700}.result-copy{margin:8px 0 20px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.stats div{padding:17px 7px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.055)}.stats span{display:block;color:#a9c2ca;font-size:.64rem;font-weight:900;letter-spacing:.08em}.stats strong{display:block;margin-top:4px;font:700 clamp(1.35rem,4vw,2rem) "Mitr"}.review{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0}.review span{padding:6px 9px;border:1px solid rgba(57,217,138,.35);border-radius:10px;background:rgba(57,217,138,.1);color:#d8f8e7;font-size:.72rem}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions .secondary{margin:0}.paused{position:fixed;z-index:25;inset:0;display:grid;place-items:center;padding:18px;background:rgba(2,12,21,.8);backdrop-filter:blur(12px)}.pause-card{width:min(390px,100%);padding:30px;border:1px solid var(--line);border-radius:27px;background:#0a2a3d;text-align:center}.pause-card h2{margin:7px 0;font-size:2rem}.pause-card p{margin:0 0 20px;color:var(--muted)}
    @media(max-width:900px){#targets{grid-template-columns:repeat(5,1fr)}.target-main{font-size:.87rem}.welcome{grid-template-columns:1fr}.visual{display:none}.settings{grid-template-columns:1fr 1fr 1fr}}
    @media(max-width:620px){#targets{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr)}.target{grid-column:span 2}.target:nth-child(4){grid-column:2/span 2}.panel{border-radius:26px}h1{font-size:clamp(4rem,20vw,6.6rem)}.pill{min-width:67px;padding:7px 8px}.pill.combo-pill{display:none}.mission{min-width:43vw;padding-inline:7px}.topbar{gap:5px}#playfield{inset:76px 6px 65px;border-radius:21px}#targetsZone{inset:8px 7px auto;height:49%}#targets{gap:5px}.target{padding:4px 2px;border-radius:13px}.target-sub{font-size:.51rem}#deckLabel{top:52%}#cards{inset:calc(52% + 23px) 0 0}.tracking{max-width:72vw;padding:8px 10px;font-size:.63rem}.settings{grid-template-columns:1fr}.stats{gap:5px}.stats div{padding:13px 4px}.result-actions{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}