/* «Шаурмафия vs Ролломафия» — аэрохоккей (sharya44.ru и Мафия Академия) */
.shg{--shg-ink:var(--ink,#10243d);--shg-muted:var(--muted,#5b6f86);--shg-surface:var(--surface,#fff);--shg-sunk:var(--sunk,#eef4fa);--shg-line:var(--line,#d5e1ee);--shg-accent:#0284c7;--shg-font:var(--font-display,system-ui,-apple-system,'Segoe UI',sans-serif)}
.shg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:999px;border:1px solid var(--shg-line);background:var(--shg-surface);color:var(--shg-ink);font:700 14px/1.2 var(--shg-font);cursor:pointer;text-decoration:none;transition:transform .2s,filter .2s}
.shg-btn:hover{transform:translateY(-2px)}.shg-btn:focus-visible{outline:3px solid var(--shg-accent);outline-offset:3px}.shg-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.shg-btn--ghost{background:transparent}
.shg-wrap{padding-block:8px}.shg{position:relative;margin:34px 0 0;padding:clamp(16px,3vw,28px);border-radius:26px;overflow:hidden;color:var(--shg-ink);background:linear-gradient(150deg,color-mix(in srgb,#ff7a4f 11%,var(--shg-surface)),color-mix(in srgb,#38bdf8 12%,var(--shg-surface)) 70%);border:1px solid color-mix(in srgb,#ff7a4f 28%,var(--shg-line));box-shadow:0 22px 60px -34px rgba(20,60,110,.55)}
.shg__head{display:grid;gap:8px;margin:0 0 18px}
.shg__badge{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font:800 11px/1 var(--shg-font);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#e8414b,#ff7a4f)}
.shg h2{margin:0;font:900 clamp(26px,4vw,40px)/1.05 var(--shg-font);letter-spacing:-.02em}
.shg h2 em{font-style:normal;color:#e8414b}.shg h2 span{color:#0284c7}
.shg__lead{margin:0;max-width:62ch;font-size:15px;line-height:1.5;color:var(--shg-muted)}
.shg__grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.shg__play{display:grid;gap:10px;width:100%;max-width:clamp(300px,50vh,420px);margin-inline:auto}
.shg__hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shg__cell{display:grid;gap:3px;padding:8px 10px;border-radius:14px;background:var(--shg-surface);border:1px solid var(--shg-line);min-width:0}
.shg__cell small{font:700 10px/1 var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--shg-muted)}
.shg__cell b{font:900 20px/1.1 var(--shg-font);font-variant-numeric:tabular-nums}
.shg__lives{display:flex;gap:5px;align-items:center;min-height:22px}
.shg-life{display:block;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2d0,#e8a43a 55%,#a1651a);box-shadow:0 2px 6px -2px rgba(160,100,20,.8);transition:transform .25s,opacity .25s}
.shg-life.is-lost{opacity:.22;transform:scale(.7);filter:grayscale(1)}
.shg__stage{position:relative}
#shgCanvas{display:block;width:100%;aspect-ratio:3/5;border-radius:22px;background:#dff2ff;border:3px solid #2a5da8;box-shadow:0 18px 44px -22px rgba(10,50,110,.7);touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#shgCanvas.is-playing{touch-action:none;cursor:none}
#shgCanvas:focus-visible{outline:3px solid var(--shg-accent);outline-offset:4px}
.shg__combo,.shg__power{position:absolute;left:10px;z-index:3;padding:7px 12px;border-radius:12px;font:800 12px/1 var(--shg-font);pointer-events:none}
.shg__combo{top:10px;color:#3b2400;background:linear-gradient(135deg,#ffd666,#ffb020);box-shadow:0 8px 22px -10px rgba(255,170,30,.9)}
.shg__power{bottom:10px;color:#fff;background:rgba(10,40,90,.82)}
.shg__combo[hidden],.shg__power[hidden]{display:none}
.shg-ov{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:12px;border-radius:22px;background:rgba(8,30,62,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.shg-ov[hidden]{display:none}
.shg-ov__card{width:min(100%,360px);max-height:100%;overflow:auto;padding:20px 18px 18px;border-radius:20px;text-align:center;color:#fff;background:linear-gradient(160deg,rgba(220,60,70,.96),rgba(20,80,150,.96));border:1px solid rgba(255,255,255,.4);box-shadow:0 24px 60px -20px rgba(0,10,30,.9)}
.shg-ov__eyebrow{display:block;margin:0 0 6px;font:800 11px/1 var(--font-mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:#ffe6a8}
.shg-ov__card h3{margin:0 0 10px;font:900 clamp(26px,7vw,36px)/1.05 var(--shg-font)}
.shg-ov__card h3 small{font-size:.55em;font-weight:700;opacity:.8}
.shg-ov__card p{margin:0 0 12px;font-size:14px;line-height:1.45;color:#eaf4ff}
.shg-new{color:#ffe27a}
.shg-ov__btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.shg-ov .shg-btn{color:#fff;border-color:rgba(255,255,255,.5)}.shg-ov .shg-btn--solid{color:#4b1209;background:linear-gradient(120deg,#ffe27a,#ffb347);border-color:transparent}
.shg-save{display:grid;gap:6px;margin:0 0 12px;text-align:left}
.shg-save label{font:700 12px/1 var(--shg-font);color:#ffe6a8}
.shg-save>div{display:flex;flex-wrap:wrap;gap:6px}.shg-save>div .shg-btn{flex:1 1 100%}
.shg-save input{flex:1 1 100%;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.95);color:#10243d;font:600 15px var(--shg-font)}
.shg-save__msg{margin:0!important;font-size:13px!important;color:#ffe6a8!important;text-align:left}
.shg__msg{margin:0;min-height:1.4em;text-align:center;font:600 13.5px/1.4 var(--shg-font);color:var(--shg-accent)}
.shg__tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.shg__tools .shg-btn{min-height:40px;padding:8px 16px}
.shg__hint{margin:0;font-size:12.5px;color:var(--shg-muted);text-align:center}
.shg__board{display:grid;gap:12px;padding:clamp(14px,2.4vw,20px);border-radius:20px;background:var(--shg-surface);border:1px solid var(--shg-line)}
.shg__board h3{margin:0;font:900 20px/1.1 var(--shg-font)}
.shg__tabs{display:flex;gap:6px;flex-wrap:wrap}
.shg__tabs button{min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid var(--shg-line);background:var(--shg-sunk);color:var(--shg-ink);font:700 13px var(--shg-font);cursor:pointer}
.shg__tabs button[aria-selected="true"]{background:linear-gradient(120deg,#e8414b,#ff7a4f);color:#fff;border-color:transparent}
.shg__rows{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.shg__rows li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--shg-sunk);border:1px solid transparent}
.shg__rows li b{font:700 15px var(--shg-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shg__rows li small{font-size:11.5px;color:var(--shg-muted)}
.shg__rows li strong{font:900 17px var(--shg-font);font-variant-numeric:tabular-nums}
.shg-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--shg-line);font:800 13px var(--shg-font)}
.shg__rows li.is-top:nth-child(1) .shg-rank{background:linear-gradient(135deg,#ffe27a,#e0a21a);color:#4b2c00}
.shg__rows li.is-top:nth-child(2) .shg-rank{background:linear-gradient(135deg,#f1f4f7,#aeb8c2);color:#27323c}
.shg__rows li.is-top:nth-child(3) .shg-rank{background:linear-gradient(135deg,#f3c39a,#c27a3e);color:#3d1f08}
.shg__rows li.is-me{border-color:#e8414b;background:color-mix(in srgb,#e8414b 10%,var(--shg-sunk))}
.shg__rows li.shg-empty{display:block;text-align:center;color:var(--shg-muted);font-size:14px}
.shg__rules{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.4;color:var(--shg-muted)}
.shg__rules li{padding-left:22px;position:relative}.shg__rules li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:10px;border-radius:50%;background:#e8414b}
.shg__rules li:nth-child(2)::before{background:#38bdf8}.shg__rules li:nth-child(3)::before{background:#ffb020}.shg__rules li:nth-child(4)::before{background:#6dbb4a}
@media(max-width:820px){.shg__grid{grid-template-columns:minmax(0,1fr)}.shg__rows li small{display:none}.shg__rows li{grid-template-columns:34px minmax(0,1fr) auto}}
@media(max-width:480px){.shg__cell{padding:7px 8px}.shg__cell b{font-size:18px}.shg-life{width:14px;height:14px}.shg-ov__card{padding:16px 14px 14px}.shg-ov__card p{font-size:13px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.shg-life{transition:none}}
.shg.is-nojs #shgCanvas{display:none}
.shg-save [hidden]{display:none!important}

.shg-teams{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:var(--shg-sunk);border:1px solid var(--shg-line)}
.shg-teams[hidden]{display:none}
.shg-teams__row{display:flex;justify-content:space-between;gap:10px;font:800 14px/1.2 var(--shg-font)}
.shg-teams__row i{font-style:normal;font-variant-numeric:tabular-nums}
.shg-teams .is-s{color:#e8414b}.shg-teams .is-r{color:#38a6ff}
.shg-teams__bar{height:10px;border-radius:999px;background:#38a6ff;overflow:hidden}
.shg-teams__bar span{display:block;height:100%;background:linear-gradient(90deg,#e8414b,#ff7a4f);transition:width .6s}
.shg-teams small{font-size:11.5px;color:var(--shg-muted)}
.shg__rows li.t-s .shg-rank{box-shadow:0 0 0 2px #e8414b}.shg__rows li.t-r .shg-rank{box-shadow:0 0 0 2px #38a6ff}