/* ============================================================ Card Flip – style.css Purpose: Keep original look/feel (fixed cozy header/footer), correct asset paths, centered card grid with its own section. ============================================================ */ /* =================================== 1) BASE & RESET =================================== */ html, body { user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 100%; overflow: hidden; /* 🚫 prevent page scrolling */ } input, textarea { user-select: text; -webkit-user-select: text; -ms-user-select: text; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #e5f0df; color: #fff; display: flex; flex-direction: column; min-height: 100vh; } /* When any modal is open, also lock scroll (JS toggles on ) */ body.modal-open { overflow: hidden; } /* Optional: while intro/welcome modal is open, hide the board (JS also does this) */ body.modal-open #game-container { visibility: hidden; } /* ============================================ 2) BACKGROUND VIDEO ============================================ */ #background-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: none; pointer-events: none; } /* ============================================ 3) HEADER – Cozy rectangle (centered, capped) ============================================ */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; display: flex; justify-content: center; background: transparent; /* outer stays transparent */ height: 65px; /* matches inner rectangle */ } #header-rectangle { width: min(600px, 100%); height: 60px; margin: 0 auto; background-color: #333; display: flex; align-items: center; justify-content: center; } #header-group { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; } #settings-btn { background: none; border: none; cursor: pointer; color: #fff; } #reset-game-btn { padding: 6px 12px; font-size: 14px; cursor: pointer; background: #eee; border-radius: 5px; border: 1px solid #ccc; white-space: nowrap; } .header-block { display: flex; flex-direction: column; align-items: center; min-width: 60px; } .header-label { font-size: 12px; color: #ccc; } .header-value, .header-timer { font-size: 18px; font-weight: bold; color: #fff; } /* ============================================ 4) FOOTER – Cozy rectangle (centered, capped) ============================================ */ footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; display: flex; justify-content: center; background: transparent; /* outer stays transparent */ height: 60px; /* matches inner rectangle */ } #footer-rectangle { width: min(600px, 100%); height: 60px; margin: 0 auto; background-color: #333; display: flex; align-items: center; justify-content: center; } #footer-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* centers the name */ } .footer-group { display: flex; gap: 10px; } /* lock left and right groups to edges of the 600px rectangle */ #footer-container .footer-group:first-child { position: absolute; left: 10px; } #footer-container .footer-group:last-child { position: absolute; right: 10px; } #footer-center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-weight: bold; font-size: 14px; color: #fff; white-space: nowrap; } /* Cozy button look */ .footer-button, #game-mode-btn, #deck-collection-btn, #stats-btn, #levels-btn { all: unset; padding: 8px 12px; background-color: #007bff; color: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; text-align: center; min-width: 72px; box-sizing: border-box; transition: background-color 0.2s ease; } .footer-button:hover, #game-mode-btn:hover, #deck-collection-btn:hover, #stats-btn:hover, #levels-btn:hover { background-color: #0056b3; } /* ============================================ 5) Board / Grid (scrollable, safe rails) ============================================ */ /* Safe area between header/footer */ /* SAFE AREA between fixed header/footer */ #cardflip-area-wrapper { position: fixed; top: 60px; /* below header */ bottom: 60px; /* above footer */ left: 0; right: 0; overflow-y: auto; /* scroll when needed */ overflow-x: hidden; -webkit-overflow-scrolling: touch; /* center horizontally; allow smart vertical centering */ display: flex; flex-direction: column; /* needed for vertical auto margins trick */ align-items: center; /* horizontal center */ padding-block: 8px; /* tiny buffer so top row is always fully visible */ } /* The grid container itself */ #cardflip-cards-container { display: grid; gap: 10px; width: max-content; /* Smart vertical behavior: center when it fits, top when it overflows */ margin-block: auto; /* <-- key: centers vertically only if space exists */ margin-inline: 0; justify-items: center; align-items: start; } /* Hide scroller */ #cardflip-area-wrapper { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } #cardflip-area-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* ============================================ 6) CARD FACES & FLIP STATES – Visuals (supports both `.card` and `.cardflip-card`) ============================================ */ .card, .cardflip-card { width: clamp(48px, 14vw, 90px); height: clamp(64px, 18vw, 120px); background-image: url("assets/images/cardStyles/cardstyledefault.png"); background-repeat: no-repeat; background-position: center; background-size: contain; border: 2px solid #000; border-radius: 8px; position: relative; cursor: pointer; user-select: none; color: transparent; transition: transform .4s ease, background-color .3s ease, color .3s ease; transform-style: preserve-3d; } /* Always: matched cards can’t be clicked */ .card.matched, .cardflip-card.matched { pointer-events: none; } /* ✅ Ensure text is on the actual card face */ .cardflip-card-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(24px, 5vw, 42px); line-height: 1; color: transparent; /* hidden by default */ user-select: none; pointer-events: none; backface-visibility: hidden; /* prevents early bleed-through */ } /* ============================================ 7) UTILITIES (existing bits you had) ============================================ */ #save-deck-style { display: block; background-color: #27ae60; color: #fff; border: none; border-radius: 0; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; margin: 1px auto 12px; padding: 10px 16px; } #save-deck-style:hover { background-color: #1e874b; } /* The stats text in header that shows flips */ #cards-flipped-tracker { color: #fff; } /* ============================================ 8) RESPONSIVE TWEAKS ============================================ */ @media (max-width: 480px) { .footer-button, #game-mode-btn, #deck-collection-btn, #stats-btn, #levels-btn { font-size: 13px; padding: 8px 10px; min-width: 64px; } } /* ============================================================ 9) 🎨 Colors Mode Styles (auto-fit) - JS sets backgroundColor + text color. - CSS: hide backs on face-up/matched, keep flip. - Text scales with the CARD (container units) and can be further tightened via a --fit-scale var (default 1). ============================================================ */ /* Never show a back on face-up or matched color cards */ body.colors-mode .cardflip-card[data-face-up="true"], body.colors-mode .cardflip-card.is-matched { background-image: none !important; } /* Give cards an inner padding and make each a size container */ body.colors-mode .cardflip-card { padding: 0 2px; /* ✅ exactly 2px per side */ box-sizing: border-box; container-type: inline-size; /* enables cqw units for children */ } /* Keep the flip effect; do not repaint the face */ body.colors-mode .cardflip-card[data-face-up="true"] { transform: rotateY(180deg) scaleX(-1); } body.colors-mode .cardflip-card .cardflip-card-center { display: flex; align-items: center; justify-content: center; /* Base font size scales with the CARD width; bounded by clamp */ font-weight: 700; font-size: clamp(16px, 18cqw, 96px); /* 🔥 bigger base & max */ line-height: 1; /* gives more vertical room */ text-align: center; width: 100%; height: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; /* Flip-safe transform; --fit-scale allows JS tightening when needed */ --fit-scale: 1; transform: rotateY(180deg) scaleX(-1) scale(var(--fit-scale)); transform-origin: center center; will-change: transform; } /* Ensure the label isn't hidden in Colors mode when face-up */ body.colors-mode .cardflip-card[data-face-up="true"] .cardflip-card-center { color: inherit; /* JS sets a readable color */ } /* ============================================================ 10) Shapes Mode (self-contained, crisp) ============================================================ */ /* Center box only in Shapes mode */ body.shapes-mode .cardflip-card .cardflip-card-center{ position:relative;width:100%;height:100%;display:grid;place-items:center;color:transparent; backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) scaleX(-1) translateZ(0); } /* Make the card flip show the front (counter-rotate trick) */ body.shapes-mode .cardflip-card[data-face-up="true"]{ transform:rotateY(180deg) scaleX(-1); } /* Base layers (no filters/animations to avoid blur) */ body.shapes-mode .cardflip-card-center.shape-icon::before, body.shapes-mode .cardflip-card-center.shape-icon::after{ content:"";position:absolute;display:block; --inset-h:12%;--inset-v:12%; inset:var(--inset-v) var(--inset-h); } body.shapes-mode .cardflip-card-center.shape-icon::before{ --shape-fill:#5a5a5a; background:var(--shape-fill); } /* Keep visible when matched, but don't scale */ body.shapes-mode .cardflip-card.is-matched .cardflip-card-center.shape-icon::before{opacity:1} /* Keep visible when matched, but don't scale */ body.shapes-mode .cardflip-card.is-matched .cardflip-card-center.shape-icon::before{opacity:1} /* ---------- Shapes ---------- */ body.shapes-mode .shape-icon[data-shape="circle"]::before{border-radius:50%} body.shapes-mode .shape-icon[data-shape="square"]::before{border-radius:8%} body.shapes-mode .shape-icon[data-shape="rounded_square"]::before{border-radius:20%} body.shapes-mode .shape-icon[data-shape="diamond"]::before{transform:rotate(45deg);border-radius:6%} body.shapes-mode .shape-icon[data-shape="rectangle"]::before{inset:24% 10%;border-radius:8%} body.shapes-mode .shape-icon[data-shape="pentagon"]::before{clip-path:polygon(50% 6%,94% 38%,78% 94%,22% 94%,6% 38%)} body.shapes-mode .shape-icon[data-shape="oval"]::before{inset:18% 10%;border-radius:50%/38%} body.shapes-mode .shape-icon[data-shape="capsule"]::before{inset:28% 12%;border-radius:999px} /* Triangles & variants — optical centering via insets (no translate/scale) */ body.shapes-mode .shape-icon[data-shape="triangle"]::before{ --inset-h:16%;--inset-v:13%;clip-path:polygon(50% 8%,10% 92%,90% 92%); } body.shapes-mode .shape-icon[data-shape="right_triangle"]::before{ --inset-h:14%;--inset-v:13%;clip-path:polygon(10% 12%,90% 12%,10% 90%); } body.shapes-mode .shape-icon[data-shape="rounded_triangle"]::before{ --inset-h:16%;--inset-v:13%;clip-path:polygon(50% 10%,12% 90%,88% 90%); } /* Half circle (flat side down) */ body.shapes-mode .shape-icon[data-shape="half_circle"]::before{ inset:22% 15% 33% 15%; border-radius:100% 100% 0 0/100% 100% 0 0; } /* Trapezoid & Parallelogram */ body.shapes-mode .shape-icon[data-shape="trapezoid"]::before{clip-path:polygon(16% 14%,84% 14%,94% 86%,6% 86%)} body.shapes-mode .shape-icon[data-shape="parallelogram"]::before{clip-path:polygon(22% 16%,100% 16%,78% 84%,0% 84%)} /* Chevron & Arrowhead — tip-heavy → more top/side inset */ body.shapes-mode .shape-icon[data-shape="chevron"]::before{ --inset-h:16%;--inset-v:13%; clip-path:polygon(50% 16%,92% 48%,76% 48%,50% 30%,24% 48%,8% 48%); } body.shapes-mode .shape-icon[data-shape="arrowhead"]::before{ --inset-h:16%;--inset-v:14%; clip-path:polygon(50% 10%,92% 90%,8% 90%); } /* Kite */ body.shapes-mode .shape-icon[data-shape="kite"]::before{ clip-path:polygon(50% 8%,86% 50%,50% 92%,14% 50%); } /* Hexagram (two triangles) */ body.shapes-mode .shape-icon[data-shape="hexagram"]::before, body.shapes-mode .shape-icon[data-shape="hexagram"]::after{ inset:12% 16%; } body.shapes-mode .shape-icon[data-shape="hexagram"]::before{clip-path:polygon(50% 8%,92% 88%,8% 88%)} body.shapes-mode .shape-icon[data-shape="hexagram"]::after{ background:var(--shape-fill); clip-path:polygon(50% 92%,92% 12%,8% 12%); } /* Bean (fallback → oval; upgraded when masks supported) */ body.shapes-mode .shape-icon[data-shape="bean"]::before{inset:16% 10%;border-radius:50%/40%} @supports (mask:radial-gradient(#000,transparent)){ body.shapes-mode .shape-icon[data-shape="bean"]::before{ inset:10% 8%;background:var(--shape-fill); -webkit-mask: radial-gradient(65% 65% at 38% 60%,#000 98%,transparent 99%) left/60% 100% no-repeat, radial-gradient(60% 60% at 72% 40%,#000 98%,transparent 99%) right/50% 100% no-repeat; mask: radial-gradient(65% 65% at 38% 60%,#000 98%,transparent 99%) left/60% 100% no-repeat, radial-gradient(60% 60% at 72% 40%,#000 98%,transparent 99%) right/50% 100% no-repeat; } } /* Keep shapes fully inside the card */ body.shapes-mode .cardflip-card .cardflip-card-center{ overflow:hidden; /* clip any stray pixels */ } /* --- Fix diamonds so they never overflow --- */ /* Draw as a diamond via clip-path instead of rotating a square */ body.shapes-mode .shape-icon[data-shape="diamond"]::before{ inset:14% 14%; /* even padding on all sides */ border-radius:0; /* no rounded corners here */ clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform:none; /* remove rotate that caused bleed */ } /* Rhombus (slightly squat diamond) – also stays within bounds */ body.shapes-mode .shape-icon[data-shape="rhombus"]::before{ inset:16% 14%; clip-path:polygon(50% 6%, 92% 50%, 50% 94%, 8% 50%); transform:none; border-radius:0; } /* (Optional) Kite – ensure safe padding too */ body.shapes-mode .shape-icon[data-shape="kite"]::before{ inset:14% 16%; clip-path:polygon(50% 6%, 90% 50%, 50% 94%, 10% 50%); } /* Hide label when face-down to prevent 1-frame flash */ .cardflip-card[data-face-up="false"] .cardflip-card-center { visibility: hidden; opacity: 0; } /* 11 Blind Match */ /* Blind match overlay */ /* Blind match overlay image */ .blind-match-fx { position: absolute; top: -10%; /* extend above */ left: -10%; /* extend left */ width: 120%; /* grow overall */ height: 120%; pointer-events: none; z-index: 6; transform: rotateY(180deg) scaleX(-1); animation: blindMatchPop 2.25s ease-in-out; } body.prestart #cardflip-cards-container { display: none; } /* Blank Cards */ /* SECTION: Challenge – Blank Cards visual */ .cardflip-card.challenge-blank .cardflip-card-center { visibility: hidden !important; opacity: 0 !important; pointer-events: none; transition: opacity .12s linear; } /* Only remove the FACE art while face-up, keep the back intact */ .cardflip-card[data-face-up="true"].challenge-blank { background-image: none !important; } /* Keep face visible while reverse flip is animating */ .cardflip-card.flipping-down .cardflip-card-center { visibility: visible !important; opacity: 1 !important; }