@font-face{font-family:"Courier Prime";font-weight:400;font-display:swap;src:url(../assets/fonts/courier-prime-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:"Courier Prime";font-weight:400;font-display:swap;src:url(../assets/fonts/courier-prime-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Courier Prime";font-weight:700;font-display:swap;src:url(../assets/fonts/courier-prime-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:"Courier Prime";font-weight:700;font-display:swap;src:url(../assets/fonts/courier-prime-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Archivo;font-weight:500;font-display:swap;src:url(../assets/fonts/archivo-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Archivo;font-weight:500;font-display:swap;src:url(../assets/fonts/archivo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Archivo;font-weight:700;font-display:swap;src:url(../assets/fonts/archivo-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Archivo;font-weight:700;font-display:swap;src:url(../assets/fonts/archivo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(../assets/fonts/archivo-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(../assets/fonts/archivo-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

/* Marka değerleri Megaskala kitinden: #1C1A17, #EFE9DC, #C4302B, #6B645A, #B9B2A4. Kehribar kanal kapaklarından. */
:root{
  --ink:#1C1A17;--ink2:#5F584F;--paper:#EFE9DC;--sheet:#F8F4EA;--rule:#CDC5B4;--red:#C4302B;--amber:#FFB020;--on-amber:#1C1A17;
  --good:#17634A;--good-bg:#D5E6D8;--bad-bg:#F2D4CB;--logo:url(../assets/megaskala-logo-koyu.svg);
  --type:"Courier Prime","Courier New",monospace;--sans:Archivo,system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --scale:1;color-scheme:light;
}
:root[data-theme="dark"]{--ink:#EFE9DC;--ink2:#B9B2A4;--paper:#1C1A17;--sheet:#272420;--rule:#433E36;--red:#EF5A50;--good:#58C79C;--good-bg:#1D3A2E;--bad-bg:#47211D;--logo:url(../assets/megaskala-logo-acik.svg);color-scheme:dark}
@media (prefers-color-scheme:dark){:root[data-theme="system"]{--ink:#EFE9DC;--ink2:#B9B2A4;--paper:#1C1A17;--sheet:#272420;--rule:#433E36;--red:#EF5A50;--good:#58C79C;--good-bg:#1D3A2E;--bad-bg:#47211D;--logo:url(../assets/megaskala-logo-acik.svg);color-scheme:dark}}
:root[data-text="large"]{--scale:1.14}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--paper);color:var(--ink);font:500 calc(16px*var(--scale))/1.4 var(--sans);overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:calc(var(--sat) + 10px) calc(var(--sar) + 18px) calc(var(--sab) + 12px) calc(var(--sal) + 18px)}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:enter .22s ease-out both}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px 16px}
@keyframes enter{from{opacity:0;transform:translateY(6px)}}
.t{font-family:var(--type)}
.muted{color:var(--ink2)}
.small{font-size:.875rem}
.num{font-family:var(--type);font-weight:700;font-variant-numeric:tabular-nums}

/* Üst çubuk */
.bar{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:10px}
.bar h1{flex:1;font:700 1.25rem/1.1 var(--type);min-width:0}
.back{width:44px;height:44px;margin-left:-10px;display:grid;place-items:center;flex:none}
.back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.mark{width:68px;height:42px;background:url(../assets/megaskala-ms-koyu.svg) left center/contain no-repeat}
:root[data-theme="dark"] .mark{background-image:url(../assets/megaskala-ms-acik.svg)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .mark{background-image:url(../assets/megaskala-ms-acik.svg)}}

/* Açılış */
.intro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px}
.wordmark{width:100%;max-width:400px;aspect-ratio:975/190;background:var(--logo) left center/contain no-repeat}
.intro .wordmark{clip-path:inset(0 100% 0 0);animation:type-in .9s steps(10) .1s forwards}
@keyframes type-in{to{clip-path:inset(0 0 0 0)}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:700 .9375rem var(--type)}
.field input,.field select{min-height:50px;padding:0 14px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:3px;user-select:text;-webkit-user-select:text}
.err{color:var(--red);font-weight:700;font-size:.9375rem}

/* Düğmeler */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 20px;background:var(--ink);color:var(--paper);font:800 1.0625rem var(--sans);border-radius:3px;text-align:center;transition:transform .08s}
.btn:active{transform:translateY(2px)}
.btn.line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.warn{background:none;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn[disabled]{opacity:.45;cursor:default}
.linkbtn{min-height:44px;display:inline-flex;align-items:center;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}.row>*{flex:1}

/* Ana ekran */
.who{display:flex;align-items:center;gap:10px;min-height:44px}
.who .lv{font:700 .9375rem var(--type);text-align:right;line-height:1.1}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;flex:none}
.avatar svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.today{display:block;width:100%;background:var(--amber);color:var(--on-amber);padding:18px 18px 16px;border-radius:3px;position:relative;margin-bottom:6px}
.today:active{transform:translateY(2px)}
.today b{display:block;font:800 clamp(1.85rem,9vw,2.5rem)/1 var(--sans);text-transform:uppercase;letter-spacing:-.01em;margin:6px 0 12px}
.today span{font:700 .9375rem var(--type)}
.tick7{display:flex;gap:5px;height:10px;align-items:flex-end}
.tick7 i{flex:1;height:100%;background:rgba(28,26,23,.22)}
.tick7 i.on{background:#1C1A17}
.modes{list-style:none;margin:0;padding:0}
.modes li{border-bottom:1px solid var(--rule)}
.mode{display:flex;align-items:center;width:100%;gap:14px;min-height:72px;padding:10px 0}
.mode:active{background:var(--sheet)}
.mode .gl{width:30px;height:30px;flex:none}
.mode .gl svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:square}
.mode b{display:block;font:800 1.1875rem/1.15 var(--sans);color:var(--ink)}
.mode span{display:block;color:var(--ink2);font-size:.9375rem}
.tabs{display:flex;border-top:1.5px solid var(--ink);margin:0 -18px -12px;padding:0 18px calc(var(--sab))}
.tabs button{flex:1;min-height:54px;text-align:center;font:700 .9375rem var(--type);color:var(--ink2)}
.tabs button[aria-current="page"]{color:var(--ink);box-shadow:inset 0 3px 0 var(--red)}

/* Maç */
.match{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.hud{display:flex;align-items:center;gap:10px;min-height:44px}
.hud .prog{font:700 .9375rem var(--type);white-space:nowrap}
.scores{flex:1;display:flex;justify-content:flex-end;gap:14px;min-width:0}
.sc{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.sc small{font-size:.75rem;color:var(--ink2);max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc b{font:700 1.3125rem/1 var(--type);font-variant-numeric:tabular-nums}
.sc.done small::after{content:" ✓"}
.sc.off small{text-decoration:line-through}
/* Ölçek: sürenin göstergesi kanalın harita ölçeğidir */
.ruler{position:relative;height:30px;flex:none}
.ruler .ticks{position:absolute;inset:auto 0 0 0;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 10%),repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 2%);background-size:100% 100%,100% 7px;background-repeat:no-repeat;background-position:0 0,0 0;border-right:1.5px solid var(--ink)}
.ruler .fill{position:absolute;left:0;right:0;top:0;height:13px;background:var(--amber);transform-origin:left;will-change:transform}
.ruler.hot .fill{background:var(--red)}
.ruler .sec{position:absolute;right:0;top:-1px;font:700 .8125rem/15px var(--type);padding:0 3px;background:var(--paper);color:var(--ink)}
.qcard{flex:none;min-height:clamp(120px,24vh,220px);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:6px 0}
.qmeta{font:700 .875rem var(--type);color:var(--ink2);display:flex;justify-content:space-between;gap:10px}
.qtext{font:800 clamp(1.25rem,5.6vw,1.625rem)/1.2 var(--sans);text-wrap:pretty;overflow-wrap:anywhere}
.qcard.in{animation:slam .26s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes slam{from{opacity:0;transform:translateX(18px)}}
.opts{display:flex;flex-direction:column;gap:8px;flex:none}
.opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:9px 14px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px;font:700 1.0625rem/1.2 var(--sans);overflow-wrap:anywhere;transition:transform .08s,background .12s,opacity .18s}
.opt i{font:700 1rem var(--type);font-style:normal;width:1ch;flex:none;color:var(--ink2)}
.opt:not([disabled]):active{transform:scale(.985)}
.opt.chosen{background:var(--ink);color:var(--paper)}
.opt.chosen i{color:inherit}
.opt.removed{opacity:.2}
.opt.right{background:var(--good-bg);color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--good)}
.opt.wrong{background:var(--bad-bg);color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--red)}
.opt.right i,.opt.wrong i{color:var(--ink)}
.opt[disabled]{cursor:default}
.opt .mk{margin-left:auto;font:700 .8125rem var(--type);flex:none}
.opt.right .mk{color:var(--good)}.opt.wrong .mk{color:var(--red)}
.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.stamp{position:fixed;left:50%;top:38%;z-index:30;pointer-events:none;padding:6px 16px;border:4px solid currentColor;border-radius:4px;font:700 2.25rem/1 var(--type);background:color-mix(in srgb,var(--paper) 80%,transparent);transform:translate(-50%,-50%) rotate(-7deg);animation:stamp .34s cubic-bezier(.2,1.4,.4,1) both}
.stamp.good{color:var(--good)}.stamp.bad{color:var(--red)}
@keyframes stamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(2)}}
.pts{position:fixed;right:24px;top:calc(var(--sat) + 64px);z-index:30;font:700 1.25rem var(--type);color:var(--good);pointer-events:none;animation:rise .9s ease-out both}
@keyframes rise{to{opacity:0;transform:translateY(-22px)}}
.jokers{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.jok{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 .875rem/1.1 var(--type);box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:3px;padding:2px 4px}
.jok[disabled]{opacity:.35;text-decoration:line-through;cursor:default}
.explain{font-size:.9375rem;line-height:1.35;padding:8px 0 0;border-top:1px solid var(--rule);margin-top:auto;user-select:text;-webkit-user-select:text}
.count{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.count b{font:700 6rem/1 var(--type)}
.vs{display:flex;align-items:center;gap:14px;font:800 1.25rem var(--sans)}
.vs span{font:700 1rem var(--type);color:var(--red)}

/* Rakip arama: ölçek taraması */
.search{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}
.search h2{font:800 2rem/1.1 var(--sans)}
.sweep{height:30px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 10%)}
.sweep::after{content:"";position:absolute;top:0;bottom:0;width:22%;background:var(--amber);mix-blend-mode:multiply;animation:sweep 1.3s ease-in-out infinite alternate}
@keyframes sweep{from{left:0}to{left:78%}}
.found{animation:found .4s cubic-bezier(.2,1.3,.4,1) both}
@keyframes found{from{opacity:0;transform:scale(.92)}}

/* Sonuç */
.result h2{font:800 clamp(2.5rem,13vw,3.5rem)/1 var(--sans);text-transform:uppercase;margin:14px 0 6px;letter-spacing:-.01em}
.result h2.win{color:var(--ink);box-shadow:inset 0 -.32em 0 var(--amber);display:inline;padding:0 .05em}
.bigscore{font:700 clamp(3rem,16vw,4.25rem)/1 var(--type);font-variant-numeric:tabular-nums;margin:16px 0 2px}
.scale-result{position:relative;height:64px;margin:16px 0 8px}
.scale-result .line{position:absolute;left:0;right:0;top:40px;height:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 10%);border-top:1.5px solid var(--ink)}
.scale-result .pin{position:absolute;top:0;transform:translateX(-50%);font:700 .75rem/1.1 var(--type);text-align:center;white-space:nowrap;transition:left .9s cubic-bezier(.2,.8,.2,1)}
.scale-result .pin::after{content:"";display:block;width:3px;height:14px;background:currentColor;margin:2px auto 0}
.scale-result .pin.me{color:var(--red)}
.rank{list-style:none;margin:8px 0;padding:0}
.rank li{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--rule)}
.rank .pos{font:700 1rem var(--type);width:2.4ch;text-align:right;flex:none}
.rank .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.rank .pt{font:700 1.0625rem var(--type);font-variant-numeric:tabular-nums}
.rank li.me{box-shadow:inset 3px 0 0 var(--red);padding-left:9px}
.gain{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font:700 .9375rem var(--type)}
.levelbar{height:8px;background:var(--rule);overflow:hidden}
.levelbar i{display:block;height:100%;background:var(--amber);transform-origin:left;animation:grow .9s ease-out both}
@keyframes grow{from{transform:scaleX(0)}}
.badge-new{padding:12px 14px;background:var(--amber);color:var(--on-amber);font-weight:800;border-radius:3px;animation:found .4s both;margin:8px 0}

/* Listeler */
.seg{display:flex;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px;margin-bottom:10px}
.seg button{flex:1;min-height:44px;text-align:center;font:700 .9375rem var(--type)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat{min-height:66px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px;font:800 1rem/1.15 var(--sans);background:var(--sheet)}
.cat[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cat.all{grid-column:1/-1;background:var(--amber);color:var(--on-amber);box-shadow:none;min-height:58px}
.code{font:700 clamp(2.5rem,15vw,3.75rem)/1 var(--type);letter-spacing:.1em;user-select:text;-webkit-user-select:text}
.section{font:700 1rem var(--type);margin:20px 0 6px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 0}
.statgrid b{display:block;font:700 1.5rem var(--type)}
.statgrid span{font-size:.8125rem;color:var(--ink2)}
.catbar{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.catbar .track{grid-column:1/-1;height:6px;background:var(--rule)}.catbar .track i{display:block;height:100%;background:var(--ink)}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bdg{padding:10px;box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:3px;font-size:.875rem;line-height:1.2}
.bdg b{display:block;font-weight:800;margin-bottom:2px}
.bdg.on{box-shadow:inset 0 0 0 2px var(--ink);background:var(--sheet)}
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatars button{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--rule)}
.avatars button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--red)}
.avatars svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;border-bottom:1px solid var(--rule);width:100%}
.setting em{font:700 .9375rem var(--type);font-style:normal;color:var(--ink2)}
.empty{padding:28px 0;color:var(--ink2);line-height:1.45}
.bracket{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.bracket .col{min-width:150px;display:flex;flex-direction:column;gap:8px;justify-content:space-around}
.bracket .m{box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:3px;font-size:.875rem}
.bracket .m div{padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bracket .m .w{font-weight:800;background:var(--sheet)}

/* Bildirimler */
#net-banner{position:fixed;left:0;right:0;top:0;padding:calc(var(--sat) + 6px) 16px 6px;background:var(--red);color:#fff;text-align:center;font:700 .875rem var(--type);z-index:50}
#toast{position:fixed;left:50%;bottom:calc(var(--sab) + 76px);transform:translateX(-50%);max-width:88%;padding:11px 16px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.9375rem;border-radius:3px;z-index:60;animation:enter .2s both}
.modal{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);z-index:40;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:560px;max-height:88%;overflow:auto;background:var(--paper);padding:20px 18px calc(var(--sab) + 18px);display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--ink)}
.sheet h2{font:800 1.375rem/1.15 var(--sans)}
.doc{user-select:text;-webkit-user-select:text;line-height:1.5;font-size:.9375rem}
.doc h3{font:700 1rem var(--type);margin:14px 0 4px}

/* Son saniye gerilimi ve düşük kalite */
.tense .ruler{animation:tense .5s ease-in-out infinite alternate}
@keyframes tense{to{transform:scaleY(1.22)}}
:root[data-fx="low"] .qcard.in,:root[data-fx="low"] .tense .ruler,:root[data-fx="low"] .sweep::after{animation:none}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-height:600px){.match{gap:5px}.hud{min-height:40px}.ruler{height:24px}.qmeta{font-size:.75rem}.qcard{min-height:0!important;padding:0}.qtext{font-size:1rem!important}.opt{min-height:44px!important;padding:3px 10px!important;font-size:.875rem!important;line-height:1.1}.opts{gap:4px!important}.jok{font-size:.75rem}}
@media (max-height:640px){.qcard{min-height:92px}.opt{min-height:48px;padding:6px 12px;font-size:1rem}.opts{gap:6px}.qtext{font-size:1.125rem}.jok{min-height:44px}.mode{min-height:60px}.today{padding:12px 14px}.today b{font-size:1.5rem;margin:4px 0 6px}}
@media (min-width:700px) and (min-height:900px){.qtext{font-size:2rem}}

/* Giriş */
.intro.auth{gap:16px;overflow-y:auto}
.auth-h{font:800 1.75rem/1.1 var(--sans)}
.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.codein{font:700 1.75rem var(--type)!important;letter-spacing:.3em;text-align:center}

/* Soru sonu: zirveye giden patika. Sahne iki temada da aynı akşam ışığındadır. */
.board{position:fixed;inset:0;z-index:5;gap:6px;padding:calc(var(--sat) + 10px) calc(var(--sar) + 18px) calc(var(--sab) + 14px) calc(var(--sal) + 18px);background:#121013;color:#EFE9DC;--ink:#EFE9DC;--ink2:#CFC8B9;--rule:rgba(239,233,220,.2);--paper:#121013;--red:#EF5A50}
.board>*{position:relative}
.board .hud{gap:10px;z-index:6}
.board-title{font:800 clamp(1.125rem,5.4vw,1.5rem)/1.1 var(--sans);margin-left:auto;outline:none;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.spacer{flex:1;min-height:0}
.climb{position:absolute!important;inset:0;overflow:hidden}
.climb svg{position:absolute;inset:0;display:block}
.ctr{fill:none;stroke:#EFE9DC;stroke-width:1}
.trail-rest{fill:none;stroke:rgba(239,233,220,.3);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.trail-on{fill:none;stroke:url(#g-trail);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,176,32,.55))}
.pole{stroke:#EFE9DC;stroke-width:2}.pennant{fill:#EF5A50}.pole-b{fill:#EFE9DC}
.summit{position:absolute;font:700 .75rem var(--type);color:#EFE9DC;text-shadow:0 1px 4px #000}
.cl{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.cl .dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#EFE9DC;color:#1C1A17;box-shadow:0 2px 10px rgba(0,0,0,.65);font:700 .875rem var(--type);font-style:normal}
.cl.me .dot{left:-16px;top:-16px;width:32px;height:32px;background:#FFB020;box-shadow:0 0 0 3px #121013,0 0 0 5px #FFB020,0 0 22px rgba(255,176,32,.75)}
.cl.off{opacity:.55}
.stem{position:absolute;left:-.5px;width:1px;background:rgba(239,233,220,.45)}
.lb{position:absolute;left:0;text-align:center;display:block;line-height:1.1;text-shadow:0 1px 6px rgba(0,0,0,.95),0 0 2px #000}
.lb.up{padding-bottom:1px;font-weight:800;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb.down{display:flex;flex-direction:column;align-items:center}
.lb .total{font:700 1.125rem/1.1 var(--type);font-style:normal;font-variant-numeric:tabular-nums}
.lb small{font:700 .75rem/1.1 var(--type);color:#CFC8B9;white-space:nowrap}
.lb small.gain-d{color:#FFC861}
.cl.me .lb.up{color:#FFC861}
.board.dense .cl .dot{left:-11px;top:-11px;width:22px;height:22px;font-size:.6875rem}
.board.dense .cl.me .dot{left:-12px;top:-12px;width:24px;height:24px}
.mini{list-style:none;margin:0;padding:6px 10px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px;flex:none;background:rgba(13,11,10,.72);border-radius:3px}
.mini li{display:flex;align-items:center;gap:6px;min-height:28px;border-bottom:1px solid var(--rule);font-size:.875rem;min-width:0}
.mini .pos{font:700 .8125rem var(--type);width:2.2ch;text-align:right;flex:none}
.mini .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.mini .t{font-weight:700;font-variant-numeric:tabular-nums}
.mini li.me .nm{color:#FFC861}
.nextq{display:flex;flex-direction:column;gap:5px;padding-top:4px;flex:none;text-shadow:0 1px 4px #000}
.nextbar{height:6px;background:rgba(239,233,220,.2);overflow:hidden;border-radius:3px}
.nextbar i{display:block;height:100%;background:#FFB020;transform-origin:left;animation:drain linear both}
@keyframes drain{to{transform:scaleX(0)}}

/* Seviye ve kilitler */
.locked{color:var(--ink2)}
.cat.locked{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule)}
.avatars .locked svg{opacity:.35}
.cat small{display:block;font:700 .75rem var(--type);margin-top:4px}
.next-unlock{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:58px;padding:9px 12px;margin-top:12px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px}
.next-unlock small{display:block;color:var(--ink2);font-size:.8125rem}.next-unlock b{font-weight:800}
.xpline{margin:-4px 0 8px}
.lvroad{list-style:none;margin:14px 0;padding:0}
.lvroad li{display:flex;align-items:center;gap:12px;min-height:62px;border-bottom:1px solid var(--rule);opacity:.72}
.lvroad li.on{opacity:1}
.lvn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 1rem var(--type);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lvroad li.on .lvn{background:var(--amber);color:var(--on-amber);box-shadow:none}
.lvroad li>span:nth-child(2){flex:1;min-width:0}.lvroad b{display:block;font-weight:800}.lvroad small{color:var(--ink2);font-size:.8125rem}
.lvroad em{font:700 .8125rem var(--type);font-style:normal;color:var(--ink2)}

/* Çerçeveler */
.avatar{position:relative}
.avatar.fr{box-shadow:none;background:var(--sheet)}
.avatar.fr::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3.5px;background:var(--fr);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fr-bronz{--fr:conic-gradient(#8A5526,#D79A5F,#7A4A20,#C98A4E,#8A5526)}
.fr-gumus{--fr:conic-gradient(#8F979E,#F2F5F7,#A9B1B8,#E4E8EB,#8F979E)}
.fr-altin{--fr:conic-gradient(#B8860B,#FFE27A,#C99A12,#FFF0A8,#B8860B)}
.fr-elmas{--fr:conic-gradient(#4FC3F7,#E6FBFF,#7C8CFF,#D5F6FF,#39B6E6,#F2FEFF,#4FC3F7)}
.fr-tacli-elmas{--fr:conic-gradient(#4FC3F7,#E6FBFF,#7C8CFF,#FFE27A,#39B6E6,#F2FEFF,#4FC3F7)}
.fr-hafta-1{--fr:repeating-conic-gradient(#FFB020 0 30deg,#C4302B 30deg 60deg)}
.fr-hafta-3{--fr:repeating-conic-gradient(#FFB020 0 30deg,#1C1A17 30deg 60deg)}
.fr-hafta-10{--fr:repeating-conic-gradient(#FFB020 0 18deg,transparent 18deg 36deg)}
.fr-elmas,.fr-tacli-elmas{filter:drop-shadow(0 0 4px rgba(79,195,247,.65))}
.avatar .crown{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:24px!important;height:14px!important;fill:#FFC93C!important;stroke:#8A6200!important;stroke-width:1!important;z-index:1}
.rank .avatar,.winner .avatar{margin:3px}
.winner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--amber);color:var(--on-amber);border-radius:3px;margin-top:6px}
.winner-l{display:flex;align-items:center;gap:12px;min-width:0}
.winner small{display:block;font:700 .8125rem var(--type)}.winner b{display:block;font:800 1.25rem/1.15 var(--sans);overflow-wrap:anywhere}
.winner .num{font-size:1.25rem}
.winner .avatar{--ink:#1C1A17;background:#F8F4EA}
.board-note{margin:8px 0}
.frames{list-style:none;margin:0;padding:0}
.frame-row{display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--rule)}
.frame-row b{display:block;font-weight:800}.frame-row small{color:var(--ink2)}
.sheet h3.section{margin:10px 0 2px}
.award-show{display:grid;place-items:center;padding:22px 0 8px}
.award-show .avatar{width:84px;height:84px;animation:found .5s cubic-bezier(.2,1.3,.4,1) both}.award-show .avatar>svg:not(.crown){width:48px;height:48px}.award-show .crown{top:-26px;width:44px!important;height:26px!important}
.board .cl .dot{z-index:1}

.who .avatar{margin:8px 3px 0 0}
.statgrid b{font-size:1.25rem;white-space:nowrap}


/* ===== Premium katman: lobi kâğıt, maç gece sahnesi ===== */
:root{--r-s:10px;--r-m:14px;--r-l:18px;--lift:0 1px 2px rgba(28,26,23,.08),0 8px 24px rgba(28,26,23,.09);--press:cubic-bezier(.2,.8,.2,1)}
.btn{border-radius:var(--r-m);box-shadow:0 2px 0 rgba(0,0,0,.25),0 8px 20px rgba(28,26,23,.14);transition:transform .1s var(--press),box-shadow .1s,filter .15s}
.btn:active{transform:translateY(2px) scale(.99);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn.line,.btn.warn{box-shadow:inset 0 0 0 1.5px currentColor}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.field input,.field select{border-radius:var(--r-s);border-width:1px;transition:box-shadow .15s,border-color .15s}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,176,32,.28)}
.seg{border-radius:var(--r-s);box-shadow:none;background:var(--sheet);padding:3px;gap:2px}
.seg button{border-radius:8px;min-height:40px;transition:background .15s,color .15s}
.cat{border-radius:var(--r-m);box-shadow:var(--lift);transition:transform .1s var(--press)}
.cat:active{transform:scale(.97)}
.cat.all{border-radius:var(--r-m);box-shadow:0 8px 20px rgba(232,144,26,.3)}
.cat.locked{box-shadow:inset 0 0 0 1px var(--rule)}
.jok{border-radius:var(--r-s)}
.sheet{border-top:0;border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35);animation:sheet-up .24s var(--press) both}
@keyframes sheet-up{from{transform:translateY(24px);opacity:.4}}
.bdg,.next-unlock,.winner,.empty-box{border-radius:var(--r-m)}
#toast{border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:11px 18px}
.lvstrip{height:4px;border-radius:2px;background:var(--rule);overflow:hidden;margin:-4px 0 12px;flex:none}
.lvstrip i{display:block;height:100%;background:var(--amber)}

/* Ana ekran */
.today{overflow:hidden;background:linear-gradient(180deg,#121013 0%,#2a1c14 58%,#5a3518 100%);color:#EFE9DC;border-radius:var(--r-l);padding:18px 18px 16px;box-shadow:0 14px 34px rgba(60,35,10,.32);margin-bottom:10px;transition:transform .12s var(--press)}
.today:active{transform:scale(.985)}
.today>*{position:relative}
.today-sun{position:absolute!important;right:-46px;top:-40px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,122,.9) 0,rgba(255,176,32,.55) 14%,rgba(232,112,26,.18) 42%,transparent 70%)}
.today-k{font:700 .875rem var(--type);color:#FFC861}
.today b{color:#EFE9DC;margin:6px 0 14px;font-size:clamp(1.75rem,8.4vw,2.375rem)}
.tick7{height:6px;gap:4px}.tick7 i{background:rgba(239,233,220,.2);border-radius:3px}.tick7 i.on{background:#FFB020}
.today-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font:700 .875rem var(--type);color:#E8E1D2}
.today-cta{flex:none;font:800 .9375rem var(--sans);font-style:normal;padding:9px 18px;border-radius:999px;background:#FFB020;color:#1C1A17;box-shadow:0 4px 16px rgba(255,176,32,.45)}
.modes{display:flex;flex-direction:column;gap:8px}
.modes li{border:0}
.mode{background:var(--sheet);border-radius:var(--r-m);padding:11px 12px;min-height:68px;box-shadow:var(--lift);transition:transform .1s var(--press)}
.mode:active{transform:scale(.985);background:var(--sheet)}
.mode .gl{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--paper)}
.mode .gl svg{width:24px;height:24px}
.gl-duel{background:rgba(196,48,43,.13)!important}.gl-duel svg{stroke:var(--red)!important}
.gl-quick{background:rgba(255,176,32,.2)!important}.gl-quick svg{stroke:#B97708!important}
.mode b{font-size:1.0625rem}.mode span span{font-size:.875rem}
.tabs{border-top:1px solid var(--rule)}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:700 .75rem var(--sans);min-height:56px;transition:color .15s}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current="page"]{box-shadow:none;color:var(--ink)}
.tabs button[aria-current="page"] svg{stroke:var(--red)}

/* Yükleme ve boş durum */
.skel{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.skel i{display:block;height:56px;border-radius:var(--r-s);background:linear-gradient(90deg,var(--sheet) 25%,var(--rule) 50%,var(--sheet) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.empty-box{display:flex;flex-direction:column;gap:8px;padding:22px 18px;margin-top:10px;background:var(--sheet);text-align:center}
.empty-box b{font-size:1.0625rem;font-weight:800}.empty-box p{color:var(--ink2);margin-bottom:6px}

/* Gece sahnesi: açılış, giriş, arama ve maç */
.arena{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding:calc(var(--sat) + 10px) calc(var(--sar) + 18px) calc(var(--sab) + 14px) calc(var(--sal) + 18px);overflow-y:auto;
  --ink:#EFE9DC;--ink2:#C9C2B3;--paper:#141113;--sheet:#26201B;--rule:rgba(239,233,220,.17);--red:#EF5A50;--good:#62D3A6;--good-bg:#173A2D;--bad-bg:#47201C;--logo:url(../assets/megaskala-logo-acik.svg);--lift:0 2px 12px rgba(0,0,0,.35);
  color:var(--ink);color-scheme:dark;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath fill='%23221813' d='M0 120 40 96 85 118 140 74 190 110 245 62 300 104 350 78 400 100V200H0z'/%3E%3Cpath fill='%2316110f' d='M0 160 60 132 120 156 190 124 260 158 330 130 400 150V200H0z'/%3E%3C/svg%3E") bottom/100% 34% no-repeat,radial-gradient(90% 46% at 82% 74%,rgba(232,120,26,.3),transparent 70%),linear-gradient(180deg,#100E11 0%,#1A1412 60%,#2A1C14 100%)}
.arena>*{width:100%;max-width:560px;flex:none}
.arena>.match,.arena>.count,.arena>.search,.arena>.intro,.arena>.scroll{flex:1;min-height:0}
.arena .muted{color:var(--ink2)}
.arena .btn{background:linear-gradient(180deg,#FFC24A,#F5A313);color:#1C1A17;box-shadow:0 2px 0 #A86C05,0 10px 26px rgba(255,176,32,.28)}
.arena .btn.line{background:rgba(239,233,220,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(239,233,220,.35)}
.arena .field input{background:rgba(239,233,220,.07);border-color:rgba(239,233,220,.3);color:var(--ink)}
.arena .wordmark{background-image:url(../assets/megaskala-logo-acik.svg)}
.arena .err{color:#FF9A91}
.arena .scroll{margin:0;padding:0 0 16px;width:100%}
.auth-h{color:var(--ink)}
.codein{border-radius:var(--r-m)!important}

/* Maç */
.match{gap:12px;overflow-y:auto;padding-bottom:2px}
.hud .prog{padding:5px 11px;border-radius:999px;background:rgba(239,233,220,.1);font-size:.875rem}
.sc{padding:4px 11px;border-radius:12px;background:rgba(239,233,220,.08)}
.sc b{font-size:1.1875rem}
.sc small{color:var(--ink2)}
.ruler{height:26px}
.ruler .fill{height:10px;border-radius:5px;background:linear-gradient(90deg,#E8901A,#FFD27A);box-shadow:0 0 12px rgba(255,176,32,.4)}
.ruler.hot .fill{background:linear-gradient(90deg,#C4302B,#EF5A50);box-shadow:0 0 14px rgba(239,90,80,.55)}
.ruler .ticks{height:11px;opacity:.55}
.ruler .sec{background:none;top:-3px;font-size:.875rem;color:var(--ink);text-shadow:0 1px 3px #000}
.qcard{flex:1 1 auto;min-height:96px;padding:6px 2px;justify-content:center}
.qmeta{color:#FFC861}
.qmeta span:last-child{color:var(--ink2);letter-spacing:1px}
.qtext{font-size:clamp(1.375rem,6vw,1.75rem);line-height:1.18}
.opts{gap:9px}
.opt{border-radius:var(--r-m);background:rgba(239,233,220,.07);box-shadow:inset 0 0 0 1px rgba(239,233,220,.2),0 3px 10px rgba(0,0,0,.25);min-height:58px;padding:9px 12px;transition:transform .09s var(--press),background .14s,box-shadow .14s,opacity .2s}
.opt>i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(239,233,220,.12);color:var(--ink);font-size:.875rem;flex:none}
.opt:not([disabled]):active{transform:scale(.975);background:rgba(239,233,220,.14)}
.opt.chosen{background:rgba(255,176,32,.2);color:var(--ink);box-shadow:inset 0 0 0 2px #FFB020}
.opt.chosen>i{background:#FFB020;color:#1C1A17}
.opt.right{background:linear-gradient(90deg,#1B5A43,#17402F);box-shadow:inset 0 0 0 2px var(--good),0 0 24px rgba(98,211,166,.32);animation:right-pop .34s var(--press)}
.opt.right>i{background:var(--good);color:#0D2A1F}
.opt.wrong{background:linear-gradient(90deg,#63261F,#451E1A);box-shadow:inset 0 0 0 2px var(--red)}
.opt.wrong>i{background:var(--red);color:#2A0B08}
.opt.removed{opacity:.28}
@keyframes right-pop{40%{transform:scale(1.025)}}
.stamp{top:22%;font-size:1.75rem;padding:5px 14px;background:rgba(20,17,19,.9);border-width:3px;z-index:30}
.stamp.good{color:#62D3A6}.stamp.bad{color:#EF5A50}
.pts{color:#FFC861;font-size:1.5rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.streak{position:fixed;left:50%;top:calc(22% + 58px);transform:translateX(-50%);z-index:30;padding:6px 14px;border-radius:999px;background:#FFB020;color:#1C1A17;font:800 .875rem var(--sans);white-space:nowrap;pointer-events:none;animation:found .35s both}
.jokers{gap:7px;padding-top:0;margin-top:0;flex:none}
.jok{box-shadow:inset 0 0 0 1px rgba(239,233,220,.3);background:rgba(239,233,220,.05);transition:transform .09s var(--press),background .14s}
.jok:not([disabled]):active{transform:scale(.96);background:rgba(255,176,32,.2)}
.explain{flex:none;margin-top:0;border-top-color:rgba(239,233,220,.2);color:var(--ink2);min-height:46px}
.count{gap:22px}
.cnt{font-size:clamp(6rem,30vw,9rem)!important;color:#FFC861;text-shadow:0 0 36px rgba(255,176,32,.55)}
.cnt.pop{animation:cnt-pop .5s var(--press)}
@keyframes cnt-pop{from{transform:scale(1.5);opacity:0}}
.vs{flex-direction:column;gap:4px;font-size:1.5rem;text-align:center}.vs span{color:#FFC861}
.search h2{color:var(--ink)}
.sweep{height:6px;border-radius:3px;background:rgba(239,233,220,.14);overflow:hidden}
.sweep::after{display:none}
.sweep i{position:absolute;top:0;bottom:0;width:30%;border-radius:3px;background:linear-gradient(90deg,#E8901A,#FFD27A);animation:sweep 1.2s ease-in-out infinite alternate}
.search{gap:20px}

/* Sonuç */
.result{padding-top:8px!important}
.result h2{color:var(--ink);text-shadow:0 0 28px rgba(255,176,32,.25)}
.result h2.win{box-shadow:none;color:#FFC861;text-shadow:0 0 34px rgba(255,176,32,.6)}
.bigscore{color:var(--ink)}
.scale-result .line{border-top-color:rgba(239,233,220,.45);background:repeating-linear-gradient(90deg,rgba(239,233,220,.45) 0 1.5px,transparent 1.5px 10%)}
.scale-result .pin.me{color:#FFC861}
.arena .rank{background:rgba(239,233,220,.06);border-radius:var(--r-m);padding:2px 12px}
.arena .rank li:last-child{border-bottom:0}
.arena .rank li.me{box-shadow:none;padding-left:0}
.arena .rank li.me .nm,.arena .rank li.me .pt{color:#FFC861}
.arena .avatar{background:#2F2822;box-shadow:inset 0 0 0 1.5px rgba(239,233,220,.5)}
.arena .avatar svg{stroke:#EFE9DC}
.arena .avatar.fr{box-shadow:none}
.arena .badge-new{background:linear-gradient(90deg,#FFC24A,#F5A313);border-radius:var(--r-m);color:#1C1A17}
.arena .levelbar{border-radius:4px;background:rgba(239,233,220,.17)}.levelbar i{border-radius:4px;background:linear-gradient(90deg,#E8901A,#FFD27A)}
.confetti{position:fixed;inset:0;z-index:35;pointer-events:none}

/* Fare ile kullanımda belirgin tepki */
@media (hover:hover){.btn:hover{filter:brightness(1.06)}.mode:hover,.cat:hover{transform:translateY(-1px)}.opt:not([disabled]):hover{background:rgba(239,233,220,.13)}.jok:not([disabled]):hover{background:rgba(239,233,220,.12)}}

/* Tablet ve masaüstü */
@media (min-width:700px){
  body{background:#141113}
  #app{max-width:600px;background:var(--paper);box-shadow:0 0 60px rgba(0,0,0,.45)}
  .arena>*{max-width:640px}
  .qtext{font-size:2.125rem}.opt{min-height:66px;font-size:1.1875rem}
  .board>*{max-width:none}.board>.hud,.board>.nextq,.board>.mini{max-width:640px;align-self:center}
}
@media (max-height:600px){.qcard{flex:0 1 auto}.opt>i{width:24px;height:24px;font-size:.75rem}.hud .prog{padding:3px 8px}.match{gap:5px}.sc{padding:2px 8px}.sc b{font-size:1rem}.explain{min-height:0;font-size:.8125rem}}
.board{background:#121013}
.arena{animation:none}
.arena>*{animation:enter .22s ease-out both}
.arena>.board-none{animation:none}
.board>.hud,.board>.nextq,.board>.mini{width:100%}

/* Soru ekranı: basılı kâğıt. Sahne iki temada da aynıdır. */
.kagit{
  --ink:#1C1A17;--ink2:#5F584F;--paper:#EFE9DC;--sheet:#FBF8F1;--rule:rgba(28,26,23,.16);--red:#B3261F;--good:#0F6B4C;--good-bg:#0F6B4C;--bad-bg:#B3261F;--logo:url(../assets/megaskala-logo-koyu.svg);--lift:0 1px 2px rgba(60,48,28,.1);
  color:var(--ink);color-scheme:light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .19 0 0 0 0 .11 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 70% at 50% 0%,#F7F2E7 0%,#EFE9DC 58%,#E4DCCB 100%)}
.kagit .match{gap:14px}
.kagit .back{color:var(--ink)}
.kagit .hud .prog{background:none;box-shadow:inset 0 0 0 1px rgba(28,26,23,.32);letter-spacing:.5px}
.kagit .sc{background:var(--sheet);box-shadow:inset 0 0 0 1px rgba(28,26,23,.1),0 1px 2px rgba(60,48,28,.1);padding:4px 12px}
.kagit .sc b{color:var(--ink)}
.kagit .sc.done small::after{color:var(--good);font-weight:700}
.kagit .ruler{height:28px}
.kagit .ruler::before{content:"";position:absolute;left:0;right:46px;top:1px;height:8px;border-radius:4px;background:rgba(28,26,23,.1)}
.kagit .ruler .fill{right:46px;top:1px;height:8px;border-radius:4px;background:linear-gradient(90deg,#E8901A,#FFB020);box-shadow:none}
.kagit .ruler.hot .fill{background:linear-gradient(90deg,#8F1C16,#C4302B);box-shadow:none}
.kagit .ruler .ticks{right:46px;height:10px;opacity:.5}
.kagit .ruler .sec{top:0;min-width:36px;height:28px;padding:0 6px;border-radius:7px;background:var(--ink);color:#EFE9DC;font-size:1rem;line-height:28px;text-align:center;text-shadow:none;font-variant-numeric:tabular-nums}
.kagit .ruler .sec:empty{display:none}
.kagit .ruler.hot .sec{background:#B3261F;color:#fff}
.kagit .tense .ruler{animation:none}
.kagit .tense .sec{animation:sec-beat .5s ease-in-out infinite alternate}
@keyframes sec-beat{to{transform:scale(1.1)}}
:root[data-fx="low"] .kagit .tense .sec{animation:none}
.kagit .qcard{gap:12px;padding:8px 0}
.kagit .qmeta{align-items:center;justify-content:flex-end;padding-bottom:9px;border-bottom:1px solid rgba(28,26,23,.2);color:var(--red);font-size:.875rem;letter-spacing:.2px}
.kagit .qmeta span:last-child{color:var(--ink2)}
.kagit .qtext{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.kagit .qtext.uzun{font-size:clamp(1.5rem,6.6vw,1.875rem);line-height:1.15;letter-spacing:-.01em}
.kagit .qtext.cok-uzun{font-size:clamp(1.25rem,5.4vw,1.5rem);line-height:1.2;letter-spacing:0}
.kagit .opts{gap:10px}
.kagit .opt{min-height:60px;padding:9px 16px 9px 12px;border-radius:14px;background:var(--sheet);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px rgba(28,26,23,.14),0 1px 1px rgba(60,48,28,.1),0 6px 16px -6px rgba(60,48,28,.24)}
.kagit .opt>i{width:34px;height:34px;background:var(--ink);color:#EFE9DC;font-size:.9375rem}
.kagit .opt:not([disabled]):active{background:#F1EBDD;transform:scale(.98)}
.kagit .opt.chosen{background:var(--ink);color:#EFE9DC;box-shadow:0 8px 20px -6px rgba(28,26,23,.55)}
.kagit .opt.chosen>i{background:#FFB020;color:#1C1A17}
.kagit .opt.right{background:#0F6B4C;color:#fff;box-shadow:0 8px 22px -6px rgba(15,107,76,.6)}
.kagit .opt.right>i{background:#fff;color:#0F6B4C}
.kagit .opt.wrong{background:#B3261F;color:#fff;box-shadow:0 8px 22px -6px rgba(179,38,31,.5)}
.kagit .opt.wrong>i{background:#fff;color:#B3261F}
.kagit .opt.right .mk,.kagit .opt.wrong .mk{color:#fff}
.kagit .opt.removed{opacity:.32}
.kagit .jokers{gap:8px}
.kagit .jok{min-height:46px;border-radius:11px;background:none;box-shadow:inset 0 0 0 1px rgba(28,26,23,.34);color:var(--ink);font-size:.8125rem}
.kagit .jok:not([disabled]):active{background:rgba(255,176,32,.28)}
.kagit .explain{color:#3F3A33;border-top-color:rgba(28,26,23,.2);font-size:1rem}
.stamp{background:#FBF8F1;box-shadow:0 10px 26px rgba(60,48,28,.28);white-space:nowrap}
.stamp.good{color:#0F6B4C}.stamp.bad{color:#B3261F}
.pts{padding:3px 11px;border-radius:999px;background:#1C1A17;color:#FFC861;text-shadow:none}
@media (hover:hover){.kagit .opt:not([disabled]):hover{background:#fff}.kagit .jok:not([disabled]):hover{background:rgba(28,26,23,.06)}}
@media (min-width:700px){.kagit .qtext{font-size:2.625rem}.kagit .qtext.uzun{font-size:2.125rem}.kagit .qtext.cok-uzun{font-size:1.75rem}.kagit .opt{min-height:68px}}
@media (max-height:700px){.kagit .match{gap:9px}.kagit .qtext{font-size:1.5rem!important}.kagit .qtext.uzun{font-size:1.25rem!important}.kagit .qtext.cok-uzun{font-size:1.0625rem!important}.kagit .opt{min-height:50px;padding:6px 12px 6px 9px}.kagit .opt>i{width:28px;height:28px}.kagit .opts{gap:7px}.kagit .jok{min-height:44px}}
@media (max-height:600px){.kagit .qcard{flex:1 1 auto}.kagit .qtext{font-size:1.25rem!important}.kagit .qtext.uzun{font-size:1.0625rem!important}.kagit .qtext.cok-uzun{font-size:.9375rem!important}.kagit .qcard{gap:5px;padding:2px 0}.kagit .qmeta{padding-bottom:4px}.kagit .opt{min-height:44px!important;padding:3px 10px 3px 7px!important;font-size:.875rem!important}.kagit .opt>i{width:24px;height:24px;font-size:.75rem}}