:root {
  --a-bg: #070512;
  --a-panel: #100d24;
  --a-line: #342663;
  --a-pink: #ef3fff;
  --a-cyan: #22eaff;
}
.arcade-page {
  background:
    radial-gradient(circle at 70% -10%, #6d1ab644, transparent 32%),
    radial-gradient(circle at 15% 20%, #034f8c44, transparent 28%), var(--a-bg);
  color: #f7f4ff;
}
.arcade-page .container {
  width: min(1240px, calc(100% - 48px));
}
.arcade-hero {
  min-height: 510px;
  display: grid;
  align-items: end;
  padding: 80px 0;
  background:
    linear-gradient(90deg, #070512 5%, #070512d7 48%, transparent),
    linear-gradient(0deg, #070512, transparent 35%),
    url(mallowverse-community-stage.jpg) 70% center/cover no-repeat;
}
.arcade-kicker {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 900;
  color: #4cecff;
}
.arcade-hero h1 {
  font-size: clamp(58px, 7vw, 100px);
  letter-spacing: -5px;
  line-height: 0.95;
  margin: 16px 0;
}
.arcade-hero h1 span {
  background: linear-gradient(110deg, #28efff, #f052ff);
  background-clip: text;
  color: transparent;
}
.arcade-hero p:not(.arcade-kicker) {
  max-width: 610px;
  color: #c9c1dd;
  font-size: 17px;
  line-height: 1.7;
}
.arcade-section {
  padding: 70px 0;
}
.arcade-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 20px;
}
.arcade-heading h2,
.arcade-roadmap h2 {
  font-size: clamp(34px, 4vw, 52px);
  margin: 7px 0;
}
.arcade-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.arcade-tools input,
.arcade-tools select {
  min-height: 42px;
  border: 1px solid #3b3260;
  background: #0c0a1c;
  color: #e9e5f6;
  border-radius: 10px;
  padding: 0 12px;
}
.arcade-tools input {
  width: 230px;
}
.arcade-notice {
  border: 1px solid #365d69;
  background: #09202a;
  padding: 14px 17px;
  border-radius: 12px;
  color: #b7ced7;
  font-size: 11px;
  line-height: 1.6;
}
.arcade-notice b {
  color: #5bf2d7;
}
.arcade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.arcade-card {
  overflow: hidden;
  border: 1px solid var(--a-line);
  border-radius: 18px;
  background: linear-gradient(145deg, #17102d, #0b0918);
  box-shadow: 0 18px 50px #0005;
}
.arcade-art {
  height: 220px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.arcade-art:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid #ffffff22;
  border-radius: 50%;
  box-shadow: 0 0 50px #942dff66;
}
.arcade-art span {
  font-size: 82px;
  filter: drop-shadow(0 0 25px #fff6);
  z-index: 1;
}
.arcade-art.astro {
  background: radial-gradient(circle, #832dcb, #151044 55%, #070817);
}
.arcade-art.snake {
  background: radial-gradient(circle, #0e9678, #073d4d 55%, #06111e);
}
.arcade-art.match {
  background: radial-gradient(circle, #bd386b, #59224f 55%, #13091e);
}
.arcade-body {
  padding: 20px;
}
.arcade-meta {
  display: flex;
  justify-content: space-between;
  color: #9187a8;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.arcade-card h3 {
  font-size: 23px;
  margin: 11px 0 8px;
}
.arcade-card p {
  color: #ada5bd;
  font-size: 11px;
  line-height: 1.7;
  min-height: 55px;
}
.arcade-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 16px;
}
.arcade-card-actions a,
.arcade-card-actions button {
  border: 1px solid #5b3b93;
  border-radius: 10px;
  padding: 11px;
  background: #17102e;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.arcade-card-actions a {
  background: linear-gradient(120deg, #8a23e5, #da36e7);
}
.arcade-card-actions button.active {
  color: #ff65df;
  border-color: #ff55d5;
}
.arcade-roadmap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center;
  border-top: 1px solid #312550;
}
.arcade-roadmap > div > p:not(.arcade-kicker) {
  color: #a9a1b8;
  line-height: 1.7;
}
.arcade-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.arcade-mini-grid article {
  padding: 20px;
  border: 1px solid #392c61;
  border-radius: 14px;
  background: #100d22;
}
.arcade-mini-grid b,
.arcade-mini-grid span {
  display: block;
}
.arcade-mini-grid b {
  font-size: 26px;
  color: #45eaff;
}
.arcade-mini-grid span {
  font-size: 9px;
  color: #aaa1bb;
  margin-top: 5px;
}
.game-page {
  min-height: 100vh;
}
.game-top {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 max(18px, calc((100vw - 1100px) / 2));
  border-bottom: 1px solid #35265f;
  background: #080615dd;
  backdrop-filter: blur(15px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.game-top a,
.game-top button {
  color: #ded8ee;
  background: #15102b;
  border: 1px solid #40306d;
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit;
  font-size: 11px;
}
.game-shell {
  width: min(1100px, calc(100% - 32px));
  margin: auto;
  padding: 42px 0 70px;
}
.game-info {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 25px;
}
.game-info h1 {
  font-size: clamp(40px, 6vw, 70px);
  margin: 10px 0;
}
.game-info p {
  color: #aaa1bc;
  line-height: 1.7;
}
.game-tag {
  color: #58eaff;
  font-size: 9px;
  letter-spacing: 2px;
}
.game-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}
.game-actions button {
  background: #17102d;
  border: 1px solid #533f83;
  color: #fff;
  border-radius: 9px;
  padding: 9px 13px;
}
.game-actions button.active {
  color: #ff6edc;
}
.game-stage {
  position: relative;
  width: min(900px, 100%);
  margin: auto;
  border: 1px solid #47347b;
  border-radius: 18px;
  overflow: hidden;
  background: #050612;
  box-shadow:
    0 30px 90px #000a,
    0 0 45px #7a2cff22;
}
.game-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  touch-action: none;
}
.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: #070615dc;
  z-index: 3;
  padding: 25px;
}
.game-overlay.hidden {
  display: none;
}
.game-overlay h2 {
  font-size: 32px;
  margin: 0 0 8px;
}
.game-overlay p {
  color: #a9a1bb;
  font-size: 12px;
}
.touch-controls {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  justify-content: center;
  gap: 15px;
  z-index: 2;
}
.touch-controls button {
  width: 70px;
  height: 52px;
  border: 1px solid #9b60ff;
  background: #17112edb;
  color: #fff;
  border-radius: 13px;
  font-size: 24px;
  touch-action: none;
}
.snake-controls {
  display: none;
  grid-template-columns: repeat(3, 55px);
  grid-template-areas: ". up ." "left down right";
}
.snake-controls [data-control="up"] {
  grid-area: up;
}
.snake-controls [data-control="left"] {
  grid-area: left;
}
.snake-controls [data-control="down"] {
  grid-area: down;
}
.snake-controls [data-control="right"] {
  grid-area: right;
}
.game-score {
  width: min(900px, 100%);
  margin: 12px auto;
  display: flex;
  justify-content: space-between;
  border: 1px solid #302650;
  border-radius: 11px;
  background: #0d0a1d;
  padding: 13px 17px;
  font-size: 11px;
}
.game-score b {
  color: #55eaff;
}
.rating-box {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 20px;
  border: 1px solid #342860;
  border-radius: 15px;
  background: #0e0b20;
  text-align: center;
}
.rating-box h2 {
  font-size: 20px;
}
.rating-box p {
  font-size: 9px;
  color: #9189a1;
}
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.rating-stars button {
  font-size: 27px;
  border: 0;
  background: transparent;
  color: #514965;
  cursor: pointer;
}
.rating-stars button.on {
  color: #ffcf4c;
  text-shadow: 0 0 15px #ffa928;
}
.match-stage {
  aspect-ratio: 3/2;
  padding: 22px;
}
.match-board {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.match-tile {
  border: 1px solid #4d397c;
  border-radius: 12px;
  background: linear-gradient(145deg, #28124c, #0d0b20);
  font-size: clamp(22px, 5vw, 50px);
  color: transparent;
  cursor: pointer;
}
.match-tile.open,
.match-tile.done {
  color: #fff;
  background: linear-gradient(145deg, #7c2cca, #1e557f);
}
.match-tile.done {
  opacity: 0.55;
}
.match-stage .game-overlay {
  margin: -22px;
}
.rank-note { width: min(900px, 100%); margin: 10px auto 22px; text-align: center; color: #9ccbd2; font-size: 11px; }
.rank-note a { color: #51efff; text-decoration: underline; }
.global-board { width: min(900px, 100%); margin: 28px auto 0; padding: 22px; border: 1px solid #463178; border-radius: 16px; background: linear-gradient(145deg, #15102b, #0b0919); }
.global-board h2 { margin: 0; font-size: 24px; }
.global-board > p { margin: 6px 0 17px; color: #9c93ad; font-size: 10px; }
.global-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.global-board li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #302653; border-radius: 10px; background: #0b091b; }
.global-board li:nth-child(1) { border-color: #d7aa41; background: #251c18; }
.global-board li:nth-child(2) { border-color: #9ca9bd; }
.global-board li:nth-child(3) { border-color: #b27550; }
.global-board li b { color: #64eaff; }
.global-board li strong { color: #ff62df; }
.global-board li.empty { display: block; color: #9c93ad; }
.submit-shell { width: min(760px, calc(100% - 32px)); margin: 70px auto; }
.submit-shell h1 { font-size: clamp(40px, 7vw, 70px); margin: 12px 0; }
.submit-shell > p:not(.arcade-kicker) { color: #aaa1bd; line-height: 1.7; }
.submit-form { margin-top: 30px; display: grid; gap: 16px; padding: 25px; border: 1px solid #40306d; border-radius: 18px; background: #100d24; }
.submit-form label { display: grid; gap: 7px; color: #d9d4e8; font-size: 11px; font-weight: 700; }
.submit-form input, .submit-form textarea { width: 100%; border: 1px solid #44366c; border-radius: 10px; background: #090716; color: #fff; padding: 12px; font: inherit; }
.submit-form textarea { resize: vertical; }
.submit-form .rights-check { grid-template-columns: auto 1fr; align-items: start; line-height: 1.5; }
.submit-form .rights-check input { width: 18px; height: 18px; }
.submit-status { min-height: 22px; color: #5bf2d7; font-size: 11px; }
@media (hover: none), (max-width: 800px) {
  .touch-controls {
    display: flex;
  }
  .snake-controls {
    display: grid;
  }
}
@media (max-width: 800px) {
  .arcade-grid {
    grid-template-columns: 1fr 1fr;
  }
  .arcade-heading,
  .arcade-roadmap {
    display: block;
  }
  .arcade-tools {
    justify-content: flex-start;
  }
  .arcade-mini-grid {
    margin-top: 25px;
  }
  .game-shell {
    padding-top: 25px;
  }
}
@media (max-width: 540px) {
  .arcade-page .container {
    width: calc(100% - 28px);
  }
  .arcade-page .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    height: auto;
    padding: 10px 0;
  }
  .arcade-page .navlinks {
    grid-column: 1/-1;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    gap: 6px;
    padding: 3px 0;
  }
  .arcade-page .navlinks a {
    flex: 0 0 auto;
    border: 1px solid #322853;
    border-radius: 9px;
    padding: 8px 10px;
    background: #0c091b;
    font-size: 10px;
  }
  .arcade-hero {
    min-height: 440px;
    padding: 45px 0;
    background-position: 62% center;
  }
  .arcade-hero h1 {
    font-size: 54px;
  }
  .arcade-hero p:not(.arcade-kicker) {
    font-size: 13px;
  }
  .arcade-grid {
    grid-template-columns: 1fr;
  }
  .arcade-art {
    height: 190px;
  }
  .arcade-tools {
    display: grid;
  }
  .arcade-tools input {
    width: 100%;
  }
  .arcade-mini-grid {
    grid-template-columns: 1fr;
  }
  .game-top strong {
    display: none;
  }
  .game-top button {
    font-size: 9px;
  }
  .game-info h1 {
    font-size: 42px;
  }
  .game-stage {
    border-radius: 12px;
  }
  .game-stage canvas {
    aspect-ratio: 1/1;
  }
  .match-stage {
    aspect-ratio: 1/1;
    padding: 12px;
  }
  .match-stage .game-overlay {
    margin: -12px;
  }
  .match-board {
    gap: 6px;
  }
  .touch-controls button {
    width: 62px;
    height: 48px;
  }
  .game-score {
    font-size: 9px;
  }
}