/* [project]/apps/web/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ink: #17242b;
  --muted: #65757d;
  --paper: #fffdf7;
  --board-paper: #f5f4ec;
  --accent: #27a9d8;
  --accent-dark: #08749e;
  --accent-light: #67cef6;
  --on-accent: #fff;
  --accent-rgb: 39 169 216;
  --accent-gradient: linear-gradient(135deg, #67cef6 0%, #42b8e8 100%);
  --accent-gradient-hover: linear-gradient(135deg, #55c7f2 0%, #27a9dc 100%);
  --line: #d9e5ea;
  --error: #a23232;
  --floating-edge: 12px;
  --floating-surface: #fffdf7f0;
  --floating-surface-solid: #fffdf7;
  --floating-border: #27435021;
  --floating-highlight: inset 0 1px 0 #ffffffc7;
  --floating-radius-control: 12px;
  --floating-radius: 18px;
  --floating-radius-dialog: 24px;
  --floating-shadow-compact: 0 8px 24px #112a3626, var(--floating-highlight);
  --floating-shadow-context: 0 16px 44px #112a3638, var(--floating-highlight);
  --floating-shadow-dialog: 0 24px 72px #081f2c52, var(--floating-highlight);
  --floating-backdrop: #09223099;
  --floating-blur: blur(18px) saturate(1.12);
  --floating-backdrop-blur: blur(8px) saturate(.92);
  --floating-close-size: 36px;
  --floating-control-height: 42px;
  --board-paper-texture: linear-gradient(90deg, transparent 49.88%, #545b5f0f 49.94%, #ffffff7a 50.05%, transparent 50.12%),
    linear-gradient(0deg, transparent 49.86%, #545b5f0d 49.94%, #ffffff69 50.05%, transparent 50.13%),
    radial-gradient(circle, #3a4b5421 1.2px, transparent 1.35px);
  --board-paper-texture-size: 100% 100%, 100% 100%, 24px 24px;
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--board-paper);
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--board-paper);
  margin: 0;
  font-family: Inter, ui-rounded, SF Pro Rounded, system-ui, sans-serif;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.shell {
  background-color: var(--board-paper);
  background-image: linear-gradient(to right,
      var(--board-paper) 0,
      transparent max(42px, calc(env(safe-area-inset-left) + 24px)),
      transparent calc(100% - max(42px, calc(env(safe-area-inset-right) + 24px))),
      var(--board-paper) 100%),
    linear-gradient(to bottom,
      var(--board-paper) 0,
      transparent max(78px, calc(env(safe-area-inset-top) + 32px)),
      transparent calc(100% - max(96px, calc(env(safe-area-inset-bottom) + 40px))),
      var(--board-paper) 100%),
    var(--board-paper-texture);
  background-size: 100% 100%, 100% 100%, var(--board-paper-texture-size);
  width: 100%;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  place-items: center;
  display: grid;
}

html:has(.landing-shell) {
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden;
}

html:has(.landing-shell) body {
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden;
}

.landing-shell {
  overscroll-behavior: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

@supports (-webkit-touch-callout: none) and (not (height: 100dvh)) {
  html {
    height: -webkit-fill-available;
  }

  body, .shell {
    min-height: -webkit-fill-available;
  }
}

.card {
  border: 1px solid var(--floating-border);
  border-radius: var(--floating-radius-dialog);
  background: var(--floating-surface);
  width: min(100%, 430px);
  box-shadow: var(--floating-shadow-context);
  -webkit-backdrop-filter: var(--floating-blur);
  padding: 28px;
}

.landing-shell > .card {
  overscroll-behavior: contain;
  max-height: 100%;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .landing-shell > .card {
    box-shadow: var(--floating-shadow-compact);
  }
}

@media (max-width: 600px) and (pointer: coarse) {
  html:has(.landing-shell:focus-within) {
    overscroll-behavior-y: contain;
    height: auto;
    min-height: 100%;
    scroll-padding-top: max(24px, env(safe-area-inset-top));
    overflow: hidden auto;
  }

  html:has(.landing-shell:focus-within) body {
    overscroll-behavior-y: contain;
    height: auto;
    min-height: 100%;
    scroll-padding-top: max(24px, env(safe-area-inset-top));
    overflow: hidden auto;
  }

  .landing-shell:focus-within {
    place-items: start center;
    min-height: 100dvh;
    overflow: visible;
    height: auto !important;
  }

  .landing-shell:focus-within > .card {
    margin-block: 0;
  }

  .landing-shell input:focus {
    scroll-margin-block: max(72px, calc(env(safe-area-inset-top) + 32px)) 24px;
  }
}

h1, h2, p {
  margin-top: 0;
}

h1 {
  letter-spacing: -.06em;
  margin-bottom: 8px;
  font-size: clamp(2.5rem, 12vw, 4.25rem);
  line-height: .95;
}

h2 {
  margin-bottom: 14px;
}

.intro, .muted {
  color: var(--muted);
  line-height: 1.5;
}

.tabs {
  background: #e7f1f5;
  border-radius: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 24px 0;
  padding: 4px;
  display: grid;
}

.tabs button {
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  font-weight: 700;
}

.tabs button.active {
  color: var(--accent-dark);
  box-shadow: 0 2px 10px rgb(var(--accent-rgb) / 14%);
  background: #fff;
}

form, label {
  gap: 8px;
  display: grid;
}

form {
  gap: 18px;
}

.public-game-option {
  cursor: pointer;
  grid-template-columns: 22px auto;
  justify-content: start;
  align-items: center;
  gap: 9px;
}

.public-game-option input {
  appearance: none;
  border: 1px solid var(--line);
  width: 22px;
  height: 22px;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  background: #fff;
  border-radius: 7px;
  place-content: center;
  margin: 0;
  padding: 0;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
  display: grid;
}

.public-game-option input:before {
  border-right: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  content: "";
  width: 6px;
  height: 11px;
  transition: transform .12s;
  transform: translateY(-1px)rotate(45deg)scale(0);
}

.public-game-option input:checked {
  border-color: var(--accent);
  background: var(--accent-gradient);
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 9px rgb(var(--accent-rgb) / 20%);
}

.public-game-option input:checked:before {
  transform: translateY(-1px)rotate(45deg)scale(1);
}

.public-game-option input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 14%);
  outline: none;
}

.public-game-option span {
  color: var(--ink);
  font-weight: 700;
}

.public-game-list {
  gap: 8px;
  display: grid;
}

.public-game-list > strong {
  color: var(--muted);
  font-size: .85rem;
}

.public-game-list > div {
  overscroll-behavior: contain;
  gap: 7px;
  max-height: 170px;
  display: grid;
  overflow-y: auto;
}

.public-game-list button {
  border: 1px solid var(--line);
  min-height: 48px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  display: grid;
}

.public-game-list button.selected {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 8%);
  box-shadow: 0 0 0 1px var(--accent);
}

.public-game-list button > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 800;
  overflow: hidden;
}

.public-game-list button > small, .public-game-list > p {
  color: var(--muted);
  font-size: .7rem;
}

.public-game-list > p {
  margin: 2px 0 0;
}

.join-code-divider {
  color: var(--muted);
  text-transform: uppercase;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  display: grid;
}

.join-code-divider:before, .join-code-divider:after {
  background: var(--line);
  content: "";
  height: 1px;
}

label {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}

input {
  border: 1px solid var(--line);
  width: 100%;
  min-height: 50px;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  outline: none;
  padding: 0 14px;
  font-size: 1rem;
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 14%);
}

.primary {
  width: 100%;
  min-height: 52px;
  color: var(--on-accent);
  background: var(--accent-gradient);
  box-shadow: 0 8px 22px rgb(var(--accent-rgb) / 25%);
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  font-weight: 800;
}

.primary:hover:not(:disabled) {
  background: var(--accent-gradient-hover);
}

.install-app {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
}

.install-app > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.install-app strong {
  font-size: .82rem;
}

.install-app span {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.temporary-board-preview-link {
  border: 1px dashed rgb(var(--accent-rgb) / 24%);
  min-height: 34px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 4%);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: .7rem;
  font-weight: 800;
  text-decoration: none;
  display: flex;
}

.temporary-board-preview-link:hover {
  background: rgb(var(--accent-rgb) / 9%);
}

.temporary-board-preview-link small {
  color: #6b7c84;
  background: rgb(var(--accent-rgb) / 8%);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 5px;
  font-size: .52rem;
}

.install-app > button, .install-guide-done {
  border: 1px solid rgb(var(--accent-rgb) / 24%);
  border-radius: var(--floating-radius-control);
  min-height: 40px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 8%);
  white-space: nowrap;
  padding: 0 14px;
  font-size: .74rem;
  font-weight: 800;
}

.install-app > button:hover, .install-guide-done:hover {
  background: rgb(var(--accent-rgb) / 14%);
}

.install-guide-backdrop {
  z-index: 100;
  padding: max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  -webkit-backdrop-filter: blur(12px) saturate(.8);
  background: #071d2b94;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.install-guide {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid #ffffffc2;
  border-radius: 28px;
  gap: 20px;
  width: min(420px, 100%);
  max-height: 100%;
  padding: 24px;
  display: grid;
  overflow-y: auto;
  box-shadow: 0 28px 90px #02141e61;
}

.install-guide > header {
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.install-guide > header div {
  gap: 6px;
  display: grid;
}

.install-guide > header div > span {
  color: var(--accent-dark);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 850;
}

.install-guide > header strong {
  letter-spacing: -.025em;
  max-width: 290px;
  font-size: 1.35rem;
  line-height: 1.12;
}

.install-guide > header button {
  color: #53666f;
  background: #e7f1f5;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
}

.install-guide > header button:hover {
  background: #d9eaf1;
}

.install-guide ol {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.install-guide li {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 17px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 13px 15px;
  display: grid;
}

.install-guide li > b {
  width: 34px;
  height: 34px;
  color: var(--on-accent);
  background: var(--accent-gradient);
  border-radius: 50%;
  place-items: center;
  font-size: .82rem;
  font-weight: 850;
  display: grid;
}

.install-guide li span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.42;
}

.install-guide li span strong {
  color: var(--ink);
}

.install-guide svg {
  fill: none;
  width: 28px;
  height: 28px;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
}

.install-guide-done {
  min-height: 48px;
  color: var(--on-accent);
  background: var(--accent-gradient);
  box-shadow: 0 8px 20px rgb(var(--accent-rgb) / 22%);
  border-color: #0000;
  border-radius: 14px;
  justify-self: stretch;
}

.install-guide-done:hover {
  background: var(--accent-gradient-hover);
}

@media (max-width: 430px) {
  .install-guide-backdrop {
    padding-right: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    align-items: end;
    padding-left: 10px;
  }

  .install-guide {
    border-radius: 28px;
    gap: 16px;
    padding: 20px;
  }

  .install-guide > header strong {
    font-size: 1.25rem;
  }

  .install-guide li {
    min-height: 66px;
    padding: 11px 13px;
  }
}

.join-code-controls {
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: end;
  gap: 9px;
  display: grid;
}

.scan-qr-button {
  border: 1px solid rgb(var(--accent-rgb) / 24%);
  border-radius: var(--floating-radius-control);
  min-height: 50px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 7%);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
}

.scan-qr-button span {
  font-size: 1.2rem;
  line-height: 1;
}

.qr-scanner-backdrop {
  z-index: 60;
  -webkit-backdrop-filter: blur(8px);
  background: #071f2cb8;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.qr-scanner {
  width: min(430px, 100vw - 36px);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: #fffdf7;
  border: 1px solid #ffffffb3;
  border-radius: 24px;
  gap: 13px;
  padding: 16px;
  display: grid;
  overflow-y: auto;
  box-shadow: 0 25px 80px #0000006b;
}

.qr-scanner > header {
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.qr-scanner > header div {
  gap: 2px;
  display: grid;
}

.qr-scanner > header span {
  color: var(--accent-dark);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .65rem;
  font-weight: 850;
}

.qr-scanner > header strong {
  font-size: 1.05rem;
}

.qr-scanner > header button {
  color: #53666f;
  background: #e7f1f5;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.2rem;
}

.qr-camera-frame {
  color: #fff;
  background: #142832;
  border-radius: 18px;
  place-items: center;
  min-height: 260px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.qr-camera-frame video {
  object-fit: cover;
  width: 100%;
  height: min(52dvh, 360px);
}

.qr-camera-frame > span {
  background: #0000008a;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .72rem;
  font-weight: 800;
  position: absolute;
}

.qr-scanner > p {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}

.qr-scanner > p.error {
  color: var(--error);
}

.qr-image-picker {
  border: 1px solid rgb(var(--accent-rgb) / 22%);
  min-height: 44px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 7%);
  cursor: pointer;
  border-radius: 12px;
  place-items: center;
  font-size: .76rem;
  font-weight: 800;
  display: grid;
}

.qr-image-picker input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
}

.connection-alert {
  z-index: 80;
  top: max(14px, env(safe-area-inset-top));
  border-radius: var(--floating-radius-control);
  color: #702626;
  width: min(420px, 100vw - 28px);
  box-shadow: var(--floating-shadow-context);
  -webkit-backdrop-filter: var(--floating-blur);
  background: #fff8f4f5;
  border: 1px solid #a2323240;
  gap: 3px;
  padding: 12px 15px;
  display: grid;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.connection-alert strong {
  font-size: .82rem;
}

.connection-alert span {
  font-size: .73rem;
  line-height: 1.4;
}

.room {
  text-align: center;
}

.room-label {
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-size: .8rem;
  font-weight: 700;
}

.room-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  margin-bottom: 18px;
}

.room-invite {
  justify-items: center;
  gap: 9px;
  margin-bottom: 28px;
  display: grid;
}

.room-invite-qr {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  place-items: center;
  width: min(240px, 100%);
  padding: 16px;
  display: grid;
  box-shadow: inset 0 1px #fffc, 0 8px 24px #112a3617;
}

.room-invite-qr svg, .room-invite-qr-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.room-invite-qr-placeholder {
  background: #f0f3ef;
  border-radius: 8px;
}

.room-invite > p {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
  font-weight: 750;
}

.room-invite > button {
  border: 1px solid rgb(var(--accent-rgb) / 22%);
  border-radius: var(--floating-radius-control);
  min-height: 40px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 7%);
  padding: 0 14px;
  font-size: .76rem;
  font-weight: 800;
}

.room-invite > button:hover {
  background: rgb(var(--accent-rgb) / 12%);
}

.players {
  text-align: left;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
}

.players li {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  display: grid;
}

.players strong {
  color: var(--accent-dark);
  text-transform: uppercase;
  font-size: .72rem;
}

.nickname-edit-button {
  border: 1px solid rgb(var(--accent-rgb) / 22%);
  min-height: 42px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 7%);
  border-radius: 11px;
  margin: -10px 0 8px;
  padding: 0 14px;
  font-size: .76rem;
  font-weight: 800;
}

.room-leave-button {
  color: #71584f;
  background: #7051460f;
  border: 1px solid #70514633;
  border-radius: 11px;
  width: 100%;
  min-height: 42px;
  margin: 0 0 20px;
  padding: 0 14px;
  font-size: .76rem;
  font-weight: 800;
}

.room-leave-button:hover {
  background: #7051461c;
}

.online, .offline {
  background: #3dae76;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.offline {
  background: #aab2ae;
}

.round {
  color: var(--accent-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 800;
}

.placeholder {
  color: var(--muted);
  border: 1px dashed #9bb8c5;
  border-radius: 14px;
  margin-top: 24px;
  padding: 20px;
  line-height: 1.5;
}

.error {
  color: var(--error);
  margin: 16px 0 0;
  font-weight: 700;
}

@media (max-width: 420px) {
  .card {
    border-radius: var(--floating-radius-dialog);
    padding: 22px;
  }
}

html.game-board-open, html.game-board-open body {
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.game-stage {
  z-index: 0;
  background-color: var(--board-paper);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.game-stage img {
  -webkit-user-drag: none;
}

@media (display-mode: standalone) {
  html.game-board-open, html.game-board-open body, .game-stage {
    height: 100vh;
  }
}

.board-viewport {
  background-color: var(--board-paper);
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.board-viewport:active {
  cursor: grabbing;
}

.board-world {
  z-index: 0;
  transform-origin: 0 0;
  backface-visibility: hidden;
  will-change: transform;
  width: 1800px;
  height: 1800px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.board-dot-plane {
  z-index: 0;
  pointer-events: none;
  contain: strict;
  background-image: radial-gradient(circle,
    #3a4b5421 0 var(--board-dot-radius, 1.2px),
    transparent calc(var(--board-dot-radius, 1.2px) + .15px));
  background-position: -12px -12px;
  background-size: 24px 24px;
  position: absolute;
}

.concept-board {
  --board-group-1-left: 60px;
  --board-group-2-left: 444px;
  --board-group-3-left: 828px;
  --board-group-4-left: 1212px;
  --board-color-left: 1596px;
  z-index: 1;
  background: none;
  width: 1800px;
  height: 1800px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.board-icon-grid {
  z-index: 2;
  gap: 48px 24px;
  display: grid;
  position: absolute;
}

.property-grid {
  top: 84px;
  left: var(--board-group-3-left);
  grid-template: repeat(11, 72px) / repeat(4, 156px);
}

.direction-grid {
  top: 1404px;
  left: var(--board-group-4-left);
  grid-template: repeat(3, 72px) / repeat(2, 156px);
}

.color-grid {
  top: 84px;
  left: var(--board-color-left);
  grid-template: repeat(12, 72px) / 156px;
}

.category-grid {
  top: 84px;
  left: var(--board-group-1-left);
  grid-template: repeat(14, 72px) / repeat(4, 156px);
}

.board-icon-space {
  border-radius: 9px;
  outline: none;
  grid-template-columns: 72px 72px;
  align-items: center;
  column-gap: 12px;
  width: 156px;
  height: 72px;
  padding: 0;
  display: grid;
}

.icon-art {
  pointer-events: auto;
  transform-origin: center;
  backface-visibility: hidden;
  border-radius: 10px;
  grid-area: 1 / 1;
  width: 72px;
  height: 72px;
  transition: transform .17s cubic-bezier(.2, .75, .3, 1);
  display: block;
  overflow: hidden;
}

.icon-art img {
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  width: 72px;
  height: 72px;
  display: block;
}

.board-icon-space:focus-visible {
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 42%);
}

@media (hover: hover) and (pointer: fine) {
  .icons-inspectable .icon-art, .icons-inspectable.markers-editable .cube-space {
    cursor: pointer;
  }
}

.cube-space {
  background: none;
  border: 0;
  grid-area: 1 / 2;
  width: 72px;
  height: 72px;
  padding: 0;
  display: block;
  position: relative;
}

.piece-space-visual {
  transform-origin: center;
  backface-visibility: hidden;
  pointer-events: none;
  background: #ffffff2e;
  border: 2px dashed #6a736f57;
  border-radius: 11px;
  transition: transform .17s cubic-bezier(.2, .75, .3, 1);
  display: block;
  position: absolute;
  inset: 0;
  overflow: clip;
}

.empty-piece-space-plus {
  color: #3e586538;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  display: grid;
  position: absolute;
  inset: 0;
  transform: translateY(-1px);
}

.icon-long-press-pending .icon-art, .marker-long-press-pending .piece-space-visual {
  will-change: transform;
  animation: .55s cubic-bezier(.22, .72, .28, 1) forwards ios-long-press-compress;
}

@keyframes ios-long-press-compress {
  from {
    transform: translateZ(0)scale(1);
  }

  to {
    transform: translateZ(0)scale(.92);
  }
}

.cube-space-left .icon-art {
  grid-column: 2;
}

.cube-space-left .cube-space {
  grid-column: 1;
}

.placed-marker {
  color: #0000;
  box-shadow: none;
  background-color: #0000;
  border: 0;
  flex: none;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
}

.placed-marker:disabled {
  opacity: 1;
  pointer-events: none;
}

.placed-marker.selected {
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 68%);
  border-radius: 18%;
  outline: 3px solid #fffffff2;
}

.placed-marker.cube {
  border-radius: 3px;
  width: 14px;
  height: 14px;
}

.placed-marker.pawn {
  border-radius: 50% 50% 45% 45%;
  width: 28px;
  height: 28px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.piece-space-visual > .packed-marker {
  left: var(--packed-left);
  top: var(--packed-top);
  width: var(--packed-size);
  height: var(--packed-size);
  pointer-events: auto;
  min-width: 0;
  min-height: 0;
  transition: left .16s ease-out, top .16s ease-out, width .16s ease-out, height .16s ease-out, transform .16s ease-out;
  position: absolute;
}

.piece-space-visual > .packed-marker.cube {
  width: var(--packed-size);
  height: var(--packed-size);
  border-radius: 18%;
}

.piece-space-visual > .packed-marker.pawn {
  width: var(--packed-size);
  height: var(--packed-size);
}

.green {
  --piece-color: #1b9b68;
}

.blue {
  --piece-color: #168ccb;
}

.red {
  --piece-color: #d8463f;
}

.yellow {
  --piece-color: #e8b928;
}

.black {
  --piece-color: #303735;
}

.piece-art {
  pointer-events: none;
  backface-visibility: hidden;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.piece-art > img {
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  width: 100%;
  height: 100%;
  display: block;
}

.icon-description-popover {
  z-index: 70;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7f5;
  border: 1px solid #ffffffb8;
  border-radius: 18px;
  grid-template-columns: 58px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: 290px;
  min-height: 82px;
  padding: 11px;
  animation: .18s cubic-bezier(.2, .82, .2, 1) both icon-context-popover-in;
  display: grid;
  position: fixed;
  transform: translate(-50%, -100%);
  box-shadow: 0 16px 45px #00000047;
}

@keyframes icon-context-popover-in {
  from {
    opacity: 0;
    transform: translate(-50%, -96%)scale(.94);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -100%)scale(1);
  }
}

.icon-description-popover img {
  object-fit: cover;
  border-radius: 9px;
  width: 58px;
  height: 58px;
  display: block;
}

.icon-description-popover > strong {
  min-width: 0;
  line-height: 1.25;
}

.icon-description-popover strong {
  color: var(--ink);
  font-size: .86rem;
  line-height: 1.25;
}

.icon-description-popover button {
  color: #53666f;
  background: #e7f1f5;
  border: 0;
  border-radius: 50%;
  align-self: start;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.idea-card-backdrop {
  z-index: 80;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  -webkit-backdrop-filter: blur(7px);
  background: #15252d94;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.idea-card-dialog {
  width: min(340px, 100vw - 36px);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  justify-items: center;
  gap: 12px;
  display: grid;
  position: relative;
}

.idea-card-close {
  color: #343a36;
  background: #fffffce0;
  border: 1px solid #2a2f2c2e;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0 0 2px;
  font-size: 1.35rem;
  line-height: 1;
  display: grid;
  box-shadow: 0 3px 10px #0000001f;
}

.idea-card-panel {
  aspect-ratio: 2 / 3;
  color: #202321;
  background-color: #fbfbf7;
  border: 3px solid #c9cbc8;
  border-radius: 24px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  padding: 22px 18px 20px 27px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 65px #03101761, inset 0 0 0 5px #f5f5f0, inset 0 0 0 7px #abaeaa61;
}

.idea-card-level {
  --card-level-color: #438fc2;
  border: 4px solid var(--card-level-color);
  background: #fffffcf0;
  border-radius: 25px;
  min-height: 0;
  margin-left: 8px;
  position: relative;
}

.idea-card-level-red {
  --card-level-color: #d73335;
}

.idea-card-level-black {
  --card-level-color: #171918;
  background: #c2c3c0f5;
}

.idea-card-face {
  z-index: 2;
  border: 2px solid color-mix(in srgb, var(--card-level-color) 72%, #111);
  background: color-mix(in srgb, var(--card-level-color) 72%, white);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: block;
  position: absolute;
  top: -16px;
  right: -14px;
  box-shadow: inset 0 1px 2px #ffffff80;
}

.idea-card-face:before {
  content: "";
  background: #232725;
  border-radius: 50%;
  width: 3px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 6px;
  box-shadow: 10px 0 #232725;
}

.idea-card-face:after {
  content: "";
  border-bottom: 2px solid #232725;
  border-radius: 0 0 10px 10px;
  width: 10px;
  height: 5px;
  position: absolute;
  bottom: 5px;
  left: 7px;
}

.idea-card-level-red .idea-card-face:after, .idea-card-level-black .idea-card-face:after {
  border-top: 2px solid #232725;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  bottom: 4px;
}

.idea-card-prompts {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 10px 8px 8px 0;
  list-style: none;
  display: grid;
}

.idea-card-prompt {
  min-height: 0;
  color: var(--card-level-color);
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  display: grid;
  position: relative;
}

.idea-card-prompt:not(:last-child):after {
  z-index: 0;
  background-image: radial-gradient(circle, var(--card-level-color) 1.7px, transparent 1.9px);
  content: "";
  background-position: center;
  background-size: 10px 4px;
  height: 4px;
  position: absolute;
  bottom: -2px;
  left: 7px;
  right: 4px;
}

.idea-card-prompt > span {
  background: color-mix(in srgb, var(--card-level-color) 8%, #fbfbf7);
  border: 2px solid;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -19px;
  font-family: Arial Narrow, Aptos Narrow, sans-serif;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
}

.idea-card-prompt > strong {
  color: #272d29;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  font-family: Arial Narrow, Aptos Narrow, Helvetica Neue, sans-serif;
  font-size: clamp(.73rem, 3.4vw, .9rem);
  font-weight: 700;
  font-stretch: condensed;
  line-height: 1.05;
}

.idea-card-controls {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px;
  width: 100%;
  padding: 0 3px;
  display: grid;
}

.idea-card-draw {
  color: #fff;
  background: #199dcd;
  border: 0;
  border-radius: 13px;
  width: 100%;
  min-height: 42px;
  font-size: .8rem;
  font-weight: 850;
  box-shadow: 0 8px 18px #1b9dcd33;
}

@media (max-height: 660px) {
  .idea-card-dialog {
    gap: 8px;
    width: min(285px, 100vw - 32px);
  }

  .idea-card-panel {
    border-radius: 20px;
    padding: 18px 15px 16px 23px;
  }

  .idea-card-level {
    border-width: 3px;
  }

  .idea-card-prompts {
    padding-block: 7px 5px;
  }

  .idea-card-prompt {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .idea-card-prompt > span {
    width: 24px;
    height: 24px;
    margin-left: -16px;
    font-size: .75rem;
  }

  .idea-card-prompt > strong {
    font-size: .71rem;
  }

  .idea-card-face {
    width: 24px;
    height: 24px;
    top: -14px;
    right: -12px;
  }

  .idea-card-face:before {
    top: 6px;
    left: 5px;
    box-shadow: 8px 0 #232725;
  }

  .idea-card-face:after {
    width: 8px;
    left: 6px;
  }

  .idea-card-draw {
    min-height: 38px;
  }

  .idea-card-close {
    width: 38px;
    height: 38px;
  }
}

.board-toast-stack {
  z-index: 24;
  top: 78px;
  left: max(12px, env(safe-area-inset-left));
  pointer-events: none;
  gap: 8px;
  width: min(350px, 100vw - 24px);
  display: grid;
  position: absolute;
}

.board-activity-toast {
  pointer-events: auto;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7f5;
  border: 1px solid #ffffffb8;
  border-radius: 17px;
  grid-template-columns: 48px 52px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  min-height: 72px;
  padding: 9px;
  animation: .18s ease-out both activity-toast-in;
  display: grid;
  box-shadow: 0 12px 35px #0000003d;
}

.board-activity-toast > div {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.board-activity-toast strong {
  color: #243e4b;
  font-size: .78rem;
}

.board-activity-toast span {
  color: #53666f;
  font-size: .72rem;
}

.board-activity-toast > button, .board-overview > header > button {
  color: #53666f;
  background: #e7f1f5;
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.1rem;
}

.activity-icon {
  object-fit: cover;
  border: 1px solid #202825;
  border-radius: 8px;
  width: 48px;
  height: 48px;
}

.activity-piece {
  background: rgb(var(--accent-rgb) / 7%);
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  position: relative;
}

.activity-piece > b {
  z-index: 2;
  width: 20px;
  height: 20px;
  color: var(--on-accent);
  background: var(--accent-gradient);
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  font-size: .75rem;
  line-height: 1;
  display: grid;
  position: absolute;
  top: -5px;
  left: -5px;
}

.activity-piece.action-removed > b {
  background: #bd3e38;
}

.activity-piece.action-moved > b {
  background: #317da5;
}

.activity-piece .placed-marker {
  font-style: normal;
}

.board-overview-backdrop {
  z-index: 40;
  -webkit-backdrop-filter: blur(7px);
  background: #0922309e;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.board-overview {
  background: #fffdf7;
  border: 1px solid #ffffffb8;
  border-radius: 24px;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(520px, 100vw - 36px);
  max-height: min(680px, 100dvh - 36px);
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 80px #00000061;
}

.board-overview > header {
  border-bottom: 1px solid #e5e9e4;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: 12px;
  padding: 17px 18px 14px;
  display: grid;
}

.board-overview > header strong {
  color: #243e4b;
  font-size: 1.05rem;
}

.board-overview-toggle {
  background: #edf1ed;
  border-radius: 13px;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 12px 14px 4px;
  padding: 4px;
  display: grid;
}

.board-overview-toggle button {
  color: #61747d;
  background: none;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
}

.board-overview-toggle button.active {
  color: var(--accent-dark);
  background: #fffdf7;
  box-shadow: 0 2px 8px #1937461f;
}

.board-overview-toggle small {
  color: #65757d;
  background: #45606d1a;
  border-radius: 999px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  font-size: .58rem;
  display: grid;
}

.board-overview-content {
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.board-overview-content.history {
  grid-template-rows: auto minmax(0, 1fr);
}

.board-overview-content.concepts {
  grid-template-rows: minmax(0, 1fr);
}

.history-scope-toggle {
  background: #fafcfd;
  border: 1px solid #dfe8ec;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  margin: 8px 14px 2px;
  padding: 10px 12px;
  display: grid;
}

.history-scope-toggle strong {
  color: #334b56;
  font-size: .72rem;
}

.history-scope-toggle input {
  width: 42px;
  height: 24px;
  min-height: 24px;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  background: #cdd6d0;
  border: 0;
  border-radius: 999px;
  justify-self: end;
  margin: 0;
  padding: 0;
  transition: background .14s;
  position: relative;
}

.history-scope-toggle input:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: transform .14s;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 4px #00000040;
}

.history-scope-toggle input:checked {
  background: var(--accent-gradient);
}

.history-scope-toggle input:checked:after {
  transform: translateX(18px);
}

.history-scope-toggle input:focus-visible {
  outline: 3px solid rgb(var(--accent-rgb) / 28%);
  outline-offset: 2px;
  box-shadow: none;
}

.board-overview-list {
  gap: 0;
  margin: 0;
  padding: 8px 14px 14px;
  list-style: none;
  display: grid;
  overflow-y: auto;
}

.board-overview-list li {
  border-bottom: 1px solid #edf0ec;
  grid-template-columns: 26px 44px 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 2px;
  display: grid;
}

.activity-sequence {
  color: #87918c;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
}

.activity-icon-empty {
  color: #87918c;
  background: #f2f4f1;
  border-style: dashed;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
}

.overview-inspect-icon {
  touch-action: pan-y;
  transform-origin: center;
  backface-visibility: hidden;
  border-radius: 8px;
  outline: none;
  width: 48px;
  height: 48px;
  transition: transform .17s cubic-bezier(.2, .75, .3, 1);
  display: block;
}

.overview-inspect-icon.icon-long-press-pending {
  will-change: transform;
  animation: .55s cubic-bezier(.22, .72, .28, 1) forwards ios-long-press-compress;
}

.overview-inspect-icon:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 38%);
}

@media (hover: hover) and (pointer: fine) {
  .overview-inspect-icon:hover {
    cursor: pointer;
  }
}

.board-overview-list li > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.board-overview-list li > div strong {
  color: #304751;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  overflow: hidden;
}

.board-overview-empty {
  color: #65757d;
  text-align: center;
  margin: 0;
  padding: 36px 20px;
}

.concept-overview-groups {
  align-content: start;
  gap: 12px;
  padding: 10px 14px 16px;
  display: grid;
  overflow-y: auto;
}

.concept-overview-group {
  border: 1px solid #213d4b1a;
  border-left: 5px solid var(--piece-color);
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.concept-overview-group > header {
  background: color-mix(in srgb, var(--piece-color) 8%, white);
  grid-template-columns: minmax(90px, 1fr) 34px 48px 30px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  display: grid;
}

.concept-overview-group > header.without-concept-marker {
  grid-template-columns: minmax(0, 1fr);
}

.concept-overview-group > header strong {
  color: #304751;
  font-size: .78rem;
}

.concept-overview-group > header > .placed-marker {
  justify-self: center;
  font-style: normal;
}

.concept-overview-group > header > .concept-remove-button {
  grid-column: 4;
}

.concept-overview-group ol {
  margin: 0;
  padding: 4px 10px 8px;
  list-style: none;
  display: grid;
}

.concept-overview-group li {
  border-bottom: 1px solid #edf0ec;
  grid-template-columns: 34px 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 7px 2px;
  display: grid;
}

.concept-overview-group li:last-child {
  border-bottom: 0;
}

.concept-overview-group li.cube-clue {
  margin-left: 34px;
}

.concept-overview-group li > .placed-marker {
  justify-self: center;
  font-style: normal;
}

.concept-remove-button {
  color: #ad3630;
  background: #ad363012;
  border: 1px solid #ad36302e;
  border-radius: 50%;
  grid-column: 3;
  justify-self: end;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1rem;
  font-weight: 900;
  display: grid;
}

.concept-remove-button:hover {
  color: #fff;
  background: #ad3630;
  border-color: #ad3630;
}

@keyframes activity-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.board-wordmark {
  z-index: 1;
  top: 1488px;
  left: var(--board-group-3-left);
  color: #0000;
  letter-spacing: .14em;
  text-align: center;
  -webkit-text-stroke: 2px #3f525b21;
  width: 336px;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  position: absolute;
}

.board-edge-indicators {
  z-index: 9;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.board-edge-indicators > button {
  --edge-indicator-scale: 1;
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: var(--floating-surface-solid);
  box-shadow: var(--floating-shadow-compact);
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate3d(var(--edge-indicator-x, -80px), var(--edge-indicator-y, -80px), 0)
    translate(-50%, -50%)
    scale(var(--edge-indicator-scale));
  -webkit-backdrop-filter: var(--floating-blur);
  border: 1px solid #27435038;
  border-radius: 50%;
  place-items: center;
  padding: 5px;
  transition: filter .13s, transform .13s;
  animation: .15s ease-out both edge-indicator-in;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.board-edge-indicators > button[hidden] {
  display: none;
}

.board-edge-indicators > button:after {
  z-index: -1;
  border-top: 7px solid #0000;
  border-bottom: 7px solid #0000;
  border-left: 11px solid var(--floating-surface-solid);
  content: "";
  filter: drop-shadow(2px 0 1px #112a361f);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%)
    rotate(var(--edge-indicator-angle, 0deg))
    translateX(28px);
  transform-origin: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.board-edge-indicators > button:hover {
  --edge-indicator-scale: 1.07;
  filter: brightness(1.02);
}

.board-edge-indicators > button:active {
  --edge-indicator-scale: .94;
}

.board-edge-indicators > button:focus-visible {
  outline: 3px solid rgb(var(--accent-rgb) / 42%);
  outline-offset: 3px;
}

.edge-indicator-piece-stack {
  z-index: 1;
  width: 32px;
  height: 32px;
  display: block;
  position: relative;
}

.edge-indicator-piece {
  place-items: center;
  width: 28px;
  height: 30px;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.edge-indicator-piece.cube {
  width: 27px;
  height: 27px;
}

.edge-indicator-piece:nth-child(2) {
  width: 22px;
  height: 24px;
  transform: translate(-78%, -72%);
}

.edge-indicator-piece:nth-child(3) {
  width: 22px;
  height: 24px;
  transform: translate(-22%, -28%);
}

.board-edge-indicators > button > b {
  z-index: 2;
  border: 2px solid var(--floating-surface-solid);
  color: #fff;
  background: var(--accent-dark);
  border-radius: 999px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: .58rem;
  line-height: 1;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -3px;
}

@keyframes edge-indicator-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-edge-indicators > button {
    transition: none;
    animation: none;
  }
}

.game-hud {
  z-index: 10;
  pointer-events: none;
  display: flex;
  position: absolute;
}

.game-hud > * {
  pointer-events: auto;
  touch-action: manipulation;
}

.game-hud-top {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hud-pill, .turn-pill, .zoom-controls, .gesture-hint {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7e8;
  border: 1px solid #ffffff9e;
  box-shadow: 0 10px 28px #0003;
}

.hud-pill {
  color: #425a65;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  font-size: .76rem;
  font-weight: 800;
  display: flex;
}

.identity-pill {
  text-transform: none;
  max-width: min(30vw, 190px);
}

.identity-pill > span:nth-child(2) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.identity-pill:hover {
  background: #fffdf7;
}

.identity-edit {
  color: var(--accent-dark);
  font-size: .85rem;
}

.room-pill strong {
  color: var(--ink);
  letter-spacing: .12em;
  font-size: .92rem;
}

.room-hud-controls {
  align-items: flex-start;
  gap: 6px;
  display: flex;
}

.board-leave-button {
  color: #71584f;
  background: #fffdf7e8;
}

.board-leave-button:hover {
  background: #fffdf7;
}

.board-leave-button > span[aria-hidden="true"] {
  font-size: 1rem;
}

.mobile-room-code {
  letter-spacing: .08em;
  display: none;
}

.turn-pill {
  text-align: center;
  border-radius: 18px;
  align-content: center;
  min-width: 150px;
  max-width: min(48vw, 360px);
  min-height: 52px;
  padding: 8px 18px 9px;
  display: grid;
}

.turn-pill strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
  overflow: hidden;
}

.game-hud-bottom {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  display: none;
}

.freestyle-actions {
  z-index: 12;
  bottom: max(12px, env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7e8;
  border: 1px solid #ffffff9e;
  border-radius: 16px;
  gap: 4px;
  padding: 4px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 28px #0003;
}

.freestyle-actions button {
  color: #425a65;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  padding: 0 13px;
  font-size: .74rem;
  font-weight: 800;
}

.freestyle-actions button:hover {
  background: rgb(var(--accent-rgb) / 10%);
}

.freestyle-actions button.active {
  color: var(--on-accent);
  background: var(--accent-gradient);
}

.marker-palette {
  z-index: 13;
  top: 50%;
  left: max(12px, env(safe-area-inset-left));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7ed;
  border: 1px solid #ffffff9e;
  border-radius: 18px;
  gap: 5px;
  padding: 9px;
  display: grid;
  position: absolute;
  transform: translateY(-50%);
  box-shadow: 0 12px 34px #0000003d;
}

.marker-palette > span {
  color: var(--muted);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  padding: 2px 3px 5px;
  font-size: .6rem;
  font-weight: 800;
}

.marker-palette-row {
  gap: 4px;
  display: flex;
}

.marker-move-actions {
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  display: grid;
}

.marker-move-actions button {
  border: 1px solid rgb(var(--accent-rgb) / 18%);
  border-radius: var(--floating-radius-control);
  color: #425c67;
  background: rgb(var(--accent-rgb) / 7%);
  min-height: 30px;
  padding: 0 8px;
  font-size: .63rem;
  font-weight: 800;
}

.marker-move-actions button:first-child {
  color: #9c302c;
  background: #9c302c12;
  border-color: #9c302c2e;
}

.marker-palette-row button {
  border-radius: var(--floating-radius-control);
  background: none;
  border: 1px solid #0000;
  place-items: center;
  width: 42px;
  height: 38px;
  padding: 0;
  display: grid;
  position: relative;
}

.marker-palette-row button:hover:not(:disabled), .marker-palette-row button.selected {
  border-color: rgb(var(--accent-rgb) / 26%);
  background: rgb(var(--accent-rgb) / 10%);
}

.marker-palette-row button.selected {
  box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 36%);
}

.marker-palette-row button:disabled {
  opacity: .28;
}

.marker-palette-row small {
  color: #53666f;
  font-size: 8px;
  font-weight: 850;
  position: absolute;
  bottom: 1px;
  right: 2px;
}

.palette-piece {
  color: #0000;
  box-shadow: none;
  background-color: #0000;
  place-items: center;
  display: grid;
}

.palette-piece.pawn {
  width: 26px;
  height: 31px;
  font-style: normal;
}

.palette-piece.cube {
  width: 22px;
  height: 22px;
}

.marker-chooser-popover {
  z-index: 35;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: #fffdf7fa;
  border: 1px solid #ffffffc2;
  border-radius: 20px;
  gap: 10px;
  width: min(340px, 100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 13px;
  animation: .18s cubic-bezier(.2, .82, .2, 1) both marker-context-popover-in;
  display: grid;
  position: fixed;
  overflow: hidden auto;
  box-shadow: 0 20px 55px #00000057;
}

@keyframes marker-context-popover-in {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-long-press-pending .icon-art, .overview-inspect-icon.icon-long-press-pending, .marker-long-press-pending, .icon-description-popover, .marker-chooser-popover {
    animation: none;
  }
}

.marker-chooser-popover > header {
  grid-template-columns: 42px 30px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: grid;
}

.marker-chooser-popover > header img {
  border: 1px solid #202825;
  border-radius: 8px;
  width: 42px;
  height: 42px;
}

.marker-piece-count {
  width: 30px;
  height: 30px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 10%);
  border-radius: 50%;
  place-items: center;
  font-size: .72rem;
  display: grid;
}

.marker-kind-options {
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  display: grid;
}

.marker-kind-options button {
  color: #61747d;
  background: #fafcfd;
  border: 1px solid #dfe8ec;
  border-radius: 12px;
  grid-template-rows: 40px;
  place-items: center;
  min-height: 54px;
  padding: 6px 4px;
  font-size: .65rem;
  font-weight: 800;
  display: grid;
}

.marker-kind-options button.selected {
  color: var(--accent-dark);
  border-color: rgb(var(--accent-rgb) / 38%);
  background: rgb(var(--accent-rgb) / 9%);
  box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 14%);
}

.marker-kind-options button:disabled {
  opacity: .3;
}

.nothing-piece {
  color: #7d8e96;
  border: 2px dashed #9ca8a2;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  font-style: normal;
  display: grid;
}

.marker-color-options {
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  display: grid;
}

.marker-color-options button {
  border-radius: var(--floating-radius-control);
  background: none;
  border: 1px solid #0000;
  place-items: center;
  min-height: 40px;
  padding: 0;
  display: grid;
  position: relative;
}

.marker-color-options button.selected {
  border-color: rgb(var(--accent-rgb) / 34%);
  background: rgb(var(--accent-rgb) / 8%);
  box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 16%);
}

.marker-color-options button:disabled {
  opacity: .24;
}

.marker-color-options small {
  color: #61747d;
  font-size: .55rem;
  font-weight: 850;
  position: absolute;
  bottom: 2px;
  right: 4px;
}

.marker-current-pieces {
  background: #fafcfd;
  border: 1px solid #e2e7e3;
  border-radius: 13px;
  gap: 7px;
  padding: 9px;
  display: grid;
}

.marker-current-heading {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.marker-current-heading > button {
  color: #a2433d;
  background: none;
  border: 0;
  padding: 2px 4px;
  font-size: .61rem;
  font-weight: 800;
}

.marker-current-tray {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.marker-current-tray > button {
  color: #536871;
  background: #fff;
  border: 1px solid #dce7ec;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 5px;
  display: grid;
}

.marker-current-tray > button.pending {
  border-color: rgb(var(--accent-rgb) / 35%);
  background: rgb(var(--accent-rgb) / 7%);
}

.marker-current-tray .palette-piece {
  justify-self: center;
  width: 25px;
  height: 30px;
}

.marker-current-tray .palette-piece.cube {
  width: 22px;
  height: 22px;
}

.marker-current-tray b {
  color: #9a4b46;
  font-size: .9rem;
  line-height: 1;
}

.marker-chooser-actions {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  display: grid;
}

.marker-add-piece {
  border: 1px solid rgb(var(--accent-rgb) / 28%);
  border-radius: var(--floating-radius-control);
  min-height: 36px;
  color: var(--accent-dark);
  background: rgb(var(--accent-rgb) / 8%);
  padding: 0 12px;
  font-size: 1.2rem;
  font-weight: 850;
}

.marker-chooser-confirm {
  border-radius: var(--floating-radius-control);
  color: #8999a0;
  background: #eef4f7;
  border: 1px solid #dce7ec;
  width: 42px;
  height: 36px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 900;
  transition: all .14s;
}

.marker-chooser-confirm.changed {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent-gradient);
  box-shadow: 0 5px 14px rgb(var(--accent-rgb) / 28%);
  transform: scale(1.06);
}

.marker-edit-toolbar {
  z-index: 13;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #fffdf7f2;
  border: 1px solid #ffffffad;
  border-radius: 15px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  display: flex;
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px #00000038;
}

.marker-edit-toolbar span {
  color: #61747d;
  white-space: nowrap;
  padding-inline: 6px;
  font-size: .66rem;
  font-weight: 800;
}

.marker-edit-toolbar button {
  border-radius: var(--floating-radius-control);
  color: #53666f;
  background: #f5f7f4;
  border: 1px solid #dce7ec;
  min-height: 32px;
  padding: 0 9px;
  font-size: .65rem;
  font-weight: 800;
}

.marker-edit-toolbar button:first-of-type {
  color: #a63832;
  background: #a6383212;
  border-color: #a638322e;
}

.hud-pill, .turn-pill, .zoom-controls, .gesture-hint, .freestyle-actions, .marker-palette, .marker-edit-toolbar {
  border: 1px solid var(--floating-border);
  background: var(--floating-surface);
  box-shadow: var(--floating-shadow-compact);
  -webkit-backdrop-filter: var(--floating-blur);
}

.icon-description-popover, .board-activity-toast {
  border: 1px solid var(--floating-border);
  border-radius: var(--floating-radius);
  background: var(--floating-surface);
  box-shadow: var(--floating-shadow-context);
  -webkit-backdrop-filter: var(--floating-blur);
}

.marker-chooser-popover {
  border: 1px solid var(--floating-border);
  border-radius: var(--floating-radius);
  background: var(--floating-surface-solid);
  box-shadow: var(--floating-shadow-dialog);
  -webkit-backdrop-filter: var(--floating-blur);
  gap: 10px;
  padding: 14px;
}

.idea-card-backdrop, .board-overview-backdrop, .install-guide-backdrop, .qr-scanner-backdrop {
  background: var(--floating-backdrop);
  -webkit-backdrop-filter: var(--floating-backdrop-blur);
}

.install-guide, .qr-scanner, .board-overview {
  border: 1px solid var(--floating-border);
  border-radius: var(--floating-radius-dialog);
  background: var(--floating-surface-solid);
  box-shadow: var(--floating-shadow-dialog);
}

.game-hud-top {
  top: max(var(--floating-edge), env(safe-area-inset-top));
  right: max(var(--floating-edge), env(safe-area-inset-right));
  left: max(var(--floating-edge), env(safe-area-inset-left));
  gap: 8px;
}

.hud-pill {
  min-height: var(--floating-control-height);
  padding-inline: 13px;
}

.turn-pill {
  border-radius: var(--floating-radius);
  min-height: 52px;
}

.freestyle-actions {
  bottom: max(var(--floating-edge), env(safe-area-inset-bottom));
  border-radius: var(--floating-radius);
  gap: 4px;
  padding: 5px;
}

.freestyle-actions button {
  min-height: var(--floating-control-height);
  border-radius: var(--floating-radius-control);
}

.marker-palette {
  left: max(var(--floating-edge), env(safe-area-inset-left));
  border-radius: var(--floating-radius);
  padding: 8px;
}

.marker-edit-toolbar {
  border-radius: var(--floating-radius);
  gap: 6px;
  padding: 6px;
}

.board-toast-stack {
  left: max(var(--floating-edge), env(safe-area-inset-left));
  width: min(350px, calc(100vw - var(--floating-edge) - var(--floating-edge)));
  gap: 8px;
}

.board-activity-toast {
  min-height: 74px;
  padding: 10px;
}

.icon-description-popover {
  min-height: 84px;
  padding: 12px;
}

.install-guide {
  gap: 16px;
  padding: 20px;
}

.qr-scanner {
  gap: 12px;
  padding: 18px;
}

.install-guide > header button, .qr-scanner > header button, .board-overview > header > button {
  width: var(--floating-close-size);
  height: var(--floating-close-size);
  border: 1px solid var(--floating-border);
  color: #53666f;
  box-shadow: var(--floating-highlight);
  background: #e7f1f5;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
}

.install-guide > header button:hover, .qr-scanner > header button:hover, .board-overview > header > button:hover {
  background: #d9eaf1;
}

.install-guide > header, .qr-scanner > header, .board-overview > header {
  grid-template-columns: minmax(0, 1fr) var(--floating-close-size);
  column-gap: 12px;
}

.idea-card-close {
  width: var(--floating-control-height);
  height: var(--floating-control-height);
  border: 1px solid var(--floating-border);
  background: var(--floating-surface);
  box-shadow: var(--floating-shadow-compact);
  -webkit-backdrop-filter: var(--floating-blur);
}

.icon-description-popover button, .board-activity-toast > button {
  border: 1px solid var(--floating-border);
  width: 30px;
  height: 30px;
  box-shadow: var(--floating-highlight);
  background: #e7f1f5;
}

.board-overview-toggle, .history-scope-toggle, .marker-current-pieces, .marker-kind-options button, .marker-current-tray > button {
  border-radius: var(--floating-radius-control);
}

.gesture-hint {
  color: #53666f;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: .75rem;
  font-weight: 700;
}

.zoom-controls {
  border-radius: var(--floating-radius);
  grid-template-columns: 44px 54px 44px;
  padding: 4px;
  display: grid;
}

.zoom-controls button {
  border-radius: var(--floating-radius-control);
  min-width: 44px;
  min-height: 42px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.zoom-controls button:nth-child(2) {
  color: var(--accent-dark);
  text-transform: uppercase;
  font-size: .78rem;
}

.zoom-controls button:hover {
  background: rgb(var(--accent-rgb) / 10%);
}

@media (max-width: 560px) {
  .game-hud-top {
    grid-template-columns: auto 1fr auto;
    display: grid;
  }

  .hud-pill {
    min-height: 38px;
    padding: 0 10px;
    font-size: .66rem;
  }

  .turn-pill {
    min-width: 0;
    min-height: 46px;
    padding-inline: 10px;
  }

  .room-pill {
    display: none;
  }

  .board-leave-button {
    justify-content: center;
    width: auto;
    min-width: 66px;
    padding: 0 8px;
  }

  .board-leave-button > span:last-child {
    display: none;
  }

  .mobile-room-code {
    font-size: .68rem;
    display: inline;
  }

  .gesture-hint {
    max-width: 150px;
    padding: 8px 11px;
    font-size: .68rem;
  }

  .zoom-controls {
    grid-template-columns: 40px 48px 40px;
  }

  .zoom-controls button {
    min-width: 40px;
    min-height: 38px;
  }

  .freestyle-actions {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .freestyle-actions button {
    min-height: 38px;
    padding-inline: 10px;
    font-size: .68rem;
  }

  .marker-palette {
    top: auto;
    right: 12px;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 102px);
    justify-content: center;
    display: flex;
    left: 12px;
    transform: none;
  }

  .marker-palette > span {
    display: none;
  }

  .marker-move-actions {
    align-self: center;
  }

  .marker-palette-row {
    gap: 2px;
    display: grid;
  }

  .marker-palette-row button {
    width: 38px;
    height: 34px;
  }

  .marker-edit-toolbar {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 104px);
  }
}

@media (max-height: 480px) {
  .gesture-hint {
    display: none;
  }

  .turn-pill {
    max-width: 42vw;
  }
}

/*# sourceMappingURL=apps_web_src_app_globals_1wvyn-h.css.map*/