/* ===== MODALS ========================================================== */
.wf-modal-backdrop {
    /* Above ALL game chrome, including bonus elements — otherwise they would poke
       through the blur. Below only the preloader. */
    position: fixed; inset: 0; z-index: var(--z-modal);
    /* Horizontal padding = the phone side-gap (8px); the wrap's calc(100vw - 16px)
       then resolves to exactly 8px per side. Vertical keeps 20px breathing room. */
    display: flex; align-items: center; justify-content: center; padding: 20px 8px;
    background: var(--scrim);
    backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim));
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
    font-family: 'Inter', sans-serif;
    overscroll-behavior: none; touch-action: none;
}
.wf-modal-backdrop.show { opacity: 1; pointer-events: auto; }
.wf-modal-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: calc(100vw - 16px); max-height: calc(100dvh - 40px);
    overscroll-behavior: none; touch-action: none;
}
/* Main MENU (with the Tapium logo) stays narrow/centered — content is a short
   list. Every other modal fills to 8px from the screen edges on phones. */
#menu-modal .wf-modal-wrap { width: min(360px, calc(100vw - 28px)); }
@media (min-width: 600px) {
    .wf-modal-wrap { width: 420px; }
}
.wf-logo {
    display: none; width: 174px; max-width: 62%; line-height: 0;
    opacity: 0; transform: translateY(4px);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
    pointer-events: none;
}
.wf-logo svg, .wf-logo img { display: block; width: 100%; height: auto; }
.wf-modal-wrap.has-logo .wf-logo { display: block; }
.wf-modal-backdrop.show .wf-modal-wrap.has-logo .wf-logo { opacity: 1; transform: translateY(0); }
.wf-modal {
    position: relative;
    width: 100%; min-height: 0; display: flex; flex-direction: column;
    background: #FFFFFF; border-radius: var(--r-modal); padding: 5px;
    box-shadow: var(--shadow-modal);
    letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(10px) scale(.97);
    transition: transform .3s var(--ease-spring), opacity .22s var(--ease);
    overflow: hidden;
}
.wf-modal-backdrop.show .wf-modal { opacity: 1; transform: translateY(0) scale(1); }
.wf-close-out {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: #FFFFFF; color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.25);
    opacity: 0; transform: translateY(-6px) scale(.9);
    transition: opacity .24s var(--ease) .04s, transform .3s var(--ease-spring) .04s, background .14s var(--ease);
}
.wf-close-out:hover { background: #F2F2F4; }
.wf-close-out:active { transform: scale(.9); }
.wf-close-out svg { width: 22px; height: 22px; }
.wf-modal-backdrop.show .wf-close-out { opacity: 1; transform: translateY(0) scale(1); }

/* Sub-menu close button → exact mirror of the back button (same 34px box,
   same 14px side inset, same vertical center). It lives inside .wf-head next
   to .wf-back, so it stays level with it at any header height. The MAIN menu
   (#menu-modal) keeps its bottom close pill. */
.wf-modal-backdrop:not(#menu-modal) .wf-close-out {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: transparent; box-shadow: none; color: var(--ink);
    opacity: 1; z-index: 3;
}
.wf-modal-backdrop:not(#menu-modal) .wf-close-out svg { width: 18px; height: 18px; }
@media (hover: hover) {
    .wf-modal-backdrop:not(#menu-modal) .wf-close-out:hover { background: #EFEFF2; }
}

.wf-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 14px 16px 14px; min-height: 34px;
    flex: none;   /* не сжиматься: иначе при длинном списке (body flex:1) верхний отступ шапки «съедался» */
}
.wf-titlewrap { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; width: 100%; }
.wf-title {
    min-width: 0; max-width: 100%;
    font-family: var(--ff-head);
    font-size: 18px; font-weight: 900;
    letter-spacing: -0.01em; color: var(--ink); line-height: 1.04;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-transform: uppercase; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* line-height 1.04 срезал диакритики vi/th/hi/Й (clip = padding-box) —
       см. --ink-bleed в base.css. */
    padding-block: var(--ink-bleed); margin-block: calc(-1 * var(--ink-bleed));
}
.wf-subtitle {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--label); text-transform: uppercase; letter-spacing: 0; text-align: center;
}
.wf-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0;
    margin: 0; padding: 0 2px;
}

/* Menu items — flat list with dividers */
.wf-mcard { background: transparent; padding: 0 4px; margin: 0 2px; }
.wf-mcard + .wf-mcard { margin-top: 14px; }
.wf-mrow { display: flex; align-items: center; gap: 12px; padding: 18px 10px; cursor: pointer; }
.wf-mrow .mi {
    flex: none; width: 22px; height: 22px; color: #3A3A3E;
    display: flex; align-items: center; justify-content: center;
    transform: translateZ(0); transition: opacity .14s var(--ease);
}
.wf-mrow .mi svg { display: block; width: 22px; height: 22px; backface-visibility: hidden; }
.wf-mrow .mi svg * { stroke-width: 1.85px; }
.wf-mrow .ml {
    flex: 1; font-family: var(--ff-head); font-size: 14px; font-weight: 900;
    color: var(--ink); letter-spacing: 0.01em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-block: var(--ink-bleed); margin-block: calc(-1 * var(--ink-bleed)); /* точка снизу vi (Ị Ặ) */
    transition: opacity .14s var(--ease);
}
@media (hover: hover) {
    .wf-mrow:not(.has-toggle):hover .ml, .wf-mrow:not(.has-toggle):hover .mi { opacity: 0.55; }
}
.wf-mdiv2 { height: 2px; background: #E5E5E9; border-radius: 1px; margin: 0 14px; }

/* ── Settings: Sounds/Music toggles + volume sliders ──────────────────────── */
.wf-mrow.has-toggle { cursor: default; }
.wf-toggle {
    flex: none; width: 42px; height: 25px; border-radius: 100px;
    background: #E2E2E6; border: none; padding: 0; position: relative; cursor: pointer;
    transition: background .18s var(--ease); transform: translateZ(0); isolation: isolate;
}
.wf-toggle::after {
    content: ''; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px;
    border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform .2s var(--ease-spring);
}
.wf-toggle.on { background: var(--pink); }
.wf-toggle.on::after { transform: translateX(17px); }

/* Volume row: collapsed while the toggle is off; expands smoothly when on */
.wf-volrow {
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 12px;
    transition: max-height .28s var(--ease), opacity .2s var(--ease), padding .28s var(--ease);
}
.wf-volrow.show { max-height: 52px; opacity: 1; padding: 6px 12px 16px; }
.wf-vol {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px;
    background: transparent; cursor: pointer; outline: none; margin: 0;
}
/* WebKit: 6px track centred + pink fill on the left by --p, 18px thumb */
.wf-vol::-webkit-slider-runnable-track {
    height: 6px; border-radius: 100px;
    background: linear-gradient(var(--pink), var(--pink)) 0 / var(--p, 100%) 100% no-repeat, #E2E2E6;
}
.wf-vol::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--pink); border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); cursor: pointer;
}
/* Firefox: separate track/progress/thumb */
.wf-vol::-moz-range-track { height: 6px; border-radius: 100px; background: #E2E2E6; }
.wf-vol::-moz-range-progress { height: 6px; border-radius: 100px; background: var(--pink); }
.wf-vol::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: var(--pink);
    border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); cursor: pointer;
}

/* ── Settings: nickname field ─────────────────────────────────────────────── */
.wf-setcard { padding: 14px 14px 16px; }
.wf-setrow { display: flex; flex-direction: column; }
.wf-setlabel {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--label-2); margin: 0 2px 8px;
}
.wf-nick {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; box-sizing: border-box; margin: 0;
    background: #F4F4F6; border: 2px solid transparent; border-radius: var(--r-field); padding: 0 9px 0 14px;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
/* border ONLY while editing, same thickness → height doesn't jump */
.wf-nick.editing { background: #FFFFFF; border-color: #C9C9CF; }
.wf-nick.err { border-color: var(--danger) !important; background: #FFFFFF; }
.wf-nick-ico { flex: none; width: 19px; height: 19px; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.wf-nick-ico svg { width: 100%; height: 100%; }
.wf-nick-input {
    flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; padding: 0; margin: 0;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; text-overflow: ellipsis;
    letter-spacing: -0.01em; color: var(--ink); text-align: left; cursor: pointer;
}
.wf-nick.editing .wf-nick-input { cursor: text; }
.wf-nick-input:read-only { pointer-events: none; }   /* click is caught by the container → enter edit */
/* locked (ProfileMsg.editable=false): plain read-only name, no pencil, no cursor */
.wf-nick.locked .wf-nick-edit { display: none; }
/* pencil hint (display) ⇄ check (editing) — shared right slot */
.wf-nick-edit {
    flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    color: #B6B6BC; transition: opacity .14s var(--ease); cursor: pointer;
}
.wf-nick-edit svg { width: 18px; height: 18px; }
@media (hover: hover) { .wf-nick:not(.locked):hover .wf-nick-edit { color: var(--label); } }
.wf-nick.editing .wf-nick-edit { display: none; }
.wf-nick-save {
    flex: none; width: 34px; height: 34px; border-radius: var(--r-copy); border: none; cursor: pointer;
    background: var(--pink); color: #FFFFFF; display: none; align-items: center; justify-content: center; padding: 0;
    transition: transform .08s var(--ease);
}
.wf-nick-save:active { transform: scale(.92); }
.wf-nick-save:disabled { opacity: .55; }
.wf-nick-save svg { width: 19px; height: 19px; }
.wf-nick.editing .wf-nick-save { display: flex; }
.wf-nick-err {
    display: none; margin: 7px 2px 0; font-family: 'Inter', sans-serif; font-size: 12.5px;
    font-weight: 600; color: var(--danger);
}
.wf-nick-err.show { display: block; }
/* neutral hint (name locked) — not an error */
.wf-nick-err.hint { color: var(--label-2); font-weight: 500; }
/* Build version — вшита в index.html из ./VERSION (плейсхолдер 1.5.0,
   build-service.nix / dev-server.mjs), НЕ через API: помогает убедиться, что
   загрузился свежий бандл, а не закешированный. Намеренно почти невидима —
   мелкая, приглушённая, для «посвящённого» глаза. */
.wf-version {
    margin: 10px 2px 2px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500;
    letter-spacing: 0.06em; color: var(--label-3); opacity: 0.28;
    /* Выделяемость даёт атрибут data-selectable в разметке (SSoT — styles/app/scaffold.css). */
}
/* iOS won't zoom on focus when the field's font-size is ≥16px */
.wf-modal-backdrop input[type="text"] { font-size: 16px; }

/* ── Provably Fair submenu ────────────────────────────────────────────────── */
/* Chevron "has submenu" at end of item — slightly larger */
.wf-chev { flex: none; width: 14px; height: 14px; color: #B5B5BC; display: flex; align-items: center; justify-content: center; }
.wf-chev svg { display: block; width: 14px; height: 14px; }

/* "Back" arrow in submenu header (left, over centered title) */
.wf-back {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; background: transparent; cursor: pointer;
    color: var(--ink); display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .14s var(--ease);
}
.wf-back svg { width: 18px; height: 18px; display: block; }
.wf-back svg * { stroke-width: 2.1px; }   /* визуально = крестику (2.3 в viewBox 20 при 18px ≈ 2.07) */
@media (hover: hover) { .wf-back:hover { background: #EFEFF2; } }

/* (?) в шапке PROVABLY FAIR — открывает explain-блок «How does this prove fairness?».
   Живёт ВНУТРИ .wf-title сразу после текста заголовка (зазор 6px = gap заголовка),
   иконка — SVG-знак вопроса в кружке. */
.wf-pf-help {
    flex: none; width: 22px; height: 22px; padding: 0;
    border: 2px solid var(--ink); background: transparent;
    cursor: pointer; color: var(--ink); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center; margin-top: -1px; /* оптика: caps-текст чуть выше центра строки */
    transition: background .14s var(--ease), color .14s var(--ease);
}
/* Реальный клиппер иконки — .wf-title (overflow:hidden ради ellipsis, высота
   строки 21px < кнопки 22px): срезал верх кружка «?». Заголовок PF статичный,
   ellipsis ему не нужен — снимаем клип точечно. */
#pf-modal .wf-title,
#ap-editor-modal .wf-title,
#ap-editor-help-modal .wf-title { overflow: visible; }
/* Editor titles are longer than "PROVABLY FAIR" — keep them clear of the
   absolute back/close buttons, same recipe as #pf-help-modal below. */
#ap-editor-modal .wf-titlewrap,
#ap-editor-help-modal .wf-titlewrap { padding: 0 46px; box-sizing: border-box; }
.wf-pf-help svg { width: 13px; height: 13px; display: block; overflow: visible; }
/* «?» той же визуальной толщины, что крестик/назад (~2.1px on-screen):
   2.6 в viewBox 16 при 13px ≈ 2.11. */
.wf-pf-help svg path { stroke-width: 2.6px; }
@media (hover: hover) { .wf-pf-help:hover { background: var(--ink); color: #fff; } }

/* ===== BET DETAIL WINDOW (new design; look from v115) ==================== */
.wf-shield { display: inline-flex; width: 16px; height: 16px; }
.wf-shield svg { width: 100%; height: 100%; }
/* Stat mini-blocks (bet / X / payout / time) */
.wf-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; }
.wf-stat {
    width: 100%; min-width: 0; background: var(--surface); border-radius: var(--r-field); padding: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wf-stat .l { font-size: 12px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.wf-stat .v {
    font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
/* GAME LIMITS: сумма лимита — регуляторный дисклоуз, показывается ЦЕЛИКОМ (без K/M/B
   и без «…»). Не влезает — переносится/сжимается НАЗВАНИЕ, а при совсем узком экране
   (IDR: «Rp 2 250 000 000,00») значение падает на свою строку через flex-wrap. */
#limits-modal .wf-stat { flex-wrap: wrap; row-gap: 4px; }
#limits-modal .wf-stat .l { white-space: normal; min-width: 0; flex: 1 1 auto; }
/* margin-left:auto — a value wrapped onto its own line stays RIGHT-aligned like
   every other row's value (flex-wrap starts a new line at the left edge). */
#limits-modal .wf-stat .v { overflow: visible; text-overflow: clip; flex: 0 0 auto; max-width: 100%; margin-left: auto; }
/* Pink (Fairness) full-width button */
.wf-graybtn {
    width: 100%; height: 46px; border: none; border-radius: var(--r-cta); background: var(--pink); color: #FFFFFF;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--ff-head); font-size: 14px; font-weight: 900;
    letter-spacing: 0.01em; text-transform: uppercase; transition: transform .1s var(--ease), filter .12s var(--ease);
}
.wf-graybtn:active { transform: scale(.97); filter: brightness(.95); }
.wf-graybtn .wf-shield { width: 16px; height: 16px; color: #FFFFFF; }
.wf-graybtn.pf { margin-bottom: 16px; }
.wf-graybtn[disabled] { background: #E7E7EA; color: rgba(0, 0, 0, 0.42); cursor: default; }
.wf-graybtn[disabled] .wf-shield { color: rgba(0, 0, 0, 0.42); }
.wf-graybtn[disabled]:active { transform: none; filter: none; }
.wf-graybtn.pf[disabled] { margin-bottom: 6px; }
.wf-pf-hint {
    margin-bottom: 16px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--label-2);
}
.wf-graybtn.gray { background: #E7E7EA; color: rgba(0, 0, 0, 0.70); }
.wf-graybtn.gray:active { background: #DEDEE2; }
/* Read-only "input" fields: label inside on the left + value (ellipsised) + copy button */
.wf-field {
    display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 7px;
    background: var(--surface); border-radius: var(--r-field); padding: 7px 6px 7px 14px;
    transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.wf-field-status { padding: 12px 14px; }   /* verdict row — no copy button */
.wf-finlabel { flex: none; font-size: 12px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.wf-fval {
    flex: 1 1 auto; min-width: 0; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; text-align: right;
}
.wf-field-status.ok .wf-fval { color: var(--ok); }
.wf-field-status.fail .wf-fval { color: var(--danger); }
.wf-field-status.pending .wf-fval { color: var(--label); }
.wf-copy {
    flex: none; width: 34px; height: 34px; border: none; border-radius: var(--r-copy); background: none; color: var(--label-2);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .2s, transform .1s;
}
.wf-copy svg { width: 16px; height: 16px; }
.wf-copy:hover { background: rgba(0, 0, 0, 0.05); }
.wf-copy:active { transform: scale(.9); }
.wf-field.copied { background: rgba(0, 225, 20, 0.10); box-shadow: inset 0 0 0 1.5px rgba(0, 225, 20, 0.45); }
.wf-field.copied .wf-copy { color: var(--ok); }
/* Divider */
.wf-divider { height: 2px; background: #ECECEF; border-radius: 1px; margin: 16px 2px; }
/* Page-swap animation inside the window (bet card ↔ fairness) — same spring as the menu */
@keyframes wfSwapIn { from { opacity: .35; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.wf-modal.wf-swap { animation: wfSwapIn .3s var(--ease-spring); }