/* ============================================================
   DARKSOY — a family indie MOBILE game studio
   Cozy glossy-3D art + bold arcade game-UI
   ============================================================ */

:root {
  /* Base */
  --paper:   #fdf6ec;   /* cream content */
  --paper-2: #fbeedd;
  --paper-3: #f6e3c8;
  --ink:     #221a14;   /* near-black outlines/text */
  --ink-soft:#6b5344;

  /* Brand soy */
  --caramel: #e0972f;
  --caramel-deep:#c57a1c;
  --sun:     #ffc43d;

  /* Vibrant game palette (from the reference art) */
  --blue:      #2f8fe0;
  --blue-deep: #1466b0;
  --sky:       #7cc6f2;
  --orange:    #ff8a3d;
  --coral:     #ff6b4a;
  --jade:      #2fbfa0;
  --grape:     #7c5cbf;
  --bubble:    #ff8fb1;

  --maxw: 1180px;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --border: 3px solid var(--ink);
  --border-2: 2.5px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius: 26px;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-arcade: 'Press Start 2P', monospace;
  --font-jp: 'Zen Maru Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); color: var(--ink); line-height: 1.6;
  overflow-x: hidden; font-weight: 700; -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image:
    radial-gradient(var(--paper-3) 1.4px, transparent 1.5px),
    radial-gradient(var(--paper-3) 1.4px, transparent 1.5px);
  background-size: 34px 34px; background-position: 0 0, 17px 17px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--caramel); color: var(--ink); }

/* ---- Type helpers ---- */
.accent { color: var(--caramel-deep); }
.kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  background: var(--sun); border: var(--border-2); border-radius: 40px;
  padding: .3rem .95rem; box-shadow: var(--shadow-sm); transform: rotate(-2deg);
  margin-bottom: 1.2rem;
}
.section__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,5.2vw,3.5rem); line-height: 1.05; letter-spacing: -.01em; }
.section__lead, .section__head p { color: var(--ink-soft); max-width: 54ch; margin-top: 1rem; font-size: 1.05rem; font-weight: 600; }

.section { padding: clamp(4rem,9vw,7rem) clamp(1.1rem,5vw,3.5rem); max-width: var(--maxw); margin: 0 auto; }
.section__head { margin-bottom: 3rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  padding: .85rem 1.7rem; border: var(--border); border-radius: 40px;
  cursor: pointer; background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--primary { background: var(--orange); color:#fff; }
.btn--blue { background: var(--blue); color:#fff; }
.btn--ghost { background: var(--paper); }

/* ---- App store badges ---- */
.stores { display: flex; gap: .8rem; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--ink); color: #fff; border: var(--border); border-radius: 16px;
  padding: .55rem 1.1rem; box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.store:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.store__glyph { font-size: 1.5rem; line-height: 1; }
.store__sub { font-size: .6rem; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .08em; display:block; }
.store__name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1; display:block; }

/* ---- Arcade HUD bits ---- */
.hud-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--ink); color:#fff; border-radius: 12px; padding:.35rem .7rem;
  font-family: var(--font-arcade); font-size:.62rem; letter-spacing:.02em;
}
.hud-pill .p1 { background: var(--blue); color:#fff; padding:.2rem .4rem; border-radius:6px; }
.hearts { display:inline-flex; gap:.25rem; font-size:1rem; }
.pips { display:inline-flex; gap:.3rem; }
.pips i { width:10px; height:10px; border-radius:50%; background: var(--paper-3); border:2px solid var(--ink); display:inline-block; }
.pips i.on { background: var(--jade); }

/* ---- Navigation ---- */
.nav { position: fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:.8rem clamp(1.1rem,5vw,3.5rem); transition: padding .3s var(--ease-soft); }
.nav.scrolled { background: rgba(253,246,236,.88); backdrop-filter: blur(10px); border-bottom: var(--border-2); padding-top:.6rem; padding-bottom:.6rem; }
.nav__brand { display:flex; align-items:center; gap:.6rem; }
.nav__logo { width:46px; height:46px; object-fit:contain; border: var(--border-2); border-radius:50%; background: var(--paper); box-shadow: var(--shadow-sm); }
.nav__name { font-family: var(--font-display); font-weight:800; font-size:1.35rem; }
.nav__links { display:flex; align-items:center; gap:.35rem; }
.nav__links a { font-family: var(--font-display); font-weight:800; font-size:.95rem; padding:.45rem .9rem; border-radius:40px; border:3px solid transparent; transition: all .2s var(--ease-soft); }
.nav__links a:not(.nav__cta):hover { border-color: var(--ink); background: var(--paper); transform: rotate(-2deg); }
.nav__cta { background: var(--jade); color:#fff !important; border: var(--border) !important; box-shadow: var(--shadow-sm); }
.nav__cta:hover { transform: translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.nav__toggle { display:none; flex-direction:column; gap:5px; background: var(--paper); border: var(--border-2); border-radius:12px; cursor:pointer; padding:9px 8px; box-shadow: var(--shadow-sm); }
.nav__toggle span { width:22px; height:3px; background: var(--ink); border-radius:3px; transition: transform .3s, opacity .3s; }

/* ---- Hero ---- */
.hero { position: relative; padding: 8.5rem clamp(1.1rem,5vw,3.5rem) 3rem; max-width: var(--maxw); margin:0 auto; }
.hero__grid { display:grid; grid-template-columns: 1fr 1.02fr; gap:2.5rem; align-items:center; }
.hero__eyebrow { font-family: var(--font-jp); font-weight:700; background: var(--bubble); border: var(--border-2); border-radius:40px; padding:.35rem 1rem; display:inline-block; box-shadow: var(--shadow-sm); transform: rotate(-2deg); margin-bottom:1.3rem; font-size:.9rem; }
.hero__title { font-family: var(--font-display); font-weight:800; font-size: clamp(2.5rem,6vw,4.6rem); line-height:1; letter-spacing:-.02em; }
.hero__title .pop { color: var(--orange); } .hero__title .pop--2 { color: var(--blue); }
.hero__sub { margin:1.3rem 0 1.8rem; font-size: clamp(1.05rem,2vw,1.22rem); color: var(--ink-soft); max-width:44ch; font-weight:600; }
.hero__hud { display:flex; align-items:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

.hero__stage { position: relative; border: var(--border); border-radius:34px; background: linear-gradient(180deg, var(--sky), #bfe6fb); box-shadow: var(--shadow); overflow:hidden; aspect-ratio:16/12; }
.hero__stage img { width:100%; height:100%; object-fit:cover; }
.hero__scoreboard {
  position:absolute; top:1rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:.5rem; background: var(--ink); color:#fff;
  border-radius:12px; padding:.4rem .7rem; font-family: var(--font-arcade); font-size:.6rem;
  border:2.5px solid #000; box-shadow: var(--shadow-sm);
}
.hero__scoreboard .s { color: var(--blue); } .hero__scoreboard .o { color: var(--orange); }
.sticker { position:absolute; z-index:3; font-family: var(--font-display); font-weight:800; font-size:.85rem; padding:.45rem .9rem; border: var(--border-2); border-radius:40px; box-shadow: var(--shadow-sm); }
.hero__sticker-1 { bottom:1rem; left:1rem; background: var(--coral); color:#fff; transform: rotate(-8deg); }

/* ---- Marquee ---- */
.marquee { overflow:hidden; border-top: var(--border-2); border-bottom: var(--border-2); background: var(--blue); padding:.9rem 0; transform: rotate(-1deg); margin:2rem 0; }
.marquee__track { display:flex; gap:2rem; white-space:nowrap; width:max-content; animation: marquee 24s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-weight:800; font-size:1.2rem; color:#fff; }
.marquee__track span.dot { color: var(--sun); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Games (phones) ---- */
.games__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:2rem; align-items:start; }
.gcard { display:flex; flex-direction:column; align-items:center; text-align:center; }
.phone {
  position:relative; width:100%; max-width:260px; aspect-ratio: 9/18.2;
  background: var(--ink); border: var(--border); border-radius:34px; padding:8px;
  box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gcard:hover .phone { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 10px 14px 0 var(--ink); }
.phone::before { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:70px; height:7px; background:#000; border-radius:10px; z-index:3; }
.phone__screen { width:100%; height:100%; border-radius:26px; overflow:hidden; background: var(--paper-2); position:relative; }
.phone__screen img { width:100%; height:100%; object-fit:cover; }
.phone__hud { position:absolute; left:8px; right:8px; bottom:8px; z-index:2; display:flex; justify-content:space-between; align-items:center; }
.phone__hud .hud-pill { font-size:.5rem; padding:.25rem .45rem; }
.gcard__meta { margin-top:1.3rem; }
.gcard__title { font-family: var(--font-display); font-weight:800; font-size:1.5rem; line-height:1; }
.gcard__genre { display:inline-block; margin:.5rem 0 .7rem; font-family: var(--font-display); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink); background: var(--paper-3); border:2.5px solid var(--ink); border-radius:40px; padding:.2rem .7rem; }
.gcard__desc { color: var(--ink-soft); font-size:.95rem; font-weight:600; max-width:30ch; margin:0 auto; }
.gcard__rating { margin-top:.7rem; font-family: var(--font-display); font-weight:800; color: var(--caramel-deep); }

/* ---- Play band (mobile pitch) ---- */
.band { background: var(--blue); border-top: var(--border); border-bottom: var(--border); }
.band__inner { max-width: var(--maxw); margin:0 auto; padding: clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,3.5rem); display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; color:#fff; }
.band__inner .kicker { color: var(--ink); background: var(--sun); }
.band__inner .section__title { color:#fff; }
.band__inner p { color: rgba(255,255,255,.92); margin-top:1rem; font-size:1.05rem; font-weight:600; }
.band__feats { display:grid; gap:.8rem; margin-top:1.6rem; }
.feat { display:flex; align-items:center; gap:.8rem; background: rgba(255,255,255,.14); border:2.5px solid #fff; border-radius:16px; padding:.7rem 1rem; }
.feat__ico { font-size:1.4rem; } .feat b { font-family: var(--font-display); }
.band__art { border: var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--paper); aspect-ratio:16/12; }
.band__art img { width:100%; height:100%; object-fit:cover; }

/* ---- Studio (family) ---- */
.studio__grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:3rem; align-items:center; }
.studio__art { border: var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); aspect-ratio:16/11; }
.studio__art img { width:100%; height:100%; object-fit:cover; }
.studio__text p { color: var(--ink-soft); margin-top:1.1rem; font-size:1.05rem; font-weight:600; }
.studio__text strong { color: var(--ink); }
.stats { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.stat { flex:1; min-width:120px; border: var(--border); border-radius:20px; box-shadow: var(--shadow-sm); padding:1.1rem 1rem; text-align:center; }
.stat:nth-child(1){ background: var(--sun); } .stat:nth-child(2){ background: var(--jade); color:#fff; } .stat:nth-child(3){ background: var(--coral); color:#fff; }
.stat__num { font-family: var(--font-display); font-size:2.3rem; font-weight:800; line-height:1; }
.stat__label { font-family: var(--font-display); font-weight:800; font-size:.78rem; margin-top:.3rem; }

/* ---- Craft ---- */
.craft__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:1.6rem; }
.craft__card { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:2rem 1.8rem; transition: transform .25s var(--ease); }
.craft__card:nth-child(1){ background:#fff7ea; } .craft__card:nth-child(2){ background:#eafaf5; } .craft__card:nth-child(3){ background:#e9f4fd; }
.craft__card:hover { transform: translateY(-6px) rotate(-1deg); }
.craft__icon { font-family: var(--font-jp); font-weight:700; font-size:1.8rem; width:64px; height:64px; display:grid; place-items:center; border: var(--border-2); border-radius:20px; box-shadow: var(--shadow-sm); margin-bottom:1.2rem; background: var(--paper); }
.craft__card:nth-child(1) .craft__icon{ background: var(--sun);} .craft__card:nth-child(2) .craft__icon{ background: var(--jade); color:#fff;} .craft__card:nth-child(3) .craft__icon{ background: var(--blue); color:#fff;}
.craft__card h3 { font-family: var(--font-display); font-weight:800; font-size:1.3rem; margin-bottom:.5rem; }
.craft__card p { color: var(--ink-soft); font-size:.96rem; font-weight:600; }

/* ---- Join ---- */
.join__inner { max-width:760px; margin:0 auto; text-align:center; background: var(--paper); border: var(--border); border-radius:34px; box-shadow: var(--shadow); padding: clamp(2.5rem,5vw,4rem); }
.join__inner p { color: var(--ink-soft); margin:1rem auto 2rem; font-size:1.05rem; font-weight:600; }
.join__roles { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2rem; }
.join__roles span { font-family: var(--font-display); font-weight:800; font-size:.9rem; padding:.5rem 1rem; border: var(--border-2); border-radius:40px; box-shadow: var(--shadow-sm); background: var(--paper); transition: transform .2s var(--ease); }
.join__roles span:nth-child(2n){ background: var(--sun);} .join__roles span:nth-child(3n){ background: var(--bubble);}
.join__roles span:hover { transform: translateY(-4px) rotate(-3deg); }

/* ---- Contact ---- */
.contact { max-width:780px; }
.contact__inner { background: var(--paper); border: var(--border); border-radius:34px; box-shadow: var(--shadow); padding: clamp(2rem,5vw,3.5rem); text-align:center; }
.contact__inner > p { color: var(--ink-soft); margin:.9rem 0 2rem; font-weight:600; }
.contact__form { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; text-align:left; }
.field { display:flex; flex-direction:column; } .field--full { grid-column:1/-1; }
.field label { font-family: var(--font-display); font-weight:800; font-size:.85rem; margin-bottom:.4rem; }
.field input, .field textarea { font-family: var(--font-body); font-weight:700; background: var(--paper-2); border: var(--border-2); border-radius:16px; padding:.8rem 1rem; color: var(--ink); font-size:.98rem; transition: box-shadow .2s, transform .2s; }
.field input:focus, .field textarea:focus { outline:none; box-shadow: var(--shadow-sm); transform: translate(-1px,-1px); }
.field textarea { resize:vertical; }
.contact__form .btn { grid-column:1/-1; justify-self:center; }
.contact__note { grid-column:1/-1; text-align:center; font-family: var(--font-display); font-weight:800; color: var(--caramel-deep); min-height:1.2rem; }

/* ---- Footer ---- */
.footer { border-top: var(--border); background: var(--paper-2); padding:3.5rem clamp(1.1rem,5vw,3.5rem) 2rem; }
.footer__top { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:3px dashed var(--ink); }
.footer__brand { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.footer__logo { width:52px; height:52px; border: var(--border-2); border-radius:50%; background: var(--paper); box-shadow: var(--shadow-sm); }
.footer__tag { color: var(--ink-soft); margin-top:.5rem; font-weight:600; }
.footer__stores { margin-top:1rem; }
.footer__nav { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.footer__nav h4 { font-family: var(--font-display); font-weight:800; font-size:1rem; margin-bottom:.7rem; }
.footer__nav a { display:block; color: var(--ink-soft); font-weight:700; padding:.25rem 0; transition: color .2s, transform .2s; }
.footer__nav a:hover { color: var(--caramel-deep); transform: translateX(3px); }
.footer__bottom { max-width: var(--maxw); margin:0 auto; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; color: var(--ink-soft); font-size:.9rem; font-weight:600; }

/* ---- Reveal / bob ---- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
.reveal.in { opacity:1; transform:none; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.bob { animation: bob 4s ease-in-out infinite; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero__grid, .studio__grid, .band__inner { grid-template-columns:1fr; }
  .hero { padding-top:7rem; } .hero__stage, .studio__art { order:-1; }
  .footer__top { grid-template-columns:1fr; }
}
@media (max-width: 780px) {
  .nav__links { position:fixed; inset:0 0 0 auto; width:min(78vw,300px); flex-direction:column; align-items:stretch; justify-content:center; gap:.8rem; padding:2rem; background: var(--paper); border-left: var(--border); transform: translateX(105%); transition: transform .35s var(--ease-soft); box-shadow:-8px 0 0 rgba(34,26,20,.1); }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size:1.15rem; text-align:center; border: var(--border-2); }
  .nav__toggle { display:flex; z-index:1001; }
  .nav__toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg);} .nav__toggle.open span:nth-child(2){ opacity:0;} .nav__toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg);}
}
@media (max-width: 560px) { .contact__form { grid-template-columns:1fr; } .footer__nav { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important;} .reveal{ opacity:1; transform:none;} }

/* ============================================================
   Game product page — Umami Cup
   ============================================================ */
.subnav { position: fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:.8rem clamp(1.1rem,5vw,3.5rem); background: rgba(253,246,236,.9); backdrop-filter: blur(10px); border-bottom: var(--border-2); }
.subnav__back { display:inline-flex; align-items:center; gap:.4rem; font-family: var(--font-display); font-weight:800; background: var(--paper); border: var(--border-2); border-radius:40px; padding:.4rem 1rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease); }
.subnav__back:hover { transform: translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.subnav__brand { display:flex; align-items:center; gap:.5rem; font-family: var(--font-display); font-weight:800; font-size:1.15rem; }
.subnav__brand img { width:36px; height:36px; border: var(--border-2); border-radius:50%; }
.subnav__ver { font-family: var(--font-arcade); font-size:.55rem; background: var(--ink); color:#fff; padding:.35rem .55rem; border-radius:8px; }

/* Product hero */
.gp-hero { max-width: var(--maxw); margin:0 auto; padding: 7rem clamp(1.1rem,5vw,3.5rem) 2rem; display:grid; grid-template-columns: 1.15fr .85fr; gap:2.5rem; align-items:center; }
.gp-hero__art { position:relative; border: var(--border); border-radius:32px; overflow:hidden; box-shadow: var(--shadow); background: linear-gradient(180deg,var(--sky),#bfe6fb); }
.gp-hero__art img { width:100%; display:block; }
.gp-hero__score { position:absolute; top:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; align-items:center; background: var(--ink); color:#fff; border:2.5px solid #000; border-radius:12px; padding:.4rem .7rem; font-family: var(--font-arcade); font-size:.6rem; box-shadow: var(--shadow-sm); }
.gp-hero__score .s{ color: var(--blue);} .gp-hero__score .o{ color: var(--orange);}
.gp-badge { display:inline-block; font-family: var(--font-display); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; background: var(--coral); color:#fff; border: var(--border-2); border-radius:40px; padding:.35rem 1rem; box-shadow: var(--shadow-sm); transform: rotate(-2deg); margin-bottom:1.1rem; }
.gp-title { font-family: var(--font-display); font-weight:800; font-size: clamp(2.6rem,7vw,4.4rem); line-height:.95; letter-spacing:-.02em; }
.gp-title .accent { color: var(--caramel-deep); }
.gp-tag { margin:1rem 0 1.4rem; font-size:1.15rem; color: var(--ink-soft); font-weight:700; max-width:40ch; }
.gp-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.gp-meta .chip { background: var(--paper); }

/* Generic product section */
.gp-sec { max-width: var(--maxw); margin:0 auto; padding: clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,3.5rem); }
.gp-sec__head { margin-bottom:2.2rem; }

/* Arenas gallery */
.arenas { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; }
.arena { border: var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--paper); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.arena:hover { transform: translateY(-6px) rotate(-1deg); box-shadow:10px 12px 0 var(--ink); }
.arena img { width:100%; aspect-ratio:1/1; object-fit:cover; border-bottom: var(--border); }
.arena__cap { padding:.9rem 1rem 1.1rem; }
.arena__n { font-family: var(--font-arcade); font-size:.55rem; color: var(--caramel-deep); }
.arena__name { font-family: var(--font-display); font-weight:800; font-size:1.2rem; line-height:1; margin-top:.35rem; }
.arena__desc { color: var(--ink-soft); font-size:.85rem; font-weight:600; margin-top:.25rem; }

/* How to play steps */
.steps { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; }
.step { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:1.8rem 1.5rem; background: var(--paper); }
.step:nth-child(1){ background:#e9f4fd;} .step:nth-child(2){ background:#fff7ea;} .step:nth-child(3){ background:#eafaf5;} .step:nth-child(4){ background:#fdeef2;}
.step__n { font-family: var(--font-display); font-weight:800; width:44px; height:44px; display:grid; place-items:center; border: var(--border-2); border-radius:14px; background: var(--paper); box-shadow: var(--shadow-sm); font-size:1.2rem; margin-bottom:1rem; }
.step h3 { font-family: var(--font-display); font-weight:800; font-size:1.2rem; margin-bottom:.4rem; }
.step p { color: var(--ink-soft); font-size:.92rem; font-weight:600; }

/* Cup bracket path */
.cup { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; justify-content:center; margin-top:1rem; }
.cup__node { font-family: var(--font-display); font-weight:800; background: var(--paper); border: var(--border-2); border-radius:40px; padding:.55rem 1rem; box-shadow: var(--shadow-sm); }
.cup__node.final { background: var(--sun); }
.cup__arrow { font-family: var(--font-display); font-weight:800; color: var(--caramel-deep); }

/* Roster */
.roster { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:1.2rem; }
.rchar { text-align:center; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding:1.4rem 1rem; background: var(--paper); }
.rchar__ico { width:84px; height:84px; margin:0 auto .8rem; border: var(--border-2); border-radius:50%; overflow:hidden; background: var(--paper-2); }
.rchar__ico img { width:100%; height:100%; object-fit:cover; }
.rchar__emoji { font-size:2.4rem; line-height:84px; }
.rchar__name { font-family: var(--font-display); font-weight:800; font-size:1.05rem; }
.rchar__role { font-size:.78rem; color: var(--ink-soft); font-weight:700; }

/* Spec table */
.spec { border: var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--paper); }
.spec__row { display:grid; grid-template-columns: 180px 1fr; gap:1rem; padding:.9rem 1.3rem; border-bottom:2px dashed var(--ink); }
.spec__row:last-child { border-bottom:none; }
.spec__k { font-family: var(--font-display); font-weight:800; }
.spec__v { color: var(--ink-soft); font-weight:600; }

@media (max-width: 900px){ .gp-hero{ grid-template-columns:1fr; } .gp-hero__art{ order:-1; } }
@media (max-width: 560px){ .spec__row{ grid-template-columns:1fr; gap:.2rem; } }