[hidden]{display:none!important}
@font-face{font-family:Kanit;font-weight:400;font-display:swap;src:url(/fonts/Kanit-Regular.woff2) format("woff2")}
@font-face{font-family:Kanit;font-weight:600;font-display:swap;src:url(/fonts/Kanit-SemiBold.woff2) format("woff2")}
@font-face{font-family:Kanit;font-weight:700;font-display:swap;src:url(/fonts/Kanit-Bold.woff2) format("woff2")}
:root{--navy:#0a1640;--navy2:#13287a;--gold:#e8b931;--gold2:#f6d36b;--line:rgba(255,255,255,.16);--muted:rgba(255,255,255,.72)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);color:#fff;font-family:Kanit,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;touch-action:none}
#scene canvas{display:block;width:100%;height:100%;outline:none}
.bar{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(180deg,rgba(10,22,64,.92),rgba(10,22,64,.55) 70%,transparent);pointer-events:none}
.bar>*{pointer-events:auto}
.back{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font-size:14px;white-space:nowrap}
.ttl{flex:1;min-width:0;text-align:center}
.ttl h1{margin:0;font-size:clamp(17px,2.4vw,26px);font-weight:700;line-height:1.25;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang{flex:none;display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.07)}
.lang button{font:inherit;font-size:13px;font-weight:600;padding:7px 11px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--navy)}
.views{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top));display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(10,22,64,.75);border:1px solid var(--line);backdrop-filter:blur(6px)}
.views button{font:inherit;font-size:14px;font-weight:600;padding:7px 14px;border:0;border-radius:999px;background:none;color:#fff;cursor:pointer;white-space:nowrap}
.views button.on{background:linear-gradient(90deg,var(--gold),var(--gold2));color:var(--navy)}
.card{position:fixed;right:16px;top:130px;width:min(320px,calc(100vw - 32px));padding:16px 18px;border-radius:18px;background:rgba(10,22,64,.92);border:1px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.card .x{position:absolute;right:8px;top:6px;width:34px;height:34px;border:0;background:none;color:var(--muted);font-size:24px;cursor:pointer}
.c-head{display:flex;align-items:center;gap:12px;padding-right:26px}
.c-head b{display:block;font-size:22px;line-height:1.2}
.c-head small{display:block;color:var(--gold2);font-size:13px}
.sw{width:22px;height:22px;border-radius:6px;flex:none}
.card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 8px}
.card dl div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.card dt{font-size:12px;color:var(--muted)}
.card dd{margin:2px 0 0;font-size:22px;font-weight:700;color:var(--gold2);line-height:1.2}
.card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(118px + env(safe-area-inset-bottom));padding:7px 14px;border-radius:999px;background:rgba(10,22,64,.7);font-size:13px;color:var(--muted);white-space:nowrap;transition:opacity .6s;pointer-events:none}
.hint.off{opacity:0}
.legend{position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(10,22,64,.95),rgba(10,22,64,.6) 75%,transparent)}
.legend ul{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;max-width:980px}
.legend li button{font:inherit;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:13px;cursor:pointer;white-space:nowrap}
.legend li button b{color:var(--gold2)}
.legend li .sw{width:13px;height:13px;border-radius:4px}
.note{margin:8px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.hatch{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.75) 0 3px,transparent 3px 6px)!important}
.loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,var(--navy2),var(--navy));z-index:10;transition:opacity .5s}
.loading.done{opacity:0;pointer-events:none}
.spin{width:54px;height:54px;border-radius:50%;border:4px solid rgba(232,185,49,.25);border-top-color:var(--gold);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold2));color:var(--navy);font-weight:700;text-decoration:none}
@media (max-width:640px){
  .back{padding:7px 10px;font-size:13px}.back [data-i]{display:none}
  .views{top:calc(64px + env(safe-area-inset-top))}.views button{font-size:13px;padding:6px 11px}
  .card{left:12px;right:12px;width:auto;top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}
  .legend li button{font-size:12px;padding:5px 9px}
  .hint{bottom:calc(150px + env(safe-area-inset-bottom));font-size:12px}
}
@media (max-width:640px){.ttl h1{font-size:15.5px}}