@import url("https://fonts.googleapis.com/css2?family=Huninn&display=swap");

:root {
  --bg: #100d17;
  --bg-deep: #0a0810;
  --sidebar: #171220;
  --panel: #171220;
  --panel-2: #1e1829;
  --panel-3: #292137;
  --soft: #221c2d;
  --soft-2: #302640;
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.115);
  --text: #f7f7f4;
  --muted: #9a9f9d;
  --muted-2: #6e7471;
  --yellow: #b582ff;
  --yellow-2: #8a5de8;
  --yellow-3: #eadcff;
  --yellow-soft: rgba(181,130,255,.13);
  --yellow-softer: rgba(181,130,255,.075);
  --green: #69df9b;
  --red: #ff6e72;
  --orange: #ff9f37;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --sidebar-w: 104px;
  --topbar-h: 104px;
  --shadow: 0 26px 70px rgba(0,0,0,.34);
}

.chat-action-dialog { padding:34px; display:grid; gap:15px; }.chat-action-dialog h2 { margin:0; font-size:28px; }.chat-action-dialog p { margin:0; color:var(--muted); line-height:1.6; }.chat-dialog-field { display:grid; gap:7px; }.chat-dialog-field span { font-size:9px; color:var(--muted); }.chat-dialog-field input { height:46px; padding:0 13px; border:1px solid var(--line-strong); border-radius:12px; background:#100C17; color:var(--text); font:inherit; }.chat-dialog-actions { display:flex; justify-content:flex-end; gap:9px; }.chat-game-choice-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; max-height:360px; overflow:auto; }.chat-game-choice { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:9px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#21152E; color:var(--text); text-align:left; cursor:pointer; }.chat-game-choice:hover { border-color:#C9A8FF; }.chat-game-choice img,.chat-game-choice i { width:36px; height:44px; display:grid; place-items:center; object-fit:cover; border-radius:7px; background:#38224D; }.chat-game-choice span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "Huninn", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.hidden { display: none !important; }
.fi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.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; }

/* Login */
.login-screen {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px clamp(18px, 4vw, 58px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(181,130,255,.075), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(133,83,229,.05), transparent 32%),
    var(--bg);
}
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.035) .8px, transparent .8px);
  background-size: 20px 20px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.7), transparent 55%);
  pointer-events: none;
}
.account-login-shell {
  width: min(1280px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  padding: 10px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 36px;
  background: #17191a;
  box-shadow: 0 32px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
}
.account-login-sidebar {
  min-width: 0;
  padding: 30px 12px 16px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-right: 1px solid rgba(255,255,255,.065);
}
.account-login-nav { width: 54px; padding: 7px; display: grid; gap: 6px; border: 1px solid rgba(255,255,255,.055); border-radius: 20px; background: #1c1f20; }
.account-login-nav-bottom { margin-top: auto; }
.account-login-nav button,.account-login-nav a { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 13px; background: transparent; color: #747b77; cursor: pointer; text-decoration: none; transition: color .16s ease, background .16s ease, transform .16s ease; }
.account-login-nav button:hover,.account-login-nav a:hover { color: #eceeea; background: rgba(255,255,255,.05); transform: translateY(-1px); }
.account-login-nav button.active { color: #21142F; background: var(--yellow); box-shadow: 0 8px 18px rgba(133,83,229,.18); }
.account-login-nav i { font-size: 17px; }
.login-panel {
  width: 100%;
  min-height: 100%;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
  border-radius: 0 27px 27px 0;
  background: transparent;
  color: var(--text);
}
.login-auth-column { padding:clamp(24px,4vh,40px) clamp(28px,4vw,60px); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.login-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width:250px;
  max-width:100%;
  height:88px;
  margin-bottom:clamp(14px,3vh,30px);
  overflow:visible;
}
/* Preserve the complete supplied wordmark. A gentle scale makes it legible
   without clipping the flower, as happened with the previous canvas crop. */
.login-brand-icon { width:250px; height:92px; object-fit:contain; object-position:left center; transform:scale(1.35); transform-origin:left center; filter:drop-shadow(0 8px 16px rgba(133,83,229,.16)); }
.login-heading { margin-bottom:clamp(16px,2.6vh,24px); }
.login-heading h1 { margin: 0 0 8px; font-size: clamp(32px,3.4vw,48px); letter-spacing: -.045em; line-height: 1; }
.login-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.login-form { display: grid; gap: 16px; margin: 0; }
.login-field-group { display: grid; gap: 8px; }
.field-label { margin: 0 0 0 2px; color: #d7dad7; font-size: 11px; font-weight: 900; }
.field-wrap {
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: #101314;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field-wrap:hover { border-color: rgba(255,255,255,.16); }
.field-wrap:focus-within {
  border-color: var(--yellow);
  background: #111516;
  box-shadow: 0 0 0 3px rgba(181,130,255,.09);
}
.field-wrap > i { color: #8f9592; font-size: 16px; }
.field-wrap:focus-within > i { color: var(--yellow); }
.field-wrap input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.field-wrap input::placeholder { color: #656b68; }
.field-wrap:has(input:autofill),.field-wrap:has(input:-webkit-autofill) { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(181,130,255,.08); }
.field-wrap:has(input:-moz-autofill) { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(181,130,255,.08); }
.field-wrap input:autofill,.field-wrap input:-webkit-autofill { -webkit-text-fill-color:var(--text) !important; caret-color:var(--yellow); box-shadow:0 0 0 1000px #101314 inset !important; transition:background-color 999999s ease-out 0s; }
.field-wrap input:-moz-autofill { color:var(--text) !important; caret-color:var(--yellow); box-shadow:0 0 0 1000px #101314 inset !important; filter:none; }
.field-action {
  border: 0;
  background: transparent;
  color: #8b918e;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 10px;
}
.field-action:hover { color: var(--text); background: rgba(255,255,255,.05); }
.primary-btn, .soft-btn, .ghost-btn, .danger-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; padding: 0 16px; cursor: pointer; font-weight: 850; font-size: 12px; border: 1px solid transparent; }
.primary-btn { background: var(--yellow); color: #20122F; }
.soft-btn { background: var(--soft); border-color: var(--line); color: #e6e8e5; }
.ghost-btn { background: transparent; border-color: var(--line); color: var(--text); }
.danger-btn { background: rgba(255,110,114,.1); border-color: rgba(255,110,114,.16); color: #ff9699; }
.login-btn {
  margin-top: 3px;
  min-height: 54px;
  border-radius: 14px;
  font-size: 12px;
  box-shadow: 0 12px 26px rgba(133,83,229,.2);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.login-btn:hover { background: #c39bff; box-shadow: 0 14px 30px rgba(133,83,229,.28); }
.login-btn:active { transform: translateY(1px); }
.login-btn i { font-size: 15px; }
.preview-btn { min-height: 48px; }
.login-divider { display: flex; align-items: center; gap: 12px; color: #777d79; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.login-divider::before,.login-divider::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.075); }
.quick-login-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.provider-login { min-height: 48px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background:#202324; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; font-weight:850; font-size:12px; transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.provider-login:hover { transform:translateY(-1px); border-color:rgba(181,130,255,.35); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.provider-login:disabled { opacity:.48; cursor:wait; transform:none; }
.provider-login-secondary { --provider-login-inline-shift:calc(50% + 5px); transform:translateX(var(--provider-login-inline-shift)); }
.provider-login-secondary:hover { transform:translate(var(--provider-login-inline-shift),-1px); }
.provider-login-secondary:disabled { transform:translateX(var(--provider-login-inline-shift)); }
.provider-login-unavailable { color:#b8bfba; border-style:dashed; border-color:rgba(255,255,255,.12); background:rgba(32,35,36,.68); }
.provider-login-unavailable:hover { border-color:rgba(181,130,255,.26); color:#f1f3f0; }
.provider-icon { width:20px; height:20px; object-fit:contain; }
.form-error { min-height: 14px; color: #d9363e; font-size: 11px; margin: -3px 2px 0; }
.login-footer { flex:0 0 auto; margin:auto 0 0; padding-top:clamp(10px,2vh,16px); }
.login-host-note { margin:0; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; line-height:1.45; }
.login-host-note i { color:var(--yellow); font-size:14px; }
.login-legal-links { margin-top:12px; display:flex; gap:15px; padding-left:23px; }
.login-legal-links a { color:#a7aca9; font-size:10px; text-decoration:none; }
.login-legal-links a:hover { color:var(--yellow); text-decoration:underline; }
.login-showcase { min-width:0; position:relative; overflow:hidden; border-radius:27px; background:radial-gradient(circle at 60% 15%,rgba(181,130,255,.18),transparent 34%),#121516; color:#f7f7f4; }
.login-showcase::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(18,21,22,.05),transparent 42%,rgba(18,21,22,.92) 88%); }
.login-game-rows { position:absolute; inset:86px -100px 260px -100px; display:grid; gap:14px; transform:rotate(-3deg) scale(1.03); }
.login-game-row { min-width:max-content; display:flex; gap:14px; animation:loginGamesLeft 36s linear infinite; will-change:transform; }
.login-game-row:nth-child(even) { animation-name:loginGamesRight; animation-duration:42s; transform:translateX(-35%); }
.login-game-tile { width:142px; height:188px; flex:0 0 auto; border-radius:18px; position:relative; overflow:hidden; background:linear-gradient(145deg,var(--tile-a,#b582ff),var(--tile-b,#33224c)); box-shadow:0 14px 30px rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.1); }
.login-game-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.login-game-tile img.asset-missing { display:none; }
.login-game-tile span { position:absolute; inset:auto 0 0; padding:28px 11px 10px; background:linear-gradient(transparent,rgba(0,0,0,.82)); font-size:10px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.login-showcase-copy { position:absolute; z-index:4; left:34px; right:34px; bottom:31px; }
.login-showcase-kicker { color:var(--yellow); font-size:9px; font-weight:950; letter-spacing:.16em; }
.login-showcase-copy h2 { max-width:570px; margin:8px 0 9px; font-size:clamp(28px,3.2vw,46px); line-height:1; letter-spacing:-.045em; }
.login-showcase-copy p { max-width:650px; margin:0; color:#c3c9c5; font-size:12px; line-height:1.55; }
.login-feature-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.login-feature-row span { padding:6px 9px; border:1px solid rgba(181,130,255,.18); border-radius:999px; background:rgba(181,130,255,.07); color:#dec9ff; font-size:9px; font-weight:800; }
@keyframes loginGamesLeft { from { transform:translateX(-8%); } to { transform:translateX(-58%); } }
@keyframes loginGamesRight { from { transform:translateX(-58%); } to { transform:translateX(-8%); } }
@media (prefers-reduced-motion:reduce) { .login-game-row { animation-play-state:paused; } }
@media (max-width:1100px) {
  .login-screen { overflow:auto; }
  .account-login-shell { grid-template-columns: 76px minmax(0,1fr); }
  .account-login-sidebar { padding-inline: 4px 10px; }
  .login-panel { grid-template-columns:1fr; min-height:0; max-width:none; }
  .login-auth-column { min-height:650px; }
  .login-showcase { min-height:430px; }
  .login-game-rows { inset:75px -80px 215px; grid-template-rows:repeat(2,150px); overflow:hidden; }
  .login-game-row:nth-child(n+3) { display:none; }
  .login-game-tile { width:112px; height:148px; border-radius:15px; }
  .login-showcase-copy h2 { font-size:34px; }
}

/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); background: var(--bg); }
.account-login-screen { min-height:100vh; padding:24px clamp(18px,4vw,58px); }
.account-login-screen .account-login-shell { min-height:min(720px,calc(100vh - 48px)); }
.app-shell.account-login-view { display:block; }
.account-login-view > .sidebar,
.account-login-view .topbar,
.account-login-view .site-footer,
.account-login-view > .mobile-nav { display:none; }
.account-login-view .main-column { grid-column:auto; }
.guest-mode #top-nana-btn,
.guest-mode #quick-play-btn,
.guest-mode #notification-btn,
.guest-mode .top-actions > [data-route="settings"],
.guest-mode .top-divider { display:none; }
.guest-mode .nav-icon[data-route="controls"],
.guest-mode .nav-icon[data-route="favorites"],
.guest-mode .nav-icon[data-route="history"],
.guest-mode .nav-icon[data-route="nanas"],
.guest-mode .nav-icon[data-route="settings"],
.guest-mode .mobile-nav-item[data-route="controls"],
.guest-mode .mobile-nav-item[data-route="favorites"],
.guest-mode .mobile-nav-item[data-route="nanas"] { opacity:.5; }
.guest-mode .profile-button { min-width:164px; height:54px; padding:5px 13px 5px 7px; border:1px solid rgba(255,255,255,.075); border-radius:17px; background:#191c1d; box-shadow:0 10px 28px rgba(0,0,0,.16); transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.guest-mode .profile-button:hover { border-color:rgba(181,130,255,.25); background:#1d201f; transform:translateY(-1px); }
.guest-mode .profile-button > i { display:none; }
.guest-mode .profile-button .avatar { width:42px; height:42px; flex-basis:42px; border:0; background:rgba(181,130,255,.08); box-shadow:none; }
.guest-mode .profile-button .avatar img { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 5px 9px rgba(133,83,229,.2)); }
.guest-mode .profile-copy strong { font-size:12px; }
.guest-mode .profile-copy small { color:#9ca29e; }
.guest-featured-showcase { margin-top:0; }
.guest-about-card { padding:28px; border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--panel); }
.guest-about-card h3 { margin:10px 0 22px; font-size:24px; line-height:1.12; }
.guest-about-card ol { list-style:none; display:grid; gap:14px; margin:0 0 24px; padding:0; }
.guest-about-card li { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; line-height:1.4; }
.guest-about-card li strong { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:var(--yellow-soft); color:var(--yellow); }
.guest-about-card a { color:var(--yellow); font-size:11px; font-weight:900; }
.guest-session-note { margin:0 0 16px; color:var(--muted); font-size:11px; line-height:1.55; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 18px;
  background: #181a1b;
  border-right: 1px solid rgba(255,255,255,.035);
}
.sidebar-logo-button { width: 74px; height: 74px; border: 0; background: transparent; padding: 6px; border-radius: 22px; cursor: pointer; display: grid; place-items: center; }
.sidebar-logo { width: 58px; height: 58px; object-fit: contain; object-position: center; filter: drop-shadow(0 8px 18px rgba(181,130,255,.08)); }
.nav-capsule {
  margin-top: 22px;
  width: 58px;
  padding: 8px 0;
  display: grid;
  gap: 3px;
  place-items: center;
  border-radius: 29px;
  background: #222526;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.nav-secondary { margin-top: 14px; display: grid; gap: 5px; place-items: center; }
.nav-icon {
  width: 46px;
  height: 46px;
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #8a908d;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-icon i { font-size: 18px; }
.nav-icon.active { background: var(--yellow); color: #21172f; box-shadow: 0 10px 25px rgba(181,130,255,.17); }
.nav-icon.secondary { color: #777d7a; }
@media (hover:hover) and (pointer:fine) {
  .nav-icon:hover { color: #f1f2ef; background: rgba(255,255,255,.045); }
  .nav-icon.active:hover { color: #21172f; background: var(--yellow); }
  [data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    pointer-events: none;
    padding: 7px 10px;
    border-radius: 9px;
    color: #f4f5f2;
    background: #2b2e2f;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    transition: .15s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  [data-label]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.main-column { grid-column: 2; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 clamp(24px,3vw,48px);
  background: rgba(16,18,19,.94);
  border-bottom: 1px solid rgba(255,255,255,.035);
  backdrop-filter: blur(20px);
}
.search-shell { flex: 1; min-width: 240px; max-width: 730px; height: 48px; display: flex; align-items: center; gap: 9px; padding: 5px; border-radius: 30px; background: #1d2021; border: 1px solid rgba(255,255,255,.035); }
.search-box { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.search-box > i { color: #777d79; font-size: 19px; }
.search-box input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.search-box input::placeholder { color: #686e6b; }
.search-submit { height: 40px; min-width: 105px; border: 0; border-radius: 23px; background: #272a2b; color: #f4f5f2; cursor: pointer; font-size: 11px; font-weight: 800; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.quick-play-btn { height: 48px; min-height: 48px; padding: 0 15px 0 7px; border: 0; border-radius: 28px; display: inline-flex; align-items: center; gap: 10px; background: rgba(181,130,255,.11); color: #f8ecb5; cursor: pointer; font-size: 11px; font-weight: 800; }
.quick-play-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: #20122F; }
.icon-btn { border: 0; cursor: pointer; display: grid; place-items: center; }
.top-icon { width: 48px; height: 48px; border-radius: 50%; background: transparent; color: #858b88; position: relative; }
.top-icon i { font-size: 18px; }
.top-divider { width: 1px; height: 32px; background: var(--line); margin: 0 4px; }
.notification-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); top: 8px; right: 7px; border: 1px solid #111314; }
.notification-inbox { position:fixed; z-index:90; top:82px; right:118px; width:min(390px,calc(100vw - 24px)); max-height:min(620px,calc(100vh - 104px)); overflow:hidden; border:1px solid var(--line-strong); border-radius:22px; background:rgba(23,26,25,.98); box-shadow:0 28px 80px rgba(0,0,0,.5); backdrop-filter:blur(22px); }
.notification-inbox-head { min-height:70px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.notification-inbox-head > div { display:grid; gap:3px; }
.notification-inbox-head span { color:var(--yellow); font-size:7px; font-weight:900; letter-spacing:1.8px; }
.notification-inbox-head strong { font-size:16px; }
.notification-inbox-head button { min-height:34px; padding:0 10px; border:1px solid rgba(181,130,255,.15); border-radius:10px; background:var(--yellow-soft); color:#E9DDFF; cursor:pointer; font-size:7px; font-weight:850; }
.notification-list { max-height:calc(min(620px,calc(100vh - 104px)) - 70px); overflow:auto; padding:8px; }
.notification-item { width:100%; min-height:84px; padding:11px; display:grid; grid-template-columns:40px minmax(0,1fr) 7px; align-items:start; gap:10px; border:0; border-radius:15px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.notification-item:hover { background:rgba(255,255,255,.035); }
.notification-item.unread { background:rgba(181,130,255,.055); }
.notification-item-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#252928; color:var(--yellow); font-size:16px; }
.notification-item-copy { min-width:0; display:grid; gap:4px; }
.notification-item-copy strong { font-size:10px; }
.notification-item-copy > span { color:#a7ada8; font-size:8px; line-height:1.5; white-space:normal; }
.notification-item-copy small { color:#6f7571; font-size:6.5px; }
.notification-unread-mark { width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(181,130,255,.08); }
.notification-empty { min-height:230px; display:grid; place-items:center; align-content:center; gap:7px; padding:24px; text-align:center; }
.notification-empty i { color:var(--yellow); font-size:28px; }
.notification-empty strong { font-size:12px; }
.notification-empty span { max-width:260px; color:var(--muted); font-size:8px; line-height:1.5; }
.profile-button { height: 48px; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 2px 0 2px 4px; min-width: 150px; text-align: left; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; overflow:hidden; background: linear-gradient(145deg,#DEC7FF,#8A5DE8); color: #20122F; font-weight: 950; border: 2px solid rgba(181,130,255,.55); box-shadow: 0 0 0 3px rgba(181,130,255,.05); }
.profile-copy { min-width: 0; display: grid; gap: 2px; }
.profile-copy strong { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-copy small { display: inline-flex; align-items: center; gap: 5px; color: #D9C3FF; font-size: 9px; }
.profile-online-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.profile-button > i { margin-left: auto; color: #6b716e; }
.mobile-menu-btn { display: none; width: 42px; height: 42px; border-radius: 13px; background: var(--soft); color: var(--muted); }

.main-content { width: 100%; min-height: calc(100vh - var(--topbar-h)); padding: 34px clamp(24px,3vw,48px) 70px; outline: none; }

.site-footer { margin:0 clamp(24px,3vw,48px); padding:42px 0 24px; display:grid; grid-template-columns:minmax(270px,.8fr) minmax(480px,1.2fr); gap:42px 60px; border-top:1px solid var(--line); color:var(--muted); }
.site-footer-brand { min-width:0; display:flex; align-items:center; }
.site-footer-logo { width:min(240px,100%); height:78px; padding:0; display:flex; align-items:center; justify-content:flex-start; gap:11px; overflow:hidden; border:0; background:transparent; color:#F9F5FF; cursor:pointer; }
.site-footer-logo img { width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 7px 15px rgba(133,83,229,.2)); }
.site-footer-logo span { font-size:30px; font-weight:950; letter-spacing:-1.5px; text-shadow:0 3px 0 #000; }
.site-footer-links { display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); gap:26px; }
.site-footer-links section { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.site-footer-links section > strong { margin-bottom:4px; color:#e5e7e4; font-size:10px; letter-spacing:.04em; }
.site-footer-links button,.site-footer-links a { min-height:0; padding:0; border:0; background:transparent; color:#8e9490; font-size:10px; line-height:1.4; text-align:left; text-decoration:none; cursor:pointer; transition:color .15s ease,transform .15s ease; }
.site-footer-links button:hover,.site-footer-links a:hover { color:var(--yellow); transform:translateX(2px); }
.site-footer-bottom { grid-column:1/-1; padding-top:18px; display:flex; justify-content:space-between; gap:16px; border-top:1px solid rgba(255,255,255,.045); color:#676d69; font-size:9px; }

/* Home / reference-inspired composition */
.home-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,330px); gap: 24px; align-items: start; }
.home-primary { min-width: 0; }
.hero-card {
  min-height: 410px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background: linear-gradient(132deg,#b988ff 0%,#A874FF 52%,#7445C4 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.hero-card::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -160px;
  top: -150px;
  border-radius: 50%;
  border: 80px solid rgba(38,31,3,.1);
  box-shadow: 0 0 0 72px rgba(255,255,255,.07), 0 0 0 145px rgba(46,37,3,.045);
  z-index: -2;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(254,213,53,.14),transparent 52%,rgba(41,33,3,.06));
  z-index: -1;
}
.hero-art { position: absolute; inset: 0 0 0 47%; overflow: hidden; pointer-events: none; }
.hero-art .hero-letter { position: absolute; right: 4%; bottom: -4%; font-size: clamp(190px,22vw,350px); line-height: .78; font-weight: 1000; letter-spacing: -24px; color: rgba(37,30,4,.92); transform: rotate(-7deg); text-shadow: -30px 25px 0 rgba(255,255,255,.11); }
.hero-art .hero-shard { position: absolute; border-radius: 36px; background: rgba(25,22,8,.78); transform: rotate(29deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.hero-art .hero-shard.one { width: 94px; height: 270px; right: 33%; top: 6%; }
.hero-art .hero-shard.two { width: 72px; height: 220px; right: 12%; top: 19%; background: rgba(255,255,255,.22); }
.hero-copy-card { position: absolute; left: 28px; top: 28px; bottom: 28px; width: min(48%,510px); min-width: 330px; padding: clamp(30px,4vw,48px); border-radius: 28px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg,rgba(63,37,96,.55),rgba(38,24,61,.36)); border: 1px solid rgba(181,130,255,.16); color: #FAF6FF; backdrop-filter: blur(5px); }
.hero-kicker { font-size: 10px; letter-spacing: 3px; font-weight: 900; opacity: .84; }
.hero-copy-card h1 { margin: 15px 0 13px; font-size: clamp(39px,4.5vw,64px); line-height: .98; letter-spacing: -3.8px; }
.hero-copy-card p { max-width: 420px; margin: 0; font-size: 12px; line-height: 1.65; color: rgba(255,250,224,.72); }
.hero-actions { margin-top: 23px; display: flex; gap: 9px; flex-wrap: wrap; }
.hero-play { background: #fff; color: #27143E; min-width: 120px; }
.hero-secondary { background: rgba(28,23,5,.16); color: #FAF6FF; border-color: rgba(255,255,255,.12); }
.hero-dots { position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; }
.hero-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(53,42,4,.35); }
.hero-dots .active { width: 27px; border-radius: 6px; background: #FAF6FF; }

.home-side { display: grid; gap: 15px; }
.side-panel { border-radius: 27px; background: #17191a; border: 1px solid var(--line); padding: 22px; min-width: 0; }
.side-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.side-panel-title h2 { margin: 0; font-size: 18px; letter-spacing: -.55px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(105,223,155,.08); color: var(--green); font-size: 9px; font-weight: 900; }
.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.host-card { padding: 14px; border-radius: 18px; background: #202324; border: 1px solid rgba(255,255,255,.035); display: flex; align-items: center; gap: 12px; }
.host-machine-icon { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; background: #2b2e2f; color: var(--yellow); font-size: 18px; }
.host-card-copy { min-width: 0; flex: 1; }
.host-card-copy strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host-card-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.host-card > i { color: #686e6b; }
.host-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.host-metric { padding: 11px; border-radius: 15px; background: #1d2021; }
.host-metric span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }
.host-metric strong { display: block; margin-top: 5px; font-size: 11px; }
.wallet-card { border-radius: 27px; background: linear-gradient(145deg,#181a1b,#1e2122); border: 1px solid var(--line); padding: 20px; overflow: hidden; position: relative; }
.wallet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wallet-title { display: flex; align-items: center; gap: 10px; }
.nana-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--yellow); color: #21172f; font-size: 12px; font-weight: 1000; }
.wallet-title strong { display: block; font-size: 12px; }
.wallet-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.wallet-number { text-align: right; }
.wallet-number strong { display: block; font-size: 23px; letter-spacing: -1px; }
.wallet-number span { display: block; color: var(--muted); font-size: 8px; margin-top: 2px; }
.nana-progress-wrap { margin-top: 17px; }
.nana-progress-meta { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 8px; }
.nana-progress-meta strong { color: var(--yellow); }
.nana-progress { height: 22px; position: relative; overflow: hidden; border-radius: 999px; background: #110C18; border: 1px solid var(--line); }
.nana-progress-fill { height: 100%; min-width: 3%; position: relative; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg,#8A5DE8,#B582FF 58%,#EADCFF); transition: width .45s ease; }
.bubble { position: absolute; bottom: -10px; border-radius: 50%; background: rgba(255,255,255,.38); animation: bubbleRise 4s linear infinite; }
.bubble:nth-child(1) { width: 8px; height: 8px; left: 10%; animation-delay: -.8s; }
.bubble:nth-child(2) { width: 5px; height: 5px; left: 29%; animation-delay: -2.1s; }
.bubble:nth-child(3) { width: 10px; height: 10px; left: 48%; animation-delay: -1.4s; }
.bubble:nth-child(4) { width: 6px; height: 6px; left: 70%; animation-delay: -3.1s; }
.bubble:nth-child(5) { width: 9px; height: 9px; left: 89%; animation-delay: -.2s; }
@keyframes bubbleRise { from { transform: translateY(17px) scale(.82); opacity: .05; } 35% { opacity: .58; } to { transform: translateY(-27px) scale(1.1); opacity: 0; } }

.home-feed { margin-top: 34px; }
.feed-eyebrow { color: var(--muted); font-size: 9px; letter-spacing: 3px; font-weight: 850; text-transform: uppercase; }
.feed-title-row { margin-top: 5px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.feed-title-row h2 { margin: 0; font-size: 30px; letter-spacing: -1.3px; }
.feed-tabs { display: flex; align-items: center; gap: 21px; color: var(--muted); font-size: 10px; }
.feed-tab { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 8px 0; position: relative; }
.feed-tab.active { color: var(--yellow); }
.feed-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); border-radius: 2px; }
.game-scroller { margin-top: 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(245px,1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.game-scroller::-webkit-scrollbar { display: none; }
.game-card { min-width: 0; border-radius: 21px; overflow: hidden; border: 1px solid var(--line); background: #17191a; cursor: pointer; scroll-snap-align: start; transition: transform .18s ease, border-color .18s ease; }
@media (hover:hover) and (pointer:fine) { .game-card:hover { transform: translateY(-3px); border-color: rgba(181,130,255,.23); } }
.game-art { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #222526; }
.game-art::before { content: ""; position: absolute; width: 170px; height: 170px; right: -46px; top: -65px; border-radius: 50%; background: rgba(255,255,255,.19); }
.game-art::after { content: ""; position: absolute; width: 145px; height: 145px; left: -42px; bottom: -80px; border-radius: 50%; border: 28px solid rgba(20,20,13,.18); }
.game-art-initials { position: absolute; right: 14px; bottom: -4px; font-size: 68px; line-height: 1; font-weight: 1000; letter-spacing: -6px; color: rgba(36,29,4,.75); z-index: 2; }
.game-art-badge { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 5px 8px; border-radius: 8px; color: #20122F; background: rgba(255,255,255,.77); font-size: 8px; font-weight: 900; }
.game-card-body { padding: 14px; }
.game-card-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.game-card h3 { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; letter-spacing: -.3px; }
.favorite-btn { width: 29px; height: 29px; flex: 0 0 29px; border: 0; border-radius: 10px; background: #222526; color: #858b88; cursor: pointer; }
.favorite-btn.active { color: var(--yellow); background: var(--yellow-soft); }
.game-meta { margin-top: 6px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; overflow: hidden; white-space: nowrap; }
.game-meta span { overflow: hidden; text-overflow: ellipsis; }
.game-card-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.nana-cost { display: inline-flex; align-items: center; gap: 5px; color: #d2d5d2; font-size: 9px; font-weight: 800; }
.nana-cost .nana-icon { width: 18px; height: 18px; border-radius: 6px; font-size: 7px; }
.card-play { width: 33px; height: 33px; border: 0; border-radius: 11px; display: grid; place-items: center; background: var(--yellow); color: #21172f; cursor: pointer; }

/* Generic pages */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-header .eyebrow { color: var(--yellow); }
.page-header h1 { margin: 8px 0 0; font-size: clamp(38px,5vw,62px); letter-spacing: -3px; line-height: .95; }
.page-header p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 650px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.library-toolbar { margin-bottom: 18px; display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
.filter-row { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-chip { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #17191a; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; }
.filter-chip.active { background: var(--yellow); border-color: var(--yellow); color: #21172f; }
.sort-select { height: 39px; border: 1px solid var(--line); border-radius: 12px; padding: 0 34px 0 13px; background: #17191a; color: #e3e5e2; font-size: 10px; }
.library-selects { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.library-tag-select { min-width: 150px; }
.library-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.empty-state { grid-column: 1/-1; min-height: 260px; border-radius: 24px; border: 1px dashed var(--line-strong); display: grid; place-items: center; text-align: center; padding: 30px; color: var(--muted); }
.empty-state i { display: block; margin-bottom: 12px; color: var(--yellow); font-size: 28px; }
.empty-state strong { display: block; color: var(--text); margin-bottom: 6px; }
.history-table { border-radius: 24px; overflow: hidden; background: #17191a; border: 1px solid var(--line); }
.history-row { min-height: 68px; display: grid; grid-template-columns: minmax(220px,1.5fr) 1fr .7fr .7fr; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 10px; }
.history-row.head { min-height: 46px; border-top: 0; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1.4px; }
.history-game { min-width: 0; display: flex; align-items: center; gap: 11px; }
.history-game strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-thumb { width: 54px; height: 35px; flex: 0 0 auto; border-radius: 9px; }
.muted { color: var(--muted); }
.account-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 18px; }
.profile-hero { min-height: 180px; border-radius: 27px; padding: 24px; display: flex; align-items: end; background: linear-gradient(135deg,#252829,#181a1b); border: 1px solid var(--line); }
.profile-main { display: flex; align-items: center; gap: 14px; }
.profile-main .avatar { width: 65px; height: 65px; flex-basis: 65px; font-size: 18px; }
.profile-main h2 { margin: 0; font-size: 24px; letter-spacing: -1px; }
.profile-main p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel { border-radius: 24px; background: #17191a; border: 1px solid var(--line); padding: 20px; min-width: 0; }
.account-details { margin-top: 18px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel-title h3 { margin: 0; font-size: 14px; }
.panel-title span { color: var(--muted); font-size: 8px; }
.detail-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); font-size: 10px; }
.detail-row:first-child { border-top: 0; }
.detail-row span { color: var(--muted); }
.detail-row strong { max-width: 65%; text-align: right; overflow-wrap: anywhere; }
.settings-stack { display: grid; gap: 10px; }
.settings-card { min-height: 65px; display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 16px; background: #202324; border: 1px solid rgba(255,255,255,.03); }
.settings-card > i { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 12px; display: grid; place-items: center; background: #292c2d; color: var(--yellow); }
.settings-card > div { min-width: 0; flex: 1; }
.settings-card strong { display: block; font-size: 10px; }
.settings-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.switch { width: 40px; height: 23px; flex: 0 0 40px; position: relative; border: 0; border-radius: 999px; background: #303435; cursor: pointer; }
.switch::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: #8c9290; transition: .18s ease; }
.switch.on { background: rgba(181,130,255,.2); }
.switch.on::before { left: 20px; background: var(--yellow); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(5,7,8,.72); backdrop-filter: blur(14px); }
.game-modal { width: min(900px,100%); max-height: calc(100vh - 48px); overflow: auto; position: relative; border-radius: 30px; background: #161819; border: 1px solid var(--line-strong); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.modal-close { position: absolute; right: 15px; top: 15px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 13px; display: grid; place-items: center; background: rgba(16,18,19,.66); color: #f4f5f2; cursor: pointer; backdrop-filter: blur(8px); }
.game-modal-hero { min-height: 290px; position: relative; display: flex; align-items: end; padding: 28px; color: #21172f; overflow: hidden; }
.game-modal-hero::after { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; right: -80px; top: -90px; border: 70px solid rgba(255,255,255,.12); }
.modal-hero-copy { position: relative; z-index: 2; max-width: 620px; }
.modal-hero-copy h2 { margin: 8px 0 8px; font-size: clamp(38px,6vw,67px); line-height: .92; letter-spacing: -3.5px; }
.modal-hero-copy p { max-width: 570px; margin: 0; line-height: 1.55; font-size: 11px; color: rgba(42,35,5,.73); }
.game-modal-body { padding: 22px 28px 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.modal-stats { display: flex; gap: 9px; flex-wrap: wrap; }
.modal-stat { padding: 10px 12px; border-radius: 12px; background: #202324; min-width: 100px; }
.modal-stat span { display: block; color: var(--muted); font-size: 8px; }
.modal-stat strong { display: block; margin-top: 4px; font-size: 10px; }
.modal-play { min-width: 145px; }


.game-info-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.info-chip { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; background: #202324; color: #d8dbd8; font-size: 8px; }
.info-chip i { color: var(--yellow); }
.game-description { max-width: 650px; margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.play-box { min-width: 210px; padding: 16px; border-radius: 18px; background: #202324; border: 1px solid var(--line); }
.play-cost { margin-bottom: 12px; }
.play-cost span { display: block; color: var(--muted); font-size: 8px; }
.play-cost strong { display: block; margin-top: 4px; font-size: 13px; }
.play-box .primary-btn { width: 100%; }
.play-estimate { margin: 9px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }

/* Profile menu / toast */
.profile-menu { position: fixed; top: 84px; right: 34px; z-index: 60; width: 190px; padding: 7px; border-radius: 17px; background: #212425; border: 1px solid var(--line-strong); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.profile-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; color: #d8dbd8; cursor: pointer; padding: 0 10px; font-size: 10px; text-align: left; }
.profile-menu button:hover { background: rgba(255,255,255,.04); }
.profile-menu button small { margin-left:auto; color:#858b87; font-size:6px; }
.profile-menu button.is-locked { color:#8b918d; }
.developer-enabled { color:var(--green); }
.developer-locked { color:#a2a7a3; }
.developer-launch-btn.is-locked { opacity:.62; }
.account-actions-card { display:grid; gap:13px; }
.account-actions-card .danger-btn { width:100%; }
.developer-tools-card .settings-stack { gap:12px; }
.developer-restart-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid rgba(255,110,114,.16); border-radius:15px; background:linear-gradient(135deg,rgba(103,30,35,.22),rgba(32,29,30,.52)); }
.developer-restart-card > div { min-width:0; display:flex; align-items:center; gap:10px; }
.developer-restart-card strong,.developer-restart-card small { display:block; }
.developer-restart-card strong { color:#f2f1ee; font-size:10px; }
.developer-restart-card small { margin-top:4px; color:#a7aca7; font-size:8px; line-height:1.45; }
.developer-restart-icon { width:35px; height:35px; flex:0 0 35px; display:grid; place-items:center; border-radius:11px; color:#ffaaa9; background:rgba(255,110,114,.11); }
.developer-restart-btn { min-height:38px; padding:0 12px; white-space:nowrap; }
.developer-restart-btn:disabled { cursor:wait; opacity:.68; }
@media (max-width: 480px) { .developer-restart-card { grid-template-columns:1fr; } .developer-restart-btn { width:100%; } }
.menu-separator { height: 1px; margin: 5px 7px; background: var(--line); }
.toast-region { position: fixed; top: 22px; left: 22px; z-index: 120; width: min(370px,calc(100vw - 44px)); display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 7px; pointer-events:none; }
.toast { position:relative; min-width:0; display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(27,30,29,.94); box-shadow:0 14px 42px rgba(0,0,0,.33); color:#d9ddda; font-size:8px; line-height:1.35; backdrop-filter:blur(20px); animation:toast-enter .2s cubic-bezier(.2,.8,.2,1); }
.toast-primary { grid-column:1 / -1; min-height:58px; padding:13px 14px; border-color:rgba(181,130,255,.3); background:linear-gradient(135deg,rgba(47,30,72,.97),rgba(25,20,34,.97)); font-size:9px; }
.toast-compact { min-height:42px; padding:8px 9px; font-size:7px; }
.toast i { flex:0 0 auto; color:var(--yellow); font-size:14px; }
.toast-compact i { font-size:11px; }
.toast-repeat-count { position:absolute; top:-8px; right:9px; z-index:1; display:grid; place-items:center; min-width:20px; height:19px; padding:0 5px; border:1px solid rgba(222,199,255,.72); border-radius:8px 8px 4px 8px; background:linear-gradient(135deg,#D8BEFF,#8A5DE8); box-shadow:0 4px 14px rgba(0,0,0,.34); color:#21142F; font-size:8px; font-weight:900; line-height:1; }
@keyframes toast-enter { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Stream page */
.stream-page { position: fixed; inset: 0; z-index: 100; background: #030405; color: #f7f8f5; overflow: hidden; }
.stream-stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: #030405; }
.stream-stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.08) 18%,transparent 35%,transparent 66%,rgba(0,0,0,.32) 100%); }
.stream-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; touch-action: none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.stream-jpeg-frame { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:none; object-fit:contain; background:#000; pointer-events:none; user-select:none; }
.stream-jpeg-frame.active { display:block; }
.stream-video.jpeg-underlay { opacity:0; }
.stream-refresh-freeze { position:absolute; z-index:4; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .18s ease,visibility 0s linear .18s; }
.stream-stage.stream-visual-recovering .stream-refresh-freeze { opacity:1; visibility:visible; transition-delay:0s; }
.remote-game-cursor { position:absolute; z-index:7; left:0; top:0; width:32px; height:32px; display:none; pointer-events:none; transform:translate3d(0,0,0); will-change:transform; }
.remote-game-cursor img { display:block; width:32px; height:32px; object-fit:contain; object-position:left top; }
.stream-stage.remote-cursor-active,.stream-stage.remote-cursor-active .stream-video { cursor:none; }
.stream-stage.remote-cursor-active .remote-game-cursor { display:block; }
.stream-top-notice { position:absolute; z-index:22; inset:0 0 auto; min-height:168px; padding:18px clamp(18px,4vw,58px) 62px; display:flex; justify-content:center; pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-118%); transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s; background:linear-gradient(180deg,rgba(255,213,56,.94) 0%,rgba(255,193,19,.72) 42%,rgba(255,190,13,.19) 76%,rgba(255,190,13,0) 100%); backdrop-filter:blur(18px) saturate(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.12); }
.stream-top-notice-card { width:min(720px,100%); display:flex; align-items:center; justify-content:center; gap:13px; color:#281f04; text-align:left; text-shadow:0 1px 0 rgba(255,255,255,.22); }
.stream-top-notice-card > div { min-width:0; display:grid; gap:2px; }
.stream-top-notice-icon { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(49,38,4,.18); border-radius:14px; background:rgba(47,37,5,.13); color:#241334; font-size:17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.23); }
.stream-top-notice-kicker { font-size:7px; font-weight:900; letter-spacing:.18em; opacity:.7; }
.stream-top-notice strong { font-size:clamp(15px,2.1vw,21px); letter-spacing:-.45px; }
.stream-top-notice p { max-width:560px; margin:0; font-size:9px; line-height:1.45; font-weight:750; opacity:.75; }
.stream-top-notice output { min-width:74px; margin-left:auto; padding:10px 12px; border:1px solid rgba(49,38,4,.16); border-radius:13px; background:rgba(54,42,4,.14); color:#241334; font-family:ui-monospace,"Cascadia Code",monospace; font-size:13px; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; }
.stream-update-warning-notice { background:linear-gradient(180deg,rgba(218,68,58,.96) 0%,rgba(184,48,42,.78) 43%,rgba(145,30,28,.22) 76%,rgba(145,30,28,0) 100%); }
.stream-update-warning-notice .stream-top-notice-card { color:#fff4f2; text-shadow:0 1px 0 rgba(40,0,0,.3); }
.stream-update-warning-notice .stream-top-notice-icon { border-color:rgba(255,244,242,.22); background:rgba(58,7,5,.2); color:#fff5f2; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.stream-security-verification-notice { background:linear-gradient(180deg,rgba(98,217,161,.96) 0%,rgba(58,178,118,.75) 43%,rgba(31,119,77,.18) 76%,rgba(31,119,77,0) 100%); }
.stream-security-verification-notice .stream-top-notice-card { color:#072617; text-shadow:0 1px 0 rgba(238,255,246,.24); }
.stream-security-verification-notice .stream-top-notice-icon { border-color:rgba(7,38,23,.19); background:rgba(7,38,23,.12); color:#0a3520; box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.stream-top-notice-icon .stream-steam-launch-icon { width:27px; height:27px; display:block; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,35,83,.32)); }
.stream-top-notice-icon .stream-epic-launch-icon { width:25px; height:25px; display:block; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.52)); }
/* Steam is a launch hand-off, not an anti-cheat alert. Give it its own
   recognizable blue surface and use the supplied Steam asset. */
.stream-stage.stream-steam-launch .stream-security-verification-notice { background:linear-gradient(180deg,rgba(77,177,255,.98) 0%,rgba(31,124,218,.8) 43%,rgba(13,69,143,.22) 76%,rgba(13,69,143,0) 100%); }
.stream-stage.stream-steam-launch .stream-security-verification-notice .stream-top-notice-card { color:#f4fbff; text-shadow:0 1px 0 rgba(0,29,73,.42); }
.stream-stage.stream-steam-launch .stream-security-verification-notice .stream-top-notice-icon { border-color:rgba(239,249,255,.25); background:rgba(0,46,105,.24); color:#f4fbff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
/* Epic uses a quiet graphite-and-white launch surface. It is intentionally
   distinct from the green verification and blue Steam states while keeping
   the full player shell usable above the artwork cover. */
.stream-stage.stream-epic-launch .stream-security-verification-notice { background:linear-gradient(180deg,rgba(228,232,237,.96) 0%,rgba(137,145,154,.78) 43%,rgba(37,42,49,.22) 76%,rgba(19,23,29,0) 100%); }
.stream-stage.stream-epic-launch .stream-security-verification-notice .stream-top-notice-card { color:#12161b; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.stream-stage.stream-epic-launch .stream-security-verification-notice .stream-top-notice-icon { border-color:rgba(255,255,255,.62); background:rgba(26,31,37,.8); color:#f8fafc; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 5px 18px rgba(0,0,0,.22); }
/* Keep an external security helper completely behind the player cover. It is
   above the raw video and loader, but deliberately below the top bar, HUD,
   edge rail, touch controls, and settings drawer so the player can always
   stop the session or change settings while verification runs. */
.stream-security-verification-splash { position:absolute; z-index:6; inset:0; overflow:hidden; pointer-events:auto; opacity:0; visibility:hidden; background:#050807; transition:opacity .48s ease,visibility 0s linear .48s; }
.stream-security-verification-fallback,.stream-security-verification-image,.stream-security-verification-shade { position:absolute; inset:0; width:100%; height:100%; }
.stream-security-verification-fallback { background-position:center; background-size:cover; transform:scale(1.035); }
.stream-security-verification-image { display:block; object-fit:cover; object-position:center; opacity:.94; transform:scale(1.02); transition:opacity .22s ease,transform .65s ease; }
.stream-security-verification-image.is-switching { opacity:.08; transform:scale(1.045); }
.stream-security-verification-shade { pointer-events:none; background:linear-gradient(180deg,rgba(1,6,4,.26) 0%,rgba(2,9,6,.2) 38%,rgba(1,5,3,.72) 100%),radial-gradient(ellipse at center,transparent 16%,rgba(0,0,0,.38) 100%); }
.stream-stage.stream-security-verifying .stream-security-verification-splash { opacity:1; visibility:visible; transition-delay:0s; }
.stream-stage.stream-steam-launch .stream-security-verification-splash { background:#04101d; }
.stream-stage.stream-steam-launch .stream-security-verification-shade { background:linear-gradient(180deg,rgba(2,22,48,.3) 0%,rgba(2,21,47,.2) 38%,rgba(1,13,30,.78) 100%),radial-gradient(ellipse at center,transparent 16%,rgba(0,39,92,.44) 100%); }
.stream-stage.stream-epic-launch .stream-security-verification-splash { background:#101216; }
.stream-stage.stream-epic-launch .stream-security-verification-shade { background:linear-gradient(180deg,rgba(19,23,29,.28) 0%,rgba(19,23,29,.22) 38%,rgba(3,5,8,.8) 100%),radial-gradient(ellipse at center,transparent 16%,rgba(181,190,201,.16) 100%); }
/* A reconnect does not expose a black video surface. Reuse the game's IGDB
   artwork below all controls and rotate it while the existing reconnect banner
   explains what is happening. */
.stream-reconnect-splash { position:absolute; z-index:6; inset:0; overflow:hidden; pointer-events:none; opacity:0; visibility:hidden; background:#04080d; transition:opacity .36s ease,visibility 0s linear .36s; }
.stream-reconnect-fallback,.stream-reconnect-image,.stream-reconnect-shade { position:absolute; inset:0; width:100%; height:100%; }
.stream-reconnect-fallback { background-position:center; background-size:cover; transform:scale(1.035); }
.stream-reconnect-image { display:block; object-fit:cover; object-position:center; opacity:.92; transform:scale(1.02); transition:opacity .22s ease,transform .65s ease; }
.stream-reconnect-image.is-switching { opacity:.08; transform:scale(1.045); }
.stream-reconnect-shade { background:linear-gradient(180deg,rgba(1,7,14,.36) 0%,rgba(1,8,17,.18) 38%,rgba(1,6,12,.76) 100%),radial-gradient(ellipse at center,transparent 14%,rgba(0,0,0,.47) 100%); }
.stream-stage.stream-reconnect-cover .stream-reconnect-splash { opacity:1; visibility:visible; transition-delay:0s; }
/* Top notices have a deliberate visibility order. The verification surface
   owns the screen until the host says ready/failed or a decoded game frame
   arrives; it never exposes the anti-cheat helper underneath. */
.stream-stage.stream-security-verifying .stream-security-verification-notice,
.stream-stage.stream-update-warning .stream-update-warning-notice,
.stream-stage.stream-reconnecting .stream-reconnect-notice,
.stream-stage:not(.stream-update-warning).stream-reconnecting .stream-reconnect-notice,
.stream-stage.stream-afk .stream-afk-notice { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.stream-stage.stream-security-verifying .stream-update-warning-notice,
.stream-stage.stream-security-verifying .stream-reconnect-notice,
.stream-stage.stream-security-verifying .stream-afk-notice,
.stream-stage.stream-update-warning .stream-reconnect-notice,
.stream-stage.stream-update-warning .stream-afk-notice,
.stream-stage.stream-reconnecting.stream-afk .stream-afk-notice { opacity:0; visibility:hidden; transform:translateY(-118%); transition-delay:0s,.28s,.28s; }
.session-takeover-notice { position:absolute; z-index:60; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,3,3,.68); backdrop-filter:blur(10px); }
.session-takeover-card { width:min(470px,calc(100% - 24px)); padding:26px; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:#171a19; box-shadow:0 28px 80px rgba(0,0,0,.55); text-align:center; }
.session-takeover-card h3 { margin:0; font-size:24px; }
.session-takeover-card p { margin:9px 0 18px; color:var(--muted); line-height:1.6; }
.takeover-countdown-track { height:7px; overflow:hidden; border-radius:999px; background:#2a2d2b; }
.takeover-countdown-bar { height:100%; width:100%; border-radius:inherit; background:var(--yellow); transform-origin:left; animation:takeoverCountdown var(--takeover-countdown-duration,15s) linear forwards; }
.session-takeover-card button,.takeover-start-btn { min-height:44px; margin-top:18px; padding:0 18px; border:0; border-radius:13px; background:var(--yellow); color:#20122F; font-weight:850; cursor:pointer; }
.takeover-start-btn { background:#d93d3d; color:#fff; }
.session-takeover-actions,.session-takeover-start-actions { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-top:18px; }
.stream-standard-launch-notice .session-takeover-start-actions { position:relative; z-index:3; pointer-events:auto; }
.session-takeover-actions button,.session-takeover-start-actions button { min-width:140px; margin-top:0; }
.session-takeover-actions .soft-btn,.session-takeover-start-actions .soft-btn { border:1px solid rgba(255,255,255,.11); background:#282b29; color:#e9ece8; }
.session-takeover-actions button:disabled,.session-takeover-start-actions button:disabled { cursor:wait; opacity:.62; }
.session-takeover-start-actions .play-anyways-btn { background:var(--yellow); color:#20122F; }
.session-takeover-queue { min-height:44px; margin-top:18px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(181,130,255,.2); border-radius:13px; background:rgba(181,130,255,.08); color:#E6D7FF; font-size:9px; font-weight:850; }
.session-takeover-queue i { font-size:13px; }
@keyframes takeoverCountdown { to { transform:scaleX(0); } }
@media (max-width:620px) {
  .stream-top-notice { min-height:148px; padding:13px 15px 48px; }
  .stream-top-notice-card { align-items:flex-start; gap:9px; }
  .stream-top-notice-icon { width:38px; height:38px; border-radius:12px; font-size:15px; }
  .stream-top-notice p { font-size:8px; }
  .stream-top-notice output { min-width:62px; margin-left:0; padding:9px 8px; font-size:11px; }
  .session-takeover-card { padding:22px 18px; }
  .session-takeover-card h3 { font-size:22px; }
  .session-takeover-actions button,.session-takeover-start-actions button { min-width:min(150px,100%); flex:1 1 140px; }
}
.session-ended-notice { position:absolute; z-index:70; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 40%,rgba(181,130,255,.08),transparent 28%),rgba(3,4,5,.88); backdrop-filter:blur(15px); }
.session-ended-card { width:min(540px,calc(100% - 24px)); padding:38px 34px; border:1px solid rgba(255,255,255,.09); border-radius:28px; background:#151817; box-shadow:0 30px 100px rgba(0,0,0,.64); text-align:center; }
.session-ended-icon { width:76px; height:76px; margin:0 auto 18px; border-radius:24px; display:grid; place-items:center; background:rgba(255,115,115,.11); color:#ff8f8f; font-size:30px; }
.session-ended-card h2 { margin:8px 0 0; font-size:clamp(26px,4vw,42px); letter-spacing:-1.4px; }
.session-ended-card p { max-width:430px; margin:12px auto 0; color:#9ba09d; font-size:11px; line-height:1.7; }
.session-ended-actions { margin-top:25px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.session-ended-actions button { min-width:150px; }
.stream-placeholder { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 42%,rgba(181,130,255,.09),transparent 25%),linear-gradient(145deg,#080a0a,#030405 62%); }
.stream-standard-launch { isolation:isolate; overflow:hidden; background:#060807; }
.stream-standard-launch-art,.stream-standard-launch-image,.stream-standard-launch-shade { position:absolute; inset:0; width:100%; height:100%; }
.stream-standard-launch-art { z-index:0; background-position:center; background-size:cover; filter:saturate(1.08); transform:scale(1.045); opacity:.5; }
.stream-standard-launch-image { z-index:0; display:block; object-fit:cover; object-position:center; opacity:1; transform:scale(1.02); transition:opacity .22s ease,transform .65s ease; }
.stream-standard-launch-image.is-switching { opacity:.08; transform:scale(1.055); }
.stream-standard-launch-shade { z-index:1; background:linear-gradient(180deg,color-mix(in srgb,var(--launch-primary) 26%,transparent) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,.08) 58%,rgba(250,250,247,.68) 100%); }
.stream-standard-launch-notice { z-index:2; display:flex; background:linear-gradient(180deg,color-mix(in srgb,var(--launch-primary) 88%,rgba(255,255,255,.94)) 0%,color-mix(in srgb,var(--launch-secondary) 69%,rgba(17,20,20,.72)) 48%,color-mix(in srgb,var(--launch-secondary) 16%,transparent) 100%); opacity:1; visibility:visible; transform:translateY(0); transition:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.stream-standard-launch-notice .stream-top-notice-card { color:#10130e; text-shadow:0 1px 0 rgba(255,255,255,.32); }
.stream-standard-launch-notice .stream-top-notice-icon { overflow:hidden; border-color:rgba(255,255,255,.38); background:rgba(13,16,13,.18); }
.stream-game-launch-icon { display:block; width:28px; height:28px; border-radius:9px; object-fit:cover; }
.stream-standard-launch-progress { position:absolute; z-index:2; left:50%; bottom:clamp(34px,7vh,78px); width:min(190px,44vw); height:4px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.24); box-shadow:0 2px 18px rgba(0,0,0,.22); transform:translateX(-50%); }
.stream-standard-launch-progress span { display:block; width:38%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--launch-primary),var(--launch-secondary),var(--launch-primary)); box-shadow:0 0 18px color-mix(in srgb,var(--launch-primary) 68%,transparent); animation:streamLoad 1.3s ease-in-out infinite alternate; }
.stream-stage.stream-security-verifying .stream-standard-launch-notice { opacity:0; visibility:hidden; transform:translateY(-118%); }
.stream-placeholder-card { width: min(500px,calc(100% - 32px)); padding: 34px 30px; border-radius: 30px; text-align: center; background: rgba(20,22,21,.76); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 28px 90px rgba(0,0,0,.42); backdrop-filter: blur(24px); }
.stream-placeholder-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 24px; display: grid; place-items: center; background: var(--yellow); color: #211c05; font-size: 29px; box-shadow: 0 12px 42px rgba(181,130,255,.16); }
.stream-placeholder-card h2 { margin: 0; font-size: clamp(24px,3vw,38px); letter-spacing: -1.5px; }
.stream-placeholder-card p { max-width: 380px; margin: 10px auto 0; color: #929894; font-size: 10px; line-height: 1.7; }
.stream-loader { width: 180px; height: 4px; margin: 24px auto 0; border-radius: 999px; overflow: hidden; background: #272a28; }
.stream-loader span { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--yellow); animation: streamLoad 1.3s ease-in-out infinite alternate; }
@keyframes streamLoad { from { transform: translateX(0); } to { transform: translateX(265%); } }
.stream-top-bar { position: absolute; z-index: 8; top: 18px; left: 18px; right: 18px; min-width: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.stream-top-bar > * { pointer-events: auto; }
.stream-stage.top-bar-hidden .stream-top-bar { display:none; }
.stream-top-back, .stream-top-icon { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; display: grid; place-items: center; background: rgba(15,17,16,.72); color: #eef0ed; backdrop-filter: blur(18px); cursor: pointer; transition: background .16s ease,border-color .16s ease,transform .16s ease; }
.stream-top-back:hover, .stream-top-icon:hover { background: rgba(39,42,40,.9); border-color: rgba(255,255,255,.13); }
.stream-top-back:active, .stream-top-icon:active { transform: scale(.96); }
.stream-session-card { min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 15px; background: rgba(15,17,16,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.stream-session-copy { min-width: 0; display: grid; gap: 2px; }
.stream-session-copy strong { max-width: min(34vw,420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: -.15px; }
.stream-session-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #929894; font-size: 7px; }
.stream-live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 4px rgba(78,219,137,.08); }
.stream-top-spacer { flex: 1; }
.stream-top-chip { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 15px; background: rgba(15,17,16,.72); border: 1px solid rgba(255,255,255,.08); color: #d8dcd8; font-size: 8px; font-weight: 800; white-space: nowrap; backdrop-filter: blur(18px); }
.stream-top-chip i { color: var(--yellow); }
.player-server-picker { position:relative; padding:0; overflow:visible; }
.player-server-trigger { height:42px; display:flex; align-items:center; gap:8px; padding:0 11px; border:0; background:transparent; color:#f1f3ef; cursor:pointer; }
.player-server-trigger > span:not(.server-fruit-icon) { display:grid; gap:1px; text-align:left; }
.player-server-trigger strong { font-size:8px; }
.player-server-trigger small { color:#9ca19d; font-size:6px; }
.server-fruit-icon { position:relative; width:25px; height:25px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:rgba(181,130,255,.1); overflow:visible; }
.server-fruit-icon i { font-size:12px; }
.server-fruit-icon > .server-icon-fallback { opacity:0; color:var(--yellow); transition:opacity .15s ease; }
.server-fruit-icon.asset-fallback-active > .server-icon-fallback { opacity:1; }
.server-fruit-icon > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:9px; }
.server-fruit-icon img.asset-missing,.server-fruit-icon.asset-fallback-active > img { display:none; }
.server-device-icon { position:absolute; right:-4px; bottom:-4px; width:13px; height:13px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:#202323; color:var(--yellow); }
.server-device-icon i { font-size:6px; }
.player-server-menu { position:absolute; z-index:80; top:50px; right:0; width:330px; max-height:min(420px,70vh); overflow:auto; padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#171a19; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.player-server-menu.hidden { display:none; }
.player-server-menu > button { width:100%; min-height:68px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:13px; background:transparent; color:#f2f3f0; text-align:left; cursor:pointer; }
.player-server-menu > button:hover:not(:disabled) { background:rgba(255,255,255,.06); }
.player-server-menu > button:disabled { opacity:.48; cursor:not-allowed; }
.player-server-menu > button > span:not(.server-fruit-icon) { display:grid; gap:2px; }
.player-server-menu strong { font-size:9px; }
.player-server-menu small,.player-server-menu em { color:#989e99; font-size:6px; font-style:normal; }
.player-server-menu b { color:var(--yellow); font-size:6px; }
.stream-top-chip .nana-icon { width: 20px; height: 20px; }
.stream-end-btn { color: #ff8d8d; }
.stream-hud { position: absolute; z-index: 10; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(1040px,calc(100% - 40px)); min-height: 58px; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 20px; background: rgba(14,16,15,.78); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 18px 60px rgba(0,0,0,.34); backdrop-filter: blur(22px); transition: opacity .2s ease,transform .2s ease,visibility .2s ease; }
.stream-hud-status { min-width: 0; flex: 1; display: flex; align-items: center; gap: 4px; }
.hud-stat { min-width: 0; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; color: #d7dad7; font-size: 8px; font-weight: 700; white-space: nowrap; }
.hud-stat i { color: #8d938e; font-size: 14px; }
.hud-stat span { overflow: hidden; text-overflow: ellipsis; }
.hud-stat.is-live i { color: var(--yellow); }
.stream-input-mode { height:44px; min-width:154px; padding:0 10px; display:flex; align-items:center; gap:8px; border-radius:14px; background:rgba(255,255,255,.045); color:#d7dad7; }
.stream-input-mode i { flex:0 0 auto; color:var(--yellow); font-size:14px; }
.stream-input-mode select { min-width:0; width:100%; border:0; outline:0; background:transparent; color:#f3f5f2; font:700 8px/1 inherit; cursor:pointer; }
.stream-input-mode select option { background:#1b1e1c; color:#f3f5f2; }
.stream-input-mode select option:disabled { color:#777d79; }
.hud-divider { width: 1px; height: 28px; margin: 0 3px; background: rgba(255,255,255,.09); }
.stream-hud-actions { display: flex; align-items: center; gap: 5px; }
.hud-btn { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 14px; display: grid; place-items: center; background: transparent; color: #aeb3af; font-size: 14px; cursor: pointer; transition: background .16s ease,color .16s ease,transform .16s ease; }
.hud-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.hud-btn:active { transform: scale(.95); }
.hud-btn.primary-control { background: var(--yellow); color: #20122F; }
.hud-btn.primary-control:hover { background: #D8BEFF; color: #20122F; }
.hud-btn.active,.edge-btn.active { background:rgba(181,130,255,.16); color:var(--yellow); }
.topbar-hidden-action { display:none; color:#ff8d8d; }
.stream-stage.top-bar-hidden .topbar-hidden-action { display:grid; }
.hud-btn.pending,.edge-btn.pending { animation:micPending .8s ease-in-out infinite alternate; }
@keyframes micPending { to { opacity:.45; } }
.player-volume-control { height:44px; width:142px; display:grid; grid-template-columns:18px minmax(60px,1fr); align-items:center; gap:7px; padding:0 9px; border-radius:14px; background:rgba(255,255,255,.045); color:#aeb3af; }
.player-volume-control i { color:var(--yellow); font-size:14px; }
.player-volume-control input { min-width:0; width:100%; height:18px; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.player-volume-control input::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:linear-gradient(90deg,#7445C4,#B582FF 58%,#EADCFF); box-shadow:inset 0 1px 2px rgba(0,0,0,.28); }
.player-volume-control input::-webkit-slider-thumb { width:18px; height:18px; margin-top:-5.5px; appearance:none; -webkit-appearance:none; border:3px solid #F8F4FF; border-radius:50%; background:#7A4CCC; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.player-volume-control input::-moz-range-track { height:7px; border-radius:999px; background:linear-gradient(90deg,#7445C4,#B582FF 58%,#EADCFF); }
.player-volume-control input::-moz-range-thumb { width:14px; height:14px; border:3px solid #F8F4FF; border-radius:50%; background:#7A4CCC; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.player-toast-region { position:absolute; z-index:21; top:74px; left:20px; }
.stream-stage.player-notifications-hidden .player-toast-region { display:none; }
.stream-stage.hud-hidden .stream-hud { opacity: 0; visibility: hidden; transform: translate(-50%,14px); pointer-events: none; }
.stream-edge-zone { position: absolute; z-index: 14; right: 0; top: 50%; width: 18px; height: 270px; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; pointer-events: none; opacity: 0; transition: width .2s ease,opacity .18s ease; }
.stream-stage.hud-hidden .stream-edge-zone { pointer-events: auto; opacity: 1; }
.stream-edge-handle { position: absolute; right: 0; top: 50%; width: 7px; height: 74px; transform: translateY(-50%); border-radius: 8px 0 0 8px; background: rgba(255,255,255,.16); opacity: 0; transition: opacity .16s ease,width .16s ease,background .16s ease; }
.stream-stage.hud-hidden .stream-edge-handle { opacity:var(--rail-idle-opacity,.35); }
.stream-stage.hud-hidden .stream-edge-zone:hover .stream-edge-handle,
.stream-stage.hud-hidden .stream-edge-zone:focus-within .stream-edge-handle,
.stream-stage.hud-hidden .stream-edge-zone.edge-peek .stream-edge-handle { width: 9px; opacity: 1; background: rgba(255,255,255,.26); }
.stream-edge-actions { position: absolute; right: 12px; top: 50%; transform: translate(18px,-50%); width: 58px; padding: 6px; display: grid; gap: 5px; border-radius: 18px; background: rgba(14,16,15,.72); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 48px rgba(0,0,0,.3); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transition: opacity .18s ease,transform .18s ease,visibility .18s ease; }
.stream-stage.hud-hidden .stream-edge-zone:hover,
.stream-stage.hud-hidden .stream-edge-zone:focus-within,
.stream-stage.hud-hidden .stream-edge-zone.edge-peek { width: 86px; }
.stream-stage.hud-hidden .stream-edge-zone:hover .stream-edge-actions,
.stream-stage.hud-hidden .stream-edge-zone:focus-within .stream-edge-actions,
.stream-stage.hud-hidden .stream-edge-zone.edge-peek .stream-edge-actions { opacity: 1; visibility: visible; transform: translate(0,-50%); }
.edge-btn { width: 46px; height: 46px; border: 0; border-radius: 14px; display: grid; place-items: center; background: transparent; color: #b7bbb7; font-size: 14px; cursor: pointer; transition: background .16s ease,color .16s ease,transform .16s ease; }
.edge-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.edge-btn:active { transform: scale(.95); }
.edge-btn.restore { background: var(--yellow); color: #20122F; }
.edge-btn.danger { color: #ff8d8d; }
.stream-control-tip { position: absolute; z-index: 12; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 8px 12px; border-radius: 10px; background: rgba(10,12,11,.76); border: 1px solid rgba(255,255,255,.07); color: #a5aaa6; font-size: 7px; backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.stream-stage.hud-hidden .stream-control-tip { opacity: 1; animation: streamTipFade 3.2s ease forwards; }
@keyframes streamTipFade { 0%,68% { opacity: 1; } 100% { opacity: 0; } }
.touch-wheel-zone { position:absolute; z-index:18; top:17%; right:8px; width:42px; height:66%; display:none; align-items:center; justify-content:center; touch-action:none; user-select:none; opacity:.12; transition:opacity .18s ease; }
.stream-stage.touch-input-mode .touch-wheel-zone { display:flex; }
.stream-stage.touch-wheel-disabled .touch-wheel-zone { display:none; }
.stream-stage.connection-stats-hidden .stream-hud-status .hud-stat { display:none; }
.stream-stage.player-high-contrast .stream-hud,.stream-stage.player-high-contrast .stream-top-bar,.stream-stage.player-high-contrast .stream-edge-zone { border-color:rgba(255,232,132,.8); box-shadow:0 0 0 2px rgba(0,0,0,.68),0 0 24px rgba(181,130,255,.16); }
.stream-stage.player-high-contrast .player-touch-control { border-color:rgba(255,244,191,.92); box-shadow:0 0 0 2px rgba(0,0,0,.75),0 10px 26px rgba(0,0,0,.48); }
.stream-stage.player-reduced-motion * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
.touch-wheel-zone:hover,.touch-wheel-zone.active { opacity:1; }
.touch-wheel-track { width:7px; height:72%; min-height:130px; position:relative; display:block; border-radius:999px; background:rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(0,0,0,.32); backdrop-filter:blur(8px); }
.touch-wheel-track b { position:absolute; left:-5px; top:calc(50% - 27px); width:17px; height:54px; transform:translateY(0); border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(20,23,22,.82); box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .08s linear; }
.mobile-nav { display: none; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --sidebar-w: 96px; }
  .sidebar-logo-button { width: 68px; height: 68px; }
  .sidebar-logo { width: 54px; height: 54px; }
  .topbar { gap: 14px; }
  .quick-play-btn > span:last-child { display: none; }
  .quick-play-btn { width: 48px; padding: 0; justify-content: center; background: transparent; }
  .quick-play-icon { width: 34px; height: 34px; }
  .profile-button { min-width: auto; }
  .profile-copy, .profile-button > i { display: none; }
  .home-layout { grid-template-columns: minmax(0,1fr) 270px; }
  .library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 930px) {
  :root { --sidebar-w: 84px; }
  .sidebar-logo-button { width: 62px; height: 62px; }
  .sidebar-logo { width: 50px; height: 50px; }
  .nav-capsule { width: 54px; margin-top: 18px; }
  .topbar { padding-inline: 22px; }
  .top-icon { display: none; }
  #notification-btn { display:grid; }
  .top-divider { display: none; }
  .search-submit { display: none; }
  .home-layout { grid-template-columns: 1fr; }
  .home-side { grid-template-columns: 1fr 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-footer { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  :root { --topbar-h: 78px; }
  .app-shell { display: block; padding-bottom: 72px; }
  .sidebar { display: none; }
  .main-column { grid-column: auto; }
  .topbar { height: var(--topbar-h); padding: 0 14px; gap: 9px; }
  .mobile-menu-btn { display: grid; }
  .search-shell { min-width: 0; height: 48px; padding: 2px; }
  .search-box { height: 44px; padding-inline: 12px; }
  .quick-play-btn { display: none; }
  .profile-button { padding: 0; min-width: 42px; }
  .profile-button .avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .main-content { padding: 22px 14px 42px; }
  .site-footer { margin:0 14px; padding:32px 0 22px; gap:30px; }
  .site-footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer-bottom { flex-direction:column; }
  .hero-card { min-height: 470px; border-radius: 27px; }
  .hero-art { inset: 42% 0 0 0; }
  .hero-copy-card { left: 17px; right: 17px; top: 17px; bottom: auto; width: auto; min-width: 0; padding: 28px; border-radius: 23px; }
  .hero-copy-card h1 { font-size: clamp(36px,11vw,52px); }
  .hero-dots { bottom: 12px; }
  .home-side { grid-template-columns: 1fr; }
  .feed-title-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .feed-title-row h2 { font-size: 27px; }
  .feed-tabs { width: 100%; overflow-x: auto; }
  .game-scroller { grid-auto-columns: minmax(230px,78vw); }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header h1 { font-size: 45px; }
  .library-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .history-table { overflow-x: auto; }
  .history-row { min-width: 670px; }
  .game-modal-body { grid-template-columns: 1fr; }
  .modal-play { width: 100%; }
  .profile-menu { right: 12px; top: 68px; }
  .notification-inbox { top:68px; left:12px; right:12px; width:auto; max-height:calc(100vh - 150px); }
  .notification-list { max-height:calc(100vh - 220px); }
  .mobile-nav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50; height: 61px; padding: 6px; display: grid; grid-template-columns: repeat(4,1fr); border-radius: 20px; background: rgba(28,31,32,.94); border: 1px solid var(--line-strong); backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
  .mobile-nav-item { border: 0; border-radius: 15px; background: transparent; color: #818784; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font-size: 8px; }
  .mobile-nav-item i { font-size: 16px; }
  .mobile-nav-item.active { background: var(--yellow); color: #21172f; }
}
@media (max-width: 500px) {
  .login-screen { padding: 10px; }
  .account-login-shell { grid-template-columns:58px minmax(0,1fr); padding:6px; border-radius:27px; }
  .account-login-sidebar { padding:20px 5px 10px 0; gap:18px; }
  .account-login-nav { width:46px; padding:5px; border-radius:17px; }
  .account-login-nav button,.account-login-nav a { width:34px; height:36px; border-radius:11px; }
  .account-login-nav i { font-size:15px; }
  .login-panel { border-radius:0 21px 21px 0; }
  .login-auth-column { min-height:0; padding:28px 16px 24px; }
  .login-brand { width:205px; height:76px; margin-bottom:24px; }
  .login-brand-icon { width:205px; height:76px; }
  .login-heading h1 { font-size:36px; }
  .quick-login-row { grid-template-columns:1fr; }
  .login-showcase { min-height:360px; border-radius:21px; }
  .login-game-rows { inset:66px -80px 225px; gap:10px; }
  .login-game-tile { width:96px; height:126px; }
  .login-showcase-copy { left:23px; right:23px; bottom:22px; }
  .login-showcase-copy h2 { font-size:27px; }
  .login-showcase-copy p { font-size:10px; line-height:1.45; }
  .login-feature-row span { font-size:8px; padding:5px 7px; }
  .topbar .mobile-menu-btn { display: none; }
  .search-shell { flex: 1; }
  .top-actions { gap: 0; }
  .library-grid { grid-template-columns: 1fr; }
  .game-card h3 { font-size: 14px; }
  .host-metrics { grid-template-columns: 1fr 1fr; }
  .wallet-head { align-items: center; }
  .toast-region { top:12px; left:12px; right:auto; width:calc(100vw - 24px); }
  .toast { min-width:0; width:auto; max-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* CloudBanana v0.6 */
.nana-token-icon { display: inline-block; width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(181,130,255,.16)); }
.wallet-nana-icon { width: 42px; height: 42px; }
.nana-token-small { width: 18px; height: 18px; }
.nana-token-tiny { width: 16px; height: 16px; }
.nana-nav-button img { width: 25px; height: 25px; object-fit: contain; }
.nana-nav-button.active img { filter: brightness(.36) saturate(2); }
.mobile-nana-icon { width: 17px; height: 17px; object-fit: contain; }
.top-nana-btn { height: 48px; min-height: 48px; padding: 0 14px 0 8px; border: 1px solid rgba(181,130,255,.12); border-radius: 22px; display: inline-flex; align-items: center; gap: 7px; background: rgba(181,130,255,.07); color: #E6D7FF; cursor: pointer; font-size: 10px; font-weight: 900; }
.top-nana-btn img { width: 31px; height: 31px; object-fit: contain; }
.wallet-shop-link { width: 100%; min-height: 40px; margin-top: 14px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(181,130,255,.11); border-radius: 13px; background: rgba(181,130,255,.055); color: #E6D7FF; cursor: pointer; font-size: 9px; font-weight: 850; }

.home-v4 { display: grid; gap: 34px; }
.home-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.home-kicker { display: inline-block; color: var(--yellow); font-size: 8px; letter-spacing: 2.4px; font-weight: 900; text-transform: uppercase; }
.home-welcome h1 { margin: 8px 0 0; font-size: clamp(34px,4vw,52px); line-height: .95; letter-spacing: -2.5px; }
.home-welcome p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.home-showcase { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 18px; align-items: stretch; }
.featured-game { min-height: 520px; position: relative; overflow: hidden; border-radius: 34px; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.featured-game::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(21,17,4,.16),transparent 55%); }
.featured-decoration { position: absolute; inset: 0; overflow: hidden; }
.featured-initials { position: absolute; right: 2%; bottom: -9%; font-size: clamp(220px,27vw,430px); line-height: .75; font-weight: 1000; letter-spacing: -28px; color: rgba(37,29,4,.76); transform: rotate(-5deg); text-shadow: -30px 24px 0 rgba(255,255,255,.1); }
.featured-ring { position: absolute; width: 420px; height: 420px; right: -90px; top: -120px; border-radius: 50%; border: 85px solid rgba(255,255,255,.15); }
.featured-block { position: absolute; width: 115px; height: 330px; right: 35%; top: 4%; border-radius: 40px; background: rgba(27,23,7,.6); transform: rotate(24deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.featured-copy-panel { position: absolute; left: 28px; top: 28px; bottom: 66px; width: min(52%,560px); min-width: 410px; padding: clamp(34px,4vw,52px); border-radius: 30px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg,rgba(64,38,96,.55),rgba(38,24,61,.38)); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(7px); color: #FAF6FF; }
.featured-kicker { font-size: 9px; letter-spacing: 2.8px; font-weight: 900; color: rgba(255,255,255,.75); }
.featured-copy-panel h2 { margin: 15px 0 10px; font-size: clamp(42px,5vw,72px); line-height: .9; letter-spacing: -4px; }
.featured-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: rgba(255,255,255,.76); font-size: 9px; }
.featured-meta span { min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; background: rgba(22,18,5,.18); border: 1px solid rgba(255,255,255,.08); }
.featured-copy-panel p { max-width: 470px; margin: 17px 0 0; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.62; }
.featured-actions { margin-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; }
.featured-primary, .featured-secondary { min-height: 46px; padding: 0 18px; border-radius: 14px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 10px; font-weight: 900; }
.featured-primary { border: 0; background: #FAF6FF; color: #27143E; }
.featured-secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(47,29,72,.34); color: #FAF6FF; }
.featured-bottom { position: absolute; left: 28px; right: 28px; bottom: 18px; display: flex; gap: 16px; flex-wrap: wrap; color: rgba(49,39,5,.68); font-size: 8px; font-weight: 850; }
.featured-bottom span { display: inline-flex; align-items: center; gap: 5px; }
.home-utility-stack { display: grid; gap: 18px; }
.home-utility-stack .wallet-card { min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.home-server-card { position:relative; z-index:12; min-height:280px; padding:20px; display:flex; flex-direction:column; border-radius:28px; border:1px solid var(--line); background:linear-gradient(155deg,rgba(181,130,255,.045),#17191a 42%); }
.home-server-card-head h3 { margin:7px 0 0; font-size:22px; letter-spacing:-.7px; }
.home-server-card-head p { margin:8px 0 0; color:var(--muted); font-size:8px; line-height:1.55; }
.home-server-picker { position:relative; z-index:14; margin-top:17px; }
.home-server-picker .player-server-trigger { width:100%; height:78px; padding:0 16px; border:1px solid rgba(255,255,255,.08); border-radius:19px; background:#202324; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.home-server-picker .player-server-trigger:hover,.home-server-picker .player-server-trigger[aria-expanded="true"] { border-color:rgba(181,130,255,.28); background:#242726; }
.home-server-picker .player-server-trigger:active { transform:scale(.985); }
.home-server-picker .player-server-trigger > span:not(.server-fruit-icon) { flex:1; gap:3px; }
.home-server-picker .player-server-trigger strong { font-size:12px; }
.home-server-picker .player-server-trigger small { font-size:8px; }
.home-server-picker .server-fruit-icon { width:47px; height:47px; border-radius:15px; }
.home-server-picker .server-fruit-icon > .server-icon-fallback { font-size:19px; }
.home-server-picker .server-device-icon { width:17px; height:17px; }
.home-server-picker .home-server-menu { position:absolute; top:88px; right:0; width:min(660px,calc(100vw - 58px)); max-height:none; overflow:hidden; margin:0; padding:15px; border-radius:22px; background:#111413; box-shadow:0 28px 90px rgba(0,0,0,.62); }
.home-server-carousel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 3px 13px; }
.home-server-carousel-head > span { display:grid; gap:4px; }
.home-server-carousel-head strong { font-size:12px; }
.home-server-carousel-head small { color:#909691; font-size:8px; }
.home-server-carousel-head em { padding:6px 8px; border-radius:9px; background:rgba(181,130,255,.1); color:var(--yellow); font-size:7px; font-style:normal; font-weight:900; white-space:nowrap; }
.home-server-carousel { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; gap:9px; }
.home-server-carousel::before,.home-server-carousel::after { content:""; position:absolute; z-index:4; top:0; bottom:11px; width:30px; pointer-events:none; transition:opacity .18s ease; }
.home-server-carousel::before { left:47px; background:linear-gradient(90deg,#111413 0%,rgba(17,20,19,.78) 38%,transparent 100%); }
.home-server-carousel::after { right:47px; background:linear-gradient(270deg,#111413 0%,rgba(17,20,19,.78) 38%,transparent 100%); }
.home-server-carousel.at-start::before,.home-server-carousel.at-end::after { opacity:0; }
.home-server-arrow { width:38px; height:72px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#202322; color:#f1f3ef; cursor:pointer; transition:background .16s ease,border-color .16s ease,opacity .16s ease; }
.home-server-arrow:hover:not(:disabled) { border-color:rgba(181,130,255,.28); background:#292c2b; color:var(--yellow); }
.home-server-arrow:disabled { opacity:.24; cursor:default; }
.home-server-track { min-width:0; display:flex; gap:9px; padding:0 0 11px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-color:var(--yellow) #272a29; scrollbar-width:thin; overscroll-behavior-x:contain; }
.home-server-track::-webkit-scrollbar { height:7px; }
.home-server-track::-webkit-scrollbar-track { border-radius:999px; background:#272a29; }
.home-server-track::-webkit-scrollbar-thumb { border-radius:999px; background:var(--yellow); }
.home-server-picker .home-server-choice { position:relative; flex:0 0 205px; min-height:142px; padding:15px; display:flex; flex-direction:column; align-items:flex-start; gap:11px; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:#1c1f1e; color:#f2f3f0; text-align:left; scroll-snap-align:start; cursor:pointer; }
.home-server-picker .home-server-choice:hover:not(:disabled) { border-color:rgba(181,130,255,.3); background:#232625; }
.home-server-picker .home-server-choice:disabled { opacity:.7; cursor:not-allowed; }
.home-server-picker .home-server-choice > .server-fruit-icon { width:50px; height:50px; }
.home-server-picker .home-server-choice > span:not(.server-fruit-icon) { min-width:0; display:grid; gap:4px; }
.home-server-picker .home-server-choice strong { font-size:12px; }
.home-server-picker .home-server-choice small,.home-server-picker .home-server-choice em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#969c97; font-size:7px; font-style:normal; }
.home-server-picker .home-server-choice b { position:absolute; top:15px; right:15px; padding:5px 7px; border-radius:8px; background:rgba(181,130,255,.09); color:var(--yellow); font-size:7px; }
.home-section { display: grid; gap: 17px; }
.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.home-section-head h2 { margin: 5px 0 0; font-size: 29px; letter-spacing: -1.25px; }
.continue-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.continue-game { min-width: 0; min-height: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto auto; align-items: center; gap: 10px; background: #17191a; color: var(--text); text-align: left; cursor: pointer; }
.continue-art { width: 54px; height: 54px; border-radius: 13px; overflow: hidden; display: grid; place-items: end; position: relative; color: rgba(43,34,4,.82); font-weight: 1000; font-size: 18px; letter-spacing: -2px; }
.continue-art span { padding: 0 5px 3px 0; }
.continue-copy { min-width: 0; display: grid; gap: 4px; }
.continue-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.continue-copy small { color: var(--muted); font-size: 8px; }
.continue-cost { display: none; align-items: center; gap: 4px; color: #cfd2cf; font-size: 8px; font-weight: 800; }
.continue-game > i { color: #686e6b; }
.home-game-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
@media (hover:hover) and (pointer:fine) { .continue-game:hover { border-color: rgba(181,130,255,.2); background: #1b1e1f; } }

.game-page { display: grid; gap: 18px; }
.game-page-topbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.game-back-btn, .game-page-favorite { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; display: inline-flex; align-items: center; gap: 7px; background: #181a1b; color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 850; }
.game-page-favorite.active { color: var(--yellow); border-color: rgba(181,130,255,.18); background: var(--yellow-softer); }
.game-page-hero { min-height: 560px; position: relative; overflow: hidden; border-radius: 34px; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.game-page-art { position: absolute; inset: 0; overflow: hidden; }
.game-page-initials { position: absolute; right: 2%; bottom: -7%; font-size: clamp(260px,32vw,520px); line-height: .72; font-weight: 1000; letter-spacing: -36px; color: rgba(37,29,4,.77); transform: rotate(-5deg); text-shadow: -32px 26px 0 rgba(255,255,255,.11); }
.game-page-orbit { position: absolute; border-radius: 50%; border: 70px solid rgba(255,255,255,.13); }
.game-page-orbit.one { width: 420px; height: 420px; right: -110px; top: -140px; }
.game-page-orbit.two { width: 250px; height: 250px; right: 28%; bottom: -110px; border-width: 46px; border-color: rgba(34,27,5,.17); }
.game-page-copy { position: absolute; left: 34px; bottom: 74px; width: min(55%,720px); min-width: 440px; padding: clamp(34px,4vw,54px); border-radius: 30px; background: linear-gradient(145deg,rgba(64,38,96,.55),rgba(38,24,61,.38)); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(8px); color: #FAF6FF; }
.game-page-status { display: inline-flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1.6px; font-weight: 900; }
.game-page-copy h1 { margin: 13px 0 10px; font-size: clamp(48px,6.2vw,92px); line-height: .88; letter-spacing: -5.5px; }
.game-page-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.game-page-tags > span { min-height: 29px; padding: 0 9px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; background: rgba(31,25,6,.17); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.79); font-size: 8px; font-weight: 800; }
.game-page-copy p { max-width: 620px; margin: 17px 0 0; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.65; }
.game-page-actions { margin-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; }
.game-page-play, .game-page-secondary { min-height: 48px; padding: 0 18px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 10px; font-weight: 900; }
.game-page-play { border: 0; background: #FAF6FF; color: #27143E; }
.game-page-play.wide { width: 100%; background: var(--yellow); color: #21172f; }
.game-page-secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(47,29,72,.34); color: #FAF6FF; }
.game-page-report-action { border-color:rgba(255,115,115,.24); background:rgba(60,20,24,.22); color:#ffd4d5; }
.game-page-report-action:hover { border-color:rgba(255,115,115,.44); background:rgba(75,25,30,.42); }
.game-page-security { position: absolute; left: 34px; right: 34px; bottom: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: rgba(51,40,5,.72); font-size: 8px; font-weight: 850; }
.game-page-security span { display: inline-flex; align-items: center; gap: 5px; }
.game-page-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.game-page-stats div { min-height: 78px; padding: 15px 17px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 18px; background: #17191a; border: 1px solid var(--line); }
.game-page-stats span { color: var(--muted); font-size: 8px; }
.game-page-stats strong { font-size: 12px; }
.game-page-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 18px; align-items: start; }
.game-page-main { display: grid; gap: 18px; }
.game-about > p { margin: 0; color: #c8cbc8; font-size: 11px; line-height: 1.75; }
.game-id-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-id-grid div { min-height: 64px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; background: #202324; }
.game-id-grid span { color: var(--muted); font-size: 8px; }
.game-id-grid strong { font-size: 10px; }
.game-media-section { display: grid; gap: 14px; }
.game-media-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; }
.game-media-grid > div { min-height: 180px; position: relative; overflow: hidden; border-radius: 21px; display: grid; place-items: center; color: rgba(45,36,6,.74); font-size: 58px; font-weight: 1000; letter-spacing: -5px; }
.game-media-grid > div::after { content: ""; position: absolute; width: 130px; height: 130px; right: -35px; top: -45px; border-radius: 50%; border: 26px solid rgba(255,255,255,.14); }
.game-media-grid i { font-size: 38px; }
.game-page-side { display: grid; gap: 18px; }
.session-card { padding: 22px; border-radius: 25px; background: #17191a; border: 1px solid var(--line); }
.session-card h3 { margin: 7px 0 17px; font-size: 22px; letter-spacing: -1px; }
.session-cost { min-height: 88px; padding: 14px; display: flex; align-items: center; gap: 13px; border-radius: 18px; background: linear-gradient(135deg,rgba(181,130,255,.12),rgba(133,83,229,.045)); border: 1px solid rgba(181,130,255,.09); }
.session-nana-icon { width: 56px; height: 56px; }
.session-cost div { display: grid; gap: 3px; }
.session-cost strong { font-size: 25px; letter-spacing: -1px; }
.session-cost span { color: var(--muted); font-size: 8px; }
.session-balance { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 9px; }
.session-balance span { color: var(--muted); }
.session-card .wide { margin-top: 16px; }
.related-list { display: grid; gap: 8px; }
.related-panel .continue-game { grid-template-columns: 48px minmax(0,1fr) auto; min-height: 66px; padding: 8px; }
.related-panel .continue-art { width: 48px; height: 48px; }
.related-panel .continue-cost { display: none; }

.nana-shop-page { display: grid; gap: 25px; }
.nana-shop-heading { align-items: center; }
.shop-heading-icon { width: 94px; height: 94px; }
.nana-shop-top { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: 18px; }
.nana-shop-top .wallet-card { min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.nana-store-banner { min-height: 280px; position: relative; overflow: hidden; padding: 34px; display: flex; align-items: center; gap: 28px; border-radius: 30px; background: linear-gradient(135deg,#b988ff,#7d50d7); color: #21172f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.nana-store-banner::after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -120px; border-radius: 50%; border: 60px solid rgba(255,255,255,.15); }
.nana-store-banner > div:not(.nana-store-art) { position: relative; z-index: 2; }
.nana-store-art { width: 170px; min-width: 170px; display: grid; place-items: center; position: relative; z-index: 2; }
.nana-store-giant { width: 150px; height: 150px; filter: drop-shadow(0 22px 28px rgba(80,55,0,.18)); }
.nana-store-banner .home-kicker { color: rgba(54,43,5,.66); }
.nana-store-banner h2 { margin: 7px 0 8px; font-size: clamp(29px,3vw,43px); letter-spacing: -2px; }
.nana-store-banner p { margin: 0; max-width: 520px; color: rgba(46,38,6,.7); font-size: 10px; line-height: 1.6; }
.store-preview-badge { margin-top: 16px; min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; background: rgba(47,38,5,.11); font-size: 8px; font-weight: 900; }
.nana-packages-section { display: grid; gap: 15px; }
.store-note { color: var(--muted); font-size: 8px; }
.nana-package-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.nana-package { min-height: 340px; position: relative; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; border-radius: 25px; background: #17191a; border: 1px solid var(--line); }
.nana-package.featured { border-color: rgba(181,130,255,.28); background: linear-gradient(160deg,rgba(181,130,255,.095),#17191a 48%); }
.package-badge { position: absolute; top: 13px; right: 13px; padding: 5px 7px; border-radius: 8px; background: var(--yellow); color: #21172f; font-size: 7px; font-weight: 950; letter-spacing: .8px; }
.package-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--yellow-soft); }
.package-nana-icon { width: 48px; height: 48px; }
.package-label { margin-top: 16px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 850; }
.package-amount { margin-top: 4px; font-size: 35px; letter-spacing: -2px; }
.package-nanas { color: #d8dbd7; font-size: 9px; font-weight: 800; }
.package-bonus { margin-top: 10px; padding: 5px 7px; border-radius: 8px; background: var(--yellow-soft); color: var(--yellow); font-size: 8px; font-weight: 850; }
.muted-bonus { background: #202324; color: var(--muted); }
.nana-package p { margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.package-price { margin-top: auto; padding-top: 18px; font-size: 18px; font-weight: 900; }
.package-buy { width: 100%; min-height: 43px; margin-top: 10px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 13px; background: var(--yellow); color: #20122F; cursor: pointer; font-size: 9px; font-weight: 900; }
.nana-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.empty-purchases { min-height: 140px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-purchases i { color: var(--yellow); font-size: 25px; }
.empty-purchases strong { margin-top: 9px; color: var(--text); font-size: 11px; }
.empty-purchases span { margin-top: 4px; max-width: 310px; font-size: 8px; line-height: 1.5; }

@media (max-width: 1320px) {
  .continue-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .continue-cost { display: inline-flex; }
  .home-showcase { grid-template-columns: minmax(0,1fr) 300px; }
  .featured-copy-panel { width: min(58%,520px); }
}
@media (max-width: 1120px) {
  .home-showcase { grid-template-columns: 1fr; }
  .home-utility-stack { grid-template-columns: 1fr 1fr; }
  .home-utility-stack .wallet-card, .home-server-card { min-height: 240px; }
  .home-game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .game-page-content { grid-template-columns: 1fr; }
  .game-page-side { grid-template-columns: 1fr 1fr; }
  .nana-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 930px) {
  .top-nana-btn span { display: none; }
  .top-nana-btn { width: 48px; padding: 0; justify-content: center; background: transparent; border-color: transparent; }
  .top-nana-btn img { width: 30px; height: 30px; }
  .featured-copy-panel { width: min(68%,560px); }
  .continue-grid { grid-template-columns: 1fr 1fr; }
  .home-game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-page-copy { width: min(72%,620px); }
  .game-page-stats { grid-template-columns: 1fr 1fr; }
  .nana-shop-top { grid-template-columns: 1fr; }
  .nana-shop-top .wallet-card { min-height: auto; }
}
@media (max-width: 720px) {
  .top-nana-btn { display: none; }
  .mobile-nav { grid-template-columns: repeat(5,1fr); }
  .mobile-nav-item img { filter: none; }
  .mobile-nav-item.active img { filter: brightness(.35) saturate(1.4); }
  .home-welcome { align-items: flex-start; flex-direction: column; }
  .featured-game { min-height: 600px; border-radius: 27px; }
  .featured-decoration { inset: 42% 0 0; }
  .featured-initials { font-size: 210px; right: -2%; bottom: -4%; }
  .featured-copy-panel { left: 16px; right: 16px; top: 16px; bottom: auto; width: auto; min-width: 0; padding: 27px; border-radius: 23px; }
  .featured-copy-panel h2 { font-size: clamp(42px,13vw,64px); }
  .featured-bottom { left: 19px; right: 19px; bottom: 18px; gap: 9px; }
  .home-utility-stack { grid-template-columns: 1fr; }
  .continue-grid { grid-template-columns: 1fr; }
  .continue-cost { display: inline-flex; }
  .home-section-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .home-game-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .game-page-hero { min-height: 650px; border-radius: 27px; }
  .game-page-copy { left: 16px; right: 16px; top: 16px; bottom: auto; width: auto; min-width: 0; padding: 27px; border-radius: 23px; }
  .game-page-copy h1 { font-size: clamp(46px,14vw,70px); }
  .game-page-art { inset: 45% 0 0; }
  .game-page-initials { font-size: 225px; bottom: -4%; right: -2%; }
  .game-page-security { left: 18px; right: 18px; bottom: 18px; }
  .game-page-stats { grid-template-columns: 1fr 1fr; }
  .game-page-side { grid-template-columns: 1fr; }
  .game-media-grid { grid-template-columns: 1fr; }
  .game-media-grid > div { min-height: 150px; }
  .nana-shop-heading { align-items: flex-start; }
  .shop-heading-icon { width: 70px; height: 70px; }
  .nana-store-banner { align-items: flex-start; flex-direction: column; padding: 26px; }
  .nana-store-art { width: auto; min-width: 0; }
  .nana-store-giant { width: 110px; height: 110px; }
  .nana-package-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nana-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .home-game-grid { grid-template-columns: 1fr; }
  .game-page-stats { grid-template-columns: 1fr 1fr; }
  .game-id-grid { grid-template-columns: 1fr; }
  .nana-package-grid { grid-template-columns: 1fr; }
  .nana-package { min-height: 315px; }
}

.nana-outline-icon { width: 23px; height: 23px; display: block; background: currentColor; -webkit-mask: url("icons/nana_shop_outline.png") center / contain no-repeat; mask: url("icons/nana_shop_outline.png") center / contain no-repeat; }
.nana-nav-button .nana-outline-icon { width: 24px; height: 24px; }
.mobile-nav-item .mobile-nana-icon { width: 18px; height: 18px; }
.mobile-nav-item.active .nana-outline-icon { background: #21172f; }
.payment-brand-tile { width: 46px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.payment-brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.payment-brand-generic { color: #7e8581; font-size: 23px; }
.nana-shop-v5 { gap: 30px; }
.nana-store-hero { min-height: 390px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); align-items: center; border-radius: 34px; background: radial-gradient(circle at 82% 18%,rgba(255,255,255,.27),transparent 27%), linear-gradient(135deg,#B582FF 0%,#A874FF 46%,#7445C4 100%); color: #20122F; isolation: isolate; }
.nana-store-hero::before { content: ""; position: absolute; width: 360px; height: 360px; left: -150px; bottom: -220px; border: 64px solid rgba(255,255,255,.12); border-radius: 50%; z-index: -1; }
.nana-store-hero-copy { padding: 48px clamp(30px,4.5vw,68px); position: relative; z-index: 4; }
.store-pill { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border-radius: 11px; background: rgba(52,43,6,.1); font-size: 8px; font-weight: 950; letter-spacing: 1.4px; }
.nana-store-hero h1 { max-width: 720px; margin: 16px 0 13px; font-size: clamp(42px,5.1vw,72px); line-height: .94; letter-spacing: -4px; }
.nana-store-hero p { max-width: 650px; margin: 0; color: rgba(45,37,5,.68); font-size: 11px; line-height: 1.7; }
.store-hero-actions { margin-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-scroll-packs { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 14px; background: #21142F; color: #F2E8FF; cursor: pointer; font-size: 10px; font-weight: 900; }
.store-scroll-packs i { color: var(--yellow); }
.nana-store-hero .store-preview-badge { margin: 0; background: rgba(46,38,5,.09); }
.nana-store-hero-art { min-height: 390px; position: relative; display: grid; place-items: center; overflow: hidden; }
.nana-orbit { position: absolute; border: 1px solid rgba(55,43,4,.13); border-radius: 50%; }
.nana-orbit-one { width: 310px; height: 310px; }
.nana-orbit-two { width: 445px; height: 445px; }
.nana-pile { position: relative; width: 100%; height: 100%; }
.nana-pile img { position: absolute; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(83,61,0,.14)); transform-origin: 50% 100%; }
.hero-nana-pile { width: 360px; height: 300px; z-index: 3; }
.hero-nana-pile img { width: 96px; height: 96px; }
.nana-pile img:nth-child(1) { left: 6%; bottom: 8%; transform: rotate(-22deg); }
.nana-pile img:nth-child(2) { left: 24%; bottom: 2%; transform: rotate(-10deg); }
.nana-pile img:nth-child(3) { left: 42%; bottom: 4%; transform: rotate(7deg); }
.nana-pile img:nth-child(4) { left: 61%; bottom: 10%; transform: rotate(17deg); }
.nana-pile img:nth-child(5) { left: 16%; bottom: 29%; transform: rotate(-16deg); }
.nana-pile img:nth-child(6) { left: 36%; bottom: 31%; transform: rotate(-3deg); }
.nana-pile img:nth-child(7) { left: 56%; bottom: 34%; transform: rotate(12deg); }
.nana-pile img:nth-child(8) { left: 27%; bottom: 55%; transform: rotate(-7deg); }
.nana-pile img:nth-child(9) { left: 48%; bottom: 58%; transform: rotate(8deg); }
.nana-pile img:nth-child(10) { left: 68%; bottom: 52%; transform: rotate(20deg); }
.nana-shop-dashboard { display: grid; grid-template-columns: minmax(300px,1.2fr) minmax(240px,.8fr) minmax(240px,.8fr); gap: 14px; }
.nana-shop-dashboard .wallet-card { min-height: 190px; }
.nana-balance-insight, .nana-secure-card { min-height: 190px; padding: 22px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 25px; background: #17191a; }
.insight-icon, .secure-card-icon { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; background: var(--yellow-soft); }
.insight-nana-icon { width: 47px; height: 47px; }
.secure-card-icon i { color: var(--yellow); font-size: 22px; }
.nana-balance-insight > div:last-child, .nana-secure-card > div { display: grid; gap: 5px; }
.nana-balance-insight span, .nana-secure-card span { color: var(--muted); font-size: 7px; letter-spacing: 1.3px; font-weight: 900; }
.nana-balance-insight strong, .nana-secure-card strong { font-size: 18px; letter-spacing: -.6px; }
.nana-balance-insight p, .nana-secure-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.nana-pack-head > div > p { max-width: 560px; margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.store-note { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: #17191a; }
.nana-package-grid-v5 { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; }
.nana-package-v5 { min-height: 470px; padding: 14px; overflow: hidden; }
.nana-package-v5.featured { transform: translateY(-7px); border-color: rgba(181,130,255,.36); box-shadow: 0 22px 50px rgba(0,0,0,.22); }
.nana-package-v5.premium { background: radial-gradient(circle at 80% 5%,rgba(181,130,255,.16),transparent 34%), linear-gradient(160deg,#1c1f20,#151718 62%); border-color: rgba(181,130,255,.2); }
.nana-package-v5 .package-badge { z-index: 5; top: 12px; right: 12px; }
.package-visual { min-height: 172px; position: relative; overflow: hidden; border-radius: 19px; background: radial-gradient(circle at 50% 72%,rgba(181,130,255,.18),transparent 46%), #202324; }
.bundle-art { width: 100%; height: 100%; position: absolute; inset: 0; display: grid; place-items: center; }
.bundle-art > img { width: min(86%,230px); height: min(86%,160px); object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.24)); }
.bundle-art-small > img { width: min(68%,175px); height: min(68%,125px); }
.bundle-art-large > img { width: min(94%,250px); height: min(94%,170px); }
.bundle-art-stash img { position: absolute; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.24)); }
.bundle-stash-sack { width: 58%; height: 78%; right: 8%; bottom: 3%; z-index: 3; }
.bundle-stash-box { width: 47%; height: 64%; left: 4%; bottom: 1%; z-index: 2; transform: rotate(-4deg); }
.bundle-stash-pile { width: 42%; height: 46%; left: 30%; bottom: 0; z-index: 4; }
.package-copy { padding: 15px 5px 0; }
.package-total { margin-top: 5px; display: flex; align-items: baseline; gap: 7px; }
.package-total strong { font-size: 29px; letter-spacing: -1.5px; }
.package-total span { color: #d4d7d4; font-size: 9px; font-weight: 850; }
.package-copy p { margin: 8px 0 0; min-height: 40px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.package-breakdown { margin-top: 11px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.package-breakdown > div { min-width: 0; padding: 8px 7px; display: grid; gap: 3px; border-radius: 10px; background: #202324; }
.package-breakdown span { color: var(--muted); font-size: 6px; }
.package-breakdown strong { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bonus-value { color: var(--yellow) !important; }
.package-playtime { margin: 9px 4px 0; display: flex; align-items: center; gap: 7px; color: #b4b9b6; font-size: 7px; }
.package-playtime i { color: var(--yellow); }
.package-purchase-row { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; gap: 9px; }
.package-purchase-row .package-price { margin: 0; padding: 0; display: grid; gap: 2px; flex: 1; }
.package-purchase-row .package-price span { color: var(--muted); font-size: 6px; }
.package-purchase-row .package-price strong { font-size: 16px; }
.package-purchase-row .package-buy { width: auto; min-width: 82px; margin: 0; }
.nana-payment-preview { min-height: 360px; padding: 34px; display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.8fr); align-items: center; gap: 35px; border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(circle at 12% 15%,rgba(181,130,255,.08),transparent 25%), #17191a; }
.payment-preview-copy h2 { max-width: 580px; margin: 8px 0 10px; font-size: clamp(29px,3.5vw,46px); letter-spacing: -2px; line-height: 1; }
.payment-preview-copy > p { max-width: 570px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.accepted-brands { margin-top: 24px; display: grid; gap: 8px; }
.accepted-brands > span { color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: 1.2px; }
.accepted-brands > div { display: flex; gap: 7px; flex-wrap: wrap; }
.accepted-brands .payment-brand-tile, .checkout-brand-strip .payment-brand-tile { width: 46px; height: 30px; }
.payment-preview-card { min-height: 230px; padding: 25px; position: relative; overflow: hidden; border-radius: 25px; background: linear-gradient(145deg,#B582FF,#7445C4); color: #20122F; box-shadow: 0 30px 55px rgba(0,0,0,.24); transform: rotate(2deg); }
.payment-preview-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border: 46px solid rgba(255,255,255,.18); border-radius: 50%; }
.fake-card-top, .fake-card-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fake-card-top > span { font-size: 10px; font-weight: 950; }
.fake-card-nana { width: 44px; height: 44px; }
.fake-card-number { margin: 47px 0 34px; position: relative; z-index: 2; font-size: 17px; font-weight: 850; letter-spacing: 1px; }
.fake-card-bottom > div { display: grid; gap: 4px; }
.fake-card-bottom span { font-size: 6px; opacity: .58; font-weight: 900; }
.fake-card-bottom strong { font-size: 8px; }
.fake-card-brand { width: 50px; height: 31px; }
.checkout-page { display: grid; gap: 20px; }
.checkout-topbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.checkout-back { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: #181a1b; color: #dedfdd; cursor: pointer; font-size: 9px; font-weight: 850; }
.checkout-steps { display: flex; align-items: center; gap: 8px; color: #626864; }
.checkout-steps span { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 900; }
.checkout-steps span.active { color: var(--yellow); }
.checkout-steps b { color: inherit; font-size: 8px; }
.checkout-steps i { font-size: 11px; }
.checkout-step { color: var(--yellow); font-size: 8px; letter-spacing: 1.5px; font-weight: 950; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 18px; align-items: start; }
.checkout-main-card, .checkout-summary { border: 1px solid var(--line); border-radius: 30px; background: #17191a; }
.checkout-main-card { padding: clamp(22px,3.5vw,42px); }
.checkout-heading h1 { margin: 6px 0 7px; font-size: clamp(34px,4vw,52px); letter-spacing: -2.5px; }
.checkout-heading p { margin: 0; max-width: 650px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.checkout-brand-strip { margin: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkout-brand-strip > span { color: var(--muted); font-size: 8px; font-weight: 850; }
.checkout-brand-strip > div { display: flex; gap: 6px; flex-wrap: wrap; }
.checkout-card-preview { min-height: 270px; max-width: 560px; margin: 0 auto 24px; padding: 27px; position: relative; overflow: hidden; border-radius: 27px; background: linear-gradient(145deg,#B582FF,#7445C4); color: #2c2504; box-shadow: 0 25px 60px rgba(0,0,0,.28); }
.card-preview-glow { position: absolute; width: 310px; height: 310px; right: -130px; top: -150px; border: 60px solid rgba(255,255,255,.16); border-radius: 50%; }
.card-preview-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 950; }
.checkout-preview-nana { width: 49px; height: 49px; }
.card-preview-chip { width: 42px; height: 30px; margin-top: 30px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 4px; border-radius: 8px; background: rgba(43,35,4,.15); }
.card-preview-chip span { border-radius: 3px; background: rgba(255,255,255,.27); }
.card-preview-number { margin-top: 25px; position: relative; z-index: 2; min-height: 25px; font-size: clamp(16px,2.3vw,22px); font-weight: 900; letter-spacing: 1.2px; }
.card-preview-bottom { margin-top: 24px; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 22px; }
.card-preview-bottom > div:not(.card-preview-brand) { display: grid; gap: 4px; }
.card-preview-bottom span { font-size: 6px; font-weight: 900; opacity: .58; }
.card-preview-bottom strong { font-size: 9px; }
.card-preview-brand-logo { width: 58px; height: 34px; }
.checkout-form { max-width: 680px; margin: 0 auto; display: grid; gap: 13px; }
.checkout-field { display: grid; gap: 7px; min-width: 0; }
.checkout-field > span { color: #c9cdca; font-size: 8px; font-weight: 850; }
.checkout-field input, .checkout-field select { width: 100%; height: 49px; border: 1px solid var(--line); border-radius: 13px; outline: 0; padding: 0 13px; background: #111314; color: var(--text); font-size: 10px; }
.checkout-field input:focus, .checkout-field select:focus { border-color: rgba(181,130,255,.38); background: #131617; }
.checkout-field input::placeholder { color: #545a57; }
.checkout-field small { min-height: 13px; color: var(--muted); font-size: 7px; }
.checkout-field small.valid { color: var(--green); }
.checkout-field small.invalid { color: #ff9598; }
.checkout-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.checkout-input-wrap { position: relative; }
.checkout-input-wrap input { padding-right: 72px; }
.detected-brand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 48px; height: 30px; display: grid; place-items: center; border-radius: 0; background: transparent; overflow: visible; }
.detected-brand .payment-brand-tile { width: 46px; height: 30px; }
.checkout-primary { min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 15px; background: var(--yellow); color: #2b2304; cursor: pointer; font-size: 10px; font-weight: 950; }
.checkout-submit { margin-top: 5px; justify-content: space-between; }
.checkout-submit strong { font-size: 11px; }
.checkout-privacy { display: flex; align-items: flex-start; justify-content: center; gap: 8px; color: var(--muted); font-size: 7px; line-height: 1.5; text-align: center; }
.checkout-privacy i { margin-top: 1px; color: var(--green); }
.checkout-summary { padding: 25px; position: sticky; top: calc(var(--topbar-h) + 18px); overflow: hidden; }
.summary-pack-art { height: 220px; margin: -10px -10px 18px; position: relative; overflow: hidden; border-radius: 21px; background: radial-gradient(circle at 50% 75%,rgba(181,130,255,.18),transparent 45%), #202324; }
.summary-bundle-art { position: absolute; inset: 0; }
.summary-bundle-art.bundle-art > img { width: min(82%,300px); height: min(86%,195px); }
.summary-bundle-art .bundle-stash-sack { width: 54%; height: 77%; }
.summary-bundle-art .bundle-stash-box { width: 45%; height: 61%; }
.summary-bundle-art .bundle-stash-pile { width: 39%; height: 43%; }
.checkout-summary h2 { margin: 7px 0 5px; font-size: 27px; letter-spacing: -1.2px; }
.checkout-summary > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.summary-total-nanas { margin: 19px 0; display: flex; align-items: baseline; gap: 8px; }
.summary-total-nanas strong { font-size: 34px; letter-spacing: -1.7px; }
.summary-total-nanas span { color: var(--muted); font-size: 9px; font-weight: 850; }
.summary-lines { display: grid; gap: 8px; }
.summary-lines > div, .summary-price { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 8px; }
.summary-lines span, .summary-price span { color: var(--muted); }
.summary-price { min-height: 58px; border-bottom: 0; }
.summary-price strong { font-size: 20px; }
.summary-balance { padding: 13px; display: grid; gap: 5px; border-radius: 15px; background: var(--yellow-softer); }
.summary-balance span { color: var(--muted); font-size: 7px; }
.summary-balance strong { font-size: 10px; }
.summary-balance i { margin: 2px 0; color: var(--yellow); font-size: 10px; }
.summary-note { margin-top: 11px; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.summary-note i { color: var(--yellow); }
.checkout-success { min-height: 610px; max-width: 850px; width: 100%; margin: 0 auto; padding: 60px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(circle at 50% 10%,rgba(181,130,255,.11),transparent 33%), #17191a; }
.checkout-success-icon { width: 74px; height: 74px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 23px; background: var(--yellow); color: #21142F; font-size: 27px; box-shadow: 0 18px 38px rgba(181,130,255,.12); }
.checkout-success h1 { margin: 9px 0 10px; font-size: clamp(37px,5vw,58px); line-height: .98; letter-spacing: -3px; }
.checkout-success > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.checkout-success-pack { width: min(100%,540px); min-height: 150px; margin: 30px 0 20px; padding: 14px 18px; display: grid; grid-template-columns: 175px 1fr; align-items: center; gap: 15px; text-align: left; border-radius: 21px; background: #202324; }
.success-bundle-art { width: 165px; height: 120px; position: relative; }
.success-bundle-art.bundle-art > img { width: 150px; height: 112px; }
.success-bundle-art .bundle-stash-sack { width: 55%; height: 75%; }
.success-bundle-art .bundle-stash-box { width: 45%; height: 58%; }
.success-bundle-art .bundle-stash-pile { width: 38%; height: 42%; }
.checkout-success-pack > div:last-child { display: grid; gap: 4px; }
.checkout-success-pack span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }
.checkout-success-pack strong { font-size: 20px; }
.checkout-success-pack small { color: var(--muted); font-size: 8px; }
.checkout-success .checkout-primary { min-width: 210px; }

@media (max-width: 1440px) {
  .nana-package-grid-v5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nana-package-v5.featured { transform: none; }
}
@media (max-width: 1120px) {
  .nana-store-hero { grid-template-columns: 1fr; }
  .nana-store-hero-art { min-height: 300px; }
  .nana-shop-dashboard { grid-template-columns: 1fr 1fr; }
  .nana-shop-dashboard > div:first-child { grid-column: 1 / -1; }
  .nana-payment-preview { grid-template-columns: 1fr; }
  .payment-preview-card { width: min(100%,520px); }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}
@media (max-width: 760px) {
  .nana-store-hero-copy { padding: 32px 24px; }
  .nana-store-hero h1 { letter-spacing: -2.7px; }
  .nana-store-hero-art { min-height: 250px; }
  .hero-nana-pile { width: 300px; height: 245px; }
  .hero-nana-pile img { width: 80px; height: 80px; }
  .nana-shop-dashboard { grid-template-columns: 1fr; }
  .nana-shop-dashboard > div:first-child { grid-column: auto; }
  .nana-package-grid-v5 { grid-template-columns: 1fr 1fr; }
  .nana-payment-preview { padding: 24px; }
  .payment-preview-card { min-height: 215px; }
  .checkout-topbar { align-items: flex-start; flex-direction: column; }
  .checkout-steps { width: 100%; justify-content: space-between; }
  .checkout-main-card, .checkout-summary { border-radius: 24px; }
  .checkout-main-card { padding: 20px; }
  .checkout-card-preview { min-height: 235px; padding: 21px; }
  .card-preview-bottom { gap: 12px; }
}
@media (max-width: 520px) {
  .nana-package-grid-v5 { grid-template-columns: 1fr; }
  .nana-package-v5 { min-height: 445px; }
  .checkout-brand-strip { align-items: flex-start; flex-direction: column; }
  .checkout-field-row { grid-template-columns: 1fr; }
  .checkout-demo-row { align-items: flex-start; flex-direction: column; }
  .checkout-demo-row button { width: 100%; }
  .checkout-card-preview { min-height: 220px; }
  .card-preview-number { font-size: 15px; }
  .card-preview-bottom { grid-template-columns: 1fr auto; }
  .card-preview-bottom > div:nth-child(2) { display: none; }
  .checkout-success { padding: 38px 20px; }
  .checkout-success-pack { grid-template-columns: 1fr; text-align: center; }
  .success-nana-pile { margin: 0 auto; }
}

.checkout-country-note { color: var(--muted); }

@media (max-width: 760px) {
  .stream-top-bar { top: 10px; left: 10px; right: 10px; gap: 7px; }
  .stream-top-back, .stream-top-icon { width: 40px; height: 40px; border-radius: 13px; }
  .stream-session-card { height: 40px; padding-inline: 11px; border-radius: 13px; }
  .stream-session-copy strong { max-width: 34vw; }
  .stream-top-chip.host-chip { display: none; }
  .stream-top-chip { height: 40px; padding-inline: 10px; border-radius: 13px; }
  .stream-hud { bottom: 10px; width: calc(100% - 20px); min-height: 54px; border-radius: 18px; }
  .hud-stat { height: 40px; padding-inline: 9px; }
  .hud-stat:nth-child(2) { display: none; }
  .hud-btn { width: 40px; height: 40px; border-radius: 12px; }
  .stream-control-tip { bottom: 76px; }
}
@media (max-width: 520px) {
  .stream-top-chip.nana-stream-chip { display: none; }
  .stream-session-copy span { display: none; }
  .hud-stat:nth-child(3) { display: none; }
  .stream-hud-status { flex: 0 1 auto; }
}

/* Live host integration */
.package-buy.server-only-buy,
.package-buy.server-only-buy:hover,
.package-buy.server-only-buy:active {
  background:linear-gradient(135deg,#41214F,#2B1938);
  border:1px solid rgba(205,177,255,.42);
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.settings-page-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 18px; align-items: start; }
.settings-page-grid > * { min-width:0; max-width:100%; }
.settings-form-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; margin-top: 10px; border: 1px solid rgba(255,255,255,.04); border-radius: 16px; background: #202324; }
.settings-form-row > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
.settings-form-row > div > i { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: #2a2d2e; color: var(--yellow); }
.settings-form-row strong, .settings-form-row small { display: block; }
.settings-form-row strong { font-size: 10px; }
.settings-form-row small { max-width: 440px; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.settings-form-row.rail-position-row { align-items:flex-start; }
.settings-range-control { min-width:190px; display:grid; grid-template-columns:minmax(100px,1fr) 42px; align-items:center; gap:10px; }
.settings-range-control input { min-width:0; width:100%; accent-color:var(--yellow); }
.settings-range-control output { color:var(--yellow); font-size:9px; font-weight:900; text-align:right; }
.player-rail-position-picker { flex:0 0 auto; display:grid!important; grid-template-columns:repeat(4,minmax(64px,1fr)); gap:6px!important; padding:5px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:#151718; }
.player-rail-position-picker button { min-width:64px; height:49px; padding:0 8px; display:grid; place-items:center; align-content:center; gap:4px; border:1px solid transparent; border-radius:10px; background:transparent; color:#858b87; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.player-rail-position-picker button i { font-size:12px; }
.player-rail-position-picker button span { font-size:7px; font-weight:900; }
.player-rail-position-picker button:hover { color:#fff; background:#252928; }
.player-rail-position-picker button:active { transform:scale(.96); }
.player-rail-position-picker button.active { border-color:rgba(181,130,255,.2); background:rgba(181,130,255,.11); color:var(--yellow); box-shadow:inset 0 0 0 1px rgba(181,130,255,.035); }
.settings-toggle-stack { margin-top: 10px; }
.setting-select { min-width: 168px; height: 42px; padding: 0 35px 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #111314; color: var(--text); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.setting-select:focus { border-color: rgba(181,130,255,.55); box-shadow: 0 0 0 3px rgba(181,130,255,.08); }
.game-setting-picker { display: grid; gap: 7px; margin: 12px 0 16px; }
.game-setting-picker > span { color: var(--muted); font-size: 8px; font-weight: 850; }
.game-setting-picker .setting-select { width: 100%; }
.keybind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keybind-row { min-width: 0; display: grid; grid-template-columns: minmax(100px,1fr) minmax(120px,.8fr); align-items: center; gap: 10px; min-height: 54px; padding: 9px 11px; border-radius: 14px; background: #202324; border: 1px solid rgba(255,255,255,.035); }
.keybind-row > span { color: #d9dcda; font-size: 8px; font-weight: 800; }
.keybind-select { width: 100%; min-width: 0; height: 36px; }
.keybind-editor-list { min-width:0; max-width:100%; display:grid; gap:8px; }
.keybind-editor-row { min-width:0; max-width:100%; min-height:66px; padding:9px 10px 9px 13px; display:grid; grid-template-columns:minmax(0,1fr) minmax(118px,.9fr) 34px; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.055); border-radius:15px; background:linear-gradient(145deg,#202324,#1b1e1f); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.keybind-editor-row.is-custom { border-color:rgba(181,130,255,.13); background:linear-gradient(145deg,rgba(181,130,255,.08),#1b1e1f 55%); }
.keybind-editor-copy { min-width:0; display:grid; gap:4px; }
.keybind-editor-copy strong { overflow:hidden; color:#eef0ed; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.keybind-editor-copy small { overflow:hidden; color:#828984; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.keybind-binding-button { min-width:0; min-height:42px; padding:0 10px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:#171a1a; color:#f6f2dc; cursor:pointer; font:inherit; font-size:8px; font-weight:800; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.keybind-binding-button > i:first-child { color:var(--yellow); font-size:13px; }
.keybind-binding-button > span { min-width:0; flex:1; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.keybind-binding-button > i:last-child { color:#8a918d; font-size:11px; }
.keybind-binding-button:hover { transform:translateY(-1px); border-color:rgba(181,130,255,.35); background:#222625; }
.keybind-row-action { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:#242827; color:#929994; cursor:pointer; transition:color .16s ease,border-color .16s ease,background .16s ease; }
.keybind-row-action:hover { border-color:rgba(181,130,255,.24); color:var(--yellow); }
.keybind-row-action.danger { color:#d98989; }
.keybind-row-action.danger:hover { border-color:rgba(230,113,113,.3); background:rgba(190,61,61,.12); color:#ffb1b1; }
.keybind-add-form { margin-top:12px; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; border:1px dashed rgba(181,130,255,.19); border-radius:15px; background:rgba(181,130,255,.035); }
.keybind-add-form label { min-width:0; display:grid; gap:6px; }
.keybind-add-form label > span { color:#adb4af; font-size:7px; font-weight:850; }
.keybind-add-form input { min-width:0; height:39px; padding:0 11px; border:1px solid rgba(255,255,255,.09); border-radius:11px; outline:0; background:#171a1a; color:var(--text); font:inherit; font-size:9px; font-weight:750; }
.keybind-add-form input:focus { border-color:rgba(181,130,255,.5); box-shadow:0 0 0 3px rgba(181,130,255,.08); }
.keybind-add-form .soft-btn { min-height:39px; white-space:nowrap; }
.settings-footnote { display: flex; gap: 8px; margin: 14px 2px 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.settings-footnote i { margin-top: 2px; color: var(--yellow); }
.settings-footnote code { color: #e9c94b; font-family: ui-monospace,"Cascadia Code",monospace; }
.stream-video { user-select: none; -webkit-user-drag: none; image-rendering: auto; }
@media (max-width: 1350px) { .settings-page-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .settings-form-row { align-items: stretch; flex-direction: column; } .setting-select { width: 100%; } .settings-form-row > .native-select-shell { width:100%; min-width:0; max-width:100%; } .keybind-grid { grid-template-columns: 1fr; } .keybind-row { grid-template-columns:1fr; } .keybind-row > .native-select-shell,.game-setting-picker > .native-select-shell { min-width:0; width:100%; max-width:100%; } .keybind-editor-row { grid-template-columns:minmax(0,1fr) 34px; } .keybind-binding-button { grid-column:1; grid-row:2; } .keybind-row-action { grid-column:2; grid-row:1; } .keybind-add-form { grid-template-columns:1fr; } .keybind-add-form .soft-btn { width:100%; } .player-rail-position-picker { width:100%; grid-template-columns:repeat(2,1fr); } .player-rail-position-picker button { min-width:0; } .settings-range-control { min-width:0; width:100%; } }

/* CloudBanana media cards + home polish */
.text-btn {
  appearance: none;
  min-height: 36px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #191c1d;
  color: #c8ccc9;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.text-btn i { color: #747b77; font-size: 13px; transition: transform .16s ease, color .16s ease; }
@media (hover:hover) and (pointer:fine) {
  .text-btn:hover { color: #fff; background: #202425; border-color: rgba(181,130,255,.2); transform: translateY(-1px); }
  .text-btn:hover i { color: var(--yellow); transform: translateX(2px); }
}
.text-btn:focus-visible { outline: 2px solid rgba(181,130,255,.55); outline-offset: 2px; }

.home-empty-strip {
  min-height: 88px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 19px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #17191a;
  color: var(--muted);
}
.home-empty-strip > i {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--yellow-soft);
  color: var(--yellow);
  font-size: 17px;
}
.home-empty-strip div { display: grid; gap: 4px; }
.home-empty-strip strong { color: var(--text); font-size: 10px; }
.home-empty-strip span { font-size: 8px; }

.library-grid,
.home-game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.game-scroller { grid-auto-columns: minmax(430px,1fr); }
.game-card { border-radius: 23px; }
.game-card-media {
  min-height: 205px;
  display: grid;
  grid-template-columns: minmax(112px,34%) minmax(0,66%);
  background: #101213;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.game-media-pair { overflow: hidden; }
.game-cover-panel {
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #1d2021;
  border-right: 1px solid rgba(255,255,255,.055);
}
.game-cover-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.game-cover-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 62%,rgba(5,6,6,.38));
}
.game-cover-fallback {
  display: grid;
  place-items: end;
  color: rgba(255,255,255,.66);
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: -5px;
}
.game-cover-fallback span { padding: 0 10px 8px 0; position: relative; z-index: 2; }
.game-shot-carousel {
  min-width: 0;
  min-height: 205px;
  position: relative;
  overflow: hidden;
  background: #111314;
}
.game-shot-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(4,5,5,.02) 50%,rgba(4,5,5,.48) 100%);
  z-index: 1;
}
.game-shot-image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  opacity: 1;
  transform: scale(1.001);
  transition: opacity .18s ease, transform .32s ease;
}
.game-shot-image.switching { opacity: .58; transform: scale(1.018); }
.game-shot-fallback {
  display: grid;
  place-items: end;
  color: rgba(255,255,255,.34);
  font-size: 64px;
  font-weight: 1000;
  letter-spacing: -7px;
}
.game-shot-fallback-mark { padding: 0 13px 9px 0; position: relative; z-index: 2; }
.game-shot-dots {
  position: absolute;
  left: 50%;
  bottom: 11px;
  z-index: 3;
  transform: translateX(-50%);
  min-height: 22px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(8,9,9,.42);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px);
}
.game-shot-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.43);
  cursor: pointer;
  transition: width .16s ease, background .16s ease, transform .16s ease;
}
.game-shot-dot.active { width: 17px; background: var(--yellow); }
@media (hover:hover) and (pointer:fine) {
  .game-shot-dot:hover { background: #fff; transform: scale(1.12); }
  .game-card:hover .game-shot-image { transform: scale(1.015); }
}
.game-shot-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.game-page-media-pair {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(190px,25%) minmax(0,75%);
  border: 1px solid var(--line);
  border-radius: 25px;
  background: #121415;
}
.game-page-media-pair .game-shot-carousel { min-height: 360px; }
.game-page-media-pair .game-shot-dots { bottom: 16px; }

/* Featured art should stay clean: no giant initials, rings, or decorative letters. */
.featured-decoration,
.featured-ring,
.featured-block,
.featured-initials { display: none !important; }

/* Make the Nana balance feel liquid instead of like a plain progress meter. */
.nana-progress { height: 24px; box-shadow: inset 0 1px 3px rgba(0,0,0,.36); }
.nana-progress-fill {
  background: linear-gradient(90deg,#7445C4 0%,#B582FF 54%,#EADCFF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 22px rgba(181,130,255,.16);
}
.nana-progress-fill::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.32),rgba(255,255,255,.05));
  pointer-events: none;
}
.bubble {
  bottom: -12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.bubble:nth-child(1) { width: 7px; height: 7px; left: 6%; animation-delay: -.3s; animation-duration: 3.8s; }
.bubble:nth-child(2) { width: 4px; height: 4px; left: 15%; animation-delay: -2.2s; animation-duration: 4.4s; }
.bubble:nth-child(3) { width: 9px; height: 9px; left: 25%; animation-delay: -1.5s; animation-duration: 4.9s; }
.bubble:nth-child(4) { width: 5px; height: 5px; left: 34%; animation-delay: -3.1s; animation-duration: 4.1s; }
.bubble:nth-child(5) { width: 8px; height: 8px; left: 43%; animation-delay: -.8s; animation-duration: 5.1s; }
.bubble:nth-child(6) { width: 4px; height: 4px; left: 52%; animation-delay: -2.7s; animation-duration: 3.7s; }
.bubble:nth-child(7) { width: 10px; height: 10px; left: 61%; animation-delay: -1.1s; animation-duration: 5.3s; }
.bubble:nth-child(8) { width: 5px; height: 5px; left: 69%; animation-delay: -3.6s; animation-duration: 4.6s; }
.bubble:nth-child(9) { width: 7px; height: 7px; left: 76%; animation-delay: -1.9s; animation-duration: 4.2s; }
.bubble:nth-child(10) { width: 4px; height: 4px; left: 83%; animation-delay: -.5s; animation-duration: 3.9s; }
.bubble:nth-child(11) { width: 9px; height: 9px; left: 90%; animation-delay: -2.4s; animation-duration: 5s; }
.bubble:nth-child(12) { width: 5px; height: 5px; left: 96%; animation-delay: -3.3s; animation-duration: 4.5s; }
@keyframes bubbleRise { from { transform: translateY(20px) scale(.74); opacity: 0; } 28% { opacity: .72; } 72% { opacity: .52; } to { transform: translateY(-30px) scale(1.08); opacity: 0; } }

@media (max-width: 1120px) {
  .library-grid,
  .home-game-grid { grid-template-columns: 1fr; }
  .game-card-media { min-height: 220px; grid-template-columns: minmax(125px,31%) minmax(0,69%); }
}
@media (max-width: 720px) {
  .game-card-media { min-height: 178px; grid-template-columns: minmax(102px,34%) minmax(0,66%); }
  .game-shot-carousel { min-height: 178px; }
  .game-page-media-pair { min-height: 280px; grid-template-columns: minmax(115px,34%) minmax(0,66%); border-radius: 20px; }
  .game-page-media-pair .game-shot-carousel { min-height: 280px; }
  .text-btn { min-height: 34px; }
}
@media (max-width: 470px) {
  .game-card-media { min-height: 160px; grid-template-columns: 35% 65%; }
  .game-shot-carousel { min-height: 160px; }
  .game-shot-dots { bottom: 8px; gap: 4px; padding: 5px 6px; }
  .game-shot-dot { width: 5px; height: 5px; }
  .game-shot-dot.active { width: 13px; }
  .game-page-media-pair { grid-template-columns: 1fr; }
  .game-page-media-pair .game-cover-panel { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
  .game-page-media-pair .game-shot-carousel { min-height: 210px; }
}

/* v1.2 compact library, reliable favorites, progressive home feed, clean game heroes */
.library-grid,
.home-game-grid {
  grid-template-columns: repeat(auto-fill,minmax(285px,1fr));
  gap: 11px;
}
.game-card {
  border-radius: 18px;
}
.game-card-media {
  min-height: 148px;
  grid-template-columns: minmax(88px,32%) minmax(0,68%);
}
.game-shot-carousel {
  min-height: 148px;
}
.game-card-body {
  padding: 10px 11px 11px;
}
.game-card h3 {
  font-size: 11px;
}
.favorite-btn {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-radius: 9px;
}
.game-meta {
  margin-top: 4px;
  font-size: 7px;
}
.game-tag-row {
  margin-top: 7px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.game-tag {
  padding: 4px 6px;
  font-size: 6px;
  border-radius: 7px;
}
.game-card-foot {
  margin-top: 8px;
}
.nana-cost {
  font-size: 8px;
}
.card-play {
  width: 29px;
  height: 29px;
  border-radius: 9px;
}
.game-shot-dots {
  bottom: 7px;
  min-height: 18px;
  padding: 4px 6px;
  gap: 4px;
}
.game-shot-dot {
  width: 5px;
  height: 5px;
}
.game-shot-dot.active {
  width: 13px;
}
.home-library-feed {
  padding-bottom: 8px;
}
.home-game-count {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.home-infinite-grid {
  min-height: 120px;
}
.home-load-sentinel {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.home-load-sentinel span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  animation: homeLoadPulse .9s ease-in-out infinite alternate;
}
.home-load-sentinel span:nth-child(2) { animation-delay: -.3s; }
.home-load-sentinel span:nth-child(3) { animation-delay: -.6s; }
@keyframes homeLoadPulse {
  from { opacity: .26; transform: translateY(2px) scale(.8); }
  to { opacity: 1; transform: translateY(-2px) scale(1); }
}
.home-library-end {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 8px;
}
.home-library-end i { color: var(--yellow); }
.favorite-empty { min-height: 92px; }

.game-page-art,
.game-page-orbit,
.game-page-initials {
  display: none !important;
}
.game-page-hero::before,
.game-page-hero::after {
  content: none !important;
}

.package-purchase-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
}
.package-purchase-row .package-price {
  width: max-content;
  max-width: 100%;
  flex: none;
}
.package-purchase-row .package-buy {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
}
.package-purchase-row .package-buy i {
  font-size: 13px;
}

.nana-progress-fill .bubble {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.52);
  box-shadow: inset 0 0 4px rgba(255,255,255,.22), 0 0 6px rgba(255,255,255,.08);
}

/* Player settings drawer and reliable fullscreen menus */
.cb-dropdown-menu.is-portal {
  position: fixed;
  z-index: 10020;
  right: auto;
  max-height: min(300px, calc(100dvh - 16px));
}
.cb-dropdown-menu.is-portal.open { opacity:1; visibility:visible; transform:translateY(0); }
.player-settings-backdrop {
  position: absolute;
  z-index: 43;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px);
  cursor: default;
  animation: playerSettingsFade .18s ease both;
}
.player-settings-drawer {
  --player-panel-surface: #181b1a;
  --player-panel-raised: #202423;
  --player-panel-line: rgba(255,255,255,.075);
  position: absolute;
  z-index: 44;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 100%);
  padding: 0;
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.1);
  border-radius: 28px 0 0 28px;
  background: radial-gradient(circle at 100% 0,rgba(181,130,255,.075),transparent 32%),rgba(13,15,14,.99);
  box-shadow: -30px 0 90px rgba(0,0,0,.58),-1px 0 0 rgba(255,255,255,.035);
  backdrop-filter: blur(30px);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  animation: playerSettingsSlide .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes playerSettingsFade { from { opacity:0; } to { opacity:1; } }
@keyframes playerSettingsSlide { from { opacity:0; transform:translateX(34px); } to { opacity:1; transform:translateX(0); } }
.player-settings-nav {
  min-width: 0;
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-right: 1px solid rgba(255,255,255,.07);
  background:#181a1b;
  overflow-y:auto;
  scrollbar-width:none;
}
.player-settings-nav::-webkit-scrollbar { display:none; }
.player-settings-nav-brand {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
}
.player-settings-nav-brand img {
  width:52px;
  height:52px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(181,130,255,.11));
}
.player-settings-nav-capsule {
  width:58px;
  padding:8px 0;
  display:grid;
  gap:3px;
  place-items:center;
  border-radius:29px;
  background:#222526;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.player-settings-nav-spacer { flex:1 1 auto; min-height:6px; }
.player-settings-nav-actions {
  width:58px;
  padding-top:12px;
  display:grid;
  gap:6px;
  place-items:center;
  border-top:1px solid rgba(255,255,255,.055);
}
.player-settings-nav button {
  width:46px;
  height:46px;
  padding:0;
  display: grid;
  place-items: center;
  border:0;
  border-radius:16px;
  background: transparent;
  color:#8a908d;
  cursor: pointer;
  font: inherit;
  transition:color .18s ease,background .18s ease,transform .18s ease,opacity .18s ease;
}
.player-settings-nav button i { font-size:18px; }
.player-settings-nav button.active { background:var(--yellow); color:#21172f; box-shadow:0 10px 25px rgba(181,130,255,.17); }
.player-settings-nav-actions button { color:#777d7a; }
.player-settings-nav-actions button.danger { color:#d97777; background:rgba(220,72,72,.055); }
.player-settings-nav-actions button.danger:hover { color:#ffb6b6; background:rgba(220,72,72,.14); }
.player-settings-nav button:disabled { cursor:wait; opacity:.58; }
@media (hover:hover) and (pointer:fine) {
  .player-settings-nav button:hover { color:#f1f2ef; background:rgba(255,255,255,.045); transform:translateY(-1px); }
  .player-settings-nav button.active:hover { color:#21172f; background:var(--yellow); }
}
.player-settings-content { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 36%); }
.player-settings-content .player-touch-settings-head { min-height:82px; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(90deg,rgba(255,255,255,.018),transparent); }
.player-settings-content .player-touch-settings-head > div { grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; }
.player-settings-content .player-touch-settings-head .home-kicker { grid-column:2; align-self:end; color:#b5bdb8; font-size:7px; }
.player-settings-content .player-touch-settings-head strong { grid-column:2; font-size:20px; letter-spacing:-.5px; }
.player-settings-head-icon { grid-row:1/3; width:34px; height:34px; align-self:center; display:grid; place-items:center; border-radius:11px; background:var(--yellow-soft); color:var(--yellow); font-size:14px; }
.player-settings-content .player-touch-settings-head button { width:42px; height:42px; border-radius:14px; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.player-settings-content .player-touch-settings-head button:hover { transform:translateY(-1px); border-color:rgba(181,130,255,.24); background:#272b29; color:var(--yellow); }
.player-settings-scroll { min-height:0; overflow-y:auto; padding:22px; scrollbar-width:thin; scrollbar-color:var(--yellow) #272a29; }
.player-settings-section { display:none; }
.player-settings-section.active { display:block; animation:playerSettingsSection .16s ease both; }
@keyframes playerSettingsSection { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.player-settings-section-intro { min-height:90px; padding:16px; display:flex; align-items:center; gap:13px; border:1px solid rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(145deg,rgba(181,130,255,.105),rgba(255,255,255,.022)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.player-settings-section-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.15); border-radius:16px; background:radial-gradient(circle at 35% 25%,rgba(255,236,156,.18),transparent 45%),var(--yellow-soft); color:var(--yellow); font-size:18px; box-shadow:0 10px 24px rgba(133,83,229,.09); }
.player-settings-section-intro > div { min-width:0; display:grid; gap:4px; }
.player-settings-section-kicker { display:inline-flex; align-items:center; gap:4px; color:var(--yellow); font-size:6.5px; font-weight:850; letter-spacing:.9px; }
.player-settings-section-kicker i { font-size:7px; }
.player-settings-section-intro strong { font-size:12px; }
.player-settings-section-intro div > span { color:var(--muted); font-size:8px; line-height:1.45; }
.player-settings-section-arrow { margin-left:auto; color:rgba(255,255,255,.34); font-size:15px; }
.player-settings-drawer .player-touch-settings-field { margin-top:14px; padding:0; font-size:9px; }
.player-settings-drawer .player-settings-card { border:1px solid var(--player-panel-line); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.014)); box-shadow:inset 0 1px 0 rgba(255,255,255,.028); }
.player-settings-drawer .player-settings-field-card { padding:13px 14px 14px; gap:11px; border-radius:17px; }
.player-settings-drawer .player-settings-field-card > span { min-height:28px; display:flex; align-items:center; gap:8px; color:#e8ebe7; }
.player-settings-drawer .player-settings-field-card > span > b { margin-left:auto; padding:4px 7px; border:1px solid rgba(181,130,255,.14); border-radius:999px; background:rgba(181,130,255,.09); color:#ffe68c; font-size:7px; }
.player-settings-field-icon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.13); border-radius:9px; background:rgba(181,130,255,.08); color:var(--yellow); font-size:12px; }
.player-settings-drawer .player-settings-field-card .native-select-trigger { min-height:44px; border-color:rgba(255,255,255,.08); border-radius:13px; background:#202423; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.player-settings-drawer .player-settings-field-card .native-select-shell.open .native-select-trigger { border-color:rgba(181,130,255,.34); background:#252927; }
.player-settings-drawer .player-settings-model-picker { min-height:138px; padding:17px; border-color:rgba(181,130,255,.24); background:radial-gradient(circle at 88% 8%,rgba(112,91,255,.16),transparent 38%),linear-gradient(145deg,rgba(181,130,255,.10),rgba(255,255,255,.025)); }
.player-settings-drawer .player-settings-model-picker > span { min-height:36px; font-size:10px; font-weight:800; }
.player-settings-drawer .player-settings-model-picker .player-settings-field-icon { width:36px; height:36px; flex-basis:36px; border-radius:12px; font-size:15px; }
.player-settings-drawer .player-settings-model-picker .native-select-trigger { min-height:58px; border-radius:16px; font-size:11px; }
.player-settings-drawer .player-settings-field-card input[type="range"] { height:28px; padding:0; accent-color:var(--yellow); }
.player-drag-slider {
  --player-slider-progress:50%;
  position:relative;
  width:100%;
  height:38px;
  display:block;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(145deg,#232725,#1b1f1e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}
.player-drag-slider-track { position:absolute; inset:0 14px; display:block; }
.player-drag-slider-track::before { content:""; position:absolute; left:0; right:0; top:50%; height:7px; transform:translateY(-50%); border-radius:999px; background:rgba(4,6,5,.64); box-shadow:inset 0 1px 2px rgba(0,0,0,.35); }
.player-drag-slider-fill { position:absolute; left:0; top:50%; width:var(--player-slider-progress); height:7px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(90deg,#d99c11,var(--yellow)); box-shadow:0 0 12px rgba(181,130,255,.2); }
.player-drag-slider-thumb { position:absolute; left:var(--player-slider-progress); top:50%; width:20px; height:20px; transform:translate(-50%,-50%); border:3px solid #fff3c1; border-radius:50%; background:var(--yellow); box-shadow:0 4px 12px rgba(0,0,0,.38),0 0 0 4px rgba(181,130,255,.09); transition:width .14s ease,height .14s ease,box-shadow .14s ease; }
.player-drag-slider:hover .player-drag-slider-thumb,.player-drag-slider:focus-visible .player-drag-slider-thumb,.player-drag-slider.is-dragging .player-drag-slider-thumb { width:23px; height:23px; box-shadow:0 5px 15px rgba(0,0,0,.42),0 0 0 6px rgba(181,130,255,.14); }
.player-drag-slider:focus-visible { border-color:rgba(181,130,255,.62); box-shadow:0 0 0 3px rgba(181,130,255,.14),inset 0 1px 0 rgba(255,255,255,.03); }
.player-settings-drawer .player-settings-toggle-card { margin-top:14px; min-height:78px; padding:13px 14px; border-radius:17px; }
.player-settings-drawer .player-settings-toggle-card > div { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:10px; }
.player-settings-toggle-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.13); border-radius:11px; background:rgba(181,130,255,.08); color:var(--yellow); font-size:13px; }
.player-settings-drawer .player-settings-toggle-copy { min-width:0; max-width:none; display:grid; gap:4px; color:inherit; font-size:inherit; line-height:normal; }
.player-settings-drawer .player-settings-toggle-copy strong { font-size:9px; }
.player-settings-drawer .player-settings-toggle-copy > span { max-width:none; color:#979e99; font-size:7.5px; line-height:1.45; }
.player-settings-drawer .player-settings-mode-only.hidden { display:none; }
.player-settings-diagnostics { min-height:62px; margin-top:14px; padding:12px 13px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; border:1px solid rgba(108,226,160,.15); border-radius:16px; background:linear-gradient(135deg,rgba(108,226,160,.09),rgba(255,255,255,.02)); }
.player-settings-diagnostics > i { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(108,226,160,.12); color:#7ef0ab; font-size:13px; }
.player-settings-diagnostics > div { min-width:0; display:grid; gap:3px; }
.player-settings-diagnostics strong { color:#e9efeb; font-size:8.5px; }
.player-settings-diagnostics span { overflow:hidden; color:#aeb8b0; font-size:7px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.player-settings-wide-action { width:100%; margin-top:14px; }
.player-settings-controller-actions { margin-top:14px; padding:12px; display:grid; gap:8px; border:1px solid var(--player-panel-line); border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.014)); }
.player-settings-controller-actions > span { color:#929a95; font-size:7px; line-height:1.45; }
.player-settings-note { margin:14px 0 0; padding:11px 12px; display:flex; align-items:flex-start; gap:8px; border:1px solid rgba(126,183,255,.14); border-radius:14px; background:rgba(82,144,255,.06); color:#b7c5d7; font-size:7.5px; line-height:1.5; }
.player-settings-input-health,.player-settings-dev-diagnostics { min-height:62px; margin-top:14px; padding:12px 13px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; border:1px solid rgba(106,189,255,.16); border-radius:16px; background:linear-gradient(135deg,rgba(80,150,255,.09),rgba(255,255,255,.018)); }
.player-settings-input-health > i { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(86,163,255,.13); color:#9bc8ff; }
.player-settings-input-health strong,.player-settings-dev-diagnostics strong { display:block; color:#e9efeb; font-size:8.5px; }
.player-settings-input-health span,.player-settings-dev-diagnostics span { display:block; margin-top:3px; color:#aeb8b0; font-size:7px; line-height:1.35; }
.player-settings-dev-diagnostics { grid-template-columns:minmax(0,1fr) auto; border-color:rgba(181,130,255,.17); background:linear-gradient(135deg,rgba(181,130,255,.08),rgba(255,255,255,.018)); }
.player-settings-dev-diagnostics small { display:block; margin-bottom:4px; color:var(--yellow); font-size:6.5px; letter-spacing:.1em; font-weight:900; }
.player-settings-dev-diagnostics .player-settings-action { margin:0; min-width:78px; }
@keyframes player-tag-pulse { 50% { transform:translateY(-1px); box-shadow:0 0 23px rgba(66,194,255,.22); } }
.player-settings-note > i { flex:0 0 auto; color:#8bbcff; font-size:11px; }
.player-settings-binding-hint { margin-top:14px; padding:13px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; border:1px solid rgba(181,130,255,.12); border-radius:17px; background:rgba(181,130,255,.055); }
.player-settings-binding-hint > i { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:rgba(181,130,255,.09); color:var(--yellow); font-size:13px; }
.player-settings-binding-hint > div { display:grid; gap:4px; }
.player-settings-binding-hint strong { font-size:8.5px; }
.player-settings-binding-hint span { color:#aeb5b1; font-size:7px; line-height:1.45; }
.player-settings-drawer .player-touch-layout-status { margin:14px 0 0; padding:11px 12px 11px 34px; position:relative; border:1px solid rgba(181,130,255,.1); border-radius:14px; background:rgba(181,130,255,.055); color:#c4c9c5; font-size:8px; }
.player-settings-drawer .player-touch-layout-status::before { content:""; position:absolute; left:15px; top:50%; width:7px; height:7px; border-radius:50%; transform:translateY(-50%); background:#6ce2a0; box-shadow:0 0 0 4px rgba(108,226,160,.08); }
.player-settings-action { min-width:110px; min-height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:#262a29; color:#eef0ed; cursor:pointer; font:inherit; font-size:8px; font-weight:850; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease; }
.player-settings-action:hover { transform:translateY(-1px); border-color:rgba(181,130,255,.26); background:#2b2e2a; color:#fff5c2; }
.player-settings-action.active { border-color:rgba(181,130,255,.3); background:var(--yellow-soft); color:var(--yellow); }
.player-settings-volume input { width:100%; accent-color:var(--yellow); }

/* Key-combination capture */
.control-field-hint { margin-top:2px; color:#747b77; font-size:6.5px; line-height:1.45; }
.keybind-capture-overlay { position:fixed; z-index:12000; inset:0; display:grid; place-items:center; padding:18px; background:rgba(5,7,7,.78); backdrop-filter:blur(16px); }
.keybind-capture-card { width:min(430px,100%); padding:28px; display:grid; justify-items:center; text-align:center; border:1px solid rgba(255,255,255,.1); border-radius:25px; background:#171a19; box-shadow:0 32px 90px rgba(0,0,0,.58); }
.keybind-capture-icon { width:62px; height:62px; margin-bottom:14px; display:grid; place-items:center; border-radius:20px; background:var(--yellow-soft); color:var(--yellow); font-size:24px; }
.keybind-capture-card h2 { margin:7px 0 6px; font-size:24px; letter-spacing:-1px; }
.keybind-capture-card p { max-width:340px; margin:0; color:var(--muted); font-size:9px; line-height:1.6; }
.keybind-capture-value { width:100%; min-height:58px; margin:20px 0 12px; padding:12px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.23); border-radius:15px; background:rgba(181,130,255,.07); color:#fff1a5; font-size:15px; font-weight:850; }
.keybind-capture-card button { min-width:110px; min-height:40px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:#242827; color:#dfe2de; cursor:pointer; font:inherit; font-size:8px; font-weight:850; }

/* Use the regular CloudBanana typeface for all small UI labels. */
.home-kicker,.package-badge,.package-label,.nana-balance-insight span,.nana-secure-card span,.settings-footnote code { font-family:inherit !important; }
.home-kicker { font-size:10px; font-weight:700; letter-spacing:.65px; }
.package-badge,.package-label,.nana-balance-insight span,.nana-secure-card span { font-weight:700; letter-spacing:.55px; }

/* Compact, readable Nana bundles without the empty billboard-sized cards. */
.nana-package-grid-v5 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.nana-package-v5 { min-height:0; padding:14px; display:grid; grid-template-columns:124px minmax(0,1fr); grid-template-rows:auto auto auto; align-items:center; column-gap:16px; overflow:hidden; }
.nana-package-v5.featured { transform:none; }
.nana-package-v5 .package-badge { top:14px; right:14px; }
.nana-package-v5 .package-visual { grid-row:1/4; width:124px; min-height:168px; border-radius:18px; background:radial-gradient(circle at 50% 68%,rgba(181,130,255,.2),transparent 54%),#202423; }
.nana-package-v5 .bundle-art > img { width:90%; height:88%; }
.nana-package-v5 .package-copy { min-width:0; padding:12px 0 0; }
.nana-package-v5 .package-label { margin-top:0; }
.nana-package-v5 .package-total strong { font-size:28px; }
.nana-package-v5 .package-copy p { min-height:0; margin-top:6px; }
.nana-package-v5 .package-breakdown { align-self:start; margin-top:10px; }
.nana-package-v5 .package-playtime { margin:9px 0 0; }
.nana-package-v5 .package-purchase-row { grid-column:1/-1; grid-template-columns:minmax(0,1fr) 118px; align-items:end; margin-top:13px; padding-top:13px; border-top:1px solid rgba(255,255,255,.065); }
.nana-package-v5 .package-purchase-row .package-buy { min-height:42px; }

@media (max-width:1250px) {
  .nana-package-grid-v5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .player-settings-drawer { width:100%; grid-template-columns:70px minmax(0,1fr); border-radius:0; }
  .player-settings-nav { padding:12px 6px 10px; gap:14px; }
  .player-settings-nav-brand { width:48px; height:48px; }
  .player-settings-nav-brand img { width:45px; height:45px; }
  .player-settings-nav-capsule,.player-settings-nav-actions { width:52px; }
  .player-settings-nav-capsule { padding:5px 0; border-radius:26px; }
  .player-settings-nav-actions { padding-top:9px; gap:4px; }
  .player-settings-nav button { width:42px; height:42px; border-radius:14px; }
  .player-settings-nav button i { font-size:16px; }
  .player-settings-content .player-touch-settings-head { min-height:66px; padding:0 14px; }
  .player-settings-scroll { padding:14px; }
  .player-settings-drawer .player-touch-setting-row { align-items:flex-start; flex-direction:column; }
  .player-settings-action { width:100%; }
  .nana-package-grid-v5 { grid-template-columns:1fr; }
  .nana-package-v5 { grid-template-columns:104px minmax(0,1fr); column-gap:12px; }
  .nana-package-v5 .package-visual { width:104px; min-height:148px; }
}

/* Stelah profile and friends */
.profile-account-layout { align-items:start; }
.profile-hero-rich { min-height:220px; position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(135deg,#241633,#15101F); }
.profile-hero-rich::before { content:""; position:absolute; inset:0; z-index:-2; background-image:var(--profile-banner); background-position:center; background-size:cover; opacity:.72; }
.profile-hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(14,9,22,.9),rgba(14,9,22,.42)); }
.profile-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; overflow:hidden; border:2px solid rgba(216,190,255,.64); border-radius:50%; background:linear-gradient(145deg,#C9A8FF,#7445C4); color:#1D102D; font-weight:950; box-shadow:0 0 0 4px rgba(181,130,255,.12); }
.avatar img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.avatar-letter { width:100%; height:100%; display:grid; place-items:center; border-radius:inherit; color:#fff; font-size:15px; font-weight:950; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.24); }
.profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-avatar-large { width:76px; height:76px; flex-basis:76px; font-size:22px; }
.profile-name-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.profile-badge { width:20px; height:20px; display:inline-grid; place-items:center; border-radius:8px; font-size:10px; }
.profile-badge.verified { color:#f7f3ff; background:linear-gradient(135deg,#6C8BFF,#8A5DE8); box-shadow:0 0 0 1px rgba(231,221,255,.2); }
.profile-badge.developer { color:#FCF8FF; background:linear-gradient(135deg,#E7C9FF,#A04FFF 50%,#5B2EAA); box-shadow:0 0 0 1px rgba(247,222,255,.3),0 5px 14px rgba(137,72,232,.28); font-weight:950; }
.profile-badge.developer i { font-size:10px; filter:drop-shadow(0 1px 1px rgba(28,8,60,.45)); }
.profile-editor { margin-top:18px; }
.profile-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-form label { display:grid; gap:6px; color:var(--muted); font-size:9px; font-weight:800; }
.profile-form label:nth-of-type(2),.profile-form .primary-btn { grid-column:1/-1; }
.profile-form input,.profile-form textarea { width:100%; border:1px solid var(--line-strong); border-radius:12px; outline:0; padding:11px 12px; resize:vertical; background:#120E19; color:var(--text); font:inherit; }
.profile-form textarea { min-height:82px; }
.profile-form input:focus,.profile-form textarea:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(181,130,255,.12); }
.profile-private-toggle { position:relative; grid-column:1/-1; grid-template-columns:1fr; align-items:center; gap:0; padding:12px 14px 12px 64px; border:1px solid var(--line); border-radius:13px; background:rgba(181,130,255,.055); cursor:pointer; }
.profile-private-toggle input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.profile-private-toggle::before { content:""; position:absolute; left:14px; top:50%; width:38px; height:22px; transform:translateY(-50%); border:1px solid rgba(222,199,255,.3); border-radius:999px; background:#2A1B40; transition:background .18s ease,border-color .18s ease; }
.profile-private-toggle::after { content:""; position:absolute; left:17px; top:50%; width:16px; height:16px; transform:translateY(-50%); border-radius:50%; background:#B8ADBE; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .18s ease,background .18s ease; }
.profile-private-toggle:has(input:checked)::before { border-color:#CDB1FF; background:#7648C9; }
.profile-private-toggle:has(input:checked)::after { transform:translate(16px,-50%); background:#fff; }
.profile-private-toggle strong,.profile-private-toggle small { display:block; }
.profile-private-toggle small { margin-top:3px; color:var(--muted); font-weight:500; }
.profile-image-editor { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.profile-image-upload { min-height:82px; display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; padding:10px; border:1px dashed rgba(181,130,255,.32); border-radius:14px; background:#171120; cursor:pointer; }
.profile-image-upload > span { grid-row:1/3; width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:#2A1B40; color:var(--yellow); }
.profile-image-upload > span img { width:100%; height:100%; object-fit:cover; }
.profile-upload-preview { width:48px; height:48px; flex-basis:48px; }
.profile-image-upload strong { font-size:10px; }.profile-image-upload small { color:var(--muted); font-size:8px; }.profile-image-upload input { display:none; }
.friends-page { min-width:0; }.friends-layout { display:grid; grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr); height:min(680px,calc(100vh - 230px)); min-height:520px; border:1px solid var(--line); border-radius:25px; overflow:hidden; background:#171120; }
.friends-sidebar { min-width:0; padding:15px; border-right:1px solid var(--line); background:#15101F; }.friend-search { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; min-height:43px; padding:0 9px; border:1px solid var(--line-strong); border-radius:13px; background:#100C17; color:var(--muted); }.friend-search input { min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:10px; }.friend-search button { border:0; border-radius:9px; padding:7px 9px; background:var(--yellow); color:#21142F; font-size:8px; font-weight:900; cursor:pointer; }
.friend-search-results,.friend-requests { display:grid; gap:8px; margin-top:12px; }.friend-search-result,.friend-request-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:14px; background:#1B1525; }.friend-search-result strong,.friend-request-card strong { font-size:10px; }.friend-search-result small,.friend-request-card small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }.friend-search-result .soft-btn { min-height:32px; padding:0 9px; font-size:8px; }
.friend-request-actions { display:flex; gap:5px; }.friend-request-actions button { min-height:30px; padding:0 8px; font-size:8px; }.friends-list { display:grid; gap:5px; margin-top:16px; }.friends-list .panel-title,.friend-requests .panel-title { margin-bottom:4px; }.friend-list-item { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }.friend-list-item:hover,.friend-list-item.active { border-color:rgba(181,130,255,.32); background:rgba(181,130,255,.09); }.friend-list-item strong { display:flex; align-items:center; gap:5px; font-size:10px; }.friend-list-item small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }.friend-online-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }.friend-list-item > .fi { color:var(--yellow); font-size:12px; }
.direct-chat { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }.direct-chat-head { min-height:76px; display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }.direct-chat-head h2 { margin:0; font-size:16px; }.direct-chat-head p { margin:4px 0 0; color:var(--muted); font-size:8px; }.direct-chat-head .ghost-btn { margin-left:auto; min-height:34px; font-size:8px; }.direct-message-list { min-height:0; max-height:480px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:18px; }.direct-message { max-width:min(76%,430px); display:grid; gap:4px; padding:10px 12px; border-radius:14px 14px 14px 4px; background:#241A32; color:#F8F3FF; font-size:10px; line-height:1.45; }.direct-message.mine { align-self:flex-end; border-radius:14px 14px 4px 14px; background:linear-gradient(135deg,#A874FF,#7445C4); color:#190D27; }.direct-message small { opacity:.7; font-size:7px; }.direct-message-form { display:flex; gap:9px; padding:13px 18px; border-top:1px solid var(--line); }.direct-message-form input { min-width:0; flex:1; height:40px; border:1px solid var(--line-strong); border-radius:12px; outline:0; padding:0 12px; background:#100C17; color:var(--text); font:inherit; font-size:10px; }.direct-message-form input:focus { border-color:var(--yellow); }.direct-message-form .primary-btn { min-height:40px; }.friend-empty { min-height:100px; display:grid; place-items:center; align-content:center; gap:8px; color:var(--muted); text-align:center; font-size:9px; }.friend-empty > i { color:var(--yellow); font-size:20px; }.friend-chat-empty { min-height:100%; }.public-profile-page { max-width:800px; margin:0 auto; }.public-profile-hero { margin-top:16px; }.public-profile-bio { margin-top:16px; }.public-profile-bio p { margin:10px 0 0; color:#DCD3E9; line-height:1.7; font-size:11px; }.public-profile-loading { min-height:420px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--muted); }.public-profile-loading i { color:var(--yellow); font-size:22px; }

/* Last-mile violet conversion for legacy fixed-color surfaces. */
.nav-icon.active,.mobile-nav-item.active { box-shadow:0 10px 25px rgba(181,130,255,.2); }.profile-copy small,.quick-play-btn,.top-nana-btn,.wallet-shop-link { color:#E6D7FF; }.hero-copy-card,.featured-copy-panel,.game-page-copy { background:linear-gradient(145deg,rgba(64,38,96,.58),rgba(38,24,61,.4)); border-color:rgba(181,130,255,.18); color:#FAF6FF; }.hero-secondary,.featured-secondary,.game-page-secondary { background:rgba(47,29,72,.34); color:#FAF6FF; }.nana-progress-fill,.player-volume-control input[type="range"]::-webkit-slider-runnable-track { background:linear-gradient(90deg,#7445C4,#B582FF 58%,#EADCFF); }.nana-progress-fill { box-shadow:0 0 18px rgba(181,130,255,.28); }.wallet-card,.side-panel,.panel,.game-card,.history-table { background:#171120; }.profile-hero { background:linear-gradient(135deg,#251A34,#16101F); }.avatar { background:linear-gradient(145deg,#C9A8FF,#7445C4); color:#21142F; }.store-preview-badge,.nana-store-hero .store-preview-badge { background:rgba(181,130,255,.13); color:#EBDCFF; }.notification-item-icon { background:#2A1B40; }.toast-repeat-count { border-color:rgba(222,199,255,.72); background:linear-gradient(135deg,#D8BEFF,#8A5DE8); color:#21142F; }
@media (max-width:780px) { .profile-form,.profile-image-editor { grid-template-columns:1fr; }.friends-layout { grid-template-columns:1fr; }.friends-sidebar { border-right:0; border-bottom:1px solid var(--line); }.direct-chat { min-height:460px; }.friend-search-result,.friend-request-card { grid-template-columns:auto minmax(0,1fr); }.friend-search-result .soft-btn,.friend-request-actions { grid-column:2; justify-self:start; }.profile-hero-rich { min-height:180px; } }
.profile-form label:has(#profile-username) { display:none; }
/* Account and people cleanup: long friend lists stay usable instead of being
   clipped inside the split panel. */
.friends-layout { grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr); height:min(690px,calc(100vh - 200px)); min-height:520px; }
.friends-sidebar { min-height:0; display:flex; flex-direction:column; }
.friends-sidebar-scroll { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding-right:4px; }
.friends-list { padding-bottom:4px; }
.friends-list .panel-title,.friend-requests .panel-title { position:sticky; top:0; z-index:1; padding:8px 0; background:#15101F; }
.friend-list-item { min-height:62px; }
.direct-chat { min-height:0; overflow:hidden; }
.direct-message-list { min-height:0; height:auto; max-height:none; overflow-y:scroll; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(202,169,255,.72) rgba(17,12,25,.72); align-content:start; }
/* Messages are flex children. Without an explicit non-shrinking basis a long
   conversation is compressed to fit the panel instead of overflowing it. */
.direct-message,.direct-message-list > .friend-empty { flex:0 0 auto; }
.profile-public-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }.profile-game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:12px; }.profile-game-tile { min-width:0; display:grid; gap:7px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#20152D; color:var(--text); text-align:left; cursor:pointer; }.profile-game-tile img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }.profile-game-tile strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.profile-session-list { display:grid; gap:8px; margin-top:12px; }.profile-session-row { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:11px; background:#20152D; }.profile-session-row i { color:#C9A8FF; }.profile-session-row span { min-width:0; display:grid; gap:2px; }.profile-session-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.profile-session-row small,.profile-empty { color:var(--muted); font-size:8px; }.profile-session-row b { margin-left:auto; min-width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:#A874FF; color:#190D27; font-size:9px; }
.direct-message-list::-webkit-scrollbar { width:10px; }
.direct-message-list::-webkit-scrollbar-track { margin:8px 0; border-radius:999px; background:rgba(17,12,25,.72); }
.direct-message-list::-webkit-scrollbar-thumb { min-height:32px; border:3px solid rgba(17,12,25,.72); border-radius:999px; background:linear-gradient(180deg,#C9A8FF,#7A4CCC); }
.direct-message-list::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#E1D2FF,#9A68F0); }
.friends-sidebar-title { padding:3px 4px 13px; border-bottom:1px solid var(--line); }
.friends-sidebar-title h2 { margin:5px 0 0; font-size:18px; }
.people-directory { min-height:100%; padding:clamp(18px,2.5vw,30px); overflow:auto; background:linear-gradient(145deg,rgba(42,27,64,.42),rgba(23,17,32,.32)); }
.people-directory-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:19px; border-bottom:1px solid var(--line); }
.people-directory-head h2 { margin:5px 0 5px; font-size:clamp(20px,2vw,28px); }
.people-directory-head p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }
.people-directory-count { flex:none; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 11px; border:1px solid rgba(181,130,255,.28); border-radius:11px; background:rgba(181,130,255,.11); color:#E7D9FF; font-size:10px; font-weight:800; }
.people-directory-count i { color:#C6A2FF; }
.people-directory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:11px; margin-top:18px; }
.people-directory-card { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; padding:13px; border:1px solid var(--line); border-radius:17px; background:rgba(14,10,21,.5); transition:border-color .18s ease,transform .18s ease,background .18s ease; }
.people-directory-card:hover { border-color:rgba(181,130,255,.42); background:rgba(47,29,72,.38); transform:translateY(-2px); }
.people-directory-avatar { width:42px; height:42px; font-size:14px; flex-basis:42px; }
.people-directory-copy { min-width:0; display:grid; gap:3px; }
.people-directory-copy strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.people-directory-copy small { color:#C5B6D7; font-size:8px; }
.people-directory-copy > span { display:-webkit-box; overflow:hidden; margin-top:3px; color:var(--muted); font-size:8px; line-height:1.45; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.people-directory-actions { grid-column:1/-1; display:flex; gap:7px; padding-top:2px; }
.people-directory-actions button { min-height:32px; padding:0 10px; font-size:8px; }
.people-directory-actions .soft-btn { margin-left:auto; }
.direct-chat:has(.people-directory) { display:block; overflow:hidden; }
.public-profile-hero { justify-content:space-between; gap:16px; }
.public-profile-friend-btn { position:relative; z-index:1; flex:none; min-height:40px; padding:0 14px; }
.profile-bio-content { display:grid; gap:10px; margin-top:10px; color:#DCD3E9; font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.profile-bio-link { color:#C8A9FF; text-decoration:underline; text-decoration-color:rgba(200,169,255,.45); text-underline-offset:3px; }
.profile-bio-image-link { display:block; width:min(100%,560px); overflow:hidden; border:1px solid rgba(181,130,255,.28); border-radius:16px; background-color:#17101F; background-image:linear-gradient(45deg,rgba(255,255,255,.075) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.075) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.075) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.075) 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.profile-bio-image { display:block; width:100%; max-height:440px; object-fit:contain; }
.profile-bio-image-button { justify-self:start; min-height:34px; margin-top:-4px; font-size:8px; }.profile-bio-image-references { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.profile-bio-image-references span { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(113,180,255,.55); border-radius:8px; padding:5px 7px; background:rgba(55,126,208,.18); color:#9DD0FF; font-size:8px; font-weight:800; }.profile-bio-image-references i { font-size:10px; }.profile-bio-uploaded-image { display:block; width:min(100%,560px); max-height:440px; object-fit:contain; }
.shared-party-dock { position:fixed; z-index:86; top:50%; width:178px; transform:translateY(-50%); }.shared-party-dock.side-left { left:18px; }.shared-party-dock.side-right { right:18px; }.shared-party-dock.in-player { z-index:120; }.shared-party-dock-trigger { width:100%; display:grid; gap:9px; padding:10px; border:1px solid rgba(211,173,255,.35); border-radius:18px; background:rgba(24,14,35,.74); color:#F8F3FF; text-align:left; box-shadow:0 18px 50px rgba(0,0,0,.28); backdrop-filter:blur(18px); cursor:pointer; }.shared-party-dock-avatars { display:flex; align-items:center; min-height:34px; padding-left:2px; }.shared-party-dock-avatars > span { margin-left:-8px; }.shared-party-dock-avatars > span:first-child { margin-left:0; }.shared-party-dock .profile-avatar { width:34px; height:34px; border:2px solid #21132F; }.party-host-avatar .profile-avatar { border-color:#E6C6FF; box-shadow:0 0 0 2px rgba(178,101,255,.34),0 0 16px rgba(187,119,255,.55); }.shared-party-dock-avatars b { width:28px; height:28px; display:grid; place-items:center; margin-left:5px; border-radius:9px; background:#8D57E7; color:#210D31; font-size:8px; }.shared-party-dock small { display:block; color:#D4B7FA; font-size:7px; letter-spacing:.08em; }.shared-party-dock strong { display:block; overflow:hidden; margin-top:3px; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.shared-party-member-list { display:grid; gap:8px; max-height:280px; overflow:auto; }.shared-party-member { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#1A1026; }.shared-party-member .profile-avatar { width:34px; height:34px; }.shared-party-member span { min-width:0; }.shared-party-member strong,.shared-party-member small,.shared-party-member em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.shared-party-member strong { font-size:10px; }.shared-party-member small { color:var(--muted); font-size:8px; }.shared-party-member em { color:#EBCFFF; font-size:8px; font-style:normal; font-weight:900; }.shared-party-member > div { display:flex; gap:4px; }.shared-party-member button,.shared-party-panel-options button { border:1px solid var(--line); border-radius:8px; padding:5px 7px; background:#2A1939; color:#E7D5FF; font-size:7px; cursor:pointer; }.shared-party-member button.danger { color:#FFB7C1; }.shared-party-panel-options { display:flex; flex-wrap:wrap; gap:7px; }
@media (max-width:780px) { .people-directory { min-height:420px; }.people-directory-grid { grid-template-columns:1fr; }.public-profile-hero { align-items:flex-start; flex-direction:column; }.public-profile-friend-btn { width:100%; }.friends-sidebar-title { padding-bottom:10px; } }
.friends-page .page-header { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.friends-back-search { flex:none; min-height:38px; }
.direct-message { overflow:hidden; }
.direct-message > .chat-attachment,.direct-message > .chat-game-invite,.direct-message > .chat-sparkly-gift { margin-bottom:4px; }
.chat-attachment { position:relative; overflow:hidden; width:min(100%,360px); border:1px solid rgba(205,177,255,.3); border-radius:13px; background-color:#17101F; background-image:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.chat-attachment img { display:block; width:100%; max-height:290px; object-fit:contain; }.chat-attachment.is-unavailable::after { content:"Image is still becoming available. Retrying stopped."; display:block; padding:10px; color:#DECFF4; font-size:8px; background:rgba(20,12,28,.8); }
.chat-attachment.is-pending,.chat-game-invite.is-pending { grid-column:1/-1; width:100%; }
.chat-attachment.is-pending button,.chat-game-invite.is-pending button { position:absolute; right:7px; top:7px; width:28px; height:28px; border:0; border-radius:9px; background:rgba(12,8,18,.78); color:#fff; cursor:pointer; }
.chat-game-invite { position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; align-items:center; width:min(100%,360px); min-height:70px; padding:8px; border:1px solid rgba(181,130,255,.35); border-radius:13px; background:linear-gradient(135deg,rgba(78,47,117,.65),rgba(22,14,33,.9)); color:#fff; }
.chat-game-cover { display:block; width:54px; height:54px; overflow:hidden; border-radius:9px; background:#20142D; }.chat-game-cover img { width:100%; height:100%; object-fit:cover; }
.chat-game-invite small,.chat-sparkly-gift small { display:block; color:#DBC4FF; font-size:7px; font-weight:900; letter-spacing:.08em; }.chat-game-invite strong,.chat-sparkly-gift strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.chat-game-invite em,.chat-sparkly-gift span { display:block; margin-top:3px; color:#D4C7E2; font-size:8px; font-style:normal; }
.chat-sparkly-gift { display:flex; align-items:center; gap:10px; width:min(100%,360px); padding:11px; border:1px solid rgba(190,144,255,.42); border-radius:14px; background:linear-gradient(135deg,rgba(135,80,229,.29),rgba(35,20,57,.85)); }.chat-sparkly-gift > i { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(210,181,255,.16); color:#E4C9FF; font-size:16px; }.chat-sparkly-gift > div { min-width:0; flex:1; }.chat-sparkly-gift button { min-height:30px; border:0; border-radius:9px; padding:0 9px; background:#D5B5FF; color:#241035; font-weight:900; font-size:8px; cursor:pointer; }.chat-sparkly-gift.redeemed { opacity:.68; filter:saturate(.55); }
.direct-message-form { flex-wrap:wrap; }.direct-message-form input:not([type=file]) { min-width:120px; }.direct-composer-icon { width:40px; height:40px; flex:none; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:12px; background:#21152E; color:#CEAAFF; cursor:pointer; }.direct-composer-icon:hover { border-color:rgba(205,177,255,.54); background:#302040; }
.direct-message-form.is-dropping-image { border-color:rgba(213,181,255,.85); background:rgba(100,61,155,.18); box-shadow:inset 0 0 0 1px rgba(213,181,255,.22); }
.direct-chat-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto; }.direct-chat-actions .ghost-btn { margin-left:0; }.chat-invite-choice-list { display:grid; gap:9px; margin-top:14px; }.chat-invite-choice { display:flex; align-items:center; gap:11px; width:100%; min-height:64px; border:1px solid var(--line-strong); border-radius:14px; padding:10px; background:#21152E; color:var(--text); text-align:left; cursor:pointer; }.chat-invite-choice:hover { border-color:#B582FF; background:#2B1B3D; }.chat-invite-choice > i { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:11px; background:rgba(181,130,255,.17); color:#D9C1FF; font-size:16px; }.chat-invite-choice span { display:grid; gap:3px; }.chat-invite-choice strong { font-size:10px; }.chat-invite-choice small { color:var(--muted); font-size:8px; }.shared-party-friends { display:grid; gap:7px; margin-top:12px; }.shared-party-friends > span { color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.shared-party-friend { display:flex; align-items:center; gap:9px; min-height:46px; padding:7px; border:1px solid var(--line); border-radius:11px; background:#191124; cursor:pointer; }.shared-party-friend input { accent-color:#B582FF; }.shared-party-friend > span { display:flex; align-items:center; gap:8px; min-width:0; }.shared-party-friend .avatar { width:30px; height:30px; }.shared-party-friend strong,.shared-party-friend small { display:block; }.shared-party-friend strong { font-size:9px; }.shared-party-friend small { margin-top:2px; color:var(--muted); font-size:7px; }
.party-composer { display:grid; gap:16px; }.party-composer > section { position:relative; display:grid; gap:7px; }.party-picker-trigger { width:100%; min-height:62px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px; border:1px solid rgba(203,169,255,.28); border-radius:14px; background:#1B1227; color:var(--text); text-align:left; cursor:pointer; }.party-picker-trigger img,.party-picker-trigger > i { width:38px; height:46px; display:grid; place-items:center; border-radius:9px; background:#342046; object-fit:cover; }.party-picker-trigger span { display:grid; gap:3px; }.party-picker-trigger strong { font-size:10px; }.party-picker-trigger small { color:var(--muted); font-size:8px; }.party-picker-menu { position:absolute; z-index:4; top:100%; left:0; right:0; max-height:240px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px; border:1px solid rgba(203,169,255,.32); border-radius:14px; background:#160E20; box-shadow:0 20px 46px rgba(0,0,0,.45); }.party-picker-option { min-width:0; display:grid; grid-template-columns:27px minmax(0,1fr); align-items:center; gap:7px; min-height:42px; padding:5px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }.party-picker-option:hover,.party-picker-option.selected { border-color:rgba(206,166,255,.45); background:rgba(181,130,255,.13); }.party-picker-option img,.party-picker-option i { width:27px; height:32px; display:grid; place-items:center; border-radius:6px; object-fit:cover; background:#38234D; }.party-picker-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }.party-time-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }.party-time-choice { min-height:40px; border:1px solid var(--line-strong); border-radius:10px; background:#1B1227; color:var(--muted); font-size:8px; font-weight:900; cursor:pointer; }.party-time-choice:hover,.party-time-choice.selected { border-color:#C9A8FF; background:linear-gradient(135deg,#A874FF,#7445C4); color:#201029; }.shared-party-friend { width:100%; border:1px solid var(--line); color:var(--text); text-align:left; }.shared-party-friend.selected { border-color:#B582FF; background:rgba(181,130,255,.16); }.shared-party-friend > i { margin-left:auto; color:#DABFFF; }
@media (max-width:620px) { .friends-page .page-header { align-items:flex-start; flex-direction:column; }.friends-back-search { width:100%; }.direct-message-form .primary-btn { flex:1; }.chat-attachment,.chat-game-invite,.chat-sparkly-gift { width:100%; } }
@media (max-width:430px) {
  .nana-package-v5 { grid-template-columns:1fr; }
  .nana-package-v5 .package-visual { grid-row:auto; width:100%; min-height:132px; }
  .nana-package-v5 .package-purchase-row { grid-template-columns:1fr; }
}

@media (min-width: 1500px) {
  .library-grid,
  .home-game-grid { grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); }
}
@media (max-width: 1120px) {
  .library-grid,
  .home-game-grid { grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
  .game-card-media { min-height: 145px; grid-template-columns: minmax(84px,32%) minmax(0,68%); }
  .game-shot-carousel { min-height: 145px; }
}
@media (max-width: 640px) {
  .library-grid,
  .home-game-grid { grid-template-columns: 1fr; }
  .game-card-media { min-height: 158px; }
  .game-shot-carousel { min-height: 158px; }
}

/* v1.3 — layered game cards: full screenshot canvas + floating portrait cover */
.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  background: linear-gradient(180deg,#181a1b 0%,#151718 100%);
  border-color: rgba(255,255,255,.075);
}
.game-card-media {
  position: relative;
  display: block;
  min-height: 158px;
  overflow: hidden;
  background: #110C18;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.game-card-media .game-shot-carousel {
  width: 100%;
  min-height: 158px;
}
.game-card-media .game-shot-carousel::after {
  background:
    linear-gradient(90deg,rgba(5,6,6,.22) 0%,rgba(5,6,6,.03) 42%,rgba(5,6,6,.08) 100%),
    linear-gradient(180deg,rgba(5,6,6,0) 50%,rgba(5,6,6,.5) 100%);
}
.game-card-media .game-cover-panel {
  position: absolute;
  z-index: 5;
  left: 11px;
  bottom: 11px;
  width: 72px;
  height: 104px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 12px;
  box-shadow: 0 13px 28px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.08) inset;
  background: #17191a;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.game-card-media .game-cover-panel::after {
  background: linear-gradient(180deg,transparent 72%,rgba(4,5,5,.2));
}
.game-card-media .game-cover-panel img {
  border-radius: 10px;
}
.game-card-media .game-shot-dots {
  left: auto;
  right: 10px;
  bottom: 9px;
  transform: none;
  background: rgba(8,9,9,.54);
  border-color: rgba(255,255,255,.1);
}
.card-favorite {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
  background: rgba(12,14,14,.66);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.card-favorite.active {
  color: #2c2403;
  background: var(--yellow);
  border-color: var(--yellow);
}
.game-card-body {
  padding: 11px 12px 12px;
}
.game-card-line {
  align-items: center;
}
.game-card h3 {
  font-size: 12px;
  letter-spacing: -.25px;
}
.game-meta {
  margin-top: 5px;
  font-size: 7.5px;
}
.game-card-foot {
  margin-top: 10px;
}
.card-play {
  width: auto;
  min-width: 66px;
  height: 30px;
  padding: 0 10px 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: -.05px;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.card-play i {
  display: inline-flex;
  font-size: 10px;
}
@media (hover:hover) and (pointer:fine) {
  .game-card:hover .game-cover-panel {
    transform: translateY(-2px) scale(1.015);
    border-color: rgba(181,130,255,.46);
    box-shadow: 0 16px 34px rgba(0,0,0,.54), 0 0 0 1px rgba(181,130,255,.07);
  }
  .card-play:hover {
    transform: translateY(-1px);
    background: #B582FF;
    box-shadow: 0 8px 18px rgba(181,130,255,.22);
  }
  .card-favorite:hover {
    color: #fff;
    border-color: rgba(255,255,255,.18);
  }
  .card-favorite.active:hover {
    color: #2c2403;
    border-color: var(--yellow);
  }
}
@media (max-width: 470px) {
  .game-card-media,
  .game-card-media .game-shot-carousel { min-height: 150px; }
  .game-card-media .game-cover-panel {
    width: 66px;
    height: 96px;
    left: 9px;
    bottom: 9px;
  }
  .game-card-media .game-shot-dots { right: 8px; bottom: 8px; }
  .card-play { min-width: 62px; height: 29px; padding-inline: 9px; }
}

.controls-page { display: grid; gap: 22px; padding-bottom: 36px; }
.controls-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.controls-page-head h1 { margin: 4px 0 0; font-size: clamp(30px,4vw,52px); letter-spacing: -2px; }
.controls-page-head p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.control-mode-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.control-mode-tab { min-width: 0; min-height: 78px; border: 1px solid var(--line); border-radius: 20px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; text-align: left; background: #17191a; cursor: pointer; transition: border-color .16s ease,background .16s ease,transform .16s ease; }
.control-mode-tab > span { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; display: grid; place-items: center; background: #252829; color: #aeb3af; font-size: 18px; }
.control-mode-tab > div { min-width: 0; }
.control-mode-tab strong, .control-mode-tab small { display: block; }
.control-mode-tab strong { font-size: 12px; }
.control-mode-tab small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.control-mode-tab.active { border-color: rgba(181,130,255,.35); background: linear-gradient(135deg,rgba(181,130,255,.105),rgba(181,130,255,.025)),#191b1c; }
.control-mode-tab.active > span { background: var(--yellow); color: #21172f; box-shadow: 0 10px 28px rgba(181,130,255,.12); }
@media (hover:hover) and (pointer:fine) { .control-mode-tab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.13); } .control-mode-tab.active:hover { border-color: rgba(181,130,255,.48); } }
.controls-mode-panel, .keyboard-mode-panel { border: 1px solid var(--line); border-radius: 26px; background: #17191a; overflow: hidden; }
.controls-mode-hero { min-height: 104px; padding: 18px 20px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg,rgba(181,130,255,.035),transparent 48%); }
.controls-mode-hero > div:nth-child(2) { min-width: 0; flex: 1; }
.controls-mode-hero h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.7px; }
.controls-mode-hero p { margin: 5px 0 0; max-width: 650px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.controls-mode-icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 19px; background: var(--yellow); color: #21172f; font-size: 23px; }
.controls-primary-btn { min-height: 43px; border: 0; border-radius: 14px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow); color: #21172f; font-size: 9px; font-weight: 900; cursor: pointer; }
.controls-primary-btn.detecting i { animation: controlSpin 1.1s linear infinite; }
@keyframes controlSpin { to { transform: rotate(360deg); } }
.controller-list { padding: 14px; display: grid; gap: 9px; }
.controller-card { min-height: 72px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; border-radius: 17px; background: #202324; border: 1px solid rgba(255,255,255,.045); }
.controller-card-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; background: #2a2d2e; color: var(--yellow); font-size: 18px; }
.controller-card-copy { min-width: 0; flex: 1; }
.controller-card-copy strong, .controller-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controller-card-copy strong { font-size: 10px; }
.controller-card-copy span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.controller-live { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(105,223,155,.1); color: #86e9ae; border: 1px solid rgba(105,223,155,.13); font-size: 8px; font-weight: 900; white-space: nowrap; }
.controller-empty { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: var(--muted); }
.controller-empty strong { color: var(--text); font-size: 13px; }
.controller-empty > span:last-child { font-size: 8px; }
.controller-pulse { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 23px; background: #232627; color: #858b87; font-size: 24px; box-shadow: 0 0 0 8px rgba(255,255,255,.018),0 0 0 16px rgba(255,255,255,.008); }
.player-edge-setting { min-height: 102px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 22px; background: #17191a; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.player-edge-copy { min-width: 0; display: flex; align-items: center; gap: 13px; }
.player-edge-copy h3 { margin: 3px 0 0; font-size: 13px; }
.player-edge-copy p { max-width: 650px; margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.player-edge-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; display: grid; place-items: center; background: #252829; color: var(--yellow); font-size: 18px; }
.edge-side-picker { flex: 0 0 auto; padding: 4px; display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; border-radius: 14px; background: #110C18; border: 1px solid var(--line); }
.edge-side-picker button { min-width: 82px; height: 38px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: #848a86; font-size: 8px; font-weight: 900; cursor: pointer; }
.edge-side-picker button.active { background: var(--yellow); color: #21172f; }
.touch-layout-workspace { min-height: 610px; display: grid; grid-template-columns: 210px minmax(0,1fr) 260px; border: 1px solid var(--line); border-radius: 27px; overflow: hidden; background: #151718; }
.touch-layout-sidebar { min-width: 0; padding: 14px; border-right: 1px solid var(--line); background: #131516; }
.touch-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 3px 12px; }
.touch-sidebar-head h3 { margin: 3px 0 0; font-size: 12px; }
.touch-add-layout { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; background: #202324; color: var(--yellow); cursor: pointer; font-size: 15px; }
.touch-layout-list { display: grid; gap: 7px; }
.touch-layout-item { min-width: 0; min-height: 61px; padding: 7px; border: 1px solid transparent; border-radius: 15px; display: grid; grid-template-columns: 40px minmax(0,1fr) 16px; align-items: center; gap: 8px; text-align: left; background: transparent; color: inherit; cursor: pointer; }
.touch-layout-item.active { border-color: rgba(181,130,255,.2); background: rgba(181,130,255,.08); }
.touch-layout-thumb { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #252829; color: #929894; }
.touch-layout-item.active .touch-layout-thumb { background: var(--yellow); color: #21172f; }
.touch-layout-item > span:nth-child(2) { min-width: 0; }
.touch-layout-item strong, .touch-layout-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touch-layout-item strong { font-size: 9px; }
.touch-layout-item small { margin-top: 3px; color: var(--muted); font-size: 6.5px; }
.touch-layout-item > i { color: #6f7572; }
.touch-layout-list-empty, .touch-default-placeholder { min-height: 82px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed rgba(255,255,255,.075); border-radius: 15px; color: #6f7572; text-align: center; font-size: 7px; }
.touch-defaults-block { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.touch-defaults-block > .home-kicker { display: block; margin: 0 3px 8px; }
.touch-editor-shell { min-width: 0; display: flex; flex-direction: column; background: #101213; }
.touch-editor-toolbar { min-height: 69px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: #17191a; }
.touch-editor-title { min-width: 0; }
.touch-editor-title span, .touch-editor-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touch-editor-title span { font-size: 11px; font-weight: 900; }
.touch-editor-title small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.touch-editor-actions { display: flex; align-items: center; gap: 6px; }
.touch-editor-actions button { height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; background: #232627; color: #d7dad7; font-size: 8px; font-weight: 800; cursor: pointer; }
.touch-editor-actions button:last-child { background: var(--yellow); border-color: transparent; color: #21172f; }
.touch-stage-wrap { flex: 1; min-height: 0; padding: 20px; display: grid; place-items: center; align-content: center; gap: 11px; }
.touch-stage { width: min(100%,820px); aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 21px; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(circle at 50% 50%,rgba(181,130,255,.035),transparent 25%),linear-gradient(145deg,#1d2021,#121415); box-shadow: inset 0 0 60px rgba(0,0,0,.28),0 20px 60px rgba(0,0,0,.25); touch-action: none; }
.touch-stage::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 32px 32px; pointer-events: none; }
.touch-axis { position: absolute; z-index: 1; pointer-events: none; background: rgba(181,130,255,.34); box-shadow: 0 0 16px rgba(181,130,255,.08); }
.touch-axis-x { left: 0; right: 0; top: 50%; height: 1px; }
.touch-axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.touch-center-dot { position: absolute; z-index: 2; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(181,130,255,.12); }
.touch-quadrant-label { position: absolute; z-index: 1; color: rgba(255,255,255,.17); font-size: 6px; font-weight: 900; letter-spacing: 1.1px; pointer-events: none; }
.q-tl { top: 10px; left: 12px; } .q-tr { top: 10px; right: 12px; } .q-bl { bottom: 10px; left: 12px; } .q-br { bottom: 10px; right: 12px; }
.touch-editor-control { position: absolute; z-index: 5; transform: translate(-50%,-50%); margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; background: rgba(22,24,24,.78); color: #fff; box-shadow: 0 9px 26px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); cursor: grab; touch-action: none; }
.touch-editor-control:active { cursor: grabbing; }
.touch-editor-control.selected { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(181,130,255,.14),0 9px 26px rgba(0,0,0,.3); }
.touch-editor-control.action-button > i { pointer-events: none; }
.touch-editor-control.joystick { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }
.touch-editor-control.joystick.selected { border-color: transparent; box-shadow: none; }
.touch-editor-control.joystick.selected .touch-joystick-ring { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(181,130,255,.14); }
.touch-control-key { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); max-width: 120px; padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.62); color: #bfc3c0; font-size: 5.5px; white-space: nowrap; pointer-events: none; }
.touch-joystick-ring { width: 72%; height: 72%; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.035); }
.touch-joystick-nub { width: 48%; height: 48%; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.26); box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.touch-stage-note { width: min(100%,820px); display: flex; align-items: flex-start; gap: 7px; color: #767c78; font-size: 7px; line-height: 1.5; }
.touch-stage-note i { margin-top: 1px; color: var(--yellow); }
.touch-editor-empty { flex: 1; min-height: 500px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 30px; }
.touch-editor-empty-icon { width: 68px; height: 68px; border-radius: 23px; display: grid; place-items: center; background: #202324; color: var(--yellow); font-size: 24px; }
.touch-editor-empty h2 { margin: 6px 0 0; font-size: 20px; }
.touch-editor-empty p { max-width: 380px; margin: 0 0 9px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.touch-inspector { min-width: 0; padding: 15px; border-left: 1px solid var(--line); background: #17191a; }
.touch-inspector-section h3 { margin: 3px 0 15px; font-size: 15px; }
.touch-inspector-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; color: var(--muted); }
.touch-inspector-empty > i { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: #242728; color: var(--yellow); font-size: 19px; }
.touch-inspector-empty strong { color: var(--text); font-size: 11px; }
.touch-inspector-empty span { max-width: 190px; font-size: 8px; line-height: 1.5; }
.control-field { display: grid; gap: 6px; margin-top: 11px; }
.control-field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #b7bbb8; font-size: 7px; font-weight: 800; }
.control-field b { color: var(--yellow); font-weight: 900; }
.control-field input[type="text"], .control-field select { width: 100%; height: 39px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: #101213; color: #f4f5f2; outline: 0; font-size: 8px; }
.control-field input[type="range"] { width: 100%; accent-color: var(--yellow); }
.touch-bind-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 8px; }
.uicon-entry { display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 6px; }
.uicon-entry > i { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; background: #252829; color: var(--yellow); }
.color-control { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 6px; }
.color-control input[type="color"] { width: 42px; height: 39px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #101213; }
.layout-id-note { margin-top: 10px; padding: 9px 10px; border-radius: 11px; display: flex; gap: 7px; background: rgba(181,130,255,.055); color: #8f958f; font-size: 7px; line-height: 1.5; }
.layout-id-note i { color: var(--yellow); margin-top: 1px; }
.control-danger-btn { width: 100%; height: 39px; margin-top: 15px; border: 1px solid rgba(255,110,114,.12); border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255,110,114,.06); color: #ff999c; font-size: 8px; font-weight: 900; cursor: pointer; }
.keyboard-control-grid { padding: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.keyboard-control-grid article { min-height: 180px; padding: 17px; border-radius: 20px; background: #202324; border: 1px solid rgba(255,255,255,.035); }
.keyboard-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #2a2d2e; color: var(--yellow); font-size: 18px; }
.keyboard-control-grid strong { display: block; margin-top: 13px; font-size: 12px; }
.keyboard-control-grid p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.keyboard-key-row { margin-top: 15px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.keyboard-key-row kbd { min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: #111314; border: 1px solid rgba(255,255,255,.09); color: #d9dcd8; font-family: inherit; font-size: 7px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.035); }
.mouse-preview { width: 80px; height: 86px; margin-top: 14px; position: relative; border-radius: 38px 38px 32px 32px; border: 2px solid #4a4f4c; background: #151718; }
.mouse-preview::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 52%; width: 1px; background: #4a4f4c; }
.mouse-preview span { position: absolute; left: 50%; top: 13px; width: 7px; height: 18px; transform: translateX(-50%); border-radius: 7px; background: var(--yellow); }
.mouse-preview i { position: absolute; right: -24px; bottom: 0; color: #8f9591; font-size: 20px; }
.stream-edge-zone { left: 0; right: auto; justify-content: flex-start; }
.stream-edge-handle { left: 0; right: auto; border-radius: 0 8px 8px 0; }
.stream-edge-actions { left: 12px; right: auto; transform: translate(-18px,-50%); }
.stream-stage.edge-right .stream-edge-zone { left: auto; right: 0; justify-content: flex-end; }
.stream-stage.edge-right .stream-edge-handle { left: auto; right: 0; border-radius: 8px 0 0 8px; }
.stream-stage.edge-right .stream-edge-actions { left: auto; right: 12px; transform: translate(18px,-50%); }
.stream-stage.edge-left .stream-edge-zone,.stream-stage.edge-right .stream-edge-zone { height:min(390px,calc(100% - 40px)); }
.stream-stage.edge-top .stream-edge-zone,.stream-stage.edge-bottom .stream-edge-zone { left:50%; right:auto; width:min(390px,calc(100% - 30px)); height:18px; transform:translateX(-50%); justify-content:center; }
.stream-stage.edge-top .stream-edge-zone { top:0; bottom:auto; align-items:flex-start; }
.stream-stage.edge-bottom .stream-edge-zone { top:auto; bottom:0; align-items:flex-end; }
.stream-stage.edge-top .stream-edge-handle,.stream-stage.edge-bottom .stream-edge-handle { left:50%; right:auto; width:74px; height:7px; transform:translateX(-50%); }
.stream-stage.edge-top .stream-edge-handle { top:0; bottom:auto; border-radius:0 0 8px 8px; }
.stream-stage.edge-bottom .stream-edge-handle { top:auto; bottom:0; border-radius:8px 8px 0 0; }
.stream-stage.edge-top .stream-edge-actions,.stream-stage.edge-bottom .stream-edge-actions { left:50%; right:auto; top:auto; width:auto; padding:6px; display:flex; grid-auto-flow:column; transform:translate(-50%,18px); border-radius:19px; }
.stream-stage.edge-top .stream-edge-actions { top:12px; bottom:auto; transform:translate(-50%,-18px); }
.stream-stage.edge-bottom .stream-edge-actions { top:auto; bottom:12px; }
.stream-stage.edge-top.hud-hidden .stream-edge-zone:hover,.stream-stage.edge-top.hud-hidden .stream-edge-zone:focus-within,.stream-stage.edge-top.hud-hidden .stream-edge-zone.edge-peek,
.stream-stage.edge-bottom.hud-hidden .stream-edge-zone:hover,.stream-stage.edge-bottom.hud-hidden .stream-edge-zone:focus-within,.stream-stage.edge-bottom.hud-hidden .stream-edge-zone.edge-peek { width:min(390px,calc(100% - 30px)); height:86px; }
.stream-stage.hud-hidden .stream-edge-zone:hover .stream-edge-actions,
.stream-stage.hud-hidden .stream-edge-zone:focus-within .stream-edge-actions,
.stream-stage.hud-hidden .stream-edge-zone.edge-peek .stream-edge-actions { transform: translate(0,-50%); }
.stream-stage.edge-top.hud-hidden .stream-edge-zone:hover .stream-edge-actions,.stream-stage.edge-top.hud-hidden .stream-edge-zone:focus-within .stream-edge-actions,.stream-stage.edge-top.hud-hidden .stream-edge-zone.edge-peek .stream-edge-actions,
.stream-stage.edge-bottom.hud-hidden .stream-edge-zone:hover .stream-edge-actions,.stream-stage.edge-bottom.hud-hidden .stream-edge-zone:focus-within .stream-edge-actions,.stream-stage.edge-bottom.hud-hidden .stream-edge-zone.edge-peek .stream-edge-actions { transform:translate(-50%,0); }
@media (max-width: 1180px) { .touch-layout-workspace { grid-template-columns: 180px minmax(0,1fr) 230px; } .touch-editor-actions button span { display: none; } .touch-editor-actions button { width: 39px; padding: 0; justify-content: center; } }
@media (max-width: 980px) { .touch-layout-workspace { grid-template-columns: 1fr; } .touch-layout-sidebar { border-right: 0; border-bottom: 1px solid var(--line); } .touch-layout-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .touch-defaults-block { display: none; } .touch-inspector { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 720px) { .control-mode-tabs { grid-template-columns: 1fr; } .control-mode-tab { min-height: 66px; } .controls-mode-hero { align-items: flex-start; flex-wrap: wrap; } .controls-mode-hero .controls-primary-btn { width: 100%; } .player-edge-setting { align-items: stretch; flex-direction: column; } .edge-side-picker { width: 100%; } .edge-side-picker button { min-width: 0; } .keyboard-control-grid { grid-template-columns: 1fr; } .touch-stage-wrap { padding: 12px; } .touch-layout-list { grid-template-columns: 1fr; } .touch-editor-toolbar { align-items: flex-start; } .touch-editor-actions { flex-wrap: wrap; justify-content: flex-end; } .mobile-nav { grid-template-columns: repeat(6,1fr); } .mobile-nav-item span { font-size: 6.5px; } }

.setting-switch-inline { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.setting-switch-inline > span { min-width: 30px; color: var(--muted); font-size: 8px; font-weight: 900; text-align: right; }
.touch-sidebar-actions { display: flex; align-items: center; gap: 5px; }
.controls-secondary-btn { min-height: 41px; border: 1px solid var(--line); border-radius: 13px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #232627; color: #d8dbd8; font-size: 8px; font-weight: 900; cursor: pointer; }
.touch-editor-empty .controls-secondary-btn { margin-top: 2px; }
.touch-axis[data-touch-axis] { z-index: 3; pointer-events: auto; background: rgba(181,130,255,.42); box-shadow: 0 0 18px rgba(181,130,255,.1); }
.touch-axis-horizontal { left: 0; right: 0; height: 1px; cursor: ns-resize; }
.touch-axis-vertical { top: 0; bottom: 0; width: 1px; cursor: ew-resize; }
.touch-axis[data-touch-axis] > span { position: absolute; display: block; border: 1px solid rgba(181,130,255,.5); background: #17191a; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.touch-axis-horizontal > span { width: 28px; height: 10px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 999px; }
.touch-axis-vertical > span { width: 10px; height: 28px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 999px; }
.touch-axis[data-touch-axis]:hover { background: rgba(181,130,255,.72); }
.touch-center-dot { z-index: 4; }
.axis-settings { margin-top: 12px; padding: 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 13px; background: #131516; }
.axis-settings .control-field:first-child { margin-top: 0; }
.layout-tags { display: grid; gap: 7px; }
.layout-tag-list { min-height: 28px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.layout-tag { min-height: 26px; border: 1px solid rgba(181,130,255,.16); border-radius: 999px; padding: 0 7px 0 9px; display: inline-flex; align-items: center; gap: 4px; background: rgba(181,130,255,.07); color: #e8ddb2; font-size: 7px; font-weight: 800; cursor: pointer; }
.layout-tag i { font-size: 9px; color: #969b97; }
.layout-tags-empty { color: #686e6a; font-size: 7px; }
.layout-tag-entry { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 6px; }
.layout-tag-entry input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: #101213; color: #f4f5f2; outline: 0; font-size: 8px; }
.layout-tag-entry button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; background: #252829; color: var(--yellow); cursor: pointer; }
.touch-toggle-list { margin-top: 13px; display: grid; gap: 7px; }
.touch-option-row { min-height: 57px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.04); border-radius: 13px; display: flex; align-items: center; gap: 9px; background: #101213; }
.touch-option-row > div { min-width: 0; flex: 1; }
.touch-option-row strong, .touch-option-row span { display: block; }
.touch-option-row strong { font-size: 8px; }
.touch-option-row span { margin-top: 3px; color: var(--muted); font-size: 6.5px; line-height: 1.4; }
.touch-control-mode-badge { position: absolute; z-index: 2; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(181,130,255,.3); background: #17191a; color: var(--yellow); font-size: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.28); pointer-events: none; }
.touch-control-mode-badge.repeat { left: -8px; right: auto; }
.touch-control-mode-badge.toggle { right: -8px; }
.touch-control-mode-badge.passthrough { top: auto; bottom: -8px; left: auto; right: -8px; background: #202324; color: #f7d94c; }
.custom-color-picker { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #101213; }
.color-picker-canvas { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 10px; }
.color-hue-wheel { width: 82px; height: 82px; position: relative; border-radius: 50%; background: conic-gradient(from 0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),0 7px 20px rgba(0,0,0,.18); cursor: crosshair; touch-action: none; }
.color-wheel-center { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%,-50%); border: 5px solid #161819; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 1px rgba(0,0,0,.22); pointer-events: none; }
.color-hue-marker { position: absolute; z-index: 3; width: 10px; height: 10px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 1px 5px rgba(0,0,0,.65); pointer-events: none; }
.color-sv-pad { min-width: 0; height: 82px; position: relative; border-radius: 11px; overflow: hidden; background: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,#ff0000); box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); cursor: crosshair; touch-action: none; }
.color-sv-marker { position: absolute; width: 11px; height: 11px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.75); pointer-events: none; }
.color-picker-value-row { margin-top: 8px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; }
.color-picker-swatch { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.color-picker-value-row input { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; background: #17191a; color: var(--text); outline: 0; font-size: 8px; text-transform: uppercase; }
@media (max-width: 1180px) { .color-picker-canvas { grid-template-columns: 74px minmax(0,1fr); } .color-hue-wheel { width: 70px; height: 70px; } .color-wheel-center { width: 40px; height: 40px; } .color-sv-pad { height: 70px; } }
@media (max-width: 620px) { .setting-switch-inline { width: 100%; justify-content: flex-end; } }
.layout-tag-match-note { display: flex; align-items: flex-start; gap: 6px; color: #787e7a; font-size: 6.5px; line-height: 1.45; }
.layout-tag-match-note i { margin-top: 1px; color: var(--yellow); }

/* v2.1 controls refinements */
.cb-dropdown { position: relative; min-width: 0; }
.cb-dropdown-trigger { width: 100%; height: 39px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; padding: 0 10px 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(180deg,#1b1e1f,#141617); color: #eef0ec; font: inherit; font-size: 8px; font-weight: 800; text-align: left; cursor: pointer; outline: 0; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.cb-dropdown-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-dropdown-trigger > i { flex: 0 0 auto; color: #848b86; font-size: 13px; transition: transform .16s ease,color .16s ease; }
.cb-dropdown.open .cb-dropdown-trigger { border-color: rgba(181,130,255,.38); background: #1c1f20; box-shadow: 0 0 0 3px rgba(181,130,255,.07); }
.cb-dropdown.open .cb-dropdown-trigger > i { transform: rotate(180deg); color: var(--yellow); }
.cb-dropdown-menu { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 6px); max-height: 230px; overflow: auto; padding: 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(20,22,23,.98); box-shadow: 0 18px 48px rgba(0,0,0,.42); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity .14s ease,transform .14s ease,visibility .14s ease; }
.cb-dropdown.open .cb-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cb-dropdown-option { width: 100%; min-height: 34px; border: 0; border-radius: 9px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; color: #b7bcb8; font: inherit; font-size: 8px; font-weight: 800; text-align: left; cursor: pointer; }
.cb-dropdown-option i { color: var(--yellow); font-size: 10px; }
.cb-dropdown-option.selected { background: rgba(181,130,255,.09); color: #fff4c0; }
@media (hover:hover) and (pointer:fine) { .cb-dropdown-option:hover { background: #2a2d2e; color: #fff; } .cb-dropdown-trigger:hover { border-color: rgba(255,255,255,.15); } }

.native-select-source { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; border:0!important; white-space:nowrap!important; }
.native-select-shell { position:relative; min-width:0; display:inline-flex; vertical-align:middle; }
.native-select-trigger { width:100%; min-width:0; height:42px; padding:0 11px 0 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(255,255,255,.085); border-radius:12px; background:linear-gradient(180deg,#1b1e1f,#111314); color:#eef0ec; font:inherit; font-size:9px; font-weight:800; text-align:left; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.native-select-trigger > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.native-select-trigger.has-option-card { gap:9px; }
.native-select-trigger-copy { display:flex; align-items:center; gap:8px; }
.native-select-trigger-card-icon { width:27px; height:27px; flex:0 0 27px; position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(181,130,255,.32); border-radius:9px; background:linear-gradient(145deg,rgba(181,130,255,.24),rgba(76,56,4,.12)); color:#ffe376; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.native-select-trigger-card-icon > i { position:relative; z-index:2; font-size:12px; }
.native-select-trigger-card-icon > img { position:relative; z-index:2; width:19px; height:19px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.native-select-trigger-card-icon > b,.native-select-trigger-card-icon::before { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.45; animation:native-option-float 2.2s ease-in-out infinite; }
.native-select-trigger-card-icon::before { left:5px; bottom:5px; animation-delay:-.65s; }
.native-select-trigger-card-icon > b { right:5px; top:5px; animation-delay:-1.25s; }
.native-select-trigger-card-icon.fast { border-color:rgba(91,209,255,.42); background:linear-gradient(145deg,rgba(52,186,255,.3),rgba(12,72,117,.18)); color:#9ce8ff; }
.native-select-trigger-card-icon.quality { border-color:rgba(198,129,255,.42); background:linear-gradient(145deg,rgba(189,107,255,.3),rgba(76,31,115,.18)); color:#e1baff; }
.native-select-trigger-card-icon.ready { border-color:rgba(111,235,165,.42); background:linear-gradient(145deg,rgba(72,207,126,.28),rgba(18,82,47,.18)); color:#a8f6c5; }
.native-select-trigger-card-icon.experimental { border-color:rgba(255,153,100,.34); background:linear-gradient(145deg,rgba(237,100,53,.24),rgba(100,38,17,.16)); color:#ffc0a0; }
.native-select-trigger-card-icon.stah { border-color:rgba(109,211,255,.38); background:linear-gradient(145deg,rgba(42,148,222,.3),rgba(18,48,94,.18)); color:#b8edff; }
.native-select-trigger-card-icon.splash { border-color:rgba(214,142,255,.52); background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.34),transparent 26%),linear-gradient(145deg,rgba(184,64,255,.52),rgba(49,20,104,.35)); color:#f3d3ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 18px rgba(191,82,255,.22); }
.native-select-trigger-card-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.native-select-trigger > i { flex:0 0 auto; color:#8c928e; font-size:13px; transition:transform .16s ease,color .16s ease; }
.native-select-shell.open .native-select-trigger { border-color:rgba(181,130,255,.42); background:#202323; box-shadow:0 0 0 3px rgba(181,130,255,.075); }
.native-select-shell.open .native-select-trigger > i { transform:rotate(180deg); color:var(--yellow); }
.native-select-trigger:disabled { opacity:.5; cursor:not-allowed; }
.native-select-menu { position:fixed; z-index:10000; max-height:min(310px,calc(100dvh - 20px)); overflow:auto; padding:6px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(18,21,20,.985); box-shadow:0 24px 70px rgba(0,0,0,.56); backdrop-filter:blur(24px); opacity:0; visibility:hidden; transform:translateY(-5px) scale(.985); transform-origin:top center; transition:opacity .14s ease,transform .14s ease,visibility .14s ease; scrollbar-color:var(--yellow) #272a29; scrollbar-width:thin; }
.native-select-menu.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.native-select-group { padding:9px 9px 5px; color:#777e79; font-size:6.5px; font-weight:950; letter-spacing:1px; text-transform:uppercase; }
.native-select-option { width:100%; min-height:38px; padding:0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; border-radius:10px; background:transparent; color:#b9beba; font:inherit; font-size:8px; font-weight:800; text-align:left; cursor:pointer; }
.native-select-option > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.native-select-option > i { flex:0 0 auto; color:var(--yellow); font-size:10px; }
.native-select-option.selected { background:rgba(181,130,255,.105); color:#fff2b7; }
.native-select-option:disabled { opacity:.38; cursor:not-allowed; }
.native-select-option-card { min-height:62px; justify-content:flex-start; padding:7px 9px; gap:10px; }
.native-select-option-card-icon { width:42px; height:42px; flex:0 0 auto; position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(181,130,255,.34); border-radius:12px; background:linear-gradient(145deg,rgba(181,130,255,.26),rgba(76,56,4,.13)); color:#ffe376; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 7px 18px rgba(0,0,0,.18); }
.native-select-option-card-icon > i { position:relative; z-index:2; color:inherit; font-size:17px; }
.native-select-option-card-icon > img { position:relative; z-index:2; width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.native-select-option-card-icon > b,.native-select-option-card-icon::before,.native-select-option-card-icon::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.44; animation:native-option-float 2.2s ease-in-out infinite; }
.native-select-option-card-icon::before { left:8px; bottom:8px; animation-delay:-.7s; }
.native-select-option-card-icon::after { right:8px; top:9px; animation-delay:-1.35s; }
.native-select-option-card-icon > b { right:12px; bottom:8px; animation-delay:-.25s; }
.native-select-option-card-copy { min-width:0; display:grid; gap:3px; }
.native-select-option-card-copy strong { overflow:hidden; color:#f5f7f4; font-size:9px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.native-select-option-card-copy small { overflow:hidden; color:#8f9891; font-size:6.5px; font-weight:700; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.native-select-option-card-note { display:block; overflow:hidden; margin-top:1px; background:linear-gradient(90deg,#ffba82,#e7a6ff 48%,#8fd5ff); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:5.8px; font-style:normal; font-weight:900; letter-spacing:.045em; line-height:1.25; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.native-select-option-card.fast .native-select-option-card-icon { border-color:rgba(91,209,255,.42); background:linear-gradient(145deg,rgba(52,186,255,.3),rgba(12,72,117,.18)); color:#9ce8ff; }
.native-select-option-card.quality .native-select-option-card-icon { border-color:rgba(198,129,255,.42); background:linear-gradient(145deg,rgba(189,107,255,.3),rgba(76,31,115,.18)); color:#e1baff; }
.native-select-option-card.ready .native-select-option-card-icon { border-color:rgba(111,235,165,.42); background:linear-gradient(145deg,rgba(72,207,126,.28),rgba(18,82,47,.18)); color:#a8f6c5; }
.native-select-option-card.experimental .native-select-option-card-icon { border-color:rgba(255,153,100,.34); background:linear-gradient(145deg,rgba(237,100,53,.24),rgba(100,38,17,.16)); color:#ffc0a0; }
.native-select-option-card.stah .native-select-option-card-icon { border-color:rgba(109,211,255,.42); background:linear-gradient(145deg,rgba(42,148,222,.34),rgba(18,48,94,.2)); color:#b8edff; }
.native-select-option-card.splash .native-select-option-card-icon { border-color:rgba(214,142,255,.56); background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.36),transparent 26%),linear-gradient(145deg,rgba(184,64,255,.58),rgba(49,20,104,.38)); color:#f3d3ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 20px rgba(191,82,255,.25); }
.native-select-option-card-badge { display:inline-flex; width:max-content; margin-top:1px; padding:2px 5px; border:1px solid rgba(236,177,255,.62); border-radius:99px; background:linear-gradient(115deg,#9c35e7,#e290ff 48%,#7bd9ff); color:#21102d; font-size:5.7px; font-style:normal; font-weight:1000; letter-spacing:.14em; line-height:1; text-transform:uppercase; box-shadow:0 0 13px rgba(202,89,255,.3); animation:native-splash-badge 1.8s ease-in-out infinite; }
@keyframes native-splash-badge { 50% { transform:translateY(-1px); filter:brightness(1.16); box-shadow:0 0 18px rgba(202,89,255,.5); } }
.native-select-option-card.selected .native-select-option-card-copy strong { color:#fff7cf; }
@keyframes native-option-float { 0%,100% { transform:translateY(2px) scale(.75); opacity:.18; } 50% { transform:translateY(-5px) scale(1); opacity:.7; } }
@media (hover:hover) and (pointer:fine) { .native-select-trigger:hover:not(:disabled) { border-color:rgba(255,255,255,.16); background:#202323; } .native-select-option:hover:not(:disabled) { background:#292d2b; color:#fff; } }
.settings-form-row > .native-select-shell { min-width:168px; }
.game-setting-picker > .native-select-shell,.keybind-row > .native-select-shell,.player-touch-settings-field > .native-select-shell { width:100%; }
.keybind-row .native-select-trigger { height:36px; }
.library-selects > .native-select-shell { min-width:145px; }
.library-selects > .native-select-shell .native-select-trigger { height:39px; font-size:10px; }
.stream-input-mode > .native-select-shell { flex:1; min-width:0; }
.stream-input-mode .native-select-trigger { height:34px; padding:0 4px; border:0; background:transparent; box-shadow:none; font-size:8px; }
.player-touch-settings-field .native-select-trigger { min-height:42px; background:#202324; }

/* Login viewport fitting and compact-device layout */
.login-screen,.account-login-screen { min-height:0; height:100dvh; max-height:100dvh; overflow:hidden; padding:clamp(8px,2.4vh,24px) clamp(10px,3vw,58px); }
.app-shell.account-login-view { min-height:0; padding-bottom:0; }
.account-login-view .main-column { min-height:0; padding-bottom:0; }
.account-login-shell,.account-login-screen .account-login-shell { min-height:0; height:min(720px,calc(100dvh - clamp(16px,4.8vh,48px))); max-height:calc(100dvh - clamp(16px,4.8vh,48px)); }
.login-panel,.login-auth-column,.login-showcase { min-height:0; }
@media (max-width:1100px) and (min-width:721px) {
  .login-screen { overflow:hidden; }
  .account-login-shell { grid-template-columns:68px minmax(0,1fr); }
  .account-login-sidebar { padding:18px 6px 12px 0; gap:12px; }
  .login-panel { grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr); }
  .login-auth-column { min-height:0; padding:clamp(20px,3vw,38px); overflow:hidden; }
  .login-brand { width:205px; height:68px; margin-bottom:clamp(12px,2vh,24px); }
  .login-brand-icon { width:205px; height:72px; }
  .login-heading { margin-bottom:18px; }
  .login-heading h1 { font-size:clamp(30px,4vw,42px); }
  .login-form { gap:12px; }
  .login-footer { padding-top:14px; }
  .login-showcase { min-height:0; }
  .login-game-rows { inset:72px -80px 220px; }
  .login-game-tile { width:105px; height:140px; }
  .login-showcase-copy { left:24px; right:24px; bottom:22px; }
  .login-showcase-copy h2 { font-size:clamp(26px,4vw,36px); }
}
/* Tablets in landscape can have a wide viewport but very little usable page
   height after browser chrome. Compact the card itself: the login must remain
   a single composed screen, never an inner scrolling panel. */
@media (max-height:920px) and (min-width:721px) {
  .login-auth-column { overflow:hidden; padding:clamp(14px,2.6vh,24px) clamp(20px,3vw,42px); }
  .login-brand { height:58px; margin-bottom:clamp(6px,1.2vh,12px); }
  .login-brand-icon { height:62px; }
  .login-heading { margin-bottom:10px; }
  .login-heading h1 { font-size:clamp(28px,3.25vw,38px); margin-bottom:4px; }
  .login-heading p { font-size:10px; line-height:1.35; }
  .login-form { gap:8px; }
  .login-field-group { gap:4px; }
  .field-label { font-size:9px; }
  .field-wrap { height:42px; }
  .login-btn { min-height:42px; }
  .login-divider { margin:1px 0; }
  .provider-login { min-height:38px; font-size:9px; }
  .quick-login-row { gap:7px; }
  .login-footer { padding-top:6px; }
  .login-host-note { font-size:8px; }
  .login-legal-links { margin-top:5px; }
  .login-game-rows { inset:58px -80px 186px; }
  .login-game-tile { width:94px; height:124px; }
  .login-showcase-copy { bottom:16px; }
  .login-showcase-copy h2 { font-size:clamp(25px,3.6vw,34px); margin-block:5px; }
  .login-showcase-copy p { font-size:10px; line-height:1.4; }
  .login-feature-row { margin-top:7px; }
}
@media (max-height:760px) and (min-width:721px) {
  .login-auth-column { padding-top:20px; padding-bottom:18px; }
  .login-brand { height:54px; margin-bottom:8px; }
  .login-brand-icon { height:62px; }
  .login-heading { margin-bottom:13px; }
  .login-heading h1 { font-size:32px; margin-bottom:5px; }
  .login-form { gap:9px; }
  .login-field-group { gap:5px; }
  .field-wrap { height:46px; }
  .login-btn { min-height:46px; }
  .provider-login { min-height:42px; font-size:10px; }
  .login-footer { padding-top:9px; }
  .login-legal-links { margin-top:7px; }
  .login-game-rows { inset:60px -80px 190px; }
  .login-game-tile { width:94px; height:124px; }
  .login-showcase-copy { bottom:18px; }
  .login-showcase-copy h2 { font-size:29px; margin-block:5px; }
  .login-feature-row { margin-top:7px; }
}
@media (max-width:720px) {
  .login-screen,.account-login-screen { padding:8px; }
  .account-login-shell,.account-login-screen .account-login-shell { width:min(500px,100%); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); grid-template-columns:1fr; grid-template-rows:58px minmax(0,1fr); padding:6px; border-radius:25px; }
  .account-login-sidebar { padding:0 6px 6px; flex-direction:row; justify-content:space-between; gap:8px; border-right:0; border-bottom:1px solid rgba(255,255,255,.065); }
  .account-login-nav { width:auto; padding:4px; display:flex; gap:4px; border-radius:14px; }
  .account-login-nav-bottom { margin-top:0; margin-left:auto; }
  .account-login-nav button,.account-login-nav a { width:36px; height:36px; border-radius:10px; }
  .login-panel { min-height:0; grid-template-columns:1fr; border-radius:0 0 19px 19px; overflow:hidden; }
  .login-auth-column { min-height:0; padding:clamp(14px,3.5vh,26px) clamp(16px,5vw,28px) 14px; }
  .login-showcase { display:none; }
  .login-brand { width:190px; height:58px; margin-bottom:clamp(8px,2vh,18px); overflow:visible; }
  .login-brand-icon { position:static; width:190px; height:64px; max-width:100%; object-fit:contain; }
  .login-heading { margin-bottom:14px; }
  .login-heading h1 { font-size:clamp(29px,9vw,38px); }
  .login-heading p { font-size:11px; }
  .login-form { gap:10px; }
  .login-field-group { gap:5px; }
  .field-wrap { height:48px; }
  .login-btn { min-height:48px; }
  .quick-login-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .provider-login { min-width:0; min-height:44px; padding:0 5px; gap:5px; font-size:9px; }
  .provider-icon { width:17px; height:17px; }
  .login-footer { padding-top:10px; }
  .login-host-note { font-size:9px; }
  .login-legal-links { margin-top:7px; }
}
@media (max-width:390px), (max-height:600px) and (max-width:720px) {
  .account-login-shell,.account-login-screen .account-login-shell { grid-template-rows:50px minmax(0,1fr); }
  .account-login-nav button,.account-login-nav a { width:32px; height:32px; }
  .login-auth-column { padding-top:9px; padding-bottom:8px; }
  .login-brand { height:42px; margin-bottom:3px; }
  .login-brand-icon { height:50px; }
  .login-heading { margin-bottom:8px; }
  .login-heading h1 { font-size:27px; margin-bottom:3px; }
  .login-heading p { font-size:9px; }
  .login-form { gap:7px; }
  .field-wrap { height:42px; }
  .login-btn { min-height:42px; }
  .provider-login { min-height:38px; }
  .login-footer { padding-top:5px; }
  .login-host-note { display:none; }
}

.controller-device-strip { padding: 12px 14px; display: grid; gap: 7px; border-bottom: 1px solid var(--line); background: #131516; }
.controller-device { width: 100%; min-width: 0; min-height: 62px; border: 1px solid transparent; border-radius: 15px; padding: 8px 10px; display: grid; grid-template-columns: 44px minmax(0,1fr) 16px; align-items: center; gap: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.controller-device.active { border-color: rgba(181,130,255,.22); background: rgba(181,130,255,.065); }
.controller-device > span:nth-child(2) { min-width: 0; }
.controller-device strong,.controller-device small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controller-device strong { font-size: 9px; }
.controller-device small { margin-top: 3px; color: var(--muted); font-size: 6.5px; }
.controller-device > i { color: #747a76; }
.controller-config { padding: 16px; }
.controller-config-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.controller-config-head h3 { margin: 3px 0 0; font-size: 16px; }
.controller-config-head p { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.controller-live-panel { margin-bottom: 12px; padding: 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 15px; background: #101213; }
.controller-axis-live { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 8px; }
.controller-axis-live > div { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; align-items: center; gap: 7px; }
.controller-axis-live span,.controller-axis-live small { color: #8b918d; font-size: 6.5px; }
.controller-axis-live small { text-align: right; font-variant-numeric: tabular-nums; }
.axis-meter { height: 6px; position: relative; overflow: hidden; border-radius: 999px; background: #26292a; }
.axis-meter::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.17); }
.axis-meter b { position: absolute; top: 0; left: 50%; width: 0; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .04s linear,left .04s linear; }
.controller-axis-empty { grid-column: 1/-1; padding: 4px; }
.controller-bind-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.controller-bind-row { min-width: 0; min-height: 62px; padding: 8px; display: grid; grid-template-columns: 38px minmax(0,1fr) minmax(120px,170px); align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.04); border-radius: 14px; background: #202324; }
.controller-bind-live { width: 38px; height: 38px; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: #2b2e2f; color: #9ba19d; font-size: 8px; font-weight: 900; }
.controller-bind-live::before { content:""; position:absolute; inset:auto 0 0; height:calc(var(--button-pressure,0) * 100%); background:rgba(181,130,255,.22); transition:height .04s linear; }
.controller-bind-live span { position: relative; z-index: 1; }
.controller-bind-live.pressed { background: var(--yellow); color:#21172f; box-shadow:0 0 0 3px rgba(181,130,255,.09); }
.controller-bind-copy { min-width: 0; }
.controller-bind-copy strong,.controller-bind-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.controller-bind-copy strong { font-size:8px; }
.controller-bind-copy small { margin-top:3px; color:var(--muted); font-size:6.5px; }
.controller-bind-row .cb-dropdown-menu { left:auto; right:0; width:max(100%,185px); }

.keyboard-lab { padding: 16px; }
.keyboard-lab-head { margin-bottom: 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.keyboard-lab-head strong { display:block; font-size:11px; }
.keyboard-lab-head span { display:block; margin-top:3px; color:var(--muted); font-size:7px; }
.keyboard-pressed-list { max-width: 55%; min-height: 30px; padding: 8px 10px; border:1px solid rgba(255,255,255,.045); border-radius:10px; background:#101213; color:#aaaFAA; font-size:7px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.keyboard-visual,.player-keyboard-visual { display:grid; gap:5px; }
.keyboard-row { min-width:0; display:flex; gap:5px; }
.keyboard-key { min-width:0; flex:var(--key-grow,1) 1 0; height:44px; border:1px solid rgba(255,255,255,.075); border-radius:9px; padding:3px; display:grid; place-items:center; align-content:center; gap:2px; background:linear-gradient(180deg,#292c2d,#1d2021); color:#e7e9e5; font:inherit; cursor:default; box-shadow:inset 0 -3px 0 rgba(0,0,0,.22); transition:transform .05s ease,background .08s ease,color .08s ease,border-color .08s ease; }
.keyboard-key span { font-size:7px; font-weight:900; }
.keyboard-key small { color:#777e79; font-size:4.8px; line-height:1; }
.keyboard-key.pressed { transform:translateY(2px); background:var(--yellow); color:#21172f; border-color:var(--yellow); box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 0 0 2px rgba(181,130,255,.09); }
.keyboard-key.pressed small { color:#5b4d0e; }
.keyboard-mouse-card { margin-top:12px; padding:12px; display:flex; align-items:center; gap:13px; border:1px solid rgba(255,255,255,.045); border-radius:15px; background:#101213; }
.keyboard-mouse-card > div:last-child { min-width:0; }
.keyboard-mouse-card strong,.keyboard-mouse-card span { display:block; }
.keyboard-mouse-card strong { font-size:9px; }
.keyboard-mouse-card span { margin-top:3px; color:var(--muted); font-size:7px; line-height:1.45; }
.keyboard-mouse-visual { width:58px; height:76px; flex:0 0 58px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:27px 27px 22px 22px; background:#252829; color:var(--yellow); display:grid; place-items:center; cursor:pointer; }
.keyboard-mouse-visual > span { position:absolute; top:0; width:50%; height:34px; background:#303435; border-bottom:1px solid rgba(255,255,255,.06); }
.keyboard-mouse-visual > span:first-child { left:0; border-right:1px solid rgba(255,255,255,.06); }
.keyboard-mouse-visual > span:nth-child(2) { right:0; }
.keyboard-mouse-visual > span.pressed { background:var(--yellow); }
.keyboard-mouse-visual i { position:relative; z-index:2; margin-top:17px; font-size:18px; }

.touch-control-mode-badge.keyboard { top:-8px; left:50%; right:auto; transform:translateX(-50%); background:#202324; color:var(--yellow); }
.layout-id-note.compact { margin:0 0 12px; }

.player-touch-keyboard { position:absolute; z-index:30; left:50%; bottom:92px; width:min(920px,calc(100% - 32px)); max-height:min(68dvh,520px); padding:10px; overflow:auto; transform:translateX(-50%); border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(13,15,14,.93); box-shadow:0 28px 80px rgba(0,0,0,.48); backdrop-filter:blur(24px); scrollbar-color:var(--yellow) #272a29; scrollbar-width:thin; }
.player-touch-keyboard.hidden { display:none; }
.player-touch-keyboard-head { min-height:42px; padding:0 2px 8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.player-touch-keyboard-head strong { display:block; margin-top:2px; font-size:12px; }
.player-touch-keyboard-head button { width:36px; height:36px; border:1px solid rgba(255,255,255,.08); border-radius:11px; display:grid; place-items:center; background:#202324; color:#fff; cursor:pointer; }
.touch-only-player-action { display:none; }
.stream-stage.touch-input-mode .touch-only-player-action { display:grid; }
.player-touch-settings { position:absolute; z-index:24; right:20px; bottom:92px; width:min(350px,calc(100% - 32px)); padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(13,15,14,.94); box-shadow:0 24px 72px rgba(0,0,0,.48); backdrop-filter:blur(24px); touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.player-touch-settings.hidden { display:none; }
.player-touch-settings-head { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-touch-settings-head > div { display:grid; gap:2px; }
.player-touch-settings-head strong { font-size:12px; }
.player-touch-settings-head button { width:36px; height:36px; border:1px solid rgba(255,255,255,.08); border-radius:11px; display:grid; place-items:center; background:#202324; color:#fff; cursor:pointer; }
.player-touch-settings-field { margin-top:12px; display:grid; gap:7px; color:#daddd9; font-size:8px; font-weight:800; }
.player-touch-settings-field > span { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.player-touch-settings-field b { color:var(--yellow); font-size:8px; }
.player-touch-settings-field select { width:100%; min-height:42px; padding:0 11px; border:1px solid rgba(255,255,255,.08); border-radius:12px; outline:0; background:#202324; color:#f4f5f2; font-size:8px; font-weight:750; }
.player-touch-settings-field select option,.player-touch-settings-field select optgroup { background:#202324; color:#f4f5f2; }
.player-touch-settings-field input[type="range"] { width:100%; accent-color:var(--yellow); touch-action:pan-x; }
.player-touch-setting-row { margin-top:12px; min-height:56px; padding:9px 10px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.065); border-radius:13px; background:rgba(255,255,255,.025); }
.player-touch-setting-row > div { min-width:0; display:grid; gap:3px; }
.player-touch-setting-row strong { font-size:8px; }
.player-touch-setting-row span { color:#929894; font-size:6.5px; line-height:1.45; }
.player-touch-layout-status { min-height:16px; margin:11px 1px 0; color:#9da29e; font-size:7px; line-height:1.45; }
.player-touch-layer { position:absolute; inset:0; z-index:7; pointer-events:none; }
.player-touch-layout { position:absolute; inset:0; z-index:7; pointer-events:none; touch-action:none; }
.player-touch-control { position:absolute; z-index:2; margin:0; padding:0; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); background:rgba(13,15,14,.48); color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035); backdrop-filter:blur(8px); pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
.player-touch-control.pressed,.player-touch-control.latched { border-color:rgba(181,130,255,.8); background:rgba(181,130,255,.28); }
.player-touch-control.pressed:not(.player-touch-action),.player-touch-control.latched:not(.player-touch-action) { transform:translate(-50%,-50%) scale(.94); }
.player-touch-action.keyboard-action { border-radius:22px; }
.player-touch-joystick { border:0; border-radius:50%; background:transparent; box-shadow:none; backdrop-filter:none; }
.player-touch-joystick.pressed,.player-touch-joystick.latched { border-color:transparent; background:transparent; }
.player-touch-joystick .touch-joystick-nub { transition:transform .04s linear; }
.player-layout-name { position:absolute; left:50%; top:72px; transform:translateX(-50%); min-height:27px; padding:0 9px; border-radius:9px; display:inline-flex; align-items:center; gap:6px; background:rgba(13,15,14,.5); color:rgba(255,255,255,.62); font-size:7px; font-weight:800; pointer-events:none; backdrop-filter:blur(8px); animation:playerLayoutNotice 4.2s ease forwards; }
@keyframes playerLayoutNotice { 0%,70% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
.touch-default-item { min-height:54px; margin-top:7px; padding:8px 9px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; background:#17191a; }
.touch-default-item > i { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--yellow-soft); color:var(--yellow); }
.touch-default-item span { min-width:0; display:grid; gap:3px; }
.touch-default-item strong,.touch-default-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.touch-default-item strong { color:var(--text); font-size:8px; }
.touch-default-item small { color:var(--muted); font-size:6px; }
.audio-refresh-devices { margin-top:14px; }
.player-keyboard-visual { width:100%; min-width:0; gap:clamp(2px,.55vw,5px); }
.player-keyboard-visual .keyboard-row { gap:clamp(2px,.55vw,5px); }
.player-keyboard-visual .keyboard-key { height:clamp(32px,5.2vw,42px); min-width:0; padding:clamp(1px,.4vw,3px); border-radius:clamp(5px,1vw,9px); cursor:pointer; user-select:none; touch-action:none; }
.player-keyboard-visual .keyboard-key span { font-size:clamp(4.5px,1.3vw,7px); }
.player-keyboard-visual .keyboard-key small { display:none; }

@media (max-width: 980px) {
  .player-volume-control { width:130px; }
  .stream-hud-status .hud-stat:nth-child(2) { display:none; }
  .controller-bind-grid { grid-template-columns:1fr; }
  .controller-bind-row { grid-template-columns:38px minmax(0,1fr) minmax(116px,155px); }
  .keyboard-key { height:39px; }
  .keyboard-key small { display:none; }
}
@media (max-width: 700px) {
  .stream-hud { align-items:stretch; overflow-x:auto; scrollbar-width:none; }
  .stream-hud::-webkit-scrollbar { display:none; }
  .stream-hud-status,.stream-hud-actions { flex:0 0 auto; }
  .stream-hud-status { display:grid; grid-template-columns:auto minmax(124px,1fr); }
  .stream-hud-status .hud-stat:nth-child(2) { display:none; }
  .stream-input-mode { min-width:0; }
  .controller-config-head { flex-direction:column; }
  .controller-config-head .controls-secondary-btn { width:100%; }
  .controller-bind-row { grid-template-columns:34px minmax(0,1fr); }
  .controller-bind-row .cb-dropdown { grid-column:1/-1; }
  .controller-bind-live { width:34px; height:34px; }
  .keyboard-lab { padding:10px; overflow-x:auto; }
  .keyboard-visual { min-width:720px; }
  .player-touch-keyboard { bottom:72px; width:calc(100% - 12px); max-height:calc(100dvh - 82px); padding:7px; border-radius:15px; overflow:auto; }
  .player-touch-settings { right:6px; bottom:72px; width:min(330px,calc(100% - 12px)); padding:12px; border-radius:16px; }
  .player-volume-control { width:105px; grid-template-columns:16px minmax(42px,1fr); }
  .player-volume-control output { display:none; }
  .player-keyboard-visual { min-width:0; }
  .player-keyboard-visual .keyboard-key { height:clamp(30px,9vw,48px); }
  .touch-editor-actions button { width:auto; min-width:39px; padding:0 10px; }
}

@media (pointer:coarse) {
  button, [role="button"], select { touch-action:manipulation; }
  .stream-top-back,.stream-top-icon,.hud-btn,.edge-btn { min-width:48px; min-height:48px; }
  .stream-input-mode { min-height:48px; }
  .player-layout-name { top:66px; }
}

/* v1.20 — stable home feature, richer activity, and rebuilt game details */
.home-showcase { align-items:start; }
.featured-game {
  width:100%;
  min-width:0;
  min-height:560px;
  height:clamp(560px,42vw,660px);
  align-self:start;
  background-size:cover !important;
  background-position:center 38% !important;
}
.featured-copy-panel {
  max-height:calc(100% - 94px);
  overflow:hidden;
}
.featured-copy-panel h2 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  font-size:clamp(38px,4.6vw,68px);
}
.featured-copy-panel p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
}

.continue-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.continue-game {
  min-height:112px;
  padding:12px;
  grid-template-columns:80px minmax(0,1fr) 42px;
  gap:13px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(145deg,#1a1d1e,#151718);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.continue-art { width:80px; height:86px; border-radius:16px; background-size:cover !important; background-position:center !important; box-shadow:0 10px 24px rgba(0,0,0,.24); }
.continue-art img { width:100%; height:100%; display:block; object-fit:cover; }
.continue-copy { gap:5px; align-content:center; }
.continue-label { color:var(--yellow); font-size:6px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
.continue-copy strong { font-size:12px; line-height:1.25; }
.continue-copy small { display:flex; align-items:center; gap:5px; }
.continue-copy small i { color:#747a76; }
.continue-details { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:3px; }
.continue-details em { min-height:24px; padding:0 7px; display:inline-flex; align-items:center; gap:5px; border-radius:8px; background:rgba(255,255,255,.04); color:#a9aeaa; font-size:7px; font-style:normal; font-weight:800; }
.continue-launch { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:var(--yellow); color:#21172f; box-shadow:0 8px 18px rgba(133,83,229,.13); }
@media (hover:hover) and (pointer:fine) {
  .continue-game:hover { transform:translateY(-2px); border-color:rgba(181,130,255,.25); background:#1c1f20; }
  .continue-game:hover .continue-launch { transform:scale(1.04); }
}
.related-panel .continue-game { min-height:72px; padding:8px; grid-template-columns:50px minmax(0,1fr) 34px; border-radius:15px; }
.related-panel .continue-art { width:50px; height:54px; border-radius:11px; }
.related-panel .continue-label,.related-panel .continue-details { display:none; }
.related-panel .continue-launch { width:32px; height:32px; border-radius:10px; }

.history-page { display:grid; gap:22px; }
.history-heading { margin-bottom:0; }
.history-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.history-summary article { min-height:108px; padding:18px; display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:21px; background:linear-gradient(145deg,#191c1d,#151718); }
.history-summary-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:15px; background:var(--yellow-soft); color:var(--yellow); }
.history-summary-icon i { font-size:18px; }
.history-summary-nana { width:27px; height:27px; }
.history-summary article div { min-width:0; display:grid; gap:5px; }
.history-summary small { color:var(--muted); font-size:8px; }
.history-summary strong { overflow:hidden; text-overflow:ellipsis; font-size:20px; letter-spacing:-.7px; }
.history-list { overflow:hidden; border:1px solid var(--line); border-radius:25px; background:#151718; }
.history-list-head { min-height:82px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(181,130,255,.045),transparent 45%); }
.history-list-head h2 { margin:5px 0 0; font-size:22px; letter-spacing:-.7px; }
.history-list-head > span { color:var(--muted); font-size:8px; }
.history-entry { min-height:92px; padding:12px 16px; display:grid; grid-template-columns:minmax(230px,1.5fr) minmax(120px,.8fr) minmax(90px,.55fr) minmax(90px,.55fr) 40px; align-items:center; gap:14px; border-top:1px solid rgba(255,255,255,.055); transition:background .16s ease; }
.history-entry:first-of-type { border-top:0; }
.history-entry:hover { background:rgba(255,255,255,.018); }
.history-game { min-width:0; gap:13px; }
.history-game > span:last-child { min-width:0; display:grid; gap:5px; }
.history-game small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:7px; }
.history-thumb { width:66px; height:66px; overflow:hidden; display:grid; place-items:end; border-radius:14px; background-size:cover !important; background-position:center !important; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.history-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.history-thumb b { padding:0 6px 5px 0; font-size:13px; }
.history-date,.history-session-stat { display:grid; gap:5px; }
.history-date strong,.history-session-stat strong { font-size:10px; }
.history-date span,.history-session-stat span { color:var(--muted); font-size:7px; }
.history-entry-action { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.15); border-radius:12px; background:var(--yellow-soft); color:var(--yellow); cursor:pointer; }

.game-page { gap:20px; }
.game-page-topbar { min-height:48px; }
.game-back-btn,.game-page-favorite { min-height:44px; padding:0 15px; border-radius:14px; background:#17191a; }
.game-page-hero {
  min-height:620px;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 65px rgba(0,0,0,.2);
}
.game-page-backdrop { position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.game-page-hero-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(7,8,8,.94) 0%,rgba(8,9,9,.76) 40%,rgba(8,9,9,.2) 75%,rgba(8,9,9,.42) 100%),linear-gradient(0deg,rgba(7,8,8,.72),transparent 46%); }
.game-page-hero-layout { min-height:620px; position:relative; z-index:2; padding:48px 46px 78px; display:grid; grid-template-columns:minmax(0,1fr) 250px; align-items:end; gap:38px; }
.game-page-copy { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; min-width:0; max-width:760px; padding:0; border:0; border-radius:0; background:transparent; backdrop-filter:none; }
.game-page-status { color:#d9e1dc; }
.game-page-copy h1 { max-width:760px; margin:15px 0 14px; font-size:clamp(52px,6.1vw,92px); line-height:.9; letter-spacing:-5px; text-wrap:balance; }
.game-page-tags { max-height:76px; overflow:hidden; }
.game-page-tags > span { background:rgba(15,17,17,.56); border-color:rgba(255,255,255,.12); backdrop-filter:blur(10px); }
.game-page-lede { max-width:680px !important; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; color:rgba(255,255,255,.75) !important; }
.game-page-actions { margin-top:22px; }
.game-page-play,.game-page-secondary { min-height:50px; padding:0 20px; border-radius:15px; }
.game-page-hero-card { width:250px; padding:10px; align-self:end; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:24px; background:rgba(16,18,18,.7); box-shadow:0 18px 42px rgba(0,0,0,.32); backdrop-filter:blur(18px); }
.game-page-hero-cover { width:100%; aspect-ratio:3/4; max-height:292px; overflow:hidden; display:grid; place-items:end; border-radius:17px; background-size:cover !important; background-position:center !important; color:#fff; font-size:30px; font-weight:1000; }
.game-page-hero-cover img { width:100%; height:100%; display:block; object-fit:cover; }
.game-page-hero-cover span { padding:0 10px 8px 0; }
.game-page-hero-facts { padding:11px 4px 3px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.game-page-hero-facts div { min-width:0; display:grid; gap:4px; }
.game-page-hero-facts span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#858c87; font-size:6px; }
.game-page-hero-facts strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.game-page-security { z-index:3; color:rgba(255,255,255,.6); }
.game-page-stats { gap:11px; }
.game-page-stats div { min-height:88px; padding:17px 18px; border-radius:20px; background:linear-gradient(145deg,#191c1d,#151718); }
.game-page-stats strong { font-size:14px; }

@media (max-width:1180px) {
  .continue-grid { grid-template-columns:1fr 1fr; }
  .history-summary { grid-template-columns:1fr 1fr; }
  .history-entry { grid-template-columns:minmax(210px,1.35fr) minmax(115px,.8fr) 85px 85px 38px; }
  .game-page-hero-layout { grid-template-columns:minmax(0,1fr) 210px; padding-inline:36px; }
  .game-page-hero-card { width:210px; }
}
@media (max-width:820px) {
  .featured-game { height:auto; min-height:610px; }
  .featured-copy-panel { max-height:none; }
  .continue-grid { grid-template-columns:1fr; }
  .history-entry { grid-template-columns:minmax(0,1fr) auto 38px; }
  .history-date { text-align:right; }
  .history-session-stat { display:none; }
  .game-page-hero,.game-page-hero-layout { min-height:660px; }
  .game-page-hero-layout { grid-template-columns:1fr; padding:220px 24px 78px; align-items:end; }
  .game-page-hero-card { display:none; }
  .game-page-copy h1 { font-size:clamp(46px,11vw,72px); letter-spacing:-3.5px; }
  .game-page-hero-shade { background:linear-gradient(0deg,rgba(7,8,8,.97) 0%,rgba(7,8,8,.9) 55%,rgba(7,8,8,.2) 100%); }
}
@media (max-width:560px) {
  .site-footer-logo { width:245px; height:92px; }
  .site-footer-logo img { width:245px; height:92px; }
  .featured-game { min-height:640px; }
  .featured-copy-panel h2 { font-size:clamp(37px,12vw,54px); }
  .continue-game { grid-template-columns:68px minmax(0,1fr) 38px; min-height:100px; }
  .continue-art { width:68px; height:74px; }
  .continue-details em:first-child { display:none; }
  .history-summary { grid-template-columns:1fr; }
  .history-summary article { min-height:88px; }
  .history-entry { grid-template-columns:56px minmax(0,1fr) 36px; gap:10px; }
  .history-entry .history-game { display:contents; }
  .history-thumb { width:56px; height:56px; }
  .history-date { display:none; }
  .game-page-hero,.game-page-hero-layout { min-height:700px; }
  .game-page-hero-layout { padding:210px 18px 86px; }
  .game-page-copy h1 { font-size:clamp(42px,13vw,62px); }
  .game-page-tags { max-height:68px; }
  .game-page-lede { -webkit-line-clamp:3; line-clamp:3; }
  .game-page-security { gap:8px; }
}

/* Weekly catalog badges and preset-only game reporting */
.game-card-badge-rack {
  position:absolute;
  z-index:8;
  top:10px;
  right:10px;
  display:flex;
  align-items:flex-start;
  gap:6px;
  pointer-events:none;
}
.game-card-badge-rack.with-favorite { right:50px; }
.game-fresh-badge,
.game-updated-badge,
.game-needs-update-badge,
.game-dlc-plus-badge {
  position:relative;
  width:48px;
  height:30px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,231,126,.62);
  border-radius:10px;
  background:linear-gradient(135deg,#ffcf31,#f4a900);
  color:#2d2200;
  box-shadow:0 8px 22px rgba(0,0,0,.26),0 0 18px rgba(255,199,29,.15);
  isolation:isolate;
}
.game-fresh-badge strong,
.game-updated-badge strong,
.game-needs-update-badge strong,
.game-dlc-plus-badge strong { position:relative; z-index:2; font-size:8px; font-weight:1000; letter-spacing:.35px; text-transform:uppercase; }
.fresh-bubble { position:absolute; z-index:1; bottom:-9px; border-radius:50%; background:rgba(255,255,255,.38); animation:freshBubbleRise 2.8s ease-in infinite; }
.fresh-bubble-one { left:8px; width:7px; height:7px; animation-delay:-.4s; }
.fresh-bubble-two { left:25px; width:4px; height:4px; animation-delay:-1.8s; animation-duration:3.2s; }
.fresh-bubble-three { right:6px; width:9px; height:9px; animation-delay:-1.1s; animation-duration:3.6s; }
@keyframes freshBubbleRise {
  0% { transform:translateY(4px) scale(.75); opacity:0; }
  18% { opacity:.8; }
  76% { opacity:.42; }
  100% { transform:translateY(-38px) scale(1.15); opacity:0; }
}
.game-updated-badge {
  width:66px;
  border-color:rgba(219,178,255,.67);
  background:linear-gradient(135deg,#9a59df,#572288);
  color:#fff8ff;
  box-shadow:0 8px 22px rgba(0,0,0,.26),0 0 19px rgba(167,98,255,.28);
}
.game-needs-update-badge {
  width:82px;
  border-color:rgba(255,143,143,.72);
  background:linear-gradient(135deg,#e94b51,#861c2a);
  color:#fff7f7;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 20px rgba(232,55,69,.3);
}
.game-dlc-plus-badge {
  width:51px;
  border-color:rgba(124,246,177,.72);
  background:linear-gradient(135deg,#43c875,#14754f);
  color:#effff4;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 20px rgba(56,220,130,.28);
}
.dlc-plus-gem {
  position:absolute;
  z-index:1;
  bottom:-8px;
  width:7px;
  height:7px;
  border:1px solid rgba(230,255,240,.84);
  background:rgba(232,255,240,.44);
  box-shadow:0 0 8px rgba(220,255,231,.82);
  transform:rotate(45deg);
  animation:dlcPlusGemFloat 3.2s ease-in infinite;
}
.dlc-plus-gem::after { content:""; position:absolute; inset:2px; border-radius:1px; background:rgba(18,119,77,.58); }
.dlc-plus-gem-one { left:9px; animation-delay:-.3s; }
.dlc-plus-gem-two { left:24px; width:5px; height:5px; animation-delay:-1.7s; animation-duration:3.75s; }
.dlc-plus-gem-three { right:8px; width:8px; height:8px; animation-delay:-2.4s; animation-duration:2.8s; }
@keyframes dlcPlusGemFloat {
  0% { transform:translateY(5px) rotate(45deg) scale(.65); opacity:0; }
  20% { opacity:.9; }
  76% { opacity:.42; }
  100% { transform:translateY(-39px) rotate(160deg) scale(1.12); opacity:0; }
}
.updated-star,
.needs-update-star {
  position:absolute;
  z-index:1;
  bottom:-8px;
  color:rgba(255,245,255,.88);
  text-shadow:0 0 7px rgba(255,234,255,.92);
  font-size:11px;
  line-height:1;
  animation:updatedStarFloat 3.1s ease-in infinite;
}
.needs-update-star {
  color:rgba(255,244,220,.9);
  text-shadow:0 0 7px rgba(255,219,164,.96);
  animation-name:needsUpdateStarFloat;
}
.updated-star-one,
.needs-update-star-one { left:10px; animation-delay:-.4s; }
.updated-star-two,
.needs-update-star-two { left:31px; font-size:8px; animation-delay:-1.65s; animation-duration:3.65s; }
.updated-star-three,
.needs-update-star-three { right:8px; font-size:12px; animation-delay:-2.35s; animation-duration:2.7s; }
@keyframes updatedStarFloat {
  0% { transform:translateY(5px) rotate(0deg) scale(.64); opacity:0; }
  20% { opacity:.9; }
  78% { opacity:.44; }
  100% { transform:translateY(-39px) rotate(105deg) scale(1.2); opacity:0; }
}
@keyframes needsUpdateStarFloat {
  0% { transform:translateY(5px) rotate(0deg) scale(.64); opacity:0; }
  20% { opacity:.94; }
  78% { opacity:.48; }
  100% { transform:translateY(-39px) rotate(-105deg) scale(1.2); opacity:0; }
}

/* Multiplayer and Emulated are host-owned mini-tags, not imported discovery
   labels. Multiplayer gets a cool blue network treatment; CloudBanana
   Multiplayer makes it clear that this host provides the game's server, while
   Emulated identifies a host-managed emulation session. */
.game-tag,
.game-page-tag {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.game-tag {
  min-height:20px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:rgba(235,238,235,.78);
  font-weight:850;
}
.game-tag-label,
.game-page-tag > i,
.game-tag-fire-icon {
  position:relative;
  z-index:2;
}
.game-tag-fire-icon { font-style:normal; font-size:10px; line-height:1; }
.game-tag.is-multiplayer,
.game-page-tag.is-multiplayer {
  border-color:rgba(84,181,255,.62);
  background:linear-gradient(135deg,rgba(45,145,228,.72),rgba(19,62,139,.82));
  color:#edf9ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 15px rgba(42,145,255,.17);
}
.game-tag.is-cloudbanana-multiplayer,
.game-page-tag.is-cloudbanana-multiplayer {
  border-color:rgba(255,111,83,.72);
  background:linear-gradient(135deg,rgba(221,57,38,.83),rgba(116,24,20,.91));
  color:#fff4e9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 17px rgba(255,75,41,.22);
}
.game-tag.is-emulated,
.game-page-tag.is-emulated {
  border-color:rgba(104,231,145,.68);
  background:linear-gradient(135deg,rgba(41,156,91,.84),rgba(20,84,54,.94));
  color:#effff2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 17px rgba(61,224,123,.2);
}
.game-tag-effects {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.game-tag-bubbles i {
  position:absolute;
  bottom:-6px;
  width:4px;
  height:4px;
  border:1px solid rgba(238,251,255,.72);
  border-radius:50%;
  background:rgba(232,250,255,.35);
  box-shadow:0 0 5px rgba(225,249,255,.45);
  animation:cloudBananaMultiplayerBubble 2.7s ease-in infinite;
}
.game-tag-bubbles i:nth-child(1) { left:19%; animation-delay:-.5s; }
.game-tag-bubbles i:nth-child(2) { left:51%; width:3px; height:3px; animation-delay:-1.45s; animation-duration:3.1s; }
.game-tag-bubbles i:nth-child(3) { left:81%; width:5px; height:5px; animation-delay:-2.1s; animation-duration:2.45s; }
@keyframes cloudBananaMultiplayerBubble {
  0% { transform:translateY(5px) scale(.65); opacity:0; }
  22% { opacity:.82; }
  100% { transform:translateY(-25px) scale(1.1); opacity:0; }
}
.game-tag-flames i {
  position:absolute;
  bottom:-4px;
  font-size:11px;
  font-style:normal;
  line-height:1;
  filter:drop-shadow(0 0 4px rgba(255,231,121,.68));
  opacity:.7;
  animation:cloudBananaMultiplayerFlame 1.75s ease-in-out infinite;
}
.game-tag-flames i:nth-child(1) { left:12%; animation-delay:-.25s; }
.game-tag-flames i:nth-child(2) { left:48%; font-size:9px; animation-delay:-1.1s; }
.game-tag-flames i:nth-child(3) { right:8%; font-size:12px; animation-delay:-.75s; }
@keyframes cloudBananaMultiplayerFlame {
  0%,100% { transform:translateY(4px) scale(.78) rotate(-4deg); opacity:.18; }
  42% { transform:translateY(-5px) scale(1.08) rotate(4deg); opacity:.72; }
  72% { transform:translateY(-1px) scale(.91) rotate(-2deg); opacity:.42; }
}
.game-tag-controllers i {
  position:absolute;
  bottom:-5px;
  color:rgba(225,255,234,.9);
  font-size:9px;
  line-height:1;
  text-shadow:0 0 5px rgba(205,255,219,.62);
  opacity:.6;
  animation:cloudBananaEmulatedController 3s ease-in-out infinite;
}
.game-tag-controllers i:nth-child(1) { left:11%; animation-delay:-.35s; }
.game-tag-controllers i:nth-child(2) { left:48%; font-size:8px; animation-delay:-1.55s; animation-duration:3.35s; }
.game-tag-controllers i:nth-child(3) { right:9%; font-size:10px; animation-delay:-2.25s; animation-duration:2.6s; }
@keyframes cloudBananaEmulatedController {
  0%,100% { transform:translateY(4px) rotate(-7deg) scale(.72); opacity:.12; }
  46% { transform:translateY(-7px) rotate(8deg) scale(1.05); opacity:.72; }
  74% { transform:translateY(-2px) rotate(-2deg) scale(.9); opacity:.38; }
}

.game-page-top-actions { display:flex; align-items:center; gap:9px; }
.game-report-btn {
  min-height:44px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,115,115,.16);
  border-radius:14px;
  background:#211719;
  color:#ff9999;
  cursor:pointer;
  font-family:inherit;
  font-size:9px;
  font-weight:850;
}
.game-report-btn:hover { border-color:rgba(255,115,115,.34); background:#2a191c; }

.game-report-layer {
  position:fixed;
  z-index:1000;
  inset:0;
  padding:24px;
  display:grid;
  place-items:center;
  background:rgba(3,5,5,.72);
  backdrop-filter:blur(16px);
  opacity:0;
  transition:opacity .18s ease;
}
.game-report-layer.visible { opacity:1; }
.game-report-dialog {
  width:min(720px,100%);
  max-height:min(780px,calc(100dvh - 40px));
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  background:linear-gradient(145deg,#1b1e1f,#111314);
  box-shadow:0 36px 100px rgba(0,0,0,.62);
  transform:translateY(12px) scale(.985);
  transition:transform .2s ease;
}
.game-report-layer.visible .game-report-dialog { transform:none; }
.game-report-head { padding:24px 24px 18px; display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.game-report-head h2 { margin:6px 0 5px; font-size:24px; letter-spacing:-.8px; }
.game-report-head p { margin:0; color:var(--muted); font-size:9px; }
.game-report-close { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; background:#202324; color:var(--muted); cursor:pointer; }
.game-report-options { min-height:0; overflow:auto; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.game-report-option { min-width:0; min-height:78px; padding:11px; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:11px; border:1px solid var(--line); border-radius:16px; background:#171a1b; color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.game-report-option > span:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#252112; color:var(--yellow); }
.game-report-option > span:nth-child(2) { min-width:0; display:grid; gap:5px; }
.game-report-option strong { font-size:10px; }
.game-report-option small { color:var(--muted); font-size:7.5px; line-height:1.4; }
.game-report-option > i { color:#606662; }
.game-report-option:hover,.game-report-option.selected { transform:translateY(-1px); border-color:rgba(181,130,255,.28); background:#1d2021; }
.game-report-layer.sending .game-report-option:not(.selected) { opacity:.42; }
.game-report-foot { min-height:56px; padding:12px 20px; display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); color:#878e89; font-size:8px; line-height:1.45; }
.game-report-foot i { color:var(--yellow); }

@media (max-width:640px) {
  .game-page-top-actions { gap:6px; }
  .game-report-btn,.game-page-favorite { padding:0 11px; }
  .game-report-btn span { display:none; }
  .game-report-layer { padding:10px; }
  .game-report-dialog { max-height:calc(100dvh - 20px); border-radius:22px; }
  .game-report-head { padding:19px 17px 15px; }
  .game-report-head h2 { font-size:20px; }
  .game-report-options { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .fresh-bubble,
  .updated-star,
  .dlc-plus-gem,
  .game-tag-bubbles i,
  .game-tag-flames i { animation:none; opacity:.34; }
}

/* Keep the full-height drawer authoritative over the older compact popover. */
.player-touch-settings.player-settings-drawer {
  z-index:44;
  top:0;
  right:0;
  bottom:0;
  width:min(640px,100%);
  padding:0;
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  overflow:hidden;
  border:0;
  border-left:1px solid rgba(255,255,255,.1);
  border-radius:28px 0 0 28px;
  background:radial-gradient(circle at 100% 0,rgba(181,130,255,.075),transparent 32%),rgba(13,15,14,.99);
}
.player-touch-settings.player-settings-drawer.hidden { display:none; }
@media (max-width:720px) {
  .player-touch-settings.player-settings-drawer { width:100%; grid-template-columns:70px minmax(0,1fr); border-radius:0; }
}

/* Support hub: reports, host replies, and private-library requests. */
.support-top-btn { position:relative; }
.support-dot { background:#71dfac; box-shadow:0 0 0 4px rgba(113,223,172,.11); }
.notification-inbox-head small { color:#7d8580; font-size:7px; font-weight:700; }
.notification-inbox-tabs { display:flex; gap:5px; padding:9px 12px 0; border-bottom:1px solid var(--line); }
.notification-inbox-tabs button { min-height:31px; padding:0 11px; border:0; border-bottom:2px solid transparent; background:transparent; color:#858c87; cursor:pointer; font:800 8px/1 inherit; letter-spacing:.15px; }
.notification-inbox-tabs button.active { border-bottom-color:var(--yellow); color:#F2E8FF; }
.notification-inbox-tabs span { display:inline-grid; min-width:16px; height:16px; place-items:center; margin-left:4px; padding:0 4px; border-radius:99px; background:rgba(181,130,255,.13); color:#f3dc75; font-size:6px; }
.notification-list { max-height:min(340px,calc(100dvh - 220px)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-color:var(--yellow) #272a29; scrollbar-width:thin; padding:5px 6px 7px; }
.notification-list::-webkit-scrollbar { width:8px; }
.notification-list::-webkit-scrollbar-track { margin:8px 0; border-radius:999px; background:#272a29; }
.notification-list::-webkit-scrollbar-thumb { border:2px solid #272a29; border-radius:999px; background:var(--yellow); }
.notification-item { min-height:64px; grid-template-columns:34px minmax(0,1fr) 7px 11px; gap:8px; padding:8px 9px; border-radius:12px; }
.notification-item + .notification-item { margin-top:2px; }
.notification-item.unread { background:linear-gradient(90deg,rgba(181,130,255,.08),rgba(181,130,255,.028)); }
.notification-item-icon { width:34px; height:34px; border-radius:11px; font-size:14px; }
.notification-item-copy { gap:2px; }
.notification-item-copy strong { font-size:9px; }
.notification-item-copy > span { font-size:7.5px; line-height:1.35; }
.notification-item-copy small { font-size:6px; }
.notification-unread-mark { margin-top:5px; }
.notification-arrow { align-self:center; color:#5d645f; font-size:13px; }
.notification-item:hover .notification-arrow { color:#e4d07a; transform:translateX(2px); }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.support-page { width:min(1500px,100%); margin:0 auto; display:grid; gap:22px; }
.support-page-head { min-height:148px; display:flex; align-items:end; justify-content:space-between; gap:28px; padding:28px 30px; overflow:hidden; border:1px solid rgba(255,255,255,.075); border-radius:28px; background:radial-gradient(circle at 84% 18%,rgba(181,130,255,.13),transparent 24%),linear-gradient(125deg,rgba(41,45,39,.72),rgba(19,22,22,.94)); }
.support-page-head h1 { margin:5px 0 8px; font-size:clamp(30px,3.2vw,47px); letter-spacing:-2.3px; }
.support-page-head p { max-width:650px; margin:0; color:#a7ada8; font-size:10px; line-height:1.6; }
.support-back-game { display:inline-flex; align-items:center; gap:6px; margin:0 0 13px; padding:0; border:0; background:transparent; color:#cec475; cursor:pointer; font:800 8px/1 inherit; }
.support-back-game:hover { color:#fff0a8; }
.support-page-summary { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:9px; padding-bottom:4px; }
.support-page-summary span { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(7,9,9,.22); color:#a8aea9; font-size:8px; font-weight:800; }
.support-page-summary i { color:var(--yellow); font-size:13px; }
.support-tabs { display:flex; gap:7px; padding:6px; border:1px solid var(--line); border-radius:17px; background:#181b1b; width:max-content; max-width:100%; overflow-x:auto; }
.support-tabs button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 15px; border:1px solid transparent; border-radius:12px; background:transparent; color:#858c88; cursor:pointer; white-space:nowrap; font:800 9px/1 inherit; }
.support-tabs button i { font-size:15px; }
.support-tabs button:hover { color:#dcdfdb; background:rgba(255,255,255,.03); }
.support-tabs button.active { border-color:rgba(181,130,255,.24); background:rgba(181,130,255,.12); color:#fdf1b9; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.support-report-workspace { min-height:650px; display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); overflow:hidden; border:1px solid var(--line-strong); border-radius:27px; background:#151818; }
.support-category-rail { position:relative; display:flex; flex-direction:column; gap:18px; padding:25px 18px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(181,130,255,.045),transparent 28%),#191c1c; }
.support-category-rail > div:first-child { padding:0 7px; }
.support-category-rail strong { display:block; margin:5px 0 6px; font-size:16px; }
.support-category-rail p { margin:0; color:#909792; font-size:8px; line-height:1.55; }
.support-category-trigger { width:100%; min-height:92px; display:grid; grid-template-columns:34px minmax(0,1fr) 16px; align-items:center; gap:10px; padding:11px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); color:#e4e8e4; cursor:pointer; text-align:left; font-family:inherit; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.support-category-trigger:hover,.support-category-trigger[aria-expanded="true"] { border-color:rgba(181,130,255,.42); background:linear-gradient(135deg,rgba(181,130,255,.13),rgba(181,130,255,.04)); }
.support-category-trigger:active { transform:translateY(1px); }
.support-category-trigger > i:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#282c2a; color:#bac4bd; font-size:15px; }
.support-category-trigger.has-selection > i:first-child { background:var(--yellow); color:#210E36; }
.support-category-trigger > span { min-width:0; display:grid; gap:3px; }
.support-category-trigger small { color:#8e9690; font-size:6px; font-weight:850; letter-spacing:.75px; text-transform:uppercase; }
.support-category-trigger strong { overflow:hidden; margin:0; color:#f0f3ef; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.support-category-trigger em { overflow:hidden; color:#87908a; font-size:7px; font-style:normal; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.support-category-trigger > i:last-child { color:#CDB1FF; font-size:14px; }
.support-category-popover,.support-game-picker-popover { z-index:8; overflow:hidden; border:1px solid rgba(181,130,255,.3); border-radius:18px; background:rgba(23,26,25,.99); box-shadow:0 24px 60px rgba(0,0,0,.48); backdrop-filter:blur(20px); }
.support-category-popover { position:absolute; top:176px; left:12px; right:12px; max-height:min(470px,calc(100vh - 230px)); }
.support-picker-popover-head { min-height:57px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.support-picker-popover-head > div { display:grid; gap:3px; }
.support-picker-popover-head strong { margin:0; font-size:11px; }
.support-picker-close { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:#222625; color:#99a19b; cursor:pointer; }
.support-picker-close:hover { border-color:rgba(181,130,255,.35); color:#E2D3FF; }
.support-picker-search { min-height:43px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; margin:10px; padding:0 10px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#111414; color:#abb4ad; }
.support-picker-search i { color:#B582FF; font-size:13px; }
.support-picker-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:8px; }
.support-picker-search:focus-within { border-color:rgba(181,130,255,.55); box-shadow:0 0 0 3px rgba(181,130,255,.07); }
.support-category-list { display:grid; gap:5px; max-height:min(348px,calc(100vh - 340px)); overflow:auto; padding:0 10px 10px; }
.support-category { min-width:0; min-height:55px; display:grid; grid-template-columns:28px minmax(0,1fr) 16px; align-items:center; gap:9px; padding:8px; border:1px solid transparent; border-radius:12px; background:transparent; color:#d7dbd7; cursor:pointer; text-align:left; font-family:inherit; transition:.16s ease; }
.support-category > i:first-child { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#242827; color:#b7c0ba; font-size:13px; }
.support-category > span { min-width:0; display:grid; gap:3px; }
.support-category strong { overflow:hidden; font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.support-category small { overflow:hidden; color:#777f79; font-size:6.6px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.support-category > i:last-child { color:transparent; font-size:13px; }
.support-category:hover { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.support-category.selected { border-color:rgba(181,130,255,.28); background:linear-gradient(90deg,rgba(181,130,255,.14),rgba(181,130,255,.035)); }
.support-category.selected > i:first-child { background:var(--yellow); color:#210E36; }
.support-category.selected > i:last-child { color:#E2D3FF; }
.support-picker-empty,.support-picker-no-results { margin:0; padding:18px 12px; color:#858e87; font-size:8px; line-height:1.5; text-align:center; }
.support-report-form { display:flex; flex-direction:column; min-width:0; padding:clamp(22px,3vw,42px); background:radial-gradient(circle at 100% 0,rgba(181,130,255,.07),transparent 28%),linear-gradient(145deg,#181b1b,#111314); }
.support-form-head { display:flex; justify-content:space-between; align-items:start; gap:18px; padding-bottom:27px; }
.support-form-head h2 { margin:6px 0 7px; font-size:clamp(22px,2.4vw,34px); letter-spacing:-1.3px; }
.support-form-head p { max-width:580px; margin:0; color:#a2a9a4; font-size:9px; line-height:1.55; }
.support-private-note { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:29px; padding:0 10px; border:1px solid rgba(181,130,255,.18); border-radius:9px; color:#E2D3FF; background:rgba(181,130,255,.06); font-size:7px; font-weight:850; }
.support-game-picker, .support-detail-field { display:grid; gap:8px; margin-top:19px; }
.support-game-picker { position:relative; }
.support-game-picker > span, .support-detail-field > span { color:#e6e9e4; font-size:8px; font-weight:850; }
.support-game-picker-trigger { width:100%; min-height:66px; display:grid; grid-template-columns:42px minmax(0,1fr) 16px; align-items:center; gap:11px; padding:8px 12px 8px 9px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:#171b1a; color:var(--text); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .16s ease,background .16s ease; }
.support-game-picker-trigger:hover,.support-game-picker-trigger[aria-expanded="true"] { border-color:rgba(181,130,255,.5); background:#1d211f; }
.support-game-picker-trigger:disabled { cursor:not-allowed; opacity:.6; }
.support-selected-game-cover,.support-game-option-cover { display:grid; place-items:center; overflow:hidden; background:#292e2b; color:#dcc75e; }
.support-selected-game-cover { width:42px; height:50px; border-radius:10px; }
.support-selected-game-cover img,.support-game-option-cover img { width:100%; height:100%; object-fit:cover; }
.support-game-picker-trigger > span:nth-child(2) { min-width:0; display:grid; gap:4px; }
.support-game-picker-trigger strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.support-game-picker-trigger small { overflow:hidden; color:#858d87; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.support-game-picker-trigger > i { color:#d9bd4f; font-size:15px; }
.support-game-picker-popover { position:absolute; top:calc(100% + 8px); inset-inline:0; max-height:min(490px,calc(100vh - 170px)); }
.support-game-option-list { display:grid; gap:5px; max-height:min(350px,calc(100vh - 325px)); overflow:auto; padding:0 10px 10px; }
.support-game-option { width:100%; min-height:57px; display:grid; grid-template-columns:33px minmax(0,1fr) 15px; align-items:center; gap:9px; padding:7px; border:1px solid transparent; border-radius:12px; background:transparent; color:#dfe4df; cursor:pointer; text-align:left; font-family:inherit; }
.support-game-option:hover { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.035); }
.support-game-option.selected { border-color:rgba(181,130,255,.27); background:rgba(181,130,255,.09); }
.support-game-option-cover { width:33px; height:43px; border-radius:8px; }
.support-game-option > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.support-game-option strong,.support-game-option small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-game-option strong { font-size:8.5px; }
.support-game-option small { color:#818984; font-size:6.5px; }
.support-game-option > i { color:#888f89; font-size:13px; }
.support-game-option.selected > i { color:#f2d64e; }
.support-detail-field em { color:#919892; font-style:normal; font-weight:650; }
.support-detail-field textarea, .support-message-compose textarea { resize:vertical; min-height:122px; width:100%; border:1px solid rgba(255,255,255,.11); border-radius:17px; outline:0; padding:15px; background:rgba(11,13,13,.7); color:var(--text); font:inherit; font-size:10px; line-height:1.6; transition:border-color .16s ease,box-shadow .16s ease; }
.support-detail-field textarea:focus, .support-message-compose textarea:focus { border-color:rgba(181,130,255,.65); box-shadow:0 0 0 3px rgba(181,130,255,.08); }
.support-detail-field small { color:#777f79; font-size:7px; }
.support-confirm-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:auto; padding-top:28px; }
.support-form-validation { min-height:16px; color:#ffb0b0; font-size:8px; line-height:1.4; }
.support-confirm-btn { min-width:168px; min-height:46px; justify-content:center; }
.support-confirm-btn.is-loading { opacity:.62; pointer-events:none; }

.support-messages-workspace { min-height:630px; display:grid; grid-template-columns:minmax(290px,370px) minmax(0,1fr); overflow:hidden; border:1px solid var(--line-strong); border-radius:27px; background:#151818; }
.support-report-list { min-width:0; border-right:1px solid var(--line); background:#191c1c; }
.support-list-head { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.support-list-head > div { display:grid; gap:4px; }
.support-list-head strong { font-size:13px; }
.support-icon-btn { width:35px; height:35px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:11px; background:#202424; color:#aeb6b0; cursor:pointer; }
.support-icon-btn:hover { border-color:rgba(181,130,255,.28); color:#f9e584; }
.support-report-list-scroll { max-height:calc(630px - 77px); overflow:auto; padding:9px; }
.support-report-card { width:100%; min-height:84px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid transparent; border-radius:15px; background:transparent; color:var(--text); cursor:pointer; text-align:left; font-family:inherit; }
.support-report-card:hover { background:rgba(255,255,255,.035); }
.support-report-card.active { border-color:rgba(181,130,255,.2); background:rgba(181,130,255,.07); }
.support-report-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#262a29; color:#f0d853; }
.support-report-copy { min-width:0; display:grid; gap:3px; }
.support-report-copy strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.support-report-copy > span { overflow:hidden; color:#a0a7a2; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.support-report-copy small { color:#68706a; font-size:6.5px; }
.support-status { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:22px; padding:0 7px; border-radius:99px; font-size:6px; font-weight:900; white-space:nowrap; }
.support-status.open { background:rgba(181,130,255,.12); color:#ead56d; }
.support-status.reviewing { background:rgba(109,183,242,.12); color:#9cd4ff; }
.support-status.resolved { background:rgba(93,211,149,.12); color:#9ae7bb; }
.support-status.closed { background:rgba(255,151,151,.11); color:#f1b0b0; }
.support-status.denied { background:rgba(232,123,123,.12); color:#ffaaaa; }
.support-conversation { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:radial-gradient(circle at 100% 0,rgba(181,130,255,.06),transparent 30%),#141717; }
.support-conversation-head { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line); }
.support-conversation-head > div { min-width:0; display:grid; gap:4px; }
.support-conversation-head strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.support-conversation-head small { color:#929993; font-size:7px; }
.support-message-list { min-height:300px; max-height:calc(630px - 154px); overflow:auto; display:flex; flex-direction:column; gap:14px; padding:24px; }
.support-message { display:flex; align-items:flex-start; gap:9px; max-width:min(630px,90%); }
.support-message.from-user { align-self:flex-end; flex-direction:row-reverse; }
.support-message-avatar { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:#292e2c; color:#dedb9a; font-size:12px; }
.support-message.from-user .support-message-avatar { background:var(--yellow); color:#372c08; }
.support-message > div { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:5px 15px 15px; background:#202424; }
.support-message.from-user > div { border-color:rgba(181,130,255,.2); border-radius:15px 5px 15px 15px; background:rgba(181,130,255,.09); }
.support-message strong { color:#dfe4df; font-size:7px; }
.support-message p { margin:0; color:#c2c9c3; font-size:9px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.support-message small { color:#7d857f; font-size:6px; }
.support-message-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }
.support-message-compose textarea { min-height:47px; max-height:130px; padding:12px; border-radius:14px; }
.support-message-compose .primary-btn { min-width:91px; min-height:47px; justify-content:center; }
.support-chat-closed { display:flex; align-items:center; gap:9px; margin:0 20px; padding:10px 12px; border:1px solid rgba(255,122,122,.3); border-radius:13px; background:rgba(255,115,115,.075); color:#eab7b7; font-size:8px; line-height:1.45; }
.support-chat-closed i { color:#ff9a9a; font-size:13px; }
.support-message-compose.is-closed { background:rgba(255,255,255,.018); }
.support-message-compose.is-closed textarea { cursor:not-allowed; opacity:.56; }
.support-thread-empty, .support-empty-card { min-height:270px; display:grid; place-items:center; align-content:center; gap:8px; padding:25px; color:#98a09b; text-align:center; }
.support-thread-empty i, .support-empty-card i { color:var(--yellow); font-size:28px; }
.support-thread-empty strong, .support-empty-card strong { color:#e7ebe6; font-size:12px; }
.support-thread-empty span, .support-empty-card span { max-width:290px; font-size:8px; line-height:1.55; }
.support-thread-empty.compact { min-height:160px; }

.game-request-page { display:grid; gap:18px; }
.game-request-hero { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:27px 30px; border:1px solid var(--line-strong); border-radius:25px; background:linear-gradient(135deg,rgba(181,130,255,.1),rgba(181,130,255,.015) 35%,#171a1a 73%); }
.game-request-hero h2 { margin:6px 0 7px; font-size:28px; letter-spacing:-1px; }
.game-request-hero p { max-width:600px; margin:0; color:#9ca39e; font-size:9px; line-height:1.6; }
.request-quota { min-width:180px; display:grid; gap:4px; padding:13px 15px; border:1px solid rgba(181,130,255,.18); border-radius:15px; background:rgba(8,10,10,.3); }
.request-quota > span { color:#a3aaa5; font-size:7px; font-weight:800; }
.request-quota strong { color:#f9e47a; font-size:20px; letter-spacing:-.7px; }
.request-quota strong small { color:#c7c3a6; font-size:8px; letter-spacing:0; }
.request-quota p { margin:0; color:#8f967f; font-size:7px; }
.game-request-search { min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 9px 8px 18px; border:1px solid var(--line-strong); border-radius:18px; background:#1a1d1d; }
.game-request-search > i { color:#aeb174; font-size:18px; }
.game-request-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:11px; }
.game-request-search .primary-btn { min-height:46px; }
.game-request-results { min-height:230px; overflow:hidden; border:1px solid var(--line-strong); border-radius:22px; background:#171a1a; }
.game-request-result { min-height:94px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:13px; padding:12px 15px; border-bottom:1px solid var(--line); }
.game-request-result:last-child { border-bottom:0; }
.game-request-result.unavailable { opacity:.7; }
.game-request-cover { width:54px; height:70px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#262b29; color:#c5b96a; }
.game-request-cover img { width:100%; height:100%; object-fit:cover; }
.game-request-copy { min-width:0; display:grid; gap:4px; }
.game-request-copy strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.game-request-copy span { color:#9ca39d; font-size:7px; }
.game-request-copy small { overflow:hidden; color:#6f7671; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.game-request-action { display:flex; align-items:center; justify-content:flex-end; }
.request-game-btn { min-height:36px; border-color:rgba(181,130,255,.22); color:#f4dc76; }
.request-state { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:0 8px; border-radius:8px; font-size:7px; font-weight:850; white-space:nowrap; }
.request-state.owned { background:rgba(97,218,151,.1); color:#a6ebbd; }
.request-state.requested { background:rgba(123,185,246,.1); color:#b4dcff; }
.support-loading, .support-empty-search { min-height:230px; display:grid; place-items:center; align-content:center; gap:8px; padding:24px; text-align:center; color:#96a09a; }
.support-loading i, .support-empty-search i { color:var(--yellow); font-size:24px; }
.support-loading i { animation:supportSpin 1s linear infinite; }
@keyframes supportSpin { to { transform:rotate(360deg); } }
.support-empty-search strong { color:#e3e7e3; font-size:12px; }
.support-empty-search span { max-width:330px; font-size:8px; line-height:1.5; }
.support-request-history { overflow:hidden; border:1px solid var(--line-strong); border-radius:21px; background:#181b1b; }
.game-request-history-page { min-height:430px; }
.support-request-history-full { min-height:430px; }
.support-request-history-full .support-request-history-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.support-request-history-full .support-request-history-grid article:nth-child(odd) { border-right:1px solid var(--line); }
.support-request-history-full .support-request-history-grid article:nth-child(3n) { border-right:0; }
.support-request-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.support-request-history-grid article { min-height:72px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--line); }
.support-request-history-grid article:nth-child(odd) { border-right:1px solid var(--line); }
.support-request-history-grid article > i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(181,130,255,.1); color:#e9d45d; }
.support-request-history-grid article div { min-width:0; display:grid; gap:3px; }
.support-request-history-grid article strong { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.support-request-history-grid article span,.support-request-history-grid article small { color:#828984; font-size:6.5px; }
.support-empty-history { padding:20px; border-top:1px solid var(--line); color:#87908a; font-size:8px; }

@media (max-width:1040px) {
  .support-page-head { align-items:start; flex-direction:column; }
  .support-page-summary { justify-content:flex-start; }
  .support-report-workspace { grid-template-columns:260px minmax(0,1fr); }
  .support-category-rail { padding-inline:12px; }
}
@media (max-width:790px) {
  .support-page-head { min-height:0; padding:23px; border-radius:22px; }
  .support-page-head h1 { letter-spacing:-1.5px; }
  .support-report-workspace,.support-messages-workspace { grid-template-columns:1fr; border-radius:22px; }
  .support-category-rail { min-height:180px; border-right:0; border-bottom:1px solid var(--line); }
  .support-category-popover { top:151px; max-height:min(470px,calc(100vh - 150px)); }
  .support-category-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:260px; }
  .support-report-list { border-right:0; border-bottom:1px solid var(--line); }
  .support-report-list-scroll { max-height:270px; }
  .support-message-list { max-height:none; min-height:260px; }
  .game-request-hero { align-items:start; flex-direction:column; padding:23px; }
  .request-quota { min-width:0; width:100%; }
}
@media (max-width:560px) {
  .support-page { gap:15px; }
  .support-page-head,.support-report-workspace,.support-messages-workspace,.game-request-hero,.game-request-results,.support-request-history { border-radius:18px; }
  .support-tabs { width:100%; }
  .support-tabs button { flex:1; padding:0 8px; }
  .support-tabs button span { font-size:7px; }
  .support-category-list { grid-template-columns:1fr; }
  .support-category-popover { top:150px; left:8px; right:8px; }
  .support-game-picker-popover { max-height:calc(100vh - 110px); }
  .support-game-option-list { max-height:calc(100vh - 265px); }
  .support-report-form { padding:22px 16px; }
  .support-form-head { align-items:flex-start; flex-direction:column; padding-bottom:14px; }
  .support-confirm-row { align-items:stretch; flex-direction:column; }
  .support-confirm-btn { width:100%; }
  .support-message-compose { grid-template-columns:1fr; padding:12px; }
  .support-chat-closed { margin:0 12px; }
  .support-message-compose .primary-btn { width:100%; }
  .game-request-search { grid-template-columns:auto minmax(0,1fr); }
  .game-request-search .primary-btn { grid-column:1/-1; width:100%; }
  .game-request-result { grid-template-columns:48px minmax(0,1fr); padding:11px; }
  .game-request-cover { width:48px; height:62px; }
  .game-request-action { grid-column:1/-1; justify-content:flex-start; }
  .support-request-history-grid { grid-template-columns:1fr; }
  .support-request-history-grid article:nth-child(odd) { border-right:0; }
  .support-request-history-full .support-request-history-grid { grid-template-columns:1fr; }
  .support-request-history-full .support-request-history-grid article:nth-child(odd) { border-right:0; }
  .notification-inbox-tabs { padding-inline:8px; }
}
@media (prefers-reduced-motion:reduce) { .support-loading i { animation:none; } }

/* Game detail: a calmer, card-driven lower overview that lets the artwork
   breathe while keeping the important host/session details within reach. */
.game-overview-stats {
  gap: 14px;
}
.game-overview-stats > div {
  min-height: 96px;
  position: relative;
  overflow: hidden;
  padding: 18px 19px;
  border-color: rgba(255,255,255,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(181,130,255,.09), transparent 47%),
    linear-gradient(145deg, #1a1d1e, #151718);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.game-overview-stats > div::after {
  content: "";
  position: absolute;
  width: 68px;
  height: 68px;
  right: -25px;
  bottom: -38px;
  border: 1px solid rgba(181,130,255,.17);
  border-radius: 50%;
}
.game-overview-stats > div:nth-child(2)::after { border-color: rgba(121,196,255,.18); }
.game-overview-stats > div:nth-child(3)::after { border-color: rgba(125,223,163,.18); }
.game-overview-stats > div:nth-child(4)::after { border-color: rgba(198,166,255,.18); }
.game-overview-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  color: #929a95;
  font-size: 8px;
  font-weight: 800;
}
.game-overview-stats span i {
  color: #e8c54d;
  font-size: 12px;
}
.game-overview-stats > div:nth-child(2) span i { color: #8fc8ff; }
.game-overview-stats > div:nth-child(3) span i { color: #91e4ad; }
.game-overview-stats > div:nth-child(4) span i { color: #cbb0ff; }
.game-overview-stats strong {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  font-size: 16px;
  letter-spacing: -.45px;
}

.game-page-content {
  grid-template-columns: minmax(0,1fr) minmax(316px,356px);
  gap: 22px;
}
.game-page-main { gap: 22px; }
.game-about {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(255,255,255,.085);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, rgba(181,130,255,.11), transparent 34%),
    linear-gradient(142deg, #1a1d1e 0%, #151718 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.game-about::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -95px;
  width: 290px;
  height: 290px;
  border: 50px solid rgba(181,130,255,.035);
  border-radius: 50%;
  pointer-events: none;
}
.game-about .panel-title {
  min-height: 91px;
  position: relative;
  z-index: 1;
  align-items: center;
  margin: 0;
  padding: 23px 26px 20px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-about .panel-title::before {
  content: "";
  width: 4px;
  height: 31px;
  margin-right: 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, #E2D3FF, #8A5DE8);
  box-shadow: 0 0 17px rgba(181,130,255,.2);
}
.game-about .panel-title h3 {
  margin-right: auto;
  font-size: 19px;
  letter-spacing: -.65px;
}
.game-about .panel-title span {
  max-width: min(38vw,230px);
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid rgba(181,130,255,.16);
  border-radius: 999px;
  background: rgba(181,130,255,.07);
  color: #E2D3FF;
  font-size: 7px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-about > p {
  position: relative;
  z-index: 1;
  max-width: 970px;
  margin: 0;
  padding: 23px 26px 25px;
  color: #d2d6d2;
  font-size: 11px;
  line-height: 1.82;
}
.game-about .game-id-grid {
  position: relative;
  z-index: 1;
  gap: 1px;
  margin: 0;
  padding: 1px 0 0;
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.055);
}
.game-about .game-id-grid div {
  min-height: 95px;
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: rgba(16,18,19,.48);
}
.game-about .game-id-grid div::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: rgba(181,130,255,.58);
  opacity: .82;
}
.game-about .game-id-grid div:nth-child(2)::before { background: rgba(126,194,255,.64); }
.game-about .game-id-grid div:nth-child(3)::before { background: rgba(112,226,163,.61); }
.game-about .game-id-grid div:nth-child(4)::before { background: rgba(205,174,255,.62); }
.game-about .game-id-grid span {
  color: #878f89;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.game-about .game-id-grid strong {
  margin-top: 11px;
  color: #f0f2ee;
  font-size: 12px;
  letter-spacing: -.2px;
}

/* The DLC catalog is host-owned metadata. A clear added/missing state keeps
   expansion content understandable without turning the game page into an
   editable store or exposing host paths and entitlement data. */
.game-dlc-section {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(100,225,154,.16);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, rgba(69,209,124,.12), transparent 38%),
    linear-gradient(142deg, #19201c 0%, #151817 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.026);
}
.game-dlc-section::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  top: -153px;
  right: -96px;
  border: 36px solid rgba(94,228,145,.055);
  border-radius: 50%;
  pointer-events: none;
}
.game-dlc-heading {
  position: relative;
  z-index: 1;
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 26px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-dlc-heading > div { min-width: 0; }
.game-dlc-heading .home-kicker { color: #8ddaaa; font-size: 7px; }
.game-dlc-heading h2 { margin: 5px 0 5px; font-size: 19px; letter-spacing: -.65px; }
.game-dlc-heading p { max-width: 570px; margin: 0; color: #aab3ad; font-size: 9px; line-height: 1.55; }
.game-dlc-summary {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(105,235,158,.24);
  border-radius: 11px;
  background: rgba(61,192,112,.095);
  color: #c8f4d5;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.game-dlc-summary i { color: #7ae5a3; font-size: 12px; }
.game-dlc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  padding: 14px 18px 18px;
}
.game-dlc-card {
  min-width: 0;
  min-height: 82px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(12,15,14,.35);
}
.game-dlc-card::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 0;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: rgba(239,159,92,.76);
}
.game-dlc-card.is-added { border-color: rgba(105,232,157,.17); background: linear-gradient(130deg, rgba(52,170,95,.11), rgba(13,17,15,.28)); }
.game-dlc-card.is-added::before { background: rgba(103,237,159,.78); }
.game-dlc-cover {
  width: 52px;
  height: 60px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: linear-gradient(145deg, #27302a, #151916);
  color: #a8b4aa;
}
.game-dlc-card.is-added .game-dlc-cover { border-color: rgba(98,230,151,.26); color: #8ae8ae; }
.game-dlc-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-dlc-cover > i { font-size: 18px; }
.game-dlc-status-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,159,92,.65);
  border-radius: 7px;
  background: #3a2818;
  color: #E2D3FF;
  box-shadow: 0 3px 9px rgba(0,0,0,.34);
  font-size: 8px;
}
.game-dlc-card.is-added .game-dlc-status-icon { border-color: rgba(116,239,165,.7); background: #16492b; color: #dcffea; }
.game-dlc-copy { min-width: 0; display: grid; gap: 4px; }
.game-dlc-state { display: inline-flex; align-items: center; gap: 4px; color: #deae82; font-size: 7px; font-weight: 850; letter-spacing: .2px; text-transform: uppercase; }
.game-dlc-card.is-added .game-dlc-state { color: #91e9b2; }
.game-dlc-state i { font-size: 9px; }
.game-dlc-copy strong { overflow: hidden; color: #f0f3ef; font-size: 10px; letter-spacing: -.15px; text-overflow: ellipsis; white-space: nowrap; }
.game-dlc-meta { overflow: hidden; color: #878f89; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.game-dlc-empty {
  min-height: 100px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 25px 21px;
  color: #8d9790;
}
.game-dlc-empty > i { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid rgba(123,228,166,.16); border-radius: 13px; background: rgba(90,207,137,.06); color: #91dfa9; font-size: 16px; }
.game-dlc-empty > div { display: grid; gap: 4px; }
.game-dlc-empty strong { color: #e0e6e0; font-size: 10px; }
.game-dlc-empty span { max-width: 590px; color: #949d97; font-size: 8px; line-height: 1.5; }

.game-media-section {
  position: relative;
  overflow: hidden;
  padding: 0 12px 12px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 27px;
  background:
    radial-gradient(circle at 0 0, rgba(119,194,255,.075), transparent 33%),
    linear-gradient(145deg, #191c1d, #141617);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.game-media-section .home-section-head {
  min-height: 97px;
  margin: 0;
  padding: 20px 14px 18px;
  align-items: center;
}
.game-media-section .home-section-head > div {
  display: grid;
  gap: 5px;
}
.game-media-section .home-section-head h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.8px;
}
.game-media-section .home-kicker {
  color: #d7c567;
  font-size: 7px;
}
.game-media-section .game-page-media-pair {
  min-height: clamp(320px,31vw,430px);
  margin: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,.075);
  border-radius: 20px;
  background: #101213;
  box-shadow: 0 16px 38px rgba(0,0,0,.23);
}
.game-media-section .game-page-media-pair .game-shot-carousel {
  min-height: clamp(320px,31vw,430px);
}
.game-media-section .game-page-media-pair .game-cover-panel {
  background: #151819;
}
.game-media-section .game-page-media-pair .game-cover-panel::after {
  background: linear-gradient(180deg, rgba(5,6,6,.04), rgba(5,6,6,.54));
}
.game-media-section .game-page-media-pair .game-shot-dots {
  bottom: 15px;
  background: rgba(10,12,12,.64);
}

.game-page-side {
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
  align-self: start;
  gap: 15px;
}
.game-page-side .session-card {
  position: relative;
  overflow: hidden;
  padding: 23px;
  border-color: rgba(181,130,255,.16);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, rgba(181,130,255,.16), transparent 42%),
    linear-gradient(145deg, #1d1d17, #17191a 56%, #141617);
  box-shadow: 0 18px 44px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.035);
}
.game-page-side .session-card::before {
  content: "";
  position: absolute;
  width: 172px;
  height: 172px;
  right: -95px;
  bottom: -110px;
  border: 26px solid rgba(181,130,255,.055);
  border-radius: 50%;
  pointer-events: none;
}
.game-page-side .session-card > * {
  position: relative;
  z-index: 1;
}
.game-page-side .session-card .home-kicker {
  color: #f0cf45;
  font-size: 7px;
}
.game-page-side .session-card h3 {
  max-width: 250px;
  margin: 8px 0 18px;
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -1px;
}
.game-page-side .session-cost {
  min-height: 94px;
  padding: 15px;
  border-color: rgba(181,130,255,.19);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(181,130,255,.15), rgba(133,83,229,.045));
}
.game-page-side .session-cost strong { font-size: 27px; }
.game-page-side .session-balance {
  min-height: 52px;
  font-size: 9px;
}
.game-page-side .session-balance strong {
  color: #f1f3ef;
  font-size: 9px;
}
.game-page-side .guest-session-note {
  padding: 2px 0 1px;
  color: #aeb4ae;
  font-size: 9px;
  line-height: 1.65;
}
.game-page-side .session-card .wide {
  min-height: 53px;
  margin-top: 18px;
  border-radius: 16px;
  box-shadow: 0 11px 26px rgba(133,83,229,.15);
}
.game-page-side .related-panel {
  overflow: hidden;
  padding: 0 9px 9px;
  border-color: rgba(255,255,255,.085);
  border-radius: 25px;
  background: linear-gradient(145deg, #191c1d, #151718);
}
.game-page-side .related-panel .panel-title {
  min-height: 73px;
  margin: 0;
  padding: 16px 9px 13px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-page-side .related-panel .panel-title h3 {
  font-size: 15px;
  letter-spacing: -.3px;
}
.game-page-side .related-panel .panel-title span {
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #919893;
  font-size: 7px;
}
.game-page-side .related-list {
  gap: 7px;
  padding-top: 9px;
}
.game-page-side .related-panel .continue-game {
  min-height: 75px;
  border-color: rgba(255,255,255,.055);
  background: rgba(255,255,255,.018);
}
.game-page-side .related-panel .continue-game:hover {
  background: rgba(255,255,255,.04);
}

@media (max-width:1180px) {
  .game-page-content { grid-template-columns: 1fr; }
  .game-page-side {
    position: static;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px) {
  .game-overview-stats { gap: 9px; }
  .game-overview-stats > div { min-height: 88px; padding: 15px; border-radius: 18px; }
  .game-overview-stats strong { font-size: 14px; }
  .game-about,.game-dlc-section,.game-media-section { border-radius: 22px; }
  .game-about .panel-title { min-height: 80px; padding: 19px 20px 17px; }
  .game-about .panel-title h3 { font-size: 17px; }
  .game-about > p { padding: 20px; font-size: 10px; }
  .game-about .game-id-grid div { min-height: 85px; padding: 14px; }
  .game-about .game-id-grid div::before { left: 14px; right: 14px; }
  .game-dlc-heading { min-height: 0; padding: 18px 20px 16px; }
  .game-dlc-heading h2 { font-size: 17px; }
  .game-dlc-grid { padding: 12px; }
  .game-dlc-empty { padding: 16px 20px 19px; }
  .game-media-section { padding: 0 9px 9px; }
  .game-media-section .home-section-head { min-height: 82px; padding: 16px 10px 14px; }
  .game-media-section .home-section-head h2 { font-size: 18px; }
  .game-media-section .game-page-media-pair,
  .game-media-section .game-page-media-pair .game-shot-carousel { min-height: 300px; }
  .game-page-side { grid-template-columns: 1fr; }
  .game-page-side .session-card { padding: 20px; border-radius: 22px; }
}
@media (max-width:520px) {
  .game-overview-stats { grid-template-columns: 1fr 1fr; }
  .game-overview-stats > div { min-height: 82px; padding: 13px; }
  .game-overview-stats span { font-size: 7px; }
  .game-overview-stats strong { margin-top: 9px; font-size: 12px; }
  .game-about .panel-title { align-items: flex-start; gap: 10px; }
  .game-about .panel-title::before { width: 3px; height: 26px; margin-right: 4px; }
  .game-about .panel-title span { max-width: 42vw; }
  .game-about .game-id-grid { grid-template-columns: 1fr; }
  .game-about .game-id-grid div { min-height: 74px; }
  .game-dlc-heading { align-items: flex-start; flex-direction: column; gap: 11px; }
  .game-dlc-summary { min-height: 30px; }
  .game-dlc-grid { grid-template-columns: 1fr; }
  .game-media-section .game-page-media-pair { min-height: 0; }
  .game-media-section .game-page-media-pair .game-cover-panel { min-height: 270px; }
  .game-media-section .game-page-media-pair .game-shot-carousel { min-height: 205px; }
  .game-page-side .session-card h3 { font-size: 22px; }
}

/* The lower game page works as a small game dashboard instead of a stack of
   unrelated cards. The hero stays deliberately untouched; this is only the
   detail, discovery, and session area beneath it. */
.game-overview-layout {
  grid-template-columns: minmax(0, 1fr) minmax(318px, 352px);
  gap: 24px;
  align-items: start;
}
.game-overview-primary {
  min-width: 0;
  display: grid;
  gap: 24px;
}
.game-overview-rail {
  min-width: 0;
  gap: 14px;
}

.game-overview-story {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(110% 115% at 100% 0, rgba(181,130,255,.12), transparent 52%),
    linear-gradient(145deg, #1a1d1e 0%, #151718 68%);
}
.game-overview-story::before {
  width: 280px;
  height: 280px;
  top: -176px;
  right: -118px;
  border-width: 42px;
}
.game-overview-story-head {
  min-height: 98px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 25px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.game-overview-story-head > div { min-width: 0; }
.game-overview-story-head .home-kicker { color: #e3c951; font-size: 7px; }
.game-overview-story-head h2 {
  margin: 6px 0 0;
  color: #f5f6ef;
  font-size: 21px;
  letter-spacing: -.75px;
}
.game-overview-type {
  max-width: min(40%, 215px);
  min-height: 34px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(181,130,255,.18);
  border-radius: 11px;
  background: rgba(181,130,255,.07);
  color: #e5d385;
  font-size: 8px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-overview-type i { flex: 0 0 auto; color: #b582ff; font-size: 11px; }
.game-overview-story-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(255px, .83fr);
  gap: 1px;
  background: rgba(255,255,255,.055);
}
.game-overview-description {
  min-width: 0;
  padding: 24px 25px 25px;
  background: rgba(17,19,20,.52);
}
.game-overview-description > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aeb6af;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .28px;
  text-transform: uppercase;
}
.game-overview-description > span i { color: #e7c845; font-size: 11px; }
.game-overview-description p {
  max-width: 690px;
  margin: 12px 0 0;
  color: #d2d7d2;
  font-size: 11px;
  line-height: 1.78;
}
.game-overview-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 19px;
}
.game-overview-tag-list .game-tag {
  min-height: 25px;
  padding-inline: 8px;
  font-size: 7px;
}
.game-overview-details {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  background: rgba(255,255,255,.055);
}
.game-overview-details > div {
  min-width: 0;
  min-height: 105px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 17px;
  background: linear-gradient(145deg, rgba(25,28,29,.96), rgba(16,18,19,.92));
}
.game-overview-details > div::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: -19px;
  bottom: -25px;
  border: 1px solid rgba(181,130,255,.13);
  border-radius: 50%;
}
.game-overview-details > div:nth-child(2)::after { border-color: rgba(119,196,255,.16); }
.game-overview-details > div:nth-child(3)::after { border-color: rgba(112,226,163,.15); }
.game-overview-details > div:nth-child(4)::after { border-color: rgba(201,172,255,.15); }
.game-overview-details dt,
.game-overview-details dd { min-width: 0; margin: 0; }
.game-overview-details dt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #89918c;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.game-overview-details dt i { color: #ebc844; font-size: 10px; }
.game-overview-details > div:nth-child(2) dt i { color: #8bc7fb; }
.game-overview-details > div:nth-child(3) dt i { color: #84dfa8; }
.game-overview-details > div:nth-child(4) dt i { color: #cbb1ff; }
.game-overview-details dd {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #f0f3ee;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-dlc-section { border-color: rgba(99,228,153,.2); }
.game-dlc-heading {
  min-height: 114px;
  padding: 23px 25px 20px;
}
.game-dlc-heading h2 { color: #eff7f0; }
.game-dlc-heading p { max-width: 610px; color: #aeb7af; }
.game-dlc-summary { gap: 8px; padding-inline: 12px; }
.game-dlc-summary span { overflow: hidden; text-overflow: ellipsis; }
.game-dlc-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 10px; padding: 15px 18px 19px; }
.game-dlc-card {
  min-height: 88px;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 12px;
  padding: 11px;
  border-radius: 17px;
}
.game-dlc-cover { width: 54px; height: 64px; }
.game-dlc-copy { gap: 5px; }
.game-dlc-copy strong { font-size: 10px; }

.game-overview-media { padding: 0 12px 12px; }
.game-overview-media .home-section-head {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 13px 19px;
}
.game-overview-media .home-section-head > div { min-width: 0; }
.game-overview-media .home-section-head p {
  max-width: 540px;
  margin: 6px 0 0;
  color: #a5aea9;
  font-size: 8px;
  line-height: 1.55;
}
.game-media-count {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(119,196,255,.18);
  border-radius: 11px;
  background: rgba(119,196,255,.075);
  color: #b9dcf7;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.game-media-count i { color: #84c7f6; font-size: 11px; }
.game-overview-media .game-page-media-pair {
  min-height: clamp(330px, 34vw, 465px);
  border-radius: 21px;
}
.game-overview-media .game-page-media-pair .game-shot-carousel { min-height: clamp(330px, 34vw, 465px); }

.game-session-card {
  padding: 0 !important;
  border-color: rgba(181,130,255,.2) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(181,130,255,.17), transparent 48%),
    linear-gradient(145deg, #1e1e18, #17191a 57%, #141617) !important;
}
.game-session-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.game-session-heading > div { min-width: 0; }
.game-session-heading .home-kicker { display: block; }
.game-session-heading h2 {
  max-width: 225px;
  margin: 8px 0 0;
  color: #fffdf0;
  font-size: 23px;
  line-height: 1.04;
  letter-spacing: -1px;
}
.game-session-ready {
  min-height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(106,236,159,.22);
  border-radius: 9px;
  background: rgba(66,190,112,.09);
  color: #b4e8c4;
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}
.game-session-ready i { color: #78e4a0; font-size: 9px; }
.game-session-card .session-cost {
  margin: 17px 17px 0;
  min-height: 88px;
  padding: 14px;
}
.game-session-card .session-cost strong { font-size: 26px; }
.game-session-balances { padding: 0 17px; }
.game-session-card .session-balance { min-height: 48px; }
.game-session-assurance {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 13px 17px 0;
  padding: 10px 11px;
  border: 1px solid rgba(181,130,255,.1);
  border-radius: 12px;
  background: rgba(181,130,255,.045);
  color: #bbc0b7;
  font-size: 8px;
  line-height: 1.5;
}
.game-session-assurance i { flex: 0 0 auto; color: #f2cc45; font-size: 11px; }
.game-session-card .wide { width: calc(100% - 34px); margin: 16px 17px 17px; }
.game-session-card .guest-session-note { margin: 0; padding: 14px 0 0; }

.game-host-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 19px;
  background: rgba(255,255,255,.055);
}
.game-host-card > div {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: linear-gradient(145deg, #191c1d, #151718);
}
.game-host-card > div > i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181,130,255,.13);
  border-radius: 10px;
  background: rgba(181,130,255,.06);
  color: #efd048;
  font-size: 12px;
}
.game-host-card > div:nth-child(2) > i { border-color: rgba(119,196,255,.15); background: rgba(119,196,255,.06); color: #93cbf3; }
.game-host-card span { min-width: 0; display: grid; gap: 4px; }
.game-host-card strong { overflow: hidden; color: #e9ece7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.game-host-card small { color: #858e88; font-size: 7px; line-height: 1.35; }

.game-related-panel { padding-bottom: 10px !important; }
.game-related-panel .panel-title { min-height: 83px !important; padding: 17px 10px 15px !important; }
.game-related-panel .panel-title > div { display: grid; gap: 4px; }
.game-related-panel .panel-title .home-kicker { color: #95a39b; font-size: 6.5px; }
.game-related-panel .panel-title h3 { margin: 0; color: #f1f3ef; }
.game-related-panel .related-list { padding-top: 10px; }
.game-related-panel .continue-game { min-height: 78px !important; }
.game-related-empty {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 8px 3px;
  color: #8f9791;
}
.game-related-empty > i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181,130,255,.13);
  border-radius: 11px;
  color: #e4c648;
  font-size: 13px;
}
.game-related-empty > div { min-width: 0; display: grid; gap: 4px; }
.game-related-empty strong { color: #e0e4df; font-size: 8px; }
.game-related-empty span { color: #858e88; font-size: 7px; line-height: 1.4; }

@media (max-width:1180px) {
  .game-overview-layout { grid-template-columns: 1fr; }
  .game-overview-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .game-overview-rail .game-related-panel { grid-column: 1 / -1; }
  .game-related-panel .related-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .game-related-panel .continue-game { min-width: 0; }
}
@media (max-width:760px) {
  .game-overview-layout,.game-overview-primary { gap: 16px; }
  .game-overview-story-head { min-height: 84px; padding: 18px 19px 16px; }
  .game-overview-story-head h2 { font-size: 18px; }
  .game-overview-story-body { grid-template-columns: 1fr; }
  .game-overview-description { padding: 19px; }
  .game-overview-description p { font-size: 10px; }
  .game-overview-details > div { min-height: 87px; padding: 14px; }
  .game-dlc-heading { min-height: 0; padding: 18px 20px 16px; }
  .game-dlc-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); padding: 12px; }
  .game-overview-media .home-section-head { min-height: 90px; padding: 17px 10px 15px; }
  .game-overview-media .game-page-media-pair,
  .game-overview-media .game-page-media-pair .game-shot-carousel { min-height: 300px; }
  .game-overview-rail { grid-template-columns: 1fr; }
  .game-overview-rail .game-related-panel { grid-column: auto; }
  .game-related-panel .related-list { grid-template-columns: 1fr; }
}
@media (max-width:520px) {
  .game-overview-story-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .game-overview-type { max-width: 100%; }
  .game-overview-details { grid-template-columns: 1fr 1fr; }
  .game-overview-details > div { min-height: 82px; padding: 12px; }
  .game-overview-details dt { font-size: 6.5px; }
  .game-overview-details dd { font-size: 9px; }
  .game-dlc-heading { align-items: flex-start; flex-direction: column; gap: 11px; }
  .game-overview-media .home-section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .game-overview-media .game-page-media-pair { min-height: 0; }
  .game-overview-media .game-page-media-pair .game-cover-panel { min-height: 240px; }
  .game-overview-media .game-page-media-pair .game-shot-carousel { min-height: 205px; }
  .game-session-heading { padding: 19px 18px 16px; }
  .game-session-heading h2 { font-size: 21px; }
  .game-session-ready { font-size: 6.5px; }
  .game-session-card .session-cost { margin: 14px 14px 0; }
  .game-session-balances { padding: 0 14px; }
  .game-session-assurance { margin: 12px 14px 0; }
  .game-session-card .wide { width: calc(100% - 28px); margin: 14px 14px; }
}

/* Game overview, content-first edition. The hero already handles the visual
   drama; the area below it should help someone decide what to play, not repeat
   transport details in a nest of decorative cards. */
.game-overview-summary {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: #17191a;
}
.game-overview-summary > div {
  min-width: 0;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px 18px;
  border-left: 1px solid rgba(255,255,255,.065);
}
.game-overview-summary > div:first-child { border-left: 0; }
.game-overview-summary span {
  overflow: hidden;
  color: #8e9791;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .55px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.game-overview-summary strong {
  overflow: hidden;
  color: #f1f3ef;
  font-size: 12px;
  letter-spacing: -.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-overview-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 28px;
  align-items: start;
}
.game-overview-primary { gap: 28px; }
.game-overview-rail { gap: 0; }

/* Gallery: actual screenshots are the visual reward. Thumbnails are visible
   controls instead of relying on ambiguous dots alone. */
.game-overview-gallery {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 23px;
  background: #151718;
}
.game-overview-gallery-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px 15px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.game-overview-gallery-head > div { min-width: 0; }
.game-overview-gallery-head .home-kicker { color: #9aa49d; font-size: 7px; }
.game-overview-gallery-head h2 {
  margin: 5px 0 0;
  color: #f3f4ef;
  font-size: 20px;
  letter-spacing: -.65px;
}
.game-overview-gallery-count {
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: #aeb7b0;
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}
.game-overview-gallery-count i { color: #d9bb4b; font-size: 11px; }
.game-overview-gallery-stage {
  min-height: clamp(300px, 34vw, 520px);
  height: min(34vw, 520px);
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #0d0f10;
}
.game-overview-gallery-stage > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  transition: opacity .18s ease, transform .24s ease;
}
.game-overview-gallery-stage > img.is-switching { opacity: .62; transform: scale(1.012); }
.game-overview-gallery-stage::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,6,6,.68));
}
.game-overview-gallery-poster {
  width: clamp(70px, 9vw, 118px);
  aspect-ratio: 2 / 3;
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: #202324;
  box-shadow: 0 14px 28px rgba(0,0,0,.34);
}
.game-overview-gallery-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-overview-gallery-stage figcaption {
  min-height: 28px;
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 13px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(12,14,15,.64);
  color: #e3e8e2;
  font-size: 7px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}
.game-overview-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(181,130,255,.52) transparent;
}
.game-overview-gallery-thumb {
  width: 88px;
  min-width: 88px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #202324;
  cursor: pointer;
  opacity: .63;
  transition: opacity .16s ease, border-color .16s ease, transform .16s ease;
}
.game-overview-gallery-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-overview-gallery-thumb.active { border-color: var(--yellow); opacity: 1; box-shadow: 0 0 0 1px rgba(181,130,255,.22); }
@media (hover:hover) and (pointer:fine) {
  .game-overview-gallery-thumb:hover { opacity: 1; transform: translateY(-1px); }
}
.game-overview-gallery-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* A quiet editorial description, with player-facing facts only. */
.game-overview-about {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 23px;
  background: #17191a;
}
.game-overview-about-head { padding: 21px 23px 0; }
.game-overview-about-head .home-kicker { color: #d7bf50; font-size: 7px; }
.game-overview-about-head h2 {
  margin: 6px 0 0;
  color: #f3f4ef;
  font-size: 20px;
  letter-spacing: -.65px;
}
.game-overview-about-copy { padding: 14px 23px 22px; }
.game-overview-about-copy > p {
  max-width: 780px;
  margin: 0;
  color: #d0d6d0;
  font-size: 11px;
  line-height: 1.75;
}
.game-overview-tag-list { gap: 7px; margin-top: 17px; }
.game-overview-tag-list .game-overview-tag { min-height: 26px; padding-inline: 9px; font-size: 7px; }
.game-overview-tag-more {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #a9b0ab;
  font-size: 7px;
  font-weight: 850;
}
.game-overview-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.065);
}
.game-overview-facts > div {
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 17px;
  border-left: 1px solid rgba(255,255,255,.065);
}
.game-overview-facts > div:first-child { border-left: 0; }
.game-overview-facts dt,
.game-overview-facts dd { min-width: 0; margin: 0; }
.game-overview-facts dt {
  overflow: hidden;
  color: #89928c;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .45px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.game-overview-facts dd {
  overflow: hidden;
  color: #eef1ec;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DLC is deliberately conditional: it appears only for a real catalog. */
.game-expansions {
  overflow: hidden;
  border: 1px solid rgba(112,220,156,.17);
  border-radius: 23px;
  background: #161b18;
}
.game-expansions-head {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 21px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.game-expansions-head > div { min-width: 0; }
.game-expansions-head .home-kicker { color: #87d8a6; font-size: 7px; }
.game-expansions-head h2 { margin: 5px 0 4px; color: #eff5ef; font-size: 18px; letter-spacing: -.55px; }
.game-expansions-head p { margin: 0; color: #a7b2aa; font-size: 8px; line-height: 1.5; }
.game-expansions-summary {
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(111,229,158,.2);
  border-radius: 9px;
  background: rgba(64,178,104,.08);
  color: #bce9ca;
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}
.game-expansions-summary i { color: #87e0a8; font-size: 10px; }
.game-expansion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
  padding: 13px;
}
.game-expansion-card {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(9,12,10,.22);
}
.game-expansion-card.is-added { border-color: rgba(108,228,155,.2); background: rgba(55,146,84,.07); }
.game-expansion-cover {
  width: 48px;
  height: 58px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #242b26;
  color: #9bb1a0;
}
.game-expansion-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.game-expansion-cover > i { font-size: 16px; }
.game-expansion-copy { min-width: 0; display: grid; gap: 4px; }
.game-expansion-copy strong { overflow: hidden; color: #edf3ee; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-expansion-state { display: inline-flex; align-items: center; gap: 4px; color: #d4a274; font-size: 6.5px; font-weight: 850; letter-spacing: .35px; text-transform: uppercase; }
.game-expansion-card.is-added .game-expansion-state { color: #8fdfa8; }
.game-expansion-state i { font-size: 8px; }
.game-expansion-meta { overflow: hidden; color: #87928a; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }

/* The rail is a launch decision, not a second dashboard. */
.game-play-card {
  overflow: hidden;
  border: 1px solid rgba(181,130,255,.18);
  border-radius: 21px;
  background: #191a17;
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
.game-play-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.game-play-card-head > div { min-width: 0; }
.game-play-card-head .home-kicker { color: #ddc856; font-size: 6.5px; }
.game-play-card-head h2 { margin: 6px 0 0; color: #f7f4e8; font-size: 21px; letter-spacing: -.75px; }
.game-play-status {
  min-height: 27px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #c8cec8;
  font-size: 7px;
  font-weight: 850;
  white-space: nowrap;
}
.game-play-status.is-ready { border-color: rgba(105,232,157,.22); color: #b6e7c5; }
.game-play-status.is-ready i { color: #78df9e; }
.game-play-status.is-unavailable { border-color: rgba(238,125,125,.22); color: #ffc6c6; }
.game-play-rate {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 16px 0;
  padding: 12px;
  border: 1px solid rgba(181,130,255,.13);
  border-radius: 13px;
  background: rgba(181,130,255,.055);
}
.game-play-rate-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.game-play-rate > div { min-width: 0; display: grid; gap: 3px; }
.game-play-rate span { color: #b5b5a8; font-size: 7px; font-weight: 800; }
.game-play-rate strong { color: #fff4c5; font-size: 20px; letter-spacing: -.6px; }
.game-play-rate strong small { color: #e1d7aa; font-size: 7px; font-weight: 800; letter-spacing: 0; }
.game-play-details { margin: 8px 16px 0; }
.game-play-details > div {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.game-play-details dt,.game-play-details dd { min-width: 0; margin: 0; font-size: 8px; }
.game-play-details dt { color: #8f9891; }
.game-play-details dd { overflow: hidden; color: #e9ece6; font-weight: 850; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.game-play-card .game-page-play.wide { width: calc(100% - 32px); min-height: 48px; margin: 16px 16px 7px; border-radius: 13px; }
.game-play-report {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9fa7a0;
  cursor: pointer;
  font-size: 7px;
  font-weight: 800;
}
.game-play-report i { color: #d9ba51; font-size: 10px; }
.game-play-report:hover { color: #f1f3ed; }

/* Related games are a proper discovery shelf, not sidebar filler. */
.game-related-shelf {
  display: grid;
  gap: 13px;
  padding-top: 3px;
}
.game-related-shelf > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
}
.game-related-shelf header > div { min-width: 0; }
.game-related-shelf .home-kicker { color: #9ea7a0; font-size: 7px; }
.game-related-shelf h2 { margin: 6px 0 0; color: #f2f4ef; font-size: 21px; letter-spacing: -.7px; }
.game-related-shelf > header > span { color: #89928b; font-size: 7px; font-weight: 800; }
.game-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.game-related-tile {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: #17191a;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.game-related-art {
  min-height: 135px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end;
  background-position: center;
  background-size: cover;
}
.game-related-art::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,6,6,.5)); pointer-events: none; }
.game-related-art img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; }
.game-related-art > span { position: relative; z-index: 1; padding: 0 10px 8px 0; color: rgba(255,255,255,.8); font-size: 26px; font-weight: 1000; letter-spacing: -2px; }
.game-related-copy { min-width: 0; display: grid; gap: 4px; padding: 11px 11px 7px; }
.game-related-copy strong { overflow: hidden; color: #eff1ed; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.game-related-copy small { overflow: hidden; color: #a6aea8; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.game-related-open { min-height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 9px; color: #d7bd52; font-size: 7px; font-weight: 850; }
.game-related-open i { font-size: 13px; }
@media (hover:hover) and (pointer:fine) {
  .game-related-tile:hover { transform: translateY(-2px); border-color: rgba(181,130,255,.28); background: #1b1e1f; }
}
.game-related-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width:1180px) {
  .game-overview-layout { grid-template-columns: 1fr; }
  .game-overview-rail { position: static; }
  .game-play-card { max-width: none; }
}
@media (max-width:760px) {
  .game-overview-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .game-overview-summary > div:nth-child(odd) { border-left: 0; }
  .game-overview-summary > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.065); }
  .game-overview-layout,.game-overview-primary { gap: 17px; }
  .game-overview-gallery,.game-overview-about,.game-expansions,.game-play-card { border-radius: 18px; }
  .game-overview-gallery-stage { min-height: 300px; height: min(56vw, 410px); }
  .game-overview-gallery-head { min-height: 70px; padding: 15px 16px 13px; }
  .game-overview-gallery-head h2,.game-overview-about-head h2 { font-size: 18px; }
  .game-overview-about-head { padding: 18px 18px 0; }
  .game-overview-about-copy { padding: 13px 18px 18px; }
  .game-overview-facts { grid-template-columns: 1fr 1fr; }
  .game-overview-facts > div:nth-child(odd) { border-left: 0; }
  .game-overview-facts > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.065); }
  .game-expansions-head { min-height: 0; align-items: flex-start; flex-direction: column; padding: 17px 18px; }
  .game-expansion-grid { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); padding: 10px; }
  .game-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .game-related-art { min-height: 120px; }
}
@media (max-width:460px) {
  .game-overview-summary > div { min-height: 68px; padding: 12px; }
  .game-overview-summary strong { font-size: 10px; }
  .game-overview-gallery-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .game-overview-gallery-stage { min-height: 245px; height: 64vw; }
  .game-overview-gallery-poster { width: 66px; left: 12px; bottom: 12px; }
  .game-overview-gallery-stage figcaption { right: 10px; bottom: 10px; }
  .game-overview-gallery-thumb { width: 72px; min-width: 72px; }
  .game-overview-facts > div { min-height: 69px; padding: 11px; }
  .game-expansion-grid,.game-related-grid { grid-template-columns: 1fr; }
  .game-play-card-head { padding: 17px 16px 14px; }
  .game-play-rate,.game-play-details { margin-left: 13px; margin-right: 13px; }
  .game-play-card .game-page-play.wide { width: calc(100% - 26px); margin-left: 13px; margin-right: 13px; }
  .game-play-report { margin-left: 13px; }
}