.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* top bar */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: var(--top); padding: 0 clamp(12px, 2.4vw, 28px); background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.top__spacer { flex: 1; }

.brand { display: flex; align-items: center; gap: 10px; margin-right: 10px; }
.brand img { width: 30px; height: 30px; }
.brand__txt { font: 400 30px/1 var(--pixel); letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
.brand__txt span { color: var(--brand); margin-left: 6px; }

/* nav tiles */
.navbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: var(--r-sm); color: var(--dim); font: 600 13.5px/1 var(--sans); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.navbtn:hover { background: var(--surface-2); color: var(--text); }
.navbtn.is-on { background: var(--surface-2); color: var(--text); }
.navbtn .px { width: 20px; height: 20px; }
.navbtn__dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 0 2px var(--surface-2); }
.navbtn .chev { margin-left: 2px; transition: transform 0.15s; }
.navbtn.is-open .chev { transform: rotate(180deg); }

/* the games menu */
.menuwrap { position: relative; }
.menu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 50; width: min(680px, 92vw); padding: 14px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 24px 60px rgba(0, 0, 0, 0.55); display: none; gap: 14px; }
.menu.is-open { display: grid; animation: menuIn 0.14s var(--out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.menu__group { display: grid; gap: 6px; }
.menu__label { padding: 0 4px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.menu__grid a { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: var(--r-sm); color: var(--dim); font: 600 13.5px/1 var(--sans); transition: background 0.12s, color 0.12s; }
.menu__grid a:hover { background: var(--surface-2); color: var(--text); }
.menu__grid a.is-on { background: var(--surface-2); color: var(--text); }
.menu__grid .px { width: 28px; height: 28px; flex: none; }
.menu__grid .tag { margin-left: auto; font: 700 9.5px/1 var(--sans); letter-spacing: 0.06em; padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--dim); }
.menu__grid .tag--new { background: rgba(77, 139, 247, 0.16); color: var(--brand); }

/* balance, level, tools */
.balance { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 14px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); }
.balance__amt { min-width: 64px; font: 700 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.balance .iconbtn { width: 32px; height: 32px; border-radius: 6px; background: var(--surface-3); color: var(--text); }
.balance .iconbtn:hover { background: var(--brand); color: var(--accent-ink); }

.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--dim); transition: background 0.15s, color 0.15s; }
.iconbtn:hover { color: var(--text); background: var(--surface-2); }
.iconbtn:active { background: var(--surface-3); }

.lvl { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; }
.lvl:hover { background: var(--surface-2); }
.lvl .skin { width: 32px; height: 32px; border-radius: 4px; }
.lvl__txt { display: grid; gap: 4px; line-height: 1; text-align: left; }
.lvl__txt b { font: 700 13px/1 var(--sans); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl__bar { position: relative; width: 96px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.lvl__bar i { position: absolute; inset: 0 auto 0 0; background: var(--brand); transition: width 0.6s var(--out); }
.lvl__txt span { font: 500 11px/1 var(--sans); color: var(--faint); }

.notice { padding: 9px clamp(14px, 3vw, 28px); background: rgba(240, 100, 111, 0.1); border-bottom: 1px solid rgba(240, 100, 111, 0.25); color: #f4a1a7; font: 500 13px/1.4 var(--sans); text-align: center; }

/* view */
.view { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(18px, 2.6vw, 30px) clamp(14px, 3vw, 28px) 64px; animation: viewIn 0.22s var(--out); }
@keyframes viewIn { from { opacity: 0; } }
.view.leaving { animation: viewOut 0.12s ease-in forwards; }
@keyframes viewOut { to { opacity: 0; } }

.foot { padding: 22px clamp(14px, 3vw, 28px) 30px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: 12px; display: flex; gap: 14px 24px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.foot b { color: var(--dim); font-weight: 600; }

/* phone tab bar */
.dock { display: none; }

@media (max-width: 960px) {
  .top .navbtn, .top .menuwrap, .top .lvl__txt, .top .top__opt { display: none; }
  .brand__txt span { display: none; }
  .lvl { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; }
  .view { padding-bottom: 92px; }
  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 60px; padding: 5px 8px; gap: 4px; border-top: 1px solid var(--border-soft); background: var(--bg); }
  .dock a, .dock button { flex: 1; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: var(--r-sm); color: var(--faint); font: 600 10.5px/1 var(--sans); transition: background 0.15s, color 0.15s; }
  .dock .px { width: 24px; height: 24px; opacity: 0.85; }
  .dock a.is-on { background: var(--surface-2); color: var(--text); }
  .dock a.is-on .px { opacity: 1; }
}

@media (max-width: 640px) {
  :root { --top: 58px; }
  .balance__amt { min-width: 0; font-size: 14px; }
  .top { gap: 6px; }
  .brand { margin-right: 0; }
  .brand__txt { font-size: 25px; }
}