/* Uygulama ekranlarının HTML/CSS taslakları (ekran görüntüsü yerine; kişisel veri yok).
   Her ekran 360×825 px çizilir, kabı (.phone-wrap) genişliğine ölçeklenir. Markup: assets/screens.js
   Uygulama değişince burayı da güncelle (vault/touch-sitesi.md → Senkron kuralı). */
.phone-wrap { position: relative; width: 100%; aspect-ratio: 360 / 825; overflow: hidden; background: var(--bg); }
/* --s = kap genişliği / 360; screens.js ResizeObserver ile yazar (CSS'te uzunluk→sayı dönüşümü yok). */
.scr { position: absolute; top: 0; left: 0; width: 360px; height: 825px; transform-origin: 0 0; transform: scale(var(--s, 1)); background: #200a25; color: #bda2df; font-family: var(--body); font-size: 15px; line-height: 1.35; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr b { color: #fff; font-family: var(--head); font-weight: 700; }

/* Durum çubuğu + içerik + alt menü */
.s-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 0; font-size: 13px; color: #fff; font-weight: 600; height: 32px; flex: none; }
.s-status svg { width: 16px; height: 12px; margin-left: 4px; vertical-align: middle; }
.s-body { flex: 1; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.s-nav { flex: none; height: 76px; background: #361641; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 6px 8px 8px; }
.s-nav div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: #8d74a6; font-weight: 600; }
.s-nav div i { width: 54px; height: 28px; border-radius: 14px; display: grid; place-items: center; }
.s-nav div svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-nav div.on { color: #fff; }
.s-nav div.on i { background: #b972ff; color: #fff; }

/* Başlıklar */
.s-hello { font-size: 17px; color: #bda2df; }
.s-name { font-size: 30px; color: #fff; font-family: var(--head); font-weight: 700; line-height: 1.1; }
.s-top { display: flex; justify-content: space-between; align-items: flex-start; }
.s-spark { width: 48px; height: 48px; border-radius: 50%; background: #b972ff; color: #fff; display: grid; place-items: center; font-size: 22px; }
.s-label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8d74a6; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.s-label a { color: #b972ff; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }
.s-back { display: flex; align-items: center; gap: 16px; color: #fff; font-family: var(--head); font-weight: 700; font-size: 24px; }
.s-back svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-hint { font-size: 14px; color: #bda2df; }

/* Kart, düğme, rozet */
.s-card { background: #2a1033; border-radius: 22px; padding: 18px; }
.s-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 16px; background: #b972ff; color: #fff; font-family: var(--head); font-weight: 700; font-size: 16px; }
.s-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.s-stop { height: 56px; border-radius: 18px; background: #ff7a95; color: #1a0a1e; font-family: var(--head); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.s-stop.off { opacity: .45; }
.s-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.s-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #7ee0b0; margin-right: 6px; }
.s-mint { color: #a6f5e0; }
.s-muted { color: #8d74a6; }
.s-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #361641; color: #bda2df; font-size: 13px; font-weight: 600; }
.s-chip.on { background: #b972ff; color: #fff; }
.s-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cihaz çizimi (yumurta + kuyruk) */
.s-egg { width: 96px; height: 96px; flex: none; }
.s-device { display: flex; gap: 16px; align-items: flex-start; }
.s-device .s-name { font-size: 24px; }
.s-device p { margin: 4px 0 0; font-size: 14px; }

/* Kontrol menüsü satırları */
.s-menu { display: flex; flex-direction: column; gap: 10px; }
.s-menu div { display: flex; align-items: center; gap: 14px; background: #2a1033; border-radius: 18px; padding: 12px 14px; }
.s-menu div i { width: 42px; height: 42px; border-radius: 13px; background: #361641; display: grid; place-items: center; color: #a6f5e0; flex: none; }
.s-menu div i svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-menu div span { flex: 1; line-height: 1.2; }
.s-menu div span b { display: block; font-size: 16px; }
.s-menu div span small { font-size: 12.5px; color: #8d74a6; }
.s-menu div em { font-style: normal; color: #b972ff; font-size: 18px; }

/* Canlı küre */
.s-orb { width: 150px; height: 150px; border-radius: 50%; margin: 10px auto 4px; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 40% 35%, #c9a0ff, #7a3fd0 55%, #4a2270 100%); box-shadow: 0 0 0 10px rgba(185,114,255,.12), 0 0 60px rgba(185,114,255,.45); color: #fff; }
.s-orb.idle { background: radial-gradient(circle at 40% 35%, #8f6bb5, #5a3580 60%, #3a1f55 100%); box-shadow: 0 0 0 8px rgba(185,114,255,.08); }
.s-orb b { display: block; font-size: 34px; line-height: 1; }
.s-orb small { display: block; font-size: 13px; margin-top: 6px; color: #e9dcff; }

/* Yoğunluk çubukları */
.s-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin: 12px 0 8px; }
.s-bars i { flex: 1; border-radius: 6px; background: #3a1a46; }
.s-bars i.on { background: #b972ff; }
.s-bars-foot { display: flex; justify-content: space-between; font-size: 13px; color: #8d74a6; }
.s-cardhead { display: flex; justify-content: space-between; align-items: baseline; }
.s-cardhead b { font-size: 18px; }

/* Desen kartları */
.s-patterns { display: flex; gap: 10px; overflow: hidden; }
.s-pat { flex: 0 0 118px; background: #2a1033; border-radius: 18px; padding: 14px 12px 12px; border: 1px solid transparent; }
.s-pat.on { border-color: #b972ff; background: #361641; }
.s-pat .s-bars { height: 34px; margin: 0 0 10px; gap: 3px; }
.s-pat .s-bars i { background: #b48ee0; border-radius: 3px; }
.s-pat span { font-size: 15px; color: #fff; }

/* Karışım satırları */
.s-mix { background: #2a1033; border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.s-mix b { font-size: 16px; display: block; }
.s-mix small { display: block; font-size: 12.5px; color: #8d74a6; }
.s-mix span.m { font-size: 13.5px; color: #bda2df; margin: 2px 0; display: block; }
.s-mix i { width: 36px; height: 36px; border-radius: 50%; background: #361641; display: grid; place-items: center; color: #a6f5e0; }
.s-mix i svg { width: 16px; height: 16px; fill: currentColor; }
.s-mix.lite { padding: 11px 16px; }

/* Hareket sayfaları */
.s-slider { height: 8px; border-radius: 4px; background: #3a1a46; position: relative; margin: 14px 0 4px; }
.s-slider::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 4px; background: #b972ff; }
.s-slider::after { content: ""; position: absolute; left: calc(50% - 11px); top: -7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.s-motion { flex: 1; display: grid; place-items: center; }
.s-motion svg { width: 150px; height: 150px; }
.s-draw { flex: 1; border-radius: 22px; background: #160619; border: 1px dashed #553052; position: relative; overflow: hidden; }
.s-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-draw p { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 13px; color: #8d74a6; line-height: 1.6; }

/* Zar masası */
.s-felt { flex: 1; border-radius: 26px; background: radial-gradient(ellipse at 50% 40%, #2d8a52, #1a5a36 70%, #123f27); border: 10px solid #4a2a1a; box-shadow: inset 0 0 40px rgba(0,0,0,.45); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.s-dice { display: flex; gap: 14px; }
.s-die { width: 70px; height: 70px; border-radius: 14px; background: linear-gradient(145deg, #fff, #d9d4e6); box-shadow: 0 8px 16px rgba(0,0,0,.45); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 10px; }
.s-die i { border-radius: 50%; background: #2b0b35; visibility: hidden; }
.s-die i.p { visibility: visible; }
.s-dielabels { display: flex; gap: 14px; }
.s-dielabels span { width: 70px; text-align: center; font-size: 11px; letter-spacing: .1em; color: #cde7d6; font-weight: 700; }
.s-plaque { background: rgba(0,0,0,.35); border-radius: 12px; padding: 8px 14px; color: #fff; font-size: 14px; }
.s-chipstack { position: absolute; bottom: 14px; right: 16px; display: flex; gap: 4px; }
.s-chipstack i { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed #fff; background: #e5006f; }
.s-chipstack i:nth-child(2) { background: #b972ff; }
.s-chipstack i:nth-child(3) { background: #d4a017; }

/* Çark */
.s-wheelbox { flex: 1; display: grid; place-items: center; position: relative; }
.s-wheel { width: 250px; height: 250px; border-radius: 50%; border: 10px solid #4a2a1a; box-shadow: 0 0 0 4px #d4a017 inset, 0 12px 30px rgba(0,0,0,.5); background: conic-gradient(#b972ff 0 45deg, #e5006f 45deg 90deg, #a6f5e0 90deg 135deg, #9830ff 135deg 180deg, #ff5c9e 180deg 225deg, #7ee0b0 225deg 270deg, #b972ff 270deg 315deg, #e5006f 315deg 360deg); position: relative; }
.s-wheel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: #200a25; border: 4px solid #d4a017; }
.s-pointer { position: absolute; top: calc(50% - 138px); left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.s-wheel-ball { position: absolute; left: 50%; top: calc(50% - 98px); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.6); }

/* Sürpriz */
.s-field { display: flex; flex-direction: column; gap: 8px; }
.s-field b { font-size: 15px; }

/* Küçük ikonlar (durum çubuğu) */
.s-ico-row { display: flex; align-items: center; gap: 2px; }