@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Amatic+SC:wght@400&display=swap";*,*::before,*::after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}html{overscroll-behavior-y:contain;-webkit-text-size-adjust:100%}button,input,textarea,select{font-size:16px}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}.dices{position:absolute;top:50%;left:77%;transform:translate(-50%, -50%);width:34%;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:var(--z-dice);pointer-events:none;--dice-size: clamp(7px, calc(var(--board-width) * 0.09), 77px);--dice-depth: calc(var(--dice-size) / 2);--dice-border: calc(var(--dice-size) * 0.02);--dice-bg: #f6f3f0;--dice-bg-light: lighten(#f6f3f0, 10%);--dice-color-1: #f63330;--dice-color-2: #131210;--dice-radius: calc(var(--dice-size) * 0.2);--dice-dot-size: calc(var(--dice-size) * 0.2);--dice-dot-offset: calc(var(--dice-size) * -0.1)}[data-orientation=left] .dices{left:23%}.dice-wrap{display:inline-flex;position:relative;width:var(--dice-size);height:var(--dice-size);margin:0 var(--space-1) 0 0;will-change:transform,opacity}.dice-wrap:last-child{margin-right:0}.dice-wrap::before{position:absolute;content:"";width:70%;height:10%;top:90%;left:15%;background:rgba(0,0,0,.2);border-radius:100%;filter:blur(10px)}.dice-wrap[data-state=used]{opacity:.5;filter:grayscale(50%);transform:scale(0.9)}.dice-wrap[data-state=blocked]{opacity:.7;filter:invert(1)}.dice-wrap[data-state=available]{visibility:visible}.dice-wrap[data-state=empty]{visibility:hidden}.dice{display:inline-flex;width:var(--dice-size);height:var(--dice-size);transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);will-change:transform;backface-visibility:hidden}.dice[data-value="1"]{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}.dice[data-value="2"]{transform:rotateX(-90deg) rotateY(0deg) rotateZ(0deg)}.dice[data-value="3"]{transform:rotateX(0deg) rotateY(90deg) rotateZ(0deg)}.dice[data-value="4"]{transform:rotateX(0deg) rotateY(-90deg) rotateZ(0deg)}.dice[data-value="5"]{transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg)}.dice[data-value="6"]{transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg)}.dice-face{box-sizing:border-box;position:absolute;width:var(--dice-size);height:var(--dice-size);background:var(--dice-bg);border:var(--dice-border) solid var(--dice-bg-light);border-radius:var(--dice-radius);transform-style:preserve-3d;transition:.5s;backface-visibility:hidden}.dice-face::before{position:absolute;content:"";width:100%;height:100%;background:var(--dice-bg-light);border-radius:var(--dice-radius);transform:translateZ(-1px)}.dice-face::after{position:absolute;content:"";width:var(--dice-dot-size);height:var(--dice-dot-size);top:50%;left:50%;margin:var(--dice-dot-offset) 0 0 var(--dice-dot-offset);background:var(--dice-color-2);border-radius:100%;transform:translateZ(1px)}.dice .front{transform:translateZ(var(--dice-depth))}.dice .front::after{width:calc(var(--dice-size)*.4);height:calc(var(--dice-size)*.4);margin:calc(var(--dice-size)*-0.2) 0 0 calc(var(--dice-size)*-0.2);background:var(--dice-color-1)}.dice .top{transform:rotateX(90deg) translateZ(var(--dice-depth))}.dice .top::after{margin:calc(var(--dice-size)*-0.3) 0 0 calc(var(--dice-size)*-0.3);box-shadow:calc(var(--dice-size)*.4) calc(var(--dice-size)*.4) var(--dice-color-2)}.dice .left{transform:rotateY(-90deg) translateZ(var(--dice-depth))}.dice .left::after{margin:calc(var(--dice-size)*-0.4) 0 0 calc(var(--dice-size)*-0.4);box-shadow:calc(var(--dice-size)*.3) calc(var(--dice-size)*.3) var(--dice-color-2),calc(var(--dice-size)*.6) calc(var(--dice-size)*.6) var(--dice-color-2)}.dice .right{transform:rotateY(90deg) translateZ(var(--dice-depth))}.dice .right::after{margin:calc(var(--dice-size)*-0.3) 0 0 calc(var(--dice-size)*-0.3);background:var(--dice-color-2);box-shadow:calc(var(--dice-size)*.4) 0px var(--dice-color-2),0px calc(var(--dice-size)*.4) var(--dice-color-2),calc(var(--dice-size)*.4) calc(var(--dice-size)*.4) var(--dice-color-2)}.dice .bottom{transform:rotateX(-90deg) translateZ(var(--dice-depth))}.dice .bottom::after{margin:calc(var(--dice-size)*-0.36) 0 0 calc(var(--dice-size)*-0.36);box-shadow:calc(var(--dice-size)*.26) calc(var(--dice-size)*.26) var(--dice-color-2),calc(var(--dice-size)*.52) calc(var(--dice-size)*.52) var(--dice-color-2),calc(var(--dice-size)*.52) 0px var(--dice-color-2),0px calc(var(--dice-size)*.52) var(--dice-color-2)}.dice .back{transform:rotateX(180deg) translateZ(var(--dice-depth))}.dice .back::after{margin:calc(var(--dice-size)*-0.4) 0 0 calc(var(--dice-size)*-0.3);box-shadow:calc(var(--dice-size)*.4) 0px var(--dice-color-2),0px calc(var(--dice-size)*.3) var(--dice-color-2),calc(var(--dice-size)*.4) calc(var(--dice-size)*.3) var(--dice-color-2),0px calc(var(--dice-size)*.6) var(--dice-color-2),calc(var(--dice-size)*.4) calc(var(--dice-size)*.6) var(--dice-color-2)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="1"]{animation:rollTo1 .68s cubic-bezier(0.35, 0, 0.65, 1) forwards,throwDice1 .98s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="2"]{animation:rollTo2 .72s cubic-bezier(0.55, 0.085, 0.68, 0.95) forwards,throwDice2 1.02s cubic-bezier(0.34, 1.56, 0.64, 1)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="3"]{animation:rollTo3 .7s cubic-bezier(0.45, 0, 0.55, 1) forwards,throwDice3 1s cubic-bezier(0.33, 0.33, 0.67, 0.67)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="4"]{animation:rollTo4 .69s cubic-bezier(0.68, 0, 0.82, 0.16) forwards,throwDice4 .99s cubic-bezier(0.68, -0.55, 0.265, 1.55)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="5"]{animation:rollTo5 .73s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,throwDice5 1.03s cubic-bezier(0.22, 0.61, 0.36, 1)}.dices[data-animation=throw] .dice-wrap:not([data-state=empty]) .dice[data-value="6"]{animation:rollTo6 .71s cubic-bezier(0.55, 0.055, 0.45, 1.05) forwards,throwDice6 1.01s cubic-bezier(0.6, -0.28, 0.735, 0.045)}.dices .dice-wrap:nth-child(1){order:2}.dices .dice-wrap:nth-child(2){order:3}.dices .dice-wrap:nth-child(3){order:1}.dices .dice-wrap:nth-child(4){order:4}.dices[data-dice-count="4"]:not([data-show-all]) .dice-wrap:nth-child(3):not([data-state=empty]),.dices[data-dice-count="4"]:not([data-show-all]) .dice-wrap:nth-child(4):not([data-state=empty]){visibility:hidden}.dices[data-dice-count="4"][data-show-all] .dice-wrap:nth-child(3):not([data-state=empty]){animation:spawnDice1 .7s cubic-bezier(0.34, 1.56, 0.64, 1)}.dices[data-dice-count="4"][data-show-all] .dice-wrap:nth-child(4):not([data-state=empty]){animation:spawnDice2 .7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-delay:.13s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="1"]{animation-delay:.05s;animation-duration:.7s,1s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="2"]{animation-delay:.04s;animation-duration:.74s,1.04s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="3"]{animation-delay:.045s;animation-duration:.72s,1.02s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="4"]{animation-delay:.06s;animation-duration:.71s,1.01s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="5"]{animation-delay:.035s;animation-duration:.75s,1.05s}.dices[data-animation=throw]:not([data-dice-count="4"]) .dice-wrap:nth-child(2):not([data-state=empty]) .dice[data-value="6"]{animation-delay:.055s;animation-duration:.73s,1.03s}@keyframes spawnDice1{0%{transform:scale(0)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes spawnDice2{0%{transform:scale(0)}40%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes rollTo1{0%{transform:rotate3d(0.2, 1, 0.1, 900deg)}10%{transform:rotate3d(0.1, 1, 0.3, 720deg)}25%{transform:rotate3d(0.4, 1, 0.2, 540deg)}40%{transform:rotate3d(0.1, 1, 0.1, 360deg)}55%{transform:rotate3d(0.3, 1, 0.4, 240deg)}70%{transform:rotate3d(0.1, 1, 0.2, 120deg)}82%{transform:rotate3d(0, 1, 0.1, 60deg)}88%{transform:rotate3d(0, 1, 0, 30deg)}94%{transform:rotate3d(0, 0.5, 0, 10deg)}100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}}@keyframes rollTo2{0%{transform:rotate3d(1, 0.1, 0.2, 810deg)}12%{transform:rotate3d(1, 0.3, 0.1, 630deg)}28%{transform:rotate3d(1, 0.1, 0.4, 450deg)}42%{transform:rotate3d(1, 0.2, 0.1, 270deg)}58%{transform:rotate3d(1, 0.1, 0.3, 90deg)}72%{transform:rotate3d(1, 0, 0.2, -30deg)}83%{transform:rotate3d(1, 0, 0.1, -60deg)}91%{transform:rotate3d(1, 0, 0, -78deg)}96%{transform:rotate3d(1, 0, 0, -86deg)}100%{transform:rotateX(-90deg) rotateY(0deg) rotateZ(0deg)}}@keyframes rollTo3{0%{transform:rotate3d(0.7, 0.7, 0, 720deg)}18%{transform:rotate3d(0.5, 0.8, 0.3, 540deg)}35%{transform:rotate3d(0.3, 1, 0.5, 405deg)}50%{transform:rotate3d(0.6, 0.6, 0.6, 270deg)}65%{transform:rotate3d(0.2, 0.9, 0.3, 180deg)}78%{transform:rotate3d(0.1, 1, 0.2, 135deg)}86%{transform:rotate3d(0, 1, 0.1, 108deg)}92%{transform:rotate3d(0, 1, 0, 96deg)}97%{transform:rotate3d(0, 1, 0, 92deg)}100%{transform:rotateX(0deg) rotateY(90deg) rotateZ(0deg)}}@keyframes rollTo4{0%{transform:rotate3d(1, 0.5, 0.8, 900deg)}8%{transform:rotate3d(0.2, 1, 0.6, 765deg)}20%{transform:rotate3d(0.9, 0.3, 1, 630deg)}32%{transform:rotate3d(0.4, 0.8, 0.5, 495deg)}46%{transform:rotate3d(1, 0.6, 0.2, 360deg)}60%{transform:rotate3d(0.3, 0.7, 0.9, 225deg)}74%{transform:rotate3d(0.6, 0.8, 0.1, 90deg)}84%{transform:rotate3d(0.1, 1, 0, -45deg)}92%{transform:rotate3d(0, 1, 0, -75deg)}96%{transform:rotate3d(0, 1, 0, -85deg)}100%{transform:rotateX(0deg) rotateY(-90deg) rotateZ(0deg)}}@keyframes rollTo5{0%{transform:rotate3d(1, 0.2, 0.1, 540deg)}20%{transform:rotate3d(1, 0.3, 0.2, 450deg)}35%{transform:rotate3d(1, 0.1, 0.3, 360deg)}50%{transform:rotate3d(1, 0.2, 0.1, 270deg)}65%{transform:rotate3d(1, 0.1, 0.2, 180deg)}78%{transform:rotate3d(1, 0, 0.1, 135deg)}87%{transform:rotate3d(1, 0, 0, 108deg)}93%{transform:rotate3d(1, 0, 0, 96deg)}98%{transform:rotate3d(1, 0, 0, 92deg)}100%{transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg)}}@keyframes rollTo6{0%{transform:rotate3d(0.3, 0.9, 0.4, 630deg)}14%{transform:rotate3d(0.8, 0.5, 0.2, 540deg)}28%{transform:rotate3d(0.2, 0.7, 0.6, 450deg)}40%{transform:rotate3d(0.6, 0.8, 0.3, 360deg)}52%{transform:rotate3d(0.4, 0.6, 0.5, 270deg)}66%{transform:rotate3d(0.2, 0.9, 0.2, 225deg)}76%{transform:rotate3d(0.1, 1, 0.1, 200deg)}85%{transform:rotate3d(0, 1, 0, 188deg)}91%{transform:rotate3d(0, 1, 0, 183deg)}95%{transform:rotate3d(0, 1, 0, 181deg)}98%{transform:rotate3d(0, 1, 0, 180.3deg)}100%{transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg)}}@keyframes throwDice1{18%{margin-top:calc(var(--dice-size)*-1.1)}35%{margin-top:0px}50%{margin-top:calc(var(--dice-size)*-0.4)}65%{margin-top:0px}77%{margin-top:calc(var(--dice-size)*-0.15)}88%{margin-top:0px}94%{margin-top:calc(var(--dice-size)*-0.05)}100%{margin-top:0px}}@keyframes throwDice2{22%{margin-top:calc(var(--dice-size)*-1.3)}44%{margin-top:0px}62%{margin-top:calc(var(--dice-size)*-0.5)}78%{margin-top:0px}86%{margin-top:calc(var(--dice-size)*-0.2)}92%{margin-top:0px}96%{margin-top:calc(var(--dice-size)*-0.08)}100%{margin-top:0px}}@keyframes throwDice3{20%{margin-top:calc(var(--dice-size)*-0.9)}40%{margin-top:0px}60%{margin-top:calc(var(--dice-size)*-0.45)}75%{margin-top:0px}85%{margin-top:calc(var(--dice-size)*-0.22)}92%{margin-top:0px}96%{margin-top:calc(var(--dice-size)*-0.11)}100%{margin-top:0px}}@keyframes throwDice4{15%{margin-top:calc(var(--dice-size)*-0.8)}28%{margin-top:0px}38%{margin-top:calc(var(--dice-size)*-0.6)}48%{margin-top:0px}56%{margin-top:calc(var(--dice-size)*-0.35)}64%{margin-top:0px}71%{margin-top:calc(var(--dice-size)*-0.25)}78%{margin-top:0px}84%{margin-top:calc(var(--dice-size)*-0.12)}90%{margin-top:0px}95%{margin-top:calc(var(--dice-size)*-0.06)}100%{margin-top:0px}}@keyframes throwDice5{25%{margin-top:calc(var(--dice-size)*-0.7)}45%{margin-top:0px}65%{margin-top:calc(var(--dice-size)*-0.25)}80%{margin-top:0px}90%{margin-top:calc(var(--dice-size)*-0.08)}95%{margin-top:0px}98%{margin-top:calc(var(--dice-size)*-0.02)}100%{margin-top:0px}}@keyframes throwDice6{17%{margin-top:calc(var(--dice-size)*-0.95)}34%{margin-top:0px}48%{margin-top:calc(var(--dice-size)*-0.55)}62%{margin-top:0px}73%{margin-top:calc(var(--dice-size)*-0.3)}82%{margin-top:0px}88%{margin-top:calc(var(--dice-size)*-0.18)}93%{margin-top:0px}97%{margin-top:calc(var(--dice-size)*-0.07)}100%{margin-top:0px}}:root{--color-neutral-100: rgb(255, 255, 255);--color-neutral-200: rgb(182, 191, 193);--color-neutral-300: rgb(162, 176, 173);--color-neutral-400: rgb(161, 163, 154);--color-neutral-500: rgb(52, 69, 76);--color-neutral-600: rgb(17, 19, 20);--color-background: var(--color-neutral-100);--color-surface: var(--color-neutral-200);--color-surface-alt: var(--color-neutral-300);--color-text-primary: var(--color-neutral-600);--color-text-secondary: var(--color-neutral-500);--color-text-tertiary: var(--color-neutral-400);--color-border: var(--color-neutral-400);--color-divider: var(--color-neutral-500);--color-idle: rgb(28, 66, 134);--color-success: rgb(26, 116, 68);--color-warning: rgb(243, 162, 87);--color-danger: rgb(221, 64, 39);--color-interactive: var(--color-neutral-500);--color-interactive-hover: var(--color-neutral-400);--color-interactive-active: var(--color-neutral-300);--color-interactive-disabled: var(--color-neutral-200);--color-board-primary: rgb(113, 80, 47);--color-board-secondary: rgb(243, 162, 87);--color-player-1: rgb(84, 112, 118);--color-player-2: rgb(255, 239, 174);--color-player-1: rgb(0, 0, 0);--color-player-2: rgb(255, 255, 255);--color-valid-move: rgb(235, 83, 36)}.dark{--color-background: var(--color-neutral-600);--color-surface: var(--color-neutral-500);--color-surface-alt: var(--color-neutral-400);--color-text-primary: var(--color-neutral-100);--color-text-secondary: var(--color-neutral-200);--color-text-tertiary: var(--color-neutral-300);--color-border: var(--color-neutral-400);--color-divider: var(--color-neutral-300);--color-interactive: var(--color-neutral-400);--color-interactive-hover: var(--color-neutral-300);--color-interactive-active: var(--color-neutral-200);--color-interactive-disabled: var(--color-neutral-500);--color-board-primary: rgb(75, 51, 23);--color-board-secondary: rgb(187, 113, 37)}:root{--font-family-primary: "Open Sans", "Helvetica Neue", "Arial", sans-serif;--font-family-title: "Amatic SC", serif;--font-family-mono: "Courier New", "Courier", monospace;--font-size-sm: 1.125rem;--font-size-base: 1.375rem;--font-size-lg: 1.625rem;--font-size-xl: 2.25rem;--font-size-xxl: 2.75rem;--font-weight-regular: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--letter-spacing-tight: -0.02em;--letter-spacing-wide: 0.05em;--space-0: 0;--space-1: 0.5rem;--space-2: 1rem;--space-3: 1.5rem;--space-4: 2rem;--space-5: 2.5rem;--space-6: 3rem;--space-8: 4rem;--space-10: 5rem;--space-12: 6rem;--space-16: 8rem;--z-base: 0;--z-piece: 10;--z-selected: 20;--z-overlay: 30;--z-cursor: 40;--z-modal: 50;--z-tooltip: 60;--radius-sm: 0.25rem;--radius: 0.5rem;--radius-md: 0.75rem;--radius-lg: 1rem;--radius-full: 9999px;--border-width: 1px;--border-style: solid;--border-color: var(--color-border);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--focus-ring: 0 0 0 2px var(--color-interactive);--focus-ring-offset: 2px;--transition-fast: 150ms ease;--transition-base: 200ms ease;--transition-slow: 300ms ease}:root{--component-max-width: 1200px;--modal-width: min(90vw, 500px);--button-height: var(--space-6)}@media(max-width: 768px){:root{--modal-width: 95vw;--button-height: var(--space-8)}}.hidden{display:none !important}.btn-group{display:flex;gap:var(--space-3)}.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--button-height);padding:0 var(--space-2);border:var(--border-width) var(--border-style) rgba(0,0,0,0);border-radius:var(--radius-sm);font-family:var(--font-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);text-decoration:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--color-interactive);color:var(--color-background)}@media(hover: hover){.btn:hover:not(:disabled){background-color:var(--color-interactive-hover);box-shadow:var(--shadow)}.btn:active:not(:disabled){background-color:var(--color-interactive-active);box-shadow:var(--shadow-sm);transform:translateY(1px)}}.btn--secondary{background-color:var(--color-interactive-disabled);color:var(--color-text-primary);border-color:var(--color-border)}@media(hover: hover){.btn--secondary:hover:not(:disabled){background-color:var(--color-interactive-active);box-shadow:var(--shadow)}.btn--secondary:active:not(:disabled){background-color:var(--color-interactive-hover);transform:translateY(1px)}}.btn--danger{background-color:var(--color-danger);color:var(--color-background)}@media(hover: hover){.btn--danger:hover:not(:disabled){background-color:var(--color-warning);box-shadow:var(--shadow)}.btn--danger:active:not(:disabled){background-color:var(--color-success);box-shadow:var(--shadow-sm);transform:translateY(1px)}}.btn--small{height:var(--space-5);padding:0 var(--space-1);font-size:var(--font-size-sm)}.btn--large{height:var(--space-8);padding:0 var(--space-3);font-size:var(--font-size-base)}.btn--full{width:100%}.btn--link{background:none;border:none;color:var(--color-interactive);padding:0;height:auto;box-shadow:none;text-decoration:underline;text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:inherit}@media(hover: hover){.btn--link:hover:not(:disabled){color:var(--color-interactive-hover);background:none;box-shadow:none;transform:none}.btn--link:active:not(:disabled){color:var(--color-interactive-active);transform:none}}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:var(--space-1);font-size:clamp(1.25rem,1.5vw,1.5rem);transition:all var(--transition-fast)}.icon:first-child{margin-top:0}.icon:last-child{margin-bottom:0}.icon--settings svg{transform:scale(1.6)}@media(orientation: portrait){.icon{width:3rem;height:3rem;font-size:clamp(.875rem,1.2vw,1rem)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);cursor:pointer}.modal-overlay:not([data-visible]){display:none !important}.modal{position:relative;width:var(--modal-width);max-height:90vh;background-color:var(--color-background);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;cursor:default}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-3);border-bottom:var(--border-width) var(--border-style) var(--color-border)}.modal-title{font-family:var(--font-family-title);font-size:var(--font-size-xxl);line-height:var(--font-size-xxl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.modal-close{background:none;border:none;font-size:var(--font-size-lg);color:var(--color-text-secondary);cursor:pointer;padding:0;width:var(--space-6);height:var(--space-6);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}@media(hover: hover){.modal-close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}}.modal-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}.modal-body{flex:1;padding:var(--space-3);overflow-y:auto}.modal-footer{margin-top:var(--space-3)}.section{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--radius-sm)}.item{display:flex;justify-content:space-between;align-items:center}.item span{font-size:var(--font-size-sm)}.form-group{margin-bottom:var(--space-3)}.checkbox-label{cursor:pointer}.checkbox-label input[type=checkbox]{margin-right:var(--space-1)}.form-label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary)}.form-input{width:100%;height:var(--space-6);padding:0 var(--space-3);background-color:var(--color-background);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-text-primary);transition:all var(--transition-fast)}.form-input::placeholder{color:var(--color-text-tertiary)}@media(hover: hover){.form-input:hover:not(:focus):not(:disabled){border-color:var(--color-interactive)}}.form-input:focus{outline:none;border-color:var(--color-interactive-hover);box-shadow:var(--focus-ring)}.form-input:invalid:not(:focus):not(:placeholder-shown){border-color:var(--color-danger)}.form-error{margin-top:var(--space-1);font-size:var(--font-size-sm);color:var(--color-danger)}.card{padding:var(--space-3);background:var(--color-surface);text-align:center;border-radius:var(--radius-sm);border:var(--border-width) var(--border-style) var(--color-border)}.content-primary{color:var(--color-text-primary)}.content-secondary{font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.badge{display:inline-block;border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.badge[data-variant=success]{color:var(--color-success)}.badge[data-variant=danger]{color:var(--color-danger)}html{height:100%;-webkit-text-size-adjust:100%;font-size:16px;font-size:clamp(13px,3.4vw,16px)}body{height:100%;line-height:1.5;-webkit-font-smoothing:antialiased;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background-color:var(--color-background)}.app-container{display:flex;width:100vw;height:100vh;width:100dvw;height:100dvh}.game-page{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;width:100%;height:100%;background:var(--color-background);--min-side-space: 3rem;--board-max-width: calc(100dvw - (2 * var(--min-side-space)));--board-max-height: 100dvh;--board-width: min( calc(var(--board-max-height) * 4 / 3), /* Height-based 4:3 */ var(--board-max-width), /* Width constraint */ 1024px /* Max size cap */ );--board-height: min( var(--board-max-height), calc(var(--board-width) * 3 / 4), 768px )}.game-grid{display:grid;min-width:var(--min-side-space);align-items:center}.game-container{display:flex;width:var(--board-width);height:var(--board-height);max-width:var(--board-width);max-height:var(--board-height)}@media(orientation: portrait){.game-page{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;--board-max-width: 100dvw;--board-max-height: calc(100dvh - (2 * var(--min-side-space)));--board-size: min( var(--board-max-width), /* Full width */ var(--board-max-height), /* Height constraint */ 1024px /* Max size cap */ );--board-width: var(--board-size);--board-height: var(--board-size)}.game-grid{min-height:var(--min-side-space);min-width:auto}.game-container{margin:0 auto}}.game-elements{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;font-size:clamp(.75rem,2vw,1rem)}.page{width:100%;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:"header" "content" "footer"}main{display:flex;flex-direction:row;align-items:center;justify-content:center}.home-row{display:flex;flex-direction:column;margin:var(--space-2)}header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2);border-bottom:var(--border-width) var(--border-style) var(--color-border)}.header__left,.header__right{display:flex}header .icon{margin:0}.header__right .icon--status{margin-right:var(--space-1)}footer{display:flex;justify-content:center}footer .btn{margin:0 var(--space-1)}@media(orientation: portrait){.page{display:flex;flex-direction:column}header{position:absolute;top:0;left:0;width:100%}main{flex-direction:column;flex-grow:1}.home-row{margin-bottom:var(--space-2)}.home-row:last-child{margin-bottom:0}}.logo{font-family:var(--font-family-title);font-size:9rem;line-height:9rem;color:var(--color-text-primary)}@media(orientation: landscape){.logo{font-size:5rem;line-height:5rem}}.queue-message{color:var(--color-danger);text-align:center;margin-top:var(--space-1)}.play-controls-container{text-align:center}.rating-history{margin-top:var(--space-4)}.rating-history-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-3);color:var(--color-text-primary)}.rating-history-empty{text-align:center;padding:var(--space-4);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.rating-history-list{border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.rating-history-item{padding:var(--space-3);border-bottom:var(--border-width) var(--border-style) var(--color-border)}.rating-history-item:last-child{border-bottom:none}@media(hover: hover){.rating-history-item:hover{background-color:var(--color-surface)}}.rating-history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-1)}.rating-history-item-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.rating-history-game-id{font-family:var(--font-family-mono);font-size:var(--font-size-sm)}.rating-change-positive{color:var(--color-success);font-weight:var(--font-weight-semibold)}.rating-change-negative{color:var(--color-danger);font-weight:var(--font-weight-semibold)}.rating-history-refresh{margin-top:var(--space-3);width:100%}.practice-game-section{display:flex;flex-direction:column;align-items:center;margin:var(--space-1) 0}.difficulty-selector{margin-top:var(--space-2);padding:var(--space-3);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);min-width:300px}.difficulty-controls{margin-bottom:var(--space-3)}.difficulty-controls label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.difficulty-level{font-weight:var(--font-weight-semibold);color:var(--color-accent)}.difficulty-slider{width:100%;margin-top:var(--space-1)}.difficulty-actions{display:flex;gap:var(--space-2);justify-content:center}.user-profile-panel{display:inline-flex;align-items:center;gap:var(--space-3)}.user-profile-name{display:inline-flex;font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-size:var(--font-size-sm)}.section-intro{margin-bottom:var(--space-3)}.user-info{margin-bottom:var(--space-3)}.user-info-name{display:block;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-1)}.user-info-email{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.user-stats{margin-bottom:var(--space-3)}.stats-summary{display:flex;gap:var(--space-3);margin-bottom:var(--space-3)}.stat-item{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.stat-value{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.stats-breakdown{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.breakdown-line{margin-bottom:var(--space-1)}[data-stat=wins]{color:var(--color-success);font-weight:var(--font-weight-semibold)}[data-stat=losses]{color:var(--color-danger);font-weight:var(--font-weight-semibold)}[data-stat=separator]{margin:0 var(--space-1);color:var(--color-text-secondary)}.convert-account-info{padding:var(--space-3);margin:var(--space-3) 0;color:var(--color-warning);border-radius:var(--radius-sm);border:var(--border-width) var(--border-style) var(--color-warning);font-size:var(--font-size-sm);text-align:center}.user-logout-error{padding:var(--space-3);margin:var(--space-3) 0;color:var(--color-danger);border-radius:var(--radius-sm);border:var(--border-width) var(--border-style) var(--color-danger);font-size:var(--font-size-sm);text-align:center}.auth-error{padding:var(--space-1);margin:var(--space-1) 0;color:var(--color-danger);border-radius:var(--radius-sm);border:var(--border-width) var(--border-style) var(--color-danger);font-size:var(--font-size-sm);text-align:center}.board-container{position:relative;display:flex;width:100%;height:100%;background:var(--color-board-primary);border:7px solid var(--color-board-primary);border-radius:7px;cursor:grab;--point-width: calc(100% / 13);--bar-width: var(--point-width);--piece-width: min( var(--point-width) * 0.88, 8% );--piece-center-offset: calc( var(--point-width) * 0.5 - var(--piece-width) * 0.5 );--bar-start: calc(var(--point-width) * 6);--piece-gap: calc( var(--piece-width) * 1.33 )}.board-container:active{cursor:grabbing}@media(orientation: portrait){.board-container{--point-width: calc(100% / 12);--bar-start: calc(var(--point-width) * 5);--piece-gap: calc( var(--piece-width) * 1 )}.board-container::before{content:"";width:7px;height:100%;position:absolute;top:0;left:50%;margin-left:-3.5px;background:var(--color-valid-move);z-index:var(--z-piece)}}.board-background{display:flex;width:100%;height:100%}.board-quadrant{display:flex;flex:1}.board-left-quadrants,.board-right-quadrants{display:flex;flex:6;flex-direction:column}.board-quadrant--bottom .board-point{flex-direction:column-reverse}.board-quadrant--top .board-point::before{top:0;clip-path:polygon(50% 100%, 0% 0%, 100% 0%)}.board-quadrant--bottom .board-point::before{bottom:0;clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}.board-bar{position:relative;display:flex;flex:1;flex-direction:column;background:var(--color-board-primary);z-index:var(--z-piece)}.bear-off-pieces{display:flex;flex:1;justify-content:flex-start;flex-direction:column;align-items:center;gap:3px;padding:var(--space-1) 0}.bear-off-pieces.bottom{flex-direction:column-reverse}.bear-off-pieces span{width:88%;height:var(--piece-width);background:none;border-radius:var(--radius-full)}@media(orientation: portrait){.board-bar{position:absolute;bottom:calc(0px - var(--point-width));left:0;width:100%;height:var(--point-width);flex-direction:row;border-left:3.5px solid var(--color-board-primary);border-right:3.5px solid var(--color-board-primary);border-bottom:3.5px solid var(--color-board-primary);border-radius:3.5px}.bear-off-pieces{flex-direction:row;padding:0 3px}.bear-off-pieces.bottom{flex-direction:row-reverse}.bear-off-pieces span{width:calc(var(--piece-width)/1.3);height:83%}}.bear-off-pieces[data-count="0"] span,.bear-off-pieces[data-count="1"] span:nth-child(n+2),.bear-off-pieces[data-count="2"] span:nth-child(n+3),.bear-off-pieces[data-count="3"] span:nth-child(n+4),.bear-off-pieces[data-count="4"] span:nth-child(n+5),.bear-off-pieces[data-count="5"] span:nth-child(n+6),.bear-off-pieces[data-count="6"] span:nth-child(n+7),.bear-off-pieces[data-count="7"] span:nth-child(n+8),.bear-off-pieces[data-count="8"] span:nth-child(n+9),.bear-off-pieces[data-count="9"] span:nth-child(n+10),.bear-off-pieces[data-count="10"] span:nth-child(n+11),.bear-off-pieces[data-count="11"] span:nth-child(n+12),.bear-off-pieces[data-count="12"] span:nth-child(n+13),.bear-off-pieces[data-count="13"] span:nth-child(n+14),.bear-off-pieces[data-count="14"] span:nth-child(n+15){display:none}.board-point{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;position:relative}.board-point::before{content:"";position:absolute;width:100%;height:90%;background:var(--color-board-secondary);opacity:.8}.piece[data-hidden]{display:none}.pieces-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.piece{position:absolute;width:var(--piece-width);aspect-ratio:1;border-radius:var(--radius-full);pointer-events:none;transform-style:preserve-3d;transition:transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);z-index:var(--z-piece)}.piece[data-dragging]{transition:none}.piece[data-y*=bottom-],.piece[data-y*=bar-one-]{--lift-y: -15px;--rotate-x: -15deg;--shadow-y: 12px}.piece[data-y*=top-],.piece[data-y*=bar-two-]{--lift-y: 15px;--rotate-x: 15deg;--shadow-y: -12px}.piece[data-selected],.board-container:not([data-turn-state=my-turn-active]) .piece[data-moving]{background:var(--color-valid-move) !important}.board-container[data-turn-state=my-turn-waiting] .piece,.board-container[data-turn-state=their-turn-active] .piece,.board-container[data-turn-state=spectating] .piece{transition-property:top,left;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-duration:.7s}.board-container[data-turn-state=my-turn-active] .piece[data-selected]:not([data-dragging]):not([data-bar]),.board-container[data-turn-state=my-turn-active] .piece[data-moving]:not([data-dragging]):not([data-bar]){transform:translateY(var(--lift-y, 0)) translateZ(12px) rotateX(var(--rotate-x, 0)) rotateY(12deg) scale(1.12);filter:drop-shadow(0 var(--shadow-y, 0) 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 calc(var(--shadow-y, 0) / 2) 12px rgba(0, 0, 0, 0.25))}.board-container[data-turn-state=their-turn-active],.board-container[data-turn-state=their-turn-waiting],.board-container[data-turn-state=spectating]{pointer-events:none;cursor:default}.piece[data-dragging]{position:fixed;width:48px !important;height:48px !important;background:var(--color-valid-move) !important}.piece[data-x="1"]{--point-index: 0}.piece[data-x="2"]{--point-index: 1}.piece[data-x="3"]{--point-index: 2}.piece[data-x="4"]{--point-index: 3}.piece[data-x="5"]{--point-index: 4}.piece[data-x="6"]{--point-index: 5}.piece[data-x="1"],.piece[data-x="2"],.piece[data-x="3"],.piece[data-x="4"],.piece[data-x="5"],.piece[data-x="6"]{left:calc(var(--point-width)*var(--point-index) + var(--piece-center-offset))}.piece[data-x="7"]{--point-index: 0}.piece[data-x="8"]{--point-index: 1}.piece[data-x="9"]{--point-index: 2}.piece[data-x="10"]{--point-index: 3}.piece[data-x="11"]{--point-index: 4}.piece[data-x="12"]{--point-index: 5}.piece[data-x="7"],.piece[data-x="8"],.piece[data-x="9"],.piece[data-x="10"],.piece[data-x="11"],.piece[data-x="12"]{left:calc(var(--bar-start) + var(--bar-width) + var(--point-width)*var(--point-index) + var(--piece-center-offset))}.piece[data-y=bottom-0]{--stack-index: 0}.piece[data-y=bottom-1]{--stack-index: 1}.piece[data-y=bottom-2]{--stack-index: 2}.piece[data-y=bottom-3]{--stack-index: 3}.piece[data-y=bottom-4]{--stack-index: 4}.piece[data-y=bottom-5]{--stack-index: 5}.piece[data-y=bottom-6]{--stack-index: 6}.piece[data-y=bottom-7]{--stack-index: 7}.piece[data-y=bottom-8]{--stack-index: 8}.piece[data-y=bottom-9]{--stack-index: 9}.piece[data-y=bottom-10]{--stack-index: 10}.piece[data-y=bottom-11]{--stack-index: 11}.piece[data-y=bottom-12]{--stack-index: 12}.piece[data-y=bottom-13]{--stack-index: 13}.piece[data-y=bottom-14]{--stack-index: 14}.piece[data-y*=bottom-]{top:calc(90.9% - var(--stack-index)*var(--piece-gap))}@media(orientation: portrait){.piece[data-y*=bottom-]{top:calc(92.5% - var(--stack-index)*var(--piece-gap))}}.piece[data-y=top-0]{--stack-index: 0}.piece[data-y=top-1]{--stack-index: 1}.piece[data-y=top-2]{--stack-index: 2}.piece[data-y=top-3]{--stack-index: 3}.piece[data-y=top-4]{--stack-index: 4}.piece[data-y=top-5]{--stack-index: 5}.piece[data-y=top-6]{--stack-index: 6}.piece[data-y=top-7]{--stack-index: 7}.piece[data-y=top-8]{--stack-index: 8}.piece[data-y=top-9]{--stack-index: 9}.piece[data-y=top-10]{--stack-index: 10}.piece[data-y=top-11]{--stack-index: 11}.piece[data-y=top-12]{--stack-index: 12}.piece[data-y=top-13]{--stack-index: 13}.piece[data-y=top-14]{--stack-index: 14}.piece[data-y*=top-]{top:calc(0% + var(--stack-index)*var(--piece-gap))}.piece[data-bar]{left:calc(var(--bar-start) + var(--bar-width)*.5 - var(--piece-width)*.5)}.piece[data-y=bar-one-0]{--stack-index: 0}.piece[data-y=bar-one-1]{--stack-index: 1}.piece[data-y=bar-one-2]{--stack-index: 2}.piece[data-y=bar-one-3]{--stack-index: 3}.piece[data-y=bar-one-4]{--stack-index: 4}.piece[data-y=bar-one-5]{--stack-index: 5}.piece[data-y=bar-one-6]{--stack-index: 6}.piece[data-y=bar-one-7]{--stack-index: 7}.piece[data-y=bar-one-8]{--stack-index: 8}.piece[data-y=bar-one-9]{--stack-index: 9}.piece[data-y=bar-one-10]{--stack-index: 10}.piece[data-y=bar-one-11]{--stack-index: 11}.piece[data-y=bar-one-12]{--stack-index: 12}.piece[data-y=bar-one-13]{--stack-index: 13}.piece[data-y=bar-one-14]{--stack-index: 14}.piece[data-y*=bar-one-]{top:calc(55% + var(--stack-index)*var(--piece-gap))}.piece[data-y=bar-two-0]{--stack-index: 0}.piece[data-y=bar-two-1]{--stack-index: 1}.piece[data-y=bar-two-2]{--stack-index: 2}.piece[data-y=bar-two-3]{--stack-index: 3}.piece[data-y=bar-two-4]{--stack-index: 4}.piece[data-y=bar-two-5]{--stack-index: 5}.piece[data-y=bar-two-6]{--stack-index: 6}.piece[data-y=bar-two-7]{--stack-index: 7}.piece[data-y=bar-two-8]{--stack-index: 8}.piece[data-y=bar-two-9]{--stack-index: 9}.piece[data-y=bar-two-10]{--stack-index: 10}.piece[data-y=bar-two-11]{--stack-index: 11}.piece[data-y=bar-two-12]{--stack-index: 12}.piece[data-y=bar-two-13]{--stack-index: 13}.piece[data-y=bar-two-14]{--stack-index: 14}.piece[data-y*=bar-two-]{top:calc(45% - var(--stack-index)*var(--piece-gap))}@media(orientation: portrait){.piece[data-bar]{top:auto;bottom:calc(2px - var(--point-width))}.piece[data-y*=bar-one-]{left:calc(50% - var(--piece-width) - var(--stack-index)*var(--piece-gap))}.piece[data-y*=bar-two-]{left:calc(50% + var(--piece-width)*0 + var(--stack-index)*var(--piece-gap))}}.piece[data-count="6"]{--gap-multiplier: 1.05}.piece[data-count="7"]{--gap-multiplier: 0.88}.piece[data-count="8"]{--gap-multiplier: 0.75}.piece[data-count="9"]{--gap-multiplier: 0.66}.piece[data-count="10"]{--gap-multiplier: 0.58}.piece[data-count="11"]{--gap-multiplier: 0.53}.piece[data-count="12"]{--gap-multiplier: 0.48}.piece[data-count="13"]{--gap-multiplier: 0.44}.piece[data-count="14"]{--gap-multiplier: 0.41}.piece[data-count="15"]{--gap-multiplier: 0.38}.piece[data-count="6"],.piece[data-count="7"],.piece[data-count="8"],.piece[data-count="9"],.piece[data-count="10"],.piece[data-count="11"],.piece[data-count="12"],.piece[data-count="13"],.piece[data-count="14"],.piece[data-count="15"]{--piece-gap: calc(var(--piece-width) * var(--gap-multiplier))}@media(orientation: portrait){.piece[data-count="6"]{--gap-multiplier: 1}.piece[data-count="7"]{--gap-multiplier: 0.93}.piece[data-count="8"]{--gap-multiplier: 0.8}.piece[data-count="9"]{--gap-multiplier: 0.7}.piece[data-count="10"]{--gap-multiplier: 0.62}.piece[data-count="11"]{--gap-multiplier: 0.56}.piece[data-count="12"]{--gap-multiplier: 0.51}.piece[data-count="13"]{--gap-multiplier: 0.47}.piece[data-count="14"]{--gap-multiplier: 0.43}.piece[data-count="15"]{--gap-multiplier: 0.4}}.piece[data-bar]{transform:scale(0.9)}.board-container[data-highlights] .board-point[data-highlight=valid]::before,.board-container[data-highlights] .board-point[data-highlight=drag]::before,.board-container[data-highlights] .board-point[data-highlight=both]::before,.board-container[data-highlights] .board-bar[data-highlight=valid],.board-container[data-highlights] .board-bar[data-highlight=drag],.board-container[data-highlights] .board-bar[data-highlight=both]{background:var(--color-valid-move)}.board-background::before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;z-index:var(--z-piece);pointer-events:none;box-shadow:inset 0 6px 12px rgba(0,0,0,.3),inset -6px 0 12px rgba(0,0,0,.3),inset 6px 0 12px rgba(0,0,0,.3),inset 0 -6px 12px rgba(0,0,0,.3)}.board-bar{box-shadow:inset -3px 0 6px rgba(0,0,0,.3),inset 3px 0 6px rgba(0,0,0,.3)}.piece,.bear-off-pieces span{box-shadow:0 6px 12px rgba(0,0,0,.3),inset 0 -3px 6px rgba(0,0,0,.2),inset 0 2px 4px rgba(255,255,255,.2)}.game-info,.game-controls{display:flex;flex-direction:column;width:100%;height:100%;align-items:center;justify-content:center;gap:var(--space-2)}@media(orientation: portrait){.game-controls,.game-info{flex-direction:row;height:100%}}@media(max-width: 374px){.game-info,.game-controls{gap:var(--space-1)}.icon{width:2rem;height:2rem}}.player-container{position:relative;display:flex;width:100%;justify-content:center;align-items:center;font-size:clamp(.75rem,2vw,1rem);line-height:1.2;gap:var(--space-half, 0.25rem);flex-direction:column}.player-container[data-current-turn]::after{content:"";position:absolute;left:5%;bottom:-3%;width:90%;height:3px;background:var(--color-valid-move)}.player-container[data-current-turn]:last-child::after{bottom:auto;top:-3%}.player-container:last-child{flex-direction:column-reverse}.player-row{display:flex;align-items:center;justify-content:center;gap:var(--space-1)}.player-name{font-family:var(--font-family-primary);font-size:clamp(1rem,4vw,1.5rem);font-weight:var(--font-weight-medium);overflow-wrap:anywhere;color:var(--color-text-primary)}.player-identification{display:flex}.player-country{display:flex}.rating-details{color:var(--color-text-tertiary);letter-spacing:.025em;text-align:center}.flag-icon{width:clamp(16px,3vw,32px);height:clamp(12px,2.25vw,24px);display:inline-block;vertical-align:middle;object-fit:cover}.identification-icon{width:clamp(16px,3vw,32px);height:clamp(16px,3vw,32px);display:inline-block;vertical-align:middle}.timer-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:90%;margin:0 5%;padding:var(--space-1);background:var(--color-board-primary);border-radius:var(--radius-sm)}.timer-bar{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;height:clamp(25px,3.4vw,43px);overflow:hidden;border-radius:var(--radius-sm);background:var(--color-board-secondary);margin:0 0 var(--space-1) 0}.timer-bar:last-child{margin-bottom:0}.timer-bar-progress{height:100%;width:var(--progress-percent, 100%);background:var(--color-valid-move);transition:width .3s linear;will-change:width}@media(orientation: portrait){.game-elements{flex-direction:row}.player-container{font-size:clamp(.7rem,1.8vw,.9rem)}.player-container[data-current-turn]::after{left:15%;width:70%;bottom:-10%}.player-container[data-current-turn]:last-child::after{top:auto;bottom:-10%}.player-container:last-child{flex-direction:column}.timer-container{flex-direction:row;height:90%;margin:5% 0}.timer-bar{height:100%;margin:0 var(--space-1) 0 0}.timer-bar:last-child{margin-right:0}.timer-bar-progress{width:100%;height:var(--progress-percent, 100%);transition-property:height;will-change:height}}.turn-time{font-family:var(--font-family-mono);font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:var(--font-weight-bold)}.claim-win-button{background:var(--color-success);color:var(--color-background);cursor:pointer;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);max-width:fit-content;border:none;border-radius:var(--radius-sm)}@media(hover: hover){.claim-win-button:hover:not(:disabled){background:var(--color-warning);box-shadow:var(--shadow)}.claim-win-button:active:not(:disabled){background:var(--color-danger);box-shadow:var(--shadow-sm);transform:translateY(1px)}}.claim-win-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.claim-win-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.timer-syncing{color:var(--color-text-primary);font-weight:var(--font-weight-bold);max-width:fit-content}.messages-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:var(--z-overlay);pointer-events:none;background:var(--color-background);border-radius:var(--radius-sm);padding:var(--space-2);opacity:.77;font-family:var(--font-family-primary);font-size:var(--font-size-xxl);line-height:var(--font-size-xxl);text-align:center;width:max-content;max-width:52%}@media(orientation: portrait){.messages-overlay{max-width:77%}}.icon--highlight[data-selected]{color:var(--color-valid-move)}.icon--color[data-selected]{color:var(--color-text-primary)}.icon--validation-toggle[data-selected]{color:var(--color-text-primary)}.icon--home{transform:rotate(-90deg)}.icon--home[data-selected]{transform:rotate(90deg)}.icon--fullscreen-landscape[data-selected]{color:var(--color-valid-move)}.icon--forfeit{color:var(--color-danger)}.icon--status{padding:0}.icon--status[data-status=connected]{color:var(--color-success)}.icon--status[data-status=connecting]{color:var(--color-warning)}.icon--status[data-status=disconnected],.icon--status[data-status=error]{cursor:pointer;border:var(--border-width) var(--border-style);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.icon--status[data-status=disconnected]:hover,.icon--status[data-status=error]:hover{background:var(--color-danger);color:var(--color-background)}.icon--status[data-status=disconnected]{color:var(--color-idle);border-color:var(--color-idle)}.icon--status[data-status=disconnected]:hover{background:var(--color-idle)}.icon--status[data-status=error]{color:var(--color-danger);border-color:var(--color-danger)}.icon--status[data-status=error]:hover{background:var(--color-danger)}.btn--player-info-queue{white-space:normal;padding:var(--space-1) 0;font-size:var(--font-size-sm);height:auto;width:88%;margin:var(--space-1)}.last-game-result{display:flex;margin-bottom:var(--space-1)}[data-my-player=spectator] [data-piece-player=one].piece,[data-my-player=spectator] .timer-bar[data-player=one] .timer-bar-progress,[data-my-player=spectator] .bear-off-pieces[data-player=one] span{background:var(--color-player-1)}[data-my-player=spectator] [data-piece-player=two].piece,[data-my-player=spectator] .timer-bar[data-player=two] .timer-bar-progress,[data-my-player=spectator] .bear-off-pieces[data-player=two] span{background:var(--color-player-2)}[data-my-color=black][data-my-player=one] [data-piece-player=one].piece,[data-my-color=black][data-my-player=one] .timer-bar[data-player=one] .timer-bar-progress,[data-my-color=black][data-my-player=one] .bear-off-pieces[data-player=one] span,[data-my-color=black][data-my-player=two] [data-piece-player=two].piece,[data-my-color=black][data-my-player=two] .timer-bar[data-player=two] .timer-bar-progress,[data-my-color=black][data-my-player=two] .bear-off-pieces[data-player=two] span{background:var(--color-player-1)}[data-my-color=black][data-my-player=one] [data-piece-player=two].piece,[data-my-color=black][data-my-player=one] .timer-bar[data-player=two] .timer-bar-progress,[data-my-color=black][data-my-player=one] .bear-off-pieces[data-player=two] span,[data-my-color=black][data-my-player=two] [data-piece-player=one].piece,[data-my-color=black][data-my-player=two] .timer-bar[data-player=one] .timer-bar-progress,[data-my-color=black][data-my-player=two] .bear-off-pieces[data-player=one] span{background:var(--color-player-2)}[data-my-color=white][data-my-player=one] [data-piece-player=one].piece,[data-my-color=white][data-my-player=one] .timer-bar[data-player=one] .timer-bar-progress,[data-my-color=white][data-my-player=one] .bear-off-pieces[data-player=one] span,[data-my-color=white][data-my-player=two] [data-piece-player=two].piece,[data-my-color=white][data-my-player=two] .timer-bar[data-player=two] .timer-bar-progress,[data-my-color=white][data-my-player=two] .bear-off-pieces[data-player=two] span{background:var(--color-player-2)}[data-my-color=white][data-my-player=one] [data-piece-player=two].piece,[data-my-color=white][data-my-player=one] .timer-bar[data-player=two] .timer-bar-progress,[data-my-color=white][data-my-player=one] .bear-off-pieces[data-player=two] span,[data-my-color=white][data-my-player=two] [data-piece-player=one].piece,[data-my-color=white][data-my-player=two] .timer-bar[data-player=one] .timer-bar-progress,[data-my-color=white][data-my-player=two] .bear-off-pieces[data-player=one] span{background:var(--color-player-1)}