/* ui.css — 全ページ共通テーマ（"1か所変えたら全ページ連動"の要）
 * DMP ARENA の ui.css を土台に、ニベルアリーナ用の値を足したもの。
 * 色・カードサイズ・ナビ・ボタンをここに集約する。各ページはこれを link して参照する。
 */
: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;

  /* ── ニベルアリーナの属性色（公式のカラー表記に合わせる）── */
  --attr-fire:#e0533a;   /* 炎(赤) */
  --attr-earth:#43a047;  /* 大地(緑) */
  --attr-storm:#8e44ad;  /* 嵐(紫) */
  --attr-wave:#2196f3;   /* 波濤(青) */
  --attr-bolt:#e8b400;   /* 稲妻(黄) */

  /* ── カードサイズ（モード別。ここを変えると各モードのカードが連動）── */
  --card-solo:140px;
  --card-solo-lv:108px;
  --card-vs:74px;
  --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）：タブと中身を全ページで一致させる ── */
/* ナビの高さはここ1か所。全画面のページ（盤面・構築）はこの値を見る。 */
:root{--navh:62px;}
.topnav{position:fixed;top:0;left:0;z-index:50;width:100%;background:#fbfdffee;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid #dfe9f4;}
/* 中身の幅ぴったりで中央に置く。max-width で箱を作ると、窓の広さによって
   左寄せに見えたり中央に見えたりして落ち着かない。 */
.navinner{width:max-content;max-width:100%;margin:0 auto;display:flex;align-items:center;gap:4px;
  padding:0 26px;height:var(--navh);}
.brand{font-size:21px;font-weight:bold;letter-spacing:2.5px;color:var(--blue);
  margin-right:30px;white-space:nowrap;cursor:pointer;line-height:1;}
.brand .nv{color:var(--red);}

/* 大枠タブ。文字の幅で素直に並べる（無理に同じ幅へ揃えると隙間が汚くなる）。 */
.navitem{position:relative;height:var(--navh);display:flex;align-items:center;}
.navitem > .tab{height:38px;padding:0 14px;border-radius:10px;border:none;background:none;
  color:#44577a;font-size:15px;font-weight:bold;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  min-width:158px;                              /* 3つとも同じ幅で並べる */
  transition:background .12s ease,color .12s ease;}
.navitem:hover > .tab{background:#edf4fd;color:var(--blue);}
/* 今いる場所はタブそのものを囲って示す（下線を外に出すとバーからはみ出して見える）。 */
.navitem > .tab.on{background:#e3eefc;color:var(--blue);box-shadow:inset 0 0 0 1.5px #b9d5f5;}
.navitem .arrow{font-size:9px;color:#a9bcd2;transition:transform .12s ease;}
.navitem:hover .arrow{transform:translateY(1px);color:var(--blue);}

.dropdown{position:absolute;top:calc(var(--navh) - 2px);left:0;min-width:236px;display:none;background:#fff;
  border:1px solid #dfe9f4;border-radius:14px;box-shadow:0 16px 36px rgba(30,60,110,.16);padding:9px;}
.navitem:hover .dropdown{display:block;}
.di{display:block;padding:10px 14px;border-radius:9px;text-decoration:none;color:#33465f;
  font-size:14.5px;font-weight:bold;white-space:nowrap;}
a.di:hover{background:#edf4fd;color:var(--blue);}
.di.soon{opacity:.4;pointer-events:none;font-weight:normal;}
.di.sub{padding:9px 13px;font-size:14px;}
.di.here{background:#e3eefc;color:var(--blue);}
.dgroup{border-radius:11px;padding:4px;margin-bottom:2px;background:#f6faff;}
.ghead{font-size:11px;font-weight:bold;color:#6b7f9c;padding:7px 13px 4px;letter-spacing:1.2px;}
/* メガメニュー：対戦タブは大枠を横に並べる（CPU戦・対人戦・ソロ・大会）*/
.navitem:hover .dropdown.mega{display:flex;}
.dropdown.mega{flex-direction:row;gap:8px;min-width:0;padding:10px;}
.dropdown.mega .dgroup{flex:1;min-width:186px;margin-bottom:0;display:flex;flex-direction:column;}
.dropdown.mega .ghead{text-align:center;border-bottom:1px solid #e3edf7;margin-bottom:4px;
  padding-bottom:7px;}
/* 右端のログイン状態 */
.navinner .who{display:flex;align-items:center;gap:8px;margin-left:18px;font-size:13.5px;color:#44577a;}
.navinner .who img{width:26px;height:26px;border-radius:50%;}
.navinner .who b{color:#22364f;}
.wbtn{border:1px solid var(--line);background:#fff;color:#44577a;font-size:12.5px;font-weight:bold;
  padding:7px 13px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.wbtn:hover{border-color:var(--blue);color:var(--blue);}
a.wbtn.login{background:#5865f2;border-color:#5865f2;color:#fff;}
a.wbtn.login:hover{background:#4752c4;border-color:#4752c4;color:#fff;}
@media(max-width:820px){
  .navinner .who{margin-left:8px;}
  .navinner{padding:0 14px;gap:2px;}
  .brand{margin-right:12px;font-size:18px;}
  .navitem > .tab{padding:0 9px;font-size:13.5px;min-width:0;}
}


/* ── ハブページ（対戦・構築・コミュニティ）の共通枠 ──
   タブを行き来した時に見出しの位置が動くと落ち着かないので、
   幅・上の余白・見出しの位置を3つとも同じにする。 */
.hub{width:100%;max-width:1280px;padding:96px 26px 60px;}
/* ── ページ共通の骨格（index / taisen / build 等のハブページ）── */
body.page{margin:0;min-height:100vh;color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 45%,var(--bg3));
  font-family:"Yu Gothic UI","Segoe UI",sans-serif;display:flex;flex-direction:column;align-items:center;}
.phead{display:flex;align-items:center;gap:12px;margin:6px 0 20px;}
.phead .bar{width:6px;height:30px;border-radius:3px;background:var(--blue);}
.phead h1{margin:0;font-size:28px;color:#22364f;}
.cards{display:flex;gap:16px;flex-wrap:wrap;}
.card{flex:1;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  text-decoration:none;color:var(--ink);transition:.15s;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 4px 14px rgba(30,60,110,.06);}
a.card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 12px 28px rgba(30,60,110,.16);}
.card.soon{opacity:.55;}
.card .ico{font-size:40px;}
.card .ttl{font-size:19px;font-weight:bold;color:var(--blue);}
.card .desc{font-size:12.5px;color:var(--ink-sub);line-height:1.6;}

/* ── 3列タイル（対戦ハブ）── */
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:start;}
@media(max-width:900px){.cols3{grid-template-columns:1fr;}}
.bigcol{background:#fff;border:1px solid #d3e2f0;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 6px 20px rgba(30,60,110,.07);}
.bigcol.cpu{--ac:#d5453b;} .bigcol.solo{--ac:#25915b;}
.bigcol.center{--ac:#2b74d4;border-color:#bcd6f5;box-shadow:0 12px 30px rgba(43,116,212,.15);}
.colhead{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(16px,1.5vw,20px);font-weight:800;
  padding:2px 0 14px;border-bottom:2px solid #eef4fa;letter-spacing:1px;color:var(--ac);}
.icard{display:flex;flex-direction:row;align-items:center;gap:clamp(10px,1.2vw,16px);height:clamp(78px,9.5vh,104px);
  padding:0 clamp(12px,1.4vw,20px);background:linear-gradient(180deg,#fbfdff,#f2f8fd);border:1.5px solid #e3edf7;border-radius:14px;
  text-decoration:none;color:var(--ink);transition:.16s;}
a.icard:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 14px 28px rgba(30,60,110,.15);}
.icard.soon{opacity:.5;filter:grayscale(.35);}
.icard .ic{width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:14px;font-size:26px;background:color-mix(in srgb, var(--ac) 14%, #fff);color:var(--ac);}
.icard .txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.icard .t{font-size:clamp(14px,1.15vw,16px);font-weight:800;color:var(--ink);}
.icard .d{font-size:clamp(11px,0.95vw,12.5px);color:#6a7c9a;line-height:1.5;}

/* ── 未実装ページの共通プレースホルダ ── */
.stub{background:#fff;border:1px dashed #b7c6da;border-radius:16px;padding:34px;text-align:center;color:var(--ink-sub);line-height:1.9;}
.stub h2{margin:0 0 10px;color:var(--blue);font-size:20px;}