/* 90年代の国産パソコンの起動画面。青一面に白いドット文字、罫線の箱。割れた文字は珊瑚色、耐えた文字は黄色。 */
:root {
  color-scheme: dark;
  --blue: #0b1c9c;
  --blue-deep: #071369;
  --blue-lift: #182bb8;
  --white: #f4f6ff;
  --dim: #b9c4ff;
  --yellow: #ffe14d;
  --coral: #ff8f7d;
  --cyan: #82f0ff;
  --ink: #06104f;
  --display: "DotGothic16", "BIZ UDGothic", "Hiragino Kaku Gothic ProN", monospace;
  --body: "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html, body { background: var(--blue); }
body {
  margin: 0;
  color: var(--white);
  font: 16px/1.75 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 56px;
}
#shell { max-width: 760px; margin-inline: auto; display: grid; gap: 28px; }
#bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px;
  font: 15px/1.5 var(--display);
  background: var(--white); color: var(--ink);
  padding: 4px 10px; margin-top: 16px;
}
#app { display: grid; gap: 28px; min-width: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 13vw, 92px); line-height: 1.05; color: var(--yellow); letter-spacing: .01em; }
h2 { font-size: clamp(26px, 6vw, 36px); line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.4; color: var(--cyan); }
p { margin: 0; max-width: 40em; text-wrap: pretty; line-break: strict; word-break: auto-phrase; }
.lede { font-size: 18px; }
.dim { color: var(--dim); font-size: 14px; }
.stack { display: grid; gap: 12px; min-width: 0; }
.box { border: 3px double var(--white); padding: 18px; display: grid; gap: 14px; min-width: 0; }
.warn { border: 2px solid var(--yellow); padding: 10px 14px; color: var(--yellow); font-weight: 700; }
ol.steps { margin: 0; padding-left: 1.5em; display: grid; gap: 6px; }
button {
  font: 20px/1.3 var(--display); color: var(--ink); background: var(--white);
  border: 0; padding: 12px 22px; cursor: pointer;
  box-shadow: 5px 5px 0 var(--blue-deep);
}
button:hover:not(:disabled) { background: var(--yellow); }
button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--blue-deep); }
button:disabled { background: var(--blue-lift); color: var(--dim); box-shadow: none; cursor: not-allowed; }
button.sub { font-size: 16px; padding: 8px 14px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
label { font-weight: 700; display: block; }
input[type="text"] {
  width: 100%; font: 700 20px/1.4 var(--mono); color: var(--white); background: var(--blue-deep);
  border: 2px solid var(--white); border-radius: 0; padding: 12px; caret-color: var(--yellow);
}
input[type="text"]::placeholder { color: var(--dim); font-weight: 500; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.checks li::before { content: "[ ] "; font-family: var(--mono); color: var(--dim); }
.checks li.ok { color: var(--yellow); }
.checks li.ok::before { content: "[x] "; color: var(--yellow); }
.tips { margin: 0; padding: 0 0 0 12px; border-left: 6px solid var(--cyan); list-style: none; display: grid; gap: 6px; max-width: 40em; }
.tips li { text-wrap: pretty; line-break: strict; word-break: auto-phrase; }
.hand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.hand li { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--blue-lift); min-width: 0; }
.hand .state { font-size: 12px; }
.hand .name { font-weight: 700; }
.hand .eg { font: 500 12px/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.hand li.has { color: var(--dim); }
.hand li.has .state { color: var(--coral); }
.hand li.gap { border: 2px solid var(--cyan); }
.hand li.gap .state { color: var(--cyan); font-weight: 700; }
.learn { color: var(--cyan); font-weight: 700; }

/* 解析結果：同じ攻撃で割れた文字を1かたまりにして、下に手口を書く */
.segs { display: flex; flex-wrap: wrap; gap: 12px 8px; }
.seg { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.caps { display: flex; flex-wrap: wrap; gap: 2px; }
.cap {
  font: 700 19px/1 var(--mono); width: 1.5em; height: 1.75em;
  display: grid; place-items: center;
  background: var(--blue-lift); color: var(--white);
  transition: background .15s, color .15s;
}
.seg.hit .cap { background: var(--coral); color: var(--ink); }
.seg.safe .cap { background: var(--yellow); color: var(--ink); }
.seg.trick .cap { background: var(--cyan); color: var(--ink); }
.tag { font-size: 12px; line-height: 1.35; color: var(--dim); opacity: 0; transition: opacity .15s; }
.seg.hit .tag, .seg.safe .tag, .seg.trick .tag { opacity: 1; }

.hud-row { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.hud-num { font: clamp(24px, 6vw, 34px)/1.2 var(--display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.stream { font: 700 15px/1.5 var(--mono); color: var(--cyan); min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log li.running > span:first-child { color: var(--yellow); font-weight: 700; }
.log { font: 14px/1.7 var(--body); display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; min-height: 3em; }
.log li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px dotted var(--blue-lift); }
.log .hit { color: var(--coral); font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; }
.log .miss { color: var(--dim); }
.log .trickhit { color: var(--cyan); font-weight: 700; overflow-wrap: anywhere; }
.log .survive { color: var(--yellow); font-weight: 700; }

.verdict { display: grid; gap: 4px; }
.verdict .big { font: clamp(40px, 11vw, 68px)/1.1 var(--display); color: var(--yellow); overflow-wrap: anywhere; }
.verdict.bad .big { color: var(--coral); }
.mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.mods .plus { color: var(--yellow); }
.mods .minus { color: var(--coral); }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--blue-lift); white-space: nowrap; }
th { font-weight: 400; color: var(--dim); font-size: 13px; }
td.num, th.num { text-align: right; }
tfoot td { color: var(--yellow); font-family: var(--display); font-size: 20px; border-bottom: 0; }
#board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
#board li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 8px; padding: 3px 6px; }
#board li.me { background: var(--yellow); color: var(--ink); }
#board .who { overflow-wrap: anywhere; }
#board .pts { font-family: var(--display); font-size: 18px; }
.result-pts { font: clamp(64px, 18vw, 120px)/1 var(--display); color: var(--yellow); }
pre.share { margin: 0; font: 500 14px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--blue-deep); padding: 12px; }
.caret::after { content: "_"; color: var(--yellow); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (max-width: 560px) {
  table { font-size: 13px; }
  th, td { padding: 6px 4px; }
  .wide-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .caret::after { animation: none; }
  .cap, .tag { transition: none; }
}