/* =========================================
   MOLECULE BUILDER — CHEMISTRY LAB UI
   ========================================= */
:root{--night:#0d1530;--panel:#152044;--panel-2:#1a2853;--line:#314272;--ink:#f3f7ff;--muted:#a6b5d4;--cyan:#4ce4e5;--violet:#9179ff;--pink:#ef74c8;--green:#51dda0;--yellow:#f4d76f;--red:#ff7384}*{box-sizing:border-box}html{background:#091022}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 48% -20%,#34428a 0,#121c3c 42%,#080e20 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:3px}.game-shell{width:min(1420px,100%);margin:auto;padding:16px clamp(10px,2.4vw,30px) 30px}.game-header{display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(150px,1fr) auto;align-items:center;gap:13px;margin-bottom:15px}.back-link{display:inline-flex;gap:6px;width:max-content;color:#b5c3df;text-decoration:none;font-size:.8rem;font-weight:800}.brand{display:flex;align-items:center;gap:9px}.brand>span{display:grid;width:43px;height:43px;place-items:center;border:1px solid #596ab0;border-radius:13px;background:#23316c;box-shadow:0 0 18px rgba(110,128,255,.25);font-size:1.45rem}.brand h1{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:clamp(1.15rem,2vw,1.45rem)}.brand p{margin:1px 0 0;color:var(--muted);font-size:.68rem}.hud{display:flex;justify-content:flex-end;gap:5px}.hud>div{min-width:58px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:rgba(12,22,50,.67);text-align:center}.hud span{display:block;color:#8799bd;font-size:.49rem;font-weight:900;letter-spacing:.05em}.hud strong{font-size:.84rem;font-variant-numeric:tabular-nums}.header-actions{display:flex;gap:5px}.header-actions button{padding:7px 9px;border:1px solid var(--line);border-radius:8px;color:#dbe6ff;background:#17264c;font-size:.66rem;font-weight:800}.header-actions .icon-button{width:37px;padding:0;font-size:.95rem}

/* Three-column laboratory */.lab-layout{display:grid;grid-template-columns:minmax(160px,.47fr) minmax(500px,1.55fr) minmax(250px,.66fr);gap:13px}.atom-library,.builder-panel,.information-panel{min-width:0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,rgba(25,38,80,.96),rgba(13,24,53,.97));box-shadow:0 17px 36px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04)}.atom-library,.information-panel{padding:15px}.builder-panel{padding:16px}.panel-heading,.mission-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.eyebrow{margin:0 0 3px;color:var(--cyan);font-size:.58rem;font-weight:900;letter-spacing:.12em}.panel-heading h2,.mission-bar h2{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:1.06rem}.panel-heading>span{color:#8599bd;font-size:.56rem}.atom-list{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px}.atom-source{position:relative;min-height:69px;padding:7px;border:1px solid color-mix(in srgb,var(--atom-color),#314272 50%);border-radius:11px;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--atom-color),#17264c 68%),#111d3d);text-align:left;transition:.16s}.atom-source:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.2)}.atom-source b{display:block;font-size:1.12rem}.atom-source span{display:block;overflow:hidden;color:#c5d0e8;font-size:.52rem;text-overflow:ellipsis;white-space:nowrap}.atom-source small{position:absolute;right:5px;bottom:4px;color:#95a8c8;font-size:.47rem}.valence-guide{margin-top:12px;padding:9px;border:1px solid #304269;border-radius:9px;background:#111d3c}.valence-guide p:last-child{margin:0;color:#8fa2c3;font-size:.59rem;line-height:1.45}

/* Mission and molecular canvas */.mission-bar h2 b{margin-left:5px;color:#ffdb78}.difficulty-switch{display:flex}.difficulty-switch button{padding:5px 7px;border:1px solid #3b4d7a;color:#91a3c5;background:#111e3e;font-size:.55rem;font-weight:800}.difficulty-switch button:first-child{border-radius:7px 0 0 7px}.difficulty-switch button:last-child{border-radius:0 7px 7px 0}.difficulty-switch button.active{border-color:#6ce3e3;color:#092d3a;background:#57d8dc}.bond-toolbar{display:flex;align-items:center;gap:5px;margin-top:11px;padding:7px;border:1px solid #31446e;border-radius:10px;background:#101c39;overflow-x:auto}.bond-toolbar>span{margin-right:2px;color:#8fa2c1;font-size:.58rem;font-weight:800}.bond-toolbar button{flex:0 0 auto;padding:5px 7px;border:1px solid #3b4e75;border-radius:6px;color:#b8c7df;background:#18274b;font-size:.58rem;font-weight:700}.bond-toolbar button.active{border-color:#d3a8ff;color:#fff;background:#5d438f}.bond-toolbar #delete-button{margin-left:auto;color:#ffb6bf}.building-area{position:relative;min-height:485px;margin-top:9px;border:1px solid #415386;border-radius:14px;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% 45%,rgba(77,82,167,.24),transparent 45%),linear-gradient(rgba(73,93,152,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(73,93,152,.12) 1px,transparent 1px),#0a1430;background-size:auto,28px 28px,28px 28px}.building-area.is-over{border-color:#62e8e2;box-shadow:inset 0 0 25px rgba(80,225,221,.14)}.bond-layer{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}.bond-line{stroke:#b9cbec;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(141,197,255,.55))}.bond-line.ionic{stroke:#f2d66b;stroke-dasharray:7 6}.bond-line.active{animation:bond-glow 1s ease-in-out infinite alternate}.canvas-atom{position:absolute;z-index:3;display:grid;width:58px;height:58px;place-items:center;border:3px solid color-mix(in srgb,var(--atom-color),white 38%);border-radius:50%;transform:translate(-50%,-50%) scale(var(--zoom,1));color:#fff;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.72),var(--atom-color) 30%,color-mix(in srgb,var(--atom-color),#071020 48%) 80%);box-shadow:inset -7px -8px 12px rgba(0,0,0,.25),0 0 18px color-mix(in srgb,var(--atom-color),transparent 47%);font-size:1rem;font-weight:900;user-select:none;touch-action:none;transition:box-shadow .18s,filter .18s}.canvas-atom::before{position:absolute;width:74px;height:28px;border:1px solid color-mix(in srgb,var(--atom-color),transparent 28%);border-radius:50%;content:"";animation:electron-orbit 3.2s linear infinite}.canvas-atom::after{position:absolute;top:50%;left:-9px;width:6px;height:6px;border-radius:50%;content:"";background:#dffcff;box-shadow:0 0 6px #fff;animation:electron-pulse 1.1s ease-in-out infinite alternate}.canvas-atom.selected{box-shadow:0 0 0 5px rgba(255,218,112,.28),0 0 28px #ffd96e;filter:brightness(1.2)}.canvas-atom.invalid{animation:atom-shake .4s ease}.canvas-atom.discovered{animation:atom-celebrate 1.4s ease-in-out infinite}.atom-valence{position:absolute;right:-5px;bottom:-5px;display:grid;width:20px;height:20px;place-items:center;border:2px solid #7184ab;border-radius:50%;color:#cad8ed;background:#101a34;font-size:.48rem}.empty-message{position:absolute;top:50%;left:50%;margin:0;color:#7184aa;text-align:center;font-size:.83rem;transform:translate(-50%,-50%)}.empty-message small{font-size:.61rem}.ghost-guide{position:absolute;z-index:0;inset:19%;border:2px dashed rgba(126,223,225,.19);border-radius:50%;opacity:0}.building-area.easy .ghost-guide{opacity:1}.building-area.easy .ghost-guide::after{position:absolute;top:50%;left:50%;content:attr(data-formula);color:rgba(141,232,230,.17);font-size:4.8rem;font-weight:900;transform:translate(-50%,-50%)}.particle-layer{position:absolute;z-index:5;inset:0;pointer-events:none}.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff4a1;box-shadow:0 0 10px #fff;animation:spark-burst 1s ease-out forwards}.canvas-controls{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:#8fa2c3;font-size:.6rem}.canvas-controls div{display:flex;align-items:center;gap:5px}.canvas-controls button{display:grid;width:25px;height:23px;place-items:center;border:1px solid #3c4f77;border-radius:5px;color:#d2def0;background:#172546}.canvas-controls strong{min-width:34px;text-align:center}.mission-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}.mission-actions button{padding:8px 12px;border:1px solid #40517c;border-radius:8px;color:#d9e5f7;background:#17274d;font-size:.66rem;font-weight:800}.mission-actions #check-button{border-color:#74e7e2;color:#073139;background:linear-gradient(135deg,#65e4de,#79b7ff)}.feedback{min-height:34px;margin:8px 0 0;padding:7px 9px;border-left:3px solid #5b79ba;color:#a8b8d3;background:#111e3d;font-size:.64rem;line-height:1.45}.feedback.success{border-color:var(--green);color:#bdf6d9}.feedback.error{border-color:var(--red);color:#ffc2ca}

/* Information and discoveries */.status-chip{padding:4px 7px;border-radius:99px;color:#a8b6cf;background:#243252;font-size:.54rem;font-weight:800}.status-chip.valid{color:#76edb4;background:#194b45}.status-chip.error{color:#ffb6bf;background:#512a41}.live-analysis{margin:12px 0}.live-analysis>div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #2b3c64}.live-analysis dt{color:#879abd;font-size:.61rem}.live-analysis dd{margin:0;color:#f1f5ff;text-align:right;font-size:.67rem;font-weight:800}.knowledge-card{padding:13px;border:1px solid #4c5490;border-radius:12px;background:linear-gradient(145deg,#262858,#18234b);animation:card-reveal .45s ease}.molecule-badge{display:grid;width:70px;height:70px;margin:4px auto 8px;place-items:center;border:1px solid #917de5;border-radius:50%;color:#fff1a7;background:radial-gradient(circle,#7057b7,#292451);box-shadow:0 0 22px rgba(142,108,244,.34);font-family:Georgia,serif;font-size:1.25rem;font-weight:900}.knowledge-card h3{margin:0;text-align:center;font-size:1rem}.knowledge-card>p{color:#a9b8d2;font-size:.64rem;line-height:1.5}.knowledge-card dl{margin:8px 0}.knowledge-card dl div{display:flex;justify-content:space-between;gap:7px;padding:4px 0;border-bottom:1px solid #343d6b;font-size:.58rem}.knowledge-card dd{margin:0;text-align:right}.knowledge-card h4{margin:9px 0 0;color:#d8dfff;font-size:.67rem}.achievement-box{margin-top:12px;padding-top:10px;border-top:1px solid #2c3d63}.achievement-list{display:flex;flex-wrap:wrap;gap:4px}.achievement{padding:4px 6px;border:1px solid #394565;border-radius:99px;color:#657493;background:#111c37;font-size:.5rem;filter:grayscale(1)}.achievement.unlocked{border-color:#c6a75b;color:#ffe08a;background:#443921;filter:none;animation:badge-pop .45s ease}

/* Modals and journal */.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:17px;opacity:0;pointer-events:none;background:rgba(5,9,24,.78);backdrop-filter:blur(8px);transition:opacity .22s}.modal.visible{opacity:1;pointer-events:auto}.modal-card{width:min(465px,100%);padding:27px;border:1px solid #4b5f93;border-radius:20px;background:linear-gradient(145deg,#26376b,#111c3a);box-shadow:0 24px 65px rgba(0,0,0,.58);text-align:center}.modal-icon{font-size:3rem}.modal-card h2{margin:5px 0 9px;font-family:Georgia,"Noto Serif Thai",serif}.modal-card>p:not(.eyebrow){margin:0;color:#b0bfda;font-size:.82rem;line-height:1.62}.modal-actions{display:flex;justify-content:center;gap:7px;margin-top:17px}.modal-actions button{min-width:135px;padding:10px 14px;border:1px solid #71e2df;border-radius:8px;color:#092d38;background:#64dcda;font-weight:900}.modal-actions #modal-secondary{border-color:#56698f;color:#d5def0;background:#1c2a4e}.modal-rewards{display:flex;justify-content:center;gap:6px;margin-top:13px}.reward-chip{padding:6px 8px;border:1px solid #665f9b;border-radius:7px;color:#fff0a7;background:#302d60;font-size:.65rem;font-weight:800}.journal-card{width:min(850px,100%);max-height:86vh;overflow:auto;text-align:left}.journal-heading{display:flex;align-items:flex-start;justify-content:space-between}.journal-heading h2{margin:0}.journal-heading button{border:0;color:#dbe4f4;background:transparent;font-size:1rem}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.journal-entry{padding:11px;border:1px solid #3a4d7b;border-radius:10px;background:#142344}.journal-entry.locked{filter:grayscale(1);opacity:.5}.journal-entry b{display:block;color:#ffe98b;font-family:Georgia,serif;font-size:1.05rem}.journal-entry strong{font-size:.7rem}.journal-entry p{margin:4px 0 0;color:#9faecc;font-size:.56rem;line-height:1.4}

@keyframes electron-orbit{to{transform:rotate(360deg)}}@keyframes electron-pulse{to{transform:translateX(67px) scale(.7)}}@keyframes bond-glow{to{filter:drop-shadow(0 0 8px #78e8ff);stroke:#e6fbff}}@keyframes atom-shake{20%,60%{margin-left:-6px}40%,80%{margin-left:6px}}@keyframes atom-celebrate{50%{filter:brightness(1.35);transform:translate(-50%,-50%) scale(calc(var(--zoom,1) * 1.08))}}@keyframes spark-burst{to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.1)}}@keyframes card-reveal{from{opacity:0;transform:translateY(10px)}}@keyframes badge-pop{50%{transform:scale(1.12)}}
@media(max-width:1060px){.game-header{grid-template-columns:1fr auto;gap:8px}.brand{order:-1}.hud{grid-column:1/-1;grid-row:2;justify-content:center}.header-actions{grid-column:2;grid-row:1}.lab-layout{grid-template-columns:180px 1fr}.information-panel{grid-column:1/-1}.live-analysis{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}.knowledge-card{max-width:560px;margin:auto}}@media(max-width:720px){.game-shell{padding:9px 7px 22px}.back-link span{display:none}.hud>div{min-width:48px;padding:4px}.hud span{font-size:.43rem}.hud strong{font-size:.72rem}.header-actions button:first-child{font-size:0}.header-actions button:first-child::after{content:"📖";font-size:1rem}.lab-layout{grid-template-columns:1fr}.atom-library,.information-panel{grid-column:auto}.atom-list{grid-template-columns:repeat(4,1fr)}.atom-source{min-height:57px}.building-area{min-height:420px}.mission-bar{display:block}.difficulty-switch{margin-top:8px}.bond-toolbar{margin-right:-5px;margin-left:-5px}.live-analysis{grid-template-columns:repeat(2,1fr)}.journal-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:430px){.atom-list{grid-template-columns:repeat(3,1fr)}.builder-panel,.atom-library,.information-panel{padding:11px;border-radius:13px}.building-area{min-height:370px}.difficulty-switch button{flex:1;padding:5px 3px}.mission-actions button{flex:1}.journal-grid{grid-template-columns:1fr}.modal-card{padding:23px 14px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}