.backgammon-page{--bg-ink:#15211d;--bg-green:#204b3b;--bg-cream:#f3ead8;--bg-gold:#d7aa54;--bg-walnut:#4a2519;--bg-leather:#245447;min-height:100vh;color:var(--bg-ink);background:#e8dfcf}.bg-shell{width:min(1180px,100% - 40px);margin:auto}.bg-hero{text-align:center;background:radial-gradient(circle at 50% 10%,#fff9,#0000 42%),#e8dfcf;flex-direction:column;justify-content:center;align-items:center;min-height:620px;padding:80px 20px;display:flex}.bg-kicker{color:var(--bg-green);letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:850}.bg-hero h1{letter-spacing:-.065em;margin:20px 0;font:700 clamp(58px,9vw,118px)/.83 Georgia,serif}.bg-hero h1 em{color:var(--bg-green);font-weight:400}.bg-hero>p:not(.bg-kicker){color:#52605a;max-width:650px;font-size:19px;line-height:1.6}.bg-primary{border:1px solid var(--bg-green);background:var(--bg-green);color:#fff;cursor:pointer;border-radius:100px;justify-content:center;margin-top:20px;padding:13px 20px;font-weight:800;display:inline-flex}.bg-primary:disabled{opacity:.55}.bg-game{background:#f8f3e9;border:1px solid #cfc4b2;border-radius:24px;min-width:0;padding:28px;scroll-margin-top:90px;overflow:hidden;box-shadow:0 30px 80px #493a2422}.bg-toolbar{align-items:end;gap:24px;margin-bottom:22px;display:flex}.bg-toolbar>div{margin-right:auto}.bg-toolbar h2{margin:5px 0 0;font:44px Georgia,serif}.bg-toolbar label{text-transform:uppercase;gap:7px;font-size:11px;font-weight:800;display:grid}.bg-toolbar select{background:#fff;border:1px solid #bdb29f;border-radius:8px;min-width:150px;padding:11px}.bg-toolbar .bg-primary{border-radius:8px;margin:0}.bg-scoreboard{color:#fff;background:radial-gradient(circle at 15% 0,#466a5d55,#0000 40%),linear-gradient(145deg,#17251f,#0f1714);border:1px solid #ffffff1c;border-radius:16px 16px 0 0;grid-template-columns:minmax(170px,.8fr) minmax(360px,1.7fr) auto;align-items:stretch;gap:12px;min-height:92px;padding:12px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff14}.bg-score-status{flex-direction:column;justify-content:center;gap:4px;padding:5px 8px;display:flex}.bg-score-status .bg-kicker{color:#e8c57b}.bg-score-status strong{font-size:17px}.bg-score-status small,.bg-player-card small{color:#aebbb5;line-height:1.35}.bg-player-scores{grid-template-columns:1fr 1fr;gap:8px;display:grid}.bg-player-card{background:#ffffff08;border:1px solid #ffffff14;border-radius:11px;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;padding:9px 11px;display:grid}.bg-player-card.active{background:#e0b55c13;border-color:#e0b55c;box-shadow:inset 0 0 18px #e0b55c0d}.bg-player-card>div{min-width:0}.bg-player-card strong,.bg-player-card small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.bg-player-card>b{color:#e6c06f;background:#0b100e;border-radius:8px;place-items:center;width:30px;height:30px;font-size:17px;display:grid}.bg-score-checker{aspect-ratio:1;border-radius:50%;width:32px;box-shadow:inset 0 3px 5px #fff8,inset 0 -5px 7px #0005,0 4px 8px #0008}.bg-score-checker.white{background:radial-gradient(circle at 36% 30%,#fffdf7 0 18%,#ead9b8 62%,#a78f69 100%);border:2px solid #fffaf0}.bg-score-checker.black{background:radial-gradient(circle at 36% 30%,#68716d 0 8%,#29322e 50%,#080c0a 100%);border:2px solid #0a0f0d}.bg-score-tools{justify-content:flex-end;align-items:center;gap:10px;min-width:128px;display:flex}.bg-cube{color:#27312d;background:linear-gradient(145deg,#fffdf6,#c8b997);border:1px solid #efe5cf;border-radius:9px;place-items:center;width:48px;height:48px;display:grid;transform:rotate(-3deg);box-shadow:inset 2px 2px 4px #fff,inset -4px -4px 7px #6c5d4077,0 8px 12px #0007}.bg-cube small{letter-spacing:.08em;text-transform:uppercase;font-size:7px}.bg-cube b{font-size:20px;line-height:1}.bg-dice{perspective:500px;gap:8px;min-width:54px;display:flex}.bg-die{background:linear-gradient(145deg,#fefbf3,#c5b996);border:1px solid #fff9;border-radius:11px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:48px;height:48px;padding:7px;animation:.38s cubic-bezier(.2,.9,.25,1.2) bg-die-land;display:grid;transform:rotate(2deg);box-shadow:inset 3px 3px 5px #fff,inset -5px -6px 8px #675b4177,0 8px 13px #0009}.bg-die:nth-child(2){transform:rotate(-5deg)}.bg-die span{place-items:center;display:grid}.bg-die span.shown:after{content:"";background:radial-gradient(circle at 35% 30%,#59615d,#0c100e 72%);border-radius:50%;width:7px;height:7px;box-shadow:inset 0 1px 1px #fff5}.bg-dice.is-rolling .bg-die{animation:.62s cubic-bezier(.35,.1,.2,1) infinite bg-die-roll}.bg-dice.is-rolling .bg-die:nth-child(2){animation-delay:-.19s}@keyframes bg-die-roll{0%{transform:translateY(0)rotateX(0)rotateY(0)rotate(0)}28%{transform:translateY(-18px)rotateX(150deg)rotateY(95deg)rotate(45deg)}62%{transform:translateY(4px)rotateX(290deg)rotateY(230deg)rotate(160deg)}to{transform:translateY(0)rotateX(360deg)rotateY(360deg)rotate(360deg)}}@keyframes bg-die-land{0%{opacity:.6;transform:translateY(-16px)rotateX(90deg)rotate(18deg)scale(.84)}to{opacity:1;transform:translateY(0)rotateX(0)rotate(2deg)scale(1)}}.bg-table{background:linear-gradient(90deg,#ffffff08,#0000 20% 80%,#0003),repeating-linear-gradient(88deg,#5a2e1f 0 16px,#4a2419 17px 34px,#633625 35px 50px);border:10px solid #3a1c13;border-radius:0 0 18px 18px;grid-template-columns:clamp(48px,6vw,76px) minmax(0,1fr) clamp(48px,6vw,76px);gap:10px;min-width:0;padding:14px;display:grid;box-shadow:inset 0 0 0 2px #a46b42,inset 0 0 24px #160906,0 18px 34px #3b1f1638}.bg-board{aspect-ratio:1.72;background:linear-gradient(90deg,#0000 49.7%,#0c1916aa 50%,#0000 50.3%),linear-gradient(#fff1,#0000 48%,#0a1714 49.7% 50.3%,#0000 52%),repeating-linear-gradient(92deg,#2f6657 0 18px,#2b5e51 19px 36px);border:5px solid #2a160f;border-radius:8px;grid-template-rows:1fr 1fr;grid-template-columns:minmax(0,1fr) clamp(38px,6.5vw,68px) minmax(0,1fr);min-width:0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 28px #081a15aa,inset 0 0 0 2px #7b9a8c55}.bg-board:after{content:"";z-index:6;pointer-events:none;background:linear-gradient(#06100dcf,#ffffff24,#06100dcf);height:4px;position:absolute;top:calc(50% - 2px);left:0;right:0;box-shadow:0 -1px #0007,0 2px #fff1}.bg-quadrant{z-index:2;grid-template-columns:repeat(6,minmax(0,1fr));min-width:0;display:grid;position:relative}.bg-quadrant.q1{grid-area:1/1}.bg-quadrant.q2{grid-area:1/3}.bg-quadrant.q3{grid-area:2/1}.bg-quadrant.q4{grid-area:2/3}.bg-point{color:#f9ebcf;cursor:default;background:0 0;border:0;min-width:0;padding:0;position:relative;overflow:visible}.bg-point:before{content:"";z-index:0;clip-path:polygon(0 0,100% 0,50% 88%);filter:drop-shadow(0 2px 1px #0006);background:linear-gradient(90deg,#fff2,#0000 20% 80%,#0003),linear-gradient(#d8b66d,#ad7c3d);position:absolute;inset:0 3% 10%}.bg-point.dark:before{background:linear-gradient(90deg,#fff1,#0000 20% 80%,#0004),linear-gradient(#9f3c2b,#672319)}.bg-point.bottom:before{clip-path:polygon(50% 12%,100% 100%,0 100%);inset:10% 3% 0}.bg-point-number{z-index:5;color:#f8ead4aa;font-size:9px;position:absolute;top:3px;left:50%;transform:translate(-50%)}.bg-point.bottom .bg-point-number{top:auto;bottom:3px}.bg-point.selectable{cursor:pointer}.bg-point.selectable:hover .bg-checker,.bg-point.selected .bg-checker{outline-offset:1px;filter:brightness(1.08);outline:3px solid #f3c65d}.bg-point.target:after{content:"";z-index:4;aspect-ratio:1;background:#f0bd42b8;border:2px solid #fff4bd;border-radius:50%;width:clamp(12px,36%,24px);position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #f0bd4222,0 3px 8px #0008}.bg-point.bottom.target:after{top:30%}.bg-checker-stack{z-index:3;flex-direction:column;align-items:center;width:88%;display:flex;position:absolute;top:9%;left:6%}.bg-checker-stack.bottom{flex-direction:column-reverse;top:auto;bottom:9%}.bg-checker{aspect-ratio:1;border-radius:50%;flex:none;width:min(100%,43px);display:block;box-shadow:inset 0 3px 5px #fff9,inset 0 -6px 7px #0005,0 4px 6px #0008}.bg-checker+.bg-checker{margin-top:-8px}.bg-checker-stack.bottom .bg-checker+.bg-checker{margin-top:0;margin-bottom:-8px}.bg-checker.white{background:radial-gradient(circle at 35% 27%,#fffdf7 0 14%,#0000 15%),radial-gradient(circle,#f7e8c8 0 55%,#c8ad7f 72%,#8a704d 100%);border:2px solid #fffaf0}.bg-checker.black{background:radial-gradient(circle at 35% 27%,#7b8580 0 8%,#0000 9%),radial-gradient(circle,#38433e 0 52%,#18201d 72%,#060a08 100%);border:2px solid #090d0b}.bg-checker-stack em{color:#fff;background:#14201c;border:2px solid #f8e5b8;border-radius:100px;place-items:center;min-width:20px;height:20px;padding:0 5px;font-size:11px;font-style:normal;font-weight:900;display:grid;position:absolute;bottom:-3px;right:-2px;box-shadow:0 3px 7px #0008}.bg-bar{z-index:8;color:#f6e8ca;background:linear-gradient(90deg,#0004,#ffffff15 30%,#0000 62%,#0006),repeating-linear-gradient(88deg,#4c261a 0 10px,#5d3020 11px 21px);border:0;border-left:4px solid #1a0c08;border-right:4px solid #1a0c08;grid-area:1/2/3;grid-template-rows:1fr 42px 1fr;padding:0 4px;display:grid;position:relative;box-shadow:inset 0 0 14px #170805,0 0 0 1px #a66a3b55}.bg-bar:disabled{opacity:1}.bg-bar.selectable{cursor:pointer}.bg-bar.selected,.bg-bar.selectable:hover{box-shadow:inset 0 0 0 4px #edbd50,inset 0 0 14px #170805}.bg-bar-label{z-index:10;color:#fff4cf;letter-spacing:.13em;text-transform:uppercase;width:max-content;font-size:8px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.bg-bar-zone{justify-content:center;align-items:flex-start;padding-top:10px;display:flex;overflow:hidden}.bg-bar-zone.bottom{align-items:flex-end;padding-top:0;padding-bottom:10px}.bg-bar-zone .bg-checker-stack,.bg-off-tray .bg-checker-stack{width:90%;position:relative;top:auto;bottom:auto;left:auto}.bg-checker-stack.compact .bg-checker{width:min(100%,38px)}.bg-board-cut{z-index:11;background:#190d09;border-top:4px solid #0b0503;border-bottom:4px solid #0b0503;flex-direction:column;justify-content:space-around;align-items:center;display:flex;position:relative;box-shadow:inset 0 4px 8px #000,0 2px #ffffff18}.bg-board-cut i{background:linear-gradient(#f0ca69,#866324 48%,#f3d780 52%,#6f4b16);border-radius:2px;width:66%;height:7px;box-shadow:0 1px 2px #000}.bg-off-tray,.bg-off{color:#f6e8cf;background:linear-gradient(90deg,#0005,#ffffff12 48%,#0004),#5a2d1e;border:2px solid #28130d;border-radius:9px;min-width:0;box-shadow:inset 0 0 12px #140704,0 2px #a8754a44}.bg-off-tray{text-align:center;grid-template-rows:auto 1fr 1fr;gap:5px;padding:7px 5px;display:grid}.bg-off-tray>span,.bg-off>span{letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:900}.bg-off-tray>div{flex-direction:column;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.bg-off-tray b{color:#e7bd66;background:#101713;border-radius:50%;place-items:center;width:21px;height:21px;font-size:10px;display:grid;position:absolute;bottom:2px;right:2px}.bg-off{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:5px;display:flex}.bg-off b{font-size:16px}.bg-off.target{outline-offset:-5px;cursor:pointer;outline:4px solid #f2c94c}.bg-note{color:#68736e;margin:16px 4px 0;font-size:12px;line-height:1.55}.bg-info{grid-template-columns:repeat(3,1fr);gap:14px;padding-top:80px;display:grid}.bg-info article{border-top:1px solid #bbae99;padding:30px}.bg-info span{color:var(--bg-green);font-size:10px}.bg-info h2{font:30px Georgia,serif}.bg-info p,.bg-rules>p{color:#59645f;line-height:1.7}.bg-rules{grid-template-columns:1fr 1fr;gap:80px;padding-top:90px;padding-bottom:90px;display:grid}.bg-rules h2{margin:10px 0;font:50px/1 Georgia,serif}.bg-back{text-align:center;border-top:1px solid #c8bca9;padding:25px}.backgammon-page button:focus-visible,.backgammon-page a:focus-visible,.backgammon-page select:focus-visible{outline-offset:3px;outline:3px solid #f2c94c}@media (max-width:900px){.bg-toolbar{flex-wrap:wrap;align-items:stretch}.bg-toolbar>div{width:100%}.bg-scoreboard{grid-template-columns:1fr auto}.bg-player-scores{grid-area:2/1/auto/-1}.bg-score-tools{grid-area:1/2}.bg-table{border-width:7px;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;padding:8px}.bg-board{aspect-ratio:1.48;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}.bg-checker{width:min(100%,34px)}.bg-info,.bg-rules{grid-template-columns:1fr;gap:10px}}@media (max-width:560px){.bg-shell{width:calc(100% - 12px)}.bg-game{border-radius:14px;padding:7px}.bg-toolbar{gap:11px;padding:11px}.bg-toolbar h2{font-size:32px}.bg-toolbar label,.bg-toolbar select,.bg-toolbar .bg-primary{width:100%}.bg-scoreboard{border-radius:12px 12px 0 0;grid-template-columns:1fr;gap:7px}.bg-score-status,.bg-score-tools{grid-area:auto/1}.bg-score-status{padding-right:118px}.bg-score-tools{justify-content:flex-end;position:absolute;right:16px}.bg-player-scores{grid-area:auto/1;grid-template-columns:1fr}.bg-player-card{grid-template-columns:28px minmax(0,1fr) auto;padding:7px 8px}.bg-score-checker{width:27px}.bg-die{width:39px;height:39px;padding:6px}.bg-die span.shown:after{width:6px;height:6px}.bg-cube{width:39px;height:39px}.bg-table{border-width:5px;border-radius:0 0 10px 10px;grid-template-columns:30px minmax(0,1fr) 30px;gap:3px;padding:5px}.bg-board{aspect-ratio:1.32;border-width:3px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}.bg-point:before{left:1%;right:1%}.bg-checker{border-width:1px;width:min(100%,25px)}.bg-checker+.bg-checker{margin-top:-5px}.bg-checker-stack.bottom .bg-checker+.bg-checker{margin-bottom:-5px}.bg-point-number{display:none}.bg-bar{border-left-width:2px;border-right-width:2px;grid-template-rows:1fr 30px 1fr}.bg-bar-label{display:none}.bg-board-cut i{height:5px}.bg-off-tray,.bg-off{padding:3px 1px}.bg-off-tray>span,.bg-off>span{writing-mode:vertical-rl;font-size:7px}.bg-off-tray .bg-checker-stack{display:none}.bg-off-tray b{position:static}.bg-off b{font-size:11px}.bg-info{padding-top:45px}.bg-rules{padding:55px 14px}.bg-hero{min-height:540px}}@media (prefers-reduced-motion:reduce){.backgammon-page *,.backgammon-page :before,.backgammon-page :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.bg-hero-actions{gap:10px;display:flex}.bg-secondary{color:var(--bg-green);background:0 0}.bg-friend{color:#fff;background:#17211d;border-radius:24px;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:44px;scroll-margin-top:90px;display:grid}.bg-friend h2{margin:8px 0;font:46px Georgia,serif}.bg-friend p{color:#bdc7c2}.bg-lobby,.bg-invite{gap:12px;display:grid}.bg-lobby label{text-transform:uppercase;gap:7px;font-size:11px;font-weight:800;display:grid}.bg-lobby input,.bg-invite input{color:#fff;background:#26332e;border:1px solid #617069;border-radius:8px;width:100%;padding:13px}.bg-lobby .bg-check{text-transform:none;grid-template-columns:auto 1fr;align-items:center;gap:9px;font-weight:600;display:flex}.bg-lobby .bg-check input{width:18px;height:18px}.bg-cube-response{gap:8px;display:flex}.bg-cube-response .bg-primary{margin:0}.bg-lobby .bg-primary,.bg-invite .bg-primary{border-radius:8px;margin:0}.bg-computer{padding-top:28px}.bg-friend-game{color:var(--bg-ink);background:#f8f3e9}.bg-friend-game .bg-toolbar h2{font-size:34px}@media (max-width:800px){.bg-friend{grid-template-columns:1fr;gap:25px}}@media (max-width:500px){.bg-hero-actions{flex-direction:column;width:100%}.bg-friend{border-radius:14px;padding:25px 18px}}