/* ===========================================================
   IllicIsle — retro UI
   Type is Press Start 2P for chrome and Silkscreen for body copy;
   both are OFL and vendored in /fonts (see fonts/OFL.txt).
   =========================================================== */

@font-face{
  font-family:'PressStart';
  src:url('../fonts/pressstart2p.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Silkscreen';
  src:url('../fonts/silkscreen.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Silkscreen';
  src:url('../fonts/silkscreen-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:block;
}

:root{
  --gold:#ffd24a;
  --gold-dk:#a8761c;
  --gold-lt:#fff3c4;
  --ink:#0d0906;
  --panel:#17100a;
  --edge:#5c3f1c;
  --green:#7ec850;
  --red:#e0453a;
  --jade:#63c6a8;
  --paper:#e8d8b0;

  --f-title:'PressStart','Courier New',monospace;   /* chrome, labels, HUD  */
  --f-body:'Silkscreen','Courier New',monospace;    /* readable paragraphs  */
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:#000;
  color:var(--gold-lt);
  font-family:var(--f-body);
  overflow:hidden;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}

#viewport{ position:fixed; inset:0; background:#000; }

canvas#game{
  display:block; width:100%; height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.hidden{ display:none !important; }

/* ---------- generic screens ---------- */
.screen{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:20; text-align:center;
}
.panel-screen{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 2px, rgba(0,0,0,0) 2px 4px),
    rgba(6,4,2,.86);
}

/* Dithered fill + hard bevel, no gradients or blur — the checker is a
   2px ordered dither, the same trick the composite pass uses. */
.panel{
  background:
    repeating-conic-gradient(#221609 0% 25%, #1a1108 0% 50%) 0 0 / 4px 4px;
  border-style:solid;
  border-width:4px;
  border-color:#b08a3c #3a2610 #3a2610 #b08a3c;   /* lit top-left, dark bottom-right */
  outline:4px solid #000;
  padding:26px 30px 28px;
  width:min(92vw,640px);
  max-height:88vh; overflow:auto;
  image-rendering:pixelated;
}
.panel h2{
  font-family:var(--f-title);
  font-size:15px; letter-spacing:.16em; color:var(--gold);
  margin-bottom:22px; line-height:1.5;
  text-shadow:2px 2px 0 #000;
}
.tip{ font-size:14px; opacity:.7; margin:16px 0 6px; line-height:1.9; }

/* ---------- buttons ---------- */
.mbtn{
  display:block; width:100%;
  margin:10px 0; padding:14px 16px;
  font-family:var(--f-title);
  font-size:12px; letter-spacing:.06em; line-height:1.4;
  color:var(--gold-lt);
  background:repeating-conic-gradient(#2e1f10 0% 25%, #241809 0% 50%) 0 0 / 4px 4px;
  border-style:solid; border-width:3px;
  border-color:#8a6a2c #2a1a08 #2a1a08 #8a6a2c;
  cursor:pointer; text-align:center;
  image-rendering:pixelated;
}
.mbtn:hover,.mbtn:focus-visible{
  color:#1a1006;
  background:repeating-conic-gradient(#ffd24a 0% 25%, #e0b83c 0% 50%) 0 0 / 4px 4px;
  border-color:#fff3c4 #8a5c14 #8a5c14 #fff3c4;
  outline:none;
  animation:uiwobble .35s steps(2) infinite;
}
.mbtn:active{ transform:translateY(2px); }

/* The whole interface sat perfectly still, which is the giveaway. A
   sub-pixel drift on hover/idle gives it the instability of a real
   framebuffer. */
@keyframes uiwobble{ 0%{ transform:translate(0,0); } 50%{ transform:translate(1px,0); } }
.mbtn.danger:hover{ background:linear-gradient(180deg,#e0453a,#7a1d16); color:#fff; border-color:#ff9a90; }
.back-btn{ margin-top:24px; }

kbd{
  display:inline-block; min-width:2.1em;
  padding:3px 6px; margin:0 3px;
  font-family:var(--f-title); font-size:.72em; line-height:1.5;
  color:#1a1006;
  background:#e8cf7a;
  border-style:solid; border-width:2px;
  border-color:#fff3c4 #6b4a18 #6b4a18 #fff3c4;
  text-align:center;
  image-rendering:pixelated;
}

/* ---------- loading ---------- */
#loading{
  background:#000; z-index:60;
  /* It fades out on its own now rather than being switched off behind a
     keypress, so the last thing the loading screen does is get out of the
     way instead of vanishing. */
  transition: opacity .32s ease-out;
}
#loading.going{ opacity:0; pointer-events:none; }
.load-inner{ width:min(84vw,520px); }
.load-logo{
  font-family:var(--f-title);
  font-size:clamp(18px,4.2vw,30px); letter-spacing:.06em; color:var(--gold);
  text-shadow:4px 4px 0 #4a2f0c;
  margin-bottom:30px; line-height:1.6;
}
.load-bar{ height:20px; border:3px solid var(--edge); background:#0c0805; padding:3px; }
#load-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px,var(--gold-dk) 8px 12px);
  transition:width .18s steps(4);
}
.load-text{ font-family:var(--f-title); margin-top:18px; font-size:10px; letter-spacing:.06em; opacity:.85; min-height:1.4em; }
.load-hint{ font-family:var(--f-title); margin-top:38px; font-size:8px; letter-spacing:.08em; opacity:.32; animation:blink 1.6s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.08; } }

/* ---------- title ----------
   Three columns: type + menu on the left, the idol turning in the middle
   (that's the 3D scene showing through), lore cards on the right. The old
   layout left two thirds of the screen empty. */
#title{ background:transparent; z-index:30; pointer-events:none; align-items:stretch; justify-content:stretch; }
#title .title-menu{ margin:0; }
#title .mbtn{ text-align:left; padding-left:20px; }

.title-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: minmax(300px, 27vw) 1fr minmax(230px, 21vw);
  align-items:center;
  width:100%; height:100%;
  padding:4vh max(3vw,20px);
  gap:2vw;
}

.title-vign{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,4,2,.94) 0%, rgba(6,4,2,.70) 26%, rgba(6,4,2,0) 48%,
                           rgba(6,4,2,0) 62%, rgba(6,4,2,.78) 86%, rgba(6,4,2,.94) 100%),
    linear-gradient(180deg, rgba(6,4,2,.75) 0%, rgba(6,4,2,0) 22%, rgba(6,4,2,0) 74%, rgba(6,4,2,.85) 100%);
}
.title-inner{ pointer-events:auto; text-align:left; padding:0; width:100%; background:none; }

/* thin gold rule under the logo */
.title-rule{ display:flex; align-items:center; gap:8px; margin:2px 0 16px; opacity:.85; }
.title-rule i{ flex:1; height:3px; background:linear-gradient(90deg,transparent,var(--gold-dk),var(--gold)); }
.title-rule i:last-child{ background:linear-gradient(90deg,var(--gold),var(--gold-dk),transparent); }
.title-rule b{ width:9px; height:9px; background:var(--gold); transform:rotate(45deg); }

/* lore cards on the right */
.title-lore{
  /* Explicit column: it's the 2nd DOM child, so without this it lands in
     the middle track and sprawls across the idol. */
  grid-column:3;
  pointer-events:auto; display:flex; flex-direction:column; gap:14px;
  text-align:left;
}
.lore-card{
  border-left:4px solid var(--gold-dk);
  padding:10px 0 10px 14px;
  background:linear-gradient(90deg, rgba(8,5,3,.72), rgba(8,5,3,0));
}
.lore-card h3{
  font-family:var(--f-title); font-size:9px; letter-spacing:.1em;
  color:var(--gold); font-weight:normal; margin-bottom:8px; line-height:1.6;
}
.lore-card p{ font-size:13px; line-height:1.75; opacity:.78; text-align:left; }
.lore-card b{ color:var(--gold-lt); font-weight:normal; }

.title-marquee{
  margin-top:6px; overflow:hidden; white-space:nowrap;
  border-top:2px solid #3a2811; border-bottom:2px solid #3a2811;
  padding:8px 0; display:flex;
}
.title-marquee span{
  font-family:var(--f-title); font-size:7px; letter-spacing:.12em;
  color:var(--gold); opacity:.55;
  padding-right:1em;
  animation:march 16s linear infinite;
}
@keyframes march{ to{ transform:translateX(-100%); } }

@media (max-width:1000px){
  .title-grid{ grid-template-columns:1fr; align-content:center; }
  .title-lore{ display:none; }
}

.title-sup{
  font-family:var(--f-title);
  font-size:9px; letter-spacing:.32em; opacity:.66; margin-bottom:14px;
  text-shadow:2px 2px 0 #000;
}
.title-logo{
  font-family:var(--f-title);
  font-size:clamp(26px,5.6vw,52px);
  letter-spacing:.02em; line-height:1.14;
  color:var(--gold-lt);
  margin-bottom:12px;
  text-shadow:
     4px 4px 0 #2b1a06,
     0 0 18px rgba(255,190,60,.30);
}
.title-logo .l2{ display:block; color:var(--gold); }
.title-sub{
  font-family:var(--f-title);
  font-size:9px; letter-spacing:.16em; color:var(--gold); opacity:.88;
  margin-bottom:30px; line-height:1.8;
  text-shadow:2px 2px 0 #000;
}
.title-menu{ width:min(90%,360px); margin:0; }
.title-foot{
  font-family:var(--f-title);
  margin-top:26px; font-size:8px; letter-spacing:.08em; opacity:.42; line-height:2;
  text-shadow:2px 2px 0 #000;
}
#title-hint{ animation:blink 1.4s steps(1) infinite; color:var(--gold); }

/* ---------- controls table ---------- */
.ctrl-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ctrl-table td{ padding:9px 6px; border-bottom:2px dotted #3a2811; text-align:left; }
.ctrl-table td:first-child{ width:44%; text-align:right; padding-right:16px; white-space:nowrap; }
.ctrl-table td:last-child{ opacity:.8; }

/* ---------- options ---------- */
.opt-row{ margin:18px 0; text-align:left; }
.opt-row label{
  display:block; font-family:var(--f-title);
  font-size:9px; letter-spacing:.1em; color:var(--gold); opacity:.9; margin-bottom:9px;
}
.opt-choices{ display:flex; flex-wrap:wrap; gap:6px; }
.opt-choices button{
  flex:1 1 auto; padding:9px 8px;
  font-family:var(--f-title); font-size:8px; letter-spacing:.02em; line-height:1.5;
  color:var(--gold-lt); background:#221709; border:2px solid #3d2a12; cursor:pointer;
}
.opt-choices button:hover{ border-color:var(--gold); }
.opt-choices button.on{ background:linear-gradient(180deg,var(--gold),var(--gold-dk)); color:#1a1006; border-color:var(--gold-lt); }

/* ===========================================================
   The in-game HUD is no longer DOM — it is drawn on a canvas at the
   framebuffer's own resolution and composited inside the PS1 pass
   (js/lib/hud.js). Only full-screen panels remain in the document.
   =========================================================== */

/* ---------- lightning ---------- */
#lightning{ position:fixed; inset:0; z-index:12; background:#dfeaff; opacity:0; pointer-events:none; }
#lightning.on{ animation:bolt .5s steps(6); }
@keyframes bolt{
  0%{ opacity:.75; } 12%{ opacity:.05; } 22%{ opacity:.55; }
  36%{ opacity:.03; } 100%{ opacity:0; }
}

/* ---------- reader ---------- */
#reader{ background:rgba(4,3,1,.6); z-index:25; align-items:flex-end; }
.reader-box{
  width:min(92vw,760px); margin-bottom:6vh;
  background:repeating-conic-gradient(#e6d6ac 0% 25%, #dccb9e 0% 50%) 0 0 / 4px 4px;
  color:#2b1d0c;
  border-style:solid; border-width:4px;
  border-color:#f4e8c4 #7a5a24 #7a5a24 #f4e8c4;
  outline:4px solid #120b05;
  padding:20px 26px 16px; text-align:left;
  image-rendering:pixelated;
}
.reader-head{
  font-family:var(--f-title); font-size:10px; letter-spacing:.06em; color:#6b4a18;
  border-bottom:3px solid #b39a68; padding-bottom:11px; margin-bottom:14px; line-height:1.6;
}
.reader-body{ font-size:17px; line-height:1.75; min-height:5.4em; white-space:pre-wrap; }
.reader-foot{ margin-top:14px; text-align:right; font-family:var(--f-title); font-size:8px; color:#7a5a24; }

/* ---------- journal ---------- */
.journal-panel{ text-align:left; }
#journal-entries{ display:flex; flex-direction:column; gap:16px; }
.jentry{ border-left:4px solid var(--gold-dk); padding:8px 0 8px 16px; }
.jentry h3{ font-family:var(--f-title); font-size:9px; letter-spacing:.06em; color:var(--gold); margin-bottom:10px; font-weight:normal; line-height:1.7; }
.jentry p{ font-size:15px; line-height:1.75; opacity:.88; white-space:pre-wrap; }
.jentry.locked{ border-color:#3a2811; opacity:.42; }

/* ---------- map ---------- */
#map{ z-index:26; }
.map-panel{ text-align:center; }
#map-canvas{
  display:block; width:min(78vw,520px); height:auto; margin:0 auto;
  image-rendering:pixelated;
  border:4px solid #5c3f1c; box-shadow:0 0 0 4px #120b05;
}
.map-legend{ margin-top:16px; font-size:14px; line-height:1.9; opacity:.82; text-align:left; }
.map-legend b{ color:var(--gold); font-weight:normal; }

/* ---------- dial puzzle ---------- */
#dials{ z-index:27; }
.dial-row{ display:flex; gap:14px; justify-content:center; margin:26px 0 10px; }
.dial{
  width:74px; height:92px;
  background:linear-gradient(180deg,#3b2f22,#241b12);
  border:3px solid var(--edge);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:6px;
}
.dial.sel{ border-color:var(--gold); background:linear-gradient(180deg,#4d3c26,#2c2115); }
.dial canvas{ image-rendering:pixelated; width:48px; height:48px; }
.dial span{ font-family:var(--f-title); font-size:8px; opacity:.6; }
.dial.ok{ border-color:var(--jade); }

/* ---------- shop ---------- */
.shop-panel{ text-align:left; }
.shop-quote{ margin-top:-8px; font-style:italic; }
.shop-purse{
  font-family:var(--f-title); font-size:10px; letter-spacing:.1em;
  color:var(--gold); margin:14px 0 16px; text-align:right;
}
.shop-purse b{ color:var(--gold-lt); font-weight:normal; }
#shop-list{ display:flex; flex-direction:column; gap:10px; }
.shop-row{
  display:grid; grid-template-columns:1fr auto; gap:4px 14px;
  padding:14px 16px; text-align:left; cursor:pointer;
  background:repeating-conic-gradient(#2e1f10 0% 25%, #241809 0% 50%) 0 0 / 4px 4px;
  border-style:solid; border-width:3px;
  border-color:#8a6a2c #2a1a08 #2a1a08 #8a6a2c;
  color:var(--gold-lt);
  font-family:var(--f-body);
  image-rendering:pixelated;
}
.shop-row:hover{ border-color:var(--gold); }
.shop-name{ font-family:var(--f-title); font-size:10px; letter-spacing:.06em; line-height:1.6; }
.shop-desc{ grid-column:1; font-size:14px; opacity:.7; }
.shop-cost{
  grid-row:1 / span 2; align-self:center;
  font-family:var(--f-title); font-size:12px; color:var(--gold);
}
.shop-row.broke{ opacity:.45; cursor:not-allowed; }
.shop-row.broke .shop-cost{ color:var(--red); }
.shop-row.owned{ opacity:.5; cursor:default; border-color:#2f5a48; }
.shop-row.owned .shop-cost{ color:var(--jade); }

/* ---------- lightning ---------- */
#lightning{ position:absolute; inset:0; background:#dfeaff; opacity:0; pointer-events:none; }
#lightning.on{ animation:bolt .5s steps(6); }
@keyframes bolt{
  0%{ opacity:.75; } 12%{ opacity:.05; } 22%{ opacity:.55; }
  36%{ opacity:.03; } 100%{ opacity:0; }
}

.big-time{
  display:block; font-family:var(--f-title); font-size:26px;
  color:var(--gold); text-shadow:3px 3px 0 #2b1a06; margin-bottom:14px;
}

/* ---------- death ---------- */
#death{ background:rgba(30,4,2,.88); z-index:40; }
.death-title{
  font-family:var(--f-title);
  font-size:clamp(22px,5.4vw,46px); letter-spacing:.06em; color:#c8352a;
  text-shadow:5px 5px 0 #2b0603;
  animation:deathin 1.1s ease-out; line-height:1.5;
}
@keyframes deathin{ from{ opacity:0; letter-spacing:.6em; } }
.death-sub{ margin:22px 0 32px; font-size:16px; opacity:.75; }
#death .mbtn{ width:min(80vw,320px); margin:0 auto; }

/* ---------- ending ---------- */
#ending{ background:radial-gradient(ellipse at 50% 40%, #3a2606 0%, #100a04 70%); z-index:40; overflow:auto; }
.ending-inner{ padding:6vh 20px; width:min(92vw,640px); }
.ending-kicker{ font-family:var(--f-title); font-size:9px; letter-spacing:.2em; color:var(--gold); opacity:.8; margin-bottom:18px; }
.ending-title{
  font-family:var(--f-title);
  font-size:clamp(18px,3.8vw,34px); line-height:1.7; letter-spacing:.02em;
  color:var(--gold-lt); text-shadow:4px 4px 0 #2b1a06;
  margin-bottom:26px;
}
.ending-title span{ color:var(--gold); }
.ending-stats{ font-size:15px; line-height:2.1; opacity:.85; margin-bottom:24px; }
.ending-stats b{ color:var(--gold); font-weight:normal; }
.ending-text{ font-size:15px; line-height:2; opacity:.75; margin-bottom:28px; }
#ending .title-menu{ width:min(80vw,320px); }
.ending-foot{ font-family:var(--f-title); margin-top:28px; font-size:8px; letter-spacing:.1em; opacity:.4; }

/* ---------- intro cinematic ---------- */
#intro{ z-index:35; background:transparent; pointer-events:none; }
#intro .intro-bars{ position:absolute; inset:0; }
#intro .intro-bars::before,#intro .intro-bars::after{
  content:''; position:absolute; left:0; right:0; height:11vh; background:#000;
}
#intro .intro-bars::before{ top:0; } #intro .intro-bars::after{ bottom:0; }
#intro-text{
  position:absolute; left:50%; bottom:18vh; transform:translateX(-50%);
  width:min(88vw,720px); text-align:center;
  font-size:19px; line-height:1.9;
  text-shadow:3px 3px 0 #000, 0 0 14px rgba(0,0,0,.9);
  opacity:0; transition:opacity .6s;
}
#intro-text.on{ opacity:1; }
#intro-skip{
  position:absolute; right:24px; bottom:13vh;
  font-family:var(--f-title); font-size:8px; opacity:.5;
  text-shadow:2px 2px 0 #000;
}

/* ---------- misc ---------- */
#nomobile{ background:#0a0603; z-index:70; }

@media (max-width:820px){
  #objective{ max-width:70vw; }
  #compass{ width:66vw; }
  .title-logo{ font-size:clamp(22px,7vw,34px); }
}