:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4efe5;
  color: #153b36;
  --ink: #153b36;
  --muted: #6a7971;
  --line: #d9d2c4;
  --cream: #f4efe5;
  --paper: #fffdf8;
  --green: #123f38;
  --green-soft: #dcebe3;
  --gold: #bd8b45;
  --shadow: 0 20px 50px rgba(35, 50, 44, .13);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 15% 0%, #fffaf0, var(--cream) 45%, #e9e3d7); }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.app-shell { max-width: 1240px; margin: 0 auto; padding: 30px 22px 24px; }
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; font-weight: 800; color: var(--gold); }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.025em; }
h1 { max-width: 680px; font-size: clamp(32px, 5vw, 62px); line-height: .98; }
h2 { font-size: clamp(24px, 3vw, 38px); }
.topbar-actions { display: flex; align-items: end; gap: 12px; }
.layout-picker { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
select, .icon-button, .controls button, .learn-card a { border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 253, 248, .8); color: var(--ink); padding: 10px 14px; }
.icon-button { white-space: nowrap; }
.game-card, .learn-card { border: 1px solid rgba(217, 210, 196, .9); border-radius: 24px; background: rgba(255, 253, 248, .86); box-shadow: var(--shadow); }
.game-card { padding: 18px; }
.game-toolbar { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 8px 8px 18px; }
.status-pill { display: inline-flex; border-radius: 999px; padding: 6px 10px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.status-won { background: #f4e5b9; color: #6f4e1e; }
.status-lost { background: #f5d9cf; color: #824d40; }
.message { margin: 8px 0 0; color: var(--muted); }
.stats { display: flex; gap: 18px; text-align: right; }
.stats div { display: grid; gap: 2px; }
.stats span { font-size: 22px; font-weight: 800; color: var(--ink); }
.stats small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.board-wrap { position: relative; overflow: hidden; border-radius: 18px; background: #1b574a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.board { position: relative; width: 100%; max-width: 820px; min-width: 0; margin: 0 auto; aspect-ratio: 34 / 30; background: radial-gradient(circle at 50% 42%, #2c7866, #16493f); }
.board::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(247, 231, 192, .3); border-radius: 12px; pointer-events: none; }
.board-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff8e9; font-weight: 700; }
.board-loading[hidden] { display: none; }
.tile, .tile-space { position: absolute; }
.tile { touch-action: manipulation; -webkit-tap-highlight-color: transparent; display: grid; place-items: center; padding: 2px; border: 1px solid #b8a783; border-radius: 8px; background: linear-gradient(145deg, #fffdf5, #e8dfc8); color: #274a42; box-shadow: 4px 4px 0 rgba(8, 39, 34, .3), 0 1px 4px rgba(0,0,0,.18); font-family: Georgia, serif; font-size: clamp(8px, 2.2vw, 16px); font-weight: 800; text-align: center; line-height: 1.05; transition: transform .15s, box-shadow .15s, filter .15s; }
.tile::after { content: ""; width: 42%; aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; opacity: .42; }
.tile-available:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 rgba(8, 39, 34, .3), 0 2px 8px rgba(0,0,0,.18); }
.tile-blocked { filter: saturate(.55) brightness(.87); }
.tile-selected { outline: 3px solid #d6a24e; outline-offset: 1px; }
.tile-hinted { animation: pulse 1s ease-in-out infinite alternate; outline: 3px solid #f6ca6d; outline-offset: 1px; }
.tile-suit { color: #1d5b4f; }
.tile-bams { color: #2b744a; }
.tile-craks { color: #a0493d; }
.tile-dots { color: #2d5792; }
.tile-wind, .tile-dragon { color: #713b70; }
.tile-flower { color: #aa6b33; }
.tile-joker { color: #86612a; background: linear-gradient(145deg, #fff4ca, #e6bd62); }
@keyframes pulse { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 8px 4px; }
.controls button { font-weight: 700; }
.controls button:not(:disabled):hover, .learn-card a:hover { border-color: var(--gold); background: #fff8e5; }
.primary-button { border-color: var(--green) !important; background: var(--green) !important; color: #fffdf8 !important; }
.controls button:disabled { opacity: .45; }
.learn-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px; margin-top: 20px; }
.learn-card p { max-width: 700px; color: var(--muted); line-height: 1.6; }
.learn-card a { color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 700; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px 0; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
  .app-shell { padding: 20px 12px; }
  .topbar, .game-toolbar, .learn-card, footer { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .stats { width: 100%; justify-content: space-between; text-align: left; }
  .board { width: 100%; min-width: 0; }
  .board-wrap { margin-right: 0; border-radius: 14px; }
  .learn-card a { width: 100%; text-align: center; }
}



.tile { overflow: hidden; }
.tile::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  border-top: 2px solid rgba(255,255,255,.78);
  border-left: 1px solid rgba(255,255,255,.42);
  pointer-events: none;
}
.tile::after { content: none; }
.tile-art {
  display: block;
  width: 88%;
  height: 90%;
  overflow: visible;
  pointer-events: none;
}
.tile-rank {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 900;
}
.tile-family {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: .08em;
}
.tile-glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 800;
}
.board {
  isolation: isolate;
  transition: background .35s ease;
}
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: screen;
}
.board-turtle::after {
  background-image: radial-gradient(rgba(247,231,192,.25) 1px, transparent 1px);
  background-size: 18px 18px;
}
.board-easy {
  background: radial-gradient(circle at 20% 15%, #3c8b75, #175246 68%, #103d36);
}
.board-easy::after {
  background-image: linear-gradient(135deg, rgba(247,231,192,.18) 12%, transparent 12%, transparent 50%, rgba(247,231,192,.18) 50%, rgba(247,231,192,.18) 62%, transparent 62%);
  background-size: 28px 28px;
}
.board-classic {
  background: radial-gradient(circle at 50% 30%, #2f7c67, #123f38 72%);
}
.board-classic::after {
  background-image: linear-gradient(90deg, rgba(247,231,192,.16) 1px, transparent 1px), linear-gradient(rgba(247,231,192,.16) 1px, transparent 1px);
  background-size: 34px 34px;
}
.board-four-winds {
  background: radial-gradient(circle at 50% 50%, #2e7f70, #113e42 70%);
}
.board-four-winds::after {
  background: conic-gradient(from 45deg, rgba(246,202,109,.28), transparent 25%, rgba(246,202,109,.18) 25%, transparent 50%, rgba(246,202,109,.28) 50%, transparent 75%);
}
.board-liberty-star {
  background: radial-gradient(circle at 50% 50%, #4a7c90, #173e52 72%);
}
.board-liberty-star::after {
  background: repeating-conic-gradient(from 0deg, rgba(246,202,109,.24) 0deg 12deg, transparent 12deg 36deg);
}
.board-butterfly {
  background: radial-gradient(ellipse at 24% 48%, #5f8e79 0 16%, transparent 42%), radial-gradient(ellipse at 76% 48%, #8b6f85 0 16%, transparent 42%), #214f4d;
}
.board-butterfly::after {
  background: radial-gradient(ellipse at 28% 50%, rgba(247,231,192,.35) 0 2%, transparent 2.5% 24%, rgba(247,231,192,.22) 24.5% 26%, transparent 26.5%), radial-gradient(ellipse at 72% 50%, rgba(247,231,192,.35) 0 2%, transparent 2.5% 24%, rgba(247,231,192,.22) 24.5% 26%, transparent 26.5%);
}
.board-garden-gate {
  background: linear-gradient(90deg, #1b574a 0 13%, #2f806b 13% 18%, #1b574a 18% 82%, #2f806b 82% 87%, #1b574a 87%);
}
.board-garden-gate::after {
  background-image: linear-gradient(90deg, transparent 0 14%, rgba(246,202,109,.35) 14% 15%, transparent 15% 85%, rgba(246,202,109,.35) 85% 86%, transparent 86%);
}
.board-hourglass {
  background: linear-gradient(135deg, #1b4c5d 0 25%, #315f78 25% 50%, #1b4c5d 50% 75%, #315f78 75%);
}
.board-hourglass::after {
  background: linear-gradient(45deg, transparent 48%, rgba(246,202,109,.34) 49% 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(246,202,109,.2) 49% 51%, transparent 52%);
}
.board-crescent {
  background: radial-gradient(ellipse at 28% 48%, rgba(246,202,109,.35) 0 17%, transparent 18% 28%, rgba(246,202,109,.18) 29% 31%, transparent 32%), radial-gradient(circle at 68% 42%, #315f78, #173e52 70%);
}
.board-crescent::after {
  background: radial-gradient(ellipse at 28% 48%, transparent 0 14%, rgba(246,202,109,.45) 15% 17%, transparent 18% 100%);
}

/* American Classic tile pass: porcelain face, printed glyphs, and visible side depth. */
.tile {
  isolation: isolate;
  overflow: visible;
  border-color: #a9946d;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), transparent 25%),
    linear-gradient(155deg, #fffdf5 0%, #f4e9ce 62%, #dfcfab 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(152,126,77,.28),
    0 3px 0 #ad9568,
    0 5px 0 rgba(73, 55, 30, .44),
    0 8px 10px rgba(7, 31, 27, .22);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 2px -3px -5px 2px;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(160deg, #d8c393, #a98a55);
  border: 1px solid rgba(91, 67, 28, .55);
  pointer-events: none;
}
.tile-available:hover {
  transform: translate(-1px, -3px) rotate(-.4deg);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    0 4px 0 #ad9568,
    0 7px 0 rgba(73, 55, 30, .44),
    0 12px 16px rgba(7, 31, 27, .28);
}
.tile-selected {
  outline: 3px solid #f3c55c;
  box-shadow:
    0 0 0 5px rgba(243,197,92,.25),
    0 4px 0 #ad9568,
    0 9px 16px rgba(243,197,92,.28);
}
.tile-blocked {
  filter: saturate(.58) brightness(.84);
}
.board-dragon {
  background:
    radial-gradient(ellipse at 22% 26%, rgba(222, 174, 86, .24), transparent 22%),
    radial-gradient(ellipse at 72% 68%, rgba(99, 173, 144, .3), transparent 30%),
    linear-gradient(135deg, #163d43, #214f4d 45%, #102f39);
}
.board-dragon::after {
  opacity: .28;
  background:
    repeating-linear-gradient(25deg, transparent 0 18px, rgba(243,199,103,.2) 19px 20px, transparent 21px 36px),
    radial-gradient(circle at 20% 30%, rgba(243,199,103,.55) 0 1px, transparent 2px);
  background-size: auto, 24px 24px;
}
.board-pagoda {
  background:
    linear-gradient(180deg, rgba(244,211,133,.22) 0 2px, transparent 2px 24px),
    radial-gradient(circle at 50% 38%, #397e69, #173f3b 72%);
}
.board-pagoda::after {
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(243,199,103,.3) 12% 13%, transparent 13% 87%, rgba(243,199,103,.3) 87% 88%, transparent 88%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(243,199,103,.12) 25px 26px);
}
.tile-art {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
@media (max-width: 700px) {
  .game-card { padding: 10px; }
  .board-wrap { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 30px rgba(17,56,49,.2); }
  .tile { border-radius: 6px; }
  .tile::after { border-radius: 6px; }
  .tile-rank { font-size: 13px; }
  .tile-family { font-size: 6px; }
  .tile-glyph { font-size: 31px; }
}

.skin-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
  padding: 24px 26px;
  border: 1px solid rgba(217, 210, 196, .9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 20%, rgba(218, 193, 135, .2), transparent 32%),
    rgba(255, 253, 248, .86);
  box-shadow: var(--shadow);
}
.skin-preview h2 { max-width: 540px; }
.skin-preview p:not(.eyebrow) { max-width: 660px; color: var(--muted); line-height: 1.55; }
.skin-samples {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-right: 8px;
}
.sample-group {
  display: grid;
  justify-items: center;
  gap: 7px;
}
.sample-tile {
  position: relative;
  width: 78px;
  height: 104px;
  padding: 5px;
  pointer-events: none;
}
.sample-tile .tile-art {
  width: 100%;
  height: 100%;
}
.sample-caption {
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tile-art-american-classic {
  overflow: visible;
}
.tile-corner-number,
.tile-corner-word {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
}
.tile-face-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}
.tile-crak-number {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 700;
}
.tile-crak-character {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 33px;
  font-weight: 700;
}
.tile-dragon-character {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 800;
}
@media (max-width: 700px) {
  .skin-preview {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .skin-samples {
    justify-content: center;
    padding-right: 0;
  }
  .sample-tile {
    width: 72px;
    height: 96px;
  }
}

/* Launch skin: use the reviewed vector tile itself, without placeholder circles. */
.site-nav {max-width:1240px;margin:auto;padding:18px 22px;display:flex;gap:24px;align-items:center;border-bottom:1px solid #ddd6c8;}
.site-nav a {color:#153b36;text-decoration:none;font-weight:700;}
.site-nav a:first-child {margin-right:auto;font-family:Georgia,serif;font-size:28px;}
.tile {padding:0;border:0;background:none;box-shadow:none;}
.tile::after {display:none;}
.tile .tile-art {display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;}
.tile-available:hover {box-shadow:none;}
.tile-blocked {filter:brightness(.88) saturate(.85);}
.tile:focus-visible {outline:3px solid #fff;outline-offset:1px;}
@media (max-width:700px) {.app-shell {padding:16px 8px;}.game-card {padding:5px;}.topbar h1 {font-size:32px;}.board-wrap {overflow-x:auto;}.board {min-width:0;}.board-wrap.zoomed .board {min-width:640px;}.board::before {inset:3px;}.controls {position:sticky;bottom:0;z-index:200;background:#fffdf8;padding:12px 8px;}.controls button {min-height:44px;}.stats {gap:8px;}.skin-samples {flex-wrap:wrap;}}
@media (prefers-reduced-motion:reduce) {.tile {transition:none;}.tile-hinted {animation:none;}}