/* ===== 割合色ぬりバトル プラグイン CSS =====
   プレフィックス: .wnb- でスコープ化済み
   WordPress テーマとの干渉を防いでいます
===== */

.wnb-root{
    /* 70-25-5（白 / ネイビー / ゴールド） */
    --base:#FFFFFF;
    --base-light:#FAFAFA;
    --base-dark:#F5F5F5;
    --main:#1e3a5f;
    --main-light:#2d5a8f;
    --main-dark:#0f1e3a;
    --accent:#d4af37;
    --accent-light:#f4cf5f;
    --accent-dark:#b8941f;
    --text:#2C3E50;
    --muted:#7F8C8D;
    --border:#E8E8E8;
    --shadow: 0 4px 20px rgba(30, 58, 95, 0.10);
    --shadow-hover: 0 8px 30px rgba(30, 58, 95, 0.15);

    --good:#2dd4bf;
    --bad:#fb7185;
    --line:var(--border);
    --tile:rgba(30, 58, 95, .04);
    --tileOn:rgba(45, 90, 143, .68);
    --radius:16px;
  }
  .wnb-root *{box-sizing:border-box}
  .wnb-root{
    /* 高さはJSで動的設定（WordPress管理バー・テーマヘッダー考慮） */
    /* JSが動く環境では --wnb-vh を更新して 100dvh 相当で安定させる */
    width:100%;
    height:calc(var(--wnb-vh, 1vh) * 100);
    min-height:100vh; /* JS未起動/非対応環境のフォールバック */
    overflow:hidden;
    position:relative;
    font-family: 'BIZ UDGothic', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 50%, #F0F2F5 100%);
    color:var(--text);
  }
  .wnb-root .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:10px;
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
  }
  .wnb-root .screen{ display:none; height:100%; overflow:hidden; }
  /* screen.activeをflexにして子要素に高さを伝達 */
  .wnb-root .screen.active{ display:flex; flex-direction:column; }
  .wnb-root .centerPage{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    overflow:hidden;
  }
  .wnb-root .page{
    width:min(980px, 96vw);
    max-height:calc(100% - 24px); /* 上下padding分を引く */
    background: var(--base);
    border:2px solid var(--border);
    border-radius:18px;
    box-shadow: var(--shadow-hover);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .wnb-root .pageHead{
    padding:10px 14px;
    border-bottom:2px solid var(--border);
    color: var(--main);
    font-weight:900;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .wnb-root .pageBody{
    padding:10px 14px;
    flex:1;
    overflow-y:auto; /* 万が一コンテンツが多くてもpage内でスクロール */
    min-height:0;
  }
  .wnb-root .card{
    background: var(--base);
    border:2px solid var(--border);
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1 1 0; /* wrapの残り高さをすべて使う */
  }
  .wnb-root .card h2{
    margin:0;
    padding:10px 14px;
    font-size:16px;
    letter-spacing:.02em;
    border-bottom:2px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color: var(--main);
    position: relative;
    flex-shrink:0;
  }
  /* 上部アクセントライン */
  .wnb-root .card h2::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  }
  .wnb-root .badge{
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(212,175,55,.18);
    border:1px solid rgba(212,175,55,.45);
    color: var(--main);
    white-space:nowrap;
  }
  .wnb-root .content{
    padding:6px 12px;
    overflow:hidden;
    min-height:0;
    flex:1 1 0;        /* cardの残り高さをすべて使う */
    display:flex;
    flex-direction:column;
  }
  .wnb-root .gridWrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:4px;
    flex:1 1 0;        /* contentの残り高さをすべて使う */
    min-height:0;
    overflow:hidden;
  }
  .wnb-root canvas{
    /* flex親(gridWrap)の高さに合わせて正方形で収まる */
    width:auto;
    height:100%;
    max-width:100%;
    aspect-ratio:1/1;
    background: var(--base);
    border:2px solid var(--border);
    border-radius:14px;
    touch-action:none;
    display:block;
  }
  .wnb-root .overlay{
    position:fixed; inset:0;
    background: rgba(15,30,58,.20);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    z-index:9999;
  }
  .wnb-root .modal{
    width:min(920px, 96vw);
    background: var(--base);
    border:2px solid var(--border);
    border-radius:18px;
    box-shadow: var(--shadow-hover);
    overflow:hidden;
  }
  .wnb-root .modalHead{
    padding:14px 16px;
    border-bottom:2px solid var(--border);
    color: var(--main);
    font-weight:900;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .wnb-root .modalBody{ padding:14px 16px; }
  .wnb-root .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
  .wnb-root .box{ border:2px solid var(--border); background: var(--base-light); border-radius:14px; padding:8px 10px; }
  .wnb-root .box h3{ margin:0 0 5px; font-size:13px; color: var(--main); }
  .wnb-root .radioRow{ display:flex; gap:8px; flex-wrap:wrap; }
  .wnb-root .radioRow label{ display:flex; gap:5px; align-items:center; font-weight:700; color: var(--text); font-size:13px; }
  .wnb-root .mini2{ font-size:11px; color: var(--muted); margin-top:4px; }
  .wnb-root .big{
    font-size:38px;
    font-weight:800;
    letter-spacing:.02em;
    line-height:1;
    margin:6px 0 8px;
  }
  .wnb-root .muted{ color:var(--muted); font-size:13px; }
  .wnb-root .btn{
    border:none;
    background: var(--base-light);
    color:var(--text);
    border:2px solid var(--border);
    padding:7px 11px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    touch-action:manipulation;
    font-size:13px;
  }
  .wnb-root .btn.primary{
    background: linear-gradient(135deg, var(--main-light) 0%, var(--main) 100%);
    border-color: var(--main);
    color:#fff;
  }
  .wnb-root .btn.good{
    background: rgba(45,212,191,.16);
    border-color: rgba(45,212,191,.42);
  }
  .wnb-root .btn.bad{
    background: rgba(251,113,133,.14);
    border-color: rgba(251,113,133,.4);
  }
  .wnb-root .btn:active{ transform: translateY(1px); }
  .wnb-root .gridWrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:4px;
  }
  .wnb-root .stats{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-top:10px;
  }
  .wnb-root .stat{
    background: var(--base-light);
    border:2px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
  }
  .wnb-root .stat .k{ font-size:12px; color:var(--muted); }
  .wnb-root .stat .v{ font-size:18px; font-weight:800; margin-top:6px; }
  .wnb-root table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:12px;
    border:2px solid var(--border);
    background: var(--base);
  }
  .wnb-root th, .wnb-root td{
    padding:10px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:14px;
    text-align:left;
  }
  .wnb-root th{ color: var(--main); background: var(--base-dark); }
  .wnb-root tr:last-child td{ border-bottom:none; }
  .wnb-root .pill{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    border:1px solid var(--border);
    background: var(--base-dark);
    color: var(--main);
  }
  .wnb-root .split{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .wnb-root .smallInput{
    width:100%;
    padding:7px 10px;
    border-radius:12px;
    border:2px solid var(--border);
    background: var(--base);
    color: var(--text);
    outline:none;
    font-size:13px;
  }

  /* ===== 設定画面 新デザイン ===== */
  /* タイトルヘッダー */
  .wnb-root .setup-header{
    background: var(--main);
    border-top: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    border-radius: 16px;
    padding: 14px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(30,58,95,0.3);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
  }
  .wnb-root .setup-header::before{
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent);
    animation: setupShine 3s infinite;
  }
  @keyframes setupShine { 0%{left:-100%} 100%{left:100%} }

  .wnb-root .setup-title{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: clamp(22px, 4vw, 34px);
    color: #fff;
    line-height: 1.1;
  }
  .wnb-root .setup-title span{ color: var(--accent); }
  .wnb-root .setup-subtitle{
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 6px;
    line-height: 1.6;
  }

  /* 設定パネル（白カード） */
  .wnb-root .setup-panel{
    background: var(--base);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    position: relative;
    box-shadow: var(--shadow);
  }
  .wnb-root .setup-panel::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
    border-radius: 14px 14px 0 0;
  }
  .wnb-root .setup-panel-title{
    font-size: 11px;
    font-weight: 700;
    color: var(--main);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* モード選択ボタン（グリッド） */
  .wnb-root .mode-grid{
    display: grid;
    gap: 6px;
  }
  .wnb-root .mode-grid.col3{ grid-template-columns: repeat(3,1fr); }
  .wnb-root .mode-grid.col4{ grid-template-columns: repeat(4,1fr); }
  .wnb-root .mode-grid.col5{ grid-template-columns: repeat(5,1fr); }
  .wnb-root .mode-grid.col2{ grid-template-columns: repeat(2,1fr); }

  .wnb-root .mode-btn{
    padding: 8px 4px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-family: 'BIZ UDGothic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    background: var(--base);
    color: var(--text);
    box-shadow: 0 2px 6px rgba(30,58,95,0.06);
    text-align: center;
    line-height: 1.3;
  }
  .wnb-root .mode-btn:hover{ border-color: var(--accent); background: #fffcf5; transform: translateY(-2px); }
  .wnb-root .mode-btn.active{
    background: var(--main); color: var(--accent);
    border-color: var(--main);
    box-shadow: 0 6px 16px rgba(30,58,95,0.28);
    transform: scale(1.03);
  }
  .wnb-root .mode-btn .mb-sub{ font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
  .wnb-root .mode-btn.active .mb-sub{ color: rgba(255,255,255,0.65); }

  /* 分母チップ */
  .wnb-root .denom-grid{ display: flex; flex-wrap: wrap; gap: 5px; }
  .wnb-root .denom-chip{
    padding: 5px 10px;
    border: 2px solid var(--border);
    border-radius: 20px;
    font-family: 'BIZ UDGothic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: var(--base);
    color: var(--text);
    transition: all 0.18s;
  }
  .wnb-root .denom-chip:hover{ border-color: var(--accent); background: #fffcf5; }
  .wnb-root .denom-chip.active{
    background: var(--main); color: var(--accent);
    border-color: var(--main);
  }

  /* ％・小数の詳細設定行 */
  .wnb-root .detail-row{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
  }
  .wnb-root .detail-row select, .wnb-root .detail-row input[type=number]{
    padding: 5px 8px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--base);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    outline: none;
    font-family: 'BIZ UDGothic', sans-serif;
  }
  .wnb-root .detail-row input[type=number]{ width: 60px; }

  /* スタートボタン */
  .wnb-root .start-btn{
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--main-light), var(--main));
    color: #fff;
    border: none;
    border-radius: 13px;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(30,58,95,0.28);
    letter-spacing: .04em;
  }
  .wnb-root .start-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30,58,95,0.38); }

  .wnb-root .reset-btn{
    width: 100%;
    padding: 9px;
    background: rgba(251,113,133,0.1);
    color: var(--bad, #fb7185);
    border: 2px solid rgba(251,113,133,0.35);
    border-radius: 11px;
    font-family: 'BIZ UDGothic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
  }
  .wnb-root .reset-btn:hover{ background: rgba(251,113,133,0.2); }

  /* 設定画面レイアウト */
  .wnb-root .setup-layout{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    gap: 8px;
    overflow: hidden;
  }
  .wnb-root .setup-layout > *{ width: 100%; max-width: 720px; }
  .wnb-root .setup-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wnb-root .setup-cols-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

  /* ゲーム画面ヘッダー刷新 */
  .wnb-root .game-topbar{
    background: var(--main);
    border-top: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    border-radius: 12px;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 12px rgba(30,58,95,0.22);
    flex-shrink: 0;
  }
  .wnb-root .game-topbar-title{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 17px;
    color: #fff;
  }
  .wnb-root .game-topbar-title span{ color: var(--accent); }
  .wnb-root .game-topbar-right{ display: flex; gap: 6px; align-items: center; }
  .wnb-root .topbar-badge{
    background: rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
  }
  .wnb-root .topbar-badge span{ color: var(--accent); }

  /* ゲーム画面ボタンエリア刷新 */
  .wnb-root .game-btn-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
    flex-shrink: 0; /* contentのflex内で縮まないよう固定 */
  }
  .wnb-root .gbtn{
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'BIZ UDGothic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--border);
    background: var(--base);
    color: var(--text);
    transition: all 0.18s;
    touch-action: manipulation;
  }
  .wnb-root .gbtn:hover{ transform: translateY(-1px); }
  .wnb-root .gbtn.submit{
    background: rgba(45,212,191,.14);
    border-color: rgba(45,212,191,.45);
    color: #0d7a6e;
  }
  .wnb-root .gbtn.clear{
    background: rgba(251,113,133,.12);
    border-color: rgba(251,113,133,.4);
    color: #be3a52;
  }

  /* 結果画面 刷新 */
  .wnb-root .result-layout{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    gap: 8px;
    overflow: hidden;
  }
  .wnb-root .result-layout > *{ width: 100%; max-width: 700px; }
  .wnb-root .result-header-card{
    background: var(--main);
    border: 3px solid var(--accent);
    border-radius: 16px;
    padding: 14px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(30,58,95,0.3);
  }
  .wnb-root .result-header-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  }
  .wnb-root .result-score-big{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: clamp(40px, 8vw, 64px);
    color: var(--accent);
    line-height: 1;
  }
  .wnb-root .result-detail{
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
  }
  .wnb-root .result-group-badge{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
  }
  .wnb-root .result-body-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wnb-root .result-card{
    background: var(--base);
    border: 2px solid var(--border);
    border-radius: 13px;
    padding: 10px 12px;
    position: relative;
  }
  .wnb-root .result-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
    border-radius: 13px 13px 0 0;
  }
  .wnb-root .result-card-title{
    font-size: 11px;
    font-weight: 700;
    color: var(--main);
    margin-bottom: 7px;
  }
  .wnb-root .result-action-row{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .wnb-root .rbtn{
    flex: 1;
    padding: 9px 8px;
    border-radius: 10px;
    font-family: 'BIZ UDGothic', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--border);
    background: var(--base);
    color: var(--text);
    transition: all 0.18s;
    text-align: center;
    touch-action: manipulation;
    white-space: nowrap;
  }
  .wnb-root .rbtn.primary{
    background: linear-gradient(135deg, var(--main-light), var(--main));
    color: #fff;
    border-color: var(--main);
    box-shadow: 0 3px 10px rgba(30,58,95,0.22);
  }
  .wnb-root .rbtn.primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30,58,95,0.3); }
  .wnb-root .rbtn:hover:not(.primary){ border-color: var(--accent); background: #fffcf5; }

  /* 図形ボタン：SVGプレビューを中央に */
  .wnb-root .shape-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
  }
  .wnb-root .shape-preview{
    display: block;
    color: var(--muted);
    transition: color 0.18s;
    margin-top: 2px;
  }
  .wnb-root .shape-btn.active .shape-preview{ color: var(--main); }
  .wnb-root .shape-btn:hover .shape-preview{ color: var(--main-light); }

  /* グループ数ボタン：数字のみ大きく */
  .wnb-root .group-num-btn{
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 20px;
    padding: 8px 4px;
    line-height: 1;
  }