.egg-sunset{position:absolute;inset:0;background:linear-gradient(#4b526f 0 18%,#8c6880 18% 32%,#d48c7b 32% 42%,#e8b481 42% 52%,#edcc95 52% 58%,#879b9c 58%)}
.egg-sun{position:absolute;top:38%;left:50%;width:100px;height:100px;transform:translateX(-50%);background:#ffe4a6;clip-path:polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%)}
.egg-sea{position:absolute;inset:58% 0 0;background:repeating-linear-gradient(#54747e 0 8px,#739098 8px 12px,#476875 12px 22px)}
.egg-glimmer{position:absolute;top:58%;bottom:0;left:35%;width:30%;background:repeating-linear-gradient(#e8bf86 0 5px,transparent 5px 15px);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:.65}
.egg-preview{position:relative;z-index:95;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding:8px 12px;background:#f4ecd9;color:#302c25;font:12px/1.5 system-ui,sans-serif}.egg-preview>span{flex-basis:100%;text-align:center}
.egg-preview-options,.egg-preview-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;width:100%}
.egg-preview .egg-preview-link{appearance:none;min-height:0;width:auto;margin:0;padding:2px 0;border:0;border-bottom:1px solid var(--line,#d6cebd);border-radius:0;background:none;box-shadow:none;color:var(--muted,#70685c);font:600 13px/1.5 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.egg-preview .egg-preview-link:hover,.egg-preview .egg-preview-link:focus-visible{color:var(--ink,#302c25);border-bottom-color:currentColor}
.egg-preview .egg-preview-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}


#gandalfGuide .gandalf-character{z-index:1}
#gandalfGuide .gandalf-bubble{z-index:2}

#gandalfGuide.gandalf-smoking .gandalf-character>img{visibility:hidden}
#gandalfGuide .gandalf-pipe-corner{position:absolute;right:-4px;bottom:0;width:100px;height:130px;z-index:2;pointer-events:none}
#gandalfGuide .gandalf-pipe-corner img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#gandalfGuide .gandalf-pipe-corner i{position:absolute;left:83%;top:39%;width:8px;height:6px;border:2px solid #b8b9b2;border-radius:50%;opacity:0;animation:egg-corner-smoke 4s steps(24,end) infinite}
#gandalfGuide .gandalf-pipe-corner i:nth-of-type(2){animation-delay:1.3s}
#gandalfGuide .gandalf-pipe-corner i:nth-of-type(3){animation-delay:2.6s}
@keyframes egg-corner-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.75}85%{opacity:.3}100%{opacity:0;transform:translate(-22px,-85px) scale(2.2)}}
#gandalfGuide .gandalf-pipe-corner.egg-reduced i{animation:none;opacity:.5;transform:translate(-8px,-24px)}
@media(prefers-reduced-motion:reduce){#gandalfGuide .gandalf-pipe-corner i{animation:none;opacity:.5;transform:translate(-8px,-24px)}}
@media(max-width:600px){#gandalfGuide .gandalf-pipe-corner{width:78px;height:104px;right:-3px}}

/* The departure plays directly on the page, without a dialog or backdrop. */
#gandalfGuide.gandalf-sailing .gandalf-character>img{visibility:hidden}
.gandalf-open-ship{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden}
.gandalf-open-ship>.egg-sunset{inset:auto;top:40%;left:50%;width:min(340px,88vw);height:180px;transform:translateX(-50%);clip-path:polygon(15% 0,85% 0,85% 6%,94% 6%,94% 18%,100% 18%,100% 82%,94% 82%,94% 94%,85% 94%,85% 100%,15% 100%,15% 94%,6% 94%,6% 82%,0 82%,0 18%,6% 18%,6% 6%,15% 6%);animation:egg-open-sunset 9.5s steps(12,end) forwards}
.gandalf-open-ship .egg-sun{width:60px;height:60px;top:30%}
.gandalf-open-ship>.gandalf-sailing-vessel{position:absolute;left:50%;top:calc(40% + 104px);width:88px;height:132px;object-fit:contain;image-rendering:pixelated;transform-origin:50% 0;animation:egg-open-sail 9.5s steps(85,end) forwards}
@keyframes egg-open-sail{0%,12%{transform:translate(-50%,105px) scale(1);opacity:1}92.631579%{opacity:1}100%{transform:translate(-50%,0) scale(.025);opacity:0}}
@keyframes egg-open-sunset{0%{opacity:0}7.368421%,92.631579%{opacity:1}100%{opacity:0}}
.gandalf-open-ship.egg-reduced>.egg-sunset{animation:none;opacity:1}
.gandalf-open-ship.egg-reduced>.gandalf-sailing-vessel{animation:none;transform:translate(-50%,10px) scale(.7)}
@media(prefers-reduced-motion:reduce){.gandalf-open-ship>.egg-sunset,.gandalf-open-ship>.gandalf-sailing-vessel{animation:none}}

.gandalf-open-ship .gandalf-sailing-ship{filter:url(#gandalfShipAlpha)}

.gandalf-sailing-vessel>.gandalf-sailing-ship{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.gandalf-sailing-vessel>.gandalf-sailing-passenger{position:absolute;left:47%;bottom:19%;width:20px;height:30px;z-index:1;filter:drop-shadow(0 0 1px #21190f);transform:translateX(-50%);object-fit:contain;image-rendering:pixelated}
.egg-preview label{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;font-weight:500}
.egg-preview select{min-width:0;max-width:min(460px,68vw);padding:2px 4px;border:1px solid #9d8d6d;border-radius:5px;background:#fffaf0;color:#302c25;font:12px system-ui}
.egg-preview button:disabled,.egg-preview select:disabled{opacity:.5;cursor:wait}
.egg-preview .egg-preview-status:empty{display:none}

/* The birthday dragon leaves the corner and comes toward the whole viewport. */
.dragon-firework-scene{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;padding:0;border:0;background:#101829b8;overflow:hidden;pointer-events:none;z-index:105}
.dragon-firework-scene canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.dragon-firework-scene::backdrop{background:transparent;pointer-events:none}
.egg-scene-skip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));pointer-events:auto;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--muted);font:13px/1.45 system-ui;cursor:pointer}

.dragon-firework-scene.dragon-prelude{visibility:hidden;background:transparent}
#gandalfGuide .gandalf-corner-fireworks{position:absolute;right:-12px;bottom:0;width:180px;height:190px;pointer-events:none;z-index:0;image-rendering:pixelated}
.gandalf-sailing-vessel>.gandalf-sailing-passenger{left:43%;bottom:22.5%;width:17px;height:24px;z-index:1}.gandalf-sailing-vessel>.gandalf-sailing-foreground{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:2;clip-path:polygon(23% 75%,77% 75%,77% 94%,23% 94%);filter:url(#gandalfShipAlpha)}

#gandalfGuide .gandalf-corner-fireworks{right:-28px;width:260px;height:282px}
@media(max-width:600px){#gandalfGuide .gandalf-corner-fireworks{right:-20px;width:230px;height:249px}}


/* One quiet, pixel-art homecoming at the reader's usual guide corner. */
.gandalf-cart-arrival{position:fixed;z-index:95;pointer-events:none;left:0;bottom:max(12px,env(safe-area-inset-bottom));width:min(280px,72vw);animation:gandalf-cart-drive 7.6s linear both}
.gandalf-cart-arrival img{display:block;width:100%;height:auto;image-rendering:pixelated;animation:gandalf-cart-jostle .2964s steps(2,end) 20}
@keyframes gandalf-cart-drive{0%{transform:translateX(-110%);opacity:0}9.210526%{opacity:1}78%,90.789474%{transform:translateX(calc(100vw - 100% - 16px));opacity:1}100%{transform:translateX(calc(100vw - 100% - 16px));opacity:0}}
@keyframes gandalf-cart-jostle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.gandalf-cart-arrival.egg-reduced{left:auto;right:16px;animation:none}
.gandalf-cart-arrival.egg-reduced img{animation:none}
@media(prefers-reduced-motion:reduce){.gandalf-cart-arrival{left:auto;right:16px;animation:none}.gandalf-cart-arrival img{animation:none}}

/* Same pipe-moment rings, carried left behind the moving cart. */
.gandalf-cart-arrival i{position:absolute;left:calc(52.4% - 6px);top:calc(33.3% - 4px);width:8px;height:6px;border:2px solid #b8b9b2;border-radius:50%;opacity:0;animation:egg-cart-smoke 4s steps(24,end) infinite}
.gandalf-cart-arrival i:nth-of-type(2){animation-delay:1.3s}
.gandalf-cart-arrival i:nth-of-type(3){animation-delay:2.6s}
@keyframes egg-cart-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.75}85%{opacity:.3}100%{opacity:0;transform:translate(-120px,-60px) scale(2.2)}}
.gandalf-cart-arrival.egg-reduced i{animation:none;opacity:.5;transform:translate(-8px,-24px)}
@media(prefers-reduced-motion:reduce){.gandalf-cart-arrival i{animation:none;opacity:.5;transform:translate(-8px,-24px)}}

@media(max-width:600px){.gandalf-cart-arrival{width:min(210px,72vw)}}

/* v572: a slightly larger desktop farewell; mobile proportions are unchanged. */
@media(min-width:601px){
 .gandalf-open-ship>.gandalf-sailing-vessel{width:110px;height:165px}
 .gandalf-sailing-vessel>.gandalf-sailing-passenger{width:21px;height:30px}
}
/* Duration is chosen once with the matching sprite when the return starts. */
.gandalf-cart-arrival.egg-desktop{animation-duration:11.4s}
.gandalf-cart-arrival.egg-desktop img{animation-duration:.4446s}

/* Hide the existing guide for the complete cart arrival, including previews. */
body.gandalf-cart-playing #gandalfGuide{visibility:hidden!important;pointer-events:none!important}

/* Beacons finale: the approved mountain scene and Rohan banner. */
.gandalf-beacons{position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;z-index:96;pointer-events:none;color:#eee8db}
.gandalf-beacons-stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(736px,100vw,110dvh);aspect-ratio:368/334;pointer-events:none}
.gandalf-beacons canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.gandalf-beacons h2{position:absolute;top:18px;left:30px;right:30px;margin:0;color:var(--ink,#302c25);text-shadow:0 1px 2px var(--panel,#fffdf7);text-align:center;font:500 clamp(16px,3vw,22px)/1.35 Georgia,serif;z-index:1}
.gandalf-beacons .beacons-hit{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;touch-action:manipulation;cursor:pointer;pointer-events:auto}
.gandalf-beacons .beacons-hit:disabled{opacity:1;cursor:default}
.gandalf-beacons button:focus-visible{outline:2px solid #f3d185;outline-offset:1px}


@media print{.gandalf-beacons{display:none!important}}

/* Full-width pixel flood, with an independent accessible dismissal control. */
.gandalf-bruinen{position:fixed;inset:0;z-index:96;pointer-events:none}
.gandalf-bruinen canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
@media print{.gandalf-bruinen{display:none!important}}

/* Shared cinematic controls use the fireworks Skip button unchanged. */
.gandalf-beacons .egg-scene-skip,.gandalf-bruinen .egg-scene-skip{z-index:3}
.gandalf-beacons h2{padding:14px 20px;background:#fff4dc;border:1px solid #c5ad83;border-radius:8px;box-shadow:0 5px 24px #0002;color:#302c25;text-shadow:none}
#gandalfGuide{transition:opacity .7s ease}
#gandalfGuide.gandalf-cutscene-hidden{opacity:0;pointer-events:none}
#gandalfGuide.gandalf-cutscene-hidden *{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){#gandalfGuide{transition:none}}

/* Use the same theme tokens and card treatment as Gandalf's speech. */
.gandalf-beacons h2,.bruinen-speech{box-sizing:border-box;padding:18px 20px 16px;border:1px solid var(--line);border-radius:12px 12px 3px 12px;background:var(--panel);color:var(--ink);box-shadow:0 5px 24px #0002;text-shadow:none;font:15px/1.45 Georgia,serif}
.gandalf-beacons h2{position:absolute;top:auto;bottom:calc(100% + 12px);left:20px;right:20px;text-align:center}
.bruinen-speech{position:absolute;z-index:2;text-align:left;pointer-events:none}
.bruinen-speech[hidden]{display:none}
@media(max-width:600px){.bruinen-speech{font-size:14px}.gandalf-beacons-stage{max-height:calc(100dvh - 150px);width:min(100vw,calc((100dvh - 150px)*368/334))}}

/* Viewport-anchored controls and heading are independent of the artwork bounds. */
.egg-scene-skip{position:fixed!important;left:auto!important;bottom:auto!important;right:max(16px,env(safe-area-inset-right))!important;top:max(16px,env(safe-area-inset-top))!important;margin:0!important;z-index:10}
.gandalf-beacons h2{position:fixed;top:max(68px,env(safe-area-inset-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);z-index:4}
.gandalf-beacons{overflow:hidden}

.gandalf-beacons h2.entry{position:fixed;top:auto;bottom:max(24px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100vw - 40px));max-width:none;margin:0;padding:22px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);box-shadow:none;font:22px/1.55 Georgia,serif;text-align:center}
.gandalf-beacons-stage{bottom:120px;width:min(736px,100vw,calc((100dvh - 160px)*368/334))}
@media(max-width:600px){.gandalf-beacons-stage{bottom:120px;max-height:calc(100dvh - 160px);width:min(100vw,calc((100dvh - 160px)*368/334))}.gandalf-beacons h2.entry{font-size:20px}}

:root{--scene-fade-duration:.7s}
#gandalfGuide{transition:opacity var(--scene-fade-duration) ease}

@media(prefers-reduced-motion:reduce){#gandalfGuide{transition:none}}
html[data-reduce-motion="true"] #gandalfGuide{transition:none}

@keyframes gandalf-cart-drive-desktop{0%{transform:translateX(-110%);opacity:0}6.140351%{opacity:1}78%,93.859649%{transform:translateX(calc(100vw - 100% - 16px));opacity:1}100%{transform:translateX(calc(100vw - 100% - 16px));opacity:0}}
.gandalf-cart-arrival.egg-desktop{animation-name:gandalf-cart-drive-desktop}
@keyframes scene-enter{from{opacity:0}to{opacity:1}}
.gandalf-beacons,.gandalf-caradhras,.gandalf-pipe-corner{animation:scene-enter var(--scene-fade-duration) ease both;transition:opacity var(--scene-fade-duration) ease}
.scene-fading-out{animation:none!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.gandalf-beacons,.gandalf-caradhras,.gandalf-pipe-corner{animation:none;transition:none}}
html[data-reduce-motion="true"] .gandalf-beacons,html[data-reduce-motion="true"] .gandalf-caradhras,html[data-reduce-motion="true"] .gandalf-pipe-corner{animation:none;transition:none}

/* Restore the original beacon type size and place its reading card on the range. */
.gandalf-beacons-stage{bottom:0;width:min(736px,100vw,calc(100dvh*368/334));max-height:100dvh}
.gandalf-beacons h2.entry{bottom:max(24px,env(safe-area-inset-bottom));padding:18px 20px 16px;font:15px/1.45 Georgia,serif;width:min(420px,calc(100vw - 40px))}
@media(min-width:601px){
 .gandalf-open-ship>.egg-sunset{top:30%;width:min(620px,80vw);height:330px}
 .gandalf-open-ship .egg-sun{width:110px;height:110px}
 .gandalf-open-ship>.gandalf-sailing-vessel{top:calc(30% + 190px);width:161px;height:242px}
 .gandalf-sailing-vessel>.gandalf-sailing-passenger{width:31px;height:44px}
}

@media(max-width:600px){.gandalf-beacons h2.entry{bottom:max(12px,env(safe-area-inset-bottom));padding:12px 20px;font:15px/1.45 Georgia,serif}}

.gandalf-beacons h2.entry{width:max-content;max-width:calc(100vw - 40px);min-width:0}
@media(min-width:601px){
 .gandalf-open-ship>.egg-sunset{top:min(18vh,150px);height:min(330px,55vh)}
 .gandalf-open-ship>.gandalf-sailing-vessel{top:calc(min(18vh,150px) + min(100px,12vh));width:min(161px,28vh);height:min(242px,42vh)}
}

/* Standard secondary-button geometry and typography, with cinematic colors. */
.egg-scene-skip{padding:9px 14px;border-radius:8px;font:600 12px system-ui,sans-serif}
.egg-scene-skip:hover,.egg-scene-skip:focus{background:var(--button-dim);color:var(--ink)}
.egg-scene-skip:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Inverse secondary control, using only the shared theme palette. */
.egg-scene-skip{background:var(--ink);border-color:var(--muted);color:var(--paper)}
.egg-scene-skip:hover,.egg-scene-skip:focus{background:var(--muted);border-color:var(--muted);color:var(--paper)}

.egg-scene-skip,.egg-scene-skip:hover,.egg-scene-skip:focus{border-color:var(--paper)}

/* Keep the beacon sky behind the full viewport above the landscape. */
.gandalf-beacons{background:#18242d}

/* Scene Skip controls use the standard secondary-button palette and states. */
.gandalf-beacons{pointer-events:auto;touch-action:none;z-index:1100}
.gandalf-bruinen .egg-scene-skip{background:var(--panel);border-color:var(--line);color:var(--muted)}
.gandalf-bruinen .egg-scene-skip:hover,.gandalf-bruinen .egg-scene-skip:focus{background:var(--button-dim);border-color:var(--line);color:var(--ink)}
/* These are the regular site's dark-theme panel, line, muted, hover and ink colors. */
.dragon-firework-scene .egg-scene-skip,.gandalf-beacons .egg-scene-skip{background:#292824;border-color:#514c43;color:#bcb3a3}
.dragon-firework-scene .egg-scene-skip:hover,.dragon-firework-scene .egg-scene-skip:focus,.gandalf-beacons .egg-scene-skip:hover,.gandalf-beacons .egg-scene-skip:focus{background:#393329;border-color:#514c43;color:#eee8db}
.gandalf-beacons .egg-scene-skip:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* The flood's muted Skip control remains legible over the undarkened page. */
.gandalf-bruinen .egg-scene-skip{background:var(--button-dim);border-color:var(--line);color:var(--muted)}
.gandalf-bruinen .egg-scene-skip:hover,.gandalf-bruinen .egg-scene-skip:focus{background:var(--line);border-color:var(--line);color:var(--ink)}

/* The detailed landscape fills the viewport. Its painted pyres anchor the hit targets. */
.gandalf-beacons{background:#030c22}
.gandalf-beacons-stage{position:fixed;inset:0;left:0;bottom:0;transform:none;width:100vw;height:100dvh;max-height:none;aspect-ratio:auto}
.gandalf-beacons-stage canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}

#gandalfGuide .gandalf-pipe-corner img{image-rendering:pixelated}

#gandalfGuide .gandalf-pipe-corner img{image-rendering:pixelated}

#gandalfGuide .gandalf-pipe-corner img{image-rendering:auto}

/* Boromir overlays the normal page: use the standard muted button palette. */
.gandalf-boromir .egg-scene-skip{background:var(--button-dim);border-color:var(--line);color:var(--muted)}
.gandalf-boromir .egg-scene-skip:hover,.gandalf-boromir .egg-scene-skip:focus{background:var(--line);border-color:var(--line);color:var(--ink)}

/* Mirror controls share the established muted cinematic dark-theme palette. */
.gandalf-mirror .secondary-action,.gandalf-mirror .egg-scene-skip{padding:9px 14px;border:1px solid #514c43;border-radius:8px;background:#292824;color:#bcb3a3;font:600 12px system-ui,sans-serif;cursor:pointer;min-height:36px}
.gandalf-mirror .secondary-action:hover,.gandalf-mirror .secondary-action:focus,.gandalf-mirror .egg-scene-skip:hover,.gandalf-mirror .egg-scene-skip:focus{background:#393329;border-color:#514c43;color:#eee8db}
.gandalf-mirror .secondary-action:focus-visible,.gandalf-mirror .egg-scene-skip:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gandalf-mirror .secondary-action:disabled{cursor:default;opacity:.6}
@media(pointer:coarse){.gandalf-mirror .secondary-action,.gandalf-mirror .egg-scene-skip{min-height:44px}}