/* imhimgame.com, in the game's own look: the title screen and main menu (src/ui/boot.css, TitleMenu.ts), the paper
   panels (style.css .ctl-panel), the speech bubble (style.css .bubble), the gold scrollbars and the sel-lift / sel-ring
   focus (no outline rings). The fonts are the game's (src/ui/fonts, OFL). One dark look with explicit colours, so a
   light or dark system preference changes nothing. */

@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Bangers'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/bangers.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #120e1a;
  --paper: #fff6e6;
  --red: #ff5a3a;
  --red-text: #a82c14; /* the red for small text on paper: 5.4:1 at the panel's darkest */
  --gold: #ffd24a;
  --panel-strong: rgba(18, 14, 26, 0.88);
  --dip: #0e0b14;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--paper); font: 500 16px/1.55 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus { outline: none; }

/* ---- the game's selection animations (style.css) ---------------------------------------------- */
@keyframes sel-lift {
  0%, 100% { transform: translateY(-3px) scale(1.04); box-shadow: 0 9px 0 #000, 0 0 0 3px var(--gold), 0 0 16px rgba(255, 210, 74, .5); }
  50% { transform: translateY(-5px) scale(1.065); box-shadow: 0 11px 0 #000, 0 0 0 3px var(--gold), 0 0 28px rgba(255, 210, 74, .85); }
}
@keyframes sel-ring {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 10px rgba(255, 210, 74, .45); }
  50% { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255, 210, 74, .8); }
}
@keyframes deal { from { transform: translateY(60px) rotate(8deg); opacity: 0; } }
/* Links in text: the soft gold ring, round the words. */
:where(p, li, dd, td) a:focus-visible, .text-link:focus-visible { border-radius: 4px; animation: sel-ring 1.1s ease-in-out infinite; }

/* ---- the game's scrollbars (style.css) -------------------------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255, 246, 230, .06); border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ffe07a, var(--gold) 45%, #e0a41c); border: 2px solid #000; border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #fff0a8, #ffdc5c 45%, #f0b52a); }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255, 246, 230, .08); } }

/* ---- logo and tagline (style.css .title-screen) ---------------------------------------------- */
.logo { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: clamp(56px, 12vw, 128px); letter-spacing: 6px; line-height: .9; white-space: nowrap; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--red), 0 16px 0 var(--ink); margin: 0; }
.tagline { font: italic 700 clamp(16px, 2.2vw, 22px) 'Inter', sans-serif; letter-spacing: 1px; color: var(--gold); margin: 22px 0 28px; }

/* ---- buttons (style.css .btn, .btn-small) ------------------------------------------------------ */
.btn { display: inline-block; font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 3px; line-height: 1.2; padding: 8px 26px; background: var(--red); color: #fff; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 var(--ink); cursor: pointer; -webkit-text-stroke: 1px var(--ink); text-decoration: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn-small { font-size: 22px; padding: 6px 22px; background: var(--ink); color: var(--gold); border-color: var(--gold); box-shadow: 0 5px 0 #000; -webkit-text-stroke: 0; }
.btn:focus-visible { animation: sel-lift 1.1s ease-in-out infinite; }

/* ======================================================================================== HOME */
/* The live title walk (web/walk/walk.js, built from src/site/walk.ts) draws into #walk. The page opens on the game's
   own dark (the logo and menu already up) and the walk fades in from it once its first frame is drawn (body.walking,
   walk.js's onReady), the way the game's own walk fades in: no still that cuts to a different frame (José,
   2026-10-01: the still-then-walk switch looked bad). The still of the walk is only for where the walk doesn't run:
   no script (html without .js), and body.walk-off (no WebGL, reduced motion, saving data, or it failed to load). */
.home { height: 100%; overflow: hidden; }
.home body { height: 100%; overflow: hidden; background: var(--dip); }
#walk { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; opacity: 0; transition: opacity .8s ease; }
body.walking #walk { opacity: 1; }
/* The still: a JPEG for any browser, WebP where image-set() with type() is understood (the line is dropped elsewhere). */
html:not(.js) body, body.walk-off { background-color: var(--dip); background-position: 38% 50%; background-size: cover; background-repeat: no-repeat;
  background-image: url('/assets/img/title-walk-1280.jpg');
  background-image: image-set(url('/assets/img/title-walk-1920.webp') type('image/webp'), url('/assets/img/title-walk-1280.jpg') type('image/jpeg')); }
@media (max-width: 800px) {
  html:not(.js) body, body.walk-off { background-image: image-set(url('/assets/img/title-walk-960.webp') type('image/webp'), url('/assets/img/title-walk-1280.jpg') type('image/jpeg')); }
}

/* His speech bubble (style.css .bubble): walk.js sets left / top to a point above his head; centred over it, tail down. */
#walk-bubble { position: fixed; left: 0; top: 0; z-index: 1; max-width: 220px; padding: 6px 11px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; font: 700 14px/1.2 'Inter', sans-serif; text-align: center; pointer-events: none; transform: translate(-50%, -100%); }
#walk-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }

/* The title screen (boot.css .overlay.title-screen.attract): a soft vignette, a light shade down the middle. */
.title-screen { position: fixed; inset: 0; z-index: 2; overflow-y: auto; display: grid; place-items: safe center; padding: 16px; text-align: center;
  background:
    linear-gradient(90deg, rgba(18, 14, 26, 0) 24%, rgba(18, 14, 26, .3) 50%, rgba(18, 14, 26, 0) 76%),
    radial-gradient(ellipse 125% 100% at 50% 45%, rgba(18, 14, 26, 0) 42%, rgba(18, 14, 26, .6) 100%); }
.title-inner { display: flex; flex-direction: column; align-items: center; padding-bottom: 28px; }
.title-case { min-height: 20px; margin: -14px 0 18px; font: 700 15px 'Inter', sans-serif; color: var(--gold); }
/* The gold lines sit over whatever the walk shows (his yellow hair, pale sky, snow): each gets its own ink pill at 75%
   black, so the gold keeps at least 4.5:1 even over white (the worst case, over white: #ffd24a on #474747 is 6.4:1). */
.tagline, .title-case { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 4px 12px; border-radius: 8px; background: rgba(10, 8, 16, .75); box-shadow: 0 0 14px 6px rgba(10, 8, 16, .45); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }

/* The menu (boot.css .title-menu): a column of skewed ink panels; the one in focus (keys or pointer) turns gold. */
.title-menu { display: flex; flex-direction: column; gap: 6px; width: min(320px, 86vw); }
.title-item { position: relative; display: block; width: 100%; padding: 5px 18px 4px; font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 25px; letter-spacing: 3px; line-height: 1.2; color: var(--paper); text-decoration: none; background: var(--panel-strong); border: 3px solid var(--ink); border-radius: 12px 4px 12px 4px; box-shadow: 0 4px 0 #000, inset 0 0 0 1px rgba(255, 210, 74, .25); transform: skewX(-6deg); cursor: pointer; transition: transform .1s ease-out, background-color .1s, color .1s; }
.title-item::before { content: '▶'; position: absolute; left: 10px; top: 50%; font-size: 14px; opacity: 0; transform: translate(-4px, -50%); transition: opacity .1s, transform .1s; }
.title-item:focus { color: var(--ink); background: var(--gold); transform: skewX(-6deg) translateX(8px); box-shadow: 0 4px 0 #000, 0 0 18px rgba(255, 210, 74, .35); }
.title-item:focus::before { opacity: 1; transform: translate(0, -50%); }
.title-item:focus-visible { animation: sel-ring 1.1s ease-in-out infinite; }
/* Not a link yet (tools/site/prepare.mjs: the Steam page isn't public): the menu's type, dimmed, never focused or pressed. */
.title-soon { display: block; width: 100%; padding: 5px 18px 4px; font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 25px; letter-spacing: 3px; line-height: 1.2; color: var(--paper); background: var(--panel-strong); border: 3px dashed rgba(255, 246, 230, .45); border-radius: 12px 4px 12px 4px; transform: skewX(-6deg); cursor: default; user-select: none; }
.btn-soon, .btn-soon:hover, .btn-soon:active { cursor: default; transform: none; border-style: dashed; box-shadow: none; }
/* The version's corner (boot.css .title-version): what's coming, and whose it is. */
.title-corner { position: fixed; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 3; text-align: right; font: 700 12px/1.5 'Inter', sans-serif; letter-spacing: 1px; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.title-corner p { margin: 0; }
.title-studio a { text-decoration: none; border-radius: 4px; }
.title-studio a:focus-visible { animation: sel-ring 1.1s ease-in-out infinite; }
@media (max-height: 720px) {
  .logo { font-size: clamp(48px, 11vh, 104px); }
  .tagline { margin: 12px 0 18px; }
  .title-item, .title-soon { font-size: 22px; padding: 3px 16px 2px; }
  .title-menu { gap: 4px; }
}
/* Phones (portrait): the logo up top, the menu stacked at the bottom, the hero walking between them. */
@media (max-width: 640px) and (orientation: portrait) {
  .title-screen { place-items: stretch center; padding: 24px 16px calc(52px + env(safe-area-inset-bottom, 0px)); }
  .title-inner { min-height: 100%; justify-content: space-between; padding-bottom: 0; }
  .title-case { margin-bottom: 0; }
  .title-menu { gap: 5px; }
  .title-item { font-size: 21px; padding: 4px 16px 3px; }
  .title-corner { left: 16px; text-align: center; }
}

/* ---- overlays: the game's dim and paper panel (style.css .overlay, .ctl-panel) ----------------- */
dialog.panel { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 18px 20px 16px; background: linear-gradient(170deg, #fffaf0, #f3e2c4); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 var(--ink); overflow-y: auto; }
dialog.panel[open] { animation: deal .3s cubic-bezier(.2, 1.4, .4, 1); }
dialog.panel.wide { width: min(1000px, calc(100vw - 32px)); }
dialog.panel::backdrop { background: radial-gradient(ellipse at center, rgba(18, 14, 26, .55), rgba(18, 14, 26, .88)); }
.panel-title { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: clamp(36px, 7vw, 54px); letter-spacing: 4px; line-height: 1.05; margin: 0 0 10px; text-align: center; color: var(--red); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.panel p { margin: 0 0 12px; }
.panel code { font: 700 14px/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--ink); color: var(--gold); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.panel-foot { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.video { background: #000; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; line-height: 0; }
.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* =================================================================================== PAGES */
/* Press, privacy, terms, 404: the menu's ink with the paper panel in the middle. */
.page { min-height: 100vh; background: radial-gradient(ellipse 120% 70% at 50% 0%, #2a2036, var(--ink) 70%) fixed; }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 900px; margin: 0 auto; padding: 20px 16px 8px; }
.page-top .home-link { text-decoration: none; border-radius: 8px; padding: 4px 6px 14px; }
.page-top .home-link:focus-visible { animation: sel-ring 1.1s ease-in-out infinite; }
.page-top .logo { font-size: clamp(40px, 7vw, 56px); letter-spacing: 3px; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--red), 0 8px 0 var(--ink); }
.sheet { max-width: 900px; margin: 16px auto 0; padding: 0 16px; }
.sheet > article { background: linear-gradient(170deg, #fffaf0, #f3e2c4); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 #000; padding: clamp(20px, 4vw, 36px) clamp(18px, 4vw, 40px); }
.sheet h1 { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: clamp(38px, 7vw, 58px); letter-spacing: 4px; line-height: 1.05; margin: 0 0 6px; color: var(--red); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.sheet h2 { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 3px; line-height: 1.1; margin: 30px 0 8px; padding-top: 14px; border-top: 2px dashed rgba(18, 14, 26, .22); color: var(--red-text); }
.sheet h3 { font: 700 16px 'Inter', sans-serif; margin: 18px 0 6px; }
.sheet p, .sheet li { margin: 0 0 10px; }
.sheet ul { padding-left: 22px; margin: 0 0 12px; }
.sheet li::marker { color: var(--red-text); }
.sheet .lead { font-size: 18px; }
.sheet .updated, .sheet .muted { color: #4d4356; font-size: 14px; }
.sheet code { font: 600 14px/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: rgba(18, 14, 26, .08); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.sheet pre { background: var(--ink); color: var(--paper); padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 14px; }
.sheet pre code { background: none; padding: 0; color: inherit; }
.sheet table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 8px 0 16px; display: block; overflow-x: auto; }
.sheet th, .sheet td { border: 2px solid rgba(18, 14, 26, .35); padding: 6px 9px; text-align: left; vertical-align: top; }
.sheet .short { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 14px 18px 4px; margin: 14px 0; }
.sheet .short li::marker { color: var(--gold); }
.sheet .short a { color: var(--gold); }
.sheet .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 8px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0; }
.facts dt { font-family: 'Bangers', 'Impact', sans-serif; font-size: 20px; letter-spacing: 2px; color: var(--red-text); }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: 8px; } }
.thumbs { list-style: none; padding: 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.thumbs a { display: block; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; line-height: 0; background: #000; }
.thumbs a:hover { border-color: var(--red); }
.thumbs a:focus-visible { animation: sel-ring 1.1s ease-in-out infinite; }
.thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.assets { list-style: none; padding: 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.assets li { background: rgba(18, 14, 26, .06); border: 2px solid rgba(18, 14, 26, .25); border-radius: 10px; padding: 10px; display: grid; gap: 4px; align-content: start; }
.assets .thumb { display: grid; place-items: center; height: 120px; background: #d9c7a4; border-radius: 6px; }
.assets .thumb img { max-height: 110px; width: auto; }
.assets b { font-size: 15px; }
.assets span { font-size: 13px; color: #4d4356; }
.page-foot { max-width: 900px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: #d9d0e2; }
.page-foot a { color: var(--paper); }
.page-foot .fine { flex-basis: 100%; font-size: 13px; color: #b9aec4; }
.lost { text-align: center; }
.lost img { width: 140px; height: 140px; margin: 0 auto 18px; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 6px 0 #000; }

@media (prefers-reduced-motion: reduce) {
  :focus-visible { animation: none !important; }
  .btn:focus-visible { transform: translateY(-3px) scale(1.04); box-shadow: 0 9px 0 #000, 0 0 0 3px var(--gold); }
  :is(.title-studio a, .thumbs a, .home-link, p a, li a, dd a):focus-visible { box-shadow: 0 0 0 3px var(--gold); }
  .title-item:focus-visible { box-shadow: 0 4px 0 #000, 0 0 0 3px var(--gold); }
  .title-item, .title-item::before { transition: opacity .2s; }
  .title-item:focus { transform: skewX(-6deg); }
  dialog.panel[open] { animation: none; }
  #walk { transition: none; }
}
.sheet .short h2.short-h { color: var(--gold); border: 0; margin: 2px 0 8px; padding: 0; }