:root{--ink:#17292b;--cork:#c9a576;--paper:#fff9e9;--red:#d84c42;--cyan:#45a8ad;--gold:#eab64d;--green:#4e765c;--shadow:0 16px 38px rgba(40,34,26,.18)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#ddd2bd;color:var(--ink);font-family:"Avenir Next","Trebuchet MS",sans-serif}button,input{font:inherit}.game-shell{min-height:100vh;display:grid;grid-template-rows:78px minmax(545px,1fr) 180px;overflow:hidden}.topbar{display:grid;grid-template-columns:220px 1fr 170px 48px;align-items:center;gap:20px;padding:12px 30px;background:#16373a;color:#fff}.topbar>div:first-child{display:flex;flex-direction:column}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f1c968}.topbar strong{font-size:20px}.route{display:flex;justify-content:center;gap:8px}.route i{width:34px;height:8px;border-radius:99px;background:#476568}.route i.done{background:#efbe52}.route i.current{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}.readout{text-align:right;display:flex;flex-direction:column}.readout span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#b8d2d1}.readout b{color:#f1c968}.mute{width:42px;height:42px;border:1px solid #5f7c7e;border-radius:50%;background:#23494c;color:#fff;cursor:pointer}.lab{position:relative;padding:24px 34px 18px;background-color:var(--cork);background-image:radial-gradient(rgba(83,57,31,.16) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-position:0 0,5px 6px;background-size:12px 12px;overflow:hidden}.paper-label{position:absolute;z-index:3;left:48px;top:24px;display:flex;flex-direction:column;max-width:300px;padding:14px 20px;background:var(--paper);box-shadow:0 5px 12px rgba(43,30,16,.17);transform:rotate(-1.2deg)}.paper-label b{font:700 22px Georgia,serif}.paper-label span{font-size:12px;color:#5c645e}.arena{position:relative;height:390px;margin:0 0 12px;border:2px solid rgba(76,51,28,.28);border-radius:30px;background:rgba(255,248,222,.38);box-shadow:inset 0 0 40px rgba(86,59,30,.08)}.magnet{position:absolute;z-index:4;top:160px;width:176px;height:70px;display:flex;border-radius:14px;box-shadow:0 12px 20px rgba(53,40,26,.26);cursor:grab;touch-action:none;transition:left .15s ease-out,transform .2s ease-out}.magnet:focus-visible{outline:4px solid #fff;outline-offset:5px}.magnet i{display:grid;place-items:center;width:50%;color:#fff;font-style:normal;font-size:25px;font-weight:900;text-shadow:0 2px rgba(0,0,0,.2)}.magnet .north{background:var(--red);border-radius:12px 0 0 12px}.magnet .south{background:var(--cyan);border-radius:0 12px 12px 0}.magnet-a{left:14%}.magnet-b{left:68%;cursor:default}.magnet.reversed{transform:rotate(180deg)}.force-arrow{position:absolute;z-index:3;top:176px;font-size:40px;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.22);opacity:0;transition:opacity .15s,transform .15s}.force-arrow.on{opacity:1}.force-arrow#arrowA{left:40%}.force-arrow#arrowB{right:40%;transform:rotate(180deg)}.force-arrow.repel#arrowA{transform:rotate(180deg)}.force-arrow.repel#arrowB{transform:none}.material-tray{display:flex;gap:12px;align-items:center;min-height:82px;padding:10px 14px;border-radius:18px;background:rgba(88,60,31,.18)}.material{min-width:155px;min-height:56px;border:2px solid transparent;border-radius:13px;background:var(--paper);padding:9px 14px;text-align:left;cursor:pointer;box-shadow:0 5px 10px rgba(55,38,22,.13)}.material.selected{border-color:#173a3d;transform:translateY(-3px)}.material b{display:block;font-size:13px}.material small{color:#69706a}.material.tested:after{content:attr(data-result);float:right;font-size:11px;font-weight:900;color:#38705a}.distance-control{position:absolute;z-index:5;right:52px;bottom:28px;width:280px;padding:11px 15px;border-radius:15px;background:var(--paper);box-shadow:var(--shadow);display:none}.distance-control.on{display:block}.distance-control label{display:flex;justify-content:space-between;font-size:12px;font-weight:800}.distance-control input{width:100%;accent-color:#d74d43}.compass-grid{position:absolute;inset:0;display:none}.compass-grid.on{display:block}.compass{position:absolute;width:58px;height:58px;border:3px solid #143c3f;border-radius:50%;background:#fff8dc;box-shadow:0 5px 12px rgba(43,30,16,.15);cursor:pointer}.compass:before{content:"";position:absolute;left:25px;top:7px;width:4px;height:38px;border-radius:4px;background:linear-gradient(var(--red) 0 50%,#1d4050 50%);transform:rotate(var(--needle,0deg));transition:transform .3s ease-out}.compass.sampled{background:#d6eee2}.compass b{position:absolute;right:-15px;bottom:-12px;padding:2px 6px;border-radius:9px;background:#16373a;color:#fff;font-size:9px}.field-map{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}.field-map.on{display:block}.field-map path{fill:none;stroke:#315e5e;stroke-width:4;stroke-dasharray:9 8;opacity:.7}.field-map:after{content:"A direction map inferred from samples — not strings"}.maze{position:absolute;inset:0;display:none}.maze.on{display:block}.maze-path{position:absolute;left:16%;right:14%;top:48%;height:88px;border:18px solid rgba(45,77,70,.25);border-top:0;border-radius:0 0 60px 60px}.gate{position:absolute;width:25px;height:120px;border-radius:14px;background:#5d7c6a;box-shadow:inset 0 0 0 5px #345043}.gate-one{left:44%;top:120px}.gate-two{left:66%;top:190px}.bell{position:absolute;right:11%;top:142px;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:#eabd4d;border:5px solid #8b6724;font-weight:900}.puck{position:absolute;z-index:3;left:22%;top:165px;width:100px;height:72px;border-radius:38px;display:flex;overflow:visible;box-shadow:0 9px 16px rgba(44,32,20,.25);transition:left .45s ease-out,top .45s ease-out}.puck i{display:grid;place-items:center;width:50%;color:#fff;font-style:normal;font-weight:900}.puck i:first-child{background:var(--red);border-radius:38px 0 0 38px}.puck i:nth-child(2){background:var(--cyan);border-radius:0 38px 38px 0}.puck b{position:absolute;top:78px;width:120px;left:-10px;text-align:center;font-size:10px}.puck.step-1{left:46%;top:220px}.puck.step-2{left:67%;top:158px}.puck.step-3{left:82%;top:158px}.pad{position:absolute;z-index:4;top:286px;padding:10px 14px;border:2px dashed #173a3d;border-radius:14px;background:#fff9e9;cursor:pointer}.pad.left{left:4%}.pad.right{right:3%}.pad.selected{background:#173a3d;color:#fff}.impact{position:absolute;z-index:8;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);font:900 44px Georgia,serif;color:#fff;text-shadow:0 5px 12px rgba(0,0,0,.3);opacity:0}.impact.on{animation:impact .65s ease-out}.toast{position:absolute;z-index:9;right:32px;bottom:20px;padding:12px 18px;border-radius:13px;background:#173a3d;color:#fff;opacity:0;transform:translateY(7px);transition:.16s}.toast.on{opacity:1;transform:none}.lab.highlight-poles .magnet i{animation:pole .7s ease-in-out 2}.lab.demo .magnet{filter:drop-shadow(0 0 10px #fff)}.action-tray{display:grid;grid-template-columns:minmax(360px,.85fr) minmax(480px,1.15fr);align-items:center;gap:28px;padding:24px 38px;background:var(--paper);border-top:1px solid #d0c6b5}.mission-copy span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:#a43c32}.mission-copy h1{font:700 clamp(24px,2.3vw,36px)/1.06 Georgia,serif;margin:6px 0}.mission-copy p{margin:0;color:#68706a}.controls{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap}.choice,.primary,.quiet{min-height:48px;border:0;border-radius:14px;padding:12px 17px;font-weight:850;cursor:pointer;transition:transform .15s ease-out}.choice{background:#e6dfd1}.choice small{display:block;font-size:11px;color:#68706a}.primary{background:#173a3d;color:#fff}.primary.gold{background:#dca83f;color:#1b3030}.quiet{background:transparent;border:1px solid #c3b9a8}.choice:hover,.primary:hover,.quiet:hover{transform:translateY(-2px)}@keyframes impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}@keyframes pole{50%{filter:brightness(1.5);box-shadow:inset 0 0 0 5px #fff}}@media(max-width:900px){.game-shell{grid-template-rows:72px minmax(590px,1fr) auto}.topbar{grid-template-columns:1fr auto auto}.route{display:none}.readout{display:none}.lab{padding:20px}.arena{height:410px}.action-tray{grid-template-columns:1fr;padding:22px}.controls{justify-content:flex-start}.material-tray{overflow-x:auto}.magnet{width:140px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.maze-magnet{position:absolute;z-index:5;left:5%;top:205px;width:118px;height:48px;display:flex;border-radius:10px;box-shadow:0 8px 15px rgba(44,32,20,.25);transition:left .18s ease-out,transform .18s ease-out}.maze-magnet.right{left:84%}.maze-magnet.reversed{transform:rotate(180deg)}.maze-magnet i{display:grid;place-items:center;width:50%;color:#fff;font-style:normal;font-weight:900}.maze-magnet i:first-child{background:var(--red);border-radius:10px 0 0 10px}.maze-magnet i:nth-child(2){background:var(--cyan);border-radius:0 10px 10px 0}.maze-magnet b{position:absolute;top:54px;width:118px;text-align:center;font-size:10px}.lab.highlight-poles .maze-magnet i{animation:pole .7s ease-in-out 2}.lab.demo .maze-magnet{filter:drop-shadow(0 0 10px #fff)}.field-map text{font:700 16px "Avenir Next","Trebuchet MS",sans-serif;fill:#173a3d}
.material-target{position:absolute;z-index:3;left:67%;top:142px;width:124px;min-height:112px;display:grid;grid-template-columns:40px 1fr;align-items:center;gap:5px 10px;padding:12px;border:3px dashed rgba(23,58,61,.55);border-radius:20px;background:rgba(255,249,233,.88);box-shadow:0 8px 18px rgba(44,32,20,.16);transition:transform .22s ease-out,box-shadow .22s ease-out}.material-target[hidden]{display:none}.material-target span{grid-row:1/3;width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,#d85045,#923329);box-shadow:inset 0 0 0 5px rgba(255,255,255,.24),0 4px 8px rgba(44,32,20,.2)}.material-target b{font-size:12px}.material-target small{font-size:10px;color:#65706b}.material-target.is-attracted{transform:translateX(-54px) rotate(-5deg);box-shadow:0 8px 20px rgba(216,76,66,.35)}.material-target.is-still{border-style:solid;box-shadow:0 0 0 5px rgba(69,168,173,.22)}.material-target.is-still span{background:linear-gradient(145deg,#d7d9d5,#8d9796)}