:root{color-scheme:dark;--bg:#10171c;--panel:#19232a;--panel2:#202d35;--text:#f2f4ef;--muted:#a7b0b3;--accent:#dcb780;--border:#36434a;--warm:#bc7c4b;--cherry:#6d2b2a;--wood:#79482c;--black:#111c22;--white:#f5e6cb;--radius:14px}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--text);font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 60% -15%,#314249 0,transparent 45%),var(--bg);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.47;cursor:not-allowed}a{color:var(--accent)}.hidden{display:none!important}.app-shell{width:min(1330px,calc(100% - 48px));margin:auto;min-height:100vh;display:flex;flex-direction:column}.app-shell main{flex:1}.topbar{height:86px;border-bottom:1px solid #ffffff19;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.14em}.brand-symbol{width:47px;height:47px;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;border-radius:11px;font-weight:950;font-size:20px;letter-spacing:-.08em;background:#282b29;box-shadow:inset 0 1px 0 #fff2}.brand-symbol span{font-size:12px;color:#fff;margin-left:1px}.brand strong{font-size:19px;display:block;line-height:1.2}.brand small{font-size:10px;color:#aeb7b3;font-weight:650;display:block;letter-spacing:.22em}.top-actions{display:flex;align-items:center;gap:12px}.identity{color:var(--accent);font-size:13px}.button{background:#30414b;border:1px solid #4e6068;color:#fff;min-height:42px;padding:10px 17px;border-radius:9px;font-weight:750;transition:filter .15s,transform .15s;white-space:nowrap}.button:not(:disabled):hover{filter:brightness(1.16)}.button:not(:disabled):active{transform:translateY(1px)}.button.primary{background:linear-gradient(130deg,#e2c58e,#c99656);border-color:#efd19a;color:#1f211c;box-shadow:0 3px 15px #0002}.button.secondary{background:#31464b;border-color:#688186}.button.ghost{background:transparent;color:#d8e2e0;border-color:#46575e}.button.wide{width:100%}.button.small{min-height:34px;padding:6px 14px;font-size:12px}.button.text-button{border:0;background:none;color:var(--accent)}.panel{background:linear-gradient(150deg,#23313a,#171f25);border:1px solid #39494e;border-radius:var(--radius);box-shadow:0 24px 55px #0002}.eyebrow{font-size:12px;letter-spacing:.19em;color:var(--accent);font-weight:850}.muted,.hero-copy p,.section-heading p,.mode-card p{color:var(--muted)}footer{padding:26px 0;text-align:center;font-size:11px;letter-spacing:.14em;color:#73848a}footer span{margin:0 10px}.auth-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:8%;align-items:center;min-height:calc(100vh - 175px);padding:45px 4%}.hero-copy h1,.section-heading h1{font-size:clamp(38px,5vw,69px);line-height:1.08;letter-spacing:-.04em;margin:18px 0}.hero-copy h1 em{font-style:normal;color:var(--accent)}.hero-copy p{max-width:530px;font-size:18px}.hero-highlights{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}.hero-highlights span{padding:7px 14px;border:1px solid #495750;border-radius:50px;color:#bfc8c6;font-size:12px;text-transform:uppercase;letter-spacing:.09em}.auth-card{padding:33px;max-width:450px;width:100%;margin:auto}.auth-card h2{font-size:27px;margin:29px 0 0}.auth-card p{margin:4px 0 25px}.segmented{display:flex;padding:4px;background:#111b21;border-radius:9px}.seg{border:0;background:none;border-radius:7px;color:#94a0a2;flex:1;padding:11px}.seg.active{background:#34454e;color:#fff;box-shadow:0 3px 11px #0003}.auth-card label,.mode-card label{display:block;font-size:13px;color:#b6c2c5;font-weight:700;margin:14px 0 7px}input:not([type=checkbox]),select{width:100%;border:1px solid #53636b;background:#111a20;color:#fff;border-radius:8px;padding:13px;outline:none}input:focus-visible,select:focus-visible{border-color:var(--accent)}.auth-card .button{margin-top:25px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:45px 0 25px}.section-heading h1{font-size:clamp(35px,4vw,52px);margin:12px 0 5px}.section-heading p{margin:0}.rating-card{background:#1e2b30;border:1px solid #49575a;padding:12px 28px;color:#99a6a7;letter-spacing:.16em;font-size:10px;text-align:center;border-radius:12px}.rating-card strong{display:block;font-size:27px;letter-spacing:0;color:var(--accent)}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.mode-card{background:linear-gradient(155deg,#25343c,#192329);border:1px solid #42515a;border-radius:15px;padding:25px;display:flex;flex-direction:column;min-height:315px;box-shadow:0 10px 22px #0002}.mode-top{display:flex;justify-content:space-between;align-items:center}.mode-icon{font-size:37px;color:#e0c392;text-shadow:0 2px 9px #0007}.pill{border:1px solid #756c56;color:#e7c999;border-radius:100px;padding:5px 10px;font-size:10px;letter-spacing:.11em;font-weight:750}.mode-card h2{font-size:21px;margin:19px 0 6px}.mode-card p{font-size:13px;flex:1;margin:0 0 8px}.mode-card .button{margin-top:16px}.mode-card label.check{display:flex;gap:9px;align-items:center;line-height:1.3;min-height:43px}.mode-card input[type=checkbox]{accent-color:#d5ae72}.tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.rooms{padding:17px 19px;min-height:180px}.list-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.list-heading h2{font-size:17px;margin:0}.live-dot{width:9px;height:9px;border-radius:100%;background:#81cc9b;box-shadow:0 0 0 4px #81cc9b15}.game-list{max-height:305px;overflow:auto}.game-item{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;border-top:1px solid #ffffff13}.game-detail{min-width:0}.game-detail strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-detail small{display:block;color:#9caeaf}.empty-games{padding:25px 0;color:#84999f;font-size:13px}.game-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0}.match-head{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:10px;margin-bottom:15px}.player-card{display:flex;gap:12px;align-items:center;background:#1b282f;border:1px solid #3d4b4f;padding:12px 15px;border-radius:12px;min-width:0}.player-card.right{flex-direction:row-reverse;text-align:right}.player-card small{display:block;color:#93a3a7;font-size:10px;letter-spacing:.13em}.player-card strong{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-disc{width:35px;height:35px;flex:0 0 35px;border-radius:50%;box-shadow:inset 0 2px 4px #fff7,inset 0 -4px 5px #0007,0 4px 5px #0005;border:3px solid #ffffff4a}.white-disc{background:linear-gradient(135deg,#fff8e9,#d2b48d)}.black-disc{background:linear-gradient(135deg,#556169,#0b151b)}.match-status{text-align:center}.match-status strong{display:block;font-size:18px;color:var(--accent)}.match-status small{display:block;color:#a2b0b0;font-size:12px;min-height:20px}.play-area{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:13px;align-items:stretch;padding:13px 0}.board-perspective{perspective:1300px}.board-frame{position:relative;padding:19px;border:7px ridge #bc9065;border-radius:14px;background:repeating-linear-gradient(22deg,#6d3b25 0,#875335 3px,#70412c 7px,#995e37 10px);box-shadow:0 6px 0 #382015,0 15px 0 #27180f,0 25px 36px #000b,inset 0 0 15px #0009;transform:rotateX(5deg);transform-origin:center bottom;transition:transform .2s}.board-frame::after{content:'';pointer-events:none;position:absolute;inset:8px;border:1px solid #efc79835;border-radius:8px}.board-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(27px,.7fr) repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(210px,1fr));background:repeating-linear-gradient(110deg,#b87e4d 0px,#b87e4d 15px,#b27547 22px,#ac7046 39px);border:2px solid #573b29;border-radius:5px;overflow:hidden;box-shadow:inset 0 0 25px #341507a8,inset 0 0 3px 2px #0006}.point{position:relative;display:block;background:transparent;border:0;padding:0;min-width:0;z-index:1}.point:focus-visible{outline:2px solid #fdf1bd;outline-offset:-3px}.point:hover{background:#fffff00c}.triangle{position:absolute;inset:0 1px;filter:drop-shadow(1px 0 1px #0005)}.point.top .triangle{clip-path:polygon(0 0,100% 0,50% 90%)}.point.bottom .triangle{clip-path:polygon(0 100%,100% 100%,50% 10%)}.triangle.gold{background:linear-gradient(90deg,#cfaa72,#e6bb82 48%,#ae7644);box-shadow:inset 0 0 7px #0003}.triangle.red{background:linear-gradient(90deg,#6d2423,#963c30 50%,#612622)}.stack{position:absolute;inset:16px 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;z-index:4;pointer-events:none}.point.bottom .stack{justify-content:flex-end;flex-direction:column-reverse}.piece{display:block;width:min(76%,39px);aspect-ratio:1/1;flex:0 0 auto;border-radius:50%;position:relative;border:2px solid #ffffff50;box-shadow:0 3px 2px #0008,0 4px 5px #0005,inset 0 1px 3px #fff7,inset 0 -4px 5px #0005}.piece::after{content:'';position:absolute;inset:21%;border-radius:50%;border:2px solid #ffffff45;box-shadow:inset 0 1px 3px #0003}.piece.white{background:radial-gradient(circle at 32% 19%,#fffdf5,#ebdabe 50%,#b99b75 92%);border-color:#fffcdf9e}.piece.black{background:radial-gradient(circle at 35% 22%,#748187,#27323b 55%,#091018 95%);border-color:#c7d2d44d}.stack-count{background:#1b2425eb;border:1px solid #ead0a3;color:#fff;padding:0px 6px;font-size:12px;border-radius:40px;position:absolute;top:44%;font-weight:800}.point-number{position:absolute;z-index:5;left:50%;transform:translateX(-50%);font-size:10px;font-weight:850;color:#321c0f;text-shadow:0 1px 1px #fffffb75}.point.top .point-number{bottom:2px}.point.bottom .point-number{top:2px}.point.source-legal::before,.middle-bar.source-legal::before{content:'';position:absolute;inset:1px;border:2px solid #bbf0c1b8;border-radius:3px;z-index:7;pointer-events:none}.point.selected::before,.middle-bar.selected::before{content:'';position:absolute;inset:0;border:3px solid #fff2a4;border-radius:4px;z-index:7;pointer-events:none;box-shadow:inset 0 0 16px #ffee5544}.point.destination-legal::after{content:'';position:absolute;z-index:8;top:50%;left:50%;transform:translate(-50%,-50%);height:20px;width:20px;border-radius:100%;background:#dceba65c;border:2px solid #f7f6c9;pointer-events:none}.middle-bar{grid-column:7;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 2px;z-index:3;position:relative;border:2px ridge #764a2f;border-top:0;border-bottom:0;background:repeating-linear-gradient(90deg,#5f3023 0,#905b36 10px,#754126 15px);box-shadow:inset 2px 0 7px #0006;min-width:0}.middle-bar small{color:#e3bc8b;font-size:9px;letter-spacing:1px;writing-mode:vertical-rl}.bar-pieces{display:flex;flex-direction:column;align-items:center;gap:2px;color:white;font-size:10px}.middle-bar .piece{width:min(98%,30px)}.off-tray{border:6px ridge #ab8056;border-radius:11px;background:repeating-linear-gradient(90deg,#432a20 0,#69402a 9px,#4b2c1c 20px);box-shadow:0 10px 0 #24170f,0 19px 25px #0008;min-width:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:12px 4px;cursor:pointer}.off-tray.destination-legal{outline:3px solid #e0f5ad;outline-offset:2px}.off-label{writing-mode:vertical-rl;color:#f6dab6;font-size:9px;letter-spacing:.18em}.off-white,.off-black{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff}.piece.mini{width:31px}.controls{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:985px;margin:20px auto 0;padding:14px 25px;min-height:101px}.bar-info{min-width:160px}.label-small{font-size:10px;letter-spacing:.17em;color:#92a6a8}.bar-numbers{display:flex;gap:18px;font-size:12px}.bar-numbers strong{font-size:18px;color:#e7c99c}.dice-box{text-align:center}.dice-pair{display:flex;gap:12px;justify-content:center;align-items:center}.die{width:45px;height:45px;border:2px solid #fff8df;color:#282b26;background:linear-gradient(145deg,#fffaf1,#cfccb9);border-radius:8px;display:grid;place-items:center;font-size:37px;line-height:1;box-shadow:2px 4px 0 #77725f,4px 7px 11px #0007;transform:rotate(-5deg)}.die:nth-child(2){transform:rotate(7deg)}.shaking .die{animation:shake .4s ease-in-out}.shaking .die:nth-child(2){animation-delay:.08s}@keyframes shake{0%{transform:rotate(-5deg) translate(0)}30%{transform:rotate(18deg) translate(7px,-8px)}65%{transform:rotate(-20deg) translate(-4px,5px)}100%{transform:rotate(-5deg) translate(0)}}.remaining{color:#a2b6b6;font-size:11px;margin-top:8px}.game-buttons{display:flex;gap:10px}.help-line{text-align:center;color:#99aeb1;font-size:12px;margin:25px 0 5px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#234235;border:1px solid #4e986c;color:#f5f7ee;padding:12px 20px;border-radius:9px;max-width:90vw;box-shadow:0 10px 40px #0009;z-index:100;transition:all .2s}#toast.error{background:#5e302d;border-color:#a55a56}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.auth-layout{grid-template-columns:1fr;gap:22px;padding:30px 0}.hero-copy h1{font-size:45px}.auth-card{margin:0;max-width:none}.mode-grid{grid-template-columns:1fr 1fr}.mode-card:last-child{grid-column:span 2}.tables-grid{grid-template-columns:1fr}.board-frame{padding:10px;transform:rotateX(3deg)}.board-grid{grid-template-rows:repeat(2,minmax(175px,1fr))}.controls{padding:13px}.game-buttons{flex-direction:column}.match-status strong{font-size:14px}}
@media(max-width:600px){.app-shell{width:calc(100% - 20px)}.topbar{height:74px}.brand{gap:7px}.brand-symbol{width:37px;height:37px;font-size:17px}.brand strong{font-size:15px}.brand small{font-size:8px}.identity{font-size:10px}.top-actions{gap:5px}.top-actions .button{padding:6px;font-size:10px;min-height:32px}.section-heading{margin:24px 0 15px}.section-heading h1{font-size:35px}.rating-card{padding:8px 12px;font-size:8px}.rating-card strong{font-size:21px}.mode-grid{grid-template-columns:1fr;gap:10px}.mode-card{min-height:0;padding:18px}.mode-card:last-child{grid-column:auto}.mode-card p{margin-bottom:4px}.mode-card h2{margin:9px 0 5px}.tables-grid{margin-top:15px}.game-nav{margin:13px 0}.game-nav .button{padding:8px;font-size:10px;min-height:35px}.game-nav .pill{font-size:8px}.match-head{gap:5px;grid-template-columns:1fr 1.3fr 1fr}.player-card{padding:6px;gap:5px;border-radius:7px}.player-disc{width:19px;height:19px;flex-basis:19px;border-width:1px}.player-card small{font-size:8px}.player-card strong{font-size:11px}.match-status strong{font-size:12px;line-height:1.2}.match-status small{font-size:9px;line-height:1.25}.play-area{grid-template-columns:minmax(0,1fr) 43px;gap:4px;padding:6px 0}.board-frame{border-width:4px;padding:4px;border-radius:6px}.board-grid{grid-template-columns:repeat(6,minmax(0,1fr)) minmax(12px,.6fr) repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(141px,1fr))}.triangle{inset:0}.stack{inset:13px 0;gap:0}.piece{width:96%;border-width:1px;box-shadow:0 2px 1px #0009,inset 0 1px 1px #fff8}.piece::after{border-width:1px}.point-number{font-size:8px}.middle-bar{padding:12px 0}.middle-bar small{font-size:7px}.middle-bar .piece{width:100%}.off-tray{border-width:3px;border-radius:4px;padding:4px 0}.off-label{font-size:7px;letter-spacing:.05em}.piece.mini{width:18px}.off-white,.off-black{gap:0;font-size:11px}.controls{flex-wrap:wrap;justify-content:space-around;gap:6px;margin-top:15px;padding:10px 8px}.bar-info{min-width:90px}.bar-numbers{flex-direction:column;gap:0;font-size:11px}.bar-numbers strong{font-size:12px}.die{width:33px;height:33px;font-size:27px}.dice-pair{gap:8px}.remaining{font-size:9px;max-width:170px}.game-buttons{gap:5px}.game-buttons .button{font-size:10px;padding:7px 10px;min-height:33px}.help-line{font-size:11px;margin:13px 6px}.auth-layout{padding:28px 4px}.hero-copy h1{font-size:41px}.hero-copy p{font-size:15px}.auth-card{padding:21px}.hero-highlights span{font-size:9px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.standings{padding:18px 20px;margin-top:20px}.leaderboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.ranking-row{display:flex;align-items:center;gap:13px;padding:10px;border-top:1px solid #ffffff18;font-size:13px}.ranking-row strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ranking-rank{font-variant-numeric:tabular-nums;color:#dcb780;font-size:12px}.ranking-score{color:#c6d1ce;font-size:12px}.ranking-row:nth-child(-n+3) .ranking-rank{font-weight:900;color:#f5d397}@media(max-width:600px){.leaderboard{grid-template-columns:1fr}}

/* Tabla mai inalta, fara modificarea latimii */
@media (min-width: 851px) {
  .board-grid {
    grid-template-rows: repeat(2, minmax(290px, 1fr));
  }
}
@media (min-width: 601px) and (max-width: 850px) {
  .board-grid {
    grid-template-rows: repeat(2, minmax(250px, 1fr));
  }
}
@media (max-width: 600px) {
  .board-grid {
    grid-template-rows: repeat(2, minmax(195px, 1fr));
  }
}

/* TABLE 3D ARENA: walnut board, taller not wider */
.board-frame{border:9px ridge #aa794b;background:repeating-linear-gradient(14deg,#58331f 0,#875631 7px,#613820 14px,#a36a3e 21px);box-shadow:0 8px 0 #2e1a0e,0 21px 35px #000a,inset 0 0 17px #2b130a}
.board-grid{position:relative;grid-template-rows:repeat(2,minmax(335px,1fr));background:repeating-linear-gradient(95deg,#b5824d 0,#c7955c 22px,#af7644 45px)}
.triangle.gold{background:linear-gradient(90deg,#d7b17a,#f0d09b 50%,#b58b53)}.triangle.red{background:linear-gradient(90deg,#62271f,#963c2b 48%,#64231e)}
.dice-on-board{position:absolute;z-index:30;pointer-events:none;left:50%;top:50%;display:flex;gap:14px;align-items:center;justify-content:center;transform:translate(-50%,-50%)}
.dice-on-board.white-turn{top:74%}.dice-on-board.black-turn{top:26%}
.dice-on-board .die{width:clamp(30px,4vw,52px);height:clamp(30px,4vw,52px);font-size:clamp(26px,3.5vw,42px);box-shadow:3px 5px 0 #77674c,5px 8px 10px #0009}
.dice-on-board.rolling .die{animation:arena-roll .85s cubic-bezier(.18,.7,.28,1) both}
.dice-on-board.rolling .die:nth-child(2){animation-delay:.09s}
@keyframes arena-roll{0%{transform:translate(-85px,-75px) rotate(-380deg) scale(.7)}45%{transform:translate(22px,12px) rotate(145deg) scale(1.12)}75%{transform:translate(-8px,-12px) rotate(330deg)}100%{transform:translate(0,0) rotate(360deg)}}
.dice-pair{display:none}
@media(max-width:850px){.board-grid{grid-template-rows:repeat(2,minmax(270px,1fr))}}
@media(max-width:600px){.board-frame{padding:5px;border-width:5px}.board-grid{grid-template-rows:repeat(2,minmax(210px,1fr))}.dice-on-board{gap:7px}.dice-on-board .die{width:29px;height:29px;font-size:25px}}

/* V2: traditional polished walnut playing surface */
.board-frame{background:linear-gradient(125deg,#ac7541 0%,#60351d 12%,#8b512b 25%,#452410 50%,#955b32 78%,#a87342 100%);border:12px ridge #a77b4e;border-radius:11px;transform:none}
.board-grid{background:repeating-linear-gradient(90deg,#b88752 0px,#d4a66c 36px,#c49159 72px);border:4px solid #4b2916;box-shadow:inset 0 0 45px #2c120a7d;grid-template-rows:repeat(2,minmax(365px,1fr))}
.triangle.gold{background:linear-gradient(90deg,#e6c58d,#f6deb0 50%,#cba56d)}.triangle.red{background:linear-gradient(90deg,#67291d,#a04531 50%,#66281e)}
.piece{box-shadow:0 4px 3px #0009,0 7px 7px #0006,inset 0 2px 4px #fff8,inset 0 -4px 6px #0006}
@media(max-width:850px){.board-grid{grid-template-rows:repeat(2,minmax(280px,1fr))}}
@media(max-width:600px){.board-frame{border-width:5px}.board-grid{grid-template-rows:repeat(2,minmax(215px,1fr))}}

/* V3: visibly different premium tournament table: dark walnut + forest felt */
.board-frame{border:16px solid #6e3e20;border-radius:20px;padding:17px;background:linear-gradient(145deg,#b88048,#512b17 28%,#aa7442 48%,#452312 74%,#b47e48);box-shadow:inset 0 0 0 4px #d5a46b,inset 0 0 0 9px #321a10,0 12px 0 #26140d,0 28px 45px #000a;transform:none}
.board-grid{border:7px solid #301b11;border-radius:7px;background:radial-gradient(ellipse at 50% 40%,#27594b,#173e36 75%,#102c27);grid-template-rows:repeat(2,minmax(350px,1fr));box-shadow:inset 0 0 55px #0009}
.triangle.gold{background:linear-gradient(90deg,#e6bc7c,#f5d5a0 52%,#c49a5b)}
.triangle.red{background:linear-gradient(90deg,#762b25,#b54b3b 52%,#702a24)}
.middle-bar{background:linear-gradient(90deg,#3d2015,#98643c 35%,#482517 65%,#b47a45);border-left:3px solid #d7a36d;border-right:3px solid #28150e}
.point-number{color:#f6dbb4;text-shadow:0 1px 3px #000;font-size:11px}
.piece{border-width:3px;box-shadow:0 4px 3px #0009,0 7px 9px #0008,inset 0 2px 4px #fff9,inset 0 -5px 7px #0009}
.board-grid .dice-on-board{left:49%}
@media(max-width:850px){.board-frame{border-width:9px;padding:9px}.board-grid{border-width:4px;grid-template-rows:repeat(2,minmax(260px,1fr))}}
@media(max-width:600px){.board-frame{border-width:5px;padding:4px;border-radius:9px}.board-grid{border-width:2px;grid-template-rows:repeat(2,minmax(205px,1fr))}.point-number{font-size:8px}.piece{border-width:1px}}

/* Fix: bottom checkers must stack from the bottom edge */
.point.bottom .stack{flex-direction:column-reverse;justify-content:flex-start}

/* Captured pieces: clearly actionable central bar */
.middle-bar.source-legal{cursor:pointer;outline:3px solid #d3f1a5;outline-offset:-4px;box-shadow:inset 0 0 20px #8ce49b55}
.middle-bar.source-legal .piece{filter:drop-shadow(0 0 5px #d5ffad)}

/* Captured pieces always visible in the middle and clickable for re-entry */
.middle-bar{overflow:visible;isolation:isolate}
.middle-bar.has-captured{background:linear-gradient(90deg,#60311b,#b07945 50%,#60311b);box-shadow:inset 0 0 0 2px #ffda9a,0 0 12px #e6b96c55}
.middle-bar .bar-pieces{width:100%;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;flex-shrink:0}
.middle-bar .bar-pieces .piece{display:block;flex:0 0 auto;width:min(100%,30px);height:auto;aspect-ratio:1;border:2px solid #fff8}
.middle-bar .captured-counter{font-size:9px;font-weight:900;color:#fff3d1;text-align:center;writing-mode:horizontal-tb;line-height:1.2;white-space:normal;max-width:100%;overflow-wrap:anywhere}
.middle-bar.source-legal{outline:4px solid #9ff0ac;outline-offset:-4px}
@media(max-width:600px){.middle-bar .bar-pieces{min-height:34px;gap:1px}.middle-bar .captured-counter{font-size:6px}.game-buttons{flex-wrap:wrap}.game-buttons #undoBtn{order:1}}

/* PREMIUM ARENA v8 */
:root{--accent:#f0ce91;--bg:#0a1014;--text:#f7f0e3}
body{background:radial-gradient(ellipse at 50% -20%,#34423b 0,transparent 58%),linear-gradient(135deg,#0b1216,#111b1d 55%,#090f12);color:#f4efe4}
.topbar{border-bottom:1px solid #b48a5050;backdrop-filter:blur(10px)}
.brand-symbol{border-color:#e4c48a;background:linear-gradient(135deg,#4c3622,#171c1b);box-shadow:0 0 24px #cda66c25,inset 0 1px 0 #fff4}
.brand strong{color:#f9e8c6}
.panel,.mode-card,.player-card{background:linear-gradient(145deg,#24322f,#111b1f 85%);border-color:#9a795442;box-shadow:0 12px 40px #0005,inset 0 1px 0 #fff1}
.mode-card{transition:transform .22s,border-color .22s,box-shadow .22s}
.mode-card:hover{transform:translateY(-4px);border-color:#d6b37b;box-shadow:0 18px 44px #0008}
.button{border-radius:8px;transition:transform .18s,box-shadow .18s,filter .18s}
.button.primary{background:linear-gradient(145deg,#ffe4ad,#c99247);border:1px solid #ffebb7;color:#30200f;box-shadow:0 4px 15px #cf9b5250}
.button.primary:not(:disabled):hover{box-shadow:0 6px 25px #f0c27880;transform:translateY(-1px)}
.board-perspective{filter:drop-shadow(0 28px 25px #0008)}
.board-frame{border:9px ridge #a77640;border-radius:14px;padding:17px;background:repeating-linear-gradient(92deg,#4d2816 0px,#754629 7px,#432313 15px,#9a6239 23px,#54301c 31px);box-shadow:0 8px 0 #2b160c,0 18px 0 #1b100c,0 32px 55px #000b,inset 0 0 0 3px #e4b67b80,inset 0 0 22px #0009}
.board-grid{border:3px solid #42271b;background:radial-gradient(ellipse at center,#244b3e,#142e29 80%);box-shadow:inset 0 0 50px #020d0bba,inset 0 0 0 3px #c5a07455}
.triangle.red{background:linear-gradient(90deg,#641f20,#aa3b36 50%,#641f20)}
.triangle.gold{background:linear-gradient(90deg,#c6a178,#e8cba1 50%,#b58c5f)}
.piece{border:2px solid #ffffff70;box-shadow:0 3px 2px #000a,0 5px 8px #0007,inset 0 2px 3px #fff8,inset 0 -4px 6px #0006}
.piece.white{background:radial-gradient(circle at 32% 20%,#fffef8,#f1dfbe 50%,#bca07c)}
.piece.black{background:radial-gradient(circle at 32% 20%,#7e8a8b,#273137 48%,#0b1115)}
.point.source-legal{background:#a2e5ac16}
.point.selected{background:#f7d78528}
.point.destination-legal{background:#e6d6a015}
.middle-bar{background:linear-gradient(90deg,#3b2116,#875333 50%,#3b2116);border-color:#a97848}
.middle-bar .bar-pieces{width:100%;min-height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;gap:3px}
.middle-bar .bar-pieces .piece{width:min(100%,30px);aspect-ratio:1;flex:0 0 auto}
.middle-bar.has-captured{box-shadow:inset 0 0 0 2px #f6d49b,0 0 16px #e8b66566}
.captured-counter{font-size:9px;font-weight:850;color:#ffe7bd;writing-mode:horizontal-tb;text-align:center;line-height:1.1}
.off-tray{background:repeating-linear-gradient(90deg,#3a2116,#674029 9px,#3c2318 20px);border-color:#b38a57}
.match-status strong{color:#f7d9a3;font-size:20px}
.controls{border:1px solid #b48c5e55;max-width:1100px}
.finish-overlay{position:fixed;inset:0;z-index:200;background:#060c10dd;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}
.finish-card{width:min(520px,100%);text-align:center;padding:36px 28px;border:2px solid #c19a63;border-radius:18px;background:radial-gradient(ellipse at top,#36483e,#142025 75%);box-shadow:0 30px 100px #000d}
.finish-trophy{font-size:64px;color:#f7d49d}.finish-eyebrow{font-size:11px;letter-spacing:.2em;color:#e7c58e}
.finish-card h2{font-size:clamp(25px,4vw,37px);color:#fff1d5;margin:12px 0}
.finish-card p{color:#b7c6c1}.finish-result{display:flex;justify-content:space-between;gap:12px;padding:17px 0;margin:20px 0;border-top:1px solid #b48c5e66;border-bottom:1px solid #b48c5e66;color:#f2d5a4}
.finish-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.finish-actions .button{flex:1 1 150px;white-space:normal}.finish-footnote{font-size:11px}
@media(max-width:600px){.board-frame{border-width:5px;padding:5px}.board-grid{border-width:1px}.finish-card{padding:25px 16px}.finish-actions{flex-direction:column}.finish-actions .button{width:100%}.middle-bar .bar-pieces{min-height:35px}.captured-counter{font-size:6px}.match-status strong{font-size:13px}}


/* v9: physical dice with recessed pips, 247-style interaction, original premium board */
.dice-on-board{z-index:35;gap:19px;filter:drop-shadow(0 10px 6px #0009)}
.dice-on-board .die.pip-die{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;padding:7px;width:clamp(36px,4.3vw,55px);height:clamp(36px,4.3vw,55px);font-size:0;color:transparent;border-radius:11px;border:2px solid #fff8e6;background:linear-gradient(145deg,#fffdf5 5%,#f2e7ce 55%,#cbbda2);box-shadow:inset 2px 2px 3px #fff,inset -3px -4px 5px #958976,2px 4px 0 #8e8068,5px 9px 12px #0008}
.pip-die .pip-dot{display:none;width:clamp(5px,.7vw,9px);height:clamp(5px,.7vw,9px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#4c4943,#171819 80%);box-shadow:inset 1px 1px 2px #000b,0 1px 1px #fff8}
.pip-die.pip-1 .dot-4,.pip-die.pip-2 .dot-0,.pip-die.pip-2 .dot-8,.pip-die.pip-3 .dot-0,.pip-die.pip-3 .dot-4,.pip-die.pip-3 .dot-8,.pip-die.pip-4 .dot-0,.pip-die.pip-4 .dot-2,.pip-die.pip-4 .dot-6,.pip-die.pip-4 .dot-8,.pip-die.pip-5 .dot-0,.pip-die.pip-5 .dot-2,.pip-die.pip-5 .dot-4,.pip-die.pip-5 .dot-6,.pip-die.pip-5 .dot-8,.pip-die.pip-6 .dot-0,.pip-die.pip-6 .dot-2,.pip-die.pip-6 .dot-3,.pip-die.pip-6 .dot-5,.pip-die.pip-6 .dot-6,.pip-die.pip-6 .dot-8{display:block}
.dice-on-board.white-turn{top:73%;left:50%}.dice-on-board.black-turn{top:27%;left:50%}
.dice-on-board.rolling .pip-die{animation:premium-dice-toss .8s cubic-bezier(.19,.75,.22,1) both}
.dice-on-board.rolling .pip-die:nth-child(2){animation-delay:.12s}
@keyframes premium-dice-toss{0%{opacity:.35;transform:translate(-110px,-85px) rotate(-580deg) scale(.65)}55%{opacity:1;transform:translate(13px,-16px) rotate(30deg) scale(1.14)}77%{transform:translate(-5px,5px) rotate(-11deg) scale(.95)}100%{transform:translate(0,0) rotate(-5deg) scale(1)}}
@media(max-width:600px){.dice-on-board{gap:9px}.dice-on-board .die.pip-die{width:31px;height:31px;padding:4px;border-radius:7px}.pip-die .pip-dot{width:5px;height:5px}}
@media(prefers-reduced-motion:reduce){.dice-on-board.rolling .pip-die{animation:none}}


/* v10: white 3D dice matching the reference's floating dice; no board redesign */
.board-grid .dice-on-board.white-turn,.board-grid .dice-on-board.black-turn{top:50%;left:27%;transform:translate(-50%,-50%);gap:5px;filter:drop-shadow(3px 10px 4px #0007)}
.dice-on-board .die.pip-die,.dice-on-board.black-turn .die.pip-die{width:clamp(37px,4vw,53px);height:clamp(37px,4vw,53px);padding:6px;border-radius:10px;border:1px solid #e1e1e1;background:linear-gradient(135deg,#fff 0%,#fff 46%,#e2e2e2 80%,#b6b6b6 100%);box-shadow:inset 3px 3px 5px #fff,inset -4px -4px 5px #aaa,4px 5px 0 #a9a9a9,6px 8px 9px #0007;transform:rotate(-17deg)}
.dice-on-board .die.pip-die:nth-child(2){transform:translateY(16px) rotate(15deg)}
.dice-on-board.black-turn .pip-dot,.dice-on-board .pip-dot{background:radial-gradient(circle at 35% 30%,#4a4a4a,#080808 80%);box-shadow:inset 1px 1px 2px #000b,0 1px 1px #fff9}
.dice-on-board.rolling .pip-die{animation:premium-dice-toss .8s cubic-bezier(.19,.75,.22,1) both}
@media(max-width:600px){.board-grid .dice-on-board.white-turn,.board-grid .dice-on-board.black-turn{left:26%;top:50%}.dice-on-board .die.pip-die,.dice-on-board.black-turn .die.pip-die{width:32px;height:32px;padding:4px}}


/* v11: compact layout and legible classic dice */
@media(min-width:851px){
.app-shell{width:min(1064px,calc(100% - 48px))}
.board-grid{grid-template-rows:repeat(2,minmax(292px,1fr))}
.board-frame{padding:12px;border-width:7px}
}
.board-grid .dice-on-board.white-turn,.board-grid .dice-on-board.black-turn{left:26%;top:50%;gap:12px;transform:translate(-50%,-50%);filter:none}
.dice-on-board .die.pip-die,.dice-on-board .die.pip-die:nth-child(2),.dice-on-board.black-turn .die.pip-die,.dice-on-board.black-turn .die.pip-die:nth-child(2){width:44px;height:44px;padding:7px;border:2px solid #fff;border-radius:9px;transform:none;background:#f8f8f6;box-shadow:inset -3px -3px 5px #c5c5c5,inset 2px 2px 3px #fff,0 3px 0 #888,0 6px 8px #0008}
.dice-on-board .pip-die .pip-dot,.dice-on-board.black-turn .pip-die .pip-dot{width:8px;height:8px;background:#171717;box-shadow:inset 1px 1px 2px #0008}
.dice-on-board.rolling .pip-die{animation:clean-dice-roll .55s ease-out both}
.dice-on-board.rolling .pip-die:nth-child(2){animation-delay:.07s}
@keyframes clean-dice-roll{from{opacity:.5;transform:translateY(-24px) rotate(-90deg)}70%{opacity:1;transform:translateY(4px) rotate(8deg)}to{transform:none}}
@media(max-width:850px){.board-grid .dice-on-board.white-turn,.board-grid .dice-on-board.black-turn{left:26%;top:50%;gap:6px}.dice-on-board .die.pip-die,.dice-on-board .die.pip-die:nth-child(2),.dice-on-board.black-turn .die.pip-die{width:30px;height:30px;padding:4px}.dice-on-board .pip-die .pip-dot{width:5px;height:5px}}


/* v12: definitive dice overrides, deliberately scoped above all legacy dice rules */
#board .dice-on-board{position:absolute!important;left:27%!important;top:50%!important;transform:translate(-50%,-50%)!important;display:flex!important;align-items:center!important;gap:18px!important;z-index:50!important;filter:none!important}
#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2){box-sizing:border-box!important;position:relative!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:7px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(3,1fr)!important;place-items:center!important;border:1px solid #e9e9e9!important;border-radius:9px!important;background:linear-gradient(140deg,#fff 0%,#fff 45%,#e7e7e7 80%,#c7c7c7 100%)!important;box-shadow:inset 2px 2px 3px #fff,inset -3px -3px 4px #aaa,3px 4px 0 #888,5px 7px 9px #0008!important;transform:none!important;animation:none!important;font-size:0!important}
#board .dice-on-board .die.pip-die:nth-child(2){margin-top:16px!important}
#board .dice-on-board .pip-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:#151515!important;box-shadow:inset 1px 1px 2px #000a!important}
#board .dice-on-board.rolling .die.pip-die{animation:clean-dice-roll .55s ease-out both!important}
@media(max-width:850px){#board .dice-on-board{gap:9px!important}#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2){width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:4px!important}#board .dice-on-board .pip-dot{width:5px!important;height:5px!important}}


/* v13 - actual perspective dice, three visible faces, replacing flat tiles */
#board .dice-on-board{perspective:650px!important;gap:28px!important;overflow:visible!important;filter:drop-shadow(0 9px 5px #0009)!important}
#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2){position:relative!important;overflow:visible!important;transform-style:preserve-3d!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;padding:7px!important;border-radius:8px!important;transform:rotateX(-25deg) rotateY(-26deg) rotateZ(-13deg)!important;box-shadow:inset 2px 2px 4px #fff,inset -3px -3px 4px #c3c3c3,0 11px 11px #0008!important;background:linear-gradient(135deg,#fff,#ececec)!important}
#board .dice-on-board .die.pip-die:nth-child(2){margin-top:22px!important;transform:rotateX(24deg) rotateY(29deg) rotateZ(17deg)!important}
#board .dice-on-board .die.pip-die::before{content:'';position:absolute;left:100%;top:5px;width:13px;height:calc(100% - 4px);border:1px solid #b6b6b6;border-radius:0 5px 6px 0;background:radial-gradient(circle at 55% 25%,#171717 0 3px,transparent 3.5px),radial-gradient(circle at 55% 72%,#171717 0 3px,transparent 3.5px),linear-gradient(90deg,#dedede,#aaa);transform-origin:left center;transform:rotateY(58deg);box-shadow:2px 2px 3px #0005}
#board .dice-on-board .die.pip-die::after{content:'';position:absolute;left:5px;bottom:100%;height:13px;width:calc(100% - 4px);border:1px solid #c7c7c7;border-radius:5px 5px 0 0;background:radial-gradient(circle at 30% 55%,#171717 0 3px,transparent 3.5px),radial-gradient(circle at 72% 55%,#171717 0 3px,transparent 3.5px),linear-gradient(#fff,#d6d6d6);transform-origin:center bottom;transform:rotateX(58deg)}
#board .dice-on-board.rolling .die.pip-die{animation:die-3d-toss .7s ease-out both!important}
@keyframes die-3d-toss{0%{opacity:.5;translate:-30px -40px;rotate:-220deg}75%{opacity:1;translate:5px 3px;rotate:12deg}100%{translate:0 0;rotate:0deg}}
@media(max-width:850px){#board .dice-on-board{gap:16px!important}#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2){width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important;padding:4px!important}#board .dice-on-board .die.pip-die::before{width:9px!important}#board .dice-on-board .die.pip-die::after{height:9px!important}}


/* v14: dedicated SVG dice assets; fully disable prior CSS 3D experiments */
#board .dice-on-board{left:28%!important;top:50%!important;gap:6px!important;perspective:none!important;filter:none!important;overflow:visible!important}
#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2),#board .dice-on-board.black-turn .die.pip-die{width:65px!important;height:68px!important;min-width:65px!important;min-height:68px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-size:contain!important;background-position:center!important;box-shadow:none!important;transform:none!important;filter:none!important}
#board .dice-on-board .die.pip-die:nth-child(2){margin-top:22px!important}
#board .dice-on-board .die.pip-die::before,#board .dice-on-board .die.pip-die::after,#board .dice-on-board .pip-dot{display:none!important}
#board .dice-on-board.rolling .die.pip-die{animation:svg-dice-fall .55s ease-out both!important}
@keyframes svg-dice-fall{0%{opacity:.5;translate:-25px -30px;rotate:-25deg}75%{opacity:1;translate:3px 4px;rotate:5deg}100%{translate:0 0;rotate:0deg}}
@media(max-width:850px){#board .dice-on-board{gap:2px!important}#board .dice-on-board .die.pip-die,#board .dice-on-board .die.pip-die:nth-child(2){width:43px!important;height:45px!important;min-width:43px!important;min-height:45px!important}}


/* v15: enforce SVG images over previous !important background shorthand */
#board .dice-on-board .die.pip-die{background-color:transparent!important;background-repeat:no-repeat!important;background-size:contain!important;background-position:center!important}
#board .dice-on-board .die.pip-1{background-image:url('/assets/dice/die-1.svg')!important}
#board .dice-on-board .die.pip-2{background-image:url('/assets/dice/die-2.svg')!important}
#board .dice-on-board .die.pip-3{background-image:url('/assets/dice/die-3.svg')!important}
#board .dice-on-board .die.pip-4{background-image:url('/assets/dice/die-4.svg')!important}
#board .dice-on-board .die.pip-5{background-image:url('/assets/dice/die-5.svg')!important}
#board .dice-on-board .die.pip-6{background-image:url('/assets/dice/die-6.svg')!important}