:root {
  --ink: #513a3d;
  --cream: #fff8eb;
  --peach: #ff9e87;
  --berry: #f05f87;
  --mint: #91d9cb;
  --lavender: #a995df;
  --glass: rgba(255, 255, 255, .42);
  --shadow: 0 14px 34px rgba(91, 56, 67, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  color: var(--ink);
  font-family: "Jua", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.9) 0 4%, transparent 16%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.7) 0 5%, transparent 17%),
    linear-gradient(145deg, #fff7da 0%, #ffdce5 48%, #ddf2ed 100%);
  min-height: 100svh;
  user-select: none;
}
body.native-app { padding-bottom: 62px; }
.blog-return { position: fixed; left: 12px; bottom: 12px; z-index: 30; color: #513a3d; background: rgba(255,255,255,.9); border: 2px solid rgba(81,58,61,.18); border-radius: 999px; padding: 8px 13px; box-shadow: 0 6px 18px rgba(81,58,61,.15); font: 12px "Jua", sans-serif; text-decoration: none; }
body.native-app .blog-return { display: none; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1400px, 100%); margin: auto; padding: 12px 18px 18px; }
.topbar { display: grid; grid-template-columns: 90px 1fr 120px; align-items: center; min-height: 78px; }
.pill-button, .wallet, .pause-button {
  border: 2px solid rgba(81,58,61,.12); background: rgba(255,255,255,.72); box-shadow: var(--shadow);
}
.pill-button { width: 52px; height: 52px; border-radius: 20px; font-size: 24px; }
.brand-lockup { text-align: center; line-height: .95; }
.brand-kicker { color: #a06d79; letter-spacing: .12em; font-size: 13px; }
h1 { margin: 5px 0 0; font-family: "Black Han Sans", sans-serif; font-size: clamp(22px, 3.2vw, 42px); font-weight: 400; }
h1 em { color: var(--berry); font-style: normal; text-shadow: 2px 3px 0 white; }
.wallet { justify-self: end; border-radius: 22px; padding: 12px 15px; display: flex; gap: 8px; align-items: center; }

.match-strip { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; margin: 0 auto -31px; position: relative; z-index: 3; width: 94%; }
.player-card { display: flex; gap: 11px; align-items: center; background: rgba(255,255,255,.9); border: 3px solid white; border-radius: 26px; padding: 8px 18px; box-shadow: 0 8px 20px rgba(80,49,61,.16); }
.player-card.rival { justify-content: flex-end; text-align: right; }
.avatar { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: #ffe9ae; font-size: 28px; box-shadow: inset 0 -5px rgba(179,106,83,.12); }
.player-card small { display: block; color: #9d7280; }
.player-card b { display: block; font-size: 22px; line-height: 1; }
.versus-badge { text-align: center; display: grid; place-items: center; pointer-events: none; }
.versus-badge strong { display: grid; place-items: center; color: white; font: 32px "Black Han Sans"; background: var(--berry); width: 72px; height: 51px; border-radius: 50%; transform: rotate(-4deg); border: 4px solid white; box-shadow: 0 7px 0 #c33e66; }
.versus-badge span { background: var(--ink); color: white; padding: 5px 11px; border-radius: 10px; margin-bottom: -5px; z-index: 1; }
.versus-badge small { position: absolute; top: 76px; background: #fff5ba; padding: 5px 13px; border-radius: 99px; white-space: nowrap; box-shadow: 0 4px 10px rgba(80,49,61,.12); }

.game-wrap { position: relative; width: 100%; aspect-ratio: 5 / 3; max-height: calc(100vh - 220px); min-height: 420px; filter: drop-shadow(0 18px 22px rgba(81,58,61,.18)); }
#gameCanvas { width: 100%; height: 100%; display: block; touch-action: none; }
.drop-hints { position: absolute; left: 8%; right: 8%; top: 74px; display: flex; justify-content: space-between; color: rgba(81,58,61,.55); pointer-events: none; font-size: 13px; }
.next-bubble { position: absolute; top: 80px; width: 56px; height: 64px; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); border: 3px solid white; display: grid; place-items: center; line-height: .7; }
.next-bubble small { font-size: 10px; color: #a37a83; }
.next-bubble span { font-size: 29px; }
.left-next { left: 2%; } .right-next { right: 2%; }
.status-toast { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%) scale(.8); background: var(--ink); color: white; border: 4px solid white; border-radius: 22px; padding: 11px 20px; font-size: clamp(16px, 2vw, 25px); opacity: 0; pointer-events: none; z-index: 5; box-shadow: var(--shadow); }
.status-toast.show { animation: toast-pop 1.45s both; }
@keyframes toast-pop { 0%{opacity:0;transform:translate(-50%,-20%) scale(.7)} 15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-70%) scale(.9)} }

.control-dock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: -8px; position: relative; z-index: 5; }
.skill-group { display: flex; gap: 10px; }
.right-skills { justify-content: flex-end; opacity: .62; }
.right-skills.local-active { opacity: 1; }
.skill-button { position: relative; overflow: hidden; min-width: 138px; border: 3px solid white; background: rgba(255,255,255,.76); border-radius: 20px; padding: 8px 12px; box-shadow: 0 7px 0 rgba(81,58,61,.15); display: flex; gap: 7px; align-items: center; }
.skill-button:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(81,58,61,.15); }
.skill-button span { font-size: 27px; }.skill-button b { font-size: 14px; }
.skill-button[disabled] { filter: grayscale(.65); cursor: wait; }
.skill-button .cooldown { position: absolute; inset: auto 0 0; height: 0; background: rgba(81,58,61,.15); transition: height .1s linear; }
.center-actions { display: flex; align-items: center; gap: 9px; }
.emote-button { border: 0; background: #fff; border-radius: 18px; padding: 5px 12px; font-size: 21px; box-shadow: var(--shadow); }
.emote-button small { display: block; font-size: 9px; }.pause-button { width: 43px; height: 43px; border-radius: 16px; }

dialog { border: 0; padding: 0; color: var(--ink); }
dialog::backdrop { background: rgba(73,44,57,.62); backdrop-filter: blur(8px); }
.sugar-modal { width: min(680px, calc(100% - 28px)); border-radius: 36px; background: var(--cream); box-shadow: 0 26px 80px rgba(45,27,37,.35); padding: 28px; text-align: center; overflow: visible; }
.sugar-modal::before { content:""; position:absolute; inset: 8px; border: 2px dashed rgba(238,132,145,.28); border-radius: 28px; pointer-events:none; }
.modal-close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f4d7dc; font-size: 26px; z-index: 2; }
.modal-hero .hero-pets { font-size: 52px; letter-spacing: -16px; display: block; margin-right: 14px; filter: drop-shadow(0 7px 0 rgba(98,61,65,.12)); }
.modal-hero p { margin: 10px 0 2px; color: var(--berry); }.sugar-modal h2 { margin: 4px 0 18px; font-size: 29px; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode-card { border: 3px solid transparent; border-radius: 22px; padding: 16px; background: white; box-shadow: 0 8px 16px rgba(81,58,61,.08); }
.mode-card.active { border-color: var(--berry); background: #fff0f4; transform: translateY(-3px); }
.mode-card > span { display: block; font-size: 34px; }.mode-card b, .mode-card small { display: block; }.mode-card small { margin-top: 5px; color: #9a747b; }
.nickname-field { display:flex; align-items:center; justify-content:center; gap:9px; margin:13px 0 -4px; color:#98717a; font-size:13px; }
.nickname-field input { border:2px solid #ead1d4; border-radius:12px; background:white; padding:8px 11px; width:180px; }
.lobby-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.theme-select { text-align: left; font-size: 12px; }.theme-select select { display:block; margin-top:4px; padding:8px; border-radius:11px; border:1px solid #e8c9cd; background:white; }
.primary-button, .secondary-button { border: 0; border-radius: 17px; padding: 13px 18px; font-weight: 700; }
.primary-button { background: linear-gradient(#ff7f9d, #ed5079); color: white; box-shadow: 0 7px 0 #bd3b60; }
.secondary-button { background: #fff; border: 2px solid #e7d4d3; box-shadow: 0 5px 0 #dfcecc; }
.lobby-modal > .primary-button { width: 100%; font-size: 18px; }.tiny-copy { font-size: 11px; color: #a78589; margin-bottom: 0; }
.booster-button { width:100%; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; text-align:left; border:2px solid #f0c84e; background:linear-gradient(110deg,#fff7ba,#ffe686); border-radius:17px; padding:9px 14px; margin:-3px 0 13px; box-shadow:0 5px 0 #dab73f; }
.booster-button span { grid-row:1/3;font-size:27px; }.booster-button b { font-size:14px; }.booster-button small { color:#8c7040; }.booster-button.ready { background:linear-gradient(110deg,#d5fff0,#fff6b8);border-color:#6fc9aa;box-shadow:0 5px 0 #62ad92; }
.eyebrow { color: var(--berry); background: #ffe0e8; border-radius: 99px; padding: 5px 11px; font-size: 12px; }
.studio-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; text-align: left; }
.drop-zone { border: 3px dashed #ef9dae; border-radius: 23px; min-height: 265px; display: grid; place-items: center; align-content: center; gap: 7px; background: #fff6f7; text-align: center; padding: 16px; cursor: pointer; }
.drop-zone.dragging { background: #ffe4ea; transform: scale(1.01); }.drop-zone input { display:none; }
.studio-preview { width: 118px; height: 118px; border-radius: 50%; border: 8px solid #f1a4bb; background: white; display:grid; place-items:center; font-size:48px; background-size:cover; background-position:center; box-shadow: inset 0 -9px rgba(125,62,79,.1); }
.drop-zone small { color:#a57c83; }.studio-options { display:flex; flex-direction:column; gap:13px; justify-content:center; }
.studio-options label { font-size: 13px; }.studio-options input,.studio-options select { display:block; width:100%; margin-top:5px; border:2px solid #eed5d4; border-radius:13px; padding:10px; background:white; }
.text-button { border:0;background:none;text-decoration:underline;color:#9b7179; }
.reward-modal { max-width: 500px; }.sad-pet,.result-pet { font-size: 76px; filter:drop-shadow(0 8px 0 rgba(84,51,58,.12)); }.reward-actions { display:grid; gap:10px; }.receipt-head { border-bottom:2px dashed #cbaeb0;padding-bottom:11px;letter-spacing:.15em;color:#a27b81; }.receipt-lines { display:grid;grid-template-columns:1fr auto;gap:9px;text-align:left;border-block:2px dashed #cbaeb0;padding:13px;margin:16px 0; }.result-modal .primary-button,.result-modal .secondary-button { width:100%;margin-top:8px; }
.matching-modal { max-width:460px; }.matching-orbit { height:105px;position:relative;margin:auto;width:180px;animation:orbit 2.8s linear infinite; }.matching-orbit span { position:absolute;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:white;box-shadow:var(--shadow);font-size:31px; }.matching-orbit span:nth-child(1){left:0;top:36px}.matching-orbit span:nth-child(2){right:0;top:36px}.matching-orbit span:nth-child(3){left:62px;top:0}.matching-dots{display:flex;justify-content:center;gap:7px;margin:16px}.matching-dots i{width:9px;height:9px;border-radius:50%;background:var(--berry);animation:dot 1s infinite alternate}.matching-dots i:nth-child(2){animation-delay:.2s}.matching-dots i:nth-child(3){animation-delay:.4s}@keyframes orbit{50%{transform:rotate(8deg) scale(1.04)}}@keyframes dot{to{transform:translateY(-8px);opacity:.35}}
.web-test-ad { position:fixed;z-index:20;left:50%;bottom:5px;transform:translate(-50%,120%);width:min(620px,calc(100% - 20px));min-height:42px;border:2px solid #ad91b9;border-radius:13px;background:linear-gradient(90deg,#fbf2ff,#fff8d9);box-shadow:0 6px 20px rgba(58,38,66,.22);display:flex;align-items:center;justify-content:center;gap:12px;padding:5px 14px;transition:transform .35s ease;pointer-events:none}.web-test-ad.visible{transform:translate(-50%,0)}.web-test-ad small{font:9px system-ui;color:#81698a;border:1px solid #bca9c4;padding:2px 4px}.web-test-ad b{font-size:13px}.native-app .web-test-ad{display:none}

@media (max-width: 760px) {
  .app-shell { padding: 6px; min-width: 640px; transform-origin: top left; }
  .topbar { min-height: 62px; }.brand-kicker { display:none; }.match-strip { width: 90%; }
  .game-wrap { min-height: 390px; }.control-dock { margin-inline: 10px; }
  .mode-grid { grid-template-columns:repeat(3,1fr); }
  .skill-button { min-width: 110px; padding: 6px 8px; }.skill-button b { font-size: 12px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .topbar { display:none; }.app-shell { padding-top:0; }.game-wrap { max-height: calc(100vh - 110px); }
  .control-dock { margin-top:-30px; transform:scale(.9); }
}