/* ===================================================================== quizUp engine — stylesheet Layout (the flex column, scoreboard ladder, choice boxes, results) is ENGINE and subject-agnostic. The visual THEME below — the bee/honey "Spelling Bee Garden" skin: palette, .qu-bee artwork, spring gradients — is skin-specific; override the qu- palette variables (and .qu-bee) to reskin for another subject. Portrait-first, mobile & desktop. All selectors are namespaced `qu-` to stay isolated inside a host site. ===================================================================== */ .qu-game { /* Palette — SKIN (Spelling Bee Garden). Override these to reskin. */ --qu-sky: #d7eef2; /* morning sky */ --qu-meadow: #fcf7e8; /* warm cream */ --qu-honey: #f2a93b; /* primary / correct */ --qu-honey-deep: #d9851a; --qu-leaf: #6fb04a; /* success reveal */ --qu-leaf-deep: #4a7e30; --qu-petal: #e8675f; /* wrong / alert */ --qu-petal-deep: #c2473f; --qu-bloom: #9b7bd4; /* accent flower */ --qu-ink: #3c2f22; /* warm near-black text */ --qu-ink-soft: #6f5f4d; /* Type */ --qu-display: ui-rounded, "SF Pro Rounded", "Hind", "Segoe UI", system-ui, sans-serif; --qu-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Layout */ --qu-radius: 16px; --qu-gap: 14px; --qu-maxw: 460px; --qu-maxw-landscape: 900px; --qu-score-size: 55%; position: relative; box-sizing: border-box; width: 100%; max-width: var(--qu-maxw); /* Height comes from --qu-height. Default fills the viewport (mobile takes the whole screen). To embed on desktop, wrap #qu-root in a sized element and set --qu-height: 100% on it (see the demo/Blade notes). The double declaration gives a 100vh fallback on browsers without dvh. */ height: var(--qu-height, 100vh); height: var(--qu-height, 100dvh); margin: 0 auto; padding: clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: var(--qu-gap); overflow: hidden; font-family: var(--qu-body); color: var(--qu-ink); background: radial-gradient(120% 60% at 50% 0%, var(--qu-sky) 0%, transparent 60%), linear-gradient(180deg, #eaf6ee 0%, var(--qu-meadow) 42%, #fbeecb 100%); } .qu-game *, .qu-game *::before, .qu-game *::after { box-sizing: border-box; } /* Full-viewport mode (config coverViewport:true). Pins the game to the device viewport regardless of host padding/position. Paired with the JS portal to , this also survives transformed/filtered ancestors. Meant for full-screen (mobile) embedding; on very wide screens it covers edge to edge. */ .qu-game.qu-cover { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* fallback */ height: 100dvh; /* tracks mobile browser toolbars */ max-width: none; margin: 0; z-index: 2147483000; } /* Optional HOST WRAPPER helper for the other case: the game should fill the mobile screen but the PAGE should still scroll (content above/below it). Unlike coverViewport (a fixed takeover that blocks scrolling), this keeps the game in normal flow, sized to one viewport, and breaks out of the parent's horizontal padding. Usage:

(Intended for mobile; on screens wider than the width cap the game centers.) */ .qu-fill-mobile-screen { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); height: 100vh; /* fallback */ height: 100dvh; --qu-height: 100%; } /* ------------------------------- HUD ------------------------------- */ .qu-hud { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 42px; /* match the replay button so HUD height never changes (intro vs play, audio vs silent rounds) */ } .qu-bees { display: flex; gap: 4px; } .qu-bee-slot { display: inline-flex; transition: opacity 0.3s ease; } .qu-bee-slot.is-spent { opacity: 0.18; filter: grayscale(1); } .qu-bee { width: 28px; height: 28px; } .qu-bee__body { fill: var(--qu-honey); } .qu-bee__stripe { stroke: var(--qu-ink); stroke-width: 2; fill: none; stroke-linecap: round; } .qu-bee__wing { fill: rgba(255, 255, 255, 0.82); stroke: rgba(60, 47, 34, 0.25); stroke-width: 1; } .qu-bee__head { fill: var(--qu-ink); } .qu-bee__antenna { stroke: var(--qu-ink); stroke-width: 1.5; fill: none; stroke-linecap: round; } .qu-hud__round { font-family: var(--qu-display); font-weight: 700; font-size: 14px; color: var(--qu-ink-soft); letter-spacing: 0.02em; } .qu-hud__right { display: flex; align-items: center; gap: 10px; } /* ----------------------------- Main band --------------------------- * Holds the Score + Question areas. Its flex-direction and the order/size of its two children are driven by the layout config classes on .qu-game. */ .qu-main { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; gap: var(--qu-gap); } .qu-game.score-top .qu-main, .qu-game.score-bottom .qu-main { flex-direction: column; } .qu-game.score-left .qu-main, .qu-game.score-right .qu-main { flex-direction: row; } /* HUD band: top or bottom of the whole game (fly-layer is absolute, so unordered). */ .qu-game.hud-top .qu-hud { order: 0; } .qu-game.hud-top .qu-main { order: 1; } .qu-game.hud-bottom .qu-main { order: 0; } .qu-game.hud-bottom .qu-hud { order: 1; } /* Score before/after Question depending on which side it's on. */ .qu-game.score-top .qu-score, .qu-game.score-left .qu-score { order: 0; } .qu-game.score-top .qu-play, .qu-game.score-left .qu-play { order: 1; } .qu-game.score-bottom .qu-score, .qu-game.score-right .qu-score { order: 1; } .qu-game.score-bottom .qu-play, .qu-game.score-right .qu-play { order: 0; } /* Wider canvas when laid out side by side (landscape / desktop). */ .qu-game.score-left, .qu-game.score-right { max-width: var(--qu-maxw-landscape); } /* --------------------------- Scoring area -------------------------- */ .qu-score { flex: 0 0 var(--qu-score-size); min-height: 0; min-width: 0; background: rgba(255, 255, 255, 0.42); border: 2px solid rgba(217, 133, 26, 0.22); border-radius: var(--qu-radius); padding: 8px 10px; overflow: hidden; } .qu-score__rail { height: 100%; } .qu-ladder { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2px, 0.6vh, 4px); } .qu-rung { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 1px 4px; border-bottom: 1px dashed rgba(120, 95, 60, 0.16); } .qu-rung:first-child { border-top: none; } .qu-rung__slot { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; } .qu-rung__label { flex: 0 0 auto; width: 48px; text-align: right; font-family: var(--qu-display); font-weight: 800; font-size: clamp(10px, 2.2vh, 15px); color: var(--qu-ink-soft); font-variant-numeric: tabular-nums; } .qu-rung.is-filled .qu-rung__label { color: var(--qu-honey-deep); } /* Score on the left edge: put the percentages on the outer (left) side and let the chips climb on the inner side (next to the Question area), mirroring the default that already suits score-right and portrait. */ .qu-game.score-left .qu-rung { flex-direction: row-reverse; } .qu-game.score-left .qu-rung__label { text-align: left; } .qu-game.score-left .qu-rung__slot { justify-content: flex-end; } /* honey chip that lands in a rung */ .qu-chip { max-width: 100%; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffd27a, var(--qu-honey)); border: 1.5px solid var(--qu-honey-deep); color: var(--qu-ink); font-weight: 700; font-size: clamp(9px, 2.2vh, 14px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(217, 133, 26, 0.5); animation: qu-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes qu-pop { from { transform: scale(0.4); } to { transform: scale(1); } } /* --------------------------- Question area ------------------------- */ .qu-play { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .qu-replay { /* Dimensions are locked with !important because this control is embedded in an unknown host page (e.g. Tailwind/Laravel) whose descendant button rules — like `#app button { min-height: … }` — can out-specify a plain class and stretch it. !important beats any non-important host rule at any specificity. */ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto !important; /* HUD flexbox / host flex must not stretch it */ box-sizing: border-box !important; width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; line-height: 0 !important; border: none !important; border-radius: 50%; background: var(--qu-bloom); color: #fff; cursor: pointer; box-shadow: 0 3px 0 #7a5cb5; transition: transform 0.08s ease, box-shadow 0.08s ease; -webkit-tap-highlight-color: transparent; } .qu-replay[hidden] { display: none; } .qu-replay:hover { transform: translateY(-1px); } .qu-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a5cb5; } .qu-replay .qu-ico { width: 22px !important; height: 22px !important; fill: #fff; stroke: #fff; stroke-width: 1.6; } .qu-instruction { margin: 0; text-align: center; font-family: var(--qu-display); font-weight: 700; font-size: clamp(15px, 2.4vh, 19px); line-height: 1.25; color: var(--qu-ink-soft); animation: qu-fade-up 0.35s ease both; } @keyframes qu-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .qu-choices { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; /* spread instruction + boxes down the area */ align-items: stretch; gap: 10px; } .qu-choice { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 1 auto; /* shrink to fit a small question area */ height: 68px; /* comfortable target height */ min-height: 0; /* …but may compress when space is tight */ padding: 8px 18px; border: 2.5px solid var(--qu-honey-deep); border-radius: var(--qu-radius); background: linear-gradient(180deg, #fffdf6, #fff4dc); color: var(--qu-ink); cursor: pointer; box-shadow: 0 6px 0 var(--qu-honey-deep); transition: transform 0.08s ease, box-shadow 0.08s ease; -webkit-tap-highlight-color: transparent; } .qu-choice:hover { transform: translateY(-1px); } .qu-choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--qu-honey-deep); } .qu-choice:disabled { cursor: default; } .qu-choice__word { font-size: clamp(18px, 5vh, 30px); font-weight: 700; letter-spacing: 0.01em; word-break: break-word; } .qu-choice.is-correct { border-color: var(--qu-leaf-deep); background: linear-gradient(180deg, #eafbe2, #c9efb6); box-shadow: 0 6px 0 var(--qu-leaf-deep); } .qu-choice.is-wrong { border-color: var(--qu-petal-deep); background: linear-gradient(180deg, #ffe9e7, #ffc9c4); box-shadow: 0 6px 0 var(--qu-petal-deep); } .qu-choice.is-revealed { border-color: var(--qu-leaf-deep); background: linear-gradient(180deg, #eafbe2, #c9efb6); box-shadow: 0 0 0 4px rgba(111, 176, 74, 0.3), 0 6px 0 var(--qu-leaf-deep); } .qu-choice.is-revealed::after { content: "correct spelling"; position: absolute; top: -10px; left: 14px; padding: 1px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--qu-leaf-deep); border-radius: 999px; } /* --------------------------- Cards (intro/results) ----------------- */ .qu-card { align-self: center; width: min(100%, 460px); max-height: 100%; background: rgba(255, 255, 255, 0.72); border: 2px solid rgba(217, 133, 26, 0.25); border-radius: var(--qu-radius); padding: 22px 20px; text-align: center; } /* Results in landscape: use the extra horizontal room so the tricky-word chips fit more per row (fewer rows, less chance of needing to scroll). */ .qu-game.score-left.is-results .qu-results, .qu-game.score-right.is-results .qu-results { width: min(100%, 760px); } .qu-intro__art { display: flex; justify-content: center; margin-bottom: 6px; } .qu-intro__art .qu-bee { width: 56px; height: 56px; animation: qu-hover 2.4s ease-in-out infinite; } @keyframes qu-hover { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } } .qu-intro__title { font-family: var(--qu-display); font-size: clamp(26px, 8vw, 34px); margin: 4px 0 8px; color: var(--qu-honey-deep); } .qu-intro__lead { margin: 0 0 18px; color: var(--qu-ink-soft); line-height: 1.5; font-size: 15px; } /* ------------------------------ Buttons ---------------------------- */ .qu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: none; border-radius: 999px; font-family: var(--qu-display); font-weight: 800; font-size: 18px; text-decoration: none; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; } .qu-btn--primary { background: linear-gradient(180deg, #ffc15a, var(--qu-honey)); color: var(--qu-ink); box-shadow: 0 5px 0 var(--qu-honey-deep); } .qu-btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--qu-honey-deep); } .qu-btn--ghost { background: #fff; color: var(--qu-ink); border: 2px solid var(--qu-honey-deep); box-shadow: 0 4px 0 rgba(217, 133, 26, 0.35); } .qu-btn--ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(217, 133, 26, 0.35); } /* ------------------------------ Results ---------------------------- The results card is a flex column that fills its area: the header and the action buttons are pinned, and the tricky-word recap is the part that shrinks, so nothing ever needs a scrollbar. Type sizes are tied to viewport height so the card stays compact on short portrait ratios. */ .qu-results { display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 2.4vh, 22px) 18px; } .qu-results__title { flex: 0 0 auto; font-family: var(--qu-display); font-size: clamp(20px, 5vh, 30px); margin: 0 0 clamp(2px, 1vh, 6px); color: var(--qu-honey-deep); line-height: 1.1; } .qu-results__score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(6px, 1.6vh, 14px); } .qu-results__pct { font-family: var(--qu-display); font-size: clamp(34px, 8.5vh, 52px); font-weight: 800; color: var(--qu-leaf-deep); line-height: 1; } .qu-results__count { color: var(--qu-ink-soft); font-weight: 600; } .qu-results__sub { flex: 0 0 auto; font-weight: 700; margin: clamp(2px, 1vh, 6px) 0 clamp(4px, 1vh, 8px); } .qu-results__clean { flex: 0 0 auto; color: var(--qu-leaf-deep); font-weight: 700; } .qu-tricky { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* scroll as a last resort so no word is hidden */ overscroll-behavior: contain; list-style: none; margin: 0 0 clamp(8px, 1.6vh, 16px); padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 7px; } .qu-tricky__item { display: flex; flex-direction: row; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 11px; background: rgba(255, 243, 220, 0.85); border: 1.5px solid rgba(217, 133, 26, 0.3); } .qu-tricky__right { font-size: clamp(14px, 2.2vh, 18px); font-weight: 800; color: var(--qu-leaf-deep); line-height: 1.2; } .qu-tricky__wrong { font-size: clamp(12px, 1.9vh, 14px); color: var(--qu-petal-deep); text-decoration: line-through; line-height: 1.2; } .qu-results__actions { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; /* falls back to stacked if a single row is too narrow */ gap: clamp(8px, 1.4vh, 10px); align-items: stretch; } .qu-results__actions .qu-btn { flex: 1 1 140px; /* share the row equally; one button => full width */ padding-inline: 14px; /* tighter sides so two labels fit side by side */ white-space: nowrap; } /* ------------------------ Fly layer / particles -------------------- */ .qu-fly-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; } .qu-flyer { position: absolute; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--qu-leaf-deep); border-radius: var(--qu-radius); background: linear-gradient(180deg, #eafbe2, #c9efb6); font-size: clamp(18px, 6vw, 28px); font-weight: 700; color: var(--qu-ink); box-shadow: 0 8px 20px rgba(74, 126, 48, 0.4); } .qu-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff6cf 0%, var(--qu-honey) 70%); box-shadow: 0 0 8px rgba(242, 169, 59, 0.8); } /* ------------------------------ Error ------------------------------ */ .qu-error { margin: 24px auto; max-width: 420px; padding: 16px 18px; border-radius: 12px; background: #fff0ee; border: 2px solid var(--qu-petal-deep, #c2473f); color: #8a2e28; font-weight: 600; text-align: center; } /* ------------------------ Focus & reduced motion ------------------- */ .qu-choice:focus-visible, .qu-btn:focus-visible, .qu-replay:focus-visible { outline: 3px solid var(--qu-bloom); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .qu-chip, .qu-intro__art .qu-bee, .qu-instruction { animation: none; } .qu-choice, .qu-btn, .qu-replay { transition: none; } } /* ------------------------ Short-screen tuning ---------------------- */ @media (max-height: 620px) { .qu-choice { height: 56px; } .qu-choice__word { font-size: clamp(18px, 6vw, 24px); } } /* ------------------------ Results mode: fit, never scroll ----------- Score ladder and results card share the available height and compress; both clip (overflow:hidden) rather than scroll. The card flexes internally (see .qu-results) so its buttons always stay visible. */ /* ------------------ Intro / Results: full-area overlay -------------- * In every layout the intro and results screens take over the whole main band: the Score area is hidden and the Question area (holding the card) fills it. The card centers and caps its width, and flexes internally so it never needs a scrollbar (see .qu-results / .qu-tricky). */ .qu-game.is-intro .qu-score, .qu-game.is-results .qu-score { display: none; } .qu-game.is-intro .qu-play, .qu-game.is-results .qu-play { flex: 1 1 auto; justify-content: center; }