/* งานภาพหน้าสุ่มและคลังของเท่านั้น ไม่เปลี่ยนสถานะหรือเหตุการณ์ของเกม */
:root { --px-ink: #17151b; --px-line: #87704b; --px-light: #f3daa0; }
/* ห้องแต่งตัว: แบ่งหมวดและจำกัดความกว้างให้อ่านง่ายบนจอใหญ่ */
.hero-atelier { max-width: 1560px; width: 100%; margin-inline: auto; }
.hero-atelier .hero-body { background: #191b22f2; border-radius: 2px; border-color: #b69b6533; padding: 18px; }
.hero-atelier .hero-stage { border-radius: 2px; justify-content: center; border-color: #b69b6588;
  background: linear-gradient(90deg, #dfc38a08 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(#dfc38a08 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 50% 55%, #53635255, transparent 65%), #20232b; }
.hero-atelier .hero-stage::after { content: ''; position: absolute; left: 16%; right: 16%; top: 70%; height: 5px;
  background: #b69b6555; box-shadow: 0 5px 0 #12141b, 0 7px 0 #b69b6522; pointer-events: none; }
.hero-atelier .hero-stage canvas { margin: 0; z-index: 1; }
.hero-atelier .hs-plate { position: absolute; bottom: 0; z-index: 2; padding: 18px 12px 14px; background: #15171fe8; border-top: 1px solid #b69b6544; }
.hero-atelier .seg-tabs { border-radius: 2px; background: #1b1d24; }
.hero-atelier .seg { border-radius: 2px; }
.look-editor { display: flex; flex-direction: column; gap: 14px; max-width: 1160px; margin-inline: auto; }
.look-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 4px; }
.look-heading small { font: 9px 'Press Start 2P', monospace; letter-spacing: 2px; color: #c2a778; }
.look-heading h3 { margin: 5px 0 0; font-size: clamp(20px, 2.4vw, 28px); color: #f3e6ca; }
.look-heading > span { color: #a7c9b8; font-size: 11px; border: 1px solid #a7c9b833; padding: 4px 9px; white-space: nowrap; }
.look-panel { min-width: 0; padding: 16px; background: #25252ddd; border: 1px solid #a88e5b55; box-shadow: inset 0 2px 0 #f5d99b08, 3px 3px 0 #10121855; }
.look-editor h4 { margin: 0 0 14px; font-size: 14px; color: #efe0bd; }
.look-editor h4::after { display: none; }
.look-editor h4 i { display: inline-grid; place-items: center; width: 25px; height: 23px; color: #dfc38a; background: #171920; border: 1px solid #a88e5b55; font: normal 10px monospace; }
.look-editor h4 small { margin-left: auto; font-size: 11px; font-weight: 400; color: #aa9f8d; }
.look-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.look-editor .gender-row { gap: 12px; }
.look-editor .gender-opt { min-width: 0; flex: 1; max-width: 290px; border-radius: 2px; background: #191b22; border: 1px solid #75654c; padding: 8px; }
.look-editor .gender-opt img { border-radius: 0; image-rendering: pixelated; }
.look-editor .gender-opt.on { border-color: #edcf8d; box-shadow: inset 3px 0 0 #edcf8d; background: #383127; }
.look-editor .gender-opt em { border-radius: 0; top: 6px; right: 6px; font-size: 9px; }
.look-editor .gender-opt span { padding-right: 32px; }
.look-identity .tip { font-size: 11px; line-height: 1.6; margin: 12px 0 0; color: #b4ad9c; }
.look-editor .opt-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.look-editor .opt { position: relative; width: 100%; min-width: 0; padding: 5px 5px 7px; border: 1px solid #655b4b; border-radius: 2px; background: #191b22; gap: 6px; }
.look-editor .opt img { width: 100%; max-width: 80px; height: auto; aspect-ratio: 1; border-radius: 0; image-rendering: pixelated; }
.look-editor .opt span { font-size: 11px; line-height: 1.4; color: #bfb5a3; }
.look-editor .opt.on { border-color: #edcf8d; background: #3a3227; box-shadow: inset 0 -3px 0 #edcf8d, 0 0 0 1px #edcf8d22; }
.look-editor .opt.on::after { content: '✓'; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; font-size: 11px; line-height: 16px; color: #211b16; background: #edcf8d; }
.look-editor .opt.on span { color: #ffe9b3; }
.look-editor .look-sub { font-size: 12px; color: #bcb29f; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid #b69b6522; }
.look-face .look-sub:first-of-type { margin-top: 0; }
.look-editor .sw-row { gap: 9px; padding: 3px; }
.look-editor .swatch { width: 28px; height: 28px; border-radius: 2px; border: 2px solid #14161c; box-shadow: inset 0 2px 0 #fff3, 0 0 0 1px #b69b6544; }
.look-editor .swatch.on { outline: 2px solid #f5d99b; outline-offset: 2px; transform: none; box-shadow: inset 0 2px 0 #fff4; }
.look-editor .swatch.pick { font-size: 21px; }
.look-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #b69b6533; padding: 12px 0 2px; }
.look-footer > span { color: #aaa596; font-size: 11px; }
.look-footer .btn { border-radius: 2px; background: #28262b; font-size: 12px; }
.look-editor button:focus-visible, .look-editor .pick:focus-within { outline: 2px solid #a5ead6; outline-offset: 3px; }
@media (max-width: 1100px) {
  .look-columns { grid-template-columns: 1fr; }
  .look-hair .opt-row { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  .look-face .opt-row { grid-template-columns: repeat(4, minmax(0, 90px)); }
}
@media (max-height: 460px), (max-width: 760px) {
  .hero-atelier .hero-body { padding: 10px; }
  .look-editor { gap: 10px; }
  .look-panel { padding: 10px; }
  .look-heading h3 { font-size: 19px; }
  .look-heading > span { display: none; }
  .look-editor .gender-opt { padding: 5px; }
  .look-editor .gender-opt img { width: 38px; height: 38px; }
  .look-editor .gender-opt b { font-size: 12px; }
  .look-editor .gender-opt span { padding-right: 0; }
  .look-editor .gender-opt em { top: -7px; }
  .hero-atelier .hs-plate { padding: 7px; }
  .hero-atelier .hero-stage canvas { max-height: 70%; }
  .look-editor .swatch { width: 30px; height: 30px; }
}
/* มินิแมพกรอบทองแบบพิกเซล คงตำแหน่งและพื้นที่แตะเดิม */
.screen-town .town-map { border-radius: 0; border: 2px solid #b69b65; padding: 3px;
  background: #171e25; box-shadow: inset 0 0 0 1px #ebd39844, 3px 3px 0 #11131bcc, 0 5px 18px #0005; }
.town-map canvas { border-radius: 0; image-rendering: pixelated; }
.town-map .tm-name { border-radius: 0; top: -10px; left: 9px; padding: 2px 7px;
  color: #f3daa0; background: #24262c; border: 1px solid #9b8257; font-size: 9px; letter-spacing: 2px; }
.town-map::before, .town-map::after { width: 4px; height: 4px; border-radius: 0; transform: none; background: #f3daa0; }
.wcard, .fcard, .icard { --frame: #978a72; border-radius: 0; border: 2px solid var(--frame);
  background: #211d24; box-shadow: inset 0 0 0 2px #0f1015, 3px 3px 0 #100e14;
  transition: transform .12s steps(2), filter .12s; }
.wcard.r3, .fcard.r3, .icard.r3 { --frame: #8dbacb; }
.wcard.r4, .fcard.r4, .icard.r4 { --frame: #bc91e7; }
.wcard.r5, .fcard.r5, .icard.r5 { --frame: #f0c96c; border-color: var(--frame);
  background: linear-gradient(180deg, #3a2c21, #211b20); box-shadow: inset 0 0 0 2px #fff0b033, 3px 3px 0 #100e14, 0 0 16px #edb84d25; }
.wc-info, .fc-info { border-top: 2px solid var(--frame); background: #211d24; padding: 8px 10px 10px; gap: 4px; }
.wc-info > b, .fc-info > b { color: #fff0d2; }
.wc-art, .fc-art, .wd-art { background-color: #27222b; }
.wc-art::after, .fc-art::after, .wd-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #080b1818 3px 4px),
    linear-gradient(90deg, #fff1bd0a 1px, transparent 1px) 0 0 / 16px 16px; }
.r5 .wc-art::after, .r5 .fc-art::after, .r5 .wd-art::after {
  background: linear-gradient(#fff2bd, #fff2bd) 18% 24% / 3px 9px no-repeat,
    linear-gradient(#fff2bd, #fff2bd) 18% 24% / 9px 3px no-repeat,
    linear-gradient(#fff2bd, #fff2bd) 82% 68% / 3px 9px no-repeat,
    linear-gradient(#fff2bd, #fff2bd) 82% 68% / 9px 3px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, #080b1818 3px 4px);
  animation: ssrTwinkle 2s steps(3) infinite alternate; }
.wc-art img, .wd-art img, .fc-art img, .icard img { image-rendering: pixelated; filter: drop-shadow(3px 4px 0 #100c1855); }
button.wcard:hover .wc-art img { transform: translateY(-3px); }
.wc-rar, .wc-el, .wc-eq, .wc-sk i, .wd-tags span, .ws-n, .fc-dye, .icard em,
.sc-rates span, .sc-stat, .sc-pity, .sc-mini, .sc-chip, .gc-tag, .gc-pity, .ga-sum span,
.gc-back, .gc-front, .wd-art, .wd-skill, .wdetail2, .icard img, .none-ic { border-radius: 0; }
.wc-rar { padding: 4px 6px; box-shadow: 2px 2px 0 #100e14; }
.wc-el { border: 1px solid #ead19e66; background: #17151bd9; }
.wc-eq { background: #a8dfb3; color: #14271b; box-shadow: 2px 2px 0 #101811; }
.wc-sk i.on, .wd-bar i { background: repeating-linear-gradient(90deg, #eaca82 0 6px, #8f6b38 6px 8px); }
.wdetail2 { border: 2px solid #87704b; background: #211d24eb; box-shadow: inset 0 0 0 3px #100e1466, 4px 4px 0 #100e1466; }
.wd-bar { border-radius: 0; }
.icard { padding: 8px 5px; gap: 3px; }
.icard small { color: #c9bda7; }

/* หออัญมณี: ผนังกระเบื้องและแท่นโชว์ลายพิกเซล */
.sc-banner { --summon: #edc879; border-radius: 0; border: 2px solid #9b8053; padding: 18px;
  box-shadow: inset 0 0 0 4px #110f19, inset 0 0 0 6px #e6c88322, 4px 4px 0 #0f0d15; }
.sc-banner.weapon, .sc-banner.fashion { background:
  linear-gradient(90deg, #e7c78806 2px, transparent 2px) 0 0 / 32px 32px,
  linear-gradient(#e7c78806 2px, transparent 2px) 0 0 / 32px 32px, linear-gradient(115deg, #201b25, #352a30 55%, #191820); }
.sc-banner.fashion { --summon: #e3afd6; border-color: #b58ca9; }
.sc-left h3 { font-style: normal; color: #fff0ce; text-shadow: 3px 3px 0 #100e17; line-height: 1.3; }
.sc-left > small { color: var(--summon); font-size: 9px; letter-spacing: 2px; line-height: 1.6; }
.sc-rates span { padding: 6px 8px; border-bottom: 2px solid #0005; }
.sc-stat { border-left: 3px solid var(--summon); }
.sc-pity { border: 1px solid #a88c59; background: #14131bcc; box-shadow: inset 2px 2px 0 #0006; }
.sp-bar { border-radius: 0; }
.sp-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, #e8c478 0 8px, #9a713e 8px 10px); }
.sc-stage { border-radius: 0; border: 2px solid #d4b879; background:
  linear-gradient(90deg, transparent 10%, #f8d88210 10% 12%, transparent 12% 88%, #f8d88210 88% 90%, transparent 90%),
  radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--elc) 22%, #25212c), #171520 75%);
  box-shadow: inset 0 0 0 4px #15131d, inset 0 0 0 6px #f0d39133, 4px 4px 0 #100e16; }
.sc-stage::before { content: ''; position: absolute; inset: auto 14% 12%; height: 12%; pointer-events: none; z-index: -1;
  background: linear-gradient(#c1a169 0 15%, #64503d 15% 45%, #302936 45% 75%, #15121c 75%);
  clip-path: polygon(12% 0, 88% 0, 88% 15%, 100% 15%, 100% 85%, 88% 85%, 88% 100%, 12% 100%, 12% 85%, 0 85%, 0 15%, 12% 15%); }
.ss-halo { border-radius: 0; border: 2px solid #efd38a44; box-shadow: inset 0 0 0 6px #f3d98a08; animation: pxHalo 24s steps(24) infinite; }
.ss-halo::after { border-radius: 0; border: 2px dashed #efd38a44; }
@keyframes pxHalo { from { transform: translate(-50%, -50%) rotate(45deg); } to { transform: translate(-50%, -50%) rotate(405deg); } }
.ss-art { animation-timing-function: steps(6); filter: drop-shadow(4px 6px 0 #100d1b66); }
.ss-pick { background: #745139; color: #fff0bd; }
.ss-info { background: linear-gradient(transparent, #15121cea 35%); }
.ss-info b { text-shadow: 2px 2px 0 #100e17; }
.sc-mini { border: 2px solid #8f764e; background: #28212b; box-shadow: 2px 2px 0 #100e16; }
.sc-mini.on { border-color: #ffe5a4; box-shadow: inset 0 -3px 0 #e8bd61, 2px 2px 0 #100e16; }
.sc-mini img { background: repeating-linear-gradient(0deg, transparent 0 3px, #0001 3px 4px), radial-gradient(#c9a35633, transparent 70%); }
.sc-chip { border-width: 2px; }
.scout2 .pill, .scout2 .btn, .ga-btns .btn, .wdetail2 .btn { border-radius: 0; box-shadow: inset 0 2px 0 #fff2, 0 3px 0 #100e16; }
.scout-btn { border: 2px solid #9c855c; background: #302732; color: #fff0d2; }
.scout-btn.primary { border-color: #ffe6a7; background: linear-gradient(#f0d795 0 48%, #dcb870 48%); color: #30201a; text-shadow: none; }
.scout-btn.primary small { color: #483326; }
.scout-btn:disabled { filter: grayscale(.7); opacity: .5; }
.wcard:focus-visible, .fcard:focus-visible, .sc-mini:focus-visible, .scout2 button:focus-visible { outline: 3px solid #a5f2db; outline-offset: 3px; }

/* หลังการ์ดเป็นตราคริสตัล ลายตารางคมชัด */
.gc-back { border: 2px solid #d5b873; background:
  repeating-linear-gradient(0deg, transparent 0 7px, #ebcb8010 7px 8px),
  repeating-linear-gradient(90deg, transparent 0 7px, #ebcb8010 7px 8px), #211d30;
  box-shadow: inset 0 0 0 4px #12101a, inset 0 0 0 6px #a98b55, 4px 4px 0 #0b0a10; }
.gc-back::before { content: ''; position: absolute; width: 42%; aspect-ratio: 1; border: 3px solid #d5b873; transform: rotate(45deg); background: #bda06716; box-shadow: inset 0 0 0 4px #211d30, inset 0 0 0 6px #d5b87355; }
.gc-back span { position: relative; text-shadow: 3px 3px 0 #100e16; }
.ga-circle i { border-radius: 0; animation-timing-function: steps(24); }
.ga-circle i:nth-child(2) { border-style: dashed; }
.ga-orb { border-radius: 0; clip-path: polygon(35% 0,65% 0,65% 15%,85% 15%,85% 35%,100% 35%,100% 65%,85% 65%,85% 85%,65% 85%,65% 100%,35% 100%,35% 85%,15% 85%,15% 65%,0 65%,0 35%,15% 35%,15% 15%,35% 15%); }
.gc-tag.new { background: #a84061; box-shadow: 2px 2px 0 #100e16; }
@media (max-width: 900px), (max-height: 460px) {
  .sc-banner { padding: 10px; gap: 10px; }
  .sc-left h3 { font-size: clamp(19px, 4.6vh, 29px); }
  .sc-left { gap: 6px; }
  .sc-stage::before { inset: auto 54% 8% 8%; }
  .ss-info { background: none; }
  .wc-info, .fc-info { padding: 5px 7px 7px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .scout2 *, .gacha *, .wcard, .fcard, .wcard *, .fcard *, .wdetail2 * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wc-art::before, .fc-art::before, .wd-art::before { display: none; }
}
/* จอแนวนอนเตี้ย: กันแถวของตัวอย่างถูกตัดและคงปุ่มสุ่มไว้ให้กดได้ */
@media (max-height: 460px) {
  .scout2 { overflow-y: auto; }
  .sc-banner { flex: none; min-height: 226px; grid-template-rows: minmax(150px, 1fr) auto; }
  .sc-side { min-width: 0; gap: 6px; }
  .sc-mini { width: 38px; flex-shrink: 0; }
  .sc-mini img { padding: 3px; }
  .sc-chip { width: 28px; height: 28px; }
  .scout-btns { position: sticky; bottom: 0; z-index: 5; padding: 4px 0; background: #14121bea; }
}

/* เมือง: แผงทองเก่า ไอคอนพิกเซล และพื้นที่กลางจอสำหรับฉาก */
.screen-town { --town-edge: #ae9060; --town-panel: linear-gradient(145deg, #302b23ef, #141b19ed); }
.screen-town .town-dock { gap: 5px; padding: 7px; border-radius: 3px; border: 1px solid var(--town-edge); background: var(--town-panel); box-shadow: inset 0 0 0 3px #111713, 0 4px 0 #0b100dcc, 0 10px 24px #0005; }
.town-dock .qk { width: clamp(48px, 8vw, 70px); min-height: 58px; padding: 7px 4px 5px; gap: 4px; border: 1px solid #c6ac7130; border-radius: 1px; background: linear-gradient(#ffffff08, #00000018); }
.town-dock .qk i { color: #dec99a; height: 24px; line-height: 1; }
.town-dock .qk svg { display: block; width: 24px; height: 24px; }
.town-dock .qk small { color: #e5dcc6; font-size: 11px; }
.town-dock .qk + .qk::before { display: none; }
.town-dock .qk:hover { border-color: #f0d391; background: #b8944633; transform: translateY(-2px); }
.town-dock .qk:active { transform: translateY(1px); }
.town-dock .qk-gacha i { color: #aee4de; }
.town-dock .qk-adv { border-color: #d2ab6e99; background: linear-gradient(#765337, #493323); }
.town-dock .qk-adv i { color: #ffe2a4; filter: drop-shadow(0 2px 0 #0008); }
.town-dock .qk em { top: -5px; right: -3px; border-radius: 2px; border: 1px solid #c2f5c7; background: #477858; color: #fff6d7; box-shadow: 2px 2px 0 #111; }
/* ป้ายชื่อเมือง: ไม่มีพื้นหลัง อ่านได้ด้วยเงาตัวหนังสือ */
.screen-town .town-loc { top: 10px; padding: 7px 22px; border-radius: 2px; border: 0; background: none; box-shadow: none; text-shadow: 0 2px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6); }
.screen-town .town-loc b { font-size: clamp(14px, 2.5vh, 18px); color: #f4dfad; }
.screen-town .town-loc small { margin-top: 4px; color: #b8c8b6; }
.screen-town .town-map { border-radius: 2px; background: var(--town-panel); padding: 6px; border-color: #ae9060; }
.screen-town .town-map canvas { border-radius: 0; }
.screen-town .tm-name { border-radius: 0; padding: 3px 8px; color: #eee1bc; background: #39483a; border: 1px solid #ae9060; }
.screen-town .town-qt { padding: 9px 11px; border-radius: 2px; border-color: #ae906055; border-left: 3px solid #ae9060; background: linear-gradient(90deg, #17221ced, #17221cc4); gap: 6px; }
.screen-town .town-qt > b { padding-bottom: 5px; border-bottom: 1px solid #d9ba7933; letter-spacing: .5px; }
.screen-town .town-qt .ok span { color: #b1dfb8; }
.screen-town .town-party { border-radius: 2px; background: #17221ce8; border-left: 2px solid #7da98a; }
.screen-town .town-top .icon-btn { border-radius: 2px; border: 1px solid #ae9060; background: #22291fec; }
/* HUD ในเมือง: ไม่มีแผง เหลือเงาไล่จางโปร่งแสงด้านหลัง (จางกว่าในด่าน) */
#hud.town .town-pm { border: 0; background: none; box-shadow: none; }
#hud.town .town-pm::before { background: linear-gradient(90deg, rgba(8, 6, 5, .45), rgba(8, 6, 5, .25) 55%, transparent); }
#hud.town .pm-badge { border-radius: 1px; color: #ffe4ab; background: #55472e; border-color: #ae9060; }
#hud.town .pm-name { color: #fff0cf; }
#hud.town .pm-sub { color: #c2c5b4; }
#hud.town .pm-bar.hp .fill { background: linear-gradient(90deg, #568568, #a4c895); }
#hud.town .pm-bar.exp .fill { background: linear-gradient(90deg, #937343, #e5c78a); box-shadow: none; }
#hud.town #joy { background: radial-gradient(circle, #aa946515, #18251d55); border-color: #ccbc8955; }
#hud.town #joy::before { border-color: #d8c89144; }
#hud.town #joy .knob { background: radial-gradient(circle at 35% 30%, #b6a98399, #485a46aa); border-color: #e0cf9b88; }
#hud.town .ctl.atk { border-color: #cbb77c99; background: radial-gradient(circle at 40% 25%, #59694e, #202e23); box-shadow: inset 0 0 0 4px #101a1844, 0 3px 0 #101a1888; }
.screen-town button:focus-visible { outline: 2px solid #b6edcf; outline-offset: 3px; }
@media (max-width: 1000px) {
  .screen-town .town-loc { top: 88px; left: auto; right: calc(10px + var(--safe-r)); transform: none; padding: 4px 10px; }
  .screen-town .town-map { top: 124px; width: 210px; }
  .screen-town .town-loc small { display: none; }
}
@media (max-height: 460px) {
  .screen-town .town-dock { bottom: calc(5px + var(--safe-b)); padding: 4px; gap: 3px; }
  .town-dock .qk { width: 46px; min-height: 46px; padding: 4px 2px; gap: 2px; }
  .town-dock .qk i, .town-dock .qk svg { width: 20px; height: 20px; }
  .town-dock .qk small { font-size: 9px; }
  .screen-town .town-loc { top: 46px; right: calc(10px + var(--safe-r)); left: auto; transform: none; padding: 3px 8px; }
  .screen-town .town-map { top: 78px; height: 55px; width: 190px; }
  .screen-town .town-qt { padding: 5px 8px; gap: 3px; max-width: 210px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .town-dock .qk { transition: none; } }

/* ฉากโหลดเต็มจอ: ขยายวิวตามอัตราส่วนจอและวางข้อความเหนือภาพ */
.loading .ld-box.ld-journey { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; padding: 0; display: block; border: 0; background: #152328; box-shadow: none; }
.ld-heading { position: absolute; z-index: 2; top: max(24px, 4vh); left: calc(5vw + var(--safe-l)); right: calc(5vw + var(--safe-r)); display: flex; justify-content: space-between; align-items: center; color: #f0dfbb; font-size: clamp(12px, 1.6vh, 18px); letter-spacing: 1px; text-shadow: 0 2px 4px #000; }
.ld-heading span:first-child { font-size: clamp(10px, 1.4vh, 16px); letter-spacing: 3px; }
.ld-view { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; overflow: hidden; }
.ld-journey .ld-view canvas { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; image-rendering: pixelated; }
.ld-view::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #08141d55, transparent 22%, transparent 45%, #09171488), linear-gradient(90deg, #09151488, transparent 65%); }
.ld-travel { position: absolute; z-index: 1; left: calc(5vw + var(--safe-l)); top: max(55px, 9vh); padding: 3px 8px; font-size: 11px; letter-spacing: 1px; color: #d0d9cb; border-left: 2px solid #d7bd82; background: #14242166; }
.ld-info { position: absolute; z-index: 2; left: calc(7vw + var(--safe-l)); bottom: calc(8vh + var(--safe-b)); width: min(560px, 46vw); display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; }
.ld-info > small { color: #e0d8bd; font-size: clamp(13px, 2vh, 22px); text-shadow: 0 2px 4px #000; }
.ld-info > b { color: #ffebbb; font-size: clamp(26px, 5.5vh, 64px); line-height: 1.25; text-shadow: 0 3px 0 #27291f, 0 4px 16px #0008; }
.ld-info .ld-bar { width: 100%; height: 8px; margin: 12px 0 5px; clip-path: none; border-color: #bba16a; background: #172421b3; }
.ld-info .ld-bar i { background: repeating-linear-gradient(90deg, #dfc483 0 12px, #b49b62 12px 14px); box-shadow: 0 0 10px #efcf8055; }
.ld-info .ld-tip { min-height: 2.5em; max-width: 100%; line-height: 1.7; font-size: clamp(11px, 1.5vh, 16px); color: #e3e3cf; text-shadow: 0 2px 4px #000; }
@media (max-height: 460px) {
  .ld-heading { top: 14px; }
  .ld-travel { top: 40px; font-size: 10px; }
  .ld-info { bottom: calc(5vh + var(--safe-b)); width: 46vw; gap: 3px; }
  .ld-info > b { font-size: 25px; }
  .ld-info .ld-bar { margin: 6px 0 3px; }
  .ld-info .ld-tip { font-size: 10px; }
}

/* นาฬิกาและทางเข้าสังคม แยกจากรายชื่อผู้เล่นในช่อง */
.game-clock { position: absolute; z-index: 25; bottom: calc(4px + var(--safe-b)); left: 50%; transform: translateX(-50%); padding: 2px 12px; border: 1px solid #b49b6155; background: #14211de0; color: #e4d5ad; font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
/* มี HUD ซ้ายบน (เมือง/ด่าน) = นาฬิกาต่อท้าย HUD (ตำแหน่งตั้งใน UI.updateClock) */
.game-clock.at-hud { bottom: auto; transform: none; }
/* พื้นหลังนาฬิกาเท่ากับ HUD ซ้ายบน: ในด่าน = เงาโปร่งโทนอุ่นแบบ .pm.hero · ในเมือง = พื้นจาง */
.game-clock.at-hud { border: 0; border-radius: 10px; background: rgba(8, 6, 5, .58); text-shadow: 0 2px 2px rgba(0, 0, 0, .85); }
.game-clock.at-hud.town { background: rgba(8, 6, 5, .45); }
/* ปุ่มเพื่อน & ปาร์ตี้ บนแถบบน หน้าปุ่มผู้เล่นในช่องนี้ */
#net-chip .net-social, .net-town .net-social { border-radius: 3px; background: linear-gradient(#3a3d2eec, #1b2922ef); }
.net-players { display: grid; grid-template-columns: 28px auto; align-items: center; column-gap: 7px; padding: 5px 12px 5px 7px; border: 1px solid #bca16b99; border-radius: 3px; background: linear-gradient(#33372bef, #18271fee); text-align: left; }
.net-players > span { grid-row: span 2; font-size: 26px; color: #d0dcc2; text-align: center; }
.net-players b { color: #f2dfb4; font-size: 13px; }
.net-players small { color: #bdc9b6; font-size: 10px; }
.net-players:hover { border-color: #e5d39c; background: #3f4c35; }
.net-players:focus-visible { outline: 2px solid #b6edcf; outline-offset: 3px; }
@media (max-width: 900px), (max-height: 460px) {
  .net-players { padding: 4px 7px; grid-template-columns: 20px auto; column-gap: 4px; }
  .net-players > span { font-size: 21px; }
  .net-players b { font-size: 11px; }
  .net-players small { font-size: 9px; }
  .game-clock { font-size: 10px; padding: 0 9px; line-height: 16px; }
}
.net-players > span svg { display: block; width: 25px; height: 25px; }
@media (max-width: 900px), (max-height: 460px) { .net-players > span svg { width: 20px; height: 20px; } }
@media (max-width: 1000px) and (min-height: 461px) { .screen-town .town-map { top: 132px; } }
@media (max-height: 460px) { .screen-town .town-map { top: 100px; } }

/* โรงฝึก: มิเตอร์ชัดเจนและแถบเครื่องมืออยู่รวมกัน */
#hud.training #train-bar { left: calc(12px + var(--safe-l)); top: 92px; transform: none; width: min(680px, calc(100vw - 24px - var(--safe-l) - var(--safe-r))); display: grid; grid-template-columns: minmax(155px, .9fr) minmax(280px, 1.5fr); gap: 0; padding: 8px; background: rgba(8, 6, 5, .58); border: 0; border-radius: 12px; box-shadow: none; text-shadow: 0 2px 2px rgba(0, 0, 0, .85); }
.training .tb-weapon { padding: 5px 8px; border: 0; border-right: 1px solid #d8be7e33; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
.training .tb-weapon img { width: 42px; height: 42px; border-radius: 1px; image-rendering: pixelated; }
.training .tb-weapon b { max-width: 140px; font-size: 14px; color: #f5e3bb; }
.training .tb-weapon small { font-size: 10px; margin-bottom: 4px; color: #b7bba8; }
.training .tb-weapon i { font-size: 10px; padding: 3px 7px; border-radius: 1px; }
.training .tb-meter { border: 0; background: none; box-shadow: none; backdrop-filter: none; padding: 2px 6px; justify-content: space-around; min-width: 0; }
.training .tb-meter span { min-width: 0; flex: 1; padding: 0 6px; }
.training .tb-meter b { font-family: 'Kanit', sans-serif; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.1; color: #eee8d4; }
.training .tb-meter small { font-size: 10px; color: #bbc3b1; }
.training .tb-meter .m-dps { font-size: 25px; color: #f6d58f; }
.training .tb-opts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 6px; border-top: 1px solid #d8be7e22; padding-top: 7px; margin-top: 6px; }
.training .tb-opt { display: flex; align-items: center; gap: 6px; border-radius: 1px; padding: 4px 9px; color: #d8cfbc; background: rgba(255, 236, 200, .06); border-color: rgba(214, 178, 112, .3); box-shadow: none; }
.training .tb-opt i { width: 6px; height: 6px; background: #6c7767; box-shadow: 0 0 0 1px #0a1616; }
.training .tb-opt.on { background: #354d37; border-color: #94be91; color: #deefd0; }
.training .tb-opt.on i { background: #bbe99e; }
#hud.training #hud-right [data-act="trw"] { display: none; }
.training .tb-opt:focus-visible, .training .tb-weapon:focus-visible { outline: 2px solid #b7e3c6; outline-offset: 2px; }
/* คลังอาวุธฝึก: รายการฝั่งซ้ายและตัวอย่างพร้อมสกิลฝั่งขวา */
.modal.training-picker { width: min(1120px, 96vw); height: min(720px, 94vh); max-height: 94vh; overflow: hidden; display: flex; flex-direction: column; padding: 18px; border-radius: 3px; border: 1px solid #bba26e; background: linear-gradient(130deg, #292e25fa, #111e1cfa); }
.tr-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-shrink: 0; }
.tr-heading small { font-size: 9px; letter-spacing: 2px; color: #bca97b; }
.tr-heading h3 { margin: 2px 0 0; color: #f5e5be; font-size: 24px; }
.tr-heading .btn { padding: 7px 16px; border-radius: 2px; }
.tr-note { font-size: 12px; color: #bac2af; margin: 8px 0 12px; flex-shrink: 0; }
.tr-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; flex-shrink: 0; }
.tr-filters button { padding: 6px 14px; border: 1px solid #a7966b55; border-radius: 2px; color: #c7ccb8; background: #0d191a77; font-size: 12px; }
.tr-filters button[aria-pressed="true"] { border-color: #e3c68a; color: #fff0c2; background: #6b573544; box-shadow: inset 0 -2px #c9ad71; }
.tr-picker-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; min-height: 0; flex: 1; }
.tr-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-content: start; padding: 3px 7px 8px 3px; }
.tr-card { display: flex; flex-direction: column; min-width: 0; padding: 6px; gap: 5px; border: 1px solid #8d967044; border-top-color: var(--rar); border-radius: 2px; text-align: left; background: #0d1919a6; }
.tr-card-art { position: relative; display: grid; place-items: center; width: 100%; height: 84px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--elc) 18%, transparent), transparent 75%); }
.tr-card img { width: 74px; height: 74px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 #0004); }
.tr-card-art > i { position: absolute; top: 1px; right: 1px; color: var(--rar); font-style: normal; font-size: 10px; }
.tr-card > b { font-size: 12px; font-weight: 600; color: #eee4ce; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tr-card > small { display: flex; align-items: center; gap: 4px; color: #aebba6; font-size: 10px; }
.tr-card small i { display: inline-block; width: 5px; height: 5px; }
.tr-card small span { margin-left: auto; font-size: 9px; color: #c6bd9b; }
.tr-card:hover, .tr-card.selected { border-color: var(--rar); background: #bbc79810; }
.tr-card.selected { box-shadow: inset 0 0 0 1px var(--rar); }
.tr-detail { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 12px; border-left: 1px solid #b69d6a44; background: #0d191966; overflow-y: auto; }
.tr-detail-art { display: grid; position: relative; place-items: center; min-height: 120px; height: 160px; flex-shrink: 0; border: 1px solid #b7a27333; background: radial-gradient(color-mix(in srgb, var(--elc) 23%, transparent), transparent 70%); }
.tr-detail-art img { width: 140px; height: 140px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(4px 5px 0 #0005); }
.tr-detail-art span { position: absolute; right: 9px; top: 7px; color: var(--rar); font-weight: 800; }
.tr-detail > small { color: #bcc8b0; font-size: 11px; }
.tr-detail h4 { margin: 0; color: #f2db9f; font-size: 19px; }
.tr-skills { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tr-skills > div { border-top: 1px solid #b8a16b33; padding-top: 7px; }
.tr-skills b { font-size: 12px; color: #e8e2cd; }
.tr-skills em { float: right; font-size: 10px; font-style: normal; color: #a7d2c2; }
.tr-skills small { display: block; font-size: 11px; color: #aebba8; line-height: 1.6; }
.tr-detail > .btn { position: sticky; bottom: 0; flex-shrink: 0; margin-top: 9px; width: 100%; padding: 10px; border-radius: 2px; }
.training-picker button:focus-visible { outline: 2px solid #b4ead0; outline-offset: 2px; }
@media (max-height: 460px) {
  #hud.training #train-bar { top: 72px; padding: 4px 6px; width: min(640px, calc(100vw - 24px)); }
  .training .tb-weapon img { width: 30px; height: 30px; }
  .training .tb-weapon b { font-size: 12px; }
  .training .tb-meter b { font-size: 16px; }
  .training .tb-meter .m-dps { font-size: 20px; }
  .training .tb-opts { margin-top: 3px; padding-top: 4px; }
  .training .tb-opt { font-size: 9px; padding: 3px 7px; }
  .modal.training-picker { padding: 9px 12px; }
  .tr-heading h3 { font-size: 19px; }
  .tr-heading small { display: none; }
  .tr-note { margin: 4px 0 6px; font-size: 10px; }
  .tr-filters { margin-bottom: 6px; }
  .tr-filters button { padding: 3px 12px; font-size: 11px; }
  .tr-picker-body { grid-template-columns: minmax(0, 1fr) 230px; gap: 8px; }
  .tr-catalog { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .tr-card-art { height: 60px; }
  .tr-card img { width: 56px; height: 56px; }
  .tr-card > b { font-size: 11px; }
  .tr-detail { padding: 8px; gap: 4px; }
  .tr-detail-art { min-height: 76px; height: 76px; }
  .tr-detail-art img { width: 72px; height: 72px; }
  .tr-detail h4 { font-size: 16px; }
  .tr-detail > .btn { padding: 7px; font-size: 12px; }
}
@media (max-width: 620px) {
  #hud.training #train-bar { grid-template-columns: 1fr; width: calc(100vw - 24px); }
  .training .tb-weapon { border: 0; }
  .training .tb-meter { min-height: 38px; }
  .tr-picker-body { grid-template-columns: minmax(0, 1fr) 42%; gap: 6px; }
  .tr-catalog { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }
  .tr-filters button { padding: 4px 7px; }
}
.modal.training-picker, .modal-bg:has(.training-picker) { animation: none; }
/* บันทึกการเดินทาง: อุปกรณ์ ดันเจี้ยน และข้อมูลก่อนออกผจญภัย */
.region-icon {position:relative;flex:none;width:62px!important;height:42px;overflow:hidden;border:1px solid #a68d57;background:#18242b;box-shadow:inset 0 0 0 2px #111}
.region-icon img {width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.mtab {gap:11px!important;min-height:68px;padding:8px!important;border-left:3px solid var(--mc)!important;background:linear-gradient(110deg,#28302d,#191b22)!important}
.mtab.on {background:linear-gradient(110deg,#4a4631,#24282a)!important;box-shadow:inset 0 0 0 1px #d8bf77,0 3px 12px #0005}
.map-head {position:relative;overflow:hidden;isolation:isolate;min-height:180px;background:#19232be6!important}
.map-landscape {position:absolute;inset:0 0 0 auto;width:55%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:.28;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000)}
.dg-card {position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--mc) 65%,#333)!important;border-radius:8px!important;background:linear-gradient(#273037,#141b21)!important;padding:0 16px 16px!important;box-shadow:0 6px 20px #0005!important}
.dg-landscape {width:calc(100% + 32px);margin:0 -16px;height:115px;object-fit:cover;image-rendering:pixelated;border-bottom:1px solid #c5ad6d66}
.dg-card header {position:relative;margin-top:-30px;align-items:flex-end!important;gap:12px!important}
.dg-card header>div {padding-top:32px}
.dg-card header i.dg-boss {width:78px;height:78px;flex:none;background:linear-gradient(#263943,#141e28)!important;border:1px solid var(--mc);box-shadow:0 4px 12px #0008}
.dg-boss img {width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.dg-card p {min-height:42px;line-height:1.6}
.dg-floor {min-height:83px;flex:1;background:linear-gradient(135deg,#364047,#1b232a)!important;border:1px solid #8e8264!important;border-radius:4px;text-align:left!important;padding:10px!important}
.dg-floor:hover:not(:disabled) {border-color:#f6d98d!important;transform:translateY(-2px);box-shadow:0 3px 12px #0008}
.dg-floor b {color:#ffe4a5}.dg-floor em {opacity:.7}
.dg-card.upgrade .dg-landscape {height:90px}.dg-card.upgrade header {max-width:600px}
.prep-banner {position:relative;overflow:hidden;margin:-8px -8px 18px;min-height:130px;padding:26px 22px;border:1px solid #a18e64;background:#18242a;display:flex;align-items:end}
.prep-banner>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:.5;mask-image:linear-gradient(90deg,transparent,#000)}
.prep-banner>div {position:relative}.prep-banner h3{margin:8px 0!important;text-shadow:0 2px 4px #000}.prep-banner small{color:#e4c888}
.enemy-list {display:grid!important;gap:8px!important}
.enemy-intel {display:flex;align-items:center;gap:10px;padding:8px;background:#1b2429;border:1px solid #536063;border-radius:4px}
.enemy-intel.boss {background:linear-gradient(110deg,#422b31,#232229);border-color:#b67563}
.enemy-intel>img {width:76px;height:64px;object-fit:contain;image-rendering:pixelated;flex:none}
.enemy-intel b,.enemy-intel small {display:block}.enemy-intel small{color:#bdaf91;font-size:11px}.enemy-intel b{font-size:14px}.enemy-intel p{font-size:12px;color:#dfd4b9;margin:5px 0;line-height:1.5}
.prep>div {min-width:0}.prep .pow-cmp{padding:16px;border-radius:4px}.prep .modal-btns{position:sticky;bottom:0}
.eq-doll {gap:10px!important}.eq-slot {min-height:100px!important;border:1px solid #7c735b!important;border-radius:5px;background:linear-gradient(120deg,#303a3b,#1c2429)!important;padding:12px!important;gap:14px!important}
.eq-slot.empty {border-style:solid!important;background:linear-gradient(120deg,#293033,#1c2228)!important}
.eq-slot .eq-ic {width:72px!important;height:72px!important;flex:none;border:1px solid #a7926255!important;background:radial-gradient(#4a5148,#20272d)!important}
.eq-slot .eq-ic img {width:100%;height:100%;image-rendering:pixelated}.eq-empty-art{opacity:.28;filter:grayscale(1)}
.eq-slot.sel {border-color:#ffe1a1!important;box-shadow:inset 0 0 0 1px #ffe1a188,0 0 14px #ffdc7033}
.eq-tx small {color:#d7bd81!important;letter-spacing:.08em}.eq-tx b{font-size:14px!important}.eq-tx i{margin-top:6px}
.gear-kind{font-size:10px!important;font-style:normal}.wcard.gear .wc-art{background:radial-gradient(ellipse at 50% 65%,#8c9c8c35,transparent 65%)}
@media(max-width:900px){.dg-landscape{height:85px}.dg-card{padding:0 10px 10px!important}.dg-landscape{width:calc(100% + 20px);margin:0 -10px}.eq-slot{min-height:78px!important;padding:8px!important}.eq-slot .eq-ic{width:52px!important;height:52px!important}.prep-banner{min-height:95px;padding:14px}.enemy-intel>img{width:58px;height:52px}.region-icon{width:44px!important;height:34px}.mtab{gap:7px!important}.dg-boss{display:none}}
/* ปุ่มเริ่มต่อสู้ยังเข้าถึงได้เมื่อเลื่อนข้อมูลบนจอเตี้ย */
.adventure-prep>.modal-btns{position:sticky;bottom:-16px;margin:12px -8px -8px;padding:12px 8px;background:linear-gradient(#27231bf2,#191a18);border-top:1px solid #9c865655;z-index:2}
@media(max-width:900px){.map-head{min-height:115px}.dg-card.upgrade .dg-landscape{object-fit:contain;background:#17263c}.adventure-prep .prep-banner{min-height:72px}}
/* ภาพหัวเรื่องอยู่ด้านขวาเพื่อเห็นสถานที่ครบ ไม่ขยายพิกเซลจนเหลือแต่ผนัง */
.prep-banner>img{left:auto;width:55%;object-fit:cover;object-position:center;opacity:.65}
.dg-card.upgrade{display:grid;grid-template-columns:170px 1fr;column-gap:18px;padding:16px!important}
.dg-card.upgrade .dg-landscape{grid-column:1;grid-row:1/5;width:100%;height:100%;min-height:180px;max-height:280px;margin:0;object-fit:cover;border:1px solid #699ea666}
.dg-card.upgrade header,.dg-card.upgrade p,.dg-card.upgrade .dg-drops,.dg-card.upgrade .dg-floors{grid-column:2}
.dg-card.upgrade header{margin-top:0;align-items:center!important}.dg-card.upgrade header>div{padding-top:0}.dg-card.upgrade .dg-boss{width:54px!important;height:54px!important}.dg-card.upgrade p{min-height:0}
@media(max-width:900px){.dg-card.upgrade{grid-template-columns:100px 1fr;gap:10px}.prep-banner>img{width:50%}.dg-card.upgrade .dg-landscape{min-height:150px}}
/* หออัญมณี: โลหะสลัก แท่นหิน และผ้ากำมะหยี่ */
.sc-banner{position:relative;isolation:isolate;border:1px solid #c7a66a;border-radius:10px;padding:24px;gap:24px;box-shadow:inset 0 0 0 5px #15141a,inset 0 0 0 6px #c7a66a55,0 14px 36px #0008}
.sc-banner.weapon,.sc-banner.fashion{background:radial-gradient(ellipse at 50% 0,#b7914c20,transparent 65%),repeating-linear-gradient(90deg,#06080b00 0 31px,#e3ba6b05 32px 33px),linear-gradient(115deg,#171a20,#302833 55%,#14191e)}
.sc-banner.fashion{background:radial-gradient(ellipse at 45% 0,#df9fb329,transparent 60%),linear-gradient(110deg,#201b26,#3b2838 55%,#171b25)}
.sc-engraving{position:absolute;left:50%;top:0;transform:translate(-50%,-40%);color:#ffe0a1;background:#272329;padding:0 20px;font-size:25px;z-index:3;pointer-events:none}
.sc-eyebrow{font:10px Georgia,serif;letter-spacing:3px;color:#d4b579;border-bottom:1px solid #cbae7044;padding-bottom:14px;margin-bottom:8px}
.sc-left h3{font-size:clamp(25px,4.4vh,43px);letter-spacing:.015em;color:#ffedc4;text-shadow:0 2px 0 #604828,0 4px 18px #000}
.sc-left>small{letter-spacing:1px;color:#d5bb93}.sc-rates{gap:6px}.sc-rates span{border:1px solid #aa906955;border-radius:3px;background:#15171e;padding:7px 10px}
.sc-pity{border:1px solid #bb9a60;border-radius:5px;background:linear-gradient(135deg,#393025,#171a20);padding:12px;box-shadow:inset 0 0 0 3px #15182055}
.sp-bar i{background:linear-gradient(90deg,#9e7542,#e5c984,#fff0be);box-shadow:0 0 10px #e4bf7366}
.sc-stage{border-radius:50% 50% 6px 6px / 24% 24% 6px 6px;border:1px solid #e5c99288;box-shadow:inset 0 0 0 5px #171a22,inset 0 0 0 6px #c7a66a55,0 0 38px #d6ac5a0c;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--elc) 15%,#21212b),#15181f 75%)}
.sc-stage::before{inset:auto 12% 17%;height:11%;background:linear-gradient(#e9d5a9 0 5%,#9b8058 5% 15%,#49414a 15% 30%,#282731 30% 70%,#b69b69 70% 74%,#171922 74%);z-index:0;opacity:.75}
.ss-halo{border:1px solid #d6b87b66;border-radius:50%;box-shadow:0 0 0 12px #e9ce8305,inset 0 0 0 8px #e9ce8308;animation:deluxeHalo 36s linear infinite}
.ss-halo::after{border-radius:50%;border:1px dashed #e8d19c55}
@keyframes deluxeHalo{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.ss-art{position:relative;z-index:1;animation-timing-function:ease-in-out;filter:drop-shadow(0 10px 4px #0008) drop-shadow(0 0 13px #f3d39425)}
.ss-pick{background:linear-gradient(110deg,#b6975c,#f3d997,#ad8849);color:#302518;letter-spacing:2px;border:1px solid #ffe5ae;border-radius:2px}
.ss-info{z-index:2;padding-bottom:12px}.ss-info b{color:#fff0ce}.ss-stars{letter-spacing:5px;text-shadow:0 0 9px #f1c45f}
.sc-mini{border-width:1px;border-radius:4px;background:linear-gradient(140deg,#3d3640,#1b2027);box-shadow:inset 0 0 0 3px #b8954e12,0 4px 8px #0004}
.sc-mini.on{border-color:#ffe4a3;box-shadow:inset 0 0 0 2px #c7a26266,0 0 16px #e1b56c22}.sc-mini img{filter:drop-shadow(0 3px 2px #0008)}
.sc-chip{border-width:1px;border-radius:3px;background:#29232f}.sc-side h4{padding-bottom:8px;border-bottom:1px solid #c7a26244}
.scout2 .pill,.scout2 .btn{border-radius:4px}.scout-btn{border-width:1px;background:linear-gradient(#3e3734,#25242a);box-shadow:inset 0 0 0 3px #dcc18e11,0 4px 0 #100e16}
.scout-btn.primary{background:linear-gradient(120deg,#b18a4d,#f5dc9e 42%,#e4bf75 65%,#b88a47);border:1px solid #ffe8b0;box-shadow:inset 0 0 0 3px #fff4c433,0 4px 0 #654528,0 0 22px #dfb96f22}
.ss-pair{display:flex;align-items:center;justify-content:center;gap:4px;width:94%;height:62%;position:relative;z-index:1}
.ss-pair figure{margin:0;width:48%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end}
.ss-pair img{width:100%;height:88%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 3px #0007)}
.ss-pair figcaption{font-size:11px;letter-spacing:1px;padding:3px 12px;color:#ecd2ac;background:#1a1721bb;border:1px solid #c8a57644}
@media(max-width:900px){.sc-banner{padding:12px;gap:12px}.sc-eyebrow{font-size:8px;letter-spacing:1px;margin:0;padding-bottom:5px}.sc-left h3{font-size:25px}.sc-pity{padding:7px}.ss-pair{height:95%;width:50%;flex:none}.ss-pair img{height:83%}.ss-pair figcaption{font-size:9px;padding:1px 5px}.sc-stage::before{inset:auto 51% 7% 7%}.sc-engraving{font-size:17px}.sc-stage{border-radius:5px}}
@media(prefers-reduced-motion:reduce){.ss-halo,.ss-art{animation:none!important}}
/* ป้ายอยู่ภายในซุ้ม แสดงระดับและของเด่นได้แม้กรอบโค้ง */
.sc-stage .ss-pick{top:20px;left:50%;width:auto;padding:4px 12px;transform:translateX(-50%);font-size:9px;z-index:4}
.sc-stage .ss-rar{top:49px;right:50%;transform:translateX(50%);z-index:4}
@media(max-width:900px){.sc-stage .ss-pick{top:8px;padding:2px 6px;font-size:7px}.sc-stage .ss-rar{top:29px;font-size:8px!important}}
/* ห้องจัดแสดงธาตุ: ชั้นแสง วงโคจร และอนุภาคไม่รับการคลิก */
.ss-element-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--elc) 21%,transparent),transparent 65%),repeating-linear-gradient(90deg,transparent 0 16%,#e4c68708 16.2% 16.4%,transparent 16.6% 33%)}
.ss-element-scene::after{content:'';position:absolute;inset:15% 5% 21%;background:conic-gradient(from 30deg,transparent,color-mix(in srgb,var(--elc) 16%,transparent),transparent 28%,transparent 50%,color-mix(in srgb,var(--elc) 12%,transparent),transparent 78%);filter:blur(10px);animation:relicRays 28s linear infinite}
.ss-orbit{position:absolute;left:16%;top:19%;width:68%;height:52%;border:1px solid color-mix(in srgb,var(--elc) 55%,transparent);border-radius:50%;box-shadow:0 0 18px color-mix(in srgb,var(--elc) 16%,transparent),inset 0 0 12px #ffe9a310;transform:rotate(-24deg) scaleY(.66)}
.ss-orbit.second{transform:rotate(33deg) scaleY(.66);border-style:dashed;opacity:.6}
.ss-element-scene i{position:absolute;left:var(--x);bottom:23%;width:3px;height:6px;background:var(--elc);box-shadow:0 0 8px var(--elc);animation:relicMotes 5s var(--delay) ease-in-out infinite;opacity:0}
.el-fire .ss-element-scene i{border-radius:70% 0 70% 30%;height:10px;animation-duration:3.5s}
.el-water .ss-element-scene i{width:7px;height:7px;border:1px solid #bcefff;background:transparent;border-radius:50%;animation-duration:7s}
.el-wind .ss-element-scene i{width:17px;height:4px;background:linear-gradient(90deg,transparent,#c5ffe9);transform:rotate(-25deg);animation-duration:4s}
.el-earth .ss-element-scene i{width:7px;height:12px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(90deg,#996a35,#ffedbb,#d4a75e);animation-duration:8s}
.sc-stage .ss-art.ss-aura{filter:drop-shadow(0 7px 4px #0008) drop-shadow(0 0 2px color-mix(in srgb,var(--elc) 55%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--elc) 20%,transparent));animation:ssBob 3s ease-in-out infinite,relicAura 3.6s ease-in-out infinite alternate}
.sc-stage .ss-rar.r4{background:linear-gradient(#eed5ff,#b28ae8);color:#37224c;box-shadow:0 0 12px #b98aff66}
.sc-chip.on{border-color:#ffedb1;box-shadow:0 0 0 1px #ffedb1,0 0 10px #ebbe6c66}.sc-chip{padding:0;cursor:pointer}
.sc-chip:focus-visible,.sc-mini:focus-visible{outline:2px solid #fff0b8;outline-offset:3px}
@keyframes relicMotes{0%{opacity:0;translate:0 20px}20%{opacity:.8}85%{opacity:.3}100%{opacity:0;translate:18px -190px}}
@keyframes relicRays{to{rotate:360deg}}
@keyframes relicAura{to{filter:drop-shadow(0 7px 4px #0008) drop-shadow(0 0 2px color-mix(in srgb,var(--elc) 65%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--elc) 25%,transparent))}}
@media(max-width:900px){.ss-element-scene{right:48%}.ss-element-scene i{animation-duration:6s}.ss-orbit{inset:15%;width:70%;height:70%}.sc-stage .ss-art.ss-aura{filter:drop-shadow(0 4px 3px #0008) drop-shadow(0 0 4px color-mix(in srgb,var(--elc) 30%,transparent));animation:ssBob 3s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.ss-element-scene i{animation:none;opacity:.45;bottom:calc(25% + var(--i)*3%)}.ss-element-scene::after,.sc-stage .ss-art.ss-aura{animation:none!important}}
/* พลังเคลือบผิว: ใช้ alpha ของภาพอาวุธเป็นหน้ากาก จึงไม่เกิดเส้นลอยรอบชิ้นงาน */
.sc-stage .ss-weapon{position:relative;z-index:1;width:62%;height:58%;flex:none;animation:ssBob 3s ease-in-out infinite}
.sc-stage .ss-weapon>.ss-art{width:100%;height:100%;max-height:none;object-fit:contain;animation:relicAura 3.6s ease-in-out infinite alternate}
.ss-energy{position:absolute;inset:0;pointer-events:none;z-index:2;mask-image:var(--weapon-mask);-webkit-mask-image:var(--weapon-mask);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center}
.ss-energy i,.ss-energy b{position:absolute;inset:-100%;display:block;mix-blend-mode:screen}
.ss-energy i{background:linear-gradient(115deg,transparent 44%,#fff8df08 47%,#fff8e477 49.5%,#ffffffaa 50%,#fff8e422 51%,transparent 54%);animation:weaponSheen 5.5s ease-in-out infinite;opacity:.65}
.ss-energy b{inset:0;background:radial-gradient(ellipse at 30% 20%,#fff7ddaa 0 1px,transparent 2px),radial-gradient(ellipse at 60% 45%,#fff7dd99 0 1px,transparent 2px),radial-gradient(ellipse at 40% 70%,#fff7ddaa 0 1px,transparent 2px);background-size:43px 59px,67px 71px,53px 41px;animation:weaponGrain 4s ease-in-out infinite alternate;opacity:.3}
.el-fire .ss-energy b{background-image:repeating-linear-gradient(118deg,transparent 0 19px,#ffc58b66 20px,transparent 21px 37px);background-size:41px 67px}
.el-water .ss-energy b{background-image:repeating-radial-gradient(ellipse at 30% 45%,transparent 0 12px,#d5f3ff66 13px,transparent 14px 23px);background-size:73px 53px}
.el-wind .ss-energy b{background-image:repeating-linear-gradient(155deg,transparent 0 27px,#d7ffee66 28px,transparent 29px 42px);background-size:61px 71px}
.el-earth .ss-energy b{background-image:repeating-linear-gradient(45deg,transparent 0 24px,#ffdfaa66 25px,transparent 26px 48px),repeating-linear-gradient(-45deg,transparent 0 36px,#ffefce44 37px,transparent 38px 61px);background-size:69px 73px}
@keyframes weaponSheen{0%,18%{translate:-28% 15%;opacity:0}35%{opacity:.55}65%{opacity:.4}82%,100%{translate:28% -15%;opacity:0}}
@keyframes weaponGrain{from{background-position:0 0;opacity:.16}to{background-position:6px -12px;opacity:.32}}
@media(max-width:900px){.sc-stage .ss-weapon{width:42%;height:92%}.ss-energy i{opacity:.4}}
@media(prefers-reduced-motion:reduce){.sc-stage .ss-weapon,.ss-energy i,.ss-energy b{animation:none!important}.ss-energy i{opacity:.15}}