/* Shared print vocabulary for the standalone game and the story-card page. */
:root {
  --paper: #f7f4ec;
  --paper-deep: #e8e2d5;
  --card-paper: #fbf9f3;
  --ink: #1a1917;
  --ink-soft: #68635a;
  --accent: #b53b2c;
  --red: var(--accent);
  --absent: #aaa397;
  --line: rgba(26, 25, 23, .22);
  --serif: "Noto Serif KR Variable", "Noto Serif KR", serif;
  --sans: "Noto Sans KR Variable", "Noto Sans KR", sans-serif;
  --font-serif: var(--serif);
  --font-sans: var(--sans);
  --page-width: 960px;
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --control-height: 2.75rem;
}

button, a { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
:where(button, a, summary):focus:not(:focus-visible) { outline: none; }

.game-header, .cards-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(calc(100% - 2 * var(--page-gutter)), var(--page-width));
  margin: 0 auto;
  padding: max(.75rem, env(safe-area-inset-top)) 0 .75rem;
  border-bottom: 1px solid var(--ink);
}
.brand, .cards-brand { display: inline-flex; min-height: var(--control-height); align-items: center; gap: .6rem; padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.brand-mark, .cards-brand img { display: block; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.site-beta { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: .2rem .38rem; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.play-menu { position: relative; }
.play-menu > summary, .icon-button { display: inline-flex; min-width: var(--control-height); min-height: var(--control-height); align-items: center; justify-content: center; gap: .65rem; padding: 0 .6rem; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.play-menu > summary::-webkit-details-marker { display: none; }
.play-menu > summary::after { content: ""; width: .35rem; height: .35rem; margin-top: -.2rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; }
.play-menu[open] > summary::after { transform: translateY(.2rem) rotate(225deg); }
.play-menu > summary:hover, .icon-button:hover { background: var(--paper-deep); }
.play-menu-panel { position: absolute; z-index: 5; top: calc(100% + .5rem); right: 0; width: 16rem; padding: .35rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 8px 24px rgba(26,25,23,.08); }
.play-menu-panel > a { display: flex; min-height: var(--control-height); align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; color: var(--ink); font-size: .875rem; font-weight: 500; text-decoration: none; }
.play-menu-panel > a:hover, .play-menu-panel > a:focus-visible, .play-menu-panel [aria-current="page"] { background: var(--paper-deep); }
.play-menu-panel small { color: var(--ink-soft); font-size: .75rem; white-space: nowrap; }
.primary-button, .submit-button, .cards-action-button { min-height: var(--control-height); border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color 180ms ease; }
.primary-button:hover, .submit-button:hover, .cards-action-button:hover { background: #38352e; }

@media (prefers-reduced-motion: reduce) {
  .play-menu > summary::after { transition: none; }
}