[hidden] { display: none !important; }
@font-face { font-family: "Titan One"; src: url("assets/fonts/TitanOne-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik"; src: url("assets/fonts/Rubik-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
:root {
  --ink: #2b2350; --pink: #ff6fb5; --hot: #ff4fa3; --yellow: #ffd23f; --cyan: #37c8f5; --blue: #29c5f6;
  --mint: #7ef0a8; --purple: #9b7bff; --orange: #ff9a3c; --cream: #fff8ec;
  --display: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ui: "Rubik", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: var(--ui); color: #fff;
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 40%, #bfe8ff, #6fb8ff 70%); z-index: 50; transition: opacity .5s; }
#loading.done { opacity: 0; pointer-events: none; }
.load-logo { font-family: var(--display); font-size: clamp(38px, 9vw, 72px); color: var(--yellow); -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); animation: bob 1.4s ease-in-out infinite; }
.load-paw { width: 56px; height: 56px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ff6fb5' stroke='%232b2350' stroke-width='3'%3E%3Cellipse cx='32' cy='42' rx='15' ry='12'/%3E%3Ccircle cx='14' cy='26' r='6'/%3E%3Ccircle cx='25' cy='15' r='6'/%3E%3Ccircle cx='39' cy='15' r='6'/%3E%3Ccircle cx='50' cy='26' r='6'/%3E%3C/g%3E%3C/svg%3E");
  animation: hop .6s ease-in-out infinite alternate; }
.load-bar { width: min(320px, 70vw); height: 18px; border: 4px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden; }
#load-fill { height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--pink) 0 12px, var(--hot) 12px 24px); transition: width .2s; }
#load-text { font-weight: 700; color: var(--ink); opacity: .75; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes hop { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-14px) rotate(8deg); } }

/* ---------- title / logo ---------- */
#title { position: fixed; inset: 0; pointer-events: none; }
#logo { position: absolute; left: 6vw; top: 7vh; font-family: var(--display); line-height: .9; color: var(--yellow);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; filter: drop-shadow(0 7px 0 var(--ink)); }
#logo .crown { width: clamp(70px, 9vw, 120px); display: block; margin: 0 0 -6px 4px; animation: crown 3s ease-in-out infinite; transform-origin: 50% 100%; }
#logo .w1 { font-size: clamp(56px, 10vw, 128px); }
#logo .w2 { font-size: clamp(40px, 6.6vw, 86px); color: var(--pink); margin-left: .12em; }
#logo span { display: inline-block; animation: drop .7s cubic-bezier(.3, 1.6, .5, 1) both, letter 2.6s ease-in-out infinite; }
#logo .w1 span:nth-child(1) { animation-delay: .05s, .9s; } #logo .w1 span:nth-child(2) { animation-delay: .12s, 1.05s; } #logo .w1 span:nth-child(3) { animation-delay: .19s, 1.2s; }
#logo .w2 span:nth-child(1) { animation-delay: .3s, 1.35s; } #logo .w2 span:nth-child(2) { animation-delay: .36s, 1.5s; } #logo .w2 span:nth-child(3) { animation-delay: .42s, 1.65s; }
#logo .w2 span:nth-child(4) { animation-delay: .48s, 1.8s; } #logo .w2 span:nth-child(5) { animation-delay: .54s, 1.95s; } #logo .w2 span:nth-child(6) { animation-delay: .6s, 2.1s; }
@keyframes drop { from { transform: translateY(-120vh) rotate(-30deg); } }
@keyframes letter { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes crown { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-4px); } }
@media (max-aspect-ratio: 5/4) { #logo { left: 0; right: 0; text-align: center; top: 3vh; } #logo .crown { margin: 0 auto -6px; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--display); }
#hud-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px; gap: 8px; }
.pill { background: rgba(43, 35, 80, .55); border: 3px solid rgba(255, 255, 255, .85); border-radius: 999px; padding: 4px 16px;
  font-size: clamp(16px, 2.6vw, 24px); text-shadow: 0 2px 0 var(--ink); }
.pill:empty { visibility: hidden; }
.pill.warn { background: var(--hot); animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
#teambar { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); width: min(440px, 72vw); height: 22px;
  border-radius: 12px; overflow: hidden; display: flex; border: 4px solid var(--ink); background: #fff; }
#team-a { background: var(--hot); height: 100%; width: 0; transition: width .25s; }
#team-b { background: var(--blue); height: 100%; width: 0; margin-left: auto; transition: width .25s; }
#place { position: absolute; right: 18px; top: 64px; font-size: clamp(40px, 7vw, 64px); color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
#place small { font-size: .45em; }
#banner { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-size: clamp(44px, 10vw, 104px);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); opacity: 0; transform: scale(.6) rotate(-4deg);
  transition: opacity .18s, transform .35s cubic-bezier(.3, 1.8, .5, 1); color: #fff; }
#banner.on { opacity: 1; transform: scale(1) rotate(-2deg); }
#banner.good { color: var(--mint); } #banner.bad { color: var(--pink); } #banner.gold { color: var(--yellow); }
#banner small { display: block; font-family: var(--ui); font-weight: 800; font-size: .26em; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); margin-top: 6px; }
#count { position: absolute; top: 26%; left: 0; right: 0; text-align: center; font-size: clamp(110px, 24vw, 240px); color: var(--yellow);
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 10px 0 var(--ink); opacity: 0; }
#count.pop { animation: countpop .9s cubic-bezier(.2, 1.6, .4, 1) both; }
#count.go { color: var(--mint); }
@keyframes countpop { 0% { opacity: 0; transform: scale(2.4) rotate(12deg); } 25% { opacity: 1; transform: scale(1) rotate(-3deg); } 80% { opacity: 1; transform: scale(.94); } 100% { opacity: 0; transform: scale(.7); } }
#card { position: absolute; left: 50%; top: 50%; width: min(560px, 90vw); transform: translate(-50%, -50%) translateX(-120vw) rotate(-4deg);
  background: var(--cream); color: var(--ink); border: 5px solid var(--ink); border-radius: 26px; padding: 20px 26px 22px; text-align: center;
  box-shadow: 0 10px 0 var(--ink); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
#card.on { transform: translate(-50%, -50%) rotate(-1.5deg); }
#card.off { transform: translate(-50%, -50%) translateX(120vw) rotate(4deg); }
#card .chip { display: inline-block; background: var(--ink); color: var(--yellow); border-radius: 999px; padding: 4px 14px; font-size: 15px; }
#card h2 { margin: 8px 0 2px; font-weight: 400; font-size: clamp(38px, 7vw, 60px); color: var(--hot); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
#card .kind { display: inline-block; margin: 4px 4px 10px; padding: 3px 12px; border-radius: 10px; border: 3px solid var(--ink); background: var(--yellow); font-size: 16px; }
#card p { margin: 0; font-family: var(--ui); font-weight: 600; font-size: 17px; line-height: 1.35; }

/* ---------- touch ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 28px; bottom: 28px; width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: 4px solid rgba(255, 255, 255, .6); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 37px; top: 37px; width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 var(--ink); }
#touch button { position: absolute; pointer-events: auto; border: 4px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 15px;
  color: var(--ink); touch-action: none; box-shadow: 0 5px 0 var(--ink); }
#touch button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
#btn-jump { right: 26px; bottom: 34px; width: 96px; height: 96px; background: var(--yellow); }
#btn-dive { right: 134px; bottom: 22px; width: 72px; height: 72px; background: var(--mint); }
#btn-pause { position: fixed; top: 64px; left: 14px; width: 44px; height: 44px; border-radius: 12px; border: 3px solid #fff;
  background: rgba(43, 35, 80, .55); display: flex; gap: 6px; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
#btn-pause span { width: 7px; height: 18px; background: #fff; border-radius: 3px; }

/* ---------- panels ---------- */
#screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; padding: 12px; z-index: 10; }
#screen.on { display: flex; }
#screen.dim { background: rgba(30, 22, 64, .45); pointer-events: auto; }
@media (min-aspect-ratio: 5/4) { #screen.side { justify-content: flex-end; padding-right: 5vw; } }
@media (max-aspect-ratio: 5/4) { #screen.side { align-items: flex-end; padding-bottom: 3vh; } }
.panel { pointer-events: auto; background: var(--cream); color: var(--ink); border: 5px solid var(--ink); border-radius: 26px;
  padding: 20px 24px; width: min(540px, 94vw); max-height: 88vh; overflow: auto; text-align: center; box-shadow: 0 10px 0 var(--ink);
  animation: panelin .35s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes panelin { from { opacity: 0; transform: translateY(30px) scale(.92); } }
.panel h1 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 48px); color: var(--hot);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.panel h2 { margin: 2px 0 12px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.panel h3 { font-family: var(--display); font-weight: 400; margin: 14px 0 6px; font-size: 20px; }
.panel p { margin: 6px 0; line-height: 1.4; font-weight: 500; }
.panel .label { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin: 10px 0 4px; }
.pets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0 12px; }
.pets button { font: 700 12px var(--ui); padding: 8px 2px; border-radius: 12px; border: 3px solid transparent; background: #ece3ff; color: var(--ink);
  cursor: pointer; text-transform: capitalize; transition: transform .12s, background .12s; }
.pets button:hover, .pets button:focus-visible { transform: translateY(-3px) rotate(-2deg); background: #fff; border-color: var(--ink); }
.pets button.sel { background: var(--yellow); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
button { font-family: var(--ui); }
.big { font: 400 26px var(--display); padding: 12px 30px; border-radius: 18px; border: 4px solid var(--ink); background: var(--mint); color: var(--ink);
  cursor: pointer; box-shadow: 0 6px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .15s; }
.big:hover, .big:focus-visible { background: #a4ffc4; transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 0 var(--ink); }
.big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.small { font: 800 15px var(--ui); padding: 9px 16px; border-radius: 14px; border: 3px solid var(--ink); background: #fff; color: var(--ink);
  cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .15s; }
.small:hover, .small:focus-visible { background: var(--yellow); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.small.danger:hover, .small.danger:focus-visible { background: var(--pink); }
:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }
.list { text-align: left; margin: 8px auto; display: flex; flex-direction: column; gap: 5px; max-width: 380px; }
.list .r { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #ece3ff; font-weight: 700;
  animation: rowin .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.list .r .n { font-family: var(--display); width: 30px; text-align: center; }
.list .r .who { flex: 1; } .list .r .who small { opacity: .55; font-weight: 600; text-transform: capitalize; }
.list .r .tag { font: 800 12px var(--ui); padding: 3px 10px; border-radius: 999px; background: var(--mint); border: 2px solid var(--ink); }
.list .r.out { opacity: .55; } .list .r.out .tag { background: #ddd; }
.list .r.me { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); }
.list .r.crown .tag { background: var(--yellow); }
@keyframes rowin { from { opacity: 0; transform: translateX(-24px); } }
.keys { font-size: 13px; opacity: .75; margin-top: 12px; font-weight: 600; }
.ver { font-size: 12px; opacity: .5; margin-top: 10px; font-weight: 600; }
.set { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 14px; align-items: center; text-align: left; margin: 10px 0; font-weight: 700; }
.set input[type=range] { width: 100%; accent-color: var(--hot); height: 26px; }
.toggle { justify-self: start; font: 800 14px var(--ui); padding: 6px 14px; border-radius: 999px; border: 3px solid var(--ink); background: #ddd; color: var(--ink); cursor: pointer; }
.toggle.on { background: var(--mint); }
.credits { text-align: left; font-size: 14px; line-height: 1.45; }
.credits b { font-family: var(--display); font-weight: 400; }
.howto { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-weight: 600; align-items: center; }
.howto kbd { font: 800 13px var(--ui); background: #fff; border: 2px solid var(--ink); border-radius: 7px; padding: 2px 7px; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }

/* ---------- transitions ---------- */
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; }
#flash.on { animation: flash .22s ease-out; }
@keyframes flash { from { opacity: .45; } to { opacity: 0; } }
#wipe { position: fixed; inset: 0; pointer-events: none; z-index: 30; background-color: var(--hot);
  background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.18) 0 18px, transparent 19px), radial-gradient(circle at 75% 75%, rgba(255,255,255,.18) 0 18px, transparent 19px);
  background-size: 90px 90px; clip-path: circle(0% at 50% 50%); }
#wipe.close { animation: wipeclose .38s cubic-bezier(.6, 0, .9, .5) forwards; }
#wipe.open { animation: wipeopen .45s cubic-bezier(.1, .5, .4, 1) forwards; }
@keyframes wipeclose { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes wipeopen { from { clip-path: circle(75% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }

@media (prefers-reduced-motion: reduce) { #logo span, #logo .crown, .load-logo, .load-paw { animation: none !important; } }
body.reduced #logo span, body.reduced #logo .crown { animation: none !important; }

/* ---------- online: coins badge, matchmaking ---------- */
#coins { position: fixed; top: 14px; right: 14px; z-index: 12; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px;
  background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink);
  font-family: var(--display); font-size: 24px; }
#coins small { font-family: var(--ui); font-weight: 800; font-size: 12px; opacity: .6; }
#coins.bump { animation: coinbump .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes coinbump { 40% { transform: scale(1.25) rotate(-4deg); } }
.coin { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, var(--yellow) 45%, #e9a400);
  border: 3px solid var(--ink); position: relative; display: inline-block; }
.coin::after { content: ''; position: absolute; inset: 5px 9px; border-radius: 3px; background: rgba(43, 35, 80, .25); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin: 4px 0 10px; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: #bbb; display: inline-block; }
.status.ok i { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46, 204, 113, .25); }
.status.bad i { background: var(--hot); }
.searching { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }
.searching span { width: 34px; height: 34px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ff6fb5' stroke='%232b2350' stroke-width='3'%3E%3Cellipse cx='32' cy='42' rx='15' ry='12'/%3E%3Ccircle cx='14' cy='26' r='6'/%3E%3Ccircle cx='25' cy='15' r='6'/%3E%3Ccircle cx='39' cy='15' r='6'/%3E%3Ccircle cx='50' cy='26' r='6'/%3E%3C/g%3E%3C/svg%3E");
  animation: hop .5s ease-in-out infinite alternate; }
.searching span:nth-child(2) { animation-delay: .15s; } .searching span:nth-child(3) { animation-delay: .3s; }
.code { font-family: var(--display); font-size: 64px; letter-spacing: .18em; color: var(--hot); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); margin: 6px 0; }
.codein { font: 400 44px var(--display); width: 220px; text-align: center; letter-spacing: .2em; text-transform: uppercase; padding: 6px;
  border: 4px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); }
.err { color: var(--hot); font-weight: 800; min-height: 1.2em; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0; }
.vs .side { background: #ece3ff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 6px; animation: rowin .4s cubic-bezier(.3, 1.5, .5, 1) both; }
.vs .side.me { background: var(--yellow); }
.vs .side b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; }
.vs .side small { font-weight: 700; opacity: .7; text-transform: capitalize; }
.vs .x { font-family: var(--display); font-size: 40px; color: var(--hot); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.pot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 26px; background: var(--ink); color: var(--yellow);
  padding: 6px 18px; border-radius: 999px; }
.online-btn { background: var(--yellow) !important; }
#link { position: fixed; top: 116px; left: 14px; z-index: 5; font: 800 11px var(--ui); letter-spacing: .08em; padding: 4px 10px; border-radius: 999px;
  background: rgba(43, 35, 80, .55); border: 2px solid rgba(255, 255, 255, .8); color: #fff; }
#link.ok { background: #2ecc71; color: var(--ink); border-color: var(--ink); }

/* ---------- short landscape phones (~410 CSS px tall) ---------- */
@media (max-height: 520px) {
  .panel { padding: 10px 16px 12px; border-width: 4px; border-radius: 20px; box-shadow: 0 6px 0 var(--ink); max-height: calc(100vh - 70px); }
  #screen { padding: 8px; }
  #screen.side { align-items: flex-start; padding-top: 62px; }
  .panel h1 { font-size: 30px; }
  .panel h2 { margin-bottom: 6px; font-size: 13px; }
  .panel p { font-size: 14px; margin: 4px 0; }
  .panel .label { margin: 4px 0 2px; font-size: 11px; }
  .pets { grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 4px 0 8px; }
  .pets button { padding: 5px 1px; font-size: 11px; border-radius: 9px; }
  .big { font-size: 19px; padding: 8px 18px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .small { font-size: 13px; padding: 6px 11px; box-shadow: 0 3px 0 var(--ink); }
  .row { margin-top: 5px; gap: 6px; }
  .col { gap: 6px; }
  .keys, .ver { margin-top: 6px; font-size: 11px; }
  #coins { top: 8px; right: 10px; font-size: 18px; padding: 3px 12px 3px 5px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .coin { width: 22px; height: 22px; }
  #logo { top: 4vh; left: 4vw; }
  #logo .w1 { font-size: clamp(44px, 9vw, 96px); }
  #logo .w2 { font-size: clamp(30px, 6vw, 64px); }
  #logo .crown { width: 64px; }
  .vs { margin: 6px 0; } .vs .side { padding: 6px 4px; } .vs .x { font-size: 30px; }
  .pot { font-size: 19px; padding: 4px 14px; }
  .code { font-size: 46px; } .codein { font-size: 32px; width: 180px; }
  .searching { margin: 8px 0; } .searching span { width: 26px; height: 26px; }
  #card { padding: 12px 18px 14px; } #card h2 { font-size: 38px; } #card p { font-size: 14px; }
  .list .r { padding: 3px 8px; } .list { gap: 3px; }
}

/* ---------- mascot editor (src/editor.js) + the title menu's mascot summary ---------- */
.mascot-sum { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 10px; }
.mascot-sum .who { text-align: left; min-width: 0; }
.mascot-sum .label { margin: 0 0 2px; }
.mascot-sum b { display: flex; align-items: center; gap: 6px; font: 400 24px var(--display); text-transform: capitalize; white-space: nowrap; }
.mascot-sum small { display: block; font-weight: 700; font-size: 13px; opacity: .7; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.mascot-sum .dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); display: inline-block; flex: none; }
.mascot-btn { background: var(--pink) !important; }
.panel.ed { width: min(470px, 94vw); padding: 14px 16px; }
.ed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ed-head h1 { margin: 0; font-size: 36px; }
.ed-head h2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.ed-body { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin-top: 8px; text-align: left; }
.ed-tabs { display: flex; flex-direction: column; gap: 4px; }
.ed-tabs button { font: 800 14px var(--ui); padding: 7px 9px; border-radius: 11px; border: 3px solid transparent; background: #ece3ff; color: var(--ink);
  cursor: pointer; text-align: left; transition: transform .1s, background .12s; }
.ed-tabs button:hover, .ed-tabs button:focus-visible { background: #fff; border-color: var(--ink); transform: translateX(2px); }
.ed-tabs button.sel { background: var(--yellow); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ed-pane { min-height: 250px; max-height: 50vh; overflow: auto; padding: 3px 4px 6px; }
.ed-pane .pets { grid-template-columns: repeat(4, 1fr); margin: 0; }
.ed-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-opts button { font: 700 13px var(--ui); padding: 12px 4px; border-radius: 12px; border: 3px solid transparent; background: #ece3ff; color: var(--ink);
  cursor: pointer; line-height: 1.15; transition: transform .12s, background .12s; }
.ed-opts button:hover, .ed-opts button:focus-visible { transform: translateY(-2px) rotate(-1deg); background: #fff; border-color: var(--ink); }
.ed-opts button.sel { background: var(--yellow); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ed-sw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 12px; }
.ed-sw button { aspect-ratio: 1; min-height: 30px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; padding: 0; transition: transform .1s; }
.ed-sw button:hover, .ed-sw button:focus-visible { transform: scale(1.1); }
.ed-sw button.sel { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--ink); transform: scale(1.06); }
.ed-sw .nat { background: linear-gradient(135deg, #fff 0 44%, var(--hot) 44% 56%, #fff 56%); }
.ed-range { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; font-weight: 700; font-size: 14px; }
.ed-range input { width: 100%; accent-color: var(--hot); height: 26px; }
.ed-size { grid-template-columns: auto 1fr auto; margin-top: 30px; }
.ed-hue { -webkit-appearance: none; appearance: none; height: 16px !important; border-radius: 999px; border: 3px solid var(--ink);
  background: linear-gradient(90deg, #ff4f4f, #ffd23f, #7ef0a8, #37c8f5, #3f6dff, #d35cff, #ff4f4f); }
.ed-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); cursor: pointer; }
.ed-hue::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); cursor: pointer; }
.ed-name { font: 400 26px var(--display); width: 100%; padding: 6px 12px; border: 4px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink);
  user-select: text; -webkit-user-select: text; margin-top: 6px; }
.ed-foot { align-items: center; margin-top: 10px; }
.ed-foot .big { margin-left: auto; }

/* short landscape phones (~410 CSS px tall): narrower panel so the podium hero keeps the left of the screen */
@media (max-height: 520px) {
  .mascot-sum { margin: 0 0 6px; gap: 10px; }
  .mascot-sum b { font-size: 18px; } .mascot-sum small { font-size: 11px; max-width: 180px; }
  .panel.ed { width: min(440px, 56vw); padding: 8px 12px 10px; }
  .ed-head h1 { font-size: 24px; } .ed-head h2 { font-size: 12px; }
  .ed-body { grid-template-columns: 84px 1fr; gap: 8px; margin-top: 4px; }
  .ed-tabs { gap: 3px; }
  .ed-tabs button { font-size: 12px; padding: 4px 7px; border-width: 2px; border-radius: 9px; }
  .ed-tabs button.sel { box-shadow: 0 2px 0 var(--ink); }
  .ed-pane { min-height: 0; max-height: calc(100vh - 186px); }
  .ed-pane .pets button { padding: 5px 1px; font-size: 11px; }
  .ed-opts { gap: 4px; } .ed-opts button { padding: 8px 3px; font-size: 12px; border-width: 2px; }
  .ed-sw { gap: 5px; margin-bottom: 8px; } .ed-sw button { min-height: 24px; border-width: 2px; }
  .ed-range { gap: 6px 8px; font-size: 12px; } .ed-size { margin-top: 16px; }
  .ed-name { font-size: 20px; padding: 4px 8px; border-width: 3px; }
  .ed-foot { margin-top: 6px; }
}

/* narrower phones (18:9 at ~393 CSS px tall): keep the panel to the right half so the logo and podium hero show */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  #screen.side .panel { width: min(540px, 54vw); }
  #logo .w1 { font-size: clamp(40px, 8vw, 90px); }
  #logo .w2 { font-size: clamp(28px, 5.4vw, 60px); }
}