body[data-theme="dark"]{
      --bg:#0b0f14; --fg:#e9eef6; --muted:rgba(233,238,246,.72);
      --card:rgba(17,24,39,.62); --border:rgba(255,255,255,.12);
      --soft:rgba(255,255,255,.06); --shadow:0 12px 32px rgba(0,0,0,.22);
    }
    body[data-theme="light"]{
      --bg:#ffffff; --fg:#0b1220; --muted:rgba(11,18,32,.65);
      --card:rgba(248,249,250,1); --border:rgba(0,0,0,.12);
      --soft:rgba(0,0,0,.05); --shadow:0 10px 26px rgba(0,0,0,.12);
    }

    body{ background:var(--bg); color:var(--fg); }
    .topbar{ background:var(--bg); border-bottom:1px solid var(--border); }
    .muted{ color:var(--muted); }

    .btn-outline-theme{
      border-color:var(--border);
      color:var(--fg);
      background:transparent;
    }
    .btn-outline-theme:hover{
      border-color:var(--border);
      background:var(--soft);
      color:var(--fg);
    }

    .cardish{
      border:1px solid var(--border);
      background:var(--card);
      border-radius:18px;
      box-shadow:var(--shadow);
    }

    .video-wrap{
      width:min(92vw, 420px);
      aspect-ratio:1/1;
      border-radius:18px;
      overflow:hidden;
      position:relative;
      border:1px solid var(--border);
      background:#000;
      box-shadow:var(--shadow);
    }
    video{
      width:100%;
      height:100%;
      object-fit:cover;
      background:#000;
    }

    #foldArea.folded{ display:none; }
    #pageTitle.hidden{ display:none; }

    .black-screen{
      position:fixed;
      inset:0;
      background:#000;
      z-index:9999;
      display:none;
      touch-action:manipulation;
    }
    .black-screen.show{ display:block; }

    .done-overlay{
      position:fixed;
      inset:0;
      display:none;
      z-index:9997;
      background:rgba(0,0,0,.55);
      backdrop-filter:blur(6px);
      align-items:center;
      justify-content:center;
      touch-action:manipulation;
    }
    .done-overlay.show{ display:flex; }
    .done-card{
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.62);
      color:#fff;
      border-radius:22px;
      padding:18px;
      width:min(92vw, 420px);
      box-shadow:0 18px 50px rgba(0,0,0,.45);
      text-align:center;
    }
    .done-icon{
      width:54px; height:54px;
      border-radius:18px;
      margin:0 auto 10px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
    }

    .premium-bar{
      border:1px solid var(--border);
      background:var(--soft);
      border-radius:16px;
      padding:10px 12px;
    }
    .premium-countdown{
      font-variant-numeric:tabular-nums;
      font-weight:900;
      letter-spacing:.02em;
    }

    .games-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .games-pill{
      border:1px solid var(--border);
      background:var(--soft);
      border-radius:999px;
      padding:6px 10px;
      font-weight:900;
      user-select:none;
    }

    .ttt-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      max-width:340px;
      margin:0 auto;
    }
    .ttt-cell{
      aspect-ratio:1/1;
      border-radius:16px;
      border:1px solid var(--border);
      background:var(--soft);
      color:var(--fg);
      font-size:2.1rem;
      font-weight:900;
      display:grid;
      place-items:center;
      user-select:none;
    }

    .c4-wrap{ max-width:460px; margin:0 auto; }
    .c4-board{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:8px;
      padding:12px;
      border-radius:18px;
      border:1px solid var(--border);
      background:var(--soft);
    }
    .c4-cell{
      aspect-ratio:1/1;
      border-radius:999px;
      border:1px solid var(--border);
      background:transparent;
    }
    .c4-p1{ background:#ff3b30; border-color:rgba(255,59,48,.45); }
    .c4-p2{ background:#ffcc00; border-color:rgba(255,204,0,.45); }

    .vision-line{
      line-height:1.02;
      margin:0;
      font-weight:900;
      letter-spacing:.02em;
      user-select:none;
    }

    .import-body{ padding:0; overflow:hidden; }
    .import-input-pane{ padding:16px; }
    .media-preview{
      position:relative;
      width:100%;
      background:#000;
      border-top:1px solid var(--border);
      overflow:hidden;
    }
    .media-preview img,
    .media-preview video{
      width:100%;
      height:auto;
      display:block;
      object-fit:contain;
      background:#000;
    }
    .media-actions{
      position:absolute;
      top:10px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      gap:10px;
      z-index:5;
    }
    .media-btn{
      width:42px;
      height:36px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(0,0,0,.35);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
      user-select:none;
      backdrop-filter:blur(6px);
    }

    .media-fullscreen{
      position:fixed;
      inset:0;
      background:#000;
      z-index:9998;
      display:none;
      touch-action:manipulation;
    }
    .media-fullscreen.show{ display:block; }
    .media-fullscreen .close{
      position:absolute;
      top:12px;
      right:12px;
      width:46px;
      height:40px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(0,0,0,.35);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
      z-index:2;
      user-select:none;
      backdrop-filter:blur(6px);
    }
    .media-fullscreen .stage{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
    }
    .media-fullscreen img,
    .media-fullscreen video{
      width:100%;
      height:100%;
      object-fit:contain;
      background:#000;
      display:block;
    }

    .youtube-wrap{
      border:1px solid var(--border);
      background:var(--soft);
      border-radius:16px;
      padding:12px;
    }
    .play-btn{
      width:48px;
      min-width:48px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
    }

    .yt-overlay{
      position:fixed;
      inset:0;
      z-index:9996;
      display:none;
      background:rgba(0,0,0,.7);
      backdrop-filter:blur(6px);
      touch-action:manipulation;
    }
    .yt-overlay.show{ display:block; }
    .yt-card{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      padding:14px;
    }
    .yt-frame-wrap{
      width:min(96vw, 980px);
      aspect-ratio:16/9;
      background:#000;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 18px 55px rgba(0,0,0,.5);
      position:relative;
    }
    .yt-close{
      position:absolute;
      top:10px;
      right:10px;
      width:44px;
      height:38px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(0,0,0,.35);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
      z-index:2;
      user-select:none;
      backdrop-filter:blur(6px);
    }
    .yt-frame{
      width:100%;
      height:100%;
      border:0;
      display:block;
      background:#000;
    }

    .pay-modal .modal-content{
      border-radius:22px;
      border:1px solid var(--border);
      background:var(--bg);
      color:var(--fg);
      box-shadow:0 20px 70px rgba(0,0,0,.35);
    }
    .pay-hero{
      border:1px solid var(--border);
      background:var(--soft);
      border-radius:18px;
      padding:14px;
    }
    .pay-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid var(--border);
      background:var(--card);
      border-radius:999px;
      padding:6px 10px;
      font-weight:900;
    }
    .pay-list{
      list-style:none;
      padding-left:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .pay-item{
      display:flex;
      align-items:flex-start;
      gap:10px;
      border:1px solid var(--border);
      background:var(--card);
      border-radius:16px;
      padding:12px;
    }
    .pay-dot{
      width:30px;
      height:30px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:var(--soft);
      border:1px solid var(--border);
      flex:0 0 auto;
      font-weight:900;
    }
    .pay-note{
      border:1px dashed var(--border);
      background:var(--soft);
      border-radius:16px;
      padding:12px;
    }
    .shake{ animation:shake .25s linear 2; }
    @keyframes shake{
      0%{ transform:translateX(0); }
      25%{ transform:translateX(-6px); }
      50%{ transform:translateX(6px); }
      75%{ transform:translateX(-4px); }
      100%{ transform:translateX(0); }
    }

    .info-i{
      width:20px;
      height:20px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--soft);
      color:var(--fg);
      display:grid;
      place-items:center;
      font-weight:900;
      font-size:.6rem;
      padding:0;
      line-height:1;
    }

    .rec-header-btn{
      border:1px solid var(--border);
      background:var(--soft);
      color:var(--fg);
      border-radius:14px;
      padding:10px 12px;
      width:100%;
      text-align:left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight:900;
    }
    .rec-chevron{
      opacity:.8;
      font-weight:900;
    }

/* --- Games UI polish --- */
.games-title {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #7c4dff, #00c2ff, #00d084);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.games-title-emoji { filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }

.games-card { position: relative; overflow: hidden; }
.games-card::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(124,77,255,.28), rgba(0,194,255,.15), transparent 65%);
  pointer-events: none;
}

.game-panel {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.game-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-weight: 700;
}