/*
 * The Blot shell, verbatim where it matters.
 *
 * `#login-screen` and `.loader-container` are copied from
 * kb-front/src/css/style.css — the same z-order story (loader z-20 above the
 * screen's z-10, black first, artwork fading in via `.ready`, loader fading
 * out via the 0.3s opacity transition). The loader itself is poker's own and
 * simpler than Blot's spinning PNG around a logo: three CSS dots. What is NOT
 * copied is Blot's login buttons and Telegram plumbing: poker has no auth
 * yet, so the screen goes straight from loaded to lobby.
 */

/* The faces the whole shell claims. kp-front named SFUIText from day one
   (copied components, canvas text) but never shipped the files — every
   surface silently fell back to the UA sans. Same woff2s kb-front ships. */
@font-face { font-family: 'SFUIText-Bold'; src: url('fonts/SFUIText-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'SFUIText-Regular'; src: url('fonts/SFUIText-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'NotoSansArmenian-Bold'; src: url('fonts/NotoSansArmenian-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'NotoSansArmenian-Regular'; src: url('fonts/NotoSansArmenian.woff2') format('woff2'); font-display: swap; }

/* kb-front style.css's opening resets, verbatim — the universal margin
   kill is LOAD-BEARING: Blot's React Text component renders <p> elements,
   and without this every label carries the UA's ~1em vertical margins.
   That was exactly the "chip pills too tall" bug: the pill's flex row was
   34px of text plus 68px of browser-default paragraph margin. */
* {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0,0,0,0);
    outline: none !important;
}
*:focus, *:active, *:hover {
    outline: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Blot's <p> contract (style.css:182): Text pre-computes its own bounds,
   so paragraphs must not wrap, re-align or eat pointer events. */
p {
    white-space: pre;
    text-align: center;
    pointer-events: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #0F0B26;
    overflow: hidden;
    font-family: 'SFUIText-Regular', -apple-system, system-ui, sans-serif;
    /* No pull-to-refresh or rubber-band behind a full-screen game. */
    overscroll-behavior: none;
}
html, body, div, canvas, img {
    box-sizing: border-box;
    padding: 0;
}

/* ── Login / loading screen — kb-front style.css, trimmed ── */
/* The VISIBLE screen, not 100vw × 100vh: on a phone's browser 100vh is the
   height with the address bar hidden, so while the bars show, the bottom of
   a 100vh box — CONTINUE AS GUEST — sat under them, unreachable (the page
   cannot scroll). A fixed box pinned to all four edges is what is seen. */
#login-screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    background: #000;
    transition: opacity 0.4s ease-out;
}
#login-screen.gone {
    opacity: 0;
    pointer-events: none;
}
/* The art (src/loginArt.ts): the text-free yacht harbour, behind the login
   screen AND the lobby — the same two files, so the lobby takes them from the
   cache. A plain cover, no zoom: the five sails span almost the art's whole
   width. Where it is anchored:
   - y 26 % on screens wider than the art (landscape phones, 21:9): the violet
     sail's top stays, the crop gives up sea;
   - x 92 % on narrower ones (16:10): the crop gives up the town on the left,
     and all five sails stay;
   - below 1.59:1 (3:2, tablets) five cannot fit: x 38 % keeps the violet hero
     and the middle three whole, and lets the small burgundy one go.
   The lobby's art starts under its header, so its own area is wider, and its
   switch comes at 1.40:1 of the screen. */
:root {
    --kp-art-x: 92%;
    --kp-art-y: 26%;
    --kp-lobby-art-x: 92%;
}
@media (max-aspect-ratio: 159/100) { :root { --kp-art-x: 38%; } }
@media (max-aspect-ratio: 140/100) { :root { --kp-lobby-art-x: 38%; } }

/* Split in two rules as kb-front does: transparent until `.ready` (decoded),
   so slow networks see black + the centre loader, never a half-loaded image.
   index.html's <picture>, not a CSS background, so the browser picks AVIF or
   WebP itself. */
#login-screen .login-splash {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    pointer-events: none;
}
#login-screen.ready .login-splash {
    opacity: 1;
}
#login-screen .login-splash img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--kp-art-x) var(--kp-art-y);
}
/* A restrained navy shade from the bottom, where CONTINUE AS GUEST sits over
   the bright water; the rest of the harbour stays as painted. Over the art
   (z −1), under the controls (z 1–2); only with the art. */
#login-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    background: linear-gradient(to top, rgba(10, 12, 40, 0.6) 0%, rgba(10, 12, 40, 0.22) 22%, rgba(10, 12, 40, 0) 36%);
}
#login-screen.ready::after {
    opacity: 1;
}
/* The wordmark, live text (the art carries none): white, two lines, top
   centre in the open sky between the teal and the cream sails, on a soft navy
   scrim. Shown with the way in (.revealed, main.ts), art or no art. */
#login-screen .login-title {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 6vh, 64px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0.16em 0.8em 0.24em;
    font-family: 'SFUIText-Bold', -apple-system, sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 9vmin, 88px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(8, 10, 34, 0.75), 0 0 18px rgba(8, 10, 34, 0.45);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
#login-screen.revealed .login-title {
    opacity: 1;
}
#login-screen .login-title::before {
    content: '';
    position: absolute;
    inset: -12% -16%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(ellipse closest-side, rgba(10, 12, 40, 0.55) 0%, rgba(10, 12, 40, 0.3) 55%, rgba(10, 12, 40, 0) 100%);
}

/* A full-screen popup over the harbour (Profile): the same two files and the
   login screen's full-screen anchors, under a deeper navy veil than the
   lobby's — the popup's panels carry their own solid fills, the art shows
   around them. The gradient is written out in both declarations (see the
   lobby's note below). */
.kp-art-backdrop {
    background-color: #0F0B26;
    background-image: linear-gradient(rgba(15, 11, 38, 0.55), rgba(15, 11, 38, 0.55)), url('assets/poker-yachts-1672.webp');
    background-image: linear-gradient(rgba(15, 11, 38, 0.55), rgba(15, 11, 38, 0.55)),
        image-set(url('assets/poker-yachts-1672.avif') type('image/avif'), url('assets/poker-yachts-1672.webp') type('image/webp'));
    background-size: cover;
    background-position: var(--kp-art-x) var(--kp-art-y);
    background-repeat: no-repeat;
}

/* The lobby (Lobby.jsx .kp-lobby): the same art under the header (130 of
   Blot's 1080 rows), behind the cards, with a restrained navy shade — deeper
   at the top edge and towards the dock, light across the sails. The gradient
   is written out in both declarations: a var() in the second would keep it
   from being dropped where image-set is unknown, and that browser would then
   lose the first, plain-URL one too. */
.kp-lobby {
    isolation: isolate;
}
.kp-lobby::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(100% * 130 / 1080);
    z-index: -1;
    pointer-events: none;
    background-color: #0F0B26;
    background-image: linear-gradient(180deg, rgba(15, 11, 38, 0.5) 0%, rgba(15, 11, 38, 0.18) 14%, rgba(15, 11, 38, 0.22) 55%, rgba(15, 11, 38, 0.62) 88%, rgba(15, 11, 38, 0.8) 100%), url('assets/poker-yachts-1672.webp');
    background-image: linear-gradient(180deg, rgba(15, 11, 38, 0.5) 0%, rgba(15, 11, 38, 0.18) 14%, rgba(15, 11, 38, 0.22) 55%, rgba(15, 11, 38, 0.62) 88%, rgba(15, 11, 38, 0.8) 100%),
        image-set(url('assets/poker-yachts-1672.avif') type('image/avif'), url('assets/poker-yachts-1672.webp') type('image/webp'));
    background-size: cover;
    background-position: var(--kp-lobby-art-x) var(--kp-art-y);
    background-repeat: no-repeat;
}

/* ── Blot's login-bottom block, verbatim (style.css) — hidden until the
      shell decides auto-vs-manual entry, exactly as loginController does. */
.login-design {
    position: absolute;
    z-index: 1;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    pointer-events: none;
}
.login-bottom-group {
    position: absolute;
    /* A share of the VISIBLE height (percent of #login-screen), clear of the
       home indicator. */
    bottom: max(5%, calc(env(safe-area-inset-bottom, 0px) + 8px));
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.login-buttons-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: clamp(4px, 4vmin, 40px);
}
.login-buttons-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(85, 85, 85, 0.5);
    border-radius: 10px;
    pointer-events: none;
    z-index: -1;
}
.login-buttons-row {
    position: relative;
    display: flex;
    z-index: 1;
    justify-content: center;
}
.login-guest {
    margin-top: clamp(6px, 2.5vmin, 24px);
    /* A thumb-sized target around the words. */
    padding: 10px 24px;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.login-guest:active { opacity: 0.6; }
.login-guest-text {
    color: #fff;
    /* 34px on a desktop; scaled to a landscape phone's ~360px height. */
    font-size: clamp(18px, 5vmin, 34px);
    font-family: SFUIText-Regular, -apple-system, sans-serif;
    text-decoration: underline;
    /* On a phone the words sit over the art's bright magenta ring and the
       chip stack: a soft dark halo keeps them readable on any of it. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

/* ── Fullscreen button, top right of the login screen (src/fullscreen.ts) ──
      Hidden until the shell knows it does something here (`.shown`). */
.fullscreen-btn {
    display: none;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    background: rgba(15, 11, 38, 0.55);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.fullscreen-btn.shown { display: block; }
.fullscreen-btn:active { opacity: 0.6; }
.fullscreen-btn svg { display: block; width: 100%; height: 100%; }
.fullscreen-btn .fs-exit { display: none; }
.fullscreen-btn.on .fs-enter { display: none; }
.fullscreen-btn.on .fs-exit { display: block; }
.fullscreen-hint {
    display: none;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    z-index: 3;
    max-width: min(300px, 70vw);
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 11, 38, 0.9);
    border: 1px solid rgba(160, 100, 255, 0.45);
    color: #EDE9F8;
    font-family: 'SFUIText-Regular', 'NotoSansArmenian-Regular', -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
.fullscreen-hint.shown { display: block; }

/* ── Centre loader: kb-front's container, poker's three CSS dots ── */
.loader-container {
    position: absolute;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    pointer-events: none;
    z-index: 20;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.kp-loader {
    display: flex;
    gap: 12px;
}
.kp-loader span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d5a0ff;
    opacity: 0.25;
    animation: kp-dot 1s ease-in-out infinite;
}
.kp-loader span:nth-child(2) { animation-delay: 0.16s; }
.kp-loader span:nth-child(3) { animation-delay: 0.32s; }
@keyframes kp-dot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%           { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .kp-loader span { animation: none; opacity: 0.7; }
}

/* ── "Releasing a new version": over every screen, every tap (src/releaseOverlay.ts) ── */
.release-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 11, 38, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #EDE9F8;
    text-align: center;
    font-family: 'SFUIText-Regular', 'NotoSansArmenian-Regular', -apple-system, sans-serif;
    pointer-events: auto;
    touch-action: none;
    animation: release-in 0.25s ease-out;
}
.release-overlay[hidden] { display: none; }
.release-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 420px;
}
.release-icon {
    width: 64px;
    height: 64px;
    color: #d5a0ff;
    animation: release-gear 6s linear infinite;
}
.release-title {
    margin: 0;
    white-space: normal; /* the shell sets white-space: pre on p (Blot text contract) */
    font-size: clamp(20px, 4.2vmin, 30px);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.release-text {
    margin: 0;
    white-space: normal;
    font-size: clamp(14px, 2.6vmin, 18px);
    line-height: 1.4;
    color: #C9B8E8;
}
@keyframes release-gear { to { transform: rotate(360deg); } }
@keyframes release-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .release-icon, .release-overlay { animation: none; }
}

/* ── React lobby host + game canvas host ── */
.reactWrapper {
    position: fixed;
    inset: 0;
    z-index: 5;
}
.reactWrapper.hidden {
    display: none;
}
/* The poker room: the lobby's yacht harbour behind the transparent canvas
   (PokerScene draws only the table and the glow on it), from the same two
   files as the lobby, under a night-violet veil — the hand log and the seats'
   names sit straight on the room. The gradient is written out in both
   declarations (see the lobby's note). */
#game {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: #0a0717;
    background-image: linear-gradient(rgba(10, 7, 23, 0.58), rgba(10, 7, 23, 0.58)), url('assets/poker-yachts-1672.webp');
    background-image: linear-gradient(rgba(10, 7, 23, 0.58), rgba(10, 7, 23, 0.58)),
        image-set(url('assets/poker-yachts-1672.avif') type('image/avif'), url('assets/poker-yachts-1672.webp') type('image/webp'));
    background-size: cover;
    background-position: var(--kp-art-x) var(--kp-art-y);
    background-repeat: no-repeat;
    /* Notch note: no safe-area inset here ON PURPOSE. The canvas is sized
       to the window and FIT-letterboxed to 16:9 — on 19.5:9 phones the
       side bars land exactly where the notch is, so content clears it
       naturally. Insetting this box also broke web: #game is display:none
       at mount, so a box-tracking renderer measured zero. */
}

/* ── Rotate gate — the table is landscape-only, like Blot. Pure CSS so it
      works before a single module loads. ── */
#rotate-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #0F0B26;
    color: #EDE9F8;
    text-align: center;
    font-family: 'SFUIText-Bold', system-ui, sans-serif;
}
@media (orientation: portrait) and (max-width: 920px) {
    #rotate-gate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
    }
}
#rotate-gate .phone {
    width: 46px;
    height: 84px;
    border: 3px solid #E040FB;
    border-radius: 10px;
    animation: kp-rotate 1.6s ease-in-out infinite;
}
@keyframes kp-rotate {
    0%, 20% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
#rotate-gate span { font-size: 18px; letter-spacing: 1px; color: #C9B8E8; }
#game.hidden {
    display: none;
}
/* The screen's box, as the lobby's fixed layers fill it (index.html #viewport). */
#viewport {
    position: fixed;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}
/* An iPhone home-screen app opened sideways can lay the page out SHORT (iOS
   reports the layout viewport a status bar or so under the window until a
   rotation): src/appHeight.ts measures the true height and pins the page and
   its full-screen layers to it — the canvas is sized to #viewport. */
html.kp-pin-height,
html.kp-pin-height body {
    height: var(--kp-app-h);
}
html.kp-pin-height #viewport,
html.kp-pin-height #game,
html.kp-pin-height .reactWrapper,
html.kp-pin-height #login-screen,
html.kp-pin-height #rotate-gate {
    bottom: auto;
    height: var(--kp-app-h);
}
/* The running feed's in-game bar (lobbyMarquee.jsx) lives in #game UNDER
   the canvas: the canvas is transparent (main.ts) and the table leaves its
   floor out along the bar, so buttons and cards draw over it. */
#game > canvas {
    position: relative;
    z-index: 1;
}

/* ── Bonus popups — kb-front style.css, verbatim ── */
/* The Free Chips hub's tile row scrolls without a visible scrollbar. */
.market-carousel::-webkit-scrollbar {
    display: none;
}

@keyframes wheelWinBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Soft pulsing gold halo around the winning wheel segment. Replaces
   the old whole-wheel `win.png` blink with a per-segment highlight. */
@keyframes wheelWinHighlight {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.65;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: 1;
    }
}