:root {
  --ink: #f8fbff;
  --navy: #10102b;
  --panel: #171842;
  --cyan: #6cecff;
  --gold: #ffe78a;
  --pink: #ff7ad9;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #09091d; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    linear-gradient(180deg, transparent 0 68%, #050615cc 100%),
    radial-gradient(circle at 18% 10%, #693e8d 0, transparent 28%),
    radial-gradient(circle at 82% 24%, #174e82 0, transparent 34%),
    repeating-linear-gradient(135deg, transparent 0 46px, rgba(92,116,183,.07) 47px 49px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 48px),
    #09091d;
  padding: 14px 18px 28px;
}

button { font: inherit; }

.cabinet {
  position: relative;
  width: min(1020px, 100%);
  aspect-ratio: 4 / 5;
  margin: auto;
  overflow: visible;
  background: url("assets/arcade-cabinet-shell.webp") center top / 100% 100% no-repeat;
  filter: drop-shadow(0 28px 44px #000b);
}

.marquee {
  position: absolute;
  z-index: 4;
  top: 7.2%;
  left: 16%;
  width: 68%;
  height: 5.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 5px 12px;
  background: transparent;
  color: #12102e;
  border: 0;
  text-shadow: 2px 2px #fff7;
}

.marquee::after {
  display: none;
}

.marquee h1 { margin: 1px 0; font: 1000 clamp(23px, 3.1vw, 32px)/.76 Impact, sans-serif; letter-spacing: .04em; }
.marquee h1 span { font-size: .62em; letter-spacing: .17em; }

.screen-bezel {
  position: absolute;
  z-index: 3;
  top: 14.9%;
  left: 9.4%;
  width: 81.2%;
  height: 42.8%;
  padding: 1.2%;
  background: transparent;
}
.screen {
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 5px solid #080914;
  border-radius: 9px;
  background:
    linear-gradient(#090b2033, #090b2055),
    url("assets/retro-playfield.webp") center / cover no-repeat,
    radial-gradient(circle at 70% 20%, #283468 0, #111333 48%, #090b20 100%);
  box-shadow: inset 0 0 35px #000, 0 0 0 2px #7d71a1;
  transition:box-shadow .45s ease, filter .45s ease;
}

.cg-lights {
  --progress:0;
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.cg-lights::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:calc(var(--progress) * .22);
  background:
    radial-gradient(circle at 78% 62%,#fff8 0,transparent 18%),
    conic-gradient(from 215deg at 78% 64%,#ff436755,#ffad4255,#ffe95b55,#50ef9b55,#42d8ff55,#6d72ff55,#e95cff55,#ff436755);
  mix-blend-mode:screen;
  transition:opacity .45s ease;
}
.cg-lights i {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:5.7%;
  aspect-ratio:1;
  opacity:0;
  transform:translate(-50%,-50%) scale(.58);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 16%,var(--glow) 37%,transparent 70%);
  box-shadow:0 0 10px var(--glow),0 0 25px var(--glow),0 0 48px var(--glow);
  mix-blend-mode:screen;
  transition:opacity .35s ease,transform .35s ease;
}
.cg-lights i.lit { opacity:1; transform:translate(-50%,-50%) scale(1); }
.screen.rainbow-complete {
  box-shadow:inset 0 0 44px #fff8,0 0 0 2px #fff,0 0 24px #72eaff;
}
.screen.rainbow-complete .overlay { background:#02030c; }

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 5px);
}

.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  color: var(--gold);
  border-bottom: 0;
  background: #090b20dd;
  font-family: "Courier New", monospace;
}
.topbar div { display: flex; gap: 10px; align-items: baseline; }
.topbar small { color: var(--cyan); font-weight: 900; }
.topbar strong { font-size: clamp(18px, 3vw, 26px); letter-spacing: .08em; }
.sound,.pause-control { color: #c9d3ff; background: transparent; border: 1px solid #7580ba; padding: 6px 8px; cursor: pointer; font: 700 11px "Courier New", monospace; }
.pause-control:disabled { opacity:.4; cursor:not-allowed; }

.game-layout { position:relative; z-index:2; min-height: 0; height: calc(100% - 49px); display: grid; grid-template-columns: 34% 66%; }
.akari-panel {
  position: relative;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  clip-path: polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%);
  margin: 68px 34px 118px 18px;
  border: 0;
  border-radius: 4px;
  background: #06091d;
  box-shadow: inset 0 0 12px #000;
}
.akari-panel img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
  filter: saturate(1.04) contrast(1.02) brightness(1.06);
  transition: opacity .24s ease, transform .45s ease, filter .45s ease;
}
.akari-panel img.portrait-shift {
  opacity: .22;
  transform: scale(1.045);
  filter: saturate(1.35) brightness(1.5);
}
.akari-panel::after { display:none; }
.portrait-glow { position:absolute; inset:0; box-shadow: inset 0 0 42px #89eaffaa; mix-blend-mode: screen; }

.playfield {
  position: relative;
  padding: 10px clamp(72px, 12vw, 130px) 18px 4px;
  min-width: 0;
  background: transparent;
}
.round-row, .status-row { display:flex; justify-content:space-between; align-items:center; font: 900 14px "Courier New", monospace; letter-spacing:.08em; color:#a9f4ff; }
.round-row { position:relative; left:-16px; margin-top:20px; }
#lives { color: #ff8ad7; letter-spacing: .2em; }

.lamp-frame { position:relative; left:-16px; margin-top:8px; padding:38px 10px 16px; border:0; border-radius:12px; background:#07091cb8; box-shadow:inset 0 0 20px #000,0 0 0 1px #9ea8ef18; }
.judgement {
  position:absolute;
  z-index:4;
  top:calc(100% + 22px);
  left:50%;
  right:auto;
  min-width:150px;
  padding:0;
  opacity:0;
  transform:translateX(-50%) translateY(5px) scale(.92);
  pointer-events:none;
  text-align:center;
  border:0;
  border-radius:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
  text-shadow:0 0 8px #67dcff,0 2px 8px #02030c;
  transition:opacity .1s ease, transform .1s ease;
  font-family:"Courier New",monospace;
}
.judgement.visible { opacity:1; transform:translateX(-50%) scale(1); }
.judgement strong { display:block; font-size:24px; letter-spacing:.1em; }
.judgement span { display:block; min-height:12px; color:#bdefff; font-size:11px; font-weight:900; letter-spacing:.14em; }
.judgement.perfect { color:#fff5a2; }
.judgement.great { color:#8ff8ff; }
.judgement.good { color:#b9ffb4; }
.judgement.miss { color:#ff9cbe; }
.judgement.countdown {
  color:#fff3a4;
  transform:translateX(-50%) scale(.9);
}
.judgement.countdown.visible { transform:translateX(-50%) scale(1); }
.judgement.countdown strong { font-size:28px; letter-spacing:.12em; }
.target-label { position:absolute; top:10px; left:0; right:0; text-align:center; color:#ffe789; font:900 12px "Courier New",monospace; letter-spacing:.16em; }
.lamp-track { display:grid; grid-template-columns:repeat(15,1fr); gap:5px; align-items:center; }
.lamp { aspect-ratio:1; border-radius:50%; border:2px solid #576080; background:#1a203b; box-shadow:inset 0 0 7px #000; }
.lamp.target { border-color:#fff1a4; background:#584c2c; box-shadow:0 0 9px #ffe871, inset 0 0 6px #fff4; }
.lamp.active { background:#fff; border-color:#fff; box-shadow:0 0 8px #fff,0 0 20px var(--lamp-color),0 0 35px var(--lamp-color); transform:scale(1.18); }
.lamp.hit { animation:hit .45s ease-out; }
.track-numbers { overflow:hidden; margin-top:9px; white-space:nowrap; text-align:center; color:#68729e; font:9px "Courier New",monospace; }

.message-box { position:absolute; z-index:3; left:calc(-51.515% + 12px); bottom:14px; width:calc(51.515% - 24px); min-height:90px; margin:0; padding:10px 12px; border:0; border-radius:8px; background:#111735b8; box-shadow:inset 0 0 14px #0009,0 0 0 1px #91a3ef14; }
.message-box p { margin:0; }
.speaker { color:var(--pink); font:900 12px "Courier New",monospace; letter-spacing:.15em; }
#message { margin-top:8px; line-height:1.65; font-size:clamp(13px,2vw,16px); }
.status-row { position:relative; left:-16px; margin-top:72px; padding:0 4px; justify-content:flex-start; gap:26px; color:#c7cbff; }
.status-row b { color:var(--gold); font-size:18px; }

.overlay { position:absolute; z-index:30; inset:0; display:none; place-items:center; padding:24px; background:#02030c; }
.overlay.title-cover { background:#02030c; }
.overlay.visible { display:grid; }
.overlay-card { width:min(520px,100%); text-align:center; padding:26px; border:0; border-radius:0; background:transparent; box-shadow:none; text-shadow:0 2px 8px #050615,0 0 18px #050615; }
.overlay-akari { width:92px; height:92px; margin:0 auto 8px; display:block; object-fit:cover; object-position:50% 38%; border:3px solid #eefcff; border-radius:50%; box-shadow:0 0 0 4px #8f8cff,0 0 22px #80edff; }
.overlay-card h2 { margin:5px 0 12px; font-size:clamp(24px,5vw,38px); }
.overlay-card p { line-height:1.75; }
.akari-title { display:inline-block; margin-top:6px; color:#fff4bf; font-style:normal; }
.blink { color:#ff8fdc; font:900 13px "Courier New",monospace; letter-spacing:.2em; animation:blink 1s steps(2,end) infinite; }
.mode-panel { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:13px; }
.mode-button { min-width:92px; padding:6px 12px; border:1px solid #6d77a6; border-radius:3px; color:#bfc8ee; background:#090b20; font:900 11px "Courier New",monospace; letter-spacing:.12em; cursor:pointer; }
.mode-button.selected { color:#fff4a1; border-color:#ffe875; box-shadow:0 0 11px #ffe75a66; }
.expert-access { flex-basis:100%; margin-top:1px; color:#8d95b9; font:700 9px "Courier New",monospace; letter-spacing:.06em; }
.expert-access input { vertical-align:-2px; accent-color:#d75fff; }
.screen.expert-mode .topbar { box-shadow:inset 0 -2px #df75ff66; }

.controls {
  position: absolute;
  z-index: 5;
  top: 59.1%;
  left: 12%;
  width: 76%;
  height: 10.2%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  padding:10px;
  border:0;
  background:transparent;
}
.controls p { margin:0; color:#e9e7ff; font-weight:800; line-height:1.35; }
.controls small { color:#aaa7ca; }
.controls .stop-button {
  position:absolute;
  left:45.65%;
  top:-7%;
  width:18.3%;
  min-width:106px;
  max-width:142px;
  margin-left:-9.15%;
  border-width:clamp(4px,.49vw,5px);
}
.controls p {
  position:absolute;
  left:3%;
  top:22%;
  width:28%;
  overflow-wrap:anywhere;
  text-align:right;
  font-size:clamp(11px,1.15vw,14px);
}
.stop-button { width:142px; aspect-ratio:1.75; border:5px solid #f9b3e2; border-radius:50%; color:white; background:radial-gradient(circle at 35% 25%,#ff9ce3,#ec347d 52%,#861842); box-shadow:0 8px 0 #5e153c,0 11px 15px #0009,inset 0 0 12px #fff8; cursor:pointer; text-shadow:0 2px #7c1744; transition:.08s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.stop-button:not(:disabled):active { transform:translateY(6px); box-shadow:0 2px 0 #5e153c,0 4px 8px #0009; }
.stop-button:disabled { filter:grayscale(.8); opacity:.55; cursor:not-allowed; }
.stop-button.ready { animation:ready-button .86s ease-in-out infinite alternate; }

button:focus-visible {
  outline:3px solid #fff19a;
  outline-offset:4px;
  box-shadow:0 0 0 6px #62eaff88,0 0 22px #62eaff;
}

footer {
  position:absolute;
  z-index:4;
  top:70.3%;
  left:21%;
  width:58%;
  display:flex;
  justify-content:space-between;
  padding:6px 10px;
  color:#c9c7e7;
  border:1px solid #69729a66;
  border-radius:4px;
  background:#090c1caa;
  font:8px "Courier New",monospace;
  letter-spacing:.08em;
}

@keyframes hit { 50% { transform:scale(1.55); filter:brightness(2); } }
@keyframes blink { 50% { opacity:.25; } }
@keyframes ready-button {
  from { filter:brightness(.92); box-shadow:0 8px 0 #5e153c,0 11px 15px #0009,inset 0 0 12px #fff8; }
  to { filter:brightness(1.35); box-shadow:0 8px 0 #5e153c,0 11px 18px #0009,0 0 25px #ff65b5,inset 0 0 18px #fff; }
}
@media (min-width: 761px) {
  .akari-panel img { transform:scale(1.12); }
  .akari-panel img.portrait-shift { transform:scale(1.165); }
}

@media (max-width: 760px) {
  body { padding:0; }
  .cabinet {
    width:100%;
    min-height:100vh;
    aspect-ratio:auto;
    overflow:hidden;
    background:linear-gradient(100deg,#2d1c48,#1a2452 48%,#321b4f);
    filter:none;
  }
  .marquee {
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    padding:12px 10px 10px;
    background:linear-gradient(90deg,#fe7ab8,#ffdf75,#80f1d1,#82baff,#c78bff,#fe7ab8);
    border-bottom:4px solid #0b0a19;
  }
  .marquee::after { display:block; content:""; position:absolute; inset:5px; border:1px dashed #fff9; border-radius:7px; pointer-events:none; }
  .screen-bezel { position:relative; inset:auto; width:auto; height:auto; padding:7px; background:linear-gradient(90deg,#201638,#493a67 48%,#211539); }
  .screen { min-height:590px; height:auto; border-width:5px; border-radius:11px; }
  .topbar { grid-template-columns:1fr 1fr; gap:4px; padding:8px; }
  .topbar div { display:block; }
  .topbar small,.topbar strong { display:block; }
  .topbar strong { font-size:18px; }
  .sound { position:absolute; right:7px; bottom:7px; }
  .pause-control { position:absolute; right:88px; bottom:7px; }
  .game-layout { min-height:500px; height:auto; grid-template-columns:1fr; }
  .akari-panel {
    position:absolute;
    z-index:2;
    inset:auto 16px 14px auto;
    width:112px;
    height:142px;
    margin:0;
    opacity:1;
    border:2px solid #d9f6ffcc;
    border-radius:8px;
    clip-path:inset(0 round 8px);
    pointer-events:none;
  }
  .akari-panel img { object-position:center 36%; }
  .playfield { z-index:1; padding:16px 12px; background:linear-gradient(#0a0d29ef 0 62%,#0a0d29c5 100%); }
  .round-row,.lamp-frame,.status-row { left:0; }
  .round-row { margin-top:10px; }
  .lamp-frame { margin-top:18px; }
  .lamp-track { gap:3px; }
  .lamp { border-width:1px; }
  .track-numbers { display:none; }
  .message-box { position:static; width:auto; min-height:92px; margin-top:72px; padding:12px 15px; background:#101533ef; }
  .status-row { margin-top:16px; }
  .overlay { padding:48px 18px 20px; }
  .overlay-card { padding:25px 18px 21px; }
  .overlay-akari { width:82px; height:82px; margin:0 auto 8px; }
  .controls { position:relative; inset:auto; width:auto; height:auto; gap:18px; padding:14px 12px calc(14px + env(safe-area-inset-bottom)); border-top:5px solid #0b0a19; background:linear-gradient(#49405f,#252038); }
  .controls p { position:static; width:auto; overflow-wrap:normal; text-align:left; font-size:12px; }
  .controls .stop-button { position:static; width:126px; min-width:126px; max-width:none; margin-left:0; border-width:5px; flex:0 0 auto; }
  footer { display:none; }
}

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