/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  --bg-page:   #0d1117;
  --bg-card:   #1e293b;
  --bg-nested: #111827;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-disabled:  #64748b;  /* inactive states only */

  --border: #334155;
  --border-hover: #475569;

  --red-bg:   #7f1d1d;
  --blue-btn: #1d4ed8;
  --amber:    #d97706;

  /* IGRS badge colors */
  --igrs-3-bg:  #92400e; --igrs-3-tx:  #fde68a;
  --igrs-7-bg:  #1d4ed8; --igrs-7-tx:  #bfdbfe;
  --igrs-13-bg: #065f46; --igrs-13-tx: #6ee7b7;
  --igrs-15-bg: #065f46; --igrs-15-tx: #6ee7b7;
  --igrs-18-bg: #065f46; --igrs-18-tx: #6ee7b7;
  --igrs-rc-bg: #991b1b; --igrs-rc-tx: #fca5a5;

  /* ESRB badge colors */
  --esrb-e-bg:   #14532d; --esrb-e-tx:   #86efac;
  --esrb-e10-bg: #14532d; --esrb-e10-tx: #86efac;
  --esrb-t-bg:   #1e3a5f; --esrb-t-tx:   #93c5fd;
  --esrb-m-bg:   #991b1b; --esrb-m-tx:   #fecaca;
  --esrb-ao-bg:  #991b1b; --esrb-ao-tx:  #fecaca;
  --esrb-na-bg:  #1f2937; --esrb-na-tx:  #94a3b8;
}

/* ── RESET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-page); color: var(--text-primary); font-family: system-ui, sans-serif; min-height: 100vh; }
button { cursor: pointer; font-family: inherit; }
a { color: var(--text-secondary); }

/* ── LAYOUT ─────────────────────────────────────── */
.site-header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.site-subtitle { font-size: 0.82rem; color: var(--text-muted); flex: 1; }
.main-content { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }
.view.hidden { display: none; }

/* ── VIEW TOGGLE ────────────────────────────────── */
.view-toggle { display: flex; gap: 0.4rem; }
.toggle-btn { background: var(--bg-nested); color: var(--text-muted); border: 1px solid var(--border); padding: 0.3rem 0.75rem; border-radius: 6px; font-size: 0.8rem; }
.toggle-btn.active { background: var(--blue-btn); color: #fff; border-color: var(--blue-btn); }

/* ── DESKTOP LIST ───────────────────────────────── */
.list-header {
  display: grid;
  grid-template-columns: 120px 1fr 90px 90px 200px;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.list-header .center { text-align: center; }

.game-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px 90px 200px;
  gap: 0.75rem; align-items: center;
  padding: 0.5rem 0.75rem; border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}
.game-row:hover { background: #1a2234; }
.game-row + .game-row { border-top: 1px solid var(--border); }
.game-row.suspicious { border-left-color: var(--red-bg); }

.game-cover-img { width: 120px; height: 56px; object-fit: cover; border-radius: 5px; display: block; }
.game-cover-placeholder { width: 120px; height: 56px; background: var(--bg-nested); border-radius: 5px; }

.game-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-tags  { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.15rem; }

.badge-cell { text-align: center; }
.badge { display: inline-block; padding: 0.2rem 0; border-radius: 4px; font-size: 0.75rem; font-weight: 700; width: 70px; text-align: center; cursor: default; }

/* IGRS badge colors */
.badge-igrs-3\+  { background: var(--igrs-3-bg);  color: var(--igrs-3-tx); }
.badge-igrs-7\+  { background: var(--igrs-7-bg);  color: var(--igrs-7-tx); }
.badge-igrs-13\+ { background: var(--igrs-13-bg); color: var(--igrs-13-tx); }
.badge-igrs-15\+ { background: var(--igrs-15-bg); color: var(--igrs-15-tx); }
.badge-igrs-18\+ { background: var(--igrs-18-bg); color: var(--igrs-18-tx); }
.badge-igrs-RC    { background: var(--igrs-rc-bg); color: var(--igrs-rc-tx); }

/* ESRB badge colors */
.badge-esrb-E    { background: var(--esrb-e-bg);   color: var(--esrb-e-tx); }
.badge-esrb-E10\+ { background: var(--esrb-e10-bg); color: var(--esrb-e10-tx); }
.badge-esrb-T    { background: var(--esrb-t-bg);   color: var(--esrb-t-tx); }
.badge-esrb-M    { background: var(--esrb-m-bg);   color: var(--esrb-m-tx); }
.badge-esrb-AO   { background: var(--esrb-ao-bg);  color: var(--esrb-ao-tx); }
.badge-esrb-NA   { background: var(--esrb-na-bg);  color: var(--esrb-na-tx); font-style: italic; }

.vote-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.vote-btn { border: none; padding: 0.3rem 0; border-radius: 5px; font-size: 0.8rem; font-weight: 600; text-align: center; line-height: 1.4; }
.vote-btn .vote-count { font-size: 0.7rem; opacity: 0.75; display: block; }
.btn-off      { background: var(--bg-nested); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-cocok    { background: var(--blue-btn); color: #e2e8f0; }
.btn-tidak    { background: var(--red-bg); color: #fca5a5; }

/* ── PAGINATION ─────────────────────────────────── */
.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.pagination button { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.85rem; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
#page-info { font-size: 0.82rem; color: var(--text-muted); }

/* ── BROWSE ROWS ────────────────────────────────── */
.browse-section { margin-bottom: 2rem; }
.browse-label { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.scroll-row { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }

/* ── MOBILE CARD ────────────────────────────────── */
.m-card { flex-shrink: 0; width: 220px; background: var(--bg-card); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.m-card.suspicious { border-color: var(--red-bg); }
.m-cover { width: 100%; aspect-ratio: 460/215; object-fit: cover; display: block; }
.m-cover-placeholder { width: 100%; aspect-ratio: 460/215; background: var(--bg-nested); }
.m-body { padding: 0.6rem 0.75rem 0.75rem; }
.m-title { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); line-height: 1.35; margin-bottom: 0.3rem; }
.m-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.m-chip { font-size: 0.68rem; color: var(--text-muted); border: 1px solid var(--border); background: var(--bg-nested); padding: 0.1rem 0.4rem; border-radius: 999px; }
.m-ratings { display: flex; gap: 0.35rem; align-items: center; margin-bottom: 0.6rem; }
.m-vs { font-size: 0.65rem; color: var(--text-muted); }
.m-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; }
.m-votes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.m-vote-btn { border: none; padding: 0.45rem 0; border-radius: 7px; font-size: 0.82rem; font-weight: 600; text-align: center; }
.m-vote-btn .m-count { font-size: 0.7rem; opacity: 0.7; display: block; margin-top: 0.05rem; }

/* ── VOTING PICKER ───────────────────────────────── */
.picker { background: #0d1117; border: 1px solid var(--red-bg); border-radius: 9px; overflow: visible; margin-top: 0.6rem; }
.picker-header { padding: 0.5rem 0.65rem; background: #1a0a0a; border-bottom: 1px solid #3b1010; border-radius: 9px 9px 0 0; }
.picker-header p { font-size: 0.78rem; color: #fca5a5; margin: 0; line-height: 1.5; }
.picker-header strong { color: #fecaca; }
.picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; padding: 0.45rem; }
.rating-opt { position: relative; border: 1px solid var(--border); background: var(--bg-card); border-radius: 6px; padding: 0.45rem 0.15rem 0.35rem; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; overflow: visible; }
.rating-opt:hover { border-color: var(--text-muted); background: #243247; }
.rating-opt.selected { border-color: #f59e0b; background: #1c1400; }
.rating-opt.current { border-color: var(--border); background: var(--bg-nested); cursor: default; }
.rating-opt.current:hover { border-color: var(--border); background: var(--bg-nested); }
.rating-opt.current .r-age { color: var(--text-disabled) !important; }
.rating-opt.current .r-desc { color: #374151 !important; }
.rating-opt.rc { border-color: #4b1010; }
.rating-opt.rc:hover { border-color: #ef4444; background: #1a0808; }
.rating-opt.rc.selected { border-color: #ef4444; background: #1a0000; }
.r-age  { font-size: 0.9rem; font-weight: 800; color: var(--text-primary); display: block; }
.rating-opt.selected .r-age { color: #fde68a; }
.rating-opt.rc .r-age { color: #fca5a5; }
.r-desc { font-size: 0.58rem; color: var(--text-muted); display: block; margin-top: 0.08rem; }
.opt-info-wrap { position: absolute; top: 4px; right: 4px; display: inline-flex; z-index: 10; }
.opt-icon { width: 13px; height: 13px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--text-muted); font-size: 0.55rem; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center; cursor: help; }
.opt-info-wrap:hover .opt-icon { background: rgba(255,255,255,0.3); color: var(--text-primary); }
.picker-footer { padding: 0 0.45rem 0.45rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.btn-submit { background: var(--amber); color: #fff; border: none; padding: 0.42rem; border-radius: 7px; font-size: 0.8rem; font-weight: 600; }
.btn-cancel { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); padding: 0.42rem; border-radius: 7px; font-size: 0.8rem; }

/* ── CONFIRM SCREEN ─────────────────────────────── */
.confirm-box { background: #0d1117; border: 1px solid var(--red-bg); border-radius: 9px; padding: 0.6rem 0.65rem; margin-top: 0.6rem; }
.confirm-summary { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.6rem; line-height: 1.6; }
.hl-rating  { color: #fde68a; font-weight: 700; }
.hl-current { color: #fca5a5; }
.name-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.anon-toggle { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.name-input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.38rem 0.5rem; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.name-input::placeholder { color: var(--text-disabled); }
.name-input:focus { outline: none; border-color: var(--text-muted); }
.name-hint { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.5rem; }

/* ── CONFIRMED BANNER ───────────────────────────── */
.confirmed-banner { background: #1a0a0a; border: 1px solid var(--red-bg); border-radius: 7px; padding: 0.5rem 0.65rem; text-align: center; margin-top: 0.5rem; }
.cf-label { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.cf-value { font-size: 0.9rem; font-weight: 700; color: #fde68a; }
.cf-name  { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.12rem; }
.vote-feed { margin-top: 0.45rem; }
.vf-item  { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--text-muted); padding: 0.2rem 0; border-bottom: 1px solid var(--bg-card); }
.vf-item:last-child { border: none; }
.vf-name   { color: var(--text-secondary); font-weight: 600; }
.vf-rating { color: #fde68a; font-weight: 700; }
.vf-time   { margin-left: auto; }

/* ── TOOLTIP ────────────────────────────────────── */
.badge-tip-wrap { position: relative; display: inline-flex; align-items: center; }
.badge-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f172a; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.65rem; width: 230px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.6); pointer-events: none; opacity: 1; transition: opacity 0.4s ease; }
.badge-tip.visible { display: block; }
.badge-tip.fading  { opacity: 0; }
.badge-tip::after  { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border); }
.badge-tip-wrap.tip-right .badge-tip { left: 0; transform: none; }
.badge-tip-wrap.tip-right .badge-tip::after { left: 14px; }
.badge-tip-wrap.tip-left  .badge-tip { left: auto; right: 0; transform: none; }
.badge-tip-wrap.tip-left  .badge-tip::after { left: auto; right: 14px; }
.tip-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--border-hover); border-radius: 0 0 8px 8px; width: 100%; }
.tip-title  { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
.tip-body   { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.55; }
.tip-source { font-size: 0.63rem; color: var(--text-muted); margin-top: 0.35rem; }
.opt-tip { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; background: #0f172a; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.65rem; width: 200px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,0.7); pointer-events: none; text-align: left; }
.opt-tip::after { content: ''; position: absolute; top: 100%; right: 3px; border: 6px solid transparent; border-top-color: var(--border); }
.opt-info-wrap:hover .opt-tip { display: block; }
.rating-opt:nth-child(3n+1) .opt-tip { right: auto; left: 0; }
.rating-opt:nth-child(3n+1) .opt-tip::after { right: auto; left: 3px; }

/* ── RESPONSIVE ─────────────────────────────────── */
.desktop-only { display: block; }

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  #view-list    { display: none !important; }
  #view-browse  { display: block !important; }
  .m-card { width: 85vw; max-width: 360px; }
}