*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #272337;
  --paper: #fff7e8;
  --cream: #fffdf7;
  --coral: #ff6f61;
  --coral-dark: #e64e48;
  --mint: #74cbb4;
  --yellow: #ffd25a;
  --purple: #8472dc;
  --blue: #63b5e7;
  --line: 3px solid var(--ink);
  --display: "Lilita One", cursive;
  --mono: "DM Mono", monospace;
}

html { background: var(--paper); }
body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 10%, #ffe4a9 0 7%, transparent 26%), linear-gradient(135deg,#fff9ed,#ffedcd); font-family: var(--mono); overflow-x: hidden; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
img { display: block; max-width: 100%; }
.ambient-shape { position: fixed; z-index: 0; border: 3px solid rgba(39,35,55,.08); border-radius: 50%; pointer-events: none; }
.shape-one { width: 420px; height: 420px; top: -190px; right: -90px; background: rgba(116,203,180,.23); }
.shape-two { width: 330px; height: 330px; bottom: -170px; left: -80px; background: rgba(255,111,97,.16); }

.app-shell { position: relative; z-index: 1; width: min(1500px, calc(100% - 34px)); margin: 0 auto; padding: 16px 0 28px; }
.topbar { height: 78px; margin-bottom: 12px; padding: 8px 13px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(255,253,247,.9); border: var(--line); border-radius: 22px; box-shadow: 0 8px 0 rgba(39,35,55,.12); backdrop-filter: blur(14px); }
.brand { justify-self: start; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand div { display: flex; flex-direction: column; }
.brand div > span { margin-bottom: -3px; font-size: 8px; font-weight: 500; letter-spacing: .18em; }
.brand strong { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: .01em; }
.brand strong span { color: var(--coral); }
.topbar-note { padding: 9px 14px; display: flex; align-items: center; gap: 9px; color: #665f76; background: #f5efdf; border: 2px solid #ddd1bd; border-radius: 99px; font-size: 9px; font-weight: 500; }
.topbar-note i { width: 8px; height: 8px; background: var(--mint); border: 1px solid var(--ink); border-radius: 50%; animation: pulse 1.6s ease infinite; }
.sound-toggle { width: 100%; margin-top: auto; padding: 8px 10px 8px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--cream); border: 2px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); font-size: 8px; font-weight: 500; cursor: pointer; transition: .2s ease; }
.sound-toggle span { width: 27px; height: 27px; display: grid; place-items: center; color: white; background: var(--purple); border-radius: 50%; font-family: var(--display); font-size: 17px; }
.sound-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.sound-toggle.off { color: #777080; background: #eee8dc; box-shadow: none; }
.sound-toggle.off span { background: #777080; }

.pet-game { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 12px; }
.status-panel { padding: 16px 13px; display: flex; flex-direction: column; gap: 18px; background: rgba(255,253,247,.86); border: var(--line); border-radius: 24px; box-shadow: 0 8px 0 rgba(39,35,55,.1); }
.status-item { display: grid; gap: 6px; }
.status-label { display: grid; grid-template-columns: 21px 1fr auto; align-items: center; gap: 5px; }
.status-label > span { width: 21px; height: 21px; display: grid; place-items: center; color: white; background: var(--coral); border-radius: 7px; font-size: 11px; }
.status-item[data-stat="hunger"] .status-label > span { background: var(--yellow); color: var(--ink); }
.status-item[data-stat="clean"] .status-label > span { background: var(--blue); }
.status-item[data-stat="energy"] .status-label > span { background: var(--purple); }
.status-label b { font-size: 8px; }
.status-label output { font-size: 8px; }
.meter { height: 9px; padding: 2px; overflow: hidden; background: #e9e1d3; border: 1px solid var(--ink); border-radius: 99px; }
.meter i { display: block; width: var(--value); height: 100%; background: var(--coral); border-radius: inherit; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.status-item[data-stat="hunger"] .meter i { background: var(--yellow); }
.status-item[data-stat="clean"] .meter i { background: var(--blue); }
.status-item[data-stat="energy"] .meter i { background: var(--purple); }

.game-console { min-width: 0; padding: 10px; background: var(--ink); border: var(--line); border-radius: 28px; box-shadow: 0 10px 0 rgba(39,35,55,.14); }
.console-topline { height: 50px; padding: 0 9px 8px; display: flex; align-items: center; justify-content: space-between; color: var(--paper); }
.room-title { display: flex; align-items: center; gap: 10px; }
.room-title > span { font-family: var(--display); font-size: 31px; color: var(--yellow); }
.room-title div { display: flex; flex-direction: column; }
.room-title small { color: #aaa4b5; font-size: 7px; letter-spacing: .15em; }
.room-title strong { font-family: var(--display); font-size: 16px; letter-spacing: .04em; }
.mood-chip { padding: 7px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #5d5869; border-radius: 99px; font-size: 8px; }
.mood-chip span { color: var(--mint); }

.room-stage { position: relative; aspect-ratio: 16 / 8.25; overflow: hidden; background: #c9b487; border: 3px solid var(--paper); border-radius: 18px; isolation: isolate; }
.room-scene { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .3s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility .3s; }
.room-scene.active { opacity: 1; visibility: visible; transform: scale(1); }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk-open { opacity: 0; }
.talking .talk-open { animation: mouthTalk .2s steps(1,end) infinite; }
.talking .talk-idle { animation: idleTalk .2s steps(1,end) infinite; }
.bedroom-off { opacity: 0; transition: opacity .65s ease; }
.bedroom-on { transition: opacity .65s ease; }
.sleeping .bedroom-off { opacity: 1; }
.sleeping .bedroom-on { opacity: 0; }
.eating .room-scene.active { animation: nom .3s ease 4; }

.speech-bubble { position: absolute; z-index: 9; top: 9%; left: 50%; padding: 11px 16px; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 rgba(39,35,55,.3); font-family: var(--display); font-size: clamp(15px,1.5vw,23px); opacity: 0; transform: translate(-50%,12px) rotate(-2deg) scale(.85); transition: .25s ease; pointer-events: none; }
.speech-bubble span { position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; background: var(--cream); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.speech-bubble.show { opacity: 1; transform: translate(-50%,0) rotate(-2deg) scale(1); }
.listening-rings { position: absolute; z-index: 3; left: 50%; top: 47%; width: 220px; height: 220px; transform: translate(-50%,-50%); pointer-events: none; }
.listening-rings i { position: absolute; inset: 0; border: 4px solid rgba(255,255,255,.75); border-radius: 50%; opacity: 0; }
.listening .listening-rings i { animation: ring 1.3s ease-out infinite; }
.listening .listening-rings i:nth-child(2) { animation-delay: .35s; }
.listening .listening-rings i:nth-child(3) { animation-delay: .7s; }
.floating-effects { position: absolute; inset: 0; z-index: 12; overflow: hidden; pointer-events: none; }
.floating-effects > span { position: absolute; font-size: clamp(26px,4vw,54px); filter: drop-shadow(0 3px 0 white); animation: floatEffect 1.4s ease-out forwards; }

.action-panel { position: absolute; z-index: 8; left: 18px; right: 18px; bottom: 16px; min-height: 84px; padding: 12px 15px; display: none; grid-template-columns: 1fr auto; align-items: center; gap: 18px; color: var(--ink); background: rgba(255,253,247,.92); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 7px 0 rgba(39,35,55,.45); backdrop-filter: blur(12px); }
.action-panel.active { display: grid; animation: panelIn .38s .52s both; }
.action-copy { display: flex; flex-direction: column; min-width: 0; }
.action-copy small { margin-bottom: 2px; color: var(--coral-dark); font-size: 7px; font-weight: 500; letter-spacing: .15em; }
.action-copy strong { font-family: var(--display); font-size: clamp(17px,2vw,25px); font-weight: 400; line-height: 1.05; }
.action-copy > span { margin-top: 3px; color: #6d6574; font-size: 8px; }
.mic-button { position: relative; width: 64px; height: 64px; flex: 0 0 auto; background: var(--coral); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.mic-button:hover { transform: translateY(-3px); }
.mic-button.recording { background: var(--yellow); animation: micPulse 1s ease infinite; }
.mic-button > i { position: absolute; inset: -9px; border: 2px solid var(--coral); border-radius: 50%; opacity: .45; }
.mic-icon { position: absolute; top: 13px; left: 22px; width: 15px; height: 26px; background: white; border: 2px solid var(--ink); border-radius: 12px; }
.mic-icon::before { content: ""; position: absolute; left: -7px; bottom: -8px; width: 25px; height: 19px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; }
.mic-icon::after { content: ""; position: absolute; left: 5px; bottom: -14px; width: 3px; height: 7px; background: var(--ink); box-shadow: -5px 6px 0 -1px var(--ink), 5px 6px 0 -1px var(--ink); }
.feed-panel { top: 18px; right: auto; bottom: auto; left: 18px; width: min(280px,calc(100% - 36px)); grid-template-columns: 1fr; }
.food-choices { display: flex; gap: 8px; }
.food-choices button { min-width: 70px; padding: 7px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--cream); border: 2px solid var(--ink); border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); font-size: 7px; font-weight: 500; cursor: pointer; transition: .18s ease; }
.food-choices button span { font-size: 25px; }
.food-choices button:hover { transform: translateY(-4px) rotate(-2deg); background: var(--yellow); }
.food-choices button:disabled { opacity: .55; cursor: default; }
.food-choices button.cooldown, .bathroom-action.cooldown { filter: grayscale(.55); opacity: .6; box-shadow: 2px 2px 0 var(--ink); cursor: not-allowed; }
.primary-action { min-width: 190px; padding: 15px 18px; color: white; background: var(--coral); border: 2px solid var(--ink); border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); font-family: var(--display); font-size: 15px; letter-spacing: .03em; cursor: pointer; transition: .18s ease; }
.primary-action:hover { transform: translateY(-3px); background: var(--coral-dark); }
.primary-action span { font-size: 18px; }
.lamp-action { background: var(--purple); }
.lamp-action:hover { background: #6d5bc8; }

.privacy-curtain { position: absolute; z-index: 18; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--paper); background: repeating-linear-gradient(90deg,#6eb9d9 0 65px,#84c8e4 65px 130px); transform: translateY(-105%); transition: transform .55s cubic-bezier(.7,0,.3,1); }
.privacy-curtain::after { content: ""; position: absolute; inset: 16px; border: 3px dashed rgba(255,255,255,.65); border-radius: 15px; }
.privacy-curtain span { font-family: var(--display); font-size: clamp(27px,5vw,70px); text-shadow: 4px 4px 0 var(--ink); }
.privacy-curtain i { font-size: clamp(34px,6vw,78px); font-style: normal; animation: wiggle .7s ease infinite; }
.privacy-curtain.show { transform: translateY(0); }
.room-wipe { position: absolute; z-index: 25; inset: -2px; display: flex; align-items: center; justify-content: center; gap: 22px; color: var(--ink); background: var(--yellow); transform: translateX(-105%) skewX(-8deg); pointer-events: none; }
.room-wipe::before, .room-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: var(--coral); border-inline: 3px solid var(--ink); }
.room-wipe::before { left: 12%; }.room-wipe::after { right: 12%; }
.room-wipe span, .room-wipe b { font-family: var(--display); font-size: clamp(45px,9vw,140px); font-weight: 400; }
.room-wipe i { font-size: clamp(44px,7vw,100px); font-style: normal; }
.switching .room-wipe { animation: roomWipe .9s cubic-bezier(.76,0,.24,1); }

.room-nav { margin-top: 9px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.room-button { position: relative; min-height: 70px; padding: 8px 10px; display: grid; grid-template-columns: 44px auto; grid-template-rows: 1fr 1fr; column-gap: 9px; align-items: center; color: #aaa4b5; background: #393447; border: 2px solid #5a5467; border-radius: 15px; cursor: pointer; transition: .22s ease; }
.room-button .room-icon { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; color: white; background: #5e586d; border-radius: 13px; font-family: var(--display); font-size: 22px; }
.room-button b { align-self: end; text-align: left; font-family: var(--display); font-size: 14px; font-weight: 400; letter-spacing: .04em; }
.room-button small { align-self: start; text-align: left; font-size: 7px; }
.room-button:hover { color: white; background: #474154; transform: translateY(-2px); }
.room-button.active { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.room-button.active .room-icon { color: var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--coral); }

.game-footnote { grid-column: 2; margin: 12px 5px 0; color: #746c78; font-size: 8px; }
.game-footnote span { margin-right: 7px; padding: 3px 6px; color: white; background: var(--coral); border-radius: 5px; font-weight: 500; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; max-width: calc(100% - 40px); padding: 12px 18px; color: white; background: var(--ink); border: 2px solid white; border-radius: 12px; box-shadow: 5px 5px 0 var(--coral); font-size: 10px; text-align: center; opacity: 0; transform: translate(-50%,30px); transition: .3s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.need-reminder { position: fixed; z-index: 90; width: clamp(360px,46vw,690px); aspect-ratio: 3 / 2; filter: drop-shadow(0 14px 0 rgba(39,35,55,.2)) drop-shadow(0 22px 34px rgba(39,35,55,.28)); isolation: isolate; }
.need-reminder[hidden] { display: none; }
.need-reminder::before { content: "INCOMING MEI-MO"; position: absolute; z-index: 4; top: 3%; left: 4%; padding: 6px 10px; color: white; background: var(--ink); border: 2px solid white; border-radius: 99px; box-shadow: 3px 3px 0 var(--coral); font-size: 8px; font-weight: 500; letter-spacing: .1em; }
.need-reminder img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reminder-copy { position: absolute; z-index: 3; top: 13%; left: 7%; width: 65%; display: flex; flex-direction: column; align-items: flex-start; }
.reminder-copy small { margin-bottom: 7px; color: var(--coral-dark); font-size: clamp(7px,.7vw,10px); font-weight: 500; letter-spacing: .17em; }
.reminder-copy strong { max-width: 100%; font-family: var(--display); font-size: clamp(22px,2.7vw,43px); font-weight: 400; line-height: .96; text-wrap: balance; }
.reminder-actions { margin-top: clamp(10px,1.4vw,20px); display: flex; flex-wrap: wrap; gap: 8px; }
.reminder-actions button { padding: 9px 12px; border: 2px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); font-size: 8px; font-weight: 500; cursor: pointer; transition: .18s ease; }
#reminder-go { color: white; background: var(--coral); }
.reminder-dismiss { display: flex; align-items: center; gap: 5px; background: var(--yellow); }
.reminder-dismiss span { font-size: 14px; }
.reminder-actions button:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); }
.reminder-poof { position: absolute; z-index: 8; top: 42%; left: 50%; color: var(--coral); font-family: var(--display); font-size: clamp(38px,8vw,110px); font-style: normal; text-shadow: 4px 4px 0 white, 7px 7px 0 var(--ink); opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-15deg); pointer-events: none; }
.need-reminder.side-right { right: 2vw; bottom: 2vh; animation: meiMemoRight .8s cubic-bezier(.16,1.2,.34,1) both; }
.need-reminder.side-left { left: 2vw; bottom: 3vh; animation: meiMemoLeft .8s cubic-bezier(.16,1.2,.34,1) both; }
.need-reminder.side-top { top: 86px; left: 50%; animation: meiMemoTop .8s cubic-bezier(.16,1.2,.34,1) both; }
.need-reminder.closing { pointer-events: none; animation: meiMemoWhack .62s cubic-bezier(.7,-.4,.8,.2) forwards; }
.need-reminder.closing .reminder-poof { animation: reminderPoof .5s ease-out both; }

@keyframes mouthTalk { 0%,49% { opacity: 0 } 50%,100% { opacity: 1 } }
@keyframes idleTalk { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.72); } }
@keyframes ring { 0% { opacity: .7; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes micPulse { 50% { transform: scale(.92); box-shadow: 7px 7px 0 var(--ink); } }
@keyframes nom { 50% { transform: translateY(9px) scale(1.015); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(25px); } }
@keyframes floatEffect { 0% { opacity: 0; transform: translate(0,20px) scale(.3) rotate(-15deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift),-140px) scale(1.15) rotate(15deg); } }
@keyframes wiggle { 50% { transform: rotate(15deg) scale(1.1); } }
@keyframes roomWipe { 0% { transform: translateX(-110%) skewX(-8deg); } 42%,58% { transform: translateX(0) skewX(0); } 100% { transform: translateX(110%) skewX(8deg); } }
@keyframes meiMemoRight { from { opacity: 0; transform: translateX(115%) rotate(8deg) scale(.8); } 70% { transform: translateX(-3%) rotate(-2deg) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes meiMemoLeft { from { opacity: 0; transform: translateX(-115%) rotate(-8deg) scale(.8); } 70% { transform: translateX(3%) rotate(2deg) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes meiMemoTop { from { opacity: 0; transform: translate(-50%,-120%) rotate(-4deg) scale(.8); } 70% { transform: translate(-50%,4%) rotate(1deg) scale(1.02); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes meiMemoWhack { 0% { opacity: 1; } 28% { transform: scale(1.06) rotate(-4deg); } 100% { opacity: 0; transform: translateY(-35px) scale(.12) rotate(22deg); filter: blur(8px); } }
@keyframes reminderPoof { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-15deg); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(7deg); } 100% { opacity: 0; transform: translate(-50%,-62%) scale(1.35) rotate(-4deg); } }

@media (max-width: 900px) {
  .app-shell { width: min(100% - 20px,760px); }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-note { display: none; }
  .pet-game { grid-template-columns: 1fr; }
  .status-panel { padding: 9px 11px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 10px; }
  .sound-toggle { grid-column: 1 / -1; justify-self: stretch; width: auto; margin-top: 0; }
  .status-label { grid-template-columns: 18px 1fr auto; }
  .status-label > span { width: 18px; height: 18px; font-size: 8px; }
  .status-label b { font-size: 6px; }
  .status-label output { display: none; }
  .meter { height: 8px; }
  .game-footnote { grid-column: 1; }
  .room-stage { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
  body { background: var(--paper); }
  .app-shell { width: 100%; padding: 0; }
  .topbar { height: 67px; margin: 0; border-width: 0 0 3px; border-radius: 0; box-shadow: none; }
  .brand img { width: 47px; height: 47px; }
  .brand strong { font-size: 20px; }
  .sound-toggle b { display: none; }
  .sound-toggle { width: 38px; height: 38px; grid-column: auto; grid-row: 1; justify-self: end; margin-left: auto; padding: 5px; border: 0; box-shadow: none; }
  .status-panel { padding: 7px 9px; grid-template-columns: repeat(4,1fr) 40px; border-width: 0 0 3px; border-radius: 0; box-shadow: none; gap: 5px; }
  .status-label { display: flex; justify-content: center; }
  .status-label > span { width: 22px; height: 22px; }
  .status-label b, .status-label output { display: none; }
  .game-console { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .console-topline { height: 48px; padding-inline: 13px; }
  .room-stage { aspect-ratio: 3 / 4.15; border-width: 3px 0; border-radius: 0; }
  .scene-image { object-fit: cover; }
  .room-scene[data-room="talk"] .scene-image, .room-scene[data-room="kitchen"] .scene-image, .room-scene[data-room="bathroom"] .scene-image { object-position: 50% center; }
  .action-panel { left: 10px; right: 10px; bottom: 10px; min-height: 116px; padding: 11px 12px; gap: 8px; }
  .action-copy > span { max-width: 190px; line-height: 1.4; }
  .mic-button { width: 60px; height: 60px; }
  .feed-panel { grid-template-columns: 1fr; }
  .feed-panel { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; }
  .feed-panel .action-copy { display: none; }
  .food-choices { width: 100%; justify-content: center; }
  .food-choices button { flex: 1; min-width: 0; }
  .primary-action { min-width: 145px; padding-inline: 11px; font-size: 12px; }
  .room-nav { margin: 0; padding: 7px; gap: 5px; background: var(--ink); }
  .room-button { min-height: 62px; padding: 6px 2px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-radius: 12px; }
  .room-button .room-icon { width: 33px; height: 33px; font-size: 17px; }
  .room-button b { font-size: 10px; }
  .room-button small { display: none; }
  .game-footnote { margin: 10px 13px 18px; line-height: 1.5; }
  .need-reminder { width: 96vw; }
  .need-reminder.side-left, .need-reminder.side-right { right: 2vw; left: 2vw; bottom: 8px; }
  .need-reminder.side-top { top: 72px; }
  .reminder-copy { top: 12%; left: 7%; width: 67%; }
  .reminder-copy strong { font-size: clamp(19px,6vw,28px); }
  .reminder-actions { margin-top: 8px; gap: 5px; }
  .reminder-actions button { padding: 7px 9px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── MEMECOIN SITE LAYER ─────────────────────────────────────────── */
.topbar { position: sticky; z-index: 80; top: 10px; }
.site-nav { padding: 4px; display: flex; align-items: center; gap: 4px; background: #f5efdf; border: 2px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 rgba(39,35,55,.16); }
.site-nav a { position: relative; padding: 4px 9px 4px 4px; display: flex; align-items: center; gap: 6px; color: var(--ink); border-radius: 99px; font-size: 7px; font-weight: 500; text-decoration: none; letter-spacing: .05em; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.site-nav a span { width: 25px; height: 25px; display: grid; place-items: center; color: white; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 12px; line-height: 1; transition: transform .22s cubic-bezier(.2,.9,.2,1.3); }
.site-nav a:nth-child(2) span { color: var(--ink); background: var(--yellow); }
.site-nav a:nth-child(3) span { background: var(--purple); }
.site-nav a:nth-child(4) span { background: var(--blue); }
.site-nav a:hover { z-index: 2; background: white; box-shadow: 2px 3px 0 var(--ink); transform: translateY(-2px) rotate(-1deg); }
.site-nav a:hover span { transform: rotate(13deg) scale(1.12); }
.site-nav a:focus-visible, .header-buy:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.header-buy { position: relative; justify-self: end; padding: 7px 13px 7px 7px; display: flex; align-items: center; gap: 8px; overflow: hidden; color: white; background: var(--ink); border: 2px solid var(--ink); border-radius: 16px; font-family: var(--display); text-decoration: none; box-shadow: 4px 4px 0 var(--yellow); transition: transform .2s ease, box-shadow .2s ease; }
.header-buy::after { content: ""; position: absolute; width: 54px; height: 54px; right: -28px; bottom: -34px; background: var(--coral); border-radius: 50%; opacity: .75; transition: transform .25s ease; }
.header-buy > span { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 2px solid white; border-radius: 10px; font-size: 17px; transform: rotate(-7deg); transition: transform .22s cubic-bezier(.2,.9,.2,1.3); }
.header-buy b { position: relative; z-index: 1; display: flex; flex-direction: column; font-size: 11px; font-weight: 400; line-height: .95; }
.header-buy small { margin-bottom: 3px; color: var(--yellow); font-family: var(--mono); font-size: 6px; letter-spacing: .13em; }
.header-buy:hover { transform: translateY(-3px) rotate(1deg); box-shadow: 6px 7px 0 var(--coral); }
.header-buy:hover::after { transform: scale(2.2); }
.header-buy:hover > span { transform: rotate(8deg) scale(1.08); }

.mute-button.muted { background: #827b8f; }
.mute-icon { position: absolute; top: 13px; left: 22px; width: 15px; height: 26px; background: white; border: 2px solid var(--ink); border-radius: 12px; }
.mute-icon::before { content: ""; position: absolute; left: -7px; bottom: -8px; width: 25px; height: 19px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; }
.mute-icon::after { content: ""; position: absolute; top: -5px; left: 5px; width: 4px; height: 38px; background: var(--ink); border: 1px solid white; border-radius: 5px; transform: rotate(-42deg) scaleY(0); transition: transform .2s ease; }
.mute-button.muted .mute-icon::after { transform: rotate(-42deg) scaleY(1); }
.voice-ready .mute-button > i { border-color: var(--mint); animation: micPulse 1.8s ease infinite; }
.voice-starting .mute-button { animation: pulse 1s ease infinite; }
button:disabled { cursor: not-allowed; }
.room-button:disabled, .primary-action:disabled, .mute-button:disabled { opacity: .42; transform: none !important; }

.sleep-lock { position: absolute; z-index: 17; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; background: rgba(16,26,55,.32); opacity: 0; visibility: hidden; backdrop-filter: blur(2px); transition: .35s ease; pointer-events: none; }
.sleep-lock::before { content: ""; position: absolute; inset: 18px; border: 2px dashed rgba(255,255,255,.5); border-radius: 16px; }
.sleep-lock > span { font-size: clamp(44px,7vw,90px); animation: floatMoon 2.4s ease-in-out infinite; }
.sleep-lock strong { font-family: var(--display); font-size: clamp(26px,5vw,66px); text-shadow: 4px 4px 0 var(--ink); }
.sleep-lock small { margin-top: 6px; font-size: 8px; letter-spacing: .22em; }
.sleep-lock time { margin-top: 18px; padding: 8px 17px; background: var(--ink); border: 2px solid white; border-radius: 99px; font-family: var(--display); font-size: 24px; letter-spacing: .08em; }
.sleep-lock.show { opacity: 1; visibility: visible; pointer-events: all; }
@keyframes floatMoon { 50% { transform: translateY(-10px) rotate(8deg); } }

.site-section { position: relative; margin-top: 100px; scroll-margin-top: 105px; }
.community-section { min-height: min(78vh,760px); overflow: hidden; border: var(--line); border-radius: 30px; box-shadow: 0 12px 0 rgba(39,35,55,.14); }
.community-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,247,232,.97) 0 42%,rgba(255,247,232,.36) 63%,transparent 78%); }
.community-copy { position: relative; z-index: 2; width: min(600px,55%); min-height: min(78vh,760px); padding: clamp(55px,8vw,110px) clamp(35px,6vw,90px); display: flex; flex-direction: column; justify-content: center; }
.community-copy > p:first-child, .section-kicker p { margin: 0 0 12px; color: var(--coral-dark); font-size: 9px; font-weight: 500; letter-spacing: .15em; }
.community-copy h2, .section-title h2, .chart-head h2 { margin: 0; font-family: var(--display); font-size: clamp(52px,7vw,104px); font-weight: 400; line-height: .84; letter-spacing: -.035em; }
.community-copy h2 span { color: var(--coral); text-shadow: 4px 4px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
.community-lede { max-width: 450px; margin: 26px 0 28px; font-size: 11px; line-height: 1.8; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.social-card { min-height: 67px; padding: 8px 10px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; background: rgba(255,253,247,.94); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; transition: .2s ease; }
.social-card:hover { z-index: 2; transform: translateY(-4px) rotate(-1deg); background: var(--yellow); box-shadow: 5px 7px 0 var(--ink); }
.social-card > img, .network-icon { width: 44px; height: 44px; object-fit: contain; }
.network-icon { display: grid; place-items: center; border-radius: 12px; }
.network-icon svg { width: 22px; fill: white; }
.x-icon { background: var(--ink); }.telegram-icon { background: #229ed9; }
.social-card > span:not(.network-icon) { display: flex; flex-direction: column; font-family: var(--display); font-size: 12px; line-height: 1.05; }
.social-card small { color: #77707d; font-family: var(--mono); font-size: 6px; }

.roadmap-section { padding: clamp(60px,8vw,110px) clamp(24px,5vw,70px); background: var(--cream); border: var(--line); border-radius: 30px; box-shadow: 0 12px 0 rgba(39,35,55,.14); isolation: isolate; }
.roadmap-section > :not(.section-toys), .chart-section > :not(.section-toys) { position: relative; z-index: 2; }
.section-kicker { display: flex; align-items: center; gap: 13px; }
.section-kicker span { width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--coral); border: 2px solid var(--ink); border-radius: 12px; font-family: var(--display); font-size: 18px; transform: rotate(-5deg); }
.section-kicker p { margin: 0; }
.section-title { margin: 24px 0 55px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-title h2 { font-size: clamp(48px,7vw,100px); }
.section-title h2 em, .chart-head h2 em { color: var(--coral); font-style: normal; }
.section-title > p { max-width: 340px; margin: 0 0 8px; font-size: 10px; line-height: 1.75; }
.roadmap-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.road-card { min-height: 325px; padding: 23px 20px; display: flex; flex-direction: column; background: var(--paper); border: var(--line); border-radius: 19px; box-shadow: 6px 6px 0 var(--ink); transition: .25s ease; }
.road-card:nth-child(even) { margin-top: 35px; }
.road-card:hover { transform: translateY(-8px) rotate(-1deg); }
.road-card > span { font-size: 7px; font-weight: 500; letter-spacing: .08em; }
.road-card h3 { margin: 35px 0 16px; font-family: var(--display); font-size: clamp(25px,2.4vw,39px); font-weight: 400; line-height: .9; }
.road-card p { margin: 0; font-size: 9px; line-height: 1.75; }
.road-card b { margin-top: auto; padding-top: 13px; border-top: 2px dashed currentColor; font-size: 8px; }
.coral-card { color: white; background: var(--coral); }
.dark-card { color: white; background: var(--ink); box-shadow: 6px 6px 0 var(--yellow); }
.yellow-card { background: var(--yellow); }

.chart-section { padding: clamp(60px,8vw,110px) clamp(24px,5vw,70px); color: white; background: var(--ink); border: var(--line); border-radius: 30px; box-shadow: 0 12px 0 var(--coral); isolation: isolate; }
.chart-section .section-kicker span { color: var(--ink); background: var(--yellow); }
.chart-section .section-kicker p { color: var(--yellow); }
.chart-head { margin: 25px 0 45px; display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.chart-head h2 { font-size: clamp(48px,7vw,96px); }
.chart-head a { margin-bottom: 8px; padding: 13px 16px; color: var(--ink); background: var(--yellow); border: 2px solid white; border-radius: 99px; font-family: var(--display); font-size: 12px; text-decoration: none; box-shadow: 4px 4px 0 var(--coral); }
.chart-window { height: min(70vh,700px); overflow: hidden; background: #101014; border: 3px solid white; border-radius: 18px; box-shadow: 9px 9px 0 var(--coral); }
.chart-bar { height: 48px; padding: 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ink); background: var(--paper); }
.chart-bar > span { display: flex; gap: 6px; }
.chart-bar i { width: 11px; height: 11px; display: block; background: var(--coral); border: 1px solid var(--ink); border-radius: 50%; }
.chart-bar i:nth-child(2) { background: var(--yellow); }.chart-bar i:nth-child(3) { background: var(--mint); }
.chart-bar b { font-size: 8px; }.chart-bar small { justify-self: end; color: var(--coral-dark); font-size: 8px; font-weight: 500; }
.chart-window iframe { width: 100%; height: calc(100% - 48px); border: 0; }
.contract-strip { margin-top: 28px; padding: 10px 10px 10px 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; color: var(--ink); background: var(--yellow); border: 2px solid white; border-radius: 14px; box-shadow: 5px 5px 0 var(--coral); }
.contract-strip span { font-family: var(--display); }.contract-strip code { overflow: hidden; font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; }
.contract-strip button { padding: 10px 13px; color: white; background: var(--ink); border-radius: 9px; font-family: var(--display); cursor: pointer; }

.section-toys { position: absolute; z-index: 1; inset: 0; overflow: visible; pointer-events: none; }
.toy-prop { position: absolute; max-width: none; user-select: none; filter: drop-shadow(0 15px 13px rgba(39,35,55,.24)); transform: rotate(var(--toy-turn,0deg)) scaleX(var(--toy-flip,1)); transform-origin: 50% 70%; animation: toyDrift 5.4s ease-in-out infinite; }
.prop-bowl { --toy-turn: -7deg; bottom: -105px; left: -4.5%; width: clamp(175px,20vw,310px); }
.prop-yarn { --toy-turn: 9deg; right: -3.5%; bottom: -85px; width: clamp(145px,17vw,255px); animation-delay: -2.1s; }
.prop-wand { --toy-turn: 13deg; --toy-flip: -1; top: -90px; right: -5%; width: clamp(245px,29vw,430px); animation-duration: 6.3s; animation-delay: -1.2s; }
.prop-mouse { --toy-turn: -6deg; bottom: -115px; left: 4%; width: clamp(165px,19vw,285px); animation-delay: -3.4s; }
@keyframes toyDrift { 50% { transform: translateY(-10px) rotate(calc(var(--toy-turn,0deg) + 2deg)) scaleX(var(--toy-flip,1)); } }

.site-footer { margin: 100px 0 30px; padding: 35px; display: grid; grid-template-columns: 1fr auto; align-items: center; background: var(--cream); border: var(--line); border-radius: 24px; }
.site-footer > div { display: flex; align-items: center; gap: 8px; }.site-footer img { width: 55px; }.site-footer strong { font-family: var(--display); font-size: 24px; }.site-footer strong span { color: var(--coral); }
.site-footer a { justify-self: end; font-size: 8px; font-weight: 500; text-decoration: none; }

.reveal { opacity: 0; transform: translateY(35px); transition: opacity .65s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .site-nav a { padding-inline: 7px; font-size: 7px; }
  .roadmap-grid { grid-template-columns: 1fr 1fr; }
  .road-card:nth-child(even) { margin-top: 18px; }
  .community-copy { width: 65%; }
  .prop-bowl { left: -6%; bottom: -90px; }
  .prop-yarn { right: -5%; bottom: -70px; }
  .prop-wand { top: -70px; right: -7%; }
  .prop-mouse { bottom: -95px; }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 8px; }
  .site-nav { justify-self: center; }
  .site-nav a { padding: 3px; }
  .site-nav a b { display: none; }
  .site-nav a span { width: 24px; height: 24px; }
}

@media (max-width: 760px) {
  .topbar { position: relative; top: 0; }
  .site-nav { display: none; }
  .header-buy { padding: 10px 12px; font-size: 10px; }
  .community-section { min-height: 820px; }
  .community-bg { object-position: 68% center; }
  .community-section::after { background: linear-gradient(180deg,rgba(255,247,232,.98) 0 54%,rgba(255,247,232,.28) 78%,transparent); }
  .community-copy { width: 100%; min-height: 820px; padding: 50px 24px; justify-content: flex-start; }
  .community-copy h2 { font-size: clamp(48px,15vw,80px); }
  .community-lede { max-width: 92%; margin-block: 18px; }
  .social-grid { max-width: 520px; }
  .section-title, .chart-head { align-items: flex-start; flex-direction: column; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .road-card, .road-card:nth-child(even) { min-height: 260px; margin-top: 0; }
  .chart-window { height: 600px; }
  .prop-bowl { bottom: -70px; width: 175px; }
  .prop-yarn { right: -7%; bottom: -58px; width: 145px; }
  .prop-wand { top: -45px; right: -8%; width: 220px; opacity: .9; }
  .prop-mouse { bottom: -78px; left: 2%; width: 160px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 20px; }.site-footer a { grid-column: 2; grid-row: 1; }
}

@media (max-width: 500px) {
  .header-buy { padding: 9px; }.header-buy > span, .header-buy small { display: none; }.header-buy b { font-size: 10px; }
  .site-section { margin-top: 60px; }
  .social-grid { grid-template-columns: 1fr; }
  .social-card { min-height: 58px; }.social-card > img, .network-icon { width: 38px; height: 38px; }
  .community-section { min-height: 940px; border-inline: 0; border-radius: 0; }
  .community-copy { min-height: 940px; }
  .roadmap-section, .chart-section { border-inline: 0; border-radius: 0; }
  .chart-head a { font-size: 10px; }
  .chart-window { height: 520px; border-inline: 0; border-radius: 0; }
  .contract-strip { grid-template-columns: 1fr auto; }.contract-strip span { grid-column: 1 / -1; }.contract-strip code { font-size: 8px; }
  .prop-bowl { left: -40px; bottom: -58px; width: 145px; }
  .prop-yarn { right: -38px; bottom: -45px; width: 125px; }
  .prop-wand { top: -35px; right: -58px; width: 185px; }
  .prop-mouse { left: -20px; bottom: -66px; width: 135px; }
  .sleep-lock strong { font-size: 27px; }.sleep-lock time { font-size: 20px; }
}