/* Match the boards in legacy-frontend: original frames, checker images and hints. */
.demo:not([data-game="tic-tac-toe"]) .demo-stage{background:#f1f1f1}
.native-board-frame{width:100%;max-width:400px;aspect-ratio:1;padding:5px;background:url('/site-assets/game/board-frame.png') center/contain no-repeat;box-shadow:0 0 60px #f7f7f7;flex-shrink:0}
.native-board-frame .board{width:100%;height:100%;max-width:none;aspect-ratio:1;padding:12px;gap:4px;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none}
.native-board-frame .cell{min-width:0;min-height:0;background:#fff;border-radius:2px;box-shadow:0 0 2px #000}
.native-board-frame .cell.shade{background:#7b7b7b}
.native-board-frame .piece{width:90%;height:90%;max-width:48px;max-height:48px;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none;position:relative;z-index:2}
.native-board-frame .cell.target{box-shadow:0 0 2px #000}
.native-board-frame .cell.target:after{display:none}
.move-hint{width:90%;height:90%;max-width:48px;max-height:48px;object-fit:contain;position:absolute;z-index:3;pointer-events:none;animation:mark-in .2s ease-out}
.native-backgammon{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:14px}
.backgammon-frame{width:100%;aspect-ratio:1.08;padding:8px;border:2px solid #ffb835;border-radius:16px;background:linear-gradient(145deg,#fffdf8,#ece7dc);box-shadow:0 0 60px #f7f7f7,1px 3px 8px #0003,inset 0 1px 0 #fff}
.native-backgammon .backgammon-board{width:100%;height:100%;max-width:none;aspect-ratio:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 28px repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:0;border:0;border-radius:9px;overflow:hidden;background:linear-gradient(90deg,#fbf8f1,#f2eee5 50%,#fbf8f1);box-shadow:inset 0 0 0 1px #46464629,inset 0 0 18px #0000000d}
.native-backgammon .bg-point{height:100%;padding:0;gap:0;border-radius:0;outline:none;justify-content:flex-start}
.native-backgammon .bg-point.lower{justify-content:flex-end}
.native-backgammon .bg-point:before{display:none}
.bg-triangle{position:absolute;inset:0 2px;opacity:.92;clip-path:polygon(0 0,100% 0,50% 88%)}
.lower .bg-triangle{clip-path:polygon(50% 12%,100% 100%,0 100%)}
.bg-triangle.orange{background:linear-gradient(90deg,#ffb22a,#ffc759,#ffad20)}
.bg-triangle.silver{background:linear-gradient(90deg,#dadada,#f3f3f3,#d1d1d1)}
.native-backgammon .point-chips{height:auto;gap:0;padding-top:4px;position:relative}
.native-backgammon .lower .point-chips{padding-top:0;padding-bottom:4px}
.native-backgammon .bg-chip{width:88%;max-width:29px;margin-bottom:-4px;position:relative;box-shadow:0 1px 2px #0004,inset 0 0 0 2px #ffffff24,inset 0 0 0 4px #0000000d}
.native-backgammon .lower .bg-chip{margin-bottom:0;margin-top:-4px}
.native-backgammon .bg-chip.white{border:1px solid #d2bd91;background:radial-gradient(circle at 38% 30%,#fffdf5,#e7d9bc 72%,#bda576)}
.native-backgammon .bg-chip.black{border:1px solid #080808;background:radial-gradient(circle at 38% 30%,#494949,#171717 68%,#030303)}
.bg-count{position:absolute;bottom:0;right:1px;font-size:12px;padding:0 3px;background:#fff;border-radius:5px;z-index:4}
.bg-bar{grid-column:7;grid-row:1/3;padding:6px 1px;border-left:1px solid #8f765a57;border-right:1px solid #8f765a57;background:linear-gradient(90deg,#ded7c9,#f9f5ec 50%,#d8d0c0)}
.bg-target{position:absolute;left:50%;bottom:24%;width:13px;height:13px;transform:translateX(-50%);border:2px solid #fff;background:#ffb835;border-radius:50%;box-shadow:0 1px 4px #0003;z-index:4}
.lower .bg-target{bottom:auto;top:24%}
.native-backgammon .dice{position:static;transform:none;min-height:43px;padding:6px 12px;gap:6px;border:1.5px solid #ffb835;border-radius:22px;background:#fffffff5;align-items:center}
.native-backgammon .die{width:27px;height:27px;padding:3px;border:1px solid #ffb835;border-radius:7px;background:linear-gradient(145deg,#fffdf6,#eadfc8);box-shadow:0 2px 3px #0002;color:#232323}
.native-backgammon .die .pips{gap:1px}
.native-backgammon .die .pips i.dot{width:4px;height:4px;align-self:center;justify-self:center}
.domino-table{max-width:400px;gap:16px;min-height:0}
.domino-frame{width:100%;aspect-ratio:1;padding:9px;border-radius:7px;background:#777;box-shadow:0 0 60px #f7f7f7,1px 2px 7px #0003}
.domino-frame .chain{width:100%;height:100%;min-height:0;padding:12px;gap:2px;border:0;border-radius:3px;background:radial-gradient(circle at 22% 18%,#ffb8351c,transparent 22%),radial-gradient(circle at 72% 70%,#ffffffcc,transparent 32%),repeating-linear-gradient(135deg,#00000005 0 1px,transparent 1px 8px),#f2f2f2;box-shadow:inset 0 0 0 1px #00000014;align-content:center}
.domino-table .domino-tile{border:1px solid #232323b3;border-radius:5px;background:linear-gradient(145deg,#fff,#e9e9e9);box-shadow:1px 2px 3px #00000047,inset 0 1px 0 #fff;color:#232323;padding:3px;width:76px;height:38px}
.domino-table .tile-half+.tile-half{border-color:#191919c2}
.domino-table .hand-tile{width:38px;height:76px}
.domino-table .hand{gap:10px}
.domino-table .hand-tile.target{outline-color:#ffb835}
.domino-table .hand-label{color:#555;font-size:12px}
.domino-table .chain-empty{color:#666}
/* The repaired illustration has a yellow studio background; fade its outer edges into the hero. */
.hero-art>img{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.hero h1{font-size:clamp(58px,6.5vw,96px)}
@media(max-width:760px){.hero h1{font-size:clamp(52px,12vw,88px)}.native-board-frame .board{padding:12px;gap:4px}.native-backgammon .backgammon-board{grid-template-columns:repeat(6,minmax(0,1fr)) 24px repeat(6,minmax(0,1fr))}.demo-stage-top{gap:12px;align-items:flex-start}.demo-kind{white-space:normal}.demo-name{line-height:1.3}.domino-table .hand{gap:8px}.domino-table .hand-tile{width:32px;height:64px}.domino-table .chain .domino-tile{width:66px;height:33px}}
@media(max-width:370px){.native-board-frame .board{gap:3px;padding:10px}.domino-table .hand{gap:6px}.domino-table .hand-tile{width:29px;height:58px}.hero h1{font-size:50px}.demo-name{font-size:16px}}