:root {
    --accent: #a8ff78;
    --accent2: #78ffd6;
    --text: #e8e8f0;
    --muted: #666680;
    --danger: #ff6b6b;
    --gold: #ffd700;
    --pink: #ff78c4;
    --orange: #ff9f4a;
    --bg: #0e0e12;
    --surface: #16161e;
    --card: #1e1e2a;
    --border: #2a2a3a;
    --purple: #c878ff;

    /* z-index tier system (ascending) */
    /* In-game modal layers. A roll-result popup can still be open when the
       game-complete screen fires, so game-complete MUST sit above it —
       Truthopoly and Sexyopoly previously had both on the same layer, which
       left the end-of-game screen behind the roll popup depending purely on
       DOM order, looking like the game had frozen on the last turn. */
    --z-game-modal:    400;  /* roll-result / mid-turn popups */
    --z-roll-result:   500;  /* game-complete — always above the above */
    --z-system:        9000;
    --z-nav:           10000;
    --z-dropdown:      10001;
    --z-toast:         10002;
    --z-confirm-bar:   10003;
    --z-overlay:       10100;
    --z-always-on-top: 99999;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  @keyframes skeletonShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
  }
  .skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--card) 50%, var(--surface) 75%);
    background-size: 800px 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
  }
  .skeleton-text  { height: 14px; margin: 8px 0; }
  .skeleton-title { height: 22px; width: 60%; margin: 12px 0; }
  .skeleton-card  { height: 80px; margin: 8px 0; border-radius: 12px; }
  .skeleton-wrap  { padding: 16px; display: flex; flex-direction: column; gap: 6px; }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 20% 20%, rgba(168,255,120,0.04) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 80% 80%, rgba(120,255,214,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid var(--border);
    background: #2e2e3e;
    position: sticky; top: 0; z-index: 200;
    gap: 12px;
  }

  input, textarea, select { font-size: max(16px, 1em); }

  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .auth-btn {
    background: rgba(168,255,120,0.08);
    border: 1.5px solid rgba(168,255,120,0.25);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--accent);
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .auth-btn:hover { background: rgba(168,255,120,0.15); border-color: var(--accent); }

  .user-avatar-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 5px 10px 5px 5px;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .user-avatar-btn:hover { border-color: var(--accent); }
  .user-avatar-btn.visible { display: flex; }
  .auth-btn.hidden { display: none; }

  .avatar-img {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0e0e12;
    overflow: hidden;
    flex-shrink: 0;
  }
  .avatar-img img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-name {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--text);
    /* min-width matches max-width so the name occupies a fixed 70px slot from
       first paint. The element starts as a single placeholder dash and is
       replaced by the real name once auth settles; without a reserved width
       the avatar button (and everything to its left in the header) shifted
       horizontally at that moment. text-align keeps the shorter placeholder
       left-aligned inside the reserved slot. This rule only takes effect
       where the name is shown — it is hidden entirely on narrow/mobile
       viewports by the media rule below. */
    min-width: 70px;
    max-width: 70px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: var(--z-system);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .modal {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 28px 24px;
    width: 100%;
    max-width: 360px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.25s ease;
  }
  .modal-overlay.open .modal { transform: translateY(0); }

  .modal-close {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .modal-close:hover { color: #fff; background: rgba(255,107,107,0.2); border-color: var(--danger); }

  .modal-tabs {
    display: flex;
    gap: 4px;
    background: var(--card);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 22px;
  }
  .modal-tab {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
  }
  .modal-tab.active {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
  }

  .modal-form { display: flex; flex-direction: column; gap: 12px; }
  .modal-form.hidden { display: none; }

  .form-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
  }

  .form-input {
    width: 100%;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .form-input:focus { border-color: var(--accent); }
  .form-input::placeholder { color: var(--muted); }

  .form-submit {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 10px;
    color: #0e0e12;
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    margin-top: 4px;
  }
  .form-submit:hover { opacity: 0.9; transform: translateY(-1px); }
  .form-submit:active { transform: scale(0.98); }

  .form-divider {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--muted);
  }
  .form-divider::before, .form-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }

  .social-btns { display: flex; gap: 8px; }
  .social-btn {
    flex: 1;
    padding: 10px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: border-color 0.2s, background 0.2s;
  }
  .social-btn:hover { border-color: var(--accent); background: rgba(168,255,120,0.05); }
  .social-btn-icon { font-size: 1rem; }

  .form-error {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--danger);
    display: none;
    padding: 8px 30px 8px 12px;
    background: rgba(255,107,107,0.08);
    border-radius: 8px;
    border: 1px solid rgba(255,107,107,0.2);
    position: relative;
  }
  .form-error.visible { display: block; }
  .form-error-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--danger);
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
  }
  .form-error-close:hover { opacity: 1; }

  .user-dropdown {
    position: fixed;
    top: 0; right: 0; /* overridden by JS on open */
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    min-width: 160px;
    z-index: var(--z-dropdown);
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }
  .user-dropdown.open { display: flex; }

  .dropdown-close-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    z-index: 1;
  }
  .dropdown-close-btn:hover { color: #fff; background: rgba(255,107,107,0.2); border-color: var(--danger); }

  .dropdown-item {
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    display: flex; align-items: center; gap: 8px;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }
  .dropdown-item:hover { background: var(--card); color: var(--text); }
  .dropdown-item.danger:hover { color: var(--danger); }
  .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

  .fav-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: var(--z-nav);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .fav-panel.open { opacity: 1; pointer-events: all; }

  .fav-sheet {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    width: 100%;
    overflow-y: auto;
    transform: translateY(40px);
    transition: transform 0.25s ease;
  }
  .fav-panel.open .fav-sheet { transform: translateY(0); }

  .fav-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .fav-sheet-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    display: flex; align-items: center; gap: 8px;
  }
  .fav-sheet-close {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
  }

  .fav-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Three tiles across. min-height matches the old single-row height so the
     panel keeps the same vertical rhythm it had as a stacked list. */
  .fav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 66px;
    padding: 10px 6px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s;
  }
  .fav-item:hover { border-color: var(--pink); }
  .fav-item-icon { font-size: 1.5rem; line-height: 1; }
  .fav-item-icon svg { width: 1.9rem; height: 1.5rem; display: block; }
  .fav-item-text { flex: 1; }
  /* Long names wrap to two lines and then clip, so one verbose title cannot
     stretch a tile taller than the two beside it. */
  .fav-item-name {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .fav-remove {
    position: absolute; top: 2px; right: 4px; z-index: 2;
    padding: 2px 4px; line-height: 1;
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 0.8rem;
    padding: 4px; border-radius: 6px;
    transition: color 0.15s;
  }
  .fav-remove:hover { color: var(--danger); }

  main {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero {
    text-align: center;
    margin-bottom: 24px;
    width: 100%;
    position: relative;
    z-index: 10;
  }

  .hero-title {
    font-size: clamp(0.85rem, 3.6vw, 1.24rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--text);
    opacity: 0;
    animation: fadeUp 0.5s ease 0.2s forwards;
  }

  .hero-title span {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-search-wrap {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin: 10px auto 0;
    position: relative;
    z-index: 700;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.35s forwards;
  }
  .hero-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1.5px solid #ffffff;
    border-radius: 10px;
    padding: 3px 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
  }
  .hero-search-bar:focus-within {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
  }
  .hero-search-icon {
    color: #ffffff;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  .hero-search-bar:focus-within .hero-search-icon {
    color: #ffffff;
  }
  .hero-search-input {
    background: none;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    transform: scale(0.6);
    transform-origin: left center;
    letter-spacing: 0.02em;
    width: 117%;
    min-width: 0;
  }
  @media (max-width: 768px) {
    .hero-search-wrap { width: fit-content; max-width: 100%; }
  }
  .hero-search-input::placeholder { color: rgba(255,255,255,0.6); }
  .hero-search-clear {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 1px 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
    border-radius: 4px;
  }
  .hero-search-clear:hover { color: var(--text); }
  .hero-search-results {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 700;
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: var(--surface);
    max-height: min(55vh, calc(100vh - 140px));
    overflow-y: auto;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .hero-search-results.visible { display: block; }

  /* Moving activity banner — sits between the search bar and the
     "Featured" divider. Same pill shape/border/height as .hero-search-bar
     so the two read as a matched pair; content scrolls continuously.
     Width is NOT set here — it's synced at runtime (see activity-banner.js)
     to exactly match .hero-search-bar's rendered width, since the search
     bar has no fixed/hardcodable width of its own (it's sized by a scaled,
     percentage-width input). overflow: hidden clips the intentionally
     oversized/duplicated scrolling content to that synced width. */
  .activity-banner {
    max-width: 100%;
    /* min-height reserves the banner's final box before its content is
       injected. The track ships empty, so without this the pill collapsed
       to roughly zero height and everything below it — the "Featured"
       divider and both game grids — shifted downward the moment the first
       message arrived. The value is the content line-height (0.75rem at
       normal leading) plus the 3px vertical padding and 1.5px borders
       already declared below, so the reserved box equals the filled one.
       The width is still synced from .hero-search-bar in JavaScript: that
       bar is sized by a `transform: scale(0.6)` on a 117%-width input, a
       rendered width no CSS property on this element can reproduce. */
    min-height: 26px;
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1.5px solid #ffffff;
    border-radius: 10px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  /* The track fades in once the first messages are rendered. The banner box
     itself is always present at full size (min-height above), so this fades
     only the text — it cannot move any surrounding layout. Without it the
     messages appeared abruptly at whatever moment the feed resolved. */
  .activity-banner-track {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .activity-banner-track.activity-banner-track-ready {
    opacity: 1;
  }
  .activity-banner-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
  }
  .activity-banner-track-scrolling {
    /* Was 120s. The track translates a fixed -50% regardless of how many
       messages the feed returns, so the duration alone sets the reading
       speed. At 120s the text crawled slowly enough to read as stalled
       rather than as a live feed. 50s keeps every message on screen long
       enough to finish reading while making the motion clearly deliberate. */
    animation: activityBannerScroll 50s linear infinite;
  }
  .activity-banner-item {
    display: inline-block;
    /* Was #12a150, which the original comment described as sitting on a light
       banner. The banner background is var(--card) = #1e1e2a, a dark surface,
       so that dark green measured only 4.90:1 against it — nominally passing
       AA for normal text, but this text renders at 0.525rem (~8.4px), well
       below the size that threshold assumes, and read as muddy on screen.
       #4ade80 measures 9.46:1 on the same background, clearing AAA with room
       to spare while staying in the same green family as the accent palette. */
    color: #4ade80;
    font-family: 'Space Mono', monospace;
    /* Reduced 30% from 0.75rem. */
    font-size: 0.525rem;
    letter-spacing: 0.02em;
    padding-right: 48px;
  }
  @keyframes activityBannerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .activity-banner-track-scrolling { animation: none; }
  }

  /* The inline language dropdown that used to live beside the footer pill
     has been replaced by the .lang-modal popup defined further down this
     file, so its rules are gone. The .sg-lang-option class name is kept
     (the popup reuses it) and is styled under .lang-modal-grid. */

  /* Featured / Most Played grids — 3 tiles, single row */
  .featured-games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    /* Reserve one filled tile-row of height before the tiles are injected.
       These three grids (Most Played, Featured, Favorites) ship as empty
       containers that JavaScript fills once CATS/GMETA are ready. Without a
       reserved height each grid was 0px on first paint, so the static content
       below them (hero, category tiles, footer) painted at a collapsed
       position and then jumped down ~3 rows the moment the tiles arrived —
       the landing appeared to load bottom-first and shove itself into place.
       72px is the natural height of a two-line tile (1.5rem icon + 4px gap +
       two 0.62rem/1.25 name lines + 10px/8px padding + 2 x 1px border), so
       the reserved box equals the tallest filled row and there is no
       downward shift on fill. Single-line rows stretch to the same height,
       making the three rows uniform. */
    min-height: 72px;
  }
  /* ---- First-load top-to-bottom reveal ------------------------------------
     Staggers a short fade/rise across the landing sections in document order
     so the page resolves visibly from the top down instead of every static
     block appearing at once while the JavaScript-filled rows pop in later.
     Each element carries --sg-reveal-order (0,1,2,...); the delay is that
     index times one step.

     Regression guards, deliberate and load-bearing:
       1. The whole effect lives inside prefers-reduced-motion: no-preference,
          so a reduced-motion visitor gets no animation and every element is
          fully visible at its normal opacity — content can never be trapped
          invisible.
       2. It is scoped to body.sg-first-load, a one-shot class removed after
          the load event. Returning to the landing from a game (which toggles
          #landing-view from display:none back to flex) therefore does NOT
          replay the cascade.
       3. It is applied only to section-level containers, never to individual
          featured tiles, so it cannot interfere with the existing tile-flip
          animation. */
  @media (prefers-reduced-motion: no-preference) {
    body.sg-first-load .sg-reveal {
      animation: sgLandingReveal 0.45s ease both;
      animation-delay: calc(var(--sg-reveal-order, 0) * 60ms);
    }
  }
  @keyframes sgLandingReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* The rotating row needs a stable stacking context and 3D depth so the
     flipping tile does not clip against its neighbours mid-animation. */
  .featured-games-grid-rotating {
    perspective: 800px;
  }
  .featured-tile-flip {
    animation: featuredTileFlip 0.42s ease-in-out;
    -webkit-animation: featuredTileFlip 0.42s ease-in-out;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  @keyframes featuredTileFlip {
    0%   { transform: rotateY(0deg)   scale(1);    opacity: 1; }
    45%  { transform: rotateY(84deg)  scale(0.94); opacity: 0.35; }
    55%  { transform: rotateY(-84deg) scale(0.94); opacity: 0.35; }
    100% { transform: rotateY(0deg)   scale(1);    opacity: 1; }
  }
  @-webkit-keyframes featuredTileFlip {
    0%   { -webkit-transform: rotateY(0deg)   scale(1);    opacity: 1; }
    45%  { -webkit-transform: rotateY(84deg)  scale(0.94); opacity: 0.35; }
    55%  { -webkit-transform: rotateY(-84deg) scale(0.94); opacity: 0.35; }
    100% { -webkit-transform: rotateY(0deg)   scale(1);    opacity: 1; }
  }
  /* Respect a reduced-motion preference — the tile still changes, it just
     cross-fades instead of spinning. */
  @media (prefers-reduced-motion: reduce) {
    .featured-tile-flip {
      animation: featuredTileFade 0.42s ease-in-out;
      -webkit-animation: featuredTileFade 0.42s ease-in-out;
    }
    @keyframes featuredTileFade {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.25; }
    }
  }
  .featured-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 6px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, transform 0.15s;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .featured-tile:hover  { transform: translateY(-2px); border-color: var(--accent); }
  .featured-tile:active { transform: scale(0.96); }
  /* Favorites empty state: three invisible placeholder tiles hold the row's
     normal 3-column footprint/height, and the message is centered over all
     three via a grid overlay rather than being sized on its own. */
  .featured-games-grid-empty {
    position: relative;
  }
  .featured-tile-placeholder {
    visibility: hidden;
    cursor: default;
    pointer-events: none;
  }
  .favorites-empty-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
  }
  .featured-tile-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .featured-tile-name {
    font-family: 'Space Mono', monospace;
    /* Bumped from 0.55rem: the row went from four tiles to three, so each
       tile is wider and the smaller size looked undersized. */
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
  }

  .category-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
    opacity: 0;
    animation: fadeUp 0.45s ease forwards;
    -webkit-animation: fadeUp 0.45s ease forwards;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    will-change: transform, opacity;
  }

  .category-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: radial-gradient(ellipse 80% 60% at 0% 50%, rgba(255,255,255,0.04) 0%, transparent 70%);
  }
  .category-btn:hover::before { opacity: 1; }
  .category-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    border-color: var(--c);
  }
  .category-btn:hover .cat-icon { background: rgba(255,255,255,0.12); }
  .category-btn:hover .cat-arrow { color: var(--c); transform: translateX(4px); }
  .cat-solo   { --c: var(--purple);  animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
  .cat-bet    { --c: var(--gold);    animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
  .cat-drink  { --c: var(--accent);  animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }
  .cat-xrated { --c: var(--danger);  animation-delay: 0.45s; -webkit-animation-delay: 0.45s; }
  .cat-date   { --c: var(--pink);    animation-delay: 0.55s; -webkit-animation-delay: 0.55s; }

  .cat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: background 0.18s ease;
  }

  .cat-text { flex: 1; min-width: 0; }

  .cat-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
    line-height: 1.2;
  }

  .cat-subtitle {
    font-size: 0.78rem;
    color: var(--c, var(--accent));
    font-weight: 700;
    margin-top: 1px;
    font-family: 'Space Mono', monospace;
    opacity: 0.85;
  }

  .cat-desc {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 3px;
    font-weight: 400;
  }

  .cat-arrow {
    font-size: 1.1rem;
    color: var(--border);
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
  }

  .divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    opacity: 0;
    animation: fadeUp 0.45s ease 0.32s forwards;
  }
  .divider-line { flex: 1; height: 1px; background: var(--border); }
  .divider-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
  }

  footer {
    position: relative; z-index: 1;
    text-align: center;
    padding: 0 20px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    letter-spacing: 0.05em;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @-webkit-keyframes fadeUp {
    from { opacity: 0; -webkit-transform: translateY(14px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
  }

  .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.5s linear;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
  }
  @keyframes ripple { to { transform: scale(4); opacity: 0; } }

  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 6px 18px;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--text);
    z-index: var(--z-toast);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
  }
  .toast.show { opacity: 1; }

  .user-btn-wrap { position: relative; z-index: var(--z-dropdown); }

  .hsr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
  }
  .hsr-item:last-child { border-bottom: none; }
  .hsr-item:hover { background: var(--card); }
  .hsr-item:active { background: rgba(168,255,120,0.07); }
  .hsr-emoji { font-size: 1.3rem; flex-shrink: 0; }
  .hsr-text { flex: 1; min-width: 0; }
  .hsr-name { font-size: 0.85rem; font-weight: 700; color: var(--text); text-align: left; }
  .hsr-desc { font-size: 0.65rem; color: var(--muted); font-family: 'Space Mono', monospace; margin-top: 1px; }
  .hsr-empty {
    padding: 20px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    text-align: center;
  }

  .profile-overlay {
    position: fixed;
    top: var(--profile-header-offset, 0px); left: 0; right: 0; bottom: 0;
    background: var(--bg);
    /* Must sit above .cat-view-bar (z-index: 600). z-index on the sticky
       .profile-header inside only competes WITHIN this overlay's stacking
       context, so raising that header alone did nothing when the category
       back bar lived in a sibling context — the overlay ROOT itself has to
       outrank it. Profile, Saved, and Gem Unlocks all use this overlay. */
    z-index: 700;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .profile-overlay.open { opacity: 1; pointer-events: all; }
  /* Gem Unlocks overlay: starts below sticky header (offset set via JS), above game view */
  #gemUnlocksOverlay { z-index: 710; }

  .profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    /* Sticky within its overlay so it stays pinned while the body
       scrolls. Cross-context ordering against .cat-view-bar is handled by
       the .profile-overlay root's own z-index (700+), not this value. */
    position: sticky; top: 0; z-index: 10;
  }
  .profile-back {
    background: var(--card);
    border: 1.5px solid var(--text);
    border-radius: 10px;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    display: flex; align-items: center; gap: 6px;
    transition: border-color 0.2s, color 0.2s;
  }
  .profile-back:hover { border-color: var(--accent); color: var(--accent); }

  .profile-page-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
  }

  .profile-body {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
  }
  .profile-avatar-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,255,120,0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  .profile-avatar-large {
    width: 68px; height: 68px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    font-weight: 800;
    color: #0e0e12;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(168,255,120,0.3);
    box-shadow: 0 0 18px rgba(168,255,120,0.12);
    cursor: pointer;
    transition: transform 0.15s;
  }
  .profile-avatar-large:hover { transform: scale(1.04); }
  .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

  .profile-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
  }

  .avatar-pencil-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    z-index: 2;
    padding: 0;
    min-height: unset;
    min-width: unset;
  }
  .avatar-pencil-btn:hover {
    background: var(--card);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.15);
  }

  .profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .name-pencil-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    min-height: unset;
    min-width: unset;
    flex-shrink: 0;
  }
  .name-pencil-btn:hover {
    color: var(--accent);
    background: rgba(168,255,120,0.08);
  }
  .avatar-grid {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
  }
  .avatar-grid.visible { display: grid; }
  .avatar-option {
    aspect-ratio: 1;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
  }
  .avatar-option:hover { border-color: var(--accent); transform: scale(1.08); }
  .avatar-option.selected { border-color: var(--accent); background: rgba(168,255,120,0.1); }

  .profile-name-display {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .profile-name-edit {
    display: flex;
    gap: 6px;
    width: 100%;
  }
  .profile-name-input {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
  }
  .profile-name-input:focus { border-color: var(--accent); }
  .profile-field-row {
    display: flex;
    align-items: center;
  }
  .profile-field-row + .profile-field-row {
    margin-top: 3px;
  }
  .profile-field-label {
    flex: 0 0 62px;
    text-align: left;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .profile-field-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }
  .profile-field-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 5px 7px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 7px;
    outline: none;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
    text-overflow: ellipsis;
  }
  .profile-field-input:focus { border-color: var(--accent); }
  .profile-field-input[readonly] {
    opacity: 0.6;
    cursor: default;
    background: var(--card);
  }
  /* Editing state: input is not readonly while the pencil icon is toggled on */
  .profile-field-input:not([readonly]) {
    background: rgba(168,255,120,0.12);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(168,255,120,0.18);
  }
  .profile-field-pencil-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    min-height: unset;
    min-width: unset;
    flex-shrink: 0;
  }
  .profile-field-pencil-btn:hover {
    color: var(--accent);
    background: rgba(168,255,120,0.08);
  }
  .profile-edit-btn {
    background: rgba(168,255,120,0.08);
    border: 1.5px solid rgba(168,255,120,0.25);
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    color: var(--accent);
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .profile-edit-btn:hover { background: rgba(168,255,120,0.15); }
  #profileReferralShareButton {
    min-height: 0;
    height: auto;
    line-height: 1;
    padding: 3px 8px;
    font-size: 9.5px;
    box-sizing: border-box;
  }

  .profile-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .profile-section-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .profile-section-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 12px;
    background: var(--accent);
    border-radius: 2px;
  }

  .profile-fav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
  }
  .profile-fav-item:hover { border-color: var(--pink); transform: translateX(2px); }
  .profile-fav-rank {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--muted);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
  }
  .profile-fav-rank.gold { color: var(--gold); font-weight: 700; }
  .profile-fav-rank.silver { color: #c0c0c0; font-weight: 700; }
  .profile-fav-rank.bronze { color: #cd7f32; font-weight: 700; }
  .profile-fav-icon { font-size: 1.3rem; flex-shrink: 0; }
  .profile-fav-text { flex: 1; min-width: 0; }
  .profile-fav-name { font-size: 0.88rem; font-weight: 700; }
  .profile-fav-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    color: var(--muted);
  }
  .profile-fav-heart { color: var(--pink); font-size: 0.9rem; }

  .profile-empty {
    text-align: center;
    padding: 24px;
    background: var(--card);
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--muted);
  }

  .profile-top-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
  }
  @media (max-width: 640px) {
    .profile-top-row { flex-direction: column; }
  }

  .profile-top-row .profile-avatar-section {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 14px 16px;
    gap: 10px;
    overflow: visible;
  }

  .profile-gems-box {
    flex: 1 1 0;
    min-width: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: visible;
  }
  .profile-gems-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 80% 10%, rgba(120,180,255,0.06) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
  }
  .profile-points-history-list {
    display: none;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
  }
  .profile-points-history-list.show { display: flex; }
  .profile-points-history-list .profile-gems-row {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 9px;
    margin: 0;
  }
  .profile-points-history-list .profile-gems-row-label {
    font-size: 10.5px;
  }
  .profile-points-history-list .profile-gems-row-value {
    font-size: 10.5px;
  }
  .profile-points-history-list .profile-empty {
    font-family: 'Space Mono', monospace;
    color: var(--muted);
    text-align: center;
  }
  .profile-gems-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .profile-gems-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 12px;
    background: #78b2ff;
    border-radius: 2px;
  }
  .profile-gems-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    opacity: 0.5;
  }
  .profile-gems-close {
    position: absolute;
    top: -9px; right: -9px;
    width: 20px; height: 20px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    transition: color .15s, background .15s, border-color .15s;
    z-index: 3;
    padding: 0;
    min-height: unset; min-width: unset;
  }
  .profile-gems-close:hover { color: #fff; background: rgba(255,107,107,0.2); border-color: var(--danger); }

  .profile-gems-points-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .profile-gems-points-col .profile-gems-box {
    flex: 1;
    padding: 14px 12px;
  }
  .profile-gems-box-title {
    font-family: 'Space Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .profile-gems-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 9px;
  }
  .profile-gems-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
  }
  .profile-gems-row-label {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .profile-gems-row-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
  }
  .profile-gems-row-value-muted { color: var(--muted); }

  .profile-smashdroppoints-box .profile-gems-box-title {
    padding-right: 14px;
    white-space: nowrap;
  }

  .smashdroppoints-info-button {
    position: absolute;
    top: 10px; right: 10px;
    width: 16px; height: 16px;
    min-height: unset; min-width: unset;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 800;
    font-style: italic;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: background .15s;
  }
  .smashdroppoints-info-button:hover { background: rgba(168,255,120,0.15); }

  .smashdroppoints-info-popup {
    display: none;
    position: absolute;
    top: 32px;
    right: 10px;
    left: auto;
    width: 420px;
    max-width: calc(100vw - 40px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 26px 12px 12px;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  }
  .smashdroppoints-info-popup.show { display: block; }

  #payFreeGemsInfoPopup {
    width: 100%;
    left: 0;
    right: 0;
  }
  .smashdroppoints-info-popup::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 16px;
    width: 12px; height: 12px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
  }
  .smashdroppoints-popup-close {
    position: sticky;
    top: 0; margin-left: auto;
    float: right;
    width: 16px; height: 16px;
    min-height: unset; min-width: unset;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    background: var(--card);
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .smashdroppoints-popup-close:hover { color: var(--text); border-color: var(--text); }
  .smashdroppoints-info-title {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
  }
  .smashdroppoints-info-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .smashdroppoints-info-item {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 9px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
  }
  .smashdroppoints-info-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0 12px;
  }


  .profile-empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; }

  .profile-scores-box .profile-gems-title::before { background: var(--gold); }
  .profile-hs-share {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 3;
  }
  .profile-scores-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px;
    flex: 1;
    overflow: hidden;
  }
  .psc-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: default;
    min-width: 0;
  }
  .psc-name {
    font-size: 0.62rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .psc-row2 {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .psc-icon { font-size: 0.85rem; flex-shrink: 0; }
  .psc-val {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem; font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
  }

  .profile-lb-box .profile-gems-title::before { background: var(--gold); }
  .profile-lb-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px;
    flex: 1;
    overflow: hidden;
  }
  .plb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-width: 0;
  }
  .plb-item:hover { border-color: var(--gold); background: rgba(255,215,0,0.05); }
  .plb-item:active { transform: scale(0.98); }
  .plb-icon { font-size: 0.95rem; flex-shrink: 0; }
  .plb-info { flex: 1; min-width: 0; display: flex; align-items: center; }
  .plb-best {
    font-family: 'Space Mono', monospace;
    /* Reduced from 0.56rem: these tiles sit in a two-column grid and now
       carry a full title such as "Champ #1 👑👑👑" rather than a bare
       number, which no longer fit at the old size. Ellipsis is retained as a
       fallback for the longest strings on the narrowest screens. */
    font-size: 0.5rem; color: var(--muted);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 380px) {
    .plb-best { font-size: 0.45rem; }
  }
  .plb-arrow {
    font-size: 0.65rem; color: var(--border);
    flex-shrink: 0;
    margin-left: 4px;
    transition: color .15s;
  }
  .plb-item:hover .plb-arrow { color: var(--gold); }

  .profile-lb-drill {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    animation: fadeUp 0.2s ease forwards;
  }
  .profile-lb-drill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .profile-lb-back {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-family: 'Space Mono', monospace;
    font-size: 0.65rem; padding: 4px 8px;
    border-radius: 6px;
    transition: color .15s, background .15s;
  }
  .profile-lb-back:hover { color: var(--accent); background: rgba(168,255,120,0.07); }
  .profile-lb-drill-title {
    font-size: 0.82rem; font-weight: 800;
    flex: 1;
  }
  .plbd-variant-bar {
    display: flex;
    gap: 6px;
    padding: 0 14px 8px;
    flex-wrap: wrap;
  }
  .plbd-variant-bar:empty { display: none; }
  .plbd-variant-btn {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
  }
  .plbd-variant-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(255,215,0,0.08);
  }
  .plbd-variant-btn:hover { border-color: var(--accent); color: var(--accent); }
  .plb-multi-dot {
    color: var(--muted);
    font-size: 0.5rem;
    letter-spacing: 1px;
    vertical-align: middle;
  }
  .profile-lb-drill-list {
    display: flex; flex-direction: column;
    padding: 10px 14px;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    /* Width must never grow with content — this list sits inside a fixed-
       width profile-overlay card. Longer score strings (e.g. mock/seeded
       leaderboard rows with 5-digit scores like "48,200") must wrap/ellipsis
       within the existing row shape rather than widening the row or the
       card around it. */
    width: 100%;
    box-sizing: border-box;
  }
  .plbd-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .plbd-row:last-child { border-bottom: none; }
  .plbd-rank {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem; color: var(--muted);
    /* Was a fixed 22px, sized for "#7". The rank now carries a title such as
       "Executive #10 ⭐", so the column is wider and left-aligned, with a
       minimum that keeps the short entries lined up. */
    min-width: 96px; max-width: 118px;
    text-align: left; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media (max-width: 420px) {
    .plbd-rank { min-width: 84px; max-width: 96px; font-size: 0.54rem; }
  }
  .plbd-rank.gold   { color: var(--gold);    font-weight: 700; }
  .plbd-rank.silver { color: #c0c0c0;         font-weight: 700; }
  .plbd-rank.bronze { color: #cd7f32;         font-weight: 700; }
  .plbd-name {
    flex: 1;
    font-size: 0.78rem; font-weight: 600;
    /* Name must shrink/truncate, never push the row wider — this is what
       actually protects the fixed layout when a longer score string (from
       the seeded mock leaderboard rows) sits on the same row. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .plbd-score {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    flex-shrink: 0;
    /* Score itself never wraps or grows the row — a 5-digit score is the
       same font-size/weight as a 2-digit one and sits in the same fixed
       right-hand slot every other row uses. */
    white-space: nowrap;
  }
  .profile-lb-drill-you {
    margin: 0 14px 14px;
    padding: 9px 12px;
    background: rgba(168,255,120,0.07);
    border: 1.5px solid rgba(168,255,120,0.2);
    border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
    font-size: 0.72rem;
  }
  .plbd-you-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem; color: var(--accent);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; flex-shrink: 0;
  }
  .plbd-you-rank {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem; color: var(--muted);
  }
  .plbd-you-score {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    margin-left: auto;
  }

  .pay-btn {
    background: linear-gradient(135deg, rgba(120,178,255,0.12), rgba(120,255,214,0.08));
    border: 1.5px solid rgba(120,178,255,0.35);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #78b2ff;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
  }
  .pay-btn:hover {
    background: linear-gradient(135deg, rgba(120,178,255,0.22), rgba(120,255,214,0.15));
    border-color: #78b2ff;
    box-shadow: 0 0 16px rgba(120,178,255,0.25);
  }

  /* Full screen toggle — same pill treatment as the Gems button, sitting
     immediately to its left. Shown only on mobile web; the script keeps the
     [hidden] attribute in place everywhere else. */
  .fullscreen-btn {
    background: linear-gradient(135deg, rgba(120,178,255,0.12), rgba(120,255,214,0.08));
    border: 1.5px solid rgba(120,178,255,0.35);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    color: #78b2ff;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
  }
  .fullscreen-btn:hover {
    background: linear-gradient(135deg, rgba(120,178,255,0.22), rgba(120,255,214,0.15));
    border-color: #78b2ff;
    box-shadow: 0 0 16px rgba(120,178,255,0.25);
  }
  .fullscreen-btn[hidden] { display: none; }
  .fullscreen-btn-icon { font-size: 1rem; line-height: 1; }

  /* The button that persists while full screen is active. It is positioned by
     the script into whichever corner suits the current device orientation, so
     only the shared appearance lives here. */
  .fullscreen-floating-btn {
    position: fixed;
    z-index: 2147483000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18,18,26,0.72);
    border: 1.5px solid rgba(120,178,255,0.45);
    color: #78b2ff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.15s, border-color 0.2s;
  }
  .fullscreen-floating-btn:hover,
  .fullscreen-floating-btn:focus-visible { opacity: 1; border-color: #78b2ff; }
  .fullscreen-floating-btn:active { transform: scale(0.92); opacity: 1; }
  .fullscreen-floating-btn[hidden] { display: none; }
  /* Corner placement, kept clear of notches and rounded screen edges. */
  .fullscreen-floating-btn.corner-top-right {
    top:   calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
  }
  .fullscreen-floating-btn.corner-bottom-right {
    bottom: calc(10px + env(safe-area-inset-bottom));
    right:  calc(10px + env(safe-area-inset-right));
  }

  header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
  }

  footer {
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .toast {
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  @media (max-width: 320px) {
    header { gap: 6px; }
  }

  @media (max-width: 480px) {
    header {
      flex-wrap: nowrap;
      padding-bottom: 10px;
      gap: 6px;
      overflow: visible;
    }
    .header-left {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    .logo {
      font-size: 1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-right {
      flex: 0 0 auto;
      flex-shrink: 0;
      justify-content: flex-end;
      gap: 5px;
      overflow: visible;
    }
    .auth-btn {
      font-size: 0.6rem;
      padding: 5px 8px;
      min-width: unset;
      white-space: nowrap;
    }
    .pay-btn {
      font-size: 0.6rem;
      padding: 5px 7px;
      min-width: unset;
      white-space: nowrap;
    }
    .fullscreen-btn {
      font-size: 0.6rem;
      padding: 5px 7px;
      min-width: unset;
      white-space: nowrap;
    }
    .fullscreen-btn-icon { font-size: 0.9rem; }
    .avatar-name { display: none; }
  }

  .fav-sheet-close,
  .profile-back,
  .fav-remove {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-btn,
  .pay-btn,
  .fullscreen-btn {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-input,
  .profile-name-input {
    font-size: 16px !important;
  }

  .fav-sheet,
  .pay-modal,
  .profile-overlay,
  .modal-overlay {
    -webkit-overflow-scrolling: touch;
  }

  .fav-sheet {
    max-height: 80vh;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .fav-sheet::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: -4px auto 16px;
  }

  @media (max-width: 480px) {
    .pay-overlay {
      align-items: flex-end;
      padding: 0;
    }
    .pay-modal {
      border-radius: 22px 22px 0 0;
      max-width: 100%;
      max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px);
      transform: translateY(60px);
      padding-bottom: max(0px, env(safe-area-inset-bottom));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .pay-overlay.open .pay-modal { transform: translateY(0) scale(1); }
    .pay-modal-header::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
    }
    .pay-modal-header { position: relative; padding-top: 24px; }
  }

  @media (max-width: 480px) {
    .modal-overlay {
      align-items: flex-end;
      padding: 0;
    }
    .modal {
      border-radius: 20px 20px 0 0;
      max-width: 100%;
      padding: 28px 20px max(24px, calc(env(safe-area-inset-bottom) + 16px));
      transform: translateY(40px);
    }
    .modal-overlay.open .modal { transform: translateY(0); }
    .modal::before {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: -12px auto 20px;
    }
  }

  @media (max-width: 480px) {
    .user-dropdown {
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 20px 20px 0 0;
      min-width: unset;
      padding: 12px 12px max(16px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
      z-index: var(--z-dropdown);
    }
    .user-dropdown::before {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: -4px auto 12px;
    }
    .dropdown-close-btn {
      top: 16px; right: 12px;
      width: 32px; height: 32px;
    }
    .dropdown-item {
      padding: 14px 16px;
      font-size: 0.75rem;
      min-height: 52px;
    }
    .user-dropdown.open::after {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: -1;
      backdrop-filter: blur(2px);
    }
  }

  .category-btn:active {
    transform: scale(0.97);
    border-color: var(--c);
    background: rgba(255,255,255,0.03);
    transition: transform 0.08s ease, border-color 0.08s ease;
  }
  .category-btn:active .cat-arrow { color: var(--c); }

  .fav-item:active { border-color: var(--pink); transform: scale(0.99); }

  .profile-fav-item:active { border-color: var(--pink); }

  main {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px));
  }

  .profile-body {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
  }

  button { user-select: none; -webkit-user-select: none; }

  .fav-panel, .fav-sheet, .modal-overlay, .modal,
  .pay-overlay, .pay-modal, .profile-overlay {
    will-change: transform, opacity;
  }

  .social-btn,
  .form-submit,
  .pay-cta,
  .modal-tab,
  .dropdown-item,
  .pay-gw,
  .pay-pack,
  .avatar-option,
  .profile-edit-btn {
    min-height: 44px;
  }
  .pay-pack { min-height: 80px; }

  .pay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .pay-overlay.open { opacity: 1; pointer-events: all; }

  .pay-modal {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    width: 100%;
    max-width: 380px;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
  }
  .pay-overlay.open .pay-modal { transform: translateY(0) scale(1); }

  .pay-modal-header {
    padding: 14px 20px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
  }
  .pay-modal-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 700;
  }
  .pay-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--gold), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .pay-modal-close {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 9px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
  }
  .pay-modal-close:hover { color: var(--text); border-color: var(--muted); }

  .pay-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }

  .pay-free-gems-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 28px;
  }

  .pay-free-gems-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
  }

  /* This row's info button/popup reuse .smashdroppoints-info-button /
     .smashdroppoints-info-popup as-is (both position:absolute against
     the nearest position:relative ancestor, which this row now provides).
     The shared button's fixed top:10px (tuned for the profile box) does not
     vertically center it against this row's text, so it's overridden below. */
  .pay-free-gems-row .smashdroppoints-info-button {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  #payFreeGemsDivider {
    margin: 18px 0;
  }

  .pay-section-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .pay-packs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .pay-pack {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 8px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .pay-pack:hover { border-color: var(--gold); transform: translateY(-2px); }
  .pay-pack.selected { border-color: var(--gold); background: rgba(255,215,0,0.07); }
  .pay-pack.popular::after {
    content: 'POPULAR';
    position: absolute;
    top: 6px; right: -17px;
    background: var(--gold);
    color: #0e0e12;
    font-family: 'Space Mono', monospace;
    font-size: 0.38rem;
    font-weight: 700;
    padding: 2px 20px;
    transform: rotate(45deg);
    letter-spacing: 0.04em;
  }
  .pay-pack-emoji { font-size: 1.4rem; line-height: 1; }
  .pay-pack-emoji svg { width: 24px !important; height: 24px !important; }
  .pay-pack-amount { font-size: 0.56rem; font-weight: 600; color: var(--text); }
  .pay-pack-price  { font-family: 'Space Mono', monospace; font-size: 0.54rem; color: var(--gold); font-weight: 400; }
  .pay-pack-bonus  {
    font-family: 'Space Mono', monospace;
    font-size: 0.46rem;
    color: var(--accent2);
    background: rgba(120,255,214,0.12);
    border-radius: 4px;
    padding: 2px 5px;
    margin-top: 1px;
  }

  .pay-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .pay-method-btn {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 8px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color 0.18s, background 0.18s;
    min-height: 36px;
    height: 36px;
  }
  .pay-method-btn:hover { border-color: rgba(168,255,120,0.4); background: rgba(168,255,120,0.04); }
  .pay-method-btn.active { border-color: var(--accent); background: rgba(168,255,120,0.07); }
  .pay-method-btn--disabled { opacity: 0.38; cursor: not-allowed; }
  .pay-method-btn--disabled:hover { border-color: var(--border); background: var(--card); }
  .pay-method-btn--wide {
    grid-column: span 3;
    justify-content: center;
    padding: 0 14px;
  }
  .pay-method-btn--wide .pay-method-label {
    font-size: 0.62rem;
    text-align: center;
    white-space: normal;
  }
  .pay-method-icon {
    font-size: 0.95rem;
    line-height: 1;
    font-family: 'Space Mono', monospace;
    font-weight: 800;
    color: var(--text);
  }
  .pay-method-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
  }
  .pay-method-btn.active .pay-method-label { color: var(--accent); }

  .pay-element-container {
    display: none;
    flex-direction: column;
    gap: 12px;
  }
  .pay-element-container.show { display: flex; }
  .pay-element-back {
    background: none;
    border: none;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-align: left;
    letter-spacing: 0.05em;
  }
  .pay-element-back:hover { color: var(--accent); }
  .pay-element-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  #stripe-payment-element {
    min-height: 60px;
  }
  .pay-element-submit {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #ffd700, #ff9f4a);
    border: none;
    border-radius: 12px;
    color: #0e0e12;
    font-family: 'Syne', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 20px rgba(255,215,0,0.28);
  }
  .pay-element-submit:hover { opacity: 0.9; transform: translateY(-1px); }
  .pay-element-submit:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }

  .pay-gateways { display: flex; flex-direction: column; gap: 7px; }
  .pay-gw {\n    background: var(--card);\n    border: 1.5px solid var(--border);\n    border-radius: 10px;\n    padding: 9px 10px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: border-color 0.18s, background 0.18s;\n  }
  .pay-gw:hover   { border-color: rgba(168,255,120,0.4); background: rgba(168,255,120,0.04); }
  .pay-gw.active  { border-color: var(--accent); background: rgba(168,255,120,0.07); }

  .pay-gw-logo {
    width: 32px; height: 22px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: -0.5px;
  }
  .logo-xsolla  { background: #ff0050; color: #fff; }
  .logo-stripe  { background: #635bff; color: #fff; }
  .logo-paypal  { background: #003087; color: #fff; }
  .logo-apple   { background: #000; color: #fff; font-size: 1rem; }
  .logo-gpay    { background: #fff; color: #333; border: 1px solid #ddd; font-size: 0.46rem; }
  .logo-toss    { background: #0064ff; color: #fff; }

  .pay-gw-info  { flex: 1; min-width: 0; }
  .pay-gw-name  { font-size: 0.75rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pay-gw-desc  { font-family: 'Space Mono', monospace; font-size: 0.47rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .pay-gw-radio {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.5rem;
    transition: border-color 0.15s, background 0.15s;
  }
  .pay-gw.active .pay-gw-radio {
    border-color: var(--accent);
    background: var(--accent);
    color: #0e0e12;
  }

  .pay-summary {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .pay-summary-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Space Mono', monospace;
    font-size: 0.63rem;
    color: var(--muted);
  }
  .pay-summary-row.total {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 700;
  }
  .pay-val-gold { color: var(--gold); }

  .pay-cta {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd700, #ff9f4a);
    border: none;
    border-radius: 12px;
    color: #0e0e12;
    font-family: 'Syne', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255,215,0,0.28);
  }
  .pay-cta:hover   { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(255,215,0,0.38); }
  .pay-cta:active  { transform: scale(0.98); }
  .pay-cta.disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; box-shadow: none; }

  .pay-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 0.56rem;
    color: var(--muted);
    padding-bottom: 4px;
  }

  .pay-divider { height: 1px; background: var(--border); margin: 2px 0; }

  .pay-processing {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(22,22,30,0.88);
    backdrop-filter: blur(4px);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 22px;
  }
  .pay-processing.show { display: flex; }
  .pay-spinner {
    width: 42px; height: 42px;
    border: 3px solid rgba(255,215,0,0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  .pay-processing-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--gold);
    letter-spacing: 0.1em;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    padding-top: 60px;
    margin: 0;
  }

  body.scroll-locked {
    overflow: hidden;
    padding-right: var(--sg-scrollbar-width, 0px);
  }

  .logo {
    font-size: 1.4rem; font-weight: 800; letter-spacing: -1px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    display: flex; align-items: center; gap: 6px;
  }

  .back-btn {
    display: flex; align-items: center; flex-shrink: 0;
    background: rgba(255,255,255,.08);
    border: 1.5px solid var(--text);
    color: var(--text); padding: 5px 13px; border-radius: 6px;
    cursor: pointer; font-family: 'Syne', sans-serif; font-size: .82rem;
    transition: all .2s; margin-top: 5px;
    min-height: 44px;
  }
  .back-btn:hover { background: rgba(255,255,255,.15); color: var(--text); }
  .back-btn:active { transform: scale(.96); }

  #home { padding: 28px 16px; max-width: 700px; margin: 0 auto; }
  .home-title {
    font-size: 2.2rem; font-weight: 800; letter-spacing: -1.5px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .home-sub { color: var(--muted); font-size: .9rem; margin-bottom: 28px; font-family: 'Space Mono', monospace; }

  .game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
  .game-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 14px 18px;
    cursor: pointer;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .game-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    opacity: 0; transition: opacity .22s;
  }
  .game-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(168,255,120,.12); }
  .game-card:hover::before { opacity: .06; }
  .game-card:active { transform: scale(.97); }
  .game-emoji { font-size: 2.4rem; display: block; margin-bottom: 10px; position: relative; z-index: 1; }
  .game-name { font-size: .95rem; font-weight: 700; position: relative; z-index: 1; }
  .game-desc { font-size: .72rem; color: var(--muted); margin-top: 4px; position: relative; z-index: 1; }

  #game-area { display: block; padding: 0 0 max(20px, env(safe-area-inset-bottom)); max-width: 540px; margin: 0 auto; width: 100%; box-sizing: border-box; overflow-x: hidden; overscroll-behavior: contain; }
  .game-title-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
  }
  .game-title-bar h2 { font-size: 1.3rem; font-weight: 800; }

  .game-wrapper {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 540px;
    min-height: 420px;
    box-sizing: border-box;
  }

  /* These 6 forever-unlock games each show a 6-bullet how-to-play list in
     their start overlay — noticeably more content than the 420px default
     comfortably fits. .start-overlay is overflow: hidden — it never scrolls —
     Widening the board area here gives the real content room to lay out
     without scrolling, rather than trimming the copy further. */
  #game-sexy-dice-game, #game-spicy-game, #game-sexy-story-game,
  #game-sexyopoly-game, #game-truthopoly-game, #game-couples-test-game,
  #game-tugofwar {
    min-height: 560px;
  }

  /* Daily Horoscope, Saju and MBTI Test start overlays stack icon + title +
     how-to box + skin-link row + start/gem-unlock button row + gem-hint
     text — 2 bullets is fewer than the 6-bullet games above, but the extra
     skin-link and gem-hint rows those games don't have (plus the larger
     how-to-play type introduced with the 30% font-size increase) was still
     enough to trip the 420px default and trigger .start-overlay's
     overflow-y: auto scroll. A smaller bump than the 6-bullet group's 560px
     is enough to clear it without scrolling. */
  #game-daily-game, #game-saju-game, #game-mbti-game {
    min-height: 480px;
  }

  /* Dice Roller background skins (Category C — CSS-based, no canvas).
     Applied by toggling these classes on #game-dice-game from
     _diceApplySkin() in script-quickbets.js.
     Background rework: Mystic Runes is Set 1 (Bright) — cream/gold
     gradient, ornate border-image, vignette, faint 🎲 corner watermark.
     Gold Rush is Set 2 (Dark, kept) — existing purple-to-black gradient,
     plus a diagonal shine-sweep highlight pass and neon 🎲 corner. */
  #game-dice-game.skin-dice-1 {
    background: linear-gradient(180deg, #fff8e1 0%, #ffe9b3 100%);
    border: 3px solid transparent;
    border-image: linear-gradient(135deg, #ffd700, #92400e, #ffd700) 1;
    position: relative;
  }
  #game-dice-game.skin-dice-1::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 60%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
  }
  /* Mystic Runes is the only bright dice surface, but it never overrode text
     colour, so the app's light default text rendered white on cream and the
     roll total, turn label and log were effectively invisible. Scoped dark ink
     for every text surface this skin puts on the cream background. */
  #game-dice-game.skin-dice-1,
  #game-dice-game.skin-dice-1 .dice-total,
  #game-dice-game.skin-dice-1 #dice-turn-bar,
  #game-dice-game.skin-dice-1 #dice-log,
  #game-dice-game.skin-dice-1 #dice-log *,
  #game-dice-game.skin-dice-1 .wlist,
  #game-dice-game.skin-dice-1 .wlist * {
    color: #3b2600;
  }
  #game-dice-game.skin-dice-1 #dice-turn-label,
  #game-dice-game.skin-dice-1 .dice-total strong,
  #game-dice-game.skin-dice-1 #dice-sum {
    color: #8a5a00;
  }
  #game-dice-game.skin-dice-1 #dice-log-wrap {
    border-top-color: rgba(146, 64, 14, 0.35);
  }
  #game-dice-game.skin-dice-1 .fun-input {
    color: #3b2600;
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(146, 64, 14, 0.45);
  }

  #game-dice-game.skin-dice-2 {
    background: linear-gradient(180deg, #2a1a4a 0%, #0a0514 100%),
                radial-gradient(circle, rgba(180,140,255,0.05) 1px, transparent 1px);
    background-size: cover, 18px 18px;
    border: 2px solid #7c4fd9;
    box-shadow: 0 0 12px rgba(124,79,217,.5);
    position: relative;
    overflow: hidden;
  }
  #game-dice-game.skin-dice-2::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
  }
  #game-dice-game.skin-dice-2 .dice-shine-sweep {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(180,140,255,0.12) 50%, transparent 60%);
    animation: diceShineSweep 3.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes diceShineSweep {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }

  .start-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
    background: rgba(14,14,20,0.93);
    backdrop-filter: blur(6px);
    z-index: 20;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    /* Start overlays never scroll. The how-to block below is allowed to
       shrink instead, so a long list tightens rather than introducing a
       scrollbar the player has to fight on the way into a game. */
    overflow: hidden;
  }
  .start-overlay.hidden { display: none; }
  .start-overlay > * { flex-shrink: 0; }
  .start-overlay .so-howto { flex: 0 1 auto; min-height: 0; overflow: hidden; }

  /* Mobile-only compact layout for the 5 overlays confirmed to overflow on
     small viewports (icon + title + how-to + mode/timer row + start button +
     bet-score row + bet button = 7 stacked elements, more than most games'
     3-4). Not an issue on PC — only tightens spacing below 480px width. */
  @media (max-width: 480px) {
    #bball-overlay-start, #wam-controls, #fs-controls, #sj-overlay-start, #fw-controls {
      gap: 8px;
      padding: 16px 14px;
    }
    #bball-overlay-start .so-icon, #wam-controls .so-icon, #fs-controls .so-icon,
    #sj-overlay-start .so-icon, #fw-controls .so-icon {
      font-size: 1.7rem;
    }
    #bball-overlay-start .so-howto, #wam-controls .so-howto, #fs-controls .so-howto,
    #sj-overlay-start .so-howto, #fw-controls .so-howto {
      padding: 8px 12px;
    }
    #bball-overlay-start .opt-section, #wam-controls .opt-section,
    #fs-controls .opt-section, #sj-overlay-start .opt-section, #fw-controls .opt-section {
      margin: 0;
    }
  }

  .so-icon  { font-size: 2.2rem; line-height: 1; }
  .so-name  { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.3px; color: var(--accent); }
  .so-howto {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%; max-width: 320px;
    text-align: left;
    flex-shrink: 0;
  }
  .so-howto-label {
    font-family: 'Space Mono', monospace;
    font-size: .731rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .so-howto ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
  .so-howto li { font-size: .6rem; color: #ffffff; padding-left: 12px; position: relative; }
  .so-howto li::before { content: '·'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  .start-btn {
    padding: 14px 36px;
    background: transparent;
    border: 2.5px solid var(--accent);
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all .2s;
    box-shadow: 0 0 20px rgba(168,255,120,.2), inset 0 0 20px rgba(168,255,120,.05);
    touch-action: manipulation;
  }
  .start-btn:hover {
    background: rgba(168,255,120,.1);
    box-shadow: 0 0 32px rgba(168,255,120,.35), inset 0 0 20px rgba(168,255,120,.1);
    transform: scale(1.04);
  }
  .start-btn.locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .start-btn-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  /* Restyled to visually match .gu-content-unlock-btn (gold gradient pill,
     black text). Visual change only — disabled state and unlocked-label
     logic in script-shell.js are untouched. */
  .gem-unlock-btn {
    padding: 9px 18px;
    background: linear-gradient(135deg, #ffd700, #92400e);
    border: none;
    color: #000;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-align: center;
  }
  .gem-unlock-btn:hover {
    opacity: 0.85;
  }
  .gem-unlock-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
  }

  .stats-bar {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .stat { text-align: center; }
  .stat-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-family: 'Space Mono', monospace; }
  .stat-val { font-size: .78rem; font-weight: 700; font-family: 'Space Mono', monospace; color: var(--accent); }

  canvas { display: block; touch-action: none; }

  #connect5-board-wrap { width: 100%; }
  #connect5-canvas { width: 100%; height: auto; cursor: crosshair; touch-action: none; }
  .turn-info { padding: 8px 14px; font-size: .85rem; color: var(--muted); text-align: center; font-family: 'Space Mono', monospace; }

  #chess-wrap { position: relative; }
  #chess-canvas { width: 100%; height: 100%; cursor: pointer; touch-action: none; display: block; }

  #game-tetris-game { min-height: 500px; }
  #tetris-outer { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; width: 100%; margin: 0 auto; padding: 10px; gap: 10px; box-sizing: border-box; }
  #tetris-wrap { display: flex; gap: 0; padding: 0; justify-content: center; align-items: flex-start; flex-shrink: 0; position: relative; }
  #tetris-canvas { border: 1px solid var(--border); border-radius: 6px; max-width: 100%; display: block; }
  #tetris-side { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 130px; max-width: 160px; }
  @media (max-width: 600px) {
    #tetris-outer { flex-direction: row; align-items: flex-start; padding: 6px; gap: 6px; }
    #tetris-wrap { flex-shrink: 1; min-width: 0; }
    #tetris-canvas { width: 100%; height: auto; }
    #tetris-side { flex-direction: column; flex-wrap: nowrap; max-width: 110px; min-width: 90px; width: auto; flex-shrink: 0; gap: 8px; }
    #tetris-next { width: 100%; height: auto; }
    .tetris-mobile-btns { display: grid !important; width: 100%; }
    .tmb { padding: 10px 2px; font-size: 1.1rem; min-height: 40px; }
    .tmb.tmb-large { font-size: 1.8rem; min-height: 72px; padding: 10px 4px; }
  }
  #tetris-stats-box { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
  #tetris-stats-box .stat { display: flex; flex-direction: column; align-items: center; }
  .next-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-family: 'Space Mono', monospace; }
  #tetris-next { border: 1px solid var(--border); border-radius: 6px; }

  .mode-picker {
    display: flex; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid var(--border); width: 100%;
  }
  .mode-btn {
    flex: 1; padding: 7px 10px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); border-radius: 7px;
    font-family: 'Space Mono', monospace; font-size: .72rem;
    cursor: pointer; transition: all .18s; text-align: center;
    touch-action: manipulation;
  }
  .mode-btn.active {
    border-color: var(--accent); color: var(--accent);
    background: rgba(168,255,120,.07);
  }

  .msg-overlay {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
    background: rgba(14,14,18,.75);
    backdrop-filter: blur(4px);
    z-index: 25; border-radius: 16px; text-align: center;
  }
  .msg-overlay.show { display: flex; }
  .msg-title { font-size: 1.6rem; font-weight: 800; }
  .msg-sub { color: var(--muted); font-size: .9rem; font-family: 'Space Mono', monospace; }
  .msg-btn {
    padding: 12px 30px; background: transparent;
    border: 2px solid var(--accent); color: var(--accent);
    font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700;
    border-radius: 8px; cursor: pointer; transition: all .2s;
    box-shadow: 0 0 16px rgba(168,255,120,.2);
  }
  .msg-btn:hover { background: rgba(168,255,120,.1); }
  .fun-panel {
    padding: 14px 14px 20px;
    width: 100%;
  }
  .fun-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap;
  }
  .fun-label {
    font-size: .72rem; color: var(--muted); min-width: 64px;
    font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .5px;
  }
  .fun-input {
    flex: 1; min-width: 0;
    padding: 8px 11px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: max(16px, 1em);
  }
  .fun-input:focus { outline: none; border-color: var(--accent); }
  .fun-input[type="number"] { max-width: 80px; flex: 0 0 auto; }
  #finger-hint { font-size:.8rem; color:var(--muted); text-align:center; pointer-events:none; padding:0 1rem; }
  #finger-res { text-align:center; margin-top:.8rem; font-size:1rem; font-weight:700; min-height:1.4rem; color:var(--accent); font-family:'Space Mono',monospace; }

  .name-card {
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:1.4rem 1.2rem; text-align:center; margin-top:1rem;
  }
  .name-card .g-theme {
    display:inline-block; background:var(--bg); border:1px solid var(--border);
    border-radius:5px; font-size:.68rem; font-family:'Space Mono',monospace;
    padding:2px 8px; margin-bottom:.7rem; color:var(--muted);
  }
  .name-card .g-name { font-size:1.7rem; font-weight:800; letter-spacing:-.5px; margin-bottom:.4rem; color:var(--text); }
  .name-card .g-mean { font-size:.82rem; color:var(--muted); line-height:1.6; }

  .wlist { display:flex; flex-direction:column; gap:.3rem; max-height:180px; overflow-y:auto; margin:.5rem 0; }
  .wentry {
    display:flex; align-items:center; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; padding:.45rem .75rem; font-size:.85rem;
  }
  .wentry .wdel { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; margin-left:auto; line-height:1; padding:.2rem .4rem; transition:color .1s; }
  .wentry .wdel:hover { color:var(--danger); }
  .wpodium {
    text-align:center; padding:1.6rem 1rem; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; margin-top:1rem; display:none;
  }
  .wpodium .wtrophy { font-size:2.4rem; margin-bottom:.5rem; }
  .wpodium .wname { font-size:1.5rem; font-weight:800; color:var(--accent); word-break:break-word; font-family:'Space Mono',monospace; }
  .wpodium .wsub { font-size:.72rem; color:var(--muted); margin-top:.4rem; font-family:'Space Mono',monospace; }

  .wpodium.win-picking {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(168,255,120,0.15);
  }
  .wpodium.win-picking .wtrophy { font-size: 0 !important; }
  .win-wheel-anim {
    display: none;
    width: 72px; height: 72px;
    margin: 0 auto 8px;
    position: relative;
  }
  .win-picking .win-wheel-anim { display: block; }
  .win-wheel-ring {
    width: 72px; height: 72px;
    border: 5px solid var(--border);
    border-radius: 50%;
    position: absolute; top: 0; left: 0;
  }
  .win-ball {
    width: 14px; height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
  }
  .win-ball-1 { background:#ff6b6b; animation: winBallOrbit1 0.85s linear infinite; }
  .win-ball-2 { background:#ffd700; animation: winBallOrbit2 0.85s linear infinite; }
  .win-ball-3 { background:#78ffd6; animation: winBallOrbit3 0.85s linear infinite; }
  .win-ball-4 { background:#b478ff; animation: winBallOrbit4 0.85s linear infinite; }
  @keyframes winBallOrbit1 {
    0%   { transform: translate(-7px,-7px) rotate(0deg)   translateX(26px); }
    100% { transform: translate(-7px,-7px) rotate(360deg) translateX(26px); }
  }
  @keyframes winBallOrbit2 {
    0%   { transform: translate(-7px,-7px) rotate(90deg)  translateX(26px); }
    100% { transform: translate(-7px,-7px) rotate(450deg) translateX(26px); }
  }
  @keyframes winBallOrbit3 {
    0%   { transform: translate(-7px,-7px) rotate(180deg) translateX(26px); }
    100% { transform: translate(-7px,-7px) rotate(540deg) translateX(26px); }
  }
  @keyframes winBallOrbit4 {
    0%   { transform: translate(-7px,-7px) rotate(270deg) translateX(26px); }
    100% { transform: translate(-7px,-7px) rotate(630deg) translateX(26px); }
  }
  .win-wheel-center {
    width: 12px; height: 12px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 8px var(--accent);
  }
  .win-shuffle-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--muted);
    font-family: 'Space Mono', monospace;
    min-height: 1.8rem;
    transition: color 0.08s;
    word-break: break-word;
  }
  @keyframes winReveal {
    0%   { transform: scale(0.7); opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1);   opacity: 1; }
  }
  .wpodium.win-revealed .wname { animation: winReveal 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  .wpodium.win-revealed { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,0,0.2); }

  .dice-grid { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1rem 0; }
  .die {
    width:68px; height:68px; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:2rem; transition:border-color .2s;
  }
  .die.rolling { animation:droll 3s cubic-bezier(.25,.1,.25,1) forwards; border-color:var(--accent); }
  @keyframes droll {
    0%  {transform:rotate(0deg)   scale(1)}
    18% {transform:rotate(180deg) scale(1.1)}
    42% {transform:rotate(540deg) scale(1.08)}
    68% {transform:rotate(900deg) scale(1.05)}
    100%{transform:rotate(1080deg) scale(1)}
  }
  .dice-total { text-align:center; font-size:.85rem; color:var(--muted); margin-bottom:.5rem; display:none; font-family:'Space Mono',monospace; }
  .dice-total strong { color:var(--accent); font-size:1.1rem; }

  #ft-ladder-canvas { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--border); background:var(--bg); touch-action:pan-y; }
  .ft-lad-result {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:.8rem 1rem; margin-top:.8rem; font-size:.85rem; display:none;
  }
  .ft-res-row { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--border); font-family:'Space Mono',monospace; font-size:.78rem; }
  .ft-res-row:last-child { border-bottom:none; }
  .ft-res-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

  .race-avatar-slot {
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .race-avatar-slot label {
    font-size:.6rem; color:var(--muted); font-family:'Space Mono',monospace;
    text-transform:uppercase; letter-spacing:.5px;
  }
  .race-avatar-img {
    width:56px; height:56px; border-radius:50%; border:2px solid var(--border);
    object-fit:cover; background:var(--surface); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1.8rem;
    transition:border-color .2s;
  }
  .race-avatar-img:hover { border-color:var(--accent); }
  .race-avatar-file { display:none; }
  .race-avatar-click-hint {
    display:flex; align-items:center; height:56px;
    font-size:.78rem; color:var(--muted); font-family:'Space Mono',monospace;
    white-space:nowrap;
  }


  .lad-draw-next-btn {
    width: 100%; padding: 13px; background: transparent;
    border: 2.5px solid var(--accent); color: var(--accent);
    border-radius: 10px; font-family: 'Syne',sans-serif; font-weight: 700;
    font-size: .78rem; cursor: pointer; transition: all .15s;
    letter-spacing: .5px; white-space: normal; word-break: break-word; line-height: 1.3;
  }
  .lad-draw-next-btn:hover { background: rgba(168,255,120,.1); transform: scale(1.02); }

  .lad-present-row {
    display: flex; align-items: flex-start; gap: 8px;
    flex-wrap: wrap;
    padding: .35rem 0; border-bottom: 1px solid var(--border);
    font-family: 'Space Mono', monospace; font-size: .8rem;
  }
  .lad-present-row:last-child { border-bottom: none; }
  .lad-present-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .lad-result-text {
    color: var(--accent); font-weight: 700; opacity: 1;
    font-size: .85rem;
    overflow-wrap: break-word; word-break: break-word; min-width: 0;
  }

  @media (max-width: 600px) {
    header { padding: 10px 14px; }
    .logo { font-size: 1.1rem; }
    #home { padding: 16px 12px; }
    .home-title { font-size: 1.6rem; }
    .game-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .game-card { padding: 16px 10px 14px; border-radius: 12px; }
    .game-emoji { font-size: 2rem; }
    .game-name { font-size: .88rem; }
    #game-area { padding: 0 8px; }
    .fun-panel { padding: 10px 10px 16px; }
    .fun-row { gap: 6px; }
    .fun-label { min-width: 50px; font-size: .68rem; }
    .fun-btn { padding: 7px 12px; font-size: .68rem; }
    .stats-bar { gap: 10px; padding: 8px 10px; }
    .stat-val { font-size: .7rem; }
    .race-track-inner { height: 62px; }
    .race-animal { top: 3px; }
    #finger-zone { height: 240px; }
    .fdot { width: 70px; height: 70px; font-size: .82rem; }
  }

  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.3; transform:scale(1.2); }
  }

  .chk-sq { display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative; }
  .chk-sq.light { background:#f0d9b5; }
  .chk-sq.dark  { background:#b58863; }
  .chk-piece { width:80%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;user-select:none;position:relative;z-index:2;transition:transform .1s; }
  .chk-piece.red  { background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0392b);border:2px solid #922b21;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3); }
  .chk-piece.black{ background:radial-gradient(circle at 35% 35%,#666,#111);border:2px solid #000;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3); }
  @keyframes cardFlipIn {
    0%   { transform: rotateY(-90deg) scale(0.85); opacity:0; }
    60%  { transform: rotateY(8deg) scale(1.04); opacity:1; }
    100% { transform: rotateY(0deg) scale(1); opacity:1; }
  }
  @keyframes cardFadeOut {
    0%   { opacity:1; transform:scale(1) translateY(0); }
    70%  { opacity:.5; transform:scale(0.95) translateY(-4px); }
    100% { opacity:0; transform:scale(0.88) translateY(-10px); }
  }

  @media(max-width:600px){
    .pt-question{font-size:.68rem}
    .pt-likert-btn{font-size:.56rem;padding:5px 2px}
    .ms-cell{width:28px;height:28px;font-size:.7rem}
  }
  @media(max-width:480px){
    .dpad-btn{min-height:70px;min-width:70px;font-size:1.8rem}
    .sdk-num{min-width:0;min-height:44px;width:0;flex:1 1 0;font-size:.75rem;padding:0;box-sizing:border-box;letter-spacing:0}
    .ms-cell{width:26px;height:26px;font-size:.68rem}
    .btn-label-text { display: none; }
    .user-avatar-btn { padding: 5px; }
  }


  body > header,
  body > header:first-of-type {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 200;
    width: 100%;
    background: var(--surface, #22222e) !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
    padding: 10px 16px !important;
    box-sizing: border-box;
    margin: 0 !important;
  }
  body:has(#game-play-view.visible) { padding-top: 0 !important; }

  #landing-view { display: block; }
  #landing-view.hidden { display: none !important; }

  #category-view { display: none; }
  #category-view.visible { display: flex !important; flex-direction: column; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }

  .cat-view-bar {
    position: sticky;
    top: 60px;
    z-index: 600;
    background: var(--bg, #1a1a22);
    border-bottom: 2px solid var(--border, rgba(255,255,255,.12));
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    min-height: 56px;
  }
  /* FIX (audit §back-button-misaligned-pc): the bar itself spans full
     width (needed for its background/border to reach the browser edge),
     but its content — the back button, icon, and title — is now
     constrained to the same max-width:540px centered column as
     .games-grid below it, so the Back button lines up with the left edge
     of the game tiles instead of the true browser window edge on wide
     (PC/desktop) viewports where the grid doesn't span full width. */
  .cat-view-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 11px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  @media (max-width: 480px) { .cat-view-bar { top: 60px; } }

  .cat-view-back {
    flex-shrink: 0;
    background: var(--card, #22222e);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text, #e8e8f0);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    transition: border-color .2s, color .2s, background .2s;
    min-height: 40px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .cat-view-back:hover  { border-color: var(--accent, #a8ff78); color: var(--accent, #a8ff78); background: rgba(168,255,120,0.08); }
  .cat-view-back:active { transform: scale(.96); }

  .cat-view-icon  { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
  /* margin:0 neutralises a browser's default <h1> block margins: #cv-title is
     an <h1> (for a crawlable category heading) sitting as a flex item in the
     category bar, and the default heading margin would otherwise offset it.
     Harmless for any non-heading element that carries this class. */
  .cat-view-title { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.3px; flex: 1; margin: 0; }

  #category-view[data-cat="Quick Category"] .cat-view-title { color: #f5c842; }
  #category-view[data-cat="Drinking Category"]  .cat-view-title { color: #a8ff78; }
  #category-view[data-cat="X-Rated Category"]    .cat-view-title { color: #ff6b6b; }
  #category-view[data-cat="Solo Category"]      .cat-view-title { color: #c084fc; }
  #category-view[data-cat="Couples Category"]     .cat-view-title { color: #f472b6; }

  .games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  @media (max-width: 420px) {
    .games-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
  }

  .cat-featured-wrap {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 16px 16px 0;
    box-sizing: border-box;
  }
  .cat-featured-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .cat-featured-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,215,0,0.35), transparent);
  }
  .cat-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
  }
  @media (max-width: 420px) {
    .cat-featured-grid { gap: 8px; }
  }
  .cat-section-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0;
    padding: 4px 16px 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .cat-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(102,102,128,0.35), transparent);
  }
  .mgc.featured {
    border-color: rgba(255,215,0,0.3);
    background: linear-gradient(135deg, rgba(255,215,0,0.05) 0%, var(--card) 60%);
    position: relative;
  }
  .mgc.featured:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 24px rgba(255,215,0,0.15);
  }

  .mgc {
    touch-action: manipulation;
    background: var(--card, #22222e);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 18px 12px 14px;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mgc::before {
    border-radius: 14px;
    overflow: hidden;
  }
  .mgc:hover  { transform: translateY(-3px); border-color: #a8ff78; box-shadow: 0 8px 24px rgba(168,255,120,.12); }
  .mgc:active { transform: scale(.96); }
  .mgc.xrated:hover { border-color: #ff6b6b; box-shadow: 0 8px 24px rgba(255,107,107,.15); }
  .mgc.drink:hover  { border-color: #a8ff78; }
  .mgc.love:hover   { border-color: #f472b6; box-shadow: 0 8px 24px rgba(244,114,182,.15); }

  .mgc-emoji { font-size: 2rem; display: block; position: relative; z-index: 1; flex-shrink: 0; }
  .mgc-name  { font-size: 0.76rem; font-weight: 700; position: relative; z-index: 1; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; white-space: normal; width: 100%; }

  .mgc[data-gid="Ladder Game"] .mgc-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
  }
  #game-area-title-inline.ladder-title-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #game-area-title-inline.ladder-title-active::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.4em;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none'%3E%3Crect x='4' y='1' width='4' height='38' rx='2' fill='%23a8ff78'/%3E%3Crect x='24' y='1' width='4' height='38' rx='2' fill='%23a8ff78'/%3E%3Crect x='4' y='7' width='24' height='3.5' rx='1.5' fill='%2378ffd6'/%3E%3Crect x='4' y='15' width='24' height='3.5' rx='1.5' fill='%2378ffd6'/%3E%3Crect x='4' y='23' width='24' height='3.5' rx='1.5' fill='%2378ffd6'/%3E%3Crect x='4' y='31' width='24' height='3.5' rx='1.5' fill='%2378ffd6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
  }
  .mgc-heart {
    position: absolute; top: -6px; right: -6px;
    background: rgba(30,30,40,0.82);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; cursor: pointer; z-index: 10;
    padding: 0; line-height: 1;
    transition: transform .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mgc-heart:hover  { transform: scale(1.35); border-color: rgba(255,120,196,0.45); }
  .mgc-heart:active { transform: scale(1.55); }

  .mgc-share {
    position: absolute; top: -6px; left: -6px;
    background: rgba(30,30,40,0.82);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 50%;
    cursor: pointer; z-index: 10;
    padding: 0;
    width: 24px; height: 24px;
    transition: transform .12s, filter .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
  }
  .mgc-share:hover  { transform: scale(1.15); filter: brightness(1.2); border-color: rgba(120,255,214,0.45); }
  .mgc-share:active { transform: scale(0.92); }
  .mgc-share-icon {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; pointer-events: none;
  }
  .mgc-share-icon svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .15s;
  }
  .mgc-share:hover .mgc-share-icon svg { stroke: var(--accent2); }

  /* Share moved off the game tiles and into the in-game header, sitting to
     the right of the emoji + game title and vertically centred against the
     title text. The row is inline-flex so it hugs the title instead of
     stretching, which keeps the button beside the text rather than pinned
     to the far edge on wide screens. */
  .game-title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
  }
  .game-title-row .game-title-inline { min-width: 0; }
  .game-header-share {
    background: rgba(30,30,40,0.82);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    width: 26px; height: 26px;
    flex-shrink: 0;
    align-self: center;
    transition: transform .12s, filter .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
  }
  .game-header-share:hover  { transform: scale(1.15); filter: brightness(1.2); border-color: rgba(120,255,214,0.45); }
  .game-header-share:active { transform: scale(0.92); }
  .game-header-share-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; pointer-events: none;
  }
  .game-header-share-icon svg {
    width: 15px; height: 15px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .15s;
  }
  .game-header-share:hover .game-header-share-icon svg { stroke: var(--accent2); }

  .share-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(5px);
    z-index: 2147483647 !important;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .share-overlay.open { opacity: 1; pointer-events: all; }

  .share-sheet {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 22px 22px 0 0;
    padding: 24px 20px max(24px, calc(env(safe-area-inset-bottom) + 16px));
    width: 100%;
    max-width: 480px;
    transform: translateY(40px);
    transition: transform 0.25s ease;
    position: relative;
  }
  .share-overlay.open .share-sheet { transform: translateY(0); }

  .share-sheet::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: -8px auto 18px;
  }

  .share-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .share-game-info {
    display: flex; align-items: center; gap: 10px;
  }
  .share-game-emoji {
    font-size: 1.8rem;
    width: 44px; height: 44px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .share-game-title {
    font-size: 1rem; font-weight: 800; letter-spacing: -0.3px;
    line-height: 1.2;
  }
  .share-game-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    color: var(--muted);
    margin-top: 2px;
  }
  .share-close {
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: 8px; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted); font-size: 1rem;
    transition: color .15s, border-color .15s;
    flex-shrink: 0;
  }
  .share-close:hover { color: var(--danger); border-color: var(--danger); }

  .share-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 16px 0 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .share-label::before {
    content: ''; display: inline-block;
    width: 3px; height: 12px;
    background: var(--accent2); border-radius: 2px;
  }

  .share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .share-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .15s, border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .share-btn:hover { transform: translateY(-2px); }
  .share-btn:active { transform: scale(0.95); }

  .share-btn-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  .share-btn-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    color: var(--muted);
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.3;
  }

  .share-btn.sms:hover    { border-color: #4fc3f7; background: rgba(79,195,247,0.07); }
  .share-btn.sms .share-btn-icon    { background: rgba(79,195,247,0.12); }
  .share-btn.email:hover  { border-color: #a8ff78; background: rgba(168,255,120,0.07); }
  .share-btn.email .share-btn-icon  { background: rgba(168,255,120,0.12); }
  .share-btn.kakao:hover  { border-color: #ffd700; background: rgba(255,215,0,0.07); }
  .share-btn.kakao .share-btn-icon  { background: rgba(255,215,0,0.12); }
  .share-btn.whatsapp:hover { border-color: #25D366; background: rgba(37,211,102,0.07); }
  .share-btn.whatsapp .share-btn-icon { background: rgba(37,211,102,0.12); }
  .share-btn.line:hover   { border-color: #00B900; background: rgba(0,185,0,0.07); }
  .share-btn.line .share-btn-icon   { background: rgba(0,185,0,0.12); }
  .share-btn.facebook:hover { border-color: #1877F2; background: rgba(24,119,242,0.07); }
  .share-btn.facebook .share-btn-icon { background: rgba(24,119,242,0.12); }
  .share-btn.instagram:hover { border-color: #E1306C; background: rgba(225,48,108,0.07); }
  .share-btn.instagram .share-btn-icon { background: rgba(225,48,108,0.12); }
  .share-btn.tiktok:hover { border-color: #ff0050; background: rgba(255,0,80,0.07); }
  .share-btn.tiktok .share-btn-icon { background: rgba(255,0,80,0.12); }

  .share-copy-row {
    display: flex; gap: 8px; align-items: center;
  }
  .share-link-box {
    flex: 1; padding: 10px 12px;
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default;
  }
  .share-copy-btn {
    padding: 10px 14px;
    background: rgba(120,255,214,0.08);
    border: 1.5px solid rgba(120,255,214,0.3);
    border-radius: 10px;
    cursor: pointer;
    color: var(--accent2);
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    transition: background .2s, border-color .2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .share-copy-btn:hover { background: rgba(120,255,214,0.16); border-color: var(--accent2); }
  .share-copy-btn.copied { color: #0a0a0f; background: var(--accent2); border-color: var(--accent2); transform: scale(1.04); transition: all .15s; }

  #game-play-view         { display: none; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  #game-play-view.visible { display: block; }


  #game-truthopoly-game {
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  #game-area-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 90;
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 10px;
    background: var(--bg, #1a1a22);
    border-bottom: 2px solid var(--border, rgba(255,255,255,.12));
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }

  .game-header-row1 {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .game-title-inline {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.75rem, 3.5vw, 1.2rem);
    font-weight: 700;
    color: var(--text, #e8e8f0);
    opacity: 0.85;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .fav-empty {
    text-align: center; padding: 36px 16px;
    color: var(--muted, #888);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem; line-height: 1.9;
  }
  .fav-empty-icon { font-size: 2.4rem; margin-bottom: 10px; display: block; }
  .fav-item-sub   { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted, #888); }


  .dice-grid-love { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
  .sdice { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:12px 8px; text-align:center; transition:border-color .3s; }
  .sdice.rolling { border-color:var(--pink); animation:sdice-shake 0.18s ease-in-out infinite; }
  @keyframes sdice-shake { 0%{transform:rotate(0) scale(1)} 20%{transform:rotate(-12deg) scale(1.08)} 50%{transform:rotate(10deg) scale(0.95)} 80%{transform:rotate(-6deg) scale(1.04)} 100%{transform:rotate(0) scale(1)} }
  .sdice-emoji { font-size:2rem; margin-bottom:4px; }
  .sdice-label { font-size:.62rem; font-family:'Space Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
  .sdice-val { font-size:.75rem; font-weight:700; color:var(--text); min-height:1.5em; }
  .fun-btn.pink-primary { background:linear-gradient(135deg,#c2185b,#7a1a35); border-color:transparent; color:#fff; }
  .fun-btn.pink-primary:hover { opacity:.9; }
  .fun-btn.pink-primary.active { background:linear-gradient(135deg,#c2185b,#7a1a35); border-color:var(--pink); }

  #game-spicy-game .mode-picker { display:flex; gap:6px; padding:8px 14px; border-bottom:1px solid var(--border); width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #game-spicy-game .mode-btn { flex-shrink:0; padding:6px 12px; border-radius:20px; border:1.5px solid var(--border); background:none; color:var(--muted); font-family:'Space Mono',monospace; font-size:.62rem; cursor:pointer; transition:all .15s; white-space:nowrap; }
  #game-spicy-game .mode-btn.active { border-color:var(--pink); color:var(--pink); background:rgba(255,120,196,.08); }
  .cat-tabs { display:flex; gap:6px; padding:8px 14px; border-bottom:1px solid var(--border); }
  .cat-tab { flex:1; padding:7px 6px; border-radius:20px; border:1.5px solid var(--border); background:none; color:var(--muted); font-family:'Space Mono',monospace; font-size:.62rem; cursor:pointer; transition:all .15s; text-align:center; touch-action:manipulation; }
  .cat-tab.active { border-color:var(--pink); color:var(--pink); background:rgba(255,120,196,.08); }
  .qcard { background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:20px 16px; margin-bottom:10px; text-align:center; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
  .qcard.reveal { animation:qReveal .3s ease; }
  @keyframes qReveal { from{opacity:0;transform:scale(.95) translateY(6px)} to{opacity:1;transform:scale(1) translateY(0)} }
  .qcard-cat { font-size:.7rem; font-family:'Space Mono',monospace; color:var(--pink); text-transform:uppercase; letter-spacing:.08em; }
  .qcard-text { font-size:.82rem; font-weight:700; color:var(--text); line-height:1.5; }
  .qcard-hint { font-size:.72rem; color:var(--muted); font-family:'Space Mono',monospace; font-style:italic; }
  .player-tags { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; }
  .player-tag { display:flex; align-items:center; gap:4px; padding:4px 10px; background:var(--surface); border:1px solid var(--border); border-radius:20px; font-size:.75rem; font-family:'Space Mono',monospace; color:var(--muted); }
  .ptdel { cursor:pointer; color:var(--danger); margin-left:2px; font-size:.85rem; }
  .timer-circle { width:70px; height:70px; border-radius:50%; border:3px solid var(--pink); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; transition:border-color .5s; }
  .timer-circle.urgent { border-color:var(--danger); animation:timerPulse .5s ease-in-out infinite; }
  @keyframes timerPulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.08)} }
  #s5s-timer { font-size:2rem; font-weight:800; font-family:'Space Mono',monospace; color:var(--text); }
  .timer-label { font-size:.6rem; font-family:'Space Mono',monospace; color:var(--muted); text-align:center; }

  .story-cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
  .story-cat-btn { background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:12px 10px; text-align:center; cursor:pointer; transition:all .15s; }
  .story-cat-btn:hover { border-color:rgba(232,69,106,.5); }
  .story-cat-btn.active { border-color:#e8456a; background:rgba(232,69,106,.1); }
  .story-cat-btn .cat-icon-s { font-size:1.3rem; display:block; margin-bottom:3px; }
  .story-cat-btn .cat-name-s { font-size:.75rem; font-weight:500; color:#f472b6; }
  .sexy-story-display { background:linear-gradient(135deg,rgba(232,69,106,.08),rgba(122,26,53,.08)); border:1px solid rgba(232,69,106,.15); border-radius:10px; padding:12px 14px; font-size:.82rem; line-height:1.75; color:var(--text); margin-bottom:10px; min-height:80px; max-height:340px; overflow-y:auto; scroll-behavior:smooth; }
  .new-bit { background:rgba(232,69,106,.18); border-radius:4px; padding:1px 3px; }
  .c-btn { width:100%; padding:12px; border-radius:10px; font-family:'Syne',sans-serif; font-weight:700; font-size:.78rem; cursor:pointer; transition:all .18s; border:1.5px solid var(--border); background:var(--surface); color:var(--text); margin-bottom:6px; }
  .c-btn-outline { background:transparent; border-color:var(--pink); color:var(--pink); }
  .c-btn-secondary { background:var(--card); color:var(--muted); }
  .c-input { width:100%; background:var(--card); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-family:'Syne',sans-serif; font-size:max(16px,1em); outline:none; transition:border-color .2s; }
  .c-input:focus { border-color:rgba(232,69,106,.5); }
  .c-input-label { display:block; font-size:.65rem; font-family:'Space Mono',monospace; color:#f07a90; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
  .couples-wrap { padding:14px; width:100%; }
  #game-sexyopoly-game { --spicy-color:#ff3d6b; --chance-color:#be185d; --jail-color:#7c3aed; --free-color:#ec4899; --accent3:#ff78c4; }
  #game-sexyopoly-game { font-family:'Syne',sans-serif; color:#fff; background:linear-gradient(135deg,#0a0005 0%,#1a000d 100%); padding-bottom:16px; }
  #game-sexyopoly-game .start-overlay { position:absolute; inset:0; background:rgba(10,0,5,.97); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; z-index:10; padding:20px 16px 24px; gap:12px; overflow:hidden; border-radius:12px; }
  #game-sexyopoly-game .start-overlay.hidden { display:none !important; }
  /* No-scroll start overlay: the overlay itself never scrolls, so the
     START button is always visible. Every element is pinned; only the
     how-to reference card absorbs any overflow via its own bounded scroll. */
  #game-sexyopoly-game .start-overlay > * { flex-shrink: 0; }
  #game-sexyopoly-game .start-overlay .so-howto { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  #game-sexyopoly-game .so-icon { font-size:3rem; }
  #game-sexyopoly-game .so-name { font-size:1.5rem; font-weight:800; letter-spacing:.05em; background:linear-gradient(135deg,#e91e8c,#ff3d6b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  #game-sexyopoly-game .so-howto { background:rgba(255,255,255,.04); border:1px solid rgba(233,30,140,.2); border-radius:12px; padding:14px 16px; width:100%; max-width:320px; text-align:left; }
  #game-sexyopoly-game .so-howto-label { font-family:'Space Mono',monospace; font-size:.761rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:10px; }
  #game-sexyopoly-game .so-howto ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
  #game-sexyopoly-game .so-howto li { font-size:.62rem; color:rgba(255,255,255,.7); padding-left:14px; position:relative; }
  #game-sexyopoly-game .so-howto li::before { content:'·'; position:absolute; left:0; color:#e91e8c; font-weight:700; }
  .so-setup-panel { width:100%; max-width:320px; }
  .so-setup-panel h2 { font-size:.85rem; margin-bottom:8px; color:rgba(255,255,255,.6); font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.1em; }
  .so-setup-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:.82rem; color:rgba(255,255,255,.7); }
  .so-setup-row input[type=number] { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:6px; color:#fff; font-size:max(16px,1em); padding:4px 8px; width:50px; }
  .so-start-btn { padding:14px 36px; background:transparent; border:2.5px solid #e91e8c; color:#e91e8c; font-family:'Space Mono',monospace; font-size:.82rem; font-weight:700; border-radius:10px; cursor:pointer; letter-spacing:1px; transition:all .2s; box-shadow:0 0 20px rgba(233,30,140,.2),inset 0 0 20px rgba(233,30,140,.05); width:100%; max-width:320px; }
  .so-start-btn:hover { background:rgba(233,30,140,.15); box-shadow:0 0 28px rgba(233,30,140,.4); }
  #game-sexyopoly-game .game-area { padding:0 8px 8px; }
  #game-sexyopoly-game .board-wrapper { position:relative; width:100%; max-width:420px; aspect-ratio:1; }
  #game-sexyopoly-game .board { display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(10,1fr); width:100%; height:100%; border:2px solid rgba(233,30,140,.4); border-radius:4px; overflow:hidden; }
  #game-sexyopoly-game .cell { border:1px solid rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; text-align:center; padding:2px 1px; position:relative; cursor:default; overflow:hidden; transition:background .15s; }
  #game-sexyopoly-game .cell .cell-icon { font-size:13px; line-height:1; margin-bottom:1px; }
  #game-sexyopoly-game .cell .cell-name { font-size:7px; line-height:1.1; color:rgba(255,255,255,.5); word-break:break-word; }
  #game-sexyopoly-game .cell .cell-label { font-size:6px; margin-top:1px; padding:1px 3px; border-radius:3px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; display:none; }
  #game-sexyopoly-game .cell.type-start { background:rgba(233,30,140,.15); }
  #game-sexyopoly-game .cell.type-jail { background:rgba(124,58,237,.2); }
  #game-sexyopoly-game .cell.type-free { background:rgba(236,72,153,.15); }
  #game-sexyopoly-game .cell.type-chance { background:rgba(190,24,93,.2); }
  #game-sexyopoly-game .cell.type-action { background:rgba(233,30,140,.2); }
  #game-sexyopoly-game .cell.type-spicy { background:rgba(255,61,107,.25); }
  #game-sexyopoly-game .cell.type-travel { background:rgba(190,24,93,.15); }
  #game-sexyopoly-game .cell.type-city { background:rgba(255,255,255,.02); }
  #game-sexyopoly-game .cell.type-empty { background:transparent; }
  #game-sexyopoly-game .cell .color-bar { position:absolute; top:0; left:0; right:0; height:4px; }
  #game-sexyopoly-game .center-title { font-size:16px; font-weight:800; color:#fff; text-align:center; letter-spacing:1px; line-height:1.3; text-shadow:0 0 12px rgba(233,30,140,.8); }
  #game-sexyopoly-game .center-title small { display:block; font-size:10px; font-weight:400; color:rgba(255,255,255,.5); letter-spacing:.5px; margin-top:2px; }
  #game-sexyopoly-game .start-btn { border:2px solid var(--accent3); border-radius:50%; width:88px; height:88px; background:rgba(233,30,140,.12); color:var(--accent3); font-size:13px; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:all .2s; text-transform:uppercase; letter-spacing:1px; box-shadow:0 0 16px rgba(233,30,140,.3),inset 0 0 12px rgba(233,30,140,.06); animation:pulse-pink 2.5s ease-in-out infinite; }
  #game-sexyopoly-game .start-btn:hover { background:rgba(233,30,140,.28); transform:scale(1.06); }
  @keyframes pulse-pink { 0%,100%{box-shadow:0 0 16px rgba(233,30,140,.3),inset 0 0 12px rgba(233,30,140,.06)}50%{box-shadow:0 0 28px rgba(233,30,140,.55),inset 0 0 16px rgba(233,30,140,.1)} }
  @keyframes pulse { from { opacity: .4; transform: scale(.85); } to { opacity: 1; transform: scale(1.15); } }
  #game-sexyopoly-game .turn-info { text-align:center; font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; }
  #game-sexyopoly-game .turn-info .current-player { font-size:18px; font-weight:700; color:#fff; }
  #game-sexyopoly-game .dice-result { font-size:60px; line-height:1; }
  #game-sexyopoly-game .legend { display:flex; flex-wrap:wrap; gap:6px; padding:6px 12px 0; justify-content:center; }
  #game-sexyopoly-game .legend-item { display:flex; align-items:center; gap:4px; font-size:9px; color:rgba(255,255,255,.5); }
  #game-sexyopoly-game .legend-dot { width:8px; height:8px; border-radius:50%; }
  #game-sexyopoly-game .log-money-row { display:flex; gap:8px; margin:0 12px 8px; }
  #game-sexyopoly-game .log-area { flex:3; background:rgba(0,0,0,.3); border:1px solid rgba(233,30,140,.2); border-radius:10px; overflow:hidden; min-width:0; }
  #game-sexyopoly-game .money-board { flex:2; background:rgba(45,0,24,.4); border:1px solid rgba(233,30,140,.2); border-radius:10px; overflow:hidden; min-width:0; }
  #game-sexyopoly-game .money-board-header { padding:7px 10px; background:rgba(45,0,24,.6); font-size:11px; font-weight:700; color:var(--accent3); text-transform:uppercase; letter-spacing:.5px; }
  #game-sexyopoly-game .money-board-entries { padding:6px 8px; }
  #game-sexyopoly-game .money-entry { display:flex; align-items:center; gap:5px; padding:3px 0; border-bottom:.5px solid rgba(255,255,255,.05); font-size:11px; }
  #game-sexyopoly-game .money-entry:last-child { border-bottom:none; }
  #game-sexyopoly-game .money-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  #game-sexyopoly-game .money-name { flex:1; color:rgba(255,255,255,.5); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #game-sexyopoly-game .money-amount { font-weight:700; color:var(--accent3); font-size:12px; white-space:nowrap; }
  #game-sexyopoly-game .log-header { padding:7px 12px; background:rgba(45,0,24,.6); font-size:11px; font-weight:700; color:var(--accent3); text-transform:uppercase; letter-spacing:.5px; display:flex; justify-content:space-between; align-items:center; }
  #game-sexyopoly-game .log-header button { font-size:12px; background:none; border:1px solid rgba(255,255,255,.2); border-radius:4px; color:rgba(255,255,255,.5); padding:2px 7px; cursor:pointer; }
  #game-sexyopoly-game .log-entries { max-height:130px; overflow-y:auto; padding:6px 0; }
  #game-sexyopoly-game .log-entry { padding:4px 12px; font-size:11px; color:rgba(255,255,255,.5); border-bottom:.5px solid rgba(255,255,255,.05); display:flex; gap:6px; align-items:flex-start; }
  #game-sexyopoly-game .log-entry .le-icon { flex-shrink:0; font-size:13px; }
  #game-sexyopoly-game .log-entry .le-text { line-height:1.4; }
  #game-sexyopoly-game .log-entry .le-text strong { color:#fff; }
  #game-sexyopoly-game .log-entry.highlight { background:rgba(233,30,140,.12); }
  #game-sexyopoly-game .game-complete-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:500; align-items:center; justify-content:center; padding:20px; }
  #game-sexyopoly-game .game-complete-backdrop.open { display:flex; }
  #game-sexyopoly-game .game-complete-card { background:linear-gradient(135deg,#120008 0%,#2d0018 100%); border:2px solid var(--accent3); border-radius:20px; width:100%; max-width:340px; padding:28px 22px 22px; text-align:center; animation:so-pop-in .3s ease-out; box-shadow:0 0 40px rgba(233,30,140,.4); }
  @keyframes so-pop-in { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
  #game-sexyopoly-game .gc-crown { font-size:52px; margin-bottom:4px; }
  #game-sexyopoly-game .gc-title { font-size:22px; font-weight:800; color:#fff; margin-bottom:4px; letter-spacing:1px; }
  #game-sexyopoly-game .gc-sub { font-size:12px; color:rgba(255,255,255,.5); margin-bottom:16px; }
  #game-sexyopoly-game .gc-winner-name { font-size:20px; font-weight:800; margin-bottom:4px; }
  #game-sexyopoly-game .gc-winner-amount { font-size:28px; font-weight:900; color:var(--accent3); margin-bottom:16px; }
  #game-sexyopoly-game .gc-standings { width:100%; margin-bottom:18px; }
  #game-sexyopoly-game .gc-row { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:6px; margin-bottom:3px; font-size:13px; }
  #game-sexyopoly-game .gc-row.winner-row { background:rgba(233,30,140,.15); border:1px solid rgba(233,30,140,.4); }
  #game-sexyopoly-game .gc-rank { font-weight:700; color:rgba(255,255,255,.5); width:18px; text-align:left; }
  #game-sexyopoly-game .gc-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  #game-sexyopoly-game .gc-pname { flex:1; color:#fff; font-weight:600; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #game-sexyopoly-game .gc-amount { color:var(--accent3); font-weight:700; }
  #game-sexyopoly-game .gc-btn { background:var(--accent3); color:#fff; border:none; border-radius:10px; padding:12px 28px; font-size:0.8rem; font-weight:800; cursor:pointer; width:100%; letter-spacing:.5px; transition:opacity .15s; }
  #game-sexyopoly-game .gc-btn:hover { opacity:.85; }
  #game-sexyopoly-game .roll-result-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:400; align-items:center; justify-content:center; padding:20px; }
  #game-sexyopoly-game .roll-result-backdrop.open { display:flex; }
  #game-sexyopoly-game .roll-result-card { background:#1a0010; border:2px solid var(--accent3); border-radius:16px; width:100%; max-width:300px; padding:22px 20px 18px; text-align:center; animation:so-pop-in .25s ease-out; }
  #game-sexyopoly-game .rr-player { font-size:13px; color:rgba(255,255,255,.5); margin-bottom:6px; }
  #game-sexyopoly-game .rr-dice { font-size:60px; line-height:1; margin-bottom:4px; }
  #game-sexyopoly-game .rr-total { font-size:14px; font-weight:700; color:rgba(255,255,255,.7); margin-bottom:12px; }
  #game-sexyopoly-game .rr-land { font-size:16px; font-weight:800; color:#fff; margin-bottom:8px; min-height:24px; }
  #game-sexyopoly-game .rr-action { font-size:13px; color:rgba(255,255,255,.7); margin-bottom:16px; min-height:36px; line-height:1.5; }
  #game-sexyopoly-game .rr-btn { background:var(--accent3); color:#fff; border:none; border-radius:10px; padding:10px 28px; font-size:0.9rem; font-weight:700; cursor:pointer; width:100%; transition:opacity .15s; min-height:44px; }
  #game-sexyopoly-game .rr-btn:hover { opacity:.85; }
  #game-sexyopoly-game .name-input-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
  #game-sexyopoly-game .name-input-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  #game-sexyopoly-game .name-input-field { flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:6px; color:#fff; font-size:max(16px,1em); padding:4px 8px; }
  #game-sexyopoly-game .name-input-field::placeholder { color:rgba(255,255,255,.3); }
  #game-sexyopoly-game .name-input-field:focus { outline:none; border-color:var(--accent3); }
  @keyframes dice-shake { 0%{transform:rotate(0) scale(1)} 15%{transform:rotate(-18deg) scale(1.15)} 30%{transform:rotate(14deg) scale(.95)} 45%{transform:rotate(-10deg) scale(1.1)} 60%{transform:rotate(8deg) scale(1.05)} 75%{transform:rotate(-5deg) scale(1)} 90%{transform:rotate(3deg) scale(1.02)} 100%{transform:rotate(0) scale(1)} }
  #game-sexyopoly-game .dice-rolling { animation:dice-shake .35s ease-in-out infinite; display:inline-block; }
  #game-sexyopoly-game .dice-result-number { font-size:44px; font-weight:800; color:var(--accent3); animation:so-pop-number .4s cubic-bezier(.34,1.56,.64,1) forwards; display:inline-block; margin-top:2px; }
  @keyframes so-pop-number { 0%{transform:scale(0) translateY(10px);opacity:0} 60%{transform:scale(1.3) translateY(-4px);opacity:1} 100%{transform:scale(1) translateY(0);opacity:1} }
  #game-sexyopoly-game .dice-faces { font-size:66px; line-height:1; min-height:80px; display:flex; align-items:center; justify-content:center; gap:8px; }

  #draw-start-overlay {
    position: relative;
    inset: auto;
    border-radius: 0;
    min-height: 60vh;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  .so-icon  { font-size: 2rem; line-height: 1; flex-shrink: 0; }
  .so-name  { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; flex-shrink: 0; }
  .so-howto {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%; max-width: 320px;
    text-align: left;
    flex-shrink: 0;
  }
  .so-howto-label {
    font-family: 'Space Mono', monospace;
    font-size: .731rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }
  .so-howto ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .so-howto li { font-size: .58rem; color: #ffffff; padding-left: 12px; position: relative; line-height: 1.35; }
  .so-howto li::before { content: '·'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  .start-overlay .start-btn { flex-shrink: 0; }
  .start-overlay .mode-btn { flex: 0 0 auto; padding: 5px 14px; }
  .canvas-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(10,10,16,.92); border-radius: 0 0 10px 10px; z-index: 10;
    padding: 20px 16px; text-align: center;
  }
  .canvas-overlay.hidden { display: none; }

  .stats-bar {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .stat { text-align: center; }
  .stat-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-family: 'Space Mono', monospace; }
  .stat-val { font-size: .78rem; font-weight: 700; font-family: 'Space Mono', monospace; color: var(--accent); }

  canvas { display: block; touch-action: none; }

  #connect5-board-wrap { width: 100%; }

  #game-tetris-game { min-height: 500px; }
  .next-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-family: 'Space Mono', monospace; }
  #tetris-next { border: 1px solid var(--border); border-radius: 6px; }


  .fun-btn {
    padding: 8px 16px;
    min-height: 44px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: .72rem; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation;
  }
  .fun-btn:hover { border-color: var(--accent); color: var(--accent); }
  .fun-btn.primary {
    border-color: var(--accent); color: var(--accent);
    box-shadow: 0 0 14px rgba(168,255,120,.15);
  }
  .fun-btn.primary:hover { background: rgba(168,255,120,.1); }
  .fun-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: .75rem; margin: 3px; color: var(--text);
    font-family: 'Space Mono', monospace;
  }
  .fun-tag .del { cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; }
  .fun-tag .del:hover { color: var(--danger); }
  .fun-result {
    margin-top: 14px; padding: 18px 14px;
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); text-align: center;
    display: none;
  }
  .fun-result .big-num { font-size: 3rem; font-weight: 700; font-family: 'Space Mono', monospace; color: var(--accent); line-height: 1.1; }
  .fun-result .res-label { font-size: .75rem; color: var(--muted); margin-top: 4px; font-family: 'Space Mono', monospace; }
  .fun-result .res-name { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
  .fun-history { margin-top: 10px; }
  .fun-history-item { font-size: .72rem; color: var(--muted); padding: 4px 0; border-bottom: 1px solid var(--border); font-family: 'Space Mono', monospace; }
  canvas.fun-canvas { display: block; border-radius: 10px; max-width: 100%; margin: 0 auto; }
  .race-track { background: var(--surface); border-radius: 10px; padding: 12px; min-height: 160px; border: 1px solid var(--border); }
  .race-lane { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .race-lane-num { font-size: .7rem; min-width: 22px; color: var(--muted); font-family: 'Space Mono', monospace; }
  .race-track-inner { flex: 1; background: var(--bg); border-radius: 20px; height: 72px; position: relative; overflow: hidden; border: 1px solid var(--border); }
  .race-animal { position: absolute; top: 4px; font-size: 32px; line-height: 1; transition: left .08s linear; display: flex; flex-direction: column; align-items: center; }
  .race-legs { display: flex; gap: 4px; height: 18px; margin-top: 1px; align-items: flex-start; }
  .race-leg {
    width: 8px; height: 18px;
    background: linear-gradient(to bottom, #d0d0d0, #aaa);
    border-radius: 3px 3px 2px 2px;
    transform-origin: top center;
    position: relative;
  }
  .race-leg::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -3px;
    width: 17px;
    height: 7px;
    background: linear-gradient(135deg, #ff4e50, #fc913a);
    border-radius: 2px 7px 7px 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }
  .race-leg::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -3px;
    width: 17px;
    height: 3px;
    background: rgba(255,255,255,0.45);
    border-radius: 1px 5px 5px 1px;
    z-index: 1;
  }
  .race-leg.left  { animation: legStride 0.44s ease-in-out infinite; }
  .race-leg.right { animation: legStride 0.44s ease-in-out infinite; animation-delay: -0.22s; }
  @keyframes legStride {
    0%   { transform: rotate(-55deg); }
    50%  { transform: rotate(55deg);  }
    100% { transform: rotate(-55deg); }
  }
  .race-leg.still { animation: none; transform: rotate(0deg); }
  .race-place { font-size: .7rem; color: var(--muted); min-width: 22px; text-align: right; font-family: 'Space Mono', monospace; }

  .race-winner-popup {
    display: none; position: fixed; inset: 0;
    z-index: 210; align-items: center; justify-content: center;
    background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  }
  .race-winner-popup.show { display: flex; }
  .race-winner-box {
    background: linear-gradient(145deg,#1e1e2a,#16161e);
    border: 2px solid var(--gold); border-radius: 20px;
    padding: 36px 28px; max-width: 300px; width: 86%;
    text-align: center; box-shadow: 0 0 40px rgba(255,215,0,.25);
    animation: raceWinPop .4s cubic-bezier(.34,1.56,.64,1) forwards;
    box-sizing: border-box; overflow: hidden;
  }
  .race-winner-trophy { font-size: 3.5rem; margin-bottom: 8px; }
  .race-winner-place { font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-family: 'Space Mono', monospace; margin-bottom: 4px; }
  .race-winner-name { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-bottom: 16px; word-break: break-word; overflow-wrap: break-word; }
  .race-winner-close { padding: 10px 28px; background: transparent; border: 2px solid var(--gold); color: var(--gold); border-radius: 8px; font-family: 'Syne',sans-serif; font-weight: 700; cursor: pointer; transition: all .15s; }
  .race-winner-close:hover { background: rgba(255,215,0,.12); }
  @keyframes raceWinPop {
    from { opacity: 0; transform: scale(.7) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }

  @keyframes raceFinishFlashPop {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.7) translateY(20px); }
    to   { opacity: 1; transform: translate(-50%,-50%) scale(1) translateY(0); }
  }

  .race-finish-flag {
    position: absolute; right: 8px; top: -2px; font-size: 16px;
    z-index: 3; line-height: 1;
  }
  .race-place-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; position: relative; font-size: .62rem;
    font-weight: 800; color: #000; font-family: 'Space Mono', monospace;
  }
  .race-place-star::before {
    content: '★'; position: absolute; font-size: 1.4rem; color: var(--gold);
    z-index: -1; line-height: 1;
  }
  #finger-zone {
    width:100%; height:280px; background:var(--surface);
    border:2px dashed var(--border); border-radius:12px;
    position:relative; overflow:hidden;
    touch-action:none; user-select:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem;
  }
  #finger-zone.fz-active { border-color:var(--accent); border-style:solid; }
  .fdot {
    position:absolute; width:80px; height:80px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; font-weight:700; color:#fff;
    transform:translate(-50%,-50%); pointer-events:none; transition:opacity .3s;
    font-family:'Space Mono',monospace;
    border: 4px solid transparent;
    box-sizing: border-box;
  }
  .fdot.winner {
    outline:3px solid var(--accent); outline-offset:4px;
    box-shadow:0 0 0 10px rgba(168,255,120,.15);
    animation:ftpulse .4s ease 3;
  }
  .fdot.winner::before { content:'👑'; position:absolute; top:-28px; left:50%; transform:translateX(-50%); font-size:1.2rem; }
  .fdot.winner::after {
    content:'WINNER'; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
    font-size:.5rem; font-weight:800; letter-spacing:.1em; color:var(--accent); white-space:nowrap;
  }
  @keyframes lightningBorder0 {
    0%   { box-shadow: 0 0 6px 2px #ff6b6b, 0 -12px 8px -4px #ff6b6b99, 12px 0 8px -4px #ffd70099; }
    25%  { box-shadow: 0 0 10px 4px #ffd700, 12px 0 10px -2px #a8ff7899, 0 12px 8px -4px #ff6b6b99; }
    50%  { box-shadow: 0 0 8px 3px #a8ff78, -12px 0 8px -4px #ffd70099, 0 -12px 10px -2px #78ffd699; }
    75%  { box-shadow: 0 0 12px 5px #78ffd6, 0 12px 10px -2px #ff6b6b99, -12px 0 8px -4px #a8ff7899; }
    100% { box-shadow: 0 0 6px 2px #ff6b6b, 0 -12px 8px -4px #ff6b6b99, 12px 0 8px -4px #ffd70099; }
  }
  @keyframes lightningBorder1 {
    0%   { box-shadow: 0 0 8px 3px #78ffd6, -10px 8px 8px -4px #a8ff7899, 8px -10px 8px -4px #ce93d899; }
    33%  { box-shadow: 0 0 12px 5px #ce93d8, 10px 6px 10px -3px #78ffd699, -8px -8px 8px -4px #ffd70099; }
    66%  { box-shadow: 0 0 7px 2px #ffd700, 0 14px 8px -5px #ce93d899, 14px 0 10px -3px #ff6b6b99; }
    100% { box-shadow: 0 0 8px 3px #78ffd6, -10px 8px 8px -4px #a8ff7899, 8px -10px 8px -4px #ce93d899; }
  }
  @keyframes lightningBorder2 {
    0%   { box-shadow: 0 0 9px 3px #ffd700, 11px -9px 7px -4px #78ffd699, -11px 9px 9px -3px #4fc3f799; }
    40%  { box-shadow: 0 0 11px 4px #4fc3f7, -9px -11px 9px -3px #ffd70099, 9px 11px 7px -4px #ff9f4399; }
    80%  { box-shadow: 0 0 7px 2px #ff9f43, 13px 5px 9px -4px #4fc3f799, -5px -13px 8px -3px #a8ff7899; }
    100% { box-shadow: 0 0 9px 3px #ffd700, 11px -9px 7px -4px #78ffd699, -11px 9px 9px -3px #4fc3f799; }
  }
  @keyframes lightningBorder3 {
    0%   { box-shadow: 0 0 7px 2px #a29bfe, 10px 10px 8px -4px #ff6b6b99, -10px -10px 8px -4px #a8ff7899; }
    50%  { box-shadow: 0 0 13px 5px #a8ff78, -12px 8px 10px -3px #a29bfe99, 8px -12px 8px -4px #ce93d899; }
    100% { box-shadow: 0 0 7px 2px #a29bfe, 10px 10px 8px -4px #ff6b6b99, -10px -10px 8px -4px #a8ff7899; }
  }
  @keyframes lightningBorder4 {
    0%   { box-shadow: 0 0 10px 4px #ce93d8, 0 -14px 8px -5px #ffd70099, 14px 0 8px -5px #a8ff7899; }
    35%  { box-shadow: 0 0 8px 3px #a8ff78, 14px 0 10px -4px #ce93d899, 0 14px 8px -5px #78ffd699; }
    70%  { box-shadow: 0 0 11px 4px #ffd700, -14px 0 8px -5px #a8ff7899, 0 -14px 10px -4px #ff9f4399; }
    100% { box-shadow: 0 0 10px 4px #ce93d8, 0 -14px 8px -5px #ffd70099, 14px 0 8px -5px #a8ff7899; }
  }
  .fdot-lightning-0 { animation: lightningBorder0 0.9s ease-in-out infinite; }
  .fdot-lightning-1 { animation: lightningBorder1 1.1s ease-in-out infinite; }
  .fdot-lightning-2 { animation: lightningBorder2 0.8s ease-in-out infinite; }
  .fdot-lightning-3 { animation: lightningBorder3 1.3s ease-in-out infinite; }
  .fdot-lightning-4 { animation: lightningBorder4 1.0s ease-in-out infinite; }
  @keyframes ftpulse {
    0%   { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 rgba(168,255,120,.6); }
    50%  { transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 0 0 12px rgba(168,255,120,0); }
    100% { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 0 rgba(168,255,120,0); }
  }

  .name-card {
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:1.4rem 1.2rem; text-align:center; margin-top:1rem;
  }
  .name-card .g-theme {
    display:inline-block; background:var(--bg); border:1px solid var(--border);
    border-radius:5px; font-size:.68rem; font-family:'Space Mono',monospace;
    padding:2px 8px; margin-bottom:.7rem; color:var(--muted);
  }
  .name-card .g-name { font-size:1.7rem; font-weight:800; letter-spacing:-.5px; margin-bottom:.4rem; color:var(--text); }
  .name-card .g-mean { font-size:.82rem; color:var(--muted); line-height:1.6; }

  .wentry {
    display:flex; align-items:center; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; padding:.45rem .75rem; font-size:.85rem;
  }
  .wentry .wdel { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; margin-left:auto; line-height:1; padding:.2rem .4rem; transition:color .1s; }
  .wentry .wdel:hover { color:var(--danger); }
  .wpodium {
    text-align:center; padding:1.6rem 1rem; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; margin-top:1rem; display:none;
  }
  .wpodium .wtrophy { font-size:2.4rem; margin-bottom:.5rem; }
  .wpodium .wname { font-size:1.5rem; font-weight:800; color:var(--accent); word-break:break-word; font-family:'Space Mono',monospace; }
  .wpodium .wsub { font-size:.72rem; color:var(--muted); margin-top:.4rem; font-family:'Space Mono',monospace; }

  .dice-grid { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1rem 0; }
  .die {
    width:68px; height:68px; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:2rem; transition:border-color .2s;
  }
  .die.rolling { animation:droll 3s cubic-bezier(.25,.1,.25,1) forwards; border-color:var(--accent); }
  .dice-total { text-align:center; font-size:.85rem; color:var(--muted); margin-bottom:.5rem; display:none; font-family:'Space Mono',monospace; }
  .dice-total strong { color:var(--accent); font-size:1.1rem; }

  .ft-lad-result {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:.8rem 1rem; margin-top:.8rem; font-size:.85rem; display:none;
  }
  .ft-res-row { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--border); font-family:'Space Mono',monospace; font-size:.78rem; }
  .ft-res-row:last-child { border-bottom:none; }
  .ft-res-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }



  .tetris-next-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .tmb-pause {
    padding: 4px 7px;
    font-size: 0.85rem;
    min-height: 28px;
    min-width: 28px;
    border-radius: 6px;
    line-height: 1;
    text-shadow: none;
    color: var(--muted);
    flex-shrink: 0;
  }
  .tmb-large {
    font-size: 1.8rem;
    min-height: 72px;
  }
  .tmb-rotate { }
  .tmb-top { grid-column: span 2; }
  .tmb-bottom { grid-column: span 3; }
  .tetris-mobile-btns {
    display: none; grid-template-columns: repeat(6,1fr); gap: 6px; width: 100%;
  }
  .tmb {
    background: var(--surface); border: 1px solid var(--border); color: #39ff14;
    padding: 16px 4px; border-radius: 8px; font-size: 1.4rem; cursor: pointer;
    transition: all .15s; text-shadow: 0 0 8px #39ff14; min-height: 56px;
  }
  .tmb:active { background: var(--border); }

  .chk-sq.selected {
    box-shadow: inset 0 0 0 3px #ffe600;
    z-index: 2;
  }
  .chk-sq.valid-move {
    z-index: 2;
    animation: chkBlink 0.65s step-start infinite;
  }
  .chk-sq.can-jump.valid-move {
    z-index: 2;
    animation: chkBlink 0.55s step-start infinite;
  }
  @keyframes chkBlink {
    0%, 100% { outline: 3px dashed #fff; outline-offset: -4px; }
    50%       { outline: none; }
  }
  .chk-piece { width:80%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;user-select:none;position:relative;z-index:2;transition:transform .1s; }
  .chk-piece.red  { background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0392b);border:2px solid #922b21;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3); }
  .chk-piece.black{ background:radial-gradient(circle at 35% 35%,#666,#111);border:2px solid #000;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3); }
  .chk-piece.king::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M8 70 L2 28 L28 46 L50 12 L72 46 L98 28 L92 70 Z' fill='%23FFD700' stroke='%238a6d00' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='2' cy='28' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Ccircle cx='50' cy='12' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Ccircle cx='98' cy='28' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Crect x='8' y='68' width='84' height='10' rx='2' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
  }

  #game-drinkopoly-game {
    --dk-board-bg: #16213e;
    --dk-cell-border: #0f3460;
    --dk-accent: #e94560;
    --dk-accent3: #4ecca3;
    --dk-text-muted: #a0a0b0;
    background: linear-gradient(135deg, #0a1628 0%, #16213e 100%);
    position: relative;
    min-height: 600px;
  }
  #game-drinkopoly-game .start-overlay { position:absolute; inset:0; background:rgba(5,15,30,.97); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; z-index:10; padding:20px 16px 24px; gap:12px; overflow:hidden; border-radius:12px; }
  #game-drinkopoly-game .start-overlay.hidden { display:none !important; }
  #game-drinkopoly-game .start-overlay > * { flex-shrink: 0; }
  #game-drinkopoly-game .start-overlay .so-howto { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  #game-drinkopoly-game .dk-panels-row {
    display: flex; gap: 8px; margin: 10px 10px 0; align-items: stretch;
  }
  #game-drinkopoly-game .dk-directions {
    background: rgba(15,52,96,0.6); border: 1px solid rgba(78,204,163,0.3);
    border-radius: 10px; padding: 11px 14px; flex: 1; position: relative;
  }
  #game-drinkopoly-game .dk-directions h2 {
    font-size: 12px; font-weight: 700; color: var(--dk-accent3);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; padding-right: 20px;
  }
  #game-drinkopoly-game .dk-dir-close-btn {
    position: absolute; top: 8px; right: 10px; background: none; border: none;
    color: var(--dk-text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
    transition: color .15s;
  }
  #game-drinkopoly-game .dk-dir-close-btn:hover { color: #fff; }
  #game-drinkopoly-game .dk-close-tooltip {
    position: absolute; top: 30px; right: 6px; background: var(--dk-accent); color: #fff;
    font-size: 10px; font-weight: 600; white-space: nowrap; padding: 5px 9px;
    border-radius: 8px; pointer-events: none; opacity: 0; transform: translateY(-4px);
    transition: opacity .2s, transform .2s; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  #game-drinkopoly-game .dk-close-tooltip::before {
    content: ''; position: absolute; top: -5px; right: 10px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 5px solid var(--dk-accent);
  }
  #game-drinkopoly-game .dk-close-tooltip.show { opacity: 1; transform: translateY(0); }
  #game-drinkopoly-game .dk-dir-grid { display: grid; grid-template-columns: 1fr; gap: 5px; }
  #game-drinkopoly-game .dk-dir-item { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; color: var(--dk-text-muted); line-height: 1.4; }
  #game-drinkopoly-game .dk-dir-num {
    background: var(--dk-accent); color: #fff; border-radius: 50%; width: 16px; height: 16px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; margin-top: 1px;
  }
  #game-drinkopoly-game .dk-setup-panel { width:100%; max-width:320px; }
  #game-drinkopoly-game .dk-setup-panel h2 { font-size:.85rem; margin-bottom:8px; color:rgba(255,255,255,.6); font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.1em; }
  #game-drinkopoly-game .dk-setup-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:.82rem; color:rgba(255,255,255,.7); }
  #game-drinkopoly-game .dk-setup-row label { font-size:.82rem; color:rgba(255,255,255,.7); white-space:nowrap; }
  #game-drinkopoly-game .dk-setup-row input[type=number] { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:6px; color:#fff; font-size:max(16px,1em); padding:4px 8px; width:50px; }
  #game-drinkopoly-game .dk-setup-row input[type=number]:focus { outline:none; border-color:var(--dk-accent3); }
  #game-drinkopoly-game .so-howto { border-color:rgba(78,204,163,.2); }
  #game-drinkopoly-game .so-howto-label { color:rgba(255,255,255,.45); }
  #game-drinkopoly-game .so-howto li { color:rgba(255,255,255,.7); }
  #game-drinkopoly-game .so-howto li::before { color:var(--dk-accent3); }
  #game-drinkopoly-game .dk-game-area { padding: 8px 4px; position: relative; }
  #game-drinkopoly-game .dk-board-wrapper {
    position: relative; width: 100%; aspect-ratio: 1;
    max-width: min(99vw, 520px);
  }
  #game-drinkopoly-game .dk-board {
    display: grid; grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(10,1fr);
    width: 100%; height: 100%; border: 2px solid var(--dk-cell-border);
    border-radius: 8px; overflow: hidden; background: var(--dk-board-bg);
  }
  #game-drinkopoly-game .dk-cell {
    border: 1px solid rgba(0,0,0,0.45); display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-size: 9px; text-align: center;
    padding: 2px 1px; position: relative; cursor: default; overflow: hidden; transition: background .15s;
  }
  #game-drinkopoly-game .dk-cell .dk-cell-icon { font-size: 13px; line-height: 1; margin-bottom: 1px; }
  #game-drinkopoly-game .dk-cell .dk-cell-name { font-size: 7px; line-height: 1.1; color: var(--dk-text-muted); word-break: break-word; }
  #game-drinkopoly-game .dk-cell .dk-cell-label {
    font-size: 6px; margin-top: 1px; padding: 1px 3px; border-radius: 3px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  }
  #game-drinkopoly-game .dk-cell .dk-color-bar { display: none; }
  #game-drinkopoly-game .dk-cell .dk-cell-price { font-size: 6px; color: #f5a623; font-weight: 700; margin-top: 1px; line-height: 1; }
  @media (min-width: 400px) { #game-drinkopoly-game .dk-cell .dk-cell-price { font-size: 7px; } }
  #game-drinkopoly-game .dk-cell.type-start { background: rgba(46,204,113,0.15); }
  #game-drinkopoly-game .dk-cell.type-jail { background: rgba(231,76,60,0.15); }
  #game-drinkopoly-game .dk-cell.type-free { background: rgba(52,152,219,0.15); }
  #game-drinkopoly-game .dk-cell.type-chance { background: rgba(155,89,182,0.15); }
  #game-drinkopoly-game .dk-cell.type-drink { background: rgba(230,126,34,0.15); }
  #game-drinkopoly-game .dk-cell.type-shot { background: rgba(231,76,60,0.2); }
  #game-drinkopoly-game .dk-cell.type-travel { background: rgba(52,152,219,0.1); }
  #game-drinkopoly-game .dk-cell.type-city { background: rgba(255,255,255,0.03); }
  #game-drinkopoly-game .dk-cell.type-empty { background: transparent; }
  #game-drinkopoly-game .drinkopoly-game-start-btn {
    border: 2px solid #2ecc71; border-radius: 50%; width: 72px; height: 72px;
    background: rgba(46,204,113,0.1); color: #2ecc71; font-size: 11px; font-weight: 700;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; transition: all .2s; text-transform: uppercase;
    letter-spacing: 1px; box-shadow: 0 0 16px rgba(46,204,113,0.25); animation: dkPulseGreen 2.5s ease-in-out infinite;
  }
  #game-drinkopoly-game .drinkopoly-game-start-btn:hover { background: rgba(46,204,113,0.25); transform: scale(1.06); }
  @keyframes dkPulseGreen {
    0%,100% { box-shadow: 0 0 16px rgba(46,204,113,0.25); }
    50% { box-shadow: 0 0 28px rgba(46,204,113,0.5); }
  }
  #game-drinkopoly-game .dk-center-title {
    font-size: 13px; font-weight: 800; color: #fff; text-align: center; letter-spacing: 1px; line-height: 1.3;
    text-shadow: 0 0 12px rgba(233,69,96,0.7);
  }
  #game-drinkopoly-game .dk-center-title small {
    display: block; font-size: 9px; font-weight: 400; color: var(--dk-text-muted); margin-top: 2px;
  }
  #game-drinkopoly-game .dk-turn-info { text-align: center; font-size: 11px; color: var(--dk-text-muted); line-height: 1.6; }
  #game-drinkopoly-game .dk-turn-info .dk-current-player { font-size: 15px; font-weight: 700; color: #fff; }
  #game-drinkopoly-game .dk-dice-result { font-size: 50px; line-height: 1; }
  #game-drinkopoly-game .dk-dice-faces { font-size: 54px; line-height: 1; min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; }
  #game-drinkopoly-game .dk-log-money-row { display: flex; gap: 8px; margin: 0 8px 8px; }
  #game-drinkopoly-game .dk-log-area {
    flex: 3; background: rgba(0,0,0,0.3); border: 1px solid var(--dk-cell-border);
    border-radius: 10px; overflow: hidden; min-width: 0;
  }
  #game-drinkopoly-game .dk-money-board {
    flex: 2; background: rgba(15,52,96,0.4); border: 1px solid var(--dk-cell-border);
    border-radius: 10px; overflow: hidden; min-width: 0;
  }
  #game-drinkopoly-game .dk-drink-log {
    flex: 2; background: rgba(60,10,30,0.45); border: 1px solid rgba(233,69,96,0.35);
    border-radius: 10px; overflow: hidden; min-width: 0;
  }
  #game-drinkopoly-game .dk-drink-log-header { padding: 7px 10px; background: rgba(233,69,96,0.2); font-size: 11px; font-weight: 700; color: var(--dk-accent); text-transform: uppercase; letter-spacing: 0.5px; }
  #game-drinkopoly-game .dk-drink-log-entries { padding: 6px 8px; }
  #game-drinkopoly-game .dk-drink-entry { display: flex; align-items: center; gap: 5px; padding: 3px 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); font-size: 11px; }
  #game-drinkopoly-game .dk-drink-entry:last-child { border-bottom: none; }
  #game-drinkopoly-game .dk-drink-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  #game-drinkopoly-game .dk-drink-name { flex: 1; color: var(--dk-text-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game-drinkopoly-game .dk-drink-count { font-weight: 700; color: var(--dk-accent); font-size: 12px; white-space: nowrap; }
  #game-drinkopoly-game .dk-money-board-header { padding: 7px 10px; background: rgba(15,52,96,0.5); font-size: 11px; font-weight: 700; color: #f5a623; text-transform: uppercase; letter-spacing: 0.5px; }
  #game-drinkopoly-game .dk-money-board-entries { padding: 6px 8px; }
  #game-drinkopoly-game .dk-money-entry { display: flex; align-items: center; gap: 5px; padding: 3px 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); font-size: 11px; }
  #game-drinkopoly-game .dk-money-entry:last-child { border-bottom: none; }
  #game-drinkopoly-game .dk-money-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  #game-drinkopoly-game .dk-money-name { flex: 1; color: var(--dk-text-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game-drinkopoly-game .dk-money-amount { font-weight: 700; color: #f5a623; font-size: 12px; white-space: nowrap; }
  #game-drinkopoly-game .dk-log-header { padding: 7px 12px; background: rgba(15,52,96,0.5); font-size: 11px; font-weight: 700; color: var(--dk-accent3); text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center; }
  #game-drinkopoly-game .dk-log-header button { font-size: 12px; background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: var(--dk-text-muted); padding: 2px 7px; cursor: pointer; }
  #game-drinkopoly-game .dk-log-entries { max-height: 110px; overflow-y: auto; padding: 6px 0; }
  #game-drinkopoly-game .dk-log-entries::-webkit-scrollbar { width: 3px; }
  #game-drinkopoly-game .dk-log-entries::-webkit-scrollbar-thumb { background: var(--dk-cell-border); border-radius: 2px; }
  #game-drinkopoly-game .dk-log-entry { padding: 4px 12px; font-size: 11px; color: var(--dk-text-muted); border-bottom: 0.5px solid rgba(255,255,255,0.05); display: flex; gap: 6px; align-items: flex-start; }
  #game-drinkopoly-game .dk-log-entry .le-icon { flex-shrink: 0; font-size: 13px; }
  #game-drinkopoly-game .dk-log-entry .le-text { line-height: 1.4; }
  #game-drinkopoly-game .dk-log-entry .le-text strong { color: #fff; }
  #game-drinkopoly-game .dk-log-entry.highlight { background: rgba(233,69,96,0.1); }
  #game-drinkopoly-game .dk-name-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
  #game-drinkopoly-game .dk-name-input-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  #game-drinkopoly-game .dk-name-input-field {
    flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px; color: #fff; font-size: max(16px, 1em); padding: 4px 8px;
  }
  #game-drinkopoly-game .dk-name-input-field::placeholder { color: rgba(255,255,255,0.3); }
  #game-drinkopoly-game .dk-name-input-field:focus { outline: none; border-color: var(--dk-accent3); }
  #game-drinkopoly-game .dk-dice-rolling { animation: dkDiceShake 0.35s ease-in-out infinite; display: inline-block; }
  @keyframes dkDiceShake {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-18deg) scale(1.15); }
    30%  { transform: rotate(14deg) scale(0.95); }
    45%  { transform: rotate(-10deg) scale(1.1); }
    60%  { transform: rotate(8deg) scale(1.05); }
    75%  { transform: rotate(-5deg) scale(1); }
    90%  { transform: rotate(3deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
  }
  #game-drinkopoly-game .dk-dice-result-number {
    font-size: 36px; font-weight: 800; color: var(--dk-accent3, #4ecca3);
    animation: dkPopNumber 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    display: inline-block; margin-top: 2px;
  }
  @keyframes dkPopNumber {
    0%   { transform: scale(0) translateY(10px); opacity: 0; }
    60%  { transform: scale(1.3) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }
  @keyframes dkPopIn {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  #dk-game-complete-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: var(--z-roll-result); align-items: center; justify-content: center; padding: 20px;
  }
  #dk-game-complete-modal.open { display: flex; }
  #dk-game-complete-modal .dk-gc-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    border: 2px solid #f5a623; border-radius: 20px; width: 100%; max-width: 340px;
    padding: 28px 22px 22px; text-align: center; animation: dkPopIn .3s ease-out;
    box-shadow: 0 0 40px rgba(245,166,35,0.3);
  }
  #dk-game-complete-modal .dk-gc-crown { font-size: 52px; margin-bottom: 4px; }
  #dk-game-complete-modal .dk-gc-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: 1px; }
  #dk-game-complete-modal .dk-gc-sub { font-size: 12px; color: #a0a0b0; margin-bottom: 16px; }
  #dk-game-complete-modal .dk-gc-winner-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
  #dk-game-complete-modal .dk-gc-winner-amount { font-size: 28px; font-weight: 900; color: #f5a623; margin-bottom: 16px; }
  #dk-game-complete-modal .dk-gc-standings { width: 100%; margin-bottom: 18px; }
  #dk-game-complete-modal .dk-gc-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; margin-bottom: 3px; font-size: 13px; }
  #dk-game-complete-modal .dk-gc-row.winner-row { background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.4); }
  #dk-game-complete-modal .dk-gc-rank { font-weight: 700; color: #a0a0b0; width: 18px; text-align: left; }
  #dk-game-complete-modal .dk-gc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  #dk-game-complete-modal .dk-gc-pname { flex: 1; color: #fff; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dk-game-complete-modal .dk-gc-amount { color: #f5a623; font-weight: 700; }
  #dk-game-complete-modal .dk-gc-btn { background: #f5a623; color: #000; border: none; border-radius: 10px; padding: 12px 28px; font-size: 0.8rem; font-weight: 800; cursor: pointer; width: 100%; transition: opacity .15s; }
  #dk-game-complete-modal .dk-gc-btn:hover { opacity: 0.85; }
  #dk-roll-result-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: var(--z-game-modal); align-items: center; justify-content: center; padding: 20px;
  }
  #dk-roll-result-modal.open { display: flex; }
  #dk-roll-result-modal .dk-rr-card {
    background: #1a1a2e; border: 2px solid #4ecca3; border-radius: 16px;
    width: 100%; max-width: 300px; padding: 22px 20px 18px; text-align: center;
    animation: dkPopIn .25s ease-out;
  }
  #dk-roll-result-modal .dk-rr-player { font-size: 13px; color: #a0a0b0; margin-bottom: 6px; }
  #dk-roll-result-modal .dk-rr-player strong { color: #fff; }
  #dk-roll-result-modal .dk-rr-dice { font-size: 52px; letter-spacing: 6px; line-height: 1; margin: 10px 0; }
  #dk-roll-result-modal .dk-rr-total { font-size: 28px; font-weight: 800; color: #4ecca3; margin-bottom: 4px; }
  #dk-roll-result-modal .dk-rr-land { font-size: 13px; color: #a0a0b0; margin-bottom: 16px; line-height: 1.6; }
  #dk-roll-result-modal .dk-rr-land strong { color: #fff; }
  #dk-roll-result-modal .dk-rr-btn { background: #4ecca3; color: #000; border: none; border-radius: 10px; padding: 10px 28px; font-size: 0.9rem; font-weight: 700; cursor: pointer; width: 100%; transition: opacity .15s; min-height: 44px; }
  #dk-roll-result-modal .dk-rr-btn:hover { opacity: 0.85; }
  #dk-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 220; align-items: center; justify-content: center; padding: 20px;
  }
  #dk-modal.open { display: flex; }
  #dk-modal .dk-modal-card {
    background: #1a1a2e; border: 2px solid #e94560; border-radius: 16px;
    width: 100%; max-width: 340px; padding: 24px 20px; text-align: center; animation: dkPopIn .2s ease-out;
  }
  #dk-modal .dk-mc-icon { font-size: 48px; margin-bottom: 12px; }
  #dk-modal .dk-mc-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
  #dk-modal .dk-mc-sub { font-size: 12px; color: #a0a0b0; margin-bottom: 16px; }
  #dk-modal .dk-mc-desc { font-size: 14px; color: #eaeaea; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; line-height: 1.6; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.1); }
  #dk-modal .dk-mc-btn { background: #e94560; color: #fff; border: none; border-radius: 10px; padding: 12px 32px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; width: 100%; }
  #dk-modal .dk-mc-btn:hover { background: #c73652; }

  .love-section-divider {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 0 12px; margin-top: 8px;
  }
  .love-section-divider .lsd-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,120,196,.35), transparent); }
  .love-section-divider .lsd-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; font-family: 'Space Mono', monospace;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }
  .game-card.love-card::before { background: linear-gradient(135deg, var(--pink), var(--purple)); }
  .game-card.love-card:hover { border-color: var(--pink); box-shadow: 0 8px 30px rgba(255,120,196,.18); }

  .love-display { text-align: center; padding: 24px 14px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); margin-top: 10px; display: none; }
  .love-percent { font-size: 4rem; font-weight: 800; font-family: 'Space Mono', monospace; line-height: 1; background: linear-gradient(135deg, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .love-hearts { font-size: 1.4rem; margin: 8px 0; letter-spacing: 3px; }
  .love-msg { font-size: .85rem; color: var(--muted); font-family: 'Space Mono', monospace; line-height: 1.6; margin-top: 6px; }
  .love-bar-wrap { width: 100%; background: var(--border); border-radius: 20px; height: 12px; margin: 12px 0; overflow: hidden; }
  .love-bar { height: 12px; border-radius: 20px; background: linear-gradient(90deg, var(--pink), var(--purple)); transition: width 1.2s cubic-bezier(.4,0,.2,1); width: 0; }
  .love-names { font-size: .78rem; color: var(--muted); font-family: 'Space Mono', monospace; margin-top: 8px; }
  .love-fortune-card { margin-top: 14px; padding: 14px 14px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,120,196,.07), rgba(200,120,255,.07)); border: 1px solid rgba(255,120,196,.25); text-align: left; }
  .love-fortune-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-family: 'Space Mono', monospace; color: var(--pink); margin-bottom: 8px; }
  .love-fortune-text { font-size: .82rem; color: var(--text); font-family: 'Space Mono', monospace; line-height: 1.75; }
  .love-heart-row { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; font-size: 1.5rem; }
  .love-heart { transition: opacity .3s, transform .3s; display: inline-block; }

  .dice-grid-love { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin: 10px 0 6px; }
  .sdice { min-width: 0; min-height: 90px; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 700; font-family: 'Space Mono', monospace; transition: all .2s; padding: 10px 8px; text-align: center; line-height: 1.3; word-break: break-word; overflow-wrap: break-word; }
  .sdice.rolling { animation: sdiceRoll .6s ease-in-out; border-color: var(--pink); }
  @keyframes sdiceRoll { 0%{transform:rotate(0) scale(1)} 25%{transform:rotate(-12deg) scale(1.08)} 75%{transform:rotate(10deg) scale(1.06)} 100%{transform:rotate(0) scale(1)} }
  .sdice-label { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
  .sdice-val { color: var(--pink); font-size: .78rem; font-weight: 800; }
  .sdice-emoji { font-size: 1.6rem; }


  .qcard { min-height: 200px; border-radius: 16px; background: linear-gradient(145deg, #1e1e2a, #16161e); border: 2px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 20px; margin: 14px 0; transition: border-color .2s; }
  .qcard.party { border-color: rgba(255,120,196,.25); }
  .qcard-cat { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; font-family: 'Space Mono', monospace; padding: 3px 10px; border-radius: 20px; background: rgba(255,120,196,.12); border: 1px solid rgba(255,120,196,.3); color: var(--pink); }
  .qcard-text { font-size: .82rem; font-weight: 700; text-align: center; line-height: 1.55; color: var(--text); }
  .qcard-hint { font-size: .78rem; color: var(--muted); font-family: 'Space Mono', monospace; text-align: center; }
  .qcard.reveal { animation: loveCardReveal .35s cubic-bezier(.34,1.56,.64,1); }
  @keyframes loveCardReveal { from{transform:scale(.92) translateY(10px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

  .cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); width: 100%; }
  .cat-tab { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-family: 'Space Mono', monospace; font-size: .68rem; cursor: pointer; transition: all .15s; color: var(--muted); }
  .cat-tab.active { border-color: var(--pink); color: var(--pink); background: rgba(255,120,196,.08); }

  .player-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
  .player-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); font-size: .78rem; font-family: 'Space Mono', monospace; color: var(--text); }
  .player-tag .ptdel { cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; }
  .player-tag .ptdel:hover { color: var(--danger); }

  .timer-circle { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 10px auto; position: relative; background: var(--surface); transition: border-color .3s; }
  .timer-circle.running { border-color: var(--pink); box-shadow: 0 0 20px rgba(255,120,196,.3); }
  .timer-circle.danger { border-color: var(--danger); box-shadow: 0 0 20px rgba(255,107,107,.4); animation: timerPulseLove .4s ease-in-out infinite alternate; }
  @keyframes timerPulseLove { from{transform:scale(1)} to{transform:scale(1.04)} }
  .timer-num { font-size: 2.8rem; font-weight: 800; font-family: 'Space Mono', monospace; color: var(--pink); line-height: 1; }
  .timer-label { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-family: 'Space Mono', monospace; }

  .draw-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all .15s; flex-shrink: 0; }
  .draw-swatch:hover { transform: scale(1.2); }
  .draw-swatch.active-swatch { border-color: white; transform: scale(1.15); }
  .eraser-swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); cursor: pointer; font-size: .65rem; display:flex; align-items:center; justify-content:center; color: var(--muted); transition: all .15s; }
  .eraser-swatch:hover { border-color: var(--danger); color: var(--danger); transform: scale(1.15); }
  .eraser-swatch.active-swatch { border-color: var(--danger); color: var(--danger); }
  .draw-result-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; animation: drawFadeUp .4s ease both; }
  .draw-result-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
  .draw-result-label { font-size: .72rem; font-weight: 700; color: var(--accent2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
  .draw-result-text { font-size: .8rem; color: var(--text); line-height: 1.6; font-family: 'Space Mono', monospace; }
  @keyframes drawFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  .draw-result-card:nth-child(2) { animation-delay: .1s; }
  .draw-result-card:nth-child(3) { animation-delay: .2s; }
  .draw-result-card:nth-child(4) { animation-delay: .3s; }
  .draw-result-card:nth-child(5) { animation-delay: .4s; }

  #game-drive-game, #game-true-game, #game-soul-game { }
  .quiz-shell { width:100%; display:flex; flex-direction:column; }
  .quiz-progress-bar { width:100%; height:3px; background:var(--border); }
  .quiz-progress-fill { height:3px; background:linear-gradient(90deg,var(--pink),var(--purple)); transition:width .5s cubic-bezier(.4,0,.2,1); }
  .quiz-body { padding:12px 14px 12px; }
  .quiz-q-num { font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--pink); font-family:'Space Mono',monospace; margin-bottom:8px; }
  .quiz-question { font-size:.82rem; font-weight:700; line-height:1.5; margin-bottom:12px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(168,255,120,.4); text-align:left; }
  .quiz-options { display:flex; flex-direction:column; gap:6px; }
  .quiz-opt { padding:8px 11px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.45; transition:all .18s cubic-bezier(.4,0,.2,1); text-align:left; touch-action:manipulation; }
  .quiz-opt:hover { border-color:var(--pink); background:rgba(255,120,196,.07); }
  .quiz-opt.selected { border-color:var(--pink); background:rgba(255,120,196,.13); }
  .quiz-opt.locked { pointer-events:none; }
  .quiz-opt.correct { border-color:var(--accent2); background:rgba(120,255,214,.1); }
  .quiz-nav { display:flex; gap:8px; margin-top:16px; }
  .quiz-btn { flex:1; padding:8px 14px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700; cursor:pointer; transition:all .18s; min-height:44px; }
  .quiz-btn.primary { border-color:var(--pink); color:var(--pink); box-shadow:0 0 18px rgba(255,120,196,.12); }
  .quiz-btn.primary:hover { background:rgba(255,120,196,.1); }
  .quiz-btn:disabled { opacity:.35; pointer-events:none; }

  .result-card { padding:22px 18px 20px; text-align:center; animation: loveCardReveal .4s cubic-bezier(.34,1.56,.64,1); }
  .result-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; font-family:'Space Mono',monospace; margin-bottom:12px; }
  .result-emoji { font-size:3.2rem; margin-bottom:10px; display:block; }
  .result-name { font-size:1.6rem; font-weight:800; letter-spacing:-1px; margin-bottom:4px; }
  .result-tagline { font-size:.82rem; color:var(--muted); font-family:'Space Mono',monospace; margin-bottom:16px; }
  .result-bars { width:100%; margin:0 0 14px; display:flex; flex-direction:column; gap:7px; }
  .result-bar-row { display:flex; align-items:center; gap:10px; }
  .result-bar-label { font-size:.65rem; font-family:'Space Mono',monospace; color:var(--muted); width:72px; text-align:right; flex-shrink:0; }
  .result-bar-track { flex:1; height:8px; background:var(--border); border-radius:20px; overflow:hidden; }
  .result-bar-fill { height:8px; border-radius:20px; transition:width 1s cubic-bezier(.4,0,.2,1); }
  .result-bar-pct { font-size:.65rem; font-family:'Space Mono',monospace; color:var(--muted); width:32px; flex-shrink:0; }
  .result-traits { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px 0; }
  .result-trait { padding:3px 10px; border-radius:20px; font-size:.65rem; font-family:'Space Mono',monospace; border:1px solid rgba(255,120,196,.3); background:rgba(255,120,196,.07); color:var(--pink); }
  .result-desc { font-size:.8rem; color:var(--muted); font-family:'Space Mono',monospace; line-height:1.75; text-align:left; margin:14px 0; padding:14px; background:var(--surface); border-radius:10px; border:1px solid var(--border); }
  .result-drink-rule { margin-top:12px; padding:12px 14px; border-radius:10px; background:linear-gradient(135deg,rgba(255,107,107,.08),rgba(255,120,196,.05)); border:1px solid rgba(255,107,107,.25); font-size:.78rem; font-family:'Space Mono',monospace; color:var(--text); line-height:1.7; text-align:left; }
  .result-drink-label { font-size:.6rem; color:var(--danger); text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }

  .tc-round-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--pink); font-family:'Space Mono',monospace; margin-bottom:6px; }
  .tc-instruction { font-size:.88rem; font-weight:700; margin-bottom:4px; }
  .tc-sub { font-size:.72rem; color:var(--muted); font-family:'Space Mono',monospace; margin-bottom:16px; line-height:1.6; }
  .tc-card-row { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
  .tc-card { padding:8px 11px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface); cursor:grab; transition:all .18s; display:flex; align-items:center; gap:10px; user-select:none; }
  .tc-card:active { cursor:grabbing; transform:scale(.98); }
  .tc-card.dragging { opacity:.5; transform:scale(.97); border-style:dashed; }
  .tc-card.drag-over { border-color:var(--pink); background:rgba(255,120,196,.08); }
  .tc-card-rank { width:22px; height:22px; border-radius:5px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; font-family:'Space Mono',monospace; }
  .tc-card-text { font-size:.7rem; font-family:'Space Mono',monospace; line-height:1.4; color:var(--text); }
  .tc-card-color { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-left:auto; }

  .st-color-bar { display:flex; gap:0; height:6px; border-radius:20px; overflow:hidden; width:100%; margin:10px 0 14px; transition:all .5s; }
  .st-color-seg { height:6px; transition:width .6s cubic-bezier(.4,0,.2,1); }
  .st-scale { display:flex; gap:6px; margin:12px 0; }
  .st-scale-btn { flex:1; padding:4px 4px; border-radius:7px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); font-family:'Space Mono',monospace; font-size:.56rem; cursor:pointer; transition:all .18s; text-align:center; line-height:1.3; min-height:30px; }
  .st-scale-btn:hover { border-color:var(--purple); color:var(--purple); }
  .st-scale-btn.active { border-color:var(--purple); background:rgba(200,120,255,.12); color:var(--purple); }
  .st-archetype-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:10px 0; }
  .st-arch-cell { text-align:center; padding:6px 4px; border-radius:7px; background:var(--surface); border:1px solid var(--border); }
  .st-arch-name { font-size:.55rem; font-family:'Space Mono',monospace; color:var(--muted); line-height:1.3; }
  .st-arch-pct { font-size:.7rem; font-weight:700; font-family:'Space Mono',monospace; color:var(--pink); }

  #game-area .fun-btn.pink-primary { border-color: var(--pink); color: var(--pink); box-shadow: 0 0 14px rgba(255,120,196,.15); }
  #game-area .fun-btn.pink-primary:hover { background: rgba(255,120,196,.1); }
  #game-area .fun-btn.pink-primary.active { background: rgba(255,120,196,.12); }
  #game-area .fun-input:focus { border-color: var(--pink); }

  .sdk-num{width:40px;height:40px;border-radius:7px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:'Space Mono',monospace;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .15s;min-width:0;min-height:44px;flex:1 1 0}
  .sdk-num:hover{border-color:var(--accent);color:var(--accent)}
  .sdk-num.sdk-erase{background:var(--bg);color:var(--danger);border:2px solid var(--danger);font-size:1rem}
  .sdk-num.sdk-erase:hover{background:rgba(255,107,107,0.1);border-color:var(--danger);color:var(--danger)}
  .sdk-num.sdk-completed{background:rgba(100,100,120,0.15);color:var(--muted);border-color:rgba(100,100,120,0.2);cursor:not-allowed;opacity:0.45;pointer-events:none}
  .sdk-num.sdk-active-num{border-color:var(--accent);background:rgba(168,255,120,0.08);color:var(--accent)}

  .sp-tile{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:clamp(0.75rem,2.5vw,1.3rem);font-weight:700;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background .12s,transform .08s,box-shadow .12s;user-select:none;touch-action:manipulation}
  .sp-tile:hover{border-color:var(--accent);box-shadow:0 0 12px rgba(168,255,120,.18)}
  .sp-tile:active{transform:scale(.93)}
  .sp-tile.blank{background:var(--bg);border-color:var(--border);cursor:default;box-shadow:none}
  .sp-tile.blank:hover{border-color:var(--border)}

  .ms-board{display:grid;gap:3px;padding:10px}
  .ms-cell{width:34px;height:34px;border-radius:6px;background:linear-gradient(145deg,#22223a,#16162a);border:2px solid #3a3a5c;box-shadow:0 2px 0 #0a0a14,inset 0 1px 0 rgba(255,255,255,.07);color:var(--text);font-family:'Space Mono',monospace;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:manipulation}
  .ms-cell:hover:not(.revealed){border-color:var(--accent);background:linear-gradient(145deg,#2a2a45,#1e1e35);box-shadow:0 2px 0 #0a0a14,inset 0 1px 0 rgba(168,255,120,.1),0 0 8px rgba(168,255,120,.15)}
  .ms-cell:active:not(.revealed){transform:translateY(1px);box-shadow:0 1px 0 #0a0a14,inset 0 1px 0 rgba(255,255,255,.05)}
  .ms-cell.revealed{background:rgba(10,10,20,.6);cursor:default;border-color:#1e1e30;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
  .ms-cell.flagged{background:linear-gradient(145deg,rgba(255,215,0,.18),rgba(255,165,0,.1));border-color:var(--gold);color:var(--gold);box-shadow:0 2px 0 #0a0a14,0 0 10px rgba(255,215,0,.2)}
  .ms-cell.mine{background:rgba(255,85,85,.2);border-color:var(--danger);color:var(--danger)}
  .ms-1{color:#78b2ff}.ms-2{color:#a8ff78}.ms-3{color:#ff5555}.ms-4{color:#ffd700}.ms-5{color:#ff78c4}.ms-6{color:#78ffd6}.ms-7{color:#ff9900}.ms-8{color:#aaa}

  .mem-board{display:grid;gap:8px;padding:12px;width:100%;max-width:360px;margin:0 auto}
  .mem-board-wrap{position:relative;width:100%;display:flex;justify-content:center}
  .mem-card{aspect-ratio:.72;border-radius:10px;cursor:pointer;perspective:600px;position:relative}
  .mem-inner{width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d;position:relative}
  .mem-card.fast-flip .mem-inner{transition:transform .25s}
  .mem-card.flipped .mem-inner{transform:rotateY(180deg)}
  .mem-front,.mem-back{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}
  .mem-front{background:linear-gradient(135deg,#1e1e3a,#16162e);border:2px solid #3a3a6a;box-shadow:inset 0 0 0 3px rgba(255,255,255,.04)}
  .mem-front-pattern{width:100%;height:100%;border-radius:8px;background-image:repeating-linear-gradient(45deg,rgba(100,80,200,.07) 0px,rgba(100,80,200,.07) 2px,transparent 2px,transparent 8px),repeating-linear-gradient(-45deg,rgba(100,80,200,.07) 0px,rgba(100,80,200,.07) 2px,transparent 2px,transparent 8px);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:rgba(168,255,120,.25)}
  .mem-back{background:#fff;border:2px solid #ddd;transform:rotateY(180deg);flex-direction:column;justify-content:space-between;padding:var(--mem-back-pad,4px)}
  .mem-card.matched .mem-inner{transform:rotateY(180deg)}
  .mem-card.matched .mem-back{background:#fff;border-color:var(--accent);box-shadow:0 0 12px rgba(168,255,120,.3)}
  .mem-suit-top,.mem-suit-bot{font-size:.85em;line-height:1;align-self:flex-start}
  .mem-suit-bot{align-self:flex-end;transform:rotate(180deg)}
  .mem-center{font-size:1.8em;line-height:1}
  .mem-rank-top,.mem-rank-bot{font-size:.75em;font-weight:800;font-family:'Space Mono',monospace;line-height:1;color:inherit}
  .mem-rank-bot{transform:rotate(180deg);align-self:flex-end}
  .mem-corner-top{display:flex;flex-direction:column;align-items:flex-start;gap:1px;align-self:flex-start}
  .mem-corner-bot{display:flex;flex-direction:column;align-items:flex-end;gap:1px;align-self:flex-end;transform:rotate(180deg)}

  .type-display-wrap{border-radius:8px;margin:0 14px;overflow:hidden}
  /* Fixed height sized for 6 rows of text (the Hard difficulty's longest
     case), applied as a standard across Easy/Medium/Hard so the box no
     longer resizes per difficulty. Easy/Medium text simply leaves blank
     space below it. box-sizing:border-box so padding is included in the
     height instead of adding to it. overflow-y:auto is a safety net only —
     it should not be needed since 6 rows already covers the longest text. */
  .type-display{font-family:'Space Mono',monospace;font-size:.78rem;line-height:1.65;padding:12px;background:var(--surface);border-radius:8px;word-break:break-word;box-sizing:border-box;height:calc(7.722rem + 24px);overflow-y:auto}
  .type-char{color:var(--muted)}.type-char.correct{color:var(--accent)}.type-char.wrong{color:var(--danger);background:rgba(255,85,85,.18);border-radius:2px}.type-char.current{border-left:2px solid var(--accent);animation:blink .7s step-end infinite}

/* ── D.4 Skin: Typing Speed — Retro Terminal (Skin 1) ────────────────────── */
/* Old-school typewriter feel: warm paper-toned vignette behind the matrix
   canvas, monospace courier-style text, subtle paper grain + scanlines. */
/* The panel is dark because the matrix rain canvas repaints rgba(0,0,0,.12)
   over itself every frame to create the trailing effect. That wash builds up
   to near-black within a second, so the original light mint background was
   never actually visible in play -- and the dark green text written for that
   light background (#1a3d1a) ended up as good as black on black, which is
   why the text being typed could not be seen at all. The panel is now dark by
   design and the text is bold bright green against it. */
#game-typing-game.skin-retro-terminal .type-display-wrap{
  background:linear-gradient(180deg, #010d03 0%, #04180a 100%);
  border:2px solid #00ff41;
  box-shadow:0 0 12px rgba(0,255,65,.5), inset 0 0 20px rgba(0,255,65,.08);
}
#game-typing-game.skin-retro-terminal .type-display{
  /* Slight dark veil so the rain stays visible behind the text without ever
     competing with it for legibility. */
  background:rgba(0,0,0,.38);
  font-family:'Courier New', 'Space Mono', monospace;
  position:relative; overflow:hidden;
}
/* Bold bright green at all times -- untyped text is just as readable as
   typed text, so the player can always see what they are meant to type. */
#game-typing-game.skin-retro-terminal .type-char{
  color:#00ff41;font-weight:800;text-shadow:0 0 6px rgba(0,255,65,.55);
}
#game-typing-game.skin-retro-terminal .type-char.correct{
  color:#ccffdb;font-weight:800;text-shadow:0 0 9px rgba(0,255,65,.95);
}
#game-typing-game.skin-retro-terminal .type-char.wrong{
  color:#ff7a7a;font-weight:800;background:rgba(255,64,64,.24);text-shadow:0 0 6px rgba(255,64,64,.5);
}
#game-typing-game.skin-retro-terminal .type-char.current{
  border-left:2px solid #00ff41;box-shadow:-1px 0 8px rgba(0,255,65,.85);
}
#game-typing-game.skin-retro-terminal .type-display::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,65,.07) 0px, rgba(0,255,65,.07) 1px, transparent 1px, transparent 3px);
}
#game-typing-game.skin-retro-terminal .type-display::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 16px rgba(0,255,65,.14);
}

/* ── D.4 Skin: Typing Speed — Ice Rink (Skin 2) ──────────────────────────── */
/* Frozen-rink feel: icy blue gradient ground + frost vignette behind the
   snowflake canvas, frosted-glass text panel. */
#game-typing-game.skin-ice-rink .type-display-wrap{
  background:linear-gradient(180deg, #0c1a2e 0%, #163652 60%, #1d4a6e 100%);
  border:2px solid #67e8f9;
  box-shadow:0 0 12px rgba(103,232,249,.5), inset 0 0 30px rgba(103,232,249,.12);
}
#game-typing-game.skin-ice-rink .type-display{
  background:rgba(12,26,46,.45);
  position:relative; overflow:hidden;
}
#game-typing-game.skin-ice-rink .type-char{color:#5a7a96}
#game-typing-game.skin-ice-rink .type-char.correct{color:#67e8f9;text-shadow:0 0 6px rgba(103,232,249,.5)}
#game-typing-game.skin-ice-rink .type-char.wrong{color:#ff8080;background:rgba(255,128,128,.15)}
#game-typing-game.skin-ice-rink .type-char.current{border-left:2px solid #67e8f9;box-shadow:0 0 8px rgba(103,232,249,.4)}
#game-typing-game.skin-ice-rink .type-display::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 30%, transparent 70%, rgba(103,232,249,.06) 100%);
  box-shadow:inset 0 0 18px rgba(103,232,249,.15);
}

/* ── D.4 Skin: Memory Match — Night Sky (Skin 1) ─────────────────────────── */
#game-memory-game.skin-night-sky .mem-board{background:linear-gradient(180deg,#bde0fe 0%,#e8f4ff 100%);border-radius:10px;border:2px solid #38bdf8;position:relative;box-shadow:0 0 12px rgba(56,189,248,.5)}
#game-memory-game.skin-night-sky .mem-board::before{content:'';position:absolute;inset:0;border-radius:10px;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 60%,rgba(0,0,0,0.06) 100%);pointer-events:none}
#game-memory-game.skin-night-sky .mem-front{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:#7dd3fc}
#game-memory-game.skin-night-sky .mem-front-pattern{color:rgba(56,189,248,.4)}
#game-memory-game.skin-night-sky .mem-back{background:#f0f9ff;border-color:#7dd3fc}

/* ── D.4 Skin: Memory Match — Candy Pop (Skin 2) ─────────────────────────── */
#game-memory-game.skin-candy-pop .mem-board{background:linear-gradient(180deg,#3a0a2a 0%,#1a0514 100%);border-radius:10px;border:2px solid #d94f9e;box-shadow:0 0 12px rgba(217,79,158,.5),inset 0 2px 8px rgba(0,0,0,.4);position:relative}
#game-memory-game.skin-candy-pop .mem-board::before{content:'';position:absolute;inset:0;border-radius:10px;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 60%,rgba(0,0,0,0.25) 100%);pointer-events:none}
#game-memory-game.skin-candy-pop .mem-front{background:linear-gradient(135deg,#8a1a5a,#5a0f3a);border-color:#d94f9e}
#game-memory-game.skin-candy-pop .mem-front-pattern{color:rgba(255,182,222,.5)}
#game-memory-game.skin-candy-pop .mem-back{background:#2a0a1e;border-color:#8a3a6a}

/* Brain Teasers skins */
#game-brain-teasers.skin-chalkboard-genius{background:linear-gradient(180deg,#1a3a1a 0%,#0d2a0d 100%)}
#game-brain-teasers.skin-chalkboard-genius .brain-teasers-riddle-area{background:linear-gradient(135deg,#1e4020,#123018);border:2px solid #4caf50;box-shadow:0 0 12px rgba(76,175,80,.4)}
#game-brain-teasers.skin-circuit-mind{background:linear-gradient(180deg,#050510 0%,#0a0a1a 100%)}
#game-brain-teasers.skin-circuit-mind .brain-teasers-riddle-area{background:linear-gradient(135deg,#0a0a1a,#0d1a2a);border:2px solid #00e5ff;box-shadow:0 0 14px rgba(0,229,255,.4)}

/* Odd One Out skins */
#game-odd-one-out.skin-desert-mirage{background:linear-gradient(180deg,#3a2a10 0%,#2a1c08 100%)}
#game-odd-one-out.skin-desert-mirage .odd-one-out-grid-area{background:linear-gradient(135deg,#4a3418,#33230f);border:2px solid #c2760c;box-shadow:0 0 12px rgba(194,118,12,.4)}
#game-odd-one-out.skin-neon-detective{background:linear-gradient(180deg,#0d0416 0%,#160826 100%)}
#game-odd-one-out.skin-neon-detective .odd-one-out-grid-area{background:linear-gradient(135deg,#12081c,#1c0a2e);border:2px solid #c026d3;box-shadow:0 0 14px rgba(192,38,212,.4)}

/* Simon Says skins */
#game-simon-says.skin-retro-arcade{background:linear-gradient(180deg,#1a0522 0%,#2a0a3a 100%)}
#game-simon-says.skin-retro-arcade .simon-says-pad-area{filter:drop-shadow(0 0 10px rgba(255,46,196,.4))}
#game-simon-says.skin-aurora-pulse{background:linear-gradient(180deg,#02090d 0%,#04121a 100%)}
#game-simon-says.skin-aurora-pulse .simon-says-pad-area{filter:drop-shadow(0 0 12px rgba(52,211,153,.4))}

/* The Stupidity Test skins */
#game-the-stupidity-test.skin-class-clown{background:linear-gradient(180deg,#3a2a0a 0%,#2a1c05 100%)}
#game-the-stupidity-test.skin-class-clown .the-stupidity-test-question-area{background:linear-gradient(135deg,#4a3410,#33230a);border:2px solid #e64980;box-shadow:0 0 12px rgba(230,73,128,.4)}
#game-the-stupidity-test.skin-galaxy-brain{background:linear-gradient(180deg,#04001a 0%,#0a0522 100%)}
#game-the-stupidity-test.skin-galaxy-brain .the-stupidity-test-question-area{background:linear-gradient(135deg,#0f0522,#150a30);border:2px solid #8b5cf6;box-shadow:0 0 14px rgba(139,92,246,.4)}

/* ─── Daily Horoscope skins ──────────────────────────────────────────────
   Set 1 "Starlit Sky" is the bright pairing (lifted indigo starlight, gold
   border); Set 2 "Blood Moon" is the dark pairing (near-black crimson,
   blood-red border). Both follow the same wrapper-background + card-border
   pattern every other per-game skin uses. */
#game-daily-game.skin-starlit-sky{background:linear-gradient(180deg,#243a7a 0%,#1b2a5e 100%)}
#game-daily-game.skin-starlit-sky .cosmic-wrap .c-cosmic-card{background:linear-gradient(135deg,#2c4590,#1e2f66);border:2px solid #ffd700;box-shadow:0 0 12px rgba(255,215,0,.35)}
#game-daily-game.skin-starlit-sky .cosmic-wrap .rating-fill{background:linear-gradient(90deg,#ffd700,#fff3b0)}
#game-daily-game.skin-blood-moon{background:linear-gradient(180deg,#2a0508 0%,#120203 100%)}
#game-daily-game.skin-blood-moon .cosmic-wrap .c-cosmic-card{background:linear-gradient(135deg,#33070b,#1a0305);border:2px solid #c0202e;box-shadow:0 0 14px rgba(192,32,46,.4)}
#game-daily-game.skin-blood-moon .cosmic-wrap .rating-fill{background:linear-gradient(90deg,#c0202e,#ff5a6a)}

/* ─── Saju skins ─────────────────────────────────────────────────────────
   Set 1 "Hidden Question" is the bright pairing (lifted violet haze, lilac
   border); Set 2 "Ancient Relic" is the dark pairing (tomb-dark sand,
   antique-gold border). */
#game-saju-game.skin-hidden-question{background:linear-gradient(180deg,#3a2f6a 0%,#2a2450 100%)}
#game-saju-game.skin-hidden-question .cosmic-wrap .c-cosmic-card{background:linear-gradient(135deg,#443878,#2f2858);border:2px solid #a78bfa;box-shadow:0 0 12px rgba(167,139,250,.35)}
#game-saju-game.skin-hidden-question .cosmic-wrap .rating-fill{background:linear-gradient(90deg,#a78bfa,#e9d5ff)}
#game-saju-game.skin-ancient-relic{background:linear-gradient(180deg,#1a1204 0%,#0d0902 100%)}
#game-saju-game.skin-ancient-relic .cosmic-wrap .c-cosmic-card{background:linear-gradient(135deg,#241906,#140d03);border:2px solid #b8860b;box-shadow:0 0 14px rgba(184,134,11,.4)}
#game-saju-game.skin-ancient-relic .cosmic-wrap .rating-fill{background:linear-gradient(90deg,#b8860b,#e8c46a)}

/* ─── MBTI Test skins ────────────────────────────────────────────────────
   Set 1 "Confetti Lab" is the bright pairing (prism-lit violet, pink
   border); Set 2 "Neon Enigma" is the dark pairing (deep teal-black, cyan
   border). Backgrounds are prism refraction and a DNA helix respectively,
   neither used by any other game. */
#game-mbti-game.skin-confetti-lab{background:linear-gradient(180deg,#3a2560 0%,#2a1a4a 100%)}
#game-mbti-game.skin-confetti-lab .mbti-question-card,
#game-mbti-game.skin-confetti-lab .mbti-result-card,
#game-mbti-game.skin-confetti-lab .pt-intro-inner{background:linear-gradient(135deg,#452b73,#301d52);border:2px solid #f472b6;box-shadow:0 0 12px rgba(244,114,182,.35)}
#game-mbti-game.skin-confetti-lab .mbti-progress-fill{background:linear-gradient(90deg,#f472b6,#fbcfe8)}
#game-mbti-game.skin-neon-enigma{background:linear-gradient(180deg,#071a26 0%,#04101a 100%)}
#game-mbti-game.skin-neon-enigma .mbti-question-card,
#game-mbti-game.skin-neon-enigma .mbti-result-card,
#game-mbti-game.skin-neon-enigma .pt-intro-inner{background:linear-gradient(135deg,#08222f,#05141f);border:2px solid #22d3ee;box-shadow:0 0 14px rgba(34,211,238,.4)}
#game-mbti-game.skin-neon-enigma .mbti-progress-fill{background:linear-gradient(90deg,#22d3ee,#a5f3fc)}

/* Slide Puzzle skins */
#game-slide-game.skin-cherry-blossom #sp-board{background:linear-gradient(135deg,#ffe3ec,#ffc4dd);border-radius:10px;padding:8px;border:2px solid #ec4899;box-shadow:0 0 12px rgba(236,72,153,.4)}
#game-slide-game.skin-cherry-blossom .sp-tile{background:linear-gradient(135deg,#fff0f5,#ffd9e8);border-color:#f472b6;color:#831843}
#game-slide-game.skin-cyberpunk-grid #sp-board{background:linear-gradient(135deg,#050510,#0a0a20);border-radius:10px;padding:8px;border:2px solid #22d3ee;box-shadow:0 0 14px rgba(34,211,238,.4)}
#game-slide-game.skin-cyberpunk-grid .sp-tile{background:linear-gradient(135deg,#0a0a1a,#0d1a2a);border-color:#22d3ee;color:#67e8f9}

/* D.3 Session 2 — Checkers skins, merged from 4 unlocks to 2. Board squares
   keep their default color; the theme now lives entirely on the piece
   border/glow, so there's a single class swap per set instead of two
   layers to keep in sync.
   Set 1 "Gem Board" = smiley-face pieces with a gold border/glow.
   Set 2 "Lava Crown" = crown pieces with a fiery red-orange border/glow. */
#game-checkers-game.skin-gem-board #chk-board-wrap{border:3px solid #f2b90d;box-shadow:0 0 14px rgba(242,185,13,.6),0 4px 20px rgba(0,0,0,0.5)}
#game-checkers-game.skin-gem-board .chk-piece.red{border-color:#f2b90d;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3),0 0 6px rgba(242,185,13,.7)}
#game-checkers-game.skin-gem-board .chk-piece.black{border-color:#f2b90d;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3),0 0 6px rgba(242,185,13,.7)}
#game-checkers-game.skin-lava-flow #chk-board-wrap{border:3px solid #7a2818;box-shadow:0 0 14px rgba(122,40,24,.6),0 4px 20px rgba(0,0,0,0.5)}
#game-checkers-game.skin-lava-flow .chk-piece.red{border-color:#ff5a2e;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3),0 0 6px rgba(255,90,46,.7)}
#game-checkers-game.skin-lava-flow .chk-piece.black{border-color:#ff5a2e;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3),0 0 6px rgba(255,90,46,.7)}

/* Checkers piece icon — now driven by the same wrapper class as the board
   border above (skin-gem-board/skin-lava-flow), not a separate piece-style
   class. Default (no class = not purchased/active) keeps the original
   look: no icon on regular pieces, gold ♛ crown on kings only. */
#game-checkers-game.skin-lava-flow .chk-piece::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M8 70 L2 28 L28 46 L50 12 L72 46 L98 28 L92 70 Z' fill='%23FFD700' stroke='%238a6d00' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='2' cy='28' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Ccircle cx='50' cy='12' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Ccircle cx='98' cy='28' r='8' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3Crect x='8' y='68' width='84' height='10' rx='2' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#game-checkers-game.skin-lava-flow .chk-piece.king::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M8 70 L2 28 L28 46 L50 12 L72 46 L98 28 L92 70 Z' fill='%23FFD700' stroke='%238a6d00' stroke-width='5' stroke-linejoin='round'/%3E%3Crect x='-4' y='22' width='12' height='12' fill='%234FC3F7' stroke='%230d5c8a' stroke-width='2' transform='rotate(45 2 28)'/%3E%3Crect x='44' y='6' width='12' height='12' fill='%234FC3F7' stroke='%230d5c8a' stroke-width='2' transform='rotate(45 50 12)'/%3E%3Crect x='92' y='22' width='12' height='12' fill='%234FC3F7' stroke='%230d5c8a' stroke-width='2' transform='rotate(45 98 28)'/%3E%3Crect x='8' y='68' width='84' height='10' rx='2' fill='%23FFD700' stroke='%238a6d00' stroke-width='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
#game-checkers-game.skin-gem-board .chk-piece::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23FFCC33' stroke='%237A5A00' stroke-width='4'/%3E%3Ccircle cx='33' cy='42' r='7' fill='%233A2A00'/%3E%3Ccircle cx='67' cy='42' r='7' fill='%233A2A00'/%3E%3Cpath d='M26 60 Q50 85 74 60' fill='none' stroke='%233A2A00' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#game-checkers-game.skin-gem-board .chk-piece.king::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23FFCC33' stroke='%237A5A00' stroke-width='4'/%3E%3Cpath d='M22 39 L44 45' stroke='%233A2A00' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='68' cy='42' r='7' fill='%233A2A00'/%3E%3Cpath d='M25 58 Q50 80 75 58' fill='none' stroke='%233A2A00' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M40 66 Q50 92 60 66 Z' fill='%23E05C5C' stroke='%238a2f2f' stroke-width='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* D.3 Session 2 — Whack-a-Mole skins (hole background + ring color override) */
/* Background rework — Space Invaders is Set 1 (Bright): light blue wrapper,
   cyan hole border, subtle vignette via ::before, faint 🔨 corner watermark. */
#game-whack-game.skin-space-invaders .hole{background:radial-gradient(ellipse at 50% 70%,#eaf9ff 0%,#cdeeff 60%,#b8e4f5 100%);border-color:#38bdf8}
#game-whack-game.skin-space-invaders .hole.whacked{border-color:#38bdf8}
#game-whack-game.skin-space-invaders{background:linear-gradient(180deg,#cdeeff 0%,#eaf9ff 100%);position:relative}
#game-whack-game.skin-space-invaders::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 60%,rgba(0,0,0,0.08) 100%);pointer-events:none;z-index:0}
/* Deep Sea is Set 2 (Dark) — existing wrapper gradient kept, hole glow
   strengthened, same vignette + corner watermark treatment applied. */
#game-whack-game.skin-deep-sea .hole{background:radial-gradient(ellipse at 50% 70%,#0f3a52 0%,#0c2340 60%,#061224 100%);border-color:#2d7a94;box-shadow:inset 0 6px 18px rgba(0,0,0,0.7),0 2px 8px rgba(0,0,0,0.4),0 0 14px #2d7a94}
#game-whack-game.skin-deep-sea .hole.whacked{border-color:#2d7a94}
#game-whack-game.skin-deep-sea{background:linear-gradient(180deg,#083344 0%,#01313a 50%,#001a1f 100%);position:relative}
#game-whack-game.skin-deep-sea::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 60%,rgba(0,0,0,0.15) 100%);pointer-events:none;z-index:0}


/* ── D.3/D.4 shared: small discovery link on a game's start overlay that
   opens the Gem Unlocks page scrolled to that game's skin section ────────── */
.gu-skin-link-btn{background:linear-gradient(135deg, #ffd700, #92400e);border:none;color:#000;font-family:'Syne',sans-serif;font-weight:600;font-size:.72rem;padding:9px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;text-align:center;transition:opacity .15s;box-sizing:border-box;line-height:1.3;letter-spacing:0.3px;display:inline-block}
.gu-skin-link-btn:hover{opacity:.85}
.gu-skin-link-btn:active{transform:scale(.96)}

  @keyframes blink{50%{opacity:0}}
  .type-input{width:calc(100% - 28px);margin:8px 14px 0;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'Space Mono',monospace;font-size:max(16px,1em);outline:none;transition:border-color .2s}
  .type-input:focus{border-color:var(--accent)}


  .pong-canvas-wrap{width:100%;padding:10px;max-width:500px;margin:0 auto;position:relative}
  .bb-canvas-wrap{width:100%;padding:10px;max-width:400px;margin:0 auto;position:relative}

  .dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;width:100%;max-width:240px;margin:0 auto}
  /* Hide snake dpad on desktop (mouse/trackpad) — keyboard arrows used instead */
  @media (hover: hover) and (pointer: fine) {
    #game-snake-game .dpad { display: none; }
  }
  .dpad-btn{background:var(--surface);border:1px solid var(--border);color:var(--accent);padding:18px 14px;border-radius:10px;font-size:1.6rem;cursor:pointer;transition:all .15s;text-align:center;text-shadow:0 0 8px var(--accent);min-height:64px;min-width:64px}
  .dpad-btn:active{background:var(--border)}

  .social-card-display{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 20px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}
  .social-card-display::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(168,255,120,.04),rgba(120,255,214,.04));pointer-events:none}
  .social-card-text{font-size:.75rem;font-weight:700;line-height:1.55;color:var(--text);position:relative;z-index:1}
  .social-card-cat{font-size:.65rem;font-family:'Space Mono',monospace;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;position:relative;z-index:1}
  .social-card-emoji{font-size:2rem;margin-bottom:4px;position:relative;z-index:1}
  .social-next-btn{width:100%;padding:14px;background:transparent;border:2px solid var(--accent);color:var(--accent);font-family:'Syne',sans-serif;font-size:0.72rem;font-weight:800;border-radius:10px;cursor:pointer;letter-spacing:1px;transition:all .2s;box-shadow:0 0 20px rgba(168,255,120,.15)}
  .social-next-btn:hover{background:rgba(168,255,120,.1);transform:translateY(-1px)}
  .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:7px}
  .cat-btn{padding:8px 6px;background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:8px;font-family:'Syne',sans-serif;font-size:.62rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;min-height:44px}
  .cat-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(168,255,120,.07)}

  .section-label-sm{font-size:.65rem;font-family:'Space Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:2px}
  .q-list-item{background:var(--surface);border-radius:8px;padding:10px 14px;font-size:.83rem;line-height:1.5;color:var(--text);border:1px solid transparent;cursor:pointer;transition:all .15s}
  .q-list-item:hover{border-color:var(--border)}.q-list-item.highlighted{border-color:var(--accent);background:rgba(168,255,120,.05)}
  .q-list-wrap{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}

  .quiz-input{width:100%;padding:12px 14px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:10px;font-family:'Syne',sans-serif;font-size:max(16px,1em);outline:none;transition:border-color .2s}
  .quiz-input:focus{border-color:var(--accent)}.quiz-input::placeholder{color:var(--muted)}
  .quiz-option-row{display:flex;gap:8px;align-items:center}
  .quiz-option-row input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
  .quiz-q-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-right:4px}
  .quiz-q-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:.82rem}
  .quiz-q-item strong{color:var(--accent);display:block;margin-bottom:4px;font-size:.75rem;font-family:'Space Mono',monospace}
  .quiz-play-q{background:var(--surface);border:1.5px solid var(--accent);border-radius:14px;padding:20px 16px;text-align:center}
  .quiz-play-q p{font-size:.72rem;font-weight:700;margin-bottom:14px;line-height:1.5}
  .quiz-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .quiz-opt-btn{padding:10px 8px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:8px;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;touch-action:manipulation}
  .quiz-opt-btn:hover{border-color:var(--accent);color:var(--accent)}.quiz-opt-btn.correct{border-color:#2ecc71;color:#2ecc71;background:rgba(46,204,113,.1)}.quiz-opt-btn.wrong{border-color:var(--danger);color:var(--danger);background:rgba(255,85,85,.1)}
  .quiz-progress{display:flex;gap:4px;margin-bottom:8px}
  .quiz-pip{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .2s}
  .quiz-pip.done{background:var(--accent)}.quiz-pip.current{background:rgba(168,255,120,.4)}


  @media(max-width:600px){
    .ms-cell{width:28px;height:28px;font-size:.7rem}
  }
  @media(max-width:420px){
    #ms-board{overflow-x:auto;}
    .ms-cell{width:28px;height:28px;font-size:.65rem;border-radius:4px}
  }
  .game-wrapper {
    padding: 0;
    color: var(--text);
  }
  .game-wrapper .game-inner-pad {
    padding: 20px;
  }

  .game-wrapper .cosmic-wrap {
    font-family: 'Georgia', serif;
    color: #e8d5ff;
  }
  .game-wrapper .cosmic-wrap .btn-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: #c084fc;
    font-size: 13px;
    cursor: pointer;
    font-family: monospace;
    letter-spacing: 1px;
    transition: all .2s;
  }
  .game-wrapper .cosmic-wrap .btn-ghost:hover { opacity: .8; }
  .game-wrapper .cosmic-wrap .btn-primary {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    border: none;
    border-radius: 10px;
    padding: 12px 26px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Georgia', serif;
    letter-spacing: 1px;
    transition: all .2s;
  }
  .game-wrapper .cosmic-wrap .btn-primary:hover { opacity:.85; transform:translateY(-1px); }
  .game-wrapper .cosmic-wrap .btn-primary:disabled { opacity:.4; cursor:default; transform:none; }

  .game-wrapper .cosmic-wrap .c-cosmic-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 18px;
    backdrop-filter: blur(8px);
    margin-bottom: 12px;
  }
  .game-wrapper .cosmic-wrap .c-card-label {
    font-size: 11px; color: #7b5ea0; letter-spacing: 2px; font-family: monospace;
    display: block; margin-bottom: 10px;
  }
  .game-wrapper .cosmic-wrap .c-pill {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px; padding: 4px 12px; font-size: 11px; color: #c084fc;
    font-family: monospace; letter-spacing: 1px; display: inline-block; margin: 2px;
  }
  .game-wrapper .cosmic-wrap .rating-row { margin-bottom: 8px; }
  .game-wrapper .cosmic-wrap .rating-labels { display: flex; justify-content: space-between; font-size: 10px; color: #c0a8e0; margin-bottom: 3px; font-family: monospace; }
  .game-wrapper .cosmic-wrap .rating-track { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
  .game-wrapper .cosmic-wrap .rating-fill { height: 100%; background: linear-gradient(90deg,#a855f7,#ec4899); border-radius: 2px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
  .game-wrapper .cosmic-wrap .bday-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .game-wrapper .cosmic-wrap .c-inp {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px; padding: 10px 14px; color: #e8d5ff; font-size: max(16px, 1em);
    font-family: 'Georgia', serif; outline: none; width: 100%; display: block;
  }
  .game-wrapper .cosmic-wrap .c-inp::placeholder { color: rgba(155,124,192,.5); font-size: .65rem; }
  .game-wrapper .cosmic-wrap .c-inp[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
  #tp-player-count::-webkit-inner-spin-button,
  #tp-player-count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  #tp-player-count { -moz-appearance: textfield; }
  .game-wrapper .cosmic-wrap .c-quiz-opt {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 10px 14px; cursor: pointer; color: #9b7cc0;
    font-size: 13px; text-align: left; width: 100%; margin-bottom: 6px;
    font-family: 'Georgia', serif; transition: all .2s; display: block;
  }
  .game-wrapper .cosmic-wrap .c-quiz-opt:hover { border-color: rgba(168,85,247,.4); color: #e8d5ff; }
  .game-wrapper .cosmic-wrap .c-quiz-opt.selected { background: rgba(168,85,247,.2); border-color: #a855f7; color: #e8d5ff; }
  .game-wrapper .cosmic-wrap .reading-text { font-size: 14px; line-height: 1.9; color: #dcc8f8; font-style: italic; min-height: 50px; }
  .saju-reading-sections { display: flex; flex-direction: column; gap: 16px; }
  .saju-section { border-top: 1px solid rgba(192,132,252,0.2); padding-top: 12px; }
  .saju-section:first-child { border-top: none; padding-top: 0; }
  .saju-section-title { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #c084fc; margin-bottom: 6px; }
  .saju-section-body { font-size: 13px; line-height: 1.75; color: #dcc8f8; margin: 0; }
  .game-wrapper .cosmic-wrap .pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
  .game-wrapper .cosmic-wrap .pillar-card { border-radius: 12px; padding: 12px 6px; text-align: center; border: 1px solid; }
  .game-wrapper .cosmic-wrap .gender-btn {
    flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px 4px; cursor: pointer; color: #9b7cc0;
    font-size: 11px; font-family: monospace; transition: all .2s;
  }
  .game-wrapper .cosmic-wrap .gender-btn.active { background: rgba(168,85,247,.2); border-color: #a855f7; color: #e8d5ff; }
  .game-wrapper .cosmic-wrap .progress-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
  .game-wrapper .cosmic-wrap .dot { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); }
  .game-wrapper .cosmic-wrap .dot.active { background: #a855f7; }
  .game-wrapper .cosmic-wrap .ball-badge {
    display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: 10px;
    font-family: monospace; letter-spacing: 1px; margin-left: 6px; vertical-align: middle; border: 1px solid;
  }
  @keyframes ballShake {
    0%  {transform:translate(0,0) rotate(0deg)}
    10% {transform:translate(-14px,-4px) rotate(-10deg)}
    20% {transform:translate(14px,4px) rotate(10deg)}
    30% {transform:translate(-12px,8px) rotate(-8deg)}
    40% {transform:translate(12px,-8px) rotate(8deg)}
    50% {transform:translate(-10px,4px) rotate(-6deg)}
    60% {transform:translate(10px,-4px) rotate(6deg)}
    70% {transform:translate(-8px,2px) rotate(-4deg)}
    80% {transform:translate(8px,-2px) rotate(4deg)}
    90% {transform:translate(-4px,1px) rotate(-2deg)}
    100%{transform:translate(0,0) rotate(0deg)}
  }
  @keyframes ballFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
  @keyframes cosmicFadeIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
  @keyframes slideUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px) scale(.92); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .shaking { animation: ballShake .18s ease-in-out infinite; }
  .floating-ball { animation: ballFloat 3.5s ease-in-out infinite; }
  .spinning { animation: spin 2s linear infinite; display: inline-block; }
  .cosmic-fade-in { animation: cosmicFadeIn .5s ease forwards; }
  .cosmic-slide-up { animation: slideUp .4s ease forwards; }

  @media(max-width:420px) {
    .game-wrapper .cosmic-wrap .pillar-grid { grid-template-columns: repeat(2,1fr); }
  }
  @media(max-width:380px) {
    .game-wrapper .cosmic-wrap .bday-row { grid-template-columns: 1fr 1fr; }
  }

  .confirm-popup {
    display: none; position: fixed; inset: 0;
    z-index: var(--z-system); align-items: center; justify-content: center;
    background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  }
  .confirm-popup.show { display: flex; }
  .confirm-box {
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 28px 24px; max-width: 320px; width: 90%;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }
  .confirm-box h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
  .confirm-box p  { font-size: .82rem; color: var(--muted); margin-bottom: 20px; font-family:'Space Mono',monospace; }
  .confirm-box p.confirm-bet-warning {
    font-size: .68rem;
    color: var(--danger, #ff6b6b);
    margin-top: -12px;
    margin-bottom: 16px;
    font-weight: 700;
  }
  .confirm-box-btns { display: flex; gap: 10px; }
  .confirm-box-btns button { flex:1; padding:10px; min-height:44px; border-radius:8px; font-family:'Syne',sans-serif; font-weight:700; font-size:.75rem; cursor:pointer; transition:all .15s; }
  .confirm-yes { background:transparent; border:2px solid var(--danger); color:var(--danger); }
  .confirm-yes:hover { background:rgba(255,107,107,.12); }
  .confirm-no  { background:transparent; border:2px solid var(--accent); color:var(--accent); }
  .confirm-no:hover  { background:rgba(168,255,120,.1); }

#game-fruit-game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #13131f;
  color: #e8e8f0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overflow: visible;
  min-height: 500px;
  position: relative;
}
#game-kings-game.game-wrapper  { overflow: visible; }
#game-truth-game.game-wrapper  { overflow: visible; }

#game-fruit-game .so-howto, #game-whack-game .so-howto { box-sizing: border-box !important; width: calc(100% - 40px) !important; max-width: 460px !important; margin: 0 auto !important; padding: 12px 16px !important; flex-shrink: 0 !important; }
#game-fruit-game .so-howto li, #game-whack-game .so-howto li { padding-left: 0 !important; }
#game-fruit-game .so-howto li::before, #game-whack-game .so-howto li::before { content: none !important; }
#game-fruit-game .stats-bar, #game-whack-game .stats-bar { display: flex; align-items: center; justify-content: space-around; padding: 10px 16px 8px; background: rgba(0,0,0,0.55); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#game-fruit-game .stat, #game-whack-game .stat { text-align: center; flex: 1; }
#game-fruit-game .stat-label, #game-whack-game .stat-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-family: 'Space Mono', monospace; }
#game-fruit-game .stat-val, #game-whack-game .stat-val { font-size: 1.15rem; font-weight: 800; font-family: 'Space Mono', monospace; }
#game-fruit-game .ctrl-emoji, #game-whack-game .ctrl-emoji { font-size: 1.6rem; }
#game-fruit-game .ctrl-title, #game-whack-game .ctrl-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; color: var(--accent); font-family: 'Space Mono', monospace; }
#game-fruit-game .how-box, #game-whack-game .how-box { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; width: 100%; max-width: 300px; text-align: left; }
#game-fruit-game .how-label, #game-whack-game .how-label { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
#game-fruit-game .how-list, #game-whack-game .how-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
#game-fruit-game .how-list li, #game-whack-game .how-list li { font-size: 0.78rem; color: var(--text); }
#game-fruit-game .opt-section, #game-whack-game .opt-section { width: 100%; max-width: 300px; text-align: center; }
#game-fruit-game .opt-label, #game-whack-game .opt-label { font-size: 0.72rem; color: var(--muted); font-family: 'Space Mono', monospace; margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
#game-fruit-game .opt-row, #game-whack-game .opt-row { display: flex; gap: 8px; justify-content: center; }
#game-fruit-game .mode-btn, #game-whack-game .mode-btn { flex: 1; padding: 5px 10px; background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; font-family: 'Space Mono', monospace; font-size: 0.72rem; cursor: pointer; transition: all 0.18s; text-align: center; }
#game-fruit-game .mode-btn.active, #game-whack-game .mode-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(168,255,120,0.07); }
#game-fruit-game .start-btn, #game-whack-game .start-btn { padding: 10px 36px; background: transparent; border: 2.5px solid var(--accent); color: var(--accent); font-family: 'Space Mono', monospace; font-size: .82rem; font-weight: 700; border-radius: 10px; cursor: pointer; letter-spacing: 1px; transition: all 0.2s; box-shadow: 0 0 20px rgba(168,255,120,0.2), inset 0 0 20px rgba(168,255,120,0.05); width: 100%; max-width: 260px; }
#game-fruit-game .start-btn:hover, #game-whack-game .start-btn:hover { background: rgba(168,255,120,0.1); box-shadow: 0 0 32px rgba(168,255,120,0.35); transform: scale(1.04); }
#game-fruit-game .cd-sub, #game-whack-game .cd-sub { font-size: 0.82rem; color: var(--muted); font-family: 'Space Mono', monospace; }
#game-fruit-game .msg-overlay, #game-whack-game .msg-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: rgba(14,14,18,0.75); backdrop-filter: blur(4px); z-index: 25; text-align: center; padding: 24px; }
#game-fruit-game .msg-overlay.show, #game-whack-game .msg-overlay.show { display: flex; }
#game-fruit-game .msg-title, #game-whack-game .msg-title { font-size: 1.6rem; font-weight: 800; }
#game-fruit-game .msg-score, #game-whack-game .msg-score { font-size: 2.8rem; font-weight: 900; color: var(--accent); line-height: 1; font-family: 'Space Mono', monospace; }
#game-fruit-game .msg-sub, #game-whack-game .msg-sub { color: var(--muted); font-size: 0.88rem; font-family: 'Space Mono', monospace; }
#game-fruit-game .msg-btn, #game-whack-game .msg-btn { padding: 12px 30px; background: transparent; border: 2px solid var(--accent); color: var(--accent); font-family: 'Space Mono', monospace; font-size: .82rem; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 16px rgba(168,255,120,0.2); }
#game-fruit-game .msg-btn:hover, #game-whack-game .msg-btn:hover { background: rgba(168,255,120,0.1); }
#game-fruit-game .hint-bar, #game-whack-game .hint-bar { flex-shrink: 0; padding: 6px 12px; background: rgba(0,0,0,0.5); border-top: 1px solid var(--border); text-align: center; font-size: 0.66rem; color: var(--muted); font-family: 'Space Mono', monospace; letter-spacing: 0.05em; }

#game-fruit-game * { box-sizing: border-box; margin: 0; padding: 0; }
/* Restore padding zeroed out by the reset above — fixes text overlapping
   the pill border on the Fruit Slash bet button, and prevents the neighboring
   Skins button from collapsing to a tiny size next to the full-size Bet button. */
#game-fruit-game .sg-bet-btn { padding: 9px 22px; }
#game-fruit-game .gu-skin-link-btn { padding: 9px 22px; }
#game-fruit-game #fsg-score-val { color: var(--accent); }
#game-fruit-game #fsg-combo-val { color: var(--accent2); }
#game-fruit-game #fsg-time-val { color: #ffd700; }
#game-fruit-game .game-wrap { position: relative; flex: 1; min-height: 320px; width: 100%; }
#game-fruit-game #fsg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#game-fruit-game #fsg-combo-flash { position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%); font-size: 1.8rem; font-weight: 900; color: #ffd700; pointer-events: none; z-index: 5; opacity: 0; text-shadow: 0 0 20px rgba(255,215,0,0.8); transition: opacity 0.15s; font-family: 'Space Mono', monospace; }
#game-fruit-game #fsg-combo-flash.show { opacity: 1; transition: opacity 0s; }
#game-fruit-game #fs-controls.hidden { display: none; }
#game-fruit-game #fs-countdown { position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(10,10,15,0.82); backdrop-filter: blur(6px); z-index: 20; }
#game-fruit-game #fs-countdown.hidden { display: none; }
#game-fruit-game #fs-cd-num { font-size: 5rem; font-weight: 800; font-family: 'Space Mono', monospace;
    color: var(--accent); text-shadow: 0 0 40px rgba(168,255,120,0.7);
    animation: countPulse 0.9s ease-in-out; }
@keyframes countPulse {
0%   { transform: scale(1.4); opacity: 0.3; }
    40%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

#game-whack-game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #0a1a0a;
  color: #e8e8f0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overflow: visible;
  min-height: 500px;
  position: relative;
}
#game-whack-game.game-wrapper { overflow: visible; }

#game-whack-game * { box-sizing: border-box; margin: 0; padding: 0; }
/* Restore padding zeroed out by the reset above — fixes text overlapping
   the pill border on the Whack-A-Mole bet button, and prevents the neighboring
   Skins button from collapsing to a tiny size next to the full-size Bet button. */
#game-whack-game .sg-bet-btn { padding: 9px 22px; }
#game-whack-game .gu-skin-link-btn { padding: 9px 22px; }
#game-whack-game #wam-score-val { color: var(--accent); }
#game-whack-game #wam-lives-val { color: var(--danger); font-size: 0.9rem; }
#game-whack-game #wam-time-val { color: #ffd700; }
#game-whack-game .game-wrap { flex: 1; min-height: 320px; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%, #0a2a0a 0%, #061006 100%); }
/* Skin-specific overrides for .game-wrap — this inner element (not the
   outer #game-whack-game wrapper) is what's actually visible behind the
   grid/canvas, and previously had no skin-aware background at all, so the
   default dark-green radial gradient showed regardless of which skin was
   active. */
#game-whack-game.skin-space-invaders .game-wrap { background: radial-gradient(ellipse at 50% 60%, #16324a 0%, #0a1c2c 100%); }
#game-whack-game.skin-deep-sea .game-wrap { background: radial-gradient(ellipse at 50% 60%, #0c2840 0%, #051220 100%); }
#game-whack-game #wam-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(8px,2.5vw,14px); padding: clamp(10px,3vw,18px); width: 100%; max-width: min(380px,100%); }
#game-whack-game .hole { position: relative; aspect-ratio: 1; background: radial-gradient(ellipse at 50% 70%,#1a3a0a 0%,#0a1a06 60%,#050e04 100%); border-radius: 50%; border: 3px solid #2d5a1a; box-shadow: inset 0 6px 18px rgba(0,0,0,0.7),0 2px 8px rgba(0,0,0,0.4); overflow: hidden; transition: border-color 0.15s; -webkit-tap-highlight-color: transparent; }
  #game-whack-game .hole { cursor: pointer; }
  @media (hover: hover) { #game-whack-game .hole { cursor: pointer; } }
#game-whack-game .hole:active { transform: scale(0.95); }
#game-whack-game .hole.whacked { border-color: var(--accent); }
#game-whack-game .mole { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); font-size: clamp(1.8rem,8vw,2.8rem); line-height: 1; transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; }
#game-whack-game .mole.up { transform: translateX(-50%) translateY(15%); }
#game-whack-game .mole.gold { filter: drop-shadow(0 0 8px #ffd700); }
#game-whack-game .hole.hit-effect { animation: hitFlash 0.25s ease-out; }
@keyframes hitFlash {
0%{background:rgba(168,255,120,0.4)} 100%{}
}
#game-whack-game .hole.gold-hit-effect { animation: goldFlash 0.4s ease-out; border-color:#ffd700 !important; }
@keyframes goldFlash {
0%{background:rgba(255,215,0,0.7);transform:scale(1.08)} 60%{background:rgba(255,215,0,0.3)} 100%{}
}
#game-whack-game .hole.miss-effect { animation: missFlash 0.3s ease-out; }
@keyframes missFlash {
0%{background:rgba(255,107,107,0.5)} 100%{}
}
#game-whack-game #wam-score-pop { position: absolute; z-index: 20; pointer-events: none; font-size: 1.3rem; font-weight: 900; opacity: 0; transition: none; font-family: 'Space Mono', monospace; }
#game-whack-game #wam-controls.hidden { display: none; }
#game-whack-game #wam-countdown { position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(10,10,15,0.82); backdrop-filter: blur(6px); z-index: 20; }
#game-whack-game #wam-countdown.hidden { display: none; }
#game-whack-game #wam-cd-num { font-size: 5rem; font-weight: 800; font-family: 'Space Mono', monospace;
    color: var(--accent); text-shadow: 0 0 40px rgba(168,255,120,0.7);
    animation: countPulse 0.9s ease-in-out; }
  .game-wrapper .couples-wrap {
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .game-wrapper .couples-wrap .c-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:10px; }
  .game-wrapper .couples-wrap .c-btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:10px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:500;transition:all 0.2s; }
  .game-wrapper .couples-wrap .c-btn-primary { background:linear-gradient(135deg,#e8456a,#c02050);color:#fff; }
  .game-wrapper .couples-wrap .c-btn-primary:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,69,106,0.4); }
  .game-wrapper .couples-wrap .c-btn-secondary { background:rgba(232,69,106,0.12);color:#f07a90; }
  .game-wrapper .couples-wrap .c-btn-secondary:hover { background:rgba(232,69,106,0.2); }
  .game-wrapper .couples-wrap .c-btn-outline { background:transparent;border:1.5px solid #e8456a;color:#e8456a; }
  .game-wrapper .couples-wrap .c-btn-outline:hover { background:rgba(232,69,106,0.1); }
  .game-wrapper .couples-wrap .c-btn-gold { background:linear-gradient(135deg,#ffd700,#b8880a);color:#1a1a22; }
  .game-wrapper .couples-wrap .c-score-board { display:flex;gap:10px;margin-bottom:16px; }
  .game-wrapper .couples-wrap .c-score-item { flex:1;background:rgba(232,69,106,0.1);border-radius:12px;padding:12px;text-align:center; }
  .game-wrapper .couples-wrap .c-score-label { font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px; }
  .game-wrapper .couples-wrap .c-score-value { font-family:'Playfair Display',serif;font-size:1.7rem;color:#f472b6;font-weight:700; }
  .game-wrapper .couples-wrap .c-result { background:linear-gradient(135deg,#e8456a,#c02050);color:#fff;border-radius:12px;padding:14px 18px;text-align:center;margin:14px 0;font-size:1rem;font-weight:500; }
  .game-wrapper .couples-wrap .c-input { width:100%;padding:10px 14px;border-radius:10px;border:1.5px solid var(--border);background:rgba(255,255,255,0.05);font-family:'DM Sans',sans-serif;font-size:max(16px,1em);color:var(--text);outline:none;transition:border-color 0.2s; }
  .game-wrapper .couples-wrap .c-input:focus { border-color:#e8456a; }
  .game-wrapper .couples-wrap .c-input-label { font-size:0.8rem;color:var(--muted);margin-bottom:5px;display:block; }
  .game-wrapper .couples-wrap .ttt-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:16px auto; }
  .game-wrapper .couples-wrap .ttt-cell { aspect-ratio:1;background:rgba(255,255,255,0.04);border-radius:12px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;transition:all 0.2s;touch-action:manipulation; }
  .game-wrapper .couples-wrap .ttt-cell:hover:not(.taken) { border-color:#e8456a;background:rgba(232,69,106,0.1); }
  .game-wrapper .couples-wrap .ttt-cell.taken { cursor:default; }
  .game-wrapper .couples-wrap .ttt-cell.x { color:#f07a90; }
  .game-wrapper .couples-wrap .ttt-cell.o { color:#ffd700; }
  .game-wrapper .couples-wrap .ttt-cell.win { background:rgba(232,69,106,0.15);border-color:#e8456a;animation:ttt-pulse 0.5s ease; }
  @keyframes ttt-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
  .game-wrapper .couples-wrap .ynm-card { background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid var(--border);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px; }
  .game-wrapper .couples-wrap .ynm-q { flex:1;font-size:0.75rem;line-height:1.4; }
  .game-wrapper .couples-wrap .ynm-btns { display:flex;gap:5px;flex-shrink:0; }
  .game-wrapper .couples-wrap .ynm-btn { padding:4px 8px;border-radius:7px;border:1.5px solid;font-size:0.72rem;cursor:pointer;font-weight:500;transition:all 0.15s;background:transparent;min-height:44px;min-width:44px; }
  .game-wrapper .couples-wrap .ynm-btn.yes { border-color:#22c55e;color:#22c55e; }
  .game-wrapper .couples-wrap .ynm-btn.yes.sel,.game-wrapper .couples-wrap .ynm-btn.yes:hover { background:#22c55e;color:#fff; }
  .game-wrapper .couples-wrap .ynm-btn.no { border-color:#ef4444;color:#ef4444; }
  .game-wrapper .couples-wrap .ynm-btn.no.sel,.game-wrapper .couples-wrap .ynm-btn.no:hover { background:#ef4444;color:#fff; }
  .game-wrapper .couples-wrap .ynm-btn.maybe { border-color:#ffd700;color:#ffd700; }
  .game-wrapper .couples-wrap .ynm-btn.maybe.sel,.game-wrapper .couples-wrap .ynm-btn.maybe:hover { background:#ffd700;color:#000; }
  .game-wrapper .couples-wrap .bucket-item { display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:6px;transition:all 0.2s; }
  .game-wrapper .couples-wrap .bucket-item.done { border-color:#22c55e;background:rgba(34,197,94,0.08); }
  .game-wrapper .couples-wrap .bucket-check { width:20px;height:20px;border-radius:50%;border:2px solid #e8456a;cursor:pointer;flex-shrink:0;transition:all 0.2s;display:flex;align-items:center;justify-content:center;color:transparent; }
  .game-wrapper .couples-wrap .bucket-item.done .bucket-check { background:#22c55e;border-color:#22c55e;color:#fff; }
  .game-wrapper .couples-wrap .bucket-text { flex:1;font-size:0.86rem; }
  .game-wrapper .couples-wrap .bucket-del { background:none;border:none;color:#444;cursor:pointer;font-size:1rem;transition:color 0.2s; }
  .game-wrapper .couples-wrap .bucket-del:hover { color:var(--danger); }
  .game-wrapper .couples-wrap .q-card { background:linear-gradient(135deg,rgba(232,69,106,0.08),rgba(244,114,182,0.05));border:1.5px solid rgba(232,69,106,0.2);border-radius:18px;padding:28px;text-align:center;margin:14px 0;min-height:140px;display:flex;align-items:center;justify-content:center; }
  .game-wrapper .couples-wrap .q-card p { font-family:'Playfair Display',serif;font-size:1.1rem;color:#f472b6;line-height:1.5;font-style:italic; }
  .game-wrapper .couples-wrap .story-display { background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;min-height:120px;line-height:1.8;font-size:0.92rem;color:var(--text);font-family:'Playfair Display',serif;font-style:italic; }
  .game-wrapper .couples-wrap .story-display span.new-bit { color:#f07a90; }
  .game-wrapper .couples-wrap .story-cat-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px; }
  .game-wrapper .couples-wrap .story-cat-btn { background:rgba(255,255,255,0.04);border:1.5px solid var(--border);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:all 0.2s; }
  .game-wrapper .couples-wrap .story-cat-btn:hover,.game-wrapper .couples-wrap .story-cat-btn.active { border-color:#e8456a;background:rgba(232,69,106,0.1); }
  .game-wrapper .couples-wrap .story-cat-btn .cat-icon-s { font-size:1.3rem;display:block;margin-bottom:3px; }
  .game-wrapper .couples-wrap .story-cat-btn .cat-name-s { font-size:0.75rem;font-weight:500;color:#f472b6; }
  @media(max-width:420px) { .game-wrapper .couples-wrap .story-cat-grid { grid-template-columns:repeat(2,1fr); } }


  .kings-card {
    position: relative;
    width: 220px;
    height: 310px;
    margin: 16px auto 12px;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #ddd;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    overflow: hidden;
    color: #111;
    touch-action: manipulation;
  }
  .kings-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.22);
  }
  .kings-card:active { transform: scale(0.97); }
  .kings-card::before, .kings-card::after {
    content: attr(data-pip);
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #111;
  }
  .kings-card::before { top: 14px; left: 16px; }
  .kings-card::after  { bottom: 14px; right: 16px; transform: rotate(180deg); }
  .kings-card-rank {
    font-family: 'Space Mono', monospace;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: #111;
  }
  .kings-card-suit {
    font-size: 3.4rem;
    line-height: 1;
    color: #111;
  }
  .kings-card.flip {
    animation: kingsFlip 0.35s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes kingsFlip {
    0%   { transform: rotateY(-90deg) scale(0.85); opacity: 0; }
    60%  { transform: rotateY(6deg)   scale(1.03); opacity: 1; }
    100% { transform: rotateY(0deg)   scale(1);    opacity: 1; }
  }
  .kings-rule-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
  }
  @media (max-width: 400px) {
    .kings-card { width: 180px; height: 260px; }
    .kings-card-rank { font-size: 3.2rem; }
    .kings-card-suit { font-size: 2.8rem; }
  }

  .qcard {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px 16px;
    margin: 0 auto 12px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .qcard.party { border-color: rgba(255,120,196,0.3); background: rgba(255,120,196,0.04); }
  .qcard-cat {
    font-family: 'Space Mono', monospace;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pink);
    font-weight: 700;
  }
  .qcard-text { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.45; }
  .qcard-hint { font-family: 'Space Mono', monospace; font-size: .65rem; color: var(--muted); margin-top: 2px; }
  @keyframes qcardReveal {
    0%   { transform: rotateY(-70deg) scale(0.9); opacity: 0; }
    60%  { transform: rotateY(5deg)   scale(1.02); opacity: 1; }
    100% { transform: rotateY(0deg)   scale(1);    opacity: 1; }
  }
  .qcard.reveal { animation: qcardReveal .3s cubic-bezier(.34,1.56,.64,1); }

  .player-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; min-height: 28px; }
  .player-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(255,120,196,0.1); border: 1px solid rgba(255,120,196,0.3);
    font-size: .75rem; color: var(--pink); font-family: 'Space Mono', monospace;
  }
  .ptdel { cursor: pointer; color: rgba(255,120,196,0.6); font-size: 1rem; line-height: 1; transition: color .15s; }
  .ptdel:hover { color: var(--danger); }

  .cat-tabs { display: flex; gap: 6px; padding: 0 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; flex-wrap: wrap; }
  .cat-tab {
    flex: 1; padding: 7px 10px;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
    color: var(--muted); font-family: 'Space Mono', monospace; font-size: .68rem;
    cursor: pointer; transition: all .15s; text-align: center; white-space: nowrap;
  }
  .cat-tab:hover { border-color: var(--pink); color: var(--pink); }
  .cat-tab.active { border-color: var(--pink); color: var(--pink); background: rgba(255,120,196,0.08); font-weight: 700; }

  .pf-fingers-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }

  .quiz-shell { width:100%; display:flex; flex-direction:column; }
  .quiz-progress-bar { width:100%; height:3px; background:var(--border); }
  .quiz-progress-fill { height:3px; background:linear-gradient(90deg,var(--pink),var(--purple)); transition:width .5s cubic-bezier(.4,0,.2,1); }
  .quiz-body { padding:12px 14px 12px; }
  .quiz-q-num { font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--pink); font-family:'Space Mono',monospace; margin-bottom:8px; }
  .quiz-question { font-size:.82rem; font-weight:700; line-height:1.5; margin-bottom:12px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(168,255,120,.4); text-align:left; }
  .quiz-options { display:flex; flex-direction:column; gap:6px; }
  .quiz-opt { padding:8px 11px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.45; transition:all .18s cubic-bezier(.4,0,.2,1); text-align:left; touch-action:manipulation; }
  .quiz-opt:hover { border-color:var(--pink); background:rgba(255,120,196,.07); }
  .quiz-opt.selected { border-color:var(--pink); background:rgba(255,120,196,.13); }
  .quiz-opt.locked { pointer-events:none; }
  .quiz-nav { display:flex; gap:8px; margin-top:16px; }
  .quiz-btn { flex:1; padding:8px 14px; border-radius:9px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700; cursor:pointer; transition:all .18s; min-height:44px; }
  .quiz-btn.primary { border-color:var(--pink); color:var(--pink); box-shadow:0 0 18px rgba(255,120,196,.12); }
  .quiz-btn.primary:hover { background:rgba(255,120,196,.1); }
  .quiz-btn:disabled { opacity:.35; pointer-events:none; }

  .result-card { padding:22px 18px 20px; text-align:center; animation: qcardReveal .4s cubic-bezier(.34,1.56,.64,1); }
  .result-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; font-family:'Space Mono',monospace; margin-bottom:12px; }
  .result-emoji { font-size:3.2rem; margin-bottom:10px; display:block; }
  .result-name { font-size:1.6rem; font-weight:800; letter-spacing:-1px; margin-bottom:4px; }
  .result-tagline { font-size:.82rem; color:var(--muted); font-family:'Space Mono',monospace; margin-bottom:16px; }
  .result-bars { width:100%; margin:0 0 14px; display:flex; flex-direction:column; gap:7px; }
  .result-bar-row { display:flex; align-items:center; gap:10px; }
  .result-bar-label { font-size:.65rem; font-family:'Space Mono',monospace; color:var(--muted); width:72px; text-align:right; flex-shrink:0; }
  .result-bar-track { flex:1; height:8px; background:var(--border); border-radius:20px; overflow:hidden; }
  .result-bar-fill { height:8px; border-radius:20px; transition:width 1s cubic-bezier(.4,0,.2,1); }
  .result-bar-pct { font-size:.65rem; font-family:'Space Mono',monospace; color:var(--muted); width:32px; flex-shrink:0; }
  .result-traits { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px 0; }
  .result-trait { padding:3px 10px; border-radius:20px; font-size:.65rem; font-family:'Space Mono',monospace; border:1px solid rgba(255,120,196,.3); background:rgba(255,120,196,.07); color:var(--pink); }
  .result-desc { font-size:.8rem; color:var(--muted); font-family:'Space Mono',monospace; line-height:1.75; text-align:left; margin:14px 0; padding:14px; background:var(--surface); border-radius:10px; border:1px solid var(--border); }
  .result-drink-rule { margin-top:12px; padding:12px 14px; border-radius:10px; background:linear-gradient(135deg,rgba(255,107,107,.08),rgba(255,120,196,.05)); border:1px solid rgba(255,107,107,.25); font-size:.78rem; font-family:'Space Mono',monospace; color:var(--text); line-height:1.7; text-align:left; }
  .result-drink-label { font-size:.6rem; color:var(--danger); text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }

  .pt-container{width:100%;padding:20px 20px 28px}
  .pt-progress-bar{width:100%;height:4px;background:var(--border);border-radius:2px;margin-bottom:20px;overflow:hidden}
  .pt-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease}
  .pt-question-num{font-size:.7rem;font-family:'Space Mono',monospace;color:var(--muted);margin-bottom:8px}
  .pt-question{font-size:.75rem;font-weight:700;line-height:1.5;margin-bottom:20px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(168,255,120,.4)}
  .pt-likert{display:flex;gap:6px;justify-content:space-between;margin-bottom:8px}
  .pt-likert-btn{flex:1;padding:6px 4px;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;text-align:center;font-family:'Space Mono',monospace;font-size:.62rem;color:var(--muted);min-height:30px}
  .pt-likert-btn:hover{border-color:var(--accent);color:var(--accent)}.pt-likert-btn.selected{border-color:var(--accent);background:rgba(168,255,120,.12);color:var(--accent)}
  .pt-likert-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:16px}
  .pt-nav{display:flex;gap:10px;margin-top:20px}
  .pt-intro{width:100%;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center}
  .pt-intro-inner{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:0}
  .pt-intro-emoji{font-size:3rem;margin-bottom:12px;display:block}
  .pt-intro-title{font-size:1.15rem;font-weight:800;margin-bottom:8px;display:block;color:var(--text);letter-spacing:-.3px}
  .pt-intro-desc{font-size:.8rem;color:var(--muted);line-height:1.7;font-family:'Space Mono',monospace;margin-bottom:18px}
  .pt-intro-meta{display:flex;gap:12px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
  .pt-meta-item{font-size:.68rem;font-family:'Space Mono',monospace;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:4px 10px}.pt-meta-item span{color:var(--accent);font-weight:700}
  .pt-badge{background:rgba(168,255,120,.08);border:1px solid rgba(168,255,120,.2);color:var(--accent);font-size:.72rem;padding:4px 10px;border-radius:20px;font-family:'Space Mono',monospace}
  .pt-intro-start{width:100%;padding:13px;border-radius:10px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-family:'Syne',sans-serif;font-size:.68rem;font-weight:800;cursor:pointer;transition:all .2s;letter-spacing:.5px;box-shadow:0 0 20px rgba(168,255,120,.15),inset 0 0 20px rgba(168,255,120,.04)}
  .pt-intro-start.locked{opacity:0.35;cursor:not-allowed;pointer-events:none}
  /* MBTI Deep */
  .mbti-progress-bar{width:100%;height:4px;background:var(--border);border-radius:2px;margin:0 0 16px;overflow:hidden}
  .mbti-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease}
  .mbti-question-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:16px;margin:0 14px 14px}
  .mbti-question-text{font-size:.85rem;font-weight:700;line-height:1.5;margin-bottom:12px;color:var(--text)}
  .mbti-scale{width:100%}
  .mbti-scale-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:6px}
  .mbti-scale-btn{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;padding:6px 4px;min-height:30px;font-size:.62rem;transition:all .15s;-webkit-tap-highlight-color:transparent}
  .mbti-scale-btn:hover{border-color:var(--accent);color:var(--accent)}
  .mbti-scale-btn.selected-a{border-color:var(--accent);background:rgba(168,255,120,.15);color:var(--accent)}
  .mbti-scale-btn.selected-b{border-color:var(--accent2);background:rgba(120,255,214,.15);color:var(--accent2)}
  .mbti-result-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:24px 20px;margin:14px;text-align:center}
  .mbti-type-badge{font-size:2.2rem;font-weight:900;font-family:'Syne',sans-serif;color:var(--accent);letter-spacing:4px;margin-bottom:6px}
  .mbti-type-name{font-size:1rem;font-weight:800;margin-bottom:4px;color:var(--text)}
  .mbti-type-tagline{font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:16px}
  .mbti-traits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px}
  .mbti-strengths{font-size:.78rem;color:var(--muted);line-height:1.75;text-align:left;font-family:'Space Mono',monospace}
  .pt-btn{flex:1;padding:12px;border-radius:8px;font-family:'Syne',sans-serif;font-weight:700;font-size:.68rem;cursor:pointer;transition:all .15s;border:1.5px solid var(--border);background:var(--surface);color:var(--text);min-height:44px}
  .pt-btn:hover{border-color:var(--accent);color:var(--accent)}.pt-btn.primary{border-color:#4ade80;color:#4ade80;box-shadow:0 0 14px rgba(74,222,128,.15)}.pt-btn.primary:hover{background:rgba(74,222,128,.1)}.pt-btn:disabled{opacity:.35;cursor:default}
  .pt-btn.back-btn{border-color:var(--text);color:var(--text)}.pt-btn.back-btn:hover{background:rgba(255,255,255,.08)}
  .pt-result-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:12px}
  .pt-result-trait{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .pt-result-trait-name{font-size:.88rem;font-weight:700}.pt-result-trait-score{font-size:.88rem;font-family:'Space Mono',monospace;color:var(--accent)}
  .pt-result-bar-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
  .pt-result-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s ease}
  .pt-result-desc{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:8px}
  .pt-result-type-badge{display:inline-block;font-size:1.4rem;font-weight:800;font-family:'Space Mono',monospace;letter-spacing:3px;padding:10px 20px;border-radius:10px;background:rgba(168,255,120,.1);border:2px solid var(--accent);color:var(--accent);margin-bottom:16px}
  .pt-result-headline{font-size:.78rem;font-weight:800;margin-bottom:6px}

  .ll-intro{width:100%;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center}
  .ll-intro-inner{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:center}
  .ll-intro-emoji{font-size:3rem;margin-bottom:12px;display:block}
  .ll-intro-title{font-size:1.15rem;font-weight:800;margin-bottom:8px;display:block;color:var(--text);letter-spacing:-.3px}
  .ll-intro-desc{font-size:.8rem;color:var(--muted);line-height:1.65;font-family:'Space Mono',monospace;margin-bottom:18px;max-width:460px}
  .ll-prog-bar{height:3px;background:var(--border);border-radius:2px;margin:0 14px 0;overflow:hidden}
  .ll-prog-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--accent));border-radius:2px;transition:width .4s ease;width:0%}
  .ll-q-wrap{padding:20px 18px 8px}
  .ll-q-num{font-size:.68rem;font-family:'Space Mono',monospace;color:var(--muted);margin-bottom:8px}
  .ll-q-stem{font-size:.75rem;font-weight:700;line-height:1.5;margin-bottom:14px;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,120,196,.4)}
  .ll-opts{display:flex;flex-direction:column;gap:9px}
  .ll-opt{padding:13px 15px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;font-family:'Syne',sans-serif;font-size:.72rem;font-weight:600;text-align:left;cursor:pointer;transition:all .18s;color:var(--text);line-height:1.45}
  .ll-opt:hover{border-color:var(--pink);color:var(--pink);background:rgba(255,120,196,.06)}.ll-opt.ll-selected{border-color:var(--pink);background:rgba(255,120,196,.1);color:var(--pink)}
  .ll-next-wrap{padding:12px 18px 18px;width:100%}
  .ll-next-btn{width:100%;padding:13px;background:transparent;border:2px solid var(--pink);color:var(--pink);font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;border-radius:10px;cursor:pointer;transition:all .2s;display:none}
  .ll-next-btn:hover{background:rgba(255,120,196,.1)}.ll-next-btn.ll-show{display:block}
  .ll-result-wrap{padding:24px 18px 28px}
  .ll-result-eyebrow{font-size:.65rem;font-family:'Space Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
  .ll-result-name{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--pink),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px;line-height:1.2}
  .ll-result-desc{font-size:.82rem;color:var(--muted);line-height:1.7;font-family:'Space Mono',monospace;margin-bottom:20px}
  .ll-score-bars{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
  .ll-score-row{display:flex;align-items:center;gap:10px}
  .ll-score-label{font-size:.72rem;font-family:'Space Mono',monospace;color:var(--muted);min-width:150px}
  .ll-bar-track{flex:1;height:4px;background:var(--border);border-radius:2px}
  .ll-bar-fill{height:100%;border-radius:2px;background:var(--muted);transition:width 1.1s cubic-bezier(.22,1,.36,1);width:0%}
  .ll-bar-fill.top{background:linear-gradient(90deg,var(--pink),var(--accent))}
  .ll-score-num{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--muted);min-width:20px;text-align:right}

  .fun-panel, .game-wrapper {
    box-sizing: border-box;
    width: 100%;
  }
  .fun-row, .section-label, .quiz-option-row, .cat-grid, .quiz-q-list,
  #qz-create, #qz-play, #qz-results {
    box-sizing: border-box;
    max-width: 100%;
  }
  .quiz-input, .fun-input, .social-next-btn {
    box-sizing: border-box;
  }
  .cat-grid, .cmp-cards-wrap {
    width: 100%;
    box-sizing: border-box;
  }
  #game-play-view > .game-wrapper,
  #game-play-view > [id^="game-"] {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
  body > .game-wrapper {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  #game-tic-game, #game-yes-game, #game-bucket-game, #game-couples-questions-game, #game-love-story-game {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #game-daily-game, #game-magic-game {
    position: relative;
    min-height: 380px;
  }

  #game-truthopoly-game {
    background: #0d0d1a;
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-image: radial-gradient(ellipse at 20% 20%, rgba(124,58,237,0.08) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 80%, rgba(236,72,153,0.08) 0%, transparent 60%);
  }
  #game-truthopoly-game .tp-panels-row {
    display: flex;
    gap: 8px;
    margin: 12px 12px 0;
    align-items: stretch;
  }
  #game-truthopoly-game .tp-directions {
    background: rgba(30,5,70,0.6);
    border: 1px solid rgba(6,182,212,0.3);
    border-radius: 10px;
    padding: 11px 14px;
    flex: 1;
    position: relative;
  }
  #game-truthopoly-game .tp-directions h2 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 7px;
    padding-right: 20px;
  }
  #game-truthopoly-game .tp-setup-panel {
    flex: 1;
    background: rgba(30,5,70,0.4);
    border: 1px solid #1e1e4a;
    border-radius: 10px;
    padding: 12px 14px;
  }
  #game-truthopoly-game .tp-setup-panel h2 {
    font-size: 0.75rem;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  #game-truthopoly-game .tp-players-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  #game-truthopoly-game .tp-player-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 5px 10px 5px 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all .2s;
    user-select: none;
  }
  #game-truthopoly-game .tp-player-chip.active { border-color: #06b6d4; background: rgba(6,182,212,0.15); }
  #game-truthopoly-game .tp-player-chip .dot { width: 10px; height: 10px; border-radius: 50%; }
  #game-truthopoly-game .tp-setup-row { display: flex; gap: 8px; align-items: center; }
  #game-truthopoly-game .tp-setup-row label { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
  #game-truthopoly-game .tp-setup-row input[type=number] {
    width: 56px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    font-size: max(16px, 1em);
    padding: 5px 8px;
    text-align: center;
  }
  #game-truthopoly-game .tp-setup-row input[type=number]:focus { outline: none; border-color: #06b6d4; }
  #game-truthopoly-game .tp-game-area { padding: 8px 4px; position: relative; }
  #game-truthopoly-game .tp-board-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 420px;
  }
  #game-truthopoly-game .tp-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: 100%;
    height: 100%;
    border: 2px solid #1e1e4a;
    border-radius: 8px;
    overflow: hidden;
    background: #11112b;
  }
  #game-truthopoly-game .tp-cell {
    border: 1px solid rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    text-align: center;
    padding: 2px 1px;
    position: relative;
    cursor: default;
    overflow: hidden;
    transition: background .15s;
  }
  #game-truthopoly-game .tp-cell .cell-icon { font-size: 0.8125rem; line-height: 1; margin-bottom: 1px; }
  #game-truthopoly-game .tp-cell .cell-name { font-size: 0.4375rem; line-height: 1.1; color: var(--muted); word-break: break-word; }
  #game-truthopoly-game .tp-cell .cell-label {
    font-size: 0.375rem; margin-top: 1px; padding: 1px 3px; border-radius: 3px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    display: none;
  }
  #game-truthopoly-game .tp-cell.type-start  { background: rgba(16,185,129,0.15); }
  #game-truthopoly-game .tp-cell.type-jail   { background: rgba(239,68,68,0.15); }
  #game-truthopoly-game .tp-cell.type-free   { background: rgba(59,130,246,0.15); }
  #game-truthopoly-game .tp-cell.type-chance { background: rgba(139,92,246,0.15); }
  #game-truthopoly-game .tp-cell.type-truth  { background: rgba(6,182,212,0.15); }
  #game-truthopoly-game .tp-cell.type-dare   { background: rgba(236,72,153,0.2); }
  #game-truthopoly-game .tp-cell.type-travel { background: rgba(59,130,246,0.1); }
  #game-truthopoly-game .tp-cell.type-city   { background: rgba(255,255,255,0.03); }
  #game-truthopoly-game .tp-cell.type-empty  { background: transparent; cursor: default; }
  #game-truthopoly-game .tp-cell .color-bar  { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
  #game-truthopoly-game .tp-board-center {
    grid-column: 2 / 10; grid-row: 2 / 10;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 8px;
    background: rgba(0,0,0,0.3); position: relative;
  }
  #game-truthopoly-game .tp-center-title {
    font-size: 1rem; font-weight: 800; color: #fff; text-align: center;
    letter-spacing: 1px; line-height: 1.3;
    text-shadow: 0 0 12px rgba(124,58,237,0.7);
  }
  #game-truthopoly-game .tp-center-title small {
    display: block; font-size: 0.625rem; font-weight: 400;
    color: var(--muted); letter-spacing: 0.5px; margin-top: 2px;
  }
  #game-truthopoly-game .tp-start-btn {
    border: 2px solid #10b981; border-radius: 50%;
    width: 88px; height: 88px;
    background: rgba(16,185,129,0.1); color: #10b981;
    font-size: 0.8125rem; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; transition: all .2s;
    text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 0 16px rgba(16,185,129,0.25), inset 0 0 12px rgba(16,185,129,0.05);
    animation: tp-pulse-green 2.5s ease-in-out infinite;
  }
  #game-truthopoly-game .tp-start-btn:hover,
  #game-truthopoly-game .tp-start-btn:active {
    background: rgba(16,185,129,0.25);
    box-shadow: 0 0 28px rgba(16,185,129,0.5), inset 0 0 16px rgba(16,185,129,0.1);
    transform: scale(1.06);
  }
  #game-truthopoly-game .tp-start-btn .btn-dice { font-size: 1.125rem; }
  @keyframes tp-pulse-green {
    0%,100% { box-shadow: 0 0 16px rgba(16,185,129,0.25), inset 0 0 12px rgba(16,185,129,0.05); }
    50%      { box-shadow: 0 0 28px rgba(16,185,129,0.5), inset 0 0 16px rgba(16,185,129,0.1); }
  }
  #game-truthopoly-game .tp-turn-info { text-align: center; font-size: 0.8125rem; color: var(--text); line-height: 1.6; }
  #game-truthopoly-game .tp-turn-info .current-player { font-size: 1.125rem; font-weight: 700; color: #fff; }
  #game-truthopoly-game .tp-dice-result { font-size: 3.75rem; line-height: 1; }
  #game-truthopoly-game .tp-cell-price { font-size: 0.375rem; color: var(--orange); font-weight: 700; margin-top: 1px; line-height: 1; }
  @media (min-width: 400px) { #game-truthopoly-game .tp-cell-price { font-size: 0.4375rem; } }
  #game-truthopoly-game .tp-log-money-row { display: flex; gap: 8px; margin: 0 12px 8px; }
  #game-truthopoly-game .tp-log-area {
    flex: 3; background: rgba(0,0,0,0.3);
    border: 1px solid #1e1e4a; border-radius: 10px; overflow: hidden; min-width: 0;
  }
  #game-truthopoly-game .tp-money-board {
    flex: 2; background: rgba(30,5,70,0.4);
    border: 1px solid #1e1e4a; border-radius: 10px; overflow: hidden; min-width: 0;
  }
  #game-truthopoly-game .tp-money-board-header {
    padding: 7px 10px; background: rgba(30,5,70,0.5);
    font-size: 0.6875rem; font-weight: 700; color: #ec4899;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  #game-truthopoly-game .tp-money-board-entries { padding: 6px 8px; }
  #game-truthopoly-game .tp-money-entry {
    display: flex; align-items: center; gap: 5px; padding: 3px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.05); font-size: 0.6875rem;
  }
  #game-truthopoly-game .tp-money-entry:last-child { border-bottom: none; }
  #game-truthopoly-game .tp-money-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  #game-truthopoly-game .tp-money-name { flex: 1; color: var(--muted); font-size: 0.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game-truthopoly-game .tp-money-amount { font-weight: 700; color: #ec4899; font-size: 0.75rem; white-space: nowrap; }
  #game-truthopoly-game .tp-log-header {
    padding: 7px 12px; background: rgba(30,5,70,0.5);
    font-size: 0.6875rem; font-weight: 700; color: #06b6d4;
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; justify-content: space-between; align-items: center;
  }
  #game-truthopoly-game .tp-log-header button {
    font-size: 0.625rem; background: none; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px; color: var(--muted); padding: 2px 7px; cursor: pointer;
  }
  #game-truthopoly-game .tp-log-entries { max-height: 130px; overflow-y: auto; padding: 6px 0; }
  #game-truthopoly-game .tp-log-entries::-webkit-scrollbar { width: 3px; }
  #game-truthopoly-game .tp-log-entries::-webkit-scrollbar-thumb { background: #1e1e4a; border-radius: 2px; }
  #game-truthopoly-game .tp-log-entry {
    padding: 4px 12px; font-size: 0.6875rem; color: var(--muted);
    border-bottom: 0.5px solid rgba(255,255,255,0.05);
    display: flex; gap: 6px; align-items: flex-start;
  }
  #game-truthopoly-game .tp-log-entry .le-icon { flex-shrink: 0; font-size: 0.8125rem; }
  #game-truthopoly-game .tp-log-entry .le-text { line-height: 1.4; }
  #game-truthopoly-game .tp-log-entry .le-text strong { color: #fff; }
  #game-truthopoly-game .tp-log-entry.highlight { background: rgba(124,58,237,0.1); }
  #game-truthopoly-game .tp-game-complete-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88);
    z-index: var(--z-roll-result); align-items: center; justify-content: center; padding: 20px;
  }
  #game-truthopoly-game .tp-game-complete-backdrop.open { display: flex; }
  #game-truthopoly-game .tp-game-complete-card {
    background: linear-gradient(135deg, #0d0d1a 0%, #1e0546 100%);
    border: 2px solid #ec4899; border-radius: 20px; width: 100%; max-width: 340px;
    padding: 28px 22px 22px; text-align: center;
    animation: tp-pop-in .3s ease-out; box-shadow: 0 0 40px rgba(236,72,153,0.3);
  }
  #game-truthopoly-game .gc-crown { font-size: 3.25rem; margin-bottom: 4px; }
  #game-truthopoly-game .gc-title { font-size: 1.375rem; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: 1px; }
  #game-truthopoly-game .gc-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 16px; }
  #game-truthopoly-game .gc-winner-name { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
  #game-truthopoly-game .gc-winner-amount { font-size: 1.75rem; font-weight: 900; color: #ec4899; margin-bottom: 16px; }
  #game-truthopoly-game .gc-standings { width: 100%; margin-bottom: 18px; }
  #game-truthopoly-game .gc-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 6px; margin-bottom: 3px; font-size: 0.8125rem;
  }
  #game-truthopoly-game .gc-row.winner-row { background: rgba(236,72,153,0.15); border: 1px solid rgba(236,72,153,0.4); }
  #game-truthopoly-game .gc-rank { font-weight: 700; color: var(--muted); width: 18px; text-align: left; }
  #game-truthopoly-game .gc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  #game-truthopoly-game .gc-pname { flex: 1; color: #fff; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game-truthopoly-game .gc-amount { color: #ec4899; font-weight: 700; }
  #game-truthopoly-game .gc-btn {
    background: #ec4899; color: #fff; border: none; border-radius: 10px;
    padding: 12px 28px; font-size: 0.875rem; font-weight: 800; cursor: pointer;
    width: 100%; letter-spacing: 0.5px; transition: opacity .15s;
  }
  #game-truthopoly-game .gc-btn:hover { opacity: 0.85; }
  @keyframes tp-dice-shake {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-18deg) scale(1.15); }
    30%  { transform: rotate(14deg) scale(0.95); }
    45%  { transform: rotate(-10deg) scale(1.1); }
    60%  { transform: rotate(8deg) scale(1.05); }
    75%  { transform: rotate(-5deg) scale(1); }
    90%  { transform: rotate(3deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
  }
  @keyframes tp-pop-number {
    0%   { transform: scale(0) translateY(10px); opacity: 0; }
    60%  { transform: scale(1.3) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }
  @keyframes tp-pop-in {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  #game-truthopoly-game .tp-dice-rolling {
    animation: tp-dice-shake 0.35s ease-in-out infinite; display: inline-block;
  }
  #game-truthopoly-game .tp-dice-result-number {
    font-size: 2.75rem; font-weight: 800; color: #06b6d4;
    animation: tp-pop-number 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    display: inline-block; margin-top: 2px;
  }
  #game-truthopoly-game .tp-dice-faces {
    font-size: 4.125rem; line-height: 1; min-height: 80px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  #game-truthopoly-game .tp-name-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
  #game-truthopoly-game .tp-name-input-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  #game-truthopoly-game .tp-name-input-field {
    flex: 1; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
    color: #fff; font-size: max(16px, 1em); padding: 4px 8px;
  }
  #game-truthopoly-game .tp-name-input-field::placeholder { color: rgba(255,255,255,0.3); }
  #game-truthopoly-game .tp-name-input-field:focus { outline: none; border-color: #06b6d4; }
  #game-truthopoly-game .tp-roll-result-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: var(--z-game-modal); align-items: center; justify-content: center; padding: 20px;
  }
  #game-truthopoly-game .tp-roll-result-backdrop.open { display: flex; }
  #game-truthopoly-game .tp-roll-result-card {
    background: #0d0d1a; border: 2px solid #06b6d4; border-radius: 16px;
    width: 100%; max-width: 300px; padding: 22px 20px 18px;
    text-align: center; animation: tp-pop-in .25s ease-out;
  }
  #game-truthopoly-game .rr-player { font-size: 0.8125rem; color: var(--muted); margin-bottom: 6px; }
  #game-truthopoly-game .rr-player strong { color: #fff; }
  #game-truthopoly-game .rr-dice { font-size: 3.25rem; letter-spacing: 6px; line-height: 1; margin: 10px 0; }
  #game-truthopoly-game .rr-total { font-size: 1.75rem; font-weight: 800; color: #06b6d4; margin-bottom: 4px; }
  #game-truthopoly-game .rr-land { font-size: 0.8125rem; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
  #game-truthopoly-game .rr-land strong { color: #fff; }
  #game-truthopoly-game .rr-btn {
    background: #06b6d4; color: #000; border: none; border-radius: 10px;
    padding: 10px 28px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    width: 100%; transition: opacity .15s; min-height: 44px;
  }
  #game-truthopoly-game .rr-btn:hover { opacity: 0.85; }
  #game-truthopoly-game .tp-modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
    z-index: 100; align-items: center; justify-content: center; padding: 20px;
  }
  #game-truthopoly-game .tp-modal-backdrop.open { display: flex; }
  #game-truthopoly-game .tp-modal-card {
    background: #0d0d1a; border: 2px solid #7c3aed; border-radius: 16px;
    width: 100%; max-width: 340px; padding: 24px 20px; text-align: center;
    animation: tp-pop-in .2s ease-out;
  }
  #game-truthopoly-game .tp-modal-card .mc-icon { font-size: 3rem; margin-bottom: 12px; }
  #game-truthopoly-game .tp-modal-card .mc-title { font-size: 1.125rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
  #game-truthopoly-game .tp-modal-card .mc-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 16px; }
  #game-truthopoly-game .tp-modal-card .mc-desc {
    font-size: 0.875rem; color: var(--text); background: rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px; line-height: 1.6; margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  #game-truthopoly-game .tp-modal-card button {
    background: #7c3aed; color: #fff; border: none; border-radius: 10px;
    padding: 12px 32px; font-size: 0.875rem; font-weight: 700; cursor: pointer;
    transition: all .2s; width: 100%;
  }
  #game-truthopoly-game .tp-modal-card button:hover { background: #6d28d9; }
  #game-truthopoly-game .tp-legend { margin: 0 12px 8px; display: flex; flex-wrap: wrap; gap: 5px; }
  #game-truthopoly-game .tp-legend-item {
    display: flex; align-items: center; gap: 4px; font-size: 0.625rem; color: var(--muted);
    background: rgba(255,255,255,0.05); border-radius: 4px; padding: 3px 7px;
  }
  #game-truthopoly-game .tp-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  @media (min-width: 400px) {
    #game-truthopoly-game .tp-cell { font-size: 0.5625rem; }
    #game-truthopoly-game .tp-cell .cell-icon { font-size: 0.8125rem; }
    #game-truthopoly-game .tp-cell .cell-name { font-size: 0.4375rem; }
    #game-truthopoly-game .tp-cell .cell-label { font-size: 0.375rem; }
    #game-truthopoly-game .tp-start-btn { width: 96px; height: 96px; font-size: 0.875rem; }
    #game-truthopoly-game .tp-center-title { font-size: 1.125rem; }
  }
  #game-truthopoly-game .tp-start-overlay {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:12px; background:rgba(8,4,24,.95);
    backdrop-filter:blur(6px); z-index:50; padding:24px 16px; overflow-y:auto;
  }
  #game-truthopoly-game .tp-start-overlay.hidden { display:none; }
  #game-truthopoly-game .so-icon { font-size:2.2rem; line-height:1; }
  #game-truthopoly-game .so-name { font-size:1.15rem; font-weight:800; letter-spacing:1px; color:#06b6d4; }
  #game-truthopoly-game .so-howto {
    background:rgba(30,5,70,0.5); border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:12px 14px; width:100%; max-width:300px; text-align:left;
  }
  #game-truthopoly-game .so-howto-label { font-size:.722rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:7px; font-weight:700; }
  #game-truthopoly-game .so-howto ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
  #game-truthopoly-game .so-howto li { font-size:.6rem; opacity:.8; padding-left:11px; position:relative; line-height:1.4; }
  #game-truthopoly-game .so-howto li::before { content:'·'; position:absolute; left:0; color:#06b6d4; font-weight:700; }
  #game-truthopoly-game .so-setup-panel {
    width:100%; max-width:300px; background:rgba(30,5,70,0.5);
    border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px;
  }
  #game-truthopoly-game .so-setup-panel h2 { font-size:11px; color:#06b6d4; text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:10px; }
  #game-truthopoly-game .so-setup-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  #game-truthopoly-game .so-setup-row label { font-size:12px; opacity:.65; white-space:nowrap; }
  #game-truthopoly-game .so-setup-row input[type=number] {
    width:58px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
    border-radius:6px; color:#fff; font-size:max(16px,1em); padding:5px 8px; text-align:center;
  }
  #game-truthopoly-game .so-setup-row input[type=number]:focus { outline:none; border-color:#06b6d4; }
  #game-truthopoly-game .so-start-btn {
    padding:12px 0; background:transparent; border:2px solid #06b6d4; color:#06b6d4;
    font-size:1rem; font-weight:800; border-radius:12px; cursor:pointer; letter-spacing:1.5px;
    transition:all .2s; box-shadow:0 0 18px rgba(6,182,212,.15); width:100%; max-width:300px;
  }
  #game-truthopoly-game .so-start-btn:hover { background:rgba(6,182,212,.15); box-shadow:0 0 32px rgba(6,182,212,.35); transform:scale(1.03); }

  @keyframes ftFingerBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.88); }
  }


/* -- Secondary style block -- */

  .ss-confirm-bar {
    z-index: var(--z-confirm-bar);
  }

  #switch-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(4px);
    z-index: var(--z-always-on-top);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  #switch-popup.show { display: flex; }
  #switch-popup .sp-box {
    background: var(--surface, #16161e);
    border: 1.5px solid var(--border, #2a2a3a);
    border-radius: 18px;
    padding: 28px 24px;
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  #switch-popup .sp-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text, #e8e8f0);
    margin-bottom: 8px;
  }
  #switch-popup .sp-msg {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted, #666680);
    margin-bottom: 22px;
    line-height: 1.5;
  }
  #switch-popup .sp-btns {
    display: flex;
    gap: 10px;
  }
  #switch-popup .sp-cancel {
    flex: 1;
    padding: 11px;
    background: var(--card, #1e1e2a);
    border: 1.5px solid var(--border, #2a2a3a);
    border-radius: 10px;
    color: var(--text, #e8e8f0);
    font-family: 'Syne', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  #switch-popup .sp-cancel:hover { border-color: var(--muted, #666680); }
  #switch-popup .sp-confirm {
    flex: 1;
    padding: 11px;
    background: linear-gradient(135deg, var(--accent, #a8ff78), var(--accent2, #78ffd6));
    border: none;
    border-radius: 10px;
    color: #0e0e12;
    font-family: 'Syne', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  #switch-popup .sp-confirm:hover { opacity: 0.88; }

  /* ── Info modals: About / Privacy / ToS ── */
  /* ===== Language selector popup =====
     Mirrors the About/Privacy/ToS modal treatment. The grid is four columns on
     every screen size, per spec: with five languages that is 4 + 1, and with
     eight it becomes a clean 4 x 2. Option text shrinks on narrow screens
     rather than the column count changing, so the layout stays identical on
     phone and desktop. */
  .lang-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 1200;
  }
  .lang-modal-backdrop.open { display: block; }

  .lang-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1201;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .lang-modal.open { display: flex; }

  .lang-modal-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* The search field IS the header. It is never auto-focused on open, so the
     mobile keyboard stays down until the field is actually tapped. */
  .lang-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .lang-modal-search {
    flex: 1;
    min-width: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .lang-modal-search::placeholder { color: var(--muted); }
  .lang-modal-search:focus { border-color: var(--accent); }
  .lang-modal-close {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .lang-modal-close:hover { color: var(--text); border-color: var(--muted); }

  .lang-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 14px 16px 18px;
  }
  .lang-modal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .lang-modal-grid .sg-lang-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 46px;
    padding: 8px 4px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
  }
  .lang-modal-grid .sg-lang-option:hover {
    border-color: var(--accent);
    background: rgba(255,255,255,0.05);
  }
  .lang-modal-grid .sg-lang-option:active { transform: scale(0.96); }
  /* Selected language keeps the same highlight colour it had in the old
     dropdown list. */
  .lang-modal-grid .sg-lang-option.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255,255,255,0.06);
  }
  .lang-modal-no-results {
    text-align: center;
    padding: 18px 8px 6px;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--muted);
  }

  /* Narrow phones keep four columns and shrink the label instead. */
  @media (max-width: 420px) {
    .lang-modal-grid { gap: 6px; }
    .lang-modal-grid .sg-lang-option {
      font-size: 0.58rem;
      min-height: 44px;
      padding: 6px 2px;
      border-radius: 10px;
    }
  }
  @media (max-width: 340px) {
    .lang-modal-grid .sg-lang-option { font-size: 0.52rem; }
  }

  .info-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(5px);
    z-index: 1200;
  }
  .info-modal-backdrop.open { display: block; }

  .info-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1201;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .info-modal.open { display: flex; }

  .info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .info-modal-title {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
  }
  .info-modal-close {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .info-modal-close:hover { color: var(--text); border-color: var(--muted); }

  /* The card that actually contains the content */
  .info-modal > div:not(.info-modal-header):not(.info-modal-body) {
    /* wrapper handled below via inner structure */
  }
  .info-modal.open > .info-modal-inner {
    display: flex;
  }

  /* Re-structure: the modal card wraps header + scrollable body */
  .info-modal-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .info-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 18px 20px 24px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    line-height: 1.7;
  }
  .info-modal-body h3 {
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin: 14px 0 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .info-modal-body p { margin: 0 0 8px; }
  .info-modal-body ul { margin: 0 0 8px; padding-left: 18px; }
  .info-modal-body li { margin-bottom: 4px; }
  .info-modal-url {
    font-size: 0.58rem;
    color: var(--accent);
    margin-bottom: 10px !important;
    letter-spacing: 0.06em;
  }

/* ─── Global Skin — GU page section ─────────────────────────────────────────── */
  .gu-body-inner {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    padding: 20px 20px 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  /* Grid and flex children default to min-width:auto and refuse to shrink
     below their content width, which forced the columns past their tracks and
     produced the horizontal scrollbar on mobile. */
  .gu-body-inner > *,
  .gu-section,
  .gu-skin-row,
  .gu-skin-preview {
    min-width: 0;
  }
  .gu-body {
    overflow-x: hidden;
  }
  .gu-body-inner > #gu-anchor-global-skin {
    grid-column: 1 / -1;
  }
  .gu-body-inner > .gu-divider {
    grid-column: 1 / -1;
    margin: 8px 0 2px;
  }
  .gu-body-inner > .gu-divider:first-child {
    margin-top: 0;
  }
  .gu-section {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
  }
  .gu-section-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 0.7rem; color: var(--text); margin-bottom: 4px; }
  .gu-section-title-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .gu-section-title-link:hover { color: var(--accent); }
  .gu-section-desc { font-family: 'Space Mono', monospace; font-size: 0.51rem; color: var(--muted); margin-bottom: 8px; }

  @media (max-width: 560px) {
    .gu-body-inner {
      /* Two tracks at a 360px viewport left roughly 165px each, too narrow for
         a three-swatch preview row plus its unlock button. */
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      padding: 14px 10px 50px;
    }
    .gu-skin-row {
      flex-wrap: wrap;
    }
    .gu-section {
      padding: 8px;
    }
    .gu-section-title {
      font-size: 0.62rem;
    }
    .gu-section-desc {
      font-size: 0.46rem;
      margin-bottom: 6px;
    }
    .gu-skin-name {
      font-size: 0.5rem;
    }
    .gu-skin-preview {
      font-size: 0.44rem;
    }
    .gu-skin-preview [style*="width:34px"] {
      width: 26px !important;
      height: 26px !important;
      font-size: 15px !important;
    }
    .gu-skin-preview [style*="font-size:9px"] {
      font-size: 6.5px !important;
    }
    .gu-body-inner .gu-content-unlock-btn,
    .gu-body-inner .gu-forever-unlock-btn,
    .gu-body-inner .gu-skin-unlock-btn,
    .gu-body-inner .gu-skin-link-btn {
      font-size: 0.6rem !important;
      padding: 7px 12px !important;
    }
  }

  .gu-skin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .gu-skin-row:first-of-type { border-top: none; padding-top: 6px; }
  .gu-skin-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .gu-skin-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.56rem;
    color: var(--text);
  }
  .gu-skin-preview {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    color: var(--muted);
    display: block;
    white-space: normal;
  }
  .gu-skin-preview .gu-skin-arrow { color: var(--accent); font-weight: 700; }
  .gu-skin-unlock-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.15s;
  }
  .gu-skin-unlock-btn:hover { opacity: 0.85; }
  .gu-skin-unlock-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .gu-content-unlock-btn {
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.15s;
  }
  .gu-content-unlock-btn:hover { opacity: 0.85; }
  .gu-content-unlock-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Owned state shown inside a game's own start overlay. The button keeps
     its pill shape but drops the gold purchase gradient for a calm green
     confirmation, because at this point it is a statement of what the
     player already owns rather than something to press. Full opacity is
     forced back on so the :disabled rule above does not fade the text the
     player is meant to read. */
  .gu-content-unlock-btn.gu-content-unlocked-label,
  .gu-content-unlock-btn.gu-content-unlocked-label:disabled {
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.45);
    color: #4ade80;
    opacity: 1;
    cursor: default;
    font-weight: 600;
  }
  .gu-content-unlock-btn.gu-content-unlocked-label:hover { opacity: 1; }

  /* Forever-unlock button (Phase D.6) — was referenced in script-head.js
     with no matching CSS rule anywhere in this file; styled here to match
     the gold-pill pattern used by .gu-content-unlock-btn / .gu-skin-unlock-btn. */
  .gu-forever-unlock-btn {
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.15s;
  }
  .gu-forever-unlock-btn:hover { opacity: 0.85; }
  .gu-forever-unlock-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Unlocked-state label (Phase D.5 + D.6) — shown in place of the button
     once a content pack or forever unlock is owned. Also had no CSS rule. */
  .gu-unlocked-label {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
  }

  /* Start-overlay content-unlock buttons — sized to match each game's Start
     button width (reuses the existing max-width:260px pattern already used
     elsewhere in this stylesheet, e.g. #game-fruit-game .start-btn). */
  #questions-start .start-btn,
  #questions-start .gu-content-unlock-btn,
  #ls-start-overlay .start-btn,
  #ls-start-overlay .gu-content-unlock-btn,
  #cmp-start .start-btn,
  #cmp-start .gu-content-unlock-btn,
  #convo-start .start-btn,
  #convo-start .gu-content-unlock-btn,
  #saju-start .start-btn,
  #saju-start .gu-content-unlock-btn,
  #mbti-combined-start .start-btn,
  #mbti-combined-start .gu-content-unlock-btn,
  #party-start .start-btn,
  #party-start .gu-content-unlock-btn,
  #lovelang-start .pt-intro-start,
  #lovelang-start .gu-content-unlock-btn {
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
  }
  .gu-skin-toggle {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    background: transparent;
    color: var(--muted);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .gu-skin-toggle.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
  }

  .sg-bet-skin-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }


  .sg-skin-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .sg-skin-pill {
    flex: 1 1 calc(33% - 8px);
    min-width: 80px;
    padding: 8px 6px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 0.72rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, transform 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sg-skin-pill[data-theme="SnowKush"] {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 55%, #1a1a1a 100%) !important;
    color: #000 !important;
    border-color: rgba(200,200,200,0.85) !important;
    box-shadow: 0 0 5px rgba(200,200,200,0.5);
  }
  .sg-skin-pill[data-theme="Inferno"] {
    background: linear-gradient(135deg, #ff2e2e 0%, #cc1414 65%, #000000 100%) !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.9) !important;
    box-shadow: 0 0 5px rgba(255,46,46,0.55);
  }
  .sg-skin-pill[data-theme="AquaDiesel"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #2563eb 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    border-color: rgba(37,99,235,0.9) !important;
    box-shadow: 0 0 5px rgba(34,197,94,0.5);
  }
  .sg-skin-pill[data-theme="Sour O"] {
    background: linear-gradient(135deg, #ff9d1f 0%, #ff8c00 65%, #000000 100%) !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.9) !important;
    box-shadow: 0 0 5px rgba(255,140,0,0.55);
  }
  .sg-skin-pill[data-theme="NorthernLights"] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 65%, #ffffff 100%) !important;
    color: #fff !important;
    border-color: rgba(29,78,216,0.9) !important;
    box-shadow: 0 0 5px rgba(37,99,235,0.55);
  }
  .sg-skin-pill[data-theme="Candy"] {
    background: linear-gradient(135deg, #ffd1ec 0%, #ff6ec7 50%, #be185d 100%) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    border-color: rgba(190,24,93,0.9) !important;
    box-shadow: 0 0 5px rgba(255,110,199,0.5);
  }
  .sg-skin-pill[data-theme="GoldOG"] {
    background: linear-gradient(135deg, #fff3b0 0%, #ffd700 45%, #0a0a0a 100%) !important;
    color: #1a1a1a !important;
    border-color: rgba(184,148,0,0.9) !important;
    box-shadow: 0 0 6px rgba(255,215,0,0.55);
  }
  .sg-skin-pill[data-theme="TwinWidow"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 65%, #000000 100%) !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.7) !important;
    box-shadow: 0 0 6px rgba(107,114,128,0.45);
  }
  .sg-skin-pill[data-theme="PurpDaddy"] {
    background: linear-gradient(135deg, #7c3aed 0%, #ffffff 60%, #ffffff 100%) !important;
    color: #4c1d95 !important;
    text-shadow: none;
    border-color: rgba(76,29,149,0.9) !important;
    box-shadow: 0 0 6px rgba(124,58,237,0.55);
  }
  .sg-skin-pill-active {
    border-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4) !important;
  }
  .sg-skin-unlock-row {
    margin-top: 12px;
  }
  .sg-skin-unlock-btn {
    display: block;
    width: 100%;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.15s;
  }
  .sg-skin-unlock-btn:hover { opacity: 0.85; }
  .sg-skin-unlock-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─────────────────────────────────────────────────────────────────────────────── */

/* ─── Footer pills ───────────────────────────────────────────────────────────── */
  .sg-footer-pills {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 32px;
    padding: 0 8px 24px 8px;
  }
  .sg-footer-pill {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1.5px solid #3a3a4a;
    background: transparent;
    color: var(--muted);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    min-width: 68px;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sg-footer-pill:hover { border-color: var(--accent); color: var(--accent); }
  .sg-sound-pill { min-width: 36px; padding: 6px 8px; font-size: 0.75rem; }
/* ─────────────────────────────────────────────────────────────────────────────── */

/* ─── Arcade Bet Button ──────────────────────────────────────────────────────── */
  /* Restyled to visually match .gu-content-unlock-btn (gold gradient pill,
     black text). Visual change only — locked/bet-complete/disabled logic
     and class toggling in script-soloarcade.js are untouched. Widened from
     180px to 220px so the "BET COMPLETE. WIN 5 GEMS." state fits without
     wrapping/clipping across all bet buttons, not just Fruit Slash and
     Whack-A-Mole. */
  .sg-bet-btn {
    display: inline-block;
    padding: 9px 22px;
    background: linear-gradient(135deg, #ffd700, #92400e);
    border: none;
    color: #000;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    max-width: 220px;
    text-align: center;
  }
  .sg-bet-btn:hover:not(:disabled):not(.locked) {
    opacity: 0.85;
  }
  .sg-bet-btn:disabled,
  .sg-bet-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
  }
  .sg-bet-btn.bet-complete {
    background: transparent;
    border: 2px solid var(--muted);
    color: var(--muted);
    opacity: 0.7;
    cursor: default;
    font-size: 0.68rem;
    letter-spacing: 0.2px;
  }
  .sg-bet-score-row {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 6px;
    text-align: center;
  }
  .sg-bet-result {
    font-family: 'Space Mono', monospace;
    font-size: 0.80rem;
    font-weight: 700;
    text-align: center;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
  }
  .sg-bet-result.win { color: var(--accent); border: 1.5px solid var(--accent); }
  .sg-bet-result.loss { color: var(--danger,#ff6b6b); border: 1.5px solid var(--danger,#ff6b6b); }
/* ─────────────────────────────────────────────────────────────────────────────── */

/* ─── Per-play overlay squish prevention ─────────────────────────────────────── */
  /* Root cause A: justify-content compression — override for every per-play overlay */
  #ladder-start.start-overlay,
  #love-start.start-overlay,
  #saju-start.start-overlay,
  #kings-start.start-overlay {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 10px;
  }

  /* MBTI deep intro uses a different class pattern */
  #mbti-deep-intro {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 10px;
  }

  /* Match unlock button width to the start button — .gem-unlock-btn has no width by default */
  #mbti-deep-intro .gem-unlock-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* Root cause B: how-to-play box flex-shrink — prevent gem rows from squishing content */
  #ladder-start .so-howto,
  #ladder-start [class*="how-to"],
  #ladder-start .rules-box,
  #love-start .so-howto,
  #love-start [class*="how-to"],
  #love-start .rules-box,
  #saju-start .so-howto,
  #saju-start [class*="how-to"],
  #saju-start .rules-box,
  #kings-start .so-howto,
  #kings-start [class*="how-to"],
  #kings-start .rules-box,
  #mbti-deep-intro .so-howto,
  #mbti-deep-intro [class*="how-to"],
  #mbti-deep-intro .rules-box {
    flex-shrink: 0;
  }

  /* Gem row group — single flex row for gem buttons */
  .gem-row-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  /* Single gem button — matches start button width, compact height */
  .gu-overlay-btn-single {
    flex: 1;
    max-width: var(--gu-start-btn-width, 240px);
    height: var(--gu-start-btn-height, 44px);
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
/* ─────────────────────────────────────────────────────────────────────────────── */

/* ─── Background rework: 4-corner watermarks & wrapper skin effects ──────────
   Corner watermarks are pinned to the .game-wrapper's outer background area
   (all 4 corners), NOT drawn inside the canvas. This removes any risk of a
   watermark sitting on top of active gameplay while giving the wrapper a
   themed "frame" look. Applied per game via .skin-active-1 / .skin-active-2
   classes toggled from the game's own _*ApplySkin() function alongside the
   existing per-game class swap (skin-space-invaders etc), so the whole
   system remains driven by the same window._sgActiveSkins source of truth. */
.game-wrapper.skin-active-1,
.game-wrapper.skin-active-2 {
  isolation: isolate;
}

/* Set 1 (Bright) shared additions per spec — border + subtle opaque overlay
   pass so bright backgrounds don't wash out against a bright page. */
.game-wrapper.skin-active-1 {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.05);
}

/* Set 2 (Dark) shared additions per spec — subtle shine sweep + gradient
   ambient glow. Uses a slow, low-opacity diagonal linear-gradient pass over
   the wrapper so the effect reads as "polished/premium" without distracting
   during gameplay. */
.game-wrapper.skin-active-2 {
  box-shadow: inset 0 0 40px rgba(120,180,255,.06), 0 0 0 1px rgba(120,180,255,.15);
}
.game-wrapper.skin-active-2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
  pointer-events: none;
  animation: sgSkinShineSweep 6s ease-in-out infinite;
  z-index: 0;
  border-radius: inherit;
}
@keyframes sgSkinShineSweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ─── Preview-swatch background animations ───────────────────────────────
   Every swatch's Bg column gets its real in-game base color/gradient
   inline FIRST (never blank), then one of these classes layers a themed,
   moving element on top via ::before/::after. Each motif is designed to
   read clearly as its actual name (fire looks like fire, a fish actually
   swims) even at 34px, using oversized glyphs that bleed past the swatch
   edge (clipped by overflow:hidden on the swatch itself) combined with a
   real glow so the shape survives at this size instead of reading as a
   generic dot. */

@keyframes sgFlicker {
  0%   { transform: translateY(2px) scale(0.9) rotate(-3deg); opacity: .55; }
  25%  { transform: translateY(-1px) scale(1.05) rotate(2deg); opacity: 1; }
  50%  { transform: translateY(1px) scale(0.95) rotate(-2deg); opacity: .75; }
  75%  { transform: translateY(-2px) scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: translateY(2px) scale(0.9) rotate(-3deg); opacity: .55; }
}
@keyframes sgRise {
  0%   { bottom: -20%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: .8; }
  100% { bottom: 100%; opacity: 0; }
}
@keyframes sgSwimRight {
  0%   { left: -30%; transform: scaleX(-1); }
  48%  { transform: scaleX(-1); }
  50%  { left: 60%; transform: scaleX(1); }
  98%  { transform: scaleX(1); }
  100% { left: -30%; transform: scaleX(-1); }
}
@keyframes sgBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes sgTwinkleBig {
  0%, 100% { opacity: .3; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.25) rotate(15deg); }
}
@keyframes sgDriftAcross {
  0%   { left: -25%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
@keyframes sgFall {
  0%   { top: -20%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: .8; }
  100% { top: 100%; opacity: 0; }
}
@keyframes sgFallSpin {
  0%   { top: -20%; transform: rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { top: 110%; transform: rotate(220deg); opacity: .4; }
}
@keyframes sgPulseGlow {
  0%, 100% { opacity: .5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}
@keyframes sgCodeFall {
  0%   { top: -15%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

.sg-preview-anim { position: relative; }
.sg-preview-anim::before,
.sg-preview-anim::after { content: ''; position: absolute; pointer-events: none; }

/* JADE LEAF — Mahjong "Jade Garden" Set 1. Matches the in-game ambient
   animation (_sgStartAmbientAnim particleType:'emoji', chars:['🍃'] in
   games/mahjong-game/script-mahjong-game.js). Two drifting leaves. */
.sg-preview-jadeleaf::before, .sg-preview-jadeleaf::after {
  content: '🍃'; font-size: 12px; opacity: .85;
  filter: drop-shadow(0 0 3px #2e7d32);
  animation: sgFall 2.6s linear infinite;
}
.sg-preview-jadeleaf::before { left: 7px; }
.sg-preview-jadeleaf::after  { left: 21px; font-size: 9px; animation-delay: 1.2s; }

/* LANTERN GLOW — Mahjong "Crimson Palace" Set 2. Matches the in-game
   ambient animation (chars:['🏮']). Slow drifting glowing lanterns. */
.sg-preview-lanternglow::before, .sg-preview-lanternglow::after {
  content: '🏮'; font-size: 12px; opacity: .9;
  filter: drop-shadow(0 0 4px #ff5a5a);
  animation: sgFall 3s linear infinite;
}
.sg-preview-lanternglow::before { left: 7px; }
.sg-preview-lanternglow::after  { left: 21px; font-size: 9px; animation-delay: 1.4s; }

/* NEON GRID STREAK — Maze Chase "Neon Grid" Set 1. Matches the in-game
   ambient animation (particleType:'streak', horizontal:true, cyan glow).
   No emoji in the real effect, so the preview uses a glowing horizontal
   bar sweeping left-to-right instead of drifting emoji. */
.sg-preview-neongridstreak::before, .sg-preview-neongridstreak::after {
  content: ''; height: 2px; width: 14px; top: 40%;
  background: linear-gradient(90deg, transparent, #2ef8ff, transparent);
  box-shadow: 0 0 6px 1px #2ef8ff;
  animation: sgStreak 1.6s linear infinite;
}
.sg-preview-neongridstreak::after { top: 65%; animation-delay: .8s; }

/* SUNSET EMBER — Maze Chase "Sunset Chase" Set 2. Matches the in-game
   ambient animation (chars:['🔥']). Drifting embers. */
.sg-preview-sunsetember::before, .sg-preview-sunsetember::after {
  content: '🔥'; font-size: 12px; opacity: .9;
  filter: drop-shadow(0 0 4px #ff8a3d);
  animation: sgFall 2.2s linear infinite;
}
.sg-preview-sunsetember::before { left: 7px; }
.sg-preview-sunsetember::after  { left: 21px; font-size: 9px; animation-delay: 1s; }

@keyframes sgStreak {
  0%   { transform: translateX(-20px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(40px); opacity: 0; }
}

/* FIRE — Connect 5 Set 1 "Ember vs Ice". Sole remaining user after removing
   duplicate use on Pong "Fire" and Basketball "Blaze" (now Smolder and
   Blaze Streak respectively). Two overlapping flames at different depths/
   speeds/sizes so it reads as a real flickering fire, not one static emoji. */
.sg-preview-fire::before, .sg-preview-fire::after {
  content: '🔥'; font-size: 20px;
  filter: drop-shadow(0 0 6px #ff6a00) drop-shadow(0 0 3px #ffcf40);
}
.sg-preview-fire::before { left: 2px; bottom: -6px; animation: sgFlicker 0.9s ease-in-out infinite; }
.sg-preview-fire::after  { left: 14px; bottom: -8px; font-size: 15px; opacity: .85; animation: sgFlicker 0.7s ease-in-out infinite .3s; }

/* EMBER ICICLES — Basketball "Ember" Set 2. Falling icicles, visually
   distinct shape from Blaze's fire, matching the in-game particle. */
.sg-preview-embermagenta::before, .sg-preview-embermagenta::after {
  content: '🧊'; font-size: 18px;
  filter: drop-shadow(0 0 6px #78c8ff);
}
.sg-preview-embermagenta::before { left: 2px; top: -6px; animation: sgFall 1.2s linear infinite; }
.sg-preview-embermagenta::after  { left: 16px; top: -6px; font-size: 14px; opacity: .85; animation: sgFall 1s linear infinite .4s; }

/* DEEP SEA — WAM Set 2. An actual fish swimming back and forth across the
   swatch, flipping direction, plus a rising bubble trail. */
.sg-preview-deepsea::before {
  content: '🐠'; font-size: 16px; position: absolute; top: 6px;
  animation: sgSwimRight 3.2s linear infinite;
  filter: drop-shadow(0 0 3px #4fd8ff);
}
.sg-preview-deepsea::after {
  content: '🫧'; font-size: 11px; left: 20%; bottom: -10%;
  animation: sgRise 2.4s linear infinite; opacity: .8;
}

/* SPACE INVADERS — WAM Set 1. A UFO drifting sideways with a pulsing
   scan-glow trail underneath. */
.sg-preview-spaceinvader::before {
  content: '🛸'; font-size: 17px; top: 8px;
  animation: sgDriftAcross 2.6s linear infinite;
  filter: drop-shadow(0 0 5px #7ee8ff);
}
.sg-preview-spaceinvader::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #7ee8ff; left: 40%; top: 55%;
  box-shadow: 0 0 8px 2px #7ee8ff;
  animation: sgTwinkleBig 1.1s ease-in-out infinite;
}

/* DESERT HEAT — Snake Set 2. Small cacti drifting across hot sand,
   matching the in-game particle. */
.sg-preview-desertheat::before, .sg-preview-desertheat::after {
  content: '🌵'; font-size: 11px;
  filter: drop-shadow(0 0 6px #ff8c2a);
  animation: sgRise 2.1s ease-in infinite;
}
.sg-preview-desertheat::before { left: 6px; animation-delay: 0s; }
.sg-preview-desertheat::after  { left: 20px; font-size: 9px; animation-delay: 1s; }

/* NEON STREAK — Snake Set 1, Pong Set 1. A bright bolt sweeping across
   with a motion-blur trail. */
.sg-preview-neonstreak::before {
  content: ''; width: 22px; height: 4px; top: 40%; left: -30%;
  background: linear-gradient(90deg, transparent, #39ff88 40%, #baffe0 80%, transparent);
  box-shadow: 0 0 8px 2px #39ff88;
  animation: sgDriftAcross 1.1s linear infinite;
}
.sg-preview-neonstreak::after {
  content: ''; width: 14px; height: 3px; top: 65%; left: -30%;
  background: linear-gradient(90deg, transparent, #39ff88 40%, #baffe0 80%, transparent);
  box-shadow: 0 0 6px 1px #39ff88;
  animation: sgDriftAcross 1.1s linear infinite .5s;
}

/* JUNGLE CANOPY — Connect 5 Set 2. Big drifting leaf tumbling down. */
.sg-preview-jungle::before {
  content: '🍃'; font-size: 17px; top: -10%;
  animation: sgFallSpin 2.6s linear infinite;
  filter: drop-shadow(0 0 3px #2eff8a);
}
.sg-preview-jungle::after {
  content: '🍃'; font-size: 12px; top: -10%; left: 55%;
  animation: sgFallSpin 2.1s linear infinite .8s;
  opacity: .8;
}

/* GOLD RUSH STARS — Dice "Gold Rush" Set 2. Gold star particles,
   matching the in-game star particle. */
.sg-preview-golddust::before, .sg-preview-golddust::after {
  content: '⭐'; font-size: 16px; color: #ffd700;
  filter: drop-shadow(0 0 5px #ffd700);
  animation: sgTwinkleBig 1.3s ease-in-out infinite;
}
.sg-preview-golddust::before { left: 4px; top: 15%; }
.sg-preview-golddust::after  { left: 18px; top: 50%; font-size: 12px; animation-delay: .6s; }

/* FOG WISPS — Chess "Midnight Marble". A dense cloud drifting slowly,
   large enough to actually read as fog, not a faint smudge. */
.sg-preview-fog::before {
  content: '☁️'; font-size: 22px; top: 20%; left: -20%; opacity: .8;
  animation: sgDriftAcross 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(200,210,230,.6));
}

/* NAVY GLINT — Chess Board "Deep Navy". Small cool-blue glints drifting
   slowly across the dark board, distinct from the piece skin's fog cloud. */
.sg-preview-navyglint::before, .sg-preview-navyglint::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: #6496dc; box-shadow: 0 0 7px 2px #6496dc;
  animation: sgPulseGlow 1.6s ease-in-out infinite;
}
.sg-preview-navyglint::before { left: 8px; top: 25%; }
.sg-preview-navyglint::after  { left: 22px; top: 62%; animation-delay: .8s; }

/* CHARCOAL GLINT — Chess Board "Charcoal Marble". Muted silver-gray
   glints, dimmer and slower than Navy Glint to match the neutral tone. */
.sg-preview-charcoalglint::before, .sg-preview-charcoalglint::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: #b4b4b4; box-shadow: 0 0 6px 2px #b4b4b4;
  animation: sgPulseGlow 2.2s ease-in-out infinite;
}
.sg-preview-charcoalglint::before { left: 8px; top: 25%; }
.sg-preview-charcoalglint::after  { left: 22px; top: 62%; animation-delay: 1.1s; }

/* LAVA FLOW — Checkers Set 2. Small volcanic bursts rising from the
   board, matching the in-game particle. */
.sg-preview-lavaorbs::before, .sg-preview-lavaorbs::after {
  content: '🌋'; font-size: 11px;
  filter: drop-shadow(0 0 6px #ff7a45);
  animation: sgRise 2.4s ease-in infinite;
}
.sg-preview-lavaorbs::before { left: 5px; top: 30%; }
.sg-preview-lavaorbs::after  { left: 20px; top: 55%; font-size: 9px; animation-delay: .7s; }

/* SUNSET GLOW — Brick Breaker Set 2. Warm rising glow orbs, big and
   saturated like light through a sunset haze. */
.sg-preview-sunsetglow::before, .sg-preview-sunsetglow::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #ffd8a8 0%, #ff7a45 65%, transparent 100%);
  box-shadow: 0 0 9px 3px #ff7a45;
  animation: sgRise 2.4s ease-in infinite;
}
.sg-preview-sunsetglow::before { left: 6px; animation-delay: 0s; }
.sg-preview-sunsetglow::after  { left: 21px; width: 6px; height: 6px; animation-delay: 1.2s; }

/* SPARKLE STARS — Tetris Set 2 "Starfall". Chunky spinning stars with
   strong glow, matching the in-game star particle. */
.sg-preview-sparklestar::before, .sg-preview-sparklestar::after {
  content: '⭐'; font-size: 15px; color: #ffe066;
  filter: drop-shadow(0 0 5px #ffe066);
  animation: sgTwinkleBig 1.2s ease-in-out infinite;
}
.sg-preview-sparklestar::before { left: 3px; top: 10%; }
.sg-preview-sparklestar::after  { left: 17px; top: 50%; font-size: 11px; animation-delay: .5s; }

/* CLOUDS — Flappy "Bee" Set 1. Fluffy cloud drifting across a bright
   sky. */
.sg-preview-clouddrift::before {
  content: '☁️'; font-size: 20px; top: 15%; left: -25%; opacity: .9;
  animation: sgDriftAcross 3.6s ease-in-out infinite;
}

/* FALLING LEAVES — Flappy "Rocket" Set 2. */
.sg-preview-leaffall::before, .sg-preview-leaffall::after {
  content: '🍂'; font-size: 15px; top: -15%;
  animation: sgFallSpin 2.3s linear infinite;
}
.sg-preview-leaffall::before { left: 15%; }
.sg-preview-leaffall::after  { left: 55%; font-size: 11px; animation-delay: 1s; }

/* CONFETTI — Soccer "Classic" Set 1. Colorful chunky confetti tumbling. */
.sg-preview-confettiburst::before, .sg-preview-confettiburst::after {
  content: ''; width: 6px; height: 9px; top: -15%;
  animation: sgFallSpin 1.7s linear infinite;
}
.sg-preview-confettiburst::before { left: 20%; background: #facc15; box-shadow: 0 0 4px #facc15; }
.sg-preview-confettiburst::after  { left: 60%; background: #ef4444; box-shadow: 0 0 4px #ef4444; animation-delay: .6s; }

/* STADIUM RAIN — Soccer "Gold" Set 2. Thin falling rain streaks under
   stadium lights, matching the in-game rain particle effect. */
.sg-preview-stadiumdust::before, .sg-preview-stadiumdust::after {
  content: ''; width: 2px; height: 12px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, #cfe8ff 70%, #ffffff);
  box-shadow: 0 0 4px 1px #cfe8ff;
  animation: sgFall 0.9s linear infinite;
}
.sg-preview-stadiumdust::before { left: 8px; top: -20%; animation-delay: 0s; }
.sg-preview-stadiumdust::after  { left: 22px; top: -20%; animation-delay: .45s; }

/* TROPICAL PETALS — Fruit Slash "Tropical" Set 1. Bright pink petals
   drifting and spinning. */
.sg-preview-tropicalpetal::before, .sg-preview-tropicalpetal::after {
  content: ''; width: 9px; height: 6px; border-radius: 50%;
  background: radial-gradient(ellipse, #ff9fd0 0%, #ff5fb0 100%);
  box-shadow: 0 0 6px #ff5fb0;
  animation: sgFallSpin 2.4s linear infinite;
}
.sg-preview-tropicalpetal::before { left: 15%; top: -15%; }
.sg-preview-tropicalpetal::after  { left: 55%; top: -15%; width: 6px; height: 4px; animation-delay: 1.1s; }

/* JUICE SPLASH — Fruit Slash "Candy" Set 2. Small teardrop droplets
   bursting upward, matching the in-game splash particle. */
.sg-preview-juicesplash::before, .sg-preview-juicesplash::after {
  content: ''; width: 6px; height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  animation: sgRise 1.6s ease-out infinite;
}
.sg-preview-juicesplash::before { left: 9px; background: #ff5fb0; box-shadow: 0 0 8px #ff5fb0; }
.sg-preview-juicesplash::after  { left: 22px; background: #c77dff; box-shadow: 0 0 8px #c77dff; animation-delay: .7s; }

/* CIRCUIT CIRCLES — Tetris Set 1 "Circuit Circles". Falling neon
   circles, matching the in-game circle particle. */
.sg-preview-circuitpixel::before, .sg-preview-circuitpixel::after {
  content: ''; width: 8px; height: 8px; top: -20%;
  border-radius: 50%;
  background: #38bdf8; box-shadow: 0 0 8px 2px #38bdf8;
  animation: sgFall 1.5s linear infinite;
}
.sg-preview-circuitpixel::before { left: 20%; }
.sg-preview-circuitpixel::after  { left: 60%; background: #67e8f9; box-shadow: 0 0 8px 2px #67e8f9; animation-delay: .6s; }

/* MYSTIC RUNES — Dice "Mystic Runes" Set 1. Glowing purple rune symbol
   spinning slowly, matching the in-game rune particle. */
.sg-preview-mysticrune::before {
  content: '᛭'; font-size: 20px; color: #c9a8ff; left: 30%; top: 8%;
  text-shadow: 0 0 8px #c9a8ff;
  animation: sgTwinkleBig 1.8s ease-in-out infinite;
}
.sg-preview-mysticrune::after {
  content: '☾'; font-size: 13px; color: #a86bff; left: 55%; top: 55%;
  text-shadow: 0 0 6px #a86bff;
  animation: sgTwinkleBig 1.5s ease-in-out infinite .6s;
}

/* MATRIX CODE — Typing "Retro Terminal" Set 1. Falling green code
   characters, big and bright, on the bright base per the real skin. */
.sg-preview-matrixcode::before, .sg-preview-matrixcode::after {
  content: '01'; font-family: monospace; font-weight: 700; font-size: 12px;
  color: #0a8a2e; text-shadow: 0 0 5px #0a8a2e;
  writing-mode: vertical-rl;
  animation: sgCodeFall 1.6s linear infinite;
}
.sg-preview-matrixcode::before { left: 20%; top: -20%; }
.sg-preview-matrixcode::after  { left: 60%; top: -20%; content: '10ア'; animation-delay: .7s; }

/* SNOWFALL ICE — Typing "Ice Rink" Set 2. Big bright snowflakes. */
.sg-preview-snowfallbig::before, .sg-preview-snowfallbig::after {
  content: '❄️'; font-size: 15px; top: -15%;
  filter: drop-shadow(0 0 4px #67e8f9);
  animation: sgFallSpin 2s linear infinite;
}
.sg-preview-snowfallbig::before { left: 20%; }
.sg-preview-snowfallbig::after  { left: 60%; font-size: 11px; animation-delay: 1s; }

/* ROYAL GOLD SHIMMER — Chess "Royal Gold" Set 1. Was duplicated with Dice's
   golddust; now a slow rotating crown-glint sparkle pair, reads as regal
   rather than a generic dust motif. */
.sg-preview-royalshimmer::before, .sg-preview-royalshimmer::after {
  content: '✨'; font-size: 14px;
  filter: drop-shadow(0 0 5px #ffd700);
  animation: sgTwinkleBig 1.6s ease-in-out infinite;
}
.sg-preview-royalshimmer::before { left: 6px; top: 10%; }
.sg-preview-royalshimmer::after  { left: 20px; top: 55%; font-size: 10px; animation-delay: .8s; }

/* GEM SPARKLE — Checkers "Gem Board" Set 1. Was duplicated with Dice/Chess
   golddust; now angular gem-facet glints instead of round dust, distinct
   silhouette from both. */
.sg-preview-gemsparkle::before, .sg-preview-gemsparkle::after {
  content: '💎'; font-size: 13px;
  filter: drop-shadow(0 0 4px #f2b90d);
  animation: sgBob 1.8s ease-in-out infinite;
}
.sg-preview-gemsparkle::before { left: 5px; top: 15%; }
.sg-preview-gemsparkle::after  { left: 19px; top: 50%; font-size: 10px; animation-delay: .6s; }

/* ELECTRIC ARC — Pong "Lightning" Set 1. Was duplicated with Snake's
   neonstreak; now a genuine jagged bolt flash instead of a light streak. */
.sg-preview-electricarc::before, .sg-preview-electricarc::after {
  content: '⚡'; font-size: 16px;
  filter: drop-shadow(0 0 6px #00cfff);
  animation: sgTwinkleBig 0.7s ease-in-out infinite;
}
.sg-preview-electricarc::before { left: 4px; top: 10%; }
.sg-preview-electricarc::after  { left: 18px; top: 50%; font-size: 11px; animation-delay: .35s; }

/* SMOLDER — Pong "Fire" Set 2. Small embers rising, matching the
   in-game fire particle. */
.sg-preview-smolder::before, .sg-preview-smolder::after {
  content: '🔥'; font-size: 11px;
  filter: drop-shadow(0 0 6px #ff4500);
  animation: sgRise 1.7s ease-in infinite;
}
.sg-preview-smolder::before { left: 6px; animation-delay: 0s; }
.sg-preview-smolder::after  { left: 20px; font-size: 9px; animation-delay: .8s; }

/* BLAZE STREAK — Basketball "Blaze" Set 1. Was duplicated with Connect5/Pong
   fire; now a fast horizontal flame-trail behind the ball instead of static
   flame glyphs. */
.sg-preview-blazestreak::before, .sg-preview-blazestreak::after {
  content: '🔥'; font-size: 15px;
  filter: drop-shadow(0 0 5px #f97316);
  animation: sgDriftAcross 1.4s ease-in-out infinite;
}
.sg-preview-blazestreak::before { top: 8%; }
.sg-preview-blazestreak::after  { top: 55%; font-size: 10px; animation-delay: .5s; }

/* PRISM GRID — Brick Breaker "Neon Grid" Set 1. Was duplicated with Tetris's
   sparklestar; now scanning grid-pulse dots instead of star glints. */
.sg-preview-prismgrid::before, .sg-preview-prismgrid::after {
  content: ''; width: 5px; height: 5px;
  background: #00ffff; box-shadow: 0 0 8px 2px #00ffff;
  animation: sgPulseGlow 1.2s ease-in-out infinite;
}
.sg-preview-prismgrid::before { left: 8px; top: 20%; }
.sg-preview-prismgrid::after  { left: 22px; top: 60%; animation-delay: .6s; }

/* MOONLIT DRIFT — Memory "Night Sky" Set 1. Slow drifting stars, calm and
   dim to match a night-sky card-back theme. */
.sg-preview-moonlitdrift::before, .sg-preview-moonlitdrift::after {
  content: '⭐'; font-size: 10px; opacity: .75;
  filter: drop-shadow(0 0 3px #bde0fe);
  animation: sgBob 2.4s ease-in-out infinite;
}
.sg-preview-moonlitdrift::before { left: 6px; top: 15%; }
.sg-preview-moonlitdrift::after  { left: 20px; top: 55%; font-size: 8px; animation-delay: 1.1s; }

/* CANDY POP — Memory "Candy Pop" Set 2. Bouncy candy sparkle pair, brighter
   and quicker than Moonlit Drift to match the playful pink theme. */
.sg-preview-candypop::before, .sg-preview-candypop::after {
  content: '🍬'; font-size: 12px;
  filter: drop-shadow(0 0 4px #d94f9e);
  animation: sgTwinkleBig 1s ease-in-out infinite;
}
.sg-preview-candypop::before { left: 5px; top: 15%; }
.sg-preview-candypop::after  { left: 19px; top: 55%; font-size: 9px; animation-delay: .5s; }

/* CHALK DUST — Brain Teasers "Chalkboard Genius" Set 1. Chalk specks
   drifting and fading like dust knocked off a chalkboard eraser. */
.sg-preview-chalkdust::before, .sg-preview-chalkdust::after {
  content: '✏️'; font-size: 11px; opacity: .8;
  filter: drop-shadow(0 0 2px #ffffff);
  animation: sgFall 2.2s linear infinite;
}
.sg-preview-chalkdust::before { left: 7px; }
.sg-preview-chalkdust::after  { left: 21px; font-size: 8px; animation-delay: 1s; }

/* CIRCUIT SPARK — Brain Teasers "Circuit Mind" Set 2. Now shows drifting
   floppy-disk glyphs to MATCH the actual in-game background animation
   (_sgStartAmbientAnim emoji '💾' in games/brain-teasers/script-brain-teasers.js),
   which previously did not match the cyan pulse-dot preview shown here. */
.sg-preview-circuitspark::before, .sg-preview-circuitspark::after {
  content: '💾'; font-size: 13px; opacity: .9;
  filter: drop-shadow(0 0 4px #00e5ff);
  animation: sgFall 2.4s linear infinite;
}
.sg-preview-circuitspark::before { left: 8px; }
.sg-preview-circuitspark::after  { left: 21px; font-size: 10px; animation-delay: 1.1s; }

/* HEAT SHIMMER — Odd One Out "Desert Mirage" Set 1. Slow, wavering compass
   glint drifting like a heat haze over sand. */
.sg-preview-heatshimmer::before, .sg-preview-heatshimmer::after {
  content: '🧭'; font-size: 10px; opacity: .7;
  filter: drop-shadow(0 0 3px #f5c982);
  animation: sgFlicker 2.6s ease-in-out infinite;
}
.sg-preview-heatshimmer::before { left: 6px; top: 20%; }
.sg-preview-heatshimmer::after  { left: 20px; top: 58%; font-size: 8px; animation-delay: 1.2s; }

/* NOIR SCAN — Odd One Out "Neon Detective" Set 2. A magenta scan-light
   sweeping back and forth like a detective's spotlight. */
.sg-preview-noirscan::before, .sg-preview-noirscan::after {
  content: '🕵️'; font-size: 13px; opacity: .9;
  filter: drop-shadow(0 0 4px #c026d3);
  animation: sgDriftAcross 2.4s ease-in-out infinite;
}
.sg-preview-noirscan::before { top: 10%; }
.sg-preview-noirscan::after  { top: 55%; font-size: 10px; animation-delay: 1.2s; }

/* ARCADE GLOW — Simon Says "Retro Arcade" Set 1. Now shows the joystick
   glyph to MATCH the in-game background animation (ambient '🕹️'), which
   previously showed a hot-pink glow dot that did not match. */
.sg-preview-arcadeglow::before, .sg-preview-arcadeglow::after {
  content: '🕹️'; font-size: 13px; opacity: .9;
  filter: drop-shadow(0 0 4px #ff2ec4);
  animation: sgFlicker 1.1s ease-in-out infinite;
}
.sg-preview-arcadeglow::before { left: 8px; top: 24%; }
.sg-preview-arcadeglow::after  { left: 22px; top: 56%; font-size: 10px; animation-delay: .4s; }

/* AURORA RIPPLE — Simon Says "Aurora Pulse" Set 2. Soft green-teal ripple
   bobbing gently, like northern lights rolling across a pad. */
.sg-preview-auroraripple::before, .sg-preview-auroraripple::after {
  content: '🌈'; font-size: 11px; opacity: .85;
  filter: drop-shadow(0 0 4px #34d399);
  animation: sgBob 2s ease-in-out infinite;
}
.sg-preview-auroraripple::before { left: 6px; top: 20%; }
.sg-preview-auroraripple::after  { left: 20px; top: 58%; font-size: 8px; animation-delay: 1s; }

/* BLIZZARD GUST — Snowball Fight "Blizzard Warfare" Set 1. Fast-falling
   snow cloud particles, blustery and quick. */
.sg-preview-blizzardgust::before, .sg-preview-blizzardgust::after {
  content: '🌨️'; font-size: 11px; opacity: .85;
  filter: drop-shadow(0 0 3px #bfe3fb);
  animation: sgFall 1.5s linear infinite;
}
.sg-preview-blizzardgust::before { left: 7px; }
.sg-preview-blizzardgust::after  { left: 21px; font-size: 8px; animation-delay: .7s; }

/* EMBER TRAIL — Snowball Fight "Molten Coals" Set 2. Falling ember/comet
   streaks with a spin, hot orange glow. */
.sg-preview-embertrail::before, .sg-preview-embertrail::after {
  content: '☄️'; font-size: 12px;
  filter: drop-shadow(0 0 5px #ff5722);
  animation: sgFallSpin 1.8s linear infinite;
}
.sg-preview-embertrail::before { left: 6px; }
.sg-preview-embertrail::after  { left: 20px; font-size: 9px; animation-delay: .9s; }

/* JESTER BOUNCE — The Stupidity Test "Class Clown" Set 1. Bouncy, playful
   twinkle — a clown face bobbing with comic energy. */
.sg-preview-jesterbounce::before, .sg-preview-jesterbounce::after {
  content: '🎪'; font-size: 11px;
  filter: drop-shadow(0 0 3px #e64980);
  animation: sgTwinkleBig 1.3s ease-in-out infinite;
}
.sg-preview-jesterbounce::before { left: 6px; top: 18%; }
.sg-preview-jesterbounce::after  { left: 20px; top: 56%; font-size: 8px; animation-delay: .6s; }

/* ORBIT SWIRL — The Stupidity Test "Galaxy Brain" Set 2. Slow purple orbit
   glow drifting past, like a planet sailing by. */
.sg-preview-orbitswirl::before, .sg-preview-orbitswirl::after {
  content: '🪐'; font-size: 13px; opacity: .9;
  filter: drop-shadow(0 0 4px #8b5cf6);
  animation: sgDriftAcross 3s ease-in-out infinite;
}
.sg-preview-orbitswirl::before { top: 25%; }
.sg-preview-orbitswirl::after  { top: 62%; font-size: 10px; animation-delay: 1.5s; }

/* STARLIT SKY — Daily Horoscope "Starlit Sky" Set 1. Gold stars and a
   crescent moon twinkling against a lifted indigo night. */
.sg-preview-starlitsky::before, .sg-preview-starlitsky::after {
  content: '🌟'; font-size: 11px;
  filter: drop-shadow(0 0 4px #ffd700);
  animation: sgTwinkleBig 1.6s ease-in-out infinite;
}
.sg-preview-starlitsky::before { left: 6px; top: 20%; }
.sg-preview-starlitsky::after  { content: '🌙'; left: 20px; top: 56%; font-size: 10px; animation-delay: .8s; }

/* BLOOD MOON — Daily Horoscope "Blood Moon" Set 2. Slow crimson drops
   falling through near-black, deliberately heavier than the Set 1 twinkle. */
.sg-preview-bloodmoon::before, .sg-preview-bloodmoon::after {
  content: '🩸'; font-size: 11px; opacity: .9;
  filter: drop-shadow(0 0 4px #c0202e);
  animation: sgFall 2.4s ease-in infinite;
}
.sg-preview-bloodmoon::before { left: 7px; }
.sg-preview-bloodmoon::after  { left: 21px; font-size: 8px; animation-delay: 1.2s; }

/* HIDDEN QUESTION — Saju "Hidden Question" Set 1. Question marks drifting
   in and out of the violet haze — the mystery motif, kept bright. */
.sg-preview-hiddenquestion::before, .sg-preview-hiddenquestion::after {
  content: '❓'; font-size: 11px;
  filter: drop-shadow(0 0 4px #a78bfa);
  animation: sgDriftAcross 3s ease-in-out infinite;
}
.sg-preview-hiddenquestion::before { top: 22%; }
.sg-preview-hiddenquestion::after  { top: 58%; font-size: 8px; animation-delay: 1.5s; }

/* ANCIENT RELIC — Saju "Ancient Relic" Set 2. Tomb urn and ankh rising
   slowly out of the dark, antique-gold glow. */
.sg-preview-ancientrelic::before, .sg-preview-ancientrelic::after {
  content: '🏺'; font-size: 11px; opacity: .9;
  filter: drop-shadow(0 0 4px #b8860b);
  animation: sgRise 3.2s linear infinite;
}
.sg-preview-ancientrelic::before { left: 6px; }
.sg-preview-ancientrelic::after  { content: '☥'; left: 21px; font-size: 12px; color: #e8c46a; animation-delay: 1.6s; }

/* PRISM SPLIT — MBTI "Confetti Lab" Set 1. A prism triangle and its
   sparkle scatter drifting across the swatch. Not used by any other game. */
.sg-preview-prismsplit::before, .sg-preview-prismsplit::after {
  content: '🔺'; font-size: 11px;
  filter: drop-shadow(0 0 4px #f472b6);
  animation: sgDriftAcross 2.6s ease-in-out infinite;
}
.sg-preview-prismsplit::before { top: 20%; }
.sg-preview-prismsplit::after  { content: '✨'; top: 58%; font-size: 10px; animation-delay: 1.3s; }

/* DNA HELIX — MBTI "Neon Enigma" Set 2. Cyan helix strands rising through
   the dark. Not used by any other game or by Set 1 above. */
.sg-preview-dnahelix::before, .sg-preview-dnahelix::after {
  content: '🧬'; font-size: 12px; opacity: .9;
  filter: drop-shadow(0 0 4px #22d3ee);
  animation: sgRise 2.8s linear infinite;
}
.sg-preview-dnahelix::before { left: 6px; }
.sg-preview-dnahelix::after  { left: 21px; font-size: 9px; animation-delay: 1.4s; }

/* PETAL DRIFT — Slide Puzzle "Cherry Blossom" Set 1. Gentle pink petals
   falling slowly, calm spring motif. */
.sg-preview-petaldrift::before, .sg-preview-petaldrift::after {
  content: '🌸'; font-size: 11px; opacity: .9;
  filter: drop-shadow(0 0 3px #ec4899);
  animation: sgFall 2.8s ease-in infinite;
}
.sg-preview-petaldrift::before { left: 7px; }
.sg-preview-petaldrift::after  { left: 21px; font-size: 8px; animation-delay: 1.4s; }

/* GRID FLICKER — Slide Puzzle "Cyberpunk Grid" Set 2. Now shows the
   diamond glyph to MATCH the in-game background animation (ambient '💠'),
   which previously showed a cyan grid-node pulse dot that did not match. */
.sg-preview-gridflicker::before, .sg-preview-gridflicker::after {
  content: '💠'; font-size: 13px; opacity: .9;
  filter: drop-shadow(0 0 4px #22d3ee);
  animation: sgFall 2.4s linear infinite;
}
.sg-preview-gridflicker::before { left: 8px; top: 22%; }
.sg-preview-gridflicker::after  { left: 22px; top: 62%; font-size: 10px; animation-delay: .3s; }

/* =====================================================================
   PER-GAME STYLESHEETS — moved out of this file

   The 14 blocks that used to sit here (Ask a Date Game through TugofWar)
   now live in their own files under /games/<game>/styles-<game>.css, each
   linked from index.html directly after this stylesheet. The files already
   existed but were never linked; 8 were byte-identical to the block here
   and 6 had drifted, so every file was rewritten from the live block that
   was actually being served. Nothing was re-authored — the rules are the
   same rules in the same order, just no longer duplicated in two places
   where only one copy was live.

   Two rules were deliberately LEFT BEHIND here rather than moved, because
   neither belongs to the game whose block contained it:
   ===================================================================== */

/* Was inside the Drunk Racing Game block. It is not a Drunk Racing rule at
   all — it targets the site-wide .start-overlay class used by every game,
   and is a redundant restatement of the display:flex already set by the
   canonical .start-overlay rule earlier in this file. It cannot override
   .start-overlay.hidden{display:none} either, which is more specific. Kept
   in place rather than relocated into a per-game file, where a global
   selector would be both misleading and a cascade hazard. */
/* --- START OVERLAY --- */

.start-overlay {
  display: flex;
}

/* Was inside the Snowball Fight block, but these style TugofWar's close
   button, not Snowball Fight's. Kept here rather than moved into either
   game's file: leaving them at this exact position in the cascade is the
   only change-free option, since moving them into styles-tugofwar.css
   would place them after every other per-game stylesheet instead. */
.tugofwar-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tugofwar-close-button:active {
  background: rgba(200, 0, 0, 0.6);
}

/* =====================================================================
   ORIENTATION LOCK — standard "rotate your device" messaging
   File: append once to the root styles.css (not per-game)
   Used by any game that requires landscape orientation to play.
   See requireLandscapeOrientation() / releaseLandscapeOrientation()
   in script-shared.js.
   ===================================================================== */

.orientation-lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(10, 10, 18, 0.96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}

/* Landscape fullscreen — game-wrapper expands to fill the viewport edge to
   edge while in landscape (Snowball Fight, TugofWar). The site header is
   hidden via body.landscape-fullscreen-open; each opted-in game supplies
   its own in-game close button so there's still a way back. */
body.landscape-fullscreen-open #game-area-header {
  display: none !important;
}
.game-wrapper.landscape-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 200;
  /* Dynamic viewport units so the game area fills the ACTUAL visible
     landscape screen — 100vh/100vw include mobile browser chrome and left
     the play area cut off / needing a scroll. dvh/dvw track the real
     visible viewport; the vh/vw lines are fallbacks for older engines. */
  width: 100vw !important;
  height: 100vh !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}
/* The play container and its inner wrapper must fill the fullscreen area
   completely so nothing (Tug's win meter, Snowball's bottom snow line)
   falls outside the visible viewport. */
.game-wrapper.landscape-fullscreen-active #tugofwar-container,
.game-wrapper.landscape-fullscreen-active .tugofwar-arena,
.game-wrapper.landscape-fullscreen-active #snowball-fight-container,
.game-wrapper.landscape-fullscreen-active .snowball-fight-canvas-holder,
.game-wrapper.landscape-fullscreen-active .snowball-fight-canvas {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.orientation-lock-overlay.orientation-lock-visible {
  display: flex;
}

.orientation-lock-icon {
  font-size: 44px;
  animation: orientation-lock-rotate-hint 1.6s ease-in-out infinite;
}

.orientation-lock-title {
  font-size: 1.05rem;
  font-weight: 800;
}

.orientation-lock-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 280px;
  line-height: 1.4;
}

@keyframes orientation-lock-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

  /* ======================================================================
     SHARED BIRTH PROFILE EDITOR — Daily Horoscope and Saju
     ====================================================================== */

  /* The pencil sits beside "Read My Stars" / "Reveal My Pillars" and is
     sized to match their height exactly via align-items:stretch on the row,
     so it reads as part of the same control group rather than a floating
     icon. Colours follow the cosmic purple palette both games already use. */
  .sg-birth-profile-pencil-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    padding: 0;
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .sg-birth-profile-pencil-btn:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.7);
    color: #ffd700;
  }

  .sg-birth-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(6, 2, 14, 0.78);
    backdrop-filter: blur(3px);
  }

  .sg-birth-profile-panel {
    width: 100%;
    max-width: 380px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 16px;
    background: linear-gradient(135deg, #150c26, #0d0717);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    padding: 16px;
  }

  /* The one-profile notice is the first thing in the panel because it is a
     constraint the player needs before typing, not a footnote after. */
  .sg-birth-profile-notice {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  .sg-birth-profile-title {
    text-align: center;
    font-family: 'Palatino Linotype', serif;
    font-size: 1.05rem;
    color: #ffd700;
    margin-bottom: 14px;
  }

  .sg-birth-profile-field { margin-bottom: 11px; }

  .sg-birth-profile-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7b5ea0;
    margin-bottom: 5px;
  }

  .sg-birth-profile-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #f0e8ff;
    font-size: 0.9rem;
    outline: none;
  }
  .sg-birth-profile-input:focus { border-color: rgba(255, 215, 0, 0.6); }

  .sg-birth-profile-gender-row { display: flex; gap: 8px; }

  .sg-birth-profile-gender-btn {
    flex: 1;
    padding: 9px 0;
    border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #c4aee8;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .sg-birth-profile-gender-btn.active {
    background: rgba(168, 85, 247, 0.26);
    border-color: rgba(255, 215, 0, 0.6);
    color: #ffd700;
  }

  /* Hidden until a save actually fails, so an empty red strip never sits in
     the panel on open. */
  .sg-birth-profile-error {
    display: none;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    font-size: 0.75rem;
  }

  .sg-birth-profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }

  .sg-birth-profile-exit-btn,
  .sg-birth-profile-save-btn {
    flex: 1;
    padding: 11px 0;
    border-radius: 10px;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .sg-birth-profile-exit-btn {
    border: 1px solid rgba(168, 85, 247, 0.42);
    background: transparent;
    color: #c4aee8;
  }
  .sg-birth-profile-save-btn {
    border: none;
    background: linear-gradient(135deg, #ffd700, #92400e);
    color: #000;
  }
  .sg-birth-profile-exit-btn:hover,
  .sg-birth-profile-save-btn:hover { opacity: 0.85; }
  .sg-birth-profile-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ======================================================================
     LANDING REORDER — "Should we SMASH?" + search button below Favorites
     ======================================================================
     The hero block used to sit at the top of the landing page carrying the
     title, a permanently-visible search bar and the activity banner. Those
     three have been separated: Most Played now sits directly under the
     profile/gems header, the activity banner follows it, and the title drops
     down to just above Categories with the search collapsed behind a button.
  */
  .hero-below-favorites {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    margin-bottom: 18px;
  }

  /* The title no longer animates in on load — down here it is scrolled to
     rather than landed on, so a fade-up would usually fire off-screen and be
     missed entirely. */
  .hero-below-favorites .hero-title {
    opacity: 1;
    animation: none;
    margin: 0;
  }

  /* Sized to sit level with the title's cap height rather than dominate it. */
  .hero-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .hero-search-button:hover,
  .hero-search-button.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--card);
  }

  /* Revealed by toggleHeroSearch(). Takes the full row so the results panel
     below it is not squeezed against the title. */
  .hero-below-favorites .hero-search-wrap {
    flex-basis: 100%;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }