:root{
  --paper:#EEF2F3; --surface:#F9FBFB; --grid:#DCE6E9; --grid-major:#BCD0D6;
  --ink:#14233B; --muted:#5A6B7F; --line:#C4D2D8;
  --pen-ramp:#1D4FB0; --pen-spring:#C0185A; --pen-boost:#A86A00; --pen-wind:#0B7F86; --pipe:#6A3FC4; --ball:#E4570F; --on-accent:#FFFFFF;
  --hatch:#7F90A3; --zone:rgba(29,79,176,.05); --nodraw:rgba(192,24,90,.07);
  --good:#17804A; --bad:#B42318; --ground:#DDE5E8; --goal:rgba(23,128,74,.07);
  --hover:rgba(20,35,59,.06);
  --magnet:#4E6A8C; --sticky:#6E8B1F; --mover:#8A4B8F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0D2B4E; --surface:#123660; --grid:#173E68; --grid-major:#24568A;
    --ink:#E6F0FC; --muted:#9BB4D2; --line:#2A5586;
    --pen-ramp:#86C5FF; --pen-spring:#FF7EB3; --pen-boost:#F5C451; --pen-wind:#5CD6DD; --pipe:#BE9BFF; --ball:#FF8B3D; --on-accent:#0D2B4E;
    --hatch:#6E8DB4; --zone:rgba(134,197,255,.06); --nodraw:rgba(255,126,179,.10);
    --good:#62D796; --bad:#FF8A7A; --ground:#10345C; --goal:rgba(98,215,150,.08);
    --hover:rgba(230,240,252,.08);
    --magnet:#9DB7D8; --sticky:#B7D96A; --mover:#E2A6E6;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0D2B4E; --surface:#123660; --grid:#173E68; --grid-major:#24568A;
  --ink:#E6F0FC; --muted:#9BB4D2; --line:#2A5586;
  --pen-ramp:#86C5FF; --pen-spring:#FF7EB3; --pen-boost:#F5C451; --pen-wind:#5CD6DD; --pipe:#BE9BFF; --ball:#FF8B3D; --on-accent:#0D2B4E;
  --hatch:#6E8DB4; --zone:rgba(134,197,255,.06); --nodraw:rgba(255,126,179,.10);
  --good:#62D796; --bad:#FF8A7A; --ground:#10345C; --goal:rgba(98,215,150,.08);
  --hover:rgba(230,240,252,.08);
  --magnet:#9DB7D8; --sticky:#B7D96A; --mover:#E2A6E6;
}
*{box-sizing:border-box}
/* Çentik, kamera deliği ve ev çubuğu payı: telefonda (mobil uygulama, iPhone Safari) sayfa bu alanların dışında kalır */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px)}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 "Barlow",system-ui,sans-serif;padding-left:max(16px,var(--sa-l));padding-right:max(16px,var(--sa-r))}

/* Tek ekran düzeni: başlık, seçimler ve kontroller her boyutta görünür kalır, sayfa kaymaz.
   Oyun alanı (stageWrap) kalan yeri doldurur ve oranını koruyarak içine sığar. */
.app{max-width:1180px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:10px;padding-top:max(12px,var(--sa-t));padding-bottom:max(12px,var(--sa-b))}
.app > *{flex:none}
/* Seviye bilgisi ve oyun alanı: kalan yüksekliği paylaşır */
.app > .play{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:inherit}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.brand{min-width:0;flex:1 1 auto}
.right{flex:none}
body.test h1::after{content:"TEST";font:700 12px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#fff;background:var(--bad,#c0392b);border-radius:4px;padding:3px 6px;margin-left:.4em}
h1{display:flex;align-items:center;gap:.3em;font:700 30px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0;white-space:nowrap}
/* Logo: oyundaki turuncu top */
.logo{width:.78em;height:.78em;flex:none;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 .075em var(--ink)}
.brand p{margin:4px 0 0;color:var(--muted)}
.about{max-width:1000px;margin:18px auto 0;padding:14px 16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.5}
.about p{margin:0 0 6px}
.about a{color:inherit}
html.in-app .about,body.preview .about{display:none}
.right{display:flex;align-items:center;gap:10px}
/* Google ile giriş ve oyuncu çipi */
.account{display:flex;align-items:center;gap:8px;min-height:32px}
.account .me{display:flex;align-items:center;gap:6px;font:600 13px "Barlow",sans-serif}
.account .me img{border-radius:50%;flex:none}
.account .me .nm{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .me .adfree{font:600 10px "IBM Plex Mono",ui-monospace,monospace;color:var(--good);border:1px solid var(--good);border-radius:999px;padding:0 6px}
.account .me .ghost{font:600 12px "Barlow",sans-serif;padding:3px 8px;border:1.5px solid var(--line);background:transparent;color:var(--muted);border-radius:6px;cursor:pointer;min-height:0}
.account .me .ghost:hover{border-color:var(--ink);color:var(--ink)}
.total{font:600 13px "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.total b{color:var(--ball);font-weight:600}
.icon{width:40px;padding:0;display:grid;place-items:center}
.icon svg{width:20px;height:20px;display:block}

/* Bölüm sekmeleri: eşit genişlikte şerit; numara ve ad, altında yıldız sayısı ve ilerleme çubuğu */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px;flex-basis:100%;max-width:1000px;min-width:0}
.chap{position:relative;overflow:hidden;min-width:0;min-height:0;padding:8px 12px 11px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
.chap .nm{display:flex;align-items:baseline;gap:5px;max-width:100%;overflow:hidden;font:600 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chap .nt{overflow:hidden;text-overflow:ellipsis}
.chap .no{letter-spacing:.02em}
.chap small{display:flex;align-items:center;gap:4px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap}
.chap small b{color:var(--ball);font-weight:600}
.chap small svg{width:11px;height:11px;display:block}
.chap .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.chap .bar i{display:block;height:100%;background:var(--ball)}
.chap[aria-pressed="true"],.chap[aria-pressed="true"]:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chap[aria-pressed="true"] small{color:var(--paper);opacity:.8}
.chap.locked{opacity:.55}

/* Bölüm düğmeleri: tek sıra, yana kaydırılır. Kenardaki solma o yönde başka bölüm olduğunu gösterir (game.js: moreL, moreR). */
.levels{display:flex;flex-wrap:nowrap;gap:5px;flex-basis:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:4px 4px 6px;margin:-4px -4px -2px}
.levels.moreR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.levels.moreL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.levels.moreL.moreR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.lv{flex:none;width:42px;height:42px;padding:0;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:600 15px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0;text-transform:none;min-height:0}
.lv small{font-size:9px;letter-spacing:1px;color:var(--ball)}
.lv small .off{color:var(--line)}
.lv svg{width:11px;height:11px;display:block}
.lv:disabled{opacity:.45;cursor:not-allowed}
.lv:disabled small{color:var(--muted)}
.lv[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Uzay bölümü: gece mavisi düğme, kenarı ve köşedeki nokta gezegenin renginde */
.lv.space{position:relative;background:#0B1530;color:#E6F0FC;border-color:var(--planet,#4A78B8)}
.lv.space::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--planet,#4A78B8)}
.lv.space small .off{color:#2F4D78}
.lv.space:disabled small{color:#8EA3C2}
.lv.space[aria-current="true"]{border-color:var(--planet,#4A78B8);box-shadow:inset 0 0 0 1px var(--planet,#4A78B8),0 0 0 1px var(--ink)}
.lv[data-planet="moon"]{--planet:#A9AFBB}
.lv[data-planet="mars"]{--planet:#D9643C}
.lv[data-planet="pluto"]{--planet:#D8C8B0}
.lv[data-planet="venus"]{--planet:#E0B04A}
.lv[data-planet="neptune"]{--planet:#5B95EA}
.lv[data-planet="jupiter"]{--planet:#D9925A}
/* Çöl bölümü: kum rengi düğme, köşede güneş */
.lv.desert{position:relative;background:#F3DDB0;color:#33220F;border-color:#C98B3E}
.lv.desert::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#E8962C}
.lv.desert small .off{color:#D9BF93}
.lv.desert:disabled small{color:#7A5C3A}
.lv.desert[aria-current="true"]{border-color:#B5701F;box-shadow:inset 0 0 0 1px #B5701F,0 0 0 1px var(--ink)}
/* Kutup bölümü: buz mavisi düğme, köşede kar tanesi rengi */
/* Yönetici önizlemesi: yalnız oyun alanı ve çizim araçları */
.preview .top{display:none}
.lv.polar{position:relative;background:#DDEFFA;color:#16324A;border-color:#6FA8D2}
.lv.polar::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px #6FA8D2}
.lv.polar small .off{color:#BFD6E6}
.lv.polar:disabled small{color:#5B7A94}
.lv.polar[aria-current="true"]{border-color:#2F6FA3;box-shadow:inset 0 0 0 1px #2F6FA3,0 0 0 1px var(--ink)}
/* Orman bölümü: yeşil düğme, köşede yaprak rengi nokta */
.lv.forest{position:relative;background:#DDEFCB;color:#1F3A1C;border-color:#6AA84F}
.lv.forest::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#2F6E24}
.lv.forest small .off{color:#C3D6B0}
.lv.forest:disabled small{color:#5E7A52}
.lv.forest[aria-current="true"]{border-color:#2F6E24;box-shadow:inset 0 0 0 1px #2F6E24,0 0 0 1px var(--ink)}

/* Mobil uygulama (html.in-app, game.js: IN_APP): Level sekmeleri ve bölüm düğmeleri ayrı bir sayfada.
   Sayfa "Bölümler" düğmesiyle ve her geçilen bölümden sonra açılır; web'de bu kurallar kullanılmaz.
   Uygulamanın oyun ekranı dosyanın sonunda. */
.stagesBtn{display:inline-flex;align-items:center;gap:6px;flex:none}
.stagesBtn svg{width:16px;height:16px;display:block}
.stagesPage{position:fixed;inset:0;z-index:30;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:max(12px,var(--sa-t)) max(16px,var(--sa-r)) max(14px,var(--sa-b)) max(16px,var(--sa-l))}
.spHead{display:flex;align-items:center;gap:12px}
.spHead h2{flex:1;margin:0;font:700 24px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.spResult{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface)}
.spResult .res{flex:1 1 240px;min-width:0}
.spBody{display:flex;flex-direction:column;gap:12px}
.stagesPage .chapters{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:5px;max-width:none}
.stagesPage .chap{padding:7px 4px 10px;align-items:center;gap:4px}
.stagesPage .chap .nt{display:none}
.stagesPage .chap small{display:flex}
.stagesPage .levels{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin:0;padding:0;gap:6px}
.stagesPage .lv{width:50px;height:50px;font-size:15px}
.stagesPage .lv small{font-size:8px;letter-spacing:0}

.brief{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.tag{font:600 12px "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.brief b{font:600 21px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.03em}
.chip{font:600 12px "IBM Plex Mono",ui-monospace,monospace;color:var(--ball);border:1.5px solid var(--ball);border-radius:999px;padding:1px 9px;white-space:nowrap}
.brief .hint{color:var(--muted);max-width:70ch}

.stageWrap{flex:1 1 0;min-height:110px;container-type:size;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:100%;width:min(100cqw, 100cqh * 1000 / 560);aspect-ratio:1000/560;border:1.5px solid var(--ink);background:var(--paper)}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
canvas.aim{cursor:grabbing}
canvas.busy{cursor:default}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-top:1.5px solid var(--line);padding-top:10px}
.steps{list-style:none;display:flex;gap:6px;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border:1.5px solid var(--line);border-radius:999px;color:var(--muted);font:600 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.steps li::before{content:counter(s);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink);font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:0}
.steps li.on{color:var(--ink);border-color:var(--ink)}
.steps li.on::before{background:var(--ball);color:var(--on-accent)}
.group{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;flex:1 1 320px;min-width:0}

button{font:600 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;min-height:40px;padding:0 14px;border-radius:6px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
button:hover:not(:disabled){background:var(--hover)}
button:focus-visible{outline:2px solid var(--ball);outline-offset:2px}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:var(--ink);color:var(--paper)}
button.primary:hover:not(:disabled){background:var(--ink);opacity:.88}
.push{margin-left:auto}
/* Çözüm önerisi düğmesi ve tekrar hakkı göstergesi */
.ib.hint{border-color:var(--good);color:var(--good);position:relative}
/* Öneri reklamla açılıyorsa düğmenin köşesinde rozet: oynat simgesi ve "reklam" (dar ekranda yalnız simge) */
.adBadge{position:absolute;top:-9px;right:-9px;display:flex;align-items:center;gap:3px;padding:2px 6px 2px 4px;border-radius:10px;background:var(--ball);color:var(--on-accent);font:700 9px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;box-shadow:0 0 0 2px var(--paper);white-space:nowrap}
.adBadge[hidden]{display:none}
.ib .adBadge svg{width:9px;height:9px}
.adBadge i{font-style:normal}
.ib.hint[aria-pressed="true"]{background:var(--good);color:var(--paper)}
.chip#retryChip{font:600 12px "IBM Plex Mono",ui-monospace,monospace;color:var(--bad);white-space:nowrap}
.ib{display:flex;align-items:center;gap:7px}
.ib svg{width:18px;height:18px;display:block;flex:none}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;display:flex;align-items:center;gap:8px}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sw{width:16px;height:5px;border-radius:3px;flex:none}
.sw.ramp{background:var(--pen-ramp)}
.sw.spring{background:var(--pen-spring)}
.sw.boost{background:var(--pen-boost)}
.sw.wind{background:var(--pen-wind)}
.pens{display:flex;flex-wrap:wrap;gap:6px}
.pens button{display:flex;align-items:center;gap:8px}
.pens button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ps{display:none}
.ink{display:flex;align-items:center;gap:8px}
.lbl{font:600 12px "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.meter{position:relative;width:110px;height:9px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;flex:none}
.meter i{display:block;height:100%;background:var(--ink)}
/* 3 ve 2 yıldız sınırları: çubuk kalan mürekkebi gösterir */
.meter .tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ball)}
.stars.small{font-size:14px;letter-spacing:1px}
.power{display:flex;align-items:center;gap:6px}
.power .step{width:40px;padding:0;font:600 20px/1 "IBM Plex Mono",ui-monospace,monospace}
#powVal{min-width:6.5ch;text-align:center}
.help{margin:0;color:var(--muted);font-size:13px;flex-basis:100%}
.num{font:500 13px "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.res{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.res strong{font:700 20px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.res strong.win{color:var(--good)}
.res strong.fail{color:var(--bad)}
.res span{color:var(--muted)}
.stars{font-size:22px;letter-spacing:3px;color:var(--ball)}
.stars .off{color:var(--line)}

/* Kısa ekran: açıklama metinleri gizlenir, oyun alanına yer açılır */
@media (max-height:780px){
  .brand p,.help{display:none}
  h1{font-size:26px}
  .app{gap:8px;padding-top:max(10px,var(--sa-t));padding-bottom:max(10px,var(--sa-b))}
}

/* Dar ekran (telefon dikey): sekmeler numara ve yıldızla, seviyeler 10 sütun, geri al ve temizle simge */
@media (max-width:640px){
  body{padding-left:max(12px,var(--sa-l));padding-right:max(12px,var(--sa-r))}
  .app{gap:8px;padding-top:max(8px,var(--sa-t));padding-bottom:max(8px,var(--sa-b))}
  h1{font-size:22px}
  .brand p,.help,.steps{display:none}
  .right{gap:6px}
  .icon{width:36px}
  button{min-height:36px;padding:0 10px;font-size:14px}
  .seg button{padding:0 10px}
  .chapters{grid-template-columns:repeat(auto-fit,minmax(30px,1fr));gap:4px;max-width:none}
  .chap{padding:7px 4px 10px;align-items:center;gap:4px}
  .chap .nt,.chap small{display:none}
  .chap .no{font-size:13px}
  .levels{gap:4px}
  .lv{width:38px;height:38px;font-size:13px}
  .lv small{font-size:7px;letter-spacing:0}
  .brief{gap:2px 8px}
  .brief b{font-size:18px}
  .brief .hint{flex-basis:100%;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .controls{padding-top:8px}
  .group{gap:8px;flex-basis:100%}
  .pens{gap:4px}
  .pens button{gap:6px}
  .ib{width:38px;padding:0;justify-content:center}
  .ib span{display:none}
  .adBadge{padding:3px;top:-7px;right:-7px}
  .adBadge i{display:none}
  .meter{width:60px}
  .push{margin-left:0}
  .power .step{width:36px}
  .stars{font-size:18px}
  .res{min-width:0;flex-basis:100%}
}
@media (max-width:360px){
  .total{display:none}
  .lv{font-size:12px}
}

/* Yatay telefon ve çok kısa pencereler: iki sütun. Solda oyun alanı, sağda seçimler ve kontroller. */
@media (orientation:landscape) and (max-height:560px){
  body{padding-left:max(10px,var(--sa-l));padding-right:max(10px,var(--sa-r))}
  .app{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,38vw,340px);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"brand right" "play chapters" "play levels" "play ctrl";gap:6px 12px;padding-top:max(6px,var(--sa-t));padding-bottom:max(6px,var(--sa-b))}
  .top{display:contents}
  .brand{grid-area:brand;align-self:center}
  .brand p,.help,.steps,.brief .hint{display:none}
  h1{font-size:20px}
  .right{grid-area:right;justify-content:flex-end;gap:6px}
  .icon{width:34px}
  button{min-height:32px;padding:0 9px;font-size:13px}
  .seg button{padding:0 9px}
  .chapters{grid-area:chapters;grid-template-columns:repeat(auto-fit,minmax(20px,1fr));gap:3px;max-width:none}
  .chap{padding:5px 2px 8px;align-items:center;gap:3px}
  .chap .nt{display:none}
  .chap small{display:none}
  .levels{grid-area:levels;gap:3px;align-self:start}
  .lv{width:34px;height:34px;font-size:12px}
  .lv small{font-size:7px;letter-spacing:0}
  .play{grid-area:play}
  .brief{gap:2px 8px}
  .brief b{font-size:17px}
  .stageWrap{min-height:0}
  .controls{grid-area:ctrl;align-self:stretch;align-content:flex-start;overflow-y:auto;overflow-x:hidden;border-top:0;padding-top:0;gap:4px}
  .group{gap:4px 6px;flex-basis:100%}
  .pens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%}
  .pens button{justify-content:center;padding:0 4px;gap:5px;font-size:12px}
  .pens .sw{width:10px}
  .pens .pl,.power .lbl{display:none}
  .pens .ps{display:inline}
  .ib{width:34px;padding:0;justify-content:center}
  .ib span{display:none}
  .adBadge{padding:3px;top:-7px;right:-7px}
  .adBadge i{display:none}
  .meter{width:56px}
  .push{margin-left:0}
  .power .step{width:32px}
  .stars{font-size:16px}
  .res{min-width:0;flex-basis:100%}
}

/* Mobil uygulamanın oyun ekranı (html.in-app), her boyutta: oyun alanı olabildiğince büyük. Başlık ve bölüm bilgisi
   satırı yok (bölüm adı oyun alanının antetinde); kontroller altta tek şeritte, başında oynanan bölümün numarasıyla
   Bölümler düğmesi. Ses ve dil düğmeleri Bölümler sayfasında. Web'de bu kurallar kullanılmaz. */
html.in-app body{padding-left:max(8px,var(--sa-l));padding-right:max(8px,var(--sa-r))}
html.in-app .app{max-width:none;display:flex;flex-direction:column;gap:6px;padding-top:max(6px,var(--sa-t));padding-bottom:max(6px,var(--sa-b))}
html.in-app .top,html.in-app .brief,html.in-app .steps,html.in-app .help{display:none}
html.in-app .play{flex:1 1 0;min-height:0}
html.in-app .stageWrap{min-height:0}
html.in-app button{min-height:34px;padding:0 10px;font-size:13px}
html.in-app .icon{width:34px;padding:0}
html.in-app .controls{flex:none;flex-wrap:nowrap;align-items:center;gap:8px;border-top:0;padding-top:0;overflow:visible}
html.in-app .group{flex:1 1 auto;flex-basis:auto;gap:6px 8px;min-width:0}
html.in-app .stagesBtn{padding:0 10px;gap:6px}
html.in-app .pens{display:flex;width:auto;gap:4px}
html.in-app .pens button{padding:0 8px;gap:5px;font-size:12px}
html.in-app .pens .sw{width:10px}
html.in-app .pens .pl,html.in-app .power .lbl,html.in-app .ink .lbl{display:none}
html.in-app .pens .ps{display:inline}
html.in-app .ib{width:34px;padding:0;justify-content:center}
html.in-app .ib span{display:none}
html.in-app .adBadge{padding:3px;top:-7px;right:-7px}
html.in-app .adBadge i{display:none}
html.in-app .meter{width:56px}
html.in-app .push{margin-left:auto}
html.in-app .power .step{width:34px}
html.in-app .stars{font-size:16px;letter-spacing:2px}
html.in-app .res{flex:1 1 200px;min-width:0}
html.in-app .res strong{font-size:16px}
html.in-app .res span{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}