/* ═══════════════════════════════════════════════════════════════════════════ /games/includes/afg-monaco.css Shared Monaco-casino aesthetic overrides for all AFG games. Loaded via from each game's . Scoped inside .apron. ═══════════════════════════════════════════════════════════════════════ */ /* GAMES-ONLY APRON OVERRIDE ────────────────────────────────────────────── Per Alonso: on game pages we want top-padding 0 instead of the site default 20px, so the game content sits flush against the top of the apron. afg-monaco.css only loads on game pages so this doesn't affect anywhere else on the site. All other .apron declarations left at the site-wide defaults from inthacity.css. */ .apron { background: #f0f0f0; padding: 10px 15px 20px; border-radius: 6px; margin-bottom: 20px; } /* Mobile-only breadcrumb tightening (per Alonso): shave 5px off the bottom of the breadcrumb strip on game pages so the game content sits closer to the breadcrumb trail. Uses the legacy typo class .breandcrumbs. */ @media (max-width: 767px) { .apron .breandcrumbs.marginBottom20, .breandcrumbs.marginBottom20 { margin-bottom: 15px !important; } } /* Dimpled velvet — deep crimson (Slots cabinet feel). */ .apron .afgmc-velvet-red { background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.05) 0%, transparent 40%), radial-gradient(circle at 75% 75%, rgba(255,255,255,.04) 0%, transparent 40%), radial-gradient(circle at 12px 12px, rgba(0,0,0,.18) 0%, transparent 4px), radial-gradient(circle at 32px 32px, rgba(0,0,0,.18) 0%, transparent 4px), linear-gradient(160deg,#8a0002 0%,#4a0000 45%,#7a0001 100%); background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100%; box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,213,79,.15), inset 0 -3px 8px rgba(0,0,0,.5); } /* Dimpled velvet — deep black (Memory/TicTacToe/Puzzle board feel). */ .apron .afgmc-velvet-black { background: radial-gradient(circle at 25% 25%, rgba(255,213,79,.06) 0%, transparent 40%), radial-gradient(circle at 75% 75%, rgba(255,213,79,.04) 0%, transparent 40%), radial-gradient(circle at 12px 12px, rgba(255,255,255,.05) 0%, transparent 4px), radial-gradient(circle at 32px 32px, rgba(255,255,255,.04) 0%, transparent 4px), linear-gradient(160deg,#1a1a24 0%,#0a0a10 45%,#14141c 100%); background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100%; box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,213,79,.12), inset 0 -3px 8px rgba(0,0,0,.5); } /* Gold-braided animated edge. */ .apron .afgmc-gold-edge { position:relative; border:4px solid transparent; border-radius:20px; } .apron .afgmc-gold-edge:before { content:''; position:absolute; inset:-4px; border-radius:24px; z-index:-1; background:linear-gradient(45deg,#7a5f00 0%,#ffd54f 25%,#fff8dc 50%,#ffd54f 75%,#7a5f00 100%); background-size:200% 200%; animation:afgmcShimmer 6s linear infinite; } @keyframes afgmcShimmer { 0% { background-position:0% 0; } 100% { background-position:200% 0; } } /* Gold plaque badge — for the "★ AFG GAME ★" section headers. */ .apron .afgmc-plaque { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,#fff8dc 0%,#ffd54f 40%,#c9a227 70%,#7a5f00 100%); color:#3d1f00; font-size:11px; font-weight:900; letter-spacing:2px; padding:5px 22px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.7), inset 0 -1px 2px rgba(0,0,0,.3); white-space:nowrap; text-shadow:0 1px 0 rgba(255,255,255,.4); font-family:'Georgia','Playfair Display',serif; } /* Retro-apply velvet to the existing game surfaces without changing markup. These selectors match the current per-game containers — just tack on the .afgmc-velvet-black class in the HTML if you want the effect. */ .apron .afgmem-board.afgmc-velvet-black, .apron .afgttt-board.afgmc-velvet-black, .apron .afgpuz-board-wrap.afgmc-velvet-black { border-radius:16px; padding:16px; } /* Opulent gold-plated chip — use for score displays. */ .apron .afgmc-chip { position:relative; background:linear-gradient(180deg,#fff 0%,#f5f5f5 100%); border:3px solid transparent; padding:12px 16px 10px; border-radius:16px; min-width:100px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.08); transition:transform .2s ease-out, box-shadow .2s; } .apron .afgmc-chip:before { content:''; position:absolute; inset:-3px; border-radius:18px; z-index:-1; background:linear-gradient(135deg,#fff8dc 0%,#c9a227 25%,#7a5f00 50%,#c9a227 75%,#fff8dc 100%); } .apron .afgmc-chip.pop { transform:scale(1.15) rotate(-1deg); box-shadow:0 12px 28px rgba(255,213,79,.5), 0 0 40px rgba(255,213,79,.4); } /* ═══════════════════════════════════════════════════════════════════════ Monaco cross-nav — "More AFG games" footer as a mini game-preview panel. Overrides the older .afg-crossnav styling so each tile is a velvet plaque with a distinct per-game glow, matching the landing card aesthetic. */ .apron .afg-crossnav { max-width:900px; margin:28px auto 0; padding:16px 16px 14px; /* Neutral light wrap so the black-velvet tiles pop against a clean frame, matching how the landing-page card grid sits on the apron. */ background:#fff; border:1px solid #e5e5e5; border-radius:12px; box-shadow:none; position:relative; } .apron .afg-crossnav:before { content:none; } /* ring dropped — tile-level accents only */ .apron .afg-crossnav-title { font-family:'Georgia','Playfair Display',serif; font-size:13px; text-transform:uppercase; letter-spacing:.25em; color:#333; font-weight:900; margin-bottom:14px; text-align:center; } .apron .afg-crossnav-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; } @media (max-width:560px) { .apron .afg-crossnav-tiles { grid-template-columns:repeat(2, 1fr); gap:8px; } } .apron .afg-crossnav-tile { /* Black velvet + bling — matches the landing-page game cards but scoped smaller for the crossnav row. Dimpled velvet background, thin gold border, subtle inset gold glow (no heavy drop shadow per Alonso). */ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 12px 14px; border-radius:12px; background: radial-gradient(circle at 30% 25%, rgba(255,213,79,.10) 0%, transparent 55%), radial-gradient(circle at 12px 12px, rgba(255,255,255,.05) 0%, transparent 4px), radial-gradient(circle at 32px 32px, rgba(255,255,255,.04) 0%, transparent 4px), linear-gradient(160deg,#1a1a24 0%,#0a0a10 45%,#14141c 100%); background-size:100% 100%, 40px 40px, 40px 40px, 100% 100%; border:2px solid rgba(255,213,79,.45); color:#fff8dc; font-weight:900; font-size:13px; text-decoration:none; box-shadow: inset 0 1px 2px rgba(255,213,79,.20), inset 0 -2px 4px rgba(0,0,0,.5); font-family:'Georgia','Playfair Display',serif; letter-spacing:.04em; transition:transform .18s ease-out, border-color .18s, box-shadow .18s; position:relative; overflow:hidden; text-align:center; } .apron .afg-crossnav-tile:hover { transform:translateY(-3px); background: radial-gradient(circle at 30% 25%, rgba(255,213,79,.18) 0%, transparent 55%), radial-gradient(circle at 12px 12px, rgba(255,255,255,.07) 0%, transparent 4px), radial-gradient(circle at 32px 32px, rgba(255,255,255,.05) 0%, transparent 4px), linear-gradient(160deg,#25252f 0%,#0e0e14 45%,#1c1c26 100%); background-size:100% 100%, 40px 40px, 40px 40px, 100% 100%; border-color:#ffd54f; color:#fff; text-decoration:none; box-shadow: inset 0 1px 2px rgba(255,213,79,.35), inset 0 -2px 4px rgba(0,0,0,.5); } .apron .afg-crossnav-tile i { font-size:32px; transition:transform .18s, filter .18s; /* Per-game color story via drop-shadow. Keeps the icon 'glowing' subtly without any card-level shadow. */ filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .apron .afg-crossnav-tile:hover i { transform:scale(1.15) rotate(-4deg); filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px currentColor); } /* Per-game icon color — matches the landing cards for consistency */ .apron .afg-crossnav-tile.game-memory i { color:#ff3b3b; } .apron .afg-crossnav-tile.game-slots i { color:#ffd54f; } .apron .afg-crossnav-tile.game-puzzle i { color:#42a5f5; } .apron .afg-crossnav-tile.game-tictactoe i { color:#eeeeee; } .apron .afg-crossnav-tile.game-hub i { color:#ffb300; } .apron .afg-crossnav-tile.game-shuffle i { color:#ab47bc; } .apron .afg-crossnav-tile.game-olympics i { color:#66bb6a; } .apron .afg-crossnav-tile:hover i { color:inherit !important; } /* On hover, force each tile's i to keep its per-game color (override the general :hover i rule that would otherwise set color:#fff) */ .apron .afg-crossnav-tile.game-memory:hover i { color:#ff5555 !important; } .apron .afg-crossnav-tile.game-slots:hover i { color:#ffe27a !important; } .apron .afg-crossnav-tile.game-puzzle:hover i { color:#64b5f6 !important; } .apron .afg-crossnav-tile.game-tictactoe:hover i { color:#ffffff !important; } .apron .afg-crossnav-tile.game-hub:hover i { color:#ffc947 !important; } .apron .afg-crossnav-tile.game-shuffle:hover i { color:#ba68c8 !important; } .apron .afg-crossnav-tile.game-olympics:hover i { color:#81c784 !important; }