/* 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 0 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) {
  body:has(#view-game:not([hidden])) .topbar__right #btn-mobile-chat,
  body:has(#view-game:not([hidden])) .topbar__right #btn-more { 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) {
  #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) {
  /* 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. */
#view-game .react-btn {
  border-radius: 14px; font-size: 0; color: transparent; display: grid; place-items: center;
}
#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; }
/* 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"] span { text-decoration: line-through; text-decoration-color: rgba(74, 63, 49, .45); }
/* 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) {
  /* 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: 620px) {
  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; }
  :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; } }
.board-wrap:has(> .guide.is-lesson:not([hidden])) > .board-corner { display: flex; top: calc(var(--lesson-h, 0px) + 14px); bottom: auto; }
@media (max-width: 620px) {
  #view-game .board-wrap > .guide.is-lesson .guide__text { font-size: 13.5px; line-height: 1.33; }
}