/* Drawzz: crumpled-paper look from the original MEO version. */
:root {
  --red: #d2232a;
  --red-dark: #a8161c;
  --ink: #2a2a2a;
  --grey: #8d8d8d;
  --grey-light: #c9c9c6;
  --paper: #efeeea;
  --card: #ffffff;
  --gold: #f4b400;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --sans: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(90deg, transparent 33.1%, rgba(0,0,0,.035) 33.3%, rgba(255,255,255,.6) 33.5%, transparent 34%),
    linear-gradient(90deg, transparent 66.1%, rgba(0,0,0,.03) 66.3%, rgba(255,255,255,.55) 66.5%, transparent 67%),
    linear-gradient(180deg, transparent 49.6%, rgba(0,0,0,.035) 49.8%, rgba(255,255,255,.6) 50%, transparent 50.5%),
    radial-gradient(ellipse at 50% 40%, #f8f8f6 0%, #ecebe7 70%, #e3e2dd 100%);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; cursor: pointer; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .35em; line-height: 1; }
.logo-mark {
  display: grid; place-items: center;
  width: 1.55em; height: 1.55em; border-radius: 30%;
  background: var(--red); color: #fff;
  box-shadow: inset 0 -.08em 0 rgba(0,0,0,.18);
}
.logo-mark svg { width: 62%; height: 62%; }
.logo-word { font-family: 'Kalam', var(--hand); font-weight: 700; font-size: 1.45em; letter-spacing: -.01em; position: relative; top: .06em; }
.logo-word small {
  position: absolute; top: -.35em; right: -.1em;
  font-family: var(--sans); font-weight: 700; font-size: .28em; color: var(--red); letter-spacing: .1em; text-transform: uppercase;
}
.logo-sm { font-size: 20px; } .logo-md { font-size: 30px; } .logo-lg { font-size: 54px; }

/* ---------- shared bits ---------- */
.avatar { display: inline-grid; place-items: center; border-radius: 10px; background: #f6f6f4; overflow: hidden; flex: none; }
.avatar svg { display: block; }

.paper-card {
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
  border-radius: 4px;
}

.hint { display: flex; justify-content: center; align-items: flex-end; gap: .28em; flex-wrap: wrap; font-family: var(--hand); }
.hint .slot { width: .9em; border-bottom: .09em solid var(--ink); text-align: center; height: 1.25em; line-height: 1.2em; text-transform: lowercase; }
.hint .slot.on { color: var(--red); }
.hint .gap { width: .6em; }
.hint .sym { width: .5em; text-align: center; }

.ribbon {
  display: inline-block; position: relative;
  padding: .12em .9em .12em .5em; color: #fff; font-weight: 700; font-size: .78em;
  background: var(--grey);
  clip-path: polygon(0 0, 100% 0, calc(100% - .45em) 50%, 100% 100%, 0 100%, .35em 50%);
}
.ribbon.red { background: var(--red); }
.ribbon.gold { background: var(--gold); color: #3a2a00; }

.mult { font-family: var(--sans); font-weight: 700; color: var(--red); }

.btn {
  border: 0; border-radius: 10px; padding: .85em 1.3em;
  background: var(--red); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  box-shadow: 0 3px 0 var(--red-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dark); }
.btn.grey { background: #9a9a9a; box-shadow: 0 3px 0 #757575; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 2px 0 #d6d6d2, 0 0 0 1px #dcdcd8 inset; }
.btn svg { width: 1.1em; height: 1.1em; }
.btn:disabled { opacity: .5; }

/* feed */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3em; }
.feed li { font-size: .9em; color: #555; animation: feedIn .35s ease-out; display: flex; align-items: center; gap: .35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed li b { color: var(--ink); font-weight: 700; }
.feed li svg { width: 1em; height: 1em; flex: none; }
.feed .f-got { color: var(--red); font-weight: 600; }
.feed .f-got em { font-style: normal; background: var(--gold); color: #3a2a00; border-radius: 4px; padding: 0 .3em; font-size: .8em; font-weight: 800; }
.feed .f-miss { font-family: var(--hand); font-size: 1.05em; }
.feed .f-join, .feed .f-artist { color: var(--grey); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); } }

/* coins */
.coin {
  position: fixed; z-index: 99; pointer-events: none; color: var(--gold);
  font-size: 22px; text-shadow: 0 1px 0 #b07b00;
  animation: coinFly 1.2s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes coinFly {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 80px)) scale(1.1) rotate(200deg); opacity: 0; }
}

@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(244,180,0,.35); } }