:root{
  --bg:#0b0b10; --panel:rgba(20,20,28,.88); --fg:#f3f1ec; --muted:#b9b5ad; --line:rgba(255,255,255,.14);
  --accent:#e9b949; --accent2:#2a78d6; --ok:#4fb86b;
  font-family: system-ui,-apple-system,"Hiragino Sans","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
a{color:#ffd77a}
button,input{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--fg);border-radius:8px;padding:6px 10px}
button:hover{background:rgba(255,255,255,.16)}
button.on{background:var(--accent);color:#1a1200;border-color:transparent;font-weight:600}

#top{position:fixed;left:0;right:0;top:0;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 14px;pointer-events:none}
#top>*{pointer-events:auto}
#top h1{margin:0;font-size:18px;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#top .sub{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
#top .event{display:block;max-width:46%;text-align:right;font-size:13px;line-height:1.35;color:#fff;text-decoration:none;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
#top .event span{display:block;color:#ffd77a;font-size:12px}

#hud{position:fixed;left:14px;top:72px;display:flex;flex-direction:column;gap:6px}
#hud .modes{display:flex;gap:6px;flex-wrap:wrap}
#hud .hint{margin:0;font-size:12px;color:var(--muted);text-shadow:0 1px 2px #000}

#panel{position:fixed;left:14px;bottom:14px;width:330px;max-height:calc(100% - 150px);overflow:auto;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px}
#panel-toggle{display:none;width:100%;margin-bottom:8px}
#seatform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#seatform label{display:flex;align-items:center;gap:4px}
#seatform input{width:64px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--fg)}
#seatform button{background:var(--accent2);border-color:transparent;color:#fff}
.nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.nav button{font-size:13px}
#seat-name{margin:6px 0 6px;font-size:18px}
#info{margin:0;display:grid;gap:4px}
#info div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:4px}
#info dt{color:var(--muted);font-size:12.5px}
#info dd{margin:0;font-weight:600;white-space:nowrap}
label.fov{display:block;margin-top:10px;font-size:13px}
label.fov input{width:100%}
label.fov output{float:right;font-weight:600}
.note{margin:6px 0 8px;font-size:12px;color:var(--muted);line-height:1.5}
.share{width:100%;font-size:13px}
details.about{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--muted)}
details.about summary{cursor:pointer;color:var(--fg)}

#minimap{position:fixed;right:14px;bottom:14px;width:300px;height:380px;background:rgba(255,255,255,.95);border-radius:12px;border:1px solid var(--line);padding:6px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
#minimap.hidden{display:none}
#minimap svg{width:100%;height:100%;display:block}
#minimap .seat{fill:#fff;stroke:#777;stroke-width:.05;cursor:pointer}
#minimap .seat:hover{fill:#ffe9a8}
#minimap .seat.sel{fill:#e9b949;stroke:#8a5a00;stroke-width:.12}
#minimap .wheel{fill:#cfd3da;stroke:#888;stroke-width:.05;cursor:pointer}
#minimap .oyako{fill:#e7ecf5;stroke:#889;stroke-width:.08;cursor:pointer}
#minimap text{font-family:system-ui,sans-serif;fill:#333;pointer-events:none}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.show{opacity:1}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);font-size:16px;color:var(--muted);z-index:10}
#loading.hidden{display:none}

@media (max-width:760px){
  /* スマホ幅＝上60%が3Dビュー、下40%が設定。設定は「席の情報を閉じる」で畳める（畳むとビューがほぼ全画面） */
  #c{height:60vh;height:60dvh;bottom:auto}
  body.panel-collapsed #c{height:calc(100vh - 48px);height:calc(100dvh - 48px)}
  #top{flex-direction:column;gap:4px;padding:6px 10px}
  #top h1{font-size:15px}
  #top .sub{font-size:11px}
  #top .event{max-width:none;text-align:left;font-size:11.5px;padding:4px 8px;line-height:1.3}
  #top .event span{display:block;font-size:11px;margin-top:2px}
  #hud{top:auto;left:10px;right:10px;bottom:calc(40vh + 10px);bottom:calc(40dvh + 10px)}
  body.panel-collapsed #hud{bottom:58px}
  #hud .hint{display:none}
  #hud .modes button{font-size:13px;padding:6px 9px}
  #panel{left:0;right:0;top:60vh;top:60dvh;bottom:0;width:auto;max-height:none;border-radius:14px 14px 0 0;padding:8px 12px 14px;font-size:13.5px}
  body.panel-collapsed #panel{top:auto;height:48px;overflow:hidden;padding:8px 12px}
  #panel-toggle{display:block;padding:5px 10px;font-size:13px}
  #panel.collapsed #panel-body{display:none}
  #seatform{gap:6px}
  #seatform input{width:56px;padding:5px 7px}
  .nav{gap:5px;margin:8px 0}
  .nav button{padding:5px 8px}
  #seat-name{font-size:16px;margin:4px 0}
  #info dd{font-size:13.5px}
  label.fov{margin-top:8px}
  .note{font-size:11.5px;margin:4px 0 6px}
  #minimap{left:auto;right:10px;top:auto;bottom:calc(40vh + 56px);bottom:calc(40dvh + 56px);width:48%;height:54vw;max-height:260px}
  body.panel-collapsed #minimap{bottom:104px}
  details.about{font-size:12px}
}