:root {
  color-scheme: dark;
  --bg: #102321;
  --panel: #182e2a;
  --panel-dark: #10221e;
  --line: rgba(198,180,142,.16);
  --line-bright: rgba(213,185,130,.4);
  --text: #e7e5d9;
  --muted: #a3aea0;
  --faint: #6f877b;
  --gold: #d7bb83;
  --gold-bright: #ead0a0;
  --red: #cd7969;
  --jade: #9ec5ad;
  --sans: "Microsoft YaHei","Noto Sans CJK SC","PingFang SC",system-ui,sans-serif;
  --serif: "Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
  font-family: var(--sans);
  font-size: 16px;
  font-synthesis: none
}
* {
  box-sizing: border-box
}
html,body {
  margin: 0;
  min-height: 100%;
  background: var(--bg)
}
body {
  overflow: hidden;
  background: radial-gradient(ellipse at 40% 0%,#244239 0%,#142d26 40%,#0e211c 100%);
  color: var(--text);
  line-height: 1.5
}
button,input,select {
  font: inherit
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none
}
button:disabled {
  cursor: default;
  opacity: .35
}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px
}
button {
  touch-action: manipulation
}
a {
  color: var(--gold)
}
h1,h2,h3,h4,p {
  margin: 0
}
button,select,input {
  -webkit-tap-highlight-color: transparent
}
button .icon {
  pointer-events: none
}
img,svg {
  max-width: 100%
}
svg {
  display: block
}
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle
}
.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none
}
strong,b {
  font-weight: 600
}
em,i {
  font-style: normal
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 7px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s,box-shadow .15s,transform .15s
}
.button:hover:not(:disabled) {
  transform: translateY(-1px)
}
.primary {
  background: linear-gradient(135deg,#e5c997,#c5a36b);
  color: #23352a;
  box-shadow: inset 0 1px 0 #f6dfb3,0 4px 12px #0002;
  border: 1px solid #e1c591
}
.primary:hover:not(:disabled) {
  background: linear-gradient(135deg,#f2dbb1,#d4b680);
  box-shadow: 0 5px 20px #0003
}
.secondary {
  border: 1px solid var(--line-bright);
  background: #ffffff03;
  color: var(--gold)
}
.secondary:hover:not(:disabled) {
  background: #c7ad7820
}
.quiet {
  color: var(--muted);
  border: 1px solid var(--line);
  background: #071c1420
}
.quiet:hover:not(:disabled) {
  color: var(--text);
  background: #ffffff08
}
.button.small {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 14px
}
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  padding: 6px 4px;
  white-space: nowrap;
  font-size: 14px
}
.text-button:hover:not(:disabled) {
  color: var(--gold)
}
.text-button .icon {
  width: 16px;
  height: 16px
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  color: var(--muted)
}
.icon-button:hover {
  color: var(--gold);
  background: #c7b48012
}
.positive {
  color: var(--gold)
}
.negative {
  color: var(--red)
}
.neutral {
  color: var(--text)
}
.warning-text {
  color: #e2ae8c!important
}
.fineprint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
  margin-top: 18px
}
.small-label {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--faint)
}
.boot-screen {
  height: 90vh;
  display: grid;
  place-items: center;
  color: var(--gold);
  letter-spacing: 3px
}
/* The shell remains separate from the authoritative game session. */
.app-header {
  height: 78px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #0e20193d;
  position: relative;
  z-index: 2
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 0
}
.brand-seal,.red-seal {
  display: grid;
  place-items: center;
  background: #9c4336;
  color: #efd6b5;
  font-family: var(--serif);
  border: 1px solid #d8886770;
  box-shadow: inset 0 0 0 3px #a64539,inset 0 0 0 4px #df99705c
}
.brand-seal {
  width: 38px;
  height: 42px;
  font-size: 25px;
  border-radius: 3px
}
.brand strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 3px;
  display: block;
  color: #e9dfc9
}
.brand small {
  color: #98a992;
  font-size: 11px;
  letter-spacing: 3px;
  display: block;
  margin-top: 1px
}
.header-divider {
  width: 1px;
  height: 25px;
  background: var(--line);
  margin: 0 23px
}
.edition-label {
  font-size: 13px;
  color: #b3bea9;
  letter-spacing: 1px
}
.edition-label i {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--faint);
  margin-top: 3px
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto
}
.nav-button {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
  padding: 9px 3px
}
.nav-button .icon {
  width: 17px;
  height: 17px
}
.nav-button:hover {
  color: var(--gold)
}
.header-nav>.secondary {
  margin-left: 8px
}
.app-footer {
  height: 30px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
  letter-spacing: .2px
}
.app-footer>span {
  display: flex;
  align-items: center;
  gap: 8px
}
.app-footer b {
  font-weight: 400;
  opacity: .5
}
.app-footer .icon {
  width: 12px;
  height: 12px
}
.connection-dot,.match-location>i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #8bb69b;
  display: inline-block
}
/* Lobby */
.lobby {
  height: calc(100dvh - 108px);
  min-height: 540px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: clamp(30px,6vh,72px) clamp(38px,7vw,110px) 86px;
  gap: 30px;
  overflow: hidden
}
.lobby:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .04;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,transparent 0px,transparent 30px,#ddcfab 31px,transparent 32px)
}
.lobby-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 580px
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gold)
}
.eyebrow>span {
  width: 25px;
  height: 1px;
  background: var(--gold)
}
.lobby h1 {
  font-family: var(--serif);
  font-size: clamp(57px,6.3vw,90px);
  line-height: 1.35;
  letter-spacing: 6px;
  font-weight: 600;
  margin-top: 15px;
  position: relative;
  white-space: nowrap
}
.lobby h1>span {
  color: var(--gold)
}
.lobby h1>i {
  display: inline-block;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  font-weight: 400;
  color: #aeaa92;
  margin-left: 20px;
  transform: translateY(-8px)
}
.lobby-description {
  font-size: 17px;
  line-height: 2;
  letter-spacing: 1px;
  color: #b7c0ad;
  margin-top: 18px
}
.lobby-tags {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  font-size: 13px;
  color: #b5bda9;
  letter-spacing: .5px
}
.lobby-tags>b {
  color: #566d5d;
  font-weight: 400
}
.difficulty-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 37px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #d5dacb
}
.difficulty-title>span {
  font-size: 12px;
  color: var(--faint)
}
.difficulty-options {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  max-width: 455px
}
.difficulty-card {
  border: 1px solid var(--line);
  background: #10271d45;
  border-radius: 7px;
  text-align: left;
  padding: 13px 14px;
  transition: all .15s
}
.difficulty-card>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px
}
.difficulty-card small {
  font-size: 12px;
  color: #8d9f8f;
  display: block;
  margin-top: 6px;
  white-space: nowrap
}
.difficulty-card .icon {
  width: 14px;
  height: 14px;
  color: var(--gold)
}
.difficulty-card.active {
  border-color: #c3a86b88;
  background: linear-gradient(135deg,#cdb47a15,#10271d45)
}
.difficulty-card.active>span {
  color: var(--gold)
}
.difficulty-card:hover {
  border-color: #c3a86b80
}
.lobby-start {
  display: flex;
  gap: 23px;
  align-items: center;
  margin-top: 26px
}
.start-button {
  min-width: 240px;
  height: 52px;
  font-size: 18px;
  letter-spacing: 2px;
  justify-content: space-between;
  padding-left: 28px
}
.lobby-safety {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  color: var(--faint);
  margin-top: 16px
}
.lobby-safety .icon {
  height: 13px;
  width: 13px
}
.lobby-art {
  position: relative;
  min-width: 0;
  align-self: center;
  height: 520px
}
.hero-disc {
  position: absolute;
  inset: 36px -10px 15px 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%,#64704445,#3853352e 48%,transparent 72%)
}
.hero-circle {
  border: 1px solid #c3b17a25;
  position: absolute;
  border-radius: 50%
}
.hero-circle.one {
  inset: 10px;
  transform: rotateX(25deg)
}
.hero-circle.two {
  inset: 38px;
  transform: rotateX(25deg);
  border-style: dashed;
  border-color: #c3b17a19
}
.hero-engraving {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-10deg);
  font: 140px var(--serif);
  white-space: nowrap;
  color: #c6b97c08;
  letter-spacing: 15px
}
.hero-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(transparent,#c5aa6e55);
  position: absolute;
  left: 50%;
  bottom: 20px
}
.hero-tiles {
  position: absolute;
  inset: 65px 0 60px
}
.hero-tile {
  position: absolute;
  filter: drop-shadow(12px 22px 12px #0005);
  transform-origin: 50% 80%
}
.hero-tile>.tile {
  width: 122px
}
.hero-tile.a {
  left: 6%;
  top: 65px;
  transform: rotate(-22deg)
}
.hero-tile.b {
  left: 27%;
  top: 18px;
  transform: rotate(-8deg);
  z-index: 2
}
.hero-tile.c {
  left: 51%;
  top: 24px;
  transform: rotate(10deg);
  z-index: 3
}
.hero-tile.d {
  left: 71%;
  top: 91px;
  transform: rotate(24deg);
  z-index: 4
}
.hero-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0
}
.red-seal {
  width: 33px;
  height: 38px;
  font-size: 24px;
  border-radius: 2px;
  transform: rotate(-5deg)
}
.hero-caption>div {
  font: 17px var(--serif);
  letter-spacing: 4px;
  color: #cebf96
}
.hero-caption small {
  display: block;
  font: 10px var(--sans);
  letter-spacing: 3px;
  color: #798d76;
  margin-top: 8px
}
.art-side-note {
  position: absolute;
  top: 48px;
  right: -24px;
  writing-mode: vertical-rl;
  font: 11px var(--serif);
  letter-spacing: 4px;
  color: #8f9d81;
  line-height: 2.3
}
.lobby-bottom {
  position: absolute;
  bottom: 0;
  left: clamp(38px,7vw,110px);
  right: clamp(38px,7vw,110px);
  height: 65px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faint)
}
.lobby-bottom>div {
  display: flex;
  gap: 12px;
  align-items: center
}
.lobby-bottom strong {
  font: 21px var(--serif);
  color: #d8ccab
}
.lobby-bottom i {
  display: inline-block;
  width: 1px;
  height: 17px;
  background: var(--line);
  margin: 0 12px
}
.lobby-bottom>span {
  font-size: 12px;
  display: flex;
  align-items: center
}
.lobby-bottom .text-button {
  margin-left: 20px
}
/* Tiles: exact vector faces, not generated dots. */
.tile {
  display: inline-block;
  width: 62px;
  position: relative;
  vertical-align: top;
  flex-shrink: 0;
  aspect-ratio: 68/136;
  line-height: 1
}
.tile-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 2px #0003)
}
.tile-small {
  width: 32px
}
.tile-number {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  color: #c9c5a9;
  background: #102217;
  border: 1px solid #6c7c5259;
  border-radius: 3px;
  font-size: 12px;
  line-height: 17px;
  min-width: 23px;
  padding: 0 4px;
  box-shadow: 0 1px 3px #0004;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center
}
.tile-number i {
  font-size: 10px;
  color: var(--gold)
}
.avatar {
  display: inline-block;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  filter: drop-shadow(0 3px 4px #0003)
}
.avatar>svg {
  width: 100%;
  height: 100%
}
.die {
  width: 85px;
  filter: drop-shadow(0 8px 5px #0003)
}
/* Game table */
.game-shell {
  height: calc(100dvh - 108px);
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 22px;
  padding: 16px 26px 12px;
  max-width: 1920px;
  margin: auto
}
.play-column {
  display: grid;
  grid-template-rows: 30px minmax(240px,1fr) 230px;
  min-height: 0;
  min-width: 0
}
.match-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px
}
.match-location {
  display: flex;
  align-items: center;
  gap: 8px
}
.match-location>span {
  color: var(--faint);
  margin-left: 6px
}
.score-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #879b86;
  font-size: 12px
}
.score-mode>b {
  font: 17px var(--serif);
  color: var(--gold);
  margin-left: 2px
}
.score-mode>i {
  width: 1px;
  height: 11px;
  background: var(--line);
  margin: 0 6px
}
.he-tag {
  color: var(--gold)
}
.arena {
  position: relative;
  min-height: 0;
  isolation: isolate
}
.wood-rim {
  position: absolute;
  inset: 44px 32px 45px;
  border-radius: 18px;
  background: repeating-linear-gradient(2deg,#ffffff04 0 1px,transparent 1px 5px),linear-gradient(135deg,#736047,#362e22 35%,#211f18 75%,#6c5b40);
  box-shadow: 0 16px 30px #0004,0 2px 0 #0a1710,0 -1px 0 #82705770,inset 0 0 0 1px #9b7b4c55,inset 0 0 0 7px #0d1c124a;
  border: 2px solid #372f21
}
.felt {
  position: absolute;
  inset: 10px;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 30%,#385f48 0%,#284d3b 48%,#23402e 100%);
  box-shadow: inset 0 4px 16px #061e13b3,inset 0 0 0 1px #b0aa6d40;
  overflow: hidden
}
.felt:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: url('../../../assets/felt.svg');
  background-size: 220px
}
.felt-line {
  position: absolute;
  inset: 13px;
  border: 1px solid #a6b08033;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px #416a4920,0 0 0 4px #193d2915
}
.table-ornament {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translate(-50%,-60%);
  opacity: .055;
  font: 100px var(--serif);
  color: #e2d89c
}
.table-ornament>span {
  border: 1px solid #dec879;
  border-radius: 8px;
  padding: 0 12px
}
.table-lettering {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #cfc88728;
  font: 23px var(--serif);
  letter-spacing: 8px
}
.table-lettering small {
  font: 8px var(--sans);
  letter-spacing: 5px;
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #cfc8871f
}
.direction-mark {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 3px;
  color: #a3b08275;
  white-space: nowrap
}
.direction-mark>span {
  font-size: 17px;
  vertical-align: middle;
  letter-spacing: 0;
  margin-left: 5px
}
.round-counter {
  position: absolute;
  top: 10px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c8cbb1;
  font: 16px var(--serif)
}
.round-counter small {
  font: 10px var(--sans);
  color: var(--faint);
  border-left: 1px solid var(--line);
  padding-left: 10px
}
.seat {
  position: absolute;
  z-index: 5;
  text-align: center;
  width: 108px
}
.seat-2 {
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 7px;
  width: 170px;
  text-align: left
}
.seat-1 {
  right: -5px;
  top: 42%;
  transform: translateY(-30%)
}
.seat-3 {
  left: -5px;
  top: 42%;
  transform: translateY(-30%)
}
.seat-portrait {
  position: relative;
  width: 60px;
  margin: auto
}
.seat-2 .seat-portrait {
  grid-row: 1/3;
  width: 52px;
  align-self: center
}
.seat-2 .avatar {
  width: 52px;
  height: 52px
}
.seat-info h3 {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 4px
}
.seat-info h3>span {
  font: 8px var(--sans);
  letter-spacing: .3px;
  border: 1px solid #768c6660;
  color: #97a88c;
  padding: 1px 3px;
  border-radius: 2px;
  margin-left: 2px;
  vertical-align: middle
}
.seat-info p {
  font-size: 12px;
  color: #99ac94;
  margin-top: 3px
}
.seat-info p i {
  margin: 0 5px;
  color: #6f886d
}
.seat-info p b {
  color: var(--gold);
  font-size: 15px;
  font-weight: 400
}
.seat-active .avatar {
  filter: drop-shadow(0 0 9px #d2b67738)
}
.seat-active .seat-portrait:after {
  content: "";
  border: 1px solid #cbb476b0;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none
}
.turn-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  right: 1px;
  bottom: 8px;
  border: 2px solid #213d27
}
.seat-won .seat-portrait:after {
  content: "";
  border: 1px solid var(--gold);
  position: absolute;
  inset: 0;
  border-radius: 50%
}
.opponent-hand {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  filter: drop-shadow(0 2px 1px #0003);
  height: 29px
}
.opponent-hand .tile {
  width: 15px;
  margin-left: -5px
}
.opponent-hand .tile:first-child {
  margin-left: 0
}
.seat-2 .opponent-hand {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: 25px;
  opacity: .75
}
.seat-2 .opponent-hand .tile {
  width: 13px
}
.hand-count {
  font-size: 11px;
  color: #7e987b;
  display: block;
  margin-top: 3px
}
.seat-2 .hand-count {
  position: absolute;
  top: 62px;
  left: calc(50% + 40px);
  font-size: 11px;
  white-space: nowrap
}
.thinking-label {
  height: 14px;
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center
}
.thinking-label i {
  width: 3px;
  height: 3px;
  background: #cbb784;
  border-radius: 50%;
  animation: think 1.3s infinite
}
.thinking-label i:nth-child(2) {
  animation-delay: .17s
}
.thinking-label i:nth-child(3) {
  animation-delay: .34s
}
.seat-2 .thinking-label {
  position: absolute;
  left: 100%;
  top: 20px
}
.trick-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4
}
.played {
  position: absolute;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px
}
.played-0 {
  left: 50%;
  top: 76%
}
.played-1 {
  left: 73%;
  top: 56%
}
.played-2 {
  left: 50%;
  top: 38%
}
.played-3 {
  left: 27%;
  top: 56%
}
.played-cards {
  display: flex;
  gap: 1px;
  filter: drop-shadow(0 5px 5px #0004)
}
.played-cards .tile {
  width: 50px
}
.played-label {
  font-size: 12px;
  color: #aabd9e;
  text-align: center;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap
}
.played-label>i {
  font-size: 11px;
  color: #dfc790;
  border: 1px solid #bea97070;
  background: #183626;
  padding: 0 4px;
  border-radius: 3px
}
.leading .played-cards {
  filter: drop-shadow(0 0 9px #d0b57630) drop-shadow(0 5px 5px #0004)
}
.he-play .played-label {
  color: #e7cf97
}
.table-wait {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  color: #b2c09e
}
.waiting-emblem {
  display: grid;
  place-items: center;
  margin: auto auto 10px;
  width: 46px;
  height: 46px;
  border: 1px solid #adb7863b;
  border-radius: 50%
}
.waiting-emblem .icon {
  width: 21px;
  height: 21px;
  color: #c2c49680
}
.table-wait p {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 2px
}
.table-wait small {
  font-size: 12px;
  color: #8ba07e;
  display: block;
  margin-top: 6px
}
.table-status {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 7
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid #78965f55;
  border-radius: 20px;
  background: #1b3627;
  padding: 6px 16px;
  font-size: 13px;
  color: #a7b89c;
  box-shadow: 0 4px 8px #0001
}
.status-pill>i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9eb688;
  animation: think 1.6s infinite
}
.status-pill.your-turn {
  background: #3a4830;
  color: #e6d3a1;
  border-color: #b59c6170
}
.status-pill.your-turn>i {
  background: #dfc28d;
  animation: none
}
.status-pill.paused {
  color: #d5bfa0;
  border-color: #92734b
}
.status-pill .icon {
  width: 12px;
  height: 12px
}
.round-award {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%,-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ceb47b75;
  background: linear-gradient(100deg,#263e2cf7,#3e4d32f7);
  box-shadow: 0 4px 15px #0003;
  border-radius: 6px;
  padding: 5px 13px;
  color: #e5d3a5;
  font-size: 14px;
  white-space: nowrap
}
.round-award>.icon {
  height: 16px;
  width: 16px
}
.round-award b {
  font: 22px var(--serif);
  color: #f1d394
}
/* Player hand and controls */
.hand-area {
  margin-top: 7px;
  border-top: 1px solid var(--line);
  position: relative;
  padding: 9px 12px 0;
  display: flex;
  flex-direction: column;
  min-width: 0
}
.hand-topline {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0
}
.you-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 115px
}
.you-identity .avatar {
  width: 38px;
  height: 38px
}
.you-identity strong {
  font-weight: 500;
  display: block;
  font-size: 14px
}
.you-identity strong>span {
  font-size: 11px;
  color: var(--faint);
  margin-left: 6px
}
.you-identity small {
  font-size: 11px;
  color: #9db197;
  display: block;
  margin-top: 2px
}
.you-identity small>b {
  font-size: 14px;
  color: var(--gold);
  font-weight: 400
}
.you-identity small>i {
  margin: 0 5px;
  color: #607d5c
}
.hand-instruction {
  font-size: 13px;
  color: #a4b098;
  flex: 1;
  line-height: 1.7;
  min-height: 20px
}
.sort-button {
  margin-left: auto;
  font-size: 13px
}
.hand-and-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex: 1;
  min-height: 0;
  padding-top: 11px
}
.your-hand {
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  position: relative;
  flex: 1
}
.hand-card {
  padding: 0;
  background: none;
  border: 0;
  position: relative;
  flex: 0 0 auto;
  display: block;
  transition: transform .15s;
  transform-origin: bottom center
}
.hand-card>.tile {
  width: clamp(44px,4.6vw,72px)
}
.hand-card:not(:disabled):hover {
  transform: translateY(-7px)
}
.hand-card.selected,.hand-card.selected:hover {
  transform: translateY(-14px)
}
.hand-card.selected .tile-svg {
  filter: drop-shadow(0 0 4px #dac28c66) drop-shadow(0 3px 3px #0005)
}
.hand-card:disabled {
  opacity: 1
}
.hand-card.not-legal>.tile {
  opacity: .48
}
.hand-card.playable:not(.selected)>.tile:after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4ba80;
  box-shadow: 0 0 4px #b6bc8c77
}
.selection-mark {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid #ddc68b;
  border-radius: 50%;
  background: #c8ad76;
  color: #24402c;
  display: none;
  place-items: center
}
.selection-mark .icon {
  height: 12px;
  width: 12px;
  stroke-width: 2.3
}
.selected>.selection-mark {
  display: grid
}
.hand-actions {
  width: 146px;
  flex-shrink: 0;
  align-self: center
}
.play-button {
  width: 100%;
  font-size: 15px;
  padding: 12px 10px;
  justify-content: space-evenly
}
.play-button .icon {
  width: 17px;
  height: 17px
}
.secondary-actions {
  display: flex;
  gap: 7px;
  margin-top: 8px
}
.secondary-actions .button {
  padding: 7px 10px;
  font-size: 13px;
  min-height: 34px;
  flex: 1;
  gap: 5px
}
.secondary-actions .icon {
  width: 14px;
  height: 14px
}
.hand-foot {
  height: 27px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #72876e;
  margin-top: 6px
}
.hand-foot>span {
  display: flex;
  align-items: center;
  gap: 5px
}
.hand-foot .icon {
  width: 12px;
  height: 12px
}
.hand-foot i {
  margin: 0 5px;
  opacity: .5
}
.hand-foot .text-button {
  font-size: 12px
}
.hand-foot .auto-active {
  color: var(--gold)
}
kbd {
  display: inline-block;
  padding: 0 4px;
  line-height: 15px;
  border: 1px solid #6f85592e;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px
}
.local-only {
  color: #74836c
}
.hand-empty {
  height: 110px;
  display: grid;
  place-items: center;
  color: #7f9073;
  font: 19px var(--serif);
  letter-spacing: 3px
}
/* Memory ledger */
.ledger {
  background: linear-gradient(150deg,#21372a95,#12271de3);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px #061d1114;
  overflow: hidden
}
.ledger-tabs {
  display: flex;
  height: 47px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 10px
}
.ledger-tabs>button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  font-size: 14px;
  color: var(--faint);
  border-bottom: 2px solid transparent
}
.ledger-tabs>button .icon {
  width: 15px;
  height: 15px
}
.ledger-tabs>button.active {
  color: var(--gold);
  border-color: var(--gold)
}
.ledger-inner {
  padding: 16px 20px 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #51694355 transparent
}
.ledger-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #b7c2a8;
  letter-spacing: .5px
}
.toggle {
  position: relative;
  height: 18px;
  width: 33px;
  background: #102016;
  border: 1px solid #6b815350;
  border-radius: 12px;
  transition: all .15s
}
.toggle>span {
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #728266
}
.toggle.on {
  background: #63765155;
  border-color: #b8b58566
}
.toggle.on>span {
  left: 18px;
  background: #d2c38f
}
.memory-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 11px 0 11px
}
.memory-summary strong {
  font: 30px var(--serif);
  font-weight: 400;
  color: #dfd8bb
}
.memory-summary>div>span {
  font-size: 12px;
  color: var(--faint);
  margin-left: 4px
}
.live-label {
  font-size: 11px;
  color: #788e72;
  display: flex;
  gap: 5px;
  align-items: center
}
.live-label i {
  width: 4px;
  height: 4px;
  background: #90ad78;
  border-radius: 50%
}
.memory-rows {
  border-top: 1px solid var(--line)
}
.memory-row {
  height: 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b6b9850c;
  gap: 7px
}
.rank-number {
  font: 17px var(--serif);
  width: 23px;
  color: #d7ceb0;
  text-align: center
}
.rank-name {
  font-size: 12px;
  color: #9ba88e;
  width: 31px
}
.count-dots {
  display: flex;
  gap: 5px;
  margin-left: auto
}
.count-dots>i {
  width: 8px;
  height: 11px;
  background: #bac49b12;
  border: 1px solid #98ad7950;
  border-radius: 2px
}
.count-dots>i.used {
  background: #c5b57e;
  border-color: #dcc78a;
  box-shadow: inset 0 1px 0 #f8e5b433
}
.rank-count {
  width: 34px;
  text-align: right;
  font-size: 13px;
  color: #d0c7a1;
  white-space: nowrap;
  margin-left: 6px
}
.rank-count i {
  font-size: 12px;
  color: #687e60
}
.memory-row.exhausted .rank-number,.memory-row.exhausted .rank-name {
  color: #72856b
}
.memory-row.exhausted .count-dots>i.used {
  background: #778666;
  border-color: #778666
}
.gallery-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #aeaa83;
  width: 100%;
  padding: 13px 0 11px
}
.gallery-link>.icon {
  width: 12px;
  height: 12px
}
.gallery-link:hover {
  color: var(--gold)
}
.covered-box {
  border: 1px solid #82915b3a;
  border-radius: 6px;
  background: #091b1130;
  margin-top: 4px
}
.covered-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 10px;
  font-size: 13px;
  color: #aab397
}
.covered-heading>span {
  display: flex;
  gap: 5px;
  align-items: center
}
.covered-heading .icon {
  width: 13px;
  height: 13px
}
.covered-heading>span:first-child .icon {
  color: #80906c
}
.covered-heading b {
  font: 15px var(--serif);
  color: var(--gold);
  margin-right: 2px
}
.flipped {
  transform: rotate(180deg)
}
.covered-details {
  padding: 0 11px 8px;
  border-top: 1px solid #81906021
}
.covered-details>div {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 27px;
  font-size: 13px;
  color: #adba9c
}
.covered-details>div i {
  font-size: 12px;
  color: #6e8566;
  margin-left: 8px
}
.covered-details>div>b {
  font-weight: 400;
  color: #d0c398;
  margin-left: auto
}
.covered-details>div>small {
  font-size: 11px;
  color: #6e8566
}
.ledger-note {
  font-size: 11px;
  color: #6f8464;
  line-height: 1.8;
  margin: 10px 0 12px
}
.ledger-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  color: #7a8c6f;
  height: 33px;
  border-top: 1px solid var(--line);
  flex-shrink: 0
}
.ledger-foot .icon {
  width: 11px;
  height: 11px
}
.memory-off {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 70px 5px;
  gap: 12px
}
.memory-off>.icon {
  width: 32px;
  height: 32px;
  color: #7f936b
}
.memory-off h3 {
  font: 18px var(--serif);
  color: #c3c0a0
}
.memory-off p {
  font-size: 13px;
  line-height: 1.9;
  color: #829576
}
.memory-off button {
  font-size: 14px;
  margin-top: 9px
}
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: #51694355 transparent
}
.history-caption {
  display: flex;
  justify-content: space-between;
  color: #acb99c;
  font-size: 12px;
  margin-bottom: 13px
}
.history-caption span {
  color: #738b66;
  font-size: 11px
}
.history-trick {
  background: #0b1f1666;
  border: 1px solid #91a36824;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden
}
.history-trick>header {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #91a36824;
  font-size: 13px;
  color: #94a886
}
.history-trick>header b {
  color: #ccc096;
  font-weight: 400
}
.history-trick>header em {
  margin-left: 6px;
  color: #e4c485
}
.history-plays {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  padding: 8px 4px
}
.history-play {
  text-align: center;
  min-width: 0
}
.history-play>label {
  display: block;
  font-size: 11px;
  color: #7e9472;
  margin-bottom: 5px
}
.history-play>div {
  display: flex;
  justify-content: center;
  gap: 0;
  min-height: 48px
}
.history-play .tile {
  width: 23px
}
.history-play>small {
  font-size: 10px;
  color: #7d956d;
  display: block;
  margin-top: 5px
}
.history-winner>label,.history-winner>small {
  color: #cdb880
}
.empty-state {
  padding: 70px 15px;
  text-align: center;
  color: #879b7b
}
.empty-state>.icon {
  height: 30px;
  width: 30px;
  margin-bottom: 14px;
  opacity: .7
}
.empty-state>p {
  font: 17px var(--serif);
  color: #b3b699
}
.empty-state>small {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: #6e8563
}
/* Dialogs */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #05100cd9;
  backdrop-filter: blur(7px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px
}
.modal {
  background: linear-gradient(145deg,#243b2f,#162a20 70%);
  border: 1px solid #a79a645c;
  border-radius: 12px;
  box-shadow: 0 30px 100px #0007,inset 0 1px 0 #e5d49e15;
  width: 660px;
  max-width: 100%;
  max-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 15px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto
}
.modal-header .small-label {
  color: #879775;
  font-size: 11px;
  letter-spacing: 4px
}
.modal-header h2 {
  font: 23px var(--serif);
  color: #e5d9b5;
  letter-spacing: 2px;
  margin-top: 4px
}
.close-modal {
  align-self: flex-start;
  margin: -3px -8px 0 0
}
.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #77805a55 transparent
}
.modal-rules {
  width: 920px
}
.modal-gallery {
  width: 1050px
}
.modal-gallery .modal-body {
  padding-top: 19px
}
.rule-feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 3px 0 23px;
  border-bottom: 1px solid var(--line)
}
.number-medallion {
  width: 67px;
  height: 67px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid #bca36f75;
  border-radius: 50%;
  font: 32px var(--serif);
  color: var(--gold);
  box-shadow: inset 0 0 0 6px #b39c5810
}
.rule-feature h3 {
  font: 20px var(--serif);
  color: #d6cfaf;
  margin-bottom: 8px
}
.rule-feature p,.rule-grid p,.rule-footer p {
  font-size: 14px;
  color: #a5b398;
  line-height: 2
}
.rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 30px;
  margin: 25px 0
}
.rule-grid section>span {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9c9870
}
.rule-grid h3 {
  font: 18px var(--serif);
  color: #dbd0ab;
  margin: 9px 0
}
.rule-grid strong {
  font-weight: 500;
  color: #d7c997
}
.he-rule {
  background: #9e986c0b;
  box-shadow: 0 0 0 12px #9e986c0b;
  border-radius: 3px
}
.rule-footer {
  border-top: 1px solid var(--line);
  padding-top: 20px
}
.rule-footer h3 {
  font-size: 15px;
  font-weight: 500;
  color: #c4c6a7;
  margin-bottom: 9px
}
.rule-footer p+p {
  margin-top: 9px
}
.gallery-intro>span {
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 1px
}
.gallery-intro>p {
  font-size: 13px;
  color: #99ad8c;
  line-height: 1.8;
  margin-top: 8px
}
.tile-gallery {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 15px;
  margin-top: 24px
}
.tile-gallery>article {
  text-align: center;
  padding: 15px 4px 11px;
  border: 1px solid #9ea47826;
  background: #07191026;
  border-radius: 6px
}
.tile-gallery .tile {
  width: 50px;
  filter: drop-shadow(0 4px 3px #0004)
}
.tile-gallery h4 {
  font-size: 13px;
  font-weight: 500;
  color: #d2c9a7;
  margin-top: 12px
}
.tile-gallery article>span {
  font-size: 11px;
  color: #93a287;
  display: block;
  margin-top: 5px
}
.tile-gallery article>small {
  font-size: 10px;
  color: #758c68;
  display: block;
  margin-top: 3px
}
.section-intro {
  font-size: 13px;
  color: #8fa183;
  margin-bottom: 16px
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  gap: 15px
}
.setting-row b {
  font-size: 15px;
  color: #d8d8bd;
  font-weight: 500
}
.setting-row small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #8ca17f
}
.setting-row select {
  background: #15291e;
  border: 1px solid #82986250;
  color: #d8d0aa;
  border-radius: 5px;
  padding: 8px 12px;
  width: 134px;
  font-size: 13px
}
.checkbox-toggle {
  appearance: none;
  position: relative;
  cursor: pointer;
  width: 37px;
  height: 21px;
  background: #102317;
  border: 1px solid #7c8e5960;
  border-radius: 15px;
  flex-shrink: 0;
  transition: all .15s
}
.checkbox-toggle:before {
  content: "";
  height: 13px;
  width: 13px;
  background: #788764;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px
}
.checkbox-toggle:checked {
  background: #81936833;
  border-color: #c1b17975
}
.checkbox-toggle:checked:before {
  left: 19px;
  background: #d4c18a
}
.settings-tools {
  margin-top: 23px
}
.settings-tools h3 {
  font: 17px var(--serif);
  color: #c7c7a7
}
.settings-tools p {
  font-size: 13px;
  line-height: 1.9;
  color: #8e9f81;
  margin: 9px 0 14px
}
.settings-tools>div {
  display: flex;
  gap: 12px
}
.settings-tools .button {
  font-size: 13px;
  min-height: 37px
}
.settings-tools .icon {
  height: 15px;
  width: 15px
}
.modal-dice {
  width: 440px;
  text-align: center
}
.modal-dice .modal-header {
  justify-content: center;
  border: 0;
  padding-bottom: 0
}
.modal-dice .modal-header .small-label {
  color: var(--faint)
}
.modal-dice .modal-body {
  padding-top: 20px
}
.dice-content .eyebrow {
  font-size: 12px;
  letter-spacing: 1px;
  justify-content: center;
  color: #9baf8b
}
.dice-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 33px;
  margin-bottom: 23px;
  animation: dice-in .6s cubic-bezier(.2,.7,.4,1)
}
.dice-pair>.die:first-child {
  transform: rotate(-9deg)
}
.dice-pair>.die:last-child {
  transform: rotate(9deg)
}
.dice-content>p {
  font-size: 15px;
  color: #a9b597;
  letter-spacing: 2px
}
.dice-content>p strong {
  font: 30px var(--serif);
  color: #e4c68b;
  margin: 0 4px
}
.dice-first {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 19px 0 28px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0d221848;
  text-align: left
}
.dice-first>.avatar {
  width: 50px;
  height: 50px
}
.dice-first small {
  font-size: 12px;
  color: #819c78;
  display: block;
  margin-bottom: 5px
}
.dice-first b {
  font: 18px var(--serif);
  color: #d7cc9e;
  display: block
}
.dice-content>.button {
  min-width: 200px;
  margin-bottom: 9px
}
.modal-result {
  width: 620px
}
.modal-result .modal-header {
  padding: 16px 23px 0;
  border: 0
}
.modal-result .modal-body {
  padding: 0 35px 26px
}
.result-hero {
  text-align: center;
  padding: 2px 0 24px
}
.result-emblem {
  width: 50px;
  height: 50px;
  border: 1px solid #bcaa6a70;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: #dfc085;
  background: radial-gradient(#d7b97022,transparent)
}
.result-emblem .icon {
  width: 24px;
  height: 24px
}
.result-hero>span {
  font-size: 11px;
  color: #a2ae8e;
  letter-spacing: 5px
}
.result-hero h2 {
  font: 25px var(--serif);
  color: #e2d8b9;
  letter-spacing: 2px;
  margin-top: 8px
}
.your-result {
  font: 53px var(--serif);
  margin-top: 13px;
  line-height: 1.2
}
.your-result small {
  display: block;
  font: 10px var(--sans);
  letter-spacing: 3px;
  color: #8da17e;
  margin-top: 7px
}
.result-hero>p {
  margin-top: 18px;
  font-size: 12px;
  color: #92a583
}
.result-table-head,.result-row {
  display: grid;
  grid-template-columns: 1fr 90px 75px 75px;
  align-items: center
}
.result-table-head {
  padding: 0 13px 9px;
  font-size: 12px;
  color: #7f9871;
  border-bottom: 1px solid var(--line)
}
.result-table-head>span:not(:first-child) {
  text-align: right
}
.result-row {
  padding: 10px 13px;
  border-bottom: 1px solid #a7ac7720
}
.result-row.you {
  background: #b6a1660d
}
.result-row>div {
  display: flex;
  align-items: center;
  gap: 9px
}
.result-row .avatar {
  width: 34px;
  height: 34px
}
.result-row>div>span {
  font-size: 14px;
  color: #d1cfaf
}
.result-row small {
  display: block;
  font-size: 11px;
  color: #7a9470;
  margin-top: 2px
}
.result-row>span {
  text-align: right;
  font-size: 15px;
  color: #c5c49e
}
.result-row>span>small {
  display: inline;
  font-size: 11px
}
.result-row>strong {
  text-align: right;
  font: 22px var(--serif)
}
.result-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px
}
.result-actions .button {
  font-size: 14px
}
.confirm-content>p {
  font-size: 15px;
  line-height: 2;
  color: #b5c3a4;
  margin-bottom: 13px
}
.confirm-content>div {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px
}
.modal-confirm-new,.modal-export-warning {
  width: 550px
}
.modal-replay {
  width: 940px
}
.replay-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d7cda9;
  font-size: 14px
}
.replay-note {
  font-size: 12px;
  color: #8b9e7d;
  margin: 12px 0 18px
}
.replay-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.replay-hands>section {
  border: 1px solid var(--line);
  background: #0b211644;
  border-radius: 6px;
  padding: 13px
}
.replay-hands header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px
}
.replay-hands .avatar {
  width: 32px;
  height: 32px
}
.replay-hands header>span {
  font-size: 14px;
  color: #c0c6a8
}
.replay-hands header small {
  display: block;
  font-size: 11px;
  color: #7e976e;
  margin-top: 3px
}
.replay-hands header>b {
  font-size: 15px;
  font-weight: 400;
  color: var(--gold);
  margin-left: auto
}
.replay-hands section>div {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-height: 80px
}
.replay-hands .tile {
  width: 34px
}
.replay-hands .tile-number {
  font-size: 10px;
  min-width: 16px;
  line-height: 13px
}
.replay-empty {
  font-size: 13px;
  color: #7c956a;
  align-self: center
}
.replay-step {
  background: #89935713;
  border: 1px solid #89935733;
  border-radius: 5px;
  padding: 13px 15px;
  margin-top: 20px;
  font-size: 14px;
  color: #c7c6a1;
  line-height: 1.8;
  min-height: 49px
}
.replay-controls {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px
}
.replay-controls input {
  flex: 1;
  min-width: 0;
  accent-color: #d0b478
}
.replay-controls .button {
  font-size: 13px;
  min-width: 86px
}
.archive-intro {
  font-size: 15px;
  color: #c4c8a5;
  margin-bottom: 15px
}
.archive-intro p {
  font-size: 12px;
  color: #869d77;
  line-height: 1.8;
  margin-top: 7px
}
.archive-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}
.archive-mark {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #82926540;
  border-radius: 6px;
  color: #b2b18a
}
.archive-list h3 {
  font-size: 14px;
  font-weight: 400;
  color: #cbd0af
}
.archive-list h3 span {
  font-size: 11px;
  color: #78946b;
  margin-left: 5px
}
.archive-list p {
  font-size: 12px;
  color: #7b926f;
  margin-top: 5px
}
.archive-list article>strong {
  font: 24px var(--serif);
  margin-left: auto;
  padding: 0 13px
}
.archive-old {
  font-size: 12px;
  color: #687f5f;
  min-width: 55px;
  text-align: center
}
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 45px;
  transform: translateX(-50%);
  background: #283e2bf5;
  border: 1px solid #c5b57977;
  color: #e0d5ad;
  box-shadow: 0 8px 25px #0005;
  padding: 13px 20px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.8;
  max-width: min(700px,90vw)
}
.toast>.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}
@keyframes think {
  0%,70%,100% {
    opacity: .3
  }
  35% {
    opacity: 1
  }
}
@keyframes dice-in {
  0% {
    opacity: 0;
    transform: translateY(-18px) rotate(-14deg)
  }
  65% {
    opacity: 1;
    transform: translateY(3px) rotate(3deg)
  }
  100% {
    transform: translateY(0) rotate(0)
  }
}
@media(min-height:900px) and (min-width:1400px) {
  .game-shell {
    padding-top: 24px;
    padding-bottom: 20px;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 26px
  }
  .play-column {
    grid-template-rows: 34px minmax(240px,1fr) 250px
  }
  .played-cards .tile {
    width: 58px
  }
  .hand-card>.tile {
    width: 76px
  }
  .memory-row {
    height: 34px
  }
  .ledger-inner {
    padding: 18px 22px 0
  }
  .memory-summary {
    margin: 15px 0
  }
  .lobby-copy {
    padding-bottom: 22px
  }
  .lobby-art {
    height: 560px
  }
  .hero-tiles {
    top: 90px
  }
  .hero-tile>.tile {
    width: 140px
  }
}
@media(max-height:760px) and (min-width:851px) {
  .app-header {
    height: 65px
  }
  .app-footer {
    height: 26px
  }
  .game-shell {
    height: calc(100dvh - 91px);
    padding: 10px 22px 6px;
    gap: 15px;
    grid-template-columns: minmax(0,1fr) 256px
  }
  .play-column {
    grid-template-rows: 26px minmax(230px,1fr) 197px
  }
  .hand-card>.tile {
    width: 55px
  }
  .hand-and-actions {
    padding-top: 7px;
    gap: 15px
  }
  .hand-topline {
    height: 38px
  }
  .hand-foot {
    margin-top: 3px;
    height: 21px
  }
  .hand-actions {
    width: 135px
  }
  .played-cards .tile {
    width: 43px
  }
  .seat-2 {
    top: -8px
  }
  .seat-2 .opponent-hand {
    top: 49px
  }
  .seat-2 .hand-count {
    top: 52px
  }
  .seat .avatar {
    width: 50px;
    height: 50px
  }
  .seat .seat-portrait {
    width: 50px
  }
  .seat-info h3 {
    font-size: 14px
  }
  .seat-1,.seat-3 {
    top: 43%;
    width: 95px
  }
  .opponent-hand {
    margin-top: 5px;
    height: 24px
  }
  .opponent-hand .tile {
    width: 13px
  }
  .wood-rim {
    inset: 36px 25px 38px
  }
  .table-status {
    bottom: 0
  }
  .status-pill {
    padding: 4px 13px;
    font-size: 12px
  }
  .round-counter {
    top: 6px;
    font-size: 16px
  }
  .ledger-tabs {
    height: 41px
  }
  .ledger-inner {
    padding: 11px 17px 0
  }
  .memory-summary {
    margin: 6px 0
  }
  .memory-summary strong {
    font-size: 26px
  }
  .memory-row {
    height: 25px
  }
  .gallery-link {
    padding: 9px 0
  }
  .covered-heading {
    padding: 8px
  }
  .covered-details>div {
    height: 23px
  }
  .ledger-foot {
    height: 27px
  }
  .ledger-note {
    margin: 8px 0;
    font-size: 10px
  }
  .lobby {
    height: calc(100dvh - 91px);
    padding-top: 20px;
    padding-bottom: 66px
  }
  .lobby h1 {
    font-size: 65px;
    margin-top: 10px
  }
  .lobby-description {
    font-size: 15px;
    margin-top: 12px
  }
  .lobby-tags {
    margin-top: 14px
  }
  .difficulty-title {
    margin-top: 24px
  }
  .difficulty-card {
    padding: 10px 12px
  }
  .lobby-start {
    margin-top: 20px
  }
  .lobby-art {
    height: 450px
  }
  .hero-tiles {
    top: 60px
  }
  .hero-tile>.tile {
    width: 112px
  }
  .lobby-bottom {
    height: 56px
  }
  .modal-backdrop {
    padding: 20px
  }
  .modal {
    max-height: calc(100dvh - 40px)
  }
  .modal-header {
    padding-top: 16px
  }
  .modal-body {
    padding-top: 18px
  }
  .result-hero {
    padding-bottom: 16px
  }
  .result-hero h2 {
    font-size: 25px
  }
  .your-result {
    font-size: 44px;
    margin-top: 8px
  }
  .result-row {
    padding-top: 8px;
    padding-bottom: 8px
  }
  .result-emblem {
    height: 38px;
    width: 38px;
    margin-bottom: 8px
  }
  .result-actions {
    margin-top: 18px
  }
}
@media(max-width:1180px) {
  .app-header {
    padding: 0 22px
  }
  .header-nav {
    gap: 10px
  }
  .game-shell {
    grid-template-columns: minmax(0,1fr) 248px;
    gap: 13px;
    padding-left: 16px;
    padding-right: 16px
  }
  .your-hand {
    gap: 5px
  }
  .hand-card>.tile {
    width: 50px
  }
  .hand-and-actions {
    gap: 15px
  }
  .hand-actions {
    width: 133px
  }
  .hand-topline {
    gap: 10px
  }
  .hand-instruction {
    font-size: 12px
  }
  .play-button {
    font-size: 14px
  }
  .ledger-inner {
    padding-left: 15px;
    padding-right: 15px
  }
  .seat-1 {
    right: -10px
  }
  .seat-3 {
    left: -10px
  }
  .seat-1,.seat-3 {
    width: 95px
  }
  .played-cards .tile {
    width: 44px
  }
  .played-1 {
    left: 72%
  }
  .played-3 {
    left: 28%
  }
  .wood-rim {
    left: 19px;
    right: 19px
  }
  .lobby {
    padding-left: 48px;
    padding-right: 48px;
    gap: 20px
  }
  .lobby-bottom {
    left: 48px;
    right: 48px
  }
  .lobby h1 {
    font-size: 68px
  }
  .lobby h1>i {
    display: none
  }
  .difficulty-title>span {
    font-size: 11px
  }
  .difficulty-card {
    padding-left: 10px;
    padding-right: 10px
  }
  .lobby-art {
    height: 470px
  }
  .hero-tile>.tile {
    width: 112px
  }
  .hero-tiles {
    top: 78px
  }
  .hero-caption {
    bottom: 18px
  }
  .art-side-note {
    right: -10px
  }
  .local-only {
    display: none
  }
  .lobby-bottom .text-button {
    margin-left: 7px
  }
  .lobby-bottom>span {
    font-size: 11px
  }
  .match-location>span {
    display: none
  }
}
@media(max-width:1000px) and (min-width:851px) {
  .game-shell {
    grid-template-columns: minmax(0,1fr) 222px;
    gap: 10px;
    padding: 10px
  }
  .play-column {
    grid-template-rows: 26px minmax(240px,1fr) 215px
  }
  .hand-card>.tile {
    width: 43px
  }
  .hand-and-actions {
    gap: 10px
  }
  .hand-actions {
    width: 120px
  }
  .hand-instruction {
    max-height: 36px;
    overflow: auto
  }
  .your-hand {
    gap: 3px
  }
  .hand-area {
    padding-left: 5px;
    padding-right: 5px
  }
  .edition-label {
    display: none
  }
  .header-divider {
    display: none
  }
  .count-dots {
    gap: 3px
  }
  .count-dots>i {
    width: 7px
  }
  .rank-name {
    width: 26px
  }
  .ledger-inner {
    padding-left: 12px;
    padding-right: 12px
  }
  .rank-count {
    margin-left: 2px
  }
  .played-cards .tile {
    width: 41px
  }
  .seat .avatar {
    width: 49px;
    height: 49px
  }
  .seat .seat-portrait {
    width: 49px
  }
  .seat-1,.seat-3 {
    width: 80px
  }
  .lobby {
    padding-left: 35px;
    padding-right: 35px
  }
  .lobby h1 {
    font-size: 60px
  }
  .lobby-art {
    height: 420px
  }
  .hero-tile>.tile {
    width: 95px
  }
  .lobby-bottom {
    left: 35px;
    right: 35px
  }
  .lobby-bottom>span {
    display: none
  }
  .lobby-description {
    font-size: 15px
  }
  .difficulty-title {
    display: block
  }
  .difficulty-title>span {
    display: block;
    margin-top: 5px
  }
  .difficulty-card small {
    font-size: 11px
  }
  .difficulty-card>span {
    font-size: 13px
  }
  .start-button {
    min-width: 200px;
    font-size: 17px
  }
  .lobby-start {
    gap: 14px
  }
}
@media(max-width:850px) {
  body {
    overflow: auto
  }
  .app-header {
    height: 68px;
    padding: 0 18px
  }
  .brand strong {
    font-size: 20px
  }
  .brand-seal {
    width: 32px;
    height: 36px;
    font-size: 23px
  }
  .header-divider,.edition-label {
    display: none
  }
  .header-nav {
    gap: 8px
  }
  .header-nav .nav-button {
    font-size: 13px
  }
  .header-nav .nav-button span {
    display: none
  }
  .header-nav>.secondary {
    margin-left: 0;
    font-size: 12px;
    padding: 7px 9px
  }
  .header-nav .icon-button {
    width: 29px
  }
  .app-footer {
    padding: 0 16px;
    height: 30px;
    font-size: 10px
  }
  .game-shell {
    height: auto;
    display: block;
    padding: 10px 15px 15px
  }
  .play-column {
    grid-template-rows: 28px 410px 215px
  }
  .hand-card>.tile {
    width: 55px
  }
  .hand-actions {
    width: 135px
  }
  .ledger {
    margin-top: 20px;
    min-height: 350px;
    max-height: none
  }
  .ledger-inner {
    overflow: visible
  }
  .memory-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px
  }
  .ledger-title {
    max-width: 100%
  }
  .memory-summary {
    justify-content: flex-start;
    gap: 20px
  }
  .memory-summary strong {
    font-size: 26px
  }
  .covered-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px
  }
  .history-list {
    max-height: 550px
  }
  .history-plays .tile {
    width: 35px
  }
  .history-plays>div {
    min-height: 72px
  }
  .history-play>label,.history-play>small {
    font-size: 13px
  }
  .history-trick {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto
  }
  .lobby {
    height: auto;
    min-height: calc(100dvh - 98px);
    padding: 35px 38px 75px;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }
  .lobby-copy {
    padding-top: 8px
  }
  .lobby h1 {
    font-size: 52px;
    letter-spacing: 3px;
    margin-top: 16px
  }
  .lobby-description {
    font-size: 14px;
    letter-spacing: .5px
  }
  .lobby-tags {
    gap: 10px;
    font-size: 12px
  }
  .difficulty-title {
    margin-top: 25px;
    display: block
  }
  .difficulty-title>span {
    display: block;
    margin-top: 5px;
    font-size: 11px
  }
  .difficulty-options {
    gap: 6px
  }
  .difficulty-card {
    padding: 10px 8px
  }
  .difficulty-card>span {
    font-size: 12px;
    white-space: nowrap
  }
  .difficulty-card small {
    font-size: 10px
  }
  .difficulty-card .icon {
    width: 12px;
    height: 12px
  }
  .lobby-start {
    gap: 13px;
    flex-wrap: wrap
  }
  .start-button {
    min-width: 195px;
    height: 47px;
    font-size: 16px
  }
  .lobby-art {
    height: 390px
  }
  .hero-tile>.tile {
    width: 90px
  }
  .hero-tiles {
    top: 67px
  }
  .hero-tile.a {
    left: 0;
    top: 55px
  }
  .hero-tile.b {
    left: 22%
  }
  .hero-tile.c {
    left: 47%
  }
  .hero-tile.d {
    left: 69%;
    top: 80px
  }
  .hero-caption {
    bottom: 13px
  }
  .hero-caption>div {
    font-size: 15px;
    letter-spacing: 2px
  }
  .hero-caption small {
    font-size: 10px;
    letter-spacing: 1px
  }
  .hero-caption .red-seal {
    width: 27px;
    height: 31px;
    font-size: 20px
  }
  .art-side-note {
    display: none
  }
  .lobby-bottom {
    left: 38px;
    right: 38px;
    height: 60px
  }
  .lobby-bottom>span {
    display: none
  }
  .lobby-bottom>div {
    gap: 9px
  }
  .lobby-bottom>div>span {
    font-size: 12px
  }
  .tile-gallery {
    grid-template-columns: repeat(5,1fr)
  }
  .modal-header {
    padding: 18px 22px 12px
  }
  .modal-body {
    padding: 20px 22px
  }
  .rule-grid {
    gap: 22px
  }
  .modal-header h2 {
    font-size: 23px
  }
  .replay-hands .tile {
    width: 29px
  }
  .replay-hands section>div {
    gap: 1px
  }
}
@media(max-width:580px) {
  .app-header {
    padding: 0 12px;
    height: 64px
  }
  .brand {
    gap: 8px
  }
  .brand strong {
    font-size: 19px;
    letter-spacing: 2px
  }
  .brand small {
    font-size: 7px
  }
  .header-nav {
    gap: 3px
  }
  .nav-button {
    padding: 8px 5px
  }
  .header-nav .nav-button .icon {
    width: 16px;
    height: 16px
  }
  .header-nav>.secondary {
    font-size: 11px;
    padding: 5px 7px;
    min-height: 30px
  }
  .header-nav .icon-button {
    width: 27px;
    height: 30px
  }
  .brand-seal {
    height: 33px;
    width: 28px;
    font-size: 20px
  }
  .lobby {
    display: flex;
    flex-direction: column;
    padding: 27px 25px 83px;
    gap: 0
  }
  .lobby-copy {
    order: 1;
    padding-top: 0;
    width: 100%;
    max-width: 430px;
    align-self: flex-start
  }
  .lobby-art {
    order: 0;
    height: 210px;
    width: 100%;
    max-width: 380px;
    align-self: center;
    margin-top: -5px;
    margin-bottom: 13px
  }
  .hero-disc {
    inset: -25px 40px -25px
  }
  .hero-tiles {
    inset: 0 50px 0 40px
  }
  .hero-tile>.tile {
    width: 67px
  }
  .hero-tile.a {
    top: 37px;
    left: 8%
  }
  .hero-tile.b {
    top: 10px;
    left: 29%
  }
  .hero-tile.c {
    top: 16px;
    left: 50%
  }
  .hero-tile.d {
    top: 51px;
    left: 69%
  }
  .hero-caption {
    display: none
  }
  .hero-engraving {
    font-size: 68px
  }
  .lobby h1 {
    font-size: 56px;
    line-height: 1.2;
    margin-top: 14px
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 2px
  }
  .lobby-description {
    font-size: 14px;
    margin-top: 14px
  }
  .lobby-description br {
    display: none
  }
  .lobby-tags {
    margin-top: 15px
  }
  .difficulty-title {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 8px
  }
  .difficulty-title>span {
    font-size: 10px;
    margin-top: 0
  }
  .difficulty-options {
    gap: 8px
  }
  .difficulty-card {
    padding: 11px 10px
  }
  .difficulty-card>span {
    font-size: 13px
  }
  .difficulty-card small {
    font-size: 11px
  }
  .lobby-start {
    margin-top: 21px;
    gap: 18px
  }
  .start-button {
    min-width: 198px
  }
  .lobby-safety {
    font-size: 11px
  }
  .lobby-bottom {
    left: 25px;
    right: 25px;
    height: 60px
  }
  .lobby-bottom>div {
    gap: 6px
  }
  .lobby-bottom .small-label {
    letter-spacing: 1px
  }
  .lobby-bottom i {
    margin: 0 6px
  }
  .lobby-bottom strong {
    font-size: 21px
  }
  .lobby-bottom .text-button {
    font-size: 11px;
    gap: 2px;
    margin-left: 4px
  }
  .lobby-bottom>div>span {
    font-size: 10px
  }
  .app-footer {
    font-size: 7px;
    height: 28px
  }
  .game-shell {
    padding: 7px 8px 15px
  }
  .play-column {
    grid-template-rows: 26px 325px 264px
  }
  .match-bar {
    padding: 0 5px;
    font-size: 11px
  }
  .score-mode {
    font-size: 10px
  }
  .score-mode>b {
    font-size: 16px
  }
  .score-mode>i {
    margin: 0 2px
  }
  .wood-rim {
    inset: 46px 2px 35px
  }
  .felt {
    inset: 7px
  }
  .felt-line {
    inset: 10px
  }
  .table-lettering {
    font-size: 15px;
    letter-spacing: 3px;
    top: 36%
  }
  .table-lettering small {
    font-size: 6px;
    letter-spacing: 2px
  }
  .table-ornament {
    font-size: 55px;
    gap: 0
  }
  .table-ornament span {
    padding: 0 6px
  }
  .direction-mark {
    font-size: 6px;
    letter-spacing: 1px;
    bottom: 6px
  }
  .round-counter {
    left: 9px;
    top: 12px;
    font-size: 14px;
    display: block
  }
  .round-counter small {
    font-size: 10px;
    border: 0;
    padding: 0;
    display: block;
    margin-top: 5px
  }
  .seat-2 {
    width: 127px;
    grid-template-columns: 40px 1fr;
    gap: 4px;
    top: -4px
  }
  .seat .avatar {
    width: 41px;
    height: 41px
  }
  .seat .seat-portrait {
    width: 41px
  }
  .seat-2 .avatar {
    height: 41px;
    width: 41px
  }
  .seat-2 .seat-portrait {
    width: 41px
  }
  .seat-info h3 {
    font-size: 13px;
    letter-spacing: .3px;
    margin-top: 0
  }
  .seat-info h3>span {
    font-size: 6px;
    padding: 0 2px
  }
  .seat-info p {
    font-size: 10px;
    margin-top: 2px
  }
  .seat-info p b {
    font-size: 13px
  }
  .seat-info p i {
    margin: 0 3px
  }
  .seat-1,.seat-3 {
    width: 62px;
    top: 43%;
    transform: translateY(-36%)
  }
  .seat-1 {
    right: -3px
  }
  .seat-3 {
    left: -3px
  }
  .seat-2 .opponent-hand {
    top: 46px;
    height: 22px
  }
  .seat-2 .opponent-hand .tile {
    width: 12px
  }
  .seat-2 .hand-count {
    left: calc(50% + 35px);
    top: 49px;
    font-size: 10px
  }
  .opponent-hand {
    height: 23px;
    margin-top: 5px
  }
  .opponent-hand .tile {
    width: 12px;
    margin-left: -6px
  }
  .hand-count {
    font-size: 10px
  }
  .played-cards .tile {
    width: 32px
  }
  .played-1 {
    left: 74%;
    top: 58%
  }
  .played-3 {
    left: 26%;
    top: 58%
  }
  .played-2 {
    top: 37%
  }
  .played-0 {
    top: 77%
  }
  .played-label {
    font-size: 10px;
    gap: 3px
  }
  .played-label>i {
    font-size: 7px;
    padding: 0 3px
  }
  .round-award {
    top: 55%;
    gap: 4px;
    font-size: 11px;
    padding: 4px 6px
  }
  .round-award>.icon {
    width: 12px;
    height: 12px
  }
  .round-award>b {
    font-size: 18px
  }
  .table-wait p {
    font-size: 16px
  }
  .table-wait small {
    font-size: 10px
  }
  .waiting-emblem {
    width: 35px;
    height: 35px;
    margin-bottom: 8px
  }
  .waiting-emblem .icon {
    width: 16px;
    height: 16px
  }
  .status-pill {
    font-size: 11px;
    padding: 4px 11px
  }
  .table-status {
    bottom: 0
  }
  .hand-area {
    padding: 9px 3px 0;
    margin-top: 8px
  }
  .hand-topline {
    height: 45px;
    gap: 8px;
    align-items: flex-start
  }
  .you-identity {
    min-width: 77px;
    gap: 4px
  }
  .you-identity .avatar {
    height: 29px;
    width: 29px
  }
  .you-identity strong {
    font-size: 12px
  }
  .you-identity strong>span {
    display: none
  }
  .you-identity small {
    font-size: 10px
  }
  .you-identity small>i {
    margin: 0 3px
  }
  .hand-instruction {
    font-size: 11px;
    line-height: 1.7;
    padding-top: 1px;
    max-height: 40px;
    overflow: auto
  }
  .sort-button {
    font-size: 11px;
    gap: 3px;
    padding: 0;
    margin-top: 3px
  }
  .sort-button .icon {
    height: 13px;
    width: 13px
  }
  .hand-and-actions {
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    justify-content: flex-start;
    flex: 0
  }
  .your-hand {
    gap: 4px;
    flex: 0;
    width: 100%;
    min-height: 90px
  }
  .hand-card>.tile {
    width: 40px
  }
  .hand-card.selected,.hand-card.selected:hover {
    transform: translateY(-9px)
  }
  .tile-number {
    font-size: 11px;
    line-height: 14px;
    bottom: -1px;
    min-width: 18px;
    padding: 0 3px
  }
  .hand-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    gap: 10px;
    justify-content: center
  }
  .play-button {
    font-size: 14px;
    min-height: 37px;
    width: 158px;
    padding: 8px
  }
  .secondary-actions {
    margin: 0;
    gap: 6px
  }
  .secondary-actions .button {
    padding: 7px 13px;
    min-height: 34px
  }
  .hand-foot {
    height: 23px;
    margin-top: 9px;
    font-size: 10px
  }
  .hand-foot .text-button {
    font-size: 11px
  }
  .selection-mark {
    height: 15px;
    width: 15px;
    top: -8px
  }
  .selection-mark .icon {
    width: 10px;
    height: 10px
  }
  .ledger {
    margin-top: 10px
  }
  .ledger-inner {
    padding: 13px 15px 0
  }
  .memory-rows {
    gap: 0 22px
  }
  .memory-row {
    height: 28px;
    gap: 4px
  }
  .rank-number {
    width: 20px;
    font-size: 17px
  }
  .rank-name {
    width: 22px;
    font-size: 11px
  }
  .count-dots {
    gap: 3px
  }
  .count-dots>i {
    width: 6px;
    height: 9px
  }
  .rank-count {
    width: 29px;
    margin-left: 3px;
    font-size: 12px
  }
  .rank-count i {
    font-size: 11px
  }
  .gallery-link {
    font-size: 12px
  }
  .covered-details {
    gap: 0 18px
  }
  .modal-backdrop {
    padding: 12px
  }
  .modal {
    max-height: calc(100dvh - 24px);
    border-radius: 9px
  }
  .modal-header {
    padding: 16px 18px 12px
  }
  .modal-header h2 {
    font-size: 21px;
    letter-spacing: 1px
  }
  .modal-body {
    padding: 17px 18px
  }
  .rule-feature {
    gap: 12px;
    align-items: flex-start
  }
  .number-medallion {
    height: 46px;
    width: 46px;
    font-size: 26px
  }
  .rule-feature h3 {
    font-size: 19px
  }
  .rule-feature p,.rule-grid p,.rule-footer p {
    font-size: 13px;
    line-height: 1.9
  }
  .rule-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 20px 0
  }
  .rule-grid h3 {
    font-size: 19px
  }
  .tile-gallery {
    grid-template-columns: repeat(3,1fr);
    gap: 10px
  }
  .tile-gallery article {
    padding: 12px 3px 9px
  }
  .tile-gallery .tile {
    width: 45px
  }
  .tile-gallery h4 {
    font-size: 12px
  }
  .gallery-intro>span {
    font-size: 13px
  }
  .gallery-intro>p {
    font-size: 12px
  }
  .setting-row {
    padding: 15px 0;
    gap: 10px
  }
  .setting-row small {
    font-size: 11px;
    max-width: 190px
  }
  .setting-row select {
    width: 106px;
    padding: 7px;
    font-size: 12px
  }
  .settings-tools>div {
    gap: 8px
  }
  .settings-tools .button {
    padding: 8px 11px;
    font-size: 12px
  }
  .modal-result .modal-body {
    padding: 0 20px 20px
  }
  .result-hero h2 {
    font-size: 23px;
    letter-spacing: 1px
  }
  .result-hero>p {
    font-size: 11px
  }
  .result-table-head,.result-row {
    grid-template-columns: 1fr 65px 50px 55px
  }
  .result-row {
    padding: 9px 8px
  }
  .result-table-head {
    padding: 0 8px 9px;
    font-size: 11px
  }
  .result-row .avatar {
    width: 28px;
    height: 28px
  }
  .result-row>div {
    gap: 6px
  }
  .result-row small {
    font-size: 10px
  }
  .result-row>div>span {
    font-size: 13px
  }
  .result-row>strong {
    font-size: 23px
  }
  .result-row>span {
    font-size: 13px
  }
  .result-actions {
    gap: 10px;
    margin-top: 18px
  }
  .result-actions .button {
    font-size: 13px;
    padding: 10px 13px
  }
  .replay-hands {
    grid-template-columns: 1fr;
    gap: 10px
  }
  .replay-hands section>div {
    min-height: 67px;
    gap: 3px
  }
  .replay-hands .tile {
    width: 31px
  }
  .replay-hands>section {
    padding: 10px
  }
  .replay-hands header {
    margin-bottom: 9px
  }
  .replay-controls {
    gap: 10px
  }
  .replay-controls .button {
    min-width: 60px;
    padding: 8px;
    font-size: 12px
  }
  .replay-toolbar .button {
    font-size: 11px;
    gap: 5px;
    padding: 7px 10px
  }
  .replay-toolbar {
    font-size: 12px
  }
  .confirm-content>p {
    font-size: 14px
  }
  .confirm-content>div .button {
    font-size: 13px;
    padding: 9px 14px
  }
  .archive-list article {
    gap: 8px
  }
  .archive-mark {
    width: 31px;
    height: 33px
  }
  .archive-list h3 {
    font-size: 12px
  }
  .archive-list article>strong {
    font-size: 23px;
    padding: 0 5px
  }
  .archive-list .button {
    font-size: 12px;
    padding: 7px 10px
  }
  .archive-old {
    font-size: 11px;
    min-width: 43px
  }
  .toast {
    font-size: 13px;
    bottom: 35px;
    padding: 10px 13px
  }
  .fineprint {
    font-size: 11px
  }
}
@media(max-width:370px) {
  .hand-card>.tile {
    width: 36px
  }
  .your-hand {
    gap: 3px
  }
  .brand small {
    display: none
  }
  .header-nav {
    gap: 0
  }
  .nav-button {
    padding-left: 4px;
    padding-right: 4px
  }
  .header-nav .icon-button {
    width: 25px
  }
  .memory-rows {
    column-gap: 12px
  }
  .rank-name {
    display: none
  }
  .difficulty-title>span {
    display: none
  }
  .difficulty-card small {
    font-size: 10px
  }
  .lobby-start {
    gap: 8px
  }
  .start-button {
    min-width: 180px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important
  }
}
html[data-motion="reduced"] *,html[data-motion="reduced"] *:before,html[data-motion="reduced"] *:after {
  animation: none!important;
  transition: none!important
}

/* v0.2: four deliberate difficulty choices, unmistakable navigation and square-table joinery. */
.difficulty-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.difficulty-card{padding:11px 15px;text-align:left;min-height:66px}
.difficulty-card.hell-card.active{border-color:#c78666;background:linear-gradient(135deg,#50362b66,#241f1a55)}
.difficulty-card.hell-card.active>span{color:#e1ab8d}
.difficulty-description{min-height:35px;font-size: 13px;line-height:1.7;color:var(--muted);margin-top:12px;max-width:440px}
.hell-description{color:#d5aa8d}
.home-button{border:1px solid #b4a2703b;border-radius:6px;padding:9px 12px;color:var(--gold);white-space:nowrap}
.home-arrow{font-size: 19px!important;line-height:1}
.hell-notice{margin:14px 0;padding:15px 18px;border:1px solid #ba7a5655;border-radius:7px;background:#65403122;color:#d8ad8e;line-height:1.7;font-size: 14px}
.hell-notice p{margin:7px 0 0;color:#b7ab94}
.difficulty-badge{font-size: 12px;font-weight:500;border:1px solid #a9b28138;border-radius:4px;padding:3px 7px;color:#c9c5a3;white-space:nowrap}
.hell-badge{border-color:#c88b6155;color:#e1ae87;background:#51362c55}
.corner-inlay{position:absolute;width:23px;height:23px;border-color:#bba97666;border-style:solid;border-width:0;pointer-events:none}
.c-tl{top:13px;left:13px;border-top-width:2px;border-left-width:2px}
.c-tr{top:13px;right:13px;border-top-width:2px;border-right-width:2px}
.c-bl{bottom:13px;left:13px;border-bottom-width:2px;border-left-width:2px}
.c-br{bottom:13px;right:13px;border-bottom-width:2px;border-right-width:2px}
.result-actions{flex-wrap:wrap}
@media(max-width:850px){.home-button{padding:7px 9px}.home-button span{display:inline!important}.home-button .home-arrow{display:none!important}.match-location>span{display:none}.difficulty-description{font-size: 12px}}
@media(max-width:520px){.home-button{font-size: 11px;padding:6px}.difficulty-card{min-height:57px;padding:9px 11px}.difficulty-card small{display:block;font-size: 11px}.difficulty-badge{font-size: 10px;padding:2px 4px}.corner-inlay{width:14px;height:14px}.edition-label{display:none!important}}

/* v0.3: public landing, guest flow and multiplayer rooms */
.launch-screen {flex:1; min-height:0; padding:26px 4vw 18px; width:100%; max-width:1680px; margin:auto; overflow:auto}
.cover {position:relative; min-height:340px; height:clamp(300px,42vh,470px); border:1px solid rgba(211,190,143,.22); border-radius:18px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 74% 42%,#527560 0%,#264b3d 32%,#142f27 64%,#12271f); box-shadow:0 25px 65px #0004}
.cover::after {content:''; position:absolute; inset:13px; border:1px solid #ccb17820; pointer-events:none; border-radius:10px}
.cover-grid {position:absolute; inset:0; opacity:.15; background:repeating-linear-gradient(90deg,transparent 0 52px,#b9bd8c25 53px,transparent 54px),repeating-linear-gradient(0deg,transparent 0 52px,#b9bd8c25 53px,transparent 54px)}
.cover-sun {position:absolute; width:330px; height:330px; border-radius:50%; right:10%; top:-65px; background:radial-gradient(circle at 45% 35%,#d5c69930,#bdaa7814 60%,transparent 70%); border:1px solid #d5c59b19; box-shadow:0 0 0 20px #d5c59b06,0 0 0 55px #d5c59b06}
.cover-mountain {position:absolute; inset:35% -10% -15% 15%; background:linear-gradient(150deg,#76988030,#12372c88); clip-path:polygon(0 100%,17% 43%,24% 72%,42% 2%,57% 64%,69% 30%,76% 60%,89% 5%,100% 50%,100% 100%)}
.cover-mountain.near {inset:50% -15% -35% 22%; opacity:.8; transform:scaleX(-1); background:#092a2066}
.cover-copy {position:relative; z-index:2; padding:clamp(35px,4.5vw,66px) 4.5vw; pointer-events:none}
.cover-copy .eyebrow {font-size: 14px; letter-spacing:.35em; color:#b5c2a2}
.cover-copy h1 {font-family:var(--serif); font-weight:500; letter-spacing:.15em; font-size:clamp(48px,5vw,76px); margin:20px 0 13px; line-height:1.2; text-shadow:0 4px 24px #0005}
.cover-copy h1 span {color:var(--gold-bright); margin-left:.18em}
.cover-copy>p {font-family:var(--serif); color:#d0cfb6; font-size: 23px; letter-spacing:.22em}
.cover-details {display:flex; align-items:center; gap:16px; color:#aabb9e; margin-top:26px; font-size: 14px; letter-spacing:.08em}
.cover-details i {width:3px;height:3px;background:#a5a77d;border-radius:50%}
.cover-cards {position:absolute; width:38%; height:92%; right:4%; top:2%; perspective:1100px; filter:drop-shadow(8px 22px 12px #0006)}
.cover-card {position:absolute; width:24%; height:86%; top:5%; transform-origin:50% 95%}
.cover-card>.tile {width:100%;height:100%}
.cover-card .tile-svg {width:100%;height:100%}
.cover-card.one {left:0;transform:rotate(-20deg) translateY(20px);opacity:.88}
.cover-card.two {left:22%;transform:rotate(-8deg);z-index:2}
.cover-card.three {left:44%;transform:rotate(9deg);z-index:3}
.cover-card.four {left:65%;transform:rotate(23deg) translateY(22px);opacity:.9}
.cover-seal {position:absolute; right:30px; top:28px; border:1px solid #bc795a; background:#923d2f77; color:#e9b391; font-family:var(--serif); padding:0 8px; font-size:25px; z-index:4}
.cover-foot {position:absolute; left:4.5vw; right:4.5vw; bottom:20px; display:flex; justify-content:space-between; font-size: 12px; letter-spacing:.25em; color:#9ca887}
.cover-foot span {font-size: 11px;letter-spacing:.3em}
.mode-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px}
.mode-card {min-height:172px; position:relative; padding:24px 24px 20px;text-align:left;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#29473a77,#142c2477);transition:border-color .2s,transform .2s,background .2s}
.mode-card:hover {border-color:#d2ba7d80;transform:translateY(-3px);background:linear-gradient(135deg,#365541bb,#1c392dcc)}
.mode-number {position:absolute;right:20px;top:18px;color:#78917f;font-family:var(--serif);font-size: 15px;letter-spacing:.1em}
.mode-icon {display:block;color:#d5bd85;margin-bottom:16px}
.mode-icon>.icon {width:27px;height:27px}
.mode-card strong {display:block;font-family:var(--serif);font-size: 26px;letter-spacing:.12em;font-weight:500}
.mode-card p {font-size: 14px;color:#9fae9a;margin-top:7px;padding-right:10px;line-height:1.7}
.mode-arrow {position:absolute;right:19px;bottom:21px;color:#d5bd85;opacity:.55}
.launch-note {display:flex;justify-content:space-between;align-items:center;gap:22px;padding:17px 2px 0;font-size: 13px;color:#869b87}
.launch-note>span {display:flex;align-items:center;gap:8px;white-space:nowrap}
.launch-note .icon {width:14px;height:14px}
.launch-note>p {text-align:right;line-height:1.7}
.online-form {max-width:560px;margin:auto;padding:8px 0 12px}
.form-field {display:block;margin-bottom:25px}
.form-field>span {display:block;color:var(--gold);margin-bottom:10px}
.form-field small {font-size: 13px;color:var(--faint);margin-left:14px}
.form-field input, .invite-block input {width:100%;background:#0d211b;border:1px solid #cbb38040;color:var(--text);padding:14px 16px;border-radius:7px;outline-offset:2px}
.form-field input::placeholder {color:#738674}
#online-code {text-transform:uppercase;letter-spacing:.22em}
.online-form-actions {display:flex;gap:16px;margin-top:8px}
.online-form-actions>.button {flex:1}
.wide {width:100%}
.match-explainer {padding:18px 20px;margin:0 0 24px;border:1px solid var(--line);border-radius:9px;background:#c9ba7710}
.match-explainer h3 {font-family:var(--serif);color:var(--gold);font-size: 22px;font-weight:500;margin-bottom:9px}
.match-explainer p {font-size: 14px;color:var(--muted);line-height:1.9}
.room-screen {flex:1;min-height:0;overflow:auto;padding:32px 4vw;max-width:1520px;width:100%;margin:auto}
.room-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.room-heading h1 {font-family:var(--serif);font-size:35px;font-weight:500;letter-spacing:.12em;margin:12px 0 10px}
.room-heading h1>span {font-family:var(--sans);font-size:27px;font-weight:400;letter-spacing:.15em;color:var(--gold);margin-left:20px}
.room-heading p {font-size: 14px;line-height:1.8;color:var(--muted)}
.room-connection {display:flex;align-items:center;gap:9px;white-space:nowrap;color:#a8bba2;font-size: 14px}
.room-connection.offline {color:var(--red)}
.matching-progress {display:flex;align-items:center;gap:24px;padding:25px 30px;margin:0 0 26px;border:1px solid #bea46644;border-radius:12px;background:#a2b2770d}
.matching-progress h2 {font-family:var(--serif);font-weight:400;font-size: 26px}
.matching-progress p {color:var(--muted);font-size: 15px;margin-top:6px}
.matching-progress b {color:var(--gold);font-size: 20px}
.matching-progress>.button {margin-left:auto}
.matching-spinner {width:40px;height:40px;flex:0 0 40px;border:1px solid #cabb7533;border-top:2px solid var(--gold);border-radius:50%;animation:roomspin 1.6s linear infinite}
@keyframes roomspin {to{transform:rotate(360deg)}}
.room-seats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.room-seat {position:relative;min-height:300px;padding:32px 18px 24px;text-align:center;border:1px solid var(--line);border-radius:13px;background:linear-gradient(150deg,#34524144,#12291f66)}
.room-seat.self {border-color:#cbb77970;box-shadow:inset 0 0 35px #beaf7020}
.room-seat.empty {background:#12271e55;border-style:dashed}
.room-seat-number {font-size: 11px;letter-spacing:.25em;color:var(--faint);margin-bottom:23px}
.room-seat>.avatar {width:64px;height:64px;display:block;margin:0 auto 15px}
.room-seat h2 {font-family:var(--serif);font-size: 24px;font-weight:500;overflow-wrap:anywhere}
.room-seat-tag {font-size: 13px;color:var(--muted);margin:8px 0 16px;min-height:17px}
.ready-badge {display:inline-block;font-size: 13px;color:#869381;border:1px solid #9a9b7130;border-radius:20px;padding:4px 13px}
.ready-badge.ready {color:#cbd5a2;border-color:#c8c58b4a;background:#c8c58b0d}
.room-total {font-size: 13px;color:var(--faint);margin:16px 0 0}
.room-total b {font-size: 18px;color:var(--gold);font-weight:400;padding-left:6px}
.slot-config {display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:var(--muted);font-size: 12px}
.slot-config select {max-width:150px;min-width:0;padding:7px 8px;background:#132820;color:var(--gold);border:1px solid var(--line);border-radius:5px;font-size: 13px}
.remove-seat {margin-top:14px;font-size: 12px!important;color:var(--faint)!important}
.room-bottom {display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:32px}
.invite-block {max-width:480px;flex:1}
.invite-block label {display:block;font-size: 14px;color:var(--muted);margin-bottom:9px}
.invite-block>div {display:flex;gap:9px}
.invite-block input {min-width:0;font-size: 13px;padding:11px 13px}
.invite-block .button {white-space:nowrap}
.room-controls {display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:14px}
.waiting-host {color:var(--muted);font-size: 14px}
.room-help {border-top:1px solid var(--line);padding-top:17px;margin-top:28px;color:var(--faint);font-size: 13px;line-height:1.8}
.hell-notice.compact {margin:20px 0 0;padding:13px 18px;display:flex;gap:20px;align-items:center;font-size: 13px}
.hell-notice.compact b {white-space:nowrap}
.online-clock {font-size: 12px;letter-spacing:.05em;margin-left:12px;color:var(--muted);padding:5px 9px;border:1px solid var(--line);border-radius:12px;background:#10271ddd}
.online-clock.urgent {color:#e6af88;border-color:#c8834966}
@media(max-height:800px) and (min-width:901px){.launch-screen{padding-top:18px}.cover{height:35vh;min-height:250px}.cover-copy{padding-top:24px}.cover-copy h1{font-size:56px;margin:12px 0}.cover-copy>p{font-size: 20px}.cover-details{margin-top:15px}.mode-card{min-height:155px;padding-top:17px}.mode-icon{margin-bottom:10px}.mode-card strong{font-size: 24px}.room-screen{padding-top:22px}.room-seat{min-height:280px}.room-heading{margin-bottom:20px}}
@media(max-width:1050px){.mode-grid{gap:12px}.mode-card{padding:20px 18px}.mode-card p{max-width:90%}.cover-cards{width:40%;right:2%}.cover-copy h1{font-size:56px}.room-seats{gap:12px}.slot-config{flex-direction:column}.room-bottom{align-items:stretch;flex-direction:column;gap:20px}.invite-block{max-width:none}.room-controls{justify-content:center}}
@media(max-width:760px){.launch-screen{padding:18px 18px 12px;overflow:visible}.cover{height:370px;min-height:0}.cover-copy{padding:27px 23px}.cover-copy h1{font-size:43px;letter-spacing:.08em;margin:16px 0 10px}.cover-copy>p{font-size: 16px;letter-spacing:.16em}.cover-copy .eyebrow{font-size: 11px;letter-spacing:.2em}.cover-details{font-size: 11px;gap:8px;margin-top:12px}.cover-cards{width:60%;height:57%;top:auto;bottom:6px;right:8%}.cover-sun{right:-15%;top:10%}.cover-foot{font-size: 11px;left:25px;right:25px;bottom:13px}.cover-foot>span{display:none}.cover-seal{font-size: 22px;padding:0 6px;right:20px;top:22px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.mode-card{min-height:162px;padding:18px 16px}.mode-card strong{font-size: 25px}.mode-card p{font-size: 13px;max-width:100%;padding-right:0}.mode-icon{margin-bottom:12px}.mode-arrow{right:12px;bottom:12px;opacity:.25}.launch-note{flex-direction:column;gap:10px;padding-top:18px}.launch-note>p{text-align:center;font-size: 12px}.room-screen{padding:22px 18px;overflow:visible}.room-heading{display:block;margin-bottom:18px}.room-heading h1{font-size:28px;margin-top:9px}.room-heading h1>span{font-size: 25px;display:block;margin:10px 0 0}.room-connection{margin-top:12px}.room-seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.room-seat{min-height:270px;padding:23px 12px 18px}.room-seat-number{margin-bottom:15px}.room-seat>.avatar{width:48px;height:48px}.room-seat h2{font-size: 22px}.room-seat-tag{font-size: 12px;margin:6px 0 12px}.slot-config select{max-width:100%}.matching-progress{padding:17px 14px;gap:13px;flex-wrap:wrap}.matching-progress h2{font-size: 23px}.matching-progress p{font-size: 13px}.matching-progress>.button{margin:auto}.hell-notice.compact{display:block}.hell-notice.compact p{margin-top:7px}.invite-block>div{flex-direction:column}.room-controls .button{flex:1;min-width:110px}.online-form-actions{gap:10px}.online-form-actions>.button{padding:12px}.online-clock{font-size: 11px;padding:4px 7px;margin-left:6px}.form-field{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.matching-spinner{animation:none}.mode-card{transition:none}}