/*
 * Shared shell for the Juraku browser games.
 *
 * These games live in public/ as plain static files, NOT as Next routes, and
 * that is deliberate — see docs/games.md. The consequence for this
 * stylesheet is that it cannot use Tailwind or the site's globals.css, because
 * neither is compiled for anything under public/. So the handful of tokens the
 * games need are restated here.
 *
 * They are copied from src/app/[locale]/globals.css and must stay in step with
 * it by hand. That is a real cost, accepted because the alternative — pulling
 * the games into the compiled site — is what this whole arrangement exists to
 * avoid. There are eight of them and they are the brand's fixed palette, not
 * values anyone tunes week to week.
 */
:root {
  --paper: #0b0b0d;
  --paper-dim: #17171b;
  --card: #17171b;
  --void: #000000;
  --ink: #f2e7d3;
  --red: #c7271c;
  --red-dark: #8e1b16;
  --ember: #e6564c;
  --orange: #e26a2c;
  --gold: #e7b84b;
  --neon: #3b82f6;

  /* Matcha green. The one colour the site does not already define: nothing on
     izakayajuraku.com is green, but an edamame pod has to be, and the beer
     games need a "good result" colour that is not the brand red (which reads
     as failure) or the brand gold (which is reserved for the rare result).
     Picked to sit at the same saturation and value as --orange so it belongs
     to the same set rather than looking borrowed. */
  --matcha: #7cb342;
  --matcha-dark: #4a7327;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;

  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  /* The games are hold-and-drag; without this every press also scrolls the
     page or triggers pull-to-refresh on Android Chrome. */
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  /* Dynamic viewport height, not 100vh: on iOS Safari 100vh is the height with
     the toolbars hidden, so the pour button sat under the toolbar until the
     user scrolled — on a page that deliberately does not scroll. */
  min-height: 100dvh;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Nothing on these pages should be draggable or selectable by accident, but
   the results text has to stay readable to a screen reader and copyable if
   someone wants to share a score. */
.jg-select { -webkit-user-select: text; user-select: text; }

a { color: var(--ember); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Chrome ------------------------------------------------------------ */

.jg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(242, 231, 211, 0.1);
  flex: none;
}

.jg-back {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(242, 231, 211, 0.7);
  transition: color var(--dur-fast) var(--ease-out);
}
.jg-back:hover { color: var(--ink); }

.jg-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jg-title span {
  display: block;
  font-family: var(--font-jp);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(242, 231, 211, 0.5);
  text-transform: none;
}

.jg-icon-btn {
  appearance: none;
  border: 1px solid rgba(242, 231, 211, 0.18);
  background: transparent;
  color: rgba(242, 231, 211, 0.75);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.jg-icon-btn:hover { border-color: rgba(242, 231, 211, 0.4); color: var(--ink); }

/*
 * The language switch carries a word, not a glyph. It used to be a single
 * kanji in a circle, which told an English reader nothing and a Japanese
 * reader almost as little — 語 on its own just means "language".
 *
 * Labelled in the language it switches TO, which is the convention the rest
 * of the site already uses (see `language.switchTo` in messages/): an English
 * page offers 日本語, a Japanese page offers English. Both are legible to the
 * person who wants them, which a translated label never is.
 */
.jg-lang {
  appearance: none;
  border: 1px solid rgba(242, 231, 211, 0.18);
  background: transparent;
  color: rgba(242, 231, 211, 0.75);
  height: 2.1rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.jg-lang:hover { border-color: rgba(242, 231, 211, 0.4); color: var(--ink); }
/* The label is in the OTHER language, so it carries its own lang on an inner
   span — which is what picks the right face for kana, and what keeps the
   button's own aria-label (written in the page's language) from being
   announced in the wrong voice. */
.jg-lang span:lang(ja) { font-family: var(--font-jp); }
.jg-icon-btn[aria-pressed="true"] { color: var(--gold); border-color: rgba(231, 184, 75, 0.45); }

/* ---- Stage ------------------------------------------------------------- */

.jg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* The canvas is the whole play surface; a stray drag must not scroll. */
  touch-action: none;
}

/*
 * Absolute, not a stretched in-flow block, and this is load-bearing.
 *
 * A canvas sized with width/height:100% still reports its bitmap dimensions as
 * its intrinsic size, so an in-flow canvas whose buffer is set from its own
 * measured box is a feedback loop: box sizes buffer, buffer sizes box. It does
 * not oscillate forever, it just settles somewhere wrong — this one settled
 * square, 815x815 inside a 815x531 stage, with the bottom of the glass under
 * the controls. Taking it out of flow means the stage's height is decided by
 * the flex layout alone and the canvas only ever reads it.
 */
.jg-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---- Readout ----------------------------------------------------------- */

.jg-readout {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  width: 100%;
  padding: 0 1rem;
}

.jg-verdict {
  margin: 0;
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.jg-verdict[data-show="true"] { opacity: 1; transform: none; }

.jg-sub {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: rgba(242, 231, 211, 0.7);
  min-height: 1.2em;
}

/* ---- Controls ---------------------------------------------------------- */

.jg-controls {
  flex: none;
  padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  border-top: 1px solid rgba(242, 231, 211, 0.1);
  background: linear-gradient(to top, var(--void), transparent);
}

.jg-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(242, 231, 211, 0.6);
  text-align: center;
  min-height: 1.2em;
}

.jg-btn {
  appearance: none;
  border: 1px solid rgba(242, 231, 211, 0.25);
  background: transparent;
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.jg-btn:hover { border-color: rgba(242, 231, 211, 0.5); background: rgba(242, 231, 211, 0.05); }
.jg-btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }

/* ---- Panels (roster, results) ------------------------------------------ */

.jg-panel {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 13, 0.94);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  overflow-y: auto;
  z-index: 5;
}
.jg-panel[hidden] { display: none; }

.jg-panel h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.jg-panel p { margin: 0; text-align: center; color: rgba(242, 231, 211, 0.72); font-size: 0.9rem; line-height: 1.5; }

.jg-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; width: min(100%, 26rem); align-self: center; }
.jg-players li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(242, 231, 211, 0.14);
  border-radius: 0.5rem;
  background: var(--card);
  font-size: 0.9375rem;
}
.jg-players li .jg-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-players li .jg-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.jg-players li[data-rank="1"] { border-color: rgba(231, 184, 75, 0.5); }
.jg-players li[data-rank="1"] .jg-score { color: var(--gold); }
.jg-players li[data-rank="last"] { border-color: rgba(230, 86, 76, 0.45); }
.jg-players li[data-current="true"] { border-color: rgba(242, 231, 211, 0.55); }

.jg-field { display: flex; gap: 0.5rem; width: min(100%, 26rem); align-self: center; }
.jg-field input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(242, 231, 211, 0.25);
  background: var(--paper-dim);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px minimum, or iOS Safari zooms the page on focus */
  -webkit-user-select: text;
  user-select: text;
}
.jg-field input::placeholder { color: rgba(242, 231, 211, 0.4); }
.jg-field input:disabled { opacity: 0.45; cursor: not-allowed; }

/* Roster count line, under the list. */
#player-count {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(242, 231, 211, 0.55);
}

.jg-remove {
  appearance: none; border: none; background: transparent;
  color: rgba(242, 231, 211, 0.45); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 0.25rem;
}
.jg-remove:hover { color: var(--ember); }

/* Screen-reader-only, for the live region and canvas descriptions. */
.jg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .jg-verdict { transition: none; }
}