/* Murr Mall: mall scenery, skins, cats, and products */

  #app { display:flex; height:100vh; height:100dvh; }
  /* ============ СЦЕНА ============ */
  #scene {
    position:relative; flex:1; overflow:hidden; min-width:0;
    background:linear-gradient(180deg,#f2e6cc,#d8c7a8);
    cursor:default;
  }
  #scene.drag-pan { cursor:grab; user-select:none; }
  #scene.dragging, #scene.dragging * { cursor:grabbing !important; }
  .layer { position:absolute; top:0; left:0; height:100%; will-change:transform; }

  /* --- свет / витражный потолок --- */
  .sky-band {
    position:absolute; top:0; left:0; right:0; height:14%;
    background:
      radial-gradient(40% 160% at 50% 0%, rgba(255,244,214,.9), transparent 70%),
      repeating-linear-gradient(90deg, rgba(122,95,58,.35) 0 7px, transparent 7px 130px),
      linear-gradient(180deg, #fdf3da, #f3e2ba 80%, rgba(190,160,110,.45));
  }
  .sun-glow {
    position:absolute; top:-12%; width:900px; height:46%;
    background:radial-gradient(50% 60% at 50% 30%, rgba(255,236,190,.75), transparent 70%);
    filter:blur(10px);
  }

  /* --- балкон второго этажа --- */
  .b-band {
    position:absolute; top:8%; left:0; right:0; height:19%;
    background:linear-gradient(180deg, #f4e9d2, #e6d5b5 72%, rgba(60,45,28,.28) 100%);
  }
  .b-band::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:46%;
    background:repeating-linear-gradient(90deg, rgba(74,60,44,.5) 0 5px, transparent 5px 30px);
    border-top:6px solid #5d4b36; border-bottom:4px solid #453723;
  }
  .b-plant {
    position:absolute; width:90px; height:44px; border-radius:50%;
    background:radial-gradient(50% 60% at 50% 40%, #5d7a4d, #41582f 75%, transparent);
    filter:blur(2px); opacity:.85;
  }

  /* --- стена и магазины --- */
  .wall {
    position:absolute; top:21.5%; height:43%; left:0; right:0;
    background:linear-gradient(180deg, #efe2c8, #e6d5b6 40%, #d9c5a1 96%, #b7a17c);
  }
  .col {
    position:absolute; top:17%; height:47.6%; width:26px; margin-left:-13px;
    background:linear-gradient(90deg, #857357, #cbb996 30%, #a08c68 70%, #6e5e45);
    box-shadow:0 0 14px rgba(60,45,25,.25);
  }
  .col::after {
    content:''; position:absolute; bottom:-10px; left:-6px; right:-6px; height:12px;
    background:linear-gradient(90deg,#6e5e45,#bfae8a,#6e5e45);
  }
  .shop { position:absolute; top:22%; height:42.5%; }
  .shop .sign {
    position:absolute; top:0; left:0; right:0; height:25%;
    background:linear-gradient(180deg, #453425, #2e2115 60%, #241a10);
    border-bottom:3px solid #806033;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 4px 10px rgba(40,25,10,.35);
  }
  .shop .sign b {
    font-family:Didot, "Playfair Display", Georgia, serif;
    color:#e8c887; font-size:17px; letter-spacing:3px; font-weight:600;
    text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 14px rgba(230,190,110,.35);
    white-space:nowrap;
  }
  .shop .sign i {
    font-style:normal; font-size:9px; letter-spacing:4px; color:#b49a6d; margin-top:2px;
    text-transform:uppercase;
  }
  .shop .glass {
    position:absolute; top:25%; bottom:0; left:5px; right:5px;
    border:5px solid #46392c; border-bottom-width:7px; border-radius:2px;
    background:
      radial-gradient(70% 55% at 50% 10%, rgba(255,190,110,.42), transparent 65%),
      linear-gradient(180deg, rgba(58,42,26,.32), rgba(58,42,26,.15) 35%, rgba(58,42,26,.05) 60%, rgba(255,255,255,.04)),
      linear-gradient(105deg, rgba(214,232,240,.2), rgba(255,255,255,.04) 42%, rgba(190,212,224,.16) 62%, rgba(255,255,255,.06));
    overflow:hidden;
  }
  .shop .glass::before { /* блик стекла */
    content:''; position:absolute; inset:0; z-index:2;
    background:linear-gradient(112deg, transparent 28%, rgba(255,255,255,.15) 36%, transparent 45%, rgba(255,255,255,.07) 58%, transparent 68%);
    pointer-events:none;
  }
  .shop .glass::after { /* конусы точечных светильников */
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(16% 70% at 25% 0%, rgba(255,215,140,.35), transparent 72%),
      radial-gradient(16% 70% at 50% 0%, rgba(255,215,140,.35), transparent 72%),
      radial-gradient(16% 70% at 75% 0%, rgba(255,215,140,.35), transparent 72%);
  }
  /* The shop behind the window: under the wishes, the glare and the light cones. */
  .shop-interior {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-size:cover; background-position:center bottom; opacity:.92;
  }
  html[data-mall-skin="oceanic-dusk"] .shop-interior { filter:brightness(.62) saturate(.85); opacity:.95; }
  html[data-mall-skin="warm-conservatory"] .shop-interior { filter:brightness(.9) sepia(.12); }
  .shop-products {
    position:absolute; z-index:1; top:15%; left:8%; right:8%; bottom:29%;
  }
  .shop-product {
    --product-min:44px;
    position:absolute; width:max(var(--product-min), var(--product-size, 0px)); aspect-ratio:1; height:auto; padding:3px;
    border:1px solid rgba(232,200,135,.72); border-radius:10px;
    background:rgba(255,253,247,.94);
    box-shadow:0 4px 10px rgba(40,25,10,.34);
    cursor:pointer; transform:translate(-50%, -50%);
    transition:left .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1),
      width .45s cubic-bezier(.22,1,.36,1), transform .2s, box-shadow .2s, opacity .2s;
  }
  .shop-product-price {
    position:absolute; top:100%; left:50%; display:none; margin-top:4px; padding:1px 6px;
    border-radius:99px; background:rgba(255,253,247,.92); color:#3c3226;
    font-size:10px; font-weight:700; line-height:14px; white-space:nowrap;
    transform:translateX(-50%); pointer-events:none;
    box-shadow:0 2px 6px rgba(40,25,10,.25);
  }
  .shop-product.has-price.roomy .shop-product-price,
  .shop-product.has-price.sel .shop-product-price { display:block; }
  .shop-product:hover {
    z-index:4; transform:translate(-50%, -50%) scale(1.1);
    box-shadow:0 7px 18px rgba(40,25,10,.48), 0 0 0 2px rgba(217,165,78,.62);
  }
  .shop-product img {
    width:100%; height:100%; display:block; object-fit:cover; border-radius:7px;
    pointer-events:none;
  }
  .shop-product .ph {
    width:100%; height:100%; display:none; align-items:center; justify-content:center;
    font-size:20px; pointer-events:none;
  }
  /* A fulfilled wish stays in full colour and gets a small green tick. */
  .shop-product.done::after {
    content:''; position:absolute; top:-6px; right:-6px; width:18px; height:18px;
    border-radius:50%; background:#3f9d4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
    box-shadow:0 0 0 2px rgba(255,253,247,.95), 0 2px 5px rgba(20,40,20,.35);
    pointer-events:none;
  }
  /* Left out by a guest's filter: still there and still opens, just in the background. */
  .shop-product.filtered-out:not(.sel) { opacity:.3; filter:grayscale(.85); box-shadow:none; }
  .shop-product.filtered-out:not(.sel) .shop-product-price { display:none; }
  .shop-product.sel {
    z-index:5; transform:translate(-50%, -50%) scale(1.32);
    box-shadow:0 8px 22px rgba(40,25,10,.5), 0 0 0 3px rgba(235,185,95,.85);
    animation:window-product-bob 2.4s ease-in-out infinite;
  }
  @keyframes window-product-bob {
    0%,100% { transform:translate(-50%, -50%) scale(1.32); }
    50% { transform:translate(-50%, calc(-50% - 7px)) scale(1.32); }
  }
  .shopglow {
    position:absolute; top:64.6%; height:21%;
    background:linear-gradient(180deg, rgba(255,214,150,.22), transparent 78%);
    filter:blur(7px);
  }

  /* --- вывеска молла --- */
  .mallsign { position:absolute; top:2.8%; width:460px; text-align:center; }
  .mallsign .cords { display:flex; justify-content:space-between; padding:0 90px; }
  .mallsign .cords i { display:block; width:2px; height:14px; background:rgba(90,70,40,.6); }
  .mallsign b {
    display:block; font-family:Didot, "Playfair Display", Georgia, serif; font-weight:600;
    font-size:44px; letter-spacing:10px;
    background:linear-gradient(180deg, #f6dfa4, #caa14e 55%, #8a6423);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 3px rgba(80,50,10,.45)) drop-shadow(0 0 18px rgba(240,200,120,.5));
  }
  .mallsign i { font-style:normal; font-size:11px; letter-spacing:7px; color:#a8895b; }

  /* --- люстры --- */
  .lamp { position:absolute; top:0; width:0; }
  .lamp .cord { position:absolute; left:-1px; width:2px; height:52px; background:rgba(80,60,35,.55); }
  .lamp .shade {
    position:absolute; top:50px; left:-19px; width:38px; height:22px;
    border-radius:50% 50% 46% 46% / 90% 90% 30% 30%;
    background:radial-gradient(60% 70% at 50% 25%, #ffe9b0, #d8a955 60%, #8a6423);
    box-shadow:0 2px 6px rgba(80,50,10,.4);
  }
  .lamp .glow {
    position:absolute; top:44px; left:-70px; width:140px; height:120px;
    background:radial-gradient(50% 45% at 50% 25%, rgba(255,222,150,.5), transparent 70%);
    filter:blur(6px); pointer-events:none;
  }

  /* --- пол --- */
  .floor {
    position:absolute; top:64%; bottom:0; left:0; right:0;
    background:
      radial-gradient(130% 80% at 50% 0%, rgba(255,240,210,.5), transparent 60%),
      linear-gradient(103deg, transparent 38%, rgba(255,255,255,.12) 44%, transparent 52%),
      repeating-linear-gradient(90deg, rgba(95,78,58,.14) 0 2px, transparent 2px 300px),
      repeating-linear-gradient(76deg, rgba(120,100,80,.055) 0 2px, transparent 2px 85px),
      repeating-linear-gradient(-18deg, rgba(140,120,95,.05) 0 1px, transparent 1px 55px),
      linear-gradient(180deg, #d6c9b3, #c4b299 46%, #a8967c);
  }
  .floor::before { /* горизонтальные швы плит с "перспективой" */
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent calc(9% - 1px), rgba(95,78,58,.13) 9%, rgba(95,78,58,.13) calc(9% + 1px), transparent calc(9% + 2px)),
      linear-gradient(180deg, transparent calc(26% - 1px), rgba(95,78,58,.12) 26%, rgba(95,78,58,.12) calc(26% + 2px), transparent calc(26% + 3px)),
      linear-gradient(180deg, transparent calc(52% - 1px), rgba(95,78,58,.11) 52%, rgba(95,78,58,.11) calc(52% + 2px), transparent calc(52% + 4px)),
      linear-gradient(180deg, transparent calc(84% - 2px), rgba(95,78,58,.10) 84%, rgba(95,78,58,.10) calc(84% + 3px), transparent calc(84% + 5px));
  }
  .floor::after { /* плинтус */
    content:''; position:absolute; top:-6px; left:0; right:0; height:8px;
    background:linear-gradient(180deg, #8a755a, #6b593f);
  }

  /* --- фонтан --- */
  .fountain { position:absolute; top:65.5%; width:230px; margin-left:-115px; }
  .fountain .basin {
    position:absolute; top:34px; width:230px; height:64px; border-radius:50%;
    background:
      radial-gradient(58% 46% at 50% 42%, #9fc4c9 0%, #7fadb6 55%, transparent 56%),
      radial-gradient(100% 100% at 50% 30%, #d9cbb2, #ab9878 70%, #877455);
    box-shadow:0 10px 18px rgba(60,45,25,.3), inset 0 3px 8px rgba(255,255,255,.5);
  }
  .fountain .basin::after {
    content:''; position:absolute; left:21%; top:26%; width:58%; height:46%; border-radius:50%;
    background:repeating-linear-gradient(95deg, rgba(255,255,255,.34) 0 3px, transparent 3px 14px);
    animation:water 2.6s linear infinite; opacity:.7;
  }
  @keyframes water { from { transform:translateX(0);} to { transform:translateX(14px);} }
  .fountain .jet {
    position:absolute; left:50%; top:-16px; width:7px; height:56px; margin-left:-3.5px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(220,240,245,.75) 30%, rgba(190,225,235,.9));
    border-radius:4px; filter:blur(.6px);
    animation:jet 1.4s ease-in-out infinite alternate;
  }
  @keyframes jet { from { transform:scaleY(.94);} to { transform:scaleY(1.05);} }
  .fountain .top {
    position:absolute; left:50%; top:32px; width:70px; height:20px; margin-left:-35px; border-radius:50%;
    background:radial-gradient(100% 100% at 50% 30%, #cbbd9f, #96876a);
    box-shadow:0 4px 8px rgba(60,45,25,.35);
  }

  /* --- пилон в атриуме: часы сверху, под ними план молла --- */
  .mall-pylon {
    --pylon-body:linear-gradient(90deg, #d9c5a1, #f3e7cf 45%, #d2bd96);
    --pylon-edge:#b89a62; --pylon-ink:#8a6423; --pylon-face:#fffaf0; --pylon-glow:transparent;
    position:absolute; top:24%; bottom:35.5%; z-index:3; width:62px; margin-left:-31px;
    display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:9px;
    border:1px solid var(--pylon-edge); border-radius:31px 31px 6px 6px;
    background:var(--pylon-body); box-shadow:0 6px 14px rgba(60,45,25,.22);
  }
  .pylon-clock {
    position:relative; flex:none; width:46px; height:46px; border:3px solid var(--pylon-edge);
    border-radius:50%; background:var(--pylon-face); box-shadow:0 0 14px var(--pylon-glow);
  }
  .pylon-clock::before {
    content:''; position:absolute; inset:3px; border-radius:50%;
    /* Hour marks, bolder at 12, 3, 6 and 9, kept to a ring at the rim. The ring is
       measured to the face's edge (closest-side), so every mark is the same length. */
    background:
      repeating-conic-gradient(from -3deg, var(--pylon-ink) 0 6deg, transparent 6deg 90deg),
      repeating-conic-gradient(from -2deg, var(--pylon-ink) 0 4deg, transparent 4deg 30deg);
    -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 72%, #000 96%, transparent 98%);
    mask:radial-gradient(closest-side, transparent 70%, #000 72%, #000 96%, transparent 98%);
  }
  .pylon-clock::after {
    content:''; position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
    border-radius:50%; background:var(--pylon-ink);
  }
  .pylon-hand {
    position:absolute; left:50%; bottom:50%; width:2px; margin-left:-1px; border-radius:2px;
    background:var(--pylon-ink); transform-origin:50% 100%;
  }
  .pylon-hour { width:3px; height:11px; margin-left:-1.5px; }
  .pylon-minute { height:16px; }
  .pylon-plan {
    flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:100%; padding:7px 0; overflow:hidden; justify-content:safe center;
    border-top:1px solid color-mix(in srgb, var(--pylon-edge) 60%, transparent);
  }
  .pylon-shop {
    display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0;
    border:1px solid color-mix(in srgb, var(--pylon-edge) 70%, transparent); border-radius:9px;
    background:color-mix(in srgb, var(--pylon-face) 70%, transparent); color:var(--pylon-ink);
    font-size:13px; cursor:pointer; transition:transform .16s ease, background .16s ease;
    box-shadow:0 0 8px var(--pylon-glow);
  }
  .pylon-shop:hover { background:var(--pylon-face); transform:scale(1.08); }
  .pylon-shop:focus-visible { outline:2px solid var(--pylon-ink); outline-offset:2px; }
  .pylon-shop-vacant { opacity:.4; cursor:default; }
  .pylon-shop-vacant:hover { transform:none; }
  .pylon-base {
    flex:none; width:calc(100% + 10px); height:10px; margin-bottom:-1px; border-radius:3px;
    background:linear-gradient(90deg, #8a755a, #bfae8a, #8a755a);
  }

  /* --- сезонное оформление --- */
  /* Painted seasons: the garland image spans column to column, a wreath sits at
     each column's top, a display stands at each end, pumpkins replace the bushes. */
  .season-garland { position:absolute; top:calc(17% - 12px); z-index:4; pointer-events:none; }
  .season-garland img { display:block; width:100%; height:auto; }
  .col-wreath {
    position:absolute; z-index:2; top:1%; left:50%; width:92px; transform:translateX(-50%);
    pointer-events:none; filter:drop-shadow(0 4px 6px rgba(40,25,10,.22));
  }
  /* The balloons hang lower than a wreath, so they keep clear of the pylon clock. */
  #scene[data-season="birthday"] .col-wreath { width:76px; }
  /* The countdown stands on the mall's floor, where the list never loses height to it. */
  #birthday-banner {
    position:absolute; z-index:40; left:14px; bottom:14px; display:flex; align-items:center; gap:7px; margin:0;
    padding:5px 13px 5px 7px; border-radius:13px; background:var(--ui-surface); color:var(--ui-warning);
    box-shadow:var(--ui-shadow-md); font-family:var(--ui-font); font-size:14px; font-weight:700; pointer-events:none;
  }
  #birthday-banner[hidden] { display:none; }
  #birthday-banner img { width:30px; height:30px; object-fit:contain; flex-shrink:0; }
  .season-corner { position:absolute; bottom:31%; z-index:6; width:190px; margin-left:-95px; pointer-events:none; }
  .season-corner img { display:block; width:100%; height:auto; filter:drop-shadow(0 8px 8px rgba(0,0,0,.18)); }
  .fg-item.season-floor-item { filter:blur(1px) saturate(.95); opacity:1; }
  .season-floor { display:block; width:330px; height:auto; }
  /* The dark interior dims the decorations so they sit in its dusk. */
  html[data-mall-skin="oceanic-dusk"] .season-garland img,
  html[data-mall-skin="oceanic-dusk"] .col-wreath,
  html[data-mall-skin="oceanic-dusk"] .season-corner img,
  html[data-mall-skin="oceanic-dusk"] .season-floor { filter:brightness(.8) saturate(.95); }

  /* --- деревья в кадках по краям --- */
  .palm { position:absolute; }
  .palm { z-index:6; width:220px; height:270px; margin-left:-100px; top:39% !important; }
  .plant-tree {
    position:absolute; left:50%; bottom:0; width:150px; height:auto; transform:translateX(-50%);
    filter:drop-shadow(0 8px 8px rgba(0,0,0,.16));
  }
  .plant-foreground { display:block; width:330px; height:auto; }

  /* --- передний план --- */
  #l-front { pointer-events:none; }
  .fg-item { position:absolute; bottom:-3%; filter:blur(2px) saturate(.92); opacity:.96; }
  .bench { position:absolute; bottom:4%; width:210px; height:64px; filter:blur(1.5px); }
  .bench .seat {
    position:absolute; top:18px; width:100%; height:14px; border-radius:5px;
    background:linear-gradient(180deg, #a5794c, #7d5731 70%, #5f421f);
    box-shadow:0 3px 6px rgba(50,35,15,.4);
  }
  .bench .seat::before {
    content:''; position:absolute; inset:2px 0;
    background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(60,40,15,.5) 46px 49px);
  }
  .bench .leg { position:absolute; top:30px; width:10px; height:30px; background:linear-gradient(90deg,#4c3a1e,#5f421f,#3d2c12); }
  .bench::after {
    content:''; position:absolute; top:56px; left:-4%; width:108%; height:16px; border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(55,38,20,.32), transparent 70%);
  }

  /* ============ КОТЫ ============ */
  .cat { position:absolute; left:0; top:0; width:0; height:0; }
  .cat .body {
    position:absolute; bottom:0; left:0; transform-origin:50% 100%; cursor:pointer;
  }
  /* Walk-cycle strips: width follows the frame ratio, the frame is a background position. */
  .cat .body .spr {
    position:relative; height:110px; display:block; pointer-events:auto; touch-action:none;
    background-repeat:no-repeat;
  }
  .cat.petting .body { cursor:grabbing; }
  .cat .body .refl {
    position:absolute; top:calc(100% - 3px); left:0; height:110px; background-repeat:no-repeat;
    transform:scaleY(-1); opacity:.25;
    -webkit-mask-image:linear-gradient(0deg, transparent 45%, rgba(0,0,0,.85));
    mask-image:linear-gradient(0deg, transparent 45%, rgba(0,0,0,.85));
    pointer-events:none;
  }
  .cat .shadow {
    position:absolute; bottom:-8px; left:0; width:110px; height:22px; margin-left:-55px;
    background:radial-gradient(50% 50% at 50% 50%, rgba(55,38,20,.4), transparent 70%);
    filter:blur(2px);
  }
  .cat .bubble {
    position:absolute; bottom:132px; left:0; transform:translateX(-50%) scale(.7);
    background:rgba(255,253,247,.96); color:#3c3226;
    font-size:13px; line-height:1.35; padding:8px 12px; border-radius:14px;
    max-width:210px; width:max-content; text-align:center;
    box-shadow:0 4px 14px rgba(60,40,15,.25);
    opacity:0; transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
  }
  .cat .bubble::after {
    content:''; position:absolute; top:100%; left:50%; margin-left:-7px;
    border:7px solid transparent; border-top-color:rgba(255,253,247,.96);
  }
  .cat .bubble.show { opacity:1; transform:translateX(-50%) scale(1); }
  .cat .bubble.show.is-action { pointer-events:auto; cursor:pointer; }
  .cat .pet-hearts { position:absolute; bottom:92px; left:0; width:0; height:0; pointer-events:none; }
  .cat .pet-heart {
    display:none; position:absolute; left:-7px; color:#e36d87; font-size:16px;
    text-shadow:0 2px 5px rgba(94,34,47,.24); opacity:0;
  }
  .cat.petting .pet-heart { display:block; animation:pet-heart-float 1.05s ease-out infinite; }
  .cat.petting .pet-heart:nth-child(2) { left:10px; font-size:12px; animation-delay:.28s; }
  .cat.petting .pet-heart:nth-child(3) { left:-22px; font-size:10px; animation-delay:.56s; }
  @keyframes pet-heart-float {
    0% { opacity:0; transform:translate3d(0,8px,0) scale(.65) rotate(-8deg); }
    18% { opacity:1; }
    100% { opacity:0; transform:translate3d(5px,-54px,0) scale(1.15) rotate(10deg); }
  }

  /* ============ СПОТЫ ХОТЕЛОК ============ */
  /* Карточки товаров находятся в витринах магазинов. В слое актёров остаются
     напольные кольца и луч выбранной хотелки, к которым подходят коты. */
  #spots { position:absolute; left:0; top:0; }
  #l-actors { pointer-events:none; }
  .itemspot {
    position:absolute; left:0; top:0; width:0; height:0; z-index:5;
    transition:transform .55s cubic-bezier(.22,1,.36,1);
  }
  .itemspot .ring {
    position:absolute; left:-32px; bottom:-9px; width:64px; height:18px; border-radius:50%;
    border:2px solid rgba(235,185,95,.45);
    box-shadow:0 0 10px rgba(235,185,95,.3), inset 0 0 8px rgba(235,185,95,.2);
    animation:ringpulse 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes ringpulse { 0%,100% { transform:scale(1); opacity:.9;} 50% { transform:scale(1.12); opacity:.55;} }
  .itemspot .beam {
    display:none; position:absolute; left:-45px; bottom:0; width:90px; height:280px;
    background:linear-gradient(0deg, rgba(255,215,140,.34), rgba(255,225,160,.05) 75%, transparent);
    filter:blur(4px); pointer-events:none;
  }
  /* полученные — приглушённые, с зелёным кольцом */
  .itemspot.done { opacity:.55; }
  .itemspot.filtered-out:not(.sel) { opacity:.15; }
  .itemspot.done .ring {
    border-color:rgba(143,190,111,.5);
    box-shadow:0 0 10px rgba(143,190,111,.28), inset 0 0 8px rgba(143,190,111,.2);
  }
  /* выбранная — яркое кольцо и столб света до соответствующей витрины */
  .itemspot.sel { z-index:6; }
  .itemspot.sel .ring {
    left:-65px; bottom:-16px; width:130px; height:34px; border-width:3px;
    border-color:rgba(235,185,95,.85);
    box-shadow:0 0 22px rgba(235,185,95,.75), inset 0 0 18px rgba(235,185,95,.5);
    animation-duration:1.6s;
  }
  html[data-mall-skin="classic"] .itemspot .ring {
    border-color:rgba(132,168,86,.58);
    box-shadow:0 0 10px rgba(132,168,86,.38), inset 0 0 8px rgba(132,168,86,.27);
  }
  html[data-mall-skin="classic"] .itemspot.done .ring {
    border-color:rgba(132,168,86,.52);
    box-shadow:0 0 10px rgba(132,168,86,.31), inset 0 0 8px rgba(132,168,86,.22);
  }
  html[data-mall-skin="classic"] .itemspot.sel .ring {
    border-color:rgba(132,168,86,.92);
    box-shadow:0 0 22px rgba(132,168,86,.76), inset 0 0 18px rgba(132,168,86,.52);
  }
  html[data-mall-skin="warm-conservatory"] .itemspot .ring {
    border-color:rgba(114,147,76,.55);
    box-shadow:0 0 10px rgba(114,147,76,.34), inset 0 0 8px rgba(114,147,76,.24);
  }
  html[data-mall-skin="warm-conservatory"] .itemspot.done .ring {
    border-color:rgba(114,147,76,.5);
    box-shadow:0 0 10px rgba(114,147,76,.28), inset 0 0 8px rgba(114,147,76,.2);
  }
  html[data-mall-skin="warm-conservatory"] .itemspot.sel .ring {
    border-color:rgba(114,147,76,.9);
    box-shadow:0 0 22px rgba(114,147,76,.72), inset 0 0 18px rgba(114,147,76,.48);
  }
  .itemspot.sel .beam { display:block; }

  /* --- световая гамма --- */
  #grade {
    position:absolute; inset:0; pointer-events:none; z-index:40;
    background:
      linear-gradient(78deg, transparent 26%, rgba(255,230,170,.07) 31%, transparent 39%, transparent 55%, rgba(255,230,170,.05) 60%, transparent 67%),
      radial-gradient(120% 90% at 50% 6%, rgba(255,206,130,.13), transparent 55%),
      radial-gradient(145% 120% at 50% 55%, transparent 62%, rgba(70,45,20,.2));
  }

  /* ============ ОПЦИОНАЛЬНЫЕ ИНТЕРЬЕРЫ МОЛА ============
     Выбранный интерьер приходит из настроек мурлиста до сборки сцены.
     Кабинет и уличная сцена не используют эти селекторы или ассеты. */
  .mall-floor-specular,
  .mall-atmosphere,
  .mall-storefront-header,
  .mall-storefront-plinth { display:none; }

  html[data-mall-skin="classic"] #scene {
    --mall-scene-bg:#efe3cb;
    --mall-sign-bg:#33251a;
    --mall-window-bg:linear-gradient(180deg, #d8c6a6 0%, #a48a69 100%);
    --mall-sign-text:#ecd193;
    --mall-sign-sub:#b9996a;
    --mall-product-border:rgba(184,145,84,.72);
    --mall-product-ring:rgba(132,168,86,.6);
    --mall-floor-overlay-opacity:.3;
    --mall-atmosphere-opacity:.3;
    --mall-atmosphere-blend:soft-light;
    --mall-grade:
      linear-gradient(78deg, transparent 26%, rgba(255,230,170,.07) 31%, transparent 39%, transparent 55%, rgba(255,230,170,.05) 60%, transparent 67%),
      radial-gradient(120% 90% at 50% 6%, rgba(255,206,130,.13), transparent 55%),
      radial-gradient(145% 120% at 50% 55%, transparent 62%, rgba(70,45,20,.2));
  }
  html[data-mall-skin="oceanic-dusk"] #scene {
    --mall-scene-bg:#071321;
    --mall-sign-bg:#07111f;
    --mall-window-bg:linear-gradient(180deg, #0b1b2d 0%, #07111f 100%);
    --mall-sign-text:#f1c47f;
    --mall-sign-sub:#ad8b67;
    --mall-product-border:rgba(213,151,86,.72);
    --mall-product-ring:rgba(57,193,229,.58);
    --mall-floor-overlay-opacity:.42;
    --mall-atmosphere-opacity:.48;
    --mall-atmosphere-blend:screen;
    --mall-grade:
      linear-gradient(78deg, transparent 26%, rgba(55,179,222,.06) 32%, transparent 40%, transparent 55%, rgba(224,149,83,.05) 61%, transparent 68%),
      radial-gradient(120% 86% at 50% 8%, rgba(23,91,145,.16), transparent 58%),
      radial-gradient(145% 120% at 50% 55%, transparent 58%, rgba(1,7,16,.46));
  }
  html[data-mall-skin="warm-conservatory"] #scene {
    --mall-scene-bg:#ead0aa;
    --mall-sign-bg:#5b3828;
    --mall-window-bg:linear-gradient(180deg, #b39779 0%, #80634e 100%);
    --mall-sign-text:#fff0cd;
    --mall-sign-sub:#e0ba83;
    --mall-product-border:rgba(207,145,79,.72);
    --mall-product-ring:rgba(131,181,142,.55);
    --mall-floor-overlay-opacity:.26;
    --mall-atmosphere-opacity:.34;
    --mall-atmosphere-blend:soft-light;
    --mall-grade:
      linear-gradient(78deg, transparent 25%, rgba(255,240,202,.10) 32%, transparent 40%, transparent 56%, rgba(255,220,168,.08) 62%, transparent 69%),
      radial-gradient(120% 88% at 50% 5%, rgba(255,244,211,.22), transparent 58%),
      radial-gradient(145% 120% at 50% 55%, transparent 64%, rgba(112,69,37,.17));
  }

  html[data-mall-skin] #scene { background:var(--mall-scene-bg); }
  html[data-mall-skin] .sky-band {
    height:15%;
    background-color:var(--mall-scene-bg);
    background-image:var(--mall-ceiling-material);
    background-repeat:repeat-x;
    background-position:center;
    background-size:512px 100%;
  }
  html[data-mall-skin] .sky-band::after {
    content:''; position:absolute; inset:0;
    background-image:var(--mall-ceiling-truss);
    background-repeat:repeat-x;
    background-position:center bottom;
    background-size:640px 100%;
    pointer-events:none;
  }
  html[data-mall-skin] .sun-glow { display:none; }

  html[data-mall-skin] .b-band {
    top:8%; height:20%;
    background-color:var(--mall-scene-bg);
    background-image:var(--mall-balcony-wall);
    background-repeat:repeat-x;
    background-position:center;
    background-size:512px 100%;
  }
  html[data-mall-skin] .b-band::after {
    height:48%; border:0;
    background-image:var(--mall-balcony-railing);
    background-repeat:repeat-x;
    background-position:center bottom;
    background-size:640px 100%;
  }
  html[data-mall-skin] .b-plant {
    width:76px; height:92px; border-radius:0; background:none;
    filter:saturate(.82) drop-shadow(0 7px 7px rgba(15,20,24,.18)); opacity:.74;
  }
  html[data-mall-skin] .b-plant img {
    width:100%; height:100%; display:block; object-fit:contain;
  }

  html[data-mall-skin] .wall {
    top:21.5%; height:43.5%; z-index:0;
    background-color:var(--mall-scene-bg);
    background-image:var(--mall-wall-material);
    background-repeat:repeat;
    background-position:center;
    background-size:512px 512px;
  }
  html[data-mall-skin] .wall::after {
    content:''; position:absolute; inset:0;
    background-image:var(--mall-wall-seams);
    background-repeat:repeat;
    background-position:center;
    background-size:512px 256px;
    pointer-events:none;
  }
  html[data-mall-skin] .floor {
    z-index:0; background-color:var(--mall-scene-bg);
    background-image:var(--mall-floor-material);
    background-repeat:repeat;
    background-position:center top;
    background-size:512px 512px;
  }
  html[data-mall-skin] .floor::before {
    opacity:.42;
    mix-blend-mode:multiply;
  }
  /* The classic floor is one picture for the whole mall, in perspective towards
     the fountain, stretched to the floor's height. */
  html[data-mall-skin="classic"] .floor {
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:100% 100%;
  }
  html[data-mall-skin="classic"] .floor::before { display:none; }
  html[data-mall-skin] .floor::after {
    top:-7px; height:9px;
    background-color:transparent;
    background-image:var(--mall-lower-plinth);
    background-repeat:repeat-x;
    background-position:center;
    background-size:512px 64px;
  }
  html[data-mall-skin] .mall-floor-specular {
    display:block; position:absolute; inset:0;
    background-image:var(--mall-floor-specular);
    background-repeat:repeat-x;
    background-position:center top;
    background-size:1024px 100%;
    opacity:var(--mall-floor-overlay-opacity);
    pointer-events:none;
  }
  html[data-mall-skin] .mall-atmosphere {
    display:block; position:absolute; inset:0; z-index:1;
    background-image:var(--mall-atmosphere);
    background-repeat:repeat-x;
    background-position:center;
    background-size:1024px 100%;
    opacity:var(--mall-atmosphere-opacity);
    mix-blend-mode:var(--mall-atmosphere-blend);
    pointer-events:none;
  }

  html[data-mall-skin] .shop { z-index:3; isolation:isolate; }
  html[data-mall-skin] .shop .sign {
    z-index:4; border:0; box-shadow:none;
    background-color:var(--mall-sign-bg);
    background-image:var(--mall-sign-panel);
    background-repeat:repeat-x;
    background-position:center;
    background-size:auto 100%;
  }
  html[data-mall-skin] .shop .sign::before,
  html[data-mall-skin] .shop .sign::after {
    content:''; position:absolute; z-index:0; top:0; bottom:0; width:64px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    pointer-events:none;
  }
  html[data-mall-skin] .shop .sign::before {
    left:-8px; background-image:var(--mall-sign-surround-left);
  }
  html[data-mall-skin] .shop .sign::after {
    right:-8px; background-image:var(--mall-sign-surround-right);
  }
  html[data-mall-skin] .shop .sign b,
  html[data-mall-skin] .shop .sign i {
    position:relative; z-index:2;
  }
  html[data-mall-skin] .shop .sign b {
    color:var(--mall-sign-text); font-size:16px; letter-spacing:2.4px;
    text-shadow:0 2px 8px rgba(0,0,0,.48);
  }
  html[data-mall-skin] .shop .sign i {
    color:var(--mall-sign-sub); letter-spacing:3px;
  }
  /* The classic sign is one rounded walnut board with a fine gold line inside. */
  html[data-mall-skin="classic"] .shop .sign {
    border-radius:12px;
    background-size:cover;
    box-shadow:0 4px 10px rgba(40,25,10,.3);
  }
  html[data-mall-skin="classic"] .shop .sign::before {
    inset:5px; width:auto; border-radius:8px;
    background:none; border:1.5px solid rgba(214,172,98,.78);
  }
  html[data-mall-skin="classic"] .shop .sign::after { display:none; }
  html[data-mall-skin] .mall-storefront-header {
    display:block; position:absolute; z-index:7; top:23.5%; left:3%; right:3%; height:7%;
    background-image:var(--mall-store-header);
    background-repeat:repeat-x;
    background-position:center;
    background-size:auto 100%;
    pointer-events:none;
  }
  html[data-mall-skin] .mall-storefront-plinth {
    display:block; position:absolute; z-index:7; left:3%; right:3%; bottom:0; height:10%;
    background-image:var(--mall-lower-plinth);
    background-repeat:repeat-x;
    background-position:center;
    background-size:auto 100%;
    pointer-events:none;
  }
  html[data-mall-skin] .shop .glass {
    z-index:2; top:26%; bottom:7%; left:14px; right:14px;
    border:0; border-radius:3px; background:var(--mall-window-bg);
    box-shadow:inset 0 0 26px rgba(0,0,0,.24);
  }
  html[data-mall-skin] .shop .glass::before {
    background-color:transparent;
    background-image:var(--mall-glass-reflection);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    opacity:.72;
  }
  html[data-mall-skin] .shop .glass::after {
    background-color:transparent;
    background-image:var(--mall-window-light);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    opacity:.78;
  }
  /* A crowded window lets its products run a little over the sign and the sill
     rather than under them: the glass makes no layer of its own, so the products
     rise above the sign (4) and the rails (7), and the glass light stays on top. */
  html[data-mall-skin] .shop .glass { z-index:auto; }
  html[data-mall-skin] .shop .glass::before,
  html[data-mall-skin] .shop .glass::after { z-index:9; }
  html[data-mall-skin] .shop-products { top:17%; left:9%; right:9%; bottom:32%; z-index:8; }
  html[data-mall-skin] .shop-product {
    border-color:var(--mall-product-border);
    box-shadow:0 5px 14px rgba(0,0,0,.34);
  }
  html[data-mall-skin] .shop-product:hover {
    box-shadow:0 8px 20px rgba(0,0,0,.45), 0 0 0 2px var(--mall-product-ring);
  }
  html[data-mall-skin] .shopglow {
    z-index:2; background:linear-gradient(180deg, color-mix(in srgb, var(--mall-sign-text) 19%, transparent), transparent 78%);
    opacity:.64;
  }

  html[data-mall-skin] .col {
    z-index:5; width:48px; margin-left:-24px; box-shadow:none;
    background-color:transparent;
    background-image:var(--mall-column-body);
    background-repeat:repeat-y;
    background-position:center;
    background-size:48px 256px;
  }
  html[data-mall-skin] .col::before,
  html[data-mall-skin] .col::after {
    content:''; position:absolute; left:-3px; width:54px;
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  }
  html[data-mall-skin] .col::before {
    top:-8px; height:45px; background-image:var(--mall-column-cap);
  }
  html[data-mall-skin] .col::after {
    bottom:-12px; height:54px; background-image:var(--mall-column-base);
  }

  html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign {
    z-index:6; width:460px; height:144px; padding:17px 52px 20px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background-image:var(--mall-sign-frame);
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  }
  html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign .cords { display:none; }
  /* The classic mall keeps its gold letters on cords, without a board. */
  html[data-mall-skin="classic"] .mallsign { z-index:6; }
  html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign b {
    font-size:31px; letter-spacing:8px;
    background:none; color:var(--mall-sign-text);
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.42));
  }
  html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign i {
    color:var(--mall-sign-sub); font-size:9px; letter-spacing:5px;
  }

  html[data-mall-skin] .lamp {
    z-index:6; width:64px; height:116px; margin-left:-32px;
    background-image:var(--mall-lamp);
    background-repeat:no-repeat; background-position:center 45px; background-size:64px 64px;
  }
  html[data-mall-skin] .lamp .shade { display:none; }
  html[data-mall-skin] .lamp .cord { left:31px; background:color-mix(in srgb, var(--mall-sign-sub) 58%, transparent); }
  html[data-mall-skin] .lamp .glow {
    top:39px; left:-38px; width:140px; height:115px; opacity:.68;
  }

  /* The pylon takes each interior's sign colours; the dark one glows like its neon. */
  html[data-mall-skin] .mall-pylon {
    --pylon-body:var(--mall-sign-bg); --pylon-edge:color-mix(in srgb, var(--mall-sign-sub) 75%, transparent);
    --pylon-ink:var(--mall-sign-text); --pylon-face:color-mix(in srgb, var(--mall-sign-bg) 82%, var(--mall-sign-text));
    box-shadow:0 8px 18px rgba(0,0,0,.3);
  }
  html[data-mall-skin] .pylon-base { background:color-mix(in srgb, var(--mall-sign-sub) 55%, var(--mall-sign-bg)); }
  html[data-mall-skin="oceanic-dusk"] .mall-pylon { --pylon-glow:color-mix(in srgb, var(--mall-product-ring) 70%, transparent); }
  html[data-mall-skin="oceanic-dusk"] .pylon-shop i { text-shadow:0 0 6px var(--mall-product-ring); }

  html[data-mall-skin] .fountain {
    z-index:7; top:64.5%; width:280px; height:160px; margin-left:-140px;
    background-image:var(--mall-fountain-base);
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  }
  html[data-mall-skin] .fountain .basin {
    inset:0; width:auto; height:auto; border-radius:0; box-shadow:none;
    background-color:transparent;
    background-image:var(--mall-fountain-light);
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
    opacity:.78;
  }
  html[data-mall-skin] .fountain .basin::after { display:none; }
  html[data-mall-skin] .fountain .top {
    left:20px; top:0; width:240px; height:120px; margin:0; border-radius:0; box-shadow:none;
    background-color:transparent;
    background-image:var(--mall-fountain-water);
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
    animation:skin-fountain-water 1.8s ease-in-out infinite alternate;
  }
  html[data-mall-skin] .fountain .jet { display:none; }
  @keyframes skin-fountain-water {
    from { transform:translateY(0) scaleY(.98); opacity:.88; }
    to { transform:translateY(-2px) scaleY(1.02); opacity:1; }
  }


  html[data-mall-skin] .fg-item {
    filter:blur(1.2px) saturate(.9); opacity:.9;
  }
  html[data-mall-skin] .bench {
    width:256px; height:112px; bottom:1.5%; filter:blur(.65px);
    background-image:var(--mall-bench);
    background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  }
  html[data-mall-skin] .bench .seat,
  html[data-mall-skin] .bench .leg,
  html[data-mall-skin] .bench::after { display:none; }
  html[data-mall-skin] #grade { background:var(--mall-grade); }

  @media (max-width:880px) {
    /* The sign scales with the scene height (cqh), keeping the desktop sign's centre. */
    html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign {
      width:50cqh; height:15.6cqh; margin-left:calc((460px - 50cqh) / 2);
      padding:1.8cqh 5.6cqh 2.2cqh;
    }
    html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign b { font-size:3.6cqh; letter-spacing:.8cqh; }
    html[data-mall-skin]:not([data-mall-skin="classic"]) .mallsign i { font-size:max(6px, 1.05cqh); letter-spacing:.55cqh; }
    html[data-mall-skin] .fountain {
      width:210px; height:120px; margin-left:-105px;
    }
    html[data-mall-skin] .fountain .top {
      left:15px; width:180px; height:90px;
    }
    html[data-mall-skin] .shop .sign b { font-size:14px; letter-spacing:2px; }
    html[data-mall-skin] .shop .sign i { font-size:8px; letter-spacing:2.4px; }
  }

  #sound-btn, #pan-btn {
    position:absolute; top:14px; right:14px; z-index:50;
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    display:grid; place-items:center; padding:0;
    background:rgba(40,30,18,.45); color:#fff; font-size:16px; cursor:pointer;
    backdrop-filter:blur(4px); transition:background .2s, opacity .2s;
  }
  #sound-btn:hover, #pan-btn:hover { background:rgba(40,30,18,.65); }
  /* тумблер панорамы мышью (для чувствительных к движению — выключаемо) */
  #pan-btn { top:64px; font-size:15px; }
  #pan-btn.off { opacity:.45; }

  #fx { position:fixed; inset:0; pointer-events:none; z-index:999; }
  #swipe-hint { display:none; }
@media (max-width: 880px) {
    #app { flex-direction:column; }
    #scene { flex:none; height:45vh; height:45dvh; touch-action:pan-y; }
    /* Ceiling, balcony and the mall sign on top; a shallower floor below. */
    #scene { container:mall / size; }
    .lamp { display:none; }
    #l-front .fg-item { display:none; }
    .b-band, html[data-mall-skin] .b-band { top:3%; height:13%; }
    .mallsign { top:1.2%; width:50cqh; margin-left:calc((460px - 50cqh) / 2); }
    .mallsign .cords { display:none; }
    .mallsign b { font-size:4.6cqh; letter-spacing:1cqh; }
    .mallsign i { font-size:max(6px, 1.3cqh); letter-spacing:.7cqh; }
    @container mall (max-height: 300px) { .mallsign { display:none; } }
    .wall,
    html[data-mall-skin] .wall { top:15%; height:59.5%; }
    .shop { top:15.5%; height:59%; }
    .col { top:14.5%; height:60%; }
    .shopglow, .floor { top:74.5%; }
    .fountain, html[data-mall-skin] .fountain { top:72%; }
    .mall-pylon { top:18%; bottom:25.5%; gap:6px; }
    /* On a phone there is no room for garlands: the shop signs fill the space above
       the windows and anything lower hangs over the wishes. The wreaths, the end
       displays and the foreground keep the season. */
    .season-garland { display:none; }
    .col-wreath { width:70px; }
    .season-corner { bottom:24%; width:150px; margin-left:-75px; }
    /* The plan goes into two columns and the clock shrinks, so all seven shops fit
       even in a phone's short mall. */
    .pylon-clock { width:38px; height:38px; border-width:2px; }
    .pylon-hour { height:9px; }
    .pylon-minute { height:13px; }
    .pylon-plan {
      display:grid; grid-template-columns:repeat(2, 24px); justify-content:center; align-content:center;
      gap:4px; padding:5px 0;
    }
    .pylon-shop { width:24px; height:24px; border-radius:7px; font-size:11px; }
    /* Only on a very short mall is the clock all that is left. */
    @container mall (max-height: 290px) { .pylon-plan { display:none; } .mall-pylon { gap:0; } }
    #sound-btn { top:auto; bottom:12px; }
    #pan-btn { display:none; }
    #swipe-hint:not([hidden]) {
      position:absolute; left:50%; bottom:68px; z-index:51; display:block;
      max-width:calc(100% - 96px); padding:8px 12px; border-radius:99px;
      background:rgba(35,29,22,.72); color:#fff; font-size:12px; font-weight:700;
      text-align:center; pointer-events:none; transform:translateX(-50%);
      backdrop-filter:blur(5px); animation:swipe-hint-in .2s ease-out;
    }
    @keyframes swipe-hint-in { from { opacity:0; transform:translate(-50%, 5px); } }
    .shop-product { --product-min:34px; border-radius:8px; }
    .shop-product-price { margin-top:3px; padding:0 5px; font-size:9px; line-height:13px; }
    .shop-product img { border-radius:5px; }
    .shop-product .ph { font-size:16px; }
    /* Products get most of the window on a phone, leaving room for the price. */
    html[data-mall-skin] .shop-products { top:12%; bottom:22%; }
    .shop-product.done::after { top:-5px; right:-5px; width:15px; height:15px; }
    html[data-mall-skin] .shop-product { --product-min:28px; border-radius:7px; }
    html[data-mall-skin] .shop-product img { border-radius:4px; }
    html[data-mall-skin] .shop-product .ph { font-size:14px; }
    .itemspot.sel .beam { height:200px; }
}
@media (prefers-reduced-motion: reduce) {
    #swipe-hint { animation:none !important; }
}