/*
 * theme.css — ポータル（roadto-univ.pages.dev）と、そこから開く各アプリの見た目をそろえる共通の部品
 * （2026-10-20 Fort様「ポータルからそれぞれのアプリに行くじゃん、だからポータルからデザインをかけ離れすぎないようにして」）。
 *
 * 読み込み方（各アプリの <head>、アプリ自身の <style> より前）：
 *   <link rel="stylesheet" href="https://roadto-univ.pages.dev/theme.css">
 * そのうえで、アプリ側の色の変数を下の --pt-* に置き換える（アプリごとの小さな上書き）。
 *
 * 中身：
 *   1. 色と書体の変数（--pt-*）。ダーク＝ポータルのHUD（黒い地・青白い線・琥珀の差し色）、
 *      ライト＝ポータルの「昼の設計図」（白い紙・深い青の線）。端末の設定（prefers-color-scheme）に従う。
 *   2. 部品（使うアプリだけが class を付ける）：
 *      .pt-top / .pt-brand / .pt-where … 上端の帯（「— FORT_DEX」＝ポータルに戻る、右に分類名）
 *      .pt-title                      … 見出し（ひし形＋下線。ポータルの分類見出しと同じ）
 *      .pt-tabs                       … 平行四辺形のタブ（選択中＝塗り）
 *      .pt-btn / .pt-btn.primary       … 角を落としたボタン
 *      .pt-panel                      … 細い線の枠（角丸なし）
 *      .pt-num                        … 数字（Rajdhani）
 *   3. body.pt-bg … ダークのときの地（ポータルと同じ、上から淡い青の光）。
 * 走査線（ポータルの body::after）はアプリでは使わない（文字を読む画面なので）。
 */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

:root {
  --pt-bg: #02060b;
  --pt-bg2: #06121b;          /* 一段明るい面（入力欄・選択肢） */
  --pt-panel: #071520;        /* 枠の中の面 */
  --pt-line: rgba(90, 216, 255, .16);
  --pt-line2: rgba(90, 216, 255, .36);
  --pt-text: #e6f1f5;
  --pt-text2: #93b4c3;
  --pt-text3: #5d7c8a;
  --pt-hud: #5ad8ff;           /* 主の線・選択中 */
  --pt-hud-weak: rgba(90, 216, 255, .10);
  --pt-on-hud: #02121c;        /* 塗りの上の文字 */
  --pt-amber: #ffb347;         /* 差し色（数・ラベル） */
  --pt-amber-weak: rgba(255, 179, 71, .12);
  --pt-red: #d23a2f;
  --pt-crit: #ff5d52;          /* まちがい・警告 */
  --pt-crit-weak: rgba(255, 93, 82, .12);
  --pt-ok: #6fe3a0;            /* 正解・完了 */
  --pt-ok-weak: rgba(111, 227, 160, .11);
  --pt-glow: 0 0 6px rgba(90, 216, 255, .65), 0 0 18px rgba(90, 216, 255, .25);
  --pt-shadow: 0 0 30px -14px rgba(90, 216, 255, .45);
  --pt-hudfont: "Rajdhani", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --pt-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "IPAPGothic", sans-serif;
  --pt-cut: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
@media (prefers-color-scheme: light) {
  :root {
    --pt-bg: #f2f5f8;
    --pt-bg2: #e9eef3;
    --pt-panel: #ffffff;
    --pt-line: rgba(11, 31, 46, .11);
    --pt-line2: rgba(11, 31, 46, .24);
    --pt-text: #0b1f2e;
    --pt-text2: #4a6272;
    --pt-text3: #7a8d99;
    --pt-hud: #0a6d94;
    --pt-hud-weak: rgba(10, 109, 148, .08);
    --pt-on-hud: #ffffff;
    --pt-amber: #a86100;
    --pt-amber-weak: rgba(168, 97, 0, .09);
    --pt-red: #b3261e;
    --pt-crit: #c62828;
    --pt-crit-weak: rgba(198, 40, 40, .08);
    --pt-ok: #1b7a3e;
    --pt-ok-weak: rgba(27, 122, 62, .09);
    --pt-glow: none;
    --pt-shadow: 0 10px 24px -18px rgba(11, 31, 46, .45);
  }
}

/* 地（ダークはポータルと同じ淡い青の光） */
body.pt-bg {
  background: radial-gradient(1100px 700px at 50% -10%, rgba(30, 90, 140, .26), transparent 60%), var(--pt-bg);
  background-attachment: fixed;
  color: var(--pt-text);
  font-family: var(--pt-jp);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: light) { body.pt-bg { background: var(--pt-bg); } }

/* 上端の帯：左＝ポータルに戻る、右＝分類 */
.pt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 12px; font-family: var(--pt-hudfont); }
.pt-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--pt-hud); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .32em; text-shadow: var(--pt-glow); white-space: nowrap; }
.pt-brand i { width: 18px; height: 2px; background: var(--pt-hud); box-shadow: var(--pt-glow); display: inline-block; }
.pt-brand:hover { color: var(--pt-amber); }
.pt-where { font-family: var(--pt-jp); font-size: 12px; letter-spacing: .12em; color: var(--pt-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: light) { .pt-brand i { background: var(--pt-red); } }

/* 見出し：ひし形＋細い下線＋短い青の線（ポータルの分類見出し） */
.pt-title { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--pt-line2); font-family: var(--pt-hudfont), var(--pt-jp); font-weight: 700; letter-spacing: .06em; color: var(--pt-text); line-height: 1.35; }
.pt-title::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--pt-hud); transform: rotate(45deg); box-shadow: var(--pt-glow); }
.pt-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; background: var(--pt-hud); box-shadow: var(--pt-glow); }

/* タブ：平行四辺形、選択中は塗る */
.pt-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs > button, .pt-tabs > a { flex: none; font: inherit; font-family: var(--pt-hudfont), var(--pt-jp); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--pt-text2); background: var(--pt-hud-weak); border: 0; padding: 8px 18px 9px; margin-right: -4px; cursor: pointer; text-decoration: none; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.pt-tabs > .on, .pt-tabs > .active, .pt-tabs > [aria-selected="true"] { color: var(--pt-on-hud); background: var(--pt-hud); }

/* ボタン：角を落とす。primary は塗り */
.pt-btn { font: inherit; font-weight: 700; color: var(--pt-hud); background: var(--pt-hud-weak); border: 1px solid var(--pt-line2); border-color: color-mix(in srgb, var(--pt-hud) 55%, transparent); padding: 8px 16px; cursor: pointer; clip-path: var(--pt-cut); }
.pt-btn:hover { background: color-mix(in srgb, var(--pt-hud) 18%, transparent); }
.pt-btn.primary { color: var(--pt-on-hud); background: var(--pt-hud); border-color: var(--pt-hud); }
.pt-btn.primary:hover { filter: brightness(1.08); }
.pt-btn:disabled { opacity: .45; cursor: default; }

/* 枠 */
.pt-panel { background: var(--pt-panel); border: 1px solid var(--pt-line2); box-shadow: var(--pt-shadow); }
.pt-num { font-family: var(--pt-hudfont); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 印刷は白い紙に（上端の帯は出さない） */
@media print {
  html { background: #fff !important; }
  body.pt-bg { background: #fff !important; color: #000; }
  .pt-top { display: none !important; }
}