*{margin:0;padding:0;box-sizing:border-box}:root{color-scheme:dark;font-family:"Segoe UI",Arial,sans-serif}html,body{width:100%;height:100%;overflow:hidden;background:#69ccec;color:#f7f8ff}#raceCanvas{display:block;width:100%;height:100%}button,input,select{font:inherit}.hidden{display:none!important}
.mode-tabs{position:fixed;top:14px;left:16px;z-index:50;display:flex;gap:6px;padding:5px;border:1px solid #ffffff4d;border-radius:13px;background:#07101bd9;backdrop-filter:blur(14px);box-shadow:0 8px 26px #0006}.mode-tab{padding:8px 12px;border-radius:9px;color:#dce6ff99;font-size:12px;font-weight:800;text-decoration:none;transition:.18s}.mode-tab:hover{color:#fff;background:#ffffff12}.mode-tab.active{color:#fff;background:linear-gradient(135deg,#00d9ff4d,#9f5cff4d);box-shadow:inset 0 0 0 1px #ffffff18}
.race-logo{position:fixed;z-index:20;top:19px;left:50%;transform:translateX(-50%);color:#ffdf55;font-size:21px;font-weight:1000;font-style:italic;letter-spacing:2px;text-shadow:0 3px 0 #17233a,0 0 18px #0008;pointer-events:none}.race-logo span{color:#fff}
.race-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:72px 18px 22px;background:radial-gradient(circle at 50% 30%,#75ddfa70,#0a1422d9 72%);backdrop-filter:blur(7px);overflow-y:auto;overflow-x:hidden}.race-card{width:min(760px,100%);padding:30px;border:1px solid #ffffff35;border-radius:24px;background:linear-gradient(150deg,#18243bf5,#0a101df5);box-shadow:0 30px 100px #000a,inset 0 1px #ffffff16}.setup-card{margin:auto}.eyebrow{color:#71e9ff;font-size:11px;font-weight:900;letter-spacing:3px;margin-bottom:9px}.race-card h1{font-size:clamp(38px,7vw,64px);line-height:.95;letter-spacing:-3px;background:linear-gradient(100deg,#fff,#75eaff 45%,#ffdc5b);background-clip:text;color:transparent}.race-card p{margin-top:14px;color:#dce2ffc0;line-height:1.5;max-width:650px}.race-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.race-settings label{display:grid;gap:7px;color:#b8c1e5;font-size:12px;font-weight:800}.race-settings select{width:100%;padding:11px;color:#fff;background:#0c1526;border:1px solid #526080;border-radius:11px;outline:none}.race-settings select:focus{border-color:#75eaff;box-shadow:0 0 0 3px #75eaff20}
.fixed-map{display:grid;gap:3px;padding:10px 13px;border:1px solid #526080;border-radius:11px;background:#0c1526}.fixed-map span{color:#72e8ff;font-size:8px;font-weight:1000;letter-spacing:2px}.fixed-map b{font-size:12px}.fixed-map small{color:#8997b5;font-size:9px}
.editor-head{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 9px;color:#7ee9ff;font-size:10px;letter-spacing:2px}.editor-head span{color:#7e8ba9;font-size:9px;letter-spacing:0}.racer-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:310px;overflow:auto;padding-right:4px}.racer-row{display:grid;grid-template-columns:50px 1fr;gap:9px;padding:9px;border:1px solid #ffffff15;border-radius:13px;background:#ffffff08}.avatar-preview{grid-row:1/3;position:relative;width:50px;height:50px;border:2px solid #ffffff8c;border-radius:50%;overflow:hidden;background:var(--c)}.avatar-preview img{width:100%;height:100%;object-fit:cover}.avatar-preview b{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-size:17px}.racer-name{min-width:0;padding:7px 9px;color:#fff;background:#0b1323;border:1px solid #414c69;border-radius:8px;outline:none;font-weight:800}.racer-name:focus{border-color:#74eaff}.file-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.file-pick{position:relative;display:block;min-width:0;padding:6px 7px;border:1px dashed #62708f;border-radius:7px;color:#9ba8c8;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.file-pick:hover{color:#fff;border-color:#75eaff}.file-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.menu-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.race-start,.secondary-btn{border:0;border-radius:12px;padding:13px 18px;cursor:pointer;font-weight:900;transition:.18s}.race-start{color:#071018;background:linear-gradient(135deg,#75eaff,#ffdc5b);box-shadow:0 9px 28px #46dfff35}.secondary-btn{color:#dfe7ff;background:#252f49;border:1px solid #ffffff18}.race-start:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.race-ranking{position:fixed;z-index:15;left:14px;top:72px;width:218px;max-height:calc(100vh - 88px);overflow:hidden;padding:11px;border:1px solid #ffffff3d;border-radius:15px;background:#08111ddd;backdrop-filter:blur(12px);box-shadow:0 15px 45px #0006}.ranking-title{color:#72e8ff;font-size:9px;letter-spacing:2px;font-weight:900;margin:1px 4px 8px}.rank-row{display:grid;grid-template-columns:20px 27px 1fr auto;align-items:center;gap:6px;min-height:31px;padding:4px 5px;border-radius:8px;color:#d7e5ef;font-size:10px}.rank-row:first-of-type{background:#ffdc5b20;color:#fff}.rank-avatar{width:24px;height:24px;border:1px solid #ffffff70;border-radius:50%;object-fit:cover;background:var(--c)}.rank-avatar.fallback{display:grid;place-items:center;color:#fff;font-weight:1000}.rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.rank-gap{color:#8ba3b6;font-variant-numeric:tabular-nums}
.leader-spotlight{position:fixed;z-index:16;top:70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:9px 16px;border-radius:18px;background:#ffffffeb;color:#101622;box-shadow:0 10px 35px #0005}.spot-racer{display:grid;grid-template-columns:43px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}.spot-avatar{grid-row:1/3;width:43px;height:43px;border:3px solid var(--c);border-radius:50%;object-fit:cover;background:var(--c)}.spot-avatar.fallback{display:grid;place-items:center;color:#fff;font-size:15px;font-weight:1000}.spot-racer b{font-size:11px}.spot-racer small{color:#607080;font-size:8px}.spot-vs{font-size:15px;font-weight:1000}.current-section{position:fixed;z-index:15;bottom:16px;left:50%;transform:translateX(-50%);padding:8px 15px;border-radius:999px;background:#07111ddd;color:#fff;font-size:10px;font-weight:900;box-shadow:0 8px 24px #0006}.current-section b{color:#75eaff;margin-right:7px}.race-controls{position:fixed;z-index:20;top:14px;right:16px;display:flex;gap:7px}.race-controls button{min-width:42px;height:39px;padding:0 11px;color:#fff;background:#0a1421e8;border:1px solid #ffffff45;border-radius:10px;cursor:pointer;font-weight:900}.race-controls button:hover{border-color:#75eaff}
.race-controls button:disabled{opacity:.38;cursor:not-allowed}
.countdown{position:fixed;z-index:35;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;font-size:min(28vw,200px);font-weight:1000;text-shadow:0 5px 0 #1b2738,0 0 38px #6ee7ff;animation:countPop .65s ease both}@keyframes countPop{from{transform:scale(.4);opacity:0}35%{opacity:1}to{transform:scale(1.15);opacity:0}}
.finish-card{text-align:center}.finish-card h2{margin:5px 0 24px;font-size:clamp(36px,6vw,62px);color:#ffdc5b}.podium{display:flex;justify-content:center;align-items:end;gap:10px;min-height:180px;margin:10px 0 26px}.podium-place{width:30%;max-width:155px;padding:14px 8px;border-radius:14px 14px 5px 5px;background:linear-gradient(#303b5b,#151d2d);border:1px solid #ffffff20}.podium-place.first{min-height:170px;order:2;background:linear-gradient(#705d20,#211c17);border-color:#ffdc5b88}.podium-place.second{min-height:135px;order:1}.podium-place.third{min-height:110px;order:3}.podium-ball{width:54px;height:54px;margin:0 auto 9px;border:3px solid var(--c);border-radius:50%;object-fit:cover;background:var(--c)}.podium-ball.fallback{display:grid;place-items:center;color:#fff;font-weight:1000}.podium-place b{display:block;font-size:12px}.podium-place span{color:#aab8ca;font-size:11px}
@media(max-width:880px){.mode-tabs{top:8px;left:8px}.mode-tab{padding:7px 9px;font-size:10px}.race-logo{top:56px}.race-controls{top:8px;right:8px}.leader-spotlight{top:96px}.race-ranking{left:7px;top:159px;width:146px;padding:7px}.rank-row{grid-template-columns:17px 23px 1fr;gap:4px}.rank-gap{display:none}.race-card{padding:22px}.racer-editor{grid-template-columns:1fr}.race-settings{grid-template-columns:1fr}.editor-head span{display:none}}
@media(max-width:560px){.race-logo{font-size:17px}.mode-tab{font-size:0}.mode-tab::first-letter{font-size:14px}.leader-spotlight{top:54px;transform:translateX(-50%) scale(.85)}.race-ranking{top:122px;opacity:.9}.setup-card{padding:18px}.race-card h1{font-size:40px}.race-card p{font-size:12px}.menu-actions{flex-direction:column-reverse}.menu-actions button{width:100%}}

.map-editor-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#050a12e8;backdrop-filter:blur(12px)}
.map-editor-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(1120px,100%);height:min(900px,96vh);overflow:hidden;border:1px solid #ffffff35;border-radius:22px;background:#101a2a;box-shadow:0 32px 100px #000b}
.map-editor-title,.map-editor-actions{display:flex;align-items:center;gap:12px;padding:15px 18px;background:#0a1321}.map-editor-title{justify-content:space-between;border-bottom:1px solid #ffffff16}.map-editor-title small{color:#72e8ff;font-size:9px;font-weight:1000;letter-spacing:2px}.map-editor-title h2{margin-top:2px;font-size:22px}.icon-btn{width:38px;height:38px;border:1px solid #ffffff25;border-radius:10px;color:#fff;background:#ffffff0d;font-size:25px;cursor:pointer}.map-editor-help{padding:8px 18px;color:#b7c5db;background:#17243a;font-size:11px}.map-editor-layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}.map-tools{display:flex;flex-direction:column;gap:13px;padding:15px;border-right:1px solid #ffffff18;overflow:auto}.map-tools label{display:grid;gap:6px;color:#b8c5db;font-size:11px;font-weight:800}.map-tools select,.map-tools input{width:100%}.map-tools select{padding:9px;border:1px solid #526080;border-radius:9px;color:#fff;background:#0a1423}.map-tools output{float:right;color:#74eaff}.tool-grid{display:grid;gap:6px}.tool-grid button,.map-mini-actions button{padding:9px;border:1px solid #ffffff1e;border-radius:9px;color:#dce6f6;background:#202c42;text-align:left;cursor:pointer;font-size:11px;font-weight:800}.tool-grid button:hover,.tool-grid button.active{color:#08111c;background:#74eaff;border-color:#74eaff}.map-mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.map-mini-actions button{text-align:center;font-size:9px}.map-safety{padding:10px;border-radius:9px;color:#9fb0c6;background:#0a1321;font-size:9px;line-height:1.45}.map-stage-wrap{display:grid;place-items:center;min-width:0;min-height:0;padding:12px;overflow:auto;background:radial-gradient(circle,#243c58,#09111d)}#mapEditorCanvas{display:block;width:auto;height:min(100%,760px);max-width:100%;aspect-ratio:780/1100;border:2px solid #8ce9ff70;border-radius:8px;background:#69ccec;touch-action:none;box-shadow:0 16px 50px #0008}.map-editor-actions{justify-content:flex-end;border-top:1px solid #ffffff16}.map-editor-actions span{margin-right:auto;color:#7ee9ff;font-size:10px;font-weight:800}
.section-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.section-actions button{padding:8px 5px;border:1px solid #ffffff1e;border-radius:8px;color:#dce6f6;background:#202c42;cursor:pointer;font-size:9px;font-weight:900}.section-actions button:first-child{color:#08111c;background:#74eaff}.section-actions button:disabled{opacity:.35;cursor:not-allowed}

.selection-count{display:grid;gap:3px;padding:10px 13px;border:1px solid #526080;border-radius:11px;background:#0c1526}.selection-count span{color:#72e8ff;font-size:8px;font-weight:1000;letter-spacing:2px}.selection-count b{font-size:13px}.selection-count small{color:#8997b5;font-size:9px}.setup-card{width:min(900px,100%)}
.racer-editor{grid-template-columns:repeat(4,minmax(0,1fr));max-height:350px;gap:10px}.character-card{position:relative;display:grid;grid-template-rows:110px auto auto;gap:4px;min-width:0;padding:8px;border:2px solid #303b52;border-radius:15px;color:#fff;background:#111a2a;cursor:pointer;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s,opacity .18s}.character-card:hover{transform:translateY(-2px)}.character-card.active{border-color:#72e8ff;box-shadow:0 0 0 3px #72e8ff18,0 10px 25px #0005}.character-card.inactive{opacity:.58}.character-photo{display:block;width:100%;height:110px;padding:3px;border-radius:10px;object-fit:contain;object-position:center;background:#050a12;transition:filter .2s,transform .2s}.character-card.inactive .character-photo{filter:grayscale(1) brightness(.48);transform:scale(.96)}.character-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.character-card small{color:#6f7d93;font-size:8px;font-weight:900;letter-spacing:1px}.character-card.active small{color:#72e8ff}.character-check{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#071018;background:#72e8ff;font-size:13px;font-weight:1000;box-shadow:0 4px 14px #0008}.character-card.inactive .character-check{color:#9ca9ba;background:#111927;border:1px solid #ffffff30}
@media(max-width:760px){.racer-editor{grid-template-columns:repeat(2,minmax(0,1fr))}.character-card{grid-template-rows:90px auto auto}.character-photo{height:90px}}

/* Yarış sırasında daha okunaklı canlı sıralama */
.race-ranking{width:380px;padding:19px;border-radius:21px}.ranking-title{margin:3px 8px 14px;font-size:13px;letter-spacing:2.8px}.rank-row{grid-template-columns:31px 48px minmax(0,1fr) auto;gap:12px;min-height:56px;padding:6px 9px;border-radius:12px;font-size:15px}.rank-avatar{width:44px;height:44px;border-width:2px}.rank-name{font-size:15px}.rank-gap{font-size:12px}.rank-row>b{font-size:15px}
@media(max-width:880px){.race-ranking{width:245px;padding:12px}.ranking-title{font-size:10px}.rank-row{grid-template-columns:23px 37px minmax(0,1fr);gap:8px;min-height:46px;padding:5px;font-size:12px}.rank-avatar{width:35px;height:35px}.rank-name{font-size:12px}.rank-row>b{font-size:12px}}
@media(max-width:760px){.map-editor-modal{padding:5px}.map-editor-shell{height:99vh;border-radius:13px}.map-editor-layout{grid-template-columns:150px minmax(0,1fr)}.map-tools{padding:9px}.map-editor-help{font-size:9px}.map-editor-actions{padding:9px}.map-editor-actions button{padding:9px;font-size:10px}}