:root {
  --bg: #0b1220;
  --card: #0f1b2e;
  --card-3: #122c4f;
  --blue: #1e5eff;
  --green: #6bcf3e;
  --gold: #f4c430;
  --text: #e6edf3;
  --muted: #c5cdd5;
  --line: rgba(255, 255, 255, .08);
  --radius: 12px;
  --wrap: 1240px;
  --font: "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); }
img { max-width: 100%; }
a { color: #8eb7ff; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4rem; }
p { margin: 0 0 .8rem; }
.wrap { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: #000; padding: 8px; z-index: 5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(11, 18, 32, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-bar, .footer-bar { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; }
.brand img { border-radius: 10px; }
.brand-name { letter-spacing: -.02em; }
.brand-name span { color: #ff4fa3; }
.site-nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.site-nav > a, .nav-drop > a { color: var(--muted); font-weight: 650; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a.is-active, .site-nav a:hover { color: #fff; }
.nav-drop { position: relative; }
.nav-drop__menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { display: grid; }
.nav-drop__menu a { color: var(--text); padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.nav-drop__menu a:hover { background: var(--card-3); }
.nav-toggle { display: none; margin-left: auto; min-height: 44px; background: transparent; color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; font-weight: 750; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-green { background: var(--green); color: #07210a; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.18); }
.btn-sm { min-height: 40px; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.text-link { color: #8eb7ff; font-weight: 700; white-space: nowrap; }

.eyebrow { color: #fff; font-weight: 800; margin-bottom: 6px; }
.lede { color: var(--muted); max-width: 640px; }
.role-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.role-card { display: flex; gap: 16px; background: rgba(15, 27, 46, .92); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: inherit; text-decoration: none; }
.role-card h2 { font-size: 18px; }
.role-card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 48px; }
.role-card__icon--green { background: rgba(107, 207, 62, .15); color: var(--green); }
.role-card__icon--blue { background: rgba(30, 94, 255, .18); color: #8eb6ff; }
.icon { width: 24px; height: 24px; }
.checks { list-style: none; padding: 0; margin: 10px 0; }
.checks li { position: relative; padding-left: 22px; color: var(--muted); margin: 6px 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

.section { padding: 28px 0; }
.section-head, .split .section-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 16px; }
.section-head h2, .center-title { display: flex; align-items: center; gap: 8px; font-size: 26px; }
.section-head p, .center-title + .steps { color: var(--muted); }
.center-title { justify-content: center; margin-bottom: 18px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.game-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.game-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--card-3); }
.game-card__media img, .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { display: grid; place-items: center; font-size: 42px; font-weight: 800; }
.pill { position: absolute; top: 10px; left: 10px; background: rgba(11,18,32,.8); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.pill-green { color: var(--green); }
.pill-gold { color: var(--gold); }
.pill-blue { color: #9ec0ff; }
.game-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game-card h3 { font-size: 16px; }
.game-card h3 a { color: #fff; }
.dev, .meter-label, .note, small { color: var(--muted); font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { background: rgba(255,255,255,.05); border-radius: 999px; padding: 3px 8px; font-size: 12px; color: var(--muted); }
.meter { height: 8px; background: #22344d; border-radius: 99px; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #3d8bff); }
.score { color: var(--gold); font-weight: 800; }
.game-card .btn { margin-top: auto; width: 100%; }
.ovals { display: flex; gap: 4px; }
.ovals span { flex: 1; height: 8px; border-radius: 99px; background: #22344d; border: 1px solid rgba(255,255,255,.1); }
.ovals span.is-on { background: linear-gradient(90deg, var(--blue), #6aa2ff); border-color: transparent; }
.review-ticks { display: flex; flex-wrap: wrap; gap: 5px; }
.review-tick { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: #162033; display: grid; place-items: center; color: transparent; }
.review-tick .icon { width: 12px; height: 12px; }
.review-tick.is-on { background: linear-gradient(180deg, #3d8bff, #1e5eff); border-color: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(61,139,255,.25); }
.score-lg { font-size: 28px; line-height: 1; }
.card-blurb { color: var(--muted); font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.8em; }
.cards-cute { gap: 12px; }
.game-card--cute { border-radius: 18px; }
.game-card--cute .game-card__media { aspect-ratio: 1 / 1; }
.game-card--cute .game-card__body { padding: 10px 12px 12px; gap: 4px; }
.game-card--cute h3 { font-size: 14px; line-height: 1.25; }
.game-card--cute .dev, .game-card--cute .meter-label, .game-card--cute small { font-size: 12px; }
.game-card--cute .tags span { font-size: 11px; }
.game-card--cute .pill { top: 8px; left: 8px; font-size: 11px; }
.clamp { max-height: 7.5em; overflow: hidden; }
.clamp.is-open { max-height: none; }
.clamp-toggle { background: none; border: 0; color: #9ec0ff; cursor: pointer; padding: 8px 0; min-height: 44px; font: inherit; text-align: left; }
.table-scroll { overflow: auto; }
.admin-table td, .admin-table th { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions form { display: flex; gap: 8px; align-items: center; }
.btn.danger { background: #8d2a2a; color: #fff; }
.empty { background: var(--card); border: 1px dashed rgba(255,255,255,.16); border-radius: var(--radius); padding: 22px; color: var(--muted); }
.split { display: grid; gap: 28px; }
.steps, .info-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.steps article, .panel, .info-grid article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.step-no { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--card-3); color: #9ec0ff; font-weight: 800; }
.community, .video-bar { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.video-bar { background: linear-gradient(90deg, #10233f, #0f1b2e); }
.cta-band { padding: 48px 0; text-align: center; background:
  linear-gradient(180deg, rgba(11,18,32,.2), rgba(11,18,32,.82)),
  url("/assets/images/banner_new.png") center / cover no-repeat; }
.cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.seo-about { border-top: 1px solid var(--line); }
.seo-about__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.seo-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.seo-card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 44px; }
.seo-card__icon .icon { width: 22px; height: 22px; }
.seo-card h3 { font-size: 16px; margin: 2px 0 6px; color: #fff; }
.seo-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.seo-card--blue .seo-card__icon { background: rgba(30, 94, 255, .18); color: #8eb6ff; border: 1px solid rgba(91, 157, 255, .35); }
.seo-card--green .seo-card__icon { background: rgba(107, 207, 62, .14); color: var(--green); border: 1px solid rgba(107, 207, 62, .35); }
.seo-card--gold .seo-card__icon { background: rgba(244, 196, 48, .14); color: var(--gold); border: 1px solid rgba(244, 196, 48, .35); }
.seo-card--purple .seo-card__icon { background: rgba(167, 139, 250, .14); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .35); }
.seo-about__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.seo-about__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(15, 27, 46, .9); color: #dce4ec; font-size: 13px; font-weight: 650; text-decoration: none; }
.seo-about__chip .icon { width: 14px; height: 14px; color: #9ec0ff; }
.seo-about__chip:hover { border-color: rgba(91, 157, 255, .45); color: #fff; }
.site-footer { border-top: 1px solid var(--line); padding: 18px 0 28px; margin-top: 20px; }
.footer-links, .socials { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-links a, .socials a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.fine { text-align: center; color: #91a4b8; font-size: 13px; }
.flash { border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.flash-ok { background: rgba(107, 207, 62, .12); color: #c8f5b4; }
.flash-bad { background: rgba(255, 90, 90, .12); color: #ffc1c1; }

.page-head, .page-hero { padding: 36px 0 8px; }
.page-hero--art { background:
  linear-gradient(90deg, rgba(11,18,32,.94), rgba(11,18,32,.55)),
  url("/assets/images/for_publisher_banner.png") right center / cover no-repeat;
  border-radius: 16px; padding: 36px; margin-top: 20px; }
.filters { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
.filters label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
input, select, textarea { width: 100%; background: #0b1220; color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; min-height: 44px; padding: 10px 12px; font: inherit; }
textarea { min-height: 120px; }
.tabs { display: flex; gap: 8px; overflow: auto; padding-bottom: 6px; }
.tabs a { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; white-space: nowrap; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tabs a.is-active { background: var(--blue); color: #fff; border-color: transparent; }
.pager { display: flex; gap: 8px; margin-top: 18px; }
.pager a { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--card); color: #fff; }
.pager a.is-active { background: var(--blue); }
.data { width: 100%; border-collapse: collapse; }
.data th, .data td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data th { color: var(--muted); font-weight: 650; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 750; min-height: 44px; display: flex; align-items: center; }
.narrow { max-width: 720px; }
.stack { display: grid; gap: 12px; }
.hp { position: absolute; left: -9999px; }
.auth-wrap { padding: 32px 0 60px; }
.auth-card { max-width: 560px; }
.checkline { display: flex; gap: 8px; align-items: center; }
.checkline input { width: auto; }

.detail { padding: 28px 0 50px; }
.detail-hero { display: grid; gap: 16px; }
.detail-ident { display: flex; gap: 14px; }
.app-icon { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; }
.detail-cover { width: 100%; border-radius: 16px; max-height: 360px; object-fit: cover; }
.store-row, .shots { display: flex; gap: 10px; overflow: auto; margin: 16px 0; }
.store { background: #000; color: #fff; border-radius: 10px; min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; text-decoration: none; border: 1px solid rgba(255,255,255,.16); }
.shots img { height: 180px; border-radius: 12px; }
.detail-grid { display: grid; gap: 16px; }
.prose { white-space: normal; color: var(--muted); }
.criterion { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; margin: 8px 0; }
blockquote { margin: 0 0 12px; padding: 12px; background: #0b1220; border-radius: 12px; }
blockquote cite { color: var(--muted); font-style: normal; }
.mini-list { padding-left: 18px; }
.panel-accent { border-color: rgba(30, 94, 255, .45); }

@media (min-width: 480px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cta-actions { flex-direction: row; justify-content: center; }
}
@media (min-width: 800px) {
  .role-grid, .steps, .info-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: 1.4fr .7fr .7fr auto; align-items: end; }
  .detail-hero { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .detail-grid { grid-template-columns: 1.4fr .8fr; align-items: start; }
}
@media (min-width: 1100px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
  .cards-cute.cards-4 { grid-template-columns: repeat(5, 1fr); }
  .cards-3, .cards-2 { grid-template-columns: repeat(3, 1fr); }
  .cards-cute.cards-2 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #0f1b2e; padding: 12px 16px 18px; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .nav-drop__menu { position: static; display: grid; border: 0; padding: 0 0 0 10px; background: transparent; }
  .section-head { flex-direction: column; align-items: start; }
  .community, .video-bar { flex-direction: column; align-items: flex-start; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .data, .rank-table thead { font-size: 14px; }
}
@media (max-width: 360px) {
  .cards { grid-template-columns: 1fr; }
}

/* Shared header, footer, buttons */
.brand-name { font-size: 17px; letter-spacing: -.01em; }
.brand-name span { color: #5b9dff; }
.caret { font-size: 11px; margin-left: 4px; opacity: .8; }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(142, 183, 255, .55); }
.btn-outline:hover { background: rgba(30, 94, 255, .12); }
.btn-block { width: 100%; }
.btn .icon { width: 18px; height: 18px; margin-right: 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nav-toggle .icon { width: 22px; height: 22px; }
.socials a { width: 44px; justify-content: center; }
.socials .icon { width: 22px; height: 22px; }
.footer-links { gap: 0; }
.footer-links a + a::before { content: "•"; margin: 0 10px; color: #6b7d93; }
.site-footer { margin-top: 0; }

/* Section icons */
.sec-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; }
.sec-icon .icon { width: 26px; height: 26px; }
.sec-icon--lg { width: 48px; height: 48px; flex: 0 0 48px; }
.sec-icon--lg .icon { width: 40px; height: 40px; }
.sec-icon--blue { color: #3d7bff; }
.sec-icon--gold { color: var(--gold); }
.sec-icon--red { color: #ff4b3a; }
.sec-icon--green { color: var(--green); }

/* Home hero */
.hero { position: relative; padding: 56px 0 24px; background:
  linear-gradient(90deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.6) 32%, rgba(11,18,32,.05) 62%, rgba(11,18,32,0) 100%),
  linear-gradient(0deg, rgba(11,18,32,1) 0%, rgba(11,18,32,.2) 30%, rgba(11,18,32,0) 50%),
  url("/assets/images/for_player_banner.png") 70% 25% / cover no-repeat; }
.hero .hero__title { margin: 0 0 12px; font-weight: 900; line-height: 1.08; letter-spacing: -.02em; max-width: none; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero .hero__line { display: block; font-size: clamp(32px, 5vw, 54px); color: #fff; }
.hero .hero__words { display: block; font-size: clamp(34px, 5.4vw, 58px); color: #fff; }
.hero .w-blue { color: #3d8bff; }
.hero .w-green { color: var(--green); }
.hero .w-gold { color: var(--gold); }
.hero .lede { color: #dce4ec; font-size: 17px; }
.hero .role-grid { margin-top: 26px; }
.role-card { background: rgba(15, 27, 46, .9); backdrop-filter: blur(6px); }
.role-card__icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; }
.role-card__icon .icon { width: 30px; height: 30px; }
.role-card__icon--green { background: linear-gradient(180deg, #2c7b2a, #1b5320); color: #c9f7b5; border: 1px solid rgba(107, 207, 62, .45); }
.role-card__icon--blue { background: linear-gradient(180deg, #1f4fb8, #173a87); color: #d6e4ff; border: 1px solid rgba(91, 157, 255, .45); }
.checks li { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.checks li::before { content: none; }
.checks .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.checks--green .icon { color: var(--green); }
.checks--blue .icon { color: #3d7bff; }

/* Home first review */
.home-first { display: grid; gap: 12px; grid-template-columns: 1fr; }
.hcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.hcard--grace { border-color: rgba(107, 207, 62, .35); }
.hcard__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--card-3); }
.hcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hcard h3 { font-size: 14px; margin: 0; line-height: 1.25; }
.hcard h3 a { color: #fff; }
.hcard .dev { font-size: 12px; margin: 0; }
.hcard .tags { margin-top: 0; }
.hcard .review-ticks { margin-top: 4px; }
.hcard .meter-label { margin: 0 0 2px; font-size: 12px; color: #fff; }
.hcard .btn { margin-top: auto; }
.tag-grace { color: var(--green); border-color: rgba(107, 207, 62, .35); background: rgba(107, 207, 62, .12); }

/* Home picks and popular */
.home-spotlight { display: grid; gap: 28px; }
.home-spotlight > div { min-width: 0; }
.home-picks { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pcard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.pcard__media { display: block; border-radius: 10px; overflow: hidden; background: var(--card-3); min-height: 140px; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcard__top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.pcard h3 { font-size: 16px; margin: 0; }
.pcard h3 a { color: #fff; }
.pcard .dev { margin: 0; font-size: 13px; }
.score-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(244, 196, 48, .14); color: var(--gold); border: 1px solid rgba(244, 196, 48, .4); border-radius: 8px; padding: 4px 8px; font-weight: 800; white-space: nowrap; }
.score-badge .icon { width: 16px; height: 16px; }
.home-popular { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: inherit; min-width: 0; }
.mcard:hover { text-decoration: none; border-color: rgba(142, 183, 255, .35); }
.mcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card-3); }
.mcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.mcard strong { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .dev { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard .tags { margin-top: 4px; }
.mcard .tags span { font-size: 11px; padding: 2px 7px; }

/* Home how it works */
.how { display: grid; gap: 12px; grid-template-columns: 1fr; }
.how__step { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.how__step h3 { font-size: 15px; margin: 4px 0; }
.how__step p { color: var(--muted); font-size: 14px; margin: 0; }
.how__side { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 38px; }
.how__no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.how__side .icon { width: 30px; height: 30px; }
.how__step--blue .how__no { background: #2563eb; } .how__step--blue .how__side .icon { color: #3d8bff; }
.how__step--green .how__no { background: #3e9b2a; } .how__step--green .how__side .icon { color: var(--green); }
.how__step--gold .how__no { background: #c99a12; color: #1b1300; } .how__step--gold .how__side .icon { color: var(--gold); }
.how__step--purple .how__no { background: #7c3aed; } .how__step--purple .how__side .icon { color: #a78bfa; }

/* Home community, video, CTA */
.section--tight { padding-top: 8px; }
.community { background: none; border: 0; padding: 0 0 14px; }
.community h2 { font-size: 22px; margin-bottom: 4px; }
.community p { color: var(--muted); margin: 0; max-width: 640px; }
.video-bar { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; background: linear-gradient(90deg, #102a52, #0f1b2e 70%); border: 1px solid rgba(91, 157, 255, .25); border-radius: 16px; padding: 18px 22px; }
.video-bar__phone { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(30, 94, 255, .25); color: #8eb6ff; }
.video-bar__phone .icon { width: 30px; height: 30px; }
.video-bar__text h2 { font-size: 19px; margin: 0 0 2px; }
.video-bar__text p { color: var(--muted); margin: 0; }
.video-bar__social { display: flex; gap: 14px; }
.video-bar__social a { width: 44px; height: 44px; display: grid; place-items: center; }
.video-bar__social .icon { width: 32px; height: 32px; }
.cta-band { margin-top: 18px; padding: 40px 0; background:
  linear-gradient(180deg, rgba(11,18,32,.55), rgba(11,18,32,.85)),
  url("/assets/images/for_player_banner.png") center 40% / cover no-repeat; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band h2 { font-size: 28px; margin-bottom: 2px; }
.cta-band p { color: #dce4ec; }

@media (min-width: 640px) {
  .home-first { grid-template-columns: repeat(2, 1fr); }
  .home-picks { grid-template-columns: 1fr 1fr; }
  .how { grid-template-columns: 1fr 1fr; }
  .seo-about__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .home-first { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .home-spotlight { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .how { grid-template-columns: repeat(4, 1fr); }
  .video-bar { grid-template-columns: auto 1fr auto auto; }
}
@media (max-width: 520px) {
  .home-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mcard .tags { display: none; }
  .pcard { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Game detail */
.dhero { position: relative; display: grid; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.dhero__info { position: relative; z-index: 1; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.dhero__ident { display: flex; gap: 16px; align-items: center; }
.dhero h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0; }
.dhero .app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.dev-link { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: #5b9dff; margin: 2px 0 0; }
.dev-link .icon { width: 18px; height: 18px; }
.tags--outline span { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); color: #dce4ec; }
.dhero__score { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.score-big { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 900; font-size: 26px; margin: 4px 0; }
.score-big .icon { width: 24px; height: 24px; color: var(--gold); }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.badge .icon { width: 16px; height: 16px; }
.badge--green { color: #8ee36a; background: rgba(107, 207, 62, .12); border: 1px solid rgba(107, 207, 62, .35); }
.badge--gold { color: var(--gold); background: rgba(244, 196, 48, .12); border: 1px solid rgba(244, 196, 48, .35); }
.dhero__progress { display: flex; align-items: center; gap: 8px; color: #dce4ec; margin: 0; }
.dhero__progress .icon { color: var(--green); width: 20px; height: 20px; }
.dhero .store-row { margin: 6px 0 0; overflow: visible; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; text-decoration: none; }
.store-badge:hover { text-decoration: none; border-color: #fff; }
.store-badge .icon { width: 26px; height: 26px; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.1; font-size: 19px; font-weight: 700; }
.store-badge small { font-size: 10px; font-weight: 500; color: #dce4ec; }
.dhero__art { position: relative; min-height: 240px; overflow: hidden; }
.dhero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dhero__status { margin: 0 22px 22px; padding: 16px; border: 1px solid rgba(91, 157, 255, .35); border-radius: 14px; background: #0b1528; display: flex; flex-direction: column; gap: 8px; }
.status-title { display: flex; align-items: center; gap: 8px; font-weight: 800; margin: 0; }
.status-title .icon { width: 20px; height: 20px; color: #8eb6ff; }
.status-meter { display: flex; align-items: center; gap: 12px; }
.status-meter .ovals,
.status-meter .review-ticks { flex: 1; }
.status-meter .ovals span { height: 10px; }
.status-meter .review-tick { width: 22px; height: 22px; border-radius: 7px; }
.status-meter .review-tick .icon { width: 14px; height: 14px; }
.gallery { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0 22px 18px; padding: 4px 48px 24px; }
.detail > .dhero { margin-bottom: 18px; }
.footer-links { margin-right: auto; }
.gallery__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__shot { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; cursor: zoom-in; border-radius: 10px; scroll-snap-align: start; flex: 0 0 auto; line-height: 0; overflow: hidden; }
.gallery__shot:focus-visible { outline: 2px solid #3d8bff; outline-offset: 2px; }
.gallery__shot img { height: 170px; border-radius: 10px; display: block; transition: transform .25s ease, filter .25s ease; }
.gallery__shot:hover img { transform: scale(1.03); filter: brightness(1.08); }
.gallery__nav { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: #0b1220; color: #fff; display: grid; place-items: center; cursor: pointer; }
.gallery__nav .icon { width: 20px; height: 20px; }
.gallery__nav--prev { left: 6px; }
.gallery__nav--next { right: 6px; }
.gallery__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.gallery__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.gallery__dots span.is-on { background: #3d8bff; }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(4, 8, 16, .88); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lightbox.is-on { opacity: 1; pointer-events: auto; }
.lightbox__frame { position: relative; max-width: min(960px, 100%); max-height: min(92vh, 100%); display: grid; place-items: center; }
.lightbox__img { max-width: 100%; max-height: min(84vh, 920px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.55); background: #0b1220; transform: translateY(8px) scale(.98); transition: transform .22s ease; }
.lightbox.is-on .lightbox__img { transform: none; }
.lightbox__meta { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); color: rgba(255,255,255,.72); font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.lightbox__btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(11, 18, 32, .92); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox__btn:hover { border-color: rgba(61,139,255,.55); background: #121c2e; }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: max(12px, calc(50% - 520px)); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: max(12px, calc(50% - 520px)); top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .lightbox { padding: 12px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__meta { bottom: -28px; }
}
.detail-grid { gap: 18px; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail .panel h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.icon-link { color: var(--muted); width: 44px; height: 44px; display: grid; place-items: center; }
.ver-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.ver-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0b1220; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.ver-tab:hover { color: #fff; border-color: rgba(61, 139, 255, .45); }
.ver-tab.is-on { color: #fff; border-color: #3d8bff; background: rgba(30, 94, 255, .18); }
.ver-tab__score { color: var(--gold); font-variant-numeric: tabular-nums; }
.results { display: grid; gap: 12px; grid-template-columns: 1fr; }
.results__box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #0c1626; }
.results__box h3 { font-size: 15px; }
.results__head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.criterion span { font-size: 14px; }
.criterion .meter span { background: linear-gradient(90deg, #1e5eff, #3d8bff); }
.hl { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 8px 0 4px; }
.hl .icon { width: 18px; height: 18px; }
.hl--good { color: var(--green); }
.hl--bad { color: #ff5a5a; }
.dots { margin: 0 0 6px; padding-left: 18px; color: #dce4ec; font-size: 14px; }
.dots li { margin: 4px 0; }
.comment-login { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; color: var(--muted); background: #0b1220; min-height: 52px; }
.comment-form { display: grid; gap: 10px; justify-items: start; }
.comments { list-style: none; margin: 14px 0 0; padding: 0; }
.comments li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.comments p { margin: 0; color: #dce4ec; font-size: 14px; }
.comment-meta b { color: #8eb6ff; }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.avatar .icon { width: 18px; height: 18px; }
.avatar--ghost { background: #22344d; color: var(--muted); }
.avatar--blue { background: #2563eb; } .avatar--purple { background: #7c3aed; } .avatar--green { background: #3e9b2a; }
.avatar--gold { background: #b7860b; } .avatar--red { background: #c2410c; }
.dev-card { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.dev-card__logo { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; flex: 0 0 60px; }
.dev-card__logo--ph { display: grid; place-items: center; background: #fff; color: #0b1220; font-weight: 900; font-size: 24px; }
.dev-card p { margin: 2px 0 0; }
.points-grid { display: grid; gap: 14px; }
.points-grid label { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; }
.points-set legend svg { width: 16px; height: 16px; color: #f5b83d; vertical-align: -2px; }
.dev-contacts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.dev-contacts li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.dev-contacts svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .7; }
.dev-contacts a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sub { font-size: 14px; color: #dce4ec; margin: 16px 0 8px; }
.side-games { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.side-games a { display: flex; gap: 10px; align-items: center; color: inherit; min-height: 44px; }
.side-games a:hover { text-decoration: none; }
.side-games img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.side-games span { display: flex; flex-direction: column; }
.side-games strong { color: #fff; font-size: 14px; }

@media (min-width: 900px) {
  .dhero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; }
  .dhero__art { min-height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .dhero__status { margin: 22px; align-self: center; }
  .results { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); }
}

/* Discovery lists */
.list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.list-head h1 { margin: 0 0 4px; }
.list-head--end { justify-content: flex-end; margin-bottom: 12px; }
.list-search { flex: 1 1 280px; max-width: 420px; }
.list-search .search { position: relative; display: block; }
.list-search .search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.list-search input { width: 100%; padding-left: 42px; }
.list-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 6px; }
.pill-toggle { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #dce4ec; background: #0f1b2e; }
.pill-toggle:hover { text-decoration: none; border-color: rgba(142, 183, 255, .5); }
.pill-toggle.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.genre-form { display: flex; gap: 8px; margin: 0; }
.genre-form select { min-height: 40px; border-radius: 999px; padding: 0 16px; }

/* Auth */
.oauth-buttons { display: grid; gap: 10px; }
.oauth-buttons form { margin: 0; }
.btn-oauth { width: 100%; min-height: 50px; gap: 10px; font-size: 16px; }
.btn-oauth .icon { width: 22px; height: 22px; margin: 0; }
.btn-oauth--google { background: #fff; color: #1f1f1f; }
.btn-oauth--apple { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn-oauth[disabled] { opacity: .5; cursor: not-allowed; }
.dev-login { border-top: 1px dashed rgba(255,255,255,.2); padding-top: 12px; }
.role-card form, form.role-card { margin: 0; }

/* Shared UI: page titles, boxes, tabs, badges */
.title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.page-title h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-title p { color: var(--muted); margin: 0; }
.page-title--icon { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.page-title--icon > span .icon { width: 34px; height: 34px; }
.title-actions { display: flex; gap: 8px; align-items: center; }
.title-actions form { margin: 0; }
.block-head { margin-bottom: 14px; }
.block-head h2 { font-size: 24px; margin: 0 0 2px; }
.block-head p { color: var(--muted); margin: 0; }
.box { background: linear-gradient(180deg, #10203a, #0f1b2e); border: 1px solid rgba(91, 157, 255, .16); border-radius: 16px; padding: 18px; }
.box h2 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.box + .box { margin-top: 16px; }
.split-2 > .box + .box, .split-head > .box + .box, .panel-list > .box + .box, .stack > .box + .box, .stack-lg > .box + .box { margin-top: 0; }
.box--flush { padding: 0; overflow: hidden; }
.box__foot { padding: 12px 18px; border-top: 1px solid var(--line); margin: 0; }
.box-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.box-head h2 { margin: 0; }
.box-head p { color: var(--muted); font-size: 13px; margin: 0; }
.box-head > span .icon { width: 26px; height: 26px; }
.notice { display: flex; gap: 10px; align-items: flex-start; background: rgba(30, 94, 255, .08); border: 1px solid rgba(91, 157, 255, .25); border-radius: 12px; padding: 12px 14px; color: #dce4ec; font-size: 14px; margin: 16px 0 0; }
.notice > .icon { color: #5b9dff; flex: 0 0 22px; width: 22px; height: 22px; }
.notice--box { max-width: 420px; margin: 0; }
.notice--box div { display: flex; flex-direction: column; }
.notice--box span { color: var(--muted); }
.notice-card { display: flex; gap: 12px; align-items: flex-start; }
.notice-card > span .icon { width: 28px; height: 28px; }
.tabs--line { gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 0; }
.tabs--line a { border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 10px 16px; }
.tabs--line a.is-active { background: none; color: #fff; border-bottom-color: #3d8bff; }
.badge--blue { color: #9ec0ff; background: rgba(30, 94, 255, .14); border: 1px solid rgba(91, 157, 255, .4); }
.badge--purple { color: #c4b5fd; background: rgba(124, 58, 237, .16); border: 1px solid rgba(167, 139, 250, .4); }
.badge--red { color: #ff9a9a; background: rgba(255, 75, 75, .12); border: 1px solid rgba(255, 90, 90, .4); font-size: 12px; }
.badge--gray { color: #dce4ec; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.tone-blue { color: #3d8bff; } .tone-green { color: var(--green); } .tone-gold { color: var(--gold); }
.tone-purple { color: #a78bfa; } .tone-red { color: #ff6b6b; } .tone-gray { color: var(--muted); }
.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.with-icon .icon { width: 18px; height: 18px; }
.nowrap { white-space: nowrap; }
.t-right { text-align: right; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.split-2, .two-up { display: grid; gap: 16px; }
.btn-gold { background: var(--gold); color: #1b1300; }
.btn .icon-arrow-right { width: 16px; height: 16px; margin: 0 0 0 6px; }

/* Art heroes (05) */
.art-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--line); }
.art-hero h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 900; max-width: 620px; line-height: 1.08; letter-spacing: -.02em; }
.art-hero .lede { color: #dce4ec; max-width: 540px; }
.art-hero .kicker { color: #8eb6ff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
.art-hero--publisher { background: linear-gradient(90deg, rgba(11,18,32,.96) 0%, rgba(11,18,32,.7) 38%, rgba(11,18,32,.05) 70%), url("/assets/images/for_publisher_banner.png") 70% 35% / cover no-repeat; }
.art-hero--player { background: linear-gradient(90deg, rgba(11,18,32,.96) 0%, rgba(11,18,32,.7) 38%, rgba(11,18,32,.05) 70%), url("/assets/images/for_player_banner.png") 70% 35% / cover no-repeat; }

/* Tiles, stats, chips */
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; }
.tile { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #10203a, #0f1b2e); border: 1px solid rgba(91, 157, 255, .16); border-radius: 14px; padding: 16px; }
.tile h3 { font-size: 16px; margin: 0 0 4px; }
.tile p { color: var(--muted); font-size: 14px; margin: 0; }
.tile__icon, .stat__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 46px; }
.tile__icon .icon, .stat__icon .icon { width: 28px; height: 28px; }
.tile__icon--blue, .stat__icon--blue { color: #5b9dff; background: rgba(30, 94, 255, .16); }
.tile__icon--green, .stat__icon--green { color: var(--green); background: rgba(107, 207, 62, .14); }
.tile__icon--gold, .stat__icon--gold { color: var(--gold); background: rgba(244, 196, 48, .14); }
.tile__icon--purple, .stat__icon--purple { color: #a78bfa; background: rgba(124, 58, 237, .18); }
.stats { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0; }
.stat { display: flex; gap: 12px; align-items: center; background: #0c1626; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stat strong { display: block; font-size: 22px; line-height: 1.1; color: #fff; }
.stat small { font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; border: 1px solid; margin: 0; }
.chip .icon { width: 18px; height: 18px; }
.chip--sm { padding: 5px 10px; font-size: 12px; }
.chip--blue { color: #9ec0ff; border-color: rgba(91, 157, 255, .45); background: rgba(30, 94, 255, .12); }
.chip--green { color: #a3e38a; border-color: rgba(107, 207, 62, .45); background: rgba(107, 207, 62, .1); }
.chip--purple { color: #c4b5fd; border-color: rgba(167, 139, 250, .45); background: rgba(124, 58, 237, .14); }
.chip--gold { color: #f8d867; border-color: rgba(244, 196, 48, .45); background: rgba(244, 196, 48, .1); }
.chip--gray { color: #dce4ec; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.social-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.social-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #dce4ec; font-size: 13px; font-weight: 700; min-width: 72px; }
.social-row a:hover { text-decoration: none; color: #fff; }
.social-row .icon { width: 40px; height: 40px; }
.social-row--sm .icon { width: 30px; height: 30px; }
.video-box { display: grid; gap: 18px; align-items: center; }
.phones { display: flex; gap: 10px; justify-content: center; }
.phone { position: relative; width: 92px; aspect-ratio: 9 / 17; border-radius: 16px; border: 3px solid #26354d; overflow: hidden; background: #0b1220; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone__play { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; }
.phone__play .icon { width: 14px; height: 14px; fill: #fff; }
.cta-strip { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; border: 1px solid rgba(91, 157, 255, .25); border-radius: 16px; padding: 26px 24px; }
.cta-strip h2 { font-size: 22px; margin: 0 0 2px; }
.cta-strip p { color: #dce4ec; margin: 0; }
.cta-strip--publisher { background: linear-gradient(90deg, rgba(16,40,82,.95), rgba(11,18,32,.55)), url("/assets/images/for_publisher_banner.png") center 70% / cover no-repeat; }
.cta-strip--player { background: linear-gradient(90deg, rgba(16,40,82,.95), rgba(11,18,32,.55)), url("/assets/images/for_player_banner.png") center 70% / cover no-repeat; }

/* Flows (players page) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
.flow__item { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow__item h3 { font-size: 15px; margin: 4px 0 0; }
.flow__item p { color: var(--muted); font-size: 13px; margin: 0; max-width: 220px; }
.ring { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 2px solid; }
.ring .icon { width: 30px; height: 30px; }
.ring--green { color: var(--green); border-color: rgba(107, 207, 62, .6); background: rgba(107, 207, 62, .1); }
.ring--blue { color: #5b9dff; border-color: rgba(91, 157, 255, .6); background: rgba(30, 94, 255, .12); }
.ring--purple { color: #a78bfa; border-color: rgba(167, 139, 250, .6); background: rgba(124, 58, 237, .14); }
.ring--gold { color: var(--gold); border-color: rgba(244, 196, 48, .6); background: rgba(244, 196, 48, .1); }
.flow--cards .tier { background: linear-gradient(180deg, #10203a, #0f1b2e); border: 1px solid rgba(91, 157, 255, .16); border-radius: 14px; padding: 16px; }
.tier--green { border-color: rgba(107, 207, 62, .35) !important; } .tier--blue { border-color: rgba(91, 157, 255, .4) !important; }
.tier--gold { border-color: rgba(244, 196, 48, .35) !important; } .tier--purple { border-color: rgba(167, 139, 250, .4) !important; }
.point-list { list-style: none; margin: 0; padding: 0; }
.point-list li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.point-list .icon { width: 22px; height: 22px; }
.point-list b { color: var(--green); font-size: 16px; white-space: nowrap; }
.point-list__neg { color: #ff6b6b !important; }
.point-list__zero { color: var(--muted) !important; }
.numbered { display: flex; gap: 14px; align-items: center; }
.numbered h3 { font-size: 16px; margin: 0; }
.numbered p { margin: 0; }
.numbered__no { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #1e5eff; flex: 0 0 40px; }
.rank-chain { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.rank-chain > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rank-chain > span .icon { width: 20px; height: 20px; }
.rank-chain > .icon { width: 16px; height: 16px; color: var(--muted); }
.rank-chain .btn { margin-left: auto; }

/* Tables (07) */
.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid-table th { text-align: left; color: var(--muted); font-weight: 650; font-size: 13px; padding: 12px 14px; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--line); }
.grid-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table tbody tr:hover { background: rgba(30, 94, 255, .05); }
.box .grid-table th:first-child, .box .grid-table td:first-child { padding-left: 18px; }
.who { display: inline-flex; align-items: center; gap: 10px; }
.who b { color: #fff; font-weight: 650; }
.place { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; color: #dce4ec; }
.place--1 { background: linear-gradient(180deg, #f8d867, #c99a12); color: #1b1300; }
.place--2 { background: linear-gradient(180deg, #e5e7eb, #9ca3af); color: #111827; }
.place--3 { background: linear-gradient(180deg, #f0a36b, #b45309); color: #1b0d00; }
.lb-aside { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 16px 0 18px; align-items: stretch; }
@media (min-width: 760px) {
  .lb-aside { grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.4fr); gap: 18px; }
}
.lb-aside .notice { margin: 0; height: 100%; }
.lb-stat { display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; border: 1px solid rgba(245, 184, 61, .32); border-radius: 22px; background: linear-gradient(135deg, rgba(245, 184, 61, .16), rgba(11, 18, 32, .4)); min-height: 100%; }
.lb-stat__badge { position: relative; width: 88px; height: 88px; display: grid; place-items: center; flex: 0 0 88px; }
.lb-stat__glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 184, 61, .55), rgba(245, 184, 61, 0) 70%); filter: blur(6px); animation: lb-glow 2.8s ease-in-out infinite; pointer-events: none; }
.lb-stat__badge .icon { width: 88px; height: 88px; color: #f5b83d; filter: drop-shadow(0 0 10px rgba(245, 184, 61, .45)); animation: lb-shine 2.8s ease-in-out infinite; }
.lb-stat__badge b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(22px, 4vw, 30px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.8); z-index: 1; }
.lb-stat__copy { display: grid; gap: 3px; min-width: 0; }
.lb-stat__copy strong { color: #fff; font-size: 16px; line-height: 1.2; }
.lb-stat__copy small { color: var(--muted); font-size: 13px; }
@keyframes lb-glow {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: .95; transform: scale(1.08); }
}
@keyframes lb-shine {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245, 184, 61, .35)) brightness(1); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 214, 102, .7)) brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-stat__glow, .lb-stat__badge .icon { animation: none; }
}
.lb-more { display: flex; justify-content: center; margin: 14px 0 4px; }
.lb-more .btn .icon { transition: transform .2s ease; }
.lb-more.is-open .btn .icon { transform: rotate(90deg); }
.pts { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #fff; }
.pts .icon { width: 16px; height: 16px; color: var(--gold); }
.pts--lg { font-size: 18px; margin: 4px 0 0; }
.pts--lg .icon { width: 22px; height: 22px; }
.narrow-wide { max-width: 920px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted, #9aa7b6); font-size: 14px; margin-bottom: 12px; }
.back-link .icon { width: 16px; height: 16px; }
.rv-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.rv-head h1 { margin: 0; font-size: 24px; }
.rv-head p { margin: 4px 0 0; }
.rv-head .app-icon { width: 64px; height: 64px; border-radius: 16px; }
.rv-head > div:nth-child(2) { flex: 1 1 260px; }
.rv-group { margin-top: 26px; display: grid; gap: 12px; }
.rv-group__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rv-group__head h2 { margin: 0; font-size: 20px; }
.rv-card { display: grid; gap: 12px; }
.rv-card__who { display: flex; gap: 12px; align-items: center; }
.rv-card__who > div { flex: 1; min-width: 0; }
.rv-card__who p { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-card__who a { color: inherit; }
.rv-card__score { margin: 0; font-size: 20px; }
.rv-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-scores li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.rv-text p { margin: 2px 0 0; }
.rv-rate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.rv-rate__btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rv-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-btn { --tone: #9aa7b6; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: #dce4ec; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rv-btn .icon { width: 16px; height: 16px; }
.rv-btn--green { --tone: #34d399; }
.rv-btn--red { --tone: #f87171; }
.rv-btn:hover { border-color: var(--tone); }
.rv-btn.is-active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); }
.rv-btn[disabled] { opacity: .6; cursor: wait; }
.tester-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tester-list a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: inherit; }
.tester-list a:hover { border-color: rgba(255, 255, 255, .2); }
.tester-list span { display: grid; gap: 4px; min-width: 0; }
.tester-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tester-list small { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.tester-list .pts { font-size: 12px; }
.tester-list .pts .icon { width: 13px; height: 13px; }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; background: rgba(245, 184, 61, .12); color: var(--gold); font-weight: 800; font-size: 13px; }
.rank-chip .icon { width: 15px; height: 15px; }
.rank-chip a { color: inherit; }
.avatar { object-fit: cover; }
.avatar--sq { border-radius: 9px; }
.avatar--xl { width: 96px; height: 96px; flex: 0 0 96px; font-size: 38px; border: 3px solid rgba(91, 157, 255, .5); }
.inline-form { display: inline; margin: 0; }
.inline-meter { display: inline-flex; align-items: center; gap: 10px; min-width: 160px; }
.inline-meter .meter { flex: 1; }
.plain-rows { list-style: none; margin: 0; padding: 0; }
.plain-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.table-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.table-links a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #0c1626; border: 1px solid var(--line); color: #dce4ec; min-height: 44px; }
.table-links .icon { width: 18px; height: 18px; color: #5b9dff; }
.stats-4 { margin-top: 0; }

/* Profiles (08) and panels (07) */
.profile-head { display: flex; gap: 18px; align-items: center; }
.profile-head h2 { font-size: 24px; margin: 0 0 6px; }
.profile-head p { margin: 0 0 4px; }
.split-head { display: grid; gap: 16px; margin-bottom: 16px; }
.game-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.game-rows li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; background: #0c1626; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.game-rows__media { display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--card-3); }
.game-rows__media img { width: 100%; height: 100%; object-fit: cover; }
.game-rows__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.game-rows__top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.game-rows__top a strong { color: #fff; }
.game-rows p { margin: 0; }
.studio { display: flex; gap: 16px; align-items: center; }
.studio h2 { font-size: 22px; margin: 0; }
.studio p { margin: 0 0 4px; }
.studio__logo { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; flex: 0 0 96px; }
.studio__logo--ph { display: grid; place-items: center; background: linear-gradient(180deg, #2b7bff, #1747b8); color: #fff; font-size: 40px; font-weight: 900; }
.studio__bio { margin: 14px 0 0; }
.social-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.social-pills a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #0c1626; border: 1px solid var(--line); color: #dce4ec; min-height: 44px; }
.social-pills .icon { width: 20px; height: 20px; }
.social-pills .icon-external { width: 14px; height: 14px; color: var(--muted); }
.dev-games { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dgame { display: flex; flex-direction: column; background: #0c1626; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dgame__media { display: block; aspect-ratio: 16 / 10; background: var(--card-3); position: relative; overflow: hidden; }
.dgame__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dgame__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dgame h3 { font-size: 16px; margin: 0; }
.dgame h3 a { color: #fff; }
.dgame .btn { margin-top: auto; }
.state { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 14px; }
.state .icon { width: 18px; height: 18px; }
.state--green { color: #8ee36a; background: rgba(107, 207, 62, .1); border: 1px solid rgba(107, 207, 62, .35); }
.state--gold { color: var(--gold); background: rgba(244, 196, 48, .08); border: 1px solid rgba(244, 196, 48, .35); }
.state--gray { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.state-box { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.state-box .score-big { font-size: 22px; margin: 0; }
.panel-list { display: grid; gap: 14px; }
.prow { display: grid; gap: 14px; grid-template-columns: 1fr; }
.prow__media { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--card-3); }
.prow__media img { width: 100%; height: 100%; object-fit: cover; }
.prow__title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.prow__title h3 { margin: 0; font-size: 18px; }
.prow__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prow__main p { margin: 0; }
.prow__side { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.prow__side p { margin: 0; }
.prow__side .score-big { font-size: 24px; margin: 0; }
.prow__side:empty { display: none; }
.prow__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.prow__actions .btn { flex: 0 1 auto; }
.dev-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.btn-row .btn { white-space: nowrap; }
.progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.progress-head h2 { margin: 0; }
.meter--green { height: 10px; margin-bottom: 16px; }
.meter--green span { background: linear-gradient(90deg, #3e9b2a, var(--green)); }
.test-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.test-rows > li { display: grid; gap: 12px; background: #0c1626; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.test-rows__game { display: flex; gap: 10px; align-items: center; color: inherit; min-width: 0; }
.test-rows__game:hover { text-decoration: none; }
.test-rows__game img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.test-rows__game > span { display: flex; flex-direction: column; gap: 4px; }
.test-rows__game strong { color: #fff; }
.steps-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.steps-line li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.steps-line li span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.steps-line small { font-size: 12px; }
.steps-line__dot { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); color: var(--muted); }
.steps-line__dot .icon { width: 28px; height: 28px; }
.steps-line .is-done .steps-line__dot { border: 0; color: var(--green); }
.steps-line .is-wait .steps-line__dot { border-color: var(--gold); color: var(--gold); }
.steps-line .is-wait .steps-line__dot .icon { width: 18px; height: 18px; }
.steps-line .is-bad .steps-line__dot { border-color: #ff6b6b; color: #ff6b6b; }
.steps-line .is-bad .steps-line__dot .icon { width: 16px; height: 16px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.form-grid input:disabled { opacity: .6; }
.choice-row { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-row legend { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #dce4ec; font-weight: 700; text-align: center; cursor: pointer; }
.choice input:checked + span { border-color: #3d8bff; background: rgba(30, 94, 255, .14); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid #8eb6ff; }

/* Discovery cards (03) */
.cards-list { gap: 14px; }
.game-card .pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #fff; border: 0; border-radius: 8px; padding: 4px 9px; }
.game-card .pill .icon { width: 14px; height: 14px; }
.game-card .pill-blue { background: rgba(30, 94, 255, .9); }
.game-card .pill-green { background: rgba(62, 155, 42, .92); }
.game-card .pill-gold { background: rgba(244, 196, 48, .95); color: #1b1300; }
.game-card h3 { margin: 2px 0 0; }
.card-count { text-align: center; font-weight: 800; margin: 2px 0 0; color: #fff; }
.card-score { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 14px; }
.card-score .icon { width: 20px; height: 20px; color: var(--gold); }
.card-score b { font-size: 20px; color: #fff; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.card-meta .icon { width: 16px; height: 16px; }
.list-sub { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 2px; }

/* Admin panel */
.admin { display: grid; gap: 18px; padding-top: 22px; padding-bottom: 40px; }
.admin-side { background: linear-gradient(180deg, #10203a, #0c1626); border: 1px solid rgba(91, 157, 255, .16); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.admin-side__head { display: flex; gap: 10px; align-items: center; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); }
.admin-side__head strong { display: block; color: #fff; }
.admin-side__head small { font-size: 12px; }
.admin-side__logo { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: rgba(30, 94, 255, .18); color: #5b9dff; }
.admin-side__logo .icon { width: 24px; height: 24px; margin: 0; }
.admin-nav { display: flex; gap: 4px; overflow-x: auto; margin: 0; }
.admin-nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: 650; font-size: 14px; white-space: nowrap; text-decoration: none; }
.admin-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.admin-nav a.is-active { background: rgba(30, 94, 255, .18); color: #fff; box-shadow: inset 3px 0 0 #3d8bff; }
.admin-nav .icon { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.admin-nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; color: #1b1300; background: var(--gold); border-radius: 999px; padding: 1px 8px; }
.admin-side__out { margin: 0; }
.admin-main { min-width: 0; }
.admin-main > .box + .box, .admin-main > .box + .admin-grid { margin-top: 16px; }
.admin-kpis { margin: 0 0 16px; }
.admin-kpis .stat small.d-block { font-size: 12px; }
.admin-grid { display: grid; gap: 16px; }
.admin-grid > .box + .box, .admin-detail .box + .box { margin-top: 0; }
.box-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.box-row h2 { margin: 0; }
.admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.admin-toolbar .tabs--line { margin-bottom: 0; flex: 1 1 auto; }
.admin-search { display: flex; gap: 8px; align-items: center; margin: 0; }
.admin-search .search { position: relative; display: block; }
.admin-search .search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.admin-search input[type=search] { padding-left: 36px; min-width: 240px; }
.admin-search select { min-height: 44px; }
.pad { padding: 16px 18px; margin: 0; }
.h-sm { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.d-block { display: block; }
.admin-detail { display: grid; gap: 16px; align-items: start; }
.admin-game-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.admin-game-head h2 { font-size: 22px; margin: 0 0 4px; flex-wrap: wrap; }
.admin-game-head p { margin: 0 0 2px; }
.admin-game-head p .icon, .admin-cards .icon, .plain-rows .small .icon { width: 14px; height: 14px; color: var(--gold); vertical-align: -2px; }
.admin-game-head__icon { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 18px; object-fit: cover; }
.admin-facts { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin: 0; }
.admin-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.admin-facts dd { margin: 2px 0 0; color: #fff; word-break: break-word; }
.admin-longtext { max-height: 320px; overflow: auto; color: #dce4ec; padding-right: 6px; }
.admin-shots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.admin-shots img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.admin-video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; }
.admin-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.admin-cards p { margin: 6px 0 10px; }
.admin-meta { max-width: 360px; word-break: break-all; color: var(--muted); }
.form-grid .checkline { display: flex; gap: 10px; align-items: flex-start; color: #dce4ec; font-size: 14px; }
.form-grid .checkline input { width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; margin: 1px 0 0; accent-color: #3d8bff; }
.setting-switch { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0c1626; }
.setting-switch b { color: #fff; }
.field { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.admin-login { max-width: 480px; margin-inline: auto; }
.admin-login > p .icon { width: 15px; height: 15px; vertical-align: -2px; color: #5b9dff; }
.admin-login__head { display: flex; gap: 14px; align-items: center; }
.admin-login__head h1 { margin: 0 0 2px; }
.admin-login__head .note { margin: 0; }
.dev-oauth { border: 1px dashed rgba(255,255,255,.2); border-radius: 12px; padding: 12px 14px; }
.dev-oauth .badge .icon { width: 14px; height: 14px; }
.dev-oauth code { word-break: break-all; }

/* Membership (06) */
.center { text-align: center; }
.signup { padding-top: 24px; padding-bottom: 40px; }
.signup > .notice { margin: 0 0 16px; }
.signup-grid { display: grid; gap: 18px; align-items: start; }
.signup-choose { margin: 0 0 16px; }
.signup-choose > p { margin: 0 0 10px; font-weight: 700; font-size: 18px; text-align: center; }
.signup-choose__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.signup-choose__opt { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: #0c1626; color: #dce4ec; text-decoration: none; }
.signup-choose__opt .icon { width: 26px; height: 26px; flex: none; color: #8eb6ff; }
.signup-choose__opt span { display: flex; flex-direction: column; min-width: 0; }
.signup-choose__opt small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.signup-choose__opt.is-active { border-color: #3d8bff; background: rgba(30, 94, 255, .2); color: #fff; box-shadow: 0 0 0 3px rgba(30, 94, 255, .14); }
.signup-choose__opt:focus-visible { outline: 2px solid #8eb6ff; outline-offset: 2px; }
@media (max-width: 959px) {
  .signup-grid[data-show="player"] #developer, .signup-grid[data-show="developer"] #player { display: none; }
}
@media (min-width: 960px) {
  .signup-choose { display: none; }
}
.legal-dialog { width: min(720px, calc(100vw - 24px)); max-height: min(80vh, 760px); padding: 0; border: 1px solid rgba(91, 157, 255, .3); border-radius: 18px; background: #0b1424; color: #dce4ec; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog::backdrop { background: rgba(3, 8, 16, .72); backdrop-filter: blur(3px); }
.legal-dialog__head, .legal-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.legal-dialog__foot { justify-content: flex-end; border-bottom: 0; border-top: 1px solid rgba(255,255,255,.08); }
.legal-dialog__head h2 { margin: 0; font-size: 20px; }
.legal-dialog__head .icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0c1626; color: #dce4ec; cursor: pointer; }
.legal-dialog__head .icon-btn:hover { border-color: #3d8bff; color: #fff; }
.legal-dialog__head .icon-btn .icon { width: 18px; height: 18px; }
.legal-dialog__body { padding: 4px 18px 12px; overflow-y: auto; }
.legal-edit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.ubadges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.ubadge { --ub: #9ec0ff; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ub); background: color-mix(in srgb, var(--ub) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ub) 40%, transparent); white-space: nowrap; }
.ubadge .icon { width: 12px; height: 12px; }
.ubadge__times { font-size: 10px; opacity: .85; margin-left: 1px; }
.badge-rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 220px; }
.badge-rule select, .badge-rule input[type="number"] { max-width: 140px; }
.badge-rule__mode { min-width: 120px; }
.profile-head__titles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-head__titles .ubadges { margin-left: 0; }
.ubadge--gray { --ub: #dce4ec; } .ubadge--blue { --ub: #9ec0ff; } .ubadge--green { --ub: #8ee36a; } .ubadge--gold { --ub: #f4c430; }
.ubadge--purple { --ub: #c4b5fd; } .ubadge--red { --ub: #ff9a9a; } .ubadge--pink { --ub: #f9a8d4; }
.badge--pink { color: #f9a8d4; background: rgba(236, 72, 153, .12); border: 1px solid rgba(244, 114, 182, .4); }
.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; }
.edit-table input:not([type=checkbox]), .edit-table select { width: 100%; min-width: 90px; }
.edit-table input[type=checkbox] { width: 18px; height: 18px; accent-color: #3d8bff; }
.edit-table td { vertical-align: middle; }
.edit-table small { white-space: normal; display: block; max-width: 260px; }
.edit-table__new td { background: rgba(30, 94, 255, .05); }
.is-muted { opacity: .55; }
.signup-panel { background: linear-gradient(180deg, rgba(16, 32, 58, .7), rgba(11, 18, 32, .4)); border: 1px solid rgba(91, 157, 255, .16); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 90px; }
.signup-panel.is-focus { border-color: rgba(91, 157, 255, .55); box-shadow: 0 0 0 3px rgba(30, 94, 255, .14); }
.signup-panel > .box + .box { margin-top: 0; }
.signup-panel__head { display: flex; gap: 14px; align-items: center; padding: 4px 4px 0; }
.signup-panel__head h1 { font-size: 24px; margin: 0 0 2px; }
.signup-panel__head p { color: var(--muted); margin: 0; font-size: 14px; }
.signup-panel__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; }
.signup-panel__icon .icon { width: 28px; height: 28px; margin: 0; }
.signup-panel__icon--blue { background: linear-gradient(180deg, #2f6bff, #1e4fd8); color: #fff; }
.signup-panel__icon--purple { background: linear-gradient(180deg, #7c3aed, #5b21b6); color: #fff; }
.step-head { display: flex; align-items: center; gap: 10px; }
.step-head h2 { margin: 0; font-size: 18px; flex: 1; }
.step-head small { font-weight: 700; }
.step-head .step-no { width: 28px; height: 28px; flex: 0 0 28px; background: var(--blue); color: #fff; font-size: 14px; }
.box.is-next { opacity: .72; border-style: dashed; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #dce4ec; }
.tick-list .icon { width: 15px; height: 15px; color: var(--green); vertical-align: -2px; margin-right: 4px; }
.field-set { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.field-set legend { color: var(--muted); font-size: 13px; margin-bottom: 8px; padding: 0; }
.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { position: relative; margin: 0; }
.pick-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: #0c1626; color: #dce4ec; font-size: 14px; font-weight: 650; cursor: pointer; }
.pick-chip input:checked + span { background: rgba(30, 94, 255, .2); border-color: #3d8bff; color: #fff; }
.pick-chip input:focus-visible + span { outline: 2px solid #8eb6ff; outline-offset: 2px; }
.logo-field { display: grid; gap: 6px; }
.field-label { color: var(--muted); font-size: 13px; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 14px; border: 1px dashed rgba(142, 183, 255, .45); border-radius: 14px; background: #0c1626; color: #dce4ec; text-align: center; cursor: pointer; }
.drop:hover, .drop:focus-within { border-color: #3d8bff; }
.drop .icon { width: 30px; height: 30px; color: #8eb6ff; }
.drop img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.drop small { font-size: 12px; }
.sr-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.social-inputs { display: grid; gap: 10px; }
.with-glyph { position: relative; display: block; }
.with-glyph .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
.with-glyph input { width: 100%; padding-left: 40px; }
.notice--action { align-items: center; margin: 0 0 16px; }
.notice--action span { flex: 1; }
.field-set .notice { margin: 4px 0 0; }
.notice--ok { background: rgba(52, 199, 89, .1); border-color: rgba(52, 199, 89, .4); color: #c9f5d6; }
.sim-card { max-width: 480px; margin-inline: auto; }
.sim-card__head { display: flex; gap: 14px; align-items: center; }
.sim-card__head h1 { margin: 0 0 2px; font-size: 24px; }
.sim-card__head .note { margin: 0; }
.sim-card__logo { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: #fff; }
.sim-card--apple .sim-card__logo { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.sim-card__logo .icon { width: 26px; height: 26px; margin: 0; }
.sim-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sim-accounts form { margin: 0; }
.sim-account { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0c1626; color: #dce4ec; text-align: left; cursor: pointer; font: inherit; }
.sim-account:hover { border-color: #3d8bff; }
.sim-account > span:not(.avatar) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sim-account em { font-style: normal; }
.sim-account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[hidden] { display: none !important; }
.form-grid .drop { display: flex; }
.btn-lg { min-height: 52px; font-size: 16px; }
.signup-panel__icon--green { background: linear-gradient(180deg, #34c759, #1f9d45); color: #fff; }
.store-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-toggle__item { position: relative; }
.store-toggle__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.store-toggle__item span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #0c1626; color: #dce4ec; font-weight: 700; font-size: 14px; cursor: pointer; }
.store-toggle__item .icon { width: 18px; height: 18px; margin: 0; }
.store-toggle__item input:checked + span { border-color: #3d8bff; background: rgba(30, 94, 255, .16); color: #fff; }
.store-toggle__item input:focus-visible + span { outline: 2px solid #8eb6ff; outline-offset: 2px; }
.fetch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fetch-row .is-bad { color: #ff9b9b; }
.fetch-row .is-ok { color: #7ee2a0; }
.trio, .media-drops { display: grid; gap: 14px; }
.media-drops .drop { min-height: 140px; }
.store-media { display: grid; gap: 8px; }
.store-media p { margin: 0; }
.store-media__shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.store-media__shots img { display: block; height: 120px; width: auto; border-radius: 10px; }
.store-media__icon { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; }
input[readonly] { opacity: .8; cursor: default; }
.pick-chip .icon { width: 16px; height: 16px; margin: 0 6px 0 0; }
.pick-chip--red { --chip: #ff5f7a; }
.pick-chip--green { --chip: #34c759; }
.pick-chip--gold { --chip: #f5b83d; }
.pick-chip--purple { --chip: #a66bff; }
.pick-chip--pink { --chip: #ff6bb5; }
.pick-chip--gray { --chip: #8b97a8; }
.pick-chip[class*="pick-chip--"] span { border-color: color-mix(in srgb, var(--chip) 55%, transparent); }
.pick-chip[class*="pick-chip--"] .icon { color: var(--chip); }
.pick-chip[class*="pick-chip--"] input:checked + span { background: color-mix(in srgb, var(--chip) 22%, transparent); border-color: var(--chip); }

@media (min-width: 640px) {
  .social-inputs, .trio, .media-drops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles, .stats-2, .stats-3, .stats-4, .two-up, .flow, .dev-games, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: 1 / -1; }
  .choice-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prow { grid-template-columns: 160px minmax(0, 1fr); }
  .prow__side { grid-column: 2; }
  .cards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .tiles-3, .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow:not(.flow--cards) .flow__item:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 18px; color: var(--muted); font-size: 20px; }
  .flow--cards .flow__item:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 40%; color: var(--muted); font-size: 18px; }
  .video-box { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .split-2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .split-2--wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prow { grid-template-columns: 150px minmax(0, 1fr) minmax(150px, 200px); align-items: center; padding: 14px 18px; }
  .prow__side { grid-column: auto; align-items: flex-end; text-align: right; }
  .test-rows > li { grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
  .cards-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
  .admin-side { position: sticky; top: 88px; }
  .admin-nav { flex-direction: column; overflow: visible; }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail { grid-template-columns: minmax(0, 1fr) 320px; }
  .signup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.status-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top, rgba(30, 94, 255, .18), transparent 60%), #070d18; }
.status-card { width: min(560px, 100%); text-align: center; padding: 36px 28px; border-radius: 22px; border: 1px solid rgba(91, 157, 255, .22); background: linear-gradient(180deg, rgba(16, 32, 58, .85), rgba(11, 18, 32, .85)); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.status-card__logo { display: flex; justify-content: center; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; margin-bottom: 22px; }
.status-card__logo img { border-radius: 12px; }
.status-card__logo b { color: #5b9dff; font-weight: 800; }
.status-card__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(30, 94, 255, .16); color: #8eb6ff; }
.status-card__icon .icon { width: 30px; height: 30px; }
.status-card__icon--maintenance { background: rgba(244, 196, 48, .14); color: var(--gold); }
.status-card__icon--server, .status-card__icon--database, .status-card__icon--config { background: rgba(255, 90, 90, .12); color: #ff9a9a; }
.status-card__code { margin: 14px 0 0; color: var(--muted); font-weight: 700; letter-spacing: .12em; font-size: 13px; }
.status-card h1 { margin: 6px 0 10px; font-size: clamp(24px, 5vw, 32px); }
.status-card p { color: #c9d4e2; line-height: 1.6; }
.status-card__eta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(244, 196, 48, .1); color: var(--gold) !important; font-weight: 700; font-size: 14px; }
.status-card__eta .icon { width: 16px; height: 16px; }
.status-card__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.status-card__detail { text-align: left; max-height: 300px; overflow: auto; padding: 12px; border-radius: 12px; background: #050a12; color: #ffb4b4; font-size: 12px; white-space: pre-wrap; }

/* Admin system pages: cron, logs, head code */
.admin-split { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 1000px) { .admin-split { grid-template-columns: 1fr 1fr; } .admin-split--logs { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; word-break: break-all; }
.code-block { margin: 0; padding: 12px 14px; border-radius: 10px; background: #050a12; border: 1px solid var(--line); color: #cfe0ff; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
.code-edit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.edit-table td b { display: block; }
.log-files { display: flex; flex-direction: column; }
.log-files a { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: #dce4ec; text-decoration: none; font-size: 14px; }
.log-files a span { display: flex; align-items: center; gap: 8px; word-break: break-all; }
.log-files a .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.log-files a:hover { background: rgba(30, 94, 255, .06); }
.log-files a.is-active { background: rgba(30, 94, 255, .14); color: #fff; }
.log-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; }
.log-filter label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.log-filter label:nth-of-type(2) { flex: 1; min-width: 180px; }
.log-lines { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; background: #050a12; }
.log-line { display: flex; gap: 10px; align-items: flex-start; padding: 7px 14px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.log-line .badge { flex: 0 0 auto; font-size: 11px; padding: 1px 7px; }
.log-line code { font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9d4e2; white-space: pre-wrap; word-break: break-word; }
.log-line--error { background: rgba(255, 75, 75, .05); }
.log-line--error code { color: #ffc9c9; }
.log-line--plain code { color: var(--muted); padding-left: 12px; }
.log-clear { display: flex; justify-content: flex-end; }
.status-card__ref { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted) !important; letter-spacing: .04em; }
.btn-danger { background: #d93a2b; color: #fff; }
.btn-locked { background: rgba(244, 196, 48, .1); color: var(--gold); border: 1px dashed rgba(244, 196, 48, .55); }
.btn-locked:hover { background: rgba(244, 196, 48, .18); }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; padding: 0; margin: 0; }
.radio-row legend { font-weight: 700; margin-bottom: 6px; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; }
.inline-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.seat-picker { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0; }
.seat-picker legend { padding: 0 6px; font-weight: 750; }
.seat-picker__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.seat-option { position: relative; cursor: pointer; }
.seat-option input { position: absolute; opacity: 0; pointer-events: none; }
.seat-option span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: var(--card-3); }
.seat-option b { font-size: 22px; color: #fff; }
.seat-option small { color: var(--gold); font-weight: 700; }
.seat-option input:checked + span { border-color: var(--green); box-shadow: 0 0 0 2px rgba(107, 207, 62, .35); }
.seat-option input:focus-visible + span { outline: 2px solid #8eb6ff; outline-offset: 2px; }
.seat-picker__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 12px 0 4px; }
.seat-picker__total strong { font-size: 18px; color: #fff; }
.seat-picker__total [data-price-total] { color: var(--green); }
.rules-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rules-table th, .rules-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.rules-table th { color: var(--muted); font-weight: 700; }
.rules-table td:first-child { font-weight: 700; color: #fff; white-space: nowrap; }
.paid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.paid-card { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #13223b, var(--card)); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
.paid-card--closed { border-color: rgba(91, 157, 255, .35); }
.paid-card--community { border-color: rgba(196, 181, 253, .3); }
.paid-card__top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.paid-card__top h3 { margin: 0 0 4px; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paid-card__top h3 a { color: #fff; }
.paid-card__icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; object-fit: cover; background: var(--card-3); font-size: 24px; }
.paid-card__kind { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.paid-card__kind .badge { font-size: 12px; padding: 3px 8px; }
.paid-card__text { margin: 0; color: var(--muted); font-size: 14px; }
.paid-card__meter { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.paid-card__meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--gold)); }
.paid-card__seats { margin: 0; font-size: 14px; color: var(--muted); }
.paid-card__seats b { color: #fff; font-size: 18px; }
.paid-card__cta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paid-card__cta form { flex: 1; }
.tester-dialog { width: min(560px, calc(100vw - 24px)); }
.tester-dialog__hero { position: relative; text-align: center; padding: 26px 22px 18px; background: radial-gradient(circle at 50% 0, rgba(244, 196, 48, .22), transparent 70%); border-bottom: 1px solid rgba(255,255,255,.08); }
.tester-dialog__hero .icon-btn { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0c1626; color: #dce4ec; }
.tester-dialog__hero h2 { margin: 10px 0 6px; font-size: 22px; }
.tester-dialog__hero p { margin: 0; color: var(--muted); }
.tester-dialog__badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--gold); background: rgba(244, 196, 48, .12); border: 1px solid rgba(244, 196, 48, .45); }
.tester-dialog__badge .icon { width: 34px; height: 34px; }
.tester-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tester-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.tester-steps li > .icon { flex: 0 0 20px; width: 20px; height: 20px; color: #9ec0ff; margin-top: 2px; }
.tester-progress p { margin: 0 0 6px; }
.tester-progress b { font-size: 20px; color: var(--gold); }
.legal-dialog__foot--inline { padding: 12px 0 0; }
.mail-preview__frame { width: 100%; height: 62vh; border: 0; background: #0b1424; }
.mail-tags code { display: inline-block; margin: 2px 0; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); cursor: help; }
.mail-user-pick { position: relative; }
.mail-user-results { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; z-index: 5; left: 0; right: 0; max-height: 240px; overflow: auto; background: var(--panel, #121c2e); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.mail-user-results button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.mail-user-results button:hover, .mail-user-results button:focus { background: rgba(255,255,255,.06); outline: none; }
.mail-user-results strong { font-weight: 700; }
.mail-user-results span { font-size: .85em; opacity: .75; }
.btn-paypal { background: #ffc439; color: #111; }
.btn-paypal:hover { background: #f2b600; }
.req { display: flex; flex-direction: column; gap: 12px; }
.req__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.req__head h3 { margin: 0 0 6px; font-size: 18px; }
.req__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.req__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.req__facts div { background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 12px; }
.req__facts dt { color: var(--muted); font-size: 12px; }
.req__facts dd { margin: 2px 0 0; font-weight: 750; color: #fff; }
.req__pay { border: 1px dashed rgba(255, 196, 57, .45); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.req__pay p { margin: 0; }
.req__ref { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.req__ref label { flex: 1 1 220px; }
.req__foot { display: flex; justify-content: flex-end; }
.req__refnote { display: flex; gap: 8px; align-items: flex-start; color: #ffe08a; }
.contact-mail { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.code-input { font-size: 22px; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.cf-turnstile { min-height: 65px; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.email-login { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.email-login summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.email-login[open] summary { margin-bottom: 10px; }
.notice--stack { display: block; }
.notice--stack p { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.notice--stack p:last-child { margin-bottom: 0; }
.tester-code { margin: 6px 0 0; }
.req__track { border-top: 1px solid var(--line); padding-top: 10px; }
.req__track > summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.req__track[open] > summary { margin-bottom: 8px; }
.mgm-id { margin: 6px 0 0; }
.robot-check { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; width: fit-content; }
.page-html { line-height: 1.7; }
.page-html > :first-child { margin-top: 0; }
.page-html h2 { margin: 28px 0 10px; }
.page-html h3, .page-html h4 { margin: 22px 0 8px; }
.page-html p, .page-html ul, .page-html ol, .page-html blockquote, .page-html pre, .page-html table { margin: 0 0 14px; }
.page-html ul, .page-html ol { padding-left: 22px; }
.page-html a { color: var(--accent, #5b9dff); text-decoration: underline; }
.page-html img { max-width: 100%; height: auto; border-radius: 12px; }
.page-html blockquote { border-left: 3px solid var(--line); padding-left: 14px; color: var(--muted); }
.page-html pre { background: rgba(0,0,0,.3); padding: 12px; border-radius: 10px; overflow-x: auto; }
.page-html table { width: 100%; border-collapse: collapse; }
.page-html th, .page-html td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.page-html details p:last-child { margin-bottom: 4px; }
.page-edit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.live-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.live-preview__subject { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.live-preview .mail-preview__frame { height: 560px; }
.device-dialog { width: min(640px, calc(100vw - 20px)); max-height: 94vh; }
.device-form { display: flex; flex-direction: column; min-height: 0; max-height: 94vh; }
.device-dialog__hero { position: relative; padding: 22px 22px 14px; text-align: center; background: radial-gradient(120% 140% at 50% 0%, rgba(30, 94, 255, .28), transparent 70%); border-bottom: 1px solid rgba(255,255,255,.08); }
.device-dialog__hero h2 { margin: 10px 0 4px; font-size: 21px; }
.device-dialog__hero p { margin: 0 auto; max-width: 460px; color: #a9b7c9; font-size: 14px; }
.device-dialog__hero .icon-btn { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0c1626; color: #dce4ec; cursor: pointer; }
.device-dialog__hero .icon-btn .icon { width: 16px; height: 16px; }
.device-dialog__body { display: grid; gap: 14px; padding: 16px 20px; }
.device-dialog__body .field-set { margin: 0; }
.device-dialog__body legend { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.device-dialog__body legend .icon, .device-grid label > span .icon { width: 16px; height: 16px; color: #8eb6ff; }
.q-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1e5eff; color: #fff; font-size: 12px; }
.device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.device-grid label { display: grid; gap: 6px; font-size: 13px; }
.device-grid label > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tile-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tile-set + .tile-set { margin-top: 8px; }
.pick-tile { position: relative; cursor: pointer; }
.pick-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pick-tile > span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #0c1626; transition: border-color .15s, background .15s; }
.tile-set--sm .pick-tile > span { min-height: 42px; font-size: 13px; }
.pick-tile .icon { width: 22px; height: 22px; }
.pick-tile input:checked + span { border-color: #3d8bff; background: rgba(30, 94, 255, .18); color: #fff; box-shadow: 0 0 0 1px #3d8bff inset; }
.pick-tile input:focus-visible + span { outline: 2px solid #8eb6ff; outline-offset: 2px; }
.device-dialog .small { font-size: 12px; display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.device-dialog .small .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 560px) { .device-grid { grid-template-columns: 1fr; } }
.points-tabs { margin-bottom: 4px; }
.points-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.points-tabs .icon { width: 15px; height: 15px; }
.points-set { scroll-margin-top: 90px; }
.rank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.rank-list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.user-device { min-width: 170px; font-size: 13px; }
.user-device .icon { width: 14px; height: 14px; vertical-align: -2px; }
.inline-link { display: inline-flex; align-items: center; gap: 5px; color: #8eb6ff; text-decoration: none; }
.inline-link:hover { text-decoration: underline; }
.inline-link .icon { width: 14px; height: 14px; }
.legacy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.legacy-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #0c1626; color: inherit; text-decoration: none; }
.legacy-stat b { font-size: 26px; }
.legacy-stat.is-active { border-color: #3d8bff; box-shadow: 0 0 0 1px #3d8bff inset; }
.legacy-stat--red b { color: #ff9a9a; } .legacy-stat--gold b { color: #f4c430; } .legacy-stat--green b { color: #8ee36a; }
.legacy-signals { display: flex; flex-wrap: wrap; gap: 4px; min-width: 220px; }
.legacy-signals .chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.legacy-signals .chip--bad { color: #ff9a9a; border-color: rgba(255, 120, 120, .45); }
.legacy-signals .chip--ok { color: #8ee36a; border-color: rgba(142, 227, 106, .45); }
.legacy-signals .chip--soft { color: #c9d4e2; }
.legacy-delete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.device-dialog__hello { margin: 8px auto 0 !important; max-width: 520px; font-size: 12px !important; color: #8eb6ff !important; letter-spacing: .02em; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.home-grid .box { margin: 0; }
.ref-card__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ref-card__head h2 { margin: 0 0 2px; font-size: 18px; }
.ref-card__head p { margin: 0; }
.ref-card__icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(30, 94, 255, .18); color: #8eb6ff; }
.ref-card__icon--gold { background: rgba(244, 196, 48, .14); color: #f4c430; }
.ref-card__icon .icon { width: 20px; height: 20px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.copy-row input { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.ref-code { display: inline-block; padding: 8px 14px; border-radius: 10px; border: 1px dashed rgba(142, 182, 255, .5); background: #0c1626; font-size: 18px; font-weight: 800; letter-spacing: .12em; color: #fff; user-select: all; }
.ref-friends { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.ref-friends__total { margin: 0 0 8px; }
.ref-friends__total b { font-size: 22px; color: #8eb6ff; margin-right: 4px; }
.ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ref-list li { display: flex; align-items: center; gap: 10px; }
.ref-list li > span:not(.ref-pts) { display: grid; flex: 1; min-width: 0; }
.ref-list a { color: inherit; }
.ref-pts { font-weight: 700; color: #8ee36a; font-size: 13px; }
.more-list { margin-top: 8px; }
.more-list > summary { cursor: pointer; color: #8eb6ff; font-size: 14px; font-weight: 600; padding: 6px 0; }
.more-list[open] > summary { margin-bottom: 6px; }
.sub-head { display: flex; align-items: center; gap: 6px; font-size: 15px; margin: 16px 0 8px; }
.sub-head .icon, .box > h2 .icon, .progress-head h2 .icon { width: 18px; height: 18px; vertical-align: -3px; color: #8eb6ff; }
.mini-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.mini-games--rows { grid-template-columns: 1fr; }
.mini-games li { display: flex; align-items: center; gap: 10px; }
.mini-games li > a:first-child { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #0c1626; color: inherit; text-decoration: none; }
.mini-games li > a:first-child:hover { border-color: #3d8bff; }
.mini-games img, .mini-game__ph { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.mini-game__ph { display: inline-grid; place-items: center; background: #13284a; color: #8eb6ff; }
.mini-games li > a:first-child > span:not(.badge):not(.mini-game__ph) { display: grid; flex: 1; min-width: 0; }
.mini-games b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-games .icon { width: 16px; height: 16px; }
.ref-field { display: grid; gap: 6px; font-size: 14px; }
.ref-field > span { display: inline-flex; align-items: center; gap: 6px; }
.ref-field .icon { width: 16px; height: 16px; color: #8eb6ff; }
.ref-field input { text-transform: uppercase; letter-spacing: .08em; }
.notice--ok { border-color: rgba(142, 227, 106, .45); }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; background: var(--panel, rgba(255,255,255,.03)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.blog-card__media { display: block; aspect-ratio: 16 / 9; background: rgba(255,255,255,.04); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__ph { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 32px; }
.blog-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__body h2, .blog-card__body h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.blog-card__body h2 a, .blog-card__body h3 a { color: inherit; text-decoration: none; }
.blog-card__body h2 a:hover, .blog-card__body h3 a:hover { text-decoration: underline; }
.blog-card__body p { margin: 0; }
.blog-card__body .inline-link { margin-top: auto; }
.blog-post { padding-top: 24px; padding-bottom: 32px; }
.blog-post__head h1 { margin: 8px 0 6px; line-height: 1.2; }
.blog-post__cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin: 16px 0 24px; }
.blog-post__foot { margin-top: 28px; }
.crumbs a { color: var(--muted); }
.blog-body figure { margin: 22px 0; }
.blog-body figcaption { color: var(--muted); font-size: .9rem; margin-top: 6px; text-align: center; }
.blog-body video { width: 100%; height: auto; border-radius: 12px; background: #000; }
.embed { position: relative; aspect-ratio: 16 / 9; margin: 22px 0; border-radius: 12px; overflow: hidden; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-cover img { display: block; border-radius: 10px; margin-bottom: 8px; object-fit: cover; }
.blog-cover input { display: block; margin-top: 8px; }
.blog-media { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.blog-media__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blog-media__row input[type=text], .blog-media__row input[type=url] { flex: 1 1 220px; }
.blog-seo { display: grid; gap: 10px; }
.blog-seo summary { cursor: pointer; font-weight: 600; }
.char-count { display: block; text-align: right; font-size: .8rem; }
.char-count.is-high { color: var(--gold, #f5b942); }

/* Sitemap admin */
.sitemap-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sitemap-part__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sitemap-part__head h3 { margin: 0; }
.sitemap-sample { padding-left: 18px; margin: 10px 0; word-break: break-all; }
.sitemap-steps { padding-left: 20px; margin: 12px 0; }

/* Test types */
.type-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.type-option { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.type-option:hover { border-color: var(--accent, #5b9dff); }
.type-option.is-active { border-color: var(--accent, #5b9dff); background: rgba(91, 157, 255, .08); box-shadow: 0 0 0 1px var(--accent, #5b9dff) inset; }
.type-option__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); flex: none; }
.type-option b { display: block; }
.type-option small { color: var(--muted); }
.type-admin { display: grid; gap: 14px; margin-top: 16px; }
.type-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; opacity: .75; }
.type-card.is-on { opacity: 1; border-color: rgba(52, 199, 89, .45); }
.type-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.type-card__head h3 { margin: 0; font-size: 1.05rem; }
.type-card__head > div { flex: 1; }
.type-card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); }
.type-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.type-card__grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .type-card__grid { grid-template-columns: 1fr; } }
.paid-card__focus b { color: var(--text, inherit); }
.round-focus { margin-bottom: 16px; }

/* Admin screen test */
.screen-bar { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 8px 14px; background: #f5b942; color: #1a1300; font-weight: 600; }
.screen-bar small { font-weight: 400; opacity: .8; margin-left: 6px; }
.screen-bar form { margin: 0; }

/* Player title path */
.path-card { overflow: hidden; }
.path-track {
  list-style: none; margin: 8px 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(var(--path-n, 4), minmax(0, 1fr));
  gap: 8px; position: relative;
}
.path-track::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px;
  background: linear-gradient(90deg, rgba(91,157,255,.15), rgba(244,196,48,.35), rgba(167,139,250,.2));
  z-index: 0;
}
.path-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.path-step b { font-size: .85rem; line-height: 1.2; }
.path-step small { font-size: .72rem; color: var(--muted); line-height: 1.25; }
.path-ring {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.12); background: #0f1b2e;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.path-ring__core { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.04); }
.path-ring__core .icon { width: 22px; height: 22px; }
.path-ring__meter { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; }
.path-step--done .path-ring { border-color: rgba(107, 207, 62, .55); color: var(--green); }
.path-step--current .path-ring { border-color: transparent; transform: scale(1.06); }
.path-step--current.path-step--blue .path-ring { color: #5b9dff; }
.path-step--current.path-step--green .path-ring { color: var(--green); }
.path-step--current.path-step--gold .path-ring { color: var(--gold); }
.path-step--current.path-step--purple .path-ring { color: #a78bfa; }
.path-step--current.path-step--gray .path-ring { color: #9bb0c9; }
.path-step--current.path-step--red .path-ring { color: #ff6b7a; }
.path-step--current.path-step--pink .path-ring { color: #f472b6; }
.path-step--locked { opacity: .45; }
.path-step--locked .path-ring { filter: grayscale(.4); }
.path-next { display: grid; grid-template-columns: 1fr minmax(120px, 1fr) auto; gap: 10px 14px; align-items: center; margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.path-next__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.path-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.path-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1e5eff, #5b9dff, #f4c430); }
.path-bar__pct { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.path-top { margin: 0 0 14px; }
.path-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.path-badge { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); min-width: 0; }
.path-badge span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.path-badge b { font-size: 1.05rem; line-height: 1.15; word-break: break-word; }
.path-badge small { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.path-badge__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.path-badge__icon .icon { width: 22px; height: 22px; }
.path-badge--gold .path-badge__icon { color: var(--gold); background: rgba(244, 196, 48, .14); }
.path-badge--green .path-badge__icon { color: var(--green); background: rgba(107, 207, 62, .14); }
.path-badge--blue .path-badge__icon { color: #5b9dff; background: rgba(30, 94, 255, .16); }
.path-badge--purple .path-badge__icon { color: #a78bfa; background: rgba(124, 58, 237, .18); }
.path-badge--gray .path-badge__icon { color: var(--muted); background: rgba(220, 228, 236, .12); }
.path-badge--red .path-badge__icon { color: #ff6b6b; background: rgba(255, 107, 107, .14); }
.path-badge--pink .path-badge__icon { color: #f9a8d4; background: rgba(236, 72, 153, .12); }
@media (max-width: 900px) {
  .path-next { grid-template-columns: 1fr auto; }
  .path-bar { grid-column: 1 / -1; }
  .path-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .path-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .path-track::before { display: none; }
  .path-badges { grid-template-columns: 1fr 1fr; }
}

/* First-review form — primary player action surface */
.rvform { padding: 24px 0 56px; display: flex; flex-direction: column; gap: 18px; }
.rvform__back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; width: fit-content; }
.rvform__back .icon { width: 16px; height: 16px; }
.rvform__hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; background: linear-gradient(145deg, #142848 0%, #0f1b2e 55%, #0c1626 100%); border: 1px solid rgba(91, 157, 255, .22); border-radius: 20px; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.rvform__icon { width: 112px; height: 112px; border-radius: 26px; object-fit: cover; box-shadow: 0 10px 28px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.rvform__icon--ph { display: grid; place-items: center; background: var(--card-3); color: #8eb6ff; }
.rvform__icon--ph .icon { width: 48px; height: 48px; }
.rvform__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #b7c6d8; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.rvform__eyebrow .sec-icon { width: 28px; height: 28px; }
.rvform__eyebrow .icon { width: 18px; height: 18px; }
.rvform__hero h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
.rvform__hero .lede { margin: 10px 0 0; color: #c5cdd5; font-size: 16px; max-width: 42ch; }
.rvform__step { background: linear-gradient(180deg, #10203a, #0f1b2e); border: 1px solid rgba(91, 157, 255, .16); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.rvform__step-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.rvform__step-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(30, 94, 255, .18); color: #9ec0ff; font-weight: 800; font-size: 18px; }
.rvform__step-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.6vw, 24px); }
.rvform__step-head h2 .sec-icon { width: 34px; height: 34px; }
.rvform__step-head h2 .icon { width: 22px; height: 22px; }
.rvform__step-head p { margin: 6px 0 0; }
.rvform__stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge--lg { min-height: 60px; padding: 8px 18px; border-radius: 12px; }
.store-badge--lg .icon { width: 30px; height: 30px; }
.store-badge--lg span { font-size: 20px; }
.rvform__form { display: flex; flex-direction: column; gap: 18px; }
.rvform__scores { display: flex; flex-direction: column; gap: 12px; }
.rvform__criterion { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 14, 26, .55); }
.rvform__criterion legend { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 0; float: none; }
.rvform__criterion-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: 0 0 44px; }
.rvform__criterion-icon .icon { width: 24px; height: 24px; }
.rvform__criterion-label { font-size: 18px; font-weight: 700; color: #fff; }
.rvform__criterion--blue .rvform__criterion-icon { color: #5b9dff; background: rgba(30, 94, 255, .16); }
.rvform__criterion--purple .rvform__criterion-icon { color: #a78bfa; background: rgba(124, 58, 237, .18); }
.rvform__criterion--green .rvform__criterion-icon { color: var(--green); background: rgba(107, 207, 62, .14); }
.rvform__criterion--red .rvform__criterion-icon { color: #ff7a68; background: rgba(255, 75, 58, .14); }
.rvform__criterion--gold .rvform__criterion-icon { color: var(--gold); background: rgba(244, 196, 48, .14); }
.score-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.score-pick { position: relative; min-width: 0; }
.score-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.score-pick span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: #121d30; color: #9aa8ba; font-weight: 800; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.score-pick span b { font-size: 18px; line-height: 1; }
.score-pick span .icon { width: 18px; height: 18px; opacity: .45; }
.score-pick:hover span { border-color: rgba(91, 157, 255, .45); color: #fff; }
.score-pick input:checked + span, .score-pick input:focus-visible + span { border-color: var(--gold); background: rgba(244, 196, 48, .16); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(244, 196, 48, .18); }
.score-pick input:checked + span .icon, .score-pick input:focus-visible + span .icon { color: var(--gold); opacity: 1; }
.rvform__comment textarea { width: 100%; min-height: 160px; resize: vertical; border-radius: 14px; border: 1px solid var(--line); background: #0b1528; color: #fff; padding: 16px; font: inherit; line-height: 1.55; }
.rvform__comment textarea:focus { outline: none; border-color: rgba(91, 157, 255, .55); box-shadow: 0 0 0 3px rgba(30, 94, 255, .2); }
.rvform__submit { margin-top: 4px; min-height: 58px; font-size: 17px; font-weight: 700; border-radius: 14px; gap: 10px; }
.rvform__submit .icon { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .rvform__hero { grid-template-columns: 1fr; text-align: left; padding: 18px; }
  .rvform__icon { width: 88px; height: 88px; border-radius: 22px; }
  .score-picks { gap: 6px; }
  .score-pick span { min-height: 56px; border-radius: 12px; }
  .score-pick span b { font-size: 16px; }
  .score-pick span .icon { width: 15px; height: 15px; }
}