/* 鳴潮 8BIT召喚 — レイアウトとモーダル */
:root {
  --ink0: #07060f; --ink1: #12122a; --ink2: #1d1d3f; --ink3: #2b2f5c; --ink4: #464d7d;
  --ink6: #9aa3c4; --ink8: #f2f4ff; --gld3: #ffd040; --gld1: #b8620e; --vio3: #8a52f0;
  --sea4: #4fb4ff; --red3: #ff5a36; --px: 2px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ink0); color: var(--ink8);
  font-family: "DotGothic16", "MS Gothic", monospace;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { display: flex; align-items: center; justify-content: center; }

#stage { position: relative; width: 960px; height: 540px; }
#screen {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none;
}
#crt { position: absolute; inset: 0; pointer-events: none; display: none; }
body.crt #crt {
  display: block;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--px) * 0.5), rgba(0, 0, 0, 0.16) calc(var(--px) * 0.5), rgba(0, 0, 0, 0.16) var(--px)),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.45) 100%);
  mix-blend-mode: multiply;
}

#boot {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ink0); color: var(--ink6); font-size: 20px; letter-spacing: 4px; z-index: 5;
}

/* ---------- モーダル ---------- */
#modal {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 6, 15, 0.72);
}
#modal[hidden] { display: none; }
.win {
  width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--ink1);
  border: 4px solid var(--ink0);
  box-shadow: 0 0 0 4px var(--gld3), 0 0 0 8px var(--ink0), 0 12px 40px rgba(0, 0, 0, 0.6);
  image-rendering: pixelated;
}
.win-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--ink2); border-bottom: 4px solid var(--ink0);
  font-size: 20px; color: var(--gld3);
}
.win-body { padding: 14px 18px 18px; overflow: auto; font-size: 16px; line-height: 1.7; }
.win-body h3 { margin: 14px 0 4px; font-size: 17px; color: var(--sea4); font-weight: normal; }
.win-body p, .win-body ul { margin: 4px 0 8px; }
.win-body ul { padding-left: 20px; }
.muted { color: var(--ink6); font-size: 14px; }
.warn { color: var(--red3); }

.px-btn {
  font: inherit; font-size: 15px; color: var(--ink8); cursor: pointer;
  background: var(--ink2); border: 0; padding: 4px 12px;
  box-shadow: 0 0 0 2px var(--ink0), inset 0 -3px 0 var(--ink0), inset 0 2px 0 var(--ink3), 0 0 0 4px var(--ink4);
  margin: 4px 6px;
}
.px-btn:hover { background: var(--ink3); }
.px-btn:active { transform: translateY(1px); }
.px-btn.danger { box-shadow: 0 0 0 2px var(--ink0), inset 0 -3px 0 var(--ink0), 0 0 0 4px var(--red3); }
.px-btn.close { font-size: 14px; }

.row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 6px 0; }
.row.center { justify-content: center; }
.grid { display: grid; grid-template-columns: 9em 1fr; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.chk { display: block; margin: 6px 0; cursor: pointer; }
select, input[type=range] { font: inherit; font-size: 15px; width: 100%; accent-color: var(--gld3); }
select { background: var(--ink0); color: var(--ink8); border: 2px solid var(--ink4); padding: 2px 6px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; color: var(--ink6); font-weight: normal; border-bottom: 2px solid var(--ink3); padding: 4px 6px; }
.tbl td { padding: 3px 6px; border-bottom: 1px solid var(--ink2); }
.tbl tr.r5 td { color: var(--gld3); }
.tbl tr.r4 td { color: #b98cff; }
.tbl tr.r3 td { color: var(--ink6); }