/* Yutthaphop (wuxia) theme layer. Loaded last: display only, never touches layout logic. */
:root {
  --wx-ink: #100c08; --wx-paper: #f4ecd7; --wx-gold: #d7a423; --wx-vermilion: #c8402a; --wx-jade: #38bf92;
  --font-th: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'WX Serif', 'Noto Serif Thai', 'Prompt', serif;
}
/* headings and titles in serif; body copy stays Prompt for phone legibility */
h1, h2, h3, .logo-title, .mobile-start-card h2, .a4-hud-emblem + div strong, .dash-start-countdown-card h2,
.screen-bottom, [class*="round-title"], [class*="phase-title"], .a4-final-result h1 {
  font-family: var(--font-display); letter-spacing: .01em;
}
h1, .logo-title { font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px rgba(215,164,35,.25); }
/* ornamental han glyphs, display only */
.wx-han { font-family: 'WX Han', 'Noto Serif SC', serif; font-weight: 700; }

/* paper-grain ink background + mountain ridges instead of nebula */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='220' viewBox='0 0 900 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220V150Q60 90 130 140T260 110 380 150 520 80 650 140 780 100 900 150V220Z' fill='%23ffffff' fill-opacity='.025'/%3E%3Cpath d='M0 220V180Q90 140 170 175T330 150 480 185 640 140 800 180 900 160V220Z' fill='%23d7a423' fill-opacity='.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(215,164,35,.16), transparent),
    radial-gradient(ellipse 60% 40% at 50% 120%, rgba(200,64,42,.12), transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom center, 0 0, 0 0;
  background-size: 100% 220px, auto, auto;
  background-attachment: fixed;
}
/* drifting mist + lantern glow replaces the star field */
.cruise-stars-bg {
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,214,120,.9), transparent),
    radial-gradient(1.5px 1.5px at 90px 40px, rgba(255,240,200,.7), transparent),
    radial-gradient(2.5px 2.5px at 160px 120px, rgba(240,120,70,.8), transparent),
    radial-gradient(1.5px 1.5px at 230px 80px, rgba(255,226,160,.7), transparent),
    radial-gradient(2px 2px at 290px 150px, rgba(215,164,35,.8), transparent) !important;
  animation: wxLantern 26s linear infinite !important; opacity: .55 !important;
}
@keyframes wxLantern { from { transform: translateY(0); } to { transform: translateY(-200px); } }

/* cards: lacquer frame + gold corners */
.card, .glass-card, .panel, .mobile-start-card, .dash-start-countdown-card, [class*="-card"]:not(button) {
  border-image: none;
}
.glass-card, .mobile-start-card, .dash-start-countdown-card {
  position: relative; border: 1px solid rgba(215,164,35,.38) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,236,190,.05) !important;
}
.glass-card::before, .mobile-start-card::before, .dash-start-countdown-card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(215,164,35,.16); border-radius: inherit; pointer-events: none;
}
/* buttons: lacquer red / gold */
.btn-primary { background: linear-gradient(180deg, #d9482f, #a8301d) !important; border-color: #e8b04a !important; color: #fff3d6 !important; }
.btn-primary:hover { background: linear-gradient(180deg, #e65a40, #b83a25) !important; }
.btn-success { background: linear-gradient(180deg, #3aa882, #207a5c) !important; }
/* the existing ship emblems become the pagoda svg (see patches/10_wuxia_svg_audio.py) */
.a4-ship-model, .crew-root svg.ship-icon { filter: drop-shadow(0 0 10px rgba(215,164,35,.45)); }
@media (prefers-reduced-motion: reduce) { .cruise-stars-bg { animation: none !important; } }

/* Autumn duel scene: warm dusk, layered ink mountains and drifting leaves. */
#wx-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  background:linear-gradient(180deg,#2a1410 0%,#5a2515 22%,#9a4a1f 48%,#d98a3a 68%,#f0b765 82%,#f7d28d 100%)}
#wx-scene .wx-sky,#wx-scene .wx-vignette{position:absolute;inset:0}
#wx-scene .wx-vignette{background:radial-gradient(ellipse 130% 100% at 50% 50%,transparent 55%,rgba(18,8,4,.55) 100%)}
#wx-scene .wx-sun{position:absolute;left:64%;bottom:27%;width:min(34vw,340px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff0c4 0 18%,#ffd27a 30%,rgba(255,170,80,.55) 48%,rgba(255,130,50,.18) 64%,transparent 74%);opacity:.95}
#wx-scene .wx-mtn{position:absolute;left:-2%;right:-2%;bottom:0;background-repeat:no-repeat;background-size:100% 100%}
#wx-scene .wx-m3{height:50%;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V170L90 120 170 175 270 70 350 150 450 95 560 170 650 110 760 180 860 85 960 150 1060 105 1200 170V300Z' fill='%238a4a2a'/%3E%3C/svg%3E")}
#wx-scene .wx-m2{height:38%;opacity:.82;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V200L120 130 210 190 340 90 430 170 560 120 690 200 800 110 930 185 1040 140 1200 195V300Z' fill='%234a2616'/%3E%3C/svg%3E")}
#wx-scene .wx-m1{height:23%;opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V120L80 80 180 130 300 60 410 125 540 90 660 140 780 70 900 130 1030 95 1200 135V200Z' fill='%23190d07'/%3E%3C/svg%3E")}
#wx-scene .wx-ground{position:absolute;left:0;right:0;bottom:0;height:8%;background:linear-gradient(180deg,transparent,rgba(10,5,3,.92))}
#wx-scene .wx-mist{position:absolute;left:-30%;width:160%;height:18%;filter:blur(16px);opacity:.75;
  background:linear-gradient(90deg,transparent,rgba(255,236,205,.30) 20%,rgba(255,236,205,.5) 50%,rgba(255,236,205,.28) 80%,transparent);animation:wxMist 38s ease-in-out infinite alternate}
#wx-scene .wx-mist1{bottom:33%}
#wx-scene .wx-mist2{bottom:16%;animation-duration:52s;animation-direction:alternate-reverse;opacity:.6}
@keyframes wxMist{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(6%,0,0)}}
#wx-scene .wx-branch{position:absolute;top:0;right:0;width:min(52vw,520px);height:auto;opacity:1;transform-origin:100% 0;animation:wxBranch 9s ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes wxBranch{from{transform:rotate(-.6deg)}to{transform:rotate(.7deg)}}
#wx-scene .wx-leaves{position:absolute;inset:0}
#wx-scene .wx-leaf{position:absolute;top:-10vh;will-change:transform;animation:wxFall var(--d) var(--dl) linear infinite}
#wx-scene .wx-leaf i{display:block;width:100%;height:100%;background-size:contain;background-repeat:no-repeat;will-change:transform;
  animation:wxSway var(--sw) ease-in-out infinite alternate;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
@keyframes wxFall{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx),118vh,0)}}
@keyframes wxSway{from{transform:translate3d(-20px,0,0) rotate(calc(var(--rot) * -.15)) rotateY(0)}to{transform:translate3d(26px,0,0) rotate(var(--rot)) rotateY(70deg)}}
#wx-scene.wx-paused *{animation-play-state:paused!important}
html{background:#2a1410}
html.wx-has-scene body{background:transparent!important}
@media(prefers-reduced-motion:reduce){#wx-scene *{animation:none!important}#wx-scene .wx-leaves{display:none}}
@media(max-width:600px){#wx-scene .wx-branch{width:74vw}#wx-scene .wx-sun{left:50%;width:58vw;bottom:24%}}

/* Semi-transparent page chrome lets the autumn scene show without covering UI. */
html.wx-has-scene #app.mobile-container{background:transparent!important;box-shadow:none!important}
html.wx-has-scene .glass-panel,html.wx-has-scene .card.glass-panel,html.wx-has-scene .matrix-panel{
  background:rgba(20,12,8,.50)!important;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
html.wx-has-scene input,html.wx-has-scene select,html.wx-has-scene textarea{background:rgba(14,9,6,.82)!important}
html.wx-has-scene .btn-avatar-emoji{background:rgba(20,13,9,.7)}
html.wx-has-scene .hero,html.wx-has-scene .panel{background-color:rgba(30,21,14,.72)!important}
@media(max-width:600px){html.wx-has-scene .glass-panel,html.wx-has-scene .card.glass-panel{background:rgba(20,12,8,.58)!important}}