@import url('tokens.css?v=1');
@import url('chat.css?v=6');
/* touch-action: manipulation stops iOS double-tap zoom on rapid taps but keeps pinch-zoom */
button,
[role="button"],
input[type="button"],
input[type="submit"],
select,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --sh-bg: var(--bg);
  --sh-panel: var(--bg-raised);
  --sh-panel-2: var(--panel);
  --sh-panel-3: var(--line);
  --sh-line: var(--line);
  --sh-text: var(--text);
  --sh-muted: var(--text-muted);
  --sh-violet: var(--violet);
  --sh-violet-hover: var(--violet-hover);
  --sh-green: var(--lime);
  --sh-gold: var(--gold);
  --sh-red: var(--pink);
  --sh-radius: var(--r-input);
  --topbar-h: 68px;
  --ticker-h: 38px;
  --chrome-h: calc(var(--topbar-h) + var(--ticker-h));
  --sidebar-w: 0px;
  --chat-w: 320px;
  --sh-ease: var(--ease);
}

body.has-shell { overflow-x: hidden; font-family: var(--font-body); background: var(--bg); color: var(--text); transition: padding .25s var(--ease); }
body.has-shell.authed.chat-open { padding-right: var(--chat-w); }
body.has-shell .main { padding-top: calc(var(--chrome-h) + 24px); }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  background: var(--bg-raised); border-bottom: 1px solid var(--line); z-index: 1000;
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
}
.topbar .logo {
  display: flex; align-items: center; flex-shrink: 0; text-decoration: none;
  background: none; -webkit-text-fill-color: initial;
}
.topbar .logo img { height: 38px; width: auto; display: block; }
.topnav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.topnav a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 16px; border-radius: 10px;
  font-weight: 600; font-size: 15px; color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.topnav a:hover { color: var(--text); }
.topnav a.on { background: var(--line); color: var(--text); }
.topbar-center { display: flex; align-items: center; min-width: 0; flex-shrink: 0; margin-left: auto; }
.wallet-group { display: none; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; }
.wallet-group.active { display: flex; }
.balance-pill {
  display: flex; align-items: center; gap: 8px; background: var(--bg);
  padding: 0 16px; height: var(--tap); font-weight: 700; font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums; position: relative;
}
.balance-pill .coin {
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--on-gold);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.balance-pill.flash { animation: sh-flash .7s var(--ease); }
@keyframes sh-flash { 0% { box-shadow: inset 0 0 0 0 var(--gold); } 30% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px var(--gold); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.balance-refresh { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 12px; }
.balance-refresh:hover { color: var(--text); }
.balance-refresh.spinning { animation: sh-spin 1s linear infinite; }
@keyframes sh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.btn-wallet {
  height: var(--tap); padding: 0 20px; background: var(--gold); color: var(--on-gold);
  border: none; border-radius: 0; font: 700 15px var(--font-body); cursor: pointer; text-decoration: none;
  display: flex; align-items: center; transition: filter .15s;
}
.btn-wallet:hover { filter: brightness(1.06); }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.user-chip {
  display: none; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text);
}
.user-chip.active { display: flex; }
.user-chip .mc-head { width: 32px; height: 32px; border-radius: 50%; image-rendering: pixelated; }
.user-chip .chip-name { font-size: 14px; font-weight: 600; color: var(--text); }
.user-chip .chip-rank { font-size: 12px; font-weight: 700; color: var(--rank, var(--text-muted)); }
.user-chip .chip-rank:empty { display: none; }
.topbar .icon-btn {
  width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-input);
  color: var(--text-muted); cursor: pointer; font-size: 17px; text-decoration: none; transition: all .2s;
}
.topbar .icon-btn:hover { background: var(--line); color: var(--text); }
.topbar .icon-btn svg { width: 20px; height: 20px; }

.sidebar { display: none !important; }

.ticker {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--ticker-h); z-index: 990;
  overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap;
  contain: strict;
}
.ticker-track {
  display: inline-flex; height: 100%; align-items: center; will-change: transform;
  animation: sh-ticker var(--ticker-dur, 40s) linear infinite;
}
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding-left: 40px; color: var(--text); text-decoration: none; }
.ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex-shrink: 0; }
.ticker-item b { font-weight: 700; }
.ticker-item .what { color: var(--text-muted); }
.ticker-item .amt { font-weight: 700; color: var(--lime); }
.ticker-empty { padding-left: 24px; font-size: 13px; color: var(--text-muted); }
@keyframes sh-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.chat-rail { top: var(--chrome-h) !important; }

.chat-fab { display: none !important; }
body.has-shell.authed.chat-open .chat-top-btn { background: var(--line); color: var(--text); }

.toast-stack { position: fixed; right: 20px; top: calc(var(--chrome-h) + 16px); z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-tile);
  background: var(--lime); color: var(--on-lime); font-weight: 700; box-shadow: 0 12px 30px var(--shade-deep);
  animation: sh-toast-in .35s var(--ease-out) both;
}
.toast .t-display { font-size: 24px; line-height: 1; }
.toast.out { animation: sh-toast-out .3s var(--ease) both; }
@keyframes sh-toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sh-toast-out { to { transform: translateX(120%); opacity: 0; } }

.rankup {
  position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--scrim); backdrop-filter: blur(6px); text-align: center; padding: 24px;
  animation: sh-fade .25s var(--ease) both;
}
.rankup .t-label { color: var(--text-soft); }
.rankup img { width: 120px; height: 120px; object-fit: contain; image-rendering: pixelated; animation: sh-pop .6s var(--ease-out) both; }
.rankup h2 { font: 400 clamp(48px, 9vw, 104px)/.9 var(--font-display); color: var(--rank, var(--text)); text-shadow: 0 6px 0 var(--pink); margin: 0; }
.rankup.out { animation: sh-fade .25s var(--ease) reverse both; }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; scrollbar-width: none; contain: none; }
  .balance-pill.flash, .toast, .toast.out, .rankup, .rankup img { animation: none; }
}

@media (max-width: 1280px) {
  body.has-shell.authed.chat-open { padding-right: 0; }
  .chat-rail { width: min(var(--chat-w), 90vw); box-shadow: -12px 0 40px var(--shade-deep); }
}

@media (max-width: 1024px) {
  .topbar { gap: 10px; padding: 0 16px; }
  .topnav { overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 0 10px; }
  .user-chip .chip-rank, .user-chip .chip-name { display: none; }
  .user-chip { padding: 4px; }
}

/* two-row topbar on mobile; --topbar-h matches the pages' content offset */
@media (max-width: 640px) {
  :root { --topbar-h: 104px; }
  .topbar { flex-wrap: wrap; height: var(--topbar-h); align-content: center; row-gap: 4px; column-gap: 8px; padding: 6px 12px; }
  .topbar .logo { order: 1; }
  .topbar .logo img { height: 30px; }
  .topbar-center { order: 2; margin-left: auto; }
  .topbar-right { order: 4; gap: 2px; }
  .topbar-right a.icon-btn { display: none; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .topbar-center { flex-basis: calc(100% - 110px); justify-content: flex-end; }
  .topnav { order: 3; flex: 1 1 200px; }
  .topnav a { min-height: 40px; padding: 0 8px; font-size: 14px; }
  .balance-pill { height: 40px; padding: 0 10px; font-size: 14px; gap: 6px; }
  .balance-refresh { display: none; }
  .btn-wallet { height: 40px; padding: 0 12px; font-size: 14px; }
  .user-chip .mc-head { width: 30px; height: 30px; }
  .keyboard-hint { display: none !important; }
}