/* 夜の街。チェーンごとに窓の灯りの色が違う。妖精だけが明るい */
:root {
  color-scheme: dark;
  --night: #0f1419;
  --ground: #161d24;
  --wall: #1e2730;
  --line: #2e3a46;
  --ink: #e8edf2;
  --ink-soft: #9aa8b5;
  --ink-faint: #6b7a88;
  --lamp: #ffd166;
  --good: #7ae582;
  --fine: #a8dadc;
  --warn: #ffb347;
  --bad: #ff7b72;
  --cosmos: #8fa8ff;
  --osmosis: #c792ea;
  --iris: #ff8fb1;
  --chihuahua: #ffc861;
  --babylon: #ff9e64;
  --display: var(--fy-round);
  --body: var(--fy-body);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font: 15px/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px 48px;
}
.wrap { max-width: 1040px; margin-inline: auto; display: grid; gap: 22px; }
header { display: grid; gap: 6px; }
h1 { font: 900 clamp(30px, 5vw, 42px)/1.15 var(--display); margin: 0; letter-spacing: .02em; }
h1 .brand { color: var(--lamp); }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lead { margin: 0; color: var(--ink-soft); max-width: 66ch; text-wrap: pretty; }
.lead a { color: var(--lamp); }

form { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
label.field { flex: 1 1 340px; min-width: 0; display: grid; gap: 4px; }
label.field span { font-size: 13px; color: var(--ink-soft); }
input[type=text] {
  width: 100%; background: var(--ground); border: 1px solid var(--line); color: var(--ink);
  font: 400 14px/1.4 var(--mono); padding: 11px 12px; border-radius: 8px;
}
input[type=text]:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.buttons { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
button {
  font: 700 15px/1 var(--display); padding: 13px 18px; border-radius: 8px;
  border: 1px solid var(--lamp); background: var(--lamp); color: #241b05; cursor: pointer;
}
button.quiet { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
button:disabled { opacity: .55; cursor: default; }
.status { color: var(--ink-soft); font-size: 14px; min-height: 1.6em; margin: 0; }
.status.error { color: var(--bad); }

.today {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  font-size: 13px; color: var(--ink-soft);
}
.today b { font: 700 15px/1.2 var(--display); color: var(--ink); }

.summary {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  border-block: 1px solid var(--line); padding-block: 12px;
}
.summary b { font: 900 22px/1.2 var(--display); }
.summary small { color: var(--ink-soft); font-size: 13px; }
.summary .copy { margin-left: auto; }
.collect { display: flex; gap: 6px; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }

#towns { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
section.town { display: grid; gap: 10px; min-width: 0; }
.town-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.town-head h2 { margin: 0; font: 700 19px/1.3 var(--display); color: var(--town); }
.town-head small { color: var(--ink-faint); font-size: 13px; }
.pets { display: grid; gap: 12px; }
article.pet {
  background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 12px; align-items: start;
}
.portrait-btn { all: unset; cursor: pointer; display: block; grid-row: span 2; border-radius: 12px; }
.portrait-btn svg { display: block; width: 132px; height: 132px; }
.portrait-btn:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.pet h3 { margin: 0; font: 700 17px/1.3 var(--display); overflow-wrap: anywhere; }
.say { grid-column: 1 / -1; margin: 0; font: 500 13.5px/1.4 var(--display); color: var(--ink); background: var(--wall); border-radius: 10px; padding: 6px 10px; }
.house { margin: 0; display: flex; gap: 5px; align-items: center; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.house svg { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chip {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 7px; border-radius: 999px; color: #10151a; background: var(--c, var(--fine));
}
.chip.ghost { background: transparent; color: #cfd8e3; border: 1px solid var(--line); font-weight: 500; }
.meter { height: 6px; background: var(--wall); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--c, var(--fine)); }
/* 見出しが長い言語でも値の列が 1 文字ずつ折れないように、見出しは半分まで */
dl { margin: 6px 0 0; display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 1px 10px; font-size: 13px; }
dt { color: var(--ink-faint); }
dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.note { grid-column: 1 / -1; font-size: 13px; color: var(--warn); margin: 2px 0 0; }
.note.calm { color: var(--ink-faint); }
.actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.actions button { padding: 8px 12px; font-size: 13px; }
.actions a.go { font: 700 13px/1 var(--display); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--lamp); background: var(--lamp); color: #241b05; text-decoration: none; }
article.pet.chosen { border-color: var(--lamp); }
.empty { color: var(--ink-faint); font-size: 14px; margin: 0; }

#peek { display: grid; gap: 10px; }
#peek h2, #arena h2 { margin: 0; font: 700 19px/1.3 var(--display); }
#peek > p, #arena > p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 72ch; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.tabs button { padding: 8px 12px; font: 500 13px/1 var(--body); background: transparent; color: var(--ink-soft); border-color: var(--line); border-radius: 999px; }
.tabs button.on { background: var(--lamp); border-color: var(--lamp); color: #241b05; font-weight: 700; }
#peekGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 142px), 1fr)); gap: 8px; }
.peek-cell { all: unset; cursor: pointer; display: grid; gap: 2px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 8px; text-align: center; min-width: 0; }
.peek-cell:hover, .peek-cell:focus-visible { border-color: var(--lamp); }
.peek-cell svg { display: block; width: 100%; height: auto; }
.peek-cell strong { font: 700 13px/1.3 var(--display); overflow-wrap: anywhere; }
.peek-cell small { font-size: 11px; color: var(--ink-faint); line-height: 1.3; overflow-wrap: anywhere; }
.peek-cell .small-house { color: var(--good); }

#arena { display: grid; gap: 10px; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.ring { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.corner { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.corner svg.portrait { width: min(100%, 190px); height: auto; display: block; }
.corner strong { font: 700 15px/1.3 var(--display); overflow-wrap: anywhere; }
.corner small { color: var(--ink-faint); font-size: 12px; overflow-wrap: anywhere; }
.corner { position: relative; }
.pop { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font: 900 26px/1 var(--display); color: #fff; text-shadow: 0 2px 0 #0008, 0 0 10px #0008; pointer-events: none; animation: pop .7s ease-out forwards; }
.pop.crit { color: var(--lamp); font-size: 34px; }
.pop.heal { color: var(--good); }
.pop.miss { color: var(--ink-soft); font-size: 20px; }
@keyframes pop { 0% { opacity: 0; margin-top: 10px; } 20% { opacity: 1; } 100% { opacity: 0; margin-top: -40px; } }
.corner.hit svg.portrait { animation: hit .28s ease-in-out; }
@keyframes hit { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vs { font: 900 22px/1 var(--display); color: var(--lamp); }
.hp { width: 100%; height: 10px; background: var(--wall); border-radius: 5px; overflow: hidden; }
.hp i { display: block; height: 100%; width: 100%; background: var(--good); transition: width .25s ease-out; }
.hp i.low { background: var(--bad); }
.hpnum { font: 400 12px/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stats { font: 400 12px/1.5 var(--mono); color: var(--ink-faint); }
.picker { display: grid; gap: 6px; }
.picker > span { font-size: 13px; color: var(--ink-soft); }
.picker-row { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-row button { padding: 9px 12px; font: 700 14px/1 var(--display); background: transparent; color: var(--ink); border-color: var(--line); }
.picker-row button.on { background: var(--lamp); border-color: var(--lamp); color: #241b05; }
.picker small { color: var(--ink-faint); font-size: 13px; min-height: 1.5em; display: block; }
.factors { display: flex; flex-wrap: wrap; gap: 4px; }
#log { font: 400 13px/1.7 var(--body); color: var(--ink-soft); min-height: 1.7em; max-height: 11em; overflow-y: auto; margin: 0; white-space: pre-wrap; }
#result { font: 900 20px/1.3 var(--display); min-height: 1.3em; margin: 0; color: var(--lamp); }
.arena-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
footer { color: var(--ink-faint); font-size: 13px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
footer p { margin: 0; max-width: 74ch; }
@media (prefers-reduced-motion: reduce) {
  .corner.hit svg.portrait { animation: none; }
  .hp i { transition: none; }
}
@media (max-width: 460px) {
  article.pet { grid-template-columns: 104px minmax(0, 1fr); }
  .portrait-btn svg { width: 104px; height: 104px; }
}
.valoper { color: var(--ink-faint); font: 400 11px/1.3 var(--mono); overflow-wrap: anywhere; }
.checked { color: var(--ink-faint); font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; }
button.small { padding: 5px 8px; font-size: 12px; }

/* たまご。委任が足りない家の妖精 */
article.pet.egg { border-style: dashed; }
.nest { display: grid; gap: 8px; border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; }
.nest p { margin: 0; max-width: 68ch; }
.nest h3 { margin: 4px 0 0; font: 700 14px/1.3 var(--display); color: var(--ink-soft); }
.nest ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.nest li { font-size: 13px; color: var(--ink-soft); }
.nest b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 読めなかった家。数字は出さない */
article.unread { background: var(--ground); border: 1px dashed var(--bad); border-radius: 14px; padding: 12px; display: grid; gap: 4px; }
article.unread h3 { margin: 0; font: 700 17px/1.3 var(--display); overflow-wrap: anywhere; }

/* 家の名前は他人が決めるので、何行にも伸ばさない */
.pet h3, article.unread h3, .house bdi, .peek-cell small, .corner small, .who-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.corner small { -webkit-line-clamp: 3; line-clamp: 3; }

/* 委任の通信簿。評価は色と文字の両方で出す。狭い画面では表をカードにする */
#report { min-width: 0; }
.report-teaser { margin: 0; font-size: 13px; color: var(--ink-soft); }
.report { background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: block; min-width: 0; }
/* 三角は自分で描く。件数が折り返しても見出しの横に残るように */
.report > summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; }
.report > summary::-webkit-details-marker { display: none; }
.report > summary::before { content: "\25B8"; color: var(--lamp); font-size: 19px; line-height: 1; flex: none; }
.report[open] > summary::before { content: "\25BE"; }
.report summary:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 4px; }
.report h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; margin: 0; font: 700 19px/1.3 var(--display); }
.grade-counts { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.grade-count { display: inline-flex; align-items: center; gap: 4px; }
.grade-count b { font: 400 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.grade-count .grade { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }
.grade { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 900 17px/1 var(--display); color: #10151a; background: var(--c, var(--line)); flex: none; }
.grade-a { --c: var(--good); }
.grade-b { --c: var(--fine); }
.grade-c { --c: var(--warn); }
.grade-d { --c: var(--bad); }
.grade-unknown { background: transparent; color: var(--ink-soft); border: 1px dashed var(--ink-faint); }
.report-lead { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 72ch; }
.report-notes:empty { display: none; }
.report-notes { display: grid; justify-items: start; gap: 4px; margin-top: 8px; }
.report-notes .note.calm { color: var(--ink-soft); }
.report-table { width: 100%; margin-top: 8px; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.report-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.report-table th:nth-child(1) { width: 56px; }
.report-table th:nth-child(2) { width: 20%; }
.report-table th:nth-child(3) { width: 10%; }
.report-table th:nth-child(4) { width: 21%; }
.report-table th:nth-child(5) { width: 15%; }
.report-table th:nth-child(6) { width: 10%; }
.report-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-table small { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.report-table small.valoper { font: 400 11px/1.3 var(--mono); color: var(--ink-faint); }
.report-table small.why { margin-top: 3px; color: var(--warn); }
.report-table small.big { color: var(--lamp); }
.report-table small.warn, .report-table .warn { color: var(--warn); }
.report-table .bad { color: var(--bad); font-weight: 600; }
.who-name { font: 700 14px/1.35 var(--display); }
.report-rules { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.report-rules h3 { margin: 0; font: 700 13px/1.3 var(--display); color: var(--ink); }
.report-rules p { margin: 0; max-width: 92ch; }
.report-grades { margin: 2px 0 4px; padding: 0; list-style: none; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.report-grades li { display: flex; gap: 8px; align-items: center; }
.report-grades .grade { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }
.report-more summary { cursor: pointer; color: var(--ink-soft); }
.report-more[open] summary { margin-bottom: 4px; }
.report-more p + p { margin-top: 4px; }
@media (max-width: 820px) {
  .report-table, .report-table tbody { display: block; }
  /* 見出しは読み上げのために残し、画面には各行のラベルで出す */
  .report-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .report-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .report-table tbody tr:last-child { border-bottom: 0; padding-bottom: 2px; }
  .report-table td { display: block; padding: 0; border: 0; }
  .report-table td.fact { grid-column: 1 / -1; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 0 10px; }
  .report-table td.fact::before { content: attr(data-label); font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
}

[hidden] { display: none !important; }