/* 転職ガチャ
   画面の考え方: 夜のオフィスの紺の上に、ドット絵の情景と「紙の書類（辞令・社内通知・履歴書）」を置く。
   色は意味で使う: 朱＝印鑑と決断 / 紙＝会社の正式な書類 / 4色＝レア度。ここだけで完結する1つの見た目。 */
:root {
  --void: #121530;        /* 夜のオフィスの紺 */
  --void-2: #1a1e42;
  --void-3: #262b58;
  --line: #3a4078;
  --fluor: #eef2f0;       /* 蛍光灯の白（暗い面の文字） */
  --sub: #c3c9e6;         /* 暗い面の補足文字 */
  --paper: #f4f2ea;       /* 辞令の紙 */
  --paper-2: #e7e3d6;
  --rule: #b7b2a2;
  --ink: #1e2030;         /* 紙の上の文字 */
  --ink-2: #4a4c5c;
  --shu: #d8442e;         /* 朱肉 */
  --shu-d: #a82e1e;
  --n: #8b909e; --n-l: #e9ecf1;
  --r: #2f6fd6; --r-l: #5b98ff;
  --sr: #b8860b; --sr-l: #f4c040;
  --ssr: linear-gradient(100deg, #ff6a8a, #ffb44a 22%, #ffe66a 38%, #6ae0a0 55%, #5ab4ff 72%, #b07aff 90%);
  --f-pix: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --f-doc: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-disp: 'Dela Gothic One', 'Hiragino Kaku Gothic StdN', 'Yu Gothic', sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background-color: var(--void);
  color: var(--fluor);
  font-family: var(--f-pix);
  font-size: 15px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--sr-l); outline-offset: 3px; }
canvas.px, img.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

.app {
  max-width: 440px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 14px 40px;
  min-height: 100%;
  position: relative;
}
.scr { display: flex; flex-direction: column; gap: 16px; }