/* ===== Meow Battle · royal skin for the home (maroon, polished gold, royal blue). Painted pieces from Seedream in ui/h_*.webp; all text stays live ===== */
:root { --r-gold: #f3d48a; --r-gold2: #ffe7a8; --r-ink: #3d1f04; --r-cream: rgba(246, 236, 214, .78); }

/* logo */
#logoBox { width: 420px !important; left: 64px !important; top: 40px !important; }
.mb-rlogo { position: relative; width: 420px; aspect-ratio: 1100 / 558; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .75)); }
.mb-rlogo img { display: block; width: 100%; height: 100%; }
.mb-rlogo .sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(h_logo.webp) center / 100% 100% no-repeat; mask: url(h_logo.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 250, 225, .85) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: screen; animation: rSheen 6.5s ease-in-out 1.5s infinite; }
@keyframes rSheen { 0%, 55% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

/* PLAY: the gold plaque with two rubies */
#menu { top: 300px !important; }
.mb-playbtn { width: 452px; height: auto; aspect-ratio: 1100 / 277; padding: 0 74px 6px 86px; border-radius: 0; overflow: visible; background: url(h_play.webp) center / 100% 100% no-repeat; box-shadow: none;
  color: var(--r-ink); font: 900 44px/1 Cinzel, Georgia, serif; letter-spacing: .16em; text-shadow: 0 1px 0 rgba(255, 244, 210, .8), 0 -1px 0 rgba(90, 50, 10, .35); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.mb-playbtn span { padding-top: 4px; }
.mb-playbtn::after { top: 0; bottom: 0; left: 0; width: 100%; transform: none; -webkit-mask: url(h_play.webp) center / 100% 100% no-repeat; mask: url(h_play.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 235, .9) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: screen; animation: rSheen 4.2s ease-in-out 1.6s infinite; }
.mb-playbtn:hover { transform: translateX(6px) scale(1.02); box-shadow: none; filter: brightness(1.1) drop-shadow(0 12px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 205, 110, .45)); }
.mb-playbtn:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 4px; }

/* menu rows: painted gold icon, engraved serif title, italic subtitle */
.mb-mib { height: 74px; gap: 18px; padding: 0 18px; border-radius: 0; }
.mb-mib .mb-ic { flex: none; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s; }
.mb-mib b { font: 700 22px/1 Cinzel, Georgia, serif; letter-spacing: .12em; color: var(--r-gold); background: linear-gradient(180deg, #fff3c4 10%, #f0c769 55%, #b8812e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .85)); }
.mb-mib small { margin-top: 7px; font: italic 400 15px/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; color: var(--r-cream); text-shadow: 0 1px 3px #000; }
.mb-mib:hover { background: linear-gradient(90deg, rgba(120, 18, 42, .62), rgba(120, 18, 42, .18) 70%, rgba(120, 18, 42, 0)); box-shadow: inset 3px 0 0 #e8c063; }
.mb-mib:hover .mb-ic { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(255, 210, 120, .55)); }
.mb-mib.mb-soon .mb-ic { filter: grayscale(.6) brightness(.55); }
.mb-mib.mb-soon b { opacity: .5; } .mb-mib.mb-soon small { opacity: .55; }
.mb-mib.mb-soon:hover { background: transparent; box-shadow: none; }
.mb-mib.mb-soon:hover .mb-ic { transform: none; filter: grayscale(.6) brightness(.55); }
.mb-mib:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 2px; }

/* tags: NEW on a maroon ribbon, COMING SOON / SOON on a dark gold-rimmed plate */
.mb-new { height: 28px; padding: 1px 22px 0 12px; border-radius: 0; background: url(h_tag_new.webp) center / 100% 100% no-repeat; box-shadow: none; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .16em; color: #ffe7a8; text-shadow: 0 1px 2px rgba(40, 0, 10, .9); }
.mb-new .d { display: none; }
#vids .mc-tile > .mb-new { height: 32px; padding: 1px 26px 0 14px; font-size: 14px; }
.mb-mib i, .mb-cs { height: 28px; display: inline-flex; align-items: center; padding: 1px 16px 0; border-radius: 0; background: url(h_tag_soon.webp) center / 100% 100% no-repeat; box-shadow: none; font: 700 10px/1 Cinzel, Georgia, serif; font-style: normal; letter-spacing: .18em; color: #f3d48a; }
.mb-cs::after { display: none; }

/* top bar: maroon pills with gold rims (9-slice so the ends never stretch) */
.mb-wallet, #topR .mb-me, .sh-fs { height: 50px !important; padding: 0 26px 0 22px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-image: url(h_pill.webp) 0 74 fill / 0 25px / 0 stretch !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); color: #fbefd5 !important; font: 700 13px/1 Cinzel, Georgia, serif !important; letter-spacing: .14em !important; text-shadow: 0 1px 2px rgba(40, 0, 10, .9); transition: transform .2s, filter .2s; }
.mb-wallet svg, .sh-fs svg { color: var(--r-gold); }
#topR .mb-me { padding-left: 16px !important; gap: 10px !important; }
#topR .mb-me .av { width: 32px !important; height: 32px !important; }
#topR .mb-me .nm { font: 700 13px/1 Cinzel, Georgia, serif !important; letter-spacing: .12em !important; color: #fbefd5 !important; }
#topR .mb-me .av { border-radius: 7px !important; box-shadow: 0 0 0 2px #2a0810, 0 0 0 3.5px #d9a84e !important; }
.mb-wallet:hover, #topR .mb-me:hover, .sh-fs:hover { transform: translateY(-1px); box-shadow: none !important; filter: brightness(1.15) drop-shadow(0 8px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 200, 110, .35)); }
.sh-fs kbd { border-radius: 4px; background: linear-gradient(180deg, #ffe7a8, #c9933c); color: #3d1f04; box-shadow: none; }
.sh-fs::after { display: none; }
#topR .mb-iconbtn { width: 50px; height: 50px; border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--r-gold); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .2s, filter .2s; }
#topR .mb-iconbtn:hover { color: #fff3c4; box-shadow: none; transform: translateY(-1px) rotate(8deg); filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 200, 110, .35)); }

/* replay intro + footer */
#replay.mb-btn { height: 46px; padding: 0 26px 0 22px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-image: url(h_pill_o.webp) 0 70 fill / 0 23px / 0 stretch; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .16em; color: var(--r-gold); }
#replay.mb-btn:hover { color: #fff3c4; box-shadow: none; filter: drop-shadow(0 0 12px rgba(255, 200, 110, .35)); }
.sh-legal button { font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .18em; color: rgba(243, 212, 138, .75); }
.sh-legal i { border-radius: 0; transform: rotate(45deg); background: rgba(232, 192, 99, .6); }
.sh-age { border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none !important; font: 700 12px/1 Cinzel, Georgia, serif; color: #fbefd5; }
.sh-soc a { width: 46px; height: 46px; border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none !important; color: var(--r-gold); }
.sh-soc a:hover { box-shadow: none !important; color: #fff3c4; filter: drop-shadow(0 0 12px rgba(255, 200, 110, .4)); }
.sh-soc em { font: 700 10px/1.3 Cinzel, Georgia, serif; letter-spacing: .18em; color: rgba(243, 212, 138, .85); }
.sh-copy { font: 400 11px/1 Georgia, serif; letter-spacing: .1em; color: rgba(243, 212, 138, .38); }

/* the left side reads on a deeper shade of the painting */
#stage .mb-shade-l { display: none; }
@media (prefers-reduced-motion: reduce) { .mb-rlogo .sheen, .mb-playbtn::after { animation: none; } }
/* tags sit right after the text, out of the painting's way */
.mb-mib > .mb-new, .mb-mib i, .mb-mib .mb-cs { margin-left: 14px !important; }

/* ---------- side tiles: slim royal frames (painted whole, 9-slice so the corners never stretch) ---------- */
#vids { gap: 30px; top: 258px; }
#vids .tclip, #vids :is(.mc-tile, .hw-tile) .tclip img { border-radius: 3px; }
#vids .tframe { inset: -12px; border: 30px solid transparent; border-image: url(../hw/fr_e1.webp) 100 / 30px / 0 stretch; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); transition: filter .3s; }
#vids .tframe img.tfi, #vids .tfl { display: none; }
#vids :is(.mc-tile, .hw-tile)::after { box-shadow: none; }
#vids :is(.mc-tile, .hw-tile):hover::after { box-shadow: 0 0 34px rgba(255, 196, 90, .25); }
#vids :is(.mc-tile, .hw-tile):hover .tframe { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) brightness(1.15); }
#vids .hw-gtag { position: absolute; left: 24px; top: -17px; z-index: 3; width: 112px; height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 2px 26px 0 20px; background: url(h_tag_new.webp) center / 100% 100% no-repeat;
  font: 700 12px/1 Cinzel, Georgia, serif; font-style: normal; letter-spacing: .18em; text-indent: .18em; color: #ffe7a8; text-shadow: 0 1px 2px rgba(40, 0, 10, .9); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); pointer-events: none; }
#vids .mc-soon { right: 26px; top: 20px; height: 28px; display: inline-flex; align-items: center; padding: 1px 16px 0; border-radius: 0; background: url(h_tag_soon.webp) center / 100% 100% no-repeat; box-shadow: none;
  font: 700 10px/1 Cinzel, Georgia, serif; letter-spacing: .2em; color: #f3d48a; }

/* ---------- settings: velvet panel in a gold frame ---------- */
.sh-set { width: 440px; padding: 4px 8px 0; border: 34px solid transparent; border-radius: 0; border-image: url(r_panel.webp) 100 fill / 34px / 0 stretch;
  background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .7)); top: 70px; right: -14px; }
.sh-set::before { display: none; }
.sh-set .sh-hd { margin: -6px 0 12px; }
.sh-hd h3 { font: 700 23px/1 Cinzel, Georgia, serif; letter-spacing: .16em; background: linear-gradient(180deg, #fff6d8 8%, #f3cf7d 50%, #b98432 95%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 2px rgba(30, 0, 8, .8)); }
.sh-x { width: 36px; height: 36px; border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none; color: #f3d48a; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.sh-x:hover { box-shadow: none; transform: none; color: #fff3c9; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)) brightness(1.2); }
.sh-sec { font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .3em; color: #e9c574; }
.sh-sec::after { background: linear-gradient(90deg, rgba(233, 197, 116, .55), rgba(233, 197, 116, 0)); }
.sh-row { grid-template-columns: 36px 118px 1fr 42px; height: 48px; }
.sh-ic { border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none; color: #f3d48a; }
.sh-ic:hover { box-shadow: none; filter: brightness(1.2); }
.sh-row.muted .sh-ic { color: #8a6a7a; box-shadow: none; filter: saturate(.4); }
.sh-nm { font: 700 13px/1.1 Cinzel, Georgia, serif; letter-spacing: .06em; color: #fbefd5; }
.sh-nm small { margin-top: 4px; font: italic 400 11.5px/1 Georgia, serif; letter-spacing: .01em; color: rgba(243, 214, 160, .62); }
.sh-val { font: 700 12px/1 Cinzel, Georgia, serif; color: #f3d48a; }
.sh-rg { height: 30px; }
.sh-rg::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(180deg, #fff0b8, #e7b452 55%, #a8701f) 0 0 / var(--p) 100% no-repeat, #1e0610; box-shadow: inset 0 0 0 1px rgba(233, 190, 100, .55), inset 0 2px 3px rgba(0, 0, 0, .7); }
.sh-rg::-moz-range-track { height: 8px; border-radius: 4px; background: #1e0610; box-shadow: inset 0 0 0 1px rgba(233, 190, 100, .55); }
.sh-rg::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(180deg, #fff0b8, #e7b452 55%, #a8701f); }
.sh-rg::-webkit-slider-thumb { width: 28px; height: 27px; margin-top: -10px; border-radius: 0; background: url(../wl/vol_crown.webp) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.sh-rg::-moz-range-thumb { width: 28px; height: 27px; border-radius: 0; background: url(../wl/vol_crown.webp) center / contain no-repeat; box-shadow: none; }
.sh-sw { width: 54px; height: 28px; border-radius: 4px; background: #1e0610; box-shadow: inset 0 0 0 1px rgba(233, 190, 100, .6), inset 0 2px 4px rgba(0, 0, 0, .7); }
.sh-sw::after { top: 5px; left: 6px; width: 18px; height: 18px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #fff3c4, #e2ad4c 55%, #8a5a1c); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.sh-sw[aria-checked="true"] { background: linear-gradient(90deg, #6b1426, #a8243c); }
.sh-sw[aria-checked="true"]::after { transform: translateX(24px) rotate(45deg); }
.sh-links button, .sh-links a { height: 38px; border-radius: 0; background: none; box-shadow: none; border: 0 solid transparent; border-image: url(h_pill_o.webp) 0 70 fill / 0 19px / 0 stretch;
  font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .14em; color: #f3d48a; }
.sh-links :is(button, a):hover { box-shadow: none; color: #fff3c9; filter: brightness(1.2); }
.sh-ver { margin: 14px 0 -4px; font: 700 9.5px/1 Cinzel, Georgia, serif; letter-spacing: .3em; color: rgba(243, 214, 160, .4); }

/* ---------- wallet: velvet panel, gold title in code, gold / sapphire plaques ---------- */
.sh-wbox { width: min(600px, calc(100vw - 32px)); border-width: 46px; border-image: var(--fr) 100 fill / 46px / 0 stretch; padding: 8px 14px 4px; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .75)); }
.sh-wt { margin: 4px 0 20px; font: 700 40px/1 Cinzel, Georgia, serif; letter-spacing: .1em; color: transparent; background: linear-gradient(180deg, #fff6d8 8%, #f3cf7d 50%, #b98432 95%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 3px rgba(30, 0, 8, .85)); }
.sh-wx { right: -14px; top: -14px; width: 42px; height: 42px; border-radius: 0; background: url(h_sq.webp) center / 100% 100% no-repeat; box-shadow: none; color: #f3d48a; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.sh-wx:hover { transform: none; color: #fff3c9; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)) brightness(1.2); }
.sh-bal { border-radius: 4px; background: linear-gradient(180deg, rgba(20, 2, 8, .55), rgba(20, 2, 8, .35)); box-shadow: inset 0 0 0 1px rgba(233, 190, 100, .55), inset 0 0 0 4px rgba(30, 4, 12, .6), inset 0 0 0 5px rgba(233, 190, 100, .2); }
.sh-bal small, .sh-addr small { font: 700 11.5px/1 Cinzel, Georgia, serif; letter-spacing: .24em; color: #e9c574; }
.sh-bal em { height: 26px; display: inline-flex; align-items: center; padding: 1px 14px 0; border-radius: 0; background: url(h_tag_soon.webp) center / 100% 100% no-repeat; box-shadow: none; font: 700 10px/1 Cinzel, Georgia, serif; letter-spacing: .2em; color: #f3d48a; }
.sh-addr .box { border-radius: 4px; background: rgba(20, 2, 8, .5); box-shadow: inset 0 0 0 1px rgba(233, 190, 100, .4); }
.sh-addr .box button { border-radius: 3px; font-family: Cinzel, Georgia, serif; }
.sh-addr p { color: rgba(246, 230, 205, .7); }
.sh-wbtn { gap: 18px; margin-top: 6px; }
.sh-ib { height: 62px; aspect-ratio: 1100 / 277; display: grid; place-items: center; padding: 0 0 4px; font: 700 19px/1 Cinzel, Georgia, serif; letter-spacing: .14em; background: var(--m) center / 100% 100% no-repeat; }
.sh-ib.dep { color: #3a1a04; text-shadow: 0 1px 0 rgba(255, 240, 200, .55); }
.sh-ib.wd { aspect-ratio: 1100 / 257; color: #fff3d6; text-shadow: 0 2px 3px rgba(0, 10, 40, .8); }
.sh-ib:focus-visible { border-radius: 4px; }
.sh-wnote { border-top-color: rgba(233, 190, 100, .25); color: rgba(246, 230, 205, .7); }