/* Word Rocket (js/arcade/wordrocket.js). Every class starts with .wr- */
.wr-wrap { display: grid; justify-items: center; gap: 10px; width: 100%; padding-top: 6px; }
.wr-hud { position: relative; display: flex; align-items: center; gap: 12px; width: min(100%, 560px); padding-top: 26px; }
.wr-fuel { flex: 1; display: flex; gap: 4px; }
.wr-fuel i { flex: 1; height: 14px; border-radius: 6px; background: #EAE4F6; }
.wr-fuel i.wr-yes { background: linear-gradient(90deg, var(--sun), #FF8A3C); }
.wr-fuel i.wr-ok { background: #FFD9A8; }
.wr-rocket { position: absolute; top: 0; left: 0; font-size: 26px; line-height: 1; transform: rotate(45deg); transition: left 0.5s ease-out; }
.wr-score { font: 900 22px/1 var(--font-ui); color: var(--grape-d); }
.wr-score::before { content: 'Score '; font: 700 14px var(--font-ui); color: var(--muted); }
.wr-card { display: grid; justify-items: center; gap: 8px; width: min(100%, 560px); padding: 14px 12px; border-radius: 30px; background: #fff; box-shadow: var(--shadow-soft), inset 0 0 0 4px var(--grape); }
.wr-card.wr-in { animation: wr-in 0.3s ease-out; }
.wr-pic { font-size: 64px; line-height: 1; }
.wr-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wr-tile { display: grid; place-items: center; min-width: 44px; height: 56px; padding: 0 4px; border-radius: 12px; background: #F6F2FD; box-shadow: inset 0 -3px 0 #E2D8F5; font: 700 40px/1 var(--font-read); color: var(--ink); }
.wr-tile.wr-gap { min-width: 54px; background: none; box-shadow: inset 0 -3px 0 #E2D8F5; }
.wr-tile.wr-gap small { font: 700 12px/1 var(--font-ui); color: var(--muted); }
.wr-tile.wr-now { background: #FFF5CC; box-shadow: 0 0 0 3px var(--sun), inset 0 -3px 0 var(--sun-d); }
.wr-tile.wr-typed { background: #DFF7E3; color: var(--green-d); box-shadow: inset 0 -3px 0 #B5E6BD; }
.wr-tile.wr-oops { animation: wr-shake 0.35s; box-shadow: 0 0 0 3px var(--danger), inset 0 -3px 0 var(--danger-d); }
.wr-done { font: 900 40px/1.1 var(--font-ui); color: var(--grape-d); }
.wr-msg { min-height: 1.4em; margin: 0; text-align: center; font: 700 17px/1.3 var(--font-ui); color: var(--muted); }
.wr-msg.wr-good { color: var(--green-d); }
.wr-msg.wr-bad { color: var(--danger-d); }
.wr-kb { width: 100%; }
.wr-launch .wr-pic { animation: wr-launch 1.4s ease-in forwards; }
@keyframes wr-in { from { transform: translateY(10px); opacity: 0.4; } }
@keyframes wr-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes wr-launch { 20% { transform: translateY(8px); } 100% { transform: translateY(-420px); } }
@media (prefers-reduced-motion: reduce) { .wr-card.wr-in, .wr-tile.wr-oops, .wr-launch .wr-pic { animation: none; } }