/* =========================================================
   Odyssey Express · Pixel Design System
   ========================================================= */
:root{
  --bg:        #fdf6e3;
  --bg-2:      #f5ead0;
  --bg-paper:  #efe1bd;
  --ink:       #2d2a2e;
  --ink-2:     #4a4044;
  --muted:     #7a6f5e;
  --line:      #c9b58a;
  --line-2:    #a38952;

  --night:     #141424;
  --night-2:   #1e2140;
  --night-3:   #2a2e55;
  --night-ink: #f4e9c8;

  --red:       #c23b3b;
  --red-deep:  #7a2424;
  --gold:      #ffb627;
  --gold-deep: #c88a12;
  --teal:      #2ec4b6;
  --sky:       #4ea5d9;
  --dust:      #d4a373;
  --forest:    #4c8a5a;
  --plum:      #7a3b6e;

  --font-pixel-en: "Press Start 2P", "VT323", monospace;
  --font-pixel-b:  "Pixelify Sans", "VT323", monospace;
  --font-vt:       "VT323", "DotGothic16", monospace;
  --font-zh:       "DotGothic16", "Noto Sans SC", sans-serif;
  --font-body:     "Noto Sans SC", sans-serif;

  --radius: 0px; /* pixel = no rounding */
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-soft: 0 6px 0 rgba(45,42,46,.18);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
html{font-size:16px;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
}
img,svg{image-rendering:pixelated;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit; text-decoration:none; cursor:pointer;}
.view[hidden]{display:none !important;}

/* =====  HOME  ===== */
#view-home{
  min-height:100vh;
  background: radial-gradient(ellipse at 50% 20%, #2a2e55 0%, #1a1b2e 55%, #0e0f1c 100%);
  color:var(--night-ink);
  position:relative;
  overflow:hidden;
  padding: 28px clamp(20px, 5vw, 80px) 56px;
  display:flex;
  flex-direction:column;
}
.stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 12%, #fff, transparent 50%),
    radial-gradient(1px 1px at 25% 30%, #ffeeaa, transparent 50%),
    radial-gradient(1px 1px at 40% 8%, #fff, transparent 50%),
    radial-gradient(1px 1px at 55% 22%, #fff, transparent 50%),
    radial-gradient(1px 1px at 70% 14%, #ffd97a, transparent 50%),
    radial-gradient(1px 1px at 82% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 92% 6%, #fff, transparent 50%),
    radial-gradient(1px 1px at 15% 44%, #fff, transparent 50%),
    radial-gradient(1px 1px at 48% 50%, #ffd97a, transparent 50%),
    radial-gradient(1px 1px at 88% 56%, #fff, transparent 50%),
    radial-gradient(1px 1px at 62% 64%, #fff, transparent 50%);
  animation: twinkle 3.5s steps(3, end) infinite;
  opacity:.9;
  pointer-events:none;
}
@keyframes twinkle{ 0%,100%{opacity:.9;} 50%{opacity:.4;} }

.home-top{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-pixel-en);
  font-size:10px; letter-spacing:2px;
  color:#ffd97a;
  z-index:3;
}
.brand-dot{
  width:10px; height:10px; background:var(--red);
  box-shadow:0 0 0 2px #ffd97a;
}

.home-hero{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  z-index:3;
  padding: 40px 0 16px;
  position:relative;
}
.ticket-stub{
  font-family:var(--font-pixel-en);
  font-size:8px; letter-spacing:2px;
  color:#2d2a2e;
  background:var(--gold);
  padding:8px 14px;
  display:inline-flex; gap:14px;
  margin-bottom:28px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 2% 50%, 4% 0);
  position:relative;
}
.ticket-stub::before{
  content:"";
  position:absolute; left:-2px; top:50%; width:6px; height:6px;
  background:var(--night); border-radius:50%;
  transform:translateY(-50%);
}

.home-title{
  line-height:1;
  display:flex; flex-direction:column; gap:18px;
  margin-bottom:22px;
}
.home-title .zh{
  font-family:var(--font-zh);
  font-size: clamp(64px, 9vw, 130px);
  font-weight:900;
  color:#fff9e4;
  letter-spacing:4px;
  text-shadow: 6px 6px 0 var(--red-deep), 12px 12px 0 rgba(0,0,0,.45);
}
.home-title .en{
  font-family:var(--font-pixel-en);
  font-size: clamp(14px, 1.4vw, 22px);
  letter-spacing:6px;
  color:#ffd97a;
}
.home-tag{
  font-family:var(--font-zh);
  font-size: clamp(20px, 2vw, 28px);
  color:#f4e9c8;
  letter-spacing:8px;
  margin-bottom:10px;
}
.home-tag::before, .home-tag::after{
  content:"— ";
  color:var(--gold);
  opacity:.7;
}
.home-sub{
  font-family:var(--font-vt);
  font-size:18px;
  color:#b9b0a0;
  letter-spacing:1px;
  max-width:540px;
}

.home-rail{
  position:absolute;
  left:0; right:0; bottom:28%;
  height:56px;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
}
.rail-line{
  position:absolute; left:0; right:0; bottom:8px;
  height:2px;
  background:
    repeating-linear-gradient(90deg, #5a4a2a 0 8px, transparent 8px 16px);
}
.rail-line::before{
  content:""; position:absolute; left:0; right:0; top:8px; height:1px;
  background: repeating-linear-gradient(90deg, #4a3a1a 0 3px, transparent 3px 10px);
  animation: railmove 1s linear infinite;
}
@keyframes railmove{ from{background-position:0 0;} to{background-position:-20px 0;} }
.home-train{
  position:absolute; bottom:12px;
  width:260px; height:auto;
  left:-280px;
  animation: trainpass 18s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.5));
}
@keyframes trainpass{
  0%{left:-280px;}
  100%{left:calc(100% + 40px);}
}
.home-smoke{
  position:absolute; bottom:60px;
  left:0; pointer-events:none;
  animation: smokefollow 18s linear infinite;
}
.home-smoke span{
  position:absolute;
  width:12px; height:12px; background:#fff9e4;
  border-radius:50%;
  opacity:.7;
  animation: puff 2s ease-out infinite;
}
.home-smoke span:nth-child(2){ animation-delay:.5s;}
.home-smoke span:nth-child(3){ animation-delay:1s;}
.home-smoke span:nth-child(4){ animation-delay:1.5s;}
@keyframes smokefollow{
  0%{left:-240px;}
  100%{left:calc(100% + 80px);}
}
@keyframes puff{
  0%{transform:translate(0,0) scale(.6); opacity:.8;}
  100%{transform:translate(-40px,-60px) scale(1.6); opacity:0;}
}

/* Home cards */
.home-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 20px;
  max-width: 900px;
  width:100%;
  margin: 0 auto;
  z-index:3;
}
.entry-card{
  position:relative;
  background:var(--bg-paper);
  color:var(--ink);
  padding: 22px 24px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink), 6px 6px 0 4px var(--red-deep);
  display:flex; gap:18px; align-items:center;
  transition: transform .12s steps(3, end), box-shadow .12s steps(3, end);
  overflow:hidden;
  min-height: 140px;
}
.entry-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 96%, rgba(0,0,0,.1) 96%) 0 0/12px 100%,
    linear-gradient(0deg, transparent 94%, rgba(0,0,0,.05) 94%) 0 0/100% 12px;
  pointer-events:none;
  opacity:.5;
}
.entry-card.featured{
  background: #1a1b2e;
  color:#fff9e4;
  box-shadow: 6px 6px 0 var(--gold), 6px 6px 0 4px var(--red-deep);
}
.entry-card:hover{
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink), 9px 9px 0 4px var(--red-deep);
}
.entry-card.featured:hover{
  box-shadow: 9px 9px 0 var(--gold), 9px 9px 0 4px var(--red-deep);
}
.entry-card:active{
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.entry-icon{
  flex:0 0 auto;
  width:68px; height:68px;
  display:grid; place-items:center;
  background: var(--gold);
  color: var(--ink);
  border:2px solid var(--ink);
  font-size:40px;
}
.entry-card.featured .entry-icon{
  background: var(--red);
  color:#fff9e4;
}
.entry-kicker{
  font-family:var(--font-pixel-en);
  font-size:8px; letter-spacing:2px;
  color: var(--red-deep);
  margin-bottom:6px;
}
.entry-card.featured .entry-kicker{ color: var(--gold); }
.entry-title{
  font-family:var(--font-zh);
  font-size: 22px; font-weight:900;
  line-height:1.2;
  margin-bottom:10px;
  letter-spacing:1px;
}
.entry-meta{
  font-family:var(--font-pixel-en);
  font-size:9px; letter-spacing:2px;
  display:inline-flex; align-items:center; gap:6px;
}
.entry-meta i{ font-size:16px; }
.entry-corner{
  position:absolute; top:8px; right:12px;
  font-family:var(--font-pixel-en);
  font-size:10px; color: var(--muted); opacity:.6;
}
.entry-card.featured .entry-corner{ color:#ffd97a; opacity:.7; }

.home-foot{
  margin-top:32px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--font-pixel-en);
  font-size:8px; letter-spacing:2px;
  color:#8a8098;
  z-index:3;
}
.foot-sep{ color:var(--red); }

/* =====  FLOAT NAV  ===== */
.float-nav{
  position:fixed; top:16px; right:16px;
  z-index:500;
  display:flex; gap:6px;
  background: var(--bg-paper);
  border:2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding:4px;
}
.fn-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:18px;
  color: var(--ink);
  transition: background .1s;
}
.fn-btn:hover{ background: var(--gold); }

/* =====  INTRO PAGE  ===== */
#view-intro{
  background: var(--bg);
  color: var(--ink);
  min-height:100vh;
  padding-bottom:80px;
}
.intro-wrap{ max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);}

/* Section 1 hero */
.ih{
  position:relative;
  padding: 80px 0 60px;
  overflow:hidden;
  border-bottom:3px double var(--line-2);
}
.ih-map{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 40%, var(--dust) 2px, transparent 3px) 0 0/24px 24px,
    radial-gradient(circle at 70% 30%, var(--forest) 2px, transparent 3px) 12px 12px/24px 24px,
    var(--bg-2);
  opacity:.35;
  mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}
.ih-kicker{
  font-family:var(--font-pixel-en);
  font-size:10px; letter-spacing:3px;
  color:var(--red); margin-bottom:14px;
  display:inline-flex; gap:10px; align-items:center;
}
.ih-kicker::before{ content:""; width:20px; height:2px; background:var(--red);}
.ih h1{
  font-family:var(--font-zh);
  font-size: clamp(64px, 10vw, 140px);
  font-weight:900; line-height:1;
  letter-spacing:6px;
  color:var(--ink);
  text-shadow: 4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,.1);
  margin-bottom:24px;
}
.ih-sub{
  font-size:22px; font-weight:500; line-height:1.6;
  max-width:720px; margin-bottom:36px;
  color:var(--ink-2);
}
.ih-sub em{ font-style:normal; color:var(--red-deep); font-weight:700;}
.ih-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  max-width: 780px;
}
.ih-stat{
  padding:18px 14px;
  border-right:2px solid var(--ink);
  text-align:left;
}
.ih-stat:last-child{ border-right:0;}
.ih-stat b{
  display:block;
  font-family:var(--font-pixel-b);
  font-size:34px; font-weight:700;
  color:var(--ink);
  line-height:1;
  margin-bottom:6px;
}
.ih-stat span{
  font-family:var(--font-pixel-en);
  font-size:8px; letter-spacing:2px;
  color:var(--muted);
}
.ih-trainrow{
  margin-top:50px;
  position:relative;
  height:70px;
}
.ih-trainrow svg{
  position:absolute; left:0;
  width:300px; height:auto;
  animation: trainpass 20s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.25));
}
.ih-trainrow::after{
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:
    repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px);
}

/* Generic section */
.isec{ padding: 72px 0; border-bottom: 2px dashed var(--line);}
.isec h2{
  font-family:var(--font-zh);
  font-size: clamp(36px, 4vw, 56px);
  font-weight:900;
  letter-spacing:3px;
  margin-bottom:12px;
  line-height:1.15;
}
.isec h2 .accent{ color:var(--red); }
.isec .eyebrow{
  font-family:var(--font-pixel-en);
  font-size:10px; letter-spacing:3px;
  color:var(--red);
  margin-bottom:10px;
  display:inline-block;
  padding:4px 8px;
  background: var(--bg-paper);
  border:2px solid var(--ink);
}
.isec .lede{
  font-size:18px; line-height:1.8;
  color: var(--ink-2);
  max-width:760px;
  margin-bottom:36px;
}
.isec.dark{ background: var(--night); color:var(--night-ink); border-bottom-color:#2a2740; }
.isec.dark h2{ color:var(--night-ink);}
.isec.dark h2 .accent{ color: var(--gold);}
.isec.dark .eyebrow{ background:var(--night-3); color:var(--gold); border-color:var(--gold); }
.isec.dark .lede{ color:#c9bfa8; }

/* Section 2 — what is it */
.what-quote{
  background:var(--bg-paper);
  border:3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--red-deep);
  padding: 36px 40px;
  font-family:var(--font-zh);
  font-size:24px; line-height:1.9; font-weight:500;
  position:relative;
  margin-bottom:40px;
}
.what-quote b{ color:var(--red-deep); font-weight:900; font-size:28px;}
.what-quote::before{
  content:"〝"; position:absolute; top:-6px; left:12px;
  font-size:64px; color:var(--red); font-family:var(--font-zh); line-height:1;
}
.what-quote::after{
  content:""; position:absolute; top:-14px; right:14px;
  width:42px; height:42px;
}
.analogies{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.ana{
  background:var(--bg);
  border:3px solid var(--ink);
  padding:22px;
  position:relative;
  transition: transform .1s steps(2);
}
.ana:hover{ transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink);}
.ana-ico{
  width:56px; height:56px; margin-bottom:14px;
  display:grid; place-items:center;
  font-size:34px;
  background:var(--gold); color:var(--ink);
  border:2px solid var(--ink);
}
.ana-label{
  font-family:var(--font-pixel-en);
  font-size:9px; letter-spacing:2px; color:var(--red-deep);
  margin-bottom:6px;
}
.ana-title{
  font-family:var(--font-zh);
  font-size:22px; font-weight:900;
  margin-bottom:10px;
}
.ana-desc{ font-size:14px; line-height:1.7; color:var(--ink-2);}

/* Section 3 — 6 steps timeline */
.steps{
  position:relative;
  padding-left: 48px;
}
.steps::before{
  content:""; position:absolute; left:22px; top:0; bottom:0;
  width:4px;
  background:
    repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px);
}
.step{
  position:relative;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:24px;
  padding:28px 0;
  align-items:start;
}
.step::before{
  content:""; position:absolute;
  left:-34px; top:40px;
  width:24px; height:24px;
  background:var(--red);
  border:3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.step-num{
  font-family:var(--font-pixel-en);
  font-size:48px; color:var(--ink);
  line-height:1;
  letter-spacing:-2px;
}
.step-ico{
  font-size:40px;
  color:var(--red);
  margin-top:8px;
}
.step-body h3{
  font-family:var(--font-zh);
  font-size:28px; font-weight:900;
  margin-bottom:8px;
}
.step-body p{
  font-size:16px; line-height:1.7;
  color:var(--ink-2);
  margin-bottom:12px;
}
.step-eg{
  font-family:var(--font-vt);
  font-size:18px;
  background:var(--bg-paper);
  border-left:4px solid var(--red);
  padding:10px 14px;
  color:var(--ink);
}

/* Section 4 — daily schedule */
.schedule{
  background: var(--bg-paper);
  border:3px solid var(--ink);
  padding: 24px;
  font-family:var(--font-vt);
  font-size:22px;
  box-shadow: 8px 8px 0 var(--ink);
}
.schedule-row{
  display:grid;
  grid-template-columns: 110px 60px 40px 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 10px;
  border-bottom:2px dashed var(--line);
}
.schedule-row:last-child{ border-bottom:0; }
.sch-time{
  font-family:var(--font-pixel-en); font-size:14px; color:var(--red-deep);
}
.sch-rail{
  height:2px; background:
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
}
.sch-ico{
  font-size:22px; color:var(--gold-deep); text-align:center;
}
.sch-text{ color:var(--ink);}
.sch-text b{ font-family:var(--font-zh); font-weight:900; font-size:20px; margin-right:8px;}
.sch-note{
  font-family:var(--font-vt); font-size:16px; color:var(--muted); white-space:nowrap;
}
.schedule-row.weekend{
  background: var(--night); color: var(--night-ink);
  border-radius:0;
  margin:8px -10px -10px;
  padding:14px 20px;
}
.schedule-row.weekend .sch-text{ color: var(--gold);}
.schedule-row.weekend .sch-time{ color: var(--gold);}
.schedule-row.weekend .sch-note{ color: #c9bfa8; }

/* Section 5 — 4-layer interaction */
.layers{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.layer{
  background: var(--bg);
  border:3px solid var(--ink);
  padding: 20px;
  position:relative;
  display:flex; flex-direction:column;
  transition: transform .1s steps(2);
}
.layer:hover{ transform:translateY(-4px); box-shadow:4px 4px 0 var(--ink);}
.layer-num{
  position:absolute; top:10px; right:14px;
  font-family:var(--font-pixel-en);
  font-size:10px; color:var(--muted);
}
.layer-ico{
  width:48px; height:48px;
  display:grid; place-items:center;
  background: var(--red); color:#fff9e4;
  border:2px solid var(--ink);
  font-size:26px;
  margin-bottom:16px;
}
.layer:nth-child(2) .layer-ico{ background: var(--teal);}
.layer:nth-child(3) .layer-ico{ background: var(--sky);}
.layer:nth-child(4) .layer-ico{ background: var(--gold); color:var(--ink);}
.layer h4{
  font-family:var(--font-zh); font-weight:900; font-size:20px;
  margin-bottom:10px;
}
.layer p{ font-size:13px; line-height:1.7; color:var(--ink-2); margin-bottom:12px; flex:1;}
.layer q{
  display:block;
  font-family:var(--font-vt); font-size:16px;
  color:var(--ink);
  background: var(--bg-paper);
  padding: 8px 10px;
  border-left: 3px solid var(--red);
  quotes:"" "";
}

/* Section 6 — 4 motivations, dark */
.motivs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.motiv{
  background: var(--night-2);
  border:2px solid var(--gold);
  padding: 26px;
  position:relative;
}
.motiv::before{
  content:""; position:absolute; top:-2px; left:-2px; width:20px; height:20px;
  background:var(--gold);
}
.motiv-num{
  font-family:var(--font-pixel-en);
  font-size:10px; color:var(--gold); letter-spacing:2px;
  margin-bottom:8px;
}
.motiv h4{
  font-family:var(--font-zh); font-weight:900; font-size:26px;
  color: var(--gold); margin-bottom:14px;
}
.motiv .motiv-q{
  font-family:var(--font-vt); font-size:20px;
  color:#fff9e4; margin-bottom:12px; padding-left: 14px; border-left:3px solid var(--red);
}
.motiv p{ font-size:14px; line-height:1.8; color:#c9bfa8;}
.motiv.hero{ background: var(--red-deep); border-color:var(--gold);}
.motiv.hero h4{ color: var(--gold);}

/* Section 7 — tickets */
.tickets{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;
}
.tkt{
  position:relative;
  background: var(--gold);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 22px 20px 24px;
  min-height: 340px;
  display:flex; flex-direction:column;
  box-shadow: 4px 4px 0 var(--ink);
}
.tkt::before, .tkt::after{
  content:""; position:absolute;
  width:20px; height:20px;
  background: var(--bg);
  border:3px solid var(--ink);
  border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.tkt::before{ left:-13px;}
.tkt::after{ right:-13px;}
.tkt-class{
  font-family:var(--font-pixel-en);
  font-size:8px; letter-spacing:2px; color:var(--red-deep);
  margin-bottom:4px;
}
.tkt-name{
  font-family:var(--font-zh); font-weight:900; font-size:24px;
  margin-bottom:12px; line-height:1;
}
.tkt-price{
  font-family:var(--font-pixel-b);
  font-size:30px; font-weight:700;
  line-height:1; margin-bottom:4px;
}
.tkt-price small{ font-family:var(--font-vt); font-size:16px; font-weight:400; color:var(--ink-2);}
.tkt-unit{
  font-family:var(--font-vt); font-size:14px; color:var(--muted);
  margin-bottom:16px;
}
.tkt-perks{
  border-top: 2px dashed var(--ink);
  padding-top: 14px;
  font-size:13px; line-height:1.7;
  flex:1;
}
.tkt-perks li{ list-style:none; margin-bottom:6px; padding-left:14px; position:relative;}
.tkt-perks li::before{ content:"▸"; position:absolute; left:0; color:var(--red);}

.tkt.pro{
  background: #1a1b2e;
  color:#fff9e4;
  border-color: var(--gold);
  box-shadow: 4px 4px 0 var(--gold);
  animation: hover-float 2s ease-in-out infinite;
}
.tkt.pro::before, .tkt.pro::after{ background: var(--bg); border-color: var(--gold);}
.tkt.pro .tkt-class{ color: var(--gold);}
.tkt.pro .tkt-unit{ color: #c9bfa8;}
.tkt.pro .tkt-perks{ border-top-color: var(--gold);}
.tkt-ribbon{
  position:absolute; top:-14px; right:-14px;
  background:var(--red); color:#fff9e4;
  font-family:var(--font-pixel-en); font-size:9px; letter-spacing:2px;
  padding: 6px 10px;
  border:2px solid var(--gold);
  transform: rotate(5deg);
}
@keyframes hover-float{
  0%,100%{ transform:translateY(0);}
  50%{ transform:translateY(-6px);}
}

/* Section 8 — emotions */
.emos{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.emo{
  background: var(--bg-paper);
  border:3px solid var(--ink);
  padding:28px;
  position:relative;
}
.emo-ico{
  width:80px; height:80px;
  background: var(--red); color:#fff9e4;
  border:3px solid var(--ink);
  display:grid; place-items:center;
  font-size:48px;
  margin-bottom:18px;
}
.emo:nth-child(2) .emo-ico{ background:var(--gold); color:var(--ink);}
.emo:nth-child(3) .emo-ico{ background:var(--sky); color:#fff9e4;}
.emo-label{
  font-family:var(--font-pixel-en); font-size:9px; letter-spacing:2px;
  color:var(--muted); margin-bottom:6px;
}
.emo h4{
  font-family:var(--font-zh); font-weight:900; font-size:28px;
  margin-bottom:12px;
}
.emo p{ font-size:15px; line-height:1.8; color:var(--ink-2);}

/* Section 10 — footer quote */
.endquote{
  background: var(--red-deep);
  color:#fff9e4;
  text-align:center;
  padding: 80px 20px;
}
.endquote blockquote{
  font-family:var(--font-zh);
  font-size: clamp(36px, 5vw, 62px);
  font-weight:900;
  line-height:1.4;
  max-width: 900px;
  margin: 0 auto 36px;
  letter-spacing:3px;
}
.endquote blockquote b{ color:var(--gold);}
.endquote .cta{
  display:inline-flex; gap:10px; align-items:center;
  background:var(--gold); color:var(--ink);
  font-family:var(--font-zh); font-weight:900;
  font-size: 22px;
  padding: 18px 32px;
  border: 3px solid #fff9e4;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
  transition: transform .1s steps(2);
  letter-spacing:2px;
}
.endquote .cta:hover{ transform: translate(-3px,-3px); box-shadow: 9px 9px 0 rgba(0,0,0,.5);}
.endquote .cta:active{ transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(0,0,0,.4);}

/* ============ DEMO ============ */
#view-demo{
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, #2a2e55 0%, #141424 70%);
  display:grid;
  place-items:center;
  padding: 30px 20px 60px;
  position:relative;
  overflow:hidden;
}
#view-demo .bg-stars{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 50%),
    radial-gradient(1px 1px at 30% 40%, #ffeeaa, transparent 50%),
    radial-gradient(1px 1px at 60% 10%, #fff, transparent 50%),
    radial-gradient(1px 1px at 80% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 40% 60%, #fff, transparent 50%),
    radial-gradient(1px 1px at 90% 70%, #ffd97a, transparent 50%),
    radial-gradient(1px 1px at 15% 80%, #fff, transparent 50%);
  opacity:.6;
  animation: twinkle 3s steps(3) infinite;
}
#view-demo .bg-label{
  position:absolute; top:20px; left:20px;
  font-family:var(--font-pixel-en);
  font-size:9px; letter-spacing:2px;
  color: #6a7098;
  z-index:1;
}
.phone{
  width: 380px;
  height: 780px;
  background: var(--bg);
  border: 4px solid #0a0a14;
  border-radius: 36px;
  box-shadow:
    0 0 0 2px #3a3a50,
    0 0 0 6px #0a0a14,
    0 30px 60px rgba(0,0,0,.6),
    0 0 120px rgba(78,165,217,.15);
  position:relative;
  z-index:2;
  overflow:hidden;
}
.phone-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:110px; height:20px; background:#0a0a14;
  border-radius: 12px;
  z-index:99;
}
.phone-notch::after{
  content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:#2a2e55; border-radius:50%;
}

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  overflow:hidden;
}
.screen[hidden]{ display:none;}

/* Screen transitions */
.screen.fade-in{ animation: mosaic-in .4s steps(6, end);}
@keyframes mosaic-in{
  0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity:0;}
  100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:1;}
}

/* Status bar */
.stbar{
  height:34px; padding: 10px 24px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-pixel-en); font-size:9px;
  color: var(--ink);
  flex:0 0 auto;
}
.stbar-right{ display:flex; gap:6px; align-items:center;}
.stbar .bat{
  width:18px; height:8px; border:1.5px solid var(--ink); position:relative;
}
.stbar .bat::after{
  content:""; position:absolute; left:1px; top:1px;
  width:12px; height:4px; background:var(--ink);
}
.stbar .bat::before{
  content:""; position:absolute; right:-3px; top:2px;
  width:2px; height:3px; background:var(--ink);
}

/* --- Screen 1 STATION --- */
.s-station{
  background:
    linear-gradient(180deg, #2a2e55 0%, #4ea5d9 55%, #d4a373 55%, #c88a12 100%);
}
.s-station .stbar{ color:#fff9e4;}
.s-station .stbar .bat{ border-color:#fff9e4;}
.s-station .stbar .bat::after{ background:#fff9e4;}
.s-station .stbar .bat::before{ background:#fff9e4;}
.stn-sign{
  text-align:center;
  padding: 4px 10px 10px;
  color:#fff9e4;
}
.stn-sign-en{
  font-family:var(--font-pixel-en); font-size:10px;
  letter-spacing:3px; color: #ffd97a;
}
.stn-sign-zh{
  font-family:var(--font-zh); font-weight:900;
  font-size:20px; letter-spacing:4px;
  margin-top:4px;
}
.stn-sign-under{
  height:2px; width:60%; margin:6px auto 0;
  background: repeating-linear-gradient(90deg, #ffd97a 0 4px, transparent 4px 8px);
}
.stn-stage{
  flex:1;
  position:relative;
  overflow:hidden;
}
.stn-mountain{
  position:absolute; bottom:46%; left:0; right:0; height:40px;
  background: linear-gradient(180deg, #3a3260 0, #2a2340 100%);
  clip-path: polygon(0 100%, 10% 60%, 20% 80%, 35% 40%, 50% 70%, 65% 50%, 80% 75%, 100% 55%, 100% 100%);
}
.stn-platform{
  position:absolute; bottom:0; left:0; right:0; height:45%;
  background:
    linear-gradient(180deg, #d4a373 0 10px, #b4895f 10px 14px, #8a6540 14px 100%);
  border-top: 3px solid #2d2a2e;
}
.stn-platform::before{
  content:""; position:absolute; top:14px; left:0; right:0; height:3px;
  background: repeating-linear-gradient(90deg, #2d2a2e 0 6px, transparent 6px 14px);
}
.stn-platform::after{
  content:""; position:absolute; top:26px; left:0; right:0; height:2px;
  background: repeating-linear-gradient(90deg, #5a3a1a 0 3px, transparent 3px 8px);
}
.stn-train{
  position:absolute; bottom:30%; left:24px;
  width: 320px; height: 80px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35));
  animation: idle-breath 2.4s ease-in-out infinite;
}
@keyframes idle-breath{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-2px);}
}
.stn-smoke{
  position:absolute; bottom:58%; left:70px;
  width:20px; height:20px;
}
.stn-smoke span{
  position:absolute; width:8px; height:8px; background:#fff9e4;
  border-radius:50%;
  opacity:.7;
  animation: puff 2.4s ease-out infinite;
}
.stn-smoke span:nth-child(2){ animation-delay:.8s;}
.stn-smoke span:nth-child(3){ animation-delay:1.6s;}

.stn-countdown{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background: rgba(20,20,36,.85);
  border:2px solid #ffd97a;
  padding: 8px 12px;
  color:#ffd97a;
  font-family:var(--font-pixel-en);
  font-size:9px; letter-spacing:2px;
  text-align:center;
  min-width: 180px;
}
.stn-countdown b{
  display:block;
  font-family:var(--font-pixel-b); font-weight:700;
  font-size:24px;
  color:#fff9e4;
  margin-top:4px;
  letter-spacing:3px;
}
.stn-countdown small{
  display:block; font-size:8px; color:#c9bfa8; margin-top:3px;
}

.stn-side{
  position:absolute; right:10px; top:110px;
  display:flex; flex-direction:column; gap:8px;
  z-index:3;
}
.side-btn{
  width:40px; height:40px;
  background:var(--bg-paper);
  border:2px solid var(--ink);
  color:var(--ink);
  font-size:20px;
  display:grid; place-items:center;
  box-shadow:2px 2px 0 var(--ink);
  transition: transform .08s steps(2);
}
.side-btn:hover{ background: var(--gold);}
.side-btn:active{ transform: translate(2px,2px); box-shadow:none;}

.stn-dock{
  flex:0 0 auto;
  background: var(--bg);
  border-top: 3px solid var(--ink);
  padding: 12px 14px 14px;
}
.stn-wallet{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 10px;
  font-family:var(--font-pixel-en); font-size:9px;
  color: var(--ink);
}
.stn-wallet .coins{
  display:flex; align-items:center; gap:6px;
  background: var(--gold); border:2px solid var(--ink);
  padding: 4px 10px;
  box-shadow: 2px 2px 0 var(--ink);
}
.stn-wallet .coins b{
  font-family:var(--font-pixel-b); font-size:16px;
}
.coin-ico{
  width:14px; height:14px; background: var(--gold-deep);
  border-radius:50%;
  border:2px solid var(--ink);
  box-shadow: inset 0 0 0 2px #ffe08a;
}
.ticket-row{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap:8px;
}
.tk{
  background: var(--bg-paper);
  border:2px solid var(--ink);
  padding: 8px 6px;
  text-align:center;
  cursor:pointer;
  transition: transform .08s steps(2), background .1s;
  position:relative;
}
.tk:hover{ background: var(--gold);}
.tk.selected{
  background: var(--red); color:#fff9e4;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 var(--ink);
}
.tk.selected::before{
  content:"✓"; position:absolute; top:-8px; right:-8px;
  width:18px; height:18px;
  background:var(--gold); color:var(--ink);
  font-family:var(--font-pixel-b); font-weight:700; font-size:12px;
  display:grid; place-items:center;
  border:2px solid var(--ink);
}
.tk-n{ font-family:var(--font-pixel-en); font-size:8px; color:var(--red-deep); letter-spacing:1px;}
.tk.selected .tk-n{ color:#fff9e4;}
.tk-t{ font-family:var(--font-zh); font-weight:900; font-size:14px; margin:2px 0;}
.tk-p{ font-family:var(--font-pixel-b); font-weight:700; font-size:14px;}
.confirm-btn{
  margin-top:10px;
  width:100%;
  padding: 12px;
  background:var(--line); color:var(--muted);
  font-family:var(--font-zh); font-weight:900; font-size:16px;
  border:2px solid var(--ink);
  transition: all .1s;
  letter-spacing:2px;
}
.confirm-btn.active{
  background: var(--red); color:#fff9e4;
  box-shadow: 3px 3px 0 var(--ink);
  cursor:pointer;
}
.confirm-btn.active:hover{ transform: translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);}
.confirm-btn.active:active{ transform: translate(2px,2px); box-shadow:none;}

/* Modals */
.modal-layer{
  position:absolute; inset:0;
  background: rgba(20,20,36,.72);
  display:grid; place-items:center;
  z-index:100;
  animation: fadein .2s ease;
  padding:20px;
}
.modal-layer[hidden]{ display:none;}
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }
.dialog{
  background:var(--bg);
  border:3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--red-deep);
  padding: 20px;
  width:100%;
  max-width: 300px;
  animation: dialog-pop .3s steps(4);
}
@keyframes dialog-pop{
  0%{ transform:scale(.4); opacity:0;}
  100%{ transform:scale(1); opacity:1;}
}
.dialog-title{
  font-family:var(--font-zh); font-weight:900; font-size:20px;
  text-align:center; margin-bottom:14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--line);
  letter-spacing:2px;
}
.dialog-row{
  display:flex; justify-content:space-between;
  font-family:var(--font-vt); font-size:18px;
  margin-bottom:8px; color:var(--ink);
}
.dialog-row b{ font-family:var(--font-pixel-b); font-weight:700;}
.dialog-actions{
  margin-top:16px;
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
}
.btn{
  padding: 10px;
  border:2px solid var(--ink);
  font-family:var(--font-zh); font-weight:900; font-size:14px;
  letter-spacing:1px;
  transition: transform .08s steps(2);
}
.btn-primary{ background:var(--red); color:#fff9e4; box-shadow: 2px 2px 0 var(--ink);}
.btn-primary:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);}
.btn-primary:active{ transform: translate(2px,2px); box-shadow:none;}
.btn-ghost{ background: var(--bg-paper); color:var(--ink);}
.btn-ghost:hover{ background: var(--gold);}
.btn-block{ grid-column: 1/-1;}

/* --- Screen 3 DEPARTURE --- */
.s-dep{ background: #141424; color:#fff9e4;}
.s-dep .stbar{ color:#fff9e4;}
.s-dep .stbar .bat{ border-color:#fff9e4;}
.s-dep .stbar .bat::after{ background:#fff9e4;}
.dep-stage{ flex:1; position:relative; overflow:hidden;}
.dep-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 50%),
    radial-gradient(1px 1px at 30% 40%, #ffd97a, transparent 50%),
    radial-gradient(1px 1px at 60% 10%, #fff, transparent 50%),
    radial-gradient(1px 1px at 80% 50%, #fff, transparent 50%),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent 50%);
  animation: starscroll 3s linear infinite;
}
@keyframes starscroll{
  from{background-position:0 0;}
  to{background-position:-100px 0;}
}
.dep-ground{
  position:absolute; bottom:0; left:0; right:0; height:60px;
  background: #3a2a20;
  border-top:3px solid #000;
}
.dep-ground::before{
  content:""; position:absolute; top:20px; left:0; right:0; height:3px;
  background: repeating-linear-gradient(90deg, #2d2a2e 0 8px, transparent 8px 16px);
  animation: railmove-fast .3s linear infinite;
}
@keyframes railmove-fast{
  from{background-position:0 0;}
  to{background-position:-24px 0;}
}
.dep-train{
  position:absolute; bottom:30px; left:50%;
  transform: translateX(-50%);
  width: 280px;
  animation: train-chug .3s steps(2) infinite;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.5));
}
@keyframes train-chug{
  0%,100%{ transform: translateX(-50%) translateY(0);}
  50%{ transform: translateX(-50%) translateY(-2px);}
}
.dep-bigsmoke{
  position:absolute; bottom:100px; left:50%;
  transform: translateX(-50%) translateX(-50px);
}
.dep-bigsmoke span{
  position:absolute; width:24px; height:24px;
  background:#d9cfb8; border-radius:50%;
  opacity:.8;
  animation: puff-big 1.6s ease-out infinite;
}
.dep-bigsmoke span:nth-child(2){ animation-delay:.3s; left:-14px;}
.dep-bigsmoke span:nth-child(3){ animation-delay:.6s; left:10px;}
.dep-bigsmoke span:nth-child(4){ animation-delay:.9s; left:-6px;}
.dep-bigsmoke span:nth-child(5){ animation-delay:1.2s; left:18px;}
@keyframes puff-big{
  0%{ transform: translate(0,0) scale(.5); opacity:.9;}
  100%{ transform: translate(-80px,-120px) scale(2); opacity:0;}
}
.dep-dest{
  position:absolute; top:40%; left:0; right:0;
  text-align:center;
  opacity:0;
  animation: dest-show 1.5s ease 1.2s forwards;
}
@keyframes dest-show{
  from{ opacity:0; transform: translateY(20px);}
  to{ opacity:1; transform: translateY(0);}
}
.dep-dest-label{
  font-family:var(--font-pixel-en);
  font-size:9px; color:#ffd97a; letter-spacing:3px;
  margin-bottom:10px;
}
.dep-dest-name{
  font-family:var(--font-zh); font-weight:900;
  font-size:32px; color:#fff9e4;
  letter-spacing:2px;
  text-shadow: 3px 3px 0 var(--red-deep);
}
.dep-dest-en{
  font-family:var(--font-pixel-en);
  font-size:10px; color:#c9bfa8; letter-spacing:3px;
  margin-top:8px;
}
.dep-skip{
  position:absolute; bottom:12px; right:14px;
  font-family:var(--font-pixel-en); font-size:8px;
  color:#c9bfa8;
  padding: 4px 8px;
  border:1px solid #c9bfa8;
}

/* --- Screen 4 JOURNEY (map) --- */
.s-journey{ background: #efe1bd;}
.journey-hdr{
  padding: 6px 14px 10px;
  background: var(--bg-paper);
  border-bottom:2px solid var(--ink);
}
.jr-route{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-pixel-en); font-size:9px;
  color:var(--red-deep);
  margin-bottom: 6px;
}
.progbar{
  height:10px;
  background: var(--bg);
  border:2px solid var(--ink);
  position:relative;
}
.progbar-fill{
  position:absolute; top:0; bottom:0; left:0;
  background: var(--red);
  transition: width .6s steps(10);
}
.map-stage{
  flex:1;
  position:relative;
  background:
    linear-gradient(180deg, #efe1bd 0%, #e0ceaa 100%);
  overflow:hidden;
}
.map-continents{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80px 40px at 20% 35%, #a38952 0%, transparent 100%),
    radial-gradient(ellipse 60px 35px at 55% 40%, #a38952 0%, transparent 100%),
    radial-gradient(ellipse 50px 30px at 78% 45%, #a38952 0%, transparent 100%),
    radial-gradient(ellipse 60px 25px at 30% 70%, #a38952 0%, transparent 100%),
    radial-gradient(ellipse 50px 25px at 70% 72%, #a38952 0%, transparent 100%);
  opacity: .5;
}
.map-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(122, 90, 50, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 90, 50, .15) 1px, transparent 1px);
  background-size: 24px 24px;
}
.map-route{
  position:absolute; inset:0;
  pointer-events:none;
}
.map-station{
  position:absolute;
  width:14px; height:14px;
  transform: translate(-50%, -50%);
}
.map-station .dot{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--ink);
  background: var(--line);
}
.map-station.visited .dot{ background: var(--forest);}
.map-station.current .dot{
  background: var(--red);
  animation: pulse 1.2s steps(4) infinite;
}
.map-station .lbl{
  position:absolute; top: 16px; left:50%; transform:translateX(-50%);
  font-family:var(--font-pixel-en); font-size:7px;
  white-space:nowrap;
  color:var(--ink);
  background:rgba(255,249,228,.8);
  padding: 1px 3px;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(194,59,59,.8);}
  50%{ box-shadow: 0 0 0 8px rgba(194,59,59,0);}
}
.map-train{
  position:absolute;
  width:44px; height:20px;
  transform: translate(-50%, -50%);
  transition: left 5s linear, top 5s linear;
  z-index:10;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}
.map-trail{
  position:absolute; left:-20px; top:50%;
  display:flex; gap:3px;
}
.map-trail span{
  width:4px; height:4px; background:#fff9e4;
  opacity:.6; border-radius:50%;
  animation: trail 1s ease-out infinite;
}
.map-trail span:nth-child(2){ animation-delay:.2s;}
.map-trail span:nth-child(3){ animation-delay:.4s;}
@keyframes trail{
  from{ opacity:.8; transform: scale(1);}
  to{ opacity:0; transform: scale(.3);}
}
.jr-incoming{
  position:absolute; bottom:12px; left:12px; right:12px;
  background: var(--bg);
  border:3px solid var(--ink);
  padding: 10px 12px;
  box-shadow: 3px 3px 0 var(--ink);
  display:flex; align-items:center; gap:10px;
}
.jr-incoming .ic{
  width:36px; height:36px; background:var(--red); color:#fff9e4;
  border:2px solid var(--ink);
  display:grid; place-items:center;
  font-size:18px;
}
.jr-incoming .txt b{ display:block; font-family:var(--font-zh); font-weight:900; font-size:14px;}
.jr-incoming .txt small{ font-family:var(--font-vt); font-size:14px; color:var(--muted);}

/* --- Screen 5 ENCOUNTER --- */
.s-enc{ display:flex; flex-direction:column;}
.enc-scene{
  flex:1 1 auto; min-height:0;
  position:relative; overflow:hidden;
  width:100%;
}
.enc-cultural{
  background: linear-gradient(180deg, #ffb86b 0%, #d4a373 40%, #c88a12 100%);
}
.enc-social{
  background: linear-gradient(180deg, #3a4670 0%, #1a1b2e 100%);
  color:#fff9e4;
}
.enc-chest{
  background: linear-gradient(180deg, #5a1818 0%, #2a0a0a 100%);
  color:#fff9e4;
}
.enc-scene{
  flex:1 1 auto; min-height:0;
  position:relative; overflow:hidden;
}
.enc-scene{
  flex:1 1 auto; min-height:0;
  position:relative; overflow:hidden;
}
.s-enc.enc-cultural{ background: linear-gradient(180deg, #ffb86b 0%, #d4a373 40%, #c88a12 100%); }
.s-enc.enc-social{ background: linear-gradient(180deg, #3a4670 0%, #1a1b2e 100%); }
.s-enc.enc-chest{ background: linear-gradient(180deg, #5a1818 0%, #2a0a0a 100%); }
/* desert */
.enc-cultural .enc-scene::before{
  content:""; position:absolute; bottom:0; left:0; right:0; height:50%;
  background:
    linear-gradient(180deg, transparent 0, #d4a373 40%, #a77a4a 100%);
  clip-path: polygon(0 40%, 15% 30%, 30% 45%, 50% 25%, 70% 40%, 85% 30%, 100% 42%, 100% 100%, 0 100%);
}
.enc-cultural .enc-scene::after{
  content:""; position:absolute; top:12%; right:40px;
  width:50px; height:50px; background:#ffd97a; border-radius:50%;
  box-shadow: 0 0 40px rgba(255, 217, 122, .6);
}
.npc{
  position:absolute; left:50%; bottom:90px;
  transform: translateX(-50%);
  width: 90px; height: 110px;
  image-rendering: pixelated;
  animation: npc-breathe 2.4s ease-in-out infinite;
  z-index:2;
}
@keyframes npc-breathe{
  0%,100%{ transform: translateX(-50%) translateY(0);}
  50%{ transform: translateX(-50%) translateY(-3px);}
}
.dialog-box{
  position:absolute; bottom:18px; left:14px; right:14px;
  background: var(--bg);
  color:var(--ink);
  border:3px solid var(--ink);
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  z-index:3;
}
.dialog-box .speaker{
  font-family:var(--font-pixel-en); font-size:9px;
  color: var(--red-deep);
  letter-spacing:2px;
  margin-bottom:6px;
}
.dialog-box p{
  font-family:var(--font-zh); font-weight:500; font-size:15px; line-height:1.6;
}

.phrase-card{
  position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff9e4;
  border:3px solid var(--ink);
  padding: 18px 20px;
  box-shadow: 4px 4px 0 var(--red-deep);
  text-align:center;
  z-index:3;
  animation: card-in .5s steps(4) .3s both;
}
@keyframes card-in{
  from{ transform: translate(-50%, -40%) scale(.6); opacity:0;}
  to{ transform: translate(-50%, -50%) scale(1); opacity:1;}
}
.phrase-card .ar{
  font-family: serif;
  font-size: 34px; color: var(--red-deep);
  margin-bottom:6px;
}
.phrase-card .pinyin{
  font-family:var(--font-pixel-en); font-size:10px; color:var(--muted); letter-spacing:1px;
}
.phrase-card .zh{
  font-family:var(--font-zh); font-weight:900; font-size:18px;
  margin-top: 8px;
}
.mic-btn{
  display:inline-flex; gap:8px; align-items:center;
  margin-top: 14px;
  padding: 8px 14px;
  background:var(--red); color:#fff9e4;
  font-family:var(--font-zh); font-weight:900; font-size:14px;
  border:2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.mic-btn.recording{
  animation: rec-pulse .5s steps(2) infinite;
}
@keyframes rec-pulse{
  0%,100%{ background: var(--red);}
  50%{ background: var(--gold); color:var(--ink);}
}

/* social encounter */
.cabin-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, #4a3a5a 0%, #2a2340 100%);
}
.cabin-bg::before{
  content:""; position:absolute; top:40%; left:20px; right:20px; height:60px;
  background: #1a1424;
  border: 3px solid #0a0a14;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(255, 217, 122, .3);
}
.cabin-bg::after{
  /* window stars */
  content:""; position:absolute; top:42%; left:24px; right:24px; height:56px;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 60% 50%, #ffd97a, transparent 50%),
    radial-gradient(1px 1px at 85% 20%, #fff, transparent 50%);
  animation: twinkle 2s steps(3) infinite;
}
.enc-social .npc{
  bottom:180px;
  width:80px; height:100px;
}
.enc-social .dialog-box{
  background: var(--night-3);
  color:#fff9e4;
  border-color: var(--gold);
}
.enc-social .dialog-box .speaker{ color: var(--gold);}

.postcard{
  position:absolute; top: 34%; left:50%; transform: translate(-50%,0);
  width: 280px;
  background: #fff9e4;
  border:3px solid var(--ink);
  padding: 12px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
  z-index:3;
  transform: translate(-50%, 0) rotate(-3deg);
}
.postcard-img{
  height: 70px;
  background:
    linear-gradient(180deg, #4ea5d9 0%, #d4a373 70%, #a77a4a 100%);
  position:relative;
  border:2px solid var(--ink);
  margin-bottom:8px;
}
.postcard-img::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:40%;
  background: #a77a4a;
  clip-path: polygon(0 40%, 20% 60%, 40% 30%, 60% 70%, 80% 40%, 100% 50%, 100% 100%, 0 100%);
}
.postcard-text{ font-family:var(--font-vt); font-size:16px; color:var(--ink); min-height: 36px;}
.postcard-meta{
  display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--font-pixel-en); font-size:7px; color:var(--muted);
}
.reply-options{
  position:absolute; bottom:130px; left:14px; right:14px;
  display:flex; flex-direction:column; gap:6px;
  z-index:3;
}
.reply-btn{
  background: var(--gold); color:var(--ink);
  border:2px solid var(--ink);
  padding: 8px 12px;
  font-family:var(--font-zh); font-weight:700; font-size:13px;
  text-align:left;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s;
}
.reply-btn:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);}

/* chest */
.chest-stage{
  flex:1; position:relative; display:grid; place-items:center;
  overflow:hidden;
}
.chest{
  width:120px; height:120px;
  position:relative;
  cursor:pointer;
  animation: chest-float 2s ease-in-out infinite;
  z-index:2;
}
.chest.opening{ animation: chest-shake .1s steps(2) 10;}
@keyframes chest-shake{
  0%,100%{ transform: translate(0,0) rotate(0);}
  25%{ transform: translate(-2px,-1px) rotate(-1deg);}
  75%{ transform: translate(2px,1px) rotate(1deg);}
}
@keyframes chest-float{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-6px);}
}
.chest-glow{
  position:absolute; inset:-40px;
  background: radial-gradient(circle, rgba(255,217,122,.5) 0%, transparent 70%);
  animation: chest-glow 2s ease-in-out infinite;
  z-index:1;
}
@keyframes chest-glow{
  0%,100%{ opacity:.4; transform: scale(1);}
  50%{ opacity:.9; transform: scale(1.15);}
}
.chest-rays{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  z-index:1;
}
.chest-rays.active{
  animation: rays-in .4s ease-out forwards;
}
@keyframes rays-in{
  from{ opacity:0; transform: scale(.4);}
  to{ opacity:1; transform: scale(1);}
}
.reward-card{
  position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  background:var(--bg);
  border:3px solid var(--gold);
  padding: 16px;
  width: 220px;
  text-align:center;
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  z-index:10;
}
.reward-card.show{ animation: reward-pop .5s steps(4) forwards;}
@keyframes reward-pop{
  0%{ transform: translate(-50%,-50%) scale(0) rotate(-12deg);}
  60%{ transform: translate(-50%,-50%) scale(1.15) rotate(6deg);}
  100%{ transform: translate(-50%,-50%) scale(1) rotate(0);}
}
.reward-art{
  height:90px; background: var(--gold); border:2px solid var(--ink);
  display:grid; place-items:center;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
}
.reward-art::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 3px, transparent 3px 8px);
}
.reward-tier{
  font-family:var(--font-pixel-en); font-size:8px; letter-spacing:2px;
  color: var(--red-deep); margin-bottom:4px;
}
.reward-name{
  font-family:var(--font-zh); font-weight:900; font-size:16px; color:var(--ink);
  margin-bottom:8px;
}
.reward-card .btn-primary{ width:100%;}

/* --- Screen 6 REWARD --- */
.s-reward{
  background: linear-gradient(180deg, #ffb627 0%, #c23b3b 100%);
  color: #fff9e4;
}
.s-reward .stbar{ color:#fff9e4;}
.s-reward .stbar .bat{ border-color:#fff9e4;}
.s-reward .stbar .bat::after{ background:#fff9e4;}
.confetti{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.confetti span{
  position:absolute; top:-20px;
  width:8px; height:8px;
  background: var(--gold);
  animation: confetti-fall 3s linear infinite;
}
.confetti span:nth-child(2n){ background:#fff9e4;}
.confetti span:nth-child(3n){ background: var(--red-deep); animation-duration: 2.4s;}
.confetti span:nth-child(4n){ background: var(--sky); animation-duration: 3.4s;}
@keyframes confetti-fall{
  0%{ transform: translateY(-20px) rotate(0); opacity:1;}
  100%{ transform: translateY(800px) rotate(720deg); opacity:0;}
}
.reward-stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 30px 20px;
  position:relative; z-index:2;
  text-align:center;
}
.reward-stamp-outer{
  width:180px; height:180px;
  display:grid; place-items:center;
  position:relative;
  margin-bottom:20px;
}
.reward-stamp{
  width:140px; height:140px;
  background: var(--bg);
  border: 3px solid var(--red-deep);
  display:grid; place-items:center;
  font-family:var(--font-pixel-en); font-size:16px;
  color:var(--red-deep); letter-spacing:2px;
  border-radius:50%;
  transform: scale(0) rotate(-25deg);
  animation: stamp-drop .8s steps(6) .3s forwards;
  position:relative;
}
.reward-stamp::before{
  content:""; position:absolute; inset:10px;
  border:2px dashed var(--red-deep);
  border-radius:50%;
}
@keyframes stamp-drop{
  0%{ transform: scale(3) rotate(-25deg); opacity:0;}
  60%{ transform: scale(1.1) rotate(-6deg); opacity:1;}
  100%{ transform: scale(1) rotate(-8deg); opacity:1;}
}
.reward-gained{
  font-family:var(--font-pixel-en); font-size:9px; letter-spacing:3px;
  margin-bottom:6px;
  opacity:0; animation: fadein .5s ease 1s forwards;
}
.reward-ttl{
  font-family:var(--font-zh); font-weight:900; font-size:32px;
  margin-bottom:18px;
  opacity:0; animation: fadein .5s ease 1.2s forwards;
  text-shadow: 3px 3px 0 var(--red-deep);
}
.reward-items{
  display:flex; gap:10px;
  opacity:0; animation: fadein .5s ease 1.5s forwards;
  margin-bottom:24px;
}
.reward-chip{
  background: rgba(0,0,0,.2);
  border:2px solid #fff9e4;
  padding: 8px 12px;
  font-family:var(--font-vt); font-size:15px;
  display:flex; align-items:center; gap:6px;
}
.reward-chip i{ font-size:14px;}
.reward-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  width:100%; max-width:320px;
  opacity:0; animation: fadein .5s ease 1.8s forwards;
}

/* --- Screen 7 PASSPORT --- */
.s-passport{
  background:
    linear-gradient(180deg, #3a1a1a 0%, #2a0a0a 100%);
  color:#fff9e4;
}
.s-passport .stbar{ color:#fff9e4;}
.s-passport .stbar .bat{ border-color:#fff9e4;}
.s-passport .stbar .bat::after{ background:#fff9e4;}
.pp-book{
  flex:1; margin: 10px 14px 0;
  background:
    linear-gradient(180deg, #7a2424 0%, #5a1818 100%);
  border:3px solid #1a0a0a;
  box-shadow:
    inset 0 0 0 3px #a64242,
    inset 0 0 0 6px #5a1818,
    0 6px 0 rgba(0,0,0,.4);
  padding: 16px;
  position:relative;
  overflow-y:auto;
}
.pp-cover-line{
  font-family:var(--font-pixel-en); font-size:10px; color:#ffd97a;
  letter-spacing:3px; text-align:center;
  padding: 6px 0;
  border: 2px solid #ffd97a;
  margin-bottom:12px;
}
.pp-title-zh{
  font-family:var(--font-zh); font-weight:900; font-size:22px;
  color:#ffd97a; text-align:center; margin-bottom:4px; letter-spacing:3px;
}
.pp-title-en{
  font-family:var(--font-pixel-en); font-size:8px; letter-spacing:4px;
  color:#ffd97a; text-align:center;
  margin-bottom:14px;
}
.pp-stats{
  background:rgba(0,0,0,.25);
  border:2px solid #ffd97a;
  padding: 10px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom:12px;
}
.pp-stat{
  font-family:var(--font-pixel-en); font-size:8px; color:#ffd97a; letter-spacing:1px;
}
.pp-stat b{
  display:block;
  font-family:var(--font-pixel-b); font-weight:700; font-size:20px;
  color:#fff9e4;
  margin-top:4px;
}
.pp-page-lbl{
  font-family:var(--font-pixel-en); font-size:8px; color:#ffd97a; letter-spacing:2px;
  margin-bottom:8px;
  text-align:center;
}
.stamp-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:8px;
  padding: 10px;
  background: rgba(255,249,228,.08);
  border:1px dashed #ffd97a;
}
.sg-cell{
  aspect-ratio: 1;
  background: rgba(0,0,0,.15);
  border: 1.5px dashed #c9bfa8;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-pixel-en); font-size:8px;
  color:#c9bfa8;
  position:relative;
}
.sg-cell.visited{
  background: #fff9e4;
  border: 2px solid var(--red-deep);
  color: var(--red-deep);
  font-size:8px;
  transform: rotate(-5deg);
  text-align:center; line-height:1;
  padding: 2px;
}
.sg-cell.visited.new{
  animation: newstamp-pop .6s steps(4) forwards;
}
@keyframes newstamp-pop{
  0%{ transform: scale(2.5) rotate(-25deg); opacity:0;}
  50%{ transform: scale(1.1) rotate(-6deg); opacity:1;}
  100%{ transform: scale(1) rotate(-5deg); opacity:1;}
}
.sg-cell.rare{
  border: 2px solid var(--gold);
}
.sg-cell.locked::after{
  content:"?"; color:#c9bfa8;
}

.pp-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  padding: 10px 14px;
  background: var(--bg-paper);
  border-top: 3px solid var(--ink);
}

/* --- Screen 8 INVENTORY --- */
.s-inventory{ background: var(--bg);}
.inv-hdr{
  padding: 6px 14px 8px;
  border-bottom: 2px solid var(--ink);
}
.inv-title{
  font-family:var(--font-zh); font-weight:900; font-size:18px; text-align:center;
  letter-spacing:2px;
}
.inv-tabs{
  display:flex; gap:4px; margin-top: 8px;
  overflow-x:auto;
  padding-bottom: 2px;
}
.inv-tab{
  flex:0 0 auto;
  padding: 4px 10px;
  font-family:var(--font-pixel-en); font-size:8px;
  background: var(--bg-paper);
  border:2px solid var(--ink);
  color:var(--ink);
  letter-spacing:1px;
  white-space:nowrap;
}
.inv-tab.active{ background: var(--red); color:#fff9e4;}
.inv-grid{
  flex:1;
  padding: 14px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  overflow-y:auto;
}
.inv-cell{
  background: var(--bg-paper);
  border: 2px solid var(--ink);
  padding: 8px;
  text-align:center;
  position:relative;
}
.inv-cell.equipped{
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.inv-cell.equipped::before{
  content: "★";
  position:absolute; top:-8px; right:-8px;
  width: 20px; height:20px;
  background:var(--gold); color:var(--ink);
  font-family:var(--font-pixel-b); font-weight:700; font-size:14px;
  display:grid; place-items:center;
  border:2px solid var(--ink);
  z-index:2;
}
.inv-art{
  aspect-ratio:1;
  background: var(--red);
  border:2px solid var(--ink);
  margin-bottom:6px;
  display:grid; place-items:center;
  font-size:32px;
  color:#fff9e4;
  position:relative;
  overflow:hidden;
}
.inv-art::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.1) 6px 8px);
}
.inv-name{
  font-family:var(--font-zh); font-weight:700; font-size:12px; line-height:1.2;
  margin-bottom:2px;
}
.inv-meta{
  font-family:var(--font-pixel-en); font-size:7px; color:var(--muted);
  margin-bottom:6px;
}
.inv-btn{
  padding: 4px 8px;
  background:var(--ink); color:var(--bg);
  font-family:var(--font-pixel-en); font-size:7px;
  letter-spacing:1px;
  border:2px solid var(--ink);
  width:100%;
}

/* --- Screen 9 SHARE --- */
.s-share{ background: var(--bg); }
.share-stage{
  flex:1; padding: 20px 16px;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto;
}
.share-card{
  width: 100%;
  background: linear-gradient(180deg, #7a2424 0%, #5a1818 100%);
  border: 3px solid var(--ink);
  padding: 20px;
  color:#fff9e4;
  box-shadow: 6px 6px 0 var(--ink);
  text-align:center;
}
.share-ava{
  width:72px; height:72px;
  margin: 0 auto 10px;
  background: var(--gold);
  border: 3px solid #fff9e4;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:30px;
  color: var(--red-deep);
}
.share-big{
  font-family:var(--font-zh); font-weight:900; font-size:26px;
  color: #ffd97a;
  letter-spacing:2px;
  margin-bottom:4px;
}
.share-mini-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:4px;
  margin: 16px 0;
  padding: 10px;
  background: rgba(0,0,0,.3);
  border: 1px dashed #ffd97a;
}
.share-mini-grid .mini{
  aspect-ratio:1;
  background: #fff9e4;
  border: 1px solid var(--red-deep);
  border-radius:50%;
}
.share-mini-grid .mini.empty{
  background: rgba(0,0,0,.2);
  border: 1px dashed #c9bfa8;
}
.share-logo{
  margin-top: 8px;
  font-family:var(--font-pixel-en); font-size:9px;
  letter-spacing:3px;
  color: #ffd97a;
}
.share-actions{
  margin-top: 16px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width:100%;
}

/* tutorial pointer */
.tutor{
  position:absolute;
  z-index: 200;
  pointer-events:none;
}
.tutor-bubble{
  background: var(--ink); color:var(--bg);
  font-family:var(--font-zh); font-weight:700; font-size:12px;
  padding: 8px 12px;
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  max-width: 180px;
  position:relative;
}
.tutor-bubble::after{
  content:""; position:absolute;
  bottom:-10px; left:20px;
  width:0; height:0;
  border: 8px solid transparent;
  border-top-color: var(--ink);
}
.tutor-finger{
  width: 24px; height: 24px;
  margin-top: 10px;
  animation: finger-bob .8s steps(2) infinite;
}
@keyframes finger-bob{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-6px);}
}

/* toast */
.toast{
  position:absolute; top: 46px; left:50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 8px 14px;
  font-family:var(--font-zh); font-weight:700; font-size:13px;
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  z-index: 300;
  animation: toast-pop .4s steps(4);
}
@keyframes toast-pop{
  from{ opacity:0; transform: translate(-50%, -20px);}
  to{ opacity:1; transform: translate(-50%, 0);}
}

/* flying coin */
.coin-flyer{
  position:absolute;
  font-family:var(--font-pixel-b); font-weight:700; font-size:18px;
  color: var(--red);
  z-index: 300;
  pointer-events:none;
  animation: coin-rise 1s ease-out forwards;
}
@keyframes coin-rise{
  from{ opacity:1; transform: translateY(0);}
  to{ opacity:0; transform: translateY(-40px);}
}

/* Section 10 measurement CSS removed (section deleted) */
.wbh-matrix-wrap{
  background: var(--night-2);
  border: 2px solid var(--gold);
  padding: 2px;
  margin-bottom: 32px;
  overflow-x:auto;
}
.wbh-matrix{
  width:100%;
  border-collapse: collapse;
  font-family: var(--font-vt);
  font-size: 18px;
  color:#fff9e4;
}
.wbh-matrix th, .wbh-matrix td{
  padding: 12px 10px;
  border: 1px solid rgba(255,217,122,.25);
  text-align:center;
  vertical-align:middle;
}
.wbh-matrix th{
  font-family: var(--font-pixel-en);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--gold);
  background: var(--night);
  padding: 14px 8px;
}
.wbh-matrix .wbh-dim{
  font-family: var(--font-zh);
  font-weight: 900;
  font-size: 14px;
  color: var(--gold);
  text-align:left;
  background: rgba(0,0,0,.25);
  letter-spacing: 1px;
}
.wbh-matrix td b{
  font-family: var(--font-pixel-b);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
}
.wbh-matrix .wbh-first{
  background: rgba(255,182,39,.12);
  color: #fff9e4;
}
.wbh-matrix th.wbh-first{
  background: var(--red-deep);
  color: var(--gold);
  border-color: var(--gold);
}
.wbh-matrix .wbh-dot{ color: #6a6a88; font-size: 22px;}
.wbh-check{ color: var(--gold); margin-right: 4px;}
.wbh-matrix .wbh-motive td{
  font-family: var(--font-zh); font-weight:700; font-size:14px;
  color:#ffd97a;
  background: rgba(0,0,0,.35);
}

.wbh-cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.wbh-card{
  background: var(--night-2);
  border: 2px solid var(--gold);
  padding: 22px;
  color: #fff9e4;
  display:flex; flex-direction:column;
}
.wbh-kicker{
  font-family: var(--font-pixel-en);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 8px;
}
.wbh-card h4{
  font-family: var(--font-zh); font-weight:900;
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--gold);
  letter-spacing:2px;
}
.wbh-card p{
  font-size: 13px; line-height:1.8;
  color: #c9bfa8;
  margin-top:auto;
}
.wbh-card p b{ color: var(--gold);}
.wbh-card p em{ font-style:normal; color: #fff9e4; font-weight:700;}

.wbh-pyramid{
  display:flex; flex-direction:column; gap: 4px;
  margin-bottom: 16px;
}
.pyr-row{
  position:relative;
  height: 40px;
  display:flex; align-items:center; justify-content:center;
}
.pyr-slice{
  position:absolute; inset:0;
}
.pyr-label{
  position:relative; z-index:2;
  font-family: var(--font-pixel-en);
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink);
  mix-blend-mode: normal;
}
.pyr-top .pyr-label{ color: var(--ink);}
.pyr-mid .pyr-label{ color: var(--ink);}
.pyr-bot .pyr-label{ color: var(--gold);}

.wbh-formula{
  background: rgba(0,0,0,.3);
  border: 1px dashed var(--gold);
  padding: 14px;
  text-align:center;
  margin-bottom: 14px;
  font-family: var(--font-vt);
}
.fm-top{ font-size: 18px; color: #c9bfa8;}
.fm-bar{ height:2px; background: var(--gold); margin:8px auto; width:70%;}
.fm-bot{ font-size: 24px; color: #fff9e4;}
.fm-val{
  font-family: var(--font-pixel-b); font-weight:700;
  font-size: 40px; color: var(--gold);
}
.fm-bot small{ font-family:var(--font-vt); font-size:16px; color:#c9bfa8;}

.wbh-match{
  list-style:none; padding:0; margin: 0 0 14px;
}
.wbh-match li{
  display:grid;
  grid-template-columns: 20px 1fr 18px 80px;
  gap: 8px;
  align-items:center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,217,122,.25);
  font-family: var(--font-vt);
  font-size: 15px;
  color: #fff9e4;
}
.wbh-match li:last-child{ border-bottom:0;}
.wbh-match li i{ color: var(--gold); font-size: 16px;}
.wbh-match li .arr{ color: var(--gold); text-align:center;}
.wbh-match li b{
  font-family: var(--font-pixel-en);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--gold);
  text-align:right;
}

@media (max-width: 820px){
  .wbh-cards{ grid-template-columns: 1fr;}
  .wbh-matrix{ font-size:14px;}
  .wbh-matrix th{ font-size:7px;}
}
@media (max-width: 820px){
  .home-cards{ grid-template-columns: 1fr;}
  .analogies{ grid-template-columns: 1fr;}
  .layers{ grid-template-columns: 1fr 1fr;}
  .motivs{ grid-template-columns: 1fr;}
  .tickets{ grid-template-columns: 1fr 1fr;}
  .emos{ grid-template-columns: 1fr;}
  .ih-stats{ grid-template-columns: repeat(2, 1fr);}
  .ih-stat:nth-child(2){ border-right:0;}
  .ih-stat:nth-child(1), .ih-stat:nth-child(2){ border-bottom: 2px solid var(--ink);}
  .step{ grid-template-columns: 80px 1fr;}
  .step-num{ font-size:32px;}
  .schedule-row{ grid-template-columns: 80px 30px 30px 1fr; }
  .sch-note{ display:none;}
}
@media (max-width: 440px){
  .phone{ width: 100%; max-width: 380px; height: min(780px, calc(100vh - 100px));}
  .tickets{ grid-template-columns: 1fr;}
}