/* PattayaOK v66: local WebGL scene and accessible surface depth. */
body { isolation:isolate; background:transparent; }
html { background:var(--bg); }
#spatial-background { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.58; }
.spatial-hero { position:relative; isolation:isolate; overflow:hidden; min-height:164px; margin:8px 0 14px; border:1px solid #8dccff30; border-radius:26px; background:radial-gradient(ellipse at 75% 25%,#16485a,#0b1b3a 60%,#071018); box-shadow:0 18px 42px #0005,inset 0 1px 0 #ffffff25; }
.spatial-hero canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.spatial-title { position:relative; padding:28px 22px; max-width:65%; color:#edf9ff; text-shadow:0 2px 12px #071018; }
.spatial-title img { width:48px; height:48px; border-radius:15px; box-shadow:0 8px 20px #0006,inset 0 1px 0 #fff6; margin-bottom:10px; }
.spatial-title b { display:block; font-size:23px; letter-spacing:-.04em; }
.spatial-title p { margin:5px 0 0; font-size:14px; line-height:1.45; color:#d0e5ed; }
.card, .news-card, .spot-card, .trust, .clock { background:linear-gradient(145deg,#183145ed,#0c1b2bee); border-color:#a3dcff28; box-shadow:0 12px 28px #0003,inset 0 1px 0 #ffffff12; }
header.app { background:linear-gradient(180deg,#071018f5,#071018ed 85%,#071018c9); }
nav.tab { box-shadow:0 12px 40px #0007,inset 0 1px 0 #ffffff21; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.card, .news-card, .spot-card, .spatial-hero { transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.card .pic { overflow:hidden; }
.card .pic img { transition:transform .4s ease; }
html[data-theme="light"] #spatial-background { opacity:.38; filter:saturate(1.18) contrast(1.06); }
html[data-theme="light"] .card, html[data-theme="light"] .news-card, html[data-theme="light"] .spot-card, html[data-theme="light"] .trust, html[data-theme="light"] .clock { background:linear-gradient(145deg,#fff,#eef5f9f2); border-color:#60849d30; box-shadow:0 12px 28px #12374612,inset 0 1px 0 #fff; }
html[data-theme="light"] header.app { background:#f2f5f7f2; }
html[data-theme="light"] .search, html[data-theme="light"] .filters button:not(.on) { background:#fff; }
@media (hover:hover) and (pointer:fine) {
 .card:hover, .news-card:hover, .spot-card:hover { border-color:#1ed9a866; box-shadow:0 22px 42px #0004,inset 0 1px 0 #ffffff25; }
 .card:hover .pic img { transform:scale(1.035); }
}
@media (prefers-reduced-motion:reduce) {
 .card, .news-card, .spot-card, .spatial-hero, .card .pic img { transition:none; transform:none!important; }
}
/* Keep the original compact brand usable with a hidden Back button. */
header.app > .wrap { max-width:560px; }
.brand > .logo { flex:0 0 36px; }
.brand > div:nth-child(3) { flex:1 1 auto; min-width:0; overflow:hidden; }
@media (max-width:420px) {
 header.app > .wrap { padding-left:10px; padding-right:10px; }
 .brand { gap:5px; }
 .brand h1 { font-size:15px; }
 .brand p { font-size:10px; }
 .top-actions { gap:3px; }
 .top-actions .lang { padding:6px; font-size:10px; }
}
header.app .brand > .logo { flex:0 0 36px; min-width:36px; }

/* v66.1 — liquid-glass ambient field + tactile controls */
#spatial-background { opacity:.74; filter:saturate(1.14) contrast(1.03); }
html[data-theme="light"] #spatial-background { opacity:.56; filter:saturate(1.28) contrast(1.08); }
button, .btn, .chip, a[role="button"], nav.tab a { position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; transform-origin:center; }
button::after, .btn::after, .chip::after, a[role="button"]::after, nav.tab a::after {
  content:""; position:absolute; inset:-45%; pointer-events:none; opacity:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.28) 0,rgba(255,255,255,.11) 24%,transparent 58%);
  transform:scale(.18); border-radius:50%;
}
.ok-press { animation:okPress .42s cubic-bezier(.2,.9,.2,1) both; }
.ok-press::after { animation:okRipple .42s ease-out both; }
@keyframes okPress { 0%{transform:scale(1)} 28%{transform:scale(.965) translateY(1px)} 62%{transform:scale(1.018) translateY(-1px)} 100%{transform:scale(1)} }
@keyframes okRipple { 0%{opacity:0;transform:scale(.15)} 24%{opacity:.75} 100%{opacity:0;transform:scale(1.12)} }
@media (prefers-reduced-motion:reduce) { .ok-press,.ok-press::after { animation:none!important; } }

/* v66.2 — moving 3D starfield */
#spatial-background { opacity:.88; filter:saturate(1.22) contrast(1.04); }
html[data-theme="light"] #spatial-background { opacity:.72; filter:saturate(1.38) contrast(1.12); }
#spatial-background{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* v66.3 — interactive Pattaya glass-map hero */
.spatial-hero{min-height:220px;perspective:900px;transform-style:preserve-3d;touch-action:pan-y;background:linear-gradient(145deg,#07192b 0%,#0b2840 48%,#0a3a43 100%);box-shadow:0 22px 54px #0007,inset 0 1px 0 #ffffff38;will-change:transform}
.spatial-hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,#ffffff10,transparent 30%,#8eefff0c 58%,transparent 78%);mix-blend-mode:screen}
.spatial-hero canvas{z-index:1;pointer-events:auto;touch-action:pan-y}
.spatial-title{z-index:3;pointer-events:none;padding:24px 20px;max-width:58%;transform:translateZ(34px)}
.spatial-title img{width:44px;height:44px;margin-bottom:8px}
.spatial-title b{font-size:24px}.spatial-title p{font-size:13px;color:#d8eef5}
.spatial-map-hint{position:absolute;right:12px;bottom:10px;z-index:4;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#d7f5ff99;pointer-events:none}
html[data-theme="light"] .spatial-hero{background:linear-gradient(145deg,#d9f3fa 0%,#b9e3ef 50%,#8ed3dc 100%);border-color:#4d9fba45;box-shadow:0 18px 44px #1b52651f,inset 0 1px 0 #fff}
html[data-theme="light"] .spatial-title{color:#08273b;text-shadow:0 1px 8px #ffffffaa}html[data-theme="light"] .spatial-title p{color:#214e60}html[data-theme="light"] .spatial-map-hint{color:#164d6280}
@media(max-width:420px){.spatial-hero{min-height:210px}.spatial-title{max-width:55%;padding:20px 16px}.spatial-title b{font-size:21px}.spatial-title p{font-size:12px}}

/* v66.4 — deep weather + commercial interactive map */
#spatial-background{opacity:.94;filter:saturate(1.14) contrast(1.04)}
html[data-theme="light"] #spatial-background{opacity:.92;filter:saturate(1.16) contrast(1.02)}
.spatial-hero{min-height:300px;background:linear-gradient(145deg,rgba(7,25,43,.78),rgba(10,58,67,.52));transition:transform .34s cubic-bezier(.2,.85,.2,1),box-shadow .28s;overflow:hidden}
html[data-theme="light"] .spatial-hero{background:linear-gradient(145deg,rgba(220,247,250,.86),rgba(151,215,228,.70));box-shadow:0 22px 54px rgba(26,78,95,.18),inset 0 1px 0 #fff}
.spatial-hero canvas{z-index:1;pointer-events:auto}
.spatial-hero.hero-tap{animation:heroTap .44s cubic-bezier(.2,.9,.2,1)}
@keyframes heroTap{0%{filter:brightness(1)}32%{filter:brightness(1.08)}100%{filter:brightness(1)}}
.map-pop{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid rgba(255,255,255,.20);border-radius:16px;background:rgba(5,25,37,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(0,0,0,.22);color:#f2fbff;animation:popIn .28s cubic-bezier(.2,.9,.2,1)}
.map-pop[hidden]{display:none}.map-pop-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(144,245,224,.14);font-weight:900;font-size:18px}.map-pop-copy{min-width:0}.map-pop-copy b,.map-pop-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-pop-copy b{font-size:12px}.map-pop-copy span{font-size:10px;color:#b9d3db;margin-top:2px}.map-pop a{min-height:36px;display:flex;align-items:center;padding:0 11px;border-radius:11px;background:#d9fff4;color:#07352e;text-decoration:none;font-size:10px;font-weight:900}.map-pop.partner{border-color:rgba(255,210,80,.45)}.map-pop.partner .map-pop-icon{background:#ffcf55;color:#473000}.map-pop.partner a{background:#ffcf55;color:#3b2900}
html[data-theme="light"] .map-pop{background:rgba(244,253,255,.88);color:#103744;border-color:rgba(20,91,105,.16);box-shadow:0 12px 30px rgba(23,77,90,.16)}html[data-theme="light"] .map-pop-copy span{color:#55747d}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:599px){.spatial-hero{min-height:255px}.map-pop{left:8px;right:8px;bottom:8px;grid-template-columns:34px minmax(0,1fr) auto;padding:7px 8px;gap:7px}.map-pop-icon{width:34px;height:34px}.map-pop a{padding:0 9px}.map-pop-copy b{font-size:11px}}
@media(min-width:700px){.spatial-hero{min-height:340px}.map-pop{left:18px;right:auto;bottom:16px;width:min(420px,72%);padding:11px 12px}.map-pop-copy b{font-size:13px}.map-pop-copy span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.spatial-hero.hero-tap,.map-pop{animation:none!important}}