/* pixel engine styles */

@font-face { font-family: 'monogram'; src: url('../assets/fonts/monogram.woff2') format('woff2'); }
@font-face { font-family: 'jersey'; src: url('../assets/fonts/jersey-10-grid.woff2') format('woff2'); }
* { box-sizing: border-box; margin: 0; padding: 0; }

/* theme colours */
:root {
  --ink: #121b26;      /* text + ui lines */
  --muted: #9089a3;    /* secondary text, placeholders */
  --bg: #f6f2ee;       /* page */
  --rail: #f6f2ee;     /* sidebar */
  --edge: #c6bed0;     /* sidebar edge, hairlines */
  --hl: #fff2a0;       /* hover highlight */
  --select: #d79747;   /* current page bar */
  --thumb: #c6bed0;    /* scrollbar */
  --thumb-on: #9089a3;
  --under: 64px;
}
:root[data-theme="dark"] {
  --ink: #f6f2ee;
  --muted: #a39cb8;
  --bg: #17141f;
  --rail: #1f1b2a;
  --edge: #3a3450;
  --hl: #3a3450;
  --select: #f6cf42;
  --thumb: #3a3450;
  --thumb-on: #a39cb8;
  color-scheme: dark;
}

/* scrollbar always on */
html { overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; }

body { background: var(--bg); color: var(--ink); image-rendering: pixelated; }

#stage { position: relative; overflow: hidden; }

#art {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  font-family: 'monogram', monospace;
  font-size: 16px;
  line-height: 12px;
  color: var(--ink);
}

h1, h2, .title {
  font-family: 'jersey', monospace;
  font-size: 20px;
  line-height: 20px;
  font-weight: normal;
}

/* ---------- sidebar ---------- */
#side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}
#side-art {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  --side: 48px;
  width: var(--side);
  overflow: hidden;
  background-color: var(--rail);
  box-shadow: inset -1px 0 0 var(--edge);
}

/* sidebar items */
.item { position: relative; display: grid; grid-template: 1fr auto 1fr / 1fr auto 1fr; width: 48px; height: 48px; padding: 0;
  border: none; background: none; color: var(--ink); cursor: pointer; }
.item img, .item .slot { display: block; grid-area: 2 / 2; }
#steps { position: absolute; top: 56px; left: 0; }
/* logo hairline */
#steps::before { content: ''; position: absolute; top: -4px; left: 8px; width: 32px; height: 1px; background: var(--edge); }
#side-foot { position: absolute; left: 0; bottom: var(--sliver, 0px); }
/* current page bar */
.item[aria-current]::before {
  content: '';
  grid-area: 2 / 1;
  justify-self: start;
  width: 3px;
  background: var(--select);
  clip-path: polygon(0 0, 2px 0, 2px 1px, 3px 1px, 3px calc(100% - 1px), 2px calc(100% - 1px), 2px 100%, 0 100%);
}
.item:focus-visible { outline: none; }
.item:focus-visible::after { content: ''; grid-area: 2 / 2; margin: -3px; box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- title row ---------- */
#title-row { position: absolute; top: 16px; height: 40px; }
#title-row h1 { position: absolute; left: 0; top: 2px; white-space: nowrap; }

#page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--under) 0 16px;
}

a { color: inherit; }

/* asset placeholders */
.slot {
  flex: none;
  width: calc(var(--sw) * 1px);
  height: calc(var(--sh) * 1px);
}

/* debug boxes + labels */
[data-box] { position: relative; }
.debug body:not(.clean) [data-box] {
  background: rgba(255, 60, 150, .14);
  box-shadow: inset 0 0 0 1px rgba(210, 0, 110, .85);
}
.debug body:not(.clean) .slot {
  background: rgba(0, 120, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(0, 90, 220, .9);
}
.debug body:not(.clean) #side-art { box-shadow: inset 0 0 0 1px rgba(210, 0, 110, .85); }
.label {
  position: absolute;
  font: 10px/1 monospace;
  padding: 2px 3px;
  background: #c4006a;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}
.label.bad { background: #e00; }
.clean .label { display: none; }

/* debug hud */
#hud {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  font: 12px/1.5 monospace;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
}
#hud button { font: 12px monospace; margin: 4px 4px 0 0; padding: 1px 6px; }
#hud button.on { background: #c4006a; color: #fff; }
#hud .min { float: right; margin: 0 0 4px 8px; }
#hud .good { color: #6f6; }
#hud .bad { color: #f66; }

h1.x2, h2.x2, .title.x2 { font-size: 40px; line-height: 40px; }

/* text input */
.field { width: 144px; height: 24px; flex: none; }
.field input {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  border: none;
  background: none;
  outline: none;
  font: 16px/12px 'monogram', monospace;
  color: inherit;
}

/* pixel caret */
.field { position: relative; }
.field input { caret-color: transparent; }
.caret {
  position: absolute;
  top: 8px;
  width: 1px;
  height: 10px;
  background: var(--ink);
  pointer-events: none;
  display: none;
}
.caret.on { display: block; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.field input::selection { background: var(--hl); color: var(--ink); }

.textbox { overflow: hidden; }

.field .textbox { position: absolute; inset: 0; }
.field input { position: relative; }
.field input::placeholder { color: var(--muted); opacity: 1; }

/* ---------- bubbles ---------- */
#tips { position: fixed; top: 0; left: 0; z-index: 5; pointer-events: none; transform-origin: 0 0; }
#tips > .bubble { pointer-events: auto; cursor: default; }
#tips .bridge { position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
#tips .under > .bridge { top: auto; bottom: 100%; }
#tips .right > .bridge { left: auto; right: 100%; top: 0; bottom: 0; width: 3px; height: auto; }
#tips, .bubble { font-family: 'monogram', monospace; font-size: 16px; line-height: 12px; }
/* placeholder bubble */
.bubble { position: absolute; padding: 3px 7px 8px 8px; white-space: pre; color: #f6f2ee; }
.bubble > span { position: relative; }
.bubble::before, .bubble::after { content: ''; position: absolute; background: #1f1b2a; }
.bubble::before { inset: 0 0 3px;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 1px, calc(100% - 3px) 1px, calc(100% - 3px) 2px,
    calc(100% - 2px) 2px, calc(100% - 2px) 3px, calc(100% - 1px) 3px, calc(100% - 1px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 1px) calc(100% - 5px), calc(100% - 1px) calc(100% - 3px),
    calc(100% - 2px) calc(100% - 3px), calc(100% - 2px) calc(100% - 2px), calc(100% - 3px) calc(100% - 2px),
    calc(100% - 3px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px), calc(100% - 5px) 100%, 5px 100%,
    5px calc(100% - 1px), 3px calc(100% - 1px), 3px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 3px),
    1px calc(100% - 3px), 1px calc(100% - 5px), 0 calc(100% - 5px), 0 5px, 1px 5px, 1px 3px, 2px 3px, 2px 2px, 3px 2px,
    3px 1px, 5px 1px); }
.bubble::after { left: calc(var(--tail) - 3px); bottom: 0; width: 6px; height: 5px;
  clip-path: polygon(0 0, 6px 0, 6px 3px, 5px 3px, 5px 4px, 4px 4px, 4px 5px, 2px 5px, 2px 4px, 1px 4px, 1px 3px, 0 3px); }
.bubble.under { padding: 6px 7px 5px 8px; }
.bubble.under::before { inset: 3px 0 0; }
.bubble.under::after { top: 0; bottom: auto;
  clip-path: polygon(2px 0, 4px 0, 4px 1px, 5px 1px, 5px 2px, 6px 2px, 6px 5px, 0 5px, 0 2px, 1px 2px, 1px 1px, 2px 1px); }
.bubble.right { padding: 3px 7px 5px 11px; }
.bubble.right::before { inset: 0 0 0 3px; }
.bubble.right::after { left: 0; top: calc(50% - 3px); bottom: auto; width: 5px; height: 6px;
  clip-path: polygon(2px 0, 5px 0, 5px 6px, 2px 6px, 2px 5px, 1px 5px, 1px 4px, 0 4px, 0 2px, 1px 2px, 1px 1px, 2px 1px); }
:root[data-theme="dark"] .bubble { color: #121b26; }
:root[data-theme="dark"] .bubble::before, :root[data-theme="dark"] .bubble::after { background: #f6f2ee; }

/* ---------- page swap ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: hold 1s; }
html.held body { animation: hold 1s; }
@keyframes hold { from, to { opacity: 0; } }
/* firefox paint hold */
html.unscaled #stage { clip-path: polygon(0 0, 0 0, 0 0); }

/* too narrow message */
#desktop-only { display: none; }
.narrow #side, .narrow #stage, .narrow #hud, .narrow #layer, .narrow #tips { display: none !important; }
.narrow #desktop-only {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font: 32px/24px 'monogram', monospace;
  color: var(--ink);
  text-align: center;
}
.narrow #desktop-only p { max-width: 384px; }