/* BlokBrein — chunky, blocky, bright. Buttons have a "3D brick" bottom edge. */
:root {
  color-scheme: light;
  --ink: #1b1b1b; --soft: #636e72; --paper: #ffffff; --panel: #f5f7fa;
  --blue: #1e90ff; --blue-d: #0b62c4; --green: #2ecc40; --green-d: #1e8f2b; --red: #ff4136; --red-d: #b8281f;
  --purple: #8e44ad; --purple-d: #5e2a75; --orange: #ff851b; --orange-d: #c0600c; --gold: #ffcc00; --gold-d: #c79a00;
  --radius: 14px; --edge: 6px;
  --head: "Lilita One", "Arial Black", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body); font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, #5ec8ff 0%, #a7e3ff 55%, #c8f0ff 100%) fixed;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none;
}
body::after { /* blocky grass strip */
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 26px; z-index: -1;
  background: repeating-linear-gradient(90deg, #4caf50 0 26px, #43a047 26px 52px); border-top: 5px solid #2e7d32;
}
input, select { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 3px solid #b2bec3; background: #fff; -webkit-user-select: text; user-select: text; }
h1, h2, h3, .logo { font-family: var(--head); font-weight: 400; letter-spacing: .5px; margin: .2em 0; }
h1 { font-size: clamp(24px, 4vw, 34px); } h2 { font-size: 24px; } h3 { font-size: 20px; margin-top: 1em; }
small { font-weight: 700; color: var(--soft); }
#app { min-height: 100%; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- buttons ---------- */
.btn {
  --c: #dfe6e9; --cd: #a4b0be; --t: var(--ink);
  font-family: var(--head); font-size: 18px; color: var(--t); background: var(--c);
  border: 3px solid var(--ink); border-radius: var(--radius); padding: 10px 18px; cursor: pointer;
  box-shadow: 0 var(--edge) 0 var(--cd), 0 calc(var(--edge) + 2px) 0 var(--ink); transform: translateY(0);
  transition: transform .06s, box-shadow .06s; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1;
}
.btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--cd), 0 2px 0 var(--ink); }
.btn small { font-family: var(--body); font-size: 12px; color: inherit; opacity: .85; }
.btn.big { font-size: 22px; padding: 14px 24px; min-height: 64px; width: 100%; }
.btn.small { font-size: 16px; padding: 6px 12px; --edge: 4px; }
.btn.green { --c: var(--green); --cd: var(--green-d); --t: #fff; }
.btn.blue { --c: var(--blue); --cd: var(--blue-d); --t: #fff; }
.btn.red { --c: var(--red); --cd: var(--red-d); --t: #fff; }
.btn.purple { --c: var(--purple); --cd: var(--purple-d); --t: #fff; }
.btn.orange { --c: var(--orange); --cd: var(--orange-d); --t: #fff; }
.btn.disabled { filter: grayscale(1); opacity: .55; }
.btn.toggle { min-width: 84px; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: 80vh; }
.screen { padding: 12px 16px; max-width: 1100px; margin: 0 auto; }

.logo { font-size: clamp(44px, 9vw, 72px); color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 6px 0 var(--ink); transform: rotate(-3deg); }
.logo span { color: var(--gold); }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: rgba(27, 27, 27, .82); backdrop-filter: blur(6px); color: #fff;
}
.hud-avatar { width: 52px; height: 52px; border-radius: 12px; border: 3px solid #fff; background: #74b9ff; padding: 0; overflow: hidden; cursor: pointer; }
.hud-avatar .avatar { width: 100%; height: 100%; transform: scale(1.9) translateY(18%); }
.hud-level { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.lvl-badge { font-family: var(--head); font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--gold); color: var(--ink); border: 3px solid #fff; border-radius: 10px; transform: rotate(-6deg); }
.xpbar { position: relative; flex: 1; height: 22px; background: #2d3436; border: 3px solid #fff; border-radius: 8px; overflow: hidden; max-width: 320px; }
.xpbar div { height: 100%; background: linear-gradient(90deg, #2ecc40, #7bed9f); transition: width .5s; }
.xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; }
.hud-stat { font-family: var(--head); font-size: 20px; background: rgba(255,255,255,.12); border-radius: 10px; padding: 6px 10px; display: flex; align-items: center; gap: 4px; }
.hud-stat.streak:not(.lit) { opacity: .5; }
.hud-stat.hearts { position: relative; }
.regen { position: absolute; bottom: -12px; right: 4px; font-size: 10px; color: #ffeaa7; background: #000a; padding: 0 4px; border-radius: 4px; }
.heart { color: #ff4757; font-size: 20px; text-shadow: 0 2px 0 #000; }
.heart.empty { color: #57606f; }

/* ---------- bottom nav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #1b1b1b; border-top: 4px solid #000; }
.nav-btn { flex: 1; max-width: 140px; background: none; border: 0; color: #dfe6e9; font-family: var(--head); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; cursor: pointer; }
.nav-btn span { font-size: 26px; }
.nav-btn.on { background: var(--blue); color: #fff; }

/* ---------- home ---------- */
.greet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; }
.greet h1 { color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); }
.daily { display: flex; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); padding: 10px 16px; box-shadow: 0 5px 0 var(--ink); font-size: 15px; }
.daily.done { background: #eafff0; }
.ring { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--p) * 360deg), #dfe6e9 0); display: grid; place-items: center; }
.ring span { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.world-card {
  font: inherit; text-align: left; cursor: pointer; padding: 16px; min-height: 180px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--wc), color-mix(in srgb, var(--wc) 55%, #000)); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink);
  transition: transform .08s;
}
.world-card:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.world-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #fff1 0 20px, transparent 20px 40px); }
.world-card.locked { filter: grayscale(.85) brightness(.8); }
.wc-icon { font-size: 54px; position: relative; }
.wc-name { font-family: var(--head); font-size: 26px; text-shadow: 0 3px 0 #0006; position: relative; }
.wc-grade { font-size: 14px; opacity: .9; position: relative; }
.wc-prog { height: 12px; background: #0005; border-radius: 6px; margin-top: 10px; overflow: hidden; position: relative; }
.wc-prog div { height: 100%; background: var(--gold); }
.wc-count { font-size: 14px; margin-top: 6px; position: relative; }

/* ---------- world ---------- */
.world-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
.world-head h1 { color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); }
.grade-chip { background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.skill-tile {
  font: inherit; cursor: pointer; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 14px 10px; min-height: 150px;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--wc) 70%, #000); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.skill-tile:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.skill-tile.locked { background: #dfe6e9; color: #8395a7; }
.skill-tile.beaten { background: #fff8d6; }
.skill-tile.world-boss { background: linear-gradient(160deg, #2d3436, #000); color: #fff; }
.st-icon { font-size: 40px; }
.st-name { font-size: 16px; line-height: 1.15; }
.st-stars { font-size: 22px; color: #dfe6e9; -webkit-text-stroke: 1px #636e72; }
.st-stars .on { color: var(--gold); -webkit-text-stroke: 1px #c79a00; }
.st-stars.big { font-size: 36px; }
.crown { -webkit-text-stroke: 0; }
.st-prog { width: 80%; height: 8px; background: #dfe6e9; border-radius: 4px; overflow: hidden; }
.st-prog div { height: 100%; background: var(--green); }
.st-prog.wide { width: 100%; height: 22px; position: relative; border: 3px solid var(--ink); border-radius: 8px; }
.st-prog.wide span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; }

/* ---------- modal / sheet ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; background: #000a; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 10px 0 var(--ink); padding: 22px; width: min(460px, 100%); max-height: 90vh; overflow: auto; animation: popin .2s cubic-bezier(.3,1.6,.6,1); }
.sheet { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sheet-icon { font-size: 64px; }
.sheet-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 6px 0; }
.toast { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 17px; max-width: 90vw; text-align: center; animation: popin .2s; transition: opacity .3s; }
.toast.out { opacity: 0; }

/* ---------- play ---------- */
.play { max-width: 900px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top)) 14px 20px; }
.play-top { display: flex; align-items: center; gap: 10px; }
.play-title { flex: 1; font-family: var(--head); font-size: 20px; color: #fff; -webkit-text-stroke: 1px var(--ink); text-shadow: 0 3px 0 var(--ink); }
.play-prog { position: relative; height: 26px; margin: 10px 0; background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; }
.play-prog div { height: 100%; background: linear-gradient(90deg, var(--wc), color-mix(in srgb, var(--wc) 60%, #fff)); transition: width .4s; }
.play-prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.mode-boss .play-prog div, .mode-wboss .play-prog div { background: linear-gradient(90deg, #ff4136, #ff851b); }
.card { background: #fff; border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 var(--ink); padding: 18px; }
.q-card { display: flex; flex-direction: column; gap: 14px; }
.q-card.good { animation: good .4s; }
.q-card.hint, .q-card.reveal { animation: shake .35s; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.tag { background: #ffeaa7; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.question { font-size: clamp(21px, 3.2vw, 28px); line-height: 1.3; font-weight: 900; }
.visual { display: flex; justify-content: center; }
.vis { max-width: 100%; height: auto; max-height: 260px; font-family: var(--body); }
.vis.clock { max-height: 220px; }
.vis-table { border-collapse: collapse; font-size: 20px; }
.vis-table th, .vis-table td { border: 3px solid var(--ink); padding: 8px 18px; text-align: center; }
.vis-table th { background: #ffeaa7; }
.answer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.display { min-width: 220px; min-height: 64px; font-family: var(--head); font-size: 38px; background: #f1f2f6; border: 4px solid var(--ink); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 18px; }
.display.empty #disp { color: #b2bec3; }
.unit { font-size: 22px; color: var(--soft); }
.numpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(440px, 100%); }
.numpad.small { width: min(300px, 100%); grid-template-columns: repeat(3, 1fr); }
.key { font-family: var(--head); font-size: 30px; height: 66px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 #a4b0be, 0 7px 0 var(--ink); cursor: pointer; color: var(--ink); }
.key:active { transform: translateY(5px); box-shadow: 0 0 0 #a4b0be, 0 2px 0 var(--ink); }
.key.ok { background: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-d), 0 7px 0 var(--ink); }
.key.del { background: #ffeaa7; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { font-family: var(--head); font-size: 26px; min-height: 84px; padding: 10px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--wc); cursor: pointer; color: var(--ink); }
.choice:nth-child(1) { background: #ffeded; } .choice:nth-child(2) { background: #e6f2ff; } .choice:nth-child(3) { background: #eafff0; } .choice:nth-child(4) { background: #fff8d6; }
.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--wc); }
.choice.wrong { opacity: .35; text-decoration: line-through; }
.build-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.build-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; width: min(520px, 100%); background: #8fd3ff; padding: 6px; border: 4px solid var(--ink); border-radius: 12px; }
.bcell { aspect-ratio: 1; border: 0; border-radius: 4px; background: #ffffff66; cursor: pointer; padding: 0; }
.bcell.on { background: #e0a96d; box-shadow: inset 0 -5px 0 #0003, inset 0 0 0 3px #0002; animation: place .15s; }
.build-info { font-family: var(--head); font-size: 24px; }
.fb { border-radius: 14px; padding: 14px 16px; border: 3px solid var(--ink); }
.fb p { margin: 6px 0; font-size: 19px; font-weight: 800; }
.fb.good { background: #eafff0; text-align: center; }
.fb-big { font-family: var(--head); font-size: 32px; color: var(--green-d); }
.xp-pop { font-family: var(--head); font-size: 22px; color: var(--purple); animation: rise 1s ease-out; }
.fb.hint { background: #fff8d6; }
.fb.bad { background: #ffeded; }
.fb.explain { background: #e6f2ff; }
.steps { font-size: 19px; padding-left: 26px; margin: 8px 0; line-height: 1.5; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.steps li { margin: 4px 0; white-space: pre-wrap; }
.answer-was { font-size: 20px; }
.why { font-size: 15px; color: var(--soft); }
.why summary { cursor: pointer; }
.race { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.timer { font-family: var(--head); font-size: 40px; color: #fff; -webkit-text-stroke: 2px var(--ink); }
.ghost-track { position: relative; width: 100%; height: 40px; background: repeating-linear-gradient(90deg, #ffffff88 0 20px, #ffffff44 20px 40px); border: 3px solid var(--ink); border-radius: 10px; }
.ghost, .me { position: absolute; top: 2px; transition: left .3s; transform: translateX(-10%); }
.ghost { font-size: 26px; opacity: .7; }
.me .avatar { width: 30px; height: 34px; }

/* ---------- respawn ---------- */
.respawn-avatar .avatar { width: 160px; height: 220px; animation: bob 1.4s ease-in-out infinite; }
.countdown { font-size: 22px; }
.respawn .sheet-btns { max-width: 420px; }
.welcome-avatar .avatar { width: 150px; height: 210px; animation: bob 1.4s ease-in-out infinite; }
.welcome p { font-size: 19px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 18px; margin: 10px 0; }
.welcome .btn.big { max-width: 360px; margin-top: 12px; }

/* ---------- shop ---------- */
.shop-stage { display: flex; justify-content: center; background: radial-gradient(circle, #fff 0%, #ffffff00 70%); }
.shop-stage .avatar { width: 150px; height: 220px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 12px; }
.tab { font-family: var(--head); font-size: 17px; padding: 8px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; white-space: nowrap; color: var(--ink); }
.tab.on { background: var(--blue); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.shop-item { font: inherit; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
.shop-item.on { background: #eafff0; border-color: var(--green-d); }
.shop-item.locked { opacity: .6; }
.si-preview .avatar.mini { width: 80px; height: 110px; }
.swatch { width: 70px; height: 70px; border-radius: 12px; border: 3px solid var(--ink); }
.big-emoji { font-size: 60px; }
.si-name { font-family: var(--head); }
.si-sub { font-size: 12px; color: var(--soft); }
.si-price { font-size: 14px; }

/* ---------- base ---------- */
.base-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.base-head h1 { color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); }
.inv { font-family: var(--head); font-size: 22px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 14px; }
.base-grid { width: min(100%, calc((100vh - 400px) * 20 / 12)); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 1px; background: linear-gradient(#9ee2ff, #e0f7ff); border: 4px solid var(--ink); border-radius: 12px; padding: 4px; touch-action: none; }
.cell { aspect-ratio: 1; border-radius: 3px; background: #ffffff33; }
.cell.filled { background: var(--bc); box-shadow: inset 0 -4px 0 #0003, inset 0 3px 0 #fff4; }
.base-info { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 10px 0; font-size: 17px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; }
.palette { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pal { width: 58px; height: 58px; border-radius: 12px; border: 4px solid var(--ink); background: var(--bc, #fff); cursor: pointer; box-shadow: inset 0 -6px 0 #0003; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.pal.on { outline: 5px solid #fff; transform: scale(1.12); }
.pal.locked { filter: grayscale(1) brightness(.7); }
.pal small { color: #fff; font-size: 11px; }

/* ---------- badges ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { background: #dfe6e9; border: 4px solid #8395a7; border-radius: 16px; padding: 12px; text-align: center; color: #636e72; }
.badge.got { background: #fff; border-color: var(--ink); color: var(--ink); box-shadow: 0 5px 0 var(--gold-d); }
.b-icon { font-size: 44px; }
.b-name { font-family: var(--head); font-size: 17px; }
.b-desc { font-size: 13px; }
.screen > h1 { color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); }

/* ---------- settings / parent ---------- */
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; margin: 10px 0; font-size: 18px; flex-wrap: wrap; }
.parent-btn { margin-top: 20px; max-width: 360px; }
.pin-dots { font-size: 34px; letter-spacing: 8px; min-height: 44px; }
.parent { background: #fff; border-radius: 20px; border: 4px solid var(--ink); margin-top: 12px; margin-bottom: 20px; }
.parent .world-head h1 { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.p-stats div { background: var(--panel); border-radius: 12px; padding: 10px; text-align: center; font-size: 14px; display: flex; flex-direction: column; }
.p-stats b { font-family: var(--head); font-size: 26px; font-weight: 400; }
.p-days { display: flex; gap: 4px; align-items: flex-end; height: 140px; border-bottom: 3px solid var(--ink); }
.p-day { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.p-bar { width: 80%; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.p-bar span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; }
.p-day small { font-size: 9px; }
.p-weak li { font-size: 17px; margin: 4px 0; }
.p-world { background: var(--panel); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.p-world summary { font-family: var(--head); font-size: 18px; cursor: pointer; }
.p-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.p-table td { padding: 5px 4px; border-top: 1px solid #dfe6e9; }
.p-table .btn { margin: 2px; }

/* ---------- memes ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
.meme-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle, #ffcc00cc 0%, #ff6b00cc 40%, #000d 100%); animation: fade .2s; }
.meme-overlay.kind-world { background: radial-gradient(circle, #a29bfe 0%, #341f97 50%, #000 100%); }
.meme-overlay.out { opacity: 0; transition: opacity .25s; }
.meme-card { width: min(520px, 100%); background: #fff; border: 5px solid var(--ink); border-radius: 24px; box-shadow: 0 12px 0 var(--ink); padding: 18px; text-align: center; animation: popin .35s cubic-bezier(.3,1.8,.6,1); display: flex; flex-direction: column; gap: 10px; }
.meme-title { font-family: var(--head); font-size: clamp(34px, 8vw, 52px); color: var(--gold); -webkit-text-stroke: 2.5px var(--ink); text-shadow: 0 5px 0 var(--ink); animation: wobble 1s ease-in-out infinite; }
.meme-frame { position: relative; background: #2d3436; border: 4px solid var(--ink); border-radius: 12px; height: 300px; overflow: hidden; }
.meme-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; }
.meme-stage .avatar { width: 130px; height: 190px; }
.meme-cap { position: absolute; left: 0; right: 0; font-family: Impact, "Arial Black", var(--head); font-size: clamp(22px, 5.5vw, 32px); color: #fff; -webkit-text-stroke: 2px #000; text-transform: uppercase; padding: 0 8px; line-height: 1.05; z-index: 2; }
.meme-cap:empty { display: none; }
.meme-cap.top { top: 8px; } .meme-cap.bottom { bottom: 8px; }
.meme-sub { font-size: 18px; }
.meme-rewards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.meme-rewards span { background: #ffeaa7; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 16px; }
.big-brain { position: absolute; top: 40px; font-size: 90px; animation: brain 0.8s ease-in-out infinite alternate; }
.galaxy { background: radial-gradient(circle at 50% 30%, #fff 0%, #a29bfe 15%, #341f97 50%, #000 100%); }
.galaxy-brain { position: absolute; top: 30px; font-size: 100px; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px #74b9ff); animation: brain .6s ease-in-out infinite alternate; }
.stonks { background: linear-gradient(#0a3d62, #1e3799); }
.stonks-chart { position: absolute; inset: 20px 10px 40px; width: calc(100% - 20px); height: 220px; }
.stonks .avatar { position: relative; z-index: 1; margin-right: 120px; }
.dance-floor { background: repeating-conic-gradient(from 0deg, #ff4f5e 0 30deg, #2e86de 30deg 60deg, #2ecc40 60deg 90deg); animation: disco 3s linear infinite; gap: 4px; }
.dance-floor .avatar { animation: dance .4s ease-in-out infinite alternate; width: 110px; height: 160px; }
.dance-floor .d2 { animation-delay: .2s; } .dance-floor .d3 { animation-direction: alternate-reverse; }
.evolve { background: radial-gradient(circle, #fff 0%, #74b9ff 60%, #0984e3 100%); }
.evolve .avatar { animation: evolve 1.2s steps(2) 3, bob 1s 3.6s ease-in-out infinite; }
.oofgg { background: #2d3436; }
.oof, .gg { position: absolute; font-family: Impact, var(--head); font-size: 64px; -webkit-text-stroke: 3px #000; }
.oof { color: #ff7675; top: 50px; left: 20px; animation: oof 1.6s forwards; }
.gg { color: #55efc4; top: 50px; right: 20px; opacity: 0; animation: gg .6s 1.2s forwards; }
.bounce-back { animation: fallbounce 1.6s cubic-bezier(.3,1.5,.6,1); }
.doge { background: linear-gradient(#ffeaa7, #fab1a0); }
.doge-dog { font-size: 140px; position: absolute; bottom: 10px; }
.doge-word { position: absolute; font-family: "Comic Sans MS", "Chalkboard SE", cursive; font-size: 28px; font-weight: 900; animation: pop 1.2s ease-in-out infinite alternate; }
.doge-word.w0 { top: 20px; left: 20px; color: #e84393; } .doge-word.w1 { top: 60px; right: 20px; color: #0984e3; animation-delay: .2s; }
.doge-word.w2 { top: 120px; left: 30px; color: #00b894; animation-delay: .4s; } .doge-word.w3 { top: 170px; right: 30px; color: #6c5ce7; animation-delay: .6s; } .doge-word.w4 { top: 230px; left: 40%; color: #d63031; animation-delay: .8s; }
.butterfly { background: linear-gradient(#81ecec, #74b9ff); }
.bfly { position: absolute; top: 60px; right: 60px; font-size: 70px; animation: flutter 1.5s ease-in-out infinite; }
.stamp { position: absolute; top: 46px; font-family: Impact, var(--head); font-size: 34px; color: #ff4136; border: 6px solid #ff4136; padding: 4px 14px; border-radius: 8px; transform: rotate(-14deg); background: #fff8; animation: stamp .5s .4s both cubic-bezier(.3,1.8,.6,1); }
.stamp.gold { color: #c79a00; border-color: #c79a00; }
.mini-meme { position: fixed; z-index: 85; top: 22%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: #fff; border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink); padding: 12px 22px; pointer-events: none; max-width: 92vw; }
.mini-meme.gold { background: #fff8d6; } .mini-meme.fire { background: linear-gradient(90deg, #ffeaa7, #ffb199); }
.mm-emoji { font-size: 54px; animation: brain .4s ease-in-out infinite alternate; }
.mm-text { font-family: Impact, "Arial Black", var(--head); font-size: clamp(26px, 6vw, 40px); text-transform: uppercase; -webkit-text-stroke: 1.5px #000; color: #fff; text-shadow: 0 4px 0 #000; }
.mini-meme.out { opacity: 0; transition: opacity .35s, transform .35s; transform: translateX(-50%) scale(.6); }
.anim-pop { animation: mmpop .35s cubic-bezier(.3,1.8,.6,1); }
.anim-spin { animation: mmspin .45s cubic-bezier(.3,1.5,.6,1); }
.anim-slide { animation: mmslide .35s ease-out; }
.anim-wobble { animation: mmpop .3s, wobble .6s .3s 2; }

@keyframes fade { from { opacity: 0; } }
@keyframes popin { from { transform: scale(.6); opacity: 0; } }
@keyframes good { 50% { transform: scale(1.03); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
@keyframes place { from { transform: scale(.4); } }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes brain { to { transform: scale(1.2); } }
@keyframes disco { to { filter: hue-rotate(360deg); } }
@keyframes dance { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(10deg) translateY(-14px); } }
@keyframes evolve { 0% { filter: brightness(1); } 50% { filter: brightness(10) saturate(0); } }
@keyframes oof { 0% { transform: scale(0); } 30% { transform: scale(1.3) rotate(-10deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
@keyframes gg { from { transform: scale(0) rotate(30deg); } to { opacity: 1; transform: scale(1.2) rotate(-8deg); } }
@keyframes fallbounce { 0% { transform: translateY(-300px) rotate(-30deg); } 40% { transform: translateY(40px) rotate(90deg); } 70% { transform: translateY(-30px) rotate(0); } 100% { transform: none; } }
@keyframes pop { to { transform: scale(1.25) rotate(-5deg); } }
@keyframes flutter { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(-30px, 20px) rotate(15deg); } }
@keyframes stamp { from { transform: scale(3) rotate(-14deg); opacity: 0; } }
@keyframes mmpop { from { transform: translateX(-50%) scale(0); } }
@keyframes mmspin { from { transform: translateX(-50%) rotate(-360deg) scale(0); } }
@keyframes mmslide { from { transform: translateX(-200%); } }

@media (max-width: 600px) {
  .hud { gap: 6px; } .hud-stat { font-size: 16px; padding: 4px 6px; } .heart { font-size: 15px; }
  .hud-level { order: 5; flex-basis: 100%; }
  .key { height: 58px; font-size: 26px; }
  .choice { font-size: 20px; min-height: 70px; }
  .meme-frame { height: 250px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }