/* Minimal CSS for flip animation and small helpers */

/* Card flip */
.card{display:block;border:none;background:transparent;padding:0;perspective:800px}
.card-inner{position:relative;width:100%;padding-top:100%;transform-style:preserve-3d;transition:transform .45s ease}
.card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
/* theme variables */
.root{--card-back-bg:linear-gradient(180deg,#1e40af,#4f46e5);--card-front-bg:#fff;--card-front-border:#e5e7eb;--text-on-back:#fff}
/* Card-only dark mode: apply when body has .dark-cards */
body.dark{--card-back-bg:#0f172a;--card-front-bg:#0b1220;--card-front-border:#1f2937;--text-on-back:#fff}

/* front is gradient initially (before flip) */
.card-front{background:linear-gradient(180deg,#1e40af,#4f46e5);border:2px dashed var(--card-front-border);color:#374151}
.card-back{background:var(--card-back-bg);color:var(--text-on-back);transform:rotateY(180deg)}

/* in dark mode, use solid border for card front */
html.dark .card-front, body.dark .card-front{border-style:solid}

/* animation & hover */
.card-inner{position:relative;width:100%;padding-top:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-6px)}
.card:active{transform:translateY(-2px)}
.card.flipped{z-index:2}

/* Light-mode: emphasize flipped card outline and shadow */
html:not(.dark) .card.flipped, body:not(.dark) .card.flipped{
	box-shadow: 0 8px 20px rgba(2,6,23,0.08);
	outline: 2px solid rgba(17,24,39,0.06);
}

/* emoji sizing */
.card-face .emoji{display:inline-block;font-size:1.6rem}
.card-face .emoji.large{font-size:2.2rem}

/* Page-wide dark mode overrides (more specific than Tailwind classes) */
html.dark, body.dark{background:#071026;color:#e6eef8}
html.dark main, body.dark main{background:linear-gradient(180deg,#021028,#081223) !important}
html.dark header, body.dark header, html.dark p, body.dark p, html.dark .stats, body.dark .stats, html.dark .hint, body.dark .hint{color:#e6eef8}
html.dark button, body.dark button{background-color:rgba(255,255,255,0.06);color:#e6eef8}
html.dark .px-3, body.dark .px-3{background-color:rgba(255,255,255,0.06)}

/* Stat icon and text styling for both themes */
.stat-icon{width:1.2rem;height:1.2rem;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.stats > div{display:flex;align-items:center;gap:0.5rem}

/* Dark mode: make stat numbers and icons brighter for contrast */
html.dark .stats, body.dark .stats{color:#dbeeff}
html.dark .stats .stat-icon, body.dark .stats .stat-icon{color:#9bd1ff}

/* Light mode: slightly darker icons for readability */
html:not(.dark) .stats .stat-icon, body:not(.dark) .stats .stat-icon{color:#374151}

/* Ensure victory modal sits above transformed/stacked card elements */
#victoryModal{z-index:100000;display:none}
#victoryModal.flex{display:flex}
#victoryModal > div{position:relative;z-index:100001}

/* Dark-mode adjustments for the victory modal to improve contrast */
html.dark #victoryModal > div, body.dark #victoryModal > div{
	background:#0b1220; /* dark card background */
	color:#e6eef8; /* light text */
	box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}
/* Override modal text color utility inside modal for dark mode */
html.dark #victoryModal .text-gray-700, body.dark #victoryModal .text-gray-700{
	color: #cfe6ff !important;
}
/* Secondary button: darker background for contrast */
html.dark #victoryModal .bg-gray-100, body.dark #victoryModal .bg-gray-100{
	background-color: #1f2937 !important;
	color: #e6eef8 !important;
}
/* Primary button: slightly brighter indigo in dark mode */
html.dark #victoryModal .bg-indigo-600, body.dark #victoryModal .bg-indigo-600{
	background-color: #5b21b6 !important;
}


.hidden{display:none}

/* Small helper to ensure grid cards fill available space */
#board > .card{width:100%;display:block}
/* ensure card occupies a square area inside the CSS grid */
#board > .card .card-inner{width:100%;height:0;padding-top:100%}
#board{align-items:stretch}

/* Modal override when not using aria-hidden */
#victoryModal.flex{display:flex}

/* Emoji fallback sizing */
.card-face .emoji{display:inline-block;font-size:1.6rem;margin-left:0.6rem}
.card-face i{font-size:1.4rem}