/* ========================================================================== LAYOUT FIX v14.3 — dimuat SETELAH style.css Akar masalah: game.html memakai ±40 class (modal-backdrop, ad-video-*, btn-*-action, dst.) yang tidak pernah didefinisikan di style.css, sehingga modal jatuh ke alur flex dan menggencet arena game. ========================================================================== */ /* ---------- Dasar anti-meluap (semua halaman) ---------- */ html { overflow-x: clip; } *, *::before, *::after { box-sizing: border-box; } img, canvas, video, svg { max-width: 100%; } p, h1, h2, h3, h4, span, a, button { overflow-wrap: anywhere; } /* ---------- Portal (index.html) ---------- */ /* Strip tab bisa digeser sentuh, tanpa scrollbar */ *:has(> .tab-btn) { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } *:has(> .tab-btn)::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; } /* Banner anchor bawah tidak lagi menutupi konten paling bawah */ body:not(.game-page-body) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* ---------- Game (game.html) ---------- */ .game-page-body { overflow-x: hidden; } .game-arena-wrapper { min-width: 0; margin-inline: auto; } .game-header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .text-center { text-align: center; } .text-neon { color: var(--primary); text-shadow: 0 0 8px var(--primary-glow); } .canvas-glow-ring { pointer-events: none; } /* Modal: sekarang keluar dari alur (fixed) seperti .modal-overlay di portal */ .modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 10, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; } .modal-backdrop .modal-card { margin: auto; } .modal-icon-badge { font-size: 38px; line-height: 1; margin-bottom: 6px; } .modal-badge-ad { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #CBD5E1; font-size: 9px; font-weight: 800; } .modal-title { margin: 0 0 6px; color: var(--primary); font-size: 16px; line-height: 1.3; } .modal-desc { margin: 0 0 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; } .interstitial-logo { margin: 6px 0; font-size: 40px; line-height: 1; } .interstitial-timer-pill { display: block; width: max-content; margin: 0 auto 14px; padding: 6px 14px; border: 1px solid var(--border-gold); border-radius: 999px; background: rgba(255, 202, 40, 0.08); color: var(--gold); font-size: 11px; font-weight: 800; } .gameover-score-box { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 12px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel-bg-subtle); } .gameover-score-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.04em; } .gameover-score-val { color: var(--gold); font-size: 28px; font-weight: 800; line-height: 1.1; } .mrec-slot-container { display: flex; justify-content: center; margin-bottom: 12px; } .mrec-slot-container:empty { display: none; } .modal-actions-stacked { display: flex; flex-direction: column; gap: 8px; } /* Tombol */ .btn-primary-action, .btn-secondary-action, .btn-outline-action, .btn-cta-sponsor, .btn-close-interstitial, .btn-cancel-fail { display: block; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; } .btn-primary-action, .btn-cta-sponsor { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #03150D; } .btn-secondary-action, .btn-close-interstitial, .btn-cancel-fail { background: var(--panel-bg-elevated); color: var(--text-main); border-color: var(--border-subtle); } .btn-outline-action { background: transparent; color: var(--text-muted); border-color: var(--border-subtle); } .btn-close-interstitial:disabled, .ad-btn-dismiss:disabled { opacity: 0.5; cursor: not-allowed; } /* Pemutar video iklan di game.html */ .ad-video-container { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; } .ad-video-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ad-badge-official { padding: 2px 8px; border-radius: 4px; background: var(--gold); color: #1A1200; font-size: 10px; font-weight: 800; } .ad-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #E2E8F0; font-size: 12px; font-weight: 700; } .ad-timer { padding: 3px 10px; border: 1px solid var(--border-gold); border-radius: 999px; color: var(--gold); font-size: 12px; font-weight: 800; } .ad-video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 12px; background: #000; } .ad-video-wrapper canvas, .ad-video-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ad-video-overlay { position: absolute; inset: 0; z-index: 2; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: rgba(2, 4, 8, 0.88); } .ad-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--primary); border-radius: 50%; animation: ad-fix-spin 0.9s linear infinite; } @keyframes ad-fix-spin { to { transform: rotate(360deg); } } .ad-status-title { color: #fff; font-size: 14px; font-weight: 700; } .ad-status-desc { max-width: 260px; color: var(--text-muted); font-size: 11px; } /* di game.html .ad-progress-bar = wadah, .ad-progress-fill = isi (di style.css .ad-progress-bar = isi) */ .ad-video-container .ad-progress-bar { width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.1); transition: none; } .ad-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--primary)); transition: width 0.2s linear; } .ad-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ad-status-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; } .ad-batch-indicator { color: #E2E8F0; font-weight: 700; } .ad-reward-label { color: var(--gold); font-weight: 700; } .ad-btn-dismiss { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--panel-bg-elevated); color: var(--text-main); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } /* Toast di game.html */ .toast-notification { position: fixed; top: 64px; left: 50%; z-index: 10001; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 10px 14px; text-align: center; border: 1px solid var(--border-subtle); border-radius: 10px; background: #0E1422; color: var(--text-main); font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } .toast-notification.toast-danger { border-color: var(--border-danger); } .toast-notification.toast-gold { border-color: var(--border-gold); color: var(--gold); } @media (prefers-reduced-motion: reduce) { .ad-spinner { animation: none; } } /* Kanvas di game.html mengisi wadahnya (aturan #game-canvas milik portal membatasinya 340px) */ .game-canvas-container #game-canvas { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; } /* Slot MREC 300x250: tetap dalam kotak, rata tengah */ .mrec-ad-box { width: 100%; max-width: 300px; margin: 0 auto; padding: 10px 12px; text-align: center; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel-bg-subtle); } .mrec-ad-header { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-muted); font-size: 9px; } .mrec-ad-badge { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font-weight: 800; }