/* ════════════════════════════════════════════════════════════════════════ games.css — оформление раздела «Игры». Наследует визуальный язык терминала: те же токены, шрифты (JetBrains Mono / Orbitron), неоновые акценты, анимированная сетка-фон. Две схемы: тёмная и светлая, переключаются атрибутом [data-dash-theme] на (как в дашборде). ════════════════════════════════════════════════════════════════════════ */ :root { --bg0:#060810; --bg1:#0b0f1a; --bg2:#111827; --bg3:#1a2235; --green:#00ff88; --cyan:#00d4ff; --red:#ff3366; --yellow:#fbbf24; --purple:#a855f7; --text1:#f0f4ff; --text2:#8892b0; --text3:#374151; --border:rgba(255,255,255,.07); --card:rgba(11,15,26,.85); --radius:12px; --font:'JetBrains Mono',monospace; --head:'Orbitron',monospace; --glow-g:0 0 16px rgba(0,255,136,.35); --glow-c:0 0 16px rgba(0,212,255,.35); --glow-r:0 0 16px rgba(255,51,102,.35); --cell:rgba(255,255,255,.03); --cell-line:rgba(255,255,255,.05); --gold:#ffd54a; --silver:#cfd8e3; --bronze:#e0975a; } [data-dash-theme="light"] { --bg0:#e8edf5; --bg1:#f0f4fa; --bg2:#ffffff; --bg3:#e2e8f0; --text1:#0f172a; --text2:#475569; --text3:#94a3b8; --card:rgba(255,255,255,.9); --border:rgba(0,0,0,.08); --cell:rgba(2,8,40,.03); --cell-line:rgba(2,8,40,.06); --gold:#e0a400; --silver:#7c8797; --bronze:#c07434; } * { box-sizing:border-box; } html,body { height:100%; } body { font-family:var(--font); background:var(--bg0); color:var(--text1); margin:0; min-height:100vh; transition:background .3s,color .3s; overflow-x:hidden; } body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(0,255,136,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(0,255,136,.02) 1px,transparent 1px); background-size:44px 44px; animation:gridScroll 55s linear infinite; } [data-dash-theme="light"] body::before { background-image:linear-gradient(rgba(2,8,40,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(2,8,40,.035) 1px,transparent 1px); } @keyframes gridScroll { to { background-position:44px 44px; } } a { color:inherit; } h1,h2,h3 { font-family:var(--head); letter-spacing:1px; margin:0; } /* ── Header ──────────────────────────────────────────────────────────────── */ .g-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .g-brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text1); font-family:var(--head); font-weight:700; letter-spacing:2px; font-size:.92rem; } .g-brand img { width:26px; height:26px; } .g-brand:hover { color:var(--cyan); } .g-brand .ver { font-size:.55rem; color:var(--text2); letter-spacing:1px; } .g-header .spacer { flex:1; } .g-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; transition:.2s; font-size:1rem; } .g-iconbtn:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-c); } .g-back { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; text-decoration:none; transition:.2s; white-space:nowrap; } .g-back:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-c); } /* ── Layout wrappers ─────────────────────────────────────────────────────── */ .g-wrap { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:26px 20px 60px; } /* ── Hub hero ────────────────────────────────────────────────────────────── */ .g-hero { text-align:center; margin:14px 0 30px; } .g-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(0,212,255,.3); padding:5px 12px; border-radius:999px; background:rgba(0,212,255,.06); } .g-hero h1 { font-size:clamp(2rem,6vw,3.4rem); line-height:1.02; margin:16px 0 8px; background:linear-gradient(120deg,var(--green),var(--cyan) 60%,var(--purple)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 22px rgba(0,212,255,.18)); } .g-hero p { color:var(--text2); font-size:.9rem; max-width:560px; margin:0 auto; } /* ── Games grid ──────────────────────────────────────────────────────────── */ .g-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; } .g-card { position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); overflow:hidden; text-decoration:none; color:inherit; transition:transform .22s, border-color .22s, box-shadow .22s; display:flex; flex-direction:column; } .g-card.live:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 16px 40px -18px rgba(0,212,255,.5); } .g-card .thumb { height:150px; position:relative; overflow:hidden; background:radial-gradient(120% 120% at 20% 10%, rgba(0,212,255,.14), transparent 60%), radial-gradient(120% 120% at 90% 90%, rgba(168,85,247,.14), transparent 55%), var(--bg1); display:flex; align-items:center; justify-content:center; } .g-card .thumb .balls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .g-card .thumb .balls .coin-svg { filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); animation:floaty 4s ease-in-out infinite; } .g-card .thumb .balls .coin-svg:nth-child(2){ animation-delay:.5s } .g-card .thumb .balls .coin-svg:nth-child(3){ animation-delay:1s } .g-card .thumb .balls .coin-svg:nth-child(4){ animation-delay:1.5s } .g-card .thumb .balls .coin-svg:nth-child(5){ animation-delay:2s } @keyframes floaty { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } } .g-card .body { padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; gap:6px; } .g-card .body h3 { font-size:1.05rem; } .g-card .body p { color:var(--text2); font-size:.78rem; line-height:1.5; margin:0; flex:1; } .g-card .row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; } .g-tag { font-size:.6rem; letter-spacing:1.4px; text-transform:uppercase; padding:4px 9px; border-radius:6px; font-weight:700; } .g-tag.new { color:var(--bg0); background:var(--green); box-shadow:var(--glow-g); } .g-tag.soon { color:var(--text2); border:1px solid var(--border); background:transparent; } .g-play { display:inline-flex; align-items:center; gap:6px; color:var(--cyan); font-size:.72rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; } .g-card.soon { opacity:.62; } .g-card.soon .thumb { filter:grayscale(.5); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 16px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text1); font-family:var(--font); font-size:.76rem; font-weight:700; letter-spacing:.4px; cursor:pointer; transition:.18s; text-decoration:none; } .btn:hover { border-color:var(--cyan); color:var(--cyan); } .btn:disabled { opacity:.45; cursor:not-allowed; } .btn.primary { border-color:var(--green); background:linear-gradient(135deg,rgba(0,255,136,.14),rgba(0,212,255,.06)); color:var(--green); } .btn.primary:hover { box-shadow:var(--glow-g); } .btn.cyan { border-color:rgba(0,212,255,.5); color:var(--cyan); background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,255,136,.04)); } .btn.cyan:hover { box-shadow:var(--glow-c); } .btn.ghost { background:transparent; } .btn.sm { padding:6px 11px; font-size:.68rem; } /* ── Game page layout ───────────────────────────────────────────────────── */ .cl-top { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; } .cl-title { display:flex; align-items:center; gap:10px; } .cl-title h1 { font-size:1.3rem; } .cl-title .sub { color:var(--text2); font-size:.7rem; letter-spacing:1px; text-transform:uppercase; } .cl-diffs { display:flex; gap:8px; flex-wrap:wrap; } .diff-chip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:7px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; transition:.18s; min-width:104px; } .diff-chip .name { font-family:var(--head); font-weight:700; font-size:.78rem; color:var(--text1); } .diff-chip .meta { font-size:.6rem; letter-spacing:.4px; text-transform:uppercase; } .diff-chip:hover { border-color:var(--cyan); } .diff-chip.active { border-color:var(--cyan); background:linear-gradient(135deg,rgba(0,212,255,.14),rgba(0,255,136,.05)); box-shadow:var(--glow-c); } .diff-chip.active .meta { color:var(--cyan); } /* Stats + board container */ .cl-stage { display:grid; grid-template-columns:1fr; gap:16px; } .cl-hud { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .hud-box { display:flex; flex-direction:column; gap:1px; padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:var(--card); min-width:88px; } .hud-box .label { font-size:.58rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--text2); } .hud-box .val { font-family:var(--head); font-weight:800; font-size:1.15rem; color:var(--text1); } .hud-box.score .val { color:var(--green); } .hud-next { display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); } .hud-next .label { font-size:.58rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--text2); } .hud-next .slots { display:flex; gap:6px; } .hud-next .slots .coin-svg { filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); } .cl-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; } /* ── Board ───────────────────────────────────────────────────────────────── */ .board-wrap { position:relative; margin:0 auto; width:min(560px,94vw); max-width:560px; } .board { position:relative; width:100%; aspect-ratio:1/1; display:grid; gap:2px; padding:8px; border-radius:14px; grid-auto-rows:1fr; /* строки равны колонкам → все клетки одинаковы */ border:1px solid var(--border); background: radial-gradient(140% 140% at 30% 10%, rgba(0,212,255,.05), transparent 55%), var(--card); box-shadow:0 20px 60px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02); touch-action:manipulation; user-select:none; } .cell { position:relative; border-radius:7px; background:var(--cell); box-shadow:inset 0 0 0 1px var(--cell-line); cursor:pointer; min-width:0; min-height:0; /* клетка не растягивается под содержимое */ transition:background .12s; } .cell:hover { background:rgba(0,212,255,.08); } .cell.target-ok { background:rgba(0,255,136,.12); box-shadow:inset 0 0 0 1px rgba(0,255,136,.4); } .cell.path-dot::after { content:''; position:absolute; width:22%; height:22%; border-radius:50%; background:rgba(0,212,255,.55); box-shadow:0 0 8px rgba(0,212,255,.6); } .coin-svg { display:block; } /* Логотип лежит поверх клетки (absolute) → не влияет на размер клетки. inset задаёт «воздух» от краёв логотипа до краёв клетки. */ .cell .coin-svg { position:absolute; left:14%; top:14%; width:72%; height:72%; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); transition:transform .12s; } .cell.spawn .coin-svg { animation:spawnPop .32s cubic-bezier(.2,1.4,.5,1); } @keyframes spawnPop { 0%{ transform:scale(0) } 70%{ transform:scale(1.12) } 100%{ transform:scale(1) } } .cell.clearing .coin-svg { animation:clearPop .34s ease forwards; } @keyframes clearPop { 0%{ transform:scale(1); opacity:1 } 45%{ transform:scale(1.35); filter:brightness(1.6) } 100%{ transform:scale(0); opacity:0 } } /* Выбор шарика показываем ТОЛЬКО прыжком — без рамки/подсветки клетки. */ .cell.selected .coin-svg { animation:jump .5s ease-in-out infinite; } @keyframes jump { 0%,100%{ transform:translateY(0) } 30%{ transform:translateY(-22%) scale(1.06) } 50%{ transform:translateY(0) } } /* Летящая монета (анимация перемещения по траектории) */ .fly-coin { position:absolute; z-index:6; pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); } .traj-svg { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; } .traj-svg polyline { fill:none; stroke:rgba(0,212,255,.7); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 7; filter:drop-shadow(0 0 4px rgba(0,212,255,.6)); animation:trajDash .6s linear infinite; } @keyframes trajDash { to { stroke-dashoffset:-18; } } /* ── Toast (подсказки «ход невозможен») ──────────────────────────────────── */ .g-toast-host { position:fixed; left:50%; top:78px; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; } .g-toast { padding:10px 16px; border-radius:10px; font-size:.78rem; font-weight:600; background:var(--card); border:1px solid var(--border); color:var(--text1); backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(0,0,0,.6); display:flex; align-items:center; gap:9px; animation:toastIn .22s ease, toastOut .3s ease forwards; animation-delay:0s, 1.9s; } .g-toast.warn { border-color:rgba(251,191,36,.5); } .g-toast.warn i { color:var(--yellow); } .g-toast.err { border-color:rgba(255,51,102,.5); } .g-toast.err i { color:var(--red); } .g-toast.ok { border-color:rgba(0,255,136,.5); } .g-toast.ok i { color:var(--green); } @keyframes toastIn { from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:translateY(0) } } @keyframes toastOut { to{ opacity:0; transform:translateY(-8px) } } /* ── Modal ───────────────────────────────────────────────────────────────── */ .g-modal { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:18px; } .g-modal.open { display:flex; } .g-modal .overlay { position:absolute; inset:0; background:rgba(3,6,15,.66); backdrop-filter:blur(4px); } .g-modal .sheet { position:relative; z-index:1; width:min(520px,96vw); max-height:90vh; overflow:auto; border:1px solid var(--border); border-radius:16px; background:var(--bg1); box-shadow:0 30px 80px -30px rgba(0,0,0,.8); animation:sheetIn .24s cubic-bezier(.2,1,.4,1); } @keyframes sheetIn { from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } } .sheet-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); } .sheet-head h3 { font-size:1rem; } .sheet-head .spacer { flex:1; } .sheet-body { padding:16px 18px 20px; } .sheet-body .field { margin-bottom:14px; } .sheet-body label { display:block; font-size:.68rem; letter-spacing:.6px; text-transform:uppercase; color:var(--text2); margin-bottom:6px; } .g-input { width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text1); font-family:var(--font); font-size:.9rem; outline:none; transition:.18s; } .g-input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,212,255,.14); } .hint { font-size:.68rem; color:var(--text2); margin-top:6px; line-height:1.5; } .hint.err { color:var(--red); } .hint.ok { color:var(--green); } .seg { display:flex; gap:8px; } .seg .opt { flex:1; text-align:center; padding:10px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; font-size:.78rem; font-weight:700; transition:.16s; } .seg .opt.active { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.1); } .range-row { display:flex; align-items:center; gap:12px; } input[type=range] { flex:1; accent-color:var(--cyan); } .switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; } .switch { position:relative; width:46px; height:26px; flex-shrink:0; } .switch input { opacity:0; width:0; height:0; } .switch .track { position:absolute; inset:0; border-radius:20px; background:var(--bg3); transition:.2s; cursor:pointer; } .switch .track::before { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.3); } .switch input:checked + .track { background:linear-gradient(135deg,var(--green),var(--cyan)); } .switch input:checked + .track::before { transform:translateX(20px); } .notice { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:10px; font-size:.76rem; line-height:1.5; } .notice.info { border:1px solid rgba(0,212,255,.3); background:rgba(0,212,255,.06); color:var(--text1); } .notice.warn { border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.07); color:var(--text1); } .notice i { margin-top:2px; } /* ── Leaderboard ─────────────────────────────────────────────────────────── */ .lb-tabs { display:flex; gap:6px; padding:0 18px 12px; flex-wrap:wrap; } .lb-tabs .tab { flex:1; min-width:92px; padding:8px; border-radius:9px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; transition:.16s; text-align:center; } .lb-tabs .tab.active { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.1); } .lb-list { list-style:none; margin:0; padding:0 6px 6px; } .lb-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; } .lb-row + .lb-row { margin-top:3px; } .lb-row .rk { font-family:var(--head); font-weight:800; font-size:.9rem; color:var(--text2); text-align:center; } .lb-row .nk { font-weight:600; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-row .sc { font-family:var(--head); font-weight:800; color:var(--green); } .lb-row.me { background:rgba(0,212,255,.1); box-shadow:inset 0 0 0 1px rgba(0,212,255,.4); } .lb-row.leader { background:linear-gradient(90deg,rgba(255,213,74,.12),transparent); box-shadow:inset 0 0 0 1px rgba(255,213,74,.25); } .lb-row.leader.r1 .rk { color:var(--gold); } .lb-row.leader.r2 .rk { color:var(--silver); } .lb-row.leader.r3 .rk { color:var(--bronze); } .lb-row.leader .rk::after { font-size:.9rem; } .lb-empty { text-align:center; color:var(--text2); padding:30px 10px; font-size:.82rem; } .lb-me-foot { padding:10px 18px 16px; border-top:1px solid var(--border); font-size:.76rem; color:var(--text2); } /* ── Game-over / share result card ──────────────────────────────────────── */ .result-hero { text-align:center; padding:6px 0 12px; } .result-hero .big { font-family:var(--head); font-weight:900; font-size:2.6rem; color:var(--green); line-height:1; } .result-hero .lbl { font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:var(--text2); margin-top:6px; } .result-meta { display:flex; justify-content:center; gap:18px; margin:6px 0 14px; color:var(--text2); font-size:.76rem; } .result-meta b { color:var(--text1); } .share-canvas-wrap { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:14px; background:var(--bg0); } .share-canvas-wrap canvas { display:block; width:100%; height:auto; } .share-row { display:flex; gap:8px; flex-wrap:wrap; } .share-row .btn { flex:1; min-width:120px; } /* ── Loader ──────────────────────────────────────────────────────────────── */ .g-loader { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--bg0); transition:opacity .4s; } .g-loader.hide { opacity:0; pointer-events:none; } .g-loader .coin-svg { width:56px; height:56px; animation:spin 1.4s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width:640px) { .g-wrap { padding:18px 12px 48px; } .g-header { padding:10px 12px; gap:10px; } .g-brand span.txt { display:none; } .cl-actions { margin-left:0; width:100%; } .cl-actions .btn { flex:1; } .hud-box { flex:1; min-width:0; padding:7px 10px; } .board-wrap { width:min(96vw,520px); } .diff-chip { flex:1; min-width:0; } .g-back span { display:none; } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; } body::before { animation:none; } } /* ── Robustness: standalone coin renders (title, HUD next, hub) ──────────── */ .coin-thumb { display:inline-flex; width:40px; height:40px; flex:0 0 auto; } .coin-thumb .coin-svg { width:100%; height:100%; } .hud-next .slots .coin-svg { width:26px; height:26px; } .g-card .thumb .balls { width:100%; max-width:220px; } .g-card .thumb .balls .coin-svg { width:100%; height:auto; } #loaderCoin .coin-svg { width:56px; height:56px; animation:spin 1.4s linear infinite; }