/* The concourse and the hidden station. Colours follow scripts/style.py: dark board casings, white printed signs. */
:root {
  --body: #25282e; --edge: #444a53; --plate: #f4f4ef; --plate-edge: #8a9099;
  --line: #8f76d6; --amber: #ffab1f; --green: #4df06c; --red: #ff4a36;
  --goth: "Yu Gothic UI", "Hiragino Sans", "Noto Sans CJK JP", Meiryo, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: #0d1117; color: #e6edf3; font: 15px/1.7 var(--goth); }
body { margin: 0; }
main { max-width: 878px; margin: 0 auto; padding: 16px; }
a { color: #7fb6ff; }
h2, p { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* station name sign */
.name { background: var(--plate); color: #111; border: 2px solid var(--plate-edge); border-radius: 8px; text-align: center; overflow: hidden; }
.name-ja { font-size: 44px; font-weight: 800; letter-spacing: .25em; text-indent: .25em; line-height: 1.5; padding-top: 6px; }
.name-en { font: 700 15px/1.4 var(--mono); letter-spacing: .2em; padding-bottom: 8px; }
.name-en span { font: 12px var(--goth); letter-spacing: .05em; color: #555; margin-left: 8px; }
.band { display: flex; justify-content: space-between; gap: 8px; background: var(--line); padding: 6px 14px; }
.band a, .band span { color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.band a:hover { text-decoration: underline; }

/* a board casing with its printed strip */
.case { background: var(--body); border: 1px solid var(--edge); border-radius: 8px; margin: 14px 0; padding: 0 20px 14px; }
.strip { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 9px 0 7px; border-top: 2px solid rgba(106, 113, 123, .45); margin: 2px -10px 0; padding-left: 10px; padding-right: 10px; }
.strip h2 { font-size: 17px; letter-spacing: .18em; color: #f2f2ee; }
.strip span { font-size: 11.5px; color: #aab0b8; letter-spacing: .06em; }
.strip small { margin-left: auto; font-size: 11px; color: #8d949d; }
.note { font-size: 13.5px; color: #c9d1d9; margin: 2px 0 8px; }

.led { position: relative; width: 100%; background: #080706; border: 3px solid #000; outline: 1px solid #15171a; border-radius: 2px; overflow: hidden; }
.led canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.led .glow { filter: blur(1.8px); opacity: .5; mix-blend-mode: screen; pointer-events: none; }

/* the live camera: the screen of the README's diorama in a frame; live.js sets it to the visitor's clock */
.cam { aspect-ratio: 804 / 208; background: #070605; border: 3px solid #000; outline: 1px solid #15171a; border-radius: 2px; overflow: hidden; }
.cam iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.cam-say { margin-top: 8px; min-height: 1.7em; font-size: 12.5px; color: #aab0b8; text-align: center; }

/* text for screen readers (and for checks): what the LEDs show */
.say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.keys { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.keys small { color: #8d949d; font-size: 12px; flex-basis: 100%; text-align: center; }
button { font: 700 15px var(--goth); color: #111; background: var(--plate); border: 2px solid var(--plate-edge); border-radius: 6px; padding: 8px 16px; min-width: 48px; min-height: 44px; cursor: pointer; }
button:hover { background: #fff; }
button:active { transform: translateY(1px); }
button.ok { border-color: #1f9d3f; box-shadow: inset 0 -4px #4df06c; }
button.ng { border-color: #c5301f; box-shadow: inset 0 -4px #ff4a36; }
button[aria-pressed="true"] { background: var(--amber); border-color: #9a6400; }
#bell { background: #ffd500; border-color: #1a1a1a; }

.rules { margin: 0 0 10px; padding-left: 2em; font-size: 14px; color: #e6edf3; }
.rules li.rest { list-style: "* "; }
.rules b { display: inline-block; min-width: 4.2em; text-align: center; border-radius: 3px; padding: 0 4px; margin-right: 6px; color: #111; font-size: 13px; }
.rules b.ok { background: var(--green); }
.rules b.ng { background: var(--red); }

/* the hammer test: six wheels to tap. The one tapped last has the amber ring; after the answer the cracked one has the red ring */
.wheels { --wheel: radial-gradient(circle, #15171a 0 34%, #6a717b 35% 40%, #3a3f47 41% 66%, #8d949d 67% 76%, #25282e 77%); gap: 8px; }
.wheels button, .wheels button:hover, .wheels button[aria-pressed="true"] { width: 56px; height: 56px; min-width: 0; padding: 0; border: 2px solid #000; border-radius: 50%; background: var(--wheel); color: #f2f2ee; font: 700 17px var(--mono); }
.wheels button:hover { filter: brightness(1.25); }
.wheels button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--amber); }
.wheels button.bad { box-shadow: 0 0 0 3px var(--red), 0 0 0 6px #080706; }
.wheels button.bad[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--red), 0 0 0 6px var(--amber); }
@keyframes hit { 35% { transform: translateY(3px) rotate(-8deg); } }
.wheels button.hit { animation: hit .2s; }
@media (prefers-reduced-motion: reduce) { .wheels button.hit { animation: none; } }

/* the stamp card of the rally: a ring of dashes until the stamp is pressed, red ink after */
.rally { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 6px; margin: 4px 0 12px; padding: 12px 8px; background: var(--plate); border: 2px solid var(--plate-edge); border-radius: 6px; color: #333; }
.rally li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rally .ink { display: grid; place-content: center; width: 92px; height: 92px; border: 2px dashed #9aa0a8; border-radius: 50%; color: #8a9099; line-height: 1.3; }
.rally .ink b { font-size: 16px; letter-spacing: .05em; }
.rally .ink i { font: 700 11px var(--mono); min-height: 1.3em; }
.rally small { font-size: 11.5px; line-height: 1.4; color: #555; }
.rally .got .ink { border: 4px double #c5301f; color: #c5301f; transform: rotate(-8deg); }
.rally .got:nth-child(even) .ink { transform: rotate(6deg); }
.rally .got small { color: #888; }
.rally li[hidden] { display: none; }   /* the extra stamp: no place on the card until it is pressed */
.rally.more { grid-template-columns: repeat(7, 1fr); }
@keyframes press { from { scale: 1.5; opacity: 0; } }
.rally .new .ink { animation: press .28s cubic-bezier(.175, .885, .32, 1.275); }
@media (prefers-reduced-motion: reduce) { .rally .new .ink { animation: none; } }

/* platform sign above the games */
.sec { display: flex; align-items: center; gap: 12px; background: var(--plate); color: #111; border: 2px solid var(--plate-edge); border-radius: 8px; padding: 6px 14px; margin-top: 22px; font-size: 22px; letter-spacing: .1em; scroll-margin-top: 12px; }
.sec span { display: grid; place-items: center; width: 38px; height: 38px; border: 5px solid var(--line); border-radius: 50%; font-size: 16px; letter-spacing: 0; background: #fff; }
.sec small { font: 11px var(--mono); color: #666; letter-spacing: .15em; margin-left: auto; }

/* way out: yellow, like the exit signs of a station; blue for a transfer */
.exits { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.exits a { flex: 1 1 34%; min-width: 240px; background: #ffd500; color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 7px; padding: 8px 14px; text-decoration: none; font: 800 19px var(--mono); }
.exits a small { display: block; font: 700 12px var(--goth); letter-spacing: .08em; opacity: .85; }
.exits a.play { background: #1d4f9e; color: #fff; border-color: #0d2a57; }
.exits a:hover { filter: brightness(1.08); }

/* a small steel plate on a door at the end of the concourse */
.door { text-align: right; margin: -4px 2px 14px; }
.door a { display: inline-block; background: #3a3f47; color: #d5dae0; border: 1px solid #59606b; border-radius: 3px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .15em; line-height: 1.4; text-align: center; text-decoration: none; }
.door a small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .05em; color: #b4bac2; }
.door a:hover { filter: brightness(1.15); }

footer { color: #8d949d; font-size: 12.5px; padding: 4px 4px 24px; }

@media (max-width: 640px) {
  main { padding: 10px; }
  .case { padding: 0 10px 12px; }
  .strip { margin: 2px -4px 0; padding-left: 4px; padding-right: 4px; }
  .strip small { margin-left: 0; flex-basis: 100%; }
  .name-ja { font-size: 34px; }
  .band a, .band span { font-size: 12px; }
  .pad button { flex: 0 0 17%; padding: 8px 0; }
  .pad #ps-start { flex-basis: 100%; }
  .wheels { gap: 6px; }
  .wheels button, .wheels button:hover, .wheels button[aria-pressed="true"] { width: 48px; height: 48px; }
  .cam { aspect-ratio: 402 / 208; overflow-x: auto; scrollbar-width: thin; }   /* twice as large; push it sideways */
  .cam iframe { width: 200%; }
  .rally, .rally.more { grid-template-columns: repeat(3, 1fr); }
  .rally .ink { width: 84px; height: 84px; }
}

/* ---- the hidden station ---- */
.kisaragi { background: #07080b; }
.kisaragi .name { background: #d9d6c8; border-color: #5d5a50; filter: saturate(.6); }
.kisaragi .band { background: #4a4560; }
.kisaragi .band span { opacity: .75; }
.kisaragi .case { background: #1a1c20; border-color: #2e3238; }
.table { width: 100%; border-collapse: collapse; background: #e9e6da; color: #222; font: 13px var(--mono); }
.table caption { caption-side: top; text-align: left; color: #aab0b8; font: 12px var(--goth); padding: 0 0 4px; }
.table th { width: 3em; background: #cfcbbb; border: 1px solid #8f8b7c; font-weight: 700; }
.table td { border: 1px solid #8f8b7c; height: 1.9em; }
.stamp { display: grid; place-items: center; width: 168px; height: 168px; margin: 18px auto 6px; border: 4px double #c5301f; border-radius: 50%; color: #c5301f; text-align: center; transform: rotate(-8deg); font-weight: 800; line-height: 1.5; }
.stamp b { display: block; font-size: 26px; letter-spacing: .15em; }
.stamp span { font: 700 12px var(--mono); }
.center { text-align: center; }

/* ---- the station master's office ---- */
#msg { min-height: 1.7em; margin-top: 8px; color: var(--amber); }
.keys input { font: 700 17px var(--mono); color: #111; background: #fff; border: 2px solid var(--plate-edge); border-radius: 6px; padding: 8px 12px; min-height: 44px; width: min(100%, 16em); }
.jirei { background: #fbf8ee; color: #1a1a1a; border: 1px solid #b9b29a; outline: 3px double #b9b29a; outline-offset: -9px; max-width: 460px; margin: 8px auto 12px; padding: 30px 32px 26px; text-align: center; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif; font-size: 17px; line-height: 2; }
.jirei h3 { margin: 0 0 10px; font-size: 26px; letter-spacing: .3em; text-indent: .3em; }
.jirei .post { font-size: 24px; font-weight: 700; letter-spacing: .08em; }
.jirei .day { margin-top: 14px; text-align: right; font-size: 15px; }
.jirei .sign { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 15px; }
.seal { display: grid; place-content: center; width: 52px; height: 52px; border: 3px solid #c5301f; border-radius: 6px; color: #c5301f; font-size: 14px; font-weight: 800; line-height: 1.25; transform: rotate(-4deg); }