:root{--bg:#05060f;--cy:#22d3ee;--mg:#e040fb;--am:#fbbf24;--gr:#34d399;--tx:#e8f1ff;--mut:#8ea3c7;
  --font:"Noto Sans JP","Noto Sans Thai","Hiragino Sans","Yu Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:var(--font);overflow:hidden;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);z-index:50;transition:opacity .25s}
#loading.done{opacity:0;pointer-events:none}
#loading p{color:var(--mut);letter-spacing:.1em;font-size:14px}
.ring{width:54px;height:54px;border-radius:50%;border:3px solid #123;border-top-color:var(--cy);border-right-color:var(--mg);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;z-index:10;
  background:linear-gradient(#05060fdd,#05060f00);pointer-events:none}
#top>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;line-height:1.1}
.logo{font-family:Orbitron,var(--font);font-weight:800;font-size:20px;letter-spacing:.18em;background:linear-gradient(90deg,var(--cy),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px #22d3ee55}
.sub{font-size:11px;color:var(--mut);letter-spacing:.12em}
.tools{display:flex;gap:8px;align-items:center}
button{font:inherit;color:var(--tx);background:#0d1430cc;border:1px solid #2a3a6a;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;backdrop-filter:blur(6px);transition:.2s}
button:hover{border-color:var(--cy);box-shadow:0 0 12px #22d3ee55}
.langs{display:flex;border:1px solid #2a3a6a;border-radius:999px;overflow:hidden}
.langs button{border:0;border-radius:0;padding:7px 10px;background:#0d1430cc}
.langs button.on{background:linear-gradient(90deg,#0e7490,#86198f);color:#fff}
#hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom));font-size:12px;color:var(--mut);background:#0d143099;padding:6px 12px;border-radius:999px;z-index:9;white-space:nowrap;transition:opacity 1s}
#hint.fade{opacity:0}
#stations{position:fixed;left:0;right:0;bottom:0;display:flex;gap:6px;justify-content:safe center;padding:10px 8px max(12px,env(safe-area-inset-bottom));z-index:10;overflow-x:auto;background:linear-gradient(#05060f00,#05060fdd)}
#stations button{flex:0 0 auto;font-family:Orbitron,var(--font);font-size:12px;letter-spacing:.06em}
#stations button.active{background:#11204a;border-color:#fff}
.c-news{box-shadow:inset 0 -2px 0 var(--cy)}.c-x{box-shadow:inset 0 -2px 0 var(--mg)}.c-ch{box-shadow:inset 0 -2px 0 #f43f5e}.c-fin{box-shadow:inset 0 -2px 0 var(--am)}
#panel{position:fixed;right:14px;top:70px;bottom:80px;width:min(420px,calc(100vw - 28px));background:#070b1ee8;border:1px solid #2a3a6a;border-radius:16px;z-index:20;
  overflow:auto;padding:18px 18px 22px;box-shadow:0 0 40px #22d3ee22,inset 0 0 0 1px #ffffff08;backdrop-filter:blur(10px);animation:slin .35s ease}
@keyframes slin{from{opacity:0;transform:translateX(20px)}}
@media (max-width:700px){#stations button{padding:7px 10px;font-size:11px} #panel{left:10px;right:10px;width:auto;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));max-height:58vh;animation:slup .35s ease}
  @keyframes slup{from{opacity:0;transform:translateY(20px)}} .sub{display:none} .logo{font-size:17px} #hint{font-size:11px;white-space:normal;width:max-content;max-width:90vw;text-align:center}}
.close{position:sticky;float:right;top:0;width:34px;height:34px;padding:0;font-size:20px;line-height:1;z-index:2}
.panel-body h2{margin:0 0 4px;font-family:Orbitron,var(--font);font-size:20px;letter-spacing:.08em}
.panel-body .meta{color:var(--mut);font-size:12px;margin-bottom:12px}
.panel-body ol,.panel-body ul{padding-left:0;list-style:none;margin:0 0 14px}
.panel-body li{margin:0 0 8px}
.item{display:block;padding:10px 12px;border-radius:10px;background:#0d1430;border:1px solid #1d2a52;color:var(--tx);text-decoration:none;font-size:14px;line-height:1.5}
.item:hover{border-color:var(--cy)}
.item .tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;margin-right:6px;color:#05060f;font-weight:700;vertical-align:1px}
.item .rk{font-family:Orbitron;font-weight:800;color:var(--cy);margin-right:6px}
.item small{display:block;color:var(--mut);font-size:11px;margin-top:3px}
.cta{display:inline-flex;gap:6px;align-items:center;margin:4px 6px 4px 0;padding:10px 16px;border-radius:999px;text-decoration:none;color:#fff;font-weight:700;font-size:14px;background:linear-gradient(90deg,#0e7490,#86198f)}
.note{font-size:12px;color:var(--mut);line-height:1.6}
.vid{display:flex;gap:10px;align-items:center}
.vid img{width:96px;height:54px;object-fit:cover;border-radius:6px;flex:0 0 auto}
#list2d{position:fixed;inset:0;z-index:40;background:#05060ff2;overflow:auto;padding:max(16px,env(safe-area-inset-top)) 14px 40px}
.list-inner{max-width:760px;margin:0 auto}
#list2d h1{font-family:Orbitron,var(--font);font-size:20px;letter-spacing:.12em;margin:6px 0 16px}
#list2d h1 small{font-family:var(--font);font-size:13px;color:var(--mut);letter-spacing:0;margin-left:8px}
#list2d section{margin:0 0 22px;padding:16px;border:1px solid #1d2a52;border-radius:14px;background:#080d22}
#list2d h2{margin:0 0 4px;font-family:Orbitron,var(--font);font-size:17px;letter-spacing:.06em}
#list2d section.panel-body ol,#list2d section.panel-body ul{padding-left:0;list-style:none}
#list2d h3,.panel-body h3{font-size:15px;margin:14px 0 8px}
.c-holo{box-shadow:inset 0 -2px 0 #7dd3fc}
.holo-video{position:fixed;width:2px;height:2px;opacity:0;pointer-events:none;left:0;bottom:0}
.holo-btn{display:inline-block;margin:6px 0 0;font-size:12px;padding:6px 12px;border-color:#22d3ee88;color:#a5f3fc;background:#06243a}
.holo-btn.big{display:block;width:100%;margin:6px 0 12px;font-size:15px;font-weight:700;padding:11px;background:linear-gradient(90deg,#0e7490,#1e3a8a);color:#fff;box-shadow:0 0 18px #22d3ee55}
#holoui{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom));width:min(560px,calc(100vw - 20px));z-index:21;
  background:#03141fd9;border:1px solid #22d3ee66;border-radius:14px;padding:10px 12px;box-shadow:0 0 30px #22d3ee33;backdrop-filter:blur(8px);animation:slup2 .35s ease}
@keyframes slup2{from{opacity:0;transform:translate(-50%,16px)}}
#holoui .hrow{display:flex;align-items:center;gap:8px;justify-content:space-between}
#holoui .hlabel{font-family:Orbitron,var(--font);font-size:11px;letter-spacing:.1em;color:#67e8f9}
#holoui .hx{width:30px;height:30px;padding:0;font-size:18px}
#holoui .htitle{font-size:13px;line-height:1.45;margin:4px 0 8px;color:#e0f7ff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#holoui .hprog{height:12px;display:flex;align-items:center;cursor:pointer;margin-bottom:8px}
#holoui .hprog::before{content:"";position:absolute}
#holoui .hprog{background:linear-gradient(#0000 4px,#164e63 4px,#164e63 8px,#0000 8px)}
#holoui .hbar{height:4px;width:0;background:linear-gradient(90deg,#22d3ee,#a5f3fc);box-shadow:0 0 8px #22d3ee}
#holoui .hbtns{justify-content:flex-start}
#holoui .hbtns button{padding:7px 12px}
#holoui button.warn{border-color:#fbbf24;color:#fde68a;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 14px #fbbf2499}}
#holoui .hyt{margin-left:auto;color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;background:#b91c1c}
#holoui .hpick{margin-top:8px;justify-content:flex-start;flex-wrap:wrap}
#holoui .seg{display:inline-flex;border:1px solid #2a3a6a;border-radius:999px;overflow:hidden}
#holoui .seg button{border:0;border-radius:0;padding:5px 10px;font-size:12px}
#holoui .seg button.on{background:linear-gradient(90deg,#0e7490,#1e40af);color:#fff}
@media (max-width:700px){#holoui{bottom:calc(58px + env(safe-area-inset-bottom));padding:8px 10px} #holoui .htitle{font-size:12px;-webkit-line-clamp:1}}
.bgm{display:flex;align-items:center;gap:6px}
#bgmbtn{white-space:nowrap}
#bgmbtn.on{border-color:#22d3ee;color:#a5f3fc;box-shadow:0 0 12px #22d3ee66}
#bgmvol{width:80px;accent-color:#22d3ee}
@media (max-width:700px){#bgmvol{display:none} #bgmbtn{padding:7px 9px;font-size:12px} .tools{gap:5px} #btn2d{padding:7px 9px;font-size:12px} .langs button{padding:7px 8px}}
@media (max-width:440px){#top{padding-left:10px;padding-right:8px} .logo{font-size:13px;letter-spacing:.08em} .tools{gap:4px}
  .langs button{padding:6px 6px;font-size:11px} #bgmbtn,#btn2d{padding:6px 7px;font-size:11px;white-space:nowrap}}
body.mv #top,body.mv #stations,body.mv #hint,body.mv #panel,body.mv #holoui,body.mv #loading{display:none!important}
a.logo{text-decoration:none;letter-spacing:.1em}