:root {
  --ink: #eef1f8;
  --muted: #a7b0c8;
  --line: rgba(255, 255, 255, .16);
  --glass: rgba(6, 8, 18, .62);
  --accent: #9fd3ff;
  --gold: #f2c86b;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --top: max(14px, env(safe-area-inset-top));
  --bottom: max(16px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060c; color: var(--ink); font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Canvas phải do CSS quyết định kích thước; Three.js chỉ thay đổi drawing buffer.
   iOS Safari có thể đổi viewport khi thanh địa chỉ xuất hiện/ẩn đi. */
#world {
  position: fixed; inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none; max-height: none;
  display: block; touch-action: none;
}
/* viền tối điện ảnh: giữ mắt ở giữa khung, không che nội dung */
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(2, 3, 10, .55) 100%); }

/* ---------- Thanh trên ---------- */
.bar {
  position: fixed;
  z-index: 5;
  top: var(--top);
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.bar a, .bar button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.bar b { font-weight: 400; }
.bar a:hover, .bar button:hover { border-color: var(--accent); }
.bar-right { display: flex; gap: 8px; }
#musicBtn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(242, 200, 107, .35); }

/* ---------- Thanh tiến trình các trạm ---------- */
.rail {
  position: fixed;
  z-index: 4;
  right: max(18px, env(safe-area-inset-right));
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-50%);
}
.rail::before { content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.rail button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
}
/* chấm nhỏ nhưng vùng bấm 24×24 */
.rail button::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: #05060c;
  transition: transform .3s, background .3s, border-color .3s;
}
.rail button.done::after { background: rgba(159, 211, 255, .45); border-color: var(--accent); }
.rail button.active::after { background: var(--gold); border-color: var(--gold); transform: scale(1.4); box-shadow: 0 0 12px var(--gold); }
.rail button span {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(5, 6, 12, .7);
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.rail button:hover span, .rail button:focus-visible span, .rail button.active span { opacity: 1; }
.rail button.active span { color: var(--gold); }
.station-name { display: none; }

/* ---------- Mở đầu: nút bắt đầu + bỏ qua ---------- */
.intro {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--bottom) + 76px);
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}
.cta {
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid rgba(242, 200, 107, .8);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(60, 40, 12, .85), rgba(20, 12, 4, .85));
  box-shadow: 0 0 0 4px rgba(242, 200, 107, .12), 0 10px 30px rgba(0, 0, 0, .6), 0 0 26px rgba(242, 200, 107, .25);
  color: #fff3cf;
  font-family: 'Noto Serif', serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s;
}
.cta:hover { box-shadow: 0 0 0 4px rgba(242, 200, 107, .25), 0 10px 30px rgba(0, 0, 0, .6), 0 0 36px rgba(242, 200, 107, .45); }
.skip {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  opacity: 0;
  transition: opacity .4s;
}
.intro-cta .cta { opacity: 1; transform: none; pointer-events: auto; }
.intro-run .skip { opacity: 1; pointer-events: auto; }
.intro-cta .skip, body:not(.at-gate) .skip { opacity: 0; pointer-events: none; }

/* ---------- Thanh dưới ---------- */
.controls {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: var(--bottom);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
}
.controls .pill { width: auto; padding: 0 16px; border-radius: 99px; font-size: 13px; white-space: nowrap; }
.controls button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(8px);
  font-size: 18px;
}
.controls button:hover { border-color: var(--gold); }
#hint { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 4px #000; }

/* ---------- Ảnh chiêu thức (chỉ dùng khi trình duyệt không giải mã được ảnh động trong WebGL) ---------- */
#fx { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#fx > * { position: absolute; left: 0; top: 0; will-change: transform; }
.fx-skill { display: block; height: auto; mix-blend-mode: screen; transition: opacity .3s; }

.loading { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; place-content: center; gap: 12px; margin: 0; padding: 24px; background: #05060c; font-family: 'Noto Serif', serif; font-size: 20px; text-align: center; transition: opacity .8s, visibility .8s; }
.loading.done { opacity: 0; visibility: hidden; }
.loading a { font-family: 'Be Vietnam Pro', sans-serif; font-size: 16px; }
.no-webgl .controls, .no-webgl .rail, .no-webgl .intro, .no-webgl #qualityBtn { display: none; }
.stats { position: fixed; z-index: 8; left: 8px; bottom: 8px; margin: 0; padding: 4px 8px; background: rgba(0, 0, 0, .7); color: #9f9; font: 11px/1.4 monospace; pointer-events: none; }

/* ---------- Gợi ý thao tác và trạng thái nút ---------- */
#hint .hint-mobile { display: none; }
.controls button:disabled { opacity: .38; cursor: default; border-color: rgba(255,255,255,.1); }
.controls .pill[hidden] { display: none; }

/* ---------- Mobile UI: giữ vùng trải nghiệm 3D rộng, mọi nút đều dễ chạm ---------- */
@media (max-width: 760px), (max-aspect-ratio: 19/20) {
  .bar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .bar > a {
    width: auto; min-width: 44px; max-width: calc(100vw - 200px);
    padding: 0 12px; gap: 7px; overflow: hidden; flex-shrink: 1; font-size: 14px;
  }
  .bar > a span { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .bar-right { flex-shrink: 0; gap: 6px; }
  .bar-right a, .bar-right button {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 0; justify-content: center; font-size: 18px;
  }
  .bar-right span { display: none; }

  /* Thanh trạm cuộn ngang, có thể chạm vào từng điểm thay vì chỉ vuốt toàn cảnh. */
  .rail {
    top: calc(var(--top) + 56px);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto; width: auto; height: 48px;
    padding: 1px 8px; transform: none;
    flex-direction: row; align-items: center; gap: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    border: 1px solid rgba(242,200,107,.24); border-radius: 99px;
    background: rgba(6,8,18,.75); backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail::before {
    left: 25px; right: 25px; top: 50%; bottom: auto;
    width: auto; height: 1px; transform: translateY(-50%);
    pointer-events: none;
  }
  .rail button {
    position: relative; z-index: 1;
    flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px;
    touch-action: manipulation; pointer-events: auto; scroll-snap-align: center;
  }
  .rail button::after {
    width: 11px; height: 11px; inset: auto;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: #121626;
  }
  .rail button.active::after {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 12px rgba(242,200,107,.85);
  }
  .rail button span { display: none; }

  .station-name {
    display: block; position: fixed; z-index: 4;
    top: calc(var(--top) + 110px);
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    margin: 0; padding: 4px 6px;
    color: #fff1ca; font: 600 12px/1.6 'Be Vietnam Pro', sans-serif;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: .025em; text-shadow: 0 2px 7px #05060c, 0 0 12px #000;
    pointer-events: none;
  }

  /* Điều hướng cố định phía dưới, bảo vệ vùng home indicator trên iPhone. */
  .controls {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--bottom); width: auto; transform: none;
    display: grid; grid-template-columns: 52px minmax(0,1fr) 52px;
    justify-items: center; align-items: center; gap: 8px; padding: 5px 7px;
    border: 1px solid rgba(242,200,107,.2); border-radius: 36px;
    background: rgba(5,7,16,.74); backdrop-filter: blur(12px);
  }
  .controls button { width: 48px; height: 48px; touch-action: manipulation; }
  #prevBtn { grid-column: 1; grid-row: 1; }
  #nextBtn { grid-column: 3; grid-row: 1; }
  #hint {
    grid-column: 2; grid-row: 1; display: block;
    max-width: 100%; margin: 0; font-size: 11px; line-height: 1.45;
    text-align: center; white-space: normal; color: #d0c7b2;
  }
  #hint .hint-desktop { display: none; }
  #hint .hint-mobile { display: inline; }
  .controls.has-video #hint { display: none; }
  .controls .pill {
    grid-column: 2; grid-row: 1; width: auto; max-width: 100%;
    min-width: 0; height: 44px; padding: 0 10px;
    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .intro {
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(var(--bottom) + 91px); transform: none; gap: 4px;
  }
  .cta {
    width: min(100%, 306px); min-height: 54px; padding: 0 16px;
    font-size: 13px; letter-spacing: .09em;
  }
  .skip { min-height: 44px; font-size: 13px; }
}
@media (max-width: 360px) {
  .bar > a { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .bar > a span { display: none; }
  .controls { grid-template-columns: 48px minmax(0,1fr) 48px; gap: 4px; padding: 5px; }
  .controls button { width: 46px; height: 46px; }
  #hint { font-size: 10px; }
}
/* Trên máy ngang thấp, không dùng thanh trạm ngang chiếm chiều cao gameplay. */
@media (orientation: landscape) and (max-height: 500px) {
  .rail {
    top: calc(var(--top) + 56px); bottom: calc(var(--bottom) + 64px);
    left: auto; right: max(12px, env(safe-area-inset-right));
    width: 48px; height: auto; padding: 5px 1px;
    flex-direction: column; overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y proximity; border-radius: 26px;
  }
  .rail::before { top: 25px; bottom: 25px; left: 50%; right: auto; width: 1px; height: auto; transform: translateX(-50%); }
  .station-name {
    top: calc(var(--top) + 54px);
    right: calc(max(12px, env(safe-area-inset-right)) + 60px);
    text-align: left; font-size: 11px;
  }
  .controls {
    right: calc(max(12px, env(safe-area-inset-right)) + 56px);
    grid-template-columns: 44px minmax(0,1fr) 44px;
    padding: 2px 4px; gap: 4px;
  }
  .controls button { width: 42px; height: 42px; }
  .intro {
    left: max(12px, env(safe-area-inset-left)); right: auto;
    width: min(45vw, 260px); bottom: calc(var(--bottom) + 62px);
  }
  .cta { min-height: 44px; font-size: 11px; }
  .skip { min-height: 36px; font-size: 11px; }
}
@media (min-width: 761px) and (min-aspect-ratio: 19/20) and (max-width: 1100px) { #hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cta, .skip, .rail button::after { transition: none; }
  .rail { scroll-behavior: auto; }
}

.class-browser {
 position:fixed;z-index:12;
 width:min(780px,calc(100vw - 26px));max-height:min(82dvh,850px);
 padding:18px;border:1px solid rgba(242,200,107,.45);
 border-radius:18px;color:#eef1f8;
 background:linear-gradient(155deg,#161b32,#070a17);
 box-shadow:0 25px 110px #000c;
}
.class-browser::backdrop {background:rgba(2,3,10,.8);backdrop-filter:blur(6px)}
.class-browser-head{display:flex;justify-content:space-between;align-items:start;gap:10px}
.class-browser-head p{font-size:11px;letter-spacing:.15em;color:#dbbd74;margin:0 0 5px}
.class-browser-head h2{margin:0;font:700 28px 'Noto Serif',serif}
#classBrowserClose{border:1px solid rgba(255,255,255,.16);border-radius:50%;width:44px;height:44px;background:#141929;font-size:20px}
.class-browser-hint{font-size:12px;color:#aab8d0;line-height:1.45;margin:10px 0 15px}
.class-browser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;max-height:calc(82dvh - 165px);overflow-y:auto;overscroll-behavior:contain}
.class-choice{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:157px;padding:8px;
 border:1px solid rgba(255,255,255,.15);border-radius:12px;background:radial-gradient(ellipse at center,#292e4f,#0b1020);
 text-align:center;touch-action:manipulation}
.class-choice:hover,.class-choice:focus-visible{border-color:var(--gold);background:#1e223d}
.class-choice img{width:100%;height:100px;object-fit:contain}
.class-choice strong{font:600 13px 'Be Vietnam Pro',sans-serif;color:#ffedc6}
.class-choice small{font-size:11px;color:#b8b4ca}
@media(max-width:760px),(max-aspect-ratio:19/20){
 .bar>a{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;padding:0;justify-content:center}
 .bar>a span{display:none}
 .class-browser{padding:14px;max-height:88dvh;width:calc(100vw - 18px)}
 .class-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(88dvh - 145px);gap:8px}
 .class-choice{min-height:142px}
 .class-choice img{height:88px}
}
/* Cinematic journey: images and gameplay, without information cards or captions. */
.cinematic .bar > a span, .cinematic .bar button span, .cinematic .bar-right > a span, .cinematic .station-name, .cinematic .rail span,
.cinematic #hint, .cinematic .class-browser-head p, .cinematic .class-browser h2,
.cinematic .class-browser-hint, .cinematic .class-choice strong,
.cinematic .class-choice small { display:none!important; }
.cinematic .bar a,.cinematic .bar button { width:44px;padding:0;justify-content:center; }
.cinematic .controls { background:none;border:0;backdrop-filter:none;gap:16px; }
.cinematic .cta { width:64px;min-height:56px;font-size:26px;padding:0; }
.cinematic .skip { font-size:24px; }
.gameplay-stage[hidden], .media-play[hidden] { display:none!important; }
.gameplay-stage {
 position:fixed; z-index:3; left:5vw; bottom:calc(var(--bottom) + 76px);
 width:43vw; aspect-ratio:16/9; background:#03050b; border-radius:8px;
 overflow:hidden; box-shadow:0 12px 38px rgba(0,0,0,.5);
}
.gameplay-stage video { display:block;width:100%;height:100%;object-fit:contain; }
.media-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:64px;height:64px;border-radius:50%;border:1px solid #afdbff;
 background:rgba(3,5,12,.65);color:white;font-size:26px; }
.finale .gameplay-stage { left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
 width:min(86vw,calc((100dvh - 200px)*16/9)); }
@media(max-width:760px),(max-aspect-ratio:19/20) {
 .cinematic .bar-right {display:flex;}
 .cinematic .controls {grid-template-columns:48px 48px 48px;justify-content:center;}
 .cinematic .controls .pill {width:48px;padding:0;font-size:20px;}
 .gameplay-stage {left:4vw;width:92vw;bottom:calc(var(--bottom) + 82px);}
 .finale .gameplay-stage {width:94vw;}
}
.media-fallback {background:radial-gradient(ellipse at 50% 35%,#25234a,#05060c 75%);}
.media-fallback .controls,.media-fallback .rail,.media-fallback .intro {display:flex;}
.media-fallback .bar button#qualityBtn {display:none;}
.fallback-art {position:fixed;inset:135px 5vw 100px;display:flex;align-items:center;justify-content:center;gap:2vw;}
.fallback-art img {display:block;width:42%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px #0008);}
.media-fallback.has-gameplay .fallback-art {bottom:calc(105px + 52vw);}
.media-fallback.finale .fallback-art {display:none;}
@media(min-width:761px) and (min-aspect-ratio:19/20) {
 .media-fallback.has-gameplay .fallback-art {inset:100px 5vw 90px 52vw;}
}

.gameplay-stage iframe {display:block;width:100%;height:100%;border:0;}
.gameplay-stage iframe[hidden],.gameplay-stage video[hidden]{display:none!important;}
.media-fallback.show-items .fallback-art{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.media-fallback.show-items .fallback-art img{width:100%;height:100%;min-height:0;max-height:130px;}

body:not(.at-gate) .intro {display:none!important;}