@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;600;700&display=swap');

/* Dou Shou Qi board. Keep every rule inside .game11. */
.game11 {
  --dsq-ink: #241a10;
  --dsq-cream-hi: #f3e5c0;
  --dsq-cream-lo: #dcc79a;
  --dsq-gold: #b8781f;
  --dsq-red: #b94a36;
  color: #3a2a17;

  /* Noto Serif, for the carved-wood look, on the game panel only. The chat,
   * the rules page and the site chrome stay on the site font, because
   * .game11 is the panel body and nothing outside it is affected.
   *
   * The family sits on the container rather than on the title alone, so the
   * help lines, the seat list and the turn label are set in the same face as
   * the title they sit under. Only the title carries its own size and weight.
   *
   * <bg-user> keeps the site-wide monospace player name, the same as on every
   * other board, and Bootstrap already makes form controls inherit. */
  font-family: "Noto Serif", Georgia, serif;
}

.game11 .dsq-game-title {
  margin: 0 0 12px;
  color: #5d3f1c;
  font-weight: 700;
  letter-spacing: .035em;
  text-align: center;
}

.game11 .dsq-players {
  margin-bottom: 14px;
}
.game11 .dsq-seat {
  margin-right: 8px;
}
.game11 .dsq-seat.s1 {
  color: #2b1e10;
  background: linear-gradient(#fff4d5, #c89c59);
  box-shadow: inset 0 0 0 1px rgba(43, 30, 16, .3);
}
.game11 .dsq-seat.s2 {
  color: #f3e5c0;
  background: linear-gradient(#b98a52, #573615);
  box-shadow: inset 0 0 0 1px rgba(36, 26, 16, .45);
}
.game11 .dsq-me { box-shadow: inset 3px 0 #b8781f; }
.game11 .dsq-turn { background: #fff8e8; }
.game11 .dsq-turn-label {
  margin-left: 8px;
  color: #765016;
  font-size: 12px;
}
.game11 .dsq-help {
  margin: 8px 0 12px;
  text-align: center;
}

.game11 .dsq-tray {
  width: min(100%, 620px);
  margin: 12px auto 18px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(#efdfb6, #dcc79a 55%, #c0a675);
  box-shadow: 0 6px 14px rgba(70, 50, 20, .40),
              inset 0 2px 0 rgba(255, 250, 235, .75),
              inset 0 -3px 6px rgba(90, 60, 20, .35);
}

.game11 .dsq-board {
  display: grid;
  width: 100%;
  aspect-ratio: 7 / 9;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 1.5px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--dsq-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}

.game11 .dsq-cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(150, 110, 60, .07) 0 1px, transparent 1px 7px),
    linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}
.game11 a.dsq-cell:focus-visible {
  z-index: 4;
  outline: 3px solid #b8781f;
  outline-offset: -3px;
}
.game11 a.dsq-cell.movable { cursor: pointer; }
.game11 .dsq-cell.river {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23241a10' stroke-width='1.2' opacity='.85'%3E%3Cpath d='M-8 5 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 14 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 23 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 32 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 41 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 50 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3Cpath d='M-8 59 q8 -3.5 16 0 t16 0 t16 0 t16 0 t16 0 t16 0'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(#e9dfc0, #dcd2ae);
}
.game11 .dsq-cell.trap {
  background: linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}
.game11 .dsq-cell.trap::before {
  position: absolute;
  inset: 3px;
  border: 1.5px solid rgba(36, 26, 16, .85);
  content: "";
}
.game11 .dsq-cell.trap::after {
  position: absolute;
  inset: 7px;
  border: 1.2px solid rgba(36, 26, 16, .55);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg transform='scale(1, -1) translate(0, -1000)' fill='%23241a10'%3E%3Cpath d='M464 705V527H204L212 498H423C380 361 303 236 193 143L205 127C323 206 408 307 464 427V68H476C500 68 526 83 526 91V489C573 335 653 213 755 142C764 170 783 187 808 190L809 200C701 253 600 367 545 498H773C786 498 796 503 798 514C767 543 716 582 716 582L673 527H526V669C551 672 560 682 563 695ZM100 773V-79H112C141 -79 165 -62 165 -53V-8H832V-70H842C866 -70 897 -52 898 -45V732C917 736 934 744 941 752L860 816L822 773H171L100 807ZM832 22H165V744H832Z'/%3E%3C/g%3E%3C/svg%3E") center / 65% no-repeat;
  content: "";
}
.game11 .dsq-cell.den {
  background: linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}
.game11 .dsq-cell.den::after {
  position: absolute;
  inset: 27%;
  border: 2.5px solid rgba(36, 26, 16, .9);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 26, 16, .92) 0 34%, transparent 36%);
  content: "";
}

.game11 .dsq-cell.selected {
  z-index: 2;
  box-shadow: inset 0 0 0 3px #d97a1c;
  background-image:
    radial-gradient(circle, rgba(255, 196, 90, .55), rgba(255, 196, 90, 0) 72%),
    linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}
.game11 .dsq-cell.target {
  z-index: 2;
  box-shadow: inset 0 0 0 2px var(--dsq-gold);
  background-image:
    radial-gradient(circle, rgba(255, 214, 140, .4), rgba(255, 214, 140, 0) 75%),
    linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}
.game11 .dsq-cell.capture {
  box-shadow: inset 0 0 0 2px var(--dsq-red);
  background-image:
    radial-gradient(circle, rgba(233, 90, 60, .32), rgba(233, 90, 60, 0) 75%),
    linear-gradient(var(--dsq-cream-hi), var(--dsq-cream-lo));
}

.game11 .dsq-token {
  position: absolute;
  z-index: 1;
  inset: 8%;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fdf6de 0%, #f0e0b6 38%, #d8bd8a 68%, #b9955a 90%, #9a7535 100%);
  box-shadow: inset 0 -6px 10px rgba(70, 40, 5, .4),
              inset 0 4px 8px rgba(255, 250, 235, .5),
              inset 0 0 0 2px rgba(255, 255, 255, .14),
              0 5px 8px rgba(26, 16, 6, .45);
}
.game11 .dsq-token::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 36% 28%, rgba(120, 75, 25, .13) 0 1px, rgba(255, 250, 225, .07) 1px 3px),
    repeating-linear-gradient(97deg, rgba(255, 235, 200, .1) 0 2px, transparent 2px 7px);
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
}
.game11 .dsq-token.s2 {
  background: radial-gradient(circle at 34% 28%, #b98a52 0%, #9a6c38 40%, #7d5426 72%, #5d3a17 92%, #4a2d11 100%);
  box-shadow: inset 0 -6px 10px rgba(30, 15, 0, .5),
              inset 0 4px 8px rgba(230, 200, 150, .28),
              inset 0 0 0 2px rgba(255, 255, 255, .1),
              0 5px 8px rgba(20, 10, 2, .5);
  --face: #e6d0a4;
  --feat: #55381a;
  --cutf: #c9a86a;
  --pip: #4a3116;
}
.game11 .dsq-token.s1 {
  --face: #2b1e10;
  --feat: #cbb084;
  --cutf: #ead9b6;
  --pip: #efdcb4;
}
.game11 .dsq-head {
  position: absolute;
  z-index: 1;
  inset: 14%;
}
.game11 .dsq-head svg { width: 100%; height: 100%; }
.game11 .dsq-head svg g {
  fill: var(--face);
  stroke: var(--face);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.game11 .dsq-head svg .eng { fill: var(--feat); }
.game11 .dsq-head svg .cut { fill: var(--cutf); }
.game11 .dsq-head svg .wl { fill: none; stroke: var(--feat); stroke-linecap: round; }
.game11 .dsq-head svg .ln { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.game11 .dsq-head svg .st { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.game11 .dsq-token .pip {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 3%;
  left: 0;
  color: var(--pip);
  font-size: clamp(7px, 1.2vw, 10px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

@media (max-width: 480px) {
  .game11 .dsq-tray { padding: 6px; }
  .game11 .dsq-board { gap: 1px; }
  .game11 .dsq-cell.trap::before { inset: 2px; }
  .game11 .dsq-cell.trap::after { inset: 5px; }
}