/* Kakure: Cross of Kyushu - the ukiyo-e skin.
 *
 * Loaded after app.css. app.css owns layout and behaviour; this file owns the
 * look: an Edo-period night in Kyushu - indigo sky, washi paper, sumi ink,
 * vermilion seals and gold leaf. Every colour and face is a token here so the
 * tour, the intro and the effects layer all read from one palette.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --ai: #1b2a4a;            /* indigo, the night sky */
  --ai-deep: #0e1628;
  --night: #080d18;
  --sumi: #16130f;          /* ink */
  --sumi-soft: #2a241d;
  --washi: #f1e6cf;         /* paper */
  --washi-dim: #d8c7a5;
  --washi-shade: #b9a47c;
  --shu: #c8432b;           /* vermilion seal */
  --shu-deep: #8e2116;
  --kin: #d6a84c;           /* gold leaf */
  --kin-pale: #f0d896;
  --matsu: #415c3c;         /* pine */
  --sakura: #eab9bb;
  --fuji: #8c7bab;          /* wisteria */
  --text: #f2e8d2;
  --text-dim: #b8ab92;
  --text-faint: #857a66;

  /* Soft Lantern: a soft decorative serif for titles, a rounded sans for
     everything you read while playing, and a bold rough brush for the kanji. */
  --font-display: 'Kaisei Decol', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --font-serif: 'Kaisei Decol', 'Hiragino Mincho ProN', Georgia, serif;
  --font-body: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brush: 'Yuji Boku', 'Kaisei Decol', serif;

  --ease-ink: cubic-bezier(.22, .9, .24, 1);
  --ease-swell: cubic-bezier(.5, 0, .2, 1.4);
  --shadow-deep: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --gold-rule: linear-gradient(90deg, transparent, var(--kin) 18%, var(--kin-pale) 50%, var(--kin) 82%, transparent);

  /* Seigaiha (blue ocean waves), asanoha (hemp leaf) and paper grain as data
     URIs, so a pattern never costs a request. */
  --pattern-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23d6a84c' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 40a20 20 0 0 1 40 0M40 40a20 20 0 0 1 40 0M-20 20a20 20 0 0 1 40 0M20 20a20 20 0 0 1 40 0M60 20a20 20 0 0 1 40 0'/%3E%3Cpath d='M6 40a14 14 0 0 1 28 0M46 40a14 14 0 0 1 28 0M26 20a14 14 0 0 1 28 0M-14 20a14 14 0 0 1 28 0M66 20a14 14 0 0 1 28 0'/%3E%3Cpath d='M12 40a8 8 0 0 1 16 0M52 40a8 8 0 0 1 16 0M32 20a8 8 0 0 1 16 0M-8 20a8 8 0 0 1 16 0M72 20a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23d6a84c' stroke-opacity='.10' stroke-width='.8'%3E%3Cpath d='M30 0v104M0 17.3l60 34.7M60 17.3L0 52M0 52l60 34.7M60 52L0 86.7M30 0L0 52l30 52 30-52zM0 17.3L30 34.7 60 17.3M0 86.7l30-17.3 30 17.3'/%3E%3C/g%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------- the app's own variables, re-inked
   Both selectors, because app.css scopes its earlier Kakure palette to
   [data-game="kakure"] and that would otherwise win on specificity. */
:root, :root[data-game="kakure"] {
  --bg: var(--night);
  --sea: #13203a;
  --sea-deep: #0b1426;
  --panel: rgba(13, 19, 34, .86);
  --panel-2: rgba(30, 38, 60, .72);
  --raised: #27324d;
  --ink: var(--text);
  --ink-dim: #d4c7ac;
  --muted: var(--text-dim);
  --line: rgba(214, 168, 76, .20);
  --line-soft: rgba(214, 168, 76, .10);
  --gold: var(--shu);
  --gold-dim: #a5503a;
  --good: #7f9b5a;
  --bad: var(--shu);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: var(--shadow-deep);
  --font: var(--font-body);
  --display: var(--font-display);
  --labels: var(--font-body);
  --clay: #a63a24; --wood: #415c3c; --silk: #d8cbb0; --rice: #c9a43c; --iron: #6a7486;
}

html, body {
  background: var(--night);
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--text);
}
:root[data-game="kakure"] body { font-family: var(--font-body); }
body { position: relative; }
.app, .signin { position: relative; z-index: 1; }

h1, h2, h3, h4,
:root[data-game="kakure"] h1, :root[data-game="kakure"] h2, :root[data-game="kakure"] h3,
:root[data-game="kakure"] .pcard__name, :root[data-game="kakure"] .modal h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
}
:root[data-game="kakure"] .small, :root[data-game="kakure"] .muted.small,
:root[data-game="kakure"] .pcard__meta, :root[data-game="kakure"] .rescard__n,
:root[data-game="kakure"] .topbar__sub {
  font-family: var(--font-body);
  letter-spacing: .02em;
}
::selection { background: rgba(200, 67, 43, .45); color: #fff; }
a { color: var(--kin-pale); }

/* ------------------------------------------------------------------ buttons */
.btn, :root[data-game="kakure"] .btn {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  border-radius: 3px;
  border: 1px solid rgba(214, 168, 76, .38);
  background: linear-gradient(180deg, rgba(42, 52, 80, .92), rgba(22, 29, 48, .95));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08), 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .2s, border-color .2s, transform .12s var(--ease-ink), box-shadow .2s, opacity .2s;
}
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(56, 68, 102, .95), rgba(28, 36, 60, .98));
  border-color: var(--kin);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .12), 0 0 0 1px rgba(214, 168, 76, .25), 0 6px 18px rgba(0, 0, 0, .4);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn--primary, :root[data-game="kakure"] .btn--primary {
  color: #fff6e4;
  border-color: #e7b25d;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 210, 150, .28), transparent 55%),
    linear-gradient(180deg, #d24f33, #9b2a17);
  text-shadow: 0 1px 0 rgba(60, 10, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .35), 0 0 0 1px rgba(80, 14, 4, .6), 0 6px 18px rgba(140, 30, 10, .35);
}
.btn--primary:hover:not(:disabled) {
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 220, 160, .36), transparent 55%),
    linear-gradient(180deg, #e05a3c, #a8301b);
  border-color: var(--kin-pale);
}
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover:not(:disabled) { background: rgba(214, 168, 76, .10); }
.btn--danger { border-color: rgba(200, 67, 43, .6); color: #ffc2b4; }
.btn:focus-visible, .icon-btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--kin-pale); outline-offset: 2px;
}

.icon-btn {
  border-radius: 50%;
  border: 1px solid rgba(214, 168, 76, .45);
  background: radial-gradient(circle at 35% 30%, rgba(46, 58, 92, .95), rgba(12, 17, 30, .95));
  color: var(--kin-pale);
  font-family: var(--font-display);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.icon-btn--fit { border-radius: 999px; padding: 0 12px; letter-spacing: .06em; }
.icon-btn:hover { background: radial-gradient(circle at 35% 30%, rgba(70, 84, 128, .95), rgba(20, 27, 46, .95)); border-color: var(--kin); }

input, select {
  background: rgba(8, 13, 24, .7);
  border: 1px solid rgba(214, 168, 76, .28);
  border-radius: 3px;
  color: var(--text);
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus { outline: 2px solid rgba(214, 168, 76, .6); outline-offset: -1px; }
select option { background: #121a2e; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10, 15, 28, .96), rgba(14, 22, 40, .9)),
    var(--pattern-seigaiha);
  background-size: auto, 80px 40px;
  border-bottom: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  z-index: 10;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold-rule); opacity: .8;
}
.topbar__home img, html[data-game-type="kakure"] .topbar__home img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--kin), 0 0 0 4px rgba(214, 168, 76, .15), 0 4px 12px rgba(0, 0, 0, .5);
}
.topbar__home:hover { background: rgba(214, 168, 76, .08); }
.topbar__title h1 { font-size: 18px; letter-spacing: .04em; color: var(--washi); }
.topbar__title p { font-size: 12.5px; color: var(--text-dim); letter-spacing: .02em; }
.act-mark {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 3px 12px 3px 4px; border-radius: 999px;
  background: rgba(8, 13, 24, .6); border: 1px solid rgba(214, 168, 76, .3);
  font-family: var(--font-display); font-size: 12.5px; color: var(--text-dim);
}
.act-mark__seal {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 18px; line-height: 1; color: #fff3e0;
  background: radial-gradient(circle at 35% 30%, #e0603f, #9b2a17);
  box-shadow: inset 0 0 0 1.5px rgba(255, 220, 190, .45), 0 2px 6px rgba(0, 0, 0, .5);
}
.act-mark[data-season="autumn"] .act-mark__seal { background: radial-gradient(circle at 35% 30%, #e48a3a, #8f3a12); }
.act-mark[data-season="winter"] .act-mark__seal { background: radial-gradient(circle at 35% 30%, #8aa0c4, #33476e); }
.act-mark b { color: var(--washi); font-weight: 700; letter-spacing: .06em; }
.clock { border-color: rgba(214, 168, 76, .3); color: var(--text-dim); font-family: var(--font-display); }
.icon-toggle {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(214, 168, 76, .35); background: transparent; color: var(--kin-pale);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.icon-toggle:hover { background: rgba(214, 168, 76, .1); border-color: var(--kin); }
.icon-toggle svg { width: 20px; height: 20px; }
.icon-toggle[aria-pressed="false"] { color: var(--text-faint); }

/* ------------------------------------------------------------------ lobby */
.lobby { position: relative; padding: 0 18px 80px; }
.lobby__inner { max-width: 980px; gap: 26px; }
.lobby__logo { display: none; }
.lobby-hero {
  position: relative; display: grid; justify-items: center; text-align: center;
  padding: min(9vh, 80px) 12px 18px; gap: 14px;
}
.lobby-hero__kanji {
  font-family: var(--font-brush); color: var(--washi);
  font-size: clamp(64px, 12vw, 132px); line-height: .9; letter-spacing: .08em;
  text-shadow: 0 0 40px rgba(214, 168, 76, .25), 0 6px 24px rgba(0, 0, 0, .6);
  writing-mode: horizontal-tb;
  animation: brush-in 1.6s var(--ease-ink) both;
}
.lobby-hero__title {
  font-family: var(--font-display); font-weight: 800; color: var(--kin-pale);
  font-size: clamp(30px, 5.4vw, 58px); letter-spacing: .32em; text-indent: .32em;
  text-transform: uppercase; line-height: 1;
  background: linear-gradient(180deg, #fff1c8 0%, var(--kin) 55%, #9c7226 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .6));
  animation: rise-in 1.4s .3s var(--ease-ink) both;
}
.lobby-hero__sub {
  font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: clamp(17px, 2.2vw, 22px);
  color: var(--washi-dim); max-width: 36rem; line-height: 1.45;
  animation: rise-in 1.4s .55s var(--ease-ink) both;
}
.lobby-hero__rule { width: min(420px, 70%); height: 1px; background: var(--gold-rule); animation: rule-in 1.6s .4s var(--ease-ink) both; }
.lobby-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; animation: rise-in 1.2s .8s var(--ease-ink) both; }
.lobby-hero__cta .btn { padding: 14px 24px; font-size: 15.5px; min-height: 50px; }
@keyframes brush-in {
  from { opacity: 0; filter: blur(14px); transform: scale(1.08); clip-path: inset(-40% 100% -40% -10%); }
  60% { clip-path: inset(-40% -10% -40% -10%); }
  to { opacity: 1; filter: none; transform: none; clip-path: inset(-60% -60% -60% -60%); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.lobby__head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.lobby__head h2, .section-title {
  font-size: 22px; letter-spacing: .12em; color: var(--washi);
  display: flex; align-items: center; gap: 12px;
}
.section-title__kanji, .lobby__head h2 .section-title__kanji {
  font-family: var(--font-brush); color: var(--shu); font-size: 26px; letter-spacing: 0;
}

/* Each saved game hangs like an ema - a wooden prayer plaque. */
.game-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.game-card {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden;
  align-items: stretch; border-radius: 6px;
  background: linear-gradient(180deg, #2b2016, #1a130d);
  border: 1px solid rgba(214, 168, 76, .35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease-ink), box-shadow .35s, border-color .35s;
  animation: rise-in .9s var(--ease-ink) both;
}
.game-card:nth-child(2) { animation-delay: .08s; } .game-card:nth-child(3) { animation-delay: .16s; }
.game-card:nth-child(4) { animation-delay: .24s; } .game-card:nth-child(5) { animation-delay: .32s; }
.game-card:hover { transform: translateY(-4px) rotate(-.3deg); border-color: var(--kin); box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 168, 76, .2); background: linear-gradient(180deg, #2b2016, #1a130d); }
.game-card.is-yours { border-color: var(--shu); background: linear-gradient(180deg, #2b2016, #1a130d); }
.game-card.is-yours::before {
  content: 'Your move'; position: absolute; z-index: 2; top: 12px; right: -34px; transform: rotate(35deg);
  background: var(--shu); color: #fff3e4; font-family: var(--font-display); font-size: 11px; letter-spacing: .14em;
  padding: 4px 40px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.game-card__art, .game-card__art.is-kakure {
  width: 100%; height: 132px; border: 0; border-radius: 0; object-fit: cover;
  filter: saturate(.9) contrast(1.05);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.game-card__main { padding: 0 16px 6px; margin-top: -26px; position: relative; }
.game-card__name { font-family: var(--font-display); font-size: 18px; color: var(--washi); letter-spacing: .03em; }
.game-card__meta { color: var(--text-dim); }
.game-card .seats { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 16px; }
/* The whole line shows, on two lines if it must, never cut off with "...". */
.game-card .game-card__meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.game-card__badge {
  justify-self: start; margin: 8px 16px 14px; border-radius: 2px; background: var(--shu); color: #fff3e4;
  font-family: var(--font-display); letter-spacing: .12em;
}
.game-card__badge.is-done { background: rgba(214, 168, 76, .15); color: var(--kin-pale); }
/* Delete sits on the plaque's lower corner, outside the card's own button. */
.game-slot { position: relative; display: grid; }
.game-card__delete {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; cursor: pointer;
  padding: 6px 12px; border-radius: 4px; font: inherit; font-size: 13px; letter-spacing: .04em;
  border: 1px solid rgba(214, 168, 76, .35); background: rgba(10, 15, 28, .6); color: var(--text-dim);
}
.game-card__delete:hover, .game-card__delete:focus-visible { color: #ffd9cc; border-color: var(--shu); }
.seat-dot { box-shadow: 0 0 0 1.5px rgba(241, 230, 207, .6); }

.notice { background: rgba(14, 20, 36, .8); border-color: rgba(214, 168, 76, .35); border-radius: 4px; }
.notice h4 { color: var(--kin-pale); font-family: var(--font-display); }

/* The host's table, and the invitation that brings friends to it. */
.admin, .circle-card {
  background: rgba(10, 15, 28, .82); backdrop-filter: blur(6px);
  border: 1px solid rgba(214, 168, 76, .28); border-radius: 6px; padding: 20px;
  box-shadow: var(--shadow-deep);
}
.admin h3 { font-size: 18px; letter-spacing: .08em; color: var(--washi); }
.admin h4 { font-size: 15px; letter-spacing: .06em; color: var(--kin-pale); margin: 8px 0 0; }
.admin__invite { display: grid; gap: 8px; padding: 14px 0; border-block: 1px solid var(--line-soft); }
.user-row { background: rgba(30, 38, 60, .6); border: 1px solid var(--line-soft); }
.tag { background: var(--shu); color: #fff3e4; border-radius: 2px; }
.tag--bot { background: rgba(214, 168, 76, .18); color: var(--kin-pale); }
.invite { background: transparent; border: 0; padding: 0; }
.invite h4 { font-family: var(--font-display); font-size: 16px; color: var(--washi); letter-spacing: .06em; }
.invite code { color: var(--kin-pale); }

.circle-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  background:
    linear-gradient(135deg, rgba(241, 230, 207, .97), rgba(226, 210, 178, .97)),
    var(--paper-grain);
  color: var(--sumi); border-color: rgba(120, 80, 30, .4);
  --ink: var(--sumi); --ink-dim: #4a4034; --muted: #6d6250; --text: var(--sumi); --text-dim: #5d5242;
  --line: rgba(22, 19, 15, .16); --line-soft: rgba(22, 19, 15, .08);
}
.circle-card .invite h4, .circle-card h3 { color: var(--sumi); }
.circle-card .invite code { color: var(--shu-deep); }
.circle-card .btn:not(.btn--primary) { background: rgba(255, 250, 238, .7); color: var(--sumi); border-color: rgba(22, 19, 15, .3); box-shadow: none; }
.circle-card .btn:not(.btn--primary):hover:not(:disabled) { background: #fffaf0; border-color: var(--shu); }
.circle-card .muted { color: #6d6250; }
.circle-card__seal {
  width: 74px; height: 74px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 30px; line-height: 1.05; color: #fff3e4; text-align: center;
  background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17);
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 200, .35), 0 6px 16px rgba(120, 30, 10, .35);
}
.circle-card__body { display: grid; gap: 8px; min-width: 0; }
.circle-card__body > h3 { font-size: 20px; letter-spacing: .06em; }

/* ------------------------------------------------------------------ game */
.board-wrap, html[data-game-type="kakure"] .board-wrap, :root[data-game="kakure"] .board-wrap {
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgba(30, 48, 84, .0), rgba(6, 10, 20, .55) 80%),
    var(--pattern-seigaiha),
    linear-gradient(180deg, #13223f 0%, #0c1830 60%, #0a1326 100%);
  background-size: auto, 80px 40px, auto;
  animation: sea-drift 60s linear infinite;
  overflow: hidden;
}
@keyframes sea-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 160px 40px, 0 0; } }
.board-host { z-index: 2; }
.board-wrap > .banner, .board-wrap > .dice-tray, .board-wrap > .board-tools { z-index: 6; }
.board-wrap.is-produced::after { content: ''; }

.banner {
  font-family: var(--font-display); letter-spacing: .04em; font-size: 15px;
  background: linear-gradient(180deg, rgba(241, 230, 207, .97), rgba(225, 208, 175, .97));
  color: var(--sumi); border: 1px solid rgba(120, 80, 30, .45); border-radius: 3px;
  padding: 10px 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.banner::before, .banner::after {
  /* the wooden rods of a hanging scroll */
  content: ''; position: absolute; top: -3px; bottom: -3px; width: 7px; border-radius: 3px;
  background: linear-gradient(90deg, #3a2414, #6b4426, #3a2414);
}
.banner::before { left: -5px; } .banner::after { right: -5px; }
.banner.is-waiting { color: #5d5242; border-color: rgba(120, 80, 30, .3); }
.banner .btn { background: var(--sumi); color: var(--washi); border-color: var(--sumi); box-shadow: none; }
.banner { animation: banner-in .6s var(--ease-ink) both; }
@keyframes banner-in { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(-10px -10px -10px -10px); } }

.dice-tray {
  background: radial-gradient(circle at 30% 20%, rgba(70, 46, 26, .96), rgba(34, 22, 12, .97));
  border: 1px solid rgba(214, 168, 76, .45); border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 10px 26px rgba(0, 0, 0, .5);
  padding: 8px 14px 8px 10px;
}
.dice-tray img { width: 44px; height: 44px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55)); }
.dice-tray #dice-total { font-family: var(--font-display); font-size: 24px; color: var(--washi); }
.dice-tray.is-seven #dice-total { color: #ff8a6e; text-shadow: 0 0 12px rgba(255, 90, 50, .5); }
.dice-tray__roll { font-size: 16px; padding: 12px 22px; }
.dice-tray.is-rolling { animation: tray-shake .12s linear infinite; }
@keyframes tray-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }

/* side panel: lacquered dark wood with a hemp-leaf weave */
.side {
  background: linear-gradient(180deg, rgba(10, 14, 26, .9), rgba(14, 19, 34, .94)), var(--pattern-asanoha);
  background-size: auto, 60px 104px;
  border-left: 1px solid rgba(214, 168, 76, .25);
  backdrop-filter: blur(6px);
}
.players { border-bottom: 1px solid var(--line); gap: 9px; }
/* Each player is a washi tag, their colour a seal on the corner. */
.pcard {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(241, 230, 207, .96), rgba(222, 205, 170, .95));
  color: var(--sumi); border: 1px solid rgba(120, 80, 30, .35); border-radius: 3px;
  --ink: var(--sumi); --muted: #6d6250; --text-dim: #5d5242;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease-ink), box-shadow .35s;
}
.pcard::after { content: ''; position: absolute; inset: 0; background: var(--paper-grain); opacity: .5; pointer-events: none; mix-blend-mode: multiply; }
.pcard.is-turn {
  background: linear-gradient(135deg, #fff6df, #ecdab0);
  border-color: var(--shu); transform: translateX(-4px);
  box-shadow: 0 0 0 1px var(--shu), 0 8px 22px rgba(200, 67, 43, .35);
}
.pcard.is-turn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--shu);
  animation: turn-glow 2.4s ease-in-out infinite;
}
@keyframes turn-glow { 50% { box-shadow: 0 0 14px 2px rgba(200, 67, 43, .8); } }
.pcard__name { color: var(--sumi); font-size: 15px; }
.pcard.is-you .pcard__name::after { color: #8a7d66; }
.pcard__meta { color: #5d5242; font-size: 12px; }
.pcard__vp {
  font-family: var(--font-display); font-size: 22px; color: #fff3e4;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9583a, #8e2116);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 200, .35), 0 3px 8px rgba(100, 20, 5, .4);
}
.pcard__pip { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(22, 19, 15, .35); }
.pcard__score-break, .pcard__progress { color: #5d5242; }

.side__tabs { border-bottom: 1px solid var(--line); }
.tab { font-family: var(--font-display); letter-spacing: .1em; color: var(--text-dim); }
.tab.is-active { color: var(--washi); border-bottom-color: var(--shu); }
.log { font-size: 13.5px; }
.log__text { color: var(--ink-dim); }
.log__row.is-turn .log__text { color: var(--washi); font-family: var(--font-display); }
.log__row.is-win .log__text, .log__row.is-award .log__text { color: var(--kin-pale); }
.log__row.is-chat .log__text b { color: var(--kin-pale); }
.log__row { animation: log-in .5s var(--ease-ink) both; }
@keyframes log-in { from { opacity: 0; transform: translateX(-6px); } }
.bank__bar { background: rgba(255, 255, 255, .06); }

/* the dock: a low lacquered table edge */
.dock {
  background: linear-gradient(180deg, rgba(36, 24, 15, .96), rgba(20, 13, 8, .98));
  border-top: 0; position: relative;
  box-shadow: inset 0 1px 0 rgba(214, 168, 76, .45), 0 -10px 30px rgba(0, 0, 0, .45);
}
.dock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-rule); }
.devhand, .awards:not(:empty) { border-left-color: rgba(214, 168, 76, .2); }

/* Resource cards drawn like hanafuda: art framed in black lacquer and red. */
.rescard, :root[data-game="kakure"] .rescard {
  width: 66px; border-radius: 5px; padding: 4px 4px 0;
  background: linear-gradient(180deg, #f3e8d0, #e2d2b0); color: var(--shu-deep);
  border: 1px solid #1a120b;
  box-shadow: inset 0 0 0 2px #1a120b, inset 0 0 0 3px rgba(200, 67, 43, .7), 0 6px 14px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease-swell), box-shadow .3s;
}
.rescard img, :root[data-game="kakure"] .rescard img { border-radius: 2px; }
.rescard:not(.is-zero):hover { transform: translateY(-8px) rotate(-2deg); box-shadow: inset 0 0 0 2px #1a120b, inset 0 0 0 3px rgba(200, 67, 43, .7), 0 14px 22px rgba(0, 0, 0, .55); }
.rescard.is-zero { opacity: .32; filter: grayscale(.8) brightness(.8); }
.rescard__n, :root[data-game="kakure"] .rescard__n {
  top: -6px; right: -6px; bottom: auto; min-width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0603f, #8e2116); color: #fff3e4;
  font-family: var(--font-display); font-size: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rescard.is-bump { animation: card-bump .7s var(--ease-swell); }
@keyframes card-bump { 30% { transform: translateY(-14px) scale(1.08); } }
:root[data-game="kakure"] .kakure-card-label {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; color: var(--shu-deep);
  text-transform: capitalize;
}
.devcard, :root[data-game="kakure"] .devcard {
  width: 62px; border-radius: 5px; padding: 4px 4px 0;
  background: linear-gradient(180deg, #f3e8d0, #e2d2b0); border: 1px solid #1a120b;
  box-shadow: inset 0 0 0 2px #1a120b, inset 0 0 0 3px rgba(214, 168, 76, .8), 0 6px 14px rgba(0, 0, 0, .5);
}
:root[data-game="kakure"] .devcard.is-vp { background: linear-gradient(180deg, #2a2016, #14100b); color: var(--kin-pale); }
.empty-hand { color: var(--text-dim); font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 15px; }
.react-btn { background: rgba(30, 38, 60, .6); border-color: rgba(214, 168, 76, .35); }

.dock__actions .btn > span:first-child { font-size: 13px; letter-spacing: .06em; }
.turn-guide { background: rgba(214, 168, 76, .08); border-color: rgba(214, 168, 76, .25); border-radius: 3px; }
.cost-item__icon { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }

/* board pieces */
.tok-circle { fill: url(#tokWashi); stroke: #6b4a22; stroke-width: .022; filter: url(#tokShadow); }
.tok-text { font: 700 .38px var(--font-display); fill: #1d1710; }
.tok-text.is-red, .tok-pips.is-red { fill: #b2311c; }
.tok-pips { fill: #2a221a; }
.tok-blocked { opacity: .3; }
.port-badge { fill: rgba(8, 13, 24, .92); stroke-width: .03; }
.port-text { font: 700 .24px var(--font-display); fill: var(--washi); letter-spacing: .01px; }
.port-line { stroke: rgba(241, 230, 207, .45); stroke-dasharray: .06 .06; }
.spot { fill: var(--kin-pale); stroke: #5b3c12; }
.spot-road { stroke: var(--kin-pale); }
.spot-hex { fill: var(--kin-pale); stroke: var(--kin-pale); }
.hex-ink { fill: none; stroke: rgba(20, 14, 8, .7); stroke-width: .035; stroke-linejoin: round; pointer-events: none; }
.shore { fill: #e9dcbc; opacity: .95; filter: url(#shoreSoft); pointer-events: none; }
.shore-ink { fill: none; stroke: rgba(214, 168, 76, .55); stroke-width: .03; pointer-events: none; }

/* Something new on the island blooms like ink dropped on wet paper. */
.is-new-piece { animation: ink-bloom 1.1s var(--ease-ink) both; transform-box: fill-box; transform-origin: center; }
@keyframes ink-bloom {
  0% { opacity: 0; transform: scale(.2) translateY(-.6px); filter: blur(.06px); }
  55% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: none; filter: none; }
}
.bloom-ring { fill: none; stroke: var(--kin-pale); stroke-width: .05; pointer-events: none; animation: ring-out 1.2s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes ring-out { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(2.4); } }
.is-going-under { animation: sink-mist 1.4s var(--ease-ink) both; transform-box: fill-box; transform-origin: center; }
@keyframes sink-mist { 0% { filter: none; opacity: 1; } 40% { filter: blur(.05px) brightness(1.6); opacity: .6; } 100% { filter: none; opacity: 1; } }
.robber-arrive { animation: robber-drop .9s var(--ease-swell) both; transform-box: fill-box; transform-origin: bottom center; }
@keyframes robber-drop { from { opacity: 0; transform: translateY(-.8px) scale(1.3); } }
.hex-glow { fill: rgba(255, 228, 160, .0); stroke: #ffe7a6; stroke-width: .07; pointer-events: none; animation: hex-glow 2.6s ease-out both; }
@keyframes hex-glow { 0% { fill: rgba(255, 228, 160, .45); opacity: 1; } 100% { fill: rgba(255, 228, 160, 0); opacity: 0; } }

/* The Magistrate's attention on each open site: a dark seal at the piece's
   corner, its red ring filling toward this Act's Inspection limit. */
.attention-seal { fill: #14110f; stroke: #f4ead4; stroke-width: .022; pointer-events: none; }
.attention-seal.is-due { fill: #b4271a; stroke: #ffe1b8; stroke-width: .03; }
.attention-track { fill: none; stroke: rgba(244, 234, 212, .22); stroke-width: .05; pointer-events: none; }
.attention-fill { fill: none; stroke: #e0452e; stroke-width: .05; stroke-linecap: round; pointer-events: none; }
.attention-count { fill: #f4ead4; font-weight: 700; font-family: var(--font-display, serif); pointer-events: none; }
/* Pointing at one site: a gold ring that pulses three times, then goes. */
.site-spotlight { fill: none; stroke: #ffd98a; stroke-width: .07; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: site-spotlight .8s ease-out 3 both; }
@keyframes site-spotlight { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .site-spotlight { animation: none; opacity: .9; } }

/* The living night: candlelight in every village window, a fainter prayer
   candle in hidden ones, and the Magistrate's lantern pooled on his land. */
.layer-lights { pointer-events: none; }
.night-wash polygon { fill: #0b1024; opacity: .3; }
/* Steady light: nothing loops, so the board only repaints when something happens. */
.site-candle { transform-box: fill-box; transform-origin: center; opacity: .95; }
.site-candle.is-hidden { opacity: .45; }
.site-candle.is-lit { animation: candle-light 1.6s var(--ease-ink) both; }
@keyframes candle-light { 0% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1.35); } 100% { opacity: .95; transform: scale(1); } }
.site-candle.is-snuffed { animation: candle-snuff 1.5s ease-out both; }
@keyframes candle-snuff { 0% { opacity: 1; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1.7); } 55% { opacity: 0; transform: scale(.3); } 100% { opacity: .45; transform: scale(1); } }
.site-candle.is-caught { animation: candle-caught 1.8s ease-out both; }
@keyframes candle-caught { 0%, 100% { opacity: .9; } 20% { opacity: .2; } 35% { opacity: 1; transform: scale(1.25); } 55% { opacity: .35; } }
.candle-smoke { fill: none; stroke: rgba(225, 218, 205, .7); stroke-width: .03; stroke-linecap: round; pointer-events: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: candle-smoke 2.2s ease-out .35s both; }
@keyframes candle-smoke { 0% { stroke-dashoffset: 1; opacity: .9; } 60% { opacity: .55; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-.25px); } }
.lantern-pool { pointer-events: none; transform-box: fill-box; transform-origin: 50% 40%; }
/* He walks the road between lands, bobbing, and his light walks with him. */
.layer-robber.is-walking { animation: magistrate-walk 1.9s cubic-bezier(.45, .05, .35, 1) both; }
@keyframes magistrate-walk {
  0% { transform: translate(var(--walk-x), var(--walk-y)); opacity: .85; }
  20% { transform: translate(calc(var(--walk-x) * .8), calc(var(--walk-y) * .8 - .06px)); }
  40% { transform: translate(calc(var(--walk-x) * .55), calc(var(--walk-y) * .55)); }
  60% { transform: translate(calc(var(--walk-x) * .3), calc(var(--walk-y) * .3 - .06px)); }
  80% { transform: translate(calc(var(--walk-x) * .1), calc(var(--walk-y) * .1)); }
  100% { transform: none; opacity: 1; }
}
.lantern-pool.is-walking { animation: lantern-walk 1.9s cubic-bezier(.45, .05, .35, 1) both; }
@keyframes lantern-walk { 0% { transform: translate(var(--walk-x), var(--walk-y)) scale(.85); opacity: .7; } 80% { opacity: 1; transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .site-candle, .site-candle.is-lit, .site-candle.is-snuffed, .site-candle.is-caught, .lantern-pool, .lantern-pool.is-walking, .layer-robber.is-walking { animation: none; }
  .candle-smoke { display: none; }
}

/* An Inspection: the night closes in, and one lantern finds your door. */
.fx-dusk {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--door-x, 50%) var(--door-y, 45%), rgba(255, 196, 110, .16) 0, rgba(255, 196, 110, .06) 70px, rgba(4, 6, 14, .7) 170px, rgba(2, 3, 8, .82) 100%);
  animation: dusk-fall 2.6s ease-in-out both;
}
@keyframes dusk-fall { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ modal = a scroll */
.modal-back { background: radial-gradient(ellipse at center, rgba(8, 13, 24, .6), rgba(4, 6, 12, .88)); backdrop-filter: blur(4px); }
.modal {
  position: relative; overflow: visible auto;
  background: linear-gradient(180deg, #f4ead4, #e6d6b3);
  color: var(--sumi); border: 0; border-radius: 2px; padding: 26px 26px 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65), inset 0 0 60px rgba(150, 110, 50, .18);
  --ink: var(--sumi); --ink-dim: #3d342a; --muted: #6d6250; --text: var(--sumi); --text-dim: #5d5242;
  --panel: rgba(255, 250, 238, .65); --panel-2: rgba(120, 90, 50, .08); --raised: rgba(255, 250, 238, .9);
  --line: rgba(22, 19, 15, .16); --line-soft: rgba(22, 19, 15, .08);
  --gold: var(--shu); --gold-dim: var(--shu-deep);
  animation: scroll-open .55s var(--ease-ink) both;
}
@keyframes scroll-open { from { clip-path: inset(48% 0 48% 0); opacity: .4; } to { clip-path: inset(-40px -40px -40px -40px); opacity: 1; } }
.modal::before { content: ''; position: absolute; inset: 0; background: var(--paper-grain); opacity: .6; pointer-events: none; mix-blend-mode: multiply; }
.modal > * { position: relative; }
.modal h3, :root[data-game="kakure"] .modal h3 {
  font-size: 21px; letter-spacing: .06em; color: var(--sumi);
  padding-bottom: 10px; border-bottom: 2px solid var(--shu);
}
.modal h4 { font-family: var(--font-display); color: var(--shu-deep); letter-spacing: .06em; margin: 6px 0 0; font-size: 15px; }
.modal p { line-height: 1.6; }
.modal .btn:not(.btn--primary) { background: rgba(255, 250, 238, .75); color: var(--sumi); border-color: rgba(22, 19, 15, .3); box-shadow: none; }
.modal .btn:not(.btn--primary):hover:not(:disabled) { background: #fffaf0; border-color: var(--shu); }
.modal input, .modal select { background: rgba(255, 252, 244, .9); color: var(--sumi); border-color: rgba(22, 19, 15, .25); }
.modal select option { background: #fffaf0; color: var(--sumi); }
.modal .muted { color: #6d6250; }
.modal .user-row { background: rgba(255, 250, 238, .6); }
.costs-row { background: rgba(255, 250, 238, .55); border: 1px solid rgba(22, 19, 15, .1); }
.picker__cell { background: rgba(255, 250, 238, .6); }
.picker__cell.is-selected { border-color: var(--shu); background: rgba(200, 67, 43, .12); }
.picker__cell .name { color: #5d5242; }
.avatar-cell { background: rgba(255, 250, 238, .6); }
.avatar-cell.is-selected { border-color: var(--shu); background: rgba(200, 67, 43, .14); }
.trade-offer { background: rgba(255, 250, 238, .5); border-color: var(--shu); }
.hand-summary { background: rgba(255, 250, 238, .55); }

.game-type-cards { display: grid; gap: 10px; }
.game-type-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-align: left; cursor: pointer;
  padding: 8px; border-radius: 3px; background: rgba(255, 250, 238, .6); border: 1px solid rgba(22, 19, 15, .16); color: var(--sumi);
  transition: border-color .2s, background .2s, transform .2s var(--ease-ink);
}
.game-type-card img { width: 96px; height: 72px; object-fit: cover; border-radius: 2px; }
.game-type-card b { font-family: var(--font-display); font-size: 15px; display: block; letter-spacing: .03em; }
.game-type-card span { font-size: 12.5px; color: #5d5242; line-height: 1.4; }
.game-type-card em { font-style: normal; font-size: 10.5px; letter-spacing: .12em; color: #fff3e4; background: var(--shu); padding: 2px 7px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; font-family: var(--font-display); }
.game-type-card.is-selected { border-color: var(--shu); background: #fffaf0; box-shadow: 0 0 0 1px var(--shu); }
.game-type-card:hover { transform: translateX(2px); }

/* ------------------------------------------------------------------ toasts, yells, parties */
.toast {
  font-family: var(--font-display); letter-spacing: .03em;
  background: linear-gradient(180deg, rgba(241, 230, 207, .97), rgba(225, 208, 175, .97));
  color: var(--sumi); border: 1px solid rgba(120, 80, 30, .4); border-left: 5px solid var(--kin); border-radius: 2px;
  animation: toast-in .5s var(--ease-ink) both;
}
.toast.is-good { border-left-color: var(--matsu); }
.toast.is-bad { border-left-color: var(--shu); background: linear-gradient(180deg, #f6e1d8, #e8c9bb); backdrop-filter: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.yell, .party__shout {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; color: var(--kin-pale);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 40px rgba(214, 168, 76, .55);
}
.party__shout--punch { color: #ff8a6e; font-family: var(--font-display); }
.party__sub { font-family: var(--font-display); color: var(--washi); }

/* ------------------------------------------------------------------ sign in */
.signin {
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(8, 13, 24, .45), rgba(8, 13, 24, .8)),
    url('/img/kakure/art/home-hero.webp?v=20261011edo') 62% center / cover no-repeat, #0a0f1c;
}
.signin__card {
  position: relative;
  background: linear-gradient(180deg, #f4ead4, #e4d3ae);
  color: var(--sumi); border: 0; border-radius: 2px; padding: 34px 32px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  --ink: var(--sumi); --muted: #6d6250; --line: rgba(22, 19, 15, .16);
  animation: scroll-open .9s var(--ease-ink) both;
}
.signin__card::before, .signin__card::after {
  content: ''; position: absolute; left: -10px; right: -10px; height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, #4a2c16, #7b4f2a 45%, #3a2210);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.signin__card::before { top: -8px; } .signin__card::after { bottom: -8px; }
.signin__logo { display: none; }
.signin__kanji { font-family: var(--font-brush); font-size: 64px; line-height: 1; color: var(--sumi); text-align: center; }
.signin__card h2 { text-align: center; font-size: 22px; letter-spacing: .08em; color: var(--sumi); }
.signin__card .muted { color: #6d6250; text-align: center; }
.signin__card input { background: rgba(255, 252, 244, .9); color: var(--sumi); border-color: rgba(22, 19, 15, .25); }
.signin__card .btn:not(.btn--primary) { background: rgba(255, 250, 238, .75); color: var(--sumi); border-color: rgba(22, 19, 15, .3); box-shadow: none; }
.signin__recovery { border-top-color: rgba(22, 19, 15, .15); }

/* ------------------------------------------------------------------ the gate (title screen) */
.gate {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(8, 13, 24, .35), rgba(4, 6, 12, .8)),
    url('/img/kakure/art/home-hero.webp?v=20261011edo') 62% center / cover no-repeat,
    radial-gradient(ellipse at 50% 70%, #14203a, #04060c);
  cursor: pointer; overflow: hidden;
}
.gate__inner { display: grid; justify-items: center; gap: clamp(8px, 2vh, 18px); padding: 24px; max-height: 100%; }
/* Short windows: everything fits, and if not, the gate scrolls rather than hiding Enter. */
.gate { overflow-y: auto; }
/* The phone rule that keeps dialogs narrow must not shrink the full-screen gate. */
.gate[role="dialog"] { max-width: none; }
.gate__kanji { font-family: var(--font-brush); color: var(--washi); font-size: clamp(64px, min(20vw, 19vh), 210px); line-height: .85; letter-spacing: .1em; text-shadow: 0 0 60px rgba(214, 168, 76, .3); animation: brush-in 2.4s .2s var(--ease-ink) both; }
.gate__title { margin: 0; text-transform: uppercase; font-family: var(--font-display); font-weight: 800; letter-spacing: .5em; text-indent: .5em; font-size: clamp(26px, 5vw, 54px); background: linear-gradient(180deg, #fff1c8, var(--kin) 55%, #9c7226); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise-in 1.8s 1.2s var(--ease-ink) both; }
.gate__sub { font-family: var(--font-serif); font-style: normal; font-weight: 500; color: var(--washi-dim); font-size: clamp(15px, min(2.4vw, 2.6vh), 22px); max-width: 32rem; line-height: 1.5; animation: rise-in 1.8s 1.8s var(--ease-ink) both; }
.gate__year { font-family: var(--font-display); color: var(--kin); letter-spacing: .4em; font-size: 12px; animation: rise-in 1.6s 2.2s var(--ease-ink) both; }
.gate__enter { margin-top: 16px; animation: rise-in 1.4s 2.6s var(--ease-ink) both, gate-breathe 3s 4s ease-in-out infinite; }
.gate__enter .btn { padding: 15px 34px; font-size: 16px; letter-spacing: .24em; }
@keyframes gate-breathe { 50% { filter: drop-shadow(0 0 18px rgba(214, 168, 76, .45)); } }
.gate.is-leaving { animation: gate-out 1.3s var(--ease-ink) forwards; pointer-events: none; }
.gate.is-leaving .gate__inner { animation: gate-inner-out 1.1s var(--ease-ink) forwards; }
@keyframes gate-out { to { opacity: 0; } }
@keyframes gate-inner-out { to { transform: scale(1.12); filter: blur(10px); opacity: 0; } }
.gate__torii { display: none; width: min(160px, 30vw, 15vh); opacity: .85; animation: rise-in 2s .1s var(--ease-ink) both; }

/* ------------------------------------------------------------------ overlays from fx.js */
.fx-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden; }
.fx-turn {
  position: absolute; left: 0; right: 0; top: 34%; display: grid; justify-items: center; gap: 6px;
}
.fx-turn__band {
  position: absolute; left: -5%; right: -5%; top: 50%; height: 120px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(8, 12, 22, .88) 18%, rgba(8, 12, 22, .88) 82%, transparent);
  animation: band-sweep 2.6s var(--ease-ink) both;
}
.fx-turn__kanji { position: relative; font-family: var(--font-brush); font-size: clamp(54px, 9vw, 92px); color: var(--washi); line-height: 1; animation: brush-in 1.1s var(--ease-ink) both, fade-late 2.6s both; }
.fx-turn__text { position: relative; font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; text-indent: .3em; color: var(--kin-pale); font-size: clamp(16px, 2.6vw, 24px); animation: rise-in .9s .25s var(--ease-ink) both, fade-late 2.6s both; }
@keyframes band-sweep { 0% { clip-path: inset(0 100% 0 0); } 25% { clip-path: inset(0 0 0 0); } 75% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 100%); opacity: .6; } }
@keyframes fade-late { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

.fx-act {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(6, 10, 20, .82), rgba(2, 4, 10, .96));
  animation: act-veil 5.2s var(--ease-ink) both; pointer-events: auto; cursor: pointer;
}
.fx-act__inner { display: grid; justify-items: center; gap: 12px; padding: 20px; }
.fx-act__season { font-family: var(--font-brush); font-size: clamp(110px, 22vw, 220px); line-height: .9; color: var(--washi); animation: brush-in 1.8s .2s var(--ease-ink) both; }
.fx-act__title { font-family: var(--font-display); font-weight: 800; letter-spacing: .4em; text-indent: .4em; color: var(--kin-pale); font-size: clamp(22px, 4vw, 40px); animation: rise-in 1.2s .9s var(--ease-ink) both; }
.fx-act__line { font-family: var(--font-serif); font-style: normal; font-weight: 500; color: var(--washi-dim); font-size: clamp(16px, 2.4vw, 22px); max-width: 30rem; animation: rise-in 1.2s 1.3s var(--ease-ink) both; }
.fx-act__event { margin-top: 10px; padding: 14px 20px; max-width: 30rem; border-radius: 16px; border: 1px solid rgba(214, 168, 76, .45); background: rgba(10, 15, 28, .78); display: grid; gap: 6px; animation: rise-in 1.2s 1.7s var(--ease-ink) both; }
.fx-act__event-title { font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; color: var(--kin-pale); font-size: clamp(20px, 3.4vw, 30px); }
.fx-act__event-text { font-family: var(--font-serif); color: var(--washi); font-size: clamp(16px, 2.4vw, 20px); line-height: 1.4; }
@keyframes act-veil { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }
/* Ine between the Acts: her portrait and a few words, read at leisure, gone on a tap. */
.fx-act--ine { animation-duration: 9.4s; }
.fx-act__ine {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; max-width: min(34rem, calc(100vw - 32px));
  padding: 14px 16px; border-radius: 16px; background: rgba(243, 232, 208, .94); color: #2a1d12;
  border: 1px solid rgba(214, 168, 76, .7); box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
  text-shadow: none; animation: rise-in 1.2s 1.1s var(--ease-ink) both;
}
.fx-act__portrait { width: 68px; height: 68px; flex: none; border-radius: 50%; object-fit: cover; object-position: top;
  border: 2px solid #b4271a; background: #14203a; }
.fx-act__words b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; color: #8e2116; margin-bottom: 4px; }
.fx-act__words p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.4; }
.fx-act__words .fx-act__rule { margin-top: 8px; font-weight: 700; }
.fx-act__tap { font-family: var(--font-serif); font-size: 13px; letter-spacing: .1em; color: var(--washi-dim); opacity: .8;
  animation: rise-in 1s 2s var(--ease-ink) both; }
@media (max-width: 420px) {
  .fx-act--ine .fx-act__season { font-size: 96px; }
  .fx-act__portrait { width: 56px; height: 56px; }
  .fx-act__words p { font-size: 15px; }
}

.fx-fly { position: fixed; z-index: 86; width: 34px; height: 46px; border-radius: 4px; pointer-events: none; overflow: hidden;
  box-shadow: inset 0 0 0 2px #1a120b, 0 6px 14px rgba(0, 0, 0, .5); background: #f3e8d0 center / cover no-repeat;
  transition: transform .9s var(--ease-ink), opacity .9s ease-in; }
.fx-ink { position: fixed; z-index: 86; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(20, 14, 8, .55), rgba(20, 14, 8, 0) 70%); animation: ink-drop 1.2s var(--ease-ink) forwards; }
@keyframes ink-drop { from { transform: scale(0); opacity: 1; } to { transform: scale(22); opacity: 0; } }
.fx-seal {
  position: absolute; left: 50%; top: 42%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 16px;
  display: grid; place-items: center; font-family: var(--font-brush); font-size: 60px; line-height: 1; color: #fff1e6;
  background: radial-gradient(circle at 35% 30%, #dc5b3c, #8e2116); box-shadow: inset 0 0 0 6px rgba(255, 220, 190, .35), 0 20px 40px rgba(0, 0, 0, .6);
  animation: seal-slam 2.2s var(--ease-ink) both;
}
@keyframes seal-slam { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 18% { transform: scale(.94) rotate(-6deg); opacity: 1; } 26% { transform: scale(1) rotate(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1) rotate(-6deg); } }

/* Every roll is thrown over the middle of the board, lands, and fades. */
.fx-dice {
  position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px;
  padding: 8px 18px 12px; border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, rgba(70, 46, 26, .94), rgba(28, 18, 10, .95));
  border: 1px solid rgba(214, 168, 76, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  animation: dice-in .25s var(--ease-ink) both;
}
.fx-dice.is-landed { animation: dice-out 1.9s ease-in both; }
.fx-dice__who { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; font-size: 14px; color: var(--kin-pale); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); min-height: 1em; }
.fx-dice__row { display: flex; align-items: center; gap: 10px; }
.fx-dice img { width: 64px; height: 64px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.fx-dice.is-rolling img { animation: tumble .5s linear infinite; }
.fx-dice.is-rolling img:nth-child(2) { animation-duration: .43s; animation-direction: reverse; }
.fx-dice.is-landed img { animation: settle .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.fx-dice.is-landed img:nth-child(2) { animation-delay: .08s; }
.fx-dice__total { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--washi); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); min-width: 1.2em; text-align: center; }
.fx-dice.is-landed .fx-dice__total { animation: pop .3s .22s ease-out both; }
.fx-dice.is-seven .fx-dice__total { color: #ff8a6e; text-shadow: 0 0 14px rgba(255, 90, 50, .6); }
@keyframes dice-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }

/* In the app the dice are cubes thrown in 3D (fx.js die3d); browsers keep the painted faces. */
.fx-dice--3d .fx-dice__row { perspective: 520px; gap: 18px; padding: 6px 4px; }
.die3d { --s: 58px; position: relative; display: block; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.fx-dice--3d.is-rolling .die3d { animation: die3d-spin .62s linear infinite; }
.fx-dice--3d.is-rolling .die3d:nth-child(2) { animation-duration: .51s; animation-direction: reverse; }
.fx-dice.fx-dice--3d img.die3d__face {
  position: absolute; inset: 0; width: var(--s); height: var(--s); border-radius: 18%;
  background: #e9dcc0; backface-visibility: hidden; filter: none; animation: none;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .35);
}
.die3d__face--1 { transform: translateZ(calc(var(--s) / 2)); }
.die3d__face--6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die3d__face--2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die3d__face--5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d__face--3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die3d__face--4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes die3d-spin { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
@media (max-width: 620px) { .die3d { --s: 48px; } }
@keyframes dice-out { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* The roll leads the action row: the first thing to press on your turn. */
.dock__actions .btn--roll { font-size: 16px; padding: 14px 28px; max-width: none; white-space: nowrap; flex: none; min-width: max-content; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  .icon-btn--fit { width: auto; min-width: 44px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
  /* The zoom buttons sit in a row under the island, not down its right edge. */
  .board-tools { display: flex; flex-direction: row; align-items: center; gap: 6px; right: 8px; bottom: 8px; }
  .board-tools .icon-btn { width: 38px; height: 38px; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
  .board-tools .icon-btn--fit { width: auto; min-width: 38px; padding: 0 10px; font-size: 12px; }
  .board-tools .icon-btn[hidden] { display: none; }
  /* Two short rows (Story and Sites over the zoom buttons) so the tools stay clear of the dice tray. */
  .board-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 140px; }
  /* No action cards yet: nothing to show, so the row folds away. */
  #devhand.is-empty { display: none; }
  .mobile-players { background: rgba(10, 15, 28, .9); border-bottom: 1px solid var(--line); }
  .mobile-player { background: linear-gradient(135deg, rgba(241, 230, 207, .95), rgba(222, 205, 170, .95)); color: var(--sumi); border-color: rgba(120, 80, 30, .35); }
  .mobile-player.is-turn { box-shadow: 0 0 0 2px var(--shu); }
  .mobile-player__vp { color: var(--shu-deep); font-family: var(--font-display); }
  .topbar-menu { background: rgba(10, 15, 28, .97); border-color: rgba(214, 168, 76, .3); }
  .act-mark { display: none; }
  .banner::before, .banner::after { display: none; }
  .banner { font-size: 13px; padding: 6px 12px; }
  .lobby-hero { padding-top: 40px; }
}
@media (max-width: 620px) {
  .fx-dice img { width: 52px; height: 52px; }
  .fx-dice__total { font-size: 34px; }
  .dock__actions .btn--roll { flex-basis: 100%; min-height: 52px; font-size: 17px; }
  /* The throw itself is shown over the board, so the tray only keeps the
     result, small, in the corner. */
  .dice-tray { padding: 4px 8px 4px 5px; gap: 5px; }
  .dice-tray img { width: 26px; height: 26px; }
  .dice-tray #dice-total { font-size: 18px; }
  .game-list { grid-template-columns: 1fr; }
  .circle-card { grid-template-columns: 1fr; }
  .circle-card__seal { width: 58px; height: 58px; font-size: 24px; }
  .rescard, :root[data-game="kakure"] .rescard { width: 56px; }
  .devcard, :root[data-game="kakure"] .devcard { width: 52px; }
  .topbar__title h1 { font-size: 16px; }
  .icon-toggle { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-wrap { animation: none !important; }
  .fx-layer { display: none; }
}
.modal .tag--bot, .circle-card .tag--bot { background: rgba(22, 19, 15, .1); color: #5d5242; }
.modal .tag { color: #fff3e4; }

/* sign-in / create-account tabs */
.signin__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(22, 19, 15, .18); }
.signin__tabs:has(#tab-signup[hidden]) { display: none; }
.signin__tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 6px; cursor: pointer;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; color: #6d6250;
}
.signin__tab.is-active { color: var(--sumi); border-bottom-color: var(--shu); }
.signup-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.signup-toggle input { width: 18px; height: 18px; accent-color: var(--shu); }
.circle-card__seal--bell { background: radial-gradient(circle at 35% 30%, #4a5f8f, #1b2a4a); font-size: 38px; }

/* ------------------------------------------------------------------ guide */
/* Grandmother Ine's next-step card (web/js/guide.js). Sits in the board's
   lower-left corner, clear of the dice tray and the zoom tools. */
.guide {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  width: min(360px, calc(100% - 96px));
  padding: 12px 14px 12px;
  color: var(--sumi);
  background: linear-gradient(180deg, #f6eedb, #ecdfc2);
  border: 1px solid rgba(140, 100, 40, .45);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 255, 255, .35);
}
.guide[hidden] { display: none; }
.guide.is-new { animation: guide-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes guide-in { from { opacity: 0; transform: translateY(10px); } }
.guide__head { display: flex; align-items: center; gap: 10px; }
.guide__seal {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--shu); color: var(--washi); border-radius: 6px;
  font: 400 20px/1 var(--font-brush, serif); transform: rotate(-4deg);
}
.guide__who { flex: 1; min-width: 0; display: grid; }
.guide__who small {
  font: 600 10.5px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: #8a5a2b;
}
.guide__title { font: 700 17px/1.25 var(--font-display); color: var(--sumi); }
.guide__hide {
  flex: none; align-self: flex-start;
  background: none; border: 1px solid rgba(60, 40, 20, .25); border-radius: 14px;
  padding: 3px 10px; font: 600 12px/1.4 var(--font-body); color: #5a4128; cursor: pointer;
}
.guide__hide:hover { background: rgba(60, 40, 20, .08); }
.guide__text { margin: 8px 0 0; font: 500 15px/1.45 var(--font-body); color: #2a2018; }
.guide__why { margin: 6px 0 0; font: 400 13.5px/1.45 var(--font-body); color: #5f4c38; }
.guide__why[hidden] { display: none; }

/* The control the guide is pointing at. */
.guide-pulse { position: relative; animation: guide-pulse 1.6s ease-in-out infinite; }
@keyframes guide-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 90, 59, .0), 0 0 0 2px rgba(214, 168, 76, .9); }
  50% { box-shadow: 0 0 0 8px rgba(226, 90, 59, .28), 0 0 0 2px rgba(214, 168, 76, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .guide.is-new { animation: none; }
  .guide-pulse { animation: none; box-shadow: 0 0 0 3px rgba(214, 168, 76, 1); }
}
@media (max-width: 620px) {
  /* On a phone Ine sits below your hand and buttons, kept to two lines, so
     she never pushes your cards out of view. */
  .dock > .guide { position: static; order: 99; grid-row: auto; grid-column: 1 / -1; width: auto; margin: 4px 0 0; padding: 8px 12px; }
  .guide .guide__seal { width: 36px; height: 44px; }
  .guide__who small { display: none; }
  .guide__title { font-size: 15px; }
  .guide__text { font-size: 13.5px; margin-top: 4px; }
  .guide__why { display: none; }
}

/* The plain-language summary at the top of Rules. */
.rules-short {
  margin: 0 0 14px; padding: 12px 14px 10px;
  background: rgba(214, 168, 76, .12); border: 1px solid rgba(140, 100, 40, .35); border-radius: 8px;
}
.rules-short h4 { margin-top: 0; }
.rules-short ol { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 6px; }
.rules-short li { line-height: 1.45; }

/* ------------------------------------------------------------------ ways to play
   Two hanging scrolls under the title: play with friends, or with the village.
   Each takes its painting from art/ when it exists; until then the ink wash
   gradient beneath carries the card on its own. */
.ways {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  animation: rise-in 1.2s .8s var(--ease-ink) both;
}
.way {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: end; min-height: 300px; padding: 26px 26px 24px;
  border-radius: 8px; border: 1px solid rgba(214, 168, 76, .4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 240, 200, .05);
  transition: transform .5s var(--ease-ink), box-shadow .5s, border-color .5s;
}
.way:hover { transform: translateY(-4px); border-color: var(--kin); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 168, 76, .25); }
.way__art {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  transition: transform 1.2s var(--ease-ink);
}
.way:hover .way__art { transform: scale(1.04); }
.way::after {   /* the ink settling at the foot of the scroll, under the words */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0) 20%, rgba(8, 13, 24, .55) 55%, rgba(8, 13, 24, .94) 100%);
}
.way--friends .way__art {
  background-image:
    url('/img/kakure/art/card-friends.webp?v=20261011edo'),
    radial-gradient(60% 50% at 72% 26%, rgba(240, 216, 150, .55), transparent 70%),
    radial-gradient(30% 22% at 30% 40%, rgba(214, 120, 60, .35), transparent 70%),
    var(--pattern-seigaiha),
    linear-gradient(170deg, #2a3a63 0%, #1b2a4a 45%, #0e1628 100%);
  background-size: cover, auto, auto, 80px 40px, auto;
}
.way--bots .way__art {
  background-image:
    url('/img/kakure/art/card-bots.webp?v=20261011edo'),
    radial-gradient(18% 22% at 74% 30%, rgba(255, 196, 110, .75), transparent 70%),
    radial-gradient(60% 60% at 74% 30%, rgba(200, 67, 43, .28), transparent 70%),
    var(--pattern-asanoha),
    linear-gradient(170deg, #3a2a2a 0%, #241a1d 45%, #0e1018 100%);
  background-size: cover, auto, auto, 60px 104px, auto;
}
/* Classic Catan, once the old roads are open: a plain night-blue scroll. */
.way--classic { grid-column: 1 / -1; min-height: 0; padding-top: 92px; }
.way--classic[hidden] { display: none; }
.way--classic .way__art {   /* the classic game's own logo over a row of its tiles */
  background-image: url('/img/ui/logo.webp'),
    url('/img/hex/forest.webp'), url('/img/hex/field.webp'), url('/img/hex/pasture.webp'),
    url('/img/hex/hill.webp'), url('/img/hex/mountain.webp'),
    linear-gradient(170deg, #1b2a4a 0%, #121d36 50%, #0b1222 100%);
  background-size: 280px auto, 64px auto, 64px auto, 64px auto, 64px auto, 64px auto, auto;
  background-position: center 14px, calc(50% - 136px) 122px, calc(50% - 68px) 122px, center 122px,
    calc(50% + 68px) 122px, calc(50% + 136px) 122px, center;
  background-repeat: no-repeat;
}
.way.way--classic { padding-top: 214px; }
.way--classic .way__seal { display: none; }
.way__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.way__actions .btn { margin-top: 6px; }
/* The tutorial leads the page: a wide scroll with Grandmother Ine standing
   at its right edge, above the two ways to play. */
.way--tutorial { grid-column: 1 / -1; min-height: 0; padding-top: 92px; padding-right: min(34%, 260px); }
.way--tutorial .way__art {
  background-image:
    url('/img/kakure/art/ine.png?v=20261011edo'),
    url('/img/kakure/art/act-1-spring.webp?v=20261011edo'),
    linear-gradient(170deg, #2a3a63 0%, #1b2a4a 45%, #0e1628 100%);
  background-size: auto 104%, cover, auto;
  background-position: right 4% bottom -2px, center 40%, center;
  background-repeat: no-repeat;
}
.way--tutorial::after {
  background: linear-gradient(90deg, rgba(8, 13, 24, .94) 0%, rgba(8, 13, 24, .78) 45%, rgba(8, 13, 24, .1) 80%);
}
.way--tutorial .way__seal { background: radial-gradient(circle at 35% 30%, #e8b85c, #a8741f); }

/* Friends: who you have played with, ready to seat at your next table. */
.friends { display: grid; gap: 12px; animation: rise-in 1.2s 1s var(--ease-ink) both; }
.friends[hidden] { display: none; }
.friends__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.friends__head h2 { font-size: 22px; letter-spacing: .12em; color: var(--washi); display: flex; align-items: center; gap: 12px; margin: 0; }
.friends__list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.friend-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; font: inherit; font-size: 14.5px; color: var(--sumi); cursor: pointer;
  background: linear-gradient(135deg, rgba(241, 230, 207, .97), rgba(226, 210, 178, .97));
  border: 1px solid rgba(120, 80, 30, .4); box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.friend-chip .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #fffaf0; overflow: hidden; }
.friend-chip:hover { border-color: var(--shu); }
.friends__empty { color: var(--text-dim); margin: 0; line-height: 1.5; }
.friend-chip small { font-size: 11.5px; letter-spacing: .06em; color: var(--shu-deep); text-transform: uppercase; }
.friend-chip.is-asked { opacity: .78; border-style: dashed; }
.friend-chip:disabled { cursor: default; opacity: .7; }
/* Someone asked to be friends: answered right here on Home. */
.friends__requests { display: grid; gap: 8px; }
.friends__requests[hidden] { display: none; }
.friend-ask {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 12px; color: var(--sumi);
  background: linear-gradient(135deg, rgba(241, 230, 207, .97), rgba(226, 210, 178, .97));
  border: 1px solid var(--shu); box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.friend-ask .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #fffaf0; overflow: hidden; }
.friend-ask__text { line-height: 1.3; font-size: 15.5px; }
.friend-ask__actions { display: flex; gap: 8px; }
.friend-ask .btn:not(.btn--primary) { background: rgba(255, 250, 238, .7); color: var(--sumi); border-color: rgba(22, 19, 15, .3); box-shadow: none; }
@media (max-width: 480px) {
  .friend-ask__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
/* Add a friend: a name, people you played with, and a link for newcomers. */
.add-friend__form { display: flex; gap: 8px; }
.add-friend__form input { flex: 1; min-width: 0; font-size: 16px; }
.add-friend__status { margin: 0; padding: 8px 10px; border-radius: 8px; font-weight: 600; line-height: 1.35; }
.add-friend__status[hidden] { display: none; }
.add-friend__status.is-good { background: rgba(60, 120, 70, .14); color: #2f5d36; }
.add-friend__status.is-bad { background: rgba(180, 50, 30, .12); color: var(--shu-deep); }
.add-friend__label { margin: 14px 0 6px; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
.add-friend__people { display: flex; flex-wrap: wrap; gap: 8px; }
.add-friend__link .small { margin: 0 0 8px; }
.friend-link { display: grid; gap: 10px; }
.friend-link code { display: block; padding: 10px 12px; border-radius: 4px; background: #fffaf0; border: 1px solid rgba(120, 80, 30, .25); color: var(--shu-deep); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.seat-friends { width: 100%; display: grid; gap: 8px; }
.seat-friends__label { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
.seat-friends__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.way__seal {
  position: absolute; top: 20px; left: 22px;
  width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 30px; color: #fff3e4;
  background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17);
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 200, .35), 0 6px 16px rgba(0, 0, 0, .45);
}
.way__body { display: grid; gap: 10px; justify-items: start; }
.way__body h3 { font-size: 26px; letter-spacing: .06em; color: var(--washi); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.way__body p { color: var(--washi-dim); max-width: 26rem; line-height: 1.55; margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.way__body .btn { margin-top: 6px; padding: 13px 26px; min-height: 48px; font-size: 15.5px; }
.ways__more {
  text-align: center; color: var(--text-dim); margin: -6px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
}
.ways__dot { color: var(--text-faint); }
.linkish {
  font: inherit; color: var(--kin-pale); background: none; border: 0; padding: 4px 2px; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(240, 216, 150, .35); text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.linkish:hover { color: #fff1c8; text-decoration-color: var(--kin); }
.linkish:focus-visible { outline: 2px solid var(--kin-pale); outline-offset: 2px; border-radius: 2px; }

/* Waiting tables wear the washi of an invitation, not the wood of a game. */
.table-tile {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-align: left;
  padding: 16px 18px; border-radius: 6px; cursor: pointer; color: var(--sumi);
  background: linear-gradient(135deg, rgba(241, 230, 207, .97), rgba(226, 210, 178, .97)), var(--paper-grain);
  border: 1px solid rgba(120, 80, 30, .4); box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transition: transform .35s var(--ease-ink), box-shadow .35s;
  font: inherit;
}
.table-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }
.table-tile__seal { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-brush); font-size: 24px; color: #fff3e4; background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17); transform: rotate(-5deg); }
.table-tile__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.table-tile__meta { color: #6d6250; font-size: 13.5px; }
.table-tile .avatar { background: rgba(22, 19, 15, .08); }

/* ------------------------------------------------------------------ the table */
.table-view { position: relative; display: grid; place-items: start center; padding: min(8vh, 64px) 16px 80px; min-height: calc(100vh - 64px); }
.table-card {
  position: relative; width: min(640px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center;
  padding: 44px 32px 32px; border-radius: 8px; color: var(--sumi);
  background: linear-gradient(160deg, rgba(244, 235, 214, .98), rgba(226, 210, 178, .98)), var(--paper-grain);
  border: 1px solid rgba(120, 80, 30, .45);
  box-shadow: var(--shadow-deep), inset 0 0 0 6px rgba(255, 250, 238, .35), inset 0 0 0 7px rgba(120, 80, 30, .25);
  animation: rise-in 1s var(--ease-ink) both;
  --ink: var(--sumi); --ink-dim: #4a4034; --muted: #6d6250; --text: var(--sumi); --text-dim: #5d5242;
}
.table-card__seal {
  position: absolute; top: -26px; width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 30px; color: #fff3e4; transform: rotate(-6deg);
  background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 200, .35), 0 8px 18px rgba(0, 0, 0, .45);
}
.table-card__eyebrow { margin: 0; font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--shu-deep); }
.table-card__title { margin: 0; font-size: clamp(24px, 4vw, 32px); color: var(--sumi); letter-spacing: .04em; }
.table-card__lede { margin: 0; color: #5d5242; max-width: 30rem; line-height: 1.55; }
.seat-row { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.seat {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 6px 12px; border-radius: 6px;
  background: rgba(255, 250, 238, .65); border: 1px solid rgba(120, 80, 30, .3);
  animation: seat-in .6s var(--ease-swell) both;
}
.seat__avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: #fffaf0; box-shadow: 0 0 0 2px rgba(214, 168, 76, .7), 0 4px 10px rgba(0, 0, 0, .15); }
.seat__name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__tag { font-size: 11.5px; letter-spacing: .1em; color: #7a6c56; text-transform: uppercase; }
.seat__clear { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: #7a6c56; cursor: pointer; font-size: 16px; line-height: 1; }
.seat__clear:hover { background: rgba(200, 67, 43, .12); color: var(--shu-deep); }
.seat.is-empty { background: transparent; border: 1.5px dashed rgba(120, 80, 30, .35); animation: none; }
.seat.is-empty .seat__avatar { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(120, 80, 30, .3); color: rgba(120, 80, 30, .45); font-family: var(--font-brush); font-size: 22px; animation: lantern 2.6s ease-in-out infinite; }
.seat.is-empty .seat__name { color: #8c7d64; font-weight: 500; font-family: var(--font-body); font-size: 13px; }
@keyframes seat-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lantern { 50% { box-shadow: inset 0 0 0 1.5px rgba(200, 67, 43, .45); color: rgba(200, 67, 43, .6); } }
.table-invite { width: 100%; display: grid; gap: 10px; padding: 16px; border-radius: 6px; background: rgba(255, 250, 238, .55); border: 1px solid rgba(120, 80, 30, .25); }
.table-invite__label { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
.table-invite__link { display: block; padding: 10px 12px; border-radius: 4px; background: #fffaf0; border: 1px solid rgba(120, 80, 30, .25); color: var(--shu-deep); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.table-invite .row, .table-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.table-card .btn:not(.btn--primary) { background: rgba(255, 250, 238, .8); color: var(--sumi); border-color: rgba(22, 19, 15, .3); box-shadow: none; }
.table-card .btn:not(.btn--primary):hover:not(:disabled) { background: #fffaf0; border-color: var(--shu); }
.table-card .btn--primary { min-height: 50px; padding: 13px 28px; font-size: 15.5px; }
.table-card .linkish { color: #7a4a20; text-decoration-color: rgba(120, 74, 32, .35); }
.table-wait { display: inline-flex; align-items: center; gap: 10px; color: #5d5242; font-family: var(--font-serif); font-weight: 500; font-size: 18px; }
.table-wait::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--shu); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: .3; transform: scale(.7); } }

/* An invite link opened while signed out says whose table is waiting. */
.signin__invite {
  display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 4px; border-radius: 6px; text-align: left;
  background: rgba(200, 67, 43, .14); border: 1px solid rgba(200, 67, 43, .45);
}
.signin__invite { background: rgba(200, 67, 43, .08); border-color: rgba(200, 67, 43, .5); }
.signin__invite b { font-family: var(--font-display); color: var(--shu-deep); font-size: 17px; letter-spacing: .03em; }
.signin__invite span { color: #4a4034; font-size: 14px; line-height: 1.5; }

@media (max-width: 720px) {
  .ways { grid-template-columns: 1fr; gap: 14px; }
  .way { min-height: 0; padding: 84px 20px 20px; }
  .way--tutorial { padding: 76px 36% 18px 18px; min-height: 0; }
  .way--tutorial .way__art { background-size: auto 82%, cover, auto; background-position: right -30px bottom 0, center 40%, center; }
  .way--tutorial p { font-size: 14px; }
  .way__body h3 { font-size: 22px; }
  .way__seal { width: 46px; height: 46px; font-size: 26px; top: 16px; left: 16px; }
  .seat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-card { padding: 40px 18px 24px; }
}
/* Chat belongs to a game; off the board there is nobody to talk to. */
.app:has(#view-game[hidden]) .mobile-chat-toggle { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .way, .way__art, .seat, .seat.is-empty .seat__avatar, .table-wait::before { animation: none; transition: none; }
}

/* The chosen Edo paintings. Every background retains an ink-wash fallback. */
.lobby__inner { position: relative; }
.lobby-hero { max-width: 32rem; justify-items: start; text-align: left; }

.player-portrait, .ine-portrait { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; }
.player-portrait { width: 32px; height: 32px; border-radius: 50%; background: rgba(239, 228, 204, .8); }
.avatar--lg.player-portrait { width: 48px; height: 48px; }
.portrait-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.portrait-image[hidden] { display: none; }
.portrait-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.has-portrait > .portrait-fallback { visibility: hidden; }
.ine-portrait { width: 100%; height: 100%; background: radial-gradient(ellipse, rgba(239, 228, 204, .45), transparent 70%); }
.ine-portrait > .portrait-fallback { font-family: var(--font-brush); color: var(--shu); }
.guide__seal { width: 48px; height: 58px; background: transparent; transform: none; }
.seat__avatar.player-portrait { width: 52px; height: 52px; }
.avatar-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows: 70px; min-height: 146px; max-height: none; overflow: visible; }
.avatar-cell { min-height: 70px; aspect-ratio: auto; }
.avatar-cell .player-portrait { width: 62px; max-width: 100%; height: 62px; border-radius: 4px; background: transparent; }

.fx-act {
  background-image: linear-gradient(180deg, rgba(2, 4, 10, .48), rgba(2, 4, 10, .75)),
    var(--moment-art, none), radial-gradient(ellipse, #14203a, #02040a);
  background-size: cover; background-position: center;
}
.fx-act__inner { text-shadow: 0 2px 16px #02040a; }
.inspection-art, .results-art {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(214, 168, 76, .4);
  background-image: var(--moment-art, none), linear-gradient(135deg, #14203a, #0a0f1c);
  background-size: cover; background-position: center;
}
.inspection-art { height: 210px; min-height: 210px; max-height: 210px; margin-bottom: 14px; background-size: contain, cover; background-repeat: no-repeat; }
.results-art { margin-bottom: 16px; }
.results-art--victory { background-color: #c9a24b; }
.results-art--defeat { background-color: #14203a; }

@media (max-width: 720px) {
  .lobby-hero { max-width: none; justify-items: center; text-align: center; }
  .inspection-art { height: 150px; min-height: 150px; max-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .ways, .fx-act, .fx-act * { animation: none; transition: none; }
  .fx-layer:has(.fx-act) { display: block; }
}

/* ------------------------------------------------------------------ rules scroll
   Rules hang as a washi scroll between two wooden rods, the paintings and the
   land set into the writing. The paper scrolls; the rods stay put. */
.rules-scroll {
  position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background: rgba(4, 6, 12, .72); backdrop-filter: blur(3px);
  animation: rules-fade .3s ease both;
}
.rules-scroll.is-closing { animation: rules-fade .26s ease reverse forwards; }
@keyframes rules-fade { from { opacity: 0; } to { opacity: 1; } }
.rules-scroll__sheet {
  position: relative; width: min(680px, 100%); height: min(100%, 920px);
  display: grid; grid-template-rows: minmax(0, 1fr);
  animation: scroll-open .7s var(--ease-ink) both;
}
.rules-scroll__sheet::before, .rules-scroll__sheet::after {
  content: ''; position: absolute; left: -10px; right: -10px; height: 16px; border-radius: 8px; z-index: 2;
  background: linear-gradient(180deg, #4a2c16, #7b4f2a 45%, #3a2210);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.rules-scroll__sheet::before { top: -8px; } .rules-scroll__sheet::after { bottom: -8px; }
.rules-scroll__paper {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 30px clamp(18px, 5vw, 44px) 36px; color: var(--sumi);
  background: linear-gradient(180deg, #f4ead4, #e4d3ae), var(--paper-grain);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  font-size: 16px; line-height: 1.6;
}
.rules-scroll__paper:focus { outline: none; }
.rules-scroll__close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(22, 19, 15, .3); background: rgba(255, 250, 238, .92); color: var(--sumi);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.rules-scroll__close:hover { border-color: var(--shu); color: var(--shu-deep); }
.rules-scroll__head { text-align: center; display: grid; gap: 2px; margin-bottom: 8px; }
.rules-scroll__kanji { font-family: var(--font-brush); font-size: 58px; line-height: 1; color: var(--shu); }
.rules-scroll__head h2 { margin: 0; font-size: 26px; letter-spacing: .08em; color: var(--sumi); }
.rules-scroll__head p { margin: 0; color: #6d6250; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; }
.rules-scroll__part { padding: 18px 0 6px; border-top: 1px solid rgba(120, 80, 30, .25); margin-top: 14px; }
.rules-scroll__part h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 20px; letter-spacing: .05em; color: var(--sumi); }
.rules-scroll__mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; flex: none;
  font-family: var(--font-brush); font-size: 20px; color: #fff3e4; transform: rotate(-5deg);
  background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17);
}
.rules-scroll__part p { margin: 8px 0; color: #2a2018; }
.rules-scroll__pic {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin: 4px 0 8px;
  border: 1px solid rgba(120, 80, 30, .4); box-shadow: 0 8px 20px rgba(60, 40, 20, .25); background: #2b3350;
}
.rules-land { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.rules-land figure, .rules-seasons figure { margin: 0; display: grid; gap: 4px; justify-items: center; }
.rules-land img { width: 100%; aspect-ratio: 700 / 808; object-fit: cover; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rules-land figcaption, .rules-seasons figcaption { font-size: 12.5px; color: #5d5242; text-align: center; }
.rules-costs { display: grid; gap: 8px; }
.rules-cost { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 250, 238, .6); border: 1px solid rgba(120, 80, 30, .2); }
.rules-cost__what { display: grid; gap: 2px; min-width: 0; }
.rules-cost__what b { font-family: var(--font-display); font-size: 16px; }
.rules-cost__what span { font-size: 13px; color: #6d6250; line-height: 1.35; }
.rules-cost__cards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rules-cost__cards img { width: 30px; height: 40px; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.rules-seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rules-seasons .rules-scroll__pic { aspect-ratio: 4 / 3; margin: 0; }
.rules-points { margin: 6px 0; padding-left: 20px; display: grid; gap: 4px; }
.rules-scroll__foot { margin: 18px 0 0; text-align: center; color: #6d6250; font-size: 14px; }
@media (max-width: 520px) {
  .rules-land { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rules-scroll__paper { font-size: 15px; }
  .rules-seasons figcaption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .rules-scroll, .rules-scroll__sheet { animation: none; }
}

/* ------------------------------------------------------------------ phone on its side
   A phone held sideways is short and wide: the island takes the left, your
   hand, buttons and Grandmother Ine take a scrolling column on the right, and
   the top bar slims down so the board keeps the height. */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { padding: 3px 10px; gap: 8px; }
  .topbar__home img, html[data-game-type="kakure"] .topbar__home img { width: 30px; height: 30px; }
  .topbar__title h1 { font-size: 16px; }
  .topbar__title p { display: none; }
  .topbar .btn, .topbar .icon-toggle { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  #view-game.game {
    display: grid; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) min(44vw, 360px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "players players" "board dock";
  }
  #view-game .mobile-players { grid-area: players; padding: 3px 8px; }
  #view-game .mobile-chat-notice { position: absolute; top: 4px; right: 8px; z-index: 8; border-radius: 999px; }
  #view-game .board-wrap { grid-area: board; height: auto; min-height: 0; }
  #view-game .dock { grid-area: dock; max-height: none; height: 100%; overflow-y: auto; grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  #view-game .dock > .guide { position: static; order: 99; grid-row: auto; grid-column: 1 / -1; width: auto; margin: 4px 0 0; padding: 8px 12px; }
  #view-game .guide__why, #view-game .guide__who small { display: none; }
  #view-game .rescard { width: 52px; }
  #view-game .hand { flex-wrap: wrap; }
  #devhand.is-empty { display: none; }
  .banner { top: 4px; font-size: 12.5px; padding: 4px 10px; }
  .dice-tray { top: 36px; }
  body:has(#view-game:not([hidden])) .modal { max-height: 86svh; }
  body:has(#view-game:not([hidden])) .modal-back { place-items: center end; padding: 8px; }
  body:has(#view-game:not([hidden])) .modal { width: min(44vw, 380px); }
}

/* ---------------------------------------------------------------- bot levels and pass and play */
.seat__level {
  font: inherit; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--shu-deep);
  background: rgba(255, 250, 238, .9); border: 1px solid rgba(142, 33, 22, .45); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.seat__level:hover:not(:disabled) { background: #fff; border-color: var(--shu-deep); }

/* On the paper of a pop-up: ink on washi, the chosen one in gold leaf. */
.seg { display: inline-flex; width: 100%; border: 1px solid rgba(120, 80, 30, .3); border-radius: 999px; padding: 3px; gap: 2px; background: rgba(120, 80, 30, .1); }
.seg__opt {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 15px; color: #4d4335; background: transparent;
  border: 0; border-radius: 999px; padding: 8px 6px; cursor: pointer; white-space: nowrap;
}
.seg__opt.is-on { background: var(--kin); color: #23180a; font-weight: 700; }

.level-modal, .pp-modal { border-radius: 16px; }
.level-pick { display: grid; gap: 10px; }
.level-pick__btn {
  display: grid; gap: 3px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.level-pick__btn strong { font-family: var(--font-display); font-size: 19px; }
.level-pick__btn span { color: var(--text-dim); font-size: 14px; }
.level-pick__btn.is-last { border-color: var(--kin); box-shadow: 0 0 0 1px rgba(214, 168, 76, .35); }
.level-pick__btn:hover:not(:disabled) { border-color: var(--kin-pale); }

.pp-lede { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.pp-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-seat { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.pp-seat__num, .pp-seat__face {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--kin); font-family: var(--font-display); font-weight: 700;
}
.pp-seat__face { object-fit: cover; overflow: hidden; }
.pp-seat__main { display: grid; gap: 6px; min-width: 0; }
.pp-seat.is-you .pp-seat__main { gap: 0; }
.pp-seat__note { color: var(--text-dim); font-size: 13px; }
.pp-seat__name { width: 100%; font: inherit; font-size: 16px; border-radius: 10px; padding: 9px 12px; }
.pp-seat.is-empty .pp-seat__num { opacity: .5; }

/* The hand-off between two people sharing the phone: nothing of the last
   hand shows until the next player taps their own name. */
.pass-cover {
  position: fixed; inset: 0; z-index: 5000; max-width: none; width: 100%; height: 100%; display: grid; place-items: center; padding: 16px;
  background:
    linear-gradient(180deg, rgba(8, 13, 24, .55), rgba(8, 13, 24, .92)),
    url('/img/kakure/art/home-hero.webp?v=20261011edo') 62% center / cover no-repeat, #0a0f1c;
  animation: fade .2s ease-out;
}
.pass-cover__card {
  width: min(24rem, 100%); display: grid; justify-items: center; gap: 10px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 22px;
  box-shadow: var(--shadow-deep);
}
.pass-cover__face {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  box-shadow: 0 0 0 3px var(--seat), 0 8px 20px rgba(0, 0, 0, .45); overflow: hidden; object-fit: cover;
}
.pass-cover__eyebrow { margin: 6px 0 0; letter-spacing: .24em; text-transform: uppercase; font-size: 12px; color: var(--text-dim); }
.pass-cover__name { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 8vw, 38px); color: var(--text); overflow-wrap: anywhere; }
.pass-cover__why { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.45; }
.pass-cover__go { width: 100%; margin-top: 8px; padding: 16px 18px; font-size: 19px; border-radius: 12px; }
@media (max-height: 700px) {
  .pp-modal { gap: 10px; padding: 14px 16px; }
  .pp-seats { gap: 6px; }
  .pp-seat__main { gap: 4px; }
  .seg__opt { padding: 6px; font-size: 14px; }
  .pp-seat__name { padding: 7px 10px; }
}
@media (max-height: 600px) { .pp-lede { display: none; } }
.add-friend__matches { margin-top: 10px; }
.add-friend__matches[hidden], .add-friend__recent[hidden] { display: none; }
.add-friend__matches { gap: 6px; }
.add-friend__matches .friend-chip { padding: 3px 12px 3px 3px; gap: 7px; font-size: 14px; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.add-friend__matches .friend-chip .avatar { width: 28px; height: 28px; font-size: 16px; }
.add-friend__matches.is-stale { opacity: .55; pointer-events: none; }

/* A seat a friend saved for you, until you open it. */
.table-tile.is-new { border-color: var(--shu); box-shadow: 0 0 0 2px rgba(200, 67, 43, .55), 0 14px 34px rgba(0, 0, 0, .4); animation: seat-glow 2.4s ease-in-out infinite; }
.table-tile__new, .game-card__new {
  display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--shu); color: #fff3e4; font-size: 12.5px; letter-spacing: .06em;
}
.game-card.is-new { border-color: var(--shu); box-shadow: 0 0 0 2px rgba(200, 67, 43, .55), 0 18px 40px rgba(0, 0, 0, .5); }
@keyframes seat-glow { 50% { box-shadow: 0 0 0 4px rgba(200, 67, 43, .35), 0 14px 34px rgba(0, 0, 0, .4); } }
@media (prefers-reduced-motion: reduce) { .table-tile.is-new { animation: none; } }
.seat-news { border-radius: 16px; text-align: center; justify-items: center; }
.seat-news .modal__actions { width: 100%; justify-content: center; }
.seat-news .modal__actions .btn { flex: 1 1 0; padding: 12px 14px; font-size: 16px; }
.seat-news__seal {
  width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; transform: rotate(-6deg);
  font-family: var(--font-brush); font-size: 30px; color: #fff3e4; background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17);
}
.seat-news__name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.seat-news__lede { margin: 0; font-size: 15px; line-height: 1.45; }

/* Invite a friend into a game under way: the link to share, and big buttons. */
.share-game { border-radius: 16px; text-align: center; }
.share-game__lede { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.share-game__link { display: block; padding: 10px 12px; border-radius: 8px; background: #fffaf0; border: 1px solid rgba(120, 80, 30, .25); color: var(--shu-deep); font-size: 13.5px; overflow-wrap: anywhere; user-select: all; }
.share-game .modal__actions { width: 100%; justify-content: center; flex-wrap: wrap; }
.share-game .modal__actions .btn { flex: 1 1 0; min-width: 0; padding: 12px 14px; font-size: 16px; white-space: nowrap; }

/* Who you're playing with, on each game card on Home. */
.game-card__with { color: #f3e3c0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.game-slot.has-corner .game-card .seats { padding-right: 104px; }

/* This Act's event, pinned to the board's top right corner. */
.board-corner { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* Only the buttons take taps: the gap beside and between them is still the board. */
.board-corner { pointer-events: none; }
.board-corner > * { pointer-events: auto; }
/* While you pick a spot on the board (a Mission, a Path, the Magistrate's
   land), the badges fade and let taps through to whatever lies under them. */
.board-wrap.is-picking > .board-corner { opacity: .3; }
.board-wrap.is-picking > .board-corner > * { pointer-events: none; }
/* The note in place of a hidden hand wraps on a small phone instead of running off it. */
#hand .empty-hand { white-space: normal; text-align: center; }
.act-event, .persecution {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(8, 13, 24, .82); border: 1px solid rgba(214, 168, 76, .55);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--kin-pale); box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.act-event[hidden], .persecution[hidden] { display: none; }
.persecution { display: inline-flex; align-items: center; gap: 8px; color: var(--washi); }
.persecution__pips { display: inline-flex; gap: 4px; }
.persecution__pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(220, 91, 60, .8); }
.persecution__pips i.is-on { background: #c8402a; box-shadow: 0 0 6px rgba(220, 91, 60, .8); }
.fx-act--event { animation-name: act-veil-long; animation-duration: 20s; }
/* Held until Continue: it fades in and stays; only the button puts it away. */
.fx-act.fx-act--hold { animation: act-veil-in .9s var(--ease-ink) both; cursor: default; overflow-y: auto; }
.fx-act--hold .fx-act__inner { margin: auto 0; }
@keyframes act-veil-in { from { opacity: 0; } to { opacity: 1; } }
/* Short phones: everything, Continue included, fits on one screen. */
@media (max-height: 700px) {
  .fx-act--hold .fx-act__inner { gap: 6px; padding: 10px 14px; }
  .fx-act--hold .fx-act__season, .fx-act--hold.fx-act--ine .fx-act__season { font-size: 56px; }
  .fx-act--hold .fx-act__title { font-size: 18px; letter-spacing: .25em; }
  .fx-act--hold .fx-act__ine { padding: 10px 12px; gap: 10px; }
  .fx-act--hold .fx-act__portrait { width: 42px; height: 42px; }
  .fx-act--hold .fx-act__words p { font-size: 13.5px; line-height: 1.32; }
  .fx-act--hold .fx-act__words .fx-act__rule { margin-top: 4px; }
  .fx-act--hold .fx-act__event { margin-top: 2px; padding: 8px 14px; gap: 2px; }
  .fx-act--hold .fx-act__event-title { font-size: 17px; }
  .fx-act--hold .fx-act__event-text { font-size: 14px; line-height: 1.3; }
  .fx-act--hold .fx-act__sweep { font-size: 13.5px; }
  .fx-act__continue { margin-top: 4px; min-height: 46px; font-size: 16px; }
}
.fx-act.fx-act--hold.is-leaving { animation: act-leave .7s cubic-bezier(.5, 0, .7, 1) forwards; pointer-events: none; }
.fx-act__continue { margin-top: 10px; min-width: min(260px, 70vw); min-height: 54px; font-size: 18px; letter-spacing: .14em;
  animation: rise-in 1s 1.2s var(--ease-ink) both; }
@keyframes act-veil-long { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* A hidden site you can bring back up before rolling: a gold ring, lit. */
.spot-ring { fill: rgba(246, 214, 140, .14); stroke: var(--kin-pale); stroke-width: .09; pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 206, 110, .95)); }
.spot-hit:hover > .spot-ring { stroke: #fff; }
.btn__note { display: block; font-size: 12px; line-height: 1.1; letter-spacing: .04em; opacity: .85; }
/* The rules as a book: one page at a time, turned with Next, Back or a
   swipe. Nothing scrolls; pictures shrink to leave the words room. */
.rules-scroll--book .rules-scroll__sheet { grid-template-rows: minmax(0, 1fr) auto; height: auto; max-height: 100%; }
.rules-scroll--book .rules-scroll__paper { overflow: hidden; padding-bottom: 14px; touch-action: pan-y; }
.rules-scroll--book .rules-scroll__part { border-top: 0; margin-top: 0; padding-top: 4px; }
.rules-scroll--book .rules-scroll__part[hidden], .rules-scroll--book [hidden] { display: none; }
.rules-scroll--book .rules-scroll__part.is-turned { animation: rules-page .32s var(--ease-ink, ease-out) both; }
@keyframes rules-page { from { opacity: 0; transform: translateX(14px); } }
.rules-scroll--book .rules-scroll__pic { max-height: 24svh; }
.rules-scroll--book .rules-seasons .rules-scroll__pic { max-height: 16svh; }
.rules-book__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px clamp(14px, 4vw, 30px) 14px;
  background: linear-gradient(180deg, #e4d3ae, #dcc89f);
}
.rules-book__nav .btn { min-height: 46px; min-width: 6.5rem; }
.rules-book__back { color: var(--sumi); border-color: rgba(29, 23, 18, .35); }
.rules-book__back[disabled] { opacity: .3; }
.rules-book__dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rules-book__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(29, 23, 18, .25); }
.rules-book__dots i.is-on { background: var(--shu, #b5301f); transform: scale(1.25); }
@media (max-height: 720px) {
  .rules-scroll--book .rules-scroll__pic { max-height: 13svh; }
  .rules-scroll--book .rules-land { padding: 0 9%; gap: 6px; margin: 6px 0; }
  .rules-scroll--book .rules-scroll__paper { font-size: 14.5px; line-height: 1.5; padding-top: 22px; }
  .rules-scroll--book .rules-scroll__kanji { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .rules-scroll--book .rules-scroll__part.is-turned { animation: none; } }
.rules-scroll--book .rules-scroll__part h3 { padding-right: 46px; }
/* ------------------------------------------------------------------ picture scroll
   The finished game unrolled one painting at a time between two rods. */
.recap, .recap[role="dialog"] { max-width: none; }
.recap {
  position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 30%, rgba(20, 32, 58, .96), rgba(2, 4, 10, .98));
  animation: rules-fade .3s ease both; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.recap.is-closing { animation: rules-fade .26s ease reverse forwards; }
.recap__close {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(214, 168, 76, .6); background: rgba(10, 15, 28, .8); color: var(--washi); font-size: 26px; line-height: 1; cursor: pointer;
}
.recap__scroll { display: flex; align-items: stretch; max-width: 100%; }
.recap__rod {
  flex: none; width: 14px; margin: -10px 0; border-radius: 7px;
  background: linear-gradient(90deg, #3b2414, #8a5a32 45%, #c08a52 55%, #4a2c17);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
}
.recap__sheet {
  width: min(440px, calc(100vw - 60px)); max-height: calc(100dvh - 110px); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 16px; position: relative;
  background: #f3e8d0; color: #2a1d12;
  box-shadow: inset 0 0 40px rgba(120, 80, 30, .25);
}
.recap__sheet.is-unrolling { animation: recap-unroll .7s var(--ease-ink) both; }
@keyframes recap-unroll { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.recap__art {
  width: 100%; aspect-ratio: 4 / 3; max-height: 40dvh; border-radius: 6px; flex: none;
  background: #14203a center / cover no-repeat; border: 1px solid rgba(90, 60, 30, .45);
}
.recap__seal {
  position: absolute; top: calc(14px + min(40dvh, (min(440px, calc(100vw - 60px)) - 32px) * .75) - 34px); right: 26px;
  width: 58px; height: 58px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 34px; color: #fff1e6; background: #b4271a;
  box-shadow: inset 0 0 0 3px rgba(255, 220, 190, .35), 0 6px 14px rgba(0, 0, 0, .4); transform: rotate(-4deg);
}
.recap__title { margin: 6px 64px 0 0; align-self: stretch; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; }
.recap__line { margin: 0; align-self: stretch; font-family: var(--font-serif); font-size: 17px; line-height: 1.45; }
.recap__hint { margin: 2px 0 0; font-size: 13px; letter-spacing: .1em; color: #7a5a3a; }
.recap__standings { align-self: stretch; display: grid; gap: 6px; }
.recap__row { display: grid; grid-template-columns: 34px minmax(0, max-content) 1fr; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; font-size: 14px; }
.recap__row b { font-family: var(--font-display); border-bottom: 3px solid var(--pc, #999); }
.recap__row span { text-align: right; color: #4a3826; }
.recap__row.is-winner { background: rgba(214, 168, 76, .28); }
.recap__face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #14203a; color: #f4ead4; }
.recap__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.recap__dots { display: flex; gap: 8px; }
.recap__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 234, 212, .3); }
.recap__dots i.is-on { background: #e8c87a; }
.results-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .recap__sheet.is-unrolling, .recap { animation: none; } }
/* A phone on its side: the painting steps aside so the words and buttons fit. */
@media (max-height: 520px) {
  .recap { gap: 6px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .recap__sheet { width: min(560px, calc(100vw - 120px)); max-height: calc(100dvh - 40px); padding: 10px 14px; gap: 6px; }
  .recap__art { max-height: 22dvh; }
  .recap__sheet:has(.recap__standings) .recap__art, .recap__sheet:has(.recap__standings) .recap__seal { display: none; }
  .recap__seal { top: calc(10px + 22dvh - 30px); width: 44px; height: 44px; font-size: 26px; }
  .recap__title { font-size: 19px; margin-top: 0; }
  .recap__line { font-size: 15px; }
  .recap__row { padding: 2px 8px; }
  .recap__dots { display: none; }
}
/* A player's own photo fills the circle, unlike the painted portraits that stand in it. */
.player-photo .portrait-image { object-fit: cover; object-position: center; }
.avatar-cell .player-photo { border-radius: 50%; }
.avatar-cell--photo { border-style: dashed; border-color: rgba(120, 80, 30, .5); }
.avatar-photo-label { font-family: var(--font-display); font-size: 13px; line-height: 1.15; color: var(--sumi); text-align: center; padding: 4px; }
/* While Ine's tip for the wait runs along the top, the event tag steps down
   above the map tools so neither covers the other. */
.board-wrap:has(> .guide[data-aim="wait"]:not([hidden])) > .board-corner { top: auto; bottom: 186px; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  /* Phones have no free corner while the tip is up: the tags wait for its OK. */
  .board-wrap:has(> .guide[data-aim="wait"]:not([hidden])) > .board-corner { display: none; }
}

/* ------------------------------------------------------------------ weekly challenge and seals */
.challenge__kicker { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--shu-deep, #8e2116); }
.challenge__goal { margin: 0; }
.challenge__board { display: grid; gap: 4px; }
.challenge__board:empty { display: none; }
.challenge__row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.challenge__row .avatar { width: 30px; height: 30px; }
.challenge__row b { font-weight: 600; color: #6d6250; }
.challenge__row.is-done b { color: var(--shu-deep, #8e2116); }
.challenge__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seals__row {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; width: 100%; padding: 10px; border-radius: 14px; cursor: pointer;
  background: rgba(10, 15, 28, .55); border: 1px solid rgba(214, 168, 76, .35);
}
.seals__row .seal-stamp { width: 100%; height: auto; aspect-ratio: 1; max-width: 40px; justify-self: center; font-size: clamp(14px, 4.4vw, 20px); }
.seal-stamp {
  width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; flex: none;
  font-family: var(--font-brush); font-size: 20px; line-height: 1; color: rgba(244, 234, 212, .35);
  border: 1px dashed rgba(244, 234, 212, .3);
}
.seal-stamp.is-earned { color: #fff1e6; border: 0; background: radial-gradient(circle at 35% 30%, #d9583a, #9b2a17); box-shadow: inset 0 0 0 2px rgba(255, 230, 200, .35); transform: rotate(-4deg); }
.seal-stamp.is-title, .seal-card.is-title .seal-stamp { outline: 2px solid #e8c87a; outline-offset: 2px; }
.seals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seal-card {
  display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; text-align: center; cursor: pointer;
  background: rgba(255, 250, 238, .55); border: 1px solid rgba(120, 80, 30, .25); color: var(--sumi, #16130f); font: inherit;
}
.seal-card:disabled { cursor: default; opacity: .8; }
.seal-card .seal-stamp:not(.is-earned) { color: rgba(60, 40, 20, .35); border-color: rgba(60, 40, 20, .3); }
.seal-card strong { font-family: var(--font-display); font-size: 13px; line-height: 1.15; }
.seal-card span:last-child { font-size: 11px; line-height: 1.25; color: #6d6250; }
.seal-card.is-title { background: rgba(232, 200, 122, .45); border-color: #b8913c; }
.seals-note { margin: 10px 0 0; text-align: center; }
/* Enough seals: a gold ring around the portrait at the table. */
.pcard.has-ring .avatar { box-shadow: 0 0 0 2px #e8c87a, 0 0 10px rgba(232, 200, 122, .55); }
.circle-card.challenge { grid-template-columns: 58px 1fr; align-items: start; gap: 14px; }
.circle-card.challenge .circle-card__seal { width: 58px; height: 58px; font-size: 26px; }

/* ---------------------------------------------------------------- Play now
 * The front door: a name and one button, straight into a game. Signing in
 * waits behind "I already have an account". */
.signin__play { margin-top: 2px; }
.signin__play .btn--big { font-size: 20px; padding: 14px 18px; letter-spacing: .08em; }
.signin__promise { text-align: center; color: var(--shu-deep); font-family: var(--font-display); letter-spacing: .06em; margin: 2px 0 0; }
.signin__have {
  justify-self: center; background: none; border: 0; padding: 10px 12px; min-height: 44px;
  color: #4a4034; font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.signin.is-front #signin-more { display: none; }
.signin.is-front .signin__card { gap: 12px; }

/* Keep your account: a quiet card on Home for Play now players. */
.keep-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(244, 233, 210, .94); color: var(--sumi); border: 1px solid rgba(201, 162, 75, .7);
}
.keep-card__seal { font-family: var(--font-brush); font-size: 26px; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--shu); color: #fff6e6; border-radius: 9px; }
.keep-card b { font-family: var(--font-display); display: block; font-size: 16px; }
.keep-card span { font-size: 13px; color: #5a4f40; line-height: 1.35; }
.keep-form { display: grid; gap: 8px; }
.keep-form label { font-size: 13px; color: #6d6250; }

/* The Great Persecution: the sweep's toll, in red, under Ine's words. */
.fx-act--persecution .fx-act__season { color: #e8664a; }
.fx-act__sweep {
  list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 6px; text-align: left;
  max-width: min(34rem, calc(100vw - 32px)); border-radius: 14px;
  background: rgba(40, 8, 6, .82); border: 1px solid rgba(220, 91, 60, .7); color: var(--washi);
  font-family: var(--font-serif); font-size: 15px; line-height: 1.35; animation: rise-in 1.2s 1.4s var(--ease-ink) both;
}
.fx-act__sweep li { padding-left: 18px; position: relative; }
.fx-act__sweep li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: #c8402a; }
/* One step from striking: the meter turns red. */
.persecution.is-near { border-color: #dc5b3c; color: #ffd9cc; box-shadow: 0 0 0 1px rgba(220, 91, 60, .6), 0 4px 12px rgba(0, 0, 0, .45); }
/* Phones: the meter shrinks to its kanji and pips so it keeps off the lands. */
.persecution__kanji { display: none; font-family: var(--font-brush); font-size: 15px; color: #ff9a80; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  .persecution { padding: 5px 10px; gap: 6px; }
  .persecution__word { display: none; }
  .persecution__kanji { display: inline; }
  .persecution__pips i { width: 8px; height: 8px; }
}