* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f8f1e4; }
main { position: fixed; inset: 0; width: 100%; height: 100dvh; isolation: isolate; }
.workshop { z-index: 0; position: absolute; inset: 0; background: #624025; transition: opacity .6s ease; }
.workshop::before, .workshop::after { content: ''; position: absolute; left: 0; right: 0; background-image: url('workshop-embers-v21.jpg'); background-repeat: no-repeat; }
.workshop::before { top: 0; height: var(--horizon, 79.3%); background-size: 100% 126.13%; background-position: center top; }
.workshop::after { top: var(--horizon, 79.3%); bottom: 0; background-size: 100% 483.1%; background-position: center bottom; }
body.started .workshop { opacity: .78; }
body.simplifying .workshop { opacity: 0; transition: opacity 666.667ms linear; }
body.ready .workshop { opacity: 0; transition: none; }
canvas { z-index: 1; position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#start { z-index: 2; position: absolute; border: 0; background: transparent; border-radius: 999px; cursor: pointer; padding: 0; touch-action: manipulation; min-height: 44px; }
#start:focus-visible { outline: 3px solid #b97926; outline-offset: 5px; }
#start[hidden], [hidden] { display: none; }
#error { max-width: 28rem; line-height: 1.5; color: #f1ddbc; }

@media (max-aspect-ratio: 1/1) {
  .workshop::before { background-size: 190% 126.13%; background-position: left top; }
}

.hearth-embers { position: absolute; z-index: 1; left: 14.5%; top: calc(var(--horizon, 79.3vh) * .82); width: 13%; height: calc(var(--horizon, 79.3vh) * .13); transform: translate(-50%, -50%); pointer-events: none; }
.hearth-embers::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse, #ff9b3870, #ef601a28 42%, transparent 70%); mix-blend-mode: screen; animation: coal-breath 4s ease-in-out infinite; }
.hearth-embers i { position: absolute; left: 30%; top: 65%; width: 1.5px; height: 2px; border-radius: 50%; background: #ffd485; box-shadow: 0 0 3px #f87929; opacity: 0; animation: coal-speck 4.6s linear infinite; }
.hearth-embers i:nth-child(2) { left: 54%; animation-delay: -1.6s; }
.hearth-embers i:nth-child(3) { left: 72%; animation-delay: -3.2s; }
@keyframes coal-breath { 0%, 100% { opacity: .5; } 30% { opacity: .9; } 65% { opacity: .6; } 82% { opacity: .75; } }
@keyframes coal-speck { 0%, 62%, 100% { opacity: 0; transform: translate(0, 0); } 68% { opacity: .6; } 86% { opacity: .3; } 97% { opacity: 0; transform: translate(5px, -34px); } }
@media (max-aspect-ratio: 1/1) { .hearth-embers { left: 27.55%; width: 24.7%; } }

/* Stronger idle cue only: the validated strike presentation keeps its V21 settings. */
body:not(.started) .hearth-embers::before { background: radial-gradient(ellipse, #ffd078c0, #ff79276b 40%, transparent 72%); animation: idle-coal-breath 3s ease-in-out infinite; }
body:not(.started) .hearth-embers i { width: 2px; height: 3px; background: #ffedb5; box-shadow: 0 0 4px 1px #f87929; animation: idle-coal-speck 3.2s linear infinite; }
body:not(.started) .hearth-embers i:nth-child(2) { animation-delay: -1.1s; }
body:not(.started) .hearth-embers i:nth-child(3) { animation-delay: -2.2s; }
.hearth-embers i:nth-child(4), .hearth-embers i:nth-child(5) { display: none; }
body:not(.started) .hearth-embers i:nth-child(4) { display: block; left: 42%; animation-delay: -.5s; }
body:not(.started) .hearth-embers i:nth-child(5) { display: block; left: 63%; animation-delay: -1.7s; }
@keyframes idle-coal-breath { 0%, 100% { opacity: .25; } 25% { opacity: .85; } 53% { opacity: .3; } 78% { opacity: .72; } }
@keyframes idle-coal-speck { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .95; } 44% { opacity: .8; } 66% { opacity: 0; transform: translate(8px, -55px); } 100% { opacity: 0; transform: translate(8px, -55px); } }

body.loading main { opacity: 0; pointer-events: none; }
#loader { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; color: #f1dfc1; background: radial-gradient(ellipse at 50% 48%, #35281d, #171713 70%); font: 500 17px system-ui, sans-serif; }
#loader p { margin: 0; }
.loader-mark { width: 44px; height: 44px; margin-bottom: 8px; border: 2px solid #6e502c; border-top-color: #ffc563; border-radius: 50%; animation: loading-turn 1.2s linear infinite; box-shadow: 0 0 22px #ffae2b15; }
#loader.failed .loader-mark { display: none; }
#retry { border: 1px solid #d39c43; border-radius: 24px; padding: 10px 25px; margin-top: 8px; font: inherit; color: #f1dfc1; background: #372d21; cursor: pointer; }
#retry:focus-visible { outline: 2px solid #ffcf7e; outline-offset: 4px; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader-mark { animation: none; } }

#loader[hidden] { display: none; }