/* BOA COSMOS PREVIEW
   Ayrı, oynanabilir sanat yönü denemesi. Kaynak oyunun üzerine yazmaz. */

:root {
  /* DERİN ALAN — 3B gökyüzüyle AYNI palet (bkz. boa-3d.js, DERIN).
     Sayfa zemini ile oyun göğü iki ayrı yerde tanımlı olduğu için birbirinden
     kopabiliyordu; ikisi de artık bu altı değerden türüyor. */
  --derin-bosluk: #04060E;   /* mor-maviye çalan neredeyse siyah */
  --derin-taban: #0A0F1E;    /* hava parıltısı tabanı */
  --derin-samanyolu: #2B3450;
  --derin-cekirdek: #4A4238; /* yıldız bulutunun sıcak çekirdeği */
  --derin-halfa: #5C2135;
  --derin-yansima: #1D3862;
  --cosmos-night: #04060E;
  --cosmos-deep: #08194a;
  --cosmos-blue: #123b92;
  --cosmos-aqua: #48e7ff;
  --cosmos-mint: #58f2c6;
  --cosmos-violet: #9b74ff;
  --cosmos-coral: #ff6485;
  --cosmos-gold: #ffd55b;
  --cosmos-ivory: #fff7dc;
  --cosmos-glass: rgba(9, 17, 57, .82);
  /* RGB UCLULERI — IKINCI TEMA ICIN (23 Agu 2026)
     Col haritasinin arayuz derisi (col.css) yalnizca bu jetonlari
     degistirerek kuruluyor. Onceki halde ayni renk hem `--cosmos-aqua`
     olarak hem de `rgba(72, 231, 255, .3)` seklinde ELLE yaziliydi:
     jetonu degistirmek satirlarin yarisini birakiyordu. Degerler birebir
     ayni; bu degisiklik gorunumu degistirmez, yalnizca tek kaynaga baglar. */
  --cosmos-aqua-rgb: 72, 231, 255;
  --cosmos-mint-rgb: 88, 242, 198;
  --cosmos-violet-rgb: 155, 116, 255;
  --cosmos-coral-rgb: 255, 100, 133;
  --cosmos-gold-rgb: 255, 213, 91;
  --cosmos-ivory-rgb: 255, 247, 220;
  --cosmos-edge-rgb: 98, 226, 255;
  --cosmos-night-rgb: 4, 6, 14;
  --cosmos-edge: rgba(var(--cosmos-edge-rgb), .45);
  --bg: var(--cosmos-night);
  --panel: #09153b;
  --white: var(--cosmos-ivory);
  --mint: var(--cosmos-mint);
  --mint-deep: #24cba6;
  --aqua: var(--cosmos-aqua);
  --violet: var(--cosmos-violet);
  --coral: var(--cosmos-coral);
  --red: var(--cosmos-coral);
  --gold: var(--cosmos-gold);
  --graphite: #121833;
  --glow-m: rgba(var(--cosmos-mint-rgb), .38);
  --glow-r: rgba(var(--cosmos-coral-rgb), .4);
  --glow-g: rgba(var(--cosmos-gold-rgb), .42);
}

/* SAYFA ZEMİNİ = OYUNUN GÖĞÜ.
   Eskiden doygun mavi bir degrade ve üç sabit noktadan oluşan bir yıldız
   deseni vardı; oyunun içindeki gökle hiçbir ilgisi yoktu. Aynı derin alan
   burada CSS'le kuruluyor: köşegen bir Samanyolu şeridi, kenarlarda iki
   sönük bulutsu, ortada boşluk. */
body.cosmos-ui {
  color: var(--cosmos-ivory);
  background:
    linear-gradient(197deg,
      transparent 22%,
      rgba(74, 66, 56, .10) 40%,
      rgba(58, 58, 68, .15) 50%,
      rgba(43, 52, 80, .09) 61%,
      transparent 78%),
    radial-gradient(56% 32% at 86% 14%, rgba(92, 33, 53, .17), transparent 72%),
    radial-gradient(52% 30% at 10% 68%, rgba(29, 56, 98, .2), transparent 74%),
    radial-gradient(130% 78% at 50% 6%, var(--derin-taban), var(--derin-bosluk) 76%);
}

/* Yıldız alanı: altı katman, birbirine asal boyutlarda. Boy ve saydamlık
   birlikte değişiyor — gerçek gökyüzünde parlaklık dağılımı üsteldir, eşit
   parlaklıkta nokta serpintisi anında sahte okunur. Renkler tayf sınıfından:
   mavi-beyaz, beyaz, sarımsı, turuncu. */
body.cosmos-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 24%, rgba(255, 242, 226, .95), transparent 100%),
    radial-gradient(1.4px 1.4px at 63% 71%, rgba(203, 216, 255, .82), transparent 100%),
    radial-gradient(1.2px 1.2px at 41% 11%, rgba(255, 213, 166, .78), transparent 100%),
    radial-gradient(1px 1px at 82% 44%, rgba(247, 246, 255, .7), transparent 100%),
    radial-gradient(.9px .9px at 7% 57%, rgba(162, 184, 255, .6), transparent 100%),
    radial-gradient(.8px .8px at 55% 33%, rgba(255, 242, 226, .5), transparent 100%),
    radial-gradient(.7px .7px at 29% 82%, rgba(255, 184, 119, .46), transparent 100%);
  background-size:
    229px 229px, 163px 163px, 271px 271px,
    131px 131px, 97px 97px, 79px 79px, 61px 61px;
}

body.cosmos-ui #stage { max-width: 1180px; }
body.cosmos-ui #intro { isolation: isolate; }
body.cosmos-ui #intro::before {
  opacity: .62;
  background:
    radial-gradient(circle at 50% 8%, rgba(43, 52, 80, .34), transparent 34%),
    linear-gradient(180deg, rgba(var(--cosmos-night-rgb), .06), rgba(var(--cosmos-night-rgb), .62));
}
body.cosmos-ui #intro::after {
  content: "KOZMOS ARAYÜZÜ · AYRI ÖNİZLEME";
  position: fixed;
  z-index: 30;
  right: 14px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--cosmos-aqua-rgb), .34);
  border-radius: 999px;
  color: rgba(207, 250, 255, .78);
  background: rgba(5, 9, 36, .72);
  backdrop-filter: blur(10px);
  font: 800 7px/1 var(--mono);
  letter-spacing: .14em;
  pointer-events: none;
}

/* ---------- Açılış ---------- */
body.cosmos-ui .introHero {
  min-height: 700px;
  border: 1px solid rgba(109, 223, 255, .58);
  border-radius: 34px;
  background: #07113a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 90px rgba(0, 0, 0, .48),
    0 0 54px rgba(var(--cosmos-aqua-rgb), .12);
}
body.cosmos-ui .introWorld {
  /* Doygunluğu ARTIRAN bir süzgeç vardı; yeni gökle ters yönde çalışıyordu.
     Anahtar görsel boyalı kalıyor ama derin alanın bandına çekiliyor. */
  filter: saturate(.84) contrast(1.1) brightness(.8);
  object-position: 50% 49%;
}
/* Kozmos görselindeki filtre ADAYI derin alana batırmak için ayarlıydı
   (saturate .84 / brightness .8). Çöl haritasında giriş görseli kağıt
   dünyadır ve aynı filtre kumu çamura çeviriyor: orada yalnız çerçeveye
   oturacak kadar hafif bir düşüş kalır. */
body.cosmos-ui.harita-kagit .introWorld {
  filter: saturate(.96) contrast(1.04) brightness(.94);
}
body.cosmos-ui .introHero::after {
  background:
    linear-gradient(180deg, rgba(2, 7, 31, .08) 28%, transparent 52%, rgba(3, 7, 28, .93) 100%),
    radial-gradient(circle at 50% 48%, transparent 35%, rgba(3, 7, 29, .26) 100%);
}
body.cosmos-ui .introHero .gameLockup {
  top: 24px;
  left: 50%;
  width: min(480px, 54%);
  transform: translateX(-50%);
}
body.cosmos-ui .gameLockup::before { display: none; }
body.cosmos-ui .boaCrop img {
  filter: saturate(1.16) contrast(1.04) drop-shadow(0 13px 11px rgba(0, 0, 0, .42)) drop-shadow(0 0 18px rgba(255, 211, 77, .2));
}
body.cosmos-ui .introHeroCopy {
  left: 50%;
  right: auto;
  bottom: 32px;
  width: min(720px, calc(100% - 48px));
  max-width: none;
  transform: translateX(-50%);
  text-align: center;
}
body.cosmos-ui .introEyebrow { color: var(--cosmos-aqua); }
body.cosmos-ui .introHeroCopy h2 {
  color: #fff9e8;
  text-shadow: 0 3px 0 rgba(6, 8, 35, .48), 0 0 28px rgba(83, 220, 255, .22);
}
body.cosmos-ui .introSub { margin-inline: auto; color: rgba(239, 247, 255, .82); }

body.cosmos-ui .chooseTitle span,
body.cosmos-ui .lvlLab { color: var(--cosmos-aqua); }
body.cosmos-ui .chooseTitle h2 { color: #fff7da; }

body.cosmos-ui .modeRow { gap: 14px; }
body.cosmos-ui .modeCard {
  color: #f8fbff;
  border: 1px solid rgba(93, 224, 255, .44);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--cosmos-aqua-rgb), .19), transparent 42%),
    linear-gradient(145deg, rgba(12, 33, 88, .96), rgba(23, 12, 66, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 18px 42px rgba(1, 5, 28, .42);
}
body.cosmos-ui .modeCard::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 218, 93, .2);
  border-radius: 19px;
  pointer-events: none;
}
body.cosmos-ui .modeCard:hover,
body.cosmos-ui .modeCard:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cosmos-aqua);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 50px rgba(1, 5, 28, .5), 0 0 26px rgba(var(--cosmos-aqua-rgb), .16);
}
body.cosmos-ui .modeCard canvas { filter: saturate(1.14) drop-shadow(0 8px 8px rgba(0, 0, 0, .28)); }
body.cosmos-ui .modeCard .mTitle,
body.cosmos-ui .modeCard.boa .mTitle,
body.cosmos-ui .modeCard.fil .mTitle,
body.cosmos-ui .modeCard.vs .mTitle { color: var(--cosmos-ivory); }
body.cosmos-ui .modeCard .mLine { color: rgba(226, 239, 255, .68); }
body.cosmos-ui .modeCard.fil { border-color: rgba(var(--cosmos-violet-rgb), .66); }
body.cosmos-ui .modeCard.vs { border-color: rgba(var(--cosmos-coral-rgb), .56); }

/* ---------- Gerçek 40 düğümlü kozmos haritası ---------- */
body.cosmos-ui .lvlWrap {
  position: relative;
  max-width: 900px;
  min-height: 760px;
  margin-top: 26px;
  padding: 28px 28px 34px;
  overflow: hidden;
  border: 1px solid rgba(var(--cosmos-edge-rgb), .42);
  border-radius: 32px;
  background: var(--derin-bosluk);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .44), 0 0 46px rgba(var(--cosmos-aqua-rgb), .09);
}
/* Boyalı harita artık ayrı bir katmanda: derin alanın yanında fazla doygun
   kalıyordu, süzgeçten geçirilebilmesi için arka plandan çıkarıldı. Sayfa
   göğüyle aynı bantta durur, çocuk düğümler süzgeçten etkilenmez. */
body.cosmos-ui .lvlWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Degrade HER ZAMAN durur; fotograf yalnizca `harita-gorseli` sinifiyla
     gelir. Sebep olculdu: bu goruntu 247 KB ve `.lvlWrap` giris ekraninin
     ICINDE ama y=1027'de — yani ekranin ALTINDA. Ilk boyamada inmesi,
     oyuncunun kaydirmadan goremeyecegi bir sey icin en buyuk tek varligi
     indirmek demekti. Sinif, oyuncu oraya yaklasinca ekleniyor
     (IntersectionObserver, bkz. oyun.js). */
  background: linear-gradient(180deg, rgba(var(--cosmos-night-rgb), .3), rgba(var(--cosmos-night-rgb), .62));
  filter: saturate(.58) brightness(.74) contrast(1.04);
  pointer-events: none;
}
body.cosmos-ui.harita-gorseli .lvlWrap::before {
  background:
    linear-gradient(180deg, rgba(var(--cosmos-night-rgb), .3), rgba(var(--cosmos-night-rgb), .62)),
    url("./assets/boa-cosmos-map-v1.jpg") center 28% / cover no-repeat;
}
body.cosmos-ui .lvlWrap > * { position: relative; z-index: 2; }
body.cosmos-ui .planetMapHead {
  max-width: 720px;
  padding: 12px 15px;
  border: 1px solid rgba(var(--cosmos-gold-rgb), .34);
  border-radius: 20px;
  background: rgba(7, 14, 49, .72);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 28px rgba(0, 0, 0, .24);
}
body.cosmos-ui .planetGlyph {
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, .72) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 36%, #5ff5e4, #2a6ad2 42%, #5c2c9f 74%, #19164e 100%);
  box-shadow: inset -12px -13px 18px rgba(2, 6, 34, .36), 0 0 0 2px rgba(var(--cosmos-gold-rgb), .62), 0 0 24px rgba(var(--cosmos-aqua-rgb), .38);
}
body.cosmos-ui .planetMapCopy strong { color: #fff6d5; }
body.cosmos-ui .planetMapCopy p { color: rgba(226, 239, 255, .72); }
body.cosmos-ui .lvlRow {
  grid-template-columns: repeat(5, minmax(54px, 1fr));
  gap: 30px 12px;
  max-width: 720px;
  max-height: 580px;
  margin-top: 26px;
  padding: 22px 16px 34px;
  overflow: auto;
  border-radius: 26px;
  background: rgba(3, 8, 37, .24);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cosmos-aqua-rgb), .4) transparent;
}
body.cosmos-ui .lvlRow::before {
  inset: 14px 8%;
  background:
    radial-gradient(circle, rgba(255, 220, 96, .95) 0 1.5px, transparent 2px) 0 0 / 19px 19px,
    linear-gradient(110deg, transparent 0 8%, rgba(var(--cosmos-gold-rgb), .24) 9% 10%, transparent 11% 28%, rgba(var(--cosmos-aqua-rgb), .2) 29% 30%, transparent 31% 100%);
  opacity: .7;
  transform: rotate(-2deg);
}
body.cosmos-ui .lvlDot {
  justify-self: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(163, 185, 255, .48);
  color: rgba(226, 235, 255, .64);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .16), transparent 24%),
    linear-gradient(145deg, rgba(48, 62, 132, .94), rgba(25, 18, 73, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 8px 18px rgba(0, 0, 0, .32);
}
body.cosmos-ui .lvlDot::after { inset: -8px; border-color: rgba(109, 223, 255, .27); }
body.cosmos-ui .lvlDot.open {
  color: #fff8dd;
  border-color: color-mix(in srgb, var(--dot, var(--cosmos-aqua)) 72%, #fff 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 17px color-mix(in srgb, var(--dot, var(--cosmos-aqua)) 35%, transparent), 0 9px 19px rgba(0, 0, 0, .35);
}
body.cosmos-ui .lvlDot.cur {
  color: #071135;
  background: linear-gradient(145deg, #fff2a1, var(--dot, var(--cosmos-aqua)));
  box-shadow: 0 0 0 5px rgba(6, 12, 48, .88), 0 0 30px color-mix(in srgb, var(--dot, var(--cosmos-aqua)) 70%, transparent);
}
body.cosmos-ui .lvlDot:nth-child(10n + 2),
body.cosmos-ui .lvlDot:nth-child(10n + 7) { transform: translateY(9px); }
body.cosmos-ui .lvlDot:nth-child(10n + 4),
body.cosmos-ui .lvlDot:nth-child(10n + 9) { transform: translateY(-8px); }
body.cosmos-ui .lvlDot.cur:nth-child(10n + 2),
body.cosmos-ui .lvlDot.cur:nth-child(10n + 7) { transform: translateY(9px) scale(1.14); }

/* Hikayedeki ana dünya geçişleri küçük duraklardan daha hacimli gezegenlerdir. */
body.cosmos-ui .lvlDot:is(:nth-child(1), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(12), :nth-child(16), :nth-child(20), :nth-child(21), :nth-child(28), :nth-child(40)) {
  width: 58px;
  height: 58px;
  margin-block: -6px;
  border-width: 2px;
  font-size: 11px;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .34) 0 6%, transparent 7%),
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--dot, var(--cosmos-aqua)) 86%, #fff 8%), color-mix(in srgb, var(--dot, var(--cosmos-violet)) 44%, #111746) 58%, #11133d 100%);
  box-shadow: inset -9px -10px 15px rgba(3, 5, 30, .34), 0 0 0 3px rgba(6, 12, 48, .65), 0 0 24px color-mix(in srgb, var(--dot, var(--cosmos-aqua)) 38%, transparent);
}

body.cosmos-ui .mementoWrap {
  border-color: rgba(var(--cosmos-edge-rgb), .3);
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--cosmos-aqua-rgb), .15), transparent 34%),
    radial-gradient(circle at 94% 100%, rgba(var(--cosmos-violet-rgb), .19), transparent 38%),
    linear-gradient(145deg, rgba(8, 20, 62, .98), rgba(17, 8, 53, .98));
}
body.cosmos-ui .mementoSlot {
  border-color: rgba(102, 225, 255, .27);
  background: linear-gradient(145deg, rgba(var(--cosmos-aqua-rgb), .08), rgba(var(--cosmos-violet-rgb), .1)), rgba(4, 10, 38, .82);
}
body.cosmos-ui .chip { border-radius: 999px; }

/* ---------- Oyun kabuğu ---------- */
body.cosmos-ui.game-active { background: #040719; }
body.cosmos-ui.game-active.storybook #stage,
body.cosmos-ui.game-active.storybook #game { max-width: none; }
body.cosmos-ui.game-active.storybook .frame {
  background: #07163d;
  border-color: rgba(var(--cosmos-aqua-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--cosmos-gold-rgb), .16), 0 24px 70px rgba(0, 0, 0, .55), 0 0 44px rgba(var(--cosmos-aqua-rgb), .12);
}
body.cosmos-ui.game-active.storybook #cv3d { filter: saturate(1.17) contrast(1.07) brightness(1.01); }
body.cosmos-ui.game-active.storybook .hud {
  background:
    radial-gradient(circle at 15% -20%, rgba(var(--cosmos-aqua-rgb), .18), transparent 45%),
    linear-gradient(180deg, rgba(11, 25, 74, .97), rgba(8, 14, 51, .96));
  border-bottom-color: rgba(var(--cosmos-edge-rgb), .32);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .3);
}
body.cosmos-ui.game-active.storybook .hud .chip,
body.cosmos-ui.game-active.storybook .hud .chip.mint,
body.cosmos-ui.game-active.storybook .hud .chip.gold,
body.cosmos-ui.game-active.storybook .hud .chip.dim {
  color: rgba(235, 245, 255, .9);
  text-shadow: 0 0 12px rgba(var(--cosmos-aqua-rgb), .16);
}
body.cosmos-ui.game-active.storybook .hud #goalChip { color: var(--cosmos-gold); }
body.cosmos-ui.game-active.storybook .hud #planetChip { color: var(--world); }
body.cosmos-ui.game-active.storybook #comBar,
body.cosmos-ui.game-active.storybook #comBar.bilgi {
  color: rgba(218, 248, 255, .92);
  background: linear-gradient(180deg, rgba(8, 16, 55, .96), rgba(7, 12, 43, .96));
  border-bottom-color: rgba(var(--cosmos-aqua-rgb), .24);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}
body.cosmos-ui.game-active.storybook #comBar.uyari { background: linear-gradient(180deg, rgba(76, 18, 56, .97), rgba(46, 12, 49, .97)); }
body.cosmos-ui.game-active.storybook #comBar.basari { background: linear-gradient(180deg, rgba(11, 67, 75, .97), rgba(8, 39, 65, .97)); }

body.cosmos-ui.game-active.storybook .underActions .chip {
  border-color: rgba(var(--cosmos-gold-rgb), .5);
  background: linear-gradient(145deg, rgba(43, 37, 111, .92), rgba(12, 18, 58, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 7px 19px rgba(0, 0, 0, .38), 0 0 15px rgba(var(--cosmos-violet-rgb), .12);
}
body.cosmos-ui.game-active.storybook .underActions .chip::before { color: #fff1b6; }
body.cosmos-ui.game-active.storybook #powerChip {
  color: #fff9e5;
  border-color: var(--cosmos-aqua);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .24), transparent 25%),
    linear-gradient(145deg, rgba(76, 227, 218, .9), rgba(82, 66, 199, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 9px 24px rgba(0, 0, 0, .42), 0 0 24px rgba(var(--cosmos-aqua-rgb), .3);
}
body.cosmos-ui.game-active.storybook .padBtn {
  color: #fff8d4;
  border-color: rgba(var(--cosmos-gold-rgb), .68);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .13), transparent 25%),
    linear-gradient(145deg, rgba(30, 113, 127, .92), rgba(22, 29, 88, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 7px 18px rgba(0, 0, 0, .34), 0 0 14px rgba(var(--cosmos-aqua-rgb), .14);
}
body.cosmos-ui.game-active.storybook #ogretimKarti {
  color: #eefbff;
  border-color: rgba(var(--cosmos-aqua-rgb), .54);
  background: linear-gradient(105deg, rgba(6, 16, 54, .96), rgba(28, 13, 72, .94));
}

body.cosmos-ui.storybook .veil {
  background: linear-gradient(180deg, rgba(4, 8, 32, .34), rgba(3, 6, 27, .86));
}
body.cosmos-ui.storybook .vCard {
  color: #eef8ff;
  border-color: rgba(var(--cosmos-edge-rgb), .42);
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--cosmos-aqua-rgb), .18), transparent 38%),
    linear-gradient(150deg, rgba(11, 29, 83, .97), rgba(28, 12, 66, .98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .55), 0 0 28px rgba(var(--cosmos-aqua-rgb), .14);
}
body.cosmos-ui.storybook .vCard h2 { color: #fff6d9; }
body.cosmos-ui.storybook .vCard p { color: rgba(227, 239, 255, .8); }
body.cosmos-ui.storybook .vCard .chip { background: rgba(5, 11, 38, .76); color: #e9f8ff; }
body.cosmos-ui.storybook .vBtns .btn:first-child {
  color: #091333;
  border-color: #fff0a1;
  background: linear-gradient(180deg, #fff09a, #56e6c9);
  box-shadow: 0 0 22px rgba(var(--cosmos-aqua-rgb), .24);
}
body.cosmos-ui.storybook .btn.ghost { color: #e7f6ff; border-color: rgba(152, 216, 255, .48); }
body.cosmos-ui.game-active.storybook .vBtns { background: linear-gradient(180deg, rgba(10, 21, 69, 0), rgba(12, 22, 65, .96) 34%); }

@media (max-width: 700px) {
  body.cosmos-ui #stage { padding: 0 10px 40px; }
  body.cosmos-ui .introHero { min-height: 0; aspect-ratio: 9 / 16; border-radius: 26px; }
  body.cosmos-ui .introWorld { object-position: 50% 50%; }
  body.cosmos-ui .introHero .gameLockup { top: 16px; width: 72%; }
  body.cosmos-ui .introHeroCopy { bottom: 20px; width: calc(100% - 34px); }
  body.cosmos-ui .introHeroCopy h2 { font-size: 27px; }
  body.cosmos-ui .introSub { font-size: 12px; line-height: 1.38; }
  body.cosmos-ui .chooseTitle { margin-top: 22px; }
  body.cosmos-ui .modeRow { max-width: 420px; }
  body.cosmos-ui .modeCard { border-radius: 20px; padding: 16px; }
  body.cosmos-ui .lvlWrap { min-height: 760px; padding: 20px 12px 26px; border-radius: 24px; background-position: center top; }
  body.cosmos-ui .planetMapHead { grid-template-columns: 58px 1fr; margin-inline: 4px; }
  body.cosmos-ui .lvlRow { grid-template-columns: repeat(4, 1fr); gap: 28px 8px; max-height: 610px; padding: 20px 6px 34px; }
  body.cosmos-ui .lvlDot { width: 43px; height: 43px; font-size: 10px; }
  body.cosmos-ui #intro::after { position: absolute; bottom: 8px; right: 8px; }
}

@media (max-width: 1024px), (any-pointer: coarse) {
  body.cosmos-ui.game-active.storybook #game { background: #040719; }
  body.cosmos-ui.game-active.storybook #pad {
    display: block !important;
    width: 154px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  body.cosmos-ui.game-active.storybook #game:has(.veil.show) #pad { opacity: 0; pointer-events: none; }
  body.cosmos-ui.game-active.storybook .hud { padding-right: 150px; }
}

/* ===========================================================
   YATAY TUTUS — SIKISTIRILMIS HUD
   Buradaki tek kural yon dugmelerini sag basparmagin altina
   tasiyordu; dugmeler kaldirilinca (22 Agu 2026) yatay yonelim
   uyarlamasiz kaldi.
   Yatayda kisa kenar YUKSEKLIKTIR ve krom oraniyla buyur:
   olculdu, 812x375 ekranda ust krom 145 piksel yiyordu (%39).
   Bu, kamerayi geri ceken dikeyPay carpanini 1.63'e cikariyor ve
   ada okunamayacak kadar kuculuyordu. Bant burada inceltilir;
   kazanilan her piksel dogrudan sahaya gider.
   =========================================================== */
@media (orientation: landscape) and (max-height: 620px) {
  body.cosmos-ui.game-active .hud { padding: 4px 10px 0; }
  body.cosmos-ui.game-active .hudBar {
    padding: 2px 6px 2px 4px;
    border-radius: 12px;
  }
  body.cosmos-ui.game-active .hudBar .worldChip,
  body.cosmos-ui.game-active .hudBar #planetChip { transform: scale(.82); }
  body.cosmos-ui.game-active .hudNums { font-size: 10px; }
  body.cosmos-ui.game-active .hudBtn { width: 24px; height: 24px; font-size: 12px; }
  body.cosmos-ui.game-active .hudActs { gap: 5px; }
  body.cosmos-ui.game-active .hudRail { margin-top: 2px; }
  body.cosmos-ui.game-active #comBar {
    margin-top: 2px;
    padding: 2px 10px;
    font-size: 10px;
    min-height: 0;
  }
  /* Guc cipi alt paydan dusuluyor; yatayda kucultmek de sahayi buyutur. */
  body.cosmos-ui.game-active #powerChip { transform: scale(.72); transform-origin: 100% 100%; }

}

@media (prefers-reduced-motion: reduce) {
  body.cosmos-ui .modeCard,
  body.cosmos-ui .lvlDot { transition: none; }
}

/* ==========================================================
   KOZMOS OYUN EKRANI V3 · referans kadraj
   Altın çerçeveli lacivert HUD, yüzen taş saha ve büyük mobil
   kontroller. Bu katman yalnız ayrı kozmos önizlemesinde yaşar.
   ========================================================== */
body.cosmos-ui.game-active.storybook {
  --hud-navy: #171452;
  --hud-navy-deep: #090b34;
  --hud-gold: #f7c950;
  --hud-gold-hi: #fff0a8;
  --hud-teal: #18cfd1;
  background:
    radial-gradient(circle at 52% 36%, rgba(0, 220, 255, .26), transparent 30%),
    radial-gradient(circle at 13% 62%, rgba(58, 65, 212, .34), transparent 27%),
    radial-gradient(circle at 84% 71%, rgba(159, 73, 231, .27), transparent 28%),
    linear-gradient(180deg, #050a39, #071f68 48%, #042b72);
}

body.cosmos-ui.game-active.storybook .hud {
  pointer-events: none;
  color: #fff5c8;
  font-family: "Boa Cizgi", var(--display);
}
body.cosmos-ui.game-active.storybook .hudTop {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(100%, 820px);
  margin-inline: auto;
}
body.cosmos-ui.game-active.storybook .planetMedallion {
  position: relative;
  z-index: 2;
  width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
  padding-bottom: 12px;
  border: 3px solid var(--hud-gold);
  border-radius: 50%;
  color: #fff2a7;
  background:
    radial-gradient(circle at 42% 34%, #42d8dc 0 13%, #6b8dde 28%, #34317f 46%, #171345 69%),
    #171345;
  box-shadow:
    inset 0 0 0 3px #4a367e,
    inset -10px -13px 16px rgba(3, 4, 31, .55),
    0 0 0 2px rgba(78, 43, 125, .86),
    0 10px 25px rgba(0, 0, 24, .55),
    0 0 24px rgba(56, 221, 242, .2);
}
body.cosmos-ui.game-active.storybook .planetMedallion::before {
  content: "";
  position: absolute;
  inset: 27px -8px 31px;
  border: 3px solid rgba(255, 219, 104, .82);
  border-radius: 50%;
  transform: rotate(-13deg);
  box-shadow: 0 0 10px rgba(44, 227, 246, .42);
}
body.cosmos-ui.game-active.storybook .planetMedallion::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 31px;
  width: 28px;
  height: 28px;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(circle at 35% 30%, #d9ffff, #42cdd5 36%, #685bb8 74%);
  box-shadow: inset -6px -5px 8px rgba(10, 12, 78, .48), 0 0 12px rgba(68, 228, 238, .65);
}
body.cosmos-ui.game-active.storybook .planetMedallion #planetChip {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 14px;
  letter-spacing: .04em;
  text-shadow: 0 2px 2px #191044, 0 0 8px rgba(255, 219, 99, .3);
}

body.cosmos-ui.game-active.storybook .hudPanel {
  position: relative;
  height: 78px;
  display: grid;
  grid-template-columns: 1.45fr 1fr .78fr;
  overflow: hidden;
  border: 3px solid var(--hud-gold);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(62, 54, 134, .96), rgba(22, 20, 79, .98)),
    var(--hud-navy);
  box-shadow:
    inset 0 0 0 2px rgba(72, 46, 112, .94),
    inset 0 1px 0 rgba(255, 246, 185, .3),
    0 9px 23px rgba(0, 0, 26, .5);
}
body.cosmos-ui.game-active.storybook .hudPanel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #7b4d2c;
  background: var(--hud-gold);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: inset 0 0 0 2px #ffe989;
}
body.cosmos-ui.game-active.storybook .hudCell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border-right: 1px solid rgba(255, 219, 101, .26);
  box-shadow: inset -1px 0 0 rgba(3, 4, 37, .48);
}
body.cosmos-ui.game-active.storybook .hudCell:last-child { border-right: 0; box-shadow: none; }
body.cosmos-ui.game-active.storybook .hudCell .chip,
body.cosmos-ui.game-active.storybook .hudCell .chip.mint,
body.cosmos-ui.game-active.storybook .hudCell .chip.dim {
  min-height: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff1b4;
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 0 2px 2px #0b082f;
}
body.cosmos-ui.game-active.storybook .hudScore #scoreChip { font-size: 15px; }
body.cosmos-ui.game-active.storybook .hudScore #recChip { font-size: 7px; color: rgba(217, 224, 255, .58); }
body.cosmos-ui.game-active.storybook .levelTrack {
  position: relative;
  width: 88%;
  height: 8px;
  overflow: visible;
  border: 1px solid #705f96;
  border-radius: 999px;
  background: #090c35;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 232, 139, .12);
}
body.cosmos-ui.game-active.storybook .levelTrack i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14bff0, #36edf0);
  box-shadow: 0 0 9px rgba(52, 234, 247, .72);
}
body.cosmos-ui.game-active.storybook .levelTrack i::after {
  content: "";
  position: absolute;
  right: 31%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd34f;
  transform: translate(50%, -50%);
  box-shadow: 0 0 8px #ffd34f;
}
body.cosmos-ui.game-active.storybook .hudLevel em {
  color: #ffd253;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .16em;
  line-height: .8;
  text-shadow: 0 0 7px rgba(255, 205, 70, .48);
}
body.cosmos-ui.game-active.storybook .goalRelic {
  width: 25px;
  height: 25px;
  display: block;
  transform: rotate(-9deg);
  background: url("./assets/boa-sprite-parca-cosmic-v2.webp") center / contain no-repeat;
  filter: saturate(1.12) brightness(1.06) drop-shadow(0 0 8px rgba(255, 218, 93, .78));
}

body.cosmos-ui.game-active.storybook .hudTop > .underActions {
  display: flex;
  gap: 7px;
  align-items: center;
  pointer-events: auto;
}
body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip {
  width: 54px;
  height: 54px;
  min-width: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--hud-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, #62559c, #282164 62%, #100d3d);
  box-shadow: inset 0 0 0 2px #5b3d77, inset 0 1px 0 rgba(255, 245, 182, .3), 0 8px 18px rgba(0, 0, 23, .48);
  color: transparent;
  font-size: 0;
}
body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip::before {
  color: #fff0b1;
  font-family: system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 2px #17103f;
}
/* Bu üç kural eski HUD'a aitti: ikonu ::before ile basıyordu. Yeni HUD'da
   ikon METİN olarak duruyor — JS durumu doğrudan ona yazıyor (duraklat/devam,
   ses açık/kapalı), yani tek kaynak var. İkisi birlikte kalınca glif
   çiftleniyordu ve eskiler `!important` + id ile daha özgül olduğu için
   yenisi kaybediyordu. Ölü kuralı bırakmak yerine kaldırmak doğru: yoksa
   bir sonraki düzenleme aynı çarpışmayı yeniden yaşar. */

body.cosmos-ui.game-active.storybook .hudJourney {
  position: relative;
  width: min(70%, 600px);
  height: 48px;
  margin: 10px auto 0;
  pointer-events: none;
}
body.cosmos-ui.game-active.storybook .journeyAvatar {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 58px;
  height: 58px;
  border: 3px solid var(--hud-gold);
  border-radius: 50%;
  transform: translate(-32%, -50%);
  overflow: hidden;
  background: #1b6e78;
  box-shadow: inset 0 0 0 2px #2e7f8c, 0 7px 17px rgba(0, 0, 24, .45);
}
/* Portre gunduz atlasindan geliyor (kozmik surumu henuz yok) ve sicak
   kaliyordu. Ayni duzeltme 3B'de olculerek yapildi: kozmik varliklarin
   kanal ortalamasi B/R 0.78, gunduz atlasi 0.60. Bu filtre zinciri ayni
   noktaya oturuyor (olculdu: B/R 0.781, parlaklik 159.8). Resim ayri bir
   katmana alindi ki altin cerceve ve teal zemin filtreden etkilenmesin. */
body.cosmos-ui.game-active.storybook .journeyAvatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("./assets/boa-character-atlas-day-v1.webp") 0 0 / 400% 300% no-repeat;
  filter: saturate(.50) brightness(1.06) hue-rotate(-18deg);
}
/* Kağıt haritada saha kozmik ışığa çevrilmiyor; portre de çevrilmemeli. */
body.cosmos-ui.harita-kagit.game-active.storybook .journeyAvatar::before {
  filter: none;
}
body.cosmos-ui.game-active.storybook .journeyLine {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  border: 2px solid var(--hud-gold);
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(40, 36, 103, .96), rgba(19, 18, 67, .97));
  box-shadow: inset 0 0 0 2px rgba(75, 51, 109, .9), 0 7px 16px rgba(0, 0, 24, .34);
}
body.cosmos-ui.game-active.storybook .journeyLine i {
  position: absolute;
  left: 56px;
  right: 42px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--hud-gold), rgba(255, 216, 89, .2));
  transform: translateY(-50%);
}
body.cosmos-ui.game-active.storybook .journeyLine i::before,
body.cosmos-ui.game-active.storybook .journeyLine b {
  position: absolute;
  top: 50%;
  color: #ffd24f;
  transform: translateY(-50%);
  text-shadow: 0 0 8px rgba(255, 207, 66, .7);
}
body.cosmos-ui.game-active.storybook .journeyLine i::before { content: "★"; left: -25px; }
body.cosmos-ui.game-active.storybook .journeyLine b { right: 17px; font-size: 18px; }

@media (max-width: 1024px), (any-pointer: coarse) {
  body.cosmos-ui.game-active.storybook #stage,
  body.cosmos-ui.game-active.storybook #game {
    width: 100%;
    height: 100vh;
    height: 100svh;
    max-width: none;
    padding: 0;
    overflow: hidden;
  }
  body.cosmos-ui.game-active.storybook #game { display: block; }
  body.cosmos-ui.game-active.storybook .frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  /* Esnetme YALNIZ 3B tuvaline ait. #cv (2B yedek gorunum) N x N KARE bir
     izgara ciziyor; %100 x %100'e zorlanınca 336x336'lik cizim 375x812'ye
     geriliyordu — yatayda sikisip dikeyde uzayan, oynanamaz bir saha.
     3B acikken #cv zaten gorunmez (tema.css: body.storybook.webgl3d #cv
     opacity 0), o yuzden esnetme .webgl3d'ye baglandi. */
  body.cosmos-ui.game-active.storybook #cv3d,
  body.cosmos-ui.game-active.storybook.webgl3d #cv {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
  }
  /* 2B yedek: fit() zaten dogru kare olcuyu inline yaziyor; burada yalniz
     cercevenin ortasina alinir. */
  body.cosmos-ui.game-active.storybook:not(.webgl3d) #cv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 18px;
  }
  body.cosmos-ui.game-active.storybook .hud {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: max(9px, env(safe-area-inset-top)) 10px 0;
    border: 0;
    background: linear-gradient(180deg, rgba(4, 8, 46, .44), transparent);
    box-shadow: none;
  }
  body.cosmos-ui.game-active.storybook .hudTop {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 6px;
  }
  body.cosmos-ui.game-active.storybook .planetMedallion { width: 78px; padding-bottom: 9px; }
  body.cosmos-ui.game-active.storybook .planetMedallion #planetChip { font-size: 12px; }
  body.cosmos-ui.game-active.storybook .hudPanel { height: 70px; border-width: 2px; border-radius: 15px; }
  body.cosmos-ui.game-active.storybook .hudCell { padding: 6px 5px; }
  body.cosmos-ui.game-active.storybook .hudCell .chip,
  body.cosmos-ui.game-active.storybook .hudCell .chip.mint,
  body.cosmos-ui.game-active.storybook .hudCell .chip.dim { font-size: 9px; }
  body.cosmos-ui.game-active.storybook .hudScore #scoreChip { font-size: 11px; }
  body.cosmos-ui.game-active.storybook .levelTrack { height: 7px; }
  body.cosmos-ui.game-active.storybook .hudLevel em { font-size: 9px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions { gap: 5px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-width: 2px;
  }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip::before { font-size: 20px; }
  body.cosmos-ui.game-active.storybook .hudJourney { width: 68%; height: 40px; margin-top: 7px; }
  body.cosmos-ui.game-active.storybook .journeyAvatar { width: 50px; height: 50px; }
  body.cosmos-ui.game-active.storybook .journeyLine { height: 26px; }
  body.cosmos-ui.game-active.storybook #comBar {
    display: none;
  }
  body.cosmos-ui.game-active.storybook .frameLab,
  body.cosmos-ui.game-active.storybook .chapterObject,
  body.cosmos-ui.game-active.storybook .underRow,
  body.cosmos-ui.game-active.storybook .place { display: none; }

  /* IKI KISILIKTE IPUCU GERI GELIR.
     Yon dugmeleri kaldirilinca (22 Agu 2026) iki kisilik modda ekranin alt
     yarisi bosaldi; kumanda yuzeyi artik tum sahne ama bunu gosteren hicbir
     sey yok. Tek telefonu paylasan iki oyuncunun hangi yarinin kimin
     oldugunu bilmesi gerekiyor, ustelik tur 40 saniye — ogreti karti
     kaybolunca hatirlatacak bir sey kalmiyor. Satir boslugun tam basinda
     duruyor; tek kisilikte gizli kalmaya devam ediyor. */
  body.cosmos-ui.game-active.vs-mod .underRow {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    pointer-events: none;
  }
  body.cosmos-ui.game-active.vs-mod .underRow .hint {
    display: block;
    color: rgba(160, 214, 255, .58);
    font-size: 9px;
    letter-spacing: 1.1px;
    text-align: center;
    white-space: nowrap;
  }

  /* Referanstaki dört bağımsız, altın çerçeveli yön düğmesi. */
  body.cosmos-ui.game-active.storybook #pad {
    position: fixed;
    z-index: 31;
    left: 42%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: block !important;
    width: 250px;
    height: 188px;
    margin: 0;
    transform: translateX(-50%);
    opacity: 1;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 28, .48));
    pointer-events: none;
  }
  body.cosmos-ui.game-active.storybook #pad .padEtiket { display: none; }
  body.cosmos-ui.game-active.storybook #pad .padRow {
    position: absolute;
    inset: auto;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    pointer-events: none;
  }
  body.cosmos-ui.game-active.storybook #pad .padRow:nth-child(2) { top: 0; left: 0; }
  body.cosmos-ui.game-active.storybook #pad .padRow:nth-child(3) { bottom: 0; left: 0; }
  body.cosmos-ui.game-active.storybook .padBtn {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 3px solid var(--hud-gold);
    border-radius: 50%;
    color: #fff0ad;
    background: radial-gradient(circle at 35% 24%, #217f83, #075b65 58%, #073846);
    box-shadow: inset 0 0 0 3px #16516a, inset 0 1px 0 rgba(255, 249, 197, .25), 0 9px 20px rgba(0, 0, 28, .48), 0 0 12px rgba(30, 219, 214, .15);
    font-size: 25px;
    text-shadow: 0 2px 2px #06384a;
    pointer-events: auto;
    backdrop-filter: none;
  }
  body.cosmos-ui.game-active.storybook .padBtn:active {
    transform: scale(.94);
    filter: brightness(1.18);
    box-shadow: inset 0 0 0 3px #1a6576, 0 4px 12px rgba(0, 0, 28, .45), 0 0 18px rgba(36, 232, 220, .34);
  }
  body.cosmos-ui.game-active.storybook #game:has(.veil.show) #pad {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
  }

  body.cosmos-ui.game-active.storybook #powerChip,
  body.cosmos-ui.game-active.storybook #powerChip.on {
    position: fixed;
    z-index: 32;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 102px;
    height: 118px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 80px 7px 9px;
    border: 3px solid var(--hud-gold);
    border-radius: 52px 52px 18px 18px;
    color: #fff4c4;
    background:
      url("./assets/boa-sprite-elephant-cosmic-v2.webp") center 7px / 74px auto no-repeat,
      radial-gradient(circle at 50% 35%, #be8bff, #6e43d4 53%, #2c1c78 76%);
    box-shadow: inset 0 0 0 3px rgba(87, 43, 155, .92), inset 0 1px 0 rgba(255, 244, 190, .32), 0 10px 24px rgba(0, 0, 30, .58), 0 0 20px rgba(168, 102, 255, .38);
    font-size: 8px;
    line-height: 1.18;
    letter-spacing: .035em;
    text-align: center;
    text-shadow: 0 2px 2px #29135e;
    white-space: normal;
    pointer-events: auto;
    backdrop-filter: none;
  }
  body.cosmos-ui.game-active.storybook #powerChip::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 28px;
    height: 1px;
    background: rgba(255, 222, 104, .42);
  }
  body.cosmos-ui.game-active.storybook #powerChip.used { opacity: .45; filter: grayscale(.35); }
  body.cosmos-ui.game-active.storybook #game:has(.veil.show) #powerChip { opacity: 0; pointer-events: none; }

  body.cosmos-ui.game-active.storybook #ogretimKarti {
    display: none;
  }
  body.cosmos-ui.game-active.storybook .veil {
    padding: max(150px, calc(140px + env(safe-area-inset-top))) 12px max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7, 12, 53, .32), rgba(5, 7, 35, .83));
  }
}

@media (max-width: 520px) {
  body.cosmos-ui.game-active.storybook .hud { padding-inline: 6px; }
  /* Madalyon 66'dan 56'ya: panel telefonda üç sütuna 164 piksel kalıyordu ve
     üçüncü sütun "ARŞİV 0/40"ı KIRPIYORDU (client 39, scroll 41). Madalyon
     süs; sayaçlar bilgi. On piksel bilgiye verildi. */
  body.cosmos-ui.game-active.storybook .hudTop { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px; }
  body.cosmos-ui.game-active.storybook .planetMedallion { width: 56px; border-width: 2px; }
  body.cosmos-ui.game-active.storybook .planetMedallion::after { top: 11px; left: 20px; width: 20px; height: 20px; }
  body.cosmos-ui.game-active.storybook .planetMedallion::before { inset: 18px -6px 22px; border-width: 2px; }
  body.cosmos-ui.game-active.storybook .planetMedallion #planetChip { font-size: 9px; }
  body.cosmos-ui.game-active.storybook .hudPanel { height: 58px; border-radius: 13px;
    /* .78fr üçüncü sütunu içeriğinden dar bırakıyordu; oran içeriğe göre. */
    grid-template-columns: 1.15fr 1fr 1.05fr; }
  body.cosmos-ui.game-active.storybook .hudCell { padding: 4px 2px; gap: 3px; }
  body.cosmos-ui.game-active.storybook .hudCell .chip,
  body.cosmos-ui.game-active.storybook .hudCell .chip.mint,
  body.cosmos-ui.game-active.storybook .hudCell .chip.dim { font-size: 8px; letter-spacing: .015em; }
  body.cosmos-ui.game-active.storybook .hudScore #scoreChip { font-size: 11px; }
  body.cosmos-ui.game-active.storybook .hudScore #recChip { font-size: 7px; }
  body.cosmos-ui.game-active.storybook .levelTrack { height: 6px; }
  body.cosmos-ui.game-active.storybook .hudLevel em { font-size: 7px; }
  body.cosmos-ui.game-active.storybook .goalRelic { width: 19px; height: 19px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions { gap: 3px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip { width: 39px; height: 39px; min-width: 39px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip::before { font-size: 17px; }
  body.cosmos-ui.game-active.storybook .hudJourney { width: 70%; height: 34px; margin-top: 5px; }
  body.cosmos-ui.game-active.storybook .journeyAvatar { width: 42px; height: 42px; }
  body.cosmos-ui.game-active.storybook .journeyLine { height: 22px; border-width: 1.5px; }
  body.cosmos-ui.game-active.storybook #comBar { top: max(111px, calc(103px + env(safe-area-inset-top))); font-size: 6px; }
  body.cosmos-ui.game-active.storybook #pad { left: 39%; width: 226px; height: 164px; bottom: max(8px, env(safe-area-inset-bottom)); }
  body.cosmos-ui.game-active.storybook #pad .padRow { gap: 26px; }
  body.cosmos-ui.game-active.storybook .padBtn { width: 64px; height: 64px; font-size: 21px; }
  body.cosmos-ui.game-active.storybook #powerChip,
  body.cosmos-ui.game-active.storybook #powerChip.on { width: 91px; height: 106px; padding-top: 72px; background-size: 66px auto, auto; font-size: 7px; }
  body.cosmos-ui.game-active.storybook #ogretimKarti { bottom: 178px; }
}

/* ===========================================================
   ÖĞRETİM KATMANI — SAHİBİ: CLAUDE (21 Ağustos 2026)

   Uzay sürümünde #comBar ve #ogretimKarti mobilde display:none idi.
   Metinler üretiliyor ama hiç görünmüyordu; yani "ne yapmam gerektiğini
   anlamıyorum" sorunu bu sürümde olduğu gibi duruyordu. Gösteri kadrajı
   için kapatılmaları doğruydu, oynanan oyun için değil.

   Kozmik görünüm zaten tanımlı (yukarıda, derin mavi + aqua kenar);
   burada yalnız mobilde geri açılıyor ve HUD ile kumanda arasındaki
   boşluğa yerleştiriliyor. Sahaya binmez, tıklamayı yutmaz.
   =========================================================== */
@media (max-width: 1024px), (any-pointer: coarse) {
  body.cosmos-ui.game-active.storybook #comBar {
    display: flex;
    position: fixed;
    z-index: 24;
    top: max(122px, calc(114px + env(safe-area-inset-top)));
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--cosmos-aqua-rgb), .3);
    border-bottom-color: rgba(var(--cosmos-aqua-rgb), .3);
    font-size: 9.5px;
    letter-spacing: .04em;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
  }

  body.cosmos-ui.game-active.storybook #ogretimKarti {
    display: flex;
    /* Kart ALTTA iken sahanın son oynanabilir satırını örtüyordu: 1. bölümde
       iki filden biri kartın arkasında kalıyor, oyuncu hedefi göremiyordu.
       Yukarı, hedef bandının hemen altına alındı — metnin tamamı tek yerde
       toplanıyor ve sahanın ilk satırı 205px'te başladığı için hiçbir aktörü
       kapatmıyor. */
    top: max(148px, calc(140px + env(safe-area-inset-top)));
    bottom: auto;
    width: min(88%, 360px);
    font-size: 11px;
  }
  /* .show animasyonu alttan gelmeyi varsayıyordu; üstte tersine çevrilir */
  body.cosmos-ui.game-active.storybook #ogretimKarti { transform: translate(-50%, -6px); }
  body.cosmos-ui.game-active.storybook #ogretimKarti.show { transform: translate(-50%, 0); }
  /* örtü açıkken (hikaye/sonuç kartı) ikisi de çekilir */
  body.cosmos-ui.game-active.storybook #game:has(.veil.show) #comBar,
  body.cosmos-ui.game-active.storybook #game:has(.veil.show) #ogretimKarti {
    opacity: 0;
  }
}


/* ===========================================================
   CUMLE YAZI TIPI — SAHİBİ: CLAUDE (21 Ağustos 2026)
   "Boa Cizgi" bir ekran yazı tipi ve ALT UZANTISI YOK: küçük p, g, q, y
   kuyruksuz çiziliyor (ölçüldü: p 55px, P 70px, ikisi de taban çizgisinin
   üstünde bitiyor). Büyük harfli kısa etiketlerde (HUD çipleri) bu bir
   karakter; ama tam cümlelerde "topla" -> "toPla", "gövdende" -> "9övdende"
   gibi okunuyor. Öğretim kartı ve hedef bandı cümle taşıdığı için gövde
   yazı tipine geçer. Çipler ve etiketler Boa Cizgi'de kalır.
   Seçici, mobil bloklardaki (1,3,1) kurallara yetişecek kadar güçlü olmalı.
   =========================================================== */
body #comBar,
body.game-active.storybook #comBar,
body.cosmos-ui.game-active.storybook #comBar,
body #ogretimKarti,
body.game-active.storybook #ogretimKarti,
body.cosmos-ui.game-active.storybook #ogretimKarti {
  font-family: var(--sans);
  letter-spacing: 0.01em;
}

/* ===========================================================
   SONUÇ KARTI — SAHİBİ: CLAUDE (21 Ağustos 2026)
   tema.css'te kazanma/kaybetme kartları KİMLİK seçicisiyle boyanıyor
   (body.storybook #overCard.win). Kozmik kart kuralı yalnız sınıf
   seçicisi olduğu için yeniliyordu: uzay dünyasının ortasında krem bir
   çöl kartı açılıyor, üstelik gövde yazısı açık renk olduğu için krem
   zeminde okunmuyordu. Aynı kimlik gücüyle karşılığını yazıyoruz.
   =========================================================== */
body.cosmos-ui.storybook #overCard.win {
  border-color: rgba(var(--cosmos-mint-rgb), .55);
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--cosmos-mint-rgb), .2), transparent 42%),
    linear-gradient(150deg, rgba(9, 52, 62, .97), rgba(14, 30, 76, .98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .55), 0 0 30px rgba(var(--cosmos-mint-rgb), .16);
}
body.cosmos-ui.storybook #overCard.fail {
  border-color: rgba(var(--cosmos-coral-rgb), .5);
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--cosmos-coral-rgb), .18), transparent 40%),
    linear-gradient(150deg, rgba(58, 14, 50, .97), rgba(24, 12, 62, .98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .55), 0 0 30px rgba(var(--cosmos-coral-rgb), .13);
}
/* Üst etiket de çöl kırmızısındaydı; kozmoste kartın kendi rengini alır. */
body.cosmos-ui.storybook .vCard .kick { color: var(--cosmos-coral); text-shadow: 0 0 12px rgba(var(--cosmos-coral-rgb), .3); }
body.cosmos-ui.storybook .vCard.win .kick,
body.cosmos-ui.storybook #overCard.win .kick { color: var(--cosmos-mint); text-shadow: 0 0 12px rgba(var(--cosmos-mint-rgb), .32); }
body.cosmos-ui.storybook .vCard.story .kick { color: var(--cosmos-gold); text-shadow: 0 0 12px rgba(var(--cosmos-gold-rgb), .32); }

/* KISA EKRAN (SE, 8, mini): üst arayüz 667 pikselin beşte birini yiyordu ve
   oyun alanı kadraja sığmak için gereğinden çok küçülüyordu. Yolculuk şeridi
   süs bir ilerleme göstergesi; aynı bilgi HUD panelindeki bölüm izinde
   (yıldızlarla birlikte) zaten var. Kısa ekranda kaldırılır, yer sahaya
   verilir. */
@media (max-height: 700px) {
  body.cosmos-ui.game-active.storybook .hudJourney { display: none; }
  /* Yorum bandı ve öğretim kartı SABİT piksellerle yazılıydı (122 / 148).
     HUD kısalınca yerlerinde kalıp arada 57 piksellik ölü boşluk bırakıyor,
     o boşluk da sahadan çalınıyordu. Kısalan HUD'a göre yukarı alınır. */
  body.cosmos-ui.game-active.storybook #comBar {
    top: max(74px, calc(66px + env(safe-area-inset-top)));
  }
  body.cosmos-ui.game-active.storybook #ogretimKarti {
    top: max(104px, calc(96px + env(safe-area-inset-top)));
  }
}

/* ÇOK DAR EKRAN (320 px sınıfı). Panel üç sütuna 121 piksel bulabiliyor,
   içerik 125 istiyordu: "BÖLÜM 10/40" ve "ARŞİV 0/40" kırpılıyordu.
   Madalyon ve eylem düğmelerinden birkaç piksel alınıp sayaçlara verilir. */
@media (max-width: 360px) {
  body.cosmos-ui.game-active.storybook .hudTop { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 3px; }
  body.cosmos-ui.game-active.storybook .planetMedallion { width: 48px; padding-bottom: 7px; }
  body.cosmos-ui.game-active.storybook .planetMedallion::after { top: 9px; left: 17px; width: 17px; height: 17px; }
  body.cosmos-ui.game-active.storybook .planetMedallion::before { inset: 15px -5px 19px; }
  body.cosmos-ui.game-active.storybook .planetMedallion #planetChip { font-size: 8px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions { gap: 2px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip { width: 34px; height: 34px; min-width: 34px; }
  body.cosmos-ui.game-active.storybook .hudTop > .underActions .chip::before { font-size: 15px; }
  body.cosmos-ui.game-active.storybook .hudPanel { height: 52px; }
  body.cosmos-ui.game-active.storybook .hudCell { padding: 3px 1px; gap: 2px; }
  body.cosmos-ui.game-active.storybook .hudCell .chip,
  body.cosmos-ui.game-active.storybook .hudCell .chip.mint,
  body.cosmos-ui.game-active.storybook .hudCell .chip.dim { font-size: 7.4px; letter-spacing: 0; }
  body.cosmos-ui.game-active.storybook .hudScore #scoreChip { font-size: 10px; }
  body.cosmos-ui.game-active.storybook .hudScore #recChip { font-size: 6.4px; }
  body.cosmos-ui.game-active.storybook .goalRelic { width: 16px; height: 16px; }
}

/* ---------- KISA EKRAN: HİKAYE KARTI SIĞSIN ----------
   320x568'de (en küçük yaygın telefon) kart 426 piksel içerik taşıyordu ama
   398 gösteriyordu: son satır kaydırma gerektiriyordu ve kaydırma çubuğu
   gizli olduğu için hiçbir işaret yoktu. BAŞLA düğmesi kaydırma alanının
   DIŞINDA olduğu için oyun oynanabiliyordu — kaybolan şey bölümün ANLAMIYDI,
   yani kartın var oluş sebebi.

   Kazanç metinden değil BOŞLUKTAN alındı: yazı boyutları aynı kalıyor,
   yalnız iç pay, kenar boşlukları ve nesne ikonu bir tık daraltılıyor.
   Ölçüldü: 426 -> 396, 398'lik kutuya sığıyor. */
@media (max-height: 620px) {
  body.cosmos-ui #story .vCard {
    padding-top: 12px;
    padding-bottom: 10px;
  }
  body.cosmos-ui #stArt { height: 28px; margin-top: 2px; }
  body.cosmos-ui #stLine { margin-top: 5px; }
  body.cosmos-ui #stStats { margin-top: 6px; gap: 4px; }
}


/* =====================================================================
   HUD — YENİDEN TASARIM (22 Ağustos 2026, Naim'in isteği)
   Ekran kumandası kaldırıldı; yön artık sahaya dokunarak veriliyor. Bu
   HUD'u da yeniden düşünmeyi gerektirdi, çünkü eski yapı dört yatay bant
   halinde ekranın %40'ını yiyordu: madalyon + üç hücreli panel + üç yuvarlak
   düğme, altında "yolculuk" bandı, altında yorum bandı.

   Üç karar:

   1. TEK BANT. Bilgi bir satıra sığıyor; sığmayan şey bilgi değil süstü.
   2. HİYERARŞİ GÖREVDEN GELİR. En büyük ve tek renkli olan HEDEF (nane):
      oyuncunun o an yapması gereken şey o. Bölüm ve skor fildişi, arşiv
      sönük. Eskiden üçü de aynı ağırlıkta altın çipti; hiçbiri öne çıkmıyordu.
   3. ALTIN ARTIK ANLAM TAŞIYOR. Her şeyin altın halkası vardı, dolayısıyla
      altın hiçbir şey söylemiyordu. Şimdi krom soğuk gri-mavi; altın yalnız
      ilerleme rayının ucunda ve güç çipinde — ikisi de "kazanılan" şeyler.

   Ayrıca eski seviye çubuğu ve yolculuk yıldızı JS'ten hiç beslenmiyordu:
   veri gibi görünen sabit süslerdi. Yerlerine gerçek ilerlemeyi gösteren
   3 piksellik bir ray geldi (bkz. oyun.js, hudRailFill).
   ===================================================================== */
body.cosmos-ui.game-active.storybook .hud {
  padding: max(8px, env(safe-area-inset-top)) 10px 0;
  background: linear-gradient(180deg, rgba(4, 8, 46, .52), rgba(4, 8, 46, .16) 68%, transparent);
}
body.cosmos-ui .hudBar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px 5px 5px;
  border: 1px solid rgba(var(--cosmos-edge-rgb), .20);
  border-radius: 15px;
  background: rgba(7, 12, 38, .74);
  box-shadow: 0 6px 18px rgba(0, 0, 22, .34), inset 0 1px 0 rgba(180, 232, 255, .08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* Madalyon dünyanın kimliğini taşır; küçüldü ama kayboldu değil. */
body.cosmos-ui.game-active.storybook .hudBar .planetMedallion {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body.cosmos-ui.game-active.storybook .hudBar .planetMedallion i {
  position: absolute;
  inset: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d9ffff, #42cdd5 38%, #685bb8 76%);
  box-shadow: inset -4px -4px 7px rgba(10, 12, 78, .5), 0 0 10px rgba(68, 228, 238, .45);
}
body.cosmos-ui.game-active.storybook .hudBar .planetMedallion #planetChip {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cosmos-ivory);
  font-family: var(--mono, monospace);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px #12103e, 0 0 6px rgba(10, 14, 60, .9);
}
/* Sayılar: tek satır, hairline ayraçlarla. Rakamlar tabular — sayı
   değişince satır zıplamıyor. */
body.cosmos-ui .hudNums {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
}
body.cosmos-ui .hudNum {
  position: relative;
  flex: 0 0 auto;
  color: var(--cosmos-ivory, var(--cosmos-ivory));
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  white-space: nowrap;
}
body.cosmos-ui .hudNum + .hudNum::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 1px;
  height: 11px;
  background: rgba(160, 214, 255, .22);
  transform: translateY(-50%);
}
/* HEDEF: o anki görev. Tek vurgulu öge. */
body.cosmos-ui .hudNum.goal {
  color: var(--cosmos-mint, var(--cosmos-mint));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(var(--cosmos-mint-rgb), .3);
}
body.cosmos-ui .hudNum.dim {
  color: rgba(var(--cosmos-ivory-rgb), .42);
  font-size: 9px;
  font-weight: 700;
}
/* Düğmeler: yazı değil ikon; ad aria-label'da. */
body.cosmos-ui .hudActs { display: flex; flex: 0 0 auto; gap: 5px; pointer-events: auto; }
body.cosmos-ui .hudBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(150, 208, 255, .24);
  border-radius: 10px;
  background: rgba(16, 26, 68, .72);
  color: rgba(var(--cosmos-ivory-rgb), .9);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background .16s, border-color .16s, color .16s;
}
body.cosmos-ui .hudBtn:hover,
body.cosmos-ui .hudBtn:focus-visible {
  border-color: rgba(var(--cosmos-mint-rgb), .6);
  background: rgba(24, 40, 96, .86);
  color: #fff;
}
body.cosmos-ui .hudBtn[aria-pressed="true"] { color: rgba(var(--cosmos-ivory-rgb), .42); }
/* İLERLEME RAYI — eski süslerin yerine gerçek veri. */
body.cosmos-ui .hudRail {
  height: 3px;
  margin: 5px 2px 0;
  border-radius: 999px;
  background: rgba(160, 214, 255, .12);
  overflow: hidden;
}
body.cosmos-ui .hudRail i {
  display: block;
  width: 2.5%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--cosmos-mint-rgb), .85), var(--cosmos-gold, var(--cosmos-gold)));
  box-shadow: 0 0 8px rgba(var(--cosmos-gold-rgb), .45);
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 360px) {
  body.cosmos-ui .hudNums { gap: 7px; }
  body.cosmos-ui .hudNum { font-size: 9px; }
  body.cosmos-ui .hudNum.goal { font-size: 11px; }
  body.cosmos-ui .hudNum.dim { display: none; }   /* en dar ekranda arşiv düşer */
  body.cosmos-ui .hudBtn { width: 28px; height: 28px; }
}

/* Eski kozmos kuralları bu üç düğmeye ::before ile ikon basıyordu; yeni
   yapıda ikon METİN olarak duruyor (JS durumu ona yazıyor: duraklat/devam,
   ses açık/kapalı). İkisi birden çizilince glif çiftleniyordu. */
body.cosmos-ui .hudBtn::before,
body.cosmos-ui .hudBtn::after { content: none !important; }
/* Sesin kapalı hali: nota + CSS ile çizilen çapraz. Birleşik Unicode
   işareti (♪̸) yazı tipine göre kayıyordu. */
body.cosmos-ui .hudBtn.sessiz { position: relative; }
body.cosmos-ui .hudBtn.sessiz::after {
  content: "" !important;
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 130, 150, .92);
  transform: rotate(-38deg);
}
/* Dört sayı 375 pikselde tek satıra sığmıyor (244 gerekiyor, 189 var) ve
   arşiv kırpılıyordu. Arşiv oyun SIRASINDA eyleme dönük bir sayı değil —
   koleksiyon giriş ekranında ve sonuç kartında zaten görünüyor. Dar
   ekranlarda düşer, geniş ekranda kalır. */
@media (max-width: 420px) {
  body.cosmos-ui .hudNum.dim { display: none; }
  /* Hedef büyüdükçe ("FİL 10/10") satır zorlanıyor: boşluk daralır,
     sayılar bir punto iner. Kırpmak yerine sıkıştırmak doğru — üç sayının
     üçü de oyun sırasında okunması gereken bilgi. */
  body.cosmos-ui .hudNums { gap: 7px; }
  body.cosmos-ui .hudNum { font-size: 9.5px; }
  body.cosmos-ui .hudNum.goal { font-size: 11.5px; }
  /* Kalan payı SABİT ögelerden alıyoruz, yazıdan değil: madalyon ve
     düğmeler birer tık küçülünce sayı satırına 10 piksel açılıyor.
     "PARÇA 9/9" en uzun hedef metni ve fil modunda her bölümde çıkıyor. */
  body.cosmos-ui.game-active.storybook .hudBar .planetMedallion,
  body.cosmos-ui.game-active.storybook .hudBar .planetMedallion i { width: 32px; height: 32px; }
  body.cosmos-ui .hudBar { gap: 7px; }
  body.cosmos-ui .hudActs { gap: 4px; }
  body.cosmos-ui .hudBtn { width: 28px; height: 28px; font-size: 12px; }
}
/* 320 pikselde üç sayı da sığmıyordu. Hedef ve skor etiketlerini
   koruyoruz — biri görevi, öbürü ödülü adlandırıyor. Bölüm etiketi düşer:
   "22/40" zaten kesirdir ve altındaki ray aynı ilerlemeyi çiziyor. */
@media (max-width: 360px) {
  body.cosmos-ui #lvlChip .etiket { display: none; }
}


/* =====================================================================
   HİKAYE KARTI — HUD İLE AYNI DİL
   HUD tek banda inip hiyerarşiyi anlamdan kurunca kart eski dilde kaldı:
   dört kutu, üçü altın çerçeveli, hepsi aynı ağırlıkta. Aynı ilaç:
     rol-guc  → oyuncunun YAPABİLECEĞİ şey. Tek kutulu, tek vurgulu (nane).
     rol-odul → kazanacağı şey. Altın YAZI, kutu yok.
     rol-yer  → nerede olduğu. Sönük, kutu yok.
   Böylece göz önce "ne yapabilirim"e, sonra "ne kazanırım"a, en son
   "neredeyim"e gidiyor. Altın yine yalnız kazanılan şeyi işaret ediyor.
   ===================================================================== */
body.cosmos-ui #story #stStats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;                       /* alt satırlar tek bağlam bloğu gibi dursun */
}
body.cosmos-ui #story #stStats .chip {
  width: 100%;
  margin: 0;
  text-align: center;
}
/* GÜÇ — kartın tek kutusu. */
body.cosmos-ui #story #stStats .rol-guc {
  order: 1;
  padding: 9px 12px;
  border: 1px solid rgba(var(--cosmos-mint-rgb), .5);
  border-radius: 12px;
  background: rgba(16, 62, 62, .38);
  box-shadow: 0 0 16px rgba(var(--cosmos-mint-rgb), .12), inset 0 1px 0 rgba(180, 255, 235, .1);
  color: #7df7d4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.5;
}
/* ÖDÜL — altın yazı, kutu yok. */
body.cosmos-ui #story #stStats .rol-odul {
  order: 2;
  /* Çip kuralının min-height: 38px'i kutusuz satırlarda 14 piksellik metin
     için 38 piksel yer kaplıyordu — üç satırda 72 piksel boşa gidiyordu. */
  min-height: 0;
  margin-top: 10px;               /* güç kutusundan ayrılsın */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cosmos-gold, var(--cosmos-gold));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
/* YER — bağlam. Sönük, tek satır, yan yana. */
body.cosmos-ui #story #stStats .rol-yer {
  order: 3;
  min-height: 0;
  padding: 0;
  line-height: 1.45;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(214, 231, 255, .46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
}
/* "YENİ SINIR" bir kazanımdır: o an altına döner. */
body.cosmos-ui #story #stStats .rol-yer.sinir { color: rgba(var(--cosmos-gold-rgb), .82); }

/* --- SONUÇ KARTI: aynı hiyerarşi --- */
body.cosmos-ui #over #oStats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}
/* Sayılar HUD'daki sayılarla aynı dilde: tabular, fildişi, kutusuz. */
body.cosmos-ui #over #oStats .rol-sayi {
  flex: 0 1 auto;                 /* sayılar yan yana; kart kuralı tam satır yapıyordu */
  width: auto;
  min-height: 0;
  padding: 5px 11px;
  border: 1px solid rgba(150, 208, 255, .20);
  border-radius: 10px;
  background: rgba(12, 20, 54, .6);
  box-shadow: none;
  color: var(--cosmos-ivory, var(--cosmos-ivory));
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
/* Kazanılan: altın yazı, kutu yok — tüm satırı kaplar ki ödül öne çıksın. */
body.cosmos-ui #over #oStats .rol-odul {
  flex: 1 0 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cosmos-gold, var(--cosmos-gold));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
}
body.cosmos-ui #over #oStats .rol-guc {
  flex: 1 0 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(125, 247, 212, .9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
}

/* Durak satırı: numara ve bölüm adı iki ayrı düğüm, ikisi de kendi
   satırında. Tek metinken başlık ortasından kırılıyordu. */
body.cosmos-ui #planetMapIndex { display: block; line-height: 1.5; }
body.cosmos-ui #planetMapIndex .durakNo { display: block; opacity: .72; }
body.cosmos-ui #planetMapIndex .durakAd {
  display: block;
  color: var(--cosmos-ivory, var(--cosmos-ivory));
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
}