:root {
  --bg: #dedcd8;
  --ink: #111;
  --green: #1db07a;
  --green-soft: #47b98c;
  --paper: #fbf8ef;
  --rasp: #c8374f;
  --blue: #6f9fd8;
  --apple: #a8f08a;
  --orange: #ff8c2e;
  --violet: #6b58a8;
  --type: 'Special Elite', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 17px/1.4 var(--type);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 40% 30% at 12% 20%, #c8374f33, transparent 70%),
    radial-gradient(ellipse 35% 40% at 90% 35%, #6f9fd840, transparent 70%),
    radial-gradient(ellipse 45% 30% at 70% 95%, #a8f08a55, transparent 70%),
    radial-gradient(ellipse 30% 35% at 5% 80%, #ff8c2e33, transparent 70%),
    #efe6d3;
}

/* ---------- collage decorations ---------- */
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.paint { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
.deco .card { position: absolute; margin: 0; filter: drop-shadow(5px 6px 0 #0000003a); }
.deco .card img { display: block; width: 100%; }
.torn img { clip-path: polygon(0 3%, 8% 0, 22% 2%, 37% 0, 55% 3%, 70% 0, 86% 2%, 100% 0, 98% 18%, 100% 38%, 97% 57%, 100% 76%, 98% 100%, 80% 97%, 62% 100%, 45% 97%, 27% 100%, 10% 97%, 0 100%, 2% 80%, 0 60%, 3% 40%, 0 20%); }
.cut { filter: drop-shadow(4px 5px 0 #00000030) saturate(1.15); }
.k1 { width: 250px; left: -30px; top: 3vh; rotate: -9deg; }
.k2 { width: 210px; left: 140px; top: 20vh; rotate: 7deg; }
.k3 { width: 230px; left: 10px; top: 40vh; rotate: 4deg; }
.k4 { width: 170px; left: 190px; top: 58vh; rotate: -11deg; }
.k5 { width: 280px; left: -50px; bottom: -3vh; rotate: 8deg; }
.k6 { width: 150px; left: 250px; bottom: 4vh; rotate: -4deg; }
.k7 { width: 240px; right: 10px; top: 2vh; rotate: 8deg; }
.k8 { width: 200px; right: 190px; top: 21vh; rotate: -7deg; }
.k9 { width: 260px; right: -40px; top: 38vh; rotate: -4deg; }
.k10 { width: 220px; right: 170px; top: 57vh; rotate: 10deg; }
.k11 { width: 200px; right: 20px; bottom: 2vh; rotate: -9deg; }
.k12 { width: 190px; right: 250px; bottom: -4vh; rotate: 5deg; }

/* ---------- header ---------- */
header { position: relative; z-index: 1; text-align: center; padding: 14px 16px 0; }
.sticker { display: inline-block; rotate: -4deg; }
.logo { width: 120px; box-shadow: 3px 4px 10px #0004; display: block; }
.brand { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 6px; }
h1 { margin: 0; font: 400 2.6rem/1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
h1 span { display: inline-block; background: var(--ink); color: var(--green); padding: 4px 12px 2px; clip-path: polygon(0 4%, 3% 0, 97% 3%, 100% 0, 99% 96%, 96% 100%, 4% 97%, 0 100%); }
h1 span + span { background: var(--green); color: var(--ink); rotate: 2deg; }
h1 span:first-child { rotate: -2deg; }
.label { display: inline-block; background: var(--ink); color: var(--green); padding: 6px 14px; margin: 6px 0 0; }
.small { font-size: .8rem; }
footer.label { position: relative; z-index: 1; display: block; width: fit-content; margin: 0 auto 30px; }

/* ---------- game panel ---------- */
.panel {
  position: relative; z-index: 1; width: min(740px, 100% - 32px); margin: 16px auto 24px; padding: 22px 26px 26px;
  background: var(--blue); box-shadow: 10px 10px 0 var(--ink), -14px 18px 0 var(--orange);
}
.viewer { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 7px 7px 0 var(--rasp); rotate: -.8deg; }
.viewer img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

#thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 10px; }
#thumbs button {
  width: 42px; height: 42px; padding: 0; border: 0; background: var(--ink); color: var(--green);
  font: 1.3rem Anton, sans-serif; cursor: pointer; box-shadow: 2px 3px 0 #0004;
}
#thumbs button:nth-child(odd) { rotate: -3deg; }
#thumbs button:nth-child(even) { rotate: 2deg; }
#thumbs button.active { outline: 3px solid var(--paper); outline-offset: 2px; }
#thumbs button.ko { background: var(--rasp); color: var(--paper); }
#thumbs button.ok { background: var(--green); color: var(--ink); }
#thumbs button.locked { opacity: .35; cursor: default; }
#thumbs button:disabled { cursor: default; }
#thumbs button.st-frame, #thumbs button.st-clip { width: auto; min-width: 52px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--orange); }
#thumbs button.st-frame { color: var(--green); }
#thumbs button.st-frame.ko, #thumbs button.st-frame.ok, #thumbs button.st-clip.ko, #thumbs button.st-clip.ok { color: var(--paper); }
#thumbs button.st-result { background: var(--apple); color: var(--ink); }
#thumbs button.st-word, #thumbs button.st-choices { font: 1.1rem var(--type); color: var(--paper); }
#thumbs button.playing { outline: 3px solid var(--orange); outline-offset: 2px; }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 30%; background: currentColor; }
#thumbs .playing .eq i { animation: eq .5s ease-in-out infinite alternate; }
#thumbs .eq, #thumbs .playing .note { display: none; }
#thumbs .playing .eq { display: inline-flex; }
.note { font: 1.1rem var(--type); }
.eq i:nth-child(2) { animation-delay: -.2s !important; }
.eq i:nth-child(3) { animation-delay: -.35s !important; }
.eq i:nth-child(4) { animation-delay: -.1s !important; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
#desc { position: absolute; inset: 0; margin: 0; padding: 22px 26px; overflow-y: auto; background: var(--paper); font-size: 1rem; line-height: 1.55; white-space: pre-line; }
#desc::before { content: '« '; color: var(--rasp); font-size: 1.3rem; }
#desc::after { content: ' »'; color: var(--rasp); font-size: 1.3rem; }
.redact { background: var(--ink); color: transparent; border-radius: 2px; user-select: none; }
#hints { text-align: center; margin: 8px 0 14px; display: grid; justify-items: center; gap: 6px; }
#hints:empty { display: none; }
#hints small { background: var(--ink); color: var(--green); padding: 2px 10px; }
.mask { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; background: var(--paper); padding: 12px 18px; box-shadow: 2px 3px 8px #0003; rotate: .6deg; }
.word { display: inline-flex; gap: 3px; align-items: flex-end; }
.word i { width: 13px; height: 20px; border-bottom: 2px solid var(--ink); }
.word b { font-weight: 400; }
.word.shown { color: var(--rasp); font-size: 1.2rem; }

form { display: flex; gap: 10px; }
.combo { position: relative; flex: 1; }
input, button { font: inherit; color: inherit; }
#guess {
  width: 100%; padding: 12px 14px; border: 0; background: var(--paper);
  background-image: linear-gradient(transparent calc(100% - 10px), #6f9fd855 calc(100% - 10px), #6f9fd855 calc(100% - 9px), transparent calc(100% - 9px));
  box-shadow: inset 0 0 0 1px #0002, 2px 3px 6px #0003;
}
#guess:focus { outline: 3px solid var(--green); }
#suggestions {
  position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 6px; padding: 0; list-style: none;
  background: var(--paper); box-shadow: 3px 5px 14px #0005; max-height: 300px; overflow-y: auto; z-index: 5;
  background-image: repeating-linear-gradient(transparent 0 37px, #6f9fd840 37px 38px);
}
#suggestions:empty { display: none; }
#suggestions li { padding: 8px 14px; cursor: pointer; line-height: 21px; }
#suggestions li:hover, #suggestions li.sel { background: var(--ink); color: var(--green); }
#suggestions li.tried { color: #999; text-decoration: line-through; cursor: default; }
#suggestions li.tried:hover { background: transparent; }

button { padding: 10px 16px; border: 0; background: var(--ink); color: var(--green); cursor: pointer; box-shadow: 2px 3px 0 #0004; }
button:hover:not(:disabled) { background: var(--green); color: var(--ink); }
button:active:not(:disabled) { translate: 1px 2px; box-shadow: 1px 1px 0 #0004; }
#skip { rotate: 2deg; }
#choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#choices button { padding: 14px; background: var(--paper); color: var(--ink); box-shadow: 2px 4px 8px #0004; }
#choices button:nth-child(1) { rotate: -1.2deg; }
#choices button:nth-child(2) { rotate: 1deg; }
#choices button:nth-child(3) { rotate: .8deg; }
#choices button:nth-child(4) { rotate: -.6deg; }
#choices button:hover:not(:disabled) { background: var(--ink); color: var(--green); }
#choices button:disabled { text-decoration: line-through; color: var(--rasp); opacity: .6; }

#history { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
#history:empty { display: none; }
#history li { padding: 6px 12px; background: var(--paper); box-shadow: 1px 2px 4px #0003; }
#history li:nth-child(odd) { rotate: -.4deg; }
#history li:nth-child(even) { rotate: .4deg; }
.pic { width: 15px; height: 15px; flex: none; }
#history li { display: flex; align-items: center; gap: 8px; }
.step-icon { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 42px; height: 24px; padding: 0 6px; background: var(--ink); color: var(--green); font: .95rem Anton, sans-serif; }
.step-icon .note { font-size: .95rem; }
#history li.ko { border-left: 6px solid var(--rasp); }
#history li.ok { border-left: 6px solid var(--green); }

#result { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; padding: 18px; background: var(--apple); }
#result p { margin: 6px 0; }
#result.lost { background: var(--rasp); color: var(--paper); }
#result.lost a { color: var(--paper); }
#choices .give-up { grid-column: 1 / -1; justify-self: center; background: var(--ink); color: var(--green); rotate: 1.5deg; padding: 10px 22px; }
#choices .give-up:hover { background: var(--green); color: var(--ink); }
#result h2 { margin: 0 0 10px; font: 400 2rem Anton, sans-serif; text-transform: uppercase; }
#result a { color: var(--rasp); }
#result .row { font-size: 1.4rem; letter-spacing: 2px; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.empty { text-align: center; background: var(--paper); padding: 20px; }
a.btn { display: inline-block; padding: 10px 16px; background: var(--ink); color: var(--green); text-decoration: none; box-shadow: 2px 3px 0 #0004; }
a.btn:hover { background: var(--green); color: var(--ink); }
#mode-link { padding: 6px 12px; background: var(--apple); color: var(--ink); rotate: -2deg; }
#result.lost a.btn { color: var(--green); }
#stats-btn { margin-left: 6px; padding: 6px 12px; background: var(--orange); color: var(--ink); rotate: 1.5deg; }
.tagline { margin: 6px 0 0; }
.tagline .label { margin: 0; }
#stats { width: min(440px, 100% - 32px); border: 0; padding: 24px 24px 20px; background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--ink); font: inherit; }
#stats::backdrop { background: #111a; }
#stats h2 { margin: 0 0 16px; font: 400 2rem Anton, sans-serif; text-transform: uppercase; }
#stats h3 { margin: 18px 0 8px; font: 400 1.1rem Anton, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
#stats .close { position: absolute; top: 12px; right: 12px; padding: 4px 10px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { background: var(--ink); color: var(--green); padding: 8px 4px; text-align: center; display: grid; }
.tile b { font: 400 1.8rem/1.1 Anton, sans-serif; }
.tile span { font-size: .75rem; }
.dist { display: grid; grid-template-columns: 1.4em 1fr; gap: 4px 8px; align-items: center; }
.dl { text-align: right; font-size: .9rem; }
.dbar { min-width: 26px; height: 22px; background: var(--blue); border-radius: 0 4px 4px 0; display: flex; justify-content: flex-end; align-items: center; }
.dbar.cur { background: var(--green); }
.dbar span { padding: 0 6px; font-size: .85rem; color: var(--ink); }
[hidden] { display: none !important; }

/* ---------- responsive ---------- */
@media (max-height: 760px) { .k4, .k10 { display: none; } }
@media (max-width: 1350px) {
  .deco .card { scale: .8; transform-origin: center; }
  .k2, .k8 { display: none; }
}
@media (max-width: 1100px) {
  .deco .card { scale: .6; }
  .k4, .k6, .k10, .k12 { display: none; }
}
@media (max-width: 560px) {
  .deco .card { scale: .4; }
  .k3, .k5, .k9, .k11 { display: none; }
  .k1 { left: -70px; top: -20px; }
  .k7 { right: -60px; top: -20px; }
  .panel { padding: 18px 14px 22px; box-shadow: 6px 6px 0 var(--ink); }
  h1 { font-size: 2rem; }
  .logo { width: 100px; }
  .brand { gap: 12px; }
  #choices { grid-template-columns: 1fr; }
  #thumbs { gap: 6px; }
  #thumbs button { width: 36px; height: 36px; font-size: 1.1rem; }
  #thumbs button.st-frame, #thumbs button.st-clip { min-width: 44px; }
  #desc { padding: 12px 14px; font-size: .85rem; }
  #result { padding: 10px; font-size: .9rem; }
  #result h2 { font-size: 1.5rem; }
  #result .row { font-size: 1.1rem; }
}
.word b.shown { color: var(--rasp); font-size: 1.2rem; }