:root{
  --wood:#704326;--wood-dark:#402416;--wood-light:#a06b3d;
  --folder:#c7a263;--folder-edge:#9d7740;--folder-light:#ddbd7e;
  --paper:#eee3c8;--paper-shadow:#c9b991;--paper-light:#f8f0db;
  --ink:#211b14;--ink-soft:#5f5545;--ink-faint:#958872;
  --red:#99291f;--red-dark:#6d1914;--green:#31543a;
  --brass:#b78a3f;--brass-light:#e5c16c;--brass-dark:#6f4d1c;
  --rule:rgba(54,42,27,.18);
}

body{
  background:
    repeating-linear-gradient(91deg,rgba(255,229,183,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(89deg,rgba(34,14,5,.08) 0 2px,transparent 2px 17px),
    repeating-linear-gradient(90deg,rgba(28,12,5,.42) 0 2px,rgba(255,212,146,.08) 2px 4px,transparent 4px 242px),
    linear-gradient(180deg,var(--wood-light),var(--wood) 44%,var(--wood-dark));
  padding:36px 18px 72px;
}
body::before{
  background:
    radial-gradient(60% 44% at 26% -5%,rgba(255,224,169,.24),transparent 76%),
    radial-gradient(70% 90% at 50% 50%,transparent 55%,rgba(27,12,5,.32));
}
body::after{box-shadow:inset 0 0 170px 30px rgba(25,10,3,.38)}

.top{max-width:780px;margin:0 auto 28px;text-align:center;display:block}
.mark{
  display:inline-block;padding:10px 20px 8px;
  font-size:17px;letter-spacing:.4em;color:#f5dfaf;
  text-shadow:0 -1px 0 #2e180b,0 1px 0 rgba(255,240,202,.25);
  border:1px solid rgba(52,28,12,.65);border-radius:3px;
  background:linear-gradient(#694122,#4a2b17);
  box-shadow:inset 0 1px 0 rgba(255,224,168,.18),inset 0 -2px 3px rgba(22,9,3,.35),0 3px 6px rgba(27,11,4,.28);
}
.mark b{color:#c95d42}

@keyframes settle{
  0%{opacity:0;transform:translateY(-18px) rotate(-1.4deg) scale(.98)}
  70%{opacity:1;transform:translateY(3px) rotate(.3deg) scale(1)}
  100%{transform:none}
}
.folder{
  max-width:780px;padding:20px 18px 18px;border-radius:4px 5px 7px 6px;
  background:
    repeating-linear-gradient(4deg,rgba(83,55,21,.025) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,var(--folder-light),var(--folder) 72%,var(--folder-edge));
  box-shadow:0 34px 45px -20px rgba(25,9,2,.8),0 9px 13px -7px rgba(28,10,3,.8),
    inset 0 1px 1px rgba(255,239,195,.45),inset 0 -2px 2px rgba(79,51,17,.18);
  animation:settle .72s cubic-bezier(.2,.8,.25,1) both;
}
.folder::before{
  content:'';position:absolute;inset:9px 8px 6px 10px;z-index:0;border-radius:3px;
  background:rgba(101,70,31,.24);transform:rotate(.35deg);filter:blur(.2px);
}
.tab{
  position:absolute;left:22px;top:-25px;min-width:230px;height:32px;margin:0;padding:10px 20px 0;
  border-radius:9px 14px 0 0;font-family:var(--tw);font-size:11px;letter-spacing:.12em;
  color:#5b4527;background:linear-gradient(180deg,#dfc180,var(--folder));
  box-shadow:inset 0 1px 0 rgba(255,245,208,.65),-1px 0 0 rgba(74,46,16,.18),1px 0 0 rgba(74,46,16,.18);
}
.clip{
  position:absolute;z-index:4;right:43px;top:-13px;width:34px;height:84px;
  border:5px solid #6d6c66;border-bottom:0;border-radius:19px 19px 3px 3px;
  transform:rotate(5deg);filter:drop-shadow(2px 3px 2px rgba(40,24,11,.35));
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.42) 46%,transparent 58%);
}
.clip::after{
  content:'';position:absolute;left:5px;top:10px;width:13px;height:57px;
  border:3px solid #8a8981;border-bottom:0;border-radius:10px 10px 0 0;
}
.help-btn{
  position:absolute;z-index:5;right:94px;top:-18px;width:38px;height:38px;padding:0;
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--cp);font-size:17px;letter-spacing:0;color:#3d2b17;
  border:1px solid var(--brass-dark);background:
    radial-gradient(circle at 35% 28%,#f0d484 0 7%,var(--brass-light) 18%,var(--brass) 62%,#846022 100%);
  box-shadow:inset 0 1px 1px rgba(255,250,207,.7),inset 0 -2px 3px rgba(73,46,12,.4),
    0 3px 0 #543714,0 5px 7px rgba(42,23,8,.35);
  text-shadow:0 1px rgba(255,255,255,.45);
}
.help-btn:hover{color:#2b1d0e;background:radial-gradient(circle at 35% 28%,#f5dd91,var(--brass-light) 23%,#c49342 68%,#846022)}
.help-btn:active{transform:translateY(3px);box-shadow:inset 0 1px 2px rgba(74,46,11,.32),0 1px 0 #543714}
.sheet{
  z-index:1;min-height:500px;padding:45px 44px 38px;border-radius:2px 3px 6px 2px;
  background:
    linear-gradient(90deg,transparent 0 56px,rgba(146,54,43,.16) 56px 57px,transparent 57px),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(61,78,83,.105) 34px 35px),
    radial-gradient(circle at 20% 5%,rgba(255,255,255,.52),transparent 32%),
    repeating-linear-gradient(7deg,rgba(68,50,28,.014) 0 1px,transparent 1px 4px),
    var(--paper);
  box-shadow:0 13px 20px -10px rgba(53,30,10,.62),0 2px 3px rgba(55,32,12,.4),
    inset 0 0 30px rgba(119,91,47,.11),inset 0 1px 0 rgba(255,255,255,.8);
  transform:rotate(-.12deg);
}
.sheet::before{
  content:'';position:absolute;right:-1px;bottom:-1px;left:auto;top:auto;width:52px;height:42px;
  background:linear-gradient(135deg,transparent 49%,rgba(131,105,66,.22) 50%,var(--paper-shadow) 51%,var(--paper-light));
  clip-path:polygon(100% 0,0 100%,100% 100%);filter:drop-shadow(-2px -2px 2px rgba(74,48,22,.15));
}
.sheet::after{
  content:'';position:absolute;left:19px;top:18px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 60% 60%,#3e2917 0 25%,#a07e4b 28% 42%,#d8bd83 44% 58%,#6a4b26 62% 100%);
  box-shadow:0 152px 0 #7b5b31,0 304px 0 #7b5b31,inset 1px 1px 2px rgba(30,16,5,.7);
}

.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hd h1{
  font-size:clamp(22px,4.8vw,34px);letter-spacing:.11em;line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.rule{
  height:3px;margin:17px 0 7px;opacity:.86;
  background:linear-gradient(90deg,var(--ink),rgba(33,27,20,.35));box-shadow:0 1px 0 rgba(255,255,255,.5);
}

@keyframes counterTick{
  0%{transform:translateY(-5px);filter:blur(2px);opacity:.3}
  100%{transform:none;filter:none;opacity:1}
}
.pool{
  width:max-content;min-width:184px;margin:18px auto 9px;padding:8px 18px 7px;
  display:flex;align-items:baseline;justify-content:center;gap:9px;
  border:1px solid rgba(84,59,31,.42);border-radius:2px;
  background:rgba(255,250,230,.27);
  box-shadow:inset 1px 2px 4px rgba(75,51,25,.16),0 1px 0 rgba(255,255,255,.62);
  color:var(--ink);
}
.pool strong{font-family:var(--tw);font-size:28px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.pool span{font-family:var(--cp);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.pool.tick strong{animation:counterTick .38s cubic-bezier(.2,.75,.3,1)}

.ev{margin-top:4px}
.ev li{
  grid-template-columns:32px minmax(0,1fr) minmax(98px,190px);gap:14px;padding:11px 0;min-height:61px;
  border-bottom:1px dashed rgba(69,55,35,.22);
}
.no{
  width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--tw);font-size:11px;letter-spacing:0;color:#6d5740;
  border:1px solid rgba(79,55,29,.34);background:rgba(255,248,224,.22);
  box-shadow:inset 0 1px 2px rgba(82,55,24,.2),0 1px 0 rgba(255,255,255,.45);
}
.txt{min-width:0;font-size:clamp(15px,3.3vw,19px);line-height:1.35;text-shadow:0 1px rgba(255,255,255,.5)}
.ev li:not(.has-guess) .txt{grid-column:2/4}
.left{min-width:56px;font-family:var(--tw);font-size:21px;letter-spacing:0;color:var(--ink-soft)}
.left b{display:inline;font-size:inherit;font-weight:400;color:inherit}
.left.one{color:var(--red);font-family:var(--cp);font-size:16px;transform:rotate(-3deg)}
.bar{
  height:19px;background:#15120e;
  box-shadow:0 1px 1px rgba(255,255,255,.3),0 2px 3px rgba(26,17,8,.35),inset 0 1px 2px #000;
  transform:rotate(-.1deg);
}
.bar::after{background:repeating-linear-gradient(92deg,rgba(255,255,255,.045) 0 1px,transparent 1px 5px)}
.crossed-guesses{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:190px}
.crossed-name{
  --tilt:0deg;position:relative;display:inline-block;padding:2px 4px;
  font-size:13px;line-height:1.15;text-align:right;color:#493f32;transform:rotate(var(--tilt));
}
.crossed-name::before,.crossed-name::after{
  content:'';position:absolute;z-index:1;left:-4px;right:-5px;top:50%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#9b241c 5%,#c34233 48%,#7e1712 95%,transparent);
  box-shadow:0 .5px 0 rgba(92,19,14,.25);opacity:.88;mix-blend-mode:multiply;
}
.crossed-name::before{transform:rotate(7deg)}
.crossed-name::after{transform:rotate(-6deg);height:2.5px;opacity:.74}
@keyframes slashIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.ev li.fresh .crossed-name::before{animation:slashIn .28s .2s ease-out both}
.ev li.fresh .crossed-name::after{animation:slashIn .3s .34s ease-out both}
@keyframes unseal{
  0%{filter:blur(3px);opacity:0;transform:translateX(-8px)}
  100%{filter:blur(0);opacity:1;transform:none}
}

.attempts{margin:14px 0 4px;padding-top:6px;border-top:2px solid rgba(43,33,21,.4)}
.att{display:block;padding:12px 0 11px;border-bottom:1px dashed var(--rule)}
.att-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.att .who{
  font-size:15px;text-decoration:line-through;text-decoration-color:rgba(153,41,31,.58);text-decoration-thickness:2px;
}
.out-stamp{
  flex:0 0 auto;font-family:var(--cp);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);border:2px solid var(--red);padding:4px 6px 3px;transform:rotate(-2deg);opacity:.82;
}
.reason{margin-top:7px;padding-left:12px;font-size:14px;line-height:1.45;color:var(--ink-soft);border-left:2px solid rgba(153,41,31,.42)}
.reason b{font-family:var(--cp);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:400;margin-right:6px}
.marks{gap:4px}
.mk{
  width:24px;height:24px;border-radius:2px;border:1px solid #4e2a1e;color:var(--paper);background:var(--red-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 1px 2px rgba(48,29,15,.25);
}
.mk.on{background:var(--green)}
@keyframes shove{
  0%,100%{transform:rotate(-.12deg) translateX(0)}
  20%{transform:rotate(-.12deg) translateX(-6px)}
  60%{transform:rotate(-.12deg) translateX(4px)}
}

.ask{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.tries{display:flex;gap:7px;justify-content:center;grid-column:1/-1;height:12px}
.tries span{
  width:10px;height:10px;border-radius:50%;background:var(--red);border:1px solid #641b15;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.2),0 1px 1px rgba(64,36,17,.25);
}
.tries span.spent{background:#6f6555;border-color:#554b3e;box-shadow:inset 1px 1px 3px rgba(31,24,17,.55)}
.field{grid-column:1/-1;gap:10px}
#q{
  background:rgba(255,252,238,.54);border:1px solid rgba(70,48,25,.43);border-radius:2px;
  padding:12px 14px;box-shadow:inset 1px 2px 4px rgba(69,46,23,.2),0 1px 0 rgba(255,255,255,.55);
}
#q:focus{
  background:rgba(255,253,242,.8);border-color:#624327;
  box-shadow:inset 1px 2px 4px rgba(69,46,23,.17),0 0 0 2px rgba(153,41,31,.14);
}
button{
  padding:11px 18px;color:#f8e8c5;border:1px solid #28160b;border-radius:3px;
  background:linear-gradient(#4a3020,#20150f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 #160d08,0 5px 7px rgba(48,28,13,.26);
  transition:transform .12s,filter .15s,box-shadow .12s;
}
button:hover{background:linear-gradient(#5b3b27,#291a12);filter:brightness(1.12)}
button:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #160d08}
button.ghost{
  color:var(--ink);background:linear-gradient(#f0e2c3,#d6c49f);border-color:#8c7855;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #a28f6c,0 5px 7px rgba(48,28,13,.18);
}
button.ghost:hover{color:var(--ink);background:linear-gradient(#f7ead0,#decca8)}
.sug{
  left:0;right:94px;top:100%;margin-top:5px;background:var(--paper-light);border:1px solid #7f6947;
  box-shadow:0 15px 24px -8px rgba(35,19,7,.58),inset 0 0 12px rgba(103,76,36,.1);
}
.sug div.pick,.sug div:hover{background:var(--ink);color:var(--paper-light)}
.sug span{font-size:11px;letter-spacing:0;color:var(--ink-faint)}
.sug div.pick span,.sug div:hover span{color:var(--paper-shadow)}

.verdict{margin-top:28px;text-align:center;padding:10px 0 4px}
.stamp{
  padding:10px 22px 8px;font-size:clamp(18px,4.6vw,27px);border-width:4px;
  box-shadow:inset 0 0 0 1px var(--red);
}
.stamp.cold{color:#3f4d54;border-color:#3f4d54;box-shadow:inset 0 0 0 1px #3f4d54}
.subject{font-size:clamp(29px,6.4vw,46px);margin-top:20px}
.after{justify-content:center;gap:12px;margin-top:24px}

.foot{max-width:780px;margin:22px auto 0;justify-content:center;gap:9px}
.chip{
  min-width:92px;padding:10px 13px;color:#ead7af;background:linear-gradient(#674224,#3e2818);
  border:1px solid #2c180d;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,229,182,.16),0 3px 0 #27150b,0 5px 8px rgba(28,12,4,.25);
}
.chip:hover{color:#ead7af;background:linear-gradient(#76502d,#4a301d);filter:brightness(1.08)}
.chip.on{
  color:#3e2a17;background:linear-gradient(var(--brass-light),var(--brass));border-color:var(--brass-dark);
  text-shadow:0 1px rgba(255,255,255,.35);
}
.toast{color:var(--paper-light);border:1px solid #0d0906}

.help-shade{
  position:fixed;z-index:40;inset:0;padding:24px;display:grid;place-items:center;
  background:rgba(30,15,6,.62);backdrop-filter:blur(3px);
}
.help-shade[hidden]{display:none}
@keyframes dropNote{
  0%{opacity:0;transform:translateY(-26px) rotate(-4deg) scale(.96)}
  72%{opacity:1;transform:translateY(3px) rotate(1.4deg) scale(1)}
  100%{transform:rotate(.6deg)}
}
.help-sheet{
  position:relative;width:min(470px,100%);padding:46px 46px 38px;transform:rotate(.6deg);
  color:var(--ink);background:
    linear-gradient(90deg,transparent 0 42px,rgba(153,41,31,.15) 42px 43px,transparent 43px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(61,78,83,.1) 31px 32px),
    radial-gradient(circle at 20% 0,rgba(255,255,255,.58),transparent 38%),var(--paper);
  border:1px solid rgba(67,44,20,.35);
  box-shadow:0 32px 48px -18px rgba(20,8,2,.78),0 5px 9px rgba(30,14,5,.35),inset 0 0 24px rgba(96,70,34,.09);
  animation:dropNote .45s cubic-bezier(.2,.8,.25,1) both;
}
.help-sheet h2{
  font-family:var(--cp);font-size:27px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:3px solid rgba(33,27,20,.8);
}
.help-sheet ol{list-style:none;counter-reset:steps;margin-top:20px}
.help-sheet li{counter-increment:steps;position:relative;padding:8px 0 8px 36px;font-size:15px;line-height:1.55}
.help-sheet li::before{
  content:counter(steps);position:absolute;left:0;top:10px;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid rgba(82,57,29,.42);border-radius:50%;font-size:10px;color:var(--red);
}
.help-sheet li b{display:block;font-weight:400;color:var(--ink)}
.help-pool{
  width:max-content;margin:23px auto 8px;padding:9px 18px 8px;display:flex;align-items:baseline;gap:9px;
  border:1px solid rgba(84,59,31,.42);background:rgba(255,250,230,.35);
  box-shadow:inset 1px 2px 4px rgba(75,51,25,.16),0 1px 0 rgba(255,255,255,.62);
}
.help-pool strong{font-family:var(--tw);font-size:27px;font-weight:400}
.help-pool span{font-family:var(--cp);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.help-sheet>p{text-align:center;font-size:13px;color:var(--ink-soft)}
.help-close{
  position:absolute;right:16px;top:14px;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);font-family:var(--tw);font-size:25px;line-height:1;
  background:transparent;box-shadow:none;text-shadow:none;
}
.help-close:hover{color:var(--red);background:rgba(153,41,31,.07);filter:none}
.help-close:active{transform:none;box-shadow:none}
.help-pin{
  position:absolute;left:20px;top:17px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 38% 33%,#f1d379 0 12%,var(--brass) 38%,var(--brass-dark) 75%);
  box-shadow:0 2px 3px rgba(47,29,10,.38),inset 0 1px 1px rgba(255,247,191,.65);
}

@media(max-width:560px){
  body{padding:26px 10px 55px}
  .top{margin-bottom:25px}.mark{font-size:14px;padding:9px 13px 8px}
  .folder{padding:12px 8px 10px}.tab{left:13px;min-width:190px}.clip{right:22px}.help-btn{right:71px;top:-15px}
  .sheet{padding:36px 17px 27px 29px;min-height:480px}
  .sheet::after{left:8px}.hd h1{letter-spacing:.06em}
  .pool{margin-top:15px}.ev li{grid-template-columns:27px minmax(0,1fr) minmax(68px,88px);gap:7px;min-height:58px}
  .txt{font-size:14px}.crossed-guesses{max-width:88px;gap:2px}.crossed-name{font-size:10px;white-space:normal}
  .field{gap:7px}#q{font-size:16px;padding:11px 10px}button{padding:11px 12px}
  .sug{right:76px}.reason{font-size:13px}
  .chip{min-width:74px;padding:9px 8px}
  .help-shade{padding:15px}.help-sheet{padding:42px 24px 30px 36px}.help-sheet h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  .folder,.ev li.fresh .txt,.ev li.fresh .left,.ev li.fresh .crossed-name::before,
  .ev li.fresh .crossed-name::after,.stamp,.shove,.pool.tick strong,.help-sheet{animation:none!important}
}