/* THE LAST BELL — a school register gone wrong.
   Chalkboard slate, brass bell, red "PRESENT" stamp. One memorable thing: the menu is a roll call. */
:root{
 --ink:#050807;--board:#0e1714;--chalk:#e9e7da;--dim:#98a39a;--brass:#c8a24b;--stamp:#c0402f;--teal:#8fe6da;
 --paper:#d8cfb0;--paper-ink:#2a2418;--to:right;
 --f-disp:'IM Fell English SC','Vazirmatn',Georgia,serif;
 --f-ui:'Special Elite','Vazirmatn',ui-monospace,Consolas,monospace;
}
[dir=rtl]{--to:left}
[dir=rtl] *{letter-spacing:0!important}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--chalk);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;user-select:none}
.hide{display:none!important}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
kbd{display:inline-block;min-width:1.8em;padding:1px 7px 2px;margin:0 3px;border:1px solid rgba(233,231,218,.55);border-bottom-width:3px;border-radius:4px;font:inherit;font-size:.85em;text-align:center;background:rgba(0,0,0,.5);color:var(--chalk)}

/* ---------- overlays on the 3D view ---------- */
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent calc(58% - var(--fear,0)*22%),rgba(40,0,0,calc(.6 + var(--fear,0)*.35)) 100%)}
#grain{position:fixed;inset:-60px;z-index:6;pointer-events:none;opacity:.07;will-change:transform;
 background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
 animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,18px)}40%{transform:translate(22px,-26px)}60%{transform:translate(-14px,-30px)}80%{transform:translate(28px,24px)}100%{transform:translate(0,0)}}
#flash{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0}
#flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:.95}12%{opacity:.2}22%{opacity:.8}100%{opacity:0}}
#blk{position:fixed;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
#dd{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s}
#dd.on{opacity:1}
#dd b{font-family:var(--f-disp);font-weight:400;font-size:clamp(46px,12vw,150px);color:var(--stamp);border:.07em solid var(--stamp);padding:.05em .3em;transform:rotate(-7deg);letter-spacing:.08em;text-shadow:0 0 30px rgba(192,64,47,.4)}
#dd.on b{animation:slam .35s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes slam{from{transform:rotate(-7deg) scale(2.6);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
#end{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 2.5s}
#end.on{opacity:1}
#end h1{margin:0;font-family:var(--f-disp);font-weight:400;font-size:clamp(34px,8vw,96px);letter-spacing:.35em;color:var(--chalk);animation:endflick 7s infinite}
@keyframes endflick{0%,90%,100%{opacity:1}92%{opacity:.25}94%{opacity:.9}96%{opacity:.4}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;color:var(--chalk);text-shadow:0 1px 8px #000}
#hud::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:rgba(233,231,218,.55);box-shadow:0 0 6px #000}
#obj{position:absolute;inset-block-start:22px;inset-inline-start:24px;max-width:min(38ch,60vw);padding:10px 22px 10px 14px;border-inline-start:3px solid var(--brass);background:linear-gradient(to var(--to),rgba(5,8,7,.78),rgba(5,8,7,0));font-size:15px;line-height:1.7}
#mc{position:absolute;inset-inline:0;top:13%;text-align:center;opacity:0;transform:translateY(-10px);transition:opacity 1.2s,transform 1.2s}
#mc.on{opacity:1;transform:none}
#mc small{display:inline-block;margin-bottom:8px;padding:1px 10px;border:2px solid var(--stamp);color:var(--stamp);font-size:14px;letter-spacing:.2em;transform:rotate(-3deg)}
#mc b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(28px,4.4vw,52px);letter-spacing:.06em}
#mc span{display:block;margin:8px auto 0;max-width:44ch;font-size:16px;line-height:1.7;color:var(--dim)}
#fl{position:absolute;inset-block-end:24px;inset-inline-start:24px;display:flex;align-items:center;gap:10px;font-size:14px}
#fl:empty{display:none}
.bat{position:relative;width:46px;height:17px;border:2px solid var(--chalk);border-radius:3px;padding:1px}
.bat::after{content:"";position:absolute;inset-inline-end:-6px;top:3px;width:3px;height:7px;background:var(--chalk);border-radius:0 2px 2px 0}
.bat i{display:block;height:100%;background:var(--teal);transition:width .4s}
.bat.low i{background:var(--stamp);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
#st{position:absolute;inset-block-end:24px;inset-inline-end:24px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim);transition:color .25s}
.ear{display:flex;align-items:flex-end;gap:3px;height:20px}
.ear i{width:5px;background:rgba(233,231,218,.2);transition:background .2s}
.ear i:nth-child(1){height:7px}.ear i:nth-child(2){height:13px}.ear i:nth-child(3){height:20px}
#st[data-lv="1"] i:nth-child(-n+1),#st[data-lv="2"] i:nth-child(-n+2),#st[data-lv="3"] i{background:var(--chalk)}
#st[data-lv="3"]{color:var(--stamp)}#st[data-lv="3"] i{background:var(--stamp)}
#pr{position:absolute;left:50%;top:57%;transform:translateX(-50%);font-size:17px;white-space:nowrap}
#pr:empty,#nt:empty{display:none}
#nt{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);max-width:min(70ch,88vw);padding:8px 18px;text-align:center;font-size:17px;line-height:1.7;background:rgba(5,8,7,.66);animation:note .35s ease-out}
@keyframes note{from{opacity:0;transform:translate(-50%,8px)}}
#sv{position:absolute;inset-block-start:24px;inset-inline-end:24px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--brass);opacity:0}
#sv svg{width:16px;height:16px}
#sv.on{animation:saved 2.4s ease-out}
@keyframes saved{0%{opacity:0}12%,70%{opacity:.9}100%{opacity:0}}

/* ---------- screens ---------- */
.scr{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
#load,#lang{background:var(--ink)}
#load h1,#lang h1{margin:18px 0 26px;font-family:var(--f-disp);font-weight:400;font-size:clamp(30px,5vw,52px);letter-spacing:.12em}
.bell{width:56px;height:56px;color:var(--brass);transform-origin:50% 8%}
#load .bell,#lang .bell{animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
#lm{min-height:1.6em;margin-bottom:18px;font-style:italic;color:var(--dim)}
.bar{width:min(320px,70vw);height:3px;background:rgba(233,231,218,.1)}
.bar i{display:block;height:100%;width:0;background:var(--chalk);transition:width .25s}
.cards{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.card{display:flex;flex-direction:column;gap:6px;min-width:240px;padding:26px 36px;border:1px solid rgba(233,231,218,.22);background:rgba(233,231,218,.03);text-align:center;transition:border-color .2s,transform .2s,background .2s}
.card:hover,.card:focus-visible{border-color:var(--brass);background:rgba(200,162,75,.08);transform:translateY(-3px)}
.card b{font-family:var(--f-disp);font-weight:400;font-size:32px;letter-spacing:.08em}
.card small{color:var(--dim);font-size:14px}

/* the menu: a roll call over the live film of the school */
#menu{overflow:auto;align-items:flex-start;padding:0 7vw;background:linear-gradient(to var(--to),rgba(3,6,5,.93) 0%,rgba(3,6,5,.6) 46%,rgba(3,6,5,0) 80%)}
[dir=rtl] #menu{align-items:flex-start}
.ttl .bell{width:48px;height:48px}
h1.gl{margin:10px 0 0;font-family:var(--f-disp);font-weight:400;font-size:clamp(42px,7.4vw,104px);line-height:1;letter-spacing:.04em;color:var(--chalk);text-shadow:0 0 28px rgba(200,162,75,.2);animation:glt 7s steps(1) infinite 3s}
h1.gl span{display:inline-block;animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes drop{0%{opacity:0;transform:translateY(-18px);filter:blur(6px)}40%{opacity:.3}55%{opacity:.9}65%{opacity:.4}100%{opacity:1;transform:none;filter:none}}
@keyframes glt{0%,100%{text-shadow:0 0 28px rgba(200,162,75,.2)}94%{text-shadow:4px 0 var(--stamp),-4px 0 var(--teal)}96%{text-shadow:-3px 0 var(--stamp),3px 0 var(--teal)}98%{text-shadow:0 0 28px rgba(200,162,75,.2)}}
.ttl h2{margin:6px 0 16px;font-weight:400;font-size:clamp(14px,1.6vw,19px);letter-spacing:.3em;color:var(--brass)}
.rule{width:min(380px,60vw);height:2px;margin-bottom:16px;background:linear-gradient(to var(--to),var(--chalk),transparent)}
nav{display:flex;flex-direction:column;width:min(430px,86vw)}
nav h2{margin:0 0 18px;font-family:var(--f-disp);font-weight:400;font-size:34px;letter-spacing:.08em;text-align:center}
nav button{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:9px 8px;border-bottom:1px solid rgba(233,231,218,.16);font-size:20px;text-align:start;animation:row .6s cubic-bezier(.2,.8,.2,1) both;transition:background .15s,padding .15s}
@keyframes row{from{opacity:0;transform:translateX(-18px)}}
[dir=rtl] nav button{animation-name:rowrtl}
@keyframes rowrtl{from{opacity:0;transform:translateX(18px)}}
nav button i{width:2ch;font-style:normal;font-size:14px;color:var(--dim)}
nav button::after{content:"PRESENT";position:absolute;inset-inline-end:8px;padding:0 8px;border:2px solid var(--stamp);color:var(--stamp);font-size:13px;letter-spacing:.15em;opacity:0;transform:rotate(-7deg) scale(1.8);transition:opacity .1s,transform .12s}
html[lang=fa] nav button::after{content:"حاضر";font-size:15px}
nav button:hover,nav button:focus-visible{background:linear-gradient(to var(--to),rgba(233,231,218,.09),transparent);padding-inline-start:18px;outline:0}
nav button:hover::after,nav button:focus-visible::after{opacity:.95;transform:rotate(-7deg) scale(1)}
nav button.off{opacity:.35;pointer-events:none}
nav button.off::after{content:"ABSENT";opacity:.7;transform:rotate(-7deg);border-color:var(--dim);color:var(--dim)}
html[lang=fa] nav button.off::after{content:"غایب"}
#pn nav{padding:30px 34px;background:linear-gradient(180deg,rgba(14,23,20,.96),rgba(9,15,13,.96));border:1px solid rgba(233,231,218,.2);outline:1px solid rgba(233,231,218,.08);outline-offset:5px;box-shadow:0 30px 80px #000}
.hint{margin:14px 0 0;font-size:13px;color:var(--dim)}
.warn{max-width:44ch;margin:12px 0 0;padding:8px 12px;border-inline-start:3px solid var(--stamp);font-size:13px;line-height:1.7;color:#e6b0a6;background:rgba(192,64,47,.1)}

/* ---------- panels: pause, settings, inventory, puzzles ---------- */
#pn{background:radial-gradient(ellipse at center,rgba(3,6,5,.5),rgba(3,6,5,.88))}
.pnl{width:min(590px,92vw);max-height:90vh;overflow:auto;padding:28px 32px;background:linear-gradient(180deg,rgba(14,23,20,.97),rgba(9,15,13,.97));border:1px solid rgba(233,231,218,.22);outline:1px solid rgba(233,231,218,.08);outline-offset:5px;box-shadow:0 30px 80px #000;animation:pin .22s ease-out}
@keyframes pin{from{opacity:0;transform:translateY(10px)}}
.pnl h2{margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--brass);font-family:var(--f-disp);font-weight:400;font-size:28px;letter-spacing:.06em}
.pnl p{line-height:1.8;margin:.6em 0}
.pnl .sm{font-size:13px;color:var(--dim)}
.pnl button,.paper button{padding:9px 20px;border:1px solid rgba(233,231,218,.4);transition:background .15s,border-color .15s,color .15s}
.pnl button:hover,.pnl button:focus-visible{background:rgba(233,231,218,.1);border-color:var(--chalk)}
.pnl>button{display:block;width:100%;margin-top:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.row button{flex:1 1 auto;min-width:76px}
.tabs{justify-content:flex-start}
.pnl button.on{background:var(--brass);border-color:var(--brass);color:#14100a}
.li{display:block;width:100%;margin:6px 0;text-align:start}
.li small{color:var(--dim)}
.mono{margin:10px 0;text-align:center;font-family:var(--f-ui);font-weight:400;color:var(--brass);text-shadow:0 0 24px rgba(200,162,75,.45);font-variant-numeric:tabular-nums}
label{display:grid;grid-template-columns:1fr minmax(120px,210px);gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(233,231,218,.08);font-size:15px}
label.chk{display:flex;gap:10px;align-items:center;cursor:pointer}
input[type=range],input[type=checkbox]{accent-color:var(--brass)}
input[type=range]{width:100%}
select{padding:6px 8px;color:var(--chalk);background:var(--board);border:1px solid rgba(233,231,218,.3);font:inherit}
.kb{display:flex;justify-content:space-between;align-items:center;width:100%;margin:6px 0;text-align:start}
.kb b{min-width:64px;padding:2px 12px;border:1px solid var(--chalk);border-bottom-width:3px;border-radius:4px;text-align:center;font-weight:400}
#mp{display:block;width:100%;height:auto;background:#050a09;border:1px solid rgba(143,200,255,.3)}

/* documents: typed on old register paper */
.paper{position:relative;width:min(570px,90vw);max-height:88vh;overflow:auto;padding:36px 40px 28px;color:var(--paper-ink);background:radial-gradient(ellipse at 20% 8%,#e6ddbf,var(--paper) 55%,#b8ac86);box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 0 70px rgba(90,70,30,.35);transform:rotate(-.6deg);animation:paper .35s ease-out}
@keyframes paper{from{opacity:0;transform:translateY(24px) rotate(-2deg)}}
.paper::before{content:"";position:absolute;top:-4px;left:42%;width:96px;height:24px;background:rgba(222,212,172,.6);transform:rotate(3deg)}
.paper h3{margin:0;padding-bottom:6px;border-bottom:2px solid var(--paper-ink);font-weight:400;font-size:24px}
.paper small{display:block;margin:8px 0 14px;font-size:13px;opacity:.7}
.paper hr{margin:0 0 16px;border:0;border-top:1px dashed rgba(42,36,24,.45)}
.paper p{margin:0 0 .85em;font-size:16.5px;line-height:1.85}
.paper button{display:block;margin:22px auto 0;border-color:rgba(42,36,24,.6);color:var(--paper-ink)}
.paper button:hover,.paper button:focus-visible{background:rgba(42,36,24,.12)}

@media (max-height:700px){.ttl .bell{width:36px;height:36px}nav button{padding:6px 8px;font-size:17px}.rule{margin-bottom:10px}.warn{font-size:12px}}
@media (max-width:720px){#menu{padding:0 6vw}#obj{max-width:70vw}label{grid-template-columns:1fr}nav button{font-size:18px}.pnl{padding:20px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.noflash #grain,body.noflash h1.gl{animation:none}