:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --bg: #f3f6fc;
  --text: #172844;
  --muted: #52647f;
  --line: rgb(49 78 125 / 18%);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 0% 20%, rgb(245 65 90 / 18%), transparent 48%),
    radial-gradient(ellipse at 100% 65%, rgb(48 112 240 / 18%), transparent 48%),
    radial-gradient(ellipse at 52% 100%, rgb(103 84 217 / 12%), transparent 42%),
    linear-gradient(120deg, #fff5f6, #f8faff 48%, #e9f1ff);
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .2;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.hub {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  width: min(1180px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(54px, 8vh, 96px) 0;
}

.hero { margin: 0 auto clamp(32px, 6vh, 60px); text-align: center; }
.hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(44px, 7vw, 78px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.045em;
  background-clip: text;
  -webkit-background-clip: text;
}
.hero > p:last-child { margin: 19px 0 0; color: var(--muted); font-size: clamp(14px, 1.7vw, 17px); }

.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.game-card {
  --accent: #c92e49;
  --accent-rgb: 201 46 73;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 82px 1fr;
  grid-template-rows: 1fr auto;
  gap: 0 18px;
  min-height: 280px;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid rgb(var(--accent-rgb) / 38%);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgb(var(--accent-rgb) / 10%), transparent 65%),
    rgb(255 255 255 / 92%);
  box-shadow: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.game-card--blue { --accent: #245bc5; --accent-rgb: 36 91 197; }
.game-card--purple { --accent: #6754d9; --accent-rgb: 103 84 217; }
.card-glow {
  display: none;
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  right: -110px;
  top: -130px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 20%);
  filter: blur(10px);
}
.avatar-wrap {
  align-self: center;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid rgb(var(--accent-rgb) / 40%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 18px 42px rgb(var(--accent-rgb) / 20%), inset 0 0 30px rgb(var(--accent-rgb) / 10%);
}
.avatar-wrap img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 10px 16px rgb(0 0 0 / 25%)); }
.card-copy { align-self: center; min-width: 0; }
.game-type { display: block; margin-bottom: 9px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.card-copy strong { display: block; font-size: clamp(25px, 2.5vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: -.035em; }
.game-desc { display: block; margin-top: 11px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.enter {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 14px;
  font-weight: 750;
}
.enter b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(var(--accent-rgb) / 17%); color: var(--accent); font-size: 18px; transition: transform .22s ease; }
.game-card:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / 76%); outline-offset: 5px; }
.game-card:active { transform: scale(.985); }

.announcement-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 28px auto 0;
  padding: 12px 16px;
  border: 1px solid rgb(126 166 255 / 28%);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  background: rgb(255 255 255 / 3%);
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.announcement-mark, .announcement-arrow { display: grid; place-items: center; flex: none; border-radius: 50%; }
.announcement-mark { width: 42px; height: 42px; background: #3169dc; color: #fff; font-family: Georgia, serif; font-size: 22px; font-style: italic; font-weight: 700; box-shadow: 0 8px 22px rgb(49 105 220 / 28%); }
.announcement-copy strong, .announcement-copy span { display: block; }
.announcement-copy strong { font-size: 17px; line-height: 1.35; }
.announcement-copy span { display: none; }
.announcement-arrow { width: 34px; height: 34px; background: rgb(126 166 255 / 12%); color: #a9c4ff; font-size: 18px; transition: transform .16s ease; }
.announcement-link:focus-visible, .announcement-back:focus-visible { outline: 3px solid rgb(126 166 255 / 76%); outline-offset: 4px; }
.announcement-link:active { transform: scale(.985); }

.announcement-page { position: relative; z-index: 1; width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: clamp(36px, 7vh, 72px) 0 64px; }
.announcement-back { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: #c6d4eb; text-decoration: none; background: rgb(15 23 42 / 70%); }
.announcement-hero { margin: 48px 0 28px; }
.announcement-hero h1 { margin: 0; font-size: clamp(42px, 8vw, 72px); line-height: 1; letter-spacing: -.045em; }
.announcement-hero > span { display: block; margin-top: 14px; color: var(--muted); }
.update-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: updates; }
.update-list li { position: relative; padding: 22px 24px 22px 78px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(15 23 42 / 76%)); counter-increment: updates; }
.update-list li::before { position: absolute; top: 22px; left: 22px; content: counter(updates, decimal-leading-zero); color: #6f9cff; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.update-list strong { display: block; margin-bottom: 7px; color: #f2f6fd; font-size: 17px; line-height: 1.45; }
.update-list p { margin: 0; color: #9eafc9; font-size: 14px; line-height: 1.75; }

@media (hover: hover) and (pointer: fine) {
  .game-card:hover { transform: translateY(-2px); border-color: rgb(var(--accent-rgb) / 72%); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
  .game-card:hover:active,.announcement-link:hover:active { transform:scale(.985); }
  .game-card:hover .enter b { transform: translateX(4px); }
  .announcement-link:hover { transform: translateY(-3px); border-color: rgb(126 166 255 / 58%); background-color: rgb(76 126 233 / 8%); }
  .announcement-link:hover .announcement-arrow { transform: translateX(3px); }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}

@media (max-width: 760px) {
  .hub { width: min(100% - 28px, 540px); padding: 38px 0 42px; }
  .hero { margin-bottom: 28px; }
  .hero h1 { font-size: clamp(38px, 12vw, 58px); }
  .hero > p:last-child { max-width: 290px; margin: 14px auto 0; line-height: 1.6; }
  .game-grid { grid-template-columns: 1fr; gap: 14px; }
  .game-card, .game-card:last-child:nth-child(odd) { grid-column: auto; width: auto; grid-template-columns: 86px 1fr; min-height: 0; padding: 22px; border-radius: 23px; gap: 0 18px; }
  .avatar-wrap { width: 86px; height: 86px; }
  .avatar-wrap img { width: 74px; height: 74px; }
  .card-copy strong { font-size: clamp(24px, 8vw, 32px); }
  .game-desc { margin-top: 6px; font-size: 13px; }
  .enter { margin-top: 18px; padding-top: 15px; }
  .announcement-link { gap: 13px; padding: 17px; border-radius: 17px; }
  .announcement-copy span { line-height: 1.5; }
  .announcement-page { width: min(100% - 28px, 540px); padding-top: 28px; }
  .announcement-hero { margin: 36px 0 22px; }
  .update-list li { padding: 19px 18px 19px 62px; }
  .update-list li::before { top: 20px; left: 18px; }
}

@media (max-width: 390px) {
  .hub { width: calc(100% - 22px); }
  .game-card { grid-template-columns: 72px 1fr; padding: 18px; gap: 0 14px; }
  .avatar-wrap { width: 72px; height: 72px; }
  .avatar-wrap img { width: 62px; height: 62px; }
  .game-type { margin-bottom: 5px; font-size: 11px; }
  .card-copy strong { font-size: 23px; }
  .announcement-mark { width: 38px; height: 38px; }
  .announcement-arrow { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Keep the announcement page legible with the bright portal palette. */
.announcement-link { background:rgb(255 255 255 / 65%); border-color:var(--line); }
.announcement-arrow { color:#245bc5; background:rgb(36 91 197 / 9%); }
.announcement-back { color:var(--text); background:#fff; }
.update-list li { background:rgb(255 255 255 / 86%); }
.update-list strong { color:var(--text); }
.update-list p { color:var(--muted); }
.update-list li::before { color:#245bc5; }

/* Platform v1: shared typography, variable game count and mobile touch sizes. */
.hero h1 { font-size:clamp(38px,6vw,64px); }
.brand-name { font-size:14px; font-weight:800; letter-spacing:.18em; }
.game-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.game-card:last-child:nth-child(odd) { width:auto; grid-column:auto; }
.card-copy { min-width:0; overflow-wrap:anywhere; }
.card-copy strong { font-size:24px; }
.game-type { font-size:12px; }
.game-desc { font-size:14px; }
.site-footer { margin-top:32px; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; }
.announcement-back { min-height:44px; }
@media(max-width:760px) { .game-card { border-radius:20px; } .game-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }