/* The painted UI (20 Oct 2026, not live yet): only applies when js/art.js sets html.ui2 (open the app with ?ui=2).
   Direction (UI UX Pro Max): claymorphism for children: soft 3D clay art, chunky rounded panels, double soft shadows,
   one calm painted wallpaper behind everything; the art sits on the things themselves, the chrome stays clean. */

/* painted art drawn where emoji used to be: sized by the surrounding font-size, like the emoji were */
.art { width: 1em; height: 1em; object-fit: contain; display: inline-block; vertical-align: -0.15em; -webkit-user-drag: none; user-select: none; }

/* ---------- wallpaper ---------- */
html.ui2 body { background: #1b1446; }
html.ui2 body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 10, 40, .15), rgba(14, 10, 40, .55) 60%, rgba(14, 10, 40, .75)), url(../art/bg/wall_wide.webp) center top / cover no-repeat, #1b1446; }
@media (orientation: portrait) and (max-width: 900px) {
  html.ui2 body::before { background: linear-gradient(180deg, rgba(14, 10, 40, .1), rgba(14, 10, 40, .55) 55%, rgba(14, 10, 40, .78)), url(../art/bg/wall_tall.webp) center top / cover no-repeat, #1b1446; }
}
html.ui2 #stars { opacity: .5; }

/* ---------- clay surfaces ---------- */
html.ui2 {
  --clay-shadow: 0 10px 24px rgba(6, 4, 24, .45), inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .22);
  --clay-panel: rgba(38, 32, 104, .86);
}
html.ui2 .panel, html.ui2 .topbar, html.ui2 .qbox, html.ui2 .modal .box, html.ui2 .node, html.ui2 .hero-card {
  border-radius: 24px; box-shadow: var(--clay-shadow);
}
html.ui2 .panel, html.ui2 .topbar { background: var(--clay-panel); border-color: rgba(255, 255, 255, .12); }
html.ui2 .node { background: rgba(38, 32, 104, .9); }
html.ui2 .btn { border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .15); }
html.ui2 .btn:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .25); }
html.ui2 .iconbtn { border-radius: 14px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .2); }

/* ---------- subject worlds: the painting is the star ---------- */
html.ui2 .portal { border-radius: 26px; box-shadow: 0 10px 0 rgba(0, 0, 0, .3), 0 18px 30px rgba(6, 4, 24, .35), inset 0 3px 0 rgba(255, 255, 255, .3); }
html.ui2 .portal .ico .art { width: 1.5em; height: 1.5em; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
html.ui2 .portal:hover .ico .art { transform: translateY(-4px) rotate(-3deg); transition: transform .2s; }
html.ui2 .raid .ico .art { width: 1.4em; height: 1.4em; }
html.ui2 .maphead h2 .art { width: 1.2em; height: 1.2em; }
html.ui2 .hwi .art { width: 1.6em; height: 1.6em; }

/* ---------- hero, pet, weapon, shield ---------- */
html.ui2 .herofig .hb .art { width: 1.25em; height: 1.25em; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .35)); }
html.ui2 .herofig .sprite { filter: none; }
html.ui2 .herofig .hw .art { width: 1.1em; height: 1.1em; }
html.ui2 .herofig .hw { right: -.5em; bottom: .1em; transform: rotate(-12deg); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
html.ui2 .herofig .pet .art { width: 1.2em; height: 1.2em; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .3)); }
.armour-art { position: absolute; z-index: 1; width: 82%; top: 0; left: 50%; transform: translateX(-50%); opacity: .95; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .25)); }
.armour-art .art { width: 100%; height: auto; aspect-ratio: 1; }
html.ui2 #foe .art { width: 1.25em; height: 1.25em; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .35)); }
html.ui2 .fx-half .art, html.ui2 .fx-ghost .art { width: 1.25em; height: 1.25em; }

/* ---------- profile pictures fill their round frame ---------- */
html.ui2 .pfp { overflow: hidden; }
html.ui2 .pfp .art { width: 100%; height: 100%; object-fit: cover; vertical-align: top; }

/* ---------- trophies and rewards ---------- */
html.ui2 .badge .art { width: 1.4em; height: 1.4em; }
html.ui2 .badge:not(.on) .art { filter: grayscale(1) brightness(.55); }
html.ui2 .stat .art { width: 1.15em; height: 1.15em; }

/* ---------- hero builder ---------- */
html.ui2 .bitem .look .art { width: 1.25em; height: 1.25em; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)); }
html.ui2 .bitem .look .pfp .art { width: 100%; height: 100%; }
html.ui2 .bitem { border-radius: 20px; box-shadow: var(--clay-shadow); }

/* ---------- painted arenas (the CSS gradient stays underneath if a picture is missing) ---------- */
html.ui2 .ar-classic { background: url(../art/arena/classic.webp) center / cover, radial-gradient(ellipse at 50% 120%, #2d3580, #0d1030 70%); }
html.ui2 .ar-forest { background: url(../art/arena/forest.webp) center / cover, linear-gradient(#1b4332, #40916c); }
html.ui2 .ar-beach { background: url(../art/arena/beach.webp) center / cover, linear-gradient(#48cae4 0 55%, #ffe8a3 55%); }
html.ui2 .ar-snow { background: url(../art/arena/snow.webp) center / cover, linear-gradient(#a2d2ff, #ffffff); }
html.ui2 .ar-castle { background: url(../art/arena/castle.webp) center / cover, linear-gradient(#5a189a, #6c757d); }
html.ui2 .ar-ocean { background: url(../art/arena/ocean.webp) center / cover, linear-gradient(#0077b6, #03045e); }
html.ui2 .ar-city { background: url(../art/arena/city.webp) center / cover, linear-gradient(#10002b, #3c096c); }
html.ui2 .ar-volcano { background: url(../art/arena/volcano.webp) center / cover, linear-gradient(#370617, #dc2f02); }
html.ui2 .ar-space { background: url(../art/arena/space.webp) center / cover, radial-gradient(ellipse at 30% 60%, #3a0ca3, #03001c 70%); }
/* names and hearts stay readable over a busy painted arena */
html.ui2 .arena .label, html.ui2 .arena .vs, html.ui2 .arena .muted { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .5); }
html.ui2 .arena.themed { box-shadow: var(--clay-shadow); }
html.ui2 .arsw { background-size: cover !important; }
@media (prefers-reduced-motion: reduce) { html.ui2 .portal:hover .ico .art { transform: none; } }
/* sizing after the first look (20 Oct): heroes bigger, the shield a halo behind them, shop pictures bigger */
html.ui2 .arena .herofig .hb .art, html.ui2 .herocard .herofig .hb .art { width: 1.55em; height: 1.55em; }
html.ui2 .arena #foe .art { width: 1.6em; height: 1.6em; }
html.ui2 .armour-art { width: 70%; top: 4%; opacity: .85; }
html.ui2 .bitem .look { height: 72px; }
html.ui2 .bitem .look .art { width: 1.65em; height: 1.65em; }
html.ui2 .bitem .look .pfp { font-size: 34px; }

html.ui2 .ar-founder { background: url(../art/arena/founder.webp) center / cover, linear-gradient(160deg, #1a0b3d, #3c1a78 45%, #0b4f6c 75%); }
html.ui2 .pfp.fr-founder { overflow: visible; }
html.ui2 .herofig .hw.hw-rgb .art { width: 1.6em; height: 1.6em; filter: drop-shadow(0 0 8px #fff); }
html.ui2 .herofig .hw.hw-rgb { right: -.85em; bottom: -.1em; }