*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:        #070B14;
    --surface:   #101827;
    --surface2:  #162033;
    --border:    #1E2D47;
    --border2:   #243149;
    --text:      #EAF0FF;
    --muted:     #9AA7BD;
    --dim:       #576880;
    --cyan:      #38BDF8;
    --violet:    #A78BFA;
    --green:     #22C55E;
    --amber:     #F59E0B;
    --red:       #EF4444;
    --lime:      #84CC16;
    --nav-bg:    #0D1525;
    --footer-bg: #060C18;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a { text-decoration: none; color: inherit; }

  /* ── NAV ── */
  .nav {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .nav-logo {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
  }
  .nav-logo i { font-size: 18px; }
  .nav-links { display: flex; gap: 2px; }
  .nav-link {
    font-size: 11px;
    color: var(--muted);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .15s, background .15s;
    font-weight: 500;
  }
  .nav-link:hover { color: var(--text); background: var(--surface2); }
  .nav-link.active { color: var(--cyan); background: var(--surface2); }
  .nav-right { display: flex; align-items: center; gap: 8px; }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-search-form {
    width: 184px;
    height: 30px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 30px;
    align-items: center;
    overflow: hidden;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .nav-search-form:focus-within {
    border-color: rgba(56,189,248,0.58);
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(56,189,248,0.08);
  }
  .nav-search-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 0 8px 0 10px;
  }
  .nav-search-input::placeholder { color: var(--dim); }
  .nav-search-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-left: 1px solid rgba(36,49,73,0.72);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: color .15s, background .15s;
  }
  .nav-search-btn:hover { color: var(--cyan); background: rgba(56,189,248,0.06); }

  /* ── PAGE LAYOUT ── */
  .page-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    padding: 20px 0 0;
    align-items: start;
  }
  .main-col { min-width: 0; }

  /* ── BREADCRUMB ── */
  .breadcrumb {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .breadcrumb i { font-size: 10px; color: var(--border2); }
  .breadcrumb a { color: var(--muted); transition: color .15s; }
  .breadcrumb a:hover { color: var(--cyan); }
  .breadcrumb-cur { color: var(--cyan); }

  /* ── ARTICLE HEADER ── */
  .art-type-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
  }
  .type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .tb-codes  { color: var(--green);  background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.25);   }
  .tb-live   { color: var(--cyan);   background: rgba(56,189,248,0.08);  border-color: rgba(56,189,248,0.25);  }
  .tb-guide  { color: var(--violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.25); }
  .tb-patch  { color: var(--amber);  background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.25);  }
  .tb-news   { color: var(--cyan);   background: rgba(56,189,248,0.08);  border-color: rgba(56,189,248,0.25);  }
  .tb-review { color: var(--red);    background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.25);   }

  .art-title {
    font-family: 'Syne', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #F0F6FF;
    line-height: 1.25;
    margin-bottom: 3px;
  }
  .art-subline {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.35;
  }
  .art-subline a {
    color: var(--muted);
    font-weight: 500;
    transition: color .15s;
  }
  .art-subline a:hover { color: var(--cyan); }
  .art-subline .sub-dot { color: var(--dim); }
  /* A tag can never be wider than the line it sits on. Flex items default to
     min-width:auto, which refuses to shrink below the content width, so a long
     tag would otherwise push straight past the right edge on a narrow screen. */
  .art-subline > * { min-width: 0; }
  .art-subline a { overflow-wrap: anywhere; }
  .genre-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    transition: color .15s, border-color .15s, background .15s;
  }
  .genre-pill:hover {
    border-color: currentColor;
    filter: brightness(1.12);
    text-decoration: none;
  }
  .genre-pill-open { color: var(--green); background: rgba(34,197,94,.07); border-color: rgba(34,197,94,.24); }
  .genre-pill-rpg { color: var(--violet); background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.24); }
  .genre-pill-gacha { color: var(--amber); background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.24); }
  .genre-pill-anime { color: #F472B6; background: rgba(244,114,182,.07); border-color: rgba(244,114,182,.24); }

  .model-link {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    transition: filter .15s, background .15s;
  }
  .model-link:hover { filter: brightness(1.12); text-decoration: none; }
  .model-free { color: var(--lime); background: rgba(132,204,22,.08); border-color: rgba(132,204,22,.25); }
  .model-iap { color: var(--violet); background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.25); }
  .model-paid { color: var(--amber); background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
  .model-sep { color: var(--dim); padding: 0 4px; font-weight: 600; }
  .status-link {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    transition: filter .15s, background .15s;
  }
  .status-link:hover { filter: brightness(1.12); text-decoration: none; }
  .status-released { color: var(--cyan); background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.25); }
  .table-pill-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .platform-link-row { margin-top: 10px; gap: 6px; }

  .art-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--muted);
  }
  .art-meta i { font-size: 12px; }
  .art-meta a {
    color: #C8D8EC;
    font-weight: 600;
    transition: color .15s;
  }
  .art-meta a:hover { color: var(--cyan); }
  .meta-sep { color: var(--border2); }

  /* Platform pills */
  .plat-row { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
  .plat-pill {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    transition: color .15s, border-color .15s, background .15s;
  }
  a.plat-pill:hover { border-color: currentColor; filter: brightness(1.12); }
  .pp-pc      { color: var(--cyan);   background: rgba(56,189,248,0.07);   border-color: rgba(56,189,248,0.22);  }
  .pp-android { color: var(--lime);   background: rgba(132,204,22,0.07);   border-color: rgba(132,204,22,0.22);  }
  .pp-ios     { color: #F472B6;       background: rgba(244,114,182,0.07);  border-color: rgba(244,114,182,0.22); }
  .pp-ps      { color: #6EA8FE;       background: rgba(110,168,254,0.07);  border-color: rgba(110,168,254,0.22); }
  .pp-xb      { color: #4ADE80;       background: rgba(74,222,128,0.07);   border-color: rgba(74,222,128,0.22);  }
  .pp-mb      { color: var(--violet); background: rgba(167,139,250,0.07);  border-color: rgba(167,139,250,0.22); }
  .pp-mac     { color: var(--violet); background: rgba(167,139,250,0.07); border-color: rgba(167,139,250,0.22); }
  .pp-switch  { color: var(--red); background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.22); }
  .pp-cloud   { color: var(--cyan); background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.22); }
  .pp-other   { color: var(--text); background: rgba(234,240,255,0.06); border-color: rgba(234,240,255,0.20); }



  /* Unified taxonomy colors: deterministic per term, with neighbouring
     taxonomy links deconflicted by the renderer. */
  .tax-link { font-weight: 600; transition: color .15s, filter .15s; }
  .tax-link:hover { color: var(--tax-color) !important; filter: brightness(1.18); }
  .tax-pill { color: var(--tax-color) !important; background: rgba(var(--tax-rgb), .08) !important; border-color: rgba(var(--tax-rgb), .28) !important; }
  .tax-pill:hover { border-color: var(--tax-color) !important; filter: brightness(1.14); }

  /* ── HERO IMAGE ── */
  .hero-img {
    width: 100%;
    min-height: 300px;
    aspect-ratio: 16 / 9;
    height: auto;
    background-color: #0D1E38;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.24);
  }
  .hero-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    pointer-events: none;
  }
  .hero-img-art {
    position: absolute; top: 0; right: 0;
    width: 50%; height: 100%;
    background: none;
  }
  .hero-label {
    font-size: 10px;
    color: #F8FAFC;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(7,11,20,0.72);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
  }

  /* ── QUICK INFO CARD ── */
  .qi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .qi-card-head {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .qi-card-head i { font-size: 12px; color: var(--cyan); }
  .qi-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
  }
  .qi-stat {
    background: var(--nav-bg);
    border: 1px solid var(--surface2);
    border-radius: 8px;
    padding: 8px 9px;
    min-width: 0;
  }
  .qi-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    white-space: nowrap;
  }
  .qi-val {
    font-size: 12px;
    color: #C8D8EC;
    font-weight: 600;
    line-height: 1.35;
  }
  .qi-val.green { color: var(--green); }
  .qi-val.amber { color: var(--amber); }
  .qi-val.cyan  { color: var(--cyan);  }
  .qi-platforms,
  .qi-credit {
    background: rgba(13,21,37,0.58);
    border: 1px solid var(--surface2);
    border-radius: 8px;
    padding: 9px 10px;
  }
  .qi-platforms { margin-bottom: 8px; }
  .qi-genres {
    background: rgba(13,21,37,0.58);
    border: 1px solid var(--surface2);
    border-radius: 8px;
    padding: 9px 10px;
    margin-bottom: 8px;
  }
  .qi-platform-pills,
  .qi-genre-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .qi-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .qi-credit .qi-label { margin-bottom: 0; }
  .qi-credit .qi-val { text-align: right; }

  /* ── TOC ── */
  .toc-card {
    background: var(--nav-bg);
    border-left: 3px solid var(--cyan);
    border-radius: 0 8px 8px 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 13px;
    margin-bottom: 12px;
    position: relative;
  }
  .toc-head {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .toc-head i { font-size: 12px; color: var(--cyan); }
  .toc-list {
    max-height: 178px;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }
  .toc-list::-webkit-scrollbar { width: 5px; }
  .toc-list::-webkit-scrollbar-track { background: transparent; }
  .toc-list::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .toc-list::after { display: none; }
  .toc-item {
    font-size: 11px;
    color: var(--muted);
    padding: 4px 0;
    display: flex;
    gap: 8px;
    align-items: baseline;
    cursor: pointer;
    transition: color .15s;
  }
  .toc-item:hover { color: var(--cyan); }
  .toc-n { font-size: 10px; color: var(--border2); min-width: 16px; }

  /* ── ARTICLE SECTIONS ── */
  .section { margin-bottom: 14px; }
  .section-h[id], .source-block-head[id] { scroll-margin-top: 72px; }
  .section-h {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--surface2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-h::before {
    content: '';
    width: 3px; height: 16px;
    background: var(--cyan);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .section-p { font-size: 12px; color: var(--muted); line-height: 1.8; }

  /* ── ARTICLE PARAGRAPH RHYTHM ── */
  .section-p {
    text-align: justify;
    text-justify: inter-word;
    text-align-last: left;
    line-height: 1.85;
    margin: 0 0 12px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .section-p:last-child {
    margin-bottom: 0;
  }


  /* ── CODES TABLE ── */
  .codes-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
  .codes-scroll {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border2) transparent;
  }
  .codes-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
  .codes-scroll::-webkit-scrollbar-track { background: transparent; }
  .codes-scroll::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 999px;
  }
  .codes-scroll-active,
  .codes-scroll-expired {
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .codes-scroll-active { max-height: 374px; }
  /* Keep long expired-code histories inside a vertical scroll area. */
  .codes-scroll-expired {
    max-height: 286px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .codes-scroll-active .codes-table,
  .codes-scroll-expired .codes-table { margin-bottom: 0; }
  .codes-scroll-active .codes-table thead th,
  .codes-scroll-expired .codes-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .codes-table th {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 10px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .codes-table td {
    font-size: 12px;
    color: #C8D8EC;
    padding: 7px 10px;
    border-bottom: 1px solid var(--surface2);
    vertical-align: middle;
  }
  .codes-table tr:last-child td { border-bottom: none; }
  .codes-table tr:hover td { background: var(--surface2); }
  .codes-table th:nth-child(3),
  .codes-table td.status-cell {
    width: 112px;
    white-space: nowrap;
  }
  .code-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    line-height: 1.2;
  }
  .code-pill {
    font-family: monospace;
    background: var(--nav-bg);
    color: var(--cyan);
    border: 1px solid rgba(56,189,248,0.25);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
  }
  button.code-pill {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, border-color .15s, background .15s;
  }
  button.code-pill:hover,
  button.code-pill:focus-visible {
    color: #EAF6FF;
    border-color: rgba(56,189,248,0.58);
  }
  button.code-pill:focus-visible {
    outline: 2px solid rgba(56,189,248,0.45);
    outline-offset: 3px;
  }
  .expired .code-pill { color: var(--dim); border-color: var(--border2); }
  .expired td { color: var(--dim); }
  button.code-pill.is-copied,
  .expired button.code-pill.is-copied {
    color: var(--green);
    border-color: rgba(34,197,94,0.38);
    background: rgba(34,197,94,0.08);
  }
  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0;
    flex: 0 0 6px;
  }
  .dot-active  { background: var(--green); }
  .dot-expired { background: var(--red); opacity: .85; }

  /* ── REGION TAG + INFO CELL ── */
  .region-cell { width: 88px; white-space: nowrap; }
  .code-region {
    display: inline-block;
    font-size: 10px;
    line-height: 1.3;
    color: var(--cyan);
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.22);
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .expired .code-region { color: var(--dim); background: transparent; border-color: var(--border2); }
  .code-info-cell { white-space: normal; }
  .code-info-note { color: #C8D8EC; }
  .code-info-note::after { content: " · "; color: var(--dim); }
  .code-info-exp { color: var(--muted); white-space: nowrap; }
  .expired .code-info-note, .expired .code-info-exp { color: var(--dim); }

  /* ── MOBILE CODE CARDS (hidden on desktop) ── */
  .codes-cards { display: none; }
  .code-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--nav-bg);
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .code-card:last-child { margin-bottom: 0; }
  .code-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
  }
  .code-card-reward {
    font-size: 12px;
    color: #C8D8EC;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .code-card.expired .code-card-reward { color: var(--dim); }
  .code-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .code-card-tag {
    font-size: 10px;
    line-height: 1.3;
    color: var(--muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  .code-card.expired .code-card-tag { color: var(--dim); }

  /* ── BACA JUGA ── */
  .baca-juga {
    background: var(--nav-bg);
    border-left: 3px solid var(--violet);
    border-radius: 0 8px 8px 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 13px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    transition: border-color .15s;
  }
  .baca-juga:hover { border-color: var(--violet); }
  .bj-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--violet);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }
  .bj-title { font-size: 11px; color: #C8D8EC; line-height: 1.4; }
  .bj-arrow { margin-left: auto; color: var(--border2); font-size: 13px; }

  /* ── SOURCE BLOCK ── */
  .source-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    margin-top: 4px;
  }
  .source-block-head {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .source-block-head i { font-size: 12px; color: var(--dim); }
  .source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    padding: 4px 0;
    border-bottom: 1px solid var(--surface2);
  }
  .source-row:last-child { border-bottom: none; }
  .source-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border2); flex-shrink: 0; }
  .source-link { color: var(--cyan); cursor: pointer; }
  .source-link:hover { text-decoration: underline; }
  .source-date { font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; }

  /* ── FAQ ── */
  .faq-head {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .faq-head i { font-size: 12px; color: var(--cyan); }
  .faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
  }
  .faq-q {
    font-size: 12px;
    color: #C8D8EC;
    font-weight: 500;
    padding: 9px 13px;
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 10px;
  }
  .faq-q i { font-size: 13px; color: var(--cyan); flex-shrink: 0; transition: transform .18s ease; }
  .faq-a {
    display: none;
    font-size: 11px;
    color: var(--muted);
    padding: 9px 13px;
    background: var(--nav-bg);
    line-height: 1.7;
  }
  .faq-item.is-open .faq-a { display: block; }
  .faq-item.is-open .faq-q i { transform: rotate(180deg); }

  /* ── RELATED POSTS ── */
  .related-stack { margin-top: 16px; }
  .related-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .related-panel-head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--surface2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .related-title {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .related-title::before {
    content: '';
    width: 3px; height: 14px;
    background: var(--cyan);
    border-radius: 2px;
  }
  .related-sub { display: none; }
  .related-list { display: flex; flex-direction: column; }
  .related-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--surface2);
    transition: background .15s, border-color .15s;
  }
  .related-row:last-child { border-bottom: none; }
  .related-row:hover { background: var(--surface2); }
  .related-row:focus-visible { outline: 2px solid rgba(56,189,248,0.45); outline-offset: -2px; }
  .related-thumb {
    width: 48px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--border2);
    background-position: center;
    background-size: cover;
    background-color: var(--nav-bg);
    flex-shrink: 0;
  }
  .related-kind,
  .related-reason { display: none; }
  .related-main { min-width: 0; }
  .related-item-title {
    display: block;
    font-size: 12px;
    color: #DCE8F8;
    line-height: 1.35;
    font-weight: 600;
  }
  .related-arrow {
    color: var(--border2);
    font-size: 14px;
    transition: color .15s, transform .15s;
  }
  .related-row:hover .related-arrow { color: var(--cyan); transform: translateX(2px); }

  /* ── SIDEBAR ── */
  .sidebar { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 64px; }
  .sb-card {
    --sb-accent: var(--cyan);
    --sb-accent-rgb: 56,189,248;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .sb-official { --sb-accent: var(--cyan);   --sb-accent-rgb: 56,189,248; }
  .sb-download { --sb-accent: var(--green);  --sb-accent-rgb: 34,197,94; }
  .sb-latest   { --sb-accent: var(--violet); --sb-accent-rgb: 167,139,250; }
  .sb-similar  { --sb-accent: var(--amber);  --sb-accent-rgb: 245,158,11; }
  .sb-tags     { --sb-accent: #6EA8FE;       --sb-accent-rgb: 110,168,254; }
  .sb-head {
    font-size: 10px;
    font-weight: 800;
    color: var(--sb-accent);
    padding: 9px 12px 8px;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    border-bottom: 1px solid rgba(var(--sb-accent-rgb),0.16);
    background: linear-gradient(90deg, rgba(var(--sb-accent-rgb),0.105), rgba(13,21,37,0) 72%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .sb-head-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    line-height: 1.2;
  }
  .sb-head-title i {
    font-size: 13px;
    color: var(--sb-accent);
    flex-shrink: 0;
  }
  .sb-head-link {
    color: var(--sb-accent);
    background: rgba(var(--sb-accent-rgb),0.08);
    border: 1px solid rgba(var(--sb-accent-rgb),0.22);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 9px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .sb-head-arrow {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }
  .sb-head-arrow:hover { color: var(--text); }
  .sb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--surface2);
    cursor: pointer;
    transition: background .15s;
  }
  .sb-item:last-child { border-bottom: none; }
  .sb-item:hover { background: var(--surface2); }
  .sb-thumb {
    width: 32px; height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
  }
  .sbt1 { background: linear-gradient(135deg,#1A3050,#0F2040); }
  .sbt2 { background: linear-gradient(135deg,#1F2D40,#142030); }
  .sbt3 { background: linear-gradient(135deg,#162438,#0F1A28); }
  .sbt4 { background: linear-gradient(135deg,#1C1428,#241830); }
  .sb-title { font-size: 11px; color: #C8D8EC; font-weight: 500; line-height: 1.2; }
  .sb-sub   { font-size: 10px; color: var(--muted); margin-top: 1px; }

  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 12px 12px;
    max-height: 132px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sb-accent-rgb), .32) transparent;
  }
  .tag-cloud::-webkit-scrollbar { width: 5px; }
  .tag-cloud::-webkit-scrollbar-track { background: transparent; }
  .tag-cloud::-webkit-scrollbar-thumb {
    background: rgba(var(--sb-accent-rgb), .32);
    border-radius: 999px;
  }
  .tag-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: var(--muted);
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .tag-pill:hover { border-color: currentColor; filter: brightness(1.12); }
  .tag-game { color: #C8D8EC; border-color: rgba(200,216,236,.20); }
  .tag-dev { color: var(--amber); border-color: rgba(245,158,11,.24); }
  .tag-open { color: var(--green); border-color: rgba(34,197,94,.24); }
  .tag-rpg { color: var(--violet); border-color: rgba(167,139,250,.24); }
  .tag-gacha { color: #F59E0B; border-color: rgba(245,158,11,.24); }
  .tag-anime { color: #F472B6; border-color: rgba(244,114,182,.24); }
  .tag-coop { color: #38BDF8; border-color: rgba(56,189,248,.24); }
  .tag-free { color: var(--lime); border-color: rgba(132,204,22,.24); }
  .tag-iap { color: var(--violet); border-color: rgba(167,139,250,.24); }
  .tag-more {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--sb-accent);
    line-height: 1.2;
  }
  .tag-more:hover { color: var(--text); }

  .upcoming-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid var(--surface2);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s;
  }
  .upcoming-row:last-child { border-bottom: none; }
  .upcoming-row:hover { background: var(--surface2); }
  .up-name { color: #C8D8EC; font-weight: 500; }
  .up-date { color: var(--amber); font-size: 10px; }
  .up-confirmed { color: var(--green); font-size: 10px; }

  /* ── FOOTER ── */
  .footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--surface2);
    margin-top: 40px;
    padding: 28px 0 0;
  }
  .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  .footer-logo {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--cyan);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .footer-logo i { font-size: 17px; }
  .footer-desc { font-size: 11px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
  .footer-social { display: flex; gap: 6px; }
  .social-btn {
    width: 28px; height: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted); font-size: 14px;
    transition: color .15s, border-color .15s;
  }
  .social-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .footer-col-title {
    font-size: 10px; font-weight: 600; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px;
  }
  .footer-link {
    font-size: 11px; color: var(--muted);
    display: block; margin-bottom: 6px; cursor: pointer;
    transition: color .15s;
  }
  .footer-link:hover { color: var(--cyan); }
  .footer-bottom {
    border-top: 1px solid var(--surface2);
    padding: 12px 0;
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 8px;
  }
  .footer-copy { font-size: 10px; color: var(--dim); }
  .footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }
  .legal-link {
    font-size: 10px; color: var(--dim);
    cursor: pointer; transition: color .15s;
  }
  .legal-link:hover { color: var(--muted); }
  .footer-disclaimer { padding: 12px 0 20px; border-top: 1px solid rgba(26,40,64,0.5); }
  .disclaimer-text { font-size: 10px; color: #3A4A60; line-height: 1.65; }

  .tb-profile { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.25); }
  .info-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
  .info-table th {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 7px 10px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .info-table td {
    font-size: 12px;
    color: #C8D8EC;
    padding: 7px 10px;
    border-bottom: 1px solid var(--surface2);
    vertical-align: top;
  }
  .info-table tr:last-child td { border-bottom: none; }
  .media-grid, .download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
  }
  .media-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .download-card {
    background: linear-gradient(180deg, rgba(22,32,51,0.92), rgba(16,24,39,0.92));
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 52px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  }
  .download-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: rgba(56,189,248,0.55);
    opacity: .65;
    transition: opacity .15s, background .15s;
  }
  .download-card:hover {
    border-color: rgba(56,189,248,0.45);
    background: linear-gradient(180deg, rgba(22,32,51,1), rgba(20,31,50,1));
    box-shadow: 0 0 0 1px rgba(56,189,248,0.08), 0 8px 22px rgba(0,0,0,0.18);
    transform: translateY(-1px);
  }
  .download-card:hover::before { opacity: 1; background: var(--cyan); }
  .download-card:hover .download-title { color: #F0F6FF; }
  .download-card:hover .download-action { color: var(--cyan); border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.08); }
  .download-card:focus-visible {
    outline: 2px solid rgba(56,189,248,0.55);
    outline-offset: 2px;
  }
  .download-main { min-width: 0; }
  .media-thumb {
    height: 86px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--surface2);
  }
  .media-body {
    padding: 9px 10px;
  }
  .media-title, .download-title {
    font-size: 11px;
    color: #C8D8EC;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .media-sub, .download-sub {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.45;
  }
  .download-action {
    font-size: 10px;
    color: var(--muted);
    border: 1px solid var(--border2);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
    line-height: 1.2;
    transition: color .15s, border-color .15s, background .15s;
  }
  .real-link { color: var(--cyan); }
  .real-link:hover { text-decoration: underline; }
  .text-link {
    color: #C8D8EC;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(56,189,248,0.35);
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
  }
  .text-link:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
  .note-box {
    background: var(--nav-bg);
    border-left: 3px solid var(--amber);
    border-radius: 0 8px 8px 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 13px;
    margin: 12px 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.7;
  }

  @media (max-width: 760px) {
    /* Codes: drop the horizontal-scrolling table, show stacked cards instead.
       Cards keep the same capped-height vertical scroll as the table. */
    .codes-scroll { display: none; }
    .codes-cards {
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 10px;
    }
    .codes-cards-active { max-height: 402px; }
    .codes-cards-expired { max-height: 320px; }
    .codes-cards::-webkit-scrollbar { width: 6px; }
    .codes-cards::-webkit-scrollbar-track { background: transparent; }
    .codes-cards::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 999px; }
    .nav {
      height: auto;
      padding: 8px 0;
    }
    .nav .page-wrap {
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 12px !important;
    }
    .nav-logo { font-size: 16px; }
    .nav-right { margin-left: auto; }
    .nav-search-form { width: min(46vw, 180px); }
    .nav-search-input { font-size: 10px; padding-left: 9px; }
    .nav-links {
      order: 3;
      width: 100%;
      overflow-x: auto;
      gap: 4px;
      padding: 2px 0 1px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-link {
      flex: 0 0 auto;
      padding: 5px 9px;
      white-space: nowrap;
    }
    .post-layout {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .sidebar {
      position: static;
      top: auto;
    }
    .hero-img {
      min-height: 190px;
      border-radius: 10px;
    }
    .qi-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qi-credit { align-items: flex-start; flex-direction: column; gap: 3px; }
    .qi-credit .qi-val { text-align: left; }
    .toc-list { max-height: 148px; }

    .codes-table th:first-child,
    .codes-table td:first-child { min-width: 170px; }
    .req-card-grid { grid-template-columns: 1fr; }
    .req-block-head { align-items: flex-start; flex-direction: column; gap: 5px; }
    .req-table { min-width: 560px; }
    .req-block { overflow-x: auto; }
    .req-list li { grid-template-columns: 68px 1fr; }
    .related-row { grid-template-columns: 44px 1fr auto; padding: 9px 10px; }
    .related-thumb { width: 44px; height: 32px; }
    .related-row .related-main { grid-column: 2; grid-row: 1; }
    .related-row .related-arrow { grid-column: 3; grid-row: 1; }
    .related-panel-head { align-items: flex-start; flex-direction: column; gap: 3px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
  }

  @media (max-width: 480px) {
    .nav-right {
      width: 100%;
      margin-left: 0;
      order: 2;
    }
    .nav-search-form { width: 100%; }
  }


  /* ── SYSTEM / DEVICE REQUIREMENTS ── */
  .req-intro {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 10px;
  }
  .req-block {
    background: linear-gradient(180deg, rgba(16,24,39,0.98), rgba(13,21,37,0.98));
    border: 1px solid rgba(56,189,248,0.18);
    border-radius: 11px;
    overflow: hidden;
    margin-top: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  }
  .req-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(56,189,248,0.14);
    background: rgba(56,189,248,0.045);
  }
  .req-title {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #F0F6FF;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .req-title::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(56,189,248,0.35);
  }
  .req-chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: #7DD3FC;
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.25);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
  }
  .req-table {
    width: 100%;
    border-collapse: collapse;
  }
  .req-table th {
    font-size: 9px;
    font-weight: 800;
    color: #7DD3FC;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(36,49,73,0.85);
    background: rgba(6,12,24,0.18);
    text-align: left;
  }
  .req-table td {
    font-size: 11px;
    color: #DCE8F8;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(36,49,73,0.55);
    vertical-align: top;
    line-height: 1.55;
  }
  .req-table tr:last-child td { border-bottom: none; }
  .req-table tbody tr:hover td { background: rgba(56,189,248,0.025); }
  .req-table td:first-child {
    width: 22%;
    color: #93A9C8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.45px;
  }
  .req-table td:nth-child(2) { color: #C8D8EC; }
  .req-table td:nth-child(3) { color: #EAF0FF; font-weight: 500; }
  .req-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
  }
  .req-card {
    background: linear-gradient(180deg, rgba(16,24,39,0.96), rgba(13,21,37,0.96));
    border: 1px solid rgba(36,49,73,0.95);
    border-radius: 11px;
    padding: 11px 12px;
    position: relative;
    overflow: hidden;
  }
  .req-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: rgba(56,189,248,0.55);
  }
  .req-card:nth-child(2)::before { background: rgba(167,139,250,0.62); }
  .req-card:nth-child(3)::before { background: rgba(245,158,11,0.62); }
  .req-card-title {
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    color: #EAF0FF;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .req-card:nth-child(1) .req-card-title { color: #7DD3FC; }
  .req-card:nth-child(2) .req-card-title { color: #C4B5FD; }
  .req-card:nth-child(3) .req-card-title { color: #FBBF24; }
  .req-list {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .req-list li {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 8px;
    font-size: 11px;
    color: #DCE8F8;
    line-height: 1.45;
    padding: 5px 0;
    border-bottom: 1px solid rgba(36,49,73,0.42);
  }
  .req-list li:last-child { border-bottom: none; }
  .req-list span {
    color: #93A9C8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35px;
  }
  .req-note {
    font-size: 11px;
    color: #AFC0D8;
    line-height: 1.7;
    margin-top: 10px;
    background: rgba(56,189,248,0.045);
    border: 1px solid rgba(56,189,248,0.16);
    border-left: 3px solid rgba(56,189,248,0.55);
    border-radius: 0 9px 9px 0;
    padding: 9px 11px;
  }



  /* ── GAME PROFILE MEDIA: ISOLATED ── */
  .profile-media-copy { margin-bottom: 10px; }
  .profile-media-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
    gap: 12px;
    align-items: start;
  }
  .profile-media-primary,
  .profile-media-secondary {
    min-width: 0;
  }
  .profile-video-frame {
    width: 100%;
    min-height: 260px;
    aspect-ratio: 16 / 9;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin: 10px 0 12px;
  }
  .profile-video-frame video {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: contain;
    background: #000;
  }
  .profile-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .profile-media-subhead {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .profile-media-subhead i { font-size: 12px; color: var(--cyan); }
  .profile-shot-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 28%);
    gap: 9px;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .profile-shot-scroller::-webkit-scrollbar {
    height: 8px;
  }
  .profile-shot-scroller::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
  }
  .profile-shot-single {
    margin-top: 8px;
  }
  .profile-shot-card,
  .profile-shot-feature {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    display: block;
    scroll-snap-align: start;
    cursor: zoom-in;
  }
  .profile-shot-card img,
  .profile-shot-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .profile-shot-card:hover,
  .profile-shot-feature:hover { border-color: var(--cyan); }
  @media (max-width: 980px) {
    .profile-media-split {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 760px) {
    .profile-video-frame { min-height: 190px; border-radius: 10px; }
    .profile-shot-scroller { grid-auto-columns: minmax(210px, 82%); }
  }


  /* ── PROFILE IMAGE LIGHTBOX: ISOLATED ── */
  .profile-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 15, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 999;
  }
  .profile-lightbox.is-open { display: flex; }
  .profile-lightbox-inner {
    width: min(1060px, 96vw);
    height: min(680px, 88vh);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .profile-lightbox-figure {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
  }
  .profile-lightbox-img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(36,49,73,0.72);
    background: #050913;
    box-shadow: 0 22px 80px rgba(0,0,0,0.58);
    user-select: none;
    -webkit-user-drag: none;
  }
  .profile-lightbox-close,
  .profile-lightbox-nav {
    position: absolute;
    border: 1px solid rgba(36,49,73,0.82);
    background: rgba(7,11,20,0.72);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: color .15s, border-color .15s, background .15s;
    z-index: 3;
  }
  .profile-lightbox-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 16px;
  }
  .profile-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 54px;
    border-radius: 10px;
    font-size: 22px;
  }
  .profile-lightbox-prev { left: 10px; }
  .profile-lightbox-next { right: 10px; }
  .profile-lightbox-close:hover,
  .profile-lightbox-nav:hover {
    color: var(--cyan);
    border-color: rgba(56,189,248,0.65);
    background: rgba(13,21,37,0.9);
  }
  .profile-shot-card { cursor: zoom-in; }
  @media (max-width: 760px) {
    .profile-lightbox { padding: 12px; }
    .profile-lightbox-inner { width: 100%; height: 84vh; }
    .profile-lightbox-img { max-height: 84vh; }
    .profile-lightbox-close { top: 8px; right: 8px; width: 32px; height: 32px; }
    .profile-lightbox-nav { width: 34px; height: 48px; font-size: 20px; }
    .profile-lightbox-prev { left: 6px; }
    .profile-lightbox-next { right: 6px; }
  }


.site-brand-logo{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto}.footer-logo .site-brand-logo{width:21px;height:21px}

  /* ── SIDEBAR AUTHOR CARD ── */
  .sb-author-body { display: flex; gap: 10px; padding: 12px; align-items: flex-start; }
  .sb-author-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--cyan), #1B6E96);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #062231;
  }
  .sb-author-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .sb-author-info { min-width: 0; }
  .sb-author-name { font-size: 12px; font-weight: 600; color: var(--text); }
  .sb-author-role { font-size: 10px; color: var(--muted); margin-top: 1px; }
  .sb-author-bio { font-size: 10.5px; color: var(--muted); line-height: 1.55; margin-top: 7px; }
  .sb-author-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--cyan);
    margin-top: 8px;
    font-weight: 600;
  }
  .sb-author-link:hover { text-decoration: underline; }

  /* ── RATINGS & COMMENTS ── */
  .rc-summary-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .rc-summary-left {
    flex-shrink: 0;
    text-align: center;
    padding-right: 18px;
    border-right: 1px solid var(--surface2);
  }
  .rc-avg-score {
    font-family: 'Syne', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .rc-stars-static {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin: 6px 0 4px;
    color: var(--amber);
    font-size: 13px;
  }
  .rc-stars-static i.is-empty { color: var(--border2); }
  .rc-count { font-size: 10px; color: var(--dim); white-space: nowrap; }
  .rc-summary-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .rc-bar-row { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
  .rc-bar-row > span:first-child { width: 8px; flex-shrink: 0; }
  .rc-bar { flex: 1; height: 6px; background: var(--nav-bg); border-radius: 3px; overflow: hidden; }
  .rc-bar-fill { height: 100%; background: var(--amber); border-radius: 3px; }
  .rc-bar-pct { width: 30px; flex-shrink: 0; text-align: right; color: var(--dim); }

  .rc-rate-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .rc-rate-label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .rc-rate-stars { display: flex; gap: 4px; }
  .rc-rate-stars i {
    font-size: 19px;
    color: var(--border2);
    cursor: pointer;
    transition: color .12s, transform .12s;
  }
  .rc-rate-stars i:hover,
  .rc-rate-stars i.is-hover { color: var(--amber); transform: scale(1.08); }
  .rc-rate-stars.is-rated i.is-filled { color: var(--amber); }
  .rc-rate-stars.is-disabled i { cursor: not-allowed; }
  .rc-rate-hint { font-size: 10.5px; color: var(--dim); }
  .rc-rate-hint.is-done { color: var(--green); }

  .rc-comment-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 12px;
  }
  .rc-signin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .rc-signin-note { font-size: 11px; color: var(--dim); }
  .rc-user-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--surface2);
  }
  .rc-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cyan);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #06202E;
  }
  .rc-user-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .rc-user-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-signout-btn {
    font-size: 10px;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    transition: color .15s, border-color .15s;
  }
  .rc-signout-btn:hover { color: var(--text); border-color: var(--muted); }
  .rc-textarea {
    width: 100%;
    resize: vertical;
    min-height: 64px;
    background: var(--nav-bg);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s;
  }
  .rc-textarea:focus { border-color: rgba(56,189,248,0.58); }
  .rc-textarea:disabled { color: var(--dim); cursor: not-allowed; }
  .rc-comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
  }
  .rc-char-count { font-size: 10px; color: var(--dim); }
  .rc-submit-btn {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #06202E;
    background: var(--cyan);
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
  }
  .rc-submit-btn:hover:not(:disabled) { transform: translateY(-1px); }
  .rc-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .rc-comment-list { display: flex; flex-direction: column; gap: 10px; }
  .rc-comment-item {
    display: flex;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .rc-comment-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--violet);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #1A0E33;
  }
  .rc-comment-body { flex: 1; min-width: 0; }
  .rc-comment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
  .rc-comment-name { font-size: 12px; font-weight: 600; color: var(--text); }
  .rc-comment-stars { display: flex; gap: 1px; color: var(--amber); font-size: 10px; }
  .rc-comment-stars i.is-empty { color: var(--border2); }
  .rc-comment-time { font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; }
  .rc-comment-text { font-size: 12px; color: #C8D8EC; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
  .rc-comment-delete {
    font-size: 10px;
    color: var(--dim);
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 5px;
    padding: 0;
    font-family: 'Inter', sans-serif;
  }
  .rc-comment-delete:hover { color: var(--red); }
  .rc-empty-comments { font-size: 11px; color: var(--dim); text-align: center; padding: 18px 0; }
  .rc-loadmore-btn {
    display: block;
    margin: 10px auto 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 16px;
    cursor: pointer;
  }
  .rc-loadmore-btn:hover { color: var(--cyan); border-color: rgba(56,189,248,0.35); }
  .rc-error { font-size: 11px; color: var(--red); padding: 8px 0 0; }
  @media (max-width: 620px) {
    .rc-summary-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .rc-summary-left { border-right: none; border-bottom: 1px solid var(--surface2); padding-right: 0; padding-bottom: 12px; }
  }

  /* ── AD SLOT ── */
  .ad-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px 0; }
  .ad-slot-label { font-size: 9px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; }
  .ad-slot-frame { max-width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }

  /* ── AD RESPONSIVE + NATIVE + SPONSOR ── */
  .ad-slot--mobile { display: none; }
  .ad-native {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 14px 0;
  }
  .ad-native .ad-slot-label { align-self: center; }
  .ad-native #container-7c94ae9b66edf69ed936e16a8becf9ed {
    border-radius: 8px;
    overflow: hidden;
  }
  .sb-sponsor {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    transition: border-color .15s;
  }
  .sb-sponsor:hover { border-color: var(--cyan); }
  .sb-sponsor-label {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--dim);
    background: var(--nav-bg);
    border: 1px solid var(--border2);
    border-radius: 4px;
    padding: 2px 5px;
    flex-shrink: 0;
  }
  .sb-sponsor-text {
    font-size: 10.5px;
    color: var(--muted);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sb-sponsor .ti { font-size: 11px; color: var(--dim); flex-shrink: 0; }
  @media (max-width: 760px) {
    .ad-slot--desktop { display: none; }
    .ad-slot--mobile { display: flex; }
    .sb-ad-tall { display: none; }
  }

/* COSM-GAME MOBILE RESPONSIVE HARDENING v1 */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body,
  main,
  .page-wrap,
  .post-layout,
  .main-col,
  .sidebar,
  .section,
  .section-p,
  .qi-card,
  .toc-card,
  .source-block,
  .related-panel,
  .related-stack {
    min-width: 0;
    max-width: 100%;
  }

  .page-wrap {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .nav {
    height: auto;
    padding: 8px 0;
  }

  .nav > .page-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 42vw);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 12px !important;
  }

  .nav-logo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 16px;
    white-space: nowrap;
  }

  .nav-right {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .nav-search-form {
    width: 100% !important;
    max-width: none;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 2px 0 1px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-link {
    flex: 0 0 auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    white-space: nowrap;
  }

  .post-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    padding-top: 14px;
  }

  .main-col,
  .sidebar {
    width: 100%;
  }

  .sidebar {
    position: static !important;
    top: auto !important;
  }

  .breadcrumb,
  .art-subline,
  .art-meta,
  .plat-row,
  .source-row,
  .footer-bottom,
  .footer-legal {
    max-width: 100%;
  }

  .breadcrumb,
  .art-title,
  .art-subline,
  .art-meta,
  .section-h,
  .section-p,
  .source-link,
  .related-item-title,
  .download-title,
  .download-sub,
  .media-title,
  .media-sub,
  .qi-val,
  .qi-label,
  .faq-q,
  .faq-a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .art-title {
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.22;
  }

  .art-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* The separator is its own flex item, so wrapping regularly stranded a lone
     dot at the end of a line. Attaching it to the tag before it as ::after
     makes tag-and-dot a single unbreakable unit that wraps together. */
  .art-subline { gap: 5px; row-gap: 3px; font-size: 10.5px; }
  .art-subline .sub-dot { display: none; }
  .art-subline a:not(:last-child)::after {
    content: '·';
    margin-left: 5px;
    color: var(--dim);
  }

  .hero-img {
    width: 100%;
    min-height: clamp(180px, 52vw, 240px);
    border-radius: 10px;
    background-position: center;
  }

  .qi-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qi-stat,
  .qi-val,
  .qi-platforms,
  .qi-genres,
  .qi-credit,
  .qi-platform-pills,
  .qi-genre-pills {
    min-width: 0;
  }

  .qi-credit {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .qi-credit .qi-val { text-align: left; }

  .media-grid,
  .download-grid,
  .profile-shot-row,
  .req-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-video-frame,
  .profile-video-frame iframe,
  .profile-video-frame video,
  .media-card,
  .download-card,
  .profile-shot-card,
  .profile-shot-card img,
  video,
  iframe,
  img,
  svg,
  canvas {
    max-width: 100%;
  }

  .profile-video-frame {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .profile-video-frame iframe,
  .profile-video-frame video {
    width: 100%;
    height: 100%;
  }

  .codes-scroll,
  .guide-table-wrap,
  .table-scroll,
  .req-block,
  .info-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .req-table,
  .guide-table {
    max-width: none;
  }

  .related-row {
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .related-main { min-width: 0; }

  .source-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .source-date {
    margin-left: 0;
    white-space: normal;
  }

  .rc-summary-card,
  .rc-rate-box,
  .rc-signin-row,
  .rc-user-row,
  .rc-comment-item,
  .rc-comment-actions {
    max-width: 100%;
    min-width: 0;
  }

  .rc-rate-box,
  .rc-user-row {
    align-items: flex-start;
  }

  .rc-comment-actions {
    gap: 10px;
  }

  .ad-slot,
  .ad-slot-frame,
  .ad-native,
  .sb-sponsor {
    max-width: 100%;
  }

  .ad-slot-frame iframe {
    max-width: 100%;
  }

  .footer-inner {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }

  .footer-grid > div:first-child { grid-column: auto; }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .nav > .page-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 40vw);
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-wrap,
  .footer-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-logo { font-size: 15px; }
  .nav-search-input { font-size: 10px; }
  .art-title { font-size: clamp(19px, 6.2vw, 22px); }
  .qi-stat-row { grid-template-columns: minmax(0, 1fr); }
  .hero-img { min-height: 220px; }
  .related-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .related-thumb { width: 40px; height: 30px; }
  .rc-comment-actions { align-items: flex-start; flex-direction: column; }
  .rc-submit-btn { width: 100%; }
}

/* COSM-GAME MOBILE COMPACT QUICK INFO + ORGANIZED MEDIA v1 */
@media (max-width: 760px) {
  /* Keep Quick Info / Summary visually close to desktop instead of stacking tall. */
  .qi-card {
    padding: 9px 10px;
    margin-bottom: 10px;
    border-radius: 9px;
  }

  .qi-card-head {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.65px;
    margin-bottom: 7px;
    gap: 5px;
  }

  .qi-card-head i { font-size: 11px; }

  .qi-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
    margin-bottom: 7px;
  }

  .qi-stat {
    padding: 6px 7px;
    border-radius: 7px;
    min-height: 0;
  }

  .qi-label {
    font-size: 7.5px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    white-space: normal;
  }

  .qi-val {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .qi-stat .code-pill {
    max-width: 100%;
    padding: 2px 4px;
    font-size: 8.5px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .qi-stat .model-link {
    padding: 2px 5px;
    font-size: 8.5px;
    line-height: 1.2;
  }

  .qi-stat .model-sep { padding: 0 2px; }

  .qi-platforms,
  .qi-genres,
  .qi-credit {
    padding: 7px 8px;
    border-radius: 7px;
  }

  .qi-platforms,
  .qi-genres { margin-bottom: 6px; }

  /* One compact swipeable pill line prevents platform/genre lists becoming very tall. */
  .qi-platform-pills,
  .qi-genre-pills {
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .qi-platform-pills::-webkit-scrollbar,
  .qi-genre-pills::-webkit-scrollbar { display: none; }

  .qi-platform-pills > *,
  .qi-genre-pills > * { flex: 0 0 auto; }

  .qi-platform-pills .plat-pill,
  .qi-platform-pills .platform-pill,
  .qi-genre-pills .genre-pill {
    font-size: 8.5px;
    padding: 2px 6px;
  }

  /* Keep credit/redeem/source row horizontal like desktop, but allow the value to wrap. */
  .qi-credit {
    align-items: center !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 8px;
  }

  .qi-credit .qi-label {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .qi-credit .qi-val {
    min-width: 0;
    text-align: right !important;
    overflow-wrap: anywhere;
  }

  /* Screenshots stay compact in a horizontal strip, while a single screenshot stays large. */
  .profile-shot-scroller {
    gap: 7px;
    margin-top: 7px;
  }

  .profile-shot-card,
  .profile-shot-feature {
    border-radius: 8px;
  }

  .profile-media-subhead {
    margin: 3px 0 7px;
  }

  .profile-video-frame {
    margin: 8px 0 10px;
    border-radius: 10px;
  }
}

@media (max-width: 360px) {
  .qi-card { padding: 8px; }
  .qi-stat-row { gap: 4px; }
  .qi-stat { padding: 5px; }
  .qi-label { font-size: 7px; }
  .qi-val { font-size: 9.5px; }
  .qi-stat .code-pill,
  .qi-stat .model-link { font-size: 8px; }
  .qi-credit { gap: 6px; }
  .profile-shot-row { gap: 6px; }
}
/* Supporting video metadata */
.profile-video-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 18px;font-size:13px;line-height:1.5}
.profile-video-title{font-weight:700;color:var(--text,#eef2ff);min-width:0;overflow-wrap:anywhere}
.profile-video-source{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;text-decoration:none}
@media(max-width:640px){.profile-video-meta{align-items:flex-start;flex-direction:column;gap:6px;margin-top:8px}.profile-video-source{font-size:12px}}


/* ── DEVICE-SPECIFIC CODE REDEMPTION STEPS ── */
.code-redeem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 14px 0 4px;
}
.code-redeem-card {
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 10px;
  padding: 13px 14px;
}
.code-redeem-title {
  margin: 0 0 9px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.code-redeem-list {
  margin: 0;
  padding-left: 21px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.code-redeem-list li + li { margin-top: 5px; }
.code-history-cell { min-width: 280px; line-height: 1.55; }
.code-media-section { scroll-margin-top: 84px; }

@media (max-width: 640px) {
  .code-redeem-grid { grid-template-columns: 1fr; }
  .code-history-cell { min-width: 240px; }
}


/* ── MID-ARTICLE AD SPACING ── */
.ad-slot--inline { margin: 22px 0 26px; }


/* ── EDITOR INLINE FORMATTING ───────────────────────────────────────────
   Emitted by the post-editor toolbar and passed through the allowlist in
   cg_inline_html() / cg_render_block(). Plain posts never use these rules,
   so nothing published before the toolbar existed changes appearance.
   ─────────────────────────────────────────────────────────────────────── */
.section-p strong,
.section-ul strong,
.section-ol strong,
.section-quote strong { color: var(--text); font-weight: 600; }

.section-p code,
.section-ul code,
.section-ol code,
.section-quote code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

.section-p mark,
.section-ul mark,
.section-ol mark,
.section-quote mark {
  background: rgba(56, 189, 248, 0.16);
  color: var(--text);
  padding: 0 3px;
  border-radius: 3px;
}

.section-p u,
.section-ul u,
.section-ol u { text-underline-offset: 2px; }

.section-p a.real-link,
.section-ul a.real-link,
.section-ol a.real-link,
.section-quote a.real-link { color: var(--cyan); }
.section-p a.real-link:hover,
.section-ul a.real-link:hover,
.section-ol a.real-link:hover,
.section-quote a.real-link:hover { text-decoration: underline; }

/* colours */
.cg-cyan   { color: var(--cyan); }
.cg-green  { color: var(--green); }
.cg-amber  { color: var(--amber); }
.cg-red    { color: var(--red); }
.cg-violet { color: var(--violet); }
.cg-lime   { color: var(--lime); }
.cg-text   { color: var(--text); }
.cg-muted  { color: var(--muted); }

/* sizes */
.cg-sm { font-size: 0.88em; }
.cg-lg { font-size: 1.13em; }
.cg-xl { font-size: 1.30em; font-weight: 600; }

/* block-level options */
.section-h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin: 18px 0 8px;
  scroll-margin-top: 84px;
}
.section-h3:first-child { margin-top: 0; }

.section-ul,
.section-ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.section-ul li + li,
.section-ol li + li { margin-top: 5px; }
.section-ul li::marker { color: var(--cyan); }
.section-ol li::marker { color: var(--cyan); font-weight: 600; }

.section-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--cyan);
  background: var(--surface);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

  /* Released / Expires columns in the code tables */
  .code-date-cell {
    width: 104px;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--muted);
  }
  .codes-table td.code-date-cell { vertical-align: middle; }

  /* Manual-override taxonomy colours (never used by the auto palette) */
  /* Taxonomy palette: 24 hand-pickable colours, hues spaced so no two
     read as the same at pill size. */
  .tax-c-red      { --tax-color:#F87171; --tax-rgb:248,113,113; color:var(--tax-color) !important; }
  .tax-c-crimson  { --tax-color:#E11D48; --tax-rgb:225,29,72; color:var(--tax-color) !important; }
  .tax-c-rose     { --tax-color:#F43F5E; --tax-rgb:244,63,94; color:var(--tax-color) !important; }
  .tax-c-pink     { --tax-color:#F472B6; --tax-rgb:244,114,182; color:var(--tax-color) !important; }
  .tax-c-magenta  { --tax-color:#D946EF; --tax-rgb:217,70,239; color:var(--tax-color) !important; }
  .tax-c-fuchsia  { --tax-color:#E879F9; --tax-rgb:232,121,249; color:var(--tax-color) !important; }
  .tax-c-purple   { --tax-color:#A855F7; --tax-rgb:168,85,247; color:var(--tax-color) !important; }
  .tax-c-violet   { --tax-color:#8B5CF6; --tax-rgb:139,92,246; color:var(--tax-color) !important; }
  .tax-c-indigo   { --tax-color:#6366F1; --tax-rgb:99,102,241; color:var(--tax-color) !important; }
  .tax-c-blue     { --tax-color:#3B82F6; --tax-rgb:59,130,246; color:var(--tax-color) !important; }
  .tax-c-sky      { --tax-color:#38BDF8; --tax-rgb:56,189,248; color:var(--tax-color) !important; }
  .tax-c-cyan     { --tax-color:#22D3EE; --tax-rgb:34,211,238; color:var(--tax-color) !important; }
  .tax-c-teal     { --tax-color:#14B8A6; --tax-rgb:20,184,166; color:var(--tax-color) !important; }
  .tax-c-emerald  { --tax-color:#10B981; --tax-rgb:16,185,129; color:var(--tax-color) !important; }
  .tax-c-green    { --tax-color:#4ADE80; --tax-rgb:74,222,128; color:var(--tax-color) !important; }
  .tax-c-mint     { --tax-color:#6EE7B7; --tax-rgb:110,231,183; color:var(--tax-color) !important; }
  .tax-c-lime     { --tax-color:#A3E635; --tax-rgb:163,230,53; color:var(--tax-color) !important; }
  .tax-c-yellow   { --tax-color:#FACC15; --tax-rgb:250,204,21; color:var(--tax-color) !important; }
  .tax-c-amber    { --tax-color:#F59E0B; --tax-rgb:245,158,11; color:var(--tax-color) !important; }
  .tax-c-orange   { --tax-color:#FB923C; --tax-rgb:251,146,60; color:var(--tax-color) !important; }
  .tax-c-coral    { --tax-color:#FF7A59; --tax-rgb:255,122,89; color:var(--tax-color) !important; }
  .tax-c-brown    { --tax-color:#B45309; --tax-rgb:180,83,9; color:var(--tax-color) !important; }
  .tax-c-slate    { --tax-color:#94A3B8; --tax-rgb:148,163,184; color:var(--tax-color) !important; }
  .tax-c-steel    { --tax-color:#64748B; --tax-rgb:100,116,139; color:var(--tax-color) !important; }

  /* Related-posts sidebar rows: thumbnail + clamped title + type badge */
  .sb-rel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--surface2);
    transition: background .15s;
  }
  .sb-rel:last-child { border-bottom: none; }
  .sb-rel:hover { background: var(--surface2); }
  .sb-rel-thumb {
    width: 52px; height: 38px;
    border-radius: 6px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
  }
  .sb-rel-thumb-empty { background: linear-gradient(135deg,#1A3050,#0F2040); }
  .sb-rel-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .sb-rel-title {
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sb-rel:hover .sb-rel-title { color: var(--cyan); }
  .sb-rel-badge {
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid currentColor;
    opacity: .9;
  }

  /* ── Codes tables: shell, chips, collapsible expired ───────────── */
  .table-shell{
    background: var(--surface, #0f1322);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 4px;
    /* Restores the original .codes-scroll behaviour: capped height with its
       own vertical scrollbar, so a long code list never runs down the page. */
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .table-shell::-webkit-scrollbar{ height:8px; width:8px; }
  .table-shell::-webkit-scrollbar-track{ background:transparent; }
  .table-shell::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:4px; }
  .table-shell::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }
  /* table-layout:fixed is what makes the colgroup widths binding, which is in
     turn what lets a long code truncate instead of stretching its column. */
  .codes-table{ width:100%; border-collapse:collapse; table-layout:fixed; margin-bottom:0; }
  /* The legacy 760px rule puts a 170px min-width on the first column. With the
     fixed layout above that no longer sizes the column, it only forces the
     shell to scroll sideways, so it is switched off inside the new shell. */
  .table-shell .codes-table th:first-child,
  .table-shell .codes-table td:first-child{ min-width:0; }
  .table-shell-active  { max-height: 480px; }
  .table-shell-expired { max-height: 480px; }
  .cc-w-code{width:13%} .cc-w-rewards{width:26%} .cc-w-region{width:8%}
  .cc-w-released{width:11%} .cc-w-expires{width:11%} .cc-w-info{width:31%}

  .codes-table thead th{
    text-align:left; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--muted); font-weight:700; padding:11px 14px;
    border-bottom:1px solid var(--border2); white-space:nowrap;
    position:sticky; top:0; z-index:2;
    background:var(--surface2);
  }
  .codes-table tbody td{
    padding:12px 14px; font-size:12px; line-height:1.6; vertical-align:middle;
    color:#C8D8EC; border-bottom:1px solid var(--surface2);
    overflow-wrap:break-word; word-break:normal;
  }
  /* Zebra banding carries the eye across six columns; the hover row then still
     reads as distinct because it goes a full step lighter than either band. */
  .codes-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
  .codes-table tbody tr:hover td{ background:var(--surface2); }
  .codes-table tbody tr:last-child td{ border-bottom:none; }
  .codes-table td.cc-rewards, .codes-table td.cc-info{ color:var(--muted); }
  .codes-table td.cc-released{ color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .codes-table td.cc-region, .codes-table td.cc-expires{ white-space:nowrap; }

  /* ── code copy button ──────────────────────────────────────────────
     Every code gets the same footprint whatever its length, so the column
     never jumps. The label truncates and scrolls on hover instead. */
  /* --qi is set by the qi-a-* class the renderer puts on the shell, so the
     table picks up whatever colour the Codes Summary ticket is using. The
     fallback keeps a table cyan if it is ever rendered without an accent. */
  .code-copy{
    appearance:none; -webkit-appearance:none;
    display:inline-flex; align-items:center; gap:6px;
    width:100%; max-width:132px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px; font-weight:600; color:var(--qi, var(--cyan));
    background:var(--surface);
    border:1px solid color-mix(in srgb, var(--qi, var(--cyan)) 22%, transparent);
    border-radius:6px; padding:5px 7px; cursor:pointer; text-align:left;
    transition:border-color .15s ease, background .15s ease;
    /* Second line of defence: even if the inner clip is ever bypassed, no
       label can escape past the button's own border. */
    overflow:hidden;
  }
  /* Clipping lives here, on an element that never moves. Putting overflow on
     the sliding text itself would move its clip box with it, dragging the
     label out past the button border instead of revealing the rest of it. */
  .code-copy-clip{
    display:block; flex:1 1 auto; min-width:0; overflow:hidden;
  }
  /* Only the text moves. */
  .code-copy-text{
    display:inline-block; white-space:nowrap;
    vertical-align:middle; transform:translateX(0);
  }
  /* Soft right edge stands in for the ellipsis: it marks the code as cut off,
     and unlike an ellipsis it keeps working while the text is mid-slide. */
  .code-copy-clip.is-overflowing{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent 100%);
  }
  .code-copy i{ font-size:12px; color:var(--dim); flex-shrink:0; margin-left:auto; }
  .code-copy:hover{ border-color:color-mix(in srgb, var(--qi, var(--cyan)) 50%, transparent); background:var(--surface2); }
  .code-copy:hover i{ color:var(--qi, var(--cyan)); }
  .code-copy:focus-visible{ outline:2px solid color-mix(in srgb, var(--qi, var(--cyan)) 50%, transparent); outline-offset:2px; }
  .code-copy.is-copied{ border-color:rgba(34,197,94,.5); color:var(--green); background:rgba(34,197,94,.08); }
  .code-copy.is-copied i{ color:var(--green); }
  /* Clicking while hovering a truncated code would otherwise leave the label
     scrolled off to the left, hiding the "Copied" confirmation. The fade goes
     too, since the short confirmation text is not cut off. */
  .code-copy.is-copied .code-copy-text{ transform:translateX(0) !important; }
  .code-copy.is-copied .code-copy-clip{ -webkit-mask-image:none; mask-image:none; }

  .badge{
    display:inline-block; font-size:10px; color:var(--muted);
    border:1px solid var(--border2); border-radius:5px;
    padding:2px 7px; white-space:nowrap;
  }
  .badge.no-expiry{ color:var(--green); border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.06); }
  .badge.expired{ color:var(--red); border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06); }

  /* Expired table: identical shell, everything a shade quieter. */
  .table-shell.is-expired tbody td{ color:var(--dim); }
  .table-shell.is-expired .code-copy{ color:var(--muted); border-color:var(--border2); }
  .table-shell.is-expired .code-copy:hover{ color:var(--text); }
  .table-shell.is-expired td.cc-rewards,
  .table-shell.is-expired td.cc-info{ color:var(--dim); }
  .codes-table.expired{ opacity:1; }

  /* ── expired disclosure ───────────────────────────────────────────── */
  .codes-expired{ margin-top:2px; }
  .codes-expired-head{
    display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
    padding:13px 16px; background:var(--surface);
    border:1px solid var(--border2); border-radius:10px;
    font-size:13px; font-weight:700; color:var(--text); user-select:none;
    transition:border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .codes-expired-head::-webkit-details-marker{ display:none; }
  .codes-expired-head::marker{ content:''; }
  .codes-expired-head:hover{
    border-color:color-mix(in srgb, var(--qi, var(--cyan)) 45%, transparent); background:var(--surface2);
    transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  }
  .codes-expired-head:focus-visible{ outline:2px solid color-mix(in srgb, var(--qi, var(--cyan)) 50%, transparent); outline-offset:2px; }
  .ce-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:7px;
    background:rgba(239,68,68,.1); color:var(--red);
    flex-shrink:0; font-size:14px;
  }
  .ce-labels{ display:flex; flex-direction:column; min-width:0; }
  .ce-label{ color:var(--text); }
  .ce-sub{ font-weight:500; color:var(--muted); font-size:11.5px; }
  .ce-count{
    font-size:11px; font-weight:700; color:var(--qi, var(--cyan));
    background:color-mix(in srgb, var(--qi, var(--cyan)) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--qi, var(--cyan)) 28%, transparent);
    border-radius:999px; padding:2px 9px;
  }
  .ce-cta{
    margin-left:auto; display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:var(--qi, var(--cyan)); white-space:nowrap;
  }
  .ce-cta i{ font-size:15px; transition:transform .2s ease; }
  .ce-cta-text::after{ content:'View'; }
  .codes-expired[open] .ce-cta i{ transform:rotate(180deg); }
  .codes-expired[open] .ce-cta-text::after{ content:'Hide'; }
  .codes-expired[open] .codes-expired-head{
    border-bottom-left-radius:0; border-bottom-right-radius:0;
    background:var(--surface2);
    border-color:color-mix(in srgb, var(--qi, var(--cyan)) 45%, transparent);
    transform:none; box-shadow:none;
  }
  .codes-expired[open] .table-shell{
    margin-top:-1px; border-top:none;
    border-top-left-radius:0; border-top-right-radius:0;
  }

  @media (max-width:480px){
    .ce-sub{ display:none; }
    .ce-cta-text{ display:none; }
  }

  /* ── mobile: stays a real table, scrolled sideways ─────────────────
     The rows are not stacked into cards. Percentage column widths collapse
     to unreadable slivers on a phone, so below this width the columns switch
     to fixed pixel widths and the table gets a min-width larger than the
     screen. The shell already has overflow-x:auto, so that turns into a
     horizontal scroll with the header still pinned to the top. */
  @media (max-width:720px){
    .table-shell{ overflow-x:auto; }
    .table-shell-active  { max-height: 560px; }
    .table-shell-expired { max-height: 560px; }
    /* 820px cut off almost everything past the first column on a phone.
       680px keeps the columns readable while showing far more at rest. */
    .codes-table{ min-width:680px; }
    .cc-w-code{width:140px} .cc-w-rewards{width:150px} .cc-w-region{width:64px}
    .cc-w-released{width:88px} .cc-w-expires{width:88px} .cc-w-info{width:150px}
    .codes-table thead th{ padding:10px 12px; }
    .codes-table tbody td{ padding:11px 12px; }
    /* data-label is only used by the old card mode; keep it off the table. */
    .codes-table td[data-label]::before{ display:none; }

    /* The code column stays pinned while the rest scrolls, so you can always
       see which code a row belongs to. Sticky cells need an opaque background
       of their own, otherwise the scrolling columns show through them, and it
       has to match the row banding to avoid a visible seam. */
    .codes-table thead th:first-child,
    .codes-table td.cc-code{
      position:sticky; left:0; z-index:1;
      background:var(--surface);
      box-shadow:1px 0 0 var(--border2);
    }
    .codes-table thead th:first-child{ z-index:3; background:var(--surface2); }
    .codes-table tbody tr:nth-child(even) td.cc-code{
      background:color-mix(in srgb, #fff 1.5%, var(--surface));
    }
    .codes-table tbody tr:hover td.cc-code{ background:var(--surface2); }
  }

  /* Touch devices get no hover, so a truncated code could never be revealed.
     Wrapping instead of clipping keeps every code fully readable there. */
  @media (hover:none){
    .code-copy{ height:auto; align-items:flex-start; }
    .code-copy-clip{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
    .code-copy-text{ white-space:normal; overflow-wrap:anywhere; transform:none !important; }
  }

  /* .faq-head used to be a 10px uppercase label on a <div>. It is an <h2>
     now, so it takes the same treatment as every other section heading
     instead of reading like a caption. */
  h2.faq-head{
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--surface2);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  h2.faq-head i{ font-size: 14px; color: var(--cyan); }

  /* ── Redemption guide: typographic tabs + route line ───────────── */
  /* Sits under the section intro paragraph, so it needs the same breathing
     room a .section-h3 gets (18px) rather than butting against the text. */
  .route-guide{ margin-top: 18px; }

  .route-tabs{
    display:flex; gap:26px; flex-wrap:wrap;
    border-bottom:1px solid var(--line, #232a40);
    margin-bottom:20px;
  }
  .route-tab{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:4px;
    background:none; border:none; cursor:pointer; padding:0 0 14px;
    position:relative; text-align:left;
    /* Tabs without a sub-label would otherwise be a line shorter, which
       misaligns the row and the active underline. */
    min-height:42px;
  }
  /* One step below .section-h3 (14px/600) so the section title still leads,
     and in the same Syne family as every other heading on the page. */
  .route-tab .tab-title{
    font-family:'Syne', sans-serif;
    font-size:13px; font-weight:700; letter-spacing:0;
    color:var(--muted); transition:color .15s ease;
  }
  .route-tab .tab-sub{
    font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--muted); opacity:.85; transition:color .15s ease, opacity .15s ease;
  }
  .route-tab:hover .tab-sub{ opacity:1; }
  .route-tab:hover .tab-title{ color:var(--text); }
  .route-tab.active .tab-title{ color:var(--text); }
  .route-tab.active .tab-sub{ color:var(--ra); opacity:1; }
  .route-tab.active::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ra);
  }
  .route-tab:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px; }

  /* accent per route, set on both the tab and its panel */
  .ra-blue  { --ra:#5b9dff; }
  .ra-green { --ra:#3ecf8e; }
  .ra-muted { --ra:#8f97b0; }
  .ra-amber { --ra:#F59E0B; }

  .route-panel{ display:none; }
  .route-panel.active{ display:block; animation:routeFade .2s ease; }
  @keyframes routeFade{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; transform:translateY(0);} }

  ol.route-line{
    position:relative; padding:0 0 0 30px; margin:0; list-style:none;
  }
  ol.route-line::before{
    content:''; position:absolute; left:8px; top:9px; bottom:9px; width:2px;
    background:var(--ra); opacity:.3;
  }
  .route-line .stop{ position:relative; padding-bottom:20px; }
  .route-line .stop:last-child{ padding-bottom:0; }
  .route-line .stop-dot{
    position:absolute; left:-30px; top:2px; width:17px; height:17px; border-radius:50%;
    background:var(--surface, #0f1322); border:2px solid var(--ra);
  }
  .route-line .stop.terminus .stop-dot{
    border-radius:3px; background:var(--ra); width:15px; height:15px; left:-29px; top:3px;
  }
  .route-line .stop-text{ font-size:12px; color:var(--text); line-height:1.7; display:block; padding-top:1px; }
  .route-line .stop.terminus .stop-text{ color:var(--muted); }

  @media (max-width:480px){
    .route-tabs{ gap:18px; }
    .route-tab .tab-title{ font-size:12.5px; }
  }

  /* ── Codes Summary: ticket ─────────────────────────────────────── */
  /* The frame is what the breakpoints below measure. A viewport media query
     can't see that the 220px sidebar is eating into the main column, so the
     ticket used to stack too late next to a sidebar and too early without
     one. A container query always knows the real space the ticket has. */
  .qi-ticket-frame{ container-type: inline-size; }

  .qi-ticket{
    --qi: #f2b84b;
    position:relative; display:flex; width:100%; margin-bottom:14px;
    box-shadow:0 20px 60px -24px rgba(0,0,0,.6);
  }
  .qi-a-gold  { --qi:#f2b84b; } .qi-a-cyan { --qi:#38BDF8; }
  .qi-a-green { --qi:#4ADE80; } .qi-a-amber{ --qi:#F59E0B; }
  .qi-a-violet{ --qi:#A78BFA; } .qi-a-red  { --qi:#F87171; }
  .qi-a-blue  { --qi:#60A5FA; } .qi-a-pink { --qi:#F472B6; }

  .qi-main{
    flex:1; min-width:0;
    background:linear-gradient(160deg,#141b32,#0c0f1d);
    border:1px solid color-mix(in srgb, var(--qi) 28%, rgba(255,255,255,.07));
    border-right:none;
    border-radius:12px 0 0 12px; padding:12px 20px;
    display:flex; flex-direction:column; gap:10px;
  }
  .qi-eyebrow{
    font-family:'Syne',sans-serif; font-weight:700; font-size:12px;
    letter-spacing:.14em; text-transform:uppercase; text-align:center;
    color:var(--text); padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .qi-stats-row{ display:flex; align-items:center; gap:20px; flex:1; }

  /* The count now sits beside a 3-row list plus a rating line, so it needs its
     own filled panel to carry equal weight instead of floating in dead space. */
  .qi-hero{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; flex-shrink:0; padding:10px 18px; align-self:stretch;
    background:color-mix(in srgb, var(--qi) 6%, transparent);
    border-radius:10px;
  }
  /* Solid fill rather than a gradient (which softened the edges), a faux-bold
     text-stroke since Syne stops at 700, and one tight glow instead of a wide
     blur that was doubling the shape. */
  .qi-hero-num{
    font-family:'Syne',sans-serif; font-weight:700; font-size:48px; line-height:1;
    letter-spacing:-.01em; font-variant-numeric:tabular-nums;
    color:var(--qi);
    -webkit-text-stroke:.75px var(--qi);
    text-shadow:0 0 14px color-mix(in srgb, var(--qi) 50%, transparent);
  }
  .qi-hero-label,
  .qi-newest-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  }
  .qi-hero-verified{ font-size:9.5px; color:var(--dim,#576880); letter-spacing:.03em; text-align:center; }
  /* Transparent on desktop: the label and verified line stay direct children
     of .qi-hero, so the column layout is unchanged. It only becomes a real
     box in the narrow layout further down. */
  .qi-hero-meta{ display:contents; }

  .qi-newest{
    position:relative;
    display:flex; flex:1; flex-direction:column; align-items:stretch; text-align:left;
    gap:5px; padding:2px 14px; min-width:0;
    border-left:1px dotted rgba(255,255,255,.16);
    background:transparent;
    border-radius:10px;
  }
  .qi-newest .qi-newest-label{ color:var(--qi); opacity:.9; font-weight:700; text-align:center; }
  .qi-released{ font-size:11.5px; color:var(--muted); opacity:.8; }

  /* Rows were centering independently, so a different code length pushed every
     date to a different x-position. A shared grid track lines up all the codes
     and all the dates regardless of string length. minmax(0,1fr) lets the date
     column actually shrink: a plain 1fr track has an automatic min width equal
     to its content, which is what used to run the text past the card edge. */
  .qi-newest-list{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:12px; row-gap:6px; align-items:center; width:100%;
  }
  .qi-newest-entry{ display:contents; }
  .qi-released{ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

  /* justify-content pushes the code and the copy icon to opposite ends of the
     shared column width, so every icon lands in the same place instead of
     hugging whatever length each code happens to be. The cap stops one long
     code stretching the column and squeezing the dates; the full string stays
     in data-copy-code and title, so copying and hovering are unaffected. */
  .qi-chip{
    display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
    background:color-mix(in srgb, var(--qi) 12%, transparent);
    border:1px dashed color-mix(in srgb, var(--qi) 40%, transparent);
    border-radius:7px; padding:5px 16px 5px 13px; cursor:pointer; max-width:236px;
    font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace; color:var(--text);
    transition:background .15s ease, border-color .15s ease;
  }
  .qi-chip:hover{ background:color-mix(in srgb, var(--qi) 20%, transparent);
                  border-color:color-mix(in srgb, var(--qi) 75%, transparent);
                  transform:translateY(-1px); }
  .qi-chip:active{ transform:translateY(0); }
  .qi-chip i{ font-size:13px; color:var(--qi); opacity:.75; }
  .qi-chip:hover i{ opacity:1; }

  /* Slow breathing halo, plus a shimmer sweep every few seconds. Both are
     decoration only -- the button, its data-copy-code and the click handler
     are untouched. */
  @keyframes qiHalo{
    0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--qi) 0%, transparent); }
    50%    { box-shadow:0 0 0 5px color-mix(in srgb, var(--qi) 14%, transparent); }
  }
  @keyframes qiSheen{
    0%   { transform:translateX(-120%); }
    60%  { transform:translateX(220%); }
    100% { transform:translateX(220%); }
  }
  .qi-chip{ animation:qiHalo 2.8s ease-in-out infinite; overflow:hidden; }
  .qi-chip::after{
    content:''; position:absolute; inset:0 auto 0 0; width:38%;
    background:linear-gradient(100deg, transparent,
               color-mix(in srgb, var(--qi) 26%, transparent), transparent);
    transform:translateX(-120%);
    animation:qiSheen 4.6s ease-in-out infinite;
    pointer-events:none;
  }
  .qi-chip{ position:relative; }
  .qi-chip:hover, .qi-chip.is-copied{ animation:none; }
  .qi-chip:hover::after, .qi-chip.is-copied::after{ animation:none; opacity:0; }

  @media (prefers-reduced-motion: reduce){
    .qi-chip{ animation:none; }
    .qi-chip::after{ animation:none; opacity:0; }
    .qi-chip:hover{ transform:none; }
  }
  .qi-chip:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  .qi-chip code{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .qi-chip i{ flex-shrink:0; }
  .qi-chip.is-copied{ color:#3ecf8e; border-color:rgba(62,207,142,.6);
                      background:rgba(62,207,142,.12); }
  .qi-chip.is-copied i{ color:#3ecf8e; opacity:1; }

  /* ── Codes Summary: inline rating ──────────────────────────────────
     Same hover/fill pattern and the same is-disabled / is-rated / is-filled
     state classes the #rcUserStars widget uses, so ratings-comments.js can
     drive both widgets with one code path. */
  .qi-rating-line{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:1px; flex-wrap:wrap;
  }
  .qi-rate-stars{ display:inline-flex; gap:5px; }
  .qi-rate-stars i{
    font-size:17px; line-height:1; color:var(--border2,#243149); cursor:pointer;
    transition:color .12s ease, transform .12s ease;
  }
  .qi-rate-stars i:hover,
  .qi-rate-stars i.is-hover{ color:var(--amber); transform:scale(1.1); }
  .qi-rate-stars.is-rated i.is-filled{ color:var(--amber); }
  .qi-rate-stars.is-disabled i{ cursor:not-allowed; }
  .qi-rate-stars i:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:3px; }
  .qi-rating-avg{ font-size:11px; color:var(--muted); }
  .qi-rating-avg b{ color:var(--text); font-weight:700; }

  .qi-stub{
    position:relative; width:118px; flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:12px 12px; text-decoration:none;
    background:linear-gradient(160deg, color-mix(in srgb, var(--qi) 16%, transparent),
               color-mix(in srgb, var(--qi) 3%, transparent)),
               linear-gradient(160deg,#141b32,#0c0f1d);
    border:1px solid rgba(255,255,255,.07);
    border-left:2px dashed rgba(255,255,255,.16);
    border-radius:0 12px 12px 0; transition:background .15s ease;
  }
  .qi-stub:hover{
    background:linear-gradient(160deg, color-mix(in srgb, var(--qi) 26%, transparent),
               color-mix(in srgb, var(--qi) 5%, transparent)),
               linear-gradient(160deg,#141b32,#0c0f1d);
  }
  .qi-stub:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
  .qi-stub-label{
    font-family:'Syne',sans-serif; font-weight:700; font-size:11.5px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--qi);
  }
  .qi-barcode{
    width:70%; height:16px; opacity:.3;
    background:repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 5px);
  }
  .qi-stub-arrow{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:var(--qi); display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px -6px color-mix(in srgb, var(--qi) 50%, transparent);
  }
  .qi-stub-arrow i{ font-size:14px; color:#201203; }

  /* Notches read as cut-outs only against the page background. */
  .qi-notch{
    position:absolute; width:16px; height:16px; border-radius:50%;
    background:var(--bg,#080714); left:-8px; z-index:2;
  }
  .qi-notch.top{ top:-8px; } .qi-notch.bottom{ bottom:-8px; }

  .qi-card-extra{ margin-top:-4px; }

  /* Container queries, not media queries: these measure .qi-ticket-frame, so
     the ticket stacks based on the width it actually has rather than the
     viewport width, which ignores the sidebar. */
  @container (max-width:560px){
    .qi-ticket{ flex-direction:column; }
    .qi-main{ border-radius:12px 12px 0 0;
              border-right:1px solid color-mix(in srgb, var(--qi) 28%, rgba(255,255,255,.07));
              border-bottom:none; }
    .qi-stub{ width:100%; flex-direction:row; justify-content:space-between;
              border-radius:0 0 12px 12px; border-left:1px solid rgba(255,255,255,.07);
              border-top:2px dashed rgba(255,255,255,.16); }
    .qi-notch{ left:auto; right:auto; }
    .qi-notch.top{ top:auto; left:-8px; bottom:-8px; }
    .qi-notch.bottom{ bottom:-8px; left:auto; right:-8px; }
    .qi-stats-row{ gap:16px; }
    .qi-hero{ padding:12px 14px; }
    .qi-hero-num{ font-size:38px; }
    .qi-barcode{ width:40%; }
  }

  /* Below this the code and its date stack, so the grid drops to one column.
     minmax(0,1fr) on the track and min-width:0 on the entry are both needed:
     the entry is a flex box here rather than display:contents, and it is that
     box's own auto min-width the browser measures for the track floor. Miss
     either and a long date string still bleeds past the card on a phone. */
  @container (max-width:520px){
    /* The number and the codes list used to stay side by side at every width.
       That forced the hero to stretch to the height of a three-row list, which
       is where the tall half-empty panel came from. Stacking makes the hero a
       short strip and gives the codes the full card width. */
    .qi-stats-row{ flex-direction:column; align-items:stretch; gap:10px; }
    .qi-hero{
      flex-direction:row; align-items:center; justify-content:flex-start;
      gap:12px; padding:9px 13px; align-self:auto;
    }
    .qi-hero-meta{ display:flex; flex-direction:column; gap:1px; align-items:flex-start; min-width:0; }
    .qi-hero-num{ font-size:30px; }
    .qi-hero-label, .qi-hero-verified{ text-align:left; }
    .qi-newest{
      border-left:none; border-top:1px dotted rgba(255,255,255,.16);
      padding:10px 0 0;
    }

    .qi-newest-list{ grid-template-columns:minmax(0,1fr); row-gap:12px; }
    .qi-newest-entry{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
    /* Once stacked, each chip sizes to its own code, so a short code gave a
       short pill and a long one a wide pill. Full width makes every row match. */
    .qi-chip{ width:100%; max-width:none; min-width:0; }
    .qi-released{ white-space:normal; overflow:visible; text-overflow:clip; min-width:0; }
  }

  /* The number and the codes list never stack, so on very narrow cards the
     hero has to give up its padding before the codes column gets squeezed. */
  @container (max-width:380px){
    .qi-stats-row{ gap:8px; }
    .qi-hero{ padding:8px 10px; gap:10px; }
    .qi-hero-num{ font-size:27px; }
    .qi-rate-stars i{ font-size:16px; }
  }

  /* Long post tag lists: compact two-row animated marquee. The first group is
     the real clickable tag set; the second is aria-hidden visual loop content. */
  .art-subline.art-subline-marquee {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    padding: 1px 0 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .art-tag-marquee-row {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.35;
  }
  .art-tag-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
  }
  .art-tag-marquee-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    padding-right: 18px;
  }
  .art-tag-marquee-group > * { flex: 0 0 auto; }
  .art-subline.art-subline-marquee .sub-dot { display: inline; }
  .art-subline.art-subline-marquee a::after { content: none !important; }
  .art-tag-marquee-group[aria-hidden="true"] { display: none; }
  .art-tag-marquee-row.is-running .art-tag-marquee-group[aria-hidden="true"] { display: flex; }
  .art-tag-marquee-row.is-running .art-tag-marquee-track {
    animation: cg-tag-marquee var(--tag-marquee-duration, 70s) linear infinite;
  }
  .art-tag-marquee-row.is-reverse.is-running .art-tag-marquee-track { animation-direction: reverse; }
  .art-subline-marquee:hover .art-tag-marquee-track,
  .art-subline-marquee:focus-within .art-tag-marquee-track { animation-play-state: paused; }
  .art-tag-marquee-row:not(.is-running) .art-tag-marquee-group { padding-right: 0; }
  .art-tag-marquee-row:not(.is-running) .sub-dot-tail { display: none; }
  @keyframes cg-tag-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .art-tag-marquee-row {
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .art-tag-marquee-row::-webkit-scrollbar { display: none; }
    .art-tag-marquee-row.is-running .art-tag-marquee-track { animation: none; }
    .art-tag-marquee-row.is-running .art-tag-marquee-group[aria-hidden="true"] { display: none; }
    .art-tag-marquee-row.is-running .art-tag-marquee-group { padding-right: 0; }
    .art-tag-marquee-row.is-running .sub-dot-tail { display: none; }
  }