/* ================================================================
   COINS ADDON CSS  v3.0  —  Reversi Collection
================================================================ */

/* ── HUD ─────────────────────────────────────────────────────── */
/* left offset clamps to the lobby card's own CONTENT edge (not its outer
   box edge) on wide desktop screens — .lobby-inner is max-width:460px,
   centered, so its outer edge sits at 50vw-230px, but its content (mode/
   difficulty buttons, theme grid, Begin Match) starts 20px further in,
   at .lobby-inner's own padding. Without the +20px here the HUD lined up
   with .lobby-inner's outer edge instead, visibly sticking out further
   left than everything else inside the card (direct bug report — "shop
   button sticks out on the left"). On narrow/mobile screens the card
   fills the viewport with no centering offset, so this collapses to a
   flat 20px minimum instead — the same 20px padding, just without the
   50vw term needed to find it. Both numbers (230->210, 16->20) had to
   move together, since they're the same fix applied to the two regimes
   this max() picks between. */
/* No more dark panel background/border/shadow around this — the HUD used
   to also carry the diamond glyph + balance number (hence a boxed "chip"
   look to visually group them with the shop button); now it's just the
   shop button itself, so the surrounding rectangular panel is gone too,
   not merely its ex-contents (direct request: remove the balance value,
   the diamond, AND the rectangular highlight, keep icon+"Shop" text). */
.coins-hud {
  position:fixed; top:30px; left:max(20px, calc(50vw - 210px)); right:auto; transform:none;
  z-index:8000; cursor:pointer;
}
/* +15% over the restored-pill base (32/12-8/16/6/16/.62rem) — PC-only
   size bump, direct request. Border width (1px) and letter-spacing (.14em,
   already relative to the label's own font-size) aren't separately scaled
   — only the dimensions that actually define "how big the button looks"
   are. */
.coins-hud-shop {
  height:36.8px; padding:0 13.8px 0 9.2px; flex-shrink:0; border-radius:18.4px;
  display:flex; align-items:center; gap:6.9px;
  background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.4);
  color:#c9a84c; cursor:pointer; transition:all .2s; white-space:nowrap;
}
.coins-hud-shop svg { width:18.4px; height:18.4px; flex-shrink:0; }
/* align-items:center on the button centers the LABEL'S LINE BOX against
   the icon, but a bold all-caps line box isn't visually symmetric around
   its own ink — the glyphs' actual drawn pixels sit closer to the top of
   that box than the bottom (no descenders to fill the lower half), so the
   text reads as sitting above the icon's true center even though their
   boxes are centered. Measured empirically by rendering both at 8x scale
   and finding each one's actual ink rows (not their layout boxes): the
   text's ink center sat ~1.06px above the icon's ink center on PC. Nudged
   down by that amount — not a guess, this one number is specific to this
   exact font/weight/size pairing and would need re-measuring the same way
   if either changes again. */
.coins-hud-shop-label {
  font-family:var(--font-ui); font-size:.713rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  position:relative; top:1.06px;
}
.coins-hud-shop:hover { border-color:#c9a84c; color:#fff; background:rgba(201,168,76,.2); }

/* Icon-only circle on mobile — no text label at all (direct request: drop
   "МАГАЗИН", keep just the icon), sized to exactly match #btn-settings's
   own mobile footprint (57.19px circle, ~27px icon — both measured via
   getBoundingClientRect() directly off #btn-settings, not guessed from its
   em value, since a <button> doesn't inherit font-size from an arbitrary
   parent and its em sizing resolves from its own UA-default font-size, not
   .lobby-inner's local scale — same lesson as Round 5/42). This also
   incidentally fixes the original overlap-with-Fullscreen complaint for
   good on this platform: a circle this size carries no variable-width
   content (no balance, no label), so it can never grow past its own fixed
   footprint regardless of language or coin count. */
@media (max-width:480px) {
  .coins-hud-shop { width:57.19px; height:57.19px; padding:0; border-radius:50%; justify-content:center; }
  .coins-hud-shop svg { width:26.98px; height:26.98px; }
  .coins-hud-shop-label { display:none; }
}

/* Lobby-only: Y-centered on #btn-settings's own center (direct request,
   both platforms) — recalculated after the PC +15% size bump (desktop:
   49.311px, was 44.713px) and after matching the mobile circle to
   #btn-settings's full footprint (36.969px, was 42.565px — a circle this
   size happens to share #btn-settings's own top almost exactly, since both
   buttons are now the same height). Both re-measured via
   getBoundingClientRect() against #btn-settings's actual center, not
   computed from em — same reasoning as the comment above. */
#lobby-screen:not(.hidden) ~ .coins-hud { top: 49.311px; }
@media (max-width:480px) {
  #lobby-screen:not(.hidden) ~ .coins-hud { top: 36.969px; }
}

/* No coin HUD at all in the game scene — the balance moved into the
   no-hint-left popup instead (see .no-hint-balance in this file and
   #no-hint-popup in index.html), so there's nothing left in-game for this
   HUD to show (shop entry was already gone, see the old comment this
   replaced; the bare balance number by itself isn't useful mid-match).
   Keyed off #lobby-screen.hidden, not #app: #app is shown/hidden via
   inline style.display (see script.js), never via a .hidden class — there
   is no "#app.hidden" CSS rule at all — so checking #app here would always
   match and hide this even in the lobby. #lobby-screen precedes .coins-hud
   in DOM order (coins.js appends the HUD to <body> last), so this sibling
   selector reaches it; the click handler in coins.js already no-ops in
   this state (checks the same #lobby-screen.hidden condition), now simply
   unreachable rather than needed. */
#lobby-screen.hidden ~ .coins-hud { display: none; }


/* ── TOAST ───────────────────────────────────────────────────── */
.coins-toast {
  /* Centered horizontally — this toast fires both in the lobby (where it
     used to line up with the lobby card's left edge) and over the in-game
     Game Over popup (e.g. the "opponent defeated" reward toast), and a
     left-anchored position that made sense next to the lobby card just
     looks randomly offset next to a centered popup. One centered position
     works reasonably in both places, instead of two different rules. */
  position:fixed; top:80px; left:50%; right:auto;
  transform:translate(-50%,-10px);
  /* Above every popup layer in the project (coins-store 99000, coins-pur
     99100, no-hint-overlay 99500) — a toast is a transient global
     notification (e.g. "not enough coins") that must stay visible no
     matter which modal triggered it, not get silently hidden behind it. */
  z-index:999999; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 24px; background:rgba(9,12,8,.98); border:1px solid rgba(201,168,76,.4);
  box-shadow:0 8px 28px rgba(0,0,0,.8); pointer-events:none;
  opacity:0; transition:opacity .3s,transform .3s;
  /* Long reward sub-text (e.g. "Соперник уровня «Легко» побеждён") used to
     force the box wide via white-space:nowrap — on a narrow viewport the
     centered box then overflowed both screen edges instead of wrapping.
     Capping to the viewport width and allowing normal wrapping keeps the
     box fully on-screen at any width. */
  max-width:calc(100vw - 32px); box-sizing:border-box;
  white-space:normal; text-align:center;
}
/* Thin brass accent lines flanking the box — same ornamental language as
   .lobby-ornament's line-diamond-line divider, adapted as a pair of side
   ticks instead of a horizontal rule (the toast is short and wide, not
   tall, so vertical accents at the sides read better than anything
   crossing the text itself). Stays the same brass tone in every toast
   variant (warn/success only recolor the text, not the border — the
   accents follow the border's lead, not the text's). */
.coins-toast::before, .coins-toast::after {
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:2px; height:60%;
  background:linear-gradient(to bottom, transparent, rgba(201,168,76,.7), transparent);
}
.coins-toast::before { left:7px; }
.coins-toast::after { right:7px; }
.coins-toast--on { opacity:1; transform:translate(-50%,0); }
/* PC only — when a toast fires while the shop is open (e.g. the "not
   enough coins" warning from a buy click, see coins.js's showToast()),
   raise it well clear of the shop panel's own header instead of sitting
   right up against it: the panel top lands around 120px on a typical
   desktop viewport (measured at 1280x800), 40px below the toast's own
   default 80px top plus its own height — close enough to visually
   collide. Mobile is untouched — the shop is full-bleed there (see
   .coins-store-panel's own mobile override below), so this same overlap
   doesn't happen in the first place. */
@media (min-width:481px) {
  .coins-toast--in-store { top:24px; }
}
.coins-toast-main {
  font-family:var(--font-ui); font-size:.92rem; font-weight:700;
  letter-spacing:.1em; color:#e8c96a;
}
.coins-toast-sub {
  font-family:var(--font-ui); font-size:.88rem;
  font-style:italic; color:rgba(201,168,76,.75);
}
.coins-toast--warn    .coins-toast-main { color:#ff7070; }
.coins-toast--warn    .coins-toast-sub  { color:rgba(255,100,100,.75); }
.coins-toast--success .coins-toast-main { color:#7ddc7d; }
.coins-toast--success .coins-toast-sub  { color:rgba(100,200,100,.75); }

/* ── LOCK BADGE ──────────────────────────────────────────────── */
.lobby-theme-btn,.theme-btn,[data-theme-id] { position:relative !important; }
.coin-lock {
  position:absolute; top:3px; right:3px;
  font-family:var(--font-ui); font-size:.58rem; font-weight:700; letter-spacing:.06em;
  background:rgba(7,10,6,.95); border:1px solid rgba(201,168,76,.5);
  color:#c9a84c; padding:3px 6px; pointer-events:none;
}
.coin-locked { opacity:.65; }

/* ── STORE ───────────────────────────────────────────────────── */
.coins-store {
  position:fixed; inset:0; z-index:99000;
  background:rgba(3,5,2,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  will-change: backdrop-filter;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.coins-store--open { opacity:1; pointer-events:all; }
.coins-store-panel {
  width:580px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column;
  background:#0b0f09; border:1px solid rgba(201,168,76,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.98);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
@media (max-width:480px) {
  /* Full-screen on mobile — no floating card with backdrop margins. Same
     safe-area top inset as #lobby-screen/#app (script/css/style.css) —
     this popup is full-screen too on mobile, so it needs the same notch
     clearance, not just the two main screens. */
  .coins-store-panel {
    width:100vw; max-width:100vw; height:100vh; max-height:100vh; border:none;
    padding-top: max(25px, env(safe-area-inset-top));
  }
}
.coins-store--open .coins-store-panel { transform:translateY(0) scale(1); }
.coins-store-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(201,168,76,.15);
  background:rgba(201,168,76,.03);
}
.coins-store-hdr-left { display:flex; align-items:center; gap:10px; }
.coins-store-gem { font-size:.85rem; color:#c9a84c; }
.coins-store-title {
  font-family:var(--font-ui); font-size:.82rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#e8c96a;
}
.coins-store-hdr-right { display:flex; align-items:center; gap:12.5px; } /* gap +25% over 10px */
.coins-store-bal {
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-ui); font-size:.943rem; font-weight:700; color:#e8c96a; /* +15% over .82rem */
  padding:5.75px 13.8px; border:1px solid rgba(201,168,76,.3); background:rgba(201,168,76,.06); /* +15% over 5px/12px */
}
.coins-store-bal-ico { font-size:.805rem; color:#c9a84c; } /* +15% over .7rem */
/* Square, matched to the balance badge's own height (34px measured), then
   both grown +15% together (34 -> 39.1px) — not the badge's full width,
   which is content-driven and would drift out of sync as the balance
   grows more digits; height is the meaningful shared dimension here. */
.coins-store-x {
  width:41.055px; height:41.055px; display:flex; align-items:center; justify-content:center; /* +5% over 39.1px */
  background:transparent; border:1px solid rgba(201,168,76,.25);
  color:rgba(201,168,76,.6); cursor:pointer; transition:all .2s;
}
.coins-store-x svg { width:20.5275px; height:20.5275px; } /* +5% over 19.55px */
.coins-store-x:hover { border-color:#c9a84c; color:#fff; }

.coins-store-grid {
  /* Only ever renders powerups now (Themes removed as a shop category) —
     a fixed 2-column grid fits these 4 cards with no scroll, unlike
     auto-fill's 3-per-row, which used to leave an uneven trailing row when
     Themes and Powerups shared this same grid. */
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; padding:14px; overflow-y:auto; flex:1; min-height:220px;
  /* align-content defaults to "stretch" on a grid container, which
     stretches ROW TRACKS (not just items within a row) to consume any
     leftover space when the grid has more height available than its rows
     need — e.g. the popup is flex:1 inside a full-screen mobile panel, so
     shrinking a card's own content just made the grid stretch its rows
     taller to compensate, with the extra space landing below the button as
     invisible padding. "start" packs rows from the top instead, so a
     shorter card actually renders shorter. */
  align-content: start;
}
@media (max-width:480px) {
  /* Mobile — shorter cards (less padding/gap, a smaller icon banner,
     tighter button padding). Doesn't touch .csc-name/.csc-desc's
     min-height (still needed for the cross-card Y-alignment) or
     .csc-qty's margin-top (the "+30% lower" from a prior request) — only
     the parts that were pure breathing room. */
  .coins-store-grid .csc { padding: 6px; gap: 4px; }
  .coins-store-grid .csc-btn { padding: 5px; }
  /* Cards are compact now, so with align-content:start (above) the grid no
     longer fills the full-screen mobile popup, leaving leftover vertical
     space. Grouped to the center instead of spread with space-between (an
     earlier version of this rule) — and the grid's own edge padding is
     lowered to match its inter-card gap (10px), so the gap between the
     card group and the popup's edges reads the same as the gap between
     the cards themselves, on every side. */
  /* "safe center" — centers normally, but if the content is taller than
     the available space it falls back to start-alignment instead of
     centering. Plain "center" would let the overflow split evenly above
     AND below the box; with overflow-y:auto, the portion pushed above the
     top edge sits at a negative scroll offset that's normally unreachable
     (browsers start scrollTop at 0 and don't scroll negative), so part of
     the grid becomes permanently invisible. "safe" is the CSS Box
     Alignment keyword built for exactly this failure mode. */
  .coins-store-grid { align-content: safe center; padding: 10px; row-gap: 13.5px; } /* row-gap +35% over the shared 10px gap; column-gap stays 10px — these had drifted to 20px/70px (flagged as suspicious in an earlier round, never confirmed), corrected to match this comment's own stated math per direct request to remove the resulting scroll */
}
.coins-store-grid::-webkit-scrollbar { width:4px; }
.coins-store-grid::-webkit-scrollbar-thumb { background:rgba(201,168,76,.2); }

/* ── CARDS ───────────────────────────────────────────────────── */
.csc {
  display:flex; flex-direction:column; gap:8px; padding:11px;
  background:rgba(201,168,76,.03); border:1px solid rgba(201,168,76,.1);
  transition:border-color .2s,background .2s;
}
.csc:hover { border-color:rgba(201,168,76,.3); background:rgba(201,168,76,.06); }
/* Power-up swatch kept as div */
.csc-swatch { width:100%; height:52px; border-radius:1px; display:flex; align-items:center; justify-content:center; }
@media (max-width:480px) { .csc-swatch { height:36.8px; } } /* +15% over 32px */
/* Power-up swatches */
.csc-swatch--hint_pack   { background:linear-gradient(135deg,#0a1a2a,#0f2a3a); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--undo_pack   { background:linear-gradient(135deg,#1a1a0a,#2a2a0f); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--xp_boost    { background:linear-gradient(135deg,#1a0a1a,#2a0f2a); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.csc-swatch--board_flip  { background:linear-gradient(135deg,#0a1a0a,#0f2a0f); display:flex;align-items:center;justify-content:center;font-size:1.5rem; }

.csc-name {
  font-family:var(--font-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#e8c96a;
  text-align:center;
}
@media (max-width:480px) {
  /* Same reasoning as .csc-desc's min-height below — a 2-line name (e.g.
     German "RÜCKGÄNGIG-PAKET") vs. a 1-line one throws off the uniform
     content height above the qty line just as much as a longer
     description would, even once .csc-desc itself is clamped. Measured
     across all 4 powerups x all 10 languages: max was 34px (2 lines). */
  .csc-name { min-height:34px; margin-top:8px; } /* extra gap after the swatch, on top of .csc's own gap */
}
.csc-desc {
  font-family:var(--font-ui); font-size:.738rem; /* -10% over .82rem (mobile keeps this) */
  font-style:italic; color:#e8c96a; line-height:1.3;
  margin-top:6px; /* extra gap after the name, on top of .csc's own gap */
}
@media (max-width:480px) {
  /* Fixed min-height, not row-stretch — a description that happens to wrap
     one line shorter than its neighbor (even within the same grid row)
     still leaves the qty+button pair below it at a slightly different Y,
     since margin-top below is a flat px value, not an auto-fill. Clamping
     .csc-desc itself to the tallest measured case (all 4 powerups x all 10
     languages at this width; the longest was Ukrainian's xp_boost at
     ~110.5px) makes every card's content above the qty line the same
     height, so a flat margin-top lands buttons on one shared Y everywhere
     — both within a row and top-row vs. bottom-row — without the PC
     approach's unbounded auto-fill (see .csc-qty below). */
  .csc-desc { min-height:112px; }
}
@media (min-width:481px) {
  .csc-desc { font-size:.5535rem; text-align:center; } /* -25% over .738rem, PC only */
}
.csc-btn {
  width:100%; padding:8px; background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.3);
  color:#c9a84c; font-family:var(--font-ui); font-size:.6rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .2s;
  text-align:center;
}
.csc-btn:hover { border-color:#c9a84c; color:#fff; background:rgba(201,168,76,.15); }
@media (min-width:481px) {
  /* Button text is just the cost now (see renderGrid()) — bumping this
     also directly satisfies "increase the cost font size". */
  .csc-btn { font-size:.75rem; } /* +25% over .6rem */
}
@media (max-width:480px) {
  /* Button itself (padding, not just text) +30% over the mobile-compact
     5px from a prior round, plus the cost font +30% over the shared .6rem. */
  .coins-store-grid .csc-btn { padding:6.5px; font-size:.78rem; }
}
/* Mobile: a small fixed gap (was 6px, now +30% per a follow-up request),
   not the PC row-alignment behavior below — a flexible auto-margin fills
   ALL leftover space above qty+button, which reads as an oversized card on
   mobile. Y-alignment across all 4 mobile cards is instead handled by
   clamping .csc-desc to a uniform min-height above (so every card has the
   same content height above this point), not by this margin. */
.csc-qty { font-family:var(--font-ui); font-size:.7rem; color:#7ddc7d; font-weight:700; text-align:center; margin-top:7.8px; }
@media (min-width:481px) {
  /* PC only — pins the qty+button pair to the bottom of the card so
     buttons line up across a grid row (see the 2x2 --powerups grid above),
     regardless of how many lines .csc-desc wraps to. */
  .csc-qty { margin-top: auto; }
}

/* ── PURCHASE DIALOG ─────────────────────────────────────────── */
.coins-pur {
  position:fixed; inset:0; z-index:99100;
  background:rgba(3,5,2,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  will-change: backdrop-filter;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.coins-pur--open { opacity:1; pointer-events:all; }
.coins-pur-box {
  width:320px; padding:32px 26px 24px; text-align:center; background:#0b0f09;
  border:1px solid rgba(201,168,76,.35); box-shadow:0 24px 60px rgba(0,0,0,.98);
  display:flex; flex-direction:column; align-items:center; gap:30px; /* +15% over 12px */
  transform:scale(.95); transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.coins-pur--open .coins-pur-box { transform:scale(1); }
.coins-pur-name {
  font-family:var(--font-ui); font-size:.92rem; font-weight:700;
  letter-spacing:.1em; color:#e8c96a;
}
.coins-pur-cost { font-family:var(--font-ui); font-size:1.4rem; font-weight:700; color:#c9a84c; }
.coins-pur-btns { display:flex; gap:12px; width:100%; margin-top:6.9px; } /* +15% over 6px */
.coins-pbtn {
  flex:1; padding:12px; font-family:var(--font-ui); font-size:.62rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .2s;
}
.coins-pbtn-ghost { background:transparent; border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.55); }
.coins-pbtn-ghost:hover { border-color:rgba(201,168,76,.5); color:#c9a84c; }
.coins-pbtn-gold  { background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.55); color:#e8c96a; }
.coins-pbtn-gold:hover { background:rgba(201,168,76,.2); border-color:#c9a84c; color:#fff; }