:root{
 --bg:#0b1220;--bg2:#172033;--surface:#f4f0e8;--surface2:#e6dfd2;--ink:#17202f;
 --muted:#667085;--accent:#ffb84a;--accent2:#55d6be;--danger:#e75c6f;--success:#39c989;
 --shadow:0 18px 50px rgba(0,0,0,.25);--radius:20px;
 --red:#ef5350;--blue:#4f8cff;--green:#41c878;--yellow:#f4c542;--purple:#9b6cff;--orange:#ff8a45;--cyan:#38c8d8;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:radial-gradient(circle at 50% -20%,#263650 0,#0b1220 52%);color:#fff}
body{overflow-x:hidden}
button{font:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:3px}
#app{min-height:100dvh}
#game-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;padding:clamp(10px,1.2vw,18px);padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
.top-hud{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 10px}
.brand{display:flex;align-items:center;gap:10px;min-width:210px}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#ffd166,#f28c38);box-shadow:inset 0 2px 3px #fff8,0 8px 18px #0005;display:grid;place-items:center;color:#182233;font-size:21px;font-weight:900}
.brand-title{font-weight:900;letter-spacing:-.04em;font-size:clamp(18px,2vw,25px)}
.brand-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#aab6ca}
.hud-stats{display:flex;gap:8px;flex:1;justify-content:center}
.stat{background:#ffffff10;border:1px solid #ffffff14;border-radius:14px;padding:7px 12px;min-width:82px;text-align:center}
.stat b{display:block;font-size:15px}.stat span{display:block;font-size:9px;color:#aab6ca;text-transform:uppercase;letter-spacing:.12em}
.hud-actions{display:flex;gap:7px}
.icon-btn,.tool-btn,.menu-btn,.primary-btn,.secondary-btn{border:0;cursor:pointer;transition:.16s ease;touch-action:manipulation}
.icon-btn{width:44px;height:44px;border-radius:13px;background:#ffffff12;color:#fff;border:1px solid #ffffff16;font-size:18px}
.icon-btn:hover,.tool-btn:hover,.menu-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.icon-btn:active,.tool-btn:active,.menu-btn:active{transform:translateY(1px)}
#game-layout{min-height:0;display:grid;grid-template-columns:minmax(190px,250px) minmax(420px,1fr) minmax(180px,230px);gap:clamp(10px,1.2vw,18px)}
.side-panel{background:linear-gradient(180deg,#f7f2e8,#ded6c8);border:1px solid #fff7;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);padding:14px;min-height:0;overflow:auto}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel-title h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0}.panel-title span{font-size:10px;color:var(--muted)}
.container-stack{display:grid;gap:9px}
.container-card{position:relative;padding:10px;border-radius:15px;background:#fff9;border:1px solid #fff;box-shadow:0 6px 14px #0001}
.container-card.active{box-shadow:0 0 0 2px var(--accent),0 8px 20px #0002}
.container-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:12px}
.container-color{display:flex;align-items:center;gap:7px}.swatch{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 1px 2px #fff8,0 1px 3px #0004}
.pips{display:flex;gap:4px;margin-top:8px}.pip{width:22px;height:9px;border-radius:8px;background:#c7c0b6}.pip.filled{background:var(--c);box-shadow:0 2px 6px color-mix(in srgb,var(--c),transparent 55%)}
.container-note{font-size:9px;color:var(--muted);margin-top:7px}
#puzzle-area{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius)}
.workshop-backdrop{position:absolute;inset:0;background:
 radial-gradient(circle at 30% 20%,#ffffff0b 0 2px,transparent 3px) 0 0/34px 34px,
 linear-gradient(90deg,#00000009 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(#00000008 1px,transparent 1px) 0 0/48px 48px,
 #283445;box-shadow:inset 0 0 80px #0005}
#puzzle-board{position:relative;width:min(92%,900px);height:min(88%,720px);aspect-ratio:1.38;border-radius:28px;background:linear-gradient(145deg,#d7b67d,#9a7049);box-shadow:inset 0 2px 1px #fff8,0 25px 45px #0007;overflow:hidden;touch-action:manipulation}
#puzzle-board:before{content:"";position:absolute;inset:10px;border-radius:22px;border:2px dashed #5b402a55;pointer-events:none}
.panel-piece{position:absolute;transform-origin:center;transition:filter .18s,transform .18s,opacity .28s;filter:drop-shadow(0 10px 8px #0005);z-index:var(--z)}
.panel-piece::before{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--panel-bg);border:2px solid #ffffff55;box-shadow:inset 0 2px 3px #fff6,inset 0 -7px 12px #0002}
.panel-piece.removed{animation:panelDrop .55s both}
.panel-piece.tutorial{box-shadow:0 0 0 4px #fff6}
.screw{position:absolute;width:44px;height:44px;margin:-22px;z-index:50;cursor:pointer;border:0;background:transparent;padding:0;touch-action:manipulation}
.screw.hit{width:56px;height:56px;margin:-28px}
.screw-core{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff9 0 7%,transparent 8%),linear-gradient(145deg,#fff8,#0002 45%,#0006),var(--c);border:2px solid #fff8;box-shadow:0 4px 7px #0006,inset 0 -3px 4px #0003;transition:.18s}
.screw-core:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#17202fdd;font-weight:1000;font-size:16px;text-shadow:0 1px #fff7}
.screw:hover .screw-core{transform:scale(1.12) rotate(8deg);filter:brightness(1.08)}
.screw.blocked .screw-core{filter:grayscale(.55) brightness(.75)}
.screw.selected .screw-core{box-shadow:0 0 0 4px #fff8,0 0 22px var(--c),0 5px 10px #0007;transform:scale(1.16)}
.screw .mini-label{position:absolute;top:41px;left:50%;transform:translateX(-50%);font-size:8px;background:#17202fcc;color:#fff;padding:2px 5px;border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:.15s}
.screw:hover .mini-label{opacity:1}
.path-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff8;z-index:2;box-shadow:0 0 8px #fff8}
.board-label{position:absolute;z-index:4;color:#4d3524aa;font-weight:900;font-size:10px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.board-badge{position:absolute;z-index:4;right:18px;top:16px;background:#17202fcc;color:#fff;border:1px solid #fff2;padding:7px 10px;border-radius:10px;font-size:10px;font-weight:800}
.storage-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.storage-slot{aspect-ratio:1;border-radius:12px;background:#c8c0b3;border:2px dashed #8f877b;display:grid;place-items:center;position:relative}
.storage-slot.filled{background:#f8f4ec;border-style:solid}
.storage-screw{width:25px;height:25px;border-radius:50%;background:var(--c);box-shadow:inset 0 2px 3px #fff8,0 3px 5px #0004;position:relative}
.storage-screw:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:900;color:#17202fbb}
.storage-meta{font-size:9px;color:var(--muted);margin-top:7px}
.tool-stack{display:grid;gap:8px}.tool-btn{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;text-align:left;padding:9px;border-radius:14px;background:#fff9;border:1px solid #fff;color:var(--ink)}
.tool-icon{width:34px;height:34px;border-radius:10px;background:#17202f;color:#fff;display:grid;place-items:center;font-size:17px}.tool-btn b{font-size:11px}.tool-btn small{display:block;color:var(--muted);font-size:9px}.tool-cost{font-size:9px;font-weight:900;color:#a15d1a}.tool-btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
.tool-help{font-size:9px;color:var(--muted);line-height:1.45;margin-top:10px}
#mobile-controls{display:none}
.menu-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#07101be8;backdrop-filter:blur(12px);pointer-events:auto!important}
.menu-card{width:min(760px,94vw);max-height:min(900px,94dvh);overflow:auto;background:linear-gradient(145deg,#fbf6ec,#d9d0c1);color:var(--ink);border-radius:30px;padding:clamp(22px,4vw,44px);box-shadow:0 35px 100px #0008;border:1px solid #fff;pointer-events:auto!important}
.menu-logo{display:flex;align-items:center;gap:14px}.menu-logo .brand-mark{width:60px;height:60px;font-size:29px}.menu-title{font-size:clamp(34px,6vw,64px);line-height:.9;letter-spacing:-.06em;font-weight:1000}.menu-sub{color:#6d675e;margin-top:7px;font-weight:700}
.menu-buttons{display:grid;gap:10px;margin-top:25px;max-width:390px}.menu-btn,.primary-btn,.secondary-btn{padding:13px 17px;border-radius:14px;font-weight:900;pointer-events:auto}.menu-btn,.primary-btn{background:linear-gradient(145deg,#ffcf6d,#f09a39);color:#17202f;box-shadow:0 7px 0 #bd7130,0 12px 20px #0002}.menu-btn:active,.primary-btn:active{box-shadow:0 3px 0 #bd7130;transform:translateY(4px)}.secondary-btn{background:#17202f;color:#fff}.menu-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.menu-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.pill{background:#17202f0d;border:1px solid #17202f18;padding:7px 10px;border-radius:10px;font-size:10px;font-weight:800}
.modal-card{position:relative;z-index:2;pointer-events:auto;width:min(620px,94vw);background:linear-gradient(145deg,#fbf6ec,#ddd4c5);color:var(--ink);border-radius:25px;padding:25px;box-shadow:0 35px 100px #0008}.modal-title{font-size:30px;font-weight:1000;letter-spacing:-.04em}.modal-text{color:#5e5a53;line-height:1.55}.modal-actions{position:relative;z-index:3;pointer-events:auto;display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-top:16px}.level-tile{min-height:70px;border-radius:14px;border:1px solid #17202f14;background:#fff8;color:var(--ink);font-weight:900;cursor:pointer}.level-tile small{display:block;color:#8b8479}.level-tile.locked{opacity:.42;cursor:not-allowed}.level-tile.current{box-shadow:0 0 0 3px #f0a23f}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.how-step{background:#fff8;border:1px solid #17202f12;border-radius:15px;padding:13px}.how-step b{display:block;margin-bottom:5px}.how-step p{margin:0;color:#686158;font-size:12px;line-height:1.45}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #17202f12}.toggle{min-width:64px}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:1500;background:#17202ff2;color:#fff;padding:10px 15px;border-radius:12px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.empty-note{color:#777066;font-size:10px;line-height:1.4}