/* 店の色と書体、盤と札の一式 ―― この場所のすべての寸法と色の出どころ。
   base.css から切り出してあるのは、検索から来た人が最初に踏む解説ページ
   (server/pages.js が組む /games/*)が、アプリ本体の一式を積まずに同じ色を
   引けるようにするため。値を足すのも直すのもここ一箇所。

   使う側: index.html(アプリ) は base.css の前に、解説ページは styles/article.css
   の前に、それぞれこれを読む。 */
:root {
  --bg: #1b1f2b;
  --panel: #262b3a;
  --panel-alt: #2f3548;
  --accent: #5b8def;
  --accent-hover: #4a78d6;
  --text: #eef1f8;
  --text-dim: #9aa3b8;
  --error: #ff6b6b;
  --border: #3a4054;
  /* One radius for every piece of shop chrome: the cut edge of paper or wood.
     Game surfaces (cards, cells, stones) keep their own, rounder shapes. */
  --radius: 3px;
  /* 名札の名前欄の幅。実用的な長さ(全角7文字強)を前提に固定し、席ごとに
     名前の長さで札の大きさがまちまちになる(ガタつく)のを防ぐ。これより
     長い名前は core.js の fitPlateName() が文字を縮めて収め、それでも
     収まらなければ CSS の text-overflow: ellipsis に任せる。
     em ではなく rem ―― fitPlateName が名前欄自身の font-size を縮めるので、
     em だと欄の幅までいっしょに縮んでしまい、揃えたい幅がずれてしまう。 */
  --nameplate-name-width: 6.3rem;
  /* Where the bottom row of the floating tool stack sits. The start plaque
     holds the corner while a room waits to begin, and the stack stands on top
     of it; once play starts the plaque goes and the stack takes the corner. */
  --tool-stack-base: 20px;
  /* 将棋の盤は昼と夜の二面を持つ。既定は榧と漆 ―― 盤を静かにして駒を
     主役にし、後手は向きで見分ける本式。body.board-dark が行灯に
     差し替える(下)。値はすべてトークンで、盤の組み方そのものは共通。 */
  --shogi-frame-a: #4a3524;
  --shogi-frame-b: #241810;
  --shogi-frame-edge: var(--shop-brass);
  --shogi-frame-sheen: rgba(255, 255, 255, 0.1);
  --shogi-frame-drop: rgba(20, 12, 4, 0.38);
  --shogi-board-a: #eed3a4;
  --shogi-board-b: #dfbc82;
  /* 木目と照りは片方だけを使う。使わない側は透明のまま重ねる。 */
  /* 木目は盤線と同じ真縦に引き、間隔の違う二本を重ねて不揃いにする。
     盤線とわずかに角度がずれていたり、等間隔で並んでいたりすると、
     細い平行線どうしが干渉して盤が傾いて見え、見ていて酔う。 */
  --shogi-board-grain:
    repeating-linear-gradient(90deg,
      rgba(90, 62, 28, 0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg,
      rgba(90, 62, 28, 0.035) 0 1px, transparent 1px 11px);
  --shogi-board-sheen: linear-gradient(transparent, transparent);
  --shogi-line: rgba(46, 29, 14, 0.6);
  --shogi-line-edge: #3a2612;
  --shogi-star: rgba(46, 29, 14, 0.72);
  --shogi-tray-a: #4a3524;
  --shogi-tray-b: #2b1d12;
  --shogi-tray-border: var(--shop-walnut-deep);
  --shogi-tray-sheen: rgba(255, 255, 255, 0.07);
  --shogi-piece-a: #fbf1d2;
  --shogi-piece-b: #e8cf9c;
  --shogi-piece-flip-a: #f7ecca;
  --shogi-piece-flip-b: #e2c891;
  --shogi-piece-edge: #6d4a22;
  --shogi-piece-shadow: 0 1px 2px rgba(40, 24, 10, 0.34);
  --shogi-piece-bevel:
    inset 0 -3px 5px rgba(122, 86, 40, 0.3),
    inset 0 2px 2px rgba(255, 248, 226, 0.75);
  /* 相手の駒は 180° 回して置くので、面取りを先に上下逆にしておく。
     回したあとも灯は上から当たり、盤じゅうの駒が同じ向きに盛り上がる。 */
  --shogi-piece-bevel-flip:
    inset 0 3px 5px rgba(122, 86, 40, 0.3),
    inset 0 -2px 2px rgba(255, 248, 226, 0.75);
  --shogi-ink: #1d140b;
  --shogi-ink-flip: #1d140b;
  --shogi-ink-red: #9c2b26;
  --shogi-ink-red-flip: #9c2b26;
  --shogi-ink-weight: 900;
  --shogi-dot-gote-ring: 0 0 0 1px var(--shop-walnut-deep) inset;
  --shogi-selected: rgba(226, 168, 58, 0.42);
  --shogi-legal: rgba(52, 84, 66, 0.62);
  --shogi-legal-ring: rgba(52, 84, 66, 0.85);
  --shogi-check: rgba(163, 45, 38, 0.5);
  --shogi-last-move: rgba(226, 168, 58, 0.18);

  /* リバーシの盤も同じく二面。既定は蛤と那智黒 ―― 羅紗の色を落として
     将棋と同じ胡桃の枠に納め、石は厚みで盤から起き上がる。将棋と同じ札
     (body.board-dark)で行灯に切り替わる。 */
  --reversi-frame-a: #4a3524;
  --reversi-frame-b: #241810;
  --reversi-frame-edge: var(--shop-brass);
  --reversi-frame-sheen: rgba(255, 255, 255, 0.1);
  --reversi-frame-drop: rgba(20, 12, 4, 0.38);
  --reversi-line: rgba(16, 34, 26, 0.85);
  --reversi-felt-a: #2f5f4a;
  --reversi-felt-b: #27513f;
  /* 羅紗の毛並み。斜めに寝かせて、平らな緑に触感を一枚かける。 */
  --reversi-felt-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 6px);
  --reversi-felt-sheen:
    radial-gradient(115% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 62%);
  --reversi-felt-hover: rgba(255, 255, 255, 0.07);
  --reversi-star: rgba(6, 16, 11, 0.92);
  --reversi-coord: var(--shop-brass-light);
  --reversi-black: radial-gradient(circle at 36% 26%, #5a625c 0%, #232825 42%, #0c0e0d 100%);
  --reversi-black-bevel:
    inset 0 -4px 6px rgba(0, 0, 0, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.22);
  --reversi-black-shadow: 0 3px 4px rgba(0, 0, 0, 0.5), 0 1px 0 #05100b;
  --reversi-white: radial-gradient(circle at 36% 26%, #fffdf6 0%, #f4ecd9 45%, #d9cdb2 100%);
  --reversi-white-bevel:
    inset 0 -4px 6px rgba(120, 100, 68, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.9);
  --reversi-white-shadow: 0 3px 4px rgba(0, 0, 0, 0.38), 0 1px 0 #b3a68c;
  --reversi-legal: rgba(221, 192, 127, 0.85);
  --reversi-last: var(--shop-brass-light);

  /* 五目並べの碁盤(のちの囲碁と共用)も二面。昼は榧盤に蛤と那智黒 ――
     将棋と同じ榧の地と木目を、同じ胡桃の枠と真鍮の筋に納める。直前の手と
     五連は朱。夜は同じ札(body.board-dark)で行灯に。案は design/gomoku。 */
  --gomoku-frame-a: #4a3524;
  --gomoku-frame-b: #241810;
  --gomoku-frame-edge: var(--shop-brass);
  --gomoku-frame-sheen: rgba(255, 255, 255, 0.1);
  --gomoku-frame-drop: rgba(20, 12, 4, 0.38);
  --gomoku-board-a: #eed3a4;
  --gomoku-board-b: #dfbc82;
  --gomoku-board-grain:
    repeating-linear-gradient(90deg,
      rgba(90, 62, 28, 0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg,
      rgba(90, 62, 28, 0.035) 0 1px, transparent 1px 11px);
  --gomoku-board-sheen: linear-gradient(transparent, transparent);
  --gomoku-line: rgba(46, 29, 14, 0.6);
  --gomoku-line-edge: #3a2612;
  --gomoku-star: rgba(46, 29, 14, 0.78);
  --gomoku-coord: var(--shop-brass-light);
  --gomoku-black: radial-gradient(circle at 36% 28%, #55595a 0%, #1f2120 45%, #0a0b0a 100%);
  --gomoku-black-sheen:
    radial-gradient(ellipse 34% 20% at 34% 26%, rgba(255, 255, 255, 0.22), transparent 100%);
  --gomoku-black-rim: transparent;
  --gomoku-white: radial-gradient(circle at 36% 28%, #fffdf6 0%, #f3ead6 50%, #d6c9ab 100%);
  /* 蛤の縞。石の外(左下の遠く)に中心を置いた同心の輪を、石の円で切り抜く。 */
  --gomoku-white-stripes:
    repeating-radial-gradient(circle at -5% 180%,
      transparent 0 1.55px, rgba(150, 128, 90, 0.16) 1.55px 2.1px);
  --gomoku-stone-shadow: 1px 2px 3px rgba(0, 0, 0, 0.42);
  --gomoku-last-on-black: #d9563f;
  --gomoku-last-on-white: #a8352b;
  --gomoku-win: rgba(168, 53, 43, 0.82);
  --gomoku-win-width: 4.5px;
  --gomoku-win-glow: transparent;
  --gomoku-ghost-opacity: 0.45;

  /* チェスも二面。昼は木で挽いた卓 ―― 将棋・リバーシと同じ胡桃の枠に納め、
     マスは木口の差で分け、駒は黄楊と黒檀。夜は同じ札(body.board-dark)で
     盤の面だけ灯を落とす(下)。枠と金物は昼夜とも胡桃と真鍮のまま
     ―― 木も金物も灯りで材は変わらないので、灯を落とすだけにする。 */
  --chess-frame-a: #4a3524;
  --chess-frame-b: #241810;
  --chess-frame-edge: var(--shop-brass);
  --chess-frame-sheen: rgba(255, 255, 255, 0.1);
  --chess-frame-drop: rgba(20, 12, 4, 0.38);
  --chess-board-edge: #3a2612;
  /* 木口は92度に寝かせた筋。マスごとに同じ木口が来るが、48pxでは
     木目が繰り返しに見えるほど大きくないのでこれでいい。 */
  --chess-light:
    repeating-linear-gradient(92deg, rgba(90, 62, 28, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #eed9ad, #e3c894);
  --chess-dark:
    repeating-linear-gradient(92deg, rgba(20, 10, 4, 0.1) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #8d6238, #6f4a29);
  --chess-hover: rgba(255, 255, 255, 0.1);
  --chess-coord: var(--shop-brass-light);
  --chess-selected: rgba(226, 168, 58, 0.85);
  --chess-last: rgba(226, 168, 58, 0.34);
  --chess-legal: rgba(58, 38, 18, 0.72);
  --chess-capture: rgba(163, 45, 38, 0.75);
  --chess-check: rgba(163, 45, 38, 0.45);
  --chess-white-face: #f4e3bd;
  --chess-white-edge: #6d4a22;
  --chess-white-line: #6d4a22;
  --chess-white-bevel: #fff8e2;
  --chess-white-bevel-alpha: 0.5;
  --chess-black-face: #33251a;
  --chess-black-edge: #150d07;
  --chess-black-line: #c9b189;
  --chess-black-bevel: #6b5540;
  --chess-black-bevel-alpha: 0.45;
  --chess-piece-shadow: 0 2px 2px rgba(40, 24, 10, 0.45);

  /* 〇✕の卓も二面。既定は帳面 ―― 店の伝票と同じ和紙に細い罫を刷り、手は
     藍印と朱印を捺す。判子なので欠けはいつも同じ位置に出る。同じ札
     (body.board-dark)で夜の半紙に替わり、そちらは筆で書く(下)。 */
  --ttt-paper-a: #f0e6cf;
  --ttt-paper-b: #e4d7b4;
  --ttt-paper-grain: var(--shop-paper-grain);
  --ttt-paper-sheen: linear-gradient(transparent, transparent);
  --ttt-board-edge:
    0 0 0 1px rgba(42, 36, 28, 0.5),
    0 0 0 4px var(--shop-paper),
    0 0 0 5px rgba(42, 36, 28, 0.28),
    0 10px 20px rgba(12, 8, 4, 0.34);
  --ttt-rule: rgba(42, 36, 28, 0.42);
  --ttt-rule-width: 1px;
  --ttt-ink-o: #2b4a78;
  --ttt-ink-x: #a8352b;
  --ttt-win: #a8352b;
  --ttt-cell-hover: rgba(42, 36, 28, 0.06);
  --ttt-cell-win: rgba(196, 150, 60, 0.16);
  --ttt-ghost: 0.28;

  /* 大富豪の卓。場に緋毛氈を敷き、将棋・リバーシ・チェスと同じ胡桃の枠に
     納める ―― 盤を持たない札の卓に、置き場という面を一枚与える。毛氈は
     かるたの席の緋色で、リバーシの羅紗(緑)とは別の布。 */
  --daifugo-frame-a: #4a3524;
  --daifugo-frame-b: #241810;
  --daifugo-frame-edge: var(--shop-brass);
  --daifugo-frame-sheen: rgba(255, 255, 255, 0.1);
  --daifugo-frame-drop: rgba(20, 12, 4, 0.38);
  --daifugo-mousen-a: #a8352b;
  --daifugo-mousen-b: #7d2119;
  /* 毛氈の毛並み。羅紗と同じ角度に寝かせて、平らな緋色に触感をかける。 */
  --daifugo-mousen-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 6px);
  --daifugo-mousen-sheen:
    radial-gradient(120% 100% at 50% -12%, rgba(255, 236, 214, 0.13), transparent 62%);
  --daifugo-mousen-well: inset 0 2px 5px rgba(60, 12, 8, 0.45);
  --daifugo-mousen-ink: rgba(255, 233, 208, 0.72);
  --daifugo-mousen-ink-soft: rgba(255, 233, 208, 0.6);
  --daifugo-plate-name: var(--shop-brass-light);
  --daifugo-plate-name-lit: #f4e7c4;
  --daifugo-plate-sub: rgba(221, 192, 127, 0.6);
  --daifugo-plate-sub-lit: rgba(244, 231, 196, 0.75);
  --daifugo-plate-edge: rgba(180, 144, 63, 0.55);
  --daifugo-plate-lit:
    0 0 0 1px var(--shop-brass),
    0 0 12px rgba(180, 144, 63, 0.45),
    0 2px 3px rgba(20, 12, 4, 0.38);
  /* ヨットの卓。賽は紺鉄の羅紗を張った盆に落とす ―― リバーシの羅紗(緑)、
     大富豪の毛氈(緋)とは別の布で、賽を転がすためだけの一枚。枠は将棋・
     リバーシ・チェス・大富豪と同じ胡桃。 */
  --yacht-frame-a: #4a3524;
  --yacht-frame-b: #241810;
  --yacht-frame-edge: var(--shop-brass);
  --yacht-frame-sheen: rgba(255, 255, 255, 0.1);
  --yacht-frame-drop: rgba(20, 12, 4, 0.38);
  --yacht-rasha-a: #2c4356;
  --yacht-rasha-b: #22354a;
  /* 羅紗の毛並みと照り。リバーシの盤と同じ角度に寝かせる。 */
  --yacht-rasha-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 6px);
  --yacht-rasha-sheen:
    radial-gradient(115% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 62%);
  --yacht-rasha-well:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.3);
  --yacht-rail-ink: var(--shop-brass-light);
  /* 賽は店の一組(--die-*)。盆に落ちる56pxも点取帳の行頭の16pxも、挽き方は
     同じで大きさだけが違うので、ヨットは骨も目も自前では持たない。 */
  /* 点取帳。自分の列だけ地を落とし、小計の帯はその下に敷く。 */
  --yacht-self-tint: rgba(180, 144, 63, 0.1);
  /* 小計の帯。左端に留める役の名の升と同じ地でなければならないので、
     透かしではなく、紙(--shop-paper-light)に重ねた色をそのまま置く。 */
  --yacht-band-tint: #e9dfc3;

  /* 店の賽。地はリバーシの蛤と同じ挽き方、目は彫って下辺の照り返しで出す
     ―― 使うのはライアーズダイスとヨットなので、遊びの名は付けない。 */
  --die-bone: radial-gradient(circle at 36% 26%, #fffdf6 0%, #f4ecd9 45%, #d9cdb2 100%);
  --die-bevel:
    inset 0 -4px 6px rgba(120, 100, 68, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.9);
  --die-shadow: 0 3px 4px rgba(0, 0, 0, 0.38), 0 1px 0 #b3a68c;
  /* まだ振っていない賽。同じ地を一段落として、目が無いのは伏せているから
     ではなく、まだ出ていないからだと色で示す(ヨットの一投目より前)。 */
  --die-bone-idle: radial-gradient(circle at 36% 26%, #efe6d2 0%, #e2d6ba 45%, #cdbf9f 100%);
  --die-pip: radial-gradient(circle at 38% 32%, #4a4238, #241c12 72%);
  --die-pip-sheen: 0 1px 0 rgba(255, 255, 255, 0.65);

  /* ライアーズダイスの卓。賽を転がす面が要る ―― 胡桃の枠(将棋・リバーシ・
     チェス・大富豪と同じ)に鞣した革を張る。毛氈の緋・羅紗の緑・紫紺の布に
     対して、ここだけは布ではなく革。色は箱絵(public/cover-art.js の
     liarsdice)の地から起こしたが、箱絵の茶のままだと枠と明度が近すぎて
     枠が枠に見えないので、一段明るい飴色に振り、革の際に暗い立ち上がりを
     一本入れて分けている。 */
  --liarsdice-frame-a: #4a3524;
  --liarsdice-frame-b: #241810;
  --liarsdice-frame-edge: var(--shop-brass);
  --liarsdice-frame-sheen: rgba(255, 255, 255, 0.1);
  --liarsdice-frame-drop: rgba(20, 12, 4, 0.38);
  --liarsdice-hide-a: #9c5a34;
  --liarsdice-hide-b: #63321d;
  /* 革の肌理と照り。毛氈・羅紗と違って毛並みはないので、紙と同じ角度の
     細かい目を薄く敷くだけにする。 */
  --liarsdice-hide-nap:
    repeating-linear-gradient(115deg,
      rgba(42, 36, 28, 0.05) 0 1px, transparent 1px 5px);
  --liarsdice-hide-sheen:
    radial-gradient(120% 100% at 50% -10%, rgba(255, 236, 214, 0.15), transparent 60%);
  --liarsdice-hide-well:
    inset 0 0 0 1px rgba(20, 8, 2, 0.55),
    inset 0 2px 6px rgba(40, 14, 6, 0.5);
  --liarsdice-hide-rule: rgba(221, 192, 127, 0.3);
  --liarsdice-hide-ink: rgba(255, 233, 208, 0.72);
  /* 革に空押しした賽筒。帳面の台の影絵(icons/counter-silhouette.svg)と同じ
     描き方 ―― 胡桃色に沈めて、真鍮の細い線を一本だけ。 */
  --liarsdice-tooling-fill: rgba(40, 16, 6, 0.16);
  --liarsdice-tooling-line: rgba(255, 236, 214, 0.16);
  --liarsdice-tooling-pip: rgba(18, 7, 2, 0.14);
  /* 打ち手の木札。大富豪・ばば抜きと同じ組みで、手番だけ真鍮が灯る。 */
  --liarsdice-plate-name: var(--shop-brass-light);
  --liarsdice-plate-name-lit: #f4e7c4;
  --liarsdice-plate-sub: rgba(221, 192, 127, 0.6);
  --liarsdice-plate-sub-lit: rgba(244, 231, 196, 0.75);
  --liarsdice-plate-edge: rgba(180, 144, 63, 0.55);
  --liarsdice-plate-lit:
    0 0 0 1px var(--shop-brass),
    0 0 12px rgba(180, 144, 63, 0.45),
    0 2px 3px rgba(20, 12, 4, 0.38);

  /* 残り枚数の頭に付く札束の目印。色は置いた場所の文字色をそのまま拾う。
     大富豪とばば抜きの両方の木札が使うので、遊びの名は付けない。 */
  --card-stack-mark:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='0.5' y='2.5' width='8' height='10' rx='1.5'/%3E%3Cpath d='M2.5 1.5H10.5V10'/%3E%3Cpath d='M4.5 0.5H12.5V8'/%3E%3C/svg%3E");
  /* 同じ組みで、こちらは銭の重なり ―― 手持ちのチップの頭に付く。
     枚数ではなく額を出す卓(ポーカー)が使うので、こちらも遊びの名は付けない。 */
  --chip-stack-mark:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1'%3E%3Cellipse cx='6.5' cy='9.6' rx='5.4' ry='2.2'/%3E%3Cellipse cx='6.5' cy='6.5' rx='5.4' ry='2.2'/%3E%3Cellipse cx='6.5' cy='3.4' rx='5.4' ry='2.2'/%3E%3C/svg%3E");
  /* 花札(こいこい)の卓も二面。昼は大富豪と同じ緋毛氈を胡桃の枠に敷く ――
     黒漆に金の札が、漆器を緋毛氈に置いた取り合わせで締まる。夜は同じ札
     (body.board-dark)で藍の毛氈に行灯の灯を落とす(base.css)。 */
  --koikoi-frame-a: #4a3524;
  --koikoi-frame-b: #241810;
  --koikoi-frame-edge: var(--shop-brass);
  --koikoi-frame-sheen: rgba(255, 255, 255, 0.1);
  --koikoi-frame-drop: rgba(20, 12, 4, 0.38);
  --koikoi-cloth-a: #a8352b;
  --koikoi-cloth-b: #7d2119;
  --koikoi-cloth-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 6px);
  --koikoi-cloth-sheen:
    radial-gradient(120% 100% at 50% -12%, rgba(255, 236, 214, 0.13), transparent 62%);
  --koikoi-cloth-well: inset 0 2px 5px rgba(60, 12, 8, 0.45);
  --koikoi-cloth-ink: rgba(255, 233, 208, 0.78);
  --koikoi-card-shadow: drop-shadow(0 2px 3px rgba(40, 8, 4, 0.5));
  --koikoi-target: #f0d58c;

  /* 伏せ札の地。札の表(public/cards.js)が店に一組しかないのと同じで、裏も
     一枚 ―― ばば抜きは同じ裏に引く位置の番号を入れて使う。 */
  --card-back: #20143a;
  --card-back-ring: var(--shop-violet-deep);

  /* ばば抜きの卓。相手の手を番号ボタンではなく伏せ札の扇で差し出すための
     面を一枚与える ―― 布は箱の色(紫紺)から採り、枠は将棋・リバーシ・
     チェス・大富豪と同じ胡桃。伏せ札の地は箱絵(public/cover-art.js の
     babanuki)の伏せ札とそのまま同じ色で、布の上に置いても沈まない。 */
  --babanuki-frame-a: #4a3524;
  --babanuki-frame-b: #241810;
  --babanuki-frame-edge: var(--shop-brass);
  --babanuki-frame-sheen: rgba(255, 255, 255, 0.1);
  --babanuki-frame-drop: rgba(20, 12, 4, 0.38);
  --babanuki-cloth-a: var(--shop-violet);
  --babanuki-cloth-b: var(--shop-violet-deep);
  /* 布の織り目と照り。毛氈・羅紗と同じ角度に寝かせる。 */
  --babanuki-cloth-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 6px);
  --babanuki-cloth-sheen:
    radial-gradient(120% 100% at 50% -12%, rgba(236, 225, 200, 0.12), transparent 62%);
  --babanuki-cloth-well: inset 0 2px 5px rgba(10, 4, 20, 0.5);
  --babanuki-cloth-name: var(--shop-brass-light);
  --babanuki-cloth-sub: rgba(221, 192, 127, 0.6);
  --babanuki-cloth-ink: rgba(226, 214, 240, 0.72);
  --babanuki-back-lift: rgba(221, 192, 127, 0.95);
  --babanuki-card-drop: drop-shadow(0 3px 5px rgba(12, 6, 22, 0.5));
  --babanuki-card-drop-lift: drop-shadow(0 8px 12px rgba(12, 6, 22, 0.6));
  /* 木札。手番は真鍮が灯り、引かれる側には紫の小札が差さる。 */
  --babanuki-plate-name: var(--shop-brass-light);
  --babanuki-plate-name-lit: #f4e7c4;
  --babanuki-plate-sub: rgba(221, 192, 127, 0.6);
  --babanuki-plate-sub-lit: rgba(244, 231, 196, 0.75);
  --babanuki-plate-edge: rgba(180, 144, 63, 0.55);
  --babanuki-plate-lit:
    0 0 0 1px var(--shop-brass),
    0 0 12px rgba(180, 144, 63, 0.45),
    0 2px 3px rgba(20, 12, 4, 0.38);
  --babanuki-target-edge: rgba(122, 92, 168, 0.75);
  --babanuki-target-ink: #e2d6f0;
  /* 手札の並べ替え(左へ・右へ)。紙の札に真鍮の細い縁。 */
  --babanuki-rail-edge: rgba(180, 144, 63, 0.7);

  /* ポーカーの卓。出した札を置く場ではなく、賭けを置く卓 ―― 布は紺の羅紗で、
     枠は将棋・リバーシ・チェス・大富豪と同じ胡桃。緑(リバーシ)・緋(大富豪)・
     紫紺(ばば抜き)に続く四枚目の布。 */
  --poker-rasha-a: #31496a;
  --poker-rasha-b: #22334a;
  /* 羅紗の毛並みと照り。他の卓と同じ角度に寝かせる。 */
  --poker-rasha-nap:
    repeating-linear-gradient(98deg,
      rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 6px);
  --poker-rasha-sheen:
    radial-gradient(120% 100% at 50% -12%, rgba(214, 232, 255, 0.12), transparent 62%);
  --poker-rasha-well: inset 0 2px 6px rgba(8, 16, 30, 0.5);
  --poker-rasha-ink: rgba(240, 232, 212, 0.8);
  --poker-rasha-ink-soft: rgba(240, 232, 212, 0.55);
  /* 銭 ―― 卓に出ているチップ。山の高さが額に比例する(games/poker.js)。 */
  --poker-coin: var(--shop-brass);
  --poker-coin-edge: var(--shop-brass-deep);
  --poker-coin-face: var(--shop-brass-light);
  --poker-coin-hole: var(--shop-walnut-deep);
  /* まだ配られていない場札の空枠。 */
  --poker-slot-edge: rgba(221, 192, 127, 0.42);

  --shop-paper: #ece1c8;
  --shop-paper-deep: #ded0aa;
  --shop-paper-line: rgba(42, 36, 28, 0.14);
  /* a sheet lighter than the surrounding stock, for fields meant to be written on */
  --shop-paper-light: #f7f1e1;
  --shop-ink: #2a241c;
  --shop-ink-soft: #55493a;
  --shop-pine: #2f4a3d;
  --shop-pine-deep: #203228;
  --shop-burgundy: #7c2e2e;
  --shop-burgundy-deep: #591f1f;
  --shop-walnut: #362519;
  --shop-walnut-deep: #241810;
  --shop-walnut-warm: #4a3524;
  --shop-seal: #a8352b;
  --shop-seal-deep: #7d2119;
  --shop-brass: #b4903f;
  --shop-brass-light: #ddc07f;
  --shop-brass-deep: #8a6a1a;
  --shop-slate: #45536a;
  --shop-crimson: #7a2230;
  --shop-crimson-deep: #3d1119;
  --shop-teal: #2c5a5a;
  --shop-teal-deep: #16302f;
  --shop-violet: #4a3768;
  --shop-violet-deep: #2a1d3d;
  --shop-gold: #8a6a1a;
  --shop-gold-deep: #4a3a0d;
  --shop-sumi: #3d3a35;
  --shop-sumi-deep: #1f1d1a;
  /* 漆 ―― 花札の箱。黒漆に朱をひと刷け。 */
  --shop-urushi: #6e2a20;
  --shop-urushi-deep: #1c1210;
  /* 人狼の箱。月の無い夜の藍。 */
  --shop-night: #2e3552;
  --shop-night-deep: #12152a;
  --shop-rust: #8a4a2f;
  --shop-rust-deep: #5c2f1c;
  --shop-font-display: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  --shop-font-body: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --shop-font-stamp: 'Shippori Antique B1', 'Zen Old Mincho', serif;

  /* Faint laid-paper texture; layer over --shop-paper on anything that
     should read as a slip of washi rather than a flat panel. */
  --shop-paper-grain:
    repeating-linear-gradient(115deg,
      rgba(42, 36, 28, 0.03) 0px, rgba(42, 36, 28, 0.03) 1px,
      transparent 1px, transparent 5px);

  /* わら半紙 ―― 入場の後の紙の画面(卓を見る・対戦記録・棋楽軒とは)の地。
     繊維の線は縁を立てず、芯から両側へ薄れさせてにじませる。その下に
     墨を吸った紙のような淡いムラ(feTurbulence)を 280px 角で敷く。
     ムラは継ぎ目が出ないよう、フィルタの範囲をタイルちょうどにしてある。
     地の色の段は --shop-paper-light から --shop-paper へ(上が明るい)。 */
  --shop-wara-ground:
    repeating-linear-gradient(115deg,
      transparent 0px, rgba(42, 36, 28, 0.018) 1.6px,
      transparent 3.4px, transparent 5.5px),
    repeating-linear-gradient(25deg,
      transparent 0px, rgba(42, 36, 28, 0.008) 2px,
      transparent 4.5px, transparent 10px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n' filterUnits='userSpaceOnUse' x='0' y='0' width='280' height='280'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.19  0 0 0 0 0.12  0.12 0 0 0 -0.045'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--shop-paper-light), var(--shop-paper) 30%);
  /* 帳面の朱の二重罫(.paper-sheet)。内の罫と、少し薄い外の罫。 */
  --shop-sheet-rule: rgba(124, 46, 46, 0.35);
  --shop-sheet-rule-outer: rgba(124, 46, 46, 0.2);

  /* Layered grain lines for a walnut-plank feel on headers/buttons.
     Stack on top of the existing flat color or gradient background. */
  --wood-grain:
    repeating-linear-gradient(0.6deg,
      rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px,
      transparent 1px, transparent 3px,
      rgba(0, 0, 0, 0.08) 3px, transparent 4px, transparent 7px),
    repeating-linear-gradient(-0.3deg,
      rgba(255, 255, 255, 0.05) 0px, transparent 1px,
      transparent 12px, rgba(255, 255, 255, 0.05) 13px, transparent 24px),
    repeating-linear-gradient(0.2deg,
      rgba(0, 0, 0, 0.10) 0px, transparent 3px,
      transparent 55px, rgba(0, 0, 0, 0.10) 58px, transparent 130px);
  --wood-knots:
    radial-gradient(ellipse 70px 16px at 16% 28%, rgba(0, 0, 0, 0.22), transparent 70%),
    radial-gradient(ellipse 46px 12px at 74% 66%, rgba(0, 0, 0, 0.16), transparent 70%);

  /* Soft top-lit sheen + carved-edge shadow, layered on top of the grain
     so headers/buttons read as a raised wood panel rather than a flat print. */
  --wood-sheen: linear-gradient(180deg,
      rgba(255, 255, 255, 0.09) 0%,
      transparent 25%,
      transparent 70%,
      rgba(0, 0, 0, 0.2) 100%);
  --wood-shadow-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.3);
  --wood-shadow-button:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 箱の地 ―― 一つのゲームに一色。棚の箱・品書きの題・解説ページの題が同じ地を
   敷くので、色はゲームの識別そのものとして働く。どの箱がどの地かは
   public/game-catalog.mjs の tone。 */
.tone-pine { background: linear-gradient(160deg, var(--shop-pine), var(--shop-pine-deep)); }
.tone-burgundy { background: linear-gradient(160deg, var(--shop-burgundy), var(--shop-burgundy-deep)); }
.tone-walnut { background: linear-gradient(160deg, #4a3524, var(--shop-walnut-deep)); }
.tone-muted { background: linear-gradient(160deg, #8a8272, #6b6455); }
.tone-slate { background: linear-gradient(160deg, #45536a, #262f3d); }
.tone-crimson { background: linear-gradient(160deg, var(--shop-crimson), var(--shop-crimson-deep)); }
.tone-teal { background: linear-gradient(160deg, var(--shop-teal), var(--shop-teal-deep)); }
.tone-violet { background: linear-gradient(160deg, var(--shop-violet), var(--shop-violet-deep)); }
.tone-gold { background: linear-gradient(160deg, var(--shop-gold), var(--shop-gold-deep)); }
.tone-brass { background: linear-gradient(160deg, var(--shop-brass), var(--shop-brass-deep)); }
.tone-sumi { background: linear-gradient(160deg, var(--shop-sumi), var(--shop-sumi-deep)); }
.tone-urushi { background: linear-gradient(160deg, var(--shop-urushi), var(--shop-urushi-deep)); }
.tone-night { background: linear-gradient(160deg, var(--shop-night), var(--shop-night-deep)); }
.tone-rust { background: linear-gradient(160deg, var(--shop-rust), var(--shop-rust-deep)); }
/* 藍 ―― すごろくの箱。東海道の夜明けの空。 */
.tone-indigo { background: linear-gradient(160deg, #2c3e63, #16203a); }