/* "게임 플레이 경험" on the home page (right under the intro): a small handheld LCD inside the note box. Two rows of cartridges flow across it
   (games.js loops them) and a pressed cartridge shows its record on the same screen. The screen keeps its own look (four
   greens, cartridges, pixel font); everything around it is the portfolio's.
   Text belongs in scripts/site-config.mjs (games) and src/templates/home.html, not in CSS. */
@font-face { font-family: "NeoDunggeunmo"; src: url("../fonts/neodgm.woff2") format("woff2"); font-display: swap; }

.games {
  /* ── 조정값: 숫자만 바꾸면 바로 반영됩니다(단위 px). m-으로 시작하는 값은 휴대폰(폭 640px 이하) 전용입니다. ── */
  --pack-width: 112;           /* 게임팩 너비 (높이는 비율에 맞춰 자동) */
  --pack-gap: 24;              /* 게임팩 사이 간격 */
  --row-gap: 16;               /* 게임팩 줄 사이 간격 */
  --pack-speed: 32;            /* 게임팩이 1초에 흐르는 거리 (윗줄 오른쪽·아랫줄 왼쪽, 아랫줄은 조금 느림) */
  --pack-tilt: 9;              /* 끌거나 던질 때 게임팩이 기우는 최대 각도(도) */
  --big-pack: 176;             /* 기록 화면: 게임팩 너비 */
  --m-pack-width: 112;         /* 휴대폰: 게임팩 너비 (게임 이름 5글자 정도가 한 줄에 들어가는 크기) */
  --m-pack-gap: 16;            /* 휴대폰: 게임팩 사이 간격 */
  --m-big-pack: 112;           /* 휴대폰: 기록 화면 게임팩 너비 */

  /* The LCD's four greens, darkest first, and the faint grid of its screen. */
  --lcd: #8bac0f;
  --lcd-ink: #0f380f;
  --lcd-mid: #306230;
  --lcd-light: #9bbc0f;
  --lcd-grid: rgba(15, 56, 15, .05);
  /* Active sizes: PC here, phones in the block below. */
  --a-pack: calc(var(--pack-width) * 1px);
  --a-pack-gap: calc(var(--pack-gap) * 1px);
  --a-big: calc(var(--big-pack) * 1px);
  /* A cartridge's name in its label window, relative to the cartridge's own width (cqi). */
  --px-pack: max(12px, 11cqi);
}
/* The pixel font is drawn on a 16-dot grid: its type stays crisp on whole multiples of 8px. */
@supports (width: round(nearest, 1px, 1px)) {
  .games { --px-pack: max(16px, round(nearest, 11cqi, 8px)); }
}

/* The pixel font's space is half a cell wide, which leaves Korean words looking far apart; a quarter cell (four dots, about
   the space of an ordinary Korean typeface) keeps the words together. */
.gs { position: relative; display: grid; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(0deg, var(--lcd-grid) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--lcd-grid) 0 1px, transparent 1px 4px), var(--lcd); color: var(--lcd-ink); font-family: "NeoDunggeunmo", var(--font-body); font-weight: 400; font-synthesis: none; text-align: left; word-spacing: -.25em; }
/* The rows and the record share one place on the screen; behind an open record the rows stay, very faint. */
.gs-select, .gs-detail { grid-area: 1 / 1; min-width: 0; }
/* The screen's edge: a thin mid-green line and a soft shadow at the top, as if the LCD sat a little below its glass
   (2026-10-14 user choice among thin frames). The glass lies over the cartridges, which slide under it, and takes no press. */
.gs::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--lcd-mid), inset 0 6px 12px rgba(15, 56, 15, .45); pointer-events: none; }
.gs[data-state="detail"] .pack-rows { opacity: .06; }
.gs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Each row keeps 48px of room above its cartridges for the pointer's ▼ and a lifted cartridge. Its -32px margin overlaps
   exactly the gap and the bottom padding of the row before, never that row's cartridges, so one row's cartridges sit 48px
   below the other's. */
.pack-rows { display: flex; flex-direction: column; gap: calc(var(--row-gap) * 1px); padding: 24px 0 16px; }
.pack-row { overflow: hidden; margin-top: -32px; padding: 48px 0 16px; cursor: grab; touch-action: pan-y; user-select: none; }
.pack-row.is-dragging { cursor: grabbing; }
.pack-row.is-dragging .pack { pointer-events: none; }
.pack-track { display: flex; width: max-content; padding: 0 24px; }
.pack-track.is-looping { padding: 0; }
.pack { position: relative; display: block; flex: none; container-type: inline-size; width: var(--a-pack); aspect-ratio: 440 / 540; margin-right: var(--a-pack-gap); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; filter: drop-shadow(calc(var(--a-pack) * .036) calc(var(--a-pack) * .036) 0 rgba(15, 56, 15, .4)); }
.pack-shell { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* The four shell images, toned down so they sit together on the green: mustard, warm grey, grape, charcoal. */
.pack-shell.is-gray { filter: saturate(.4) sepia(.25) brightness(1.04); }
.pack-shell.is-yellow { filter: saturate(.55) sepia(.35) brightness(.86); }
.pack-shell.is-purple { filter: saturate(.5) sepia(.2) brightness(.95); }
.pack-shell.is-black { filter: sepia(.35) brightness(1.3); }
/* The label window measured on the shell images: left 11.2%, top 25.9%, 77.6% × 60.4%. */
.pack-art { position: absolute; left: 10.8%; top: 25.5%; width: 78.4%; height: 61.2%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6%; background: var(--lcd-ink); color: var(--lcd-light); }
.pack-img { width: 100%; height: 100%; object-fit: cover; }
.pack-name { padding: 8% 4%; font-size: var(--px-pack); line-height: 1.5; text-align: center; word-break: keep-all; }
/* Pointing at a cartridge: a down arrow above it and a pixel frame a little outside its edge (notched corners, like old menus). */
.pack::before { content: "▼"; position: absolute; left: 50%; bottom: 100%; z-index: 2; margin-bottom: 14px; color: var(--lcd-ink); font-size: max(14px, calc(var(--a-pack) * .12)); line-height: 1; opacity: 0; transform: translateX(-50%); }
.pack::after { content: ""; position: absolute; inset: -10px; z-index: 2; opacity: 0; pointer-events: none; box-shadow: 0 -4px 0 0 var(--lcd-ink), 0 4px 0 0 var(--lcd-ink), -4px 0 0 0 var(--lcd-ink), 4px 0 0 0 var(--lcd-ink); }
.pack:focus-visible::before, .pack.is-selected::before, .pack:focus-visible::after, .pack.is-selected::after { opacity: 1; }
.pack:focus-visible { outline: none; }

/* Record: the cartridge, large, beside its name, platform and genre, then play time and achievements side by side, then
   the one-line review. Dashed rules part them. A press anywhere on the screen goes back (the hint blinks at the bottom). */
.gs-detail { position: relative; display: grid; grid-template-columns: var(--a-big) minmax(0, 1fr); align-items: center; column-gap: 40px; padding: 32px 48px 64px; cursor: pointer; }
.gs-big { width: var(--a-big); }
.gs-big .pack { width: 100%; margin: 0; cursor: default; }
.gs-big .pack::before, .gs-big .pack::after { content: none; }
.gs-record { display: grid; gap: 12px; }
.gs-name { margin: 0; font-size: 32px; font-weight: 400; line-height: 1.25; outline: none; word-break: keep-all; }
.gs-info, .gs-stat, .gs-note { margin: 0; padding-top: 12px; border-top: 3px dashed var(--lcd-mid); }
.gs-info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.gs-info div:not([hidden]) { display: contents; }
.gs-info dt, .gs-stat dt { font-size: 16px; line-height: 1.5; }
.gs-info dd { margin: 0; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.gs-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gs-stat dd { margin: 4px 0 0; font-size: 24px; line-height: 1.25; word-break: keep-all; }
/* Achievements are short records in words (a rank, a level, an ending), so they read at body size, one part per line. */
.gs-stat dd[data-field="achievements"] { font-size: 16px; line-height: 1.5; white-space: pre-line; }
.gs-note { font-size: 16px; line-height: 1.5; }
.gs-exit { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; font-size: 16px; line-height: 1.5; text-align: center; pointer-events: none; }

/* Phones: smaller cartridges, and the record reads down the middle under its cartridge (the screen grows to fit it). */
@media (max-width: 640px) {
  .games { --a-pack: calc(var(--m-pack-width) * 1px); --a-pack-gap: calc(var(--m-pack-gap) * 1px); --a-big: calc(var(--m-big-pack) * 1px); }
  .pack-track { padding: 0 16px; }
  .gs-detail { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 24px; padding: 24px 20px 64px; }
  .gs-record { width: 100%; text-align: center; }
  .gs-name { font-size: 24px; }
  /* Platform and genre: two centred columns, label above value (one alone takes the row). */
  .gs-info, .gs-stat { display: flex; justify-content: center; gap: 16px; }
  /* Play time and achievements stack: a long time such as 7,195.6시간 needs the whole row. */
  .gs-stat { flex-direction: column; gap: 12px; }
  .gs-info div:not([hidden]), .gs-stat div:not([hidden]) { display: block; flex: 1 1 0; min-width: 0; }
  .gs-info dd, .gs-stat dd { margin-top: 4px; }
}

/* Motion only when the visitor has not asked to reduce it. */
@media (prefers-reduced-motion: no-preference) {
  /* games.js moves the looping rows and writes --tilt: cartridges lean from their bottom edge while a row is thrown. */
  .pack-track.is-looping { will-change: transform; }
  .pack-track.is-looping .pack { rotate: var(--tilt, 0deg); transform-origin: 50% 100%; }
  .pack { transition: transform 160ms steps(2); }
  .pack-rows { transition: opacity .3s steps(3); }
  .gs-detail.is-on .gs-record { animation: gs-fade .36s steps(3) .3s both; }
  .gs-exit { animation: gs-blink 1.4s steps(1) infinite; }
  @keyframes gs-blink { 50% { opacity: 0; } }
  @keyframes gs-bob { 50% { translate: 0 -4px; } }
  @keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pack-rows .pack:hover { transform: translateY(-8px); }
  .pack-rows .pack:hover::before, .pack-rows .pack:hover::after { opacity: 1; }
  .pack-rows .pack:hover::before, .pack:focus-visible::before { animation: gs-bob .6s steps(2) infinite; }
}
/* Off screen the rows stop (games.js) and so does the hint's blinking. */
.gs.is-away .gs-exit { animation-play-state: paused; }
/* Without motion the rows stand still and scroll sideways instead. */
@media (prefers-reduced-motion: reduce) {
  .pack-row { overflow-x: auto; }
}