/* Page-title display font (loaded once here so every page that pulls in this stylesheet gets it — no need to touch each HTML ). */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&display=swap'); /* ============ ROOT & RESET ============ */ :root { --bg-deep: #0a1828; --bg-mid: #102a43; --bg-soft: #1c3a5e; --gold: #f0c419; --gold-soft: #d4a017; --red: #c62828; --red-bright: #e53935; --ink: #f4ead5; --ink-soft: #c9bfa1; --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Color chips per faction */ --c-Red: #d32f2f; --c-Blue: #1976d2; --c-Green: #2e7d32; --c-Purple: #7b1fa2; --c-Black: #424242; --c-Yellow: #f9a825; } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html, body { min-height: 100vh; font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif; color: var(--ink); background: radial-gradient(ellipse at top, #1c3a5e 0%, transparent 60%), radial-gradient(ellipse at bottom, #0a1828 0%, #050d18 100%); background-attachment: fixed; overflow-x: hidden; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--ink); } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ============ HEADER ============ */ header.site-header { background: linear-gradient(180deg, rgba(10, 24, 40, 0.95), rgba(10, 24, 40, 0.7)); border-bottom: 2px solid var(--gold); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .logo { font-size: 1.4rem; font-weight: 800; letter-spacing: 2px; color: var(--gold); text-shadow: 2px 2px 0 var(--red); font-family: Impact, "Trebuchet MS", sans-serif; } .logo a { color: inherit; text-decoration: none; cursor: pointer; } .logo a:hover { filter: brightness(1.2); } nav.main-nav { display: flex; gap: 1.5rem; } nav.main-nav a { font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.2s; } /* Mobile bottom navigation — fixed 5-tab bar that appears under 1100px width * to give touch users a thumb-friendly way to jump between primary flows. * Hidden on desktop where the top header nav is more practical. */ .bottom-nav { display: none; } .has-bottom-nav { padding-bottom: 64px; } @media (max-width: 1100px) { .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: rgba(10, 12, 22, 0.96); border-top: 1px solid var(--gold); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5); padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(6px); } .bottom-nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; color: var(--ink-soft); text-decoration: none; font-size: 0.65rem; letter-spacing: 0.5px; text-transform: uppercase; border-top: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .bottom-nav-tab:hover { color: var(--ink); } .bottom-nav-tab.active { color: var(--gold); border-top-color: var(--gold); } .bottom-nav-icon { font-size: 1.3rem; line-height: 1; } .bottom-nav-label { font-family: Impact, sans-serif; } } nav.main-nav a:hover, nav.main-nav a.active { background: var(--red); color: var(--ink); } /* Language switcher */ .lang-switcher { display: flex; margin-left: 0.5rem; border: 1px solid rgba(240, 196, 25, 0.4); border-radius: 4px; overflow: hidden; } .lang-switcher button { padding: 0.4rem 0.7rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: var(--ink-soft); background: transparent; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .lang-switcher button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); } .lang-switcher button.active { background: var(--gold); color: var(--bg-deep); } .lang-switcher .sound-toggle { border-left: 1px solid rgba(240, 196, 25, 0.4); font-size: 0.85rem; } /* Sound settings popover — anchored under the speaker button. Holds the * volume slider + mute toggle. Closes on outside-click (logic in sounds.js). */ .lang-switcher .sound-toggle-wrap { position: relative; display: inline-flex; } .sound-popover { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 0.75rem; background: rgba(10, 12, 22, 0.96); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); z-index: 1000; backdrop-filter: blur(6px); } .sound-popover-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; color: var(--ink); font-size: 0.85rem; } .sound-popover .sound-volume { flex: 1; accent-color: var(--gold); } .sound-popover .sound-volume-value { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); } .sound-popover .sound-mute-btn { width: 100%; padding: 0.4rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(240, 196, 25, 0.4); border-radius: 4px; color: var(--ink); font-size: 0.8rem; cursor: pointer; transition: background 0.15s ease; } .sound-popover .sound-mute-btn:hover { background: rgba(240, 196, 25, 0.15); } /* Berry balance widget in header — also acts as the entry point to the Berry Clicker */ .berry-display { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: linear-gradient(180deg, rgba(240, 196, 25, 0.15), rgba(240, 196, 25, 0.05)); border: 1px solid rgba(240, 196, 25, 0.45); border-radius: 4px; color: var(--gold); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .berry-display:hover { background: linear-gradient(180deg, rgba(240, 196, 25, 0.25), rgba(240, 196, 25, 0.1)); border-color: var(--gold); } .berry-display:active { transform: translateY(1px); } /* Static variant: passive readout (no hover lift, no clickable cursor) since * the Berry Clicker minigame was removed. */ .berry-display-static { cursor: default; } .berry-display-static:hover { background: linear-gradient(180deg, rgba(240, 196, 25, 0.15), rgba(240, 196, 25, 0.05)); border-color: rgba(240, 196, 25, 0.45); } .berry-display-static:active { transform: none; } .berry-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--gold); color: var(--bg-deep); border-radius: 50%; font-size: 0.85rem; font-weight: 800; font-family: serif; border: 1px solid #8a6914; } .berry-error { margin-top: 1.5rem; padding: 0.9rem 1.4rem; background: rgba(198, 40, 40, 0.15); border: 1px solid var(--red); border-radius: 6px; color: #ff8a8a; font-size: 0.9rem; letter-spacing: 0.5px; text-align: center; max-width: 380px; animation: berryErrorIn 0.25s ease; } /* Berry Clicker modal */ .berry-clicker-modal .clicker-content { display: block; grid-template-columns: none; max-width: 440px; padding: 2.2rem 1.8rem 2rem; text-align: center; } .clicker-balance { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--gold); border-radius: 6px; margin-bottom: 1.5rem; } .clicker-balance .berry-icon { width: 28px; height: 28px; font-size: 1.05rem; } .clicker-balance strong { font-family: "Pirata One", Impact, sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 1px; color: var(--gold); } .clicker-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 220px; margin: 1rem 0; } .clicker-coin { width: 180px; height: 180px; border-radius: 50%; border: 6px solid #8a6914; background: radial-gradient(circle at 35% 30%, #ffe066 0%, var(--gold) 35%, var(--gold-soft) 75%, #a07a0c 100%); cursor: pointer; box-shadow: 0 6px 0 #5a4609, 0 14px 30px rgba(0, 0, 0, 0.55), inset 0 -6px 12px rgba(0, 0, 0, 0.25), inset 0 6px 12px rgba(255, 255, 255, 0.4); transition: transform 0.05s, box-shadow 0.1s; user-select: none; position: relative; } .clicker-coin:hover { box-shadow: 0 6px 0 #5a4609, 0 18px 40px rgba(240, 196, 25, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.25), inset 0 6px 12px rgba(255, 255, 255, 0.4); } .clicker-coin:active { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 #5a4609, 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.3), inset 0 4px 8px rgba(255, 255, 255, 0.3); } .clicker-coin.punched { animation: coinPunch 0.18s ease; } @keyframes coinPunch { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .clicker-coin-symbol { font-family: serif; font-size: 5.5rem; font-weight: 900; color: #5a4609; line-height: 1; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), -1px -1px 0 rgba(0, 0, 0, 0.25); } /* Floating "+0.01 ฿" feedback */ .clicker-float { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; font-family: "Pirata One", Impact, sans-serif; font-size: 1.4rem; letter-spacing: 1px; color: var(--gold); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); animation: clickerFloat 0.9s ease-out forwards; z-index: 2; } .clicker-float-big { font-size: 2.2rem; color: #4caf50; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(76, 175, 80, 0.7); } @keyframes clickerFloat { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1.05); } } /* ============ PLAY LANDING ============ */ .reconnect-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.4rem; margin: 1rem 0 0; background: linear-gradient(90deg, rgba(240, 196, 25, 0.18), rgba(240, 196, 25, 0.05)); border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 6px 16px rgba(240, 196, 25, 0.15); animation: reconnect-pulse 2.4s ease-in-out infinite; } .reconnect-banner .reconnect-text { display: flex; flex-direction: column; } .reconnect-banner strong { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); font-size: 1.1rem; } .reconnect-banner .reconnect-text span { color: var(--ink-soft); font-size: 0.9rem; } .reconnect-banner .reconnect-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } @keyframes reconnect-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(240, 196, 25, 0.15); } 50% { box-shadow: 0 6px 24px rgba(240, 196, 25, 0.45); } } /* Solo / Online tab switcher above the mode-card grid on play.html. */ .play-tabs { display: flex; justify-content: center; gap: 0.4rem; margin: 1.5rem auto 0; max-width: 480px; padding: 4px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.3); border-radius: 999px; } .play-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.2rem; background: transparent; border: none; border-radius: 999px; color: var(--ink-soft); font-family: Impact, sans-serif; letter-spacing: 1.5px; font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .play-tab:hover { color: var(--ink); } .play-tab.active { background: var(--gold); color: var(--bg-deep); } .play-tab-icon { font-size: 1.1rem; line-height: 1; } .play-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .mode-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(240, 196, 25, 0.3); border-radius: 10px; color: var(--ink); cursor: pointer; font-family: inherit; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .mode-card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(240, 196, 25, 0.25); } .mode-card:disabled { opacity: 0.5; cursor: not-allowed; } .mode-card .mode-icon { font-size: 2.4rem; margin-bottom: 0.6rem; } .mode-card h2 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 0.4rem; } .mode-card p { font-size: 0.85rem; color: var(--ink-soft); } .play-setup { background: rgba(0, 0, 0, 0.4); padding: 1.5rem; border-radius: 10px; border: 1px solid rgba(240, 196, 25, 0.3); margin-top: 1.5rem; } .deck-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .deck-picker h3 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 0.4rem; } .deck-select { width: 100%; padding: 0.6rem 0.8rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: var(--ink); font-family: inherit; font-size: 0.95rem; } /* Lobby code display + input */ .lobby-code { font-family: "Pirata One", Impact, sans-serif; font-size: 4rem; letter-spacing: 0.5rem; text-align: center; color: var(--gold); background: rgba(0, 0, 0, 0.5); border: 2px solid var(--gold); border-radius: 10px; padding: 1rem 1.5rem; margin: 1.5rem auto; max-width: 360px; user-select: all; cursor: text; text-shadow: 0 0 16px rgba(240, 196, 25, 0.5); } .lobby-code-input { font-family: "Pirata One", Impact, sans-serif; font-size: 1.6rem; letter-spacing: 0.4rem; text-align: center; text-transform: uppercase; color: var(--gold); } /* ============ GAME BOARD ============ */ .game-body { overflow-y: auto; } .game-main { max-width: none; padding: 0.5rem; display: grid; /* board | hover-preview column (frame 1) | log */ grid-template-columns: 1fr 250px 280px; gap: 0.5rem; } /* Pin each area to its column so the empty preview column stays reserved even when nothing is hovered (otherwise the log would slide into it). */ .game-main > .game-board { grid-column: 1; } .game-main > .card-preview { grid-column: 2; } .game-main > .game-log { grid-column: 3; } /* End-turn button pinned to the bottom-right corner. */ .corner-btn { position: fixed; z-index: 60; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); } .corner-btn-br { bottom: 18px; right: 16px; font-size: 1.05rem; padding: 0.7rem 1.4rem; } /* Right-side panel inside each player's board row: a vertical Deck+Trash pile with the Life cards stacked just to their right. Sits at the right edge of the board, as part of each player's play area. */ /* Main play row: characters (left, reserved width) then leader, stage, deck/trash, life — left-aligned, leaving the right free for the hover preview. No grow on the board-area so the piles sit centre-ish, not pinned to the far edge. */ .main-row { justify-content: flex-start; gap: 0.7rem; } .main-row .board-area { flex: 0 1 auto; width: auto; min-width: 460px; } /* Push the right group (timer · leader · stage · deck/trash · life) to the right edge of the board; characters stay on the left. The gap between them is filled by the play surface. */ .main-row .timer-zone { margin-left: auto; } .board-right { display: flex; align-items: flex-start; gap: 0.5rem; flex-shrink: 0; padding-left: 0.4rem; } .deck-trash { display: flex; flex-direction: column; gap: 0.4rem; } .pile { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; } .pile h4, .life-pile h4 { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin: 0; } /* Deck: a face-down card back; stacked-depth shadow makes it read as a pile. */ .deck-stack { position: relative; width: 100px; aspect-ratio: 5 / 7; border-radius: 6px; background-color: #1a3a6e; background-size: cover; background-position: center; border: 1px solid var(--gold); box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.06), 4px 4px 0 rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; } .deck-stack.is-empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.2); box-shadow: none; } .deck-count { font-family: Impact, sans-serif; font-size: 1.7rem; color: var(--gold); background: rgba(0, 0, 0, 0.6); padding: 1px 11px; border-radius: 12px; text-shadow: 0 1px 2px #000; } /* Trash: face-up cards, newest fully visible at the bottom of the pile. */ .trash-pile { cursor: help; } .trash-stack { position: relative; width: 100px; display: flex; flex-direction: column; align-items: center; } .trash-stack.is-empty { height: 140px; justify-content: center; } .trash-stack.is-empty::before { content: ""; width: 100px; aspect-ratio: 5 / 7; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 5px; } .trash-card-mini { width: 100px; aspect-ratio: 5 / 7; border-radius: 5px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); background: #000; margin-top: -116px; /* overlap: a sliver of each older card peeks at the top */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .trash-card-mini:first-child { margin-top: 0; } .trash-card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; } .trash-count { font-family: Impact, sans-serif; font-size: 1rem; color: var(--ink-soft); letter-spacing: 1px; } /* Life: one face-down card per life point, stacked card-by-card, to the right of the deck/trash. */ .life-pile { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; } .life-cards { display: flex; flex-direction: column; align-items: center; } .life-card-face { width: 76px; aspect-ratio: 5 / 7; border-radius: 5px; background-color: #1a3a6e; background-size: cover; background-position: center; border: 1px solid var(--gold); margin-top: -86px; /* overlap so the column of lives stays compact */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .life-card-face:first-child { margin-top: 0; } .game-board { display: grid; grid-template-rows: auto auto auto; gap: 0.4rem; background: linear-gradient(180deg, rgba(28, 58, 94, 0.5), rgba(10, 24, 40, 0.6)); border: 1px solid rgba(240, 196, 25, 0.3); border-radius: 10px; padding: 0.5rem; } .game-side { display: grid; grid-template-rows: auto auto auto auto; gap: 0.3rem; } .game-side.opponent { transform: rotate(0); } .side-row { display: flex; gap: 0.6rem; align-items: center; } .side-row.board-row, .side-row.main-row { flex: 1; } .board-area { display: flex; gap: 0.4rem; width: 100%; min-height: 120px; padding: 0.3rem; /* Transparent so the play area is one uniform colour with the board. */ background: transparent; border-radius: 6px; flex-wrap: wrap; align-content: flex-start; } .zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.3rem 0.5rem; /* Transparent so zones blend into the board (no lighter boxes). */ background: transparent; border: 1px solid transparent; border-radius: 6px; min-width: 64px; } .zone h4 { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-bottom: 0.2rem; } .life-stack { display: flex; gap: 2px; } .life-card { width: 14px; height: 22px; background: linear-gradient(135deg, #c62828, #8b0000); border: 1px solid var(--gold); border-radius: 2px; } .deck-count, .trash-count { font-family: Impact, sans-serif; font-size: 1.2rem; color: var(--gold); letter-spacing: 1px; } .zone h4 { font-size: 0.6rem; } /* Chess-clock timer per player */ .timer-zone { min-width: 76px; } .timer-display { font-family: "Pirata One", Impact, sans-serif; font-size: 1.2rem; letter-spacing: 1.2px; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color 0.15s, text-shadow 0.15s; } .timer-display.timer-running { color: var(--gold); text-shadow: 0 0 8px rgba(240, 196, 25, 0.5); } .timer-display.timer-warn { color: #ffa726; text-shadow: 0 0 8px rgba(255, 167, 38, 0.5); } .timer-display.timer-danger { color: #ff5252; text-shadow: 0 0 10px rgba(255, 82, 82, 0.7); animation: pulse 0.8s infinite; } .don-count { font-family: "Pirata One", Impact, sans-serif; font-size: 1.3rem; color: var(--gold); letter-spacing: 1px; } .don-active { color: #ffe066; font-weight: 700; } /* Card slots (Leader / board characters) */ .char-slot { position: relative; width: 120px; aspect-ratio: 5 / 7; background: #000; border-radius: 5px; /* visible so attached DON cards can peek out below; the card image keeps its own rounded corners. */ overflow: visible; border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .char-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .char-slot.rested { transform: rotate(90deg); } .leader-slot { width: 128px; } /* leader is the headline card — bigger */ .stage-slot { width: 78px; } .stage-slot.empty-stage { border: 2px dashed rgba(186, 104, 200, 0.35); background: rgba(186, 104, 200, 0.05); } .char-slot.just-played { filter: brightness(0.7) saturate(0.6); } /* Greyed out + crossed (slash) overlay when the attacker has selected and * this slot is not a legal target (e.g. Kid SR's force-attack lock makes * all OTHER opp cards unattackable). Also applies to .leader-slot. */ .char-slot.unattackable, .leader-slot.unattackable { filter: grayscale(1) brightness(0.45); cursor: not-allowed; position: relative; } .char-slot.unattackable::after, .leader-slot.unattackable::after { content: "🚫"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; pointer-events: none; opacity: 0.85; text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); } /* Drag-and-drop visual cues. While a drag is in progress, the source has * .dragging (fades to indicate it's being grabbed), and valid drop targets * get .drop-hover (gold ring) when the pointer hovers over them. */ .hand-card.dragging, .char-slot.dragging, .leader-slot.dragging, .don-card.dragging { opacity: 0.4; } .char-slot.drop-hover, .leader-slot.drop-hover { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 6px rgba(255, 215, 0, 0.6); transform: scale(1.04); transition: transform 0.12s ease, box-shadow 0.12s ease; } .board-area.drop-hover { background: rgba(255, 215, 0, 0.1); outline: 2px dashed rgba(255, 215, 0, 0.7); outline-offset: -8px; } /* While dragging a DON or hand card, gently highlight valid surfaces. */ body.dragging-don .char-slot[data-side="self"], body.dragging-don .leader-slot[data-side="self"] { outline: 1px dashed rgba(255, 215, 0, 0.35); outline-offset: -4px; } body.dragging-hand .board-area { outline: 1px dashed rgba(255, 215, 0, 0.25); outline-offset: -6px; } /* Pulsing green glow on enemy slots that the currently selected attacker * can hit. Surfaces only on the opponent's side (the attacker's own slot * already has its blue `.selected` ring). Honors prefers-reduced-motion. */ .char-slot.legal-target, .leader-slot.legal-target { cursor: pointer; position: relative; animation: legalTargetPulse 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(93, 214, 111, 0.85), 0 0 18px 6px rgba(93, 214, 111, 0.35); border-radius: 8px; } @keyframes legalTargetPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(93, 214, 111, 0.85), 0 0 12px 4px rgba(93, 214, 111, 0.25); } 50% { box-shadow: 0 0 0 2px rgba(93, 214, 111, 0.95), 0 0 24px 10px rgba(93, 214, 111, 0.55); } } @media (prefers-reduced-motion: reduce) { .char-slot.legal-target, .leader-slot.legal-target { animation: none; } } .char-slot.ko-anim { animation: ko-flash 420ms ease-out; pointer-events: none; } @keyframes ko-flash { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.12); filter: drop-shadow(0 0 12px #ff5252) brightness(1.4); } 70% { transform: scale(0.6) rotate(-12deg); filter: brightness(2) blur(1px); opacity: 0.5; } 100% { transform: scale(0.2); filter: brightness(0.4); opacity: 0; } } /* Card-play animation: a clone of the hand card slides into its new board * slot. Larger transition duration than DON-fly because the card grows in * size during the flight. */ .card-play-clone { position: fixed; z-index: 9997; pointer-events: none; border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 200, 80, 0.45); transition: transform 440ms cubic-bezier(0.34, 1.2, 0.55, 1), opacity 440ms ease-out; overflow: hidden; } .card-play-clone img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .card-play-clone { display: none; } } /* DON fly animation: a clone of each queued DON card travels from the DON * row to the target character/leader when attached. Staggered for "wave" * effect when attaching multiple. */ .don-fly-clone { position: fixed; z-index: 9998; pointer-events: none; border-radius: 8px; box-shadow: 0 6px 22px rgba(255, 215, 0, 0.55), 0 0 14px rgba(255, 240, 150, 0.7); transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 380ms ease-out; overflow: hidden; } .don-fly-clone img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .don-fly-clone { display: none; } } /* Attack fly animation: a clone of the attacker travels to the target */ .attack-fly-clone { position: fixed; z-index: 9999; pointer-events: none; border-radius: 8px; box-shadow: 0 8px 30px rgba(229, 57, 53, 0.5), 0 0 18px rgba(255, 200, 80, 0.6); transition: transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; } .attack-fly-clone img { width: 100%; height: 100%; object-fit: cover; display: block; } .attack-shake { animation: attack-shake 280ms ease-in-out; } @keyframes attack-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(5px, -1px); } 60% { transform: translate(-3px, 3px); } 80% { transform: translate(3px, -2px); } } .char-slot.selected { border-color: var(--gold); box-shadow: 0 0 12px var(--gold); } .activate-btn { position: absolute; bottom: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: rgba(0, 0, 0, 0.85); color: var(--gold); font-size: 0.85rem; line-height: 20px; cursor: pointer; z-index: 5; transition: transform 0.12s, background 0.12s, box-shadow 0.12s; } .activate-btn:hover { background: var(--gold); color: var(--bg-deep); transform: scale(1.15); box-shadow: 0 0 10px rgba(240, 196, 25, 0.7); } /* Rested-card rotation also rotates the inner button — pin the button so it stays upright (the JS `activatable` flag already gates whether the button renders, so we don't hide it via CSS here). */ .char-slot.rested .activate-btn { transform: rotate(-90deg); } .char-slot:hover { border-color: rgba(240, 196, 25, 0.5); } /* Attached DON: real DON cards peeking out below the character card. */ .char-don-stack { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); display: flex; z-index: -1; /* behind the character card; only the bottoms peek out */ pointer-events: none; } .char-don-card { width: 30px; aspect-ratio: 5 / 7; background: #0a1828 url("../images/don.png") center / cover no-repeat; border: 1px solid var(--gold); border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); margin-left: -16px; /* overlap so a fan of DON stays compact */ } .char-don-card:first-child { margin-left: 0; } /* Effective-power tag — shown when the card's runtime power differs from its printed value (DON attached, this-turn buff, aura, etc.). Colour-coded so the user can tell at a glance whether it's buffed or debuffed. */ .char-power-tag { position: absolute; bottom: 4px; left: 4px; font-weight: 800; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.85); color: #ffd54f; border: 1px solid rgba(255, 255, 255, 0.2); pointer-events: none; } .char-power-tag.char-power-buffed { color: #69f0ae; border-color: rgba(105, 240, 174, 0.6); box-shadow: 0 0 8px rgba(105, 240, 174, 0.35); } .char-power-tag.char-power-debuffed { color: #ff8a80; border-color: rgba(255, 138, 128, 0.6); } /* DON cards — rendered as styled mini-cards (we don't have an official image). */ .don-zone-wide { flex: 1; /* Compact single line: "DON!! 0/0" label + the DON cards side by side, instead of stacked — keeps the row short to free vertical space. */ flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.6rem; padding: 0.12rem 0.5rem; } .don-zone-wide h4 { display: flex; align-items: center; gap: 0.4rem; width: auto; margin: 0; flex-shrink: 0; } .don-count-inline { font-family: "Pirata One", Impact, sans-serif; font-size: 0.95rem; color: var(--gold); letter-spacing: 1px; } .don-cards { display: flex; gap: 4px; flex-wrap: nowrap; /* keep DON on a single row */ overflow-x: auto; /* horizontal scroll if too many */ margin-top: 0; padding-bottom: 2px; /* breathing room for the scrollbar */ } .don-card { width: 42px; height: 59px; padding: 0; border: 1.5px solid var(--gold); border-radius: 4px; cursor: pointer; position: relative; background: #fff; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); transition: transform 0.12s, box-shadow 0.12s; } .don-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .don-active-card:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(240, 196, 25, 0.5); } .don-rested-card { filter: grayscale(0.5) brightness(0.55); cursor: not-allowed; } .don-card[disabled] { cursor: default; } .don-selected { outline: 3px solid #ffec80; transform: translateY(-4px); box-shadow: 0 0 12px var(--gold); } /* Hands */ .side-strip { /* Small floor only (keeps an empty hand from collapsing). The self hand sizes to its cards; the opponent strip (just card backs) no longer wastes ~80px. */ min-height: 84px; display: flex; align-items: center; justify-content: center; /* Cap to viewport width so a hand with 10+ cards can't push the strip past the right edge. The .hand below scrolls horizontally instead. */ width: 100%; max-width: 100%; overflow: hidden; } .hand { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; padding: 4px 0.5rem 8px; width: 100%; max-width: 100%; justify-content: safe center; /* centre the hand (frame 5); stays scrollable when full */ /* Slim styled scrollbar so the user can see they can scroll. */ scrollbar-width: thin; scrollbar-color: rgba(240, 196, 25, 0.5) rgba(0, 0, 0, 0.3); } .hand::-webkit-scrollbar { height: 8px; } .hand::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 4px; } .hand::-webkit-scrollbar-thumb { background: rgba(240, 196, 25, 0.45); border-radius: 4px; } .hand::-webkit-scrollbar-thumb:hover { background: rgba(240, 196, 25, 0.7); } .hand-card { position: relative; width: 140px; aspect-ratio: 5 / 7; flex-shrink: 0; border: 2px solid transparent; border-radius: 6px; cursor: pointer; background: #000; padding: 0; overflow: hidden; transition: transform 0.12s, border-color 0.12s; } .hand-card img { width: 100%; height: 100%; object-fit: cover; } .hand-card:hover { transform: translateY(-6px); border-color: var(--gold); } .hand-card.playable { box-shadow: 0 0 8px rgba(76, 175, 80, 0.6); } .hand-card-cost { position: absolute; top: 2px; left: 2px; background: rgba(0, 0, 0, 0.8); color: var(--gold); font-weight: 800; font-size: 0.7rem; padding: 1px 5px; border-radius: 50%; } .hand-card-back { width: 50px; aspect-ratio: 5 / 7; flex-shrink: 0; background: linear-gradient(135deg, #1a3a6e, #0a1828); border: 1px solid var(--gold); border-radius: 4px; } /* Center bar */ .game-center { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.5); border-radius: 6px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } .game-phase { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--ink); font-size: 0.95rem; } .game-phase strong { color: var(--gold); } /* Phase indicator — 5 chips showing the canonical OP TCG turn flow. Only * "Main" is interactive in this engine (others auto-resolve at turn start) * but the visualization helps newer players learn the structure. The * `sweep` class animates a brief left-to-right highlight at turn start. */ .phase-indicator { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; font-size: 0.7rem; letter-spacing: 1px; font-family: Impact, sans-serif; } .phase-step { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--ink-soft); border: 1px solid transparent; transition: all 0.25s ease; } .phase-step.current { background: rgba(255, 215, 0, 0.18); color: var(--gold); border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .phase-indicator.sweep .phase-step { animation: phase-sweep 1.2s ease-out; } .phase-indicator.sweep .phase-step:nth-child(1) { animation-delay: 0ms; } .phase-indicator.sweep .phase-step:nth-child(2) { animation-delay: 180ms; } .phase-indicator.sweep .phase-step:nth-child(3) { animation-delay: 360ms; } .phase-indicator.sweep .phase-step:nth-child(4) { animation-delay: 540ms; } .phase-indicator.sweep .phase-step:nth-child(5) { animation-delay: 720ms; } @keyframes phase-sweep { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); background: rgba(255, 215, 0, 0.3); color: var(--gold); } } @media (prefers-reduced-motion: reduce) { .phase-indicator.sweep .phase-step { animation: none; } } .ai-thinking { display: inline-block; margin-left: 0.6rem; padding: 2px 8px; background: rgba(229, 57, 53, 0.2); border: 1px solid var(--red); border-radius: 3px; color: #ffb0b0; font-size: 0.78rem; letter-spacing: 0.5px; animation: pulse 1.4s infinite; } .replace-banner { display: inline-block; margin-left: 0.6rem; padding: 2px 8px; background: rgba(240, 196, 25, 0.2); border: 1px solid var(--gold); border-radius: 3px; color: var(--gold); font-size: 0.78rem; letter-spacing: 0.5px; animation: pulse 1.4s infinite; } /* Hand card visual states */ .hand-card.needs-replace { box-shadow: 0 0 8px rgba(240, 196, 25, 0.5); border-color: rgba(240, 196, 25, 0.4); } .hand-card.replace-armed { border-color: var(--gold); box-shadow: 0 0 14px var(--gold); transform: translateY(-10px); } /* Friendly Characters become click-targets while replace mode is armed */ .char-slot.replace-target { border-color: rgba(229, 57, 53, 0.6); cursor: crosshair; animation: replaceTargetPulse 1s infinite; } .char-slot.replace-target:hover { border-color: var(--red-bright); box-shadow: 0 0 12px var(--red); } @keyframes replaceTargetPulse { 0%, 100% { box-shadow: 0 0 4px rgba(229, 57, 53, 0.4); } 50% { box-shadow: 0 0 14px rgba(229, 57, 53, 0.7); } } .game-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .spectator-banner { margin-top: 0.6rem; padding: 0.4rem 0.8rem; background: rgba(33, 150, 243, 0.18); border: 1px solid rgba(33, 150, 243, 0.6); border-radius: 6px; color: #82c1ff; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; text-align: center; } /* Log panel */ .game-log { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(240, 196, 25, 0.2); border-radius: 8px; padding: 0.8rem; display: flex; flex-direction: column; position: sticky; top: 0.5rem; align-self: start; max-height: calc(100vh - 90px); } .game-log h3 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 0.5rem; font-size: 0.95rem; } .game-log ol { list-style: none; padding: 0; overflow-y: auto; font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft); } .game-log li { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Hover card preview — fixed to the right side of the screen, follows the currently hovered card without moving the cursor. */ .card-preview { /* Lives in its own grid column (frame "1") between the board and the log; the hovered card is shown big here, anchored near the top so the effect translation panel underneath stays visible. */ align-self: start; justify-self: center; margin-top: 0.5rem; width: 100%; z-index: 1300; pointer-events: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7)); animation: previewFadeIn 0.15s ease; } .card-preview img { width: 100%; display: block; border-radius: 8px; border: 2px solid var(--gold); } /* Power decomposition panel — sits under the big preview when hovering a * board character or leader whose effective power differs from the printed * base (DON attached, aura, temporary buffs...). */ .power-breakdown { margin-top: 8px; background: rgba(10, 12, 22, 0.92); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; color: #f5f1e1; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); } .power-breakdown .pb-row, .power-breakdown .power-breakdown-total { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; } .power-breakdown .power-breakdown-total { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255, 215, 0, 0.4); font-weight: 700; } .power-breakdown .pb-label { opacity: 0.8; } .power-breakdown .pb-value { font-variant-numeric: tabular-nums; } .power-breakdown .pb-pos .pb-value, .power-breakdown .pb-value.pb-pos { color: #5dd66f; } .power-breakdown .pb-neg .pb-value, .power-breakdown .pb-value.pb-neg { color: #ff6b6b; } /* French translation overlay — shows the FR card name + effect text under * the hover preview. Card images themselves are English-only (no FR print * exists for OP TCG), so this panel is the readable source in FR mode. */ .card-translation { margin-top: 8px; background: rgba(10, 12, 22, 0.92); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; line-height: 1.35; color: #f5f1e1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); } .card-translation .card-translation-name { font-weight: 700; color: var(--gold); margin-bottom: 4px; font-family: "Pirata One", serif; font-size: 1.05rem; letter-spacing: 0.5px; } .card-translation .card-translation-effect { white-space: pre-wrap; opacity: 0.95; } @keyframes previewFadeIn { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } @media (max-width: 1100px) { .card-preview { width: 200px; right: 10px; } } /* Reveal toast — briefly shows the card(s) revealed/taken from a deck so both players see what came up (especially the opponent's/AI's reveals). */ .reveal-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); z-index: 70; background: rgba(8, 14, 26, 0.96); border: 2px solid var(--gold); border-radius: 12px; padding: 14px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75); opacity: 0; pointer-events: none; /* never blocks play */ transition: opacity 0.2s ease, transform 0.2s ease; text-align: center; } .reveal-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .reveal-toast-label { color: var(--gold); font-family: Impact, sans-serif; letter-spacing: 1px; margin-bottom: 8px; font-size: 0.9rem; } .reveal-toast-cards { display: flex; gap: 8px; justify-content: center; } .reveal-toast-cards img { width: 150px; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 8px; border: 1px solid var(--gold); } /* Trash hover popup — shows the contents of a Trash zone next to it. */ .trash-popup { position: fixed; z-index: 60; width: 360px; max-height: 70vh; overflow-y: auto; background: var(--bg-mid); border: 1px solid var(--gold); border-radius: 8px; padding: 0.8rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); } .trash-popup h4 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 0.6rem; font-size: 0.95rem; } .trash-popup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; } .trash-popup-card { aspect-ratio: 5 / 7; background: #000; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: border-color 0.12s, transform 0.12s; } .trash-popup-card:hover { border-color: var(--gold); transform: scale(1.05); } .trash-popup-card img { width: 100%; height: 100%; object-fit: cover; } /* Defense modal — defender chooses counters when an attack lands on them. Cap height + flex column so a long counter row stays scrollable while the action buttons (Take / Resolve) remain visible at the bottom. */ .defense-modal .defense-content { display: flex; flex-direction: column; grid-template-columns: none; max-width: 720px; width: 92%; max-height: 90vh; padding: 1.6rem; overflow: hidden; /* the inner counter row scrolls instead */ } .defense-modal .defense-content > .actions { flex: 0 0 auto; margin-top: auto; } .defense-modal h2 { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); text-align: center; margin-bottom: 1rem; font-size: 1.4rem; } /* Flash the Defender Power when it changes (counter played, blocker redirect, etc.) so the user notices the buff before deciding. */ @keyframes dpow-flash { 0% { transform: scale(1); color: var(--ink); text-shadow: none; } 30% { transform: scale(1.4); color: #69f0ae; text-shadow: 0 0 14px #69f0ae; } 100% { transform: scale(1); color: var(--ink); text-shadow: none; } } .defense-power.dpow-flash { animation: dpow-flash 600ms ease-out; } .defense-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; } .defense-side { text-align: center; } .defense-side img { width: 130px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); } .defense-side .muted { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.3rem; } .defense-power { font-family: "Pirata One", Impact, sans-serif; font-size: 1.6rem; margin-top: 0.4rem; color: var(--ink); } .defense-power.blocks { color: #4caf50; text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); } .defense-power.loses { color: #ff6b6b; text-shadow: 0 0 10px rgba(255, 107, 107, 0.5); } .defense-vs { font-family: Impact, sans-serif; letter-spacing: 4px; color: var(--red-bright); font-size: 1.6rem; } .defense-counter-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0.6rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; margin: 0.6rem 0 1rem; min-height: 90px; /* Cap so a hand of 12+ counter cards doesn't push the action buttons off-screen. Inner cards scroll vertically instead. */ max-height: 40vh; overflow-y: auto; flex-shrink: 1; } .defense-blockers-section { margin: 0.6rem 0 0.4rem; } .defense-blockers-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0.5rem; background: rgba(33, 150, 243, 0.08); border: 1px dashed rgba(33, 150, 243, 0.5); border-radius: 6px; margin-top: 0.3rem; } .defense-blocker-card { position: relative; width: 80px; aspect-ratio: 5 / 7; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #000; padding: 0; cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.15s; } .defense-blocker-card:hover { transform: translateY(-4px); border-color: #2196f3; box-shadow: 0 0 10px rgba(33, 150, 243, 0.7); } .defense-blocker-card img { width: 100%; height: 100%; object-fit: cover; } .defense-blocker-label { position: absolute; bottom: 2px; left: 0; right: 0; background: rgba(33, 150, 243, 0.9); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; text-align: center; padding: 1px 0; } .defense-counter-card { position: relative; width: 90px; aspect-ratio: 5 / 7; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #000; padding: 0; cursor: pointer; transition: transform 0.12s, border-color 0.12s; } .defense-counter-card:hover { transform: translateY(-4px); border-color: #4caf50; box-shadow: 0 0 10px rgba(76, 175, 80, 0.6); } .defense-counter-card.defense-counter-event { border-color: rgba(186, 104, 200, 0.5); } .defense-counter-card.defense-counter-event:hover { border-color: #ba68c8; box-shadow: 0 0 10px rgba(186, 104, 200, 0.6); } .defense-counter-event-tag { position: absolute; bottom: 4px; right: 4px; background: #ba68c8; color: white; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; } .defense-counter-card img { width: 100%; height: 100%; object-fit: cover; } .defense-counter-value { position: absolute; bottom: 4px; right: 4px; background: #4caf50; color: white; font-weight: 800; font-size: 0.75rem; padding: 2px 6px; border-radius: 3px; } .defense-queue-label { width: 100%; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 0.5rem; } .defense-counter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(76, 175, 80, 0.2); border: 1px solid #4caf50; border-radius: 16px; color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.8rem; } .defense-counter-chip:hover { background: rgba(255, 107, 107, 0.25); border-color: var(--red); } .defense-counter-chip img { width: 28px; height: 40px; object-fit: cover; border-radius: 2px; } .defense-counter-chip .chip-x { color: var(--red); font-weight: 800; } /* Trigger modal — life card revealed has a [Trigger] effect */ .trigger-modal .trigger-content { display: block; grid-template-columns: none; max-width: 520px; width: 92%; padding: 1.6rem; text-align: center; } .trigger-modal h2 { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); margin-bottom: 0.5rem; font-size: 1.4rem; } .trigger-modal .muted { margin-bottom: 1rem; } .trigger-card { display: flex; justify-content: center; margin: 0.6rem 0; } .trigger-card img { width: 200px; border-radius: 6px; box-shadow: 0 0 20px rgba(240, 196, 25, 0.5), 0 6px 14px rgba(0, 0, 0, 0.6); } .trigger-modal .effect-text { margin: 1rem 0 1.2rem; text-align: left; font-size: 0.85rem; } /* Prompt modal layout */ /* Higher specificity than .modal-content so the block layout actually wins (otherwise .modal-content's 2-column grid forces content into half-width). */ .modal-content.prompt-content { display: block; grid-template-columns: none; max-width: 420px; padding: 2rem 1.8rem; text-align: center; } .prompt-content h2 { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); margin-bottom: 0.8rem; } .prompt-content #prompt-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; } /* Wider prompt (mulligan) to fit the hand thumbnails + a big preview. */ .prompt-content.prompt-wide { max-width: min(95vw, 840px); max-height: 92vh; overflow-y: auto; } .mulligan-layout { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; text-align: left; } .mulligan-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; flex: 1; min-width: 0; } .mulligan-hand img { width: 96px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; } .mulligan-hand img:hover { transform: translateY(-3px); box-shadow: 0 0 10px var(--gold); } .mulligan-card-name { align-self: center; padding: 0.3rem 0.6rem; background: rgba(0, 0, 0, 0.4); border-radius: 6px; cursor: pointer; } /* Big preview of the hovered mulligan card + its effect translation. */ .mulligan-preview { flex: 0 0 210px; display: flex; flex-direction: column; gap: 8px; } .mulligan-preview-img { width: 210px; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 8px; border: 2px solid var(--gold); } .mulligan-preview-tr { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; } .mulligan-preview-name { font-weight: 700; color: var(--gold); margin-bottom: 4px; } .mulligan-preview-effect { color: var(--ink); line-height: 1.35; } @media (max-width: 900px) { .game-main { grid-template-columns: 1fr; height: auto; } .game-log { max-height: 200px; } } @keyframes berryErrorIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Auth widget in header */ .auth-btn { padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; cursor: pointer; border: 1px solid var(--gold); transition: background 0.15s, color 0.15s; } .auth-btn-primary { background: var(--gold); color: var(--bg-deep); } .auth-btn-primary:hover { background: var(--ink); color: var(--bg-deep); } .auth-btn-ghost { background: transparent; color: var(--ink-soft); border-color: rgba(255, 255, 255, 0.15); } .auth-btn-ghost:hover { color: var(--ink); border-color: var(--gold); } .auth-user { position: relative; display: flex; align-items: center; } .auth-trigger { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(240, 196, 25, 0.4); border-radius: 4px; color: var(--gold); font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .auth-trigger:hover, .auth-trigger.open { background: rgba(240, 196, 25, 0.12); border-color: var(--gold); } .auth-trigger-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-caret { font-size: 0.7rem; opacity: 0.7; transition: transform 0.15s; } .auth-trigger.open .auth-caret { transform: rotate(180deg); } .auth-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: var(--bg-mid); border: 1px solid var(--gold); border-radius: 6px; padding: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65); z-index: 200; } .auth-menu-item { display: block; width: 100%; padding: 0.55rem 0.9rem; background: none; border: none; color: var(--ink); font-family: inherit; font-size: 0.85rem; letter-spacing: 0.5px; text-align: left; cursor: pointer; border-radius: 4px; text-decoration: none; box-sizing: border-box; } .auth-menu-item:hover { background: rgba(240, 196, 25, 0.15); color: var(--gold); } .auth-menu-item[data-action="signout"]:hover { background: var(--red); color: var(--ink); } .auth-menu-sep { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 0; } /* Auth modal */ .auth-modal .auth-modal-content { display: block; grid-template-columns: none; max-width: 420px; padding: 2.5rem 2rem 2rem; } .auth-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .auth-tab { flex: 1; padding: 0.7rem 1rem; background: transparent; border: none; color: var(--ink-soft); font-family: inherit; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; } .auth-tab:hover { color: var(--ink); } .auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-field { display: flex; flex-direction: column; gap: 0.3rem; } .auth-field span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); } .auth-field input, .auth-field textarea { padding: 0.7rem 0.9rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: var(--ink); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s; } .auth-field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.4; } .auth-field input:focus, .auth-field textarea:focus { outline: none; border-color: var(--gold); } .auth-message { font-size: 0.85rem; min-height: 1.2em; margin: 0; } .auth-message[data-kind="error"] { color: #ff6b6b; } .auth-message[data-kind="success"] { color: #4caf50; } .auth-message[data-kind="warning"] { color: #ffb84d; } .auth-note { font-size: 0.75rem; text-align: center; margin: 0.5rem 0 0; } .auth-form .btn { margin-top: 0.5rem; } .auth-mode-title { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); text-align: center; margin: 0 0 1.2rem; font-size: 1.2rem; } .auth-link-row { margin: 0.5rem 0 0; text-align: center; } .auth-link { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 0.85rem; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; } .auth-link:hover { color: var(--gold); } /* Sign-in required gate on the open page */ .auth-gate { text-align: center; padding: 3rem 1rem; max-width: 480px; margin: 2rem auto; background: rgba(0, 0, 0, 0.4); border: 2px dashed rgba(240, 196, 25, 0.4); border-radius: 12px; } .auth-gate h2 { font-family: Impact, sans-serif; color: var(--gold); letter-spacing: 2px; margin-bottom: 0.8rem; } .auth-gate p { color: var(--ink-soft); margin-bottom: 1.5rem; font-size: 0.95rem; } /* ============ MAIN LAYOUT ============ */ main { max-width: 1400px; margin: 0 auto; padding: 2rem; } h1.page-title { font-family: "Cinzel", "Trajan Pro", serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: 6px; text-transform: uppercase; text-align: center; color: var(--gold); /* fallback if background-clip:text is unsupported */ margin-bottom: 0.5rem; } /* Engraved gold: gradient fill clipped to the glyphs + a soft drop shadow. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { h1.page-title { background: linear-gradient(180deg, #ffe9a8 0%, #f0c419 55%, #c8920f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.6)); } } .subtitle { text-align: center; color: var(--ink-soft); margin-bottom: 2rem; letter-spacing: 1px; } /* ============ BOOSTER STAGE (index) ============ */ .booster-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; position: relative; } .booster-pack { width: 220px; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6)); position: relative; } .booster-pack img { width: 100%; display: block; border-radius: 6px; } .booster-pack:hover { transform: translateY(-10px) scale(1.03); filter: drop-shadow(0 30px 40px rgba(240, 196, 25, 0.4)); } .booster-hint { position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--gold); letter-spacing: 2px; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); animation: pulse 2s infinite; pointer-events: none; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .booster-pack.opening { animation: shake 0.5s ease, fadeOut 0.5s ease 0.5s forwards; pointer-events: none; } .booster-pack.opening .booster-hint { display: none; } /* Explicit "Pay 100 ฿" button below the booster — clearer affordance than * the floating hint, and reinforces the price every time. Disappears once * the pack opening animation kicks in. */ .open-pay-btn { margin: 1.2rem auto 0; display: block; font-size: 1.1rem; padding: 0.7rem 1.6rem; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 4px 14px rgba(255, 215, 0, 0.3); } .booster-pack.opening + .open-pay-btn, .booster-pack.opening ~ .open-pay-btn { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Quick Match: pulsing icon in the waiting room while the matchmaker * searches for an opponent. */ .quickmatch-pulse { font-size: 5rem; text-align: center; margin: 1.5rem 0; animation: quickmatch-pulse 1.2s ease-in-out infinite; } @keyframes quickmatch-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(240, 196, 25, 0.4)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 18px rgba(240, 196, 25, 0.8)); } } @media (prefers-reduced-motion: reduce) { .quickmatch-pulse { animation: none; } } /* Quick Match mode card on the lobby choice page — distinguish it from * the create/join cards with a subtle gold border accent. */ .mode-card.mode-quickmatch { border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 196, 25, 0.2); } /* =========================================================================== * Home dashboard (index.html) — 3-column layout: tile-cards on left + right, * ranked leaderboard table in the centre. * =========================================================================== */ .home-header .home-header-nav { margin-left: auto; /* push berry/auth/lang controls to the right */ } .home-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem; } .home-title { text-align: center; } .home-subtitle { text-align: center; margin-bottom: 2rem; } .home-grid { display: grid; grid-template-columns: 200px 1fr 200px; gap: 1.5rem; align-items: start; } @media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; gap: 1rem; } } .home-col { display: flex; flex-direction: column; gap: 0.75rem; } /* Tile cards — gold border, big icon + label. Hover lifts + glows. */ .home-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1.1rem 0.6rem; background: linear-gradient(135deg, rgba(240, 196, 25, 0.06), rgba(0, 0, 0, 0.4)); border: 1px solid rgba(240, 196, 25, 0.35); border-radius: 8px; color: var(--ink); text-decoration: none; text-align: center; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .home-tile:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 22px rgba(240, 196, 25, 0.25); } .home-tile-icon { font-size: 1.8rem; line-height: 1; } .home-tile-label { font-family: Impact, sans-serif; letter-spacing: 1.2px; font-size: 0.85rem; color: var(--gold); } .home-tile-primary { background: linear-gradient(135deg, rgba(229, 57, 53, 0.25), rgba(0, 0, 0, 0.4)); border-color: rgba(229, 57, 53, 0.6); } .home-tile-primary:hover { border-color: var(--red); box-shadow: 0 6px 22px rgba(229, 57, 53, 0.35); } .home-tile-primary .home-tile-label { color: var(--ink); } /* Leaderboard panel — center column */ .leaderboard-panel { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--gold); border-radius: 10px; padding: 1.4rem; } .leaderboard-header h2 { margin: 0; font-family: "Pirata One", serif; font-size: 1.7rem; color: var(--gold); text-align: center; letter-spacing: 1px; } .leaderboard-header p { text-align: center; margin: 0.3rem 0 1rem; font-size: 0.85rem; } .leaderboard-loading { text-align: center; padding: 2rem 0; } .leaderboard-empty { padding: 2rem 0; } .leaderboard-list { width: 100%; border-collapse: collapse; } .leaderboard-list th, .leaderboard-list td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .leaderboard-list thead th { font-family: Impact, sans-serif; letter-spacing: 1px; font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; } .leaderboard-list .lb-rank { width: 50px; text-align: center; font-weight: 700; font-size: 1rem; } .leaderboard-list .lb-wins { width: 80px; color: #6cd47a; font-weight: 700; } .leaderboard-list .lb-losses { width: 80px; color: var(--ink-soft); } .leaderboard-list .lb-wr { width: 70px; text-align: right; font-variant-numeric: tabular-nums; } .leaderboard-list .lb-name { font-weight: 600; } .leaderboard-list tr.lb-self { background: rgba(240, 196, 25, 0.1); } .leaderboard-list .lb-you { display: inline-block; font-size: 0.7rem; color: var(--gold); background: rgba(240, 196, 25, 0.2); padding: 1px 6px; border-radius: 3px; margin-left: 0.3rem; vertical-align: middle; } /* "Your rank: #X" footer under the leaderboard for the current user. * Always shown when they've played ranked, regardless of whether they're * in the top-50 above. Hidden when their row is already in the top via * the `.in-top` modifier so we don't double-display. */ .leaderboard-my-rank { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding: 0.7rem 1rem; background: rgba(240, 196, 25, 0.1); border: 1px solid rgba(240, 196, 25, 0.45); border-radius: 6px; font-size: 0.9rem; flex-wrap: wrap; } .leaderboard-my-rank.in-top { opacity: 0.7; } .leaderboard-my-rank .my-rank-label { color: var(--ink-soft); font-family: Impact, sans-serif; letter-spacing: 1px; font-size: 0.78rem; text-transform: uppercase; } .leaderboard-my-rank .my-rank-pos { color: var(--gold); font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; } .leaderboard-my-rank .my-rank-name { font-weight: 600; flex: 1; } .leaderboard-my-rank .my-rank-stats { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .leaderboard-my-rank .my-rank-stats .win { color: #6cd47a; font-weight: 700; } .leaderboard-my-rank .my-rank-stats .loss { color: #ff7373; } /* ============================================================================= * Color-blind mode (`body.cb-mode`) — adds shape-coded prefixes to indicators * that otherwise rely on color alone. Triggered by the toggle in the user * dropdown menu. Persisted in localStorage via storage.js applyColorBlind(). * =============================================================================*/ /* In-game power tag overlaying a slot's image (buff / debuff). */ .cb-mode .char-power-tag.char-power-buffed::before { content: "▲ "; } .cb-mode .char-power-tag.char-power-debuffed::before { content: "▼ "; } /* Power breakdown tooltip rows — buff/debuff side colors */ .cb-mode .power-breakdown .pb-pos .pb-value::before, .cb-mode .power-breakdown .pb-value.pb-pos::before { content: "▲ "; } .cb-mode .power-breakdown .pb-neg .pb-value::before, .cb-mode .power-breakdown .pb-value.pb-neg::before { content: "▼ "; } /* Profile + leaderboard + recap stat cards — W / L badges */ .cb-mode .profile-stat-value.win::before, .cb-mode .profile-leader-record .win::before, .cb-mode .profile-match-result .win::before, .cb-mode .leaderboard-my-rank .win::before, .cb-mode .leaderboard-list .lb-wins::before { content: "✓ "; } .cb-mode .profile-stat-value.loss::before, .cb-mode .profile-leader-record .loss::before, .cb-mode .profile-match-result .loss::before, .cb-mode .leaderboard-my-rank .loss::before { content: "✗ "; } /* Legal-target glow already gets the green pulse — pair it with a tiny * target reticle so it isn't color-only for the player. */ .cb-mode .char-slot.legal-target::before, .cb-mode .leader-slot.legal-target::before { content: "🎯"; position: absolute; top: 4px; left: 4px; font-size: 0.9rem; pointer-events: none; z-index: 3; text-shadow: 0 0 4px rgba(0, 0, 0, 0.85); } /* Dropdown toggle button styling. */ .auth-menu-toggle { display: flex !important; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; } .auth-toggle-state { font-size: 0.7rem; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--ink-soft); font-weight: 700; } .auth-toggle-state.on { background: rgba(108, 212, 122, 0.2); color: #6cd47a; } /* Ranked mode card on the lobby choice page — purple/red accent to set it * apart from the casual Quick Match (gold). */ .mode-card.mode-ranked { border-color: rgba(229, 57, 53, 0.7); box-shadow: 0 0 14px rgba(229, 57, 53, 0.2); } /* Win-reward toast variant — same shape as achievement-toast, gold accent. */ .achievement-toast.win-reward-toast { border-left: 4px solid var(--gold); background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(10, 12, 22, 0.96)); } .achievement-toast.win-reward-toast .achievement-toast-tag { color: var(--gold); } .achievement-toast.win-reward-toast .achievement-toast-title { color: var(--gold); font-size: 1.3rem; font-family: Impact, sans-serif; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-8px) rotate(-1deg); } 80% { transform: translateX(8px) rotate(1deg); } } @keyframes fadeOut { to { opacity: 0; transform: scale(0.8); } } .pack-counter { position: absolute; top: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--gold); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; } .pack-counter strong { color: var(--gold); } /* ============ CARD REVEAL ============ */ .reveal-area { display: none; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem 0; } .reveal-area.active { display: flex; } .cards-grid { width: 100%; max-width: 1200px; } .cards-grid.phase-grid { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 1rem; } @media (max-width: 900px) { .cards-grid.phase-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .cards-grid.phase-grid { grid-template-columns: repeat(2, 1fr); } } /* Stack phase: cards piled centered, only the topmost is interactive */ .cards-grid.phase-stack { display: block; position: relative; width: 240px; height: 336px; /* 240 * 7/5 */ margin: 1rem auto 4rem; } .cards-grid.phase-stack .card-flip { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; } /* On the grid the cards expand normally; in the stack they fill the wrapper. */ .cards-grid.phase-stack .card-flip-inner { height: 100%; } .cards-grid.phase-grid .card-flip { aspect-ratio: 5 / 7; } .card-flip { perspective: 1000px; aspect-ratio: 5 / 7; cursor: pointer; } .card-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } .card-flip.flipped .card-flip-inner { transform: rotateY(180deg); } .card-face, .card-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .card-back { background-color: #1a3a6e; display: flex; align-items: center; justify-content: center; } .card-back-img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; } .card-face { transform: rotateY(180deg); background: #000; } .card-face img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Rarity glow */ .card-flip[data-rarity="SR"] .card-face { box-shadow: 0 0 30px var(--gold), 0 0 60px rgba(240, 196, 25, 0.3); } .card-flip[data-rarity="SEC"] .card-face { box-shadow: 0 0 30px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.4); } .card-flip[data-alt="true"] .card-face { box-shadow: 0 0 30px #00e5ff, 0 0 60px rgba(0, 229, 255, 0.4); } .card-flip[data-rarity="L"] .card-face { box-shadow: 0 0 25px #ff6f00, 0 0 50px rgba(255, 111, 0, 0.3); } /* Rare-reveal celebration — fires once when a high-rarity or alt-art card * is first flipped face up. Radial glow expands out behind the card plus a * scale pulse, colour-matched to the rarity. */ .card-flip.rare-reveal { animation: rare-reveal-pulse 1.1s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 200; } .card-flip.rare-reveal::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; z-index: -1; animation: rare-reveal-glow 1.1s ease-out; background: radial-gradient(circle, rgba(255, 215, 0, 0.55) 0%, rgba(255, 215, 0, 0) 70%); } .card-flip[data-rarity="SEC"].rare-reveal::after { background: radial-gradient(circle, rgba(255, 0, 255, 0.6) 0%, rgba(255, 0, 255, 0) 70%); } .card-flip[data-alt="true"].rare-reveal::after { background: radial-gradient(circle, rgba(0, 229, 255, 0.6) 0%, rgba(0, 229, 255, 0) 70%); } .card-flip[data-rarity="L"].rare-reveal::after { background: radial-gradient(circle, rgba(255, 111, 0, 0.6) 0%, rgba(255, 111, 0, 0) 70%); } @keyframes rare-reveal-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 70% { transform: scale(0.98); } 100% { transform: scale(1); } } @keyframes rare-reveal-glow { 0% { opacity: 0; transform: scale(0.5); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.6); } } @media (prefers-reduced-motion: reduce) { .card-flip.rare-reveal { animation: none; } .card-flip.rare-reveal::after { display: none; } } .card-flip.is-new::before { content: "NEW"; position: absolute; top: 8px; right: 8px; background: var(--red); color: var(--ink); font-weight: 800; font-size: 0.7rem; padding: 2px 8px; border-radius: 3px; letter-spacing: 1px; z-index: 5; box-shadow: 0 2px 4px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s 0.6s; } .card-flip.flipped.is-new::before { opacity: 1; } /* Action buttons */ .actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .btn { padding: 0.8rem 1.8rem; background: linear-gradient(180deg, var(--red-bright), var(--red)); color: var(--ink); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.9rem; border-radius: 4px; border: 2px solid var(--gold); transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 0 #4a0e0e, 0 6px 12px rgba(0, 0, 0, 0.4); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #4a0e0e, 0 8px 16px rgba(0, 0, 0, 0.5); } .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #4a0e0e; } .btn.btn-ghost { background: transparent; border-color: var(--ink-soft); color: var(--ink-soft); box-shadow: none; } .btn.btn-ghost:hover { color: var(--ink); border-color: var(--gold); box-shadow: none; transform: none; } /* ============ SETS INDEX PAGE ============ */ .sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; padding: 1rem 0 2rem; } .set-card { display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(240, 196, 25, 0.3); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .set-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(240, 196, 25, 0.25); color: var(--ink); } .set-card-img { background: radial-gradient(ellipse at center, rgba(28, 58, 94, 0.7), rgba(0, 0, 0, 0.9)); padding: 1.5rem; display: flex; justify-content: center; } .set-card-img img { max-height: 280px; border-radius: 6px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); } .set-card-info { padding: 1.2rem 1.4rem 1.4rem; } .set-card .set-code { color: var(--gold); font-weight: 700; letter-spacing: 1.5px; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.3rem; } .set-card h2 { font-family: Impact, sans-serif; letter-spacing: 2px; margin-bottom: 0.8rem; font-size: 1.3rem; color: var(--ink); } .set-progress { font-size: 0.85rem; color: var(--ink-soft); } .progress-bar { margin-top: 0.5rem; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width 0.5s; } /* ============ PROFILE PAGE ============ */ .profile-username { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); font-size: 1.3rem; } .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 2rem 0; } .profile-stat-card { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.2); border-radius: 8px; padding: 1.2rem; text-align: center; } .profile-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-soft); margin-bottom: 0.4rem; } .profile-stat-value { font-family: Impact, sans-serif; letter-spacing: 1px; color: var(--ink); font-size: 1.8rem; } .profile-stat-value small { color: var(--ink-soft); font-size: 0.9rem; } .profile-stat-value.gold { color: var(--gold); } .profile-stat-value.win { color: #4caf50; } .profile-stat-value.loss { color: #ff6b6b; } .profile-section-title { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); margin: 2rem 0 1rem; font-size: 1.4rem; } .profile-fav-leader { display: flex; gap: 1.5rem; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.3); border-radius: 8px; padding: 1.2rem; } .profile-fav-leader img { width: 130px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); } .profile-fav-leader h3 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 0.4rem; font-size: 1.3rem; } .profile-sets { display: flex; flex-direction: column; gap: 0.6rem; } .profile-set-row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 1rem; align-items: center; background: rgba(0, 0, 0, 0.3); padding: 0.6rem 1rem; border-radius: 6px; } .profile-set-bar { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; } .profile-set-bar .progress-bar { width: 100%; } .profile-set-bar .muted { font-size: 0.8rem; } /* Per-leader win rate cards */ .profile-leader-stats { display: grid; gap: 0.6rem; } .profile-leader-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 1rem; align-items: center; background: rgba(0, 0, 0, 0.3); padding: 0.6rem 1rem; border-radius: 6px; } .profile-leader-row img { width: 60px; height: 84px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255, 215, 0, 0.4); } .profile-leader-info strong { color: var(--gold); } .profile-leader-record { text-align: right; font-size: 0.9rem; } .profile-leader-wr { font-size: 1.4rem; font-weight: 700; } .profile-leader-wr.win { color: #6cd47a; } .profile-leader-wr.loss { color: #ff7373; } /* Recent matches list */ .profile-matches { display: grid; gap: 0.4rem; } .profile-match-row { display: grid; grid-template-columns: auto auto 48px auto 48px 80px auto; gap: 0.6rem; align-items: center; background: rgba(0, 0, 0, 0.3); padding: 0.5rem 0.8rem; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.85rem; transition: background 0.15s ease; } .profile-match-row:hover { background: rgba(255, 215, 0, 0.08); } .profile-match-row img { width: 48px; height: 36px; object-fit: cover; border-radius: 3px; } .profile-match-date { color: var(--ink-soft); font-size: 0.75rem; } .profile-match-mode { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; background: rgba(255, 255, 255, 0.08); padding: 2px 6px; border-radius: 3px; } .profile-match-result { font-weight: 700; } .profile-match-result .win { color: #6cd47a; } .profile-match-result .loss { color: #ff7373; } /* ============ FRIENDS PAGE ============ */ .friends-search-bar { display: flex; gap: 0.6rem; max-width: 600px; margin: 0 auto 1rem; } .friends-search-bar .search-input { flex: 1; } .friends-section { margin-top: 2rem; } .friends-section-title { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); font-size: 1.1rem; margin-bottom: 0.6rem; border-bottom: 1px solid rgba(240, 196, 25, 0.2); padding-bottom: 0.4rem; } .friend-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; margin-bottom: 0.5rem; transition: border-color 0.15s; } .friend-row:hover { border-color: rgba(240, 196, 25, 0.3); } .friend-row-incoming { border-left: 3px solid var(--gold); } .friend-row-outgoing { opacity: 0.85; } .friend-row-accepted { border-left: 3px solid #4caf50; } .friend-name { font-family: "Pirata One", Impact, sans-serif; letter-spacing: 1px; font-size: 1.1rem; color: var(--ink); } a.friend-name { text-decoration: none; cursor: pointer; transition: color 0.15s ease; } a.friend-name:hover { color: var(--gold); } .friend-row-meta { font-size: 0.8rem; text-align: right; } .friend-row-actions { display: flex; gap: 0.4rem; } .friend-row-actions .btn { padding: 0.4rem 0.9rem; font-size: 0.78rem; } /* Challenge toast (used later when implementing realtime invitations) */ .challenge-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--bg-mid); border: 1px solid var(--gold); border-radius: 8px; padding: 1rem 1.2rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); z-index: 200; max-width: 320px; } /* ============ DECKS PAGE ============ */ .page-header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .page-header-row .page-title { margin-bottom: 0.3rem; text-align: left; } .page-header-row .subtitle { text-align: left; margin-bottom: 0; } .page-header-row .btn { white-space: nowrap; } .decks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .deck-card { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.25); border-radius: 10px; align-items: center; transition: border-color 0.15s, transform 0.15s; } .deck-card:hover { border-color: var(--gold); transform: translateY(-2px); } .deck-card-leader { width: 90px; height: 126px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); } .deck-card-info h3 { font-family: Impact, sans-serif; letter-spacing: 1px; margin-bottom: 0.3rem; color: var(--gold); } .deck-card-leader-name { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; } .deck-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; } .deck-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.5rem; } .deck-card { cursor: pointer; } .deck-card .deck-card-actions button { cursor: pointer; } /* Deck editor page */ .deck-edit-header { display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.25); border-radius: 10px; margin-bottom: 1.5rem; align-items: center; } .deck-edit-leader img { width: 100%; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7); } .deck-edit-info { min-width: 0; } .deck-edit-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; } .deck-name-input { flex: 1; padding: 0.55rem 0.8rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: var(--ink); font-family: Impact, sans-serif; letter-spacing: 1.5px; font-size: 1.4rem; transition: border-color 0.15s; } .deck-name-input:focus { outline: none; border-color: var(--gold); } .save-status { font-size: 0.8rem; color: var(--ink-soft); min-width: 90px; text-align: right; } .save-status[data-status="saving"] { color: var(--ink-soft); } .save-status[data-status="saved"] { color: #4caf50; } .save-status[data-status="error"] { color: #ff6b6b; } .deck-edit-leader-name { font-size: 0.85rem; margin-bottom: 0.8rem; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .change-leader-btn { margin-left: auto; padding: 0.3rem 0.7rem; font-size: 0.75rem; } .deck-progress { width: 100%; } .deck-progress-row { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; } .deck-progress-row strong { color: var(--gold); font-size: 1.1rem; } /* Cards in the editor: the +/- controls overlay */ .deck-edit-card { position: relative; } .deck-edit-card.in-deck { box-shadow: 0 0 0 2px var(--gold), var(--shadow); } .deck-edit-card .deck-own-tag { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, 0.8); color: var(--ink); font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.5px; } .deck-edit-card .deck-in-tag { position: absolute; top: 6px; left: 6px; background: var(--gold); color: var(--bg-deep); font-family: "Pirata One", Impact, sans-serif; font-size: 0.95rem; padding: 3px 8px; border-radius: 3px; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } .deck-edit-card .deck-card-ctrls { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(0, 0, 0, 0.85); padding: 4px; border-radius: 4px; } .deck-ctrl-btn { width: 32px; height: 32px; border-radius: 4px; border: none; font-size: 1.2rem; font-weight: 800; cursor: pointer; font-family: inherit; } .deck-ctrl-plus { background: var(--gold); color: var(--bg-deep); } .deck-ctrl-minus { background: rgba(255, 255, 255, 0.15); color: var(--ink); } .deck-ctrl-btn[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .deck-ctrl-plus:hover:not([disabled]) { background: var(--ink); } .deck-ctrl-minus:hover:not([disabled]) { background: var(--red); color: var(--ink); } @media (max-width: 600px) { .deck-edit-header { grid-template-columns: 1fr; text-align: center; } .deck-edit-leader { max-width: 140px; margin: 0 auto; } } /* Leader picker modal */ .deck-modal .deck-modal-content { display: block; grid-template-columns: none; max-width: 720px; width: 100%; padding: 2rem 1.8rem; max-height: 90vh; overflow-y: auto; } .leader-picker-title { font-family: Impact, sans-serif; letter-spacing: 1.5px; font-size: 1rem; color: var(--gold); margin-bottom: 0.4rem; } .leader-preview { display: flex; gap: 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(240, 196, 25, 0.25); border-radius: 8px; padding: 0.9rem; margin-bottom: 1rem; align-items: flex-start; } .leader-preview-img { width: 180px; flex-shrink: 0; border-radius: 5px; display: block; } .leader-preview-info { flex: 1; min-width: 0; } .leader-preview-info h3 { font-size: 1.1rem; margin: 0 0 0.3rem 0; color: var(--gold); } .leader-preview-id { font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.5rem; } .leader-preview-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .leader-preview-stats { display: flex; gap: 0.8rem; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.6rem; } .leader-preview-stats strong { color: var(--ink); } .leader-preview-effect { font-size: 0.85rem; line-height: 1.4; color: var(--ink); background: rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 0.6rem 0.8rem; white-space: pre-wrap; } @media (max-width: 600px) { .leader-preview { flex-direction: column; } .leader-preview-img { width: 100%; max-width: 220px; margin: 0 auto; } } .leader-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; max-height: 50vh; overflow-y: auto; padding: 0.5rem; background: rgba(0, 0, 0, 0.35); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06); } .leader-option { display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; border-radius: 6px; cursor: pointer; padding: 6px; transition: border-color 0.15s, transform 0.15s, background 0.15s; text-align: left; } .leader-option:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(240, 196, 25, 0.4); transform: translateY(-2px); } .leader-option.selected { border-color: var(--gold); background: rgba(240, 196, 25, 0.1); box-shadow: 0 0 12px rgba(240, 196, 25, 0.35); } .leader-option img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 3px; margin-bottom: 0.4rem; } .leader-option-name { font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leader-option-meta { display: flex; gap: 0.3rem; align-items: center; font-size: 0.7rem; color: var(--ink-soft); margin-top: 0.2rem; } .deck-modal .actions { display: flex; gap: 0.6rem; } .deck-modal .btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-soft); box-shadow: none; } .breadcrumb { margin-bottom: 1rem; font-size: 0.9rem; } .breadcrumb a { color: var(--ink-soft); text-decoration: none; letter-spacing: 1px; } .breadcrumb a:hover { color: var(--gold); } /* Fallback when a set image is missing (starter deck box images that the user hasn't dropped in yet). The element starts hidden via inline style="display:none" and the JS onerror handler flips it to display:flex when the image fails. */ .set-image-fallback, .starter-image-fallback { align-items: center; justify-content: center; width: 100%; min-height: 280px; background: repeating-linear-gradient(45deg, rgba(240, 196, 25, 0.08) 0, rgba(240, 196, 25, 0.08) 12px, rgba(0, 0, 0, 0.4) 12px, rgba(0, 0, 0, 0.4) 24px); color: var(--gold); font-family: Impact, sans-serif; letter-spacing: 4px; font-size: 1.6rem; border: 1px dashed var(--gold); border-radius: 6px; } /* Starter deck product page */ .starter-header { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 1.5rem; margin-bottom: 2rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.3); border-radius: 10px; align-items: center; } .starter-image img { width: 100%; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7); } .starter-info h1 { color: var(--gold); } .starter-info .set-code { color: var(--gold); font-weight: 700; letter-spacing: 1.5px; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 0.3rem; } .starter-price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 1.4rem; color: var(--gold); font-weight: 800; } .starter-price strong { font-family: "Pirata One", Impact, sans-serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 1px; } .starter-price-tag { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 4px 10px; background: linear-gradient(180deg, rgba(240, 196, 25, 0.95), rgba(212, 160, 23, 0.95)); color: var(--bg-deep); font-weight: 800; border-radius: 4px; width: fit-content; } /* Highlight starter decks on the shop list */ .starter-shop-card { border-color: rgba(229, 57, 53, 0.4); } .starter-shop-card:hover { border-color: var(--red-bright); box-shadow: 0 12px 30px rgba(229, 57, 53, 0.2); } /* Group card that rolls up the four starter decks into a single tile */ .starters-group-card { border-color: rgba(240, 196, 25, 0.5); } .starters-group-card:hover { border-color: var(--gold); box-shadow: 0 12px 30px rgba(240, 196, 25, 0.25); } .starters-group-img { position: relative; } .starters-group-img::before, .starters-group-img::after { /* Stacked-paper effect: two faded copies behind the cover image. */ content: ""; position: absolute; inset: 1.5rem; border: 1px solid rgba(240, 196, 25, 0.4); border-radius: 6px; background: rgba(0, 0, 0, 0.4); z-index: 0; } .starters-group-img::before { transform: translate(8px, 8px) rotate(2deg); opacity: 0.5; } .starters-group-img::after { transform: translate(4px, 4px) rotate(-1deg); opacity: 0.7; } .starters-group-img img, .starters-group-img .set-image-fallback { position: relative; z-index: 1; } .starters-group-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--gold); color: var(--bg-deep); font-family: "Pirata One", Impact, sans-serif; font-size: 1.4rem; padding: 2px 12px; border-radius: 50%; font-weight: 800; letter-spacing: 1px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7); border: 1px solid #8a6914; } @media (max-width: 600px) { .starter-header { grid-template-columns: 1fr; text-align: center; } .starter-image { max-width: 240px; margin: 0 auto; } } /* ============ COLLECTION PAGE ============ */ .stats-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2rem; } .stat-card { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.3); padding: 1rem 1.5rem; border-radius: 6px; min-width: 140px; text-align: center; } .stat-label { display: block; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.3rem; } .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--gold); font-family: Impact, sans-serif; letter-spacing: 1px; } .stat-value small { color: var(--ink-soft); font-size: 0.8rem; } .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; padding: 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 8px; } .search-bar { display: flex; justify-content: center; margin-bottom: 1rem; } .search-input { width: 100%; max-width: 460px; padding: 0.75rem 1.1rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(240, 196, 25, 0.3); border-radius: 6px; color: var(--ink); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s, background 0.15s; } .search-input:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, 0.55); } .search-input::placeholder { color: var(--ink-soft); } .search-input::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; background: var(--ink-soft); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; cursor: pointer; } .filter-group { display: flex; gap: 0.3rem; align-items: center; } .filter-group label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-right: 0.3rem; } .filter-chip { padding: 0.4rem 0.9rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; font-size: 0.8rem; color: var(--ink-soft); transition: all 0.15s; } .filter-chip:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); } .filter-chip.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); font-weight: 700; } /* Collection grid */ .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .coll-card { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; background: #000; box-shadow: var(--shadow); } .coll-card:hover { transform: translateY(-4px) scale(1.03); z-index: 5; } .coll-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s; } .coll-card.missing img { filter: grayscale(1) brightness(0.35); } .coll-card.missing::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Impact, sans-serif; font-size: 4rem; color: rgba(255, 255, 255, 0.3); pointer-events: none; } .coll-card .card-id-tag { position: absolute; bottom: 6px; left: 6px; background: rgba(0, 0, 0, 0.75); color: var(--ink); font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; } .coll-card .qty-tag { position: absolute; bottom: 6px; right: 6px; background: var(--gold); color: var(--bg-deep); font-family: "Pirata One", "Cinzel", Impact, sans-serif; font-weight: 400; font-size: 1.15rem; line-height: 1; padding: 4px 9px 3px; border-radius: 4px; min-width: 28px; text-align: center; letter-spacing: 1px; border: 1px solid #8a6914; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .coll-card .alt-tag { position: absolute; top: 6px; left: 6px; background: linear-gradient(45deg, #00e5ff, #1976d2); color: var(--ink); font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 3px; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } /* ============ MODAL (card detail) ============ */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; animation: fadeIn 0.2s; } .modal.active { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: var(--bg-mid); border: 2px solid var(--gold); border-radius: 12px; max-width: 900px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; max-height: 90vh; position: relative; } @media (max-width: 700px) { .modal-content { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; } } .modal-img { background: #000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-img img { max-width: 100%; max-height: 80vh; border-radius: 6px; } .modal-info { padding: 2rem; overflow-y: auto; } .modal-info h2 { font-family: Impact, sans-serif; letter-spacing: 2px; color: var(--gold); margin-bottom: 0.3rem; } .modal-info .card-num { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1rem; } .modal-info .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 255, 255, 0.1); } .badge.color-Red { background: var(--c-Red); } .badge.color-Blue { background: var(--c-Blue); } .badge.color-Green { background: var(--c-Green); } .badge.color-Purple { background: var(--c-Purple); } .badge.color-Black { background: var(--c-Black); } .badge.color-Yellow { background: var(--c-Yellow); color: #000; } .badge.rarity { background: var(--gold); color: var(--bg-deep); } .badge.rarity-SEC { background: linear-gradient(45deg, #ff00ff, #ff0080); color: white; } .badge.rarity-SR { background: linear-gradient(45deg, #ffd700, #ff8c00); color: #000; } .badge.rarity-L { background: linear-gradient(45deg, #ff6f00, #ff3d00); color: white; } .badge.alt { background: linear-gradient(45deg, #00e5ff, #1976d2); color: white; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; } .stat-row > div { background: rgba(0, 0, 0, 0.3); padding: 0.5rem; border-radius: 4px; text-align: center; } .stat-row dt { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; } .stat-row dd { font-size: 1.1rem; font-weight: 700; color: var(--gold); } .effect-text { background: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 3px solid var(--gold); } .modal-close { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--ink); z-index: 10; background: rgba(0, 0, 0, 0.55); width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; /* Nudge the × glyph up a hair — its baseline metrics make it look slightly * low otherwise. Extra bottom padding shifts the flex-centered glyph upward. */ padding-bottom: 4px; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .modal-close:hover { background: rgba(0, 0, 0, 0.75); border-color: var(--red); } .modal-close:active { transform: scale(0.92); } /* Trade controls (sell / buy) inside the card modal */ .trade-block { margin-top: 1.4rem; padding: 1rem 1.2rem; background: rgba(0, 0, 0, 0.35); border-radius: 8px; border-left: 3px solid var(--gold); } .trade-block.sell-block { border-left-color: #4caf50; } .trade-block.buy-block { border-left-color: var(--gold); } /* Wishlist toggle inside the card-modal — gold star outline that fills in * when active. Also tints the modal info block subtly when wishlisted. */ .wishlist-btn { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 215, 0, 0.45); border-radius: 999px; color: var(--ink); font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .wishlist-btn:hover { background: rgba(255, 215, 0, 0.12); } .wishlist-btn .wish-star { font-size: 1.1rem; color: rgba(255, 215, 0, 0.65); } .wishlist-btn.active { background: rgba(255, 215, 0, 0.18); border-color: var(--gold); } .wishlist-btn.active .wish-star { color: var(--gold); text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); } /* ★ overlay on a wishlisted card in the collection grid — top-right badge. */ .coll-card .wishlist-star { position: absolute; top: 6px; right: 6px; color: var(--gold); font-size: 1.4rem; text-shadow: 0 0 6px rgba(255, 215, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 2; } .coll-card.wishlisted { border-color: rgba(255, 215, 0, 0.55); } /* "Sell extras" button row inside the card-modal sell block — sits below * the qty/total row so the shortcut button doesn't crowd the main Sell btn. */ .sell-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } /* "Sell all extras" bar on the collection (per-set) page — appears between * filters and grid only when there are extras to sell. */ .bulk-sell-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.8rem 0 1rem; padding: 0.7rem 1rem; background: rgba(76, 175, 80, 0.12); border: 1px solid rgba(76, 175, 80, 0.4); border-radius: 8px; flex-wrap: wrap; } .bulk-sell-bar:empty { display: none; } .bulk-sell-info { display: flex; flex-direction: column; gap: 0.15rem; } .bulk-sell-info strong { color: #b6e8b9; } .bulk-sell-info .muted { font-size: 0.85rem; } .trade-block h3 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.4rem; } .trade-block .muted { font-size: 0.8rem; margin-bottom: 0.6rem; } .trade-row { display: flex; align-items: flex-end; gap: 1rem; margin: 0.7rem 0 1rem; flex-wrap: wrap; } .trade-qty { display: flex; flex-direction: column; gap: 0.2rem; flex: 0 0 auto; } .trade-qty span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); } .trade-qty input { width: 80px; padding: 0.5rem 0.6rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: var(--ink); font-family: inherit; font-size: 1rem; } .trade-qty input:focus { outline: none; border-color: var(--gold); } .trade-total { font-size: 0.95rem; color: var(--ink-soft); flex: 1; } .trade-total strong { color: var(--gold); font-size: 1.2rem; } .trade-warning { margin-top: 0.5rem; font-size: 0.8rem; color: #ff8a8a; } .trade-block .btn { padding: 0.6rem 1.5rem; font-size: 0.85rem; } .trade-block .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Shop card extras */ .shop-card .price-tag { position: absolute; top: 6px; left: 6px; background: linear-gradient(180deg, rgba(240, 196, 25, 0.95), rgba(212, 160, 23, 0.95)); color: var(--bg-deep); font-weight: 800; font-size: 0.75rem; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); border: 1px solid #8a6914; } .shop-card .price-coin { font-family: serif; font-weight: 900; } .shop-card.coll-card { /* Override the .missing dimming on the shop — every card is always visible. */ } .shop-card .owned-tag { position: absolute; top: 6px; right: 6px; background: rgba(76, 175, 80, 0.9); color: white; font-weight: 700; font-size: 0.7rem; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.5px; } /* Shop card alt-tag conflicts with price-tag (both top-left). Move alt to top-center. */ .shop-card .alt-tag { left: 50%; transform: translateX(-50%); } .modal-close:hover { color: var(--red-bright); } /* ============ TARGET PICKER ============ */ /* Target picker must sit ABOVE the defense modal (z-index 1000) so a counter event's target picker isn't trapped behind the defense modal. */ .target-picker-modal { z-index: 1200; } .target-picker-content { max-width: 720px; width: 92%; padding: 1.4rem; } .target-picker-content h2 { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); text-align: center; margin-bottom: 0.4rem; } .target-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; padding: 0.6rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; margin: 0.6rem 0; max-height: 60vh; overflow-y: auto; } .target-pick-card { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; background: #000; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; } .target-pick-card img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block; } .target-pick-card .target-pick-name { font-size: 0.7rem; padding: 0.2rem 0.3rem; background: rgba(0, 0, 0, 0.7); color: var(--ink); text-align: center; letter-spacing: 0.3px; } .target-pick-card.target-pick-enemy { border-color: rgba(229, 57, 53, 0.45); } .target-pick-card.target-pick-friendly { border-color: rgba(76, 175, 80, 0.45); } .target-pick-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 196, 25, 0.45); } .target-pick-card.target-pick-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .cost-confirm-actions { grid-column: 1 / -1; display: flex; gap: 1rem; justify-content: center; padding: 1rem; } /* Tutorial modal — 9-slide onboarding overlay (js/tutorial.js). */ .tutorial-modal { z-index: 5000; } .tutorial-content { display: block; max-width: 560px; width: 100%; padding: 2rem 1.8rem 1.4rem; max-height: 90vh; overflow-y: auto; text-align: center; } .tutorial-slide { padding: 0.5rem 0 1rem 0; min-height: 220px; display: flex; flex-direction: column; align-items: center; } .tutorial-icon { font-size: 3.2rem; line-height: 1; margin-bottom: 0.8rem; } .tutorial-title { font-family: Impact, sans-serif; letter-spacing: 1.2px; color: var(--gold); font-size: 1.3rem; margin-bottom: 0.8rem; } .tutorial-body { font-size: 0.95rem; line-height: 1.5; color: var(--ink); max-width: 440px; margin: 0; } .tutorial-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0 0.8rem 0; border-top: 1px solid rgba(255,255,255,0.08); } .tutorial-dots { display: flex; gap: 0.4rem; align-items: center; } .tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: background 0.15s, transform 0.15s; } .tutorial-dot:hover { background: rgba(255,255,255,0.4); } .tutorial-dot.active { background: var(--gold); transform: scale(1.3); } .tutorial-step { font-size: 0.75rem; color: var(--ink-soft); } .tutorial-actions { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; } .tutorial-nav { display: flex; gap: 0.6rem; } .tutorial-nav .btn { min-width: 90px; } .tutorial-shake { animation: tutorial-shake 0.25s; } @keyframes tutorial-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .tutorial-help-btn { background: rgba(255,255,255,0.08); color: var(--ink); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; margin-right: 0.4rem; transition: background 0.15s; } .tutorial-help-btn:hover { background: rgba(255,255,255,0.18); } /* Tutorial mode picker on play.html (topic list + content pane). */ .tutorial-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; margin-top: 1rem; } .tutorial-topic-list { list-style: none; padding: 0; margin: 0; background: rgba(0,0,0,0.25); border-radius: 8px; overflow: hidden; } .tutorial-topic-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; cursor: pointer; font-size: 0.9rem; color: var(--ink-soft); border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s, color 0.15s; } .tutorial-topic-item:hover { background: rgba(255,255,255,0.05); color: var(--ink); } .tutorial-topic-item.active { background: rgba(240,196,25,0.15); color: var(--gold); font-weight: 700; border-left: 3px solid var(--gold); } .tutorial-topic-icon-small { font-size: 1.1rem; } .tutorial-topic-pane { background: rgba(0,0,0,0.25); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .tutorial-topic-icon { font-size: 3rem; margin-bottom: 0.6rem; } .tutorial-topic-title { font-family: Impact, sans-serif; letter-spacing: 1.2px; color: var(--gold); font-size: 1.4rem; margin: 0 0 0.6rem 0; } .tutorial-topic-body { font-size: 0.95rem; line-height: 1.55; color: var(--ink); max-width: 540px; margin: 0 0 1.5rem 0; } .tutorial-launch-row { display: flex; align-items: end; gap: 0.8rem; flex-wrap: wrap; justify-content: center; } .tutorial-deck-pick { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--ink-soft); } .tutorial-deck-pick .deck-select { min-width: 200px; } @media (max-width: 700px) { .tutorial-layout { grid-template-columns: 1fr; } } /* In-game tutorial banner — pinned to bottom of game.html when launched * via the Tutorial mode card. Prev / Next flip through the slides, close * removes it for this game. */ .tutorial-banner { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(240,196,25,0.08) 0%, rgba(0,0,0,0.95) 100%); border-top: 2px solid var(--gold); padding: 0.8rem 1.2rem; display: flex; align-items: center; gap: 1rem; z-index: 4000; backdrop-filter: blur(6px); box-shadow: 0 -4px 12px rgba(0,0,0,0.5); max-height: 35vh; overflow-y: auto; } .tutorial-banner-icon { font-size: 2.4rem; flex-shrink: 0; line-height: 1; } .tutorial-banner-body { flex: 1; min-width: 0; } .tutorial-banner-title { font-family: Impact, sans-serif; letter-spacing: 1px; color: var(--gold); font-size: 1.05rem; margin-bottom: 0.25rem; } .tutorial-banner-text { font-size: 0.85rem; line-height: 1.4; color: var(--ink); } .tutorial-banner-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .tutorial-banner-step { font-size: 0.75rem; color: var(--ink-soft); margin: 0 0.4rem; } .tutorial-banner-close { background: transparent; border: none; color: var(--ink-soft); font-size: 1.5rem; cursor: pointer; margin-left: 0.4rem; width: 28px; height: 28px; border-radius: 50%; transition: background 0.15s, color 0.15s; } .tutorial-banner-close:hover { background: rgba(255,255,255,0.1); color: var(--ink); } @media (max-width: 700px) { .tutorial-banner { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.6rem 0.8rem; } .tutorial-banner-actions { justify-content: space-between; } } /* Tutorial start pane on play.html — single Start button with a topic list * (no per-topic launch). Replaces the previous topic-picker layout. */ .tutorial-start-pane { background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 1.8rem 1.4rem; text-align: center; max-width: 540px; margin: 1rem auto 0; } .tutorial-start-icon { font-size: 3rem; margin-bottom: 0.6rem; } .tutorial-start-list { list-style: none; padding: 0; margin: 0 auto 1.5rem; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--ink); text-align: left; max-width: 360px; } .tutorial-start-list li { padding: 0.3rem 0; } /* ============ ACHIEVEMENTS ============ */ .ach-summary { background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0 1.5rem 0; } .ach-summary-stat { font-size: 1rem; margin-bottom: 0.6rem; color: var(--ink); } .ach-summary-stat strong { color: var(--gold); font-size: 1.3rem; } .ach-progress { background: rgba(255, 255, 255, 0.08); border-radius: 6px; height: 8px; overflow: hidden; } .ach-progress-bar { height: 100%; background: linear-gradient(90deg, #4caf50, var(--gold)); border-radius: 6px; transition: width 0.3s; } .ach-grid { display: grid; gap: 1.5rem; } .ach-category-title { font-family: Impact, sans-serif; letter-spacing: 1.2px; color: var(--gold); font-size: 1.1rem; margin-bottom: 0.6rem; } .ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; } .ach-card { background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 0.9rem; display: flex; gap: 0.8rem; align-items: flex-start; border: 1px solid transparent; transition: filter 0.2s, border-color 0.2s; } .ach-card.locked { filter: grayscale(1) brightness(0.55); } .ach-card.unlocked { border-color: rgba(240, 196, 25, 0.4); } .ach-card-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; } .ach-card-body { min-width: 0; } .ach-card-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.2rem; } .ach-card-text { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; } .ach-card-date { font-size: 0.7rem; color: var(--gold); margin-top: 0.4rem; } /* Toast popups stacked bottom-right when an achievement unlocks. */ .achievement-toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column-reverse; gap: 0.6rem; z-index: 6000; pointer-events: none; } .achievement-toast { background: linear-gradient(135deg, rgba(20, 30, 50, 0.97) 0%, rgba(40, 30, 60, 0.97) 100%); border: 2px solid var(--gold); border-radius: 10px; padding: 0.8rem 1rem; display: flex; gap: 0.8rem; align-items: center; min-width: 280px; max-width: 360px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(240, 196, 25, 0.4); opacity: 0; transform: translateX(420px); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; } .achievement-toast.show { opacity: 1; transform: translateX(0); } .achievement-toast.hide { opacity: 0; transform: translateX(420px); } .achievement-toast-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; } .achievement-toast-body { min-width: 0; flex: 1; } .achievement-toast-tag { font-family: Impact, sans-serif; letter-spacing: 1.5px; color: var(--gold); font-size: 0.65rem; margin-bottom: 0.15rem; } .achievement-toast-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); } .achievement-toast-text { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.3; } /* Daily-bonus claim modal — replaces the previous corner toast. Centered * overlay with the reward amount as the hero, a 7-day progress track, and * an explicit Claim button. */ .modal.daily-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; z-index: 1500; backdrop-filter: blur(2px); animation: dailyFadeIn 0.2s ease-out; } .modal.daily-modal.active { display: flex; } @keyframes dailyFadeIn { from { opacity: 0; } to { opacity: 1; } } .daily-modal-content { background: radial-gradient(circle at top, rgba(255, 183, 77, 0.15), rgba(10, 12, 22, 0.98)); border: 1px solid #ffb74d; border-radius: 12px; padding: 2rem; max-width: 420px; width: 92%; text-align: center; position: relative; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(255, 183, 77, 0.25); animation: dailyPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* Override the global .modal-content grid layout so children stack * naturally in a single column. */ display: block; grid-template-columns: none; max-height: none; overflow: visible; } @keyframes dailyPopIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .daily-modal-close { position: absolute; top: 0.5rem; right: 0.7rem; background: transparent; border: none; color: var(--ink-soft); font-size: 1.6rem; cursor: pointer; line-height: 1; } .daily-modal-close:hover { color: var(--ink); } .daily-modal-icon { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(255, 183, 77, 0.6)); } .daily-modal-title { margin: 0.6rem 0 0.15rem; color: var(--gold); font-family: "Pirata One", serif; font-size: 1.7rem; letter-spacing: 1px; } .daily-modal-subtitle { margin: 0 0 1.2rem; color: #ffb74d; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; } .daily-modal-reward { font-size: 2.5rem; font-weight: 800; color: var(--gold); margin: 0.6rem 0 1.4rem; font-family: Impact, sans-serif; text-shadow: 0 0 14px rgba(255, 215, 0, 0.55); } .daily-modal-reward span { font-size: 1.5rem; vertical-align: middle; margin-left: 0.2rem; } .daily-modal-progress { display: flex; justify-content: space-between; gap: 0.35rem; margin: 0.4rem 0 1.6rem; } .daily-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: 6px; font-size: 0.65rem; color: var(--ink-soft); transition: all 0.2s ease; } .daily-dot.filled { background: rgba(255, 183, 77, 0.18); color: #ffb74d; } .daily-dot.current { border-color: #ffb74d; box-shadow: 0 0 10px rgba(255, 183, 77, 0.45); transform: scale(1.08); } .daily-dot-day { font-weight: 700; font-family: Impact, sans-serif; font-size: 0.75rem; } .daily-dot-val { font-variant-numeric: tabular-nums; } .daily-claim-btn { width: 100%; font-size: 1rem; padding: 0.7rem; } .daily-modal-note { margin: 0.8rem 0 0; font-size: 0.72rem; line-height: 1.4; opacity: 0.65; } /* =========================================================================== * Starter deck picker — free welcome modal that appears once per account. * Bigger than the daily-modal because it shows 4 large card tiles side by * side that the player clicks to claim their welcome starter. * =========================================================================== */ .modal.starter-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.82); display: none; align-items: center; justify-content: center; z-index: 1600; backdrop-filter: blur(3px); animation: dailyFadeIn 0.25s ease-out; } .modal.starter-modal.active { display: flex; } .starter-modal-content { background: radial-gradient(circle at top, rgba(229, 57, 53, 0.18), rgba(10, 12, 22, 0.98)); border: 1px solid var(--gold); border-radius: 12px; padding: 2rem; max-width: 720px; width: 92%; text-align: center; position: relative; box-shadow: 0 14px 56px rgba(0, 0, 0, 0.7), 0 0 40px rgba(229, 57, 53, 0.25); animation: dailyPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Override the global grid layout from .modal-content. */ display: block; grid-template-columns: none; max-height: none; overflow: visible; } .starter-modal-icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.7)); } .starter-modal-title { margin: 0.5rem 0 0.2rem; color: var(--gold); font-family: "Pirata One", serif; font-size: 2rem; letter-spacing: 1px; } .starter-modal-subtitle { margin: 0 0 1.4rem; color: var(--ink); font-size: 0.95rem; line-height: 1.4; } .starter-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 0.5rem 0 1rem; } @media (max-width: 700px) { .starter-tiles { grid-template-columns: repeat(2, 1fr); } } .starter-tile { background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(240, 196, 25, 0.4); border-radius: 8px; padding: 0.5rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; transition: all 0.2s ease; color: var(--ink); } .starter-tile:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(240, 196, 25, 0.3); } .starter-tile:disabled { opacity: 0.5; cursor: not-allowed; } .starter-tile.picking { border-color: #6cd47a; box-shadow: 0 0 18px rgba(108, 212, 122, 0.5); } .starter-tile img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 4px; } .starter-tile-placeholder { width: 100%; aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); font-family: Impact, sans-serif; font-size: 1.5rem; color: var(--gold); } .starter-tile-info { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.82rem; } .starter-tile-info strong { color: var(--gold); } .starter-modal-note { margin: 0.8rem 0 0; font-size: 0.72rem; line-height: 1.4; opacity: 0.65; } @media (max-width: 600px) { .achievement-toasts { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } .achievement-toast { min-width: 0; max-width: none; } } /* Floating power number popup — spawned briefly above a slot when its * tempPower / battlePower changes via give_power_temp. Visual feedback for * the player to feel buffs and debuffs land. */ .floating-power { position: fixed; font-family: Impact, sans-serif; font-size: 2.2rem; letter-spacing: 1px; text-shadow: 0 0 8px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.95); pointer-events: none; animation: float-power-up 1.2s ease-out forwards; z-index: 5500; transform: translate(-50%, -50%); white-space: nowrap; } .floating-power.buff { color: #4caf50; } .floating-power.debuff { color: #ff6b6b; } @keyframes float-power-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } } /* DON attach pulse — gold flash around the target slot when one or more * DON cards get attached. Lasts ~500ms then auto-removed by app-game.js. */ @keyframes don-attach-pulse-anim { 0% { box-shadow: 0 0 0 0 rgba(240, 196, 25, 0); } 20% { box-shadow: 0 0 0 4px rgba(240, 196, 25, 0.9), 0 0 16px 6px rgba(240, 196, 25, 0.65); } 100% { box-shadow: 0 0 0 0 rgba(240, 196, 25, 0); } } .don-attach-pulse { animation: don-attach-pulse-anim 0.5s ease-out; border-radius: 6px; } /* Look-and-reorder modal (Kuma, Perona — peek N and reorder top/bottom). */ .reorder-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; width: 100%; } .reorder-cards { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .reorder-cell { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.25); border-radius: 8px; min-width: 130px; } .reorder-cell img { width: 110px; height: auto; border-radius: 6px; display: block; } .reorder-label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; } .reorder-actions { display: flex; gap: 0.3rem; } .reorder-btn { padding: 0.3rem 0.5rem; font-size: 0.7rem; } .reorder-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ============ MISC ============ */ .muted { color: var(--ink-soft); } .center { text-align: center; } .danger-link { color: #ff6b6b; font-size: 0.85rem; } .danger-link:hover { color: var(--red-bright); } /* ============ MOBILE RESPONSIVE ============ * Tablet + phone tweaks. The game board is the densest screen — at <=900px it * collapses to a single column with the log appearing below. Below 600px the * header stacks and card sizes shrink so everything fits in portrait. */ @media (max-width: 900px) { /* Header: allow nav to wrap on a second line if needed. */ header.site-header { padding: 0.6rem 0.8rem; gap: 0.5rem; flex-wrap: wrap; } .logo { font-size: 1rem; letter-spacing: 1px; } nav.main-nav { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } nav.main-nav a { padding: 0.35rem 0.6rem; font-size: 0.75rem; } /* Game page: stack the log under the board instead of the side column. */ .game-main { grid-template-columns: 1fr; padding: 0.3rem; } .game-log { position: static; max-height: 200px; } /* Hand and board cards: smaller on tablet portrait. */ .hand-card { width: 78px; } .hand-card-back { width: 36px; } .char-slot { width: 64px; } .leader-slot { width: 70px; } } @media (max-width: 600px) { /* Header collapses: logo + nav stack vertically; auth/berry on second row. */ header.site-header { padding: 0.5rem 0.5rem; flex-direction: column; align-items: stretch; } .logo { text-align: center; font-size: 0.95rem; } nav.main-nav { justify-content: center; gap: 0.3rem; font-size: 0.7rem; } nav.main-nav a { padding: 0.3rem 0.45rem; font-size: 0.7rem; letter-spacing: 0.5px; } .berry-display { padding: 0.3rem 0.5rem; font-size: 0.75rem; } .lang-switcher button { padding: 0.25rem 0.45rem; font-size: 0.65rem; } /* Game board: dense compact layout. */ .game-main { padding: 0.2rem; gap: 0.3rem; } .game-board { padding: 0.3rem; } .game-side { gap: 0.2rem; } /* Side rows stay on a single line and scroll horizontally if zones don't * fit (instead of wrapping awkwardly). Keeps the board's vertical * footprint predictable on narrow screens. */ .side-row { gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .side-row::-webkit-scrollbar { height: 4px; } .side-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; } .side-row.board-row { overflow-x: visible; } .zone { min-width: 48px; padding: 0.2rem 0.3rem; flex-shrink: 0; } .zone h4 { font-size: 0.55rem; } .deck-count, .trash-count { font-size: 0.95rem; } /* Hide the timer-zone on narrow screens — the chess clock floats above * the center bar instead (see .mobile-timers below). */ .timer-zone { display: none; } .life-card { width: 10px; height: 16px; } /* Smaller cards across the board. */ .hand-card { width: 60px; } .hand-card-cost { font-size: 0.6rem; padding: 0 4px; } .hand-card-back { width: 28px; } .char-slot { width: 52px; } .leader-slot { width: 56px; } .char-don { font-size: 0.6rem; padding: 0 3px; } .board-area { min-height: 80px; padding: 0.2rem; gap: 0.25rem; } .don-cards { gap: 2px; flex-wrap: nowrap; } .don-card { width: 30px; height: 42px; flex-shrink: 0; } .don-zone-wide { flex: 1; overflow-x: auto; } /* Center bar: stack actions to a wrap so they don't overflow. */ .game-center { flex-direction: column; gap: 0.4rem; align-items: stretch; padding: 0.4rem 0.5rem; } .game-phase { font-size: 0.8rem; text-align: center; } .game-actions { justify-content: center; flex-wrap: wrap; } .game-actions .btn { padding: 0.4rem 0.8rem; font-size: 0.75rem; } /* Log keeps the existing 200px max-height from the earlier media query — * collapsing it entirely on mobile felt too aggressive (lots of useful * combat info in there). It sits below the board and can be scrolled. */ /* Reconnect banner stacks. */ .reconnect-banner { flex-direction: column; align-items: stretch; text-align: center; } .reconnect-banner .reconnect-actions { justify-content: center; } /* Modals shrink to fit. */ .modal-content { max-width: 95vw; padding: 1rem; } .defense-modal .defense-content { padding: 1rem; } .defense-versus { gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .defense-side img { max-width: 100px; } .defense-counter-row { gap: 0.3rem; } .defense-counter-card { width: 60px; } /* Card preview: hide on small screens — the hover preview is desktop-only. * The trash popup needs to stay for tap interaction, but shrink it. */ .card-preview { display: none; } .trash-popup { width: min(92vw, 360px); } /* Play / lobby pages: tighter mode cards. */ .play-modes { gap: 0.8rem; margin: 1rem 0; } .mode-card { padding: 1.2rem 0.8rem; } .mode-card h2 { font-size: 1.05rem; } .deck-pickers { grid-template-columns: 1fr; gap: 0.6rem; } }