/* ============================================================
   Игры (v461): pages/play.html, js/play.js
   ============================================================ */
.pl-app { --gold: #ffc93c; --ok: #2fd27a; --bad: #ff5a6e; max-width: 820px; margin: 0 auto; padding: 8px 0 40px; min-width: 0; }
.pl-app *, .pl-app *::before, .pl-app *::after { box-sizing: border-box; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pl-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text-muted); text-decoration: none; }
.pl-back:hover { color: var(--text); }
.pl-title { margin: 0; font-family: 'Russo One', 'Montserrat', sans-serif; font-weight: 400; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; }
.pl-title i { color: var(--gold); }
.pl-stage { position: relative; display: grid; }
.pl-screen { grid-area: 1 / 1; min-width: 0; animation: pl-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.pl-screen.is-out { animation: pl-out .3s cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }
@keyframes pl-in { from { opacity: 0; transform: translateX(34px) scale(.985); } }
@keyframes pl-out { to { opacity: 0; transform: translateX(-34px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .pl-screen, .pl-screen.is-out { animation-duration: .01s; } }

.pl-panel, .pl-intro, .pl-result, .pl-card, .pl-bd, .pl-wheel, .pl-chest, .pl-lobby, .pl-kon, .pl-rps-duel {
    position: relative; border-radius: 26px; padding: 24px; overflow: hidden; isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
                radial-gradient(70% 110% at 100% 100%, color-mix(in srgb, #f7931e 16%, transparent), transparent 60%),
                linear-gradient(160deg, color-mix(in srgb, var(--surface) 94%, #0b1030), color-mix(in srgb, var(--bg) 88%, #04060f)); }
.pl-intro, .pl-result, .pl-chest, .pl-rps-duel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.pl-intro h2, .pl-result h2, .pl-chest h2, .pl-wheel h2, .pl-lobby h2, .pl-rps-duel h2 { font-family: 'Russo One', 'Montserrat', sans-serif; font-weight: 400; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.15; margin: 0; }
.pl-emblem { --t: #ffc93c; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 32px; color: #fff; flex: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--t) 85%, #fff), color-mix(in srgb, var(--t) 65%, #000)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 18px 34px -16px var(--t);
    animation: pl-bob 3s ease-in-out infinite; }
.pl-emblem.tone-red { --t: #ff5a6e; } .pl-emblem.tone-purple { --t: #a98bff; } .pl-emblem.tone-blue { --t: #4fc3ff; } .pl-emblem.tone-green { --t: #2fd27a; }
@keyframes pl-bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.pl-lead { margin: 0; max-width: 560px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.pl-lead b { color: var(--text); }
.pl-muted { margin: 6px 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.pl-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; width: min(100%, 460px); }
.pl-rules li { position: relative; padding-left: 22px; font-size: 14px; color: var(--text-muted); }
.pl-rules li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 3px; background: var(--gold); transform: rotate(45deg); }
.pl-prizes { width: min(100%, 460px); margin-top: 6px; padding: 12px 14px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.pl-prizes-t { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.pl-prizes ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pl-prizes li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-muted); padding: 4px 8px; border-radius: 10px; }
.pl-prizes li b { color: var(--text); }
.pl-prizes li.is-on { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pl-prizes.is-inline { width: 100%; }
.pl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.pl-actions.is-col { flex-direction: column; align-items: stretch; }
.pl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 16px;
    border: 1px solid var(--border-soft); background: rgba(255, 255, 255, .06); color: var(--text); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none;
    transition: transform .2s, background .2s, box-shadow .25s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.pl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.pl-btn:disabled { opacity: .45; cursor: default; }
.pl-btn.is-main { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 28px -14px var(--accent); }
.pl-btn.is-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }
.pl-loading { display: flex; justify-content: center; gap: 8px; padding: 90px 0; }
.pl-loading span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: pl-dot 1s infinite ease-in-out; }
.pl-loading span:nth-child(2) { animation-delay: .15s; } .pl-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes pl-dot { 50% { transform: translateY(-10px); opacity: .5; } }

/* шапка партии */
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 36px; }
.pl-count, .pl-clock { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.pl-count b, .pl-clock b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-clock i { color: var(--gold); }
.pl-score { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-weight: 800; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pl-combo { font-weight: 800; color: var(--gold); font-size: 14px; }
.pl-shield { color: #4fc3ff; font-size: 20px; }
.pl-bar { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; margin-bottom: 14px; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pl-bar.is-time i { transition: none; background: linear-gradient(90deg, var(--ok), var(--gold)); }
.is-hurry .pl-bar.is-time i { background: linear-gradient(90deg, var(--bad), #ff8a3d); }
.is-hurry .pl-clock b { color: var(--bad); animation: pl-pulse .5s infinite alternate; }
@keyframes pl-pulse { to { transform: scale(1.08); } }

/* вопрос */
.pl-card { padding: 20px; }
.pl-mode { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pl-q { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(17px, 2.5vw, 22px); line-height: 1.35; margin: 0 0 16px; overflow-wrap: anywhere; }
.pl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pl-opt { --c: var(--accent); position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border-radius: 16px; text-align: left;
    border: 1.5px solid var(--border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, background .2s, box-shadow .25s, opacity .25s; animation: pl-opt .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); -webkit-tap-highlight-color: transparent; }
@keyframes pl-opt { from { opacity: 0; transform: translateY(8px); } }
.pl-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pl-opt:disabled { cursor: default; }
.pl-let { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: 'Russo One', sans-serif; font-size: 14px; color: #fff; background: color-mix(in srgb, var(--c) 22%, rgba(0, 0, 0, .2)); }
.pl-otext { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.pl-mark { flex: none; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pl-opts:has(.is-right) .pl-opt:not(.is-right):not(.is-wrong) { opacity: .42; }
.pl-opt.is-right { --c: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.pl-opt.is-right .pl-mark { opacity: 1; transform: none; color: var(--ok); } .pl-opt.is-right .pl-mark::before { content: '\f00c'; }
.pl-opt.is-wrong { --c: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); animation: pl-shake .45s; }
.pl-opt.is-wrong .pl-mark { opacity: 1; transform: none; color: var(--bad); } .pl-opt.is-wrong .pl-mark::before { content: '\f00d'; }
@keyframes pl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pl-after { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; animation: pl-opt .3s both; }
.pl-after[hidden] { display: none; }
.pl-verdict { margin: 0; font-family: 'Russo One', sans-serif; font-size: 20px; }
.pl-verdict.is-ok { color: var(--ok); } .pl-verdict.is-bad { color: var(--bad); }
.pl-ans { margin: 0; font-weight: 800; font-size: 16px; }
.pl-note { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.45; flex: 1 1 240px; }
.pl-qtimer { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 10px 0 12px; }
.pl-qtimer i { display: block; height: 100%; background: var(--gold); transform-origin: left; animation: pl-qt 10s linear both; }
.was-right .pl-qtimer i, .was-wrong .pl-qtimer i { animation-play-state: paused; }
@keyframes pl-qt { to { transform: scaleX(0); } }

/* картинка в «угадай» */
.pl-pic { position: relative; width: min(100%, 280px); aspect-ratio: 1; margin: 0 auto; border-radius: 22px; overflow: hidden; background: radial-gradient(circle, #3a3480, #14123a); display: grid; place-items: center; }
.pl-pic.is-map { width: min(100%, 300px); aspect-ratio: 3 / 4; }
.pl-pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s; transform-origin: var(--ox, 50%) var(--oy, 40%); user-select: none; -webkit-user-drag: none; }
.pl-pic.is-map img { object-fit: cover; }
.pl-pic.fx-zoom img { transform: scale(var(--z, 3.2)); }
.pl-pic.fx-blur img { filter: blur(14px) saturate(1.3); transform: scale(1.12); }
.pl-pic.fx-silhouette img { filter: brightness(0) drop-shadow(0 0 10px rgba(169, 139, 255, .9)); }
.pl-pic.is-map.fx-blur img { filter: blur(9px); }
.pl-pic.is-revealed img { transform: none; filter: none; }
.pl-pic-err { display: none; position: absolute; inset: 0; place-items: center; padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.pl-pic.is-err img { display: none; } .pl-pic.is-err .pl-pic-err { display: grid; }
.pl-pic.is-small { width: 120px; flex: none; border-radius: 18px; }
.pl-pic.is-lock { color: var(--text-dim); font-size: 26px; }

/* блиц */
.pl-blitz .pl-card { animation: pl-flash .25s both; }
@keyframes pl-flash { from { opacity: .3; transform: translateY(6px); } }
.is-blitz { position: relative; }
.pl-penalty { position: absolute; right: 12px; top: 40px; font-family: 'Russo One', sans-serif; font-size: 22px; color: var(--bad); animation: pl-float .9s ease-out both; pointer-events: none; }
@keyframes pl-float { to { opacity: 0; transform: translateY(-30px); } }

/* выше-ниже */
.pl-hl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.pl-hl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 22px; min-width: 0; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff 8%), var(--surface)); border: 1.5px solid var(--border-soft); animation: pl-in .4s both; }
.pl-hl-card.is-b { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pl-hl-icon { width: 72px; height: 72px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, .25); font-size: 28px; color: var(--text-dim); }
.pl-hl-icon img { width: 112%; height: 112%; object-fit: cover; }
.pl-hl-name { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-hl-card small { color: var(--text-dim); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-hl-tr { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 6px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pl-hl-tr i { color: var(--gold); } .pl-hl-tr b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }
.pl-hl-tr.is-hidden b { color: var(--text-dim); }
.pl-hl-vs { align-self: center; font-family: 'Russo One', sans-serif; font-size: 20px; color: var(--text-dim); }
.pl-hl-q { text-align: center; margin: 16px 0 10px; color: var(--text-muted); }
.pl-hl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-btn.is-up { border: 0; color: #fff; background: linear-gradient(135deg, #2fd27a, #13a35a); }
.pl-btn.is-down { border: 0; color: #fff; background: linear-gradient(135deg, #ff5a6e, #c9213d); }
.was-right .pl-hl-card.is-b { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.was-wrong .pl-hl-card.is-b { border-color: var(--bad); animation: pl-shake .45s; }

/* бравлдл */
.pl-bd-hints { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pl-bd-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-width: 0; }
.pl-hint { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.pl-hint small { font-size: 11.5px; color: var(--text-muted); } .pl-hint b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 22px; color: var(--gold); }
.pl-hint em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.pl-hint.is-lock b { color: var(--text-dim); font-size: 16px; }
.pl-bd-hl { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--text-dim); }
.pl-bd-input { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1.5px solid var(--border-soft); }
.pl-bd-input:focus-within { border-color: var(--accent); }
.pl-bd-input i { color: var(--text-dim); }
.pl-bd-input input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; font-weight: 700; outline: none; }
.pl-bd-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); box-shadow: 0 20px 40px -20px #000; }
.pl-bd-sug[hidden] { display: none; }
.pl-bd-sug li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.pl-bd-sug li.is-sel, .pl-bd-sug li:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-bd-sug img { width: 30px; height: 30px; object-fit: contain; }
.pl-bd-sug small { margin-left: auto; color: var(--text-dim); }
.pl-bd-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.pl-bd-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-soft); animation: pl-in .35s both; flex-wrap: wrap; }
.pl-bd-row.is-empty { border-style: dashed; background: none; animation: none; }
.pl-bd-row.is-hit { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pl-bd-pin img { width: 34px; height: 34px; object-fit: contain; display: block; }
.pl-bd-row b { font-size: 15px; }
.pl-bd-tags { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pl-bd-tags em { font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.pl-bd-tags em.is-hit { background: var(--ok); color: #04210f; } .pl-bd-tags em.is-close { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pl-bd-tags em.is-letter { color: #4fc3ff; background: color-mix(in srgb, #4fc3ff 14%, transparent); }
.pl-bd-done { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid var(--border-soft); }
.pl-bd-done.is-win { border-color: var(--ok); }
.pl-bd-done p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.pl-bd .pl-prizes { margin-top: 14px; }

/* колесо */
.pl-wheel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.pl-wh-box { position: relative; width: min(100%, 360px); margin: 0 auto; }
.pl-wh-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.pl-wh-rot { transform-origin: 160px 160px; }
.pl-wh-svg path { stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.pl-wh-svg path.is-big { filter: brightness(1.12); }
.pl-wh-t { font-family: 'Russo One', sans-serif; font-size: 19px; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; }
.pl-wh-dc { font: 800 10px 'Montserrat', sans-serif; fill: rgba(255, 255, 255, .85); }
.pl-wh-c { font-family: 'Russo One', sans-serif; font-size: 16px; fill: #ffc93c; }
.pl-wh-ptr { position: absolute; left: 50%; top: -6px; z-index: 2; width: 30px; height: 36px; transform: translateX(-50%); background: linear-gradient(180deg, #fff, #ffc93c); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.pl-wh-side { display: flex; flex-direction: column; gap: 10px; }
.pl-bal { margin: 0; font-size: 14px; color: var(--text-muted); } .pl-bal b { color: var(--gold); }
.pl-wh-res { margin: 0; min-height: 30px; font-family: 'Russo One', sans-serif; font-size: 24px; color: var(--gold); animation: pl-in .4s both; }
@media (max-width: 680px) { .pl-wheel { grid-template-columns: minmax(0, 1fr); } .pl-wh-side { text-align: center; } }

/* сундук */
.pl-chest-art { position: relative; width: 150px; height: 120px; margin: 4px auto 6px; }
.pl-chest-body { position: absolute; left: 10px; right: 10px; bottom: 0; height: 64px; border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #a7612a, #6d3a12); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), inset 0 0 0 4px #ffc93c; }
.pl-chest-lid { position: absolute; left: 6px; right: 6px; top: 14px; height: 50px; border-radius: 40px 40px 10px 10px; background: linear-gradient(180deg, #c27838, #8a4a1f); box-shadow: inset 0 0 0 4px #ffc93c; transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); z-index: 2; }
.pl-chest-lock { position: absolute; left: 50%; top: 52px; width: 22px; height: 26px; border-radius: 6px; transform: translateX(-50%); background: #ffc93c; z-index: 3; transition: opacity .3s; }
.pl-chest-glow { position: absolute; left: 50%; top: 40px; width: 120px; height: 80px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 60, .9), transparent 70%); opacity: 0; transition: opacity .6s .3s; }
.pl-chest-art:not(.is-open) { animation: pl-wiggle 2.6s ease-in-out infinite; }
@keyframes pl-wiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }
.pl-chest-art.is-open .pl-chest-lid { transform: rotateX(70deg) translateY(-14px); }
.pl-chest-art.is-open .pl-chest-lock { opacity: 0; }
.pl-chest-art.is-open .pl-chest-glow { opacity: 1; }
.pl-chest .pl-card { width: 100%; text-align: left; margin-top: 6px; }
.pl-chest-log { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 6px; text-align: left; }
.pl-chest-log li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); }
.pl-chest-log li.is-ok > i { color: var(--ok); } .pl-chest-log li.is-bad > i { color: var(--bad); }
.pl-chest-log span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .pl-chest-log small { color: var(--text-muted); }
.pl-dots { display: flex; gap: 6px; }
.pl-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); }
.pl-dots i.is-ok, .pl-dots i.is-goal { background: var(--ok); } .pl-dots i.is-bad, .pl-dots i.is-miss { background: var(--bad); }

/* аркады */
.pl-tir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 24px; user-select: none; touch-action: manipulation;
    background: radial-gradient(120% 90% at 50% 0%, #2c7a3f, #164424); border: 1px solid rgba(255, 255, 255, .08); }
.pl-hole { position: relative; aspect-ratio: 1; border-radius: 18px; background: radial-gradient(60% 40% at 50% 85%, rgba(0, 0, 0, .45), transparent 70%); overflow: visible; }
.pl-bush { position: absolute; left: 4%; right: 4%; bottom: 0; height: 46%; z-index: 2; border-radius: 50% 50% 20px 20px;
    background: radial-gradient(circle at 25% 40%, #3fbf5a 0 28%, transparent 30%), radial-gradient(circle at 70% 35%, #39b052 0 30%, transparent 32%), radial-gradient(circle at 50% 70%, #2f9a47 0 45%, transparent 47%);
    filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, .12)); pointer-events: none; }
.pl-target { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 72%; z-index: 1; border: 0; padding: 0; background: none; cursor: crosshair; animation: pl-pop-up .18s cubic-bezier(.2, .8, .2, 1.4) both; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pl-target img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.pl-target.is-gold img { filter: drop-shadow(0 0 10px #ffc93c) sepia(.4) saturate(2); }
.pl-target.is-gold::after { content: '×2'; position: absolute; top: -6px; right: -6px; font: 800 12px 'Montserrat', sans-serif; color: #1a1300; background: #ffc93c; border-radius: 8px; padding: 1px 5px; }
.pl-kon-face { font-size: clamp(34px, 9vw, 56px); display: grid; place-items: center; height: 100%; }
.pl-target.is-hit { animation: pl-hit .22s both; } .pl-target.is-gone { animation: pl-down .2s both; }
@keyframes pl-pop-up { from { transform: translateY(80%); } }
@keyframes pl-down { to { transform: translateY(80%); opacity: 0; } }
@keyframes pl-hit { to { transform: scale(1.3) rotate(10deg); opacity: 0; } }
.pl-pop { position: absolute; left: 50%; top: 10%; z-index: 4; transform: translateX(-50%); font-family: 'Russo One', sans-serif; font-size: 22px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; animation: pl-float .7s ease-out both; }
.pl-pop.is-bad { color: var(--bad); }
.pl-arena { position: relative; height: min(64vh, 520px); border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #232057, #0d0b26); border: 1px solid rgba(255, 255, 255, .08); touch-action: none; }
.pl-arena canvas { width: 100%; height: 100%; display: block; }
.pl-arena-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.pl-arena-hint[hidden] { display: none; }

/* пенальти */
.pl-pen { position: relative; padding: 18px 14px 120px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #1b2b5a 0%, #1f6b3a 48%, #2a8a4a 100%); }
.pl-goal { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; aspect-ratio: 2.4; width: min(100%, 520px); margin: 0 auto;
    border: 6px solid #f4f6fb; border-bottom: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 14px), rgba(0, 0, 0, .15); }
.pl-zone { border: 1px dashed rgba(255, 255, 255, .15); background: none; color: rgba(255, 255, 255, .35); font-size: 20px; cursor: pointer; transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.pl-zone:hover:not(:disabled) { background: rgba(255, 201, 60, .18); color: #ffc93c; }
.pl-zone:disabled { cursor: default; }
.pl-keeper { --kx: 50%; --ky: 64%; --kr: 0deg; position: absolute; left: 50%; top: 64%; width: 18%; aspect-ratio: .7; transform: translate(-50%, -50%); transition: left .45s cubic-bezier(.3, 1.2, .5, 1), top .45s cubic-bezier(.3, 1.2, .5, 1), transform .45s; pointer-events: none; }
.pl-keeper.is-dive { left: var(--kx); top: var(--ky); transform: translate(-50%, -50%) rotate(var(--kr)); }
.pl-keeper-body { position: absolute; inset: 0; border-radius: 40% 40% 30% 30%; background: linear-gradient(180deg, #ff9d3a 0 36%, #2b2b3a 36%); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); }
.pl-keeper-body::before, .pl-keeper-body::after { content: ''; position: absolute; top: 30%; width: 32%; height: 22%; border-radius: 40%; background: #ffe7c4; }
.pl-keeper-body::before { left: -26%; } .pl-keeper-body::after { right: -26%; }
.pl-ball { --tx: 0px; --ty: 0px; position: absolute; left: 50%; bottom: 26px; font-size: 40px; line-height: 1; transform: translate(-50%, 0); transition: none; pointer-events: none; }
.pl-ball.is-shot { left: 0; bottom: auto; top: 0; transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(.6) rotate(540deg); transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.pl-ball:not(.is-shot) { transform: translate(-50%, 0); }
.pl-pen-msg { position: absolute; left: 0; right: 0; bottom: 74px; margin: 0; text-align: center; font-family: 'Russo One', sans-serif; font-size: 22px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pl-pen-msg.is-goal { color: #ffe07a; font-size: 34px; animation: pl-pulse .4s 3 alternate; } .pl-pen-msg.is-save, .pl-pen-msg.is-miss { color: #ffb3bd; }

/* Кон */
.pl-kon-stage { position: relative; display: block; width: min(100%, 420px); aspect-ratio: 1; margin: 6px auto 10px; border: 0; padding: 0; border-radius: 28px; cursor: pointer; overflow: hidden;
    background: radial-gradient(circle at 50% 45%, #3a3480, #14123a); touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.pl-kon-stage.is-bump .pl-kon-cv { animation: pl-bump .18s; }
@keyframes pl-bump { 50% { transform: scale(.96); } }
.pl-kon-cv { width: 100%; height: 100%; display: block; }
.pl-kon-emoji { display: grid; place-items: center; height: 100%; font-size: 120px; }
.pl-kon-tap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .7); pointer-events: none; }
.pl-kon-stage .pl-pop { top: auto; transform: translate(-50%, -50%); }
.pl-kon .pl-lead { margin: 0 auto; text-align: center; }
.pl-kon .pl-muted { text-align: center; }

/* лобби PvP */
.pl-lobby-hero { display: flex; gap: 16px; align-items: flex-start; }
.pl-lobby-hero h2 { margin-bottom: 6px; }
.pl-create { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0 6px; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); }
.pl-create.is-col { flex-direction: column; align-items: stretch; }
.pl-create > span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { height: 38px; min-width: 52px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.pl-chip.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.pl-h3 { margin: 18px 0 8px; font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--text-muted); }
.pl-lobby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pl-lobby-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 54px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-soft); }
.pl-lobby-row .pl-who { flex: 1 1 140px; }
.pl-lobby-row em { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
em.is-win { color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 14%, transparent) !important; }
em.is-lose { color: var(--bad) !important; background: color-mix(in srgb, var(--bad) 14%, transparent) !important; }
em.is-tie { color: var(--gold) !important; }
.pl-empty { justify-content: center; color: var(--text-muted); font-size: 13.5px; padding: 14px; border-radius: 16px; border: 1px dashed var(--border-soft); list-style: none; text-align: center; }
.pl-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pl-av { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; font-weight: 800; }
.pl-av img, .pl-av video { width: 100%; height: 100%; object-fit: cover; }
.pl-stake { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--gold); }
.pl-prize { font-size: 12.5px; color: var(--text-muted); }
.pl-vs-line { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 0; font-size: 14px; }
.pl-rps-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.pl-rps-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; cursor: pointer; transition: transform .2s, border-color .2s; }
.pl-rps-pick i { font-size: 24px; color: var(--gold); } .pl-rps-pick b { font-size: 14px; } .pl-rps-pick small { font-size: 11.5px; color: var(--text-dim); }
.pl-rps-pick:hover { transform: translateY(-2px); } .pl-rps-pick.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.pl-bot { margin-top: 10px; } .pl-bot-res { margin: 10px 0 0; min-height: 22px; font-size: 14px; color: var(--text-muted); } .pl-bot-res em { font-style: normal; font-weight: 800; }
.pl-rps-res { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pl-rps-res > span { font-family: 'Russo One', sans-serif; color: var(--text-dim); }
.pl-rps-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pl-rps-flip { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; font-size: 36px; color: var(--gold); background: rgba(0, 0, 0, .25); border: 1.5px solid var(--border-soft); animation: pl-flip .6s both; }
.pl-rps-card b { font-size: 15px; } .pl-rps-card small { font-size: 12px; color: var(--text-muted); }
@keyframes pl-flip { from { transform: rotateY(90deg); } }

/* итог */
.pl-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.pl-big { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0; }
.pl-big > b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: clamp(48px, 9vw, 72px); line-height: 1; background: linear-gradient(180deg, #fff, #ffd98a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-big small { color: var(--text-muted); font-size: 14px; }
.pl-result.is-win { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.pl-sub { margin: 0; color: var(--text-muted); font-size: 14px; } .pl-sub b { color: var(--text); }
.pl-got { margin: 0; font-weight: 800; color: var(--gold); font-size: 16px; }
.pl-best { margin: 0; font-size: 13.5px; color: var(--text-muted); } .pl-best i { color: var(--gold); } .pl-best b { color: var(--text); }

/* рейтинг */
.pl-board { margin-top: 18px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-soft); }
.pl-board[hidden] { display: none; }
.pl-board-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-board-h h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; display: inline-flex; gap: 8px; align-items: center; }
.pl-board-h h3 i { color: var(--gold); }
.pl-board-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); }
.pl-bseg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.pl-bseg button { border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.pl-bseg button.is-on { background: var(--accent); color: #fff; }
.pl-board-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.pl-board-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; }
.pl-board-list li.is-me { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pl-board-list li .pl-who { flex: 1; }
.pl-board-list li > b { font-family: 'Russo One', sans-serif; font-weight: 400; color: var(--gold); }
.pl-place { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); }
.pl-place.p1 { background: linear-gradient(135deg, #ffe07a, #ff9d3a); color: #1a1300; } .pl-place.p2 { background: #cfd6e2; color: #1a1d26; } .pl-place.p3 { background: #d9935a; color: #1a0f05; }
.pl-me { margin: 10px 0 0; font-size: 13.5px; color: var(--text-muted); }
.pl-last { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--text-muted); }
.pl-last span { font-weight: 800; color: var(--text); } .pl-last em { font-style: normal; }

@media (max-width: 640px) {
    .pl-intro, .pl-result, .pl-bd, .pl-wheel, .pl-chest, .pl-lobby, .pl-kon, .pl-rps-duel { padding: 18px 14px; border-radius: 22px; }
    .pl-card { padding: 16px 14px; }
    .pl-opts { grid-template-columns: 1fr; }
    .pl-opt { min-height: 52px; }
    .pl-actions .pl-btn { flex: 1 1 100%; }
    .pl-hl-icon { width: 56px; height: 56px; }
    .pl-hl-tr b { font-size: 18px; }
    .pl-bd-hints { flex-direction: column; align-items: stretch; }
    .pl-bd-hints .pl-pic.is-small { margin: 0 auto; }
    .pl-lobby-hero { flex-direction: column; align-items: center; text-align: center; }
    .pl-tir { gap: 6px; padding: 10px; }
    .pl-pen { padding-bottom: 110px; }
}
/* шаринг бравлдла (v462) */
.pl-bd-done > div { min-width: 0; flex: 1; }
.pl-share { display: flex; gap: 8px; margin-top: 10px; }
.pl-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 42px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    font: inherit; font-weight: 800; font-size: 13.5px; color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); transition: transform .15s; }
.pl-share-btn:hover { transform: translateY(-2px); }
.pl-share-btn.is-main { flex: 1; border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.pl-share-btn.is-tg { color: #fff; background: #229ed9; border: 0; }

/* v465: выключенная игра */
.pl-off { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; text-align: center; }
.pl-off > i { font-size: 40px; color: var(--text-muted); }
.pl-off h2 { margin: 0; font-family: 'Russo One', sans-serif; font-weight: 400; }
.pl-off p { margin: 0 0 8px; color: var(--text-muted); }