:root {
  --gold: #e7c95f;
  --ink: #05060c;
  --violet: #c9a3ff;
  --cyan: #7fd4ff;
  --line: #3a3f55;
  --dim-text: #99a2c2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: #d8dcef;
  overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* iOS ignores user-scalable=no: this is what actually kills double-tap zoom */
button, #dialogue { touch-action: manipulation; }
button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .orn, #advance { animation: none !important; }
}

.hidden { display: none !important; }

/* ---- render layers ---- */
#gl   { position: fixed; inset: 0; z-index: 0; }
#gl canvas { display: block; }
#flat { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ---- retina strip ---- */
#retina-wrap {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 6; width: min(720px, 86vw); text-align: center; pointer-events: none;
}
#retina-label {
  font-size: 9px; letter-spacing: .22em; color: var(--dim-text); margin-bottom: 5px;
}
#retina {
  width: 100%; height: 30px; display: block;
  border: 1px solid var(--line); border-radius: 6px;
  background: #000; box-shadow: 0 0 24px #000c, inset 0 0 12px #000;
}

/* ---- HUD ---- */
#hud {
  position: fixed; top: max(16px, env(safe-area-inset-top, 0px));
  left: max(18px, env(safe-area-inset-left, 0px)); z-index: 10;
  display: flex; gap: 14px; align-items: center; pointer-events: none;
}
#dim-badge {
  font-weight: 600; font-size: 15px; padding: 6px 11px; border-radius: 5px;
  border: 1px solid; letter-spacing: .08em; background: #0008;
}
.d0 { color: #9aa0b5; border-color: #9aa0b5; }
.d1 { color: #ff9a62; border-color: #ff9a62; }
.d2 { color: var(--gold); border-color: var(--gold); }
.d3 { color: var(--cyan); border-color: var(--cyan); }
.d4 { color: var(--violet); border-color: var(--violet); }
#chapter-title {
  font-family: 'Cormorant Garamond', serif; font-size: 21px;
  letter-spacing: .28em; color: #cfd3ea;
}
#chapter-sub { font-size: 9px; letter-spacing: .18em; color: var(--dim-text); margin-top: 2px; }

/* ---- nav dots / mute ---- */
#nav {
  position: fixed; top: max(16px, env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px)); z-index: 11;
  display: flex; gap: 7px; align-items: center;
}
#nav button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #444a66; background: #0009; color: #aab1d0;
  font-family: inherit; font-size: 10px; cursor: pointer; padding: 0;
}
#nav button:hover { border-color: #8b93b8; color: #cfd3ea; }
#nav button.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px #e7c95f33; }
#nav button#mute { border-radius: 6px; width: 38px; font-size: 14px; }

/* ---- hint ---- */
#hint {
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: max(18px, env(safe-area-inset-left, 0px)); z-index: 10;
  font-size: 12px; line-height: 1.7; color: var(--dim-text);
  letter-spacing: .04em; max-width: 340px; pointer-events: none;
  text-shadow: 0 1px 4px #000;
}
#hint b, #hint i { color: #c6cce8; }

/* ---- right panel (chapter controls) ---- */
#panel {
  position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); top: 64px; z-index: 12;
  display: flex; flex-direction: column; gap: 6px; width: 178px;
  max-height: calc(100dvh - 150px); overflow-y: auto;
}
#panel .chip {
  font-family: inherit; font-size: 11px; letter-spacing: .06em;
  padding: 7px 10px; text-align: left; cursor: pointer;
  border: 1px solid #444a66; border-radius: 6px;
  background: #0a0c18cc; color: #aab1d0;
}
#panel .chip:hover { border-color: #8b93b8; }
#panel .chip.active { border-color: var(--gold); color: var(--gold); }
#panel .chip.major { border-color: #6b5a9c; color: var(--violet); }
#panel .chip.major:hover { border-color: var(--violet); }

/* ---- choices ---- */
#choices {
  position: fixed; left: 50%; bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  /* left:50% halves the layout width before the transform — size to content */
  width: max-content; max-width: 96vw;
  z-index: 15; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
#choices button {
  font-family: 'Cormorant Garamond', serif; font-size: 19px;
  padding: 10px 24px; cursor: pointer; letter-spacing: .04em;
  background: #0e1120ee; color: #e8e6da;
  border: 1px solid var(--gold); border-radius: 8px;
  box-shadow: 0 6px 30px #000c;
}
#choices button:hover { background: var(--gold); color: #14101a; }

/* ---- dialogue ---- */
#dialogue {
  position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20; width: min(780px, 92vw);
  background: linear-gradient(#101322ee, #0a0c18ee);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 20px 8px; cursor: pointer;
  box-shadow: 0 10px 50px #000d;
}
#speaker { font-size: 11px; letter-spacing: .26em; margin-bottom: 6px; color: #a9b0cc; }
#text {
  font-family: 'Cormorant Garamond', serif; font-size: 19px; line-height: 1.45;
  color: #e8e6da; min-height: 56px;
}
#advance { text-align: right; color: #7b84a8; font-size: 12px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---- fader & overlay ---- */
#fader {
  position: fixed; inset: 0; z-index: 40; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .38s ease;
}
#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(120% 100% at 50% 30%, #0c0f1f 0%, #04050a 70%);
  display: flex; align-items: center; justify-content: center;
}
#title-screen { position: relative; text-align: center; padding: 40px; }
#title-screen .orn {
  position: absolute; left: 50%; top: 42%;
  width: 270px; height: 270px; margin: -135px;
  border: 1px solid #e7c95f3d; pointer-events: none;
  animation: spin 36s linear infinite;
}
#title-screen .orn.two {
  width: 190px; height: 190px; margin: -95px;
  border-color: #c9a3ff2e; animation-duration: 24s; animation-direction: reverse;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#title-screen h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(54px, 9vw, 96px); margin: 0;
  letter-spacing: .32em; text-indent: .32em; color: #eee6c8;
  text-shadow: 0 0 40px #e7c95f55;
}
#title-screen h2 {
  font-family: inherit; font-weight: 400; font-size: 14px;
  letter-spacing: .65em; text-indent: .65em; color: var(--gold); margin: 10px 0 4px;
}
#title-screen .tag {
  font-size: 11px; color: var(--dim-text); letter-spacing: .2em; margin-bottom: 42px;
}
#title-screen .quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px;
  color: #b9bedb; line-height: 1.7; margin: 14px 0;
}
#title-screen button {
  font-family: inherit; font-size: 13px; letter-spacing: .14em;
  padding: 13px 30px; margin: 8px; cursor: pointer;
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 8px;
  transition: background .2s, color .2s;
}
#title-screen button:hover { background: var(--gold); color: #14101a; }
#title-screen button.ghostbtn { border-color: #555d80; color: #aab1d0; }
#title-screen button.ghostbtn:hover { background: #555d80; color: #fff; }
#title-screen .fine { font-size: 11px; color: #7b84a8; letter-spacing: .08em; margin-top: 36px; line-height: 1.8; }

/* ---- touch controls ---- */
#touch { position: fixed; inset: 0; z-index: 7; pointer-events: none; transition: opacity .25s; }
#touch.suspended { opacity: .18; }
#touch.suspended * { pointer-events: none !important; }
#joy {
  position: absolute; left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 124px; height: 124px;
  border: 1px solid #444a66; border-radius: 50%;
  background: radial-gradient(circle, #0a0c18dd 40%, #0a0c1888);
  pointer-events: auto; touch-action: none;
}
#joy-thumb {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px;
  border-radius: 50%; background: #2a2f4add; border: 1px solid #8b93b8;
  pointer-events: none;
}
#touch-actions {
  position: absolute; right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 12px; pointer-events: none;
}
#touch-actions button {
  width: 78px; height: 78px; border-radius: 50%;
  pointer-events: auto; touch-action: none;
  border: 1px solid var(--gold); color: var(--gold);
  background: #0a0c18cc; font-family: inherit;
  font-size: 12px; letter-spacing: .1em;
}
#touch-actions button.on { background: var(--gold); color: #14101a; }

/* touch-device layout: retina rides above the controls, hint moves up top */
body.touch #retina-wrap { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); width: min(540px, 78vw); }
/* chapters with the joystick (1D/2D): hint sits top-centre, clear of controls */
body.touch.joy #hint {
  left: 50%; right: auto; bottom: auto; top: calc(54px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%); text-align: center; max-width: 92vw;
}
/* other chapters (3D/4D): bottom-centre subtitles, clear of the button panel */
body.touch:not(.joy) #hint {
  left: 50%; right: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); text-align: center; max-width: 94vw;
}
/* and the choice buttons sit directly above those subtitles */
body.touch:not(.joy) #choices {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
body.touch #dialogue { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ---- small screens: readable type, 44px-class tap targets ---- */
@media (max-width: 768px) {
  #hud { gap: 8px; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }
  #chapter-title { font-size: 15px; letter-spacing: .14em; }
  #chapter-sub { display: none; }
  #dim-badge { font-size: 13px; padding: 6px 9px; }
  #nav { top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); gap: 4px; }
  #nav button { width: 38px; height: 38px; font-size: 10px; }
  #nav button#mute { width: 40px; }
  #panel { width: 170px; top: 60px; right: max(12px, env(safe-area-inset-right, 0px)); gap: 6px; }
  #panel .chip { font-size: 11px; padding: 11px 10px; letter-spacing: .03em; line-height: 1.45; }
  #dialogue { padding: 12px 16px 8px; }
  #text { font-size: 18px; min-height: 52px; }
  #speaker { font-size: 11px; }
  #choices { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  #choices button { font-size: 18px; padding: 12px 20px; }
  #hint { font-size: 13px; color: #b6bdda; }
  #retina-label { font-size: 9px; letter-spacing: .12em; color: #a4adcc; }
  #retina { height: 26px; }
  #title-screen h1 { font-size: clamp(38px, 11vw, 96px); }
  #title-screen h2 { letter-spacing: .4em; text-indent: .4em; }
  #title-screen .quote { font-size: 15px; }
  #title-screen .fine { font-size: 12px; }
  #title-screen button { font-size: 14px; padding: 14px 26px; }
}

/* very narrow phones: the dimension badge carries the chapter identity */
@media (max-width: 480px) {
  #chapter-title { display: none; }
}

/* landscape phones: little vertical room — tuck the retina beside the stick */
@media (max-height: 520px) {
  body.touch #retina-wrap { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(420px, 44vw); }
  body.touch.joy #hint { top: 42px; }
  #joy { width: 104px; height: 104px; }
  #touch-actions button { width: 64px; height: 64px; }
  #panel { max-height: calc(100dvh - 90px); top: 50px; }
}