* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #050506; color: #eee; overflow: hidden;
  font-family: "Courier New", Courier, monospace;
}
body { display: flex; align-items: center; justify-content: center; }

/* the stage keeps a fixed 960x600 layout and is scaled to fit by main.js */
#stage {
  position: relative; width: 960px; height: 600px; flex: none;
  transform-origin: center center; background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}
#screen { position: absolute; inset: 0; width: 960px; height: 600px; image-rendering: pixelated; }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: rgba(4, 4, 8, 0.66);
}
.screen.dim { background: rgba(0, 0, 0, 0.74); }
.hidden { display: none !important; }

.logo {
  font-size: 92px; margin: 0; letter-spacing: 2px; color: #f4f0e0;
  text-shadow: 5px 5px 0 #000, 0 0 30px rgba(224, 40, 40, 0.6);
}
.logo span { color: #e02828; }
h2 { font-size: 38px; margin: 0 0 10px; text-shadow: 3px 3px 0 #000; letter-spacing: 2px; }
h2.red { color: #e02828; font-size: 64px; }
.sub { margin: 4px 0 22px; color: #c8c0a8; font-size: 18px; letter-spacing: 3px; text-shadow: 2px 2px 0 #000; }
.hint { color: #8a8a90; font-size: 14px; margin-top: 18px; text-shadow: 1px 1px 0 #000; }
#diff-desc { margin-top: 8px; color: #c8c0a8; }

.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.menu.row { flex-direction: row; margin-top: 18px; }
button {
  font: bold 20px "Courier New", Courier, monospace; color: #e8e4d8; background: rgba(20, 20, 26, 0.9);
  border: 2px solid #5a5a64; padding: 10px 26px; min-width: 300px; cursor: pointer; letter-spacing: 1px;
}
.menu.row button { min-width: 0; }
button:focus, button:hover { outline: none; border-color: #ffe060; color: #ffe060; background: rgba(50, 40, 10, 0.95); }
button:disabled { opacity: 0.4; cursor: default; }
button .meta { float: right; margin-left: 24px; color: #9a9a9a; font-size: 15px; }
#ch-list button { min-width: 620px; text-align: left; font-size: 18px; }

.cards { display: flex; gap: 18px; }
.card {
  width: 280px; min-width: 0; padding: 14px; display: flex; flex-direction: column; align-items: center;
  border-width: 3px; text-align: center;
}
.card canvas { width: 144px; height: 144px; image-rendering: pixelated; background: #14141c; border: 2px solid #333; }
.card .t { font-size: 21px; margin: 10px 0 6px; }
.card .d { font-size: 13px; font-weight: normal; color: #b8b8b8; line-height: 1.35; min-height: 72px; }
.card .p { font-size: 13px; color: #8a8a8a; margin-top: 8px; }

.tips { text-align: left; max-width: 700px; font-size: 13px; line-height: 1.35; color: #b8b8c0; margin: 8px 0 0; padding-left: 18px; text-shadow: 1px 1px 0 #000; }
#ch-list button { padding: 7px 20px; }
.how { text-align: left; max-width: 760px; font-size: 16px; line-height: 1.45; padding-left: 20px; margin: 6px 0; }
.how li { margin-bottom: 8px; }
.how b { color: #ffe060; }

.story { justify-content: flex-end; background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.9)); padding-bottom: 40px; }
.place { position: absolute; top: 70px; left: 0; right: 0; font-size: 30px; font-weight: bold; letter-spacing: 3px; text-shadow: 3px 3px 0 #000; white-space: pre-line; line-height: 1.5; }
.dialog { display: flex; gap: 18px; width: 820px; min-height: 150px; padding: 16px; background: rgba(8, 8, 12, 0.95); border: 2px solid #5a5a64; text-align: left; }
.dialog canvas { width: 120px; height: 120px; image-rendering: pixelated; background: #1c1c28; border: 2px solid #333; flex: none; }
.dialog .name { font-weight: bold; font-size: 17px; margin-bottom: 8px; letter-spacing: 1px; }
.dialog .text { font-size: 19px; line-height: 1.4; }
.dialog.narr .text { font-style: italic; color: #d8d0b8; }

.results { display: flex; gap: 40px; align-items: center; margin: 10px 0; }
.grade { font-size: 150px; font-weight: bold; color: #ffe060; text-shadow: 6px 6px 0 #000; width: 150px; }
#res-table { font-size: 19px; text-align: left; border-spacing: 14px 5px; }
#res-table td:last-child { text-align: right; color: #ffe060; font-weight: bold; }