/* Zekâ Oyunları Atölyesi 0.1.5 — game-first stage skin. Offline, no external assets. */
:root{
 --deep:#111d2d;--deep2:#19283b;--ink:#24354b;--sub:#6f8196;
 --cyan:#46c6bf;--cyan-dark:#117971;--sun:#f7b454;--orange:#e48156;
 --line:#d6e0e8;--surface:#fffdf9;--pale:#f4f7fb;
 --bg:#101b2a;--text:#26384c;--navy:#203852;--blue:#256d86;
 --radius:15px;--btn-height:42px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
html{font-family:Nunito,"Trebuchet MS","Segoe UI",Arial,sans-serif;color:var(--text);background:var(--deep);-webkit-text-size-adjust:100%}
body{background:radial-gradient(ellipse at 11% 4%,#23465b 0,transparent 45%),radial-gradient(ellipse at 100% 100%,#29354d 0,transparent 47%),#101b2a}
button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
h1,h2,h3,p{margin:0} [hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.app{height:100vh;height:100dvh;width:100%;min-height:0;display:grid;grid-template-rows:68px minmax(0,1fr);gap:10px;padding:10px clamp(10px,1.2vw,24px) 12px;overflow:hidden}
.topbar{height:68px;min-width:0;display:flex;align-items:center;gap:18px;padding:0 clamp(3px,.6vw,12px);color:#fff}
.identity{display:flex;align-items:center;gap:12px;min-width:0;flex-shrink:0}
.identity-mark{width:42px;height:42px;border-radius:12px;background:#163446;border:1px solid #367287;display:grid;place-items:center;color:#69d7d0;box-shadow:0 0 0 4px #ffffff08;flex:none}
.identity-mark svg{width:30px;height:30px}
.eyebrow{font-size:.56rem;letter-spacing:1.7px;font-weight:850;color:#94b5c3;margin-bottom:4px;white-space:nowrap}
.brand-dot{color:#edae66;margin:0 1px}
h1{font-size:clamp(1.05rem,1.55vw,1.43rem);letter-spacing:-.04em;font-weight:850;line-height:1.05;white-space:nowrap}
h1 span{color:#a8d5d6}
.mode-nav{display:flex;gap:5px;align-items:center;justify-content:center;margin-left:auto;background:#ffffff0e;padding:5px;border:1px solid #ffffff1a;border-radius:13px;min-width:0}
.mode-button{border:0;border-radius:9px;background:transparent;min-height:39px;padding:6px clamp(10px,1.2vw,20px);color:#cad6e2;font-weight:800;font-size:.81rem;white-space:nowrap;transition:background-color .15s,color .15s}
.mode-button.active{background:#eef9f5;color:#183c40;box-shadow:0 3px 10px #00000024}
.mode-button:not(.active):hover{background:#ffffff16;color:#fff}
.nav-icon{font-size:1.02rem;margin-right:5px;vertical-align:middle}
.top-actions{display:flex;gap:8px;align-items:center;flex:none}
.top-tool{border:1px solid #ffffff24;background:#ffffff0b;color:#e4edf7;border-radius:10px;min-width:41px;height:40px;padding:0 12px;font-weight:850;font-size:.92rem}
.top-tool:hover{background:#ffffff1e}.tool-label{font-size:.78rem;font-weight:750}
.fullscreen-symbol{font-size:1.25rem;line-height:1}
.layout{min-height:0;min-width:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.game{min-height:0;min-width:0;width:100%;max-width:1820px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid #d3dfe4;background:linear-gradient(105deg,#eff5f7 0%,#f9fbfa 47%,#edf4f5 100%);border-radius:20px;box-shadow:0 16px 48px #01091148}
.arena-head{height:78px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #dbe6e8;padding:10px clamp(14px,2.5vw,38px);background:#ffffffa0}
.arena-game-brand{display:flex;align-items:center;gap:12px;min-width:0}
.arena-game-icon{width:47px;height:47px;padding:9px;flex:none;background:#183950;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;box-shadow:0 3px 0 #0d2736}
.arena-game-icon span{background:#67d5c7;border-radius:2px}.arena-game-icon span:nth-child(2),.arena-game-icon span:nth-child(3){background:#ffffffa1}
.arena-kicker{display:block;font-weight:900;letter-spacing:1.4px;font-size:.6rem;color:#238682;margin-bottom:4px}
.arena-game-brand h2{font-size:clamp(1.15rem,1.75vw,1.48rem);letter-spacing:-.04em;line-height:1.1;color:#24354a}
.stage-meta{font-size:.7rem;color:#728396;background:#e1ebee;padding:5px 9px;border-radius:7px;vertical-align:middle;display:inline-block;margin-left:7px;letter-spacing:0;font-weight:850}
.arena-head-actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:var(--btn-height);padding:7px 15px;border:1px solid transparent;border-radius:11px;font-size:.87rem;font-weight:850;line-height:1.1;transition:background-color .13s,transform .13s,border-color .13s,box-shadow .13s}
.btn:not(:disabled):active,.pad-number:not(:disabled):active{transform:translateY(1px)}
.btn.primary{background:#167e7b;color:white;box-shadow:0 3px 0 #0e5457}
.btn.primary:hover:not(:disabled){background:#096c70}
.btn.glass,.btn.tertiary{background:#fff;color:#30475d;border-color:#cbd7df;box-shadow:0 2px 0 #bdcbd4}
.btn.glass:hover:not(:disabled),.btn.tertiary:hover:not(:disabled){background:#eef8f9}
.btn.secondary{background:#eaf1f5;color:#254253;border-color:#beced7}
.btn.small{min-height:35px;padding:5px 11px;font-size:.78rem}.btn.wide{width:100%;margin-bottom:10px}
.playground{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px 14px}
.playground::before,.playground::after{content:"";position:absolute;width:190px;height:190px;border:1px solid #3d879316;border-radius:28px;transform:rotate(25deg);pointer-events:none}
.playground::before{left:-130px;bottom:-95px}.playground::after{right:-130px;top:-100px}
.arena-ornament{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;flex-direction:column;gap:12px;color:#829ba6;pointer-events:none}
.arena-ornament span:not(.ornament-rule){writing-mode:vertical-rl;letter-spacing:4px;font-size:.62rem;font-weight:900}
.arena-ornament i{font-size:.92rem;font-style:normal;font-weight:900;opacity:.37}
.ornament-rule{height:35px;width:2px;background:#9ac6c9}.left-ornament{left:clamp(25px,6vw,130px)}.right-ornament{right:clamp(25px,6vw,130px)}
.board-area{position:relative;z-index:1;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.board-bezel{display:contents}
.sudoku-board{--n:4;flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,var(--board-size,450px));aspect-ratio:1;border:4px solid #213d53;border-radius:9px;background:#fff;overflow:hidden;min-height:0;box-shadow:0 5px 0 #a2b6c2,0 15px 25px #122d3e22,0 0 0 9px #ffffffa8}
.tile{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;background:#fffdf9;border:0;border-right:1px solid #c8d4dd;border-bottom:1px solid #c8d4dd;font-size:clamp(1rem,2.2vmin,1.65rem);font-weight:950;color:#167d87;font-variant-numeric:tabular-nums;transition:background-color .12s}
.tile.box-soft{background:#f0f8f7}
.tile.given{background:#e9eef1;color:#263a50;font-weight:950}.tile.given.box-soft{background:#e1edeb}
.tile:not(.given):not(.selected):not(:disabled):hover{background:#dcf2ec}
.tile.selected{z-index:1;background:#ffecd0!important;box-shadow:inset 0 0 0 3px #d78342;color:#163e4b}
.tile.box-right{border-right:4px solid #213d53}.tile.box-bottom{border-bottom:4px solid #213d53}
.sudoku-board:not(.board6) .tile:nth-child(4n),.sudoku-board.board6 .tile:nth-child(6n){border-right:0}
.sudoku-board:not(.board6) .tile:nth-last-child(-n+4),.sudoku-board.board6 .tile:nth-last-child(-n+6){border-bottom:0}
.sudoku-board .tile:disabled{opacity:1;cursor:default}
.number-pad{display:flex;justify-content:center;align-items:center;gap:8px;min-height:46px;max-width:100%;flex:none}
.pad-number{height:44px;width:50px;padding:0;border:1px solid #adc7c8;border-radius:11px;background:#fff;box-shadow:0 3px 0 #c0d0d7;color:#254151;font-weight:900;font-size:1.23rem;transition:background-color .13s,transform .13s}
.pad-number:hover:not(:disabled){background:#def5ef;border-color:#42b7a9}
.game-actions{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;flex-wrap:nowrap}
.game-actions .btn{min-height:39px;min-width:78px}
.feedback{width:min(100%,680px);min-height:29px;max-height:38px;display:grid;place-items:center;text-align:center;font-size:.77rem;color:#59778a;line-height:1.25;overflow:hidden;background:#ffffffaa;border:1px solid #dfebed;border-radius:12px;padding:5px 14px}
.feedback[data-status="success"]{color:#177c58;background:#e3faf0;border-color:#b6e9d4}
.feedback[data-status="warn"]{color:#a35736;background:#fff0e5;border-color:#f1cfb5}
/* Settings are an intentional drawer rather than a persistent form. */
.controls{position:fixed;top:0;right:0;bottom:0;z-index:31;width:min(356px,94vw);display:flex;flex-direction:column;gap:0;min-height:0;padding:30px 23px;background:#f9fbfa;border-left:1px solid #d7e1e7;box-shadow:-20px 0 65px #050e1a70;transform:translateX(110%);visibility:hidden;pointer-events:none;transition:transform .2s,visibility .2s;overflow:auto;overscroll-behavior:contain}
body.settings-open .controls{transform:translateX(0);visibility:visible;pointer-events:auto}
.settings-backdrop{position:fixed;inset:0;z-index:30;background:#071422a8;border:0;width:100%;height:100%;padding:0}
.settings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.settings-head h2{font-size:1.45rem;letter-spacing:-.04em;color:#1d3445;margin-top:6px}
.drawer-kicker{display:block;color:#19877e;letter-spacing:1.6px;font-size:.64rem;font-weight:900}
.drawer-lead{font-size:.86rem;color:#697d8d;line-height:1.5;margin-bottom:30px}
.field{margin-bottom:18px}.field label{display:block;font-weight:800;font-size:.81rem;margin-bottom:8px;color:#293f53}
.field select,.race-setup-fields select{display:block;appearance:auto;background:#fff;width:100%;height:48px;padding:0 12px;border:1px solid #c5d5dd;border-radius:10px;color:#263d51;font-size:.88rem;outline-offset:1px}
.settings-preview{display:flex;gap:15px;align-items:center;background:#eaf4f2;padding:14px;border:1px solid #c9e4df;border-radius:12px;margin-top:7px}
.preview-symbol{height:43px;width:43px;display:grid;place-items:center;background:#1a776f;color:white;border-radius:11px;font-size:1.5rem}
.settings-preview b{font-size:.91rem;color:#1b4845}.settings-preview small{display:block;font-size:.7rem;line-height:1.4;color:#61847d;margin-top:3px}
.drawer-footnote{font-size:.73rem;line-height:1.55;color:#698093;margin:22px 1px 18px}
.drawer-footer{margin-top:auto;padding-top:30px;text-align:center;font-size:.73rem;color:#8c9ba6}
.icon-close{width:35px;height:35px;display:grid;place-items:center;cursor:pointer;background:#e9eff3;border:1px solid #d4dee6;border-radius:9px;color:#375065;font-size:1.35rem;flex:none}
.help-dialog{width:min(460px,calc(100vw - 28px));max-height:min(85dvh,620px);overflow:auto;padding:24px;color:#263e52;background:#fcfdfb;border:1px solid #cee0e2;border-radius:18px;box-shadow:0 22px 80px #00132270;line-height:1.55;font-size:.9rem}
.help-dialog::backdrop{background:#0b1e30bd}.help-head{display:flex;align-items:center;justify-content:space-between}.help-head h2{font-size:1.15rem}
.help-dialog ol{margin:18px 0;padding-left:23px}.help-dialog li{margin:0 0 8px}.help-dialog p{margin-top:12px;color:#5c7484}.help-privacy{font-size:.77rem}
/* Print mode has its own workspace; it never becomes a sidebar form. */
.print-studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:clamp(22px,5vw,85px);align-items:center;justify-content:center;width:100%;max-width:1250px;margin:auto;min-height:0;height:100%;padding:clamp(20px,3vw,70px);border-radius:20px;background:#f5f9f7;border:1px solid #cfe1e3;overflow:hidden;box-shadow:0 17px 55px #050d2044}
.print-studio-intro{position:relative;max-width:535px;align-self:center}.print-studio-intro .arena-kicker{font-size:.7rem;margin-bottom:22px}
.print-studio-intro h2{font-size:clamp(2rem,3.7vw,4.1rem);line-height:1.06;letter-spacing:-.06em;color:#193949;margin:20px 0}
.print-studio-intro p{font-size:clamp(.91rem,1.1vw,1.1rem);line-height:1.6;color:#6c8290;max-width:380px}
.print-emblem{height:90px;width:90px;border-radius:24px;background:#173f50;display:grid;place-items:center;color:#70e5d4;font-size:3.5rem;box-shadow:7px 7px 0 #c8e1df}
.print-studio-controls{background:#fff;border:1px solid #d0e1e5;box-shadow:0 8px 28px #1b405011;padding:clamp(20px,2vw,38px);border-radius:19px;align-self:center}
.print-studio-controls h3{font-size:1.45rem;letter-spacing:-.04em;margin:9px 0 21px}
.print-setup-chip{display:flex;align-items:center;gap:10px;padding:12px 9px 12px 13px;background:#f0f7f5;border:1px solid #d2e6e2;border-radius:11px;font-weight:800;color:#285f60;font-size:.8rem;margin-bottom:24px}
.print-setup-chip span{flex:1}.print-setup-chip button{border:0;background:#d6ebe5;color:#135c59;padding:7px 9px;border-radius:7px;font-size:.74rem;font-weight:850}
.print-cta{min-height:50px}.print-hint{font-size:.7rem;line-height:1.5;color:#7a8b99;margin-top:13px}
body[data-mode="print"] .game{display:none}body[data-mode="print"] .print-studio{display:grid!important}
#print-root{display:none}
/* Competition lobby: a head-to-head arena, not a form. */
.race-view{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.race-setup{position:relative;width:min(100%,1100px);height:min(100%,690px);min-height:0;margin:auto;padding:clamp(20px,3.3vh,35px) clamp(24px,4vw,55px);border-radius:20px;border:1px solid #295167;background:radial-gradient(ellipse at 20% 40%,#223d54 0,transparent 50%),radial-gradient(ellipse at 85% 50%,#51342e 0,transparent 43%),#172638;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(11px,1.8vh,19px);text-align:center;overflow:hidden}
.race-setup-top{flex:none}.race-setup-top .arena-kicker{color:#8edcd3;letter-spacing:2px;margin-bottom:8px}
.race-setup-top h2{color:white;font-size:clamp(1.55rem,3vw,3.1rem);font-weight:950;letter-spacing:-.06em;line-height:1.05}.race-setup-top h2 em{font-style:normal;color:#f7b65e}
.race-setup-top p{font-size:clamp(.76rem,1.1vw,.95rem);color:#aec4d3;line-height:1.4;margin-top:9px}
.versus-preview{width:min(100%,670px);height:clamp(125px,23vh,205px);display:grid;grid-template-columns:1fr 88px 1fr;align-items:center;gap:9px;flex:none}
.versus-player{min-height:100%;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;overflow:hidden}
.versus-player::before{content:"";position:absolute;inset:9px;border:1px solid #ffffff1f;border-radius:10px;pointer-events:none}
.versus-blue{background:#164961;border:1px solid #398ab5}.versus-orange{background:#633f32;border:1px solid #bc8261}
.versus-graphic{font-size:clamp(1.7rem,4vh,3rem);line-height:1;color:#ffffffb7;margin-bottom:4px}
.versus-player strong{font-size:clamp(.93rem,1.4vw,1.3rem);letter-spacing:1px;color:#fff}.versus-player small{font-size:.63rem;letter-spacing:1.7px;color:#bbd4de}
.versus-mid{display:grid;place-items:center}.versus-mid span{width:68px;height:68px;display:grid;place-items:center;border:2px solid #eeba69;border-radius:50%;background:#243649;color:#ffc875;font-size:1.35rem;font-weight:950;transform:rotate(-10deg);box-shadow:0 0 0 8px #ffffff07}
.race-setup-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;width:min(100%,670px);text-align:left;flex:none}
.race-setup-fields label{color:#c0d3dc;font-size:.75rem;font-weight:850}.race-setup-fields select{margin-top:6px;min-height:46px;background:#263d50;border-color:#476577;color:white}
.race-setup-fields .btn{min-height:46px;background:#e9a354;color:#263444;box-shadow:0 3px 0 #ab613d}
.race-setup-fields .btn:hover{background:#f5bb69}.race-setup-note{font-size:.7rem;color:#9ab5c6;letter-spacing:.2px}
.race-device-note{padding:8px 12px;background:#fff0dc;color:#8d4c20;border-radius:8px;font-size:.7rem}.race-setup-feedback{min-height:16px;font-size:.72rem;color:#f2c4a4}
/* Duel in progress */
.race-stage{display:flex;flex-direction:column;gap:9px;min-height:0;flex:1;position:relative}
.race-status{flex:none;height:52px;display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid #385168;background:#1a2b3e;border-radius:13px;color:#e9f2f5;padding:5px 12px;font-size:.81rem}
.race-status-live{display:inline-flex;align-items:center;gap:9px;color:#dce9ed;font-weight:850}
.live-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#61d4ad;box-shadow:0 0 0 4px #65dfb523}
.race-clock{padding:5px 14px;border-radius:9px;background:#0e202d;border:1px solid #364e5c;color:#9ddbd5;white-space:nowrap;font-weight:850}
.race-clock strong{font-weight:950;font-size:1.13rem;font-variant-numeric:tabular-nums;color:#fff;margin-left:6px}
.race-status .btn{min-height:33px;background:#31475c;color:#e1eff1;border-color:#52697a;box-shadow:none}
.race-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;min-height:0}
.race-side{--player:#2b87a5;--player-ink:#d4f4ff;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:0;min-width:0;gap:6px;padding:11px clamp(10px,1.2vw,22px);background:linear-gradient(180deg,#e6f4f6,#f7fbfa 38%);border:2px solid #538ca1;border-radius:15px;overflow:hidden;box-shadow:inset 0 4px 0 #337d96,0 9px 24px #0714233d}
.race-side:nth-of-type(2){--player:#d37a45;--player-ink:#ffead0;background:linear-gradient(180deg,#fff0e2,#fbfbf9 38%);border-color:#b98a67;box-shadow:inset 0 4px 0 #e19359,0 9px 24px #0714233d}
.race-side.winner{border-color:#e9b850;box-shadow:inset 0 4px 0 #e7b44c,0 0 0 3px #ffd37d55,0 10px 30px #0e25354b}
.race-player-heading{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:8px;border-bottom:1px solid #cbdfe3;padding:0 4px 8px}
.race-player-heading h2{display:flex;align-items:center;gap:8px;color:#214c62;font-weight:900;letter-spacing:-.03em;font-size:1rem}
.race-side:nth-of-type(2) .race-player-heading h2{color:#85502f}
.player-id{display:inline-grid;place-items:center;width:29px;height:27px;background:#206a8a;color:white;border-radius:8px;font-size:.75rem;font-variant-numeric:tabular-nums}
.race-side:nth-of-type(2) .player-id{background:#b26b3f}
.race-player-heading>span{font-size:.76rem;font-weight:800;color:#637d91;font-variant-numeric:tabular-nums}
.race-board-area{display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-height:0;min-width:0;gap:7px}
.race-board{--board-size:370px;max-width:100%;border-radius:7px;border-width:3px;box-shadow:0 3px 0 #afc4c8,0 7px 15px #1e46502a,0 0 0 5px #ffffffa9}
.race-pad{min-height:38px;gap:5px}.race-pad .pad-number{width:42px;height:38px;border-radius:8px;font-size:1.06rem;box-shadow:0 2px 0 #b6cbd2}
.race-actions{width:100%;display:flex;justify-content:center;gap:7px;flex:none}.race-actions .btn{min-width:76px;min-height:37px;padding:6px 10px;font-size:.82rem}
.race-side:nth-of-type(2) .race-actions .primary{background:#b46a3b;box-shadow:0 3px 0 #915235}
.race-feedback{width:min(100%,500px);height:25px;min-height:25px;max-height:27px;font-size:.73rem;border-radius:8px;background:#ffffffb0}
.race-feedback:empty{display:none}
.race-pause-overlay{position:absolute;inset:60px 0 0;z-index:6;background:#102239ed;color:#fff;border:1px solid #476177;border-radius:10px;display:grid;place-items:center;text-align:center;font-weight:800;padding:24px}
/* Victory is local to the winner — a restrained sports podium card. */
.race-win-card{position:absolute;z-index:5;left:50%;top:45%;transform:translate(-50%,-50%);width:min(295px,82%);min-height:182px;max-height:calc(100% - 65px);padding:19px 17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;background:#fffaf0;border:2px solid #e4b968;border-radius:19px;box-shadow:0 13px 0 #dcb86e50,0 25px 55px #14304255;pointer-events:none}
.race-win-card::before{content:"✦  ✦  ✦";position:absolute;top:14px;left:13px;color:#e5a247;letter-spacing:9px;font-size:.75rem}
.race-win-card::after{content:"✦  ✦";position:absolute;right:4px;bottom:14px;color:#71b7a1;letter-spacing:6px;font-size:.88rem}
.win-medal{display:grid;place-items:center;width:55px;height:55px;margin:3px 0 5px;background:#fff0bd;border:1px solid #efcf79;border-radius:50%}
.win-title{font-size:clamp(1.23rem,2vw,1.7rem);line-height:1.15;font-weight:950;letter-spacing:-.045em;color:#4b3828}
.win-player{font-size:.89rem;font-weight:900;color:#17816d}.win-caption{margin-top:9px;padding-top:9px;border-top:1px solid #e9d9ba;width:100%;font-size:.73rem;color:#846e57}.win-time{font-weight:950;color:#563b20;font-variant-numeric:tabular-nums}
/* Responsive adjustments keep board and keypad inside a single viewport. */
@media(max-width:1120px){
 .app{grid-template-rows:56px minmax(0,1fr);gap:8px;padding:7px 10px 10px}.topbar{height:56px;gap:10px}.identity-mark{width:34px;height:34px}.identity-mark svg{width:25px;height:25px}
 .mode-button{padding:5px 9px;min-height:33px;font-size:.73rem}.tool-label{display:none}.top-tool{height:34px;min-width:34px;padding:0 8px}
 .arena-head{height:63px}.arena-ornament{display:none}.sudoku-board{border-width:3px}.tile.box-right{border-right-width:3px}.tile.box-bottom{border-bottom-width:3px}
 .race-status{height:40px}.race-side{padding:7px}.race-board-area{gap:4px}.race-side .race-player-heading{min-height:27px;padding-bottom:5px}
 .race-pad{min-height:32px}.race-pad .pad-number{width:37px;height:32px;font-size:.95rem}.race-actions .btn{min-height:33px;font-size:.75rem}
 .race-feedback{height:22px;min-height:22px;max-height:24px;font-size:.69rem}
}
@media(max-width:700px){
 .app{grid-template-rows:53px minmax(0,1fr);gap:5px;padding:5px 7px 7px}
 .topbar{height:53px;gap:5px;padding:0}.identity-mark{display:none}.identity{display:none}.mode-nav{margin:0 auto 0 0;gap:1px;padding:3px}
 .mode-button{font-size:.68rem;min-height:33px;padding:5px 8px}.nav-icon{font-size:.9rem;margin-right:2px}
 .top-actions{gap:4px}.top-tool{height:33px;min-width:30px;padding:0 7px}
 .game,.print-studio{border-radius:13px}.arena-head{height:62px;padding:7px 10px}.arena-game-icon{width:35px;height:35px;border-radius:10px;padding:8px;gap:2px}.arena-kicker{font-size:.48rem;letter-spacing:.7px}
 .arena-game-brand{gap:7px}.arena-game-brand h2{font-size:1.07rem}.stage-meta{font-size:.58rem;margin-left:2px;padding:3px 5px}
 .arena-head-actions{gap:4px}.arena-head-actions .btn{font-size:.7rem;min-height:36px;padding:6px 8px}.arena-head-actions .btn span{display:none}
 .playground{padding:4px 8px}.board-area{gap:6px}.number-pad{min-height:37px;gap:5px}.pad-number{width:41px;height:37px;font-size:1rem;border-radius:8px}
 .game-actions{gap:5px}.game-actions .btn{flex:1;min-width:0;min-height:35px;padding:6px 3px;font-size:.72rem}.feedback{min-height:24px;max-height:33px;font-size:.68rem;padding:3px 7px}
 .print-studio{grid-template-columns:1fr;gap:12px;padding:20px;align-content:center}.print-studio-intro{text-align:center;margin:auto}.print-studio-intro .arena-kicker{margin-bottom:8px}.print-emblem{display:none}.print-studio-intro h2{font-size:1.6rem;margin:5px 0}.print-studio-intro p{font-size:.75rem;line-height:1.35}.print-studio-controls{padding:17px;width:min(100%,430px);margin:auto}.print-studio-controls h3{font-size:1.1rem;margin:5px 0 10px}.print-setup-chip{margin-bottom:14px}
 .race-setup{padding:15px;gap:10px}.versus-preview{height:130px;grid-template-columns:1fr 54px 1fr}.versus-mid span{width:48px;height:48px;font-size:1.07rem}.race-setup-fields{grid-template-columns:1fr 1fr}.race-setup-fields .btn{grid-column:1/-1}.race-setup-note{font-size:.62rem}
}
@media(max-height:720px){
 .app{grid-template-rows:52px minmax(0,1fr);gap:7px;padding-top:5px;padding-bottom:7px}.topbar{height:52px}
 .arena-head{height:58px}.board-area{gap:5px}.number-pad{min-height:36px;gap:5px}.pad-number{width:41px;height:36px;font-size:1rem}
 .game-actions .btn{min-height:32px;padding:4px 9px}.feedback{min-height:22px;max-height:25px;font-size:.69rem}
 .race-setup{padding-top:12px;padding-bottom:10px;gap:8px}.versus-preview{height:clamp(80px,20vh,140px)}.race-setup-top h2{font-size:clamp(1.45rem,2.7vw,2.2rem)}.race-setup-top p{margin-top:3px}
 .race-stage{gap:6px}.race-status{height:38px}.race-side{gap:2px;padding:5px}.race-player-heading{min-height:25px}.race-board-area{gap:3px}.race-pad .pad-number{height:29px;width:33px;font-size:.9rem}.race-pad{min-height:29px}.race-actions .btn{min-height:29px;font-size:.7rem;padding:3px 7px}.race-feedback{height:18px;min-height:18px;max-height:18px;font-size:.66rem}
 .race-win-card{min-height:135px;width:min(250px,82%);padding:10px 12px;gap:2px}.win-medal{height:37px;width:37px;margin:0}.win-medal svg{height:28px;width:28px}.win-title{font-size:1.15rem}.win-caption{margin-top:4px;padding-top:5px}
}
@media(max-height:440px){
 .app{grid-template-rows:38px minmax(0,1fr);gap:3px;padding:3px 5px}.topbar{height:38px}.mode-button{min-height:29px}.top-tool{min-height:29px;height:29px}.arena-head{height:42px}.arena-game-icon{display:none}
 .number-pad{min-height:26px;gap:3px}.pad-number{width:31px;height:26px;font-size:.8rem}.board-area{gap:3px}.game-actions .btn{min-height:26px;padding:2px 4px;font-size:.63rem}.feedback{min-height:18px;max-height:18px;font-size:.6rem}
 .race-status{height:30px}.race-player-heading{min-height:20px}.race-pad{min-height:23px}.race-pad .pad-number{height:23px;width:26px}.race-actions .btn{min-height:23px}.race-feedback{height:15px;min-height:15px;max-height:15px;font-size:.6rem}
 .race-setup h2{font-size:1.1rem}.versus-preview{height:66px}.versus-graphic{display:none}.race-setup-fields select{height:32px;min-height:32px}.race-setup-fields .btn{min-height:32px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Very small phones: keep navigation and controls readable rather than cropping. */
@media(max-width:360px){
 .mode-nav{gap:0;padding:2px;flex:1;justify-content:space-between;min-width:0}
 .mode-button{padding:4px 5px;font-size:.59rem;min-height:30px}
 .nav-icon{font-size:.74rem;margin-right:0}
 .top-actions{gap:3px}.top-tool{min-width:27px;height:29px;padding:0 5px;font-size:.82rem}
 .feedback{font-size:.61rem;line-height:1.07;min-height:28px;max-height:32px}
 .game-actions .btn{font-size:.66rem;letter-spacing:-.02em}
 .print-studio{padding:12px 15px;gap:6px}.print-studio-intro h2{font-size:1.24rem}
 .print-studio-intro p{font-size:.68rem;line-height:1.3}
 .print-studio-controls{padding:12px 13px;border-radius:13px}
 .print-studio-controls h3{margin:3px 0 9px}.print-setup-chip{margin-bottom:11px;padding:9px}
 .print-studio .field{margin-bottom:10px}.print-studio-controls .btn{min-height:39px}
 .print-hint{font-size:.65rem;line-height:1.25;margin-top:6px}
}
/* v0.1.7 — dedicated printer-friendly worksheet studio */
.print-studio-controls{max-width:490px;width:100%;}
.print-quality-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.print-quality-row span{display:inline-flex;align-items:center;padding:6px 9px;background:#f3f6f7;border:1px solid #d9e4e7;border-radius:8px;color:#516875;font-size:.71rem;font-weight:800;white-space:nowrap;}
.print-action-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:9px;margin-top:9px;}
.print-action-grid .btn{padding:8px 7px;min-width:0;min-height:44px;box-sizing:border-box;font-size:clamp(.76rem,1.04vw,.94rem);}
.print-action-grid.answer-actions .btn{min-height:38px;font-size:clamp(.72rem,.92vw,.82rem);}
.print-studio-controls #print-prepare{min-height:36px;font-size:.77rem;}
.print-studio-controls .print-hint{margin-top:11px;min-height:26px;line-height:1.35;overflow-wrap:anywhere;}
.print-hint[data-status="success"]{color:#0a7d6c;}
.print-hint[data-status="warn"]{color:#a34327;}
@media(max-height:700px){
 .print-studio-intro h2{font-size:clamp(1.2rem,2.6vw,2.4rem);margin:8px 0;}
 .print-studio-controls{padding:clamp(11px,1.8vh,20px);}
 .print-studio-controls h3{margin:3px 0 8px;font-size:1.15rem;}
 .print-setup-chip{margin-bottom:8px;padding:7px 9px;}
 .print-studio .field{margin-bottom:8px;}
 .print-action-grid{gap:7px;margin-top:6px;}
 .print-action-grid .btn{min-height:37px;}
 .print-action-grid.answer-actions .btn{min-height:32px;}
 .print-quality-row{margin-bottom:6px;gap:4px;}
 .print-quality-row span{padding:4px 6px;font-size:.65rem;}
 .print-studio-controls .print-hint{margin-top:6px;font-size:.65rem;min-height:18px;}
}
@media(max-width:700px){
 .print-studio{gap:8px;}
 .print-studio-intro p{max-width:380px;margin:0 auto;}
 .print-studio-controls{padding:12px 14px;}
 .print-quality-row{justify-content:center;}
 .print-action-grid .btn{font-size:.72rem;min-height:39px;}
}
@media(max-height:440px){
 .print-studio{grid-template-columns:.8fr 1.2fr;gap:7px;align-items:center;padding:7px 12px;}
 .print-studio-intro{width:100%;}
 .print-studio-intro h2{font-size:.98rem;}
 .print-studio-intro p{font-size:.60rem;}
 .print-studio-controls{padding:8px;}
 .print-studio-controls h3{font-size:.86rem;margin:2px 0 3px;}
 .print-setup-chip{margin-bottom:4px;font-size:.67rem;padding:4px 5px;}
 .print-quality-row{gap:2px;margin-bottom:3px;}
 .print-quality-row span{font-size:.52rem;padding:2px 4px;}
 .print-studio .field{margin-bottom:3px;}
 .print-studio .field select{min-height:27px;height:27px;}
 .print-action-grid{gap:3px;margin-top:3px;}
 .print-action-grid .btn,.print-action-grid.answer-actions .btn{min-height:26px;font-size:.57rem;padding:3px;}
 .print-studio-controls #print-prepare{min-height:24px;font-size:.57rem;}
 .print-studio-controls .print-hint{font-size:.53rem;margin-top:3px;line-height:1.05;min-height:12px;}
}

/* v0.1.14 — premium UI refresh, clearer hierarchy, larger centered symbols */
.mode-nav{gap:8px;padding:8px 10px;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff55,0 10px 25px #07152318}
.mode-button{position:relative;min-height:46px;padding:9px 18px;border:1px solid transparent;border-radius:14px;font-size:.9rem;font-weight:900;letter-spacing:.01em;box-shadow:inset 0 1px 0 #ffffff45}
#mode-class{background:linear-gradient(180deg,#eefaf8 0%,#dbf5ef 100%);color:#175e5b;border-color:#c2e6dd;box-shadow:0 5px 14px #1f8b8440}
#mode-race{background:linear-gradient(180deg,#fff5ec 0%,#ffe5ce 100%);color:#91542b;border-color:#f3c69f;box-shadow:0 5px 14px #ca7d3540}
#mode-print{background:linear-gradient(180deg,#f0f3ff 0%,#dfe7ff 100%);color:#415291;border-color:#c4d0ff;box-shadow:0 5px 14px #556dd040}
.mode-button.active{transform:translateY(-1px);filter:saturate(1.03);box-shadow:0 10px 22px #0a1d2f20,inset 0 1px 0 #ffffff88}
.mode-button:not(.active){opacity:.95}
.mode-button:hover{transform:translateY(-1px)}
.mode-button .nav-icon{font-size:1rem;margin-right:6px}

.top-actions{gap:10px}
.top-tool{height:44px;min-width:44px;padding:0 14px;border-radius:13px;font-weight:900;box-shadow:0 6px 16px #07152314,inset 0 1px 0 #ffffff4a;transition:transform .12s,background-color .12s,border-color .12s,box-shadow .12s}
.top-tool:hover{transform:translateY(-1px)}
#go-home{background:linear-gradient(180deg,#f5f9ff 0%,#e3eef9 100%);color:#2b5576;border-color:#c6d8e7}
#theme-toggle{background:linear-gradient(180deg,#f5f0ff 0%,#e8dcff 100%);color:#5a4591;border-color:#d1c1fb;min-width:102px}
#open-help{background:linear-gradient(180deg,#eef7ff 0%,#d9ecff 100%);color:#2c6592;border-color:#c1dcf7}
#fullscreen{background:linear-gradient(180deg,#f1f5f7 0%,#dde7ec 100%);color:#365061;border-color:#c4d0d9}

.arena-head{padding:0 18px}
.arena-ornament{display:none}
.playground{padding:10px 18px 14px}
.board-area{width:min(100%,760px);gap:12px}
.board-bezel{display:contents}
.sudoku-board{--board-size:min(72vh,540px);border-width:5px;border-radius:20px;box-shadow:0 8px 0 #b8c9d3,0 24px 36px #10283b14,0 0 0 10px #f7fbfd}
.sudoku-board.board6{--board-size:min(70vh,620px)}
.tile{padding:0;font-size:clamp(1.35rem,3.2vmin,2.1rem);line-height:1;text-align:center}
.sudoku-board.board6 .tile{font-size:clamp(1.05rem,2.25vmin,1.55rem)}
.tile.given,.tile.selected,.tile{display:grid;place-items:center}
.number-pad{gap:10px;min-height:56px}
.pad-number{width:60px;height:56px;font-size:1.55rem;border-radius:14px;font-weight:950}
.game-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.game-actions .btn{min-width:168px;min-height:48px;border-radius:14px;font-size:.98rem;font-weight:900}
.feedback{min-height:34px;font-size:.82rem;border-radius:14px}

.sudoku-command-bar .arena-head-actions .btn,
.maze-command-bar .arena-head-actions .btn{background:linear-gradient(180deg,#0fa39a 0%,#0c857f 100%);color:#fff;border-color:#0b726e;box-shadow:0 4px 0 #0a5c59,0 10px 18px #0d70681f}
.sudoku-command-bar .arena-head-actions .btn:hover:not(:disabled),
.maze-command-bar .arena-head-actions .btn:hover:not(:disabled){background:linear-gradient(180deg,#14afa6 0%,#0c8b86 100%)}
.sudoku-command-bar .arena-head-actions .btn span,
.maze-command-bar .arena-head-actions .btn span{color:inherit}

body[data-mode="class"] #erase,
body[data-mode="class"] #hint,
body[data-game="maze"][data-mode="class"] #maze-undo,
body[data-game="maze"][data-mode="class"] #maze-hint{display:none!important}
body[data-game="maze"][data-mode="class"] .maze-controls,
body[data-game="maze"][data-mode="class"] .game-actions{justify-content:center}

@media(max-width:1100px){
  .mode-nav{gap:6px;padding:6px}
  .mode-button{min-height:42px;padding:8px 14px;font-size:.82rem}
  .top-tool{height:41px;padding:0 12px}
  .board-area{width:min(100%,680px)}
  .sudoku-board{--board-size:min(62vh,490px)}
  .sudoku-board.board6{--board-size:min(62vh,540px)}
  .tile{font-size:clamp(1.28rem,3.2vmin,1.95rem)}
  .sudoku-board.board6 .tile{font-size:clamp(1rem,2.1vmin,1.45rem)}
  .game-actions .btn{min-width:150px;min-height:44px;font-size:.9rem}
}
@media(max-width:700px){
  .mode-nav{padding:4px;gap:4px;border-radius:14px}
  .mode-button{min-height:36px;padding:6px 8px;font-size:.69rem;border-radius:10px}
  .mode-button .nav-icon{margin-right:3px;font-size:.9rem}
  .top-actions{gap:5px}
  .top-tool{height:36px;min-width:36px;padding:0 9px;border-radius:11px;font-size:.82rem}
  #theme-toggle{min-width:40px}
  .arena-head{padding:0 10px}
  .playground{padding:6px 10px 10px}
  .board-area{width:100%;gap:8px}
  .sudoku-board{--board-size:min(58vh,92vw);border-width:4px;border-radius:16px;box-shadow:0 6px 0 #b8c9d3,0 0 0 6px #f7fbfd}
  .sudoku-board.board6{--board-size:min(60vh,94vw)}
  .tile{font-size:clamp(1.25rem,6vw,1.9rem)}
  .sudoku-board.board6 .tile{font-size:clamp(.95rem,4vw,1.35rem)}
  .number-pad{gap:7px;min-height:48px}
  .pad-number{width:50px;height:48px;font-size:1.28rem;border-radius:12px}
  .game-actions{gap:8px}
  .game-actions .btn{min-width:132px;min-height:42px;font-size:.83rem}
}
@media(max-height:540px){
  .sudoku-board{--board-size:min(78vh,500px)}
  .sudoku-board.board6{--board-size:min(78vh,560px)}
}

/* v0.1.18 KÖK NEDEN DÜZELTMESİ — Sudoku tahtası küçülmesine yol açan flex sarmalayıcı kaldırıldı.
   Bu oyun alanındaki boyutlandırma sınıf Sudoku'suna özgüdür; yarışma/A4 etkilenmez. */
body[data-game="sudoku"][data-mode="class"] .sudoku-game .board-bezel {display:contents;}
body[data-game="sudoku"][data-mode="class"] .sudoku-game .sudoku-board {
  flex:0 0 auto;
  box-sizing:border-box;
  height:auto;
  aspect-ratio:1 / 1;
  min-width:0;
  max-width:100%;
}
body[data-game="sudoku"][data-mode="class"] .sudoku-game .sudoku-board .tile {
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  line-height:1;
  text-align:center;
  padding:0;
  font-size:clamp(1.55rem,5.1vmin,3.15rem);
}
body[data-game="sudoku"][data-mode="class"] .sudoku-game .sudoku-board.board6 .tile {
  font-size:clamp(1.2rem,3.65vmin,2.35rem);
}
@media (max-width:700px) {
  body[data-game="sudoku"][data-mode="class"] .sudoku-game .sudoku-board .tile {font-size:clamp(1.35rem,6.2vw,2.1rem);}
  body[data-game="sudoku"][data-mode="class"] .sudoku-game .sudoku-board.board6 .tile {font-size:clamp(1rem,4.3vw,1.55rem);}
}


/* v0.1.19 — hover readability fix */
.sudoku-command-bar .arena-head-actions .btn:hover:not(:disabled),
.maze-command-bar .arena-head-actions .btn:hover:not(:disabled),
.sudoku-command-bar .arena-head-actions .btn:focus-visible:not(:disabled),
.maze-command-bar .arena-head-actions .btn:focus-visible:not(:disabled){
  color:#ffffff;
  border-color:#0b726e;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
#go-home:hover,#go-home:focus-visible{background:linear-gradient(180deg,#f8fbff 0%,#e8f1fb 100%);color:#2b5576;border-color:#bfd3e4}
#theme-toggle:hover,#theme-toggle:focus-visible{background:linear-gradient(180deg,#f8f3ff 0%,#ede3ff 100%);color:#5a4591;border-color:#cbbbf7}
#open-help:hover,#open-help:focus-visible{background:linear-gradient(180deg,#f3f9ff 0%,#e2f0ff 100%);color:#2c6592;border-color:#bcd8f2}
#fullscreen:hover,#fullscreen:focus-visible{background:linear-gradient(180deg,#f5f8fa 0%,#e3ebef 100%);color:#365061;border-color:#bfd0d8}

/* v0.1.25 — On wide teaching-board screens, keep main navigation next to the title.
   The context-specific toolbar only has Yeni oyun and Ayarlar. */
@media (min-width: 1600px) {
  .topbar .mode-nav { margin-left: clamp(60px, 7vw, 138px); }
  .topbar .top-actions { margin-left: auto; }
}

/* v0.1.26 — staged game settings, explicit apply */
.settings-apply-status {min-height:27px;line-height:1.45;font-size:.76rem;color:#63798b;margin:0 0 8px;}
.settings-apply-status[data-status="ready"] {color:#11746f;font-weight:800;}
.settings-apply-status[data-status="warn"] {color:#a34e30;font-weight:800;}
.settings-apply-button {min-height:48px;margin-bottom:9px!important;}
.settings-return-button {margin-bottom:0!important;}
html[data-theme="dark"] .settings-apply-status {color:#bdd0df;}
html[data-theme="dark"] .settings-apply-status[data-status="ready"] {color:#7fe2d4;}
html[data-theme="dark"] .settings-apply-status[data-status="warn"] {color:#ffad86;}


/* v0.1.29 — ortak yarışma kontrolü: tüm iki oyunculu oyunlarda orta ayırıcı */
.race-panels { position:relative; }
.race-panels > .race-center-new {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  min-height:48px;
  min-width:132px;
  padding:11px 17px;
  border:2px solid #eafff2;
  border-radius:15px;
  background:linear-gradient(180deg,#179e69 0%,#087b50 100%);
  color:#fff;
  font-size:.92rem;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 4px 0 #075638,0 9px 24px #001d133b;
  text-shadow:0 1px 1px #06422e;
  cursor:pointer;
}
.race-panels > .race-center-new:hover:not(:disabled),
.race-panels > .race-center-new:focus-visible {
  background:linear-gradient(180deg,#24b77b 0%,#078759 100%);
  color:#fff;
  border-color:#f0fff7;
  box-shadow:0 4px 0 #075638,0 11px 26px #001d1340;
  transform:translate(-50%,-50%);
}
.race-panels > .race-center-new:focus-visible {outline:3px solid #ffd371;outline-offset:4px;}
.race-panels > .race-center-new:active:not(:disabled) {
  transform:translate(-50%,calc(-50% + 3px));
  box-shadow:0 1px 0 #075638,0 4px 11px #001d1333;
}
@media (max-width:1000px) {
  .race-panels > .race-center-new { min-height:40px;min-width:110px;padding:8px 10px;font-size:.78rem;border-radius:12px; }
}
@media (max-height:530px) {
  .race-panels > .race-center-new {min-height:34px;min-width:100px;padding:5px 8px;font-size:.73rem;border-radius:10px;}
}

/* Dar yarış ekranında Sudoku tahtaları orta düğmeyi örtmesin. */
@media (max-width:1150px) and (min-width:800px) {
  #race-stage .race-panels > .race-side:first-of-type .race-board-area { padding-right:48px; }
  #race-stage .race-panels > .race-side:nth-of-type(2) .race-board-area { padding-left:48px; }
}