/* =========================================================== DUZEN KATMANI — SAHIBI: CLAUDE Olcek, yerlesim, kamera ve HUD bu projede benim sorumlulugumda; cizimin kendisi (tema.css, sanat.js, sprite'lar) Codex'in. Duzen duzeltmeleri onun dosyalarina yazilamayacagi icin bu katman var. SIRA: tema.css -> cosmos.css -> col-uretilmis.css -> col.css -> duzen.css. Yani duzen katmani EN SON yuklenir: deri (col modu) paleti belirler, duzen ise gecmetriyi. Bu sira bir olcumle secildi — col derisi once yuklenmedigi surece uretilmis kurallar guc cipinin panel gorselini geri diriltiyordu. Kanonik kopya: public/oyun/boa/duzen.css Cole her derlemede buradan yenilenir; oraya elle yazilmaz. YAZARKEN: sonradan yuklenmek TEK BASINA yetmez, once ozgulluk bakilir. tema.css kurallari uzun zincirler kullaniyor (`body.game-active.storybook .vCard .stats` = 0,4,1); kisa bir secici sessizce yenilir. Kural: tema.css'teki zinciri BIREBIR tekrarla, sonra yaninda `storybook`suz bir surumunu de yaz — iki kisilik modda govdede o sinif yoktur. Bir kuralin neden uygulanmadigini tahmin etme; `el.matches()` ile esleseni ol. =========================================================== */ /* =========================================================== YATAY TUTUS Yatayda kisa kenar YUKSEKLIKTIR; dikey icin bestelenmis her yerlesim orada sikisiyor. Bu blok yatayda daralan seyleri genislige cevirir — yatayda bol olan tek sey odur. =========================================================== */ @media (orientation: landscape) and (max-height: 620px) { /* --- SONUC KARTI --- Kart kaydirilabilir ve dugme blogu position:sticky ile altta sabit: dikeyde dogru calisan bir tasarim. Yatayda kart 199 piksele dusuyor, dugme blogu ise 175 — olculdu, dugmeler basligin, metnin ve skorlarin uzerine biniyordu (173 piksele kadar) ve kart okunamaz haldeydi. Cozum yukseklik degil GENISLIK: kart genisler, dugmeler yan yana dizilir. */ /* Secici NEDEN iki kere yaziliyor: tema.css'te kart `body.game-active.storybook .vCard` ile geliyor (ozgulluk 0,3,1). Tek sinifli bir secici (0,2,1) ona yenilir — olculdu, kart 346'da kaldi. Ikinci satir ayni ozgullukte oldugu icin kaynak sirasi kazandirir; birinci satir ise iki kisilik modu kapsar, cunku VS'te govdede `storybook` sinifi YOKTUR. */ body.game-active .vCard, body.game-active.storybook .vCard { width: min(620px, 96%); padding: 12px 16px 10px; } body.game-active .vBtns, body.game-active.storybook .vBtns { flex-direction: row; gap: 8px; margin: 8px -4px -6px; padding: 6px 4px; } body.game-active .vBtns > *, body.game-active.storybook .vBtns > * { flex: 1 1 0; min-width: 0; } /* Kalan tasma: bolum nesnesinin cizimi kucultulur. Cizim anlamli, o yuzden gizlenmiyor; yatayda yalnizca kuculuyor. */ body.game-active .vCard > canvas, body.game-active.storybook .vCard > canvas { max-height: 26px; width: auto; } body.game-active .vCard h2, body.game-active.storybook .vCard h2 { margin: 4px 0 2px; } body.game-active .vCard p, body.game-active.storybook .vCard p { margin: 2px 0 4px; } /* Skor cipleri tema.css'te iki sutunlu bir grid (`290px 290px`): dar dikey kartta dogru. Yatayda kart 620 piksele cikinca ayni grid uc cipi hala iki satira boluyor ve 79 piksel yiyor — olculdu; ayni satir kozmos yapisinda 24 piksel. Sayisi degisebildigi icin sabit sutun yerine saran esnek satir kullanilir. */ body.game-active .vCard .stats, body.game-active.storybook .vCard .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } body.game-active .vCard .stats > *, body.game-active.storybook .vCard .stats > * { flex: 0 1 auto; min-width: 0; } /* Cipler `width: 100%` ile geliyor — iki sutunlu grid icin dogru, esnek satirda ise her cip tum genisligi alip alt alta diziliyor: ilk denemede satir 79'dan 121 piksele CIKTI. Genislik icerige baglanir. */ body.game-active .vCard .stats .chip, body.game-active.storybook .vCard .stats .chip { width: auto; } /* --- IPUCU SATIRI --- Yatayda satir ekran kenarindan 1 piksel tasiyordu (olculdu: alt kenar 376 > 375). position:fixed ile en alta bindirmeyi denedim; ise yaramadi, cunku ust ogelerden biri kapsayici blok yaratiyor (genislik 812 yerine 604 cikti, alt kenar yine disarida kaldi). Akista kalip ust boslugun kisaltilmasi hem basit hem dogru. */ body.game-active.vs-mod .underRow { margin-top: 2px; } } /* =========================================================== NOT — YANLIS TESHIS EDILEN "TASMA" (23 Agu 2026) 320x568'de col yapisinda #game'in ekrani 12 piksel astigini olcup `height: 100svh` yerine yuzde koymustum. Yanlisti: tasma `scrIn` giris animasyonunun translateY(12px) baslangic karesinden geliyordu. Sayfayi _dbg ile bassiz surdugum icin kare uretilmiyor, animasyon `running` durumunda takili kaliyor ve olcum animasyonun ORTASINDA aliniyordu. `getAnimations().forEach(a => a.finish())` sonrasi: #game 568@0, kaydirma yok, hicbir tasma yok. Kural kaldirildi. DERS: DOM kutusu olcerken once animasyonlari bitir. Bassiz surus animasyonlari ilerletmez; olculen kutu son hal degildir. =========================================================== */ /* =========================================================== GUC CIPI — IKONA INDIRGENDI (23 Agu 2026, sahip karari: "ekrandaki gorunumunu duzelt, oyun alanini kapatiyor, daha minimal bir ikonlastirma olsun") ONCESI (kozmos): 102x118 px (kucuk ekranda 91x106) sabit panel, uzerinde fil sprite'i ve iki satir yazi; olculdu — sahanin sag alt kosesinde 9.646 piksel kareyi ortuyordu ve tahtadaki fille ayni cizimi ikinci kez tekrarliyordu. SONRASI: 46 px yuvarlak, tek maske ikonu. Ortulen alan ~1.660 piksel kare (alti kat az), dokunma hedefi 44 px esiginin ustunde. YAZI KAYBOLMUYOR: `textContent` yerinde duruyor (CSS'siz hal ve ekran okuyucu icin), yalniz gorsel olarak gizleniyor; gucun adi `aria-label`, `title` ve ipucu satirinda yaziyor. IKON tipi `data-guc` ile geliyor (oyun.js · gucCipiIkon): bakis/reveal -> goz, slow -> kum saati, guard -> kalkan, nefes -> soluk dalgalari. Maske + `background-color` kullanilir; boylece ikon her iki deride kendi metin rengini alir, ayri dosya gerekmez. OZGULLUK: kozmos zinciri `body.cosmos-ui.game-active.storybook #powerChip.on` (1 id + 4 sinif). Kurallar yalniz `.on` uzerine yazilir — cip gorunur oldugunda o sinif var; boylece tema.css'in `#powerChip { display: none }` kurali bozulmadan kalir. =========================================================== */ body.game-active.storybook #powerChip.on, body.game-active #powerChip.on, body.cosmos-ui.game-active.storybook #powerChip.on, body.cosmos-ui.game-active #powerChip.on { position: fixed; z-index: 32; top: auto; left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 46px; height: 46px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; transform: none; background-repeat: no-repeat; /* yazi gorsel olarak gizlenir, DOM'da kalir */ font-size: 0; line-height: 0; letter-spacing: 0; text-indent: 0; overflow: hidden; } /* Kozmos derisi: sprite'li panel yerine sade disk. `background-image: none` YALNIZ burada — kagit derisinde arka plan bir dogrusal gecistir (o da bir "image"dir) ve silinirse cip seffaflasir. */ body.cosmos-ui.game-active.storybook #powerChip.on, body.cosmos-ui.game-active #powerChip.on { background-image: none; /* Zemin JETONDAN gelir: col modunda ayni kural sicak topraga doner. Elle yazilmis kozmik lacivert burada kalsaydi col derisinde tek mavi ada olurdu. */ background-color: rgba(var(--cosmos-night-rgb, 4, 6, 14), .82); border: 2px solid var(--cosmos-aqua, #4CE3DA); color: #EAF7FF; box-shadow: 0 6px 16px rgba(0, 0, 24, .5), 0 0 12px rgba(76, 227, 218, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: none; } /* ikonun kendisi: cipin metin rengini alan bir maske */ body.game-active.storybook #powerChip.on::before, body.game-active #powerChip.on::before, body.cosmos-ui.game-active.storybook #powerChip.on::before, body.cosmos-ui.game-active #powerChip.on::before { content: ""; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; } /* goz — "gormek" tipli gucler (ICINI GOR, OZU GOR, ROTA CIZ ...) */ body.game-active #powerChip.on[data-guc="bakis"]::before, body.game-active #powerChip.on[data-guc="reveal"]::before, body.cosmos-ui.game-active #powerChip.on[data-guc="bakis"]::before, body.cosmos-ui.game-active #powerChip.on[data-guc="reveal"]::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* kum saati — "yavaslatan" gucler (MAKUL EMIR, ISIGI TUT ...) */ body.game-active #powerChip.on[data-guc="slow"]::before, body.cosmos-ui.game-active #powerChip.on[data-guc="slow"]::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* kalkan — "koruyan" gucler (GUVENLI CAYIR, SINIR PULU, DONGUYU KIR) */ body.game-active #powerChip.on[data-guc="guard"]::before, body.cosmos-ui.game-active #powerChip.on[data-guc="guard"]::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* soluk dalgalari — NEFES */ body.game-active #powerChip.on[data-guc="nefes"]::before, body.cosmos-ui.game-active #powerChip.on[data-guc="nefes"]::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* KULLANILDI: ikon soner ve uzerine capraz cizgi duser. tema.css'in `::after` hairline'i burada yeniden tanimlanir. */ body.game-active.storybook #powerChip.on.used::after, body.game-active #powerChip.on.used::after, body.cosmos-ui.game-active.storybook #powerChip.on.used::after, body.cosmos-ui.game-active #powerChip.on.used::after { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; bottom: auto; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; transform: rotate(-45deg); } /* kullanilmayan halde tema.css'ten gelen sus cizgisi gorunmesin */ body.game-active.storybook #powerChip.on::after, body.cosmos-ui.game-active.storybook #powerChip.on::after { content: none; } /* BEKLEME: ikon yerine kalan saniye. Sayi bilgi tasir, ikon tasimaz. */ body.game-active #powerChip.on.cool::before, body.cosmos-ui.game-active #powerChip.on.cool::before { -webkit-mask-image: none; mask-image: none; background-color: transparent; content: attr(data-sayac); width: auto; height: auto; font-family: var(--display, inherit); font-size: 15px; line-height: 1; font-weight: 700; color: currentColor; } /* =========================================================== SES CIPININ KAPALI HALI — KAGIT DERISI (23 Agu 2026) Ses artik varsayilan olarak kapali aciliyor, yani bu ilk karsilasmada herkesin gordugu hal. tema.css kapali halde ikonu tumden degistiriyordu: `content: "×"`. Duraklat (Ⅱ) ve menu (☰) dugmelerinin yaninda tek basina bir carpi "kapat" gibi okunuyor — ses degil, pencere kapatma. Kozmos derisi bunu zaten dogru yapiyor: NOTA durur, uzerine capraz cizgi duser. Kagit derisi de ayni dile getirildi. `:not(.cosmos-ui)` ile kozmosun kendi cozumune dokunulmaz. =========================================================== */ body:not(.cosmos-ui).game-active.storybook #soundChip[aria-pressed="true"]::before { content: "♪"; } body:not(.cosmos-ui).game-active.storybook #soundChip[aria-pressed="true"] { position: relative; } body:not(.cosmos-ui).game-active.storybook #soundChip[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; border-radius: 2px; background: currentColor; opacity: .85; transform: rotate(-38deg); } /* =========================================================== DUNYA SECIMI — UZAY / COL (23 Agu 2026) BOA'nin iki modu var ve bu, karakter secimi kadar birinci sinif bir karar. Onceki hali `.ruleRow` icinde 101x25 pikselik bir cipti: uc baska cipin arasinda kaybolan bir ayar gibi duruyordu. Burada iki dugmeli bir anahtar olarak, karakter seciminin USTUNDE duruyor — once hangi dunyada, sonra kimin gozunden. Renkler JETONDAN gelir; col derisi ayni kurallari sicak paletle boyar (bkz. col.css). Boylece anahtar iki dunyada da kendi dunyasinin dilinde konusur. =========================================================== */ #dunyaSecim { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 26px auto 4px; padding: 0 16px; text-align: center; } #dunyaSecim .dunyaKick { font-family: var(--display, inherit); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--cosmos-aqua, #48e7ff); opacity: .92; } #dunyaSecim .dunyaAnahtar { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid rgba(var(--cosmos-edge-rgb, 98, 226, 255), .42); border-radius: 999px; background: rgba(var(--cosmos-night-rgb, 4, 6, 14), .55); } #dunyaSecim .dunyaSec { appearance: none; min-width: 104px; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--cosmos-ivory, #fff7dc); font-family: var(--display, inherit); font-size: 13px; font-weight: 700; letter-spacing: .14em; cursor: pointer; opacity: .62; transition: background .18s ease, opacity .18s ease, color .18s ease; } #dunyaSecim .dunyaSec:hover { opacity: .86; } #dunyaSecim .dunyaSec.secili { opacity: 1; color: var(--cosmos-night, #04060e); background: var(--cosmos-aqua, #48e7ff); cursor: default; box-shadow: 0 2px 10px rgba(var(--cosmos-aqua-rgb, 72, 231, 255), .32); } #dunyaSecim .dunyaSec:focus-visible { outline: 2px solid var(--cosmos-gold, #ffd55b); outline-offset: 2px; } #dunyaSecim .dunyaNot { margin: 0; max-width: 34ch; font-size: 12px; line-height: 1.45; color: rgba(var(--cosmos-ivory-rgb, 255, 247, 220), .68); } @media (prefers-reduced-motion: reduce) { #dunyaSecim .dunyaSec { transition: none; } } /* =========================================================== OYUN SIRASINDA SAYFA KAYMAZ (23 Agu 2026, olculdu 1280x860) Alt bilgi satiri (`.place` — "LEVENT — ISTANBUL ...") oyun aktifken gizleniyordu, ama gizleme kurali HEM cosmos.css'te HEM tema.css'te birer MEDYA SORGUSUNUN icindeydi (dar ekran / kaba isaretleyici). Genis masaustunde ikisi de eslesmiyor: satir kaliyor ve belgeyi 42 piksel uzatiyordu. Sonuc, oyun ortasinda kaydirilabilen bir sayfa — tahta ekrandan cikabiliyor. Kural her genislikte ve HER MODDA gecerli: iki kisilik modda da olculdu (ayni ekranda 33 piksel — 22 marj + 11 satir). Imza satiri oyun sirasinda zaten okunmuyor; kaydirilabilir bir saha ise gercek bir kusur. =========================================================== */ body.game-active .place { display: none; } /* =========================================================== IKI KISILIK MOD DIKEYDE ORTALANIR (24 Agu 2026, olculdu) Duello 2B kare tahtayla ciziliyor ve tahta GENISLIGE bagli: 375 piksellik telefonda 320x320. Yerlesim akista oldugu icin tahta ustte kaliyor, altinda ~400 piksel bos alan duruyordu — ekranin yarisi. Bos degil de "yarim kalmis" gibi okunuyor. Bu, tahtayi buyutmez (genislik siniri ayni) ama ekrani DENGELER: bos alan altta yigilmak yerine iki yana bolunur. Tahtayi buyutmenin yolu 3B'ye gecmek ve o karar sahipte (bkz. VS-3B-KARARI.md); bu duzeltme o karardan bagimsiz ve onu engellemiyor — 3B acilirsa saha zaten tum alani kaplar. KURAL `storybook`SUZ HALLE SINIRLI — yani yalniz iki kisilik mod. Once `body.game-active` ile yazilmisti ve tek kisilik yolu BOZDU (olculdu): kozmos derisi `#stage`e `display: grid` veriyor, benim kuralim ise `justify-content` ekliyor. Ayni ozellik gridde SATIR EKSENINI (yatay) hizalar; sutunlar icerige buzulup `#game`in genisligi SIFIRA dustu, ada gorunmez oldu. Ayni ada `duzen` bolumunun iki sinamasi dusurdu — sinama isini yapti. 2B yedek yolunda (`?no3d=1`) saha zaten cercevenin icinde ortali (olculdu: 259 ust / 259 alt), yani orada bir sey gerekmiyor. =========================================================== */ body.game-active:not(.storybook) #stage { display: flex; flex-direction: column; /* `safe`: icerik ekrandan uzunsa ortalamak ustu de kirpar; safe o durumda basa hizalar ve hicbir sey kaybolmaz. */ justify-content: safe center; } body.game-active:not(.storybook) #stage > #game { flex: 0 0 auto; }