/* ===== 牌検Lab トップページ「G案」 =====
   モック（scratchpad/topmock/g.html）を忠実に再現する。配色・書体・寸法は
   モックの値をそのまま踏襲し、恣意的な調整はしない。
   機能部分（自席選択・進捗表示等の既存UI）は旧input.cssの当該クラスを
   引き継ぎ、新トークン名にエイリアスして接続している。 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== M PLUS 2（自前配信） =====
   reviewer最終レビュー指摘（ユーザー裁定）: Google Fontsへの外部通信をやめ、
   SIL OFLライセンスのM PLUS 2を自前配信する。
   取得元: https://github.com/google/fonts/blob/main/ofl/mplus2/MPLUS2%5Bwght%5D.ttf
          （可変フォント、2026-09-30取得）
   ライセンス文: webapp/static/fonts/OFL.txt（同梱）
   トップページHTML/JSに実際に出る文字（ASCII＋ひらがな・カタカナ・CJK記号・
   全角記号＋使用漢字133字）だけに絞ったwoff2をfonttools(pyftsubset)で作成。
   動的な文字（ファイル名・プレイヤー名・サーバー由来の進捗文言等）は、
   font-familyの後段に指定したOSフォントで表示される前提。
   font-display:swap でフォント読み込み中もテキストを表示する。 */
@font-face {
    font-family: "M PLUS 2";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/mplus2-400.woff2?v=1") format("woff2");
}
@font-face {
    font-family: "M PLUS 2";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/static/fonts/mplus2-500.woff2?v=1") format("woff2");
}
@font-face {
    font-family: "M PLUS 2";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/mplus2-600.woff2?v=1") format("woff2");
}
@font-face {
    font-family: "M PLUS 2";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/mplus2-700.woff2?v=1") format("woff2");
}
@font-face {
    font-family: "M PLUS 2";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/static/fonts/mplus2-800.woff2?v=1") format("woff2");
}

:root {
    --main:    hsl(210, 20%, 8%);
    --surface: hsl(210, 18%, 12%);
    --surface2: hsl(210, 16%, 16%);
    --text:    hsla(210, 20%, 93%, .92);
    --dim:     hsla(210, 15%, 78%, .72);
    --faint:   hsla(210, 15%, 78%, .45);
    --border:  hsla(205, 16%, 62%, .18);
    --green:   hsl(160, 40%, 38%);
    --mint:    hsl(160, 45%, 62%);
    --danger:  hsl(0, 78%, 67%);
    --felt:    hsl(160, 18%, 16%);
    --reach:   hsl(280, 55%, 72%);
    --r: 12px;

    /* 旧トークン名との互換エイリアス（self-seat-box等、既存の機能CSSが参照する） */
    --bg-main: var(--main);
    --bg-card: var(--surface);
    --bg-input: var(--surface2);
    --bg-dark: var(--main);
    --text-dim: var(--dim);
    --accent: var(--green);
    --accent-dim: hsl(160, 40%, 28%);
    --accent-bg: hsla(160, 40%, 38%, .12);
    --warn: hsl(40, 55%, 48%);
    --error: var(--danger);
}

html, body { overflow-x: clip; }
body {
    background: var(--main);
    color: var(--text);
    font-family: "M PLUS 2", -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none; }

.page { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ===== ヘッダー ===== */
header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 0;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 34px; display: block; }
.brand span { font-size: 19px; font-weight: 700; }
header a { color: var(--dim); font-size: 14px; text-decoration: none; }
header a:hover { color: var(--text); }

/* ===== ヒーロー ===== */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: 56px; align-items: start;
    padding: 28px 0 72px;
}
h1 { font-size: 48px; font-weight: 800; line-height: 1.2; }
.sub { font-size: 16px; color: var(--dim); margin-top: 14px; line-height: 1.8; }

/* ===== 2つの入口 ===== */
/* grid-template-columns省略時の暗黙列は内容のmin-content幅まで広がりうるため、
   minmax(0,1fr)で明示し常にコンテナ幅に収める（375px幅での見切れ対策） */
.doors { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* 送信中は薄暗くして操作不可にする（進捗カードは同じ位置のすぐ下に表示） */
.doors.pending { opacity: 0.5; pointer-events: none; }
.door {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 16px 18px;
}
.door-h {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; color: var(--dim); margin-bottom: 10px;
}
.door-h b { color: var(--text); font-size: 15px; }
.url {
    display: flex; background: var(--main); border: 1px solid var(--border);
    border-radius: 9px; padding: 5px;
}
.url input {
    flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
    font: inherit; font-size: 15px; padding: 10px; outline: none;
}
.url input::placeholder { color: var(--faint); }
/* reviewer最終レビュー指摘【中3】: input側のoutline:noneに代わるフォーカス表示が
   無かった。外側の.url枠をfocus-withinで色付けする（入力欄自体に枠を足すと
   .urlの内側paddingとずれて二重枠になるため、外枠側で表現する）。 */
.url:focus-within { border-color: var(--green); }
/* ボタン・リンク類は:focus-visibleで統一したフォーカスリングを出す */
.btn:focus-visible,
.store:focus-visible,
.hint-link-btn:focus-visible,
.self-seat-link-btn:focus-visible,
.self-seat-option-btn:focus-visible,
.moment-link:focus-visible,
header a:focus-visible,
footer a:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}
.btn {
    font: inherit; font-weight: 700; font-size: 14.5px; border: 0; border-radius: 7px;
    background: var(--green); color: #fff; padding: 0 20px; white-space: nowrap;
    cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--accent-dim); }
.btn:disabled { background: var(--surface2); color: var(--faint); cursor: not-allowed; }
.ms { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* #ms-not-installed 自体を.msと同じ横並びのflex行にし、.flowとstore-links/pendingを
   横に並べる（司令塔レビュー指摘: このdivがブロック要素のままだったため
   「Chromeに追加」が下に落ちていた。1440px幅ではモックどおり横並びに、
   幅が足りないスマホでは折り返す）。 */
#ms-not-installed { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.flow { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dim); flex-wrap: wrap; }
.fake-btn {
    /* extension/content.js の#haiken-lab-btnスタイル（201行付近）と同じ見た目
       （アイコン＋文字、gap 6px）。背景色は2026-09-30の実物側の変更
       （フクロウの体色#2a6a4fとの同化回避）に合わせ hsl(160,40%,35%) にした。 */
    background: hsl(160,40%,35%); color: #fff; font-weight: bold; font-size: 14px;
    padding: 10px 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.5);
    font-family: -apple-system, sans-serif; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.fake-btn img { display: block; flex: none; }
/* じゃんたまの牌譜画面を模した枠（司令塔レビュー指摘: 実物ボタンだけだと
   緑で目立ちすぎ、押せない主ボタンより目立って見えていたため、
   「画面の中の一部」だと分かる暗い枠で囲む。雀魂のUI自体は描かない無地の枠）。
   ボタンは枠の右下に配置し、操作対象ではないためpointer-events:none・cursor:default。 */
.fake-screen {
    width: 176px; height: 108px;
    background: var(--main);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    flex: none;
    pointer-events: none;
    cursor: default;
}
.fake-screen .fake-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.store {
    font: inherit; border: 1px solid var(--border); color: var(--text); background: transparent;
    font-size: 13.5px; font-weight: 700; border-radius: 7px; padding: 9px 14px;
    white-space: nowrap; text-decoration: none; display: inline-block; text-align: center;
    cursor: pointer;
}
.store:hover { border-color: var(--green); color: var(--mint); }
.store:disabled { color: var(--faint); cursor: not-allowed; }
.store:disabled:hover { border-color: var(--border); color: var(--faint); }
/* .store{display:inline-block}と.hidden{display:none}の詳細度同点問題を同様に上書き
   （install-chrome/install-firefoxを個別にhidden化するケースがあるため） */
.store.hidden { display: none; }
.store small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); text-align: center; }
.store-links { display: flex; gap: 8px; flex-wrap: wrap; }
/* .hidden{display:none}（0,1,0）と.store-links{display:flex}（0,1,0）は詳細度が
   同点で、後方に書かれた側がカスケードで勝ってしまうため、複合セレクタ（0,2,0）
   で明示的に上書きする（過去のreviewer指摘【高2】と同種のバグ、2026-09-29混入）。 */
.store-links.hidden { display: none; }
.drop { margin-top: 4px; font-size: 13px; color: var(--faint); }
.hint-link-btn {
    background: none; border: 0; color: var(--dim); font: inherit; font-size: 13px;
    text-decoration: underline; cursor: pointer; padding: 0; margin-left: 4px;
}
.hint-link-btn:hover { color: var(--text); }

/* ページ全体へのファイルドロップ時のオーバーレイ */
.page-drop-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: hsla(210, 20%, 8%, .88);
    border: 3px dashed var(--green);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.page-drop-overlay p {
    font-size: 20px; font-weight: 700; color: var(--text);
}
/* 同上の理由（.hidden vs display:flex の詳細度同点問題）で複合セレクタで上書き */
.page-drop-overlay.hidden { display: none; }

/* ===== 答え合わせカード ===== */
.moment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.m-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 20px; font-size: 14px; color: var(--dim);
    border-bottom: 1px solid var(--border);
}
.m-head .reach { color: var(--reach); font-weight: 700; }
.table { background: var(--felt); padding: 22px 16px 16px; }
.hand { display: flex; gap: 3px; justify-content: center; }
.t { width: 32px; height: 42px; display: flex; flex: none; }
/* ビューアーと同じ描き方: 画像を枠いっぱいに、角丸3px、台紙や影なし */
.t img { width: 100%; height: 100%; border-radius: 3px; display: block; object-fit: contain; }
.t.sep { margin-left: 10px; }
/* 持ち上げた2枚の強調枠。ビューアーの.tileImgHighlight（inset 3px相当）より
   太くしてはっきり見えるようにする（司令塔指示、4px） */
.t.you { transform: translateY(-10px); }
.t.you img { box-shadow: inset 0 0 0 4px hsl(0, 75%, 52%); }
.t.ai { transform: translateY(-10px); }
.t.ai img { box-shadow: inset 0 0 0 4px hsl(160, 55%, 42%); }
.state { text-align: center; font-size: 13px; color: var(--dim); margin-top: 12px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; }
.choice { padding: 16px 20px; }
.choice + .choice { border-left: 1px solid var(--border); }
.who { font-size: 13px; color: var(--dim); }
.pick { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 16px; font-weight: 700; }
.pick .t { width: 26px; height: 34px; }
.big { font-size: 38px; font-weight: 800; margin-top: 10px; line-height: 1; }
.big small { font-size: 13px; font-weight: 500; color: var(--dim); margin-left: 6px; }
.you-c .big { color: var(--danger); }
.ai-c .big { color: var(--mint); }
.result {
    background: hsla(0, 78%, 67%, .12); color: var(--danger); font-weight: 700; font-size: 15px;
    padding: 12px 20px; display: flex; justify-content: space-between;
    border-top: 1px solid hsla(0, 78%, 67%, .25);
}
.result span:last-child { font-size: 18px; }
.moment-link {
    display: block; text-align: center; padding: 12px 20px; font-size: 13px;
    color: var(--dim); text-decoration: none; border-top: 1px solid var(--border);
}
.moment-link:hover { color: var(--text); background: var(--surface2); }

/* ===== 見て分かる ===== */
.see { padding: 24px 0 96px; border-top: 1px solid var(--border); }
.see-h { display: flex; align-items: baseline; gap: 20px; padding: 56px 0 36px; flex-wrap: wrap; }
.see-h h2 { font-size: 30px; font-weight: 700; }
.see-h p { font-size: 15px; color: var(--dim); }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 20px; }
.g {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.g img { width: 100%; display: block; border-radius: 8px; }
.cap { font-size: 14px; color: var(--dim); }
.cap b { color: var(--text); font-weight: 700; margin-right: 8px; }
.stack { display: grid; gap: 20px; }

/* ===== フッター ===== */
footer { border-top: 1px solid var(--border); padding: 26px 40px; text-align: center; font-size: 13px; color: var(--faint); }
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--dim); }

/* ============================================================
   機能まわり（旧input.cssから踏襲。自席選択・進捗表示・拡張機能状態表示）
   ============================================================ */

.hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.hint.small { font-size: 0.72rem; margin-top: 0.4rem; display: block; }

/* 進捗カード（入口と同じ位置に表示） */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.5rem;
    margin-top: 12px;
}
.status-area { margin-top: 0.5rem; }
.progress-bar-bg {
    height: 4px; background: var(--bg-input); border-radius: 2px; overflow: hidden; margin-bottom: 0.6rem;
}
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.4s; border-radius: 2px; }
.progress-bar.indeterminate { width: 30%; animation: slide 1.5s ease-in-out infinite; }
@keyframes slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
/* reviewer最終レビュー指摘【低2】: prefers-reduced-motion（動きを減らす設定）の
   ユーザーには、進捗バーの無限スライドアニメーションを止め静的な表示にする。
   進捗中であること自体はstatus-textの文言で伝わる。 */
@media (prefers-reduced-motion: reduce) {
    .progress-bar.indeterminate { animation: none; }
}
.status-text { font-size: 0.85rem; color: var(--text-dim); }
.status-text.error { color: var(--error); }

/* 自席の自動判定・確認 */
.self-seat-box {
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
}
.self-seat-box .hint { color: var(--text); }
.self-seat-link-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    margin-left: 0.4rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
}
.self-seat-link-btn:hover { background: var(--bg-dark); color: var(--text); }
.self-seat-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.self-seat-option-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
}
.self-seat-option-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.self-seat-box-error { border-color: var(--error); }
.self-seat-box-error .hint { color: var(--error); }

/* じゃんたま拡張機能インストール済み表示 */
.ms-ext-ready { padding: 0.2rem 0; }
.ext-status-ok {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.88rem; font-weight: 600; color: var(--accent);
    background: var(--accent-bg); border: 1px solid hsla(160, 40%, 38%, 0.3);
    border-radius: 6px; padding: 0.45rem 0.9rem;
}

/* ファイル投下後の結果表示（.doorと同じカード見た目。marginは.doorsのgapに
   任せるため追加しない。司令塔レビュー指摘、2026-09-29再修正） */
#file-name { word-break: break-all; }
/* .btn は本来 .url（flexストレッチで高さが決まる）の中で使う前提で
   縦paddingが0だったため、単独配置だとこの縦paddingを明示しないと
   天鳳側の答え合わせするボタンより低く潰れて見える（同じ大きさにする
   ための司令塔レビュー指摘対応）。 */
#file-result .btn { width: 100%; margin-top: 12px; padding: 12px 20px; }

/* ============================================================
   狭い画面向け（900px未満で縦1列、375px幅で横スクロール無し）
   ============================================================ */
@media (max-width: 900px) {
    .page { padding: 0 16px; }
    /* grid-template-columns:1fr だとトラック既定の最小幅(auto=内容のmin-content)により
       子要素の内容幅がコンテナ幅を押し広げてしまう（375px幅で右端の文字が見切れる
       原因だった）。minmax(0,1fr)で内容に関わらずコンテナ幅に収める。 */
    .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 20px 0 48px; }
    h1 { font-size: 34px; }
    .see-h { padding: 40px 0 24px; }
    .see-h h2 { font-size: 24px; }
    .gallery { grid-template-columns: 1fr; }
    footer { padding: 20px 16px; }

    /* 手牌14枚が375px幅に収まるよう牌を縮める（横スクロール禁止） */
    .t { width: 22px; height: 29px; }
    .t.sep { margin-left: 6px; }
    .hand { gap: 2px; }

    /* 狭い幅では justify-content:space-between の行が右側要素を押し出して
       overflow-x:clip により文字が見切れていた（司令塔レビューで発覚）。
       折り返し可能にして見切れを防ぐ。 */
    .door-h { flex-wrap: wrap; row-gap: 4px; }
    .m-head { flex-wrap: wrap; row-gap: 4px; }
    .big { font-size: 28px; }
    .result { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 420px) {
    .t { width: 19px; height: 25px; }
}