@font-face {
  font-family: 'Press Start 2P';
  src: url('./press-start-2p-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif SC';
  src: url('./noto-serif-sc-chinese.woff2') format('woff2');
  font-display: swap;
}
:root { color-scheme: light; font-family: 'Courier New', Courier, monospace; color: #25473c; background: #d8c8aa; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.viewport {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background-color: #d8c8aa;
  background-image: linear-gradient(#aa947516 1px, transparent 1px), linear-gradient(90deg, #aa947516 1px, transparent 1px);
  background-size: 24px 24px;
}
.screen-frame {
  width: min(100%, 620px);
  border: 5px solid #25473c;
  background: #f5e8c9;
  box-shadow: 8px 8px 0 #a17057, 12px 12px 0 #25473c;
}
.screen-inner { min-height: 570px; border: 4px solid #ebd6ac; padding: 30px clamp(23px, 6vw, 54px) 38px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 66px; color: #4d6651; font: 8px/1.6 'Press Start 2P', monospace; letter-spacing: .01em; }
.dumpling { width: 38px; height: 29px; flex: none; }
.screen-label { margin: 0 0 20px; color: #a8654c; font: 8px/1.5 'Press Start 2P', monospace; letter-spacing: .015em; }
h1 { margin: 0 0 34px; font: 19px/1.85 'Press Start 2P', monospace; letter-spacing: -.025em; }
.cursor { color: #b66f50; margin-left: 2px; }
.field-group { margin-bottom: 24px; }
.field-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; font: 9px/1.6 'Press Start 2P', monospace; }
.field-label span { color: #8b816d; }
.segments { display: flex; align-items: center; gap: 10px; }
.segments input {
  appearance: none;
  min-width: 0;
  width: 74px;
  height: 56px;
  padding: 0 4px;
  border: 3px solid #58715b;
  border-radius: 0;
  outline: none;
  background: #fffaf0;
  color: #25473c;
  box-shadow: inset 3px 3px 0 #ddcaa7;
  text-align: center;
  font: 16px/1 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: .04em;
}
.segments input::placeholder { color: #a79d84; opacity: 1; }
.segments input:focus-visible { border-color: #b66f50; box-shadow: inset 3px 3px 0 #ddcaa7, 0 0 0 3px #f5e8c9, 0 0 0 6px #b66f50; }
.segments input:disabled { opacity: .42; cursor: not-allowed; }
.time-segments:has(input:disabled) .separator { opacity: .42; }
.unknown-choice { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; cursor: pointer; font: 8px/1.5 'Press Start 2P', monospace; }
.unknown-choice input { appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid #58715b; background: #fffaf0; box-shadow: inset 2px 2px 0 #ddcaa7; cursor: pointer; }
.unknown-choice input:checked { background: #25473c; box-shadow: inset 0 0 0 3px #fffaf0; }
.unknown-choice input:focus-visible { outline: 3px solid #b66f50; outline-offset: 3px; }
.date-segments input:first-child { width: 112px; }
.separator { color: #9c886e; font: 18px/1 'Press Start 2P', monospace; }
.form-error { min-height: 34px; margin: -2px 0 8px; color: #a4423d; font: bold 13px/1.4 'Courier New', monospace; }
.action-button {
  width: 100%;
  min-height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border: 3px solid #25473c;
  border-radius: 0;
  background: #25473c;
  color: #fff1d5;
  box-shadow: 5px 5px 0 #a17057;
  font: 10px/1.4 'Press Start 2P', monospace;
  text-align: left;
}
.action-button span:last-child { font: bold 22px/1 'Courier New', monospace; }
.action-button:hover { background: #365a48; }
.action-button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #a17057; }
.action-button:focus-visible, .back-button:focus-visible { outline: 3px solid #b66f50; outline-offset: 4px; }
.result-screen { text-align: center; }
.result-screen .screen-label { text-align: left; }
.result-screen h1 { font-size: 16px; line-height: 1.7; margin: 5px 0 25px; }
.master-tile {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 0 auto 26px;
  border: 4px solid #25473c;
  background: #e5cca0;
  box-shadow: 7px 7px 0 #a17057;
}
.master-tile span { font: 90px/1 'Noto Serif SC', Georgia, serif; }
.master-name { margin: 0 0 17px; color: #a8654c; font: 15px/1.6 'Press Start 2P', monospace; }
.master-meaning { margin: 0 auto 18px; max-width: 360px; color: #25473c; font: bold 16px/1.5 'Courier New', monospace; }
.method-note { max-width: 370px; margin: 0 auto 35px; color: #5f6c55; font: 14px/1.6 'Courier New', monospace; }
.unknown-intro { max-width: 390px; margin: 0 auto 23px; font: bold 15px/1.5 'Courier New', monospace; }
.possibilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; text-align: center; }
.possibility { min-width: 0; padding: 15px 7px 18px; border: 3px solid #25473c; background: #e5cca0; box-shadow: 4px 4px 0 #a17057; }
.possibility-label { min-height: 26px; margin: 0 0 9px; color: #4d6651; font: 7px/1.7 'Press Start 2P', monospace; }
.possibility-symbol { display: block; font: 57px/1.2 'Noto Serif SC', Georgia, serif; }
.possibility-name { margin: 8px 0; color: #a8654c; font: 9px/1.7 'Press Start 2P', monospace; }
.possibility-meaning { margin: 0; font: bold 12px/1.4 'Courier New', monospace; }
.unknown-note { max-width: 370px; margin: 0 auto 28px; color: #5f6c55; font: 14px/1.5 'Courier New', monospace; }
.result-actions { display: flex; flex-direction: column; align-items: center; gap: 23px; }
.kofi-link { position: relative; width: min(100%, 370px); min-height: 62px; display: grid; place-items: center; padding: 12px 40px; border: 3px solid #25473c; background: #25473c; color: #fff1d5; box-shadow: 5px 5px 0 #a17057; font: 9px/1.5 'Press Start 2P', monospace; text-align: center; text-decoration: none; }
.kofi-link span:last-child { position: absolute; right: 17px; font: bold 22px/1 'Courier New', monospace; }
.kofi-link:hover { background: #365a48; }
.kofi-link:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #a17057; }
.back-button { border: 0; border-bottom: 2px solid currentColor; padding: 0 0 5px; background: transparent; color: #25473c; font: 9px/1.5 'Press Start 2P', monospace; }
.back-button:hover { color: #a8654c; }
.kofi-link:focus-visible { outline: 3px solid #b66f50; outline-offset: 4px; }
[hidden] { display: none !important; }
@media (max-width: 540px) {
  .viewport { padding: 18px 17px; }
  .screen-frame { box-shadow: 5px 5px 0 #a17057, 8px 8px 0 #25473c; }
  .screen-inner { min-height: 560px; padding: 25px 21px 31px; }
  .brand { margin-bottom: 58px; font-size: 7px; }
  h1 { font-size: clamp(13px, 3.5vw, 18px); line-height: 2; }
  .screen-label { font-size: 7px; }
  .field-label { font-size: 8px; }
  .segments { gap: 6px; }
  .segments input { width: 59px; height: 52px; font-size: 14px; }
  .date-segments input:first-child { width: 86px; }
  .separator { font-size: 12px; }
  .action-button { font-size: 8px; min-height: 58px; padding: 0 13px; }
  .result-screen h1 { font-size: 12px; }
  .master-tile { width: 134px; height: 134px; }
  .master-tile span { font-size: 80px; }
  .master-name { font-size: 12px; }
  .possibilities { gap: 10px; }
  .possibility { padding: 12px 5px 14px; }
  .possibility-label { font-size: 6px; }
  .possibility-name { font-size: 7px; }
  .possibility-meaning { font-size: 11px; }
  .back-button { font-size: 7px; }
  .kofi-link { min-height: 58px; font-size: 8px; padding: 10px 32px; }
  .kofi-link span:last-child { right: 13px; }
}