/* ETO BOWL — оболочка в духе PlayStation 1: синие «окна» как в JRPG, рука-курсор,
   пиксельный шрифт с тенью, кнопки геймпада. Никаких современных скруглённых пилюль. */

@font-face {
  font-family: 'DotGothic16';
  src: url(vendor/fonts/dotgothic16-latin-400-normal.woff2) format('woff2'),
       url(vendor/fonts/dotgothic16-latin-400-normal.woff) format('woff');
  font-display: swap;
}

:root {
  --bg: #0a0618;
  --ink: #ffffff;
  --yellow: #ffe35a;
  --cyan: #7ff2ff;
  --pink: #ff6ec7;
  --win1: #2a2ae6;
  --win2: #10108e;
  --win3: #05053e;
  --edge: #f2f2ff;
  --px: 'DotGothic16', 'MS Gothic', 'Courier New', monospace;
  --logo: 'Arial Black', Impact, 'Helvetica Neue', Arial, sans-serif;
  --hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 16 9' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='5' height='1' fill='%23000'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='1' width='5' height='1' fill='%23fff'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='2' width='7' height='1' fill='%23fff'/%3E%3Crect x='10' y='2' width='5' height='1' fill='%23000'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='3' width='12' height='1' fill='%23fff'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='4' width='7' height='1' fill='%23fff'/%3E%3Crect x='10' y='4' width='5' height='1' fill='%23000'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='5' width='8' height='1' fill='%23fff'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23fff'/%3E%3Crect x='5' y='6' width='6' height='1' fill='%23b8b8d8'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='7' width='7' height='1' fill='%23b8b8d8'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='8' width='8' height='1' fill='%23000'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; color: var(--ink);
  font-family: var(--px); font-size: 16px; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  -webkit-font-smoothing: none; font-smooth: never; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: none; }
button, .menu-list li, .amp { pointer-events: auto; }
.hidden { display: none !important; }
.txt { text-shadow: 2px 2px 0 #000; letter-spacing: .06em; }

/* ------------------------------------------------------------ окно как в JRPG */
.win {
  position: relative;
  background: linear-gradient(160deg, var(--win1) 0%, var(--win2) 42%, var(--win3) 100%);
  border: 2px solid var(--edge);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), inset 0 0 0 2px #6a6af0, inset 0 0 0 4px #04043a;
  color: #fff; text-shadow: 2px 2px 0 #000; letter-spacing: .05em;
}
.win-title { font-size: 14px; color: var(--yellow); padding: 8px 18px 0; letter-spacing: .2em; }

/* кнопки геймпада */
.pad { display: inline-block; width: 1.45em; height: 1.45em; line-height: 1.3em; text-align: center; border-radius: 50%;
  border: 2px solid currentColor; font-style: normal; font-size: .85em; text-shadow: none; background: rgba(0,0,0,.45); vertical-align: middle; margin: 0 .15em; }
.pad.x { color: #7a9bff; } .pad.cir { color: #ff6d6a; } .pad.tri { color: #4fe3b0; } .pad.sqr { color: #ff8fd2; }
.pad.dp { color: #d8d8f0; border-radius: 6px; }

/* ------------------------------------------------------------ экраны */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: safe center; gap: 1.2rem; padding: 4vh 4vw; text-align: center; }

.ps-logo {
  font: 900 italic clamp(3.4rem, 15vw, 9.5rem)/.86 var(--logo);
  letter-spacing: -.02em; margin: 0; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0 36%, #d5dbff 36% 50%, #7a88ff 50% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #14104c;
  filter: drop-shadow(5px 6px 0 #ff3fa6) drop-shadow(10px 12px 0 rgba(0,0,0,.5));
  transform: skewX(-6deg);
}
/* Вырезанные стикеры: чёрная печать, белый контур, жёсткая тень (фильтры #cutout и #cutout-s в index.html) */
.cut { filter: url(#cutout); color: #0e0c16; }
.cut-s { filter: url(#cutout-s); color: #0e0c16; }
.cut-logo { margin: 0; font: 900 clamp(3.4rem, min(14vw, 21vh), 8.6rem)/.8 var(--logo); text-transform: uppercase; letter-spacing: -.03em;
  color: #0e0c16; filter: url(#cutout); transform: rotate(-3deg); }
.cut-logo .ln { display: block; }
.cut-logo i { display: inline-block; font-style: normal; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
#titleStk { position: absolute; inset: 0; pointer-events: none; }      /* не участвует в раскладке титула: логотип остаётся вверху, плашки внизу */
#titleStk img, .stk { position: absolute; pointer-events: none; image-rendering: auto; }
.cut-mini { font: 900 clamp(2.4rem, 8vw, 4rem)/1 var(--logo); text-transform: uppercase; letter-spacing: -.02em; color: #0e0c16; filter: url(#cutout-s); transform: rotate(-3deg); }
.ps-logo.small { font-size: clamp(2.4rem, 8vw, 4rem); filter: drop-shadow(3px 4px 0 #ff3fa6); }
.logo-top { font-size: clamp(.8rem, 2vw, 1.1rem); letter-spacing: .4em; color: var(--cyan); margin-bottom: 1rem; }
.logo-sub { font-size: clamp(1rem, 2.6vw, 1.4rem); letter-spacing: .3em; margin-top: 1.2rem; transform: rotate(-2deg); font-family: var(--logo); font-weight: 900; text-transform: uppercase; }
.ps-h { font: 900 italic clamp(1.4rem, 4.4vw, 2.6rem)/1 var(--logo); margin: 0; color: #0e0c16;
  filter: url(#cutout-s); transform: rotate(-1.5deg); }

.press { font: 400 clamp(1.3rem, 3.6vw, 2rem)/1 var(--px); letter-spacing: .24em; color: #fff;
  background: none; border: 0; cursor: pointer; padding: .6em 1.2em; text-shadow: 3px 3px 0 #000; }
.blink { animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: 1 } 55% { opacity: 0 } 100% { opacity: 1 } }
/* титул: две тихие кнопки под START */
.title-sub { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: -1.2rem; }
.tsb { font: 400 clamp(11px, 2.2vw, 14px)/1 var(--px); color: #c8c8ff; padding: 8px 14px; cursor: pointer; letter-spacing: .14em; }
.tsb:active { transform: translate(1px, 1px); }
.tiny { font-size: 11px; line-height: 1.5; color: #b5aad8; margin: 0; position: absolute; bottom: 2.2vh; letter-spacing: .08em; }

#title { justify-content: space-between; padding-top: 3vh; padding-bottom: 12vh; }
#title .logo-wrap, #title .press { position: relative; z-index: 1; }
/* низ титула: выбор игры (◀ BOWLING | PIN PONG ▶), PRESS START и две тихие кнопки */
.title-bot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.title-bot .press { padding: .25em 1.2em; }
.title-bot .title-sub { margin-top: 0; }
.game-pick { display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.gp-chip { font: 400 clamp(13px, 2.8vw, 19px)/1 var(--px); letter-spacing: .16em; color: #c8c8ff; padding: .8em 1.1em; min-width: 7.6em; cursor: pointer; }
.gp-chip.on { color: #0e0c16; background: var(--yellow); border-color: #fff; text-shadow: none; box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), 0 0 14px rgba(255,226,74,.55); }
.gp-arrow { font: 400 clamp(16px, 3vw, 22px)/1 var(--px); color: var(--yellow); padding: 0 .75em; cursor: pointer; }
.gp-chip:active, .gp-arrow:active { transform: translate(1px, 1px); }
.gp-note { font-size: clamp(10px, 1.8vw, 13px); color: var(--cyan); letter-spacing: .14em; min-height: 1.3em; text-align: center; }
@media (max-width: 640px) { .gp-chip { min-width: 6.4em; padding: .8em .7em; letter-spacing: .1em; } .gp-arrow { padding: 0 .6em; } .game-pick { gap: 5px; } }
/* низкие экраны (ноутбук с панелями браузера, телефон боком): плашки в два ряда — выбор игры сверху, под ним HOW TO PLAY · PRESS START · CLIPS в одну строку,
   подсказки под выбором нет. Освободившаяся полоса между логотипом и плашками остаётся героям и столу. */
@media (max-height: 640px) {
  .title-bot { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: .3rem .8rem; max-width: 96vw; }
  .game-pick { grid-column: 1 / -1; }
  .gp-note { display: none; }
  .title-bot .title-sub { display: contents; }
  #btnHelp { grid-row: 2; grid-column: 1; }
  .title-bot .press { grid-row: 2; grid-column: 2; font-size: clamp(1rem, 4.4vh, 1.6rem); padding: .15em .7em; }
  #btnClips { grid-row: 2; grid-column: 3; }
  #title { padding-bottom: 9vh; }
  .gp-chip { padding: .62em .9em; }
}
@media (max-height: 520px) {
  .title-bot .press { font-size: 1.1rem; } .gp-chip { padding: .55em .8em; }
  /* подпись про права — одной строкой под плашками */
  #title { padding-bottom: 8vh; }
  .tiny { font-size: 9px; line-height: 1.3; width: 96vw; text-align: center; bottom: 1.2vh; left: 2vw; } .tiny br { display: none; }
}
#titleStk img { z-index: 0; }
.s-a { left: 2vw; bottom: 3vh; height: min(48vh, 360px); transform: rotate(-7deg); }
.s-b { right: 1vw; bottom: 2vh; height: min(40vh, 300px); transform: rotate(6deg); }
.s-c { left: 16vw; bottom: 1vh; height: min(30vh, 230px); transform: rotate(-13deg); }
.s-d { right: 16vw; bottom: 1vh; height: min(30vh, 230px); transform: rotate(11deg); }
.s-pin { right: 9vw; top: 5vh; height: min(22vh, 170px); transform: rotate(22deg); animation: stkbob 1.8s steps(2) infinite; }
.s-ball { left: 8vw; top: 9vh; height: min(17vh, 130px); transform: rotate(-12deg); animation: stkbob 2.2s steps(2) infinite reverse; }
@keyframes stkbob { 50% { translate: 0 -5px; } }
#endStk { left: 1vw; bottom: 2vh; height: min(50vh, 360px); transform: rotate(-5deg); z-index: 2; }
@media (max-width: 899px) { #endStk { display: none; } }
#title .logo-wrap { margin-top: 0; }
#loading { background: var(--bg); }
.loadbar { width: min(60vw, 22rem); height: 16px; border: 2px solid var(--edge); background: #000; padding: 2px; }
.loadbar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #4a4aff 0 10px, #000 10px 12px); animation: load 1.6s steps(14) infinite; }
@keyframes load { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }


/* ------------------------------------------------------------ меню */
.menu-win { min-width: min(92vw, 34rem); padding-bottom: 10px; max-height: 86vh; overflow-y: auto; scrollbar-width: none; }
.menu-win::-webkit-scrollbar { display: none; }
.menu-win.small { min-width: min(80vw, 18rem); }
.menu-list { list-style: none; margin: 0; padding: 8px 14px 6px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.menu-list li { position: relative; padding: 7px 14px 7px 44px; font-size: clamp(14px, 2.6vw, 19px); line-height: 1.25;
  display: flex; justify-content: space-between; gap: 22px; cursor: pointer; color: #c8c8ff; text-shadow: 2px 2px 0 #000; letter-spacing: .06em; }
.menu-list li small { font-size: .85em; color: var(--yellow); text-align: right; align-self: center; letter-spacing: .04em; }
.menu-list li.sel { color: #fff; }
.menu-list li.go { color: var(--yellow); }
.menu-list li.go.sel { color: #fff; }
.menu-list li span { display: flex; align-items: center; }
.menu-list li img.mi { width: 24px; height: 24px; object-fit: cover; object-position: top; image-rendering: pixelated; border: 1px solid #fff; background: #000; margin-right: 10px; }
.menu-list li.sel::before { content: ""; position: absolute; left: 4px; top: 50%; width: 32px; height: 18px; margin-top: -9px;
  background: var(--hand) no-repeat center / 32px 18px; image-rendering: pixelated; animation: nudge .7s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* ------------------------------------------------------------ VS */
#vs { background: radial-gradient(ellipse at center, rgba(20,20,90,.5), rgba(4,2,16,.9)); justify-content: space-between; }
.vs-top { font: 900 italic clamp(1.1rem, 3.6vw, 2rem)/1.1 var(--logo); color: var(--yellow); text-shadow: 3px 3px 0 #000; letter-spacing: .05em; }
.vs-bot { font-size: clamp(.8rem, 2vw, 1.05rem); color: #d8d4ff; }
.vs-row { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 3vw, 3rem); width: 100%; }
.vs-card { margin: 0; width: min(36vw, 17rem); padding: 6px; }
#vsRow[data-n="3"] .vs-card { width: min(26vw, 14rem); }
#vsRow[data-n="4"] .vs-card { width: min(20vw, 12rem); }
#vsRow[data-n="3"] .vs-mid, #vsRow[data-n="4"] .vs-mid { font-size: clamp(1.2rem, 4vw, 2.4rem); }
#vsRow[data-n="3"] .vs-card img { height: min(38vh, 18rem); }
#vsRow[data-n="4"] .vs-card img { height: min(32vh, 15rem); }
#vsRow[data-n="4"] .vs-card figcaption { font-size: clamp(.8rem, 2.2vw, 1.2rem); }
.vs-card.left { animation: slideL .5s steps(8) both; }
.vs-card.right { animation: slideR .5s steps(8) both; }
@keyframes slideL { from { translate: -60vw 0; } }
@keyframes slideR { from { translate: 60vw 0; } }
.vs-card img { display: block; width: 100%; height: min(46vh, 22rem); object-fit: cover; object-position: top; image-rendering: pixelated; border: 2px solid #000; }
.vs-card figcaption { padding: .5em .4em .2em; font-size: clamp(1rem, 3vw, 1.5rem); text-align: center; letter-spacing: .15em; }
.vs-card figcaption small { display: block; font-size: .62em; color: var(--cyan); letter-spacing: .2em; margin-top: .2em; }
.vs-card.neg figcaption { color: #bffff0; }
.vs-tech { padding: 0 .6em .5em; font-size: clamp(.7rem, 1.7vw, .95rem); color: var(--cyan); letter-spacing: .08em; text-align: left; }
.vs-tech b { display: block; color: var(--yellow); font-weight: 400; text-align: center; letter-spacing: .14em; margin-bottom: .35em; }
.vs-tech div { display: flex; justify-content: space-between; align-items: center; gap: .6em; line-height: 1.5; }
.vs-tech .vs-ball { justify-content: center; margin-top: .45em; color: #fff; gap: .55em; }
.vs-tech .vs-ball .bi { --d: calc(var(--s, 1) * 13px); border-width: 1px; box-shadow: none; }
.vs-tech .vs-ball small { color: var(--cyan); font-size: .8em; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: .7em; height: .7em; background: #1a1a70; border: 1px solid #6a6af0; }
.pips i.on { background: var(--yellow); border-color: #fff; }
.vs-mid { font: 900 italic clamp(2.6rem, 11vw, 6rem)/1 var(--logo); color: #0e0c16; filter: url(#cutout); animation: pop .5s steps(5) .3s both; }
@keyframes pop { from { transform: scale(4); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* ------------------------------------------------------------ HUD */
#hud { position: absolute; inset: 0; }
#hud > * { position: absolute; }

#scorebar { left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sb-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; min-width: 15rem; font-size: 16px; }
.sb-row.cur::before { content: ""; position: absolute; left: -22px; top: 50%; width: 32px; height: 18px; margin-top: -9px;
  background: var(--hand) no-repeat center / 32px 18px; image-rendering: pixelated; animation: nudge .7s steps(2) infinite; }
.sb-row img { width: 34px; height: 34px; object-fit: cover; object-position: top; image-rendering: pixelated; border: 2px solid #fff; background: #000; }
.sb-name { flex: 1; letter-spacing: .1em; }
.sb-name small { color: var(--cyan); font-size: .7em; }
.sb-name .sb-tech { display: block; color: #9fb0ff; font-size: .62em; letter-spacing: .12em; margin-top: 2px; }
.sb-pips { font-size: 12px; color: var(--yellow); letter-spacing: 2px; min-width: 3em; text-align: right; }
.sb-score { font-size: 26px; color: var(--yellow); min-width: 2.3em; text-align: right; line-height: 1; }
#series { top: 10px; left: 50%; transform: translateX(-50%); font-size: 13px; padding: 7px 14px; text-align: center; white-space: nowrap; letter-spacing: .12em; }
#series b { color: var(--yellow); font-weight: 400; }
#turnTag { left: 10px; top: 118px; font-size: 12px; color: #ddd; }

.banner { left: 0; right: 0; top: 13%; text-align: center; font: 900 italic clamp(2.2rem, 10vw, 6.4rem)/.95 var(--logo);
  color: #fff; -webkit-text-stroke: 4px #14104c; text-shadow: 6px 6px 0 var(--pink), 0 0 30px rgba(255,255,255,.35);
  transform: skewX(-6deg); opacity: 0; pointer-events: none; }
.banner small { display: block; font: 400 clamp(.9rem, 2.4vw, 1.35rem)/1.3 var(--px); -webkit-text-stroke: 0; color: var(--cyan); text-shadow: 3px 3px 0 #000; letter-spacing: .25em; margin-top: .6em; font-style: normal; }
.banner.show { animation: bannerIn .35s steps(6) both; }
/* STRIKE!, SPARE!, VICTORY! — вырезанные буквы, как плашки в роликах */
.banner.gold { color: #0e0c16; -webkit-text-stroke: 0; text-shadow: none; filter: url(#cutout); transform: rotate(-3deg); }
.banner.gold small { color: #0e0c16; text-shadow: none; letter-spacing: .2em; }
.banner.gold.show { animation-name: bannerInGold; }
@keyframes bannerInGold { from { transform: rotate(-3deg) scale(2.6); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.banner.sad { color: #9fb4d6; text-shadow: 6px 6px 0 #1a1250; }
@keyframes bannerIn { from { transform: skewX(-6deg) scale(2.6); opacity: 0; } to { transform: skewX(-6deg) scale(1); opacity: 1; } }

#meter { left: 50%; bottom: 8vh; transform: translateX(-50%); width: min(86vw, 30rem); padding: 10px 16px 12px; }
.m-label { font-size: 15px; letter-spacing: .15em; margin-bottom: 8px; display: flex; justify-content: space-between; color: var(--yellow); }
.m-label span { font-size: 12px; color: var(--cyan); }
.m-bar { position: relative; height: 20px; background: linear-gradient(90deg, #d7263d 0, #ffb02e 20%, #2bff4a 50%, #ffb02e 80%, #d7263d 100%); border: 2px solid #000; }
.m-bar.power { background: linear-gradient(90deg, #2b5cff 0, #12e5d4 35%, #2bff4a 62%, #ffe02e 82%, #ff4a2b 100%); }
.m-bar .m-zone { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 2px, transparent 2px 12px); }
.m-bar.hoop { background: #2a1448; }
.m-bar .m-band { position: absolute; top: 0; bottom: 0; background: #2bff4a; box-shadow: 0 0 0 2px #fff inset; z-index: 1; }
.m-bar .m-zone { z-index: 2; }
.m-cursor { z-index: 3; position: absolute; top: -7px; bottom: -7px; width: 8px; margin-left: -4px; background: #fff; border: 2px solid #000; }
.m-spin { display: flex; gap: 3px; margin-top: 9px; justify-content: center; align-items: center; font-size: 12px; color: #d8d4ff; }
.m-spin i { width: 20px; height: 12px; background: #1a1a70; border: 2px solid #6a6af0; }
.m-spin i.on { background: var(--yellow); border-color: #fff; }
.m-spin i.mid { border-color: var(--cyan); }
.m-spin span { padding: 0 6px; }
/* шары по размеру: диаметр кружка пропорционален настоящему радиусу шара */
.bi { --d: calc(var(--s, 1) * 16px); width: var(--d); height: var(--d); border-radius: 50%; padding: 0; margin: 0; border: 2px solid #6a6af0; flex: none; display: inline-block; vertical-align: middle;
  background: radial-gradient(circle at 35% 30%, #fff 0 9%, #5a63d8 32%, #151a70 100%); }
.bi.on { border-color: #fff; background: radial-gradient(circle at 35% 30%, #fff 0 9%, #ffe24a 32%, #c07a10 100%); box-shadow: 0 0 0 2px #000, 0 0 8px var(--yellow); }
button.bi { cursor: pointer; }
.bis { display: inline-flex; align-items: center; gap: 7px; }
.m-ball { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; font-size: 12px; color: #d8d4ff; letter-spacing: .1em; }
.m-ball .mbl { padding-right: 4px; }
.m-ball .bn { color: var(--yellow); min-width: 9.5em; text-align: left; }
.bn small { color: var(--cyan); margin-left: .7em; font-size: .85em; }
.mbk { font: 400 12px/1 var(--px); color: #fff; background: #1a1a70; border: 2px solid #6a6af0; padding: 3px 7px; cursor: pointer; letter-spacing: .05em; }
.mbk small { color: var(--cyan); font-size: .75em; margin: 0 .35em; }
.mbk:active { transform: translate(1px, 1px); }
.m-ball.lock .bi:not(.on) { opacity: .3; }
@media (max-height: 520px) { #meter[data-ph="aim"] .m-ball, #meter[data-ph="power"] .m-ball { display: none; } #meter { padding: 6px 14px 8px; } .m-spin { margin-top: 6px; } .m-shots { margin-top: 6px; } }
.m-shots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.m-shots button { font: 400 12px/1 var(--px); color: #fff; background: #1a1a70; border: 2px solid #6a6af0; padding: 5px 9px; letter-spacing: .06em; cursor: pointer; }
.m-shots button:active { transform: translate(1px, 1px); }
.m-shots .pad { margin-right: 5px; }
@media (pointer: coarse) { .mbk small { display: none; } .bi { --d: calc(var(--s, 1) * 20px); } }
@media (max-width: 640px) { .m-ball { gap: 6px; } .m-ball .mbl, .m-ball .bn small { display: none; } .m-ball .bn { min-width: 0; } }

#clipTag { left: 50%; top: 10px; transform: translateX(-50%); padding: 8px 18px; font-size: 15px; letter-spacing: .16em; white-space: nowrap; color: var(--yellow); }
/* название прикола-раунда и как им управлять: сверху по центру, на телефоне — под верхней строкой */
#roundTag { left: 50%; top: 58px; transform: translateX(-50%); padding: 6px 14px; text-align: center; max-width: min(92vw, 34rem); font-size: 13px; letter-spacing: .12em; color: var(--yellow); line-height: 1.5; }
#roundTag small { display: block; color: var(--cyan); font-size: .86em; letter-spacing: .08em; }
@media (max-width: 640px) { #roundTag { top: 108px; font-size: 12px; padding: 5px 10px; letter-spacing: .08em; } }
@media (max-height: 520px) { #roundTag { top: 52px; font-size: 11px; padding: 3px 10px; } #roundTag small { display: inline; margin-left: .8em; } }
#bonusTag { left: 10px; top: 128px; padding: 6px 12px; font-size: 13px; letter-spacing: .1em; color: var(--cyan); max-width: 18rem; }
#bonusTag b { color: var(--yellow); font-weight: 400; }
@media (max-width: 640px) { #bonusTag { top: auto; bottom: 12px; left: 8px; font-size: 11px; max-width: 12rem; } }
#clipTag small { color: var(--cyan); font-size: .8em; margin-left: 1.2em; }
/* во время ролика всё лишнее с экрана убираем — остаётся телевизор */
#hud.cut > :not(#clipTag):not(#hint):not(#bonusTag) { display: none !important; }
#theater { justify-content: space-between; background: transparent; pointer-events: none; }
#thTop { padding: 10px 20px; font-size: clamp(14px, 2.6vw, 20px); letter-spacing: .14em; color: var(--yellow); }
#thTop small { display: block; color: var(--cyan); font-size: .7em; margin-top: .4em; letter-spacing: .1em; }
#theater .th-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.thb { font: 400 clamp(13px, 2.6vw, 16px)/1 var(--px); color: #fff; padding: 10px 16px; cursor: pointer; letter-spacing: .12em; }
.thb:active { transform: translate(1px, 1px); }
#hint { left: 0; right: 0; bottom: 2vh; text-align: center; font-size: 14px; color: #fff; padding: 0 10px; letter-spacing: .1em; }
.tool { right: 10px; top: 10px; font: 400 14px/1 var(--px); color: #fff; padding: 9px 12px; cursor: pointer; letter-spacing: .1em; }
#btnBoard { right: 92px; }
#btnPause { right: 10px; }
.tool:active { transform: translate(1px, 1px); }

/* ------------------------------------------------------------ табло и итоги */
#board, #end { background: rgba(4, 2, 20, .84); }
/* табло перехватывает тапы: тап в любом месте (не прокрутка) закрывает его, а кнопки HUD под ним не нажимаются */
#board { pointer-events: auto; }
body.end-on #hud, body.end-on #hud * { pointer-events: none !important; }
.board-box { width: min(96vw, 62rem); display: flex; flex-direction: column; gap: 14px; }
.board-close { font: 400 clamp(13px, 2.6vw, 16px)/1 var(--px); color: #fff; padding: 11px 22px; cursor: pointer; letter-spacing: .14em; }
.board-close:active { transform: translate(1px, 1px); }
.bt { background: linear-gradient(160deg, var(--win1), var(--win2) 45%, var(--win3)); border: 2px solid var(--edge); border-radius: 6px;
  padding: 8px; box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), inset 0 0 0 2px #6a6af0; }
.bt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 19px; letter-spacing: .12em; text-shadow: 2px 2px 0 #000; }
.bt-head img { width: 34px; height: 34px; object-fit: cover; object-position: top; image-rendering: pixelated; border: 2px solid #fff; }
.bt-head .tot { margin-left: auto; font-size: 30px; color: var(--yellow); }
.frames { display: grid; grid-template-columns: repeat(var(--nf, 10), 1fr); gap: 2px; }
.frames.f1 { grid-template-columns: repeat(1, 6rem); }
.fr { background: #ecebf8; color: #0a0a30; border: 1px solid #000; text-align: center; min-width: 0; text-shadow: none; letter-spacing: 0; }
.fr.on { outline: 3px solid var(--yellow); outline-offset: -3px; }
.fr .n { background: #1d1daa; color: #fff; font-size: 11px; line-height: 14px; }
.fr.joke .n { background: #a21fb8; }
.fr .n small { display: block; font-size: 8px; line-height: 9px; color: var(--yellow); letter-spacing: 0; white-space: nowrap; overflow: hidden; }
#series .rd { color: var(--pink, #ff6ec7); }
.fr .m { display: flex; justify-content: flex-end; border-bottom: 1px solid #000; height: 20px; font-size: 15px; line-height: 20px; }
.fr .m span { width: 50%; border-left: 1px solid #000; min-width: 0; }
.fr.t .m span { width: 33.3%; }
.fr .m span:first-child { border-left: 0; }
.fr .s { height: 24px; font-size: 16px; line-height: 24px; }
.board-box[data-n="3"], .board-box[data-n="4"] { gap: 8px; }
.board-box[data-n="3"] .bt, .board-box[data-n="4"] .bt { padding: 5px 6px; }
.board-box[data-n="3"] .bt-head, .board-box[data-n="4"] .bt-head { font-size: 15px; margin-bottom: 3px; }
.board-box[data-n="3"] .bt-head img, .board-box[data-n="4"] .bt-head img { width: 26px; height: 26px; }
.board-box[data-n="3"] .bt-head .tot, .board-box[data-n="4"] .bt-head .tot { font-size: 22px; }
.board-box[data-n="3"] .fr .m, .board-box[data-n="4"] .fr .m { height: 16px; font-size: 12px; line-height: 16px; }
.board-box[data-n="3"] .fr .s, .board-box[data-n="4"] .fr .s { height: 18px; font-size: 13px; line-height: 18px; }
.board-box[data-n="4"] .fr .n { font-size: 9px; line-height: 11px; }
#end { padding-top: 2vh; padding-bottom: 2vh; gap: .7rem; }
.end-info { font-size: 15px; line-height: 1.65; max-width: 44rem; padding: 12px 18px; text-align: left; letter-spacing: .04em;
  max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; scrollbar-color: #7a9bff #14104c; }
.end-info b { color: var(--yellow); font-weight: 400; }
.end-info .more { position: sticky; bottom: -12px; margin: 0 -18px -12px; padding: 18px 0 6px; text-align: center; color: var(--cyan); font-size: 12px; letter-spacing: .3em; pointer-events: none; transition: opacity .2s;
  background: linear-gradient(rgba(20, 16, 76, 0), #14104c 65%); }
.end-info p { margin: .3em 0; }

/* ------------------------------------------------------------ геймпад на экране */
#touch { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
#touch button { pointer-events: auto; padding: 0; touch-action: none; color: #fff; font: 400 22px/1 var(--px); }
.dpad { position: relative; width: 156px; height: 156px; }
#touch .dpad button { position: absolute; width: 52px; height: 52px; background: linear-gradient(#b9bac8, #7d7e8f); border: 3px solid #1b1b28; }
.dpad .up { left: 52px; top: 0; border-radius: 6px 6px 0 0; } .dpad .dn { left: 52px; bottom: 0; border-radius: 0 0 6px 6px; }
.dpad .lf { left: 0; top: 52px; border-radius: 6px 0 0 6px; } .dpad .rt { right: 0; top: 52px; border-radius: 0 6px 6px 0; }
#touch .dpad button:active { background: linear-gradient(#8e90ac, #5f6078); }
.dpad .up::after, .dpad .dn::after, .dpad .lf::after, .dpad .rt::after { content: ""; position: absolute; inset: 14px; background: #2a2a3c; }
.dpad .up::after { clip-path: polygon(50% 10%, 90% 90%, 10% 90%); } .dpad .dn::after { clip-path: polygon(50% 90%, 90% 10%, 10% 10%); }
.dpad .lf::after { clip-path: polygon(10% 50%, 90% 10%, 90% 90%); } .dpad .rt::after { clip-path: polygon(90% 50%, 10% 10%, 10% 90%); }
.face { position: relative; width: 156px; height: 156px; }
.face button { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #dcdde8, #8c8da0 70%); border: 3px solid #1b1b28; }
.face button .pad { width: 1.5em; height: 1.5em; background: none; font-size: 26px; border-width: 3px; }
.face .tr { left: 50px; top: 0; } .face .sq { left: 0; top: 50px; } .face .ci { right: 0; top: 50px; } .face .cr { left: 50px; bottom: 0; }
.face button:active { filter: brightness(.7); }
@media (hover: hover) and (pointer: fine) { #touch { display: none !important; } }

/* ------------------------------------------------------------ XY-пад вместо геймпада (pad.js, только телефон) */
#kpad { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); height: min(40vh, 320px); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; z-index: 3; }
#kpad.hidden { display: none; }
#kpadC { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
body.pad-on #touch { display: none !important; }
body.pad-on #meter { bottom: calc(min(40vh, 320px) + 14px + env(safe-area-inset-bottom, 0px)); padding: 8px 14px 10px; }
body.pad-on #meter .m-label, body.pad-on #meter .m-bar, body.pad-on #mSpin { display: none; }      /* сила и подсказки — на самом паде */
body.pad-on #meter .m-ball { margin-top: 0; }
body.pad-on #hint, body.pad-on .pp-hint { display: none; }
.m-shots button.on { background: var(--yellow); color: #0e0c16; border-color: #fff; }
.m-shots button.on .pad { color: #0e0c16; }
/* боком пад — правая часть экрана ниже шапки с кнопками, окно метра уезжает налево под картинку, сдвинутую влево (main.js: updateViewShift) */
@media (max-height: 520px) {
  #kpad { left: auto; right: 0; width: min(44vw, 400px); top: 94px; height: auto; }      /* под шапкой и мини-плеером */
  body.pad-on #meter { left: calc((100vw - min(44vw, 400px)) / 2); bottom: 10px; width: min(52vw, 22rem); }
}

#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .5s steps(5) both; }
@keyframes flash { from { opacity: .9 } to { opacity: 0 } }

@media (max-width: 640px) {
  /* на телефоне табло счёта — только лицо и очки: имена уже были на заставке, а справа место нужно мини-плееру */
  #scorebar .sb-row { min-width: 0; width: auto; padding: 4px 10px 4px 6px; font-size: 14px; gap: 8px; justify-content: space-between; }
  .sb-row img { width: 30px; height: 30px; }
  .sb-name { display: none; }
  .sb-score { font-size: 20px; }
  .sb-pips { display: none; }
  .sb-name .sb-tech { display: none; }
  #series { display: none; }
  #meter { bottom: 190px; }
  #hint { display: none; }
  #theater { padding-top: 12px; }
  #thTop { padding: 7px 12px; font-size: 13px; }
  #thTop small { display: none; }
  #clipTag { font-size: 12px; padding: 6px 12px; }
  #btnBoard { right: 74px; top: 10px; }
  .ps-logo { filter: drop-shadow(3px 4px 0 #ff3fa6); }
  .dpad, .face { width: 132px; height: 132px; }
  .dpad button { width: 44px; height: 44px; } .dpad .up, .dpad .dn { left: 44px; } .dpad .lf, .dpad .rt { top: 44px; }
  .face button { width: 48px; height: 48px; } .face .tr, .face .cr { left: 42px; } .face .sq, .face .ci { top: 42px; }
}
@media (pointer: coarse) { #meter { bottom: 190px; } }

@media (max-width: 640px) {
  .s-a { left: -3vw; height: 27vh; } .s-b { right: -4vw; height: 24vh; }
  .s-c, .s-d { display: none; }
  .s-pin { right: 4vw; top: 3vh; height: 12vh; } .s-ball { left: 4vw; top: 4vh; height: 10vh; }
  #endStk { display: none; }
}
@media (max-height: 520px) { #endStk, .s-c, .s-d { display: none; } }

/* VS на телефоне в альбомной ориентации: карточки ниже, остаётся название стиля и шар */
@media (max-height: 520px) {
  .vs-top { font-size: 1.1rem; }
  .vs-card { padding: 4px; width: min(30vw, 14rem); }
  .vs-card img, #vsRow[data-n="3"] .vs-card img, #vsRow[data-n="4"] .vs-card img { height: 36vh; }
  .vs-card figcaption { padding-top: .25em; font-size: 1rem; }
  .vs-tech { padding-bottom: .25em; } .vs-tech div:not(.vs-ball) { display: none; } .vs-tech b { margin-bottom: .15em; }
  .vs-bot { font-size: .75rem; }
  .vs-mid { font-size: 2.2rem; }
}
/* табло боком на телефоне: плотная вёрстка, а 3–4 игрока — в две колонки, чтобы все строки и кнопка CLOSE помещались в 390 px */
@media (max-height: 520px) {
  #board { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  #board .board-box { gap: 5px; }
  #board .bt { padding: 3px 6px; }
  #board .bt-head { font-size: 14px; margin-bottom: 2px; } #board .bt-head img { width: 22px; height: 22px; } #board .bt-head .tot { font-size: 20px; }
  #board .fr .n { font-size: 10px; line-height: 12px; } #board .fr .n small { line-height: 8px; }
  #board .fr .m { height: 15px; font-size: 12px; line-height: 15px; } #board .fr .s { height: 17px; font-size: 13px; line-height: 17px; }
  #board .board-box[data-n="3"], #board .board-box[data-n="4"] { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; }
  #board .board-box[data-n="3"] .bt, #board .board-box[data-n="4"] .bt { width: calc(50% - 3px); box-sizing: border-box; }
  .board-close { padding: 6px 18px; }
}
/* итоги на телефоне боком: табло, сводка и кнопка должны поместиться в 390 px по высоте */
@media (max-height: 520px) {
  #end { padding-top: 6px; padding-bottom: 6px; gap: 4px; }
  #end .ps-h { font-size: 1.5rem; }
  #end .board-box { gap: 5px; }
  #end .bt { padding: 3px 6px; }
  #end .bt-head { font-size: 14px; margin-bottom: 2px; } #end .bt-head img { width: 22px; height: 22px; } #end .bt-head .tot { font-size: 20px; }
  #end .fr .n { font-size: 10px; line-height: 12px; } #end .fr .n small { line-height: 8px; }
  #end .fr .m { height: 15px; font-size: 12px; line-height: 15px; } #end .fr .s { height: 17px; font-size: 13px; line-height: 17px; }
  #end .end-info { max-height: 20vh; font-size: 11px; padding: 5px 12px; line-height: 1.35; }
  #end #btnNext { flex: none; font-size: 1rem; }
}
/* заставка VS на узком экране: втроём карточки уже, вчетвером — сетка 2×2 */
@media (max-width: 640px) {
  #vsRow { gap: 6px; }
  #vsRow[data-n="3"] .vs-card { width: 27vw; }
  #vsRow[data-n="3"] .vs-mid { font-size: 1.1rem; }
  #vsRow[data-n="3"] .vs-tech div:not(.vs-ball) { display: none; }
  .vs-tech .vs-ball small { display: none; }
  #vsRow[data-n="4"] { flex-wrap: wrap; align-content: center; gap: 10px; }
  #vsRow[data-n="4"] .vs-card { width: 41vw; }
  #vsRow[data-n="4"] .vs-card img { height: 20vh; }
  #vsRow[data-n="4"] .vs-mid { display: none; }
}

/* ------------------------------------------------------------ бар: выбор персонажа */
/* сверху плашка с шагом, снизу карточка героя со стрелками и кнопки: середина экрана свободна для героев у стойки (камера сама подстраивается под эту полосу, см. barBand в main.js) */
#barUI { justify-content: flex-start; background: transparent; pointer-events: none; }
#barUI > * { pointer-events: auto; }
#barUI .bar-bot { margin-top: auto; }
#barTop { padding: 9px 22px; font-size: clamp(13px, 2.6vw, 19px); letter-spacing: .2em; color: var(--yellow); }
#barTop small { color: var(--cyan); margin-left: 1em; font-size: .8em; letter-spacing: .12em; }
.bar-bot { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 18px); width: 100%; }
.barb { font: 900 clamp(1.4rem, 4vw, 2.2rem)/1 var(--px); color: var(--yellow); padding: .35em .55em; cursor: pointer; }
.barb:active { transform: translate(1px, 1px); }
.bar-card { width: min(78vw, 33rem); padding: 8px 18px 9px; text-align: center; }
.bar-card h3 { margin: 0 0 .1em; font: 900 clamp(1.3rem, 4.4vw, 2.2rem)/1 var(--logo); text-transform: uppercase; color: #0e0c16; filter: url(#cutout-s); transform: rotate(-1.5deg); display: inline-block; padding: 0 .2em; }
.bar-card .style { display: inline-block; margin-left: .8em; color: var(--yellow); letter-spacing: .18em; font-size: clamp(13px, 2.4vw, 17px); vertical-align: middle; }
.bar-card .ld { display: inline-block; margin-left: .8em; padding: .1em .5em; font-size: clamp(11px, 2vw, 14px); letter-spacing: .16em; color: #0a0a58; background: var(--cyan); animation: blink 1s steps(2) infinite; vertical-align: middle; }
.bar-card .ld.bad { background: #ff6a6a; animation: none; }
.mc-slot .ld { margin: 0; font-size: 10px; }
.bar-card .stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 16px; font-size: clamp(11px, 2vw, 14px); color: var(--cyan); letter-spacing: .1em; margin: .2em 0; }
.bar-card .stats span { display: flex; align-items: center; gap: .6em; }
.bar-card .note { font-size: clamp(11px, 2vw, 14px); color: #d8d4ff; letter-spacing: .08em; margin: .2em 0; }
.bar-card .quote { font-size: clamp(11px, 2vw, 14px); color: #fff; font-style: italic; opacity: .85; margin: .5em 0 0; }
.bar-card .ballrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4em 1em; margin: .5em 0 .1em; padding-top: .45em; border-top: 2px dashed #3a3a9a; font-size: clamp(12px, 2.2vw, 15px); color: var(--cyan); letter-spacing: .12em; }
.bar-card .ballrow .bl em { font-style: normal; color: #fff; opacity: .8; margin-left: .3em; }
.bar-card .ballrow .bis { gap: 9px; align-items: center; }
.bar-card .ballrow .bi { --d: calc(var(--s, 1) * 24px); }
.bar-card .ballrow .bn { color: var(--yellow); }
.bar-card .bstats { margin-top: .1em; }
/* экран «готовы?»: две карточки героев и переключатель режима */
.match { display: flex; align-items: stretch; justify-content: center; gap: clamp(8px, 2vw, 18px); }
.mc-slot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(11px, 2vw, 14px); color: var(--cyan); letter-spacing: .08em; }
.mc-slot img { width: clamp(56px, 12vw, 92px); height: clamp(56px, 12vw, 92px); object-fit: cover; object-position: top; border: 2px solid #fff; image-rendering: pixelated; background: #000; }
.mc-slot b { color: var(--yellow); font-weight: 400; font-size: clamp(14px, 2.8vw, 20px); letter-spacing: .14em; }
.mc-slot small { color: #d8d4ff; }
.mc-ball { display: inline-flex; align-items: center; gap: .5em; color: #fff; }
.mc-ball .bi { --d: calc(var(--s, 1) * 14px); border-width: 1px; box-shadow: none; }
.mc-vs { align-self: center; font: 900 italic clamp(1.4rem, 5vw, 2.4rem)/1 var(--logo); color: #0e0c16; filter: url(#cutout-s); }
.mc-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: .55em 0 .1em; }
.mc-row > span { font-size: clamp(11px, 2vw, 14px); color: var(--cyan); letter-spacing: .12em; min-width: 7.5em; text-align: right; }
.mc-row > span em { font-style: normal; color: #fff; opacity: .7; margin-left: .3em; }
.mc-mode { display: flex; justify-content: center; gap: 10px; margin: 0; }
.mc-mode button { font: 400 clamp(12px, 2.4vw, 16px)/1 var(--px); letter-spacing: .14em; color: #c8c8ff; background: #14104c; border: 2px solid #6a6af0; padding: 9px 14px; cursor: pointer; }
.mc-mode button.on { color: #0e0c16; background: var(--yellow); border-color: #fff; }
@media (max-height: 700px) { .bar-card .quote { display: none; } }
/* невысокий экран (ноутбук с панелями браузера, окно 960×540): карточка пониже и пошире — героям у стойки остаётся больше места */
@media (max-height: 640px) and (min-width: 641px) {
  .bar-card { width: min(88vw, 42rem); padding: 6px 16px 7px; }
  .bar-card h3 { font-size: 1.5rem; }
  .bar-card .stats { margin: .1em 0; font-size: 12px; gap: 1px 14px; }
  .bar-card .ballrow { margin: .3em 0 0; padding-top: .3em; }
  .bar-card .note, .bar-card .quote { display: none; }
  .mc-slot img { width: 56px; height: 56px; }
  .mc-row { margin: .35em 0 0; }
  .match + .mc-row { margin-top: .5em; }
}
/* телефон в альбомной ориентации: карточка бара ужимается, чтобы остались видны и герой, и кнопки */
@media (max-height: 520px) {
  #barTop { padding: 5px 16px; font-size: 13px; }
  .bar-card { padding: 5px 12px 6px; width: min(72vw, 33rem); }
  .bar-card h3 { font-size: 1.15rem; }
  .bar-card .stats { margin: .1em 0; gap: 0 12px; font-size: 11px; }
  .bar-card .bstats, .bar-card .note, .bar-card .quote, .bar-card .tag { display: none; }
  .bar-card .ballrow { margin: .2em 0 0; padding-top: .2em; font-size: 12px; }
  .bar-card .ballrow .bi { --d: calc(var(--s, 1) * 18px); }
  .match { gap: 8px; }
  .mc-slot { font-size: 10px; } .mc-slot img { width: 42px; height: 42px; } .mc-slot b { font-size: 13px; }
  .mc-vs { font-size: 1.25rem; }
  .mc-row { margin: .3em 0 0; gap: 8px; } .mc-row > span { font-size: 10px; min-width: 6.5em; }
  .mc-mode button { padding: 5px 10px; font-size: 11px; }
  .bar-bot { gap: 6px; } .barb { padding: .25em .45em; font-size: 1.2rem; }
  .thb { padding: 6px 12px; font-size: 12px; }
}
.bar-card .tag { display: inline-block; margin-top: .5em; padding: .15em .6em; background: #14104c; border: 1px solid #6a6af0; color: var(--yellow); font-size: 12px; letter-spacing: .14em; }
/* вертикальный телефон, «готовы?»: карточка во всю ширину между стрелками, подписи строк над кнопками */
@media (max-width: 640px) {
  .bar-card.ready { width: calc(100vw - 104px); padding: 8px 8px 9px; }
  .mc-row { flex-direction: column; gap: 4px; margin: .5em 0 0; }
  .mc-row > span { min-width: 0; text-align: center; }
  .mc-mode { flex-wrap: wrap; gap: 6px; }
  .mc-mode button { padding: 8px 10px; font-size: 12px; letter-spacing: .08em; }
}
@media (max-width: 640px) { .bar-card { width: 62vw; padding: 8px 10px; } .bar-card .stats { display: none; } .bar-card .quote, .bar-card .note { display: none; } .bar-card .ballrow { gap: .3em .6em; letter-spacing: .06em; } .bar-card .ballrow .bi { --d: calc(var(--s, 1) * 20px); } }

.menu-list li .hintx { font-style: normal; font-size: .62em; color: var(--cyan); margin-left: .9em; letter-spacing: .12em; opacity: .85; }
@media (max-width: 640px) { .menu-list li span { white-space: nowrap; } .menu-list li .hintx { display: none; } .menu-list li { padding-right: 10px; } }

/* ------------------------------------------------------------ PIN PONG (pong.js) */
#pongHud { position: absolute; inset: 0; }
#pongHud > * { position: absolute; }
/* поверх боулинг-HUD в режиме пин-понга остаются только баннер и кнопка паузы */
body.pong-on #scorebar, body.pong-on #series, body.pong-on #turnTag, body.pong-on #meter, body.pong-on #hint,
body.pong-on #clipTag, body.pong-on #bonusTag, body.pong-on #btnBoard,
body.nardy-on #scorebar, body.nardy-on #series, body.nardy-on #turnTag, body.nardy-on #meter, body.nardy-on #hint,
body.nardy-on #clipTag, body.nardy-on #bonusTag, body.nardy-on #btnBoard, body.nardy-on #touch, body.nardy-on #kpad,
body.pool-on #scorebar, body.pool-on #series, body.pool-on #turnTag, body.pool-on #meter, body.pool-on #hint,
body.pool-on #clipTag, body.pool-on #bonusTag, body.pool-on #btnBoard, body.pool-on #touch, body.pool-on #kpad { display: none !important; }
.pp-plate { top: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; }
.pp-l { left: 10px; }
.pp-r { right: 92px; flex-direction: row-reverse; padding: 6px 6px 6px 10px; }
.pp-face { width: 38px; height: 38px; object-fit: cover; object-position: top; border: 2px solid #fff; background: #000; image-rendering: pixelated; flex: none; }
.pp-who { display: flex; flex-direction: column; gap: 3px; letter-spacing: .1em; font-size: 15px; line-height: 1; }
.pp-who b { font-weight: 400; }
.pp-who small { font-size: 10px; color: var(--cyan); letter-spacing: .12em; }
.pp-r .pp-who { text-align: right; align-items: flex-end; }
.pp-pins { display: flex; gap: 3px; margin: 0 2px; }
.pp-pin { width: 12px; height: 26px; flex: none; transition: transform .3s steps(5), filter .3s, opacity .3s; transform-origin: 50% 90%; }
.pp-pin.down { transform: rotate(-84deg) translate(3px, 3px); filter: brightness(.38) saturate(.4); opacity: .75; }
.pp-r .pp-pin.down { transform: rotate(84deg) translate(-3px, 3px); }
.pp-pin.drop { animation: ppdrop .7s steps(7); }
@keyframes ppdrop { 0% { transform: translateY(0) scale(1.5); filter: brightness(2); } 30% { transform: translateY(-6px) rotate(14deg) scale(1.4); } 100% { transform: rotate(-84deg) translate(3px, 3px); } }
.pp-plate.mp { box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), inset 0 0 0 2px var(--yellow), inset 0 0 0 4px #04043a; animation: ppmp .6s steps(2) infinite; }
@keyframes ppmp { 50% { filter: brightness(1.5); } }
.pp-rally { top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 14px 6px; text-align: center; min-width: 5.5rem; }
.pp-rally small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--cyan); }
.pp-rally b { font-weight: 400; font-size: 24px; color: var(--yellow); line-height: 1.1; display: inline-block; }
.pp-rally.bump b { animation: ppbump .25s steps(3); }
.pp-rally.hot b { color: #ff8a4a; }
@keyframes ppbump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.pp-hint { left: 0; right: 0; bottom: 2vh; text-align: center; font-size: 13px; padding: 0 10px; color: #fff; letter-spacing: .08em; pointer-events: none; }
.pp-endpins { display: flex; gap: 5px; margin: 0 auto 0 14px; flex-wrap: nowrap; }
.pp-endpins .pp-pin { width: 16px; height: 36px; }
.pp-endpins .pp-pin.down { transform: rotate(-84deg) translate(4px, 4px); }
@media (max-width: 640px) {
  .pp-plate { top: 8px; padding: 4px 6px 4px 4px; gap: 5px; }
  .pp-l { left: 6px; }
  .pp-r { right: 70px; padding: 4px 4px 4px 6px; }
  .pp-face { width: 28px; height: 28px; }
  .pp-who { font-size: 11px; }
  .pp-who small { display: none; }
  .pp-pins { gap: 2px; margin: 0; }
  .pp-pin { width: 9px; height: 20px; }
  .pp-rally { padding: 3px 10px 4px; min-width: 4.4rem; }
  .pp-rally b { font-size: 18px; }
  .pp-hint { font-size: 11px; line-height: 1.4; }
}
/* телефон стоя: плашки колонкой слева (справа — мини-плеер и START), счётчик рядом, подсказка над геймпадом */
@media (max-width: 640px) and (orientation: portrait) {
  .pp-plate { width: 106px; flex-wrap: wrap; row-gap: 3px; }
  .pp-r { left: 6px; right: auto; top: 74px; flex-direction: row; padding: 4px 6px 4px 4px; }
  .pp-r .pp-pin.down { transform: rotate(-84deg) translate(3px, 3px); }
  .pp-r .pp-who { text-align: left; align-items: flex-start; }
  .pp-who { max-width: 62px; }
  .pp-rally { top: 8px; left: 120px; transform: none; }
  .pp-hint { bottom: 166px; }
}
/* заставка VS в пин-понге: карточки пониже, чтобы под ними влезла строка с клавишами */
body.pong-on .vs-card img { height: min(34vh, 17rem); }
body.pong-on .vs-bot { font-size: clamp(.68rem, 1.6vw, .95rem); max-width: 94vw; line-height: 1.4; }
/* перетаскивание пальцем двигает ракетку: браузер не должен забирать жест себе (прокрутка, «потянуть для обновления») */
body.pong-on, body.pong-on #gl, body.pong-on #ui { touch-action: none; overscroll-behavior: none; }
body.title-on, body.title-on #gl { touch-action: none; }          /* свайп по титулу листает игры, браузер его не забирает */
/* подписи ударов под кнопками геймпада */
body.pong-on .face button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
body.pong-on .face button .pad { font-size: 19px; margin: 0; }
body.pong-on .face button[data-pp]::after { content: attr(data-pp); font: 400 8px/1 var(--px); letter-spacing: .03em; color: #14104c; }


/* ------------------------------------------------------------ НАРДЫ (nardy.js) */
#nardyHud { position: absolute; inset: 0; pointer-events: none; }
#nardyHud > * { position: absolute; }
#nardyHud button { pointer-events: auto; }
.nd-plate { top: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; transition: filter .2s; }
.nd-plate:not(.on) { filter: brightness(.72) saturate(.8); }
.nd-plate.on { box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), inset 0 0 0 2px var(--yellow), inset 0 0 0 4px #04043a; }
.nd-l { left: 10px; }
.nd-r { right: 92px; flex-direction: row-reverse; padding: 6px 6px 6px 10px; }
.nd-r .pp-who { text-align: right; align-items: flex-end; }
.nd-stats { display: flex; flex-direction: column; gap: 2px; min-width: 4.2em; }
.nd-stats span { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; font-size: 12px; letter-spacing: .08em; }
.nd-stats i { font-style: normal; font-size: 9px; color: var(--cyan); letter-spacing: .16em; }
.nd-stats b { font-weight: 400; color: var(--yellow); font-size: 15px; }
.nd-mid { top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 14px 6px; text-align: center; min-width: 9rem; }
.nd-mid small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--cyan); }
.nd-mid b { font-weight: 400; font-size: 14px; letter-spacing: .12em; color: var(--yellow); }
.nd-dock { left: 0; right: 0; bottom: 3.2vh; display: flex; align-items: center; justify-content: center; gap: 12px; }
.nd-dice { display: flex; gap: 8px; align-items: center; min-height: 40px; padding: 4px 10px; background: rgba(6,6,40,.55); border: 2px solid #4a4ac0; }
.nd-die { width: 34px; height: 34px; display: block; }
.nd-die.used { opacity: .55; }
.nd-die.ghost { background: rgba(255,255,255,.12); border: 2px dashed #7a7ac8; border-radius: 4px; }
.nd-btn { font: 400 14px/1 var(--px); letter-spacing: .14em; color: #fff; padding: 12px 16px; cursor: pointer; }
.nd-btn.nd-go { color: #0e0c16; background: var(--yellow); border-color: #fff; animation: ppmp .8s steps(2) infinite; }
.nd-btn.hidden { display: none; }
.nd-hint { left: 0; right: 0; bottom: 78px; text-align: center; font-size: 13px; padding: 0 10px; color: #fff; letter-spacing: .08em; pointer-events: none; }
.nd-endoff { margin: 0 auto 0 14px; font-size: 13px; color: var(--cyan); letter-spacing: .1em; }
.vs-quote { font-size: .8em; line-height: 1.35; opacity: .9; margin-top: .4em; max-width: 15em; }
@media (max-width: 640px) {
  .nd-plate { top: 8px; padding: 4px 6px 4px 4px; gap: 5px; }
  .nd-l { left: 6px; }
  .nd-r { right: 70px; padding: 4px 4px 4px 6px; }
  .nd-stats { min-width: 3.4em; }
  .nd-stats span { font-size: 10px; }
  .nd-stats b { font-size: 12px; }
  .nd-mid { padding: 3px 10px 4px; min-width: 6rem; }
  .nd-mid b { font-size: 11px; }
  .nd-hint { font-size: 11px; line-height: 1.4; }
  .nd-btn { font-size: 12px; padding: 11px 12px; }
  .nd-die { width: 28px; height: 28px; }
}
/* телефон стоя: плашки колонкой слева, кости и кнопки внизу, подсказка над ними */
@media (max-width: 640px) and (orientation: portrait) {
  .nd-plate { width: 146px; flex-wrap: wrap; row-gap: 2px; }
  .nd-r { left: 6px; right: auto; top: 72px; flex-direction: row; padding: 4px 6px 4px 4px; }
  .nd-r .pp-who { text-align: left; align-items: flex-start; }
  .nd-plate .pp-who { max-width: 84px; }
  .nd-stats { flex-direction: row; width: 100%; min-width: 0; justify-content: space-between; gap: 6px; }
  .nd-stats span { gap: .3em; }
  .nd-mid { top: 8px; left: 154px; transform: none; min-width: 0; text-align: left; }
  .nd-dock { bottom: 14px; gap: 8px; }
  .nd-hint { bottom: 82px; }
}
body.nardy-on, body.nardy-on #gl, body.nardy-on #ui { touch-action: none; overscroll-behavior: none; }
.mc-mode { flex-wrap: wrap; }
/* на титуле четыре чипа: на узком экране виден только выбранный, остальные листаются стрелками */
@media (max-width: 640px) { .game-pick .gp-chip:not(.on) { display: none; } }

/* ------------------------------------------------------------ БИЛЬЯРД (pool.js) */
#poolHud { position: absolute; inset: 0; pointer-events: none; }
#poolHud > * { position: absolute; }
#poolHud button, #poolHud .pl-power, #poolHud .pl-spin { pointer-events: auto; }
body.pool-on, body.pool-on #gl, body.pool-on #ui { touch-action: none; overscroll-behavior: none; }
.pl-plate { top: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; transition: filter .2s; }
.pl-plate:not(.on) { filter: brightness(.72) saturate(.8); }
.pl-plate.on { box-shadow: 0 0 0 2px #0a0a44, 4px 4px 0 2px rgba(0,0,0,.6), inset 0 0 0 2px var(--yellow), inset 0 0 0 4px #04043a; }
.pl-l { left: 10px; }
.pl-r { right: 92px; flex-direction: row-reverse; padding: 6px 6px 6px 10px; }
.pl-r .pp-who { text-align: right; align-items: flex-end; }
.pl-group { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 3em; }
.pl-r .pl-group { align-items: flex-end; }
.pl-gname { font-size: 10px; letter-spacing: .18em; color: var(--cyan); }
.pl-open { font-size: 10px; letter-spacing: .14em; color: #c8c8ff; }
.pl-balls { display: flex; gap: 2px; flex-wrap: wrap; max-width: 12.5em; }
.pl-b { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--c); color: #fff; font: 400 8px/1 var(--px); font-style: normal; border: 1px solid #000; text-shadow: 0 0 2px #000; }
.pl-b[data-st] { background: linear-gradient(#fff 0 25%, var(--c) 25% 75%, #fff 75%); color: #111; text-shadow: none; }
.pl-b.gone { opacity: .22; filter: grayscale(.8); }
.pl-mid { top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 14px 6px; text-align: center; min-width: 9rem; max-width: 34vw; }
.pl-mid small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--cyan); }
.pl-mid b { font-weight: 400; font-size: 13px; letter-spacing: .1em; color: var(--yellow); }
.pl-power { right: 8px; top: 74px; bottom: 120px; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; touch-action: none; }
.pl-power b { font-weight: 400; font-size: 9px; letter-spacing: .14em; color: var(--cyan); }
.pl-track { position: relative; flex: 1; width: 26px; background: #05052e; border: 2px solid #6a6af0; touch-action: none; }
.pl-fill { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(0deg, #2a9a4a 0 8px, #1c6a34 8px 10px); height: 55%; }
.pl-thumb { position: absolute; left: -9px; right: -9px; height: 16px; margin-top: -8px; background: var(--yellow); border: 2px solid #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.6); top: 55%; }
.pl-spin { left: 10px; bottom: 14px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 78%, #bfbfd8 100%); border: 3px solid #6a6af0; box-shadow: 3px 3px 0 rgba(0,0,0,.6); touch-action: none; }
.pl-spin::before { content: ''; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px; background: rgba(0,0,0,.18); }
.pl-spin::after { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 1px; background: rgba(0,0,0,.18); }
.pl-spin i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #d8262a; border: 2px solid #fff; left: 50%; top: 50%; z-index: 1; }
.pl-fine { left: 86px; bottom: 22px; display: flex; gap: 4px; }
.pl-fine button { font: 400 12px/1 var(--px); color: #fff; background: #14104c; border: 2px solid #6a6af0; padding: 10px 9px; cursor: pointer; touch-action: none; }
.pl-fine button:active { background: #2a2a9a; }
.pl-btn { left: 50%; transform: translateX(-50%); bottom: 18px; font: 400 15px/1 var(--px); letter-spacing: .14em; color: #0e0c16; background: var(--yellow); border-color: #fff; padding: 13px 22px; cursor: pointer; animation: ppmp .8s steps(2) infinite; }
.pl-btn.hidden, .pl-power.hidden, .pl-spin.hidden, .pl-fine.hidden { display: none; }
.pl-hint { left: 0; right: 0; bottom: 92px; text-align: center; font-size: 13px; padding: 0 90px; color: #fff; letter-spacing: .08em; pointer-events: none; }
@media (max-width: 640px) {
  .pl-plate { top: 8px; padding: 4px 6px 4px 4px; gap: 5px; }
  .pl-l { left: 6px; }
  .pl-r { right: 70px; padding: 4px 4px 4px 6px; }
  .pl-balls { max-width: 7.5em; }
  .pl-b { width: 11px; height: 11px; font-size: 6px; }
  .pl-mid { padding: 3px 10px 4px; min-width: 6rem; }
  .pl-mid b { font-size: 10px; }
  .pl-hint { font-size: 11px; line-height: 1.4; padding: 0 70px 0 12px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .pl-plate { width: 150px; flex-wrap: wrap; row-gap: 2px; }
  .pl-r { left: 6px; right: auto; top: 76px; flex-direction: row; padding: 4px 6px 4px 4px; }
  .pl-r .pp-who { text-align: left; align-items: flex-start; }
  .pl-plate .pp-who { max-width: 84px; }
  .pl-r .pl-group { align-items: flex-start; }
  .pl-group { width: 100%; }
  .pl-mid { top: 8px; left: 164px; transform: none; min-width: 0; text-align: left; max-width: 38vw; }
  .pl-power { top: 150px; bottom: 150px; }
  .pl-spin { bottom: 14px; }
  .pl-fine { left: 86px; bottom: 24px; }
  .pl-hint { bottom: 96px; }
}