/* My Mini Cat Online - styles. Reuses the site's tokens (--coral, --mint, --sky, --lilac, --shadow, --radius...) and components
 * (.card, .bigbtn, .tile, .grid, .gcat, .stage, .actions/.act, .meter, .chip, .say, .thought). Only adds what is new. */
.gold-b { background: linear-gradient(135deg, #FFD54F, #FFA552); }

/* long names (up to 100 characters): smaller font for long names, max 3 lines then "…", tap to unfold */
.on-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
  max-width: 100%; text-align: center; cursor: pointer; border-radius: 10px; outline-offset: 2px; line-height: 1.15; max-height: calc(3 * 1.15em); }
.on-name.n-m { font-size: .9em; } .on-name.n-l { font-size: .78em; } .on-name.n-xl { font-size: .68em; }
.on-name.open { -webkit-line-clamp: unset; line-clamp: unset; display: block; max-height: none; background: #FFF6D6; padding: 0 6px; }
.on-name.tname { font-size: 22px; font-weight: 700; padding: 0 4px; }
.on-name.tname.n-m { font-size: 18px; } .on-name.tname.n-l { font-size: 15px; } .on-name.tname.n-xl { font-size: 13px; }
.on-name.osm { font-size: 15px; -webkit-line-clamp: 2; line-clamp: 2; max-height: calc(2 * 1.15em); font-weight: 700; }
.on-name.osm.open { max-height: none; }
.on-name.obig { font-size: 28px; } .on-name.obig.n-l { font-size: 22px; } .on-name.obig.n-xl { font-size: 18px; }
.on-name.pname { -webkit-line-clamp: 1; line-clamp: 1; max-height: 1.15em; font-size: inherit; }
.on-name.pname.open { background: transparent; padding: 0; max-height: 30vh; overflow: auto; }
/* hub */
.on-hub { text-align: center; }
.on-title { margin: 6px 0 8px; }
.on-mascots { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px auto 16px; max-width: 760px; }
.on-mascots .on-m { width: clamp(90px, 18vw, 150px); height: auto; filter: drop-shadow(0 8px 14px rgba(170,100,160,.22)); }
.on-mascots .bubble { flex: 1; text-align: start; }
.on-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 960px; margin: 0 auto 18px; }
@media (max-width: 760px) { .on-cards { grid-template-columns: 1fr 1fr; } .on-mascots { flex-wrap: wrap; } .on-mascots .on-m { width: 96px; } .on-mascots .bubble { order: 3; flex-basis: 100%; } }
.on-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 10px; min-height: 140px; border-radius: var(--radius);
  color: #fff; font-weight: 700; font-size: 22px; text-decoration: none; box-shadow: var(--shadow), inset 0 -6px 0 rgba(0,0,0,.12); transition: transform .15s; }
.on-big .mi { font-size: 52px; line-height: 1; }
.on-big:active { transform: scale(.95); }
.on-big.c1 { background: linear-gradient(135deg, var(--coral), var(--pink)); } .on-big.c2 { background: linear-gradient(135deg, var(--mint), #3CC0C9); }
.on-big.c3 { background: linear-gradient(135deg, #FFC93C, var(--orange)); } .on-big.c4 { background: linear-gradient(135deg, var(--sky), var(--lilac)); }
.on-safe { display: flex; gap: 14px; align-items: center; text-align: start; max-width: 760px; margin: 0 auto; border: 4px dashed #BFEFE6; }
.on-safe img { width: 92px; height: auto; flex: none; }
.on-safe h3 { margin: 0 0 4px; } .on-safe p { margin: 0; font-size: 18px; }
.on-safe-short { text-align: center; color: var(--ink-soft); font-size: 16px; margin: 18px auto 0; max-width: 640px; }

/* section heads */
.on-vhead { justify-content: flex-start; }
.on-vhead h2 { flex: 1; }
.on-back { text-decoration: none; font-size: 20px; }
.on-loading { text-align: center; font-weight: 700; color: var(--ink-soft); }
.on-sorts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.on-sorts .chip { font-size: 18px; padding: 8px 16px; }
.on-sorts .chip.on { background: linear-gradient(135deg, #FFE27A, #FFB86B); }
.on-note { color: var(--ink-soft); font-size: 17px; margin: 4px 0 10px; }
.on-kicker { display: block; font-weight: 700; color: var(--ink-soft); font-size: 16px; }
.on-h3 { margin: 22px 0 10px; font-size: 26px; }

/* gallery tiles */
.on-tile { position: relative; padding: 8px 8px 6px; }
.on-tile .stage { padding: 0; cursor: pointer; display: block; }
.on-tilebar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; flex-wrap: wrap; }
.on-sub { font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.on-heart { display: inline-flex; align-items: center; gap: 6px; background: #FFF0F5; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 20px; min-height: 48px;
  box-shadow: 0 3px 8px rgba(170,100,160,.15); transition: transform .15s; }
.on-heart .hi { font-size: 26px; line-height: 1; }
.on-heart.on { background: linear-gradient(135deg, #FFD1E0, #FFB3CF); }
.on-heart.obig { font-size: 26px; min-height: 64px; padding: 10px 24px; } .on-heart.obig .hi { font-size: 34px; }
.on-heart.pop .hi { animation: boop .5s cubic-bezier(.2,1.6,.4,1); }
.on-heart:active { transform: scale(.92); }
.on-rank { position: absolute; top: -10px; left: -6px; z-index: 3; font-size: 34px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.on-rank.num { top: -8px; left: -4px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 20px; font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow); filter: none; }
.ranked .gold-badge { left: 40px; }
.on-mine { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.92); border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.on-grid.one { grid-template-columns: minmax(0, 260px); }
.on-grid.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* golden skin */
.golden .stage { position: relative; }
.gcat.golden { background: linear-gradient(160deg, #FFF6CF, #FFE08A 55%, #FFF2B8); box-shadow: 0 0 0 4px #FFD54F, 0 10px 30px rgba(230,170,30,.35); }
.gold-badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: linear-gradient(135deg, #FFE27A, #F5B800); color: #6B4A00; font-weight: 700; font-size: 15px;
  padding: 3px 12px; border-radius: 999px; box-shadow: 0 3px 8px rgba(200,140,0,.35); }
canvas.gold-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.on-card { position: relative; }
.on-card .stage { margin-top: 6px; }
.on-card h3 { margin: 10px 0 6px; }
.on-card.golden .stage { border-color: #FFD54F; box-shadow: 0 0 0 4px #FFE9A0, 0 0 40px rgba(255,200,60,.55); }
.gold-ribbon { display: inline-block; background: linear-gradient(135deg, #FFE27A, #F5B800); color: #6B4A00; font-weight: 700; padding: 6px 18px; border-radius: 999px; font-size: 17px; margin-top: 30px; }
.on-ask { width: 100%; margin: 0; font-weight: 700; font-size: 22px; }
.on-report { font-size: 18px !important; min-height: 56px !important; }

/* Golden Skin Pack inside the dress-up step */
.gold-pack { margin-top: 16px; padding: 12px; border-radius: 24px; background: linear-gradient(160deg, #FFF8DC, #FFEBA8); border: 3px solid #FFD54F; }
.gold-pack h3 { margin: 0 0 8px; font-size: 22px; color: #8A5A00; }
.gold-pack .tile { position: relative; overflow: hidden; }
.gold-pack .gold-tile { background: linear-gradient(160deg, #FFFBEA, #FFE7A0); }
.gold-pack.locked .gold-tile .mini { filter: saturate(.75) brightness(.92); }
.gold-pack .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; background: rgba(255,255,255,.35); z-index: 3; }
.gold-hint { margin: 8px 0 0; font-weight: 700; color: #8A5A00; font-size: 17px; }
.shake { animation: shake .5s; }

/* contests */
.on-theme { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; background: linear-gradient(135deg, #FFF3D6, #FFE1EC); }
.on-theme-ic { font-size: 72px; line-height: 1; }
.on-theme > div:nth-child(2) { flex: 1; min-width: 200px; }
.on-theme-name { margin: 2px 0; font-size: clamp(26px, 4vw, 38px); }
.on-ends { margin: 0; font-weight: 600; }
.on-cod { margin-top: 18px; background: linear-gradient(160deg, #FFFBEA, #FFF0C2); }
.on-cod h3 { margin: 0; font-size: 26px; }
.on-cod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .on-cod-row { grid-template-columns: 1fr; } }
.on-poll { margin-top: 18px; }
.on-poll h3 { margin: 0 0 10px; }
.on-poll-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.on-opt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; background: #fff; border-radius: 20px; padding: 10px 14px; text-align: start;
  box-shadow: 0 3px 8px rgba(170,100,160,.15); border: 4px solid transparent; font-weight: 700; font-size: 18px; min-height: 60px; }
.on-opt .ic { font-size: 28px; grid-row: span 2; }
.on-opt .bar { height: 10px; border-radius: 999px; background: #F1E6EE; overflow: hidden; }
.on-opt .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--lilac)); }
.on-opt .ct { grid-column: 2; font-size: 14px; color: var(--ink-soft); }
.on-opt.on { border-color: var(--coral); }

/* pick a cat (modal) */
.on-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.on-pick .tile { min-width: 0; }
.on-sharedtag { font-size: 13px; color: #1E9A68; font-weight: 700; }

/* friend rooms */
.on-lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .on-lobby { grid-template-columns: 1fr; } }
.on-lob { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.on-lob img { width: 140px; height: auto; }
.on-coderow { display: flex; gap: 10px; width: 100%; justify-content: center; flex-wrap: wrap; }
.on-code-in { font: inherit; font-size: 34px; font-weight: 700; letter-spacing: 8px; text-align: center; width: 230px; max-width: 100%; padding: 10px 12px; border-radius: 22px;
  border: 4px solid #FFD1DA; text-transform: uppercase; color: var(--ink); }
.on-code-in:focus { outline: none; border-color: var(--coral); }
.on-rules { text-align: center; font-weight: 600; margin: 14px auto 0; max-width: 640px; }
.on-codebar { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -4px auto 10px; text-align: center; }
.on-code { font-size: 54px; letter-spacing: 12px; background: #fff; border-radius: 22px; padding: 4px 18px 4px 30px; box-shadow: var(--shadow); color: var(--coral); }
.on-codebar.small { flex-direction: row; gap: 10px; justify-content: center; }
.on-codebar.small .on-code { font-size: 24px; letter-spacing: 6px; padding: 2px 10px 2px 16px; }
.on-leave { font-size: 18px !important; min-height: 52px !important; padding: 8px 18px !important; }
.on-room-stage { max-width: 860px; margin: 0 auto; }
.on-seat { position: absolute; bottom: 2%; width: 44%; height: 86%; }
.on-seat.seat-a { left: 4%; } .on-seat.seat-b { right: 4%; }
.on-seat .catwrap { height: 84%; bottom: 14%; }
.on-pill { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 100%; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94);
  padding: 3px 14px; border-radius: 999px; font-weight: 700; font-size: clamp(14px, 2.2vw, 20px); box-shadow: var(--shadow); z-index: 3; white-space: nowrap; }
.on-pill .who { font-size: .75em; color: #fff; background: var(--lilac); border-radius: 999px; padding: 0 8px; flex: none; }
.on-pill.me .who { background: var(--coral); }
.on-pill .on-name { min-width: 0; }
.on-pill:has(.on-name.open) { white-space: normal; border-radius: 18px; width: 100%; }
.empty-seat { display: grid; place-items: center; }
.on-wait { font-size: 64px; background: rgba(255,255,255,.8); border-radius: 50%; width: 120px; height: 120px; display: grid; place-items: center; animation: floaty 2s ease-in-out infinite; }
.on-wish { left: 50%; right: auto; transform: translateX(-50%); top: 6%; }
.on-status { text-align: center; font-weight: 700; font-size: 26px; margin: 12px auto 8px; padding: 6px 18px; border-radius: 999px; width: fit-content; max-width: 100%; }
.on-status.mine { background: linear-gradient(135deg, var(--mint), #3CC0C9); color: #fff; animation: pulse 1.6s ease-in-out infinite; }
.on-status.theirs { background: #fff; box-shadow: var(--shadow); }
.on-status.wait { background: #FFF6D6; }
.on-jar { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 12px; background: #fff; border-radius: 20px; padding: 8px 14px; box-shadow: var(--shadow); flex-wrap: wrap; }
.on-jar .mi { font-size: 30px; }
.on-jar .bar { flex: 1; min-width: 120px; height: 18px; border-radius: 999px; background: #F1E6EE; overflow: hidden; }
.on-jar .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFD54F, #FFA552); transition: width .6s cubic-bezier(.2,1.4,.4,1); }
.on-jar .on-kicker { display: inline; }
.on-acts .act[disabled] { opacity: .45; }
.on-acts .act.wish:not([disabled]) { box-shadow: 0 0 0 4px #FFD54F, var(--shadow); }
.on-stickers { max-width: 760px; margin: 14px auto 0; text-align: center; }
.on-st-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.on-st { width: 62px; height: 62px; border-radius: 50%; background: #fff; font-size: 32px; box-shadow: var(--shadow); transition: transform .15s; }
.on-st:active { transform: scale(.88); }
.on-sticker-pop { position: absolute; top: 12%; z-index: 5; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 24px; padding: 6px 14px;
  box-shadow: var(--shadow); animation: on-pop 2.6s ease-out forwards; font-weight: 700; }
.on-sticker-pop.l { left: 14%; } .on-sticker-pop.r { right: 14%; }
.on-sticker-pop .em { font-size: 54px; line-height: 1.05; }
@keyframes on-pop { 0% { transform: scale(.3) translateY(20px); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@media (max-width: 560px) { .on-code { font-size: 40px; letter-spacing: 8px; } .on-st { width: 54px; height: 54px; font-size: 28px; } .on-status { font-size: 22px; } }