/* ---------- Game page responsive image & layout overrides (light/dark aware) ---------- */ /* Base (dark-leaning defaults) */ :root { --card-max-w: 620px; --card-min-h: 220px; --card-max-h: 48vh; --card-ratio: 4 / 3; --card-radius: 14px; --card-bg: #0c141d; --card-shadow: 0 4px 18px rgba(0,0,0,.25); --card-shadow-hover: 0 6px 22px rgba(0,0,0,.40); --frame-bg: #0c141d; --hover-brightness: 1.05; } /* Auto-light theme (users on light mode) */ @media (prefers-color-scheme: light) { :root { --card-bg: #ffffff; --card-shadow: 0 4px 18px rgba(0,0,0,.14); --card-shadow-hover: 0 8px 30px rgba(0,0,0,.18); --frame-bg: #f3f5f7; --hover-brightness: 1.02; } } /* Optional manual override (e.g., on or "...='dark'") */ html[data-theme="light"] { --card-bg: #ffffff; --card-shadow: 0 4px 18px rgba(0,0,0,.14); --card-shadow-hover: 0 8px 30px rgba(0,0,0,.18); --frame-bg: #f3f5f7; --hover-brightness: 1.02; } html[data-theme="dark"] { --card-bg: #0c141d; --card-shadow: 0 4px 18px rgba(0,0,0,.25); --card-shadow-hover: 0 6px 22px rgba(0,0,0,.40); --frame-bg: #0c141d; --hover-brightness: 1.05; } /* Grid */ .cards { display: grid; gap: 18px; grid-template-columns: 1fr; justify-content: center; align-items: start; } @media (min-width: 820px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Card */ .card { position: relative; max-width: var(--card-max-w); margin-inline: auto; border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background-color .25s ease; } .card:hover, .card:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: var(--card-shadow-hover); filter: brightness(var(--hover-brightness)); } /* Frame (consistent box) */ .frame { position: relative; width: 100%; height: clamp(var(--card-min-h), var(--card-max-h), 9999px); aspect-ratio: var(--card-ratio); background: var(--frame-bg); overflow: hidden; display: grid; place-items: center; border-radius: inherit; } /* Image (cropped & responsive) */ .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; } .card:hover .frame img { transform: scale(1.05); } /* Tiny phones: allow a bit more height */ @media (max-width: 380px) { :root { --card-max-h: 56vh; } } /* Overlays */ .label, .pick, .reveal { pointer-events: none; } .pick .btn { pointer-events: auto; } /* Button micro-interactions */ .pick .btn { transition: transform .2s ease, background .2s ease; } .pick .btn:hover { transform: translateY(-2px); background: rgba(0,0,0,.08); } @media (prefers-color-scheme: dark) { .pick .btn:hover { background: rgba(255,255,255,.12); } } html[data-theme="light"] .pick .btn:hover { background: rgba(0,0,0,.08); } html[data-theme="dark"] .pick .btn:hover { background: rgba(255,255,255,.12); } /* Reveal polish */ .reveal.show .chip { transition: opacity .4s ease, transform .3s ease; transform: translateY(0); opacity: 1; } /* ---------- Correct / Incorrect outline feedback ---------- */ /* When an image is revealed and is the correct AI pick */ .card.correct .frame { border: 3px solid rgba(25,195,125,0.8); /* bright green border */ box-shadow: 0 0 14px rgba(25,195,125,0.55); animation: correct-glow 1.4s ease-in-out; } /* When an image is revealed but was the wrong pick */ .card.incorrect .frame { border: 3px solid rgba(255,92,92,0.8); /* soft red border */ box-shadow: 0 0 14px rgba(255,92,92,0.55); animation: incorrect-glow 1.4s ease-in-out; } /* Gentle pulse keyframes */ @keyframes correct-glow { 0%,100% { box-shadow: 0 0 10px rgba(25,195,125,.6); } 50% { box-shadow: 0 0 22px rgba(25,195,125,.9); } } @keyframes incorrect-glow { 0%,100% { box-shadow: 0 0 10px rgba(255,92,92,.6); } 50% { box-shadow: 0 0 22px rgba(255,92,92,.9); } } /* ---------- Thin, fixed progress bar at very top ---------- */ .top-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.06); /* subtle track */ border-bottom: 1px solid var(--ring); z-index: 9999; /* above header/toast */ } .top-progress > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #6ea8fe), #9bd2ff); transition: width .35s ease; } /* Optional: subtle shimmer while loading first round */ @keyframes topbar-stripes { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } } .top-progress.loading > span { background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.25) 0 10px, rgba(255,255,255,0) 10px 20px ); background-size: 40px 100%; animation: topbar-stripes 1.2s linear infinite; } /* ---------- Progress bar under score ---------- */ .top-progress { position: relative; margin-top: 6px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); flex: 1; } .top-progress > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent, #6ea8fe), #9bd2ff); transition: width .35s ease; border-radius: inherit; } .progress-label { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--muted, #aaa); font-weight: 600; pointer-events: none; } /* Light/dark adjustments */ @media (prefers-color-scheme: light) { .top-progress { background: rgba(0,0,0,.08); } .progress-label { color: rgba(0,0,0,.55); } } /* Fade the percentage when complete, and give the bar a subtle success tint */ .top-progress { position: relative; } .top-progress .progress-label { transition: opacity .25s ease, transform .25s ease; } .top-progress.is-complete .progress-label { opacity: 0; transform: translateY(-2px); } /* Optional: a gentle green shift at 100% */ .top-progress.is-complete > span { background: linear-gradient(90deg, #19c37d, #7ee0b4); } /* ---------- Buttons: match Categories page look ---------- */ /* Primary action buttons (Reveal / Next / Restart) */ .btn-main { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; /* same shape as .link in categories */ border: 1px solid var(--ring); background: linear-gradient(180deg,#172031,#121a28); /* same gradient as categories */ color: var(--text); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .btn-main:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 3px 10px rgba(0,0,0,.18); } .btn-main:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(110,168,254,.45); } .btn-main[disabled] { opacity: .55; cursor: not-allowed; } /* Secondary in-card “This is AI” buttons */ .pick .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; /* matches categories .btn */ border-radius: 10px; /* matches categories .btn */ border: 1px solid var(--ring); background: linear-gradient(180deg,#172031,#121a28); color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .pick .btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 3px 10px rgba(0,0,0,.18); } .pick .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(110,168,254,.45); } /* Make header nav .link match too (already similar) */ header .link { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ring); background: linear-gradient(180deg,#172031,#121a28); text-decoration: none; color: var(--text); transition: transform .12s ease; } header .link:hover { transform: translateY(-1px); } /* Tighten button area on small screens so they wrap nicely */ .controls { gap: 10px; flex-wrap: wrap; } /* ---------- Ghost / Secondary Buttons ---------- */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ring); background: transparent; color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; transition: color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .12s ease; } /* Hover + focus feel like the filled buttons, but lighter */ .btn-ghost:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); } .btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(110,168,254,.45); } /* Light-mode refinement */ @media (prefers-color-scheme: light) { .btn-ghost:hover { background: rgba(0,0,0,.06); } } /* Disabled state */ .btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }