.tavla-view{max-width:100%;width:calc(700px * var(--board-zoom,1));min-width:680px}.tavla-board{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr)) 44px repeat(6,minmax(44px,1fr)) 48px;grid-template-rows:200px 200px;gap:2px;padding:6px;background:var(--surface-2);border:3px solid var(--line-strong);border-radius:10px}.tavla-point{position:relative;padding:18px 2px 4px;border:0;border-radius:0;background:transparent!important;color:var(--text)!important;min-width:44px;isolation:isolate}.tavla-point::before{content:'';position:absolute;inset:0 2px 12px;z-index:-1;background:var(--player-a-bg);clip-path:polygon(0 0,100% 0,50% 100%)}.tavla-point[data-triangle="1"]::before{background:var(--player-b-bg)}.tavla-point[data-row="1"]{padding:4px 2px 18px;display:flex;flex-direction:column;justify-content:flex-end}.tavla-point[data-row="1"]::before{inset:12px 2px 0;clip-path:polygon(50% 0,100% 100%,0 100%)}.tavla-number{position:absolute;top:0;left:0;right:0;font-size:12px;font-weight:700}.tavla-point[data-row="1"] .tavla-number{top:auto;bottom:0}.tavla-stack{display:flex;flex-direction:column;align-items:center;gap:0}.tavla-checker{display:block;flex:none;width:32px;height:32px;border:2px solid #292524;border-radius:50%;background:#faf5e9;box-shadow:inset 0 0 0 3px #d4c9b5}.tavla-checker[data-checker-player="1"]{background:#292524;border-color:#f5ecd9;box-shadow:inset 0 0 0 3px #635951}.tavla-stack .tavla-checker:nth-child(n+6){margin-top:-27px}.tavla-count{position:absolute;right:2px;top:20px;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:1rem;padding:0 4px;font-size:12px}.tavla-point[data-row="1"] .tavla-count{top:auto;bottom:20px}.tavla-bar{grid-column:7;grid-row:1/span 2;border-inline:2px solid var(--line-strong)}.tavla-off{grid-column:14;grid-row:1/span 2}.tavla-bar,.tavla-off{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;font-size:12px}.tavla-tray{min-height:80px;min-width:44px;position:relative;padding:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}.tavla-board button:disabled{opacity:1;cursor:default}.tavla-board button:not(:disabled){cursor:pointer}.tavla-board button[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:-3px}.tavla-board button[data-destination="true"]::after{content:'↳';position:absolute;inset:40% 0 auto;text-align:center;font-size:26px;font-weight:bold;color:var(--accent);background:var(--surface)}.tavla-board button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.tavla-dice{display:flex;gap:8px}.tavla-die{display:block;padding:4px;border:2px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--text)}

.tavla-board .tavla-checker{touch-action:none}.tavla-drag-layer{position:fixed;inset:0;z-index:1100;pointer-events:none;overflow:clip;contain:strict}.tavla-drag-checker{position:absolute;pointer-events:none;box-shadow:0 6px 14px #0004}.tavla-board [data-drag-destination=true]{outline:3px dashed var(--accent);outline-offset:-3px}.tavla-board [data-drag-destination=true]::after{content:'↳';position:absolute;inset:40% 0 auto;text-align:center;font-size:24px;color:var(--accent-strong);background:var(--surface)}
.game-immersive .tavla-view{width:100%;min-width:0;height:100%;display:flex;flex-direction:column;gap:4px;--checker-size:clamp(8px,min(calc((var(--play-width) - 100px)/12),calc((var(--play-height) - 110px)/14)),32px)}.game-immersive .tavla-board{width:100%;min-height:0;flex:1;grid-template-columns:repeat(6,minmax(0,1fr)) 32px repeat(6,minmax(0,1fr)) 34px;grid-template-rows:repeat(2,minmax(0,1fr));padding:3px;gap:1px}.game-immersive .tavla-point{min-width:0;padding-inline:0}.game-immersive .tavla-checker{width:var(--checker-size);height:var(--checker-size);border-width:1px;box-shadow:inset 0 0 0 2px #d4c9b5}.game-immersive .tavla-checker[data-checker-player="1"]{box-shadow:inset 0 0 0 2px #635951}.game-immersive .tavla-stack .tavla-checker:nth-child(n+6){margin-top:calc(var(--checker-size)*-.84)}.game-immersive .tavla-tray{min-width:0;width:100%;min-height:44px;padding:1px}.game-immersive .tavla-bar,.game-immersive .tavla-off{gap:3px}.game-immersive .tavla-number{font-size:10px}.game-immersive .tavla-count{font-size:10px;right:0;padding:0 2px}.game-immersive .tavla-direction{display:none}.game-immersive .tavla-view>p{font-size:11px;line-height:1.2;margin:0}.game-immersive .tavla-dice{gap:4px;height:32px;flex:none}.game-immersive .tavla-die{padding:1px;width:30px;height:30px}

.tavla-count,.tavla-number{pointer-events:none}
/* Phones keep a real, upright backgammon board: two halves of twelve points, the bar in the
   middle and the bearing-off tray on the right, scaled to the screen width. */
.game-immersive .tavla-view{justify-content:center;align-items:center;gap:8px;--checker-size:clamp(12px,min(calc((var(--play-width) - 56px)/12.4),calc((var(--play-height) - 90px)/10.6)),34px)}
.game-immersive .tavla-board{flex:none;width:100%;max-width:calc((var(--play-height) - 64px)*1.3);aspect-ratio:1.3;grid-template-columns:repeat(6,minmax(0,1fr)) clamp(14px,4.2vw,30px) repeat(6,minmax(0,1fr)) clamp(16px,5vw,34px);grid-template-rows:repeat(2,minmax(0,1fr));gap:0;padding:clamp(2px,1vw,10px);border:clamp(3px,1.4vw,12px) solid #6b4423;border-radius:14px;background:linear-gradient(#2c5a4c,#24493e);box-shadow:inset 0 0 0 2px #3f2a17,0 10px 24px #0005}
.game-immersive .tavla-point{min-width:0;padding:clamp(10px,3vw,16px) 0 2px;display:flex;flex-direction:column;align-items:center}
.game-immersive .tavla-point[data-row="1"]{padding:2px 0 clamp(10px,3vw,16px);justify-content:flex-end}
.game-immersive .tavla-point::before{inset:0 1px 8%;background:#d9b77c}
.game-immersive .tavla-point[data-row="1"]::before{inset:8% 1px 0}
.game-immersive .tavla-point[data-triangle="1"]::before{background:#9b3b2b}
.game-immersive .tavla-point[data-row="1"] .tavla-stack{flex-direction:column-reverse}
.game-immersive .tavla-stack .tavla-checker:nth-child(n+6){margin-top:0}
.game-immersive .tavla-stack .tavla-checker:nth-child(n+2){margin-top:calc(var(--checker-size)*-.08)}
.game-immersive .tavla-point[data-row="1"] .tavla-stack .tavla-checker:nth-child(n+2){margin-top:0;margin-bottom:calc(var(--checker-size)*-.08)}
.game-immersive .tavla-stack .tavla-checker:nth-child(n+6){display:none}
.game-immersive .tavla-checker{width:var(--checker-size);height:var(--checker-size);border:1px solid #3b2f25;background:radial-gradient(circle at 35% 30%,#fffdf6,#e9dcc0 60%,#cdbb97);box-shadow:inset 0 0 0 2px #d4c4a3,0 2px 3px #0006}
.game-immersive .tavla-checker[data-checker-player="1"]{border-color:#120c08;background:radial-gradient(circle at 35% 30%,#7a3528,#4a1d15 60%,#2b0f0a);box-shadow:inset 0 0 0 2px #5c2a20,0 2px 3px #0008}
.game-immersive .tavla-number{font-size:clamp(7px,2.2vw,10px);color:#f2e6cf;opacity:.85}
.game-immersive .tavla-count{top:auto;bottom:4px;right:50%;transform:translateX(50%);font-size:10px;font-weight:800;padding:0 4px;background:#000a;color:#fff;border:0}
.game-immersive .tavla-point[data-row="1"] .tavla-count{top:4px;bottom:auto}
.game-immersive .tavla-bar{background:#6b4423;border:0;box-shadow:inset 0 0 6px #0007;color:#f2e6cf;font-size:9px}
.game-immersive .tavla-off{background:#3f2a17;color:#f2e6cf;font-size:9px;border-radius:0 6px 6px 0}
.game-immersive .tavla-tray{background:#00000026;border:1px dashed #f2e6cf55;color:#f2e6cf;min-height:30%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.game-immersive .tavla-tray .tavla-checker{width:calc(var(--checker-size)*.8);height:calc(var(--checker-size)*.8)}
.game-immersive .tavla-board button[aria-pressed="true"]{outline:3px solid #ffd166;outline-offset:-3px}
.game-immersive .tavla-board button[data-destination="true"]::after,.game-immersive .tavla-board [data-drag-destination=true]::after{content:'';inset:auto;left:50%;top:50%;width:calc(var(--checker-size)*.7);height:calc(var(--checker-size)*.7);transform:translate(-50%,-50%);border-radius:50%;background:#7cf2c4;box-shadow:0 0 0 4px #7cf2c455,0 0 14px #7cf2c4;animation:tavla-target 1.1s ease-in-out infinite}
.game-immersive .tavla-board [data-drag-destination=true]{outline:0}
.game-immersive .tavla-turn{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px}
.game-immersive .tavla-roll{min-height:52px;padding:6px 12px;border-radius:14px;border:0;background:#24493e;box-shadow:0 4px 12px #0005}
.game-immersive .tavla-roll:not(:disabled){box-shadow:0 0 0 3px #ffd166,0 4px 12px #0005}
.game-immersive .tavla-die{width:40px;height:40px;padding:3px;border:0;border-radius:9px;background:linear-gradient(145deg,#fffdf6,#e7dcc5);color:#1d1d1d;box-shadow:inset 0 -3px 0 #0002,0 3px 6px #0005}
@keyframes tavla-target{50%{opacity:.6;transform:translate(-50%,-50%) scale(.85)}}
.game-immersive .tavla-roll:not(:disabled){animation-name:tavla-roll}
@keyframes tavla-roll{50%{box-shadow:0 0 0 6px #ffd16666,0 4px 12px #0005}}
@media(prefers-reduced-motion:reduce){.game-immersive .tavla-board [data-destination=true]::after,.game-immersive .tavla-roll{animation:none!important}}
@media(max-height:500px) and (orientation:landscape){
 .game-immersive .tavla-view{flex-direction:row;align-items:stretch}
 .game-immersive .tavla-board{max-width:none;aspect-ratio:auto;height:100%;flex:1 1 auto;width:auto;min-width:0}
 .game-immersive .tavla-turn{flex-direction:column;justify-content:center;flex:none}
}