:root {
	color-scheme: light;
	--paper: #f5f3ec;
	--ink: #20251f;
	--muted: #73786f;
	--line: #dcded5;
	--coral: #f16d50;
	--lime: #d8f06c;
	--green: #c8d8a9;
	--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--sans: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
.topbar { width: min(1120px, calc(100% - 64px)); height: 76px; margin: auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 17px; font-weight: 800; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-size: 12px; transform: rotate(-5deg); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-name { line-height: 1; }
.brand-byline { color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1; }
.studio-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.brand-accent { color: #9e3e2e; }
.back-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.page-shell { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 36px; }
.game-heading { margin-bottom: 23px; }
.eyebrow { margin: 0 0 8px; color: var(--coral); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; }
h1 { margin: 0 0 8px; font: 500 43px/1.05 var(--serif); letter-spacing: 0; }
.game-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.play-area { width: min(100%, 510px); margin: auto; padding: 18px; border: 1px solid #dedfd7; background: #fbfaf6; }
.round-topline { display: flex; justify-content: space-between; align-items: center; }
.readout { display: flex; flex-direction: column; gap: 3px; }
.readout-right { align-items: flex-end; }
.readout-label { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.1em; }
.readout strong { font: 650 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.miss-limit { color: #92978d; font-size: 11px; }
.hangman-stage { height: 168px; position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 14px; overflow: hidden; border: 1px solid #e0e3d8; background: #f1f3e9; }
.gallow-base, .gallow-post, .gallow-beam, .gallow-rope { position: absolute; display: block; background: #526049; }
.gallow-base { width: 112px; height: 4px; bottom: 18px; left: calc(50% - 69px); }
.gallow-post { width: 4px; height: 123px; bottom: 20px; left: calc(50% - 52px); }
.gallow-beam { width: 74px; height: 4px; bottom: 140px; left: calc(50% - 52px); }
.gallow-rope { width: 3px; height: 19px; bottom: 122px; left: calc(50% + 20px); }
.person-part { position: absolute; display: block; opacity: 0; background: #26342d; transition: opacity 150ms ease; }
.person-part.is-shown { opacity: 1; }
.part-head { width: 26px; height: 26px; bottom: 96px; left: calc(50% + 8px); border: 3px solid #26342d; border-radius: 50%; background: transparent; }
.part-body { width: 3px; height: 39px; bottom: 58px; left: calc(50% + 20px); }
.part-arm-left, .part-arm-right, .part-leg-left, .part-leg-right { width: 3px; height: 24px; transform-origin: top center; left: calc(50% + 20px); }
.part-arm-left { bottom: 62px; transform: rotate(45deg); }.part-arm-right { bottom: 62px; transform: rotate(-45deg); }
.part-leg-left, .part-leg-right { height: 30px; bottom: 28px; }
.part-leg-left { transform: rotate(35deg); }.part-leg-right { transform: rotate(-35deg); }
.stage-note { position: absolute; right: 12px; bottom: 10px; color: #858b7d; font-size: 7px; font-weight: 750; letter-spacing: 0.08em; }
.game-status { min-height: 18px; margin: 13px 0 14px; color: var(--muted); font-size: 11px; text-align: center; }
.word-display { min-height: 40px; display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin-bottom: 18px; }
.word-letter { width: 35px; height: 35px; display: grid; place-items: center; border-bottom: 2px solid #859179; color: var(--ink); font: 600 19px/1 var(--sans); }
.letter-keyboard { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.letter-key { min-width: 0; min-height: 37px; padding: 0; border: 1px solid #d9dcd1; background: #f5f5ef; color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.letter-key:hover:not(:disabled) { border-color: #aeb89f; background: #eaf0dd; }
.letter-key.correct { border-color: #bfd09d; background: #e7efd5; color: #3d5935; }
.letter-key.incorrect { border-color: #efc0b3; background: #f8e4de; color: #a64e3c; }
.letter-key:disabled { cursor: default; }
.letter-key:focus-visible, .new-word-button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; z-index: 1; }
.scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; }
.score-item + .score-item { border-left: 1px solid var(--line); }
.score-item span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.08em; }
.score-item strong { font: 500 21px/1 var(--serif); }
.new-word-button { width: 100%; min-height: 38px; margin-top: 13px; border: 1px solid #cfd2c8; background: transparent; color: var(--ink); font-size: 11px; font-weight: 650; cursor: pointer; }
.new-word-button:hover { background: #eff0e9; }
.new-word-button span { margin-right: 5px; font-size: 16px; }
.page-footnote { margin: 15px 0 0; color: #858a80; font: italic 13px var(--serif); text-align: center; }
.site-footer { width: min(680px, calc(100% - 40px)); min-height: 56px; margin: 0 auto; display: flex; align-items: center; border-top: 1px solid var(--line); }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }
.feedback-link { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 650; text-decoration: none; }
.feedback-link:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 520px) {
	.topbar { width: calc(100% - 32px); height: 64px; }
	.site-footer { width: calc(100% - 24px); }
	.page-shell { width: calc(100% - 24px); padding-top: 30px; }
	h1 { font-size: 39px; }
	.play-area { padding: 14px 11px; }
	.hangman-stage { height: 152px; }
	.letter-keyboard { gap: 4px; }
	.letter-key { min-height: 38px; font-size: 11px; }
	.word-display { gap: 5px; }
	.word-letter { width: min(35px, 10vw); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }