html{color-scheme:dark;background:#03121e}body{margin:0;background:#03121e;color:#f4e9d3}*{box-sizing:border-box}#backgammon-app{min-height:100dvh;background:linear-gradient(#03121e55,#03121eaa),url('../../assets/backgammon/royal-terrace.webp') center/cover fixed;padding:12px max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));font-family:var(--rosa-font-interface)}#backgammon-app .rosa-header{border:3px double #c99c4d;border-radius:20px;background:var(--rosa-menu-fill);box-shadow:inset 0 0 0 5px #03121e,0 8px 25px #0008;max-width:1800px;margin:auto}#backgammon-app .rosa-brand img{width:170px;object-fit:contain}#backgammon-app .rosa-panel{position:relative;background:var(--rosa-menu-fill);border:3px double #b68c48;border-radius:18px;padding:18px;box-shadow:inset 0 0 0 3px #03121e,inset 0 0 28px #0008,0 12px 25px #0006}#backgammon-app .rosa-panel:before,#backgammon-app .rosa-panel:after{content:'◆';position:absolute;pointer-events:none;color:#e6bd6a;text-shadow:0 1px #fff7,0 0 10px #cf962640;font-size:15px}#backgammon-app .rosa-panel:before{top:-10px;left:12px}#backgammon-app .rosa-panel:after{bottom:-10px;right:12px}.bg-layout{max-width:1700px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;margin:20px auto}.bg-left{padding-top:90px;min-width:0}.bg-left h2{font-size:18px;color:#f4cf83;margin:0 0 15px}.bg-modes{display:grid;gap:12px}.bg-modes .rosa-button{white-space:normal;min-height:52px}.bg-modes [aria-pressed=true]{background:linear-gradient(#ffe8ac,#b98228);color:#16150e;box-shadow:inset 0 1px 3px #fff,0 0 15px #d5a34266}.bg-stats{margin:20px 0;display:grid;gap:12px}.bg-stats>div{display:flex;justify-content:space-between;border-bottom:1px solid #cfa55633;padding:10px 0}.bg-left p{font-size:12px;color:#b5c4cf;line-height:1.6}.bg-center{min-width:0}.bg-title{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 10px}.bg-title h1{font-size:clamp(32px,4.2vw,68px);margin:0;text-transform:uppercase}.bg-title p{font-size:11px;letter-spacing:4px;color:#f4d492;margin:4px 0;text-align:center}.bg-title-checker{width:54px;height:54px;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#fff6ce 0,#f3d37e 24%,#b67a20 58%,#694111 75%,#d6a34d 80%);border:2px solid #f4d786;box-shadow:inset 0 0 0 6px #b67a2055,0 5px #68400e,0 10px 15px #0009;flex-shrink:0}.bg-player{display:flex;justify-content:space-between;padding:6px 10px;font-size:13px;color:#e5d7ba}.bg-player strong:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;background:radial-gradient(at 30% 20%,#fff2ba,#c18b2f);box-shadow:0 2px 3px #000}.bg-blue strong:before{background:radial-gradient(at 30% 20%,#8ce3ff,#062b55)}.bg-board-frame{padding:clamp(9px,1.3vw,20px);border:6px double #d1a052;border-radius:22px;background:linear-gradient(135deg,#613e20,#d4ad62 2%,#6d471e 4%,#231609 49%,#c49b4b 50%,#3c2713 52%,#8a5f27 98%);box-shadow:inset 0 2px 3px #fff6,0 8px 0 #422a11,0 15px 30px #000a;position:relative}.bg-board{padding:10px;display:flex;flex-direction:column;aspect-ratio:1.65;background:radial-gradient(ellipse at 50% 45%,#0e4555,#062434 70%);border:2px solid #c5a056;border-radius:10px;box-shadow:inset 0 8px 25px #000b;overflow:hidden}.bg-points{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));flex:1;min-height:0;gap:1px;position:relative}.bg-points:after{content:'';position:absolute;left:50%;height:100%;width:8px;transform:translateX(-50%);background:linear-gradient(90deg,#37200e,#b37c39,#37200e);box-shadow:0 0 0 1px #ddbe6d;pointer-events:none}.bg-point{position:relative;border:none;padding:0;background:none;min-width:0;display:flex;align-items:center;flex-direction:column;color:#e6ca8b;cursor:pointer;isolation:isolate;outline-offset:-3px}.bg-point:before{content:'';position:absolute;inset:4% 4% 0;background:linear-gradient(90deg,#bfa05a,#efdca0,#9e7632);clip-path:polygon(0 0,100% 0,50% 95%);z-index:-1;opacity:.78}.bg-point.navy:before{background:linear-gradient(90deg,#031321,#17677e,#041521);filter:drop-shadow(0 0 2px #ffe2a5)}.bg-bottom .bg-point{flex-direction:column-reverse}.bg-bottom .bg-point:before{transform:rotate(180deg)}.bg-point small{height:18px;font-size:10px;font-weight:bold;line-height:16px;z-index:2;text-shadow:0 1px 2px #000}.bg-stack{width:92%;position:relative;flex:1;min-height:0}.bg-checker{position:absolute;left:0;top:calc(var(--stack)*17%);width:100%;aspect-ratio:1;border-radius:50%;border:1px solid #f7d89a;background:radial-gradient(ellipse at 33% 20%,#fff6d2,#edd08a 27%,#bd8835 62%,#775019 78%,#e6bf63 82%);box-shadow:0 3px 0 #7d521d,0 5px 5px #0009,inset 0 1px 2px #fff8;z-index:1}.bg-checker i{position:absolute;inset:16%;border-radius:50%;border:1px solid #69461460;box-shadow:inset 0 2px 4px #68400b55,0 1px 0 #fff6}.bg-checker.sapphire{border-color:#91aeb9;background:radial-gradient(ellipse at 33% 20%,#7ec0d7,#1d5776 28%,#09283e 62%,#020d1c 78%,#486c7d 82%);box-shadow:0 3px 0 #020e1a,0 5px 5px #0009,inset 0 1px 2px #c1eeff77}.bg-checker.sapphire i{border-color:#bbdfff44;box-shadow:inset 0 2px 4px #0009,0 1px 0 #acd4dd33}.bg-bottom .bg-checker{top:auto;bottom:calc(var(--stack)*17%)}.bg-stack b{position:absolute;left:50%;top:40%;transform:translateX(-50%);z-index:3;background:#03121ed9;border:1px solid #dcb86a;border-radius:20px;min-width:20px;color:#fff1ca;font-size:11px}.bg-point.selected .bg-checker:last-of-type{outline:2px solid #fff1a1;filter:brightness(1.15);transform:translateY(-5px)}.bg-point.legal{background:#e6bd4c22;border-radius:8px;box-shadow:inset 0 0 0 2px #ffe48b}.bg-point.legal:after{content:'';position:absolute;top:55%;width:25%;aspect-ratio:1;border-radius:50%;background:#ffdf86;box-shadow:0 0 10px #e2b646}.bg-middle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:65px;margin:8px 0}.bg-bar,.bg-off{background:linear-gradient(110deg,#072236,#03121e);color:#ecd29a;border:1px solid #9c7942;border-radius:9px;display:flex;gap:8px;align-items:center;padding:8px;min-height:48px;min-width:0;font:inherit}.bg-bar>span{position:relative;display:flex;align-items:center;gap:5px}.bg-bar .bg-checker{position:relative;width:24px;top:auto}.bg-bar small,.bg-off small{font-size:11px}.bg-bar.selected,.bg-off.legal{outline:2px solid #ffdc80;box-shadow:0 0 16px #d9b05155}.bg-off{flex-wrap:wrap;justify-content:center;font-size:11px}.bg-off strong{display:flex;align-items:center;gap:3px}.gold-dot,.blue-dot{width:10px;height:10px;display:inline-block;background:#edc36e;border-radius:50%}.blue-dot{background:#367a9a}.bg-dice{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:45%}.bg-die{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px;width:42px;height:42px;border:1px solid #ffdf93;border-radius:9px;background:linear-gradient(145deg,#fff6d6,#d8b771);box-shadow:inset 0 1px 2px #fff,0 4px 0 #85602b,0 6px 10px #0009}.bg-die i{border-radius:50%}.bg-die .pip{background:radial-gradient(at 40% 25%,#314651,#04121c);box-shadow:inset 0 1px 2px #000}.bg-die.used{opacity:.5}.bg-dice-empty{font-family:Georgia,serif;letter-spacing:7px;color:#d9ba7280}.bg-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.bg-actions .rosa-button{min-height:48px;gap:8px;font-size:13px}.bg-actions img{width:26px;height:26px}.bg-actions .rosa-svg{width:26px;height:26px}.bg-actions [hidden]{display:none!important}#bg-status{text-align:center;font-size:14px;min-height:24px;color:#f7dda5;line-height:1.5;margin:12px 0}.bg-modal{max-width:560px;width:calc(100% - 24px);padding:0;background:none;border:none;color:#f2e4c6}.bg-modal::backdrop{background:#010b14c9;backdrop-filter:blur(6px)}.bg-modal .rosa-panel{padding:24px}.bg-dismiss{float:right;width:44px;height:44px}.bg-modal-body{line-height:1.8;font-size:15px}.bg-modal-body label{display:flex;align-items:center;justify-content:space-between;margin:14px 0;gap:10px}.bg-modal select{padding:9px;border:1px solid #bf984e;background:#051725;color:#f3dfb5;border-radius:8px;min-height:44px}.bg-checker{transition:transform .2s,filter .2s}.bg-no-motion .bg-checker{transition:none}@media(min-width:1700px){.bg-layout{grid-template-columns:280px minmax(0,1fr);gap:30px}.bg-board{max-height:730px}}@media(max-width:1000px){.bg-layout{grid-template-columns:190px minmax(0,1fr);gap:14px}.bg-left{padding-top:75px}#backgammon-app .rosa-panel{padding:12px}.bg-middle{gap:5px}.bg-bar small{display:none}.bg-title p{letter-spacing:2px}}@media(max-width:1000px){.bg-layout{display:flex;flex-direction:column;margin:14px auto;gap:16px}.bg-center{order:0}.bg-left{order:1;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.bg-left .rosa-online{margin:0}.bg-title h1{font-size:38px}.bg-title-checker{width:36px;height:36px}.bg-title p{font-size:9px}.bg-board-frame{padding:7px;border-width:4px;border-radius:15px}.bg-board{aspect-ratio:1.35;padding:5px}.bg-middle{min-height:76px}.bg-bar{padding:5px;gap:4px}.bg-off{max-width:80px;padding:5px;gap:3px}.bg-die{width:30px;height:30px;padding:5px;gap:2px}.bg-dice{gap:5px}.bg-point small{font-size:8px;height:14px}.bg-stack{width:97%}.bg-actions{gap:6px}.bg-actions .rosa-button{font-size:11px;padding:9px;flex:1 1 26%;min-width:0}.bg-actions img{width:22px;height:22px}.bg-player{font-size:11px}.bg-title{gap:10px}.bg-modes{gap:6px}.bg-left h2{font-size:15px}.bg-modes .rosa-button{font-size:12px}#backgammon-app .rosa-header-nav .rosa-button{font-size:11px}#backgammon-app .rosa-brand img{width:120px}}@media(max-width:420px){#backgammon-app{padding:7px}.bg-left{grid-template-columns:1fr}.bg-board{aspect-ratio:1.2}.bg-checker{box-shadow:0 2px 0 #79511d,0 3px 3px #000a}.bg-middle{min-height:72px}.bg-bar .bg-checker{width:16px}.bg-bar{font-size:10px;gap:3px}.bg-off{font-size:9px;max-width:65px}.bg-off small{font-size:9px}.bg-dice{max-width:42%;gap:4px}.bg-die{width:26px;height:26px;padding:4px;gap:2px}.bg-title h1{font-size:32px}.bg-point:focus-visible{outline:2px solid #fff1a1}.bg-title p{letter-spacing:1px}}@media(prefers-reduced-motion:reduce){.bg-checker{transition:none}}

/* Match the existing ROSA carved gold family, with a board sized to laptop height. */
#backgammon-app .rosa-panel::before{display:none}
#backgammon-app .rosa-panel::after,#backgammon-app .rosa-header::after{content:'';position:absolute;inset:-2px;border:0 solid transparent;border-image:url('../../assets/mahjong-reference/filigree-frame.webp') 115 / 28px / 0 stretch;background:none;pointer-events:none;z-index:3}
#backgammon-app .rosa-header{position:relative}
.bg-board-frame::after{content:'';position:absolute;inset:-4px;border:0 solid transparent;border-image:url('../../assets/mahjong-reference/filigree-frame.webp') 115 / 38px / 0 stretch;pointer-events:none}
@media(min-width:1001px){.bg-board-frame{max-width:calc((100dvh - 390px)*1.65);margin:auto;min-width:380px}.bg-title h1{font-size:clamp(32px,4vw,60px)}.bg-layout{margin-top:12px}.bg-player{max-width:calc((100dvh - 390px)*1.65);margin:auto}.bg-title{margin-bottom:4px}.bg-actions{padding:12px!important}.bg-left{padding-top:80px}}
@media(max-width:1000px){.bg-board-frame{width:100%;min-width:0}.bg-left{margin-bottom:12px}}
#backgammon-app .rosa-header-actions [data-label]{display:none}
#backgammon-app .rosa-header-actions .rosa-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:9px;display:grid;place-items:center}
#backgammon-app .rosa-header-actions .rosa-control-icon{width:24px;height:24px}
#backgammon-app .rosa-header-actions .rosa-art-icon{width:24px;height:24px}
#backgammon-app .bg-header-actions{display:flex;gap:8px}
@media(max-width:1000px){#backgammon-app .rosa-header{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:5px 9px;gap:4px;min-height:0}#backgammon-app .rosa-header-nav{grid-column:1/-1;grid-row:2;display:flex}#backgammon-app .bg-header-actions{grid-column:2;grid-row:1;margin:0}#backgammon-app .rosa-header-nav .rosa-button{min-width:0;min-height:47px;padding:3px 8px;gap:3px;display:flex;flex-direction:column;align-items:center;justify-content:center}#backgammon-app .rosa-header-nav .rosa-art-icon{width:24px;height:24px}.bg-title{margin-top:4px}.bg-title h1{font-size:31px}.bg-title-checker{width:30px;height:30px}.bg-title p{font-size:8px}.bg-layout{margin-top:10px}}
@media(prefers-reduced-motion:no-preference){.bg-die:not(.used){animation:bg-die-arrive .24s ease-out}@keyframes bg-die-arrive{from{transform:translateY(-8px) rotate(-10deg);opacity:.4}to{transform:none;opacity:1}}.bg-no-motion .bg-die{animation:none}}

@media(min-width:1001px){.bg-title h1{font-size:clamp(32px,3.2vw,58px);line-height:1}.bg-title p{line-height:1.25;margin:4px 0}.bg-title{gap:12px}#bg-status{margin:8px 0;line-height:1.4;min-height:20px}}

/* Balanced three-zone desktop composition; live online tools have their own panel. */
@media(min-width:1001px){.bg-layout{grid-template-columns:220px minmax(0,1fr) 240px;gap:20px}.bg-right{padding-top:80px;min-width:0}.bg-right .rosa-online{margin:0}.bg-right h2{font-size:18px}.bg-center{align-self:start}}
@media(min-width:1700px){.bg-layout{grid-template-columns:240px minmax(0,1fr) 260px;gap:24px}}
@media(max-width:1000px){.bg-left{display:block}.bg-right{padding:0;min-width:0;order:2}.bg-right .rosa-online{margin:0}}
@media(min-width:601px) and (max-width:1000px){.bg-layout{display:grid;grid-template-columns:1fr 1fr}.bg-center{grid-column:1/-1;grid-row:1}.bg-left{grid-column:1;grid-row:2}.bg-right{grid-column:2;grid-row:2}}

.bg-modal{max-height:calc(100dvh - 32px);overflow:auto}.bg-modal-body .rosa-button{margin:8px 8px 0 0;padding:10px 15px}