/* Le Placard : styles repris du prototype. Une enseigne qui se balance, des onglets laiton, des étagères en bois
   où les bouteilles tiennent debout, une liste sobre pour la gestion derrière la petite clé. */
:root{
  color-scheme:dark;
  --bg:#0B1712; --bg2:#10201A; --panel:#152920;
  --wood:#4A2A1A; --wood-hi:#6B3F25; --wood-lo:#24130B; --wood2:#2A170E;
  --ink:#F2E8D1; --muted:#B5AA8F; --faint:#7E7663;
  --line:rgba(201,162,74,.24); --line-strong:rgba(201,162,74,.62);
  --brass:#C9A24A; --brass-hi:#EBD088; --brass-lo:#8C6A26; --brass-soft:rgba(201,162,74,.13); --on-brass:#1C1307;
  --apero:#EDB067; --apero-soft:rgba(237,176,103,.16); --dige:#E8A0AA; --dige-soft:rgba(130,32,48,.55);
  --glow:rgba(255,196,110,.22); --danger:#E8826F;
  --f-display:"IM Fell English SC", "IM Fell English", Georgia, "Times New Roman", serif;
  --f-serif:"IM Fell English", Georgia, "Times New Roman", serif;
  --f-body:"Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{background-color:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.45;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(255,196,110,.16), transparent 70%),
    radial-gradient(ellipse 140% 100% at 50% 125%, rgba(0,0,0,.6), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.017) 0 1px, transparent 1px 84px);
  background-attachment:fixed;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:6px 110px}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}

/* Enseigne suspendue */
.signWrap{position:relative;padding-top:34px}
.chain{position:absolute;top:0;width:2px;height:40px;background:repeating-linear-gradient(180deg,var(--brass) 0 5px,transparent 5px 8px);opacity:.75}
.chain.l{left:24%}.chain.r{right:24%}
.sign{position:relative;text-align:center;padding:22px 18px 18px;border-radius:10px;transform-origin:50% -34px;
  background:linear-gradient(180deg,var(--wood-hi),var(--wood) 40%,var(--wood-lo));border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 5px var(--wood2), inset 0 0 0 6px var(--line-strong), 0 16px 30px rgba(0,0,0,.5);cursor:pointer}
.sign::before,.sign::after{content:"";position:absolute;top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--brass-hi),var(--brass-lo));box-shadow:0 1px 2px rgba(0,0,0,.6)}
.sign::before{left:calc(24% - 5px)}.sign::after{right:calc(24% - 5px)}
.sign .over{font-family:var(--f-serif);font-style:italic;font-size:16px;color:var(--brass)}
.sign h1{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,12vw,64px);line-height:.92;margin:4px 0 4px;color:var(--brass-hi);
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 22px rgba(255,200,110,.25);letter-spacing:.01em}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--brass);margin:4px auto 8px;max-width:240px}
.orn::before,.orn::after{content:"";flex:1;border-top:1px solid var(--line-strong)}
.orn i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--brass);display:block}
.count{font-family:var(--f-serif);font-style:italic;font-size:17px;color:var(--muted);font-variant-numeric:tabular-nums}
.patron{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.25);
  color:var(--faint);display:grid;place-items:center;padding:0;transition:color .15s,border-color .15s}
.patron:hover{color:var(--brass-hi);border-color:var(--line-strong)}
.patron svg{width:16px;height:16px}
.modeBar{display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.modeBar span{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--brass-hi)}
body.gestion .modeBar{display:flex}
body.gestion .patron{display:none}
@keyframes swing{0%{transform:rotate(5deg)}22%{transform:rotate(-3.4deg)}42%{transform:rotate(2.2deg)}60%{transform:rotate(-1.3deg)}78%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
.sign.swing{animation:swing 2.4s cubic-bezier(.3,.6,.4,1)}

/* Onglets avec curseur laiton */
.moments{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:999px;background:rgba(0,0,0,.28);padding:4px}
.moments .ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));box-shadow:0 4px 14px rgba(201,162,74,.35);transition:transform .45s cubic-bezier(.3,1.4,.5,1), background .3s}
.moments[data-m="apero"] .ind{transform:translateX(0);background:linear-gradient(180deg,#F5C98C,var(--apero))}
.moments[data-m="digestif"] .ind{transform:translateX(100%);background:linear-gradient(180deg,#F0B8BF,#C9707D)}
.moments[data-m="all"] .ind{transform:translateX(200%)}
.moment{position:relative;z-index:1;border:0;background:none;padding:9px 4px;text-align:center;min-width:0;border-radius:999px;transition:color .3s}
.moment b{display:block;font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.1;color:var(--ink);transition:color .3s}
.moment[aria-pressed="true"] b{color:var(--on-brass)}

.tools{display:flex;gap:10px;flex-wrap:wrap}
.search{flex:1 1 180px;min-width:0;border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:10px 14px;font-size:16px}
.search::placeholder{color:var(--faint)}
.btn{border:1px solid var(--line-strong);background:var(--panel);border-radius:999px;padding:10px 16px;font-weight:500;font-size:16px;color:var(--ink)}
.btn:hover{border-color:var(--brass)}
.btn.brass{background:linear-gradient(180deg,var(--brass-hi),var(--brass));border-color:var(--brass);color:var(--on-brass);font-weight:700}
.btn.ghost{background:none}
.btn.small{padding:7px 13px;font-size:15px}
.btn.danger{color:var(--danger);border-color:var(--danger);background:none}
#randBtn{display:inline-flex;align-items:center;gap:8px}
#randBtn svg{width:18px;height:18px}
#randBtn:hover svg{animation:spin .6s ease}
@keyframes spin{to{transform:rotate(360deg)}}

/* Étagères */
.shelves{display:flex;flex-direction:column;gap:30px}
.shelf{position:relative}
.plate{display:flex;justify-content:center;margin-bottom:-6px;position:relative;z-index:2}
.plate span{position:relative;font-family:var(--f-display);font-size:19px;color:var(--on-brass);padding:3px 22px 2px;border-radius:3px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 60%,var(--brass-lo));box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.plate span::before,.plate span::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--brass-lo);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.plate span::before{left:8px}.plate span::after{right:8px}
.cabinet{position:relative;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.18));box-shadow:inset 0 8px 18px rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.35)}
.track{position:relative;display:flex;justify-content:center;padding:22px 6px 0}
.track + .track{margin-top:4px}
.track::before{content:"";position:absolute;left:0;right:0;top:calc(22px + 138px);height:14px;z-index:0;
  background:linear-gradient(180deg,var(--wood-hi) 0,var(--wood) 40%,var(--wood-lo) 100%);box-shadow:0 6px 10px rgba(0,0,0,.55)}
.track::after{content:"";position:absolute;left:0;right:0;top:calc(22px + 138px);height:2px;background:rgba(255,220,170,.22);z-index:0}
.bottle{position:relative;z-index:1;flex:0 1 112px;min-width:0;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0 4px 12px;color:inherit;text-align:center}
.bottle .img{position:relative;height:138px;width:100%;max-width:96px;display:flex;align-items:flex-end;justify-content:center}
.bottle .img::before{content:"";position:absolute;left:50%;bottom:-2px;width:70%;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .25s}
.bottle img,.bottle svg.jar{position:relative;max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.6));transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.bottle img.framed{border-radius:4px;border:1px solid var(--line);max-height:120px}
.bottle:hover .img::before,.bottle:focus-visible .img::before{opacity:1}
.bottle:hover img,.bottle:hover svg.jar{transform:translateY(-6px) rotate(-2deg)}
.bottle:active img,.bottle:active svg.jar{transform:translateY(-10px) scale(1.04)}
.bottle .lab{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:1px;width:100%}
.bottle .nm{font-family:var(--f-serif);font-size:14.5px;line-height:1.15;hyphens:manual;text-wrap:balance}
.nw{white-space:nowrap}   /* mots composés (Saint-Germain, Eau-de-vie) jamais coupés au tiret */
.bottle .dg{font-size:13px;color:var(--brass-hi);font-variant-numeric:tabular-nums}
.bottle .mz{font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--brass)}
.bottle.enter{animation:rise .55s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.92)}to{opacity:1;transform:none}}
.shelf.special .cabinet{background:linear-gradient(180deg,rgba(60,25,10,.55),rgba(20,8,3,.35));border-color:var(--line)}
.shelf .note{text-align:center;font-family:var(--f-serif);font-style:italic;color:var(--muted);font-size:15px;margin:12px 0 0}
.hint{text-align:center;font-family:var(--f-serif);font-style:italic;color:var(--faint);font-size:14.5px;margin-top:-8px}

/* Fiche d'une bouteille */
.ov{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,8,6,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:0 max(0px, env(safe-area-inset-right,0px)) 0 max(0px, env(safe-area-inset-left,0px));animation:fade .25s ease both}
@keyframes fade{from{opacity:0}}
.card{position:relative;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,var(--wood) 0,var(--wood2) 120px,var(--panel) 121px);border-top:2px solid var(--brass);
  box-shadow:0 -10px 40px rgba(0,0,0,.6);animation:up .42s cubic-bezier(.2,1.1,.3,1) both;max-height:94%;overflow:auto}
@keyframes up{from{transform:translateY(60%);opacity:.3}to{transform:none;opacity:1}}
.card .hero{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center;margin-top:-6px}
.card .hero::after{content:"";position:absolute;left:12%;right:12%;bottom:-3px;height:12px;border-radius:3px;background:linear-gradient(180deg,var(--wood-hi),var(--wood-lo));box-shadow:0 6px 10px rgba(0,0,0,.5)}
.card .hero::before{content:"";position:absolute;left:50%;bottom:0;width:240px;height:120px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);}
.card .hero img,.card .hero svg.jar{position:relative;z-index:1;max-height:220px;max-width:70%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6));animation:drop .7s cubic-bezier(.25,1.5,.5,1) .08s both;transform-origin:50% 100%}
.card .hero img.framed{border-radius:6px;border:1px solid var(--line-strong);max-height:200px}
@keyframes drop{0%{transform:translateY(-60px) rotate(-8deg);opacity:0}60%{transform:translateY(4px) rotate(2deg);opacity:1}80%{transform:translateY(-2px) rotate(-1deg)}100%{transform:none}}
.card .x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(0,0,0,.35);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;padding:0}
.card .fam{margin-top:20px;font-family:var(--f-serif);font-style:italic;color:var(--brass);text-align:center}
.card h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,8vw,36px);line-height:1.05;margin:2px 0 10px;text-align:center;color:var(--brass-hi);text-wrap:balance}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink)}
.chip.apero{background:var(--apero-soft);border-color:var(--apero);color:var(--apero)}
.chip.digestif{background:var(--dige-soft);border-color:var(--dige);color:var(--dige)}
.chip.abvc{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.chip.mz{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.card .serve{margin:16px auto 0;max-width:42ch;text-align:center;font-size:17px;color:var(--ink)}
.card .serve::before{content:"Comment la servir";display:block;font-family:var(--f-serif);font-style:italic;color:var(--muted);font-size:15px;margin-bottom:2px}

/* La roulette */
.wheel{text-align:center}
.wheel .k{margin-top:22px;font-family:var(--f-serif);font-style:italic;color:var(--brass);font-size:17px}
.wheel .reel{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center}
.wheel .reel img,.wheel .reel svg.jar{max-height:220px;max-width:70%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6))}
.wheel .reel.tick img,.wheel .reel.tick svg.jar{animation:tick .09s ease}
@keyframes tick{from{transform:translateY(-14px);opacity:.4}}
.wheel .reel.land img,.wheel .reel.land svg.jar{animation:land .6s cubic-bezier(.25,1.6,.5,1)}
@keyframes land{0%{transform:scale(.85)}50%{transform:scale(1.08) rotate(2deg)}100%{transform:none}}
.wheel h2{min-height:1.1em}
.wheel .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.spark{position:absolute;left:50%;top:55%;width:6px;height:6px;border-radius:50%;background:var(--brass-hi);pointer-events:none;animation:spark .8s ease-out both}
@keyframes spark{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3);opacity:0}}

/* Mode gestion : liste */
.groups{display:flex;flex-direction:column;gap:26px}
.group{display:flex;flex-direction:column}
.group h2{font-family:var(--f-display);font-weight:400;font-size:22px;color:var(--brass-hi);margin:0 0 6px;display:flex;align-items:center;gap:12px;text-align:center}
.group h2::before,.group h2::after{content:"";flex:1;height:5px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:2px 14px;padding:12px 0;border-bottom:1px dotted var(--line);align-items:center}
.item:last-child{border-bottom:0}
.thumb{width:60px;height:80px;border-radius:4px;background:var(--brass-soft);border:1px solid var(--line);color:var(--brass);display:grid;place-items:center;font-family:var(--f-display);font-size:28px;overflow:hidden;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.cut{background:none;border:0;border-radius:0;overflow:visible}
.thumb.cut img{object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.item .main{min-width:0;display:flex;flex-direction:column;gap:3px}
.nameRow{display:flex;align-items:baseline;gap:8px;min-width:0}
.item .name{font-family:var(--f-serif);font-size:20px;line-height:1.15;min-width:0}
.leader{flex:1 1 14px;min-width:14px;border-bottom:2px dotted var(--line-strong);transform:translateY(-4px)}
.abv{font-family:var(--f-serif);font-size:16px;color:var(--brass-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.abv.none{color:var(--faint)}
.qty{font-family:var(--f-body);font-size:14px;font-weight:700;color:var(--on-brass);background:var(--brass);border-radius:3px;padding:0 5px;margin-left:6px;vertical-align:2px}
.maisonTag{font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--brass)}
.item .serve{font-size:15px;color:var(--muted);overflow-wrap:break-word}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.tag.apero{background:var(--apero-soft);color:var(--apero)}
.tag.digestif{background:var(--dige-soft);color:var(--dige)}
.side{display:flex;align-items:center;gap:8px}
.level{border:0;background:none;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:4px}
.level:hover{background:var(--brass-soft)}
.gauge{width:16px;height:34px;border:1.5px solid var(--muted);border-radius:4px 4px 5px 5px;position:relative;overflow:hidden}
.gauge i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--brass-hi),var(--brass));transition:height .4s ease}
.level small{font-size:11px;color:var(--muted);white-space:nowrap}
.edit{border:1px solid var(--line);background:none;border-radius:999px;padding:6px 12px;font-size:14px;color:var(--muted)}
.edit:hover{border-color:var(--line-strong);color:var(--ink)}
.rebuy{opacity:.6}

.empty{border:1px dashed var(--line-strong);border-radius:10px;padding:26px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:center}
.empty b{font-family:var(--f-display);font-weight:400;font-size:26px;color:var(--brass-hi)}
.status{font-size:14px;color:var(--muted);text-align:center}
.foot{text-align:center;font-family:var(--f-serif);font-style:italic;color:var(--faint);font-size:15px}

#addBtn{position:fixed;right:calc(max(16px, env(safe-area-inset-right,0px)) + 4px);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);padding:13px 18px;box-shadow:0 8px 24px rgba(0,0,0,.55);z-index:5}

/* Fiche ajout / modif */
.sheetBg{position:fixed;inset:0;background:rgba(4,9,7,.72);z-index:40;display:flex;align-items:flex-end;justify-content:center;
  padding:0 max(0px, env(safe-area-inset-right,0px)) 0 max(0px, env(safe-area-inset-left,0px));animation:fade .2s ease both}
.sheet{background:var(--panel);border-top:2px solid var(--brass);width:100%;max-width:560px;border-radius:14px 14px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;max-height:92%;overflow:auto;animation:up .35s cubic-bezier(.2,1.1,.3,1) both}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:28px;margin:0;color:var(--brass-hi)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.field .lbl{font-size:14px;font-weight:500;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:10px 12px;width:100%}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.checks{display:flex;gap:8px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--bg2);font-weight:500}
.chk input{accent-color:var(--brass);width:auto}
.photoRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.photoRow .thumb{width:72px;height:96px}
.photoNote{font-size:14px;color:var(--muted)}
.linkBtn{border:0;background:none;padding:0;color:var(--brass-hi);text-decoration:underline;font-size:14px}
.sheet .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.sheet .row .right{display:flex;gap:10px}
.err{color:var(--danger);font-size:15px}
.err:empty{display:none}
.sheet p{margin:0;color:var(--muted);font-size:16px}
.sheet .ok{color:var(--ink)}
.modeActs{display:flex;gap:8px;flex-wrap:wrap}
.qrBig{margin:56px auto 0;width:min(78vw,320px);background:#fff;padding:10px;border-radius:10px;box-shadow:0 0 0 2px var(--brass), 0 10px 24px rgba(0,0,0,.5)}
.qrBig img{display:block;width:100%;height:auto}
.qrUrl{text-align:center;margin-top:14px;font-size:16px;color:var(--muted)}
.qrUrl a{color:var(--brass-hi)}
.codeIn{letter-spacing:.3em;font-variant-numeric:tabular-nums;font-size:20px;text-align:center}

body.carte .g-only{display:none!important}
.gl{position:absolute;right:-2px;bottom:4px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#2A3B30,#0E1A14);border:1px solid var(--brass);color:var(--brass-hi);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.gl svg{width:17px;height:17px}
.bottle:hover .gl{animation:clink .5s ease}
@keyframes clink{30%{transform:rotate(-14deg) scale(1.12)}60%{transform:rotate(8deg)}100%{transform:none}}
.glassLine{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:var(--ink);font-size:16px}
.glassLine b{color:var(--brass-hi);font-weight:700}
.gl.big{position:static;width:38px;height:38px;flex:none}
.gl.big svg{width:24px;height:24px}
.bottle svg.jar{height:112px;width:75px}
.card .hero svg.jar,.wheel .reel svg.jar{height:200px;width:134px}

@media (max-width:440px){
  .moment b{font-size:18px}
  .item .name{font-size:18px}
  .trio{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}