.sn-arcade { min-width: 0; }
.sn-arcade-hero {
  padding: clamp(18px, 4vw, 34px);
  margin-bottom: 20px;
  border: 1px solid #c9e3e8;
  border-radius: 16px;
  background: linear-gradient(115deg, #e1f3f6, #fff2ef);
  color: #174d5e;
}
.sn-arcade h1, .sn-arcade h2, .sn-arcade h3 { margin: 0 0 8px; color: #113f50; }
.sn-arcade h1 { font-size: clamp(26px, 4vw, 40px); }
.sn-arcade h2 { font-size: 19px; }
.sn-arcade p { margin: 0 0 10px; line-height: 1.55; }
.sn-arcade p:last-child { margin-bottom: 0; }
.sn-arcade-catalog, .sn-game-layout { display: grid; gap: 16px; align-items: start; }
.sn-arcade-catalog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); align-items: stretch; }
.sn-game-layout { grid-template-columns: minmax(0, 1.6fr) minmax(190px, 1fr); }
.sn-game-card, .sn-game-box, .sn-game-ranking, .sn-game-upload {
  border: 1px solid #c9dde3;
  border-radius: 14px;
  background: #fff;
}
.sn-game-card { overflow: hidden; display: flex; flex-direction: column; }
.sn-game-card img, .sn-game-intro img { width: 100%; height: auto; display: block; }
.sn-game-card-body, .sn-game-box, .sn-game-ranking, .sn-game-upload { padding: 16px; }
.sn-game-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.sn-game-card-body > a { margin-top: auto; }
.sn-game-genre { color: #416775; font-weight: 700; font-size: 12px; }
.sn-game-upload { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sn-game-upload button:disabled { opacity: .64; cursor: default; }
.sn-games-back { display: inline-block; margin: 0 0 12px; }
.sn-game-intro { display: grid; grid-template-columns: minmax(115px, 195px) 1fr; gap: 20px; align-items: center; }
.sn-game-intro img { border-radius: 10px; }
.sn-game-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#sn-game-score { color: #124e64; font-weight: bold; }
.sn-game-ranking table { border-collapse: collapse; text-align: left; width: 100%; margin-bottom: 12px; }
.sn-game-ranking th, .sn-game-ranking td { padding: 7px 5px; border-bottom: 1px solid #e0edf0; overflow-wrap: anywhere; }
.sn-game-ranking th:last-child, .sn-game-ranking td:last-child { text-align: right; }
.sn-pairs, .sn-numbers, .sn-sequence { display: grid; gap: 8px; }
.sn-pairs { grid-template-columns: repeat(4, 1fr); }
.sn-numbers, .sn-sequence { grid-template-columns: repeat(2, 1fr); }
.sn-numbers h3, .sn-numbers p { grid-column: 1 / -1; }
.sn-numbers h3 { font-size: 26px; }
.sn-tile {
  min-height: 53px; line-height: 1.1; font-family: inherit;
  font-size: 23px; font-weight: 700; border: 1px solid #a7ced8; border-radius: 10px;
  background: #e5f5f8; color: #155568; cursor: pointer;
}
.sn-tile:not(:disabled):hover { border-color: #086680; box-shadow: inset 0 0 0 2px #ffffffa0; }
.sn-tile:focus-visible { outline: 3px solid #0f6782; outline-offset: 2px; }
.sn-tile[data-face="0"], .sn-pad-0 { background: #ffd2e3; color: #862653; }
.sn-tile[data-face="1"], .sn-pad-1 { background: #b9eee4; color: #176557; }
.sn-tile[data-face="2"], .sn-pad-2 { background: #ffd5bb; color: #883916; }
.sn-tile[data-face="3"], .sn-pad-3 { background: #e9d9ff; color: #5b4185; }
.sn-tile[data-face="4"] { background: #fff1ba; color: #745421; }
.sn-tile[data-face="5"] { background: #cce7ff; color: #2e578e; }
.sn-pad { min-height: 68px; }
.sn-pad.sn-lit { box-shadow: inset 0 0 0 4px currentColor; }
@media (max-width: 760px) { .sn-game-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sn-game-intro { grid-template-columns: 1fr; } }

.sn-duel button, .sn-duel select {
  border: 1px solid #a9cad3;
  border-radius: 7px;
  background: #e6f4f7;
  color: #144b5e;
  padding: 6px 9px;
  font: inherit;
}
.sn-duel button:not(:disabled) { cursor: pointer; }
.sn-duel button:disabled { opacity: .65; }
.sn-duel button:focus-visible { outline: 3px solid #125b72; outline-offset: 2px; }
.sn-duel details { margin-top: 14px; }
.sn-duel details p { margin-top: 8px; }
.sn-duel #sn-duel-leave { margin-top: 12px; }
.sn-duel #sn-duel-status { font-weight: 700; }
.sn-duel #sn-duel-rooms button, .sn-duel #sn-duel-requests button { margin: 2px 5px 2px 0; }
/* The board fills its panel. The ranking uses the remaining space beside it. */
.sn-duel[data-duel="checkers"] {
  grid-template-columns: minmax(0, 760px) minmax(220px, 1fr);
}
.sn-checkerboard {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  width: 100%;
  border: 5px solid #174b60;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 4px 12px #0b334528;
}
.sn-checkerboard .sn-square {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 1;
  background: #e6f2f2;
}
.sn-checkerboard .sn-dark { background: #34728a; }
.sn-checkerboard .sn-square-active { box-shadow: inset 0 0 0 3px #ffe396; }
.sn-destination::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe396;
}
.sn-checker-piece {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid var(--checker-edge);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, var(--checker-light), var(--checker-face) 63%, var(--checker-edge));
  color: var(--checker-ink);
  font: 700 clamp(14px, 3vw, 33px)/1 sans-serif;
  box-shadow: inset 0 1px 2px #fff9, inset 0 -3px 4px #0004, 0 3px 0 var(--checker-edge), 0 5px 5px #00213188;
}
.sn-checker-piece::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid var(--checker-edge);
  border-radius: 50%;
  box-shadow: 0 1px 1px #fff7, inset 0 1px 1px #0002;
}
.sn-coral-piece { --checker-light:#ffe0e3; --checker-face:#f58a9a; --checker-edge:#a44661; --checker-ink:#69253f; }
.sn-teal-piece { --checker-light:#d4fff1; --checker-face:#6bcdb9; --checker-edge:#26786d; --checker-ink:#174f50; }
@media (max-width: 900px) {
  .sn-duel[data-duel="checkers"] { grid-template-columns: minmax(0,1fr); }
}
.sn-domino-chain, .sn-domino-hand { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 0; }
.sn-domino-chain { background: #eaf6f4; border-radius: 9px; padding: 12px; margin-bottom: 12px; }
.sn-domino-tile {
  display: inline-flex; background: #fff7e7; color: #20475a; border: 1px solid #bcb39e;
  border-radius: 5px; font-weight: 700; overflow: hidden;
}
.sn-domino-tile > span { min-width: 20px; padding: 5px 4px; text-align: center; }
.sn-domino-tile > span + span { border-left: 1px solid #bcb39e; }
.sn-domino-hand > div { display: flex; flex-direction: column; gap: 4px; }