@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0c0d0f;--panel:#15171b;--panel2:#1c1f25;--text:#f4f2ea;--muted:#9da3ad;--lime:#c8ff39;--orange:#ff6b2c;--line:#2a2e35;--danger:#ff4d6d}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'Manrope',sans-serif}body{background:radial-gradient(circle at 10% 0%,rgba(200,255,57,.07),transparent 30rem),radial-gradient(circle at 90% 20%,rgba(255,107,44,.08),transparent 28rem),var(--bg)}
a{color:inherit}.app-shell{width:min(1180px,100%);margin:auto;padding:24px}.app-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0 22px;border-bottom:1px solid var(--line)}.brand{font-family:'Bungee';font-size:22px;letter-spacing:.06em;text-decoration:none}.brand i{display:inline-block;width:11px;height:11px;background:var(--lime);box-shadow:14px 0 var(--orange);margin-right:22px}.top-actions{display:flex;gap:8px}.ghost-btn,.lang-btn,.control-btn,.primary-btn{appearance:none;border:1px solid var(--line);background:#111318;color:var(--text);border-radius:6px;min-height:42px;padding:0 14px;font:800 12px 'Manrope';cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.ghost-btn:hover,.lang-btn:hover,.control-btn:hover{border-color:var(--lime)}.primary-btn{border:0;background:var(--lime);color:#0b0d0e;box-shadow:5px 5px 0 var(--orange)}
.hero-mini{padding:34px 0 26px}.eyebrow{color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.2em}.hero-mini h1{font-family:'Bungee';font-size:clamp(34px,6vw,64px);line-height:1;margin:10px 0 14px}.hero-mini p{color:var(--muted);max-width:760px;line-height:1.65;margin:0}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.game-stage{background:#0f1114;border:1px solid var(--line);padding:18px;min-height:520px;display:grid;place-items:center}.game-stage canvas{display:block;max-width:100%;height:auto;background:#090a0c;border:1px solid #31353d;touch-action:none}.side-panel{display:grid;gap:12px}.panel{background:var(--panel);border:1px solid var(--line);padding:18px}.panel h2,.panel h3{font-family:'Bungee';margin:0 0 12px}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{padding:13px;background:#0f1114;border:1px solid #282c33}.stat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.stat strong{display:block;font-family:'Bungee';font-size:22px;margin-top:5px;color:var(--lime)}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.controls .wide{grid-column:span 3}.control-btn{min-height:48px;font-size:16px}.help{font-size:12px;color:var(--muted);line-height:1.6}.status{margin-top:12px;padding:11px 12px;background:#111318;border-left:3px solid var(--lime);font-size:12px;color:var(--muted)}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:56px}.tool-card{background:var(--panel);border:1px solid var(--line);padding:22px;scroll-margin-top:20px}.tool-card h2{font-family:'Bungee';font-size:24px;margin:0 0 8px}.tool-card>p{color:var(--muted);font-size:13px;line-height:1.6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:7px}.field.wide{grid-column:1/-1}.field span{font-size:11px;font-weight:800;color:var(--muted)}input,select,textarea{width:100%;border:1px solid #363b44;background:#0d0f12;color:var(--text);border-radius:5px;padding:12px;font:600 14px 'Manrope';outline:none}input,select{min-height:46px}textarea{min-height:150px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--lime);box-shadow:0 0 0 2px rgba(200,255,57,.08)}.tool-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.result-box{margin-top:16px;background:#0e1013;border:1px solid #292d34;padding:16px}.result-box[hidden]{display:none}.result-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #252930;padding:10px 0}.result-row:first-child{border-top:0}.result-row span{color:var(--muted);font-size:12px}.result-row strong{color:var(--lime)}.small-note{color:var(--muted);font-size:11px;line-height:1.55;margin-top:12px}.qr-preview{display:grid;place-items:center;min-height:220px;background:#fff;margin-top:16px}.qr-preview img{max-width:220px;width:100%;height:auto}.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.counter-grid .stat strong{font-size:18px}.upload-preview{display:none;max-width:100%;margin-top:12px;border:1px solid var(--line)}
.memory-board{display:grid;grid-template-columns:repeat(4,minmax(64px,110px));gap:10px;justify-content:center}.memory-card{aspect-ratio:1;border:1px solid #30343c;background:#15181d;color:transparent;display:grid;place-items:center;font-size:34px;border-radius:8px;cursor:pointer;transform-style:preserve-3d;transition:transform .18s,background .18s}.memory-card.is-open,.memory-card.is-matched{background:#f1efe6;color:#111}.memory-card.is-matched{outline:3px solid var(--lime);opacity:.86}
.snake-wrap{display:grid;place-items:center}.snake-touch-wrap{position:relative;width:min(100%,560px)}.snake-canvas{width:100%;aspect-ratio:1}.snake-touch-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:calc(100% - 24px);padding:8px 10px;border-radius:6px;background:rgba(12,13,15,.82);color:#c8ff39;text-align:center;font-size:11px;font-weight:800;pointer-events:none}.mobile-scorebar{display:none;width:100%;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}.mobile-scorebar span{display:grid;gap:2px;padding:7px 9px;background:#111318;border:1px solid var(--line);border-radius:5px}.mobile-scorebar small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.mobile-scorebar strong{font-family:'Bungee';font-size:15px;color:var(--lime)}.mobile-playbar{display:none;width:100%;margin-bottom:12px}.mobile-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}.snake-mobile-controls{grid-template-columns:repeat(3,1fr)}.mobile-playbar .control-btn{min-height:52px;font-size:20px}.mobile-playbar .mobile-start{width:100%;min-height:52px;font-size:15px}.mobile-drop{font-size:12px!important}
.footer{border-top:1px solid var(--line);padding:24px 0 38px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:12px}
@media(max-width:850px){.game-layout{grid-template-columns:1fr}.side-panel{grid-template-columns:1fr 1fr}.tools-grid{grid-template-columns:1fr}.app-shell{padding:18px}.game-stage{min-height:auto}.memory-board{grid-template-columns:repeat(4,minmax(58px,1fr))}.mobile-game-controls-first .side-panel{order:3;grid-template-columns:1fr}.mobile-game-controls-first .game-stage{order:1;display:flex;flex-direction:column;align-items:center}.mobile-game-controls-first .side-panel .panel:nth-child(2){display:none}.mobile-game-controls-first .side-panel .panel:first-child{order:1}.mobile-game-controls-first .mobile-scorebar{display:grid;order:0}.mobile-game-controls-first .mobile-playbar{display:block;order:2;margin-top:12px;margin-bottom:0}.mobile-game-controls-first #game{width:min(58vw,230px);height:auto;order:1}.mobile-game-controls-first .snake-touch-wrap{width:min(78vw,360px);order:1}.mobile-game-controls-first .snake-canvas{width:100%;height:auto}.mobile-game-controls-first .mobile-playbar .mobile-start{width:100%;min-height:54px;font-size:15px}.mobile-game-controls-first .mobile-playbar .control-btn{min-height:56px;font-size:22px}}
@media(max-width:560px){.brand{font-size:18px}.ghost-btn{padding:0 10px}.hero-mini{padding:20px 0 16px}.hero-mini h1{font-size:34px;margin-bottom:8px}.hero-mini p{font-size:14px;line-height:1.45}.side-panel{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.counter-grid{grid-template-columns:1fr 1fr}.game-stage{padding:10px;display:flex;flex-direction:column;align-items:center}.mobile-playbar{display:block}.memory-board{gap:7px}.memory-card{font-size:26px}.footer{flex-direction:column}.top-actions{gap:5px}.lang-btn,.ghost-btn{min-height:38px;font-size:10px}.mobile-game-controls-first .mobile-playbar{position:sticky;bottom:0;z-index:20;background:#0f1114;padding:8px 0 4px}}