/* Launch polish for the game screen: pieces that read at night, and controls
   finished like black lacquer with a gold-leaf edge. Loaded last; it restyles
   only, so layout stays with table.css. */

:root {
  --lacquer-top: #2a2320;
  --lacquer-bottom: #120e0c;
  --leaf: #d9ad55;
  --leaf-soft: rgba(217, 173, 85, .55);
  --leaf-faint: rgba(217, 173, 85, .22);
  --icon-build: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 11.5 12 4.5l9.5 7M6 10v9.5h12V10M10.2 19.5v-5h3.6v5'/%3E%3C/svg%3E");
  --icon-trade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h15M15.5 5l3.5 3.5-3.5 3.5M20 15.5H5M8.5 12 5 15.5 8.5 19'/%3E%3C/svg%3E");
  --icon-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='10' height='14' rx='1.5' transform='rotate(-10 8.5 13)'/%3E%3Crect x='10.5' y='4' width='10' height='14' rx='1.5' transform='rotate(8 15.5 11)'/%3E%3C/svg%3E");
  --icon-fan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1.9 24 24'%3E%3Cpath d='M9.12 17.67L1.43 15.45A11 11 0 0 1 3.44 11.59L9.67 16.62ZM9.74 16.53L3.71 11.27A11 11 0 0 1 7.16 8.62L10.68 15.81ZM10.78 15.76L7.54 8.44A11 11 0 0 1 11.79 7.50L11.94 15.50ZM12.06 15.50L12.21 7.50A11 11 0 0 1 16.46 8.44L13.22 15.76ZM13.32 15.81L16.84 8.62A11 11 0 0 1 20.29 11.27L14.26 16.53ZM14.33 16.62L20.56 11.59A11 11 0 0 1 22.57 15.45L14.88 17.67Z'/%3E%3Ccircle cx='12' cy='18.5' r='1.8'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ board pieces */
/* A hidden site keeps its owner's colour, darkened, so you still know whose it is. */
.site-tile.is-hidden { filter: brightness(.55) saturate(.7); }

/* ------------------------------------------------------------ shared finish */
/* Every control on the table is the same object: a rounded lacquer box, a
   hairline of gold leaf just inside its edge, and a soft sheen along the top. */
#view-game .dock__actions .btn,
#view-game .board-tools,
body:has(#view-game:not([hidden])) .topbar__right .btn,
body:has(#view-game:not([hidden])) .topbar__right .icon-toggle,
#view-game .react-btn {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .09), rgba(255, 236, 200, 0) 46%),
    linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  border: 1px solid #050403;
  box-shadow:
    inset 0 0 0 1px var(--leaf-faint),
    inset 0 1px 0 rgba(255, 236, 200, .14),
    0 3px 10px rgba(0, 0, 0, .5);
  color: #f3e6c8;
}

/* ------------------------------------------------------------ top bar */
/* In a game the top bar is the same lacquer as the table edge below. */
body:has(#view-game:not([hidden])) .topbar {
  background:
    linear-gradient(180deg, rgba(14, 11, 9, .97), rgba(24, 19, 16, .95)),
    var(--pattern-seigaiha);
  background-size: auto, 80px 40px;
}
body:has(#view-game:not([hidden])) .topbar__right .btn { border-radius: 999px; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  body:has(#view-game:not([hidden])) .topbar__right #btn-mobile-chat { padding: 0 12px; letter-spacing: .05em; font-size: 13px; }
  body:has(#view-game:not([hidden])) .topbar-menu {
    border-radius: 16px; border: 1px solid #050403;
    background: linear-gradient(180deg, #221b17, #100c0a);
    box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 12px 30px rgba(0, 0, 0, .6);
  }
}
body:has(#view-game:not([hidden])) .topbar__right .icon-toggle { border-radius: 50%; color: var(--leaf); }
body:has(#view-game:not([hidden])) .topbar__right #btn-more[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1.5px var(--leaf), 0 3px 10px rgba(0, 0, 0, .5);
}
body:has(#view-game:not([hidden])) .clock {
  border-radius: 999px; border: 1px solid var(--leaf-faint);
  background: rgba(8, 6, 4, .55); color: #e9d9b4;
}

/* ------------------------------------------------------------ player strip */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  #view-game .mobile-players {
    background: linear-gradient(180deg, #0d0b0a, #17120f);
    border-bottom: 0; box-shadow: inset 0 -1px 0 var(--leaf-faint);
  }
  #view-game .mobile-player {
    border-radius: 999px; border-width: 1px;
    padding: 4px 10px 4px 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .45);
  }
  #view-game .mobile-player .avatar { width: 30px; height: 30px; }
  /* Whose turn it is: a gold-leaf ring and a soft lamp glow. */
  #view-game .mobile-player.is-turn {
    box-shadow: 0 0 0 2px var(--leaf), 0 0 14px 2px rgba(255, 205, 120, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
}

/* ------------------------------------------------------------ board tools */
/* Story, Sites and the zoom buttons share one lacquer rail with gold dividers. */
#view-game .board-tools { gap: 0; padding: 0; border-radius: 18px; overflow: hidden; }
#view-game .board-tools .icon-btn {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #f0dca8;
  font-family: var(--font-display); font-weight: 700;
}
#view-game .board-tools .icon-btn:active { background: rgba(217, 173, 85, .16); }
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  /* Two even rows: Story and Sites over zoom in, zoom out and Fit. */
  #view-game .board-tools {
    display: grid; grid-template-columns: repeat(6, 25px); max-width: none;
  }
  #view-game .board-tools .icon-btn {
    width: auto; min-width: 0; height: 40px; padding: 0; font-size: 13px; letter-spacing: .05em;
    grid-column: span 2; border-left: 1px solid var(--leaf-faint);
  }
  #view-game .board-tools #btn-story, #view-game .board-tools #btn-sites { grid-column: span 3; }
  #view-game .board-tools #btn-sites[hidden] + #btn-zoom-in { grid-column: 1 / span 2; }
  #view-game .board-tools #btn-story:has(+ #btn-sites[hidden]) { grid-column: span 6; }
  #view-game .board-tools #btn-zoom-in, #view-game .board-tools #btn-zoom-out { font-size: 21px; letter-spacing: 0; }
  #view-game .board-tools #btn-story, #view-game .board-tools #btn-zoom-in { border-left: 0; }
  #view-game .board-tools #btn-zoom-in, #view-game .board-tools #btn-zoom-out, #view-game .board-tools #btn-zoom-fit {
    border-top: 1px solid var(--leaf-faint);
  }
}

/* ------------------------------------------------------------ dice tray */
#view-game .board-wrap > .dice-tray {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .08), rgba(255, 236, 200, 0) 40%),
    linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  border: 1px solid #050403;
}
#view-game .board-wrap > .dice-tray.is-ready { border-color: var(--leaf); }

/* ------------------------------------------------------------ the dock */
#view-game .dock {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217, 173, 85, .07), transparent 60%),
    linear-gradient(180deg, #1a1411, #0c0908);
}
/* Your colour along the table edge, under a hairline of gold leaf. */
#view-game .dock::before {
  content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--leaf-soft) 20%, var(--leaf) 50%, var(--leaf-soft) 80%, transparent);
  pointer-events: none;
}

/* The prompt: a slip of washi with a vermilion seal. */
#view-game .dock > .banner {
  background:
    linear-gradient(180deg, #f8f0dc, #eadcbc);
  color: #241b12; border: 1px solid rgba(120, 80, 30, .35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .45);
  font-family: var(--font-display); letter-spacing: .03em; padding-left: 10px;
}
#view-game .dock > .banner::before {
  display: block; content: ''; position: static; flex: none;
  width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #e0573a, #9b2a17);
  box-shadow: 0 0 0 1.5px rgba(155, 42, 23, .25);
}
#view-game .dock > .banner .btn {
  border-radius: 999px; background: linear-gradient(180deg, #2a2320, #120e0c);
  color: #f3e6c8; border: 1px solid #050403; box-shadow: inset 0 0 0 1px var(--leaf-faint);
}

/* ------------------------------------------------------------ action row */
#view-game .dock__actions { gap: 10px; }
#view-game .dock__actions .btn {
  border-radius: 14px; min-height: 56px;
  font-family: var(--font-display); text-transform: none; letter-spacing: .1em;
}
#view-game .dock__actions .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--leaf-soft), inset 0 2px 6px rgba(0, 0, 0, .5); }
/* A small gold mark before Build, Trade and Cards. */
#view-game .dock__actions .action-toggle::before {
  content: ''; width: 20px; height: 20px; flex: none; margin-right: -2px;
  background: var(--leaf);
  -webkit-mask: var(--icon-build) center / contain no-repeat; mask: var(--icon-build) center / contain no-repeat;
}
#view-game .dock__actions .action-toggle[data-tray-toggle="trade"]::before { -webkit-mask-image: var(--icon-trade); mask-image: var(--icon-trade); }
#view-game .dock__actions .action-toggle[data-tray-toggle="cards"]::before { -webkit-mask-image: var(--icon-cards); mask-image: var(--icon-cards); }
#view-game .dock__actions .action-toggle__chev { width: 7px; height: 7px; opacity: .6; color: var(--leaf); }
#view-game .dock__actions .action-toggle.is-open,
#view-game .dock__actions .action-toggle.is-active {
  box-shadow: inset 0 0 0 1.5px var(--leaf), 0 0 12px rgba(217, 173, 85, .28), 0 3px 10px rgba(0, 0, 0, .5);
}
/* The move that ends or answers this moment: vermilion lacquer, gold-edged. */
#view-game .dock__actions .btn.btn--primary {
  background:
    linear-gradient(180deg, rgba(255, 225, 180, .28), rgba(255, 225, 180, 0) 48%),
    linear-gradient(180deg, #d4492d, #8f2414);
  border: 1px solid #4a0f06; color: #fff6e4;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .55), 0 4px 14px rgba(160, 40, 15, .45), 0 2px 4px rgba(0, 0, 0, .5);
}
/* Waiting on the dice: the turn button rests, but still reads. */
#view-game .dock__actions .btn:disabled {
  opacity: 1; color: rgba(243, 230, 200, .38);
  background: linear-gradient(180deg, #1b1613, #100c0a);
  box-shadow: inset 0 0 0 1px rgba(217, 173, 85, .1);
}
/* React: a folding fan in gold leaf, not an emoji. */
/* Flex, not grid: the hidden emoji text would take a grid row of its own and
   push the fan up. The fan's own drawing is centred in its box (viewBox). */
#view-game .react-btn {
  border-radius: 14px; font-size: 0; line-height: 0; color: transparent;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
#view-game .react-btn::before {
  content: ''; width: 28px; height: 28px; background: var(--leaf);
  -webkit-mask: var(--icon-fan) center / contain no-repeat; mask: var(--icon-fan) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  #view-game .dock__actions .btn { transition: none; }
}

/* ------------------------------------------------------------ trays */
#view-game .tray {
  border-radius: 18px; border: 1px solid #050403;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(217, 173, 85, .08), transparent 60%),
    linear-gradient(180deg, #221b17, #100c0a);
  box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 -8px 30px rgba(0, 0, 0, .6);
}
#view-game .tray__head strong { color: var(--leaf); }
#view-game .tray__close {
  background: linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  border: 1px solid #050403; box-shadow: inset 0 0 0 1px var(--leaf-faint); color: #f3e6c8;
}
#view-game .tray .tray-item {
  border-radius: 12px; border: 1px solid #050403;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .07), rgba(255, 236, 200, 0) 50%),
    linear-gradient(180deg, #2c2420, #17120f);
  box-shadow: inset 0 0 0 1px var(--leaf-faint);
  color: #f3e6c8;
}
#view-game .tray .tray-item:not(:disabled):hover,
#view-game .tray .tray-item:not(:disabled):active { box-shadow: inset 0 0 0 1.5px var(--leaf); }
#view-game .tray .tray-item:disabled { opacity: .55; }

/* ------------------------------------------------------------ small phones */
@media (max-width: 400px) {
  #view-game .board-tools { grid-template-columns: repeat(6, 21px); border-radius: 15px; }
  #view-game .board-tools .icon-btn { height: 34px; font-size: 12px; letter-spacing: .02em; }
  #view-game .dock__actions { gap: 7px; }
  #view-game .dock__actions .btn { gap: 5px; padding: 8px 6px; letter-spacing: .05em; }
  #view-game .dock__actions .action-toggle::before { width: 16px; height: 16px; }
  #view-game .dock__actions .react-btn { width: 48px; }
}
@media (max-width: 350px) {
  #view-game .dock__actions .action-toggle::before { display: none; }
}
/* The narrowest phones keep table.css's compact chips, so six seats still fit. */
@media (max-width: 360px) {
  #view-game .mobile-player { padding: 3px 6px 3px 3px; }
  #view-game .mobile-player .avatar { width: 22px; height: 22px; }
}

/* This Act's event tag on the map: the same lacquer and gold. */
#view-game .act-event {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .09), rgba(255, 236, 200, 0) 46%),
    linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  border: 1px solid #050403; color: #f0dca8;
  box-shadow: inset 0 0 0 1px var(--leaf-soft), 0 3px 10px rgba(0, 0, 0, .5);
}

/* The Act tag: a season seal, the Act and round, and this Act's event. */
#view-game .act-event { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; text-align: left; }
#view-game .act-event[hidden] { display: none; }
.act-event__seal, .act-rules__mark {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 17px; 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, .45);
}
.act-event[data-season="autumn"] .act-event__seal, .act-rules[data-season="autumn"] .act-rules__mark { background: radial-gradient(circle at 35% 30%, #e48a3a, #8f3a12); }
.act-event[data-season="winter"] .act-event__seal, .act-rules[data-season="winter"] .act-rules__mark { background: radial-gradient(circle at 35% 30%, #8aa0c4, #33476e); }
.act-mark { cursor: pointer; }
.act-event__words { display: grid; line-height: 1.15; }
.act-event__words b { font-size: 14px; letter-spacing: .06em; color: #f6e6bd; }
.act-event__words small { font-size: 12px; letter-spacing: .04em; color: #e2c27a; font-weight: 600; }
/* The Act clock: a notch per round of this Act. */
.act-event__clock { display: flex; gap: 2px; margin-top: 3px; }
.act-event__clock i { flex: 1 1 0; min-width: 3px; height: 3px; border-radius: 2px; background: rgba(246, 230, 189, .22); }
.act-event__clock i.is-on { background: #e2c27a; }
/* This Act's rules: one row each, a small seal and two short lines. */
.act-rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.act-rules__row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.act-rules__mark { width: 28px; height: 28px; font-size: 15px; margin-top: 2px; }
.act-rules__row b { display: block; font-family: var(--font-display); font-size: 15px; color: #3a2410; letter-spacing: .03em; }
.act-rules__row p { margin: 1px 0 0; font-size: 13.5px; line-height: 1.3; color: #4a3520; }

/* ------------------------------------------------------------ offer a trade */
/* A washi sheet with a gold-ruled title; the goods drawn like the cards in
   your hand; the offer in vermilion lacquer. */
body:has(#view-game:not([hidden])) :is(.modal--offer, .modal--scroll) {
  border-radius: 22px; padding: 16px 16px 16px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 242, .9), transparent 70%),
    linear-gradient(180deg, #f6eedb, #e8d9b8);
  box-shadow: 0 0 0 1px rgba(60, 40, 15, .35), inset 0 0 0 5px rgba(255, 250, 238, .55),
    inset 0 0 0 6px rgba(176, 141, 63, .55), 0 26px 60px rgba(0, 0, 0, .65);
}
body:has(#view-game:not([hidden])) :is(.modal--offer, .modal--scroll)::before { border-radius: inherit; }
:is(.modal--offer, .modal--scroll) h3, :root[data-game="kakure"] :is(.modal--offer, .modal--scroll) h3 {
  text-align: center; border: 0; padding-bottom: 8px; margin-bottom: 0; font-size: 22px; letter-spacing: .1em;
  background: linear-gradient(90deg, transparent, #b08d3f 20%, #e2c27a 50%, #b08d3f 80%, transparent) bottom / 100% 1.5px no-repeat;
}
:is(.modal--offer, .modal--scroll) .trade-label {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 2px;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #8e2116;
}
:is(.modal--offer, .modal--scroll) .trade-label::before, :is(.modal--offer, .modal--scroll) .trade-label::after {
  content: ''; flex: 1; height: 1px; background: rgba(142, 33, 22, .3);
}
/* Goods: five across, centred when you only hold a few. */
:is(.modal--offer, .modal--scroll) .picker { display: flex; justify-content: center; gap: 6px; overflow: visible; }
:is(.modal--offer, .modal--scroll) .picker__cell {
  flex: 0 0 calc((100% - 24px) / 5); padding: 5px 3px 6px; min-width: 0; gap: 4px; border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0, #efe2c6);
  border: 1px solid rgba(60, 40, 15, .22);
  box-shadow: 0 1px 2px rgba(40, 25, 10, .18);
}
:is(.modal--offer, .modal--scroll) .picker__cell img, :is(.modal--offer, .modal--scroll) .picker__art {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
}
:is(.modal--offer, .modal--scroll) .picker__cell > img, :is(.modal--offer, .modal--scroll) .picker__art img {
  box-shadow: inset 0 0 0 1px #1a120b; outline: 1.5px solid #1a120b; outline-offset: -1.5px;
}
:is(.modal--offer, .modal--scroll) .picker__art img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
:is(.modal--offer, .modal--scroll) .picker__cell .name { font-family: var(--font-display); font-size: 12px; color: #3d342a; letter-spacing: .03em; }
:is(.modal--offer, .modal--scroll) .picker__cell.is-selected {
  border-color: #c8432b; transform: translateY(-2px);
  background: linear-gradient(180deg, #fff6ea, #f5dcc6);
  box-shadow: 0 0 0 1.5px #c8432b, 0 6px 14px rgba(160, 50, 20, .28);
}
:is(.modal--offer, .modal--scroll) .picker__cell { transition: transform .15s var(--ease-ink), box-shadow .15s, border-color .15s; }
/* Steppers: a quiet minus, a lacquer plus with a gold cross. */
:is(.modal--offer, .modal--scroll) .stepper { gap: 1px; justify-content: center; width: 100%; }
:is(.modal--offer, .modal--scroll) .stepper button {
  width: auto; height: auto; flex: 0 1 23px; min-width: 0; aspect-ratio: 1; padding: 0;
  font-size: 15px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(60, 40, 15, .3); color: #3d342a; box-shadow: none;
}
:is(.modal--offer, .modal--scroll) .stepper button:last-child {
  background: linear-gradient(180deg, #2a2320, #120e0c); border-color: #050403; color: var(--leaf);
  box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 1px 3px rgba(0, 0, 0, .35);
}
:is(.modal--offer, .modal--scroll) .stepper button:disabled { opacity: .28; }
:is(.modal--offer, .modal--scroll) .stepper span { font-size: 16px; min-width: 13px; text-align: center; }
/* Who to ask: full colour when asked, a dashed outline when not. */
:is(.modal--offer, .modal--scroll) .ask-chip { min-height: 42px; font-family: var(--font-display); letter-spacing: .03em; }
:is(.modal--offer, .modal--scroll) .ask-chip[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .25);
}
:is(.modal--offer, .modal--scroll) .ask-chip[aria-pressed="false"] .ask-chip__name { text-decoration: line-through; text-decoration-color: rgba(74, 63, 49, .45); }
/* One row per player: who, then the cards the table saw them collect. */
.modal--offer .ask-row { flex-direction: column; gap: 5px; }
.modal--offer .ask-chip { flex: none; width: 100%; justify-content: flex-start; min-height: 40px; padding: 4px 8px 4px 5px; }
.modal--offer .ask-chip .ask-chip__body { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; overflow: visible; }
.modal--offer .ask-chip .ask-chip__name { flex: 0 1 auto; min-width: 0; }
.modal--offer .ask-chip .ask-chip__seen { flex: 0 1 auto; min-width: 0; overflow: visible; white-space: nowrap; }
.seen-hand { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 8px; column-gap: 11px; overflow: visible !important; font-family: var(--font-body, inherit); letter-spacing: 0; text-decoration: none; }
/* Each card they were seen to collect: its art, with the red count badge the hand uses. */
.seen-hand__card { position: relative; display: block; overflow: visible !important; transition: opacity .15s, transform .15s; }
.seen-hand__card img {
  display: block; width: 24px; height: 32px; object-fit: cover; border-radius: 4px;
  border: 1.5px solid #fffaf0; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.seen-hand__count {
  position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff;
  background: radial-gradient(circle at 35% 30%, #e0503a, #a5281b); border: 1.5px solid #fffaf0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35); text-shadow: none; font-family: var(--font-display);
}
.seen-hand__unknown {
  padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.2; white-space: nowrap;
  color: #4a3f31; background: rgba(255, 250, 238, .9); box-shadow: 0 0 0 1px rgba(120, 80, 30, .25);
  text-shadow: none; font-family: var(--font-body, inherit); letter-spacing: .01em;
}
/* Many kinds at once: tighter, so the row still fits a small phone. */
.seen-hand.is-dense { column-gap: 6px; }
.seen-hand.is-dense .seen-hand__card img { width: 19px; height: 25px; }
.seen-hand.is-dense .seen-hand__unknown { padding: 2px 5px; font-size: 11px; margin-left: 2px; }
.seen-hand__card.is-wanted { transform: translateY(-2px) scale(1.15); }
.seen-hand__card.is-wanted img { border-color: #f2c94c; box-shadow: 0 0 0 1.5px rgba(60, 35, 10, .5), 0 0 8px rgba(242, 201, 76, .9); }
/* The deal, in one line, before you send it. */
:is(.modal--offer, .modal--scroll) .trade-sum {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; text-align: center;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .03em; color: #6d6250;
  background: rgba(120, 80, 30, .08); border: 1px dashed rgba(120, 80, 30, .3);
}
:is(.modal--offer, .modal--scroll) .trade-sum.is-ready { color: #241b12; background: rgba(176, 141, 63, .16); border: 1px solid rgba(176, 141, 63, .55); }
:is(.modal--offer, .modal--scroll) .modal__actions { gap: 10px; margin-top: 10px; }
:is(.modal--offer, .modal--scroll) .modal__actions .btn { min-height: 50px; border-radius: 14px; font-size: 16px; letter-spacing: .1em; }
:is(.modal--offer, .modal--scroll) .modal__actions .btn:not(.btn--primary) {
  background: linear-gradient(180deg, #fffaf0, #efe2c6); border: 1px solid rgba(60, 40, 15, .35); color: #241b12;
}
:is(.modal--offer, .modal--scroll) .modal__actions .btn--primary {
  background:
    linear-gradient(180deg, rgba(255, 225, 180, .28), rgba(255, 225, 180, 0) 48%),
    linear-gradient(180deg, #d4492d, #8f2414);
  border: 1px solid #4a0f06; color: #fff6e4;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .55), 0 4px 12px rgba(160, 40, 15, .35);
}
:is(.modal--offer, .modal--scroll) .modal__actions .btn--primary:disabled {
  background: linear-gradient(180deg, #d9a593, #c18a76); border-color: rgba(74, 15, 6, .35);
  color: rgba(255, 246, 228, .85); box-shadow: none; text-shadow: none;
}
/* Bank trade and the 7's discard share the scroll. */
:is(.modal--offer, .modal--scroll) .trade-note { margin: 6px 0 0; text-align: center; color: #6d6250; }
:is(.modal--offer, .modal--scroll) .picker__cell[role="button"] { cursor: pointer; padding-bottom: 7px; }
:is(.modal--offer, .modal--scroll) .picker__rate {
  font-size: 10.5px; letter-spacing: .04em; color: #8e2116; line-height: 1;
}
@media (max-width: 360px) {
  :is(.modal--offer, .modal--scroll) .stepper button { font-size: 12px; }
  :is(.modal--offer, .modal--scroll) .picker__cell img, :is(.modal--offer, .modal--scroll) .picker__art { aspect-ratio: 4 / 3; }
  :is(.modal--offer, .modal--scroll) .picker__cell { padding: 4px 2px 5px; gap: 2px; }
  :is(.modal--offer, .modal--scroll) .ask-chip { min-height: 36px; font-size: 13px; }
  :is(.modal--offer, .modal--scroll) .modal__actions .btn { min-height: 44px; }
  :is(.modal--offer, .modal--scroll) .picker { gap: 4px; }
  :is(.modal--offer, .modal--scroll) .picker__cell { flex-basis: calc((100% - 16px) / 5); }
}

/* ------------------------------------------------------------ every other screen */
/* Home, the tables, sign-in and every pop-up wear the game's finish: rounded
   lacquer buttons with a gold-leaf hairline, vermilion for the one to press. */
.topbar {
  background:
    linear-gradient(180deg, rgba(14, 11, 9, .97), rgba(24, 19, 16, .95)),
    var(--pattern-seigaiha);
  background-size: auto, 80px 40px;
}
.btn, :root[data-game="kakure"] .btn {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .09), rgba(255, 236, 200, 0) 46%),
    linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  border: 1px solid #050403;
  color: #f3e6c8;
  box-shadow: inset 0 0 0 1px var(--leaf-faint), inset 0 1px 0 rgba(255, 236, 200, .14), 0 3px 10px rgba(0, 0, 0, .45);
}
.btn:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .13), rgba(255, 236, 200, 0) 46%),
    linear-gradient(180deg, #342b27, #17120f);
  border-color: #050403;
  box-shadow: inset 0 0 0 1px var(--leaf-soft), inset 0 1px 0 rgba(255, 236, 200, .16), 0 5px 14px rgba(0, 0, 0, .5);
}
.btn--primary, :root[data-game="kakure"] .btn--primary {
  color: #fff6e4;
  background:
    linear-gradient(180deg, rgba(255, 225, 180, .28), rgba(255, 225, 180, 0) 48%),
    linear-gradient(180deg, #d4492d, #8f2414);
  border: 1px solid #4a0f06;
  text-shadow: 0 1px 0 rgba(60, 10, 0, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .55), 0 4px 12px rgba(120, 30, 10, .4);
}
.btn--primary:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 230, 190, .34), rgba(255, 230, 190, 0) 48%),
    linear-gradient(180deg, #e0553a, #9b2a17);
  border-color: #4a0f06;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 165, .8), 0 6px 16px rgba(140, 35, 12, .45);
}
.btn--ghost { background: rgba(10, 8, 6, .35); box-shadow: inset 0 0 0 1px var(--leaf-faint); border-color: transparent; }
.btn--small { border-radius: 12px; }
.btn:disabled { box-shadow: none; }

/* On washi (pop-ups, cards, the table) the plain button is a washi tab. */
.modal .btn:not(.btn--primary), .circle-card .btn:not(.btn--primary), .table-card .btn:not(.btn--primary),
.keep-card .btn:not(.btn--primary), .story__paper .btn:not(.btn--primary) {
  background: linear-gradient(180deg, #fffaf0, #efe2c6); color: #241b12; text-shadow: none;
  border: 1px solid rgba(60, 40, 15, .35);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(40, 25, 10, .2);
}
.modal .btn:not(.btn--primary):hover:not(:disabled), .circle-card .btn:not(.btn--primary):hover:not(:disabled),
.table-card .btn:not(.btn--primary):hover:not(:disabled), .keep-card .btn:not(.btn--primary):hover:not(:disabled) {
  background: linear-gradient(180deg, #fffdf6, #f4e8cf); border-color: rgba(176, 141, 63, .9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(176, 141, 63, .35), 0 2px 6px rgba(40, 25, 10, .22);
}

/* Sites: each player's chip keeps its colour edge, and the chosen one its tint. */
.modal--sites .site-chip.btn { border-left: 4px solid var(--seat); }
.modal--sites .site-chip.btn.is-on {
  border-color: var(--seat); background: color-mix(in srgb, var(--seat) 26%, #fffaf0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px var(--seat);
}

input, select, :root[data-game="kakure"] input, :root[data-game="kakure"] select { border-radius: 12px; }

/* Pop-ups: rounded washi with a gold edge and a gold rule under the title. */
.modal {
  border-radius: 22px;
  background: linear-gradient(180deg, #f8f0dd, #e9dab9);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 0 0 6px rgba(255, 250, 238, .3), inset 0 0 0 7px rgba(176, 141, 63, .4);
}
.modal::before { border-radius: inherit; }
.modal h3, :root[data-game="kakure"] .modal h3 {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(176, 141, 63, 0), rgba(176, 141, 63, .9) 18%, rgba(176, 141, 63, .9) 82%, rgba(176, 141, 63, 0)) no-repeat left bottom / 100% 1.5px;
}

/* Home: rounded cards with a gold hairline, the painting inside. */
.way { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 14px 34px rgba(0, 0, 0, .5); }
.way__seal { border-radius: 10px; }
.game-card { border-radius: 16px; }
.game-card__badge { border-radius: 999px; padding-inline: 12px; }
.game-card__delete {
  border-radius: 999px; border: 1px solid #050403; color: #e9d9b4;
  background: linear-gradient(180deg, var(--lacquer-top), var(--lacquer-bottom));
  box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 2px 6px rgba(0, 0, 0, .45);
}
.circle-card { border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 5px rgba(255, 250, 238, .25), inset 0 0 0 6px rgba(176, 141, 63, .35), 0 14px 34px rgba(0, 0, 0, .45); }
.circle-card__seal { border-radius: 14px; }
.table-tile { border-radius: 16px; }
.table-card { border-radius: 24px; }
.seat { border-radius: 14px; }
.seals__row { border-radius: 16px; background: linear-gradient(180deg, rgba(30, 24, 20, .8), rgba(14, 11, 9, .85)); border-color: var(--leaf-faint); }
.user-row { border-radius: 14px; }
.notice { border-radius: 14px; }

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* Games, Friends, Challenge: one lacquer switch with the chosen one lit. */
  .home-tabs {
    gap: 4px; padding: 4px; border-bottom: 0; border-radius: 999px; border: 1px solid #050403;
    background: linear-gradient(180deg, rgba(20, 16, 13, .92), rgba(10, 8, 6, .92));
    box-shadow: inset 0 0 0 1px var(--leaf-faint), 0 3px 10px rgba(0, 0, 0, .45);
  }
  .home-tab { min-height: 36px; padding: 4px; border: 0; border-radius: 999px; color: #c9b893; }
  .home-tab.is-on {
    color: #fff6e4;
    background:
      linear-gradient(180deg, rgba(255, 236, 200, .14), rgba(255, 236, 200, 0) 50%),
      linear-gradient(180deg, #3b302a, #1d1714);
    box-shadow: inset 0 0 0 1px var(--leaf-soft), 0 1px 4px rgba(0, 0, 0, .5);
  }
  .home-tab__count { box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .5); }
  .way, .way--tutorial, .way.way--classic { border-radius: 16px; }
  .game-card { border-radius: 14px; }
  .lobby #alerts, .lobby #challenge { border-radius: 16px; }
}

/* ------------------------------------------------------------ the Inspection on the scroll */
body:has(#view-game:not([hidden])) .modal--inspection .inspection-art {
  border-radius: 12px; background-size: cover; background-position: center 30%;
  border: 0; box-shadow: 0 0 0 1px #1a120b, 0 0 0 2.5px rgba(176, 141, 63, .7);
}
body:has(#view-game:not([hidden])) .modal--inspection p.muted { color: #5b4f3e; line-height: 1.4; }
body:has(#view-game:not([hidden])) .modal--inspection .modal__actions .btn { white-space: nowrap; font-size: 15px; letter-spacing: .04em; }
/* Short phones: drop the picture and keep every choice on screen. */
@media (max-height: 700px) {
  body:has(#view-game:not([hidden])) .modal.modal--inspection { max-height: calc(100svh - var(--top-live-h, 60px) - 10px); gap: 5px; padding: 10px 12px 12px; }
  body:has(#view-game:not([hidden])) .modal--inspection .inspection-art { display: none; }
  body:has(#view-game:not([hidden])) .modal--inspection h3 { font-size: 16px; padding-bottom: 5px; }
  body:has(#view-game:not([hidden])) .modal--inspection p.muted { font-size: 12.5px; line-height: 1.3; }
  body:has(#view-game:not([hidden])) .modal--inspection .modal__actions .btn { min-height: 42px; font-size: 13.5px; }
}

/* ------------------------------------------------------------ never scroll a pop-up */
/* A pop-up may use the whole screen under the top bar (the hand under it is
   shown on the card tiles anyway), so its buttons are always in view. */
body:has(#view-game:not([hidden])) .modal-back:has(:is(.modal--offer, .modal--scroll)):not(.modal-back--sheet) { bottom: 0; }
body:has(#view-game:not([hidden])) .modal.modal--offer,
body:has(#view-game:not([hidden])) .modal.modal--scroll {
  max-height: calc(100svh - var(--top-live-h, 60px) - 14px - env(safe-area-inset-bottom, 0px));
}
/* Card tiles stay small on wide phones: a landscape painting, not a square. */
:is(.modal--offer, .modal--scroll) .picker__cell > img,
:is(.modal--offer, .modal--scroll) .picker__art {
  width: min(100%, 58px); aspect-ratio: 4 / 3; margin-inline: auto;
}
body:has(#view-game:not([hidden])) .modal-back:has(:is(.modal--offer, .modal--scroll)):not(.modal-back--sheet) { place-items: center; }
@media (max-height: 720px) {
  body:has(#view-game:not([hidden])) :is(.modal--offer, .modal--scroll) { padding: 10px 12px 12px; gap: 4px; }
  :is(.modal--offer, .modal--scroll) h3 { font-size: 16px; padding-bottom: 5px; }
  :is(.modal--offer, .modal--scroll) .trade-label { margin: 3px 0 0; font-size: 11.5px; }
  :is(.modal--offer, .modal--scroll) .trade-sum { margin-top: 4px; padding: 5px 10px; font-size: 13px; }
  :is(.modal--offer, .modal--scroll) .ask-chip { min-height: 32px; }
  .modal--offer .ask-row { gap: 3px; }
  .modal--offer .ask-chip { min-height: 30px; padding-top: 1px; padding-bottom: 1px; }
  .modal--offer .ask-chip .avatar { width: 24px; height: 24px; }
  .seen-hand__card img { width: 19px; height: 25px; }
  :is(.modal--offer, .modal--scroll) .modal__actions { margin-top: 6px; }
  :is(.modal--offer, .modal--scroll) .modal__actions .btn { min-height: 40px; }
}

/* ------------------------------------------------------------ delete my account */
/* Quiet at the foot of Your account, so nobody taps it by chance. */
.modal--account .account-delete {
  justify-self: start; margin-top: 2px; padding: 4px 0; border: 0; background: none;
  font: inherit; font-size: 13px; color: #a33a24; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* The last step is a washi sheet like a trade offer, wherever it opens. */
.modal--farewell {
  border-radius: 22px; padding: 16px; color: #3a2410; max-width: min(100vw - 24px, 25rem);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 242, .9), transparent 70%),
    linear-gradient(180deg, #f6eedb, #e8d9b8);
  box-shadow: 0 0 0 1px rgba(60, 40, 15, .35), inset 0 0 0 5px rgba(255, 250, 238, .55),
    inset 0 0 0 6px rgba(176, 141, 63, .55), 0 26px 60px rgba(0, 0, 0, .65);
}
.modal--farewell h3 { color: #3a2410; }
.modal--farewell p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: #4a3520; text-align: center; }
.modal--farewell .farewell-seal {
  width: 52px; height: 52px; margin: 12px auto 4px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-brush); font-size: 32px; line-height: 1; color: #fff1e6;
  background: radial-gradient(circle at 35% 30%, #dc5b3c, #8e2116); box-shadow: inset 0 0 0 3px rgba(255, 220, 190, .35);
}

/* ------------------------------------------------------------ learn by playing */
/* Ine's lesson: a slim strip along the top of the map, like her waiting tip.
   The rule in a sentence or two, then what to tap next in vermilion, and
   "Got it" at the side. Taps on the strip fall through to the map, and the
   Act tag and Persecution track step down below it so nothing is covered. */
#view-game .board-wrap > .guide.is-lesson {
  top: 6px; bottom: auto; transform: translateX(-50%); pointer-events: none;
  width: min(440px, calc(100% - 16px)); max-height: none; overflow: visible;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
  align-items: center; padding: 8px 8px 9px 10px;
}
#view-game .board-wrap > .guide.is-lesson[hidden] { display: none; }
/* A window of its own (an Inspection, a trade) comes first; the lesson waits behind it. */
body.has-modal #view-game .board-wrap > .guide.is-lesson { visibility: hidden; }
#view-game .board-wrap > .guide.is-lesson button { pointer-events: auto; }
#view-game .board-wrap > .guide.is-lesson .guide__head { display: contents; }
#view-game .board-wrap > .guide.is-lesson .guide__seal { grid-row: 1; grid-column: 1; width: 34px; height: 42px; }
#view-game .board-wrap > .guide.is-lesson .guide__who { grid-row: 1; grid-column: 2; }
#view-game .board-wrap > .guide.is-lesson .guide__who small {
  display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8e2116;
}
#view-game .board-wrap > .guide.is-lesson .guide__title { font-size: 16px; }
#view-game .board-wrap > .guide.is-lesson .guide__hide,
#view-game .board-wrap > .guide.is-lesson .guide__why { display: none; }
#view-game .board-wrap > .guide.is-lesson .guide__ok {
  grid-row: 1; grid-column: 3; width: auto; min-width: 64px; min-height: 40px; margin: 0; padding: 0 12px; font-size: 15px;
}
#view-game .board-wrap > .guide.is-lesson .guide__text { grid-row: 2; grid-column: 1 / -1; margin: 2px 2px 0; font-size: 14px; line-height: 1.36; }
.guide__next { margin: 0; font: 600 13px/1.32 var(--font-body); color: var(--shu-deep, #8e2116); }
.guide__next[hidden] { display: none; }
#view-game .board-wrap > .guide.is-lesson .guide__next { grid-row: 3; grid-column: 1 / -1; margin: 3px 2px 0; }
#view-game .board-wrap > .guide.is-lesson.is-new { animation: guide-rise .4s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { #view-game .board-wrap > .guide.is-lesson.is-new { animation: none; } }
html body #view-game .board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-corner { display: flex; top: calc(var(--lesson-h, 0px) + 14px); bottom: auto; }
/* Phones: under Ine's lesson the Act tag and the Persecution track stand in
   one slim row, and on a tall phone the island moves down below them both,
   so neither the lesson nor the tags cover a land. */
@media (max-width: 600px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  html body #view-game .board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-corner {
    left: 8px; right: 8px; top: calc(var(--lesson-h, 0px) + 12px);
    flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
  }
  #view-game .board-wrap:has(> .guide.is-lesson:not([hidden])) .act-event { padding: 3px 10px 3px 3px; gap: 6px; }
  .board-wrap:has(> .guide.is-lesson:not([hidden])) .act-event__seal { width: 24px; height: 24px; font-size: 14px; }
  .board-wrap:has(> .guide.is-lesson:not([hidden])) .act-event__words b { font-size: 12.5px; letter-spacing: .04em; }
  .board-wrap:has(> .guide.is-lesson:not([hidden])) .act-event__words small { font-size: 11px; }
  .board-wrap:has(> .guide.is-lesson:not([hidden])) .persecution { padding: 4px 9px; }
}
@media (max-width: 600px) and (orientation: portrait) and (min-height: 740px) {
  .board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-host { top: calc(var(--lesson-h, 0px) + var(--corner-h, 0px) + 18px); }
}
/* A phone on its side with a wide map: the lesson keeps to the left, so the
   tags stay up in the top right corner beside it. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 780px) {
  html body #view-game .board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-corner {
    left: auto; top: 12px; flex-direction: column; align-items: flex-end;
  }
}
/* The shortest phones upright have no room for both: the tags wait for
   "Got it", unless the lesson is about one of them. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 600px) {
  html body #view-game .board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-corner:not(:has(.guide-pulse)) { display: none; }
}

@media (max-width: 620px) {
  #view-game .board-wrap > .guide.is-lesson .guide__text { font-size: 13.5px; line-height: 1.33; }
}

/* ------------------------------------------------------------ the menu
   Three lines open the menu everywhere: Settings, Your account, Rules and
   the rest. Nothing sits loose in the top bar any more. */
.topbar__right #btn-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none;
  border-radius: 50%; color: var(--leaf, #d6a84c);
}
.topbar__right #btn-more svg { width: 22px; height: 22px; }
.topbar__right #btn-more[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--leaf, #d6a84c), 0 3px 10px rgba(0, 0, 0, .5); }
.topbar-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  flex-direction: column; align-items: stretch; gap: 4px;
  min-width: 11.5rem; padding: 8px;
  border-radius: 16px; border: 1px solid #050403;
  background: linear-gradient(180deg, #221b17, #100c0a);
  box-shadow: inset 0 0 0 1px var(--leaf-faint, rgba(214, 168, 76, .3)), 0 12px 30px rgba(0, 0, 0, .6);
  transform-origin: top right;
}
.topbar-menu.is-open { display: flex; animation: menu-open .16s cubic-bezier(.2, .8, .2, 1); }
.topbar-menu .btn {
  width: 100%; justify-content: flex-start; min-height: 44px;
  border-radius: 12px; font-size: 15px; letter-spacing: .02em;
}
.topbar-menu .btn[hidden] { display: none; }
.topbar-menu #btn-settings { order: -2; }
.topbar-menu #btn-account { order: -1; }
@keyframes menu-open { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .topbar-menu.is-open { animation: none; } }
@media (max-width: 360px) {
  html body .topbar__right #btn-more { width: 34px; height: 34px; min-height: 34px; }
}

/* ------------------------------------------------------------ Settings */
.modal--scroll .setting__head {
  margin: 10px 0 4px; font: 700 12px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--shu-deep, #8e2116);
}
.modal--scroll .setting__head:first-of-type { margin-top: 2px; }
.modal--scroll .setting-alerts p { margin: 0 0 8px; }
.modal--scroll .setting-alerts .row { display: flex; flex-wrap: wrap; gap: 8px; }
.settings { display: grid; gap: 6px; }
.setting {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(107, 74, 34, .22);
}
.setting__text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.setting__text b { font-size: 15.5px; }
.setting__text span { font-size: 12.5px; opacity: .72; }
.setting input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.setting__switch {
  position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px;
  background: linear-gradient(180deg, #4a3d33, #2a211b);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(107, 74, 34, .4);
  transition: background .2s ease;
}
.setting__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #e2c98e 60%, #b58a3e);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.setting input:checked + .setting__switch { background: linear-gradient(180deg, #d4472f, #9c2416); }
.setting input:checked + .setting__switch::after { transform: translateX(20px); }
.setting input:focus-visible + .setting__switch { outline: 2px solid var(--leaf, #d6a84c); outline-offset: 2px; }
.setting.is-off { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .setting__switch, .setting__switch::after { transition: none; } }

/* The one-time alerts window: the bell seal over the words. */
.modal--scroll .alerts-seal {
  width: 52px; height: 52px; margin: 2px auto 6px; display: grid; place-items: center; border-radius: 50%;
  font: 400 28px/1 var(--font-kanji, serif); color: #fff6e0;
  background: radial-gradient(circle at 35% 30%, #4d63a8, #23336b);
  box-shadow: 0 0 0 2px #c9a35a, 0 4px 12px rgba(0, 0, 0, .35);
}
.modal--scroll .alerts-later { opacity: .72; margin-top: 4px; }
@media (max-height: 620px) {
  .setting__text span { display: none; }
  .settings { gap: 4px; }
  .setting { padding: 5px 12px; }
  .modal--scroll .setting__head { margin: 4px 0 3px; }
  .modal--scroll .setting-alerts p { margin-bottom: 5px; }
}
.setting__link {
  justify-self: start; margin: 1px 0 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.3 var(--font-body); color: var(--shu-deep, #8e2116);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------ see it on the map
   A decision about one site (an Inspection) can step aside: the window fades,
   the site comes to the middle of the map with a ring on it, and one button
   brings the decision back. */
.map-peek {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center; align-self: center;
  margin: -2px auto 6px; padding: 7px 14px 7px 10px; min-height: 38px;
  border-radius: 999px; border: 1px solid rgba(142, 33, 22, .45); cursor: pointer;
  background: linear-gradient(180deg, #fffaf0, #f1e4c6);
  box-shadow: 0 2px 6px rgba(60, 30, 10, .18), inset 0 1px 0 #fff;
  font: 700 14px/1 var(--font-body); letter-spacing: .02em; color: #8e2116;
}
.modal--scroll .map-peek { display: flex; width: max-content; }
.map-peek__pin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #d4472f 0 32%, transparent 34%);
  box-shadow: inset 0 0 0 2px #d4472f;
}
.modal-back.is-peeking {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.map-peek__back {
  position: fixed; left: 50%; z-index: 90; translate: -50% 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 2px; min-width: 220px; max-width: calc(100vw - 32px);
  padding: 10px 22px 11px; border-radius: 18px; border: 1px solid #5a120a; cursor: pointer;
  background: linear-gradient(180deg, #d4472f, #9c2416); color: #fff6e0;
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .5), inset 0 0 0 1px rgba(214, 168, 76, .55), 0 10px 26px rgba(0, 0, 0, .55);
  animation: peek-rise .25s cubic-bezier(.2, .8, .2, 1);
}
.map-peek__back .map-peek__name { font: 600 12.5px/1.2 var(--font-body); opacity: .85; letter-spacing: .04em; }
.map-peek__back b { font: 700 17px/1.2 var(--font-title, serif); letter-spacing: .04em; }
@keyframes peek-rise { from { opacity: 0; transform: translateY(10px); } }
.site-marked { pointer-events: none; }
.site-marked__ring { fill: none; stroke: #d4472f; stroke-width: .075; filter: drop-shadow(0 0 .06px #ffd98a); }
.site-marked__wave {
  fill: none; stroke: #ffd98a; stroke-width: .05; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: site-spotlight .9s ease-out 3 .2s;
}
@media (prefers-reduced-motion: reduce) {
  .site-marked__wave { animation: none; }
  .map-peek__back { animation: none; }
  .modal-back.is-peeking { transition: none; }
}

/* ------------------------------------------------------------ a phone on its side
   Short and wide: the island takes the left and the whole height; on the
   right, one lacquer column holds the players, what to do now, your hand and
   your buttons. The top bar slims to one line. Nothing scrolls. */
@media (orientation: landscape) and (max-height: 500px) {
  body:has(#view-game:not([hidden])) .topbar {
    min-height: 0; max-height: 46px; padding: 3px 10px calc(3px) max(10px, env(safe-area-inset-left));
  }
  body:has(#view-game:not([hidden])) .topbar__home img { width: 34px; height: 34px; }
  body:has(#view-game:not([hidden])) .topbar__title h1 { font-size: 16px; }
  body:has(#view-game:not([hidden])) .topbar__title p { display: none; }
  body:has(#view-game:not([hidden])) .topbar__right .icon-toggle,
  body:has(#view-game:not([hidden])) .topbar__right #btn-more { width: 36px; height: 36px; min-height: 36px; }
  body:has(#view-game:not([hidden])) .topbar__right #btn-mobile-chat { height: 36px; min-height: 36px; }

  #view-game.game {
    display: grid; overflow: hidden; flex: 1; min-height: 0;
    --side-col: clamp(290px, 44vw, 410px);
    grid-template-columns: minmax(0, 1fr) var(--side-col);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "board players" "board dock";
    padding-right: env(safe-area-inset-right);
  }
  #view-game .board-wrap { grid-area: board; order: 0; height: auto; min-height: 0; }
  #view-game .mobile-players {
    grid-area: players; order: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 5px 6px; overflow: hidden;
  }
  #view-game .mobile-player { max-width: none; min-width: 0; padding: 2px 8px 2px 3px; }
  #view-game .mobile-player .avatar { width: 24px; height: 24px; }
  #view-game .dock {
    grid-area: dock; order: 0; display: flex; flex-direction: column; justify-content: space-between;
    height: auto; max-height: none; min-height: 0; overflow: hidden; gap: 6px; padding: 6px 8px 8px;
  }
  #view-game .dock > .banner { flex: none; }
  #view-game .dock__hand { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  #view-game .hand { flex-wrap: nowrap; justify-content: center; }
  #view-game .my-sites { max-height: 52px; overflow: hidden; }
  #view-game .dock__actions { flex: none; gap: 6px; }
  #view-game .dock__actions .btn { min-height: 42px; padding: 6px 6px; font-size: 14px; }
  #view-game .dock__actions .react-btn { width: 44px; height: 42px; }
  /* Trays and trade offers open over the bottom of the map, beside your hand,
     where there is room for every choice. */
  #view-game .dock__above {
    position: fixed; top: auto; right: auto; left: calc(8px + env(safe-area-inset-left)); bottom: 8px;
    width: min(420px, calc(100vw - var(--side-col) - 24px - env(safe-area-inset-left))); max-height: calc(100svh - 58px);
    justify-content: flex-end; align-items: stretch;
  }
  #view-game .dock__above > * { width: 100%; max-height: calc(100svh - 58px); }
  #view-game .dock__above > #trade-slot { max-height: calc(100svh - 58px); }
  #view-game .tray { padding: 8px 10px 10px; }
  #view-game .tray .tray-item { min-height: 42px; padding-top: 5px; padding-bottom: 5px; }
  #view-game .tray__items { gap: 5px; }
  #view-game .board-wrap > .dice-tray { top: auto; padding: 5px 9px; gap: 3px; border-radius: 14px; }
  html #view-game .board-wrap > .dice-tray img { width: 34px; height: 34px; }
  #view-game .board-wrap > .dice-tray .dice-tray__hint { font-size: 10.5px; }
  #view-game .board-tools { grid-template-columns: repeat(6, 21px); border-radius: 14px; }
  #view-game .board-tools .icon-btn { height: 32px; font-size: 12px; }
  #view-game .hand { gap: 6px; }
  #view-game .rescard { width: calc((var(--side-col) - 16px - 4 * 6px) / 5); max-width: 64px; }
  #view-game .my-sites { gap: 3px; }
  #view-game .my-sites > * { font-size: 12px; }
  /* Ine's lesson card sits small in the map's top corner. */
  #view-game .board-wrap > .guide.is-lesson { width: min(330px, calc(100% - 16px)); left: 8px; right: auto; transform: none; padding: 6px 8px 7px 8px; }
  #view-game .board-wrap > .guide.is-lesson .guide__title { font-size: 14px; }
  #view-game .board-wrap > .guide.is-lesson .guide__text { font-size: 12.5px; line-height: 1.3; }
  #view-game .board-wrap > .guide.is-lesson .guide__ok { min-height: 34px; font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 400px) {
  #view-game .my-sites { display: none; }
  /* The smallest phones on their side: each tray choice on one line (why
     one can't be chosen stays in its label for screen readers). */
  #view-game .tray .btn-reason { display: none; }
  #view-game .tray .tray-item { min-height: 38px; }
  #view-game .tray__head { margin-bottom: 4px; }
  #view-game .board-wrap > .guide.is-lesson { width: min(270px, calc(100% - 16px)); }
  #view-game .board-wrap > .guide.is-lesson .guide__text { font-size: 11.5px; }
  #view-game .board-wrap > .guide.is-lesson .guide__seal { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  #view-game.game { --side-col: clamp(250px, 44vw, 410px); }
  #view-game .dock__actions .action-toggle::before { display: none; }
  #view-game .dock__actions .btn { font-size: 13px; letter-spacing: .03em; }
}

/* The words and the choice of a pop-up are grouped in the page, but upright
   the groups are invisible and the pop-up lays out as before. */
.modal__words, .modal__choice { display: contents; }

/* Pop-ups on a phone on its side: one wide scroll in two columns. The words
   (title, explanation) on the left; what you choose and the buttons on the
   right. Still no scrolling. Every screen, Home included. */
@media (orientation: landscape) and (max-height: 500px) {
  html body:not(#kk-any):not([data-kk-any]) .modal-back:not(.modal-back--sheet) {
    top: 0; bottom: 0; padding: 8px; place-items: center;
  }
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--offer,
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--scroll {
    width: min(calc(100vw - 16px), 780px); max-width: none;
    max-height: calc(100svh - 16px); overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: 20px; row-gap: 6px; padding: 12px 16px 14px;
  }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > h3 { grid-column: 1 / -1; font-size: 17px; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > :is(.modal__words, .modal__choice) {
    display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0;
  }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > .modal__words { justify-content: center; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > .modal__choice { justify-content: center; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > .modal__words:not(:has(> :not([hidden]))) { display: none; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll):is(.modal--one, :has(> .modal__words:empty)) { grid-template-columns: minmax(0, 1fr); width: min(calc(100vw - 16px), 480px); }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll):has(> .modal__words > :only-child:not(.map-peek)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); width: min(calc(100vw - 16px), 520px); }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) > .modal__words:has(> :only-child) { text-align: center; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .modal__actions { margin-top: 4px; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .inspection-art { display: none; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) p.muted { font-size: 12.5px; line-height: 1.35; margin: 0; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .map-peek { margin: 0 auto; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .picker { gap: 5px; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .picker__cell { flex: 1 1 0; min-width: 0; max-width: 92px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 640px) {
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .stepper button { flex-basis: 20px; font-size: 12px; }
  html body:not(#kk-any):not([data-kk-any]) :is(.modal--offer, .modal--scroll) .stepper span { font-size: 14px; }
}


/* Sideways, a pop-up that is all words (the rules, a site's story) stays one
   column: the words take the room and Close sits under them. */
@media (orientation: landscape) and (max-height: 500px) {
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--scroll:has(> .modal__choice > .modal__actions:only-child) {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; width: min(calc(100vw - 16px), 620px);
  }
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--scroll:has(> .modal__choice > .modal__actions:only-child) > .modal__words {
    justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain;
  }
  /* Pop-ups with their own layout (your account, keep your account, invites):
     the fields flow into two columns, the title and buttons span both. */
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer):not(.modal--account.is-picking):not(.seals-modal):not(.pp-modal) {
    display: block; columns: 2; column-gap: 24px; column-fill: balance;
    width: min(calc(100vw - 16px), 760px); max-width: none; max-height: calc(100svh - 16px); overflow-y: auto;
    padding: 12px 18px 14px;
  }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer):not(.modal--account.is-picking):not(.seals-modal):not(.pp-modal) > * { break-inside: avoid; margin: 0 0 8px; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer):not(.modal--account.is-picking):not(.seals-modal):not(.pp-modal) > :is(h3, .modal__actions) { column-span: all; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer):not(.modal--account.is-picking):not(.seals-modal):not(.pp-modal) > .modal__actions { margin: 4px 0 0; }
}
/* Home on a phone on its side: the ways to play on the left, the tabs and
   the chosen list on the right. One screen, no page scroll. */
@media (orientation: landscape) and (max-height: 500px) {
  .lobby { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .lobby .lobby__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 14px; row-gap: 0; max-width: 1100px; margin: 0 auto;
  }
  .lobby .ways { grid-column: 1; grid-row: 1 / -1; align-self: stretch; grid-auto-rows: minmax(0, 1fr); align-content: stretch; min-height: 0; }
  .lobby .home-tabs { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
  .lobby #home-games, .lobby #friends, .lobby #home-more { grid-column: 2; grid-row: 2; }
  .lobby .keep-card { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .lobby .friends__requests { grid-column: 2; grid-row: 4; margin-top: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .lobby .lobby__inner { column-gap: 10px; }
  .lobby .way__body h3 { font-size: 15px; }
  .lobby .way__body .btn, .lobby .way__actions .btn { padding: 6px 8px; font-size: 13px; letter-spacing: .02em; min-height: 36px; white-space: nowrap; }
  .lobby .way__actions { gap: 6px; }
  .lobby .way__seal { display: none; }
  .lobby .way, .lobby .way--tutorial, .lobby .way--bots { padding-top: 10px; }
  .lobby .home-tab { font-size: 13px; letter-spacing: .02em; white-space: nowrap; padding: 4px 2px; }
  .lobby .home-tab__count { min-width: 17px; height: 17px; font-size: 11px; margin-left: 2px; }
}

/* The menu and the chat on a phone on its side. */
@media (orientation: landscape) and (max-height: 500px) {
  html body .topbar-menu.is-open {
    display: grid; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: 4px;
    max-height: calc(100svh - 64px); overflow: hidden;
  }
  html body .topbar-menu .btn { min-height: 40px; font-size: 14px; padding-top: 4px; padding-bottom: 4px; }
  html body .side {
    display: flex; flex-direction: column; width: min(26rem, 60vw);
    padding-right: env(safe-area-inset-right);
    background: linear-gradient(180deg, #0c1220, #0f1526), var(--pattern-asanoha);
  }
  html body .side .side__panel { flex: 1 1 auto; height: auto; min-height: 0; }
  html body .side .mobile-chat-close { padding: 9px 13px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 640px) {
  html body #view-game .dock__actions .action-toggle__chev { display: none; }
}

/* Act and Persecution cards always cover the whole screen. A held card is a
   dialog, and the phone rule that keeps dialogs 16px narrower than the screen
   must not shrink it. On the Home Screen app the layer also reaches the very
   bottom, and anything left below it is the card's own night colour. */
.fx-act[role="dialog"], .fx-act { max-width: none; max-height: none; width: auto; }
@media (display-mode: standalone) {
  .fx-layer:has(.fx-act) { bottom: auto; height: max(100%, 100lvh); }
}
html:has(.fx-act:not(.is-leaving)), html:has(.fx-act:not(.is-leaving)) body { background: #02040a; }
/* The painting behind a held card sits a little past the edges so it can
   drift; fixed, it never makes the card itself scroll. */
.fx-act.fx-act--hold::before { position: fixed; }

/* Act and Persecution cards on a phone on its side: the season's kanji and
   the Act on the left, Grandmother Ine, the news and Continue on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .fx-act--hold .fx-act__inner {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
    width: min(100%, 900px); box-sizing: border-box;
    padding: 10px max(18px, env(safe-area-inset-right)) 10px calc(34% + 10px);
  }
  .fx-act--hold .fx-act__inner > * { margin: 0; max-width: none; width: 100%; }
  .fx-act--hold .fx-act__inner > .fx-act__continue { width: auto; margin-top: 2px; min-height: 44px; }
  .fx-act--hold .fx-act__inner > .fx-act__season {
    position: absolute; left: max(10px, env(safe-area-inset-left)); width: 32%; top: auto; bottom: calc(50% + 4px);
    text-align: center;
  }
  .fx-act--hold .fx-act__inner > .fx-act__title {
    position: absolute; left: max(10px, env(safe-area-inset-left)); width: 32%; top: calc(50% + 8px);
    letter-spacing: .2em; text-indent: .2em; font-size: 17px; text-align: center;
  }
  .fx-act--hold .fx-act__season, .fx-act--hold.fx-act--ine .fx-act__season { font-size: clamp(60px, 21vh, 104px); }
  .fx-act--hold .fx-act__ine { padding: 9px 12px; gap: 10px; }
  .fx-act--hold .fx-act__portrait { width: 42px; height: 42px; }
  .fx-act--hold .fx-act__words p { font-size: 13px; line-height: 1.3; }
  .fx-act--hold .fx-act__event { padding: 7px 12px; gap: 2px; }
  .fx-act--hold .fx-act__event-title { font-size: 16px; }
  .fx-act--hold .fx-act__event-text, .fx-act--hold .fx-act__sweep, .fx-act--hold .fx-act__line { font-size: 13px; line-height: 1.28; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .fx-act--hold .fx-act__inner { gap: 5px; padding-top: 6px; padding-bottom: 6px; }
  .fx-act--hold .fx-act__portrait { display: none; }
  .fx-act--hold .fx-act__words p, .fx-act--hold .fx-act__event-text, .fx-act--hold .fx-act__sweep, .fx-act--hold .fx-act__line { font-size: 12px; line-height: 1.24; }
  .fx-act--hold .fx-act__sweep li { margin: 0; }
  .fx-act--hold .fx-act__inner > .fx-act__continue { min-height: 40px; font-size: 15px; }
}

/* The rules book on a phone on its side: a wide page, the words in two
   columns beside the picture, so each page still fits without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  .rules-scroll { padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
  .rules-scroll__sheet { width: min(900px, 100%); }
  .rules-scroll--book .rules-scroll__paper { padding: 12px 22px 8px; font-size: 13.5px; line-height: 1.42; }
  .rules-scroll--book .rules-scroll__head { grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 2px; }
  .rules-scroll--book .rules-scroll__kanji { font-size: 26px; }
  .rules-scroll--book .rules-scroll__head h2 { font-size: 18px; }
  .rules-scroll--book .rules-scroll__head p { font-size: 10.5px; }
  .rules-scroll--book .rules-scroll__part { columns: 2; column-gap: 24px; padding-top: 2px; }
  .rules-scroll--book .rules-scroll__part > * { break-inside: avoid; }
  .rules-scroll--book .rules-scroll__part > h3 { column-span: all; font-size: 16px; margin-bottom: 6px; }
  .rules-scroll--book .rules-scroll__part p { margin: 0 0 6px; }
  .rules-scroll--book .rules-scroll__pic { max-height: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 6px; }
  .rules-scroll--book .rules-seasons .rules-scroll__pic { max-height: none; }
  .rules-book__nav { padding: 6px 18px 8px; }
  .rules-book__nav .btn { min-height: 38px; }
  .rules-scroll__close { top: 8px; right: 10px; width: 34px; height: 34px; }
}

/* ------------------------------------------------------------ look audit, 10-22 */
/* Sign-in and the front door on a phone on its side: the name of the game on
   the left, what you type and tap on the right. One screen, no scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  .signin { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); min-height: 100svh; box-sizing: border-box; }
  .signin .signin__card {
    width: min(820px, 100%); max-width: none; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: repeat(4, auto);
    column-gap: 28px; row-gap: 6px; align-content: center; padding: 18px 24px 16px;
  }
  .signin .signin__card > * { grid-column: 2; margin: 0; }
  .signin .signin__card > .signin__kanji { grid-column: 1; grid-row: 1; font-size: 46px; align-self: end; }
  .signin .signin__card > .signin__invite { grid-column: 1; grid-row: 2; }
  .signin .signin__card > h2 { grid-column: 1; grid-row: 3; font-size: 19px; }
  .signin .signin__card > #signin-lede { grid-column: 1; grid-row: 4; align-self: start; font-size: 13px; }
  .signin .signin__card > .signin__play { grid-row: 1 / span 4; align-self: center; }
  .signin .signin__card > .signin__tabs { grid-row: 1; }
  .signin .signin__card > #signin-form, .signin .signin__card > #signup-form { grid-row: 2 / span 2; }
  .signin .signin__card > .signin__recovery { grid-row: 4; }
  .signin .signin__play .btn--big { padding: 10px 16px; font-size: 18px; }
  .signin .signin__form { gap: 5px; }
}

/* Your seals: six across on a phone on its side, Done always in view. */
@media (orientation: landscape) and (max-height: 500px) {
  html body:not(#kk-any):not([data-kk-any]) .modal.seals-modal { display: grid; columns: auto; width: min(calc(100vw - 16px), 820px); max-width: none; max-height: calc(100svh - 16px); gap: 8px; padding: 12px 18px; }
  html body:not(#kk-any):not([data-kk-any]) .modal.seals-modal > * { margin: 0; }
  .seals-modal .seals-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .seals-modal .seal-card { padding: 5px 4px; gap: 2px; }
  .seals-modal .seal-card span:last-child { font-size: 10px; }
  .seals-modal .seal-stamp { transform: scale(.85); }
}
/* Small phones upright: the seals fit without the window scrolling. */
@media (max-height: 640px) and (orientation: portrait) {
  .seals-modal .seals-grid { gap: 5px; }
  .seals-modal .seal-card { padding: 5px 3px; gap: 2px; }
  .seals-modal .seal-card strong { font-size: 12px; }
  .seals-modal .seal-card span:last-child { font-size: 10px; line-height: 1.2; }
  .seals-modal .seal-stamp { transform: scale(.8); margin: -3px 0; }
}

/* What happened: two turns side by side on a phone on its side. */
@media (orientation: landscape) and (max-height: 500px) {
  .story { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .story .story__paper { width: min(780px, 100%); max-width: none; gap: 6px; padding: 10px 14px 8px; }
  .story .story__turns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
  .story .story__paper h2 { font-size: 18px; }
  .story .story__lines { font-size: 12.5px; line-height: 1.3; }
  .story .story__nav .btn, .story .story__dice { min-height: 36px; }
  .story .dice-chart__well { height: min(30svh, 160px); }
}
.story__page { white-space: nowrap; }
@media (max-width: 360px) { .story__nav .btn { min-width: 0; flex: 1 1 0; } }

/* React: eight across on a phone on its side. */
@media (orientation: landscape) and (max-height: 500px) {
  .react-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .react-grid .react-cell { aspect-ratio: auto; min-height: 40px; }
}

/* Pass and play on a phone on its side: the seats side by side, two by two. */
@media (orientation: landscape) and (max-height: 500px) {
  html body:not(#kk-any):not([data-kk-any]) .modal.pp-modal { display: grid; columns: auto; gap: 8px; width: min(calc(100vw - 16px), 780px); max-width: none; max-height: calc(100svh - 16px); }
  html body:not(#kk-any):not([data-kk-any]) .modal.pp-modal > * { margin: 0; }
  .pp-modal .pp-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 8px; }
  .pp-modal .pp-seat__name { padding: 6px 10px; font-size: 15px; }
  .pp-modal .seg button { padding-top: 4px; padding-bottom: 4px; }
}
/* Very short screens on their side: forms and their buttons fit in one view. */
@media (orientation: landscape) and (max-height: 360px) {
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer) { padding: 10px 16px 10px; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer) > * { margin-bottom: 6px; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer) h3 { font-size: 17px; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer) input { padding-block: 6px; }
  html body:not(#kk-any):not([data-kk-any]) .modal:not(.modal--scroll):not(.modal--offer) .modal__actions .btn { min-height: 38px; }
  .pp-modal .pp-seats { row-gap: 5px; }
}

/* Small phones upright: the front door fits without the page moving. */
@media (max-height: 600px) and (orientation: portrait) {
  .signin { padding-top: 12px; padding-bottom: 12px; }
  .signin .signin__card { padding: 22px 20px 18px; }
  .signin .signin__kanji { font-size: 48px; }
}
@media (max-height: 640px) and (orientation: portrait) {
  .seals-modal .seal-stamp { display: none; }
  .seals-modal .seals-note { font-size: 12px; margin: 0; }
  .modal.modal--account { gap: 8px; padding: 14px 16px; }
  .modal--account .account-face .player-portrait { width: 44px; height: 44px; }
  .modal--account input { padding-block: 6px; }
  .modal--account .modal__actions .btn { min-height: 40px; }
}
/* Keep your account on its side: name, email and password side by side. */
@media (orientation: landscape) and (max-height: 500px) {
  .keep-modal .keep-form { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 4px; align-items: end; }
  .keep-modal .keep-form > :not(label):not(input) { grid-column: 1 / -1; grid-row: 3; }
  html body:not(#kk-any):not([data-kk-any]) .modal.keep-modal { columns: auto; }
}
/* Your account on a small phone: the three buttons share one row. */
@media (max-width: 360px) {
  .modal--account .modal__actions { flex-wrap: nowrap; }
  .modal--account .modal__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; letter-spacing: .02em; }
}

/* ------------------------------------------------------------ the Challenge tab on small screens
   The week's challenge and your seals fit the tab without scrolling: the
   seal sits beside the title, the goal runs under both, and the button and
   "A new one in 4 days" share a row. */
@media (max-width: 600px) and (max-height: 760px), (orientation: landscape) and (max-height: 500px) {
  .lobby #challenge { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 8px 12px 10px; align-items: center; }
  .lobby #challenge .circle-card__seal { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
  .lobby #challenge .circle-card__body { display: contents; }
  .lobby #challenge h3 { grid-column: 2; margin: 0; font-size: 15.5px; }
  .lobby #challenge :is(.challenge__goal, .challenge__board, .challenge__actions) { grid-column: 1 / -1; }
  .lobby #challenge .challenge__goal { font-size: 12.5px; line-height: 1.35; }
  .lobby #challenge .challenge__actions { flex-wrap: nowrap; gap: 10px; margin-top: 2px; }
  .lobby #challenge .challenge__actions .btn { min-height: 36px; padding: 5px 16px; flex: none; }
  .lobby #challenge #challenge-ends { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lobby #home-more { gap: 8px; }
  .lobby #home-more { gap: 6px; }
  /* "Everyone plays the same island this week" waits for a taller screen. */
  .lobby #challenge .challenge__same { display: none; }
  .lobby #challenge { padding-block: 7px 8px; gap: 3px 10px; }
  .lobby #seals .lobby__head { padding-bottom: 3px; margin-bottom: 4px; }
  .lobby #seals .lobby__head h2 { font-size: 14.5px; line-height: 1.2; margin: 0; gap: 8px; }
  .lobby #seals .lobby__head h2 .section-title__kanji { font-size: 17px; line-height: 1; }
  .lobby .seals__row { padding: 5px 8px; gap: 4px; }
  .lobby .seals__row .seal-stamp { max-width: 28px; font-size: 14px; border-radius: 6px; }
}

/* Your seals on a short phone on its side: three across, each seal beside
   its name and what earns it, so all nine and Done fit in one view. */
@media (orientation: landscape) and (max-height: 400px) {
  .seals-modal .seals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 6px; }
  .seals-modal .seal-card {
    grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left;
    column-gap: 8px; row-gap: 0; padding: 5px 8px;
  }
  .seals-modal .seal-card .seal-stamp { grid-row: 1 / span 2; width: 28px; height: 28px; font-size: 16px; transform: none; margin: 0; }
  .seals-modal .seal-card strong { font-size: 12.5px; line-height: 1.15; }
  .seals-modal .seal-card span:last-child { font-size: 10px; line-height: 1.2; }
  .seals-modal .seals-note { font-size: 11.5px; line-height: 1.3; margin: 0; }
  html body:not(#kk-any):not([data-kk-any]) .modal.seals-modal { gap: 6px; padding: 10px 16px; }
  html body:not(#kk-any):not([data-kk-any]) .modal.seals-modal h3 { font-size: 17px; }
  .seals-modal .modal__actions .btn { min-height: 36px; }
  /* The note and Done share the last row. */
  html body:not(#kk-any):not([data-kk-any]) .modal.seals-modal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .seals-modal > :is(h3, .seals-grid) { grid-column: 1 / -1; }
  .seals-modal > .seals-note { text-align: left; }
  .seals-modal > .modal__actions { margin: 0; }
}

/* Your account on a short phone on its side: smaller colour swatches and
   tighter rows, so Save stays in view. */
@media (orientation: landscape) and (max-height: 360px) {
  .modal--account .color-pick__swatch { width: 32px; height: 32px; }
  .modal--account .color-pick { gap: 8px; }
  .modal--account .account-face .avatar, .modal--account .account-face .player-portrait { width: 46px; height: 46px; }
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--account:not(.is-picking):not(#kk-acc) { padding-top: 8px; padding-bottom: 8px; }
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--account:not(.is-picking):not(#kk-acc) > * { margin-bottom: 6px; }
  /* Sign out, Cancel and Save sit under the right-hand column, not a row of their own. */
  html body:not(#kk-any):not([data-kk-any]) .modal.modal--account:not(.is-picking):not(#kk-acc) > .modal__actions { column-span: none; margin: 6px 0 0; }
}
/* Offer a trade on the smallest phones: the one-line deal stays one line,
   so Offer it stays in view. */
@media (max-width: 360px) and (max-height: 720px) {
  .modal--offer .trade-sum { padding: 4px 8px; font-size: 12px; letter-spacing: 0; line-height: 1.3; }
  .modal--offer .trade-label { margin-top: 1px; }
}