/* ── Febles Battle — layout shell ────────────────────────────────────────── */ #battle-shell { position: relative; width: 100%; min-height: var(--game-height, 100dvh); display: grid; place-items: center; font-family: var(--font-main); background: var(--clr-tile, #F6ECDC); } /* ── Fullscreen overlays (lobby, join, countdown) ──────────────────────── */ .btl-screen { position: fixed; inset: 0; top: var(--site-header-height, 0px); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; overflow-y: auto; padding-top: max(calc(env(safe-area-inset-top) + 16px), 20px); padding-right: 20px; padding-bottom: max(calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px), 20px); padding-left: 20px; /* Warm overlay + quiet tile texture */ background: linear-gradient(rgba(246, 236, 220, 0.88), rgba(246, 236, 220, 0.88)), url("img/backgrounds/tile.png") center / 260px auto, #F6ECDC; backdrop-filter: none; -webkit-backdrop-filter: none; } .btl-screen[hidden] { display: none; } /* While the soft keyboard is open, keep content anchored at center rather than drifting upward with the shrunken viewport. The JS keyboard manager adds this class to on focusin and removes it after focusout + reset. */ html.keyboard-open .btl-screen { justify-content: flex-start; } #battle-splash { background: linear-gradient(rgba(246, 236, 220, 0.88), rgba(246, 236, 220, 0.88)), url("img/backgrounds/tile.png") center / 260px auto, #F6ECDC; } .btl-splash-panel { width: min(340px, calc(100vw - 40px)); display: grid; justify-items: center; gap: 16px; color: var(--clr-navy, #0E1F3A); text-align: center; } .btl-splash-logo { display: block; width: min(240px, 64vw); max-width: 100%; height: auto; filter: drop-shadow(0 3px 6px rgba(14, 31, 58, 0.15)); } .btl-splash-panel p { margin: 0; color: rgba(14, 31, 58, 0.6); font-family: var(--font-main); font-size: 15px; font-weight: 600; line-height: 1.4; } .btl-loading-pills { display: flex; gap: 9px; } .btl-loading-pills span { display: block; width: 44px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, transparent 38%, rgba(0,0,0,0.20) 100%), #b91c1c; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.24), 0 8px 14px rgba(0,0,0,0.28); animation: btl-loading-pill 0.72s ease-in-out infinite alternate; } .btl-loading-pills span:nth-child(2) { background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, transparent 38%, rgba(0,0,0,0.20) 100%), #1d4ed8; animation-delay: 0.12s; } .btl-loading-pills span:nth-child(3) { background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, transparent 38%, rgba(0,0,0,0.20) 100%), #166534; animation-delay: 0.24s; } @keyframes btl-loading-pill { from { transform: translateY(0) rotate(-8deg); opacity: 0.62; } to { transform: translateY(-10px) rotate(8deg); opacity: 1; } } .btl-panel { position: relative; box-sizing: border-box; width: min(360px, calc(100vw - 40px)); max-height: calc(var(--app-height, 100dvh) - max(env(safe-area-inset-top), 0px) - max(env(safe-area-inset-bottom), 0px) - 56px); overflow-y: auto; background: var(--clr-tile, #F6ECDC); border: 1px solid rgba(139, 90, 43, 0.18); border-radius: 20px; padding: 28px 22px 24px; box-shadow: 0 8px 32px rgba(14, 31, 58, 0.14), inset 0 1px 0 rgba(255,255,255,0.62); text-align: center; display: flex; flex-direction: column; gap: 14px; color: var(--clr-navy, #0E1F3A); line-height: 1.25; } .btl-eyebrow { margin: 0; font-family: var(--font-main); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--clr-brown, #8B5A2B); text-transform: uppercase; } .btl-logo-eyebrow { display: flex; justify-content: center; line-height: 1; } .btl-panel-logo { display: block; width: clamp(120px, 34vw, 180px); max-width: 100%; height: auto; max-height: 52px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(14, 31, 58, 0.12)); } .btl-panel h2 { margin: 0; font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 24px; font-weight: 900; line-height: 1.1; color: var(--clr-navy, #0E1F3A); } .btl-muted { margin: 0; font-family: var(--font-main); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--muted, #5a6a82); } .btl-home-panel { overflow: visible; } /* ── Setup panels: all use the base warm card from .btl-panel ─────────── */ #battle-intro .btl-panel, #battle-name .btl-panel, #battle-create .btl-panel, #battle-join .btl-panel, #battle-tap .btl-panel, #battle-lobby .btl-panel, #battle-howtoplay .btl-panel, #battle-results .btl-results-panel { isolation: isolate; overflow-x: hidden; overflow-y: auto; } /* ── How-to-play panel ─────────────────────────────────────────────────────── */ .btl-howtoplay-note { font-style: italic; } /* Malifetes list */ .btl-howtoplay-malifetes { display: flex; flex-direction: column; gap: 7px; } .btl-malifeta-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(255, 253, 246, 0.9); border-radius: 12px; border: 1px solid rgba(139, 90, 43, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(14,31,58,0.05); text-align: left; } .btl-malifeta-icon { flex-shrink: 0; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(14,31,58,0.14)); } .btl-malifeta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .btl-malifeta-text strong { font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 14px; font-weight: 800; color: var(--clr-navy, #0E1F3A); line-height: 1.15; } .btl-malifeta-text span { font-family: var(--font-main); font-size: 12px; font-weight: 600; color: var(--muted, #5a6a82); line-height: 1.35; } #battle-name .btl-field-label { color: rgba(14, 31, 58, 0.6); } #battle-name .btl-name-input { border-color: rgba(139, 90, 43, 0.25); background: rgba(255, 253, 246, 0.8); color: var(--clr-navy, #0E1F3A); } #battle-name .btl-name-input::placeholder { color: rgba(14, 31, 58, 0.35); } #battle-name .btl-name-input:focus { border-color: var(--clr-orange, #F08A1A); background: rgba(255, 253, 246, 0.95); } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btl-btn-primary { width: 100%; min-height: 52px; border-radius: 14px; border: 2px solid var(--clr-orange, #F08A1A); font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 17px; font-weight: 800; line-height: 1.15; cursor: pointer; transition: opacity 0.12s, transform 0.1s; color: var(--clr-navy, #0E1F3A); background: var(--clr-warm-yellow, #F4D68F); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 5px 16px rgba(240, 138, 26, 0.28); } .btl-btn-primary:active { transform: scale(0.97); opacity: 0.9; } .btl-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .btl-btn-secondary { width: 100%; min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(14, 31, 58, 0.15); font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 16px; font-weight: 700; line-height: 1.15; cursor: pointer; transition: opacity 0.12s, transform 0.1s; color: var(--clr-navy, #0E1F3A); background: var(--clr-card, #EDE0CA); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 10px rgba(14, 31, 58, 0.08); } .btl-btn-secondary:active { transform: scale(0.98); opacity: 0.78; } /* ── Home screen menu cards ────────────────────────────────────────────── */ .btl-menu-card { width: 100%; border-radius: 16px; padding: 14px 14px 14px 14px; color: var(--clr-navy, #0E1F3A); text-align: left; display: flex; align-items: center; justify-content: flex-start; gap: 14px; background: rgba(255, 253, 246, 0.95); border: 1.5px solid rgba(139, 90, 43, 0.14); box-shadow: 0 3px 12px rgba(14, 31, 58, 0.09), inset 0 1px 0 rgba(255,255,255,0.7); transition: transform 0.12s ease, box-shadow 0.12s ease; } .btl-menu-card:active { transform: scale(0.98); box-shadow: 0 1px 6px rgba(14, 31, 58, 0.08); } .btl-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .btl-menu-card strong { display: block; font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--clr-navy, #0E1F3A); } .btl-menu-card .btl-card-text span { display: block; font-family: var(--font-main); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted, #5a6a82); margin-top: 1px; } /* Arrow button on the right */ .btl-card-arrow { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(14, 31, 58, 0.1); display: flex; align-items: center; justify-content: center; position: relative; } .btl-card-arrow::after { content: ''; display: block; width: 8px; height: 8px; border-right: 2.5px solid var(--clr-navy, #0E1F3A); border-top: 2.5px solid var(--clr-navy, #0E1F3A); transform: rotate(45deg) translate(-1px, 1px); border-radius: 1px; } /* Primary card (juga en solitari) */ .btl-menu-card--quick { background: var(--clr-warm-yellow, #F4D68F); border-color: var(--clr-orange, #F08A1A); box-shadow: 0 5px 18px rgba(240, 138, 26, 0.24), inset 0 1px 0 rgba(255,255,255,0.55); } .btl-menu-card--quick .btl-card-arrow { background: var(--clr-orange, #F08A1A); } .btl-menu-card--quick .btl-card-arrow::after { border-color: #fff; } /* Tap card — hidden via [hidden] attribute on the element; CSS kept for reference */ .btl-menu-card--tap { display: none; } /* How-to-play card — same base style as other secondary cards */ .btl-menu-card--howtoplay { background: rgba(255, 253, 246, 0.95); border-color: rgba(139, 90, 43, 0.18); } /* ── Home screen brand section ─────────────────────────────────────────── */ .btl-home-panel { background: none; border: none; box-shadow: none; padding: 0; width: min(400px, calc(100vw - 32px)); max-width: none; max-height: none; overflow-y: visible; gap: 10px; } .btl-home-brand { text-align: center; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .btl-home-logo { display: block; height: clamp(52px, 14vw, 76px); width: auto; max-width: 72vw; filter: drop-shadow(0 2px 6px rgba(14, 31, 58, 0.12)); } .btl-home-title { margin: 0; font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: clamp(26px, 7vw, 36px); font-weight: 900; line-height: 1.05; color: var(--clr-navy, #0E1F3A); letter-spacing: 0.01em; } .btl-home-star { display: block; color: var(--clr-orange, #F08A1A); font-size: 18px; line-height: 1; } .btl-home-subtitle { margin: 0; font-family: var(--font-main); font-size: 16px; font-weight: 700; color: var(--clr-navy, #0E1F3A); line-height: 1.3; } .btl-highlight { color: var(--clr-orange, #F08A1A); font-weight: 800; } .btl-home-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* ── Join picker wrapper ───────────────────────────────────────────────── */ #battle-picker-wrap { margin: 4px 0; } #battle-join-status { font-family: var(--font-main); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--clr-brown, #8B5A2B); transition: color 0.2s; } #battle-join-status:empty { display: none; } #battle-join-status.btl-error { color: #c0392b; } /* ── Name input field ─────────────────────────────────────────────────── */ .btl-field { display: flex; flex-direction: column; gap: 6px; text-align: left; } .btl-field-label { font-family: var(--font-main); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-brown, #8B5A2B); } .btl-name-input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid rgba(139, 90, 43, 0.25); background: rgba(255, 253, 246, 0.8); color: var(--clr-navy, #0E1F3A); font-family: var(--font-main); font-size: 17px; font-weight: 600; outline: none; transition: border-color 0.15s, background 0.15s; } .btl-name-input::placeholder { color: rgba(14, 31, 58, 0.35); font-weight: 500; } .btl-name-input:focus { border-color: var(--clr-orange, #F08A1A); background: rgba(255, 253, 246, 0.97); } .btl-field-error { margin: 0; font-family: var(--font-main); font-size: 13px; font-weight: 600; color: #c0392b; } .btl-slot-reel { min-height: 96px; display: grid; place-items: center; } .btl-slot-reel.is-spinning { grid-template-columns: repeat(3, 1fr); gap: 8px; } .btl-slot-reel.is-spinning span { width: 72px; max-width: 24vw; height: 62px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 44%), linear-gradient(180deg, var(--clr-card-warm, #E9D9B7), var(--clr-card, #EDE0CA)); border: 1.5px solid rgba(139, 90, 43, 0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 5px 12px rgba(14, 31, 58, 0.1); animation: btl-lock-spin 0.42s linear infinite; } .btl-slot-reel.is-spinning span::before { content: ""; display: block; width: 44px; height: 44px; margin: 8px auto 0; background: url("img/ui/lock.png") center / contain no-repeat; opacity: 0.78; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.22)); } .btl-slot-reel.is-spinning span:nth-child(2) { animation-delay: 0.08s; } /* ── SetupIcon: reusable hand-drawn asset icon component ──────────────── */ /* * Usage: * Size variants: --sm (36px), --md (52px), --lg (68px) * Animations: data-anim="float" | data-anim="wiggle" */ .setup-icon { display: block; object-fit: contain; flex-shrink: 0; pointer-events: none; user-select: none; animation: setup-icon-enter 0.46s cubic-bezier(.34, 1.56, .64, 1) both; } .setup-icon--sm { width: 36px; height: 36px; } .setup-icon--md { width: 52px; height: 52px; } .setup-icon--lg { width: 68px; height: 68px; } /* Entrance: fade-in only (transform handled by idle animation) */ @keyframes setup-icon-enter { from { opacity: 0; } to { opacity: 1; } } /* Idle float: starts after entrance */ @keyframes setup-icon-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } } /* Idle wiggle: tiny rotation — hand-drawn feel */ @keyframes setup-icon-wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-2deg) translateY(-1px); } 60% { transform: rotate(1.5deg); } 80% { transform: rotate(-1deg); } } .setup-icon[data-anim="float"] { animation: setup-icon-enter 0.46s cubic-bezier(.34, 1.56, .64, 1) both, setup-icon-float 3.4s 0.5s ease-in-out infinite; } .setup-icon[data-anim="wiggle"] { animation: setup-icon-enter 0.46s cubic-bezier(.34, 1.56, .64, 1) both, setup-icon-wiggle 4.2s 0.5s ease-in-out infinite; } .btl-menu-card .setup-icon { flex-shrink: 0; margin: 0; } /* Panel hero icons: centered, bottom margin toward h2 */ .btl-panel-setup-icon { margin: 0 auto -2px; } .btl-slot-reel.is-spinning span:nth-child(3) { animation-delay: 0.16s; } .btl-code-actions { display: grid; gap: 8px; } /* Action buttons with icon + label */ .btl-action-button { display: flex; align-items: center; justify-content: center; gap: 10px; } .btl-action-button:disabled, .btl-action-button[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; pointer-events: none; filter: saturate(0.5); } /* Hand-drawn icon spans — 28px squares, use PNG assets */ .btl-action-icon { flex-shrink: 0; display: block; width: 28px; height: 28px; background: center / contain no-repeat; } .btl-action-icon--copy { background-image: url('img/ui/copia.png'); } .btl-action-icon--tap { background-image: url('img/ui/telefons.png'); } .btl-action-icon--room { background-image: url('img/ui/codi.png'); } /* Back arrow — drawn with CSS, no asset needed */ .btl-action-icon--back { width: 22px; height: 22px; position: relative; } .btl-action-icon--back::before { content: ''; position: absolute; left: 3px; top: 50%; width: 14px; height: 14px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-50%) rotate(45deg); border-radius: 2px; } .btl-copy-code-btn { min-height: 42px; font-size: 13px; } .btl-tap-hint { margin: -2px 0 0; font-family: var(--font-main); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--muted, #5a6a82); } .btl-code-actions .btl-tap-hint { margin: 0; } @keyframes btl-lock-spin { 0% { transform: translateY(-4px); filter: brightness(0.72); } 50% { transform: translateY(4px); filter: brightness(1.18); } 100% { transform: translateY(-4px); filter: brightness(0.72); } } /* ── Lobby ─────────────────────────────────────────────────────────────── */ #battle-lobby .btl-panel { gap: 16px; } #battle-lobby .btl-eyebrow { margin-bottom: -4px; } #battle-lobby h2 { font-size: clamp(32px, 8vw, 46px); } #battle-code-display { margin: 0 auto; width: min(100%, 330px); max-width: 330px; box-sizing: border-box; padding: 8px 10px 12px; border-radius: 20px; background: var(--clr-card, #EDE0CA); border: 1px solid rgba(139, 90, 43, 0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(14, 31, 58, 0.1); color: var(--clr-navy, #0E1F3A); font-size: clamp(22px, 6vw, 32px); font-weight: 900; line-height: 1.1; } #battle-code-display .rc-row { gap: clamp(9px, 2.4vw, 14px); } #battle-code-display .rc-reveal-wheel, #battle-create-reel .rc-reveal-wheel { height: 88px; border-radius: 16px; background: rgba(255, 253, 246, 0.97); border-color: var(--clr-orange, #F08A1A); box-shadow: 0 0 0 4px rgba(240, 138, 26, 0.12), 0 6px 14px rgba(14, 31, 58, 0.1), inset 0 1px 0 rgba(255,255,255,0.9); } #battle-code-display .rc-reveal-wheel.rc-locked, #battle-create-reel .rc-reveal-wheel.rc-locked { border-color: var(--clr-orange, #F08A1A); box-shadow: 0 0 0 5px rgba(240, 138, 26, 0.18), 0 8px 18px rgba(14, 31, 58, 0.12), inset 0 1px 0 rgba(255,255,255,0.9); } #battle-code-display .rc-reveal-word { color: var(--clr-navy, #0E1F3A); font-size: clamp(16px, 4.8vw, 26px); font-weight: 900; text-overflow: clip; } .btl-player-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; text-align: left; padding: 8px; border-radius: 16px; background: var(--clr-card, #EDE0CA); border: 1px solid rgba(139, 90, 43, 0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } .btl-player-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 11px; background: rgba(255, 253, 246, 0.9); border-radius: 12px; border: 1px solid rgba(139, 90, 43, 0.12); box-shadow: 0 2px 8px rgba(14, 31, 58, 0.07), inset 0 1px 0 rgba(255,255,255,0.7); font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--clr-navy, #0E1F3A); } .btl-player-row .btl-avatar { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--clr-tile, #F6ECDC); border: 1.5px solid rgba(139, 90, 43, 0.2); box-shadow: 0 1px 4px rgba(14, 31, 58, 0.12); flex-shrink: 0; } .btl-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; } .btl-player-row.btl-host::after { content: "amfitrió"; margin-left: auto; font-family: var(--font-main); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clr-navy, #0E1F3A); background: var(--clr-warm-yellow, #F4D68F); padding: 2px 8px; border-radius: 20px; border: 1px solid rgba(240, 138, 26, 0.3); } .btl-player-row strong { margin-left: auto; color: var(--clr-brown, #8B5A2B); font-family: var(--font-main); font-size: 10px; font-weight: 700; } .btl-player-row.btl-host strong { margin-left: 0; } #battle-lobby #btl-start-btn { min-height: 56px; border-radius: 14px; } #battle-lobby #btl-start-btn:disabled { opacity: 0.7; filter: saturate(0.75); } #battle-lobby #btl-leave-btn, #battle-lobby #btl-copy-code-btn { min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 800; } /* ── Countdown ─────────────────────────────────────────────────────────── */ #battle-countdown { background: rgba(14, 31, 58, 0.82); } .btl-count { font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: clamp(100px, 25vw, 180px); font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 60px rgba(244, 214, 143, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4); animation: btl-count-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .btl-count.btl-go { color: var(--clr-warm-yellow, #F4D68F); font-size: clamp(72px, 18vw, 130px); } @keyframes btl-count-in { from { transform: scale(0.45); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── Battle HUD bar (inside .phone, replaces top .hud in battle mode) ── */ body[data-view="febles-battle"] .hud { grid-template-columns: minmax(78px, 1fr) auto minmax(34px, 1fr); } body[data-view="febles-battle"] .mascot { display: none; } body[data-view="febles-battle"] #battle-phone.btl-battle-active #restartFromPauseBtn { display: none; } .btl-hud-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 201, 40, 0.16); border: 2px solid #ffc928; display: grid; place-items: center; font-size: 20px; line-height: 1; flex-shrink: 0; } .btl-live-stats { position: relative; z-index: 19; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 5px 8px; background: var(--clr-navy, #0E1F3A); border-bottom: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.68); font-family: var(--font-main); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .btl-live-stats[hidden] { display: none; } .btl-live-stats span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .btl-live-stats strong { color: var(--clr-warm-yellow, #F4D68F); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-transform: none; } /* ── Rival strip ───────────────────────────────────────────────────────── */ #battle-phone.btl-layout-active .playfield { top: var(--btl-stack-top, 210px); bottom: var(--btl-stack-bottom, 76px); height: auto; } #battle-rival-strip { position: absolute; top: var(--btl-rival-top, 190px); bottom: auto; left: 0; right: 0; z-index: 25; height: var(--btl-rival-height, 92px); background: rgba(14, 31, 58, 0.88); display: flex; align-items: center; padding: 8px; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; } #battle-rival-strip::-webkit-scrollbar { display: none; } #battle-rival-strip[hidden] { display: none; } #battle-phone.wpn-aiming #battle-rival-strip { pointer-events: none; } /* ── Rival card ────────────────────────────────────────────────────────── */ .rival-card { flex-shrink: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; scroll-snap-align: start; transition: opacity 0.3s; } .rival-card.rival-dead { opacity: 0.4; filter: grayscale(1); } .rival-avatar { width: 34px; height: 34px; padding: 2px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(255,255,255,0.84); box-shadow: 0 4px 8px rgba(0,0,0,0.24); overflow: hidden; } .rival-name { font-family: var(--font-main); font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.75); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; letter-spacing: 0.02em; } .rival-score { font-size: 10px; font-weight: 900; color: var(--clr-warm-yellow, #F4D68F); font-variant-numeric: tabular-nums; } .rival-level { font-family: var(--font-main); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.68); line-height: 1; text-transform: uppercase; } .rival-status { font-family: var(--font-main); font-size: 8px; font-weight: 700; color: #86efac; line-height: 1; text-transform: uppercase; } .rival-dead .rival-status { color: #fecaca; } .rival-stack-wrap { width: 28px; height: 18px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden; position: relative; display: flex; align-items: flex-end; } .rival-stack-fill { width: 100%; background: linear-gradient(180deg, #ffc928, #ef4444); border-radius: 3px; transition: height 0.4s ease; min-height: 2px; } /* colour shifts with danger */ .rival-card[data-danger="low"] .rival-stack-fill { background: #10b981; } .rival-card[data-danger="mid"] .rival-stack-fill { background: #f59e0b; } .rival-card[data-danger="high"] .rival-stack-fill { background: #ef4444; } /* ── Battle results overlay ────────────────────────────────────────────── */ .btl-results-panel { position: relative; box-sizing: border-box; width: min(380px, calc(100vw - 40px)); background: var(--clr-tile, #F6ECDC); border: 1px solid rgba(139, 90, 43, 0.18); border-radius: 20px; padding: 28px 22px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; max-height: calc(var(--app-height, 100dvh) - max(env(safe-area-inset-top), 0px) - max(env(safe-area-inset-bottom), 0px) - 56px); box-shadow: 0 8px 32px rgba(14, 31, 58, 0.14), inset 0 1px 0 rgba(255,255,255,0.62); } #battle-results .btl-results-panel { overflow-y: auto; } .btl-results-list { display: flex; flex-direction: column; gap: 7px; } .btl-result-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 253, 246, 0.9); border-radius: 12px; border: 1px solid rgba(139, 90, 43, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(14,31,58,0.06); text-align: left; } .btl-result-row.btl-result-me { border-color: rgba(240, 138, 26, 0.35); background: rgba(244, 214, 143, 0.35); } .btl-result-rank { font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 18px; font-weight: 900; color: var(--muted, #5a6a82); width: 28px; text-align: center; flex-shrink: 0; } .btl-result-rank.btl-gold { color: var(--clr-orange, #F08A1A); } .btl-result-rank.btl-silver { color: var(--muted, #5a6a82); } .btl-result-rank.btl-bronze { color: var(--clr-brown, #8B5A2B); } .btl-result-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--clr-tile, #F6ECDC); border: 1.5px solid rgba(139, 90, 43, 0.2); overflow: hidden; flex-shrink: 0; } .btl-result-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--clr-navy, #0E1F3A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btl-result-score { font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 16px; font-weight: 900; color: var(--clr-brown, #8B5A2B); font-variant-numeric: tabular-nums; flex-shrink: 0; } .btl-result-dead { font-family: var(--font-main); font-size: 10px; font-weight: 700; color: #c0392b; flex-shrink: 0; } .btl-result-winner { font-family: var(--font-main); font-size: 10px; font-weight: 700; color: var(--clr-navy, #0E1F3A); background: var(--clr-warm-yellow, #F4D68F); border: 1px solid rgba(240, 138, 26, 0.3); border-radius: 999px; padding: 3px 8px; flex-shrink: 0; } #btl-ko-panel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--btl-stack-top, 220px) + 12px); z-index: 40; width: min(320px, calc(100% - 24px)); display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; text-align: center; color: var(--clr-navy, #0E1F3A); background: var(--clr-tile, #F6ECDC); border: 1px solid rgba(139, 90, 43, 0.18); box-shadow: 0 8px 32px rgba(14, 31, 58, 0.14), inset 0 1px 0 rgba(255,255,255,0.62); pointer-events: none; } #btl-ko-panel strong { font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif); font-size: 20px; font-weight: 900; line-height: 1; color: var(--clr-navy, #0E1F3A); } #btl-ko-panel > span { color: var(--muted, #5a6a82); font-family: var(--font-main); font-size: 13px; font-weight: 600; line-height: 1.35; } .btl-ko-list { display: grid; gap: 5px; text-align: left; } .btl-ko-row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 8px 10px; background: rgba(255, 253, 246, 0.9); border-radius: 11px; border: 1px solid rgba(139, 90, 43, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 5px rgba(14,31,58,0.06); font-family: var(--font-main); font-size: 12px; font-weight: 600; } .btl-ko-row.is-me { border-color: rgba(240, 138, 26, 0.35); background: rgba(244, 214, 143, 0.3); } .btl-ko-row em { min-width: 0; overflow: hidden; color: var(--clr-navy, #0E1F3A); font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .btl-ko-row b { color: var(--clr-brown, #8B5A2B); font-variant-numeric: tabular-nums; } .btl-ko-row i { color: #15803d; font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .btl-ko-row.is-ko i { color: #c0392b; } .btl-ko-row > span:first-child { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--clr-tile, #F6ECDC); border: 1.5px solid rgba(139, 90, 43, 0.2); } /* ── Weapon bar ────────────────────────────────────────────────────────────── */ #wpn-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 26; height: var(--btl-weapon-height, 76px); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--clr-navy, #0E1F3A); border-top: 1px solid rgba(255, 255, 255, 0.06); scroll-snap-type: x proximity; -ms-overflow-style: none; } #wpn-bar::-webkit-scrollbar { display: none; } #wpn-bar[hidden] { display: none; } .wpn-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px; width: 58px; height: 58px; /* Warm off-white collectible card look */ background: linear-gradient(180deg, rgba(255, 252, 240, 0.97), rgba(248, 238, 212, 0.94)); border: 1.5px solid rgba(180, 148, 80, 0.2); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 4px 10px rgba(50, 32, 8, 0.16), 0 1px 3px rgba(50, 32, 8, 0.1); cursor: pointer; position: relative; transition: background 0.12s, box-shadow 0.12s, opacity 0.15s, filter 0.15s, transform 0.1s; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; } /* Show the img element; drop the CSS background-image approach */ .wpn-btn .wpn-icon { display: grid; } .wpn-btn:active { transform: scale(0.92); } .wpn-btn.wpn-armed { background: linear-gradient(180deg, rgba(255, 242, 170, 0.98), rgba(255, 208, 58, 0.92)); border-color: #c98800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(255, 200, 40, 0.38), 0 6px 14px rgba(150, 100, 0, 0.2); transform: translateY(-2px) scale(1.05); } .wpn-btn.wpn-spent, .wpn-btn:disabled { opacity: 0.32; filter: grayscale(0.9) saturate(0.5); cursor: not-allowed; pointer-events: none; } .wpn-icon, .wpn-target-weapon, .btl-asset-icon { display: grid; place-items: center; overflow: hidden; } .wpn-icon { width: 42px; height: 42px; } .wpn-asset img, .wpn-projectile img, .btl-asset-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(255,255,255,0.92)) drop-shadow(0 5px 7px rgba(0,0,0,0.26)); } /* Override img shadow on light card backgrounds — no white outline needed */ .wpn-btn .wpn-asset img { filter: drop-shadow(0 2px 4px rgba(50, 32, 8, 0.22)); } .wpn-asset--barretina, .btl-asset-icon--barretina { position: relative; width: 30px; height: 24px; overflow: visible; } .wpn-asset--barretina::before, .btl-asset-icon--barretina::before { content: ""; position: absolute; left: 5px; top: 1px; width: 22px; height: 18px; border-radius: 54% 46% 48% 52% / 58% 58% 42% 42%; background: linear-gradient(145deg, #f04444 0%, #c91625 60%, #8f1020 100%); transform: rotate(-11deg) skewX(-8deg); box-shadow: 0 0 0 2px #fff, inset -4px -5px 7px rgba(80,0,0,0.26); } .wpn-asset--barretina::after, .btl-asset-icon--barretina::after { content: ""; position: absolute; left: 3px; right: 4px; bottom: 1px; height: 7px; border-radius: 999px 999px 8px 8px; background: #160e0a; transform: rotate(-4deg); box-shadow: 0 0 0 1.5px #fff; } .wpn-name { display: none; } /* Quantity badge — kept in DOM for JS updates, hidden visually */ /* Spent state (opacity + grayscale) communicates "used up" without text */ .wpn-qty { display: none; } /* ── Target-selection overlay ──────────────────────────────────────────────── */ /* Covers the game area only. The compact target tray and weapon bar sit above. */ #wpn-target-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: var(--btl-stack-bottom, 76px); z-index: 22; background: linear-gradient(180deg, transparent 46%, rgba(8, 18, 40, 0.18)); display: block; cursor: pointer; } #wpn-target-tray { position: absolute; left: 50%; bottom: calc(var(--btl-weapon-height, 76px) + 10px); z-index: 35; display: flex; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--clr-tile, #F6ECDC); border: 1px solid rgba(139, 90, 43, 0.18); box-shadow: 0 8px 32px rgba(14, 31, 58, 0.14), inset 0 1px 0 rgba(255,255,255,0.62); pointer-events: auto; animation: wpn-target-tray-in 0.14s ease-out both; max-width: calc(100% - 24px); } #wpn-target-tray[hidden] { display: none; } .wpn-target-card { flex: 0 0 66px; min-height: 58px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 7px 6px; border-radius: 12px; border: 1.5px solid rgba(139, 90, 43, 0.2); background: rgba(255, 253, 246, 0.95); color: var(--clr-navy, #0E1F3A); font-family: var(--font-main); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(14,31,58,0.08); transition: transform 0.1s, box-shadow 0.1s; } .wpn-target-card:active { transform: scale(0.95); box-shadow: 0 1px 4px rgba(14,31,58,0.06); } .wpn-target-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--clr-tile, #F6ECDC); border: 1.5px solid rgba(139, 90, 43, 0.2); overflow: hidden; } .wpn-target-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .wpn-target-card strong { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-main); font-size: 10px; font-weight: 700; line-height: 1; color: var(--clr-navy, #0E1F3A); } @keyframes wpn-target-tray-in { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } #battle-attack-feed { position: absolute; right: 10px; top: calc(128px + env(safe-area-inset-top)); z-index: 55; width: min(230px, calc(100% - 20px)); display: grid; gap: 6px; pointer-events: none; } .btl-attack-toast { justify-self: end; max-width: 100%; padding: 8px 10px; border-radius: 8px; color: #fff; background: rgba(14, 31, 58, 0.92); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 16px rgba(0,0,0,0.22); font-family: var(--font-main); font-size: 12px; font-weight: 600; line-height: 1.25; animation: btl-toast-in 0.18s ease-out both; } .btl-attack-toast--outgoing { background: rgba(24, 120, 97, 0.9); } .btl-attack-toast--queued { background: rgba(73, 56, 128, 0.9); } .btl-attack-toast.is-leaving { animation: btl-toast-out 0.32s ease-in forwards; } @keyframes btl-toast-in { from { opacity: 0; transform: translateX(18px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes btl-toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.96); } } .phone.btl-attack-cue { animation: btl-attack-cue 0.34s cubic-bezier(.2,.9,.2,1) both; } @keyframes btl-attack-cue { 0%, 100% { transform: translate(0, 0); filter: saturate(1); } 18% { transform: translate(-4px, 1px); filter: saturate(1.16); } 38% { transform: translate(4px, -1px); } 62% { transform: translate(-2px, 1px); } 82% { transform: translate(1px, 0); } } #wpn-target-overlay[hidden] { display: none; } .wpn-target-hint { display: none; } /* ── Projectile ────────────────────────────────────────────────────────────── */ .wpn-projectile { position: fixed; width: 36px; height: 36px; pointer-events: none; z-index: 9999; transform-origin: center; user-select: none; } .wpn-projectile--barretina { display: grid; place-items: center; } /* ── Rival card: hit flash ─────────────────────────────────────────────────── */ .rival-card.rival-hit { animation: wpn-hit 0.35s ease-out forwards; } @keyframes wpn-hit { 0% { filter: brightness(3) saturate(0); } 100% { filter: brightness(1) saturate(1); } } #btl-room-pause-banner { position: absolute; left: 50%; top: calc(var(--btl-stack-top, 210px) + 10px); z-index: 58; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; color: var(--clr-navy, #0E1F3A); background: var(--clr-warm-yellow, #F4D68F); border: 1px solid rgba(240, 138, 26, 0.4); box-shadow: 0 6px 14px rgba(14, 31, 58, 0.2); font-family: var(--font-main); font-size: 12px; font-weight: 700; pointer-events: none; } .btl-weapon-hit-flash { position: absolute; left: 50%; top: 42%; z-index: 64; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border-radius: 999px; color: #fff; background: rgba(14, 31, 58, 0.92); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 22px rgba(0,0,0,0.26); pointer-events: none; transform: translate(-50%, -50%); animation: btl-weapon-hit-flash 0.9s cubic-bezier(.16, 1.3, .28, 1) both; } .btl-weapon-hit-icon { width: 42px; height: 34px; flex: 0 0 42px; } .btl-weapon-hit-flash strong { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffc928; font-size: 15px; font-weight: 900; line-height: 1; } .btl-weapon-hit-flash.is-leaving { opacity: 0; transform: translate(-50%, -62%) scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease; } #battle-phone.is-battle-paused .playfield, #battle-phone.is-battle-paused .playfield *, #battle-phone.is-battle-paused .question-card, #battle-phone.is-battle-paused .barretina-flyer, #battle-phone.is-battle-paused .caganer-effect, #battle-phone.is-battle-paused .caga-tio-obstacle, #battle-phone.is-battle-paused .porro-overlay, #battle-phone.is-battle-paused .pa-tomaquet-hit, #battle-phone.is-battle-paused .btl-weapon-hit-flash, #battle-phone.is-battle-paused.weapon-purro-active, #battle-phone.is-battle-paused.porro-drunk { animation-play-state: paused !important; } @keyframes btl-weapon-hit-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-5deg); } 42% { opacity: 1; transform: translate(-50%, -56%) scale(1.12) rotate(2deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } } /* ── Attribution footer (intro screen only) ──────────────────────────── */ .febles-attribution { margin-top: 14px; text-align: center; font-family: var(--font-main, 'Nunito', sans-serif); font-size: 13px; font-weight: 600; color: rgba(14, 31, 58, 0.42); line-height: 1; pointer-events: none; user-select: none; -webkit-user-select: none; } .febles-attribution small { font-size: inherit; } .febles-attribution a { display: inline-block; pointer-events: auto; text-decoration: none; vertical-align: middle; margin-left: 3px; line-height: 0; border-radius: 3px; outline-offset: 2px; } .febles-attribution a:focus-visible { outline: 2px solid rgba(14, 31, 58, 0.4); } .febles-attribution__logo { display: inline-block; height: 16px !important; width: auto !important; max-width: 120px !important; max-height: 16px !important; vertical-align: middle; opacity: 1; mix-blend-mode: multiply; } @media (max-height: 520px) { .febles-attribution { display: none; } } /* ── Top Scores entry button on home screen ──────────────────────────────── */ .btl-top-scores-btn { appearance: none; align-self: center; width: fit-content; border: 1.5px solid var(--clr-orange, #F08A1A); background: var(--clr-warm-yellow, #F4D68F); margin-top: 6px; padding: 9px 22px; border-radius: 20px; font-family: var(--font-main, 'Nunito', sans-serif); font-size: 14px; font-weight: 800; color: var(--clr-navy, #0E1F3A); cursor: pointer; transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease; letter-spacing: 0.03em; box-shadow: 0 2px 8px rgba(240, 138, 26, 0.22); } .btl-top-scores-btn:hover { background: #f0c855; box-shadow: 0 4px 14px rgba(240, 138, 26, 0.35); transform: translateY(-1px); } .btl-top-scores-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(240, 138, 26, 0.2); } .btl-top-scores-btn:focus-visible { outline: 2px solid var(--clr-orange, #F08A1A); outline-offset: 3px; }