/* ui.css — 全ページ共通テーマ（"1か所変えたら全ページ連動"の要）
 * 色・カードサイズ・ナビ・ボタンをここに集約する。各ページはこれを link して参照する。
 * ここを変えると index / taisen / playmat / cpu / builder … すべてに反映される。
 */
:root{
  /* ── パレット（明るいサイト共通トーン）── */
  --bg1:#dbeeff; --bg2:#eaf5ff; --bg3:#f7fcff;
  --ink:#1c2740; --ink-sub:#5a6b8c; --line:#cddeee;
  --blue:#0b63b8; --blue-d:#0a56a0; --red:#e0533a; --green:#1f9d6b;
  --panel:#ffffff; --panel-soft:#f7fbff;
  --card-bg:#eef4fb; --card-line:#b8cfe8;
  /* ── カードサイズ（モード別。ここを変えると各モードのカードが連動）── */
  --card-solo:140px;      /* 一人回しのバトル/マナ/手札 */
  --card-solo-shield:108px;
  --card-vs:74px;         /* 対戦の盤面カード（2盤面ぶん置くので控えめ）*/
  --card-vs-h:103px;
  --card-vs-hand:92px;    /* 対戦の手札は少し大きく */
  --card-vs-hand-h:128px;
}

/* ── 共通ボタン ── */
.btn{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:6px 12px;font-weight:bold;cursor:pointer;}
.btn:hover{filter:brightness(1.08);}
.btn.g{background:var(--green);} .btn.warn{background:#c0563e;}
.btn:disabled{opacity:.4;cursor:default;}

/* ── 共通ナビ（.topnav）：タブと中身を全ページで一致させる ── */
.topnav{position:fixed;top:0;left:0;z-index:50;width:100%;background:#ffffffef;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(30,60,110,.07);}
.navinner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:2px;padding:0 22px;height:56px;}
.brand{font-size:19px;font-weight:bold;letter-spacing:2px;color:var(--blue);margin-right:20px;white-space:nowrap;cursor:pointer;}
.brand .dm{color:var(--red);}
.navitem{position:relative;height:56px;display:flex;align-items:center;}
.navitem > .tab{background:none;color:#22364f;border:none;font-size:15px;font-weight:bold;
  padding:0 16px;height:100%;cursor:pointer;display:flex;align-items:center;gap:5px;border-bottom:3px solid transparent;}
.navitem:hover > .tab{color:var(--blue);border-bottom-color:var(--blue);background:#f0f7ff;}
.navitem .arrow{font-size:9px;color:#9ab;}
.dropdown{position:absolute;top:56px;left:0;min-width:210px;display:none;background:#fff;
  border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 12px 30px rgba(30,60,110,.18);padding:7px;}
.navitem:hover .dropdown{display:block;}
.di{display:block;padding:9px 14px;border-radius:8px;text-decoration:none;color:#22364f;font-size:14px;font-weight:bold;white-space:nowrap;}
a.di:hover{background:#eaf4ff;color:var(--blue);}
.di.soon{opacity:.45;pointer-events:none;font-weight:normal;}
.di.sub{padding:7px 12px 7px 16px;font-size:13px;}
.dgroup{border:1px solid #e0ebf6;border-radius:10px;padding:3px;margin-bottom:3px;background:#f7fbff;}
.ghead{font-size:10.5px;font-weight:bold;color:#3a4c70;padding:5px 12px 2px;letter-spacing:1px;}

/* ── 寄付ウィジェット（全ページ共通・nav.jsが注入）── */
.tab.donate{background:#7a4f1a;color:#ffe6bf;}
.tab.donate:hover{background:#96612099;}
#donatePacks{font-size:12px;opacity:.9;}
#donatePanel{position:fixed;top:60px;right:14px;z-index:60;width:270px;display:none;
  background:#141428;border:1px solid #3a3a66;border-radius:12px;padding:14px 16px;box-shadow:0 10px 34px #000b;color:#e8ecf6;}
#donatePanel.on{display:block;}
.dpTitle{color:#ffcf87;font-weight:bold;font-size:15px;}
.dpDesc{font-size:12px;color:#c7cfe0;margin:6px 0 10px;line-height:1.5;}
#packStack{display:flex;flex-wrap:wrap-reverse;gap:3px;min-height:44px;align-content:flex-end;
  background:#0d0d1c;border-radius:8px;padding:6px;border:1px solid #2a2a4a;}
.ppack{width:20px;height:28px;border-radius:3px;background:linear-gradient(160deg,#ffcf5a,#e8781e);
  border:1px solid #7a3d00;box-shadow:inset 0 0 3px #fff6;position:relative;}
.ppack::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:3px;background:#7a3d0088;}
.dpCount{font-size:11px;color:#9fb0cc;margin:8px 0;}
.dpBtn{display:block;text-align:center;background:#e8781e;color:#fff;font-weight:bold;padding:8px;border-radius:8px;text-decoration:none;margin-top:4px;}
.dpBtn:hover{background:#ff8c2c;}
.dpNote{font-size:10px;color:#7f89a3;margin-top:10px;line-height:1.4;}
/* ナビ分の上余白（各ページ本文が隠れないように）*/
body.has-nav{padding-top:0;}