/* ============================================================
   レトロブラウザRPG風UI(案D: 2000年代CGIゲーム×JRPGウィンドウ、フラット+角丸)
   ============================================================ */
:root{
  --navy:#1c2a88; --navy-line:#445; --line:#99a; --frame:#778;
  --page:#d8d8d0; --paper:#f8f8f4; --panel:#e4e8f2;
  --text:#14141f; --dim:#454560; --link:#0033cc;
  --gold:#ffd54d; --red:#cc2233; --grn:#4dd46a; --blu:#4da3ff;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--page); color:var(--text);
  font-family:Meiryo,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:15px; line-height:1.75;
  padding:18px 10px;}
.dotfont, .tab, .arena, .log, .homewin, th{
  font-family:"DotGothic16","MS Gothic",monospace;}
.frame{max-width:860px; margin:0 auto; background:var(--paper); border:1px solid var(--frame);
  border-radius:12px; overflow:hidden;}

/* ---- ヘッダ ---- */
header.site{background:var(--navy); color:#fff; text-align:center; padding:12px 10px;
  border-bottom:3px solid #fff;}
header.site .t{font-family:"DotGothic16","MS Gothic",monospace; font-size:24px; letter-spacing:3px;
  text-shadow:2px 2px 0 #000;}
header.site .s{font-size:11px; color:#9ac;}

/* ---- タブナビ ---- */
.tabs{display:flex; gap:8px; background:var(--panel); padding:8px 10px;
  border-bottom:1px solid var(--line); flex-wrap:wrap;}
.tab{background:#fff; border:1px solid #aab; border-radius:8px; color:var(--link);
  padding:5px 18px; cursor:pointer; font-size:16px; font-weight:bold;}
.tab:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.tab.on{background:var(--navy); color:#fff; border-color:var(--navy);}

main{padding:14px;}

/* ---- 汎用 ---- */
.inputrow{display:flex; gap:8px;}
.inputrow input{flex:1; background:#fff; border:1px solid var(--frame); border-radius:8px;
  color:var(--text); font-size:15px; padding:9px 12px; outline:none; font-family:inherit;}
.inputrow input:focus{border-color:var(--navy);}
.inputrow button{background:var(--navy); color:#fff; border:1px solid var(--navy-line); border-radius:8px;
  padding:9px 20px; font-size:15px; cursor:pointer; white-space:nowrap;
  font-family:"DotGothic16","MS Gothic",monospace;}
.inputrow button:disabled{opacity:.5; cursor:wait;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 16px;}
.chip{background:#fff; border:1px solid #aab; color:var(--dim); font-size:12px;
  padding:4px 12px; border-radius:999px; cursor:pointer;}
.chip:hover{color:var(--navy); border-color:var(--navy);}
.cols{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;}
.card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px;
  flex:1 1 340px; min-width:300px;}
.card.rare{border:2px solid #c9a400; box-shadow:0 0 14px rgba(255,213,77,.5);}
.mname{font-size:18px; font-weight:bold; text-align:center; margin-top:6px;}
.badge{display:inline-block; font-size:11px; padding:2px 10px; border-radius:999px; margin-left:6px; vertical-align:2px;}
.badge.mob{background:var(--panel); color:var(--dim); border:1px solid #aab;}
.badge.rare{background:var(--gold); color:#5a4300; border:1px solid #c9a400;}
.ptype{color:var(--dim); font-size:12px; text-align:center; margin:4px 0 12px;}
.svgbox{display:flex; justify-content:center;}

/* ---- ステータス表 ---- */
.stats{margin-top:12px;}
.stat{display:flex; align-items:center; gap:8px; margin:5px 0; font-size:13px;}
.stat .lab{width:56px; color:var(--dim);}
.bar{flex:1; height:9px; background:#ddd; border:1px solid #aab; border-radius:5px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--navy); transition:width .5s;}
.stat .val{width:52px; text-align:right;}
.delta{color:#0a7a30; font-size:12px; font-weight:bold;}

table.rtable{border-collapse:separate; border-spacing:0; width:100%; margin-bottom:12px; background:#fff;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;}
table.rtable th{background:var(--navy); color:#fff; border-right:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line); padding:5px 12px;
  font-size:14px; text-align:left; letter-spacing:1px; font-weight:normal;}
table.rtable td{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:5px 12px;}
table.rtable th:last-child, table.rtable td:last-child{border-right:none;}
table.rtable tr:last-child td{border-bottom:none;}

/* ---- JSON(開発者モード)---- */
.jsonpanel{flex:1 1 300px; min-width:280px;}
.jsonpanel h3, .card h3{font-size:13px; color:var(--dim); margin-bottom:8px;}
pre{background:#101018; border:1px solid #333; border-radius:8px; padding:12px;
  font-size:11px; line-height:1.6; color:#9fe8b0; overflow:auto; max-height:380px;}
.note{color:var(--dim); font-size:13px; margin-top:8px; line-height:1.7;}

/* ---- ロスター ---- */
.roster{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.thumb{width:84px; background:#fff; border:2px solid var(--line); border-radius:8px;
  cursor:pointer; padding:4px 2px; text-align:center;}
.thumb:hover{border-color:var(--navy);}
.thumb.sel{border-color:var(--navy); background:var(--panel);}
.thumb.selB{border-color:var(--red); background:#fbeaea;}
.thumb.rare{border-color:#c9a400; box-shadow:0 0 8px rgba(255,213,77,.6);}
.thumb .tn{font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.thumb .tw{font-size:9px; color:var(--dim);}
.empty{color:var(--dim); font-size:13px; padding:20px; text-align:center; width:100%;}
.speech{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 14px;
  font-size:13px; margin-top:10px; line-height:1.7;}
.thinking{color:var(--dim); font-size:13px; padding:24px 0; text-align:center; width:100%;}
.hidden{display:none;}
/* 開発者モード(?dev=1)のみ表示 */
.devonly{display:none;}
body.dev .devonly{display:block;}
.selhint{font-size:13px; color:var(--dim); margin-bottom:8px;}

/* ---- バトル(JRPG青ウィンドウ)---- */
.orderrow{display:flex; gap:8px; margin-bottom:10px;}
.orderrow input{flex:1; background:#fff; border:1px solid var(--frame); border-radius:8px;
  color:var(--text); font-size:14px; padding:8px 12px; outline:none; font-family:inherit;}
.orderrow input:focus{border-color:#c9a400;}
.orderrow button{background:var(--navy); color:#fff; border:1px solid var(--navy-line); border-radius:8px;
  padding:8px 18px; font-size:14px; cursor:pointer; white-space:nowrap;
  font-family:"DotGothic16","MS Gothic",monospace;}
.btnrow{display:flex; gap:8px; margin:12px 0; flex-wrap:wrap;}
.btn2{background:#fff; border:1px solid #aab; color:var(--link); border-radius:8px;
  padding:8px 18px; cursor:pointer; font-size:14px; font-weight:bold;}
.btn2:hover{border-color:var(--navy);}
.btn2.primary{background:var(--navy); border-color:var(--navy); color:#fff;
  font-family:"DotGothic16","MS Gothic",monospace; font-weight:normal; font-size:15px;}
.btn2:disabled{opacity:.4; cursor:default;}

.arena{display:flex; gap:12px; justify-content:center; align-items:flex-end; flex-wrap:wrap;
  background:var(--navy); border:3px solid #fff; outline:1px solid var(--navy-line); border-radius:8px;
  padding:26px 20px 18px; margin-bottom:12px; position:relative; color:#fff; font-size:15px;}
.fighter{text-align:center; width:250px;}
.fighter .fname{font-size:15px; margin-bottom:4px;}
.hpbar{height:12px; background:#000; border:1px solid #fff; border-radius:6px; overflow:hidden; margin:6px 12px 3px;}
.hpbar i{display:block; height:100%; background:var(--grn); transition:width .4s;}
.hpbar i.low{background:#ff5d6c;}
.mpbar{height:7px; background:#000; border:1px solid #fff; border-radius:4px; overflow:hidden; margin:0 12px 2px;}
.mpbar i{display:block; height:100%; background:var(--blu); transition:width .4s;}
.mplabel{font-size:11px; color:#9ac;}
.mirror svg{transform:scaleX(-1);}
.vs{font-size:22px; color:#9ac; align-self:center;}
.hit{animation:shake .35s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pauseband{position:absolute; top:5px; left:0; right:0; text-align:center; font-size:13px; color:var(--gold);}

.log{background:var(--navy); border:3px solid #fff; outline:1px solid var(--navy-line); border-radius:8px;
  padding:12px 14px; font-size:14px; line-height:1.9; max-height:260px; overflow-y:auto;
  flex:2 1 380px; color:#fff;}
.log .crit{color:var(--gold);} .log .win{color:#7dff9a;}
.log .eff{color:#7cc7ff;} .log .miss{color:#8a9ac9;} .log .order{color:var(--gold);}
.log .mp{color:#8ec6ff;}

/* ---- 召喚演出 ---- */
.summon{display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 0 32px;}
.scircle{position:relative; width:170px; height:170px;}
.sring{position:absolute; inset:0; border-radius:50%;}
.sring.r1{border:3px dashed var(--navy); animation:spinCW 6s linear infinite;}
.sring.r2{inset:16px; border:2px dotted var(--blu); animation:spinCCW 4s linear infinite;}
.sring.r3{inset:34px; border:3px double var(--navy); animation:spinCW 9s linear infinite; opacity:.7;}
.sorb{position:absolute; inset:60px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #9ec1ff 55%, var(--navy));
  animation:orbPulse 1.6s ease-in-out infinite;}
.stext{font-family:"DotGothic16","MS Gothic",monospace; font-size:16px; color:var(--navy);
  animation:blinkText 1.2s steps(2) infinite;}
/* 予兆フェーズ:回転が加速し、陣全体が震える */
.summon.charging .sring.r1{animation-duration:1.2s;}
.summon.charging .sring.r2{animation-duration:.8s;}
.summon.charging .sring.r3{animation-duration:1.6s;}
.summon.charging .scircle{animation:shake .35s linear infinite;}
.summon.charging .sorb{animation-duration:.5s;}
/* レア予兆:召喚陣が金色に変わる */
.summon.rare .sring.r1{border-color:#c9a400;}
.summon.rare .sring.r2{border-color:var(--gold);}
.summon.rare .sring.r3{border-color:#c9a400;}
.summon.rare .sorb{background:radial-gradient(circle at 35% 35%, #fff, var(--gold) 55%, #c9a400);
  box-shadow:0 0 40px rgba(255,213,77,.8);}
.summon.rare .stext{color:#7a5c00;}
@keyframes spinCW{to{transform:rotate(360deg);}}
@keyframes spinCCW{to{transform:rotate(-360deg);}}
@keyframes orbPulse{
  0%,100%{transform:scale(1); box-shadow:0 0 18px rgba(77,163,255,.6);}
  50%{transform:scale(1.12); box-shadow:0 0 34px rgba(77,163,255,.9);}}
@keyframes blinkText{50%{opacity:.35;}}
/* 召喚フラッシュ(通常=白、レア=金) */
.flashfx{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50;}
.flashfx.gold{background:radial-gradient(circle, #fff 30%, var(--gold));}
.flashfx.on{animation:flashOut .8s ease-out forwards;}
@keyframes flashOut{0%{opacity:1;}100%{opacity:0;}}
/* モンスター登場 */
.svgbox.reveal svg{animation:popIn .55s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{0%{transform:scale(0); opacity:0;}70%{transform:scale(1.12);}100%{transform:scale(1); opacity:1;}}
.card.revealpop{animation:cardIn .4s ease-out;}
@keyframes cardIn{from{transform:translateY(14px); opacity:0;}to{transform:translateY(0); opacity:1;}}
.badgepop{animation:badgeIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes badgeIn{from{transform:scale(0);}to{transform:scale(1);}}

/* ---- 無料枠の上限案内(課金機能が有効なときだけ表示)---- */
.upsell{background:#fff8e1; border:2px solid var(--gold); border-radius:8px;
  padding:14px 16px; margin-bottom:14px;}
.upsellhead{font-family:"DotGothic16","MS Gothic",monospace; font-size:17px;
  color:#7a5c00; margin-bottom:6px;}

/* ---- トップページ ---- */
.homewin{background:var(--navy); border:3px solid #fff; outline:1px solid var(--navy-line); border-radius:8px;
  padding:14px 16px; margin-bottom:14px; color:#fff; font-size:15px; line-height:2;}
.homewin .hl{color:var(--gold);}
.rankmedal{font-weight:bold; white-space:nowrap;}
.champbanner{background:var(--gold); color:#5a4300; border:1px solid #c9a400; border-radius:8px;
  font-family:"DotGothic16","MS Gothic",monospace; font-size:18px; letter-spacing:2px;
  text-align:center; padding:5px; margin-bottom:10px;}

/* ---- フッター ---- */
footer.site{background:var(--navy); border-top:3px solid #fff; text-align:center;
  padding:16px 10px 12px; margin-top:24px;}
footer.site img{height:40px; opacity:.95;}
footer.site .cp{color:#9ac; font-size:11px; margin-top:6px;}
footer.site a{color:#9ac;}

/* ============================================================
   スマホ最適化(〜700px):タブ2×2・縦積み・全幅
   ============================================================ */
@media (max-width:700px){
  body{padding:0; font-size:14px;}
  .frame{border-left:none; border-right:none; border-radius:0;}
  header.site .t{font-size:19px; letter-spacing:2px;}
  .tabs{gap:6px; padding:6px;}
  .tab{flex:1 1 40%; text-align:center; font-size:15px; padding:8px 4px;}
  main{padding:10px;}
  .cols{gap:10px;}
  .card{min-width:0; flex:1 1 100%; padding:12px;}
  .jsonpanel{min-width:0; flex:1 1 100%;}
  .inputrow{flex-direction:column;}
  .inputrow button{width:100%;}
  .orderrow{flex-direction:column; gap:6px;}
  .orderrow button{width:100%;}
  .btnrow .btn2{flex:1 1 30%; padding:8px 6px; font-size:13px;}
  .arena{padding:20px 8px 12px; gap:6px;}
  .fighter{width:44%;}
  .fighter svg{width:100%; height:auto;}
  .fighter .fname{font-size:12px;}
  .hpbar,.mpbar{margin-left:4px; margin-right:4px;}
  .vs{font-size:15px;}
  .log{max-height:200px; font-size:13px; flex:1 1 100%;}
  .homewin{font-size:14px; padding:12px;}
  .thumb{width:74px;}
  .thumb svg{width:64px; height:53px;}
}