.quoridor-overlay{position:fixed;inset:0;z-index:80;background:rgba(4,7,16,.92);backdrop-filter:blur(14px);display:none;overflow:auto;padding:24px}.quoridor-overlay.open{display:block}.quoridor-room{max-width:1320px;margin:auto;min-height:calc(100vh - 48px);border:1px solid rgba(114,91,194,.44);border-radius:26px;background:linear-gradient(145deg,#111727,#080b14 72%);box-shadow:0 30px 100px #0008;overflow:hidden}.quoridor-score-strip{margin:22px 28px 0;border:1px solid #293249;border-radius:17px;padding:16px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;background:#0b1020}.quoridor-score-strip article{display:flex;gap:11px;align-items:center}.quoridor-score-strip article.opponent{justify-content:flex-end;text-align:right}.quoridor-score-strip b{display:block;font:800 16px Manrope;color:#f2f7ff}.quoridor-score-strip small,.quoridor-score-strip em{display:block;font:500 9px 'DM Mono';font-style:normal;color:#8f9aae}.quoridor-score-strip em{margin-top:3px;color:#aeb8ca}.quoridor-score-strip em strong{display:inline;font:800 11px 'DM Mono';color:#6ce5c1}.quoridor-clock{text-align:center;min-width:122px}.quoridor-clock small{display:block;font:500 9px 'DM Mono';color:#8390a8}.quoridor-clock>b{font:800 22px 'DM Mono';letter-spacing:-1px;color:#e8edff}.quoridor-clock span{display:flex;justify-content:center;align-items:center;gap:6px;color:#a7b2c7;font:700 10px 'DM Mono'}.quoridor-clock i{width:7px;height:7px;border-radius:50%;background:#45516b}.quoridor-clock i.active{background:#46ddb3;box-shadow:0 0 12px #46ddb3}.quoridor-clock .danger{color:#ff8497}.quoridor-room-body{padding:26px 28px 32px;display:grid;grid-template-columns:minmax(480px,1fr) 295px;justify-content:center;gap:28px}.quoridor-stage{min-width:0;text-align:center}.quoridor-turn-status{display:flex;justify-content:space-between;align-items:center;margin:0 auto 14px;max-width:680px;text-align:left}.quoridor-turn-status small{font:500 10px 'DM Mono';color:#8491aa}.quoridor-turn-status small b{color:#69dfbf}.quoridor-turn-status strong{font:800 13px Manrope;color:#e9effd}.quoridor-board-shell{max-width:min(680px,72vw);margin:auto;padding:18px;border-radius:23px;background:linear-gradient(145deg,#2c2b51,#191d35);box-shadow:inset 0 0 0 2px #6f6299,0 20px 60px #0008}.quoridor-board{width:min(100%,620px);aspect-ratio:1;margin:auto;position:relative;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:2px;padding:6px;border:3px solid #080b15;border-radius:12px;background:#0a0d19}.quoridor-cell{position:relative;border:0;border-radius:2px;background:#d3c7d9;cursor:pointer;min-width:0;min-height:0}.quoridor-cell:nth-child(odd){background:#70637e}.quoridor-cell:hover:not(:disabled){filter:brightness(1.15)}.quoridor-cell:disabled{cursor:default}.quoridor-cell.target{box-shadow:inset 0 0 0 3px #58e5bd;background:#6d9d98}.quoridor-cell.selected{box-shadow:inset 0 0 0 3px #fff5bd}.quoridor-pawn{position:absolute;inset:19%;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:clamp(10px,2.1vw,18px);box-shadow:0 5px 9px #0007}.quoridor-pawn.player{background:radial-gradient(circle at 34% 28%,#fff,#bcecd9 45%,#36a981);color:#0d3b37}.quoridor-pawn.opponent{background:radial-gradient(circle at 34% 28%,#f1eaff,#a888d3 48%,#49346f);color:#fff}.quoridor-target-dot{position:absolute;width:20%;aspect-ratio:1;border-radius:50%;background:#ddfff2;box-shadow:0 0 12px #55e1bb;left:40%;top:40%}.quoridor-wall-slot{position:absolute;z-index:3;border:0;padding:0;background:transparent;opacity:0;cursor:pointer}.quoridor-board.wall-mode .quoridor-wall-slot{opacity:.8}.quoridor-wall-slot.horizontal{left:calc((var(--col) + .5)*100%/9);top:calc((var(--row) + 1)*100%/9 - 1%);width:calc(2*100%/9);height:2%}.quoridor-wall-slot.vertical{left:calc((var(--col) + 1)*100%/9 - 1%);top:calc((var(--row) + .5)*100%/9);width:2%;height:calc(2*100%/9)}.quoridor-wall-slot:hover:not(:disabled),.quoridor-wall-slot.preview.valid{opacity:1!important;background:#54dfbd;box-shadow:0 0 13px #54dfbd;border-radius:4px}.quoridor-wall-slot.preview.invalid{opacity:1!important;background:#e45971;box-shadow:0 0 13px #e45971}.quoridor-wall-slot.placed{opacity:1!important;background:linear-gradient(90deg,#d6ae61,#76572a);box-shadow:0 1px 5px #000a;border-radius:3px;cursor:default}.quoridor-controls{max-width:680px;margin:18px auto 0;display:flex;justify-content:center;gap:8px}.quoridor-controls button{padding:11px 16px;font-size:12px}.quoridor-controls button.active{border-color:#5fe4bb;background:#18524b;color:#e5fff8}.quoridor-panel{height:max-content}.quoridor-rule{border:1px solid #5b4a2d;background:#271f12;color:#dcbd7a;border-radius:10px;padding:10px;font:600 10px Manrope}.quoridor-card-visual{background:radial-gradient(circle at 68% 25%,#5262a9,#171b34 54%,#0a1020);overflow:hidden}.mini-quoridor-board{position:absolute;width:145px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);background:repeating-linear-gradient(90deg,#d0c6db 0 14px,#766987 14px 28px),repeating-linear-gradient(#0000 0 14px,#0003 14px 28px);border:5px solid #292342;border-radius:8px;box-shadow:0 12px 22px #0007}.mini-quoridor-board i,.mini-quoridor-board b{position:absolute;display:block;background:#5be0bf;box-shadow:0 0 8px #5be0bf}.mini-quoridor-board i:nth-child(1){width:45px;height:5px;left:28px;top:43px}.mini-quoridor-board i:nth-child(2){width:5px;height:46px;right:36px;bottom:24px}.mini-quoridor-board i:nth-child(3){width:45px;height:5px;right:8px;top:85px}.mini-quoridor-board b{width:16px;height:16px;border-radius:50%;background:#f6f1ff;left:55px;bottom:8px}.mini-quoridor-board b:last-child{background:#bb8be8;right:56px;top:8px}.quoridor-live{background:#1b6962}.quoridor-overlay .result-panel{position:absolute;inset:0;z-index:10;display:grid;place-content:center;text-align:center;background:#080b14e8}.quoridor-overlay .result-panel.hidden{display:none}@media(max-width:900px){.quoridor-room-body{grid-template-columns:1fr}.quoridor-panel{max-width:680px;width:100%;margin:auto}.quoridor-board-shell{max-width:min(680px,90vw)}}@media(max-width:560px){.quoridor-overlay{padding:0}.quoridor-room{min-height:100vh;border-radius:0;border:0}.quoridor-score-strip{margin:12px;padding:11px;gap:8px}.quoridor-score-strip b{font-size:12px}.quoridor-score-strip .player-avatar,.quoridor-score-strip .opponent-avatar{width:34px;height:34px}.quoridor-room-body{padding:15px 12px 24px;gap:18px}.quoridor-board-shell{padding:10px;max-width:95vw}.quoridor-controls{gap:5px}.quoridor-controls button{padding:9px 8px;font-size:10px}.quoridor-turn-status{font-size:10px}.quoridor-clock>b{font-size:17px}}
/* Mathematical 9×9 wall grid: every visual and preview shares these slots. */
body .quoridor-board{display:block;box-sizing:border-box;padding:10px}
body .quoridor-grid-surface{--grid-gap:clamp(5px,1vw,9px);--cell-size:1px;--wall-thickness:4px;position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(9,var(--cell-size));grid-template-rows:repeat(9,var(--cell-size));gap:var(--grid-gap)}
body .quoridor-wall-slot{display:block;box-sizing:border-box;pointer-events:none;border:0;padding:0;background:transparent;opacity:0;border-radius:3px}
body .quoridor-wall-slot.horizontal{left:calc(var(--col) * (var(--cell-size) + var(--grid-gap)));top:calc((var(--row) + 1) * var(--cell-size) + var(--row) * var(--grid-gap) + (var(--grid-gap) - var(--wall-thickness)) / 2);width:calc(2 * var(--cell-size) + var(--grid-gap));height:var(--wall-thickness)}
body .quoridor-wall-slot.vertical{left:calc((var(--col) + 1) * var(--cell-size) + var(--col) * var(--grid-gap) + (var(--grid-gap) - var(--wall-thickness)) / 2);top:calc(var(--row) * (var(--cell-size) + var(--grid-gap)));width:var(--wall-thickness);height:calc(2 * var(--cell-size) + var(--grid-gap))}
body .quoridor-board.wall-mode .quoridor-wall-slot{opacity:0}body .quoridor-board.wall-mode .quoridor-wall-slot.current-mode{opacity:.16;background:#92a0bd}body .quoridor-wall-slot.preview.valid{opacity:1!important;background:#54dfbd;box-shadow:0 0 13px #54dfbd}body .quoridor-wall-slot.preview.invalid{opacity:1!important;background:#e45971;box-shadow:0 0 13px #e45971}body .quoridor-wall-slot.placed{opacity:1!important;background:linear-gradient(90deg,#d6ae61,#76572a);box-shadow:0 1px 5px #000a}

/* Katalog preview'ı, gerçek Quoridor board sınıflarından ayrıdır. */
.quoridor-card-visual .mini-quoridor-board{width:156px!important}.quoridor-card-visual .mini-quoridor-wall.horizontal{width:36px!important;height:5px!important}.quoridor-card-visual .mini-quoridor-wall.vertical{width:5px!important;height:36px!important}.quoridor-card-visual .mini-quoridor-wall.wall-one{left:27px!important;top:45px!important}.quoridor-card-visual .mini-quoridor-wall.wall-two{left:116px!important;top:63px!important}.quoridor-card-visual .mini-quoridor-wall.wall-three{left:81px!important;top:116px!important}.quoridor-card-visual .mini-quoridor-wall.wall-four{left:45px!important;top:81px!important}.quoridor-card-visual .mini-quoridor-pawn.teal{left:79px!important;bottom:8px!important}.quoridor-card-visual .mini-quoridor-pawn.purple{right:23px!important;top:9px!important}
.quoridor-card-visual{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 36%,rgba(87,110,177,.28),transparent 42%),#10192b;overflow:hidden}.mini-quoridor-board{position:relative;width:142px;aspect-ratio:1;left:auto;top:auto;transform:none;border:7px solid #24364b;border-radius:11px;background:#101b2a;box-shadow:0 15px 26px rgba(0,0,0,.42)}.mini-quoridor-grid{position:absolute;inset:9px;background-color:#d7dde1;background-image:linear-gradient(#516476 1px,transparent 1px),linear-gradient(90deg,#516476 1px,transparent 1px);background-size:17.7px 17.7px;border:1px solid #4c6170}.mini-quoridor-board .mini-quoridor-wall,.mini-quoridor-board .mini-quoridor-pawn{position:absolute;z-index:2;display:block}.mini-quoridor-board .mini-quoridor-wall{border-radius:3px;background:linear-gradient(90deg,#d7b66f,#815f30);box-shadow:0 2px 5px rgba(0,0,0,.55)}.mini-quoridor-board .mini-quoridor-wall.horizontal{width:51px;height:6px}.mini-quoridor-board .mini-quoridor-wall.vertical{width:6px;height:51px}.mini-quoridor-board .mini-quoridor-wall.wall-one{left:25px;top:52px}.mini-quoridor-board .mini-quoridor-wall.wall-two{left:101px;top:66px}.mini-quoridor-board .mini-quoridor-wall.wall-three{left:59px;top:101px}.mini-quoridor-board .mini-quoridor-wall.wall-four{left:49px;top:25px}.mini-quoridor-board .mini-quoridor-pawn{width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,.58);box-shadow:0 4px 8px rgba(0,0,0,.42)}.mini-quoridor-board .mini-quoridor-pawn.teal{left:63px;right:auto;top:auto;bottom:13px;background:radial-gradient(circle at 35% 28%,#e9fff9,#55c7ac 50%,#18705f)}.mini-quoridor-board .mini-quoridor-pawn.purple{left:auto;right:30px;top:13px;bottom:auto;background:radial-gradient(circle at 35% 28%,#f5efff,#af89dd 50%,#56377e)}
body .quoridor-pawn.player{background:radial-gradient(circle at 34% 28%,#fff,#ff6a72 38%,#e20f2f 72%);border:2px solid #ffb7bd;color:#fff;box-shadow:0 0 16px rgba(255,35,67,.8),0 5px 9px #0009}body .quoridor-pawn.opponent{background:radial-gradient(circle at 34% 28%,#fff,#4fa8ff 38%,#075ddb 72%);border:2px solid #a9d5ff;color:#fff;box-shadow:0 0 16px rgba(31,125,255,.82),0 5px 9px #0009}body .quoridor-wall-slot.placed.player-owned{background:linear-gradient(90deg,#ff6874,#e10c2d);box-shadow:0 0 12px rgba(255,38,65,.88)}body .quoridor-wall-slot.placed.opponent-owned{background:linear-gradient(90deg,#55aeff,#075ee0);box-shadow:0 0 12px rgba(31,127,255,.9)}