@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root{
  --sky-top:#050714;
  --sky-mid:#0b1030;
  --panel:#10152f;
  --panel-2:#161c3c;
  --gold:#e8b64d;
  --gold-bright:#ffd77a;
  --gold-dim:#8a713a;
  --vermillion:#c8462f;
  --vermillion-bright:#e05a3e;
  --washi:#f3e6c8;
  --ink:#cfd3e6;
  --ink-dim:#7d84a8;
  --line:#3a3160;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; overflow:hidden; background:var(--sky-top);
  font-family:'Zen Kaku Gothic New', sans-serif; color:var(--ink);
  touch-action:manipulation;
}
#app{position:fixed; inset:0; display:flex; flex-direction:column; animation:appFadeIn 1.4s ease;}
@keyframes appFadeIn{ from{opacity:0;} to{opacity:1;} }

/* ---------- HEADER ---------- */
#topbar{
  position:relative; z-index:5; display:flex; align-items:center; gap:14px;
  padding:10px 14px; background:linear-gradient(180deg, rgba(6,8,20,.92), rgba(6,8,20,.55));
  border-bottom:1px solid var(--line); backdrop-filter: blur(2px);
}
#topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  background-size:200% 100%; opacity:.55;
  animation: shimmerLine 5.5s linear infinite;
}
@keyframes shimmerLine{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
#brand{font-family:'Shippori Mincho',serif; font-weight:800; font-size:16px; color:var(--gold-bright); letter-spacing:.06em; cursor:default; user-select:none; animation:brandGlow 4.5s ease-in-out infinite;}
@keyframes brandGlow{
  0%,100%{ text-shadow:0 0 8px rgba(255,215,120,.35); }
  50%{ text-shadow:0 0 18px rgba(255,215,120,.75); }
}
#brand span{display:block; font-size:9px; font-weight:400; color:var(--ink-dim); letter-spacing:.2em; font-family:'Zen Kaku Gothic New',sans-serif;}
#currencyBox{display:flex; align-items:baseline; gap:6px; margin-left:auto;}
#currencyBox .seal{
  width:22px;height:22px;border-radius:50%;background:var(--vermillion);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--washi);
  font-family:'Shippori Mincho',serif; flex:0 0 auto; box-shadow:0 0 8px rgba(200,70,47,.6);
}
#currencyVal{font-family:'Shippori Mincho',serif; font-weight:800; font-size:20px; color:var(--gold-bright); text-shadow:0 0 12px rgba(255,215,120,.5);}
#currencyUnit{font-size:11px; color:var(--ink-dim);}
#cpsLine{font-size:10px; color:var(--ink-dim); margin-left:6px; white-space:nowrap;}

#emberBtn{
  width:26px;height:26px;border-radius:50%; border:1px solid var(--line); background:radial-gradient(circle at 35% 30%, #ff9d5c, #7a2b12 70%);
  opacity:.55; cursor:pointer; flex:0 0 auto; box-shadow:0 0 6px rgba(255,120,60,.4);
}
#emberBtn:hover{opacity:.9;}

/* ---------- MAP TABS ---------- */
#mapTabs{position:absolute; top:64px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:6px; pointer-events:none;}
#mapTabs button{
  pointer-events:auto; font-family:'Shippori Mincho',serif; font-size:12px; padding:6px 14px;
  background:rgba(10,12,28,.55); border:1px solid var(--line); color:var(--ink-dim);
  border-radius:2px 2px 0 0; cursor:pointer; letter-spacing:.08em; backdrop-filter:blur(2px);
}
#mapTabs button.active{color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(20,18,10,.6); box-shadow:0 -2px 10px rgba(232,182,77,.15) inset;}

/* ---------- CANVAS ---------- */
#skyWrap{position:relative; flex:1 1 auto; min-height:0;}
#sky{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair;}

#launchBtn{
  position:absolute; right:16px; bottom:16px; z-index:4;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--vermillion-bright), var(--vermillion) 65%, #7a2416 100%);
  border:2px solid rgba(255,220,180,.5); color:var(--washi); font-family:'Shippori Mincho',serif;
  font-size:13px; font-weight:800; letter-spacing:.05em; cursor:pointer;
  box-shadow:0 0 18px rgba(200,70,47,.55), 0 4px 10px rgba(0,0,0,.4);
}
#launchBtn:active{transform:scale(.93);}

#hint{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:11px; color:var(--ink-dim); background:rgba(6,8,20,.4); padding:4px 10px; border-radius:20px;
  pointer-events:none; letter-spacing:.03em;
}

/* ---------- SIDE / BOTTOM PANEL ---------- */
#panel{
  position:relative; z-index:5; flex:0 0 auto; height:44vh; min-height:290px; max-height:420px;
  background:linear-gradient(180deg, var(--panel), #0b0e22);
  border-top:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow:0 -6px 24px rgba(0,0,0,.45);
}
#tabBar{display:flex; border-bottom:1px solid var(--line); flex:0 0 auto;}
#tabBar button{
  flex:1; padding:9px 4px; background:none; border:none; color:var(--ink-dim);
  font-family:'Shippori Mincho',serif; font-size:12px; letter-spacing:.05em; cursor:pointer;
  border-bottom:2px solid transparent; position:relative;
}
#tabBar button.active{color:var(--gold-bright); border-bottom-color:var(--gold);}
#tabBar button .sub{display:block; font-size:8px; color:var(--ink-dim); font-family:'Zen Kaku Gothic New',sans-serif; margin-top:1px;}

#tabContent{flex:1 1 auto; overflow-y:auto; padding:10px 12px 6px;}
.section-title{font-family:'Shippori Mincho',serif; color:var(--gold); font-size:12px; margin:4px 0 8px; display:flex; align-items:center; gap:6px;}
.section-title .dot{width:6px;height:6px;border-radius:50%;background:var(--vermillion);}

.card{
  display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:7px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px; cursor:pointer;
  transition:border-color .15s;
}
.card.affordable{border-color:var(--gold-dim);}
.card.disabled{opacity:.45; cursor:default;}
.card.selected{border-color:var(--gold); box-shadow:0 0 10px rgba(232,182,77,.25) inset;}
.card .badge{
  width:34px;height:34px;border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim));
  font-family:'Shippori Mincho',serif; font-weight:800; color:#241a05; font-size:13px;
}
.card .info{flex:1 1 auto; min-width:0;}
.card .name{font-family:'Shippori Mincho',serif; font-size:13.5px; color:var(--washi);}
.card .desc{font-size:10.5px; color:var(--ink-dim); margin-top:2px; line-height:1.4;}
.card .right{flex:0 0 auto; text-align:right;}
.card .cost{font-size:12px; color:var(--gold-bright); font-family:'Shippori Mincho',serif;}
.card .count{font-size:10px; color:var(--ink-dim); margin-top:2px;}
.card .lockmsg{font-size:10px; color:var(--ink-dim);}

#prestigeBox{
  flex:0 0 auto; margin:0 12px 10px; padding:10px; border:1px dashed var(--gold-dim); border-radius:6px;
  background:rgba(232,182,77,.05); display:flex; align-items:center; gap:10px;
}
#prestigeBox .txt{flex:1; font-size:10.5px; color:var(--ink-dim); line-height:1.5;}
#prestigeBox .txt b{color:var(--gold-bright); font-family:'Shippori Mincho',serif; font-size:13px;}
#prestigeBtn{
  flex:0 0 auto; background:var(--vermillion); color:var(--washi); border:none; border-radius:5px;
  padding:9px 12px; font-family:'Shippori Mincho',serif; font-size:11.5px; cursor:pointer;
}
#prestigeBtn:disabled{background:#3a3050; color:var(--ink-dim); cursor:default;}

#footerRow{display:flex; justify-content:space-between; align-items:center; padding:4px 12px 8px; font-size:9.5px; color:var(--ink-dim);}
#resetBtn{background:none; border:none; color:var(--ink-dim); text-decoration:underline; cursor:pointer; font-size:9.5px;}

/* ---------- FUZEI MODE ---------- */
#fuzei{
  position:fixed; inset:0; z-index:50; display:none; flex-direction:column; align-items:center; justify-content:flex-end;
  background:transparent; cursor:pointer;
}
#fuzei.show{display:flex;}
#fuzeiBack{
  position:absolute; top:16px; left:16px; z-index:51; background:rgba(16,18,36,.75); border:1px solid var(--gold-dim);
  color:var(--gold-bright); padding:9px 18px; border-radius:20px; font-size:13px; cursor:pointer; font-family:'Shippori Mincho',serif;
  display:flex; align-items:center; gap:6px; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
#fuzeiBack::before{content:'←';}
#fuzeiLabel{
  position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:51; color:var(--ink-dim);
  font-family:'Shippori Mincho',serif; font-size:12px; letter-spacing:.3em; text-align:center; cursor:default;
}
#fuzeiLabel::after{
  content:'画面の余白タップ / Esc で戻れます'; display:block; margin-top:6px; font-size:9px; letter-spacing:.05em; color:var(--ink-dim); opacity:.7;
}
#fuzeiBtn{
  margin-bottom:11vh; width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--vermillion-bright), var(--vermillion) 60%, #601a0e 100%);
  border:2px solid rgba(255,220,180,.55); color:var(--washi); font-family:'Shippori Mincho',serif;
  font-size:17px; letter-spacing:.1em; cursor:pointer; box-shadow:0 0 30px rgba(200,70,47,.6), 0 6px 16px rgba(0,0,0,.5);
  z-index:51;
}
#fuzeiBtn:active{transform:scale(.94);}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

@media (min-width:760px){
  #app{flex-direction:row;}
  #skyWrap{flex:1 1 auto;}
  #panel{width:360px; height:auto; max-height:none; border-top:none; border-left:1px solid var(--line);}
  #topbar{position:absolute; top:0; left:0; right:360px; z-index:5;}
  #skyWrap{margin-top:0;}
}