:root {
  --desk: #1f5b4f;
  --paper: #f3e9d2;
  --paper-dark: #dfd0af;
  --ink: #20201d;
  --red: #d84a35;
  --blue: #236c89;
  --shadow: #153f37;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    linear-gradient(118deg, #194d43, var(--desk) 55%, #174b41);
  background-size: 18px 18px, auto;
  font-family: "Courier New", Courier, monospace;
  touch-action: manipulation;
  user-select: none;
}

button { font: inherit; }

.desk {
  width: min(980px, 100%);
  height: 100svh;
  min-height: 560px;
  margin: auto;
  padding: clamp(12px, 2.5vh, 26px) clamp(12px, 2.5vw, 28px) 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.topbar, .footer-strip {
  color: #f9f1df;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: baseline; gap: 12px; }
.brand span, small { font-size: 10px; letter-spacing: .16em; }
.brand strong { font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(28px, 5vw, 48px); letter-spacing: .035em; font-weight: 900; }

.stats { display: flex; gap: clamp(18px, 5vw, 58px); text-align: right; margin-left: auto; }
.stats div { display: grid; gap: 1px; }
.stats b { font-size: clamp(18px, 3vw, 27px); font-variant-numeric: tabular-nums; }

.text-button {
  border: 1px solid rgba(255,255,255,.55);
  color: inherit;
  background: transparent;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
}

.inbox {
  position: relative;
  min-height: 0;
  background: var(--paper);
  border: 1px solid #caba98;
  box-shadow: 8px 9px 0 rgba(7, 30, 25, .55), inset 0 0 60px rgba(89, 59, 25, .08);
  transform: rotate(-.18deg);
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) 82px;
  padding: 10px clamp(10px, 2vw, 22px) 14px;
}

.paper-label { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); font-weight: 700; font-size: 10px; letter-spacing: .1em; padding: 2px 0 6px; }
#game { width: 100%; height: 100%; display: block; }

.stamp-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(5px, 1.2vw, 12px); padding-top: 8px; }
.stamp-buttons button {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #e7d9bd;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(5px, 1.4vw, 13px);
  transition: transform .05s, box-shadow .05s, background .08s;
}
.stamp-buttons button:nth-child(2n) { transform: rotate(.5deg); }
.stamp-buttons button.active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); background: #d4bca0; }
.stamp-buttons kbd { border: 2px solid var(--red); color: var(--red); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font: 900 18px Arial, sans-serif; }
.stamp-buttons span { font-size: clamp(9px, 1.5vw, 13px); font-weight: 900; }

.verdict {
  position: absolute;
  left: 50%; top: 66%;
  z-index: 3;
  color: var(--red);
  font: 900 clamp(30px, 7vw, 72px) Impact, sans-serif;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.35);
  mix-blend-mode: multiply;
}
.verdict.pop { animation: stamp .38s ease-out; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(1.7); } 20%,70% { opacity: .88; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(.96); } }

.footer-strip { font-size: 10px; letter-spacing: .08em; }
.footer-strip b { color: #ffcfb2; }
.errors { display: flex; gap: 5px; }
.errors i { width: 13px; height: 13px; border-radius: 50%; background: #f1ded2; border: 2px solid var(--red); }
.errors i.lost { background: var(--red); }

.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(13, 45, 38, .88); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .22s; }
.overlay.visible { opacity: 1; pointer-events: auto; }
.memo { position: relative; width: min(560px, 100%); padding: clamp(27px, 5vw, 52px); background: var(--paper); box-shadow: 14px 16px 0 rgba(0,0,0,.28); transform: rotate(-1deg); }
.memo::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(32,32,29,.25); pointer-events: none; }
.memo-to { margin: 0 0 22px; padding-bottom: 8px; border-bottom: 2px solid; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.memo h1 { margin: 0; font: 900 clamp(50px, 12vw, 86px)/.8 Impact, sans-serif; letter-spacing: -.015em; }
.intro { margin: 22px 0; max-width: 50ch; font: 700 14px/1.45 Arial, sans-serif; }
.memo ol { list-style: none; padding: 0; margin: 20px 0 25px; display: grid; gap: 9px; }
.memo li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: baseline; border-top: 1px solid rgba(32,32,29,.3); padding-top: 8px; font-size: 11px; }
.memo li b { color: var(--red); font-size: 15px; }
.start-button { position: relative; z-index: 2; width: 100%; border: 0; background: var(--red); color: white; padding: 16px 18px; display: flex; justify-content: space-between; font-weight: 900; cursor: pointer; box-shadow: 4px 5px 0 var(--ink); }
.start-button:hover { background: #bd3827; }
.best { margin: 16px 0 0; text-align: center; font-size: 10px; letter-spacing: .12em; }

body.overtime .inbox { animation: overtime .45s steps(2,end) infinite; }
body.overtime .brand strong { color: #ffc4b8; }
@keyframes overtime { 50% { box-shadow: 8px 9px 0 rgba(7,30,25,.55), inset 0 0 55px rgba(216,74,53,.25); } }

@media (max-width: 650px) {
  .desk { min-height: 500px; }
  .brand span, .text-button { display: none; }
  .stats { gap: 12px; }
  .stats div:nth-child(3) { display: none; }
  .inbox { grid-template-rows: 25px minmax(0, 1fr) 68px; }
  .stamp-buttons button { flex-direction: column; gap: 2px; }
  .stamp-buttons span { font-size: 8px; }
  .footer-strip > span:first-child { display: none; }
  .memo { padding: 30px 27px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }