/* Shared Ranksen palette and header. Legacy gameplay tokens stay in styles.css until #165. */
.topbar .header-login,.topbar .header-create{min-height:42px;border:1px solid var(--ranksen-line);border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface-secondary);color:var(--ranksen-text);padding:0 14px;white-space:nowrap;font-size:14px;font-weight:700;cursor:pointer}
.topbar .header-login{display:inline-flex;align-items:center;gap:6px;border-color:transparent;background:transparent;color:var(--ranksen-muted)}
.header-account-avatar{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--ranksen-accent-subtle);color:var(--ranksen-text);border:1px solid var(--ranksen-accent);font-size:14px;font-weight:800}
.topbar .header-login.is-signed-in{color:var(--ranksen-text)}
.header-create-short{display:none}
.topbar .header-create:hover,.topbar .header-login:hover{border-color:var(--ranksen-line-strong);color:#fff}
.topbar .header-create:disabled,.topbar .header-login:disabled{opacity:.6;cursor:wait}
.topbar-actions{position:relative}.header-action-status:not([hidden]){position:absolute;z-index:30;right:0;top:calc(100% + 6px);width:min(260px,80vw);padding:8px 10px;border:1px solid var(--ranksen-line);border-radius:9px;background:var(--ranksen-surface);color:var(--ranksen-text);font-size:12px}
body.is-home #topTag{display:none}
:root{
  --ranksen-bg:#060e17;
  --ranksen-surface:#101a28;
  --ranksen-surface-secondary:#0c1521;
  --ranksen-surface-subtle:#0d1824;
  --ranksen-text:#f5f6fc;
  --ranksen-muted:#a9bad1;
  --ranksen-quiet:#98acc9;
  --ranksen-accent:#8276ff;
  --ranksen-accent-hover:#6c5cff;
  --ranksen-accent-subtle:#2d2650;
  --ranksen-line:#2a394b;
  --ranksen-line-strong:#354159;
  --ranksen-focus:#9b8eff;
  --ranksen-radius-small:9px;
  --ranksen-radius-medium:14px;
  --ranksen-radius-card:17px;
  --ranksen-radius-pill:999px;
  --ranksen-shell-wide:1376px;
  --ranksen-shell-play:960px;
  --ranksen-shell-padding:28px;
  --ranksen-shell-padding-mobile:16px;
}

.app-shell{width:min(100%,var(--ranksen-shell-play))}
body.is-home .app-shell{width:min(100%,var(--ranksen-shell-wide));padding:14px var(--ranksen-shell-padding) 36px}
.topbar{min-height:52px;padding-bottom:12px;border-bottom:1px solid var(--ranksen-line)}
body.is-home .topbar{margin-bottom:0}
body.is-compact .app-shell{padding-top:12px}
body.is-compact .topbar{min-height:44px;margin-bottom:10px;padding-bottom:6px}

.ranksen-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:0 1 auto;min-width:0;color:var(--ranksen-text);font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1;text-decoration:none;white-space:nowrap}
.ranksen-brand:hover{color:var(--ranksen-text)}
.ranksen-brand .brand-crown{flex:none;color:#7761ff}
.ranksen-brand:focus-visible,.topbar button:focus-visible{outline:2px solid var(--ranksen-focus);outline-offset:3px;border-radius:var(--ranksen-radius-small)}
.topbar-actions{flex:0 0 auto}
.topbar #topTag{max-width:min(34vw,220px);overflow:hidden;text-overflow:ellipsis;border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface-secondary);color:var(--ranksen-muted)}
body.is-home #topTag{display:none}
.topbar .language-trigger{width:42px;height:42px;border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface);color:var(--ranksen-text)}
.topbar .language-menu{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-medium);background:var(--ranksen-surface);color:var(--ranksen-text)}
.topbar .language-option{border-radius:var(--ranksen-radius-small);color:var(--ranksen-muted)}
.topbar .language-option:hover,.topbar .language-option.is-current{background:var(--ranksen-accent-subtle);color:var(--ranksen-text)}
.topbar .language-trigger:focus-visible,.topbar .language-option:focus-visible{outline:2px solid var(--ranksen-focus);outline-offset:3px}

@media(max-width:759px){
  body.is-home .app-shell{padding:10px var(--ranksen-shell-padding-mobile) 28px}
  .topbar{min-height:48px;padding-bottom:10px}
  .ranksen-brand{gap:6px;font-size:24px}
  .ranksen-brand .brand-crown{width:29px;height:29px}
  .topbar .language-trigger{width:44px;height:44px}
  .topbar #topTag,.topbar .tag{display:none}
  .topbar .header-login{justify-content:center;width:42px;padding:0;border-color:var(--ranksen-line)}
  .topbar .header-login-text{display:none}
  .topbar .header-create-full{display:none}.topbar .header-create-short{display:inline}
  .topbar .header-create{padding:0 10px}
  .topbar-actions{gap:6px}
  body.is-compact .app-shell{padding-top:8px}
  body.is-compact .topbar{min-height:44px;margin-bottom:8px;padding-bottom:4px}
  body.is-compact .ranksen-brand{font-size:22px}
  body.is-compact .brand-crown{width:27px;height:27px}
}
@media(max-width:360px){
  .app-shell{padding-left:12px;padding-right:12px}
  body.is-home .app-shell{padding-left:12px;padding-right:12px}
  .ranksen-brand{gap:4px;font-size:20px}
  body.is-compact .ranksen-brand{font-size:20px}
  .ranksen-brand .brand-crown{width:24px;height:24px}
  .topbar-actions{gap:4px}
  .topbar .header-login,.topbar .language-trigger{width:38px;height:38px;min-height:38px}
  .topbar .header-create{min-height:38px;padding:0 8px;font-size:12px}
}
@media(max-width:430px){body.is-compact #topTag,body.is-result #topTag{display:none}}