/* ---- Self-hosted fonts ---- */
@font-face { font-family: 'Fredoka'; font-weight: 400; src: url('../fonts/fredoka-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 500; src: url('../fonts/fredoka-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 600; src: url('../fonts/fredoka-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 700; src: url('../fonts/fredoka-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 600; src: url('../fonts/nunito-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 700; src: url('../fonts/nunito-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 800; src: url('../fonts/nunito-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 900; src: url('../fonts/nunito-900.woff2') format('woff2'); font-display: swap; }

/* ---- Design tokens ---- */
:root {
  --c-pink:   #ff2d6f;
  --c-cyan:   #22d3ee;
  --c-yellow: #ffd23f;
  --c-green:  #2ee86e;
  --c-orange: #ff8a00;
  --c-purple: #b14bff;
  --c-blue:   #3b82f6;
  --c-red:    #ff3b3b;
  --ink:      #1a1030;
  --bg:       radial-gradient(120% 90% at 50% 0%, #211a4d 0%, #120e2e 45%, #08060f 100%);
  --board:    linear-gradient(180deg, #2546ff, #1a30c4);
  --cell:     radial-gradient(circle at 38% 34%, #0a0820, #05040f);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
::-webkit-scrollbar { width: 0; height: 0; }
body { background: #08060f; color: #fff; font-family: 'Nunito', system-ui, sans-serif; overflow: hidden; }
.boot { display: flex; align-items: center; justify-content: center; height: 100vh; color: #22d3ee; font-weight: 800; }
#app { height: 100vh; }
.arc-root { font-family: 'Nunito', system-ui, sans-serif; position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--bg); color: #fff; }
.font-display { font-family: 'Fredoka', system-ui, sans-serif; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #ff2d6f; color: #fff; padding: 10px; text-align: center; z-index: 100; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: 8px; cursor: pointer; }

/* ---- Keyframes (verbatim from design source) ---- */
@keyframes drop { 0% { transform: translateY(-580px) scaleY(1); animation-timing-function: cubic-bezier(.5,0,.85,.4); } 50% { transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(.2,.7,.4,1); } 57% { transform: translateY(0) scale(1.16,.82); } 66% { transform: translateY(-46px) scale(.94,1.06); animation-timing-function: cubic-bezier(.5,0,.85,.4); } 80% { transform: translateY(0) scale(1.07,.93); } 90% { transform: translateY(-14px) scale(1,1); } 100% { transform: translateY(0) scale(1,1); } }
@keyframes land { 0% { transform: scale(.25); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }
@keyframes connectBadge { 0% { transform: translate(-50%,-50%) scale(.3) rotate(-10deg); } 45% { transform: translate(-50%,-50%) scale(1.18) rotate(4deg); } 65% { transform: translate(-50%,-50%) scale(.94) rotate(-2deg); } 100% { transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes boardWin { 0%,100% { box-shadow: 0 0 0 4px #16259e, 0 16px 0 #0f1a78, 0 24px 44px rgba(0,0,0,.5), inset 0 0 30px rgba(255,255,255,.12); } 50% { box-shadow: 0 0 0 4px #16259e, 0 16px 0 #0f1a78, 0 0 70px 10px var(--wf), inset 0 0 30px rgba(255,255,255,.12); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-28px) rotate(6deg); } }
@keyframes ballBounce { 0%,100% { transform: translateY(0) scale(1,1); } 45% { transform: translateY(-130px) scale(.94,1.06); } 50% { transform: translateY(-138px) scale(1.04,.96); } 90% { transform: translateY(0) scale(1.08,.92); } }
@keyframes glowPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes winPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.95), 0 0 22px 6px var(--wg); transform: scale(1); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,1), 0 0 40px 14px var(--wg); transform: scale(1.07); } }
@keyframes confettiFall { 0% { transform: translateY(-30px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 1; } }
@keyframes pop { 0% { transform: scale(.55); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes slideUp { 0% { transform: translateY(34px); } 100% { transform: translateY(0); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 22px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes turnGlow { 0%,100% { box-shadow: 0 0 0 2px var(--tc), 0 0 22px -2px var(--tc); } 50% { box-shadow: 0 0 0 4px var(--tc), 0 0 48px 2px var(--tc); } }
@keyframes arrowBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---- Rotate hint (portrait phones) ---- */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  .game-screen .board-wrap { display: none !important; }
  .game-screen .rotate-hint { display: flex !important; }
}