/* Nar İlanı (Snake). Same rules as the rest of the app: solid colour, a hard edge under things, no gradients or soft shadows. */

/* Home */
.ilan-hero{display:flex;align-items:center;gap:14px;padding:16px}
.ilan-hero h1{font-size:2.1rem;line-height:1.05}
.ilan-hero-text{flex:1;min-width:0}
.ilan-demo{width:132px;height:132px;flex:none;border-radius:18px;border:3px solid var(--ink);background:var(--bg);box-shadow:0 4px 0 var(--nar-d)}
@media (max-width:379px){.ilan-demo{width:96px;height:96px}.ilan-hero h1{font-size:1.7rem}}
.ilan-daily h2{font-size:1.35rem}
.ilan-top{margin-top:10px;background:var(--surface);color:var(--text);border-radius:14px;padding:2px 12px}
.ilan-top-empty{margin-top:10px;font-weight:800}
.block .ilan-top .chip{background:var(--surface-2);color:var(--text)}

.ilan-rows{display:flex;flex-direction:column}
.ilan-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 0;border-bottom:2px solid var(--line)}
.ilan-row:last-child{border-bottom:0}
.ilan-rows.compact .ilan-row{min-height:48px}
.ilan-row.me{margin:0 -8px;padding:6px 8px;border-radius:13px;background:color-mix(in srgb,var(--zef) 22%,var(--surface));border-bottom-color:transparent}
.ilan-rank{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 .92rem var(--font-d);background:var(--surface-3);color:var(--muted)}
.ilan-rank.r1{background:var(--zef);color:var(--ink);box-shadow:0 2px 0 var(--zef-d)}
.ilan-rank.r2{background:#d9d4e6;color:var(--ink);box-shadow:0 2px 0 #aaa3bf}
.ilan-rank.r3{background:var(--nari);color:var(--ink);box-shadow:0 2px 0 var(--nari-d)}
.ilan-pts{font:800 1.12rem var(--font-d);font-variant-numeric:tabular-nums}

.ilan-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.mode-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:140px;padding:13px;border-radius:20px;text-align:left;background:var(--tone);color:var(--on);box-shadow:0 5px 0 var(--tone-d);transition:transform .08s,box-shadow .08s}
.mode-tile:active{transform:translateY(5px);box-shadow:0 0 0 var(--tone-d)}
.mode-tile .tile-icon{background:var(--tone-d);color:var(--on);margin-bottom:4px}
.mode-tile b{font:800 1.22rem/1.1 var(--font-d)}
.mode-best{margin-top:auto;padding:3px 9px 2px;border-radius:9px;background:var(--tone-d);color:var(--on);font:800 .84rem var(--font-d)}
.ilan-modes .mode-tile:last-child:nth-child(odd){grid-column:1/-1;min-height:112px}

.ilan-help p{line-height:1.45}
.ilan-powers{display:flex;flex-direction:column;gap:11px}
.ilan-powers li{display:flex;gap:12px;align-items:center}
.pw{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--tone);color:var(--on);box-shadow:0 3px 0 var(--tone-d);font:800 1.05rem var(--font-d)}

.ilan-skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.skin{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:98px;padding:11px 4px 8px;border-radius:17px;border:2px solid var(--line-2);background:var(--surface);transition:transform .08s}
.skin:active:not([disabled]){transform:scale(.96)}
.skin[aria-checked=true]{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
:root[data-theme=dark] .skin[aria-checked=true]{border-color:var(--zef);box-shadow:0 3px 0 var(--zef-d)}
.skin[disabled]{opacity:.7;cursor:not-allowed}
.skin-name{font:800 .92rem var(--font-d)}
.swatch{--sw:#46d276;--sw-d:#22a551;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--sw);box-shadow:0 4px 0 var(--sw-d);color:#fff}
.swatch .i{width:20px;height:20px}
[data-swatch=yarpaq]{--sw:#46d276;--sw-d:#22a551}
[data-swatch=xezer]{--sw:#1465e0;--sw-d:#0b4aac}
[data-swatch=uzum]{--sw:#7438e0;--sw-d:#5423b4}
[data-swatch=firuze]{--sw:#15cdb2;--sw-d:#0c9c87}
[data-swatch=gul]{--sw:#ff6fa3;--sw-d:#e4508a}
[data-swatch=narinci]{--sw:#ff8a1f;--sw-d:#de6c00}

/* Playing */
body.snaking .tabbar{display:none}
body.snaking .main{padding-bottom:calc(var(--safe-b) + 18px);overscroll-behavior:none}
body.snaking{overflow:hidden;overscroll-behavior:none;touch-action:none}
@media (min-width:960px){body.snaking .tabbar{display:flex}}
.ilan-game{display:flex;flex-direction:column;gap:8px;max-width:600px;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ilan-hud{display:grid;grid-template-columns:44px auto minmax(0,1fr) 44px;align-items:center;gap:8px}
.ilan-score{display:flex;flex-direction:column;line-height:1;padding-left:4px}
.ilan-score small{font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.02em}
.ilan-score b{font:800 2.1rem/1 var(--font-d);font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.ilan-score b.bump{animation:ilan-bump .22s var(--spring)}
.ilan-meta{min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.ilan-target{max-width:100%;font-size:.82rem;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ilan-target.hit{color:var(--yar-t);animation:ilan-bump .3s var(--spring)}
.ilan-combo{display:flex;align-items:center;gap:8px;height:22px}
.ilan-combo .bar{flex:1;height:10px}
.ilan-combo .bar i{background:var(--nari-d);transition:none}
.ilan-combo b{min-width:38px;text-align:right;font:800 1.15rem/1 var(--font-d);color:var(--nari-t)}

.ilan-stage{position:relative;width:clamp(220px,min(100%,calc(100dvh - 268px - var(--safe-t) - var(--safe-b))),560px);aspect-ratio:1;margin:0 auto;border:4px solid var(--ink);border-radius:20px;background:var(--bg);box-shadow:0 5px 0 var(--line-2);overflow:hidden}
:root[data-theme=dark] .ilan-stage{border-color:var(--line-2);box-shadow:0 5px 0 var(--line)}
.ilan-stage[data-wrap=true]{border-style:dashed;border-color:var(--fir-d)}
.ilan-stage canvas{display:block;width:100%;height:100%}
.ilan-stage.flash{animation:ilan-flash .55s ease-out}
.ilan-overlay{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;padding:18px;text-align:center;background:color-mix(in srgb,var(--bg) 84%,transparent)}
.ilan-overlay h2{font-size:1.5rem}
.ilan-count{font:800 6rem/1 var(--font-d);color:var(--nar-t);animation:ilan-pop .7s var(--spring)}
.ilan-overlay .btn{min-width:200px}
.ilan-effects{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:38px}
.fx{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 9px;border-radius:12px;background:var(--tone);color:var(--on);box-shadow:0 3px 0 var(--tone-d);font:800 .92rem var(--font-d)}
.fx .i{width:18px;height:18px}
.fx .fx-bar{width:34px;height:6px;border-radius:6px;background:rgba(27,21,48,.22);overflow:hidden}
.fx .fx-bar i{display:block;height:100%;width:var(--p,100%);background:var(--on)}
.ilan-ghost-note{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:800;color:var(--muted)}

/* Result */
.ilan-result{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ilan-result .card{margin:0}
.ilan-over{text-align:center;font:800 1.15rem var(--font-d);color:var(--muted)}
.ilan-final{text-align:center;font:800 4.4rem/1 var(--font-d);font-variant-numeric:tabular-nums}
.ilan-final small{display:block;font-size:.9rem;color:var(--muted);letter-spacing:.02em;margin-bottom:4px}
.ilan-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:15px;background:var(--zef);color:var(--ink);box-shadow:0 4px 0 var(--zef-d);font:800 1.15rem var(--font-d);animation:ilan-pop .5s var(--spring)}
.ilan-banner.soft{background:var(--surface-2);box-shadow:0 4px 0 var(--line-2);font-size:1rem}
.ilan-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ilan-stats .stat{padding:10px 4px}
.ilan-stats .stat b{font-size:1.25rem}
.ilan-standing{display:flex;flex-direction:column;gap:6px}
.ilan-standing .line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ilan-standing .line b{font:800 1.15rem var(--font-d)}
.ilan-rival{padding:10px 12px;border-radius:14px;background:var(--surface-2);font-weight:700}
.ilan-wait{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-weight:800;padding:14px 0}
.ilan-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--nar);animation:ilan-spin .8s linear infinite}

@keyframes ilan-bump{from{transform:scale(1.28)}to{transform:scale(1)}}
@keyframes ilan-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ilan-flash{from{border-color:var(--zef)}to{}}
@keyframes ilan-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){
  .ilan-score b.bump,.ilan-target.hit,.ilan-count,.ilan-banner,.ilan-stage.flash,.ilan-spin{animation:none}
}

/* Oyunlar tab */
.game-card{display:flex;align-items:center;gap:13px;padding:16px;color:var(--on)}
.game-card:active{transform:translateY(5px);box-shadow:0 0 0 var(--tone-d)}
.game-card{transition:transform .08s,box-shadow .08s}
.game-icon{width:58px;height:58px;border-radius:18px;background:var(--tone-d);color:var(--on)}
.game-icon .i{width:30px;height:30px}
.game-name{font:800 1.5rem/1.1 var(--font-d)}
@media (max-width:440px){.game-card{flex-wrap:wrap}.game-card>.btn{width:100%}}