.oracle {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.oracle__emoji { font-size: 4.6rem; text-align: center; }

.range { width: 100%; accent-color: var(--red); }

.meter {
  height: 23px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 48% 52% 46% 54%;
  background: white;
}

.meter i { display: block; width: 0; height: 100%; background: var(--red); transition: width .15s; }

.coin-stage {
  position: relative;
  display: grid;
  place-items: end center;
  width: 150px;
  height: 190px;
  margin: 0 auto -4px;
  perspective: 700px;
}

.coin {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.75) 0 7%, transparent 8%),
    radial-gradient(circle at 35% 30%, #fff9df, #edc66f 60%, #c99331);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1.6rem;
  font-weight: 1000;
  line-height: .95;
  white-space: pre-line;
  transform-style: preserve-3d;
  will-change: transform;
}

.coin::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(48,43,40,.42);
  border-radius: 50%;
}

.coin-shadow {
  position: absolute;
  bottom: 7px;
  width: 82px;
  height: 13px;
  border-radius: 50%;
  background: rgba(48,43,40,.23);
  filter: blur(2px);
  transform-origin: center;
}

.coin.is-landing { animation: coin-land .28s ease-out; }
@keyframes coin-land {
  45% { transform: translateY(5px) scaleX(1.06) scaleY(.94); }
}

.vending {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 8px;
}

.vending button {
  position: relative;
  min-height: 62px;
  border: 2px solid var(--ink);
  background: white;
  font-size: 1.75rem;
  cursor: pointer;
}

.cat-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding-top: 52px;
}

.cat-stage__speech {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 180px;
  padding: 8px 11px;
  border: 2px solid var(--ink);
  border-radius: 11% 8% 13% 7%;
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  font: 800 .82rem "Segoe Print", cursive;
  text-align: center;
  transform: translateX(-50%);
}

.cat-stage__cushion {
  position: absolute;
  bottom: 18px;
  width: min(72%, 420px);
  height: 58px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #d7b99f;
}

.shlyopa {
  z-index: 2;
  border: 0;
  background: transparent;
  font-size: clamp(7rem, 22vw, 10rem);
  line-height: 1;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.14));
}

.shlyopa.is-sleeping { transform: rotate(-8deg); filter: grayscale(.15) drop-shadow(4px 5px 0 rgba(0,0,0,.14)); }
.shlyopa.is-purring { animation: purr .12s alternate infinite; }
@keyframes purr { to { transform: translateY(1px) scale(1.015); } }

.belly { height: 22px; overflow: hidden; border: 2px solid var(--ink); border-radius: 50%; background: white; }
.belly i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .2s; }

.phone-card { padding: 18px; border: 3px solid var(--ink); border-radius: 20px; background: #24242a; color: white; text-align: center; }
.phone-card__avatar { font-size: 4.8rem; }
.phone-card .btn { color: var(--ink); background: white; }

.coupon {
  position: relative;
  margin: 9px 0;
  padding: 12px;
  border: 2px dashed var(--ink);
  border-radius: 4% 2% 5% 3%;
  background: #fff1b9;
}

.coupon.is-used { filter: grayscale(.75); opacity: .65; }
.coupon__stamp { position: absolute; right: 10px; bottom: 10px; display: none; border: 2px solid var(--red); color: var(--red); font: 900 .75rem "Courier New", monospace; transform: rotate(-9deg); }
.coupon.is-used .coupon__stamp { display: inline-block; }

.draw-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.draw-tools button { padding: 7px 9px; border: 2px solid var(--ink); border-radius: 45% 52% 48% 54%; background: white; font-weight: 900; cursor: pointer; }
.draw-tools button.is-active { background: #ffe3e3; box-shadow: 2px 2px 0 var(--ink); }

.drawing-canvas {
  display: block;
  width: 100%;
  height: min(42dvh, 320px);
  min-height: 220px;
  border: 2px solid var(--ink);
  background-color: white;
  background-image: linear-gradient(#eee5da 1px, transparent 1px), linear-gradient(90deg, #eee5da 1px, transparent 1px);
  background-size: 22px 22px;
  touch-action: none;
}

.sticker-board {
  position: relative;
  height: 160px;
  overflow: hidden;
  border: 2px dashed var(--ink);
  background: #fffaf1;
  touch-action: none;
}

.sticker { position: absolute; font-size: 2.2rem; cursor: grab; user-select: none; touch-action: none; }

.hug-button { width: min(260px, 100%); }

.game-field {
  position: relative;
  height: min(36dvh, 250px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 4%;
  background: #e1f0f9;
  touch-action: none;
}

.penguin { position: absolute; border: 0; background: transparent; font-size: 2.8rem; cursor: pointer; user-select: none; touch-action: manipulation; }

.slot-machine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(340px, 100%); margin: 12px auto; }
.reel { display: grid; place-items: center; height: 76px; border: 2px solid var(--ink); border-radius: 8%; background: white; box-shadow: 3px 3px 0 var(--ink); font-size: 2.7rem; }

.scratch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.scratch-card { min-height: 82px; padding: 7px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg,#c9c2ba 0 8px,#afa8a1 8px 16px); font-weight: 900; cursor: pointer; }
.scratch-card__inside { display: none; font: 800 .75rem "Segoe Print", cursive; }
.scratch-card.is-open { background: #fff8e8; }
.scratch-card.is-open .scratch-card__cover { display: none; }
.scratch-card.is-open .scratch-card__inside { display: block; }

.tv { padding: 10px; border: 3px solid var(--ink); background: #202221; box-shadow: 5px 5px 0 var(--ink); }
.tv__screen { position: relative; display: grid; place-items: center; height: min(38dvh, 280px); overflow: hidden; padding: 16px; border: 2px solid #101111; background: #dce9e6; text-align: center; }
.tv__screen::after { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px); pointer-events: none; }
.tv__screen.is-static { background: repeating-radial-gradient(circle at 20% 30%, #ddd 0 2px, #555 3px 4px, #aaa 5px 6px); }
.tv__emoji { font-size: 4.8rem; }
.tv__emoji.is-leaving { animation: tv-leave .72s ease-in forwards; }
.tv__emoji.is-entering { animation: tv-enter .68s cubic-bezier(.2,.8,.25,1.2) both; }
.tv__footprints { min-height: 1.15em; color: #738785; font-size: 1.8rem; letter-spacing: .45rem; transform: rotate(-8deg); }
.tv__caption { font: 900 1.1rem "Segoe Print", cursive; }

@keyframes tv-leave {
  0% { opacity: 1; transform: translateX(0) rotate(0); }
  55% { transform: translateX(55px) rotate(7deg); }
  100% { opacity: 0; transform: translateX(190px) rotate(13deg); }
}

@keyframes tv-enter {
  from { opacity: 0; transform: translateX(-180px) rotate(-14deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

.tv__screen--signal { background: #e1eff0; }
.signal-channel { display: grid; justify-items: center; gap: 9px; }
.signal-dish { position: relative; display: grid; place-items: center; width: 112px; height: 92px; }
.signal-dish__emoji { z-index: 2; font-size: 4.8rem; filter: drop-shadow(2px 3px 0 rgba(48,43,40,.16)); }
.signal-dish i {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  width: 42px;
  height: 42px;
  border: 4px solid transparent;
  border-top-color: var(--blue);
  border-right-color: var(--blue);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-35deg) scale(.4);
  animation: signal-wave 1.45s ease-out infinite;
}
.signal-dish i:nth-of-type(2) { animation-delay: .4s; }
.signal-dish i:nth-of-type(3) { animation-delay: .8s; }
.signal-status { min-height: 1.3em; color: #52666a; font-size: .78rem; }
.signal-button { margin-top: 2px; }
@keyframes signal-wave {
  15% { opacity: .9; }
  100% { opacity: 0; transform: rotate(-35deg) scale(1.35) translate(12px, -12px); }
}

.forbidden-button { position: relative; padding: 12px 16px; border: 3px solid var(--ink); background: var(--red); color: white; box-shadow: 4px 4px 0 var(--ink); font-weight: 1000; cursor: pointer; transition: translate .12s; }

.chat { display: flex; flex-direction: column; gap: 7px; height: min(36dvh, 250px); overflow-y: auto; padding: 9px; border: 2px solid var(--ink); background: #ece5dc; }
.bubble { max-width: 84%; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 8% 5% 9% 4%; background: white; }
.bubble--me { align-self: flex-end; background: #ffdede; }
.chat-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 8px; }
.chat-input input, .console input { min-width: 0; padding: 10px; border: 2px solid var(--ink); background: white; }

.console { margin-top: 12px; padding: 12px; border: 3px solid #111; background: #151515; color: #b7f1a8; font: 800 .86rem "Courier New", monospace; }
.console__line { display: flex; align-items: center; gap: 6px; }
.console input { flex: 1; border-color: #62745e; background: #151515; color: #b7f1a8; }
.console__output { min-height: 3.5em; margin-top: 8px; white-space: pre-wrap; }

.final-note { max-width: 55ch; margin-inline: auto; font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.birthday-line { margin-bottom: 0; color: var(--red); font-size: 1.15em; font-weight: 900; }
.final-heart { display: block; margin: 16px auto 2px; border: 0; background: transparent; font-size: clamp(5rem, 18vw, 8rem); cursor: pointer; }