* { box-sizing: border-box; }

:root {
  --gold:#ffd66b;
  --pink:#ff8ad8;
  --blue:#8ed8ff;
  --paper:#fff7df;
  --ink:#24170f;
}

body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:"Apple SD Gothic Neo","Pretendard",sans-serif;
  color:white;
  background:linear-gradient(#17295f,#050711 78%);
  transition:background 7s,color 3s;
}

body.dawn-mode {
  background:linear-gradient(#2d3c78 0%,#e99d7a 58%,#ffdca8 100%);
}

body.day-mode {
  color:#25334d;
  background:linear-gradient(#8ed8ff 0%,#eaf8ff 72%,#fff4c8 100%);
}

.hidden { display:none !important; }

.sky {
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.sky::before {
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 22% 25%,rgba(255,138,216,.25),transparent 24%),
    radial-gradient(circle at 78% 18%,rgba(142,216,255,.24),transparent 26%),
    radial-gradient(circle at 50% 80%,rgba(255,214,107,.18),transparent 32%);
  filter:blur(22px);
  animation:aurora 10s infinite alternate;
}

@keyframes aurora {
  from { transform:translate(-2%,-1%) scale(1); }
  to { transform:translate(3%,2%) scale(1.12); }
}

#stars {
  position:absolute;
  inset:0;
  transition:opacity 5s;
}

body.day-mode #stars { opacity:0; }

.star {
  position:absolute;
  width:3px;
  height:3px;
  background:white;
  border-radius:50%;
  box-shadow:0 0 12px white;
  animation:twinkle 1.6s infinite alternate;
}

@keyframes twinkle {
  from { opacity:.18; transform:scale(.7); }
  to { opacity:1; transform:scale(1.45); }
}

.cloud {
  position:absolute;
  width:300px;
  opacity:.55;
  z-index:3;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.35));
  animation:cloudMove 28s linear infinite;
}

.cloud1 { top:18%; left:-330px; }
.cloud2 { bottom:17%; left:-390px; opacity:.35; animation-duration:42s; }

@keyframes cloudMove {
  from { transform:translateX(-10vw); }
  to { transform:translateX(135vw); }
}

.moon {
  position:absolute;
  top:42px;
  right:62px;
  width:230px;
  z-index:4;
  filter:drop-shadow(0 0 35px rgba(255,230,150,.65));
  animation:moonFloat 4s infinite alternate;
  transition:opacity 4s,transform 4s;
}

.crescent-moon {
  width:155px;
  top:76px;
  right:106px;
  opacity:.74;
}

@keyframes moonFloat {
  from { transform:translateY(0) scale(1); }
  to { transform:translateY(-12px) scale(1.04); }
}

.plane {
  position:absolute;
  left:5%;
  bottom:76px;
  width:235px;
  z-index:8;
  filter:drop-shadow(0 0 20px rgba(142,216,255,.7));
}

body.flight-started .plane {
  animation:takeoff 5.4s ease-in-out forwards;
}

@keyframes takeoff {
  0% { left:5%; bottom:76px; transform:rotate(0) scale(1); }
  32% { left:32%; bottom:105px; transform:rotate(0) scale(1.04); }
  58% { left:54%; bottom:320px; transform:rotate(-14deg) scale(.95); }
  100% { left:115%; bottom:570px; transform:rotate(-8deg) scale(.68); }
}

.postoffice {
  position:absolute;
  left:50%;
  bottom:38px;
  width:370px;
  transform:translateX(-50%);
  z-index:6;
  animation:popUp 1s ease-out;
}

.rabbit {
  position:absolute;
  left:27%;
  bottom:45px;
  width:145px;
  z-index:7;
  animation:rabbitIn 1.1s ease-out, rabbitBob 2s infinite alternate 1.1s;
}

@keyframes popUp {
  from { opacity:0; transform:translateX(-50%) translateY(120px) scale(.86); }
  to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

@keyframes rabbitIn {
  from { opacity:0; transform:translateX(-100px); }
  to { opacity:1; transform:translateX(0); }
}

@keyframes rabbitBob {
  from { transform:translateY(0); }
  to { transform:translateY(-8px); }
}

.app {
  position:relative;
  z-index:20;
  width:min(930px,92vw);
  margin:34px auto;
  padding-bottom:80px;
}

.scene { display:none; }
.scene.active { display:block; }

.panel {
  padding:30px;
  text-align:center;
  border-radius:28px;
  background:rgba(7,12,33,.62);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(12px);
  box-shadow:0 0 45px rgba(142,216,255,.28);
}

body.day-mode .panel {
  background:rgba(255,255,255,.72);
}

.system {
  font-family:"Courier New",monospace;
  color:var(--gold);
  font-weight:900;
  letter-spacing:2px;
}

h1 {
  margin:10px 0 8px;
  font-size:clamp(34px,6vw,64px);
  letter-spacing:3px;
  text-shadow:0 0 20px var(--blue);
}

.subtitle {
  margin-top:0;
  color:var(--gold);
  font-weight:900;
  letter-spacing:1px;
}

.ticket {
  width:min(650px,100%);
  margin:24px auto;
  padding:26px;
  border:2px dashed currentColor;
  border-radius:22px;
  background:rgba(255,255,255,.13);
  display:grid;
  gap:10px;
}

.ticket div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:8px;
}

.ticket span {
  opacity:.75;
  font-weight:900;
  font-size:13px;
}

button {
  padding:14px 28px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--pink));
  color:#271528;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 28px rgba(255,138,216,.55);
  animation:pulse 1.4s infinite alternate;
}

@keyframes pulse {
  from { transform:scale(1); }
  to { transform:scale(1.06); }
}

.progress {
  margin:22px auto;
  width:min(560px,100%);
}

.bar {
  margin-top:8px;
  height:16px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
}

#barFill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--blue));
  transition:.45s;
}

.mailbox {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  margin-top:24px;
  padding-bottom:40px;
}

.card {
  min-height:135px;
  height:auto;
  padding:22px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.32);
  cursor:pointer;
  transition:.25s;
  animation:cardFloat 2.6s infinite alternate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-height:1.35;
}

.card b {
  display:block;
  max-width:100%;
  white-space:normal;
  line-height:1.35;
  font-size:15px;
}

.card p {
  margin:0;
  line-height:1.35;
}


.card:hover {
  transform:translateY(-9px) scale(1.04);
  box-shadow:0 0 35px rgba(255,214,107,.42);
}

.card.read { opacity:.55; }
.card.locked { opacity:.35; filter:grayscale(1); cursor:not-allowed; }

@keyframes cardFloat {
  from { transform:translateY(0); }
  to { transform:translateY(-8px); }
}

.modal {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.letter-paper {
  width:min(760px,94vw);
  max-height:82vh;
  overflow:auto;
  background:var(--paper);
  color:var(--ink);
  border-radius:24px;
  padding:36px;
  line-height:1.9;
  white-space:pre-wrap;
  box-shadow:0 0 70px rgba(255,214,107,.72);
  animation:paperUp .6s ease-out;
}

@keyframes paperUp {
  from { opacity:0; transform:translateY(60px) scale(.94); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.story-overlay,.boot-overlay {
  position:fixed;
  inset:0;
  z-index:220;
  background:rgba(2,3,10,.9);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 1s,background 2s;
}

.story-overlay.dawn { background:rgba(241,166,110,.42); }
.story-overlay.day { background:rgba(142,216,255,.20); }

.story-box,.boot-box {
  width:min(720px,88vw);
  text-align:center;
  font-size:clamp(19px,3vw,30px);
  line-height:1.9;
  text-shadow:0 0 18px var(--blue);
}

.boot-box {
  text-align:left;
  font-family:"Courier New",monospace;
  color:var(--blue);
}

.story-line {
  opacity:0;
  transform:translateY(14px);
  animation:lineIn .8s forwards;
}

@keyframes lineIn {
  to { opacity:1; transform:translateY(0); }
}

.ending {
  position:fixed;
  inset:0;
  z-index:250;
  background:linear-gradient(#8ed8ff,#fff3c8);
  color:#23334d;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
}

.ending-card {
  padding:36px;
  border-radius:28px;
  background:rgba(255,255,255,.76);
  box-shadow:0 0 60px rgba(255,138,216,.45);
  white-space:pre-line;
}

.meteor {
  position: fixed;
  width: 2px;
  height: 150px;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.95),
    rgba(255,239,155,.9),
    rgba(255,255,255,0)
  );
  border-radius: 999px;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.9))
    drop-shadow(0 0 18px rgba(255,214,107,.7));
  transform: rotate(35deg);
  animation: meteorFall 2.4s linear forwards;
}

.meteor.hero {
  height: 210px;
  width: 3px;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,1))
    drop-shadow(0 0 26px rgba(255,214,107,.9));
}

@keyframes meteorFall {
  0% {
    opacity: 0;
    transform: translate(0,0) rotate(35deg) scale(.8);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-560px,760px) rotate(35deg) scale(1);
  }
}

.toast {
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:300;
  padding:14px 24px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:var(--gold);
  font-weight:900;
  box-shadow:0 0 28px rgba(255,214,107,.45);
  animation:toastPop 1.8s forwards;
}

@keyframes toastPop {
  0% { opacity:0; transform:translateX(-50%) translateY(20px) scale(.9); }
  15% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  80% { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-20px) scale(.95); }
}
.final-system {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #02030a;
  color: #dff8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
}

.final-box {
  width: min(760px, 86vw);
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.9;
  text-shadow: 0 0 16px #8ed8ff;
}

.final-board {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: linear-gradient(#11172e, #04050b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffef9b;
  text-align: center;
  font-family: "Courier New", monospace;
}

.board-inner {
  width: min(760px, 88vw);
  padding: 36px;
  border-radius: 24px;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,239,155,.55);
  box-shadow: 0 0 50px rgba(255,214,107,.32);
}

.board-inner h1 {
  font-size: clamp(40px, 8vw, 86px);
  margin: 0 0 20px;
  color: #ffef9b;
  text-shadow: 0 0 28px #ffd66b;
}

.board-inner p {
  font-size: clamp(20px, 4vw, 34px);
  margin: 10px 0;
}

.final-small {
  margin-top: 26px !important;
  font-size: clamp(14px, 2vw, 20px) !important;
  opacity: .7;
}