@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/alexandria-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/alexandria-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/alexandria-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../assets/fonts/readex-pro-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../assets/fonts/readex-pro-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:160 700;font-display:swap;src:url(../assets/fonts/readex-pro-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* أحمر لعبة — game skin in the film site's language ("le carnet rouge"):
   ink panels, bone type, the film's red; Barlow Condensed labels, Instrument Serif voice,
   Readex Pro body, Alexandria for Arabic. Layout uses logical properties so Arabic mirrors. */
:root{
  --ink:#131010;--ink-2:#1B1715;--bone:#F6F2EA;--bone-2:#ECE6DB;--muted:#D5CCC0;--dim:#A99F93;
  --red:#AC292A;--red-deep:#8A1F20;--red-light:#EE6A5F;--gold:#E7C28A;
  --panel:rgba(19,16,16,.72);--panel-strong:rgba(19,16,16,.9);--line:rgba(246,242,234,.18);
  --font-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-serif:"Instrument Serif","Times New Roman",serif;
  --font-body:"Readex Pro",system-ui,"Segoe UI",sans-serif;
  --font-ar:"Alexandria","Readex Pro",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,2.6vw,36px);
  --shadow:0 1px 3px rgba(10,8,8,.55),0 0 14px rgba(10,8,8,.35);
  font-family:var(--font-body);color:var(--bone);color-scheme:dark;
}
*{box-sizing:border-box}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--ink);-webkit-font-smoothing:antialiased;font-weight:300}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--red);color:var(--bone)}
[hidden]{display:none!important}
kbd{unicode-bidi:isolate;font:600 11px/1 var(--font-cond);letter-spacing:.08em;border:1px solid rgba(246,242,234,.35);border-radius:5px;padding:5px 7px;color:var(--bone);background:rgba(246,242,234,.06);white-space:nowrap}
svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}
em{font-style:normal}

canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#scene:focus-visible{outline:2px solid rgba(231,194,138,.6);outline-offset:-3px}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 42%,transparent 34%,rgba(19,16,16,.28) 100%)}

/* Buttons, in the site's pill style */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:52px;padding:0 1.6rem;border-radius:999px;border:1px solid var(--red);background:var(--red);color:var(--bone);
  font:600 15px/1 var(--font-cond);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px)}
.btn .arr{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;border-color:rgba(246,242,234,.5)}
.btn.ghost:hover{background:rgba(246,242,234,.08)}
.btn:disabled{opacity:.45;cursor:wait;transform:none}
.secondary{display:block;width:100%;min-height:44px;background:transparent;color:var(--bone);border:1px solid var(--line);border-radius:999px;padding:10px 16px;
  font:600 13px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,border-color .25s}
.secondary:hover{background:rgba(246,242,234,.07);border-color:rgba(246,242,234,.4)}
.chip{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(246,242,234,.4);background:transparent;font:600 13px/1 var(--font-cond);letter-spacing:.1em}
.chip:hover{background:rgba(246,242,234,.08)}

/* Loading: the site's red curtain continues into the game */
#loading{position:absolute;inset:0;z-index:30;background:var(--red);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .7s,visibility .7s;color:#FFF8F0}
.ld-ears{width:34px;height:47px;fill:#FFF8F0;stroke:none;animation:ears 1.6s var(--ease) infinite;transform-origin:50% 100%}
.ld-mark{margin:0;font:300 clamp(46px,8vw,86px)/1.1 var(--font-ar)}
.ld-mark b{font-weight:800}
.ld-bar{width:min(240px,60vw);height:2px;background:rgba(255,248,240,.28);overflow:hidden;border-radius:2px}
.ld-bar i{display:block;height:100%;background:#FFF8F0;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
[dir=rtl] .ld-bar i{transform-origin:right center}
.ld-text{margin:0;font:600 13px/1.4 var(--font-cond);letter-spacing:.2em;text-transform:uppercase;opacity:.9}
@keyframes ears{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}

#error{position:absolute;inset:0;z-index:35;background:var(--ink);padding:15vh 10vw;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#error h1{font:400 clamp(36px,5vw,64px)/1.05 var(--font-serif);margin:0}
#error p{max-width:620px;line-height:1.7;color:var(--muted)}
#error .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}
#hud:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(19,16,16,.34),transparent 22%,transparent 78%,rgba(19,16,16,.4))}
header{position:absolute;top:22px;inset-inline:var(--gut);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wordmark{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;row-gap:3px;padding:7px 14px 8px 8px;background:var(--panel);border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[dir=rtl] .wordmark{padding:7px 8px 8px 14px}
.brand-icon{grid-row:1/3;width:32px;height:43px;display:block;object-fit:contain}
.wm-title{font:300 30px/1 var(--font-ar);color:#FFF8F0;white-space:nowrap}
.wm-title b{font-weight:800}
.wm-credit{font:600 10.5px/1.2 var(--font-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
nav{display:flex;gap:8px;pointer-events:auto}
nav button{position:relative;width:44px;height:44px;padding:11px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--bone);transition:background .2s,border-color .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
nav button:hover{background:var(--panel-strong);border-color:rgba(246,242,234,.4)}
#sound[aria-pressed=false]{opacity:.7}
#sound[aria-pressed=false]:after{content:'';position:absolute;left:50%;top:50%;width:24px;border-top:2px solid var(--bone);transform:translate(-50%,-50%) rotate(-40deg)}
.compass{position:absolute;left:50%;top:34px;transform:translateX(-50%);direction:ltr;display:flex;align-items:center;gap:22px;font:600 12px/1 var(--font-cond);letter-spacing:.12em;text-shadow:var(--shadow);opacity:.85}
.compass i{height:6px;border-left:1px solid rgba(246,242,234,.5)}
.compass b{position:absolute;left:50%;top:20px;width:5px;height:5px;background:var(--red-light);transform:translateX(-50%) rotate(45deg)}
#bearing{min-width:2.2em;text-align:center}
[lang=ar] .compass{font:500 13px/1 var(--font-ar);letter-spacing:0}

#journey{position:absolute;top:104px;inset-inline-start:var(--gut);max-width:min(440px,calc(100% - 2*var(--gut)));padding:14px 20px 14px 16px;background:var(--panel);border-inline-start:2px solid var(--red-light);border-radius:0 12px 12px 0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[dir=rtl] #journey{border-radius:12px 0 0 12px}
#quest{margin:0 0 5px;font:400 24px/1.1 var(--font-serif);color:#FFF8F0}
#quest-detail{display:block;font-size:13px;line-height:1.55;color:var(--bone-2)}
#trail-status{display:block;margin-top:8px;font:600 11px/1.4 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-variant-numeric:tabular-nums}
#friend-guide{position:absolute;top:104px;inset-inline-end:var(--gut);display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--panel);border-radius:999px;font:600 12px/1 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#friend-guide svg{width:20px;height:20px;flex:none;color:var(--red-light)}
#landmark-label{position:absolute;transform:translate(-50%,-100%);text-align:center;text-shadow:var(--shadow);font:600 12px/1.2 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:#FFF8F0;white-space:nowrap}
#landmark-label svg{display:block;margin:6px auto 0;width:18px;height:30px;color:var(--red-light);stroke-width:1.8}
#prompt{position:absolute;bottom:108px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:var(--panel-strong);border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 10px;font-size:14px;white-space:nowrap}
[dir=rtl] #prompt{padding:9px 10px 9px 18px}
#prompt kbd{background:var(--bone);color:var(--ink);border-color:var(--bone);border-radius:999px;padding:6px 10px}
#animal-status{position:absolute;inset-inline-start:var(--gut);bottom:104px;min-width:170px;padding:9px 16px 10px 12px;border-inline-start:2px solid rgba(246,242,234,.5);background:linear-gradient(90deg,rgba(19,16,16,.66),rgba(19,16,16,0));text-shadow:0 1px 3px rgba(10,8,8,.6)}
[dir=rtl] #animal-status{background:linear-gradient(270deg,rgba(19,16,16,.66),rgba(19,16,16,0))}
#animal-state{font:400 19px/1.1 var(--font-serif)}
#action-hint{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--muted)}
#effort{height:3px;background:rgba(246,242,234,.2);margin-top:9px;max-width:150px;overflow:hidden;border-radius:2px}
#effort-fill{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left center;transition:transform .16s linear}
[dir=rtl] #effort-fill{transform-origin:right center}
#discovery{position:absolute;inset-inline-end:var(--gut);bottom:104px;max-width:360px;padding:24px 26px;background:var(--panel-strong);border-radius:16px;border-top:3px solid var(--red);pointer-events:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
#discovery-count{font:600 11px/1 var(--font-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--red-light)}
#discovery h2{font:400 32px/1.05 var(--font-serif);margin:10px 0 10px}
#discovery p{font-size:13px;line-height:1.7;color:var(--bone-2);margin:0}
#discovery-open{display:inline-flex;align-items:center;min-height:42px;margin-top:16px;padding:0 18px;border:1px solid rgba(246,242,234,.45);border-radius:999px;background:transparent;font:600 13px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase}
#discovery-open:hover{background:rgba(246,242,234,.08)}
footer{position:absolute;bottom:26px;inset-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;gap:16px;text-shadow:var(--shadow)}
.location{display:flex;align-items:center;gap:12px}
.location-dot{width:7px;height:7px;flex:none;transform:rotate(45deg);background:var(--red-light)}
#place{font:400 22px/1.05 var(--font-serif);color:#FFF8F0}
#place small{display:block;margin-top:5px;font:600 10.5px/1.2 var(--font-cond);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.keys{display:flex;gap:20px;align-items:center;font-size:12px;color:var(--bone-2)}
.keys>span{display:flex;gap:7px;align-items:center}
.keys svg{width:15px;height:20px}
#progress{display:flex;align-items:baseline;gap:6px;font:600 12px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#found{color:#FFF8F0;font:400 30px/1 var(--font-serif);letter-spacing:0}
#toast{position:absolute;left:50%;top:21%;transform:translateX(-50%);z-index:8;max-width:min(620px,86%);padding:12px 24px;background:var(--panel-strong);border-radius:999px;border:1px solid var(--line);font:400 20px/1.3 var(--font-serif);text-align:center}
#touch-controls{display:none}

/* Intro */
#intro{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,16,16,.62) 0%,rgba(19,16,16,.34) 42%,transparent 72%);transition:opacity .85s,visibility .85s}
[dir=rtl] #intro{background:linear-gradient(270deg,rgba(19,16,16,.62) 0%,rgba(19,16,16,.34) 42%,transparent 72%)}
.intro-copy{position:absolute;inset-inline-start:7vw;top:50%;transform:translateY(-46%);max-width:560px}
.intro-kick{display:flex;align-items:center;gap:10px;margin:0 0 22px;font:600 12.5px/1.2 var(--font-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2)}
.intro-kick img{width:18px;height:24px;object-fit:contain}
.intro-kick strong{font-weight:600;color:#FFF8F0}
h1{margin:0 0 22px;font:600 clamp(52px,7.4vw,112px)/.9 var(--font-cond);text-transform:uppercase;letter-spacing:-.005em;text-shadow:0 4px 30px rgba(10,8,8,.35)}
h1 em,h2 em{display:inline-block;font-family:var(--font-serif);font-weight:400;font-style:italic;text-transform:none;letter-spacing:-.01em;color:var(--gold)}
.intro-lead{margin:0 0 30px;font-size:16px;line-height:1.75;color:var(--bone);text-shadow:var(--shadow)}
#begin{min-width:260px}
#intro-note{display:block;margin-top:14px;font-size:12px;line-height:1.6;color:var(--bone-2);text-shadow:var(--shadow);max-width:360px}
.intro-bottom{position:absolute;bottom:30px;inset-inline:7vw 4vw;display:flex;justify-content:space-between;align-items:center;gap:20px;font:600 11.5px/1.3 var(--font-cond);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2);text-shadow:var(--shadow)}
.back-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;pointer-events:auto;padding:8px 0}
.back-link:hover{color:#FFF8F0}
[dir=rtl] .arr-back{display:inline-block;transform:scaleX(-1)}
body:not(.playing) #journey,body:not(.playing) footer,body:not(.playing) nav,body:not(.playing) .compass,body:not(.playing) #animal-status{opacity:0}
body:not(.playing) header{top:30px;inset-inline-start:7vw}
body:not(.playing) .wordmark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding-inline:0}
.playing #intro{opacity:0;visibility:hidden;pointer-events:none}

/* Menu & journal */
#menu,#journal{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;overflow:auto;background:rgba(19,16,16,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:5vh 0;scrollbar-color:#6E655C var(--ink);scrollbar-width:thin}
#journal{z-index:23;background:rgba(19,16,16,.96)}
#menu>div{width:min(460px,90%);margin:auto;padding:24px 18px}
#journal>div{width:min(560px,90%);margin:auto;padding:34px 24px}
#menu h2,#journal h2{margin:0 0 14px;font:600 54px/.92 var(--font-cond);text-transform:uppercase}
.menu-lead{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px}
#resume{display:flex;justify-content:center;width:100%;margin:6px 0 10px}
#close-journal{justify-content:center;min-width:220px}
.control-list{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.control-list p{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--bone-2)}
.control-list kbd{font-size:10.5px;padding:5px 6px}
.preferences{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:14px}
.preferences label{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:13px;line-height:1.5}
.preferences select{font:13px var(--font-body);color:var(--bone);border:1px solid var(--line);border-radius:999px;background:var(--ink-2);padding:8px 12px;max-width:190px}
.preferences input[type=checkbox]{width:18px;height:18px;accent-color:var(--red-light)}
.preferences input[type=range]{width:150px;accent-color:var(--red-light)}
#return-clearing{margin-top:22px}
.menu-actions{display:flex;gap:10px;margin-top:10px}
.menu-actions button{width:50%}
.menu-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.credit{margin:0 0 10px;font:400 18px/1.35 var(--font-serif);color:var(--bone)}
.credit em{font-style:italic}
.links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px}
.links a{font:600 13px/1.2 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--red-light);text-underline-offset:4px}
.links a:hover{color:#FFF8F0}
.note{margin:0;font-size:11px;line-height:1.6;color:var(--dim)}
#journal-count{margin:0;font:600 12px/1.3 var(--font-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--red-light)}
#journal-adventure{font-size:14px;line-height:1.75;color:var(--bone-2);padding:12px 0 14px;border-bottom:1px solid var(--line);margin:8px 0 0}
#journal-list{list-style:none;padding:0;margin:8px 0 24px}
#journal-list li{padding:24px 0;border-bottom:1px solid var(--line)}
#journal-list h3{margin:0 0 4px;font:400 30px/1.1 var(--font-serif)}
#journal-list .unfound h3{font-size:22px;color:var(--dim)}
#journal-list p{margin:0;font-size:14px;line-height:1.75;color:var(--bone-2)}
#journal-list .story-alt{margin:2px 0 12px;font:400 22px/1.4 var(--font-ar);color:var(--gold)}
#journal-list .story-alt[lang=en]{font:italic 400 20px/1.3 var(--font-serif)}
#journal-list .story-alt{text-align:left}
html[dir=rtl] #journal-list .story-alt{text-align:right}
#journal-list .story-note{margin-top:10px;font-size:12px;line-height:1.6;color:var(--dim)}
.story-source{display:inline-block;margin-top:12px;font:600 12px/1.5 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--red-light);text-underline-offset:3px}
.journal-note{font-size:12px;line-height:1.6;color:var(--dim)}
#close-journal{margin-top:10px}
.interview-player{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.interview-player button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--bone);background:var(--bone);color:var(--ink);font:600 13px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase}
.interview-player button:hover{background:#FFF8F0}
.interview-player .voice-unmute{background:transparent;color:var(--bone);border-color:rgba(246,242,234,.45)}
.interview-player small{flex-basis:100%;font-size:11.5px;line-height:1.6;color:var(--muted)}

/* Photo mode */
#photo-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 18px;background:var(--panel-strong);border-radius:999px;font-size:12px;white-space:nowrap}
[dir=rtl] #photo-hint{padding:8px 18px 8px 8px}
#save-photo,#exit-photo{min-height:36px;padding:0 14px;border-radius:999px;font:600 12px/1 var(--font-cond);letter-spacing:.12em;text-transform:uppercase}
#save-photo{margin-inline-start:10px;background:var(--red);color:var(--bone);border:1px solid var(--red)}
#exit-photo{background:transparent;color:var(--bone);border:1px solid rgba(246,242,234,.45)}
.photo #hud{opacity:0;pointer-events:none}
.photo #hud button{pointer-events:none}

/* Cinema: widescreen bars for the intro, photo mode and directed moments */
#bars{position:absolute;inset:0;pointer-events:none;--bar:clamp(5vh,calc((100vh - 100vw / 2.35) / 2),12vh);--bar:clamp(5svh,calc((100svh - 100vw / 2.35) / 2),12svh)}
#bars i{position:absolute;left:0;right:0;height:var(--bar);background:#0b0909;transition:transform 1.15s var(--ease)}
#bars .bar-top{top:0;transform:translateY(-101%)}
#bars .bar-bottom{bottom:0;transform:translateY(101%);display:grid;place-items:center}
#bars.on i{transform:none}
#cine-caption{font:600 12.5px/1.2 var(--font-cond);letter-spacing:.34em;text-transform:uppercase;color:var(--bone);opacity:0;transform:translateY(4px);transition:opacity .9s .15s,transform 1.2s var(--ease) .15s;padding:0 16px;text-align:center}
#cine-caption.show{opacity:.9;transform:none}
[dir=rtl] #cine-caption{font:500 14px/1.4 var(--font-ar);letter-spacing:0;text-transform:none}
#hud>*{transition:opacity .6s}
body.cine #hud>*:not(#discovery):not(#touch-controls){opacity:0;pointer-events:none}
body.cine #touch-controls{opacity:.35}
body.cine #hud:before{opacity:0}
#hud:before{transition:opacity .8s}
body.post .vignette{opacity:.3}

/* Arabic */
[lang=ar] body,[dir=rtl] body{font-family:var(--font-ar)}
[dir=rtl] h1,[dir=rtl] #menu h2,[dir=rtl] #journal h2{font-family:var(--font-ar);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.15}
[dir=rtl] h1{font-size:clamp(46px,6.4vw,96px)}
[dir=rtl] h1 em,[dir=rtl] h2 em{font-family:var(--font-ar);font-style:normal;font-weight:300;color:var(--gold)}
[dir=rtl] #quest,[dir=rtl] #animal-state,[dir=rtl] #place,[dir=rtl] #discovery h2,[dir=rtl] #toast,[dir=rtl] .credit,[dir=rtl] #journal-list h3,[dir=rtl] #found{font-family:var(--font-ar);font-weight:500}
[dir=rtl] #quest{font-size:20px;line-height:1.35}
[dir=rtl] #animal-state{font-size:16px}
[dir=rtl] #place{font-size:18px}
[dir=rtl] #discovery h2,[dir=rtl] #journal-list h3{font-size:26px;line-height:1.3}
[dir=rtl] #toast{font-size:16px;line-height:1.6;border-radius:18px}
[dir=rtl] .credit{font-size:15px;line-height:1.7}
[dir=rtl] .btn,[dir=rtl] .secondary,[dir=rtl] .chip,[dir=rtl] #trail-status,[dir=rtl] #friend-guide,[dir=rtl] #landmark-label,[dir=rtl] #discovery-count,[dir=rtl] #discovery-open,[dir=rtl] #progress,[dir=rtl] .intro-kick,[dir=rtl] .intro-bottom,[dir=rtl] .wm-credit,[dir=rtl] #place small,[dir=rtl] .links a,[dir=rtl] .story-source,[dir=rtl] #journal-count,[dir=rtl] .interview-player button,[dir=rtl] #save-photo,[dir=rtl] #exit-photo,[dir=rtl] .ld-text{font-family:var(--font-ar);font-weight:500;letter-spacing:0;text-transform:none}
[dir=rtl] .btn .arr{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
[dir=rtl] .intro-lead,[dir=rtl] #quest-detail,[dir=rtl] #journal-list p,[dir=rtl] #journal-adventure,[dir=rtl] #discovery p{line-height:1.9}
[dir=rtl] .control-list kbd{font-family:var(--font-ar);font-weight:500;letter-spacing:0}
#lang-toggle[lang=ar],.lang-en #lang-toggle{font-family:var(--font-ar);letter-spacing:0}
.lang-ar #lang-toggle{font-family:var(--font-cond);letter-spacing:.1em}

/* Tablets */
@media(max-width:800px){
  header{top:16px}
  .wm-title{font-size:26px}
  .compass{top:84px;gap:14px}
  #journey{top:94px;padding:12px 16px 12px 13px}
  #quest{font-size:21px}
  #friend-guide{top:94px}
  .keys{display:none}
  footer{bottom:20px}
  #discovery{max-width:300px;padding:20px}
  h1{font-size:clamp(48px,11vw,80px)}
  .intro-copy{inset-inline-start:7vw;inset-inline-end:7vw;top:46%}
  #menu h2,#journal h2{font-size:44px}
}
/* Touch controls */
@media(pointer:coarse),(max-width:600px){
  .playing #touch-controls{display:block;pointer-events:auto}
  #joystick{position:absolute;width:112px;height:112px;bottom:112px;left:22px;border:1px solid rgba(246,242,234,.35);border-radius:50%;background:rgba(19,16,16,.28);touch-action:none}
  #stick{position:absolute;left:36px;top:36px;width:40px;height:40px;border-radius:50%;background:rgba(246,242,234,.55);pointer-events:none}
  .touch-actions{position:absolute;right:22px;bottom:112px;display:grid;grid-template-columns:52px 52px;gap:10px}
  .touch-actions button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(246,242,234,.45);background:rgba(19,16,16,.62);color:var(--bone);font:600 11px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;touch-action:none}
  [dir=rtl] .touch-actions button{font:500 11px/1 var(--font-ar);letter-spacing:0}
  #touch-interact:not(:disabled){background:var(--red);border-color:var(--red)}
  .touch-actions button:disabled{opacity:.4;cursor:default}
  #prompt{bottom:250px}
  #animal-status{bottom:250px}
  #discovery{bottom:250px}
}
/* Phones */
@media(max-width:600px){
  :root{--gut:14px}
  header{top:12px}
  .wordmark{padding:5px 10px 6px 6px;column-gap:7px;border-radius:12px}
  .brand-icon{width:24px;height:32px}
  .wm-title{font-size:22px}
  .wm-credit{font-size:9px;letter-spacing:.14em}
  nav{gap:4px}
  nav button{width:38px;height:40px;padding:9px}
  .compass{display:none}
  #journey{top:74px;max-width:calc(100% - 28px);padding:10px 14px 10px 11px}
  #quest{font-size:18px}
  #quest-detail{font-size:12px}
  #trail-status{font-size:10px;margin-top:6px}
  #friend-guide{top:auto;bottom:250px;padding:7px 11px;font-size:11px}
  #animal-status{bottom:244px;min-width:0;max-width:54%;padding:7px 12px 8px 10px}
  #animal-state{font-size:16px}
  #action-hint{font-size:10.5px}
  #prompt{left:var(--gut);right:var(--gut);transform:none;bottom:66px;justify-content:center;white-space:normal;font-size:13px;min-height:40px;padding:8px 12px}
  #prompt kbd{display:none}
  #discovery{inset-inline:var(--gut);bottom:244px;max-width:none;max-height:calc(100% - 330px);overflow:auto;padding:16px 18px}
  #discovery h2{font-size:24px}
  #discovery p{font-size:12px;line-height:1.6}
  footer{bottom:16px}
  #place{font-size:17px}
  #place small{font-size:9px}
  #found{font-size:24px}
  #progress{font-size:10px}
  #toast{top:18%;font-size:16px;padding:10px 18px;border-radius:18px}
  .intro-copy{top:44%}
  .intro-lead{font-size:14px}
  #begin{min-width:0;width:100%}
  .intro-bottom{bottom:22px;inset-inline:7vw}
  .intro-bottom>span:last-child{display:none}
  body:not(.playing) header{top:22px}
  #menu>div{padding:18px 12px}
  #journal>div{padding:26px 12px}
  #menu h2,#journal h2{font-size:40px}
  .control-list{grid-template-columns:1fr;gap:7px}
  .preferences select{max-width:170px}
  #photo-hint{flex-wrap:wrap;white-space:normal;justify-content:center;max-width:92%;border-radius:18px;padding:10px}
  #save-photo{margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}