:root {
  /* DA "Photographie ancienne": sepia everywhere, cyan only for memory imprints */
  --ink: #1e1612;
  --night: #3a2a22;
  --plum: #5a4232;
  --lilac: #a07a56;
  --paper: #f3e6c8;
  --gold: #dfc49a;
  --mem: #6fd0e0;
  --u: 3px;
  --font: "VT323", "Noto Kufi Arabic", monospace;
  --font-title: "Press Start 2P", "Noto Kufi Arabic", monospace;
}
html[lang="ar"] { --font: "Noto Kufi Arabic", "VT323", sans-serif; --font-title: "Noto Kufi Arabic", "Press Start 2P", sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120d0a; color: var(--paper); overflow: hidden; }
body { font-family: var(--font); font-variant-ligatures: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; }

#stage { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#screen, #screen3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }

/* ---------- Text sizes scale with the pixel scale ---------- */
#ui { font-size: max(15px, calc(var(--u) * 7.5)); line-height: 1.15; }
html[lang="ar"] #ui { font-size: max(13px, calc(var(--u) * 5.2)); line-height: 1.5; }

/* ---------- Dialogue ---------- */
#dialog {
  position: absolute; left: 3%; right: 3%; bottom: 4%;
  min-height: 30%; padding: 0.55em 0.8em 0.9em;
  background: rgba(30, 22, 18, 0.95);
  border: calc(var(--u) * 1) solid var(--lilac);
  box-shadow: 0 0 0 calc(var(--u) * 1) var(--ink), inset 0 0 0 calc(var(--u) * 1) var(--ink);
}
#dialog.thought { background: rgba(24, 17, 13, 0.92); border-color: var(--plum); }
#dialog.thought #dialog-text { font-style: italic; color: var(--gold); }
#dialog.memory { background: rgba(6, 18, 26, 0.94); border-color: var(--mem); border-style: dashed; }
#dialog.memory #dialog-text { color: var(--mem); letter-spacing: 0.04em; }
#dialog.memory #dialog-next { color: var(--mem); }
#dialog-portrait {
  position: absolute; inset-inline-start: 0.5em; bottom: 0.5em; width: calc(var(--u) * 50); height: calc(var(--u) * 50);
  image-rendering: pixelated; border: calc(var(--u) * 1) solid var(--plum); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 rgba(0,0,0,0.6);
}
#dialog.has-portrait { padding-inline-start: calc(var(--u) * 50 + 1.3em); min-height: calc(var(--u) * 50 + 1em); }
#dialog-name { color: var(--gold); margin-bottom: 0.15em; min-height: 0.2em; }
#dialog-name:empty { display: none; }
#dialog-text { white-space: pre-wrap; }
#dialog-next { position: absolute; bottom: 0.15em; inset-inline-end: 0.6em; color: var(--lilac); animation: bob 0.8s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(0.15em); } }
#dialog-choices { display: flex; flex-direction: column; gap: 0.15em; margin-top: 0.35em; }
#dialog-choices:empty { display: none; }
.choice { text-align: start; background: none; border: none; padding: 0.05em 0.4em; cursor: pointer; color: var(--paper); }
.choice::before { content: "  "; white-space: pre; }
.choice.sel { color: var(--gold); }
.choice.sel::before { content: "▶ "; }
html[dir="rtl"] .choice.sel::before { content: "◀ "; }

/* ---------- Zone name card ---------- */
#zonecard {
  position: absolute; top: 14%; left: 0; right: 0; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--font-title); font-size: 0.9em; color: var(--paper); letter-spacing: 0.12em;
  text-shadow: 0 0 0.5em rgba(30,22,18,0.9), calc(var(--u)*1) calc(var(--u)*1) 0 var(--ink);
}
html[lang="ar"] #zonecard { font-size: 1.3em; letter-spacing: 0; }
#zonecard.show { animation: zone 3.2s ease forwards; }
@keyframes zone { 0% { opacity: 0; transform: translateY(-0.3em); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Objective + toasts ---------- */
#objective {
  position: absolute; top: 2.5%; inset-inline-start: 2%; max-width: 62%;
  padding: 0.2em 0.5em; background: rgba(30, 22, 18, 0.8); border-inline-start: calc(var(--u) * 1) solid var(--gold);
  font-size: 0.8em; pointer-events: none;
}
#toasts { position: absolute; top: 2.5%; inset-inline-end: 2%; display: flex; flex-direction: column; gap: 0.3em; align-items: flex-end; pointer-events: none; }
html[dir="rtl"] #toasts { align-items: flex-start; }
.toast { background: rgba(30, 22, 18, 0.92); border: calc(var(--u) * 0.6) solid var(--gold); padding: 0.15em 0.5em; font-size: 0.8em; animation: toast 3.2s forwards; }
.toast.reveal { border-color: var(--paper); color: var(--paper); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-0.4em); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Full panels (title / journal / menu) ---------- */
.panel-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
#title { align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(30,22,18,0.3), rgba(18,13,10,0.9)); gap: 0.6em; text-align: center; }
#title h1 { font-family: "Press Start 2P", monospace; font-weight: normal; font-size: 2.6em; margin: 0; letter-spacing: 0.08em; color: var(--paper); text-shadow: calc(var(--u)*1) calc(var(--u)*1) 0 var(--plum), calc(var(--u)*-1) 0 0 rgba(111,208,224,0.45); }
#title .sub { color: var(--lilac); max-width: 80%; }
#title .proto { font-size: 0.75em; color: var(--gold); }
.btns { display: flex; flex-direction: column; gap: 0.25em; align-items: stretch; min-width: 40%; margin-top: 0.4em; }
.btn {
  background: rgba(30, 22, 18, 0.85); border: calc(var(--u) * 0.7) solid var(--lilac); padding: 0.2em 0.8em; cursor: pointer;
}
.btn.sel, .btn:hover { border-color: var(--gold); color: var(--gold); }
.langs { display: flex; gap: 0.4em; justify-content: center; }
.langs .btn { min-width: 3.2em; }
.langs .btn.on { background: var(--plum); }
.hint { font-size: 0.65em; color: var(--lilac); max-width: 90%; }

#menu, #journal { background: rgba(18, 13, 10, 0.88); align-items: center; justify-content: center; }
#menu h2, #journal h2 { font-family: var(--font-title); font-weight: normal; font-size: 1em; margin: 0 0 0.5em; color: var(--gold); }
#menu .note { min-height: 1.2em; color: var(--gold); font-size: 0.8em; margin-top: 0.3em; }

#journal { justify-content: flex-start; padding: 3% 4%; }
.jbox { width: 100%; height: 100%; display: flex; flex-direction: column; background: rgba(30,22,18,0.96); border: calc(var(--u) * 1) solid var(--lilac); padding: 0.5em 0.8em; }
.jhead { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.jhead h2 { margin: 0 !important; flex: 1; }
.tabs { display: flex; gap: 0.3em; }
.tab { background: none; border: none; border-bottom: calc(var(--u) * 0.7) solid transparent; cursor: pointer; padding: 0 0.3em; color: var(--lilac); }
.tab.on { color: var(--paper); border-bottom-color: var(--gold); }
.jbody { flex: 1; overflow-y: auto; margin-top: 0.4em; padding-inline-end: 0.3em; font-size: 0.85em; touch-action: pan-y; }
.jbody h3 { font-family: var(--font); font-weight: normal; color: var(--gold); margin: 0.5em 0 0.15em; font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; }
html[lang="ar"] .jbody h3 { text-transform: none; }
.jbody ul { list-style: none; padding: 0; margin: 0; }
.jbody li { padding: 0.15em 0; border-bottom: 1px dashed rgba(160,122,86,0.35); }
.tag { display: inline-block; font-size: 0.75em; padding: 0 0.35em; margin-inline-end: 0.4em; border: 1px solid var(--lilac); color: var(--lilac); }
.tag.doc { border-color: var(--gold); color: var(--gold); }
.tag.tes { border-color: #c49d72; color: #c49d72; }
.tag.obs { border-color: var(--paper); color: var(--paper); }
.step.done { color: var(--lilac); text-decoration: line-through; }
li.refuted { text-decoration: line-through; }
li.refuted .tag, li .tag.refuted { text-decoration: none; display: inline-block; margin-inline-start: 0.4em; }
.step::before { content: "○ "; }
.step.done::before { content: "● "; }
.rev { color: var(--paper); font-weight: bold; }
.muted { color: var(--lilac); }

#caption {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 10%; background: rgba(0,0,0,0.0); font-size: 1.1em; color: var(--paper); pointer-events: none;
  text-shadow: 0 0 0.4em rgba(111,208,224,0.5);
}

/* ---------- Notebook button ---------- */
#notebook-btn {
  position: absolute; top: 2.5%; inset-inline-end: 2%; z-index: 2;
  display: flex; align-items: center; gap: 0.35em; padding: 0.15em 0.5em; cursor: pointer;
  background: #e8d5ac; color: #3a2a22; border: calc(var(--u) * 0.7) solid #5a4232; font-size: 0.8em;
  box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 rgba(30,22,18,0.6);
}
#notebook-btn:hover { background: #f3e6c8; }
#notebook-btn .icon { width: 0.8em; height: 1em; background: #7c5c42; border-inline-start: 0.15em solid #3a2a22;
  box-shadow: inset 0 0.25em 0 #e8d5ac, inset 0 0.45em 0 #7c5c42, inset 0 0.65em 0 #e8d5ac; }
#notebook-btn .key { font-size: 0.8em; opacity: 0.6; border: 1px solid currentColor; padding: 0 0.25em; }
#notebook-btn .badge { background: #3a2a22; color: #f3e6c8; border-radius: 1em; padding: 0 0.4em; font-size: 0.85em; animation: bob 1s steps(2) infinite; }
#toasts { top: calc(2.5% + 2.4em); }

/* ---------- Notebook (papyrus pages, ink text) ---------- */
.jbox.notebook {
  background-color: #e8d5ac; color: #3a2a22; border-color: #5a4232;
  background-image: repeating-linear-gradient(0deg, rgba(90,66,50,0.07) 0 1px, transparent 1px 0.33em),
                    repeating-linear-gradient(90deg, rgba(90,66,50,0.05) 0 1px, transparent 1px 0.9em);
  box-shadow: inset 0 0 1.5em rgba(90,66,50,0.35);
}
.notebook .jhead h2 { color: #3a2a22 !important; font-size: 0.8em; }
.notebook .tab { color: #7c5c42; }
.notebook .tab.on { color: #1e1612; border-bottom-color: #3a2a22; }
.notebook .tab .dot { color: #a0522d; margin-inline-start: 0.15em; }
.notebook .btn { background: #3a2a22; color: #f3e6c8; border-color: #3a2a22; }
.notebook .jbody h3 { color: #5a4232; border-bottom: 1px solid rgba(90,66,50,0.35); }
.notebook .jbody li { border-bottom-color: rgba(90,66,50,0.25); }
.notebook .muted { color: #7c5c42; }
.notebook .rev { color: #1e1612; }
.notebook .tag, .notebook .tag.doc, .notebook .tag.tes, .notebook .tag.obs { border-color: #7c5c42; color: #5a4232; }
.notebook .tag.tes { border-style: dashed; }
.notebook .new { display: inline-block; background: #7c5c42; color: #f3e6c8; font-size: 0.7em; padding: 0 0.35em; margin-inline-end: 0.4em; text-transform: uppercase; }
.notebook .where { color: #7c5c42; font-size: 0.85em; font-style: italic; }
.notebook .now { font-size: 1.05em; color: #1e1612; margin: 0.2em 0 0.6em; }
.notebook .quest { margin-bottom: 0.5em; padding: 0.1em 0.5em 0.3em; border-inline-start: calc(var(--u) * 0.8) solid #7c5c42; }
.notebook .quest.done { opacity: 0.6; border-inline-start-color: #a07a56; }
.notebook .quest h3 { border-bottom: none; margin-top: 0.2em; }
.notebook .status { font-size: 0.75em; margin-inline-start: 0.6em; padding: 0 0.35em; border: 1px solid #7c5c42; text-transform: none; }
.notebook .giver { font-style: italic; color: #5a4232; font-size: 0.9em; }
.notebook .step.done { color: #a07a56; }

/* ---------- Mini-games ---------- */
#minigame { background: rgba(18, 13, 10, 0.94); align-items: center; justify-content: center; gap: 0.4em; padding: 2%; z-index: 4; }
#minigame h2 { font-family: var(--font-title); font-weight: normal; font-size: 0.9em; color: var(--gold); margin: 0; }
#minigame .help { color: var(--lilac); font-size: 0.8em; margin: 0; max-width: 85%; text-align: center; }
#minigame canvas { height: min(56%, calc(var(--u) * 100)); width: auto; max-width: 92%; image-rendering: pixelated; border: calc(var(--u) * 1) solid var(--plum); touch-action: none; cursor: crosshair; }
#minigame .status { min-height: 1.2em; color: var(--paper); font-size: 0.85em; text-align: center; max-width: 90%; }

/* ---------- Notebook: deductions and "Moi" ---------- */
.notebook .ded { margin: 0.4em 0 0.8em; padding: 0.3em 0.5em; border: 1px dashed rgba(90,66,50,0.5); }
.notebook .ded.solved { border-style: solid; opacity: 0.8; }
.notebook .ded .sentence { line-height: 1.9; }
.notebook .slot { font: inherit; background: #f3e6c8; color: #1e1612; border: none; border-bottom: 2px solid #5a4232; padding: 0 0.3em; margin: 0 0.1em; cursor: pointer; min-width: 3em; }
.notebook .slot.sel, .notebook .ded .btn.sel { outline: 2px solid #a0522d; }
.notebook .slot.empty { color: #a07a56; }
.notebook .ded .btn { margin-top: 0.3em; font-size: 0.9em; }
.notebook .ded .msg { color: #7c5c42; font-style: italic; margin-inline-start: 0.6em; }
.notebook .moi li { display: flex; align-items: center; gap: 0.5em; }
.notebook .moi li.no span.txt { text-decoration: line-through; color: #a07a56; }
.notebook .moi button { font: inherit; font-size: 0.75em; background: none; border: 1px solid #7c5c42; color: #5a4232; cursor: pointer; padding: 0 0.4em; }
.notebook .tag.mem { border-color: #3aa0b8; color: #1f6f86; }

/* ---------- Touch controls ---------- */
#touch { position: fixed; inset: auto 0 0 0; height: 0; pointer-events: none; z-index: 5; }
#touch button {
  pointer-events: auto; position: absolute; width: 56px; height: 56px; border-radius: 10px;
  background: rgba(58, 42, 34, 0.55); border: 2px solid rgba(160, 122, 86, 0.75); color: var(--paper); font-size: 20px; touch-action: none;
}
#touch button.on { background: rgba(160, 122, 86, 0.75); }
#dpad { position: absolute; left: 14px; bottom: 14px; width: 168px; height: 168px; }
#dpad [data-dir="up"] { left: 56px; top: 0; }
#dpad [data-dir="left"] { left: 0; top: 56px; }
#dpad [data-dir="right"] { left: 112px; top: 56px; }
#dpad [data-dir="down"] { left: 56px; top: 112px; }
#tbuttons { position: absolute; right: 14px; bottom: 14px; width: 150px; height: 150px; }
#t-act { right: 0; bottom: 30px; width: 70px !important; height: 70px !important; border-radius: 50% !important; font-size: 24px !important; }
#t-journal { right: 84px; bottom: 0; border-radius: 50% !important; }
#t-menu { right: 84px; bottom: 76px; border-radius: 50% !important; }
/* joystick or cross */
#touch.stick #dpad { display: none; }
#touch.dpad #stickzone, #touch.dpad #stick { display: none; }
#stickzone { position: fixed; left: 0; top: 18%; width: 50%; bottom: 0; pointer-events: none; touch-action: none; }
#touch.playing #stickzone { pointer-events: auto; }
#stick { position: fixed; left: 90px; top: calc(100% - 100px); width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  border: 2px solid rgba(160, 122, 86, 0.45); background: rgba(58, 42, 34, 0.25); pointer-events: none; opacity: 0.55; transition: opacity 0.2s; }
#stick.on { opacity: 1; transition: none; }
#stick span { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(160, 122, 86, 0.7); border: 2px solid rgba(243, 230, 200, 0.6); }
#touch:not(.playing) #stick { opacity: 0; }

/* writing one's own name (end of Act III) */
#dialog .ask { display: flex; gap: 0.5em; align-items: center; margin-top: 0.4em; }
#dialog .ask-input { flex: 1; min-width: 0; font: inherit; font-size: 1em; padding: 0.25em 0.5em; background: var(--paper); color: #2a1d14;
  border: calc(var(--u) * 1) solid var(--plum); outline: none; }
#dialog .ask-ok { font-size: 0.9em; }

/* the pieces of the file, laid in front of Adrastos (Act IV) */
#minigame .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em; width: 94%; max-height: 55%; overflow-y: auto; padding: 0.2em; box-sizing: border-box; }
#minigame .card { flex: 0 1 calc(24% - 0.4em); min-width: 0; box-sizing: border-box; font: inherit; font-size: 0.75em; line-height: 1.25; padding: 0.55em 0.5em; min-height: 3.2em; cursor: pointer;
  background: var(--paper); color: #2a1d14; border: calc(var(--u) * 1) solid var(--plum); text-align: center; }
#minigame .card.mem { background: #cfe7ec; color: #123a46; border-color: #3aa0b8; }
#minigame .card.on { outline: calc(var(--u) * 2) solid var(--gold); transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,0.4); }
#minigame .card.cur, #minigame .present.cur { outline-offset: 2px; outline: calc(var(--u) * 1) dashed var(--gold); }
#minigame .card.on.cur { outline-style: solid; }

/* no phone buttons over a cinematic */
#touch { transition: opacity 0.35s; }
#touch.cine { opacity: 0; }
#touch.cine, #touch.cine * { pointer-events: none !important; }
#objective, #notebook-btn { transition: opacity 0.35s; }
#stage.cine #objective, #stage.cine #notebook-btn { opacity: 0; pointer-events: none; }