<!-- custom.html: inject v├áo <head> mß╗ìi trang ΓÇö favicon, font, theme init, background canvas, cursor, style to├án cß╗Ñc -->
<link rel="icon" type="image/png" sizes="512x512" href="/assets/images/favicon/web-app-manifest-512x512.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/images/favicon/favicon-96x96.png">
<link rel="icon" type="image/x-icon" href="/assets/images/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png">
<link rel="manifest" href="/assets/images/favicon/site.webmanifest">
<script>

  /* site-wide: any <img> that 404s (missing asset) shows a visible
     placeholder icon in its place instead of the browser's broken-image
     glyph, so missing images are obvious at a glance while browsing */
  document.addEventListener('error', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img.dataset.anMissing || img.src.indexOf('icon-missing-image.png') !== -1) return;
    img.dataset.anMissing = '1';
    var box = document.createElement('img');
    box.src = '/assets/images/icon-missing-image.png';
    box.alt = 'Missing image';
    box.title = 'Missing image: ' + img.getAttribute('src');
    box.style.cssText = 'width:' + (img.offsetWidth || img.width || 100) + 'px;height:' + (img.offsetHeight || img.height || 100) + 'px;object-fit:contain;opacity:.6;padding:8%;box-sizing:border-box;';
    img.style.display = 'none';
    img.insertAdjacentElement('afterend', box);
  }, true);
</script>

<!-- background-peek: tiny eye toggle, top-left. Click hides all UI chrome
     (nav, sidebar, page content, footer, cursor) leaving only the ambient
     background visible; click anywhere to bring it all back. -->
<style>
  #an-bg-peek {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 999998;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(201, 162, 39, .5);
    background: rgba(10, 8, 25, .7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .8;
    transition: opacity .3s ease, transform .2s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
  }

  #an-bg-peek svg path,
  #an-bg-peek svg circle {
    stroke: #f0c84a !important;
  }

  #an-bg-peek:hover {
    opacity: 1;
    transform: scale(1.1);
  }

  #an-bg-peek,
  .masthead,
  .initial-content,
  .page__footer,
  #an-top {
    transition: opacity .45s ease, visibility 0s linear 0s;
  }

  body.an-bg-only #an-bg-peek,
  body.an-bg-only .masthead,
  body.an-bg-only .initial-content,
  body.an-bg-only .page__footer,
  body.an-bg-only #an-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .45s ease, visibility 0s linear .45s !important;
  }
</style>
<button id="an-bg-peek" type="button" title="Peek at the background"
  aria-label="Hide page content, show only the background">
  <svg viewBox="0 0 24 24" width="13" height="13" fill="none">
    <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" stroke="rgba(201,162,39,.75)" stroke-width="1.4" />
    <circle cx="12" cy="12" r="3.1" stroke="rgba(201,162,39,.85)" stroke-width="1.4" />
  </svg>
</button>
<script>
  (function () {
    var btn = document.getElementById('an-bg-peek');
    if (!btn) return;
    /* .author__urls-wrapper elements get an inline visibility:visible!important
       set by another script; inline !important beats any stylesheet rule
       (even !important ones), so it must be overridden inline too. */
    function forcedVisibleEls() {
      return document.querySelectorAll('.author__urls-wrapper, .author__urls-wrapper nav, .author__urls-wrapper .author__urls');
    }
    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      document.body.classList.add('an-bg-only');
      /* delay to match the .45s fade-out on everything else, so this
         doesn't pop hidden before the rest finishes fading */
      setTimeout(function () {
        forcedVisibleEls().forEach(function (el) { el.style.setProperty('visibility', 'hidden', 'important'); });
      }, 450);
    });
    document.addEventListener('click', function () {
      if (document.body.classList.contains('an-bg-only')) {
        document.body.classList.remove('an-bg-only');
        forcedVisibleEls().forEach(function (el) { el.style.setProperty('visibility', 'visible', 'important'); });
      }
    });
  })();
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var avatarImg = document.querySelector('.author__avatar img');
    if (!avatarImg) return;
    var link = avatarImg.closest('a');
    if (link) {
      link.href = '/hubble/';
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
    }

    var av = avatarImg.closest('.author__avatar');
    if (!av || !link) return;

    var wrap = document.createElement('span');
    wrap.style.cssText = 'position:relative;display:inline-block;line-height:0;';
    link.parentNode.insertBefore(wrap, link);
    wrap.appendChild(link);
    link.style.cssText += ';position:relative;z-index:1;display:inline-block;';
    avatarImg.style.setProperty('margin-bottom', '0', 'important');

    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 200 200');
    svg.id = 'an-avatar-ring';
    svg.style.cssText = 'position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px;pointer-events:none;z-index:2;overflow:visible;';
    svg.innerHTML = [
      '<circle cx="100" cy="100" r="62" fill="none" stroke="rgba(212,175,55,0.9)" stroke-width="1.5"/>',
      '<path fill="none" stroke="rgba(212,175,55,0.88)" stroke-width="1.3" stroke-linecap="round" d="M186.67,115.28 A88,88 0 0,1 113.76,186.92 M86.24,186.92 A88,88 0 0,1 13.93,118.30 M13.93,81.70 A88,88 0 0,1 86.24,13.08 M113.76,13.08 A88,88 0 0,1 186.67,84.72"/>',
      '<path fill="none" stroke="rgba(212,175,55,0.30)" stroke-width="0.7" stroke-linecap="round" d="M193.55,116.49 A95,95 0 0,1 114.86,193.83 M85.14,193.83 A95,95 0 0,1 7.08,119.75 M7.08,80.25 A95,95 0 0,1 85.14,6.17 M114.86,6.17 A95,95 0 0,1 193.55,83.51"/>',
      '<path fill="rgba(212,175,55,0.95)" d="M100,3 L101.38,8.67 L106.36,5.64 L103.33,10.62 L109,12 L103.33,13.38 L106.36,18.36 L101.38,15.33 L100,21 L98.62,15.33 L93.64,18.36 L96.67,13.38 L91,12 L96.67,10.62 L93.64,5.64 L98.62,8.67 Z"/>',
      '<path fill="rgba(212,175,55,0.9)" d="M100,180 L102.12,185.88 L108,188 L102.12,190.12 L100,196 L97.88,190.12 L92,188 L97.88,185.88 Z"/>',
      '<g transform="translate(12,100)">',
      '<ellipse cx="0" cy="0" rx="14" ry="5" fill="none" stroke="rgba(212,175,55,0.35)" stroke-width="1.1" stroke-dasharray="5 4" transform="rotate(-22)"/>',
      '<circle cx="0" cy="0" r="9.5" class="an-ring-mask"/>',
      '<circle cx="0" cy="0" r="8.5" fill="none" stroke="rgba(212,175,55,0.88)" stroke-width="1.3"/>',
      '<path d="M-14,0 A14,5 0 0,1 14,0" fill="none" stroke="rgba(212,175,55,0.88)" stroke-width="1.3" transform="rotate(-22)"/>',
      '</g>',
      '<g transform="translate(188,100)">',
      '<circle cx="0" cy="0" r="10" fill="rgba(212,175,55,0.88)"/>',
      '<circle cx="-5" cy="0" r="8.5" class="an-ring-mask"/>',
      '</g>',
      '<path fill="rgba(212,175,55,0.72)" d="M136.4,9.7 L137.11,11.49 L138.9,12.2 L137.11,12.91 L136.4,14.7 L135.69,12.91 L133.9,12.2 L135.69,11.49 Z"/>',
      '<path fill="rgba(212,175,55,0.72)" d="M63.6,9.7 L64.31,11.49 L66.1,12.2 L64.31,12.91 L63.6,14.7 L62.89,12.91 L61.1,12.2 L62.89,11.49 Z"/>',
      '<circle cx="176.2" cy="144" r="2.8" fill="none" stroke="rgba(212,175,55,0.55)" stroke-width="1"/>',
      '<circle cx="23.8"  cy="144" r="2.8" fill="none" stroke="rgba(212,175,55,0.55)" stroke-width="1"/>',
      '<path fill="rgba(212,175,55,0.88)" d="M162,33.5 L163.27,36.73 L166.5,38 L163.27,39.27 L162,42.5 L160.73,39.27 L157.5,38 L160.73,36.73 Z"/>',
      '<path fill="rgba(212,175,55,0.88)" d="M38,33.5 L39.27,36.73 L42.5,38 L39.27,39.27 L38,42.5 L36.73,39.27 L33.5,38 L36.73,36.73 Z"/>',
      '<path fill="rgba(212,175,55,0.88)" d="M162,157.5 L163.27,160.73 L166.5,162 L163.27,163.27 L162,166.5 L160.73,163.27 L157.5,162 L160.73,160.73 Z"/>',
      '<path fill="rgba(212,175,55,0.88)" d="M38,157.5 L39.27,160.73 L42.5,162 L39.27,163.27 L38,166.5 L36.73,163.27 L33.5,162 L36.73,160.73 Z"/>',
      '<g>',
      '<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="60s" repeatCount="indefinite"/>',
      '<circle cx="100" cy="100" r="70" fill="none" stroke="rgba(212,175,55,0.52)" stroke-width="0.8" stroke-dasharray="2.5 4"/>',
      '<circle cx="129.9" cy="27.9"  r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="172.1" cy="70.2"  r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="172.1" cy="129.9" r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="129.9" cy="172.1" r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="70.2"  cy="172.1" r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="27.9"  cy="129.9" r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="27.9"  cy="70.2"  r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '<circle cx="70.2"  cy="27.9"  r="1.8" fill="rgba(212,175,55,0.60)"/>',
      '</g>'
    ].join('');
    wrap.appendChild(svg);
  });
</script>
<link rel="apple-touch-icon" href="/assets/images/ncta-logo.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ site.title }}">
<meta property="og:title"
  content="{% if page.title %}{{ page.title }} ΓÇö {{ site.title }}{% else %}AanSekai ΓÇö An's Magical World{% endif %}">
<meta property="og:description"
  content="{% if page.excerpt %}{{ page.excerpt | strip_html | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:image" content="https://aansensei.github.io/assets/images/about-cover.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title"
  content="{% if page.title %}{{ page.title }} ΓÇö {{ site.title }}{% else %}AanSekai ΓÇö An's Magical World{% endif %}">
<meta name="twitter:description"
  content="{% if page.excerpt %}{{ page.excerpt | strip_html | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta name="twitter:image" content="https://aansensei.github.io/assets/images/about-cover.jpg">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap"
  rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<title>AanSekai</title>
<script>document.title = 'AanSekai';</script>

<!-- Preload pages on hover for instant navigation -->
<script src="https://instant.page/5.2.0" type="module"
  xintegrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aMdsg="></script>

<!-- freeze animation tr╞░ß╗¢c khi load xong -->
<style id="an-theme-blocker">
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
</style>

<script>
  /* khß╗ƒi tß║ío theme sß╗¢m, tr├ính flash */
  (function () {
    try {
      var KTHEME = 'an_theme', KTS = 'an_ts', KACT = 'an_act', TTL = 300000;
      var now = Date.now();
      var act = +sessionStorage.getItem(KACT) || 0;

      if (act && now - act > TTL) {
        sessionStorage.removeItem(KTHEME);
        sessionStorage.removeItem(KTS);
      }
      var sv = sessionStorage.getItem(KTHEME);
      var ts = +sessionStorage.getItem(KTS) || 0;
      var isDay = (sv === 'day' && now - ts < TTL);
      sessionStorage.setItem(KACT, now);

      function applyTheme() {
        if (!document.body) return false;

        if (isDay) document.body.classList.add('an-day-mode');
        else document.body.classList.remove('an-day-mode');

        void document.body.offsetHeight;

        requestAnimationFrame(function () {
          requestAnimationFrame(function () {
            var blocker = document.getElementById('an-theme-blocker');
            if (blocker) blocker.remove();
          });
        });
        return true;
      }

      if (!applyTheme()) {
        var obs = new MutationObserver(function () {
          if (document.body) {
            applyTheme();
            obs.disconnect();
          }
        });
        obs.observe(document.documentElement, { childList: true });
        document.addEventListener('DOMContentLoaded', applyTheme);
      }
    } catch (e) { }
  })();
</script>

<style>
  /* palette mß║╖c ─æß╗ïnh (─æ├¬m) */
  :root {
    --gold: #c9a227;
    --gold-l: #f0c84a;
    --gold-p: #faeab1;
    --gg: rgba(201, 162, 39, .4);
    --teal: #2a9d8f;
    --teal-l: #52c9b9;
    --rose: #c94f7c;
    --parch: #f8f4ec;
    --glass: rgba(6, 4, 25, 0.45);
    --gbord: rgba(201, 162, 39, .22);
    --gblur: blur(14px);
  }

  /* override ban ng├áy */
  body.an-day-mode {
    --gold: #b8860b;
    --gold-l: #d2691e;
    --gold-p: #8b4513;
    --gg: rgba(184, 134, 11, .4);
    --teal: #008080;
    --teal-l: #006666;
    --rose: #c71585;
    --parch: #2c2c2c;
    --glass: rgba(255, 255, 255, 0.65);
    --gbord: rgba(184, 134, 11, .3);
  }

  html {
    background: #03010a;
  }

  body.an-day-mode~html,
  html:has(body.an-day-mode) {
    background: #f0f8ff;
  }

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  html {
    overscroll-behavior-y: none;
  }

  body {
    background: #03010a;
    font-family: 'EB Garamond', Georgia, serif;
    color: var(--parch);
    cursor: none;
    transition: background 1.5s ease, color 1.5s ease;
  }

  body.an-day-mode {
    background: #f0f8ff;
  }

  h1,
  h2,
  h3,
  h4,
  .page__title,
  .site-title,
  .site-title a,
  #an-nav-title,
  #an-nav-subtitle,
  .masthead__title,
  .masthead__title a,
  .archive__item-title,
  .page__lead {
    font-family: 'Cinzel Decorative', serif !important;
    color: var(--gold-l) !important;
    text-shadow: 0 0 14px var(--gg) !important;
    font-weight: 700 !important;
  }

  #an-nav-subtitle {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1rem !important;
    font-style: italic !important;
    font-weight: 600 !important;
  }

  body.an-day-mode h1,
  body.an-day-mode h2,
  body.an-day-mode h3,
  body.an-day-mode h4,
  body.an-day-mode .page__title,
  body.an-day-mode .site-title,
  body.an-day-mode .site-title a,
  body.an-day-mode #an-nav-title,
  body.an-day-mode #an-nav-subtitle,
  body.an-day-mode .masthead__title,
  body.an-day-mode .masthead__title a,
  body.an-day-mode .archive__item-title,
  body.an-day-mode .page__lead {
    color: #b8860b !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9) !important;
  }

  .page__inner-wrap,
  .sidebar,
  .tech-group,
  .home-project-card {
    transition: background 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease !important;
  }

  p,
  span,
  a,
  .tech-tag,
  strong,
  em {
    transition: color 1.5s ease, text-shadow 1.5s ease, background 1.5s ease, border-color 1.5s ease !important;
  }

  body.an-day-mode .home-intro {
    color: #2c2c2c !important;
  }

  body.an-day-mode .home-project-desc {
    color: #444 !important;
  }

  body.an-day-mode .home-link {
    color: #006666 !important;
    border-bottom-color: rgba(0, 102, 102, 0.3) !important;
  }

  body.an-day-mode .home-link:hover {
    color: #b8860b !important;
  }

  body.an-day-mode .tech-tag {
    background: rgba(0, 128, 128, 0.1) !important;
    color: #006666 !important;
    border-color: rgba(0, 128, 128, 0.3) !important;
  }

  body.an-day-mode .home-project-card {
    background: rgba(255, 255, 255, 0.75) !important;
  }

  body.an-day-mode .tech-group {
    background: rgba(255, 255, 255, 0.65) !important;
  }

  body.an-day-mode .page__inner-wrap,
  body.an-day-mode .sidebar {
    background: rgba(255, 255, 255, 0.65) !important;
  }

  @media(pointer:fine) {

    *,
    *::before,
    *::after,
    a,
    button,
    input,
    label,
    select,
    textarea,
    [role="button"] {
      cursor: none !important;
    }
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 0
  }

  ::-webkit-scrollbar-track {
    background: rgba(2, 1, 8, .98)
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(#8a6a10, #c9a227, #f0c84a, #c9a227, #8a6a10);
    border-radius: 3px
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #c9a227 rgba(2, 1, 8, .98)
  }

  body.an-day-mode ::-webkit-scrollbar-track,
  html:has(body.an-day-mode)::-webkit-scrollbar-track {
    background: rgba(240, 248, 255, .98)
  }

  body.an-day-mode ::-webkit-scrollbar-thumb,
  html:has(body.an-day-mode)::-webkit-scrollbar-thumb {
    background: linear-gradient(#8b4513, #b8860b, #d2691e, #b8860b, #8b4513);
  }

  body.an-day-mode *,
  html:has(body.an-day-mode) {
    scrollbar-color: #b8860b rgba(240, 248, 255, .98)
  }

  #an-moon {
    position: fixed;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    will-change: left, top;
  }

  #an-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(201, 162, 39, .35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999998;
    transform: translate(-50%, -50%);
    transition: width .25s, height .25s, border-color .25s, box-shadow .25s, background .25s;
    will-change: left, top;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.an-day-mode #an-ring {
    border-color: rgba(184, 134, 11, .45);
  }

  #an-ring::before,
  #an-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #an-ring::before {
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    border: 1px dashed rgba(240, 200, 74, 0.7);
    animation: anRingSpin 7s linear infinite;
  }

  #an-ring::after {
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    border: 1px dotted rgba(255, 248, 235, 0.5);
    animation: anRingSpinRev 10s linear infinite;
  }

  body.an-day-mode #an-ring::before {
    border-color: rgba(210, 105, 30, 0.8);
  }

  body.an-day-mode #an-ring::after {
    border-color: rgba(184, 134, 11, 0.6);
  }

  #an-ring.noble-hover {
    width: 52px !important;
    height: 52px !important;
    border-color: rgba(240, 200, 74, 0.9) !important;
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.6), inset 0 0 12px rgba(201, 162, 39, 0.3) !important;
    background: rgba(201, 162, 39, 0.08) !important;
  }

  body.an-day-mode #an-ring.noble-hover {
    border-color: rgba(210, 105, 30, 0.9) !important;
    box-shadow: 0 0 20px rgba(210, 105, 30, 0.6), inset 0 0 12px rgba(184, 134, 11, 0.3) !important;
    background: rgba(184, 134, 11, 0.08) !important;
  }

  #an-ring.noble-hover::before,
  #an-ring.noble-hover::after {
    opacity: 1;
  }

  @keyframes anRingSpin {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes anRingSpinRev {
    100% {
      transform: rotate(-360deg);
    }
  }

  #an-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .masthead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .masthead::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100px;
    background: inherit;
    pointer-events: none;
  }

  /* GPU-layer hints only for the iOS Safari fast-scroll overscroll gap;
     unnecessary on desktop and can interfere with wheel/trackpad hit-testing there */
  @media (hover: none),
  (pointer: coarse) {
    .masthead {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform;
    }
  }

  html,
  .initial-content,
  .page__content,
  #main,
  .wrapper,
  .page,
  .archive,
  #page-wrapper {
    background: transparent !important;
  }

  .sidebar {
    background: var(--glass) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    border: 1px solid var(--gbord) !important;
    text-align: center !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(201, 162, 39, .09) !important;
    position: relative !important;
    overflow: visible !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  body.an-day-mode .sidebar {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(184, 134, 11, .1) !important;
  }

  .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    border-radius: 2px;
  }

  .author__urls-wrapper button,
  .author__urls-wrapper .btn--inverse,
  .author__urls-wrapper [class*="btn"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .author__urls-wrapper,
  .author__urls-wrapper nav,
  .author__urls-wrapper .author__urls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(201, 162, 39, .14) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  @keyframes avatarBreath {

    0%,
    100% {
      box-shadow: 0 0 16px rgba(212, 175, 55, .4), 0 0 38px rgba(212, 175, 55, .1) !important;
    }

    50% {
      box-shadow: 0 0 26px rgba(212, 175, 55, .65), 0 0 60px rgba(212, 175, 55, .18) !important;
    }
  }

  .author__avatar img {
    border-radius: 50% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    width: 120px !important;
    height: 120px !important;
    margin-bottom: 12px !important;
    border: 2px solid rgba(212, 175, 55, .85) !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, .4), 0 0 38px rgba(212, 175, 55, .1) !important;
    animation: avatarBreath 4s ease-in-out infinite !important;
    transition: transform .4s cubic-bezier(.25, 1, .5, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .author__avatar a:hover img {
    transform: scale(1.06) !important;
    box-shadow: 0 0 28px rgba(212, 175, 55, .7), 0 0 65px rgba(212, 175, 55, .22) !important;
  }

  .author__name {
    font-family: 'Cinzel Decorative', serif !important;
    color: var(--gold-l) !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 0 14px var(--gg) !important;
    margin-top: 42px !important;
    margin-bottom: 8px !important;
  }

  .author__bio {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.1rem !important;
    color: var(--teal-l) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }

  body.an-day-mode .author__bio {
    color: #006666 !important;
  }

  .author__location,
  .author__urls-wrapper p {
    color: rgba(255, 248, 235, .7) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: .9rem !important;
  }

  body.an-day-mode .author__location,
  body.an-day-mode .author__urls-wrapper p {
    color: #444 !important;
  }

  .author__urls a {
    color: rgba(255, 248, 235, .82) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 110px !important;
  }

  body.an-day-mode .author__urls a {
    color: #444 !important;
  }

  .author__urls a:hover {
    color: var(--gold-l) !important;
    padding-left: 4px !important;
  }

  .author__urls a i {
    color: var(--gold) !important;
    width: 16px !important;
  }

  /* the theme reserves space for a table-of-contents sidebar on every page;
     nothing on this site uses page TOC, so reclaim that width */
  .page {
    padding-right: 0 !important;
  }

  .page__inner-wrap {
    background: var(--glass) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    border: 1px solid var(--gbord) !important;
    margin-top: 20px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(201, 162, 39, .07) !important;
    position: relative !important;
    container-type: inline-size;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  body.an-day-mode .page__inner-wrap {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(184, 134, 11, .1) !important;
  }

  .page__inner-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
  }

  ::selection {
    background: rgba(201, 162, 39, .32) !important;
    color: #fff !important;
  }

  .page__footer {
    background: transparent !important;
    margin-top: 50px;
    border-top: 1px solid rgba(201, 162, 39, .1);
  }

  body.an-day-mode .page__footer {
    border-top-color: rgba(184, 134, 11, .2);
  }

  .page__footer-copyright,
  .page__footer .social-icons {
    display: none !important;
  }

  .page__footer::after {
    content: "Γ£ª  ┬⌐ 2026 Cao Thien An Nguyen  Γ£ª";
    display: block;
    text-align: center;
    background: linear-gradient(to right, transparent, rgba(201, 162, 39, .5), rgba(240, 200, 74, .8), rgba(201, 162, 39, .5), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: .88rem;
    padding: 1.5rem 0;
    letter-spacing: .18em;
  }

  body.an-day-mode .page__footer::after {
    background: linear-gradient(to right, transparent, rgba(184, 134, 11, .6), rgba(210, 105, 30, .9), rgba(184, 134, 11, .6), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .btn-cta-project,
  .btn-action {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 30px;
    letter-spacing: .05em;
    transition: all .4s cubic-bezier(.25, 1, .5, 1);
    cursor: none !important;
    position: relative;
    z-index: 10;
    border: none;
  }

  .btn-blue {
    background: linear-gradient(135deg, var(--teal), #1565c0);
    box-shadow: 0 0 14px rgba(42, 157, 143, .5);
    border: 1px solid rgba(82, 201, 185, .3);
  }

  .btn-blue:hover {
    box-shadow: 0 0 24px rgba(42, 157, 143, .8);
    transform: translateY(-2px);
  }

  .btn-neon {
    background: linear-gradient(45deg, var(--rose), #7209b7);
    box-shadow: 0 0 14px rgba(201, 79, 124, .45);
    border: 1px solid rgba(201, 79, 124, .3);
  }

  .btn-neon:hover {
    box-shadow: 0 0 24px rgba(201, 79, 124, .8);
    transform: translateY(-2px);
  }

  .btn-crimson {
    background: linear-gradient(135deg, #8b0000, #c0392b);
    box-shadow: 0 0 14px rgba(139, 0, 0, .55);
    border: 1px solid rgba(192, 57, 43, .35);
  }

  .btn-crimson:hover {
    box-shadow: 0 0 24px rgba(192, 57, 43, .85);
    transform: translateY(-2px);
  }

  .initial-content {
    opacity: 0;
    animation: anUp .8s cubic-bezier(.25, 1, .5, 1) .2s forwards;
  }

  .reveal-item {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s ease-out, transform .8s cubic-bezier(.25, 1, .5, 1);
  }

  .reveal-item.reveal-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes anUp {
    from {
      opacity: 0;
      transform: translateY(28px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  .an-spark {
    position: fixed;
    pointer-events: none;
    z-index: 9999997;
    border-radius: 50%;
    animation: anFly .8s cubic-bezier(.25, 1, .5, 1) forwards;
  }

  @keyframes anFly {
    0% {
      opacity: .9;
      transform: translate(0, 0) scale(1)
    }

    100% {
      opacity: 0;
      transform: translate(var(--tx), var(--ty)) scale(0)
    }
  }

  #an-storm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .an-sym {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    opacity: 0;
    animation: anSymUp linear infinite;
  }

  @keyframes anSymUp {
    0% {
      transform: translateY(110vh) rotate(0);
      opacity: 0
    }

    10% {
      opacity: var(--op)
    }

    90% {
      opacity: var(--op)
    }

    100% {
      transform: translateY(-10vh) rotate(var(--r));
      opacity: 0
    }
  }

  #an-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 1, 10, .97);
    backdrop-filter: blur(20px);
    z-index: 999999;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    perspective: 1400px;
  }

  body.an-day-mode #an-overlay {
    background: rgba(255, 255, 255, .95);
  }

  #an-book {
    width: 220px;
    height: 340px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) scale(0);
  }

  .ab-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px 14px 14px 5px;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  }

  #ab-back {
    background: #06031a;
    transform: translateZ(-6px);
    z-index: 1;
  }

  #ab-p1 {
    background: linear-gradient(to left, #cec6ae, #eae4d4);
    border: 1px solid #c5bcaa;
    transform: translateZ(-4px);
    z-index: 2;
  }

  #ab-p2 {
    background: linear-gradient(to right, #d5cdb8, #ede8dc);
    border: 1px solid #c5bcaa;
    transform: translateZ(-2px);
    z-index: 3;
  }

  #ab-p3 {
    background: linear-gradient(to left, #d2cabc, #e8e4d8);
    border: 1px solid #c5bcaa;
    transform: translateZ(0);
    z-index: 4;
  }

  #ab-front {
    border: 1px solid rgba(201, 162, 39, .4);
    box-shadow: 0 0 32px rgba(0, 0, 0, .7), 0 0 22px var(--gg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    transform: translateZ(2px);
    z-index: 5;
  }

  body.an-day-mode #ab-front {
    box-shadow: 0 0 32px rgba(0, 0, 0, .2), 0 0 22px rgba(184, 134, 11, .3);
  }

  #ab-front h3 {
    color: #fff !important;
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 1.25rem !important;
    text-shadow: 0 0 16px rgba(255, 255, 255, .8) !important;
    margin: 0 !important;
    pointer-events: none !important;
    line-height: 1.4 !important;
  }

  #an-top {
    position: fixed;
    bottom: 1.6rem;
    right: 1.4rem;
    z-index: 9000;
    cursor: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s, transform .3s cubic-bezier(.25, 1, .5, 1);
    transform: translateY(20px);
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  #an-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  #an-top:hover {
    transform: translateY(-6px) scale(1.08);
  }

  #an-top img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(201, 162, 39, .5));
  }

  #an-top span {
    font-family: 'Cormorant Garamond', serif;
    font-size: .68rem;
    color: rgba(201, 162, 39, .75);
    letter-spacing: .12em;
    font-style: italic;
    white-space: nowrap;
  }

  body.an-day-mode #an-top span {
    color: #8b4513;
    font-weight: 600;
  }

  @media(max-width:768px) {

    body,
    * {
      cursor: auto !important;
    }

    html,
    body,
    #main,
    .wrapper,
    .page,
    .archive,
    .initial-content,
    #page-wrapper,
    .search-content {
      background: transparent !important;
    }

    #an-moon,
    #an-ring,
    .an-spark {
      display: none !important;
    }

    .page__inner-wrap,
    .sidebar {
      padding: 20px !important;
      margin-left: 10px !important;
      margin-right: 10px !important;
      width: calc(100% - 20px) !important;
      background: rgba(6, 4, 25, 0.10) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    body.an-day-mode .page__inner-wrap,
    body.an-day-mode .sidebar {
      background: rgba(255, 255, 255, 0.55) !important;
      margin-left: 10px !important;
      margin-right: 10px !important;
      width: calc(100% - 20px) !important;
    }

    .author__avatar img {
      width: 90px !important;
      height: 90px !important;
    }

    #an-avatar-ring {
      width: 150px !important;
      height: 150px !important;
      margin-top: -75px !important;
      margin-left: -75px !important;
    }

    .author__name {
      font-size: .88rem !important;
    }

    .author__urls-wrapper .author__urls,
    .author__urls-wrapper nav.author__urls {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      position: static !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      padding: 0 !important;
      margin-top: 10px !important;
      opacity: 1 !important;
      visibility: visible !important;
      height: auto !important;
      width: auto !important;
      overflow: visible !important;
    }

    .author__urls-wrapper .author__urls::before,
    .author__urls-wrapper .author__urls::after {
      display: none !important;
    }

    .author__urls a {
      color: rgba(255, 248, 235, .85) !important;
      font-size: .88rem !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      text-align: left !important;
    }

    body.an-day-mode .author__urls a {
      color: #444 !important;
    }
  }

  .greedy-nav .site-title,
  .greedy-nav .site-title a,
  .greedy-nav .site-title:link,
  .greedy-nav .site-title:visited,
  .greedy-nav .site-title:hover,
  .greedy-nav .site-title:active,
  .masthead .site-title,
  .masthead .site-title a,
  .masthead .masthead__title,
  .masthead .masthead__title a,
  .masthead .masthead__title:link,
  .masthead .masthead__title:visited,
  .masthead .masthead__title:hover,
  .masthead .masthead__title:focus,
  .masthead #an-nav-title {
    background: linear-gradient(90deg, #c9a227, #f0c84a, #fff2a6, #f0c84a);
    background-size: 200% auto;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--gold-l) !important;
    opacity: 1 !important;
    filter: none !important;
    text-decoration: none !important;
  }

  body.an-day-mode .greedy-nav .site-title,
  body.an-day-mode .greedy-nav .site-title a,
  body.an-day-mode .greedy-nav .site-title:link,
  body.an-day-mode .greedy-nav .site-title:visited,
  body.an-day-mode .greedy-nav .site-title:hover,
  body.an-day-mode .greedy-nav .site-title:active,
  body.an-day-mode .masthead .site-title,
  body.an-day-mode .masthead .site-title a,
  body.an-day-mode .masthead .masthead__title,
  body.an-day-mode .masthead .masthead__title a,
  body.an-day-mode .masthead .masthead__title:link,
  body.an-day-mode .masthead .masthead__title:visited,
  body.an-day-mode .masthead .masthead__title:hover,
  body.an-day-mode .masthead .masthead__title:focus,
  body.an-day-mode .masthead #an-nav-title {
    background: linear-gradient(90deg, #8b4513, #b8860b, #d2691e, #b8860b);
    background-size: 200% auto;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #b8860b !important;
  }

  h1,
  h2,
  h3,
  .page__title,
  .masthead__title,
  .masthead__title a,
  .site-title,
  .site-title a,
  .contact-title,
  .cover-content h3 {
    color: var(--gold-l) !important;
    -webkit-text-fill-color: var(--gold-l) !important;
    text-shadow: 0 0 10px var(--gg) !important;
    font-family: 'Cinzel Decorative', serif !important;
    opacity: 1 !important;
  }

  /* disable click tr├¬n title + t├¬n t├íc giß║ú */
  .page__title,
  .page__title a,
  .author__name,
  .author__name a {
    pointer-events: none !important;
    cursor: default !important;
  }

  /* mask cho Saturn body + Moon crescent: ─æß╗òi m├áu theo nß╗ün */
  .an-ring-mask {
    fill: #03010a;
  }

  body.an-day-mode .an-ring-mask {
    fill: transparent;
  }

  #an-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99996;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.52) 100%);
    transition: background 1.5s ease;
  }

  body.an-day-mode #an-vignette {
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.18) 100%);
  }

  #an-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99997;
    opacity: 0.042;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  body.an-day-mode #an-grain {
    opacity: 0.028;
  }

  @keyframes twBlink {

    0%,
    100% {
      opacity: 1
    }

    50% {
      opacity: 0
    }
  }

  .author__bio-cursor {
    display: inline-block;
    color: #52c9b9;
    animation: twBlink 0.7s step-end infinite;
    font-style: normal;
    margin-left: 1px;
  }

  body.an-day-mode .author__bio-cursor {
    color: #008080;
  }
</style>

<script>
  window.anBookOpen = function (url, bg, title, e) { if (e) e.preventDefault(); window.location.href = url; };
  window.anBookClose = function (url, bg, title, e) { if (e) e.preventDefault(); window.location.href = url; };
  window.anBookReset = function (bk) {
    if (!bk) return;
    bk.style.transition = 'none'; bk.style.transform = 'translate(-50%,-50%) scale(0)';
    bk.querySelectorAll('.ab-layer').forEach(function (el) { el.style.transition = ''; el.style.transitionDelay = ''; el.style.transform = ''; });
  };

  function hex2rgb(h) { var v = parseInt(h.replace('#', ''), 16); return [v >> 16 & 255, v >> 8 & 255, v & 255]; }
  function lerpC(c1, c2, t) {
    var r1 = hex2rgb(c1), r2 = hex2rgb(c2);
    return Math.round(r1[0] + (r2[0] - r1[0]) * t) + ',' + Math.round(r1[1] + (r2[1] - r1[1]) * t) + ',' + Math.round(r1[2] + (r2[2] - r1[2]) * t);
  }
  function lerpC3(night, dayA, dayB, tTheme, tScroll) {
    var n = hex2rgb(night), a = hex2rgb(dayA), b = hex2rgb(dayB);
    var dr = a[0] + (b[0] - a[0]) * tScroll, dg = a[1] + (b[1] - a[1]) * tScroll, db = a[2] + (b[2] - a[2]) * tScroll;
    return Math.round(n[0] + (dr - n[0]) * tTheme) + ',' + Math.round(n[1] + (dg - n[1]) * tTheme) + ',' + Math.round(n[2] + (db - n[2]) * tTheme);
  }

  function prand(seed) { return Math.abs(Math.sin(seed * 12.9898) * 43758.5453) % 1; }

  function drawEllipseSafe(ctx, cx, cy, rx, ry) {
    ctx.save(); ctx.translate(cx, cy); ctx.scale(rx, ry); ctx.beginPath(); ctx.arc(0, 0, 1, 0, Math.PI * 2); ctx.fill(); ctx.restore();
  }

  var globalPropAngle = 0;

  document.addEventListener('DOMContentLoaded', function () {
    var isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);

    var isTabActive = !document.hidden;
    var activeTime = 0;
    var lastTick = Date.now();
    var mainRafId = null;
    var cursorRafId = null;
    var fwTimeoutId = null;
    var shootTimeoutId = null;

    var cX = -1000, cY = -1000, rX = -1000, rY = -1000;
    var isHovering = false;
    document.addEventListener('mousemove', function (ev) { cX = ev.clientX; cY = ev.clientY; });

    if (!isTouch) {
      var MS = 48;
      var mc = document.createElement('canvas'); mc.id = 'an-moon'; mc.width = MS; mc.height = MS;
      var mx = mc.getContext('2d');
      var rg = document.createElement('div'); rg.id = 'an-ring';
      document.body.append(mc, rg);

      function drawCursor(big) {
        mx.clearRect(0, 0, MS, MS);
        var cx = MS / 2, cy = MS / 2, r = big ? 11 : 7.5;
        mx.save();

        if (document.body.classList.contains('an-day-mode')) {
          mx.shadowColor = '#ff8c00'; mx.shadowBlur = big ? 20 : 10;
          var g = mx.createRadialGradient(cx, cy, 0, cx, cy, r);
          g.addColorStop(0, '#ffffff'); g.addColorStop(0.4, '#ffdf00'); g.addColorStop(1, '#ff8c00');
          mx.fillStyle = g; mx.beginPath(); mx.arc(cx, cy, r, 0, Math.PI * 2); mx.fill();

          if (big) {
            mx.strokeStyle = 'rgba(255,140,0,0.8)'; mx.lineWidth = 1.5;
            var t = activeTime * 0.001;
            for (var i = 0; i < 8; i++) {
              var ang = (Math.PI / 4) * i + t;
              mx.beginPath();
              mx.moveTo(cx + Math.cos(ang) * (r + 2), cy + Math.sin(ang) * (r + 2));
              mx.lineTo(cx + Math.cos(ang) * (r + 6), cy + Math.sin(ang) * (r + 6));
              mx.stroke();
            }
          }
        } else {
          mx.shadowColor = '#f0c84a'; mx.shadowBlur = big ? 16 : 8;
          var g = mx.createRadialGradient(cx - r * .22, cy - r * .2, 0, cx, cy, r);
          g.addColorStop(0, big ? '#fff8d5' : '#ffe8a5'); g.addColorStop(.45, big ? '#ffd84a' : '#f0c030'); g.addColorStop(1, '#b88a18');
          mx.fillStyle = g; mx.beginPath(); mx.arc(cx, cy, r, 0, Math.PI * 2); mx.fill();

          if (!big) {
            mx.shadowBlur = 0; mx.globalCompositeOperation = 'destination-out';
            mx.beginPath(); mx.arc(cx + r * .44, cy - r * .08, r * .84, 0, Math.PI * 2); mx.fill();
          }

          mx.globalCompositeOperation = 'source-over'; mx.fillStyle = 'rgba(140,90,0,.15)';
          if (!big) {
            mx.beginPath(); mx.arc(cx - r * .52, cy + r * .26, r * .18, 0, Math.PI * 2); mx.fill();
            mx.beginPath(); mx.arc(cx - r * .22, cy - r * .32, r * .12, 0, Math.PI * 2); mx.fill();
          } else {
            mx.beginPath(); mx.arc(cx - r * .3, cy + r * .3, r * .25, 0, Math.PI * 2); mx.fill();
            mx.beginPath(); mx.arc(cx + r * .2, cy - r * .4, r * .2, 0, Math.PI * 2); mx.fill();
            mx.beginPath(); mx.arc(cx + r * .4, cy + r * .1, r * .3, 0, Math.PI * 2); mx.fill();
            mx.beginPath(); mx.arc(cx - r * .1, cy - r * .1, r * .15, 0, Math.PI * 2); mx.fill();
          }
        }
        mx.restore();
      }

      function cursorLoop() {
        if (!isTabActive) return;
        drawCursor(isHovering);
        mc.style.left = cX + 'px'; mc.style.top = cY + 'px';
        rX += (cX - rX) * .12; rY += (cY - rY) * .12;
        rg.style.left = rX + 'px'; rg.style.top = rY + 'px';
        cursorRafId = requestAnimationFrame(cursorLoop);
      }
      cursorLoop();

      document.querySelectorAll('a,button,.tech-tag,home-project-card').forEach(function (el) {
        el.addEventListener('mouseenter', function () { isHovering = true; rg.classList.add('noble-hover'); });
        el.addEventListener('mouseleave', function () { isHovering = false; rg.classList.remove('noble-hover'); });
      });
    }

    var bg = document.createElement('canvas'); bg.id = 'an-bg'; document.body.prepend(bg);
    var ctx = bg.getContext('2d');
    var W = 0, H = 0;
    function resize() { W = bg.width = window.innerWidth; H = bg.height = window.innerHeight; }
    resize(); window.addEventListener('resize', resize);

    var mtnA = 0, casA = 0, skyA = 1, shipA = 0;
    var themeT = document.body.classList.contains('an-day-mode') ? 1 : 0;

    function updateAlpha() {
      var s = window.scrollY;
      var maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
      var scrollPct = s / maxScroll;

      mtnA = Math.min(1, Math.max(0, (scrollPct - 0.40) / 0.20));
      shipA = Math.min(1, Math.max(0, (scrollPct - 0.30) / 0.20));
      casA = Math.min(1, Math.max(0, (scrollPct - 0.70) / 0.15));
      skyA = Math.max(0, 1 - (scrollPct / 0.35));

      if (maxScroll < 300) { mtnA = 1; casA = 1; skyA = 1; shipA = 1; }
    }
    window.addEventListener('scroll', updateAlpha, { passive: true });
    window.addEventListener('resize', updateAlpha);
    updateAlpha();

    var STARS = Array.from({ length: 320 }, function () { return { x: Math.random(), y: Math.random() * .92, r: Math.random() * 1.5 + .2, a: Math.random(), da: (Math.random() * .009 + .003) * (Math.random() > .5 ? 1 : -1), sp: Math.random() > .82, ph: Math.random() * Math.PI * 2 }; });
    var PIS = [{ x: .60, y: .07 }, { x: .57, y: .11 }, { x: .53, y: .145 }, { x: .50, y: .115 }, { x: .545, y: .07 }, { x: .565, y: .175 }, { x: .538, y: .218 }, { x: .510, y: .258 }, { x: .470, y: .238 }, { x: .430, y: .208 }, { x: .398, y: .238 }, { x: .430, y: .272 }, { x: .468, y: .295 }];
    var PIL = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 0], [1, 5], [5, 6], [6, 7], [7, 8], [8, 9], [9, 10], [10, 11], [11, 12], [12, 8]];
    var SH = [];
    function spawnShoot() { var x = Math.random() * W * .85, y = Math.random() * H * .35, a = Math.PI / 4 + (Math.random() - .5) * .6; SH.push({ x: x, y: y, vx: Math.cos(a) * (8 + Math.random() * 11), vy: Math.sin(a) * (8 + Math.random() * 11), life: 1, decay: .014 + Math.random() * .013, trail: [] }); }

    function scheduleShoot() {
      if (!isTabActive) return;
      shootTimeoutId = setTimeout(function () {
        if (isTabActive) spawnShoot();
        scheduleShoot();
      }, 600 + Math.random() * 1000);
    }
    scheduleShoot(); spawnShoot(); spawnShoot(); spawnShoot();

    var FW = [], FWHUES = [0, 30, 55, 180, 210, 270, 300];
    function makeFW(tx, ty) { var fw = { x: tx || W * (.2 + Math.random() * .6), y: H * .88, ty: ty || H * (.06 + Math.random() * .28), phase: 'launch', parts: [] }; fw.vy = -(fw.y - fw.ty) / 22; FW.push(fw); }

    function scheduleFW() {
      if (!isTabActive) return;
      fwTimeoutId = setTimeout(function () {
        if (isTabActive && themeT < 0.5) makeFW();
        scheduleFW();
      }, 3000 + Math.random() * 4000);
    }
    setTimeout(scheduleFW, 2000); setTimeout(function () { makeFW(); }, 4000);

    function explodeFW(fw) { fw.phase = 'burst'; var n = 65 + Math.floor(Math.random() * 20), h = FWHUES[Math.floor(Math.random() * FWHUES.length)]; for (var i = 0; i < n; i++) { var a = (Math.PI * 2 / n) * i + (Math.random() - .5) * .2, v = 1.6 + Math.random() * 3.4; fw.parts.push({ x: fw.x, y: fw.y, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1, decay: .014 + Math.random() * .011, hue: h, s: 1.6 + Math.random() * 1.6 }); } }

    var treeLeftShock = 0, treeRightShock = 0;
    var SHIP_SMOKE = [];
    var SHIP_WIND = [];
    var shipBaseX = -300;

    document.addEventListener('click', function (ev) {
      if (!ev.target.closest('a,button,.page__inner-wrap,.sidebar,.masthead,.book-container,#an-overlay')) {
        var isDay = themeT > 0.5;
        var clickedTree = false;

        if (isDay && ev.clientY > H * 0.4) {
          if (ev.clientX < W * 0.3) {
            treeLeftShock = 2.0; clickedTree = true;
            spawnPetalBurst(W * 0.15, H * 0.8);
          } else if (ev.clientX > W * 0.7) {
            treeRightShock = 2.0; clickedTree = true;
            spawnPetalBurst(W * 0.85, H * 0.8);
          }
        }

        if (!clickedTree) {
          if (!isDay) {
            if (ev.clientY > H * (H > W ? 0.65 : 0.82)) {
              if (window._river_fishes) {
                var sc = Math.max(W / 1280, H > W ? 1.2 : 0.4);
                var fTypes = ['koi', 'golden_carp', 'goby'];
                var rType = fTypes[Math.floor(Math.random() * fTypes.length)];
                window._river_fishes.push({
                  x: ev.clientX / W, y: ev.clientY, startY: ev.clientY,
                  vx: (Math.random() - 0.5) * 4 * sc, vy: -(5 + Math.random() * 4) * sc,
                  state: 'jumping', life: 1, type: rType
                });
              }
            } else {
              makeFW(ev.clientX, Math.max(ev.clientY - H * .08, H * .04));
            }
          }
          else {
            for (var k = 0; k < 15; k++) {
              FF.push({
                x: ev.clientX / W, y: ev.clientY / H,
                vx: (Math.random() - 0.5) * 0.01, vy: (Math.random() - 0.5) * 0.01 - 0.005,
                r: Math.random() * 2 + 1, hue: 320, ph: Math.random() * Math.PI * 2, sp: Math.random() * 2 + 1, isTemp: true
              });
            }
          }
        }
      }
    });

    function spawnPetalBurst(cx, cy) {
      for (var k = 0; k < 45; k++) {
        var angle = Math.random() * Math.PI * 2;
        var speed = Math.random() * 0.01 + 0.008;
        FF.push({
          x: cx / W + Math.cos(angle) * 0.03,
          y: cy / H - 0.3 + Math.random() * 0.15,
          vx: Math.cos(angle) * speed * 0.3 + (Math.random() > 0.5 ? 0.003 : -0.003),
          vy: Math.sin(angle) * speed * 0.1 + Math.random() * 0.005 + 0.003,
          r: Math.random() * 2 + 1.5,
          hue: 330,
          ph: Math.random() * Math.PI * 2,
          sp: Math.random() * 2 + 1,
          isTemp: true,
          type: 'petal',
          rotX: Math.random() * Math.PI * 2,
          rotSpd: (Math.random() - 0.5) * 0.2,
          swayPhase: Math.random() * Math.PI * 2,
          swaySpd: Math.random() * 2 + 1
        });
      }
    }

    var VL = Array.from({ length: 50 }, function () { return { px: Math.random(), py: Math.random() * 14 - 4, r: .8 + Math.random() * 2.4, hue: [40, 50, 55, 200, 0, 280][Math.floor(Math.random() * 6)], ph: Math.random() * Math.PI * 2, sp: .4 + Math.random() * 1.2 }; });

    var FF = Array.from({ length: 60 }, function () {
      return { x: Math.random(), y: Math.random() * 0.18 + 0.82, vx: (Math.random() - 0.5) * 0.0006, vy: (Math.random() - 0.5) * 0.0006, r: Math.random() * 1.5 + 0.5, hue: Math.random() > 0.55 ? 60 : 160, ph: Math.random() * Math.PI * 2, sp: Math.random() * 1.5 + 0.5 };
    });

    function drawFireflies(a, t) {
      ctx.save(); ctx.globalAlpha = a;
      var nt = activeTime * 0.001;
      var aNight = Math.max(0, 1 - t * 1.5);
      var aDay = Math.max(0, (t - 0.2) * 1.25);

      for (var i = FF.length - 1; i >= 0; i--) {
        var f = FF[i];
        if (f.type === 'petal') {
          f.x += f.vx; f.y += f.vy;
          var sway = Math.sin(nt * (f.swaySpd || 2) + (f.swayPhase || 0)) * 0.0008;
          f.x += sway; f.rotX = (f.rotX || 0) + (f.rotSpd || 0.05);
        } else {
          f.x += f.vx + Math.sin(nt * f.sp + f.ph) * 0.0002;
          f.y += f.vy + Math.cos(nt * f.sp * 0.8 + f.ph) * 0.0001;
        }

        var px = f.x * W, py = f.y * H;
        var dx = px - cX, dy = py - cY;
        var dist = Math.sqrt(dx * dx + dy * dy);

        if (dist < 150 && cY > H * 0.5) {
          var force = (150 - dist) / 150;
          f.x += (dx / dist) * force * 0.008; f.y += (dy / dist) * force * 0.008;
        }

        if (!f.isTemp) {
          if (f.x < 0) f.x = 1; if (f.x > 1) f.x = 0;
          if (f.y < 0.82) f.y = 1; if (f.y > 1) f.y = 0.82;
        } else {
          if (f.y < 0 || f.x < 0 || f.x > 1 || f.y > 1) { FF.splice(i, 1); continue; }
        }

        px = f.x * W; py = f.y * H;
        var br = 0.2 + 0.8 * Math.abs(Math.sin(nt * f.sp * 2 + f.ph));

        if (aNight > 0 && f.type !== 'petal') {
          var fg = ctx.createRadialGradient(px, py, 0, px, py, f.r * 5);
          fg.addColorStop(0, 'hsla(' + f.hue + ', 90%, 65%, ' + br * 0.6 * aNight + ')');
          fg.addColorStop(1, 'transparent');
          ctx.fillStyle = fg; ctx.beginPath(); ctx.arc(px, py, f.r * 5, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = 'hsla(' + f.hue + ', 100%, 85%, ' + (br * aNight) + ')';
          ctx.beginPath(); ctx.arc(px, py, f.r, 0, Math.PI * 2); ctx.fill();
        }

        if (aDay > 0) {
          if (f.type === 'petal') {
            var petalAlpha = aDay * (f.isTemp ? Math.min(1, (1 - f.y) * 4) : 1);
            var flip = Math.cos(f.rotX);
            ctx.fillStyle = 'rgba(255, 182, 193, ' + petalAlpha + ')';
            ctx.save(); ctx.translate(px, py); ctx.rotate(nt * f.sp * 2 + f.ph); ctx.scale(1, flip);
            ctx.beginPath(); ctx.moveTo(0, -f.r * 2); ctx.quadraticCurveTo(f.r * 1.5, 0, 0, f.r * 2); ctx.quadraticCurveTo(-f.r * 1.5, 0, 0, -f.r * 2); ctx.fill();
            ctx.restore();
          } else {
            var flap = Math.abs(Math.sin(nt * 12 * f.sp + f.ph));
            ctx.fillStyle = f.hue > 100 ? 'rgba(255, 182, 193, ' + aDay + ')' : 'rgba(255, 228, 225, ' + aDay + ')';
            if (f.isTemp) ctx.fillStyle = 'rgba(255, 255, 255, ' + aDay + ')';
            ctx.save(); ctx.translate(px, py); ctx.rotate(Math.sin(nt * f.sp) * 0.5); ctx.scale(flap + 0.3, 1);
            ctx.beginPath(); ctx.ellipse(-3 * f.r, 0, 3 * f.r, 5 * f.r, Math.PI / 6, 0, Math.PI * 2); ctx.fill();
            ctx.beginPath(); ctx.ellipse(3 * f.r, 0, 3 * f.r, 5 * f.r, -Math.PI / 6, 0, Math.PI * 2); ctx.fill();
            ctx.restore();
          }
        }
      }
      ctx.restore();
    }

    function drawMist(a, isFront, t) {
      ctx.save(); ctx.globalAlpha = a;
      var time = activeTime * 0.0003;
      var mistLayers = isFront ? [
        { y: 0.82, amp: 0.035, spd: 0.6, wv: 2.2, col: lerpC('#2a9d8f', '#ffffff', t) },
        { y: 0.88, amp: 0.045, spd: -0.4, wv: 1.5, col: lerpC('#645096', '#f0f8ff', t) }
      ] : [
        { y: 0.78, amp: 0.03, spd: -0.2, wv: 2.5, col: lerpC('#181228', '#ffffff', t) }
      ];

      mistLayers.forEach(function (m) {
        var baseY = m.y * H;
        ctx.beginPath(); ctx.moveTo(0, H); ctx.lineTo(0, baseY);
        for (var x = 0; x <= W; x += 30) {
          var pct = x / W;
          var wave1 = Math.sin(pct * Math.PI * m.wv + time * m.spd) * m.amp * H;
          var wave2 = Math.sin(pct * Math.PI * m.wv * 2 - time * m.spd * 1.5) * (m.amp * 0.5) * H;
          var waveFinalY = baseY + wave1 + wave2;
          if (cY > H * 0.5) {
            var distX = Math.abs(x - cX);
            if (distX < 250) {
              var dent = Math.pow(Math.cos((distX / 250) * (Math.PI / 2)), 2) * 80;
              waveFinalY += dent;
            }
          }
          ctx.lineTo(x, waveFinalY);
        }
        ctx.lineTo(W, H); ctx.closePath();
        var grad = ctx.createLinearGradient(0, baseY - H * 0.15, 0, H);
        grad.addColorStop(0, 'rgba(' + m.col + ', 0)'); grad.addColorStop(0.4, 'rgba(' + m.col + ', 0.06)'); grad.addColorStop(1, 'rgba(' + m.col + ', 0.12)');
        ctx.fillStyle = grad; ctx.fill();
      });
      ctx.restore();
    }

    var peaksData = [[0, .68], [.04, .47], [.09, .57], [.15, .36], [.22, .50], [.28, .33], [.34, .46], [.39, .30], [.45, .43], [.50, .28], [.56, .42], [.61, .32], [.67, .44], [.72, .30], [.78, .42], [.84, .33], [.90, .44], [.95, .36], [1, .48]].map(function (p) { return [p[0], 1 - (1 - p[1]) * 1.1]; });
    var peaksData2 = [[0, .69], [.03, .51], [.07, .57], [.12, .41], [.17, .53], [.23, .37], [.30, .49], [.36, .35], [.42, .47], [.48, .33], [.53, .45], [.59, .33], [.65, .45], [.70, .35], [.75, .46], [.81, .36], [.86, .47], [.92, .37], [.97, .46], [1, .55]].map(function (p) { return [p[0], 1 - (1 - p[1]) * 1.1]; });

    function drawMtns(a, t) {
      ctx.save(); ctx.globalAlpha = a;
      var isMobilePortrait = W < 768 && H > W;
      var mScale = isMobilePortrait ? 0.65 : (W < 768 ? 0.45 : 0.85);
      var MVW = W < 768 ? 900 : W;
      var yOffset = isMobilePortrait ? H * 0.12 : (W < 768 ? H * 0.32 : 0);
      function peakY(p) { return p[1] * H * mScale + yOffset; }
      ctx.translate((W - MVW) / 2, 0);
      var g1 = ctx.createLinearGradient(0, H * .33, 0, H * .78);
      g1.addColorStop(0, 'rgb(' + lerpC('#1a1436', '#6d889c', t) + ')'); g1.addColorStop(1, 'rgb(' + lerpC('#0e0b1c', '#4a6b82', t) + ')');
      ctx.fillStyle = g1; ctx.beginPath(); ctx.moveTo(0, H);
      peaksData.forEach(function (p) { ctx.lineTo(p[0] * MVW, peakY(p)); }); ctx.lineTo(MVW, H); ctx.closePath(); ctx.fill();

      var g2 = ctx.createLinearGradient(0, H * .50, 0, H * .86);
      g2.addColorStop(0, 'rgb(' + lerpC('#120a2e', '#55768a', t) + ')'); g2.addColorStop(1, 'rgb(' + lerpC('#0a0614', '#3d5c70', t) + ')');
      ctx.fillStyle = g2; ctx.beginPath(); ctx.moveTo(0, H);
      peaksData2.forEach(function (p) { ctx.lineTo(p[0] * MVW, peakY(p)); }); ctx.lineTo(MVW, H); ctx.closePath(); ctx.fill();

      ctx.fillStyle = 'rgba(' + lerpC('#e6e1ff', '#ffffff', t) + ',.35)';
      var frontSnowPeaks = [{ i: 1, h: 0.02 }, { i: 3, h: 0.025 }, { i: 5, h: 0.03 }, { i: 7, h: 0.035 }, { i: 9, h: 0.04 }, { i: 11, h: 0.04 }, { i: 13, h: 0.035 }, { i: 15, h: 0.03 }, { i: 17, h: 0.025 }];
      frontSnowPeaks.forEach(function (sp) {
        var P = peaksData2[sp.i], L = peaksData2[sp.i - 1], R = peaksData2[sp.i + 1];
        if (!P || !L || !R) return;
        var pX = P[0] * MVW, pY = peakY(P), lX = L[0] * MVW, lY = peakY(L), rX = R[0] * MVW, rY = peakY(R);
        var capH = sp.h * H;
        if (lY - pY <= 0 || rY - pY <= 0) return;
        capH = Math.min(capH, (lY - pY) * 0.8, (rY - pY) * 0.8);
        var tL = capH / (lY - pY), slX = pX + tL * (lX - pX), slY = pY + capH;
        var tR = capH / (rY - pY), srX = pX + tR * (rX - pX), srY = pY + capH;
        ctx.beginPath(); ctx.moveTo(pX, pY); ctx.lineTo(slX, slY); ctx.lineTo(pX - (pX - slX) * 0.7, slY + capH * 0.15); ctx.lineTo(pX - (pX - slX) * 0.3, slY + capH * 0.35); ctx.lineTo(pX, slY + capH * 0.25); ctx.lineTo(pX + (srX - pX) * 0.4, slY + capH * 0.4); ctx.lineTo(pX + (srX - pX) * 0.7, slY + capH * 0.15); ctx.lineTo(srX, srY); ctx.closePath(); ctx.fill();
      });
      ctx.restore();
    }

    function drawForest(a, t) {
      ctx.save(); ctx.globalAlpha = a;
      ctx.fillStyle = 'rgb(' + lerpC('#09071c', '#3d7c47', t) + ')'; ctx.fillRect(0, H * .86, W, H * .14);
      function tree(px, py, tw, th) {
        ctx.fillStyle = 'rgb(' + lerpC('#070518', '#2d5a27', t) + ')';
        ctx.fillRect(px - tw * .08, py, tw * .16, th * .3);
        [[0, .3, .52, .9], [-.12, .08, .62, .52], [-.2, -.02, .7, .32]].forEach(function (p) { ctx.beginPath(); ctx.moveTo(px + p[0] * tw, py + p[1] * th); ctx.lineTo(px, py - p[3] * th); ctx.lineTo(px - p[0] * tw - p[2] * tw, py + p[1] * th); ctx.closePath(); ctx.fill(); });
      }
      [[.02, .86, 26, 52], [.055, .85, 20, 46], [.09, .86, 28, 58], [.13, .855, 22, 48], [.17, .85, 24, 50], [.22, .86, 19, 42], [.27, .855, 26, 54], [.31, .86, 21, 45], [.36, .855, 28, 56], [.40, .86, 22, 48], [.45, .855, 25, 50], [.49, .86, 19, 42], [.54, .855, 26, 52], [.58, .86, 20, 44], [.63, .855, 28, 56], [.67, .86, 22, 48], [.72, .855, 24, 50], [.76, .86, 19, 42], [.81, .855, 26, 54], [.85, .86, 21, 45], [.89, .855, 28, 56], [.93, .86, 22, 48], [.97, .855, 22, 48]].forEach(function (p) { tree(p[0] * W, p[1] * H, p[2], p[3]); });
      ctx.restore();
    }

    /* Hue Imperial City Architecture - Ngo Mon Gate and Extended Citadel */
    function drawCastle(a, t, isReflection) {
      ctx.save(); ctx.globalAlpha = a;
      var bY = H * (H > W ? 0.65 : 0.82);
      var isMobile = W < 768;
      var VW = isMobile ? 900 : W;
      var s = Math.max(VW / 1280, isMobile ? 0.9 : .4) * 1.1 * (isMobile ? 1.25 : 1);
      var nt = activeTime * 0.001;
      var isNight = t <= 0.5;

      // Aura
      if (!isReflection) {
        ctx.globalAlpha = a * (1 - t);
        var am = ctx.createRadialGradient(W / 2, H * .82, 0, W / 2, H * .82, W * .25);
        am.addColorStop(0, 'rgba(180,140,50,.18)');
        am.addColorStop(1, 'transparent');
        ctx.fillStyle = am; ctx.fillRect(0, H * .65, W, H * .35);
      }
      ctx.globalAlpha = a;
      ctx.translate((W - VW) / 2, 0);

      // Hue Palette      
      var cStoneBase = lerpC('#2f3338', '#b5b7b0', t);
      var cStoneDark = lerpC('#16181c', '#606461', t);
      var cRedBase = lerpC('#4d0c11', '#c91a1e', t);
      var cRedDark = lerpC('#240205', '#800c11', t);
      var cGold = lerpC('#8a620c', '#ffdd00', t);
      var cRoofYellow = lerpC('#5e410b', '#f5b018', t);
      var cRoofYellowDk = lerpC('#331f03', '#ab7003', t);
      var cRoofGreen = lerpC('#092b18', '#26965d', t);
      var cRoofGreenDk = lerpC('#03170a', '#125432', t);
      var cWoodBase = lerpC('#26130b', '#613620', t);
      var cWoodDark = lerpC('#120704', '#3d1b0c', t);
      var cRidge = lerpC('#6c6863', '#fffcf5', t);

      function drawFlag(fx, fy, flagType) {
        var wave = Math.sin(nt * 5) * 5 * s;
        var wave2 = Math.cos(nt * 5) * 4 * s;
        var flagW = 32 * s, flagH = 20 * s;
        var cBase = lerpC('#731416', '#da251d', t);
        ctx.fillStyle = 'rgb(' + cBase + ')';
        ctx.beginPath(); ctx.moveTo(fx, fy);
        ctx.bezierCurveTo(fx + flagW * 0.3, fy - wave, fx + flagW * 0.7, fy + wave2, fx + flagW, fy - flagH * 0.2 + wave);
        ctx.lineTo(fx + flagW, fy + flagH * 0.8 + wave);
        ctx.bezierCurveTo(fx + flagW * 0.7, fy + flagH + wave2, fx + flagW * 0.3, fy + flagH - wave, fx, fy + flagH);
        ctx.closePath(); ctx.fill();
        var sx = fx + flagW * 0.45, sy = fy + flagH * 0.5 + wave * 0.3, sr1 = 4.5 * s, sr2 = 1.8 * s, rot = Math.PI / 2 * 3, step = Math.PI / 5;
        var starColor = lerpC('#e0cc67', '#ffff00', t);
        ctx.fillStyle = 'rgb(' + starColor + ')';
        ctx.beginPath();
        for (var i = 0; i < 5; i++) {
          ctx.lineTo(sx + Math.cos(rot) * sr1, sy + Math.sin(rot) * sr1); rot += step;
          ctx.lineTo(sx + Math.cos(rot) * sr2, sy + Math.sin(rot) * sr2); rot += step;
        }
        ctx.closePath(); ctx.fill();
      }

      function drawArch(cx, cy, w, h, isMainDoor) {
        var doorGrad = ctx.createLinearGradient(cx - w / 2, 0, cx + w / 2, 0);
        if (isMainDoor) {
          doorGrad.addColorStop(0, 'rgb(' + cRedDark + ')');
          doorGrad.addColorStop(0.5, 'rgb(' + cRedBase + ')');
          doorGrad.addColorStop(1, 'rgb(' + cRedDark + ')');
        } else {
          doorGrad.addColorStop(0, 'rgb(' + cWoodDark + ')');
          doorGrad.addColorStop(0.5, 'rgb(' + cWoodBase + ')');
          doorGrad.addColorStop(1, 'rgb(' + cWoodDark + ')');
        }
        ctx.fillStyle = doorGrad;
        ctx.beginPath();
        ctx.moveTo(cx - w / 2, cy); ctx.lineTo(cx - w / 2, cy - h + w / 2);
        ctx.arc(cx, cy - h + w / 2, w / 2, Math.PI, 0);
        ctx.lineTo(cx + w / 2, cy); ctx.fill();
        ctx.strokeStyle = 'rgba(0,0,0,0.6)'; ctx.lineWidth = 2 * s;
        ctx.beginPath();
        ctx.moveTo(cx - w / 2, cy); ctx.lineTo(cx - w / 2, cy - h + w / 2);
        ctx.arc(cx, cy - h + w / 2, w / 2, Math.PI, 0);
        ctx.lineTo(cx + w / 2, cy); ctx.stroke();
        ctx.strokeStyle = 'rgba(0,0,0,0.4)'; ctx.lineWidth = 1.5 * s;
        for (var plankX = cx - w / 2 + 5 * s; plankX < cx + w / 2; plankX += 5 * s) {
          ctx.beginPath(); ctx.moveTo(plankX, cy);
          var dx = plankX - cx, r = w / 2, dy = Math.sqrt(Math.max(0, r * r - dx * dx));
          ctx.lineTo(plankX, cy - h + r - dy); ctx.stroke();
        }
        /* Center split line for double doors */
        ctx.strokeStyle = 'rgba(0,0,0,0.6)'; ctx.lineWidth = 1.2 * s;
        ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx, cy - h + w / 2); ctx.stroke();

        for (var py = cy - 8 * s; py > cy - h + 15 * s; py -= 10 * s) {
          for (var px = cx - w / 2 + 5 * s; px < cx + w / 2; px += 10 * s) {
            if (isNight) {
              /* Glowing aura for door rivets */
              var flicker = 0.85 + 0.15 * Math.sin(nt * 2 + px);
              var halo = ctx.createRadialGradient(px, py, 0, px, py, 7 * s);
              halo.addColorStop(0, 'rgba(255, 190, 60, ' + (0.5 * flicker) + ')');
              halo.addColorStop(1, 'transparent');
              ctx.fillStyle = halo;
              ctx.beginPath(); ctx.arc(px, py, 7 * s, 0, Math.PI * 2); ctx.fill();
            }
            ctx.fillStyle = 'rgb(' + cGold + ')';
            ctx.beginPath(); ctx.arc(px, py, 1.2 * s, 0, Math.PI * 2); ctx.fill();
          }
        }
      }

      function drawHueRoof(cx, cy, w, h, cBase, cDark, upturn) {
        var rg = ctx.createLinearGradient(cx - w / 2, 0, cx + w / 2, 0);
        rg.addColorStop(0, 'rgb(' + cDark + ')'); rg.addColorStop(0.5, 'rgb(' + cBase + ')'); rg.addColorStop(1, 'rgb(' + cDark + ')');
        ctx.fillStyle = rg;

        ctx.beginPath();
        ctx.moveTo(cx - w / 2, cy - upturn);
        ctx.quadraticCurveTo(cx - w * 0.42, cy - h * 0.4, cx - w * 0.32, cy - h);
        ctx.lineTo(cx + w * 0.32, cy - h);
        ctx.quadraticCurveTo(cx + w * 0.42, cy - h * 0.4, cx + w / 2, cy - upturn);
        ctx.quadraticCurveTo(cx + w * 0.35, cy, cx, cy + 2 * s);
        ctx.quadraticCurveTo(cx - w * 0.35, cy, cx - w / 2, cy - upturn);
        ctx.fill();

        ctx.strokeStyle = 'rgba(0,0,0,0.3)'; ctx.lineWidth = 1 * s;
        var cols = Math.floor(w / (4.5 * s));
        for (var i = 1; i < cols; i++) {
          var tx = cx - w / 2 + (w / cols) * i;
          var txc = tx + (cx - tx) * 0.35;
          var pct = Math.abs(tx - cx) / (w / 2);
          var ty = cy + 2 * s - Math.pow(pct, 1.5) * (upturn + 2 * s);
          ctx.beginPath(); ctx.moveTo(tx, ty);
          ctx.quadraticCurveTo(tx + (txc - tx) * 0.2, cy - h * 0.5, txc, cy - h);
          ctx.stroke();
        }

        ctx.strokeStyle = 'rgb(' + cRidge + ')'; ctx.lineWidth = 3.5 * s;
        ctx.beginPath(); ctx.moveTo(cx - w * 0.34, cy - h); ctx.lineTo(cx + w * 0.34, cy - h); ctx.stroke();

        ctx.fillStyle = 'rgb(' + cGold + ')';
        ctx.beginPath(); ctx.arc(cx, cy - h - 4.5 * s, 4.5 * s, 0, Math.PI * 2); ctx.fill();

        ctx.lineWidth = 2 * s; ctx.strokeStyle = 'rgb(' + cGold + ')';
        ctx.beginPath(); ctx.moveTo(cx - w * 0.34, cy - h); ctx.quadraticCurveTo(cx - w * 0.42, cy - h - 6 * s, cx - w * 0.38, cy - h - 10 * s); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx + w * 0.34, cy - h); ctx.quadraticCurveTo(cx + w * 0.42, cy - h - 6 * s, cx + w * 0.38, cy - h - 10 * s); ctx.stroke();

        ctx.strokeStyle = 'rgb(' + cRidge + ')'; ctx.lineWidth = 2.5 * s;
        ctx.beginPath(); ctx.moveTo(cx - w / 2, cy - upturn); ctx.quadraticCurveTo(cx - w * 0.42, cy - h * 0.4, cx - w * 0.32, cy - h); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx + w / 2, cy - upturn); ctx.quadraticCurveTo(cx + w * 0.42, cy - h * 0.4, cx + w * 0.32, cy - h); ctx.stroke();

        ctx.fillStyle = 'rgb(' + cGold + ')';
        ctx.beginPath(); ctx.arc(cx - w / 2 - 1 * s, cy - upturn - 2 * s, 2.5 * s, 0, Math.PI * 2); ctx.fill();
        ctx.beginPath(); ctx.arc(cx + w / 2 + 1 * s, cy - upturn - 2 * s, 2.5 * s, 0, Math.PI * 2); ctx.fill();

        ctx.fillStyle = 'rgba(0,0,0,0.5)';
        ctx.beginPath();
        ctx.moveTo(cx - w / 2 + 2 * s, cy - upturn + 2 * s);
        ctx.quadraticCurveTo(cx - w * 0.35, cy + 2 * s, cx, cy + 4 * s);
        ctx.quadraticCurveTo(cx + w * 0.35, cy + 2 * s, cx + w / 2 - 2 * s, cy - upturn + 2 * s);
        ctx.quadraticCurveTo(cx + w * 0.35, cy, cx, cy + 2 * s);
        ctx.quadraticCurveTo(cx - w * 0.35, cy, cx - w / 2 + 2 * s, cy - upturn + 2 * s);
        ctx.fill();
      }

      function drawPavilion(cx, cy, w, h, cols) {
        var bodyGrad = ctx.createLinearGradient(cx - w / 2, 0, cx + w / 2, 0);
        bodyGrad.addColorStop(0, 'rgb(' + cRedDark + ')'); bodyGrad.addColorStop(0.5, 'rgb(' + cRedBase + ')'); bodyGrad.addColorStop(1, 'rgb(' + cRedDark + ')');
        ctx.fillStyle = bodyGrad;
        ctx.fillRect(cx - w / 2, cy - h, w, h);
        var pW = 5 * s;
        for (var i = 0; i <= cols; i++) {
          var px = cx - w / 2 + (w / cols) * i - pW / 2;
          if (i === 0) px += pW / 2;
          if (i === cols) px -= pW / 2;
          ctx.fillStyle = 'rgb(' + cRedDark + ')';
          ctx.fillRect(px, cy - h, pW, h);
          ctx.fillStyle = 'rgb(' + cStoneBase + ')';
          ctx.fillRect(px - 1 * s, cy - 5 * s, pW + 2 * s, 5 * s);
          ctx.fillStyle = 'rgb(' + cGold + ')';
          ctx.fillRect(px - 0.5 * s, cy - h, pW + 1 * s, 4 * s);
        }
        ctx.fillStyle = 'rgba(0,0,0,0.6)';
        for (var i = 0; i < cols; i++) {
          var px1 = cx - w / 2 + (w / cols) * i + pW / 2;
          var pWidth = (w / cols) - pW;
          if (i === 0) { px1 -= pW / 2; pWidth -= pW / 2; }
          if (i === cols - 1) { pWidth -= pW / 2; }
          ctx.fillRect(px1 + 2 * s, cy - h + 10 * s, pWidth - 4 * s, h - 20 * s);
          if (isNight && !isReflection) {
            /* Soft steady glow for windows with outer aura (skipped in reflection: iOS Safari's
               shadowBlur doesn't respect globalAlpha, so this would render too bright/undimmed) */
            var glow = 0.85 + 0.15 * Math.sin(nt * 1.2 + cx * 0.02 + i);
            ctx.shadowBlur = 15 * s;
            ctx.shadowColor = 'rgba(255, 190, 80, ' + (0.8 * glow) + ')';
            ctx.fillStyle = 'rgba(255,200,100,' + (0.75 * glow) + ')';
            ctx.fillRect(px1 + 2 * s, cy - h + 10 * s, pWidth - 4 * s, h - 20 * s);
            ctx.shadowBlur = 0;
            ctx.fillStyle = 'rgba(0,0,0,0.6)';
          }
          ctx.strokeStyle = 'rgb(' + cGold + ')'; ctx.lineWidth = 0.8 * s;
          for (var gy = cy - h + 14 * s; gy < cy - 14 * s; gy += 4.5 * s) {
            ctx.beginPath(); ctx.moveTo(px1 + 2 * s, gy); ctx.lineTo(px1 + pWidth - 2 * s, gy); ctx.stroke();
          }
        }
      }

      function drawRailing(cx, cy, w) {
        ctx.fillStyle = 'rgb(' + cWoodDark + ')';
        ctx.fillRect(cx - w / 2, cy - 10 * s, w, 10 * s);
        ctx.fillStyle = 'rgb(' + cRedBase + ')';
        ctx.fillRect(cx - w / 2, cy - 10 * s, w, 2.5 * s);
        ctx.fillRect(cx - w / 2, cy - 2.5 * s, w, 2.5 * s);
        for (var rx = cx - w / 2 + 3 * s; rx < cx + w / 2; rx += 7 * s) {
          ctx.fillRect(rx, cy - 10 * s, 2 * s, 10 * s);
        }
      }

      function hueLantern(lx, ly, stringTopY, colorType) {
        var lw = 10 * s, lh = 16 * s;
        var flicker = isNight ? (0.8 + 0.2 * Math.sin(nt * 3 + lx)) : 1;

        ctx.strokeStyle = 'rgba(0,0,0,0.8)'; ctx.lineWidth = 1 * s;
        var sTop = stringTopY !== undefined ? stringTopY : ly - 16 * s;
        ctx.save();
        var swayAngle = Math.sin(nt * 1.5 + lx * 0.01) * 0.06;
        ctx.translate(lx, sTop);
        ctx.rotate(swayAngle);
        ctx.translate(-lx, -sTop);
        ctx.beginPath(); ctx.moveTo(lx, sTop); ctx.lineTo(lx, ly - lh / 2); ctx.stroke();

        var glowColor, grad0, grad50, grad100;
        if (colorType === 'teal') {
          glowColor = 'rgba(50, 200, 180, 0.9)';
          if (isNight) {
            grad0 = 'rgb(10, 80, 70)'; grad50 = 'rgb(80, 255, 220)'; grad100 = 'rgb(10, 80, 70)';
          } else {
            grad0 = 'rgb(15, 100, 90)'; grad50 = 'rgb(40, 180, 160)'; grad100 = 'rgb(15, 100, 90)';
          }
        } else {
          glowColor = 'rgba(255, 120, 50, 0.9)';
          if (isNight) {
            grad0 = 'rgb(180, 40, 20)'; grad50 = 'rgb(255, 160, 80)'; grad100 = 'rgb(180, 40, 20)';
          } else {
            grad0 = 'rgb(' + cRedDark + ')'; grad50 = 'rgb(' + cRedBase + ')'; grad100 = 'rgb(' + cRedDark + ')';
          }
        }

        if (isNight && !isReflection) {
          /* Skipped in reflection: iOS Safari's shadowBlur ignores globalAlpha, would look too bright */
          ctx.shadowBlur = 25 * flicker * s;
          ctx.shadowColor = glowColor;
          var halo = ctx.createRadialGradient(lx, ly, 0, lx, ly, lw * 2.5);
          halo.addColorStop(0, glowColor.replace('0.9)', (0.35 * flicker) + ')'));
          halo.addColorStop(1, 'transparent');
          ctx.fillStyle = halo;
          ctx.beginPath(); ctx.arc(lx, ly, lw * 2.5, 0, Math.PI * 2); ctx.fill();
        }

        var lg = ctx.createLinearGradient(lx - lw / 2, 0, lx + lw / 2, 0);
        lg.addColorStop(0, grad0); lg.addColorStop(0.5, grad50); lg.addColorStop(1, grad100);

        /* Lantern body (barrel shape) */
        ctx.fillStyle = lg;
        ctx.beginPath();
        ctx.moveTo(lx - lw * 0.35, ly - lh / 2);
        ctx.bezierCurveTo(lx - lw * 0.6, ly - lh * 0.2, lx - lw * 0.6, ly + lh * 0.2, lx - lw * 0.35, ly + lh / 2);
        ctx.lineTo(lx + lw * 0.35, ly + lh / 2);
        ctx.bezierCurveTo(lx + lw * 0.6, ly + lh * 0.2, lx + lw * 0.6, ly - lh * 0.2, lx + lw * 0.35, ly - lh / 2);
        ctx.closePath();
        ctx.fill();

        /* Lantern ribs */
        ctx.strokeStyle = 'rgba(0,0,0,0.4)'; ctx.lineWidth = 0.5 * s;
        ctx.beginPath(); ctx.moveTo(lx, ly - lh / 2); ctx.lineTo(lx, ly + lh / 2); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(lx - lw * 0.2, ly - lh / 2); ctx.quadraticCurveTo(lx - lw * 0.35, ly, lx - lw * 0.2, ly + lh / 2); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(lx + lw * 0.2, ly - lh / 2); ctx.quadraticCurveTo(lx + lw * 0.35, ly, lx + lw * 0.2, ly + lh / 2); ctx.stroke();
        /* Gold bands */
        ctx.strokeStyle = 'rgba(255, 215, 0, 0.7)'; ctx.lineWidth = 1 * s;
        ctx.beginPath(); ctx.moveTo(lx - lw * 0.48, ly - lh * 0.15); ctx.lineTo(lx + lw * 0.48, ly - lh * 0.15); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(lx - lw * 0.48, ly + lh * 0.15); ctx.lineTo(lx + lw * 0.48, ly + lh * 0.15); ctx.stroke();

        ctx.shadowBlur = 0;

        /* Caps */
        ctx.fillStyle = 'rgb(' + cWoodDark + ')';
        ctx.fillRect(lx - lw * 0.35, ly - lh / 2 - 1.5 * s, lw * 0.7, 2.5 * s);
        ctx.fillRect(lx - lw * 0.35, ly + lh / 2 - 0.5 * s, lw * 0.7, 2.5 * s);
        ctx.fillStyle = 'rgb(' + cGold + ')';
        ctx.fillRect(lx - lw * 0.25, ly - lh / 2 - 1 * s, lw * 0.5, 1.5 * s);
        ctx.fillRect(lx - lw * 0.25, ly + lh / 2 + 0.5 * s, lw * 0.5, 1 * s);

        /* Wavy Tassel */
        ctx.fillStyle = grad0;
        ctx.beginPath();
        ctx.moveTo(lx, ly + lh / 2 + 2 * s);
        ctx.lineTo(lx - 2.5 * s, ly + lh / 2 + 12 * s);
        ctx.lineTo(lx - 1 * s, ly + lh / 2 + 11 * s);
        ctx.lineTo(lx, ly + lh / 2 + 13 * s);
        ctx.lineTo(lx + 1 * s, ly + lh / 2 + 11 * s);
        ctx.lineTo(lx + 2.5 * s, ly + lh / 2 + 12 * s);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = 'rgb(' + cGold + ')'; ctx.lineWidth = 0.5 * s;
        ctx.beginPath(); ctx.moveTo(lx, ly + lh / 2 + 1 * s); ctx.lineTo(lx, ly + lh / 2 + 3 * s); ctx.stroke();
        ctx.restore();
      }

      function drawWatchTower(cx, cy, scale) {
        var tw = 130 * scale;
        var th = 40 * scale;
        ctx.fillStyle = 'rgb(' + cStoneDark + ')';
        ctx.fillRect(cx - tw / 2, cy - th, tw, th);
        ctx.fillStyle = 'rgb(' + cStoneBase + ')';
        ctx.fillRect(cx - tw / 2 + 5 * scale, cy - th, tw - 10 * scale, th);
        ctx.strokeStyle = 'rgba(0,0,0,' + (isNight ? 0.35 : 0.25) + ')'; ctx.lineWidth = 1;
        var wtRow = 0;
        for (var ty = cy - th; ty < cy; ty += 8 * scale) {
          ctx.beginPath(); ctx.moveTo(cx - tw / 2 + 5 * scale, ty); ctx.lineTo(cx + tw / 2 - 5 * scale, ty); ctx.stroke();
          var wOfst = (wtRow % 2 === 0) ? 0 : 10 * scale;
          for (var tx = cx - tw / 2 + 5 * scale + wOfst; tx < cx + tw / 2 - 5 * scale; tx += 20 * scale) {
            ctx.beginPath(); ctx.moveTo(tx, ty); ctx.lineTo(tx, ty + 8 * scale); ctx.stroke();
          }
          wtRow++;
        }
        /* Top and side edge highlight for 3D effect */
        ctx.fillStyle = 'rgba(255,255,255,' + (isNight ? 0.05 : 0.15) + ')';
        ctx.fillRect(cx - tw / 2 + 5 * scale, cy - th, tw - 10 * scale, 2 * scale);
        ctx.fillRect(cx - tw / 2 + 5 * scale, cy - th, 2 * scale, th);
        /* Shadow on right edge */
        ctx.fillStyle = 'rgba(0,0,0,' + (isNight ? 0.4 : 0.2) + ')';
        ctx.fillRect(cx + tw / 2 - 7 * scale, cy - th, 2 * scale, th);
        drawRailing(cx, cy - th, tw);
        drawPavilion(cx, cy - th, 100 * scale, 40 * scale, 3);
        drawHueRoof(cx, cy - th - 40 * scale, 125 * scale, 30 * scale, cRoofGreen, cRoofGreenDk, 9 * scale);
        var eaveY = cy - th - 35 * scale;
        hueLantern(cx - 45 * scale, cy - th + 5 * scale, eaveY);
        hueLantern(cx + 45 * scale, cy - th + 5 * scale, eaveY);
      }

      var gcx = VW * 0.5;
      var baseW = 720 * s;
      var baseH = 85 * s;
      var extW = (isMobile ? 900 : 2600) * s;
      var extH = 65 * s;

      var gateStoneGrad = ctx.createLinearGradient(gcx - baseW / 2, 0, gcx + baseW / 2, 0);
      gateStoneGrad.addColorStop(0, 'rgb(' + cStoneDark + ')'); gateStoneGrad.addColorStop(0.1, 'rgb(' + cStoneBase + ')'); gateStoneGrad.addColorStop(0.5, 'rgb(' + lerpC('#484b52', '#d0cec4', t) + ')'); gateStoneGrad.addColorStop(0.9, 'rgb(' + cStoneBase + ')'); gateStoneGrad.addColorStop(1, 'rgb(' + cStoneDark + ')');

      // Extended background walls
      ctx.fillStyle = 'rgb(' + cStoneDark + ')';
      ctx.fillRect(gcx - extW / 2, bY - extH, extW, extH);
      ctx.strokeStyle = 'rgba(0,0,0,' + (isNight ? 0.35 : 0.25) + ')'; ctx.lineWidth = 1;
      var eRow = 0;
      for (var ry = 0; ry < extH; ry += 10 * s) {
        ctx.beginPath(); ctx.moveTo(gcx - extW / 2, bY - extH + ry); ctx.lineTo(gcx + extW / 2, bY - extH + ry); ctx.stroke();
        var ofst = (eRow % 2 === 0) ? 0 : 12 * s;
        for (var bx = gcx - extW / 2 + ofst; bx < gcx + extW / 2; bx += 24 * s) {
          ctx.beginPath(); ctx.moveTo(bx, bY - extH + ry); ctx.lineTo(bx, bY - extH + ry + 10 * s); ctx.stroke();
        }
        eRow++;
      }

      // Battlements for extended wall
      for (var bw = gcx - extW / 2 + 5 * s; bw < gcx + extW / 2; bw += 25 * s) {
        ctx.fillStyle = 'rgb(' + cStoneDark + ')';
        ctx.fillRect(bw, bY - extH - 10 * s, 15 * s, 10 * s);
        /* Battlement 3D detail */
        ctx.fillStyle = 'rgba(255,255,255,' + (isNight ? 0.05 : 0.15) + ')';
        ctx.fillRect(bw, bY - extH - 10 * s, 15 * s, 1.5 * s);
        ctx.fillRect(bw, bY - extH - 10 * s, 1.5 * s, 10 * s);
        ctx.fillStyle = 'rgba(0,0,0,' + (isNight ? 0.4 : 0.2) + ')';
        ctx.fillRect(bw + 13.5 * s, bY - extH - 10 * s, 1.5 * s, 10 * s);
      }

      // Watchtowers ΓÇö bß║ún mobile chß╗ë giß╗» cß║╖p gß║ºn nhß║Ñt, cß║»t bß╗¢t phß║ºn ngo├ái khung h├¼nh dß╗ìc
      drawWatchTower(gcx - 520 * s, bY - extH, s);
      drawWatchTower(gcx + 520 * s, bY - extH, s);
      if (!isMobile) {
        drawWatchTower(gcx - 780 * s, bY - extH, s);
        drawWatchTower(gcx + 780 * s, bY - extH, s);
        drawWatchTower(gcx - 1040 * s, bY - extH, s);
        drawWatchTower(gcx + 1040 * s, bY - extH, s);
      }

      // Main Stone Base
      ctx.fillStyle = gateStoneGrad;
      ctx.fillRect(gcx - baseW / 2, bY - baseH, baseW, baseH);

      ctx.strokeStyle = 'rgba(0,0,0,' + (isNight ? 0.35 : 0.25) + ')'; ctx.lineWidth = 1;
      var mRow = 0;
      for (var ry = 0; ry < baseH; ry += 10 * s) {
        ctx.beginPath(); ctx.moveTo(gcx - baseW / 2, bY - baseH + ry); ctx.lineTo(gcx + baseW / 2, bY - baseH + ry); ctx.stroke();
        var offset = (mRow % 2 === 0) ? 0 : 12 * s;
        for (var bx = gcx - baseW / 2 + offset; bx < gcx + baseW / 2; bx += 24 * s) {
          ctx.beginPath(); ctx.moveTo(bx, bY - baseH + ry); ctx.lineTo(bx, bY - baseH + ry + 10 * s); ctx.stroke();
        }
        mRow++;
      }

      ctx.fillStyle = 'rgb(' + cRidge + ')'; ctx.fillRect(gcx - baseW / 2 - 5 * s, bY - baseH - 12 * s, baseW + 10 * s, 12 * s);
      ctx.fillStyle = 'rgba(0,0,0,0.4)';
      for (var lx = gcx - baseW / 2; lx < gcx + baseW / 2; lx += 15 * s) { ctx.fillRect(lx + 2 * s, bY - baseH - 10 * s, 11 * s, 10 * s); }

      function drawSeal(cx, cy, r, text) {
        var baseC = cStoneBase; // match the wall stone color
        var shadowC = isNight ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.55)';
        var highlightC = isNight ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.6)';
        var darkCenter = isNight ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.2)';

        // Base circle
        ctx.fillStyle = 'rgb(' + baseC + ')';
        ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill();

        // 3D Bevel effect (carved) - Outer ring
        ctx.lineWidth = 1.5 * s;
        ctx.strokeStyle = shadowC;
        ctx.beginPath(); ctx.arc(cx, cy, r, Math.PI * 0.75, Math.PI * 1.75); ctx.stroke();
        ctx.strokeStyle = highlightC;
        ctx.beginPath(); ctx.arc(cx, cy, r, Math.PI * 1.75, Math.PI * 0.75); ctx.stroke();

        // Middle ring
        ctx.strokeStyle = highlightC;
        ctx.beginPath(); ctx.arc(cx, cy, r * 0.82, Math.PI * 0.75, Math.PI * 1.75); ctx.stroke();
        ctx.strokeStyle = shadowC;
        ctx.beginPath(); ctx.arc(cx, cy, r * 0.82, Math.PI * 1.75, Math.PI * 0.75); ctx.stroke();

        // Inner ring
        ctx.strokeStyle = shadowC;
        ctx.beginPath(); ctx.arc(cx, cy, r * 0.65, Math.PI * 0.75, Math.PI * 1.75); ctx.stroke();
        ctx.strokeStyle = highlightC;
        ctx.beginPath(); ctx.arc(cx, cy, r * 0.65, Math.PI * 1.75, Math.PI * 0.75); ctx.stroke();

        // Very center slight darkening
        ctx.fillStyle = darkCenter;
        ctx.beginPath(); ctx.arc(cx, cy, r * 0.6, 0, Math.PI * 2); ctx.fill();

        // Center Motif (stylized Thien An characters)
        ctx.lineWidth = 1.0 * s;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        var cr = r * 0.5;

        var drawMotif = function (offsetX, offsetY) {
          if (text === 'σñ⌐') {
            // Top bar
            ctx.moveTo(cx - cr * 0.5 + offsetX, cy - cr * 0.5 + offsetY); ctx.lineTo(cx + cr * 0.5 + offsetX, cy - cr * 0.5 + offsetY);
            // Bottom bar
            ctx.moveTo(cx - cr * 0.7 + offsetX, cy - cr * 0.1 + offsetY); ctx.lineTo(cx + cr * 0.7 + offsetX, cy - cr * 0.1 + offsetY);
            // Left sweep
            ctx.moveTo(cx + offsetX, cy - cr * 0.5 + offsetY);
            ctx.lineTo(cx + offsetX, cy + cr * 0.1 + offsetY);
            ctx.lineTo(cx - cr * 0.6 + offsetX, cy + cr * 0.7 + offsetY);
            // Right sweep
            ctx.moveTo(cx + offsetX, cy + cr * 0.1 + offsetY);
            ctx.lineTo(cx + cr * 0.6 + offsetX, cy + cr * 0.7 + offsetY);
          } else if (text === 'µü⌐') {
            // Outer box of σ¢á
            ctx.moveTo(cx - cr * 0.6 + offsetX, cy - cr * 0.8 + offsetY); ctx.lineTo(cx + cr * 0.6 + offsetX, cy - cr * 0.8 + offsetY);
            ctx.moveTo(cx - cr * 0.6 + offsetX, cy - cr * 0.8 + offsetY); ctx.lineTo(cx - cr * 0.6 + offsetX, cy + offsetY);
            ctx.moveTo(cx + cr * 0.6 + offsetX, cy - cr * 0.8 + offsetY); ctx.lineTo(cx + cr * 0.6 + offsetX, cy + offsetY);
            ctx.moveTo(cx - cr * 0.6 + offsetX, cy + offsetY); ctx.lineTo(cx + cr * 0.6 + offsetX, cy + offsetY);
            // Inside 'σñº'
            ctx.moveTo(cx - cr * 0.3 + offsetX, cy - cr * 0.4 + offsetY); ctx.lineTo(cx + cr * 0.3 + offsetX, cy - cr * 0.4 + offsetY);
            ctx.moveTo(cx + offsetX, cy - cr * 0.7 + offsetY); ctx.lineTo(cx + offsetX, cy - cr * 0.2 + offsetY);
            ctx.moveTo(cx + offsetX, cy - cr * 0.2 + offsetY); ctx.lineTo(cx - cr * 0.3 + offsetX, cy - cr * 0.1 + offsetY);
            ctx.moveTo(cx + offsetX, cy - cr * 0.2 + offsetY); ctx.lineTo(cx + cr * 0.3 + offsetX, cy - cr * 0.1 + offsetY);
            // Bottom 'σ┐â'
            ctx.moveTo(cx - cr * 0.6 + offsetX, cy + cr * 0.3 + offsetY); ctx.lineTo(cx - cr * 0.4 + offsetX, cy + cr * 0.6 + offsetY); // Left dot
            ctx.moveTo(cx - cr * 0.3 + offsetX, cy + cr * 0.4 + offsetY); ctx.lineTo(cx - cr * 0.1 + offsetX, cy + cr * 0.7 + offsetY); ctx.lineTo(cx + cr * 0.4 + offsetX, cy + cr * 0.7 + offsetY); ctx.lineTo(cx + cr * 0.6 + offsetX, cy + cr * 0.5 + offsetY); // Center swoop
            ctx.moveTo(cx + cr * 0.1 + offsetX, cy + cr * 0.2 + offsetY); ctx.lineTo(cx + cr * 0.2 + offsetX, cy + cr * 0.4 + offsetY); // Middle dot
            ctx.moveTo(cx + cr * 0.5 + offsetX, cy + cr * 0.2 + offsetY); ctx.lineTo(cx + cr * 0.7 + offsetX, cy + cr * 0.4 + offsetY); // Right dot
          }
        };

        // Draw motif highlight
        ctx.strokeStyle = highlightC;
        ctx.beginPath();
        drawMotif(0, 1.2 * s);
        ctx.stroke();

        // Draw motif shadow
        ctx.strokeStyle = shadowC;
        ctx.beginPath();
        drawMotif(0, 0);
        ctx.stroke();

        ctx.lineCap = 'butt';
        ctx.lineJoin = 'miter';
      }

      drawSeal(gcx - 240 * s, bY - 64 * s, 16 * s, 'σñ⌐');
      drawSeal(gcx + 240 * s, bY - 64 * s, 16 * s, 'µü⌐');

      drawArch(gcx, bY, 52 * s, 60 * s, true);
      drawArch(gcx - 75 * s, bY, 40 * s, 48 * s, false);
      drawArch(gcx + 75 * s, bY, 40 * s, 48 * s, false);
      drawArch(gcx - 240 * s, bY, 36 * s, 42 * s, false);
      drawArch(gcx + 240 * s, bY, 36 * s, 42 * s, false);

      var pav1Y = bY - baseH - 12 * s;
      var wingW = 125 * s, wingH = 30 * s, wingCxL = gcx - 240 * s, wingCxR = gcx + 240 * s;
      drawRailing(wingCxL, pav1Y, wingW + 10 * s);
      drawRailing(wingCxR, pav1Y, wingW + 10 * s);
      drawPavilion(wingCxL, pav1Y, wingW, wingH, 4);
      drawPavilion(wingCxR, pav1Y, wingW, wingH, 4);
      drawHueRoof(wingCxL, pav1Y - wingH, wingW * 1.25, 32 * s, cRoofGreen, cRoofGreenDk, 6 * s);
      drawHueRoof(wingCxR, pav1Y - wingH, wingW * 1.25, 32 * s, cRoofGreen, cRoofGreenDk, 6 * s);

      var galW = 115 * s, galH = 28 * s, galCxL = gcx - 110 * s, galCxR = gcx + 110 * s;
      drawRailing(galCxL, pav1Y, galW + 10 * s);
      drawRailing(galCxR, pav1Y, galW + 10 * s);
      drawPavilion(galCxL, pav1Y, galW, galH, 3);
      drawPavilion(galCxR, pav1Y, galW, galH, 3);
      drawHueRoof(galCxL, pav1Y - galH, galW * 1.2, 30 * s, cRoofGreen, cRoofGreenDk, 5 * s);
      drawHueRoof(galCxR, pav1Y - galH, galW * 1.2, 30 * s, cRoofGreen, cRoofGreenDk, 5 * s);

      var cen1W = 160 * s, cen1H = 34 * s;
      drawRailing(gcx, pav1Y, cen1W + 15 * s);
      drawPavilion(gcx, pav1Y, cen1W, cen1H, 5);
      drawHueRoof(gcx, pav1Y - cen1H, cen1W * 1.25, 28 * s, cRoofYellow, cRoofYellowDk, 7 * s);

      var pav2Y = pav1Y - cen1H - 10 * s;
      var cen2W = 115 * s, cen2H = 30 * s;
      drawRailing(gcx, pav2Y, cen2W + 20 * s);
      drawPavilion(gcx, pav2Y, cen2W, cen2H, 3);
      drawHueRoof(gcx, pav2Y - cen2H, cen2W * 1.45, 52 * s, cRoofYellow, cRoofYellowDk, 14 * s);

      var topY = pav2Y - cen2H - 52 * s;
      ctx.fillStyle = 'rgb(' + cGold + ')';
      ctx.beginPath(); ctx.arc(gcx, topY - 3 * s, 6 * s, 0, Math.PI * 2); ctx.fill();
      ctx.lineWidth = 3 * s; ctx.strokeStyle = 'rgb(' + cGold + ')';
      ctx.beginPath(); ctx.moveTo(gcx - 8 * s, topY); ctx.quadraticCurveTo(gcx - 22 * s, topY - 18 * s, gcx - 32 * s, topY + 8 * s); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(gcx + 8 * s, topY); ctx.quadraticCurveTo(gcx + 22 * s, topY - 18 * s, gcx + 32 * s, topY + 8 * s); ctx.stroke();

      var lY = bY - baseH + 5 * s;
      var eTop = bY - baseH - 25 * s;
      hueLantern(gcx - 40 * s, lY, eTop);
      hueLantern(gcx + 40 * s, lY, eTop);
      hueLantern(gcx - 180 * s, lY, eTop);
      hueLantern(gcx + 180 * s, lY, eTop);

      var kyDaiX = gcx + 172.5 * s;
      var kyDaiY = bY + 25 * s;
      /* Ky Dai Base with natural stone colors at night */
      var cGray = lerpC('#35363d', '#606065', t); // Brighter and cooler at night instead of pitch black
      var cGrayDark = lerpC('#1c1e22', '#303035', t);
      var kyDaiGrad = ctx.createLinearGradient(kyDaiX - 45 * s, 0, kyDaiX + 45 * s, 0);
      kyDaiGrad.addColorStop(0, 'rgb(' + cGrayDark + ')');
      kyDaiGrad.addColorStop(0.5, 'rgb(' + cGray + ')');
      kyDaiGrad.addColorStop(1, 'rgb(' + cGrayDark + ')');

      var tiers = [
        { w: 90, h: 15, y: -15 },
        { w: 70, h: 15, y: -30 },
        { w: 50, h: 15, y: -45 }
      ];
      tiers.forEach(function (tr) {
        /* Drop shadow for depth (skipped in reflection: iOS Safari's shadowBlur ignores globalAlpha) */
        if (!isReflection) {
          ctx.shadowColor = 'rgba(0,0,0,0.6)';
          ctx.shadowBlur = 8 * s;
        }
        ctx.fillStyle = kyDaiGrad;
        ctx.fillRect(kyDaiX - tr.w * s / 2, kyDaiY + tr.y * s, tr.w * s, tr.h * s);
        ctx.shadowBlur = 0; /* Reset shadow */

        ctx.strokeStyle = 'rgba(0,0,0,' + (isNight ? 0.6 : 0.3) + ')';
        ctx.lineWidth = 1.5 * s;
        ctx.strokeRect(kyDaiX - tr.w * s / 2, kyDaiY + tr.y * s, tr.w * s, tr.h * s);

        /* Brick details on Ky Dai base */
        for (var bx = kyDaiX - tr.w * s / 2 + 10 * s; bx < kyDaiX + tr.w * s / 2; bx += 10 * s) {
          ctx.beginPath(); ctx.moveTo(bx, kyDaiY + tr.y * s); ctx.lineTo(bx, kyDaiY + (tr.y + tr.h) * s); ctx.stroke();
        }

        /* Top edge highlight for 3D effect */
        ctx.fillStyle = 'rgba(255,255,255,' + (isNight ? 0.08 : 0.25) + ')';
        ctx.fillRect(kyDaiX - tr.w * s / 2, kyDaiY + tr.y * s, tr.w * s, 2 * s);
        /* Bottom edge shadow for 3D effect */
        ctx.fillStyle = 'rgba(0,0,0,' + (isNight ? 0.4 : 0.2) + ')';
        ctx.fillRect(kyDaiX - tr.w * s / 2, kyDaiY + (tr.y + tr.h) * s - 2 * s, tr.w * s, 2 * s);
      });

      /* Flagpole with details */
      var poleH = 195 * s;
      var poleY = kyDaiY - 240 * s;
      var poleW = 6 * s;
      var poleG = ctx.createLinearGradient(kyDaiX - poleW / 2, 0, kyDaiX + poleW / 2, 0);
      poleG.addColorStop(0, 'rgb(' + cWoodDark + ')'); poleG.addColorStop(0.5, 'rgb(' + cWoodBase + ')'); poleG.addColorStop(1, 'rgb(' + cWoodDark + ')');
      ctx.fillStyle = poleG;
      ctx.fillRect(kyDaiX - poleW / 2, poleY, poleW, poleH);
      /* Pole rings/segments */
      ctx.fillStyle = 'rgba(0,0,0,0.5)';
      for (var py = poleY + 20 * s; py < poleY + poleH; py += 30 * s) {
        ctx.fillRect(kyDaiX - poleW / 2, py, poleW, 1.5 * s);
      }
      /* Finial (Cap on top) */
      ctx.fillStyle = 'rgb(' + cGold + ')';
      ctx.beginPath(); ctx.arc(kyDaiX, poleY, 4 * s, 0, Math.PI * 2); ctx.fill();
      ctx.beginPath(); ctx.moveTo(kyDaiX - 2 * s, poleY); ctx.lineTo(kyDaiX + 2 * s, poleY); ctx.lineTo(kyDaiX, poleY - 8 * s); ctx.fill();

      if (!isReflection) drawFlag(kyDaiX + poleW / 2, kyDaiY - 235 * s, 'vietnam');

      var nt2 = Date.now() * .001;
      
      if (!isReflection) {
        var groundY = bY;
        var grassGrad = ctx.createLinearGradient(0, groundY, 0, H);
        grassGrad.addColorStop(0, 'rgb(' + lerpC('#06080c', '#46a855', t) + ')');
        grassGrad.addColorStop(1, 'rgb(' + lerpC('#020406', '#1a6b2c', t) + ')');
        ctx.fillStyle = grassGrad;
        ctx.fillRect(0, groundY, VW, H - groundY);

        ctx.globalAlpha = a * (1 - t);
        [[.5, bY + 15 * s, 7], [.41, bY + 12 * s, 5], [.59, bY + 12 * s, 5], [.33, bY + 8 * s, 4.5], [.67, bY + 8 * s, 4.5], [.25, bY + 5 * s, 4], [.75, bY + 5 * s, 4], [.19, bY + 3 * s, 3.5], [.81, bY + 3 * s, 3.5]].forEach(function (w) {
          /* Warmer and softer ground light reflection */
          var wx = w[0] * VW, fl = .85 + .15 * Math.sin(nt2 * 1.2 + wx * .003);
          var wg = ctx.createRadialGradient(wx, w[1], 0, wx, w[1], w[2] * 5);
          wg.addColorStop(0, 'rgba(255,170,50,' + .2 * fl + ')');
          wg.addColorStop(1, 'transparent');
          ctx.fillStyle = wg; ctx.beginPath(); ctx.arc(wx, w[1], w[2] * 5, 0, Math.PI * 2); ctx.fill();
        });
      }
      VL.forEach(function (vl) {
        var vx = vl.px * VW, vy = bY - 8 - Math.abs(vl.py);
        var br = .4 + .6 * Math.abs(Math.sin(nt2 * vl.sp + vl.ph));
        var vg = ctx.createRadialGradient(vx, vy, 0, vx, vy, vl.r * 4); vg.addColorStop(0, 'hsla(' + vl.hue + ',80%,70%,' + br * .7 + ')'); vg.addColorStop(1, 'transparent');
        ctx.fillStyle = vg; ctx.beginPath(); ctx.arc(vx, vy, vl.r * 4, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = 'hsla(' + vl.hue + ',90%,80%,' + br * .9 + ')'; ctx.beginPath(); ctx.arc(vx, vy, vl.r, 0, Math.PI * 2); ctx.fill();
      });
      ctx.restore();
    }
    // ─æß╗ông hoa ΓÇö khß╗ƒi tß║ío dß╗» liß╗çu
    var FLOWERS = (function () {
      var types = ['poppy', 'lavender', 'cosmos', 'daisy', 'buttercup', 'bluebell'];
      return Array.from({ length: 220 }, function () {
        return {
          x: Math.random(), layer: Math.random(),
          ph: Math.random() * Math.PI * 2,
          s: 0.35 + Math.random() * 0.65,
          type: types[Math.floor(Math.random() * types.length)],
          sp: 0.5 + Math.random() * 1.5
        };
      });
    })();

    var GRASS = Array.from({ length: 360 }, function () {
      return {
        x: Math.random(), layer: Math.random(),
        h: 10 + Math.random() * 22,
        ph: Math.random() * Math.PI * 2,
        hue: 88 + Math.random() * 55,
        sat: 35 + Math.random() * 30
      };
    });

    var MPETALS = Array.from({ length: 50 }, function () {
      return {
        x: Math.random(), y: Math.random(),
        ph: Math.random() * Math.PI * 2,
        r: 1.5 + Math.random() * 2.5,
        hue: Math.random() < 0.6 ? 310 + Math.random() * 40 : 40 + Math.random() * 30,
        sp: 0.3 + Math.random() * 0.7
      };
    });

    function drawMeadow(a, t) {
      if (t < 0.01) return;
      ctx.save();
      var bY = H * (H > W ? 0.65 : 0.82), mH = H - bY, nt = activeTime * 0.001;
      var sc = Math.max(W / 1280, H > W ? 1.2 : 0.4);

      // ΓöÇΓöÇ 3 lß╗¢p ─æß╗ôi nhß║Ñp nh├┤, xa ΓåÆ gß║ºn ΓöÇΓöÇ
      ctx.globalAlpha = a * t;
      var hills = [
        { yOff: 0.04, amp: 0.07, wv: 3.2, spd: 0.05, c0: '#8fc46e', c1: '#6aaa4e', op: 0.70 },
        { yOff: 0.20, amp: 0.06, wv: 2.6, spd: -0.04, c0: '#5ea842', c1: '#3c7e2a', op: 0.83 },
        { yOff: 0.37, amp: 0.045, wv: 4.1, spd: 0.06, c0: '#4a9035', c1: '#28621e', op: 0.94 }
      ];
      hills.forEach(function (hd) {
        var baseY = bY + mH * hd.yOff;
        ctx.beginPath(); ctx.moveTo(0, H); ctx.lineTo(0, baseY);
        for (var xi = 0; xi <= 50; xi++) {
          var xp = xi / 50 * W;
          var wave = Math.sin(xp / W * Math.PI * hd.wv + nt * hd.spd) * mH * hd.amp
            + Math.sin(xp / W * Math.PI * hd.wv * 1.7 - nt * hd.spd * 1.4) * mH * hd.amp * 0.38;
          ctx.lineTo(xp, baseY + wave);
        }
        ctx.lineTo(W, H); ctx.closePath();
        var hg = ctx.createLinearGradient(0, baseY, 0, H);
        hg.addColorStop(0, hd.c0); hg.addColorStop(1, hd.c1);
        ctx.fillStyle = hg; ctx.globalAlpha = a * t * hd.op; ctx.fill();
      });
      ctx.globalAlpha = a * t;

      // ΓöÇΓöÇ Cß╗Å mß╗üm (xa ΓåÆ gß║ºn) ΓöÇΓöÇ
      ctx.lineCap = 'round';
      GRASS.forEach(function (g) {
        var px = g.x * W, py = bY + g.layer * mH * 0.96;
        var gsc = (0.4 + g.layer * 0.85) * sc;
        var gh = g.h * gsc;
        var sway = Math.sin(nt * 1.1 + g.ph) * 5 * gsc;
        var dx = px - cX, dy = py - cY, dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 90 && cY > H * 0.5) sway += dx / dist * 14;
        ctx.strokeStyle = 'hsla(' + g.hue + ',' + g.sat + '%,34%,' + (t * (0.42 + g.layer * 0.48)) + ')';
        ctx.lineWidth = (0.7 + g.layer * 1.3) * sc;
        ctx.beginPath(); ctx.moveTo(px, py); ctx.quadraticCurveTo(px + sway * 0.5, py - gh * 0.55, px + sway, py - gh); ctx.stroke();
      });

      // ΓöÇΓöÇ Hoa ─æß╗ông nß╗Öi ΓÇö sß║»p xß║┐p xa ΓåÆ gß║ºn ΓöÇΓöÇ
      var sorted = FLOWERS.slice().sort(function (fa, fb) { return fa.layer - fb.layer; });
      sorted.forEach(function (fl) {
        var px = fl.x * W;
        var py = bY + fl.layer * mH * 0.88;
        var fsc = fl.s * (0.32 + fl.layer * 0.72) * sc;
        var sway = Math.sin(nt * fl.sp + fl.ph) * 7 * fsc;
        var dx = px - cX, dy = py - cY, dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 110 && cY > H * 0.5) sway += dx / dist * 18;

        ctx.save(); ctx.translate(px + sway * 0.4, py);
        var alp = t * (0.62 + fl.layer * 0.32);
        // Cuß╗æng hoa
        ctx.strokeStyle = 'rgba(38,108,28,' + (alp * 0.88) + ')';
        ctx.lineWidth = 1.2 * fsc; ctx.lineCap = 'round';
        ctx.beginPath(); ctx.moveTo(-sway * 0.4, 28 * fsc); ctx.quadraticCurveTo(0, 13 * fsc, 0, 0); ctx.stroke();

        if (fl.type === 'poppy') {
          for (var i = 0; i < 5; i++) {
            ctx.save(); ctx.rotate(i * Math.PI * 2 / 5);
            ctx.fillStyle = 'rgba(225,68,28,' + alp + ')';
            ctx.beginPath(); ctx.ellipse(0, -7 * fsc, 4 * fsc, 10 * fsc, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore();
          }
          ctx.fillStyle = 'rgba(28,8,4,' + alp + ')';
          ctx.beginPath(); ctx.arc(0, 0, 3 * fsc, 0, Math.PI * 2); ctx.fill();

        } else if (fl.type === 'lavender') {
          for (var j = 0; j < 6; j++) {
            var lx = Math.sin(j * 0.9) * 2.5 * fsc, ly = -j * 5 * fsc;
            ctx.fillStyle = 'rgba(135,85,198,' + alp + ')';
            ctx.beginPath(); ctx.ellipse(lx, ly, 2.5 * fsc, 3.5 * fsc, 0.1, 0, Math.PI * 2); ctx.fill();
            ctx.fillStyle = 'rgba(182,130,222,' + (alp * 0.62) + ')';
            ctx.beginPath(); ctx.ellipse(lx - 2 * fsc, ly + 2 * fsc, 1.4 * fsc, 2.4 * fsc, 0.3, 0, Math.PI * 2); ctx.fill();
            ctx.beginPath(); ctx.ellipse(lx + 2 * fsc, ly + 2 * fsc, 1.4 * fsc, 2.4 * fsc, -0.3, 0, Math.PI * 2); ctx.fill();
          }

        } else if (fl.type === 'cosmos') {
          for (var i = 0; i < 8; i++) {
            ctx.save(); ctx.rotate(i * Math.PI / 4);
            ctx.fillStyle = 'rgba(222,98,158,' + alp + ')';
            ctx.beginPath(); ctx.ellipse(0, -8 * fsc, 3.5 * fsc, 9 * fsc, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore();
          }
          ctx.fillStyle = 'rgba(255,192,55,' + alp + ')';
          ctx.beginPath(); ctx.arc(0, 0, 4 * fsc, 0, Math.PI * 2); ctx.fill();

        } else if (fl.type === 'daisy') {
          for (var i = 0; i < 10; i++) {
            ctx.save(); ctx.rotate(i * Math.PI / 5);
            ctx.fillStyle = 'rgba(255,250,228,' + alp + ')';
            ctx.beginPath(); ctx.ellipse(0, -7 * fsc, 2.5 * fsc, 7 * fsc, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore();
          }
          ctx.fillStyle = 'rgba(255,205,38,' + alp + ')';
          ctx.beginPath(); ctx.arc(0, 0, 3.5 * fsc, 0, Math.PI * 2); ctx.fill();

        } else if (fl.type === 'buttercup') {
          for (var i = 0; i < 5; i++) {
            ctx.save(); ctx.rotate(i * Math.PI * 2 / 5);
            ctx.fillStyle = 'rgba(255,208,18,' + alp + ')';
            ctx.beginPath(); ctx.ellipse(0, -5 * fsc, 4 * fsc, 6 * fsc, 0, 0, Math.PI * 2); ctx.fill(); ctx.restore();
          }
          ctx.fillStyle = 'rgba(38,65,12,' + alp + ')';
          ctx.beginPath(); ctx.arc(0, 0, 2.2 * fsc, 0, Math.PI * 2); ctx.fill();

        } else { // bluebell
          for (var j = 0; j < 3; j++) {
            ctx.save(); ctx.translate((j - 1) * 4.5 * fsc, -j * 7 * fsc);
            ctx.fillStyle = 'rgba(78,118,208,' + alp + ')';
            ctx.beginPath(); ctx.moveTo(-3 * fsc, 0); ctx.bezierCurveTo(-3 * fsc, -5 * fsc, 3 * fsc, -5 * fsc, 3 * fsc, 0); ctx.bezierCurveTo(3 * fsc, 5 * fsc, -3 * fsc, 5 * fsc, -3 * fsc, 0); ctx.fill(); ctx.restore();
          }
        }
        ctx.restore();
      });

      // ΓöÇΓöÇ C├ính hoa / hß║ít phß║Ñn bay ΓöÇΓöÇ
      MPETALS.forEach(function (p) {
        var px = (p.x + Math.sin(nt * p.sp + p.ph) * 0.055) * W;
        var rawY = (p.y - nt * p.sp * 0.038) % 1;
        var py = bY + ((rawY + 1) % 1) * mH;
        var wobble = Math.sin(nt * 1.8 + p.ph) * 4;
        ctx.globalAlpha = a * t * (0.28 + 0.32 * Math.abs(Math.sin(nt * 0.85 + p.ph)));
        ctx.fillStyle = 'hsla(' + p.hue + ',65%,75%,1)';
        ctx.save(); ctx.translate(px + wobble, py); ctx.rotate(nt * p.sp + p.ph);
        ctx.beginPath(); ctx.ellipse(0, 0, p.r * sc, p.r * 0.45 * sc, 0, 0, Math.PI * 2); ctx.fill();
        ctx.restore();
      });

      ctx.globalAlpha = a * t;
      ctx.restore();
    }

    function drawRiver(a, t) {
      var riverA = a * (1 - t);
      if (riverA < 0.01) return;
      var bY = H * (H > W ? 0.65 : 0.82);
      var nt = activeTime * 0.001;
      var sc = Math.max(W / 1280, H > W ? 1.2 : 0.4);

      try {
        var baseTransform = ctx.getTransform ? ctx.getTransform() : null;
        ctx.save();
        ctx.globalAlpha = riverA;
        var isMobile = H > W;
        var lotusCount = isMobile ? 3 : 7;
        var lanternCount = isMobile ? 6 : 18;
        if (!window._RIVER_INIT_V8 || !window._river_lanterns || window._river_lanterns.length !== lanternCount) {
          window._RIVER_INIT_V8 = true;
          
          var allPos = [];
          function getValidPos(minD) {
            for(var tries=0; tries<50; tries++) {
              var nx = Math.random(), ny = Math.random();
              var ok = true;
              for(var j=0; j<allPos.length; j++) {
                var dx = nx - allPos[j].x, dy = (ny - allPos[j].y) * 2.5; 
                if (dx*dx + dy*dy < minD*minD) { ok = false; break; }
              }
              if (ok) {
                allPos.push({x: nx, y: ny});
                return {x: nx, y: ny};
              }
            }
            var fb = {x: Math.random(), y: Math.random()};
            allPos.push(fb);
            return fb;
          }

          window._river_lotuses = [];
          for (var i = 0; i < lotusCount; i++) { // Adaptive lotus count
            var p = getValidPos(0.09);
            window._river_lotuses.push({
              x: p.x, y: p.y,
              speed: 0.002 + Math.random() * 0.003, // Faster drifting
              scale: 0.7 + Math.random() * 0.6,
              phase: Math.random() * Math.PI * 2
            });
          }

          window._river_lanterns = [];
          for (var i = 0; i < lanternCount; i++) { // Adaptive lantern count
            var p = getValidPos(0.06);
            window._river_lanterns.push({
              x: p.x, y: p.y,
              speed: 0.004 + Math.random() * 0.004, // Noticeably faster drifting
              scale: 0.7 + Math.random() * 0.6, // Matching scale logic
              phase: Math.random() * Math.PI * 2,
              hue: [340, 350, 0, 10, 20, 30, 40, 45, 320, 330][Math.floor(Math.random() * 10)]
            });
          }
          
          window._river_bubbles = [];
          window._river_fishes = [];
        }

        // Water Base (Darker, more natural)
        var rGrad = ctx.createLinearGradient(0, bY, 0, H);
        rGrad.addColorStop(0, 'rgba(4, 12, 28, 1)'); // Slightly bluer water surface
        rGrad.addColorStop(0.5, 'rgba(6, 20, 45, 1)'); // Deeper blue-teal midpoint
        rGrad.addColorStop(1, 'rgba(10, 30, 60, 1)'); // Deep ocean blue at bottom
        ctx.fillStyle = rGrad;
        ctx.fillRect(0, bY, W, H - bY);

        // Castle Reflection
        try {
          ctx.save();
          ctx.beginPath(); ctx.rect(0, bY, W, H - bY); ctx.clip();
          
          var swayX = Math.sin(activeTime * 0.001 * 1.5) * 1.2 * sc;
          
          ctx.save();
          ctx.translate(0, 2 * bY);
          ctx.scale(1, -1);
          
          // D├╣ng ─æ├║ng h├¼nh dß║íng t├▓a th├ánh thß║¡t cho phß║ún chiß║┐u (thay v├¼ khß╗æi tß╗▒ vß║╜ tay,
          // vß╗æn kh├┤ng giß╗æng th├ánh thß║¡t) ΓÇö isReflection=true ─æ├ú tß╗▒ bß╗Å bß╗¢t v├ái chi tiß║┐t nß║╖ng.
          // 2 lß║ºn vß║╜ lß╗çch ─æß╗â giß║ú lß║¡p mß╗¥ m├á kh├┤ng cß║ºn ctx.filter (─æß╗í lag tr├¬n Safari mobile).
          var refA = riverA * 0.1;
          ctx.save(); ctx.translate(swayX * 0.8, 1 * sc); drawCastle(refA, t, true); ctx.restore();
          ctx.save(); ctx.translate(-swayX * 1.5, -0.5 * sc); drawCastle(refA * 0.7, t, true); ctx.restore();
          ctx.restore();
        } catch (err) {
        } finally {
          ctx.restore();
          if (baseTransform) ctx.setTransform(baseTransform);
        }

        // Wind Ripples on Water Surface (Shimmering, NOT moving like ducks)
        var windCycle = Math.max(0, Math.sin(nt * 0.2)); 
        if (windCycle > 0.01) {
          ctx.globalAlpha = riverA * 0.06 * windCycle;
          ctx.fillStyle = '#ffffff';
          for (var i = 0; i < 15; i++) {
            var ry = bY + (H - bY) * (i / 14);
            // Long, spanning width of the screen, just shifting/breathing slightly
            var rw = W * (0.3 + 0.5 * Math.sin(nt * 0.8 + i * 1.3)); 
            var rx = W * 0.5 + Math.sin(nt * 0.4 + i * 2.1) * W * 0.2;
            
            ctx.beginPath();
            ctx.ellipse(rx, ry, Math.max(0.1, rw), Math.max(0.1, 0.4 * sc), 0, 0, Math.PI*2);
            ctx.fill();
          }
        }
        ctx.globalAlpha = riverA;

        // Surface Popping Bubbles (Bß╗ìt n╞░ß╗¢c nß╗ò tr├¬n mß║╖t)
        if (Math.random() < 0.1 && window._river_bubbles.length < 25) {
          window._river_bubbles.push({
            x: Math.random(),
            y: Math.random(), // Random Y on surface
            life: 1.0,
            size: (1 + Math.random() * 2) * sc
          });
        }
        
        ctx.lineWidth = 1 * sc;
        for (var i = window._river_bubbles.length - 1; i >= 0; i--) {
          var b = window._river_bubbles[i];
          b.life -= 0.015;
          if (b.life <= 0) { window._river_bubbles.splice(i, 1); continue; }
          
          var bx = b.x * W;
          var by = bY + b.y * (H - bY); // Position on the river surface
          
          ctx.globalAlpha = riverA * b.life * 0.6;
          ctx.strokeStyle = 'rgba(255, 255, 255, ' + b.life + ')';
          
          ctx.beginPath();
          var r = b.size + (1 - b.life) * 8 * sc;
          ctx.ellipse(bx, by, Math.max(0.1, r), Math.max(0.1, r * 0.3), 0, 0, Math.PI * 2);
          ctx.stroke();
        }

        // Random fish jumping without click
        if (Math.random() < 0.0025 && window._river_fishes.length < 5) {
          var fTypes = ['koi', 'golden_carp', 'goby'];
          var rType = fTypes[Math.floor(Math.random() * fTypes.length)];
          var ry = bY + Math.random() * (H - bY) * 0.8;
          window._river_fishes.push({
            x: 0.1 + Math.random() * 0.8, y: ry, startY: ry,
            vx: (Math.random() - 0.5) * 4 * sc, vy: -(5 + Math.random() * 4) * sc,
            state: 'jumping', life: 1, type: rType
          });
        }

        // Fishes
        for (var i = window._river_fishes.length - 1; i >= 0; i--) {
          var f = window._river_fishes[i];
          if (f.state === 'jumping') {
            ctx.globalAlpha = riverA;
            f.x += f.vx / W; f.y += f.vy; f.vy += 0.3 * sc; // stronger gravity
            
            // Draw real fish based on type
            ctx.save();
            ctx.translate(f.x * W, f.y);
            ctx.rotate(Math.atan2(f.vy, f.vx));
            
            if (f.type === 'goby') {
              var fSc = 1.3 * sc;
              ctx.scale(fSc, fSc);
              ctx.fillStyle = '#7a6859';
              ctx.beginPath();
              ctx.moveTo(8, 0);
              ctx.quadraticCurveTo(4, -4, -6, -3);
              ctx.quadraticCurveTo(-12, -4, -14, -5);
              ctx.lineTo(-12, 0);
              ctx.lineTo(-14, 5);
              ctx.quadraticCurveTo(-12, 4, -6, 3);
              ctx.quadraticCurveTo(4, 4, 8, 0);
              ctx.fill();
              
              ctx.fillStyle = 'rgba(100,80,60,0.8)';
              ctx.beginPath(); ctx.moveTo(0, -3.5); ctx.lineTo(-4, -6); ctx.lineTo(-6, -3); ctx.fill();

              ctx.fillStyle = 'rgba(200,200,200,0.6)';
              ctx.beginPath(); ctx.moveTo(2, 2); ctx.lineTo(-2, 6); ctx.lineTo(-1, 2); ctx.fill();

              ctx.fillStyle = '#fff';
              ctx.beginPath(); ctx.arc(4.5, -1, 1, 0, Math.PI*2); ctx.fill();
              ctx.fillStyle = '#000';
              ctx.beginPath(); ctx.arc(5, -1, 0.5, 0, Math.PI*2); ctx.fill();

            } else if (f.type === 'golden_carp') {
              var fSc = 1.4 * sc;
              ctx.scale(fSc, fSc);
              ctx.fillStyle = '#ffb300';
              ctx.beginPath();
              ctx.moveTo(10, 0);
              ctx.quadraticCurveTo(5, -7, -8, -4);
              ctx.quadraticCurveTo(-14, -6, -16, -7);
              ctx.lineTo(-13, 0);
              ctx.lineTo(-16, 7);
              ctx.quadraticCurveTo(-14, 6, -8, 4);
              ctx.quadraticCurveTo(5, 7, 10, 0);
              ctx.fill();
              
              ctx.strokeStyle = 'rgba(255, 200, 0, 0.6)'; ctx.lineWidth = 1;
              ctx.beginPath(); ctx.moveTo(3, -4); ctx.quadraticCurveTo(0, 0, 3, 4); ctx.stroke();
              ctx.beginPath(); ctx.moveTo(-1, -5); ctx.quadraticCurveTo(-4, 0, -1, 5); ctx.stroke();
              ctx.beginPath(); ctx.moveTo(-5, -4); ctx.quadraticCurveTo(-8, 0, -5, 4); ctx.stroke();

              ctx.fillStyle = 'rgba(255,255,255,0.8)';
              ctx.beginPath(); ctx.moveTo(2, 4); ctx.lineTo(-3, 9); ctx.lineTo(-1, 4); ctx.fill();

              ctx.fillStyle = '#fff';
              ctx.beginPath(); ctx.arc(6, -2, 1.5, 0, Math.PI*2); ctx.fill();
              ctx.fillStyle = '#000';
              ctx.beginPath(); ctx.arc(6.5, -2, 0.8, 0, Math.PI*2); ctx.fill();

            } else {
              var fSc = 1.5 * sc;
              ctx.scale(fSc, fSc);
              ctx.fillStyle = '#cc3300';
              ctx.beginPath();
              ctx.moveTo(10, 0);
              ctx.quadraticCurveTo(5, -6, -8, -3);
              ctx.quadraticCurveTo(-14, -5, -16, -6);
              ctx.lineTo(-13, 0);
              ctx.lineTo(-16, 6);
              ctx.quadraticCurveTo(-14, 5, -8, 3);
              ctx.quadraticCurveTo(5, 6, 10, 0);
              ctx.fill();

              ctx.fillStyle = '#fff';
              ctx.beginPath(); ctx.arc(2, 0, 3, 0, Math.PI*2); ctx.fill();
              ctx.beginPath(); ctx.arc(-5, -1, 2, 0, Math.PI*2); ctx.fill();
              ctx.fillStyle = '#222';
              ctx.beginPath(); ctx.arc(-2, 2, 1.5, 0, Math.PI*2); ctx.fill();
              ctx.beginPath(); ctx.arc(-9, 0, 1.5, 0, Math.PI*2); ctx.fill();

              ctx.fillStyle = 'rgba(255,255,255,0.7)';
              ctx.beginPath(); ctx.moveTo(2, 3); ctx.lineTo(-3, 8); ctx.lineTo(-1, 3); ctx.fill();
              
              ctx.fillStyle = '#fff';
              ctx.beginPath(); ctx.arc(6, -1.5, 1.5, 0, Math.PI*2); ctx.fill();
              ctx.fillStyle = '#000';
              ctx.beginPath(); ctx.arc(6.5, -1.5, 0.7, 0, Math.PI*2); ctx.fill();
            }
            
            ctx.restore();

            // Splash trail
            ctx.globalAlpha = riverA * 0.3;
            ctx.fillStyle = '#fff';
            ctx.beginPath(); ctx.arc(f.x * W - f.vx*2, f.y - f.vy*2, Math.max(0.1, 1.5 * sc), 0, Math.PI*2); ctx.fill();
            ctx.globalAlpha = riverA;
            
            if (f.y > f.startY) { f.state = 'rippling'; f.life = 1; f.y = f.startY; }
          } else if (f.state === 'rippling') {
            f.life -= 0.02;
            if (f.life <= 0) { window._river_fishes.splice(i, 1); continue; }
            
            // Multiple expanding ripples (splash)
            ctx.globalAlpha = riverA * Math.max(0, f.life);
            ctx.strokeStyle = 'rgba(200, 230, 255, 0.8)'; 
            ctx.lineWidth = 1.5 * sc;
            ctx.beginPath();
            ctx.ellipse(f.x * W, f.y, Math.max(0.1, (1 - f.life) * 40 * sc), Math.max(0.1, (1 - f.life) * 12 * sc), 0, 0, Math.PI * 2);
            ctx.stroke();
            
            ctx.globalAlpha = riverA * Math.max(0, f.life - 0.2);
            ctx.beginPath();
            ctx.ellipse(f.x * W, f.y, Math.max(0.1, (1 - f.life) * 20 * sc), Math.max(0.1, (1 - f.life) * 6 * sc), 0, 0, Math.PI * 2);
            ctx.stroke();
          }
        }
        ctx.globalAlpha = riverA;

        // Define render functions
        function drawLotusObj(lo, isRefl) {
            var lx = lo.x * W;
            var ly = bY + lo.y * (H - bY);
            // Apply perspective scaling: smaller in background (y=0), larger in foreground (y=1)
            var ls = (lo.scale * 0.4 + lo.y * 1.5) * sc * 1.1; 
            var sway = 0; // No sway
            var yBob = 0; // No bobbing
            var rot = 0; // No rotation
            
            try {
              ctx.save();
              if (isRefl) {
                var noise = Math.sin(nt * 4 + lo.phase + lo.y * 10) * 0.03; // Very subtle water ripple shear
                ctx.translate(lx + sway, ly + yBob); // Reflection touches the base perfectly
                ctx.transform(1, 0, noise, -1.2, 0, 0); // shear and stretch
                ctx.rotate(-rot);
                ctx.globalAlpha = riverA * 0.04; // Very dim reflection because it doesn't emit light
              } else {
                ctx.translate(lx + sway, ly + yBob);
                ctx.rotate(rot);
                ctx.globalAlpha = riverA * 0.9;
              }
              
              // Leaf Pad
              ctx.fillStyle = '#1a4020';
              ctx.beginPath(); ctx.ellipse(0, 0, Math.max(0.1, 15 * ls), Math.max(0.1, 4 * ls), 0, 0, Math.PI * 2); ctx.fill();
              if (!isRefl) {
                ctx.fillStyle = '#255a2d';
                ctx.beginPath(); ctx.ellipse(0, -1*ls, Math.max(0.1, 13 * ls), Math.max(0.1, 3 * ls), 0, 0, Math.PI * 2); ctx.fill();
              }
              
              // Lotus Petals
              function drawRealPetal(pRot, scaleX, scaleY, yOffset, c1, c2) {
                ctx.save(); ctx.translate(0, yOffset); ctx.rotate(pRot);
                var pG = ctx.createLinearGradient(0, 0, 0, -10*scaleY);
                pG.addColorStop(0, c1); pG.addColorStop(1, c2);
                ctx.fillStyle = pG;
                ctx.beginPath();
                var w = 3.5 * scaleX, h = 10 * scaleY;
                ctx.moveTo(0, 0);
                ctx.bezierCurveTo(w, -h * 0.4, w * 0.9, -h * 0.8, 0, -h);
                ctx.bezierCurveTo(-w * 0.9, -h * 0.8, -w, -h * 0.4, 0, 0);
                ctx.fill();
                if (!isRefl) {
                  ctx.strokeStyle = 'rgba(255, 200, 230, 0.4)'; 
                  ctx.lineWidth = 0.5 * sc; 
                  ctx.stroke();
                }
                ctx.restore();
              }
              
              // Base layer petals (darker pink, spread out completely)
              drawRealPetal(-1.3, 1.4*ls, 0.5*ls, 0.5*ls, '#c93264', '#ff80af');
              drawRealPetal(1.3, 1.4*ls, 0.5*ls, 0.5*ls, '#c93264', '#ff80af');
              drawRealPetal(-0.9, 1.3*ls, 0.7*ls, 0, '#d94179', '#ff99c2');
              drawRealPetal(0.9, 1.3*ls, 0.7*ls, 0, '#d94179', '#ff99c2');
              
              // Middle layer petals (brighter pink)
              drawRealPetal(-0.5, 1.1*ls, 0.9*ls, -0.5*ls, '#e8528f', '#ffb3d1');
              drawRealPetal(0.5, 1.1*ls, 0.9*ls, -0.5*ls, '#e8528f', '#ffb3d1');
              
              // Inner layer petals (very light pink/white, standing up)
              drawRealPetal(-0.25, 0.9*ls, 1.0*ls, -1*ls, '#f76a9a', '#ffffff');
              drawRealPetal(0.25, 0.9*ls, 1.0*ls, -1*ls, '#f76a9a', '#ffffff');
              drawRealPetal(0, 1.0*ls, 1.2*ls, -1.5*ls, '#ff80af', '#ffffff'); // Center petal
              
              // Yellow core (stamens)
              if (!isRefl) {
                var cG = ctx.createRadialGradient(0, -2.5*ls, 0, 0, -2.5*ls, Math.max(0.1, 2.5*ls));
                cG.addColorStop(0, '#ffcc00'); cG.addColorStop(1, '#ff9900');
                ctx.fillStyle = cG;
                ctx.beginPath(); ctx.ellipse(0, -2.5*ls, Math.max(0.1, 2.5*ls), Math.max(0.1, 1.5*ls), 0, 0, Math.PI*2); ctx.fill();
              }
            } finally {
              ctx.restore();
            }
        }

        function drawLanternObj(la, isRefl) {
            var lx = la.x * W;
            var ly = bY + la.y * (H - bY);
            // Apply perspective scaling: smaller in background (y=0), larger in foreground (y=1)
            var ls = (la.scale * 0.4 + la.y * 1.5) * sc * 1.1;
            
            var sway = Math.sin(nt * 0.4 + la.phase) * 15 * ls;
            var yBob = Math.cos(nt * 0.6 + la.phase) * 3 * ls;
            var rot = Math.sin(nt * 0.4 + la.phase) * 0.1;
            
            try {
              ctx.save();
              if (isRefl) {
                var noise = Math.sin(nt * 4 + la.phase + la.y * 10) * 0.03; // Very subtle water ripple shear
                ctx.translate(lx + sway, ly + yBob); // Reflection touches the base perfectly
                ctx.transform(1, 0, noise, -1.2, 0, 0); // shear and stretch
                ctx.rotate(-rot);
                ctx.globalAlpha = riverA * (0.18 + 0.05 * Math.sin(nt * 3 + la.phase)); // Dimmer but glowing reflection
              } else {
                ctx.translate(lx + sway, ly + yBob);
                ctx.rotate(rot);
                ctx.globalAlpha = riverA * (0.85 + 0.15 * Math.sin(nt * 3 + la.phase));
              }

              var h = la.hue || 340;
              // Ambient Glow
              if (!isRefl) {
                var glow = ctx.createRadialGradient(0, -2.5*ls, 0, 0, -2.5*ls, Math.max(0.1, 40 * ls));
                glow.addColorStop(0, 'hsla(' + h + ', 100%, 75%, 0.45)');
                glow.addColorStop(0.3, 'hsla(' + (h + 15) + ', 100%, 65%, 0.15)');
                glow.addColorStop(1, 'transparent');
                ctx.fillStyle = glow;
                ctx.globalCompositeOperation = 'lighter';
                ctx.beginPath(); ctx.arc(0, -2.5*ls, Math.max(0.1, 40 * ls), 0, Math.PI * 2); ctx.fill();
                ctx.globalCompositeOperation = 'source-over';
              } else {
                ctx.save();
                ctx.scale(1.8, 0.5); // Spread reflection horizontally for water ripple effect
                var refGlow = ctx.createRadialGradient(0, -2.5*ls/0.5, 0, 0, -2.5*ls/0.5, Math.max(0.1, 60 * ls));
                refGlow.addColorStop(0, 'hsla(' + h + ', 100%, 75%, 0.35)');
                refGlow.addColorStop(0.3, 'hsla(' + (h + 15) + ', 100%, 65%, 0.1)');
                refGlow.addColorStop(1, 'transparent');
                ctx.fillStyle = refGlow;
                ctx.globalCompositeOperation = 'lighter';
                ctx.beginPath(); ctx.arc(0, -2.5*ls/0.5, Math.max(0.1, 60 * ls), 0, Math.PI * 2); ctx.fill();
                ctx.globalCompositeOperation = 'source-over';
                ctx.restore();
              }

              // Leaf Pad for lantern
              ctx.fillStyle = '#1a4020';
              ctx.beginPath(); ctx.ellipse(0, 0, Math.max(0.1, 15 * ls), Math.max(0.1, 4 * ls), 0, 0, Math.PI * 2); ctx.fill();

              function drawLanternPetal(pRot, scaleX, scaleY, yOffset, c1, c2) {
                ctx.save();
                ctx.translate(0, yOffset);
                ctx.rotate(pRot);
                var pG = ctx.createLinearGradient(0, 0, 0, -10*scaleY);
                pG.addColorStop(0, c1);
                pG.addColorStop(1, c2);
                ctx.fillStyle = pG;
                ctx.beginPath();
                var w = 3.5 * scaleX, h = 10 * scaleY;
                ctx.moveTo(0, 0);
                ctx.bezierCurveTo(w, -h * 0.4, w * 0.9, -h * 0.8, 0, -h);
                ctx.bezierCurveTo(-w * 0.9, -h * 0.8, -w, -h * 0.4, 0, 0);
                ctx.fill();
                
                if (!isRefl) {
                  ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; 
                  ctx.lineWidth = 0.5 * sc; 
                  ctx.stroke();
                }
                ctx.restore();
              }

              var hOuterBase = 'hsla(' + h + ', 85%, 45%, 0.9)'; 
              var hOuterTip = 'hsla(' + (h + 10) + ', 90%, 65%, 0.95)';
              
              var hMidBase = 'hsla(' + (h + 15) + ', 85%, 50%, 0.9)'; 
              var hMidTip = 'hsla(' + (h + 20) + ', 95%, 70%, 0.95)';
              
              var hInnerBase = 'hsla(' + (h + 25) + ', 90%, 55%, 0.95)'; 
              var hInnerTip = 'hsla(' + (h + 30) + ', 100%, 75%, 0.95)';
              
              var hCenterBase = 'hsla(' + (h + 35) + ', 95%, 60%, 0.98)'; 
              var hCenterTip = 'hsla(' + (h + 40) + ', 100%, 85%, 0.98)';

              // Outer layer (spread very flat like reference)
              drawLanternPetal(-1.3, 1.4*ls, 0.5*ls, 0.5*ls, hOuterBase, hOuterTip);
              drawLanternPetal(1.3, 1.4*ls, 0.5*ls, 0.5*ls, hOuterBase, hOuterTip);
              drawLanternPetal(-0.9, 1.3*ls, 0.7*ls, 0, hOuterBase, hOuterTip);
              drawLanternPetal(0.9, 1.3*ls, 0.7*ls, 0, hOuterBase, hOuterTip);

              // Middle layer (orange/peach)
              drawLanternPetal(-0.5, 1.1*ls, 0.9*ls, -0.5*ls, hMidBase, hMidTip);
              drawLanternPetal(0.5, 1.1*ls, 0.9*ls, -0.5*ls, hMidBase, hMidTip);

              // Inner layer (yellow/orange)
              drawLanternPetal(-0.25, 0.9*ls, 1.0*ls, -1*ls, hInnerBase, hInnerTip);
              drawLanternPetal(0.25, 0.9*ls, 1.0*ls, -1*ls, hInnerBase, hInnerTip);

              // Center glowing petal (brightest)
              drawLanternPetal(0, 1.0*ls, 1.2*ls, -1.5*ls, hCenterBase, hCenterTip);
              
              if (!isRefl) {
                // Candle core glow inside
                var core = ctx.createRadialGradient(0, -2.5*ls, 0, 0, -2.5*ls, Math.max(0.1, 8*ls));
                core.addColorStop(0, 'rgba(255,255,200,0.9)');
                core.addColorStop(1, 'transparent');
                ctx.fillStyle = core;
                ctx.beginPath(); ctx.arc(0, -2.5*ls, Math.max(0.1, 8*ls), 0, Math.PI*2); ctx.fill();
              }

            } finally {
              ctx.restore();
            }
        }

        // Pass 1: Draw ALL Reflections first
        window._river_lotuses.sort(function (a, b) { return a.y - b.y }).forEach(function (lo) {
          drawLotusObj(lo, true);
        });
        window._river_lanterns.sort(function (a, b) { return a.y - b.y }).forEach(function (la) {
          drawLanternObj(la, true);
        });
        
        // Pass 2: Draw ALL Main Objects on top
        window._river_lotuses.forEach(function (lo) {
          drawLotusObj(lo, false);
        });
        window._river_lanterns.forEach(function (la) {
          la.x += la.speed * 0.015;
          if (la.x > 1.1) la.x = -0.1;
          drawLanternObj(la, false);
        });

      } catch (err) {
        console.error(err);
      } finally {
        ctx.restore();
      }
    }

    function drawCherryBlossomTrees(a, t) {
      if (t < 0.01) return;
      ctx.save(); ctx.globalAlpha = a * t;
      var nt = activeTime * 0.001;
      var s = W < 768 ? Math.max(W / 1280, 0.7) : Math.max(W / 1280, 0.4);

      treeLeftShock *= 0.92; treeRightShock *= 0.92;

      function drawBranch(startX, startY, len, angle, depth, seed, shockValue) {
        if (depth === 0) return;
        var endX = startX + Math.cos(angle) * len, endY = startY + Math.sin(angle) * len;
        var swayX = Math.sin(nt * 1.5 + depth) * (depth < 3 ? 8 * s : 2 * s);
        var swayY = Math.cos(nt * 1.2 + depth * 0.8) * (depth < 3 ? 4 * s : 1 * s);

        if (shockValue > 0.01) {
          swayX += Math.sin(nt * 25 + depth) * shockValue * 15 * s; swayY += Math.cos(nt * 20 + depth) * shockValue * 5 * s;
        }
        endX += swayX; endY += swayY;

        var dx = endX - cX, dy = endY - cY, dist = Math.sqrt(dx * dx + dy * dy);
        var hoverDist = 140;
        if (dist < hoverDist && cY > H * 0.4) {
          var force = (hoverDist - dist) / hoverDist;
          endX += (dx / dist) * force * 35 * s; endY += (dy / dist) * force * 35 * s;

          if (depth <= 3 && prand(nt * 0.1) < 0.15 * force) {
            FF.push({
              x: endX / W, y: endY / H, vx: (Math.random() - 0.5) * 0.003, vy: Math.random() * 0.002 + 0.001,
              r: Math.random() * 1.5 + 1.2, hue: 330, ph: Math.random() * Math.PI * 2, sp: Math.random() * 2 + 1, isTemp: true,
              type: 'petal', rotX: Math.random() * Math.PI * 2, rotSpd: (Math.random() - 0.5) * 0.2, swayPhase: Math.random() * Math.PI * 2, swaySpd: Math.random() * 2 + 1
            });
          }
        }

        // Branches
        ctx.strokeStyle = 'rgba(60, 35, 25, ' + (0.5 + depth * 0.1) + ')';
        ctx.lineWidth = depth * 2.5 * s; ctx.lineCap = 'round';
        ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.stroke();

        if (depth <= 3) {
          var blossoms = Math.floor(prand(seed) * 25) + 18;
          for (var k = 0; k < blossoms; k++) {
            var bSeed = seed + k * 0.1;
            var r = (prand(bSeed) * (4 - depth) * 4 + 3) * s, ox = (prand(bSeed + 1) - 0.5) * 45 * s, oy = (prand(bSeed + 2) * 0.9 - 0.2) * 55 * s;
            var cT = prand(bSeed + 3);
            ctx.fillStyle = cT > 0.6 ? 'rgba(255, 183, 197, ' + (t * 0.9) + ')' : cT > 0.3 ? 'rgba(255, 192, 203, ' + (t * 0.85) + ')' : 'rgba(255, 228, 225, ' + (t * 0.95) + ')';
            ctx.beginPath(); ctx.arc(endX + ox, endY + oy, r, 0, Math.PI * 2); ctx.fill();
          }
        }

        drawBranch(endX, endY, len * (0.7 + prand(seed + 4) * 0.1), angle - 0.4 - prand(seed + 5) * 0.2, depth - 1, seed * 1.1 + 1, shockValue);
        drawBranch(endX, endY, len * (0.7 + prand(seed + 6) * 0.1), angle + 0.4 + prand(seed + 7) * 0.2, depth - 1, seed * 1.2 + 2, shockValue);
      }

      var scale = Math.min(W, H) * 0.22;
      ctx.save(); ctx.translate(W * 0.05, H); ctx.rotate(-0.1); drawBranch(0, 0, scale, -Math.PI / 2 + 0.3, 6, 100, treeLeftShock); ctx.restore();
      ctx.save(); ctx.translate(W * 0.95, H); ctx.rotate(0.1); drawBranch(0, 0, scale, -Math.PI / 2 - 0.3, 6, 200, treeRightShock); ctx.restore();
      ctx.restore();
    }

    var SPATH = null;
    function initShipPaths() {
      SPATH = {
        wingBg: new Path2D("M 280 230 L 520 220 L 520 210 L 280 215 Z"),
        rudder1: new Path2D("M 120 280 C 80 280, 50 250, 40 230 L 80 230 C 100 250, 110 260, 120 280 Z"),
        rudder2: new Path2D("M 90 230 L 30 230 L 50 310 C 80 290, 100 270, 110 240 Z"),
        hull: new Path2D("M 80 230 C 80 340, 250 380, 450 340 C 580 310, 650 260, 680 230 C 580 260, 300 280, 80 230 Z"),
        wl1: new Path2D("M 90 250 C 200 290, 450 290, 650 235"),
        wl2: new Path2D("M 110 270 C 220 320, 400 320, 600 250"),
        wl3: new Path2D("M 140 295 C 250 350, 380 340, 520 275"),
        wl4: new Path2D("M 210 320 C 300 370, 380 360, 440 305"),
        mb1: new Path2D("M 180 240 C 190 280, 190 310, 175 325"),
        mb2: new Path2D("M 320 250 C 330 290, 330 330, 310 365"),
        mb3: new Path2D("M 480 245 C 490 270, 490 300, 470 330"),
        cb1: new Path2D("M 140 280 L 160 160 L 450 160 L 480 280 Z"),
        cr1: new Path2D("M 135 160 L 455 160 L 450 150 L 140 150 Z"),
        cb2: new Path2D("M 200 150 L 220 90 L 380 90 L 400 150 Z"),
        cr2: new Path2D("M 190 90 L 390 90 L 380 80 L 200 80 Z"),
        cb3: new Path2D("M 280 80 L 290 40 L 330 40 L 340 80 Z"),
        cr3: new Path2D("M 275 40 L 345 40 L 330 25 L 290 25 Z"),
        sb: new Path2D("M 230 90 L 270 90 L 265 50 L 235 50 Z"),
        p1: new Path2D("M 440 220 L 490 200 L 490 230 L 440 240 Z"),
        p2: new Path2D("M 520 225 L 560 210 L 560 235 L 520 240 Z"),
        p3: new Path2D("M 670 235 L 710 235 L 710 255 L 650 255 Z"),
        wf: new Path2D("M 200 250 C 400 230, 600 240, 750 260 L 730 270 C 550 260, 350 270, 150 265 Z"),
        wfl1: new Path2D("M 280 245 L 260 265"),
        wfl2: new Path2D("M 380 242 L 360 265"),
        wfl3: new Path2D("M 480 245 L 450 265"),
        wfl4: new Path2D("M 580 250 L 540 265"),
        wfl5: new Path2D("M 680 255 L 630 268")
      };
    }

    function roundRectSafe(ctx, x, y, w, h, r) {
      if (ctx.roundRect) { ctx.roundRect(x, y, w, h, r); }
      else {
        ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y);
      }
    }

    function drawAirship(a, t) {
      if (a <= 0) return;
      if (!SPATH) initShipPaths();
      ctx.save(); ctx.globalAlpha = a;

      var nt = activeTime * 0.001, isDay = t > 0.5, isNight = t <= 0.5;

      shipBaseX += W < 768 ? 0.43 : 0.87;
      if (shipBaseX > W + 400) shipBaseX = -600;

      var shipY = (H * 0.15) + Math.sin(nt * 1.5) * 15;
      var pitch = Math.cos(nt * 1.5) * 0.04;
      var scale = Math.max(0.12, (W / 5000) * 0.95);

      var dx = (250 - 400) * scale, dy = (-15 - 250) * scale;
      var smX = shipBaseX + dx * Math.cos(pitch) - dy * Math.sin(pitch);
      var smY = shipY + dx * Math.sin(pitch) + dy * Math.cos(pitch);

      if (Math.random() < 0.3) {
        SHIP_SMOKE.push({ x: smX + (Math.random() * 15 - 7.5), y: smY + (Math.random() * 10 - 5), life: 1, vx: -1.5 - Math.random() * 1.5, vy: -0.3 - Math.random() * 0.5, size: Math.random() * 15 + 15 });
      }

      for (var i = SHIP_SMOKE.length - 1; i >= 0; i--) {
        var sm = SHIP_SMOKE[i];
        sm.x += sm.vx; sm.y += sm.vy; sm.life -= 0.006; sm.size += 0.5;
        if (sm.life <= 0) { SHIP_SMOKE.splice(i, 1); continue; }
        var smAlpha = sm.life * (isDay ? 0.6 : 0.3) * a;
        var sg = ctx.createRadialGradient(sm.x, sm.y, 0, sm.x, sm.y, sm.size);
        if (isDay) {
          sg.addColorStop(0, 'rgba(255, 240, 245, ' + smAlpha + ')'); sg.addColorStop(0.4, 'rgba(255, 220, 230, ' + (smAlpha * 0.7) + ')'); sg.addColorStop(1, 'rgba(255, 220, 230, 0)');
        } else {
          sg.addColorStop(0, 'rgba(120, 125, 140, ' + smAlpha + ')'); sg.addColorStop(0.4, 'rgba(80, 85, 100, ' + (smAlpha * 0.7) + ')'); sg.addColorStop(1, 'rgba(80, 85, 100, 0)');
        }
        ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(sm.x, sm.y, sm.size, 0, Math.PI * 2); ctx.fill();
      }

      ctx.translate(shipBaseX, shipY); ctx.rotate(pitch); ctx.scale(scale, scale);

      if (Math.random() < 0.6) {
        SHIP_WIND.push({ x: 450 + Math.random() * 200, y: -80 + Math.random() * 160, l: Math.random() * 150 + 80, v: 30 + Math.random() * 15 });
      }
      ctx.lineCap = 'round';
      for (var i = SHIP_WIND.length - 1; i >= 0; i--) {
        var w = SHIP_WIND[i];
        w.x -= w.v;
        if (w.x + w.l < -450) { SHIP_WIND.splice(i, 1); } else {
          var wg = ctx.createLinearGradient(w.x, w.y, w.x + w.l, w.y);
          wg.addColorStop(0, 'rgba(255, 255, 255, 0)'); wg.addColorStop(0.5, 'rgba(255, 255, 255, ' + (0.4 * a) + ')'); wg.addColorStop(1, 'rgba(255, 255, 255, 0)');
          ctx.strokeStyle = wg; ctx.lineWidth = 1 + Math.random() * 2.5;
          ctx.beginPath(); ctx.moveTo(w.x, w.y); ctx.lineTo(w.x + w.l, w.y); ctx.stroke();
        }
      }

      ctx.translate(-400, -250);

      var gWood = ctx.createLinearGradient(0, 230, 0, 380);
      gWood.addColorStop(0, 'rgb(' + lerpC('#151225', '#D8C6AC', t) + ')'); gWood.addColorStop(0.5, 'rgb(' + lerpC('#0c0a18', '#CAB9A4', t) + ')'); gWood.addColorStop(1, 'rgb(' + lerpC('#06050d', '#C2AF94', t) + ')');

      var gCabin = ctx.createLinearGradient(0, 40, 0, 280);
      gCabin.addColorStop(0, 'rgb(' + lerpC('#18122a', '#CDB59E', t) + ')'); gCabin.addColorStop(1, 'rgb(' + lerpC('#0a0815', '#A58B70', t) + ')');

      var gRoof = ctx.createLinearGradient(0, 25, 0, 160);
      gRoof.addColorStop(0, 'rgb(' + lerpC('#2a1111', '#B65D46', t) + ')'); gRoof.addColorStop(1, 'rgb(' + lerpC('#1a0808', '#863521', t) + ')');

      var gMetal = ctx.createLinearGradient(0, 0, 0, 400);
      gMetal.addColorStop(0, 'rgb(' + lerpC('#161822', '#8698a6', t) + ')'); gMetal.addColorStop(1, 'rgb(' + lerpC('#0a0b12', '#4b5b68', t) + ')');
      var gBrass = ctx.createLinearGradient(0, -50, 0, 100);
      gBrass.addColorStop(0, 'rgb(' + lerpC('#1a1508', '#e8c86d', t) + ')'); gBrass.addColorStop(0.5, 'rgb(' + lerpC('#120e05', '#c49a3f', t) + ')'); gBrass.addColorStop(1, 'rgb(' + lerpC('#080602', '#82601c', t) + ')');
      var gWing = ctx.createLinearGradient(0, 230, 0, 270);
      gWing.addColorStop(0, 'rgb(' + lerpC('#1a1822', '#fff0ed', t) + ')'); gWing.addColorStop(1, 'rgb(' + lerpC('#100e16', '#d6c5c1', t) + ')');

      globalPropAngle += 0.18;

      function drawPropeller(px, py) {
        ctx.save(); ctx.translate(px, py);
        ctx.fillStyle = gMetal; ctx.beginPath(); ctx.moveTo(-25, -10); ctx.lineTo(25, -30); ctx.lineTo(25, 10); ctx.lineTo(-25, 20); ctx.closePath(); ctx.fill();
        for (var s = 0; s < 3; s++) {
          ctx.save(); ctx.rotate(globalPropAngle + s * (Math.PI * 2 / 3)); ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, 36, -0.38, 0.38); ctx.closePath();
          ctx.fillStyle = isDay ? 'rgba(155,140,115,0.22)' : 'rgba(70,88,115,0.22)'; ctx.fill(); ctx.restore();
        }
        ctx.rotate(globalPropAngle);
        for (var b = 0; b < 3; b++) {
          ctx.save(); ctx.rotate(b * (Math.PI * 2 / 3));
          ctx.fillStyle = 'rgb(' + lerpC('#1a1e28', '#5a6875', t) + ')'; ctx.beginPath(); ctx.ellipse(0, -29, 5.5, 32, 0.14, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = isDay ? 'rgba(255,255,255,0.10)' : 'rgba(180,205,255,0.08)'; ctx.beginPath(); ctx.ellipse(-1.2, -28, 2, 27, 0.14, 0, Math.PI * 2); ctx.fill(); ctx.restore();
        }
        ctx.fillStyle = gBrass; ctx.beginPath(); ctx.arc(0, 0, 11, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = '#111'; ctx.beginPath(); ctx.arc(0, 0, 5, 0, Math.PI * 2); ctx.fill(); ctx.restore();
      }

      ctx.fillStyle = 'rgb(' + lerpC('#121018', '#756761', t) + ')'; ctx.fill(SPATH.wingBg);
      ctx.fillStyle = gWood; ctx.fill(SPATH.rudder1); ctx.fill(SPATH.rudder2);
      ctx.strokeStyle = 'rgb(' + lerpC('#06050d', '#311d0e', t) + ')'; ctx.lineWidth = 2; ctx.stroke(SPATH.rudder2);

      // Cabins (drawn BEFORE hull)
      ctx.lineWidth = 2; ctx.strokeStyle = 'rgb(' + lerpC('#050308', '#2a1a12', t) + ')';
      [SPATH.cb1, SPATH.cb2, SPATH.cb3].forEach(function (p) {
        ctx.fillStyle = gCabin; ctx.fill(p); ctx.stroke(p);
      });
      [SPATH.cr1, SPATH.cr2, SPATH.cr3].forEach(function (p) {
        ctx.fillStyle = gRoof; ctx.fill(p); ctx.stroke(p);
      });

      // V├ích gß╗ù (Wood panels) - add vertical lines to cabins
      ctx.save();
      ctx.strokeStyle = 'rgba(0,0,0,0.1)'; ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
      for (var vx = 150; vx < 460; vx += 25) { ctx.beginPath(); ctx.moveTo(vx, 160); ctx.lineTo(vx, 250); ctx.stroke(); }
      for (var vx = 210; vx < 390; vx += 25) { ctx.beginPath(); ctx.moveTo(vx, 90); ctx.lineTo(vx, 150); ctx.stroke(); }
      for (var vx = 280; vx < 340; vx += 20) { ctx.beginPath(); ctx.moveTo(vx, 40); ctx.lineTo(vx, 80); ctx.stroke(); }
      ctx.restore();

      // Cß╗¡a sß╗ò: C─ân chß╗ënh ─æß╗üu ─æß║╖n, chia ├┤ r├╡ r├áng
      var windows = [];
      for (var wx = 180; wx <= 420; wx += 40) windows.push([wx, 185]);
      for (var wx = 240; wx <= 360; wx += 40) windows.push([wx, 110]);
      windows.forEach(function (w) {
        var wW = 16, wH = 22;
        ctx.fillStyle = isNight ? '#ffebb5' : 'rgb(' + lerpC('#080510', '#3e2723', t) + ')';
        if (isNight) {
          ctx.shadowBlur = 15; ctx.shadowColor = '#ffb300';
        }
        ctx.beginPath(); roundRectSafe(ctx, w[0], w[1], wW, wH, 2); ctx.fill();
        ctx.shadowBlur = 0;

        // Chia ├┤ (window frame crossbar)
        ctx.strokeStyle = isNight ? '#3e2723' : '#1a100e'; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(w[0] + wW / 2, w[1]); ctx.lineTo(w[0] + wW / 2, w[1] + wH); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(w[0], w[1] + wH / 2); ctx.lineTo(w[0] + wW, w[1] + wH / 2); ctx.stroke();
      });

      // Lß╗ông ─æ├¿n ─æß╗Å treo d╞░ß╗¢i m├íi hi├¬n
      var lf = isNight ? (0.8 + 0.2 * Math.sin(nt * 3)) : 1;
      [[135, 160], [455, 160], [195, 90], [385, 90], [275, 40], [340, 40]].forEach(function (pos) {
        var lx = pos[0], ly = pos[1];
        ctx.fillStyle = 'rgb(' + lerpC('#881111', '#ff3333', t) + ')';
        if (isNight) { ctx.shadowBlur = 12 * lf; ctx.shadowColor = '#ff5500'; }
        ctx.fillRect(lx - 4, ly, 8, 12);
        ctx.shadowBlur = 0;
        ctx.fillStyle = '#ffcc00'; ctx.fillRect(lx - 3, ly, 6, 2); ctx.fillRect(lx - 3, ly + 10, 6, 2);
        ctx.strokeStyle = '#222'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(lx, ly); ctx.lineTo(lx, ly - 5); ctx.stroke();
      });

      // Hull (OVER bottom of cabins)
      ctx.fillStyle = gWood; ctx.strokeStyle = 'rgb(' + lerpC('#050308', '#2a1a12', t) + ')'; ctx.lineWidth = 3;
      ctx.fill(SPATH.hull); ctx.stroke(SPATH.hull);

      // V├ích gß╗ù hull (Wood panels on hull)
      ctx.save(); ctx.globalAlpha = 0.5; ctx.strokeStyle = 'rgb(' + lerpC('#080510', '#3b2518', t) + ')'; ctx.lineWidth = 2;
      ctx.stroke(SPATH.wl1); ctx.stroke(SPATH.wl2); ctx.stroke(SPATH.wl3); ctx.stroke(SPATH.wl4);
      // Vertical panels
      ctx.lineWidth = 1; ctx.setLineDash([5, 5]);
      for (var vx = 120; vx < 650; vx += 30) { ctx.beginPath(); ctx.moveTo(vx, 250); ctx.lineTo(vx, 350); ctx.stroke(); }
      ctx.restore();

      // Top railing of hull
      ctx.strokeStyle = gBrass; ctx.lineWidth = 3;
      ctx.beginPath(); ctx.moveTo(80, 230); ctx.quadraticCurveTo(300, 280, 580, 260); ctx.stroke();

      ctx.strokeStyle = gMetal; ctx.lineWidth = 8; ctx.stroke(SPATH.mb1); ctx.stroke(SPATH.mb2); ctx.stroke(SPATH.mb3);
      ctx.save(); ctx.globalAlpha = 0.3; ctx.fillStyle = '#fff';
      [[184, 255], [187, 280], [184, 305], [325, 265], [327, 295], [324, 330], [316, 355]].forEach(function (p) { ctx.beginPath(); ctx.arc(p[0], p[1], 1.5, 0, Math.PI * 2); ctx.fill(); }); ctx.restore();

      if (isNight) { ctx.shadowBlur = 25; ctx.shadowColor = '#ffb300'; ctx.fillStyle = '#ffebb5'; } else { ctx.fillStyle = '#1a1a1a'; }
      ctx.beginPath(); ctx.arc(310, 60, 10, 0, Math.PI * 2); ctx.fill();
      ctx.shadowBlur = 0; ctx.strokeStyle = 'rgb(' + lerpC('#050308', '#2a1a12', t) + ')'; ctx.lineWidth = 2; ctx.stroke();

      ctx.strokeStyle = gBrass; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(85, 230); ctx.lineTo(680, 230); ctx.stroke();
      ctx.strokeStyle = 'rgb(' + lerpC('#050508', '#222222', t) + ')'; ctx.beginPath(); ctx.moveTo(310, 25); ctx.lineTo(310, -50); ctx.stroke();
      ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(170, 150); ctx.lineTo(170, -20); ctx.stroke();
      ctx.strokeStyle = 'rgb(' + lerpC('#0a0a10', '#444444', t) + ')'; ctx.lineWidth = 1;
      ctx.beginPath(); ctx.moveTo(310, -30); ctx.lineTo(170, 50); ctx.stroke(); ctx.beginPath(); ctx.moveTo(310, -10); ctx.lineTo(450, 160); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(170, 0); ctx.lineTo(80, 230); ctx.stroke(); ctx.beginPath(); ctx.moveTo(170, 50); ctx.lineTo(220, 150); ctx.stroke();

      // Flag (correct wind)
      var fx = 310, fy = -45, fw = -55, fh = 35;
      var wave1 = Math.sin(nt * 8) * 8, wave2 = Math.sin(nt * 8 - 1) * 8;
      ctx.fillStyle = 'rgb(' + lerpC('#661111', '#da251d', t) + ')';
      ctx.beginPath(); ctx.moveTo(fx, fy); ctx.quadraticCurveTo(fx + fw * 0.5, fy + wave1, fx + fw, fy + wave2); ctx.lineTo(fx + fw, fy + fh + wave2); ctx.quadraticCurveTo(fx + fw * 0.5, fy + fh + wave1, fx, fy + fh); ctx.closePath(); ctx.fill();
      var sx = fx + fw * 0.45, sy = fy + fh * 0.5 + wave1 * 0.5, sr1 = 7.5, sr2 = 3, rot = Math.PI / 2 * 3, step = Math.PI / 5;
      ctx.fillStyle = 'rgb(' + lerpC('#999900', '#ffff00', t) + ')';
      ctx.beginPath(); for (var i = 0; i < 5; i++) { ctx.lineTo(sx + Math.cos(rot) * sr1, sy + Math.sin(rot) * sr1); rot += step; ctx.lineTo(sx + Math.cos(rot) * sr2, sy + Math.sin(rot) * sr2); rot += step; } ctx.closePath(); ctx.fill();

      ctx.fillStyle = gMetal; ctx.fill(SPATH.sb); ctx.fillRect(238, -10, 24, 60);
      ctx.fillStyle = gBrass; ctx.fillRect(235, 30, 30, 5); ctx.fillRect(235, 10, 30, 5);
      ctx.fillStyle = 'rgb(' + lerpC('#050505', '#111111', t) + ')'; ctx.fillRect(232, -15, 36, 8);

      ctx.fillStyle = gMetal; ctx.strokeStyle = 'rgb(' + lerpC('#050505', '#111111', t) + ')'; ctx.lineWidth = 2;
      ctx.fill(SPATH.p1); ctx.stroke(SPATH.p1); ctx.fill(SPATH.p2); ctx.stroke(SPATH.p2); ctx.fill(SPATH.p3); ctx.stroke(SPATH.p3);

      drawPropeller(495, 215); drawPropeller(565, 222); drawPropeller(715, 245);

      ctx.strokeStyle = gMetal; ctx.lineWidth = 5;
      ctx.beginPath(); ctx.moveTo(260, 260); ctx.lineTo(310, 180); ctx.stroke(); ctx.beginPath(); ctx.moveTo(400, 265); ctx.lineTo(380, 180); ctx.stroke(); ctx.beginPath(); ctx.moveTo(530, 260); ctx.lineTo(450, 180); ctx.stroke();

      ctx.fillStyle = gMetal;
      ctx.beginPath(); roundRectSafe(ctx, 250, 340, 80, 35, 15); ctx.fill(); ctx.stroke();
      ctx.beginPath(); roundRectSafe(ctx, 350, 325, 90, 40, 20); ctx.fill(); ctx.stroke();
      ctx.beginPath(); roundRectSafe(ctx, 460, 305, 60, 30, 15); ctx.fill(); ctx.stroke();
      ctx.fillStyle = '#050505';
      ctx.fillRect(270, 340, 4, 35); ctx.fillRect(310, 340, 4, 35);
      ctx.fillRect(375, 325, 5, 40); ctx.fillRect(415, 325, 5, 40);

      ctx.fillStyle = gWing; ctx.strokeStyle = 'rgb(' + lerpC('#100e16', '#75625a', t) + ')'; ctx.lineWidth = 2;
      ctx.fill(SPATH.wf); ctx.stroke(SPATH.wf);
      ctx.strokeStyle = 'rgb(' + lerpC('#181620', '#a39891', t) + ')'; ctx.lineWidth = 2;
      ctx.stroke(SPATH.wfl1); ctx.stroke(SPATH.wfl2); ctx.stroke(SPATH.wfl3); ctx.stroke(SPATH.wfl4); ctx.stroke(SPATH.wfl5);

      if (isNight || t < 0.8) {
        var blinkR = 0.5 + 0.5 * Math.sin(nt * 6);
        ctx.fillStyle = 'rgba(255, 60, 60, ' + blinkR + ')';
        ctx.shadowBlur = 12; ctx.shadowColor = '#ff0000';
        ctx.beginPath(); ctx.arc(740, 265, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(40, 230, 5, 0, Math.PI * 2); ctx.fill();
        ctx.shadowBlur = 0;

        var blinkW = 0.2 + 0.6 * Math.sin(nt * 3);
        ctx.fillStyle = 'rgba(200, 220, 255, ' + blinkW + ')';
        ctx.shadowBlur = 15; ctx.shadowColor = '#c8dcff';
        ctx.beginPath(); ctx.arc(175, 325, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(470, 330, 3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(285, 45, 3, 0, Math.PI * 2); ctx.fill();
        ctx.shadowBlur = 0;
      }

      function drawBird(bx, by, wingPhase) {
        ctx.save(); ctx.translate(bx, by);
        var flap = Math.sin(wingPhase) * 15;
        ctx.fillStyle = gBrass; ctx.beginPath(); ctx.ellipse(0, 0, 12, 6, 0.2, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = gWood; ctx.beginPath(); ctx.moveTo(0, -3); ctx.quadraticCurveTo(-10, -20 + flap, -25, -15 + flap); ctx.lineTo(0, 3); ctx.fill();
        ctx.fillStyle = isNight ? 'rgba(0, 255, 255, 0.9)' : 'rgba(255, 200, 50, 0.9)';
        if (isNight) { ctx.shadowBlur = 8; ctx.shadowColor = '#00ffff'; }
        ctx.beginPath(); ctx.arc(7, -2, 2.5, 0, Math.PI * 2); ctx.fill();
        ctx.shadowBlur = 0; ctx.restore();
      }
      drawBird(800, 80, nt * 12); drawBird(850, 110, nt * 12 + 1);
      drawBird(770, 150, nt * 12 + 2); drawBird(900, 60, nt * 12 + 3);

      if (!isNight) {
        ctx.strokeStyle = '#9e9e9e'; ctx.lineWidth = 1.5; ctx.fillStyle = '#fff';
        var bx = Math.sin(nt * 2) * 10, by = Math.sin(nt * 4) * 5;
        ctx.beginPath(); ctx.moveTo(580 + bx, 380 + by); ctx.quadraticCurveTo(590 + bx, 370 + by, 600 + bx, 380 + by); ctx.quadraticCurveTo(590 + bx, 375 + by, 580 + bx, 380 + by); ctx.fill(); ctx.stroke();
        var bx2 = Math.sin(nt * 2.3 + 1) * 12, by2 = Math.sin(nt * 4.6 + 1) * 6;
        ctx.beginPath(); ctx.moveTo(620 + bx2, 395 + by2); ctx.quadraticCurveTo(630 + bx2, 385 + by2, 640 + bx2, 395 + by2); ctx.quadraticCurveTo(630 + bx2, 390 + by2, 620 + bx2, 395 + by2); ctx.fill(); ctx.stroke();
      }
      ctx.restore();
    }
    function drawHolyCelestial(t, nt) {
      ctx.save();
      var R = Math.min(W, H) * 0.11; R = Math.max(65, Math.min(110, R));
      var cx = W - R * 2.2, cy = 240;
      if (W < 768) { cx = W - R * 1.4 - 15; cy = 180; R = 50; }
      ctx.translate(cx, cy);

      var orbitR = R * 1.5;
      var angleMoon = -Math.PI / 2 + t * Math.PI, angleSun = Math.PI / 2 + t * Math.PI;
      var moonX = Math.cos(angleMoon) * orbitR, moonY = Math.sin(angleMoon) * orbitR, sunX = Math.cos(angleSun) * orbitR, sunY = Math.sin(angleSun) * orbitR;

      function getOpacity(yPos) { var normY = yPos / orbitR; var op = 1.0 - (normY + 0.2) * 1.5; return Math.max(0, Math.min(1, op)); }
      var moonOp = getOpacity(moonY), sunOp = getOpacity(sunY);
      var moonScale = 0.6 + 0.4 * moonOp, sunScale = 0.6 + 0.4 * sunOp;

      if (moonOp > 0.001) {
        ctx.save(); ctx.translate(moonX, moonY); ctx.scale(moonScale, moonScale); ctx.globalAlpha = moonOp; ctx.rotate(Math.sin(nt * 1.2) * 0.08);
        var mg = ctx.createRadialGradient(0, 0, 0, 0, 0, R * 3.2); mg.addColorStop(0, 'rgba(160, 210, 255, 0.4)'); mg.addColorStop(0.3, 'rgba(100, 160, 255, 0.1)'); mg.addColorStop(1, 'transparent'); ctx.fillStyle = mg; ctx.beginPath(); ctx.arc(0, 0, R * 3.2, 0, Math.PI * 2); ctx.fill();
        ctx.strokeStyle = 'rgba(200, 230, 255, 0.8)'; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.arc(0, 0, R * 2.1, 0, Math.PI * 2); ctx.stroke();
        ctx.setLineDash([2, 6]); ctx.beginPath(); ctx.arc(0, 0, R * 2.3, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]);
        ctx.strokeStyle = 'rgba(180, 210, 255, 0.4)'; ctx.lineWidth = 0.5; ctx.beginPath(); ctx.arc(0, 0, R * 2.45, 0, Math.PI * 2); ctx.stroke();
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        for (var j = 0; j < 8; j++) { var ha = j * (Math.PI / 4) + nt * 0.05; ctx.beginPath(); ctx.arc(Math.cos(ha) * R * 2.1, Math.sin(ha) * R * 2.1, 1.5, 0, Math.PI * 2); ctx.fill(); }
        ctx.strokeStyle = 'rgba(150, 190, 255, 0.35)'; ctx.lineWidth = 1;
        for (var i = 0; i < 3; i++) {
          ctx.save(); ctx.rotate(nt * (0.2 + i * 0.05) + i * Math.PI / 3); ctx.beginPath(); ctx.ellipse(0, 0, R * 1.4, R * 0.4, 0, 0, Math.PI * 2); ctx.stroke();
          ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'; ctx.beginPath(); ctx.arc(R * 1.4, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(-R * 1.4, 0, 2, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'; ctx.beginPath(); ctx.arc(0, R * 0.4, 1.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(0, -R * 0.4, 1.2, 0, Math.PI * 2); ctx.fill(); ctx.restore();
        }
        ctx.fillStyle = 'rgba(8, 15, 35, 0.8)'; ctx.beginPath(); ctx.arc(0, 0, R * 0.9, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = '#fff'; var sCoords = [[-0.2, -0.3], [0.3, -0.4], [0.1, 0.2], [-0.4, 0.1], [0.4, 0.3], [-0.1, 0.6], [0.5, -0.1], [-0.3, 0.5]];
        sCoords.forEach(function (sc, i) { var sAlpha = 0.3 + 0.7 * Math.abs(Math.sin(nt * 2 + i)); ctx.globalAlpha = moonOp * sAlpha; ctx.beginPath(); ctx.arc(sc[0] * R, sc[1] * R, 1.2, 0, Math.PI * 2); ctx.fill(); }); ctx.globalAlpha = moonOp;
        ctx.fillStyle = 'rgba(150, 200, 255, 0.15)'; ctx.beginPath(); ctx.arc(0, 0, R * 0.8, -Math.PI * 0.25, Math.PI * 1.25, false); ctx.arc(-R * 0.15, -R * 0.15, R * 0.75, Math.PI * 1.25, -Math.PI * 0.25, true); ctx.fill();
        ctx.fillStyle = 'rgba(240, 250, 255, 0.98)'; ctx.shadowBlur = 15; ctx.shadowColor = '#bce2ff'; ctx.beginPath(); ctx.arc(0, 0, R, -Math.PI * 0.35, Math.PI * 1.35, false); ctx.arc(-R * 0.25, -R * 0.25, R * 0.95, Math.PI * 1.35, -Math.PI * 0.35, true); ctx.fill(); ctx.shadowBlur = 0;
        ctx.strokeStyle = 'rgba(180, 220, 255, 0.5)'; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.arc(-R * 0.1, -R * 0.1, R * 0.6, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(R * 0.5, R * 0.5, R * 0.1, 0, Math.PI * 2); ctx.stroke();
        ctx.save(); ctx.translate(R * 0.1, R * 0.9); ctx.rotate(Math.sin(nt * 2.5) * 0.12); ctx.strokeStyle = 'rgba(200, 230, 255, 0.7)'; ctx.lineWidth = 0.8; ctx.setLineDash([2, 2]); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, R * 0.65); ctx.stroke(); ctx.setLineDash([]);
        ctx.fillStyle = 'rgba(180, 240, 255, 0.95)'; ctx.shadowBlur = 10; ctx.shadowColor = '#88ccff'; ctx.beginPath(); ctx.moveTo(0, R * 0.65); ctx.lineTo(R * 0.12, R * 0.78); ctx.lineTo(0, R * 1.0); ctx.lineTo(-R * 0.12, R * 0.78); ctx.closePath(); ctx.fill();
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'; ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(0, R * 0.65); ctx.lineTo(0, R * 1.0); ctx.stroke(); ctx.beginPath(); ctx.moveTo(-R * 0.12, R * 0.78); ctx.lineTo(R * 0.12, R * 0.78); ctx.stroke(); ctx.shadowBlur = 0;
        ctx.restore(); ctx.restore();
      }

      if (sunOp > 0.001) {
        ctx.save(); ctx.translate(sunX, sunY); ctx.scale(sunScale, sunScale); ctx.globalAlpha = sunOp;
        var sg = ctx.createRadialGradient(0, 0, 0, 0, 0, R * 5.5); sg.addColorStop(0, 'rgba(255, 245, 200, 0.85)'); sg.addColorStop(0.2, 'rgba(255, 210, 100, 0.4)'); sg.addColorStop(0.5, 'rgba(255, 150, 50, 0.15)'); sg.addColorStop(1, 'transparent'); ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(0, 0, R * 5.5, 0, Math.PI * 2); ctx.fill();
        ctx.strokeStyle = 'rgba(255, 230, 120, 0.8)'; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.arc(0, 0, R * 2.4, 0, Math.PI * 2); ctx.stroke();
        ctx.save(); ctx.rotate(nt * 0.06); ctx.strokeStyle = 'rgba(255, 210, 100, 0.6)'; ctx.setLineDash([1, 6, 3, 6]); ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(0, 0, R * 2.65, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]); ctx.restore();
        ctx.save(); ctx.rotate(-nt * 0.09); ctx.fillStyle = 'rgba(255, 240, 150, 0.9)';
        for (var j = 0; j < 12; j++) {
          var ha = j * (Math.PI / 6), cx_diamond = Math.cos(ha) * R * 2.4, cy_diamond = Math.sin(ha) * R * 2.4;
          ctx.beginPath(); ctx.moveTo(cx_diamond, cy_diamond - 3); ctx.lineTo(cx_diamond + 3, cy_diamond); ctx.lineTo(cx_diamond, cy_diamond + 3); ctx.lineTo(cx_diamond - 3, cy_diamond); ctx.fill();
          var ha_dot = ha + (Math.PI / 12); ctx.beginPath(); ctx.arc(Math.cos(ha_dot) * R * 2.55, Math.sin(ha_dot) * R * 2.55, 1.2, 0, Math.PI * 2); ctx.fill();
        } ctx.restore();
        ctx.save(); ctx.rotate(nt * 0.02);
        for (var k = 0; k < 6; k++) { ctx.rotate(Math.PI / 3); ctx.fillStyle = 'rgba(255, 220, 100, 0.9)'; ctx.beginPath(); ctx.moveTo(0, -R * 2.4); ctx.lineTo(R * 0.05, -R * 2.4 + R * 0.08); ctx.lineTo(0, -R * 2.4 + R * 0.16); ctx.lineTo(-R * 0.05, -R * 2.4 + R * 0.08); ctx.fill(); ctx.beginPath(); ctx.arc(0, -R * 2.15, 2, 0, Math.PI * 2); ctx.fill(); }
        ctx.restore();
        ctx.save(); ctx.rotate(-nt * 0.025); ctx.fillStyle = 'rgba(255, 190, 50, 0.5)'; var stretch4 = 1 + 0.15 * Math.sin(nt * 2.5);
        for (var j = 0; j < 16; j++) { ctx.rotate(Math.PI / 8); ctx.beginPath(); ctx.moveTo(0, -R * 0.7); ctx.lineTo(R * 0.06, -R * 1.9 * stretch4); ctx.lineTo(0, -R * 2.3 * stretch4); ctx.lineTo(-R * 0.06, -R * 1.9 * stretch4); ctx.fill(); }
        ctx.restore();
        ctx.save(); ctx.rotate(nt * 0.035); ctx.fillStyle = 'rgba(255, 210, 80, 0.7)'; var stretch5 = 1 + 0.15 * Math.sin(nt * 2.5 + Math.PI);
        for (var j = 0; j < 16; j++) { ctx.rotate(Math.PI / 8); ctx.beginPath(); ctx.moveTo(0, -R * 0.6); ctx.lineTo(R * 0.1, -R * 1.0 * stretch5); ctx.lineTo(0, -R * 1.4 * stretch5); ctx.lineTo(-R * 0.1, -R * 1.0 * stretch5); ctx.fill(); }
        ctx.restore();
        ctx.save(); ctx.rotate(-nt * 0.025); var stretch6 = 1 + 0.08 * Math.cos(nt * 2.5);
        for (var i = 0; i < 8; i++) {
          ctx.save(); ctx.rotate((Math.PI / 4) * i); ctx.fillStyle = 'rgba(255, 235, 120, 0.95)'; ctx.shadowBlur = 10; ctx.shadowColor = 'rgba(255, 150, 0, 0.5)'; ctx.beginPath(); ctx.moveTo(0, -R * 0.3); ctx.quadraticCurveTo(R * 0.35, -R * 0.8 * stretch6, 0, -R * 1.75 * stretch6); ctx.quadraticCurveTo(-R * 0.35, -R * 0.8 * stretch6, 0, -R * 0.3); ctx.fill(); ctx.shadowBlur = 0;
          ctx.fillStyle = 'rgba(255, 255, 220, 0.9)'; ctx.beginPath(); ctx.moveTo(0, -R * 0.4); ctx.quadraticCurveTo(R * 0.12, -R * 0.8 * stretch6, 0, -R * 1.45 * stretch6); ctx.quadraticCurveTo(-R * 0.12, -R * 0.8 * stretch6, 0, -R * 0.4); ctx.fill();
          ctx.rotate(Math.PI / 8); ctx.strokeStyle = 'rgba(255, 240, 180, 0.9)'; ctx.lineWidth = 1.5; var rayLen = R * 1.5 * stretch6; ctx.beginPath(); ctx.moveTo(0, -R * 0.5); ctx.lineTo(0, -rayLen); ctx.stroke();
          ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(0, -rayLen, R * 0.05, 0, Math.PI * 2); ctx.fill(); ctx.restore();
        } ctx.restore();
        ctx.fillStyle = 'rgba(255, 245, 200, 1)'; ctx.shadowBlur = 25; ctx.shadowColor = '#ffaa00'; ctx.beginPath(); ctx.arc(0, 0, R * 0.65, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0;
        ctx.save(); ctx.rotate(nt * 0.015); ctx.strokeStyle = 'rgba(220, 120, 10, 0.8)'; ctx.lineWidth = 1.2; ctx.beginPath(); ctx.arc(0, 0, R * 0.45, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([3, 5]); ctx.beginPath(); ctx.arc(0, 0, R * 0.35, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]);
        ctx.fillStyle = 'rgba(255, 140, 0, 0.9)';
        for (var i = 0; i < 8; i++) { ctx.rotate(Math.PI / 4); ctx.beginPath(); ctx.moveTo(0, -R * 0.08); ctx.lineTo(R * 0.06, -R * 0.08); ctx.lineTo(0, -R * 0.28); ctx.lineTo(-R * 0.06, -R * 0.08); ctx.closePath(); ctx.fill(); } ctx.restore();
        ctx.fillStyle = '#fff';
        for (var m = 0; m < 12; m++) { var am = nt * 0.5 + m * (Math.PI * 2 / 12), dist = R * 1.3 + Math.sin(nt * 2.5 + m) * R * 0.4; ctx.globalAlpha = sunOp * (0.3 + 0.7 * Math.abs(Math.sin(nt * 3 + m))); ctx.beginPath(); ctx.arc(Math.cos(am) * dist, Math.sin(am) * dist, 1.5 + Math.random(), 0, Math.PI * 2); ctx.fill(); }
        ctx.globalAlpha = sunOp;
        var flarePulse = Math.pow(Math.max(0, Math.sin(nt * 0.11)), 10);
        if (flarePulse > 0.01) {
          ctx.globalAlpha = sunOp * flarePulse;
          var flareG = ctx.createRadialGradient(0, 0, 0, 0, 0, R * 2.2);
          flareG.addColorStop(0, 'rgba(255,255,245,0.9)'); flareG.addColorStop(0.3, 'rgba(255,240,180,0.35)'); flareG.addColorStop(1, 'rgba(255,240,180,0)');
          ctx.fillStyle = flareG; ctx.beginPath(); ctx.arc(0, 0, R * 2.2, 0, Math.PI * 2); ctx.fill();
          ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1;
          for (var fr = 0; fr < 4; fr++) { ctx.save(); ctx.rotate(fr * Math.PI / 4 + nt * 0.02); ctx.beginPath(); ctx.moveTo(0, -R * 2.6); ctx.lineTo(0, R * 2.6); ctx.stroke(); ctx.restore(); }
        }
        ctx.globalAlpha = sunOp; ctx.restore();
      }
      ctx.restore();
    }

    function render() {
      if (!isTabActive) return;
      var now = Date.now();
      activeTime += Math.min(now - lastTick, 100);
      lastTick = now;

      ctx.clearRect(0, 0, W, H);
      var nt = activeTime * .001;

      var isDayMode = document.body.classList.contains('an-day-mode');
      themeT += ((isDayMode ? 1 : 0) - themeT) * 0.04;

      var sky = ctx.createLinearGradient(0, 0, 0, H);
      sky.addColorStop(0, 'rgb(' + lerpC('#010108', '#135c9e', themeT) + ')');
      sky.addColorStop(.35, 'rgb(' + lerpC('#030214', '#358ece', themeT) + ')');
      sky.addColorStop(.65, 'rgb(' + lerpC('#08062b', '#62d2d6', themeT) + ')');
      sky.addColorStop(.85, 'rgb(' + lerpC('#140b3b', '#ffe4b3', themeT) + ')');
      sky.addColorStop(1, 'rgb(' + lerpC('#1d0c4d', '#ffbf66', themeT) + ')');
      ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H);

      var horizonCyan = mtnA * themeT;
      if (horizonCyan > 0.01) {
        var bandH = H * 0.32;
        var cyanBand = ctx.createLinearGradient(0, 0, 0, bandH);
        cyanBand.addColorStop(0, 'rgba(75,163,227,0)');
        cyanBand.addColorStop(0.4, 'rgba(94,207,224,' + (0.5 * horizonCyan) + ')');
        cyanBand.addColorStop(0.75, 'rgba(143,224,230,' + (0.55 * horizonCyan) + ')');
        cyanBand.addColorStop(1, 'rgba(180,235,235,0)');
        ctx.fillStyle = cyanBand; ctx.fillRect(0, 0, W, bandH);
      }

      drawHolyCelestial(themeT, nt);

      var starAlpha = Math.max(0, 1 - themeT * 1.5);
      if (starAlpha > 0) {
        STARS.forEach(function (s) {
          s.a = Math.max(.03, Math.min(1, s.a + s.da)); if (s.a >= 1 || s.a <= .03) s.da *= -1;
          if (s.sp) {
            var br = s.a * .9, sz = s.r + 1.4 + Math.sin(nt * 3 + s.ph) * .6;
            ctx.strokeStyle = 'rgba(255,255,230,' + (br * starAlpha) + ')'; ctx.lineWidth = .6;
            ctx.beginPath(); ctx.moveTo(s.x * W - sz, s.y * H); ctx.lineTo(s.x * W + sz, s.y * H); ctx.stroke();
            ctx.beginPath(); ctx.moveTo(s.x * W, s.y * H - sz); ctx.lineTo(s.x * W, s.y * H + sz); ctx.stroke();
          } else {
            ctx.beginPath(); ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255,255,255,' + Math.min(1, s.a * 0.75) * starAlpha + ')';
            ctx.fill();
          }
        });
      }

      ctx.save();
      ctx.globalAlpha = skyA * starAlpha;
      if (W < 768) {
        var mR = 50, mCx = W - mR * 1.4 - 15, mCy = 180;
        var mPx = mCx + Math.cos(-Math.PI / 2 + themeT * Math.PI) * (mR * 1.5);
        var mPy = mCy + Math.sin(-Math.PI / 2 + themeT * Math.PI) * (mR * 1.5);
        ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.arc(mPx, mPy, mR, 0, Math.PI * 2); ctx.clip('evenodd');
      }
      var pisc = W < 768 ? 4.0 : 2.5;
      var pisr = W < 768 ? 1.5 : 1.0;
      ctx.strokeStyle = 'rgba(180,210,255,.45)'; ctx.lineWidth = W < 768 ? 2.5 : 1.8;
      PIL.forEach(function (l) {
        var ax = (PIS[l[0]].x - .5) * pisc + .5, ay = (PIS[l[0]].y - .15) * pisc + .15;
        var bx = (PIS[l[1]].x - .5) * pisc + .5, by = (PIS[l[1]].y - .15) * pisc + .15;
        ctx.beginPath(); ctx.moveTo(ax * W, ay * H); ctx.lineTo(bx * W, by * H); ctx.stroke();
      });
      PIS.forEach(function (st, i) {
        var px = (st.x - .5) * pisc + .5, py = (st.y - .15) * pisc + .15;
        var tw = .5 + .45 * Math.sin(nt * 1.4 + i * .9), rr = (i === 0 || i === 7 || i === 12 ? 4 : 2.5) * pisr;
        var sg = ctx.createRadialGradient(px * W, py * H, 0, px * W, py * H, rr * 4); sg.addColorStop(0, 'rgba(180,210,255,' + tw * .5 + ')'); sg.addColorStop(1, 'transparent');
        ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(px * W, py * H, rr * 4, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = 'rgba(230,245,255,' + Math.min(1, tw * 1.3) + ')'; ctx.beginPath(); ctx.arc(px * W, py * H, rr, 0, Math.PI * 2); ctx.fill();
      });
      ctx.restore();

      if (starAlpha > 0) {
        (function () {
          var t = nt * 0.18;
          var bands = [
            { y: 0.06, col1: 'rgba(0,255,160,', col2: 'rgba(0,180,255,', amp: 0.035, spd: 0.8, wv: 3.5 },
            { y: 0.12, col1: 'rgba(100,50,220,', col2: 'rgba(150,50,255,', amp: 0.028, spd: 0.6, wv: 2.8 },
            { y: 0.18, col1: 'rgba(0,220,200,', col2: 'rgba(0,140,255,', amp: 0.030, spd: 1.0, wv: 4.5 },
          ];
          bands.forEach(function (b) {
            ctx.save(); ctx.globalAlpha = starAlpha;
            var baseY = b.y * H, tTime = activeTime * 0.0003;
            ctx.beginPath(); ctx.moveTo(0, H); ctx.lineTo(0, baseY);
            for (var xi = 0; xi <= 100; xi++) {
              var xp = (xi / 100) * W;
              var wave = Math.sin(xi / 100 * Math.PI * b.wv + tTime * b.spd * 2) * b.amp * H
                + Math.sin(xi / 100 * Math.PI * b.wv * 1.6 + tTime * b.spd * 1.3 + 1.2) * b.amp * 0.5 * H;
              ctx.lineTo(xp, baseY + wave);
            }
            ctx.lineTo(W, H); ctx.closePath();
            var grad = ctx.createLinearGradient(0, baseY - H * 0.15, 0, H);
            var pulse = 0.04 + 0.03 * Math.sin(nt * 0.3 + b.spd);
            grad.addColorStop(0, b.col1 + '0)'); grad.addColorStop(0.35, b.col1 + (pulse * 0.8) + ')'); grad.addColorStop(0.5, b.col2 + (pulse * 1.1) + ')'); grad.addColorStop(0.65, b.col1 + (pulse * 0.8) + ')'); grad.addColorStop(1, b.col1 + '0)');
            ctx.fillStyle = grad; ctx.fill(); ctx.restore();
          });
        })();
      }

      for (var i = SH.length - 1; i >= 0; i--) {
        var s = SH[i];
        s.trail.push({ x: s.x, y: s.y }); if (s.trail.length > 28) s.trail.shift();
        s.x += s.vx; s.y += s.vy; s.life -= s.decay;
        if (s.life <= 0) { SH.splice(i, 1); continue; }
        for (var tIdx = 1; tIdx < s.trail.length; tIdx++) {
          var pct = tIdx / s.trail.length;
          ctx.beginPath(); ctx.moveTo(s.trail[tIdx - 1].x, s.trail[tIdx - 1].y); ctx.lineTo(s.trail[tIdx].x, s.trail[tIdx].y);
          ctx.strokeStyle = 'rgba(255,240,180,' + pct * s.life * 0.9 * starAlpha + ')'; ctx.lineWidth = pct * 3 * s.life; ctx.stroke();
        }
      }

      if (mtnA > 0) drawMtns(mtnA, themeT);
      if (shipA > 0) drawAirship(shipA, themeT);

      if (casA > 0) {
        drawMist(casA * 0.5, false, themeT);
        drawForest(casA, themeT);
        drawCastle(casA, themeT, false);
        drawMeadow(casA, themeT);
        drawRiver(casA, themeT);
        drawMist(casA * 0.7, true, themeT);
        drawFireflies(casA, themeT);
        drawCherryBlossomTrees(casA, themeT);
      }

      var scenePulse = Math.pow(Math.max(0, Math.sin(nt * 0.07 + 2)), 12) * themeT;
      if (scenePulse > 0.01) {
        var shimmerG = ctx.createRadialGradient(W * 0.78, H * 0.18, 0, W * 0.78, H * 0.18, W * 0.6);
        shimmerG.addColorStop(0, 'rgba(255,240,205,' + (0.16 * scenePulse) + ')');
        shimmerG.addColorStop(1, 'rgba(255,240,205,0)');
        ctx.fillStyle = shimmerG; ctx.fillRect(0, 0, W, H);
      }

      ctx.globalCompositeOperation = 'overlay';
      var fantasyGlow = ctx.createLinearGradient(0, 0, 0, H);
      fantasyGlow.addColorStop(0, 'rgba(' + lerpC('#18103c', '#1561a3', themeT) + ', 0.35)');
      fantasyGlow.addColorStop(0.5, 'rgba(' + lerpC('#2e1a5a', '#3fb0a9', themeT) + ', 0.25)');
      fantasyGlow.addColorStop(1, 'rgba(' + lerpC('#3d0f3c', '#d6be74', themeT) + ', 0.35)');
      ctx.fillStyle = fantasyGlow;
      ctx.fillRect(0, 0, W, H);
      ctx.globalCompositeOperation = 'source-over';

      for (var fi = FW.length - 1; fi >= 0; fi--) {
        var fw = FW[fi];
        if (fw.phase === 'launch') {
          fw.y += fw.vy;
          var lg = ctx.createRadialGradient(fw.x, fw.y, 0, fw.x, fw.y, 8); lg.addColorStop(0, 'rgba(255,220,80,.88)'); lg.addColorStop(1, 'transparent');
          ctx.fillStyle = lg; ctx.beginPath(); ctx.arc(fw.x, fw.y, 8, 0, Math.PI * 2); ctx.fill();
          if (fw.y <= fw.ty) explodeFW(fw);
        } else {
          fw.parts = fw.parts.filter(function (p) { return p.life > 0; });
          fw.parts.forEach(function (p) {
            p.x += p.vx; p.y += p.vy; p.vy += .046; p.vx *= .97; p.vy *= .97; p.life -= p.decay;
            if (p.life <= 0) { p.life = 0; return; }
            var pg = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.s * p.life * 2.6); pg.addColorStop(0, 'hsla(' + p.hue + ',88%,' + (72 + p.life * 20) + '%,' + p.life * .85 + ')'); pg.addColorStop(1, 'transparent');
            ctx.fillStyle = pg; ctx.beginPath(); ctx.arc(p.x, p.y, p.s * p.life * 2.6, 0, Math.PI * 2); ctx.fill();
            ctx.fillStyle = 'hsla(' + p.hue + ',90%,' + (80 + p.life * 15) + '%,' + p.life * .75 + ')';
            ctx.beginPath(); ctx.arc(p.x, p.y, p.s * p.life, 0, Math.PI * 2); ctx.fill();
          });
          if (fw.parts.length === 0) FW.splice(fi, 1);
        }
      }

      mainRafId = requestAnimationFrame(render);
    }
    render();

    document.addEventListener('visibilitychange', function () {
      if (document.hidden) {
        isTabActive = false;
        clearTimeout(fwTimeoutId);
        clearTimeout(shootTimeoutId);
        cancelAnimationFrame(mainRafId);
        if (cursorRafId) cancelAnimationFrame(cursorRafId);
      } else {
        isTabActive = true;
        lastTick = Date.now();
        render();
        if (!isTouch) cursorLoop();
        scheduleFW(); scheduleShoot();
        if (themeT < 0.5) { makeFW(W * 0.5, H * 0.4); } else { spawnPetalBurst(W * 0.5, H * 0.5); }
      }
    });

    var PC = ['#c9a227', '#f0c84a', '#faeab1', '#2a9d8f', '#52c9b9', '#fff'], lastP = 0;
    if (!isTouch) {
      document.addEventListener('mousemove', function (ev) { var n = Date.now(); if (n - lastP < 32) return; lastP = n; spark(ev.clientX, ev.clientY); if (Math.random() > .7) spark(ev.clientX, ev.clientY); });
    }
    function spark(x, y, burst) {
      var p = document.createElement('div'); p.className = 'an-spark';
      var c = PC[Math.floor(Math.random() * PC.length)], sz = Math.random() * 5 + 2;
      var sp = burst ? Math.random() * 70 + 28 : Math.random() * 26 + 5, ang = Math.random() * Math.PI * 2;
      p.style.cssText = 'width:' + sz + 'px;height:' + sz + 'px;left:' + (x - sz / 2) + 'px;top:' + (y - sz / 2) + 'px;background:' + c + ';box-shadow:0 0 5px ' + c + ';';
      p.style.setProperty('--tx', Math.cos(ang) * sp + 'px'); p.style.setProperty('--ty', Math.sin(ang) * sp + (burst ? 0 : 12) + 'px');
      document.body.appendChild(p); setTimeout(function () { p.remove(); }, 800);
    }

    var SYMS = ['Γêæ', 'Γê½', 'Γëê', '╬ö', '╬╝', '╧â', '╬╗', 'Γê₧', '╬╕', '╧Ç', '╬▓', '╬╡', '{}', 'f(x)', 'def', 'Γêé', 'Γêç'];
    var SCOL = ['rgba(201,162,39,O)', 'rgba(42,157,143,O)', 'rgba(240,200,74,O)', 'rgba(210,200,240,O)'];
    var storm = document.createElement('div'); storm.id = 'an-storm'; document.body.appendChild(storm);
    for (var i = 0; i < 22; i++) {
      var el = document.createElement('div'); el.className = 'an-sym';
      var op = (Math.random() * .07 + .04).toFixed(2);
      var col = SCOL[Math.floor(Math.random() * SCOL.length)].replace('O', op);
      el.innerText = SYMS[Math.floor(Math.random() * SYMS.length)];
      el.style.color = col; el.style.textShadow = '0 0 8px ' + col;
      el.style.fontSize = (Math.random() * .85 + .6) + 'rem'; el.style.left = (Math.random() * 100) + 'vw';
      var dur = Math.random() * 16 + 12;
      el.style.animationDuration = dur + 's'; el.style.animationDelay = '-' + (Math.random() * dur) + 's';
      el.style.setProperty('--r', (Math.random() * 360 - 180) + 'deg'); el.style.setProperty('--op', op);
      storm.appendChild(el);
    }

    var obs = new IntersectionObserver(function (entries, o) { entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('reveal-visible'); o.unobserve(e.target); } }); }, { threshold: .1 });
    document.querySelectorAll('.reveal-item').forEach(function (el) { obs.observe(el); });

    document.querySelectorAll('.btn-cta-project,.tech-tag,.back-btn').forEach(function (btn) {
      btn.addEventListener('mousemove', function (ev) { var r = btn.getBoundingClientRect(); btn.style.transform = 'translate(' + (ev.clientX - r.left - r.width / 2) * .14 + 'px,' + (ev.clientY - r.top - r.height / 2) * .14 + 'px) scale(1.04)'; btn.style.transition = 'transform .1s ease-out'; });
      btn.addEventListener('mouseleave', function () { btn.style.transform = ''; btn.style.transition = 'all .45s cubic-bezier(.25,1,.5,1)'; });
    });

    function fixSidebar() {
      document.querySelectorAll('.author__urls-wrapper nav,.author__urls-wrapper .author__urls').forEach(function (el) { el.style.cssText = 'display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:12px!important;padding-top:12px!important;border-top:1px solid rgba(201,162,39,.14)!important;opacity:1!important;visibility:visible!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;'; });
      document.querySelectorAll('.author__urls-wrapper button,.author__urls-wrapper [class*=\"btn\"]').forEach(function (el) { el.style.cssText = 'display:none!important;height:0!important;visibility:hidden!important;pointer-events:none!important;margin:0!important;padding:0!important;border:none!important;'; });
      document.querySelectorAll('.author__urls a,.sidebar a').forEach(function (a) { if (a.href && !a.href.startsWith('mailto') && !a.href.includes(window.location.hostname + window.location.pathname)) { a.target = '_blank'; a.rel = 'noopener noreferrer'; } });
    }
    fixSidebar(); setTimeout(fixSidebar, 500); setTimeout(fixSidebar, 1500);

    var topBtn = document.createElement('button'); topBtn.id = 'an-top';
    topBtn.innerHTML = '<img src="/assets/images/kanade-chibi.png" alt="Top"><span>Back to top</span>';
    topBtn.onclick = function () { window.scrollTo({ top: 0, behavior: 'smooth' }); };
    document.body.appendChild(topBtn);
    window.addEventListener('scroll', function () { topBtn.classList.toggle('show', window.scrollY > 300); }, { passive: true });

    window.addEventListener('pageshow', function () {
      document.body.style.overflow = '';
      var ov = document.getElementById('an-overlay'), bk = document.getElementById('an-book');
      if (ov) { ov.style.opacity = '0'; ov.style.pointerEvents = 'none'; }
      if (bk) anBookReset(bk);
      updateAlpha(); fixSidebar();
    });

    (function () {
      var KTHEME = 'an_theme', KTS = 'an_ts', KACT = 'an_act', TTL = 300000;
      setTimeout(function () {
        var d = document.body.classList.contains('an-day-mode');
        ['an-theme-icon-desktop', 'an-theme-icon-mobile'].forEach(function (id) {
          var ic = document.getElementById(id);
          if (!ic) return;
          ic.className = ic.className.replace(/fa-sun|fa-moon/g, '').trim();
          ic.classList.add(d ? 'fa-moon' : 'fa-sun');
        });
      }, 80);

      new MutationObserver(function () {
        try {
          var d = document.body.classList.contains('an-day-mode');
          sessionStorage.setItem(KTHEME, d ? 'day' : 'night'); sessionStorage.setItem(KTS, Date.now());
        } catch (e) { }
      }).observe(document.body, { attributes: true, attributeFilter: ['class'] });

      function ping() { try { sessionStorage.setItem(KACT, Date.now()); } catch (e) { } }
      setInterval(ping, 30000);
      document.addEventListener('visibilitychange', function () {
        if (!document.hidden) {
          try {
            if (Date.now() - (+sessionStorage.getItem(KACT) || 0) > TTL) {
              sessionStorage.removeItem(KTHEME); sessionStorage.removeItem(KTS); document.body.classList.remove('an-day-mode');
            }
          } catch (e) { }
        }
        ping();
      });

      document.addEventListener('click', function (e) {
        var btn = e.target.closest('#an-theme-toggle-desktop,#an-theme-toggle-mobile');
        if (!btn) return;
        e.preventDefault(); e.stopImmediatePropagation();
        var blocker = document.getElementById('an-theme-blocker');
        if (blocker) blocker.remove();
        document.body.classList.toggle('an-day-mode');
        var nd = document.body.classList.contains('an-day-mode');
        ['an-theme-icon-desktop', 'an-theme-icon-mobile'].forEach(function (id) {
          var ic = document.getElementById(id);
          if (!ic) return;
          ic.className = ic.className.replace(/fa-sun|fa-moon/g, '').trim();
          ic.classList.add(nd ? 'fa-moon' : 'fa-sun');
        });
      }, true);
    })();
  });

  /* Block click/redirect tr├¬n page title & author namee */
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.page__title, .author__name').forEach(function (el) {
      var anchor = el.closest('a');
      if (anchor) {
        anchor.addEventListener('click', function (e) { e.preventDefault(); });
        anchor.style.cursor = 'default';
      }
      el.style.cursor = 'default';
    });
  });

  /* Vignette, film grain, typewriter tagline */
  document.addEventListener('DOMContentLoaded', function () {
    var vig = document.createElement('div'); vig.id = 'an-vignette'; document.body.appendChild(vig);
    var grain = document.createElement('div'); grain.id = 'an-grain'; document.body.appendChild(grain);

    var bio = document.querySelector('.author__bio');
    if (bio) {
      var original = bio.textContent.trim();
      bio.textContent = '';
      var cursor = document.createElement('span');
      cursor.className = 'author__bio-cursor'; cursor.textContent = '|';
      bio.appendChild(cursor);
      var i = 0;
      setTimeout(function () {
        var timer = setInterval(function () {
          if (i < original.length) {
            bio.insertBefore(document.createTextNode(original[i]), cursor); i++;
          } else {
            clearInterval(timer);
            setTimeout(function () {
              cursor.style.transition = 'opacity 0.5s'; cursor.style.opacity = '0';
              setTimeout(function () { cursor.remove(); }, 500);
            }, 2500);
          }
        }, 52);
      }, 1500);
    }
  });
</script>