/* Styles for dna_puzzle. */
:root{--bg:#060c20;--panel:#101a3b;--line:rgba(255,255,255,.13);--text:#f5f7ff;--muted:#aab5d6;--cyan:#38d9ff;--pink:#ff5fb7;--violet:#9b7bff;--green:#56e39f;--yellow:#ffd166;--red:#ff667d}
    *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans Thai",sans-serif;color:var(--text);background:var(--bg)}button{font:inherit}.hidden{display:none!important}
    body{min-height:100vh;background:radial-gradient(circle at 12% 8%,rgba(56,217,255,.17),transparent 30%),radial-gradient(circle at 88% 70%,rgba(255,95,183,.15),transparent 32%),linear-gradient(150deg,#050a19,#0b1533 55%,#130d30);overflow-x:hidden}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
    .screen{min-height:100vh;display:grid;place-items:center;padding:clamp(16px,4vw,44px)}
    .panel{width:min(1040px,100%);border:1px solid var(--line);border-radius:32px;background:rgba(12,22,52,.88);box-shadow:0 34px 100px rgba(0,0,0,.48);backdrop-filter:blur(18px)}
    .welcome{display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:center;padding:clamp(25px,5vw,56px)}
    .eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.18em;color:var(--cyan)}h1{margin:8px 0 14px;font:700 clamp(3rem,8vw,6.8rem)/.9 "Mitr";letter-spacing:-.06em}h1 span{display:block;color:transparent;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));background-clip:text;-webkit-background-clip:text}.lead{color:#cbd3ec;line-height:1.75}.rule-row{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.rule{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.055);font-weight:900;font-size:.78rem}.rule.at{color:#7ee8ff}.rule.gc{color:#ff9bd1}.rule.dir{color:#c2b2ff}
    .primary,.secondary{width:100%;min-height:54px;margin-top:10px;border-radius:16px;font-weight:900;cursor:pointer;transition:.2s}.primary{border:0;color:#061126;background:linear-gradient(135deg,var(--cyan),#7ce8ca);box-shadow:0 15px 38px rgba(56,217,255,.2)}.secondary{border:1px solid var(--line);color:#fff;background:rgba(255,255,255,.05)}.primary:hover,.secondary:hover{translate:0 -2px;filter:brightness(1.08)}
    .hero-dna{min-height:390px;display:grid;place-items:center;position:relative}.helix{position:relative;width:min(300px,70vw);height:330px;filter:drop-shadow(0 0 30px rgba(56,217,255,.18));animation:float 4s ease-in-out infinite}.helix:before,.helix:after{content:"";position:absolute;inset:10px 70px;border:9px solid transparent;border-left-color:var(--cyan);border-right-color:var(--pink);border-radius:50%;transform:rotate(20deg)}.helix:after{transform:rotate(-20deg)}.rung{position:absolute;left:72px;right:72px;top:var(--y);height:7px;border-radius:20px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));transform:rotate(var(--r));box-shadow:0 0 15px rgba(155,123,255,.45)}@keyframes float{50%{translate:0 -12px;rotate:2deg}}
    #game{min-height:100vh;padding:calc(78px + env(safe-area-inset-top)) 14px 24px}.topbar{position:fixed;z-index:20;inset:0 0 auto;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(9px,env(safe-area-inset-top)) clamp(12px,3vw,30px) 9px;border-bottom:1px solid var(--line);background:rgba(5,10,26,.94);backdrop-filter:blur(16px)}.brand{font:600 1.12rem "Mitr"}.brand span{color:var(--cyan)}.hud{display:flex;gap:7px}.pill{min-width:76px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;text-align:center;background:rgba(255,255,255,.055)}.pill small,.pill strong{display:block}.pill small{font-size:.54rem;color:var(--muted);font-weight:900}.pill strong{font:600 1rem "Mitr"}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;color:#fff;background:rgba(255,255,255,.06);cursor:pointer}
    .game-wrap{width:min(1120px,100%);margin:auto}.progress-row{display:flex;align-items:center;gap:12px;margin:7px 0 13px;color:var(--muted);font-size:.72rem;font-weight:900}.progress{height:8px;flex:1;overflow:hidden;border-radius:20px;background:rgba(255,255,255,.08)}.progress span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:.35s}
    .arena{border:1px solid var(--line);border-radius:28px;padding:clamp(14px,3vw,28px);background:rgba(9,18,45,.78);box-shadow:0 25px 70px rgba(0,0,0,.26)}.question-label{text-align:center;color:var(--cyan);font-size:.68rem;font-weight:900;letter-spacing:.14em}.arena h2{text-align:center;margin:5px 0 12px;font:600 clamp(1.2rem,3vw,1.75rem) "Mitr"}.template-wrap{animation:questionFloat 2.8s ease-in-out infinite}.template-caption,.drop-caption,.choices-title{text-align:center;margin:5px 0;color:var(--muted);font-size:.7rem;font-weight:800}@keyframes questionFloat{50%{translate:0 -5px}}
    .strand{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:max-content}.direction{min-width:24px;color:#fff;font:700 .8rem "Mitr"}.bases{display:flex;gap:5px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 20px rgba(255,255,255,.025)}.base{width:clamp(28px,5vw,47px);height:clamp(36px,6vw,54px);display:grid;place-items:center;border-radius:12px;color:#071126;font:700 clamp(.9rem,2.5vw,1.28rem) "Mitr";box-shadow:inset 0 -5px 10px rgba(0,0,0,.13)}.base-A{background:#55ddff}.base-T{background:#ffd166}.base-G{background:#74e5a7}.base-C{background:#ff83c5}
    .drop-zone{min-height:102px;margin:13px auto 17px;padding:12px;border:2px dashed rgba(155,123,255,.5);border-radius:22px;display:grid;place-items:center;cursor:pointer;transition:.2s;background:rgba(155,123,255,.055)}.drop-zone:hover,.drop-zone.active{border-color:var(--cyan);background:rgba(56,217,255,.1);box-shadow:0 0 0 5px rgba(56,217,255,.06)}.drop-zone.good{border-color:var(--green);background:rgba(86,227,159,.13)}.drop-zone.bad{border-color:var(--red);background:rgba(255,102,125,.12)}.placeholder{text-align:center;color:#9ca9cf;font-weight:800}.placeholder span{display:block;font-size:1.6rem;margin-bottom:2px}
    .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dna-option{min-width:0;padding:10px 8px;border:1px solid var(--line);border-radius:18px;color:#fff;background:rgba(255,255,255,.045);cursor:grab;touch-action:none;transition:.2s;overflow-x:auto}.dna-option:hover,.dna-option.selected{border-color:var(--violet);background:rgba(155,123,255,.13);translate:0 -2px}.dna-option.correct-answer{border-color:var(--green);background:rgba(86,227,159,.13)}.dna-option.wrong-answer{border-color:var(--red);background:rgba(255,102,125,.12)}.dna-option .bases{padding:7px;gap:3px}.dna-option .base{width:clamp(23px,3.4vw,35px);height:35px;border-radius:8px;font-size:.82rem}.dna-option .direction{font-size:.7rem}.drag-ghost{position:fixed;z-index:100;pointer-events:none;translate:-50% -50%;max-width:90vw;padding:10px;border:2px solid var(--cyan);border-radius:18px;background:#172653;box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:.94}.drag-ghost .base{width:31px;height:36px;font-size:.78rem}.feedback{min-height:44px;margin-top:12px;text-align:center;font-weight:800;color:#cbd4ee}.feedback.ok{color:var(--green)}.feedback.no{color:#ff8799}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:9px}.legend span{font-size:.62rem;color:var(--muted)}.legend b{display:inline-grid;place-items:center;width:19px;height:19px;margin-right:3px;border-radius:5px;color:#071126}
    .result-panel{max-width:680px;padding:clamp(28px,5vw,52px);text-align:center}.result-icon{font-size:5rem}.result-panel h2{margin:4px;font:700 clamp(2rem,6vw,3.7rem) "Mitr"}.result-panel p{color:var(--muted)}.final-score{font:700 clamp(4rem,13vw,7rem)/1 "Mitr";color:transparent;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));background-clip:text;-webkit-background-clip:text}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.summary div{padding:15px 5px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.045)}.summary small,.summary strong{display:block}.summary small{color:var(--muted);font-size:.62rem;font-weight:900}.summary strong{font:600 1.25rem "Mitr"}
    @media(max-width:780px){.welcome{grid-template-columns:1fr}.hero-dna{display:none}.choices{grid-template-columns:1fr}.arena{padding:12px}.drop-zone{min-height:88px}.brand{font-size:.86rem}.pill{min-width:60px;padding-inline:6px}.dna-option .strand{justify-content:flex-start}.dna-option{overflow-x:auto}}
    @media(max-width:480px){#game{padding-inline:7px}.brand{display:none}.base{width:29px;height:39px}.template-wrap{overflow-x:auto;padding-bottom:5px}.summary{grid-template-columns:1fr}.arena h2{font-size:1rem}.pill{min-width:58px}.choices{gap:7px}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
    /* DNA AR camera and genetic-lab background */
    #camera{position:fixed;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;filter:saturate(.82) contrast(1.08) brightness(.52);transition:opacity .55s;background:transparent}.camera-active #camera{opacity:.78}
    .camera-shade{position:fixed;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 5%,rgba(5,10,31,.2) 58%,rgba(3,7,22,.74)),linear-gradient(180deg,rgba(5,10,30,.28),rgba(9,8,35,.52))}
    .gene-bg{position:fixed;z-index:2;inset:0;pointer-events:none;overflow:hidden}.gene-bg:before,.gene-bg:after{content:"";position:absolute;width:44vw;aspect-ratio:1;border-radius:50%;filter:blur(65px);opacity:.2;animation:geneGlow 9s ease-in-out infinite alternate}.gene-bg:before{left:-15vw;top:10%;background:var(--cyan)}.gene-bg:after{right:-16vw;bottom:-12%;background:var(--pink);animation-delay:-4s}.gene-particle{position:absolute;left:var(--x);top:110%;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:13px;color:rgba(255,255,255,.55);font:700 1rem "Mitr";background:rgba(15,27,63,.34);box-shadow:0 0 24px color-mix(in srgb,var(--c) 40%,transparent);animation:baseRise var(--d) linear infinite;animation-delay:var(--delay)}
    @keyframes baseRise{to{translate:var(--drift) -125vh;rotate:240deg}}@keyframes geneGlow{to{scale:1.2;translate:8vw -4vh}}
    .screen,#game{position:relative;z-index:3}#handCanvas{position:fixed;z-index:44;inset:0;width:100%;height:100%;pointer-events:none}#handCursor{position:fixed;z-index:45;width:34px;height:34px;translate:-50% -50%;pointer-events:none;border:4px solid #fff;border-radius:50%;background:rgba(56,217,255,.3);box-shadow:0 0 0 8px rgba(56,217,255,.13),0 0 25px var(--cyan);opacity:0;transition:opacity .15s,scale .12s}#handCursor.seen{opacity:1}#handCursor.pinching{scale:.68;background:var(--yellow);box-shadow:0 0 0 10px rgba(255,209,102,.2),0 0 29px var(--yellow)}
    .tracking{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(8,18,47,.72);backdrop-filter:blur(12px);color:#d4dcf3;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(--cyan)}
    .arena,.topbar{backdrop-filter:blur(16px)}.arena{background:linear-gradient(145deg,rgba(9,18,45,.84),rgba(28,18,62,.76))}.dna-option.ar-source{border-color:var(--yellow);box-shadow:0 0 0 5px rgba(255,209,102,.11)}
    /* DNA start-screen icon */
    .dna-start-icon{position:absolute;z-index:4;width:clamp(142px,19vw,178px);aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:36%;font-size:clamp(5.4rem,10vw,7.2rem);line-height:1;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.2),transparent 30%),linear-gradient(145deg,rgba(56,217,255,.3),rgba(155,123,255,.34) 48%,rgba(255,95,183,.3));box-shadow:inset 0 0 35px rgba(255,255,255,.1),0 0 0 12px rgba(155,123,255,.07),0 28px 70px rgba(4,8,28,.5),0 0 48px rgba(56,217,255,.24);filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));animation:dnaIconPulse 3.2s ease-in-out infinite}.hero-dna .helix{opacity:.42;scale:1.12}@keyframes dnaIconPulse{50%{translate:0 -9px;scale:1.04;box-shadow:inset 0 0 42px rgba(255,255,255,.14),0 0 0 18px rgba(155,123,255,.04),0 32px 76px rgba(4,8,28,.52),0 0 62px rgba(255,95,183,.24)}}