:root{--navy:#071a35;--deep:#020b16;--panel:#0b2345;--panel2:#102d57;--gold:#fbbf24;--ink:#f6f9ff;--muted:#91a8c5;--line:rgba(255,255,255,.13);--green:#43d58a;--red:#ff5967}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 50% -15%,#173e6c 0,var(--navy) 36%,var(--deep) 100%);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}
.topbar{height:68px;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100% - 1500px)/2));border-bottom:1px solid var(--line);background:rgba(3,15,31,.95)}.brand{color:var(--gold);font-size:23px;font-weight:950;line-height:.86;text-decoration:none}.brand small{display:block;margin-top:7px;color:#b7c9df;font-size:7px;letter-spacing:1.6px}.topbar nav{display:flex;gap:22px}.topbar nav a,.home{color:#edf5ff;font-size:12px;font-weight:800;text-decoration:none}.topbar nav a:hover{color:var(--gold)}.home{margin-left:auto;padding:10px 14px;border:1px solid var(--line);border-radius:9px}.home:hover{border-color:var(--gold);color:var(--gold)}
.shell{width:min(1500px,calc(100% - 22px));margin:auto;padding:16px 0 28px}.game{overflow:hidden;border:1px solid rgba(251,191,36,.34);border-radius:20px;background:rgba(5,21,44,.97);box-shadow:0 35px 100px rgba(0,0,0,.44)}.game-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 11px;background:linear-gradient(180deg,rgba(18,51,91,.75),rgba(7,26,53,.84))}.eyebrow{color:var(--gold);font-size:8px;font-weight:950;letter-spacing:1.6px}.game-head h1{margin:2px 0;font-size:25px}.game-head h1 b{color:var(--gold)}.game-head p{margin:0;color:var(--muted);font-size:11px}.status{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#c4d4e7;font-size:10px;font-weight:850}.status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(67,213,138,.1),0 0 12px var(--green)}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics div{padding:8px 16px}.metrics div+div{border-left:1px solid var(--line)}.metrics span{display:block;color:#7892b2;font-size:7px;font-weight:900;letter-spacing:1px}.metrics strong{display:block;margin-top:2px;color:var(--gold);font-size:18px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;padding:15px;background:#041326}.board-frame{min-width:0;display:grid;place-items:center;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(circle,#102d57,#030e1e 78%);scrollbar-color:var(--gold) #071a35}.board{--cell:min(3.18vw,41px);display:grid;grid-template-columns:repeat(20,var(--cell));grid-template-rows:repeat(20,var(--cell));border:3px solid var(--gold);background:#274365;box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(251,191,36,.08)}
.cell{position:relative;display:grid;place-items:center;padding:0;border:0;border-right:1px solid rgba(168,190,218,.28);border-bottom:1px solid rgba(168,190,218,.28);background:#0a203e;color:#edf5ff;font-size:clamp(8px,1vw,13px);font-weight:800;cursor:pointer;outline:0}.cell[data-col="4"],.cell[data-col="9"],.cell[data-col="14"]{border-right:3px solid var(--gold)}.cell[data-row="3"],.cell[data-row="7"],.cell[data-row="11"],.cell[data-row="15"]{border-bottom:3px solid var(--gold)}.cell.given{background:#102d57;color:#b8cae0}.cell.peer{background:#12345f}.cell.same{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(251,191,36,.4)}.cell.selected{z-index:2;background:var(--gold);color:var(--navy);box-shadow:0 0 16px rgba(251,191,36,.55)}.cell.wrong{color:#fff;background:var(--red);animation:shake .22s linear}.cell.correct-pop{animation:pop .2s ease}.cell .notes{padding:2px;color:#7fc6ff;font-size:6px;line-height:1.05;letter-spacing:.2px;text-align:center}
.tools{display:flex;flex-direction:column;padding:16px;border:1px solid rgba(251,191,36,.24);border-radius:14px;background:linear-gradient(180deg,#0c274d,#071a35)}.tools-head h2{margin:3px 0;font-size:20px}.tools-head p{margin:0 0 13px;color:var(--muted);font-size:10px;line-height:1.45}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.number-pad button{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:#102d57;color:#fff;font-weight:900;cursor:pointer}.number-pad button:hover,.number-pad button.active{border-color:var(--gold);background:var(--gold);color:var(--navy);transform:translateY(-1px)}.number-pad button.complete{opacity:.25;pointer-events:none}.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.tool{display:grid;justify-items:center;padding:9px 5px;border:1px solid var(--line);border-radius:9px;background:transparent;color:#fff;cursor:pointer}.tool span{color:var(--gold);font-size:18px}.tool b{font-size:10px}.tool small{color:var(--muted);font-size:8px}.tool.active{border-color:var(--gold);background:rgba(251,191,36,.1)}.wide{display:grid;justify-items:start;margin-top:8px;padding:11px 13px;border-radius:9px;cursor:pointer}.wide b{font-size:11px}.wide small{font-size:8px}.secondary{border:1px solid rgba(251,191,36,.48);background:transparent;color:var(--gold)}.primary{border:1px solid var(--gold);background:var(--gold);color:var(--navy)}.difficulty{margin-top:13px}.difficulty label{display:block;margin-bottom:5px;color:var(--muted);font-size:9px}.difficulty select{appearance:none;width:100%;padding:10px 30px 10px 11px;border:1px solid var(--line);border-radius:8px;background:#071a35;color:#fff;font-weight:800;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}.rule-card{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035)}.rule-card b{color:var(--gold);font-size:10px}.rule-card p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
dialog{width:min(600px,calc(100% - 26px));padding:0;border:1px solid rgba(251,191,36,.55);border-radius:18px;background:#071a35;color:#fff;box-shadow:0 30px 100px #000}dialog::backdrop{background:rgba(1,7,15,.82);backdrop-filter:blur(8px)}.result{padding:30px}.result h2{margin:5px 0;font-size:30px}.result>p{color:var(--muted)}.final-score{display:flex;align-items:end;justify-content:space-between;margin:22px 0;padding:15px;border:1px solid rgba(251,191,36,.35);border-radius:11px;background:rgba(251,191,36,.07)}.final-score span{font-size:9px;font-weight:900}.final-score strong{color:var(--gold);font-size:42px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px}.result-grid div{padding:13px}.result-grid div+div{border-left:1px solid var(--line)}.result-grid span{display:block;color:var(--muted);font-size:9px}.result-grid b{display:block;margin-top:3px;color:var(--gold)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.result-actions button{padding:12px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:var(--navy);font-weight:900;cursor:pointer}.result-actions .ghost{border-color:var(--line);background:transparent;color:#fff}.result>small{display:block;margin-top:12px;color:var(--muted);text-align:center}
.footer{min-height:90px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:0 max(24px,calc((100% - 1500px)/2));border-top:1px solid var(--line);background:#03101f}.footer strong,.footer a{color:var(--gold)}.footer span{color:var(--muted);font-size:10px}.footer nav{justify-self:end}.footer a{font-size:10px;text-decoration:none}.footer a+a::before{content:"—";margin:0 8px}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes pop{50%{transform:scale(1.16)}}
@media(max-width:1000px){.play-layout{grid-template-columns:1fr}.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}.number-pad{grid-column:1}.tools-head{grid-column:1/-1}.tool-row{margin:0}.rule-card{display:none}.wide,.difficulty{margin:0}.board{--cell:min(4.5vw,38px)}}
@media(max-width:620px){.topbar{height:60px;padding:0 9px}.topbar nav{display:none}.brand{font-size:18px}.home{padding:8px;font-size:9px}.shell{width:calc(100% - 8px);padding-top:4px}.game-head{padding:12px}.game-head h1{font-size:20px}.game-head p{font-size:8px;max-width:260px}.metrics{grid-template-columns:repeat(3,1fr)}.metrics div:nth-child(4){border-left:0}.play-layout{padding:6px}.board-frame{justify-content:start;padding:5px}.board{--cell:25px}.tools{grid-template-columns:1fr;padding:11px}.number-pad,.tools-head{grid-column:auto}.footer{grid-template-columns:1fr;text-align:center;padding:24px}.footer nav{justify-self:center}}

/* Klasik 9x9 / 3x3 tahta */
.board-frame{padding:18px}
.board{--cell:min(6.1vw,72px);grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell))}
.cell{border-right:1px solid rgba(168,190,218,.28);border-bottom:1px solid rgba(168,190,218,.28);font-size:clamp(16px,2vw,25px);font-weight:850}
.cell[data-col="4"],.cell[data-row="3"],.cell[data-row="7"]{border-right-color:rgba(168,190,218,.28);border-bottom-color:rgba(168,190,218,.28)}
.cell[data-col="2"],.cell[data-col="5"]{border-right:3px solid var(--gold)}
.cell[data-row="2"],.cell[data-row="5"]{border-bottom:3px solid var(--gold)}
.cell .notes{padding:3px;font-size:9px;line-height:1.15;letter-spacing:.5px}
.number-pad{grid-template-columns:repeat(3,1fr);gap:7px}
.number-pad button{font-size:17px}
@media(max-width:1000px){.board{--cell:min(9vw,68px)}}
@media(max-width:620px){.board-frame{justify-content:center;padding:5px}.board{--cell:min(10.25vw,48px)}.cell{font-size:16px}}

/* Üç sütunlu kompakt oyun düzeni */
.game-head{padding:11px 18px 8px}.game-head h1{font-size:22px}.metrics div{padding:6px 14px}.metrics strong{font-size:16px}
.play-layout{grid-template-columns:250px minmax(430px,1fr) 250px;gap:12px;padding:12px;align-items:stretch}
.board-frame{padding:10px;overflow:hidden}.board{--cell:min(3.5vw,52px)}
.tools{padding:13px}.tools-head h2{font-size:18px}.tools-head p{margin-bottom:9px}.number-pad{gap:5px}.number-pad button{max-height:42px}.tool-row{margin-top:8px}.tool{padding:6px 4px}.wide{margin-top:6px;padding:9px 11px}.difficulty{margin-top:8px}.difficulty select{padding-block:8px}.rule-card{padding:9px}.rule-card p{font-size:8px}
.leaderboard{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(251,191,36,.25);border-radius:14px;background:linear-gradient(180deg,#0c274d,#071a35)}
.leaderboard header{padding:13px 13px 9px;border-bottom:1px solid var(--line)}.leaderboard h2{margin:3px 0;font-size:17px}.leaderboard header p{margin:0;color:var(--muted);font-size:8px}.leader-label{display:flex;justify-content:space-between;padding:7px 11px;color:#7892b2;font-size:7px;font-weight:900;letter-spacing:.8px}
.leaderboard ol{list-style:none;margin:0;padding:0 9px}.leaderboard li{display:grid;grid-template-columns:15px 28px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:36px;border-bottom:1px solid rgba(255,255,255,.075)}.leaderboard li>b{color:#7892b2;font-size:8px;text-align:center}.leaderboard li:nth-child(-n+3)>b,.leaderboard li:nth-child(-n+3)>em{color:var(--gold)}.leaderboard li>i{width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(251,191,36,.55);border-radius:50%;color:var(--gold);font-size:8px;font-style:normal;font-weight:900}.leaderboard li>span{min-width:0}.leaderboard li strong,.leaderboard li small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard li strong{font-size:8px}.leaderboard li small{color:var(--muted);font-size:6px}.leaderboard li em{color:#fff;font-size:9px;font-style:normal;font-weight:900}
.leaderboard>.all-players-link{display:flex;justify-content:space-between;margin-top:auto;padding:13px 15px;border-top:1px solid var(--line);background:rgba(251,191,36,.08);color:var(--gold);font-size:10px;font-weight:900;text-decoration:none}.leaderboard>.all-players-link:hover{background:var(--gold);color:var(--navy)}
.leader-dialog{width:min(620px,calc(100% - 24px))}.full-leaders{position:relative;padding:26px}.full-leaders h2{margin:4px 0}.full-leaders>p{color:var(--muted);font-size:11px}.dialog-close{position:absolute;right:15px;top:14px;width:33px;height:33px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;font-size:20px;cursor:pointer}.full-leader-list{max-height:480px;overflow:auto;margin-top:17px;border:1px solid var(--line);border-radius:10px}.full-leader-row{display:grid;grid-template-columns:35px 1fr auto;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:11px}.full-leader-row b,.full-leader-row em{color:var(--gold)}.full-leader-row em{font-style:normal;font-weight:900}
@media(max-width:1100px){.play-layout{grid-template-columns:220px minmax(400px,1fr)}.tools{display:flex}.leaderboard{grid-column:1/-1}.leaderboard ol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.board{--cell:min(5vw,50px)}}
@media(max-width:760px){.play-layout{grid-template-columns:1fr}.board-frame{order:1}.tools{order:2;display:flex}.leaderboard{order:3;grid-column:auto}.leaderboard ol{grid-template-columns:1fr 1fr}.board{--cell:min(10vw,50px)}}
@media(max-width:520px){.leaderboard ol{grid-template-columns:1fr}.game-head p{display:none}.board{--cell:min(10.1vw,44px)}}

/* Ayrı ve ölçeklenebilir genel sıralama sayfası */
.ranking-shell{width:min(1220px,calc(100% - 24px));min-height:calc(100vh - 158px);margin:0 auto;padding:28px 0}.ranking-page{overflow:hidden;border:1px solid rgba(251,191,36,.34);border-radius:20px;background:rgba(5,21,44,.97);box-shadow:0 30px 90px rgba(0,0,0,.38)}.ranking-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(18,51,91,.78),rgba(7,26,53,.82))}.ranking-head h1{margin:4px 0;font-size:32px}.ranking-head p{margin:0;color:var(--muted);font-size:12px}.ranking-head>strong{padding:9px 14px;border:1px solid rgba(251,191,36,.4);border-radius:999px;color:var(--gold);white-space:nowrap}.ranking-filters{display:grid;grid-template-columns:1fr 220px;gap:14px;padding:18px 28px;border-bottom:1px solid var(--line)}.ranking-filters label span{display:block;margin-bottom:6px;color:#9eb2ca;font-size:10px;font-weight:850}.ranking-filters input,.ranking-filters select{width:100%;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#071a35;color:#fff;font:inherit;outline:none}.ranking-filters input:focus,.ranking-filters select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(251,191,36,.1)}.ranking-table-wrap{overflow-x:auto}.ranking-table{width:100%;border-collapse:collapse}.ranking-table th{padding:12px 16px;color:#7892b2;font-size:9px;letter-spacing:1px;text-align:left}.ranking-table td{padding:11px 16px;border-top:1px solid rgba(255,255,255,.075);font-size:12px}.ranking-table tbody tr{transition:background .18s}.ranking-table tbody tr:hover{background:rgba(251,191,36,.065)}.ranking-table td:first-child b,.ranking-table td:last-child em{color:var(--gold)}.ranking-table td:last-child em{font-style:normal;font-weight:950}.ranking-player{display:flex;align-items:center;gap:10px}.ranking-player>i{width:34px;height:34px;display:grid;place-items:center;flex:none;border:1px solid rgba(251,191,36,.55);border-radius:50%;color:var(--gold);font-size:9px;font-style:normal;font-weight:900}.ranking-player strong,.ranking-player small{display:block}.ranking-player small{color:var(--muted);font-size:9px}.ranking-empty{padding:50px;text-align:center;color:var(--muted)}.ranking-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:18px;border-top:1px solid var(--line)}.ranking-pagination button{min-width:120px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#0c274d;color:#fff;font-weight:850;cursor:pointer}.ranking-pagination button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.ranking-pagination button:disabled{opacity:.35;cursor:not-allowed}.ranking-pagination span{color:var(--muted);font-size:11px}
@media(max-width:680px){.ranking-head{align-items:flex-start;padding:18px}.ranking-head h1{font-size:24px}.ranking-head>strong{font-size:10px}.ranking-filters{grid-template-columns:1fr;padding:14px 18px}.ranking-table th,.ranking-table td{padding:9px 10px}.ranking-table th:nth-child(3),.ranking-table td:nth-child(3),.ranking-table th:nth-child(5),.ranking-table td:nth-child(5){display:none}.ranking-pagination{gap:8px}.ranking-pagination button{min-width:90px;font-size:10px}}

/* Drawpunkt ortak üst menü ve footer */
body{font:15px/1.55 "Segoe UI",Arial,sans-serif}.container{width:min(1400px,calc(100% - 40px));margin:auto}.topbar{position:sticky;top:0;z-index:90;height:auto;padding:0;border-bottom:1px solid var(--line);background:rgba(4,18,37,.92);backdrop-filter:blur(16px)}.topbar-inner{height:72px;display:flex;align-items:center;gap:28px}.brand{font-size:25px;letter-spacing:-1px}.brand small{margin-top:5px;font-size:9px;letter-spacing:1.7px}.topbar .nav{display:flex;align-items:center;gap:24px;margin-left:28px}.topbar .nav>a{position:relative;padding:7px 0;color:#d8e5f5;font-size:15px;font-weight:700}.topbar .nav>a::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;background:var(--gold);transition:right .18s}.topbar .nav>a:hover::after{right:0}.games-menu{position:relative}.games-menu summary{display:flex;align-items:center;gap:5px;list-style:none;color:#d8e5f5;font-size:15px;font-weight:700;cursor:pointer}.games-menu summary::-webkit-details-marker{display:none}.games-menu summary i{color:var(--gold);font-size:10px;font-style:normal}.games-menu>div{position:absolute;left:0;top:calc(100% + 13px);z-index:100;width:190px;padding:7px;border:1px solid var(--line);border-radius:10px;background:#0b2345;box-shadow:0 18px 50px rgba(0,0,0,.4)}.games-menu>div a{display:block;padding:10px;border-radius:7px;color:#fff;font-size:15px;white-space:nowrap}.games-menu>div a:hover{background:rgba(251,191,36,.1);color:var(--gold)}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:9px;color:#fff;font-weight:850;text-decoration:none}.button.gold{border-color:var(--gold);background:var(--gold);color:var(--navy)}.profile-direct{gap:7px}.profile-avatar{width:28px;height:28px;object-fit:cover;border-radius:50%}.pending-badge{display:inline-grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:999px;background:#d74452;color:#fff;font-size:10px;font-weight:950}.language-flags{display:flex!important;gap:0!important;padding:3px;border:1px solid var(--line);border-radius:8px}.language-flags a{padding:5px 7px;border-radius:5px;color:var(--muted);font-size:11px;font-weight:850}.language-flags a.active{background:var(--gold);color:var(--navy)}.leaderboard li>i{overflow:hidden}.leaderboard li>i img,.ranking-player>i img{width:100%;height:100%;object-fit:cover}.main-footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0;background:#041225;color:var(--muted)}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.home-legal{display:flex;flex-wrap:wrap;justify-content:center}.home-legal a{color:var(--gold);font-size:13px;font-weight:750}.home-legal a+a::before{content:"—";display:inline-block;margin:0 10px;color:var(--gold)}.social-links{display:flex;gap:8px}.social-link{position:relative;width:38px;height:38px;overflow:hidden;border:1px solid var(--line);border-radius:50%;color:#dce7f5}.social-link span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .25s,color .25s}.social-link span:nth-child(2){transform:translateY(100%);color:var(--gold)}.social-link:hover span:first-child{transform:translateY(-100%)}.social-link:hover span:nth-child(2){transform:translateY(0)}.social-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.ranking-body{min-height:100vh;display:flex;flex-direction:column}.ranking-filters{grid-template-columns:1fr 220px 150px;align-items:end}.ranking-filters button{min-height:44px;border:1px solid var(--gold);border-radius:9px;background:var(--gold);color:var(--navy);font-weight:950;cursor:pointer}.ranking-pagination a{min-width:110px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:#fff;text-align:center}.ranking-pagination a:last-child{justify-self:end}.ranking-pagination b{color:var(--muted)}
@media(max-width:1050px){.topbar .nav{display:none}}@media(max-width:680px){.container{width:min(100% - 16px,1400px)}.topbar-inner{height:64px;gap:7px}.brand{font-size:18px}.brand small{font-size:7px;letter-spacing:.8px}.header-actions{gap:4px}.button{min-height:34px;padding:6px 8px;font-size:11px}.profile-avatar{width:23px;height:23px}.language-flags a{padding:4px 5px;font-size:9px}.footer-inner{flex-direction:column;text-align:center}.ranking-filters{grid-template-columns:1fr}.home-legal a+a::before{margin:0 6px}}