/* Additions to the original Base44 stylesheet (base44.css is the untouched original). */

/* The hidden attribute must win over display utilities like .inline-flex */
[hidden] { display: none !important; }

/* Entrance animations the original made with framer-motion */
@keyframes jscDrop { 0% { opacity: 0; transform: translateY(-30px) rotate(-10deg); } 60% { opacity: 1; transform: translateY(4px) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes jscUp { 0% { opacity: 0; transform: translateY(24px); } 70% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@keyframes jscFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jscPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes jscHeroMobile { 0% { opacity: 0; transform: translateY(-70px) scale(1.04); } 70% { opacity: 1; transform: translateY(5px) scale(1); } 100% { opacity: 1; transform: none; } }

[data-jsc-in="tile"] { animation: jscDrop .55s cubic-bezier(.3,1.3,.5,1) both, wiggle 2s ease-in-out infinite; }
[data-jsc-in="hero"] { animation: jscUp .8s cubic-bezier(.25,1.2,.45,1) both; }
@media (max-width: 639px) { [data-jsc-in="hero"] { animation: jscHeroMobile .6s cubic-bezier(.3,1.3,.5,1) both; } }
[data-jsc-in="form"] { animation: jscUp .8s cubic-bezier(.25,1.2,.45,1) .15s both; }
[data-jsc-in="cards"] { animation: jscFade .4s ease .4s both; }
.jsc-up { animation: jscUp .45s ease-out both; }
.jsc-pop { animation: jscPop .3s ease-out both; }

@media (prefers-reduced-motion: reduce) {
	[data-jsc-in], .jsc-up, .jsc-pop { animation: none !important; }
}

/* Confetti layer */
.jsc-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* Daily game: the live Base44 game covers the saved page once it has loaded */
.jsc-game { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100%; border: 0; opacity: 0; transition: opacity .25s; z-index: 50; background: #FF8A47; }
.jsc-game.is-ready { opacity: 1; position: fixed; }
.admin-bar .jsc-game.is-ready { top: 32px; height: calc(100vh - 32px); }

.jsc-play{margin:16px auto;padding:16px;max-width:520px;text-align:center;background:#FFD23F;border:3px solid #1A1A2E;border-radius:16px;box-shadow:4px 4px 0 #1A1A2E}
.jsc-play-date{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#1A1A2E;margin:0 0 8px}
.jsc-play-btn{display:inline-block;padding:14px 28px;background:#1A1A2E;color:#fff!important;font-weight:900;font-size:18px;border-radius:12px;text-decoration:none}
.jsc-play-btn:hover{transform:translateY(-1px)}
.jsc-play-steps{font-size:12px;font-weight:700;color:#1A1A2E;margin:10px 0 0}

/* Answer cards: tappable letter tiles and answer boxes (circled = final-answer letters) */
.jsc-tile{cursor:pointer;transition:transform .1s,opacity .15s,background .15s}
.jsc-tile:hover{background:#ffb800}
.jsc-tile:active{transform:translateY(2px);box-shadow:none}
.jsc-tile:disabled{opacity:.25;cursor:default;background:#fff}
.jsc-slot{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:3px dashed #1c1b2e;border-radius:.5rem;background:rgba(255,255,255,.6);font-weight:800;font-size:1.25rem;color:#1c1b2e}
.jsc-slot--ring{border-style:solid;border-radius:9999px;background:#fff3c4;box-shadow:3px 3px 0 #ffb800}