/* ハロトピア - ゲームボーイカラー風UI（黒い太枠・白い窓・はっきりした原色・ドットフォント） */
:root {
  --k: #181818; --w: #f8f8f0; --r: #e04838; --b: #3058c8; --gr: #40a048; --y: #f8b830; --sk: #88c8f8;
  --ink: var(--k); --paper: var(--w); --sand: #f8e8b0; --sky: var(--sk); --blue: var(--b); --coral: var(--r); --amber: var(--y); --leaf: var(--gr); --night: #383878;
  --font: "DotGothic16", "Hiragino Kaku Gothic ProN", monospace; --round: var(--font);
  --shadow: 3px 3px 0 var(--k);
}
html, body { font-family: var(--font); color: var(--k); }
body { background: #6a5acd; background: linear-gradient(135deg, #7a6ad8, #4a3aa8); }
#app { background: var(--w); box-shadow: 0 0 0 6px var(--k), 0 16px 40px rgba(0, 0, 0, .4); }
canvas { image-rendering: pixelated; }
*, *::before, *::after { border-radius: 0 !important; }
.paperBg, .sheetBody, .sheet, .scr:not(#title) { background: var(--sand) !important; }
.note, .lead small, .pcard .d, .bbtn small, .placeBox span, .ccard span, .li small, #chMicNote { color: #504848 !important; }
.panel, .dlgBox, .placeBox, .pcard, .ccard, .pchip, .li, .hcard, .pick, .cpBtn, .msg, #miniMap, .exInfo, .titleSave, .ribbon, .vsTop, .sw, #popup, .worldMap, .chip, .tabs button, #chChips button, .field input, #chIn {
  background: var(--w) !important; color: var(--k) !important; border: 3px solid var(--k) !important; box-shadow: var(--shadow) !important;
}
.msg.me, .tabs button.on, .pick.on, .pcard.sel, .hcard.sel, .chip.sel { background: #c8e0f8 !important; }
.pchip.cur { background: #f8e8b0 !important; outline: 3px solid var(--r); outline-offset: 1px; }
.overlay { background: rgba(24, 24, 24, .5) !important; }
.btnP, .mainBtn, .bbtn.atk, .bbtn.skill, .bbtn.item, .navBtn.act, .round, #chSend { color: var(--w) !important; border: 3px solid var(--k) !important; box-shadow: var(--shadow) !important; text-shadow: 2px 2px 0 var(--k) !important; }
.btnP.blue, .mainBtn.vs, .bbtn.skill, .round.sp { background: var(--b) !important; }
.btnP.coral, .mainBtn.adv, .bbtn.atk, .navBtn.act, .round.atk, #chSend, .btnP { background: var(--r) !important; }
.btnP.blue { background: var(--b) !important; }
.bbtn.item { background: var(--gr) !important; }
.btnS, .subBtn, .navBtn, .bbtn, .toggle, #chMic { background: var(--w) !important; color: var(--k) !important; border: 3px solid var(--k) !important; box-shadow: var(--shadow) !important; }
.bbtn.def { background: #c8e0f8 !important; }
.toggle.on { background: var(--gr) !important; color: var(--w) !important; }
.btnP:active, .btnS:active, .navBtn:active, .mainBtn:active, .bbtn:active, .subBtn:active { transform: translate(3px, 3px); box-shadow: none !important; }
.mainBtn b, .mainBtn small { color: var(--w) !important; }
.navBtn i { display: none; }
.logo span { -webkit-text-stroke: 3px var(--k) !important; text-shadow: 4px 4px 0 var(--k) !important; font-family: var(--font); }
.logo .c1 { color: var(--r) !important; } .logo .c2 { color: var(--y) !important; } .logo .c3 { color: var(--gr) !important; } .logo .c4, .logo .c5 { color: var(--b) !important; }
.latin { color: var(--k) !important; letter-spacing: .4em; }
.bar, .sc i, .sw .hp { background: #d8d0c8 !important; border: 2px solid var(--k) !important; }
.bar.hp i, .sw .hp u { background: var(--gr) !important; } .bar.mp i { background: var(--b) !important; } .bar.ex i { background: var(--y) !important; }
.sc.a u { background: var(--b) !important; } .sc.b u { background: var(--r) !important; }
.pcard .role, .newTag, .nameTab, .exHint { background: var(--k) !important; color: var(--w) !important; }
.pcard canvas.pcPort { width: 96px; height: 96px; border: 3px solid var(--k); background: #c8e0f8; }
#joy { border-color: var(--k) !important; } #joyKnob { background: var(--k) !important; }
#chat { background: var(--w) !important; border-top: 3px solid var(--k) !important; }
.wpin { border: 2px solid var(--k) !important; } .wpin.here { background: var(--r) !important; color: var(--w) !important; }

/* 列車の旅：ゲーム画面と同じ縦長のまま、車窓を見せる */
#journey.journeyScreen { pointer-events: none; background: transparent !important; justify-content: space-between; }
.journeyHead { padding: 24px 12px 0; text-align: center; color: #f8f8e8; }
.journeyHead span { font-size: 10px; letter-spacing: 2px; color: #a8d8e8; }
.journeyHead h2 { margin: 10px 0 8px; font-size: 22px; }
.journeyHead p { font-size: 12px; margin: 0; }
.journeyFoot { padding: 0 16px 22px; text-align: center; color: #f8f8e8; }
.journeyFoot p { font-size: 13px; margin: 0 0 12px; }
.journeyFoot button { pointer-events: auto; width: 100%; }
.journeyFoot small { display: block; margin-top: 8px; font-size: 10px; color: #a8c8d8; }

.journeyHead, .journeyFoot { width: 100%; }

/* 短い町イベントも既存の会話窓で。スキップは常に残す。 */
#dlgChoices { display: grid; gap: 8px; margin: 2px 0 12px; max-height: 42vh; overflow-y: auto; }
#dlgChoices button { width: 100%; min-height: 42px; text-align: left; padding: 8px 10px; font-size: 13px; }
#dlgText { white-space: pre-line; }

/* 小さな地図でも地名を縦に折り返さない。 */
.wpin { width: max-content; white-space: nowrap; }

/* 新規開始と、話者のそばに置く会話窓。 */
.heroPick { grid-template-columns:repeat(2,1fr); }
#partnerCards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
#partnerCards .pcard { display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px; }
#partnerCards .pcPort { width:72px;height:72px; }
#partnerCards .role { display:block;margin:3px 0; }
#dialog.at-person { right:auto;bottom:auto;padding:0;pointer-events:auto; }
#dialog.at-person #dlgFace { display:none; }
#dialog.at-person .dlgBox { font-size:14px;min-height:90px;padding:20px 12px 34px; }
#dialog.at-person .dlgBox:after { content:'';position:absolute;left:var(--tail-x);bottom:-10px;border-top:10px solid #181818;border-left:8px solid transparent;border-right:8px solid transparent; }

.titleExtras { grid-template-columns:repeat(2,1fr); }
#dialog.at-person.tail-up .dlgBox:after { top:-10px;bottom:auto;border-top:0;border-bottom:10px solid #181818; }

/* 港の駅名標をモチーフにしたタイトル。ほかの画面には適用しない。 */
#title .logoWrap { width:100%;margin-top:22px; }
#title .logo { display:block;padding:17px 8px 15px;background:#e9eddf;border:4px solid #101f2a;border-top:8px solid #b85d48;box-shadow:6px 6px 0 #0d202e;font-size:clamp(42px,13vw,58px);line-height:1.15;letter-spacing:.02em; }
#title .logo span { color:#203d50 !important;-webkit-text-stroke:0 !important;text-shadow:2px 2px 0 #b8c7bf !important;transform:none !important;font-family:var(--font); }
#title .latin { color:#dfcf9d !important;font-size:12px;letter-spacing:.4em;margin-top:16px;padding-left:.4em; }
#title .ribbon { background:transparent;border:0 !important;box-shadow:none !important;color:#dbe4da;font-size:12px;letter-spacing:.03em;margin-top:8px;padding:3px 0; }
#title .titleSave { background:#e9eddf;color:#203d50;border-color:#0d202e !important; }
#title .mainBtn { box-shadow:0 4px 0 #0d202e; }
#title .mainBtn.adv { background:#b85d48 !important; }
#title .mainBtn.vs { background:#386b81 !important; }
#title .subBtn { background:#e9eddf !important;color:#203d50; }

/* 戦闘のオート切り替えとレベル表示 */
#bTools { display: flex; justify-content: flex-end; gap: 6px; margin: 4px 8px; }
#bTools button { padding: 4px 10px; font-size: 12px; min-height: 30px; }
#bHist { max-height: 34vh; overflow-y: auto; font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
#bHist div { padding: 2px 0; border-bottom: 1px dashed #b8b0a0; }
#bHist div:last-child { border-bottom: 0; font-weight: 900; }
.pchip .lv, .lvTag { font-size: 10px; color: #3058c8; }

/* 会話のスキップは窓の右上。文章はその下から始める */
#dlgSkip { top: 6px; bottom: auto; right: 8px; }
#dialog .dlgBox { padding-top: 38px; }
#dialog.at-person .dlgBox { padding: 38px 12px 14px; }

/* 相棒システム：コンビ技・ツッコミ */
.bbtn.combo { background: #7a48c8 !important; color: var(--w) !important; text-shadow: 2px 2px 0 var(--k) !important; }
.bbtn.tsuk { background: var(--y) !important; color: var(--k) !important; animation: tsukBlink .8s steps(2) infinite; }
.bbtn.combo small, .bbtn.tsuk small { font-size: 10px; }
@keyframes tsukBlink { 50% { background: #fff0a0 !important; } }

/* 地図：乗り物で行く場所は、点線の枠 */
.wpin.transit { border-style: dashed !important; }

/* 戦闘のパーティ表示：名前が長くても、レベルとタイプが見える */
.pchip b.pn { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.pchip b.pn .lv { flex: none; font-size: 10px; color: #3058c8; }
.pchip b.pn .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .ty { display: inline-block; font-size: 9px; color: #fff; padding: 0 4px; margin: 1px 0; text-shadow: 1px 1px 0 #181818; }

/* タイプ相性表・入れかえ */
.tcTable { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 11px; table-layout: fixed; }
.tcTable th { color: #fff; padding: 3px 1px; text-shadow: 1px 1px 0 #181818; border: 2px solid #181818; font-size: 10px; }
.tcTable td { border: 2px solid #181818; text-align: center; height: 28px; font-size: 14px; font-weight: 900; }
.tcTable td.tcA { background: #f8e898; color: #c03020; }
.tcTable td.tcR { background: #d8e0e8; color: #506070; }
.bbtn.swap { background: #f8c878 !important; color: #181818 !important; }
#typeChart { z-index: 60; }

#typeChart .btnS.sel { background: #c8e0f8 !important; }
#typeChart .panel { max-height: 94%; overflow-y: auto; }
#objective { pointer-events: auto; text-decoration: underline dotted; }

/* 対戦：左の移動、右の攻撃、上の交代を分離。 */
.vsOptions{width:100%;padding:10px;border:3px solid #282838;background:#f8f0d8;display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.vsOptions label{display:flex;align-items:center;gap:8px;min-height:44px}.vsOptions small{width:100%;font-size:11px;line-height:1.6}.vsOptions select{min-height:44px;font:inherit}.vsOptions input{width:22px;height:22px}
#vsMove{position:absolute;left:20px;bottom:calc(30px + env(safe-area-inset-bottom));width:126px;height:126px;border:3px solid #283848;border-radius:50%;background:#f8f0d899;pointer-events:auto;touch-action:none;user-select:none}
#vsMove span{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:12px;color:#283848}
#vsMoveKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;border:3px solid #283848;border-radius:50%;background:#7898b8;transform:translate(-50%,-50%);pointer-events:none}
#vsSwap{left:12px;bottom:calc(190px + env(safe-area-inset-bottom));gap:8px}
#vsSwap .sw{width:64px;height:82px;border-radius:6px}#vsSwap .sw canvas{width:48px;height:48px}#vsSwap .sw strong{display:block;font-size:11px;line-height:15px}#vsSwap .sw:disabled{opacity:.65}
#vsAtk{right:18px;bottom:calc(24px + env(safe-area-inset-bottom));width:104px;height:104px;border-radius:50%}
#vsSp{right:26px;bottom:calc(145px + env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%}
#vsControlHint{position:absolute;bottom:calc(4px + env(safe-area-inset-bottom));left:12px;right:12px;text-align:center;font-size:10px;color:#283848;background:#f8f0d8d9;pointer-events:none}
@media(max-height:700px){#vsMove{bottom:24px;width:112px;height:112px}#vsSwap{bottom:154px}#vsSwap .sw{height:72px}#vsSp{bottom:130px;width:76px;height:76px}#vsAtk{width:92px;height:92px}}

#vsMove,#vsMoveKnob,#vsAtk,#vsSp{border-radius:50% !important}#vsGo{position:sticky;top:0;z-index:2}.vsLockedNote{grid-column:1/-1;margin:4px 0}
@media(max-width:350px){#vsSwap{gap:6px}#vsSwap .sw{width:58px}}

/* 自動攻撃：交代を右端へ、移動と必殺から離す。 */
#vsSwap{left:auto;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));flex-direction:column;gap:8px}
#vsSwap::before{content:'交代';position:absolute;top:-21px;left:0;right:0;text-align:center;background:#f8f0d8;color:#283848;font-size:12px}
#vsSwap .sw{width:64px;height:76px}#vsSp{right:14px;bottom:calc(25px + env(safe-area-inset-bottom));width:100px;height:100px}
@media(max-height:700px){#vsSwap{bottom:130px;gap:6px}#vsSwap .sw{width:60px;height:64px}#vsSwap .sw canvas{width:36px;height:36px}#vsSp{bottom:24px;width:88px;height:88px}}

.arenaPreview{width:100%;margin:8px 0;border:3px solid #282838;background:#12243a}.arenaPreview canvas{display:block;width:100%;height:140px;image-rendering:pixelated}.arenaPreview p{margin:0;padding:6px 10px;font-size:11px;line-height:1.5;color:#f8efd8}
#vsArenaName{position:absolute;top:72px;left:64px;max-width:calc(100% - 80px);padding:4px 9px;background:#f8f0d8;border:2px solid #283848;font-size:12px;color:#283848}
#vsAnn span{max-width:92%;line-height:1.5}@media(max-height:700px){.arenaPreview canvas{height:90px}.arenaPreview p{padding:3px 8px}}

/* 控えがいる時は防御と交代を同じ段に。小さい画面にも戦場の高さを残す。 */
#bCmds.grid .bbtn.def:not(.wide) { grid-column: auto; }
@media (max-height: 700px) {
  #bPanel { padding: 0 6px calc(6px + env(safe-area-inset-bottom)); }
  #bLog { min-height: 36px; font-size: 12px; padding: 6px; }
  #bTools { gap: 4px; margin: 3px 0; }
  #bTools button { min-height: 26px; padding: 2px 8px; font-size: 11px; }
  #bParty { gap: 4px; margin: 5px 0; }
  #bParty .pchip { padding: 2px; gap: 2px; }
  #bParty canvas { width: 28px; height: 28px; }
  #bParty .pinfo { font-size: 9px; }
  #bParty .bar { height: 4px; margin: 1px 0; }
  #bParty .ty { font-size: 8px; margin: 0; }
  #bCmds.grid { gap: 5px; }
  #bCmds .bbtn { min-height: 44px; font-size: 14px; }
  #bCmds .bbtn small { font-size: 9px; }
}

/* 戦闘のHP・MP：数字（現在/最大）とバーをそろえて表示 */
.pchip .stt { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; line-height: 1.25; font-weight: 700; }
.pchip .stt span { color: #3f8a5a; font-size: 9px; }
.pchip .stt.mp span { color: #3058c8; }
.pchip .stt b { display: inline; font-size: 10px; white-space: nowrap; }
.bar.hp.low i { background: var(--r) !important; }
/* HP=緑・MP=青（数字も同じ色、小さめ） */
.pchip .stt, .pchip .stt b, .pchip .stt span { color: #2f8a4c !important; font-size: 9px !important; font-weight: 800; }
.pchip .stt.mp, .pchip .stt.mp b, .pchip .stt.mp span { color: #2f62d0 !important; }
.pchip .stt b { letter-spacing: -.3px; }
#bParty .bar { height: 5px; }
/* 戦闘のバー：枠を細くして、緑（HP）・青（MP）の中身がちゃんと見えるように */
#bParty .bar { height: 8px !important; border: 1px solid #4a4a4a !important; background: #e4dccc !important; margin: 1px 0 3px !important; padding: 0; overflow: hidden; }
#bParty .bar i { height: 100% !important; }
#bParty .bar.hp i { background: #40b050 !important; }
#bParty .bar.hp.low i { background: #e04848 !important; }
#bParty .bar.mp i { background: #3c78e0 !important; }
/* 回復のアニメーション */
#healFx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; animation: hfOut .5s 1.8s forwards; }
#healFx .hfGlow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(120,240,150,.55), rgba(120,240,150,0) 70%); animation: hfGlow 2s ease-out; }
#healFx .hfP { position: absolute; bottom: -30px; font-style: normal; font-weight: 900; color: #5fe08a; text-shadow: 0 0 6px #fff, 0 0 10px #2fb860; animation: hfUp 1.6s ease-out forwards; opacity: 0; }
#healFx .hfMsg { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); background: #fff8e8; border: 3px solid #181818; padding: 10px 16px; text-align: center; max-width: 88%; animation: hfPop .35s ease-out; }
#healFx .hfMsg b { display: block; color: #2f8a4c; font-size: 20px; }
#healFx .hfMsg span { font-size: 12px; color: #333; }
@keyframes hfUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-75vh); opacity: 0; } }
@keyframes hfGlow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .2; } }
@keyframes hfPop { 0% { transform: translateX(-50%) scale(.6); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes hfOut { to { opacity: 0; } }
/* レアリティ／ボスキャラ：文字＋星＋形で区別（色だけにしない） */
.rar { display: inline-block; font-size: 9px; font-weight: 900; line-height: 1.3; padding: 0 3px; margin: 0 2px 0 0; border: 1.5px solid #181818; border-radius: 3px; letter-spacing: -.5px; vertical-align: middle; white-space: nowrap; }
.rar-N { background: #e0e0e0; color: #333; }
.rar-R { background: #a8d0ff; color: #0c2a60; }
.rar-SR { background: #dcb0ff; color: #3a0c70; box-shadow: 0 0 0 1px #8a4ad8; }
.rar-SSR { background: linear-gradient(#fff0a0, #ffb830); color: #5a2a00; box-shadow: 0 0 0 1px #e89800, 0 0 4px #ffd860; }
.bossTag { display: inline-block; font-size: 9px; font-weight: 900; line-height: 1.3; padding: 0 3px; margin: 0 2px 0 0; background: #c8281c; color: #fff; border: 1.5px solid #181818; border-radius: 3px; vertical-align: middle; white-space: nowrap; }
.ccard .rar, .ccard .bossTag { margin-top: 1px; }
#joinRar { margin: 4px 0 6px; font-size: 16px; }
#joinRar .rar, #joinRar .bossTag { font-size: 14px; padding: 1px 6px; }
#join[data-rar="SR"] .panel { animation: rarPulse 1.1s ease-in-out 3; }
#join[data-rar="SSR"] .panel { animation: rarPulse .8s ease-in-out 5; box-shadow: 0 0 18px #ffd860, 0 0 0 3px #e89800; }
#join[data-boss="1"] .newTag { background: #c8281c; color: #fff; }
@keyframes rarPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* 世界地図：名前は小さな札にして、目印の絵のそばに、重ならないように置く */
.wpin { min-height: 0 !important; padding: 1px 5px !important; font-size: 10px !important; line-height: 1.35 !important; border-radius: 4px !important; border-width: 1.5px !important; box-shadow: 0 1px 0 rgba(0,0,0,.35) !important; background: rgba(255,248,232,.94) !important; }
.wpin.a-b { transform: translate(-50%, 11px) !important; }
.wpin.a-t { transform: translate(-50%, calc(-100% - 13px)) !important; }
.wpin.a-r { transform: translate(12px, -50%) !important; }
.wpin.a-l { transform: translate(calc(-100% - 12px), -50%) !important; }
.wpin.lock { opacity: .85 !important; background: rgba(226,220,204,.92) !important; color: #555; }
.wpin.here { background: #d8483a !important; color: #fff !important; }

/* 早送り中もボスの台詞を読みやすく保つ。 */
#bLog.bossTalk { font-size:16px;line-height:1.65;color:#241e26;background:#fff3cf;border-color:#a86628; }
#bTools { flex-wrap:wrap; }
#bSpeed.on { background:#ffd568;color:#181818; }
@media(max-height:700px) { #bLog.bossTalk { font-size:14px;line-height:1.55; } }

/* 戦場と操作欄の境界を固定。実行中や長い台詞でもキャラを伸縮させない。 */
#bPanel { top:45%;bottom:0;background:#eee7d9;border-top:3px solid #514b48;padding:8px 8px calc(8px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain; }
#bLog,#bLog.bossTalk { font-size:14px;line-height:1.55;min-height:66px;max-height:92px;overflow-y:auto;padding:8px 10px;box-shadow:none; }
#bTools { margin:6px 0;gap:5px; }
#bTools button { min-height:32px;font-size:12px;padding:4px 9px; }
#bCmds.grid { gap:6px; }
#bCmds.grid .bbtn.combo.wide,#bCmds.grid .bbtn.def.wide { grid-column:auto; }
#bCmds .bbtn { font-size:15px;min-height:46px; }
#bCmds .bbtn small,#bCmds .bbtn .hint { font-size:11px; }
@media(max-height:700px){
 #bPanel{top:40%;padding:6px;}
 #bLog,#bLog.bossTalk{font-size:13px;min-height:54px;max-height:80px;padding:6px 8px;}
 #bParty{margin:4px 0;}
 #bTools{margin:4px 0;gap:4px;}
 #bTools button{font-size:11px;min-height:28px;padding:3px 7px;}
 #bCmds.grid{gap:4px;}
 #bCmds .bbtn{font-size:14px;min-height:44px;}
}