/* Lullaby Lake : interface of the approved mock-up v2 (maquette/v2). Everything is measured in --u = 1/480 of the picture width
   (one pixel of the 480x270 picture), with pixel floors under every text size (ARCHITECTURE section 5). */
@font-face {
  font-family: "Pixelify Sans";
  src: url("../vendor/fonts/pixelify-sans/pixelify-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
:root { --fs: 1; --target: 44px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e0a20; color: #fdf2dc; font-family: "Pixelify Sans", monospace; font-weight: 400; }
body { overflow: hidden; }
[hidden] { display: none !important; }
#wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#stage {
  --u: calc(100cqw / 480);
  --t-body: max(calc(14px * var(--fs)), calc(var(--u) * 8.5 * var(--fs)));
  --t-msg: max(calc(14px * var(--fs)), calc(var(--u) * 10 * var(--fs)));
  --t-btn: max(calc(14px * var(--fs)), calc(var(--u) * 10 * var(--fs)));
  --t-h2: max(calc(18px * var(--fs)), calc(var(--u) * 14 * var(--fs)));
  --t-card: max(calc(18px * var(--fs)), calc(var(--u) * 17 * var(--fs)));
  --t-small: max(calc(12px * var(--fs)), calc(var(--u) * 7.4 * var(--fs)));
  --t-sub: max(calc(14px * var(--fs)), calc(var(--u) * 11 * var(--fs)));
  position: relative; width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9; container-type: inline-size; background: #1b1840; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
canvas#scene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; outline: none; }
canvas#scene:focus-visible { outline: max(2px, .4cqw) solid #ffd987; outline-offset: calc(-1 * max(2px, .4cqw)); }
.vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 52%, transparent 58%, #120c2acc 100%); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.scr { position: absolute; inset: 0; display: none; }
.scr.on { display: block; }
#s-game { pointer-events: auto; }
.ui { font-size: var(--t-body); line-height: 1.2; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #130f2c; -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
button, input, label { font: inherit; }
:focus-visible { outline: max(2px, calc(var(--u) * 1)) dashed #fff; outline-offset: calc(var(--u) * 2); }
.dim { position: absolute; inset: 0; background: #130f2cbd; }
.center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }

/* 9-slice pixel frames, images generated by code (ui/frames.js) */
.panel { border-style: solid; border-width: calc(var(--u) * 4); border-image: var(--bi-panel) 4 fill / calc(var(--u) * 4) stretch; image-rendering: pixelated; padding: calc(var(--u) * 4) calc(var(--u) * 6); }
.btn {
  color: #2a1c30; font-size: var(--t-btn); text-shadow: none; background: none; cursor: pointer; padding: calc(var(--u) * 3) calc(var(--u) * 12);
  border-style: solid; border-width: calc(var(--u) * 3); border-image: var(--bi-btn) 3 fill / calc(var(--u) * 3) stretch; image-rendering: pixelated;
  min-height: var(--target); min-width: var(--target);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(calc(var(--u) * 1)); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }
.btn.alt { color: #fdf2dc; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #130f2c; border-image: var(--bi-btn2) 3 fill / calc(var(--u) * 3) stretch; }
canvas.ic { width: calc(var(--u) * 16.5); height: calc(var(--u) * 16.5); image-rendering: pixelated; flex: none; }
canvas.ic.s { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }

/* home */
.home-lang { position: absolute; top: calc(var(--u) * 8); right: calc(var(--u) * 10); }
#title { top: calc(var(--u) * 44); width: 100%; margin: 0; font-weight: 400; font-size: calc(var(--u) * 46); color: #ffd987; letter-spacing: calc(var(--u) * 1); text-shadow: 0 calc(var(--u) * 3) 0 #a8523e, calc(var(--u) * 1) calc(var(--u) * 4) 0 #130f2c, 0 0 calc(var(--u) * 18) #f2896f; }
#sub { top: calc(var(--u) * 108); width: 70%; font-size: var(--t-sub); }
#snd { top: calc(var(--u) * 134); width: 74%; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 5); opacity: .92; }
#start { top: calc(var(--u) * 164); }

/* game: badge, icon buttons, messages */
.badge { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 8); display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 2) calc(var(--u) * 7); white-space: nowrap; max-width: 60%; }
.icons { position: absolute; top: calc(var(--u) * 8); right: calc(var(--u) * 8); display: flex; flex-direction: row-reverse; gap: calc(var(--u) * 6); }
.ico {
  width: max(var(--target), calc(var(--u) * 30)); height: max(var(--target), calc(var(--u) * 30)); padding: 0; display: grid; place-items: center; cursor: pointer; background: none; color: #fdf2dc;
  border-style: solid; border-width: calc(var(--u) * 3); border-image: var(--bi-btn2) 3 fill / calc(var(--u) * 3) stretch; image-rendering: pixelated;
}
.ico:hover { filter: brightness(1.25); }
#hint, #power, #bub { max-width: 92%; width: max-content; padding: calc(var(--u) * 2) calc(var(--u) * 8); }
#hint { bottom: calc(var(--u) * 8); }
#power { bottom: calc(var(--u) * 10); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); }
#power[hidden] { display: none; }
#ppips { display: inline-flex; gap: calc(var(--u) * 2); }
#ppips i { display: inline-block; width: calc(var(--u) * 7); height: calc(var(--u) * 9); background: #3b2f6e; box-shadow: inset 0 0 0 calc(var(--u) * 1) #130f2c; }
#ppips i.on { background: #ffd987; }
#bub { top: calc(var(--u) * 40); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 10); font-size: var(--t-msg); }
#bub[hidden] { display: none; }
#bang { font-size: calc(var(--u) * 22); color: #ffd987; font-weight: 400; animation: bob .9s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(calc(var(--u) * -2)); } }
body.rm * { animation: none !important; }

/* catch card */
.card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94%, calc(var(--u) * 190)); text-align: center; padding: calc(var(--u) * 6) calc(var(--u) * 10); max-height: 96%; overflow-y: auto; overflow-x: hidden; }
.tag { display: inline-block; background: #e0605a; color: #fff; font-size: var(--t-small); padding: calc(var(--u) * 1) calc(var(--u) * 8); margin: 0 calc(var(--u) * 2) calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * 2) 0 #8a3040; }
.card canvas { width: calc(var(--u) * 40 * 3); height: calc(var(--u) * 24 * 3); image-rendering: pixelated; display: block; margin: 0 auto; }
.card h3 { margin: calc(var(--u) * 2) 0; font-size: var(--t-card); color: #ffd987; font-weight: 400; }
#cardInfo { font-size: var(--t-body); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 calc(var(--u) * 4); }
#cardBook { font-size: var(--t-small); opacity: .85; margin-bottom: calc(var(--u) * 5); }
.card p { font-size: var(--t-body); margin: calc(var(--u) * 3) 0 calc(var(--u) * 6); opacity: .92; }

/* sheets (journal, settings) */
.sheet { position: absolute; inset: calc(var(--u) * 14) calc(var(--u) * 22); overflow-y: auto; overflow-x: hidden; }
#s-settings .sheet { inset: calc(var(--u) * 14) calc(var(--u) * 50); }
#s-book .sheet { inset: calc(var(--u) * 10) calc(var(--u) * 22); } /* J6: 4 u taller top and bottom so 24 slots of >= 44 px fit */
/* J5: in Settings the body scrolls, not the whole sheet: the Close button stays in view whatever the scroll (no Escape key on a phone) */
#s-settings .sheet { overflow: hidden; }
.sbody { height: 100%; overflow-y: auto; overflow-x: hidden; padding: calc(var(--u) * 3); }
.hd { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 9); color: #ffd987; padding-right: max(var(--target), calc(var(--u) * 24)); }
.hd h2 { margin: 0; font-size: var(--t-h2); font-weight: 400; }
.pips { display: flex; gap: calc(var(--u) * 1); margin-left: auto; align-items: center; font-size: var(--t-body); color: #fdf2dc; flex-wrap: wrap; justify-content: flex-end; }
.pip { width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: #3b2f6e; box-shadow: inset 0 0 0 calc(var(--u) * 1) #130f2c; }
.pip.on { background: #ffd987; }
.pips .cnt { margin-left: calc(var(--u) * 6); }
.closeb { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 4); width: max(var(--target), calc(var(--u) * 20)); height: max(var(--target), calc(var(--u) * 20)); padding: 0; display: grid; place-items: center; }

/* J6: 24 slots = 4 columns x 6 rows; the slot is flatter (1.66) so the sprite stays at about its own pixel size and the 6 rows fit under the header */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 3) calc(var(--u) * 5); width: calc(var(--u) * 214); }
.slot { height: max(var(--target), calc(var(--u) * 30)); /* flat slot, never under the 44 px touch target (J5 rule): 6 rows still fit, see the data-fs rules below */ display: grid; place-items: center; cursor: pointer; position: relative; padding: 0; background: none; color: #fdf2dc;
  border-style: solid; border-width: calc(var(--u) * 3); border-image: var(--bi-slot) 3 fill / calc(var(--u) * 3) stretch; image-rendering: pixelated; }
.slot canvas { width: 80%; image-rendering: pixelated; }
.slot.sel { filter: brightness(1.35); }
.slot small { position: absolute; right: calc(var(--u) * 4); bottom: calc(var(--u) * 1); font-size: var(--t-small); opacity: .85; }
#page { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 30); bottom: calc(var(--u) * 8); width: calc(var(--u) * 172); padding: calc(var(--u) * 4) calc(var(--u) * 6); font-size: var(--t-small); line-height: 1.3; overflow-y: auto; overflow-x: hidden; }
#page .pg-head { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 3); }
#page canvas { width: calc(var(--u) * 40 * 2); height: calc(var(--u) * 24 * 2); flex: none; image-rendering: pixelated; }
#page .pg-title { flex: 1; min-width: 0; }
#page h3 { margin: 0 0 calc(var(--u) * 1); font-size: max(calc(16px * var(--fs)), calc(var(--u) * 12 * var(--fs))); color: #ffd987; text-align: left; font-weight: 400; overflow-wrap: anywhere; line-height: 1.15; }
#page .d { text-align: left; margin: 0 0 calc(var(--u) * 3); }
#page .row { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); border-top: calc(var(--u) * 1) dotted #6b5aa8; padding: calc(var(--u) * 1.6) 0; align-items: center; }
#page .row.hours { justify-content: flex-start; align-items: flex-start; gap: calc(var(--u) * 5); }
#page .row.hours > span:last-child { min-width: 0; flex: 1; }
#page .row.hours canvas.ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.ics { display: inline-flex; gap: calc(var(--u) * 2); flex: none; align-items: center; min-height: 1.2em; }
.rar { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); flex-wrap: wrap; }
.rp { display: inline-flex; gap: calc(var(--u) * 2); }
.rp i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: #3b2f6e; box-shadow: inset 0 0 0 calc(var(--u) * 1) #130f2c; display: inline-block; }
.rp i.on { background: #ffd987; }

/* settings */
.set { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3) calc(var(--u) * 8); margin: calc(var(--u) * 3) 0; }
.set .lbl { min-width: calc(var(--u) * 86); }
.seg { display: inline-flex; flex-wrap: wrap; gap: calc(var(--u) * 3); }
.seg button { font-size: var(--t-body); background: #3b2f6e; color: #fdf2dc; border: 0; padding: calc(var(--u) * 3) calc(var(--u) * 8); box-shadow: 0 0 0 calc(var(--u) * 1.5) #130f2c; cursor: pointer; min-height: var(--target); min-width: var(--target); }
.seg button[aria-pressed="true"] { background: #ffd987; color: #2a1c30; text-shadow: none; }
.chk { display: flex; align-items: center; gap: calc(var(--u) * 7); min-height: var(--target); cursor: pointer; line-height: 1.15; }
.chk input { -webkit-appearance: none; appearance: none; flex: none; width: max(24px, calc(var(--u) * 13)); height: max(24px, calc(var(--u) * 13)); margin: 0; background: #3b2f6e; box-shadow: 0 0 0 calc(var(--u) * 1.5) #130f2c, inset 0 0 0 calc(var(--u) * 1.5) #6b5aa8; cursor: pointer; }
.chk input:checked { background: #ffd987 radial-gradient(circle at center, #7a4a2e 0 calc(var(--u) * 3), transparent calc(var(--u) * 3.3)); }
.note { font-size: var(--t-small); opacity: .88; margin: calc(var(--u) * 6) 0 0; line-height: 1.35; }
.photo-bar { bottom: calc(var(--u) * 10); width: 92%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.photo-bar .note { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.photo-bar .row { display: flex; gap: calc(var(--u) * 8); flex-wrap: wrap; justify-content: center; }

.webgl-msg { position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%); width: 90%; text-align: center; background: #1d1830ee; border: max(2px, .3cqw) solid #ffd987; padding: 1cqw 2cqw; font-size: max(14px, 2.1cqw); z-index: 5; }

/* portrait phone: a message, CSS only (no script) */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #1d1830; color: #fdf2dc; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; font-size: 20px; padding: 24px; line-height: 1.3; }
#rotate p { margin: 0; }
.phone { width: 44px; height: 76px; border: 4px solid #ffd987; border-radius: 8px; animation: turn 2.4s steps(8) infinite; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) { #rotate { display: flex; } }
@media (prefers-reduced-motion: reduce) { .phone { animation: none; transform: rotate(90deg); } #bang { animation: none; } }
body.rm .phone { animation: none; transform: rotate(90deg); }

/* larger text (x1.25, x1.5): the catch card turns into two columns and the journal gives the page more room, so the worst-case
   texts still fit without scrolling (set by main.js: <html data-fs="1.25">). At x1 the layout is the approved mock-up. */
html[data-fs="1.25"] .card, html[data-fs="1.5"] .card { width: min(94%, calc(var(--u) * 330)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 8); align-items: center; text-align: left; }
html[data-fs="1.25"] .card .c-left, html[data-fs="1.5"] .card .c-left { text-align: center; }
html[data-fs="1.25"] .card canvas, html[data-fs="1.5"] .card canvas { width: calc(var(--u) * 40 * 2); height: calc(var(--u) * 24 * 2); }
html[data-fs="1.25"] .card #cardInfo, html[data-fs="1.5"] .card #cardInfo { justify-content: flex-start; }
html[data-fs="1.25"] .card .btn, html[data-fs="1.5"] .card .btn { padding: calc(var(--u) * 2) calc(var(--u) * 8); }
html[data-fs="1.25"] .grid, html[data-fs="1.5"] .grid { width: calc(var(--u) * 164); gap: calc(var(--u) * 2) calc(var(--u) * 4); }
html[data-fs="1.25"] #page, html[data-fs="1.5"] #page { width: calc(var(--u) * 244); top: calc(var(--u) * 26); bottom: calc(var(--u) * 6); }
html[data-fs="1.25"] .card, html[data-fs="1.5"] .card { padding: calc(var(--u) * 3) calc(var(--u) * 8); }
html[data-fs="1.25"] .card p, html[data-fs="1.5"] .card p { margin: calc(var(--u) * 2) 0 calc(var(--u) * 2); }
html[data-fs="1.25"] .card #cardBook, html[data-fs="1.5"] .card #cardBook { margin-bottom: calc(var(--u) * 3); }
html[data-fs="1.25"] .slot, html[data-fs="1.5"] .slot { height: max(var(--target), calc(var(--u) * 24)); }
html[data-fs="1.25"] .hd, html[data-fs="1.5"] .hd { margin-bottom: calc(var(--u) * 4); }
html[data-fs="1.5"] .pip { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
html[data-fs="1.5"] .pips .cnt { margin-left: calc(var(--u) * 3); }
html[data-fs="1.25"] .slot canvas, html[data-fs="1.5"] .slot canvas { width: 76%; margin-top: -9%; margin-right: 6%; }
html[data-fs="1.25"] .slot small, html[data-fs="1.5"] .slot small { right: calc(var(--u) * 3); bottom: 0; line-height: 1; }

/* J3: world line (phase / weather change, 3 s), volume sliders */
#toast { top: calc(var(--u) * 84); max-width: 80%; width: max-content; padding: calc(var(--u) * 2) calc(var(--u) * 8); font-size: var(--t-msg); pointer-events: none; }
#toast[hidden] { display: none; }
.vol { display: flex; align-items: center; gap: calc(var(--u) * 8); min-height: var(--target); margin: calc(var(--u) * 1) 0; }
.vol .lbl { min-width: calc(var(--u) * 86); }
.vol input[type=range] { flex: 1 1 auto; min-width: calc(var(--u) * 70); max-width: calc(var(--u) * 150); height: var(--target); margin: 0; accent-color: #ffd987; background: transparent; cursor: pointer; }
.vol output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.vol input[type=range]:disabled { opacity: .5; cursor: default; }
.btn.alt2 { margin-left: calc(var(--u) * 8); }
.home-btns { display: flex; gap: calc(var(--u) * 8); justify-content: center; flex-wrap: wrap; }

/* J4: save notice (non-modal, fades away), photo confirmation, shutter flash (off in reduced motion: main.js never shows it) */
#saveNote { bottom: calc(var(--t-body) * 2.5 + var(--u) * 24); max-width: 84%; width: max-content; padding: calc(var(--u) * 2) calc(var(--u) * 8); font-size: var(--t-body); pointer-events: none; z-index: 4; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #130f2c; }
#saveNote[hidden] { display: none; }
#photoMsg { color: #ffd987; max-width: 92%; overflow-wrap: anywhere; }
#shutter { position: absolute; inset: 0; background: #fff; pointer-events: none; z-index: 6; opacity: 0; }
#shutter.go { animation: shutter .28s steps(4) 1; }
@keyframes shutter { 0% { opacity: .85; } 100% { opacity: 0; } }
#saveState { color: #ffd987; }

/* J5: the catch card is the thing to read: the 3 s world line and the save message (also in Settings and in the live region) wait behind it, never over it */
#stage:has(#card:not([hidden])) #toast, #stage:has(#card:not([hidden])) #saveNote { visibility: hidden; }