@font-face{font-family:Ringward;src:url('DejaVuSans.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;font-family:Ringward,Georgia,serif;background:#0b171d;color:#eadfbd}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
#ringward-canvas{display:block;width:100vw;height:100dvh;outline:none;background:#0b171d}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 38%,#203b41 0,#101f27 43%,#081117 100%);transition:opacity .8s;z-index:10;padding:25px;text-align:center}
#loading.complete{opacity:0;pointer-events:none}#loading[hidden]{display:none}
.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 15% 20%,#e1bd6977 50%,transparent),radial-gradient(2px 2px at 73% 38%,#b8d3c944 50%,transparent),radial-gradient(1px 1px at 43% 81%,#f6d79566 50%,transparent);background-size:229px 191px,349px 311px,419px 277px;animation:embers 22s linear infinite;pointer-events:none}
.halo{height:180px;width:180px;position:relative;margin-bottom:35px;filter:drop-shadow(0 0 25px #dbbb6655)}
.ring{position:absolute;inset:0;border:1px solid #c4a56a;border-radius:50%;border-top-color:transparent;border-right-color:#8d74493b;animation:orbit 18s linear infinite}
.ring:after{content:'';position:absolute;inset:13px;border:1px dashed #e0bf6544;border-radius:50%}
.shard{position:absolute;left:64px;top:46px;width:52px;height:85px;clip-path:polygon(50% 0,100% 46%,50% 100%,0 46%);background:linear-gradient(110deg,#708f8e,#dcecb3 40%,#f2d28b 49%,#497174 52%,#153337);animation:breathe 4s ease-in-out infinite}
.eyebrow{font-size:10px;letter-spacing:.4em;color:#9cb6ae;margin-bottom:15px}
h1{font-size:clamp(34px,6vw,70px);font-weight:400;letter-spacing:.18em;margin:0 0 12px .18em;text-shadow:0 0 35px #e1cc8822}
.subtitle{font-size:12px;letter-spacing:.35em;color:#b6c8b9;margin-bottom:25px}
#lore{font-size:14px;line-height:1.6;color:#b1c4ba;max-width:520px;margin:0 0 36px;min-height:22px}
.progress{width:min(380px,80vw);height:2px;background:#46605b55;position:relative}.progress i{display:block;width:0;height:100%;background:#debb75;box-shadow:0 0 15px #e9cf9a;transition:width .2s}
.progress-caption{width:min(380px,80vw);display:flex;justify-content:space-between;font-size:11px;color:#acb6a2;margin-top:14px;gap:20px}
.languages{display:flex;gap:8px;margin-top:38px}button{font:inherit;cursor:pointer;color:#aebeb2;background:transparent;border:1px solid #5b716955;padding:9px 14px;transition:color .2s,border .2s}button:hover,button.active{color:#f0d79e;border-color:#c3a567}button:focus-visible{outline:2px solid #f0d79e;outline-offset:4px}
#retry{margin-top:24px;border-color:#c3a567}footer{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));font-size:10px;letter-spacing:.1em;color:#6e8881}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes breathe{50%{filter:brightness(1.5);transform:translateY(-5px)}}@keyframes embers{to{background-position:0 -191px,0 -311px,0 -277px}}
@media(max-height:650px){.halo{height:100px;width:100px;margin-bottom:20px}.shard{left:35px;top:25px;width:30px;height:50px}#lore{margin-bottom:20px}.languages{margin-top:20px}footer{display:none}}
@media(prefers-reduced-motion:reduce){.ring,.shard,.stars{animation:none}#loading{transition:none}}

/* No sizes known: a moving sheen shows the download is alive. */
.progress.waiting i{width:100%!important;opacity:.45;background:linear-gradient(90deg,transparent,#debb75,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:sheen 1.4s linear infinite}@keyframes sheen{from{background-position:-40% 0}to{background-position:140% 0}}