:root {
  --navy: #0a1730; --navy2: #13284d; --navy3: #1d3a6b;
  --cream: #f8f0dd; --paper: #fff8e8; --ink: #1c1a24;
  --coral: #ff6b5b; --teal: #27c6b4; --gold: #e3b65b; --gold2: #f6d58e; --pink: #ff5fa2;
  --ui: 'Fira Sans Condensed', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --talk: 'Comfortaa', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --title: 'Noto Serif Display', 'Didot', 'Georgia', serif;
  --hud-h: 92px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--cream); font-family: var(--ui); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; touch-action: none; }
#ui { position: fixed; left: 0; top: 0; right: 0; height: 100vh; height: 100dvh; pointer-events: none; z-index: 5; }
#ui button { touch-action: manipulation; }
#ui .pe, #ui button, #ui input, #ui .hud, #ui .overlay, #ui .choices, #ui .menu { pointer-events: auto; }
button { font-family: var(--ui); cursor: pointer; }

/* ── boot ─────────────────────────────────────────────── */
#boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #1d3a6b 0%, #0a1730 55%, #04080f 100%); transition: opacity .8s; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-title { font-family: var(--title); font-style: italic; font-weight: 900; font-size: clamp(42px, 7vw, 96px); color: var(--paper);
  letter-spacing: .02em; text-shadow: 0 0 30px rgba(255, 107, 91, .55), 0 4px 0 #b8433a; }
.boot-title span { font-size: .42em; color: var(--gold); letter-spacing: .04em; text-shadow: 0 0 24px rgba(227,182,91,.45); }
.boot-sub { font-family: var(--ui); font-weight: 800; letter-spacing: .5em; color: var(--gold); margin: 6px 0 34px; font-size: clamp(14px, 2vw, 22px); }
.boot-bar { margin-top: 30px; width: min(420px, 70vw); height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--coral), var(--gold)); transition: width .3s; }
.boot-msg { margin-top: 14px; font-size: 14px; opacity: .7; letter-spacing: .08em; }

/* ── bottom HUD ───────────────────────────────────────── */
.hud { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); height: var(--hud-h); width: min(1280px, calc(100vw - 20px));
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(25, 48, 92, .86), rgba(9, 20, 42, .92));
  border: 1px solid rgba(227, 182, 91, .55); box-shadow: 0 10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.hud.hidden { transform: translate(-50%, 130%); opacity: 0; pointer-events: none; }
.verbs { display: flex; gap: 6px; }
.verb { width: 62px; height: 70px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--cream); padding: 0;
  transition: background .15s, transform .15s, border-color .15s, box-shadow .15s; }
.verb svg { width: 30px; height: 30px; }
.verb span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.verb:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.verb.on { background: linear-gradient(180deg, var(--coral), #d9473a); border-color: var(--gold2); box-shadow: 0 0 18px rgba(255,107,91,.55); }
.sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(227,182,91,.6), transparent); margin: 0 2px; }
.inv { flex: 1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px; scrollbar-width: thin; min-width: 120px; }
.inv::-webkit-scrollbar { height: 5px; } .inv::-webkit-scrollbar-thumb { background: rgba(227,182,91,.5); border-radius: 4px; }
.slot { flex: 0 0 66px; height: 66px; border-radius: 12px; position: relative; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: transform .15s, border-color .15s; }
.slot img, .slot canvas { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.slot:hover { transform: translateY(-2px); border-color: var(--gold); }
.slot.on { border-color: var(--gold2); box-shadow: 0 0 16px rgba(246,213,142,.6); background: radial-gradient(circle, rgba(246,213,142,.35), rgba(255,255,255,.04)); }
.slot.new { animation: slotnew 1.6s ease-out; }
@keyframes slotnew { 0% { transform: scale(1.6); box-shadow: 0 0 40px var(--gold2); } 100% { transform: scale(1); } }
.inv-empty { align-self: center; opacity: .45; font-size: 13px; letter-spacing: .06em; padding-left: 8px; }
.meter { width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.meter b { font-size: 10.5px; letter-spacing: .14em; color: var(--gold2); }
.meter .bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.meter .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--coral), var(--gold)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.meter .num { font-size: 15px; font-weight: 800; }
.hbtns { display: flex; gap: 6px; }
.hbtn { width: 52px; height: 70px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.hbtn svg { width: 24px; height: 24px; } .hbtn span { font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.hbtn:hover { background: rgba(255,255,255,.12); }
.hbtn[disabled] { opacity: .3; pointer-events: none; }

/* ── hover label & cursor item ────────────────────────── */
.hover { position: absolute; padding: 5px 11px; border-radius: 999px; background: rgba(10, 23, 48, .88); border: 1px solid rgba(227,182,91,.6);
  font-weight: 600; font-size: 15px; letter-spacing: .02em; white-space: nowrap; transform: translate(-50%, -150%); opacity: 0; transition: opacity .12s;
  box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.hover.on { opacity: 1; } .hover em { font-style: normal; color: var(--gold2); font-weight: 800; margin-right: 6px; }
.curitem { position: absolute; width: 44px; height: 44px; transform: translate(6px, 6px); opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); font-size: 30px; line-height: 44px; text-align: center; }
.curitem.on { opacity: 1; } .curitem img, .curitem canvas { width: 44px; height: 44px; }

/* ── narrator & speech ────────────────────────────────── */
.narrator { position: absolute; left: 50%; top: 7%; transform: translateX(-50%) translateY(-10px); width: min(820px, calc(100vw - 40px));
  padding: 20px 28px 22px; border-radius: 16px; color: var(--ink); background: linear-gradient(180deg, #fffaf0, #f3e6c8);
  border: 2px solid var(--gold); box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,.5);
  font-family: var(--talk); font-size: 19px; line-height: 1.55; font-weight: 500; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: auto; }
.narrator.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.narrator .who { position: absolute; top: -13px; left: 22px; padding: 2px 12px; border-radius: 999px; background: var(--navy); color: var(--gold2);
  font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.more { position: absolute; right: 16px; bottom: 8px; font-size: 14px; color: #a0743a; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.bubble { position: absolute; max-width: min(440px, 46vw); padding: 14px 18px 15px; border-radius: 18px; background: var(--paper); color: var(--ink);
  font-family: var(--talk); font-size: 17.5px; line-height: 1.45; font-weight: 500; box-shadow: 0 12px 34px rgba(0,0,0,.45);
  transform: translate(-50%, -100%); border: 3px solid var(--c, var(--gold)); opacity: 0; transition: opacity .15s; pointer-events: auto; }
.bubble.on { opacity: 1; }
.bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -14px; transform: translateX(-50%); border: 12px solid transparent;
  border-top-color: var(--c, var(--gold)); border-bottom: 0; }
.bubble .name { position: absolute; top: -14px; left: 14px; background: var(--c, var(--gold)); color: #111; border-radius: 999px; padding: 2px 10px;
  font-family: var(--ui); font-weight: 800; font-size: 12px; letter-spacing: .14em; }
.bubble.top { transform: translate(-50%, 0); } .bubble.top::after { display: none; }

/* ── choices ──────────────────────────────────────────── */
.choices { position: absolute; left: 50%; bottom: calc(var(--hud-h) + 26px); transform: translateX(-50%); width: min(760px, calc(100vw - 30px));
  display: flex; flex-direction: column; gap: 8px; }
.choice { text-align: left; padding: 12px 18px; border-radius: 14px; background: rgba(10, 23, 48, .92); border: 1px solid rgba(227,182,91,.45);
  color: var(--cream); font-family: var(--talk); font-size: 17px; font-weight: 700; transition: transform .12s, background .12s, border-color .12s;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.choice:hover { transform: translateX(6px); background: rgba(29, 58, 107, .96); border-color: var(--gold2); }
.choice b { color: var(--gold2); margin-right: 10px; font-family: var(--ui); }

/* ── title cards / fades / toasts ─────────────────────── */
.fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s; pointer-events: none; }
.fade.on { opacity: 1; pointer-events: auto; }
.card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .8s; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,23,48,.75), rgba(0,0,0,.92)); }
.card.on { opacity: 1; }
.card .k { font-family: var(--ui); font-weight: 800; letter-spacing: .5em; color: var(--gold); font-size: clamp(13px, 1.6vw, 18px); }
.card .t { font-family: var(--title); font-style: italic; font-weight: 900; color: var(--paper); font-size: clamp(36px, 6vw, 84px); margin: 12px 0;
  text-shadow: 0 0 40px rgba(255,107,91,.45); text-align: center; padding: 0 20px; }
.card .s { font-family: var(--talk); font-size: clamp(14px, 1.6vw, 20px); opacity: .8; text-align: center; max-width: 760px; padding: 0 20px; line-height: 1.5; }
.toast { position: absolute; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 20px; color: #2b1300;
  background: linear-gradient(90deg, var(--gold2), var(--gold)); box-shadow: 0 6px 24px rgba(227,182,91,.6); transform: translate(-50%, 0);
  animation: toast 2.2s ease-out forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  70% { opacity: 1; transform: translate(-50%, -30px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px); } }
.note { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(10,23,48,.9);
  border: 1px solid rgba(227,182,91,.5); font-size: 15px; animation: note 3.2s ease forwards; }
@keyframes note { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
.censor { position: absolute; left: 0; right: 0; top: 50%; height: 120px; transform: translateY(-50%) scaleY(0); background: #000; display: flex; align-items: center;
  justify-content: center; font-family: var(--ui); font-weight: 800; font-size: 54px; letter-spacing: .4em; color: #fff; transition: transform .25s; }
.censor.on { transform: translateY(-50%) scaleY(1); }
.censor span { border: 4px solid #fff; padding: 2px 22px; }

/* ── overlays / menus ─────────────────────────────────── */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 8, 18, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ovin .25s ease; z-index: 10; }
@keyframes ovin { from { opacity: 0; } }
.menu { width: min(560px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow: auto; padding: 26px 28px 24px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(25, 48, 92, .97), rgba(9, 20, 42, .98)); border: 1px solid rgba(227,182,91,.6);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.menu.wide { width: min(980px, calc(100vw - 30px)); }
.menu h2 { margin: 0 0 4px; font-family: var(--title); font-style: italic; font-weight: 900; font-size: 34px; color: var(--paper); }
.menu h3 { margin: 18px 0 8px; font-size: 13px; letter-spacing: .2em; color: var(--gold2); }
.menu p { font-family: var(--talk); line-height: 1.5; opacity: .85; }
.mbtn { display: block; width: 100%; margin: 8px 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: var(--cream); font-size: 18px; font-weight: 800; letter-spacing: .08em; text-align: left; transition: all .15s; }
.mbtn:hover { background: linear-gradient(90deg, rgba(255,107,91,.9), rgba(217,71,58,.9)); border-color: var(--gold2); transform: translateX(4px); }
.mbtn small { display: block; font-size: 12.5px; font-weight: 400; letter-spacing: .02em; opacity: .7; margin-top: 3px; }
.mbtn.ghost { background: transparent; text-align: center; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tile { padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--cream); text-align: left; transition: all .15s; }
.tile:hover { border-color: var(--gold2); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.tile b { display: block; font-size: 12px; letter-spacing: .2em; color: var(--gold2); margin-bottom: 4px; }
.tile span { font-size: 16px; font-weight: 700; }
.tile small { display: block; margin-top: 4px; opacity: .65; font-size: 12.5px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 0; font-size: 16px; }
.row input[type=range] { width: 200px; accent-color: var(--coral); }
.seg { display: flex; gap: 4px; } .seg button { padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: var(--cream); font-weight: 800; }
.seg button.on { background: var(--coral); border-color: var(--gold2); }
.toggle { width: 52px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); position: relative; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: var(--coral); } .toggle.on::after { left: 27px; }
.parser { position: absolute; left: 50%; bottom: calc(var(--hud-h) + 24px); transform: translateX(-50%); width: min(640px, calc(100vw - 30px)); display: flex; gap: 8px; }
.parser input { flex: 1; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--gold); background: rgba(10,23,48,.95); color: var(--paper);
  font-family: var(--talk); font-size: 18px; outline: none; }
.parser button { padding: 0 20px; border-radius: 14px; border: 0; background: var(--coral); color: #fff; font-weight: 800; font-size: 16px; }

/* ── title screen ─────────────────────────────────────── */
.title-screen { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 7vw;
  background: linear-gradient(90deg, rgba(4,9,20,.82) 0%, rgba(4,9,20,.45) 45%, rgba(4,9,20,0) 75%); z-index: 8; }
.ts-inner { width: min(520px, 86vw); }
.ts-logo { font-family: var(--title); font-style: italic; font-weight: 900; font-size: clamp(48px, 7.4vw, 108px); line-height: .92; color: var(--paper);
  text-shadow: 0 0 34px rgba(255,107,91,.5), 0 5px 0 #b8433a, 0 9px 24px rgba(0,0,0,.6); }
.ts-logo span { display: block; font-size: .38em; line-height: 1.3; color: var(--gold); letter-spacing: .06em; text-shadow: 0 0 24px rgba(227,182,91,.45), 0 3px 0 #7a5418; }
.ts-sub { font-weight: 800; letter-spacing: .48em; color: var(--gold); margin: 14px 0 30px; font-size: clamp(14px, 1.7vw, 21px); }
.ts-foot { margin-top: 22px; font-size: 12px; opacity: .5; letter-spacing: .1em; }
.ts-btns { margin-top: 26px; }

/* ── death ────────────────────────────────────────────── */
.death { background: radial-gradient(ellipse at center, rgba(90, 0, 10, .85), rgba(0,0,0,.96)); }
.death .menu { border-color: #ff6b5b; text-align: center; }
.death h2 { color: #ffb4a8; }
.death .skull { font-size: 64px; margin-bottom: 6px; }

/* ── deck map ─────────────────────────────────────────── */
.map { width: min(1100px, calc(100vw - 30px)); }
.ship { position: relative; margin-top: 10px; aspect-ratio: 1100 / 430; width: 100%; }
.ship svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.deckroom { position: absolute; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(39, 198, 180, .16); color: var(--cream);
  font-size: clamp(9px, 1.1vw, 13px); font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; transition: all .15s; }
.deckroom:hover { background: rgba(255,107,91,.75); border-color: var(--gold2); transform: scale(1.04); z-index: 2; }
.deckroom.here { background: rgba(227,182,91,.65); color: #1a1000; border-color: var(--gold2); }
.deckroom.locked { background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); pointer-events: none; border-style: dashed; }

/* ── mini-games ───────────────────────────────────────── */
.mg { width: min(900px, calc(100vw - 30px)); padding: 22px 24px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(25,48,92,.97), rgba(8,18,38,.98));
  border: 1px solid rgba(227,182,91,.65); box-shadow: 0 30px 90px rgba(0,0,0,.65); position: relative; }
.mg h2 { margin: 0; font-family: var(--title); font-style: italic; font-weight: 900; font-size: 34px; color: var(--paper); }
.mg .sub { font-family: var(--talk); opacity: .8; margin: 4px 0 14px; }
.mg .hudline { display: flex; justify-content: space-between; font-weight: 800; letter-spacing: .1em; color: var(--gold2); margin: 6px 0; }
.mg canvas { width: 100%; border-radius: 14px; background: #050b16; display: block; }
.mg .btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mg .skip { position: absolute; top: 18px; right: 20px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--cream); opacity: .6; }
.mg .skip:hover { opacity: 1; }
.big { padding: 14px 22px; border-radius: 14px; border: 0; background: linear-gradient(180deg, var(--coral), #d9473a); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .08em;
  box-shadow: 0 8px 22px rgba(255,107,91,.45); }
.big:hover { filter: brightness(1.1); } .big[disabled] { opacity: .4; }
.ingr { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--cream); font-weight: 800; font-size: 16px; }
.ingr:hover { border-color: var(--gold2); background: rgba(255,255,255,.14); }
.ingr.ok { background: rgba(39,198,180,.45); } .ingr.bad { background: rgba(255,107,91,.6); }
.qopt { display: block; width: 100%; text-align: left; margin: 8px 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: var(--cream); font-size: 18px; font-weight: 700; font-family: var(--talk); }
.qopt:hover { border-color: var(--gold2); background: rgba(255,255,255,.13); }
.qopt.know { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(39,198,180,.35) inset; }
.qopt.know::after { content: '  ✓ ο Λάκης το θυμάται'; font-size: 12px; color: var(--teal); font-family: var(--ui); letter-spacing: .06em; }
.qopt.right { background: rgba(39,198,180,.5); } .qopt.wrong { background: rgba(255,107,91,.6); }
.dice { display: flex; gap: 40px; justify-content: center; align-items: center; margin: 14px 0; }
.die { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(145deg, #fffdf6, #e8dcc0); color: #1a1a1a; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 9px; box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.12); }
.die.gold { background: linear-gradient(145deg, #ffe7a3, #d4a23d); }
.die i { width: 10px; height: 10px; border-radius: 50%; background: #1a1a1a; align-self: center; justify-self: center; visibility: hidden; }
.die i.v { visibility: visible; }
.die.roll { animation: roll .5s ease-out; }
@keyframes roll { 0% { transform: rotate(0) scale(.6); } 60% { transform: rotate(540deg) scale(1.15); } 100% { transform: rotate(720deg) scale(1); } }
.arrows { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.arrow { width: 92px; height: 92px; border-radius: 22px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--cream); font-size: 44px; font-weight: 900; transition: all .1s; }
.arrow.lit { background: var(--coral); border-color: var(--gold2); box-shadow: 0 0 30px rgba(255,107,91,.8); transform: scale(1.08); }
.arrow.good { background: var(--teal); }

@media (max-width: 760px) {
  :root { --hud-h: 78px; }
  .verb { width: 46px; height: 58px; } .verb svg { width: 24px; height: 24px; } .verb span { font-size: 9px; }
  .slot { flex-basis: 54px; height: 54px; } .meter { width: 92px; } .hbtn { width: 42px; height: 58px; }
  .narrator { font-size: 16px; } .bubble { font-size: 15px; max-width: 70vw; }
}

/* ── phones & touch ───────────────────────────────────── */
/* «turn the phone»: a phone held upright (the game is played sideways) */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px; text-align: center; color: var(--cream); background: radial-gradient(ellipse at 50% 35%, #1d3a6b 0%, #0a1730 55%, #04080f 100%); }
#rotate .rot-t { font-family: var(--title); font-style: italic; font-weight: 900; font-size: 30px; color: var(--paper); text-shadow: 0 0 24px rgba(255,107,91,.5); }
#rotate .rot-s { font-family: var(--talk); font-size: 15px; line-height: 1.5; opacity: .8; max-width: 320px; }
.rot-phone { width: 62px; height: 104px; border: 4px solid var(--gold2); border-radius: 14px; position: relative; animation: rotphone 2.4s ease-in-out infinite; }
.rot-phone i { position: absolute; left: 50%; bottom: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--gold2); }
@keyframes rotphone { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) { #rotate { display: flex; } }
.mg canvas { touch-action: none; }
@media (hover: none) {
  .verb:hover, .hbtn:hover { transform: none; background: rgba(255,255,255,.05); }
  .slot:hover, .tile:hover { transform: none; } .choice:hover, .mbtn:hover { transform: none; }
}
.touch .ts-foot { opacity: .65; }

/* short screens = phones held sideways (and small windows): a compact HUD and text that leaves room for the scene */
@media (max-height: 540px) {
  :root { --hud-h: 60px; }
  .hud { bottom: max(6px, env(safe-area-inset-bottom)); width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin-left: calc((env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); padding: 5px 8px; gap: 6px; border-radius: 14px; }
  .verbs, .hbtns { gap: 4px; }
  .verb { width: 40px; height: 50px; border-radius: 10px; gap: 2px; } .verb svg { width: 22px; height: 22px; } .verb span { font-size: 8px; letter-spacing: .02em; }
  .inv { min-width: 70px; gap: 4px; }
  .slot { flex-basis: 46px; height: 46px; border-radius: 10px; } .slot img, .slot canvas { width: 40px; height: 40px; }
  .inv-empty { font-size: 11px; }
  .meter { width: 70px; gap: 2px; } .meter b { font-size: 7.5px; letter-spacing: .04em; } .meter .bar { height: 7px; } .meter .num { font-size: 12px; }
  .hbtn { width: 38px; height: 50px; border-radius: 10px; gap: 2px; } .hbtn svg { width: 20px; height: 20px; } .hbtn span { font-size: 7.5px; letter-spacing: .02em; }
  .hover { font-size: 13px; padding: 4px 9px; }
  .narrator { top: max(6px, env(safe-area-inset-top)); width: min(760px, calc(100vw - 24px)); padding: 11px 16px 13px; font-size: 15px; line-height: 1.45;
    max-height: calc(100vh - var(--hud-h) - 34px); max-height: calc(100dvh - var(--hud-h) - 34px); overflow-y: auto; }
  .narrator .who { font-size: 10.5px; top: -11px; }
  .bubble { font-size: 14px; line-height: 1.4; padding: 10px 13px 11px; max-width: min(380px, 50vw); }
  .bubble .name { font-size: 10.5px; top: -12px; }
  .choices { bottom: calc(var(--hud-h) + 14px); gap: 5px; width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - var(--hud-h) - 30px); max-height: calc(100dvh - var(--hud-h) - 30px); overflow-y: auto; }
  .choice { padding: 8px 13px; font-size: 14px; border-radius: 11px; }
  .card .t { font-size: clamp(28px, 11vh, 60px); margin: 6px 0; } .card .s { font-size: 14px; }
  .toast { font-size: 16px; }
  .menu { padding: 14px 18px 12px; max-height: calc(100vh - 14px); max-height: calc(100dvh - 14px); border-radius: 16px; }
  .menu h2 { font-size: 24px; } .menu h3 { margin: 10px 0 6px; } .menu p { font-size: 14px; margin: 6px 0; }
  .mbtn { padding: 9px 14px; margin: 5px 0; font-size: 15px; border-radius: 11px; } .mbtn small { font-size: 11px; }
  .row { margin: 6px 0; font-size: 14px; } .row input[type=range] { width: 150px; }
  .grid2 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; } .tile { padding: 9px 11px; } .tile span { font-size: 14px; }
  .title-screen { align-items: flex-start; overflow-y: auto; padding: max(10px, env(safe-area-inset-top)) 16px 12px max(5vw, env(safe-area-inset-left)); }
  .ts-inner { width: min(660px, 92vw); }
  .ts-logo { font-size: clamp(34px, 13vh, 66px); }
  .ts-btns { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .ts-btns .mbtn { margin: 4px 0; padding: 8px 12px; font-size: 14px; } .ts-btns .mbtn small { display: none; }
  .ts-foot { margin-top: 10px; font-size: 11px; }
  .parser { bottom: calc(var(--hud-h) + 12px); } .parser input { padding: 10px 14px; font-size: 16px; }
  .mg { padding: 12px 16px 12px; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; border-radius: 16px; }
  .mg h2 { font-size: 22px; padding-right: 70px; } .mg .sub { font-size: 13px; margin: 2px 0 6px; line-height: 1.35; } .mg .hudline { font-size: 12px; margin: 3px 0; }
  .mg canvas { width: auto; max-width: 100%; max-height: 46vh; max-height: 46dvh; margin: 0 auto; }
  .mg .btnrow { margin-top: 8px; } .mg .skip { top: 10px; right: 12px; }
  .big { padding: 10px 18px; font-size: 15px; } .qopt { padding: 9px 14px; margin: 5px 0; font-size: 15px; } .ingr { padding: 8px 11px; font-size: 14px; }
  .arrows { margin: 8px 0; gap: 10px; } .arrow { width: 68px; height: 68px; font-size: 32px; border-radius: 16px; }
  .dice { margin: 8px 0; } .die { width: 52px; height: 52px; padding: 7px; }
  .death .skull { font-size: 42px; }
}
/* the narrowest phones held sideways (iPhone SE, small Androids) */
@media (max-height: 540px) and (max-width: 720px) {
  .verb { width: 36px; } .verb span { font-size: 7px; } .hbtn { width: 34px; } .hbtn span { font-size: 6.5px; }
  .meter { width: 46px; } .meter b, .meter .bar { display: none; } .hud { gap: 4px; padding: 5px 6px; } .sep { margin: 0; }
}