@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #101117;
  --panel: #1a1b22;
  --edge: #4d4957;
  --text: #f0eee9;
  --muted: #b1abb7;
  --accent: #ba96df;
  --violet: #785996;
  --danger: #b04b49;
  --sidebar: 218px;
  --header: 60px;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background:
    radial-gradient(ellipse at 65% 14%, #29233240, transparent 55%), var(--bg);
  color: var(--text);
  font-family: "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  overflow: hidden;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.26' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
button,
input,
select,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
input,
select {
  font: inherit;
}
button,
.button {
  min-height: 40px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(145deg, #292930, #1b1c24);
  color: var(--text);
  padding: 8px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition:
    border-color 0.18s,
    filter 0.18s,
    background 0.18s;
}
button:hover:not(:disabled),
.button:hover {
  border-color: #c9b6dc;
  filter: brightness(1.13);
}
button:disabled {
  cursor: default;
  color: #9b98a0;
  background: #303037;
  border-color: #47454c;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #d9bbf6;
  outline-offset: 3px;
}
button.primary,
.button.primary,
button.active {
  background: linear-gradient(135deg, #9b78ba, #795896 72%, #6d518a);
  border-color: #b18ecb;
  box-shadow:
    inset 0 1px 5px #d9b5ff25,
    0 4px 10px #0005;
  color: #fff;
}
button.primary:disabled {
  background: #333339;
  border-color: #48464e;
  color: #89878d;
  box-shadow: none;
}
button.danger {
  background: linear-gradient(135deg, #bd5753, #9d4240);
  border-color: #d46b63;
}
button.quiet-danger {
  color: #cfaaa7;
  background: transparent;
  font-size: 12px;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1 {
  font-size: 27px;
  font-weight: 500;
}
h2 {
  font-size: 23px;
  font-weight: 500;
}
h3 {
  font-size: 17px;
  font-weight: 500;
}
p {
  line-height: 1.75;
}
small {
  font-size: 12px;
}
input,
select {
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: #14151c;
  color: var(--text);
  min-height: 38px;
  padding: 7px 12px;
  min-width: 0;
}
input::placeholder {
  color: #a8a3af;
}
input[type="range"] {
  accent-color: #a080cd;
  padding: 0;
  min-height: 18px;
}
select {
  cursor: pointer;
}
::selection {
  background: #7e619c;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background: #665970;
  border: 1px solid #a78bb6;
  border-radius: 8px;
}
::-webkit-scrollbar-track {
  background: #0e0f1570;
  border-radius: 8px;
}
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button {
  width: 38px;
  min-height: 38px;
  padding: 7px;
  background: transparent;
  border-color: transparent;
}
.icon-button .icon {
  width: 23px;
  height: 23px;
}
.spacer {
  flex: 1;
}
.help,
.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.warning {
  color: #e39477;
}
.positive {
  color: #d2a1ef;
}
.badge,
.header-tag,
.verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  font-size: 12px;
}
.badge {
  background: #1e1c26;
}
.verified {
  color: #d1bddf;
  background: #25202d80;
  white-space: nowrap;
}
.verified .icon {
  width: 20px;
  height: 20px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.large-icon {
  color: var(--accent);
  margin: 0 auto 20px;
}
.large-icon .icon {
  width: 65px;
  height: 65px;
}
.portrait {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #9379b3, #342b42);
  border: 1px solid #c4b1d3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 3px #191721;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait .icon {
  width: 60%;
  height: 60%;
  color: #e8dff1;
}
.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #97bd83;
  display: inline-block;
  margin-right: 5px;
}
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #c3a1e0;
  line-height: 1;
}
.flourish:before,
.flourish:after {
  content: "";
  height: 1px;
  width: 100px;
  background: linear-gradient(90deg, transparent, #7d7287);
}
.flourish:after {
  transform: rotate(180deg);
}
/* Fixed lounge shell. */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  border-right: 1px solid #524757;
  background: linear-gradient(115deg, #15151e, #101117 70%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-brand {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 1px;
  padding: 29px 10px 20px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ffffff0c;
  white-space: nowrap;
}
.side-brand span {
  font-size: 18px;
}
.side-brand i {
  display: block;
  font-size: 12px;
  color: var(--accent);
  font-style: normal;
  line-height: 14px;
}
.sidebar nav {
  padding: 17px 13px;
  position: relative;
  z-index: 1;
}
.sidebar nav button {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  margin-bottom: 8px;
  height: 47px;
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 0 5px 5px 0;
  gap: 14px;
}
.sidebar nav button.current {
  background: linear-gradient(90deg, #69517e85, #44375075);
  border-left: 2px solid #bca0d8;
  color: #e4c9fc;
}
.nav-divider {
  border-top: 1px solid #ffffff18;
  margin: 18px 8px;
}
.side-profile {
  margin: auto 25px 24px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-profile .portrait {
  width: 68px;
  height: 68px;
  margin-bottom: 5px;
}
.side-profile strong {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-profile small {
  color: #c8c2cd;
}
.wallet {
  font-size: 11px;
  color: #a89eb5;
  font-variant-numeric: tabular-nums;
}
.corner-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 230px;
  height: 300px;
  pointer-events: none;
  opacity: 0.75;
}
.corner-art.right {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
.sidebar .corner-art {
  opacity: 0.35;
  bottom: -35px;
  z-index: 0;
}
#view {
  position: relative;
  margin-left: var(--sidebar);
  height: 100dvh;
  outline: none;
  z-index: 1;
}
.page {
  height: 100%;
  padding: 30px 38px 22px;
  position: relative;
  overflow: auto;
  isolation: isolate;
}
.page > *:not(.room-corners) {
  position: relative;
  z-index: 1;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 20px;
  border-bottom: 1px solid #71667735;
  padding-bottom: 15px;
}
.page-title h1,
.page-title h2 {
  margin: 0;
}
.page-title > .icon {
  width: 28px;
  height: 28px;
}
.page-title .icon-button {
  margin-left: -9px;
}
.room-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.lobby-page .room-corners,
.search-page .room-corners,
.stats-page .room-corners,
.rules-page .room-corners {
  display: none;
}
.profile-banner {
  display: flex;
  gap: 23px;
  align-items: center;
  min-height: 123px;
  border-bottom: 1px solid #ffffff18;
  padding-bottom: 18px;
}
.profile-banner .portrait {
  width: 94px;
  height: 94px;
}
.profile-banner h2 {
  font-size: 31px;
  margin: 4px 0;
}
.profile-banner small {
  color: #b6afbe;
}
.profile-banner .verified {
  margin-left: auto;
  margin-right: 15%;
}
.lobby-page {
  padding: 26px 38px;
}
.lobby-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: var(--serif);
  font-size: 29px;
  letter-spacing: 2px;
  margin: 25px 0 18px;
}
.lobby-heading i {
  font-style: normal;
  color: var(--accent);
  font-size: 16px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.lobby-cards {
  max-width: 940px;
  margin: auto;
  gap: 32px;
  height: min(56dvh, 485px);
}
.mode-card {
  border: 1px solid #82758d;
  border-radius: 10px;
  background: linear-gradient(150deg, #282530bd, #171820 70%);
  box-shadow: 0 8px 15px #0008;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.card-art {
  width: 100%;
  height: 53%;
  object-fit: cover;
  flex-shrink: 0;
  border-bottom: 1px solid #ffffff14;
  background: #211c2c;
}
.mode-copy {
  padding: 20px 28px 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
}
.mode-card h2 {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.mode-card p {
  font-size: 14px;
  color: #c5becd;
  margin: 0 0 22px;
}
.mode-card .primary {
  width: 100%;
  min-height: 51px;
  font-size: 19px;
  margin-top: auto;
  letter-spacing: 1px;
}
.lobby-note {
  display: flex;
  justify-content: space-between;
  max-width: 940px;
  margin: 17px auto 0;
  font-size: 12px;
  color: #9f95aa;
}
.friends-page .page-title {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 5px;
}
.friends-page .intro {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 25px 4px;
}
.friend-cards {
  max-width: 900px;
  margin: 0 auto;
  height: min(52dvh, 430px);
}
.friend-cards .mode-card {
  padding: 38px 33px 27px;
  justify-content: center;
}
.friend-cards .mode-card h2 {
  font-family: inherit;
  font-size: 24px;
  letter-spacing: 0;
}
.friend-cards .mode-card input {
  width: 100%;
  margin: 0 0 20px;
  min-height: 46px;
}
.friend-cards .mode-card .primary {
  max-width: 340px;
}
.friend-cards .large-icon {
  margin-bottom: 18px;
}
.segmented {
  display: inline-flex;
  padding: 3px;
  background: #1b1b23;
  border: 1px solid #4a4552;
  border-radius: 8px;
}
.segmented button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-height: 34px;
  min-width: 93px;
}
.segmented button.active {
  background: linear-gradient(135deg, #9373b2, #74558e);
  border-color: #c0a0dc;
}
.segmented button:disabled {
  opacity: 1;
  color: inherit;
}
.search-rank {
  position: absolute !important;
  right: 30px;
  top: 26px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.search-rank > .icon {
  width: 43px;
  height: 43px;
  padding: 10px;
  border: 1px solid #655c70;
  border-radius: 50%;
}
.search-rank small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.search-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.search-content > .segmented {
  width: 350px;
  max-width: 80%;
}
.search-content > .segmented button {
  flex: 1;
}
.search-content h2 {
  margin: 8px 0 0;
  font-size: 25px;
  letter-spacing: 1px;
}
.search-content .badge {
  padding: 5px 20px;
}
.search-orbit {
  position: relative;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  margin: 7px 0;
}
.search-orbit:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid transparent;
  border-left-color: #c9a4e9;
  border-top-color: #c9a4e9;
  border-radius: 50%;
  animation: spin 4s linear infinite;
  box-shadow: 0 0 15px #b07cea20;
}
.search-orbit:after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 3px dotted #cab4da;
  border-radius: 50%;
  animation: spin 15s linear infinite reverse;
}
.search-orbit > .tile-face {
  width: 64px;
  height: 91px;
  padding: 3px;
  background: linear-gradient(110deg, #fcf5e5, #d5cbbb);
  border-radius: 6px;
  transform: rotate(9deg);
  box-shadow:
    4px 6px 2px #84718f,
    8px 12px 16px #0008;
}
.idle-orbit:before,
.idle-orbit:after {
  animation: none;
}
.queue-clock {
  font-size: 39px;
  font-weight: 400;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  margin-top: -10px;
}
.search-actions {
  display: flex;
  gap: 30px;
  width: min(540px, 85%);
  margin: 0;
}
.search-actions button:first-child {
  flex: 1;
}
.search-actions button:last-child {
  flex: 2;
}
.search-content > .primary {
  width: 310px;
}
.search-content > .help {
  margin: 0;
}
.form-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 16px;
}
.form-page .page-title {
  margin-bottom: 12px;
  padding-bottom: 8px;
  flex-shrink: 0;
}
.preset-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, #24242b, #181920);
  padding: 8px 14px;
  border: 1px solid #414047;
  border-radius: 8px;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.preset-bar .segmented {
  padding: 0;
  border: 0;
  border-radius: 5px;
}
.preset-bar button {
  font-size: 13px;
  min-height: 32px;
  padding: 5px 13px;
}
.jump-buttons {
  margin-left: auto;
  display: flex;
}
.jump-buttons button {
  min-width: 64px;
  background: #202127;
}
.form-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 18px;
  padding-bottom: 12px;
  scrollbar-gutter: stable;
}
.settings-section {
  background: linear-gradient(130deg, #24252cd9, #1b1c23f0);
  border: 1px solid #4b4952;
  box-shadow: 0 4px 9px #0004;
  border-radius: 8px;
  padding: 10px 18px;
  margin-bottom: 11px;
}
.settings-section h2 {
  font-family: inherit;
  font-size: 16px;
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ffffff16;
  display: flex;
  align-items: center;
  gap: 14px;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  margin: 2px 0;
}
.setting-label {
  flex: 0 0 205px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.choices {
  display: flex;
  flex: 1;
  max-width: 650px;
}
.choices button {
  flex: 1;
  min-width: 70px;
  min-height: 34px;
  padding: 5px 13px;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: none;
}
.required {
  font-size: 10px;
  background: #d65d50;
  border: 1px solid #fb9c80;
  border-radius: 4px;
  padding: 0 4px;
  color: #fff;
  line-height: 17px;
  white-space: nowrap;
}
.setting-row input[type="number"] {
  width: 170px;
  min-height: 33px;
}
.settings-section > .help {
  font-size: 11px;
  margin: 6px 0 0;
}
.time-section .setting-label {
  display: none;
}
.time-section .choices {
  max-width: none;
}
.section-bar {
  font-size: 15px;
  border-top: 1px solid #a191b045;
  border-bottom: 1px solid #ffffff10;
  background: #11131a70;
  margin: 12px -5px 6px;
  padding: 7px 11px;
}
.invite-section {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: visible;
  min-height: 61px;
}
.invite-section h2 {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 80px;
}
.invite-section > .help {
  margin: 0;
  font-size: 11px;
}
.form-footer {
  flex-shrink: 0;
  padding-top: 4px;
  padding-right: 25px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-footer button {
  width: 100%;
  min-height: 44px;
  font-size: 18px;
}
.form-footer #form-status {
  margin: 0;
  font-size: 11px;
}
.channel-picker {
  position: relative;
  flex: 1;
  min-width: 155px;
  max-width: 400px;
  z-index: 5;
}
#channel-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  background: #16171e;
  min-height: 37px;
}
#channel-toggle .icon {
  width: 16px;
  height: 16px;
}
.channel-popup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 50;
  border: 1px solid #69606f;
  border-radius: 6px;
  background: #23212b;
  box-shadow: 0 12px 25px #0009;
  overflow: hidden;
}
.channel-search {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #5b5364;
  padding: 5px 10px;
}
.channel-search .icon {
  width: 18px;
  height: 18px;
}
.channel-search input {
  border: 0;
  background: transparent;
  font-size: 12px;
  padding: 5px 0;
  width: 100%;
}
#channel-options {
  max-height: 190px;
  overflow: auto;
}
#channel-options button {
  width: 100%;
  text-align: left;
  justify-content: space-between;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13px;
}
#channel-options button small {
  font-size: 10px;
  color: #e5b4a0;
}
#channel-options button[aria-disabled="true"] {
  color: #9d96a5;
}
.room-page .page-title {
  margin-bottom: 25px;
}
.room-code {
  position: absolute !important;
  right: 40px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.room-code small {
  display: block;
  font-size: 11px;
}
.room-code strong {
  font-size: 30px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #c5a1e0;
}
.players {
  border: 1px solid #4c4654;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(110deg, #26242d, #1b1c24);
}
.player-seat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 17px;
  min-height: 76px;
  border-bottom: 1px solid #ffffff1b;
}
.player-seat:last-child {
  border: 0;
}
.player-seat .portrait {
  width: 49px;
  height: 49px;
}
.player-seat strong {
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-marker {
  width: 18px;
  color: #a09aa8;
  flex-shrink: 0;
}
.seat-marker .icon {
  width: 19px;
  height: 19px;
}
.host-marker {
  color: #dfbc70;
}
.host-tag {
  padding: 3px 10px;
  background: #705688;
  border: 1px solid #a889c1;
  border-radius: 4px;
  font-size: 12px;
}
.seat-status {
  margin-left: auto;
  font-size: 13px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #303039;
  color: #ccc6d3;
}
.seat-status.is-ready {
  color: #b8d5aa;
}
.player-seat button {
  margin-left: auto;
  font-size: 13px;
  min-height: 34px;
  padding: 4px 12px;
}
.player-seat button + .seat-status {
  margin-left: 0;
}
.portrait.empty {
  border: 1px dashed #b1a5ba;
  background: #14151c;
  box-shadow: none;
}
.cpu-level {
  margin-left: auto;
  font-size: 12px;
  min-height: 34px;
  max-width: 110px;
}
.cpu-level + button {
  margin-left: 0;
}
.room-notice {
  font-size: 12px;
  margin: 11px 8px 22px;
}
.card {
  padding: 18px;
  border: 1px solid #4d4855;
  border-radius: 7px;
  background: linear-gradient(130deg, #23232bcc, #14171df2);
}
.card h3 {
  margin: 0 0 12px;
}
.invite-card {
  margin-bottom: 20px;
}
.invite-row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.invite-row > button {
  font-size: 13px;
  white-space: nowrap;
}
.invite-row small {
  color: #aaa1b3;
  font-size: 11px;
}
.room-agreement {
  display: flex;
  gap: 6px;
  flex-direction: column;
  font-size: 13px;
}
.room-agreement small {
  color: var(--muted);
  font-size: 11px;
}
.room-footer {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 22px;
}
.room-footer #start {
  min-width: 160px;
}
.room-footer #leave {
  min-width: 85px;
}
.app-header {
  height: var(--header);
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 17px;
  position: relative;
  z-index: 3;
  border-bottom: 1px solid #514956;
  background: #11121bee;
}
.brand {
  font-family: var(--serif);
  font-size: 25px;
  text-decoration: none;
  white-space: nowrap;
}
.brand span {
  font-size: 18px;
}
.header-tag {
  border-radius: 4px;
  background: #382d4680;
  font-size: 11px;
  padding: 5px 9px;
  border: 0;
}
.table-name {
  font-size: 13px;
}
.connection {
  margin-left: auto;
  font-size: 11px;
  color: #a49bad;
}
.app-header .icon-button {
  width: 37px;
  min-height: 37px;
}
.app-header #chat-toggle {
  margin-left: 10px;
}
body[data-view="game"] #view {
  margin: 0;
  height: calc(100dvh - var(--header));
}
.table-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  background: #24232d;
}
.table-area {
  position: relative;
  overflow: hidden;
  min-width: 0;
  container-type: size;
  background:
    radial-gradient(ellipse at 50% 40%, #3c354a66, #16172233 68%),
    repeating-linear-gradient(27deg, #68617605 0 1px, transparent 1px 3px),
    repeating-linear-gradient(115deg, #92869c05 0 1px, transparent 1px 3px),
    #282634;
  box-shadow: inset 0 0 80px #08091180;
}
.felt-lines {
  position: absolute;
  inset: 17% 22% 26%;
  border: 1px solid #11111b60;
  transform: perspective(700px) rotateX(13deg);
}
.felt-lines:before,
.felt-lines:after {
  content: "";
  position: absolute;
  width: 145%;
  height: 1px;
  background: #11111b55;
  left: -23%;
  top: 50%;
  transform: rotate(43deg);
}
.felt-lines:after {
  transform: rotate(-43deg);
}
.table-area > .corner-art {
  width: 175px;
  height: 220px;
  opacity: 0.6;
  z-index: 1;
}
.tile {
  --tw: clamp(27px, 4.4cqw, 57px);
  width: var(--tw);
  height: calc(var(--tw) * 1.42);
  min-height: 0;
  padding: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(115deg, #fff9ed, #e5ddcc 70%, #cbc2af);
  border: 1px solid #c2b5a0;
  border-top: 3px solid #fff5de;
  border-radius: 5px;
  box-shadow:
    1px 4px 0 #85728d,
    1px 6px 6px #0007;
  position: relative;
  vertical-align: middle;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.tile-face {
  width: 100%;
  height: 100%;
  display: block;
}
.tile:disabled {
  background: linear-gradient(115deg, #fff9ed, #e5ddcc 70%, #cbc2af);
  opacity: 1;
  color: #151318;
  border-color: #c2b5a0;
  border-top-color: #fff5de;
}
.tile:hover:not(:disabled) {
  transform: translateY(-9px);
  border-color: #cfb2ea;
  filter: none;
  box-shadow:
    0 0 0 2px #b591d3,
    1px 5px 0 #765789;
}
.tile.selected {
  outline: 3px solid #b99ce0;
  transform: translateY(-8px);
}
.tile.selected:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 6px);
  border: 6px solid transparent;
  border-bottom-color: #b194d4;
}
.tile.drawn {
  margin-left: 8px;
}
.tile.mini {
  --tw: clamp(15px, 2.5cqh, 28px);
  height: calc(var(--tw) * 1.35);
  border-radius: 3px;
  border-top-width: 2px;
  box-shadow: 0 2px #b2a18a;
  padding: 0;
}
.tile.back {
  --tw: clamp(12px, 2.3cqw, 33px);
  height: clamp(15px, 4.8cqh, 40px);
  background: linear-gradient(
    #e9e4d7 0 13%,
    #92769e 14% 21%,
    #473852 22%,
    #342b40
  );
  border: 1px solid #17131f;
  border-top: 1px solid #c5b6d0;
  border-radius: 2px;
  box-shadow: 0 4px 4px #0005;
}
.hand {
  position: absolute;
  bottom: 18px;
  left: 5%;
  right: 16%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: 7;
}
.hand .tile {
  --tw: min(4.65cqw, 7.6cqh, 57px);
}
.game-actions {
  position: absolute;
  right: 2%;
  bottom: 18px;
  width: 13%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 8;
  align-items: stretch;
}
.game-actions button {
  font-size: 16px;
  min-height: 43px;
  padding: 6px;
}
.game-actions .help {
  font-size: 11px;
  text-align: center;
}
.game-actions:has(button:nth-child(4)) {
  bottom: 12px;
  gap: 4px;
}
.game-actions:has(button:nth-child(4)) button {
  min-height: 29px;
  font-size: 13px;
}
.opponent {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 5;
  font-size: 12px;
  max-width: 24%;
}
.opponent .portrait {
  width: clamp(35px, 6cqh, 63px);
  height: clamp(35px, 6cqh, 63px);
  box-shadow: none;
}
.opponent > div {
  background: #14151dda;
  padding: 6px 9px;
  border-radius: 4px;
  min-width: 0;
  position: relative;
}
.opponent span:not(.portrait) {
  font-size: 11px;
  display: block;
  max-width: 125px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.opponent small {
  display: inline;
  font-size: 10px;
  color: #c3b9ce;
}
.opponent strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.opponent.your-turn .portrait {
  border-color: #dcc0f8;
  box-shadow: 0 0 0 2px #9e79c150;
}
.riichi-tag {
  position: absolute;
  bottom: -15px;
  font-size: 10px;
  color: #d5b4ed;
  white-space: nowrap;
}
.opponent.pos-0 {
  left: 6%;
  bottom: calc(18px + min(4.65cqw, 7.6cqh, 57px) * 1.42 + 18px);
}
.opponent.pos-1 {
  right: 1%;
  top: 35%;
}
.opponent.pos-2 {
  left: 50%;
  top: 1.5%;
  transform: translateX(-50%);
}
.opponent.pos-3 {
  left: 2%;
  top: 35%;
}
.hidden-hand {
  position: absolute;
  display: flex;
  gap: 1px;
  z-index: 2;
}
.hidden-hand.pos-2 {
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
}
.hidden-hand.pos-1 {
  right: 19%;
  top: 14%;
  transform: rotate(79deg);
  transform-origin: left top;
}
.hidden-hand.pos-3 {
  left: 19%;
  top: 14%;
  transform: rotate(101deg);
  transform-origin: left top;
}
.hidden-hand.pos-1 .tile.back,
.hidden-hand.pos-3 .tile.back {
  --tw: clamp(11px, 2.35cqh, 25px);
  height: clamp(16px, 2.25cqw, 31px);
}
.table-center {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 18cqh, 160px);
  height: clamp(90px, 17cqh, 150px);
  background: linear-gradient(120deg, #0e1114, #191b1d);
  border: 7px solid #151619;
  border-radius: 7px;
  box-shadow:
    0 0 0 1px #635a51,
    3px 5px 6px #0008,
    inset 0 0 0 1px #605843;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 3;
}
.table-center > strong {
  font-size: clamp(19px, 3.2cqh, 29px);
  font-weight: 400;
  letter-spacing: 1px;
}
.table-center > span:not(.score-edge) {
  font-size: clamp(12px, 2.4cqh, 19px);
}
.table-center > small {
  font-size: 8px;
  color: #c5bda9;
}
.score-edge {
  position: absolute;
  font-size: 9px;
  color: #bcb192;
  line-height: 10px;
  letter-spacing: 1px;
}
.score-0 {
  bottom: 0;
}
.score-2 {
  top: 0;
  transform: rotate(180deg);
}
.score-1 {
  right: -11px;
  top: 47%;
  transform: rotate(-90deg);
}
.score-3 {
  left: -11px;
  top: 47%;
  transform: rotate(90deg);
}
.river {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: calc(clamp(15px, 2.5cqh, 28px) * 6 + 10px);
  min-height: calc(clamp(15px, 2.5cqh, 28px) * 1.35 * 3 + 4px);
  align-content: start;
  z-index: 4;
}
.river.pos-0 {
  left: 50%;
  top: calc(44% + clamp(45px, 8.5cqh, 75px) + 12px);
  transform: translateX(-50%);
}
.river.pos-2 {
  left: 50%;
  bottom: calc(56% + clamp(45px, 8.5cqh, 75px) + 12px);
  transform: translateX(-50%) rotate(180deg);
}
.river.pos-1 {
  left: calc(50% + clamp(48px, 9cqh, 80px) + 12px);
  top: 44%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 36% 50%;
}
.river.pos-3 {
  right: calc(50% + clamp(48px, 9cqh, 80px) + 12px);
  top: 44%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: 64% 50%;
}
.river .called {
  opacity: 0.18;
}
.river .riichi {
  outline: 1px solid #c4a6e5;
}
.melds {
  position: absolute;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.meld {
  display: inline-flex;
  gap: 1px;
}
.melds.pos-0 {
  right: 18%;
  bottom: calc(18px + min(4.65cqw, 7.6cqh, 57px) * 1.42 + 12px);
}
.melds.pos-1 {
  right: 3%;
  top: 64%;
  transform: rotate(-90deg);
  transform-origin: right bottom;
}
.melds.pos-2 {
  right: 27%;
  top: 18%;
  transform: rotate(180deg);
}
.melds.pos-3 {
  left: 3%;
  top: 64%;
  transform: rotate(90deg);
  transform-origin: left bottom;
}
.dora-display {
  position: absolute;
  left: 3%;
  top: 4%;
  display: flex;
  gap: 3px;
  align-items: center;
  opacity: 0.85;
}
.dora-display small {
  position: absolute;
  top: -14px;
  left: 0;
  font-size: 8px;
  white-space: nowrap;
}
.rail {
  border-left: 1px solid #534857;
  background: linear-gradient(110deg, #21232b, #191a21);
  position: relative;
  z-index: 6;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rail-default {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 115px;
  gap: 24px;
}
.hint-button {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 5px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-color: #7c7088;
  background: #161820;
  font-size: 17px;
  min-height: 64px;
}
.hint-button small {
  color: #c7a4e5;
  font-size: 12px;
}
.rail-menu {
  margin-top: auto;
  margin-bottom: 40px;
}
.rail-menu button {
  width: 100%;
  padding: 14px 5px;
  gap: 7px;
  border: 0;
  border-top: 1px solid #ffffff16;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  justify-content: flex-start;
}
.rail-menu .icon {
  width: 18px;
  height: 18px;
}
.timer-ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid #696171;
  border-top-color: #c7a0e8;
  border-right-color: #a780c8;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1b22;
  box-shadow: inset 0 0 0 3px #20212a;
}
.timer-ring > span {
  font-size: 29px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.timer-ring small {
  font-size: 12px;
}
.timer-ring.urgent {
  border-color: #c97d70;
}
.table-layout.dock-open {
  grid-template-columns: minmax(0, 1fr) 300px;
}
.dock-open .rail-default {
  height: 66px;
  padding: 9px 15px;
  flex-shrink: 0;
}
.dock-open .rail-hint-slot {
  margin-left: auto;
  width: 80px;
}
.dock-open .hint-button {
  min-height: 47px;
  font-size: 13px;
  padding: 3px;
}
.dock-open .hint-button small {
  font-size: 10px;
}
.dock-open .rail-menu {
  display: none;
}
.dock-open .timer-ring {
  left: auto;
  right: 12px;
  bottom: 10px;
  transform: none;
  width: 62px;
  height: 62px;
}
.dock-open .timer-ring > span {
  font-size: 22px;
}
.game-dock {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 16px 85px;
}
.game-dock > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff20;
  padding-bottom: 10px;
}
.game-dock h3 {
  font-size: 17px;
  margin: 0;
}
.rail-body {
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding: 5px 0;
  scrollbar-width: thin;
}
.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0;
  font-size: 12px;
}
.chat-message > .portrait {
  width: 34px;
  height: 34px;
  box-shadow: none;
}
.chat-message > div {
  min-width: 0;
  flex: 1;
}
.chat-message header {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
  margin-bottom: 5px;
}
.chat-message small {
  font-size: 11px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-message time {
  font-size: 9px;
  color: #a59cae;
}
.chat-message p {
  display: inline-block;
  margin: 0;
  background: #33323b;
  border-radius: 5px;
  padding: 7px 10px;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.65;
}
.chat-form {
  display: flex;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid #ffffff18;
}
.chat-form input {
  width: 100%;
  min-width: 0;
  font-size: 11px;
  padding: 7px 8px;
}
.chat-form button {
  min-height: 38px;
  padding: 5px 12px;
  font-size: 13px;
}
.empty-chat {
  padding: 20px 5px;
}
.hint-card {
  font-size: 12px;
}
.hint-card h4 {
  font-size: 13px;
  margin: 12px 0 7px;
  font-weight: 500;
}
.recommended {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid #ffffff18;
}
.recommended .tile {
  width: 57px;
  height: 80px;
}
.recommended > span {
  font-size: 11px;
  color: #c2b8cd;
}
.yaku-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.yaku-pills span {
  padding: 5px 13px;
  border: 1px solid #5a515f;
  border-radius: 6px;
}
.effective {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.effective > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.effective .tile.mini {
  width: 29px;
  height: 41px;
}
.effective small {
  font-size: 10px;
}
.hint-note {
  text-align: center;
  background: #34283f70;
  border-radius: 6px;
  padding: 10px 4px;
  color: #d6b8f0;
}
.hint-note small {
  display: block;
  color: #b5a9c0;
  margin-top: 4px;
  font-size: 10px;
}
/* Results, history and help. */
.result-meta {
  position: absolute !important;
  right: 40px;
  top: 27px;
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  max-width: 50%;
  overflow-wrap: anywhere;
}
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 24px;
  margin: 15px 10px 25px;
}
.standings-wrap {
  min-width: 0;
}
.standings {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #101419c9;
  border: 1px solid #4d4755;
  border-radius: 7px;
  font-size: 17px;
}
th,
td {
  text-align: left;
  padding: 19px 17px;
  border-bottom: 1px solid #665b704d;
  font-weight: 400;
}
th {
  font-size: 13px;
  color: #cec5d7;
  padding: 14px 17px;
}
.standings td:last-child,
.standings th:last-child {
  text-align: right;
}
.standings td:last-child {
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}
.standings td:nth-child(2) {
  white-space: nowrap;
}
.standings .portrait {
  width: 33px;
  height: 33px;
  vertical-align: middle;
  margin-right: 12px;
  box-shadow: none;
  border: 0;
}
.winner td {
  background: linear-gradient(#75569160, #56436750);
  border-top: 1px solid #b697d8;
  border-bottom: 1px solid #b697d8;
}
.winner td:first-child {
  border-left: 1px solid #b697d8;
  border-radius: 5px 0 0 5px;
}
.winner td:last-child {
  border-right: 1px solid #b697d8;
  border-radius: 0 5px 5px 0;
}
.place-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #55525d;
  color: #ebe7f0;
  width: 34px;
  height: 32px;
  font-size: 24px;
}
.place-1 {
  color: #e6cc87;
  border: 1px solid #b39c62;
  background: #66533480;
}
.place-3 {
  background: #735246;
  color: #e9c5b2;
}
.sum-row td {
  font-size: 14px;
  color: #bcb3c7;
  border: 0;
  padding: 14px 17px;
}
.sum-row td:last-child {
  font-size: 21px;
}
.rank-panel {
  border: 1px solid #59515f;
  background: linear-gradient(135deg, #1c1c24, #11151a);
  border-radius: 8px;
  text-align: center;
  padding: 20px 16px;
}
.rank-panel p {
  font-size: 14px;
  margin-bottom: 5px;
}
.rank-panel small {
  font-size: 12px;
  color: #bcb0c7;
}
.rank-emblem {
  position: relative;
  max-width: 215px;
  aspect-ratio: 1;
  margin: 10px auto;
}
.rank-emblem svg {
  width: 100%;
  height: 100%;
}
.rank-emblem strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 33px;
  font-weight: 400;
  text-shadow: 0 4px 8px #000;
}
.rank-points {
  border-top: 1px solid #63566c;
  padding-top: 20px;
  font-size: 14px;
}
.rank-points strong {
  display: block;
  color: #dec3f3;
  font-size: 25px;
  font-weight: 400;
  margin: 8px;
}
.settlement {
  padding: 16px 5px;
  font-size: 13px;
}
.settlement strong {
  color: #c9aedf;
  font-weight: 400;
}
.settlement small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 7px;
}
.result-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
}
.result-actions button {
  width: 210px;
}
.stats-mode {
  position: absolute !important;
  right: 38px;
  top: 28px;
}
.stats-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  margin-top: 26px;
}
.stats-layout > aside > .segmented {
  display: flex;
  margin-bottom: 20px;
}
.stats-layout > aside > .segmented button {
  min-width: 0;
  flex: 1;
}
.stats-layout .rank-panel {
  padding: 18px 10px;
}
.stats-layout .rank-emblem strong {
  font-size: 28px;
}
.stats-main {
  min-width: 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat {
  padding: 18px 8px;
  text-align: center;
  border: 1px solid #524957;
  border-radius: 7px;
  background: #161a20b0;
}
.stat span {
  font-size: 13px;
}
.stat strong {
  display: block;
  margin-top: 12px;
  font-size: 29px;
  font-weight: 400;
  color: #e2d9ce;
  white-space: nowrap;
}
.history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 195px;
  gap: 15px;
}
.history {
  padding: 0;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}
.history h3 {
  font-size: 14px;
  padding: 14px;
  margin: 0;
  border-bottom: 1px solid #49434f;
}
.history table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.history td {
  padding: 8px 10px;
}
.history td button {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 25px;
}
.history td .icon {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}
.distribution {
  padding: 15px 12px;
}
.distribution h3 {
  font-size: 13px;
  margin: 0 0 20px;
}
.distribution > div {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 17px 0;
  font-size: 12px;
}
.distribution i {
  flex: 1;
  height: 24px;
  display: block;
  border: 1px solid #4e465a;
  background: linear-gradient(90deg, #9e7fbf var(--bar), #292936 var(--bar));
  border-radius: 3px;
}
.distribution small {
  width: 31px;
  font-size: 11px;
}
.stats-note {
  text-align: center;
  margin: 22px 0 0;
}
.empty-state {
  padding: 60px 20px;
  color: #aaa0b5;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}
.rule-search {
  position: absolute !important;
  right: 38px;
  top: 28px;
  width: 260px;
}
.rule-search input {
  width: 100%;
  padding-right: 40px;
}
.rule-search > .icon {
  position: absolute;
  right: 12px;
  top: 8px;
  color: #bbb0c4;
}
.rules-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.rules-layout > nav {
  border: 1px solid #4f4657;
  border-radius: 8px;
  overflow: hidden;
  align-self: start;
}
.rules-layout > nav button {
  width: 100%;
  min-height: 75px;
  border: 0;
  border-bottom: 1px solid #4f4657;
  border-radius: 0;
  justify-content: flex-start;
  background: #181b22;
}
.rules-layout > nav button.active {
  background: linear-gradient(130deg, #6b5181, #483954);
  box-shadow: inset 0 0 7px #ac8ac455;
}
.rule-content {
  min-height: 380px;
  padding: 24px;
  overflow: hidden;
}
.rule-content h2 {
  font-size: 25px;
}
.rule-content h3 {
  margin-top: 18px;
  font-size: 17px;
}
.rule-content p {
  font-size: 13px;
  color: #c5bdce;
  max-width: 90%;
  line-height: 1.75;
}
.rules-diagram {
  float: right;
  width: 42%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 30px 0 15px 18px;
  gap: 1px;
}
.rules-diagram .tile.mini {
  width: 29px;
  height: 42px;
}
.rules-diagram > span:not(.tile) {
  width: 100%;
  text-align: center;
  color: #b892dc;
  font-size: 52px;
  line-height: 1.3;
}
.rules-bottom {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.rules-bottom button {
  flex: 1;
  text-align: left;
  justify-content: flex-start;
  padding: 15px;
  min-height: 85px;
}
.rules-bottom .icon {
  width: 35px;
  height: 35px;
  color: #bda4d3;
}
.rules-bottom small {
  display: block;
  font-size: 10px;
  color: #b7adbf;
  margin-top: 6px;
}
.yaku-list {
  font-size: 13px;
}
.yaku-list dt {
  color: #dfc6f4;
  margin-top: 12px;
}
.yaku-list dd {
  margin: 3px 0;
  color: #beb5c9;
}
.search-match {
  background: #775c9180;
  outline: 1px solid #b091c8;
}
.detail-page {
  width: min(1280px, 96vw);
  max-height: 94dvh;
  overflow: auto;
  padding: 28px;
  background:
    radial-gradient(ellipse at 65% 0, #34303970, transparent), #13171d;
  border: 1px solid #887690;
  border-radius: 4px;
}
.detail-page .page-title small {
  margin-left: auto;
  font-size: 11px;
  color: #ada1b8;
}
.detail-layout {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 280px;
  gap: 18px;
}
.detail-layout > nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.detail-layout > nav h3 {
  font-size: 14px;
}
.detail-layout > nav button {
  justify-content: space-between;
  min-height: 60px;
}
.detail-layout > nav button small {
  font-size: 11px;
  color: #c9bed3;
}
.detail-layout > nav #close-dialog {
  margin-top: auto;
  min-height: 42px;
}
.detail-records {
  min-width: 0;
}
.detail-records > .card {
  margin-bottom: 12px;
}
.score-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px;
  background: linear-gradient(90deg, #44354f, #211d27);
  border-radius: 5px;
  margin-bottom: 10px;
}
.score-title strong {
  font-weight: 500;
}
.score-title span {
  white-space: nowrap;
  color: #e9dcc9;
}
.yaku-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 8px;
  border-bottom: 1px solid #48414d;
  font-size: 13px;
}
.round-results {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.round-results .tile.mini {
  width: 29px;
  height: 42px;
}
.point-movements h3 {
  padding: 10px 0;
  border-bottom: 1px solid #544b5d;
}
.point-movements > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  border-bottom: 1px solid #4a4253;
  font-size: 13px;
}
.point-movements strong {
  font-size: 23px;
  font-weight: 400;
}
.action-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Overlay states and personal settings. */
.overlay {
  position: fixed;
  inset: 0;
  background: #080910bd;
  backdrop-filter: blur(5px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dialog-card {
  width: min(630px, 90vw);
  max-height: 88dvh;
  overflow: auto;
  border: 1px solid #786980;
  border-radius: 15px;
  padding: 32px;
  background:
    radial-gradient(ellipse at top right, #38303e40, transparent), #1b1b23;
  box-shadow: 0 20px 60px #0008;
}
.dialog-card h2 {
  font-size: 25px;
}
.dialog-card p {
  font-size: 14px;
}
.dialog-card .card {
  margin: 14px 0;
}
.dialog-card .toolbar input {
  flex: 1;
}
.error-card {
  text-align: center;
}
.error-card label {
  display: block;
  text-align: left;
  margin: 20px 0 7px;
  font-size: 13px;
}
.error-card .toolbar {
  margin-bottom: 18px;
}
.error-card #error-back {
  width: 100%;
}
.reconnect-card {
  text-align: center;
  max-width: 430px;
  padding: 35px;
}
.reconnect-card .large-icon .icon {
  width: 44px;
  height: 44px;
}
.reconnect-card h2 {
  font-weight: 600;
}
.reconnect-card .primary {
  width: 220px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px dotted #c7b4d8;
  border-radius: 50%;
  animation: spin 1.4s linear infinite;
  margin: 25px auto;
}
.drawer-shade {
  position: fixed;
  inset: 0;
  background: #07070d80;
  z-index: 39;
}
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  z-index: 40;
  background: linear-gradient(110deg, #22212a, #161820);
  border-left: 1px solid #65566e;
  padding: 22px;
  overflow-y: auto;
  box-shadow: -15px 0 50px #0006;
}
.drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.drawer header h2 {
  font-size: 19px;
  margin: 0;
}
.drawer h3 {
  font-size: 14px;
  color: #c9bfd3;
  margin: 22px 0 10px;
}
.drawer-lobby {
  width: 100%;
  justify-content: flex-start;
  min-height: 48px;
}
.drawer-lobby .icon:last-child {
  margin-left: auto;
  transform: rotate(-90deg);
  width: 15px;
}
.preference-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid #51475b70;
}
.preference-row label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
}
.preference-row .icon {
  width: 18px;
  height: 18px;
}
.preference-row select {
  font-size: 12px;
  min-height: 30px;
  padding: 3px 8px;
}
.preference-row input[type="range"] {
  width: 80px;
}
.preference-row output {
  width: 35px;
  font-size: 11px;
}
.inset {
  padding-left: 26px;
  margin: 9px 0 15px;
  font-size: 11px;
}
.switch {
  appearance: none;
  width: 47px;
  min-height: 23px;
  height: 23px;
  border-radius: 7px;
  position: relative;
  background: #34303b;
  cursor: pointer;
  padding: 0;
  border-color: #645773;
}
.switch:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  background: #91859e;
  border-radius: 3px;
  transition: transform 0.2s;
}
.switch:checked {
  background: #9b7cc5;
}
.switch:checked:before {
  transform: translateX(24px);
  background: #e7d7f7;
}
.drawer > .help {
  margin-top: 17px;
  font-size: 11px;
}
.drawer #logout {
  margin-top: 20px;
  width: 100%;
}
.legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #b9a6c9;
}
.legal-links button {
  background: transparent;
  border-color: transparent;
  padding: 8px;
  font-size: 12px;
  color: inherit;
}
.drawer .legal-links {
  border-top: 1px solid #51435e;
  margin-top: 28px;
  padding-top: 15px;
  justify-content: space-between;
}
#toast {
  position: fixed;
  right: 30px;
  top: 25px;
  max-width: 420px;
  z-index: 110;
  padding: 17px 24px;
  border: 1px solid #a187b4;
  border-radius: 8px;
  background: #26222feb;
  color: #e5d8f0;
  box-shadow: 0 8px 25px #0006;
  font-size: 13px;
  line-height: 1.7;
}
#reconnecting {
  z-index: 70;
}
.loading-scene {
  z-index: 90;
  background:
    radial-gradient(ellipse at 45% 45%, #32243e40, transparent 65%), #090911;
}
.loading-scene:before,
.loading-scene:after {
  content: "";
  position: absolute;
  width: 85vw;
  height: 30vh;
  border-radius: 50%;
  border-bottom: 3px solid #664d7870;
  transform: rotate(-9deg);
  box-shadow: 0 8px 17px #8a5db928;
  filter: blur(1px);
  pointer-events: none;
}
.loading-scene:after {
  width: 65vw;
  height: 35vh;
  transform: rotate(12deg);
  top: 22%;
  opacity: 0.5;
}
.splash {
  text-align: center;
  position: relative;
  z-index: 1;
}
.splash h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: 7px;
  font-weight: 400;
  margin: 8px 0 15px;
}
.splash p {
  font-size: 16px;
  letter-spacing: 1px;
}
.load-art {
  width: min(610px, 75vw);
  height: auto;
  filter: drop-shadow(0 16px 20px #0008);
}
.load-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 235px;
  height: 3px;
  background: #65606e80;
  margin: 47px auto 23px;
}
.load-track i {
  width: 16px;
  height: 16px;
  background: #676270;
  border-radius: 50%;
  animation: load-dot 2s infinite;
}
.load-track i:nth-child(2) {
  animation-delay: 0.45s;
}
.load-track i:nth-child(3) {
  animation-delay: 0.9s;
}
.login-body {
  overflow: auto;
}
.login-scene {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(ellipse at 55% 0, #43344e60, transparent 65%), #111118;
}
.login-card {
  z-index: 1;
  width: min(700px, 80vw);
  min-height: 430px;
  padding: 48px 48px 65px;
  border: 1px solid #a393ad;
  border-radius: 16px;
  background: linear-gradient(130deg, #15141bec, #101218ed);
  box-shadow: 0 8px 12px #0006;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-card h1 {
  font-size: 40px;
  letter-spacing: 3px;
  font-weight: 400;
  margin: 0 0 12px;
}
.login-card > p {
  font-size: 18px;
  margin: 36px 0;
}
.login-card .primary {
  width: 100%;
  font-size: 24px;
  min-height: 72px;
  letter-spacing: 1px;
}
.login-card .primary .icon {
  width: 35px;
  height: 35px;
}
.login-scene > .legal-links {
  margin-top: 23px;
  z-index: 1;
  color: #b8adbf;
}
.login-scene > .legal-links button {
  font-size: 14px;
}
#login-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#login-art .corner-art {
  width: 280px;
  height: 380px;
  opacity: 0.55;
}
#login-art:before,
#login-art:after {
  content: "";
  position: absolute;
  width: 110px;
  height: 280px;
  border: 1px solid #9e78b838;
  border-radius: 0 0 70px 70px;
  top: -10px;
  right: 5%;
  box-shadow:
    13px 0 0 #9975b10b,
    25px 0 0 #9975b10b,
    37px 0 0 #9975b10b;
}
#login-art:after {
  left: 2%;
  right: auto;
  top: auto;
  bottom: -20px;
  transform: rotate(180deg);
}
#orientation {
  display: none;
  z-index: 120;
  background:
    radial-gradient(ellipse at 50% 45%, #30223965, transparent 60%), #111118;
}
.orientation-scene .splash {
  max-width: 85vw;
}
.orientation-scene h2 {
  font-size: 26px;
  letter-spacing: 2px;
  margin: 35px 0 15px;
}
.orientation-scene p {
  font-size: 15px;
}
.rotate-phone {
  width: 185px;
  height: 105px;
  border: 6px solid #c5a5e2;
  border-radius: 18px;
  margin: 0 auto 50px;
  box-shadow:
    0 0 30px #85549e40,
    inset 0 0 0 8px #35263f;
  position: relative;
}
.rotate-phone:before {
  content: "";
  position: absolute;
  left: 9px;
  top: 35px;
  height: 24px;
  width: 3px;
  background: #9273a6;
  border-radius: 4px;
}
.rotate-phone span {
  position: absolute;
  right: -67px;
  top: -58px;
  font-size: 100px;
  color: #d1b8e6;
  transform: rotate(-15deg);
}
.unlock {
  border: 1px solid #70558060;
  border-radius: 30px;
  padding: 16px 25px;
  margin: 25px auto 0;
  display: inline-block;
  color: #c4b2d2;
  font-size: 14px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes load-dot {
  0%,
  60%,
  100% {
    background: #676270;
    box-shadow: none;
  }
  20% {
    background: #b98ee0;
    box-shadow: 0 0 16px #ae80d5;
  }
}
@media (min-width: 1600px) {
  :root {
    --sidebar: 250px;
  }
  .page {
    max-width: 1500px;
    margin: auto;
  }
  .table-layout.dock-open {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 182px;
  }
  .page {
    padding: 23px 25px;
  }
  .side-brand {
    font-size: 21px;
  }
  .side-brand span {
    font-size: 16px;
  }
  .sidebar nav {
    padding: 12px 8px;
  }
  .sidebar nav button {
    padding: 7px 12px;
    font-size: 13px;
    min-height: 40px;
    height: 43px;
  }
  .side-profile {
    margin: 0 20px 20px;
    margin-top: auto;
  }
  .profile-banner .verified {
    margin-right: 0;
  }
  .profile-banner .portrait {
    width: 74px;
    height: 74px;
  }
  .profile-banner {
    min-height: 104px;
  }
  .lobby-heading {
    font-size: 25px;
    margin: 20px 0;
  }
  .lobby-cards {
    gap: 25px;
  }
  .mode-copy {
    padding: 18px 21px;
  }
  .mode-card h2 {
    font-size: 26px;
  }
  .mode-card p {
    font-size: 12px;
  }
  .mode-card .primary {
    font-size: 17px;
    min-height: 46px;
  }
  .setting-label {
    flex-basis: 175px;
  }
  .setting-row {
    gap: 12px;
  }
  .preset-bar {
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
  }
  .preset-bar button {
    padding: 4px 9px;
    min-width: 60px;
  }
  .jump-buttons button {
    min-width: 48px;
  }
  .invite-row {
    gap: 8px;
  }
  .invite-row > button {
    padding: 7px 10px;
  }
  .room-code {
    right: 25px;
  }
  .result-grid {
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 16px;
    margin: 10px 0 18px;
  }
  .standings td {
    padding: 16px 12px;
    font-size: 15px;
  }
  .standings td:last-child {
    font-size: 23px;
  }
  .rank-emblem strong {
    font-size: 27px;
  }
  .stats-layout {
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 15px;
  }
  .history-grid {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
  .stats {
    gap: 8px;
  }
  .stat strong {
    font-size: 24px;
  }
  .stats-layout .rank-emblem strong {
    font-size: 23px;
  }
  .rules-layout {
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 14px;
  }
  .rule-content {
    padding: 20px;
  }
  .rule-search {
    right: 25px;
    width: 220px;
  }
  .rules-diagram {
    width: 44%;
  }
  .rules-diagram .tile.mini {
    width: 23px;
    height: 34px;
  }
  .table-layout.dock-open {
    grid-template-columns: minmax(0, 1fr) 265px;
  }
  .table-layout {
    grid-template-columns: minmax(0, 1fr) 108px;
  }
  .detail-layout {
    grid-template-columns: 120px minmax(0, 1fr) 225px;
  }
  .detail-page {
    padding: 20px;
  }
  .score-title {
    font-size: 14px;
  }
  .point-movements strong {
    font-size: 20px;
  }
}
@media (max-height: 650px) {
  :root {
    --sidebar: 164px;
    --header: 44px;
  }
  body {
    font-size: 13px;
  }
  .sidebar .side-brand {
    padding: 17px 7px 10px;
    font-size: 20px;
  }
  .sidebar .side-brand span {
    font-size: 14px;
  }
  .sidebar nav {
    padding: 8px;
  }
  .sidebar nav button {
    height: 34px;
    min-height: 34px;
    margin: 0 0 5px;
    font-size: 12px;
    gap: 10px;
  }
  .sidebar nav .icon {
    width: 18px;
    height: 18px;
  }
  .nav-divider {
    margin: 10px 6px;
  }
  .side-profile .portrait {
    width: 45px;
    height: 45px;
    margin: 0;
  }
  .side-profile {
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12px;
  }
  .side-profile small,
  .wallet {
    font-size: 10px;
  }
  .sidebar .corner-art {
    width: 160px;
    height: 200px;
  }
  .page {
    padding: 18px 24px;
  }
  .page-title {
    min-height: 35px;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  .page-title h1 {
    font-size: 23px;
  }
  .profile-banner {
    min-height: 79px;
    padding-bottom: 11px;
    gap: 15px;
  }
  .profile-banner .portrait {
    width: 63px;
    height: 63px;
  }
  .profile-banner h2 {
    font-size: 26px;
    margin: 2px 0;
  }
  .profile-banner small {
    font-size: 10px;
  }
  .verified {
    font-size: 10px;
    padding: 5px 9px;
  }
  .lobby-heading {
    margin: 12px 0 13px;
    font-size: 23px;
  }
  .lobby-cards {
    height: 60dvh;
    max-height: 330px;
    gap: 24px;
  }
  .mode-copy {
    padding: 12px 20px;
  }
  .mode-card h2 {
    font-size: 24px;
    margin-bottom: 5px;
  }
  .mode-card p {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .mode-card .primary {
    min-height: 39px;
    font-size: 16px;
  }
  .lobby-note {
    font-size: 10px;
    margin-top: 10px;
  }
  .friend-cards {
    height: 60dvh;
  }
  .friend-cards .mode-card {
    padding: 20px 25px;
  }
  .friend-cards .large-icon {
    margin-bottom: 10px;
  }
  .friend-cards .large-icon .icon {
    width: 48px;
    height: 48px;
  }
  .friend-cards .mode-card h2 {
    font-size: 21px;
  }
  .friends-page .intro {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .search-rank {
    top: 16px;
    right: 24px;
    font-size: 12px;
  }
  .search-rank small {
    font-size: 9px;
  }
  .search-content {
    gap: 7px;
  }
  .search-content h2 {
    font-size: 21px;
  }
  .search-content .segmented button {
    min-height: 27px;
    font-size: 12px;
    padding: 4px 15px;
  }
  .search-orbit {
    width: 130px;
    height: 130px;
    margin: 3px 0;
  }
  .search-orbit > .tile-face {
    width: 44px;
    height: 62px;
  }
  .queue-clock {
    font-size: 30px;
    margin-top: -4px;
  }
  .search-content > .help {
    font-size: 10px;
  }
  .search-content > .badge {
    font-size: 10px;
    padding: 3px 14px;
  }
  .search-actions button {
    min-height: 33px;
    font-size: 12px;
  }
  .form-page {
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .form-page .page-title {
    margin-bottom: 8px;
  }
  .preset-bar {
    margin-bottom: 8px;
    padding: 5px 10px;
  }
  .preset-bar .segmented button,
  .jump-buttons button {
    min-height: 26px;
    font-size: 11px;
  }
  .settings-section {
    padding: 8px 13px;
    margin-bottom: 8px;
  }
  .settings-section h2 {
    font-size: 13px;
    margin-bottom: 4px;
    padding-bottom: 5px;
  }
  .setting-row {
    min-height: 33px;
    gap: 12px;
  }
  .setting-label {
    font-size: 12px;
    flex-basis: 165px;
  }
  .choices button {
    font-size: 12px;
    min-height: 28px;
    padding: 3px 8px;
  }
  .required {
    font-size: 9px;
    line-height: 15px;
  }
  .settings-section > .help {
    font-size: 10px;
  }
  .form-footer #form-status {
    font-size: 10px;
  }
  .form-footer button {
    min-height: 35px;
    font-size: 14px;
  }
  .form-scroll {
    padding-right: 12px;
  }
  .invite-section {
    min-height: 50px;
  }
  .room-code {
    top: 14px;
    gap: 15px;
  }
  .room-code strong {
    font-size: 24px;
  }
  .room-code small {
    font-size: 9px;
  }
  .room-code .badge {
    font-size: 10px;
    padding: 5px 10px;
  }
  .room-page .page-title {
    margin-bottom: 12px;
  }
  .player-seat {
    min-height: 54px;
    padding: 6px 12px;
    gap: 11px;
  }
  .player-seat .portrait {
    width: 37px;
    height: 37px;
  }
  .player-seat strong {
    font-size: 13px;
  }
  .player-seat .seat-status {
    font-size: 11px;
  }
  .host-tag {
    font-size: 10px;
    padding: 1px 7px;
  }
  .player-seat button,
  .cpu-level {
    min-height: 28px;
    font-size: 11px;
  }
  .room-notice {
    font-size: 10px;
    margin: 8px 0 12px;
  }
  .invite-card {
    padding: 10px 13px;
    margin-bottom: 12px;
  }
  .invite-card h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .invite-row button {
    min-height: 32px;
    font-size: 11px;
  }
  .invite-row .channel-picker #channel-toggle {
    min-height: 32px;
    font-size: 11px;
  }
  .room-agreement {
    font-size: 11px;
  }
  .room-agreement small {
    font-size: 10px;
  }
  .room-footer {
    margin-top: 14px;
    gap: 10px;
  }
  .room-footer button {
    font-size: 12px;
    min-height: 33px;
  }
  .room-footer #start {
    min-width: 130px;
  }
  .app-header {
    padding: 0 16px;
    gap: 12px;
  }
  .app-header .brand {
    font-size: 20px;
  }
  .app-header .brand span {
    font-size: 14px;
  }
  .header-tag {
    font-size: 9px;
  }
  .table-name {
    font-size: 11px;
  }
  .table-layout {
    grid-template-columns: minmax(0, 1fr) 98px;
  }
  .table-layout.dock-open {
    grid-template-columns: minmax(0, 1fr) 245px;
  }
  .rail-default {
    padding: 12px 10px 95px;
  }
  .rail-menu {
    margin-bottom: 15px;
  }
  .rail-menu button {
    padding: 12px 2px;
  }
  .hint-button {
    min-height: 53px;
    font-size: 15px;
  }
  .hint-button small {
    font-size: 10px;
  }
  .timer-ring {
    width: 72px;
    height: 72px;
    bottom: 14px;
    border-width: 3px;
  }
  .timer-ring > span {
    font-size: 24px;
  }
  .game-actions button {
    min-height: 34px;
    font-size: 14px;
  }
  .game-actions {
    gap: 6px;
  }
  .hand {
    bottom: 15px;
    left: 4%;
    gap: 1px;
  }
  .tile.drawn {
    margin-left: 5px;
  }
  .table-area > .corner-art {
    width: 130px;
    height: 180px;
  }
  .opponent strong {
    font-size: 14px;
  }
  .opponent span:not(.portrait) {
    font-size: 10px;
  }
  .opponent small {
    font-size: 8px;
  }
  .opponent > div {
    padding: 4px 6px;
  }
  .dock-open .rail-default {
    height: 51px;
    padding: 4px 10px;
  }
  .dock-open .hint-button {
    min-height: 42px;
  }
  .game-dock {
    padding: 0 12px 68px;
  }
  .game-dock > header {
    padding-bottom: 5px;
  }
  .game-dock h3 {
    font-size: 14px;
  }
  .chat-message {
    margin: 12px 0;
  }
  .chat-message p {
    font-size: 11px;
    padding: 5px 8px;
  }
  .chat-message .portrait {
    width: 28px;
    height: 28px;
  }
  .chat-form input {
    min-height: 31px;
  }
  .chat-form button {
    min-height: 31px;
    font-size: 12px;
  }
  .dock-open .timer-ring {
    width: 51px;
    height: 51px;
    bottom: 9px;
  }
  .dock-open .timer-ring > span {
    font-size: 18px;
  }
  .timer-ring small {
    font-size: 10px;
  }
  .hint-card h4 {
    margin: 8px 0 4px;
    font-size: 11px;
  }
  .recommended {
    padding: 6px;
    gap: 5px;
  }
  .recommended .tile {
    width: 42px;
    height: 60px;
  }
  .effective .tile.mini {
    width: 23px;
    height: 33px;
  }
  .hint-note {
    padding: 6px;
  }
  .hint-card .help {
    font-size: 10px;
  }
  .result-grid {
    grid-template-columns: minmax(0, 1fr) 185px;
    gap: 18px;
    margin-bottom: 14px;
  }
  .standings th {
    padding: 10px;
    font-size: 11px;
  }
  .standings td {
    padding: 10px;
    font-size: 13px;
  }
  .standings td:last-child {
    font-size: 21px;
  }
  .standings .portrait {
    width: 25px;
    height: 25px;
  }
  .place-medal {
    width: 28px;
    height: 27px;
    font-size: 20px;
  }
  .rank-panel {
    padding: 13px 10px;
  }
  .rank-panel p {
    font-size: 12px;
  }
  .rank-emblem {
    max-width: 150px;
    margin: 4px auto;
  }
  .rank-emblem strong {
    font-size: 25px;
  }
  .rank-points {
    padding-top: 10px;
    font-size: 12px;
  }
  .rank-points strong {
    font-size: 20px;
    margin: 6px;
  }
  .rank-points small {
    font-size: 10px;
  }
  .settlement {
    padding: 10px 2px;
    font-size: 11px;
  }
  .settlement small {
    font-size: 10px;
  }
  .result-actions button {
    min-height: 35px;
    font-size: 13px;
  }
  .result-meta {
    top: 18px;
    font-size: 10px;
  }
  .stats-layout {
    margin-top: 14px;
    grid-template-columns: 165px minmax(0, 1fr);
  }
  .stats-mode {
    top: 16px;
    right: 24px;
  }
  .stats-mode button {
    min-height: 27px;
    font-size: 12px;
  }
  .stat {
    padding: 13px 5px;
  }
  .stat strong {
    font-size: 22px;
    margin-top: 8px;
  }
  .stat span {
    font-size: 11px;
  }
  .history-grid {
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 10px;
  }
  .history {
    max-height: 250px;
  }
  .history td {
    font-size: 11px;
    padding: 5px 8px;
  }
  .stats-note {
    font-size: 10px;
    margin: 14px 0;
  }
  .distribution > div {
    gap: 5px;
    margin: 14px 0;
  }
  .distribution h3 {
    font-size: 11px;
  }
  .distribution small {
    font-size: 10px;
  }
  .rule-search {
    top: 14px;
  }
  .rule-search input {
    min-height: 33px;
    font-size: 12px;
  }
  .rules-layout {
    margin-top: 16px;
    grid-template-columns: 125px minmax(0, 1fr);
  }
  .rules-layout > nav button {
    min-height: 58px;
    padding: 10px;
    font-size: 12px;
  }
  .rule-content {
    padding: 16px;
    min-height: 300px;
  }
  .rule-content h2 {
    font-size: 21px;
  }
  .rule-content h3 {
    font-size: 14px;
    margin-top: 14px;
  }
  .rule-content p {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .rules-bottom button {
    min-height: 65px;
    font-size: 12px;
    padding: 10px;
  }
  .rules-bottom small {
    font-size: 9px;
  }
  .drawer {
    width: 340px;
    padding: 16px;
  }
  .drawer header {
    margin-bottom: 12px;
  }
  .preference-row {
    min-height: 44px;
  }
  .drawer h3 {
    margin: 14px 0 5px;
  }
  .inset {
    font-size: 10px;
    margin: 6px 0 10px;
  }
  .drawer .legal-links {
    margin-top: 17px;
    padding-top: 8px;
  }
  .drawer #logout {
    margin-top: 10px;
  }
  .load-art {
    width: min(440px, 60vw);
  }
  .splash h1 {
    font-size: 39px;
    letter-spacing: 5px;
  }
  .load-track {
    margin: 30px auto 20px;
    width: 180px;
  }
  .load-track i {
    width: 13px;
    height: 13px;
  }
  .splash p {
    font-size: 13px;
  }
  .login-card {
    min-height: 320px;
    max-width: 540px;
    padding: 30px 38px 45px;
  }
  .login-card h1 {
    font-size: 30px;
  }
  .login-card > p {
    font-size: 15px;
    margin: 27px 0;
  }
  .login-card .primary {
    font-size: 20px;
    min-height: 57px;
  }
  .login-card .primary .icon {
    width: 29px;
    height: 29px;
  }
  .login-scene > .legal-links {
    margin-top: 15px;
  }
  .login-scene > .legal-links button {
    font-size: 12px;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  :root {
    --sidebar: 142px;
    --header: 38px;
  }
  .sidebar .side-brand {
    font-size: 17px;
    padding-top: 10px;
  }
  .sidebar .side-brand span {
    font-size: 12px;
  }
  .sidebar nav button {
    height: 29px;
    min-height: 29px;
    font-size: 11px;
    margin-bottom: 2px;
  }
  .sidebar nav {
    padding: 5px;
  }
  .nav-divider {
    margin: 7px;
  }
  .sidebar .side-profile {
    margin: 5px 15px 10px;
    gap: 2px;
  }
  .side-profile .portrait {
    display: none;
  }
  .side-profile .wallet {
    font-size: 9px;
  }
  .sidebar .corner-art {
    height: 150px;
    opacity: 0.2;
  }
  .page {
    padding: 12px 18px;
  }
  .profile-banner {
    min-height: 67px;
    padding-bottom: 8px;
    gap: 12px;
  }
  .profile-banner .portrait {
    width: 52px;
    height: 52px;
  }
  .profile-banner h2 {
    font-size: 23px;
  }
  .profile-banner .verified {
    font-size: 9px;
    padding: 4px 7px;
  }
  .profile-banner .verified .icon {
    width: 14px;
    height: 14px;
  }
  .lobby-heading {
    font-size: 19px;
    margin: 9px 0;
  }
  .lobby-cards {
    height: 62dvh;
    gap: 22px;
  }
  .mode-copy {
    padding: 9px 17px;
  }
  .mode-card h2 {
    font-size: 20px;
    margin: 0 0 3px;
  }
  .mode-card p {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .mode-card .primary {
    min-height: 32px;
    font-size: 13px;
  }
  .lobby-note {
    font-size: 9px;
    margin-top: 8px;
  }
  .friend-cards {
    height: 61dvh;
    gap: 20px;
  }
  .friend-cards .mode-card {
    padding: 16px 22px;
  }
  .friend-cards .mode-card h2 {
    font-size: 18px;
  }
  .friend-cards .mode-card input {
    min-height: 33px;
    margin-bottom: 10px;
  }
  .friend-cards .large-icon .icon {
    width: 36px;
    height: 36px;
  }
  .friends-page .intro {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .page-title h1 {
    font-size: 20px;
  }
  .page-title {
    min-height: 29px;
    padding-bottom: 5px;
    margin-bottom: 9px;
  }
  .page-title .icon-button {
    min-height: 28px;
    width: 28px;
    padding: 4px;
  }
  .search-content {
    gap: 5px;
  }
  .search-content h2 {
    font-size: 17px;
    margin: 2px 0;
  }
  .search-orbit {
    width: 87px;
    height: 87px;
    margin: 1px 0;
  }
  .search-orbit:before {
    border-width: 3px;
  }
  .search-orbit:after {
    inset: 8px;
    border-width: 2px;
  }
  .search-orbit > .tile-face {
    width: 32px;
    height: 46px;
  }
  .search-content > .segmented {
    width: 260px;
  }
  .search-content > .segmented button {
    min-height: 24px;
  }
  .queue-clock {
    font-size: 24px;
  }
  .search-content > .help {
    font-size: 9px;
    line-height: 1.4;
  }
  .search-rank {
    top: 10px;
    right: 18px;
  }
  .search-rank > .icon {
    width: 32px;
    height: 32px;
    padding: 7px;
  }
  .search-rank small {
    font-size: 8px;
  }
  .search-actions button {
    min-height: 28px;
  }
  .form-page .page-title {
    margin-bottom: 5px;
  }
  .preset-bar {
    margin-bottom: 6px;
    padding: 4px 8px;
  }
  .preset-bar > span {
    font-size: 11px;
  }
  .setting-label {
    flex-basis: 143px;
    font-size: 11px;
  }
  .choices button {
    font-size: 11px;
    min-height: 27px;
    min-width: 55px;
  }
  .settings-section h2 {
    font-size: 12px;
  }
  .setting-row {
    min-height: 30px;
  }
  .settings-section {
    padding: 7px 10px;
  }
  .preset-bar button {
    font-size: 10px;
  }
  .form-footer {
    padding-top: 0;
    gap: 2px;
  }
  .form-footer #form-status {
    font-size: 9px;
  }
  .form-footer button {
    min-height: 31px;
    font-size: 13px;
  }
  .player-seat {
    min-height: 42px;
    padding: 4px 10px;
    gap: 9px;
  }
  .player-seat .portrait {
    width: 31px;
    height: 31px;
  }
  .player-seat strong {
    font-size: 12px;
  }
  .player-seat .seat-status {
    font-size: 10px;
  }
  .room-code {
    top: 8px;
    right: 18px;
  }
  .room-code strong {
    font-size: 21px;
  }
  .room-code small {
    font-size: 8px;
  }
  .room-notice {
    font-size: 9px;
    margin: 6px 0 8px;
  }
  .room-agreement {
    font-size: 10px;
    gap: 2px;
  }
  .room-agreement small {
    font-size: 9px;
  }
  .invite-card {
    padding: 8px 10px;
    margin-bottom: 9px;
  }
  .invite-card h3 {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .invite-row > small {
    font-size: 9px;
  }
  .invite-row button {
    min-height: 28px;
    font-size: 10px;
  }
  .invite-row .channel-picker #channel-toggle {
    min-height: 28px;
    font-size: 10px;
  }
  .room-footer {
    margin-top: 10px;
  }
  .room-footer button {
    min-height: 29px;
    font-size: 10px;
  }
  .room-footer #start {
    min-width: 95px;
  }
  .table-layout {
    grid-template-columns: minmax(0, 1fr) 87px;
  }
  .table-layout.dock-open {
    grid-template-columns: minmax(0, 1fr) 205px;
  }
  .hand .tile {
    --tw: min(4.55cqw, 10cqh, 39px);
  }
  .hand {
    bottom: 12px;
    left: 4%;
    right: 17%;
  }
  .opponent.pos-0 {
    bottom: calc(12px + min(4.55cqw, 10cqh, 39px) * 1.42 + 10px);
  }
  .opponent .portrait {
    width: 31px;
    height: 31px;
  }
  .opponent span:not(.portrait) {
    max-width: 73px;
    font-size: 8px;
  }
  .opponent strong {
    font-size: 12px;
  }
  .opponent small {
    font-size: 8px;
  }
  .opponent {
    gap: 4px;
    max-width: 25%;
  }
  .opponent.pos-2 {
    top: 1%;
  }
  .hidden-hand.pos-2 {
    top: 12%;
  }
  .hidden-hand.pos-1,
  .hidden-hand.pos-3 {
    top: 16%;
  }
  .table-center {
    width: 83px;
    height: 77px;
    top: 44%;
    border-width: 5px;
  }
  .table-center > strong {
    font-size: 17px;
  }
  .table-center > span:not(.score-edge) {
    font-size: 12px;
  }
  .table-center > small {
    font-size: 7px;
  }
  .score-edge {
    font-size: 7px;
  }
  .score-1 {
    right: -10px;
  }
  .score-3 {
    left: -10px;
  }
  .river .tile.mini {
    width: 13px;
    height: 17px;
  }
  .river {
    width: 86px;
    min-height: 55px;
  }
  .river.pos-0 {
    top: calc(44% + 44px);
  }
  .river.pos-2 {
    bottom: calc(56% + 44px);
  }
  .river.pos-1 {
    left: calc(50% + 48px);
  }
  .river.pos-3 {
    right: calc(50% + 48px);
  }
  .game-actions {
    width: 14%;
    right: 1.5%;
    bottom: 12px;
    gap: 5px;
  }
  .game-actions button {
    min-height: 29px;
    font-size: 12px;
  }
  .rail-default {
    padding: 9px 8px 78px;
    gap: 8px;
  }
  .rail-menu {
    margin-bottom: 15px;
  }
  .rail-menu button {
    padding: 9px 1px;
    font-size: 10px;
    gap: 4px;
  }
  .rail-menu .icon {
    width: 15px;
    height: 15px;
  }
  .hint-button {
    min-height: 48px;
    font-size: 13px;
  }
  .timer-ring {
    width: 60px;
    height: 60px;
    bottom: 12px;
  }
  .timer-ring > span {
    font-size: 23px;
  }
  .dora-display {
    left: 2%;
    top: 6%;
  }
  .dora-display .tile.mini {
    width: 12px;
    height: 17px;
  }
  .table-area > .corner-art {
    width: 110px;
    height: 145px;
  }
  .game-dock {
    padding: 0 9px 55px;
  }
  .game-dock h3 {
    font-size: 12px;
  }
  .game-dock .icon-button {
    width: 26px;
    min-height: 26px;
    padding: 4px;
  }
  .dock-open .rail-default {
    height: 42px;
    padding: 4px 9px;
  }
  .dock-open .rail-hint-slot {
    width: 63px;
  }
  .dock-open .hint-button {
    font-size: 11px;
    min-height: 33px;
    gap: 0;
    padding: 2px;
  }
  .dock-open .hint-button small {
    font-size: 8px;
  }
  .dock-open .timer-ring {
    width: 42px;
    height: 42px;
    bottom: 7px;
  }
  .dock-open .timer-ring > span {
    font-size: 16px;
  }
  .dock-open .timer-ring small {
    font-size: 8px;
  }
  .chat-message {
    margin: 9px 0;
    gap: 5px;
  }
  .chat-message > .portrait {
    width: 25px;
    height: 25px;
  }
  .chat-message p {
    font-size: 10px;
  }
  .chat-message small {
    font-size: 9px;
  }
  .chat-message time {
    font-size: 8px;
  }
  .chat-form input {
    font-size: 9px;
    min-height: 28px;
  }
  .chat-form button {
    font-size: 10px;
    min-height: 28px;
    padding: 4px 7px;
  }
  .recommended .tile {
    width: 35px;
    height: 49px;
  }
  .recommended > span {
    font-size: 9px;
  }
  .yaku-pills span {
    font-size: 10px;
    padding: 3px 9px;
  }
  .hint-card .effective .tile.mini {
    width: 21px;
    height: 29px;
  }
  .hint-note {
    font-size: 10px;
  }
  .hint-note small {
    font-size: 8px;
  }
  .result-grid {
    grid-template-columns: minmax(0, 1fr) 155px;
    gap: 12px;
    margin-top: 5px;
    margin-bottom: 6px;
  }
  .standings th {
    font-size: 10px;
    padding: 7px;
  }
  .standings td {
    padding: 7px;
    font-size: 12px;
  }
  .standings td:last-child {
    font-size: 18px;
  }
  .standings .portrait {
    width: 22px;
    height: 22px;
    margin-right: 7px;
  }
  .rank-panel {
    padding: 10px 8px;
  }
  .rank-panel p {
    font-size: 10px;
  }
  .rank-emblem {
    max-width: 116px;
  }
  .rank-emblem strong {
    font-size: 22px;
  }
  .rank-points {
    font-size: 10px;
    padding-top: 7px;
  }
  .rank-points strong {
    font-size: 17px;
    margin: 4px;
  }
  .rank-points small {
    font-size: 9px;
  }
  .settlement {
    padding: 7px 2px;
    font-size: 10px;
  }
  .settlement small {
    font-size: 9px;
    margin-top: 3px;
  }
  .result-meta {
    top: 10px;
    font-size: 8px;
  }
  .result-actions {
    gap: 15px;
  }
  .result-actions button {
    min-height: 29px;
    font-size: 11px;
    width: 160px;
  }
  .stats-layout {
    grid-template-columns: 135px minmax(0, 1fr);
    margin-top: 12px;
    gap: 12px;
  }
  .stats-mode {
    top: 10px;
    right: 18px;
  }
  .stats-mode button {
    min-height: 24px;
    min-width: 70px;
    font-size: 10px;
    padding: 3px 8px;
  }
  .stats-layout > aside > .segmented {
    margin-bottom: 10px;
  }
  .stats-layout > aside > .segmented button {
    min-height: 25px;
    font-size: 11px;
  }
  .stats-layout .rank-panel {
    padding: 10px 5px;
  }
  .stats-layout .rank-emblem strong {
    font-size: 21px;
  }
  .stats {
    gap: 6px;
    margin-bottom: 12px;
  }
  .stat {
    padding: 10px 4px;
  }
  .stat strong {
    font-size: 19px;
    margin-top: 5px;
  }
  .stat span {
    font-size: 10px;
  }
  .history-grid {
    grid-template-columns: minmax(0, 1fr) 123px;
    gap: 10px;
  }
  .history {
    max-height: 178px;
  }
  .history h3 {
    font-size: 11px;
    padding: 9px;
  }
  .history td {
    font-size: 10px;
    padding: 3px 7px;
  }
  .distribution {
    padding: 10px;
  }
  .distribution h3 {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .distribution > div {
    font-size: 10px;
    margin: 10px 0;
    gap: 5px;
  }
  .distribution i {
    height: 18px;
  }
  .distribution small {
    font-size: 9px;
    width: 24px;
  }
  .empty-state {
    font-size: 11px;
    padding: 34px 10px;
  }
  .stats-note {
    font-size: 9px;
    margin-top: 10px;
  }
  .rule-search {
    top: 10px;
    right: 18px;
    width: 180px;
  }
  .rule-search input {
    min-height: 28px;
    font-size: 10px;
  }
  .rule-search .icon {
    top: 5px;
    width: 18px;
    height: 18px;
  }
  .rules-layout {
    margin-top: 10px;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
  }
  .rules-layout > nav button {
    min-height: 45px;
    font-size: 11px;
    padding: 7px;
    gap: 7px;
  }
  .rules-layout > nav .icon {
    width: 18px;
    height: 18px;
  }
  .rule-content {
    padding: 12px;
    min-height: 245px;
  }
  .rule-content h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .rule-content h3 {
    font-size: 12px;
    margin-top: 10px;
  }
  .rule-content p {
    font-size: 10px;
    line-height: 1.6;
    margin-bottom: 5px;
  }
  .rules-diagram {
    margin: 15px 0 10px 10px;
  }
  .rules-diagram .tile.mini {
    width: 21px;
    height: 30px;
  }
  .rules-diagram > span:not(.tile) {
    font-size: 37px;
  }
  .rules-bottom {
    gap: 9px;
    margin-top: 9px;
  }
  .rules-bottom button {
    font-size: 11px;
    min-height: 55px;
    padding: 8px;
  }
  .rules-bottom .icon {
    width: 25px;
    height: 25px;
  }
  .rules-bottom small {
    font-size: 8px;
  }
  .load-art {
    width: 330px;
  }
  .splash h1 {
    font-size: 30px;
    margin: 0 0 10px;
    letter-spacing: 4px;
  }
  .load-track {
    margin: 28px auto 17px;
  }
  .splash p {
    font-size: 11px;
  }
  .login-card {
    min-height: 265px;
    max-width: 490px;
    padding: 28px 32px 40px;
  }
  .login-card h1 {
    font-size: 27px;
  }
  .login-card > p {
    font-size: 13px;
    margin: 20px 0;
  }
  .login-card .primary {
    font-size: 17px;
    min-height: 48px;
  }
  .login-scene > .legal-links {
    margin-top: 8px;
  }
  .detail-layout {
    grid-template-columns: 93px minmax(0, 1fr) 180px;
    gap: 10px;
  }
  .detail-page {
    padding: 15px;
  }
  .detail-page .page-title h2 {
    font-size: 20px;
  }
  .detail-layout > nav button {
    min-height: 42px;
    font-size: 11px;
    padding: 7px;
  }
  .detail-layout > nav button small {
    font-size: 9px;
  }
  .detail-records > .card {
    padding: 11px;
  }
  .score-title {
    font-size: 12px;
    padding: 9px;
  }
  .yaku-row {
    padding: 8px;
    font-size: 11px;
  }
  .round-results {
    margin: 15px 0;
  }
  .round-results .tile.mini {
    width: 22px;
    height: 31px;
  }
  .point-movements {
    padding: 12px;
  }
  .point-movements h3 {
    font-size: 13px;
  }
  .point-movements > div {
    min-height: 51px;
    font-size: 11px;
  }
  .point-movements strong {
    font-size: 18px;
  }
}
@media (orientation: portrait) and (max-width: 1000px) {
  #orientation {
    display: flex;
  }
  .orientation-scene h2 {
    font-size: 22px;
    line-height: 1.6;
  }
  .orientation-scene p {
    font-size: 13px;
  }
  .orientation-scene .corner-art {
    width: 145px;
    height: 200px;
  }
  .rotate-phone {
    width: 150px;
    height: 85px;
  }
  .rotate-phone span {
    font-size: 85px;
    right: -55px;
  }
  .unlock {
    font-size: 11px;
    padding: 13px 18px;
  }
  .login-card {
    width: 88vw;
    min-height: 350px;
    padding: 30px 24px;
  }
  .login-card h1 {
    font-size: 26px;
  }
  .login-card .primary {
    font-size: 16px;
    min-height: 55px;
  }
  .login-card > p {
    font-size: 14px;
  }
  .login-scene .legal-links {
    gap: 5px;
  }
  .login-scene .legal-links button {
    font-size: 11px;
  }
}
body[data-view="result"] #view,
body[data-view="stats"] #view,
body[data-view="rules"] #view {
  margin-left: 0;
}
.page > .corner-art {
  position: absolute !important;
  z-index: 0 !important;
  opacity: 0.55;
}
.page-title h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.distribution-bar {
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 1px solid #5c4e69;
  border-radius: 3px;
}
.hidden-hand.pos-1 {
  left: 81%;
  right: auto;
}
#chat-toggle {
  position: relative;
}
.unread-badge {
  position: absolute;
  right: -2px;
  top: -1px;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  padding: 0 3px;
  background: #9970c1;
  border: 1px solid #c9aaeb;
  font-size: 10px;
  display: grid;
  place-items: center;
}
/* Reference-table presentation: one projected playing surface, readable HUD
   and foreground hand outside the projection. Night Lounge colors stay intact. */
.table-area {
  perspective: 1100px;
  background:
    radial-gradient(ellipse at 50% 35%, #51445e55, transparent 72%),
    repeating-linear-gradient(28deg, #9c8daa08 0 1px, transparent 1px 3px),
    repeating-linear-gradient(118deg, #b7a7c005 0 1px, transparent 1px 4px),
    #282634;
}
.table-area::before,
.table-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.table-area::before {
  background: linear-gradient(90deg, #15121c, #433748 9%, #76617f 10%, #211c2a 12%, #211c2a 88%, #76617f 90%, #433748 91%, #15121c);
  clip-path: polygon(0 0, 12% 0, 2% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 98% 100%, 88% 0);
  opacity: .9;
}
.table-area::after {
  box-shadow: inset 0 0 55px #08091180, inset 0 -2px #a58db64d;
}
.table-plane {
  --table-size: min(21cqh, 18cqw, 168px);
  --river-tile: min(5.1cqh, 3.7cqw, 43px);
  --river-width: calc(var(--river-tile) * 6.3 + 5px);
  --river-height: calc(var(--river-tile) * 3.9 + 9px);
  position: absolute;
  inset: 0 0 18%;
  transform: rotateX(14deg) scale(.98);
  transform-origin: 50% 44%;
  /* Flatten once: no preserve-3d stacking artifacts on mobile WebViews. */
}
.table-plane.long-rivers { --river-tile: min(4.3cqh, 3.4cqw, 37px); }
.table-plane .felt-lines {
  inset: 4% 17% 5%;
  transform: none;
  border: 2px solid #19172188;
  box-shadow: 0 1px #82758b21, inset 0 1px #82758b21;
  background: linear-gradient(43deg, transparent 49.8%, #18152155 50%, transparent 50.2%),
    linear-gradient(-43deg, transparent 49.8%, #18152155 50%, transparent 50.2%);
}
.table-plane .felt-lines::before,
.table-plane .felt-lines::after { display: none; }
.table-area .tile {
  border-radius: 5px 5px 3px 3px;
  border: 1px solid #bdb5a7;
  border-top: 3px solid #fffaef;
  background: linear-gradient(105deg, #fff9ed, #e5ddcc 85%);
  box-shadow: 0 3px 0 #d2c9ba, 0 8px 0 #85728d, 1px 10px 2px #18131ecc, 2px 12px 6px #0006;
}
.table-area .tile-face { padding: 1px; }
.table-area .tile.mini {
  border-radius: 3px;
  border-top-width: 2px;
  box-shadow: 0 2px #d2c9ba, 0 5px #85728d, 1px 6px 2px #15121dcc;
}
.table-area .tile.back {
  --tw: min(3.25cqh, 2.6cqw, 29px);
  height: calc(var(--tw) * 1.65);
  border: 1px solid #302837;
  border-top: 2px solid #fff5e6;
  border-radius: 3px;
  background: linear-gradient(#e9e4d7 0 14%, #b29abb 15% 23%, #92769e 24% 30%, #574161 31%, #473852 92%, #342b40);
  box-shadow: 1px 4px #251e30, 2px 7px 5px #0008;
}
.table-plane .hidden-hand { gap: 1px; }
.table-plane .hidden-hand .tile.back {
  --tw: min(3.25cqh, 2.6cqw, 29px);
  height: calc(var(--tw) * 1.65);
}
.table-plane .hidden-hand.pos-2 { left: auto; right: 18%; top: 1%; transform: none; }
.table-plane .hidden-hand.pos-1 { left: 85%; right: auto; top: 49%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; }
.table-plane .hidden-hand.pos-3 { left: 15%; top: 49%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; }
.table-plane .table-center {
  width: var(--table-size);
  height: var(--table-size);
  top: 51%;
  border: max(5px, 1cqh) solid #37323f;
  border-radius: 8%;
  background: linear-gradient(135deg, #65586e, #302936 32%, #4c4259 70%, #29232f);
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  box-shadow: 0 0 0 2px #89778e, 0 5px #18151f, 3px 8px 8px #0008, inset 0 0 0 2px #61566c;
}
.table-plane .table-center::before {
  content: "";
  position: absolute;
  inset: 19%;
  border: 2px solid #756781;
  border-radius: 4px;
  background: #191720;
  box-shadow: 0 2px #1a1521, inset 0 1px 5px #0009;
}
.table-plane .table-center > * { z-index: 1; }
.table-plane .table-center::after {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 30%;
  height: 4px;
  background: #b99ce0;
  box-shadow: 0 0 8px #b99ce080;
}
.table-plane .table-center > strong { font-size: clamp(14px, 3.1cqh, 27px); }
.table-plane .table-center > span:not(.score-edge) { font-size: clamp(10px, 2.3cqh, 19px); color: #d1bfe6; }
.table-plane .table-center > small { font-size: clamp(6px, 1.15cqh, 10px); }
.table-plane .score-edge { font-size: clamp(7px, 1.55cqh, 13px); color: #c4b1d2; }
.table-plane .score-1 { right: -11px; }
.table-plane .score-3 { left: -11px; }
.table-plane .river {
  width: var(--river-width);
  min-height: var(--river-height);
  height: var(--river-height);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform-origin: center;
}
.river-row { display: flex; gap: 1px; align-items: flex-end; flex-shrink: 0; height: calc(var(--river-tile) * 1.3); }
.table-plane .river .tile.mini {
  --tw: var(--river-tile);
  width: var(--tw);
  height: calc(var(--tw) * 1.3);
}
.table-plane .river.pos-0 { left: calc(50% + (var(--river-width) - var(--table-size)) / 2); top: calc(51% + var(--table-size) / 2 + 9px); transform: translateX(-50%); }
.table-plane .river.pos-2 { left: calc(50% - (var(--river-width) - var(--table-size)) / 2); top: auto; bottom: calc(49% + var(--table-size) / 2 + 9px); transform: translateX(-50%) rotate(180deg); }
.table-plane .river.pos-1 { right: auto; left: calc(50% + var(--table-size) / 2 + var(--river-height) / 2 + 9px); top: calc(51% - (var(--river-width) - var(--table-size)) / 2); transform: translate(-50%, -50%) rotate(-90deg); }
.table-plane .river.pos-3 { right: auto; left: calc(50% - var(--table-size) / 2 - var(--river-height) / 2 - 9px); top: calc(51% + (var(--river-width) - var(--table-size)) / 2); transform: translate(-50%, -50%) rotate(90deg); }
.table-area .melds { --meld-tile: min(4.8cqh, 3.4cqw, 42px); gap: 10px; align-items: flex-end; }
.table-area .melds .tile.mini { --tw: var(--meld-tile); height: calc(var(--tw) * 1.3); }
.table-area .meld { align-items: flex-end; flex-shrink: 0; gap: 1px; padding-top: calc(var(--meld-tile) * .25); }
.table-area .meld:has(.meld-stack) { padding-top: calc(var(--meld-tile) + 3px); }
.table-area .melds .tile.meld-called,
.table-plane .river .tile.riichi { width: calc(var(--tw) * 1.3); height: var(--tw); }
.table-area .meld-called .tile-face,
.table-plane .riichi .tile-face { width: var(--tw); height: calc(var(--tw) * 1.3); flex-shrink: 0; transform: rotate(-90deg); }
.table-area .meld-stack { position: relative; width: calc(var(--meld-tile) * 1.3); height: var(--meld-tile); flex-shrink: 0; }
.table-area .meld-added { position: absolute; left: 0; bottom: calc(var(--meld-tile) + 3px); }
.table-area .melds .meld-concealed { background: linear-gradient(115deg,#92769e,#473852); border-color: #a28bae; }
.table-area .meld-concealed .tile-face { visibility: hidden; }
.table-area .river .called { visibility: hidden; }
.table-area .river .tile-face,
.table-area .melds .tile-face { padding: 0; scale: 1.08; }
.table-area .own-melds { right: 17%; bottom: 20px; z-index: 7; max-width: 70%; flex-wrap: wrap; justify-content: flex-end; }
.table-plane .melds { max-width: min(43cqw,42cqh); flex-wrap: wrap; }
.table-plane .melds.pos-2 { right: auto; left: 17%; top: 0; transform: rotate(180deg); transform-origin: center; }
.table-plane .melds.pos-1 { left: 84%; right: auto; top: 70%; transform: translate(-50%,-50%) rotate(-90deg); transform-origin: center; }
.table-plane .melds.pos-3 { left: 16%; top: 70%; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
.table-area .opponent.pos-0 { left: 5%; bottom: 22%; }
.table-area:has(.own-melds .meld:nth-child(4)) .opponent.pos-0 { left: 25%; }
.table-area .opponent.pos-2 { left: auto; right: 1%; top: 3%; transform: none; }
.table-area .opponent.pos-1 { right: 1%; top: 22%; }
.table-area .opponent.pos-3 { left: 1%; top: 22%; }
.table-area .opponent .portrait { border-radius: 8px; border: 2px solid #9f86b3; }
.table-area .hand { left: 4%; right: 17%; bottom: 20px; gap: 2px; }
.table-area .hand .tile { --tw: min(5.2cqw, 10cqh, 65px); }
.table-area .hand .tile:hover:not(:disabled),
.table-area .hand .tile.selected { outline: 2px solid #b99ce0; transform: translateY(-10px); }
.table-area .dora-display {
  left: 2%; top: 3%; opacity: 1; padding: 14px 9px 10px;
  border: 1px solid #8b739b; border-radius: 7px;
  background: linear-gradient(135deg, #17131fe6, #30263de6);
  box-shadow: 0 3px 8px #0005;
}
.table-area .dora-display small { top: 2px; left: 8px; }
@media (max-height: 500px) {
  .table-area .hand { bottom: 12px; gap: 1px; }
  .table-area .hand .tile { --tw: min(5cqw, 10cqh, 39px); }
  .table-area .opponent.pos-0 { bottom: 22%; }
  .table-plane .river { gap: 3px 1px; }
  .table-area .own-melds { bottom: 12px; }
  .table-area .tile { box-shadow: 0 2px #d2c9ba, 0 5px #85728d, 1px 7px 3px #0007; }
  .table-area .dora-display { padding: 12px 5px 7px; }
}

.hand { touch-action: none; user-select: none; -webkit-user-select: none; }
.table-area .hand .tile.tile-picked {
  transform: translateY(-14px);
  outline: 2px solid #b99ce0;
  z-index: 2;
}
.table-area .hand .tile.tile-dragging {
  transition: none;
  z-index: 20;
  cursor: grabbing;
  outline: 2px solid #b99ce0;
}
.table-area .hand:has([data-play]) .tile:disabled { filter: brightness(.63); }
.table-area[aria-busy="true"] .hand { pointer-events: none; }
.table-area[aria-busy="true"] .hand .tile { cursor: wait; }
.river .last-discard { outline: 2px solid #c4a6e5; outline-offset: 1px; }
@media (hover: none) {
  .table-area .hand .tile:hover:not(:disabled):not(.tile-picked):not(.tile-dragging) { transform: none; outline: none; }
}

body[data-motion="none"] .tile,
body[data-motion="none"] .search-orbit:before,
body[data-motion="none"] .search-orbit:after {
  transition: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}