:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf2ff;background:#10182b;font-synthesis:none}*{box-sizing:border-box}html{min-width:280px}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 6%,#263755 0,transparent 36%),radial-gradient(circle at 90% 40%,#25324b 0,transparent 36%),#10182b}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #8bdbe3;outline-offset:3px}.app{min-height:100vh;display:flex;flex-direction:column;max-width:1120px;margin:auto;padding:0 24px}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:11px;line-height:1.1}.brand strong{display:block;font-size:20px;letter-spacing:-.04em}.brand small{display:block;color:#a7b6cf;font-size:11px;margin-top:4px}.brand-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#253755;color:#ef7188;font-size:20px;position:relative}.brand-icon i{position:absolute;color:#5fd1cf;font-size:13px;top:2px;right:6px;font-style:normal}.top-actions{display:flex;gap:8px}.icon-button{width:44px;height:44px;border:1px solid #3a4964;border-radius:12px;background:#1b2942;color:#edf2ff;font-size:24px;display:grid;place-items:center}.icon-button:hover,.controls button:hover,.mode-switch button:hover{background:#31425e}main{flex:1}.intro{text-align:center;margin:32px 0 28px}.eyebrow{color:#69d1d3;font-size:11px;font-weight:800;letter-spacing:.19em}.intro h1{font-size:clamp(30px,5vw,54px);letter-spacing:-.055em;line-height:1.05;margin:13px 0 9px}.intro p{color:#b2c0d7;margin:0;font-size:15px}.game-card{background:linear-gradient(155deg,#1c2b46,#19263f 60%,#18243a);border:1px solid #34445f;border-radius:24px;box-shadow:0 24px 70px #0005;max-width:840px;margin:auto;overflow:hidden}.game-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 24px;border-bottom:1px solid #34445f}.mode-switch{display:flex;background:#111d32;border-radius:11px;padding:4px;gap:3px}.mode-switch button{border:0;background:transparent;color:#adbbcf;padding:10px 16px;min-height:42px;border-radius:8px;font-size:13px;font-weight:700}.mode-switch button.selected{background:#3f567a;color:#fff;box-shadow:0 2px 6px #0003}.difficulty-wrap{display:flex;align-items:center;gap:10px;color:#9dadc6;font-size:12px;font-weight:700}.difficulty-wrap select{appearance:none;background:#22324d;color:#fff;border:1px solid #455570;border-radius:9px;min-height:42px;padding:0 29px 0 12px;cursor:pointer}.game-meta{display:flex;justify-content:center;gap:clamp(18px,7vw,80px);padding:22px 16px 8px}.game-meta div{min-width:72px;text-align:center}.game-meta span{display:block;color:#95a9c7;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800}.game-meta strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;margin-top:3px}.board-wrap{overflow-x:auto;overflow-y:hidden;min-height:297px;padding:26px 12px 13px;scrollbar-width:thin}.board{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.8vw,18px);width:max-content;min-width:100%;margin:auto}.tube{position:relative;width:clamp(46px,7vw,64px);height:205px;border:0;background:transparent;padding:0;flex:none;transition:transform .18s ease,filter .18s ease}.tube:hover{transform:translateY(-5px)}.tube.selected{transform:translateY(-16px)}.tube.hint-source{filter:drop-shadow(0 0 12px #fff9);transform:translateY(-13px)}.tube.hint-target{filter:drop-shadow(0 0 12px #71e2dd)}.tube::after{content:"";position:absolute;inset:3px 0 0;border:4px solid #7388a8;border-top:0;border-radius:0 0 21px 21px;pointer-events:none;box-shadow:inset 0 -4px 8px #0003,0 8px 14px #0003}.tube::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:7px;background:#9aacc4;border-radius:5px;z-index:2}.tube-inner{position:absolute;left:7px;right:7px;bottom:8px;top:14px;display:flex;flex-direction:column-reverse;gap:3px}.piece{display:block;flex:1;max-height:40px;border-radius:8px;box-shadow:inset 0 2px 3px #fff5,inset 0 -5px 4px #0002,0 2px 3px #0003;position:relative}.piece::after{content:"";position:absolute;left:18%;right:18%;top:18%;height:3px;border-radius:99px;background:#fff5}.tube-number{position:absolute;top:100%;left:0;right:0;text-align:center;color:#8195b2;font-size:11px;padding-top:6px}.message{min-height:30px;color:#a9e6e3;text-align:center;font-size:13px;font-weight:700;padding:2px 12px}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px 18px 18px}.controls button,.modal button.action{border:1px solid #425672;background:#2a3b57;color:#edf2ff;border-radius:11px;padding:0 17px;min-height:46px;font-size:13px;font-weight:750}.controls button:disabled{opacity:.45;cursor:default}.controls button.primary,.modal button.primary{border-color:#5ad2d1;background:#6fd4d2;color:#102039}.controls button.primary:hover,.modal button.primary:hover{background:#91e1df}.how{border-top:1px solid #33435d;color:#9fb0c9;text-align:center;font-size:12px;margin:0;padding:16px 20px;line-height:1.45}.below{display:flex;align-items:center;justify-content:center;gap:9px;color:#8194b0;font-size:12px;padding:20px}.text-button{background:none;border:0;color:#9acbd3;text-decoration:underline;text-underline-offset:3px;padding:8px}.below span:last-child{max-width:60vw;text-align:center}footer{color:#7487a3;text-align:center;font-size:11px;padding:20px}footer span{margin:0 4px}.modal-backdrop{position:fixed;inset:0;background:#071020ba;display:grid;place-items:center;padding:18px;z-index:20}.hidden{display:none!important}.modal{background:#1c2b46;border:1px solid #425572;border-radius:20px;box-shadow:0 22px 80px #0009;width:min(100%,430px);max-height:calc(100vh - 36px);overflow:auto;padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal h2{font-size:23px;letter-spacing:-.03em;margin:0}.modal .icon-button{font-size:27px;flex:none}.modal p{color:#bdc9dc;line-height:1.55;font-size:14px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.modal .field{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #384a65}.modal .field label{color:#ccd8eb;font-size:14px}.modal select{background:#263b58;color:#fff;border:1px solid #516582;border-radius:9px;padding:10px;min-height:44px}.modal input[type=checkbox]{appearance:none;width:48px;height:28px;border-radius:20px;background:#53627c;position:relative;cursor:pointer;flex:none}.modal input[type=checkbox]::before{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}.modal input[type=checkbox]:checked{background:#69cfd0}.modal input[type=checkbox]:checked::before{transform:translateX(20px)}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.stat{background:#243650;border-radius:10px;padding:13px}.stat span{display:block;color:#9db0c9;font-size:11px}.stat strong{display:block;margin-top:6px;font-size:22px}.celebration{text-align:center;font-size:48px;margin:14px 0 3px}.modal .kbd{font-size:11px;color:#91a5bf;margin-top:18px}@media(max-width:650px){.app{padding:0 12px}.topbar{height:65px}.brand strong{font-size:17px}.brand small{font-size:9px}.top-actions{gap:5px}.intro{margin:23px 0 20px}.intro p{padding:0 12px;font-size:13px}.game-card{border-radius:18px}.game-toolbar{padding:12px;gap:8px}.mode-switch button{padding:8px 10px;font-size:11px}.difficulty-wrap{gap:5px;font-size:11px}.difficulty-wrap select{padding:0 7px;max-width:86px;font-size:11px}.game-meta{padding-top:16px}.board-wrap{min-height:250px;padding-top:20px}.tube{height:180px;width:clamp(44px,10vw,52px)}.tube-inner{left:6px;right:6px}.piece{max-height:34px}.controls{gap:7px;padding:8px 9px 15px}.controls button{flex:1 1 calc(50% - 10px);padding:0 8px;min-width:105px}.how{font-size:11px;padding:12px}.game-meta strong{font-size:19px}}@media(max-width:370px){.brand-icon{display:none}.game-toolbar{flex-direction:column;align-items:stretch}.difficulty-wrap{justify-content:center}.mode-switch{justify-content:center}.board-wrap{min-height:230px}.tube{width:44px;height:162px}.tube-inner{left:6px;right:6px;bottom:7px}.piece{max-height:29px}}
.board-scroll-hint{display:none;text-align:center;color:#9fb0c9;font-size:11px;padding:0 10px 8px}@media(max-width:370px){.game-card[data-difficulty="medium"] .board-scroll-hint,.game-card[data-difficulty="hard"] .board-scroll-hint{display:block}}