:root {
  color-scheme: light;
  --ink: #2d2944;
  --paper: #fff8e7;
  --paper-deep: #f0dfbe;
  --red: #c93d2d;
  --red-dark: #8e241f;
  --blue: #2767a6;
  --blue-dark: #173e71;
  --green: #2d7d55;
  --gold: #e4a62b;
  --purple: #7c4aa2;
  --shadow: 0 18px 42px rgba(73, 48, 92, 0.2);
  font-family: "Hind Siliguri", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, #e7c6db 0%, #f4d9cf 30%, #d8eff0 62%, #b9dfe0 100%);
  color: var(--ink);
  transition: background 700ms ease;
}

body[data-time="dawn"] { background: linear-gradient(180deg, #e8c7df 0%, #f7d7c6 38%, #d9eff0 100%); }
body[data-time="day"] { background: linear-gradient(180deg, #a9d6e9 0%, #d9efe7 48%, #b5dfe0 100%); }
body[data-time="afternoon"] { background: linear-gradient(180deg, #f2c69b 0%, #f6ddbb 46%, #c2e4e2 100%); }
body[data-time="dusk"] { background: linear-gradient(180deg, #c796bf 0%, #f0bd9f 42%, #a4cfd1 100%); }
body[data-time="night"] { background: linear-gradient(180deg, #34385e 0%, #6e6b94 42%, #3d7181 100%); }
body[data-screen="home"] {
  --home-surface: rgba(255, 250, 235, .88);
  --home-banner: linear-gradient(115deg, #e5f2d8, #fff0c8);
  --home-border: rgba(73, 112, 82, .2);
  --home-muted: #6d7180;
  --home-accent: #477d55;
  background: linear-gradient(155deg, #c5e1cf 0%, #f2e3bf 53%, #d8e8d8 100%);
  transition: background 450ms ease, color 300ms ease;
}
body[data-screen="home"][data-home-theme="river"] {
  --home-surface: rgba(241, 252, 252, .9);
  --home-banner: linear-gradient(115deg, #d6f5f7, #d7eaff);
  --home-border: rgba(44, 115, 146, .22);
  --home-muted: #5b7180;
  --home-accent: #287998;
  background: linear-gradient(155deg, #a9d8e8 0%, #d6f0ec 52%, #bbd7ed 100%);
}
body[data-screen="home"][data-home-theme="mela"] {
  --home-surface: rgba(255, 247, 232, .91);
  --home-banner: linear-gradient(115deg, #ffe5c6, #ffd3cf);
  --home-border: rgba(171, 83, 54, .22);
  --home-muted: #806461;
  --home-accent: #ae5134;
  background: linear-gradient(150deg, #f2c6ae 0%, #f7dfab 48%, #eabfc9 100%);
}
body[data-screen="home"][data-home-theme="paddy"] {
  --home-surface: rgba(250, 251, 221, .9);
  --home-banner: linear-gradient(115deg, #fff0b4, #dcecae);
  --home-border: rgba(114, 126, 46, .24);
  --home-muted: #68704c;
  --home-accent: #788028;
  background: linear-gradient(155deg, #f1e2a4 0%, #dce8b3 48%, #b7d8a5 100%);
}
body[data-screen="home"][data-home-mode="night"] {
  --home-surface: rgba(32, 39, 66, .94);
  --home-banner: linear-gradient(115deg, #30385d, #494168);
  --home-border: rgba(207, 192, 237, .24);
  --home-muted: #c4bfd5;
  --home-accent: #e3c17b;
  --ink: #f7f0df;
  --purple: #ddbdff;
  background: radial-gradient(ellipse at 50% 0%, #414466 0%, #272b49 52%, #171c34 100%);
  color: #f7f0df;
}
body[data-screen="home"] .home-screen .environment-banner {
  border-color: var(--home-border);
  background: var(--home-banner);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(35, 48, 61, .09);
}
body[data-screen="home"] .home-screen .welcome-card,
body[data-screen="home"] .home-screen .panel-card,
body[data-screen="home"] .home-screen .online-panel,
body[data-screen="home"] .home-screen .history-panel,
body[data-screen="home"] .home-screen .mode-details,
body[data-screen="home"] .home-screen .home-appearance {
  border-color: var(--home-border);
  background: var(--home-surface);
  color: var(--ink);
}
body[data-screen="home"] .home-screen .environment-banner small,
body[data-screen="home"] .home-screen .welcome-card p:last-child,
body[data-screen="home"] .home-screen .integration-note,
body[data-screen="home"] .home-screen .mode-tile-copy small,
body[data-screen="home"] .home-screen .footer-note { color: var(--home-muted); }
body[data-screen="home"] .home-screen .time-label { color: var(--home-accent); }
body[data-screen="home"][data-home-mode="night"] .home-screen .setting-button,
body[data-screen="home"][data-home-mode="night"] .home-screen input,
body[data-screen="home"][data-home-mode="night"] .home-screen textarea,
body[data-screen="home"][data-home-mode="night"] .home-screen select {
  border-color: var(--home-border);
  background-color: #292f4e;
  color: #f7f0df;
}
body[data-screen="home"][data-home-mode="night"] .home-screen .setting-button[aria-pressed="true"] { background: #51446b; color: #ffe8a9; }
body[data-season="borsha"] .app-shell::before { opacity: .34; background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255,255,255,.28) 23px 24px, transparent 25px 55px); }
body[data-season="boishakh"] .app-shell::before { opacity: .36; background-image: radial-gradient(circle at 20% 20%, #e96a87 0 4px, transparent 5px), radial-gradient(circle at 73% 34%, #f1b840 0 4px, transparent 5px), radial-gradient(circle at 45% 72%, #d64d62 0 3px, transparent 4px); background-size: 110px 90px, 150px 120px, 130px 110px; }
body[data-season="hemanta"] .app-shell::before { opacity: .3; background-image: linear-gradient(165deg, transparent 57%, rgba(209, 158, 63, .5) 57.5%, transparent 58%); }
body[data-season="sheet"] .app-shell::before { opacity: .28; background-image: radial-gradient(ellipse at 20% 65%, rgba(255,255,255,.65) 0 18px, transparent 19px), radial-gradient(ellipse at 70% 34%, rgba(255,255,255,.55) 0 22px, transparent 23px); background-size: 160px 100px, 200px 130px; }
body[data-board-theme="classic"] .board-wrap { background: linear-gradient(145deg, #795032, #d5a36d); box-shadow: 0 18px 42px rgba(73, 27, 21, .3), inset 0 0 0 2px rgba(255, 235, 182, .45); }
body[data-board-theme="traditional"] .board-wrap { background: linear-gradient(145deg, #174f3c, #d4a544); box-shadow: 0 18px 42px rgba(35, 52, 30, .34), inset 0 0 0 2px rgba(255, 235, 182, .45); }
body[data-board-theme="actresses"] .board-wrap { background: linear-gradient(145deg, #68272f, #dba548); box-shadow: 0 18px 42px rgba(73, 27, 21, .3), inset 0 0 0 2px rgba(255, 235, 182, .45); }
body[data-board-theme="birds"] .board-wrap { background: linear-gradient(145deg, #176c46, #a92e36 58%, #d6a438); box-shadow: 0 18px 42px rgba(73, 27, 21, .3), inset 0 0 0 2px rgba(255, 235, 182, .45); }

button { font: inherit; }
[hidden] { display: none !important; }

button:focus-visible, input:focus-visible {
  outline: 3px solid #d28b2d;
  outline-offset: 3px;
}

.orientation-warning {
  display: none;
}

.home-screen, .game-screen { width: 100%; flex-direction: column; gap: 12px; }
.app-shell[data-screen="home"] { max-width: 580px; }
.home-screen { gap: 16px; padding-top: 4px; }
.home-screen { flex: 1; }
.home-topbar { padding: 4px 3px; }
.home-screen { display: flex; }
.home-page { display: flex; width: 100%; flex-direction: column; gap: 12px; }
.home-page[hidden] { display: none !important; }
.home-nav { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: auto; padding: 6px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 18px; background: rgba(255, 248, 231, .94); box-shadow: 0 8px 24px rgba(54, 41, 58, .17); backdrop-filter: blur(12px); }
.home-nav-item { display: grid; min-width: 0; min-height: 54px; place-content: center; justify-items: center; gap: 1px; padding: 4px 2px; border: 0; border-radius: 13px; background: transparent; color: #71637d; cursor: pointer; }
.home-nav-item > span { font-size: 1.2rem; line-height: 1.1; }
.home-nav-item small { overflow: hidden; max-width: 100%; color: inherit; font-size: .62rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-nav-item[aria-current="page"] { background: linear-gradient(145deg, #eadcf0, #fff5dc); color: #60367f; box-shadow: inset 0 0 0 1px rgba(124, 74, 162, .18); }
.home-profile-link { display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 9px 12px; border: 1px solid rgba(120, 76, 146, .16); border-radius: 18px; background: rgba(255, 248, 231, .82); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 7px 18px rgba(54, 41, 58, .08); }
.home-profile-avatar { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid rgba(124, 74, 162, .35); border-radius: 15px; background: linear-gradient(145deg, #e8d9b7, #d7e7c4); font-size: 1.5rem; }
.home-profile-copy strong, .home-profile-copy small { display: block; }
.home-profile-copy strong { font-size: .9rem; }
.home-profile-copy small { color: #71637d; font-size: .68rem; }
.home-profile-chevron { color: var(--purple); font-size: 1.5rem; text-align: center; }
.home-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-launch-card { display: grid; align-content: center; justify-items: center; gap: 5px; min-width: 0; min-height: 142px; padding: 14px 9px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 20px; background: rgba(255, 248, 231, .87); color: var(--ink); text-align: center; cursor: pointer; box-shadow: 0 8px 20px rgba(54, 41, 58, .1); transition: transform 150ms ease, box-shadow 150ms ease; }
.home-launch-card:active { transform: translateY(2px); }
.home-launch-card.primary { border-color: #b98fca; background: linear-gradient(145deg, #f1e5f4, #fff3d5); }
.home-launch-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: rgba(124, 74, 162, .12); font-size: 1.8rem; }
.home-launch-card strong { font-size: .86rem; line-height: 1.15; }
.home-launch-card small { color: #71637d; font-size: .63rem; line-height: 1.25; }
.page-heading { margin: 2px 3px 0; }
.friend-panel { padding: 16px; }
.friend-panel .friend-row { margin-top: 4px; }
.board-theme-card { padding: 14px; }
.board-theme-picker { display: grid; gap: 8px; color: var(--ink); font-size: .82rem; }
.game-screen { display: flex; min-height: calc(100svh - 16px); gap: 3px; }
.home-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #fff4d7; border-radius: 15px; background: linear-gradient(145deg, #e8d5a8, #a7c27a); font-size: 1.5rem; box-shadow: 0 5px 12px rgba(60, 39, 25, .18); }
.welcome-card { display: flex; align-items: center; gap: 16px; min-height: 98px; padding: 20px; border: 1px solid rgba(120, 76, 146, .12); border-radius: 24px; background: linear-gradient(120deg, rgba(255, 248, 231, .96), rgba(231, 242, 207, .88)); box-shadow: 0 12px 28px rgba(73, 48, 92, .12); }
.welcome-mark { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 17px; background: linear-gradient(145deg, #e4f2c5, #b4cf8d); font-size: 1.8rem; }
.welcome-card .eyebrow { margin-bottom: 3px; }
.welcome-card h2 { margin: 0; color: var(--ink); font-size: 1.4rem; line-height: 1.12; }
.welcome-card p:last-child { margin: 6px 0 0; color: #71637d; font-size: .8rem; }
.panel-card { padding: 16px; border: 1px solid rgba(120, 76, 146, .14); border-radius: 21px; background: rgba(255, 248, 231, .86); box-shadow: 0 8px 24px rgba(54, 41, 58, .075); }
.profile-panel { padding: 16px 17px 13px; }
.profile-panel .panel-heading { margin-bottom: 12px; }
.profile-panel .panel-heading strong { font-size: .92rem; }
.auth-options { margin-top: 12px; border-top: 1px solid rgba(120, 76, 146, .12); }
.auth-options > summary { padding: 10px 2px 0; color: #70627a; font-size: .72rem; }
.auth-options .integration-note { margin-bottom: 10px; }
.home-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 1px 3px -6px; }
.home-section-heading h2 { margin: 0; color: var(--ink); font-size: 1.08rem; }
.home-section-heading span { color: #71637d; font-size: .7rem; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.auth-button { min-height: 36px; padding: 5px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 10px; background: #fffdf7; color: var(--ink); font-size: .67rem; cursor: pointer; }
.guest-auth { border-color: #3f8b5d; background: #e5f2e6; color: #286442; font-weight: 700; }
.facebook-auth { background: #eaf0ff; color: #315a9c; }
.integration-note { margin: 7px 1px 0; color: #776d7f; font-size: .64rem; line-height: 1.35; }
.big-action { width: 100%; min-height: 44px; margin-top: 9px; border: 0; border-radius: 13px; cursor: pointer; font-size: .88rem; font-weight: 700; }
.big-action.primary { background: linear-gradient(145deg, #9d63c0, #673487); color: #fff8e7; box-shadow: 0 4px 0 #4d2767, 0 8px 16px rgba(77, 39, 103, .17); }
.big-action:active { transform: translateY(2px); }
.compact-details { padding: 0; overflow: hidden; }
.compact-details > summary { padding: 12px; color: var(--ink); cursor: pointer; font-size: .82rem; font-weight: 700; list-style-position: inside; }
.compact-details[open] > summary { border-bottom: 1px solid rgba(120, 76, 146, .12); }
.compact-details > summary span { float: right; color: #71637d; font-size: .65rem; font-weight: 500; }
.compact-details > :not(summary) { margin-inline: 11px; }
.compact-details > .avatar-tray, .compact-details > .settings-strip, .compact-details > .match-history { margin-block: 9px; }
.friend-row { display: flex; gap: 7px; margin-top: 9px; }
.friend-row input { flex: 1; min-width: 0; border: 1px solid rgba(120, 76, 146, .2); border-radius: 9px; background: #fffdf7; padding: 7px 9px; font: inherit; font-size: .74rem; }
.friend-row + .integration-note { margin-bottom: 10px; }
.home-screen .player-strip { margin-top: -3px; }
.game-topbar { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; }
.game-topbar .icon-button { width: 44px; height: 44px; }
.game-brand { display: grid; justify-items: center; gap: 2px; }
.game-brand strong { color: var(--ink); font-size: 1rem; }
.game-brand strong span { color: var(--purple); }
.game-brand small { color: var(--purple); font-size: .78rem; font-weight: 700; }
.game-brand .roll-countdown { padding: 2px 9px; border: 1px solid #bda57a; border-radius: 999px; background: #fff7e5; color: #70511e; font-size: .7rem; font-variant-numeric: tabular-nums; }
.game-brand .roll-countdown[hidden] { display: block !important; min-height: 1.35em; visibility: hidden; }
.game-brand .roll-countdown.roll-window-urgent { border-color: #c24a34; background: #fff0e8; color: #a32f20; animation: timerPulse 700ms ease-in-out infinite alternate; }
@keyframes timerPulse { to { transform: scale(1.06); } }
.game-message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.game-control-dock { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(92px, .9fr); gap: 10px; align-items: stretch; padding: 0 0 max(8px, env(safe-area-inset-bottom)); background: transparent; box-shadow: none; position: sticky; bottom: 4px; z-index: 2; }
.game-control-dock .dice-readout { display: flex; min-width: 0; min-height: 70px; padding: 6px 8px; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border: 2px solid #a9783e; border-radius: 18px; background: linear-gradient(145deg, #fff9e9, #f3dfb5); box-shadow: 0 4px 0 #79512d, 0 7px 16px #40251922; text-align: center; }
.game-control-dock .dice-readout strong { display: grid; place-items: center; min-width: 43px; min-height: 42px; padding: 3px 12px; border-radius: 14px; color: #fff8e7; background: #a83e29; font-size: 1.9rem; line-height: 1; box-shadow: inset 0 1px 2px #ffffff66, 0 2px 5px #63351f55; }
.game-control-dock .dice-tip-panel { display: flex; min-width: 0; min-height: 70px; padding: 6px 8px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 2px solid #a9783e; border-radius: 18px; background: linear-gradient(145deg, #fff9e9, #f3dfb5); box-shadow: 0 4px 0 #79512d, 0 7px 16px #40251922; text-align: center; }
.game-control-dock .dice-tip-label { color: #79512d; font-size: .64rem; font-weight: 800; line-height: 1.1; }
.game-control-dock .dice-tip { display: block; max-width: 100%; color: #654b35; font-size: .72rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.game-control-dock .dice-readout[data-mode="rolling"] { border-color: #b48dc2; background: linear-gradient(145deg, #f8edff, #eadcf1); }
.game-control-dock .rule-hint { display: none; }
.game-control-dock .dice-button { width: 100%; min-width: 0; min-height: 70px; }
.app-shell[data-screen="game"] { width: 100%; max-width: none; min-height: 100svh; gap: 0; padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.app-shell[data-screen="game"] .game-screen { min-height: calc(100svh - 16px); gap: 3px; }
.app-shell[data-screen="game"] .game-topbar { width: min(100%, 1000px); align-self: center; }
.app-shell[data-screen="game"] .board-stage {
  width: min(1000px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 8px), calc(100svh - 206px));
  align-self: center;
  margin-block: auto;
  display: grid;
  grid-template-rows: 28px auto 28px;
  gap: 2px;
}
.app-shell[data-screen="game"] .board-wrap { width: 100%; max-width: none; align-self: center; margin: 0; padding: 0; }
.app-shell[data-screen="game"] .game-control-dock { width: min(100%, 900px); align-self: center; grid-template-columns: minmax(0, .75fr) minmax(24px, 1fr) minmax(0, .8fr); }
.app-shell[data-screen="game"] .dice-readout { grid-column: 2; }
.app-shell[data-screen="game"] .dice-tip-panel { grid-column: 3; }
body[data-screen="game"] { background: radial-gradient(ellipse at top, #fff4d9 0%, #dcc89f 52%, #b1a0ad 100%); }

.board-profile-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.board-player-badge { --seat-color: #76513d; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; min-width: 0; min-height: 30px; padding: 2px 9px 2px 3px; border: 1.5px solid var(--seat-color); border-radius: 999px; background: rgba(255, 249, 232, .96); box-shadow: 0 2px 5px rgba(49, 30, 19, .16); color: #392d2a; }
.board-player-badge.right-seat { justify-self: end; flex-direction: row-reverse; padding: 2px 3px 2px 9px; }
.board-player-badge.red { --seat-color: #c93d2d; }
.board-player-badge.green { --seat-color: #2d7d55; }
.board-player-badge.yellow { --seat-color: #d69a17; }
.board-player-badge.blue { --seat-color: #2767a6; }
.board-profile-avatar, .board-player-badge > img { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; overflow: hidden; border: 1px solid var(--seat-color); border-radius: 50%; background: #fff8e7; font-size: 15px; object-fit: cover; }
.board-profile-name { min-width: 0; overflow: hidden; color: #46352c; font-size: .72rem; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.board-profile-status { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #d45b42; box-shadow: 0 0 0 2px #fff4df; }
.board-player-badge.connected .board-profile-status { background: #398c56; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  isolation: isolate;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0 0 38%;
  z-index: -1;
  opacity: .23;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 38%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 78% 25%, #fff 0 1px, transparent 2px),
    linear-gradient(170deg, transparent 65%, rgba(72, 140, 151, .28) 65.5%, transparent 66%);
  background-size: 150px 90px, 190px 110px, 100% 100%;
}

.topbar, .status-card, .player-strip, .control-dock {
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--purple);
  box-shadow: 0 5px 12px rgba(91, 50, 125, .24);
  font-size: 1.4rem;
}

.eyebrow {
  margin: 0 0 2px;
  color: #765282;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

h1 { margin: 0; font-size: clamp(1.65rem, 6vw, 2.4rem); line-height: 1; color: var(--ink); }
h1 span { color: var(--purple); }

.icon-button {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(75, 51, 89, 0.16);
  border-radius: 50%;
  background: rgba(255, 248, 231, .72);
  color: var(--ink);
  font-size: 1.6rem;
  cursor: pointer;
}

.status-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid rgba(120, 76, 146, 0.18);
  border-radius: 18px;
  background: rgba(255, 248, 231, 0.84);
  box-shadow: var(--shadow);
}

.turn-avatar, .mini-avatar {
  display: grid;
  place-items: center;
  color: #fff8e8;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.turn-avatar { width: 48px; height: 48px; border-radius: 16px; font-size: .78rem; }
.mini-avatar { width: 32px; height: 32px; border-radius: 11px; font-size: .6rem; flex: 0 0 auto; }
.red { background: linear-gradient(145deg, #ef6c4d, var(--red-dark)); }
.blue { background: linear-gradient(145deg, #4f9ddd, var(--blue-dark)); }
.green { background: linear-gradient(145deg, #62b97d, #22633f); }
.yellow { background: linear-gradient(145deg, #f3c84e, #a56b0e); }

.status-label { margin: 0; font-size: 1.08rem; font-weight: 700; }
.status-message { margin: 1px 0 0; color: #71637d; font-size: .83rem; line-height: 1.2; }
.turn-count { text-align: center; color: var(--purple); font-weight: 700; }
.turn-count span { display: block; font-size: 1.4rem; line-height: 1; }
.turn-count small { color: #e9d4ad; font-size: .68rem; }

.environment-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(120, 76, 146, .14);
  border-radius: 15px;
  background: rgba(255, 248, 231, .6);
  color: var(--ink);
}

.environment-banner > span:first-child { font-size: 1.4rem; }
.environment-banner strong, .environment-banner small { display: block; }
.environment-banner strong { font-size: .82rem; }
.environment-banner small { color: #71637d; font-size: .68rem; }
.time-label { margin-left: auto; color: var(--purple); font-size: .75rem; font-weight: 700; }
.home-appearance { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(120, 76, 146, .14); border-radius: 15px; background: rgba(255, 248, 231, .68); }
.home-theme-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: .72rem; font-weight: 700; }
.home-theme-picker select { width: 100%; min-width: 0; min-height: 38px; padding: 5px 9px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 11px; background: #fffdf7; color: var(--ink); font: inherit; font-size: .73rem; }
.home-mode-toggle { min-width: 72px; min-height: 38px; padding: 5px 9px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 11px; background: linear-gradient(140deg, #fff7dc, #f1e0bf); color: #51446b; cursor: pointer; font: inherit; font-size: .73rem; font-weight: 800; }
body[data-screen="home"][data-home-mode="night"] .home-mode-toggle { background: linear-gradient(140deg, #4a416d, #303858); color: #fff0bd; }

.match-setup { padding: 18px; border: 1px solid rgba(120, 76, 146, .16); border-radius: 22px; background: rgba(255, 253, 246, .93); box-shadow: 0 12px 28px rgba(54, 41, 58, .09); }
.match-setup .panel-heading { margin-bottom: 13px; }
.match-setup .panel-heading strong { font-size: .98rem; }
.setup-row { display: grid; grid-template-columns: 72px repeat(3, 1fr); gap: 8px; align-items: center; margin-top: 10px; }
.setup-row.play-mode-row { grid-template-columns: 72px repeat(2, minmax(0, 1fr)); }
.setup-row.color-setup-row { grid-template-columns: 72px minmax(0, 1fr); cursor: pointer; }
.setup-color-select { width: 100%; min-width: 0; min-height: 42px; padding: 5px 10px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 12px; background: rgba(255, 253, 246, .92); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.setup-hint { margin: 8px 0 0 80px; color: var(--muted, #776a5d); font-size: .78rem; line-height: 1.35; }
.computer-delay-control { margin: 14px 0 0 80px; }
.computer-delay-control[hidden] { display: none; }
.computer-delay-control label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-size: .78rem; font-weight: 600; }
.computer-delay-control output { color: var(--purple); white-space: nowrap; }
.computer-delay-control input { display: block; width: 100%; margin: 10px 0 0; accent-color: var(--purple); cursor: pointer; }
.range-hints { display: flex; justify-content: space-between; color: #71637d; font-size: .68rem; }
.computer-delay-note { display: block; margin-top: 5px; color: #71637d; font-size: .68rem; line-height: 1.35; }
.setup-label { color: #71637d; font-size: .68rem; }
.setup-button { min-height: 42px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 12px; background: rgba(255, 253, 246, .92); color: var(--ink); cursor: pointer; font-size: .78rem; }
.setup-button[aria-pressed="true"] { border-color: var(--purple); background: #eadcf0; color: #60367f; font-weight: 700; }
.match-setup .big-action { min-height: 54px; margin-top: 16px; border-radius: 15px; font-size: .98rem; }

.online-panel, .history-panel {
  padding: 10px 11px;
  border: 1px solid rgba(120, 76, 146, .14);
  border-radius: 16px;
  background: rgba(255, 248, 231, .74);
}
.online-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-details { padding: 0; overflow: hidden; border: 1px solid rgba(120, 76, 146, .15); border-radius: 18px; background: rgba(255, 248, 231, .88); box-shadow: 0 6px 18px rgba(54, 41, 58, .06); }
.mode-details > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 9px; min-height: 82px; padding: 14px; list-style: none; }
.mode-details > summary::-webkit-details-marker { display: none; }
.mode-details[open] > summary { border-bottom: 1px solid rgba(120, 76, 146, .12); }
.mode-tile-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: #eadcf0; font-size: 1.28rem; }
.mode-tile-copy strong, .mode-tile-copy small { display: block; }
.mode-tile-copy strong { font-size: .82rem; }
.mode-tile-copy small { margin-top: 3px; color: #71637d; font-size: .64rem; line-height: 1.2; }
.mode-chevron { color: var(--purple); font-size: 1.1rem; transition: transform 180ms ease; }
.mode-details[open] .mode-chevron { transform: rotate(180deg); }
.mode-details > .mode-details-content { margin: 0; padding: 14px; }
.mode-details-content .integration-note { margin: 10px 0 0; }
.room-action-message { min-height: 1.25em; margin: 9px 0 0; color: #71637d; font-size: .69rem; line-height: 1.35; }
.room-action-message[data-state="error"] { color: #a9322a; font-weight: 700; }
.room-action-message[data-state="success"] { color: #286442; font-weight: 700; }
.room-action-message[data-state="pending"] { color: var(--purple); }
.matchmaking-panel { padding: 0; }
.queue-eta { display: block; margin-top: 8px; color: #71637d; font-size: .66rem; }
.queue-message { margin: 0; color: #71637d; font-size: .7rem; }
.queue-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 6px; margin-top: 7px; }
.queue-row .room-action { margin: 0; }
.queue-timer { min-width: 58px; color: var(--purple); font-size: .7rem; font-weight: 700; text-align: right; }
.online-heading { margin-bottom: 8px; }
#connectionStatus { color: #8b6d58; font-size: .68rem; }
#connectionStatus[data-connection="connected"] { color: var(--green); }
#connectionStatus[data-connection="reconnecting"] { color: #bd7a18; }
.guest-row { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.guest-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #eadcf0; cursor: pointer; }
.guest-name-label { color: #71637d; font-size: .68rem; }
.guest-name-input, .room-code-input { min-width: 0; border: 1px solid rgba(120, 76, 146, .18); border-radius: 9px; background: rgba(255, 253, 246, .85); color: var(--ink); padding: 6px 8px; font: inherit; font-size: .76rem; }
.room-code-input { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.small-action { border: 1px solid rgba(120, 76, 146, .2); border-radius: 9px; background: #fffdf6; color: var(--purple); padding: 5px 8px; cursor: pointer; font-size: .68rem; }
.player-status-panel { padding: 0; }
.player-status-panel > .player-strip { margin: 0 12px 13px; }
.player-status-panel > summary { padding: 13px 15px; }
.room-actions, .room-lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.room-action { min-height: 34px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 10px; background: rgba(255, 253, 246, .84); color: var(--ink); cursor: pointer; font-size: .7rem; }
.room-action.primary { border-color: var(--purple); background: #eadcf0; color: #60367f; font-weight: 700; }
.room-action:disabled { cursor: not-allowed; opacity: .5; }
.room-actions .room-code-input { grid-column: 1 / 2; }
.room-actions #joinRoomButton { grid-column: 2 / 3; }
.room-lobby { margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(120, 76, 146, .2); }
.room-code-card { display: flex; align-items: center; gap: 6px; }
.room-code-card > span { color: #71637d; font-size: .68rem; }
.room-code-card strong { margin-right: auto; color: var(--purple); font-size: 1.12rem; letter-spacing: .18em; }
.room-status-message { margin: 7px 0; color: #71637d; font-size: .7rem; }
.room-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.room-player { display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 5px; padding: 5px 6px; border-radius: 9px; background: rgba(255, 253, 246, .75); }
.room-player > span { grid-row: span 2; font-size: 1rem; }
.room-player strong, .room-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-player strong { font-size: .68rem; }
.room-player small { color: #71637d; font-size: .55rem; }

.board-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 235, 182, .3);
}

.board-dice-flight { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 720px; pointer-events: none; }
.board-dice-flight .dice-stage { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); filter: drop-shadow(0 13px 8px rgba(35, 22, 16, .4)); }
.board-dice-cube { --dice-size: 76px; }
.board-dice-cube .cube-face { border-radius: 13px; box-shadow: inset 0 0 0 2px #fff8c266, inset -8px -9px 14px #99580735; }
.board-dice-cube .pip { width: 12px; height: 12px; background: #2a190d; box-shadow: inset 1px 1px 2px #ffffff55, 0 1px 1px #4c260d66; }
.board-dice-flight.throwing .dice-stage { animation: boardDiceThrow 1000ms cubic-bezier(.16,.75,.28,1) both; }
.board-dice-flight.throwing .board-dice-cube { animation: boardDiceSpin 1000ms cubic-bezier(.16,.75,.28,1) both; }
.board-dice-flight.landed .dice-stage { animation: boardDiceLand 340ms cubic-bezier(.2,.8,.25,1) both; }
.board-dice-popup { position: absolute; left: 50%; top: 26%; display: grid; width: 64px; height: 64px; place-items: center; border: 3px solid #fff1ad; border-radius: 20px; color: #fffdf4; background: linear-gradient(145deg, #f0ad2b, #b74022); box-shadow: 0 5px 0 #79351d, 0 0 24px #ffd95dcc, inset 0 1px 4px #ffffff99; font-size: 2.6rem; line-height: 1; opacity: 0; transform: translate(-50%, 16px) scale(.35) rotate(-14deg); }
.board-dice-flight.result-pop .board-dice-popup { animation: boardDiceNumberPop 760ms cubic-bezier(.17,.86,.27,1.3) 80ms both; }

#board {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  touch-action: manipulation;
}

.player-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(120, 76, 146, .16);
  border-radius: 14px;
  background: rgba(255, 248, 231, .8);
  opacity: .65;
}

.player-card.active { opacity: 1; border-color: var(--purple); box-shadow: 0 5px 15px rgba(105, 67, 129, .16); }
.player-card strong, .player-card span { display: block; }
.player-card strong { font-size: .8rem; }
.player-card span { color: #71637d; font-size: .7rem; }

.identity-panel {
  padding: 10px 11px 9px;
  border: 1px solid rgba(120, 76, 146, .14);
  border-radius: 16px;
  background: rgba(255, 248, 231, .68);
}

.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.panel-heading strong { font-size: .8rem; }
.panel-heading span { color: #71637d; font-size: .68rem; }
.avatar-tray { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; overflow-x: auto; }
.avatar-choice {
  min-width: 52px;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 1px solid rgba(120, 76, 146, .16);
  border-radius: 12px;
  background: rgba(255, 253, 246, .76);
  color: var(--ink);
  cursor: pointer;
}
.avatar-choice span:first-child { font-size: 1.25rem; line-height: 1; }
.avatar-choice span:last-child { max-width: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #71637d; font-size: .56rem; }
.avatar-choice.selected { border-color: var(--purple); background: #eadcf0; box-shadow: inset 0 0 0 2px rgba(124, 74, 162, .14); }

.control-dock {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 22px;
  background: rgba(255, 248, 231, .92);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.dice-readout { text-align: center; }
.dice-readout span { display: block; color: #735237; font-size: .68rem; }
.dice-readout strong { display: block; font-size: 1.65rem; line-height: 1.1; }

.dice-button {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, #9d63c0, #673487);
  color: #fff8e7;
  box-shadow: 0 7px 0 #4d2767, 0 11px 22px rgba(77, 39, 103, .25);
  cursor: pointer;
  font-weight: 700;
}

.dice-button:active { transform: translateY(3px); box-shadow: 0 4px 0 #4d2767; }
.dice-button:disabled { cursor: not-allowed; opacity: .55; }
.dice-stage { width: 62px; height: 54px; display: grid; place-items: center; perspective: 440px; }
.dice-cube {
  --dice-size: 54px;
  position: relative;
  display: block;
  width: var(--dice-size);
  height: var(--dice-size);
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(25deg);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1);
}
.dice-cube.rolling { animation: cubeRoll 1s cubic-bezier(.22, .8, .25, 1); }
.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 7px;
  border: 2px solid #c28118;
  border-radius: 10px;
  background: radial-gradient(ellipse at 23% 16%, #fffde8 0%, rgba(255, 251, 208, .84) 10%, transparent 38%), linear-gradient(145deg, #fff6a8 0%, #f2bd31 72%, #dd961b 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), inset 3px 4px 9px rgba(255, 255, 255, .56), inset -7px -8px 13px rgba(153, 88, 7, .26), 0 0 4px rgba(255, 255, 224, .55);
  backface-visibility: hidden;
}
.cube-face::before { content: ""; position: absolute; z-index: 2; top: -30%; left: -68%; width: 48%; height: 165%; border-radius: 50%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 24%, rgba(255,255,255,.92) 49%, rgba(255,255,255,.3) 72%, transparent 100%); filter: blur(2px); opacity: .5; transform: rotate(27deg); pointer-events: none; }
.cube-face::after { content: ""; position: absolute; z-index: 1; inset: 2px; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,.24), transparent 42%, rgba(119,65,6,.12)); pointer-events: none; }
.dice-cube.rolling .cube-face::before { animation: diceSurfaceReflection 560ms ease-in-out infinite; opacity: .95; }
.cube-face.front { transform: translateZ(calc(var(--dice-size) / 2)); }
.cube-face.back { transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); }
.cube-face.right { transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); }
.cube-face.left { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.cube-face.top { transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.pip { position: relative; z-index: 3; width: 10px; height: 10px; align-self: center; justify-self: center; border-radius: 50%; background: #26160d; opacity: 0; box-shadow: inset 1px 1px 1px rgba(255,255,255,.18), 0 1px 2px rgba(50,25,9,.35); }
.pips-1 .pip:nth-child(5),
.pips-2 .pip:nth-child(1), .pips-2 .pip:nth-child(9),
.pips-3 .pip:nth-child(1), .pips-3 .pip:nth-child(5), .pips-3 .pip:nth-child(9),
.pips-4 .pip:nth-child(1), .pips-4 .pip:nth-child(3), .pips-4 .pip:nth-child(7), .pips-4 .pip:nth-child(9),
.pips-5 .pip:nth-child(1), .pips-5 .pip:nth-child(3), .pips-5 .pip:nth-child(5), .pips-5 .pip:nth-child(7), .pips-5 .pip:nth-child(9),
.pips-6 .pip:nth-child(1), .pips-6 .pip:nth-child(3), .pips-6 .pip:nth-child(4), .pips-6 .pip:nth-child(6), .pips-6 .pip:nth-child(7), .pips-6 .pip:nth-child(9) { opacity: 1; }
.dice-cube[data-face="1"] { transform: rotateX(-18deg) rotateY(25deg); }
.dice-cube[data-face="2"] { transform: rotateX(-18deg) rotateY(-65deg); }
.dice-cube[data-face="3"] { transform: rotateX(72deg) rotateY(25deg); }
.dice-cube[data-face="4"] { transform: rotateX(-108deg) rotateY(25deg); }
.dice-cube[data-face="5"] { transform: rotateX(-18deg) rotateY(115deg); }
.dice-cube[data-face="6"] { transform: rotateX(-18deg) rotateY(205deg); }
.rule-hint { color: #71637d; font-size: .68rem; line-height: 1.15; }
.footer-note { text-align: center; color: #665979; font-size: .7rem; }

.settings-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.setting-button { min-height: 36px; padding: 4px 5px; border: 1px solid rgba(120, 76, 146, .15); border-radius: 11px; background: rgba(255, 248, 231, .68); color: #665979; cursor: pointer; font-size: .65rem; }
.setting-button[aria-pressed="true"] { border-color: var(--purple); color: var(--purple); background: rgba(234, 220, 240, .8); }
.theme-select { width: 100%; min-width: 0; }
.danger-button { color: #9a3d32; border-color: rgba(154, 61, 50, .25); }
.feedback-panel { display: grid; gap: 7px; margin-top: 10px; padding: 11px; border: 1px solid rgba(120, 76, 146, .16); border-radius: 13px; background: rgba(255, 253, 246, .62); }
.feedback-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #4d315d; font-size: .78rem; }
.feedback-heading span, .feedback-note { color: #71637d; font-size: .65rem; }
.feedback-email { width: fit-content; color: #75469a; font-size: .75rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.feedback-panel label { color: #665979; font-size: .68rem; font-weight: 600; }
.feedback-panel textarea { width: 100%; min-height: 76px; resize: vertical; padding: 9px 10px; border: 1px solid rgba(120, 76, 146, .2); border-radius: 10px; background: #fffdf8; color: #352741; font: inherit; font-size: .75rem; line-height: 1.45; }
.feedback-panel textarea:focus-visible { outline: 2px solid #8052a1; outline-offset: 2px; }
.feedback-send { width: 100%; min-height: 40px; border-color: rgba(120, 76, 146, .28); color: #59356e; font-weight: 700; }
.feedback-note { margin: 0; line-height: 1.4; }
.history-panel { padding-bottom: 8px; }
.history-panel .panel-heading { margin-bottom: 3px; }
.match-history { display: grid; gap: 5px; }
.empty-history { margin: 4px 0 0; color: #71637d; font-size: .68rem; }
.history-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 9px; background: rgba(255, 253, 246, .72); }
.history-result { font-size: 1rem; text-align: center; }
.history-row strong, .history-row small { display: block; }
.history-row strong { font-size: .68rem; }
.history-row small { color: #71637d; font-size: .58rem; }
.dice-button.six-glow { animation: sixGlow 950ms ease-in-out infinite alternate; }
.dice-readout.six-result { animation: sixResult 760ms cubic-bezier(.2,.8,.2,1) both; border-color: #e8ad27; background: linear-gradient(145deg, #fff4b2, #f4bd45); box-shadow: 0 4px 0 #9b5b1b, 0 0 25px #ffd85fc9; }
.dice-readout.six-result strong { color: #fff; background: linear-gradient(145deg, #f1a516, #bd4024); box-shadow: 0 0 0 4px #fff2bb, 0 0 18px #ed9d29; }
.guti-token { overflow: visible; }
.guti-token.selectable { cursor: pointer; }
.guti-token.home-token { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.guti-token.guti-home-dragging { cursor: grabbing; }
.guti-token.guti-home-dragging .guti-shell { filter: drop-shadow(0 8px 6px rgba(32, 18, 12, .42)) drop-shadow(0 0 5px rgba(255, 255, 255, .8)); }
.guti-token.home-token.guti-home-settle .guti-shell { animation: gutiHomeSettle 320ms cubic-bezier(.2,.8,.2,1.2); }
.guti-shell { transform-box: fill-box; transform-origin: center; transition: filter 180ms ease; }
.guti-token.selectable .guti-shell { filter: drop-shadow(0 0 4px rgba(255, 232, 123, .95)) drop-shadow(0 2px 2px rgba(40, 17, 11, .45)); animation: gutiReady 860ms ease-in-out infinite alternate; }
.guti-token:focus-visible { outline: none; }
.guti-token:focus-visible .guti-shell { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 5px #f2bd3f); }
.selection-halo { transform-box: fill-box; transform-origin: center; animation: haloBreath 900ms ease-in-out infinite alternate; }
.selection-rim { filter: drop-shadow(0 0 3px rgba(255, 245, 183, .9)); }
.selection-orbit { transform-box: fill-box; transform-origin: center; animation: orbitSpin 2.6s linear infinite; }
.stoppage-star-disc { filter: drop-shadow(0 1px 1px rgba(36, 17, 11, .45)); }
.stoppage-star { font-family: system-ui, sans-serif; font-weight: 900; paint-order: stroke; stroke: #fff1a7; stroke-width: .7px; }
@keyframes sixGlow { from { box-shadow: 0 7px 0 #4d2767, 0 0 0 rgba(242, 197, 107, 0); } to { box-shadow: 0 7px 0 #4d2767, 0 0 28px rgba(242, 197, 107, .96); } }
@keyframes diceSurfaceReflection { 0% { left: -68%; opacity: .08; } 30% { opacity: .95; } 100% { left: 125%; opacity: .08; } }
@keyframes boardDiceThrow { 0% { transform: translate(-50%, calc(-50% + min(38vw, 235px))) scale(.36); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(-50%, calc(-50% - 24px)) scale(1.08); } 73% { transform: translate(-50%, calc(-50% + 12px)) scale(.96); } 88% { transform: translate(-50%, calc(-50% - 5px)) scale(1.02); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes boardDiceSpin { 0% { transform: rotateX(-18deg) rotateY(25deg) rotateZ(-22deg); } 50% { transform: rotateX(640deg) rotateY(520deg) rotateZ(18deg); } 100% { transform: rotateX(700deg) rotateY(745deg) rotateZ(0); } }
@keyframes boardDiceLand { 0% { transform: scale(.84); } 55% { transform: scale(1.14); } 78% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes boardDiceNumberPop { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.35) rotate(-14deg); } 54% { opacity: 1; transform: translate(-50%, -7px) scale(1.16) rotate(4deg); } 72% { transform: translate(-50%, 2px) scale(.96) rotate(-1deg); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); } }
@keyframes sixResult { 0% { transform: scale(.82) rotate(-5deg); filter: brightness(1.5); } 48% { transform: scale(1.09) rotate(3deg); } 72% { transform: scale(.97) rotate(-1deg); } 100% { transform: scale(1) rotate(0); filter: brightness(1); } }
@keyframes gutiReady { from { transform: scale(.96); } to { transform: scale(1.08); } }
@keyframes gutiHomeSettle { 0% { transform: scale(1.12) translateY(-3px); } 55% { transform: scale(.92) translateY(1px); } 100% { transform: scale(1) translateY(0); } }
@keyframes haloBreath { from { opacity: .12; transform: scale(.9); } to { opacity: .3; transform: scale(1.1); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes cubeRoll {
  0% { transform: rotateX(-18deg) rotateY(25deg) rotateZ(0deg); }
  22% { transform: rotateX(145deg) rotateY(120deg) rotateZ(18deg) scale(1.05); }
  48% { transform: rotateX(310deg) rotateY(250deg) rotateZ(-16deg) scale(.95); }
  74% { transform: rotateX(505deg) rotateY(410deg) rotateZ(12deg) scale(1.04); }
  100% { transform: rotateX(690deg) rotateY(570deg) rotateZ(0deg); }
}
body.low-animation *, body.low-animation *::before, body.low-animation *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media (orientation: landscape) {
  body[data-screen="game"] { overflow: hidden; }
  .app-shell[data-screen="game"] {
    width: 100%;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    padding: max(4px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  }
  .app-shell[data-screen="game"] .game-screen {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(82px, 12vw, 112px) minmax(0, 1fr) clamp(98px, 14vw, 132px);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 3px 8px;
  }
  .app-shell[data-screen="game"] .game-topbar {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    gap: 2px;
    align-self: start;
  }
  .app-shell[data-screen="game"] .game-topbar .icon-button { width: 26px; height: 26px; font-size: .9rem; }
  .app-shell[data-screen="game"] .game-brand { gap: 0; min-width: 0; text-align: center; }
  .app-shell[data-screen="game"] .game-brand strong { font-size: .78rem; white-space: nowrap; }
  .app-shell[data-screen="game"] .game-brand small { max-width: 100%; overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell[data-screen="game"] .game-brand .roll-countdown { padding-inline: 5px; font-size: .56rem; }
  .app-shell[data-screen="game"] .board-stage {
    display: contents;
  }
  .app-shell[data-screen="game"] .board-wrap {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: min(100%, calc(100svh - 8px));
    max-width: 100%;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    align-self: center;
    justify-self: center;
  }
  .app-shell[data-screen="game"] #boardProfilesTop,
  .app-shell[data-screen="game"] #boardProfilesBottom {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 5px;
    align-content: start;
  }
  .app-shell[data-screen="game"] #boardProfilesTop { align-self: start; }
  .app-shell[data-screen="game"] #boardProfilesBottom { align-self: end; }
  .app-shell[data-screen="game"] .board-player-badge { min-height: 21px; gap: 3px; padding: 1px 5px 1px 2px; }
  .app-shell[data-screen="game"] .board-player-badge.right-seat { padding: 1px 2px 1px 5px; }
  .app-shell[data-screen="game"] .board-profile-avatar,
  .app-shell[data-screen="game"] .board-player-badge > img { flex-basis: 17px; width: 17px; height: 17px; font-size: 11px; }
  .app-shell[data-screen="game"] .board-profile-name { font-size: .59rem; }
  .app-shell[data-screen="game"] .board-profile-status { flex-basis: 5px; width: 5px; height: 5px; }
  .app-shell[data-screen="game"] .game-control-dock {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 7px;
    padding: 0 2px;
    position: static;
    margin-top: 44px;
  }
  .app-shell[data-screen="game"] .game-control-dock .dice-button { min-height: 88px; flex-direction: column; gap: 0; padding: 5px; font-size: .75rem; }
  .app-shell[data-screen="game"] .game-control-dock .dice-button .dice-stage { transform: scale(.68); margin-block: -8px; }
  .app-shell[data-screen="game"] .game-control-dock .dice-readout,
  .app-shell[data-screen="game"] .game-control-dock .dice-tip-panel { width: 100%; min-height: 56px; padding: 4px; border-radius: 13px; }
  .app-shell[data-screen="game"] .game-control-dock .dice-readout strong { min-width: 36px; min-height: 36px; font-size: 1.5rem; }
  .app-shell[data-screen="game"] .game-control-dock .dice-tip-label { font-size: .56rem; }
  .app-shell[data-screen="game"] .game-control-dock .dice-tip { font-size: .62rem; }
}

@media (min-width: 640px) {
  .app-shell { padding-inline: 28px; }
  .board-wrap { max-width: 650px; align-self: center; }
}

@media (max-width: 420px) {
  .avatar-tray { grid-template-columns: repeat(8, 48px); overflow-x: auto; padding-bottom: 2px; }
  .home-screen { gap: 14px; }
  .welcome-card { min-height: 88px; padding: 16px; }
  .welcome-mark { width: 46px; height: 46px; }
  .online-modes { grid-template-columns: 1fr; gap: 8px; }
  .mode-details > summary { min-height: 72px; }
  .match-setup { padding: 15px; }
  .settings-strip { grid-template-columns: repeat(2, 1fr); }
  .setting-button { text-align: left; padding-left: 11px; }
  .guest-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .guest-name-label { display: none; }
  .room-actions { grid-template-columns: 1fr 1fr; }
  .queue-row { grid-template-columns: 1fr auto; }
  .queue-row .queue-timer { grid-column: 2; grid-row: 1; }
  .setup-row { grid-template-columns: 52px repeat(3, 1fr); }
  .setup-row.color-setup-row { grid-template-columns: 52px minmax(0, 1fr); }
  .setup-row.play-mode-row { grid-template-columns: 52px repeat(2, minmax(0, 1fr)); }
  .setup-hint { margin-left: 60px; }
  .computer-delay-control { margin-left: 60px; }
  .setup-button { padding-inline: 2px; font-size: .67rem; }
}