/* Kytra - title-screen portfolio.
   Type: Smart 9 (pixel grid of 16 per em) at 16px or 32px so every font pixel lands on whole CSS pixels;
         Tape 14 at 12px for longer text.
   Frames: 1px dark edge, 2px gold, 1px dark edge (img/ui/frame.png). */
@font-face { font-family: "Smart 9"; src: url("../fonts/smart9.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Tape 14"; src: url("../fonts/tape14.woff2") format("woff2"); font-display: block; }
/* Japanese: Misaki Gothic 2nd, an 8x8 pixel font (8 font px per em), used only at 16 / 24 / 32 px so it stays crisp */
@font-face { font-family: "Misaki"; src: url("../fonts/misaki.woff2") format("woff2"); font-display: block; }

:root {
  --ink: #14121f; --panel: rgba(20, 20, 34, .9); --cream: #fff4dc; --soft: #c9c2e0; --dim: #8a84a8;
  --gold: #f1c75b; --gold-deep: #a8742a; --sel: #ffe27a;
  --px: 3px;                         /* one art pixel of the title scene on screen, set by site.js */
  --ui: "Smart 9", ui-monospace, monospace;
  --text: "Tape 14", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0d0c16; color: var(--cream); font: 16px/20px var(--ui); overflow: hidden;
  -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; }
.dim { position: absolute; inset: 0; background: rgba(12, 11, 24, .72); opacity: 0; transition: opacity .35s steps(4); pointer-events: none; }
.app[data-screen="atlas"] .dim, .app[data-screen="links"] .dim { opacity: 1; }
.app[data-screen="about"] .dim { opacity: .3; }
.app:not([data-screen="title"]) .logo-layer { visibility: hidden; }
.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; animation: in .32s steps(4); }
@keyframes in { from { opacity: 0 } to { opacity: 1 } }

/* 9-slice pixel frame (img/ui/frame.png): 1px ink edge, 2px gold, 1px ink edge, notched corners, panel fill */
.panel { border: 4px solid transparent; border-image: url("../img/ui/frame.png") 4 fill / 4px stretch; image-rendering: pixelated; background: none; }
.sprite { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
kbd { display: inline-block; min-width: 20px; margin-right: 6px; padding: 0 5px; text-align: center; font: inherit; color: var(--cream);
  background: #2c2742; box-shadow: inset 0 -2px 0 #0f0d18; }

/* ---------- title ---------- */
.menu { position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 26px 10px 10px; list-style: none; min-width: 220px; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  font-size: 32px; line-height: 40px; text-align: left; color: var(--cream); }
.menu .cur { width: 21px; height: 21px; visibility: hidden; }
.menu button.is-sel { color: var(--sel); }
.menu button.is-sel .cur { visibility: visible; animation: bob .8s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.menu button:focus-visible { outline: none; }
.hints { position: absolute; right: 0; bottom: 0; display: flex; gap: 18px; align-items: center; padding: 6px 12px; color: var(--soft); }
.arrow { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }
.hints .arrow:last-of-type, .ahints .arrow:last-of-type { margin-right: 8px; }
.clock { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; }
.clock img { width: 18px; height: 18px; }
.clock:hover, .pause:hover { color: var(--sel); }
.pause { position: absolute; top: 0; right: 0; display: grid; place-items: center; padding: 0; cursor: pointer; }
.pause img { width: 14px; height: 14px; }
.sound { position: absolute; top: 0; right: 0; display: grid; place-items: center; padding: 0; cursor: pointer; }
.sound img { width: 14px; height: 14px; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--sel); }
/* volume: a gold pixel bar with a square knob, same frame as every panel */
.vol { position: absolute; top: 0; right: 0; display: flex; align-items: center; padding: 0 10px; }
.vol[hidden] { display: none; }
.vol input { -webkit-appearance: none; appearance: none; width: 112px; height: 16px; margin: 0; background: none; cursor: pointer; }
.vol input::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--gold) var(--v, 60%), #2c2742 var(--v, 60%));
  box-shadow: 0 0 0 2px var(--ink); }
.vol input::-moz-range-track { height: 6px; background: #2c2742; box-shadow: 0 0 0 2px var(--ink); }
.vol input::-moz-range-progress { height: 6px; background: var(--gold); }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -5px; border: 0; border-radius: 0;
  background: var(--cream); box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 var(--gold); }
.vol input::-moz-range-thumb { width: 10px; height: 16px; border: 0; border-radius: 0; background: var(--cream);
  box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 var(--gold); }
.vol input:hover::-webkit-slider-thumb, .vol input:focus-visible::-webkit-slider-thumb { background: var(--sel); }
.vol input:focus-visible { outline: none; }
.vol:focus-within { outline: 2px solid var(--sel); outline-offset: 2px; }
.app:not([data-screen="title"]) .sound, .app:not([data-screen="title"]) .vol { visibility: hidden; }

/* ---------- atlas ---------- */
.atlas { position: absolute; inset: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px 18px; padding: 20px 24px 18px; }
.tabs { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 5px 6px; overflow-x: auto; scrollbar-width: none; }
.tabs .key { flex: none; color: var(--dim); padding: 0 6px; }
.tab { flex: none; border: 0; background: none; cursor: pointer; padding: 4px 10px; color: var(--soft); white-space: nowrap; }
.tab .n { color: var(--dim); margin-left: 6px; }
.tab[aria-selected="true"] { color: var(--ink); background: var(--gold); }
.tab[aria-selected="true"] .n { color: #5b3d10; }
.list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
.row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 6px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--cream); }
.row img { width: 18px; height: 18px; flex: none; }
.row .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .hr { flex: none; color: var(--dim); }
.row.is-sel { background: rgba(241, 199, 91, .16); color: var(--sel); box-shadow: inset 2px 0 0 var(--gold); }
.row:focus-visible { outline: none; }
.right { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; }
.stage { margin: 0; display: flex; gap: 14px; align-items: flex-start; }
.stage.stack { flex-direction: column; align-items: center; }
.pv-frame { padding: 0; line-height: 0; }
#pv-img { display: block; image-rendering: pixelated; background: #0c0b16; }
.info { width: 320px; padding: 12px 14px 14px; }
.stage.stack .info { width: var(--pvw); }
.info h2 { margin: 0; font-weight: 400; font-size: 32px; line-height: 40px; color: var(--sel); overflow-wrap: anywhere; }
.info .place { margin-top: 4px; color: var(--cream); }
.info .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--soft); }
.info .tags span { display: inline-flex; align-items: center; gap: 6px; }
.info .tags img { width: 18px; height: 18px; }
.info .brief { margin-top: 12px; font: 12px/18px var(--text); color: var(--soft); max-width: 70ch; }
.ahints { grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 22px; padding: 4px 12px; color: var(--soft); }
.back-btn { border: 0; background: none; cursor: pointer; color: var(--soft); padding: 0; }
.back-btn:hover { color: var(--sel); }

/* ---------- about: dialog box ---------- */
.dialog { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); width: min(700px, calc(100vw - 48px));
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: stretch; }
.face { padding: 0; line-height: 0; }
.face canvas { display: block; image-rendering: pixelated; }
.box { position: relative; display: flex; flex-direction: column; padding: 20px 20px 12px; cursor: pointer; }
.speaker { position: absolute; top: -12px; left: 14px; padding: 2px 10px; color: var(--ink); background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
.say { margin-top: 4px; font: 12px/20px var(--text); color: var(--cream); min-height: 60px; }
.box-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.dialog-hint { color: var(--dim); white-space: nowrap; }
.dialog-hint kbd { color: var(--soft); }
.dialog-hint kbd + kbd, .dialog-hint kbd:not(:first-child) { margin-left: 12px; }
.more { width: 14px; height: 14px; margin-left: auto; line-height: 0; animation: bob .8s steps(2) infinite; }

/* ---------- links ---------- */
.links-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 400px; padding: 12px 16px 14px; }
.links-panel h2 { margin: 0 0 8px; font-weight: 400; font-size: 32px; line-height: 40px; color: var(--sel); }
.links-panel a { display: flex; justify-content: space-between; gap: 30px; padding: 8px 8px; color: var(--cream); text-decoration: none; }
.links-panel a:hover, .links-panel a:focus-visible { background: rgba(241, 199, 91, .16); color: var(--sel); outline: none; }
.links-panel a span:last-child { color: var(--dim); }

@media (prefers-reduced-motion: reduce) { .screen.on { animation: none; } .menu button.is-sel .cur, .more { animation: none; } }
@media (max-width: 700px), (pointer: coarse) { .hints, .ahints > span, .back-btn kbd, .dialog-hint { display: none; } }
@media (max-width: 900px) {
  html, body { overflow: auto; }
  .atlas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start; overflow-y: auto; padding: 16px 12px 20px; }
  .list { max-height: 34vh; }
  .right { place-items: start center; }
  .stage, .stage.stack { flex-direction: column; align-items: stretch; width: 100%; }
  .info, .stage.stack .info { width: auto; }
  .dialog { grid-template-columns: 1fr; }
  .face { display: none; }
  .menu button { font-size: 32px; }
  .links-panel { min-width: 0; width: calc(100vw - 32px); }
}

/* ---------- language toggle + Japanese ---------- */
.lang { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; }
.lang span { color: var(--dim); }
.lang .l-en { font: 16px/20px "Smart 9", ui-monospace, monospace; }
.lang .l-ja { font: 16px/16px "Misaki", sans-serif; }
.lang span.on { color: var(--sel); }
.lang:hover span:not(.on) { color: var(--cream); }
html[lang="ja"] { --ui: "Misaki", "Smart 9", ui-monospace, monospace; --text: "Misaki", "Tape 14", ui-monospace, monospace; }
/* Japanese sizes stay on Misaki's 8px grid (Kytra 2026-10-03): 32 headers, 24 descriptions + dialog, 16 subtext + UI */
html[lang="ja"] body { font-size: 16px; line-height: 24px; }
html[lang="ja"] kbd { font-family: "Smart 9", ui-monospace, monospace; font-size: 16px; }
html[lang="ja"] .info h2 { font-size: 32px; line-height: 40px; }
html[lang="ja"] .info .brief { font: 24px/32px var(--text); }
html[lang="ja"] .say { font: 24px/32px var(--text); min-height: 96px; }
html[lang="ja"] .menu button { font-size: 32px; line-height: 40px; }
html[lang="ja"] .links-panel h2 { font-size: 32px; line-height: 40px; }
html[lang="ja"] .lang .l-ja { font-size: 16px; line-height: 16px; }
html[lang="ja"] .lang .l-en { font-size: 16px; }
html[lang="ja"] body { line-break: strict; word-break: normal; }   /* kinsoku: no ー / small kana / 。、 at line starts */
html[lang="ja"] .info { width: 400px; }   /* 32px titles + 24px descriptions (site.js layoutPreview matches) */