/* ui-flat.css — [2026-09-27, בקשת-משתמש: "כל המסכים — שלא ייראו AI"; לפי הפרומט: רשת 8px, 4 צבעים שטוחים, כפתורים עם מסגרת שחורה 2px וצל קשיח, בלי גרדיאנטים/זוהר/זכוכית, כפתורי-פעולה זמינים תמיד בגלילה]. שכבה אחרונה — גוברת על index.html. הפלטה (4): רקע מט כהה · משטח בהיר-יותר · הדגשה זהובה אחת (פעולות חשובות) · טקסט. שחור = קווי-מתאר וצללים בלבד. */ body { background: var(--u-bg); color: var(--u-text); font-family: var(--font-body); } /* ── בלי אפקטים "מלאכותיים": זכוכית, זוהר טקסט ── */ #app-shell *, .overlay-panel *, .overlay-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .overlay-panel .overlay-box *, #hud *, #sidebar * { text-shadow: none !important; } /* ── כפתורים: מסגרת 2px שחורה, צל קשיח, לחיצה מוחשית ── */ .gbtn, .bm-cta, button.secondary, button.danger, .train-footer button, #pve-camp-body button, .overlay-panel .overlay-box button:where(:not(.panel-tab):not(.close):not(.icon-btn):not([class*="tab"]):not(.lang-switch):not(.gw-close)), #auth-box .lang-switch, .lp-btn { border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; box-shadow: var(--u-shadow) !important; background: var(--u-surface-2) !important; color: var(--u-text) !important; font-weight: 700; padding: 8px 16px; transition: transform .06s ease, box-shadow .06s ease !important; filter: none !important; background-image: none !important; } .gbtn:hover, .bm-cta:hover, button.secondary:hover, .overlay-panel .overlay-box button:hover, .lp-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-button-hover) !important; } .gbtn:active, .bm-cta:active, button.secondary:active, .overlay-panel .overlay-box button:active, .lp-btn:active { transform: translate(3px, 3px); box-shadow: var(--shadow-button-press) !important; } .gbtn:disabled, .bm-cta:disabled, .overlay-panel .overlay-box button:disabled { opacity: .5; transform: none; box-shadow: var(--shadow-button) !important; cursor: not-allowed; } /* פעולה ראשית = הצבע המודגש היחיד */ .bm-cta, .gbtn.primary, .gbtn.gold, .gbtn-gold, .lp-btn, button.primary, .train-footer .bm-cta, .overlay-panel .overlay-box button[class*="cta"], #pve-camp-body button { background: var(--accent) !important; color: var(--text-on-accent) !important; } button.danger, .gbtn.danger, .gbtn-danger { background: var(--u-danger) !important; color: var(--text-on-status) !important; } .lp-btn-quiet { background: transparent !important; color: var(--u-text) !important; } /* ── חלונות ── */ .overlay-panel { background: color-mix(in srgb, var(--surface-sunken) 82%, transparent); padding: 24px 16px; } .overlay-panel .overlay-box { background: var(--u-surface) !important; border: 2px solid var(--u-ink) !important; border-radius: 6px !important; box-shadow: var(--shadow-window) !important; padding: 0 24px 24px !important; color: var(--u-text); } /* כותרת החלון נשארת למעלה בגלילה */ .overlay-panel .overlay-box > h2, .overlay-panel .overlay-box > .overlay-head { position: sticky; top: 0; z-index: 6; margin: 0 -24px 16px !important; padding: 16px 24px !important; background: var(--u-surface-2); border-bottom: 2px solid var(--u-ink); font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0; } /* רקע-החלון המאויר → פס-כותרת (במקום תמונה מאחורי כל התוכן) */ .overlay-box.win-bg { background: var(--u-surface) !important; } .overlay-box.win-bg::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 88px; z-index: -1; pointer-events: none; background: var(--win-bg) center 30% / cover no-repeat !important; opacity: .35; border-radius: 4px 4px 0 0; filter: none; } .overlay-box.win-bg > h2 { background: transparent; } .overlay-box.win-bg .card-row, .overlay-box.win-bg .form-card, .overlay-box.win-bg .msg, .overlay-box.win-bg table th, .overlay-box.win-bg table td { background-color: transparent !important; } #building-modal-overlay .overlay-box.win-bg .bm-col-right, #building-modal-overlay .overlay-box.win-bg .bm-col-left:not(:empty) { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; padding: 16px !important; } .overlay-close, .overlay-box .close, .gw-close { border: 2px solid var(--u-ink) !important; background: var(--u-surface) !important; border-radius: var(--u-r) !important; box-shadow: var(--shadow-button) !important; } /* ── כרטיסים ושורות: משטח אטום, קו כהה, בלי זכוכית/צל רך ── */ .gw-card, .card-row, .form-card, .hero-card, .act-section, .a-section, .t-section, .shop-card, .ws-card, .guide-howto-card, .world-card { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; box-shadow: none !important; } .card-row { padding: 16px !important; margin-bottom: 8px !important; } .gw-card { padding: 16px !important; } .gw-card-title, .card-row-title { color: var(--u-text) !important; font-weight: 800; } .card-row-sub, .gw-sub, .bm-note, .chs-note { color: var(--u-mute) !important; } .badge, .pill, .rf-tag { border: 1px solid var(--u-ink); border-radius: 2px; background: var(--u-surface-2) !important; color: var(--u-text) !important; box-shadow: none !important; } /* ── לשוניות: מלבנים, הלשונית הפעילה בצבע ההדגשה ── */ .panel-tabbar, .admin-tabbar { background: var(--u-bg) !important; border: 2px solid var(--u-ink); border-radius: var(--u-r) !important; padding: 4px !important; gap: 4px !important; } .panel-tab { border-radius: 2px !important; color: var(--u-mute) !important; } .panel-tab.active { background: var(--accent) !important; color: var(--text-on-accent) !important; box-shadow: none !important; font-weight: 800; } .panel-tab.active img { filter: brightness(0); } /* ── שדות ── */ .overlay-panel select, .overlay-panel input[type="text"], .overlay-panel input[type="number"], .overlay-panel input[type="email"], .overlay-panel textarea, .ginput, .gselect { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; color: var(--u-text) !important; padding: 8px !important; } .overlay-panel select:focus, .overlay-panel input:focus, .overlay-panel textarea:focus { outline: 2px solid var(--line-accent) !important; outline-offset: 0; } /* ── טבלאות ── */ .overlay-panel table th { background: var(--u-surface-2) !important; color: var(--u-mute); border-bottom: 2px solid var(--u-ink) !important; } .overlay-panel table td { border-bottom: 1px solid var(--line-subtle) !important; } /* ── כפתורי פעולה זמינים תמיד בזמן גלילה ── */ .overlay-panel .overlay-box .bm-actions, .overlay-panel .overlay-box .card-row-actions-bar, .overlay-panel .overlay-box .train-footer, .overlay-panel .overlay-box .gw-actions, .overlay-panel .overlay-box .form-actions { position: sticky; bottom: 0; z-index: 5; background: var(--u-surface); padding: 12px 0; margin-top: 8px; border-top: 2px solid var(--u-ink); } #building-modal-overlay .bm-col-right > .bm-cta:last-child { position: sticky; bottom: 0; z-index: 5; } /* ── HUD וסרגל-צד ── */ #hud, #top-hud, .hud-bar { background: var(--u-surface) !important; border-bottom: 2px solid var(--u-ink) !important; box-shadow: none !important; } #sidebar { background: var(--u-surface) !important; border-inline-end: 2px solid var(--u-ink) !important; box-shadow: none !important; } .sidebar-nav button.active, .sidebar-nav button[aria-current="page"] { background: var(--u-surface-2) !important; box-shadow: inset 4px 0 0 var(--u-accent) !important; color: var(--u-text) !important; border-radius: 2px !important; } [dir="rtl"] .sidebar-nav button.active { box-shadow: inset -4px 0 0 var(--u-accent) !important; } .hud-chip, .res-chip, .hud-res { border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; background: var(--u-bg) !important; box-shadow: none !important; } /* חלון המדריך ותגיות-מידע צפות */ .tutorial-panel, #tutorial-panel, .tut-panel, .found-hover-panel, .city-data-panel, #toast, .game-toast, .gtoast { background: var(--u-surface) !important; border: 2px solid var(--u-ink) !important; border-radius: 6px !important; box-shadow: var(--u-shadow) !important; } #bg-loading-pill { background: var(--u-surface) !important; border: 2px solid var(--u-ink) !important; box-shadow: var(--shadow-button) !important; } /* ── תיקונים אחרי בדיקה חזותית ── */ /* פעולה ראשית — חזק יותר מהכלל הכללי של כפתורי החלון */ .overlay-panel .overlay-box .bm-cta, .overlay-panel .overlay-box .gbtn-gold, .gbtn-gold, #app-shell .bm-cta, .overlay-panel .overlay-box #pve-camp-body button, .overlay-panel .overlay-box button.primary { background: var(--accent) !important; color: var(--text-on-accent) !important; border: 2px solid var(--u-ink) !important; } .overlay-panel .overlay-box .gbtn-danger, .gbtn-danger, .overlay-panel .overlay-box button.danger { background: var(--u-danger) !important; color: var(--text-on-status) !important; } /* כפתור סגירה: ריבוע ברור עם X */ .close-btn, .overlay-panel .overlay-box .close-btn { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg) !important; line-height: 1; color: var(--u-text) !important; background: var(--u-bg) !important; box-shadow: var(--shadow-button) !important; } /* מקטע שמכיל כרטיסים — בלי מסגרת כפולה: המקטע שטוח, הכרטיסים ממוסגרים */ .act-section, .a-section, .t-section { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 16px; } .act-section > h3, .a-section > h3, .t-section > h3, .act-section > .act-title { font-size: var(--fs-md); font-weight: 800; margin: 8px 0; } .gw-card .card-row, .gw-card .gw-card { border-width: 1px !important; } /* ── סבב 2 של תיקונים ── */ /* כפתור-ראשי בתוך כרטיסים (בנייה/הקמת מפעל/שדרוג) — הצבע המודגש גובר */ .overlay-panel .overlay-box button.gbtn-gold, .overlay-panel .overlay-box button.bm-cta, .overlay-panel .overlay-box .gw-card button.gbtn-gold, .overlay-panel .overlay-box .rf-point button.gbtn-gold { background: var(--accent) !important; color: var(--text-on-accent) !important; } /* בוררים מקטעיים (כמו "הזמנה בלבד / הצטרפות פתוחה") — ללא כחול: נבחר = הדגשה */ .segmented, [class*="segmented"] { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; padding: 4px !important; gap: 4px; box-shadow: none !important; } .overlay-panel .overlay-box .segmented button, .segmented button { background: transparent !important; color: var(--u-mute) !important; border: 0 !important; box-shadow: none !important; transform: none !important; border-radius: 2px !important; padding: 6px 12px !important; } .overlay-panel .overlay-box .segmented button.selected, .segmented button.selected, .segmented button.active, .segmented button[aria-pressed="true"] { background: var(--accent) !important; color: var(--text-on-accent) !important; } /* נקודות-מפעל: משטח אחיד, מסגרת רציפה */ .rf-point { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-style: solid !important; border-radius: var(--u-r) !important; box-shadow: none !important; } .rf-point-head { border-bottom: 1px solid var(--line-subtle); padding-bottom: 8px; margin-bottom: 8px; } .rf-tag { background: var(--u-surface-2) !important; } /* שדה-חיפוש עם אייקון */ .overlay-panel .overlay-box [class*="search"] { background: var(--u-bg) !important; border-color: var(--u-ink) !important; box-shadow: none !important; } /* כל כחול ישן (#3a7bd5) שנשאר בכפתורים */ .overlay-panel .overlay-box button[style*="3a7bd5"], #building-modal-info button, .mc-form button { background: var(--u-surface-2) !important; } /* ── גדלי חלונות אחידים: 3 מידות לפי סוג התוכן; הגובה לפי התוכן (בלי חלון חצי-ריק), עד 88% מהמסך ── */ .overlay-panel .overlay-box { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 88vh !important; } /* קטן — טפסים קצרים ומידע ממוקד */ #minigame-overlay .overlay-box, #unit-info-overlay .overlay-box, #factory-guide-overlay .overlay-box, #player-profile-overlay .overlay-box, #rings-overlay .overlay-box, #city-quickmenu-overlay .overlay-box, #pve-camp-overlay .overlay-box, #build-queue-overlay .overlay-box, #seasons-overlay .overlay-box, #building-modal-overlay .overlay-box:not(.wide) { max-width: 560px !important; } /* בינוני — רשימות, תיבות דואר, מסחר, מחקר */ #actions-overlay .overlay-box, #mailbox-overlay .overlay-box, #notifications-overlay .overlay-box, #trade-overlay .overlay-box, #diplomacy-overlay .overlay-box, #research-overlay .overlay-box, #leaderboard-overlay .overlay-box, #shop-overlay .overlay-box, #profile-overlay .overlay-box { max-width: 880px !important; } /* גדול — לוחות עבודה עם כמה עמודות */ #alliance-overlay .overlay-box, #building-modal-overlay .overlay-box.wide, #zone-detail-overlay .overlay-box, #battle-report-overlay .overlay-box, #pve-battle-report-overlay .overlay-box, #attack-matrix-overlay .overlay-box, #admin-overlay .overlay-box { max-width: 1200px !important; } #building-modal-overlay .overlay-box.wide, #zone-detail-overlay .overlay-box { height: 88vh !important; } /* ── מחקר ולוחות ── */ .tech-card { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; border-radius: var(--u-r) !important; box-shadow: none !important; padding: 16px !important; margin-bottom: 8px; } .tech-card.researchable { border-inline-start: 6px solid var(--line-accent) !important; } .tech-card.researched { opacity: .75; } .tech-tier-label { font-weight: 800; color: var(--u-mute); margin: 16px 0 8px; text-transform: none; } .overlay-panel table tr.me, .overlay-panel table tr.is-me, .overlay-panel table tr.sel, .overlay-panel table tr.highlight, .overlay-panel table tr[class*="self"] { background: transparent !important; box-shadow: inset 4px 0 0 var(--u-accent); } .overlay-panel table tr.me td, .overlay-panel table tr[class*="self"] td { background: var(--u-surface-2) !important; font-weight: 700; } /* ══ סבב 3 — לפי ניתוח המשתמש ("AI slop"): פינות חדות, בלי קופסאות-בתוך-קופסאות, היררכיה ברורה ══ */ /* פינות חדות לכל רכיבי הממשק */ .overlay-panel .overlay-box, .overlay-panel .overlay-box *:not(img):not(canvas):not(svg):not(.relic-bar):not(i), #hud button, #sidebar button, .tutorial-panel, #tutorial-panel, .tut-panel, .found-hover-panel { border-radius: 0 !important; } /* כפתור ראשי: הדגשה + מסגרת 3px + צל קשיח. כפתור משני: מתאר בלבד, בלי צל */ .overlay-panel .overlay-box .bm-cta, .overlay-panel .overlay-box .gbtn-gold, .gbtn-gold, .bm-cta { border-width: 3px !important; } .overlay-panel .overlay-box .gbtn:not(.gbtn-gold):not(.gbtn-danger), button.secondary { background: transparent !important; color: var(--u-text) !important; border: 2px solid var(--line-strong) !important; box-shadow: none !important; } .overlay-panel .overlay-box .gbtn:not(.gbtn-gold):not(.gbtn-danger):hover, button.secondary:hover { border-color: var(--u-text) !important; transform: none; box-shadow: none !important; } .overlay-panel .overlay-box .gbtn:not(.gbtn-gold):not(.gbtn-danger):active { background: var(--u-surface-2) !important; transform: none; } /* בלי קופסאות-בתוך-קופסאות: בתוך חלון — משטח אחד, מקטעים מופרדים בקו דק */ .overlay-panel .overlay-box .gw-card, .overlay-panel .overlay-box .card-row, .overlay-panel .overlay-box .form-card, .overlay-panel .overlay-box .tech-card, .overlay-panel .overlay-box .hero-card, .overlay-panel .overlay-box .shop-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--u-line) !important; box-shadow: none !important; padding: 16px 0 !important; margin: 0 !important; } .overlay-panel .overlay-box .shop-card { border: 1px solid var(--u-line) !important; padding: 16px !important; } .overlay-panel .overlay-box .tech-card.researchable { border-inline-start: 0 !important; box-shadow: inset 4px 0 0 var(--u-accent) !important; padding-inline-start: 16px !important; } [dir="rtl"] .overlay-panel .overlay-box .tech-card.researchable { box-shadow: inset -4px 0 0 var(--u-accent) !important; } .overlay-panel .overlay-box .gw-split { gap: 24px !important; } .overlay-panel .overlay-box .gw-side { border-inline-start: 1px solid var(--u-line); padding-inline-start: 24px; } #building-modal-overlay .overlay-box.win-bg .bm-col-right, #building-modal-overlay .overlay-box.win-bg .bm-col-left:not(:empty) { background: transparent !important; border: 0 !important; padding: 0 !important; } #building-modal-overlay .bm-col-left:not(:empty) { border-inline-start: 1px solid var(--u-line) !important; padding-inline-start: 24px !important; } /* היררכיה: כותרות מקטע גדולות ומודגשות, טקסט משני קטן ועמום */ .overlay-panel .overlay-box .gw-card-title, .overlay-panel .overlay-box h3, .overlay-panel .overlay-box .act-section > h3, .overlay-panel .overlay-box .card-row-title { font-size: var(--fs-lg) !important; font-weight: 800 !important; color: var(--u-text) !important; margin-bottom: 4px; } .overlay-panel .overlay-box h4 { font-size: var(--fs-md); font-weight: 800; color: var(--u-text); margin: 16px 0 8px; } .overlay-panel .overlay-box .gw-sub, .overlay-panel .overlay-box .card-row-sub, .overlay-panel .overlay-box .bm-note, .overlay-panel .overlay-box .rf-note, .overlay-panel .overlay-box small { font-size: var(--fs-sm) !important; color: var(--u-mute) !important; font-weight: 400; } /* מספרים ונתונים — מונוספייס, בלי שיתחרו בכותרות */ .rf-pools b, .rf-workers b, .rf-net b, .rf-bonus, .tc-cost, .hud-res, .res-chip, .stat-value, .num { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; } /* נקודות-המפעל: רשימה אחת זורמת במקום 4 כרטיסים זהים — שורה לכל נקודה */ .overlay-panel .overlay-box .rf-points { display: flex !important; flex-direction: column; gap: 0 !important; border-top: 1px solid var(--u-line); margin-top: 16px; } .overlay-panel .overlay-box .rf-point { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 12px 24px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--u-line) !important; padding: 16px 0 !important; box-shadow: none !important; } .overlay-panel .overlay-box .rf-point-head { flex: 0 0 112px; border: 0 !important; margin: 0 !important; padding: 0 !important; font-weight: 800; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .overlay-panel .overlay-box .rf-point .rf-actions, .overlay-panel .overlay-box .rf-point > .gbtn-gold { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; } .overlay-panel .overlay-box .rf-point .rf-resources { display: flex; flex-wrap: wrap; gap: 8px; } .overlay-panel .overlay-box .rf-tag { font-size: var(--fs-2xs); padding: 2px 6px; } .overlay-panel .overlay-box .rf-workers { display: inline-flex; align-items: center; gap: 8px; } .overlay-panel .overlay-box .rf-workers .rf-w { width: 32px; height: 32px; padding: 0 !important; font-size: var(--fs-lg); } /* ── סבב 4: כפתורים בגודל התוכן, לא פסים רחבים; טקסט-משנה בתוך כפתור קריא ── */ .overlay-panel .overlay-box .gbtn, .overlay-panel .overlay-box .gbtn-lg, .overlay-panel .overlay-box .rf-point button { width: auto !important; min-width: 0; align-self: flex-start; } .overlay-panel .overlay-box .bm-cta { width: 100%; } .overlay-panel .overlay-box .gbtn-gold small, .overlay-panel .overlay-box .bm-cta small, .gbtn-gold small { color: var(--text-on-accent) !important; opacity: .85; font-weight: 700; margin-inline-start: 8px; font-size: var(--fs-xs) !important; } .overlay-panel .overlay-box .gbtn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; } .overlay-panel .overlay-box .rf-point .rf-actions { flex-direction: row; } .overlay-panel .overlay-box .rf-point .rf-actions select { width: auto !important; min-width: 160px; } .overlay-panel .overlay-box .rf-workers .gbtn { min-height: 32px; font-size: var(--fs-md) !important; } /* כותרות — צבע טקסט אחד, לא כחול */ .overlay-panel .overlay-box h2, .overlay-panel .overlay-box h3, .overlay-panel .overlay-box h4, .overlay-panel .overlay-box h5, .overlay-panel .overlay-box [class*="-title"], .overlay-panel .overlay-box [class*="section-title"] { color: var(--u-text) !important; } /* מקטעי חלון הברית ושדה-חיפוש: בלי מסגרת כפולה */ .overlay-panel .overlay-box .a-section, .overlay-panel .overlay-box [class^="alp-"], .overlay-panel .overlay-box [class*=" alp-"] { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; } .overlay-panel .overlay-box .a-section { border-bottom: 1px solid var(--u-line) !important; padding: 8px 0 16px !important; } .overlay-panel .overlay-box [class*="search"] { border: 0 !important; padding: 0 !important; background: transparent !important; } .overlay-panel .overlay-box [class*="search"] input { width: 100%; } /* רק צבע-הדגשה אחד: ירוק/אדום נשארים רק לסימון מצב (✓/✕), בגוון עמום */ .overlay-panel .overlay-box .ok, .overlay-panel .overlay-box .t-bonus, .overlay-panel .overlay-box [class*="req-ok"] { color: var(--text-muted) !important; } .overlay-panel .overlay-box .bad, .overlay-panel .overlay-box .t-penalty, .overlay-panel .overlay-box [class*="req-bad"] { color: var(--status-warning) !important; } /* ── סבב 5: היררכיית פעולות — משני/הרסני לא בצבע ההדגשה ── */ .overlay-panel .overlay-box .bm-cta.bm-sec, #app-shell .bm-cta.bm-sec, .bm-cta.bm-sec { background: transparent !important; color: var(--u-text) !important; border: 2px solid var(--line-strong) !important; box-shadow: none !important; width: auto; } .overlay-panel .overlay-box .rf-workers .gbtn { width: 32px !important; min-width: 32px !important; height: 32px; padding: 0 !important; justify-content: center; } /* ── סבב 6: סרגל עליון שטוח (מלבנים, בלי גלולות מוזהבות) ומובייל ── */ .res-item, .hud-res-item, #hud-resources > *, .chip, .chip-group > *, #city-select, #world-switch, [id*="world-pill"], .hud-btn, .topbar button, #topbar button, .top-actions button { border-radius: 0 !important; } .res-item, .hud-res-item, #hud-resources > * { background: var(--u-bg) !important; border: 2px solid var(--u-ink) !important; box-shadow: none !important; } .res-item b, .hud-res-item b, #hud-resources b { font-family: var(--font-mono); } @media (max-width: 700px) { .overlay-panel { padding: 8px; } .overlay-panel .overlay-box { padding: 0 16px 16px !important; box-shadow: var(--shadow-float) !important; max-height: 94vh !important; } .overlay-panel .overlay-box > h2, .overlay-panel .overlay-box > .overlay-head { margin: 0 -16px 12px !important; padding: 12px 16px !important; } .overlay-panel .overlay-box .card-row { flex-wrap: wrap !important; gap: 8px !important; } .overlay-panel .overlay-box .card-row > * { min-width: 0; } .overlay-panel .overlay-box .card-row-body { flex: 1 1 100% !important; } .overlay-panel .overlay-box .gw-side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--u-line); padding-top: 16px; } .overlay-panel .overlay-box .rf-point-head { flex-basis: 100%; flex-direction: row; } } /* ── כפתור עיצוב בהיר/כהה בסרגל העליון (הועבר מ-theme-light.css) ── */ /* רקע מאחורי חלון פתוח */ .overlay-panel { background: var(--surface-scrim) !important; } /* לשונית פעילה */ .panel-tabbar .panel-tab.active, .panel-tab.active { background: var(--tab-active-bg) !important; color: var(--tab-active-text) !important; } /* ── סרגל-המשאבים העליון [2026-09-27, בקשת-משתמש: בלי גלילה אף פעם; טקסט קטן יותר; קצב-הייצור "מרחף" בבועה מתחת] ── */ #top-hud { height: auto !important; min-height: 56px; } #hud-resources { overflow: visible !important; flex-wrap: nowrap; gap: var(--sp-1) var(--sp-2) !important; padding-block: 2px 10px; align-content: center; } #hud-resources.is-wrap { flex-wrap: wrap; row-gap: 16px !important; } .hud-res-item { position: relative; height: 26px; padding: 0 var(--sp-2) !important; gap: var(--sp-1) !important; font-size: var(--fs-xs) !important; background: var(--hud-chip-bg) !important; border: var(--bw) solid var(--hud-chip-line) !important; } .hud-res-item img, .hud-res-item .ui-ico { width: 16px !important; height: 16px !important; } .hud-res-item b { color: var(--text-strong); font-weight: var(--fw-bold); } .hud-res-item .hud-rate { position: absolute; left: 50%; top: calc(100% - 5px); transform: translateX(-50%); z-index: 2; pointer-events: none; margin: 0 !important; padding: 0 5px; line-height: 14px; white-space: nowrap; font: var(--fw-bold) var(--fs-3xs) var(--font-mono); background: var(--surface-panel); border: var(--bw) solid var(--line); border-radius: var(--radius-bubble); } .hud-res-item .hud-rate.pos { color: var(--status-positive); } .hud-res-item .hud-rate.neg { color: var(--status-negative); } /* ── טיפוגרפיה לפי סוג-טקסט [2026-09-27, בקשת-משתמש: "הטקסטים על הפנים — גם בבהיר וגם בכהה"] ── גופן אחד לכל הממשק, סולם גדלים אחד, צבע לפי תפקיד. מספרים — מונוספייס. */ body { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #app-shell, .overlay-panel, .game-tip, .tutorial-panel, #tutorial-panel, .tut-panel { font-family: var(--font-body); } .overlay-panel .overlay-box > h2, .overlay-panel .overlay-box > .overlay-head { font-family: var(--font-display); font-size: var(--fs-xl) !important; font-weight: var(--fw-heavy); color: var(--text-strong) !important; line-height: var(--lh-tight); } .overlay-panel .overlay-box h3, .gw-card-title, .card-row-title { font-size: var(--fs-lg) !important; font-weight: var(--fw-heavy) !important; color: var(--text-strong) !important; line-height: var(--lh-tight); } .overlay-panel .overlay-box h4 { font-size: var(--fs-md) !important; font-weight: var(--fw-bold); color: var(--text-strong) !important; } .overlay-panel .overlay-box p, .overlay-panel .overlay-box li, .overlay-panel .overlay-box td, .overlay-panel .overlay-box label { line-height: var(--lh-body); } .overlay-panel .overlay-box small, .overlay-panel .overlay-box .gw-sub, .overlay-panel .overlay-box .card-row-sub, .overlay-panel .overlay-box .bm-note { font-size: var(--fs-sm) !important; color: var(--text-muted) !important; } .overlay-panel .overlay-box table { font-size: var(--fs-sm); } .overlay-panel .overlay-box table th { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted) !important; text-transform: none; letter-spacing: 0; } .num, .overlay-panel .overlay-box .num, td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } a { color: var(--text-link); } #top-hud.res-row { flex-wrap: wrap; row-gap: 0; } #top-hud.res-row > #hud-resources { order: 10; flex: 1 1 100%; width: 100%; justify-content: flex-start; padding-block: 0 12px; } #top-hud.res-row { padding-top: var(--sp-2) !important; } @media (max-width: 760px) { #top-hud { padding-top: var(--sp-2) !important; } #hud-resources { gap: 14px var(--sp-1) !important; } .hud-res-item { padding: 0 5px !important; gap: 3px !important; height: 24px; } .hud-res-item img, .hud-res-item .ui-ico { width: 14px !important; height: 14px !important; } } /* ══ שכבת ערכת-הממשק המצוירת [2026-09-27, בקשת-משתמש] — פעילה כש- (design-tokens.css: --kit-ready: 1). עיקרון (הכרעת-משתמש: "לפי אלמנטים — המשחק יחתוך במיקום הרלוונטי, בלי לכווץ או להגדיל"): • רכיב אופקי = קצה-שמאל + קצה-ימין (בגובה הרכיב, ביחס המקורי) + אריח-אמצע שחוזר על עצמו בגודלו הטבעי (repeat-x), חתוך בסוף. האריח מצויר רק בתוך אזור-התוכן (content-box) — כך הוא לא מציץ מתחת לקישוטי-הקצה. • מסגרת = 4 פינות + 4 שוליים שחוזרים (לא נמתחים) + רקע-פנימי (טוקני ‎--slice / --edge / --rep‎). :not(#_k) מעלה את הקדימות מעל כללים ישנים ומפורטים. כל תמונה/גובה/רוחב — מטוקנים בלבד. */ html[data-kit]:not(#_k) .bm-cta:not(.bm-sec), html[data-kit]:not(#_k) .gbtn-gold, html[data-kit]:not(#_k) .overlay-panel .overlay-box button.primary, html[data-kit]:not(#_k) .city-edit-toggle, html[data-kit]:not(#_k) .gbtn:not(.gbtn-gold):not(.gbtn-danger), html[data-kit]:not(#_k) button.secondary, html[data-kit]:not(#_k) .bm-cta.bm-sec, html[data-kit]:not(#_k) .page-btn, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]), html[data-kit]:not(#_k) .tut-panel button:not([class]), html[data-kit]:not(#_k) .gbtn-danger, html[data-kit]:not(#_k) button.danger, html[data-kit]:not(#_k) .panel-tab, html[data-kit]:not(#_k) .picker-cat-btn, html[data-kit]:not(#_k) .ceb-cat, html[data-kit]:not(#_k) .segmented button, html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button, html[data-kit]:not(#_k) .hud-res-item, html[data-kit]:not(#_k) .alp-chip, html[data-kit]:not(#_k) .ginput, html[data-kit]:not(#_k) .overlay-panel input[type="text"], html[data-kit]:not(#_k) .overlay-panel input[type="number"], html[data-kit]:not(#_k) .overlay-panel input[type="email"], html[data-kit]:not(#_k) .overlay-panel input[type="search"], html[data-kit]:not(#_k) .overlay-panel input[type="datetime-local"], html[data-kit]:not(#_k) .gselect, html[data-kit]:not(#_k) .overlay-panel select, html[data-kit]:not(#_k) #city-select, html[data-kit]:not(#_k) #btn-world-switch, html[data-kit]:not(#_k) .hud-res-item .hud-rate { background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; padding-block: 0 !important; padding-inline: 4px !important; white-space: nowrap !important; min-height: var(--k-h); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; overflow: visible !important; text-overflow: clip !important; } html[data-kit]:not(#_k) .bm-cta:not(.bm-sec), html[data-kit]:not(#_k) .gbtn-gold, html[data-kit]:not(#_k) .overlay-panel .overlay-box button.primary, html[data-kit]:not(#_k) .city-edit-toggle { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-primary);--k-cs: var(--kcap-btn-primary-start); --k-ce: var(--kcap-btn-primary-end); --k-full: var(--img-btn-primary); --k-sl: var(--sl-btn-primary); --k-l: var(--img-btn-primary-l); --k-m: var(--img-btn-primary-m); --k-r: var(--img-btn-primary-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .bm-cta:not(.bm-sec):hover, html[data-kit]:not(#_k) .gbtn-gold:hover, html[data-kit]:not(#_k) .overlay-panel .overlay-box button.primary:hover, html[data-kit]:not(#_k) .city-edit-toggle:hover { --k-full: var(--img-btn-primary-hover); --k-sl: var(--sl-btn-primary-hover); --k-l: var(--img-btn-primary-hover-l); --k-m: var(--img-btn-primary-hover-m); --k-r: var(--img-btn-primary-hover-r); } html[data-kit]:not(#_k) .bm-cta:not(.bm-sec):active, html[data-kit]:not(#_k) .gbtn-gold:active, html[data-kit]:not(#_k) .overlay-panel .overlay-box button.primary:active, html[data-kit]:not(#_k) .city-edit-toggle:active { --k-full: var(--img-btn-primary-pressed); --k-sl: var(--sl-btn-primary-pressed); --k-l: var(--img-btn-primary-pressed-l); --k-m: var(--img-btn-primary-pressed-m); --k-r: var(--img-btn-primary-pressed-r); } html[data-kit]:not(#_k) .gbtn-gold small, html[data-kit]:not(#_k) .bm-cta small, html[data-kit]:not(#_k) .city-edit-toggle small { color: var(--kit-text-accent) !important; opacity: 1; } html[data-kit]:not(#_k) .gbtn:not(.gbtn-gold):not(.gbtn-danger), html[data-kit]:not(#_k) button.secondary, html[data-kit]:not(#_k) .bm-cta.bm-sec, html[data-kit]:not(#_k) .page-btn, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]), html[data-kit]:not(#_k) .tut-panel button:not([class]) { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-secondary);--k-cs: var(--kcap-btn-secondary-start); --k-ce: var(--kcap-btn-secondary-end); --k-full: var(--img-btn-secondary); --k-sl: var(--sl-btn-secondary); --k-l: var(--img-btn-secondary-l); --k-m: var(--img-btn-secondary-m); --k-r: var(--img-btn-secondary-r); color: var(--kit-text-muted) !important; } html[data-kit]:not(#_k) .gbtn:not(.gbtn-gold):not(.gbtn-danger):hover, html[data-kit]:not(#_k) button.secondary:hover, html[data-kit]:not(#_k) .bm-cta.bm-sec:hover, html[data-kit]:not(#_k) .page-btn:hover, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]):hover, html[data-kit]:not(#_k) .tut-panel button:not([class]):hover { --k-full: var(--img-btn-secondary-hover); --k-sl: var(--sl-btn-secondary-hover); --k-l: var(--img-btn-secondary-hover-l); --k-m: var(--img-btn-secondary-hover-m); --k-r: var(--img-btn-secondary-hover-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .gbtn:not(.gbtn-gold):not(.gbtn-danger):active, html[data-kit]:not(#_k) button.secondary:active, html[data-kit]:not(#_k) .bm-cta.bm-sec:active, html[data-kit]:not(#_k) .page-btn:active, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]):active, html[data-kit]:not(#_k) .tut-panel button:not([class]):active { --k-full: var(--img-btn-secondary-pressed); --k-sl: var(--sl-btn-secondary-pressed); --k-l: var(--img-btn-secondary-pressed-l); --k-m: var(--img-btn-secondary-pressed-m); --k-r: var(--img-btn-secondary-pressed-r); } html[data-kit]:not(#_k) .gbtn:not(.gbtn-gold):not(.gbtn-danger):disabled, html[data-kit]:not(#_k) button.secondary:disabled, html[data-kit]:not(#_k) .bm-cta.bm-sec:disabled, html[data-kit]:not(#_k) .page-btn:disabled, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]):disabled, html[data-kit]:not(#_k) .tut-panel button:not([class]):disabled, html[data-kit]:not(#_k) .bm-cta:not(.bm-sec):disabled, html[data-kit]:not(#_k) .gbtn-gold:disabled, html[data-kit]:not(#_k) .overlay-panel .overlay-box button.primary:disabled, html[data-kit]:not(#_k) .city-edit-toggle:disabled, html[data-kit]:not(#_k) .gbtn-danger:disabled, html[data-kit]:not(#_k) button.danger:disabled { opacity: .45; cursor: not-allowed; } html[data-kit]:not(#_k) .gbtn-danger, html[data-kit]:not(#_k) button.danger { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-danger);--k-cs: var(--kcap-btn-danger-start); --k-ce: var(--kcap-btn-danger-end); --k-full: var(--img-btn-danger); --k-sl: var(--sl-btn-danger); --k-l: var(--img-btn-danger-l); --k-m: var(--img-btn-danger-m); --k-r: var(--img-btn-danger-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .gbtn-danger:hover, html[data-kit]:not(#_k) button.danger:hover { --k-full: var(--img-btn-danger-hover); --k-sl: var(--sl-btn-danger-hover); --k-l: var(--img-btn-danger-hover-l); --k-m: var(--img-btn-danger-hover-m); --k-r: var(--img-btn-danger-hover-r); } html[data-kit]:not(#_k) .gbtn-danger:active, html[data-kit]:not(#_k) button.danger:active { --k-full: var(--img-btn-danger-pressed); --k-sl: var(--sl-btn-danger-pressed); --k-l: var(--img-btn-danger-pressed-l); --k-m: var(--img-btn-danger-pressed-m); --k-r: var(--img-btn-danger-pressed-r); } html[data-kit]:not(#_k) .panel-tabbar, html[data-kit]:not(#_k) .segmented { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 6px !important; } html[data-kit]:not(#_k) .panel-tab, html[data-kit]:not(#_k) .picker-cat-btn, html[data-kit]:not(#_k) .ceb-cat, html[data-kit]:not(#_k) .segmented button { --k-h: var(--kh-tab); --k-cap: var(--kcap-tab);--k-cs: var(--kcap-tab-start); --k-ce: var(--kcap-tab-end); --k-full: var(--img-tab); --k-sl: var(--sl-tab); --k-l: var(--img-tab-l); --k-m: var(--img-tab-m); --k-r: var(--img-tab-r); color: var(--kit-text-muted) !important; } html[data-kit]:not(#_k) .panel-tab:hover, html[data-kit]:not(#_k) .picker-cat-btn:hover, html[data-kit]:not(#_k) .ceb-cat:hover, html[data-kit]:not(#_k) .segmented button:hover { --k-full: var(--img-tab-hover); --k-sl: var(--sl-tab-hover); --k-l: var(--img-tab-hover-l); --k-m: var(--img-tab-hover-m); --k-r: var(--img-tab-hover-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .panel-tab.active, html[data-kit]:not(#_k) .panel-tabbar .panel-tab.active, html[data-kit]:not(#_k) .picker-cat-btn.active, html[data-kit]:not(#_k) .ceb-cat.on, html[data-kit]:not(#_k) .segmented button.selected, html[data-kit]:not(#_k) .segmented button.active { --k-full: var(--img-tab-active); --k-sl: var(--sl-tab-active); --k-l: var(--img-tab-active-l); --k-m: var(--img-tab-active-m); --k-r: var(--img-tab-active-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .panel-tab.active img { filter: none; } html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button { --k-h: var(--kh-menu); --k-cap: var(--kcap-menu-item, var(--kcap-menu));--k-cs: var(--kcap-menu-item-start); --k-ce: var(--kcap-menu-item-end); --k-full: var(--img-menu-item); --k-sl: var(--sl-menu-item); --k-l: var(--img-menu-item-l); --k-m: var(--img-menu-item-m); --k-r: var(--img-menu-item-r); margin-bottom: 4px; justify-content: flex-start; color: var(--kit-text-muted) !important; } html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button:hover, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button:hover { --k-full: var(--img-menu-item-hover); --k-sl: var(--sl-menu-item-hover); --k-l: var(--img-menu-item-hover-l); --k-m: var(--img-menu-item-hover-m); --k-r: var(--img-menu-item-hover-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button.active, html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button[aria-current="page"], html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button.active { --k-full: var(--img-menu-item-active); --k-sl: var(--sl-menu-item-active); --k-l: var(--img-menu-item-active-l); --k-m: var(--img-menu-item-active-m); --k-r: var(--img-menu-item-active-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .hud-res-item, html[data-kit]:not(#_k) .alp-chip { --k-h: var(--kh-chip); --k-cap: var(--kcap-chip);--k-cs: var(--kcap-chip-start); --k-ce: var(--kcap-chip-end); --k-full: var(--img-chip); --k-sl: var(--sl-chip); --k-l: var(--img-chip-l); --k-m: var(--img-chip-m); --k-r: var(--img-chip-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .hud-res-item .hud-rate { --k-h: var(--kh-bubble); --k-cap: var(--kcap-bubble);--k-cs: var(--kcap-bubble-start); --k-ce: var(--kcap-bubble-end); --k-full: var(--img-bubble); --k-sl: var(--sl-bubble); --k-l: var(--img-bubble-l); --k-m: var(--img-bubble-m); --k-r: var(--img-bubble-r); min-height: var(--kh-bubble); height: var(--kh-bubble); line-height: var(--kh-bubble); } html[data-kit]:not(#_k) .ginput, html[data-kit]:not(#_k) .overlay-panel input[type="text"], html[data-kit]:not(#_k) .overlay-panel input[type="number"], html[data-kit]:not(#_k) .overlay-panel input[type="email"], html[data-kit]:not(#_k) .overlay-panel input[type="search"], html[data-kit]:not(#_k) .overlay-panel input[type="datetime-local"] { --k-h: var(--kh-input); --k-cap: var(--kcap-input);--k-cs: var(--kcap-input-start); --k-ce: var(--kcap-input-end); --k-full: var(--img-input); --k-sl: var(--sl-input); --k-l: var(--img-input-l); --k-m: var(--img-input-m); --k-r: var(--img-input-r); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .ginput:focus, html[data-kit]:not(#_k) .overlay-panel input[type="text"]:focus, html[data-kit]:not(#_k) .overlay-panel input[type="number"]:focus, html[data-kit]:not(#_k) .overlay-panel input[type="email"]:focus, html[data-kit]:not(#_k) .overlay-panel input[type="search"]:focus, html[data-kit]:not(#_k) .overlay-panel input[type="datetime-local"]:focus { --k-full: var(--img-input-focus); --k-sl: var(--sl-input-focus); --k-l: var(--img-input-focus-l); --k-m: var(--img-input-focus-m); --k-r: var(--img-input-focus-r); outline: 0 !important; } html[data-kit]:not(#_k) .gselect, html[data-kit]:not(#_k) .overlay-panel select, html[data-kit]:not(#_k) #city-select, html[data-kit]:not(#_k) #btn-world-switch { --k-h: var(--kh-input); --k-cap: var(--kcap-selector);--k-cs: var(--kcap-selector-start); --k-ce: var(--kcap-selector-end); --k-full: var(--img-selector); --k-sl: var(--sl-selector); --k-l: var(--img-selector-l); --k-m: var(--img-selector-m); --k-r: var(--img-selector-r); color: var(--kit-text) !important; appearance: none; -webkit-appearance: none; padding-left: 4px !important; padding-right: 4px !important; overflow: hidden !important; text-overflow: ellipsis !important; } html[data-kit]:not(#_k) select option { background: var(--surface-panel); color: var(--text-strong); } /* כפתורים ריבועיים (אייקונים, זום, נעיצה, תפריט מצומצם) — תמונה שלמה בגודל הרכיב */ html[data-kit]:not(#_k) #top-hud > button:not(#btn-world-switch):not(#btn-deserters-hud):not(.hud-res-item), html[data-kit]:not(#_k) .local-zoom-controls .lz-btn, html[data-kit]:not(#_k) .sidebar-pin, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button { background: var(--img-btn-icon) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: var(--kh-square); min-height: var(--kh-square); display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; } html[data-kit]:not(#_k) #top-hud > button:not(#btn-world-switch):not(#btn-deserters-hud):not(.hud-res-item):hover, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn:hover, html[data-kit]:not(#_k) .sidebar-pin:hover, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button:hover { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) #top-hud > button:not(#btn-world-switch):not(#btn-deserters-hud):not(.hud-res-item):active, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn:active, html[data-kit]:not(#_k) .sidebar-pin:active, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button:active { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-press); } html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; margin: 0 auto 6px !important; } html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) { border-width: 22px 3px !important; } html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav { align-items: center; padding: 0 !important; } html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button.active, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button[aria-current="page"] { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) .local-zoom-controls { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 6px; } html[data-kit]:not(#_k) .local-zoom-controls .lz-btn { width: 36px; height: 36px; color: var(--kit-text-accent) !important; } html[data-kit]:not(#_k) .close-btn, html[data-kit]:not(#_k) .overlay-panel .overlay-box .close-btn, html[data-kit]:not(#_k) .tut-x { background: var(--img-btn-close) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; width: 40px; height: 40px; } html[data-kit]:not(#_k) .close-btn:hover, html[data-kit]:not(#_k) .tut-x:hover { background-image: var(--img-btn-close) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) .close-btn:active { background-image: var(--img-btn-close) !important; filter: var(--kit-sq-press); } /* מסגרות: 4 פינות + שוליים חוזרים (--rep-*) + רקע-פנימי בהיר (תוכן) */ html[data-kit]:not(#_k) .overlay-panel .overlay-box { border-style: solid !important; border-width: var(--edge-window) !important; border-color: transparent !important; border-image: var(--img-window) var(--slice-window) var(--rep-window) !important; background: var(--surface-panel) var(--img-content-bg) center / 512px !important; background-clip: padding-box !important; box-shadow: var(--shadow-window) !important; } html[data-kit]:not(#_k) .overlay-panel .overlay-box > h2, html[data-kit]:not(#_k) .overlay-panel .overlay-box > .overlay-head { background-color: var(--surface-raised) !important; color: var(--text-strong) !important; border-bottom: 2px solid var(--line-accent) !important; } html[data-kit]:not(#_k) .game-tip { border-style: solid !important; border-width: var(--edge-tooltip) !important; border-color: transparent !important; border-image: var(--img-tooltip) var(--slice-tooltip) var(--rep-tooltip) !important; background: var(--surface-panel) !important; background-clip: padding-box !important; box-shadow: var(--shadow-float) !important; } html[data-kit]:not(#_k) .tutorial-panel, html[data-kit]:not(#_k) #tutorial-panel, html[data-kit]:not(#_k) .tut-panel, html[data-kit]:not(#_k) .hub-float .chf-body, html[data-kit]:not(#_k) .alp-card, html[data-kit]:not(#_k) .shop-card, html[data-kit]:not(#_k) .ws-card { border-style: solid !important; border-width: var(--edge-card) !important; border-color: transparent !important; border-image: var(--img-card) var(--slice-card) var(--rep-card) !important; background: var(--surface-panel) var(--img-content-bg) center / 512px !important; background-clip: padding-box !important; box-shadow: var(--shadow-float) !important; border-radius: 0 !important; } html[data-kit]:not(#_k) #sidebar { box-sizing: border-box !important; border-style: solid !important; border-width: var(--edge-menu-panel) !important; border-color: transparent !important; border-image: var(--img-menu-panel) var(--slice-menu-panel) var(--rep-menu-panel) !important; background: var(--surface-page) var(--img-menu-bg) center / 512px !important; box-shadow: none !important; } html[data-kit]:not(#_k) .sidebar-sep { height: 14px; border: 0 !important; background: var(--img-menu-divider) center / 100% 100% no-repeat !important; } /* רקע הדף: טקסטורה חלקה + שכבת-עומק (הילה במרכז, כהה בשוליים) */ html[data-kit]:not(#_k) body { background: var(--page-glow), var(--surface-page) var(--img-page-bg) center / 512px !important; background-attachment: fixed !important; } /* טקסט קצר לא מוסתר ע"י קישוטי-הקצה: רוחב מינימלי = שני הקצוות + מקום לטקסט */ html[data-kit]:not(#_k) .gbtn, html[data-kit]:not(#_k) .bm-cta, html[data-kit]:not(#_k) button.secondary, html[data-kit]:not(#_k) button.danger, html[data-kit]:not(#_k) .page-btn, html[data-kit]:not(#_k) .panel-tab, html[data-kit]:not(#_k) .segmented button { min-width: calc(var(--k-h) * var(--k-cap) * 2 + 3em); white-space: nowrap; } /* ══ רכיבים נוספים של ערכת v5 [2026-09-27] — פעילים רק אחרי tools/uikit-build.js (‎--kit-v5: 1‎ → ) ══ */ /* כפתור אישור/איסוף (ירוק-אמרלד) וכפתור פרימיום (סגול-זהב) */ html[data-kit5]:not(#_k) .gbtn-confirm, html[data-kit5]:not(#_k) #tut-claim, html[data-kit5]:not(#_k) [data-collect] { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-confirm);--k-cs: var(--kcap-btn-confirm-start); --k-ce: var(--kcap-btn-confirm-end); --k-full: var(--img-btn-confirm); --k-sl: var(--sl-btn-confirm); --k-l: var(--img-btn-confirm-l); --k-m: var(--img-btn-confirm-m); --k-r: var(--img-btn-confirm-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; padding-inline: 4px !important; white-space: nowrap !important; min-height: var(--k-h); display: inline-flex; align-items: center; justify-content: center; color: var(--kit-text) !important; } html[data-kit5]:not(#_k) .gbtn-confirm:hover, html[data-kit5]:not(#_k) #tut-claim:hover, html[data-kit5]:not(#_k) [data-collect]:hover { --k-full: var(--img-btn-confirm-hover); --k-sl: var(--sl-btn-confirm-hover); --k-l: var(--img-btn-confirm-hover-l); --k-m: var(--img-btn-confirm-hover-m); --k-r: var(--img-btn-confirm-hover-r); } html[data-kit5]:not(#_k) .gbtn-confirm:active, html[data-kit5]:not(#_k) #tut-claim:active, html[data-kit5]:not(#_k) [data-collect]:active { --k-full: var(--img-btn-confirm-pressed); --k-sl: var(--sl-btn-confirm-pressed); --k-l: var(--img-btn-confirm-pressed-l); --k-m: var(--img-btn-confirm-pressed-m); --k-r: var(--img-btn-confirm-pressed-r); } html[data-kit5]:not(#_k) .gbtn-premium, html[data-kit5]:not(#_k) .shop-card .shop-pay-btn { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-premium);--k-cs: var(--kcap-btn-premium-start); --k-ce: var(--kcap-btn-premium-end); --k-full: var(--img-btn-premium); --k-sl: var(--sl-btn-premium); --k-l: var(--img-btn-premium-l); --k-m: var(--img-btn-premium-m); --k-r: var(--img-btn-premium-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; padding-inline: 4px !important; white-space: nowrap !important; min-height: var(--k-h); display: inline-flex; align-items: center; justify-content: center; color: var(--kit-text) !important; } html[data-kit5]:not(#_k) .gbtn-premium:hover, html[data-kit5]:not(#_k) .shop-card .shop-pay-btn:hover { --k-full: var(--img-btn-premium-hover); --k-sl: var(--sl-btn-premium-hover); --k-l: var(--img-btn-premium-hover-l); --k-m: var(--img-btn-premium-hover-m); --k-r: var(--img-btn-premium-hover-r); } html[data-kit5]:not(#_k) .gbtn-premium:active, html[data-kit5]:not(#_k) .shop-card .shop-pay-btn:active { --k-full: var(--img-btn-premium-pressed); --k-sl: var(--sl-btn-premium-pressed); --k-l: var(--img-btn-premium-pressed-l); --k-m: var(--img-btn-premium-pressed-m); --k-r: var(--img-btn-premium-pressed-r); } /* תגיות-מצב (פעיל / פנויה / הגיע / נעול…) — צבע לפי המצב */ html[data-kit5]:not(#_k) .badge, html[data-kit5]:not(#_k) .pill, html[data-kit5]:not(#_k) .rf-tag, html[data-kit5]:not(#_k) .tc-status, html[data-kit5]:not(#_k) .picker-badge, html[data-kit5]:not(#_k) .fh-status { --k-h: var(--kh-tag); --k-cap: var(--kcap-tag);--k-cs: var(--kcap-tag-start); --k-ce: var(--kcap-tag-end); --k-full: var(--img-tag); --k-sl: var(--sl-tag); --k-l: var(--img-tag-l); --k-m: var(--img-tag-m); --k-r: var(--img-tag-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; padding-inline: 4px !important; white-space: nowrap !important; min-height: var(--k-h); display: inline-flex; align-items: center; color: var(--kit-text) !important; font-size: var(--fs-2xs); } html[data-kit5]:not(#_k) .badge.active, html[data-kit5]:not(#_k) .rf-tag.on, html[data-kit5]:not(#_k) .tc-status.researched-tag, html[data-kit5]:not(#_k) .pill-cyan { --k-full: var(--img-tag-positive); --k-sl: var(--sl-tag-positive); --k-l: var(--img-tag-positive-l); --k-m: var(--img-tag-positive-m); --k-r: var(--img-tag-positive-r); } html[data-kit5]:not(#_k) .rf-tag.wip, html[data-kit5]:not(#_k) .pill-muted { --k-full: var(--img-tag-warning); --k-sl: var(--sl-tag-warning); --k-l: var(--img-tag-warning-l); --k-m: var(--img-tag-warning-m); --k-r: var(--img-tag-warning-r); } html[data-kit5]:not(#_k) .fh-status.fh-bad, html[data-kit5]:not(#_k) .tc-status.locked-tag { --k-full: var(--img-tag-negative); --k-sl: var(--sl-tag-negative); --k-l: var(--img-tag-negative-l); --k-m: var(--img-tag-negative-m); --k-r: var(--img-tag-negative-r); } /* פס התקדמות */ html[data-kit5]:not(#_k) .tut-bar, html[data-kit5]:not(#_k) .br-bar { --k-h: var(--kh-progress); --k-cap: var(--kcap-progress);--k-cs: var(--kcap-progress-start); --k-ce: var(--kcap-progress-end); --k-full: var(--img-progress); --k-sl: var(--sl-progress); --k-l: var(--img-progress-l); --k-m: var(--img-progress-m); --k-r: var(--img-progress-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; min-height: var(--k-h); } html[data-kit5]:not(#_k) .tut-bar > *, html[data-kit5]:not(#_k) .br-bar-fill { background: var(--img-progress-fill-m) left center / auto 100% repeat-x !important; border-radius: 0 !important; } /* קווי הפרדה */ html[data-kit5]:not(#_k) .overlay-panel .overlay-box hr, html[data-kit5]:not(#_k) .tut-panel hr { height: var(--kh-divider-light); border: 0 !important; --k-full: var(--img-divider-light); --k-sl: var(--sl-divider-light); --k-l: var(--img-divider-light-l); --k-m: var(--img-divider-light-m); --k-r: var(--img-divider-light-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; } html[data-kit5]:not(#_k) #sidebar hr { height: var(--kh-divider-dark); border: 0 !important; --k-full: var(--img-divider-dark); --k-sl: var(--sl-divider-dark); --k-l: var(--img-divider-dark-l); --k-m: var(--img-divider-dark-m); --k-r: var(--img-divider-dark-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; } /* פס-כותרת של חלון (כהה, מעוצב) */ html[data-kit5]:not(#_k) .overlay-panel .overlay-box > h2, html[data-kit5]:not(#_k) .overlay-panel .overlay-box > .overlay-head { --k-h: var(--kh-title-band); --k-cap: var(--kcap-title-band);--k-cs: var(--kcap-title-band-start); --k-ce: var(--kcap-title-band-end); --k-full: var(--img-title-band); --k-sl: var(--sl-title-band); --k-l: var(--img-title-band-l); --k-m: var(--img-title-band-m); --k-r: var(--img-title-band-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 0 !important; } /* תיבת-סימון */ html[data-kit5]:not(#_k) input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; background: var(--img-checkbox-off) center / 100% 100% no-repeat; border: 0; cursor: pointer; vertical-align: middle; } html[data-kit5]:not(#_k) input[type="checkbox"]:checked { background-image: var(--img-checkbox-on); } /* תג-התראות וסמן-הפריט-הפעיל בתפריט */ html[data-kit5]:not(#_k) .notif-badge { background: var(--img-badge) center / 100% 100% no-repeat !important; border: 0 !important; } html[data-kit5]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button.active { position: relative; } html[data-kit5]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button.active::after { content: ''; position: absolute; inset-inline-start: -6px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); background: var(--img-menu-marker) center / contain no-repeat; pointer-events: none; } /* אזור טקסט שקוע (textarea) — מסגרת inset ורקע קלף-כהה */ html[data-kit5]:not(#_k) .overlay-panel textarea { border-style: solid !important; border-width: var(--edge-inset) !important; border-color: transparent !important; border-image: var(--img-inset) var(--slice-inset) var(--rep-inset) !important; background: var(--surface-sunken) var(--img-inset-bg) center / 512px !important; background-clip: padding-box !important; } /* [2026-09-29] פריטי תפריט-הצד ברוחב מלא (הכלל המשותף הופך אותם ל-inline-flex) */ html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button { display: flex !important; width: 100% !important; white-space: nowrap; } /* [2026-09-29] כפתורים בכרטיסי-חנות — בגובה הרכיב, לא נמתחים עם הכרטיס */ html[data-kit5]:not(#_k) .shop-card .shop-pay-btn, html[data-kit]:not(#_k) .shop-card .shop-pay-btn { height: var(--k-h) !important; max-height: var(--k-h); flex: 0 0 auto !important; align-self: center !important; width: auto !important; min-width: 70%; } /* ══ חנות העיצובים [2026-09-29, בקשת-משתמש: תפריט-צד, סינון, תבנית-כרטיס אחידה, תצוגה מלאה, חבילות] ══ */ .shop-cos { display: grid; grid-template-columns: 210px 1fr; gap: var(--sp-5); align-items: start; } .shop-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .shop-side-seg { display: flex !important; flex-direction: column; align-items: stretch; } .shop-side-seg button { justify-content: space-between !important; width: 100%; } .shop-side-seg button small { font-family: var(--font-mono); opacity: .8; } .shop-side-t { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); margin-top: var(--sp-2); } .shop-side-sub { display: flex; flex-direction: column; gap: var(--sp-2); } .sc-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-4); } /* כרטיס אחיד: תמונה · שם · הגדרה · מחיר · כפתור — כל שורה בגובה קבוע, כך שהמחירים והכפתורים באותו קו */ .shop-card.sc-uniform { display: grid !important; grid-template-rows: 150px 2.7em 2.9em 1.8em 52px; justify-items: center; align-items: center; text-align: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2) !important; } .sc-img { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; cursor: zoom-in; min-width: 0 !important; } .sc-img img { max-width: 100%; max-height: 146px; object-fit: contain; transition: transform .15s; } .sc-img:hover img { transform: scale(1.06); } .sc-bundle-img { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px; cursor: default; } .sc-bundle-img img { max-height: 70px; } .sc-name { font-weight: var(--fw-heavy); font-size: var(--fs-md); color: var(--text-strong); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-price { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--text-accent); display: inline-flex; align-items: center; gap: 4px; } .sc-price s { color: var(--text-faint); font-weight: var(--fw-regular); } .sc-off { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--status-positive); } .sc-act { width: 100%; display: flex; justify-content: center; } .sc-act button { width: 100% !important; min-width: 0 !important; font-size: var(--fs-sm) !important; } .shop-card.is-equipped { outline: 2px solid var(--line-accent); outline-offset: -6px; } .shop-card-note { font-size: var(--fs-xs); color: var(--text-muted); } /* חבילות מטבע: כפתורי-תשלום אחד מתחת לשני, ברוחב הכרטיס */ .shop-pay-row { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; } .shop-pay-row .shop-pay-btn, html[data-kit]:not(#_k) .shop-card .shop-pay-btn { width: 100% !important; min-width: 0 !important; font-size: var(--fs-sm) !important; } .marker-pick-btn.active { outline: 2px solid var(--line-accent); outline-offset: 2px; } /* תצוגה בגודל מלא */ .shop-lightbox { position: fixed; inset: 0; z-index: 9000; background: var(--surface-scrim); display: flex; align-items: center; justify-content: center; padding: var(--sp-5); } .shop-lightbox[hidden] { display: none; } .shop-lightbox-box { background: var(--surface-panel); border: var(--bw-strong) solid var(--line-accent); box-shadow: var(--shadow-window); max-width: min(90vw, 760px); max-height: 90vh; display: flex; flex-direction: column; } .shop-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--line); color: var(--text-strong); font-size: var(--fs-lg); } .shop-lightbox-box img { max-width: 100%; max-height: calc(90vh - 80px); object-fit: contain; padding: var(--sp-4); } @media (max-width: 760px) { .shop-cos { grid-template-columns: 1fr; } .shop-side { position: static; } } /* [2026-09-29, בקשת-משתמש: "חלון החנות בגודל אחיד — לא קטן וגדל בכל לחיצה; רק התוכן מתחלף"] */ #shop-overlay .overlay-box { height: 88vh !important; max-height: 88vh !important; overflow-y: auto; } /* [2026-09-29] פס-כותרת: הכותרת בין הקישוטים; שדות קצרים — רוחב מינימלי שמכיל את הקישוטים + טקסט; בורר — מרווח לחץ */ html[data-kit5]:not(#_k) .overlay-panel .overlay-box > h2, html[data-kit5]:not(#_k) .overlay-panel .overlay-box > .overlay-head { padding-inline: calc(var(--kh-title-band) * var(--kcap-title-band) + 8px) !important; } html[data-kit]:not(#_k) .ginput, html[data-kit]:not(#_k) .overlay-panel input[type="text"], html[data-kit]:not(#_k) .overlay-panel input[type="number"], html[data-kit]:not(#_k) .overlay-panel input[type="email"], html[data-kit]:not(#_k) .overlay-panel input[type="search"] { min-width: calc(var(--k-h) * var(--k-cap) * 2 + 4.5em) !important; } html[data-kit]:not(#_k) .gselect, html[data-kit]:not(#_k) .overlay-panel select { min-width: calc(var(--k-h) * 2 + 6em); } /* ══ [2026-09-29, בקשת-משתמש] סרגל-עליון = רק המשאבים, בפס עם חיתוך-זווית (טרפז) במרכז; בחירת עולם/עיר, חנות, דואר והתראות — בתפריט-הצד ══ */ #top-hud { background: transparent !important; border: 0 !important; box-shadow: none !important; justify-content: center !important; padding: 0 var(--sp-4) !important; min-height: 0 !important; position: relative; } #top-hud.res-row { flex-wrap: nowrap !important; } #top-hud.res-row > #hud-resources { order: 0 !important; flex: 0 1 auto !important; width: auto !important; } #hud-resources { position: relative; isolation: isolate; flex: 0 1 auto !important; width: auto; max-width: calc(100% - 120px); margin: 0 auto; justify-content: center; padding: 6px 44px 14px !important; } #hud-resources::before, #hud-resources::after { content: ''; position: absolute; z-index: -1; pointer-events: none; } #hud-resources::before { inset: 0; background: var(--line-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 34px 100%); } #hud-resources::after { inset: 0 2px 2px; background: linear-gradient(180deg, var(--surface-raised), var(--surface-panel)); clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 33px 100%); } #hud-resources.is-wrap { flex-wrap: wrap; justify-content: center; } #btn-deserters-hud { position: absolute; inset-inline-end: var(--sp-3); top: 8px; } /* בחירת עולם ועיר — שתי שורות בראש תפריט-הצד */ .sidebar-world { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: var(--bw) solid var(--line-subtle); } .sidebar-world > * { width: 100% !important; min-width: 0 !important; max-width: 100%; justify-content: flex-start !important; } .sidebar-world #btn-world-switch .nav-text { overflow: hidden; text-overflow: ellipsis; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-world { display: none; } /* פריטי-תפריט עם תג (דואר/התראות) */ .sidebar-nav button { position: relative; } .sidebar-nav button .notif-badge { position: absolute; top: 4px; inset-inline-start: 6px; } html[data-kit]:not(#_k) .sidebar-world #btn-world-switch { --k-h: var(--kh-selector, 36px); --k-cap: var(--kcap-selector);--k-cs: var(--kcap-selector-start); --k-ce: var(--kcap-selector-end); --k-full: var(--img-selector); --k-sl: var(--sl-selector); --k-l: var(--img-selector-l); --k-m: var(--img-selector-m); --k-r: var(--img-selector-r); color: var(--kit-text) !important; } .sidebar-nav button .notif-badge { top: 50% !important; transform: translateY(-50%); inset-inline-start: auto !important; inset-inline-end: 34px !important; } #hud-resources { max-width: calc(100% - 240px) !important; } /* [2026-09-29] מסך בחירת-העולם — כרטיס-קלף ממוסגר וכפתור ראשי מהערכה */ html[data-kit]:not(#_k) .ws-card { color: var(--text-body) !important; padding: var(--sp-4) var(--sp-5) !important; } html[data-kit]:not(#_k) .ws-card .ws-name { color: var(--text-strong) !important; font-size: var(--fs-xl); font-weight: var(--fw-heavy); } html[data-kit]:not(#_k) .ws-card .ws-meta, html[data-kit]:not(#_k) .ws-card .ws-facts { color: var(--text-muted) !important; } html[data-kit]:not(#_k) .ws .lp-btn { --k-h: var(--kh-btn); --k-cap: var(--kcap-btn-primary);--k-cs: var(--kcap-btn-primary-start); --k-ce: var(--kcap-btn-primary-end); --k-full: var(--img-btn-primary); --k-sl: var(--sl-btn-primary); --k-l: var(--img-btn-primary-l); --k-m: var(--img-btn-primary-m); --k-r: var(--img-btn-primary-r); background: none !important; border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce, var(--k-cap))) 0 calc(var(--k-h) * var(--k-cs, var(--k-cap))) !important; border-image-repeat: stretch !important; height: var(--k-h) !important; box-sizing: border-box !important; box-shadow: none !important; color: var(--kit-text) !important; min-height: var(--k-h); padding: 0 4px !important; display: inline-flex; align-items: center; white-space: nowrap; } html[data-kit]:not(#_k) .ws .lp-btn:hover { --k-full: var(--img-btn-primary-hover); --k-sl: var(--sl-btn-primary-hover); --k-l: var(--img-btn-primary-hover-l); --k-m: var(--img-btn-primary-hover-m); --k-r: var(--img-btn-primary-hover-r); transform: none !important; } html[data-kit]:not(#_k) .ws h2, html[data-kit]:not(#_k) .ws h3 { color: var(--text-strong); } /* [2026-09-29, בקשת-משתמש] פס-כותרת החלון: תמונה אחידה לכל הרוחב (בלי קישוטי-קצה גדולים), כפתור-הסגירה בפנים */ html[data-kit5]:not(#_k) .overlay-panel .overlay-box > h2, html[data-kit5]:not(#_k) .overlay-panel .overlay-box > .overlay-head { padding-inline: var(--sp-2) !important; display: flex !important; align-items: center; justify-content: space-between; gap: var(--sp-2); } /* כפתור-סגירה: מסגרת עגולה + X מוזהב נקי (אייקון-קו) */ html[data-kit]:not(#_k) .close-btn, html[data-kit]:not(#_k) .overlay-panel .overlay-box .close-btn, html[data-kit]:not(#_k) .tut-x { position: relative; background: var(--img-btn-round) center / 100% 100% no-repeat !important; width: 36px !important; height: 36px !important; flex: 0 0 auto; } html[data-kit]:not(#_k) .close-btn:hover, html[data-kit]:not(#_k) .tut-x:hover { background-image: var(--img-btn-round) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) .close-btn::after, html[data-kit]:not(#_k) .tut-x::after { content: ''; position: absolute; inset: 24%; background: var(--kit-text-accent); -webkit-mask: url(/assets/design/ui/close-bold.svg) center / contain no-repeat; mask: url(/assets/design/ui/close-bold.svg) center / contain no-repeat; } /* חלון-דו-שיח של המשחק */ .overlay-panel.game-dialog { z-index: 9500 !important; } .game-dialog .overlay-box { max-width: 480px !important; height: auto !important; } .game-dialog .gd-body { padding: var(--sp-3) 0 var(--sp-4); color: var(--text-body); font-size: var(--fs-md); line-height: var(--lh-body); } .game-dialog .gd-body p { margin: 0 0 var(--sp-2); } .game-dialog .gd-input { width: 100% !important; margin-top: var(--sp-2); } .game-dialog .gd-actions { display: flex; gap: var(--sp-3); justify-content: flex-start; flex-wrap: wrap; } /* כפתורי-פעולה בפינה השמאלית-עליונה (דואר/התראות/יומן) + עריקים */ #hud-actions { position: absolute; inset-inline-end: var(--sp-3); top: 6px; display: flex; gap: var(--sp-2); align-items: center; } #hud-actions > button { position: relative; display: inline-flex; align-items: center; justify-content: center; } #hud-actions .hud-ico { width: 22px; height: 22px; } #hud-actions .notif-badge { position: absolute; top: -4px; inset-inline-end: -4px; transform: none; } #btn-deserters-hud { inset-inline-end: calc(var(--sp-3) + 150px) !important; } html[data-kit]:not(#_k) #hud-actions > button { background: var(--img-btn-icon) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; width: 40px; height: 40px; padding: 0 !important; } html[data-kit]:not(#_k) #hud-actions > button:hover { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } #hud-resources { max-width: calc(100% - 420px) !important; } /* כפתורי-הזום במפת-העולם וביבשת — אותה מסגרת מהערכה */ html[data-kit]:not(#_k) #zoom-controls { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 6px !important; } html[data-kit]:not(#_k) #zoom-controls button, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn { background: var(--img-btn-icon) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; width: 40px !important; height: 40px !important; color: var(--kit-text-accent) !important; font-size: var(--fs-lg) !important; font-weight: var(--fw-heavy); display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; } html[data-kit]:not(#_k) #zoom-controls button:hover, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn:hover { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) #zoom-controls button:active, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn:active { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-press); } #hud-resources { max-width: calc(100% - 300px) !important; margin-inline-start: 0 !important; margin-inline-end: 290px !important; gap: 2px 6px !important; padding-inline: 38px !important; } #hud-actions { gap: 4px; } html[data-kit]:not(#_k) #hud-resources .hud-res-item { --k-h: 27px !important; font-size: var(--fs-2xs) !important; } #hud-resources { max-width: calc(100% - 262px) !important; margin-inline-end: 252px !important; padding-inline: 34px !important; } /* שדות: התמונה היא קלף בהיר — טקסט כהה */ html[data-kit]:not(#_k) .ginput, html[data-kit]:not(#_k) .overlay-panel input[type="text"], html[data-kit]:not(#_k) .overlay-panel input[type="number"], html[data-kit]:not(#_k) .overlay-panel input[type="email"], html[data-kit]:not(#_k) .overlay-panel input[type="search"], html[data-kit]:not(#_k) .game-dialog input { color: var(--kit-field-text) !important; caret-color: var(--kit-field-text); } html[data-kit]:not(#_k) .ginput::placeholder, html[data-kit]:not(#_k) .overlay-panel input::placeholder { color: var(--kit-field-placeholder) !important; } /* כפתורי-זום ביבשת — מסגרת ריבועית (לא כפתור רחב) */ html[data-kit]:not(#_k) .cc-view-ctrl .gbtn { border: 0 !important; border-image: none !important; background: var(--img-btn-icon) center / 100% 100% no-repeat !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; color: var(--kit-text-accent) !important; justify-content: center !important; } html[data-kit]:not(#_k) .cc-view-ctrl .gbtn:hover { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) .cc-view-ctrl .gbtn:active { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-press); } /* [2026-09-29, בקשת-משתמש] עריקים — בצד ימין של הסרגל העליון (בתוך אזור-התוכן: התפריט לא מסתיר אותו, מצומצם או פתוח) */ #btn-deserters-hud { inset-inline-end: auto !important; inset-inline-start: var(--sp-3) !important; top: 8px !important; z-index: 20; } #hud-resources { margin-inline-start: 120px !important; margin-inline-end: 140px !important; max-width: calc(100% - 270px) !important; } /* כפתורי-זום ריבועיים (יבשת) — קדימות גבוהה מהכלל של .gbtn; תוכן ממורכז בדיוק */ html[data-kit]:not(#_k) .cc-view-ctrl .gbtn.gbtn.gbtn.gbtn { border-width: 0 !important; border-image-source: none !important; background: var(--img-btn-icon) center / 100% 100% no-repeat !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; } html[data-kit]:not(#_k) .cc-view-ctrl .gbtn.gbtn.gbtn.gbtn:hover { background-image: var(--img-btn-icon) !important; filter: var(--kit-sq-hover); } html[data-kit]:not(#_k) #zoom-controls button, html[data-kit]:not(#_k) .local-zoom-controls .lz-btn, html[data-kit]:not(#_k) .cc-view-ctrl .gbtn.gbtn.gbtn.gbtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; text-align: center; gap: 0 !important; } html[data-kit]:not(#_k) .cc-view-ctrl .gbtn .ui-ico, html[data-kit]:not(#_k) .lz-btn .ui-ico { margin: 0 !important; width: 18px; height: 18px; } /* חלונית העריקים — משטח כהה אחיד, תוכן לא נחתך */ #deserters-pop { width: min(420px, calc(100vw - 24px)); overflow-y: auto; } #deserters-pop .dp-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } #deserters-pop .dp-row select { flex: 1 1 180px; min-width: 0 !important; } #deserters-pop, .game-tip { z-index: 9000 !important; } /* [2026-09-29] תפריט-הצד: פריטים ברוחב מלא (היה 116px — הטקסט עלה על הקישוט) */ #app-shell:not(.sidebar-rail) .sidebar-scroll, #app-shell.sidebar-rail #sidebar:hover .sidebar-scroll { padding-inline: 4px !important; } #app-shell:not(.sidebar-rail) .sidebar-nav, #app-shell.sidebar-rail #sidebar:hover .sidebar-nav { padding-inline: 2px !important; } html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button { font-size: var(--fs-sm) !important; gap: 6px !important; overflow: hidden; } .sidebar-nav button .nav-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* תפריט מצומצם: אייקון בדיוק במרכז המסגרת */ #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button { justify-content: center !important; padding: 0 !important; gap: 0 !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button .nav-ico, #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button .ui-ico { margin: 0 !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button .nav-text { display: none !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav { padding-inline: 0 !important; display: flex; flex-direction: column; align-items: center; } /* עולם + עיר נבחרת: תווית קטנה + בורר מלא-רוחב, טקסט קטן יותר כדי שהשם ייכנס */ .sidebar-world { padding: var(--sp-2) 6px var(--sp-3) !important; gap: 2px !important; } .sidebar-world .sw-label { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--kit-text-accent); padding-inline: 10px; letter-spacing: .02em; } .sidebar-world .sw-label + * { margin-bottom: var(--sp-1); } html[data-kit]:not(#_k) .sidebar-world #btn-world-switch, html[data-kit]:not(#_k) .sidebar-world #city-select { --k-h: 30px !important; font-size: var(--fs-2xs) !important; font-weight: var(--fw-bold); } .sidebar-world #btn-world-switch .nav-ico { width: 16px; height: 16px; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-world { display: none !important; } /* ══ [2026-09-29, בקשת-משתמש: "המבנה לא סימטרי ומבלבל; עיצוב אחר לכפתורים הקטנים"] נקודת-מפעל: כרטיס בשתי עמודות ══ ימין (מידע): כותרת+מצב, משאב+רמה, בונוס, תפוקה. שמאל (שליטה): פועלים (צעד −/+ בכפתורים עגולים), שדרוג והחלפת-ייעוד. */ .overlay-panel .overlay-box .rf-points { display: grid !important; grid-template-columns: 1fr; gap: var(--sp-3) !important; border: 0 !important; } .overlay-panel .overlay-box .rf-point:not(.empty) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head work" "mine work" "note acts" "net acts" "time acts"; gap: var(--sp-1) var(--sp-5) !important; align-items: center; padding: var(--sp-3) var(--sp-4) !important; background: var(--surface-sunken) !important; border: var(--bw) solid var(--line) !important; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-point-head { grid-area: head; flex-direction: row !important; flex: none !important; align-items: center !important; gap: var(--sp-2) !important; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-mine { grid-area: mine; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-note { grid-area: note; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-net { grid-area: net; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-time { grid-area: time; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-workers { grid-area: work; display: grid !important; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sp-1) var(--sp-2) !important; align-self: start; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-workers > small { grid-column: 1 / -1; color: var(--text-muted); } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-actions { grid-area: acts; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--sp-2) !important; margin: 0 !important; } .overlay-panel .overlay-box .rf-point:not(.empty) > .rf-actions > * { width: 100% !important; } /* צעד −/+ : כפתורים עגולים קטנים (לא כפתורים רחבים) */ .rf-stepper { display: inline-flex; align-items: center; gap: var(--sp-2); } .rf-stepper b { font-family: var(--font-mono); min-width: 4.2em; text-align: center; color: var(--text-strong); } .overlay-panel .overlay-box button.rf-round, .overlay-panel .overlay-box button.rf-max { background: var(--img-btn-round) center / 100% 100% no-repeat !important; border: 0 !important; border-image: none !important; box-shadow: none !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 0 !important; padding: 0 !important; transform: none !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--kit-text-accent) !important; font-size: var(--fs-lg) !important; font-weight: var(--fw-heavy); line-height: 1; } .overlay-panel .overlay-box button.rf-round:hover, .overlay-panel .overlay-box button.rf-max:hover { background-image: var(--img-btn-round) !important; filter: var(--kit-sq-hover); } .overlay-panel .overlay-box button.rf-round:active, .overlay-panel .overlay-box button.rf-max:active { background-image: var(--img-btn-round) !important; filter: var(--kit-sq-press); } .overlay-panel .overlay-box button.rf-max { width: auto !important; min-width: 0 !important; height: 26px !important; padding: 0 12px !important; font-size: var(--fs-2xs) !important; justify-self: start; background: var(--img-tag) center / 100% 100% no-repeat !important; color: var(--kit-text) !important; } .overlay-panel .overlay-box button.rf-max:hover { background-image: var(--img-tag-positive) !important; } @media (max-width: 760px) { .overlay-panel .overlay-box .rf-point:not(.empty) { grid-template-columns: 1fr; grid-template-areas: "head" "mine" "note" "net" "time" "work" "acts"; } } .overlay-panel .overlay-box .rf-workers button.rf-max.rf-max { width: 64px !important; min-width: 64px !important; height: 28px !important; padding: 0 !important; grid-column: 2; justify-self: center; } /* [2026-09-29] תפריט מצומצם: רק האייקון בכפתור, ממורכז; בלי גלילה */ #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button > :not(.nav-ico):not(.ui-ico):not(.notif-badge) { display: none !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button > .nav-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0 !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav-bottom { flex-direction: column !important; align-items: center; padding: 0 !important; } #app-shell.sidebar-rail #sidebar:not(:hover) .sidebar-nav button { margin: 0 auto 4px !important; width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px; } /* תפריט פתוח: פריטים צפופים יותר — הכל נכנס בלי גלילה */ html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button { --k-h: 38px !important; margin-bottom: 2px !important; } .sidebar-scroll { overflow-y: auto; scrollbar-width: none; } .sidebar-scroll::-webkit-scrollbar { display: none; } .sidebar-sep { margin-block: 4px !important; } .sidebar-brand { padding-block: 6px !important; } /* ══ [2026-09-29, בקשת-משתמש: "כל דפי הברית העיצוב לא טוב"] מגירות הברית = כמו החלונות: פס-כותרת כהה, גוף קלף, כרטיסי-קלף ממוסגרים ══ */ html[data-kit]:not(#_k) .alp-drawer { border-style: solid !important; border-width: var(--edge-window) !important; border-color: transparent !important; border-image: var(--img-window) var(--slice-window) var(--rep-window) !important; background: var(--surface-panel) var(--img-content-bg) center / 512px !important; background-clip: padding-box !important; border-radius: 0 !important; box-shadow: var(--shadow-window) !important; } html[data-kit]:not(#_k) .alp-drawer::before { display: none !important; } html[data-kit]:not(#_k) .alp-drawer-head { background: var(--img-title-band) center / 100% 100% no-repeat !important; border: 0 !important; min-height: 84px; padding: 8px 64px !important; color: var(--kit-text); } html[data-kit]:not(#_k) .alp-drawer-head h3, html[data-kit]:not(#_k) .alp-drawer-head .alp-sub { color: var(--kit-text) !important; } html[data-kit]:not(#_k) .alp-drawer-body { color: var(--text-body); } html[data-kit]:not(#_k) .alp-drawer-body .gw-card, html[data-kit]:not(#_k) .alp-card { border-style: solid !important; border-width: var(--edge-card) !important; border-color: transparent !important; border-image: var(--img-card) var(--slice-card) var(--rep-card) !important; background: var(--surface-raised) !important; background-clip: padding-box !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text-body) !important; } html[data-kit]:not(#_k) .alp-drawer-body .gw-card-title, html[data-kit]:not(#_k) .alp-card h3, html[data-kit]:not(#_k) .alp-card h4 { color: var(--text-strong) !important; } html[data-kit]:not(#_k) .alp-drawer-body .gw-sub, html[data-kit]:not(#_k) .alp-drawer-body small, html[data-kit]:not(#_k) .alp-card .alp-sub { color: var(--text-muted) !important; } /* לשוניות המגירה והכרטיסים הפנימיים (גביעים) */ html[data-kit]:not(#_k) .alp-drawer-tabs .gw-tab { --k-h: var(--kh-tab); --k-cap: var(--kcap-tab); --k-cs: var(--kcap-tab-start); --k-ce: var(--kcap-tab-end); --k-full: var(--img-tab); --k-sl: var(--sl-tab); border-style: solid !important; border-color: transparent !important; border-width: 0 calc(var(--k-h) * var(--k-ce)) 0 calc(var(--k-h) * var(--k-cs)) !important; border-image-source: var(--k-full) !important; border-image-slice: var(--k-sl) !important; border-image-width: 0 calc(var(--k-h) * var(--k-ce)) 0 calc(var(--k-h) * var(--k-cs)) !important; height: var(--k-h) !important; background: none !important; color: var(--kit-text-muted) !important; padding: 0 4px !important; display: inline-flex; align-items: center; } html[data-kit]:not(#_k) .alp-drawer-tabs .gw-tab.on { --k-full: var(--img-tab-active); --k-sl: var(--sl-tab-active); color: var(--kit-text) !important; } html[data-kit]:not(#_k) .alp-drawer-body .gw-card .gw-card, html[data-kit]:not(#_k) .alp-drawer-body [class*="trophy"] { background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; border-image: none !important; } html[data-kit]:not(#_k) .alp-drawer-head { background: linear-gradient(180deg, var(--surface-raised), var(--surface-page)) !important; border-bottom: 2px solid var(--line-accent) !important; min-height: 0; padding: 10px 16px !important; } /* [2026-09-29, בקשת-משתמש: "בתוך דף הברית - בתוך המבנים - יש עדיין עמודים שלא נראים טוב"] כרטיסי שדרוג/שוק בתוך המגירה (rf-point) היו כהים מהכלל הכללי (--u-bg) — עכשיו כרטיס-קלף פנימי כמו כרטיסי-הגביעים, כותרת כהה וקריאה */ html[data-kit]:not(#_k) .alp-drawer-body .rf-point { background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; border-image: none !important; color: var(--text-body) !important; } html[data-kit]:not(#_k) .alp-drawer-body .rf-point-head { color: var(--text-strong) !important; border-bottom: 1px solid var(--line) !important; } html[data-kit]:not(#_k) .alp-drawer-body .relic-bar { background: var(--surface-page) !important; border: 1px solid var(--line) !important; } html[data-kit]:not(#_k) .alp-drawer-body .relic-bar > i { background: var(--accent) !important; } html[data-kit]:not(#_k) .alp-drawer-body .al-upgrades .rf-point .gbtn { width: 100% !important; } /* שבבי-משאב (resourceCostChips) ושורות-תרומה בתוך המגירה — היו כחולים-כהים מ-‎--u-bg */ html[data-kit]:not(#_k) .alp-drawer-body .res-chip, html[data-kit]:not(#_k) .alp-card .res-chip { background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; } html[data-kit]:not(#_k) .alp-drawer-body .res-chip-amt, html[data-kit]:not(#_k) .alp-card .res-chip-amt { color: var(--text-strong) !important; } html[data-kit]:not(#_k) .alp-drawer-body .gw-res-row { color: var(--text-strong) !important; border-color: var(--line) !important; } /* היכל → סקירה: שורות-חברים, שדה-חיפוש ותנאי-הפלא (היו שורה שחורה ומסגרת כחולה) */ html[data-kit]:not(#_k) .alp-drawer-body .card-row, html[data-kit]:not(#_k) .alp-drawer-body .wonder-reqs { background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; box-shadow: none !important; color: var(--text-body) !important; } html[data-kit]:not(#_k) .alp-drawer-body .card-row-title { color: var(--text-strong) !important; } html[data-kit]:not(#_k) .alp-drawer-body .card-row-icon { background: var(--surface-raised) !important; color: var(--text-strong) !important; border: 1px solid var(--line) !important; } html[data-kit]:not(#_k) .alp-drawer-body .search-field { background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; box-shadow: none !important; color: var(--text-muted) !important; } html[data-kit]:not(#_k) .alp-drawer-body .search-field input { background: transparent !important; color: var(--kit-field-text) !important; border: 0 !important; } html[data-kit]:not(#_k) .alp-drawer-body .a-section h4 { color: var(--text-strong) !important; } /* [2026-09-29, בקשת-משתמש: "כפתורים של חפצים - לא טובים"] תיק-החפצים: שני כפתורים באותו גודל בתוך הכרטיס (היו גולשים מהקצוות) */ html[data-kit]:not(#_k) .hbi-act { display: flex !important; gap: var(--sp-2) !important; justify-content: center; } html[data-kit]:not(#_k) .hbi-act .gbtn { --k-h: calc(var(--kh-btn) * .75); flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; font-size: var(--fs-sm) !important; } /* [2026-09-29, בקשת-משתמש: "כל חלון - חייב להישאר באותו גודל בזמן הדפדוף בתתי תפריטים שלו — פעולות (בדרך, צבא, סייבר…), דואר (נכנס, נשלחו, הודעה חדשה, דוחות)"] נמדד: הדואר קפץ 257→586→956 פיקסלים בין לשוניות, כי הכלל הכללי (height:auto) דרס את ה-85vh הישן. כל חלון שיש בו שורת-לשוניות — גובה קבוע (טוקן --win-h), והתוכן נגלל בפנים. */ .overlay-panel .overlay-box:has(> .panel-tabbar, .panel-tabbar, .gw-tabs, #actions-panel) { height: var(--win-h) !important; max-height: var(--win-h) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .overlay-panel .overlay-box:has(.panel-tabbar, .gw-tabs, #actions-panel) > h2, .overlay-panel .overlay-box:has(.panel-tabbar, .gw-tabs, #actions-panel) > .overlay-head, .overlay-panel .overlay-box:has(.panel-tabbar, .gw-tabs) .panel-tabbar, .overlay-panel .overlay-box:has(.gw-tabs) .gw-tabs { flex-shrink: 0; } .overlay-panel .overlay-box:has(.panel-tabbar, .gw-tabs, #actions-panel) .panel-tab-content.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #actions-overlay #actions-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* [2026-09-29] gamePick — בחירה מרשימה (שחקן / עיר של בן-ברית / חבר) במקום הקלדת שם או מזהה */ .game-dialog .gp-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); } .game-dialog .gp-item { display: flex !important; justify-content: space-between; align-items: center; gap: var(--sp-2); width: 100% !important; min-height: 0 !important; height: auto !important; padding: var(--sp-2) var(--sp-3) !important; background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; border-image: none !important; border-radius: 0 !important; color: var(--text-body) !important; text-align: start; cursor: pointer; box-shadow: none !important; transform: none !important; } .game-dialog .gp-item:hover, .game-dialog .gp-item:focus-visible { border-color: var(--line-accent) !important; background: var(--surface-raised) !important; } .game-dialog .gp-item b { color: var(--text-strong); font-weight: var(--fw-heavy); } .game-dialog .gp-item small { color: var(--text-muted); font-size: var(--fs-sm); } .gp-open { margin-inline-start: var(--sp-2); } /* [2026-09-29, בקשת-משתמש: דוח "שדה-קרב" — עמוד לכל סבב] פריסה: חצי מגן למעלה, פס-סבב באמצע, חצי תוקף למטה; בכל חצי שני אגפים — ים+יבשה משמאל, אוויר+חלל מימין (direction:ltr לשורת-האגפים כדי שה"שמאל" יהיה באמת שמאל). */ .bf-pager { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); } .bf-pages { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex: 1; } .bf-page { display: flex; flex-direction: column; gap: var(--sp-2); } .bf-side { background: var(--surface-panel); border: var(--bw) solid var(--line); padding: var(--sp-2) var(--sp-3); } .bf-side.bf-atk { border-color: var(--status-negative); } .bf-side.bf-def { border-color: var(--status-info); } .bf-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); color: var(--text-strong); } .bf-morale { display: flex; align-items: center; gap: var(--sp-2); min-width: 240px; color: var(--text-body); font-size: var(--fs-sm); } .bf-morale .br-bar-track { position: relative; flex: 1; } .bf-morale .bf-m-before, .bf-morale .bf-m-floor { position: absolute; top: -2px; bottom: -2px; width: 2px; } .bf-morale .bf-m-before { background: var(--text-muted); } .bf-morale .bf-m-floor { background: var(--status-negative); } .bf-field { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); direction: ltr; } .bf-flank { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); direction: rtl; } .bf-zone { background: var(--surface-raised); border: 1px dashed var(--line); padding: var(--sp-2); min-height: 72px; display: flex; flex-direction: column; gap: var(--sp-1); } .bf-zone.empty { opacity: .55; } .bf-zone-t { font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--text-muted); } .bf-unit { display: flex; align-items: center; gap: var(--sp-2); } .bf-unit img { width: 34px; height: 34px; object-fit: contain; flex: none; } .bf-unit.gone { opacity: .5; } .bf-u-body { display: flex; flex-direction: column; min-width: 0; } .bf-u-body b { color: var(--text-strong); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bf-u-n { display: flex; gap: var(--sp-1); align-items: baseline; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-body); } .bf-u-n i { font-style: normal; font-weight: var(--fw-heavy); } .bf-u-n i.neg { color: var(--status-negative); } .bf-u-n i.warn { color: var(--status-warning); } .bf-u-end { color: var(--text-strong); font-weight: var(--fw-heavy); } .bf-empty { color: var(--text-muted); font-size: var(--fs-sm); } .bf-vs { display: flex; justify-content: center; align-items: baseline; gap: var(--sp-3); color: var(--text-strong); font-weight: var(--fw-heavy); } .bf-vs small { color: var(--text-muted); font-weight: normal; } .bf-more summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--text-strong); font-weight: var(--fw-heavy); } .bf-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); } .bf-detail h4 { color: var(--text-strong); margin: 0 0 var(--sp-1); } .bf-cat { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; color: var(--text-body); } .bf-cat > b { color: var(--text-strong); } .bf-act { padding: 0 var(--sp-2); border: 1px solid var(--line-accent); color: var(--text-strong); font-size: var(--fs-xs); } .bf-cat small { color: var(--text-muted); } .bf-hits { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); } .bf-old { color: var(--text-body); } @media (max-width: 760px) { .bf-field, .bf-flank, .bf-details { grid-template-columns: 1fr; } .bf-morale { min-width: 0; } } /* [2026-09-29] בורר-כוח בשדה-הקרב (renderBattlefieldPicker): מגש ים+יבשה משמאל, שדה 4×3 באמצע, מגש אוויר+חלל מימין. direction:ltr לשורה הראשית כדי ש"שמאל" יהיה באמת שמאל; התוכן בכל חלק חוזר ל-rtl. */ .bfp { display: flex; flex-direction: column; gap: var(--sp-2); } .bfp-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .bfp-presets, .bfp-quick { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; } .bfp-pre.empty { opacity: .6; } .bfp-main { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr) minmax(150px, 1fr); gap: var(--sp-2); direction: ltr; align-items: start; } .bfp-main > * { direction: rtl; } .bfp-tray { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 46vh; overflow-y: auto; } .bfp-tray-t { font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--text-muted); } .bfp-u { display: grid; grid-template-columns: 34px 1fr 56px; align-items: center; gap: var(--sp-1); padding: var(--sp-1); background: var(--surface-panel); border: var(--bw) solid var(--line); cursor: grab; } .bfp-u.on { border-color: var(--line-accent); background: var(--surface-raised); } .bfp-u.done { opacity: .45; } .bfp-u img { width: 34px; height: 34px; object-fit: contain; } .bfp-u-b { display: flex; flex-direction: column; min-width: 0; } .bfp-u-b b { color: var(--text-strong); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bfp-u-b small { color: var(--text-muted); font-size: var(--fs-xs); } .bfp-u .bfp-n { width: 56px !important; min-width: 0 !important; height: 28px !important; min-height: 0 !important; padding: 0 var(--sp-1) !important; } .bfp-field { display: flex; flex-direction: column; gap: var(--sp-1); } .bfp-hero { display: flex !important; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; } .bfp-hero.on { outline: 2px solid var(--line-accent); } .bfp-grid { display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)); gap: var(--sp-1); direction: ltr; } .bfp-grid > * { direction: rtl; } .bfp-colh, .bfp-rowh { font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--text-muted); display: flex; align-items: center; justify-content: center; } .bfp-cell { min-height: 58px; background: var(--surface-raised); border: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; align-content: flex-start; } .bfp-cell.ok { border: var(--bw) solid var(--line-accent); background: var(--surface-panel); cursor: pointer; } .bfp-cell.no { opacity: .45; } .bfp-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; background: var(--surface-panel); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-strong); } .bfp-chip img { width: 20px; height: 20px; object-fit: contain; } .bfp-x { all: unset; cursor: pointer; padding: 0 2px; color: var(--status-negative); font-weight: var(--fw-heavy); } .bfp-hint { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; } .bfp-empty { color: var(--text-muted); font-size: var(--fs-sm); } @media (max-width: 760px) { .bfp-main { grid-template-columns: 1fr; } .bfp-main > .bfp-field { order: -1; } .bfp-tray { max-height: none; } } .bfp-tray { overflow-x: hidden; padding-inline-end: var(--sp-1); } html[data-kit]:not(#_k) .bfp .bfp-top .gbtn { --k-h: calc(var(--kh-btn) * .75); font-size: var(--fs-sm) !important; } html[data-kit]:not(#_k) .bfp .bfp-chip .bfp-x { all: unset; border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 2px !important; color: var(--status-negative) !important; font-weight: var(--fw-heavy); cursor: pointer; line-height: 1; } .bf-u-n { justify-content: flex-end; } .bf-row { color: var(--text-muted); font-weight: normal; font-size: var(--fs-xs); } /* [2026-09-30] חלון-מחנה עם בורר-כוח (התקפה/בזיזה) — רחב מספיק לשדה-הקרב */ #pve-camp-overlay .overlay-box:has(#pve-force-grid) { max-width: min(1280px, 96vw) !important; width: min(1280px, 96vw) !important; } /* חלון-המחנה עם בורר-כוח: פרטי המחנה צרים, הצד עם השדה רחב */ #pve-camp-overlay .overlay-box .gw-split:has(#pve-force-grid) { grid-template-columns: minmax(220px, .7fr) minmax(0, 3fr); } @media (max-width: 760px) { #pve-camp-overlay .overlay-box .gw-split:has(#pve-force-grid) { grid-template-columns: 1fr; } } .am-intel { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); } .am-intel .chip-ico { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; } /* [2026-09-30, בקשת-משתמש: "שיהיה את התמונה של היחידה ומספר קטן של כמות בפינת התמונה — כולם זהים בגודל, ריבוע קבוע; כל איזור מחולק ל-2 משבצות"] אזור = 2 ריבועים קבועים זה לצד זה */ .bfp-cell { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--sp-1) !important; padding: var(--sp-1) !important; min-height: 0 !important; align-items: center; justify-items: center; } .bfp-slot { position: relative; width: 100%; max-width: 64px; aspect-ratio: 1 / 1; background: var(--surface-panel); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; } .bfp-slot.full { border: var(--bw) solid var(--line-accent); } .bfp-slot img { width: 86%; height: 86%; object-fit: contain; } .bfp-slot .bfp-cnt { position: absolute; bottom: 1px; inset-inline-start: 1px; min-width: 18px; padding: 0 3px; background: var(--surface-page); border: 1px solid var(--line-accent); color: var(--text-strong); font-size: var(--fs-xs); font-weight: var(--fw-heavy); line-height: 1.3; text-align: center; font-family: var(--font-mono); } html[data-kit]:not(#_k) .bfp .bfp-slot .bfp-x { position: absolute; top: 0; inset-inline-end: 1px; font-size: var(--fs-sm); } .bfp-cell.ok .bfp-slot:not(.full) { border-color: var(--line-accent); border-style: solid; } .bf-grid .bf-cell { align-items: start; } .bf-sq-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 64px; } .bf-sq-wrap .bfp-slot { max-width: none; } .bf-sq-loss { display: flex; gap: 2px; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: var(--fw-heavy); min-height: 1.2em; } .bf-sq-loss .neg { color: var(--status-negative); font-style: normal; } .bf-sq-loss .warn { color: var(--status-warning); font-style: normal; } .bfp-slot.gone img { opacity: .35; } html[data-kit]:not(#_k) .bfp .bfp-slot .bfp-x { all: unset; position: absolute; top: 0; inset-inline-end: 1px; border: 0 !important; border-image: none !important; background: var(--surface-page) !important; box-shadow: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 3px !important; color: var(--status-negative) !important; font-weight: var(--fw-heavy); font-size: var(--fs-xs); line-height: 1.3; cursor: pointer; } /* [2026-09-30] חלון הכיבוש: מד חיל-הכיבוש מול המינימום, עמדות, וקרב-הגיבור המונפש */ #occupation-overlay .occ-box { max-width: min(1100px, 96vw); width: min(1100px, 96vw); } .occ-meter { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; } .occ-meter .br-bar-track { position: relative; } .occ-meter .occ-req { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--status-negative); } .occ-g { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .occ-g img, .occ-post-u img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; } .occ-g .occ-n { width: 70px !important; } .occ-post { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); } .occ-post.done { opacity: .5; } .occ-post .occ-post-u { flex: 1; } .occ-editor { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); } .occ-hp { display: grid; grid-template-columns: 120px 1fr 90px; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; color: var(--text-strong); } .occ-log { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); } .occ-ev { padding: 2px var(--sp-2); background: var(--surface-panel); border-inline-start: 3px solid var(--status-positive); color: var(--text-body); animation: occ-in .25s ease-out; } .occ-ev.enemy { border-inline-start-color: var(--status-negative); } .occ-ev i { font-style: normal; font-weight: var(--fw-heavy); color: var(--text-strong); } .occ-kill { color: var(--status-negative); font-weight: var(--fw-heavy); } @keyframes occ-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .gw-card-title.pos { color: var(--status-positive) !important; } .gw-card-title.neg { color: var(--status-negative) !important; } /* [2026-09-30, בקשת-משתמש: "לשדרג את המערך ולתת לו עיצוב קרבי"] לוח-עמדות: דרך מהשער למרכז העיר, עמדות = כרטיסי-ביצור */ .icb-board { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: var(--sp-3); background: var(--surface-raised); border: var(--bw) solid var(--line); } .icb-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 72px; padding: var(--sp-2); color: var(--text-strong); font-weight: var(--fw-heavy); font-size: var(--fs-xs); border: var(--bw) dashed var(--line-accent); } .icb-gate.icb-core { border-style: solid; background: var(--surface-panel); } .icb-road { align-self: center; width: 22px; height: 6px; background: repeating-linear-gradient(90deg, var(--line-accent) 0 6px, transparent 6px 10px); } .icb-post { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 150px; padding: var(--sp-2); background: var(--surface-panel); border: var(--bw) solid var(--line-accent); box-shadow: inset 0 0 0 3px var(--surface-raised); } .icb-post-n { position: absolute; top: -10px; inset-inline-start: -10px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--status-negative); color: var(--text-on-accent); font-weight: var(--fw-heavy); border-radius: 50%; font-size: var(--fs-sm); } .icb-post-units { display: flex; gap: var(--sp-1); justify-content: center; } .icb-portrait { display: flex; flex-direction: column; align-items: center; width: 64px; } .icb-portrait img { width: 56px; height: 56px; object-fit: contain; background: var(--surface-raised); border: 1px solid var(--line); } .icb-portrait span { font-size: var(--fs-xs); color: var(--text-body); text-align: center; line-height: 1.1; } .icb-post-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); } .icb-post-foot small { color: var(--text-muted); } .icb-post.fallen { opacity: .55; filter: grayscale(.7); } .icb-stamp { color: var(--status-negative); border: 2px solid var(--status-negative); padding: 0 var(--sp-2); transform: rotate(-8deg); font-size: var(--fs-sm); } .icb-entry { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; padding: var(--sp-2); border: 1px solid var(--line); } /* זירת-הקרב */ .icb-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: start; } .icb-side { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2); border: var(--bw) solid var(--line); background: var(--surface-raised); align-content: flex-start; } .icb-side.att { border-color: var(--status-positive); } .icb-side.dfn { border-color: var(--status-negative); } .icb-side-t { flex-basis: 100%; font-weight: var(--fw-heavy); color: var(--text-strong); } .icb-vs { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); color: var(--text-strong); font-weight: var(--fw-heavy); padding-top: var(--sp-4); } .icb-f { position: relative; width: 108px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-1); background: var(--surface-panel); border: 1px solid var(--line); transition: transform .12s, box-shadow .12s; } .icb-f.hero { border: var(--bw) solid var(--line-accent); } .icb-f-img img, .icb-f-img .ui-ico { width: 56px; height: 56px; object-fit: contain; } .icb-f b { font-size: var(--fs-xs); color: var(--text-strong); text-align: center; line-height: 1.15; } .icb-f .br-bar-track { width: 100%; } .icb-f-hp { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); } .icb-f.acting { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--line-accent); } .icb-f.hit { animation: icb-shake .28s; } .icb-f.down { opacity: .35; filter: grayscale(1); } .icb-float { position: absolute; top: 20%; inset-inline-start: 50%; font-weight: var(--fw-heavy); font-family: var(--font-mono); pointer-events: none; animation: icb-up .9s ease-out forwards; } .icb-float.dmg { color: var(--status-warning); } .icb-float.kill { color: var(--status-negative); } .icb-float.heal { color: var(--status-positive); } @keyframes icb-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @keyframes icb-up { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -34px); } } .icb-result { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; } .icb-sup { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 46vh; overflow-y: auto; } .icb-sup-row { display: grid; grid-template-columns: 32px 1fr 80px; align-items: center; gap: var(--sp-2); } .icb-sup-row img { width: 32px; height: 32px; object-fit: contain; } .icb-up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); } .icb-up { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-2); padding: var(--sp-2); background: var(--surface-panel); border: 1px solid var(--line); } .icb-up > img, .icb-up > .ui-ico { width: 48px; height: 48px; object-fit: contain; } .icb-up small { display: block; color: var(--text-muted); } .icb-up .gbtn { margin-top: var(--sp-1); } @media (max-width: 760px) { .icb-arena { grid-template-columns: 1fr; } .icb-road { width: 6px; height: 16px; } } /* [2026-09-30] צירוף הגיבור לקרב PvE — כרטיס ברור במקום תיבת-סימון קטנה */ .pve-hero-card { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--line-strong); background: var(--surface-raised); cursor: pointer; } .pve-hero-card input { position: absolute; opacity: 0; pointer-events: none; } .pve-hero-card .pve-hero-ico { display: grid; place-items: center; width: 40px; height: 40px; border: var(--bw) solid var(--line); background: var(--surface-sunken); color: var(--text-muted); flex: none; } .pve-hero-card .pve-hero-txt { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; font-size: var(--fs-sm); color: var(--text-body); } .pve-hero-card .pve-hero-txt b { color: var(--text-strong); font-size: var(--fs-md); } .pve-hero-card .pve-hero-state { padding: var(--sp-1) var(--sp-3); border: var(--bw) solid var(--line); font-weight: var(--fw-heavy); color: var(--text-muted); flex: none; } .pve-hero-card.on { border-color: var(--accent); background: var(--accent-soft); } .pve-hero-card.on .pve-hero-ico { border-color: var(--accent); color: var(--text-accent); } .pve-hero-card.on .pve-hero-state { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); } .pve-hero-card.off { opacity: .6; cursor: not-allowed; } .pve-hero-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* [2026-09-30] העברת מבנה ייחודי מתוך חלון המבנה */ .uq-move { margin-bottom: var(--sp-3); } .uq-move-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); } .uq-move-row .gselect { flex: 1; min-width: 0; } /* טבלת תפקידי-אזרחים — התיאור מתחת לשם התפקיד */ .wf-table .wf-desc { white-space: normal; max-width: var(--wf-desc-w); } /* ══ טלפון "קלאסי-אסטרטגיה" [2026-09-30] — רכיבים שנוצרים ב-app.js (applyMobileDock); מוצגים רק תחת html.mob-docked ══ */ #mob-tabbar, #mob-more, #mob-res-toggle, #mob-hud-row2 { display: none; } #mob-scrim { display: none; position: fixed; inset: 0; z-index: 71; background: var(--surface-scrim); } #mob-scrim.on { display: block; } .mob-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--line); font: var(--fw-heavy) var(--fs-lg) var(--font-display); color: var(--text-strong); } .mob-drawer-x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: transparent; border: var(--bw) solid var(--line); color: var(--text-strong); cursor: pointer; } .mob-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-5); } @media (prefers-reduced-motion: reduce) { #mob-more { transition: none !important; } } /* ══ מובייל [2026-09-30, בקשת-משתמש: "לבצע עיצוב והתאמה למובייל בכל הדברים — תפריטים, מסכים וכ״ו"] ══ שכבה אחת בסוף הקובץ, גוברת על כללי-הדסקטופ (שוליים קבועים לסרגל-המשאבים, מסגרות עבות, לשוניות שנשברות לשורות). כל ערך — מטוקן (design-tokens.css, בלוק המובייל). */ @media (max-width: 760px) { /* [2026-09-30] "קלאסי-אסטרטגיה" (app.js applyMobileDock): פס עליון דק, סרגל תחתון קבוע באזור האגודל, "עוד" = גיליון מלמטה */ html.mob-docked #sidebar { display: none !important; } html.mob-docked #app-main { padding-bottom: calc(var(--mob-tab-h) + env(safe-area-inset-bottom, 0px)) !important; } /* פס עליון: שורה 1 משאבים + ▾, שורה 2 עולם/עיר + הודעות */ html.mob-docked #top-hud { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: var(--sp-1) var(--sp-2) !important; padding: calc(var(--sp-1) + env(safe-area-inset-top, 0px)) var(--mob-gutter) var(--sp-1) !important; min-height: 0 !important; position: sticky; top: 0; z-index: 30; } html.mob-docked #top-hud #hud-resources { order: 1; flex: 1 1 0 !important; min-width: 0; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; gap: var(--sp-1) !important; overflow: hidden !important; } html.mob-docked #hud-resources::before, html.mob-docked #hud-resources::after { display: none !important; } html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item[data-res]:not([data-res="gold"]):not([data-res="wood"]):not([data-res="stone"]):not([data-res="food"]) { display: none !important; } html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-rate { display: none !important; } html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item { flex: 1 1 0; min-width: 0; justify-content: center; } html.mob-docked #top-hud.res-open #hud-resources { flex-basis: 100% !important; order: 3; display: grid !important; grid-template-columns: repeat(var(--mob-res-cols), minmax(0, 1fr)); gap: var(--sp-3) var(--sp-1) !important; padding: var(--sp-2) 0 var(--sp-3) !important; overflow: visible !important; } html.mob-docked #top-hud.res-open #hud-resources .hud-res-item { width: 100%; min-width: 0; justify-content: center; } html.mob-docked #mob-res-toggle { order: 2; display: grid; place-items: center; width: var(--mob-tap); height: var(--mob-tap-sm); padding: 0; flex: none; background: var(--surface-panel); border: var(--bw) solid var(--line-accent); color: var(--text-strong); cursor: pointer; } html.mob-docked #mob-res-toggle .ui-ico { width: 18px; height: 18px; transition: transform .15s ease; } html.mob-docked #top-hud.res-open #mob-res-toggle .ui-ico { transform: rotate(180deg); } html.mob-docked #mob-hud-row2 { order: 4; flex-basis: 100%; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } html.mob-docked #mob-hud-row2 .sidebar-world { display: flex !important; flex-direction: row; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; padding: 0; border: 0; } html.mob-docked #mob-hud-row2 .sw-label { display: none; } html.mob-docked #mob-hud-row2 #city-select { flex: 1 1 auto; min-width: 0; max-width: none; height: var(--mob-tap-sm); font-size: var(--fs-xs); } html.mob-docked #mob-hud-row2 #btn-world-switch { flex: 0 1 auto; min-width: 0; max-width: var(--mob-world-w); height: var(--mob-tap-sm); font-size: var(--fs-2xs); overflow: hidden; white-space: nowrap; } html.mob-docked #mob-hud-row2 #hud-actions { position: static !important; display: flex; gap: var(--sp-1); flex: none; } html.mob-docked #mob-hud-row2 #hud-actions > button { width: var(--mob-tap-sm) !important; height: var(--mob-tap-sm) !important; min-width: 0 !important; min-height: 0 !important; } html.mob-docked #mob-hud-row2 #hud-actions .hud-ico { width: 22px; height: 22px; } html.mob-docked #mob-hud-row2 #btn-deserters-hud { position: static !important; inset: auto !important; transform: none !important; flex: none; height: var(--mob-tap-sm); padding: 0 var(--sp-2); font-size: var(--fs-2xs); } /* פס מכווץ ושורה 2: שבבים פשוטים (בלי כותרות-הקצה של הערכה) — המספרים והבוררים לא נחתכים */ html[data-kit]:not(#_k).mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item, html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item { background: var(--hud-chip-bg) !important; border: var(--bw) solid var(--hud-chip-line) !important; border-image: none !important; box-shadow: none !important; height: var(--mob-tap-sm) !important; padding: 0 var(--sp-1) !important; gap: 2px !important; font-size: var(--fs-2xs) !important; } html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item::before, html.mob-docked #top-hud:not(.res-open) #hud-resources .hud-res-item::after { display: none !important; } html[data-kit]:not(#_k).mob-docked #mob-hud-row2 #city-select, html[data-kit]:not(#_k).mob-docked #mob-hud-row2 #btn-world-switch, html.mob-docked #mob-hud-row2 #city-select, html.mob-docked #mob-hud-row2 #btn-world-switch { background: var(--surface-panel) !important; border: var(--bw) solid var(--line-accent) !important; border-image: none !important; box-shadow: none !important; padding: 0 var(--sp-2) !important; color: var(--text-strong) !important; border-radius: 0 !important; } html.mob-docked #mob-hud-row2 #city-select::before, html.mob-docked #mob-hud-row2 #city-select::after, html.mob-docked #mob-hud-row2 #btn-world-switch::before, html.mob-docked #mob-hud-row2 #btn-world-switch::after { display: none !important; } html.mob-docked #mob-hud-row2 .sidebar-world { order: 1; } html.mob-docked #mob-hud-row2 #btn-world-switch { width: var(--mob-tap-sm) !important; max-width: var(--mob-tap-sm) !important; padding: 0 !important; font-size: 0 !important; display: grid !important; place-items: center; flex: none !important; } html.mob-docked #mob-hud-row2 #btn-world-switch .nav-text { display: none !important; } html.mob-docked #mob-hud-row2 #btn-world-switch .nav-ico, html.mob-docked #mob-hud-row2 #btn-world-switch .hud-ico { width: 22px; height: 22px; margin: 0 !important; } html.mob-docked #mob-hud-row2 #btn-deserters-hud { white-space: nowrap; } html.mob-docked #mob-hud-row2 #btn-deserters-hud { max-width: var(--mob-world-w); overflow: hidden; } html.mob-docked #mob-hud-row2 #hud-actions { order: 2; } html.mob-docked #mob-hud-row2 #btn-deserters-hud { order: 3; } /* סרגל תחתון קבוע */ html.mob-docked #mob-tabbar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; height: calc(var(--mob-tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface-page); border-top: var(--bw-strong) solid var(--line-accent); } html.mob-docked #mob-tabbar > [data-mob-slot="tabs"] { flex: 1; display: flex; min-width: 0; } html.mob-docked #mob-tabbar #view-tabs { flex: 1; display: flex !important; flex-direction: row !important; gap: 0 !important; padding: 0 !important; } html body #mob-tabbar #view-tabs button, html body #mob-tabbar .mob-tab-more, html[data-kit]:not(#_k) #app-shell #mob-tabbar #view-tabs button, html[data-kit]:not(#_k) #mob-tabbar #view-tabs button { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center !important; gap: 2px; padding: 0 2px !important; background: none !important; border: 0 !important; box-shadow: none !important; font-size: var(--fs-3xs) !important; line-height: var(--lh-tight); white-space: nowrap; color: var(--text-muted) !important; cursor: pointer; } #mob-tabbar button::before, #mob-tabbar button::after { display: none !important; } html body #mob-tabbar .mob-tab-more { flex: 0 0 calc(100% / 6) !important; } #mob-tabbar .nav-text { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #mob-tabbar .nav-ico, #mob-tabbar .ui-ico { width: 26px !important; height: 26px !important; } html body #mob-tabbar #view-tabs button.active, html body #mob-tabbar .mob-tab-more.on { color: var(--text-strong) !important; box-shadow: inset 0 3px 0 var(--accent) !important; } /* "עוד" — גיליון שעולה מלמטה, מעל הסרגל */ html.mob-docked #mob-more { display: flex; flex-direction: column; position: fixed; inset: auto 0 calc(var(--mob-tab-h) + env(safe-area-inset-bottom, 0px)) 0; z-index: 72; max-height: 70dvh; background: var(--surface-page); border-top: var(--bw-strong) solid var(--line-accent); box-shadow: var(--shadow-float); transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility .2s; } html.mob-docked #mob-more.open { transform: none; visibility: visible; } html.mob-docked #mob-tabbar { z-index: 73; } #mob-more .sidebar-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) !important; padding: 0 0 var(--sp-3) !important; } html body #mob-more .sidebar-nav button, html[data-kit]:not(#_k) #app-shell #mob-more .sidebar-nav button, html[data-kit]:not(#_k) #mob-more .sidebar-nav button { width: auto !important; height: auto !important; min-height: var(--mob-more-tile) !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center !important; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1) !important; background: var(--surface-panel) !important; border: var(--bw) solid var(--line) !important; box-shadow: none !important; font-size: var(--fs-xs) !important; color: var(--text-strong) !important; white-space: normal; text-align: center; } #mob-more .sidebar-nav button::before, #mob-more .sidebar-nav button::after { display: none !important; } #mob-more .nav-ico { width: 32px !important; height: 32px !important; } #mob-more .nav-text { display: block !important; } #mob-more #auth-box { display: flex !important; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: var(--bw) solid var(--line); font-size: var(--fs-sm); color: var(--text-body); } /* המדריך — מעל הסרגל התחתון */ html.mob-docked #tutorial-panel, html.mob-docked .tut-panel { bottom: calc(var(--mob-tab-h) + var(--sp-2) + env(safe-area-inset-bottom, 0px)) !important; } /* חלונות: כמעט-מסך-מלא, מסגרת דקה, לשוניות בשורה אחת גוללת */ html body .overlay-panel { padding: var(--sp-1) !important; align-items: flex-start; } html body .overlay-panel .overlay-box { width: 100% !important; max-width: none !important; max-height: calc(100dvh - var(--sp-2)) !important; margin: 0 !important; padding: 0 var(--mob-gutter) var(--mob-gutter) !important; } html body .overlay-panel .overlay-box > h2, html body .overlay-panel .overlay-box > .overlay-head { margin: 0 calc(-1 * var(--mob-gutter)) var(--sp-2) !important; padding: var(--sp-2) var(--mob-gutter) !important; font-size: var(--fs-lg) !important; } html body .panel-tabbar, html body .overlay-box .panel-tabbar { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start !important; } .panel-tabbar::-webkit-scrollbar { display: none; } html body .panel-tabbar > .panel-tab, html body .panel-tabbar > button { flex: none !important; white-space: nowrap; width: auto !important; min-width: max-content !important; max-width: none !important; } html body .panel-tabbar > .panel-tab span, html body .panel-tabbar > button span { overflow: visible !important; text-overflow: clip !important; } html body .overlay-panel .overlay-box button, html body .overlay-panel .overlay-box .gbtn { max-width: 100%; } html body .overlay-panel .overlay-box div:has(> .gbtn), html body .overlay-panel .overlay-box div:has(> .bm-cta) { flex-wrap: wrap; } html body .overlay-panel .overlay-box .gbtn, html body .overlay-panel .overlay-box .bm-cta { flex-shrink: 0; } html body .overlay-panel .overlay-box img { max-width: 100%; } html body .overlay-panel .overlay-box table { width: 100%; max-width: 100%; } html body .overlay-panel .overlay-box td, html body .overlay-panel .overlay-box th { overflow-wrap: anywhere; } html body .overlay-panel .overlay-box .gw-split, html body .overlay-panel .overlay-box .bm-cols { grid-template-columns: 1fr !important; } html body .overlay-panel .overlay-box input, html body .overlay-panel .overlay-box select { max-width: 100%; } html body .overlay-panel .overlay-box .card-row-actions, html body .overlay-panel .overlay-box .bm-actions, html body .overlay-panel .overlay-box .gw-actions, html body .overlay-panel .overlay-box .gw-row { flex-wrap: wrap !important; min-width: 0; max-width: 100%; } html body .overlay-panel .overlay-box .card-row-actions > *, html body .overlay-panel .overlay-box .bm-actions > * { max-width: 100%; min-width: 0; } /* בוחר מבנים (בנייה + מדריך המבנים): קטגוריות בשורה גוללת למעלה, כרטיסים ב-2 טורים */ html body .picker-layout { flex-direction: column !important; align-items: stretch !important; gap: var(--sp-2) !important; } html body .picker-sidebar { flex: none !important; flex-direction: row !important; max-height: none !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: var(--sp-1) !important; position: static !important; } .picker-sidebar::-webkit-scrollbar { display: none; } html body .picker-sidebar .picker-cat-btn { flex: none !important; width: auto !important; white-space: nowrap; } html body .picker-main { max-height: 52dvh !important; } html body .picker-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* שדה-הקרב בשליחה: תבניות בשורה אחת גוללת */ html body .bfp-presets { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .bfp-presets::-webkit-scrollbar { display: none; } html body .bfp-presets .bfp-pre { flex: none; } /* מתחם הברית: הסצנה ברוחב קבוע עם גלילה לצדדים — השלטים לא עולים זה על זה */ html body .alp-stage-wrap { overflow-x: auto !important; overflow-y: hidden; scrollbar-width: thin; } html body .alp-stage { width: var(--mob-alp-stage-w) !important; max-width: none !important; } /* טבלת תפקידים: כל שורה = תפקיד+תיאור ברוחב מלא, כמות וכפתור בצד */ html body .wf-table thead { display: none; } html body .wf-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; border-bottom: var(--bw) solid var(--line); padding-block: var(--sp-1); } html body .wf-table td { display: block; border: 0 !important; padding: 0 !important; } html body .wf-table .wf-desc { max-width: none; } /* מדריך: לא מכסה את המסך — רוחב מלא מעל הסרגל התחתון, גובה מוגבל עם גלילה */ html body #tutorial-panel, html body .tut-panel { inset-inline: var(--sp-1) !important; right: var(--sp-1) !important; left: var(--sp-1) !important; width: auto !important; max-width: none !important; bottom: var(--sp-2) !important; max-height: 40dvh; overflow-y: auto; } } /* [2026-09-30] כפתור "פאנלים" בעיר — הטקסט היה בצבע הרקע (נראה כצ'יפ ריק) */ html body .hub-pin-toggle { background: var(--surface-panel) !important; border: var(--bw) solid var(--line-accent) !important; color: var(--text-strong) !important; } html body .hub-pin-toggle .pin-text { color: var(--text-strong) !important; } html body .hub-pin-toggle > span:empty { display: none; } /* [2026-09-30] רמז "חדשים כאן?" — הודעה במרכז-התחתון (אזור ההודעות), לא על אזור התוכן העליון */ html body #view-city #howto-guide-hint { top: auto !important; bottom: var(--sp-5) !important; } /* ══ תפריט-משחק (לחיצה ימנית / לחיצה ארוכה) [2026-09-30] ══ */ .game-menu { position: fixed; z-index: 30000; min-width: var(--gm-min-w); max-width: var(--gm-max-w); padding: var(--sp-1); background: var(--surface-panel); border: var(--bw-strong) solid var(--line-accent); box-shadow: var(--shadow-float); color: var(--text-body); font-size: var(--fs-sm); } .game-menu .gm-title { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-weight: var(--fw-heavy); color: var(--text-strong); border-bottom: var(--bw) solid var(--line); margin-bottom: var(--sp-1); } .game-menu .gm-title .ui-ico { width: 16px; height: 16px; color: var(--text-accent); } .game-menu .gm-sep { height: var(--bw); background: var(--line); margin: var(--sp-1) var(--sp-2); } html body .game-menu .gm-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--gm-item-h); padding: 0 var(--sp-3); background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-body) !important; text-align: start; cursor: pointer; font: inherit; } html body .game-menu .gm-item::before, html body .game-menu .gm-item::after { display: none !important; } html body .game-menu .gm-item:hover, html body .game-menu .gm-item:focus-visible { background: var(--surface-hover) !important; color: var(--text-strong) !important; outline: none; } html body .game-menu .gm-item.primary { color: var(--text-accent) !important; font-weight: var(--fw-heavy); } html body .game-menu .gm-item.disabled { opacity: .5; cursor: not-allowed; } .game-menu .gm-ico { width: 18px; display: grid; place-items: center; flex: none; } .game-menu .gm-ico .ui-ico { width: 16px; height: 16px; } .game-menu .gm-label { flex: 1; min-width: 0; } .game-menu .gm-kbd { font: var(--fw-bold) var(--fs-3xs) var(--font-mono); color: var(--text-muted); border: var(--bw) solid var(--line); padding: 0 var(--sp-1); } @media (hover: none) { html body .game-menu .gm-item { min-height: var(--mob-tap, 44px); } } /* ══ מחשב (≥761px) — תוכנית-עיצוב 2026-09-30 ══ */ @media (min-width: 761px) { /* סרגל עליון: שורה אחת — זהות (ימין) · משאבים (מרכז) · עריקים + הודעות (שמאל) */ html body #top-hud { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: var(--sp-3) !important; height: var(--hud-bar-h) !important; min-height: var(--hud-bar-h) !important; padding: 0 var(--sp-3) !important; background: var(--surface-panel) !important; border-bottom: var(--bw-strong) solid var(--line-accent) !important; } html body #top-hud #hud-identity { order: 0; } html body #top-hud #hud-resources { order: 1; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 var(--sp-5) var(--sp-2) !important; flex-wrap: nowrap !important; overflow: hidden !important; justify-content: center; align-self: stretch; align-items: center; } html body #top-hud #hud-resources .res-hidden { display: none !important; } html body #top-hud #btn-deserters-hud { order: 2; position: static !important; inset: auto !important; flex: none; } html body #top-hud #hud-actions { order: 3; position: static !important; inset: auto !important; flex: none; } html body #hud-res-more { display: inline-flex; align-items: center; justify-content: center; } html body #hud-res-more[hidden] { display: none !important; } #hud-identity { display: flex; align-items: center; gap: var(--sp-2); flex: none; min-width: 0; } html body #hud-avatar { width: var(--hud-avatar); height: var(--hud-avatar); padding: 0 !important; border-radius: var(--radius-pill) !important; border: var(--bw-strong) solid var(--line-accent) !important; background: var(--surface-sunken) !important; overflow: hidden; flex: none; cursor: pointer; box-shadow: none !important; } /* [2026-09-30, בקשת-משתמש: "רק הפנים או חלק עליון לפחות"] ראש וכתפיים: התמונה ב-300%, מעוגנת למרכז-עליון (הראש ב-~49%/9%) */ #hud-avatar .hud-avatar-img { display: block; width: 100%; height: 100%; background: var(--img-hero-avatar) 49% 2% / 300% auto no-repeat; } #hud-identity .hud-id-text { display: flex; flex-direction: column; line-height: var(--lh-tight); min-width: 0; } #hud-identity .hud-id-text b { color: var(--text-strong); font-size: var(--fs-sm); max-width: var(--hud-name-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hud-identity .hud-id-text span { color: var(--text-muted); font-size: var(--fs-2xs); } .hud-city-switch { display: flex; align-items: center; border: var(--bw) solid var(--line-accent); background: var(--surface-sunken); height: var(--hud-ctl-h); } html body .hud-city-switch button { height: 100%; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-strong) !important; cursor: pointer; font-size: var(--fs-sm); } html body .hud-city-switch button::before, html body .hud-city-switch button::after { display: none !important; } html body .hud-city-switch button:hover:not(:disabled) { background: var(--surface-hover) !important; } html body .hud-city-switch button:disabled { opacity: .35; cursor: default; } .hud-city-switch .hcs-step { border-inline: var(--bw) solid var(--line) !important; } #hud-city-name span { max-width: var(--hud-city-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-city-switch .ui-ico { width: 14px; height: 14px; } /* תפריט-צד: תמיד פתוח (הכרעת-משתמש), שתי קבוצות — משחק למעלה, שליטה למטה; רשימה נקייה, הפריט הפעיל בפס זהב */ html body #app-shell.sidebar-rail #sidebar { width: var(--sidebar-w) !important; } html body #sidebar .sidebar-pin { display: none !important; } html body #sidebar .sidebar-world { order: 3; border-bottom: 0; border-top: var(--bw) solid var(--line-subtle); } html body #sidebar .sidebar-world #city-select, html body #sidebar .sidebar-world .sw-label:nth-of-type(2) { display: none !important; } html body #sidebar .sidebar-scroll { order: 1; } html body #sidebar .sidebar-nav-bottom { order: 4; } html body #sidebar .sidebar-footer { order: 5; } html body #sidebar .sidebar-brand { order: 0; } html body #sidebar .sidebar-scroll::before, html body #sidebar .sidebar-world::before { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: var(--text-muted); letter-spacing: .04em; } /* [2026-10-06] הכותרת מתכונה data-sec (index.html) — כך ש-i18n מתרגם אותה; היה content קבוע בעברית */ html body #sidebar .sidebar-scroll::before { content: attr(data-sec); } html body #sidebar .sidebar-world::before { content: attr(data-sec); padding-inline: 0; } html body #sidebar .sidebar-nav button, html[data-kit]:not(#_k) #app-shell:not(.sidebar-rail) #sidebar .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar .sidebar-nav button, html[data-kit]:not(#_k) #app-shell.sidebar-rail #sidebar:hover .sidebar-nav button { background: transparent !important; border: 0 !important; border-image: none !important; box-shadow: none !important; margin: 0 0 2px !important; width: 100% !important; min-height: var(--side-item-h) !important; height: auto !important; padding: 0 var(--sp-3) !important; justify-content: flex-start !important; gap: var(--sp-3) !important; color: var(--text-secondary) !important; font-size: var(--fs-md) !important; } html body #sidebar .sidebar-nav button::before, html body #sidebar .sidebar-nav button::after { display: none !important; } html body #sidebar .sidebar-nav button:hover { background: var(--surface-hover) !important; color: var(--text-strong) !important; } html body #sidebar .sidebar-nav button.active, html body #sidebar .sidebar-nav button[aria-current="page"] { background: var(--accent-soft) !important; color: var(--text-strong) !important; font-weight: var(--fw-heavy); box-shadow: inset calc(-1 * var(--side-active-w)) 0 0 var(--accent) !important; } html body #sidebar .sidebar-nav button .nav-ico { width: 24px !important; height: 24px !important; } html body #sidebar .sidebar-nav button .nav-text { display: inline !important; } } /* מחשב: שבבי-משאב קומפקטיים (בלי כותרות-הקצה) — כל המשאבים בשורה אחת, במבט אחד (בקשת-משתמש 2026-09-30) */ @media (min-width: 761px) { html[data-kit]:not(#_k) body #top-hud #hud-resources .hud-res-item, html body #top-hud #hud-resources .hud-res-item { background: var(--hud-chip-bg) !important; border: var(--bw) solid var(--hud-chip-line) !important; border-image: none !important; box-shadow: none !important; height: var(--hud-ctl-h) !important; padding: 0 var(--sp-2) !important; gap: var(--sp-1) !important; } html body #top-hud #hud-resources .hud-res-item::before, html body #top-hud #hud-resources .hud-res-item::after { display: none !important; } html body #top-hud #hud-resources { padding-inline: var(--sp-4) !important; gap: var(--sp-1) !important; } html body #top-hud #hud-resources .hud-res-item { padding: 0 var(--sp-1) !important; gap: 2px !important; font-size: var(--fs-2xs) !important; } html body #top-hud #hud-resources .hud-res-item img, html body #top-hud #hud-resources .hud-res-item .ui-ico { width: 16px !important; height: 16px !important; } } /* מסך נמוך: פריטי תפריט-הצד צפופים יותר כדי שכל הקבוצות ייכנסו בלי גלילה */ @media (min-width: 761px) and (max-height: 820px) { :root { --side-item-h: 32px; } html body #sidebar .sidebar-brand { padding-block: var(--sp-2) !important; } } /* ══ מחשב — תוכן מקצה-לקצה, HUD בפינות [2026-09-30, תוכנית-עיצוב שלב 5] ══ שמאל-עליון: מידע-הקשר · שמאל-תחתון: זום/מרכוז · ימין-תחתון: הפעולה הראשית של המסך (כפתור זהב אחד) · מרכז-תחתון: הודעות */ @media (min-width: 761px) { html body #view-map { height: calc(100vh - var(--hud-h)) !important; padding: 0 !important; } html body #map-wrap { border: 0 !important; border-radius: 0 !important; } html body #view-continent, html body #view-city { padding: 0 !important; height: calc(100vh - var(--hud-h)) !important; } html body .continent-detail { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body #continent-found-city-toggle { top: auto !important; bottom: var(--corner-gap) !important; right: var(--corner-gap) !important; left: auto !important; } html body #view-city .city-edit-toggle { top: auto !important; bottom: var(--corner-gap) !important; right: var(--corner-gap) !important; left: auto !important; } html body #view-city .hub-float-stack { right: auto !important; left: var(--corner-gap) !important; top: var(--corner-gap) !important; align-items: flex-start !important; } } /* ══ חלונות — 3 רוחבים קבועים [2026-09-30, תוכנית-עיצוב שלב 6]: רוחב (לא max-width) כדי שלא ישתנה בין לשוניות ══ */ @media (min-width: 761px) { #profile-overlay .overlay-box, #notifications-overlay .overlay-box, #player-profile-overlay .overlay-box, #unit-info-overlay .overlay-box, #city-quickmenu-overlay .overlay-box, #build-queue-overlay .overlay-box, #zone-detail-overlay .overlay-box, #rings-overlay .overlay-box { width: min(var(--win-s), 96vw) !important; max-width: none !important; } #actions-overlay .overlay-box, #mailbox-overlay .overlay-box, #leaderboard-overlay .overlay-box, #seasons-overlay .overlay-box, #trade-overlay .overlay-box, #diplomacy-overlay .overlay-box, #research-overlay .overlay-box, #alliance-overlay .overlay-box, #admin-overlay .overlay-box, #factory-guide-overlay .overlay-box, #minigame-overlay .overlay-box { width: min(var(--win-m), 96vw) !important; max-width: none !important; } #shop-overlay .overlay-box, #battle-report-overlay .overlay-box, #pve-battle-report-overlay .overlay-box, #pve-camp-overlay .overlay-box, #attack-matrix-overlay .overlay-box { width: min(var(--win-l), 96vw) !important; max-width: none !important; } } /* זהות-השחקן בסרגל העליון — מחשב בלבד (בטלפון: העיר בשורה השנייה, הגיבור בסרגל התחתון) */ @media (max-width: 760px) { html body #hud-identity { display: none !important; } } /* [2026-09-30, דיווח-משתמש: "ה-UI קופץ כשמניחים את העכבר"] ריחוף/לחיצה לא מזיזים שום אלמנט: בלי translate/scale על כפתורים. המשוב = תמונת-המצב (אותו קנבס בדיוק — tools/uikit-build.js normalizeSqStates) + הבהרה/הכהיה בלבד. */ html body .gbtn:hover, html body .bm-cta:hover, html body button.secondary:hover, html body .overlay-panel .overlay-box button:hover, html body .lp-btn:hover, html body .gbtn:active, html body .bm-cta:active, html body button.secondary:active, html body .overlay-panel .overlay-box button:active { transform: none !important; } /* ══ מדריך = מגירה בקצה (כמו רשימת המבנים בעיר) [2026-09-30] — לשונית אנכית + פאנל לצידה, מרכז-אנכי, קצה ימני של אזור-התוכן ══ */ html body #tutorial-panel.tut-drawer { position: fixed !important; top: var(--tut-drawer-top) !important; bottom: auto !important; right: auto !important; left: 0 !important; width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; transform: translateY(-50%); z-index: 6800; display: flex; flex-direction: row; direction: ltr; align-items: center; pointer-events: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html body #tutorial-panel.tut-drawer > * { pointer-events: auto; direction: rtl; } html body #tutorial-panel .tut-tab { order: 1; writing-mode: vertical-rl; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-1) !important; min-height: 0 !important; width: auto !important; height: auto !important; background: var(--surface-sunken) !important; border: var(--bw) solid var(--line-accent) !important; border-left: 0 !important; border-image: none !important; box-shadow: var(--shadow-float) !important; color: var(--text-strong) !important; font-weight: var(--fw-heavy); font-size: var(--fs-xs); cursor: pointer; position: relative; border-radius: 0 !important; } html body #tutorial-panel .tut-tab::before, html body #tutorial-panel .tut-tab::after { display: none !important; } html body #tutorial-panel .tut-tab .ui-ico { transform: rotate(90deg); width: 16px; height: 16px; } html body #tutorial-panel .tut-tab .tut-dot { position: absolute; top: calc(-1 * var(--sp-2)); right: calc(-1 * var(--sp-2)); writing-mode: horizontal-tb; } html body #tutorial-panel.tut-drawer .tut-panel { order: 2; position: static !important; inset: auto !important; transform: none !important; width: var(--tut-panel-w) !important; max-height: 70vh !important; overflow-y: auto; margin: 0 !important; } html body #tutorial-panel.tut-drawer:not(.open) .tut-panel { display: none; } html body.win-open #tutorial-panel.tut-drawer { top: var(--tut-drawer-top) !important; bottom: auto !important; z-index: 9500; } @media (max-width: 760px) { html body #tutorial-panel.tut-drawer { left: 0 !important; } html body #tutorial-panel.tut-drawer .tut-panel { width: min(var(--tut-panel-w), calc(100vw - 48px)) !important; max-height: 60dvh !important; } } /* כפתורי-הזום ביבשת — זהים למפה ולעיר (אותו תו +/−, אותו צבע וגודל) */ html body .cc-view-ctrl .gbtn { color: var(--kit-text-accent, var(--text-accent)) !important; font-size: var(--fs-lg) !important; font-weight: var(--fw-heavy); line-height: 1; } /* [2026-09-30, דיווח-משתמש: "עיצוב ומיקום המשאבים נחתך"] שורת-משאב (הקמת עיר, תרומות וכו'): שדה-הכמות עם כותרות-הקצה של הערכה היה רחב מעמודת ה-96px וגלש/נחתך — העמודה רחבה יותר והשדה ממלא אותה בדיוק (כולל הקישוט). */ html body .gw-res-row { grid-template-columns: 22px minmax(0, 1fr) var(--res-input-w) !important; } html body .gw-res-row input.ginput, html body .gw-res-row input[type=number] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* [2026-09-30] משוב ריחוף/לחיצה לכפתורי-הערכה — אותה תמונה (design-tokens.css), רק הבהרה/הכהיה; שום אלמנט לא זז */ html[data-kit]:not(#_k) .gbtn:hover, html[data-kit]:not(#_k) .bm-cta:hover, html[data-kit]:not(#_k) button.secondary:hover, html[data-kit]:not(#_k) button.danger:hover, html[data-kit]:not(#_k) .page-btn:hover, html[data-kit]:not(#_k) .panel-tab:hover:not(.active), html[data-kit]:not(#_k) .picker-cat-btn:hover:not(.active), html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]):hover, html[data-kit]:not(#_k) .city-edit-toggle:hover { filter: var(--kit-btn-hover); } html[data-kit]:not(#_k) .gbtn:active, html[data-kit]:not(#_k) .bm-cta:active, html[data-kit]:not(#_k) button.secondary:active, html[data-kit]:not(#_k) button.danger:active, html[data-kit]:not(#_k) .page-btn:active, html[data-kit]:not(#_k) .overlay-panel .overlay-box button:not([class]):active, html[data-kit]:not(#_k) .city-edit-toggle:active { filter: var(--kit-btn-press); } html[data-kit]:not(#_k) .gbtn:disabled:hover, html[data-kit]:not(#_k) .bm-cta:disabled:hover { filter: none; } /* מחשב צר (≤1600): מפנים מקום כדי שכל המשאבים ייכנסו — שם/רמה ליד האווטאר מוסתרים (בטולטיפ), עריקים = אייקון + מספר */ @media (min-width: 761px) and (max-width: 1600px) { html body #hud-identity .hud-id-text { display: none; } html body #top-hud #btn-deserters-hud .dh-label { display: none; } html body #top-hud #btn-deserters-hud { padding-inline: var(--sp-2) !important; } html body #top-hud { gap: var(--sp-2) !important; } } @media (min-width: 761px) and (max-width: 1600px) { html body #hud-city-name span { max-width: var(--hud-city-w-narrow) !important; } html body #top-hud #hud-resources { padding-inline: var(--sp-2) !important; } } @media (min-width: 761px) and (max-width: 1400px) { html body #hud-city-name span { display: none; } } @media (min-width: 761px) and (max-width: 1300px) { html body .hud-city-switch .hcs-step { display: none; } } /* [2026-10-02] מפעלי הרדיוס: חלון רחב, כרטיסים עצמאיים ופקדים בתוך הכרטיס. התחום המקומי גובר על מידות החלונות/ערכת הכפתורים הישנות, בלי לשנות חלונות אחרים. */ html:not(#_k) #zone-detail-overlay .overlay-box { box-sizing: border-box; width: min(var(--win-l), calc(100vw - var(--sp-6))) !important; max-width: none !important; height: min(var(--win-h), calc(100dvh - var(--sp-6))) !important; max-height: calc(100dvh - var(--sp-6)) !important; padding: 0 var(--sp-4) var(--sp-4) !important; overflow: auto; overscroll-behavior: contain; scroll-padding-block-start: calc(var(--kh-title-band) + var(--sp-3)); } html:not(#_k) #zone-detail-overlay #zone-detail-title { box-sizing: border-box; height: auto !important; min-height: var(--kh-title-band); margin: 0 0 var(--sp-4) !important; padding-block: var(--sp-2) !important; font-size: var(--fs-lg) !important; white-space: normal !important; line-height: var(--lh-tight); gap: var(--sp-2); } html:not(#_k) #zone-detail-overlay .rf-title-text { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; overflow-wrap: anywhere; color: var(--text-strong) !important; } html:not(#_k) #zone-detail-overlay .rf-title-text .ui-ico, html:not(#_k) #zone-detail-overlay .close-btn { flex-shrink: 0; } html:not(#_k) #zone-detail-overlay .hero-window, html:not(#_k) #zone-detail-overlay .hero-window-overlay { min-height: 0 !important; padding: 0 !important; background: none !important; overflow: visible; } html:not(#_k) #zone-detail-overlay .rf-dashboard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr) !important; gap: var(--sp-5) !important; margin-top: 0; align-items: start; } html:not(#_k) #zone-detail-overlay .gw-card { background: var(--surface-panel) !important; padding: var(--sp-4) !important; border: var(--bw) solid var(--line) !important; box-shadow: none !important; } html:not(#_k) #zone-detail-overlay .gw-main > .gw-card { padding: 0 !important; background: none !important; border: 0 !important; } html:not(#_k) #zone-detail-overlay .gw-side { padding: 0 !important; border: 0; gap: var(--sp-4); } html:not(#_k) #zone-detail-overlay .rf-pools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; } html:not(#_k) #zone-detail-overlay .rf-pool-summary { display: flex; flex-direction: column; gap: var(--sp-1); line-height: var(--lh-body); } html:not(#_k) #zone-detail-overlay .rf-pool-summary > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); } html:not(#_k) #zone-detail-overlay .rf-points { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4) !important; margin: var(--sp-4) 0 0; } html:not(#_k) #zone-detail-overlay .rf-point { display: flex !important; flex-direction: column !important; align-items: stretch; gap: var(--sp-3) !important; min-width: 0; padding: var(--sp-4) !important; background: var(--surface-sunken) !important; border: var(--bw) solid var(--line) !important; color: var(--text-body); box-sizing: border-box; } html:not(#_k) #zone-detail-overlay .rf-point.empty { border-style: dashed !important; } html:not(#_k) #zone-detail-overlay .rf-point > * { grid-area: auto !important; min-width: 0; max-width: 100%; box-sizing: border-box; } html:not(#_k) #zone-detail-overlay .rf-point-head { flex: none !important; flex-direction: row !important; align-items: center !important; gap: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; border-bottom: var(--bw) solid var(--line) !important; } html:not(#_k) #zone-detail-overlay .rf-resources { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) !important; } html:not(#_k) #zone-detail-overlay .rf-choice { position: relative; min-height: var(--kh-btn); padding: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--fs-sm); color: var(--text-strong); background: var(--surface-panel); border: var(--bw) solid var(--line); box-sizing: border-box; gap: var(--sp-1); } html:not(#_k) #zone-detail-overlay .rf-choice input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } html:not(#_k) #zone-detail-overlay .rf-choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent); } html:not(#_k) #zone-detail-overlay .rf-choice:focus-within, html:not(#_k) #zone-detail-overlay button:focus-visible, html:not(#_k) #zone-detail-overlay select:focus-visible { outline: var(--bw-strong) solid var(--accent) !important; outline-offset: var(--sp-1); } html:not(#_k) #zone-detail-overlay .rf-time, html:not(#_k) #zone-detail-overlay .rf-net { flex-wrap: wrap; margin: 0; line-height: var(--lh-body); font-size: var(--fs-sm); } html:not(#_k) #zone-detail-overlay .rf-net b, html:not(#_k) #zone-detail-overlay .rf-bonus { color: var(--text-strong) !important; } html:not(#_k) #zone-detail-overlay .rf-point .rf-note, html:not(#_k) #zone-detail-overlay .rf-point small { color: var(--text-body) !important; } html:not(#_k) #zone-detail-overlay .rf-action { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); margin-top: auto; } html:not(#_k) #zone-detail-overlay .rf-cost { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); color: var(--text-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-body); overflow-wrap: anywhere; } html:not(#_k) #zone-detail-overlay .gbtn { width: 100% !important; min-width: 0 !important; min-height: var(--kh-btn); max-width: 100%; align-self: stretch; margin: 0 !important; flex-wrap: nowrap; flex-shrink: 0; justify-content: center; } html:not(#_k) #zone-detail-overlay .rf-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: auto 0 0 !important; gap: var(--sp-3) !important; } html:not(#_k) #zone-detail-overlay .rf-redesig { width: 100% !important; min-width: 0 !important; box-sizing: border-box; min-height: var(--kh-btn); color: var(--text-strong) !important; font-size: var(--fs-sm); } html[data-kit]:not(#_k) #zone-detail-overlay .rf-redesig { color: var(--kit-text) !important; } html:not(#_k) #zone-detail-overlay .rf-workers { display: flex !important; flex-direction: column; align-items: stretch; gap: var(--sp-2) !important; margin: 0; } html:not(#_k) #zone-detail-overlay .rf-workers-label, html:not(#_k) #zone-detail-overlay .rf-worker-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } html:not(#_k) #zone-detail-overlay .rf-workers .rf-round, html:not(#_k) #zone-detail-overlay .rf-workers .rf-max { min-width: var(--kh-btn) !important; min-height: var(--kh-btn) !important; height: var(--kh-btn) !important; width: var(--kh-btn) !important; } html:not(#_k) #zone-detail-overlay .rf-workers .rf-max { width: 60px !important; } html:not(#_k) #zone-detail-overlay .rf-table-wrap { min-width: 0; overflow-x: auto; } html:not(#_k) #zone-detail-overlay .rf-table { table-layout: fixed; } html:not(#_k) #zone-detail-overlay .rf-table th:first-child { width: 45%; } html:not(#_k) #zone-detail-overlay .rf-table th:last-child { width: 15%; } html:not(#_k) #zone-detail-overlay .rf-table th, html:not(#_k) #zone-detail-overlay .rf-table td { overflow-wrap: anywhere; line-height: var(--lh-body); } html:not(#_k) #zone-detail-overlay .rf-msg { color: var(--text-body); line-height: var(--lh-body); } html:not(#_k) #zone-detail-overlay .rf-msg:empty { display: none; } @media (max-width: 1000px) { html:not(#_k) #zone-detail-overlay .rf-dashboard { grid-template-columns: minmax(0, 1fr) !important; } html:not(#_k) #zone-detail-overlay .gw-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { html:not(#_k) #zone-detail-overlay .overlay-box { width: calc(100vw - var(--sp-2)) !important; height: calc(100dvh - var(--mob-tab-h, 56px) - var(--sp-2)) !important; max-height: calc(100dvh - var(--mob-tab-h, 56px) - var(--sp-2)) !important; padding: 0 var(--sp-2) var(--sp-2) !important; } html:not(#_k) #zone-detail-overlay .rf-dashboard { gap: var(--sp-4) !important; } html:not(#_k) #zone-detail-overlay .rf-points, html:not(#_k) #zone-detail-overlay .gw-side { grid-template-columns: minmax(0, 1fr); } html:not(#_k) #zone-detail-overlay .rf-pools { grid-template-columns: minmax(0, 1fr); } html:not(#_k) #zone-detail-overlay .rf-point { padding: var(--sp-3) !important; } } /* [2026-10-02] Double-click controls without selecting their labels. */ button, [role="button"], .gbtn, .rf-choice, .rf-worker-controls, .nav-item, .gw-tab { -webkit-user-select: none; user-select: none; } button img, [role="button"] img { -webkit-user-drag: none; } /* [2026-10-02] Hero parts and imported construction artwork. */ html:not(#_k) .hero-portrait canvas{width:100%;max-height:560px;object-fit:contain} html:not(#_k) .hero-art-controls{display:grid;gap:.4rem;margin-top:.5rem;font-size:var(--fs-2xs);color:var(--text-muted)} html:not(#_k) .hero-art-controls label{display:flex;gap:.25rem;align-items:center;min-width:0} html:not(#_k) .hero-art-controls select{min-width:0;width:100%;background:var(--field-bg);color:var(--text-strong);border:1px solid var(--line-subtle);border-radius:var(--radius)} html:not(#_k) .hero-art-parts{display:flex;gap:.3rem;flex-wrap:wrap} html:not(#_k) .hero-art-parts label{flex:1 1 50px} html:not(#_k) .hero-art-controls [aria-pressed=true]{background:var(--accent);color:var(--text-on-accent)} html:not(#_k) .kit-construction-icon{width:44px;height:44px;object-fit:contain} html:not(#_k) .hero-art-parts>span{display:flex;gap:.2rem;align-items:center;flex:1 1 70px;flex-wrap:wrap;min-width:0} /* Imported equipment controls keep the existing painted buttons within each card. */ html:not(#_k) .hero-gear{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))} html:not(#_k) .hero-main,html:not(#_k) .hero-gear-card{min-width:0} html:not(#_k) .hero-art-controls>label{flex-direction:column;align-items:stretch} html:not(#_k) .hero-art-parts{display:grid;grid-template-columns:1fr} html:not(#_k) .hero-art-parts>span{display:grid;grid-template-columns:14px minmax(0,1fr) 44px;gap:.25rem} html:not(#_k) .hero-art-controls select{height:36px} html[data-kit]:not(#_k) .hero-art-controls .gbtn[data-art-prem]{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;background:var(--img-btn-icon) center/100% 100% no-repeat!important;border:0!important;border-image:none!important;justify-content:center} html[data-kit]:not(#_k) .hero-art-controls .gbtn[data-art-save]{--k-h:32px;width:100%!important;min-width:0!important;font-size:var(--fs-2xs)!important} html:not(#_k) .hero-art-parts>span>label{grid-column:2/-1} html:not(#_k) .hero-bag{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))} html:not(#_k) .hbi-act .gbtn{min-width:0!important;width:0!important;max-width:100%;flex:1 1 0!important} html:not(#_k) .hero-bag-item{min-width:0} .kit-damage-icon{width:32px;height:32px;object-fit:contain;vertical-align:middle} /* [2026-10-03] Hero inventory and owned premium parts. */ html:not(#_k) .hero-portrait{aspect-ratio:4/5;max-height:480px} html:not(#_k) .hero-portrait canvas{width:100%;height:100%;max-height:480px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.25))} .hero-portrait-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.6rem 0} .hero-premium-entry{width:100%;margin-bottom:.6rem} .hero-slot-change{margin-top:.4rem} .hero-popup{width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:1rem;box-sizing:border-box;overflow:auto;border:2px solid var(--accent);border-radius:var(--radius);background:var(--surface-panel);color:var(--text-strong);box-shadow:var(--shadow-window)} .hero-popup::backdrop{background:var(--surface-scrim)} .hero-popup-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem} .hero-popup-head h3{margin:0}.hero-popup-content{min-width:0} .hero-bag-filter{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem} .hero-bag-filter select,.hero-premium-item select{background:var(--field-bg);color:var(--text-strong);padding:.4rem;border:1px solid var(--line-subtle);border-radius:var(--radius);min-width:0;max-width:100%} .hero-popup .hero-bag-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.6rem;border-bottom:1px solid var(--line-subtle)} .hero-popup .hero-bag-item canvas{width:72px;height:72px} .hero-popup .hbi-act{display:flex;gap:.3rem;flex-wrap:wrap}.hero-popup .hbi-body{overflow-wrap:anywhere} .hero-popup-msg{min-height:1.4em;margin-top:.6rem;color:var(--text-strong)} .hero-nav-icon{width:28px;height:28px;object-fit:contain;margin-inline-end:.25rem} .hero-slot-icon{width:80px;height:80px;object-fit:contain;display:block;margin:0 auto} .hero-gear-fb:has(.hero-slot-icon){display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal} html:not(#_k) #occupation-overlay .occ-box{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow:hidden} html:not(#_k) #occupation-overlay .occ-box>h2{flex:none;margin-top:0} html:not(#_k) #occupation-overlay .occ-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:1rem;scrollbar-gutter:stable} html:not(#_k) .icb-up-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))} html:not(#_k) .icb-up .hero-skill-icon{width:64px;height:64px} html:not(#_k) #unit-info-overlay .overlay-box{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain} .hero-premium-preview{width:min(100%,260px);height:auto;display:block;margin:0 auto .6rem} .hero-premium-item{display:flex;flex-wrap:wrap;align-items:end;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--line-subtle)} .hero-premium-item>b{width:100%}.hero-premium-item label{display:grid;gap:.25rem;flex:1 1 140px} html:not(#_k) #guide-picker .picker-card>img,html:not(#_k) #bm-extra .picker-card>img{width:96px;height:110px} html:not(#_k) .city-edit-bar .ceb-item{width:110px} html:not(#_k) .city-edit-bar .ceb-item>img{width:90px;height:100px} @media(max-width:700px){ html:not(#_k) #guide-picker .picker-card>img,html:not(#_k) #bm-extra .picker-card>img{width:76px;height:90px} html:not(#_k) .city-edit-bar .ceb-item{width:90px} html:not(#_k) .city-edit-bar .ceb-item>img{width:74px;height:84px} .hero-popup .hero-bag-item{grid-template-columns:60px minmax(0,1fr)} .hero-popup .hero-bag-item canvas{width:60px;height:60px}.hero-popup .hbi-act{grid-column:2} } /* [2026-10-03] Fixed icon columns keep abilities and unit text apart in RTL. */ html:not(#_k) #occupation-overlay .icb-up-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px} html:not(#_k) #occupation-overlay .icb-up{grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border-radius:var(--radius)} html:not(#_k) #occupation-overlay .icb-up>img{width:96px;height:112px;object-fit:contain;position:static;align-self:start} html:not(#_k) #occupation-overlay .icb-up>.hero-skill-icon{width:80px;height:80px} html:not(#_k) #occupation-overlay .icb-up>div{min-width:0;overflow-wrap:anywhere} html:not(#_k) #occupation-overlay .icb-up b{display:block;margin-bottom:6px} html:not(#_k) #occupation-overlay .icb-up small{line-height:1.6;margin-top:7px} html:not(#_k) #occupation-overlay .icb-up .res-chip-row{flex-wrap:wrap;gap:5px;margin-top:9px} html:not(#_k) #occupation-overlay .icb-up .gbtn{position:static;margin-top:10px;max-width:100%} html:not(#_k) .hero-popup .hero-bag{grid-template-columns:minmax(0,1fr)} html:not(#_k) .hero-popup .hbi-act{display:flex;gap:6px;flex-wrap:wrap} html:not(#_k) .hero-popup .hbi-act .gbtn{width:auto;flex:0 1 auto} @media(max-width:520px){html:not(#_k) #occupation-overlay .icb-up{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:10px}html:not(#_k) #occupation-overlay .icb-up>img{width:80px;height:100px}html:not(#_k) #occupation-overlay .icb-up>.hero-skill-icon{width:72px;height:72px}} /* [2026-10-06, בקשת-משתמש: "השחקן לא יכול לראות כלום עד שהוא בוחר עולם"] מחובר בלי עולם נבחר (app.js syncNoWorldState): רק בחירת העולם בתפריט הצד, הפרופיל והיציאה — בלי ניווט, בלי HUD ובלי מעבר-ערים. */ body.no-world #top-hud, body.no-world .sidebar-scroll, body.no-world #city-select, body.no-world .sidebar-world .sw-label:nth-of-type(2), body.no-world #tutorial-panel { display: none !important; } /* [2026-10-06] מד כעס הסביבה (חלון פעולות) */ .pve-anger-log { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .pve-anger-log span { background: var(--surface-sunken); border-radius: var(--radius); padding: 0 var(--sp-1); } /* [2026-10-06] מדריך שדה הקרב (loadGuideBattlePage) */ .gbf-tabs { margin-bottom: var(--sp-3); flex-wrap: wrap; } .gbf-grid { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: var(--sp-1); overflow-x: auto; } .gbf-colh, .gbf-rowh { font-size: var(--fs-xs); font-weight: var(--fw-bold, 700); color: var(--text-accent); text-align: center; align-self: center; padding: var(--sp-1); } .gbf-cell { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-content: flex-start; min-height: 64px; padding: var(--sp-1); background: var(--surface-sunken); border: var(--bw) solid var(--line-subtle); border-radius: var(--radius); } .gbf-u { display: flex; flex-direction: column; align-items: center; width: 56px; font-size: var(--fs-3xs); text-align: center; line-height: 1.2; } .gbf-u img { width: 40px; height: 40px; object-fit: contain; } .gbf-none { color: var(--text-muted, var(--line-subtle)); margin: auto; } .gbf-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .gbf-tbl th, .gbf-tbl td { text-align: start; vertical-align: top; padding: var(--sp-1); border-bottom: var(--bw) solid var(--line-subtle); } .gbf-tbl th { white-space: nowrap; color: var(--text-accent); } .gbf-ico { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-inline-end: var(--sp-1); } /* [2026-10-06] דוח קרב: תיאור מילולי לכל סבב + אנימציה (bfNarrativeHtml / bfAnimateRound) */ .bf-anim-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-1); } .bf-story { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border: var(--bw) solid var(--line-subtle); border-radius: var(--radius); font-size: var(--fs-sm); } .bf-story h4 { margin: 0 0 var(--sp-1); color: var(--text-accent); } .bf-story h5 { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--text-accent); } .bf-story-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); } .bf-story ul { margin: 0; padding-inline-start: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); line-height: 1.5; } .bf-story-rep { margin-top: var(--sp-2) !important; } .bf-sq-wrap { position: relative; transition: filter .2s; } .bf-sq-wrap.bf-hit .bfp-slot { box-shadow: 0 0 0 var(--bw-strong) var(--status-negative); filter: brightness(1.25); } @media (prefers-reduced-motion: reduce) { .bf-sq-wrap { transition: none; } } /* חלון הדוח — גדול, נפתח מעל חלונות אחרים */ #battle-report-overlay, #pve-battle-report-overlay { z-index: 1200; } #battle-report-overlay .overlay-box, #pve-battle-report-overlay .overlay-box { width: min(1180px, 96vw); max-height: 94vh; } /* [2026-10-06] לוגיסטיקה — העברת משאבים */ .ship-note { font-size: var(--fs-2xs); color: var(--text-muted, var(--text-strong)); margin-bottom: var(--sp-1); } .ship-res-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .ship-res span { display: flex; align-items: center; gap: var(--sp-1); } .ship-res-ico { width: 18px; height: 18px; object-fit: contain; } /* [2026-10-07] לוח מובילים — לשוניות ניקוד */ .lb-tabs { flex-wrap: wrap; margin-bottom: var(--sp-2); } .lb-me { font-size: var(--fs-sm); margin-bottom: var(--sp-1); } .lb-scroll { overflow-x: auto; } @media (max-width: 760px) { #leaderboard-table .lb-part { display: none; } } /* [2026-10-07] כפתור צלילים בסרגל העליון */ #btn-sound { display: inline-flex; align-items: center; justify-content: center; } #btn-sound[aria-pressed="false"] { opacity: .6; } /* [2026-10-07] חלונית שמע: כללי / רקע / אפקטים */ #audio-pop[hidden] { display: none; } /* [2026-10-08, דיווח-משתמש: "לא נסגר"] display:grid גבר על hidden */ #audio-pop { position: fixed; z-index: 1300; box-sizing: border-box; width: min(300px, calc(100vw - 2 * var(--sp-4))); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); background: var(--surface-panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float); color: var(--text-body); font-family: var(--font-body); } #audio-pop .ap-title { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-strong); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line-subtle); } #audio-pop .ap-row { display: grid; grid-template-columns: 32px 64px 1fr 40px; align-items: center; gap: var(--sp-2); } #audio-pop .ap-mute { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } #audio-pop .ap-mute:hover { background: var(--surface-hover); } #audio-pop .ap-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } #audio-pop .ap-close:hover { background: var(--surface-hover); } #audio-pop .ap-close .ui-ico { width: 14px; height: 14px; } #audio-pop .ap-mute .ui-ico { width: 18px; height: 18px; } #audio-pop .ap-label { font-size: var(--fs-sm); color: var(--text-strong); } #audio-pop .ap-val { font-size: var(--fs-xs); color: var(--text-muted); text-align: end; font-variant-numeric: tabular-nums; } #audio-pop .ap-row.muted .ap-label, #audio-pop .ap-row.muted .ap-val { color: var(--text-faint); } #audio-pop .ap-row.muted .ap-range { opacity: .45; } /* מחוון עוצמה תמיד משמאל (שקט) לימין (חזק) — גם בעברית, כמו בכל נגן; כך המילוי תמיד עקבי */ #audio-pop .ap-range { direction: ltr; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; cursor: pointer; background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--surface-sunken) var(--fill, 50%)); border: 1px solid var(--line); } #audio-pop .ap-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 18px; background: var(--text-strong); border: 1px solid var(--line-accent); cursor: pointer; } #audio-pop .ap-range::-moz-range-thumb { width: 14px; height: 18px; background: var(--text-strong); border: 1px solid var(--line-accent); border-radius: 0; cursor: pointer; } #audio-pop .ap-range:focus-visible { outline: 2px solid var(--line-accent); outline-offset: 2px; } /* [2026-10-08] מיני-משחק פינוי מכשולים (runMiniGame) */ #obst-game { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; background: var(--surface-scrim); } #obst-game[hidden] { display: none; } #obst-game .og-box { width: min(520px, calc(100vw - 2 * var(--sp-4))); background: var(--surface-panel); border: 1px solid var(--line-accent); box-shadow: var(--shadow-window); display: grid; gap: var(--sp-2); padding: var(--sp-3); } #obst-game .og-head { display: flex; align-items: center; gap: var(--sp-2); } #obst-game .og-head b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-accent); } #obst-game .og-help { flex: 1; font-size: var(--fs-sm); color: var(--text-muted); } #obst-game .og-x { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } #obst-game .og-x .ui-ico { width: 14px; height: 14px; } #obst-game .og-cv { width: 100%; height: auto; display: block; touch-action: none; cursor: pointer; border: 1px solid var(--line); } #obst-game .og-foot { font-size: var(--fs-sm); color: var(--text-strong); text-align: center; font-variant-numeric: tabular-nums; } .iso-obstacle .tile-hit { cursor: pointer; } /* [2026-10-08] שמות ורמות מבנים בעיר: שם תמיד מתחת למבנה; רמה מוסתרת בזום החוצה; כפתורי הסתרה */ html body .city-hub-grid.iso .city-tile:not(.iso-decor) .tile-label { opacity: 1; transform: translateX(-50%); position: absolute; left: 50%; top: 100%; bottom: auto; width: max-content; max-width: none; overflow: visible; white-space: nowrap; font-size: var(--fs-2xs); line-height: 1.3; padding: 1px var(--sp-1); color: var(--text-strong); background: var(--surface-sunken); } #city-hub.city-zoom-far .city-hub-grid.iso .tile-lvl, #city-hub.hide-levels .city-hub-grid.iso .tile-lvl { display: none; } #city-hub.hide-names .city-hub-grid.iso .tile-label { display: none; } #city-hub.city-zoom-far .city-hub-grid.iso .city-tile .tile-label { font-size: var(--fs-3xs); } .city-label-toggles { display: flex; gap: var(--sp-1); pointer-events: auto; align-self: stretch; justify-content: flex-end; } .city-label-toggles[hidden] { display: none; } .city-label-toggles button { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); background: var(--surface-panel); color: var(--text-strong); border: 1px solid var(--line); cursor: pointer; } .city-label-toggles button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; } /* [2026-10-08] התיק — פריטים אספניים (openBagWindow) + מסגרת נדירות בפלטת ההצבה */ #bag-pop { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; background: var(--surface-scrim); } #bag-pop[hidden] { display: none; } #bag-pop .bag-box { width: min(640px, calc(100vw - 2 * var(--sp-4))); max-height: 86vh; overflow: auto; background: var(--surface-panel); border: 1px solid var(--line-accent); box-shadow: var(--shadow-window); display: grid; gap: var(--sp-3); padding: var(--sp-4); } #bag-pop .bag-head { display: flex; align-items: center; gap: var(--sp-2); } #bag-pop .bag-head b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-accent); } #bag-pop .bag-head span { flex: 1; font-size: var(--fs-sm); color: var(--text-muted); } #bag-pop .og-x { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } #bag-pop .og-x .ui-ico { width: 14px; height: 14px; } #bag-pop .bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-2); } #bag-pop .bag-item { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--line); text-align: center; } #bag-pop .bag-item img { width: 96px; height: 96px; object-fit: contain; } #bag-pop .bag-item b { font-size: var(--fs-sm); color: var(--text-strong); } #bag-pop .bag-item small { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } #bag-pop .bag-empty { grid-column: 1 / -1; padding: var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } #bag-pop .bag-item.r-rare, html:not(#_k) .city-edit-bar .ceb-item.r-rare { border-color: var(--status-info); } #bag-pop .bag-item.r-legendary, html:not(#_k) .city-edit-bar .ceb-item.r-legendary { border-color: var(--text-accent); box-shadow: inset 0 0 0 1px var(--text-accent); } /* [2026-10-08] עריכת פריט מוצב: גודל (--dsc) וכיוון (--dfl = מראה) מהשרת; פריט נבחר מודגש */ html body .city-hub-grid.iso .city-tile.iso-decor .tile-visual { transform: scale(calc(var(--dsc, 1) * var(--dfl, 1)), var(--dsc, 1)); transform-origin: 50% 100%; } html body .city-hub-grid.iso .city-tile.iso-sel .tile-visual img.tile-icon { filter: drop-shadow(0 0 3px var(--text-accent)) drop-shadow(0 0 6px var(--text-accent)); } html:not(#_k) .city-edit-bar .ceb-adjust { flex-wrap: wrap; align-items: center; gap: var(--sp-2); } html:not(#_k) .city-edit-bar .ceb-adjust .ceb-adj-pic { width: 40px; height: 48px; object-fit: contain; } html:not(#_k) .city-edit-bar .ceb-adjust b { color: var(--text-strong); font-size: var(--fs-sm); } html:not(#_k) .city-edit-bar .ceb-adjust small { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } /* [2026-10-08, בקשת-משתמש: "שמות ורמות מעל הכל — ששום דבר לא יסתיר; הרמה צמודה לשם"] שכבת שמות אחת מעל המבנים והחומה */ html body .city-hub-grid.iso .city-tile .tile-label, html body .city-hub-grid.iso .city-tile .tile-lvl { display: none; } .city-hub-grid.iso .iso-name-layer { position: absolute; inset: 0; z-index: 6000; pointer-events: none; } .city-hub-grid.iso .iso-name { position: absolute; transform: translate(-50%, 3px); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; padding: 1px var(--sp-2) 1px 2px; background: var(--surface-sunken); border: 1px solid var(--line); font-size: var(--fs-2xs); line-height: 1.3; color: var(--text-strong); } .city-hub-grid.iso .iso-name .lv { min-width: 16px; padding: 0 3px; text-align: center; background: var(--accent); color: var(--text-on-accent); font-weight: 700; font-variant-numeric: tabular-nums; } #city-hub.city-zoom-far .iso-name { font-size: var(--fs-3xs); } #city-hub.city-zoom-far .iso-name .lv, #city-hub.hide-levels .iso-name .lv { display: none; } #city-hub.hide-names .iso-name .nm { display: none; } #city-hub.hide-names .iso-name { padding: 1px 2px; } #city-hub.hide-names.hide-levels .iso-name, #city-hub.hide-names.city-zoom-far .iso-name { display: none !important; } /* בחירה, חלון כלים וגרירה במצב עריכה */ html body .city-hub-grid.iso .city-tile.iso-sel:not(.iso-decor) .tile-visual img.tile-icon { filter: drop-shadow(0 0 3px var(--text-accent)) drop-shadow(0 0 6px var(--text-accent)); } html body .city-hub-grid.iso .city-tile.iso-dragging { opacity: .85; } html body .city-hub-grid.iso .city-tile.iso-dragging .tile-visual img.tile-icon { filter: drop-shadow(0 10px 6px var(--shadow-color)); } html body .city-hub-grid.iso .city-tile.iso-drag-bad .tile-visual img.tile-icon { filter: drop-shadow(0 0 4px var(--status-negative)) drop-shadow(0 0 8px var(--status-negative)); } #city-sel-pop { position: fixed; z-index: 9700; min-width: 220px; display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-panel); border: 1px solid var(--line-accent); box-shadow: var(--shadow-float); } #city-sel-pop[hidden] { display: none; } #city-sel-pop .sp-head { display: flex; align-items: center; gap: var(--sp-2); } #city-sel-pop .sp-head b { flex: 1; font-size: var(--fs-sm); color: var(--text-accent); } #city-sel-pop .sp-head small { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } #city-sel-pop .sp-x { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } #city-sel-pop .sp-x .ui-ico { width: 12px; height: 12px; } #city-sel-pop .sp-tools { display: flex; flex-wrap: wrap; gap: var(--sp-1); } #city-sel-pop .sp-tools button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: var(--sp-1) var(--sp-2); background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-strong); font-size: var(--fs-2xs); cursor: pointer; } #city-sel-pop .sp-tools button:hover:not([disabled]) { border-color: var(--line-accent); } #city-sel-pop .sp-tools button[disabled] { opacity: .4; cursor: default; } #city-sel-pop .sp-tools .ui-ico { width: 18px; height: 18px; } #city-sel-pop .sp-hint { font-size: var(--fs-2xs); color: var(--text-muted); } /* [2026-10-08] תוצאת משחקון קיצור (playBuildMinigame) */ #minigame-body .mg-result { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; padding: var(--sp-4); border: 1px solid var(--line); } #minigame-body .mg-result b { font-family: var(--font-display); font-size: var(--fs-lg); } #minigame-body .mg-result.ok b { color: var(--status-positive); } #minigame-body .mg-result.err b { color: var(--status-negative); } #minigame-body .mg-result span { font-size: var(--fs-sm); color: var(--text-muted); } /* [2026-10-08] חלון המבנה — תצוגה מסתובבת ב-16 זוויות (wireBldRot) */ .bm-rot { position: relative; height: 220px; margin-bottom: var(--sp-2); background: radial-gradient(ellipse at 50% 70%, var(--surface-panel), transparent 70%); border-bottom: 1px solid var(--line); } .bm-rot[hidden] { display: none; } .bm-rot-view { position: absolute; inset: 0; margin: auto; width: 220px; height: 220px; background-size: 400% 400%; background-repeat: no-repeat; cursor: grab; touch-action: none; } .bm-rot-view:active { cursor: grabbing; } .bm-rot-btn { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: var(--sp-2); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-strong); cursor: pointer; } .bm-rot-btn.bm-rot-next { inset-inline-end: auto; inset-inline-start: var(--sp-2); } .bm-rot-btn .ui-ico { width: 16px; height: 16px; } .bm-rot-hint { position: absolute; bottom: var(--sp-1); inset-inline: 0; text-align: center; font-size: var(--fs-2xs); color: var(--text-muted); pointer-events: none; } /* [2026-10-08] שוק פריטי התיק — לשוניות ופעולות */ #bag-pop .bag-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); } #bag-pop .bag-tabs button { padding: var(--sp-1) var(--sp-3); background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer; } #bag-pop .bag-tabs button.on { color: var(--text-accent); border-color: var(--line); background: var(--surface-sunken); } #bag-pop .bag-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; } #bag-pop .bag-sub { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-accent); border-top: 1px solid var(--line); padding-top: var(--sp-2); } /* [2026-10-08] כפתורי סיבוב העיר בשורת "שמות / רמות / התיק" */ .city-label-toggles button[data-rot] { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-1) var(--sp-2); } .city-label-toggles button[data-rot] .ui-ico { width: 14px; height: 14px; }