.game-body { min-height: 100vh; }
[data-view][hidden] { display: none !important; }

.btn--discord {
  --bg: #5865f2; --bd: transparent; --fg: #fff;
  background: #5865f2 !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 12px 36px rgba(88,101,242,.35);
  width: 100%; max-width: 360px; justify-content: center; min-height: 52px; font-weight: 700;
}
.btn--discord:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--discord.is-disabled { opacity: 1; pointer-events: auto; }

.game-card--login { max-width: 560px; }
.game-login-hero {
  display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem;
}
.game-login-hero h2 { margin: 0 0 .35rem; }
.game-login-hero p { margin: 0; color: var(--cd-muted); font-size: .92rem; }
.game-discord-mark {
  width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #5865f2, #4752c4);
  box-shadow: 0 10px 30px rgba(88,101,242,.35);
}

.game-userbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: 1.1rem;
}
.game-userbar__who { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.game-userbar__who strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.game-userbar__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.game-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(62,207,255,.35); background: rgba(255,255,255,.06);
}
.game-avatar.is-fallback {
  display: grid; place-items: center; object-fit: none;
  background: linear-gradient(145deg, #5865f2, #3ecfff);
  color: #fff; font-weight: 800; font-size: .95rem; text-indent: 0;
}

.game-guilds { display: grid; gap: .55rem; margin-top: 1rem; }
.game-guild {
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  width: 100%; text-align: left; padding: .85rem 1rem; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--cd-border); background: rgba(0,0,0,.25); color: inherit; font: inherit;
  transition: border-color .2s, background .2s, transform .15s;
}
.game-guild:hover {
  border-color: rgba(62,207,255,.45); background: rgba(62,207,255,.08); transform: translateY(-1px);
}
.game-guild__icon img, .game-guild__fallback {
  width: 40px; height: 40px; border-radius: 12px; display: block;
}
.game-guild__fallback {
  display: grid; place-items: center; background: rgba(88,101,242,.25); color: #fff; font-weight: 800;
}
.game-guild__meta { display: grid; gap: .15rem; min-width: 0; }
.game-guild__meta strong { font-size: .98rem; }
.game-guild__meta span { font-size: .78rem; color: var(--cd-muted); }
.game-guild__go { color: var(--cd-accent); font-weight: 700; }
.game-empty { margin: 1rem 0 0; color: var(--cd-muted); font-size: .9rem; }

.game-card--profile { margin-bottom: 1rem; }
.game-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: .35rem 0 .65rem;
}
.game-stats > div {
  padding: .7rem .55rem; border-radius: 12px; text-align: center;
  border: 1px solid var(--cd-border); background: rgba(0,0,0,.22);
}
.game-stats b {
  display: block; font-size: 1.05rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.game-stats span {
  display: block; margin-top: .2rem; font-size: .68rem; color: var(--cd-faint);
  letter-spacing: .04em; text-transform: uppercase;
}
.game-simple {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem;
}
.game-card--step { position: relative; padding-top: 1.6rem; }
.game-step-num {
  position: absolute; top: .85rem; left: 1.1rem; margin: 0;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #3ecfff, #7c8cff); color: #061018;
  font-size: .75rem; font-weight: 800;
}
.game-card--step .game-card__head { padding-left: 1.6rem; }
.game-actions--stack { flex-direction: column; align-items: stretch; }
.game-actions--stack .btn { width: 100%; justify-content: center; }
.game-hint {
  margin: .7rem 0 0; font-size: .8rem; color: var(--cd-faint); line-height: 1.4;
}
.game-hint.is-ok { color: #5ddea8; }
.game-hint.is-warn { color: #f0b35a; }

@media (max-width: 960px) {
  .game-stats { grid-template-columns: 1fr 1fr; }
  .game-simple { grid-template-columns: 1fr; }
}

.game-hero {
  padding: calc(var(--cd-nav) + 2.2rem) 0 1.5rem;
}
.game-hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; align-items: stretch;
}
.game-hero h1 {
  margin: 0 0 .75rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1.05;
}
.game-hero__accent {
  background: linear-gradient(135deg, #3ecfff, #8b7cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.game-hero .lead { max-width: 36rem; }

.game-steps {
  margin: 1.25rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.game-steps li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .75rem .45rem .45rem; border-radius: 999px;
  border: 1px solid var(--cd-border); background: rgba(255,255,255,.03);
  color: var(--cd-muted); font-size: .82rem; font-weight: 550;
}
.game-steps li span {
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #3ecfff, #7c8cff); color: #061018;
  font-size: .72rem; font-weight: 800;
}

.game-status-card {
  padding: 1.4rem 1.45rem; border-radius: 22px; border: 1px solid rgba(62,207,255,.35);
  background:
    radial-gradient(circle at 90% 10%, rgba(62,207,255,.18), transparent 45%),
    linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: center; min-height: 230px;
  transition: border-color .35s, box-shadow .35s;
}
.game-status-card.is-active {
  border-color: rgba(93,222,168,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 40px rgba(93,222,168,.12);
  background:
    radial-gradient(circle at 90% 10%, rgba(93,222,168,.22), transparent 45%),
    linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.game-status-card__label {
  margin: 0 0 .35rem; font-family: var(--cd-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cd-faint);
}
.game-status-card__state {
  margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em;
}
.game-status-card.is-active .game-status-card__state { color: #5ddea8; }
.game-status-card__meta { margin: 0 0 .9rem; color: var(--cd-muted); font-size: .88rem; line-height: 1.4; }
.game-countdown {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 0 0 1rem;
}
.game-countdown[hidden] { display: none !important; }
.game-countdown > div {
  text-align: center; padding: .55rem .35rem; border-radius: 12px;
  border: 1px solid rgba(93,222,168,.25); background: rgba(0,0,0,.28);
}
.game-countdown b {
  display: block; font-size: 1.35rem; letter-spacing: -.03em; color: #5ddea8; font-variant-numeric: tabular-nums;
}
.game-countdown span {
  font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-faint);
}
.game-status-card__bar {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden;
}
.game-status-card__bar i {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, #3ecfff, #7c8cff);
  transition: width .5s ease;
}
.game-status-card.is-active .game-status-card__bar i {
  background: linear-gradient(90deg, #5ddea8, #3ecfff);
}
.game-status-card__until {
  margin: .65rem 0 0; font-size: .78rem; color: var(--cd-faint);
}
.game-status-card__until[hidden] { display: none !important; }

.game-panel { padding-top: 1rem; padding-bottom: 4rem; }
.game-card {
  padding: 1.35rem 1.4rem; border-radius: 20px; border: 1px solid var(--cd-border);
  background: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.game-card__head h2, .game-card__head h3 { margin: 0 0 .35rem; letter-spacing: -.02em; }
.game-card__head p { margin: 0; color: var(--cd-muted); font-size: .9rem; }
.game-card__head--row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .85rem; margin-bottom: 1rem;
}
.game-card__text { margin: 0 0 1rem; color: var(--cd-muted); font-size: .88rem; line-height: 1.45; }
.game-card__text--tight { margin: .75rem 0 0; }

.game-card--invite {
  margin-bottom: 1rem;
  border-color: rgba(62,207,255,.28);
  background:
    radial-gradient(circle at 8% 0%, rgba(62,207,255,.12), transparent 40%),
    linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.game-card--invite.is-ready {
  border-color: rgba(93,222,168,.4);
  box-shadow: 0 0 36px rgba(93,222,168,.08);
}
.game-howto {
  margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .55rem;
}
.game-howto li {
  padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--cd-border);
  background: rgba(0,0,0,.22); color: var(--cd-muted); font-size: .86rem; line-height: 1.4;
}
.game-howto li b { color: var(--cd-text); font-weight: 650; }
.game-actions .btn.is-disabled,
a.btn.is-disabled {
  opacity: .45; pointer-events: none;
}

.game-login .game-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin: 1.1rem 0 .65rem;
}
.game-login .field { display: grid; gap: .35rem; }
.game-login .field span { font-size: .8rem; color: var(--cd-muted); }
.game-login input {
  width: 100%; padding: .75rem .85rem; border-radius: 12px; border: 1px solid var(--cd-border);
  background: rgba(0,0,0,.35); color: var(--cd-text); font: inherit; font-variant-numeric: tabular-nums;
}
.game-login input:focus {
  outline: none; border-color: rgba(62,207,255,.55); box-shadow: 0 0 0 3px rgba(62,207,255,.12);
}
.game-help { margin: 0 0 1rem; font-size: .78rem; color: var(--cd-faint); line-height: 1.4; }

.game-dash__top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.1rem;
}
.game-dash__top h2 { margin: .2rem 0 .35rem; }
.game-account {
  margin: 0; font-size: .78rem; color: var(--cd-faint); font-family: var(--cd-mono);
  letter-spacing: .02em; word-break: break-all;
}
.game-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; margin-bottom: 1rem;
}
.game-pill {
  display: inline-flex; padding: .18rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.06); color: var(--cd-muted); border: 1px solid var(--cd-border);
}
.game-pill.is-on {
  background: rgba(93,222,168,.15); color: #5ddea8; border-color: rgba(93,222,168,.35);
}
.game-pill--soft { color: var(--cd-accent); border-color: rgba(62,207,255,.3); background: rgba(62,207,255,.08); }
.game-card__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.game-price, .game-balance { margin: 0 0 .55rem; display: flex; align-items: baseline; gap: .35rem; }
.game-price b, .game-balance b { font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.game-price span { color: var(--cd-muted); font-size: .9rem; }
.game-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.game-actions .btn:disabled,
.game-actions .btn[disabled] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}
.game-topups { display: flex; flex-wrap: wrap; gap: .45rem; }
.game-topups button {
  padding: .55rem .8rem; border-radius: 999px; border: 1px solid rgba(62,207,255,.35);
  background: rgba(62,207,255,.08); color: var(--cd-text); font: inherit; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.game-topups button:hover {
  background: rgba(62,207,255,.16); border-color: rgba(62,207,255,.55); transform: translateY(-1px);
}

.game-config__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.game-mods {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem;
}
.game-mod {
  text-align: left; padding: .9rem .95rem; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--cd-border); background: rgba(0,0,0,.25);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s, opacity .2s;
  display: grid; gap: .25rem; color: inherit; font: inherit;
}
.game-mod:hover { transform: translateY(-1px); }
.game-mod:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }
.game-mod.is-on {
  border-color: rgba(62,207,255,.55);
  background: linear-gradient(160deg, rgba(62,207,255,.16), rgba(255,255,255,.03));
  box-shadow: 0 0 20px rgba(62,207,255,.12);
}
.game-mod.is-off { opacity: .68; }
.game-mod__state {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  width: fit-content; padding: .12rem .4rem; border-radius: 999px;
}
.game-mod.is-on .game-mod__state { background: rgba(62,207,255,.2); color: var(--cd-accent); }
.game-mod.is-off .game-mod__state { background: rgba(255,255,255,.06); color: var(--cd-faint); }
.game-mod strong { font-size: .92rem; }
.game-mod__desc { font-size: .75rem; color: var(--cd-muted); line-height: 1.35; }
.game-mods__summary { margin: 1rem 0 0; font-size: .8rem; color: var(--cd-muted); line-height: 1.45; }

.game-flash { margin: .85rem 0 0; font-size: .9rem; min-height: 1.2em; }
.game-flash.is-ok { color: #5ddea8; }
.game-flash.is-err { color: #ff8f8f; }
.game-fineprint { margin: .75rem 0 0; font-size: .75rem; color: var(--cd-faint); }

@media (max-width: 960px) {
  .game-hero__grid, .game-grid, .game-login .game-fields { grid-template-columns: 1fr; }
  .game-mods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .game-mods { grid-template-columns: 1fr; }
  .game-actions .btn, .game-login .btn { width: 100%; justify-content: center; }
  .game-steps { flex-direction: column; align-items: flex-start; }
}