/* ======================================================
   Multi-Line Story Game
   Full Screen Cinematic UI
   ====================================================== */

:root {

  color-scheme: dark;

  --text:
    rgba(255, 255, 255, 0.94);

  --muted:
    rgba(255, 255, 255, 0.58);

  --panel:
    rgba(8, 9, 13, 0.72);

  --panel-heavy:
    rgba(8, 9, 13, 0.88);

  --line:
    rgba(255, 255, 255, 0.16);

  --line-hover:
    rgba(255, 255, 255, 0.42);

  --accent:
    #ffffff;

}


/* ======================================================
   Reset
   ====================================================== */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    #080808;

  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;

}


/* ======================================================
   Game
   ====================================================== */

#game {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background:
    #080808;

}


/* ======================================================
   Background
   ====================================================== */

#scene-background {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background-position:
    center center;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  z-index: 0;

  transition:
    background-image 500ms ease;

}


#scene-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.28),
      transparent 30%,
      rgba(0, 0, 0, 0.20)
    );

}


/* ======================================================
   Top UI
   ====================================================== */

#top-ui {

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 30;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    max(18px, env(safe-area-inset-top))
    28px
    0;

  pointer-events:
    none;

}


#game-title {

  display: flex;

  flex-direction: column;

  gap: 4px;

  pointer-events:
    auto;

}


#game-title-main {

  font-size:
    13px;

  font-weight:
    600;

  letter-spacing:
    0.18em;

  text-shadow:
    0 2px 15px rgba(0,0,0,.7);

}


#game-time {

  font-size:
    11px;

  color:
    var(--muted);

  letter-spacing:
    0.16em;

}


#top-buttons {

  display: flex;

  gap: 8px;

  pointer-events:
    auto;

}


.system-button {

  border:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(0,0,0,.25);

  backdrop-filter:
    blur(10px);

  color:
    rgba(255,255,255,.82);

  border-radius:
    999px;

  padding:
    8px 13px;

  font-size:
    11px;

  letter-spacing:
    .08em;

  cursor:
    pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;

}


.system-button:hover {

  background:
    rgba(255,255,255,.12);

  border-color:
    rgba(255,255,255,.48);

  color:
    #fff;

}


/* ======================================================
   Game View
   ====================================================== */

#game-view {

  position: absolute;

  inset: 0;

  z-index: 10;

}


/* ======================================================
   Story Panel
   ====================================================== */

.story-panel {

  position: absolute;

  left: 4vw;
  right: 4vw;

  bottom:
    max(4vh, 28px);

  max-height:
    64vh;

  padding:
    clamp(22px, 4vw, 48px)
    clamp(22px, 5vw, 64px);

  overflow-y:
    auto;

  background:
    var(--panel);

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 20px 80px
    rgba(0,0,0,.35);

}


.story-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom:
    20px;

  font-size:
    11px;

  letter-spacing:
    .12em;

}


.story-character {

  color:
    rgba(255,255,255,.9);

  font-weight:
    600;

}


.story-separator {

  color:
    rgba(255,255,255,.25);

}


.story-location {

  color:
    var(--muted);

}


/* ======================================================
   Story Text
   ====================================================== */

.story-text {

  white-space:
    pre-wrap;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    "STSong",
    "PingFang SC",
    serif;

  font-size:
    clamp(
      17px,
      2.1vw,
      22px
    );

  line-height:
    2;

  letter-spacing:
    .035em;

  text-shadow:
    0 2px 10px
    rgba(0,0,0,.35);

}


/* ======================================================
   Choices
   ====================================================== */

.choices {

  display: flex;

  flex-direction: column;

  gap: 9px;

  margin-top:
    32px;

}


.choice {

  display: flex;

  align-items: center;

  width: 100%;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(255,255,255,.17);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.045);

  color:
    rgba(255,255,255,.88);

  text-align:
    left;

  font:
    inherit;

  font-size:
    15px;

  cursor:
    pointer;

  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;

}


.choice:hover,
.choice:focus-visible {

  transform:
    translateX(4px);

  background:
    rgba(255,255,255,.105);

  border-color:
    var(--line-hover);

  outline:
    none;

}


.choice-number {

  min-width:
    30px;

  color:
    rgba(255,255,255,.32);

  font-size:
    11px;

  letter-spacing:
    .08em;

}


.choice-text {

  flex:
    1;

}


/* ======================================================
   Timeline Switch
   ====================================================== */

.timeline-switch {

  margin-top:
    30px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(255,255,255,.10);

}


.timeline-switch-title {

  margin-bottom:
    10px;

  color:
    rgba(255,255,255,.42);

  font-size:
    11px;

  letter-spacing:
    .16em;

}


.timeline-targets {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.timeline-target {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 13px;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.78);

  cursor:
    pointer;

}


.timeline-target:hover {

  border-color:
    rgba(255,255,255,.42);

  background:
    rgba(255,255,255,.09);

}


.timeline-target-time {

  color:
    rgba(255,255,255,.38);

  font-size:
    10px;

}


/* ======================================================
   Presentation
   ====================================================== */

#presentation-layer {

  position:
    fixed;

  inset:
    0;

  z-index:
    100;

  pointer-events:
    none;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity 300ms ease,
    visibility 300ms ease;

}


#presentation-layer.active {

  opacity:
    1;

  visibility:
    visible;

}


.presentation-backdrop {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,.74);

  backdrop-filter:
    blur(8px);

}


.presentation-content {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.presentation-character {

  position:
    absolute;

  bottom:
    0;

  left:
    50%;

  transform:
    translateX(-50%);

  max-width:
    min(80vw, 620px);

  max-height:
    86vh;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 15px 35px
      rgba(0,0,0,.45)
    );

  animation:
    character-in 600ms ease
    both;

}


@keyframes character-in {

  from {

    opacity: 0;

    transform:
      translateX(-50%)
      translateY(30px)
      scale(.97);

  }

  to {

    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);

  }

}


.presentation-info {

  position:
    absolute;

  left:
    50%;

  bottom:
    8vh;

  transform:
    translateX(-50%);

  width:
    min(90vw, 620px);

  text-align:
    center;

  text-shadow:
    0 3px 20px
    rgba(0,0,0,.9);

}


.presentation-name {

  font-size:
    25px;

  font-weight:
    600;

  letter-spacing:
    .12em;

}


.presentation-subtitle {

  margin-top:
    5px;

  color:
    rgba(255,255,255,.55);

  font-size:
    11px;

  letter-spacing:
    .16em;

}


.presentation-text {

  margin-top:
    18px;

  font-size:
    15px;

  color:
    rgba(255,255,255,.86);

}


/* ======================================================
   Modal
   ====================================================== */

#modal-layer {

  position:
    fixed;

  inset:
    0;

  z-index:
    200;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


#modal-layer.hidden {

  display:
    none;

}


.modal-backdrop {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(15px);

}


#modal-content {

  position:
    relative;

  z-index:
    1;

  width:
    min(760px, 90vw);

  max-height:
    84vh;

  overflow-y:
    auto;

  padding:
    35px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    18px;

  background:
    rgba(12,13,18,.94);

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.5);

}


.modal-close {

  position:
    absolute;

  top:
    15px;

  right:
    18px;

  width:
    35px;

  height:
    35px;

  border:
    none;

  background:
    transparent;

  color:
    rgba(255,255,255,.55);

  font-size:
    25px;

  cursor:
    pointer;

}


/* ======================================================
   Timeline
   ====================================================== */

.timeline {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin-top:
    24px;

}


.timeline-item {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  width:
    100%;

  padding:
    15px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.035);

  color:
    white;

  text-align:
    left;

  cursor:
    pointer;

}


.timeline-item:hover {

  background:
    rgba(255,255,255,.08);

}


.timeline-time {

  width:
    60px;

  color:
    rgba(255,255,255,.42);

  font-size:
    12px;

}


.timeline-character {

  font-size:
    15px;

}


/* ======================================================
   Save
   ====================================================== */

.save-slots {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  margin-top:
    20px;

}


.save-slot {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    14px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    10px;

}


.save-slot > div {

  flex:
    1;

}


.save-slot strong,
.save-slot span {

  display:
    block;

}


.save-slot span {

  margin-top:
    4px;

  color:
    rgba(255,255,255,.38);

  font-size:
    11px;

}


.save-slot button {

  padding:
    7px 12px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    7px;

  background:
    rgba(255,255,255,.06);

  color:
    white;

}


/* ======================================================
   Gallery
   ====================================================== */

.ending-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap:
    12px;

  margin-top:
    22px;

}


.ending-item {

  position:
    relative;

  min-height:
    130px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.035);

  background-position:
    center;

  background-size:
    cover;

}


.ending-item-info {

  position:
    absolute;

  inset:
    auto 0 0;

  padding:
    35px 15px 15px;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.9)
    );

}


.ending-item-title {

  font-size:
    15px;

}


.ending-item-status {

  margin-top:
    4px;

  color:
    rgba(255,255,255,.48);

  font-size:
    10px;

}


/* ======================================================
   Ending
   ====================================================== */

.ending-screen {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background-position:
    center;

  background-size:
    cover;

}


.ending-overlay {

  width:
    min(760px, 88vw);

  padding:
    50px;

  text-align:
    center;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(12px);

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    16px;

}


.ending-label {

  color:
    rgba(255,255,255,.48);

  font-size:
    11px;

  letter-spacing:
    .25em;

}


.ending-overlay h1 {

  margin:
    18px 0 25px;

  font-size:
    clamp(28px, 6vw, 54px);

  font-weight:
    500;

}


.ending-text {

  white-space:
    pre-wrap;

  line-height:
    2;

  color:
    rgba(255,255,255,.82);

}


.ending-actions {

  display:
    flex;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    30px;

}


.ending-button {

  padding:
    10px 18px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.06);

  color:
    white;

}


/* ======================================================
   Developer
   ====================================================== */

#developer-state {

  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #090909;

}


#developer-state.hidden {

  display:
    none;

}


.developer-inner {

  width:
    min(500px, 86vw);

  text-align:
    center;

}


.developer-icon {

  margin-bottom:
    25px;

  color:
    rgba(255,255,255,.28);

  font-size:
    50px;

}


.developer-inner h1 {

  font-size:
    25px;

  font-weight:
    500;

}


.developer-inner p {

  margin-top:
    12px;

  color:
    rgba(255,255,255,.45);

  line-height:
    1.8;

}


.developer-hint {

  display:
    inline-block;

  margin-top:
    25px;

  padding:
    5px 12px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    999px;

  color:
    rgba(255,255,255,.35);

  font-size:
    10px;

  letter-spacing:
    .16em;

}


/* ======================================================
   Error
   ====================================================== */

.error-screen {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  transform:
    translate(-50%, -50%);

  width:
    min(600px, 85vw);

  padding:
    35px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:
    15px;

  background:
    rgba(0,0,0,.7);

}


.error-screen h1 {

  font-weight:
    500;

}


.error-screen p {

  color:
    rgba(255,255,255,.55);

}


/* ======================================================
   Empty
   ====================================================== */

.empty-state {

  padding:
    40px 20px;

  text-align:
    center;

  color:
    rgba(255,255,255,.35);

}


/* ======================================================
   Mobile / iPad
   ====================================================== */

@media (
  max-width: 700px
) {

  #top-ui {

    padding-left:
      15px;

    padding-right:
      15px;

  }


  #top-buttons {

    gap:
      5px;

  }


  .system-button {

    padding:
      7px 9px;

    font-size:
      10px;

  }


  .story-panel {

    left:
      3vw;

    right:
      3vw;

    bottom:
      max(
        2vh,
        env(safe-area-inset-bottom)
      );

    max-height:
      67vh;

    padding:
      22px;

  }


  .story-text {

    font-size:
      17px;

    line-height:
      1.9;

  }


  .choice {

    padding:
      13px 14px;

  }


  .presentation-character {

    max-width:
      94vw;

    max-height:
      78vh;

  }


  .presentation-info {

    bottom:
      6vh;

  }


  #modal-content {

    width:
      94vw;

    padding:
      28px 20px;

  }


  .ending-overlay {

    padding:
      30px 22px;

  }

}

/* ======================================================
   UI 4.0 — Home / Five Character Selection
   ====================================================== */
.home-screen{position:fixed;inset:0;z-index:450;overflow:hidden;color:var(--text);
background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.055),transparent 42%),linear-gradient(135deg,#0b0b0d,#020203 68%);
opacity:0;visibility:hidden;pointer-events:none;transition:opacity 650ms ease,visibility 650ms ease}
.home-screen.home-visible{opacity:1;visibility:visible;pointer-events:auto}.home-screen.home-hidden{opacity:0;visibility:hidden;pointer-events:none}
#game.home-mode #scene-background,#game.home-mode #scene-overlay,#game.home-mode #top-ui,#game.home-mode #game-view{visibility:hidden;pointer-events:none}
.home-menu-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(8vw,13vw,17vw);padding-bottom:4vh}
.home-kicker{margin-bottom:22px;color:rgba(255,255,255,.38);font-size:10px;letter-spacing:.42em;animation:home-rise 900ms 100ms both}
#home-title{margin:0;max-width:78vw;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(52px,8vw,112px);line-height:.98;font-weight:400;letter-spacing:.035em;text-shadow:0 20px 80px rgba(0,0,0,.65);animation:home-rise 1000ms 180ms both}
.home-subtitle{min-height:1.2em;margin-top:18px;color:rgba(255,255,255,.42);font-size:12px;letter-spacing:.22em;animation:home-rise 900ms 260ms both}
.home-menu{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:clamp(45px,7vh,78px);animation:home-rise 900ms 360ms both}
.home-menu-item{display:grid;grid-template-columns:35px minmax(150px,1fr) 28px;align-items:center;width:min(390px,62vw);padding:12px 0;border:0;border-bottom:1px solid rgba(255,255,255,.09);background:transparent;color:rgba(255,255,255,.48);text-align:left;cursor:pointer;font:inherit;transition:color 220ms ease,transform 220ms ease,border-color 220ms ease}
.home-menu-item:hover,.home-menu-item:focus-visible,.home-menu-item.is-active{color:#fff;transform:translateX(9px);border-color:rgba(255,255,255,.35);outline:none}
.menu-index{color:rgba(255,255,255,.23);font-size:10px;letter-spacing:.12em}.menu-label{font-size:16px;letter-spacing:.16em}.menu-arrow{color:rgba(255,255,255,.2);font-size:18px;transition:transform 220ms ease,color 220ms ease}
.home-menu-item:hover .menu-arrow,.home-menu-item:focus-visible .menu-arrow,.home-menu-item.is-active .menu-arrow{color:#fff;transform:translateX(5px)}
.home-version{position:absolute;left:clamp(8vw,13vw,17vw);bottom:28px;color:rgba(255,255,255,.2);font-size:9px;letter-spacing:.2em}
@keyframes home-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.character-select{position:absolute;inset:0}.character-select.hidden,.character-detail.hidden,.home-menu-panel.hidden{display:none}
.character-select-top{position:absolute;z-index:30;top:max(24px,env(safe-area-inset-top));left:32px;right:32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}
.minimal-back{justify-self:start;padding:8px 0;border:0;background:transparent;color:rgba(255,255,255,.62);font:inherit;font-size:12px;letter-spacing:.1em;cursor:pointer;pointer-events:auto;transition:color 180ms ease,transform 180ms ease}.minimal-back:hover{color:#fff;transform:translateX(-4px)}
.character-select-title{color:rgba(255,255,255,.68);font-size:10px;letter-spacing:.38em}.character-select-hint{justify-self:end;color:rgba(255,255,255,.25);font-size:10px;letter-spacing:.15em}
.character-collage{position:absolute;inset:0;display:flex;overflow:hidden;isolation:isolate;background:#050506;gap:0}
.character-poster{position:relative;flex:1 1 20%;width:20%;min-width:0;height:100%;margin-left:-2.5vw;padding:0;border:0;background:#0a0a0c;overflow:hidden;cursor:pointer;clip-path:polygon(19% 0,100% 0,81% 100%,0 100%);transition:flex 650ms cubic-bezier(.2,.72,.2,1),filter 450ms ease,transform 650ms cubic-bezier(.2,.72,.2,1),opacity 450ms ease}
.character-poster:first-child{margin-left:-1vw}
.character-poster-image,.character-poster-shade{position:absolute;inset:0}.character-poster-image{background-position:center center;background-repeat:no-repeat;background-size:cover;filter:grayscale(.05) brightness(.78);transform:scale(1.015);transition:transform 650ms cubic-bezier(.2,.72,.2,1),filter 450ms ease}
.character-poster-shade{background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.08) 38%,rgba(0,0,0,.68)),linear-gradient(to right,rgba(0,0,0,.3),transparent 42%,rgba(0,0,0,.28));transition:opacity 450ms ease}
.character-poster-info{position:absolute;z-index:2;left:14%;right:12%;bottom:7vh;display:flex;flex-direction:column;align-items:flex-start;text-align:left;text-shadow:0 4px 22px rgba(0,0,0,.9);transition:transform 450ms ease,opacity 350ms ease}
.character-poster-number{margin-bottom:7px;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:.18em}.character-poster-name{color:rgba(255,255,255,.92);font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(18px,2.2vw,30px);font-weight:400;letter-spacing:.08em;white-space:nowrap}.character-poster-status{margin-top:9px;color:rgba(255,255,255,.34);font-size:8px;letter-spacing:.24em}
.character-poster.is-locked{cursor:default;filter:grayscale(1) brightness(.32)}.character-poster.is-locked .character-poster-image{filter:grayscale(1) brightness(.52) blur(.8px)}.character-poster.is-locked .character-poster-info{opacity:.48}
.character-poster.is-unlocked:hover{z-index:5}.character-poster.is-unlocked:hover .character-poster-image{transform:scale(1.06);filter:brightness(.96) saturate(1.08)}.character-poster.is-unlocked:hover .character-poster-info{transform:translateY(-7px)}
.character-collage.has-selection .character-poster{opacity:.25;filter:grayscale(1) brightness(.38)}.character-collage.has-selection .character-poster.is-selected{z-index:20;flex:0 0 38vw;opacity:1;filter:none;transform:scale(1.045)}
.character-collage.has-selection .character-poster.is-selected .character-poster-image{filter:brightness(1.08) saturate(1.08);transform:scale(1.08)}
.character-collage.has-selection .character-poster.is-selected:after{content:"";position:absolute;inset:7% 8%;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 45px rgba(255,255,255,.16),inset 0 0 45px rgba(255,255,255,.06);opacity:.75;pointer-events:none;animation:poster-glow 650ms ease both}
@keyframes poster-glow{from{opacity:0;transform:scale(.96)}to{opacity:.75;transform:scale(1)}}

.character-detail{position:absolute;inset:0;overflow:hidden;background:#050506;animation:detail-in 750ms ease both}.character-detail-backdrop{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.58)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}.character-detail-image{position:absolute;inset:0;z-index:0;background-position:center 30%;background-size:cover;background-repeat:no-repeat;filter:saturate(.9) brightness(.78);transform:scale(1.035)}
.character-detail-content{position:relative;z-index:2;width:min(570px,74vw);margin-left:clamp(8vw,13vw,16vw);padding-top:28vh;text-shadow:0 5px 30px rgba(0,0,0,.9)}
.detail-role{color:rgba(255,255,255,.42);font-size:10px;letter-spacing:.25em;margin-bottom:18px}.detail-name{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(48px,7vw,92px);line-height:.95;font-weight:400;letter-spacing:.04em}.detail-romanized{margin-top:13px;color:rgba(255,255,255,.4);font-size:10px;letter-spacing:.32em}.detail-description{max-width:480px;margin:34px 0 0;color:rgba(255,255,255,.76);font-size:15px;line-height:2;letter-spacing:.045em}
.detail-actions{display:flex;align-items:center;gap:28px;margin-top:45px}.detail-action{padding:10px 0;border:0;border-bottom:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.5);font:inherit;font-size:12px;letter-spacing:.14em;cursor:pointer;transition:color 180ms ease,border-color 180ms ease,transform 180ms ease}.detail-action:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.7);transform:translateX(5px)}.detail-action-primary{color:#fff;border-color:rgba(255,255,255,.6)}.detail-action:disabled{opacity:.25;cursor:not-allowed}
@keyframes detail-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.home-toast{position:fixed;z-index:900;left:50%;bottom:9vh;transform:translate(-50%,15px);padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.68);backdrop-filter:blur(12px);color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.12em;opacity:0;transition:opacity 250ms ease,transform 250ms ease}.home-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.home-menu-panel{padding-left:9vw}.home-menu-item{width:78vw}.character-select-top{left:15px;right:15px}.character-select-hint{display:none}.character-poster{margin-left:-8vw;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}.character-poster:first-child{margin-left:-3vw}.character-poster-info{left:18%;bottom:6vh}.character-poster-name{font-size:17px}.character-poster-status{display:none}.character-collage.has-selection .character-poster.is-selected{flex-basis:66vw}.character-detail-content{width:78vw;margin-left:9vw;padding-top:23vh}.detail-name{font-size:clamp(45px,14vw,72px)}}