.bg-game{--bg-ink:#eeeaf8;--bg-muted:#a29ab4;--bg-cyan:#76ecde;--bg-purple:#b28bfa;--bg-cream:#f4ecd9;position:fixed;inset:0;z-index:170;overflow:auto;background:radial-gradient(ellipse at 18% 4%,#44306270,transparent 49%),radial-gradient(ellipse at 88% 75%,#163f4660,transparent 50%),#12111e;color:var(--bg-ink);font-family:Arial,"Noto Sans Hebrew",sans-serif;isolation:isolate;text-align:right}
.bg-game *{box-sizing:border-box}
.bg-game [hidden]{display:none!important}
.bg-game button,.bg-game select{font:inherit}
.bg-game button{cursor:pointer;touch-action:manipulation}
.bg-game button:not(.bg-cell){min-height:44px}
.bg-game button:disabled{opacity:.35;cursor:default}
.bg-game button:focus-visible,.bg-game select:focus-visible,.bg-game summary:focus-visible{outline:3px solid var(--bg-cyan);outline-offset:4px}
.bg-header{max-width:1240px;margin:auto;padding:24px 30px;display:flex;align-items:center;justify-content:space-between}
.bg-wordmark{display:flex;align-items:center;gap:20px}
.bg-wordmark>span{font-size:29px;font-weight:900;letter-spacing:-2px;direction:ltr}
.bg-brand-dot{font-size:12px;color:var(--bg-cyan);padding-left:4px}
.bg-wordmark small{font-size:12px;color:var(--bg-muted)}
.bg-exit{border:0;background:#ffffff08;color:#d9d3e4;padding:12px 18px;border-radius:30px}
.bg-exit span{color:var(--bg-cyan);margin-right:12px}
.bg-layout{display:grid;grid-template-columns:minmax(320px,690px) 290px;gap:54px;max-width:1130px;margin:auto;padding:18px 30px 50px;align-items:start}
.bg-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.bg-eyebrow{font-size:11px;letter-spacing:.5px;color:var(--bg-cyan)}
.bg-heading h1{font-size:clamp(30px,4vw,47px);line-height:1.1;margin:10px 0 0;font-weight:800;letter-spacing:-1.5px}
.bg-mode-tag{border-radius:20px;background:#b18aff12;color:#cbb5ed;font-size:10px;padding:8px 13px;white-space:nowrap}
.bg-player{display:flex;align-items:center;gap:11px;padding:16px 4px}
.bg-player-top{padding-top:0}
.bg-avatar{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#4f4368,#2b2543);color:var(--bg-purple);font-size:24px}
.bg-avatar[data-side=w]{background:linear-gradient(135deg,#244c4e,#163034);color:var(--bg-cyan)}
.bg-player>div{display:flex;flex-direction:column;gap:4px}
.bg-player strong{font-size:14px}
.bg-player small{color:var(--bg-muted);font-size:11px}
.bg-player>b{margin-inline-start:auto;font-size:25px;font-variant-numeric:tabular-nums}
.bg-turn-pill{margin-inline-start:auto;font-size:10px;letter-spacing:.7px;color:var(--bg-cyan);padding:6px 12px;background:#66dcd913;border-radius:16px}
.bg-board-frame{position:relative;padding:13px;border-radius:25px;background:linear-gradient(145deg,#47405c,#282237 65%,#4c415f);box-shadow:0 25px 60px #0006,0 2px 0 #685c7a66 inset;max-width:640px;margin:auto}
.bg-board{display:grid;grid-template-columns:repeat(var(--bg-cols),minmax(0,1fr));aspect-ratio:var(--bg-cols)/var(--bg-rows);overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px #0003,0 5px 14px #0006;background:#50435f;user-select:none;touch-action:manipulation}
.bg-cell{position:relative;min-width:0;min-height:0;aspect-ratio:1;display:grid;place-items:center;border:0;padding:4%;background:#eadfc9;color:#fff;isolation:isolate;-webkit-tap-highlight-color:transparent}
.bg-cell[data-shade=dark]{background:#796786}
.bg-cell:after{content:"";position:absolute;inset:3px;border-radius:5px;pointer-events:none;z-index:3}
.bg-cell.bg-last:after{background:#96dbb92c}
.bg-cell.bg-selected:after{box-shadow:0 0 0 3px #42d5c7 inset;background:#74e7d52e}
.bg-cell.bg-check:after{box-shadow:0 0 0 3px #ff7388 inset;background:#b5294740}
.bg-cell.bg-legal:before{content:"";position:absolute;width:19%;height:19%;border-radius:50%;background:#132d37a6;z-index:3;box-shadow:0 0 0 3px #fff3}
.bg-cell.bg-legal[data-side]:before{width:83%;height:83%;background:transparent;border:3px solid #42d5c7}
.bg-cell:focus-visible{outline:3px solid #37ddce;outline-offset:-4px;z-index:5}
.bg-coordinate{position:absolute;bottom:3px;left:4px;font-size:clamp(7px,.85vw,10px);font-weight:bold;color:#43395270;z-index:4;line-height:1}
.bg-cell[data-shade=dark] .bg-coordinate{color:#efe1d780}
.bg-chess-piece{width:90%;height:90%;z-index:2;overflow:visible;fill:#faf0d8;stroke:#806d60;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 4px 2px #25193355)}
.bg-cell[data-side=b] .bg-chess-piece{fill:#302943;stroke:#a99cb9}
.bg-piece-eye{fill:#f0dca3;stroke:none}
.bg-piece-cut{fill:none;stroke:#806d60;stroke-width:3;stroke-linecap:round}
.bg-disc{width:76%;height:76%;border-radius:50%;z-index:2;background:radial-gradient(circle at 32% 25%,#adefe0,#3eacb1 67%,#256670);box-shadow:0 5px 0 #1c626d,0 8px 8px #0005,inset 0 0 0 4px #a5fcda77,inset 0 0 0 7px #125d6733;display:grid;place-items:center;color:#efffd9;font-size:clamp(18px,3vw,32px);line-height:1}
.bg-cell[data-side=b] .bg-disc{background:radial-gradient(circle at 32% 25%,#d7bcff,#9163c8 65%,#583783);box-shadow:0 5px 0 #573879,0 8px 8px #0005,inset 0 0 0 4px #dab4fa88,inset 0 0 0 7px #40245133}
.bg-game[data-mode=connect4] .bg-board{gap:7px;padding:10px;background:linear-gradient(150deg,#5d488a,#302842);box-shadow:0 8px 0 #211a33}
.bg-game[data-mode=connect4] .bg-cell{border-radius:50%;background:#100e1a;box-shadow:0 3px 8px #000a inset,0 1px 0 #a492c755;padding:0}
.bg-game[data-mode=connect4] .bg-disc{width:96%;height:96%;box-shadow:inset 0 0 0 4px #ffffff33,0 -4px 0 #0003 inset}
.bg-game[data-mode=connect4] .bg-coordinate{display:none}
.bg-game[data-mode=connect4] .bg-cell.bg-legal:before{background:#76ecde35}
.bg-game[data-mode=tictactoe] .bg-board{gap:10px;background:transparent;box-shadow:none}
.bg-game[data-mode=tictactoe] .bg-cell{border-radius:15px;background:#292239;box-shadow:0 3px 0 #181323}
.bg-game[data-mode=tictactoe] .bg-board-frame{max-width:510px;background:transparent;box-shadow:none;padding:0}
.bg-mark{font-size:clamp(48px,8vw,91px);color:var(--bg-cyan);line-height:1;font-weight:300;text-shadow:0 0 28px #4adaad35}
.bg-cell[data-side=b] .bg-mark{color:#c3a0ff;text-shadow:0 0 28px #a259ff30}
.bg-game[data-mode=tictactoe] .bg-legal:before{background:#5b4c7133;width:10%;height:10%;box-shadow:none}
.bg-game[data-mode=reversi] .bg-cell{background:#316265;box-shadow:0 0 0 1px #182b3544 inset}
.bg-game[data-mode=reversi] .bg-disc{background:radial-gradient(circle at 30% 20%,#566473,#18202b 65%);box-shadow:0 4px 0 #10121b,0 6px 8px #0006,inset 0 0 0 2px #a7dbd64a}
.bg-game[data-mode=reversi] .bg-cell[data-side=b] .bg-disc{background:radial-gradient(circle at 30% 20%,#fff9e8,#d9d5c6);box-shadow:0 4px 0 #919388,0 6px 8px #0005,inset 0 0 0 2px #ffffffe0}
.bg-game[data-mode=reversi] .bg-coordinate{color:#d6eddb50}
.bg-game .bg-cell.bg-winner:after{border-radius:8px;background:#74f0bd44;box-shadow:0 0 0 3px #76ecde inset}
.bg-status{display:flex;align-items:center;gap:12px;padding:12px 4px;min-height:64px}
.bg-status-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-cyan);box-shadow:0 0 0 5px #7ce5d811;flex-shrink:0}
.bg-status>div{display:flex;flex-direction:column;gap:6px}
.bg-status strong{font-size:15px;color:#f3eedf}
.bg-status small{font-size:12px;line-height:1.55;color:var(--bg-muted)}
.bg-sidebar{padding-top:20px}
.bg-options{background:linear-gradient(140deg,#342a484d,#221f314d);border-radius:22px;padding:22px}
.bg-options>label{display:block;font-size:18px;font-weight:bold;margin:12px 0}
.bg-options select{width:100%;border:0;color:#eee6f6;background:#403451;padding:13px;border-radius:11px;cursor:pointer}
.bg-options>p{font-size:11px;line-height:1.8;color:var(--bg-muted);margin:12px 0 18px}
.bg-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bg-action-grid button,.bg-draw{border:0;border-radius:10px;background:#ffffff07;color:#ded8e8;padding:12px 5px;font-size:11px;white-space:nowrap}
.bg-action-grid button:hover{background:#aa87de22}
.bg-action-grid button[aria-pressed=true]{color:var(--bg-cyan);background:#74d3c619}
.bg-draw{width:100%;margin-top:12px;background:#b2e5b622;color:#d9f1bc}
.bg-rules{margin:27px 5px;color:var(--bg-muted);font-size:12px;line-height:1.95}
.bg-rules summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:16px;color:#efe8f5;padding-bottom:6px}
.bg-rules summary::-webkit-details-marker{display:none}
.bg-rules summary span{font-size:22px;font-weight:normal;color:var(--bg-purple)}
.bg-rules p:first-child{font-size:14px;color:#d6c7e4}
.bg-keyboard{background:#ffffff05;border-radius:10px;padding:12px}
.bg-history{margin:27px 5px 16px}
.bg-history>div{display:flex;justify-content:space-between;align-items:center}
.bg-history h2{font-size:14px;margin:0}
.bg-history>div>span{font-size:10px;color:var(--bg-cyan);padding:4px 9px;background:#76ecde12;border-radius:20px}
.bg-history ol{padding:0;list-style:none;margin-top:12px}
.bg-history li{padding:8px 0;color:var(--bg-muted);font-size:11px;border-bottom:1px solid #ffffff05;line-height:1.5}
.bg-history li:last-child{color:#d9cce7}
.bg-session-note{font-size:10px;line-height:1.8;color:#877f99;display:block;margin:18px 5px}
.bg-pause-cover{position:absolute;inset:0;z-index:10;border-radius:25px;background:#171423e8;backdrop-filter:blur(9px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}
.bg-pause-cover>span{font-size:44px;color:var(--bg-cyan)}
.bg-pause-cover h2{font-size:30px;margin:17px 0 3px}
.bg-pause-cover p{font-size:13px;color:var(--bg-muted);margin-bottom:24px}
.bg-primary{background:var(--bg-cyan);color:#152a30;border:0;padding:13px 23px;border-radius:12px;font-weight:bold;font-size:14px}
.bg-sheet{position:fixed;inset:0;z-index:30;background:#080813ba;backdrop-filter:blur(8px);display:grid;place-items:center;padding:22px}
.bg-sheet>section{background:linear-gradient(140deg,#332942,#211c30);box-shadow:0 25px 90px #0009;border-radius:27px;width:min(450px,100%);padding:35px}
.bg-sheet h2{font-size:27px;margin:14px 0}
.bg-sheet p{font-size:14px;line-height:1.8;color:#bcb2ce}
.bg-dialog-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.bg-dialog-buttons button{flex:1;min-width:110px}
.bg-dialog-buttons button:not(:first-child){background:#59456c;color:#f2e8ff}
@media(max-width:960px){.bg-layout{gap:26px;grid-template-columns:minmax(310px,1fr) 240px;padding:10px 22px 35px}
.bg-options{padding:16px}
.bg-header{padding:18px 22px}
.bg-coordinate{font-size:8px}
}
@media(max-width:760px){.bg-header{padding:16px}
.bg-wordmark{gap:12px}
.bg-wordmark small{font-size:10px}
.bg-exit{font-size:11px;padding:10px 12px}
.bg-layout{display:flex;flex-direction:column;padding:8px 14px 30px;gap:12px;max-width:580px}
.bg-play,.bg-sidebar{width:100%;padding:0}
.bg-heading{margin-bottom:18px}
.bg-heading h1{font-size:35px}
.bg-eyebrow{font-size:10px}
.bg-player{padding:13px 2px}
.bg-player-top{padding-top:0}
.bg-avatar{height:33px;width:33px;font-size:21px;border-radius:11px}
.bg-player strong{font-size:12px}
.bg-player small{font-size:10px}
.bg-board-frame{padding:8px;border-radius:17px}
.bg-board{border-radius:9px}
.bg-coordinate{font-size:7px;bottom:2px;left:2px}
.bg-cell:after{inset:2px}
.bg-cell.bg-selected:after{box-shadow:0 0 0 2px #42d5c7 inset}
.bg-chess-piece{filter:drop-shadow(0 2px 1px #25193355)}
.bg-disc{box-shadow:0 3px 0 #1c626d,0 5px 5px #0005,inset 0 0 0 3px #a5fcda77,inset 0 0 0 5px #125d6733}
.bg-cell[data-side=b] .bg-disc{box-shadow:0 3px 0 #573879,0 5px 5px #0005,inset 0 0 0 3px #dab4fa88,inset 0 0 0 5px #40245133}
.bg-game[data-mode=connect4] .bg-board{gap:5px;padding:7px}
.bg-game[data-mode=tictactoe] .bg-board{gap:8px}
.bg-game[data-mode=tictactoe] .bg-cell{border-radius:12px}
.bg-mark{font-size:72px}
.bg-options{padding:20px}
.bg-action-grid{grid-template-columns:repeat(4,1fr);gap:7px}
.bg-action-grid button{font-size:10px;padding:12px 3px}
.bg-options>p{margin-bottom:12px}
.bg-rules{margin:22px 6px}
.bg-history{margin:22px 6px}
.bg-history ol{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.bg-pause-cover h2{font-size:25px}
.bg-sheet>section{padding:26px}
.bg-mode-tag{font-size:9px}
.bg-status strong{font-size:14px}
.bg-status small{font-size:11px}
}
@media(max-width:390px){.bg-action-grid{grid-template-columns:repeat(2,1fr)}
.bg-wordmark small{max-width:75px;line-height:1.5}
}
@media(prefers-reduced-motion:no-preference){.bg-game button{transition:background .15s,box-shadow .15s}
.bg-disc,.bg-chess-piece,.bg-mark{animation:bg-place .18s ease-out}
@keyframes bg-place{from{opacity:.7;transform:translateY(-2px)}
to{opacity:1;transform:translateY(0)}
}
}