
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
#chalk-hangman{width:100%;color:#f5f1dd;font-family:Manrope,sans-serif}
#chalk-hangman *{box-sizing:border-box}
#chalk-hangman .hg-board{--ink:#f4f1df;--muted:#c4d3bf;--mark:#f4d76e;--bad:#f19ca6;--surface:#174b3b;position:relative;overflow:hidden;background:radial-gradient(ellipse at 12% 20%,#ffffff09,transparent 60%),repeating-linear-gradient(12deg,#ffffff03 0 1px,transparent 1px 7px),var(--surface);border:12px solid #916845;box-shadow:inset 0 0 24px #0005;color:var(--ink);padding:22px 26px 26px;min-height:425px;border-radius:3px}
#chalk-hangman .hg-board[data-theme=paper]{--ink:#1f3f79;--muted:#566480;--mark:#3b8057;--bad:#b24b64;--surface:#f8f1df;background:linear-gradient(90deg,transparent 35px,#d68c8c 35px 37px,transparent 37px),repeating-linear-gradient(0deg,transparent 0 23px,#a3bfd04f 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,#a3bfd04f 23px 24px),var(--surface);border:1px solid #d7cbb7;box-shadow:inset 0 0 25px #c2a87618;padding-left:48px}
#chalk-hangman .hg-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:70px;margin-bottom:12px}
#chalk-hangman .hg-brand{font-size:10px;letter-spacing:.2em;color:var(--muted)}
#chalk-hangman h2{font:600 46px/1 Caveat,cursive;margin:3px 0 0;transform:rotate(-2deg);text-decoration:underline;text-decoration-color:var(--mark);text-underline-offset:6px;text-decoration-thickness:2px}
#chalk-hangman button{font:500 13px Manrope,sans-serif;background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:4px;padding:8px 12px;cursor:pointer}
#chalk-hangman button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
#chalk-hangman button:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
#chalk-hangman button:disabled{cursor:default}
#chalk-hangman .hg-themes{display:flex;gap:6px}
#chalk-hangman .hg-themes [aria-pressed=true]{border-color:var(--mark);color:var(--mark)}
#chalk-hangman .hg-stage{display:grid;grid-template-columns:30% 1fr;gap:30px;align-items:center}
#chalk-hangman .hg-figure{display:flex;flex-direction:column;align-items:center;min-width:0}
#chalk-hangman .hg-person{width:100%;max-height:290px;overflow:visible}
#chalk-hangman .hg-person path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#chalk-hangman [data-theme=chalk] .hg-scaffold,#chalk-hangman [data-theme=chalk] .hg-body,#chalk-hangman [data-theme=chalk] .hg-glyph{filter:url(#hg-chalk-grain)}
#chalk-hangman [data-theme=paper] .hg-person path{stroke-width:2.5}
#chalk-hangman .hg-tool path{fill:var(--ink);stroke:var(--ink);stroke-width:1}
#chalk-hangman .hg-count{align-self:flex-start;font:500 21px Caveat,cursive}
#chalk-hangman .hg-caption{font:400 16px Caveat,cursive;color:var(--muted)}
#chalk-hangman .hg-topic{font-size:11px;letter-spacing:.13em;color:var(--muted);margin-bottom:8px}
#chalk-hangman .hg-clue{font:500 28px/1.2 Caveat,cursive;margin:0 0 18px}
#chalk-hangman .hg-word{display:flex;gap:5px;margin-bottom:5px;min-height:64px}
#chalk-hangman .hg-slot{flex:1;max-width:56px;min-width:0}
#chalk-hangman .hg-slot svg{display:block;width:100%;height:auto;overflow:visible}
#chalk-hangman .hg-slot path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#chalk-hangman .hg-feedback{font:400 18px Caveat,cursive;color:var(--muted);min-height:24px;margin:7px 0 15px}
#chalk-hangman .hg-alphabet{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
#chalk-hangman .hg-alphabet button{font:600 25px/1 Caveat,cursive;padding:7px 0;border-color:transparent;position:relative;min-height:36px}
#chalk-hangman .hg-alphabet button[data-result=correct]{color:var(--mark)}
#chalk-hangman .hg-alphabet button[data-result=correct]:after{content:'';position:absolute;inset:2px;border:2px solid var(--mark);border-radius:48% 55% 46% 51%;transform:rotate(-9deg)}
#chalk-hangman .hg-alphabet button[data-result=wrong]{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px}
#chalk-hangman .hg-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}
#chalk-hangman .hg-actions button{font-size:11px}
#chalk-hangman .hg-eraser{pointer-events:none;position:absolute;width:110px;height:65px;left:-140px;top:45%;background:#b7a080;border-radius:5px;box-shadow:0 9px 0 #575b52,0 13px 15px #0003;opacity:0}
#chalk-hangman .hg-board.wiping .hg-eraser{animation:hg-wipe .6s ease-in-out}
#chalk-hangman .hg-board.wiping .hg-stage{animation:hg-clear .6s ease-in-out}
@keyframes hg-wipe{0%{opacity:1;left:-140px;transform:rotate(-15deg)}100%{opacity:1;left:110%;transform:rotate(10deg)}}
@keyframes hg-clear{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
@media(max-width:600px){#chalk-hangman .hg-board{padding:16px;border-width:7px}#chalk-hangman .hg-header{padding-right:0}#chalk-hangman h2{font-size:36px}#chalk-hangman .hg-stage{gap:15px;grid-template-columns:25% 1fr}#chalk-hangman .hg-caption{display:none}#chalk-hangman .hg-count{font-size:16px}#chalk-hangman .hg-clue{font-size:23px}#chalk-hangman .hg-themes button{padding:6px}#chalk-hangman .hg-alphabet{gap:2px}#chalk-hangman .hg-alphabet button{font-size:22px}#chalk-hangman .hg-actions{gap:5px}#chalk-hangman .hg-word{min-height:48px}}
@media(max-width:390px){#chalk-hangman .hg-stage{grid-template-columns:1fr}#chalk-hangman .hg-figure{position:relative;align-items:flex-start}#chalk-hangman .hg-person{width:100px;height:100px;align-self:center}#chalk-hangman .hg-count{position:absolute;top:20px}#chalk-hangman .hg-board[data-theme=paper]{padding-left:43px}}
@media(prefers-reduced-motion:reduce){#chalk-hangman .hg-board.wiping .hg-stage,#chalk-hangman .hg-board.wiping .hg-eraser{animation:none}}

#chalk-hangman .hg-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:18px 0;color:var(--muted);font-size:11px}
#chalk-hangman .hg-options label{display:flex;gap:8px;align-items:center}
#chalk-hangman .hg-clue-mode{font:500 12px Manrope,sans-serif;padding:6px 9px;background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:4px;max-width:100%}
#chalk-hangman .hg-body{transform-box:view-box;transform-origin:184px 55px}
#chalk-hangman .lost .hg-body{animation:hg-swing 1.2s ease-in-out 3}
#chalk-hangman .hg-face path{stroke-width:2.5}
#chalk-hangman .won .hg-word{animation:hg-happy .5s ease-in-out 2}
@keyframes hg-swing{0%,100%{transform:rotate(0deg)}25%{transform:rotate(11deg)}75%{transform:rotate(-11deg)}}
@keyframes hg-happy{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#chalk-hangman .lost .hg-body,#chalk-hangman .won .hg-word{animation:none}}

html,body{margin:0;height:100%;overflow:hidden;background:#ece9e2}body{display:grid;place-items:center;padding:18px;font-family:Manrope,sans-serif}#chalk-hangman{width:min(1100px,100%);height:min(680px,calc(100dvh - 56px))}#chalk-hangman .hg-board{height:100%;min-height:0;display:flex;flex-direction:column;padding:24px 36px}#chalk-hangman .hg-header{padding-right:0}#chalk-hangman .hg-stage{flex:1;min-height:0;grid-template-columns:32% 1fr;gap:44px}#chalk-hangman .hg-person{height:min(38vh,320px)}#chalk-hangman .hg-play{max-width:620px}#chalk-hangman .hg-word{height:76px}#chalk-hangman .hg-slot{max-width:58px}#chalk-hangman .hg-alphabet button{font-size:30px;padding:10px 0}#chalk-hangman .hg-tool{display:none}.writer-canvas{position:absolute;inset:0;pointer-events:none;z-index:5}.credits{position:fixed;bottom:7px;font-size:10px;color:#686763}.credits a{color:inherit}.rotate{display:none}.load-status{position:absolute;bottom:6px;left:30px;font-size:10px;color:var(--muted)}
@media(max-height:560px) and (orientation:landscape){body{padding:8px}#chalk-hangman{height:calc(100dvh - 32px)}#chalk-hangman .hg-board,#chalk-hangman .hg-board[data-theme=paper]{padding:10px 25px;border-width:5px}#chalk-hangman .hg-header{margin:0}#chalk-hangman h2{font-size:30px}#chalk-hangman .hg-brand{font-size:8px}#chalk-hangman .hg-options{margin:8px 0;gap:10px}#chalk-hangman .hg-stage{gap:30px;grid-template-columns:29% 1fr}#chalk-hangman .hg-person{height:46vh}#chalk-hangman .hg-clue{font-size:23px;margin-bottom:5px}#chalk-hangman .hg-topic{margin-bottom:3px;font-size:9px}#chalk-hangman .hg-word{height:45px;min-height:0}#chalk-hangman .hg-slot{max-width:35px}#chalk-hangman .hg-feedback{margin:4px 0;min-height:18px;font-size:16px}#chalk-hangman .hg-alphabet button{font-size:22px;min-height:25px;padding:2px}#chalk-hangman .hg-actions{margin-top:7px}#chalk-hangman .hg-actions button{padding:6px 8px;font-size:10px}#chalk-hangman .hg-caption{display:none}}
@media(orientation:portrait) and (max-width:700px){#chalk-hangman,.credits{display:none}.rotate{display:block;text-align:center;color:#1e4b3b;font-size:22px;line-height:1.6}.rotate span{font-size:50px;display:block}}
@media(pointer:fine){body{padding:0}#chalk-hangman{display:block!important;position:absolute;width:1000px;height:620px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--preview-scale,1));transform-origin:center}#chalk-hangman .hg-board{padding:24px 36px;border-width:12px}#chalk-hangman .hg-stage{grid-template-columns:32% 1fr;gap:44px}#chalk-hangman .hg-person{height:280px}#chalk-hangman .hg-word{height:76px}.rotate{display:none!important}.credits{display:block!important}}

#chalk-hangman .lost .hg-body{animation:hg-mourn 4.8s ease-out forwards}
@keyframes hg-mourn{0%{transform:rotate(0)}15%{transform:rotate(7deg)}35%{transform:rotate(-5deg)}55%{transform:rotate(3deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){#chalk-hangman .lost .hg-body{animation:none}}
