/* The newer board games: Reversi, Go, Code Breaker, Star Jump, Dominoes, and friends.
   .duel-wrap is the shared centre column (score line, board, message) for two-player games. */
body[data-game="reversi"] #felt, body[data-game="go"] #felt, body[data-game="codebreaker"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 210, 180, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #2e2a24 0%, #1e1b17 55%, #0b0a08 100%); }
body[data-game="reversi"] #print, body[data-game="go"] #print, body[data-game="codebreaker"] #print,
body[data-game="reversi"] .fan, body[data-game="go"] .fan, body[data-game="codebreaker"] .fan,
body[data-game="reversi"] .sizer, body[data-game="go"] .sizer, body[data-game="codebreaker"] .sizer { display: none; }
.duel-wrap { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2vmin; z-index: 2; }
.dw-score { margin: 0; font-family: var(--ui); font-size: 1.6vmin; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.dw-msg { margin: 0; display: flex; align-items: center; gap: .6em; font-family: var(--serif); font-style: italic; font-size: 2.4vmin; color: var(--ivory); white-space: nowrap; }
.dw-msg b { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--champagne-hi); }

/* ---------- Reversi ---------- */
.rv-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(var(--B, 320px) * .006); width: var(--B, 320px); aspect-ratio: 1; padding: calc(var(--B, 320px) * .03); box-sizing: border-box; border-radius: calc(var(--B, 320px) * .025);
  background: #1a1410; box-shadow: 0 2.4vmin 6vmin rgba(0, 0, 0, .6), inset 0 0 0 .2vmin rgba(205, 180, 135, .5); }
.rv-cell { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4%; background: radial-gradient(ellipse at 50% 40%, #2f7a4e, #215c39); cursor: pointer; }
.rv-cell:disabled, .rv-cell:not(.ok) { cursor: default; }
.rv-cell.ok::after { content: ''; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 .2vmin rgba(255, 255, 255, .3); }
.rv-disc { display: block; width: 82%; aspect-ratio: 1; border-radius: 50%; }
.rv-disc.d0 { background: radial-gradient(circle at 35% 30%, #4a4a4a, #111 60%); box-shadow: 0 .4vmin .8vmin rgba(0, 0, 0, .6), inset 0 -.3vmin 0 rgba(255, 255, 255, .08); }
.rv-disc.d1 { background: radial-gradient(circle at 35% 30%, #fffdf6, #d8cfbc 70%); box-shadow: 0 .4vmin .8vmin rgba(0, 0, 0, .6), inset 0 -.3vmin 0 rgba(0, 0, 0, .15); }
.rv-disc.flip { animation: rvFlip .45s ease; }
.rv-disc.pop { animation: trPop .3s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes rvFlip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.rv-disc.small { display: inline-block; width: 2.4vmin; vertical-align: middle; }
.rv-cell.last { box-shadow: inset 0 0 0 .2vmin rgba(255, 220, 150, .7); }
#rvPhone { width: min(94vw, 420px); --B: min(94vw, 420px); }
#rvPhone .rv-disc.small, #whoami .rv-disc.small { width: 16px; }

/* ---------- phones (shared) ---------- */
body[data-game="reversi"], body[data-game="go"], body[data-game="codebreaker"] { background: radial-gradient(ellipse 140% 100% at 50% 40%, #16130f 0%, var(--onyx) 70%); }
body[data-game="reversi"] #handWrap, body[data-game="go"] #handWrap, body[data-game="codebreaker"] #handWrap,
body[data-game="reversi"] #handHint, body[data-game="go"] #handHint, body[data-game="codebreaker"] #handHint { display: none; }

/* ---------- Go ---------- */
.go-wrap { width: var(--B, 320px); filter: drop-shadow(0 2.4vmin 4vmin rgba(0, 0, 0, .6)); }
.go-board { display: block; width: 100%; height: auto; }
.go-hit { cursor: pointer; }
.go-stone { display: inline-block; width: 2.4vmin; aspect-ratio: 1; border-radius: 50%; vertical-align: middle; }
.go-stone.s0 { background: radial-gradient(circle at 35% 30%, #5a5a5a, #111 60%); }
.go-stone.s1 { background: radial-gradient(circle at 35% 30%, #fff, #d8cfbc 70%); }
#goPhone { width: min(96vw, 440px); }
#whoami .go-stone { width: 16px; }

/* ---------- Code Breaker ---------- */
.cb2-peg { display: inline-block; width: var(--R, 28px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 40%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: 0 .2vmin .4vmin rgba(0, 0, 0, .6); }
.cb2-peg.empty { background: radial-gradient(circle at 50% 50%, #1a0f08, #2a1a10); box-shadow: inset 0 .2vmin .4vmin rgba(0, 0, 0, .8); width: calc(var(--R, 28px) * .5); margin: calc(var(--R, 28px) * .25); }
.cb2-board { display: flex; flex-direction: column; gap: calc(var(--R) * .4); padding: calc(var(--R) * .5); border-radius: calc(var(--R) * .5); background: linear-gradient(170deg, #6a4424, #4a2e16); box-shadow: 0 2.4vmin 6vmin rgba(0, 0, 0, .6), inset 0 0 0 .2vmin rgba(205, 180, 135, .4); }
.cb2-code { display: flex; justify-content: center; gap: calc(var(--R) * .3); min-height: var(--R); padding-bottom: calc(var(--R) * .3); border-bottom: .2vmin solid rgba(205, 180, 135, .4); }
.cb2-shield { display: grid; place-items: center; width: 100%; border-radius: calc(var(--R) * .3); background: linear-gradient(170deg, #c9a35a, #8a6a2a); font-family: var(--ui); font-weight: 800; font-size: calc(var(--R) * .4); letter-spacing: .1em; color: #2a1a08; }
.cb2-rows { display: flex; flex-direction: column; gap: calc(var(--R) * .14); }
.cb2-row { display: flex; align-items: center; gap: calc(var(--R) * .2); padding: calc(var(--R) * .06) calc(var(--R) * .2); border-radius: calc(var(--R) * .3); }
.cb2-row.now { background: rgba(255, 220, 150, .12); }
.cb2-row small { width: calc(var(--R) * .7); font-family: var(--ui); font-weight: 700; font-size: calc(var(--R) * .34); color: rgba(240, 220, 180, .5); text-align: right; }
.cb2-keys { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--R) * .08); margin-left: calc(var(--R) * .3); }
.cb2-keys i { width: calc(var(--R) * .3); aspect-ratio: 1; border-radius: 50%; background: #1a0f08; box-shadow: inset 0 .1vmin .2vmin rgba(0, 0, 0, .8); }
.cb2-keys i.k { background: radial-gradient(circle at 35% 30%, #fff3c4, #d8a838); }
.cb2-keys i.w { background: radial-gradient(circle at 35% 30%, #ffffff, #b8b8c0); }
#cbPhone { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; --R: 34px; }
.cb2-input, .cb2-pal, .cb2-mycode { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cb2-input button, .cb2-pal button { padding: 6px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .05); cursor: pointer; }
.cb2-input button { --R: 44px; } .cb2-input button.on { box-shadow: 0 0 0 3px var(--champagne); }
.cb2-input .cb2-peg.empty { width: 44px; margin: 0; }
.cb2-mycode { align-items: center; --R: 26px; } .cb2-mycode small { font-family: var(--ui); font-weight: 700; font-size: 12px; color: var(--gold-ink); }
.cb2-rows.small { --R: 24px; padding: 8px; border-radius: 12px; background: rgba(60, 36, 18, .6); }

/* ---------- Star Jump ---------- */
body[data-game="starjump"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 230, 200, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #2a2a3e 0%, #1c1c2c 55%, #0a0a12 100%); }
body[data-game="starjump"] #print, body[data-game="starjump"] .fan, body[data-game="starjump"] .sizer { display: none; }
#starjump { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: var(--B); z-index: 2; filter: drop-shadow(0 2vmin 4vmin rgba(0, 0, 0, .6)); }
.sj-board { display: block; width: 100%; height: auto; }
#sjPhone { width: min(96vw, 440px); }
#sjPhone .sj-board { transition: transform .4s; }
body[data-game="starjump"] { background: radial-gradient(ellipse 140% 100% at 50% 40%, #1c1c2c 0%, #0a0a12 70%); }
body[data-game="starjump"] #handWrap, body[data-game="starjump"] #handHint { display: none; }
body[data-game="starjump"] .tk-msg { display: none; }

/* ---------- Dominoes ---------- */
body[data-game="dominoes"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 255, 230, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #1f4a5a 0%, #15343f 55%, #071418 100%); }
body[data-game="dominoes"] #print { display: none; }
.domino { display: block; height: auto; }
.domino .dm-face { fill: #fbf6ea; stroke: #b8ad96; stroke-width: .8; }
.domino .dm-split { stroke: #8a7a5a; stroke-width: .8; }
.domino .dm-pips { fill: #1a1612; }
#dominoes { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 72vmin; display: flex; flex-direction: column; align-items: center; gap: 2vmin; z-index: 2; }
.dm-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4vmin; }
.dm-line .domino { width: var(--dw); filter: drop-shadow(0 .3vmin .4vmin rgba(0, 0, 0, .5)); }
.dm-line .domino.v { width: calc(var(--dw) * .5); }
.dm-line .domino.end .dm-face { stroke: #e3c88c; stroke-width: 1.6; }
.dm-line .domino.last { animation: trPop .35s cubic-bezier(.2, .9, .3, 1.4); }
.dm-empty { font-family: var(--serif); font-style: italic; font-size: 2vmin; color: var(--mute); }
.dm-end { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.dm-end.l { left: -12vmin; } .dm-end.r { right: -12vmin; }
.dm-end small { font-family: var(--ui); font-weight: 800; font-size: 1.2vmin; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.dm-end b { font-family: var(--num); font-weight: 400; font-size: 6vmin; color: var(--ivory); }
.dm-bone { font-family: var(--ui); font-weight: 700; font-size: 1.4vmin; letter-spacing: .1em; color: var(--gold-ink); }
.dm-bone b { color: var(--ivory); font-size: 1.4em; }
#doPhone { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.do-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.do-hand button { width: 46px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s, opacity .15s; }
.do-hand button .domino { width: 100%; }
.do-hand button.ok { transform: translateY(-6px); filter: drop-shadow(0 0 6px rgba(255, 220, 150, .7)); }
.do-hand button.dim { opacity: .45; }
.do-hand button.sel .dm-face { stroke: #e3c88c; stroke-width: 2.5; }
body[data-game="dominoes"] { background: linear-gradient(180deg, #15343f, #071418); }
body[data-game="dominoes"] #handWrap, body[data-game="dominoes"] #handHint { display: none; }

/* ---------- Cornerstones ---------- */
body[data-game="cornerstones"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 230, 255, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #3a3e48 0%, #262a32 55%, #0c0d10 100%); }
body[data-game="cornerstones"] #print, body[data-game="cornerstones"] .fan, body[data-game="cornerstones"] .sizer, body[data-game="cornerstones"] .tk-msg { display: none; }
#cornerstones { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: var(--B); z-index: 2; filter: drop-shadow(0 2vmin 4vmin rgba(0, 0, 0, .6)); }
.cs-board { display: block; width: 100%; height: auto; }
.cs-dot { display: inline-block; width: 1.4vmin; height: 1.4vmin; border-radius: 3px; margin-right: .3vmin; vertical-align: middle; }
#csPhone { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
.cs-tools { display: flex; gap: 6px; } .cs-tools .panel-btn { flex: 1; min-width: 0; padding: 10px 4px; }
.cs-tray { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cs-tray button { aspect-ratio: 1; padding: 4px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.cs-tray button.sel { background: rgba(255, 220, 150, .25); box-shadow: 0 0 0 2px var(--champagne); }
.cs-piece { width: 100%; height: 100%; }
body[data-game="cornerstones"] { background: linear-gradient(180deg, #262a32, #0c0d10); }
body[data-game="cornerstones"] #handWrap, body[data-game="cornerstones"] #handHint { display: none; }

/* ---------- Shape & Shade ---------- */
body[data-game="shapeshade"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 230, 255, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #34343a 0%, #232328 55%, #0b0b0d 100%); }
body[data-game="shapeshade"] #print, body[data-game="shapeshade"] .fan, body[data-game="shapeshade"] .sizer { display: none; }
.qs-tile { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 1; box-sizing: border-box; border-radius: 14%; background: linear-gradient(160deg, #2a2a30, #121216); box-shadow: 0 .14em .25em rgba(0, 0, 0, .5), inset 0 0 0 .04em rgba(255, 255, 255, .12); color: var(--c); font-size: 1em; line-height: 1; }
.qs-tile.last { box-shadow: 0 0 0 .06em #f3e6c8, 0 .14em .25em rgba(0, 0, 0, .5); }
.qs-tile.staged { box-shadow: 0 0 0 .07em var(--champagne), 0 .2em .4em rgba(0, 0, 0, .6); transform: translateY(-.05em); }
.qs-board { display: grid; gap: 3%; }
.qs-at, .qs-spot { min-width: 0; min-height: 0; }
.qs-spot { padding: 0; border: 0; border-radius: 14%; background: rgba(255, 220, 150, .12); box-shadow: inset 0 0 0 .04em rgba(255, 220, 150, .45); cursor: pointer; }
#shapeshade { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1.6vmin; z-index: 2; }
#shapeshade .qs-board { width: min(var(--maxW), calc(var(--maxH) * var(--W) / var(--H)), calc(7vmin * var(--W))); aspect-ratio: var(--W) / var(--H); font-size: min(calc(var(--maxW) / var(--W) * .62), calc(var(--maxH) / var(--H) * .62), 4.4vmin); gap: .4vmin; }
.qs-bag { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 1.4vmin; letter-spacing: .1em; color: var(--gold-ink); }
#qsPhone { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
.qs-scroll { max-height: 46vh; overflow: auto; border-radius: 12px; background: rgba(0, 0, 0, .25); padding: 6px; display: grid; place-items: center; }
#qsPhone .qs-board { width: calc(var(--W) * 34px); aspect-ratio: var(--W) / var(--H); font-size: 21px; gap: 2px; }
.qs-hand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.qs-hand button { padding: 0; border: 0; background: none; font-size: 30px; cursor: pointer; transition: transform .15s; }
.qs-hand button .qs-tile { font-size: 30px; }
.qs-hand button.sel { transform: translateY(-8px); } .qs-hand button.sel .qs-tile { box-shadow: 0 0 0 3px var(--champagne); }
body[data-game="shapeshade"] { background: linear-gradient(180deg, #232328, #0b0b0d); }
body[data-game="shapeshade"] #handWrap, body[data-game="shapeshade"] #handHint { display: none; }

/* ---------- Line Up 5 ---------- */
body[data-game="lineup5"] #felt { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(220, 255, 230, .07), transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, #2a5a40 0%, #1b3f2c 55%, #081a10 100%); }
body[data-game="lineup5"] #print, body[data-game="lineup5"] .sizer, body[data-game="lineup5"] .tk-msg { display: none; }
#lineup5 { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: var(--B); z-index: 2; }
.l5-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .4%; padding: 1%; border-radius: 1.4%; background: #3a2414; box-shadow: 0 2vmin 5vmin rgba(0, 0, 0, .6), inset 0 0 0 .2vmin rgba(205, 180, 135, .5); container-type: inline-size; }
.l5-cell { position: relative; aspect-ratio: 5 / 6; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6%; background: linear-gradient(170deg, #fffaf0, #ece2cc); color: #1c1a1f; font-family: var(--num); font-size: 2.6cqi; line-height: 1; }
.l5-cell span { display: flex; flex-direction: column; align-items: center; }
.l5-cell span i { font-style: normal; font-size: 1.1em; }
.l5-cell.red { color: var(--card-red); }
.l5-cell.free { background: radial-gradient(circle, #f3d67a, #c9922a); color: #5a3a08; font-size: 4cqi; }
.l5-cell.ok { box-shadow: 0 0 0 .5cqi #ffe08a, 0 0 2cqi rgba(255, 224, 138, .8); z-index: 1; cursor: pointer; }
.l5-chip { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 50%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 .4cqi .8cqi rgba(0, 0, 0, .6); opacity: .92; }
.l5-chip.locked { box-shadow: 0 0 0 .5cqi #f3d67a, 0 .4cqi .8cqi rgba(0, 0, 0, .6); }
.l5-chip.last { animation: wfPulse 1s 3; }
.l5-gone { position: absolute; font-size: 4cqi; color: #c0392b; }
.l5-team { color: var(--c); font-weight: 800; }
#l5Phone { width: min(96vw, 440px); }
body[data-game="lineup5"] { background: linear-gradient(180deg, #1f4a33, #081a10); }