:root{
  --ink:#070a16; --plate:rgba(11,14,30,.92); --plate2:rgba(5,7,16,.95);
  --gold:#e2c989; --gold-hi:#fff1c4; --gold-dk:#8a6a32; --line:rgba(214,190,130,.85); --line-soft:rgba(214,190,130,.32);
  --paper:#f4efe4; --paper2:#d6cdb9;
  --serif:'Cormorant Garamond', Georgia, serif; --caps:'Cinzel', 'Trajan Pro', serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --sb:max(14px, env(safe-area-inset-bottom)); --st:max(12px, env(safe-area-inset-top)); --sr:max(14px, env(safe-area-inset-right)); --sl:max(14px, env(safe-area-inset-left));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--serif);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* ornament */
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:.55em auto}
.orn i{display:block;height:1.5px;width:clamp(56px,13vw,170px);background:linear-gradient(90deg,transparent,var(--gold))}
.orn i:last-child{transform:scaleX(-1)}
.orn b{width:11px;height:11px;border:1.5px solid var(--gold);transform:rotate(45deg);position:relative;flex:none}
.orn b::after{content:'';position:absolute;inset:2.5px;background:var(--gold)}

/* top buttons */
.top{position:absolute;top:var(--st);right:var(--sr);display:flex;gap:10px;z-index:30}
.tbtn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--plate);display:grid;place-items:center;padding:0;transition:transform 140ms var(--ease-out),background-color 160ms,border-color 160ms;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.tbtn:hover{background:rgba(30,34,64,.95);border-color:var(--gold-hi)}
.tbtn:active{transform:scale(.92)}
.tbtn svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tbtn .spk{fill:var(--gold)}
.tbtn .x{display:none}.tbtn.off .x{display:inline}.tbtn.off .w{display:none}

/* objective: one line, collapses to a diamond after a few seconds, tap to show again */
.obj{position:absolute;top:var(--st);left:var(--sl);z-index:20;display:flex;align-items:center;gap:10px;max-width:min(64vw,560px);min-height:46px;padding:0 18px 0 14px;border-radius:999px;background:rgba(6,8,18,.82);border:1px solid var(--line-soft);color:var(--paper);font:600 clamp(16px,1.8vw,19px)/1.2 var(--serif);text-align:left;transition:max-width 300ms var(--ease-out),padding 300ms var(--ease-out),background-color 160ms}
.obj:hover{background:rgba(16,20,40,.92)}
.obj-ic{flex:none;width:12px;height:12px;border:1.5px solid var(--gold);transform:rotate(45deg);position:relative}
.obj-ic::after{content:'';position:absolute;inset:2.5px;background:var(--gold)}
.obj-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 200ms}
.obj.min{max-width:46px;padding:0 0 0 16px}
.obj.min .obj-t{opacity:0}
.obj.new .obj-ic{animation:objPing 900ms var(--ease-out) 2}
@keyframes objPing{50%{box-shadow:0 0 0 7px rgba(226,201,137,.25)}}

/* narration caption */
.caption{position:absolute;left:50%;bottom:calc(var(--sb) + 22px);transform:translate(-50%,8px);width:min(92vw,960px);text-align:center;font:italic 500 clamp(19px,2.4vw,30px)/1.32 var(--serif);color:#f8f2e4;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 2px #000;padding:.7em 1.6em;background:radial-gradient(closest-side,rgba(4,5,12,.66),rgba(4,5,12,.38) 70%,rgba(4,5,12,0));opacity:0;transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out);pointer-events:none;z-index:15;text-wrap:balance}
.caption.on{opacity:1;transform:translate(-50%,0)}
body.has-hud .caption{bottom:calc(var(--sb) + 104px)}
body.dlg .caption{opacity:0}
.card .caption-in{position:absolute}

/* barks */
#barks{position:absolute;inset:0;pointer-events:none;z-index:14}
.bark{position:absolute;transform:translate(-50%,-100%);padding:.22em .7em .3em;border-radius:10px;background:rgba(244,239,228,.95);color:#1d1626;font:600 clamp(14px,1.6vw,17px)/1.15 var(--serif);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:barkIn 200ms var(--ease-out)}
.bark::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:rgba(244,239,228,.95)}
.bark.out{opacity:0;transition:opacity 250ms}
/* off-screen indicator */
.track{position:fixed;z-index:16;transform:translate(-50%,-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.track i{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:20px solid var(--gold);filter:drop-shadow(0 0 6px rgba(255,220,150,.8));transform:rotate(var(--a));animation:trackP 1s ease-in-out infinite}
.track span{font:600 14px/1 var(--serif);color:var(--paper);text-shadow:0 1px 4px #000}
@keyframes trackP{50%{opacity:.55}}
/* inner voices of the teachers (VII): floating italic light, no box */
.bark.voice{background:none;box-shadow:none;color:#fff1cf;font:italic 600 clamp(19px,2.3vw,28px)/1.2 var(--serif);text-shadow:0 0 14px rgba(255,210,140,.85),0 2px 6px rgba(0,0,0,.9);white-space:normal;max-width:min(80vw,520px);text-align:center;animation:voiceIn 900ms var(--ease-out)}
.bark.voice::after{display:none}
@keyframes voiceIn{from{opacity:0;transform:translate(-50%,-70%)}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes barkIn{from{opacity:0;transform:translate(-50%,-80%) scale(.92)}to{opacity:1;transform:translate(-50%,-100%)}}

/* dialogue box: ornamental frame, portrait, name plate, typewriter, breathing caret, choices */
.dialog{position:absolute;left:50%;bottom:calc(var(--sb) + 8px);transform:translateX(-50%);width:min(94vw,900px);min-height:clamp(128px,20vh,190px);display:flex;gap:clamp(12px,2vw,22px);align-items:flex-start;padding:clamp(22px,3vh,30px) clamp(18px,3vw,40px) clamp(18px,2.4vh,24px) clamp(16px,2.4vw,30px);background:linear-gradient(180deg,var(--plate),var(--plate2));border:2px solid var(--line);box-shadow:inset 0 0 0 5px rgba(5,7,16,.9),inset 0 0 0 6px var(--line-soft),0 14px 44px rgba(0,0,0,.6);z-index:25;animation:dlgIn 260ms var(--ease-out)}
.dlg-frame{position:absolute;inset:-2px;pointer-events:none}
.dlg-frame .c{position:absolute;width:22px;height:22px;border:2px solid var(--gold)}
.dlg-frame .c::after{content:'';position:absolute;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.dlg-frame .tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.dlg-frame .tl::after{left:3px;top:3px}
.dlg-frame .tr{right:-6px;top:-6px;border-left:0;border-bottom:0}.dlg-frame .tr::after{right:3px;top:3px}
.dlg-frame .bl{left:-6px;bottom:-6px;border-right:0;border-top:0}.dlg-frame .bl::after{left:3px;bottom:3px}
.dlg-frame .br{right:-6px;bottom:-6px;border-left:0;border-top:0}.dlg-frame .br::after{right:3px;bottom:3px}
.dlg-por{flex:none;width:clamp(64px,8vw,88px);aspect-ratio:1;border:1.5px solid var(--line);background:radial-gradient(circle at 50% 40%,#2a3058,#0c0e1e);box-shadow:inset 0 0 0 3px rgba(5,7,16,.9);margin-top:2px}
.dlg-por canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.dlg-por.empty{display:none}
.dlg-body{flex:1;min-width:0}
.dlg-name{display:inline-block;margin:-4px 0 6px;padding:.05em .7em .12em;border:1.5px solid var(--line);background:rgba(10,12,24,.97);font:700 clamp(15px,1.7vw,19px)/1.25 var(--caps);letter-spacing:.08em;color:#efdcaa}
.dlg-text{margin:0;font:500 clamp(18px,2.3vw,27px)/1.38 var(--serif);color:var(--paper);min-height:2.7em}
.dlg-choices{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dlg-choices:empty{display:none}
.choice{display:flex;align-items:center;gap:10px;text-align:left;padding:.4em .9em;border:1.5px solid var(--line-soft);background:rgba(20,24,48,.8);font:500 clamp(17px,2vw,23px)/1.25 var(--serif);color:var(--paper);transition:background-color 140ms,border-color 140ms,transform 120ms var(--ease-out)}
.choice::before{content:'';flex:none;width:8px;height:8px;border:1.5px solid var(--gold);transform:rotate(45deg);opacity:.5}
.choice:hover,.choice.sel{background:rgba(44,50,92,.95);border-color:var(--gold)}
.choice.sel::before,.choice:hover::before{background:var(--gold);opacity:1}
.choice:active{transform:scale(.98)}
.dlg-more{position:absolute;right:24px;bottom:14px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid var(--gold);opacity:0;transition:opacity 150ms}
.dialog.ready .dlg-more{opacity:1;animation:breathe 1.3s ease-in-out infinite}
.dialog.choosing .dlg-more{opacity:0}
@keyframes breathe{50%{transform:translateY(4px);opacity:.55}}
@keyframes dlgIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* chapter card */
.card{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#141a30 0%,#03040a 75%);text-align:center;padding:0 16px;transition:opacity 600ms var(--ease-out)}
.card.out{opacity:0;pointer-events:none}
.card-k{font:700 clamp(13px,1.5vw,17px)/1 var(--caps);letter-spacing:.5em;margin-right:-.5em;color:#cdb47c;animation:rise 900ms var(--ease-out) both}
.card-n{font:700 clamp(64px,11vw,140px)/1 var(--caps);background:linear-gradient(180deg,#fff3cf,#e2c27c 60%,#9c7638);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,200,120,.3));margin:.12em 0 0;animation:rise 900ms 120ms var(--ease-out) both}
.card-t{font:italic 500 clamp(30px,5.4vw,70px)/1.08 var(--serif);color:var(--paper);text-shadow:0 0 26px rgba(255,190,110,.3);animation:rise 900ms 380ms var(--ease-out) both;text-wrap:balance}
.card .orn{animation:rise 900ms 250ms var(--ease-out) both}
.card .caption{bottom:calc(var(--sb) + 30px)}
.skip{position:absolute;right:var(--sr);bottom:var(--sb);min-height:44px;padding:0 18px;border:1px solid var(--line-soft);background:rgba(6,8,18,.6);font:600 17px/1 var(--serif);color:var(--paper2);transition:color 140ms,border-color 140ms}
.skip:hover{color:var(--gold-hi);border-color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* iris transition between scenes */
.iris{position:absolute;inset:0;z-index:38;pointer-events:none;background:#03040a;--r:150%;-webkit-mask:radial-gradient(circle at 50% 52%,transparent var(--r),#000 calc(var(--r) + 1px));mask:radial-gradient(circle at 50% 52%,transparent var(--r),#000 calc(var(--r) + 1px));opacity:0}
.iris.on{opacity:1}

/* HUD: virtual joystick + action button */
.hud{position:absolute;inset:0;pointer-events:none;z-index:22}
.joy{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(214,190,130,.55);background:radial-gradient(circle,rgba(10,12,26,.35),rgba(10,12,26,.55));box-shadow:0 0 0 6px rgba(6,8,18,.25)}
.joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f2dfa8,#b8944c);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.abtn{pointer-events:auto;position:absolute;right:var(--sr);bottom:calc(var(--sb) + 6px);min-width:92px;height:92px;padding:0 20px;border-radius:46px;border:2px solid var(--line);background:radial-gradient(circle at 50% 30%,rgba(46,52,92,.96),rgba(8,10,22,.96));font:700 clamp(15px,1.7vw,18px)/1 var(--caps);letter-spacing:.06em;color:var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 0 0 4px rgba(214,190,130,.16);transition:transform 120ms var(--ease-out),opacity 200ms,box-shadow 200ms}
.abtn.dim{opacity:.3}
.abtn.on{transform:scale(.93)}
.abtn:hover:not(.dim){box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 5px rgba(226,201,137,.18),inset 0 0 0 4px rgba(214,190,130,.22)}
.abtn.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 9px rgba(226,201,137,.22),inset 0 0 0 4px rgba(214,190,130,.18)}}
body.desk .abtn{height:66px;min-width:66px;border-radius:33px}

/* meter */
.meter{position:absolute;left:50%;top:calc(var(--st) + 62px);transform:translateX(-50%);width:min(62vw,380px);z-index:20;text-align:center}
.meter-lab{display:block;margin-bottom:6px;font:600 17px/1 var(--serif);color:var(--paper);text-shadow:0 1px 4px #000}
.meter-bar{height:14px;border:1.5px solid var(--line);background:rgba(6,8,18,.85);box-shadow:0 0 0 3px rgba(6,8,18,.4)}
.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#b8944c,var(--gold-hi));box-shadow:0 0 14px rgba(255,220,150,.5)}

/* screens */
.screen{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.title{background:radial-gradient(ellipse at 50% 62%,rgba(3,4,10,0) 30%,rgba(3,4,10,.6) 100%),linear-gradient(0deg,rgba(3,4,10,.7),transparent 45%)}
.title-box{text-align:center;max-width:920px;margin-top:auto;padding-bottom:max(3vh,18px);animation:rise 1.2s var(--ease-out) both}
.kicker{margin:0 0 .5em;font:700 clamp(12px,1.4vw,15px)/1 var(--caps);letter-spacing:.38em;margin-right:-.38em;color:#dcc690;text-shadow:0 2px 8px #000}
.title h1{margin:0;font:700 clamp(38px,7vw,92px)/1.02 var(--caps);letter-spacing:.04em;background:linear-gradient(180deg,#fff3cf 10%,#e2c27c 60%,#a8803e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,200,120,.35)) drop-shadow(0 3px 2px rgba(0,0,0,.8))}
.title .sub{margin:.05em 0 .9em;font:italic 500 clamp(22px,3.2vw,38px)/1.1 var(--serif);color:var(--paper);text-shadow:0 2px 10px #000}
.row{display:flex;gap:12px 18px;justify-content:center;align-items:center;flex-wrap:wrap}
.big{min-height:52px;padding:.45em 2.2em .55em;border:2px solid var(--line);background:linear-gradient(180deg,rgba(34,38,72,.96),rgba(8,10,22,.96));font:700 clamp(18px,2.1vw,23px)/1 var(--caps);letter-spacing:.14em;color:var(--gold);box-shadow:0 0 0 4px rgba(6,8,18,.6),0 0 30px rgba(255,190,110,.16);transition:transform 140ms var(--ease-out),color 160ms,box-shadow 200ms}
.big:hover{color:var(--gold-hi);box-shadow:0 0 0 4px rgba(6,8,18,.6),0 0 38px rgba(255,190,110,.32)}
.big:active{transform:scale(.97)}
.link{min-height:46px;background:rgba(6,8,18,.66);border:1px solid rgba(214,190,130,.5);padding:.3em 1.1em;font:600 clamp(16px,1.8vw,19px)/1 var(--serif);color:var(--paper);transition:background-color 160ms,border-color 160ms,transform 120ms var(--ease-out)}
.link:hover{background:rgba(20,24,48,.9);border-color:var(--gold)}
.link:active{transform:scale(.97)}
.keys{margin:1.1em auto 0;max-width:640px;font:500 clamp(14px,1.55vw,17px)/1.4 var(--serif);color:#e6dccb;text-shadow:0 1px 6px #000}
.pause,.end{background:rgba(3,4,10,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel{position:relative;width:min(94vw,640px);margin:auto;padding:clamp(22px,4vw,38px);background:linear-gradient(180deg,var(--plate),var(--plate2));border:2px solid var(--line);box-shadow:inset 0 0 0 5px rgba(5,7,16,.9),inset 0 0 0 6px var(--line-soft),0 20px 60px rgba(0,0,0,.6);text-align:center;animation:panelIn 240ms var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.panel h2{font:700 clamp(24px,3.6vw,38px)/1.1 var(--caps);letter-spacing:.1em;color:var(--gold);margin:0 0 .5em}
.tabs{display:flex;justify-content:center;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line-soft)}
.tab{min-height:44px;padding:0 16px;border:0;background:none;font:700 clamp(13px,1.4vw,15px)/1 var(--caps);letter-spacing:.1em;color:var(--paper2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 140ms,border-color 140ms}
.tab:hover{color:var(--paper)}
.tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.pane{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 18px;border:1px solid var(--line-soft);background:rgba(20,24,48,.6);font:600 clamp(17px,1.9vw,20px)/1 var(--serif);color:var(--paper);transition:background-color 140ms,border-color 140ms}
.opt:hover{background:rgba(36,42,80,.9);border-color:var(--gold)}
.opt b{font:700 15px/1 var(--caps);color:var(--gold);letter-spacing:.08em}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ch-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:84px;border:1.5px solid rgba(214,190,130,.55);background:rgba(16,20,40,.85);padding:10px;font:500 17px/1.2 var(--serif);color:var(--paper);transition:background-color 140ms,border-color 140ms,transform 120ms var(--ease-out)}
.ch-grid button:hover:not(:disabled){background:rgba(40,46,86,.95);border-color:var(--gold)}
.ch-grid button:active:not(:disabled){transform:scale(.97)}
.ch-grid button b{font:700 18px/1 var(--caps);color:var(--gold);letter-spacing:.1em}
.ch-grid button:disabled{opacity:.42;cursor:default}
.diary{text-align:left;margin:0;padding:0 0 0 1.6em;font:500 clamp(16px,1.8vw,19px)/1.45 var(--serif);color:var(--paper)}
.diary li{margin:.35em 0}.diary li::marker{font-family:var(--caps);color:var(--gold)}
.diary .lock{color:#a39a8a;font-style:italic}
.end-line{font:italic 500 clamp(20px,2.7vw,29px)/1.3 var(--serif);margin:.2em 0 1em}
.credits{font:500 clamp(14px,1.55vw,16px)/1.45 var(--serif);color:var(--paper2);margin-bottom:1.3em}
.credits p{margin:.35em 0}
.nojs{position:absolute;inset:40% 16px auto;text-align:center;font-size:20px}
@media (max-width:600px){
  .dialog{bottom:calc(var(--sb) + 4px)}
  .meter{top:calc(var(--st) + 60px)}
  .obj{max-width:calc(100vw - 140px)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* credits rising in the sky over the final scene */
.sky-credits{position:absolute;left:50%;top:0;width:min(86vw,760px);transform:translate(-50%, calc((1 - var(--k,0)) * 100vh - var(--k,0) * 60%));z-index:30;text-align:center;font:500 clamp(17px,2.1vw,24px)/1.5 var(--serif);color:#fff6e2;text-shadow:0 0 12px rgba(255,210,150,.6),0 2px 6px rgba(0,0,0,.9);pointer-events:auto;cursor:pointer}
.sky-credits p{margin:0 0 1.4em}
.sky-credits p:first-child{font:700 clamp(22px,3vw,36px)/1.2 var(--caps);color:var(--gold)}

/* the 3D cover on the table carries the title: keep the heading for screen readers only */
.title .kicker,.title .orn,.title .sub{display:none}
.title h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* typewriter: unrevealed letters keep their place; shake / wave marks */
.dlg-text .h{color:transparent}
.dlg-text .fx-s{display:inline-block;animation:fxShake .18s steps(2) infinite;animation-delay:calc(var(--i) * -37ms)}
.dlg-text .fx-w{display:inline-block;animation:fxWave 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -90ms)}
@keyframes fxShake{50%{transform:translate(1px,-1px)}}
@keyframes fxWave{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.dlg-text .fx-s,.dlg-text .fx-w{animation:none;font-weight:700}}
.sky-skip{z-index:31}
.sky-credits{pointer-events:none}