/* Game Hub — anime-sport look (v0.7): ink outlines, hard offset shadows, speed lines, halftone, slanted type.
   Dela Gothic One (display, numbers, buttons — always slanted -8°, one weight) + Rubik (body, labels). Both self-hosted.
   This file: tokens, base components and the in-game HUDs. The screens (hub, ranking, profile ...) are in screens.css. */
@font-face { font-family: 'Rubik'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(../fonts/rubik-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(../fonts/rubik-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(../fonts/rubik-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Dela Gothic One'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/dela-gothic-one-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Dela Gothic One'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/dela-gothic-one-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Dela Gothic One'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/dela-gothic-one-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Dela Gothic One'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/dela-gothic-one-jp.woff2) format('woff2'); unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF; }

:root {
  --ink: #0D1020; --navy: #1B2140; --paper: #F7F3EA; --mute: #5B6076; --mist: #C9D2E3;
  --hot: #FF4B2B; --hotD: #C42A10; --volt: #FFD400; --voltD: #E6BC00; --wood: #E7B46A; --woodD: #B47A2C;
  --cobalt: #2D5BFF; --cobaltD: #1B3DB8; --ice: #2ED0F5; --iceD: #0E8EB5; --green: #16B97A; --greenD: #0B7A50; --red: #E0443C; --redD: #B8230C;
  --violet: #7B4DFF; --violetD: #4B2BC2;
  --disp: 'Dela Gothic One', Rubik, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ui: Rubik, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sk: skewX(-8deg);
  --safeT: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safeB: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --tabH: 66px; --dkw: 66px; --dkh: 94px; --dkt: 57px;
  --w: min(100vw, 430px);
  /* the colour a game uses everywhere: card, game page, ranking tab */
  --g: var(--cobalt); --gd: var(--cobaltD); --gs: var(--cobalt); --gt: #fff;
}
[data-g="tt"] { --g: var(--cobalt); --gd: var(--cobaltD); --gs: var(--cobalt); --gt: #fff; }
[data-g="pool"] { --g: var(--green); --gd: var(--greenD); --gs: var(--green); --gt: var(--ink); }
[data-g="air"] { --g: var(--ice); --gd: var(--iceD); --gs: var(--cobalt); --gt: var(--ink); }
[data-g="chess"] { --g: var(--violet); --gd: var(--violetD); --gs: var(--violet); --gt: #fff; }
[data-g="checkers"] { --g: var(--wood); --gd: var(--woodD); --gs: #F2A93B; --gt: var(--ink); }
[data-g="pen"] { --g: var(--hot); --gd: var(--hotD); --gs: var(--hot); --gt: #fff; }
[data-g="durak"] { --g: #14B8A6; --gd: #0B7F73; --gs: #14B8A6; --gt: var(--ink); }
[data-g="orb"] { --g: #FF4FA3; --gd: #C41F74; --gs: #FF4FA3; --gt: #fff; }
[data-g="overall"] { --g: var(--volt); --gd: var(--voltD); --gs: var(--hot); --gt: var(--ink); }
/* tiers: Rookie · Amateur · Club player · Pro · Master · Legend */
[data-tier="0"] { --tc: #8A90AD; --tt: var(--ink); } [data-tier="1"] { --tc: var(--green); --tt: var(--ink); } [data-tier="2"] { --tc: var(--cobalt); --tt: #fff; }
[data-tier="3"] { --tc: #7B3FF2; --tt: #fff; } [data-tier="4"] { --tc: var(--hot); --tt: #fff; } [data-tier="5"] { --tc: var(--volt); --tt: var(--ink); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink); font: 500 15px/1.4 var(--ui);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, .sw:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* the page paints the backdrop of the games whose canvas is transparent (billiard, air hockey, chess, checkers) */
#stage { position: fixed; inset: 0; background: var(--ink); overflow: hidden; }
#stage.off { display: none; }
#stage .srays { position: absolute; left: 50%; top: 42%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.055) 0 4deg, transparent 4deg 11deg); }
#stage .sdots { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; opacity: .6; background-image: radial-gradient(circle at center, var(--cobalt) 1.8px, transparent 2.4px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
#stage.menu { background: var(--g); }
#stage.menu .srays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.2) 0 4deg, transparent 4deg 11deg); animation: spin 200s linear infinite; }
#stage.menu .sdots { opacity: .5; background-image: radial-gradient(circle at center, var(--gd) 1.8px, transparent 2.4px); }
#c { touch-action: none; }
#fx { pointer-events: none; z-index: 60; }
.layer { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }

/* ---------- shared pieces ---------- */
.sk { display: inline-block; transform: var(--sk); }
.jp { font: 400 11px/1 var(--disp); background: var(--ink); color: #fff; padding: 7px 10px; border-radius: 5px; transform: var(--sk); white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--hot); color: #fff; border: 3px solid var(--volt); display: grid; place-items: center; font: 400 15px/1 var(--disp); overflow: hidden; flex: none; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 36px; height: 36px; font-size: 16px; border: 3px solid #fff; background: var(--ink); }
.avatar.sm.opp { background: #2B3350; }
.avatar.big { width: 118px; height: 118px; font-size: 54px; border: 6px solid #fff; box-shadow: 5px 6px 0 var(--ink); background: var(--ink); }
.tiertag { display: inline-block; transform: var(--sk); background: var(--tc, var(--green)); color: var(--tt, var(--ink)); font: 400 11px/1 var(--disp); padding: 6px 11px; border-radius: 5px; border: 2.5px solid var(--ink); white-space: nowrap; text-transform: uppercase; }
.ratingpill { display: inline-flex; align-items: baseline; gap: 8px; transform: var(--sk); background: #fff; border: 3px solid var(--ink); border-radius: 6px; padding: 4px 12px; }
.ratingpill small { font: 800 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ratingpill b { font: 400 19px/1 var(--disp); color: var(--ink); }
.bar { height: 20px; border: 3px solid #fff; border-radius: 6px; background: var(--navy); overflow: hidden; transform: var(--sk); }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--volt) 0 8px, var(--voltD) 8px 16px); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.halftone { position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle at center, var(--cobalt) 2px, transparent 2.6px); background-size: 8px 8px; background-position: 4px 4px; }
.halftone.top { top: 0; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.halftone.bot { bottom: 0; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }

/* buttons: slanted, ink border, hard shadow */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 22px; border: 4px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink);
  font: 400 18px/1.05 var(--disp); text-transform: uppercase; text-align: center; box-shadow: 5px 6px 0 var(--ink); transform: var(--sk); transition: transform .08s, box-shadow .08s, opacity .2s; }
.btn:active { transform: var(--sk) translate(3px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--hot); color: #fff; }
.btn.big { min-height: 72px; flex-direction: column; gap: 6px; font-size: 25px; }
.btn.big small { font: 800 11px/1 var(--ui); letter-spacing: .2em; opacity: .92; }
.btn .ic { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.btn .ic.line { fill: none; stroke-width: 2.3; }
.btn.ghost { background: transparent; box-shadow: none; border-color: currentColor; color: var(--ink); min-height: 48px; font-size: 16px; border-width: 3px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.dark .btn.primary, .btn.primary.onink { border-color: #fff; box-shadow: 5px 6px 0 var(--cobalt); }
.dark .btn.secondary { background: var(--navy); color: #fff; border: 3px solid #fff; box-shadow: none; }
.dark .btn.secondary:active { transform: var(--sk) translate(0, 2px); }
.dark .btn.ghost { color: #fff; }
.btn.sm { flex: 1; min-height: 46px; border-radius: 12px; font-size: 14px; padding: 0 10px; border-width: 3px; box-shadow: 3px 4px 0 var(--ink); }
.duo { display: flex; gap: 12px; }
.duo .btn { flex: 1 1 auto; min-height: 54px; padding: 6px 8px; font-size: 14px; gap: 8px; border-width: 3px; box-shadow: none; }
.duo .btn > span:not(.ic), #btnFind #tFind { min-width: 0; white-space: nowrap; overflow: hidden; }
.duo .btn { min-width: 0; }
.duo .btn .ic { width: 22px; height: 22px; }

/* round icon buttons (back, trophy, pause) */
.iconbtn { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); display: grid; place-items: center; pointer-events: auto; flex: none; transition: transform .08s, box-shadow .08s; }
.iconbtn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.iconbtn svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn.fillsvg svg { fill: var(--ink); stroke-width: 1.6; }
.topleft { position: absolute; left: 16px; top: calc(var(--safeT) + 14px); z-index: 3; }
.topright { position: absolute; right: 16px; top: calc(var(--safeT) + 14px); z-index: 3; }

/* segmented choice (difficulty, tabs, camera, language) */
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; min-height: 48px; border: 3px solid rgba(255,255,255,.35); border-radius: 10px; background: var(--navy); color: #fff; font: 900 14px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; transform: var(--sk); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.seg button.on { background: var(--volt); color: var(--ink); border-color: var(--ink); box-shadow: 3px 4px 0 var(--hot); }
.seg button { min-width: 0; }
@media (max-width: 400px) { .seg { gap: 6px; } .seg button { font-size: 12.5px; letter-spacing: .05em; gap: 5px; padding: 0 3px; } .seg button .lv { width: 13px; } }
.seg button .lv { width: 16px; height: 14px; flex: none; }
.seg button .lv rect { fill: rgba(128,128,150,.5); }
.seg button[data-v=easy] .lv rect:nth-child(-n+1), .seg button[data-v=normal] .lv rect:nth-child(-n+2), .seg button[data-v=hard] .lv rect { fill: #fff; }
.seg button.on .lv rect { fill: rgba(13,16,32,.25); }
.seg button.on[data-v=easy] .lv rect:nth-child(-n+1), .seg button.on[data-v=normal] .lv rect:nth-child(-n+2), .seg button.on[data-v=hard] .lv rect { fill: var(--ink); }

/* ---------- HUD (all games): slanted score plates ---------- */
.score, .pp, .bp { transform: var(--sk); background: var(--navy); border: 3px solid #fff; border-radius: 12px; box-shadow: 4px 5px 0 var(--ink); color: #fff; }
.score.left, .pp.left, .bp.me { background: var(--hot); }
.score { position: absolute; top: calc(var(--safeT) + 10px); width: min(160px, calc(50% - 32px)); display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; }
.score .avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.score.left { left: 10px; } .score.right { right: 10px; flex-direction: row-reverse; padding: 6px 8px 6px 12px; }
.score .num { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.score.right .num { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
.score b { font: 400 32px/1 var(--disp); color: #fff; text-shadow: 2px 2px 0 var(--ink); display: inline-block; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.score b.pop { transform: scale(1.35); }
.score i { font: 900 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; font-style: normal; max-width: 64px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: var(--volt); border: 2.5px solid var(--ink); opacity: 0; transition: opacity .2s; position: absolute; top: -8px; box-sizing: border-box; }
.score.left .dot { right: 10px; } .score.right .dot { left: 10px; }
.dot.on { opacity: 1; }
.pausebtn { position: absolute; left: 50%; top: calc(var(--safeT) + 12px); margin-left: -24px; z-index: 2; }
.pill { position: absolute; left: 50%; top: calc(var(--safeT) + 112px); transform: translate(-50%, 0) scale(.6); opacity: 0; text-align: center; white-space: nowrap; pointer-events: none; z-index: 3;
  font: 400 24px/1.05 var(--disp); text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); padding: 8px 18px 9px; }
.pill small { display: block; font: 900 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; margin-top: 6px; background: var(--volt); border: 2.5px solid var(--ink); border-radius: 5px; padding: 4px 9px; transform: rotate(-2deg); width: max-content; margin-left: auto; margin-right: auto; }
.pill small:empty { display: none; }
.pill.me { color: var(--hot); } .pill.opp { color: #fff; } .pill.let { color: var(--mist); }
.pill::before { content: ''; position: absolute; left: 50%; top: 50%; width: 270px; height: 150px; margin: -78px 0 0 -135px; z-index: -1; opacity: .96;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' preserveAspectRatio='none'%3E%3Cpolygon points='98,0 56,14 82,42 36,38 38,86 8,52 -4,98 -26,56 -62,84 -50,38 -92,36 -56,12 -98,-8 -52,-20 -76,-62 -30,-40 -22,-92 2,-48 38,-84 40,-34 80,-44 56,-8' fill='%23FFD400' stroke='%230D1020' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pill.show { animation: pillIn 1.5s ease both; }
@keyframes pillIn { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6) rotate(-6deg); } 13% { opacity: 1; transform: translate(-50%, 0) scale(1.08) rotate(-3deg); } 20% { transform: translate(-50%, 0) scale(1) rotate(-3deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px) scale(1) rotate(-3deg); } }
.chip { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; box-shadow: 3px 4px 0 var(--ink); padding: 8px 16px; font: 700 13px/1.25 var(--ui); white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 150px); opacity: 0; transition: opacity .25s; pointer-events: none; }
.chip.show { opacity: 1; }
.chip.fire { background: var(--volt); color: var(--ink); }
.rally { position: absolute; left: 50%; top: calc(var(--safeT) + 70px); transform: translateX(-50%) var(--sk); display: flex; align-items: baseline; gap: 6px; color: var(--ink); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.rally.show { opacity: 1; } .rally:not(.show) { transition-duration: .05s; }
.rally small { font: 900 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 7px; border-radius: 4px; }
.rally b { font: 400 30px/1 var(--disp); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--ink); display: inline-block; }
.rally b.pop { animation: rpop .22s cubic-bezier(.3,1.6,.5,1); }
.rally.hot b { color: var(--volt); text-shadow: 2px 3px 0 var(--hot), 4px 5px 0 var(--ink); }
@keyframes rpop { 0% { transform: scale(1.6) rotate(-6deg); } 100% { transform: none; } }

/* rocket button */
#rocket { position: absolute; right: 8px; top: 46%; margin-top: -40px; width: 80px; height: 80px;   /* v0.14.10: beside the right end of the net (where the player circled it): out of the ball's way, equally neutral for both sides */
   pointer-events: auto; touch-action: none; filter: drop-shadow(0 3px 0 var(--ink)); }
#rocket svg { width: 100%; height: 100%; overflow: visible; }
#rocket .rk-base { fill: #fff; stroke: var(--ink); stroke-width: 3; }
#rocket .rk-halo { fill: var(--hot); opacity: 0; }
#rocket .rk-glyph path, #rocket .rk-glyph circle { fill: var(--mute); }
#rocket .rk-glyph .win { fill: #fff; } #rocket .rk-glyph .flame { opacity: .8; }
#rocket .seg { fill: none; stroke: var(--mist); stroke-width: 4; stroke-linecap: round; }
#rocket .seg.on { stroke: var(--hot); }
#rocket .rk-prog { fill: none; stroke: var(--volt); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: stroke-dashoffset .25s linear; }
#rocket .rk-num { font: 400 22px var(--disp); fill: #fff; opacity: 0; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
#rocket[data-state="ready"] .rk-base { fill: var(--hot); stroke: var(--ink); }
#rocket[data-state="ready"] .rk-halo { opacity: .25; animation: pulse 1.3s ease-in-out infinite; transform-origin: 42px 42px; }
#rocket[data-state="ready"] .rk-glyph path, #rocket[data-state="ready"] .rk-glyph circle { fill: #fff; }
#rocket[data-state="ready"] .rk-glyph .win { fill: var(--hot); } #rocket[data-state="ready"] .rk-glyph .flame { fill: var(--volt); }
#rocket[data-state="ready"] .seg { opacity: 0; }
#rocket[data-state="active"] .rk-base { fill: var(--hot); }
#rocket[data-state="active"] .rk-glyph, #rocket[data-state="active"] .seg { opacity: 0; }
#rocket[data-state="active"] .rk-prog, #rocket[data-state="active"] .rk-num { opacity: 1; }
#rocket[data-state="active"].ending { animation: blink .5s steps(2) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.94); opacity: .14; } 50% { transform: scale(1.1); opacity: .32; } }
@keyframes blink { 50% { opacity: .35; } }
body.paused #hint, body.paused #rocket, body.paused .pill { visibility: hidden; }

/* ---------- billiards + air hockey: player plates ---------- */
#pc, #ac, #bc { touch-action: none; }
.pp { position: absolute; top: calc(var(--safeT) + 10px); width: calc(50% - 36px); max-width: 190px; padding: 6px 10px 7px 8px; transition: box-shadow .2s; }
.pp.left { left: 10px; } .pp.right { right: 10px; }
.pp.on { box-shadow: 0 0 0 4px var(--volt), 4px 5px 0 4px var(--ink); }
.ppmain { display: flex; align-items: center; gap: 7px; }
.pp.right .ppmain { justify-content: flex-end; }
.ppinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pp.right .ppinfo { align-items: flex-end; }
.ppinfo b { font: 900 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ppnum { font: 400 28px/1 var(--disp); font-style: normal; color: #fff; text-shadow: 2px 2px 0 var(--ink); display: inline-block; transition: transform .18s cubic-bezier(.3,1.6,.5,1); min-width: 1ch; text-align: center; }
.ppnum.pop { transform: scale(1.4); }
.pips { display: grid; grid-template-columns: repeat(4, 11px); gap: 2px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255,255,255,.88); box-sizing: border-box; opacity: .45; }
.pips i.f { opacity: 1; background: #FBF7EE; animation: pipIn .35s cubic-bezier(.3,1.7,.5,1) both; }
#apPipsMe, #apPipsOpp { position: absolute; top: calc(100% + 9px); grid-template-columns: repeat(7, 10px); gap: 3px; }
#apPipsMe { left: 6px; } #apPipsOpp { right: 6px; }
#apPipsMe i, #apPipsOpp i { width: 10px; height: 10px; }
#apPipsMe i.f { background: var(--volt); } #apPipsOpp i.f { background: var(--ice); }
@keyframes pipIn { from { transform: scale(0); } to { transform: scale(1); } }
.ptimer { display: block; height: 5px; border-radius: 3px; background: rgba(13,16,32,.35); margin-top: 6px; overflow: hidden; visibility: hidden; }
.pp.on.timed .ptimer { visibility: visible; }
.ptimer i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: left center; }
.ptimer i.low { background: var(--volt); }
.pp.right .ptimer i { transform-origin: right center; }
#pPill, #aPill { top: calc(var(--safeT) + 132px); }
#pPill.me, #aPill.me, #bPill.me { color: var(--hot); } #pPill.opp, #aPill.opp, #bPill.opp { color: #fff; }
.turnchip { position: absolute; left: 50%; top: calc(var(--safeT) + 84px); transform: translateX(-50%) var(--sk); background: var(--ink); color: #fff; font: 400 11px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 6px; border: 2px solid #fff; white-space: nowrap; opacity: 0; transition: opacity .2s; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; }
.turnchip.show { opacity: 1; } .turnchip.mine { background: var(--hot); }
#pHint { top: auto; bottom: calc(var(--safeB) + 26px); max-width: calc(100vw - 210px); font-size: 13px; padding: 8px 12px; }
.spinbox { position: absolute; left: 12px; bottom: calc(var(--safeB) + 12px); width: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; touch-action: none; transition: opacity .2s; }
.spinbox canvas { position: static; width: 88px; height: 88px; border-radius: 50%; }
.spinbox small, .powerbox small { font: 900 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 3px 6px; border-radius: 4px; }
.powerbox { position: absolute; left: var(--pw-x, calc(100% - 52px)); top: var(--pw-top, 28%); height: var(--pw-h, 42%); width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: auto; touch-action: none; transition: opacity .2s; }
.ptrack { position: relative; flex: 1; width: 22px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(to bottom, var(--green), var(--volt) 55%, var(--hot)); box-shadow: 3px 4px 0 var(--ink); }
.pfill { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 0 0 8px 8px; background: rgba(247,243,234,.85); }
.pknob { position: absolute; left: 50%; top: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--hot); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.pknob::after { content: ''; position: absolute; left: 10px; right: 10px; top: 17px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85); box-shadow: 0 -6px 0 rgba(255,255,255,.85), 0 6px 0 rgba(255,255,255,.85); }
.spinbox.off, .powerbox.off { opacity: .32; pointer-events: none; }
body.paused #pHint, body.paused #pTurn, body.paused #aHint, body.paused #bHint, body.paused #bPill, body.paused .bpromo { visibility: hidden; }
#aHint { top: auto; bottom: calc(var(--safeB) + 22px); max-width: calc(100vw - 40px); font-size: 13px; padding: 8px 14px; }
@media (max-width: 340px) { .pips { grid-template-columns: repeat(4, 9px); } .pips i { width: 9px; height: 9px; } .ppnum { font-size: 22px; } .score b { font-size: 26px; } }

/* ---------- chess + checkers ---------- */
canvas.cardart { position: static; inset: auto; object-fit: cover; }
.bp { position: absolute; left: var(--bb-x); width: var(--bb-w); height: var(--bp-h); display: flex; align-items: center; gap: 9px; padding: 0 10px 0 8px; transition: box-shadow .2s; }
.bp.opp { top: calc(var(--bb-top) - var(--bp-h) - 14px); }
/* v0.14.8: the written move list, a strip above the opponent's panel (tap it to open the whole list) */
.bmoves { position: absolute; left: var(--bb-x); width: var(--bb-w); top: calc(var(--bb-top) - var(--bp-h) - 14px - 34px); height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; background: rgba(31,42,55,.62); border-radius: 8px; pointer-events: auto; scrollbar-width: none; z-index: 2; font: 800 13px/1 var(--ui); color: #fff; }
.bmoves::-webkit-scrollbar { display: none; }
.bmoves i { font-style: normal; font-weight: 700; opacity: .55; margin-left: 6px; flex: none; } .bmoves i:first-child { margin-left: 0; }
.bmoves b { font-weight: 800; flex: none; padding: 3px 5px; border-radius: 5px; } .bmoves b.cur { background: var(--volt); color: var(--ink); }
.bmoves u { text-decoration: none; opacity: .55; font-weight: 700; }
.bmoves.open { height: auto; max-height: 42vh; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; overflow-x: hidden; white-space: normal; padding: 8px 10px; row-gap: 6px; background: rgba(31,42,55,.94); z-index: 5; }
.bp.me { top: calc(var(--bb-bot) + 16px); }
.bp.on { box-shadow: 0 0 0 4px var(--volt), 4px 5px 0 4px var(--ink); }
.bpinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bname { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bname b { font: 900 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bname i { font: 400 11px/1 var(--disp); font-style: normal; color: var(--volt); flex: none; } .bname i:empty { display: none; }
.bcap { display: flex; align-items: center; gap: 4px; height: 18px; overflow: hidden; } .bcap:empty { display: none; }
.bc { display: inline-flex; align-items: center; flex: none; } .bc img { width: 18px; height: 18px; display: block; }
.bc b { font: 800 10px/1 var(--ui); color: #fff; margin-left: -1px; }
.bcap em { font: 400 11px/1 var(--disp); font-style: normal; color: var(--volt); margin-left: 2px; }
.bclock { display: none; font: 400 19px/1 var(--disp); font-style: normal; font-variant-numeric: tabular-nums; background: var(--ink); color: #fff; opacity: .55; border-radius: 8px; padding: 8px 10px; min-width: 70px; text-align: center; transition: opacity .2s, background .2s; }
.bp.timed .bclock { display: block; } .bclock.run { opacity: 1; } .bclock.low { background: #fff; color: #E5251B; outline: 3px solid #E5251B; outline-offset: -3px; }                  /* v0.14.10: low on time = red; the game goes on, nothing stops */
.bclock.low.run { animation: bclkLow 1s ease-in-out infinite; }
@keyframes bclkLow { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(229,37,27,.55); } 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(229,37,27,0); } }
.bthink { display: none; gap: 3px; align-items: center; margin-right: 4px; } .bp.thinking .bthink { display: flex; }
.bthink u { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: bdot 1s infinite ease-in-out; }
.bthink u:nth-child(2) { animation-delay: .15s; } .bthink u:nth-child(3) { animation-delay: .3s; }
@keyframes bdot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.bacts { position: absolute; left: var(--bb-x); width: var(--bb-w); top: calc(var(--bb-bot) + 16px + var(--bp-h) + 14px); display: flex; gap: 10px; align-items: center; pointer-events: auto; }
.bacts .iconbtn { width: 46px; height: 46px; }
.bacts .btn.sm { background: var(--navy); color: #fff; border: 3px solid #fff; box-shadow: none; }
.btn.sm.armed { background: var(--hot) !important; color: #fff; }
.bacts.nodraw #btnBDraw { display: none; }
.boffer { display: none; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.boffer span { flex: 1; font: 800 13px/1.15 var(--ui); text-align: left; text-wrap: balance; color: #fff; }
.boffer .btn.sm { flex: none; min-height: 42px; font-size: 13px; padding: 0 12px; }
.boffer .btn.primary.sm { background: var(--hot); border-color: #fff; }
.bacts.offer #btnBDraw, .bacts.offer #btnBResign { display: none; } .bacts.offer .boffer { display: flex; }
#bPill { top: calc(var(--bb-top) + var(--bb-w) * .4); z-index: 3; }
#bHint { top: calc(var(--bb-bot) + 16px + var(--bp-h) + 14px + 46px + 12px); max-width: calc(100vw - 36px); font-size: 13px; padding: 8px 14px; }
.bpromo { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 8px; padding: 10px; background: #fff; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 5px 6px 0 var(--ink); pointer-events: auto; z-index: 4; animation: bpop .25s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes bpop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.bpromo button { width: 62px; height: 62px; border-radius: 14px; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; overflow: hidden; padding: 0; }
.bpromo button:active { background: var(--volt); }
.bpromo canvas { position: static; inset: auto; width: 100%; height: 100%; }
@media (max-height: 560px) { .score b { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .bclock.low.run, .bthink u, .bpromo, .pill.show, #rocket .rk-halo { animation: none !important; } .pill.show { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- penalties HUD ---------- */
.npips { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.pp.right .npips { justify-content: flex-end; }
.npips i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255,255,255,.3); box-sizing: border-box; position: relative; flex: none; }
.npips i.g { background: var(--volt); animation: pipIn .35s cubic-bezier(.3,1.7,.5,1) both; }
.npips i.m { background: var(--red); animation: pipIn .35s cubic-bezier(.3,1.7,.5,1) both; }
.npips i.m::after { content: ''; position: absolute; inset: 1px; background: linear-gradient(45deg, transparent 40%, #fff 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #fff 40% 60%, transparent 60%); }
.turnchip.keep { background: var(--cobalt); }
.ntimer { position: absolute; left: 50%; top: calc(var(--safeT) + 120px); width: min(56vw, 230px); height: 9px; margin-left: calc(min(56vw, 230px) / -2); border: 2.5px solid var(--ink); border-radius: 6px; background: rgba(13,16,32,.55); overflow: hidden; opacity: 0; transition: opacity .15s; transform: var(--sk); }
.ntimer.show { opacity: 1; }
.ntimer i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: left center; }
.ntimer i.low { background: var(--volt); }
#nHint { top: auto; bottom: calc(var(--safeB) + 78px); }
.nready { position: absolute; left: 50%; bottom: calc(var(--safeB) + 26px); transform: translateX(-50%); background: var(--ink); color: #fff; border: 3px solid #fff; border-radius: 99px; padding: 7px 16px; font: 800 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .15s; white-space: nowrap; pointer-events: none; }
.nready.show { opacity: 1; }
body.paused #nHint, body.paused .nready { visibility: hidden; }

/* ---------- Durak: the table is DOM, the cards are SVG (durak/cards.js) ---------- */
#dk { position: fixed; inset: 0; isolation: isolate; display: flex; flex-direction: column; padding: calc(var(--safeT) + 92px) 0 calc(var(--safeB) + 8px); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#dk > * { position: relative; z-index: 1; }
#dk.demo { padding-top: calc(var(--safeT) + 62px); padding-bottom: calc(var(--dk-sheet, 380px) + 6px); }
#dk.demo .dk-bar { display: none; }
.dk-felt { position: absolute !important; inset: 0; z-index: 0 !important; background: radial-gradient(120% 70% at 50% 38%, #14AB95 0%, #0B6B5E 50%, #06453D 100%); overflow: hidden; }
.dk-felt::before { content: ''; position: absolute; left: 50%; top: 40%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0 4deg, transparent 4deg 11deg); }
.dk-felt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; opacity: .55; background-image: radial-gradient(circle at center, #04332D 1.8px, transparent 2.4px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.dk-opp { height: calc(var(--dkh) * .6); margin: 0 12px; flex: none; }
.dk-opp .back { position: absolute; top: 0; width: calc(var(--dkw) * .6); height: calc(var(--dkh) * .6); }
.dk-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; height: calc(var(--dkw) * 1.12); flex: none; }
.dk-status { flex: 1; min-width: 0; text-align: center; font: 800 12.5px/1.25 var(--ui); color: #fff; background: rgba(13,16,32,.62); border: 2.5px solid rgba(255,255,255,.3); border-radius: 12px; padding: 7px 9px; transform: var(--sk); }
.dk-status.mine { border-color: var(--volt); }
.dk-status.off { visibility: hidden; }
.dk-deck, .dk-disc { position: relative; width: calc(var(--dkw) * 1.5); height: 100%; flex: none; }
.dk-disc { width: calc(var(--dkw) * .9); }
.deckst { position: absolute; left: 2px; top: 50%; width: calc(var(--dkw) * .7); height: calc(var(--dkh) * .7); margin-top: calc(var(--dkh) * -.35); filter: drop-shadow(2px 3px 0 var(--ink)); }
.deckst .csv, .deckst .b2 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deckst .b2 { transform: translate(-3px, -3px); }
.deckst.disc { left: auto; right: 2px; opacity: .85; }
.trumpcard { position: absolute; left: calc(var(--dkw) * .52); top: 50%; width: calc(var(--dkw) * .7); height: calc(var(--dkh) * .7); margin-top: calc(var(--dkh) * -.35); transform: rotate(90deg); transform-origin: 28% 50%; filter: drop-shadow(2px 3px 0 var(--ink)); }
.trumpcard .cin, .trumpcard .csv { width: 100%; height: 100%; display: block; }
.dk-deck .cnt, .dk-disc .cnt { position: absolute; left: 2px; bottom: 0; min-width: 26px; text-align: center; font: 400 13px/1 var(--disp); color: var(--ink); background: var(--volt); border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 6px; z-index: 2; }
.dk-disc .cnt { left: auto; right: 2px; background: #fff; }
.trumpsuit { position: absolute; left: 4px; top: 50%; margin-top: calc(var(--dkw) * -.4); display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 9px; box-shadow: 3px 4px 0 var(--ink); }
.trumpsuit small { font: 900 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.dk-table { flex: 1; min-height: calc(var(--dkt) * 1.42 * 2.5); margin: 4px 10px; border: 3px dashed rgba(255,255,255,.28); border-radius: 22px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px 4px; padding: 6px; transition: border-color .15s, background .15s; }
.dk-table.over { border-color: var(--volt); background: rgba(255,212,0,.08); }
.dk-table.empty::after { content: ''; }
.slot { position: relative; width: calc(var(--dkt) * 1.34); height: calc(var(--dkt) * 1.42 * 1.2); flex: none; border-radius: 12px; }
.slot.over { background: rgba(255,212,0,.16); outline: 3px dashed var(--volt); }
.slot.pass { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 3px dashed rgba(255,255,255,.55); color: #fff; opacity: .8; cursor: pointer; background: rgba(13,16,32,.25); }
.slot.pass b { font: 900 10.5px/1.1 var(--ui); letter-spacing: .1em; text-transform: uppercase; text-align: center; max-width: 92%; }
.slot.pass.on { opacity: 1; border-color: var(--volt); color: var(--volt); animation: dkpulse 1s ease-in-out infinite; }
.slot.pass .pi svg { stroke: none; }

.card, .back { position: absolute; width: var(--dkw); height: var(--dkh); touch-action: none; }
.card .cin, .back .cin { position: relative; width: 100%; height: 100%; transform-origin: 50% 130%; transform: translateY(calc(var(--ly, 0px) + var(--sel, 0px))) rotate(var(--rot, 0deg)); transition: transform .16s cubic-bezier(.3,1.3,.5,1), filter .15s; filter: drop-shadow(2px 3px 0 var(--ink)); }
.card .csv, .back .csv { width: 100%; height: 100%; display: block; pointer-events: none; }
.card.hand { bottom: 0; cursor: pointer; }
.back.hand { bottom: 0; pointer-events: none; }
.back.hand { width: var(--dkw); height: var(--dkh); }
.card.tbl { width: var(--dkt); height: calc(var(--dkt) * 1.42); }
.card.tbl.a { left: calc(var(--dkt) * .1); top: calc(var(--dkt) * .1); }
.card.tbl.d { left: calc(var(--dkt) * .36); top: calc(var(--dkt) * .36); --rot: 7deg; }
.card.sel { --sel: -20px; z-index: 60; }
.card.sel .cin { filter: drop-shadow(0 0 7px var(--volt)) drop-shadow(2px 3px 0 var(--ink)); }
.card.lifted { opacity: .25; }
.card.dim .cin { filter: grayscale(.85) brightness(.78) drop-shadow(2px 3px 0 var(--ink)); }
.card .lg { display: none; position: absolute; top: -7px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--ink); }
.card.legal .lg { display: block; }
.card.fresh .cin { filter: drop-shadow(0 0 6px var(--hot)) drop-shadow(2px 3px 0 var(--ink)); animation: dkfresh 1.1s ease-in-out infinite; }
.card.tgt .cin { filter: drop-shadow(0 0 8px var(--volt)) drop-shadow(2px 3px 0 var(--ink)); animation: dkpulse 1s ease-in-out infinite; }
.card.pick .cin { filter: drop-shadow(0 0 0 3px var(--volt)) drop-shadow(0 0 9px var(--hot)) drop-shadow(0 0 4px #fff); animation: dkfresh .6s ease-in-out infinite; }
.card.ghost { pointer-events: none; }
.card.drag { will-change: transform; }
.card.drag .cin { filter: none; transition: none; }          /* v0.14.10: no blurred filter on the card under the finger (it is repainted on every frame): a flat offset shadow instead */
.card.drag::before { content: ''; position: absolute; inset: 3px; border-radius: 9px; background: rgba(13,16,32,.32); transform: translate(5px, 9px); }
@keyframes dkfresh { 0%, 100% { transform: translateY(var(--ly, 0px)) rotate(var(--rot, 0deg)) scale(1); } 50% { transform: translateY(var(--ly, 0px)) rotate(var(--rot, 0deg)) scale(1.045); } }
@keyframes dkpulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.dk-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 14px; min-height: 56px; flex: none; }
.dkbtn { flex: 1; max-width: 190px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 400 15px/1.05 var(--disp); text-transform: uppercase; box-shadow: 3px 4px 0 var(--ink); transform: var(--sk); }
.dkbtn:active { transform: var(--sk) translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.dkbtn.done { background: var(--volt); }
.dkbtn.take { background: #fff; }
.dkbtn.catch { background: var(--hot); color: #fff; animation: dkcatch 1s ease-in-out infinite; }
.dkbtn.catch .ic { flex: none; }
.dkbtn.catch.armed { background: var(--volt); color: var(--ink); animation: dkcatch .35s ease-in-out infinite; }
.dkbtn.catch.pickmode { background: #fff; color: var(--hot); }
@keyframes dkcatch { 0%, 100% { box-shadow: 3px 4px 0 var(--ink); } 50% { box-shadow: 3px 4px 0 var(--ink), 0 0 0 5px rgba(255,75,43,.4); } }
.dk-hand { position: relative; height: calc(var(--dkh) + 30px); margin: 0 6px; flex: none; }
.dk-fly { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#dk.demo .dk-hand { height: calc(var(--dkh) * .8); }

/* durak HUD */
#dkhud { z-index: auto; }
.dkic { display: flex; gap: 3px; min-height: 22px; align-items: center; }
#dkhud .ppinfo b { letter-spacing: .04em; }
#dkhud .ppnum { font-size: 25px; }
#dkhud .ppnum .cg { margin-right: 3px; }
#dkhud .pp { padding-right: 8px; }
#dkhud .ppmain { gap: 6px; }
@media (max-width: 400px) { #dkhud .ppnum { font-size: 22px; } #dkhud .ppnum .cg { width: 8px; height: 12px; margin-right: 2px; border-width: 2px; } #dkhud .pp { padding-left: 6px; } #dkhud .ppmain { gap: 5px; } #dkhud .avatar.sm { width: 26px; height: 26px; } }
.pp.right .dkic { justify-content: flex-end; }
.dkic .ico { display: inline-flex; filter: drop-shadow(1px 2px 0 var(--ink)); }
.dkic .ico svg { display: block; }
.dkic .ico.new { animation: dkmedal .8s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes dkmedal { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 60% { transform: scale(.85) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.ppnum .cg { display: inline-block; width: 11px; height: 15px; margin-right: 5px; vertical-align: -1px; background: #fff; border: 2.5px solid var(--ink); border-radius: 3px; box-sizing: border-box; box-shadow: 1px 1px 0 var(--ink); }
.ppnum span { display: inline-block; }
.ntimer.dkt { top: calc(var(--safeT) + 76px); }
.ntimer i.opp { background: var(--mist); }
#dkHint { top: auto; bottom: calc(var(--safeB) + var(--dkh) + 70px); max-width: calc(100vw - 40px); }
#dkPill { top: 44%; }
body.paused #dkHint { visibility: hidden; }

/* ---------- v0.14.8 Durak: 3–4 players, the Wait button, the rules panel ---------- */
#dkhud.multi #dpOpp { display: none; }
.dk-opp.multi { height: calc(var(--dkh) * .42 + 46px); display: flex; gap: 6px; align-items: stretch; }
.dk-opp .seat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 5px; border: 2.5px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(13,16,32,.36); transition: border-color .15s, background .15s, opacity .25s; }
.dk-opp .seat.turn { border-color: var(--volt); background: rgba(13,16,32,.55); }
.dk-opp .seat.out { opacity: .55; }
.seat .sh { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-height: 17px; }
.seat .sn { font: 800 11.5px/1.1 var(--ui); color: #fff; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; min-width: 0; }
.seat .role { display: none; flex: none; font: 400 9px/1 var(--disp); font-style: normal; padding: 2.5px 5px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid var(--ink); text-transform: uppercase; }
.seat .role:not(:empty) { display: inline-block; }
.seat.att .role { background: var(--hot); color: #fff; }
.seat.def .role { background: var(--ice); color: var(--ink); }
.seat.out .role { background: var(--green); color: #fff; }
.seat .sf { position: relative; width: 100%; height: calc(var(--dkh) * .42); flex: none; }
.dk-opp .seat .back { position: absolute; top: 0; width: calc(var(--dkw) * .42); height: calc(var(--dkh) * .42); }
.seat .sx { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; }
.seat .sc { font: 400 17px/1 var(--disp); font-style: normal; color: #fff; text-shadow: 2px 2px 0 var(--ink); display: inline-block; }
.seat .sc.pop { animation: dkpop .26s cubic-bezier(.3,1.6,.5,1); }
@keyframes dkpop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.seat .dkic { min-height: 0; }
.dkbtn.hold { background: var(--volt); }
.dkbtn.hold, .dkbtn.done, .dkbtn.take { flex: 1 1 0; }

/* crawlable intro text + links to the game pages (v0.15.2): present for search engines and screen readers, not painted over the app */
.seo-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}