@font-face{font-family:"Assistant";font-weight:400;font-display:swap;src:url(../assets/fonts/assistant-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Assistant";font-weight:600;font-display:swap;src:url(../assets/fonts/assistant-hebrew-600-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Assistant";font-weight:700;font-display:swap;src:url(../assets/fonts/assistant-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Assistant";font-weight:400;font-display:swap;src:url(../assets/fonts/assistant-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"Assistant";font-weight:600;font-display:swap;src:url(../assets/fonts/assistant-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"Assistant";font-weight:700;font-display:swap;src:url(../assets/fonts/assistant-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"Suez One";font-weight:400;font-display:swap;src:url(../assets/fonts/suez-one-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Suez One";font-weight:400;font-display:swap;src:url(../assets/fonts/suez-one-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF}
/* Layout: one 16:9 stage, letterboxed to fit the tablet; HUD and inventory live inside the stage. Single warm look by choice. */
:root{
  --ink:#2b1d12;
  --paper:#f6ead2;
  --brass:#c99a3e;
  --brass-dark:#8a6420;
  --sea:#2f7fa3;
  --night:#1c2430;
  --ok:#3f8f5a;
  --display:"Suez One","Assistant",Georgia,serif;
  --body:"Assistant","Arial Hebrew",Arial,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--body);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px));
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.stage{position:relative;width:min(100vw,calc(100vh*16/9));width:min(100vw,calc(100dvh*16/9));aspect-ratio:16/9;max-width:100%;background:#000;overflow:hidden;
  container-type:inline-size}
.scene{position:absolute;inset:0}
.scene svg{width:100%;height:100%;display:block}
.hot{cursor:pointer}
.hot .hl{fill:none;stroke:#fff6c9;stroke-width:5;opacity:0;transition:opacity .35s}
.flash .hot .hl{opacity:.85}
.hot:active .hl{opacity:.6}

/* HUD */
.btn{font-family:var(--body);font-weight:700;border:0;cursor:pointer;color:var(--ink);
  background:linear-gradient(#f3d58a,var(--brass));box-shadow:0 .3cqw 0 var(--brass-dark),0 .6cqw 1.2cqw rgba(0,0,0,.35);
  border-radius:1.2cqw;font-size:2.2cqw;padding:.9cqw 2cqw;line-height:1.1}
.btn:active{transform:translateY(.25cqw);box-shadow:0 .05cqw 0 var(--brass-dark)}
.btn:focus-visible{outline:.3cqw solid #fff;outline-offset:.3cqw}
.hud{position:absolute;top:1.4cqw;inset-inline:1.4cqw;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:5}
.hud > *{pointer-events:auto}
.hud .grp{display:flex;gap:1cqw}
.round{width:6.4cqw;height:6.4cqw;padding:0;display:grid;place-items:center;border-radius:50%}
.round svg{width:3.6cqw;height:3.6cqw}

.inv{position:absolute;bottom:1.2cqw;left:50%;transform:translateX(-50%);display:flex;gap:1.2cqw;z-index:5;
  background:rgba(30,20,12,.72);padding:1cqw 1.4cqw;border-radius:1.6cqw;border:.2cqw solid rgba(201,154,62,.6);min-height:8cqw;align-items:center}
.inv:empty{display:none}
.slot{width:8cqw;height:8cqw;border-radius:1.2cqw;background:rgba(246,234,210,.12);border:.25cqw solid transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.slot svg{width:6.6cqw;height:6.6cqw}
.slot.sel{border-color:#ffe28a;background:rgba(255,226,138,.25);box-shadow:0 0 1.6cqw rgba(255,226,138,.7)}

.msg{position:absolute;top:9.5cqw;left:50%;transform:translateX(-50%);max-width:70cqw;z-index:6;
  background:var(--paper);color:var(--ink);font-size:2.6cqw;font-weight:600;line-height:1.35;text-align:center;
  padding:1.4cqw 2.6cqw;border-radius:1.4cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.4);text-wrap:balance}
.msg.hint{background:#e9f4ea;border:.3cqw solid var(--ok)}

/* overlays: letter, painting zoom */
.overlay{position:absolute;inset:0;background:rgba(15,10,6,.7);display:grid;place-items:center;z-index:8}
.letter{width:58cqw;background:var(--paper);color:var(--ink);border-radius:.8cqw;padding:3cqw 4cqw;
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.5);transform:rotate(-1deg);font-size:2.35cqw;line-height:1.5;
  background-image:repeating-linear-gradient(transparent 0 3.4cqw,rgba(120,90,50,.15) 3.4cqw calc(3.4cqw + 1px))}
.letter h2{font-family:var(--display);font-weight:400;font-size:3.4cqw;margin:0 0 1cqw}
.letter p{margin:0 0 .8cqw}
.letter .sign{text-align:left;font-family:var(--display);font-size:2.6cqw}
.letter .levers{display:flex;justify-content:center;margin:1cqw 0}
.letter .levers svg{width:18cqw;height:9cqw}
.close-note{display:block;margin:1.6cqw auto 0}

/* title & ending */
.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6cqw;gap:1.4cqw;z-index:4;text-align:center}
/* keep the text in the open sky of the scene image, clear of the lighthouse */
.cover.on-left{right:40%}
.cover.on-right{left:40%}
.cover.on-left .sub,.cover.on-right .sub{max-width:52cqw}
.cover h1{font-family:var(--display);font-weight:400;font-size:7.5cqw;margin:0;color:#fff8e6;text-shadow:0 .4cqw 0 rgba(0,0,0,.25),0 0 2.5cqw rgba(0,0,0,.35);text-wrap:balance}
.cover .sub{max-width:60cqw;text-wrap:balance;font-size:2.8cqw;font-weight:700;color:#fff8e6;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.6)}
.cover .row{display:flex;gap:1.6cqw;margin-top:1cqw}
.cover .btn.big{font-size:3cqw;padding:1.2cqw 3.4cqw}
.cover .btn.ghost{background:rgba(246,234,210,.85)}
.rotate{position:fixed;inset:auto 0 0 0;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  background:var(--paper);color:var(--ink);text-align:center;font-weight:700;font-size:18px;display:none;z-index:20}
@media (orientation:portrait){.rotate{display:block}}

.fade{animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.spin{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.beam{animation:sweep 4s ease-in-out infinite alternate;transform-origin:800px 330px}
@keyframes sweep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.boat{animation:sail 9s ease-out forwards}
@keyframes sail{from{transform:translateX(-260px)}to{transform:translateX(0)}}
.glowpulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.75}}
@media (prefers-reduced-motion:reduce){.beam,.boat,.glowpulse{animation:none}.spin{transition:none}.fade{animation:none}}