:root {
  --bg0: #05060c;
  --bg1: #0f1730;
  --ink: #f2f6ff;
  --muted: #9aa8cc;
  --gold-0: #fff1c9;
  --gold-1: #f9c763;
  --gold-2: #e07d2c;
  --gold-3: #7b1f15;
  --line: rgba(143, 176, 248, 0.24);
  --danger: #ff3d5b;
  --cyan: #40d8ff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(140% 120% at 16% -18%, #2b4183 0%, var(--bg0) 45%) fixed;
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
body { overflow: hidden; }

.fx-layer, .fx-layer > * { position: fixed; inset: 0; pointer-events: none; }

.bg-grid {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 26%, transparent 92%);
  opacity: .56;
  animation: grid-shift 16s linear infinite;
}

.vortex {
  display: grid;
  place-items: center;
  mix-blend-mode: screen;
  opacity: .5;
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(119, 170, 255, .35);
  box-shadow: inset 0 0 50px rgba(84, 165, 255, .18), 0 0 45px rgba(255, 164, 80, .14);
}
.ring-a { width: min(72vh, 58vw); height: min(72vh, 58vw); animation: spin 24s linear infinite; }
.ring-b { width: min(54vh, 44vw); height: min(54vh, 44vw); animation: spin 18s linear infinite reverse; }
.ring-c { width: min(36vh, 30vw); height: min(36vh, 30vw); animation: spin 14s linear infinite; }
.rays {
  width: min(82vh, 66vw);
  height: min(82vh, 66vw);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(108, 162, 255, .16) 0deg 2deg, transparent 2deg 10deg);
  filter: blur(1px);
  animation: spin 15s linear infinite;
}

.lightning {
  opacity: 0;
  background: linear-gradient(112deg, transparent 35%, rgba(64, 216, 255, .95) 49%, transparent 62%),
              linear-gradient(72deg, transparent 30%, rgba(255, 68, 99, .85) 50%, transparent 67%);
  filter: blur(1px);
}
.lightning.active { animation: lightning .24s steps(2, end) 2; }

.scanline {
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 4px);
  opacity: .07;
}
.noise {
  background-image: radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);
  background-size: 4px 4px;
  opacity: .13;
  mix-blend-mode: soft-light;
}
.vignette { background: radial-gradient(circle at center, transparent 52%, rgba(0,0,0,.75) 100%); }

.corner-deco {
  background:
    linear-gradient(90deg, var(--gold-1), var(--gold-3)) top left/200px 2px no-repeat,
    linear-gradient(180deg, var(--gold-1), var(--gold-3)) top left/2px 120px no-repeat,
    linear-gradient(90deg, var(--gold-1), var(--gold-3)) top right/200px 2px no-repeat,
    linear-gradient(180deg, var(--gold-1), var(--gold-3)) top right/2px 120px no-repeat,
    linear-gradient(90deg, var(--gold-1), var(--gold-3)) bottom left/200px 2px no-repeat,
    linear-gradient(180deg, var(--gold-1), var(--gold-3)) bottom left/2px 120px no-repeat,
    linear-gradient(90deg, var(--gold-1), var(--gold-3)) bottom right/200px 2px no-repeat,
    linear-gradient(180deg, var(--gold-1), var(--gold-3)) bottom right/2px 120px no-repeat;
  opacity: .85;
}

.title-screen {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1rem + var(--safe-top)) calc(1.2rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(1.2rem + var(--safe-left));
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
  transition: transform .14s ease;
}

.left-pane {
  display: grid;
  align-content: center;
  gap: .75rem;
  padding: .6rem .6rem .4rem;
}
.right-pane {
  align-self: center;
  justify-self: stretch;
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid rgba(181, 201, 255, .28);
  border-radius: 1rem;
  background: linear-gradient(175deg, rgba(13,24,50,.78), rgba(8,12,26,.72));
  box-shadow: inset 0 0 30px rgba(107, 149, 255, .15), 0 20px 48px rgba(0,0,0,.45);
}

.badge {
  margin: 0;
  display: inline-block;
  width: fit-content;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .2em;
  font-size: clamp(.66rem, 1.1vw, .86rem);
  padding: .3rem .74rem;
  border-radius: 999px;
  border: 1px solid rgba(199, 219, 255, .38);
  background: rgba(10, 20, 43, .65);
}
.subtitle {
  margin: 0;
  color: #dbe3f7;
  line-height: 1.62;
  font-size: clamp(.92rem, 1.4vw, 1.15rem);
  max-width: 60ch;
}

.logo { margin: 0; line-height: .86; display: grid; gap: .2rem; }
.logo-word {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-weight: 900;
  letter-spacing: .12em;
  background: linear-gradient(180deg, var(--gold-0) 0%, var(--gold-1) 40%, var(--gold-2) 70%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(255, 180, 89, .24);
}
.logo-shukyoku { font-size: clamp(3.3rem, 9.1vw, 7.2rem); }
.logo-houkai { font-size: clamp(4.6rem, 12.8vw, 10.8rem); }

.logo-word::before,
.logo-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.logo-word::before {
  color: var(--danger);
  transform: translateX(0);
  text-shadow: -2px 0 var(--danger);
  clip-path: polygon(0 16%, 100% 8%, 100% 33%, 0 42%, 0 62%, 100% 56%, 100% 76%, 0 84%);
}
.logo-word::after {
  color: var(--cyan);
  transform: translateX(0);
  text-shadow: 2px 0 var(--cyan);
  clip-path: polygon(0 0, 100% 12%, 100% 28%, 0 39%, 0 50%, 100% 66%, 100% 100%, 0 86%);
}
.logo-word.glitch::before { opacity: .88; animation: g-r 220ms steps(2) 6; }
.logo-word.glitch::after { opacity: .9; animation: g-c 240ms steps(2) 6; }

.sysline {
  margin: 0;
  color: #cfdcff;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .12em;
  font-size: .72rem;
  text-align: center;
}

.diamond-btn {
  justify-self: center;
  width: 170px;
  height: 170px;
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38));
}
.diamond-core {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  background: linear-gradient(165deg, rgba(255,236,182,.2), rgba(142,66,27,.65));
  border: 2px solid rgba(255, 212, 120, .92);
  color: #fff4d8;
  font-weight: 900;
  font-size: 1.22rem;
  letter-spacing: .11em;
  text-shadow: 0 0 18px rgba(255,205,110,.38);
}
.diamond-core::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 212, 120, .38);
}
.diamond-core > * { transform: rotate(-45deg); }
.diamond-btn .shine {
  position: absolute;
  inset: 16px;
  transform: rotate(45deg);
  overflow: hidden;
}
.diamond-btn .shine::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  animation: run-shine 1.9s linear infinite;
}
.diamond-btn:hover .diamond-core,
.diamond-btn:focus-visible .diamond-core { box-shadow: 0 0 0 2px rgba(255,216,138,.32), 0 0 25px rgba(255,154,87,.48); }
.diamond-btn:active { transform: scale(.98); }

.menu-list { display: grid; gap: .55rem; }
.menu-btn {
  border: 1px solid rgba(165, 190, 246, .48);
  border-radius: .76rem;
  background: linear-gradient(180deg, rgba(57,89,154,.46), rgba(26,42,79,.56));
  color: var(--ink);
  padding: .66rem .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.menu-btn small {
  color: #b7c5e7;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .1em;
  font-size: .58rem;
}
.menu-btn:hover,
.menu-btn:focus-visible { border-color: rgba(255,225,165,.9); box-shadow: 0 0 0 2px rgba(255,211,120,.18); }

.intro-item { opacity: 0; transform: translateY(12px) scale(.98); }
.intro-item.show { opacity: 1; transform: translateY(0) scale(1); transition: .42s cubic-bezier(.2,.8,.2,1); }

.particles { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.piece {
  position: absolute;
  font-weight: 900;
  color: #ffe2b4;
  text-shadow: 0 0 12px rgba(255, 177, 90, .48);
  animation: rain linear forwards;
}
.piece::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.6em;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 96% 36%, 82% 100%, 18% 100%, 4% 36%);
  border: 1px solid rgba(255,196,118,.34);
  background: rgba(255,182,92,.08);
  z-index: -1;
}
.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff5d6 0%, #ff9564 72%, transparent 100%);
  box-shadow: 0 0 14px rgba(255,141,84,.9);
  animation: spark .82s ease-out forwards;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.92), rgba(255,188,132,.25), transparent 60%);
}
.flash.active { animation: flash .28s ease-out; }
.shake { animation: shake .34s ease-out; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(.8rem + var(--safe-bottom));
  transform: translateX(-50%) translateY(20px);
  z-index: 6;
  width: min(86vw, 680px);
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(7,10,18,.82);
  padding: .62rem .9rem;
  opacity: 0;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes grid-shift { from { transform: translateY(0); } to { transform: translateY(42px); } }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes g-r {
  0% { transform: translate(0,0);} 25% { transform: translate(-3px,1px);} 50% { transform: translate(3px,-1px);} 75% { transform: translate(-2px,2px);} 100% { transform: translate(0,0);} }
@keyframes g-c {
  0% { transform: translate(0,0);} 20% { transform: translate(2px,-1px);} 48% { transform: translate(-2px,1px);} 70% { transform: translate(3px,0);} 100% { transform: translate(0,0);} }
@keyframes run-shine { from { transform: translateX(-120%);} to { transform: translateX(120%);} }
@keyframes rain { from { transform: translateY(-10vh) rotate(0deg);} to { transform: translateY(110vh) rotate(360deg);} }
@keyframes spark { from { transform: translate(0,0) scale(1); opacity: 1;} to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0;} }
@keyframes flash { from { opacity: .95;} to { opacity: 0;} }
@keyframes shake {
  0% { transform: translate(0,0);} 20% { transform: translate(-8px,4px);} 40% { transform: translate(7px,-4px);} 60% { transform: translate(-5px,3px);} 80% { transform: translate(5px,-2px);} 100% { transform: translate(0,0);} }
@keyframes lightning { from { opacity: 0;} 50% { opacity: .95;} to { opacity: 0;} }

@media (orientation: portrait) {
  .title-screen { grid-template-columns: 1fr; overflow-y: auto; }
  .logo-shukyoku { font-size: clamp(2.6rem, 12vw, 4.6rem); }
  .logo-houkai { font-size: clamp(3.8rem, 15vw, 6.7rem); }
  .right-pane { margin-bottom: .8rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .diamond-btn { width: 140px; height: 140px; }
  .menu-btn { padding: .5rem .7rem; }
}