@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Franklin:wght@500;700;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root { --ink:#171713; --paper:#f5efe3; --red:#dd3f2d; --line:#bdb4a3; --muted:#6c675d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:'Libre Franklin',sans-serif; }
body::before { content:""; position:fixed; inset:0; opacity:.22; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E"); }
button { font:inherit; color:inherit; }
.shell { width:min(1180px,92vw); margin:auto; padding:26px 0 20px; }
.masthead { border-block:3px solid var(--ink); min-height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:900; letter-spacing:-.08em; }
.brand span { color:var(--red); font-size:.7em; margin-left:.25em; }
.scoreboard { display:flex; gap:26px; font:500 .72rem 'DM Mono',monospace; letter-spacing:.12em; }
.scoreboard span { display:grid; gap:4px; text-align:right; }
.scoreboard strong { font:900 1.45rem 'Libre Franklin',sans-serif; letter-spacing:0; }
.game-card { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr); min-height:650px; border-bottom:3px solid var(--ink); }
.art-panel { padding:40px clamp(20px,4vw,56px) 30px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.eyebrow,.category { font:500 .72rem 'DM Mono',monospace; letter-spacing:.16em; }
.eyebrow::before { content:'●'; color:var(--red); margin-right:10px; }
.drawing { flex:1; display:grid; place-items:center; }
.drawing svg { width:min(100%,360px); overflow:visible; }
.gallows,.figure { fill:none; stroke:var(--ink); stroke-width:7; stroke-linecap:square; stroke-linejoin:miter; }
.figure { stroke:var(--red); }
.figure [data-part] { opacity:0; transform:translateY(-5px); transition:.25s ease; }
.figure [data-part].visible { opacity:1; transform:none; }
.misses { border-top:1px solid var(--line); padding-top:17px; margin:0; text-align:center; font:500 .74rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.09em; }
.misses span { color:var(--red); font-size:1.15rem; font-weight:700; }
.play-panel { padding:42px 0 32px clamp(30px,6vw,76px); display:flex; flex-direction:column; }
.category { color:var(--red); margin:0 0 16px; }
h1 { margin:0; font:italic 700 clamp(2.8rem,6vw,5.5rem)/.95 'Playfair Display',serif; letter-spacing:-.05em; }
.subtitle { color:var(--muted); font-size:.92rem; margin-top:20px; }
.word { display:flex; flex-wrap:wrap; gap:clamp(6px,1vw,12px); margin:55px 0 20px; }
.word span { width:clamp(25px,3.5vw,45px); height:55px; border-bottom:4px solid var(--ink); display:grid; place-items:center; font-size:clamp(1.3rem,2.4vw,2.2rem); font-weight:900; transform:translateY(0); }
.word span.revealed { animation:pop .25s ease-out; }
@keyframes pop { 50% { transform:translateY(-8px); color:var(--red); } }
.message { min-height:22px; margin:0 0 28px; color:var(--muted); font:400 .76rem 'DM Mono',monospace; }
.keyboard { margin-top:auto; display:grid; grid-template-columns:repeat(9,1fr); gap:7px; }
.keyboard button { aspect-ratio:1; min-width:0; border:1px solid var(--ink); background:transparent; cursor:pointer; font:700 clamp(.7rem,1.2vw,.95rem) 'DM Mono',monospace; transition:.15s; }
.keyboard button:hover:not(:disabled),.keyboard button:focus-visible { background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.keyboard button:disabled { cursor:default; opacity:.25; }
.keyboard button.correct { background:var(--ink); color:var(--paper); opacity:1; }
.keyboard button.wrong { text-decoration:line-through; }
.result { margin-top:22px; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.result[hidden] { display:none; }
.result p { margin:0; font-family:'Playfair Display',serif; font-style:italic; }
.result button { flex:none; background:var(--red); border:0; color:white; padding:14px 18px; font-size:.72rem; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.result button:hover { background:var(--ink); }
.result span { margin-left:18px; }
footer { padding:16px 0; display:flex; justify-content:space-between; color:var(--muted); font:500 .62rem 'DM Mono',monospace; letter-spacing:.1em; }
footer button { padding:0; background:none; border:0; border-bottom:1px solid; font-size:inherit; letter-spacing:inherit; cursor:pointer; }
@media (max-width:760px) {
  .shell { width:min(92vw,560px); }
  .game-card { display:block; }
  .art-panel { height:310px; padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }
  .drawing svg { width:210px; height:200px; }
  .play-panel { padding:30px 0; min-height:570px; }
  .word { margin-top:38px; }
  .keyboard { grid-template-columns:repeat(7,1fr); }
  .scoreboard { gap:13px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }