/* 戦国武将伝 基調スタイル（案B 和モダン・レトロ）。基調=和紙/墨/藍、差し色=金。 */
:root{
  --paper:#f4efe6; --paper2:#fbf8f0; --ink:#2a2622; --ink2:#6b6157;
  --indigo:#1B3A5C; --gold:#b8902f; --hair:#cabfa6; --danger:#9a3b2e;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7;
  -webkit-text-size-adjust:100%}
h1,h2,.brand,.greet{font-family:var(--serif);font-weight:500}

main{min-height:100vh;display:flex;align-items:center;justify-content:center}
.screen{display:none;width:100%;max-width:520px;margin:0 auto;padding:24px}
.screen.active{display:block}
.screen h2{text-align:center;font-size:20px;margin:6px 0 16px}

.brand{font-size:30px;text-align:center;letter-spacing:.10em;margin:8px 0 4px}
.tagline{color:var(--ink2);text-align:center;font-size:14px;margin:0 0 22px}
.greet{font-size:18px;text-align:center;margin:10px 0 18px}

.card{background:var(--paper2);border:1px solid var(--hair);border-radius:6px;padding:20px}
label{display:block;font-size:14px;color:var(--ink2);margin:12px 0 4px}
input,select{width:100%;font-size:16px;padding:10px;border:1px solid var(--hair);
  border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:0;border-color:var(--indigo)}
hr{border:0;border-top:1px solid var(--hair);margin:16px 0}
.note{font-size:13px;color:var(--ink2);margin:12px 0 0}

button.primary{width:100%;margin-top:18px;padding:12px;border:0;border-radius:4px;
  background:var(--indigo);color:#fff;font-size:16px;cursor:pointer}
button.primary:disabled{background:#b9b2a4;cursor:default}
button.ghost{width:100%;margin-top:10px;padding:11px;border:1px solid var(--indigo);
  background:transparent;color:var(--indigo);border-radius:4px;font-size:15px;cursor:pointer}
button.link{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink2);
  cursor:pointer;font-size:14px}
.err{color:var(--danger);font-size:14px;margin-top:10px;min-height:1.2em}

ruby rt{font-size:.5em;color:var(--ink2);font-weight:400}

/* ログイン状態でタイトル画面の出し分け */
body[data-logged="0"] .only-user{display:none}
body[data-logged="1"] .only-guest{display:none}

/* ===== フィールド（全画面） ===== */
.screen-full{padding:0;max-width:none;width:100%;height:100vh;position:relative}
#fieldCanvas{display:block;width:100%;height:100vh;background:#3a5b86;image-rendering:pixelated}
.field-hud{position:absolute;top:0;left:0;right:0;display:flex;gap:14px;align-items:center;
  padding:8px 12px;background:rgba(42,38,34,.72);color:#f4efe6;font-size:14px}
.field-hud .prov{font-family:var(--serif);font-weight:500}
.field-hud .hud-meta{margin-left:auto;font-size:13px}
.hud-menu{background:rgba(244,239,230,.18);border:1px solid rgba(244,239,230,.5);color:#f4efe6;
  border-radius:4px;width:34px;height:30px;font-size:16px;cursor:pointer;line-height:1}
.field-hint{position:absolute;left:50%;top:56%;transform:translateX(-50%);background:rgba(27,58,92,.92);
  color:#fff;padding:6px 12px;border-radius:4px;font-size:13px;display:none}
.dpad{position:absolute;bottom:22px;left:18px;width:132px;height:132px;opacity:.92;touch-action:none}
.dpad .dbtn{position:absolute;width:44px;height:44px;background:rgba(244,239,230,.85);
  border:1px solid var(--indigo);border-radius:7px;font-size:18px;color:var(--indigo);cursor:pointer;
  -webkit-user-select:none;user-select:none}
.dpad .up{left:44px;top:0}.dpad .down{left:44px;top:88px}
.dpad .left{left:0;top:44px}.dpad .right{left:88px;top:44px}
.field-menu{position:absolute;top:46px;right:10px;width:210px;background:var(--paper2);
  border:1px solid var(--hair);border-radius:6px;padding:12px;display:none}
.field-menu.open{display:block}
.field-menu button{margin-top:8px}
.field-menu button:first-child{margin-top:0}

/* エリアHUDのボタン・入るボタン */
.area-hud{gap:6px;padding:7px 10px;flex-wrap:wrap}
.hud-btn{margin-left:0;background:rgba(244,239,230,.92);border:1px solid var(--indigo);color:var(--indigo);
  border-radius:5px;padding:6px 11px;font-size:13px;cursor:pointer;white-space:nowrap;flex:none}
.hud-btn.ghost-sm{background:transparent;color:#f4efe6;border-color:rgba(244,239,230,.6)}
.area-hud .prov{margin-right:auto;white-space:nowrap}
.field-hint{position:absolute;left:50%;top:54%;transform:translateX(-50%);background:rgba(27,58,92,.94);
  color:#fff;padding:9px 18px;border:0;border-radius:6px;font-size:15px;cursor:pointer}

/* ===== オーバーレイ（遭遇・仲間化） ===== */
.overlay{position:fixed;inset:0;background:rgba(26,22,19,.62);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay[hidden]{display:none}
.overlay-box{background:var(--paper2);border:1px solid var(--hair);border-radius:10px;padding:28px 26px;
  width:min(360px,86vw);text-align:center}
.overlay-box h1{font-size:26px;margin:6px 0 18px}
.overlay-box h2{font-size:22px;margin:4px 0 6px}
.ov-sub{color:var(--ink2);font-size:14px;margin:0 0 8px}
.ov-crest{width:64px;height:64px;border-radius:50%;margin:6px auto 8px;background:var(--indigo);color:#fff;
  font-family:var(--serif);font-size:30px;display:flex;align-items:center;justify-content:center}
.ov-stars{color:var(--gold);font-size:18px;letter-spacing:2px;margin:0 0 6px}
.ally-box{border:2px solid var(--gold)}
.ally-box .ov-sub{color:var(--gold);font-weight:500;font-size:15px}
.lore-box{text-align:center}
.lore-crest{background:#6b5a3a}
.lore-text{font-family:var(--serif);line-height:1.95;text-align:left;background:#fff;border:1px solid var(--hair);
  border-radius:6px;padding:14px 16px;margin:8px 0 16px;font-size:15px}

.ov-type{font-size:13px;color:var(--ink2);margin:0 0 12px}

/* ===== 御三家選択 ===== */
#screen-starter{max-width:780px}
.starter-head{text-align:center;max-width:560px;margin:0 auto;padding:8px 20px 0}
.starter-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  padding:14px 20px 10px;max-width:760px;margin:0 auto}
.starter-card{background:var(--paper2);border:1px solid var(--hair);border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:6px}
.starter-card.type-yari{border-top:4px solid #8a6d3b}
.starter-card.type-kiba{border-top:4px solid #6b4a8a}
.starter-card.type-yumi{border-top:4px solid #3b6d4e}
.sc-top{display:flex;align-items:center;gap:8px}
.sc-type{font-size:13px;color:#fff;background:var(--indigo);border-radius:4px;padding:1px 10px}
.sc-name{font-family:var(--serif);font-size:18px}
.sc-stars{color:var(--gold);font-size:12px;letter-spacing:1px;margin-left:auto}
.sc-aff{font-size:12px;color:var(--ink2);margin:0}
.sc-radar{max-width:200px;margin:2px auto}
.sc-tactic{font-size:13px;color:var(--ink2);margin:2px 0 0}
.sc-bio{font-family:var(--serif);font-size:13px;line-height:1.8;margin:2px 0 6px}
.starter-card button.primary{margin-top:auto}

/* ===== 一騎討ち（戦闘画面） ===== */
#screen-battle{background:#2b2622}
.battle{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:14px;gap:8px}
.combatant{background:var(--paper2);border:1px solid var(--hair);border-radius:8px;padding:9px 13px}
.combatant.me{margin-top:auto}
.crow{display:flex;align-items:center;gap:10px}
.cname{font-family:var(--serif);font-size:17px}
.ctype{font-size:12px;color:#fff;background:var(--indigo);border-radius:4px;padding:1px 8px}
.clv{font-size:12px;color:var(--ink2);margin-left:auto}
.st-badges{display:inline-flex;gap:4px;flex-wrap:wrap}
.st-badge{font-size:10px;border-radius:3px;padding:1px 6px;color:#fff;line-height:1.6;font-family:var(--sans)}
.st-badge.st-down{background:#9a3b2e}
.st-badge.st-up{background:#3b6d4e}
.st-badge.st-burn{background:#c2660f}
.st-badge.st-conf{background:#6b4a8a}
.hpbar{height:12px;background:#e0dccb;border-radius:6px;margin-top:6px;overflow:hidden}
.hpfill{height:100%;width:100%;background:#3b6d4e;transition:width .25s}
.hpfill.low{background:var(--danger)}
.hptext{font-size:12px;color:var(--ink2);text-align:right;margin-top:2px}
.battle-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px 0}
.bt-terrain{font-size:12px;color:#e7dfce;background:rgba(42,38,34,.55);border-radius:4px;padding:2px 10px;font-family:var(--serif)}
.bt-terrain:empty{display:none}
.crest-big{width:84px;height:84px;border-radius:50%;background:var(--indigo);color:#fff;font-family:var(--serif);
  font-size:40px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.battle .log{background:rgba(42,38,34,.82);color:#f4efe6;border-radius:8px;padding:10px 14px;
  min-height:84px;max-height:128px;overflow-y:auto;font-size:14px;line-height:1.7;font-family:var(--serif)}
.battle .chance{font-size:12px;color:#e7dfce;text-align:center;margin:2px 0}
.cmds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmds button{padding:12px;border:1px solid var(--indigo);background:var(--paper2);color:var(--indigo);
  border-radius:6px;font-size:15px;cursor:pointer}
.cmds button.rec{background:var(--gold);border-color:var(--gold);color:#3a2c08}
.cmds button.flee{border-color:var(--ink2);color:var(--ink2)}
.cmds button:disabled{opacity:.4}
.bt-tactics{display:flex;flex-direction:column;gap:8px}
.bt-tactic{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border:1px solid var(--indigo);background:var(--paper2);color:var(--indigo);border-radius:6px;font-size:15px;cursor:pointer}
.bt-tactic.eff{border-color:var(--gold)}
.bt-tac-name{font-family:var(--serif)}
.bt-tac-eff{font-size:11px;color:#3a2c08;background:var(--gold);border-radius:3px;padding:1px 8px}
.bt-tactic.cancel{justify-content:center;border-color:var(--ink2);color:var(--ink2)}
.bt-end .primary{margin:4px 0 0}

/* ===== 軍団（手持ち） ===== */
#screen-party{max-width:560px}
.party-note{padding:0 20px}
.party-list{padding:10px 20px 28px;display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}
.party-row{display:flex;align-items:center;gap:10px;background:var(--paper2);border:1px solid var(--hair);
  border-radius:8px;padding:10px 12px}
.party-row.lead{border-color:var(--gold);border-width:2px}
.pr-slot{width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex:none}
.party-row.lead .pr-slot{background:var(--gold);color:#3a2c08}
.pr-type{font-size:12px;color:#fff;background:var(--ink2);border-radius:4px;padding:1px 8px;flex:none}
.party-row.type-yari .pr-type{background:#8a6d3b}
.party-row.type-kiba .pr-type{background:#6b4a8a}
.party-row.type-yumi .pr-type{background:#3b6d4e}
.pr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pr-name{font-family:var(--serif);font-size:16px;line-height:1.1}
.pr-hpbar{height:8px;background:#e0dccb;border-radius:4px;overflow:hidden}
.pr-hpbar span{display:block;height:100%;background:#3b6d4e;transition:width .25s}
.pr-hpbar.mid span{background:var(--gold)}
.pr-hpbar.low span{background:var(--danger)}
.pr-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.pr-lv{font-size:13px;color:var(--ink2)}
.pr-hptext{font-size:11px;color:var(--ink2)}
.pr-stars{color:var(--gold);font-size:12px;letter-spacing:1px}
/* 軍団の道具ストリップ */
.party-items{padding:0 20px 4px;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pi-label{font-size:13px;color:var(--ink2)}
.item-use{padding:6px 12px;border:1px solid var(--gold);background:var(--paper2);color:var(--indigo);
  border-radius:6px;font-size:13px;cursor:pointer;width:auto;margin:0}
/* HUDの兵力警告 */
#hud-hp.low{color:#ffd2c2;font-weight:600}
/* 地図読み込みエラー（map未アップロード等を明示） */
.map-error{position:fixed;inset:0;z-index:50;background:rgba(27,58,92,.94);
  display:flex;align-items:center;justify-content:center;padding:24px}
.me-box{max-width:420px;background:var(--paper);border:2px solid var(--gold);border-radius:10px;
  padding:24px;color:var(--ink);text-align:left;font-size:15px;line-height:1.85}
.me-box h2{margin:0 0 12px;color:var(--indigo);font-family:var(--serif)}
.me-box p{margin:0 0 12px}
.me-box .me-detail{font-size:11px;color:var(--ink2);font-family:monospace;word-break:break-all}
.me-box button{margin-top:6px}

/* ===== 道具屋 ===== */
#screen-shop{max-width:560px}
.shop-list{padding:10px 20px 28px;display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto}
.shop-row{display:flex;align-items:center;gap:12px;background:var(--paper2);border:1px solid var(--hair);
  border-radius:8px;padding:12px 14px}
.shop-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shop-name{font-family:var(--serif);font-size:16px}
.shop-desc{font-size:12px;color:var(--ink2)}
.shop-buy{flex:none;width:auto;margin:0;padding:8px 16px;border:1px solid var(--indigo);background:var(--indigo);
  color:#fff;border-radius:6px;font-size:14px;cursor:pointer}
.shop-buy:disabled{opacity:.4;cursor:default}

/* ===== 図鑑 ===== */
.zukan-head{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;padding:18px 20px 6px}
#screen-zukan{max-width:780px}
.zukan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px;padding:10px 20px 28px}
.zk-card{background:var(--paper2);border:1px solid var(--hair);border-radius:8px;padding:12px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.zk-card.r5{border-color:var(--gold);border-width:2px}
.zk-card.unmet{opacity:.85;cursor:default}
.zk-crest{width:46px;height:46px;border-radius:50%;background:var(--indigo);color:#fff;font-family:var(--serif);
  font-size:22px;display:flex;align-items:center;justify-content:center}
.zk-crest.sil{background:#cfc7b6;color:#fff}
.zk-name{font-family:var(--serif);font-size:15px}
.zk-stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.zk-ally{font-size:11px;color:#fff;background:var(--indigo);border-radius:3px;padding:1px 8px}
.zk-met{font-size:11px;color:var(--ink2)}

.zukan-detail{max-width:420px;margin:0 auto;padding:10px 20px 30px}
.zk-d-head{text-align:center;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:8px}
.zk-d-head.r5 h2{color:var(--gold)}
.zk-d-head h2{margin:2px 0}
.zk-d-sub{color:var(--ink2);font-size:13px;margin:2px 0}
.zk-radar{max-width:280px;margin:6px auto 8px}
.zk-stats{width:100%;border-collapse:collapse;margin:6px 0 10px}
.zk-stats td{padding:5px 4px;font-size:14px}
.zk-stats .sl{color:var(--ink2);width:48px}
.zk-stats .sv{width:34px;text-align:right;font-weight:500}
.zk-stats .sb{padding-left:10px}
.zk-stats .sb span{display:block;height:8px;background:var(--indigo);border-radius:4px;min-width:3px}
.zk-meta{font-size:13px;color:var(--ink2);text-align:center;margin:6px 0}
.zk-bio{font-family:var(--serif);line-height:1.9;background:#fff;border:1px solid var(--hair);border-radius:6px;
  padding:12px 14px;margin:8px 0 14px}

/* ===== トースト ===== */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:rgba(42,38,34,.92);
  color:#f4efe6;padding:10px 16px;border-radius:6px;font-size:14px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:60;max-width:84vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}