/* ui-pixel.css — pixel-art skin for the HD-2D game UI. Link AFTER style.css.
   One pixel grid: every art pixel = 2 CSS px. Frames are 9-slice PNGs pre-scaled x2 (ui/*.png)
   with border-image-width equal to the slice, so the browser never resamples them.
   Body text uses "Pergamino Pixel" (fonts/, OFL, from Cormorant Garamond rasterized at 14 px)
   at 28 px (x2) so its pixels land on the same grid. Titles stay in Cinzel. */

@font-face{font-family:'Pergamino Pixel';font-style:normal;font-weight:300 800;font-display:block;src:url(fonts/PergaminoPixel-Regular.ttf) format('truetype')}
@font-face{font-family:'Pergamino Pixel';font-style:italic;font-weight:300 800;font-display:block;src:url(fonts/PergaminoPixel-Regular.ttf) format('truetype')}

:root{
  --px:'Pergamino Pixel', var(--serif);
  --px-ink:#05070f; --px-night:#0b0e1e;
  --px-gold:#e2c989; --px-gold-hi:#fff1c4; --px-gold-dk:#8a6a32;
  --px-brass:#e2b34a; --px-brass-hi:#f6dc8a;
  --px-text:#f4efe4;
  --px-drop:drop-shadow(0 4px 0 rgba(3,4,10,.55));
}

/* shared: crisp pixels, square corners, pixel focus ring */
.dialog,.panel,.obj,.abtn,.tbtn,.big,.link,.choice,.meter-bar,.meter-fill,.dlg-por,.dlg-name,.dlg-more,.opt,.ch-grid button,.skip{image-rendering:pixelated;border-radius:0;-webkit-font-smoothing:antialiased}
:is(.obj,.abtn,.tbtn,.big,.link,.choice,.opt,.tab,.ch-grid button,.skip):focus-visible{outline:4px solid var(--px-gold-hi);outline-offset:2px;box-shadow:0 0 0 8px var(--px-ink)}

/* ---------- dialogue ---------- */
.dialog{
  width:min(94vw,900px);width:round(down,min(94vw,900px),4px);
  border:22px solid transparent;border-image:url(ui/plate.png) 22 fill / 22px stretch;
  background:none;box-shadow:none;filter:var(--px-drop);
  padding:2px 14px 4px 6px;gap:16px;
}
.dlg-frame{display:none}
.dlg-por{
  width:100px;height:100px;aspect-ratio:auto;margin-top:0;
  border:10px solid transparent;border-image:url(ui/btn.png) 10 / 10px stretch;
  background:radial-gradient(circle at 50% 40%,#2a3058 0 34%,#1a1f3e 34% 60%,#0c0e1e 60%) padding-box;box-shadow:none;
}
.dlg-name{
  margin:0 0 6px;padding:0 8px;
  border:10px solid transparent;border-image:url(ui/tag.png) 10 fill / 10px stretch;background:none;
  font:700 16px/20px var(--caps);letter-spacing:.08em;color:#efdcaa;
}
.dlg-text{font:400 28px/42px var(--px);font-style:normal;color:var(--px-text);min-height:84px;text-shadow:2px 2px 0 var(--px-ink)}
.dlg-choices{gap:6px;margin-top:8px}
.dlg-more{
  right:22px;bottom:12px;width:18px;height:12px;border:0;
  background:url(ui/more.png) 0 0/18px 12px no-repeat;
}
.dialog.ready .dlg-more{opacity:1;animation:pxBob 1s steps(1,end) infinite}
@keyframes pxBob{50%{transform:translateY(4px)}}
/* last box of a conversation: a solid pixel square (■) instead of the arrow, so it reads «that's all» */
.dialog.last .dlg-more{width:12px;height:12px;right:25px;bottom:12px;background:var(--px-text,#f4e8c8);box-shadow:2px 2px 0 var(--px-ink,#000);animation:none}
.dialog.last.ready .dlg-more{animation:pxBlink 1.2s steps(1,end) infinite}
@keyframes pxBlink{50%{opacity:.35}}

/* choices: night button, pixel pointer; selected = bright frame */
.choice{
  min-height:48px;padding:0 12px 0 6px;gap:10px;
  border:10px solid transparent;border-image:url(ui/btn.png) 10 fill / 10px stretch;background:none;
  font:400 28px/36px var(--px);font-style:normal;color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink);
  transition:none;
}
.choice::before{width:12px;height:18px;border:0;transform:none;background:url(ui/cursor.png) 0 0/12px 18px no-repeat;opacity:.3}
.choice:hover,.choice.sel{background:none;border-image-source:url(ui/btn-hi.png)}
.choice.sel::before,.choice:hover::before{background:url(ui/cursor.png) 0 0/12px 18px no-repeat;opacity:1}
.choice:active{transform:translateY(2px)}

/* ---------- panels (pause, end) ---------- */
.panel{
  border:22px solid transparent;border-image:url(ui/plate.png) 22 fill / 22px stretch;
  background:none;box-shadow:none;filter:var(--px-drop);
  padding:clamp(6px,3vw,20px);
}
.panel h2{text-shadow:0 4px 0 var(--px-ink)}
.tab{font-family:var(--caps);border-bottom-width:4px;margin-bottom:-2px;transition:none}
.tabs{border-bottom:2px solid var(--px-gold-dk)}
.opt{
  min-height:52px;padding:0 10px;
  border:10px solid transparent;border-image:url(ui/tag.png) 10 fill / 10px stretch;background:none;
  font:400 28px/1 var(--px);color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink);transition:none;
}
.opt:hover{background:none;border-image-source:url(ui/btn-hi.png)}
.ch-grid button{
  border:10px solid transparent;border-image:url(ui/btn.png) 10 fill / 10px stretch;background:none;
  font:400 28px/32px var(--px);transition:none;padding:4px;
}
.ch-grid button:hover:not(:disabled){background:none;border-image-source:url(ui/btn-hi.png)}
.ch-grid button:active:not(:disabled){transform:translateY(2px)}

/* ---------- buttons ---------- */
.big{
  min-height:58px;padding:0 1.6em;
  border:14px solid transparent;border-image:url(ui/brass.png) 14 fill / 14px stretch;background:none;
  font:700 22px/1 var(--caps);letter-spacing:.14em;color:var(--px-gold-hi);
  text-shadow:2px 2px 0 #2a170b;box-shadow:none;filter:var(--px-drop);transition:none;
}
.big:hover{color:#fff;border-image-source:url(ui/brass-hi.png);box-shadow:none}
.big:active{transform:translateY(2px);filter:drop-shadow(0 2px 0 rgba(3,4,10,.55))}
.link{
  min-height:48px;padding:0 14px;
  border:10px solid transparent;border-image:url(ui/tag.png) 10 fill / 10px stretch;background:none;
  font:400 28px/1 var(--px);color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink);transition:none;
}
.link:hover{background:none;border-image-source:url(ui/btn-hi.png)}
.link:active{transform:translateY(2px)}
.skip{
  min-height:48px;padding:0 14px;
  border:10px solid transparent;border-image:url(ui/tag.png) 10 fill / 10px stretch;background:none;
  font:400 28px/1 var(--px);color:var(--px-text);transition:none;
}
.skip:hover{color:var(--px-gold-hi);border-image-source:url(ui/btn-hi.png)}

/* round top buttons: pixel disc, crisp icon strokes */
.tbtn{width:48px;height:48px;border:0;background:url(ui/tbtn.png) 0 0/48px 48px no-repeat;box-shadow:none;filter:var(--px-drop);transition:none}
.tbtn:hover{background-image:url(ui/tbtn-hi.png)}
.tbtn:active{transform:translateY(2px)}
.tbtn svg{width:24px;height:24px;shape-rendering:crispEdges;stroke-width:2}

/* action button: brass plate on leather */
.abtn{
  min-width:92px;height:92px;padding:0 12px;
  border:14px solid transparent;border-image:url(ui/brass.png) 14 fill / 14px stretch;background:none;
  font:700 18px/1 var(--caps);color:var(--px-gold-hi);text-shadow:2px 2px 0 #2a170b;
  box-shadow:none;filter:var(--px-drop);transition:opacity 200ms;
}
body.desk .abtn{height:64px;min-width:64px;border-radius:0}
.abtn.on{transform:translateY(4px);filter:none}
.abtn:hover:not(.dim){border-image-source:url(ui/brass-hi.png);box-shadow:none}
.abtn.pulse{animation:pxPulse 1.2s steps(1,end) infinite}
@keyframes pxPulse{50%{box-shadow:0 0 0 4px var(--px-ink),0 0 0 8px rgba(255,241,196,.7)}}

/* objective tag */
.obj{
  min-height:48px;padding:0 14px 0 8px;
  border:10px solid transparent;border-image:url(ui/tag.png) 10 fill / 10px stretch;background:none;
  font:400 28px/1 var(--px);color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink);
}
.obj:hover{background:none;border-image-source:url(ui/btn-hi.png)}
.obj-ic{width:12px;height:12px;transform:none;border:0;background:var(--px-gold);box-shadow:inset -2px -2px 0 var(--px-gold-dk),inset 2px 2px 0 var(--px-gold-hi)}
.obj-ic::after{display:none}
.obj.min{max-width:52px;padding:0 0 0 10px}
@keyframes objPing{50%{box-shadow:0 0 0 4px var(--px-ink),0 0 0 6px var(--px-gold-hi)}}
.obj.new .obj-ic{animation:objPing 900ms steps(1,end) 2}

/* meter */
.meter-lab{font:400 28px/1 var(--px);margin-bottom:6px;text-shadow:2px 2px 0 var(--px-ink)}
.meter-bar{height:20px;border:4px solid transparent;border-image:url(ui/meter.png) 4 fill / 4px stretch;background:none;box-shadow:none;filter:var(--px-drop)}
.meter-fill{background:url(ui/meter-fill.png) 0 0/2px 12px repeat-x;box-shadow:none}

/* chapter card: banded radial + ordered-dither grain */
.card{background:url(ui/dither.png) 0 0/4px 4px repeat,radial-gradient(ellipse at center,#1b2140 0 18%,#141a30 18% 36%,#0b0e1e 36% 56%,#070a16 56% 76%,#03040a 76%)}
.card-t{font:400 56px/72px var(--px);font-style:normal;text-shadow:4px 4px 0 #03040a}

@media (max-width:600px){
  .dialog{padding:0 2px 2px 0;gap:10px}
  .dlg-por{width:76px;height:76px}
  .dlg-text{line-height:40px;min-height:80px}
  .dlg-name{font-size:14px;line-height:18px}
  .choice{line-height:34px}
  .card-t{font-size:42px;line-height:57px}
  .ch-grid button{font-size:28px;line-height:30px}
}
@media (prefers-reduced-motion: reduce){
  .dialog.ready .dlg-more,.dialog.last.ready .dlg-more,.abtn.pulse,.obj.new .obj-ic{animation:none}
}

/* objective box: always on in play; struck old line + glinting new one; a 2-line checklist; hidden in pause, dimmed in dialogue */
.obj{position:absolute;overflow:hidden}
.obj-t{display:flex;flex-direction:column;gap:2px}
.obj.multi{min-height:auto;padding-top:4px;padding-bottom:4px;align-items:flex-start}
.obj.multi .obj-ic{display:none}
.obj-row{display:flex;align-items:center;gap:8px;white-space:nowrap}
.obj-box{flex:none;width:12px;height:12px;background:var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-gold)}
.obj-row.done{opacity:.7;text-decoration:line-through;text-decoration-thickness:2px}
.obj-row.done .obj-box{background:var(--px-gold);box-shadow:inset -2px -2px 0 var(--px-gold-dk)}
.obj-prev{position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;animation:objOut 650ms steps(6,end) forwards}
.obj-prev::after{content:'';position:absolute;left:0;top:52%;height:3px;background:var(--px-gold-hi);animation:objStrike 300ms steps(5,end) forwards}
@keyframes objStrike{from{width:0}to{width:100%}}
@keyframes objOut{0%,45%{opacity:1}100%{opacity:0}}
.obj.enter .obj-t{animation:objIn 650ms steps(6,end) both}
@keyframes objIn{0%,40%{opacity:0;transform:translateX(-10px)}70%{opacity:1;text-shadow:2px 2px 0 var(--px-ink),0 0 10px var(--px-gold-hi)}100%{opacity:1;transform:none}}
body.paused .obj{visibility:hidden}
body.dlg .obj{opacity:.55}
@media (max-width:600px){
  .obj{font-size:20px;min-height:36px;max-width:calc(100vw - 132px)}
  .obj-t{flex-direction:row;gap:12px}
  .obj.multi .obj-row.done{display:none}
  .obj.multi .obj-row:not(.done)~.obj-row:not(.done){display:none}
}
@media (prefers-reduced-motion: reduce){.obj.enter .obj-t,.obj-prev,.obj-prev::after{animation:none}}

/* short landscape phones (e.g. 844×390): a compact dialogue box so both speakers stay visible above it */
@media (max-height:520px) and (orientation:landscape){
  .dialog{min-height:0;width:min(78vw,760px);padding:6px 10px;gap:10px}
  .dlg-por{width:52px;height:52px}
  .dlg-name{font-size:13px;line-height:16px;margin:0 0 2px}
  .dlg-text{font-size:18px;line-height:24px;min-height:48px}
  .obj{font-size:18px;min-height:32px}
}

/* G.say: an important line during play (closes by itself, never blocks): no ▼, a thin progress line at the bottom */
.dialog.aside .dlg-more{display:none}
.dialog.aside{opacity:.96}
.dialog.aside::after{content:'';position:absolute;left:18px;right:18px;bottom:6px;height:2px;background:var(--px-gold);opacity:.5;transform-origin:left;animation:asideBar 3s linear forwards}
@keyframes asideBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.dialog.aside::after{animation:none}}

/* «momento de lección» (v2): a UI layer over the post chain — opaque pixel letters with a 2 px dark outline on a dark band;
   «Has aprendido…» small and gold, the lesson big and gold, the master's line in italics; ▼ after 2 s */
.lesson{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(48px,12vh,130px);opacity:0;transition:opacity 350ms;pointer-events:auto;background:radial-gradient(ellipse at center,transparent 30%,rgba(3,4,10,.6) 100%)}
.lesson.on{opacity:1}
.lesson-band{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100vw,980px);padding:18px 16px 26px;background:linear-gradient(180deg,rgba(6,7,16,0) 0,rgba(6,7,16,.82) 18%,rgba(6,7,16,.82) 82%,rgba(6,7,16,0) 100%)}
.lesson-pre{font:400 clamp(18px,2.4vw,26px)/1 var(--px);color:#e2c37a;text-shadow:2px 0 0 #1a0f04,-2px 0 0 #1a0f04,0 2px 0 #1a0f04,0 -2px 0 #1a0f04,2px 2px 0 #1a0f04}
.lesson-pre span{opacity:0;animation:lesIn2 1ms linear forwards;animation-delay:calc(var(--i) * 55ms + 200ms)}
.lesson-word{font:400 clamp(30px,6.2vw,72px)/1.05 var(--px);letter-spacing:.04em;color:#ffd86a;text-align:center;text-shadow:2px 0 0 #2a1704,-2px 0 0 #2a1704,0 2px 0 #2a1704,0 -2px 0 #2a1704,2px 2px 0 #2a1704,-2px -2px 0 #2a1704,4px 4px 0 rgba(0,0,0,.6),0 0 22px rgba(255,216,106,.55);image-rendering:pixelated}
.lesson-word span{display:inline-block;white-space:pre;opacity:0;transform:scale(.6);animation:lesPop 260ms steps(3,end) forwards;animation-delay:calc(var(--i) * 45ms + 1000ms)}
@keyframes lesIn2{to{opacity:1}}
@keyframes lesPop{60%{opacity:1;transform:scale(1.18);filter:brightness(1.9)}100%{opacity:1;transform:none;filter:none}}
.lesson-line{font:italic 400 clamp(15px,2vw,22px)/1.35 var(--px);color:#f4ead2;max-width:min(92vw,720px);text-align:center;text-shadow:2px 0 0 #120b04,-2px 0 0 #120b04,0 2px 0 #120b04,0 -2px 0 #120b04;opacity:0;animation:lesIn2 1ms linear 2000ms forwards}
.lesson-more{position:absolute;right:20px;bottom:6px;color:#ffd86a;font:400 18px/1 var(--px);opacity:0}
.lesson.more .lesson-more{opacity:1;animation:pxBob 1s steps(1,end) infinite}
.lesson::before{content:'';position:absolute;left:50%;top:calc(clamp(48px,12vh,130px) + 70px);width:10px;height:10px;margin:-5px;background:#ffe9a8;box-shadow:0 0 18px 8px rgba(255,216,106,.8);opacity:0}
.lesson.absorb::before{animation:lesFly 800ms ease-in forwards}
@keyframes lesFly{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;left:var(--tx);top:var(--ty);transform:scale(2.4)}}
.lesson.rm .lesson-word span,.lesson.rm .lesson-pre span,.lesson.rm .lesson-line{animation:none;opacity:1;transform:none}
.lesson.rm::before,.lesson.rm.absorb::before{animation:none;opacity:0}
.lesson.echo{background:none;pointer-events:none}
.lesson.echo .lesson-band{background:none}
.lesson.echo .lesson-word{font-size:clamp(26px,4.6vw,56px)}
.lesson.echo .lesson-word span{animation-delay:calc(var(--i) * 30ms)}
.diary .virtues{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin-top:10px}
.diary .virtues b{width:100%;color:var(--px-gold)}
.diary .virtue{padding:2px 8px;border:2px solid var(--px-gold);color:#ffd86a;font:400 18px/1.3 var(--px)}

/* Merlín's spell bubble: big, wavy pixel letters with a magic shimmer */
.bark.spell{font:400 clamp(20px,2.4vw,30px)/1.2 var(--px);color:#fff2c0;background:rgba(40,24,90,.92);border:2px solid #b9a6ff;box-shadow:0 0 14px rgba(185,166,255,.6);padding:6px 12px;animation:spellWave 1.2s ease-in-out infinite}
@keyframes spellWave{0%,100%{transform:translate(-50%,-100%) rotate(-1.5deg)}50%{transform:translate(-50%,-104%) rotate(1.5deg);text-shadow:0 0 8px #ffe9a8}}
@media (prefers-reduced-motion: reduce){.bark.spell{animation:none}}
.lesson-word .lw{display:inline-block;white-space:nowrap}
.lesson-word{white-space:normal}

/* a mentor's voice remembered (climax of VII): ethereal glowing border, ghostly portrait with a halo */
.dialog.memory{box-shadow:0 0 0 2px rgba(190,220,255,.55),0 0 22px 6px rgba(150,190,255,.35);background-color:rgba(10,14,34,.86)}
.dialog.memory .dlg-por{opacity:.8;filter:drop-shadow(0 0 6px rgba(200,225,255,.9)) saturate(.7)}
.dialog.memory .dlg-text{color:#eaf2ff;font-style:italic}
.dialog.memory::after{display:none}
@media (prefers-reduced-motion: no-preference){.dialog.memory{animation:memGlow 2.4s ease-in-out infinite}}
@keyframes memGlow{50%{box-shadow:0 0 0 2px rgba(190,220,255,.8),0 0 30px 10px rgba(150,190,255,.45)}}

/* climax of VII: one small gold virtue word at a time, beside Verruga, that drifts into his chest (positioned per frame in ch7.js) */
.virtueDrop{position:fixed;left:-999px;top:-999px;z-index:24;pointer-events:none;opacity:0;white-space:nowrap;font:400 clamp(14px,1.7vw,21px)/1 var(--px);letter-spacing:.12em;color:#ffe08a;text-shadow:1px 0 0 #2a1704,-1px 0 0 #2a1704,0 1px 0 #2a1704,0 -1px 0 #2a1704,0 0 10px rgba(255,214,110,.85),0 0 22px rgba(255,190,80,.45);will-change:transform,opacity}
.virtueDrop.rm{text-shadow:1px 0 0 #2a1704,-1px 0 0 #2a1704,0 1px 0 #2a1704,0 -1px 0 #2a1704,0 0 8px rgba(255,214,110,.7)}

/* the book waits for the reader: a breathing ▼ at the bottom right once a page is written */
.book-more{position:fixed;right:clamp(18px,4vw,48px);bottom:clamp(64px,10vh,96px);z-index:30;font:400 28px/1 var(--px);color:#ffd86a;text-shadow:2px 2px 0 #2a1704,0 0 10px rgba(255,216,106,.6);opacity:0;transition:opacity 300ms;pointer-events:none}
.book-more.on{opacity:1;animation:pxBob 1s steps(1,end) infinite}
@media (prefers-reduced-motion: reduce){.book-more.on{animation:none}}
/* bubbles fade when their speaker leaves the frame or is too far away */
.bark{transition:opacity 200ms}