/* ===== 盤面の骨格（640×640。配色・形・フォント・背景はすべて変数とクラスで切り替える） ===== */
  .board { position: relative; width: var(--W, 640px); height: var(--H, 640px); overflow: hidden; border-radius: 22px; flex: none;
    background-color: var(--bg); color: var(--ink); box-shadow: 0 10px 30px rgba(40, 20, 80, .18); }
  .bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bg-img.dim-mid { opacity: .6; } .bg-img.dim-light { opacity: .35; }
.koma img { width: 100%; height: 100%; object-fit: contain; border-radius: 22%; display: block; }
.board svg.path { position: absolute; inset: 0; width: 100%; height: 100%; }
.board svg.arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.short-arrow { fill: var(--stop-bg); stroke: var(--stop-ink); stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.short-tag { fill: var(--stop-bg); stroke: var(--stop-ink); stroke-width: 1.5; }
.short-text { fill: var(--stop-ink); font-family: var(--f-masu); font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.arrow { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
  .head { position: absolute; left: 16px; right: 16px; top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .title { font-family: var(--f-title); font-size: var(--title-size, 33px); line-height: 1.05; color: var(--title-ink);
    text-shadow: 2px 2px 0 var(--title-edge), -2px -2px 0 var(--title-edge), 2px -2px 0 var(--title-edge), -2px 2px 0 var(--title-edge),
      0 3px 0 var(--title-edge), 3px 0 0 var(--title-edge), -3px 0 0 var(--title-edge), 0 -3px 0 var(--title-edge), var(--title-glow, 0 0 0 transparent); }
  .title small { display: block; font-family: var(--f-masu); font-size: 13px; letter-spacing: .1em; margin-bottom: 5px; color: var(--sub-ink); text-shadow: none; }
  .price { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-family: var(--f-masu); font-size: 12.5px; font-weight: 800; }
  .price span { padding: 3px 11px; border-radius: 999px; white-space: nowrap; background: var(--chip-bg); color: var(--chip-ink); border: 1.5px solid var(--chip-edge); }
  .masu { --tc: var(--plain); position: absolute; width: var(--m, 82px); height: var(--m, 82px); margin: calc(var(--m, 82px) / -2) 0 0 calc(var(--m, 82px) / -2); display: grid; place-items: center;
    text-align: center; font-family: var(--f-masu); font-size: var(--fs, 12.5px); line-height: 1.18; font-weight: 800; padding: 2px; white-space: pre-line; color: var(--masu-ink); }
  .masu.move { --tc: var(--move); } .masu.batsu { --tc: var(--batsu); } .masu.voice { --tc: var(--voice); } .masu.gift { --tc: var(--gift); }
  .masu .ic { display: block; font-size: 1.15em; line-height: 1; margin-bottom: 2px; }
  .masu.big { --b: calc(var(--m, 82px) * 1.06); width: var(--b); height: var(--b); margin: calc(var(--b) / -2) 0 0 calc(var(--b) / -2); font-family: var(--f-title); font-weight: 400; font-size: calc(var(--m, 82px) * .21); z-index: 2; }
  .masu.stop { z-index: 2; }
  .koma { position: absolute; width: calc(var(--m, 82px) * .5); height: calc(var(--m, 82px) * .5); margin: calc(var(--m, 82px) * -.62) 0 0 calc(var(--m, 82px) * .12); z-index: 5;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); transition: left .2s ease, top .2s ease; pointer-events: none; }
  .koma.hop { animation: koma-hop .22s ease; }
  @keyframes koma-hop { 50% { transform: translateY(calc(var(--m, 82px) * -.16)); } }
  .masu.here { outline: 4px solid var(--accent); outline-offset: 3px; z-index: 2; }
  .playing .masu { cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .koma { transition: none; } .koma.hop { animation: none; } }
  .credit { position: absolute; left: 20px; bottom: 3px; font-size: 10px; font-weight: 800; opacity: .55; }

  /* --- マスの形 --- */
  .s-circle .masu { border-radius: 50%; background: var(--masu-bg); border: 4px solid var(--tc); box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 45%, transparent); }
  .s-circle .masu.stop { background: var(--stop-bg); color: var(--stop-ink); border-color: var(--masu-bg); box-shadow: 0 0 0 4px var(--stop-edge), 0 6px 0 4px color-mix(in srgb, var(--stop-edge) 55%, transparent); }
  .s-circle .masu.big { background: var(--accent); color: var(--big-ink); border: 5px solid var(--masu-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 60%, #fff), 0 7px 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
  .s-circle .line { stroke-width: 9; stroke-dasharray: 1 17; }

  .s-glow .masu { border-radius: 18px; background: var(--masu-bg); border: 2px solid var(--tc);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--tc) 18%, transparent); }
  .s-glow .masu.stop { background: var(--stop-bg); color: var(--stop-ink); border-color: #fff; box-shadow: 0 0 18px var(--stop-bg); transform: rotate(-4deg); }
  .s-glow .masu.big { border-radius: 26px; background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--move))); color: var(--big-ink); border: 3px solid #fff; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 80%, transparent); }
  .s-glow .line { stroke-width: 4; filter: drop-shadow(0 0 5px var(--line)); }

  .s-sticker .masu { border-radius: 14px; background: color-mix(in srgb, var(--tc) 42%, var(--masu-bg)); border: 2.5px solid var(--edge); box-shadow: 4px 4px 0 var(--edge); }
  .s-sticker .masu:not(.move):not(.batsu):not(.voice):not(.gift):not(.stop):not(.big) { background: var(--masu-bg); }
  .s-sticker .masu.stop { background: var(--stop-bg); color: var(--stop-ink); border-radius: 50%; }
  .s-sticker .masu.big { border-radius: 50%; background: var(--accent); color: var(--big-ink); border: 3px solid var(--edge); box-shadow: 6px 6px 0 var(--edge); }
  .s-sticker .line { stroke-width: 3; stroke-dasharray: 10 8; }

  .s-ticket .masu { border-radius: 10px; background: var(--masu-bg); border: 2px dashed var(--tc); outline: 3px solid var(--masu-bg); box-shadow: 0 0 0 3px var(--masu-bg), 0 3px 8px 3px rgba(0, 0, 0, .14); }
  .s-ticket .masu.stop { background: var(--stop-bg); color: var(--stop-ink); border-color: var(--stop-ink); outline-color: var(--stop-bg); box-shadow: 0 0 0 3px var(--stop-bg), 0 3px 8px 3px rgba(0, 0, 0, .18); transform: rotate(3deg); }
  .s-ticket .masu.big { border-radius: 16px; background: var(--accent); color: var(--big-ink); border: 2px dashed var(--big-ink); outline: 4px solid var(--accent); box-shadow: 0 0 0 4px var(--accent), 0 4px 10px 4px rgba(0, 0, 0, .18); }
  .s-ticket .line { stroke-width: 5; }

  .line { stroke: var(--line); stroke-linecap: round; fill: none; }

  /* --- 配色 --- */
  .p-milky { --bg: #FFF0F6; --ink: #5b4a6b; --masu-bg: #fff; --masu-ink: #5b4a6b; --edge: #6b4a5e; --plain: #ffb6d5; --move: #7dbcf7; --batsu: #ffa868; --voice: #c09af0; --gift: #f5c400;
    --accent: #FF5FA2; --big-ink: #fff; --stop-bg: #FFE14D; --stop-ink: #c2410c; --stop-edge: #ffb300; --line: #ff9fca; --title-ink: #FF5FA2; --title-edge: #fff; --sub-ink: #a56fd0;
    --chip-bg: #fff; --chip-ink: #d83b86; --chip-edge: #ffb6d5; --pat1: #ffd3e6; --pat2: #ffe6c9; }
  .p-neon { --bg: #1a1440; --ink: #e9e6ff; --masu-bg: #1d1748; --masu-ink: #efeaff; --edge: #8f7bff; --plain: #8f7bff; --move: #5fe3ff; --batsu: #ff7aa8; --voice: #c69bff; --gift: #ffd86b;
    --accent: #8f7bff; --big-ink: #120c33; --stop-bg: #ffd86b; --stop-ink: #2a1c00; --stop-edge: #ffd86b; --line: #8f7bff; --title-ink: #fff; --title-edge: transparent; --title-glow: 0 0 14px #b28cff; --sub-ink: #7ee7ff;
    --chip-bg: rgba(255,255,255,.08); --chip-ink: #e9e6ff; --chip-edge: rgba(190,170,255,.6); --pat1: rgba(255,255,255,.75); --pat2: rgba(126,231,255,.7); }
  .p-soda { --bg: #FFF7E3; --ink: #5a3d2b; --masu-bg: #fff; --masu-ink: #5a3d2b; --edge: #5a3d2b; --plain: #cdb89d; --move: #6fd0b8; --batsu: #ffb05c; --voice: #ff9aac; --gift: #ffd83a;
    --accent: #7ED3BE; --big-ink: #5a3d2b; --stop-bg: #E8483F; --stop-ink: #fff; --stop-edge: #E8483F; --line: #5a3d2b; --title-ink: #E8483F; --title-edge: #FFF7E3; --sub-ink: #2f9c85;
    --chip-bg: #5a3d2b; --chip-ink: #FFF7E3; --chip-edge: #5a3d2b; --pat1: rgba(126,211,190,.3); --pat2: rgba(255,180,92,.22); }
  .p-mint { --bg: #EEFAFF; --ink: #2c5364; --masu-bg: #fff; --masu-ink: #2c5364; --edge: #2c5364; --plain: #96d8ee; --move: #6aa9ff; --batsu: #ffa868; --voice: #b49cf0; --gift: #f5c400;
    --accent: #2bb3d6; --big-ink: #fff; --stop-bg: #FFE14D; --stop-ink: #1d6f8a; --stop-edge: #f2b600; --line: #8fd6ea; --title-ink: #1b9cc0; --title-edge: #fff; --sub-ink: #3fae8c;
    --chip-bg: #fff; --chip-ink: #1b86a6; --chip-edge: #a9e2f2; --pat1: #cdeff8; --pat2: #d6f4dc; }
  .p-mono { --bg: #F4F1EA; --ink: #2a2622; --masu-bg: #fff; --masu-ink: #2a2622; --edge: #2a2622; --plain: #b9b2a6; --move: #6f8fb0; --batsu: #c98b6b; --voice: #a48bb8; --gift: #c9a94a;
    --accent: #2a2622; --big-ink: #F4F1EA; --stop-bg: #b23a2e; --stop-ink: #fff; --stop-edge: #b23a2e; --line: #9a9287; --title-ink: #2a2622; --title-edge: #F4F1EA; --sub-ink: #b23a2e;
    --chip-bg: #2a2622; --chip-ink: #F4F1EA; --chip-edge: #2a2622; --pat1: #e4dfd3; --pat2: #ebe6da; }

  /* --- フォント --- */
  .f-pop  { --f-title: "Mochiy Pop One", sans-serif; --f-masu: "Zen Maru Gothic", sans-serif; }
  .f-bold { --f-title: "Dela Gothic One", sans-serif; --f-masu: "M PLUS Rounded 1c", sans-serif; }
  .f-hand { --f-title: "Hachi Maru Pop", cursive; --f-masu: "Yusei Magic", sans-serif; --title-size: 30px; }
  .f-maru { --f-title: "Zen Maru Gothic", sans-serif; --f-masu: "M PLUS Rounded 1c", sans-serif; }
  .f-hand .masu { font-weight: 400; } .f-maru .title, .f-maru .masu.big { font-weight: 900; }

  /* --- 背景 --- */
  .b-dots { background-image: radial-gradient(var(--pat1) 2.2px, transparent 2.6px), radial-gradient(var(--pat2) 2.2px, transparent 2.6px); background-size: 34px 34px; background-position: 0 0, 17px 17px; }
  .b-stripe { background-image: repeating-linear-gradient(90deg, var(--pat1) 0 26px, transparent 26px 52px); }
  .b-check { background-image: repeating-linear-gradient(0deg, var(--pat1) 0 20px, transparent 20px 40px), repeating-linear-gradient(90deg, var(--pat2) 0 20px, transparent 20px 40px); }
  .b-stars { background-image: radial-gradient(var(--pat1) 1.1px, transparent 1.5px), radial-gradient(var(--pat2) 1.3px, transparent 1.7px), radial-gradient(var(--pat1) 1px, transparent 1.4px),
      radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 38%, var(--bg)) 0%, var(--bg) 60%);
    background-size: 97px 113px, 149px 131px, 61px 71px, 100% 100%; background-position: 12px 20px, 90px 10px, 40px 55px, 0 0; }
  .b-plain { background-image: none; }