:root {
  --violet-shadow: #2A1538;
  --hot-magenta: #F72585;
  --ember-coral: #FF5A3D;
  --peach-cream: #FFE6C7;
  --oxide: #7C2D25;
  --apricot: #FFB36B;
  --solar: #FFD166;
  --step: 6px;
}

/* Design typography references: IBM Plex Sans Condensed** Condense* in uppercase for futuristic utility without defaulting to mono-heavy styling. Source Sans 3** 3* for clear humanist texture. Small interface labels. Interactions should be story-first. Hovering a tile can unlock a persona glyph. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  color: var(--violet-shadow);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 209, 102, .85), transparent 22%),
    radial-gradient(circle at 80% 8%, rgba(247, 37, 133, .42), transparent 22%),
    linear-gradient(135deg, #FF5A3D, #FFB36B 48%, #FFD166);
}

.arcade-shell {
  position: relative;
  height: 100vh;
  padding: clamp(14px, 2vw, 28px);
  isolation: isolate;
}

.arcade-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(42,21,56,.08) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(255,230,199,.16), transparent 35%, rgba(42,21,56,.12));
  mix-blend-mode: multiply;
  z-index: -1;
}

.watercolor-cloud {
  position: absolute;
  border-radius: 47% 53% 38% 62% / 58% 38% 62% 42%;
  filter: blur(12px);
  opacity: .72;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(.2, 1.45, .35, 1), opacity 500ms ease;
  z-index: -1;
}

.cloud-one {
  width: 48vw;
  height: 38vh;
  left: 2vw;
  bottom: 5vh;
  background: rgba(255, 230, 199, .62);
}

.cloud-two {
  width: 38vw;
  height: 42vh;
  right: 5vw;
  top: 6vh;
  background: rgba(247, 37, 133, .22);
}

.persona-board {
  height: calc(100vh - clamp(28px, 4vw, 56px));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: clamp(8px, 1.15vw, 16px);
  transition: transform 520ms cubic-bezier(.28, 1.55, .42, 1);
}

.cell {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--violet-shadow);
  border-radius: 22px;
  background: rgba(255, 230, 199, .86);
  box-shadow: var(--step) var(--step) 0 var(--violet-shadow), inset 0 0 0 2px rgba(255,255,255,.25);
  padding: clamp(12px, 1.4vw, 22px);
  transform: translate3d(0,0,0) scale(1);
  transition: transform 480ms cubic-bezier(.2, 1.65, .3, 1), box-shadow 320ms ease, background 420ms ease, border-radius 420ms ease;
}

.cell::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 25%, rgba(255,179,107,.75), transparent 31%), radial-gradient(circle at 74% 65%, rgba(255,90,61,.28), transparent 34%);
  opacity: .55;
  transform: scale(.82) rotate(-4deg);
  transition: transform 650ms cubic-bezier(.2, 1.5, .28, 1), opacity 500ms ease;
  z-index: 0;
}

.cell > * { position: relative; z-index: 1; }

.cell:hover,
.cell.is-live {
  transform: translate(-3px, -5px) scale(1.018);
  box-shadow: 10px 12px 0 var(--violet-shadow), inset 0 0 0 2px rgba(255,255,255,.45);
}

.cell:hover::before,
.cell.is-live::before { transform: scale(1.08) rotate(2deg); opacity: .82; }

.code-label {
  display: inline-block;
  font-family: "IBM Plex Sans Condensed", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: clamp(10px, .86vw, 13px);
  color: var(--peach-cream);
  background: var(--violet-shadow);
  border: 2px solid var(--oxide);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 3px 3px 0 var(--ember-coral);
}

.title-cartridge {
  grid-column: 1 / span 5;
  grid-row: 1 / span 4;
  background: linear-gradient(135deg, rgba(255,230,199,.94), rgba(255,179,107,.78));
}

h1 {
  font-family: "Alegreya Sans", "Arial Narrow", system-ui, sans-serif;
  font-size: clamp(58px, 8.6vw, 142px);
  line-height: .78;
  letter-spacing: -.055em;
  margin: clamp(16px, 3vh, 34px) 0 14px;
  color: var(--violet-shadow);
  text-shadow: 4px 0 0 var(--hot-magenta), 7px 5px 0 var(--solar);
}

h2 {
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-size: clamp(24px, 2.2vw, 40px);
  line-height: .9;
  margin: 10px 0 4px;
  letter-spacing: -.035em;
}

p { margin: 0; font-size: clamp(15px, 1.15vw, 20px); line-height: 1.15; font-weight: 600; }

.mode-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 3vh, 34px); }

.mode-chip {
  cursor: pointer;
  border: 3px solid var(--violet-shadow);
  border-radius: 13px;
  padding: 8px 14px;
  font-family: "IBM Plex Sans Condensed", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--peach-cream);
  color: var(--violet-shadow);
  box-shadow: 4px 4px 0 var(--violet-shadow);
}

.mode-chip.is-active { background: var(--hot-magenta); color: var(--peach-cream); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--violet-shadow); }

.viewport-a { grid-column: 6 / span 3; grid-row: 1 / span 3; }
.ticker-cell { grid-column: 9 / span 4; grid-row: 1 / span 1; background: var(--violet-shadow); color: var(--peach-cream); }
.threat-meter { grid-column: 9 / span 2; grid-row: 2 / span 2; background: rgba(255, 90, 61, .9); }
.viewport-b { grid-column: 11 / span 2; grid-row: 2 / span 3; }
.lore-cell { grid-column: 1 / span 3; grid-row: 5 / span 4; background: rgba(255, 209, 102, .88); }
.inventory-strip { grid-column: 4 / span 6; grid-row: 5 / span 2; }
.viewport-c { grid-column: 10 / span 3; grid-row: 5 / span 4; }
.unlock-tile { grid-column: 6 / span 2; grid-row: 4 / span 1; background: var(--hot-magenta); color: var(--peach-cream); }
.stamp-cell { grid-column: 4 / span 6; grid-row: 7 / span 2; background: rgba(124,45,37,.92); color: var(--peach-cream); }

.ticker-window {
  height: 100%;
  display: grid;
  place-items: center start;
  font-family: "IBM Plex Sans Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 700;
}

.wash {
  position: absolute;
  inset: 12%;
  border-radius: 44% 56% 52% 48%;
  background: linear-gradient(135deg, #FF5A3D, #FFB36B 48%, #FFD166);
  opacity: .75;
  filter: blur(2px);
}

.pixel-icon {
  width: clamp(70px, 8vw, 128px);
  height: clamp(70px, 8vw, 128px);
  margin: clamp(14px, 2vh, 22px) auto 8px;
  image-rendering: crisp-edges;
  filter: drop-shadow(6px 6px 0 var(--violet-shadow));
  animation: iconJitter 1.8s steps(2, end) infinite;
}

.horned-crown { background: conic-gradient(from 45deg, transparent 0 12.5%, var(--violet-shadow) 0 25%, transparent 0 37.5%, var(--violet-shadow) 0 50%, transparent 0 62.5%, var(--violet-shadow) 0 75%, transparent 0), linear-gradient(var(--hot-magenta), var(--hot-magenta)); clip-path: polygon(8% 78%, 8% 34%, 25% 48%, 35% 12%, 50% 44%, 66% 12%, 75% 48%, 92% 34%, 92% 78%); }
.cracked-halo { border: 18px solid var(--solar); border-radius: 50%; background: transparent; clip-path: polygon(0 0, 47% 0, 36% 45%, 53% 37%, 42% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 55% 100%, 65% 56%, 48% 62%, 58% 0); }
.moon-vendor { background: radial-gradient(circle at 55% 34%, var(--solar) 0 12%, transparent 13%), linear-gradient(90deg, var(--violet-shadow) 0 18%, transparent 18% 82%, var(--violet-shadow) 82%), linear-gradient(var(--hot-magenta) 0 18%, var(--peach-cream) 18% 72%, var(--violet-shadow) 72%); border-radius: 18px 18px 6px 6px; }

.inventory-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.inventory-items span { border: 2px solid var(--violet-shadow); background: rgba(255,255,255,.28); padding: 12px 8px; border-radius: 14px; font-family: "IBM Plex Sans Condensed", system-ui, sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1; box-shadow: 4px 4px 0 var(--ember-coral); }

.meter { display: flex; align-items: end; gap: 5px; height: 54%; margin: 14px 0; }
.meter i { display: block; flex: 1; background: var(--solar); border: 2px solid var(--violet-shadow); box-shadow: 3px 3px 0 var(--violet-shadow); }
.meter i:nth-child(1) { height: 25%; } .meter i:nth-child(2) { height: 38%; } .meter i:nth-child(3) { height: 55%; } .meter i:nth-child(4) { height: 70%; } .meter i:nth-child(5) { height: 86%; } .meter i:nth-child(6) { height: 100%; background: var(--hot-magenta); }
.threat-meter strong { font-family: "IBM Plex Sans Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; }

.unlock-mark { font-family: "Alegreya Sans", system-ui, sans-serif; font-size: clamp(42px, 5vw, 88px); line-height: .65; text-shadow: 4px 4px 0 var(--violet-shadow); }
.stamp { display: inline-block; transform: rotate(-4deg); border: 3px solid var(--ember-coral); color: var(--solar); padding: 8px 14px; font-family: "IBM Plex Sans Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: clamp(20px, 2vw, 36px); margin-bottom: 14px; }

.pixel-sparks span { position: fixed; width: 8px; height: 8px; background: var(--solar); border: 2px solid var(--violet-shadow); pointer-events: none; animation: spark 620ms steps(4, end) forwards; z-index: 5; }

.arcade-shell[data-mode="revolt"] .cell { border-radius: 12px 26px 10px 22px; }
.arcade-shell[data-mode="revolt"] .code-label { background: var(--hot-magenta); box-shadow: 3px 3px 0 var(--solar); }
.arcade-shell[data-mode="revolt"] .portrait .code-label::after { content: " / unstable type"; }
.arcade-shell[data-mode="remix"] .persona-board { transform: scale(.985) rotate(-.35deg); }
.arcade-shell[data-mode="remix"] .cell { background: rgba(255, 230, 199, .72); }
.arcade-shell[data-mode="remix"] .cloud-one { transform: scale(1.24) translate(8vw, -4vh); }
.arcade-shell[data-mode="remix"] .cloud-two { transform: scale(1.18) translate(-10vw, 5vh); opacity: .92; }

.cell.spring-pop { animation: springPop 560ms cubic-bezier(.16, 1.7, .34, 1); }

@keyframes iconJitter { 0%, 82%, 100% { transform: translate(0,0); } 86% { transform: translate(3px,-2px); } 90% { transform: translate(-2px,2px); } 94% { transform: translate(2px,1px); } }
@keyframes springPop { 0% { transform: scale(1); } 45% { transform: scale(1.07) translate(-4px,-8px); } 72% { transform: scale(.985) translate(2px,2px); } 100% { transform: scale(1); } }
@keyframes spark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.25); } }

@media (max-width: 860px) {
  html, body { overflow: auto; }
  .arcade-shell { height: auto; min-height: 100vh; }
  .persona-board { height: auto; grid-template-columns: repeat(4, 1fr); grid-template-rows: none; }
  .title-cartridge, .viewport-a, .ticker-cell, .threat-meter, .viewport-b, .lore-cell, .inventory-strip, .viewport-c, .unlock-tile, .stamp-cell { grid-column: 1 / -1; grid-row: auto; min-height: 170px; }
  .inventory-items { grid-template-columns: repeat(2, 1fr); }
}