/* * The drag ghost is appended to (so it can follow the pointer past * the board's own bounds), which puts it outside #game-root — hence the * palette is declared for both, or the ghost would render with every * var(--sq-*) unresolved the moment it left the game container. */ #game-root, .sq-card-ghost { --sq-accent: #10B981; --sq-accent-dark: #0c8d64; --sq-accent-light: #e3f9ef; --sq-accent-border: #a7f3d0; --sq-glass-bg: rgba(255, 255, 255, .62); --sq-glass-border: rgba(255, 255, 255, .45); } /* * The kwi-* modifier classes game.js passes to KidWorldIcons.svg() are only * ever *named* by the shared icon helper, never defined by it (its default * amber lives in a zero-specificity :where() rule so any single class wins), * so the tier/status colors are given real values here, scoped to this game. */ #game-root .kwi-accent { color: var(--sq-accent); } #game-root .kwi-success { color: #10B981; } #game-root .kwi-danger { color: #EF4444; } #game-root .kwi-trophy { color: #F59E0B; } #game-root .kwi-stars { color: #8B5CF6; } #game-root .kwi-thumbsup { color: #10B981; } #game-root .kwi-lightning { color: #3B82F6; } #game-root .kwi-smile { color: #F472B6; } #game-root .kwi-muted { color: #cbd5e1; } .kwg-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .sq-wrap { max-width: 640px; margin: 0 auto; } .sq-loading, .sq-error { text-align: center; padding: 48px 16px; } .sq-loading-icon, .sq-error-icon { font-size: 40px; margin-bottom: 10px; } .sq-loading-icon { animation: sq-pulse 1.2s ease-in-out infinite; } .sq-loading-text { font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .sq-error-text { font-size: 15px; font-weight: 700; color: #fff; background: #EF4444; display: inline-block; padding: 6px 16px; border-radius: 999px; } /* ---------- Level picker ---------- */ .sq-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; } .sq-header-icon { display: flex; font-size: 30px; line-height: 1; } .sq-header-icon img { display: block; height: 38px; width: auto; } .sq-header-title { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .sq-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .sq-level-card { display: flex; flex-direction: column; border: 1px solid var(--sq-glass-border); border-radius: var(--kw-radius, 12px); background: var(--sq-glass-bg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); padding: 0; cursor: pointer; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: transform .15s ease, box-shadow .15s ease; } .sq-level-card:hover { transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0, 0, 0, .14); } .sq-level-card:active { transform: translateY(-1px); } .sq-level-thumb { margin-top: 10px; display: flex; align-items: center; justify-content: center; height: 70px; font-size: 36px; background: linear-gradient(135deg, var(--sq-accent-light), var(--sq-accent-border)); background-size: 88px 88px; background-repeat: no-repeat; background-position: center; } .sq-level-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 16px; } .sq-level-name { font-size: 17px; font-weight: 800; color: var(--kw-text, #2D2A32); text-align: center; } .sq-level-age { font-size: 14px; font-weight: 700; color: var(--sq-accent-dark); background: var(--sq-accent-light); padding: 2px 10px; border-radius: 999px; } /* ---------- In-round chrome ---------- */ .sq-level-row { justify-content: space-between; align-items: center; margin-bottom: 10px; } .sq-level-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--sq-accent-light); color: var(--sq-accent-dark); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 12px; } .sq-level-pill-icon { display: inline-flex; line-height: 1; } .sq-level-pill-icon img { display: block; width: 14px; height: 14px; object-fit: cover; border-radius: 50%; } .sq-change-level-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sq-glass-border); background: var(--sq-glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sq-accent-dark); border-radius: 999px; font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer; padding: 6px 12px 6px 10px; transition: transform .1s ease, background .15s ease; } .sq-change-level-btn svg { width: 12px; height: 12px; } .sq-change-level-btn:hover { background: rgba(255, 255, 255, .8); transform: translateY(-1px); } .sq-change-level-btn:active { transform: translateY(0); } .sq-progress { height: 8px; border-radius: 999px; background: var(--sq-accent-light); overflow: hidden; margin-bottom: 12px; } .sq-progress-fill { height: 100%; width: 0; background: var(--sq-accent); border-radius: 999px; transition: width .3s ease; } .sq-stat-row { justify-content: center; margin-bottom: 14px; } .sq-stat { display: inline-flex; align-items: center; gap: 5px; background: var(--sq-accent-light); color: var(--sq-accent-dark); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; } .sq-hint-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: #FEF3C7; color: #92400E; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .1s ease, background .15s ease; } .sq-hint-btn:hover:not(:disabled) { background: #FDE68A; transform: translateY(-1px); } .sq-hint-btn:disabled { opacity: .5; cursor: default; } /* ---------- Story head ---------- */ .sq-story-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; } .sq-story-emoji { font-size: 32px; line-height: 1; } .sq-story-title { font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .sq-instruction { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; opacity: .85; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); margin-bottom: 16px; } /* ---------- The card strip ---------- */ /* * One card per row, top to bottom: a story is a sequence, and a single * numbered column reads as one (1, 2, 3 ...) in a way a wrapping grid does * not — in a grid the reader has to work out whether the order runs across * the rows or down the columns before they can even start sequencing. * It also makes the drag gesture purely vertical, which matches "move this * scene earlier or later". */ .sq-board { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } /* * One fixed position in the story. The number lives here, not on the card, so * the 1, 2, 3 ... rail stays put while cards move between rows. The whole row * is the drag/tap handle (a tap on the number picks up that row's card), which * is why touch-action is pinned here rather than on the card. */ .sq-slot { display: flex; align-items: center; gap: 10px; /* The row is a drag handle, so a touch-drag must not scroll the page. */ touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .sq-slot-number { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 30px; background: rgba(255, 255, 255, .55); border: 1px solid var(--sq-glass-border); color: var(--sq-accent-dark); border-radius: 9px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: default; } .sq-slot-locked .sq-slot-number { background: var(--sq-accent); border-color: var(--sq-accent); color: #fff; } .sq-card { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--sq-glass-border); border-radius: var(--kw-radius, 12px); background: var(--sq-glass-bg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); cursor: grab; animation: sq-fade-in .25s ease; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } .sq-card:hover { transform: translateX(3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); } .sq-card-art { flex: 0 0 auto; width: 36px; text-align: center; font-size: 26px; line-height: 1.1; } .sq-card-text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; color: var(--kw-text, #2D2A32); } .sq-card-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; font-size: 16px; line-height: 1; } /* Confirmed correct by a check or a hint — pinned, and no longer a drag handle. */ .sq-card-locked { cursor: default; background: rgba(227, 249, 239, .9); border-color: var(--sq-accent-border); } .sq-card-locked:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } /* Let elementFromPoint resolve straight to the card during a drag. */ .sq-card-text, .sq-card-art { pointer-events: none; } /* Tap-selected, waiting for a second tap to say where it should go. */ .sq-card-selected { box-shadow: 0 0 0 3px var(--sq-accent), 0 8px 16px rgba(0, 0, 0, .16); transform: translateX(3px); } /* The card currently being dragged keeps its place, dimmed, as a gap marker. */ .sq-card-dragging { opacity: .35; } .sq-card-drop-ok { box-shadow: 0 0 0 3px var(--sq-accent); } .sq-card-drop-bad { box-shadow: 0 0 0 3px #EF4444; } .sq-card-wrong { animation: sq-shake .5s ease; border-color: #EF4444; } .sq-card-hint { animation: sq-glow 1.5s ease; } .sq-card-just-locked { animation: sq-pop .35s ease; } /* The clone that follows the pointer; lives on , never hit-tested. */ .sq-card-ghost { position: fixed; flex: 0 0 auto; z-index: 9999; margin: 0; pointer-events: none; opacity: .92; cursor: grabbing; transform: rotate(-2deg) scale(1.04); box-shadow: 0 14px 26px rgba(0, 0, 0, .28); animation: none; } /* ---------- Footer (check button / round result) ---------- */ .sq-footer { display: flex; flex-direction: column; align-items: center; gap: 15px; } .sq-check-btn { min-width: 200px; justify-content: center; } .sq-footer-note { font-size: 13px; font-weight: 700; color: #fff; opacity: .9; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .sq-round-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--sq-glass-border); border-radius: var(--kw-radius, 12px); background: var(--sq-glass-bg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); animation: sq-fade-in .25s ease; width: 100%; } .sq-round-done-title { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--kw-text, #2D2A32); } .sq-round-done-score { font-size: 14px; font-weight: 600; color: var(--kw-text-muted, #6B6875); text-align: center; } /* ---------- Session result ---------- */ .sq-done-card { text-align: center; padding: 26px 18px; border: 1px solid var(--sq-glass-border); border-radius: var(--kw-radius, 12px); background: var(--sq-glass-bg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); animation: sq-fade-in .3s ease; } .sq-done-emoji { font-size: 46px; line-height: 1; margin-bottom: 10px; } .sq-done-title { font-size: 21px; font-weight: 800; color: var(--kw-text, #2D2A32); margin-bottom: 6px; } .sq-done-score { font-size: 15px; font-weight: 700; color: var(--sq-accent-dark); } .sq-done-stars { margin-top: 10px; display: flex; justify-content: center; gap: 4px; font-size: 22px; } .sq-star { display: inline-flex; line-height: 1; } .sq-done-share { justify-content: center; margin-top: 16px; } .sq-done-actions { justify-content: center; margin-top: 20px; } .sq-btn-primary, .sq-btn-secondary { display: inline-flex; align-items: center; gap: 6px; border: none; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .1s ease; } .sq-btn-primary { background: var(--sq-accent); color: #fff; box-shadow: 0 3px 0 var(--sq-accent-dark); } .sq-btn-primary:hover { transform: translateY(-1px); } .sq-btn-secondary { background: var(--sq-accent-light); color: var(--sq-accent-dark); } .sq-btn-secondary:hover { background: var(--sq-accent-border); } @keyframes sq-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes sq-pop { 0% { transform: scale(.92); } 100% { transform: scale(1); } } @keyframes sq-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes sq-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, .35); } } @keyframes sq-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } } @media (max-width: 420px) { .sq-story-title { font-size: 17px; } .sq-card { padding: 8px 10px; gap: 8px; } .sq-slot { gap: 8px; } .sq-slot-number { width: 24px; height: 26px; font-size: 15px; } .sq-card-art { width: 32px; font-size: 25px; } .sq-card-text { font-size: 13px; } .sq-check-btn { min-width: 0; width: 100%; } .sq-stat, .sq-hint-btn { font-size: 13px; padding: 5px 11px; } }