:root {
  --ink: #172421;
  --night: #102b29;
  --night-soft: #1c4844;
  --yellow: #f0c54e;
  --coral: #d95b4f;
  --paper: #fff7dd;
  --wood: #855238;
  --cyan: #66b9aa;
  --font-display: "Arial Black", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: dark; background: var(--night); }
body { min-width: 320px; min-height: 100dvh; margin: 0; overflow: hidden; font-family: var(--font-body); }
button, a { font: inherit; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-160%);
  color: var(--ink);
  background: var(--paper);
}
.skip-link:focus { transform: none; }

.title-screen {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--paper);
  background: var(--night);
}
.title-screen::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 22%;
  background: radial-gradient(circle at 52% 20%, rgba(240,197,78,.26), transparent 32%), linear-gradient(132deg, #173e3b 0 48%, #102b29 48%);
}
.title-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8vw;
  bottom: -23vh;
  left: -8vw;
  height: 45vh;
  transform: perspective(420px) rotateX(58deg);
  transform-origin: center bottom;
  background: linear-gradient(90deg, transparent 49.7%, rgba(255,247,221,.12) 50%, transparent 50.3%), linear-gradient(rgba(255,247,221,.1) 1px, transparent 1px), var(--wood);
  background-size: 20% 100%, 100% 36px, auto;
  border-top: 8px solid #ba8055;
}
.title-wall {
  position: absolute;
  z-index: -1;
  inset: 6% 4% 26%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid rgba(255,247,221,.09);
  pointer-events: none;
}
.title-wall i { border: 1px solid rgba(255,247,221,.045); }

.title-meta {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: clamp(18px, 4vw, 58px);
  left: clamp(18px, 4vw, 58px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #d7e8dd;
  font: 800 clamp(.62rem, 1vw, .78rem)/1.4 var(--font-mono);
}

.title-lockup {
  position: absolute;
  z-index: 4;
  top: clamp(76px, 11vh, 126px);
  left: clamp(22px, 7vw, 112px);
  width: min(720px, 72vw);
}
.title-stamp {
  width: fit-content;
  margin: 0 0 13px;
  padding: 7px 10px;
  transform: rotate(-1deg);
  color: var(--paper);
  background: var(--coral);
  font-size: clamp(.7rem, 1.1vw, .9rem);
  font-weight: 900;
}
.title-lockup h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--paper);
  font: 900 clamp(3.5rem, 8.2vw, 6rem)/.9 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 7px 7px 0 #081d1b;
}
.title-lockup h1 span { display: block; color: var(--yellow); }
.title-subtitle {
  margin: 17px 0 0;
  color: #d7e8dd;
  font-size: clamp(.9rem, 1.5vw, 1.12rem);
  font-weight: 800;
}

.title-band {
  position: absolute;
  z-index: 3;
  right: clamp(12px, 3vw, 46px);
  bottom: clamp(55px, 5vh, 88px);
  display: flex;
  width: min(64vw, 920px);
  align-items: end;
  justify-content: end;
}
.member {
  position: relative;
  width: 26%;
  max-width: 260px;
  margin: 0 -2.5%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 12px 0 rgba(8,29,27,.3));
}
.member img { display: block; width: 100%; max-height: 38vh; object-fit: contain; object-position: center bottom; }
.member figcaption {
  position: absolute;
  right: 14%;
  bottom: 1%;
  left: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 5px;
  font-size: clamp(.58rem, .9vw, .76rem);
  font-weight: 900;
}
.member kbd { font: 900 1em/1 var(--font-mono); }
.member-shiba { z-index: 1; transform: rotate(-2deg) translateY(5%); }
.member-raccoon { z-index: 3; transform: rotate(1deg); }
.member-cat { z-index: 2; transform: rotate(-1deg) translateY(4%); }
.member-otter { z-index: 4; transform: rotate(2deg) translateY(-1%); }

.press-start {
  position: absolute;
  z-index: 8;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  min-width: min(390px, calc(100% - 36px));
  padding: 12px 28px 10px;
  transform: translateX(-50%);
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--paper);
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 5px 0 #0a1f1d;
  text-align: center;
}
.press-start span { font-size: 1.05rem; font-weight: 900; animation: start-pulse 1.35s ease-in-out infinite; }
.press-start small { margin-top: 2px; font-size: .63rem; font-weight: 800; }
@keyframes start-pulse { 50% { opacity: .48; } }

.title-actions {
  position: absolute;
  z-index: 9;
  top: clamp(270px, 48vh, 440px);
  left: clamp(22px, 7vw, 112px);
  width: min(390px, calc(100% - 44px));
}
.title-actions[hidden] { display: none; }
.title-actions > p { margin: 0 0 11px; color: #d7e8dd; font-size: .72rem; font-weight: 800; }
.title-action {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
  padding: 10px 16px 10px 31px;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.title-action::before { content: ""; position: absolute; top: 18px; left: 7px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid transparent; }
.title-action span { font-size: clamp(1.18rem, 2.3vw, 1.65rem); font-weight: 900; }
.title-action small { color: #a9c7bb; font-size: .65rem; font-weight: 700; }
.title-action:hover,
.title-action:focus-visible,
.title-action.is-key-selected { color: var(--yellow); background: rgba(8,29,27,.64); outline: none; }
.title-action:hover::before,
.title-action:focus-visible::before,
.title-action.is-key-selected::before { border-left-color: var(--yellow); }
.title-actions > .title-control-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: #b7cfc5;
  font: 800 .62rem/1.4 var(--font-mono);
}
.title-control-hint kbd {
  min-width: 24px;
  padding: 3px 5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 2px 0 #081d1b;
}

.title-notice {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 18px;
  margin: 0;
  color: #b7cfc5;
  font-size: .62rem;
  font-weight: 700;
}
.title-screen.is-entered .press-start { display: none; }
.title-screen.is-entered .title-lockup { transform: translateY(-18px) scale(.78); transform-origin: 0 0; transition: transform .42s cubic-bezier(.16,1,.3,1); }
.title-screen.is-entered .title-band { opacity: .76; transition: opacity .3s ease-out; }

.title-dialog {
  width: min(540px, calc(100% - 32px));
  padding: 30px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 8px 8px 0 var(--coral);
}
.title-dialog::backdrop { background: rgba(6,24,22,.82); }
.title-dialog h2 { margin: 0 46px 18px 0; font-size: clamp(1.6rem, 5vw, 2.45rem); line-height: 1.05; }
.title-dialog p,
.title-dialog li { font-size: 1rem; line-height: 1.8; }
.title-dialog ol { padding-left: 1.5em; }
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .title-meta span:last-child { display: none; }
  .title-lockup { top: 74px; width: calc(100% - 44px); }
  .title-lockup h1 { font-size: clamp(3.25rem, 16vw, 5rem); }
  .title-band { right: -8%; bottom: 84px; width: 112%; }
  .member { width: 28%; margin: 0 -3.5%; }
  .member img { max-height: 32vh; }
  .member figcaption { display: none; }
  .title-actions { top: 36vh; padding: 8px; background: rgba(8,29,27,.9); }
  .title-screen.is-entered .title-lockup { transform: translateY(-10px) scale(.68); }
  .title-screen.is-entered .title-band { opacity: .36; }
  .title-notice { display: none; }
}

@media (max-height: 680px) and (min-width: 761px) {
  .title-lockup { top: 68px; }
  .title-lockup h1 { font-size: clamp(3rem, 7vw, 5rem); }
  .title-actions { top: 43vh; }
  .member img { max-height: 34vh; }
}

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