:root{
  --bg:#0A0810; --card:#13111C; --panel:#1A1828; --border:rgba(255,255,255,.10);
  --tx:#EEE8D5; --tx2:#A09880; --tx3:#605848; --gold:#D4AA40; --gold-l:#F0CC70;
  --f-serif:"Noto Serif JP","Yu Mincho",serif;
  --f-sans:"Noto Sans JP","Hiragino Sans",sans-serif;
  --f-mono:"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--tx);font-family:var(--f-sans);min-height:100%}
body{padding-bottom:76px}
button{font-family:inherit;cursor:pointer}
input{font-family:var(--f-mono)}

/* header */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(10,8,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.logo{font-family:var(--f-serif);font-weight:700;font-size:18px;color:var(--gold-l);letter-spacing:.12em;
  animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{text-shadow:0 0 6px rgba(212,170,64,.3)}50%{text-shadow:0 0 18px rgba(240,204,112,.8)}}
.head-right{display:flex;align-items:center;gap:8px}
.install-btn{background:linear-gradient(135deg,var(--gold),#B08020);color:#1A1206;border:none;
  border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;white-space:nowrap}
select#langSel{background:var(--panel);color:var(--tx);border:1px solid var(--border);border-radius:8px;
  padding:6px 8px;font-size:13px}

/* layout */
main{max-width:560px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px;
  opacity:0;transform:translateY(14px);animation:fadeUp .5s ease forwards}
.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.2s}
.card:nth-child(4){animation-delay:.3s}.card:nth-child(5){animation-delay:.4s}
.card:nth-child(6){animation-delay:.5s}.card:nth-child(7){animation-delay:.6s}
@keyframes fadeUp{to{opacity:1;transform:none}}
h2.sec{font-family:var(--f-serif);font-size:14px;color:var(--gold);letter-spacing:.15em;margin-bottom:12px}
.muted{color:var(--tx2);font-size:13px;line-height:1.7}

/* forms */
.bd-row{display:flex;gap:8px;align-items:center}
.bd-row input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;
  color:var(--tx);font-size:17px;padding:12px;text-align:center}
.bd-row input:focus{outline:2px solid var(--gold);border-color:transparent}
.lbl{font-size:12px;color:var(--tx2);margin:10px 0 6px}
.btn{display:block;width:100%;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,var(--gold),#B08020);color:#1A1206;margin-top:14px}
.btn.ghost{background:var(--panel);color:var(--tx);border:1px solid var(--border);font-weight:400}
.btn.small{padding:9px;font-size:13px;margin-top:8px}
.err{color:#E87060;font-size:12px;margin-top:8px;min-height:14px}
.partner-block{border:1px dashed var(--border);border-radius:12px;padding:12px;margin-top:10px;position:relative}
.partner-block .rm{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--tx3);font-size:16px}

/* fortune card */
.daytabs{display:flex;gap:6px;margin-bottom:14px}
.daytabs button{flex:1;padding:10px 4px;border-radius:10px;border:1px solid var(--border);background:var(--panel);
  color:var(--tx2);font-size:13px}
.daytabs button.on{background:linear-gradient(135deg,#2A2440,#1A1828);color:var(--gold-l);border-color:var(--gold)}
.maincard{text-align:center}
.datebadge{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dateTxt{font-family:var(--f-mono);font-size:13px;color:var(--tx2)}
.tier{font-family:var(--f-serif);font-weight:700;padding:4px 14px;border-radius:999px;font-size:14px}
.tier.S{background:linear-gradient(135deg,#D4AA40,#F0CC70);color:#221800;animation:glowS 2s ease-in-out infinite}
@keyframes glowS{0%,100%{box-shadow:0 0 6px rgba(240,204,112,.4)}50%{box-shadow:0 0 22px rgba(240,204,112,.95)}}
.tier.A{background:linear-gradient(135deg,#8050C0,#A878E0);color:#fff}
.tier.B{background:linear-gradient(135deg,#3A8C4E,#6CB870);color:#fff}
.tier.C{background:linear-gradient(135deg,#2C6EA0,#6EA8D8);color:#fff}
.tier.D{background:#505870;color:#D8DCE8}

/* 紋章: 画像があれば絵文字の上に重ねて表示 */
.emblem{position:relative;width:108px;height:108px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;font-size:52px;border:2px solid var(--gold);
  background:radial-gradient(circle at 35% 30%,var(--panel),#0E0C16);overflow:hidden}
.emblem.sm{width:72px;height:72px;font-size:34px;margin:0}
.emblem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.cp-emblems{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:8px}
.cp-x{font-size:22px;color:var(--tx3)}

.rname{font-family:var(--f-serif);font-size:24px;letter-spacing:.08em}
.rtitle{font-size:13px;color:var(--tx2);margin:4px 0 8px}
.tags{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.tag{font-size:11px;padding:3px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--border);color:var(--tx2)}
.power{font-family:var(--f-mono);font-size:44px;color:var(--gold-l);line-height:1}
.power small{font-size:14px;color:var(--tx3)}
.dailycomment{margin-top:14px;font-size:14px;line-height:1.9;text-align:left;background:var(--panel);
  border-radius:12px;padding:14px;border-left:3px solid var(--gold)}

/* stats */
.stat{display:grid;grid-template-columns:52px 1fr 56px;gap:10px;align-items:center;margin-bottom:10px}
.stat .nm{font-size:13px;color:var(--tx2)}
.bar{height:10px;background:var(--panel);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;transform-origin:left center;
  animation:growBar .9s cubic-bezier(.34,1.4,.64,1) both}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stat .vl{font-family:var(--f-mono);font-size:13px;text-align:right}
.grade{font-family:var(--f-serif);font-weight:700;margin-left:4px}
.gS{color:#F0CC70}.gA{color:#A878E0}.gB{color:#6CB870}.gC{color:#6EA8D8}.gD{color:#808898}

.radarwrap{display:flex;justify-content:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.minip{background:var(--panel);border-radius:12px;padding:12px}
.minip h3{font-size:11px;color:var(--tx3);letter-spacing:.1em;margin-bottom:8px}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);margin-bottom:6px}
.minip p{font-size:12px;line-height:1.7;color:var(--tx2)}
.minip .cname{font-size:14px;color:var(--tx)}

/* compat */
.cpair{display:flex;gap:10px;margin-bottom:10px;background:var(--panel);border-radius:12px;padding:12px;align-items:center}
.cpair .meta{flex:1}
.cpair .meta b{font-family:var(--f-serif);font-size:14px}
.cpair .sc{font-family:var(--f-mono);font-size:22px;color:var(--gold-l)}
.crank{font-family:var(--f-serif);color:var(--gold-l);font-size:16px;text-align:center;margin:8px 0}

/* tier ranking */
.trow{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.trow .tb{flex-shrink:0;width:40px;text-align:center;padding-top:6px}
.ticons{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px 6px;flex:1}
.ticon{position:relative;width:54px;height:54px;border-radius:50%;background:var(--panel);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;cursor:pointer;
  margin:0 auto;transition:transform .15s}
.ticon:active{transform:scale(.92)}
.ticon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.ticon.you{border-color:var(--gold);box-shadow:0 0 12px rgba(212,170,64,.7)}
.ticell{display:flex;flex-direction:column;align-items:center;gap:3px}
.ticell .tcname{font-size:9px;color:var(--tx3);text-align:center;line-height:1.2;max-width:60px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticell.you .tcname{color:var(--gold-l)}
/* タップで表示する名前ポップ */
.tname-pop{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:40;
  background:var(--card);border:1px solid var(--gold);border-radius:12px;padding:10px 18px;
  display:flex;align-items:center;gap:10px;box-shadow:0 6px 24px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}
.tname-pop.show{opacity:1}
.tname-pop .pe{font-size:24px}
.tname-pop b{font-family:var(--f-serif);font-size:15px}
.tname-pop .pt{font-size:11px;color:var(--tx2)}

/* share */
.sharebtns{display:flex;gap:10px}
.sharebtns button{flex:1;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);
  color:var(--tx);font-size:14px}

/* settings links */
.linklist a{display:block;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);
  color:var(--tx);text-decoration:none;font-size:14px;margin-bottom:8px}
.linklist a:hover{border-color:var(--gold)}
.ver{font-family:var(--f-mono);font-size:11px;color:var(--tx3);text-align:center;margin-top:10px}

/* ===== 今日の自分・拡張カード ===== */
.selfcard .self-item{padding:12px 0;border-bottom:1px solid var(--border)}
.selfcard .self-item:last-child{border-bottom:none;padding-bottom:0}
.self-h{display:flex;align-items:center;gap:8px;font-family:var(--f-serif);font-size:14px;color:var(--gold-l);margin-bottom:6px}
.self-ic{font-size:18px}
.self-tx{font-size:14px;line-height:1.9;color:var(--tx)}

/* ラッキー要素グリッド */
.lucky-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lucky-cell{background:var(--panel);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.lk-label{font-size:10px;color:var(--tx3);letter-spacing:.12em}
.lk-val{font-size:14px;color:var(--tx);display:flex;align-items:center;gap:8px;line-height:1.4}
.lk-dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--border);flex-shrink:0}

/* ===== 性格分析 ===== */
.persona-title{font-family:var(--f-serif);font-size:16px;color:var(--gold-l)}
.persona-card .persona-h{display:flex;align-items:center;gap:8px;font-family:var(--f-serif);font-size:15px;color:var(--gold);margin-bottom:10px}
.persona-ic{font-size:20px}
.persona-tx{font-size:14px;line-height:2;color:var(--tx)}

/* ===== 用語ツールチップ ? ===== */
.term-q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;
  border-radius:50%;background:var(--border);color:var(--tx);font-size:10px;font-weight:700;cursor:pointer;
  vertical-align:middle;line-height:1}
.term-q:hover{background:var(--gold);color:#1A1206}
.tag .term-q{margin-left:4px}
.power .term-q{width:18px;height:18px;font-size:11px;vertical-align:super}
.term-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px}
.term-modal.show{display:flex}
.term-box{background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:22px;max-width:340px;
  box-shadow:0 10px 40px rgba(0,0,0,.6)}
.term-box h4{font-family:var(--f-serif);color:var(--gold-l);font-size:17px;margin-bottom:10px}
.term-box p{font-size:14px;line-height:1.9;color:var(--tx);margin-bottom:16px}
.term-close{display:block;width:100%;padding:11px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),#B08020);color:#1A1206;font-weight:700;font-size:14px}

/* pull-to-refresh hint */
.pull-hint{text-align:center;font-size:12px;color:var(--tx3);padding:6px 0 10px;letter-spacing:.05em}

/* 広告スペース (横長固定・文字なし) */
.ad-slot{height:90px;border:1px dashed var(--border);border-radius:12px;margin-bottom:14px;
  background:var(--panel);overflow:hidden}
.ad-slot ins,.ad-slot iframe{display:block;width:100%;height:100%;border:0}

/* settings install button & iOS hint */
.linkbtn{display:block;width:100%;padding:12px;border-radius:12px;text-align:center;font-size:14px;font-weight:700;
  border:none;background:linear-gradient(135deg,var(--gold),#B08020);color:#1A1206;margin-bottom:8px;cursor:pointer}
.ios-hint{font-size:12px;line-height:1.7;color:var(--tx2);background:var(--panel);border-radius:12px;
  padding:12px;margin-bottom:8px;border-left:3px solid var(--gold)}

/* bottom nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:rgba(10,8,16,.95);
  border-top:1px solid var(--border);backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:none;color:var(--tx2);font-size:11px;padding:9px 0 8px}
nav button .i{display:block;font-size:20px;margin-bottom:2px}
nav button.on{color:var(--gold-l)}
.hide{display:none!important}

/* static pages (privacy / terms / contact) */
.page{max-width:560px;margin:0 auto;padding:16px;line-height:1.9;font-size:14px}
.page h1{font-family:var(--f-serif);color:var(--gold-l);font-size:20px;margin:18px 0 12px}
.page h2{font-size:15px;color:var(--gold);margin:18px 0 8px}
.page p,.page li{color:var(--tx2)}
.page ul{padding-left:20px}
.page a{color:var(--gold-l)}
.backlink{display:inline-block;margin:16px 0;color:var(--gold-l)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}