*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#020006;--surface:#0d0d1f;--surface2:#1a0d2e;--accent:#d0f;--accent-dim:#dd00ff26;--accent-cyan:#0ef;--text:#fff;--text-muted:#89b;--radius:14px}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;justify-content:center;min-height:100vh;font-family:Arial,sans-serif;display:flex;overflow-x:hidden}#app{width:100%;max-width:480px;padding-top:max(20px, env(safe-area-inset-top,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-bottom:max(40px, env(safe-area-inset-bottom,0px));padding-left:max(16px, env(safe-area-inset-left,0px));flex-direction:column;gap:20px;display:flex}header{text-align:center;padding:8px 0 4px}.title{letter-spacing:4px;color:var(--accent);text-shadow:0 0 20px var(--accent), 0 0 40px #dd00ff80;font-size:36px;font-weight:900}.logo-menu{width:320px;max-width:100%;height:auto;margin:0 auto 8px;display:block}.hero-card{background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius);cursor:pointer;text-align:left;width:100%;color:var(--text);padding:28px 24px 22px;font-family:Arial,sans-serif;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;box-shadow:0 0 20px #dd00ff40,0 0 40px #00eeff14}.hero-card:hover{border-color:var(--accent-cyan);transform:translateY(-3px);box-shadow:0 0 30px #d0f6,0 0 60px #00eeff26}.hero-card:active{transform:translateY(0)scale(.98)}.ascii{letter-spacing:1px;text-align:center;white-space:pre;pointer-events:none;margin-bottom:16px;font-family:Courier New,monospace;font-size:11px;line-height:1.5}.ascii s{text-decoration:none}.aw{color:#06c}.ac{color:#d0f}.as{color:#f08}.hero-badge{background:var(--accent);color:#fff;letter-spacing:1px;text-transform:uppercase;border-radius:20px;margin-bottom:10px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-block}.hero-name{letter-spacing:1px;overflow-wrap:break-word;font-size:28px;font-weight:900;line-height:1.1}.hero-desc{color:var(--text-muted);margin-top:6px;font-size:14px}.hero-score{color:var(--text-muted);margin-top:12px;font-size:13px}.hero-score span{color:var(--accent);font-size:15px;font-weight:700}.hero-score.muted{color:#333d52}.hero-play{background:var(--accent);color:#fff;letter-spacing:1px;border-radius:8px;margin-top:16px;padding:8px 22px;font-size:14px;font-weight:700;display:inline-block}.hero-particles{pointer-events:none;position:absolute;inset:0;overflow:hidden}.particle{background:#dd00ff80;border-radius:50%;width:3px;height:3px;animation:linear infinite fall;position:absolute;top:-8px;box-shadow:0 0 6px #d0fc}@keyframes fall{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1}90%{opacity:.6}to{opacity:0;transform:translateY(220px)}}.section{flex-direction:column;gap:10px;display:flex}.section-title{letter-spacing:3px;text-transform:uppercase;color:#d0f9;padding-left:4px;font-size:11px;font-weight:700}.game-card{background:var(--surface);border-radius:var(--radius);cursor:pointer;text-align:left;width:100%;min-height:56px;color:var(--text);border:1.5px solid #dd00ff4d;align-items:center;gap:12px;padding:14px 16px;font-family:Arial,sans-serif;transition:border-color .2s,transform .1s,box-shadow .2s;display:flex}.game-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 0 20px #dd00ff4d,0 0 40px #00eeff1a}.game-card:active{transform:translateY(0)scale(.98)}.card-left{flex:1;min-width:0}.card-name{overflow-wrap:break-word;font-size:16px;font-weight:700}.card-desc{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:12px;overflow:hidden}.card-right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:4px;display:flex}.card-score{color:var(--accent);font-size:15px;font-weight:700}.card-score.muted{color:#333d52;font-size:18px}.card-badge{color:#00eeffb3;white-space:nowrap;background:#00eeff14;border:1px solid #00eeff4d;border-radius:4px;padding:2px 7px;font-size:10px}.extras-wrap{flex-direction:column;gap:10px;display:flex}.extras-toggle{color:#d0f9;cursor:pointer;background:0 0;border:1.5px dashed #dd00ff4d;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:11px 16px;font-family:Arial,sans-serif;font-size:13px;transition:border-color .2s,color .2s,background .2s;display:flex}.extras-toggle:hover{border-color:var(--accent);color:var(--accent);background:#dd00ff14}.extras-toggle:active{transform:scale(.98)}.extras-count{width:20px;height:20px;color:var(--accent);background:#d0f3;border:1px solid #d0f6;border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:inline-flex}.extras-list{flex-direction:column;gap:10px;display:none}.extras-list.open{display:flex}.main-settings-wrap{flex-direction:column;gap:12px;display:flex}.main-settings-trigger{width:100%;color:var(--text);cursor:pointer;background:linear-gradient(135deg,#dd00ff29,#00eeff12),#0d0d1ff5;border:1px solid #dd00ff52;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;font-family:Arial,sans-serif;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;display:flex;box-shadow:inset 0 0 0 1px #00eeff0a,0 12px 24px #00000047,0 0 28px #dd00ff29}.main-settings-trigger:hover{background:linear-gradient(135deg,#dd00ff38,#00eeff1c),#0d0d1ffa;border-color:#00eeffb8;transform:translateY(-2px);box-shadow:inset 0 0 0 1px #00eeff14,0 14px 28px #00000057,0 0 36px #dd00ff3d}.main-settings-trigger:active{transform:translateY(0)scale(.99)}.main-settings-trigger:focus-visible,.settings-toggle:focus-visible,.settings-back:focus-visible{outline-offset:3px;outline:2px solid #00eeffe6}.main-settings-trigger-label{letter-spacing:.18em;text-transform:uppercase;color:#f8e8ff;text-shadow:0 0 10px #dd00ff59;font-size:14px;font-weight:800}.main-settings-trigger-pill{color:#00eeffeb;letter-spacing:.12em;text-transform:uppercase;background:#00eeff14;border:1px solid #00eeff59;border-radius:999px;justify-content:center;align-items:center;padding:5px 10px;font-size:11px;font-weight:700;display:inline-flex}.main-settings-panel{padding:0 2px;display:none}.main-settings-panel.open{display:block}.settings-card{background:radial-gradient(circle at 0 0,#00eeff14,#0000 40%),linear-gradient(#0a0c1afa,#060612fa);border:1px solid #00eeff29;border-radius:18px;flex-direction:column;gap:14px;padding:18px;display:flex;box-shadow:0 16px 36px #0000006b,0 0 40px #00eeff14}.settings-title{letter-spacing:.3em;text-transform:uppercase;color:#00eeffb8;font-size:11px;font-weight:800}.settings-row{background:#ffffff08;border:1px solid #dd00ff26;border-radius:14px;justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:14px 14px 14px 16px;display:flex}.settings-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.settings-label{color:#fff;font-size:15px;font-weight:800}.settings-hint{color:#8899bbe6;font-size:12px;line-height:1.35}.settings-toggle,.settings-back{cursor:pointer;border:1px solid #0000;border-radius:12px;max-width:100%;font-family:Arial,sans-serif;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}.settings-field{flex-shrink:0;align-items:center;gap:8px;display:flex}.settings-input{color:#fff;text-align:center;background:#03040ef2;border:1px solid #00eeff47;border-radius:12px;width:116px;padding:11px 12px;font:800 13px Arial,sans-serif;box-shadow:inset 0 0 0 1px #dd00ff14}.settings-input:focus-visible{outline-offset:2px;outline:2px solid #00eeffe6}.settings-unit{color:#00eeffc7;letter-spacing:.08em;font-size:12px;font-weight:700}.settings-toggle{color:#fff;letter-spacing:.08em;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;background:linear-gradient(135deg,#dd00ffeb,#ff0088eb);flex:0 auto;min-width:0;padding:12px 14px;font-size:13px;font-weight:800;box-shadow:0 10px 20px #dd00ff2e,inset 0 0 0 1px #ffffff0f}.settings-toggle:hover{transform:translateY(-1px);box-shadow:0 12px 24px #dd00ff3d,0 0 22px #00eeff24}.settings-toggle:active,.settings-back:active{transform:translateY(0)scale(.99)}.settings-toggle:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.settings-toggle[data-state=off]{background:linear-gradient(135deg,#500082eb,#1e0032eb);border-color:#dd00ff47}.settings-back{color:#ffffffeb;background:#dd00ff14;border-color:#dd00ff47;align-self:flex-end;min-width:118px;padding:11px 16px;font-size:13px;font-weight:700}.settings-back:hover{background:#00eeff1a;border-color:#00eeffa6;box-shadow:0 0 18px #00eeff1f}@media (width<=359px){.settings-row{flex-direction:column;align-items:stretch}.settings-field{width:100%}.settings-input{flex:auto;width:100%;min-width:0}.settings-toggle,.settings-back{width:100%}}@media (width<=420px){.main-settings-trigger{padding:13px 14px}.main-settings-trigger-label{font-size:13px}.settings-card{padding:15px}.settings-row{flex-direction:column;align-items:stretch}.settings-copy,.settings-field{width:100%}.settings-input{flex:auto;width:100%;min-width:0}.settings-toggle,.settings-back{width:100%}}footer{text-align:center;color:#89b6;font-size:12px}@media (width<=359px){.hero-card{padding:20px 14px 16px}.hero-name{font-size:22px}.game-card{gap:8px;padding:12px}.card-right{flex-shrink:1;min-width:0}.card-badge{text-overflow:ellipsis;max-width:100%;padding:2px 5px;font-size:9px;overflow:hidden}}