:root {
    --bg-dark: #0f172a; --bg-card: #111827;
    --text-main: #f8fafc; --text-muted: #9ca3af;
    --theme-accent: #10b981; 
    --p1-color: #ef4444; --p2-color: #3b82f6;
    --p3-color: #10b981; --p4-color: #f59e0b;
    --font-main: "Comic Sans MS", "Marker Felt", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-touch-callout: none; }
body { background: radial-gradient(circle at center, #1f2937, #030712); color: var(--text-main); font-family: var(--font-main); overflow: hidden; touch-action: none; }
#app { width: 100vw; height: 100vh; position: relative; z-index: 2; }

/* Smoke & Particle Animations */
.smoke-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: url('data:image/svg+xml;utf8,<svg opacity="0.08" xmlns="http://www.w3.org/2000/svg" width="150" height="150"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>'); mix-blend-mode: overlay; animation: drift 20s linear infinite alternate; }
@keyframes drift { from { transform: translateY(0) scale(1); } to { transform: translateY(-5%) scale(1.1); } }
.bounce-in { animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes bounceIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* UI SCREENS */
.screen { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; }
.screen.active { display: flex; }
.menu-card { background: rgba(17, 24, 39, 0.85); backdrop-filter: blur(15px); padding: 2rem; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); border: 2px solid rgba(16, 185, 129, 0.3); text-align: center; width: 90%; max-width: 450px; }
.large-card { max-width: 650px; padding: 2rem 1rem; }
.title { font-size: 2.8rem; font-weight: 900; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
.title span { color: var(--theme-accent); text-shadow: 0 0 15px rgba(16, 185, 129, 0.8); }
.subtitle { color: var(--text-muted); margin-bottom: 2rem; font-style: italic; font-size: 1.2rem; }

/* BUTTONS & GRIDS */
.btn { width: 100%; padding: 16px; margin-bottom: 12px; font-size: 1.2rem; font-weight: 800; border: none; border-radius: 12px; cursor: pointer; transition: transform 0.1s; text-transform: uppercase; box-shadow: 0 5px 0 rgba(0,0,0,0.5); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }
.primary-btn { background: linear-gradient(135deg, #059669, #10b981); color: white; }
.secondary-btn { background: #374151; color: white; }

.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; }
.game-card { background: rgba(31, 41, 55, 0.8); border-radius: 16px; padding: 15px 10px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; }
.game-card:active { transform: scale(0.9); border-color: var(--theme-accent); background: rgba(16, 185, 129, 0.2); }
.emoji-icon { font-size: 3rem; margin-bottom: 5px; animation: float 3s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0px); } to { transform: translateY(-8px); } }

.tournament-bar p { color: var(--text-muted); margin-bottom: 10px; font-weight: bold; }
.tourney-buttons { display: flex; gap: 10px; }
.tourney-btn { background: #1f2937; color: white; padding: 12px; font-size: 1rem; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.1); }

/* SCOREBOARD */
.scoreboard { background: rgba(0,0,0,0.4); padding: 15px; border-radius: 12px; margin-bottom: 20px; }
.score-row { display: flex; justify-content: space-between; font-size: 1.5rem; margin: 12px 0; font-weight: 900; align-items: center; text-transform: uppercase; }
.score-number { font-variant-numeric: tabular-nums; transition: transform 0.1s, color 0.1s; display: inline-block; }
.score-number.tallying { transform: scale(1.5); color: var(--theme-accent); text-shadow: 0 0 15px var(--theme-accent); }

/* SIDE UI */
.side-ui { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(5px); border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; box-shadow: 0 0 20px rgba(0,0,0,0.8); font-weight: 900; }
.left-side { left: 10px; width: 60px; height: 60px; font-size: 1.8rem; cursor: pointer; color: white; transition: background 0.2s; }
.left-side:active { background: rgba(239, 68, 68, 0.8); }
.right-side { right: 10px; width: 60px; height: 60px; font-size: 1.5rem; color: #fff; border-color: var(--theme-accent); }
.right-side.warning { color: #ef4444; border-color: #ef4444; animation: pulseRed 0.5s infinite alternate; }
@keyframes pulseRed { from { box-shadow: 0 0 5px #ef4444; transform: translateY(-50%) scale(1); } to { box-shadow: 0 0 25px #ef4444; transform: translateY(-50%) scale(1.1); } }

/* IN-GAME ARENA */
.arena-grid { display: grid; width: 100%; height: 100%; gap: 3px; background: #000; }
.arena-grid.players-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.arena-grid.players-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.arena-grid.players-3 #quad-4 { display: none; }
.arena-grid.players-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.arena-grid.players-2 #quad-3, .arena-grid.players-2 #quad-4 { display: none; }

.quadrant { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px; background: var(--bg-dark); }
#quad-1 { background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.15), transparent); transform: rotate(180deg); }
#quad-2 { background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent); transform: rotate(180deg); }
#quad-3 { background: radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.15), transparent); }
#quad-4 { background: radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.15), transparent); }

.player-info { display: flex; justify-content: space-between; width: 100%; font-size: 1.5rem; font-weight: 900; color: rgba(255,255,255,0.8); text-shadow: 1px 1px 0 #000; z-index: 2; }
.quad-ui { flex-grow: 1; display: flex; align-items: center; justify-content: center; width: 100%; position: relative; }
.quadrant.active-turn { box-shadow: inset 0 0 0 6px rgba(255,255,255,0.8), inset 0 0 50px rgba(255,255,255,0.2); filter: brightness(1.2); }
.quadrant.inactive-turn { filter: brightness(0.4); }

/* SHARED GAME BOARD (Dynamic Grid FIXES applied here) */
#shared-game-board { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(15px); border-radius: 20px; z-index: 10; padding: 15px; border: 3px solid rgba(16, 185, 129, 0.5); box-shadow: 0 20px 60px rgba(0,0,0,1); }
#shared-game-board.active { display: flex; align-items: center; justify-content: center; }
#shared-game-board.grid-mode { display: grid !important; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 65vmin; height: 65vmin; align-items: stretch; justify-items: stretch; }
#shared-game-board.simon-mode { display: grid !important; gap: 15px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 55vmin; height: 55vmin; align-items: stretch; justify-items: stretch; }

/* 1. MATCH STASH (Images & Cards) */
.memory-card { width: 100%; height: 100%; background: #1f2937; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 0 #000; transition: transform 0.1s; overflow: hidden; position: relative; }
.memory-card:active { transform: translateY(6px); box-shadow: 0 0 0 transparent; }
.memory-card.flipped { background: #374151; transform: translateY(6px); box-shadow: none; border: 2px solid var(--theme-accent); }
.memory-card.matched { background: rgba(16, 185, 129, 0.2); opacity: 0.3; pointer-events: none; box-shadow: none; transform: translateY(6px); }
.memory-card::after { content: '🍃'; font-size: 2.5rem; opacity: 0.15; position: absolute; }
.memory-card.flipped::after, .memory-card.matched::after { display: none; }
.memory-card img { width: 80%; height: 80%; object-fit: contain; display: none; }
.memory-card.flipped img, .memory-card.matched img { display: block; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.memory-card .emoji-content { font-size: 2.5rem; display: none; }
.memory-card.flipped .emoji-content, .memory-card.matched .emoji-content { display: block; animation: popIn 0.3s; }
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* 2. ASH DASH */
.cig-wrapper { width: 40px; height: 180px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 10px; border: 2px solid rgba(255,255,255,0.2); overflow: hidden; background: #000; box-shadow: 0 10px 20px rgba(0,0,0,0.5); pointer-events: none; }
.cig-cherry { width: 100%; height: 15px; background: #ef4444; box-shadow: 0 0 20px #ef4444, inset 0 0 10px #f59e0b; animation: burn 0.5s infinite alternate; }
@keyframes burn { from { filter: brightness(1); } to { filter: brightness(1.5); } }
.cig-body { width: 100%; height: 125px; background: #fff; transition: height 0.05s linear; border-left: 5px solid #e5e7eb; }
.cig-filter { width: 100%; height: 40px; background: #d97706; border-left: 5px solid #b45309; border-top: 2px solid rgba(0,0,0,0.2); }
.quadrant.touched .cig-wrapper { transform: scale(0.95); }
.quadrant.touched .cig-cherry { background: #f59e0b; box-shadow: 0 0 30px #f59e0b, 0 0 50px #ef4444; }

/* 3. SIMON SMOKES (Tiles) */
.simon-pad { width: 100%; height: 100%; border-radius: 20px; box-shadow: 0 8px 0 rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.1s, filter 0.1s; filter: brightness(0.6); }
.simon-pad:active { transform: translateY(8px); box-shadow: 0 0 0 transparent; }
.simon-pad.lit { filter: brightness(1.5); transform: scale(1.05); box-shadow: 0 0 40px currentColor; }
#pad-0 { background: #ef4444; color: #ef4444; }
#pad-1 { background: #3b82f6; color: #3b82f6; }
#pad-2 { background: #10b981; color: #10b981; }
#pad-3 { background: #f59e0b; color: #f59e0b; }

/* 4. PUFF PASS REACTION BUTTONS */
.action-btn { width: 110px; height: 110px; border-radius: 50%; background: rgba(0,0,0,0.3); border: 4px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; color: rgba(255,255,255,0.4); transition: all 0.1s; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); pointer-events: none; }
.quadrant.touched .action-btn { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; transform: scale(0.9); box-shadow: 0 0 20px rgba(255,255,255,0.3); }

/* Puff Pass Status Modifiers */
.action-btn.false-start { background: rgba(239, 68, 68, 0.4); border-color: #ef4444; color: #ef4444; filter: grayscale(1); }
.action-btn.winner-hit { background: rgba(16, 185, 129, 0.5); border-color: #10b981; transform: scale(1.1); box-shadow: 0 0 20px #10b981; color: #fff; }

/* The "HIGH" Status CSS Magic */
@keyframes dizzy { 0% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.1) rotate(5deg); } 100% { transform: scale(1) rotate(-5deg); } }
@keyframes rainbowBorder { 0% { border-color: #ef4444; color: #ef4444; } 33% { border-color: #3b82f6; color: #3b82f6; } 66% { border-color: #10b981; color: #10b981; } 100% { border-color: #ef4444; color: #ef4444; } }
.action-btn.high-lock { animation: dizzy 1s infinite, rainbowBorder 2s infinite; filter: blur(1.5px); opacity: 0.8; font-size: 1.2rem; }

.puff-joint { font-size: 6rem; transition: transform 0.1s ease-out, filter 0.1s; padding: 20px; }
.puff-joint.waiting { filter: grayscale(100%) opacity(0.3); }
.puff-joint.ready { filter: none; animation: glowGreen 0.2s infinite alternate; transform: scale(1.1); }
@keyframes glowGreen { from { filter: drop-shadow(0 0 20px #10b981); } to { filter: drop-shadow(0 0 40px #10b981); } }
.floating-text { position: absolute; font-weight: 900; font-size: 2.5rem; text-transform: uppercase; animation: floatUpText 1s forwards; pointer-events: none; text-shadow: 3px 3px 0 #000; z-index: 100; text-align: center; width: 100%; }
@keyframes floatUpText { 0% { opacity: 1; transform: translateY(0) scale(0.5); } 50% { transform: scale(1.2); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }