:root {
  color-scheme: light;
  --ink: #183337;
  --muted: #647477;
  --paper: #f5f4ee;
  --line: #d9dfd8;
  --yellow: #f7be57;
  --felt: #183f41;
  --white: #fff;
  --red: #c44043;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #df881c;
  outline-offset: 4px;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -2px;
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  line-height: 1.12;
  margin-bottom: 14px;
}
h2 {
  font-size: 1.2rem;
}
p {
  line-height: 1.6;
}
.site-header {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 0 max(5%, calc((100vw - 1320px) / 2));
}
.brand {
  display: flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: -1.5px;
  font-size: 1.8rem;
  white-space: nowrap;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 2.5rem;
  line-height: 1;
}
.brand-period {
  color: #be711c;
}
.header-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.free-label {
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid #b9c8bf;
  border-radius: 20px;
  padding: 8px 14px;
}
.lobby,
.game-page {
  max-width: 1320px;
  margin: auto;
  padding: 54px 0 28px;
}
.lobby-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-bottom: 32px;
}
.eyebrow {
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #6d7b73;
  margin-bottom: 17px;
}
.intro {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 0;
}
.collection-stamp {
  display: flex;
  align-items: center;
  gap: 18px;
  transform: rotate(4deg);
  padding: 16px 20px;
  border: 1px solid #adbaae;
  border-radius: 10px;
}
.collection-stamp strong {
  font:
    3.8rem Georgia,
    serif;
  line-height: 1;
}
.collection-stamp span {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
}
.browse-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter {
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 10px 20px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
}
.filter.active {
  background: var(--ink);
  color: white;
}
.filter:not(.active):hover {
  border-color: #a8b8ab;
}
.game-count {
  font-size: 0.85rem;
  color: var(--muted);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.game-tile {
  border: 1px solid #d1d9d0;
  border-radius: 14px;
  overflow: hidden;
  background: #fffdf8;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  animation: enter 0.4s both;
  animation-delay: calc(var(--i) * 25ms);
}
.game-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px #18333713;
}
.tile-top {
  height: 143px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.tile-symbol {
  font-family: Georgia, serif;
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
}
.tile-number {
  position: absolute;
  top: 13px;
  left: 13px;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.6;
}
.tile-category {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  opacity: 0.7;
  font-weight: 700;
}
.amber {
  background: #f6c45f;
  color: #72501b;
}
.mint {
  background: #bddecc;
  color: #245b47;
}
.coral {
  background: #ef9d85;
  color: #7a342d;
}
.lavender {
  background: #cdc7e5;
  color: #4f427f;
}
.sky {
  background: #b8d6df;
  color: #315f72;
}
.navy {
  background: #264b52;
  color: #f2d49e;
}
.tile-content {
  padding: 18px 19px 17px;
}
.tile-content h2 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  letter-spacing: -0.4px;
  margin-bottom: 9px;
}
.tile-content h2 span {
  font-size: 1rem;
  font-weight: 400;
}
.tile-content p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  min-height: 42px;
  margin-bottom: 22px;
}
.tile-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}
.tile-meta span:last-child {
  color: var(--muted);
  font-weight: 400;
}
.lobby-note {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  background: #e5e9df;
  padding: 22px 26px;
  border-radius: 12px;
}
.note-symbol {
  font-size: 2rem;
  color: #537261;
}
.lobby-note p {
  margin: 0;
  font-size: 0.875rem;
}
.note-small {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
footer {
  max-width: 1320px;
  margin: 24px auto 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0 32px;
  font-size: 0.75rem;
  color: var(--muted);
}
.game-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}
.game-heading h1 {
  font-size: 2.7rem;
  letter-spacing: -1px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.game-heading p {
  color: var(--muted);
  margin: 0;
}
.back-link {
  font-size: 0.875rem;
  font-weight: 600;
}
.play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
.game-surface {
  background: var(--felt);
  color: #f3f4e9;
  min-height: 530px;
  border-radius: 18px;
  padding: 32px;
  box-shadow: inset 0 0 0 1px #ffffff0d;
}
.rules-panel {
  padding: 27px;
  background: #e8ece3;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.rules-panel h2 {
  margin: 13px 0;
}
.rules-panel ol,
.rules-panel ul {
  padding-left: 20px;
}
.rules-panel li {
  margin-bottom: 10px;
}
.rules-panel strong {
  font-weight: 700;
}
.rules-foot {
  border-top: 1px solid #c9d2c5;
  padding-top: 18px;
  margin-top: 24px;
  font-size: 0.8rem;
  color: #50665e;
}
.rules-foot span {
  padding: 0 6px;
}
.rules-foot p {
  margin: 10px 0 0;
}
.button {
  border: 0;
  border-radius: 9px;
  padding: 12px 20px;
  background: var(--yellow);
  color: #332a1b;
  font-weight: 700;
  min-height: 46px;
  transition: filter 0.15s;
}
.button:hover:not(:disabled) {
  filter: brightness(1.07);
}
.button.secondary {
  border: 1px solid #b9c8bf;
  background: transparent;
  color: var(--ink);
}
.game-surface .button.secondary {
  border-color: #68908c;
  color: #f3f4e9;
}
.button.small {
  font-size: 0.875rem;
  padding: 9px 14px;
  min-height: 38px;
}
.toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 25px;
}
.stat {
  min-width: 110px;
  text-align: center;
  padding: 12px 22px;
  background: #ffffff0b;
  border-radius: 10px;
}
.stat span {
  display: block;
  font-size: 0.75rem;
  color: #bfcebd;
  margin-bottom: 4px;
}
.stat strong {
  font-size: 1.6rem;
  font-weight: 600;
}
.game-status {
  background: #ffffff0c;
  border: 1px solid #ffffff18;
  padding: 14px 18px;
  border-radius: 9px;
  text-align: center;
  line-height: 1.5;
  margin: 20px 0;
  font-size: 0.95rem;
}
.game-status.finished {
  background: #f7be57;
  color: #2b382e;
  font-weight: 700;
  border-color: transparent;
}
.sub-label {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
  color: #bacdc6;
  margin: 16px 0 12px;
}
.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 18px 0;
}
.playing-card {
  width: 72px;
  height: 105px;
  position: relative;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  background: #fffdf5;
  color: #1b3439;
  box-shadow: 0 3px 0 #0003;
  padding: 6px;
  font-family: Georgia, serif;
  transition: transform 0.1s;
}
.playing-card:hover:not(:disabled) {
  transform: translateY(-5px);
}
.playing-card.red {
  color: #be4149;
}
.card-corner {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 1.05rem;
  line-height: 1;
}
.card-corner small {
  display: block;
  font-size: 0.875rem;
}
.card-suit {
  font-size: 2.4rem;
  line-height: 1;
}
.card-bottom {
  position: absolute;
  bottom: 6px;
  right: 5px;
  font-size: 0.75rem;
  transform: rotate(180deg);
}
.playing-card.selected {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  transform: translateY(-6px);
}
.playing-card:disabled {
  opacity: 1;
  cursor: default;
}
.playing-card.dim {
  opacity: 0.5;
}
.card-back {
  color: #efe1b8;
  background: repeating-linear-gradient(
    45deg,
    #486768 0,
    #486768 4px,
    #345455 4px,
    #345455 8px
  );
  border: 4px solid #cdd7c5;
  font:
    1.5rem Georgia,
    serif;
}
.card-slot {
  width: 72px;
  height: 105px;
  border: 2px dashed #799b9166;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #adc0b3;
  background: transparent;
  flex-shrink: 0;
}
.center-pile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 25px 0;
}
.center-pile > div {
  text-align: center;
}
.center-pile .sub-label {
  margin-bottom: 0;
}
.mode-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.mode-row label {
  font-size: 0.85rem;
  color: #ced8cd;
}
.mode-row select {
  border: 1px solid #79958c;
  border-radius: 8px;
  background: #2f5251;
  color: white;
  padding: 8px 12px;
  max-width: 100%;
}
.dice {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 25px 0;
}
.die {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff9e9;
  color: #233f40;
  font-family: Arial, sans-serif;
  font-size: 3.8rem;
  width: 80px;
  height: 80px;
  border-radius: 13px;
  line-height: 1;
  box-shadow: 0 5px #0b282a50;
}
.number-tiles {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.number-tile {
  width: 62px;
  height: 84px;
  border-radius: 8px;
  background: #ead4a5;
  color: #5d4323;
  border: 0;
  border-bottom: 5px solid #b69461;
  font:
    2rem Georgia,
    serif;
}
.number-tile.chosen {
  background: var(--yellow);
  outline: 3px solid white;
  outline-offset: 2px;
}
.number-tile.closed {
  background: #ffffff0a;
  color: #89a291;
  border: 1px solid #ffffff16;
  opacity: 0.6;
  transform: scale(0.91);
}
.center {
  text-align: center;
}
.muted {
  color: #b9cebe;
  font-size: 0.875rem;
}
.color-card {
  font-family: "Segoe UI", sans-serif;
  color: white;
  font-weight: 800;
}
.color-card.redc {
  background: #be4049;
}
.color-card.blue {
  background: #326cb0;
}
.color-card.green {
  background: #397b52;
}
.color-card.yellow {
  background: #efd276;
  color: #493c19;
}
.color-card.wild {
  background: conic-gradient(
    #3e77bd 0 25%,
    #ce4354 0 50%,
    #e7c367 0 75%,
    #51866d 0
  );
}
.color-card .color-value {
  font-size: 1.6rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  padding: 8px 6px;
  display: block;
  transform: rotate(-12deg);
  background: #ffffff15;
}
.color-name {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.color-picker {
  padding: 20px;
  background: #103031;
  border-radius: 12px;
  text-align: center;
}
.solitaire-top,
.tableau {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.solitaire-top {
  margin-bottom: 25px;
}
.solitaire-top .playing-card,
.solitaire-top .card-slot,
.tableau .playing-card,
.tableau .card-slot {
  width: 100%;
  height: 100px;
}
.sol-column {
  position: relative;
  min-height: 330px;
}
.sol-column .playing-card {
  position: absolute;
  left: 0;
  top: calc(var(--row) * 29px);
}
.sol-column .card-back {
  font-size: 1rem;
}
.sol-hint {
  outline: 3px solid #f7be57 !important;
}
.connect-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-width: 480px;
  margin: 20px auto;
  background: #28575a;
  border: 8px solid #32686b;
  border-radius: 12px;
  padding: 10px;
}
.connect-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #153b3d;
  min-width: 0;
  box-shadow: inset 0 3px 5px #0003;
}
.connect-cell.p1 {
  background: #f4c45e;
}
.connect-cell.p2 {
  background: #ed9780;
}
.connect-cell.win {
  outline: 3px solid white;
  outline-offset: -5px;
}
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 350px;
  margin: 28px auto;
}
.ttt-cell {
  aspect-ratio: 1;
  border-radius: 12px;
  background: #ffffff0d;
  border: 1px solid #ffffff25;
  color: var(--yellow);
  font:
    3rem Georgia,
    serif;
}
.ttt-cell.o {
  color: #a6d2bb;
}
.ttt-cell:disabled {
  opacity: 1;
}
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 430px;
  margin: 20px auto;
}
.memory-card {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid #ffffff1a;
  background: #2a5555;
  color: #dce4d2;
  font-size: 2.2rem;
}
.memory-card.open {
  background: #f4e7c3;
  color: #294347;
  border-color: #f4e7c3;
}
.memory-card.matched {
  background: #88bba1;
  border-color: #9bccad;
  color: #20423c;
}
.sea-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.sea-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  max-width: 360px;
  margin: 14px auto;
}
.sea-cell {
  aspect-ratio: 1;
  padding: 0;
  background: #2b575b;
  border: 1px solid #64858555;
  border-radius: 3px;
  color: white;
  font-size: 0.75rem;
  min-width: 0;
}
.sea-cell.ship {
  background: #739b91;
}
.sea-cell.hit {
  background: #dc795e;
  color: #291f1e;
}
.sea-cell.miss {
  background: #244648;
  color: #a7bdaf;
}
.sea-cell:disabled {
  opacity: 1;
}
.sea-cell.sunk {
  background: #e9b14f;
  color: #203b3d;
}
.sea-cell:hover:not(:disabled) {
  background: #bcceae;
  color: #183f41;
}
.ship-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  font-size: 0.75rem;
}
.ship-pill {
  background: #ffffff10;
  padding: 5px 8px;
  border-radius: 5px;
}
.ship-pill.sunk {
  text-decoration: line-through;
  color: #f3b77f;
}
.spectrum-area {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.spectrum-track {
  height: 65px;
  background: linear-gradient(90deg, #6e9dac, #bdc999, #f4ca71, #e89575);
  border-radius: 14px;
  position: relative;
  margin: 28px 8px 14px;
}
.target-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #fffa;
  border: 3px solid white;
  border-radius: 5px;
  width: 12%;
  transform: translateX(-50%);
}
.target-core {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 33%;
  width: 34%;
  background: #f7be57;
  border-left: 2px solid #745918;
  border-right: 2px solid #745918;
}
.guess-marker {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 4px;
  background: #193e41;
  outline: 2px solid white;
  transform: translateX(-50%);
}
.spectrum-ends {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 700;
  margin: 0 8px 20px;
}
.spectrum-ends span:last-child {
  text-align: right;
}
input[type="range"] {
  width: 100%;
  accent-color: #f7be57;
  margin: 20px 0;
}
input[type="text"] {
  width: 100%;
  border-radius: 8px;
  background: #fffdf6;
  color: #203c3b;
  border: 1px solid #ccd4c7;
  padding: 14px 16px;
  margin: 10px 0;
}
label.input-label {
  display: block;
  text-align: left;
  font-size: 0.875rem;
  margin-top: 18px;
}
.clue {
  font:
    2rem Georgia,
    serif;
  margin: 24px 0;
}
.privacy-card {
  border: 1px dashed #82a18a;
  border-radius: 15px;
  padding: 36px 22px;
  margin: 25px 0;
  background: #ffffff07;
}
.privacy-card h3 {
  font:
    1.5rem Georgia,
    serif;
  margin-bottom: 12px;
}
.big-score {
  font:
    4rem Georgia,
    serif;
  margin: 25px 0;
  color: var(--yellow);
}
.end-actions {
  margin-top: 20px;
}
.books {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.book {
  font-size: 0.75rem;
  padding: 5px 8px;
  border-radius: 5px;
  background: #ffffff15;
}
.book.empty {
  color: #bdd0c1;
}
.rank-button {
  width: 52px;
  height: 62px;
  background: #fff9e9;
  color: #244342;
  border: 0;
  border-radius: 7px;
  font:
    1.5rem Georgia,
    serif;
}
.rank-button small {
  display: block;
  font:
    0.7rem "Segoe UI",
    sans-serif;
  color: #66756a;
}
.history {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.mini-card {
  background: #ffffff12;
  border-radius: 5px;
  padding: 7px 11px;
  font:
    1rem Georgia,
    serif;
}
.mini-card.red {
  color: #ffb7af;
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1800px) {
  .lobby,
  .game-page,
  footer {
    max-width: 1420px;
  }
}
@media (max-width: 1450px) {
  .lobby,
  .game-page,
  footer {
    margin-left: 5%;
    margin-right: 5%;
  }
  .site-header {
    padding-left: 5%;
    padding-right: 5%;
  }
  .game-grid {
    gap: 20px;
  }
}
@media (max-width: 1050px) {
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .play-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .rules-panel {
    min-height: 0;
  }
  .rules-panel ol {
    columns: 2;
    column-gap: 40px;
  }
  .rules-panel li {
    break-inside: avoid;
  }
  .collection-stamp {
    display: none;
  }
  .game-surface {
    padding: 28px;
  }
  .note-small {
    display: none;
  }
}
@media (max-width: 720px) {
  .site-header {
    height: 78px;
  }
  .header-note {
    display: none;
  }
  .brand {
    font-size: 1.55rem;
  }
  .brand-mark {
    width: 35px;
    height: 35px;
    font-size: 2rem;
  }
  .free-label {
    font-size: 0.7rem;
    padding: 7px 10px;
  }
  .lobby,
  .game-page {
    padding-top: 32px;
  }
  .lobby-heading {
    padding-bottom: 25px;
  }
  .intro {
    font-size: 1rem;
  }
  .browse-bar {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
    padding: 18px 0;
  }
  .game-count {
    display: none;
  }
  .filter {
    padding: 9px 13px;
    font-size: 0.8rem;
  }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
  .tile-top {
    height: 112px;
    margin: 6px;
  }
  .tile-symbol {
    font-size: 4rem;
  }
  .tile-category {
    font-size: 0.6rem;
  }
  .tile-content {
    padding: 12px;
  }
  .tile-content h2 {
    font-size: 1rem;
  }
  .tile-content p {
    font-size: 0.8rem;
    min-height: 58px;
    margin-bottom: 12px;
  }
  .tile-meta {
    font-size: 0.7rem;
  }
  .lobby-note {
    padding: 18px;
  }
  .lobby-note p {
    font-size: 0.8rem;
  }
  .lobby-note strong {
    display: block;
  }
  footer {
    flex-direction: column;
    gap: 8px;
    font-size: 0.7rem;
  }
  .game-heading h1 {
    font-size: 2.2rem;
  }
  .game-heading p {
    font-size: 0.875rem;
  }
  .game-heading {
    align-items: flex-start;
  }
  .game-heading > #restart {
    font-size: 0.75rem;
    padding: 9px 12px;
    white-space: nowrap;
    margin-top: 44px;
  }
  .game-surface {
    padding: 20px 14px;
    min-height: 440px;
    border-radius: 13px;
  }
  .rules-panel ol {
    columns: 1;
  }
  .number-tile {
    width: 43px;
    height: 65px;
    font-size: 1.5rem;
  }
  .number-tiles {
    gap: 7px;
  }
  .playing-card {
    width: 62px;
    height: 92px;
  }
  .hand {
    gap: 7px;
  }
  .card-slot {
    width: 62px;
    height: 92px;
  }
  .stat {
    min-width: 80px;
    padding: 10px 15px;
  }
  .stats {
    gap: 9px;
  }
  .stat strong {
    font-size: 1.4rem;
  }
  .sea-boards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .sea-grid {
    max-width: 330px;
  }
  .solitaire-top,
  .tableau {
    gap: 4px;
  }
  .solitaire-top .playing-card,
  .solitaire-top .card-slot,
  .tableau .playing-card,
  .tableau .card-slot {
    height: 77px;
  }
  .sol-column .playing-card {
    top: calc(var(--row) * 26px);
  }
  .tableau .card-suit,
  .solitaire-top .card-suit {
    font-size: 1.3rem;
  }
  .tableau .card-bottom,
  .solitaire-top .card-bottom {
    display: none;
  }
  .solitaire-top .card-corner,
  .tableau .card-corner {
    font-size: 0.9rem;
    left: 3px;
    top: 4px;
  }
  .solitaire-top .card-corner small,
  .tableau .card-corner small {
    font-size: 0.7rem;
  }
  .solitaire-top .card-back {
    font-size: 1rem;
  }
  .connect-board {
    gap: 6px;
    padding: 7px;
    border-width: 5px;
  }
  .memory-board {
    gap: 8px;
  }
  .spectrum-ends {
    font-size: 0.85rem;
  }
  .button {
    padding: 11px 16px;
    font-size: 0.9rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.spectrum-track {
  overflow: hidden;
}
.target-zone {
  border: 0;
  background: #ffffff66;
}
.target-middle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
  width: 50%;
  background: #fff9;
}
.target-core {
  left: 37.5%;
  width: 25%;
  background: #f7be57;
  border: 0;
}
.target-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
}

/* A little weight, grain, and warmth: a game table worth gathering around. */
:root {
  --ink: #233d36;
  --muted: #748077;
  --paper: #f6f4ed;
  --line: #dedfd3;
  --yellow: #f4c45e;
  --felt: #24534a;
  --ease-out: cubic-bezier(.2,.75,.25,1);
  --card-shadow: 0 2px 2px #1630290a, 0 8px 22px #16302908;
  font-family: "Aptos", "Segoe UI", sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background-image: radial-gradient(#8f977518 .6px, transparent .6px);
  background-size: 5px 5px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #f4c45e90; color: #233d36; }
button, a, input, select { outline-color: #ba7f26; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #bf8d2e;
  outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }
button, a { -webkit-user-select: none; user-select: none; }
input { accent-color: var(--felt); }
h1 { letter-spacing: -2.1px; }
.site-header {
  height: 88px;
  background: #f6f4edeb;
  border-color: #dedfd3;
}
.brand { font-size: 1.7rem; letter-spacing: -1.2px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: #274e41; font-size: 2.2rem; transform: rotate(-8deg);
  box-shadow: inset 0 1px 0 #ffffff30, 0 3px 0 #142e26;
  transition: transform .25s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(0); }
.brand-period { color: #c2923d; }
.header-note { font-family: Georgia, serif; font-style: italic; font-size: 1rem; }
.free-label { color: #506553; border-color: #cfd7c7; background: #eef0e5; font-size: .73rem; }
.lobby, .game-page { padding-top: 43px; }
.eyebrow { color: #74836b; letter-spacing: 2.4px; font-size: .67rem; margin-bottom: 13px; }
.lobby-heading { padding-bottom: 28px; }
.lobby-heading h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-bottom: 12px; }
.intro { font-size: 1rem; }
.collection-stamp { border-color: #bdc6b3; padding: 13px 20px; background: #f1f1e6; gap: 13px; transform: rotate(3deg); }
.collection-stamp strong { font-size: 3.3rem; }
.collection-stamp span { font-size: .63rem; letter-spacing: 1.2px; }
.browse-bar { padding: 21px 0; }
.filters { gap: 5px; }
.filter { font-size: .82rem; padding: 10px 18px; transition: background .2s, color .2s, box-shadow .2s; }
.filter.active { background: #294b3f; box-shadow: 0 2px 4px #294b3f18, inset 0 1px 0 #ffffff1c; }
.filter:not(.active):hover { background: #eaece0; border-color: transparent; }
.game-count { font-size: .76rem; }
.game-grid { gap: 22px; }
.game-tile {
  border: 1px solid #d8ddcd; border-radius: 17px; background: #fffef9;
  box-shadow: var(--card-shadow);
  transition: transform .32s var(--ease-out), box-shadow .32s, border-color .25s;
}
.game-tile:hover { transform: translateY(-6px); border-color: #b7c5ab; box-shadow: 0 5px 6px #1d3b2b04, 0 16px 32px #1d3b2b13; }
.game-tile:active { transform: translateY(-2px); }
.tile-top { height: 160px; border-radius: 10px; margin: 8px; isolation: isolate; }
.tile-top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 30% 0, #ffffff3a, transparent 65%), radial-gradient(#193f3213 .7px, transparent .7px);
  background-size: 100% 100%, 4px 4px;
}
.tile-top::after { content: ""; position: absolute; inset: 7px; border: 1px solid #ffffff26; border-radius: 6px; pointer-events: none; }
.tile-number { z-index: 2; top: 12px; left: 13px; font-size: .6rem; letter-spacing: 1px; opacity: .7; }
.tile-category { z-index: 2; right: 13px; bottom: 11px; font-size: .57rem; letter-spacing: 1.2px; opacity: .75; }
.amber { background-color: #edcc87; color: #785a28; }
.mint { background-color: #c6dac4; color: #355a41; }
.coral { background-color: #e5b8a1; color: #764836; }
.lavender { background-color: #cec9df; color: #625274; }
.sky { background-color: #c4d7d8; color: #3b6062; }
.navy { background-color: #345b52; color: #e2d4ae; }
.tile-content { padding: 16px 20px 17px; }
.tile-content h2 { font-size: 1.075rem; letter-spacing: -.35px; margin-bottom: 8px; }
.tile-content h2 span { width: 22px; height: 22px; border-radius: 50%; color: #75866c; transition: transform .25s, background .25s; text-align: center; }
.game-tile:hover h2 span { background: #eef0e3; transform: rotate(45deg); }
.tile-content p { font-size: .8rem; line-height: 1.6; min-height: 42px; margin-bottom: 19px; color: #7c8177; }
.tile-meta { font-size: .68rem; padding-top: 12px; border-color: #e7e9de; }
.tile-meta span:first-child::before { content: ""; display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: #839673; margin-right: 6px; vertical-align: 1px; }
.lobby-note { border: 1px solid #dbe1cf; background: #edf0e4; padding: 21px 26px; border-radius: 12px; }
.note-symbol { color: #7c9167; }
.lobby-note p { font-size: .8rem; color: #63725d; }
.lobby-note strong { color: #35513c; }
footer { font-size: .7rem; border-color: #dfe2d5; }

/* Small, hand-built illustrations on the game boxes. */
.tile-art { width: 170px; height: 112px; position: relative; display: block; pointer-events: none; }
.tile-symbol.has-art { font-family: inherit; font-size: 1rem; line-height: 1; }
.tile-art > * { position: absolute; }
.art-card {
  width: 59px; height: 82px; padding: 7px; border-radius: 5px; color: #365449; background: #fff9e9;
  border: 1px solid #ffffffc9; box-shadow: 0 3px 0 #9e957141, 0 8px 12px #3b403124;
  font: bold 18px Georgia, serif; display: flex; align-items: flex-start; text-align: left;
}
.art-card::after { content: attr(data-suit); position: absolute; top: 33px; left: 0; right: 0; text-align: center; font-size: 29px; }
.art-card.red { color: #b9614f; }
.art-card.one { left: 31px; top: 20px; transform: rotate(-22deg); }
.art-card.two { left: 60px; top: 10px; transform: rotate(-3deg); }
.art-card.three { left: 88px; top: 18px; transform: rotate(18deg); }
.art-card.colour { color: #fff9e9; border: 4px solid #fff9e9; font: 700 1.2rem "Segoe UI", sans-serif; align-items: center; justify-content: center; }
.art-card.colour::after { content: ""; top: 9px; bottom: 9px; left: 5px; right: 5px; border: 2px solid #fff9e9cc; border-radius: 50%; transform: rotate(20deg); }
.art-card.colour.one { background: #628d70; }
.art-card.colour.two { background: #dbb750; }
.art-card.colour.three { background: #c56853; font-size: 1.5rem; }
.art-die {
  width: 57px; height: 57px; background: #fff9e9; border: 1px solid #fffef8; border-radius: 11px;
  color: #49604c; box-shadow: 0 4px 0 #baa47b, 0 10px 13px #3a402329, inset 0 -3px 0 #eadbbd;
}
.art-die.one { left: 32px; top: 22px; transform: rotate(-18deg); }
.art-die.two { left: 87px; top: 34px; transform: rotate(13deg); }
.art-die i { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: currentColor; box-shadow: inset 0 1px 1px #0005; border-radius: 50%; position: absolute; }
.art-numbers { display: flex; gap: 4px; bottom: 2px; left: 38px; transform: rotate(-4deg); }
.art-numbers b { padding: 4px 9px; background: #af813c; color: #ffedbd; font: 15px Georgia, serif; border-radius: 3px; box-shadow: 0 2px 0 #7b602d; }
.art-box .art-die { width: 45px; height: 45px; border-radius: 9px; }
.art-box .art-die.one { left: 42px; top: 9px; }
.art-box .art-die.two { left: 88px; top: 21px; }
.art-connect { display: grid; grid-template-columns: repeat(5, 1fr); width: 121px; height: 94px; padding: 10px; gap: 5px; background: #466c5a; border: 1px solid #769071; border-radius: 7px; left: 26px; top: 8px; transform: rotate(-7deg); box-shadow: 0 5px 0 #345244, 0 11px 18px #4e4c2a29; }
.art-connect i { position: static; border-radius: 50%; background: #244b41; box-shadow: inset 0 2px 1px #152d3a5c; }
.art-connect i.gold { background: #f1c769; box-shadow: inset 0 -2px 0 #b18b3c; }
.art-connect i.coral { background: #d98d71; box-shadow: inset 0 -2px 0 #a96c56; }
.art-memory { display: grid; grid-template-columns: 1fr 1fr; width: 106px; height: 96px; gap: 7px; left: 31px; top: 7px; transform: rotate(-8deg); }
.art-memory b { position: static; display: grid; place-items: center; border-radius: 5px; background: #fff8e4; color: #527552; font: 29px Georgia, serif; box-shadow: 0 3px 0 #97ae84, 0 5px 8px #40573e19; }
.art-memory b:nth-child(2), .art-memory b:nth-child(3) { color: #d3e0bf; background: repeating-linear-gradient(45deg, #5c7f5c 0 3px, #628661 3px 5px); border: 3px solid #f8f5df; }
.art-ttt { width: 112px; height: 99px; left: 30px; top: 5px; display: grid; grid-template-columns: repeat(3, 1fr); background: #769490; gap: 3px; transform: rotate(-7deg); border: 8px solid #afc7c3; border-radius: 6px; box-shadow: 0 4px 0 #82a4a0, 0 10px 18px #46666520; }
.art-ttt i { font: 27px/1 Georgia, serif; font-style: normal; display: grid; place-items: center; background: #bed5cd; color: #3e6659; }
.art-ttt i:nth-child(3n) { color: #f9f4df; }
.art-sea { width: 108px; height: 94px; left: 31px; top: 8px; border: 1px solid #bad1a277; border-radius: 5px; transform: rotate(-8deg); background-image: linear-gradient(#aec99b22 1px, transparent 1px), linear-gradient(90deg, #aec99b22 1px, transparent 1px); background-size: 18px 18px; background-color: #234d45; box-shadow: 0 5px 0 #1f4039, 0 10px 18px #122d2c35; }
.art-sea::before { content: ""; position: absolute; left: 22px; top: 20px; width: 12px; height: 48px; border-radius: 50% 50% 4px 4px; background: #b4bf94; box-shadow: inset 0 0 0 3px #d6d8b07a; }
.art-sea::after { content: ""; position: absolute; left: 57px; top: 39px; width: 31px; height: 12px; border-radius: 50% 4px 4px 50%; background: #b4bf94; box-shadow: inset 0 0 0 3px #d6d8b07a; }
.art-sea i { position: absolute; height: 8px; width: 8px; border-radius: 50%; border: 1px solid #f7d886; background: #e9ad67; top: 77px; left: 43px; box-shadow: 36px -54px 0 -1px #d28261; }
.art-spectrum { width: 129px; height: 79px; left: 21px; top: 18px; border-radius: 75px 75px 9px 9px; background: conic-gradient(from -90deg at 50% 100%, #6b928b 0 38deg, #a2b792 38deg 74deg, #f5d57b 74deg 110deg, #d8966b 110deg 145deg, #b36454 145deg 180deg, transparent 180deg); border: 6px solid #fff3da; box-shadow: 0 4px 0 #b5856f, 0 11px 17px #7c50372a; transform: rotate(-5deg); }
.art-spectrum::before { content: ""; position: absolute; width: 4px; height: 56px; background: #41584a; bottom: -1px; left: 55px; border-radius: 4px; transform: rotate(22deg); transform-origin: bottom center; box-shadow: 0 0 0 1px #fffa; }
.art-spectrum::after { content: ""; width: 14px; height: 14px; background: #fff3da; border: 4px solid #52664e; border-radius: 50%; position: absolute; left: 48px; bottom: -6px; }
.art-higher .art-card.one { left: 26px; top: 22px; transform: rotate(-10deg); }
.art-higher .art-card.two { left: 94px; top: 7px; transform: rotate(10deg); }
.art-arrow { left: 75px; top: 42px; z-index: 2; font: 29px Georgia, serif; color: #eed6a1; text-shadow: 0 2px 0 #233d33; }
.game-tile:hover .tile-art { animation: box-lift .45s var(--ease-out) both; }

/* The table. Decorative layers cannot intercept play or focus. */
.game-heading { margin-bottom: 27px; }
.game-heading h1 { font-size: 2.9rem; letter-spacing: -1.5px; margin-top: 19px; }
.game-heading p { font-size: .92rem; }
.back-link { color: #65735d; font-size: .8rem; transition: color .2s; }
.back-link:hover { color: #233d36; }
.play-layout { gap: 24px; grid-template-columns: minmax(0, 1fr) 275px; }
.game-surface, .room-stage {
  position: relative; isolation: isolate; padding: 32px; border-radius: 19px;
  color: #f5f3de; background-color: var(--felt);
  background-image: radial-gradient(ellipse at 50% 0, #57836a44, transparent 70%), repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #00000004 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px #18382d, inset 0 0 0 7px #ffffff03, inset 0 0 35px #173d3226, 0 3px 0 #143b31, 0 14px 30px #1e422718;
}
.game-surface::before, .room-stage::before { content: ""; position: absolute; inset: 12px; border: 1px solid #d5dbaf12; border-radius: 10px; pointer-events: none; z-index: -1; }
.rules-panel { background: #edefe4; border: 1px solid #dbe0d0; border-radius: 14px; font-size: .82rem; padding: 24px; color: #64735e; }
.rules-panel .eyebrow { font-size: .6rem; letter-spacing: 1.9px; }
.rules-panel h2 { font: 1.55rem Georgia, serif; color: #304c38; margin: 11px 0 19px; }
.rules-panel li { padding-left: 3px; margin-bottom: 13px; }
.rules-panel li::marker { color: #98a085; font-weight: 600; }
.rules-foot { font-size: .73rem; color: #78816b; border-color: #d5dac9; }
.button {
  background: #f1c663; border: 1px solid #f4d482; border-radius: 9px; font-size: .85rem;
  box-shadow: inset 0 1px 0 #fff5, 0 3px 0 #b6974933;
  transition: background .2s, transform .18s var(--ease-out), box-shadow .2s, opacity .2s;
}
.button:hover:not(:disabled) { background: #f9d57d; filter: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff5, 0 4px 0 #b6974933, 0 5px 12px #143b3120; }
.button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px #71571922; }
.button.secondary { border-color: #c8d0bd; background: #f8f8f040; color: #49633e; box-shadow: none; }
.button.secondary:hover:not(:disabled) { background: #e8ecdd; }
.game-surface .button.secondary, .room-stage .button.secondary { color: #e1e7ce; border-color: #89a58e77; background: #ffffff06; }
.game-surface .button.secondary:hover:not(:disabled), .room-stage .button.secondary:hover:not(:disabled) { background: #ffffff12; }
.button.small { min-height: 40px; font-size: .78rem; }
.stats { gap: 10px; margin-bottom: 27px; }
.stat { min-width: 108px; padding: 13px 22px; background: #183e3338; border: 1px solid #afc3a31c; border-radius: 10px; box-shadow: inset 0 1px 4px #0b281113; }
.stat span { color: #c6d2b8; font-size: .67rem; margin-bottom: 5px; }
.stat strong { color: #fff4d0; font: 1.8rem Georgia, serif; font-variant-numeric: tabular-nums; }
.game-status { border-color: #cbd8b523; background: #163e333b; font-size: .86rem; padding: 14px 18px; border-radius: 10px; }
.game-status.finished { background: #f2cd79; color: #3b4c32; box-shadow: 0 4px 16px #1633231c, inset 0 1px 0 #ffffff5c; border: 1px solid #ffe5a5; }
.sub-label { color: #bed0b5; font-size: .69rem; letter-spacing: 1.4px; }
.muted { color: #b7c8ae; font-size: .77rem; }
.mode-row { gap: 10px; margin-bottom: 23px; }
.mode-row label { font-size: .78rem; color: #bbceb1; }
.mode-row select, .game-surface select, .room-stage select { color: #f2f2db; background-color: #2c5747; border: 1px solid #9ab0876b; border-radius: 8px; padding: 9px 12px; font-size: .8rem; min-height: 40px; }
.toolbar { gap: 10px; }
.playing-card {
  border-radius: 7px; border: 1px solid #ecebde; background: #fffcf0; color: #2c4c40;
  box-shadow: 0 2px 0 #d2cbb7, 0 4px 0 #173c3333, 0 5px 8px #102c302b, inset 0 0 0 3px #fffffd80;
  transition: transform .22s var(--ease-out), box-shadow .22s, opacity .2s;
}
.playing-card.red { color: #bd604f; }
.playing-card:hover:not(:disabled) { transform: translateY(-9px) rotate(-1deg); box-shadow: 0 2px 0 #d2cbb7, 0 12px 17px #102c3038; z-index: 2; }
.playing-card.selected { outline-color: #f6cf79; outline-width: 2px; outline-offset: 4px; transform: translateY(-10px); box-shadow: 0 2px 0 #d2cbb7, 0 10px 17px #11281c4a; }
.playing-card.dim { opacity: .55; filter: saturate(.6); }
.card-corner { left: 6px; top: 5px; font-size: 1rem; z-index: 1; }
.card-corner small { font-size: .78rem; margin-top: 1px; }
.card-bottom { font-size: .73rem; right: 5px; bottom: 5px; }
.card-suit { font-size: 2.2rem; text-shadow: 0 1px 0 #ffffff; }
.playing-card.has-pips > .card-suit { visibility: hidden; }
.card-pips { position: absolute; inset: 21px 15px; pointer-events: none; }
.card-pips i { position: absolute; font-style: normal; font-size: .87rem; line-height: 1; transform: translate(-50%, -50%); }
.card-pips i.upside { transform: translate(-50%, -50%) rotate(180deg); }
.card-pips.face { inset: 26px 14px 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 2px; opacity: .86; background-image: repeating-linear-gradient(45deg, transparent 0 4px, #b0a68117 4px 5px); }
.card-pips.face b { font: 1.8rem Georgia, serif; line-height: 1; }
.card-back {
  background-color: #537262; color: #f0dec0; border: 4px solid #f5f0d8;
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, #e0d5b222 5px 6px), repeating-linear-gradient(-45deg, transparent 0 5px, #e0d5b222 5px 6px);
  box-shadow: 0 2px 0 #bcbda2, 0 4px 0 #e5ddbd, 0 6px 0 #a6ad94, 0 9px 12px #142e304a;
  text-shadow: 0 1px 3px #163b2c; font-size: 1.4rem;
}
.card-back::after { content: ""; position: absolute; inset: 4px; border: 1px solid #d7d3a96b; border-radius: 2px; pointer-events: none; }
.card-slot { border-color: #b8c8a740; background: #1c43372b; color: #b2c49c; }
.color-card { border: 4px solid #fff6df; box-shadow: 0 2px 0 #aeb895, 0 6px 9px #112b2c35; }
.color-card.redc { background-color: #c66856; }
.color-card.blue { background-color: #58899b; }
.color-card.green { background-color: #5e8c61; }
.color-card.yellow { background-color: #e4c366; }
.color-card.wild { background-image: conic-gradient(#5b8b9e 0 25%, #c66856 0 50%, #e4c366 0 75%, #5e8c61 0); }
.color-card .color-value { font-size: 1.5rem; border-color: #fff8e1b3; padding: 8px 4px; background: #ffffff0b; }
.color-card.yellow .color-value { border-color: #8a762b77; }
.color-name { font-size: .5rem; letter-spacing: .6px; bottom: 5px; }
.color-picker { background: #1c4437; border: 1px solid #b9cba83b; box-shadow: 0 10px 25px #102c251f; }
.color-picker [data-color="redc"] { background: #cf8272; border-color: #e4a592; }
.color-picker [data-color="blue"] { background: #94b7c0; border-color: #b1cbd0; }
.color-picker [data-color="green"] { background: #a5c29a; border-color: #c5d8ae; }
.color-picker [data-color="yellow"] { background: #f1ce78; }
.dice { gap: 20px; margin: 30px 0; }
.die { position: relative; width: 80px; height: 80px; border-radius: 17px; color: #365449; background: #fff9e9; border: 1px solid #fffbed; box-shadow: inset 0 -4px 0 #e4d6b6, inset 0 2px 3px white, 0 5px 0 #c0ac86, 0 13px 17px #102f2b3a; transform: rotate(-5deg); }
.die:nth-child(2n) { transform: rotate(6deg); }
.die.has-pips { font-size: 0; }
.die-pips { position: absolute; inset: 16px; pointer-events: none; }
.die-pips i { position: absolute; height: 11px; width: 11px; margin: -5.5px 0 0 -5.5px; background: currentColor; border-radius: 50%; box-shadow: inset 0 2px 2px #18362d78, 0 1px 0 #fff; }
.number-tiles { gap: 9px; margin: 33px 0; }
.number-tile { border-radius: 7px; border-bottom: 5px solid #a67f44; background: linear-gradient(100deg, #ecd4a1, #e5c693 60%, #efd9a9); color: #705127; box-shadow: inset 0 1px 0 #ffffe57a, inset 0 0 0 1px #f8dfae, 0 5px 7px #15362b30; text-shadow: 0 1px 0 #fff2; transition: transform .2s, background .2s, opacity .2s, box-shadow .2s; }
.number-tile:hover:not(:disabled) { transform: translateY(-4px); }
.number-tile.chosen { background: #f4ce76; outline: 2px solid #ffe9b1; outline-offset: 4px; transform: translateY(-6px); }
.number-tile.closed { background: #143e322e; border-color: #9bb28826; box-shadow: inset 0 2px 4px #122f3120; color: #9bb091; }
.connect-board { background: linear-gradient(145deg, #4c7560, #365c4b); border-color: #668773; box-shadow: inset 0 1px 2px #bcd2b850, 0 6px 0 #1c4134, 0 16px 22px #12372c3b; padding: 12px; gap: 9px; border-radius: 15px; }
.connect-cell { background: #1e483c; box-shadow: inset 0 4px 5px #14332d70, 0 1px 0 #93ac8666; transition: background .2s, box-shadow .2s; }
.connect-cell.p1 { background: radial-gradient(circle at 38% 30%, #f8dc8e, #e7b958); box-shadow: inset 0 0 0 5px #bd8f302a, inset 0 0 0 7px #f6dc8e30, inset 0 -3px 2px #a9793033, 0 2px 2px #203c3140; }
.connect-cell.p2 { background: radial-gradient(circle at 38% 30%, #ebac8f, #cd896c); box-shadow: inset 0 0 0 5px #a868422a, inset 0 0 0 7px #ffcfb530, inset 0 -3px 2px #9d593933, 0 2px 2px #203c3140; }
.connect-cell:disabled { opacity: 1; }
.connect-cell:not(.p1):not(.p2):hover:not(:disabled) { background-color: #416c50; box-shadow: inset 0 0 0 2px #e9d18880, inset 0 4px 5px #14332d40; }
.connect-cell.win { outline-color: #fff0c0; outline-width: 2px; outline-offset: -8px; filter: brightness(1.1); }
.ttt-board { gap: 11px; padding: 10px; border-radius: 15px; background: #153d3222; }
.ttt-cell { border: 1px solid #9aba912e; background: linear-gradient(145deg, #466e54, #3a624b); border-radius: 11px; box-shadow: inset 0 1px 0 #a0b87c21, 0 4px 0 #194032, 0 6px 8px #1030211a; text-shadow: 0 3px 0 #755b2430; font-size: 3.4rem; transition: background .2s, transform .2s; }
.ttt-cell.o { color: #c3d9a3; }
.ttt-cell:hover:not(:disabled) { background: #537a5c; transform: translateY(-2px); }
.memory-card { background-color: #446e54; background-image: repeating-linear-gradient(45deg, transparent 0 6px, #e0d5b209 6px 8px), repeating-linear-gradient(-45deg, transparent 0 6px, #e0d5b209 6px 8px); border: 4px solid #dce3bf80; color: #d7daba; box-shadow: 0 3px 0 #183f32, 0 7px 12px #102c2629, inset 0 0 0 3px #92aa7738; transition: transform .2s, background .2s; }
.memory-card:hover:not(:disabled) { transform: translateY(-4px) rotate(-1deg); }
.memory-card.open { background: #faebc5; border-color: #fff2d8; color: #476547; box-shadow: 0 3px 0 #bba877, 0 7px 12px #102c2629; }
.memory-card.matched { background: #b7cf9d; border-color: #cbdcb3; color: #426643; box-shadow: 0 3px 0 #6b9160, 0 7px 12px #102c2629; opacity: 1; }
.sea-grid { gap: 3px; background: #214b401a; }
.sea-cell { border-color: #a9c49a36; border-radius: 4px; background: #3a6355; box-shadow: inset 0 1px 0 #c7d2b315; transition: background .15s, transform .15s; }
.sea-cell.ship { background: #9baa83; border-color: #c1cba3; }
.sea-cell.hit { background: #d99a76; border-color: #eeb995; color: #663e2e; }
.sea-cell.miss { background: #244d42; color: #d1d9b4; }
.sea-cell.sunk { background: #e4bd68; border-color: #f4d487; }
.sea-cell:hover:not(:disabled) { background: #c9d8b2; }
.ship-pill { border: 1px solid #c3d2ab26; background: #ffffff08; color: #cdd8b7; border-radius: 20px; padding: 5px 9px; font-size: .66rem; }
.spectrum-track { border: 5px solid #eff0d6; height: 76px; border-radius: 14px; box-shadow: 0 4px 0 #869980, 0 9px 15px #173d322e; background: linear-gradient(90deg, #86adb0, #b9c99c, #eed183, #d7997e); }
.guess-marker { background: #3d644b; outline-color: #fff6d6; }
.spectrum-ends { font-size: .88rem; color: #d6debe; }
input[type="range"] { min-height: 28px; cursor: pointer; accent-color: #f1cb73; }
input[type="text"] { background: #fffdf1; border: 1px solid #cbd4bd; border-radius: 9px; box-shadow: inset 0 2px 3px #153a2810; font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
input[type="text"]:focus { border-color: #ad8a45; box-shadow: 0 0 0 3px #f4c45e24; }
.privacy-card { background: #1a433526; border-color: #a9bd9154; box-shadow: inset 0 0 30px #183c2921; }
.privacy-card h3, .clue { color: #f4e4b8; }
.rank-button { border: 1px solid #fffbed; background: #fff8e5; color: #3c6046; box-shadow: 0 3px 0 #c7bea0, 0 6px 8px #143c3021; transition: transform .2s; }
.rank-button:hover:not(:disabled) { transform: translateY(-4px); }
.book { background: #b7c79f1c; border: 1px solid #c7d2b120; font-size: .68rem; }
.mini-card { border: 1px solid #d7ddc126; padding: 9px 12px; }
.mini-card.red { color: #ecb094; }

/* Shared tables: a compact invitation, followed by the live room. */
.online-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 5px 0 28px; padding: 25px 28px; border: 1px solid #d0d9c3; border-radius: 15px; background: #e9efdf; background-image: radial-gradient(ellipse at 0 0, #ffffff66, transparent 65%); }
.online-hero h2 { color: #36583b; font: 1.65rem Georgia, serif; letter-spacing: -.45px; margin: 0 0 8px; }
.online-hero p { font-size: .83rem; color: #748067; margin-bottom: 0; max-width: 520px; }
.online-hero .eyebrow { font: 700 .62rem "Segoe UI", sans-serif; letter-spacing: 1.6px; color: #79886a; margin-bottom: 10px; }
.online-hero .button { white-space: nowrap; background: #345c42; border-color: #345c42; color: #f4f1d8; box-shadow: inset 0 1px 0 #ffffff1c, 0 3px 0 #264630; }
.online-hero .button:hover { background: #426a4b; }
.online-hero .button.secondary { background: transparent; color: #45613d; border-color: #bdcab0; box-shadow: none; }
.room-entry { max-width: 860px; margin: 0 auto; }
.room-entry h1 { margin-bottom: 15px; }
.room-entry > p { color: var(--muted); }
.room-form { padding: 27px; border: 1px solid #d7ddcc; border-radius: 15px; background: #fffdf5; box-shadow: var(--card-shadow); }
.room-form label { display: block; font-size: .8rem; font-weight: 600; color: #55684b; }
.room-form input { margin: 8px 0 18px; }
.room-form .button { width: 100%; }
.room-form p { font-size: .8rem; color: #7d8771; }
.room-lobby { padding: 28px; border: 1px solid #d4ddc9; border-radius: 18px; background: #fffdf5; box-shadow: var(--card-shadow); }
.room-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.room-topbar h1 { font-size: 2.5rem; margin: 12px 0 5px; }
.room-topbar p { margin-bottom: 0; color: #79816e; font-size: .85rem; }
.room-pill, .room-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #c9d4bd; border-radius: 30px; background: #eff2e8; color: #5d7450; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.room-badge { padding: 4px 8px; font-size: .6rem; }
.room-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #789a66; box-shadow: 0 0 0 3px #a8c78a26; }
.room-code { display: inline-flex; align-items: center; gap: 12px; font: 1.8rem "Consolas", monospace; font-weight: 600; letter-spacing: 5px; border: 1px dashed #b5c3a7; background: #edf1e2; padding: 16px 22px; border-radius: 10px; color: #46623b; }
.room-code .button { letter-spacing: normal; font-family: "Segoe UI", sans-serif; }
.room-players { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.room-player { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid #dfe5d5; border-radius: 10px; background: #f5f6ed; min-width: 0; font-size: .83rem; }
.room-player > div { min-width: 0; }
.room-player strong { font-weight: 600; overflow-wrap: anywhere; }
.room-player small, .room-player p { font-size: .69rem; color: #869177; margin: 3px 0 0; }
.room-player .room-badge { margin-left: auto; }
.player-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 35px; width: 35px; height: 35px; border-radius: 50%; background: #e9cc86; color: #796329; border: 2px solid #fff9e8; font-size: 1rem; font-weight: 700; box-shadow: 0 1px 3px #5a754318; }
.room-player:nth-child(4n + 2) .player-avatar { background: #bfd2ac; color: #537146; }
.room-player:nth-child(4n + 3) .player-avatar { background: #d6c7de; color: #7b6587; }
.room-player:nth-child(4n) .player-avatar { background: #e4b5a0; color: #9b654d; }
.online-game-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.online-game-option { min-width: 0; padding: 18px 14px; border: 1px solid #dce2d1; border-radius: 12px; background: #f7f7ef; text-align: left; transition: border-color .2s, transform .2s, background .2s, box-shadow .2s; }
.online-game-option strong { display: block; color: #47623d; font-size: .85rem; margin-bottom: 6px; }
.online-game-option span, .online-game-option small { color: #889178; font-size: .72rem; line-height: 1.45; }
.online-game-option:hover:not(:disabled) { border-color: #aebf99; transform: translateY(-2px); box-shadow: 0 5px 12px #3c57200a; }
.online-game-option.selected, .online-game-option.active, .online-game-option[aria-pressed="true"] { border-color: #789e5f; background: #eef3e4; box-shadow: 0 0 0 2px #98b97d24; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 24px; align-items: start; }
.room-stage { min-width: 0; min-height: 460px; }
.room-sidebar { min-width: 0; padding: 22px; background: #eff1e5; border: 1px solid #d7dfcb; border-radius: 14px; }
.room-sidebar h2, .room-sidebar h3 { color: #4c6741; font-size: .92rem; margin-bottom: 14px; }
.room-sidebar .room-player { background: #fafbf2; padding: 10px; }
.room-sidebar .room-code { font-size: 1.35rem; letter-spacing: 4px; width: 100%; justify-content: center; padding: 13px; }
.room-sidebar .button { max-width: 100%; }
.room-scoreboard { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 23px; }
.room-scoreboard > * { flex: 1; min-width: 100px; padding: 13px; border: 1px solid #b8cfa128; border-radius: 10px; background: #173c332b; text-align: center; }
.room-scoreboard strong { color: #f9e7b3; font: 1.55rem Georgia, serif; display: block; margin-top: 5px; }
.room-scoreboard .active, .room-scoreboard .current { border-color: #f2cb718c; background: #afc69d16; box-shadow: 0 0 0 2px #ebca5a13; }
.room-notice { border-radius: 10px; padding: 13px 17px; margin: 16px 0; color: #758067; background: #edf1e4; border: 1px solid #d6dfc9; font-size: .8rem; line-height: 1.55; }
.room-notice.error { color: #9b5947; background: #f8e9dd; border-color: #e6c7b4; }
.room-stage .room-notice { background: #b9c9a616; color: #d3dbbb; border-color: #b3cba72b; }
.room-reaction { display: inline-grid; place-items: center; min-width: 39px; height: 39px; border: 1px solid #ced9c3; border-radius: 50%; background: #fbfbf2; font-size: 1.1rem; transition: transform .2s, background .2s; }
.room-reaction:hover { transform: translateY(-3px) rotate(-7deg); background: #f4edc8; }
.room-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin: 20px 0 0; }
.room-status { border: 1px solid #b8cda139; background: #1d473934; border-radius: 10px; color: #e0e8ca; font-size: .85rem; padding: 14px 18px; text-align: center; margin: 15px 0; line-height: 1.6; }
.room-status.finished { background: #f0cc7b; border-color: #f9dda0; color: #3f5632; }
.room-progress { height: 7px; background: #153a312f; border-radius: 20px; overflow: hidden; margin: 15px 0; }
.room-progress > * { height: 100%; background: #eacc76; border-radius: inherit; transition: width .4s var(--ease-out); }
.room-overlay { position: absolute; z-index: 5; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 25px; background: #244c3cf5; color: #e8e9cd; border: 1px solid #bac79d4d; border-radius: 12px; backdrop-filter: blur(5px); }
.room-overlay h2 { font: 2rem Georgia, serif; color: #f7ddb0; }
.room-overlay p { max-width: 400px; color: #c2d1b0; font-size: .87rem; }

/* A quiet, opt-in sound switch; lightweight motion only on actual changes. */
.sound-toggle { border: 1px solid #d1d9c6; color: #738267; background: #f8f8ee; border-radius: 30px; padding: 7px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .68rem; min-height: 34px; white-space: nowrap; transition: background .2s, border-color .2s; }
.sound-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.sound-toggle:hover { border-color: #aabb91; background: #edf0e3; }
.sound-toggle[aria-pressed="true"] { background: #e5eed9; color: #52713f; border-color: #b9caa8; }
.site-header .sound-toggle { margin-left: auto; }
.site-header .header-note { margin-left: auto; }
.gn-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; color: #f7f2dc; background: #345741; border: 1px solid #6a8b58; border-radius: 30px; padding: 10px 18px; font-size: .76rem; box-shadow: 0 5px 20px #15372c33; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; animation: toast-in .2s ease-out both; }
.gn-celebration { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 10; }
.gn-celebration i { position: absolute; top: -12px; left: var(--x); width: 6px; height: 10px; background: var(--color); border-radius: 1px; opacity: 0; animation: table-confetti 1.7s var(--delay) ease-out both; }
.gn-piece-new { animation: piece-arrive .32s var(--ease-out) both; }
.gn-dice-roll { animation: dice-settle .43s var(--ease-out) both; }
.gn-status-pop { animation: status-arrive .38s var(--ease-out) both; }
@keyframes box-lift { 0% { transform: translateY(0) rotate(0); } 55% { transform: translateY(-4px) rotate(-2deg); } 100% { transform: translateY(-2px) rotate(-1deg); } }
@keyframes piece-arrive { from { opacity: .5; translate: 0 -9px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes dice-settle { 0% { translate: 0 -12px; rotate: -20deg; scale: .92; } 50% { translate: 0 2px; rotate: 8deg; scale: 1.03; } 100% { translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes status-arrive { from { scale: .97; opacity: .6; } to { scale: 1; opacity: 1; } }
@keyframes toast-in { from { opacity: 0; bottom: 15px; } to { opacity: 1; bottom: 22px; } }
@keyframes table-confetti { 0% { translate: 0 -5px; rotate: 0deg; opacity: 0; } 8% { opacity: .9; } 78% { opacity: .8; } 100% { translate: var(--drift) 430px; rotate: var(--spin); opacity: 0; } }
@media (min-width: 1400px) { .tile-top { height: 175px; } }
@media (max-width: 1050px) {
  .play-layout, .room-layout { grid-template-columns: minmax(0, 1fr); }
  .room-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .game-surface, .room-stage { padding: 27px; }
  .site-header { gap: 16px; }
  .header-note { font-size: .85rem; }
  .tile-content { padding: 15px 17px; }
}
@media (max-width: 720px) {
  .site-header { height: 73px; gap: 10px; }
  .site-header .free-label { display: none; }
  .brand { font-size: 1.5rem; }
  .brand-mark { width: 34px; height: 34px; margin-right: 10px; font-size: 2rem; }
  .sound-toggle { padding: 7px 9px; font-size: .63rem; }
  .lobby, .game-page { padding-top: 29px; }
  .lobby-heading h1 { letter-spacing: -1.3px; font-size: 2.35rem; }
  .lobby-heading { padding-bottom: 25px; }
  .intro { font-size: .88rem; line-height: 1.65; }
  .game-grid { gap: 14px; }
  .game-tile { border-radius: 13px; }
  .tile-top { height: 133px; margin: 6px; border-radius: 8px; }
  .tile-art { transform: scale(.9); }
  .game-tile:hover .tile-art { animation: none; }
  .tile-category { font-size: .48rem; letter-spacing: 1px; bottom: 9px; right: 10px; }
  .tile-number { font-size: .52rem; top: 10px; left: 10px; }
  .tile-content { padding: 12px 13px 13px; }
  .tile-content h2 { font-size: .94rem; letter-spacing: -.25px; gap: 4px; margin-bottom: 7px; }
  .tile-content h2 span { font-size: .82rem; width: 15px; flex-shrink: 0; }
  .tile-content p { min-height: 56px; margin-bottom: 12px; font-size: .73rem; line-height: 1.55; }
  .tile-meta { font-size: .6rem; padding-top: 11px; }
  .tile-meta span:first-child::before { display: none; }
  .browse-bar { padding: 17px 0; }
  .filters { gap: 2px; }
  .filter { font-size: .74rem; padding: 9px 12px; min-height: 38px; }
  .lobby-note { padding: 17px; gap: 13px; margin-top: 25px; }
  .lobby-note p { font-size: .74rem; }
  .game-heading h1 { font-size: 2.2rem; letter-spacing: -1.1px; }
  .game-heading p { font-size: .81rem; line-height: 1.6; }
  .game-heading { margin-bottom: 22px; gap: 12px; }
  .game-heading > #restart { font-size: .67rem; padding: 9px 11px; margin-top: 42px; }
  .game-surface, .room-stage { padding: 22px 15px; border-radius: 14px; }
  .game-surface::before, .room-stage::before { inset: 8px; border-radius: 7px; }
  .game-status { padding: 12px; font-size: .79rem; margin: 18px 0; }
  .stats { gap: 7px; margin-bottom: 21px; }
  .stat { min-width: 79px; padding: 10px 12px; border-radius: 8px; }
  .stat span { font-size: .58rem; }
  .stat strong { font-size: 1.4rem; }
  .sub-label { font-size: .62rem; letter-spacing: 1px; }
  .button { min-height: 44px; font-size: .8rem; padding: 10px 14px; }
  .toolbar { gap: 8px; }
  .playing-card, .card-slot { width: 60px; height: 89px; }
  .card-corner { font-size: .92rem; left: 5px; top: 4px; }
  .card-corner small { font-size: .7rem; }
  .card-bottom { font-size: .62rem; }
  .card-pips { inset: 19px 13px; }
  .card-pips i { font-size: .75rem; }
  .card-pips.face { inset: 22px 12px 19px; }
  .card-pips.face b { font-size: 1.5rem; }
  .color-card .color-value { font-size: 1.15rem; }
  .color-name { font-size: .45rem; }
  .hand { gap: 7px; }
  .die { width: 70px; height: 70px; border-radius: 14px; }
  .die-pips { inset: 14px; }
  .die-pips i { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .number-tiles { gap: 7px; margin: 28px 0; }
  .number-tile { width: 43px; height: 63px; font-size: 1.6rem; }
  .connect-board { gap: 6px; padding: 8px; border-width: 5px; }
  .connect-cell.win { outline-offset: -5px; }
  .connect-cell.p1, .connect-cell.p2 { box-shadow: inset 0 0 0 3px #a57c3926, inset 0 0 0 5px #ffdeb323, 0 2px 2px #203c3140; }
  .ttt-board { max-width: 315px; gap: 9px; padding: 7px; }
  .ttt-cell { font-size: 2.9rem; }
  .memory-card { border-width: 3px; }
  .sea-cell { min-height: 26px; }
  .solitaire-top .playing-card, .solitaire-top .card-slot, .tableau .playing-card, .tableau .card-slot { height: 77px; border-radius: 5px; }
  .solitaire-top .card-pips, .tableau .card-pips { display: none; }
  .solitaire-top .playing-card.has-pips > .card-suit, .tableau .playing-card.has-pips > .card-suit { visibility: visible; position: absolute; bottom: 12px; right: 4px; }
  .solitaire-top .card-back, .tableau .card-back { border-width: 3px; }
  .online-hero { flex-direction: column; align-items: stretch; padding: 21px; gap: 17px; margin-bottom: 20px; }
  .online-hero h2 { font-size: 1.45rem; }
  .online-hero p { font-size: .77rem; }
  .online-hero .room-controls, .online-hero .toolbar { justify-content: flex-start; margin: 0; }
  .room-form, .room-lobby { padding: 20px; }
  .room-code { font-size: 1.5rem; letter-spacing: 4px; padding: 14px 18px; }
  .online-game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .online-game-option { padding: 14px 11px; }
  .online-game-option strong { font-size: .78rem; }
  .online-game-option span, .online-game-option small { font-size: .65rem; }
  .room-topbar { gap: 13px; }
  .room-topbar h1 { font-size: 2.1rem; }
  .room-sidebar { display: block; padding: 20px; }
  .room-scoreboard { gap: 7px; }
  .room-scoreboard > * { padding: 11px 9px; font-size: .73rem; }
  .room-status { padding: 12px; font-size: .78rem; }
  .room-controls .button { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .lobby, .game-page, footer { margin-left: 4%; margin-right: 4%; }
  .game-grid { gap: 10px; }
  .tile-content { padding: 10px; }
  .tile-content h2 { font-size: .86rem; }
  .tile-top { height: 121px; }
  .tile-art { transform: scale(.8); }
  .tile-content p { font-size: .69rem; }
  .filter { padding: 8px 10px; }
  .number-tile { width: 39px; height: 59px; }
  .number-tiles { gap: 6px; }
  .playing-card, .card-slot { width: 56px; height: 84px; }
  .game-surface, .room-stage { padding: 20px 12px; }
  .stat { min-width: 74px; padding: 9px; }
}
@media (hover: none) {
  .game-tile:hover { transform: none; }
  .playing-card:hover:not(:disabled) { transform: none; }
  .playing-card.selected:hover:not(:disabled) { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .gn-celebration { display: none; }
}

/* Friendly controls retain native keyboard, screen-reader, and mobile behavior. */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea {
  width: 100%; min-height: 48px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid #cbd3c0; background: #fffdf5; color: #34513a;
  box-shadow: inset 0 2px 3px #364b2410, 0 1px 0 #fff8;
  font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #959d88; opacity: 1; }
textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
input:not([type="range"]):focus, textarea:focus { border-color: #9bae83; box-shadow: 0 0 0 4px #b5c79d20; }
select, .mode-row select, .game-surface select, .room-stage select {
  appearance: none; -webkit-appearance: none; min-height: 44px;
  padding: 10px 39px 10px 15px; border-radius: 24px; border: 1px solid #bfcdb1;
  color: #46643c; background-color: #f4f6eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23778b65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  box-shadow: 0 2px 4px #183b2110; font-size: .875rem; cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
select:hover:not(:disabled) { border-color: #93aa7c; background-color: #edf2e2; box-shadow: 0 2px 7px #183b2118; }
.game-surface select, .room-stage select { background-color: #37624c; border-color: #88a37b66; color: #eaf0d5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23cbd9b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.game-surface select:hover:not(:disabled), .room-stage select:hover:not(:disabled) { background-color: #416e54; }
select option { color: #34543c; background: #fbfbef; }
select:disabled { opacity: .6; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: #63804f; vertical-align: middle; margin-right: 7px; }
input[type="color"] { appearance: none; width: 40px; height: 40px; padding: 3px; border: 1px solid #9aaa89; background: #f8f4e0; border-radius: 50%; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
dialog { width: min(470px, calc(100% - 32px)); padding: 30px; color: #395335; border: 1px solid #d9dec8; border-radius: 21px; background: #fbfaef; box-shadow: 0 25px 90px #163b3159; }
dialog::backdrop { background: #163b3173; backdrop-filter: blur(6px); }
dialog h2 { font: 1.8rem Georgia, serif; }
dialog p { color: #7d8870; font-size: .95rem; }
dialog .toolbar { justify-content: flex-end; margin-bottom: 0; }
.text-button { background: transparent; border: 0; padding: 10px 2px; color: #677f54; text-underline-offset: 4px; font-size: .875rem; min-height: 40px; }
.text-button:hover { text-decoration: underline; color: #365539; }
.online-hero-actions, .game-heading-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.online-hero-actions { flex-shrink: 0; }
.online-hero-actions { max-width: 337px; }
.online-hero-actions > small { flex-basis: 100%; color: #8b987a; font-size: .75rem; padding-top: 4px; }
.online-hero > div > .room-badge { margin-bottom: 9px; }
.game-heading-actions { justify-content: flex-end; }
.game-heading-actions .button { white-space: nowrap; }
.room-entry-heading { text-align: center; margin: 33px 0 35px; }
.room-entry-heading .eyebrow { display: block; }
.room-entry-heading h1 { font-size: 2.7rem; letter-spacing: -1.3px; }
.room-entry-heading p { max-width: 480px; margin: 0 auto; color: #79856f; font-size: .95rem; }
.room-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.room-form { padding: 30px; position: relative; }
.room-form-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #7b945c; background: #e7edda; border: 1px solid #d8e1c7; font-size: 1.45rem; margin-bottom: 22px; }
.room-form:nth-child(2) .room-form-icon { color: #ad8850; background: #f1e8cf; border-color: #e9dcba; }
.room-form h2 { font: 1.7rem Georgia, serif; letter-spacing: -.4px; margin-bottom: 9px; color: #3d5c3c; }
.room-form p { line-height: 1.65; font-size: .875rem; margin-bottom: 24px; color: #7c876f; }
.room-form label { font-size: .875rem; font-weight: 600; margin-top: 0; }
.room-form input { margin: 8px 0 18px; }
.room-form .button { margin-top: 6px; }
.room-form-note { display: block; text-align: center; margin-top: 17px; color: #8a947c; font-size: .8rem; line-height: 1.6; }
.room-code-input { font-family: "Consolas", monospace !important; letter-spacing: 4px; text-transform: uppercase; }
.room-entry-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 23px; margin: 31px 0 25px; color: #98a083; font-size: .8rem; }
.room-entry-foot strong { color: #687e54; font-weight: 500; margin-left: 8px; }
.connection-help, .online-rules { border: 1px solid #d9dfca; border-radius: 12px; padding: 16px 19px; background: #eeefe34f; color: #76836a; font-size: .875rem; line-height: 1.65; }
.connection-help summary, .online-rules summary { cursor: pointer; color: #657e53; font-weight: 600; }
.connection-help summary:focus-visible, .online-rules summary:focus-visible { outline: 3px solid #ba8c37; outline-offset: 4px; border-radius: 3px; }
.connection-help p, .online-rules p { margin: 15px 0 0; }
.online-rules { margin-top: 23px; }
.online-rules ol { padding-left: 21px; }
.online-rules li { margin-top: 8px; padding-left: 3px; }
.room-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 24px 0 34px; }
.room-heading h1 { font-size: 2.9rem; margin: 10px 0; letter-spacing: -1.6px; }
.room-heading p { color: #7b876e; font-size: .875rem; margin: 0; }
.room-code-card { display: flex; flex-direction: column; flex-shrink: 0; gap: 7px; align-items: center; }
.room-code-card > span { font-size: .65rem; letter-spacing: 1.7px; font-weight: 700; color: #8a9679; }
.room-code-card > small { font-size: .7rem; color: #8c9780; }
.room-code-card .room-code { padding: 12px 21px; font-size: 1.65rem; min-height: 57px; transition: border-color .2s, background .2s; }
.room-code-card .room-code:hover { background: #e6edda; border-color: #90a675; }
.room-code small { letter-spacing: normal; font: 1.25rem "Segoe UI", sans-serif; opacity: .6; }
.room-topbar { padding-bottom: 15px; border-bottom: 1px solid #dfe4d3; gap: 15px; }
.room-topbar .back-link { margin-right: auto; }
.room-pill::before { display: none; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: #80a263; box-shadow: 0 0 0 3px #96b77621; }
.connection-dot.connecting { background: #ceac65; }
.room-progress[role="status"] { min-height: 46px; height: auto; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 11px 17px; background: #eef1e4; border: 1px solid #d7dfc8; border-radius: 12px; color: #748961; font-size: .875rem; }
.room-progress[role="status"] > * { height: auto; background: transparent; }
.connection-spinner { width: 15px; height: 15px !important; border: 2px solid #c1ceb0; border-top-color: #6d8b56; border-radius: 50%; animation: quiet-spin .8s linear infinite; }
.room-lobby-intro h2 { font: 1.7rem Georgia, serif; letter-spacing: -.5px; margin: 10px 0; }
.room-lobby-intro p { color: #7e8c71; font-size: .875rem; margin-bottom: 22px; }
.online-game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.online-game-option { display: flex; align-items: center; gap: 11px; padding: 15px 13px; min-height: 76px; text-align: left; }
.online-game-option:disabled { opacity: .72; }
.online-game-option.selected:disabled { opacity: 1; }
.online-game-option .online-game-symbol { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #e7ecd8; font: 1.5rem Georgia, serif; color: #7d9266; }
.online-game-option:nth-child(4n + 2) .online-game-symbol { color: #a07d4f; background: #f0e6cd; }
.online-game-option:nth-child(4n + 3) .online-game-symbol { color: #977c9b; background: #eae1eb; }
.online-game-option:nth-child(4n) .online-game-symbol { color: #a8846b; background: #f0e2d7; }
.online-game-option strong { font-size: .875rem; margin-bottom: 4px; }
.online-game-option small { display: block; font-size: .8rem; }
.online-game-option .game-option-check { margin-left: auto; color: #82a465; font-size: .8rem; }
.room-controls { justify-content: flex-start; align-items: center; border-top: 1px solid #dfe5d0; padding-top: 20px; }
.room-controls > div:first-child { margin-right: auto; }
.room-controls strong { color: #526e42; font-size: .92rem; }
.room-controls p { color: #88947a; font-size: .875rem; margin: 5px 0 0; }
.room-stage .room-controls { border-color: #b6c59b2e; }
.room-stage .room-controls strong { color: #eff0d2; }
.room-stage .room-controls p { color: #c1d0ad; }
.room-sidebar { display: block; }
.room-sidebar h2 { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; margin: 0 0 18px; }
.room-sidebar h2 > span { font-size: .75rem; color: #8c9b7a; font-weight: 400; }
.room-player strong { font-size: .875rem; }
.room-player small { display: block; font-size: .76rem; }
.room-player.is-you { border-color: #c3d3b0; background: #f5f9ec; }
.you-label { font-size: .62rem; padding: 2px 4px; margin-left: 3px; color: #8aa073; font-weight: 400; }
.player-state { margin-left: auto; color: #b2bba6; font-size: 1rem; }
.player-state.ready { color: #719252; }
.avatar-1 { background: #d3dfa7; color: #658040; }
.avatar-2 { background: #e5c1b0; color: #9b6b55; }
.avatar-3 { background: #d5c7e1; color: #8b739d; }
.avatar-4 { background: #b8d7d4; color: #678f87; }
.avatar-5 { background: #e4d8b0; color: #9c8c51; }
.room-sidebar .room-scoreboard { display: block; margin: 23px 0; padding-top: 20px; border-top: 1px solid #d6dec8; }
.room-sidebar .room-scoreboard > .eyebrow { display: block; padding: 0; border: 0; background: transparent; text-align: left; font-size: .63rem; letter-spacing: 1.7px; margin: 0 0 11px; color: #8a9b75; }
.room-sidebar .room-scoreboard > div { display: flex; align-items: center; justify-content: space-between; padding: 6px 1px; border: 0; background: transparent; color: #7e9070; font-size: .82rem; gap: 12px; }
.room-sidebar .room-scoreboard > div > span { overflow-wrap: anywhere; }
.room-sidebar .room-scoreboard strong { color: #6e8657; font: 1.1rem Georgia, serif; margin: 0; }
.room-reactions { padding-top: 18px; border-top: 1px solid #d6dec8; }
.room-reactions h3 { font-size: .875rem; }
.reaction-buttons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.reaction-buttons button { min-width: 0; min-height: 34px; background: #fafbf2; border: 1px solid #d9e2ca; border-radius: 9px; padding: 4px 0; font-size: 1rem; transition: transform .2s, background .2s; }
.reaction-buttons button:hover { transform: translateY(-3px); background: #f7e9c7; border-color: #e2d6ad; }
.reaction-feed { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; min-height: 20px; }
.reaction-feed .room-reaction { display: flex; width: auto; height: auto; align-items: center; justify-content: flex-start; min-height: 30px; gap: 7px; border: 0; border-radius: 8px; padding: 5px 8px; background: #e5ecd934; transform: none; }
.reaction-feed .room-reaction small { font-size: .76rem; color: #83966e; overflow-wrap: anywhere; }
.reaction-empty { color: #95a287; font-size: .75rem; }
.room-match-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.room-match-heading h2 { font: 1.9rem Georgia, serif; margin: 6px 0 0; letter-spacing: -.5px; }
.room-match-heading .eyebrow { font-size: .61rem; }
.room-match-heading .button { flex-shrink: 0; }
.room-result { padding: 20px; border: 1px solid #d9dfc8; border-radius: 12px; background: #edf1e2; }
.room-result > span { color: #81906e; font-size: .875rem; }
.room-paused { filter: saturate(.7); }

/* Shared party pieces: secrets, sketchpads, character boards, and voting. */
.secret-card, .role-card { position: relative; max-width: 440px; margin: 24px auto; padding: 31px 27px; background: #f5eed8; color: #4c6140; border: 1px solid #fff6dc; border-radius: 18px; text-align: center; box-shadow: 0 4px 0 #c1bc96, 0 13px 25px #13372b3b; }
.secret-card::before, .role-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid #c8d1ab7d; border-radius: 11px; pointer-events: none; }
.secret-card h2, .secret-card h3, .role-card h2, .role-card h3 { font: 2rem Georgia, serif; margin-bottom: 13px; letter-spacing: -.5px; }
.secret-card p, .role-card p { color: #889477; font-size: .95rem; margin: 9px 0; }
.secret-card strong, .role-card strong { color: #596f40; }
.secret-card .eyebrow, .role-card .eyebrow { color: #92a278; }
.secret-card .button, .role-card .button { margin-top: 16px; }
.secret-card.hidden, .role-card.hidden { background: repeating-linear-gradient(45deg, #42664f 0 6px, #456951 6px 8px); color: #eadcaa; border-color: #9baf8180; box-shadow: 0 4px 0 #204231, 0 13px 25px #13372b3b; }
.role-card.imposter, .role-card.mafia { background: #eee0dc; color: #92685e; }
.role-icon, .secret-icon { display: block; font-size: 3.2rem; margin: 0 auto 18px; line-height: 1.2; }
.phase-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border: 1px solid #afc89840; border-radius: 12px; padding: 15px 18px; margin: 17px 0; background: #afc59c12; font-size: .95rem; color: #e9edce; }
.phase-banner small { color: #b6c9a3; font-size: .875rem; }
.phase-banner strong { color: #f2db9b; }
.player-targets, .word-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.vote-card, .player-targets > button, .word-choices > button { padding: 17px 12px; min-height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #a9c29259; border-radius: 13px; color: #e5ebcc; background: #315b435e; box-shadow: 0 3px 0 #173d2926; font-size: .95rem; transition: transform .2s, background .2s, border-color .2s; }
.vote-card:hover:not(:disabled), .player-targets > button:hover:not(:disabled), .word-choices > button:hover:not(:disabled) { background: #51745180; border-color: #e1d08c9e; transform: translateY(-3px); }
.vote-card.selected, .player-targets > button[aria-pressed="true"] { background: #748b4b45; border-color: #e5c778; box-shadow: 0 0 0 2px #ead08c20; }
.vote-card small, .player-targets small, .word-choices small { font-size: .875rem; color: #bacaa8; }
.clue-list { display: flex; flex-direction: column; gap: 9px; margin: 22px 0; padding: 0; list-style: none; }
.clue-list > * { padding: 13px 16px; background: #c4d7ad0c; border: 1px solid #b3c69b2e; border-radius: 11px; color: #dce4c1; font-size: .95rem; }
.clue-list strong { color: #e8d19a; margin-right: 10px; }
.clue-list small { color: #b8c9a4; font-size: .875rem; }
.party-chat { padding: 18px; border: 1px solid #b0c8982e; background: #163f2b24; border-radius: 13px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6c8558 transparent; }
.party-chat p { font-size: .95rem; margin: 0 0 10px; color: #d7e2be; overflow-wrap: anywhere; }
.party-chat p:last-child { margin-bottom: 0; }
.party-chat strong { color: #efda9b; }
.drawing-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 13px; margin: 18px 0 12px; border: 1px solid #b8c99c40; background: #163e2c1c; }
.drawing-toolbar label { display: flex; align-items: center; gap: 8px; color: #d4dfb9; font-size: .875rem; }
.drawing-toolbar input[type="range"] { width: 110px; margin: 0; }
.drawing-toolbar button:not(.button) { width: 35px; height: 35px; border: 2px solid #e5e8ce88; border-radius: 50%; box-shadow: 0 2px 2px #143b2736; }
.drawing-toolbar button[aria-pressed="true"] { outline: 2px solid #f8d576; outline-offset: 3px; }
.drawing-canvas { display: block; max-width: 100%; width: 100%; aspect-ratio: 4 / 3; border: 7px solid #e9e4cd; background: #fffdf4; border-radius: 13px; box-shadow: 0 4px 0 #aaa98b, 0 10px 20px #163a2d30; touch-action: none; cursor: crosshair; }
.character-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 23px 0; }
.character-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 10px 6px; gap: 6px; border: 2px solid #ede4c8; border-radius: 11px; background: #f4eacf; color: #5a7050; box-shadow: 0 3px 0 #a6a180, 0 5px 9px #12372621; font-size: .875rem; transition: transform .2s, opacity .2s, background .2s; }
.character-card:hover:not(:disabled) { transform: translateY(-4px); }
.character-avatar { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: clamp(1.75rem, 4vw, 3rem); border-radius: 7px; background: #e0ddb5; }
.character-card:nth-child(4n + 2) .character-avatar { background: #d7ddd0; }
.character-card:nth-child(4n + 3) .character-avatar { background: #e5cfbf; }
.character-card:nth-child(4n) .character-avatar { background: #d8cddd; }
.character-card.eliminated, .character-card.flipped { background: #365f4557; border-color: #86a07350; color: #9bae89; box-shadow: inset 0 2px 4px #16342122; opacity: .6; }
.character-card.eliminated .character-avatar, .character-card.flipped .character-avatar { filter: grayscale(1); opacity: .4; }
.character-card.selected, .character-card[aria-pressed="true"] { outline: 2px solid #f4cf77; outline-offset: 3px; }
.attribute-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 30px; border: 1px solid #9fb6895e; background: #3a624626; color: #d5e0bc; font-size: .875rem; margin: 3px; }
button.attribute-chip:hover { background: #68835950; }
.attribute-chip.selected { border-color: #dbbf72; color: #f0dba7; }
.night-stage { background-color: #2d3d47; background-image: radial-gradient(circle at 10% 10%, #bdcbd222 1px, transparent 2px), radial-gradient(circle at 70% 30%, #e5d4a52e 1px, transparent 2px), linear-gradient(145deg, #344b53, #243e3d); background-size: 79px 83px, 127px 119px, 100% 100%; border: 1px solid #6c898354; border-radius: 16px; padding: 23px; margin: 18px 0; text-align: center; }
.night-stage h2, .night-stage h3 { color: #e1d6b4; font-family: Georgia, serif; font-weight: 400; }
.night-stage p { color: #bbc8bd; }
@keyframes quiet-spin { to { rotate: 360deg; } }
.art-secret { display: flex; align-items: flex-start; padding: 8px; left: 49px; top: 10px; width: 70px; height: 91px; border-radius: 7px; background: #f8edd8; color: #6d8260; border: 1px solid #fff8e7; box-shadow: 0 4px 0 #9eaf8a, 0 10px 15px #2e4a2929; transform: rotate(-11deg); font: 21px Georgia, serif; }
.art-secret small { position: absolute; display: grid; place-items: center; inset: 14px 0 0; font-size: 39px; }
.art-secret.night { color: #e7d398; background: #4e5762; border: 4px solid #e1d6b3; }
.art-token { display: grid; place-items: center; width: 33px; height: 33px; left: 112px; top: 63px; background: #eaca7d; color: #947334; border: 3px solid #f8dda0; border-radius: 50%; box-shadow: 0 3px 0 #ad954f, 0 6px 8px #36573519; font: 21px Georgia, serif; transform: rotate(13deg); }
.art-faces { display: grid; grid-template-columns: 1fr 1fr; left: 35px; top: 7px; width: 100px; height: 98px; gap: 7px; transform: rotate(-8deg); }
.art-faces b { display: grid; place-items: center; font-size: 31px; padding: 3px; border: 3px solid #fff7de; border-radius: 6px; background: #c2ce9f; box-shadow: 0 3px 0 #93a176, 0 6px 9px #36533420; }
.art-faces b:nth-child(2n) { background: #dabfa8; }
.art-sketch { left: 37px; top: 12px; width: 89px; height: 89px; display: grid; place-items: center; border-radius: 3px; background: repeating-linear-gradient(0deg, #fff8e8 0 14px, #d5dccc 14px 15px); color: #c88973; border: 5px solid #fff8e8; box-shadow: 1px 2px 0 #d0c9b0, 3px 4px 0 #f4ead2, 0 10px 14px #5f624320; transform: rotate(-8deg); }
.art-sketch b { font: 56px Georgia, serif; transform: rotate(10deg); }
.art-pencil { width: 10px; height: 86px; left: 123px; top: 24px; background: linear-gradient(90deg, #bd9152 0 25%, #e2bf73 25% 75%, #a57b44 75%); border-radius: 3px 3px 0 0; transform: rotate(28deg); box-shadow: 4px 4px 4px #4c60432e; }
.art-pencil::before { content: ""; position: absolute; top: -5px; width: 10px; height: 9px; background: #d59982; border-radius: 3px 3px 0 0; border-bottom: 5px solid #ced2b7; }
.art-pencil::after { content: ""; position: absolute; bottom: -13px; left: 0; width: 10px; height: 14px; background: linear-gradient(#f1dbb1 0 60%, #4f6550 60%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.art-reversi { grid-template-columns: repeat(4, 1fr); width: 101px; height: 101px; left: 35px; top: 5px; padding: 8px; background: #63815c; border-color: #94ad7d; gap: 4px; }
.art-reversi i { background: #375936; border-radius: 2px; box-shadow: none; }
.art-reversi i.light { background: #f6e8ba; border-radius: 50%; box-shadow: inset 0 -2px 0 #bdc298, 0 2px 2px #234a3333; }
.art-reversi i.dark { background: #304b3c; border-radius: 50%; box-shadow: inset 0 1px 0 #829376, 0 2px 2px #234a3355; }
.art-dotboard { width: 98px; height: 98px; left: 35px; top: 5px; border: 5px solid #f4eed9; background-color: #e6e7c9; border-radius: 6px; box-shadow: 0 4px 0 #acb391, 0 10px 16px #405b2d29; transform: rotate(-7deg); background-image: radial-gradient(#73866a 3px, transparent 3px); background-size: 39px 39px; background-position: 5px 4px; }
.art-dotboard b { position: absolute; display: grid; place-items: center; left: 26px; top: 26px; width: 37px; height: 37px; background: #d9bc72; color: #987435; font: 23px Georgia, serif; }
.art-dotboard i { position: absolute; left: 25px; top: 24px; height: 4px; width: 39px; background: #b8964d; border-radius: 3px; }
.art-dotboard i:nth-of-type(2) { top: 63px; }
.art-dotboard i:nth-of-type(3) { width: 4px; height: 41px; }
.art-dotboard i:nth-of-type(4) { left: 62px; width: 4px; height: 41px; }
@media (max-width: 1050px) {
  .room-sidebar { display: block; }
  .room-heading { align-items: flex-start; }
  .game-heading-actions { max-width: 200px; }
}
@media (max-width: 720px) {
  .online-hero-actions { width: 100%; }
  .online-hero-actions { max-width: none; }
  .online-hero-actions > small { font-size: .875rem; }
  .online-hero-actions .button { flex: 1; text-align: center; }
  .game-heading { flex-wrap: wrap; }
  .game-heading-actions { justify-content: flex-start; max-width: none; width: 100%; }
  .game-heading-actions .button { flex: 1; }
  .room-entry-heading { margin: 27px 0; text-align: left; }
  .room-entry-heading h1 { font-size: 2.2rem; letter-spacing: -1px; }
  .room-entry-heading p { margin: 0; }
  .room-entry-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .room-form { padding: 24px; }
  .room-form h2 { font-size: 1.6rem; }
  .room-entry-foot { flex-direction: column; gap: 11px; margin: 25px 10px; }
  .room-heading { flex-direction: column; align-items: stretch; gap: 21px; margin: 20px 0 25px; }
  .room-heading h1 { font-size: 2.3rem; }
  .room-code-card { align-items: flex-start; }
  .room-code-card .room-code { width: 100%; justify-content: space-between; font-size: 1.6rem; }
  .online-game-picker { grid-template-columns: minmax(0, 1fr); }
  .online-game-option { padding: 14px; min-height: 74px; }
  .online-game-option .online-game-symbol { flex-basis: 39px; width: 39px; height: 39px; font-size: 1.6rem; }
  .online-game-option strong { font-size: 1rem; }
  .room-topbar { gap: 10px; }
  .room-controls { align-items: stretch; gap: 14px; }
  .room-controls > div:first-child { flex-basis: 100%; }
  .room-match-heading { align-items: flex-start; flex-wrap: wrap; }
  .room-match-heading h2 { font-size: 1.7rem; }
  .room-match-heading .button { font-size: .875rem; }
  .room-sidebar { padding: 20px; }
  .reaction-buttons { gap: 8px; }
  .reaction-buttons button { min-height: 42px; font-size: 1.2rem; }
  .room-sidebar .room-scoreboard > div { padding: 8px 1px; }
  .room-player { min-height: 66px; }
  .player-avatar { width: 39px; height: 39px; flex-basis: 39px; font-size: 1.1rem; }
  .secret-card, .role-card { padding: 27px 20px; }
  .secret-card h2, .secret-card h3, .role-card h2, .role-card h3 { font-size: 1.8rem; }
  .player-targets, .word-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .character-card { padding: 7px 5px; border-width: 1px; }
  .character-avatar { font-size: 2rem; }
  .drawing-toolbar { gap: 13px; }
  .drawing-canvas { border-width: 5px; }
  .night-stage { padding: 20px 16px; }

  /* Readable on a phone: metadata is information, not fine print. */
  .intro, .tile-content p, .tile-meta, .lobby-note p, .note-small, footer,
  .filter, .back-link, .game-heading p, .game-heading > #restart, .button, .button.small,
  .game-status, .sub-label, .muted, .mode-row label, .mode-row select, .stat span,
  .rules-panel, .rules-foot, .ship-pill, .book, .sound-toggle, .gn-toast,
  .online-hero p, .room-form label, .room-form p, .room-form-note,
  .room-entry-foot, .room-heading p, .room-code-card > small,
  .room-topbar .text-button, .room-pill, .room-notice, .room-status,
  .room-player strong, .room-player small, .you-label, .room-badge,
  .online-game-option small, .room-controls p, .room-controls strong,
  .room-sidebar h2 > span, .room-sidebar .room-scoreboard > div,
  .reaction-feed .room-reaction small, .reaction-empty, .room-result > span,
  .connection-help, .online-rules, .phase-banner small,
  .vote-card small, .player-targets small, .word-choices small,
  .clue-list small, .drawing-toolbar label, .character-card, .attribute-chip { font-size: .875rem; }
  .tile-meta { flex-wrap: wrap; gap: 4px 10px; }
  .tile-content p { min-height: 68px; }
  .tile-content h2 { font-size: 1rem; }
  .tile-category { font-size: .625rem; letter-spacing: .8px; }
  .stat { min-width: 94px; padding: 10px; }
  .stats { gap: 8px; }
  .sound-toggle { min-height: 38px; }
}
@media (max-width: 380px) {
  .site-header { padding-left: 4%; padding-right: 4%; }
  .brand { font-size: 1.35rem; }
  .brand-mark { width: 30px; height: 30px; margin-right: 8px; }
  .sound-toggle { padding: 7px 8px; }
  .tile-content h2 { font-size: .925rem; }
  .tile-content h2 span { display: none; }
  .tile-content p { min-height: 89px; }
  .stat { min-width: 83px; padding: 9px 7px; }
  .stat span { font-size: .875rem; }
  .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The secret is in the details. */
.deduction-game { --deduction-line: #bdd0a631; }
.deduction-game h3 { color: #e6e8c9; font: 1.45rem Georgia, serif; letter-spacing: -.3px; margin-bottom: 13px; }
.deduction-game label { display: block; font-size: .9rem; color: #d6e0ba; margin: 15px 0 9px; }
.deduction-game input { margin: 0; }
.deduction-game .toolbar { margin: 18px 0 0; }
.deduction-setup { max-width: 460px; margin: 0 auto 26px; padding: 5px 0; }
.deduction-setup select { width: 100%; }
.deduction-setup .toolbar { margin-top: 25px; }
.deduction-secret { margin: 24px 0; border: 1px solid #b4c89552; border-radius: 13px; overflow: hidden; background: #244f3980; }
.deduction-secret > summary { padding: 17px 19px; color: #d9e0b9; font-size: .92rem; font-weight: 600; cursor: pointer; background: repeating-linear-gradient(45deg, #56774a12 0 5px, transparent 5px 10px); }
.deduction-secret > summary::marker { color: #cbb878; }
.deduction-secret > summary:focus-visible { outline: 3px solid #edc972; outline-offset: -4px; border-radius: 12px; }
.deduction-secret[open] > summary { border-bottom: 1px solid #b9c89d33; }
.deduction-secret .privacy-card { margin: 15px; border: 1px solid #d8ddbe; border-radius: 10px; background: #f4efda; color: #526b40; box-shadow: 0 3px 0 #99a476, 0 8px 18px #18371d26; }
.deduction-secret .privacy-card h3 { color: #546b3f; font-size: 1.9rem; }
.deduction-secret .privacy-card p { color: #7f8f6a; font-size: .95rem; }
.deduction-secret .privacy-card .muted { color: #82926b; }
.deduction-secret .privacy-card .eyebrow { color: #859568; }
.deduction-secret-word { color: #657b43; font: 2.1rem Georgia, serif; padding: 14px 0 19px; overflow-wrap: anywhere; }
.deduction-secret .privacy-card h4 { color: #6c8053; margin-bottom: 12px; }
.deduction-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0; }
.deduction-player { display: flex; align-items: center; gap: 9px; padding: 11px 12px; min-width: 0; border: 1px solid var(--deduction-line); border-radius: 10px; background: #bdd0a608; }
.deduction-player > div { min-width: 0; }
.deduction-player strong { display: block; color: #dce4bf; font-size: .875rem; overflow-wrap: anywhere; font-weight: 600; }
.deduction-player small { display: block; margin-top: 3px; color: #a4b88e; font-size: .8rem; }
.deduction-player .player-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: .875rem; border-color: #dae4bd9c; }
.deduction-player.is-you { border-color: #bccd8d69; background: #a4c08912; }
.deduction-player.eliminated { opacity: .56; background: #163b2526; }
.deduction-player.eliminated strong { text-decoration: line-through; text-decoration-color: #d2a289a3; }
.deduction-action, .deduction-voting, .deduction-chat { margin: 24px 0; padding: 22px; background: #163d2626; border: 1px solid var(--deduction-line); border-radius: 13px; }
.deduction-action > p, .deduction-voting > p { color: #bacba5; font-size: .9rem; }
.deduction-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 21px 0; }
.deduction-targets .button { background: #54734b; border-color: #9aaf795c; color: #eff0cd; border-radius: 11px; box-shadow: 0 3px 0 #163b2630; overflow-wrap: anywhere; }
.deduction-targets .button:hover:not(:disabled) { background: #6b8955; border-color: #c4d29893; }
.deduction-targets [data-target="-1"] { background: transparent; border-style: dashed; color: #c0cfaa; }
.deduction-chat-log { max-height: 250px; padding: 14px 17px; overflow-y: auto; border-radius: 9px; background: #123b2126; border: 1px solid #98b7781a; scrollbar-width: thin; scrollbar-color: #78945d transparent; }
.deduction-chat-log p { display: flex; gap: 12px; flex-wrap: wrap; font-size: .95rem; line-height: 1.55; margin: 0 0 11px; }
.deduction-chat-log p:last-child { margin: 0; }
.deduction-chat-log strong { color: #dece94; font-weight: 600; }
.deduction-chat-log span { color: #cfddb5; overflow-wrap: anywhere; }
.deduction-clues { margin: 26px 0; }
.deduction-clues ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 16px 0; list-style: none; }
.deduction-clues li { padding: 17px; border: 1px solid #c4d3a82e; border-radius: 10px; background: #d6dfb70a; }
.deduction-clues li .sub-label { display: block; color: #a7bd8c; margin: 0 0 10px; text-align: left; font-size: .8rem; letter-spacing: .4px; }
.deduction-clues li p { color: #e9e6c5; font: 1.15rem/1.5 Georgia, serif; margin: 0; overflow-wrap: anywhere; }
.deduction-history, .deduction-rules { margin-top: 20px; padding: 15px 18px; border: 1px solid var(--deduction-line); border-radius: 10px; background: #153b2321; color: #b4c69a; font-size: .875rem; line-height: 1.7; }
.deduction-history summary, .deduction-rules summary { color: #c7d5ad; font-weight: 600; cursor: pointer; }
.deduction-history summary:focus-visible, .deduction-rules summary:focus-visible { outline: 3px solid #e9c375; outline-offset: 4px; border-radius: 3px; }
.deduction-history ol { padding-left: 21px; margin-bottom: 3px; }
.deduction-history li { padding-left: 3px; margin-top: 12px; }
.deduction-history small { display: block; color: #9eb987; font-size: .875rem; }
.deduction-rules p { margin: 15px 0 0; }
.deduction-night { position: relative; margin: 24px 0; padding: 25px; border: 1px solid #93aca747; border-radius: 15px; background: radial-gradient(circle at 15% 10%, #ead49b3b 1px, transparent 2px), radial-gradient(circle at 65% 75%, #bbd6b93b 1px, transparent 2px), linear-gradient(140deg, #31434f, #254940); background-size: 83px 83px, 131px 139px, 100% 100%; text-align: center; }
.deduction-night .eyebrow { color: #b8b9a0; }
.deduction-night h3 { font-size: 1.7rem; color: #ddd2ab; margin: 12px 0; }
.deduction-night > p { color: #b9c9b5; font-size: .95rem; }
.deduction-reveal { margin: 25px auto; padding: 25px; background: #f0dda3; border: 1px solid #fae9b7; border-radius: 14px; color: #7d834b; text-align: center; box-shadow: 0 4px 0 #a7a16d, 0 11px 22px #193e2633; }
.deduction-reveal h3 { color: #697247; font-size: 2rem; margin: 12px 0; overflow-wrap: anywhere; }
.deduction-reveal p { color: #7a8454; font-size: .95rem; }
.deduction-reveal .eyebrow { color: #96935d; }
.deduction-spectator { font-size: .95rem; color: #cfbe95; padding: 13px 17px; border: 1px solid #d5bd7a52; background: #b9a26310; border-radius: 10px; }
.investigation-notebook { text-align: left; padding: 12px 16px 12px 31px; background: repeating-linear-gradient(0deg, #e0e4c48a 0 30px, #bac69c75 30px 31px); color: #74885c; border: 1px solid #ced6b4; border-radius: 7px; font-size: .9rem; line-height: 1.9; }

/* Four more reasons for one more round. */
.dots-board { display: grid; grid-template-columns: 16px 1fr 16px 1fr 16px 1fr 16px; grid-template-rows: 16px 1fr 16px 1fr 16px 1fr 16px; width: min(100%, 380px); aspect-ratio: 1; margin: 29px auto; padding: 16px; background: #e8e9c9; border: 1px solid #f8f4da; border-radius: 15px; box-shadow: 0 5px 0 #a8af87, 0 14px 25px #16392733; }
.dot-node { position: relative; z-index: 2; background: #71825e; border-radius: 50%; width: 9px; height: 9px; align-self: center; justify-self: center; box-shadow: inset 0 1px 1px #2f503047; }
.dot-edge { border: 0; padding: 0; border-radius: 20px; background: #a5b5942e; position: relative; transition: background .18s; }
.dot-edge.horizontal { height: 8px; align-self: center; }
.dot-edge.vertical { width: 8px; justify-self: center; }
.dot-edge::after { content: ""; position: absolute; inset: -8px; }
.dot-edge:hover:not(:disabled) { background: #819a6390; }
.dot-edge.owned { background: var(--seat, #759562); box-shadow: inset 0 1px 0 #fffd; opacity: 1; }
.dot-box { display: grid; place-items: center; color: #618044; font: 1.8rem Georgia, serif; border-radius: 9px; margin: 5px; }
.dot-box.claimed { background: color-mix(in srgb, var(--seat, #91b06c) 30%, #eeefd8); color: color-mix(in srgb, var(--seat, #739050) 60%, #2f4730); }
.reversi-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; width: min(100%, 490px); margin: 26px auto; padding: 10px; border: 5px solid #829775; border-radius: 13px; background: #324f37; box-shadow: 0 6px 0 #234130, 0 15px 26px #1436243b; }
.reversi-square { display: grid; place-items: center; aspect-ratio: 1; padding: 5px; min-width: 0; border: 0; border-radius: 3px; background: #608057; box-shadow: inset 0 1px 0 #abc2921f; }
.reversi-square:nth-child(16n+1), .reversi-square:nth-child(16n+3), .reversi-square:nth-child(16n+5), .reversi-square:nth-child(16n+7), .reversi-square:nth-child(16n+10), .reversi-square:nth-child(16n+12), .reversi-square:nth-child(16n+14), .reversi-square:nth-child(16n+16) { background: #56764e; }
.reversi-square:disabled { opacity: 1; cursor: default; }
.reversi-square:hover:not(:disabled) { background: #86a36a; }
.reversi-disc { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 2px 2px #ffffff30, inset 0 -3px 2px #0002, 0 3px 3px #15372155; }
.reversi-disc.dark { background: radial-gradient(circle at 35% 20%, #506354, #273d30 78%); border: 1px solid #304633; }
.reversi-disc.light { background: radial-gradient(circle at 35% 20%, #fff9da, #d9d6b5 78%); border: 1px solid #edebc8; }
.legal-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #d9dfa166; border: 1px solid #d6deb389; }
.rps-choices { display: flex; justify-content: center; gap: 16px; margin: 27px 0; }
.rps-choice { display: flex; flex-direction: column; gap: 17px; align-items: center; width: 135px; max-width: 30%; padding: 25px 14px 19px; border: 2px solid #e6ddbc; border-radius: 17px; background: #f0e9cc; color: #758751; box-shadow: 0 5px 0 #a4ad7a, 0 11px 16px #1537243b; transition: transform .2s, background .2s; }
.rps-choice > span { font-size: 3.8rem; line-height: 1.2; }
.rps-choice strong { font-size: .95rem; }
.rps-choice:hover:not(:disabled) { transform: translateY(-7px) rotate(-2deg); background: #f8e8ac; }
.rps-choice.chosen { outline: 3px solid #eed07e; outline-offset: 5px; transform: translateY(-5px); opacity: 1; }
.rps-choice:disabled:not(.chosen) { opacity: .4; }
.locked-players { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.rps-reveal { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 26px 0; }
.rps-reveal > div { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 110px; padding: 20px 17px; background: #b5c79610; border: 1px solid #b9d29d36; border-radius: 13px; }
.rps-reveal > div > span { font-size: 3.4rem; line-height: 1.5; }
.rps-reveal strong { font-size: .95rem; font-weight: 600; color: #d6e0b8; }
.rps-reveal small { text-transform: capitalize; color: #aabd91; font-size: .875rem; }
.liars-reveal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.liars-reveal > div { text-align: center; padding: 16px 13px; border-radius: 12px; background: #a6c18a0c; border: 1px solid #adc98f30; }
.liars-reveal strong { font-size: .95rem; font-weight: 500; color: #d6e1b9; }
.mini-dice { gap: 9px; margin: 17px 0 7px; flex-wrap: wrap; }
.mini-dice .die { width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 -2px 0 #d2c49f, 0 3px 0 #a99e77, 0 7px 9px #14372530; }
.mini-dice .die-pips { inset: 9px; }
.mini-dice .die-pips i { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.bid-controls { display: flex; justify-content: center; gap: 15px; margin: 22px 0; }
.bid-controls label { display: flex; flex-direction: column; gap: 9px; color: #bdcea7; font-size: .875rem; }
.bid-controls select { min-width: 130px; }
@media (max-width: 720px) {
  .deduction-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deduction-player { padding: 10px 8px; gap: 7px; }
  .deduction-player .player-avatar { width: 29px; height: 29px; flex-basis: 29px; }
  .deduction-player strong, .deduction-player small { font-size: .875rem; }
  .deduction-action, .deduction-voting, .deduction-chat { padding: 17px; }
  .deduction-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deduction-clues ol { grid-template-columns: minmax(0, 1fr); }
  .deduction-clues li .sub-label { font-size: .875rem; }
  .deduction-night { padding: 21px 17px; }
  .deduction-secret > summary { font-size: .875rem; padding: 16px; }
  .deduction-secret .privacy-card { padding: 26px 15px; margin: 10px; }
  .deduction-history, .deduction-rules { padding: 14px; }
  .dots-board { grid-template-columns: 13px 1fr 13px 1fr 13px 1fr 13px; grid-template-rows: 13px 1fr 13px 1fr 13px 1fr 13px; padding: 13px; }
  .dot-node { width: 8px; height: 8px; }
  .dot-edge.horizontal { height: 7px; }
  .dot-edge.vertical { width: 7px; }
  .reversi-board { gap: 2px; padding: 5px; border-width: 4px; }
  .reversi-square { padding: 3px; }
  .reversi-disc { box-shadow: inset 0 1px 1px #ffffff30, inset 0 -2px 1px #0002, 0 2px 2px #15372155; }
  .legal-dot { width: 6px; height: 6px; }
  .rps-choices { gap: 11px; }
  .rps-choice { padding: 20px 9px 17px; gap: 12px; border-radius: 13px; }
  .rps-choice > span { font-size: 2.6rem; }
  .rps-choice strong { font-size: .875rem; }
  .liars-reveal { grid-template-columns: minmax(0, 1fr); }
  .room-stage > .dice { flex-wrap: wrap; gap: 12px; }
  .room-stage > .dice .die { width: 55px; height: 55px; border-radius: 12px; }
  .room-stage > .dice .die-pips { inset: 12px; }
  .room-stage > .dice .die-pips i { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .bid-controls { gap: 12px; }
  .bid-controls select { min-width: 116px; }
}

/* Character clues stay readable on their paper cards, even on a small table. */
.face-finder-controls { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 25px; align-items: start; margin: 24px 0 31px; }
.face-finder-controls > .privacy-card { margin: 0; padding: 18px 13px; }
.face-finder-controls h3 { font: 1.35rem Georgia, serif; color: #e8e7c9; margin: 0 0 18px; }
.face-finder-controls .toolbar { justify-content: flex-start; align-items: flex-end; margin: 17px 0; }
.face-finder-controls .toolbar label { display: flex; flex: 1 1 220px; flex-direction: column; gap: 9px; min-width: 0; font-size: .875rem; color: #d6dfbd; }
.face-finder-controls select { width: 100%; min-width: 0; }
.face-finder-controls .toolbar .button { flex-shrink: 0; }
.character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.character-card { justify-content: flex-start; padding: 11px 8px; gap: 8px; }
.character-card:hover:not(:disabled) { transform: none; }
.character-avatar { width: min(100%, 120px); height: auto; aspect-ratio: 100 / 112; flex-shrink: 0; }
.character-card > strong { color: #45623e; font-size: .95rem; }
.character-traits { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-content: start; }
.character-traits .attribute-chip { margin: 0; padding: 3px 7px; border-color: #c8ceb0; background: #e6e7cc; color: #4e6648; font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.character-state { font-size: .75rem; color: #6f7d52; letter-spacing: .15px; }
.character-card.eliminated { opacity: .65; }
.character-card.eliminated > strong, .character-card.eliminated .character-state { color: #d6dbbc; }
.character-card.eliminated .character-traits { opacity: .7; }
.character-grid.own-identity { grid-template-columns: minmax(0, 1fr); max-width: 180px; margin: 15px auto 0; }
.question-history { display: grid; gap: 9px; list-style: none; padding: 0; margin: 15px 0 0; }
.question-history li { display: flex; justify-content: space-between; gap: 13px; border: 1px solid #afc69d38; border-radius: 9px; padding: 11px 13px; font-size: .875rem; color: #d7dfbe; background: #b9cca309; }
.question-history strong { color: #edcf8b; }
.drawing-canvas { height: auto; aspect-ratio: 5 / 3; }
.drawing-canvas[data-can-draw="false"] { cursor: default; touch-action: pan-y; }
.drawing-guesses { margin: 25px 0; padding: 18px 20px; border: 1px solid #b5c79b30; border-radius: 12px; background: #123c2526; }
.drawing-guesses h3 { font: 1.3rem Georgia, serif; color: #e1e3c2; margin: 0 0 14px; }
.drawing-guesses ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.drawing-guesses li { color: #c5d3ad; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.drawing-guesses strong { color: #e5d199; font-weight: 600; }
.room-stage .toolbar > label { min-width: 0; max-width: 100%; }
.room-stage select { max-width: 100%; }
@media (max-width: 720px) {
  .face-finder-controls { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .face-finder-controls > .privacy-card { padding: 17px; }
  .face-finder-controls .own-identity { max-width: 330px; }
  .face-finder-controls .own-character { display: grid; grid-template-columns: 83px minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .face-finder-controls .own-character .character-avatar { grid-row: 1 / 4; }
  .face-finder-controls .own-character .character-traits { grid-column: 2; }
  .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .character-card { padding: 8px 5px; gap: 7px; }
  .character-card > strong { font-size: .875rem; }
  .character-traits .attribute-chip { font-size: .75rem; padding: 3px 5px; }
  .drawing-toolbar { justify-content: flex-start; }
  .drawing-toolbar label { flex: 1 1 170px; justify-content: space-between; }
  .drawing-toolbar .button { flex: 1 1 105px; }
  .drawing-guesses { padding: 17px 14px; }
}
@media (max-width: 380px) {
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-grid.own-identity { grid-template-columns: minmax(0, 1fr); }
  .face-finder-controls .own-character { grid-template-columns: 72px minmax(0, 1fr); }
  .bid-controls { flex-wrap: wrap; }
}
/* VectorSpace: take the table offline, or choose a computer opponent. */
.brand { white-space: nowrap; font-size: 1.55rem; letter-spacing: -.8px; }
.vector-mark { transform: none; }
.vector-mark svg { width: 32px; height: 32px; fill: none; stroke: #f1d58a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vector-mark .vector-orbit { stroke: #b5cba7; stroke-width: 1.3; }
.vector-mark circle { fill: #f1d58a; stroke: none; }
.header-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 13px; border: 1px solid #c9d1bc; border-radius: 30px; color: #405c41; background: #eef0e5; text-decoration: none; font-size: .8rem; font-weight: 650; white-space: nowrap; transition: background .2s, transform .2s; }
.header-download:hover { background: #e2e9d5; transform: translateY(-1px); }
.header-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header .sound-toggle { margin-left: 0; }
.offline-banner { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 28px 30px; border: 1px solid #d5d9c3; border-radius: 22px; background: linear-gradient(120deg,#f1f0d9,#edf1e4); margin: 0 0 24px; box-shadow: 0 8px 24px #314d2c06; }
.offline-symbol { display: grid; place-items: center; width: 64px; height: 64px; color: #537047; border: 1px solid #c9d2b5; border-radius: 20px; background: #e2e8cc; font: 2.1rem Georgia,serif; box-shadow: inset 0 1px 0 #fffd,0 3px 0 #c6d0b5; }
.offline-banner .eyebrow { font-size: .64rem; letter-spacing: 1.8px; color: #6f7d55; }
.offline-banner h2 { margin: 8px 0 10px; color: #2e523d; font: 1.75rem Georgia,serif; letter-spacing: -.5px; }
.offline-banner p { color: #65735c; font-size: .87rem; line-height: 1.7; max-width: 510px; margin: 0; }
.offline-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.offline-actions .button { white-space: nowrap; }
.offline-actions .text-button { color: #577148; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.offline-actions small { color: #798468; font-size: .73rem; }
.play-style-bar { display: flex; gap: 18px; justify-content: space-between; align-items: center; margin: 30px 0 0; padding-bottom: 20px; border-bottom: 1px solid #dedfce; }
.play-style-bar > .eyebrow { font-size: .65rem; letter-spacing: 1.5px; }
.play-style-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #e9ecdd; border: 1px solid #d6dcc7; border-radius: 28px; }
.play-style-filter { border: 0; background: transparent; border-radius: 22px; color: #718061; padding: 10px 17px; font-size: .8rem; font-weight: 650; transition: background .18s,color .18s; }
.play-style-filter:hover { color: #345b3b; background: #f4f5e7; }
.play-style-filter.active { color: #f8f4dc; background: #395f45; box-shadow: 0 3px 7px #24492f20; }
.empty-library { text-align: center; padding: 50px 20px; color: #6e7d60; }
.cpu-mode { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #d1dfb72e; }
.cpu-state { font-size: .85rem; color: #d6dfbf; }
.offline-room-notice { max-width: 840px; text-align: center; padding-bottom: 80px; }
.offline-room-notice > .back-link { display: block; text-align: left; margin-bottom: 45px; }
.offline-room-notice h1 { font: clamp(2rem,4vw,3.5rem) Georgia,serif; color: #2d503e; margin: 18px 0; }
.offline-room-notice p { color: #69765f; line-height: 1.8; max-width: 560px; margin: 0 auto 28px; }
@media (max-width: 1000px) {
  .offline-banner { grid-template-columns: 52px minmax(0,1fr); gap: 19px; }
  .offline-symbol { width: 52px; height: 52px; border-radius: 16px; }
  .offline-actions { grid-column: 2; align-items: flex-start; }
  .offline-actions small { display: none; }
  .site-header .header-note { display: none; }
  .header-download { margin-left: auto; }
}
@media (max-width: 720px) {
  .brand { font-size: 1.18rem; letter-spacing: -.5px; }
  .vector-mark svg { width: 26px; height: 26px; }
  .header-download { padding: 7px 9px; font-size: .72rem; }
  .site-header { gap: 7px; }
  .offline-banner { grid-template-columns: 38px minmax(0,1fr); padding: 21px 18px; gap: 15px; border-radius: 17px; }
  .offline-symbol { width: 38px; height: 42px; border-radius: 12px; font-size: 1.5rem; }
  .offline-banner h2 { font-size: 1.45rem; line-height: 1.2; }
  .offline-banner p { font-size: .82rem; }
  .offline-actions { grid-column: 1 / -1; align-items: stretch; text-align: center; }
  .offline-actions .button { white-space: normal; font-size: .83rem; }
  .offline-banner.is-local > .button { grid-column: 1 / -1; }
  .play-style-bar { display: block; margin-top: 24px; }
  .play-style-filters { display: flex; margin-top: 13px; border-radius: 22px; }
  .play-style-filter { flex: 1; padding: 10px 8px; font-size: .74rem; white-space: nowrap; }
  .browse-bar { align-items: flex-start; }
  .game-count { white-space: normal; font-size: .72rem; }
}
@media (max-width: 380px) {
  .header-download span { display: none; }
  .header-download { width: 34px; padding: 7px; }
  .brand { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .site-header .sound-toggle { width: 34px; min-width: 34px; padding: 7px; }
  .site-header .sound-toggle span { display: none; }
}