<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>行政書士試験モード ○×クイズ</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --civil:#6366f1;--admin:#0ea5e9;--const:#10b981;--company:#ec4899;--misc:#f59e0b;--basic:#a78bfa;
  --bg:#0f172a;--surface:#1e293b;--surface2:#334155;--text:#e2e8f0;--muted:#94a3b8;
  --accent:#f59e0b;--green:#10b981;--red:#ef4444;--yellow:#eab308;
}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',sans-serif;min-height:100vh}

/* SCREENS */
.screen{display:none;min-height:100vh;padding:20px}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* START */
#startScreen{gap:20px;text-align:center}
.quiz-logo{font-size:2.6rem;font-weight:900;background:linear-gradient(135deg,var(--accent),#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.quiz-sub{color:var(--muted);font-size:.95rem;margin-top:-14px}
.start-card{background:var(--surface);border-radius:16px;padding:24px;width:100%;max-width:500px;display:flex;flex-direction:column;gap:14px}
.start-card label{font-size:.82rem;color:var(--muted);margin-bottom:3px;display:block}
.start-card input[type=text]{width:100%;padding:9px 13px;background:var(--surface2);border:1px solid #475569;border-radius:8px;color:var(--text);font-size:1rem}
.start-card input[type=text]:focus{outline:none;border-color:var(--accent)}
.filter-row{display:flex;flex-wrap:wrap;gap:7px}
.filter-chip{padding:5px 11px;border-radius:20px;border:1.5px solid #475569;background:transparent;color:var(--muted);cursor:pointer;font-size:.78rem;transition:.15s}
.filter-chip.on{border-color:var(--accent);background:rgba(245,158,11,.15);color:var(--accent)}
.row2{display:flex;gap:10px;align-items:center}
.row2 select{flex:1;padding:7px 10px;background:var(--surface2);border:1px solid #475569;border-radius:8px;color:var(--text);font-size:.9rem}
.btn-start{padding:13px;background:linear-gradient(135deg,var(--accent),#f97316);border:none;border-radius:10px;color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;transition:.2s}
.btn-start:hover{filter:brightness(1.1)}

/* QUIZ */
#quizScreen{justify-content:flex-start;padding:14px;gap:0}
.quiz-header{width:100%;max-width:680px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.q-num{font-size:.82rem;color:var(--muted);white-space:nowrap}
.progress-bar{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);transition:width .3s}
.timer-box{font-size:1.05rem;font-weight:700;color:var(--accent);min-width:52px;text-align:right}
.timer-box.warn{color:var(--red)}

.quiz-card{width:100%;max-width:680px;background:var(--surface);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.dom-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dom-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.73rem;font-weight:700;color:#fff}
.dom-badge.dom-civil{background:var(--civil)} .dom-badge.dom-admin{background:var(--admin)}
.dom-badge.dom-const{background:var(--const)} .dom-badge.dom-company{background:var(--company)}
.dom-badge.dom-misc{background:var(--misc)}   .dom-badge.dom-basic{background:var(--basic)}
.rk-badge{padding:2px 8px;border-radius:5px;font-size:.72rem;font-weight:700}
.rkA{background:#fef3c7;color:#92400e} .rkB{background:#dbeafe;color:#1e40af} .rkC{background:#f3f4f6;color:#374151}
.q-topic{font-size:.8rem;color:var(--muted);font-weight:600}

/* Statement box */
.stmt-box{background:var(--surface2);border-radius:12px;padding:16px 18px;font-size:1rem;line-height:1.75;color:#f1f5f9;border-left:4px solid var(--accent)}
.stmt-label{font-size:.68rem;font-weight:800;color:var(--accent);letter-spacing:.1em;margin-bottom:8px}

/* OX buttons */
.ox-row{display:flex;gap:14px}
.ox-btn{flex:1;padding:20px 10px;border-radius:14px;border:3px solid;font-size:2rem;font-weight:900;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:4px}
.ox-btn span.ox-label{font-size:.75rem;font-weight:600}
.ox-btn:active{transform:scale(.96)}
.btn-maru{background:rgba(16,185,129,.12);color:var(--green);border-color:var(--green)}
.btn-maru:hover{background:rgba(16,185,129,.25)}
.btn-batsu{background:rgba(239,68,68,.12);color:var(--red);border-color:var(--red)}
.btn-batsu:hover{background:rgba(239,68,68,.25)}
.ox-btn.disabled{pointer-events:none;opacity:.5}
.ox-btn.selected-correct{background:rgba(16,185,129,.35);border-color:var(--green)}
.ox-btn.selected-wrong{background:rgba(239,68,68,.35);border-color:var(--red)}

/* Feedback */
.feedback{display:none;flex-direction:column;gap:10px;animation:fadeIn .2s ease}
.feedback.show{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fb-banner{padding:12px 16px;border-radius:10px;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.fb-correct{background:rgba(16,185,129,.18);border:1.5px solid var(--green);color:var(--green)}
.fb-wrong{background:rgba(239,68,68,.18);border:1.5px solid var(--red);color:var(--red)}
.fb-expl{background:rgba(99,102,241,.1);border-left:3px solid #6366f1;border-radius:8px;padding:12px 14px;font-size:.87rem;line-height:1.7;color:var(--text)}
.fb-expl .fb-expl-lbl{font-size:.68rem;font-weight:800;color:#818cf8;margin-bottom:5px}

.btn-next{padding:12px;background:var(--accent);border:none;border-radius:10px;color:#1a1a2e;font-size:.95rem;font-weight:800;cursor:pointer;transition:.2s}
.btn-next:hover{filter:brightness(1.1)}

/* RESULT */
#resultScreen{gap:22px}
.result-card{background:var(--surface);border-radius:16px;padding:28px;width:100%;max-width:500px;display:flex;flex-direction:column;gap:16px;text-align:center}
.result-logo{font-size:2.4rem;font-weight:900;background:linear-gradient(135deg,var(--accent),#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.result-name{font-size:.9rem;color:var(--muted)}
.result-score{font-size:3.5rem;font-weight:900;line-height:1}
.score-green{color:var(--green)} .score-yellow{color:var(--yellow)} .score-red{color:var(--red)}
.result-pct{font-size:.95rem;color:var(--muted)}
.result-detail{display:flex;justify-content:center;gap:24px}
.rd-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.rd-num{font-size:1.6rem;font-weight:800}
.rd-lbl{font-size:.72rem;color:var(--muted)}
.btn-group{display:flex;gap:10px}
.btn-retry{flex:1;padding:11px;background:var(--surface2);border:1px solid #475569;border-radius:8px;color:var(--text);cursor:pointer;font-size:.9rem}
.btn-rank{flex:1;padding:11px;background:linear-gradient(135deg,var(--accent),#f97316);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:700}

/* RANKING */
#rankScreen{gap:18px}
.rank-card{background:var(--surface);border-radius:16px;padding:22px;width:100%;max-width:500px;display:flex;flex-direction:column;gap:14px}
.rank-card h2{font-size:1.2rem;font-weight:800;color:var(--accent);text-align:center}
.rank-table{display:flex;flex-direction:column;gap:7px}
.rank-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface2);border-radius:8px}
.rank-pos{font-size:1.05rem;font-weight:800;min-width:26px;text-align:center}
.rank-pos.gold{color:#f59e0b} .rank-pos.silver{color:#94a3b8} .rank-pos.bronze{color:#b45309}
.rank-name{flex:1;font-size:.88rem}
.rank-meta{font-size:.72rem;color:var(--muted)}
.rank-score{font-size:.95rem;font-weight:700;color:var(--accent)}
.rank-empty{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}
.btn-back{width:100%;padding:11px;background:var(--surface2);border:1px solid #475569;border-radius:8px;color:var(--text);cursor:pointer}
</style>
</head>
<body>

<div id="startScreen" class="screen active">
  <div class="quiz-logo">⚖ 試験モード</div>
  <div class="quiz-sub">○× クイズ — 行政書士試験対策</div>
  <div class="start-card">
    <div>
      <label>お名前（ランキングに表示）</label>
      <input type="text" id="nameInput" placeholder="例：田中太郎" maxlength="20">
    </div>
    <div>
      <label>出題領域（複数選択可）</label>
      <div class="filter-row" id="domainFilters">
        <button class="filter-chip on" data-domain="civil">民法</button>
        <button class="filter-chip on" data-domain="admin">行政法</button>
        <button class="filter-chip on" data-domain="const">憲法</button>
        <button class="filter-chip on" data-domain="company">会社法</button>
        <button class="filter-chip on" data-domain="misc">諸法令</button>
        <button class="filter-chip on" data-domain="basic">基礎法学</button>
      </div>
    </div>
    <div class="row2">
      <label style="white-space:nowrap">出題数</label>
      <select id="countSelect">
        <option value="5">5問</option>
        <option value="10" selected>10問</option>
        <option value="20">20問</option>
        <option value="30">30問</option>
        <option value="50">50問</option>
        <option value="999">全問</option>
      </select>
      <label style="white-space:nowrap">制限時間</label>
      <select id="timerSelect">
        <option value="20">20秒</option>
        <option value="30" selected>30秒</option>
        <option value="60">60秒</option>
        <option value="0">なし</option>
      </select>
    </div>
    <button class="btn-start" onclick="startQuiz()">試験開始 →</button>
  </div>

  <div class="btn-group" style="display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; flex-wrap: nowrap; width: 100%; max-width: 500px;">
    <a href="index.html" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap;">
      ↩ 道場に戻る
    </a>
    <button class="btn-rank" onclick="showRanking()" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border: none; border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;">
      🏆 ランキング
    </button>
    <a href="https://px.a8.net/svt/ejp?a8mat=4B3SN2+4VMW8I+408S+HVFKY" rel="nofollow" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap;">
      🎁 通信講座
    </a>
    <img border="0" width="1" height="1" src="https://www13.a8.net/0.gif?a8mat=4B3SN2+4VMW8I+408S+HVFKY" alt="" style="display: none;">
  </div>
</div>

<div id="quizScreen" class="screen">
  <div class="quiz-header">
    <span class="q-num" id="qNum">1 / 10</span>
    <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width:0%"></div></div>
    <div class="timer-box" id="timerBox">⏱ 30</div>
  </div>
  <div class="quiz-card" id="quizCard"></div>
</div>

<div id="resultScreen" class="screen">
  <div class="result-logo">結果発表</div>
  <div class="result-card">
    <div class="result-name" id="resultName"></div>
    <div class="result-score" id="resultScore"></div>
    <div class="result-pct" id="resultPct"></div>
    <div class="result-detail">
      <div class="rd-item"><div class="rd-num score-green" id="resCorrect">0</div><div class="rd-lbl">○ 正解</div></div>
      <div class="rd-item"><div class="rd-num score-red"   id="resWrong">0</div><div class="rd-lbl">✗ 不正解</div></div>
      <div class="rd-item"><div class="rd-num" style="color:var(--muted)" id="resSkip">0</div><div class="rd-lbl">時間切れ</div></div>
    </div>
    
    <div class="btn-group" style="display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; flex-wrap: nowrap;">
      <button class="btn-retry" onclick="showStart()" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border: none; border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;">
        ↩ 道場に戻る
      </button>
      <button class="btn-rank" onclick="showRanking()" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border: none; border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;">
        🏆 ランキング
      </button>
      <a href="https://px.a8.net/svt/ejp?a8mat=4B3SN2+4VMW8I+408S+HVFKY" rel="nofollow" style="flex: 1; padding: 10px 16px; background: linear-gradient(135deg, #f59e0b, #f97316); border-radius: 20px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap;">
        🎁 通信講座
      </a>
    </div>
  </div>
</div>

<div id="rankScreen" class="screen">
  <div class="quiz-logo" style="font-size:1.8rem">🏆 ランキング</div>
  <div class="rank-card">
    <h2>トップ20</h2>
    <div class="rank-table" id="rankTable"></div>
  </div>
  <button class="btn-back" onclick="showStart()">← 戻る</button>
</div>

<script src="goukaku-questions.js"></script>
<script>
/* ===== STATE ===== */
let queue = [];
let curIdx = 0;
let correct = 0, wrong = 0, skipped = 0;
let timerInterval = null;
let timerMax = 30;
let timerLeft = 30;
let userName = '';
let answered = false;

const DM = {
  civil:{label:'民法',cls:'dom-civil'}, admin:{label:'行政法',cls:'dom-admin'},
  'const':{label:'憲法',cls:'dom-const'}, company:{label:'会社法',cls:'dom-company'},
  misc:{label:'諸法令',cls:'dom-misc'}, basic:{label:'基礎法学',cls:'dom-basic'},
};

const RANK_KEY = 'gyosho_ox_ranking_v2';
const NAME_KEY = 'gyosho_quiz_name';

/* ===== SCREEN HELPERS ===== */
function showScreen(id) {
  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
  document.getElementById(id).classList.add('active');
}
function showStart()   { clearInterval(timerInterval); showScreen('startScreen'); }
function showRanking() { renderRanking(); showScreen('rankScreen'); }

document.querySelectorAll('.filter-chip').forEach(b => {
  b.addEventListener('click', () => b.classList.toggle('on'));
});

/* ===== START ===== */
function startQuiz() {
  userName = document.getElementById('nameInput').value.trim() || '匿名';
  if (userName !== '匿名') localStorage.setItem(NAME_KEY, userName);
  const onDomains = [...document.querySelectorAll('#domainFilters .filter-chip.on')].map(b=>b.dataset.domain);
  if (!onDomains.length) { alert('領域を1つ以上選択してください'); return; }

  const pool = (typeof GOUKAKU_QS !== 'undefined' ? GOUKAKU_QS : [])
    .filter(q => q && onDomains.includes(q.domain));
  if (!pool.length) { alert('条件に一致する問題がありません'); return; }

  const count = parseInt(document.getElementById('countSelect').value);
  timerMax = parseInt(document.getElementById('timerSelect').value);

  queue = [...pool].sort(() => Math.random() - .5).slice(0, count);
  curIdx = 0; correct = 0; wrong = 0; skipped =