@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --bg-main: #f7f5ee;
  --bg-accent: #efe6ca;
  --card-bg: #fffdf6;
  --table-bg: #1f4f3f;
  --table-grid: rgba(255, 255, 255, 0.08);
  --text-main: #1d1d1b;
  --text-muted: #5d5648;
  --button-main: #ea5f31;
  --button-main-hover: #d84e22;
  --button-text: #fff8f1;
  --border: #c7bea4;
  --shadow: 0 24px 40px rgba(41, 36, 24, 0.15);
}

* {
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  color: var(--text-main);
}

body {
  background:
    radial-gradient(circle at 15% 20%, #fff7d8 0%, transparent 45%),
    radial-gradient(circle at 90% 5%, #f3e4bd 0%, transparent 35%),
    linear-gradient(145deg, var(--bg-main), var(--bg-accent));
}

.home-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.home-card {
  width: min(92vw, 480px);
  padding: 2rem;
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.9rem;
}

.home-card h1 {
  margin: 0 0 0.4rem 0;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.input-label {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.home-profile-row {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.home-name-input {
  flex: 1;
}

.home-color-wrap {
  width: 2.45rem;
  min-width: 2.45rem;
  height: 2.45rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0.16rem;
  overflow: hidden;
}

.home-color-wrap .home-color-input[type="color"] {
  appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.home-color-wrap .home-color-input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.home-color-wrap .home-color-input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 999px;
}

input[type="text"] {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.82rem 0.9rem;
  font-size: 1rem;
  outline: none;
  background: #fff;
}

input[type="text"]:focus {
  border-color: var(--button-main);
}

input[type="color"] {
  appearance: none;
  width: 100%;
  height: 2.4rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0.22rem;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.primary-button {
  border: none;
  border-radius: 12px;
  padding: 0.92rem 1rem;
  background: var(--button-main);
  color: var(--button-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 120ms ease;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--button-main-hover);
}

.home-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.secondary-button {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.74rem 0.8rem;
  background: #fff;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}

.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: #b8ac8a;
  background: #f7f0db;
}

.secondary-button:disabled,
.secondary-button.is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
  background: #ece8dc;
  border-color: #d1c8b0;
  color: #6d685c;
}

.table-shell {
  --playspace-grid-color: rgba(255, 255, 255, 0.08);
  --playspace-dot-rgb: 255 255 255;
  --playspace-dot-opacity-base: 0.19;
  --playspace-noise-color: rgba(255, 255, 255, 0.07);
  --playspace-noise-color-soft: rgba(255, 255, 255, 0.045);
  --game-board-shell-bg: rgba(9, 14, 12, 0.9);
  --game-board-shell-border: rgba(255, 255, 255, 0.26);
  --game-board-shell-shadow: 0 16px 28px rgba(0, 0, 0, 0.36);
  --game-board-hud-bg: rgba(9, 14, 12, 0.72);
  --game-board-hud-color: rgba(236, 236, 229, 0.85);
  --tafl-shell-bg-dark: rgba(21, 29, 25, 0.9);
  --tafl-hud-bg-dark: rgba(21, 29, 25, 0.78);
  --tafl-coordinate-color-dark: rgba(198, 201, 194, 0.74);
  --playspace-noise-texture-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --playspace-noise-texture-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.48' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --grid-dot-opacity-factor: 1;
  --grid-dot-scale-factor: 1;
  --room-badge-width: 84px;
  --room-owner-copy-offset: 2.62rem;
  --hud-corner-z: 68000;
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #123328;
  transition: background-color 180ms ease;
  touch-action: none;
}

.table-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, rgba(255, 54, 54, 0.36), rgba(255, 54, 54, 0) 22%),
    linear-gradient(to top, rgba(255, 54, 54, 0.36), rgba(255, 54, 54, 0) 22%),
    linear-gradient(to right, rgba(255, 54, 54, 0.3), rgba(255, 54, 54, 0) 18%),
    linear-gradient(to left, rgba(255, 54, 54, 0.3), rgba(255, 54, 54, 0) 18%);
  transition: opacity 160ms ease;
}

.table-shell.is-delete-mode::after {
  opacity: 1;
}

.table-shell.light-mode {
  --playspace-grid-color: rgba(33, 33, 28, 0.08);
  --playspace-dot-rgb: 33 33 28;
  --playspace-dot-opacity-base: 0.2;
  --playspace-noise-color: rgba(33, 33, 28, 0.08);
  --playspace-noise-color-soft: rgba(33, 33, 28, 0.05);
  --game-board-shell-bg: rgba(245, 241, 232, 0.95);
  --game-board-shell-border: rgba(34, 29, 23, 0.22);
  --game-board-shell-shadow: 0 16px 28px rgba(45, 36, 20, 0.24);
  --game-board-hud-bg: rgba(248, 244, 235, 0.84);
  --game-board-hud-color: rgba(34, 29, 23, 0.76);
  background-color: #ddd6c6;
}

.table-shell.light-mode::after {
  background:
    linear-gradient(to bottom, rgba(198, 42, 42, 0.17), rgba(198, 42, 42, 0) 14%),
    linear-gradient(to top, rgba(198, 42, 42, 0.17), rgba(198, 42, 42, 0) 14%),
    linear-gradient(to right, rgba(198, 42, 42, 0.14), rgba(198, 42, 42, 0) 12%),
    linear-gradient(to left, rgba(198, 42, 42, 0.14), rgba(198, 42, 42, 0) 12%);
}

.playspace-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 7680px;
  height: 4320px;
  overflow: hidden;
  pointer-events: none;
  border: 3px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(8, 14, 12, 0.45) inset,
    0 16px 30px rgba(7, 12, 10, 0.34);
  background-color: #163f31;
  background-image:
    linear-gradient(
      to right,
      var(--playspace-grid-color) var(--grid-line-size, 1px),
      transparent var(--grid-line-size, 1px)
    ),
    linear-gradient(
      to bottom,
      var(--playspace-grid-color) var(--grid-line-size, 1px),
      transparent var(--grid-line-size, 1px)
    );
  background-size: var(--grid-cell-size, 42px) var(--grid-cell-size, 42px);
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.playspace-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: var(--playspace-noise-texture-a), var(--playspace-noise-texture-b);
  background-size: 210px 210px, 296px 296px;
  background-position: 0 0, 61px 37px;
  mix-blend-mode: soft-light;
  filter: contrast(202%) brightness(126%);
  transition: opacity 180ms ease;
}

.table-shell[data-playspace-pattern="dots"] .playspace-layer {
  --grid-dot-size: max(1.4px, calc(var(--grid-line-size, 1px) * 2 * var(--grid-dot-scale-factor, 1)));
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgb(var(--playspace-dot-rgb) / calc(var(--playspace-dot-opacity-base) * var(--grid-dot-opacity-factor, 1))) 0,
      rgb(var(--playspace-dot-rgb) / calc(var(--playspace-dot-opacity-base) * var(--grid-dot-opacity-factor, 1))) var(--grid-dot-size),
      transparent calc(var(--grid-dot-size) + 0.22px)
    );
  background-size: var(--grid-cell-size, 42px) var(--grid-cell-size, 42px);
  background-position:
    calc(var(--grid-cell-size, 42px) / -2)
    calc(var(--grid-cell-size, 42px) / -2);
}

.table-shell[data-playspace-pattern="noise"] .playspace-layer {
  background-image: none;
}

.table-shell[data-playspace-pattern="noise"] .playspace-layer::before {
  opacity: 0.29;
}

.table-shell[data-playspace-pattern="plain"] .playspace-layer {
  background-image: none;
}

.table-shell.light-mode .playspace-layer {
  background-color: #ece5d7;
  border-color: rgba(37, 31, 23, 0.36);
  box-shadow:
    0 0 0 1px rgba(62, 54, 40, 0.24) inset,
    0 14px 26px rgba(43, 35, 21, 0.18);
}

.table-shell.light-mode[data-playspace-pattern="noise"] .playspace-layer::before {
  opacity: 0.23;
  mix-blend-mode: multiply;
  filter: contrast(178%) brightness(80%);
}

.table-shell[data-playspace-pattern="greenscreen"] {
  background-color: #00ff42;
}

.table-shell[data-playspace-pattern="greenscreen"] .playspace-layer {
  background-color: #00ff42;
  background-image: none;
  border-color: rgba(0, 0, 0, 0.34);
}

.table-shell[data-playspace-pattern="greenscreen"] .playspace-layer::before {
  opacity: 0;
}

.table-shell.is-low-zoom-stability .playspace-layer {
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.table-shell.is-low-zoom-stability .playspace-layer::before {
  transition: none;
}

.table-shell.is-low-zoom-stability .drawing-layer,
.table-shell.is-low-zoom-stability .table-card,
.table-shell.is-low-zoom-stability .table-die,
.table-shell.is-low-zoom-stability .mons-game-shell,
.table-shell.is-low-zoom-stability .tafl-game-shell,
.table-shell.is-low-zoom-stability .go-game-shell,
.table-shell.is-low-zoom-stability .hexitama-game-shell,
.table-shell.is-low-zoom-stability .chip-stack-slot,
.table-shell.is-low-zoom-stability .hand-card,
.table-shell.is-low-zoom-stability .deck-slot,
.table-shell.is-low-zoom-stability .codegame-grid-frame {
  will-change: auto !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.table-shell.is-low-zoom-stability .table-card img,
.table-shell.is-low-zoom-stability .table-die-face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.room-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: var(--hud-corner-z);
  padding: 0.42rem 0.66rem;
  border-radius: 999px;
  color: #f9f3e0;
  background: rgba(10, 17, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.table-shell.is-room-owner .room-badge {
  left: calc(0.9rem + var(--room-owner-copy-offset));
}

.room-badge.is-editable {
  cursor: text;
}

.room-badge.is-editable:hover,
.room-badge.is-editable:focus-visible {
  background: rgba(10, 17, 15, 0.75);
}

.room-badge.is-copyable {
  cursor: pointer;
}

.room-badge.is-copyable:hover,
.room-badge.is-copyable:focus-visible {
  background: rgba(10, 17, 15, 0.75);
}

.table-shell .room-title-input {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: var(--hud-corner-z);
  min-width: 9rem;
  max-width: min(56vw, 420px);
  height: 2.02rem;
  padding: 0 0.68rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.8);
  color: #f9f3e0;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  outline: none;
}

.table-shell.is-room-owner .room-title-input {
  left: calc(0.9rem + var(--room-owner-copy-offset));
}

.table-shell .room-title-input:focus {
  border-color: rgba(234, 95, 49, 0.9);
}

.status-badge {
  position: absolute;
  top: calc(2.8rem + 5px);
  left: calc(0.9rem + 5px);
  z-index: var(--hud-corner-z);
  color: rgba(249, 243, 224, 0.9);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  opacity: 0.5;
}

.table-shell.is-room-owner .status-badge {
  left: calc(0.9rem + var(--room-owner-copy-offset) + 5px);
}

.asset-loading-status {
  position: absolute;
  top: 0.9rem;
  left: calc(0.9rem + var(--room-badge-width, 84px) + 8px);
  z-index: var(--hud-corner-z);
  height: 2.02rem;
  padding: 0 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 17, 15, 0.5);
  color: rgba(247, 243, 232, 0.88);
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  pointer-events: none;
}

.table-shell.is-room-owner .asset-loading-status {
  left: calc(0.9rem + var(--room-owner-copy-offset) + var(--room-badge-width, 84px) + 8px);
}

.asset-loading-spinner {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  border: 1.6px solid rgba(247, 243, 232, 0.24);
  border-top-color: rgba(247, 243, 232, 0.9);
  animation: assetLoadingSpin 700ms linear infinite;
}

.asset-loading-text {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}

@keyframes assetLoadingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spawn-loading-indicator {
  position: absolute;
  z-index: 56000;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(8, 12, 11, 0.34);
  border: 1px solid rgba(247, 243, 232, 0.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  backdrop-filter: blur(2.6px);
  -webkit-backdrop-filter: blur(2.6px);
}

.spawn-loading-indicator-ring {
  width: 76%;
  height: 76%;
  border-radius: 999px;
  border: 1.8px solid rgba(247, 243, 232, 0.24);
  border-top-color: rgba(247, 243, 232, 0.94);
  animation: assetLoadingSpin 680ms linear infinite;
}

.draw-mode-button {
  position: absolute;
  top: calc(3.95rem + 5px);
  left: 0.9rem;
  z-index: var(--hud-corner-z);
  width: 1.92rem;
  height: 1.92rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 17, 15, 0.58);
  color: rgba(247, 243, 232, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.draw-mode-button:hover,
.draw-mode-button:focus-visible {
  background: rgba(10, 17, 15, 0.8);
}

.draw-mode-button svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62));
}

.draw-mode-button.is-active {
  background: rgba(234, 95, 49, 0.9);
  border-color: rgba(255, 220, 206, 0.88);
  color: #fff5ea;
}

.draw-clear-button,
.draw-undo-button {
  position: absolute;
  top: calc(3.95rem + 5px);
  z-index: var(--hud-corner-z);
  width: 1.86rem;
  height: 1.92rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #d5d9df;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.draw-clear-button {
  left: calc(0.9rem + 2.24rem);
}

.draw-undo-button {
  left: calc(0.9rem + 4.18rem);
}

.draw-clear-button:hover,
.draw-clear-button:focus-visible,
.draw-undo-button:hover,
.draw-undo-button:focus-visible {
  color: #d5d9df;
  transform: translateY(-1px);
}

.draw-clear-button:disabled,
.draw-clear-button.is-disabled,
.draw-undo-button:disabled,
.draw-undo-button.is-disabled {
  opacity: 0.34;
  color: rgba(213, 217, 223, 0.56);
  cursor: default;
  transform: none;
}

.draw-clear-button:disabled:hover,
.draw-clear-button:disabled:focus-visible,
.draw-clear-button.is-disabled:hover,
.draw-clear-button.is-disabled:focus-visible,
.draw-undo-button:disabled:hover,
.draw-undo-button:disabled:focus-visible,
.draw-undo-button.is-disabled:hover,
.draw-undo-button.is-disabled:focus-visible {
  color: rgba(213, 217, 223, 0.56);
  transform: none;
}

.draw-clear-button svg,
.draw-undo-button svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62));
}

.draw-tool-row {
  position: absolute;
  top: calc(3.95rem + 5px + 2.16rem);
  left: calc(0.9rem + 2.18rem);
  z-index: var(--hud-corner-z);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.draw-tool-button {
  width: 1.76rem;
  height: 1.76rem;
  border: none;
  border-radius: 8px;
  background: rgba(10, 17, 15, 0.16);
  color: rgba(247, 243, 232, 0.74);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.draw-tool-button:hover,
.draw-tool-button:focus-visible {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(10, 17, 15, 0.34);
  transform: translateY(-1px);
}

.draw-tool-button.is-active {
  color: #fff5ea;
  background: rgba(234, 95, 49, 0.84);
}

.draw-tool-button svg {
  display: block;
}

.player-controls {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: var(--hud-corner-z);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.34rem;
}

.player-main-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.player-hand-count {
  min-width: 0;
  height: auto;
  padding: 0;
  color: rgba(247, 243, 232, 0.95);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  text-align: right;
  letter-spacing: 0.01em;
}

.player-name-button,
.player-name-input {
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: lowercase;
}

.player-name-button {
  padding: 0 0.75rem;
  cursor: pointer;
}

.player-name-input {
  width: 9.4rem;
  padding: 0 0.75rem;
  outline: none;
}

.player-name-input::placeholder {
  color: rgba(247, 243, 232, 0.72);
}

.player-name-button:hover,
.player-name-button:focus-visible,
.player-name-input:focus {
  background: rgba(10, 17, 15, 0.8);
}

.player-color-wrap {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.58);
  display: grid;
  place-items: center;
  padding: 0.24rem;
}

.player-color-wrap input[type="color"] {
  width: 1.35rem;
  height: 1.35rem;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
}

.player-color-wrap input[type="color"]::-webkit-color-swatch {
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.room-roster {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  max-width: min(42vw, 220px);
  padding: 0.38rem 0.52rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 17, 15, 0.5);
}

.room-roster-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.68rem;
  line-height: 1.15;
  color: rgba(247, 243, 232, 0.92);
  text-transform: lowercase;
  white-space: nowrap;
}

.room-roster-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  flex: 0 0 auto;
}

.room-roster-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(34vw, 180px);
}

.room-roster-count {
  min-width: 0;
  height: auto;
  padding: 0;
  color: rgba(247, 243, 232, 0.84);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  text-align: right;
  flex: 0 0 auto;
}

.hidden {
  display: none !important;
}

.cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 66000;
}

.drawing-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 7680px;
  height: 4320px;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  z-index: 10;
}

.drawing-layer-back {
  z-index: 8;
}

.game-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.secret-area-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.stack-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.cover-cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}

.promoted-cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.table-shell.has-cover-drawings-games .cover-cards-layer {
  z-index: 9;
}

.table-shell.has-cover-drawings-games .cards-layer,
.table-shell.has-cover-drawings-games .promoted-cards-layer {
  z-index: 10;
}

.table-shell.has-cover-drawings-games .drawing-layer {
  z-index: 9;
}

.mons-game-shell,
.tafl-game-shell {
  --inline-loader-size: 34px;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  border: 1px solid var(--game-board-shell-border);
  background: var(--game-board-shell-bg);
  box-shadow: var(--game-board-shell-shadow);
  overflow: hidden;
  pointer-events: auto;
}

.mons-game-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mons-game-shell.hidden {
  display: none;
}

.mons-game-shell.is-cover-drawings {
  z-index: 9;
}

.mons-game-shell.is-drag-floating {
  z-index: 61000 !important;
}

.tafl-game-shell {
  --tafl-hud-height: 0px;
  --tafl-board-visual-offset-y: -2px;
  display: block;
  padding: 0;
}

.tafl-board-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--tafl-hud-height));
  display: block;
  object-fit: fill;
  transform: translateY(var(--tafl-board-visual-offset-y));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.tafl-hud {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: auto;
}

.tafl-hud-side {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 100%;
}

.tafl-side-claim-button {
  cursor: pointer;
}

.tafl-hud .mons-hud-player-white.tafl-hud-side {
  justify-self: start;
  margin-left: 25px;
  margin-right: 0;
}

.tafl-hud .mons-hud-player-black.tafl-hud-side {
  justify-self: end;
  margin-right: 25px;
  margin-left: 0;
}

.tafl-side-claims {
  min-height: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  max-width: 128px;
  line-height: 1;
}

.tafl-side-claims-defender {
  align-items: flex-end;
  text-align: right;
}

.tafl-side-claims-attacker {
  align-items: flex-start;
  text-align: left;
}

.tafl-side-claims.is-empty {
  opacity: 0.58;
}

.tafl-side-claim-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.tafl-side-claim-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 6px;
  box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.32);
}

.tafl-side-claim-name {
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tafl-hud-center {
  gap: 8px;
}

.tafl-undo-button {
  width: 24px;
  height: 24px;
}

.tafl-reset-button {
  width: 24px;
  height: 24px;
}

.tafl-hud-status {
  min-height: 14px;
  font-size: 11px;
  line-height: 1.1;
  color: rgba(242, 236, 217, 0.82);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  user-select: none;
  pointer-events: none;
}

.tafl-hud-status.is-win {
  color: rgba(255, 244, 211, 0.98);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}

.tafl-win-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(16, 11, 8, 0.12) 0%, rgba(8, 6, 5, 0.48) 74%);
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.tafl-win-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.tafl-win-dialog {
  width: min(86%, 360px);
  border-radius: 14px;
  border: 1px solid rgba(255, 231, 189, 0.3);
  background: linear-gradient(180deg, rgba(18, 13, 10, 0.9) 0%, rgba(14, 10, 8, 0.86) 100%);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(4px);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.tafl-win-clash {
  position: relative;
  width: 206px;
  height: 182px;
  transform: translateY(calc(-30px + var(--tafl-win-elements-offset-y, 0px))) scale(var(--tafl-win-content-scale, 1));
  transform-origin: center center;
  pointer-events: none;
}

.tafl-win-clash::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 61%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.15);
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 252, 244, 0.98) 0%, rgba(255, 214, 133, 0.78) 58%, rgba(255, 168, 72, 0) 100%);
  filter: drop-shadow(0 0 8px rgba(255, 209, 118, 0.66));
}

.tafl-win-sword {
  position: absolute;
  top: 70%;
  width: 30px;
  height: 138px;
  transform-origin: 50% 90%;
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.tafl-win-sword::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 11px;
  height: 104px;
  clip-path: polygon(50% 0%, 92% 7%, 79% 100%, 21% 100%, 8% 7%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 251, 0.98) 0%,
    rgba(231, 236, 242, 0.94) 20%,
    rgba(189, 197, 206, 0.9) 62%,
    rgba(156, 166, 176, 0.9) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(92, 101, 111, 0.34), inset 0 0 0 999px rgba(255, 255, 255, 0.02), 0 0 8px rgba(255, 255, 255, 0.2);
}

.tafl-win-sword::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 38px;
  height: 34px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(206, 168, 96, 0.96) 0%, rgba(143, 104, 50, 0.96) 100%) center 7px / 26px 7px no-repeat,
    linear-gradient(180deg, rgba(133, 92, 44, 0.96) 0%, rgba(80, 52, 23, 0.96) 100%) center 16px / 8px 14px no-repeat,
    radial-gradient(circle at 50% 27px, rgba(198, 160, 89, 0.96) 0%, rgba(133, 92, 44, 0.96) 66%, rgba(80, 52, 23, 0.96) 100%) center / 10px 10px no-repeat;
  filter: drop-shadow(0 0 1px rgba(70, 41, 18, 0.52));
}

.tafl-win-sword-left {
  left: calc(36% - 7.5px);
  transform: translate(-50%, -50%) rotate(42deg);
}

.tafl-win-sword-right {
  left: calc(64% + 7.5px);
  transform: translate(-50%, -50%) rotate(-42deg);
}

.tafl-win-spark {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 2.6px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 250, 224, 0.98) 0%, rgba(255, 192, 89, 0.94) 58%, rgba(255, 116, 46, 0) 100%);
  transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateY(0) scaleY(0.18);
  transform-origin: 50% 100%;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 188, 64, 0.54));
}

.tafl-win-overlay.is-visible.is-animating .tafl-win-sword-left {
  animation: taflWinSwordLeft 1500ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.tafl-win-overlay.is-visible.is-animating .tafl-win-sword-right {
  animation: taflWinSwordRight 1500ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.tafl-win-overlay.is-visible.is-animating .tafl-win-spark {
  animation: taflWinSpark 1500ms ease-out var(--spark-delay, 0s) both;
}

.tafl-win-overlay.is-visible.is-animating .tafl-win-clash::before {
  animation: taflWinImpactFlash 1500ms ease-out both;
}

.tafl-win-title {
  font-size: clamp(17px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(252, 238, 198, 0.98);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.46);
  user-select: none;
  pointer-events: none;
  transform: translateY(var(--tafl-win-elements-offset-y, 0px));
}

.tafl-win-button {
  min-width: 146px;
  height: 34px;
  border: 1px solid rgba(255, 228, 170, 0.38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(47, 76, 120, 0.9) 0%, rgba(31, 54, 88, 0.92) 100%);
  color: rgba(238, 245, 255, 0.94);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease;
  transform: translateY(var(--tafl-win-elements-offset-y, 0px));
}

.tafl-win-button:hover,
.tafl-win-button:focus-visible {
  transform: translateY(calc(var(--tafl-win-elements-offset-y, 0px) - 1px));
  filter: brightness(1.08);
}

.tafl-win-button:active {
  transform: translateY(var(--tafl-win-elements-offset-y, 0px));
}

@keyframes taflWinSwordLeft {
  0% {
    transform: translate(-50%, -50%) rotate(84deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(42deg);
    opacity: 1;
  }
}

@keyframes taflWinSwordRight {
  0% {
    transform: translate(-50%, -50%) rotate(-84deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-42deg);
    opacity: 1;
  }
}

@keyframes taflWinSpark {
  0%,
  35% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) translateY(0) scaleY(0.18);
  }
  44% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg))
      translateY(calc(-1 * var(--spark-distance, 30px))) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg))
      translateY(calc(-1 * var(--spark-distance, 30px))) scaleY(1);
  }
}

@keyframes taflWinImpactFlash {
  0%,
  36% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
  42% {
    opacity: 0.98;
    transform: translate(-50%, -50%) scale(2.15);
  }
  54% {
    opacity: 0.24;
    transform: translate(-50%, -50%) scale(2.85);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

.tafl-board-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--tafl-hud-height));
  transform: translateY(var(--tafl-board-visual-offset-y));
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}

.tafl-coordinate-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  color: rgba(24, 24, 21, 0.66);
  font-family: monospace;
  font-size: var(--tafl-coordinate-font-size, 11px);
  line-height: 1;
}

.table-shell:not(.light-mode) .tafl-coordinate-layer {
  color: var(--tafl-coordinate-color-dark);
}

.tafl-board-coordinate {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: none;
}

.tafl-hint-layer,
.tafl-fx-layer,
.tafl-piece-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tafl-hint-layer {
  z-index: 1;
}

.tafl-piece-layer {
  z-index: 2;
}

.tafl-fx-layer {
  z-index: 3;
}

.tafl-capture-burst {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
}

.tafl-capture-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--piece-size, 28px);
  height: var(--piece-size, 28px);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 1;
  filter: drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.34));
}

.tafl-capture-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tafl-capture-burst.is-active .tafl-capture-ghost {
  animation: taflCaptureVanish 560ms linear forwards;
}

.tafl-capture-burst.is-active .tafl-capture-ghost.is-king-retained {
  animation: taflCaptureKingPulse 560ms linear forwards;
}

@keyframes taflCaptureVanish {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  42% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 0.99;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.16);
    opacity: 0.98;
  }
  78% {
    transform: translate(-50%, -50%) scale(0.82);
    opacity: 0.72;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.03);
    opacity: 0;
  }
}

@keyframes taflCaptureKingPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.88;
  }
  24% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
  52% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
  }
}

.tafl-capture-smoke {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--smoke-size, 11px);
  height: var(--smoke-size, 11px);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.28);
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(218, 214, 209, 0.52) 0%,
    rgba(132, 128, 123, 0.28) 56%,
    rgba(58, 54, 50, 0) 100%
  );
  filter: blur(1px);
}

.tafl-capture-burst.is-active .tafl-capture-smoke {
  animation: taflSmokePuff var(--smoke-dur, 0.58s) ease-out var(--smoke-delay, 0s) forwards;
}

@keyframes taflSmokePuff {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.24);
    opacity: 0;
  }
  18% {
    opacity: 0.62;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx, 12px), var(--dy, -12px)) scale(1.9);
    opacity: 0;
  }
}

.tafl-move-hint {
  position: absolute;
  width: clamp(8px, 1.6vw, 16px);
  height: clamp(8px, 1.6vw, 16px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(252, 245, 227, 0.72);
  background: rgba(235, 217, 180, 0.34);
  box-shadow: 0 0 0 1px rgba(56, 37, 22, 0.26), 0 0 8px rgba(255, 230, 184, 0.5);
  animation: taflHintPulse 1.05s ease-in-out infinite;
}

@keyframes taflHintPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.72;
  }
}

.tafl-piece {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.tafl-piece:hover,
.tafl-piece:focus-visible {
  transform: translate(-50%, -50%) scale(1.05);
}

.tafl-piece img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 1.4px rgba(0, 0, 0, 0.34));
}

.tafl-piece.is-selected {
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 239, 188, 0.54));
}

.tafl-piece.is-selected img {
  filter: drop-shadow(0 0 6px rgba(255, 236, 184, 0.72)) drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.38));
}

.go-game-shell {
  --inline-loader-size: 34px;
  display: block;
}

.go-board-surface {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--tafl-hud-height));
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 224, 166, 0.4) 0%, rgba(255, 224, 166, 0) 64%),
    linear-gradient(180deg, rgba(220, 178, 124, 0.99) 0%, rgba(198, 153, 104, 0.98) 100%);
  transform: translateY(var(--tafl-board-visual-offset-y));
}

.go-board-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--playspace-noise-texture-a), var(--playspace-noise-texture-b);
  background-size: 130px 130px, 170px 170px;
  background-position: 0 0, 33px 21px;
  opacity: 0.2;
  mix-blend-mode: multiply;
}

.table-shell.light-mode .go-board-surface::before {
  opacity: 0.16;
}

.go-board-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.go-grid-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.go-grid-line {
  stroke: rgba(44, 25, 12, 0.48);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.go-star-point {
  fill: rgba(23, 14, 8, 0.86);
}

.go-coordinate-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  color: rgba(52, 31, 15, 0.74);
  font-family: monospace;
  font-size: var(--go-coordinate-font-size, 11px);
  line-height: 1;
}

.table-shell:not(.light-mode) .go-coordinate-layer {
  color: rgba(224, 207, 176, 0.72);
}

.go-board-coordinate {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: none;
}

.go-hint-layer,
.go-fx-layer,
.go-stone-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.go-hint-layer {
  z-index: 2;
}

.go-stone-layer {
  z-index: 3;
}

.go-fx-layer {
  z-index: 4;
}

.go-stone {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  border-radius: 999px;
  pointer-events: none;
}

.go-stone-black {
  background: radial-gradient(circle at 33% 30%, rgb(151, 151, 151) 0%, rgb(38, 38, 38) 38%, rgb(8, 8, 8) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.55);
}

.go-stone-white {
  background: radial-gradient(circle at 35% 28%, rgb(255, 255, 255) 0%, rgb(232, 232, 232) 62%, rgb(192, 192, 192) 100%);
  box-shadow: inset 0 0 0 1px rgba(41, 41, 41, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.go-stone.go-stone-ghost {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0.44;
}

.go-stone.is-capture-preview {
  filter: saturate(1.14) brightness(1.08);
  box-shadow: 0 0 0 1.2px rgba(114, 188, 255, 0.7), 0 0 10px rgba(114, 188, 255, 0.4);
  animation: goCapturePreviewPulse 780ms ease-in-out infinite;
}

.go-stone.is-placed-pop {
  animation: goStonePlacedPop 240ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
  will-change: transform;
}

.go-capture-burst {
  position: absolute;
  width: var(--go-stone-size, 18px);
  height: var(--go-stone-size, 18px);
  will-change: auto;
  overflow: visible;
  pointer-events: none;
}

.go-capture-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  contain: paint;
  backface-visibility: hidden;
  opacity: 1;
}

.go-capture-burst.is-active .go-capture-ghost {
  animation: goCaptureStoneVanish 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.go-capture-ghost.go-stone-black,
.go-capture-ghost.go-stone-white {
  box-shadow: none;
}

.go-capture-smoke {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--smoke-size, 9px);
  height: var(--smoke-size, 9px);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.26);
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(222, 214, 202, 0.48) 0%,
    rgba(125, 114, 99, 0.24) 56%,
    rgba(58, 52, 44, 0) 100%
  );
  filter: blur(0.8px);
}

.go-capture-burst.is-active .go-capture-smoke {
  animation: goCaptureSmokePuff var(--smoke-dur, 0.56s) ease-out var(--smoke-delay, 0s) forwards;
}

@keyframes goCapturePreviewPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(114, 188, 255, 0.58), 0 0 7px rgba(114, 188, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 1.45px rgba(140, 204, 255, 0.88), 0 0 13px rgba(126, 196, 255, 0.52);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(114, 188, 255, 0.58), 0 0 7px rgba(114, 188, 255, 0.3);
  }
}

@keyframes goStonePlacedPop {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes goCaptureStoneVanish {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) scale(0);
    opacity: 0;
  }
}

@keyframes goCaptureSmokePuff {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.24);
    opacity: 0;
  }
  20% {
    opacity: 0.52;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx, 11px), var(--dy, -11px)) scale(1.74);
    opacity: 0;
  }
}

.go-hud {
  position: absolute;
  left: 0;
  bottom: 0;
}

.go-hud-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 100%;
}

.go-hud .mons-hud-player-black.go-hud-side {
  margin-right: min(34px, 10%);
  margin-left: 0;
}

.go-hud .mons-hud-player-white.go-hud-side {
  margin-left: min(34px, 10%);
  margin-right: 0;
}

.go-hud-center {
  gap: 8px;
}

.go-side-claim-button {
  position: relative;
  border-radius: 999px;
}

.go-side-claim-button.is-active-turn {
  box-shadow: 0 0 0 1.25px rgba(94, 166, 255, 0.98);
}

.go-hud-stone-icon {
  display: block;
  width: 72%;
  height: 72%;
  margin: auto;
  border-radius: 999px;
}

.go-hud-stone-icon-black {
  background: radial-gradient(circle at 33% 30%, rgba(146, 146, 146, 0.35) 0%, rgba(31, 31, 31, 0.96) 44%, rgba(8, 8, 8, 1) 100%);
}

.go-hud-stone-icon-white {
  background: radial-gradient(circle at 33% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(228, 228, 228, 0.98) 64%, rgba(185, 185, 185, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(41, 41, 41, 0.28);
}

.go-hud-score {
  min-width: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: rgba(244, 234, 214, 0.9);
}

.go-pass-button {
  min-width: 42px;
  width: auto;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.go-hud-status {
  min-height: 14px;
  font-size: 11px;
  line-height: 1.1;
  color: rgba(242, 236, 217, 0.82);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  user-select: none;
  pointer-events: none;
}

.table-shell.light-mode .go-side-claim-button.is-active-turn {
  box-shadow: 0 0 0 1.25px rgba(64, 133, 242, 0.9);
}

.table-shell.light-mode .go-hud-score {
  color: rgba(10, 10, 10, 0.96);
}

.go-win-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(16, 11, 8, 0.12) 0%, rgba(8, 6, 5, 0.48) 74%);
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.go-win-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.go-win-dialog {
  border-radius: 14px;
  border: 1px solid rgba(255, 231, 189, 0.3);
  background: linear-gradient(180deg, rgba(18, 13, 10, 0.9) 0%, rgba(14, 10, 8, 0.86) 100%);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(4px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.go-win-title {
  font-size: clamp(17px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(252, 238, 198, 0.98);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.46);
}

.go-win-score {
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: rgba(236, 230, 214, 0.86);
}

.go-win-button {
  text-transform: uppercase;
}

.hexitama-game-shell {
  --inline-loader-size: 34px;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: auto;
  padding: 0;
}

.hexitama-board-surface {
  position: absolute;
  inset: 0;
  background: none;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.34));
  transition: filter 180ms ease;
}

.hexitama-board-surface::before {
  content: none;
}

.hexitama-board-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  overflow: visible;
}

.hexitama-board-hex-base {
}

.hexitama-board-hex-outline {
  fill: none;
  stroke: rgba(245, 248, 255, 0.92);
  stroke-width: 3;
}

.hexitama-chief-temple-icon {
  opacity: 0.3;
  pointer-events: none;
}

.hexitama-card-slot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.hexitama-card-slot-label {
  fill: transparent;
  font-size: 40px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.table-shell.light-mode .hexitama-board-hex-outline {
  stroke: rgba(8, 10, 12, 0.92);
}

.table-shell.light-mode .hexitama-board-surface {
  filter: drop-shadow(0 12px 22px rgba(43, 35, 21, 0.2));
}

.table-shell.light-mode .hexitama-card-slot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  opacity: 0;
}

.hexitama-piece {
  pointer-events: auto;
  user-select: none;
  image-rendering: auto;
  filter: drop-shadow(0 1px 1.3px rgba(0, 0, 0, 0.45));
  cursor: default;
  transform-box: fill-box;
  transform-origin: center center;
  transition: transform 120ms ease, filter 120ms ease;
}

.hexitama-piece.is-card-side-active,
.hexitama-piece[data-hexitama-card-side-active='1'] {
  transform: translateY(-1.5%) scale(1.075);
}

.hexitama-game-shell.is-piece-pixelated .hexitama-piece {
  image-rendering: pixelated;
}

.hexitama-piece.is-chief {
  filter: drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.52));
}

.hexitama-piece.is-chief.is-inverted {
  filter: invert(1) brightness(1.08) drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.52));
}

.hexitama-piece.is-selected,
.hexitama-piece[data-hexitama-selected='1'] {
  filter: drop-shadow(0 0 8px rgba(108, 170, 255, 0.78)) drop-shadow(0 1px 1.3px rgba(0, 0, 0, 0.45));
}

.hexitama-piece.is-chief.is-selected,
.hexitama-piece.is-chief[data-hexitama-selected='1'] {
  filter: drop-shadow(0 0 8px rgba(108, 170, 255, 0.78)) drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.52));
}

.hexitama-piece.is-chief.is-inverted.is-selected,
.hexitama-piece.is-chief.is-inverted[data-hexitama-selected='1'] {
  filter: invert(1) brightness(1.08) drop-shadow(0 0 8px rgba(108, 170, 255, 0.78)) drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.52));
}

.hexitama-move-dot {
  fill: rgba(66, 130, 255, 0.82);
  stroke: rgba(210, 234, 255, 0.95);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px rgba(82, 142, 255, 0.8));
  opacity: 0.95;
  transform-box: fill-box;
  transform-origin: center center;
  animation: hexitamaMoveDotPulse 1.05s ease-in-out infinite;
  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
}

.hexitama-move-dot:hover {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(104, 162, 255, 0.92));
}

@keyframes hexitamaMoveDotPulse {
  0% {
    transform: scale(0.88);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(0.88);
    opacity: 0.72;
  }
}

.hexitama-capture-target {
  fill: rgba(255, 78, 78, 0.06);
  stroke: rgba(255, 92, 92, 0.98);
  stroke-width: 3.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(255, 74, 74, 0.62));
  opacity: 0.96;
  transition: opacity 120ms ease, filter 120ms ease, fill 120ms ease;
}

.hexitama-capture-target:hover {
  fill: rgba(255, 78, 78, 0.11);
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255, 74, 74, 0.82));
}

.mons-board-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(10, 14, 13, 0.44);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.mons-board-ghost:hover,
.mons-board-ghost:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28);
}

.mons-board-ghost img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.mons-board-svg {
  position: relative;
  width: 100%;
  height: auto;
  border: 0;
  display: block;
  background: #d7d7d2;
}

.mons-board-tile {
  stroke: rgba(106, 106, 100, 0.58);
  stroke-width: 0.03;
}

.mons-board-coordinate {
  font-family: monospace;
  font-size: 0.24px;
  fill: rgba(24, 24, 21, 0.66);
  user-select: none;
  pointer-events: none;
}

.mons-board-svg.is-coordinates-hidden .mons-board-coordinate {
  display: none;
}

.mons-hud,
.tafl-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 14px;
  box-sizing: border-box;
  color: var(--game-board-hud-color);
  background: var(--game-board-hud-bg);
}

.mons-hud-player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: relative;
}

.mons-hud-player-white {
  justify-self: start;
}

.mons-hud-player-black {
  justify-self: end;
}

.mons-hud-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mons-hud-avatar {
  width: 26px;
  height: 26px;
  object-fit: cover;
  image-rendering: auto;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.mons-hud-avatar-wrap {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}

.mons-hud-avatar-button {
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.96;
  transition: opacity 120ms ease, filter 120ms ease;
}

.mons-hud-avatar-button:hover,
.mons-hud-avatar-button:focus-visible {
  opacity: 1;
  filter: brightness(1.08);
}

.mons-hud-avatar-button.is-claimed {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(132, 198, 255, 0.72));
}

.mons-hud-avatar-button.is-side-full {
  opacity: 0.46;
}

.mons-hud-avatar-button:disabled {
  cursor: default;
}

.mons-side-claims {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
  min-width: max-content;
  z-index: 56000;
}

.mons-side-claim-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.mons-side-claim-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex: 0 0 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.mons-side-claim-name {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.mons-hud-score {
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(242, 242, 237, 0.92);
}

.mons-hud-potions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
}

.mons-hud-potions.is-hidden {
  display: none;
}

.mons-hud-potions.mons-hud-potions-black {
  flex-direction: row-reverse;
}

.mons-hud-potion {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  opacity: 0.94;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.mons-undo-button,
.mons-flip-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(11, 18, 15, 0.72);
  color: rgba(247, 243, 232, 0.8);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.mons-undo-button svg,
.mons-flip-button svg {
  width: 54%;
  height: 54%;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 180ms ease;
}

.mons-flip-button.is-flipped svg {
  transform: scaleY(-1);
}

.mons-undo-button:hover,
.mons-undo-button:focus-visible,
.mons-flip-button:hover,
.mons-flip-button:focus-visible {
  background: rgba(11, 18, 15, 0.84);
  color: rgba(247, 243, 232, 0.95);
}

.mons-undo-button.is-disabled,
.mons-undo-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.mons-move-button {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 50000;
}

.drawing-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 140ms ease, filter 140ms ease, scale 140ms ease;
}

.drawing-stroke.is-note-attached {
  transform-box: fill-box;
  transform-origin: center;
}

.drawing-stroke.is-note-flipping {
  animation: noteAttachmentFlip 220ms cubic-bezier(0.28, 0.72, 0.25, 1);
}

.drawing-stroke.is-note-editing-dim {
  opacity: 0.2;
}

@keyframes noteAttachmentFlip {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.05);
  }
  100% {
    transform: scaleX(1);
  }
}

.drawing-shape-preview {
  opacity: 0.78;
}

.drawing-anchor-dot {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2.2;
  opacity: 0.92;
}

.cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.held-cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60000;
}

.hand-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  max-height: 360px;
  pointer-events: none;
  z-index: 62000;
  overflow: visible;
}

.hand-card {
  --inline-loader-size: 24px;
  position: absolute;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform-origin: center bottom;
  transform: translateY(0) scale(1);
  transition:
    transform 130ms ease,
    box-shadow 130ms ease,
    filter 130ms ease;
  pointer-events: auto;
}

.hand-card.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hand-card.is-image-component-blank-face img {
  opacity: 0;
}

.hand-card img {
  display: block;
  width: 100%;
  height: calc(100% - 12px);
  margin: 6px 0;
  object-fit: fill;
  object-position: center;
  image-rendering: auto;
  pointer-events: none;
}

.hand-note-drawing-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  display: none;
  z-index: 2;
}

.hand-note-drawing-layer.is-active {
  display: block;
}

.hand-card.is-note-component {
  border-radius: 0;
  background: rgba(244, 217, 127, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 18px rgba(68, 53, 20, 0.34);
}

.hand-card.is-note-component img {
  border-radius: 0;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.hand-card.is-hexitama-card {
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.hand-card.is-hexitama-card img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: fill;
}

.hand-card.is-front-pending img {
  opacity: 0;
}

.hand-card.is-front-pending::before,
.hand-card.is-asset-loading:not(.is-front-pending)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 12, 11, 0.34);
  backdrop-filter: blur(1.8px);
  -webkit-backdrop-filter: blur(1.8px);
  pointer-events: none;
  z-index: 2;
}

.hand-card.is-front-pending::after,
.hand-card.is-asset-loading:not(.is-front-pending)::after {
  content: "";
  position: absolute;
  inset: auto;
  left: calc(50% + var(--inline-loader-offset-x, 0px));
  top: calc(50% + var(--inline-loader-offset-y, 0px));
  right: auto;
  bottom: auto;
  margin: 0;
  width: 28%;
  aspect-ratio: 1 / 1;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 999px;
  border: 1.7px solid rgba(247, 243, 232, 0.24);
  border-top-color: rgba(247, 243, 232, 0.94);
  animation: assetLoadingSpin 680ms linear infinite;
  pointer-events: none;
  z-index: 3;
}

.hand-card.is-preview {
  opacity: 0.94;
  pointer-events: none;
}

.hand-card.is-reordering-active {
  cursor: grabbing;
  transform: translateY(-108px) scale(1.12);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.44);
  z-index: 99999 !important;
}

.hand-card.is-hovered,
.hand-card:focus-visible {
  transform: translateY(-132px) scale(1.588);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.4);
  z-index: 999 !important;
}

.table-shell.is-card-dragging .hand-card {
  pointer-events: none;
}

.table-shell.is-card-dragging .hand-card.is-hovered,
.table-shell.is-card-dragging .hand-card:focus-visible {
  transform: translateY(0) scale(1);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.3);
  z-index: auto !important;
}

.hand-drop-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  z-index: 61500;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.24) 28%,
    rgba(255, 255, 255, 0) 82%
  );
  transition: opacity 180ms ease;
}

.hand-drop-glow.is-visible {
  opacity: 1;
}

.auction-bid-board {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 62520;
  min-width: min(52vw, 260px);
  max-width: min(84vw, 440px);
  padding: 0.46rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 17, 15, 0.58);
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.24rem;
  pointer-events: none;
}

.auction-bid-empty {
  font-size: 0.68rem;
  color: rgba(247, 243, 232, 0.58);
  text-align: center;
  text-transform: lowercase;
}

.auction-bid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.32rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.auction-bid-player {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.auction-bid-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
  flex: 0 0 auto;
}

.auction-bid-name {
  min-width: 0;
  max-width: min(46vw, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.2;
  color: rgba(247, 243, 232, 0.94);
  text-transform: lowercase;
}

.auction-bid-value {
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 700;
  color: rgba(247, 243, 232, 0.98);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.auction-bid-entry {
  position: absolute;
  left: 50%;
  top: calc(0.9rem + 4.2rem);
  bottom: auto;
  transform: translateX(-50%);
  z-index: 62530;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.38rem;
  pointer-events: auto;
}

.auction-bid-row {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.auction-bid-label {
  position: relative;
  top: 1px;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(247, 243, 232, 0.92);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.auction-bid-input {
  width: min(26.4vw, 132px);
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  text-transform: lowercase;
}

.auction-bid-submit-button {
  height: 1.66rem;
  min-width: 2.05rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
}

.auction-bid-submit-button svg {
  display: block;
  transform: translateX(1.6px);
}

.auction-bid-submit-button:hover,
.auction-bid-submit-button:focus-visible {
  background: rgba(10, 17, 15, 0.8);
}

.auction-bid-input::placeholder {
  color: rgba(247, 243, 232, 0.7);
}

.auction-bid-input:focus {
  background: rgba(10, 17, 15, 0.8);
  border-color: rgba(255, 255, 255, 0.44);
}

.auction-bid-input.is-invalid {
  border-color: rgba(255, 118, 118, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 88, 88, 0.3);
}

.selection-box {
  position: absolute;
  z-index: 65000;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(8, 14, 12, 0.18) inset;
}

.marble-flick-arrow {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  pointer-events: none;
  z-index: 64800;
  transform-origin: left center;
}

.marble-flick-arrow-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-top: 3px solid rgba(246, 250, 255, 0.95);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.marble-flick-arrow-head {
  position: absolute;
  right: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  background: rgba(246, 250, 255, 0.95);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.58));
}

.table-die {
  --die-scale: 1;
  --die-rotation-deg: 0deg;
  --inline-loader-size: 22px;
  position: absolute;
  width: 84px;
  height: 84px;
  border: none;
  border-radius: 14px;
  padding: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%) rotate(var(--die-rotation-deg)) scale(var(--die-scale));
  transform-origin: center center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform 110ms ease, box-shadow 110ms ease, filter 110ms ease, background-color 180ms ease;
}

.table-die.table-die-coin {
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-die.table-die-marble {
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-die.table-die-spinner {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.table-die.table-die-arcade {
  border-radius: calc(14 * var(--arcade-unit, 1px));
  background: linear-gradient(180deg, rgba(26, 31, 44, 0.92) 0%, rgba(10, 12, 20, 0.95) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}

.table-die.table-die-arcade .table-die-face {
  box-sizing: border-box;
  padding: 4.8% 5.2% 5.2%;
}

.table-arcade-shell {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: calc(11 * var(--arcade-unit, 1px));
  border: calc(1.1 * var(--arcade-unit, 1px)) solid rgba(247, 243, 232, 0.24);
  background: linear-gradient(180deg, rgba(20, 25, 36, 0.95) 0%, rgba(8, 12, 20, 0.97) 100%);
  box-shadow:
    0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(4, 7, 12, 0.28) inset,
    0 calc(10 * var(--arcade-unit, 1px)) calc(18 * var(--arcade-unit, 1px)) rgba(0, 0, 0, 0.3) inset;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 78%) minmax(0, 22%);
  gap: 5%;
  padding: 5.5% 5.6% 6.1%;
}

.table-arcade-shell.has-owner {
  grid-template-rows: minmax(0, 78%) minmax(0, 22%);
  gap: 5%;
}

.table-arcade-screen {
  border-radius: calc(8 * var(--arcade-unit, 1px));
  border: calc(1 * var(--arcade-unit, 1px)) solid rgba(171, 200, 255, 0.34);
  background: linear-gradient(180deg, rgba(5, 10, 16, 0.95) 0%, rgba(1, 5, 10, 0.98) 100%);
  box-shadow:
    0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(3, 6, 10, 0.44) inset,
    0 calc(8 * var(--arcade-unit, 1px)) calc(14 * var(--arcade-unit, 1px)) rgba(0, 0, 0, 0.36) inset;
  min-height: 0;
  display: block;
}

.table-arcade-screen.is-load-screen {
  background: #000;
}

.table-arcade-screen-inner {
  --arcade-pixel-text-squish: 0.92;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.14em;
  padding: 8.4% 10.4% 7.5%;
  box-sizing: border-box;
  color: rgba(154, 238, 173, 0.92);
  font-family: "VT323", "Press Start 2P", "Courier New", Courier, monospace;
  font-size: calc(28 * var(--arcade-unit, 1px));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow:
    0 0 4px rgba(100, 240, 136, 0.2),
    0 0 10px rgba(18, 48, 24, 0.24);
}

.table-arcade-screen-inner .table-arcade-line,
.table-arcade-screen-inner .table-arcade-info-title,
.table-arcade-screen-inner .table-arcade-info-subtext,
.table-arcade-screen-inner .table-arcade-score-row,
.table-arcade-screen-inner .table-arcade-score-empty,
.table-arcade-screen-inner .table-arcade-score-hint {
  transform: scaleY(var(--arcade-pixel-text-squish, 0.92));
  transform-origin: 50% 50%;
}

.table-arcade-screen-inner.is-canvas-screen {
  padding: 0;
  gap: 0;
}

.table-arcade-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

.table-arcade-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 90ms ease, color 90ms ease;
}

.table-arcade-line-load {
  color: rgba(172, 212, 255, 0.86);
}

.table-arcade-line-spacer {
  min-height: 0.8em;
  opacity: 0;
}

.table-arcade-line-option {
  color: rgba(154, 238, 173, 0.82);
}

.table-arcade-line-option.is-selected {
  color: rgba(198, 248, 212, 0.98);
}

.table-arcade-line-option.is-selected.is-j-pressed {
  opacity: 0.54;
}

.table-arcade-screen-inner.is-info-screen {
  justify-content: flex-start;
  gap: calc(11 * var(--arcade-unit, 1px));
  padding-top: 8.5%;
}

.table-arcade-screen-inner.is-scores-screen {
  justify-content: flex-start;
  gap: calc(8 * var(--arcade-unit, 1px));
  padding-top: 8.5%;
}

.table-arcade-info-title {
  color: rgba(154, 238, 173, 0.88);
  font-size: calc(22 * var(--arcade-unit, 1px));
  line-height: 1.34;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
  margin-top: calc(30 * var(--arcade-unit, 1px));
  margin-bottom: calc(30 * var(--arcade-unit, 1px));
}

.table-arcade-info-subtext {
  color: rgba(154, 238, 173, 0.88);
  font-size: calc(22 * var(--arcade-unit, 1px));
  line-height: 1.34;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
}

.table-arcade-scores-list {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--arcade-unit, 1px));
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(4 * var(--arcade-unit, 1px));
}

.table-arcade-score-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--arcade-unit, 1px));
  min-height: calc(24 * var(--arcade-unit, 1px));
  font-size: calc(17 * var(--arcade-unit, 1px));
  line-height: 1.2;
  color: rgba(160, 243, 179, 0.9);
}

.table-arcade-score-rank {
  width: calc(24 * var(--arcade-unit, 1px));
  flex: 0 0 calc(24 * var(--arcade-unit, 1px));
  text-align: right;
  color: rgba(172, 214, 255, 0.88);
}

.table-arcade-score-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--arcade-score-color, rgba(224, 250, 231, 0.95));
}

.table-arcade-score-value {
  flex: 0 0 auto;
  color: inherit;
}

.table-arcade-score-empty {
  font-size: calc(20 * var(--arcade-unit, 1px));
  color: rgba(170, 214, 255, 0.86);
  line-height: 1.28;
}

.table-arcade-score-hint {
  margin-top: calc(2 * var(--arcade-unit, 1px));
  font-size: calc(14 * var(--arcade-unit, 1px));
  color: rgba(174, 214, 255, 0.76);
  letter-spacing: 0.02em;
}

.table-arcade-owner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(22% + 2.2%);
  z-index: 2;
  max-width: 84%;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--arcade-unit, 1px));
  font-family: "Courier New", Courier, monospace;
  font-size: calc(16 * var(--arcade-unit, 1px));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(247, 243, 232, 0.9);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

.table-arcade-owner-dot {
  width: calc(8 * var(--arcade-unit, 1px));
  height: calc(8 * var(--arcade-unit, 1px));
  border-radius: 999px;
  background: var(--arcade-owner-color, #ff7a59);
  box-shadow: 0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(0, 0, 0, 0.26);
}

.table-arcade-owner-label {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-arcade-owner-score {
  min-width: 1.1em;
  text-align: left;
  color: rgba(194, 250, 208, 0.96);
}

.table-arcade-owner-separator {
  width: calc(5 * var(--arcade-unit, 1px));
  height: calc(5 * var(--arcade-unit, 1px));
  margin-inline: calc(3 * var(--arcade-unit, 1px));
  border-radius: 999px;
  background: rgba(247, 243, 232, 0.78);
  box-shadow: 0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(0, 0, 0, 0.22);
}

.table-arcade-controls {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8%;
}

.table-arcade-stick-block {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: calc(13 * var(--arcade-unit, 1px));
}

.table-arcade-stick {
  --arcade-stick-axis-x: 0;
  --arcade-stick-axis-y: 0;
  --arcade-stick-shift-x: calc(var(--arcade-stick-axis-x, 0) * 8.8 * var(--arcade-unit, 1px));
  --arcade-stick-shift-y: calc(var(--arcade-stick-axis-y, 0) * 7.6 * var(--arcade-unit, 1px));
  --arcade-stick-stem-shift-x: calc(var(--arcade-stick-axis-x, 0) * 3.8 * var(--arcade-unit, 1px));
  --arcade-stick-stem-shift-y: calc(var(--arcade-stick-axis-y, 0) * 2.8 * var(--arcade-unit, 1px));
  position: relative;
  width: calc(58 * var(--arcade-unit, 1px));
  height: calc(58 * var(--arcade-unit, 1px));
  border-radius: 999px;
  border: calc(1 * var(--arcade-unit, 1px)) solid rgba(247, 243, 232, 0.26);
  background: rgba(247, 243, 232, 0.08);
  box-shadow: 0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(6, 10, 16, 0.4) inset;
  transition: border-color 90ms ease, background-color 90ms ease;
}

.table-arcade-stick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(5.2 * var(--arcade-unit, 1px));
  height: calc(25 * var(--arcade-unit, 1px));
  border-radius: 999px;
  transform: translate(
    calc(-50% + var(--arcade-stick-stem-shift-x)),
    calc(-100% + var(--arcade-stick-stem-shift-y))
  ) rotate(calc(var(--arcade-stick-axis-x, 0) * 15deg));
  transform-origin: 50% 100%;
  background: rgba(247, 243, 232, 0.64);
  transition: transform 85ms ease-out;
}

.table-arcade-stick-knob {
  position: absolute;
  left: 50%;
  top: 15%;
  width: calc(18 * var(--arcade-unit, 1px));
  height: calc(18 * var(--arcade-unit, 1px));
  border-radius: 999px;
  transform: translate(
    calc(-50% + var(--arcade-stick-shift-x)),
    calc(-50% + var(--arcade-stick-shift-y))
  );
  background: rgba(247, 243, 232, 0.92);
  transition: transform 85ms ease-out;
}

.table-arcade-control-label {
  color: rgba(247, 243, 232, 0.84);
  font-family: "Courier New", Courier, monospace;
  font-size: calc(20 * var(--arcade-unit, 1px));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.table-arcade-buttons-block {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8 * var(--arcade-unit, 1px));
}

.table-arcade-button {
  width: calc(42 * var(--arcade-unit, 1px));
  height: calc(42 * var(--arcade-unit, 1px));
  border-radius: 999px;
  border: calc(1 * var(--arcade-unit, 1px)) solid rgba(247, 243, 232, 0.3);
  background: rgba(247, 243, 232, 0.1);
  color: rgba(247, 243, 232, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: calc(20 * var(--arcade-unit, 1px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 calc(1 * var(--arcade-unit, 1px)) rgba(6, 10, 16, 0.34) inset;
  transition: opacity 90ms ease, background-color 90ms ease, transform 90ms ease;
}

.table-arcade-button.is-pressed {
  opacity: 0.64;
  background: rgba(247, 243, 232, 0.18);
  transform: translateY(calc(1 * var(--arcade-unit, 1px)));
}

.table-die.table-die-arcade.is-arcade-focused {
  box-shadow:
    0 0 0 1px rgba(120, 180, 255, 0.72),
    0 10px 18px rgba(0, 0, 0, 0.42);
}

.table-die.table-die-arcade.is-arcade-focused .table-arcade-screen {
  border-color: rgba(140, 196, 255, 0.64);
}

.table-die.table-die-d6,
.table-die.table-die-d20 {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-die.table-die-label {
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.table-die.table-die-stack-point {
  border-radius: 9px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

.table-die.table-die-stack-point .table-die-face {
  background: transparent;
  border-radius: 9px;
  border: 1px dashed rgba(247, 243, 232, 0.32);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.table-die.table-die-stack-point.is-stack-point-hovered .table-die-face {
  border-color: rgba(247, 243, 232, 0.58);
  background: rgba(247, 243, 232, 0.05);
}

.table-die.table-die-stack-point::before {
  content: "↓";
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translate(-50%, -88%) scale(1.8);
  transform-origin: center center;
  color: rgba(255, 255, 255, 0.97);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.92),
    0 8px 14px rgba(0, 0, 0, 0.84);
  transition: opacity 90ms ease, transform 90ms ease, visibility 90ms ease;
}

.table-die.table-die-stack-point.is-stack-point-hovered::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -100%) scale(2.5);
}

.table-stack-point-count {
  left: calc(50% + 13px);
  top: calc(100% + 12px);
  z-index: 3;
  min-width: 1.45rem;
  height: 1.16rem;
  font-size: 0.7rem;
  padding: 0 0.34rem;
}

.table-stack-point-shuffle-button {
  left: calc(50% - 13px);
  top: calc(100% + 12px);
  width: 19px;
  height: 19px;
  z-index: 3;
  border-radius: 6px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.22);
}

.table-stack-point-shuffle-button svg {
  width: 58%;
  height: 58%;
}

.table-die.table-die-label::after {
  display: none;
}

.table-die.table-die-coin::after,
.table-die.table-die-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 64%;
  height: 20%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transform: translateX(-50%) scale(1);
  filter: blur(1px);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.21) 48%,
    rgba(0, 0, 0, 0) 78%
  );
}

.table-die-face {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.table-die.table-die-label .table-die-face {
  display: block;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: visible;
  user-select: none;
}

.table-die.table-die-label .table-label-text {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0 0.02em;
  text-shadow: 0 0.8px 1.4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.table-die.table-die-label .table-label-editor {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: none;
  resize: none;
  overflow: visible;
  background: transparent;
  color: inherit;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-shadow: 0 0.8px 1.4px rgba(0, 0, 0, 0.3);
  outline: none;
  padding: 0 0.02em;
  margin: 0;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  caret-color: currentColor;
}

.table-die.table-die-label .table-label-editor::placeholder {
  color: inherit;
  opacity: 0.58;
}

.table-die.table-die-label.is-label-editing {
  --die-scale: 1;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.table-die.table-die-label.is-label-editing .table-die-face {
  user-select: text;
  -webkit-user-select: text;
}

.table-die.table-die-label.is-held-by-self,
.table-die.table-die-label.is-held-by-other,
.table-die.table-die-label.is-group-selected {
  box-shadow: none;
  background: transparent;
}

.table-die.table-die-label .table-label-resize-handle,
.table-die.table-die-media .table-label-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.table-die.table-die-label .table-label-lock-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.table-die.table-die-label .table-label-rotate-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.table-die.table-die-label .table-label-lock-control .lock-icon {
  display: block;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.table-die.table-die-label .table-label-rotate-control svg {
  display: block;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.table-die.table-die-label .table-label-lock-control .lock-icon-closed {
  display: none;
}

.table-die.table-die-label .table-label-lock-control.is-locked .lock-icon-open {
  display: none;
}

.table-die.table-die-label .table-label-lock-control.is-locked .lock-icon-closed {
  display: block;
}

.table-die.table-die-label .table-label-lock-control:hover,
.table-die.table-die-label .table-label-lock-control:focus-visible,
.table-die.table-die-label .table-label-rotate-control:hover,
.table-die.table-die-label .table-label-rotate-control:focus-visible {
  background: rgba(18, 30, 24, 0.62);
}

.table-die.table-die-label .table-label-resize-handle svg,
.table-die.table-die-media .table-label-resize-handle svg {
  display: block;
  pointer-events: none;
}

.table-die.table-die-label.is-resizable-label:hover .table-label-resize-handle,
.table-die.table-die-label.is-label-resize-hovered .table-label-resize-handle,
.table-die.table-die-label.is-die-resize-hovered .table-label-resize-handle,
.table-die.table-die-label.is-resizing-label .table-label-resize-handle {
  opacity: 1;
}

.table-die.table-die-label.is-label-lockable:not(.is-label-locked):hover .table-label-lock-control,
.table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-lock-hovered .table-label-lock-control,
.table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-resize-hovered .table-label-lock-control,
.table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-rotate-hovered .table-label-lock-control,
.table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-resizing-label .table-label-lock-control,
.table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-rotating-label .table-label-lock-control,
.table-die.table-die-label .table-label-lock-control:focus-visible {
  opacity: 0.96;
}

.table-die.table-die-label.is-label-locked .table-label-lock-control {
  opacity: 0;
}

.table-die.table-die-label.is-label-locked .table-label-lock-control:hover,
.table-die.table-die-label.is-label-locked .table-label-lock-control:focus-visible,
.table-die.table-die-label.is-label-locked .table-label-lock-control:active {
  opacity: 0.96;
}

.table-die.table-die-label.is-rotatable-label:hover .table-label-rotate-control,
.table-die.table-die-label.is-rotatable-label.is-die-rotate-hovered .table-label-rotate-control,
.table-die.table-die-label.is-rotatable-label.is-die-resize-hovered .table-label-rotate-control,
.table-die.table-die-label.is-rotatable-label.is-die-lock-hovered .table-label-rotate-control,
.table-die.table-die-label.is-rotatable-label.is-resizing-label .table-label-rotate-control,
.table-die.table-die-label.is-rotatable-label.is-rotating-label .table-label-rotate-control,
.table-die.table-die-label .table-label-rotate-control:focus-visible {
  opacity: 0.96;
}

.table-die.table-die-label.is-label-locked {
  cursor: default;
}

.table-die.table-die-label.is-resizing-label {
  cursor: nwse-resize;
}

.table-die.table-die-label.is-rotating-label {
  cursor: grab;
}

.table-die.table-die-media {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow: visible;
}

.table-die.table-die-counter,
.table-die.table-die-timer {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow: hidden;
}

.table-die.table-die-media .table-die-face {
  box-sizing: border-box;
  padding: 7px;
}

.table-die.table-die-counter .table-die-face {
  box-sizing: border-box;
  padding: 6% 4.5% 5.5%;
}

.table-die.table-die-timer .table-die-face {
  box-sizing: border-box;
  padding: 5.2% 4.4% 4.8%;
}

.table-counter-shell {
  width: 100%;
  height: 100%;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 72%) minmax(0, 28%);
  gap: 5%;
}

.table-counter-display {
  border-radius: 8px;
  border: 1px solid rgba(247, 243, 232, 0.2);
  background: rgba(12, 17, 16, 0.56);
  box-shadow: 0 0 0 1px rgba(5, 9, 8, 0.16) inset;
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 0.4fr) repeat(4, minmax(0, 1fr));
  gap: 4%;
  align-items: center;
  justify-items: center;
  padding: 7% 6% 6%;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.table-counter-sign,
.table-counter-digit {
  position: relative;
  width: 86%;
  min-height: 0;
  height: 100%;
  max-width: none;
  justify-self: center;
}

.table-counter-sign {
  width: 82%;
  justify-self: center;
}

.table-counter-segment {
  position: absolute;
  border-radius: 0;
  background: rgba(255, 91, 91, 0.17);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: background-color, box-shadow, opacity;
  transition: background-color 100ms ease, box-shadow 100ms ease, opacity 100ms ease;
}

.table-counter-segment.is-active {
  background: rgba(255, 110, 110, 0.98);
  box-shadow:
    0 0 5px rgba(255, 92, 92, 0.66),
    0 0 10px rgba(255, 92, 92, 0.4);
}

.table-counter-segment-a,
.table-counter-segment-d,
.table-counter-segment-g {
  left: 22%;
  width: 56%;
  height: 9%;
}

.table-counter-segment-a {
  top: calc(3% - 2px);
}

.table-counter-segment-g {
  top: 45%;
}

.table-counter-segment-d {
  top: 87%;
}

.table-counter-segment-b,
.table-counter-segment-c,
.table-counter-segment-e,
.table-counter-segment-f {
  width: 10%;
  height: 34%;
  clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%);
  -webkit-clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%);
}

.table-counter-segment-b {
  right: 8%;
  top: 8%;
}

.table-counter-segment-c {
  right: 8%;
  top: 51%;
}

.table-counter-segment-e {
  left: 8%;
  top: 51%;
}

.table-counter-segment-f {
  left: 8%;
  top: 8%;
}

.table-counter-sign .table-counter-segment-g {
  left: 0;
  right: 0;
  width: 100%;
  top: 46%;
  height: 8%;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  -webkit-clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

.table-counter-sign .table-counter-segment:not(.is-active) {
  background: rgba(255, 91, 91, 0.08);
}

.table-counter-controls {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3%;
}

.table-counter-control {
  min-height: 0;
  height: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 16, 14, 0.52);
  color: rgba(247, 243, 232, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--counter-control-font-size, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 110ms ease, border-color 110ms ease, transform 110ms ease;
}

.table-counter-control[data-counter-reset="1"] {
  background: rgba(14, 17, 16, 0.7);
  border-color: rgba(255, 255, 255, 0.24);
}

.table-die.table-die-counter.is-counter-controls-hidden .table-counter-control {
  color: transparent;
  text-shadow: none;
}

.table-counter-control:hover,
.table-counter-control:focus-visible,
.table-counter-control:active {
  background: rgba(19, 28, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.34);
}

.table-counter-control[data-counter-reset="1"]:hover,
.table-counter-control[data-counter-reset="1"]:focus-visible,
.table-counter-control[data-counter-reset="1"]:active {
  background: rgba(20, 24, 22, 0.82);
  border-color: rgba(255, 255, 255, 0.4);
}

.table-timer-shell {
  width: 100%;
  height: 100%;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 45%) minmax(0, 22%) minmax(0, 33%);
  gap: 4.2%;
}

.table-timer-shell.is-no-splits {
  grid-template-rows: minmax(0, 45%) minmax(0, 22%) minmax(0, 33%);
  gap: 4.2%;
}

.table-die.table-die-timer {
  transition: transform 110ms ease, box-shadow 110ms ease, filter 110ms ease, background-color 180ms ease, clip-path 150ms ease;
}

.table-die.table-die-timer.is-timer-no-splits {
  clip-path: inset(0 0 34% 0 round 12px);
  -webkit-clip-path: inset(0 0 34% 0 round 12px);
}

.table-timer-display {
  border-radius: 8px;
  border: 1px solid rgba(247, 243, 232, 0.2);
  background: rgba(12, 17, 16, 0.56);
  box-shadow: 0 0 0 1px rgba(5, 9, 8, 0.16) inset;
  display: grid;
  min-height: 0;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 0.34fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 0.28fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 2.2%;
  align-items: center;
  justify-items: center;
  padding: 5.2% 5.4% 5.9%;
}

.table-timer-digit {
  width: 86%;
  height: 100%;
  min-height: 0;
}

.table-timer-separator {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  color: rgba(255, 110, 110, 0.9);
  font-size: 0;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

.table-timer-separator::before,
.table-timer-separator::after {
  content: '';
  display: block;
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.94;
}

.table-timer-separator-colon {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16%;
}

.table-timer-separator-dot {
  align-items: flex-end;
  padding-bottom: 18%;
}

.table-timer-separator-dot::after {
  display: none;
}

.table-timer-controls {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5%;
}

.table-timer-control {
  min-height: 0;
  height: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 16, 14, 0.52);
  color: rgba(247, 243, 232, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--timer-control-font-size, 11px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 110ms ease, border-color 110ms ease, transform 110ms ease, opacity 110ms ease;
}

.table-timer-control-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34em;
  min-width: 0;
}

.table-timer-control-icon {
  width: 1.34em;
  height: 1.34em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-timer-control-label {
  display: inline-flex;
  align-items: center;
}

.table-timer-control.is-disabled {
  opacity: 0.5;
}

.table-timer-control:hover,
.table-timer-control:focus-visible,
.table-timer-control:active {
  background: rgba(19, 28, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.34);
}

.table-timer-splits {
  border-radius: 7px;
  border: 1px solid rgba(247, 243, 232, 0.16);
  background: rgba(8, 12, 11, 0.44);
  box-shadow: 0 0 0 1px rgba(5, 9, 8, 0.1) inset;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
  padding: 5% 7% 6%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.table-timer-split-row,
.table-timer-split-empty {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(9px, calc(var(--timer-control-font-size, 11px) * 0.84), 11px);
  line-height: 1.46;
  color: rgba(247, 243, 232, 0.86);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.table-timer-split-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8em;
  min-height: 1.5em;
  padding: 3px 0 4px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.table-timer-split-row + .table-timer-split-row {
  border-top: 1px solid rgba(247, 243, 232, 0.08);
  margin-top: 2px;
  padding-top: 4px;
}

.table-timer-split-index {
  flex: 0 0 auto;
  opacity: 0.72;
  line-height: 1.46;
  padding-bottom: 0;
}

.table-timer-split-value {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.46;
  padding-bottom: 0;
}

.table-timer-split-empty {
  opacity: 0.58;
}

.table-die.table-die-timer.is-timer-controls-hidden .table-timer-control,
.table-die.table-die-timer.is-timer-controls-hidden .table-timer-split-row,
.table-die.table-die-timer.is-timer-controls-hidden .table-timer-split-empty {
  color: transparent;
  text-shadow: none;
}

.table-media-frame {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 232, 0.28);
  background: rgba(10, 12, 14, 0.88);
  box-shadow: 0 0 0 1px rgba(8, 14, 12, 0.22) inset;
}

.table-media-embed {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0a0c0e;
}

.table-media-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(247, 243, 232, 0.7);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  padding: 8px;
  text-align: center;
}

.table-die.table-die-media.is-resizable-media:hover .table-label-resize-handle,
.table-die.table-die-media.is-die-resize-hovered .table-label-resize-handle,
.table-die.table-die-media.is-resizing-media .table-label-resize-handle {
  opacity: 1;
}

.table-die.table-die-media.is-resizing-media {
  cursor: nwse-resize;
}

.table-die.table-die-chip {
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-die.table-die-chip.is-chip-spawn-fade {
  animation: chipSpawnFadeIn 170ms ease-out;
}

@keyframes chipSpawnFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.table-die.table-die-chip .table-die-face {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.table-chip-shell {
  stroke: rgba(247, 243, 232, 0.3);
  stroke-width: 1.4;
}

.table-chip-outer-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.9;
}

.table-chip-inner {
  fill: rgba(255, 255, 255, 0.12);
}

.table-chip-inner-ring {
  fill: none;
  stroke: rgba(247, 243, 232, 0.8);
  stroke-width: 1.2;
  stroke-dasharray: 1.4 2.4;
  stroke-linecap: round;
}

.table-chip-label {
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke-width: 0.95;
}

.table-die.table-die-chip.is-chip-contrast-boost .table-die-svg {
  filter: drop-shadow(0 1px 1.6px rgba(0, 0, 0, 0.3));
}

.table-die.table-die-chip.is-chip-contrast-boost .table-chip-shell {
  stroke: rgba(34, 26, 18, 0.58);
}

.table-die.table-die-chip.is-chip-contrast-boost .table-chip-outer-ring {
  stroke: rgba(42, 32, 24, 0.54);
}

.table-die.table-die-chip.is-chip-contrast-boost .table-chip-inner {
  fill: rgba(255, 255, 255, 0.24);
}

.table-die.table-die-chip.is-chip-contrast-boost .table-chip-inner-ring {
  stroke: rgba(44, 34, 24, 0.7);
  stroke-width: 1.34;
}

.table-die.table-die-chip.is-chip-contrast-boost .table-chip-label {
  filter: drop-shadow(0 0.8px 0.9px rgba(12, 10, 8, 0.3));
}

.table-die.table-die-coin .table-die-face {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.table-die.table-die-coin .table-die-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.26) inset,
    0 0 0 4px rgba(10, 12, 13, 0.07) inset;
  z-index: 2;
}

.table-die.table-die-coin .table-die-face::after,
.table-die.table-die-chip .table-die-face::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.38;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.04) 54%, rgba(255, 255, 255, 0) 72%);
  z-index: 3;
}

.table-die.table-die-marble .table-die-face {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(
    circle at 32% 28%,
    hsla(var(--marble-hue, 218), 100%, 97%, 0.92),
    hsla(var(--marble-hue, 218), 78%, 82%, 0.66) 32%,
    hsla(var(--marble-hue, 218), 76%, 54%, 0.92) 70%,
    hsla(var(--marble-hue, 218), 76%, 34%, 0.98) 100%
  );
  box-shadow:
    0 0 0 1px rgba(247, 243, 232, 0.46) inset,
    0 -8px 12px rgba(255, 255, 255, 0.24) inset,
    0 7px 11px rgba(4, 10, 20, 0.32) inset;
}

.table-die.table-die-marble .table-die-face::before {
  content: "";
  position: absolute;
  inset: 10% 16% 54% 14%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.9;
  background: radial-gradient(circle at 35% 36%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.46) 38%, rgba(255, 255, 255, 0) 76%);
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
  will-change: transform, opacity, filter;
}

.table-die.table-die-marble .table-die-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 14%, rgba(255, 255, 255, 0) 45%, rgba(8, 20, 48, 0.22) 100%);
}

.table-die.table-die-marble .table-marble-shine {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
  will-change: transform, opacity, filter;
}

.table-die-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.table-spinner-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.table-spinner-wheel {
  width: 100%;
  height: 100%;
  display: block;
}

.table-spinner-segment {
  fill: rgba(255, 255, 255, 0.26);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.44;
  transition: opacity 150ms ease, filter 150ms ease;
}

.table-spinner-segment:nth-child(odd) {
  fill: rgba(255, 255, 255, 0.36);
}

.table-die.table-die-spinner .table-spinner-segment.is-dimmed {
  opacity: 0.26;
  filter: none;
}

.table-die.table-die-spinner .table-spinner-segment.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.34));
}

.table-spinner-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.2;
}

.table-spinner-separator {
  stroke: rgba(255, 255, 255, 0.52);
  stroke-width: 1.05;
  stroke-linecap: round;
}

.table-spinner-label {
  fill: rgba(255, 255, 255, 0.94);
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  stroke: rgba(8, 14, 12, 0.54);
  stroke-width: 0.9;
  stroke-linejoin: round;
  transition: opacity 150ms ease, filter 150ms ease;
}

.table-die.table-die-spinner .table-spinner-label.is-dimmed {
  opacity: 0.2;
  filter: none;
}

.table-die.table-die-spinner .table-spinner-label.is-active {
  opacity: 1;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.75));
}

.table-spinner-needle {
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 2.7;
  stroke-linecap: round;
  filter: drop-shadow(0 1.2px 1.8px rgba(0, 0, 0, 0.45));
}

.table-spinner-needle-head {
  fill: rgba(255, 255, 255, 0.98);
}

.table-spinner-center {
  fill: rgba(10, 16, 14, 0.9);
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1.35;
}

.table-spinner-result {
  position: absolute;
  left: 50%;
  top: calc(-18% + 20px);
  transform: translate(-50%, -100%);
  max-width: min(140px, 170%);
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 232, 0.38);
  background: rgba(10, 16, 14, 0.7);
  color: rgba(247, 243, 232, 0.96);
  padding: 3px 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
}

.table-die.table-die-spinner.is-rolling .table-spinner-result {
  opacity: 0;
}

.table-die.table-die-spinner.is-rolling .table-spinner-needle-group {
  transition: none;
}

.table-die-d6-bg,
.table-die-d20-bg {
  fill: rgba(247, 243, 232, 0.3);
  opacity: var(--die-roll-bg-opacity, 1);
  transition: opacity 55ms linear;
}

.table-die-outline {
  fill: none;
  stroke: rgba(247, 243, 232, 0.95);
  stroke-width: 3.8;
  stroke-linejoin: round;
}

.table-die-d20-shell {
  fill: none;
  stroke: rgba(247, 243, 232, 0.95);
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.table-die-d20-facet {
  fill: none;
  stroke: rgba(247, 243, 232, 0.62);
  stroke-width: 2;
  stroke-linecap: round;
}

.table-die-pip {
  fill: rgba(247, 243, 232, 0.95);
}

.table-die-number {
  fill: rgba(247, 243, 232, 0.95);
  font-family: "Courier New", Courier, monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.table-die-d20-number {
  font-size: 30px;
}

.table-shell:not(.light-mode) .table-die.table-die-d6 .table-die-outline,
.table-shell:not(.light-mode) .table-die.table-die-d20 .table-die-d20-shell,
.table-shell:not(.light-mode) .table-die.table-die-spinner .table-spinner-ring {
  filter: drop-shadow(0 2.4px 4.2px rgba(0, 0, 0, 0.62));
}

.table-shell:not(.light-mode) .table-die.table-die-marble .table-die-face {
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.46));
}

.table-shell:not(.light-mode) .table-die.table-die-d6 .table-die-pip,
.table-shell:not(.light-mode) .table-die.table-die-d20 .table-die-number,
.table-shell:not(.light-mode) .table-die.table-die-spinner .table-spinner-label {
  filter: drop-shadow(0 2px 3.4px rgba(0, 0, 0, 0.66));
}

.table-coin-shell {
  fill: rgba(255, 255, 255, 0.34);
  stroke: rgba(247, 243, 232, 0.95);
  stroke-width: 3;
}

.table-coin-inner {
  fill: none;
  stroke: rgba(18, 18, 18, 0.72);
  stroke-width: 2;
  stroke-dasharray: 2.2 2.8;
}

.table-coin-sprite {
  opacity: 0.98;
  filter: drop-shadow(0 0.9px 0.5px rgba(0, 0, 0, 0.3));
}

.table-die.is-held-by-self {
  cursor: grabbing;
  --die-scale: 1.04;
  box-shadow: 0 11px 20px rgba(0, 0, 0, 0.34);
}

.table-die.is-held-by-other {
  cursor: not-allowed;
  filter: saturate(0.82) brightness(0.9);
}

.table-die.is-group-selected {
  --die-scale: 1.08;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.46),
    0 9px 18px rgba(0, 0, 0, 0.3);
}

.table-die.is-group-selected.is-held-by-self {
  --die-scale: 1.12;
}

.table-die.is-rolling {
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.34);
}

.table-die.is-rolling .table-die-face {
  animation: dieRollingScale 220ms ease-in-out infinite;
}

.table-die.table-die-coin.is-rolling .table-die-face,
.table-die.table-die-chip.is-rolling .table-die-face {
  animation: coinFlip3d 620ms cubic-bezier(0.2, 0.67, 0.31, 1) infinite;
}

.table-die.table-die-spinner.is-rolling .table-die-face {
  animation: none;
}

.table-die.table-die-coin.is-rolling,
.table-die.table-die-coin.is-rolling.is-group-selected,
.table-die.table-die-coin.is-rolling.is-group-selected.is-held-by-self,
.table-die.table-die-coin.is-rolling.is-held-by-self,
.table-die.table-die-coin.is-rolling.is-held-by-other,
.table-die.table-die-chip.is-rolling,
.table-die.table-die-chip.is-rolling.is-group-selected,
.table-die.table-die-chip.is-rolling.is-group-selected.is-held-by-self,
.table-die.table-die-chip.is-rolling.is-held-by-self,
.table-die.table-die-chip.is-rolling.is-held-by-other {
  box-shadow: none !important;
}

.table-die.table-die-coin.is-rolling .table-die-face::after,
.table-die.table-die-chip.is-rolling .table-die-face::after {
  animation: coinFlipGlint 620ms linear infinite;
}

.table-die.table-die-coin.is-rolling::after,
.table-die.table-die-chip.is-rolling::after {
  opacity: 1;
  animation: coinFlipGroundShadow 620ms cubic-bezier(0.2, 0.67, 0.31, 1) infinite;
}

.table-card {
  --card-scale: 1;
  --card-rotation-deg: 0deg;
  --inline-loader-size: 26px;
  position: absolute;
  width: 216px;
  height: 302.4px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--card-rotation-deg)) scale(var(--card-scale));
  transform-origin: center center;
  transform-style: preserve-3d;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
  will-change: transform;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease,
    background-color 180ms ease;
}

.table-card.is-stack-buried {
  box-shadow: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.table-card.is-in-deck,
.table-card.is-in-discard,
.table-card.is-in-auction {
  box-shadow: none !important;
}

.table-card.is-in-deck.is-held-by-self,
.table-card.is-in-deck.is-group-selected,
.table-card.is-in-discard.is-held-by-self,
.table-card.is-in-discard.is-group-selected,
.table-card.is-in-auction.is-held-by-self,
.table-card.is-in-auction.is-group-selected {
  box-shadow: none !important;
}

.table-card.is-stack-shadow-anchor {
  box-shadow: none !important;
}

.table-card.is-discard-returning {
  transition:
    left 300ms cubic-bezier(0.2, 0.74, 0.24, 1),
    top 300ms cubic-bezier(0.2, 0.74, 0.24, 1),
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease,
    background-color 180ms ease;
}

.table-card.is-hexitama-swapping {
  transition:
    left 240ms cubic-bezier(0.2, 0.74, 0.24, 1),
    top 240ms cubic-bezier(0.2, 0.74, 0.24, 1),
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease,
    background-color 180ms ease;
}

.table-card.is-flipping {
  animation: cardFlip3d 220ms cubic-bezier(0.28, 0.72, 0.25, 1);
}

.table-card img {
  display: block;
  width: 100%;
  height: calc(100% - 12px);
  margin: 6px 0;
  object-fit: fill;
  object-position: center;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: none;
  pointer-events: none;
  transition: filter 120ms ease;
}

.table-card.is-hexitama-card {
  --hexitama-selection-ring-size: 132%;
  --hexitama-selection-ring-opacity: 0.7;
  --hexitama-selected-scale: 1;
  --hexitama-selection-ring-scale-compensate: 1;
  --hexitama-selection-ring-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 91.6,26 91.6,74 50,98 8.4,74 8.4,26' fill='none' stroke='%230b0b0b' stroke-width='5.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-radius: 0;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  clip-path: none;
  -webkit-clip-path: none;
  overflow: visible;
  isolation: isolate;
  box-shadow: none !important;
  cursor: pointer;
}

.table-card.is-hexitama-card.is-hexitama-action-selected,
.table-card.is-hexitama-card[data-hexitama-action-selected='1'] {
  --hexitama-selected-scale: 1.078;
  --hexitama-selection-ring-scale-compensate: calc(1 / var(--hexitama-selected-scale));
  transform: translate(-50%, -50%) rotate(var(--card-rotation-deg))
    scale(calc(var(--card-scale) * var(--hexitama-selected-scale)));
}

.table-shell:not(.light-mode) .table-card.is-hexitama-card {
  --hexitama-selection-ring-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 91.6,26 91.6,74 50,98 8.4,74 8.4,26' fill='none' stroke='%23ffffff' stroke-width='5.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.table-card.is-hexitama-card:not(.has-hexitama-selection-overlay).is-hexitama-action-selected::after,
.table-card.is-hexitama-card:not(.has-hexitama-selection-overlay)[data-hexitama-action-selected='1']::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hexitama-selection-ring-size, 132%);
  height: var(--hexitama-selection-ring-size, 132%);
  transform: translate(-50%, -50%) scale(var(--hexitama-selection-ring-scale-compensate, 1));
  background-image: var(--hexitama-selection-ring-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  opacity: var(--hexitama-selection-ring-opacity, 0.7);
  pointer-events: none;
  z-index: 5;
}

.table-shell:not(.light-mode) .table-card.is-hexitama-card:not(.has-hexitama-selection-overlay).is-hexitama-action-selected::after,
.table-shell:not(.light-mode) .table-card.is-hexitama-card:not(.has-hexitama-selection-overlay)[data-hexitama-action-selected='1']::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 91.6,26 91.6,74 50,98 8.4,74 8.4,26' fill='none' stroke='%23ffffff' stroke-width='5.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.table-card-hexitama-selection-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hexitama-selection-ring-size, 132%);
  height: var(--hexitama-selection-ring-size, 132%);
  transform: translate(-50%, -50%) scale(var(--hexitama-selection-ring-scale-compensate, 1));
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: var(--hexitama-selection-ring-image);
  transition: opacity 40ms linear;
}

.table-shell:not(.light-mode) .table-card.is-hexitama-card .table-card-hexitama-selection-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 91.6,26 91.6,74 50,98 8.4,74 8.4,26' fill='none' stroke='%23ffffff' stroke-width='5.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.table-card-hexitama-selection-overlay.is-visible {
  opacity: var(--hexitama-selection-ring-opacity, 0.7);
}

.table-card.is-hexitama-card img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: fill;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.34));
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.table-shell.light-mode .table-card.is-hexitama-card img {
  filter: drop-shadow(0 7px 13px rgba(45, 36, 20, 0.26));
}

.table-card.is-hexitama-card.is-front-pending img,
.table-card.is-hexitama-card.is-asset-loading img {
  opacity: 1 !important;
}

.table-card.is-hexitama-card.is-front-pending::before,
.table-card.is-hexitama-card.is-front-pending::after,
.table-card.is-hexitama-card.is-asset-loading::before,
.table-card.is-hexitama-card.is-asset-loading::after {
  display: none !important;
}

.table-card-codegame-key-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 4px solid transparent;
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.table-card-codegame-mark-fill {
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  box-shadow: none;
}

.table-card-codegame-mark-fill.is-blue {
  background: rgba(56, 117, 214, 0.68);
  box-shadow: inset 0 0 0 999px rgba(56, 117, 214, 0.3), inset 0 0 0 3px rgba(176, 208, 255, 0.58);
}

.table-card-codegame-mark-fill.is-red {
  background: rgba(201, 63, 76, 0.68);
  box-shadow: inset 0 0 0 999px rgba(201, 63, 76, 0.3), inset 0 0 0 3px rgba(255, 206, 206, 0.5);
}

.table-card-codegame-mark-fill.is-assassin {
  background: rgba(18, 18, 20, 0.74);
  box-shadow: inset 0 0 0 999px rgba(8, 8, 10, 0.34), inset 0 0 0 3px rgba(154, 154, 154, 0.32);
}

.table-card-codegame-mark-fill.is-assassin.is-visible::after {
  content: '☠';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(42px, 34%, 72px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.66), 0 0 12px rgba(0, 0, 0, 0.44);
  pointer-events: none;
}

.table-card-codegame-mark-fill.is-neutral {
  background: rgba(248, 250, 255, 0.72);
  box-shadow: inset 0 0 0 999px rgba(244, 247, 255, 0.34), inset 0 0 0 3px rgba(212, 219, 233, 0.48);
}

.table-card-codegame-mark-fill.is-visible {
  opacity: 0.96;
}

.table-card-codegame-debug {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 20;
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #f5f7ff;
  font: 600 10px/1.25 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-card.is-codegame-marked {
  outline: 3px solid transparent;
  outline-offset: -3px;
}

.table-card.is-codegame-mark-blue {
  outline-color: rgba(102, 160, 255, 0.92);
}

.table-card.is-codegame-mark-red {
  outline-color: rgba(235, 118, 130, 0.92);
}

.table-card.is-codegame-mark-assassin {
  outline-color: rgba(54, 54, 60, 0.96);
}

.table-card.is-codegame-mark-neutral {
  outline-color: rgba(226, 230, 242, 0.96);
}

.table-card-codegame-key-overlay.is-blue {
  border-color: rgba(52, 112, 210, 0.96);
  box-shadow: inset 0 0 0 3px rgba(156, 194, 255, 0.42), 0 0 0 1px rgba(42, 82, 168, 0.42);
}

.table-card-codegame-key-overlay.is-red {
  border-color: rgba(201, 63, 76, 0.96);
  box-shadow: inset 0 0 0 3px rgba(255, 194, 194, 0.36), 0 0 0 1px rgba(148, 45, 57, 0.4);
}

.table-card-codegame-key-overlay.is-assassin {
  border-color: rgba(34, 34, 38, 0.96);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.32);
}

.table-card-codegame-key-overlay.is-neutral {
  border-color: rgba(236, 240, 246, 0.95);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.34), 0 0 0 1px rgba(196, 203, 216, 0.42);
}

.table-card-codegame-key-overlay.is-marked.is-blue {
  background: rgba(56, 117, 214, 0.68);
  box-shadow: inset 0 0 0 999px rgba(56, 117, 214, 0.3), inset 0 0 0 3px rgba(176, 208, 255, 0.58);
}

.table-card-codegame-key-overlay.is-marked.is-red {
  background: rgba(201, 63, 76, 0.68);
  box-shadow: inset 0 0 0 999px rgba(201, 63, 76, 0.3), inset 0 0 0 3px rgba(255, 206, 206, 0.5);
}

.table-card-codegame-key-overlay.is-marked.is-assassin {
  background: rgba(18, 18, 20, 0.74);
  box-shadow: inset 0 0 0 999px rgba(8, 8, 10, 0.34), inset 0 0 0 3px rgba(154, 154, 154, 0.32);
}

.table-card-codegame-key-overlay.is-marked.is-neutral {
  background: rgba(248, 250, 255, 0.72);
  box-shadow: inset 0 0 0 999px rgba(244, 247, 255, 0.34), inset 0 0 0 3px rgba(212, 219, 233, 0.48);
}

.table-card-codegame-key-overlay.is-visible {
  opacity: 1;
}

.table-card.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-card.is-image-component-blank-face img {
  opacity: 0;
}

.table-card.is-image-component-card img {
  object-fit: cover;
}

.table-card.is-image-component-native {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.table-card.is-image-component-native.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-card.is-image-component-native img {
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.table-card.is-secret-area-component {
  --secret-area-shadow: 0 9px 20px rgba(0, 0, 0, 0.26);
  border-radius: 10px;
  border: 1.7px dashed var(--secret-area-owner-color, rgba(247, 243, 232, 0.88));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--secret-area-shadow);
  overflow: visible;
  pointer-events: none;
}

.table-card.is-secret-area-component img {
  opacity: 0;
}

.table-card.is-secret-area-component.is-image-component-blank-face {
  background: transparent;
}

.table-card.is-secret-area-component.is-group-selected {
  border-color: var(--secret-area-owner-color, rgba(247, 243, 232, 0.88));
  box-shadow: var(--secret-area-shadow);
}

.table-card.is-secret-area-component.is-held-by-self,
.table-card.is-secret-area-component.is-held-by-other {
  --card-scale: 1;
  box-shadow: var(--secret-area-shadow);
}

.table-card.is-secret-area-component.is-resizing,
.table-card.is-secret-area-component.is-rotating {
  --card-scale: 1;
}

.table-card.is-secret-area-component.is-resizable-image:hover,
.table-card.is-secret-area-component.is-resizable-image.is-resize-hovered,
.table-card.is-secret-area-component.is-resizable-image.is-rotate-hovered,
.table-card.is-secret-area-component.is-resizable-image.is-resizing {
  background: transparent;
  outline: none;
  box-shadow: var(--secret-area-shadow);
}

.table-card.is-secret-area-component .table-card-lock-control,
.table-card.is-secret-area-component .table-card-rotate-control,
.table-card.is-secret-area-component .table-card-resize-handle,
.table-card.is-secret-area-component .table-card-move-control {
  pointer-events: auto;
}

.secret-area-owner-row {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.secret-area-owner-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex: 0 0 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.secret-area-owner-name {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(240, 240, 236, 0.92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.table-card.is-note-component {
  border-radius: 0;
  background: rgba(244, 217, 127, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 18px rgba(68, 53, 20, 0.34);
}

.table-card.is-note-component img {
  border-radius: 0;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.table-card.is-note-component.is-group-selected {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.56),
    0 14px 24px rgba(66, 52, 20, 0.36);
}

.table-card.is-note-editing {
  cursor: text;
  box-shadow:
    0 0 0 2px rgba(191, 149, 52, 0.78),
    0 14px 26px rgba(64, 47, 16, 0.42);
}

.table-card.is-note-editing img {
  opacity: 0;
}

.table-note-inline-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(60, 52, 31, 0.96);
  padding:
    var(--note-editor-pad-top, 14px)
    var(--note-editor-pad-right, 22px)
    var(--note-editor-pad-bottom, 14px)
    var(--note-editor-pad-left, 14px);
  box-sizing: border-box;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: var(--note-editor-font-size, 24px);
  line-height: var(--note-editor-line-height, 28px);
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  cursor: inherit;
  caret-color: currentColor;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 90ms ease;
}

.table-note-inline-text.is-visible {
  opacity: 1;
}

.table-note-inline-text.is-editing {
  opacity: 1;
  pointer-events: auto;
  user-select: text;
  cursor: text;
}

.table-note-inline-text:focus {
  outline: none;
}

.table-note-inline-text[contenteditable='true'] {
  pointer-events: auto;
  user-select: text;
  cursor: text;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-note-inline-text:not([readonly]) {
  pointer-events: auto;
  user-select: text;
  cursor: text;
}

.table-card.is-sticker-component-native {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.table-card.is-sticker-component-native img {
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.24));
}

.table-card:is(.is-sticker-component-native, .is-image-component-native).is-component-locked {
  cursor: default;
}

.table-card.is-sticker-component-native.is-group-selected {
  box-shadow: none;
}

.table-card.is-sticker-component-native.is-held-by-self,
.table-card.is-sticker-component-native.is-held-by-other {
  box-shadow: none;
}

.table-card.is-sticker-component-native.is-resizable-image:hover,
.table-card.is-sticker-component-native.is-resizable-image.is-resize-hovered,
.table-card.is-sticker-component-native.is-resizable-image.is-rotate-hovered,
.table-card.is-sticker-component-native.is-resizable-image.is-resizing {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  outline: 1px dotted rgba(255, 255, 255, 0.9);
  outline-offset: 0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.table-card-lock-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-top-left-radius: 9px;
  border-bottom-right-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transform: translateZ(0);
  transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.table-card-lock-control .lock-icon {
  display: block;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.table-card-lock-control .lock-icon-closed {
  display: none;
}

.table-card-lock-control.is-locked .lock-icon-open {
  display: none;
}

.table-card-lock-control.is-locked .lock-icon-closed {
  display: block;
}

.table-card-lock-control:hover,
.table-card-lock-control:focus-visible {
  background: rgba(18, 30, 24, 0.62);
}

.table-card:is(.is-sticker-component-native, .is-image-component-native) .table-card-lock-control {
  pointer-events: auto;
}

.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked):hover .table-card-lock-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-resize-hovered .table-card-lock-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-rotate-hovered .table-card-lock-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-rotating .table-card-lock-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-resizing .table-card-lock-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked) .table-card-lock-control:focus-visible {
  opacity: 0.96;
}

.table-card:is(.is-sticker-component-native, .is-image-component-native).is-component-locked .table-card-lock-control {
  opacity: 0;
}

.table-card:is(.is-sticker-component-native, .is-image-component-native).is-component-locked .table-card-lock-control:hover,
.table-card:is(.is-sticker-component-native, .is-image-component-native).is-component-locked .table-card-lock-control:focus-visible,
.table-card:is(.is-sticker-component-native, .is-image-component-native).is-component-locked .table-card-lock-control:active {
  opacity: 0.96;
}

.table-card-rotate-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-top-right-radius: 9px;
  border-bottom-left-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: grab;
  pointer-events: none;
  touch-action: none;
  opacity: 0;
  z-index: 4;
  transform: translateZ(0);
  transition: opacity 120ms ease, background-color 120ms ease;
}

.table-card-rotate-control svg {
  display: block;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.table-card-rotate-control:hover,
.table-card-rotate-control:focus-visible {
  background: rgba(18, 30, 24, 0.62);
}

.table-card:is(.is-sticker-component-native, .is-image-component-native) .table-card-rotate-control {
  pointer-events: auto;
}

.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked):hover .table-card-rotate-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-resize-hovered .table-card-rotate-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-rotate-hovered .table-card-rotate-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-resizing .table-card-rotate-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked).is-rotating .table-card-rotate-control,
.table-card:is(.is-sticker-component-native, .is-image-component-native):not(.is-component-locked) .table-card-rotate-control:focus-visible {
  opacity: 0.96;
}

.table-card-move-control {
  position: absolute;
  left: auto;
  right: -34px;
  bottom: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: grab;
  pointer-events: none;
  touch-action: none;
  opacity: 0;
  z-index: 4;
  transform: translateZ(0);
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.table-card-move-control.is-secret-area-overlay {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: calc(var(--hud-corner-z) + 80);
  pointer-events: auto;
  opacity: 0.96;
}

.table-card-move-control svg {
  display: block;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.table-card-move-control:hover,
.table-card-move-control:focus-visible {
  background: rgba(18, 30, 24, 0.62);
}

.table-card.is-secret-area-component .table-card-lock-control,
.table-card.is-secret-area-component .table-card-rotate-control,
.table-card.is-secret-area-component .table-card-resize-handle {
  pointer-events: auto;
  opacity: 0;
}

.table-card.is-secret-area-component .table-card-move-control {
  left: auto;
  right: -34px;
  bottom: 0;
  opacity: 0.96;
}

.table-card.is-secret-area-component:hover .table-card-lock-control,
.table-card.is-secret-area-component:hover .table-card-rotate-control,
.table-card.is-secret-area-component:hover .table-card-resize-handle,
.table-card.is-secret-area-component.is-secret-area-hovered .table-card-lock-control,
.table-card.is-secret-area-component.is-secret-area-hovered .table-card-rotate-control,
.table-card.is-secret-area-component.is-secret-area-hovered .table-card-resize-handle,
.table-card.is-secret-area-component.is-resize-hovered .table-card-lock-control,
.table-card.is-secret-area-component.is-resize-hovered .table-card-rotate-control,
.table-card.is-secret-area-component.is-resize-hovered .table-card-resize-handle,
.table-card.is-secret-area-component.is-rotate-hovered .table-card-lock-control,
.table-card.is-secret-area-component.is-rotate-hovered .table-card-rotate-control,
.table-card.is-secret-area-component.is-rotate-hovered .table-card-resize-handle,
.table-card.is-secret-area-component.is-resizing .table-card-lock-control,
.table-card.is-secret-area-component.is-resizing .table-card-rotate-control,
.table-card.is-secret-area-component.is-resizing .table-card-resize-handle,
.table-card.is-secret-area-component.is-rotating .table-card-lock-control,
.table-card.is-secret-area-component.is-rotating .table-card-rotate-control,
.table-card.is-secret-area-component.is-rotating .table-card-resize-handle,
.table-card.is-secret-area-component .table-card-lock-control:focus-visible,
.table-card.is-secret-area-component .table-card-rotate-control:focus-visible,
.table-card.is-secret-area-component .table-card-resize-handle:focus-visible,
.table-card.is-secret-area-component .table-card-lock-control:hover,
.table-card.is-secret-area-component .table-card-rotate-control:hover,
.table-card.is-secret-area-component .table-card-resize-handle:hover {
  opacity: 0.96;
}

.table-card.is-secret-area-component.is-group-selected .table-card-move-control {
  color: rgba(196, 230, 255, 0.96);
  background: rgba(56, 126, 208, 0.28);
}

.table-card-move-control.is-secret-area-overlay.is-group-selected {
  color: rgba(196, 230, 255, 0.96);
  background: rgba(56, 126, 208, 0.28);
}

.table-card.is-resizable-image .table-card-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 9px;
  background: rgba(14, 22, 18, 0.46);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.table-card.is-resizable-image .table-card-resize-handle svg {
  display: block;
  pointer-events: none;
}

.table-card.is-resizable-image:hover .table-card-resize-handle,
.table-card.is-resizable-image.is-resize-hovered .table-card-resize-handle,
.table-card.is-resizable-image.is-rotate-hovered .table-card-resize-handle,
.table-card.is-resizable-image .table-card-resize-handle:hover,
.table-card.is-resizable-image.is-rotating .table-card-resize-handle,
.table-card.is-resizable-image.is-resizing .table-card-resize-handle {
  opacity: 1;
  background: rgba(18, 30, 24, 0.62);
}

.table-card.is-resizable-image.is-resize-hovered,
.table-card.is-resizable-image.is-rotate-hovered,
.table-card.is-resizable-image.is-rotating,
.table-card.is-resizable-image.is-resizing {
  box-shadow:
    0 0 0 2px rgba(163, 214, 255, 0.86),
    0 12px 22px rgba(0, 0, 0, 0.36);
}

.table-card.is-resizable-image.is-resizing {
  cursor: nwse-resize;
}

.table-card.is-rotating,
.table-card.is-rotating .table-card-rotate-control {
  cursor: grabbing;
}

.table-card.is-front-pending img {
  opacity: 0;
}

.table-card.is-front-pending::before,
.table-card.is-asset-loading:not(.is-front-pending)::before,
.table-die.is-asset-loading::before,
.mons-game-shell.is-asset-loading::before,
.tafl-game-shell.is-asset-loading::before,
.go-game-shell.is-asset-loading::before,
.chip-stack-slot.is-asset-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 12, 11, 0.32);
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
  pointer-events: none;
  z-index: 4;
}

.table-card.is-front-pending::after,
.table-card.is-asset-loading:not(.is-front-pending)::after,
.table-die.is-asset-loading::after,
.mons-game-shell.is-asset-loading::after,
.tafl-game-shell.is-asset-loading::after,
.go-game-shell.is-asset-loading::after,
.chip-stack-slot.is-asset-loading::after {
  content: "";
  position: absolute;
  inset: auto;
  left: calc(50% + var(--inline-loader-offset-x, 0px));
  top: calc(50% + var(--inline-loader-offset-y, 0px));
  right: auto;
  bottom: auto;
  margin: 0;
  width: var(--inline-loader-size, 24px);
  height: var(--inline-loader-size, 24px);
  transform: translate3d(-50%, -50%, 0);
  border-radius: 999px;
  border: 1.75px solid rgba(247, 243, 232, 0.24);
  border-top-color: rgba(247, 243, 232, 0.95);
  animation: assetLoadingSpin 680ms linear infinite;
  pointer-events: none;
  z-index: 5;
}

.table-card.is-image-component-blank-face::before,
.table-card.is-image-component-blank-face::after {
  display: none;
}

.table-card.is-hand-preview-hidden {
  opacity: 0;
}

.table-card.is-held-by-self {
  --card-scale: 1.123;
  cursor: grabbing;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.38);
}

.table-card.is-held-by-other {
  cursor: not-allowed;
  filter: saturate(0.84) brightness(0.9);
}

.table-card.is-group-selected {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.52),
    0 14px 24px rgba(0, 0, 0, 0.34);
}

.table-card.is-in-discard {
  background: rgba(8, 10, 9, 0.62);
  opacity: 0.5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.table-card.is-in-discard img {
  filter: blur(1.6px) brightness(0.62) saturate(0.8);
}

.table-card.is-in-auction {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-card.is-shuffle-darkening img {
  animation: deckTopCardDarken 980ms ease both;
}

.table-card.is-codegame-top-blurred.is-shuffle-darkening img {
  animation: deckTopCardDarkenCodegame 980ms ease both;
}

.table-card.is-codegame-top-blurred img {
  filter: blur(2.2px) saturate(0.88) brightness(0.82);
}

.deck-control-button {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 50000;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 18, 15, 0.72);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.26);
}

.deck-control-button.is-pressing {
  animation: deckShufflePress 190ms ease-out;
}

.deck-control-button svg {
  width: 56%;
  height: 56%;
  display: block;
}

.deck-move-button {
  color: rgba(247, 243, 232, 0.32);
}

.deck-move-button.is-group-selected,
.mons-move-button.is-group-selected {
  color: rgba(196, 230, 255, 0.96);
  border-color: rgba(120, 186, 255, 0.74);
  background: rgba(56, 126, 208, 0.28);
}

.deck-move-button.is-group-selected:hover,
.deck-move-button.is-group-selected:focus-visible,
.mons-move-button.is-group-selected:hover,
.mons-move-button.is-group-selected:focus-visible {
  background: rgba(64, 141, 232, 0.34);
}

.deck-move-button.is-held-by-self {
  color: rgba(247, 243, 232, 0.6);
  border-color: rgba(255, 255, 255, 0.34);
}

.deck-move-button.is-group-selected.is-held-by-self,
.mons-move-button.is-group-selected.is-held-by-self {
  color: rgba(212, 238, 255, 0.98);
  border-color: rgba(132, 195, 255, 0.8);
}

.deck-options-button {
  color: rgba(247, 243, 232, 0.54);
}

.deck-options-button svg {
  width: 56%;
  height: 56%;
  display: block;
}

.deck-control-button:hover,
.deck-control-button:focus-visible {
  background: rgba(11, 18, 15, 0.84);
}

.deck-control-button:disabled,
.deck-control-button.is-disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.deck-control-button:disabled:hover,
.deck-control-button:disabled:focus-visible {
  background: rgba(11, 18, 15, 0.72);
}

.chip-stack-slot {
  --inline-loader-size: 22px;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 49920;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  color: rgba(247, 243, 232, 0.92);
}

.chip-stack-slot.is-empty {
  opacity: 0.44;
}

.chip-stack-slot.is-hovered .chip-stack-face {
  box-shadow:
    0 0 0 2px rgba(247, 243, 232, 0.68) inset,
    0 0 0 6px rgba(12, 16, 14, 0.14) inset,
    0 0 0 2px rgba(247, 243, 232, 0.24),
    0 10px 16px rgba(0, 0, 0, 0.34);
}

.chip-stack-slot .chip-stack-face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--chip-stack-color, #ffffff);
  box-shadow:
    0 0 0 1.8px rgba(247, 243, 232, 0.44) inset,
    0 0 0 5.2px rgba(12, 16, 14, 0.12) inset,
    0 5px 11px rgba(0, 0, 0, 0.26);
}

.chip-stack-slot .chip-stack-inner {
  width: 59%;
  height: 59%;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.4px dotted rgba(247, 243, 232, 0.74);
  background: rgba(255, 255, 255, 0.08);
}

.chip-stack-slot .chip-stack-label {
  color: rgba(247, 243, 232, 0.95);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
  user-select: none;
  pointer-events: none;
}

.chip-stack-slot .chip-stack-count-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1.18rem;
  height: 1.02rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(11, 18, 15, 0.8);
  color: rgba(247, 243, 232, 0.92);
  font-size: 0.64rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.chip-stack-move-button {
  z-index: 50005;
}

.deck-drop-indicator,
.discard-drop-indicator,
.auction-drop-indicator,
.chip-stack-drop-indicator {
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  z-index: 65010;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.deck-drop-indicator.is-visible,
.discard-drop-indicator.is-visible,
.auction-drop-indicator.is-visible,
.chip-stack-drop-indicator.is-visible {
  transform: translate(-50%, -50%) scale(3);
  opacity: 1;
  visibility: visible;
}

.deck-drop-indicator svg,
.discard-drop-indicator svg,
.auction-drop-indicator svg,
.chip-stack-drop-indicator svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.96)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
}

.deck-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 90;
  border-radius: 9px;
  border: 1px dashed rgba(247, 243, 232, 0.34);
  background: transparent;
  pointer-events: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.36);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.deck-slot.is-hovered {
  border-color: rgba(247, 243, 232, 0.6);
  background: rgba(247, 243, 232, 0.04);
}

.codegame-grid-frame {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 90;
  border-radius: 11px;
  border: 1px dashed rgba(247, 243, 232, 0.34);
  background: transparent;
  pointer-events: none;
  box-shadow: none;
}

.codegame-grid-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  border: 1px dashed rgba(247, 243, 232, 0.24);
  background: rgba(247, 243, 232, 0.02);
  pointer-events: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.codegame-grid-slot.is-occupied {
  border-color: rgba(247, 243, 232, 0.14);
  background: rgba(247, 243, 232, 0.01);
}

.discard-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 90;
  border-radius: 9px;
  border: 1px dashed rgba(247, 243, 232, 0.3);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: none;
  transition: border-color 120ms ease;
}

.discard-slot.is-hovered {
  border-color: rgba(247, 243, 232, 0.54);
}

.discard-slot-label {
  color: rgba(247, 243, 232, 0.54);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.auction-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 90;
  border-radius: 9px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  box-shadow: none;
}

.auction-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px dashed rgba(247, 243, 232, 0.3);
  opacity: 1;
  pointer-events: none;
  transition: opacity 180ms ease, border-color 120ms ease;
}

.auction-slot.is-hovered::before {
  border-color: rgba(247, 243, 232, 0.54);
}

.auction-slot.is-occupied::before,
.auction-slot.is-occupied.is-hovered::before {
  opacity: 0;
  border-color: transparent;
}

.auction-slot-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  max-width: 132px;
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.2;
  filter: brightness(0) invert(1);
  user-select: none;
  pointer-events: none;
  transition: opacity 130ms ease;
}

.auction-slot.is-occupied .auction-slot-icon {
  top: var(--auction-icon-occupied-top, calc(100% + 46px));
  width: var(--auction-icon-occupied-size, 24px);
  max-width: none;
  transform: translate(-50%, -50%);
  animation: auctionIconSwapToOccupied 260ms ease both;
}

.deck-count-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 50000;
  min-width: 1.6rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 18, 15, 0.72);
  color: rgba(247, 243, 232, 0.9);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.22);
}

.discard-reset-button {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(11, 18, 15, 0.72);
}

.deck-shuffle-fx {
  position: absolute;
  border-radius: 9px;
  object-fit: fill;
  object-position: center;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  filter: none;
  will-change: transform, opacity;
}

.deck-shuffle-fx.is-active {
  opacity: 0.78;
}

.deck-shuffle-fx-1.is-active {
  animation: deckShuffleSpinOneStandard 980ms linear both;
}

.deck-shuffle-fx-1.is-active.is-codegame-shuffle {
  animation: deckShuffleSpinOneCodegame 700ms linear both;
}

.deck-shuffle-fx-2.is-active {
  animation: deckShuffleSpinTwo 940ms linear both;
}

@keyframes cardFlip3d {
  0% {
    transform: translate(-50%, -50%) perspective(920px) rotateY(0deg) scale(var(--card-scale));
  }
  50% {
    transform: translate(-50%, -50%) perspective(920px) rotateY(90deg) scale(var(--card-scale));
  }
  100% {
    transform: translate(-50%, -50%) perspective(920px) rotateY(0deg) scale(var(--card-scale));
  }
}

@keyframes deckShufflePress {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  48% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes deckShuffleSpinOneStandard {
  0% {
    transform: translate(-50%, -50%) rotate(6deg);
    opacity: 0.82;
  }
  100% {
    transform: translate(-50%, -50%) rotate(366deg);
    opacity: 0;
  }
}

@keyframes deckShuffleSpinOneCodegame {
  0% {
    transform: translate(-50%, -50%) rotate(6deg);
    opacity: 0.82;
  }
  100% {
    transform: translate(-50%, -50%) rotate(250deg);
    opacity: 0.08;
  }
}

@keyframes deckShuffleSpinTwo {
  0% {
    transform: translate(-50%, -50%) rotate(56deg);
    opacity: 0.86;
  }
  100% {
    transform: translate(-50%, -50%) rotate(382deg);
    opacity: 0.1;
  }
}

@keyframes deckTopCardDarken {
  0% {
    filter: brightness(1);
  }
  42% {
    filter: brightness(0.58);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes deckTopCardDarkenCodegame {
  0% {
    filter: blur(2.2px) saturate(0.88) brightness(0.82);
  }
  42% {
    filter: blur(2.2px) saturate(0.88) brightness(0.5);
  }
  100% {
    filter: blur(2.2px) saturate(0.88) brightness(0.82);
  }
}

@keyframes auctionIconSwapToOccupied {
  0% {
    top: 50%;
    width: 62%;
    max-width: 132px;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  42% {
    top: 50%;
    width: 62%;
    max-width: 132px;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  43% {
    top: var(--auction-icon-occupied-top, calc(100% + 46px));
    width: var(--auction-icon-occupied-size, 24px);
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  100% {
    top: var(--auction-icon-occupied-top, calc(100% + 46px));
    width: var(--auction-icon-occupied-size, 24px);
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.2;
  }
}

@keyframes dieRollingScale {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.07);
  }
  50% {
    transform: scale(0.96);
  }
  75% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes coinFlip3d {
  0% {
    transform: perspective(860px) translateZ(0) rotateX(0deg) rotateY(-8deg) scale(1);
  }
  12% {
    transform: perspective(860px) translateZ(38px) rotateX(120deg) rotateY(8deg) scale(1.13, 0.96);
  }
  24% {
    transform: perspective(860px) translateZ(72px) rotateX(240deg) rotateY(-10deg) scale(1.25, 0.88);
  }
  36% {
    transform: perspective(860px) translateZ(104px) rotateX(360deg) rotateY(10deg) scale(1.34, 0.79);
  }
  50% {
    transform: perspective(860px) translateZ(128px) rotateX(540deg) rotateY(-7deg) scale(1.44, 0.72);
  }
  64% {
    transform: perspective(860px) translateZ(98px) rotateX(720deg) rotateY(8deg) scale(1.31, 0.8);
  }
  78% {
    transform: perspective(860px) translateZ(62px) rotateX(900deg) rotateY(-8deg) scale(1.19, 0.9);
  }
  100% {
    transform: perspective(860px) translateZ(0) rotateX(1080deg) rotateY(0deg) scale(1);
  }
}

@keyframes coinFlipGroundShadow {
  0% {
    transform: translateX(-50%) scale(0.94);
    opacity: 0.35;
  }
  2% {
    transform: translateX(-50%) scale(0.98);
    opacity: 0;
  }
  98% {
    transform: translateX(-50%) scale(1.08);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(0.94);
    opacity: 0.35;
  }
}

@keyframes coinFlipGlint {
  0% {
    opacity: 0.2;
    transform: translate3d(-10%, -10%, 0) scale(0.94);
  }
  50% {
    opacity: 0.62;
    transform: translate3d(12%, 8%, 0) scale(1.15);
  }
  100% {
    opacity: 0.2;
    transform: translate3d(-10%, -10%, 0) scale(0.94);
  }
}

.remote-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: left 55ms linear, top 55ms linear;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.remote-cursor .cursor-pencil {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  color: #d5d9df;
  transform: translate(-30%, -74%);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

.remote-cursor .cursor-pencil svg {
  display: block;
}

.remote-cursor.is-drawing {
  width: 18px;
  height: 18px;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
}

.remote-cursor.is-drawing .cursor-pencil {
  display: block;
}

.remote-cursor.is-drawing .cursor-name {
  top: 20px;
  left: 10px;
}

.remote-cursor .cursor-name {
  position: absolute;
  top: 16px;
  left: 8px;
  white-space: nowrap;
  padding: 0.2rem 0.44rem;
  border-radius: 0.44rem;
  background: rgba(8, 14, 13, 0.65);
  color: #f9f3e0;
  font-size: 0.73rem;
  line-height: 1;
}

.local-draw-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  transform: translate(-30%, -74%);
  color: #d5d9df;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.24));
}

.local-draw-cursor svg {
  display: block;
}

.local-delete-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 68100;
  z-index: calc(var(--hud-corner-z) + 100);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  transform: translate(calc(-10% + 1px), calc(-18% + 1px)) rotate(90deg);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.18));
}

html.tabletop-delete-cursor-hidden,
html.tabletop-delete-cursor-hidden *,
html.tabletop-delete-cursor-hidden *::before,
html.tabletop-delete-cursor-hidden *::after,
body.tabletop-delete-cursor-hidden,
body.tabletop-delete-cursor-hidden *,
body.tabletop-delete-cursor-hidden *::before,
body.tabletop-delete-cursor-hidden *::after {
  cursor: none !important;
}

.bottom-right-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--hud-corner-z);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.table-shell.is-delete-mode .bottom-right-controls {
  align-items: flex-end;
}

.copy-link-button,
.icon-pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
}

.copy-link-button {
  position: relative;
  z-index: var(--hud-corner-z);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.7rem 0.78rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}

.copy-link-label {
  display: inline;
}

.copy-link-button.is-owner-anchor {
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  width: 2.02rem;
  min-width: 2.02rem;
  height: 2.02rem;
  padding: 0;
  gap: 0;
}

.copy-link-button.is-owner-anchor svg {
  width: 15px;
  height: 15px;
}

.copy-link-button.is-owner-anchor .copy-link-label {
  display: none;
}

.icon-pill-button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
}

.delete-mode-cancel-button {
  width: 2.95rem;
  height: 2.95rem;
  border-color: rgba(248, 158, 158, 0.56);
  background: linear-gradient(160deg, rgba(173, 28, 28, 0.9), rgba(129, 18, 18, 0.84));
  color: rgba(255, 226, 226, 0.95);
  box-shadow: 0 8px 16px rgba(78, 8, 8, 0.35);
}

.delete-mode-cancel-button svg {
  width: 18px;
  height: 18px;
}

.delete-mode-undo-button {
  width: 2.32rem;
  height: 2.32rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #d5d9df;
  box-shadow: none;
  transition: color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.delete-mode-undo-button svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62));
}

.selection-delete-button {
  width: 2.36rem;
  height: 2.36rem;
  border-color: rgba(245, 146, 146, 0.44);
  background: linear-gradient(160deg, rgba(178, 36, 36, 0.84), rgba(138, 25, 25, 0.78));
  color: rgba(255, 238, 232, 0.94);
}

.selection-delete-button img {
  width: 18px;
  height: 18px;
  display: block;
  image-rendering: auto;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 2px rgba(255, 132, 132, 0.32));
}

.selection-delete-button:disabled,
.selection-delete-button.is-disabled {
  opacity: 0.44;
  cursor: default;
  filter: saturate(0.7);
}

.icon-pill-button.delete-mode-undo-button:hover,
.icon-pill-button.delete-mode-undo-button:focus-visible {
  background: transparent;
  color: #d5d9df;
  transform: translateY(-1px);
}

.delete-mode-undo-button:disabled,
.delete-mode-undo-button.is-disabled {
  opacity: 0.34;
  color: rgba(213, 217, 223, 0.56);
  cursor: default;
  transform: none;
}

.icon-pill-button.delete-mode-undo-button:disabled:hover,
.icon-pill-button.delete-mode-undo-button:disabled:focus-visible,
.icon-pill-button.delete-mode-undo-button.is-disabled:hover,
.icon-pill-button.delete-mode-undo-button.is-disabled:focus-visible {
  background: transparent;
  color: rgba(213, 217, 223, 0.56);
  transform: none;
}

.icon-pill-button svg {
  display: block;
}

.bottom-left-controls {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: var(--hud-corner-z);
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}

.home-link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: none;
}

.room-settings-button {
  width: 1.92rem;
  height: 1.92rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(11, 18, 15, 0.72);
  color: rgba(247, 243, 232, 0.54);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.room-settings-button:hover,
.room-settings-button:focus-visible {
  background: rgba(11, 18, 15, 0.84);
}

.room-settings-button svg {
  display: block;
  width: 56%;
  height: 56%;
}

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  cursor: pointer;
}

.mode-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mode-toggle-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.38);
  position: relative;
  transition: background 140ms ease;
}

.mode-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(7, 12, 11, 0.28);
  transition: transform 140ms ease;
}

.mode-toggle input:checked + .mode-toggle-switch {
  background: #ffffff;
  border-color: rgba(34, 29, 23, 0.24);
}

.mode-toggle input:checked + .mode-toggle-switch::after {
  background: #3a342d;
  transform: translateX(18px);
}

.mode-toggle-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 243, 232, 0.95);
  overflow: hidden;
  transition: color 180ms ease;
}

.mode-toggle-icon .mode-icon {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 170ms ease, transform 170ms ease;
}

.mode-toggle-icon .mode-icon-sun {
  opacity: 0;
  transform: scale(0.8) rotate(-18deg);
}

.mode-toggle-icon .mode-icon-moon {
  opacity: 1;
  transform: scaleX(-1) scale(1) rotate(0deg);
}

.mode-toggle-icon.is-light .mode-icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.mode-toggle-icon.is-light .mode-icon-moon {
  opacity: 0;
  transform: scaleX(-1) scale(0.82) rotate(14deg);
}

.table-shell.light-mode .mode-toggle-icon {
  color: rgba(39, 35, 29, 0.9);
}

.table-shell.is-theme-transitioning,
.table-shell.is-theme-transitioning .room-badge,
.table-shell.is-theme-transitioning .asset-loading-status,
.table-shell.is-theme-transitioning .asset-loading-spinner,
.table-shell.is-theme-transitioning .room-title-input,
.table-shell.is-theme-transitioning .status-badge,
.table-shell.is-theme-transitioning .draw-mode-button,
.table-shell.is-theme-transitioning .draw-clear-button,
.table-shell.is-theme-transitioning .draw-undo-button,
.table-shell.is-theme-transitioning .draw-tool-button,
.table-shell.is-theme-transitioning .player-name-button,
.table-shell.is-theme-transitioning .player-name-input,
.table-shell.is-theme-transitioning .player-color-wrap,
.table-shell.is-theme-transitioning .room-roster,
.table-shell.is-theme-transitioning .auction-bid-board,
.table-shell.is-theme-transitioning .auction-bid-input,
.table-shell.is-theme-transitioning .auction-bid-submit-button,
.table-shell.is-theme-transitioning .icon-pill-button,
.table-shell.is-theme-transitioning .copy-link-button,
.table-shell.is-theme-transitioning .home-link-button,
.table-shell.is-theme-transitioning .room-settings-button,
.table-shell.is-theme-transitioning .deck-control-button,
.table-shell.is-theme-transitioning .deck-count-badge,
.table-shell.is-theme-transitioning .deck-slot,
.table-shell.is-theme-transitioning .codegame-grid-frame,
.table-shell.is-theme-transitioning .discard-slot,
.table-shell.is-theme-transitioning .discard-slot-label,
.table-shell.is-theme-transitioning .auction-slot::before,
.table-shell.is-theme-transitioning .auction-slot-icon,
.table-shell.is-theme-transitioning .mons-game-shell,
.table-shell.is-theme-transitioning .mons-move-button,
.table-shell.is-theme-transitioning .mode-toggle-switch,
.table-shell.is-theme-transitioning .mode-toggle-switch::after,
.table-shell.is-theme-transitioning .mode-toggle-icon {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.table-shell.light-mode .table-card {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 7px 13px rgba(46, 38, 25, 0.22);
}

.table-shell.light-mode .table-card.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .table-card.is-image-component-native {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 13px rgba(46, 38, 25, 0.18);
}

.table-shell.light-mode .table-card.is-image-component-native.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .table-card.is-secret-area-component {
  --secret-area-shadow: 0 8px 16px rgba(46, 38, 25, 0.18);
  border-color: var(--secret-area-owner-color, rgba(34, 29, 23, 0.74));
  background: transparent;
  box-shadow: var(--secret-area-shadow);
}

.table-shell.light-mode .table-card.is-secret-area-component.is-image-component-blank-face {
  background: transparent;
}

.table-shell.light-mode .table-card.is-secret-area-component.is-group-selected {
  border-color: var(--secret-area-owner-color, rgba(34, 29, 23, 0.74));
  box-shadow: var(--secret-area-shadow);
}

.table-shell.light-mode .secret-area-owner-dot {
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.2);
}

.table-shell.light-mode .secret-area-owner-name {
  color: rgba(34, 29, 23, 0.88);
  text-shadow: none;
}

.table-shell.light-mode .table-card.is-note-component {
  background: rgba(248, 225, 140, 0.98);
  box-shadow: 0 8px 16px rgba(79, 60, 24, 0.24);
}

.table-shell.light-mode .table-card.is-note-editing {
  box-shadow:
    0 0 0 2px rgba(176, 136, 48, 0.72),
    0 11px 22px rgba(78, 60, 27, 0.28);
}

.table-shell.light-mode .table-note-inline-text {
  color: rgba(57, 47, 26, 0.96);
}

.table-shell.light-mode .table-card.is-sticker-component-native {
  background: transparent;
  box-shadow: none;
}

.table-shell.light-mode .table-card.is-sticker-component-native img {
  filter: drop-shadow(0 4px 8px rgba(46, 38, 25, 0.18));
}

.table-shell.light-mode .table-card-lock-control {
  background: rgba(255, 255, 255, 0.88);
  color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .table-card-lock-control:hover,
.table-shell.light-mode .table-card-lock-control:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-card-rotate-control {
  background: rgba(255, 255, 255, 0.88);
  color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .table-card-rotate-control:hover,
.table-shell.light-mode .table-card-rotate-control:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-card-move-control {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(34, 29, 23, 0.48);
}

.table-shell.light-mode .table-card-move-control:hover,
.table-shell.light-mode .table-card-move-control:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-card.is-secret-area-component.is-group-selected .table-card-move-control {
  color: rgba(73, 118, 181, 0.96);
  background: rgba(109, 173, 240, 0.36);
}

.table-shell.light-mode .table-card-move-control.is-secret-area-overlay.is-group-selected {
  color: rgba(73, 118, 181, 0.96);
  background: rgba(109, 173, 240, 0.36);
}

.table-shell.light-mode .table-card.is-sticker-component-native.is-group-selected {
  box-shadow: none;
}

.table-shell.light-mode .table-card.is-sticker-component-native.is-resizable-image:hover,
.table-shell.light-mode .table-card.is-sticker-component-native.is-resizable-image.is-resize-hovered,
.table-shell.light-mode .table-card.is-sticker-component-native.is-resizable-image.is-rotate-hovered,
.table-shell.light-mode .table-card.is-sticker-component-native.is-resizable-image.is-resizing {
  background: rgba(255, 255, 255, 0.24);
  outline: 1px dotted rgba(255, 255, 255, 0.92);
  outline-offset: 0;
  box-shadow: 0 10px 18px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-card.is-resizable-image .table-card-resize-handle {
  background: rgba(255, 255, 255, 0.88);
  color: rgba(34, 29, 23, 0.8);
}

.table-shell.light-mode .table-card.is-resizable-image:hover .table-card-resize-handle,
.table-shell.light-mode .table-card.is-resizable-image.is-resize-hovered .table-card-resize-handle,
.table-shell.light-mode .table-card.is-resizable-image.is-rotate-hovered .table-card-resize-handle,
.table-shell.light-mode .table-card.is-resizable-image .table-card-resize-handle:hover,
.table-shell.light-mode .table-card.is-resizable-image.is-rotating .table-card-resize-handle,
.table-shell.light-mode .table-card.is-resizable-image.is-resizing .table-card-resize-handle {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-card.is-resizable-image.is-resize-hovered,
.table-shell.light-mode .table-card.is-resizable-image.is-rotate-hovered,
.table-shell.light-mode .table-card.is-resizable-image.is-rotating,
.table-shell.light-mode .table-card.is-resizable-image.is-resizing {
  box-shadow:
    0 0 0 2px rgba(98, 151, 228, 0.78),
    0 12px 21px rgba(46, 38, 25, 0.26);
}

.table-shell.light-mode .table-die {
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 6px 12px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-die.table-die-d6,
.table-shell.light-mode .table-die.table-die-d20 {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .table-die.table-die-coin {
  background: transparent;
}

.table-shell.light-mode .table-die.table-die-chip {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .table-die.table-die-stack-point {
  background: transparent;
  box-shadow: none;
}

.table-shell.light-mode .table-die.table-die-stack-point .table-die-face {
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .table-die.table-die-stack-point.is-stack-point-hovered .table-die-face {
  border-color: rgba(34, 29, 23, 0.5);
  background: rgba(34, 29, 23, 0.05);
}

.table-shell.light-mode .table-die.table-die-label {
  background: transparent;
  box-shadow: none;
}

.table-shell.light-mode .table-die.table-die-label .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-media .table-label-resize-handle {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(34, 29, 23, 0.78);
}

.table-shell.light-mode .table-die.table-die-label .table-label-lock-control {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(34, 29, 23, 0.78);
}

.table-shell.light-mode .table-die.table-die-label .table-label-rotate-control {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(34, 29, 23, 0.78);
}

.table-shell.light-mode .table-die.table-die-label.is-resizable-label:hover .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-label.is-label-resize-hovered .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-label.is-die-resize-hovered .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-label.is-resizing-label .table-label-resize-handle {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked):hover .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-lock-hovered .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-resize-hovered .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-die-rotate-hovered .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-resizing-label .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label.is-label-lockable:not(.is-label-locked).is-rotating-label .table-label-lock-control,
.table-shell.light-mode .table-die.table-die-label .table-label-lock-control:hover,
.table-shell.light-mode .table-die.table-die-label .table-label-lock-control:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-label.is-rotatable-label:hover .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label.is-rotatable-label.is-die-rotate-hovered .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label.is-rotatable-label.is-die-resize-hovered .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label.is-rotatable-label.is-die-lock-hovered .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label.is-rotatable-label.is-resizing-label .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label.is-rotatable-label.is-rotating-label .table-label-rotate-control,
.table-shell.light-mode .table-die.table-die-label .table-label-rotate-control:hover,
.table-shell.light-mode .table-die.table-die-label .table-label-rotate-control:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-media {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 6px 12px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-die.table-die-counter {
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 6px 12px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-die.table-die-timer {
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 6px 12px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-media-frame {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.92);
}

.table-shell.light-mode .table-counter-display {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.05) inset;
}

.table-shell.light-mode .table-counter-segment {
  background: rgba(186, 58, 58, 0.12);
}

.table-shell.light-mode .table-counter-sign .table-counter-segment:not(.is-active) {
  background: rgba(186, 58, 58, 0.055);
}

.table-shell.light-mode .table-counter-segment.is-active {
  background: rgba(198, 55, 55, 0.96);
  box-shadow:
    0 0 5px rgba(198, 55, 55, 0.36),
    0 0 9px rgba(198, 55, 55, 0.2);
}

.table-shell.light-mode .table-counter-control {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(255, 255, 255, 0.94);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .table-counter-control[data-counter-reset="1"] {
  background: rgba(236, 236, 236, 0.98);
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .table-counter-control:hover,
.table-shell.light-mode .table-counter-control:focus-visible,
.table-shell.light-mode .table-counter-control:active {
  border-color: rgba(34, 29, 23, 0.36);
  background: rgba(255, 255, 255, 1);
}

.table-shell.light-mode .table-counter-control[data-counter-reset="1"]:hover,
.table-shell.light-mode .table-counter-control[data-counter-reset="1"]:focus-visible,
.table-shell.light-mode .table-counter-control[data-counter-reset="1"]:active {
  border-color: rgba(34, 29, 23, 0.42);
  background: rgba(228, 228, 228, 1);
}

.table-shell.light-mode .table-timer-display {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.05) inset;
}

.table-shell.light-mode .table-timer-separator {
  color: rgba(198, 55, 55, 0.92);
}

.table-shell.light-mode .table-timer-control {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(255, 255, 255, 0.94);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .table-timer-control:hover,
.table-shell.light-mode .table-timer-control:focus-visible,
.table-shell.light-mode .table-timer-control:active {
  border-color: rgba(34, 29, 23, 0.36);
  background: rgba(255, 255, 255, 1);
}

.table-shell.light-mode .table-timer-splits {
  border-color: rgba(34, 29, 23, 0.18);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.045) inset;
}

.table-shell.light-mode .table-timer-split-row,
.table-shell.light-mode .table-timer-split-empty {
  color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .table-timer-split-row + .table-timer-split-row {
  border-top-color: rgba(34, 29, 23, 0.12);
}

.table-shell.light-mode .table-media-placeholder {
  color: rgba(34, 29, 23, 0.76);
}

.table-shell.light-mode .table-die.table-die-media.is-resizable-media:hover .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-media.is-die-resize-hovered .table-label-resize-handle,
.table-shell.light-mode .table-die.table-die-media.is-resizing-media .table-label-resize-handle {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-coin .table-die-face {
  background: rgba(255, 255, 255, 0.66);
}

.table-shell.light-mode .table-die.table-die-chip .table-die-face {
  background: rgba(255, 255, 255, 0.28);
}

.table-shell.light-mode .table-die.table-die-chip.is-rolling .table-die-face {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .table-die.table-die-chip.is-rolling::after {
  opacity: 0 !important;
  animation: none !important;
}

.table-shell.light-mode .table-die.table-die-chip.is-chip-contrast-boost .table-die-svg {
  filter: drop-shadow(0 1px 1.8px rgba(16, 13, 10, 0.38));
}

.table-shell.light-mode .table-die.table-die-chip.is-chip-contrast-boost .table-chip-shell {
  stroke: rgba(36, 28, 20, 0.62);
}

.table-shell.light-mode .table-die.table-die-chip.is-chip-contrast-boost .table-chip-outer-ring {
  stroke: rgba(40, 31, 23, 0.6);
}

.table-shell.light-mode .table-die.table-die-chip.is-chip-contrast-boost .table-chip-inner-ring {
  stroke: rgba(36, 28, 20, 0.74);
}

.table-shell.light-mode .table-die.table-die-marble .table-die-face {
  filter: drop-shadow(0 3px 6px rgba(18, 23, 31, 0.3));
}

.table-shell.light-mode .table-die.table-die-spinner {
  background: rgba(255, 255, 255, 0.62);
}

.table-shell.light-mode .table-die.table-die-arcade {
  background: linear-gradient(180deg, rgba(233, 236, 244, 0.96) 0%, rgba(211, 217, 231, 0.96) 100%);
  box-shadow: 0 6px 12px rgba(46, 38, 25, 0.2);
}

.table-shell.light-mode .table-arcade-shell {
  border-color: rgba(34, 29, 23, 0.24);
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.97) 0%, rgba(232, 237, 246, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(34, 29, 23, 0.05) inset,
    0 8px 14px rgba(46, 38, 25, 0.16) inset;
}

.table-shell.light-mode .table-arcade-screen {
  border-color: rgba(34, 29, 23, 0.28);
  background: linear-gradient(180deg, rgba(24, 30, 36, 0.95) 0%, rgba(10, 14, 18, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(6, 9, 12, 0.46) inset,
    0 7px 12px rgba(10, 13, 18, 0.34) inset;
}

.table-shell.light-mode .table-arcade-screen.is-load-screen {
  background: #000;
}

.table-shell.light-mode .table-arcade-screen-inner {
  color: rgba(160, 245, 180, 0.93);
  text-shadow:
    0 0 4px rgba(104, 245, 140, 0.22),
    0 0 8px rgba(15, 54, 24, 0.2);
}

.table-shell.light-mode .table-arcade-line-load {
  color: rgba(174, 218, 255, 0.88);
}

.table-shell.light-mode .table-arcade-line-option.is-selected {
  color: rgba(206, 250, 217, 0.99);
}

.table-shell.light-mode .table-arcade-info-title,
.table-shell.light-mode .table-arcade-info-subtext {
  color: rgba(160, 245, 180, 0.92);
}

.table-shell.light-mode .table-arcade-score-row {
  color: rgba(165, 247, 183, 0.92);
}

.table-shell.light-mode .table-arcade-score-rank {
  color: rgba(178, 222, 255, 0.9);
}

.table-shell.light-mode .table-arcade-score-empty,
.table-shell.light-mode .table-arcade-score-hint {
  color: rgba(178, 222, 255, 0.82);
}

.table-shell.light-mode .table-arcade-owner {
  color: rgba(34, 29, 23, 0.88);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.32);
}

.table-shell.light-mode .table-arcade-owner-score {
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .table-arcade-owner-separator {
  background: rgba(34, 29, 23, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.table-shell.light-mode .table-arcade-stick {
  border-color: rgba(34, 29, 23, 0.28);
  background: rgba(34, 29, 23, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34) inset;
}

.table-shell.light-mode .table-arcade-stick::before {
  background: rgba(34, 29, 23, 0.66);
}

.table-shell.light-mode .table-arcade-stick-knob {
  background: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .table-arcade-control-label {
  color: rgba(34, 29, 23, 0.82);
}

.table-shell.light-mode .table-arcade-button {
  border-color: rgba(34, 29, 23, 0.3);
  background: rgba(34, 29, 23, 0.1);
  color: rgba(34, 29, 23, 0.86);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38) inset;
}

.table-shell.light-mode .table-die.table-die-arcade.is-arcade-focused {
  box-shadow:
    0 0 0 1px rgba(98, 151, 228, 0.78),
    0 10px 18px rgba(46, 38, 25, 0.24);
}

.table-shell.light-mode .table-die.table-die-arcade.is-arcade-focused .table-arcade-screen {
  border-color: rgba(98, 151, 228, 0.54);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-segment {
  fill: rgba(255, 255, 255, 0.26);
  stroke: rgba(255, 255, 255, 0.12);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-segment:nth-child(odd) {
  fill: rgba(255, 255, 255, 0.36);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-ring {
  stroke: rgba(255, 255, 255, 0.95);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-separator {
  stroke: rgba(255, 255, 255, 0.52);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-label {
  fill: rgba(22, 18, 13, 0.94);
  stroke: rgba(255, 255, 255, 0.72);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-label.is-active {
  filter:
    drop-shadow(0 0 1.8px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 4.6px rgba(255, 255, 255, 0.86));
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-segment.is-dimmed {
  opacity: 0.08;
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-needle {
  stroke: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-needle-head {
  fill: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .table-die.table-die-spinner .table-spinner-center {
  fill: rgba(10, 16, 14, 0.9);
  stroke: rgba(255, 255, 255, 0.96);
}

.table-shell.light-mode #spinnerComponentTile .asset-component-icon-spinner .spinner-icon-center {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(34, 29, 23, 0.8);
}

.table-shell.light-mode .table-spinner-result {
  border-color: rgba(34, 29, 23, 0.26);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode #diceComponentTile .asset-placeholder-box,
.table-shell.light-mode #coinComponentTile .asset-placeholder-box,
.table-shell.light-mode #spinnerComponentTile .asset-placeholder-box,
.table-shell.light-mode #pokerDeckComponentTile .asset-placeholder-box,
.table-shell.light-mode #counterComponentTile .asset-placeholder-box,
.table-shell.light-mode #marbleComponentTile .asset-placeholder-box,
.table-shell.light-mode #imageComponentTile .asset-placeholder-box,
.table-shell.light-mode #mediaComponentTile .asset-placeholder-box,
.table-shell.light-mode #labelComponentTile .asset-placeholder-box,
.table-shell.light-mode #stickerComponentTile .asset-placeholder-box {
  border-color: rgba(34, 29, 23, 0.3);
  background: rgba(255, 255, 255, 0.74);
}

.table-shell.light-mode .table-die-outline {
  stroke: rgba(34, 29, 23, 0.94);
}

.table-shell.light-mode .table-die-d20-shell {
  fill: none;
  stroke: rgba(34, 29, 23, 0.94);
}

.table-shell.light-mode .table-die-d6-bg,
.table-shell.light-mode .table-die-d20-bg {
  fill: rgba(255, 255, 255, 0.66);
}

.table-shell.light-mode .table-die-d20-facet {
  stroke: rgba(34, 29, 23, 0.56);
}

.table-shell.light-mode .table-coin-shell {
  fill: rgba(255, 255, 255, 0.52);
  stroke: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .table-coin-inner {
  stroke: rgba(34, 29, 23, 0.64);
}

.table-shell.light-mode .table-die-pip,
.table-shell.light-mode .table-die-number {
  fill: rgba(34, 29, 23, 0.94);
}

.table-shell.light-mode .table-die.is-group-selected {
  box-shadow:
    0 0 0 2px rgba(34, 29, 23, 0.34),
    0 8px 16px rgba(46, 38, 25, 0.24);
}

.table-shell.light-mode .table-card.is-in-deck {
  box-shadow: none !important;
}

.table-shell.light-mode .table-card.is-in-discard {
  background: rgba(11, 13, 12, 0.56);
}

.table-shell.light-mode .selection-box {
  border-color: rgba(34, 29, 23, 0.54);
  background: rgba(34, 29, 23, 0.08);
  box-shadow: 0 0 0 1px rgba(62, 54, 40, 0.16) inset;
}

.table-shell.light-mode .deck-control-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(34, 29, 23, 0.86);
  box-shadow: 0 5px 10px rgba(46, 38, 25, 0.16);
}

.table-shell.light-mode .deck-drop-indicator,
.table-shell.light-mode .discard-drop-indicator,
.table-shell.light-mode .auction-drop-indicator,
.table-shell.light-mode .chip-stack-drop-indicator {
  color: #fff;
}

.table-shell.light-mode .deck-drop-indicator svg,
.table-shell.light-mode .discard-drop-indicator svg,
.table-shell.light-mode .auction-drop-indicator svg,
.table-shell.light-mode .chip-stack-drop-indicator svg {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.96)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
}

.table-shell.light-mode .discard-slot {
  border-color: rgba(34, 29, 23, 0.26);
}

.table-shell.light-mode .deck-slot {
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .codegame-grid-frame {
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .codegame-grid-slot {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(34, 29, 23, 0.02);
}

.table-shell.light-mode .codegame-grid-slot.is-occupied {
  border-color: rgba(34, 29, 23, 0.12);
  background: rgba(34, 29, 23, 0.01);
}

.table-shell.light-mode .deck-slot.is-hovered {
  border-color: rgba(34, 29, 23, 0.5);
  background: rgba(34, 29, 23, 0.04);
}

.table-shell.light-mode .discard-slot.is-hovered {
  border-color: rgba(34, 29, 23, 0.46);
}

.table-shell.light-mode .discard-slot-label {
  color: rgba(34, 29, 23, 0.56);
}

.table-shell.light-mode .auction-slot::before {
  border-color: rgba(34, 29, 23, 0.26);
}

.table-shell.light-mode .auction-slot.is-hovered::before {
  border-color: rgba(34, 29, 23, 0.46);
}

.table-shell.light-mode .auction-slot-icon {
  opacity: 0.2;
  filter: none;
}


.table-shell.light-mode .deck-count-badge {
  background: rgba(255, 255, 255, 0.96);
  color: rgba(34, 29, 23, 0.88);
  border-color: rgba(34, 29, 23, 0.24);
}

.table-shell.light-mode .discard-reset-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.86);
}

.table-shell.light-mode .deck-move-button {
  color: rgba(34, 29, 23, 0.36);
}

.table-shell.light-mode .deck-move-button.is-group-selected,
.table-shell.light-mode .mons-move-button.is-group-selected {
  color: rgba(18, 73, 138, 0.94);
  border-color: rgba(53, 133, 220, 0.52);
  background: rgba(76, 154, 240, 0.2);
}

.table-shell.light-mode .deck-move-button.is-group-selected:hover,
.table-shell.light-mode .deck-move-button.is-group-selected:focus-visible,
.table-shell.light-mode .mons-move-button.is-group-selected:hover,
.table-shell.light-mode .mons-move-button.is-group-selected:focus-visible {
  background: rgba(76, 154, 240, 0.3);
}

.table-shell.light-mode .deck-move-button.is-held-by-self {
  color: rgba(34, 29, 23, 0.64);
  border-color: rgba(34, 29, 23, 0.34);
}

.table-shell.light-mode .deck-move-button.is-group-selected.is-held-by-self,
.table-shell.light-mode .mons-move-button.is-group-selected.is-held-by-self {
  color: rgba(12, 66, 128, 0.98);
  border-color: rgba(44, 122, 204, 0.62);
}

.table-shell.light-mode .deck-options-button {
  color: rgba(34, 29, 23, 0.56);
}

.table-shell.light-mode .deck-control-button:hover,
.table-shell.light-mode .deck-control-button:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .deck-control-button:disabled:hover,
.table-shell.light-mode .deck-control-button:disabled:focus-visible {
  background: rgba(255, 255, 255, 0.86);
}

.table-shell.light-mode .chip-stack-slot .chip-stack-face {
  box-shadow:
    0 0 0 1.6px rgba(34, 29, 23, 0.3) inset,
    0 0 0 5px rgba(255, 255, 255, 0.16) inset,
    0 4px 9px rgba(46, 38, 25, 0.18);
}

.table-shell.light-mode .chip-stack-slot .chip-stack-inner {
  border-color: rgba(34, 29, 23, 0.42);
  background: rgba(255, 255, 255, 0.2);
}

.table-shell.light-mode .chip-stack-slot .chip-stack-label {
  color: rgba(34, 29, 23, 0.9);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.34);
}

.table-shell.light-mode .chip-stack-slot .chip-stack-count-badge {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .room-badge {
  background: rgba(255, 255, 255, 0.82);
  color: #27231d;
  border-color: rgba(36, 31, 24, 0.2);
}

.table-shell.light-mode .room-badge.is-editable:hover,
.table-shell.light-mode .room-badge.is-editable:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .room-badge.is-copyable:hover,
.table-shell.light-mode .room-badge.is-copyable:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .room-title-input {
  background: rgba(255, 255, 255, 0.98);
  color: #27231d;
  border-color: rgba(36, 31, 24, 0.26);
}

.table-shell.light-mode .status-badge {
  color: rgba(27, 24, 20, 0.86);
}

.table-shell.light-mode .asset-loading-status {
  background: rgba(255, 255, 255, 0.82);
  color: rgba(34, 29, 23, 0.86);
  border-color: rgba(34, 29, 23, 0.24);
}

.table-shell.light-mode .asset-loading-spinner {
  border-color: rgba(34, 29, 23, 0.2);
  border-top-color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .spawn-loading-indicator {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(34, 29, 23, 0.18);
  box-shadow: 0 8px 16px rgba(56, 44, 24, 0.16);
}

.table-shell.light-mode .spawn-loading-indicator-ring {
  border-color: rgba(34, 29, 23, 0.2);
  border-top-color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .hand-card.is-front-pending::before,
.table-shell.light-mode .hand-card.is-asset-loading:not(.is-front-pending)::before,
.table-shell.light-mode .table-card.is-front-pending::before,
.table-shell.light-mode .table-card.is-asset-loading:not(.is-front-pending)::before,
.table-shell.light-mode .table-die.is-asset-loading::before,
.table-shell.light-mode .mons-game-shell.is-asset-loading::before,
.table-shell.light-mode .tafl-game-shell.is-asset-loading::before,
.table-shell.light-mode .go-game-shell.is-asset-loading::before,
.table-shell.light-mode .chip-stack-slot.is-asset-loading::before {
  background: rgba(255, 255, 255, 0.54);
}

.table-shell.light-mode .hand-card.is-front-pending::after,
.table-shell.light-mode .hand-card.is-asset-loading:not(.is-front-pending)::after,
.table-shell.light-mode .table-card.is-front-pending::after,
.table-shell.light-mode .table-card.is-asset-loading:not(.is-front-pending)::after,
.table-shell.light-mode .table-die.is-asset-loading::after,
.table-shell.light-mode .mons-game-shell.is-asset-loading::after,
.table-shell.light-mode .tafl-game-shell.is-asset-loading::after,
.table-shell.light-mode .go-game-shell.is-asset-loading::after,
.table-shell.light-mode .chip-stack-slot.is-asset-loading::after {
  border-color: rgba(34, 29, 23, 0.2);
  border-top-color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .draw-mode-button {
  background: rgba(255, 255, 255, 0.86);
  color: rgba(34, 29, 23, 0.84);
  border-color: rgba(34, 29, 23, 0.22);
}

.table-shell.light-mode .draw-mode-button:hover,
.table-shell.light-mode .draw-mode-button:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .draw-mode-button.is-active {
  background: rgba(234, 95, 49, 0.9);
  border-color: rgba(177, 63, 29, 0.52);
  color: #fff6ed;
}

.table-shell.light-mode .draw-clear-button,
.table-shell.light-mode .draw-undo-button {
  color: rgba(34, 29, 23, 0.64);
}

.table-shell.light-mode .draw-clear-button:hover,
.table-shell.light-mode .draw-clear-button:focus-visible,
.table-shell.light-mode .draw-undo-button:hover,
.table-shell.light-mode .draw-undo-button:focus-visible {
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .draw-clear-button:disabled,
.table-shell.light-mode .draw-clear-button.is-disabled,
.table-shell.light-mode .draw-undo-button:disabled,
.table-shell.light-mode .draw-undo-button.is-disabled {
  color: rgba(34, 29, 23, 0.36);
}

.table-shell.light-mode .draw-clear-button:disabled:hover,
.table-shell.light-mode .draw-clear-button:disabled:focus-visible,
.table-shell.light-mode .draw-clear-button.is-disabled:hover,
.table-shell.light-mode .draw-clear-button.is-disabled:focus-visible,
.table-shell.light-mode .draw-undo-button:disabled:hover,
.table-shell.light-mode .draw-undo-button:disabled:focus-visible,
.table-shell.light-mode .draw-undo-button.is-disabled:hover,
.table-shell.light-mode .draw-undo-button.is-disabled:focus-visible {
  color: rgba(34, 29, 23, 0.36);
}

.table-shell.light-mode .draw-mode-button svg,
.table-shell.light-mode .draw-clear-button svg,
.table-shell.light-mode .draw-undo-button svg {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.76));
}

.table-shell.light-mode .draw-tool-button {
  background: rgba(255, 255, 255, 0.58);
  color: rgba(34, 29, 23, 0.66);
}

.table-shell.light-mode .draw-tool-button:hover,
.table-shell.light-mode .draw-tool-button:focus-visible {
  background: rgba(255, 255, 255, 0.82);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .draw-tool-button.is-active {
  background: rgba(234, 95, 49, 0.9);
  color: #fff6ed;
}

.table-shell.light-mode .local-draw-cursor,
.table-shell.light-mode .remote-cursor .cursor-pencil {
  color: #444a4f;
}

.table-shell.light-mode .player-name-button,
.table-shell.light-mode .player-name-input,
.table-shell.light-mode .player-color-wrap,
.table-shell.light-mode .room-roster,
.table-shell.light-mode .auction-bid-board,
.table-shell.light-mode .auction-bid-input,
.table-shell.light-mode .auction-bid-submit-button,
.table-shell.light-mode .icon-pill-button,
.table-shell.light-mode .copy-link-button,
.table-shell.light-mode .home-link-button {
  background: rgba(255, 255, 255, 0.85);
  color: #2a241d;
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .delete-mode-cancel-button {
  background: linear-gradient(160deg, rgba(210, 54, 54, 0.95), rgba(169, 31, 31, 0.92));
  border-color: rgba(152, 18, 18, 0.58);
  color: rgba(255, 241, 241, 0.98);
  box-shadow: 0 8px 16px rgba(138, 26, 26, 0.28);
}

.table-shell.light-mode .selection-delete-button {
  border-color: rgba(164, 22, 22, 0.38);
  background: linear-gradient(160deg, rgba(217, 66, 66, 0.9), rgba(176, 37, 37, 0.84));
  color: rgba(255, 243, 243, 0.98);
}

.table-shell.light-mode .selection-delete-button img {
  filter:
    drop-shadow(0 1px 1px rgba(53, 17, 17, 0.24))
    drop-shadow(0 0 2px rgba(255, 162, 162, 0.26));
}

.table-shell.light-mode .delete-mode-undo-button {
  background: transparent;
  border: none;
  color: rgba(34, 29, 23, 0.64);
  box-shadow: none;
}

.table-shell.light-mode .icon-pill-button.delete-mode-undo-button:hover,
.table-shell.light-mode .icon-pill-button.delete-mode-undo-button:focus-visible {
  background: transparent;
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .delete-mode-undo-button:disabled,
.table-shell.light-mode .delete-mode-undo-button.is-disabled {
  color: rgba(34, 29, 23, 0.36);
}

.table-shell.light-mode .icon-pill-button.delete-mode-undo-button:disabled:hover,
.table-shell.light-mode .icon-pill-button.delete-mode-undo-button:disabled:focus-visible,
.table-shell.light-mode .icon-pill-button.delete-mode-undo-button.is-disabled:hover,
.table-shell.light-mode .icon-pill-button.delete-mode-undo-button.is-disabled:focus-visible {
  color: rgba(34, 29, 23, 0.36);
}

.table-shell.light-mode .player-name-button:hover,
.table-shell.light-mode .player-name-button:focus-visible,
.table-shell.light-mode .player-name-input:focus,
.table-shell.light-mode .auction-bid-input:focus,
.table-shell.light-mode .auction-bid-submit-button:hover,
.table-shell.light-mode .auction-bid-submit-button:focus-visible,
.table-shell.light-mode .room-roster:hover,
.table-shell.light-mode .icon-pill-button:hover,
.table-shell.light-mode .icon-pill-button:focus-visible,
.table-shell.light-mode .copy-link-button:hover,
.table-shell.light-mode .copy-link-button:focus-visible,
.table-shell.light-mode .home-link-button:hover,
.table-shell.light-mode .home-link-button:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .room-settings-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(34, 29, 23, 0.56);
  box-shadow: 0 5px 10px rgba(45, 36, 20, 0.16);
}

.table-shell.light-mode .room-settings-button:hover,
.table-shell.light-mode .room-settings-button:focus-visible {
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .room-roster-item {
  color: rgba(34, 29, 23, 0.88);
}

.table-shell.light-mode .room-roster-dot {
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.34);
}

.table-shell.light-mode .player-hand-count {
  color: rgba(34, 29, 23, 0.84);
}

.table-shell.light-mode .room-roster-count {
  color: rgba(34, 29, 23, 0.72);
}

.table-shell.light-mode .auction-bid-item {
  background: rgba(34, 29, 23, 0.07);
}

.table-shell.light-mode .auction-bid-dot {
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.34);
}

.table-shell.light-mode .auction-bid-empty {
  color: rgba(34, 29, 23, 0.54);
}

.table-shell.light-mode .auction-bid-label {
  color: rgba(34, 29, 23, 0.88);
}

.table-shell.light-mode .auction-bid-name {
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .auction-bid-value {
  color: rgba(34, 29, 23, 0.95);
}

.table-shell.light-mode .hand-card {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 9px 17px rgba(46, 38, 25, 0.24);
}

.table-shell.light-mode .hand-card.is-note-component {
  background: rgba(248, 225, 140, 0.98);
  box-shadow: 0 8px 16px rgba(79, 60, 24, 0.24);
}

.table-shell.light-mode .hand-card.is-image-component-blank-face {
  background: var(--image-card-blank-color, #ffffff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.table-shell.light-mode .hand-drop-glow {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.32) 30%,
    rgba(255, 255, 255, 0) 84%
  );
}

.table-shell.is-draw-mode {
  cursor: none;
}

.table-shell.is-draw-mode .cards-layer,
.table-shell.is-draw-mode .cards-layer *,
.table-shell.is-draw-mode .promoted-cards-layer,
.table-shell.is-draw-mode .promoted-cards-layer *,
.table-shell.is-draw-mode .cover-cards-layer,
.table-shell.is-draw-mode .cover-cards-layer *,
.table-shell.is-draw-mode .game-layer,
.table-shell.is-draw-mode .game-layer *,
.table-shell.is-draw-mode .deck-control-button,
.table-shell.is-draw-mode .deck-control-button * {
  cursor: none !important;
}

.table-shell.is-delete-mode,
.table-shell.is-delete-mode *,
.table-shell.is-delete-mode *::before,
.table-shell.is-delete-mode *::after {
  cursor: none !important;
}

.table-shell.is-draw-mode .table-media-embed,
.table-shell.is-delete-mode .table-media-embed {
  pointer-events: none !important;
}

.table-shell.is-delete-mode .table-card,
.table-shell.is-delete-mode .table-die,
.table-shell.is-delete-mode .deck-move-button,
.table-shell.is-delete-mode .mons-move-button,
.table-shell.is-delete-mode .drawing-stroke {
  transition: filter 120ms ease, scale 120ms ease, opacity 120ms ease;
}

.table-shell.is-delete-mode .mons-board-svg [data-mons-piece-id] {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: bounding-box;
  isolation: isolate;
}

.table-shell.is-delete-mode .mons-board-svg [data-mons-piece-id] .mons-piece-sprite {
  pointer-events: auto !important;
  transform-box: fill-box;
  transform-origin: center;
  will-change: scale;
  filter: none;
  transition: scale 120ms ease, opacity 120ms ease;
}

.table-shell.is-delete-mode .drawing-stroke {
  pointer-events: stroke;
  transition: stroke 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.table-shell.is-delete-mode .table-card:hover,
.table-shell.is-delete-mode .table-die:hover,
.table-shell.is-delete-mode .deck-move-button:hover,
.table-shell.is-delete-mode .deck-move-button:focus-visible,
.table-shell.is-delete-mode .mons-move-button:hover,
.table-shell.is-delete-mode .mons-move-button:focus-visible {
  filter: saturate(0.78) brightness(0.82);
  scale: 1.04;
}

.table-shell.is-delete-mode .mons-board-svg [data-mons-piece-id]:hover .mons-piece-sprite,
.table-shell.is-delete-mode .mons-board-svg [data-mons-piece-id]:focus-visible .mons-piece-sprite,
.table-shell.is-delete-mode .mons-board-svg .mons-piece-sprite:hover {
  filter: grayscale(0.72) saturate(0.12) brightness(0.72) contrast(0.95);
  scale: 1.04;
}

.table-shell.is-delete-mode .drawing-stroke:hover {
  filter:
    drop-shadow(0 0 4px rgba(255, 58, 58, 0.95))
    drop-shadow(0 0 8px rgba(255, 40, 40, 0.8));
  stroke: rgba(255, 86, 86, 0.98);
}

.table-card.is-delete-fading,
.table-die.is-delete-fading,
.deck-control-button.is-delete-fading,
.deck-slot.is-delete-fading,
.codegame-grid-frame.is-delete-fading,
.mons-game-shell.is-delete-fading,
.mons-side-claims.is-delete-fading,
.mons-board-svg [data-mons-piece-id].is-delete-fading,
.drawing-stroke.is-delete-fading {
  opacity: 0;
  scale: 0.9;
  filter: saturate(0.62) brightness(0.72);
}

.icon-pill-button:hover,
.icon-pill-button:focus-visible,
.copy-link-button:hover,
.copy-link-button:focus-visible,
.home-link-button:hover,
.home-link-button:focus-visible {
  background: rgba(10, 17, 15, 0.8);
}

.copy-link-button.copied {
  border-color: rgba(167, 247, 174, 0.75);
  color: #dbf7df;
}

.asset-menu-modal {
  position: absolute;
  inset: 0;
  z-index: 70000;
  display: grid;
  place-items: center;
  background: rgba(6, 10, 9, 0.46);
  backdrop-filter: blur(2px);
}

.table-shell.is-mons-item-choice-open .mons-game-shell,
.table-shell.is-mons-item-choice-open .mons-board-ghost {
  filter: blur(2px) saturate(0.9);
}

.mons-item-choice-dialog {
  width: min(92vw, 270px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.92);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.34);
  padding: 0.8rem;
}

.mons-item-choice-title {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: rgba(248, 243, 232, 0.92);
}

.mons-item-choice-actions {
  margin-top: 0.64rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.54rem;
}

.mons-item-choice-button {
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(248, 243, 232, 0.94);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.56rem 0.42rem;
  cursor: pointer;
  text-transform: lowercase;
  font-size: 0.78rem;
  font-weight: 700;
}

.mons-item-choice-button img {
  width: 36px;
  height: 36px;
  display: block;
  image-rendering: auto;
  pointer-events: none;
}

.mons-item-choice-button:hover,
.mons-item-choice-button:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.mons-item-choice-button:disabled,
.mons-item-choice-button.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.asset-menu-modal.hidden {
  display: none;
}

.game-options-dialog {
  width: min(92vw, 242px);
}

.game-options-dialog .asset-menu-header {
  position: relative;
  justify-content: center;
}

.game-options-dialog .asset-menu-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.room-settings-dialog {
  width: min(92vw, 248px);
}

.room-settings-dialog .asset-menu-header {
  margin-bottom: 0;
  position: relative;
  justify-content: center;
}

.room-settings-mode-toggle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  gap: 0.3rem;
}

.room-settings-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.room-settings-actions {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.44rem;
}

.room-settings-section-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: rgba(224, 229, 235, 0.78);
}

.room-settings-pattern-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
}

.room-settings-pattern-button {
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.room-settings-pattern-button:hover,
.room-settings-pattern-button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.room-settings-pattern-button.is-active {
  background: rgba(98, 166, 252, 0.25);
  border-color: rgba(148, 202, 255, 0.6);
  color: rgba(228, 243, 255, 0.96);
}

.game-options-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
  color: rgba(224, 229, 235, 0.9);
}

.game-options-title-icon {
  width: 0.88rem;
  height: 0.88rem;
  display: block;
  opacity: 0.9;
}

.game-options-actions {
  display: grid;
  gap: 0.52rem;
}

.game-options-board-size-row {
  display: grid;
  gap: 0.4rem;
}

.game-options-board-size-label {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(247, 243, 232, 0.82);
}

.game-options-board-size-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

.game-options-board-size-option {
  min-height: 1.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, opacity 130ms ease;
}

.game-options-board-size-option:hover,
.game-options-board-size-option:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.game-options-board-size-option.is-active {
  border-color: rgba(144, 204, 255, 0.76);
  background: rgba(98, 166, 252, 0.22);
  color: rgba(227, 243, 255, 0.96);
}

.game-options-board-size-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.game-options-toggle {
  margin-top: 0;
}

.game-options-action {
  margin-top: 0;
}

.game-options-action-reset {
  border-color: rgba(126, 181, 255, 0.46);
  color: rgba(222, 239, 255, 0.95);
  background: rgba(82, 146, 230, 0.16);
}

.game-options-action-reset:hover,
.game-options-action-reset:focus-visible {
  background: rgba(92, 159, 248, 0.24);
  border-color: rgba(149, 198, 255, 0.68);
}

.game-options-action-put-away {
  border-color: rgba(246, 142, 142, 0.45);
  color: rgba(255, 213, 213, 0.96);
  background: rgba(176, 48, 48, 0.16);
}

.game-options-action-put-away:hover,
.game-options-action-put-away:focus-visible {
  background: rgba(198, 58, 58, 0.24);
  border-color: rgba(255, 176, 176, 0.66);
}

.instance-warning-dialog {
  width: min(92vw, 180px);
  padding: 1rem;
}

.clear-table-warning-dialog {
  width: min(92vw, 240px);
}

.instance-warning-title {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(255, 214, 160, 0.96);
}

.instance-warning-text {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(247, 243, 232, 0.9);
  text-transform: lowercase;
}

.instance-warning-actions {
  margin-top: 0.76rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.54rem;
}

.instance-warning-actions .asset-clear-button {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
}

.instance-warning-actions .asset-clear-button svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
}

.instance-warning-continue {
  border-color: rgba(255, 190, 108, 0.5);
  background: rgba(180, 110, 32, 0.2);
  color: rgba(255, 232, 198, 0.98);
}

.instance-warning-continue:hover,
.instance-warning-continue:focus-visible {
  background: rgba(204, 128, 36, 0.3);
  border-color: rgba(255, 208, 144, 0.76);
}

.instance-warning-cancel {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.asset-menu-dialog {
  width: min(94vw, 760px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(12, 20, 17, 0.94);
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.36);
  padding: 0.9rem;
}

#assetMenuModal .asset-menu-dialog {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
}

#assetMenuModal.is-component-view .asset-menu-dialog {
  height: min(88vh, 725px);
  max-height: min(88vh, 725px);
  overflow: hidden;
}

.asset-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.asset-menu-header-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.asset-menu-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.asset-menu-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.asset-menu-tab {
  height: 1.9rem;
  min-width: 122px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 243, 232, 0.9);
  padding: 0 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.asset-menu-tab-icon {
  width: 0.84rem;
  height: 0.84rem;
  display: block;
  flex: 0 0 auto;
}

.asset-menu-tab:hover,
.asset-menu-tab:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.asset-menu-tab.is-active {
  background: rgba(98, 166, 252, 0.25);
  border-color: rgba(148, 202, 255, 0.6);
  color: rgba(228, 243, 255, 0.96);
}

.asset-menu-tab-remove {
  border-color: rgba(248, 158, 158, 0.45);
  background: rgba(136, 34, 34, 0.2);
  color: rgba(255, 218, 218, 0.95);
}

.asset-menu-tab-remove:hover,
.asset-menu-tab-remove:focus-visible {
  background: rgba(150, 40, 40, 0.32);
}

.asset-menu-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 17, 15, 0.58);
  color: #f7f3e8;
  cursor: pointer;
}

.asset-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.asset-component-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.58rem;
}

#assetMenuModal.is-component-view .asset-component-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

#assetMenuModal:not(.is-component-view) #assetGameGallery {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(54vh, 430px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.asset-component-item {
  gap: 0.34rem;
  padding: 0.42rem;
}

.asset-component-item .asset-placeholder-box {
  border-radius: 8px;
}

.asset-component-icon-wrap {
  display: grid;
  place-items: center;
}

.asset-component-icon {
  width: 60%;
  height: 60%;
  display: block;
  color: rgba(247, 243, 232, 0.88);
}

#diceComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#diceComponentTile .asset-component-icon-dice {
  transform: translateY(21px);
}

#coinComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#coinComponentTile .asset-component-icon-coin {
  transform: translateY(21px);
}

#spinnerComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(56, 56, 56, 0.78);
}

.table-shell.light-mode #spinnerComponentTile .asset-placeholder-box {
  background: rgba(255, 255, 255, 1);
}

#spinnerComponentTile .asset-component-icon-spinner {
  transform: translateY(21px) scale(1.14);
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-pointer {
  transform-origin: 12px 12px;
  transform: rotate(15deg);
}

#spinnerComponentTile:hover .asset-component-icon-spinner .spinner-icon-pointer {
  animation: spinnerTilePointerSpin 840ms cubic-bezier(0.22, 0.74, 0.22, 1) 1 both;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-segment {
  fill: rgba(54, 54, 54, 0.96);
  opacity: 1;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-segment.spinner-icon-segment-alt {
  fill: rgba(54, 54, 54, 0.96);
  opacity: 1;
}

.table-shell.light-mode #spinnerComponentTile .asset-component-icon-spinner .spinner-icon-segment,
.table-shell.light-mode #spinnerComponentTile .asset-component-icon-spinner .spinner-icon-segment.spinner-icon-segment-alt {
  fill: rgba(255, 255, 255, 1);
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: 0.94;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-separator {
  stroke: currentColor;
  stroke-width: 0.74;
  stroke-linecap: round;
  opacity: 0.5;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-needle {
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.98;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-needle-head {
  fill: currentColor;
  opacity: 0.98;
}

#spinnerComponentTile .asset-component-icon-spinner .spinner-icon-center {
  fill: rgba(10, 16, 14, 0.9);
  stroke: currentColor;
  stroke-width: 0.62;
  opacity: 0.96;
}

#pokerDeckComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#pokerDeckComponentTile .asset-component-icon-poker {
  transform: translateY(21px) scale(1.04);
}

#pokerDeckComponentTile .asset-component-icon-wrap .asset-component-icon {
  position: relative;
  z-index: 1;
}

#pokerDeckComponentTile .asset-component-icon-wrap .asset-preview-gloss {
  z-index: 2;
  mix-blend-mode: screen;
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-card {
  fill: rgba(255, 255, 255, 0.94);
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-card-edge {
  stroke: #000000;
  stroke-width: 0.8;
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-rank,
#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-suit {
  fill: rgba(24, 27, 34, 0.95);
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 700;
  text-anchor: middle;
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-rank {
  font-size: 4.4px;
  text-anchor: start;
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-suit-corner {
  font-size: 3.1px;
  text-anchor: start;
}

#pokerDeckComponentTile .asset-component-icon-poker .poker-icon-suit-center {
  font-size: 8px;
}

.table-shell.light-mode #pokerDeckComponentTile .asset-component-icon-poker .poker-icon-card {
  fill: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode #pokerDeckComponentTile .asset-component-icon-poker .poker-icon-card-edge {
  stroke: #000000;
}

@keyframes spinnerTilePointerSpin {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(375deg);
  }
}

#marbleComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#marbleComponentTile .asset-component-icon-marble {
  transform: translateY(21px);
}

#stackPointComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#stackPointComponentTile .asset-component-icon-stack-point {
  transform: translateY(21px);
}

#stackPointComponentTile .asset-component-icon-wrap .asset-component-icon {
  position: relative;
  z-index: 1;
}

#stackPointComponentTile .asset-component-icon-wrap .asset-preview-gloss {
  z-index: 2;
  mix-blend-mode: screen;
}

#stackPointComponentTile .asset-component-icon-stack-point rect {
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-dasharray: 1.5 1.9;
  stroke-linecap: round;
  fill: none;
  opacity: 0.9;
}

#secretAreaComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#secretAreaComponentTile .asset-component-icon-secret-area {
  transform: translateY(21px);
  color: #000000;
}

#secretAreaComponentTile .asset-component-icon-wrap .asset-component-icon {
  position: relative;
  z-index: 1;
}

#secretAreaComponentTile .asset-component-icon-wrap .asset-preview-gloss {
  z-index: 2;
  mix-blend-mode: screen;
}

#secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-eye {
  fill: currentColor;
  opacity: 0.96;
}

#secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-sclera {
  fill: #ffffff;
  opacity: 1;
}

#secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-pupil {
  fill: currentColor;
  opacity: 0.98;
}

#secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-slash {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.98;
}

#imageComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#imageComponentTile .asset-component-icon-image {
  transform: translateY(21px);
}

#counterComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#counterComponentTile .asset-component-icon-counter {
  transform: translateY(20px) scale(1.18);
  transform-origin: center;
}

#chipsComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#chipsComponentTile .asset-component-icon-chips {
  transform: translateY(21px);
  transform-origin: center;
}

#chipsComponentTile .chips-icon-back {
  display: none;
}

#chipsComponentTile .chips-icon-back .chips-icon-shell {
  fill: rgba(247, 243, 232, 0.88);
}

#chipsComponentTile .chips-icon-front .chips-icon-shell {
  fill: rgba(232, 226, 213, 0.96);
}

#chipsComponentTile .chips-icon-shell {
  fill: rgba(232, 226, 213, 0.96);
  stroke: rgba(0, 0, 0, 0.92);
  stroke-width: 0.8;
}

#chipsComponentTile .chips-icon-inner {
  fill: rgba(243, 239, 230, 0.94);
  stroke: rgba(0, 0, 0, 0.88);
  stroke-width: 0.72;
}

#chipsComponentTile .chips-icon-core {
  fill: rgba(255, 252, 246, 0.96);
  stroke: rgba(0, 0, 0, 0.84);
  stroke-width: 0.64;
}

#chipsComponentTile .chips-icon-value {
  fill: #ffffff;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-size: 3.42px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#timerComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#timerComponentTile .asset-component-icon-timer {
  transform: translateY(20px) scale(1.12);
  transform-origin: center;
}

#timerComponentTile .asset-component-icon-wrap .asset-component-icon {
  position: relative;
  z-index: 1;
}

#timerComponentTile .asset-component-icon-wrap .asset-preview-gloss {
  z-index: 2;
  mix-blend-mode: screen;
}

#timerComponentTile .timer-icon-body {
  fill: rgba(14, 20, 18, 0.58);
  stroke: #000;
  stroke-width: 1.2;
}

#timerComponentTile .timer-icon-display {
  fill: rgba(8, 12, 11, 0.72);
  stroke: #000;
  stroke-width: 0.66;
}

#timerComponentTile .timer-icon-text {
  fill: rgba(255, 112, 112, 0.96);
  font-family: "Courier New", Courier, monospace;
  font-size: 3.2px;
  font-weight: 700;
  letter-spacing: 0.15px;
}

#timerComponentTile .timer-icon-top {
  fill: #000000;
}

#timerComponentTile .timer-icon-side,
#timerComponentTile .timer-icon-base {
  stroke: #000;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mediaComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#mediaComponentTile .asset-component-icon-media {
  transform: translateY(21px);
}

#labelComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#labelComponentTile .asset-component-icon-label {
  transform: translateY(21px);
}

#labelComponentTile .asset-component-icon-label text {
  fill: currentColor;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  font-size: 9.6px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

#noteComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#noteComponentTile .asset-component-icon-note {
  transform: translateY(20px) scale(1.06);
  transform-origin: center;
}

#noteComponentTile .asset-component-icon-wrap .asset-component-icon {
  position: relative;
  z-index: 1;
}

#noteComponentTile .asset-component-icon-wrap .asset-preview-gloss {
  z-index: 2;
  mix-blend-mode: screen;
}

#noteComponentTile .note-icon-frame {
  fill: #000000;
}

#noteComponentTile .note-icon-line {
  stroke: #000000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#stickerComponentTile .asset-placeholder-box {
  border-style: solid;
  background: rgba(255, 255, 255, 0.05);
}

#stickerComponentTile .asset-component-icon-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}

#stickerComponentTile .asset-component-icon-sticker {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64%;
  height: 64%;
  object-fit: contain;
  image-rendering: auto;
  opacity: 1;
  transform-origin: center center;
  transform: translateY(-0.5px) translateX(0);
  will-change: transform, opacity;
  pointer-events: none;
}

#stickerComponentTile .asset-component-icon-sticker[data-sticker-active="0"] {
  opacity: 0;
}

#stickerComponentTile .asset-component-icon-sticker[data-sticker-active="1"] {
  opacity: 1;
  z-index: 1;
}

#stickerComponentTile .asset-component-icon-sticker.is-sticker-shuffle-enter {
  opacity: 0;
  transform: translateY(-0.5px) translateX(16px);
  z-index: 2;
}

#stickerComponentTile .asset-component-icon-sticker.is-sticker-shuffle-enter.is-sticker-shuffle-active {
  opacity: 1;
  transform: translateY(-0.5px) translateX(0);
  transition:
    opacity 170ms ease,
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#stickerComponentTile .asset-component-icon-sticker.is-sticker-shuffle-exit {
  opacity: 1;
  transform: translateY(-0.5px) translateX(0);
  z-index: 1;
}

#stickerComponentTile .asset-component-icon-sticker.is-sticker-shuffle-exit.is-sticker-shuffle-active {
  opacity: 0;
  transform: translateY(-0.5px) translateX(-16px);
  transition:
    opacity 170ms ease,
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#diceComponentTile [data-dice-pip] {
  transition: opacity 90ms linear;
}

.asset-component-item .asset-label {
  font-size: 0.76rem;
}

.dice-add-modal {
  z-index: 71000;
}

.image-add-modal {
  z-index: 71000;
}

.sticker-add-modal {
  z-index: 71000;
}

.media-add-modal {
  z-index: 71000;
}

.spinner-add-modal {
  z-index: 71000;
}

#goBoardResizeWarningModal {
  z-index: 72000;
}

.dice-add-dialog {
  width: min(92vw, 338px);
  max-width: 338px;
  padding: 0.76rem;
}

.image-add-dialog {
  width: min(92vw, 372px);
  max-width: 372px;
  padding: 0.76rem;
}

.sticker-add-dialog {
  width: min(94vw, 640px);
  max-width: 640px;
  padding: 0.76rem;
}

.media-add-dialog {
  width: min(92vw, 420px);
  max-width: 420px;
  padding: 0.76rem;
}

.spinner-add-dialog {
  width: min(92vw, 372px);
  max-width: 372px;
  padding: 0.76rem;
}

.dice-add-header {
  margin-bottom: 0.62rem;
}

.image-add-header {
  margin-bottom: 0.62rem;
}

.sticker-add-header {
  margin-bottom: 0.62rem;
}

.media-add-header {
  margin-bottom: 0.62rem;
}

.spinner-add-header {
  margin-bottom: 0.62rem;
}

.asset-submenu-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  flex: 0 0 auto;
}

.dice-add-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(247, 243, 232, 0.95);
}

.dice-add-body {
  display: grid;
  gap: 0.52rem;
}

.image-add-body {
  display: grid;
  gap: 0.56rem;
}

.sticker-add-body {
  display: grid;
  gap: 0.56rem;
}

.sticker-pack-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.sticker-pack-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  min-height: 1.9rem;
  padding: 0.28rem 0.34rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 243, 232, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.sticker-pack-tab-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  image-rendering: auto;
  pointer-events: none;
  flex: 0 0 auto;
}

.sticker-pack-tab:hover,
.sticker-pack-tab:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.sticker-pack-tab.is-active {
  border-color: rgba(144, 204, 255, 0.76);
  background: rgba(98, 166, 252, 0.22);
  color: rgba(227, 243, 255, 0.96);
}

.sticker-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
  position: relative;
  margin-top: 0.08rem;
  padding-top: 0.62rem;
}

.sticker-category-tabs::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.sticker-category-tab {
  min-height: 1.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 243, 232, 0.82);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.sticker-category-tab:hover,
.sticker-category-tab:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.sticker-category-tab.is-active {
  border-color: rgba(144, 204, 255, 0.74);
  background: rgba(98, 166, 252, 0.2);
  color: rgba(227, 243, 255, 0.94);
}

.sticker-category-tab:not(.is-active) {
  opacity: 0.48;
}

.sticker-add-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.52rem;
  align-items: stretch;
}

.sticker-add-random-button {
  width: 2.65rem;
  min-width: 2.65rem;
  padding: 0;
}

.sticker-add-random-button svg {
  display: block;
}

.media-add-body {
  display: grid;
  gap: 0.56rem;
}

.spinner-add-body {
  display: grid;
  gap: 0.56rem;
}

.spinner-add-field {
  display: grid;
  gap: 0.34rem;
}

.spinner-add-segment-input {
  max-width: 100%;
}

.spinner-add-text-toggle {
  margin-top: 0.02rem;
}

.spinner-add-text-inputs {
  display: grid;
  gap: 0.4rem;
  max-height: min(38vh, 270px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 0.36rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.spinner-add-text-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.46rem;
}

.spinner-add-text-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: rgba(247, 243, 232, 0.74);
  white-space: nowrap;
}

.spinner-add-text-row .image-add-input {
  padding: 0.42rem 0.52rem;
  font-size: 0.74rem;
}

.sticker-add-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.52rem;
  max-height: min(52vh, 380px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 0.44rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.sticker-add-item {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  padding: 0.32rem;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

.sticker-add-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.sticker-add-item:hover,
.sticker-add-item:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.sticker-add-item.is-active {
  border-color: rgba(144, 204, 255, 0.76);
  background: rgba(98, 166, 252, 0.22);
  box-shadow: 0 0 0 1px rgba(144, 204, 255, 0.3) inset;
  transform: translateY(-1px);
}

.dice-add-row {
  display: grid;
  gap: 0.44rem;
}

.image-add-field {
  display: grid;
  gap: 0.34rem;
}

.image-add-label {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: rgba(247, 243, 232, 0.82);
}

.image-add-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 17, 15, 0.7);
  color: #f7f3e8;
  padding: 0.52rem 0.58rem;
  font-size: 0.8rem;
  outline: none;
}

.image-add-input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(10, 17, 15, 0.82);
}

.image-add-input.is-invalid {
  border-color: rgba(255, 118, 118, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 88, 88, 0.3);
}

.image-add-input:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.image-add-check-row {
  display: grid;
  gap: 0.46rem;
}

.image-add-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.36rem 0.52rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 243, 232, 0.92);
  text-transform: none;
}

.image-add-toggle-leading {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.image-add-toggle-label {
  font-size: 0.76rem;
  text-transform: lowercase;
}

.image-add-color-wrap {
  --image-add-picker-color: #ffffff;
  position: relative;
  width: 1.34rem;
  height: 1.34rem;
  border-radius: 999px;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
  overflow: visible;
  line-height: 0;
}

.image-add-color-wrap::before {
  content: "";
  width: 0.84rem;
  height: 0.84rem;
  border-radius: 999px;
  background: var(--image-add-picker-color, #ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.image-add-color-input {
  position: absolute;
  inset: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: none;
  display: block;
  overflow: visible;
  cursor: pointer;
  outline: none;
  opacity: 0;
}

.image-add-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.image-add-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 999px;
  box-shadow: none;
}

.image-add-color-input::-moz-color-swatch {
  border: none;
  border-radius: 999px;
  box-shadow: none;
}

.image-add-toggle-control {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 20px;
}

.image-add-toggle-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.image-add-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.image-add-toggle-slider::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(247, 243, 232, 0.96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 150ms ease;
}

.image-add-toggle-input:checked + .image-add-toggle-slider {
  background: rgba(98, 166, 252, 0.62);
  border-color: rgba(150, 207, 255, 0.78);
}

.image-add-toggle-input:checked + .image-add-toggle-slider::after {
  transform: translateX(14px);
}

.image-add-toggle-input:focus-visible + .image-add-toggle-slider {
  box-shadow: 0 0 0 2px rgba(150, 207, 255, 0.36);
}

.image-add-error {
  min-height: 1rem;
  padding: 0.08rem 0.1rem 0;
  color: rgba(255, 128, 128, 0.96);
  font-size: 0.72rem;
  line-height: 1.25;
}

.dice-type-row {
  grid-template-columns: 1fr 1fr;
}

.dice-count-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dice-add-option {
  min-height: 2.1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 243, 232, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.dice-add-option:hover,
.dice-add-option:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.dice-add-option.is-active {
  border-color: rgba(144, 204, 255, 0.76);
  background: rgba(98, 166, 252, 0.22);
  color: rgba(227, 243, 255, 0.96);
}

#diceTypeD6Button svg {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.dice-add-confirm-button {
  width: 100%;
  min-height: 2.3rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 243, 232, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}

.dice-add-confirm-button:hover,
.dice-add-confirm-button:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.44);
}

.dice-add-confirm-button:disabled,
.dice-add-confirm-button.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.dice-add-confirm-button:disabled:hover,
.dice-add-confirm-button:disabled:focus-visible,
.dice-add-confirm-button.is-disabled:hover,
.dice-add-confirm-button.is-disabled:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
}

.asset-clear-button {
  margin-top: 0.84rem;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #f7f3e8;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: lowercase;
  padding: 0.68rem 0.8rem;
  cursor: pointer;
}

.remove-components-button,
.clear-table-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

#assetMenuModal:not(.is-component-view) .remove-components-button {
  position: relative;
  margin-top: 1.06rem;
}

#assetMenuModal:not(.is-component-view) .remove-components-button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.56rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.clear-table-button-icon {
  width: 19px;
  height: 19px;
  display: block;
  image-rendering: auto;
  filter: drop-shadow(0 0 3px rgba(255, 124, 124, 0.42));
  pointer-events: none;
  user-select: none;
}

.remove-components-button-emoji {
  font-size: 0.9rem;
  line-height: 1;
}

.asset-table-reset-row {
  margin-top: 0.84rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.62rem;
}

.asset-table-reset-row.has-wipe {
  grid-template-columns: 1fr 1fr;
}

.asset-table-reset-row .asset-clear-button {
  margin-top: 0;
}

.asset-clear-button:hover,
.asset-clear-button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.asset-clear-button:disabled,
.asset-clear-button.is-disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.asset-clear-button:disabled:hover,
.asset-clear-button:disabled:focus-visible,
.asset-clear-button.is-disabled:hover,
.asset-clear-button.is-disabled:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.asset-gallery-item {
  --tile-tilt-x: 0deg;
  --tile-tilt-y: 0deg;
  --tile-gloss-x: 50%;
  --tile-gloss-y: 50%;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.48rem;
  padding: 0.58rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #f7f3e8;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    background 150ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.asset-gallery-item:hover,
.asset-gallery-item:focus-visible,
.asset-menu-close:hover,
.asset-menu-close:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.asset-placeholder-box {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 9px, rgba(255, 255, 255, 0.02) 9px 18px);
}

.asset-preview-box {
  overflow: hidden;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
  position: relative;
}

.asset-gallery-item.is-asset-loading .asset-preview-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(8, 12, 11, 0.32);
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
}

.asset-gallery-item.is-asset-loading .asset-preview-box::after {
  content: "";
  position: absolute;
  inset: auto;
  left: calc(50% + var(--asset-loader-offset-x, 0px));
  top: calc(50% + var(--asset-loader-offset-y, 0px));
  right: auto;
  bottom: auto;
  margin: 0;
  width: clamp(16px, 28%, 36px);
  height: clamp(16px, 28%, 36px);
  transform: translate3d(-50%, -50%, 0);
  border-radius: 999px;
  border: 1.7px solid rgba(247, 243, 232, 0.24);
  border-top-color: rgba(247, 243, 232, 0.94);
  animation: assetLoadingSpin 680ms linear infinite;
  z-index: 3;
}

.asset-gallery-item.is-asset-loading .asset-preview-image {
  opacity: 0.38;
}

.asset-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-preview-gloss {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--tile-gloss-x) var(--tile-gloss-y),
    rgba(255, 255, 255, 0.34) 0,
    rgba(255, 255, 255, 0.06) 24%,
    rgba(255, 255, 255, 0) 56%
  );
  transition: opacity 170ms ease;
}

.asset-preview-box-tafl .asset-preview-image {
  filter: saturate(0.94) brightness(0.94);
}

.asset-preview-box-go .asset-preview-image {
  filter: saturate(0.98) brightness(0.96);
}

.asset-preview-box-hexitama {
  display: grid;
  place-items: center;
  background-image: none;
  background-color: #163f31;
}

#hexitamaTile .asset-placeholder-box.asset-preview-box-hexitama {
  background-image: none;
  background-color: #163f31;
}

.asset-hexitama-preview-svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
}

.asset-hexitama-preview-hex-fill {
  fill: url(#assetHexitamaTileGradient);
}

.asset-hexitama-preview-hex-outline {
  fill: none;
  stroke: rgba(245, 248, 255, 0.92);
  stroke-width: 2.25;
  vector-effect: non-scaling-stroke;
}

.asset-hexitama-preview-temple {
  opacity: 0.3;
  pointer-events: none;
}

.asset-hexitama-preview-piece {
  filter: drop-shadow(0 1px 1.1px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  image-rendering: auto;
  image-rendering: smooth;
  shape-rendering: auto;
}

.asset-hexitama-preview-piece-chief {
  filter: drop-shadow(0 1px 1.3px rgba(0, 0, 0, 0.52));
}

.asset-hexitama-preview-piece-chief-black {
  filter: invert(1) brightness(1.08) drop-shadow(0 1px 1.3px rgba(0, 0, 0, 0.52));
}

#arcadeMachineTile .asset-preview-box {
  background: #fff;
}

.asset-preview-box-arcade {
  background:
    radial-gradient(circle at 50% 24%, rgba(87, 154, 255, 0.2), rgba(87, 154, 255, 0) 48%),
    linear-gradient(180deg, rgba(22, 27, 38, 0.95) 0%, rgba(9, 11, 18, 0.95) 100%);
}

.asset-arcade-tile-icon {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 74%;
  height: 74%;
  transform: translate(-50%, -50%);
  color: rgba(247, 243, 232, 0.9);
  pointer-events: none;
}

.asset-arcade-icon-screen {
  fill: rgba(6, 10, 13, 0.9);
}

.asset-arcade-icon-marquee,
.asset-arcade-icon-panel {
  fill: rgba(247, 243, 232, 0.02);
}

.asset-arcade-icon-button,
.asset-arcade-icon-stick {
  opacity: 0.9;
}

.table-shell.light-mode .asset-preview-box-arcade {
  background:
    radial-gradient(circle at 50% 24%, rgba(74, 132, 228, 0.22), rgba(74, 132, 228, 0) 48%),
    linear-gradient(180deg, rgba(244, 247, 252, 0.95) 0%, rgba(226, 233, 244, 0.95) 100%);
}

.table-shell.light-mode .asset-preview-box-hexitama {
  background-image: none;
  background-color: #ffffff;
}

.table-shell.light-mode #hexitamaTile .asset-placeholder-box.asset-preview-box-hexitama {
  background-image: none;
  background-color: #ffffff;
}

.table-shell.light-mode .asset-hexitama-preview-hex-outline {
  stroke: rgba(8, 10, 12, 0.92);
}

.table-shell.light-mode .asset-arcade-tile-icon {
  color: rgba(34, 29, 23, 0.84);
}

.table-shell.light-mode .asset-arcade-icon-screen {
  fill: rgba(20, 28, 34, 0.86);
}

.table-shell.light-mode .asset-arcade-icon-marquee,
.table-shell.light-mode .asset-arcade-icon-panel {
  fill: rgba(34, 29, 23, 0.06);
}

.asset-tafl-preview-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.asset-tafl-preview-piece {
  position: absolute;
  width: 7.35%;
  height: auto;
  opacity: 0.94;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.46));
}

.asset-tafl-preview-piece-attacker,
.asset-tafl-preview-piece-defender {
  z-index: 1;
}

.asset-tafl-preview-piece-king {
  width: 8.1%;
  z-index: 2;
}

.asset-gallery-item-cool {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(920px) rotateX(var(--tile-tilt-x)) rotateY(var(--tile-tilt-y)) translateZ(0);
  box-shadow: 0 6px 14px rgba(7, 12, 10, 0.14);
}

.asset-gallery-item-cool::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}

.asset-gallery-item-cool .asset-preview-box {
  transform: translateZ(16px);
}

.asset-gallery-item-cool .asset-label {
  transform: translateZ(22px);
}

.asset-gallery-item-cool:hover,
.asset-gallery-item-cool:focus-visible {
  box-shadow:
    0 16px 24px rgba(7, 12, 10, 0.3),
    0 3px 8px rgba(7, 12, 10, 0.24);
}

.asset-gallery-item-cool:hover .asset-preview-gloss,
.asset-gallery-item-cool:focus-visible .asset-preview-gloss {
  opacity: 1;
}

.asset-label {
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: lowercase;
}

.asset-label-meta {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.48;
  margin-left: 0.2rem;
}

.table-shell:not(.light-mode) #chipsComponentTile .chips-icon-shell {
  stroke: rgba(247, 243, 232, 0.92);
}

.table-shell:not(.light-mode) #chipsComponentTile .chips-icon-inner {
  stroke: rgba(247, 243, 232, 0.88);
}

.table-shell:not(.light-mode) #chipsComponentTile .chips-icon-core {
  stroke: rgba(247, 243, 232, 0.84);
}

.table-shell:not(.light-mode) #timerComponentTile .timer-icon-body {
  fill: none;
  stroke: rgba(247, 243, 232, 0.92);
}

.table-shell:not(.light-mode) #timerComponentTile .timer-icon-display {
  fill: none;
  stroke: rgba(247, 243, 232, 0.88);
}

.table-shell:not(.light-mode) #timerComponentTile .timer-icon-top {
  fill: none;
  stroke: rgba(247, 243, 232, 0.92);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-shell:not(.light-mode) #timerComponentTile .timer-icon-side,
.table-shell:not(.light-mode) #timerComponentTile .timer-icon-base {
  stroke: rgba(247, 243, 232, 0.92);
}

.table-shell:not(.light-mode) #timerComponentTile .timer-icon-text {
  fill: none;
  opacity: 0;
}

.table-shell:not(.light-mode) #noteComponentTile .note-icon-frame {
  fill: rgba(247, 243, 232, 0.92);
}

.table-shell:not(.light-mode) #noteComponentTile .note-icon-line {
  stroke: rgba(247, 243, 232, 0.92);
}

.table-shell:not(.light-mode) #secretAreaComponentTile .asset-component-icon-secret-area {
  color: rgba(247, 243, 232, 0.9);
}

.table-shell:not(.light-mode) #secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-sclera {
  fill: rgba(10, 17, 15, 0.94);
}

.table-shell:not(.light-mode) #secretAreaComponentTile .asset-component-icon-secret-area .secret-area-icon-pupil {
  fill: rgba(247, 243, 232, 0.94);
}

.table-shell.light-mode .asset-menu-modal {
  background: rgba(28, 24, 18, 0.22);
}

.table-shell.light-mode .asset-component-icon {
  color: rgba(34, 29, 23, 0.84);
}

.table-shell.light-mode #chipsComponentTile .chips-icon-back .chips-icon-shell {
  fill: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode #chipsComponentTile .chips-icon-front .chips-icon-shell {
  fill: rgba(236, 231, 220, 0.98);
}

.table-shell.light-mode #chipsComponentTile .chips-icon-shell {
  fill: rgba(236, 231, 220, 0.98);
  stroke: rgba(0, 0, 0, 0.94);
  stroke-width: 0.8;
}

.table-shell.light-mode #chipsComponentTile .chips-icon-inner {
  fill: rgba(248, 244, 236, 0.96);
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 0.72;
}

.table-shell.light-mode #chipsComponentTile .chips-icon-core {
  fill: rgba(255, 252, 248, 0.98);
  stroke: rgba(0, 0, 0, 0.86);
  stroke-width: 0.64;
}

.table-shell.light-mode #chipsComponentTile .chips-icon-value {
  fill: #ffffff;
}

.table-shell.light-mode #timerComponentTile .timer-icon-body {
  fill: rgba(255, 255, 255, 0.9);
  stroke: #000;
}

.table-shell.light-mode #timerComponentTile .timer-icon-display {
  fill: rgba(34, 29, 23, 0.76);
  stroke: #000;
}

.table-shell.light-mode #timerComponentTile .timer-icon-text {
  fill: rgba(228, 70, 70, 0.96);
}

.table-shell.light-mode #timerComponentTile .timer-icon-top {
  fill: #000000;
}

.table-shell.light-mode #timerComponentTile .timer-icon-side,
.table-shell.light-mode #timerComponentTile .timer-icon-base {
  stroke: #000;
}

.table-shell.light-mode #noteComponentTile .note-icon-frame {
  fill: #000000;
}

.table-shell.light-mode #noteComponentTile .note-icon-line {
  stroke: #000000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-shell.light-mode .dice-add-title {
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .image-add-label {
  color: rgba(34, 29, 23, 0.82);
}

.table-shell.light-mode .sticker-add-gallery {
  border-color: rgba(34, 29, 23, 0.22);
  background: rgba(255, 255, 255, 0.62);
}

.table-shell.light-mode .sticker-pack-tab {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .sticker-pack-tab:hover,
.table-shell.light-mode .sticker-pack-tab:focus-visible {
  background: rgba(255, 255, 255, 0.9);
}

.table-shell.light-mode .sticker-pack-tab.is-active {
  border-color: rgba(84, 143, 222, 0.56);
  background: rgba(111, 174, 255, 0.24);
  color: rgba(32, 60, 98, 0.95);
}

.table-shell.light-mode .sticker-category-tab {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(34, 29, 23, 0.8);
}

.table-shell.light-mode .sticker-category-tabs::before {
  background: rgba(34, 29, 23, 0.2);
}

.table-shell.light-mode .sticker-category-tab:hover,
.table-shell.light-mode .sticker-category-tab:focus-visible {
  background: rgba(255, 255, 255, 0.9);
}

.table-shell.light-mode .sticker-category-tab.is-active {
  border-color: rgba(84, 143, 222, 0.54);
  background: rgba(111, 174, 255, 0.22);
  color: rgba(32, 60, 98, 0.92);
}

.table-shell.light-mode .sticker-add-item {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.74);
}

.table-shell.light-mode .sticker-add-item:hover,
.table-shell.light-mode .sticker-add-item:focus-visible {
  background: rgba(255, 255, 255, 0.92);
}

.table-shell.light-mode .sticker-add-item.is-active {
  border-color: rgba(84, 143, 222, 0.56);
  background: rgba(111, 174, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(84, 143, 222, 0.24) inset;
}

.table-shell.light-mode .image-add-input {
  border-color: rgba(34, 29, 23, 0.26);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .image-add-input:focus {
  border-color: rgba(34, 29, 23, 0.46);
  background: rgba(255, 255, 255, 0.98);
}

.table-shell.light-mode .image-add-input.is-invalid {
  border-color: rgba(198, 66, 66, 0.7);
  box-shadow: 0 0 0 1px rgba(198, 66, 66, 0.22);
}

.table-shell.light-mode .image-add-toggle {
  border-color: rgba(34, 29, 23, 0.22);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .image-add-color-wrap {
  border-color: transparent;
  background: transparent;
}

.table-shell.light-mode .image-add-color-wrap::before {
  box-shadow: 0 1px 2px rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .image-add-color-input::-webkit-color-swatch {
  box-shadow: none;
}

.table-shell.light-mode .image-add-toggle-slider {
  background: rgba(34, 29, 23, 0.14);
  border-color: rgba(34, 29, 23, 0.28);
}

.table-shell.light-mode .image-add-toggle-slider::after {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(34, 29, 23, 0.26);
}

.table-shell.light-mode .image-add-toggle-input:checked + .image-add-toggle-slider {
  background: rgba(92, 154, 238, 0.62);
  border-color: rgba(83, 141, 221, 0.74);
}

.table-shell.light-mode .image-add-toggle-input:focus-visible + .image-add-toggle-slider {
  box-shadow: 0 0 0 2px rgba(92, 154, 238, 0.28);
}

.table-shell.light-mode .image-add-error {
  color: rgba(181, 54, 54, 0.9);
}

.table-shell.light-mode .dice-add-option {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.76);
  color: rgba(34, 29, 23, 0.88);
}

.table-shell.light-mode .dice-add-option:hover,
.table-shell.light-mode .dice-add-option:focus-visible {
  background: rgba(255, 255, 255, 0.92);
}

.table-shell.light-mode .dice-add-option.is-active {
  border-color: rgba(84, 143, 222, 0.56);
  background: rgba(111, 174, 255, 0.24);
  color: rgba(24, 53, 84, 0.95);
}

.table-shell.light-mode .dice-add-confirm-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .dice-add-confirm-button:hover,
.table-shell.light-mode .dice-add-confirm-button:focus-visible {
  background: rgba(255, 255, 255, 0.96);
}

.table-shell.light-mode .mons-item-choice-dialog {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(249, 245, 236, 0.95);
  box-shadow: 0 22px 34px rgba(43, 35, 21, 0.2);
}

.table-shell.light-mode .mons-item-choice-title {
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .mons-item-choice-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(34, 29, 23, 0.9);
}

.table-shell.light-mode .mons-item-choice-button:hover,
.table-shell.light-mode .mons-item-choice-button:focus-visible {
  background: rgba(255, 255, 255, 0.96);
}

.table-shell.light-mode .asset-menu-dialog {
  background: rgba(249, 245, 236, 0.95);
  border-color: rgba(34, 29, 23, 0.22);
  box-shadow: 0 22px 34px rgba(43, 35, 21, 0.22);
}

.table-shell.light-mode #assetMenuModal.is-component-view .asset-component-grid {
  border-color: rgba(34, 29, 23, 0.22);
  background: rgba(255, 255, 255, 0.62);
}

.table-shell.light-mode #assetMenuModal:not(.is-component-view) #assetGameGallery {
  border-color: rgba(34, 29, 23, 0.22);
  background: rgba(255, 255, 255, 0.62);
}

.table-shell.light-mode .asset-menu-header h2,
.table-shell.light-mode .asset-gallery-item,
.table-shell.light-mode .asset-menu-close,
.table-shell.light-mode .asset-menu-tab {
  color: #2a241d;
}

.table-shell.light-mode .asset-label-meta {
  opacity: 0.38;
}

.table-shell.light-mode .asset-gallery-item {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.58);
}

.table-shell.light-mode .asset-gallery-item-cool {
  box-shadow: 0 8px 16px rgba(45, 36, 20, 0.16);
}

.table-shell.light-mode .asset-gallery-item-cool:hover,
.table-shell.light-mode .asset-gallery-item-cool:focus-visible {
  box-shadow:
    0 16px 24px rgba(45, 36, 20, 0.24),
    0 3px 8px rgba(45, 36, 20, 0.18);
}

.table-shell.light-mode .asset-gallery-item:hover,
.table-shell.light-mode .asset-gallery-item:focus-visible,
.table-shell.light-mode .asset-menu-close:hover,
.table-shell.light-mode .asset-menu-close:focus-visible {
  background: rgba(255, 255, 255, 0.9);
}

.table-shell.light-mode .asset-gallery-item.is-asset-loading .asset-preview-box::before {
  background: rgba(255, 255, 255, 0.58);
}

.table-shell.light-mode .asset-gallery-item.is-asset-loading .asset-preview-box::after {
  border-color: rgba(34, 29, 23, 0.2);
  border-top-color: rgba(34, 29, 23, 0.86);
}

.table-shell.light-mode .asset-clear-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: #2a241d;
}

.table-shell.light-mode .asset-clear-button:hover,
.table-shell.light-mode .asset-clear-button:focus-visible {
  background: rgba(255, 255, 255, 0.96);
}

.table-shell.light-mode #assetMenuModal:not(.is-component-view) .remove-components-button::before {
  background: rgba(34, 29, 23, 0.22);
}

.table-shell.light-mode .asset-menu-close {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.78);
}

.table-shell.light-mode .asset-menu-tab {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.76);
}

.table-shell.light-mode .asset-menu-tab:hover,
.table-shell.light-mode .asset-menu-tab:focus-visible {
  background: rgba(255, 255, 255, 0.92);
}

.table-shell.light-mode .asset-menu-tab.is-active {
  background: rgba(111, 174, 255, 0.28);
  border-color: rgba(84, 143, 222, 0.56);
  color: rgba(24, 53, 84, 0.95);
}

.table-shell.light-mode .asset-menu-tab-remove {
  border-color: rgba(184, 77, 77, 0.44);
  background: rgba(184, 77, 77, 0.14);
  color: rgba(120, 34, 34, 0.92);
}

.table-shell.light-mode .asset-menu-tab-remove:hover,
.table-shell.light-mode .asset-menu-tab-remove:focus-visible {
  background: rgba(184, 77, 77, 0.22);
}

.table-shell.light-mode .instance-warning-title {
  color: rgba(122, 70, 14, 0.92);
}

.table-shell.light-mode .instance-warning-text {
  color: rgba(40, 33, 24, 0.82);
}

.table-shell.light-mode .instance-warning-continue {
  border-color: rgba(165, 108, 28, 0.45);
  background: rgba(230, 166, 80, 0.2);
  color: rgba(86, 51, 15, 0.95);
}

.table-shell.light-mode .instance-warning-continue:hover,
.table-shell.light-mode .instance-warning-continue:focus-visible {
  background: rgba(230, 166, 80, 0.34);
  border-color: rgba(165, 108, 28, 0.62);
}

.table-shell.light-mode .room-settings-section-title {
  color: rgba(34, 29, 23, 0.74);
}

.table-shell.light-mode .room-settings-pattern-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.76);
  color: #2a241d;
}

.table-shell.light-mode .room-settings-pattern-button:hover,
.table-shell.light-mode .room-settings-pattern-button:focus-visible {
  background: rgba(255, 255, 255, 0.92);
}

.table-shell.light-mode .room-settings-pattern-button.is-active {
  background: rgba(111, 174, 255, 0.28);
  border-color: rgba(84, 143, 222, 0.56);
  color: rgba(24, 53, 84, 0.95);
}

.table-shell.light-mode .mons-board-ghost {
  border-color: rgba(94, 117, 109, 0.3);
  background: rgba(246, 247, 241, 0.56);
  box-shadow: 0 10px 18px rgba(58, 72, 66, 0.14);
}

.table-shell.light-mode .mons-board-ghost:hover,
.table-shell.light-mode .mons-board-ghost:focus-visible {
  border-color: rgba(94, 117, 109, 0.52);
  box-shadow: 0 14px 22px rgba(58, 72, 66, 0.18);
}

.table-shell.light-mode .mons-board-svg {
  background: #d7d2c4;
}

.table-shell.light-mode .mons-board-coordinate {
  fill: rgba(34, 29, 23, 0.7);
}

.table-shell.light-mode .tafl-coordinate-layer {
  color: rgba(34, 29, 23, 0.7);
  text-shadow: none;
}

.table-shell.light-mode .tafl-hud-status {
  color: rgba(34, 29, 23, 0.78);
  text-shadow: none;
}

.table-shell.light-mode .tafl-win-overlay {
  background: radial-gradient(circle at center, rgba(255, 250, 240, 0.12) 0%, rgba(52, 38, 24, 0.18) 76%);
}

.table-shell.light-mode .tafl-win-dialog {
  border-color: rgba(62, 50, 36, 0.24);
  background: linear-gradient(180deg, rgba(247, 242, 231, 0.94) 0%, rgba(236, 229, 214, 0.92) 100%);
  box-shadow: 0 14px 26px rgba(54, 41, 27, 0.26);
}

.table-shell.light-mode .tafl-win-title {
  color: rgba(60, 42, 24, 0.96);
  text-shadow: none;
}

.table-shell.light-mode .tafl-win-button {
  border-color: rgba(64, 84, 118, 0.38);
  background: linear-gradient(180deg, rgba(228, 239, 255, 0.92) 0%, rgba(199, 219, 247, 0.94) 100%);
  color: rgba(34, 50, 76, 0.92);
}

.table-shell.light-mode .mons-hud-score {
  color: rgba(34, 29, 23, 0.92);
}

.table-shell.light-mode .mons-hud-potion {
  opacity: 0.9;
}

.table-shell.light-mode .mons-hud-avatar-button {
  background: transparent;
  border: none;
}

.table-shell.light-mode .mons-hud-avatar-button:hover,
.table-shell.light-mode .mons-hud-avatar-button:focus-visible {
  filter: brightness(1.06);
}

.table-shell.light-mode .mons-hud-avatar-button.is-claimed {
  filter: drop-shadow(0 0 6px rgba(88, 150, 216, 0.72));
}

.table-shell.light-mode .mons-side-claim-dot {
  box-shadow: 0 0 0 1px rgba(34, 29, 23, 0.2);
}

.table-shell.light-mode .mons-side-claim-name {
  text-shadow: none;
}

.table-shell.light-mode .mons-undo-button,
.table-shell.light-mode .mons-flip-button {
  border-color: rgba(34, 29, 23, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(34, 29, 23, 0.5);
}

.table-shell.light-mode .mons-undo-button:hover,
.table-shell.light-mode .mons-undo-button:focus-visible,
.table-shell.light-mode .mons-flip-button:hover,
.table-shell.light-mode .mons-flip-button:focus-visible {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(34, 29, 23, 0.82);
}

.table-shell.light-mode .game-options-action-put-away {
  border-color: rgba(176, 48, 48, 0.3);
  color: rgba(148, 35, 35, 0.9);
  background: rgba(176, 48, 48, 0.08);
}

.table-shell.light-mode .game-options-action-reset {
  border-color: rgba(51, 113, 197, 0.28);
  color: rgba(24, 58, 102, 0.92);
  background: rgba(54, 118, 207, 0.12);
}

.table-shell.light-mode .game-options-action-reset:hover,
.table-shell.light-mode .game-options-action-reset:focus-visible {
  background: rgba(54, 118, 207, 0.2);
  border-color: rgba(43, 101, 181, 0.46);
}

.table-shell.light-mode .game-options-action-put-away:hover,
.table-shell.light-mode .game-options-action-put-away:focus-visible {
  background: rgba(176, 48, 48, 0.16);
  border-color: rgba(176, 48, 48, 0.42);
}

.table-shell.light-mode .game-options-board-size-label {
  color: rgba(34, 29, 23, 0.78);
}

.table-shell.light-mode .game-options-board-size-option {
  border-color: rgba(34, 29, 23, 0.2);
  background: rgba(255, 255, 255, 0.84);
  color: rgba(34, 29, 23, 0.78);
}

.table-shell.light-mode .game-options-board-size-option:hover,
.table-shell.light-mode .game-options-board-size-option:focus-visible {
  background: rgba(255, 255, 255, 0.96);
}

.table-shell.light-mode .game-options-board-size-option.is-active {
  border-color: rgba(64, 128, 217, 0.52);
  background: rgba(88, 150, 233, 0.16);
  color: rgba(22, 53, 98, 0.92);
}

.table-shell.light-mode .asset-placeholder-box {
  border-color: rgba(34, 29, 23, 0.28);
  background:
    linear-gradient(135deg, rgba(34, 29, 23, 0.09), rgba(34, 29, 23, 0.04)),
    repeating-linear-gradient(45deg, rgba(34, 29, 23, 0.07) 0 9px, rgba(34, 29, 23, 0.03) 9px 18px);
}

.table-shell.light-mode #hexitamaTile .asset-placeholder-box.asset-preview-box-hexitama {
  background-image: none;
  background-color: #ffffff;
}

.table-shell[data-playspace-pattern="greenscreen"] .playspace-layer,
.table-shell[data-playspace-pattern="greenscreen"] .game-layer *,
.table-shell[data-playspace-pattern="greenscreen"] .cards-layer *,
.table-shell[data-playspace-pattern="greenscreen"] .promoted-cards-layer *,
.table-shell[data-playspace-pattern="greenscreen"] .cover-cards-layer *,
.table-shell[data-playspace-pattern="greenscreen"] .game-layer *::before,
.table-shell[data-playspace-pattern="greenscreen"] .game-layer *::after,
.table-shell[data-playspace-pattern="greenscreen"] .cards-layer *::before,
.table-shell[data-playspace-pattern="greenscreen"] .cards-layer *::after,
.table-shell[data-playspace-pattern="greenscreen"] .promoted-cards-layer *::before,
.table-shell[data-playspace-pattern="greenscreen"] .promoted-cards-layer *::after,
.table-shell[data-playspace-pattern="greenscreen"] .cover-cards-layer *::before,
.table-shell[data-playspace-pattern="greenscreen"] .cover-cards-layer *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-sticker-component-native img,
.table-shell[data-playspace-pattern="greenscreen"] .table-die-outline,
.table-shell[data-playspace-pattern="greenscreen"] .table-die-d20-shell,
.table-shell[data-playspace-pattern="greenscreen"] .table-die-pip,
.table-shell[data-playspace-pattern="greenscreen"] .table-die-number,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-chip.is-chip-contrast-boost .table-die-svg,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-chip.is-chip-contrast-boost .table-chip-label,
.table-shell[data-playspace-pattern="greenscreen"] .table-counter-segment,
.table-shell[data-playspace-pattern="greenscreen"] .table-coin-sprite,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-marble .table-die-face,
.table-shell[data-playspace-pattern="greenscreen"] .deck-shuffle-fx,
.table-shell[data-playspace-pattern="greenscreen"] .deck-drop-indicator svg,
.table-shell[data-playspace-pattern="greenscreen"] .discard-drop-indicator svg,
.table-shell[data-playspace-pattern="greenscreen"] .auction-drop-indicator svg,
.table-shell[data-playspace-pattern="greenscreen"] .chip-stack-drop-indicator svg,
.table-shell[data-playspace-pattern="greenscreen"] .mons-hud-avatar-button.is-claimed {
  filter: none !important;
}

.table-shell[data-playspace-pattern="greenscreen"] .room-badge,
.table-shell[data-playspace-pattern="greenscreen"] .asset-loading-status,
.table-shell[data-playspace-pattern="greenscreen"] .draw-mode-button,
.table-shell[data-playspace-pattern="greenscreen"] .draw-clear-button,
.table-shell[data-playspace-pattern="greenscreen"] .draw-undo-button,
.table-shell[data-playspace-pattern="greenscreen"] .draw-tool-button,
.table-shell[data-playspace-pattern="greenscreen"] .player-name-button,
.table-shell[data-playspace-pattern="greenscreen"] .player-name-input,
.table-shell[data-playspace-pattern="greenscreen"] .player-color-wrap,
.table-shell[data-playspace-pattern="greenscreen"] .room-roster,
.table-shell[data-playspace-pattern="greenscreen"] .copy-link-button,
.table-shell[data-playspace-pattern="greenscreen"] .icon-pill-button,
.table-shell[data-playspace-pattern="greenscreen"] .home-link-button,
.table-shell[data-playspace-pattern="greenscreen"] .room-settings-button,
.table-shell[data-playspace-pattern="greenscreen"] .delete-mode-cancel-button,
.table-shell[data-playspace-pattern="greenscreen"] .delete-mode-undo-button,
.table-shell[data-playspace-pattern="greenscreen"] .deck-shuffle-button,
.table-shell[data-playspace-pattern="greenscreen"] .deck-deal-button,
.table-shell[data-playspace-pattern="greenscreen"] .deck-count-badge,
.table-shell[data-playspace-pattern="greenscreen"] .deck-options-button,
.table-shell[data-playspace-pattern="greenscreen"] .deck-move-button,
.table-shell[data-playspace-pattern="greenscreen"] .mons-options-button,
.table-shell[data-playspace-pattern="greenscreen"] .mons-move-button,
.table-shell[data-playspace-pattern="greenscreen"] .room-roster-dot {
  box-shadow: none !important;
  text-shadow: none !important;
}

.table-shell[data-playspace-pattern="greenscreen"] .draw-mode-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .draw-clear-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .draw-undo-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .delete-mode-undo-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .deck-shuffle-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .deck-deal-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .deck-options-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .deck-move-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .mons-options-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .mons-move-button svg,
.table-shell[data-playspace-pattern="greenscreen"] .player-color-wrap input[type="color"]::-webkit-color-swatch {
  filter: none !important;
}

.table-shell[data-playspace-pattern="greenscreen"] .table-card,
.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-held-by-self,
.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-group-selected,
.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-resizable-image.is-resize-hovered,
.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-resizable-image.is-rotate-hovered,
.table-shell[data-playspace-pattern="greenscreen"] .table-card.is-resizable-image.is-resizing,
.table-shell[data-playspace-pattern="greenscreen"] .table-die,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.is-held-by-self,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.is-group-selected,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.is-rolling,
.table-shell[data-playspace-pattern="greenscreen"] .hand-card,
.table-shell[data-playspace-pattern="greenscreen"] .hand-card.is-reordering-active,
.table-shell[data-playspace-pattern="greenscreen"] .hand-card.is-hovered,
.table-shell[data-playspace-pattern="greenscreen"] .table-media-frame,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-marble .table-die-face,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-coin .table-die-face::before,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-coin::after,
.table-shell[data-playspace-pattern="greenscreen"] .table-die.table-die-chip::after,
.table-shell[data-playspace-pattern="greenscreen"] .table-counter-segment.is-active {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .asset-gallery-item,
  .asset-preview-gloss,
  .table-die,
  .table-card,
  .hand-card,
  .hand-drop-glow,
  .asset-loading-spinner,
  .deck-control-button,
  .deck-shuffle-fx,
  .auction-slot-icon {
    transition: none;
  }

  .table-card.is-flipping,
  .drawing-stroke.is-note-flipping,
  .table-card.is-shuffle-darkening img,
  .asset-loading-spinner,
  .deck-control-button.is-pressing,
  .deck-shuffle-fx.is-active,
  .deck-shuffle-fx-1.is-active,
  .deck-shuffle-fx-2.is-active,
  .table-die.is-rolling .table-die-face,
  .table-die.table-die-coin.is-rolling,
  .table-die.table-die-coin.is-rolling::after,
  .table-die.table-die-coin.is-rolling .table-die-face::after,
  .table-die.table-die-chip.is-rolling,
  .table-die.table-die-chip.is-rolling::after,
  .table-die.table-die-chip.is-rolling .table-die-face::after,
  .auction-slot.is-occupied .auction-slot-icon {
    animation: none;
  }
}

@media (max-width: 640px) {
  .home-card {
    padding: 1.3rem;
  }

  .home-color-input {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .home-color-wrap {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
  }

  .player-controls {
    top: 0.7rem;
    right: 0.7rem;
  }

  .asset-loading-status {
    top: 0.7rem;
  }

  .copy-link-button.is-owner-anchor {
    top: 0.7rem;
  }

  .asset-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sticker-add-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: min(52vh, 300px);
  }

  .bottom-right-controls {
    right: 0.7rem;
    bottom: 0.7rem;
  }

  .bottom-left-controls {
    left: 0.7rem;
    bottom: 0.7rem;
  }

  .auction-bid-board {
    top: 0.7rem;
    min-width: min(70vw, 240px);
  }

  .auction-bid-entry {
    left: 50%;
    top: calc(0.7rem + 4.2rem);
    bottom: auto;
    transform: translateX(-50%);
  }

  .auction-bid-input {
    width: min(37.2vw, 126px);
  }
}

@media (max-width: 768px) {
  #diceComponentTile .asset-component-icon-dice,
  #coinComponentTile .asset-component-icon-coin,
  #marbleComponentTile .asset-component-icon-marble,
  #stackPointComponentTile .asset-component-icon-stack-point,
  #secretAreaComponentTile .asset-component-icon-secret-area,
  #imageComponentTile .asset-component-icon-image,
  #chipsComponentTile .asset-component-icon-chips,
  #mediaComponentTile .asset-component-icon-media,
  #labelComponentTile .asset-component-icon-label {
    transform: translateY(36%);
  }

  #spinnerComponentTile .asset-component-icon-spinner {
    transform: translateY(36%) scale(1.14);
  }

  #pokerDeckComponentTile .asset-component-icon-poker {
    transform: translateY(36%) scale(1.04);
  }

  #counterComponentTile .asset-component-icon-counter {
    transform: translateY(34%) scale(1.18);
  }

  #timerComponentTile .asset-component-icon-timer {
    transform: translateY(34%) scale(1.12);
  }

  #noteComponentTile .asset-component-icon-note {
    transform: translateY(34%) scale(1.06);
  }

  .asset-gallery-item.is-asset-loading .asset-preview-box::after,
  .hand-card.is-front-pending::after,
  .hand-card.is-asset-loading:not(.is-front-pending)::after,
  .table-card.is-front-pending::after,
  .table-card.is-asset-loading:not(.is-front-pending)::after,
  .table-die.is-asset-loading::after,
  .mons-game-shell.is-asset-loading::after,
  .tafl-game-shell.is-asset-loading::after,
  .go-game-shell.is-asset-loading::after,
  .chip-stack-slot.is-asset-loading::after {
    inset: auto;
    margin: 0;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate3d(-50%, -50%, 0);
    box-sizing: border-box;
  }
}

@media (max-width: 920px) and (min-width: 641px) {
  .asset-menu-dialog {
    width: min(94vw, 580px);
  }

  .asset-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sticker-add-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}