/* Decorative staging only: the existing game owns completion and dismissal. */
.hw-game {
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--game-accent) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 52%, #242032, #100e1b 80%);
}
.hw-game::before {
  content:""; position:absolute; inset:8px; z-index:-1; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--game-accent) 16%, transparent);
  border-radius:22px;
  box-shadow:inset 0 0 45px #08071388;
}
.hw-game-head h2 { text-shadow:0 2px 20px #0007; }
.hw-game-head small::before,.hw-game-head small::after {
  content:"✧"; display:inline-block; margin:0 12px; opacity:.6;
}
.hw-game-head { animation:hwg-unveil .7s ease-out both; }
.hw-game-stage { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hw-game-stage::after {
  content:""; position:absolute; left:50%; top:25%; width:125px; aspect-ratio:1;
  translate:-50% -50%; border:1px solid var(--game-accent); border-radius:50%; opacity:0;
  box-shadow:0 0 25px color-mix(in srgb, var(--game-accent) 20%, transparent);
}
.hw-game-orbit {
  position:absolute; left:50%; top:25%; width:min(74%,310px); aspect-ratio:1;
  translate:-50% -50%; border:1px solid color-mix(in srgb, var(--game-accent) 18%, transparent);
  border-radius:50%; animation:hwg-orbit 42s linear infinite;
}
.hw-game-orbit::before,.hw-game-orbit::after {
  content:""; position:absolute; width:5px; height:5px; background:var(--game-accent);
  left:calc(50% - 2px); top:-3px; rotate:45deg;
  box-shadow:0 0 13px color-mix(in srgb, var(--game-accent) 65%, transparent);
}
.hw-game-orbit::after { top:auto; bottom:-3px; width:3px; height:3px; opacity:.5; }
.hw-game-orbit.inner { width:min(65%,270px); border-style:dashed; opacity:.35; animation-direction:reverse; animation-duration:60s; }
.hw-game-floor {
  position:absolute; left:50%; top:75%; width:82%; height:12%; translate:-50% -50%;
  border:1px solid color-mix(in srgb, var(--game-accent) 17%, transparent); border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--game-accent) 7%, transparent), transparent 70%);
}
.hw-game-floor::after { content:""; position:absolute; inset:8px 14%; border:1px solid #ffffff0c; border-radius:50%; }
.hw-game-mist {
  position:absolute; left:-15%; top:52%; width:130%; height:45%; opacity:.12;
  background:radial-gradient(ellipse at 20% 65%, var(--game-accent), transparent 34%),radial-gradient(ellipse at 80% 30%, var(--game-accent), transparent 40%);
  animation:hwg-mist 14s ease-in-out infinite alternate;
}
.hw-game-mote {
  position:absolute; left:var(--mote-x); top:var(--mote-y); width:3px; height:3px;
  border-radius:50%; background:var(--game-accent); opacity:.25;
  box-shadow:0 0 8px color-mix(in srgb, var(--game-accent) 50%, transparent);
  animation:hwg-mote calc(5s + var(--mote)*.4s) calc(var(--mote)*-.8s) ease-in-out infinite;
}
.hw-game-destination img { animation:hwg-hover 6s ease-in-out infinite; }
.hw-game-job {
  background:linear-gradient(135deg,#f5ead6,#d9cbb0);
  border-color:#fff2d7; box-shadow:0 18px 40px #0006,0 0 0 5px #edd8b309;
}
.hw-game-job::before {
  content:""; position:absolute; inset:6px; border:1px solid #8e6c4830;
  border-radius:2px 9px; pointer-events:none;
}
.hw-game-job::after {
  content:"✓"; position:absolute; right:13px; bottom:12px; display:grid; place-items:center;
  width:25px; height:25px; border:1px solid #74684c66; border-radius:50%;
  color:#596c54; font:14px Georgia,serif; rotate:-12deg;
}
.hw-game-job strong { padding-right:8px; }
.hw-game-targets button {
  width:48px; height:48px; font-family:inherit;
  background:radial-gradient(circle at 35% 20%, #594355, #27202f 80%);
  box-shadow:0 5px 14px #0004,inset 0 0 0 4px #ffffff05;
}
.hw-game-targets button::before {
  content:""; position:absolute; inset:-5px; border:1px solid color-mix(in srgb,var(--game-accent) 20%,transparent);
  border-radius:50%; pointer-events:none;
}
.hw-game-targets button.lit::before { animation:hwg-target-ring .7s ease-out both; }
.hw-game-action { background:linear-gradient(135deg,#4c3b50,#302839); box-shadow:0 5px 18px #0003,inset 0 1px #ffffff12; min-height:44px; }
.hw-game-progress { background:#ffffff0a; box-shadow:0 0 0 1px #ffffff05; }
.hw-game-progress>i { box-shadow:0 0 10px var(--game-accent); }
.hw-game-won .hw-game-stage::after { animation:hwg-crown 1.6s ease-out both; }
.hw-game-won .hw-game-mote { animation:hwg-release 1.6s ease-out both; }
.hw-game-won .hw-game-destination img { animation:none; }

/* Each reward has a different visual rhythm around the shared task paper. */
.hw-game-wake .hw-game-floor,.hw-game-arrival .hw-game-floor { height:17%; border-color:#8ccfca33; box-shadow:0 7px 0 -6px #a6dfd82b,0 15px 0 -14px #a6dfd82b; animation:hwg-tide 5s ease-in-out infinite; }
.hw-game-sparks .hw-game-mote { width:3px; height:6px; border-radius:50% 50% 20% 20%; background:#efc28d; animation-name:hwg-ember; }
.hw-game-bats .hw-game-mote { width:15px; height:8px; border-radius:0; clip-path:polygon(0 0,37% 23%,50% 0,63% 23%,100% 0,87% 80%,65% 60%,50% 100%,35% 60%,13% 80%); opacity:.22; }
.hw-game-bloom .hw-game-mote { width:7px; height:11px; border-radius:70% 15% 65% 15%; opacity:.3; }
.hw-game-bloom .hw-game-orbit { border-style:dotted; }
.hw-game-verdict .hw-game-orbit { border-radius:36% 64% 36% 64%; opacity:.4; }
.hw-game-verdict .hw-game-cut { height:2px; background:#fff1cb; box-shadow:0 0 8px #fff4c3,0 0 22px #d8a45d; }
.hw-game-eclipse .hw-game-orbit { border-color:#d7a3bd44; box-shadow:0 0 24px #a2415c12,inset 0 0 20px #c87d9b0d; }
.hw-game-gate .hw-game-orbit { width:59%; height:48%; aspect-ratio:auto; border-radius:50% 50% 15% 15%; animation:hwg-gate 7s ease-in-out infinite; }
.hw-game-gate .hw-game-orbit.inner { width:51%; height:43%; }
.hw-game-field[data-mode=drag] .hw-game-destination { border:0; }
.hw-game-field[data-mode=drag] .hw-game-destination::after { content:""; position:absolute; width:23%; height:1px; bottom:2%; background:var(--game-accent); opacity:.3; box-shadow:0 0 8px var(--game-accent); }

@keyframes hwg-unveil { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes hwg-orbit { to { transform:rotate(360deg); } }
@keyframes hwg-hover { 50% { translate:0 -7px; } }
@keyframes hwg-mist { to { transform:translateX(9%); opacity:.2; } }
@keyframes hwg-mote { 50% { transform:translate(var(--mote-drift),-24px); opacity:.65; } }
@keyframes hwg-ember { 70% { transform:translate(var(--mote-drift),-58px) scale(.5); opacity:.05; } }
@keyframes hwg-tide { 50% { transform:scaleX(.92) translateY(5px); opacity:.6; } }
@keyframes hwg-gate { 50% { opacity:.4; box-shadow:0 0 25px #b9aedc18; } }
@keyframes hwg-crown { 10% { opacity:.7; } to { transform:scale(3); opacity:0; } }
@keyframes hwg-release { 10% { opacity:.8; } to { transform:translate(var(--mote-drift),-90px) rotate(70deg); opacity:0; } }
@keyframes hwg-target-ring { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(1.7); } }
.hw-game-still .hw-game-stage::after { animation:none; }
.hw-game-still.hw-game-won .hw-game-stage::after { opacity:.2; }
@media(max-height:680px) { .hw-game-orbit { width:58%; } .hw-game-orbit.inner { width:50%; } .hw-game-targets button { width:44px; height:44px; bottom:2%; } }