/* ============================================================
   レトロブラウザ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;}

/* ---- トップページ ---- */
.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;}
}