/* Gross-out cartoon: thick wobbly ink outlines that boil, loud flat colours, squash and stretch. */
:root {
  --green: #9BC53D; --bile: #F2D43D; --pink: #FF5DA2; --purple: #6B3FA0; --cream: #FFF4D6; --ink: #1A1A1A;
  --tile: min(14vw, 7.2vh, 64px);
  --display: "Luckiest Guy", "Arial Black", Impact, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cream); color: var(--ink);
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
body { touch-action: manipulation;
  background-image: radial-gradient(circle at 20% 30%, #f6e6bd 0 3px, transparent 4px), radial-gradient(circle at 70% 80%, #f6e6bd 0 2px, transparent 3px);
  background-size: 46px 46px, 31px 31px; }
button { font: inherit; color: inherit; cursor: pointer; }

/* line boil: the outlines step between three wobbles, 8 times a second */
@keyframes boil {
  0% { border-radius: 14px 10px 13px 9px / 10px 14px 9px 13px; }
  33% { border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; }
  66% { border-radius: 12px 9px 14px 11px / 9px 12px 11px 14px; }
}
.boil, .tile, .key, .btn, .big-btn, .icon, .card, .chips button, .vote button, .door {
  border: 3px solid var(--ink); animation: boil 0.375s steps(1) infinite; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: env(safe-area-inset-top) 8px calc(6px + env(safe-area-inset-bottom)); }
header { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; }
header .logo { flex: 1; text-align: center; margin: 0; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; padding: 0; box-shadow: 2px 3px 0 var(--ink); }
.icon svg { width: 24px; height: 24px; fill: currentColor; }
.icon:active { transform: translate(2px, 3px); box-shadow: none; }
body.muted #b-mute { background: var(--bile); }
body:not(.muted) #mute-x { display: none; }

.logo { font: 34px/1 var(--display); letter-spacing: 1px; color: var(--green);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.logo span { display: inline-block; animation: wob 0.75s steps(1) infinite; }
.logo span:nth-child(2n) { animation-delay: -0.375s; color: var(--bile); }
.logo span:nth-child(3) { color: var(--pink); }
.logo.big { font-size: 56px; margin: 4px 0 2px; }
@keyframes wob { 0% { transform: rotate(-4deg) translateY(1px); } 50% { transform: rotate(3deg) translateY(-1px); } }

#status { width: 100%; max-width: 520px; display: flex; gap: 10px; justify-content: center; align-items: center;
  font-weight: 700; font-size: 14px; min-height: 28px; flex-wrap: wrap; }
#status span b { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 0.5px; }
#b-undo, #b-res { border: 0; background: none; text-decoration: underline; font-weight: 700; padding: 6px 4px; min-height: 32px; }

#ladder { flex: 1; width: 100%; max-width: 520px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 8px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#ladder::-webkit-scrollbar { display: none; }
#ladder > :first-child { margin-top: auto; }
.row { display: flex; gap: 6px; position: relative; cursor: pointer; }
.row .tag { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 12px;
  white-space: nowrap; color: #6b5f45; }
.row .num { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); font: 15px var(--display); color: #a89770; }
.tile { width: var(--tile); height: var(--tile); display: grid; place-items: center; background: #fff;
  font: calc(var(--tile) * 0.6)/1 var(--display); padding-top: calc(var(--tile) * 0.08); text-transform: uppercase;
  box-shadow: 2px 3px 0 var(--ink); transition: background 0.15s; }
.row.start .tile { background: var(--bile); }
.row .tile.changed { background: var(--pink); color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.row.goal .tile { background: transparent; border-style: dashed; color: #b8a77c; box-shadow: none; }
.row.done .tile { background: var(--green); }
.row.input .tile { background: #fffdf5; }
.row.input .tile.ghost { color: #d9ccaa; }
.row.input .tile.cursor { box-shadow: 0 0 0 3px var(--purple), 2px 3px 0 var(--ink); }
.row.shake { animation: shake 0.35s; }
@keyframes shake { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
/* the toot: squash, stretch, settle */
.tile.toot { animation: toot 0.42s cubic-bezier(.3,1.6,.5,1), boil 0.375s steps(1) infinite; }
@keyframes toot { 0% { transform: scale(1); } 25% { transform: scale(1.28, 0.78) translateY(4px); } 55% { transform: scale(0.88, 1.18) translateY(-6px); } 100% { transform: scale(1); } }
.row.toot .tile:not(.changed) { animation: toot-small 0.35s ease-out, boil 0.375s steps(1) infinite; }
@keyframes toot-small { 30% { transform: scale(1.08, 0.92); } }

#toast { position: fixed; left: 50%; top: 96px; transform: translateX(-50%) scale(0.6); opacity: 0; pointer-events: none; z-index: 5;
  background: var(--ink); color: #fff; font-weight: 800; padding: 8px 14px; border-radius: 12px; transition: 0.15s; white-space: nowrap; }
#toast.on { opacity: 1; transform: translateX(-50%) scale(1); }

#keyboard { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; user-select: none; }
#keyboard .krow { display: flex; gap: 5px; justify-content: center; }
.key { flex: 1; max-width: 46px; height: 54px; background: #fff; font: 21px/1 var(--display); padding: 3px 0 0; text-transform: uppercase;
  box-shadow: 1px 3px 0 var(--ink); touch-action: manipulation; }
.key.wide { max-width: 72px; flex: 1.6; font-size: 14px; }
.key.enter { background: var(--green); }
.key:active, .key.down { transform: translateY(3px); box-shadow: none; background: var(--bile); }
@media (pointer: fine) { .key:hover { background: #fff6cf; } .key.enter:hover { background: #b4dc5a; } }
body.done #keyboard { visibility: hidden; }

#clouds { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* sheets: intro, result, voices */
.sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  background: rgba(255, 244, 214, 0.86); padding: max(10px, env(safe-area-inset-top)) 10px 16px; }
.sheet[hidden] { display: none; }
#result .card { margin-top: 0; }
.card { position: relative; width: 100%; max-width: 440px; margin: auto 0; background: #fff; padding: 14px 16px 16px; text-align: center;
  box-shadow: 4px 6px 0 var(--ink); }
.card h2 { margin: 4px 0; }
.lede { font-size: 18px; margin: 4px 0 8px; }
.rules { text-align: left; padding-left: 20px; margin: 8px 0; }
.rules li { margin: 4px 0; }
.small { font-size: 13px; color: #5c5240; margin: 6px 0; }
.credit a { color: var(--purple); }
.big-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; min-height: 52px; padding: 8px 22px; margin: 4px 0;
  background: var(--green); font: 22px/1 var(--display); padding-top: 11px; box-shadow: 3px 4px 0 var(--ink); }
.big-btn svg { width: 22px; height: 22px; fill: currentColor; margin-top: -4px; }
.big-btn:active, .btn:active { transform: translate(3px, 4px); box-shadow: none; }
.btn { min-height: 46px; padding: 6px 14px; background: var(--bile); font-weight: 800; box-shadow: 2px 3px 0 var(--ink); }
.close { position: absolute; right: 6px; top: 4px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; line-height: 1; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 0; margin: 6px 0; }
.demo .row { --tile: 40px; cursor: default; }
.demo .tile { font-size: 24px; }

.verdict { font: 40px/1 var(--display); color: var(--pink); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink); margin: 6px 0 2px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; justify-content: safe center; }
.chips button { flex: none; min-height: 40px; padding: 4px 10px; background: #fff; font-weight: 700; font-size: 13px; }
.chips button.on { background: var(--purple); color: #fff; }
.chips button.locked { opacity: 0.45; border-style: dashed; animation: none; }
.unlock { background: var(--bile); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 8px; font-weight: 800; font-size: 14px; margin: 4px 0; }
.grid { display: inline-flex; flex-direction: column; gap: 2px; margin: 0; }
.grid div { display: flex; gap: 2px; }
.grid i { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; }
.grid i.on { background: var(--green); }
.share-box { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 4px 0; }
.share-btns { display: flex; flex-direction: column; gap: 8px; }
.grid i { width: 11px; height: 11px; }
.vote { border-top: 2px dashed #d9ccaa; margin-top: 8px; padding-top: 6px; }
.vote p { margin: 2px 0 4px; font-weight: 700; font-size: 14px; }
.vote .opts { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.vote button { flex: none; min-height: 44px; padding: 4px 10px; background: #fff; font-size: 13px; font-weight: 700; }
.door { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: 6px 0 8px; background: #f3ecff; font-size: 13px;
  font-weight: 700; text-align: left; padding: 6px 10px; }
.door svg { width: 20px; height: 20px; flex: none; fill: var(--purple); }
.backlink { color: var(--purple); font-size: 13px; }
.voice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.voice-list button { min-height: 64px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px; text-align: left;
  box-shadow: 2px 3px 0 var(--ink); }
.voice-list button b { display: block; font: 17px/1.1 var(--display); padding-top: 2px; }
.voice-list button span { font-size: 12px; color: #5c5240; }
.voice-list button.on { background: var(--green); }
.voice-list button.locked { background: #eee6d2; border-style: dashed; box-shadow: none; }

@media (min-width: 900px) and (min-height: 640px) {
  :root { --tile: 62px; }
  #status { font-size: 16px; }
  .key { height: 50px; max-width: 50px; }
}
@media (max-height: 640px) { .key { height: 46px; } .logo { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .boil, .tile, .key, .btn, .big-btn, .icon, .card, .logo span { animation: none !important; } }