/* * Dashboard focus layer * Kept separate from main.css so the existing screen system remains intact. * This changes presentation only; screens, IDs, gates and event handlers stay. */ #screen-dashboard .side-nav { display: none; } #screen-dashboard .dash-body { max-width: 560px; display: block; } #screen-dashboard .dash-scroll { width: 100%; max-width: none; gap: 10px; padding-bottom: 4px; } #screen-dashboard .topbar { max-width: 560px; gap: 6px; } #screen-dashboard .topbar .currency-chip:first-of-type { display: none; } #screen-dashboard .topbar .currency-chip.imu-chip { margin-left: auto; padding: 4px 10px 4px 6px; font-size: 13px; } #screen-dashboard .topbar .currency-chip.imu-chip .coin { width: 25px; height: 25px; } /* Hero remains the first visual anchor. */ #screen-dashboard .banner-carousel { height: clamp(230px, 38vh, 330px); } #screen-dashboard .quick-row { grid-template-columns: repeat(4, 1fr); gap: 8px; } #screen-dashboard .quick-tile { min-height: 62px; padding: 10px 4px 8px; border: 1px solid rgba(47, 156, 143, .12); } #screen-dashboard .quick-tile img { width: 30px; height: 30px; } #screen-dashboard .qt-label { font-size: 10px; } /* The campaign card remains a meaningful chapter entry, while the actual one-tap Play action stays in the dock and gets the strongest emphasis. */ #screen-dashboard .play-row { display: block; } #screen-dashboard .campaign-card { min-height: 178px; padding: 13px 16px 16px; } #screen-dashboard .campaign-card .cc-organ { width: 54px; height: 54px; } #screen-dashboard .mode-stack { display: none; } /* Daily and missions become compact status surfaces, not competing cards. */ #screen-dashboard .daily-card { min-height: 0; padding: 9px 12px; display: flex; align-items: center; gap: 10px; } #screen-dashboard .daily-card .daily-info { flex: 1; min-width: 0; } #screen-dashboard .daily-card .claim-line { font-size: 10px; } #screen-dashboard .daily-card .btn { min-height: 34px; padding: 7px 12px; font-size: 11px; } #screen-dashboard .missions-card { padding: 12px; } #screen-dashboard .missions-card .card-title { margin-bottom: 7px; font-size: 13px; } #screen-dashboard .missions-card .mission-list { gap: 7px; } #screen-dashboard .missions-card .mission-item { gap: 3px; } /* Keep the existing lower progression surfaces available when scrolling, but reduce their visual weight versus hero and Play. */ #screen-dashboard #dash-stats { opacity: .8; } #screen-dashboard #duo-lb { opacity: .82; } #screen-dashboard .dock { max-width: 560px; grid-template-columns: repeat(5, 1fr); padding-top: 7px; } #screen-dashboard .dock-btn .dock-ico { width: 48px; height: 48px; border-radius: 16px; } #screen-dashboard .dock-btn .dock-ico img { width: 26px; height: 26px; } #screen-dashboard .dock-btn span { font-size: 11px; } #screen-dashboard .dock-btn.primary .dock-ico { width: 66px; height: 66px; border-radius: 22px; background: linear-gradient(180deg, var(--coral), var(--coral-deep)); box-shadow: 0 10px 24px rgba(233, 106, 76, .42), inset 0 2px 0 rgba(255,255,255,.3); } #screen-dashboard .dock-btn.primary span { color: var(--coral-deep); font-size: 14px; } @media (min-width: 700px) { #screen-dashboard .banner-carousel { height: 330px; } } /* Sekunder: ikon kecil di bawah, tetap discoverable tanpa menjadi sidebar baru. */ #screen-dashboard .secondary-dock { width: 100%; max-width: 560px; display: flex; justify-content: center; gap: clamp(14px, 5vw, 28px); padding: 2px 8px calc(2px + env(safe-area-inset-bottom)); opacity: .72; } #screen-dashboard .secondary-dock button { appearance: none; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; padding: 2px; font: 800 9px var(--font); } #screen-dashboard .secondary-dock img { width: 19px; height: 19px; object-fit: contain; opacity: .8; } #screen-dashboard .secondary-dock button:active { transform: scale(.92); } #screen-dashboard .secondary-dock button:focus-visible { outline: 2px solid var(--teal); border-radius: 8px; } /* --------------------------------------------------------------- Meta screens: same lightweight visual language, existing logic intact. Each screen keeps its own CTA and back route; only density changes. --------------------------------------------------------------- */ #screen-roster, #screen-upgrade, #screen-shop, #screen-herodetail, #screen-campaign, #screen-prep, #screen-bag, #screen-codex, #screen-bp { padding-left: 12px; padding-right: 12px; } #screen-roster .screen-subtitle { max-width: 420px; margin-bottom: 8px; } #screen-roster .roster-grid { max-width: 620px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 10px 78px; } /* ruang untuk footer MULAI sticky (BUILD 44) */ #screen-roster .hero-card { padding: 8px 4px; background: rgba(255,253,244,.5); } #screen-roster .avatar-wrap { width: min(31vw, 120px); } #screen-roster .hero-name { font-size: 12px; } #screen-roster .hero-pattern, #screen-roster .lock-cond, #screen-roster .lock-buy-note { font-size: 9px; } #screen-roster .screen-footer { position: sticky; bottom: 0; padding: 8px 0 calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(transparent,var(--cream) 30%); z-index: 2; pointer-events: none; } #screen-roster .screen-footer .btn { pointer-events: auto; } #screen-roster .screen-footer .btn { min-height: 52px; } #screen-upgrade .topbar, #screen-shop .topbar { max-width: 420px; margin-bottom: 7px !important; } #screen-upgrade .upg-tabs { position: sticky; top: 0; z-index: 3; width: min(100%,560px); padding: 4px; background: rgba(253,246,227,.92); backdrop-filter: blur(7px); } #screen-upgrade .upg-tab { min-height: 38px; font-size: 10px; padding: 8px 5px; } #screen-upgrade .upg-banner { margin: 4px 0 8px; } #screen-upgrade .upgrade-list { gap: 8px; } #screen-upgrade .upg-row { padding: 11px 12px; border-radius: 18px; gap: 7px; } #screen-upgrade .upg-info b { font-size: 13px; } #screen-upgrade .upg-info .upg-desc { font-size: 10px; } #screen-upgrade .upg-slider { height: 20px; } #screen-upgrade .btn-buy { min-height: 38px; padding: 8px 14px; font-size: 12px; } #screen-shop .shop-sections { max-width: 620px; gap: 11px; } #screen-shop .shop-section { padding: 10px; border-radius: 20px; background: rgba(255,253,244,.45); } #screen-shop .shop-section h3 { margin-bottom: 0; font-size: 12px; } #screen-shop .shop-grid { gap: 8px; } #screen-shop .shop-card { padding: 9px 7px 9px; gap: 4px; border-radius: 17px; } #screen-shop .shop-sprite { width: 48px; height: 48px; } #screen-shop .shop-card b { font-size: 10.5px; } #screen-shop .shop-card .s-desc { font-size: 9px; } #screen-shop .shop-card .btn { min-height: 33px; font-size: 10px; } #screen-herodetail .hero-detail-body { width: min(100%,560px); margin: 0 auto; padding: 4px 6px 20px; gap: 9px; } #screen-herodetail .hero-detail-body > * { border-radius: 20px; } #screen-prep .prep-scroll { width: min(100%,760px); gap: 10px; } #screen-prep .prep-main { gap: 0; } #screen-prep .prep-step { margin: 7px 0 4px; font-size: 11px; } #screen-prep .prep-hint { font-size: 9px; } #screen-prep .prep-hero-row { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; } #screen-prep .prep-hero { min-height: 104px; padding: 6px 3px; gap: 3px; } #screen-prep .prep-hero .ph-sprite { width: 62%; } #screen-prep .prep-hero .ph-name { font-size: 9px; } #screen-prep .prep-chip-row { gap: 6px; } #screen-prep .prep-chip { min-height: 42px; padding: 6px 9px; font-size: 10px; } #screen-prep .prep-aside { padding: 11px; border-radius: 22px; } #screen-prep .prep-summary .ps-hero { width: 82px; height: 82px; } #screen-prep .prep-summary .ps-mid b { font-size: 16px; } #screen-prep .prep-start { min-height: 54px; font-size: 17px; } #screen-bag .bag-scroll, #screen-codex .codex-body, #screen-bp .bp-body { width: min(100%,620px); margin: 0 auto; } #screen-bag .bag-grid { gap: 7px; } #screen-bag .bag-card { padding: 9px 5px; border-radius: 16px; } #screen-bag .bag-card .bag-sprite { width: 38px; height: 38px; } #screen-bag .bag-section-title { margin-top: 7px; font-size: 11px; } #screen-bp .bp-body { padding-bottom: 20px; } #screen-bp .bp-head { padding: 10px; border-radius: 20px; } @media (min-width: 600px) { #screen-roster .roster-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } #screen-prep .prep-scroll { grid-template-columns: minmax(0,1.35fr) minmax(260px,.85fr); } #screen-prep .prep-aside { position: sticky; top: 0; } } /* Compact topbar: profile is the only account entry; no settings/scope/sound clutter. */ #screen-dashboard .account-chip { cursor: pointer; } #screen-dashboard .dash-points { display:inline-flex; align-items:center; gap:5px; background:var(--card); border-radius:999px; padding:4px 10px 4px 6px; font-weight:900; font-size:13px; box-shadow:var(--shadow-card); } #screen-dashboard .dash-points .coin { width:25px; height:25px; object-fit:contain; } #screen-dashboard .topbar .lang-pill { font-size:10px; padding:4px 8px; } /* Full-bleed page canvas on landscape; content remains readable inside cards. */ @media (orientation: landscape) { #screen-dashboard, #screen-roster, #screen-upgrade, #screen-shop, #screen-herodetail, #screen-campaign, #screen-prep, #screen-bag, #screen-codex, #screen-bp, #screen-profile { padding-left:0; padding-right:0; } #screen-dashboard .topbar, #screen-dashboard .dock, #screen-dashboard .secondary-dock { padding-left:18px; padding-right:18px; max-width:none; } #screen-roster .screen-header, #screen-roster .screen-subtitle, #screen-upgrade .screen-header, #screen-shop .screen-header, #screen-herodetail .topbar, #screen-campaign .topbar, #screen-prep .topbar, #screen-bag .topbar, #screen-codex .topbar, #screen-bp .topbar, #screen-profile .screen-header, .ui-head, #screen-shop .shop-nav { max-width:none; padding-left:18px; padding-right:18px; } .ui-head { max-width: 1180px; width: calc(100% - 36px); padding-left: 0; padding-right: 0; } #screen-shop .shop-nav { max-width: 1180px; width: calc(100% - 36px); padding-left: 2px; padding-right: 2px; } #screen-roster .roster-grid, #screen-upgrade .upgrade-list, #screen-shop .shop-sections, #screen-campaign .campaign-scroll, #screen-prep .prep-scroll, #screen-bag .bag-scroll, #screen-codex .codex-body, #screen-bp .bp-body, #screen-profile .profile-card, #screen-herodetail .hero-detail-body { max-width:1180px; width:calc(100% - 36px); } } /* Profile is a focused account surface, not another dashboard widget. */ #screen-profile { justify-content:flex-start; } #screen-profile .profile-card { width:min(100%,420px); margin:8px auto 20px; padding:22px; display:flex; flex-direction:column; align-items:center; gap:9px; } #screen-profile .profile-avatar { width:86px; height:86px; object-fit:cover; border-radius:50%; border:3px solid var(--teal); background:var(--mint); } #screen-profile .profile-card h3 { font-size:21px; } #screen-profile .profile-title { font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); background:var(--mint-2); border-radius:999px; padding:3px 10px; margin-top:-4px; } #screen-profile .profile-balances { display:flex; gap:10px; width:100%; margin:8px 0; } #screen-profile .profile-balances span { flex:1; display:grid; grid-template-columns:24px 1fr; align-items:center; column-gap:5px; padding:8px; background:var(--cream-2); border-radius:13px; } #screen-profile .profile-balances img { width:23px; height:23px; grid-row:span 2; } #screen-profile .profile-balances b { font-size:13px; } #screen-profile .profile-balances small, #screen-profile .profile-stats small { font-size:9px; color:var(--ink-soft); font-weight:800; } #screen-profile .profile-stats { display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:7px; margin-bottom:8px; } #screen-profile .profile-stats span { text-align:center; padding:8px 3px; background:var(--mint-2); border-radius:12px; } #screen-profile .profile-stats b, #screen-profile .profile-stats small { display:block; } #screen-profile #btn-profile-logout { width:100%; min-height:45px; font-size:13px; } /* New-player state: locked destinations stay in code and unlock progressively, but do not occupy dashboard space before they are useful. */ #screen-dashboard .quick-tile.gated, #screen-dashboard .dock-btn.gated:not(.primary), #screen-dashboard .secondary-dock button.gated { display:none; } #screen-dashboard .quick-row:has(.quick-tile:not(.gated)) { min-height:0; } /* Primary loop action: independent from utility navigation. */ #screen-dashboard .dashboard-play { width: min(92vw, 360px); min-height: 76px; margin: 8px auto 4px; border: 0; border-radius: 26px; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 9px 24px; color: #fff; font-family: var(--font); background: linear-gradient(135deg, var(--coral), var(--coral-deep)); box-shadow: 0 12px 0 rgba(182, 76, 52, .22), 0 16px 28px rgba(233,106,76,.34), inset 0 2px 0 rgba(255,255,255,.3); transition: transform .12s ease, filter .15s ease; } #screen-dashboard .dashboard-play:hover { filter: brightness(1.04); } #screen-dashboard .dashboard-play:active { transform: translateY(4px) scale(.98); box-shadow: 0 7px 0 rgba(182,76,52,.2), 0 10px 18px rgba(233,106,76,.28); } #screen-dashboard .dashboard-play:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; } #screen-dashboard .dashboard-play-icon { width: 52px; height: 52px; border-radius: 18px; display:grid; place-items:center; background:rgba(255,255,255,.2); } #screen-dashboard .dashboard-play-icon img { width: 32px; height:32px; } #screen-dashboard .dashboard-play-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; } #screen-dashboard .dashboard-play-copy b { font-size: 26px; line-height:1; letter-spacing:.08em; } #screen-dashboard .dashboard-play-copy small { font-size: 10px; font-weight:800; opacity:.88; } #screen-dashboard .dock { margin-top: 4px; } #screen-dashboard .dock-btn .dock-ico { width: 40px; height: 40px; border-radius: 13px; } #screen-dashboard .dock-btn .dock-ico img { width: 22px; height:22px; } #screen-dashboard .dock-btn span { font-size: 9px; } #screen-dashboard .secondary-dock { margin-top: 0; } @media (orientation: landscape) { #screen-dashboard .dashboard-play { margin: 5px auto 2px; min-height: 62px; width: min(42vw, 330px); } #screen-dashboard .dashboard-play-icon { width:42px; height:42px; border-radius:14px; } #screen-dashboard .dashboard-play-copy b { font-size:21px; } #screen-dashboard .dock { padding-top: 3px; } } /* Gameplay focus: keep only survival-critical HUD. The arena owns the screen. */ #screen-hud .hud-minimap { display:none; } #screen-hud .hud-buffs { max-width:72vw; margin:0 auto; overflow:hidden; } #screen-hud .hud-mission { max-width:220px; opacity:.9; } #screen-hud .hud-gate { font-size:11px; padding:5px 10px; } #screen-hud .hud-hint { max-width:80vw; } @media (orientation: landscape) { #screen-hud { padding:0; } #screen-hud .hud-top { left:12px; right:12px; max-width:none; } #screen-hud .hud-center { min-width:112px; padding:4px 10px; } #screen-hud .hud-stat-left, #screen-hud .hud-stat-right { padding:4px 7px; gap:5px; } #screen-hud .hud-hero-status { left:12px; bottom:10px; transform:scale(.9); transform-origin:bottom left; } #screen-hud .hud-controls { right:12px; bottom:10px; transform:scale(.86); transform-origin:bottom right; } #screen-hud .hud-mission { top:58px; left:50%; transform:translateX(-50%); } } /* Active daily/weekly quests: explicit accept → play → claim loop. */ #screen-dashboard .active-quests { margin-top:10px; padding-top:8px; border-top:1px solid rgba(47,156,143,.16); display:flex; flex-direction:column; gap:7px; } #screen-dashboard .quest-heading { font-size:11px; color:var(--teal-deep); } #screen-dashboard .quest-row { position:relative; display:grid; grid-template-columns:1fr auto; gap:2px 7px; align-items:center; padding:6px 7px; border-radius:11px; background:rgba(234,244,221,.6); } #screen-dashboard .quest-title { display:flex; align-items:center; gap:5px; min-width:0; } #screen-dashboard .quest-title b { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #screen-dashboard .quest-kind { font-size:7px; font-weight:900; color:#fff; background:var(--teal); border-radius:5px; padding:2px 4px; } #screen-dashboard .quest-desc { grid-column:1; color:var(--ink-soft); font-size:9px; } #screen-dashboard .quest-track { grid-column:1; height:4px; border-radius:4px; background:#d8ddc8; overflow:hidden; } #screen-dashboard .quest-track i { display:block; height:100%; border-radius:inherit; background:var(--coral); } #screen-dashboard .quest-action { grid-column:2; grid-row:1 / span 3; min-height:28px; padding:5px 8px; font-size:9px; } #screen-dashboard .quest-action:disabled { opacity:.58; } /* Compact HUD: gameplay canvas is primary; HUD is an unobtrusive safety rail. RONDE-6 REVISI: chip info ATAS DIPERBESAR (request pemain: antibodi/imun coin/wave/kill/profil terlalu kecil) — target baca naik ~35-45%. */ #screen-hud .hud-top { top:5px; left:6px; right:6px; gap:6px; } #screen-hud .hud-stat-left, #screen-hud .hud-stat-right { padding:4px 7px; gap:6px; border-radius:12px; } #screen-hud .hud-center { min-width:110px; padding:5px 12px; gap:5px; border-radius:13px; } #screen-hud .hud-center .wave-pill { font-size:14px; } #screen-hud .hud-center .timer-chip { font-size:12px; gap:5px; } #screen-hud .hud-center .timer-chip img { width:14px; height:14px; } #screen-hud .hud-kills, #screen-hud .hud-currency-run { font-size:14px; gap:6px; padding:6px 9px; border-radius:11px; } #screen-hud .hud-kills img, #screen-hud .hud-currency-run img { width:17px; height:17px; } /* RONDE-6: chip Imun Coin di HUD TAMPIL (pemain ingin memantau currency premiumnya in-run) — sama besar dengan antibodi */ #screen-hud .hud-imu-run { display:flex; } #screen-hud .hud-stat-left .hud-lvls { display:none; } #screen-hud .btn-pause { width:30px; height:30px; min-height:30px; border-radius:9px; padding:5px; } #screen-hud .btn-pause img { width:17px; height:17px; } #screen-hud .hud-hero-status { left:6px; bottom:6px; padding:4px 8px 4px 4px; gap:5px; border-radius:10px; } #screen-hud .hud-portrait, #screen-hud .hud-hero-status .avatar-wrap { width:38px; height:38px; } #screen-hud .hud-portrait { border-width:2px; } #screen-hud .level-badge { font-size:7px; padding:1px 4px; bottom:-3px; right:-6px; } #screen-hud .status-bars { width:112px; gap:3px; } #screen-hud .hp-row { gap:3px; } #screen-hud .hp-row .heart { width:10px; height:10px; } #screen-hud .hud-hp-track { height:8px; } #screen-hud .hud-hp-text { font-size:8px; min-width:32px; } #screen-hud .xp-row { gap:3px; } #screen-hud .hud-xp-track { height:4px; } #screen-hud .hud-xp-ico { width:9px; height:9px; } #screen-hud .hud-controls { right:6px; bottom:6px; gap:5px; } #screen-hud .pulse-btn { width:58px; height:58px; min-height:58px; border-width:2px; font-size:8px; border-radius:50%; } #screen-hud .pulse-btn img { width:20px; height:20px; } #screen-hud .hud-mission { top:45px; width:180px; padding:4px 7px; border-radius:9px; } #screen-hud .hud-mission-text { font-size:8px; } #screen-hud .hud-mission-bar { height:4px; margin-top:2px; } #screen-hud .hud-gate { font-size:8px; padding:3px 7px; } #screen-hud .hud-buffs { top:43px; gap:3px; } #screen-hud .hud-buff-chip { font-size:8px; padding:1px 5px 1px 2px; border-width:1px; } #screen-hud .hud-buff-chip img { width:13px; height:13px; } @media (orientation: landscape) { #screen-hud .hud-top { top:4px; } #screen-hud .hud-hero-status { transform:none; } #screen-hud .hud-controls { transform:none; } } /* Gameover CTA must never disappear below a tall victory summary on phones. */ @media (max-height: 760px) { #screen-gameover .go-card { width:min(94vw,500px); max-height:calc(100dvh - 8px); padding:10px 14px 8px; gap:5px; } #screen-gameover .go-stars { display:none; } #screen-gameover .gameover-title { font-size:20px; } #screen-gameover .gameover-sub { font-size:10px; } #screen-gameover .go-rankup { margin:0 auto 2px; padding:6px 12px; gap:8px; } #screen-gameover .go-rankup .rank-emblem.big { width:38px; height:38px; font-size:15px; } #screen-gameover .go-rankup-text b { font-size:12px; } #screen-gameover .go-rankup-text span { font-size:9px; } #screen-gameover #gameover-summary { max-height:17vh; overflow-y:auto; } #screen-gameover .summary-cell { padding:5px 3px; } #screen-gameover .summary-cell b { font-size:14px; } #screen-gameover .summary-cell span { font-size:8px; } #screen-gameover .summary-reward { font-size:11px; gap:5px; } #screen-gameover .summary-reward strong { font-size:18px; } #screen-gameover .go-chest { width:25px; } #screen-gameover #btn-double-currency { min-height:36px; padding:6px 10px; font-size:11px; } #screen-gameover .btn-row { position:sticky; bottom:-8px; padding:6px 0 2px; background:var(--cream); z-index:2; } #screen-gameover .btn-row .btn { min-height:42px; padding:8px 9px; font-size:12px; } } /* Gameplay HUD refinement: arena first, compact utility controls. */ #screen-hud .hud-center { min-width:72px; padding:2px 6px; background:rgba(255,253,244,.72); box-shadow:0 2px 5px rgba(31,95,87,.1); } #screen-hud .hud-center .wave-pill { font-size:8px; letter-spacing:.04em; padding:1px 3px; } #screen-hud .hud-center .timer-chip { font-size:8px; } #screen-hud .hud-center .timer-chip img { width:9px; height:9px; } #screen-hud .hud-hero-status { background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:2px; } #screen-hud .hud-hero-status .status-bars { background:rgba(255,253,244,.64); border-radius:7px; padding:3px 5px; } #screen-hud .hud-menu-toggle { position:absolute; top:7px; right:6px; z-index:8; width:30px; height:30px; border:0; border-radius:9px; background:rgba(255,253,244,.82); color:var(--teal-dark); font:900 18px/1 var(--font); box-shadow:0 2px 6px rgba(0,0,0,.16); pointer-events:auto; } #screen-hud .hud-game-menu { position:absolute; top:42px; right:6px; z-index:9; width:138px; padding:5px; border-radius:12px; background:rgba(255,253,244,.96); box-shadow:0 8px 22px rgba(0,0,0,.22); display:flex; flex-direction:column; gap:3px; pointer-events:auto; } #screen-hud .hud-game-menu.hidden { display:none; } #screen-hud .hud-menu-link { border:0; border-radius:8px; background:transparent; padding:7px; display:flex; align-items:center; gap:7px; color:var(--ink); font:900 10px var(--font); text-align:left; } #screen-hud .hud-menu-link:active { background:var(--mint-2); } #screen-hud .hud-menu-link img { width:16px; height:16px; } #screen-dashboard .dock { grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); justify-content:center; max-width:340px; margin-left:auto; margin-right:auto; } #screen-dashboard .dock-btn { min-width:0; } #screen-dashboard .secondary-dock { display:none; } @media (orientation:landscape) { #screen-hud .hud-center { min-width:82px; } #screen-hud .hud-menu-toggle { top:5px; right:6px; } } /* --------------------------------------------------------------- F24 — HOME LAUNCHER SINEMATIK — DIPENSIUNKAN Sprint 5.26. Bible §11.1 butuh dashboard kaya konten (hero tetap + bar Mitosis + kapsul + kartu), bukan launcher 1 tombol. Aturan sembunyi-F24 di bawah dimatikan; cine-banner tetap jalan di dalam .hero-fixed. --------------------------------------------------------------- */ /* F24-off: #screen-dashboard .dash-scroll > :not(#dash-banner) { display: none; } F24-off: #screen-dashboard .secondary-dock { display: none; } F24-off: banner-carousel fullscreen + .hero-stage 100% + .stage-cine inset-0 F24-off: .stage-badge/.stage-info/.stage-enemies/.deco { display: none; } F24-off: .topbar transparan + .dashboard-play fixed melayang */ /* --------------------------------------------------------------- F25 — DUA MENU GAMEPLAY + QUEST PANEL + HAPUS WAVE/TIMER ATAS Menu 1 (☰ kiri-atas, turun ke bawah): Campaign/Rank/Bio-Pedia/BP. Menu 2 (kanan-bawah, melebar ke kiri): Heroes/Collection/Shop/Battle/Squad. Semua item tersembunyi sampai unlock; badge angka saat ada unlock baru. --------------------------------------------------------------- */ #screen-hud .hud-center { display: none; } /* wave/timer makan porsi — info wave cukup via announce */ #screen-hud .menu-badge { position: absolute; top: -5px; right: -5px; z-index: 4; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #e86a4c; color: #fff; font: 900 9px/15px var(--font); text-align: center; box-shadow: 0 2px 5px rgba(42, 31, 20, 0.3); } #screen-hud .hud-menu-toggle { overflow: visible; } #screen-hud .hud-menu2-toggle { position: absolute; right: 12px; bottom: 96px; z-index: 8; pointer-events: auto; /* #screen-hud passive — tombol harus opt-in */ width: 44px; height: 44px; border: 0; border-radius: 14px; background: rgba(255, 253, 244, 0.92); cursor: pointer; box-shadow: 0 3px 10px rgba(31, 95, 87, 0.22); display: grid; place-items: center; overflow: visible; } #screen-hud .hud-menu2-toggle img { width: 22px; height: 22px; object-fit: contain; } #screen-hud .hud-menu2-toggle:active { transform: scale(0.93); } #screen-hud .hud-game-menu2 { position: absolute; right: 12px; bottom: 148px; z-index: 9; pointer-events: auto; display: flex; flex-direction: row-reverse; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255, 253, 244, 0.97); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } #screen-hud .hud-game-menu2.hidden { display: none; } #screen-hud .hud-menu2-link { border: 0; border-radius: 12px; background: var(--mint-2); cursor: pointer; width: 54px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; } #screen-hud .hud-menu2-link:active { transform: scale(0.93); } #screen-hud .hud-menu2-link img { width: 20px; height: 20px; object-fit: contain; } #screen-hud .hud-menu2-link span { font: 900 7.5px var(--font); color: var(--ink); } /* Panel quest kiri-tengah (misi harian/mingguan, klaim manual, badge kecil) */ #screen-hud .hud-quests { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 7; width: 168px; max-width: 44vw; pointer-events: auto; } #screen-hud .hud-quests-head { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 6px 10px; cursor: pointer; background: rgba(255, 253, 244, 0.88); box-shadow: 0 2px 8px rgba(31, 95, 87, 0.16); font: 900 10px var(--font); color: var(--ink); } #screen-hud .hud-quests-head img { width: 14px; height: 14px; } #screen-hud .hud-quests-head .menu-badge { top: -6px; right: -8px; } #screen-hud .hud-quests-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; background: rgba(255, 253, 244, 0.92); box-shadow: 0 4px 14px rgba(31, 95, 87, 0.16); } #screen-hud .hud-quests-body.hidden { display: none; } #screen-hud .hq-row { display: flex; align-items: center; gap: 6px; } #screen-hud .hq-row .hq-top { flex: 1; min-width: 0; } #screen-hud .hq-row .hq-top b { display: block; font: 900 8.5px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #screen-hud .hq-row .hq-top span { font: 800 7.5px var(--font); color: var(--ink-soft); } #screen-hud .hq-row .hq-bar { height: 3px; border-radius: 2px; background: rgba(47, 156, 143, 0.18); margin-top: 2px; overflow: hidden; } #screen-hud .hq-row .hq-bar i { display: block; height: 100%; background: var(--teal); } #screen-hud .hq-act { border: 0; border-radius: 8px; min-width: 44px; min-height: 26px; padding: 3px 7px; background: rgba(47, 156, 143, 0.14); color: var(--ink-soft); font: 900 8px var(--font); cursor: pointer; } #screen-hud .hq-act.claim { background: #f5c64f; color: #4a2f10; box-shadow: 0 2px 6px rgba(232, 166, 20, 0.4); } #screen-hud .hq-act:disabled { opacity: 0.55; cursor: default; } @media (max-width: 390px) { #screen-hud .hud-menu2-toggle { right: 7px; bottom: 84px; width: 40px; height: 40px; } #screen-hud .hud-game-menu2 { right: 7px; bottom: 132px; } #screen-hud .hud-quests { left: 7px; width: 150px; } } /* --------------------------------------------------------------- F25b — 5 POLISH TERAKHIR SEBELUM F26 (arah pemilik) 1) XP progres → kanan-atas (konvensi UI game) 2) Ikon menu = karakter game (virus / hero), bukan garis-3/profil 3) PULSE lebih besar, ikon tepat, semuanya bulat ber-bordir 4) Menu kanan-bawah geser ke tengah — bebas dari PULSE & skill 5) Kartu notif diperkecil — gameplay dominan --------------------------------------------------------------- */ /* 1) XP kanan-atas */ #screen-hud .status-bars .xp-row { display: none; } /* sisa markup lama (jika ada) */ #screen-hud .hud-xp-top { position: absolute; top: 46px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 253, 244, 0.78); box-shadow: 0 2px 6px rgba(31, 95, 87, 0.12); } #screen-hud .hud-xp-top .hud-xp-ico { width: 13px; height: 13px; } #screen-hud .hud-xp-top .hud-xp-track { width: 116px; height: 6px; border-radius: 3px; background: rgba(47, 156, 143, 0.22); overflow: hidden; position: relative; } #screen-hud .hud-xp-top .hud-xp-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8fe8d2, #f5c64f); } #screen-hud .hud-xp-top .hud-xp-ghost { height: 100%; border-radius: 3px; background: rgba(255, 255, 255, 0.85); } #screen-hud .hud-minimap { top: 80px; } #screen-hud .hud-buffs { top: 80px; } /* 2) Ikon menu = karakter game; tombol bulat ber-bordir */ #screen-hud .hud-menu-toggle img { width: 24px; height: 24px; object-fit: contain; } #screen-hud .hud-menu-toggle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.92); display: grid; place-items: center; background: rgba(255, 253, 244, 0.92); } #screen-hud .hud-menu2-toggle { right: 168px; bottom: 104px; /* 4) geser ke tengah — bebas dari PULSE/skill */ width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.95); background: radial-gradient(circle at 34% 30%, #fffdf4, #e8f4ea); } #screen-hud .hud-menu2-toggle img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; } #screen-hud .hud-game-menu2 { right: 168px; bottom: 158px; } #screen-hud .hud-menu2-link { border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); width: 56px; height: 56px; } #screen-hud .menu-badge { border: 1.5px solid #fff; } /* 3) PULSE: lebih besar, bulat ber-bordir (ikon & grid skill → blok BUILD 43 di bawah) */ #screen-hud .pulse-btn { width: 96px; height: 96px; min-height: 96px; border-radius: 50%; border: 4px solid #fff; font-size: 11px; bottom: 14px; box-shadow: 0 6px 0 #c46a4a, 0 12px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.35); } #screen-hud .pulse-btn img { width: 36px; height: 36px; } /* 5) Kartu notif diperkecil — gameplay dominan */ body.in-run .toast { padding: 5px 10px; font-size: 10.5px; max-width: 250px; border-left-width: 4px; border-radius: 10px; } #screen-hud .tut-bubble { max-width: 58%; padding: 8px 13px; font-size: 11.5px; border-width: 2px; } #screen-hud .hud-announce { max-width: 190px; font-size: 10.5px; } @media (max-width: 390px) { #screen-hud .hud-xp-top { top: 40px; right: 7px; } #screen-hud .hud-xp-top .hud-xp-track { width: 96px; } #screen-hud .hud-minimap { top: 72px; right: 7px; } #screen-hud .hud-menu2-toggle { right: 130px; bottom: 92px; width: 42px; height: 42px; } #screen-hud .hud-game-menu2 { right: 130px; bottom: 142px; } #screen-hud .pulse-btn { width: 84px; height: 84px; min-height: 84px; } #screen-hud .pulse-btn img { width: 31px; height: 31px; } } /* ================================================================ E2 poin 1 — PROFIL + HP + XP KE KIRI-ATAS (konvensi MOBA: identitas & vital di atas, aksi di bawah). Ditaruh di file ini karena dimuat terakhir — menang kaskade atas rule lama. ================================================================ */ #screen-hud .hud-hero-status{ top:8px; bottom:auto; left:10px; } #screen-hud .hud-xp-top{ top:56px; left:12px; right:auto; } #screen-hud .hud-xp-top .hud-xp-track{ width:132px; } /* chip kill minggir dari profil; koin/pause tetap kanan (width:auto — rule lama width:100% mendorong sisi kanan keluar layar) */ #screen-hud .hud-top{ left:210px; right:12px; width:auto; max-width:none; } /* minimap & buffs kembali rapat kanan-atas (slot XP lama) */ #screen-hud .hud-minimap{ top:46px; } #screen-hud .hud-buffs{ top:46px; } /* panel misi turun sedikit — beri ruang blok profil kiri-atas */ #screen-hud .hud-quests{ top:56%; } /* ================================================================ E2 poin 2 — MENU HERO (menu2) KE BAWAH: duduk di baris aksi bawah-kanan, di kiri grid skill; membuka ke ATAS. ================================================================ */ #screen-hud .hud-menu2-toggle{ top:auto; bottom:16px; right:258px; } #screen-hud .hud-game-menu2{ top:auto; bottom:72px; right:258px; } @media (max-width:700px){ #screen-hud .hud-hero-status{ top:6px; left:7px; } #screen-hud .hud-xp-top{ top:50px; left:8px; } #screen-hud .hud-top{ left:180px; right:8px; width:auto; } #screen-hud .hud-menu2-toggle{ bottom:12px; right:212px; width:40px; height:40px; } #screen-hud .hud-game-menu2{ bottom:60px; right:212px; } } @media (max-width:390px){ #screen-hud .hud-menu2-toggle{ right:176px; } #screen-hud .hud-game-menu2{ right:176px; } } /* ================================================================ UI/UX — MENU GAMEPLAY: PROGRESSIVE DISCLOSURE + IKON GAME Dashboard = launcher 1 tombol (F24) → semua pintu hidup di HUD. Aturan: item terkunci TIDAK dirender (.gated), toggle hilang bila menu kosong (.gate-hidden); dua menu memakai bahasa visual yang sama: emblem bulat krem ber-bordir putih + ikon set assets/icons/menu-*.svg. Ditaruh di akhir file agar menang kaskade atas rule F25/E2 di atas. ================================================================ */ #screen-hud .hud-menu-link.gated, #screen-hud .hud-menu2-link.gated, #screen-hud .hud-menu-toggle.gate-hidden, #screen-hud .hud-menu2-toggle.gate-hidden, #screen-hud .hud-quests.gate-hidden { display: none !important; } /* Toggle menu = emblem bulat (kedua menu identik ukurannya) */ #screen-hud .hud-menu-toggle, #screen-hud .hud-menu2-toggle { width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2.5px solid rgba(255, 255, 255, 0.95); background: radial-gradient(circle at 34% 30%, #fffdf4, #e8f4ea); box-shadow: 0 3px 0 rgba(31, 95, 87, 0.18), 0 6px 14px rgba(31, 95, 87, 0.22); display: grid; place-items: center; overflow: visible; cursor: pointer; transition: transform .12s ease; } #screen-hud .hud-menu-toggle { top: 8px; right: 10px; } #screen-hud .hud-menu-toggle img, #screen-hud .hud-menu2-toggle img { width: 30px; height: 30px; object-fit: contain; border-radius: 0; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); } #screen-hud .hud-menu-toggle:active, #screen-hud .hud-menu2-toggle:active { transform: scale(0.93); } #screen-hud .hud-menu-toggle[aria-expanded="true"], #screen-hud .hud-menu2-toggle[aria-expanded="true"] { background: radial-gradient(circle at 34% 30%, #fff7dc, #f5c64f); } /* MENU 1 (kanan-atas, turun ke bawah): daftar vertikal dengan emblem + label */ #screen-hud .hud-game-menu { top: 60px; right: 10px; width: auto; min-width: 150px; padding: 6px; gap: 4px; border-radius: 16px; background: rgba(255, 253, 244, 0.97); box-shadow: 0 10px 26px rgba(20, 60, 54, 0.26); } #screen-hud .hud-menu-link { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--mint-2); color: var(--ink); font: 900 11px var(--font); text-align: left; cursor: pointer; } #screen-hud .hud-menu-link img { width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: #fffdf4; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(31, 95, 87, 0.18); } #screen-hud .hud-menu-link:active { background: var(--teal-light); transform: scale(.98); } /* MENU 2 (bawah, membuka ke atas / melebar ke kiri): emblem bulat berlabel di bawah */ #screen-hud .hud-game-menu2 { gap: 8px; padding: 8px 10px; border-radius: 22px; background: rgba(255, 253, 244, 0.97); box-shadow: 0 10px 26px rgba(20, 60, 54, 0.26); } #screen-hud .hud-menu2-link { width: 58px; height: 62px; padding: 3px 2px 2px; border-radius: 16px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; } #screen-hud .hud-menu2-link img { width: 40px; height: 40px; padding: 5px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fffdf4, #eaf4dd); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(31, 95, 87, 0.16), 0 4px 10px rgba(31, 95, 87, 0.18); } #screen-hud .hud-menu2-link span { font: 900 8px var(--font); color: var(--ink); white-space: nowrap; } #screen-hud .hud-menu2-link:active { transform: scale(0.93); } #screen-hud .hud-menu2-link:active img { background: radial-gradient(circle at 34% 30%, #fff7dc, #f5c64f); } /* Badge angka: kontras di atas emblem krem */ #screen-hud .menu-badge { top: -4px; right: -4px; min-width: 17px; height: 17px; font: 900 10px/17px var(--font); border: 2px solid #fff; } /* Panel Misi: emblem kecil di kepala; TIDAK lagi menimpa chip combo (top 150px) dan chip antigen (bottom 86px) — badan misi dibatasi tinggi & bisa digulir */ /* Panel ditambatkan dari ATAS (bukan berpusat) tepat di bawah chip combo (top 118px + 26px), sehingga saat dibuka ia tumbuh ke BAWAH — combo tak tertutup, antigen (bottom 74px) tetap bebas karena badan dibatasi 96px: 152 + 32 kepala + 6 + 96 = 286px < 390 − 74 − 21 = 295px. */ #screen-hud .hud-quests { top: 152px; transform: none; } #screen-hud .hud-quests-head img { width: 20px; height: 20px; } #screen-hud .hud-quests-body { max-height: 96px; overflow-y: auto; } #screen-hud .hud-antigen { bottom: 74px; } @media (min-height: 500px) { #screen-hud .hud-quests { top: 40%; transform: translateY(-50%); } } @media (max-width: 700px) { #screen-hud .hud-menu-toggle, #screen-hud .hud-menu2-toggle { width: 40px; height: 40px; } #screen-hud .hud-menu-toggle img, #screen-hud .hud-menu2-toggle img { width: 26px; height: 26px; } #screen-hud .hud-game-menu { top: 52px; } #screen-hud .hud-menu2-link { width: 52px; height: 58px; } #screen-hud .hud-menu2-link img { width: 36px; height: 36px; } #screen-hud .hud-quests-body { max-height: 84px; } } /* ================================================================ UI/UX BUILD 42 — ARAH & KONTROL (bug "arah tidak berfungsi") Diagnosis runtime (scripts/e2e-controls.mjs): - 42% layar kanan dulunya "aim stick" tak kasatmata → tarik di sana hero diam; - badan panel Misi (168×134 px, pointer-events:auto) menelan tarikan di kiri; - jari tutorial gerak menunjuk ke dalam panel itu; copy tutorial lama "TEMBAK" ≠ tombol baru. Perbaikan: joystick mengambang di mana saja; aim = TAHAN + TARIK tombol PULSE; panel Misi mulai terlipat; jari tutorial menunjuk lantai kosong & tombol PULSE. ================================================================ */ /* Panel Misi terlipat: hanya kepala (pill kecil) yang menerima sentuhan */ #screen-hud .hud-quests.collapsed { width: auto; } #screen-hud .hud-quests { pointer-events: none; } /* pembungkus tembus */ #screen-hud .hud-quests-head, #screen-hud .hud-quests-body { pointer-events: auto; } /* isi tetap bisa disentuh */ #screen-hud .hud-quests-head { touch-action: manipulation; } /* Tombol PULSE: mode TAHAN (held) & mode ARAH (aiming) */ #screen-hud .pulse-btn { touch-action: none; } #screen-hud .pulse-btn.held { transform: scale(0.94); } #screen-hud .pulse-btn .pulse-aim { /* poros: berputar mengikuti --aim */ position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transform: rotate(var(--aim, 0rad)); opacity: 0; transition: opacity .12s ease; } #screen-hud .pulse-btn.aiming .pulse-aim { opacity: 1; } #screen-hud .pulse-btn .pulse-aim::before { /* garis arah dari pusat tombol */ content: ""; position: absolute; left: 0; top: -2px; height: 4px; width: calc(var(--pulse-r, 42px) + 22px); border-radius: 2px; background: linear-gradient(90deg, rgba(255,253,244,0), #fffdf4 40%, #f5c64f); box-shadow: 0 0 8px rgba(245,198,79,.7); } #screen-hud .pulse-btn .pulse-aim::after { /* mata panah di ujung */ content: ""; position: absolute; left: calc(var(--pulse-r, 42px) + 20px); top: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #f5c64f; filter: drop-shadow(0 0 4px rgba(245,198,79,.8)); } #screen-hud .pulse-btn.aiming { box-shadow: 0 0 0 4px rgba(245,198,79,.55), 0 5px 14px rgba(26,140,125,.42); } /* Jari tutorial: langkah GERAK menunjuk lantai kosong tengah-kiri (bukan panel Misi), langkah PULSE menunjuk tombol PULSE di kanan-bawah */ #screen-hud .tut-finger.tut-move { left: 36%; top: 60%; bottom: auto; } #screen-hud .tut-finger.tut-attack { left: auto; right: 46px; top: auto; bottom: 46px; } @media (max-width: 700px) { #screen-hud .tut-finger.tut-attack { right: 30px; bottom: 30px; } } /* Hint kontrol: naik di atas grid skill (dulu bottom 92px menabrak kolom skill kiri di 844×390 & 667×375) dan lebar dibatasi ruang antara panel kiri & grid skill */ #screen-hud .hud-hint { bottom: 122px; max-width: min(74vw, 600px); white-space: normal; text-align: center; line-height: 1.35; } @media (max-width: 700px) { #screen-hud .hud-hint { bottom: 116px; max-width: 70vw; } } /* ================================================================ UI/UX BUILD 43 — IKON SKILL & TOMBOL PULSE DALAM BAHASA VISUAL GAME Pelat tombol skill = HEX SVG (.sk-plate: outline ink → rim warna skill → muka krem + kilau), ikon per-skill dari js/ui/skill-icons.js (33 ikon, gaya assets/icons/menu-*.svg), label 2 baris di BAWAH pelat (tidak lagi terpotong "SIKAP BERTAHA"), PULSE = assets/icons/hud-pulse.svg. Dimuat terakhir → menang kaskade atas rule lama di main.css. ================================================================ */ #screen-hud .hud-controls { right: 16px; bottom: 14px; gap: 10px; align-items: flex-end; } /* --skw = lebar pelat; --lbl = tinggi label (0 di layar pendek/landscape HP: ikon sudah berbicara sendiri + banner nama saat cast; label muncul bila tinggi ≥ 500px) */ #screen-hud .ability-bar { --skw: 52px; --lbl: 0px; grid-template-columns: repeat(2, var(--skw)); gap: 6px 8px; align-items: end; } @media (min-height: 500px) { #screen-hud .ability-bar { --lbl: 13px; } } #screen-hud .ability-btn, #screen-hud .ability-btn.ult { width: var(--skw, 58px); height: calc(var(--skw, 58px) + var(--lbl, 0px)); /* pelat + label */ clip-path: none; border: none; border-radius: 0; background: none; box-shadow: none; filter: none; padding: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: transform .08s ease; } #screen-hud .ability-btn::before { content: none; } #screen-hud .ability-btn:active { transform: translateY(2px) scale(.96); } #screen-hud .ability-btn .sk-plate { position: absolute; left: 0; top: 0; width: var(--skw, 58px); height: var(--skw, 58px); z-index: 0; overflow: visible; filter: drop-shadow(0 3px 0 rgba(18, 63, 58, .3)) drop-shadow(0 6px 10px rgba(18, 63, 58, .18)); } #screen-hud .ability-btn:active .sk-plate { filter: drop-shadow(0 1px 0 rgba(18, 63, 58, .3)); } #screen-hud .ability-btn .sk-plate .pl-glow { fill: var(--sk, #2f9c8f); opacity: 0; transform-origin: 32px 32px; transform: scale(1.12); transition: opacity .2s ease; } #screen-hud .ability-btn .sk-plate .pl-ink { fill: #123f3a; } #screen-hud .ability-btn .sk-plate .pl-rim { fill: color-mix(in srgb, var(--sk, #2f9c8f) 82%, #fffdf4); transform-origin: 32px 32px; transform: scale(.92); } #screen-hud .ability-btn .sk-plate .pl-face { fill: #fffdf4; } #screen-hud .ability-btn .sk-plate .pl-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .75; } #screen-hud .ability-btn .sk-ico, #screen-hud .ability-btn.ult .sk-ico, #screen-hud .ability-btn .sk-glyph, #screen-hud .ability-btn.ult .sk-glyph { position: absolute; left: 0; top: 0; width: var(--skw, 58px); height: var(--skw, 58px); display: flex; align-items: center; justify-content: center; z-index: 2; filter: none; object-fit: unset; } #screen-hud .ability-btn .sk-glyph svg, #screen-hud .ability-btn.ult .sk-glyph svg { width: calc(var(--skw, 58px) * .66); height: calc(var(--skw, 58px) * .66); fill: none; filter: none; } /* Label: di BAWAH pelat (bukan di dalam hex yang menyempit → "SIKAP BERTAHA" terpotong), satu baris lebih lebar dari pelat; hanya tampil bila ada ruang vertikal (--lbl > 0) */ #screen-hud .ability-btn .sk-name, #screen-hud .ability-btn.ult .sk-name { position: absolute; left: -8px; right: -8px; bottom: auto; top: calc(var(--skw, 58px) - 2px); display: none; font-size: 8px; line-height: 1.2; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #fffdf4; text-shadow: 0 1px 0 rgba(18, 63, 58, .85), 0 0 4px rgba(18, 63, 58, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; z-index: 3; text-align: center; } @media (min-height: 500px) { #screen-hud .ability-btn .sk-name, #screen-hud .ability-btn.ult .sk-name { display: block; } } #screen-hud .ability-btn.ult .sk-name { color: #ffe9a8; } /* Cooldown: sweep konik dipotong bentuk hex, angka besar di tengah pelat */ #screen-hud .ability-btn .cd-fill { position: absolute; left: 0; top: 0; width: var(--skw, 58px); height: var(--skw, 58px); inset: auto; z-index: 2; border-radius: 0; clip-path: polygon(50% 8%, 86.5% 29%, 86.5% 71%, 50% 92%, 13.5% 71%, 13.5% 29%); } #screen-hud .ability-btn .cd-num { position: absolute; left: 0; top: 0; width: var(--skw, 58px); height: var(--skw, 58px); inset: auto; font-size: calc(var(--skw, 58px) * .38); color: #fffdf4; text-shadow: 0 1px 0 #123f3a, 0 0 6px rgba(18, 63, 58, .9); } /* PHAGOS D5: label pemicu skill pasif — chip kecil di sudut kiri-atas pelat */ #screen-hud .ability-btn .key-tag { top: 1px; left: 1px; font-size: 7px; line-height: 1; padding: 2px 4px; border-radius: 6px; background: #123f3a; color: #fffdf4; border: 1.5px solid #fffdf4; z-index: 4; } /* Siap dipakai: pelat "bernafas" lewat glow hex (bukan box-shadow persegi) */ #screen-hud .ability-btn.ready { animation: none; box-shadow: none; } #screen-hud .ability-btn.ready .sk-plate .pl-glow { opacity: .55; animation: skPlateGlow 1.6s ease-in-out infinite; } @keyframes skPlateGlow { 0%, 100% { opacity: .25; transform: scale(1.08); } 50% { opacity: .6; transform: scale(1.16); } } /* ULT: pelat emas (rim emas, outline cokelat tua) sedikit lebih besar, rata kanan */ #screen-hud .ability-btn.ult { --skw: 58px; grid-column: span 2; justify-self: end; border-color: transparent; } #screen-hud .ability-btn.ult .sk-plate .pl-rim { fill: #f5c64f; } #screen-hud .ability-btn.ult .sk-plate .pl-ink { fill: #7a4e08; } #screen-hud .ability-btn.ult .sk-plate .pl-glow { fill: #f5c64f; } #screen-hud .ability-btn.ult .sk-plate .pl-face { fill: #fff8e2; } #screen-hud .ability-btn.ult .key-tag { background: #7a4e08; border-color: #ffe9a8; } #screen-hud .ability-btn.ult.ready .sk-plate .pl-glow { opacity: .75; } /* PULSE: ikon antibodi-Y kawaii (assets/icons/hud-pulse.svg) di atas teal — cincin gerigi/sunburst lama dibuang (bersaing dengan ikon); offset absolut lama (right/bottom) dinetralkan: posisi ditentukan flex .hud-controls, tidak lagi menimpa pelat ULT */ #screen-hud .pulse-btn { right: auto; bottom: auto; left: auto; top: auto; margin: 0; } #screen-hud .pulse-btn::before { content: none; } #screen-hud .pulse-btn .pulse-claw { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; width: 44px; height: 44px; margin-top: 4px; } #screen-hud .pulse-btn .pulse-claw img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 0 rgba(18, 63, 58, .35)); } #screen-hud .pulse-btn > span:not(.pulse-claw):not(.pulse-aim) { font-size: 11px; letter-spacing: .06em; text-shadow: 0 1px 0 rgba(18, 63, 58, .45); } @media (max-width: 700px) { #screen-hud .hud-controls { right: 10px; bottom: 10px; gap: 8px; } #screen-hud .ability-bar { --skw: 44px; gap: 4px 6px; } #screen-hud .ability-btn.ult { --skw: 50px; } #screen-hud .ability-btn .sk-name, #screen-hud .ability-btn.ult .sk-name { font-size: 7px; } #screen-hud .pulse-btn .pulse-claw { width: 34px; height: 34px; margin-top: 2px; } #screen-hud .pulse-btn > span:not(.pulse-claw):not(.pulse-aim) { font-size: 9px; } } @media (max-width: 390px) { #screen-hud .hud-controls { right: 8px; bottom: 8px; gap: 6px; } #screen-hud .ability-bar { --skw: 40px; } #screen-hud .ability-btn.ult { --skw: 46px; } #screen-hud .pulse-btn .pulse-claw { width: 30px; height: 30px; } } /* Hint kontrol: tetap di atas grid skill (tinggi grid = 2 pelat + gap [+ label]) */ #screen-hud .hud-hint { bottom: 134px; } @media (max-width: 700px) { #screen-hud .hud-hint { bottom: 118px; } } @media (min-height: 500px) { #screen-hud .hud-hint { bottom: 150px; } } /* Chip skill kecil (Prep, detail hero): pelat hex + ikon yang SAMA dengan HUD */ .sk-chip { position: relative; display: inline-flex; width: 34px; height: 34px; flex: none; --sk: #2f9c8f; } .sk-chip .sk-plate { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(18, 63, 58, .25)); } .sk-chip .sk-plate .pl-glow { display: none; } .sk-chip .sk-plate .pl-ink { fill: #123f3a; } .sk-chip .sk-plate .pl-rim { fill: color-mix(in srgb, var(--sk) 82%, #fffdf4); transform-origin: 32px 32px; transform: scale(.9); } .sk-chip .sk-plate .pl-face { fill: #fffdf4; } .sk-chip .sk-plate .pl-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .75; } .sk-chip .sk-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sk-chip .sk-glyph svg { width: 66%; height: 66%; } .sk-chip.ult { width: 40px; height: 40px; } .sk-chip.ult .sk-plate .pl-rim { fill: #f5c64f; } .sk-chip.ult .sk-plate .pl-ink { fill: #7a4e08; } .sk-chip.ult .sk-plate .pl-face { fill: #fff8e2; } /* Chip skill di Prep & detail hero: ukuran ringkas mengikuti konteksnya */ .prep-summary .ps-abilities { align-items: flex-end; gap: 6px; } .prep-summary .ps-skill-chip { width: 30px; height: 30px; } .prep-summary .ps-skill-chip.ult { width: 36px; height: 36px; } .hl-skill .hl-skill-chip { width: 28px; height: 28px; } .hl-skill.ult .hl-skill-chip { width: 32px; height: 32px; } /* ================================================================ UI/UX COMBAT — RADIAL SKILL WHEEL + UNLOCK PROGRESSION (Lv 3/5/10/15) PULSE = pusat/primary action terbesar; skill S1/S2/ULT pada titik TETAP mengelilingi PULSE (semi-radial, absolute — bukan document flow — supaya muscle memory tidak bergeser saat skill unlock). Slot LOCKED tetap dirender di tempatnya (overlay kunci + level). ================================================================ */ #screen-hud .hud-controls { /* geometry vars (desktop) */ --wb: 232px; /* lebar wheel */ --wh: 182px; /* tinggi wheel */ --pw: 96px; /* diameter PULSE */ --sw: 52px; /* diameter skill */ --swu: 58px; /* diameter ULT */ --px: calc(var(--wb) - 14px - var(--pw)); /* pulse: kiri rel wheel */ --py: calc(var(--wh) - 6px - var(--pw)); /* pulse: atas rel wheel */ --pcx: calc(var(--wb) - 14px - var(--pw) / 2); /* pulse: pusat-x rel wheel */ --pcy: calc(var(--wh) - 6px - var(--pw) / 2); /* pulse: pusat-y rel wheel */ position: absolute; right: 10px; bottom: 8px; width: var(--wb); height: var(--wh); display: block; gap: 0; z-index: 6; } /* Cincin petri halus di belakang roda (biological, bukan panel kotak) */ #screen-hud .hud-controls::before { content: ""; position: absolute; z-index: 0; pointer-events: none; --r: 104px; width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--pcx) - var(--r)); top: calc(var(--pcy) - var(--r)); border-radius: 50%; border: 2px dashed rgba(255, 253, 244, 0.34); box-shadow: inset 0 0 0 5px rgba(53, 208, 186, 0.10); opacity: .8; } #screen-hud .pulse-btn { position: absolute; left: var(--px); top: var(--py); width: var(--pw); height: var(--pw); min-height: var(--pw); border-radius: 50%; z-index: 2; /* PULSE = pusat, selalu paling besar & paling menonjol */ } /* Semua tombol skill = absolute di dalam wheel (bukan grid/document flow) */ #screen-hud .ability-bar { position: absolute; inset: 0; display: block; --skw: var(--sw); gap: 0; z-index: 1; } /* Posisi TETAP mengelilingi PULSE: S2 di atas PULSE · S1 kiri-atas · ULT kanan-atas (semi-radial atas) */ #screen-hud .ability-btn.pos-0 { /* SKILL 1 — kiri-atas */ left: calc(var(--pcx) - 96px - var(--sw) / 2); top: calc(var(--pcy) - 74px - var(--sw) / 2); } #screen-hud .ability-btn.pos-1 { /* SKILL 2 — atas, geser kiri 20px agar tidak bertumpuk ULT */ left: calc(var(--pcx) - 20px - var(--sw) / 2); top: calc(var(--pcy) - 106px - var(--sw) / 2); } #screen-hud .ability-btn.pos-2 { /* ULT — kanan-atas, ±8px jelas dari S2; naik 8px: bbox bebas PULSE */ left: calc(var(--pcx) + 43px - var(--swu) / 2); top: calc(var(--pcy) - 92px - var(--swu) / 2); } #screen-hud .ability-btn.ult { --skw: var(--swu); grid-column: auto; justify-self: auto; } /* Subtle shadow saja — tanpa card/kotak/bayangan berat. position:absolute di dalam wheel — skill TIDAK menumpuk di document flow (sebelumnya relative → slot2/ULT jatuh di bawah PULSE). */ #screen-hud .ability-btn { position: absolute; box-shadow: none; overflow: visible; /* RONDE-4 (fix 3×): HILARKAN TOTAL "kotak" di belakang pelat hex — main.css memberi kartu rounded-square (background gradient putih/sage, border 2.5px, box-shadow) + overlay sk-bio-accent berpola kotak. Slot skill = pelat hex murni (SVG .sk-plate) — tanpa kotak/sisa opacity. */ background: none; background-image: none; background-color: transparent; border: none; border-color: transparent; border-style: none; border-radius: 0; box-shadow: none; text-shadow: none; } #screen-hud .ability-btn.character-skill { background: none; background-image: none; background-color: transparent; border: none; } #screen-hud .ability-btn .sk-bio-accent { display: none; /* pola kotak inset juga dimatikan */ } #screen-hud .ability-btn::after, #screen-hud .ability-btn::before { content: none; } #screen-hud .ability-btn .sk-plate { filter: drop-shadow(0 2px 0 rgba(18, 63, 58, .28)) drop-shadow(0 3px 6px rgba(18, 63, 58, .14)); } /* ---- LOCKED state (skill belum terbuka pada level sekarang) ---- */ #screen-hud .ability-btn.locked { cursor: default; /* geometri TETAP: --lbl tidak dinolkan — muscle memory */ } #screen-hud .ability-btn.locked .sk-plate { filter: none; } #screen-hud .ability-btn.locked .sk-plate .pl-face { fill: #d9e4dd; } #screen-hud .ability-btn.locked .sk-plate .pl-rim { fill: #9db1a8; } #screen-hud .ability-btn.locked .sk-plate .pl-glow { animation: none; opacity: 0; } #screen-hud .ability-btn.locked .sk-glyph { opacity: .28; filter: grayscale(1); } #screen-hud .ability-btn.locked .sk-name { visibility: hidden; /* ruang label tetap dipesan — posisi tombol tidak bergeser saat unlock */ } #screen-hud .ability-btn.locked .cd-num, #screen-hud .ability-btn.locked .key-tag { display: none; } #screen-hud .ability-btn .sk-lock { display: none; position: absolute; inset: 0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; } #screen-hud .ability-btn.locked .sk-lock { display: flex; } #screen-hud .ability-btn .sk-lock img { width: 44%; height: 44%; object-fit: contain; opacity: .85; filter: drop-shadow(0 1px 0 rgba(255, 253, 244, .6)); } #screen-hud .ability-btn .sk-lock b { font: 900 9px var(--font); color: #123f3a; background: rgba(255, 253, 244, .94); border-radius: 7px; padding: 1.5px 6px; line-height: 1.25; box-shadow: 0 1px 3px rgba(18, 63, 58, .25); } /* ---- Rank pip tunggal (rank 2 otomatis di Lv 15) ---- */ #screen-hud .ability-btn .sk-rank { display: none; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); gap: 2.5px; z-index: 5; pointer-events: none; } #screen-hud .ability-btn .sk-rank.visible { display: inline-flex; } #screen-hud .ability-btn .sk-rank i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 253, 244, .55); border: 1px solid rgba(18, 63, 58, .5); } #screen-hud .ability-btn .sk-rank i.on { background: #f5c64f; border-color: #7a4e08; box-shadow: 0 0 4px rgba(245, 198, 79, .8); } /* PHAGOS D5: badge upgrade (+) dihapus — skill pasif tanpa tombol. */ 50% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(245, 198, 79, 0); } } /* Tombol menu2 regu: tetap di kiri PULSE, bebas dari lengkung skill */ #screen-hud .hud-menu2-toggle { right: 190px; bottom: 100px; } #screen-hud .hud-game-menu2 { right: 190px; bottom: 150px; } /* Hint kontrol: naik di atas roda skill (wheel lebih tinggi dari grid 2x2 lama) */ #screen-hud .hud-hint { bottom: 198px; } @media (max-width: 700px) { #screen-hud .hud-controls { --wb: 190px; --wh: 150px; --pw: 78px; --sw: 44px; --swu: 48px; right: 8px; bottom: 8px; } #screen-hud .hud-controls::before { --r: 84px; border-width: 1.5px; } #screen-hud .ability-btn.pos-0 { left: calc(var(--pcx) - 80px - var(--sw) / 2); top: calc(var(--pcy) - 60px - var(--sw) / 2); } #screen-hud .ability-btn.pos-1 { left: calc(var(--pcx) - 16px - var(--sw) / 2); top: calc(var(--pcy) - 88px - var(--sw) / 2); } #screen-hud .ability-btn.pos-2 { left: calc(var(--pcx) + 36px - var(--swu) / 2); top: calc(var(--pcy) - 68px - var(--swu) / 2); } #screen-hud .hud-menu2-toggle { right: 212px; bottom: 84px; width: 42px; height: 42px; } #screen-hud .hud-game-menu2 { right: 212px; bottom: 134px; } #screen-hud .hud-hint { bottom: 166px; left: 10px; right: auto; transform: none; text-align: left; max-width: 46vw; } } @media (max-width: 390px) { #screen-hud .hud-menu2-toggle { right: 200px; bottom: 80px; } #screen-hud .hud-game-menu2 { right: 200px; bottom: 130px; } } @media (max-height: 370px) { /* Landscape HP sangat pendek: padatkan roda sedikit, label skill sembunyi */ #screen-hud .hud-controls { --wb: 208px; --wh: 162px; --pw: 84px; --sw: 46px; --swu: 50px; } #screen-hud .ability-btn.pos-0 { left: calc(var(--pcx) - 88px - var(--sw) / 2); top: calc(var(--pcy) - 64px - var(--sw) / 2); } #screen-hud .ability-btn.pos-1 { left: calc(var(--pcx) - 18px - var(--sw) / 2); top: calc(var(--pcy) - 94px - var(--sw) / 2); } #screen-hud .ability-btn.pos-2 { left: calc(var(--pcx) + 38px - var(--swu) / 2); top: calc(var(--pcy) - 72px - var(--swu) / 2); } #screen-hud .hud-hint { bottom: 176px; } } /* ================================================================ UI/UX COMBAT — PROTECTED INTERACTION ZONES (movement boundary) #screen-hud = .screen.passive (pointer-events:none global) supaya drag di LANTAI ARENA (canvas) menggerakkan hero. Tetapi zona UI WAJIB di-opt-in auto: drag yang dimulai di atas profil/misi/jeda/ resource HUD tidak boleh diteruskan ke movement system. (InputHandler juga menolak target UI via isGameplayInputTarget.) ================================================================ */ #screen-hud #hp-pill, /* profil hero + HP bar */ #screen-hud .hud-hero-status, #screen-hud .hud-minimap, /* minimap */ #screen-hud .hud-xp-top, /* progres XP */ #screen-hud .hud-mission, /* tracker misi kampanye */ #screen-hud .hud-buff-chip, /* chip buff tempur */ #screen-hud .hud-antigen, /* chip memori antigen */ #screen-hud .phago-meter { /* meter fagositosis */ pointer-events: auto; } /* Meter fagositosis digeser ke kiri wheel (layout radial baru) */ #screen-hud .phago-meter { right: 240px; } @media (max-width: 700px) { #screen-hud .phago-meter { right: 210px; } } /* ================================================================ HERO DETAIL REBUILD (Fase 5) — single-hero focus, no vert. scroll Grid: [skills | STAGE | troops] over [stats strip + upgrade] Detail sekunder (skill/pasukan/equity) = modal overlay .hd-modal. ================================================================ */ #screen-herodetail .hero-detail-body { display: block; width: calc(100% - 24px); max-width: 1160px; margin: 0 auto; padding: 2px 4px 10px; overflow: hidden; height: calc(100% - 10px); } .hd-shell { display: grid; height: 100%; gap: 8px 10px; grid-template-columns: minmax(148px, 172px) minmax(0, 1fr) minmax(168px, 212px); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'left stage right' 'bottom bottom bottom'; } /* ---------- RAIL KIRI: SKILL ---------- */ .hd-rail { display: flex; flex-direction: column; gap: 7px; min-height: 0; align-self: center; } .hd-left { grid-area: left; align-items: flex-start; } .hd-right { grid-area: right; align-items: stretch; } .hd-rail-title { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: #6f8b84; text-transform: uppercase; padding-left: 4px; } .hd-skill-list { display: flex; flex-direction: column; gap: 9px; } .hero-lab-card .hl-skill, .hd-skill-btn, .hl-skill.hd-skill-btn { display: flex; align-items: center; gap: 7px; border: none; background: transparent; padding: 3px; border-radius: 14px; cursor: pointer; transition: transform .12s ease, filter .12s ease; } .hd-skill-btn:hover { transform: translateX(3px); filter: brightness(1.05); } .hd-skill-btn:focus-visible { outline: 2px solid var(--mint, #2f9c8f); outline-offset: 2px; } .hd-skill-btn .hl-skill-chip { width: 46px; height: 46px; flex: none; } .hd-skill-btn .hl-skill-key { font-size: 10px; font-weight: 900; color: #fff; background: #3f645e; border-radius: 999px; padding: 2px 7px; letter-spacing: .5px; } .hd-skill-btn.ult .hl-skill-key { background: #b0589b; } .hd-skill-lvtag { font-size: 10px; font-weight: 800; color: #7a938c; } .hd-passive-chip { border: none; background: rgba(47, 156, 143, .07); color: #4c7a70; font-size: 10.5px; line-height: 1.35; text-align: left; padding: 7px 9px; border-radius: 12px; cursor: pointer; } .hd-passive-chip:hover { background: rgba(47, 156, 143, .13); } /* ---------- TENGAH: PANGGUNG HERO ---------- */ .hd-stage { grid-area: stage; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; } .hd-arrow { border: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #3f645e; font-size: 17px; font-weight: 900; box-shadow: 0 3px 10px rgba(38, 84, 76, .16); transition: transform .12s ease, box-shadow .12s ease; } .hd-arrow:hover { transform: scale(1.08); box-shadow: 0 5px 14px rgba(38, 84, 76, .22); } .hd-arrow:active { transform: scale(.96); } .hd-stage-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; justify-content: center; } .hd-banner { display: inline-flex; align-items: center; gap: 8px; } .hd-banner .hl-banner-role { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 900; overflow: hidden; box-shadow: 0 2px 6px rgba(38, 84, 76, .2); } .hd-banner .hl-banner-role img { width: 18px; height: 18px; } .hd-banner .hl-banner-name { font-size: 19px; font-weight: 900; color: #25453f; } .hd-banner .hl-banner-tier { color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; } .hd-hero-figure { position: relative; width: min(54vh, 360px); height: min(54vh, 360px); display: flex; align-items: center; justify-content: center; } .hd-hero-halo { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hero-color, #2f9c8f) 26%, transparent) 0%, color-mix(in srgb, var(--hero-color, #2f9c8f) 10%, transparent) 44%, transparent 68%); filter: blur(2px); } .hd-hero-figure::after { /* bayangan tanah lembut — biological, bukan card */ content: ''; position: absolute; left: 16%; right: 16%; bottom: 4%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(46, 94, 86, .28), transparent 70%); } .hd-hero-sprite { position: relative; z-index: 1; width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(38, 84, 76, .18)); } @keyframes hdSlideR { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes hdSlideL { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } } .hd-hero-sprite.slide-r { animation: hdSlideR .22s ease; } .hd-hero-sprite.slide-l { animation: hdSlideL .22s ease; } .hd-nameplate { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; } .hd-name { font-size: 23px; font-weight: 900; color: #233f3a; letter-spacing: .3px; } .hd-nameplate .hl-level { color: #fff; font-weight: 900; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; } .hd-title { font-size: 12.5px; color: #5f7d76; font-weight: 700; } .hd-stage-center .hl-mastery { display: flex; align-items: center; gap: 8px; min-width: 200px; } .hd-stage-center .hl-mastery-bar { width: 90px; height: 7px; border-radius: 4px; background: rgba(195, 155, 211, .18); overflow: hidden; } /* Dots carousel */ .hd-dots { display: flex; gap: 7px; margin-top: 6px; } .hd-dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: color-mix(in srgb, var(--hero-color, #b9ccc6) 45%, #cfe0db); opacity: .55; transition: transform .12s ease, opacity .12s ease; } .hd-dot.active { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--hero-color) 70%, #2f9c8f); } /* ---------- RAIL KANAN: TROOPS / LOADOUT ---------- */ .hd-troop-list { display: flex; flex-direction: column; gap: 8px; } .hd-troop-cell { display: flex; align-items: center; gap: 8px; border: none; background: rgba(255, 255, 255, .55); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; transition: transform .12s ease, background .12s ease; } .hd-troop-cell:hover { transform: translateX(-3px); background: #fff; } .hd-troop-cell .hl-ally { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; image-rendering: pixelated; background: radial-gradient(circle, #eef7f3, #dcebe4); padding: 3px; } .hd-troop-cell .hl-ally-tag { font-size: 11.5px; font-weight: 800; color: #3f645e; } .hd-troop-count { font-size: 11px; color: #5f7d76; font-weight: 700; text-align: center; } .hd-right .hl-level.ally { align-self: center; background: #2f9c8f; color: #fff; font-weight: 900; font-size: 11px; padding: 3px 9px; border-radius: 999px; } .hd-troop-chips .hl-chip { display: inline-flex; gap: 5px; align-items: baseline; font-size: 11px; } .hd-troop-chips .hl-chip b { font-size: 13px; color: #25453f; } .hd-troop-chips .hl-chip i { font-style: normal; color: #7a938c; } .hd-ally-up { width: 100%; font-size: 12px; padding: 8px 10px; white-space: normal; } .hd-right .hl-hint { font-size: 10px; color: #84a098; line-height: 1.35; text-align: center; } .hd-lab-btn, .hd-equity-btn { font-size: 11px; padding: 7px 9px; } /* ---------- BAWAH: STRIP STAT + AKSI ---------- */ .hd-bottom { grid-area: bottom; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, .66); box-shadow: 0 2px 10px rgba(38, 84, 76, .08); } .hd-stats { display: flex; gap: 8px; flex-wrap: wrap; } .hd-stats .hl-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 12px; border-radius: 14px; background: linear-gradient(180deg, #fff, #f2f8f5); box-shadow: inset 0 0 0 1px rgba(63, 100, 94, .12); } .hd-stats .hl-chip small { font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; color: #84a098; } .hd-stats .hl-chip b { font-size: 16px; font-weight: 900; color: #25453f; line-height: 1.1; } .hd-stats .hl-chip i { font-style: normal; font-size: 10px; font-weight: 800; color: #3da07a; } .hd-stats .hl-chip.def b { color: #4a7cb5; } .hd-stats .hl-chip.pwr b { color: #8a5fb0; } .hd-up-row { display: flex; align-items: center; gap: 12px; flex: none; } .hd-up-slider { width: 150px; flex: none; } .hd-up-slider.maxed { opacity: .65; } #screen-herodetail .btn-hl-up { font-size: 13px; padding: 10px 18px; white-space: nowrap; } /* ---------- MODAL ---------- */ .hd-modal { position: absolute; inset: 0; z-index: 60; } .hd-modal.hidden { display: none; } .hd-modal-backdrop { position: absolute; inset: 0; background: rgba(28, 52, 47, .42); backdrop-filter: blur(3px); } .hd-modal-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 540px); max-height: min(84%, 640px); overflow-y: auto; background: #fbfefd; border-radius: 22px; box-shadow: 0 18px 50px rgba(23, 46, 41, .35); padding: 18px 18px 20px; } .hd-modal-close { position: sticky; top: 0; float: right; border: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(63, 100, 94, .1); color: #3f645e; font-size: 14px; font-weight: 900; cursor: pointer; z-index: 2; } .hd-modal-close:hover { background: rgba(63, 100, 94, .2); } #hd-equity-slot { display: none; } .hd-modal .hero-lab-card { box-shadow: none; padding: 4px 0; background: transparent; } /* Konten modal detail skill / pasukan */ .hd-skill-detail { display: flex; flex-direction: column; gap: 10px; } .hd-skill-detail-head { display: flex; gap: 12px; align-items: center; } .hd-skill-modal-ico { width: 58px; height: 58px; flex: none; } .hd-skill-modal-ico .sk-chip { width: 58px; height: 58px; display: block; } .hd-skill-modal-ico .sk-chip > svg { width: 58px; height: 58px; display: block; } .hd-skill-modal-ico .sk-glyph svg { width: 30px; height: 30px; } .hd-troop-modal-img { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #eef7f3, #dcebe4); padding: 4px; image-rendering: pixelated; } .hd-skill-detail-titles { display: flex; flex-direction: column; gap: 2px; } .hd-skill-detail-name { font-size: 18px; font-weight: 900; color: #233f3a; } .hd-skill-detail-tag { font-size: 10.5px; font-weight: 900; letter-spacing: 1px; color: #7a938c; text-transform: uppercase; } .hd-skill-detail-desc { font-size: 12.5px; line-height: 1.5; color: #4c6c64; margin: 0; } .hd-skill-detail-sec b { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #6f8b84; text-transform: uppercase; } .hd-skill-effects { margin: 5px 0 0; padding-left: 18px; font-size: 12px; color: #415f58; line-height: 1.6; } .hd-skill-detail-line { font-size: 12px; color: #4c6c64; margin: 4px 0 0; } .hd-skill-req { display: flex; flex-wrap: wrap; gap: 6px; } .hd-skill-req-chip { font-size: 10.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(47, 156, 143, .1); color: #2f7f74; } .hd-skill-req-chip.upg { background: rgba(138, 95, 176, .12); color: #7d54a3; } .hd-skill-up-btn { width: 100%; opacity: .75; } /* ---------- RESPONSIF ---------- */ @media (max-width: 900px) { .hd-shell { grid-template-columns: minmax(120px, 140px) minmax(0, 1fr) minmax(130px, 160px); } .hd-hero-figure { width: min(50vh, 300px); height: min(50vh, 300px); } .hd-name { font-size: 20px; } } @media (max-width: 640px) { .hd-shell { grid-template-columns: 52px minmax(0, 1fr) 60px; gap: 6px; } .hd-rail-title { display: none; } .hd-skill-btn .hl-skill-key, .hd-skill-btn .hd-skill-lvtag { display: none; } .hd-skill-btn .hl-skill-chip { width: 40px; height: 40px; } .hd-passive-chip { font-size: 0; padding: 6px; width: 40px; height: 40px; } .hd-passive-chip::before { content: '✦'; font-size: 15px; color: #2f7f74; } .hd-troop-cell { padding: 3px; background: transparent; } .hd-troop-cell .hl-ally { width: 34px; height: 34px; } .hd-troop-cell .hl-ally-tag, .hd-troop-count, .hd-troop-chips, .hd-right .hl-hint, .hd-lab-btn, .hd-equity-btn { display: none; } .hd-right .hl-level.ally { padding: 2px 6px; font-size: 10px; } .hd-ally-up { font-size: 0; padding: 10px 6px; } .hd-ally-up::after { content: '⬆'; font-size: 14px; } .hd-ally-up:not(:disabled)::after { content: '⬆ ' attr(data-cost); } .hd-hero-figure { width: min(46vh, 220px); height: min(46vh, 220px); } .hd-banner .hl-banner-name { display: none; } .hd-name { font-size: 17px; } .hd-title { font-size: 11px; } .hd-stage-center .hl-mastery { min-width: 0; max-width: 120px; } .hd-arrow { width: 34px; height: 34px; font-size: 13px; } .hd-bottom { justify-content: center; gap: 8px; padding: 6px 8px; } .hd-stats .hl-chip { min-width: 56px; padding: 4px 8px; } .hd-stats .hl-chip b { font-size: 14px; } .hd-up-slider { width: 90px; } #screen-herodetail .btn-hl-up { font-size: 11.5px; padding: 8px 12px; } } @media (prefers-reduced-motion: reduce) { .hd-hero-sprite.slide-r, .hd-hero-sprite.slide-l { animation: none; } .hd-arrow, .hd-skill-btn, .hd-troop-cell { transition: none; } } /* ---------- KOMPRESI LANDSCAPE PENDEK (HP lanskap, tablet mini) ---------- */ @media (max-height: 470px) { .hd-hero-figure { width: min(44vh, 208px); height: min(44vh, 208px); } .hd-banner { gap: 6px; } .hd-banner .hl-banner-name { font-size: 15px; } .hd-banner .hl-banner-role { width: 22px; height: 22px; } .hd-banner .hl-banner-role img { width: 13px; height: 13px; } .hd-banner .hl-banner-tier { font-size: 8.5px; padding: 2px 7px; } .hd-name { font-size: 16px; } .hd-title { font-size: 10.5px; } .hd-stage-center { gap: 2px; } .hd-stage-center .hl-mastery { min-width: 150px; } .hd-dots { margin-top: 3px; } .hd-dot { width: 7px; height: 7px; } .hd-arrow { width: 32px; height: 32px; font-size: 12px; } .hd-rail { gap: 4px; } .hd-skill-list { gap: 5px; } .hd-skill-btn .hl-skill-chip { width: 34px; height: 34px; } .hd-skill-btn .hl-skill-key { font-size: 8.5px; padding: 1px 6px; } .hd-skill-lvtag { font-size: 8.5px; } .hd-passive-chip { font-size: 0; padding: 5px 8px; } .hd-passive-chip::before { content: '✦ ' attr(data-name); font-size: 9.5px; color: #4c7a70; } .hd-troop-list { gap: 4px; } .hd-troop-cell { padding: 2px 8px 2px 2px; } .hd-troop-cell .hl-ally { width: 28px; height: 28px; } .hd-troop-cell .hl-ally-tag { font-size: 10px; } .hd-troop-count { font-size: 9.5px; } .hd-right .hl-level.ally { font-size: 9.5px; padding: 2px 7px; } .hd-troop-chips .hl-chip { font-size: 9.5px; padding: 2px 8px; } .hd-troop-chips .hl-chip b { font-size: 11px; } .hd-right .hl-hint { display: block; /* jangan display:none — teks tetap terbaca (innerText/a11y) */ font-size: 9px; line-height: 1.25; max-height: 34px; overflow: hidden; padding: 0 2px; } .hd-ally-up { font-size: 10.5px; padding: 4px 6px; } .hd-lab-btn, .hd-equity-btn { font-size: 9.5px; padding: 3px 6px; } .hd-rail-title { font-size: 8.5px; } .hd-bottom { padding: 4px 8px; gap: 8px; } .hd-stats .hl-chip { min-width: 52px; padding: 3px 9px; } .hd-stats .hl-chip b { font-size: 13px; } .hd-stats .hl-chip small { font-size: 8px; } .hd-stats .hl-chip i { font-size: 8.5px; } .hd-up-slider { width: 100px; } #screen-herodetail .btn-hl-up { font-size: 11px; padding: 6px 12px; } #screen-herodetail .hero-detail-body { padding: 0 4px 4px; height: calc(100% - 4px); } } @media (max-height: 470px) and (prefers-reduced-motion: no-preference) { :root { scroll-behavior: auto; } } /* ---------- FIX COMPRESSION OVERRIDES ---------- */ .hd-troop-list .hd-troop-cell { flex-direction: row; } @media (max-height: 470px) { .hd-right .btn { min-height: 0; } } /* Profil HUD kini aksi (pause): affordance jelas */ #screen-hud #hp-pill { cursor: pointer; transition: transform .1s ease, box-shadow .12s ease; } #screen-hud #hp-pill:active { transform: scale(.97); } /* ================================================================ HOME LAUNCHER — BOTTOM MENU BAR (gaya RoK: ikon bulat berjejer bawah) Sebelumnya display:none (F24) → user: "icon menu di bawah yg berisi hero letaknya tidak tepat". Tampil lagi sebagai bar bawah yang rapi: 4 item saja → tidak ada kolom kosong sisa grid repeat(5). ================================================================ */ #screen-dashboard .dock { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 14px; max-width: none; width: 100%; margin: 2px auto 0; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); } #screen-dashboard .dock-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; padding: 0; cursor: pointer; min-width: 0; } #screen-dashboard .dock-btn .dock-ico { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffdf4, #dff0e7); box-shadow: 0 3px 10px rgba(38, 84, 76, .2), inset 0 0 0 2px rgba(255, 253, 244, .75); display: flex; align-items: center; justify-content: center; transition: transform .12s ease, box-shadow .12s ease; } #screen-dashboard .dock-btn .dock-ico img, #screen-dashboard .dock-btn .dock-ico svg { width: 26px; height: 26px; object-fit: contain; } #screen-dashboard .dock-btn .dock-ico svg { fill: #2f7f74; } #screen-dashboard .dock-btn:hover .dock-ico { transform: translateY(-2px); box-shadow: 0 5px 13px rgba(38, 84, 76, .26), inset 0 0 0 2px rgba(255, 253, 244, .9); } #screen-dashboard .dock-btn:active .dock-ico { transform: scale(.92); } #screen-dashboard .dock-btn > span { font-size: 10.5px; font-weight: 900; letter-spacing: .4px; color: #3f645e; text-shadow: 0 1px 0 rgba(255, 253, 244, .8); } @media (max-height: 470px) { #screen-dashboard .dock { gap: 10px; padding: 2px 12px calc(6px + env(safe-area-inset-bottom)); } #screen-dashboard .dock-btn .dock-ico { width: 40px; height: 40px; } #screen-dashboard .dock-btn .dock-ico img, #screen-dashboard .dock-btn .dock-ico svg { width: 20px; height: 20px; } #screen-dashboard .dock-btn > span { font-size: 9px; } } /* ================================================================ HERO PAGE v2 — LAYOUT ALA RISE OF KINGDOMS Rail kiri (koleksi) | panggung besar tengah | panel kanan lengkap. Detail skill/troop/equity = float SATU LEVEL di halaman yang sama. ================================================================ */ .hd-rok { position: relative; display: grid; height: 100%; gap: 8px 12px; grid-template-columns: 88px minmax(0, 1fr) minmax(300px, 356px); grid-template-rows: minmax(0, 1fr); /* baris terbatas — rail boleh mengecil, bukan mendorong halaman scroll */ align-items: center; } /* ---------- RAIL KIRI (koleksi hero, carousel terintegrasi) ---------- */ .hd-rok-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: stretch; justify-content: center; min-height: 0; } .hd-rok-rail-items { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 4px 2px; scrollbar-width: none; max-height: calc(100% - 76px); } .hd-rok-rail-items::-webkit-scrollbar { display: none; } .hd-rok-arrow { flex: none; width: 30px; height: 26px; border-radius: 999px; border: none; background: #fff; color: #3f645e; font-size: 11px; font-weight: 900; box-shadow: 0 2px 7px rgba(38, 84, 76, .18); cursor: pointer; } .hd-rok-arrow:hover { transform: scale(1.06); } .hd-rok-hero { position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: radial-gradient(circle at 38% 30%, #fffdf4, #dcebe3); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--hero-color, #9db1a8) 55%, #cfe0d9), 0 2px 7px rgba(38, 84, 76, .16); transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; } .hd-rok-hero img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; pointer-events: none; } .hd-rok-hero.sel { box-shadow: inset 0 0 0 3px var(--hero-color, #2f9c8f), 0 0 0 3px #fffdf4, 0 0 0 5.5px color-mix(in srgb, var(--hero-color, #2f9c8f) 80%, #2f9c8f), 0 4px 12px rgba(38, 84, 76, .25); transform: scale(1.05); } .hd-rok-hero.locked { filter: grayscale(1); opacity: .55; } .hd-rok-hero .hd-rok-lock { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; opacity: .9; } .hd-rok-hero:hover { transform: scale(1.06); } /* ---------- TENGAH: panggung hero ---------- */ .hd-rok-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 0; height: 100%; } .hd-rok-figure { width: min(58vh, 360px); height: min(58vh, 360px); } .hd-rok-pedestal { position: absolute; left: 8%; right: 8%; bottom: -3%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--hero-color, #2f9c8f) 26%, #e7f2ed), rgba(231, 242, 237, .4) 70%, transparent 72%); box-shadow: inset 0 -4px 9px rgba(38, 84, 76, .1); } .hd-rok-figure::after { display: none; } /* pedestal RoK menggantikan bayangan lama */ .hd-rok-power { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 253, 244, .92); border-radius: 999px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(38, 84, 76, .16); } .hd-rok-power i { font-style: normal; font-size: 13px; } .hd-rok-power b { font-size: 13.5px; color: #25453f; font-weight: 900; letter-spacing: .3px; } /* ---------- PANEL KANAN ---------- */ .hd-rok-panel { display: flex; flex-direction: column; gap: 7px; min-width: 0; align-self: center; max-height: 100%; justify-content: center; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-right: 2px; /* ekstrem: hanya panel yang scroll, halaman tidak */ } .hd-rok-panel::-webkit-scrollbar { display: none; } .hd-rok-id { display: flex; flex-direction: column; gap: 3px; } .hd-rok-title { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: #6f8b84; text-transform: uppercase; } .hd-rok-namerow { display: flex; align-items: center; gap: 8px; } .hd-rok-namerow .hd-name { font-size: 24px; font-weight: 900; color: #233f3a; letter-spacing: .3px; } .hd-rok-role { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 2px 6px rgba(38, 84, 76, .2); flex: none; } .hd-rok-role img { width: 16px; height: 16px; } .hd-rok-tier { color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; flex: none; } .hd-rok-passline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; line-height: 1.35; color: #4c7a70; } .hd-rok-mastery { display: flex; align-items: center; gap: 8px; } .hd-rok-mastery > span { font-size: 10.5px; } .hd-rok-mastery .hl-mastery-bar { width: 74px; height: 6px; border-radius: 4px; background: rgba(195, 155, 211, .2); overflow: hidden; } .hd-rok-lvrow { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .hd-rok-lvrow .hl-level { flex: none; color: #fff; font-weight: 900; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; } .hd-up-slider { flex: 1; min-width: 0; } .hd-rok-upbig { width: 100%; font-size: 14px; padding: 11px 12px; } .hd-rok-stats { display: flex; gap: 6px; } .hd-rok-stats .hl-chip { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 12px; min-width: 0; background: linear-gradient(180deg, #fff, #f2f8f5); box-shadow: inset 0 0 0 1px rgba(63, 100, 94, .12); } .hd-rok-stats .hl-chip small { font-size: 8.5px; font-weight: 900; letter-spacing: 1px; color: #84a098; } .hd-rok-stats .hl-chip b { font-size: 15px; font-weight: 900; color: #25453f; line-height: 1.1; } .hd-rok-stats .hl-chip i { font-style: normal; font-size: 9px; font-weight: 800; color: #3da07a; } .hd-rok-stats .hl-chip.def b { color: #4a7cb5; } .hd-rok-stats .hl-chip.pwr b { color: #8a5fb0; } .hd-rok-sec { display: flex; flex-direction: column; gap: 4px; } .hd-rok-sec-title { font-size: 10px; font-weight: 900; letter-spacing: 1.6px; color: #6f8b84; text-transform: uppercase; } .hd-rok-skill-row { display: flex; gap: 10px; align-items: flex-start; } .hd-rok-skill-ico { display: flex; flex-direction: column; align-items: center; gap: 2px; border: none; background: transparent; padding: 2px; cursor: pointer; border-radius: 14px; transition: transform .12s ease; } .hd-rok-skill-ico:hover { transform: translateY(-2px); } .hd-rok-skill-ico .sk-chip { width: 46px; height: 46px; display: block; } .hd-rok-skill-ico .hl-skill-key { display: none; } .hd-skill-lvtag { font-size: 9px; font-weight: 800; color: #7a938c; } .hd-rok-skill-ico.sel { box-shadow: 0 0 0 2px #fffdf4, 0 0 0 4px var(--hero-color, #2f9c8f); } .hd-rok-passive-ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #8a5fb0; background: radial-gradient(circle at 40% 32%, #fdf6ff, #e9dff2); box-shadow: inset 0 0 0 2px rgba(138, 95, 176, .45), 0 2px 7px rgba(84, 52, 106, .18); } .hd-rok-troop-row { display: flex; align-items: center; gap: 8px; } .hd-rok-troop { width: 36px; height: 36px; border-radius: 50%; border: none; padding: 2px; cursor: pointer; background: radial-gradient(circle, #eef7f3, #dcebe4); box-shadow: 0 1px 5px rgba(38, 84, 76, .18); transition: transform .1s ease; } .hd-rok-troop:hover { transform: scale(1.08); } .hd-rok-troop img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } .hd-rok-troop-count { font-size: 10px; color: #5f7d76; font-weight: 700; margin-left: auto; } .hd-rok-dmgchip { font-size: 10px; font-weight: 900; padding: 3px 9px; border-radius: 999px; background: rgba(47, 156, 143, .1); color: #2f7f74; } .hd-rok-ally-up { width: 100%; font-size: 11.5px; padding: 8px 10px; } .hd-rok-sec .hl-hint { display: block; font-size: 9.5px; line-height: 1.3; color: #84a098; max-height: 26px; overflow: hidden; text-align: left; } .hd-rok-links { display: flex; gap: 6px; } .hd-rok-link { flex: 1; font-size: 10.5px; padding: 7px 8px; } /* ---------- FLOAT SATU LEVEL (popup gaya RoK; tetap di halaman ini) ---------- */ .hd-rok-float { position: absolute; z-index: 40; top: 8px; right: 8px; bottom: auto; width: min(360px, 92%); background: #fbfefd; border-radius: 18px; box-shadow: 0 14px 38px rgba(23, 46, 41, .3); padding: 14px 14px 15px; } .hd-rok-float.hidden { display: none; } .hd-rok-float.pop-equity { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(92%, 540px); max-height: 86%; overflow-y: auto; } .hd-rok-float-close { position: absolute; right: 8px; top: 8px; z-index: 2; border: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(63, 100, 94, .1); color: #3f645e; font-size: 13px; font-weight: 900; cursor: pointer; } .hd-rok-float .hero-lab-card { box-shadow: none; padding: 4px 0; background: transparent; } #hd-equity-slot { display: none; } .hd-skill-pop { display: flex; flex-direction: column; gap: 8px; } .hd-skill-pop-head { display: flex; gap: 10px; align-items: center; } .hd-skill-pop-titles { display: flex; flex-direction: column; gap: 1px; } .hd-skill-pop-name { font-size: 16px; font-weight: 900; color: #233f3a; } .hd-skill-pop-tag { font-size: 9.5px; font-weight: 900; color: #7a938c; letter-spacing: .8px; text-transform: uppercase; } .hd-skill-pop-desc { font-size: 12px; line-height: 1.5; color: #4c6c64; margin: 0; } .hd-skill-effects { margin: 0; padding-left: 17px; font-size: 11.5px; color: #415f58; line-height: 1.55; } .hd-skill-req { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .hd-skill-req-chip { font-size: 10px; font-weight: 800; padding: 4.5px 9px; border-radius: 999px; background: rgba(47, 156, 143, .1); color: #2f7f74; } .hd-skill-req-chip.upg { background: rgba(138, 95, 176, .12); color: #7d54a3; } /* ---------- RESPONSIF ---------- */ @media (max-height: 470px) { .hd-rok { grid-template-columns: 64px minmax(0, 1fr) minmax(268px, 300px); gap: 8px; } .hd-rok-hero { width: 46px; height: 46px; } .hd-rok-arrow { width: 26px; height: 22px; font-size: 9px; } .hd-rok-figure { width: min(46vh, 220px); height: min(46vh, 220px); } .hd-rok-power { padding: 4px 10px; } .hd-rok-power b { font-size: 11px; } .hd-rok-namerow .hd-name { font-size: 17px; } .hd-rok-title { font-size: 9px; } .hd-rok-passline { font-size: 9px; -webkit-line-clamp: 2; } .hd-rok-upbig { font-size: 11.5px; padding: 7px 10px; } .hd-rok-stats .hl-chip b { font-size: 12px; } .hd-rok-stats .hl-chip i { font-size: 8px; } .hd-rok-skill-ico .sk-chip, .hd-rok-passive-ico { width: 38px; height: 38px; } .hd-rok-panel { gap: 5px; } .hd-rok-ally-up { font-size: 10px; padding: 6px 8px; } .hd-rok-link { font-size: 9.5px; padding: 5px 7px; } #screen-herodetail .hero-detail-body { padding: 0 4px 4px; height: calc(100% - 4px); } } @media (max-width: 640px) { .hd-rok { grid-template-columns: 52px minmax(0, 1fr) minmax(210px, 240px); gap: 6px; } .hd-rok-hero { width: 40px; height: 40px; } .hd-rok-arrow { width: 24px; height: 20px; font-size: 8px; } .hd-rok-passline { display: none; } .hd-rok-links { flex-direction: column; } .hd-rok-sec .hl-hint { max-height: 20px; font-size: 8.5px; } } @media (prefers-reduced-motion: reduce) { .hd-rok-hero, .hd-rok-skill-ico, .hd-rok-troop, .hd-rok-arrow { transition: none; } } /* ---------- RoK SHORT-MODE FITTING: semua isi panel muat (tanpa scroll dini) ---------- */ @media (max-height: 470px) { .hd-rok-panel { gap: 4px; justify-content: flex-start; padding-top: 2px; } .hd-rok-id { gap: 2px; } .hd-rok-mastery { display: none; } /* di layar pendek: fokus identitas+aksi utama */ .hd-rok-passline { -webkit-line-clamp: 1; font-size: 9px; } .hd-rok-lvrow { margin-top: 0; gap: 6px; } .hd-up-slider { height: 8px; } .hd-rok-upbig { font-size: 11.5px; padding: 6px 10px; } .hd-rok-stats { gap: 4px; } .hd-rok-stats .hl-chip { padding: 2px 4px; min-height: 0; } .hd-rok-stats .hl-chip small { font-size: 7.5px; } .hd-rok-stats .hl-chip b { font-size: 11.5px; } .hd-rok-skill-row { gap: 6px; } .hd-rok-skill-ico .sk-chip, .hd-rok-passive-ico { width: 32px; height: 32px; } .hd-skill-lvtag { font-size: 8px; } .hd-rok-sec { gap: 2px; } .hd-rok-sec-title { font-size: 8.5px; letter-spacing: 1px; } .hd-rok-troop { width: 26px; height: 26px; } .hd-rok-troop-row { gap: 5px; } .hd-rok-troop-count { font-size: 8.5px; } .hd-rok-dmgchip { font-size: 8.5px; padding: 2px 7px; } .hd-rok-ally-up { font-size: 9.5px; padding: 5px 8px; } .hd-rok-sec .hl-hint { max-height: 17px; font-size: 8px; line-height: 1.2; } .hd-rok-links .hd-rok-link { font-size: 9px; padding: 5px 6px; } .hd-rok-stage { gap: 5px; } .hd-rok-float { top: 4px; right: 4px; padding: 10px; max-height: calc(100% - 8px); overflow-y: auto; } } /* ---------- DOCK FIX: PLAY tidak menutupi bar; item gated TETAP terlihat terkunci ---------- */ #screen-dashboard .dashboard-play { bottom: calc(max(30px, env(safe-area-inset-bottom)) + 64px); /* ruang untuk bar menu bawah */ } #screen-dashboard .dock-btn.gated:not(.primary) { display: flex; /* 4 menu selalu berjejer; progres rendah → lihat apa yang akan terbuka */ pointer-events: auto; } #screen-dashboard .dock-btn.gate-hidden { display: flex !important; } #screen-dashboard .dock-btn.gated:not(.primary) .dock-ico { filter: grayscale(.85); opacity: .55; } #screen-dashboard .dock-btn.gated:not(.primary) span { color: #8a8a84; } #screen-dashboard .dock-btn.gated .dock-gate { display: block; position: absolute; top: -4px; right: -4px; background: #fff; border-radius: 50%; width: 15px; height: 15px; font-size: 9px; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); margin: 0; } #screen-dashboard .dock-btn .dock-ico { position: relative; } @media (max-height: 470px) { #screen-dashboard .dashboard-play { bottom: calc(6px + 58px); min-height: 64px; } } #screen-dashboard .dock-btn.gated:not(.primary) .dock-ico::after { content: '🔒'; position: absolute; top: -5px; right: -5px; font-size: 9px; background: #fff; border-radius: 50%; width: 15px; height: 15px; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* ================================================================ HUD APS REBALANCE (permintaan user + panah foto): 1. Stat kills + 2 currency → TENGAH ATAS (grouping ala RoK); currency punya tombol "+" → modal cara mendapatkan. 2. PAUSE pindah ke kluster kanan-bawah (dekat grid skill). 3. Kotak/opacity di belakang ikon skill TERKUNCI-pos terbuka dihapus: ikon langsung di lantai (tanpa hex face putih). 4. Teks pada tombol PULSE dihapus (markup) — ruang ikon lebih lega. ================================================================ */ /* --- 1) TOP CENTER: kills + currency + wave/timer satu baris --------- */ #screen-hud .hud-top { grid-template-columns: auto 1fr auto; } #screen-hud .hud-kills-wrap { order: 2; } #screen-hud .hud-center { order: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; } #screen-hud .hud-currency-run { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; pointer-events: auto; background: rgba(255,253,244,.9); border-radius: 999px; padding: 3px 7px 3px 4px; font-weight: 900; color: #2f7f74; box-shadow: 0 2px 6px rgba(0,0,0,.12); } #screen-hud .hud-currency-run img { width: 18px; height: 18px; } #screen-hud .hud-currency-run .cur-plus { width: 16px; height: 16px; border: none; border-radius: 50%; cursor: pointer; pointer-events: auto; background: linear-gradient(160deg, #2f9c8f, #26796e); color: #fff; font: 900 12px/15px var(--font); padding: 0; margin-left: 2px; box-shadow: 0 1px 0 rgba(0,0,0,.2); } #screen-hud .hud-currency-run .cur-plus:hover { filter: brightness(1.08); } #screen-hud .hud-imu-run { background: rgba(255,247,214,.94); color: #a2741c; } /* --- 2) PAUSE → kluster kanan-bawah (arah panah foto) ----------------- */ #screen-hud #btn-pause { position: absolute; right: 148px; bottom: 96px; z-index: 8; width: 34px; height: 34px; min-height: 34px; padding: 7px; border-radius: 10px; background: rgba(255,253,244,.92); border: 0; box-shadow: 0 3px 8px rgba(0,0,0,.18); pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; } #screen-hud #btn-pause img { width: 16px; height: 16px; } #screen-hud #btn-pause:active { transform: translateY(2px) scale(.95); } /* --- 3) Kotak di belakang skill 1 & 2 (terbuka) dihilangkan ---------- */ /* Hex face putih/solid + drop-shadow HANYA untuk slot yang MASIH terkunci. Yang terbuka: ikon polos + ring warna tipis (agar tertukar tidak terpikir tombol dalam kotak). */ #screen-hud .ability-btn:not(.locked) .sk-plate .pl-face { opacity: 0; } #screen-hud .ability-btn:not(.locked) .sk-plate .pl-shine { opacity: 0; } #screen-hud .ability-btn:not(.locked) .sk-plate .pl-ink { opacity: 0; } #screen-hud .ability-btn:not(.locked) .sk-plate .pl-rim { opacity: .42; } #screen-hud .ability-btn:not(.locked) .sk-plate { filter: drop-shadow(0 2px 0 rgba(18,63,58,.28)) drop-shadow(0 4px 8px rgba(18,63,58,.16)); } /* --- 4) PULSE: label teks dihapus — ikon besar saja ----------------- */ #screen-hud .pulse-btn .pulse-claw { transform: scale(1.28); } /* --- Modal panduan currency ------------------------------------------- */ .curguide-box { max-width: 400px; text-align: left; } .curguide-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .curguide-head .curguide-icon { width: 44px; height: 44px; } .curguide-head .modal-title { margin: 0; } .curguide-head .modal-sub { margin: 2px 0 0; font-size: 12px; color: var(--teal-dark); } .curguide-tasks { margin: 6px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .curguide-tasks li { font-size: 12.5px; line-height: 1.45; color: #355; } .curguide-tasks li b { color: var(--teal-dark); } .curguide-foot { text-align: right; } /* Obxecario: penyesuaian ruang mungil (tetap efisien di HP lanskap) */ @media (max-height: 470px) { #screen-hud #btn-pause { right: 128px; bottom: 78px; width: 30px; height: 30px; min-height: 30px; padding: 6px; } #screen-hud #btn-pause img { width: 14px; height: 14px; } #screen-hud .hud-currency-run { font-size: 13px; padding: 3px 8px 3px 4px; } #screen-hud .hud-currency-run img { width: 17px; height: 17px; } #screen-hud .hud-currency-run .cur-plus { width: 15px; height: 15px; font-size: 11px; line-height: 15px; } } @media (max-width: 700px) { #screen-hud #btn-pause { right: 112px; bottom: 72px; } } /* ================================================================ TUTORIAL v2 — jari & bubble DIDIAMKAN ke posisi elemen nyata (rect) Langkah menunjuk langsung ke tombol yang sebenarnya (bukan CSS hard-code yang bergeser setiap kali HUD dievolusikan). ================================================================ */ #screen-hud .tut-ring { position: absolute; pointer-events: none; z-index: 7; border: 3px dashed rgba(53, 224, 200, .9); border-radius: 14px; animation: tut-ring-pulse 1.2s ease-in-out infinite; } @keyframes tut-ring-pulse { 0%, 100% { opacity: .9; box-shadow: 0 0 0 0 rgba(53,224,200,.45); } 50% { opacity: .55; box-shadow: 0 0 0 10px rgba(53,224,200,0); } } #screen-hud .tut-finger-anim { z-index: 7; margin-left: -13px; margin-top: -13px; background: rgba(53, 224, 200, .92); border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: tut-tap 1s ease-in-out infinite; } #screen-hud .tut-finger-drag { animation: tut-drag-move 1.6s ease-in-out infinite; } @keyframes tut-drag-move { 0%, 100% { transform: translate(0,0) scale(1); opacity: .95; } 55% { transform: translate(var(--tut-dx, 60px), var(--tut-dy, -40px)) scale(1.08); opacity: .8; } } #screen-hud .tut-bubble.tut-below::after { bottom: auto; top: -12px; border-top-color: transparent; border-bottom-color: var(--teal); } #screen-hud .tut-bubble .tut-next { display: block; margin: 8px auto 0; pointer-events: auto; background: var(--teal); color: #fff; border: 0; border-radius: 999px; font: 900 11px/1 var(--font); letter-spacing: .1em; padding: 7px 16px; } #screen-hud .tut-bubble .tut-next:active { transform: scale(.95); } #screen-hud .tut-bubble span { pointer-events: none; } #screen-hud .tut-skip { pointer-events: auto; } /* ---------- HUD TOP-CENTER GROUP (arsip: panah user #1) ---------- */ #screen-hud .hud-top { display: flex; align-items: flex-start; justify-content: center; pointer-events: none; gap: 6px; } #screen-hud .hud-center { display: flex !important; flex-direction: row !important; /* override warisan kolom */ align-items: center; gap: 6px; flex-wrap: nowrap; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0; pointer-events: none; max-width: 96vw; } #screen-hud .hud-center > * { pointer-events: auto; } #screen-hud .hud-kills { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,253,244,.9); border-radius: 999px; padding: 3px 10px 3px 6px; font-weight: 900; color: #c25e46; box-shadow: 0 2px 6px rgba(0,0,0,.1); } #screen-hud .hud-kills img { width: 15px; height: 15px; } #screen-hud .hud-center .wave-pill, #screen-hud .hud-center .timer-chip { box-shadow: 0 2px 6px rgba(0,0,0,.1); } /* Equity-stage chip (Polos → Equity 1..4) sebagai satu pill berdampingan */ #screen-hud .hud-center .hud-equity-stage { position: static !important; background: rgba(255,253,244,.9); color: var(--teal-dark); border-radius: 999px; padding: 3px 10px; font-weight: 900; font-size: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.1); white-space: nowrap; } @media (max-height: 470px) { #screen-hud .hud-center { gap: 4px; } #screen-hud .hud-center .hud-equity-stage { font-size: 10.5px; padding: 3px 9px; } #screen-hud .hud-kills { font-size: 13px; padding: 3px 10px 3px 6px; } #screen-hud .hud-kills img { width: 15px; height: 15px; } } #screen-hud .hud-top { left: 0; right: 0; width: 100%; justify-content: center; } #screen-hud .hud-center { flex: 0 0 auto; margin: 0 auto; width: auto !important; justify-content: center; } #screen-hud .curguide-box { max-height: calc(100vh - 28px); display: flex; flex-direction: column; } #screen-hud .curguide-box .curguide-tasks { overflow-y: auto; min-height: 0; margin-bottom: 8px; } #screen-hud .curguide-box .curguide-foot { flex-shrink: 0; } @media (max-height: 470px) { #screen-hud .curguide-box .modal-title { font-size: 17px; } #screen-hud .curguide-tasks { gap: 4px; } #screen-hud .curguide-tasks li { font-size: 11.5px; } } /* ---------- KLUSTER BAWAH: pause + menu regu di bawah arc skill ---------- */ #screen-hud #btn-pause { right: 190px; bottom: 8px; } #screen-hud .hud-menu2-toggle { right: 250px; bottom: 8px; bottom: 8px; } #screen-hud .hud-menu2-toggle { right: 250px !important; bottom: 8px !important; } #screen-hud .hud-game-menu2 { right: 250px; bottom: 56px; top: auto !important; } @media (max-height: 470px) { #screen-hud #btn-pause { right: 166px; bottom: 8px; } #screen-hud .hud-menu2-toggle { right: 226px !important; bottom: 8px !important; } #screen-hud .hud-game-menu2 { right: 226px; bottom: 50px; top: auto !important; } } #screen-hud .hud-center .hud-equity-stage { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap; } /* ---------- CURGUIDE: tombol 'Mengerti' jangan terpotong di layar pendek ---------- */ #screen-curguide .modal-box { max-height: calc(100vh - 28px); display: flex; flex-direction: column; } #screen-curguide .modal-box .curguide-tasks { overflow-y: auto; min-height: 0; margin-bottom: 6px; } #screen-curguide .curguide-foot { flex-shrink: 0; } @media (max-height: 470px) { #screen-curguide .modal-box .modal-title { font-size: 17px; margin-bottom: 2px !important; } #screen-curguide .curguide-head { margin-bottom: 4px; gap: 8px; } #screen-curguide .curguide-head .curguide-icon { width: 34px; height: 34px; } #screen-curguide .curguide-tasks { gap: 3px; padding-left: 12px; } #screen-curguide .curguide-tasks li { font-size: 11px; line-height: 1.3; } #screen-curguide .modal-box { padding: 10px 14px 12px; gap: 4px; } } /* ===================================================================== * Sprint 5.26 — DASHBOARD §11.1: hero tetap 40% + medan berdenyut, MAIN * coral, dock 5 [Hero][Tas][MAIN][Squad][Lab Genom], bar Mitosis, kapsul. * ===================================================================== */ #screen-dashboard .hero-fixed { height: clamp(220px, 40vh, 340px); min-height: 220px; position: relative; overflow: hidden; border-radius: 18px; } /* Medan berdenyut: dua cincin mengembang dari tengah panggung (warna hero). */ #screen-dashboard .medan-pulse { --medan: #4ae3c2; position: absolute; left: 50%; top: 55%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--medan) 26%, transparent) 0%, transparent 70%); } #screen-dashboard .medan-pulse::before, #screen-dashboard .medan-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--medan); animation: medan-ping 2.4s ease-out infinite; } #screen-dashboard .medan-pulse::after { animation-delay: 1.2s; } @keyframes medan-ping { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(2.1); opacity: 0; } } /* MAIN coral: tombol aksi terkuat di layar. */ #screen-dashboard .dashboard-play.main-coral { background: linear-gradient(165deg, var(--coral) 0%, #e86a4c 60%, #d5573a 100%); box-shadow: 0 11px 0 rgba(182,76,52,.28), 0 16px 26px rgba(233,106,76,.35); color: #fff; } /* Dock 5: MAIN tengah terangkat. */ #screen-dashboard .dock.dock-5 { grid-template-columns: repeat(5, 1fr); align-items: end; } #screen-dashboard .dock-btn.dock-main { margin-top: -18px; } #screen-dashboard .dock-btn.dock-main .dock-ico { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(165deg, var(--coral), #d5573a); box-shadow: 0 6px 14px rgba(233,106,76,.45); } #screen-dashboard .dock-btn.dock-main .dock-ico img { width: 30px; height: 30px; filter: brightness(0) invert(1); } #screen-dashboard .dock-btn.dock-main span:last-child { color: var(--coral-deep, #c24a2e); font-weight: 900; } #screen-dashboard .dock-btn .dock-ico { position: relative; } #screen-dashboard .dock-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--cream, #f7f3e8); } /* Bar Siklus Mitosis. */ #screen-dashboard .bp-bar { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(47,156,143,.35); background: linear-gradient(120deg, rgba(47,156,143,.14), rgba(47,156,143,.05)); cursor: pointer; color: inherit; font: inherit; text-align: left; } #screen-dashboard .bp-tag { font-size: 10px; font-weight: 900; letter-spacing: .08em; color: var(--teal-deep); white-space: nowrap; } #screen-dashboard .bp-lv { font-size: 14px; white-space: nowrap; } #screen-dashboard .bp-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(20,88,79,.15); overflow: hidden; display: block; } #screen-dashboard .bp-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), #4ae3c2); } #screen-dashboard .bp-pct { font-size: 12px; font-weight: 800; color: var(--teal-deep); } /* Kartu kapsul kondisional. */ #screen-dashboard .kapsul-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 2px dashed #c9a227; background: linear-gradient(120deg, rgba(245,198,79,.22), rgba(245,198,79,.06)); cursor: pointer; color: inherit; font: inherit; text-align: left; } #screen-dashboard .kapsul-ico { width: 34px; height: 34px; } #screen-dashboard .kapsul-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; } #screen-dashboard .kapsul-txt small { opacity: .75; } #screen-dashboard .kapsul-go { font-weight: 900; color: #9a7b1a; white-space: nowrap; } #screen-dashboard #strain-slot { margin-top: 10px; } #screen-dashboard #strain-slot:empty { display: none; } /* ===================================================================== * Sprint 5.27 — HUD §11.2: dua bar semi-opaque. * Atas: HP/wave/kill/timer/BK/G (+ chip Diferensiasi + boss). F25 yang * menyembunyikan .hud-center dicabut di sini (kaskade: blok ini paling akhir). * Bawah: misi + item (buff) tengah-bawah; Pulse+cd tetap kanan-bawah. * ===================================================================== */ #screen-hud .hud-center { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px !important; padding: 6px 14px !important; min-width: 0 !important; max-width: min(94vw, 720px); margin: 0 auto; background: rgba(255, 253, 244, 0.82); border: 1.5px solid rgba(47, 156, 143, 0.35); border-radius: 16px; box-shadow: 0 3px 12px rgba(31, 95, 87, 0.18); backdrop-filter: blur(2px); } /* HP di bar atas: ringkas horizontal (portrait kecil + bar). */ #screen-hud .hud-center .hud-hero-status { position: static !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; pointer-events: auto; gap: 6px !important; } #screen-hud .hud-center .avatar-wrap { width: 34px !important; height: 34px !important; flex-basis: 34px !important; } #screen-hud .hud-center .hud-portrait { width: 34px !important; height: 34px !important; } #screen-hud .hud-center .level-badge { font-size: 8px !important; padding: 1px 5px !important; bottom: -4px !important; right: -7px !important; } #screen-hud .hud-center .status-bars { width: 110px !important; } #screen-hud .hud-center .hud-equity-stage { top: -11px; } #screen-hud .hud-center .hud-currency-run { pointer-events: auto; } #screen-hud .hud-center .hud-boss-wrap { flex-basis: 100%; } /* Bar bawah: misi + buff item, tengah-bawah, semi-opaque. */ #screen-hud .hud-mission { top: auto !important; bottom: 56px; background: rgba(255, 253, 244, 0.85); } #screen-hud .hud-buffs { top: auto !important; bottom: 14px; left: 90px !important; right: 200px !important; background: rgba(255, 253, 244, 0.6); border-radius: 12px; padding: 3px 8px; } #screen-hud .hud-buffs:empty { display: none; } /* ===================================================================== * Sprint 5.28a — PRINSIP §11.4: dock SOLID GELAP (#1a2332), ikon outline * putih, label putih bold. Menimpa dock terang RoK di atas (kaskade). * ===================================================================== */ #screen-dashboard .dock.dock-5 { background: #1a2332; border-radius: 18px 18px 0 0; max-width: none; margin: 4px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(10, 15, 25, 0.35); } #screen-dashboard .dock.dock-5 .dock-btn .dock-ico { background: rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); } #screen-dashboard .dock.dock-5 .dock-btn .dock-ico img, #screen-dashboard .dock.dock-5 .dock-btn .dock-ico svg { filter: brightness(0) invert(1); } #screen-dashboard .dock.dock-5 .dock-btn > span:last-child { color: #fff !important; font-weight: 900; text-shadow: none; } #screen-dashboard .dock.dock-5 .dock-btn.dock-main .dock-ico { background: linear-gradient(165deg, var(--coral), #d5573a); box-shadow: 0 6px 14px rgba(233, 106, 76, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.9); } #screen-dashboard .dock.dock-5 .dock-btn.dock-main span:last-child { color: #ffd9cd !important; } #screen-dashboard .dock.dock-5 .dock-badge { box-shadow: 0 0 0 2px #1a2332; } /* Sprint 5.28a — PRINSIP §11.4: dua bar HUD gelap (#0d1117 @75%). */ #screen-hud .hud-center { background: rgba(13, 17, 23, 0.75) !important; border-color: rgba(255, 255, 255, 0.16) !important; } #screen-hud .hud-center .wave-pill { background: linear-gradient(180deg, #7fe3d0, #2fb3a2) !important; -webkit-background-clip: text !important; background-clip: text !important; } #screen-hud .hud-center .timer-chip { color: #cfe9e4 !important; } #screen-hud .hud-center .timer-chip img { filter: brightness(0) invert(1); } #screen-hud .hud-center .hud-kills { color: #ff8f9a !important; } #screen-hud .hud-center .hud-kills img { filter: brightness(0) invert(1); } #screen-hud .hud-center .hud-currency-run { color: #f5c64f !important; } #screen-hud .hud-center .hud-hp-text { color: #fff !important; } #screen-hud .hud-center .hp-row .heart { filter: brightness(0) invert(1); } #screen-hud .hud-mission { background: rgba(13, 17, 23, 0.75) !important; border-color: rgba(127, 227, 208, 0.5) !important; } #screen-hud .hud-mission-text { color: #d9f5ef !important; } #screen-hud .hud-buffs { background: rgba(13, 17, 23, 0.6) !important; } /* ============ Sprint 5.28 — §11.3 RUN SELESAI (gameover) ============ */ .go-headline{margin:2px 0 8px;font-size:12px;font-weight:700;color:#9fb2cc;text-align:center} /* Hook box "kurang sedikit lagi" (§10.2 hook) */ .go-hook{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:rgba(13,17,23,.78); border:1px solid rgba(74,227,194,.35);display:flex;flex-direction:column;gap:6px} .go-hook-title{font-size:11px;letter-spacing:.08em;color:#4ae3c2} .go-hook-empty{font-size:12px;color:#9fb2cc} .go-hook-row{display:grid;grid-template-columns:1fr 64px 62px;gap:8px;align-items:center;font-size:12px} .go-hook-label{color:#e8eef7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .go-hook-track{display:block;height:8px;border-radius:99px;background:#242e42;overflow:hidden} .go-hook-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f9c8f,#4ae3c2)} .go-hook-pct{color:#ffd93d;text-align:right;font-size:12px} /* Rel hero geser */ .go-heroes-head{margin:10px 0 6px;font-size:10px;letter-spacing:.1em;color:#9fb2cc;text-align:center;font-weight:800} .go-heroes{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin} .go-hero{position:relative;flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 4px 6px;border-radius:12px;background:rgba(26,35,50,.9);border:1px solid #2c3a55; color:#e8eef7;cursor:pointer} .go-hero.selected{border-color:#ffd93d;box-shadow:0 0 0 1px #ffd93d} .go-hero.last .go-portrait{outline:2px solid #4ae3c2;outline-offset:2px} .go-hero.locked{filter:grayscale(1);opacity:.55} .go-medan{width:30px;height:30px;margin-bottom:-24px;z-index:0} .go-medan.ring{border:2px solid var(--medan);border-radius:50%} .go-medan.wedge{border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:24px solid var(--medan);opacity:.6;width:0;height:0;margin-bottom:-20px} .go-medan.dots{border:2px dotted var(--medan);border-radius:50%} .go-portrait{width:34px;height:34px;border-radius:50%;background:#0d1117;z-index:1;position:relative} .go-name{font-size:9px;font-weight:700;white-space:nowrap;max-width:70px;overflow:hidden;text-overflow:ellipsis} .go-mark{font-size:10px;color:#4ae3c2} .go-hero.locked .go-mark{color:#9fb2cc} /* ============ Sprint 5.29 — Font self-host (offline PWA, tanpa CDN) ============ TODO-ASET: jatuhkan file woff2 ke assets/fonts/ (Binari tidak bisa diunduh di sandbox ini — firewall). Sampai file ada, stack sistem rounded dipakai. Rekomendasi: Nunito-ExtraBold (heading) + Nunito-Black atau "Baloo 2" (angka). */ @font-face{ font-family:'Imunverse Head';font-weight:800 900;font-style:normal;font-display:swap; src:url('../assets/fonts/imunverse-head.woff2') format('woff2'); } @font-face{ font-family:'Imunverse Num';font-weight:700 900;font-style:normal;font-display:swap; src:url('../assets/fonts/imunverse-num.woff2') format('woff2'); } :root{ --font-head:'Imunverse Head','Nunito','Quicksand','Varela Round',ui-rounded,'SF Pro Rounded',system-ui,sans-serif; --font-num:'Imunverse Num','Nunito','Baloo 2',ui-rounded,'SF Pro Rounded',system-ui,sans-serif; } /* Heading + angka memakai font self-host */ h1,h2,h3,.gameover-title,.card-title,.dock-label,.btn,.quest-heading,.go-hook-title, .missions-card .card-title,.hud-label,.hud-value,#hud-timer-text,#hud-wave,#hud-kills, #hud-currency,#hud-imu,.summary-cell b,#gameover-currency-num,.bp-text,.reset-chip, .go-hook-pct,.lvlup-title,.shop-title{font-family:var(--font-head)} .hud-value,#hud-timer-text,#hud-wave,#hud-kills,#hud-currency,#hud-imu,.summary-cell b, #gameover-currency-num,.bp-text,.go-hook-pct,.mission-more{font-family:var(--font-num);font-variant-numeric:tabular-nums} /* ============ Sprint 5.30 — §10.4 Countdown reset harian ============ */ .reset-chip{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:99px;font-size:11px; font-weight:800;background:rgba(47,156,143,.16);border:1px solid rgba(74,227,194,.4);color:#4ae3c2; white-space:nowrap;vertical-align:middle} .reset-chip.urgent{background:rgba(242,130,92,.18);border-color:#f2825c;color:#ff9d7a;animation:resetPulse 1.2s infinite} @keyframes resetPulse{50%{box-shadow:0 0 0 4px rgba(242,130,92,.25)}} .go-reset{margin:6px 0 2px;text-align:center} .go-reset .reset-chip{margin-left:0} .active-quests .reset-chip{margin:0 0 6px} /* ============ Sprint 6.31 — §10.1 Comeback ============ */ .comeback-box{text-align:center} .comeback-emoji{font-size:44px;line-height:1} .comeback-title{font-size:20px;font-weight:900;color:#ffd93d;letter-spacing:.04em} .comeback-desc{font-size:13px;color:#9fb2cc} .comeback-reward{font-size:14px;font-weight:800;color:#4ae3c2} /* ============ Sprint 6.35 — Banner PASANG (PWA) ============ */ .pwa-banner{display:flex;align-items:center;gap:10px;margin-top:10px} .pwa-ico{width:40px;height:40px;border-radius:12px} .pwa-text{flex:1;display:flex;flex-direction:column;font-size:12px} .pwa-text span{color:#9fb2cc} .pwa-btn{padding:8px 16px;min-height:0;font-size:13px} .pwa-x{background:none;border:none;color:#9fb2cc;font-size:16px;cursor:pointer;padding:6px}