:root{
  --e:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --paper:#f4f2ee;
  --ink:#14130f;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#0b0b0d;color:#fff;overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;
  font:600 15px/1.35 "Helvetica Neue",Helvetica,Inter,system-ui,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  user-select:none;
  transition:background .8s var(--e-soft);
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* entrada suau en carregar */
body.booting .stage,body.booting .topbar,body.booting .menu,
body.booting .arrow{opacity:0}
.stage,.topbar,.menu,.arrow{transition:opacity .7s var(--e-soft)}

/* ---------- escenari ---------- */
.stage{position:fixed;inset:0;touch-action:none;transition:filter .5s var(--e-soft),transform .5s var(--e-soft),opacity .7s var(--e-soft)}
.layer{position:absolute;inset:0;opacity:0;pointer-events:none;transform:scale(1.015);
  transition:opacity .5s var(--e-soft),transform .7s var(--e)}
.layer.on{opacity:1;pointer-events:auto;transform:none}
.layer.off{opacity:0;transform:scale(.992);transition-duration:.4s}
.layer svg{width:100%;height:100%;display:block}
.stage.peek{filter:blur(16px) saturate(.85) brightness(.8);transform:scale(1.035)}

/* pista de lliscar, només quan l'escena no hi cap sencera */
.hint{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);z-index:33;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(255,255,255,.93);color:#14130f;text-shadow:none;
  font-size:12.5px;padding:7px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--e-soft),transform .55s var(--e)}
.hint.on{opacity:1;transform:translateX(-50%)}

/* llum d'ambient per estança */
.warmth{position:fixed;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  opacity:0;transition:opacity .8s var(--e-soft),background .8s var(--e-soft)}
.warmth.on{opacity:1}
.vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.46) 100%)}
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- barra superior ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(15px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 15px calc(22px + env(safe-area-inset-left))}
.nav-left{display:flex;gap:26px}
.topbar button{position:relative;opacity:.9;transition:opacity .25s var(--e-soft)}
.topbar button::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--e);opacity:.8}
.topbar button:hover{opacity:1}
.topbar button:hover::after{transform:scaleX(1);transform-origin:left}
.brand{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.cart-btn{white-space:nowrap}
.cart-btn.bump{animation:bump .5s var(--e)}
@keyframes bump{40%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---------- fletxes amb etiqueta ---------- */
.arrow{position:fixed;top:50%;z-index:30;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;
  transition:opacity .25s var(--e-soft)}
.arrow .chev{flex:none;width:36px;height:36px;display:grid;place-items:center;
  border:1.4px solid rgba(255,255,255,.8);border-radius:50%;font-size:14px;
  transition:background .3s var(--e-soft),transform .35s var(--e),border-color .3s}
.arrow:hover .chev{background:rgba(255,255,255,.92);color:#111;border-color:transparent;text-shadow:none}
.arrow-prev:hover .chev{transform:translateX(-3px)}
.arrow-next:hover .chev{transform:translateX(3px)}
.arrow-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:14px;
  transition:max-width .45s var(--e),opacity .3s var(--e-soft)}
.arrow:hover .arrow-label{max-width:180px;opacity:.95}
.arrow-prev{left:22px}
.arrow-next{right:22px}

/* ---------- nom d'estança durant el canvi ---------- */
.roomname{position:fixed;inset:0;z-index:24;display:grid;place-items:center;pointer-events:none}
.roomname span{font-size:clamp(38px,6.5vw,92px);letter-spacing:-.035em;
  opacity:0;transform:translateY(14px) scale(.98);filter:blur(4px);
  transition:opacity .5s var(--e-soft),transform .6s var(--e),filter .5s var(--e-soft)}
.roomname.show span{opacity:1;transform:none;filter:none}

/* ---------- llista d'estances ---------- */
.menu{position:fixed;left:calc(20px + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom));z-index:30}
.menu ul{list-style:none;margin:0;padding:0;width:max-content}
.menu li{position:relative;font-size:clamp(19px,2vw,27px);line-height:1.16;letter-spacing:-.022em;
  color:rgba(255,255,255,.32);cursor:pointer;width:max-content;padding-left:0;
  transition:color .28s var(--e-soft),padding-left .38s var(--e)}
.menu li::before{content:"";position:absolute;left:0;top:50%;width:12px;height:1.5px;
  background:currentColor;opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--e-soft),transform .38s var(--e)}
.menu li:hover{color:rgba(255,255,255,.82);padding-left:20px}
.menu li:hover::before{opacity:.7;transform:none}
.menu li.on{color:#fff;padding-left:20px}
.menu li.on::before{opacity:1;transform:none}
.menu-foot{margin-top:13px;display:flex;align-items:center;gap:10px}
.shuffle{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:3px 9px;transition:color .25s,border-color .25s,background .25s}
.shuffle:hover{color:#111;background:rgba(255,255,255,.9);border-color:transparent;text-shadow:none}


/* ---------- punts calents ---------- */
.hs{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.hs .halo{fill:#d8402c;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);
  transition:opacity .4s var(--e-soft),transform .5s var(--e)}
.hs .ring{fill:rgba(255,255,255,.3);transform-box:fill-box;transform-origin:center;
  animation:pulse 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.hs .dot{fill:#fff;stroke:rgba(0,0,0,.3);stroke-width:.5;transform-box:fill-box;transform-origin:center;
  transition:transform .3s var(--e),fill .3s var(--e-soft),stroke .3s}
.hs:hover .dot{transform:scale(1.5)}

/* seleccionat: rodona vermella amb halo, sense contorn de navegador */
.hs.active .halo{opacity:.26;transform:none;animation:breathe 2.8s ease-in-out infinite}
.hs.active .ring{animation:none;fill:rgba(216,64,44,.42);transform:scale(1.35)}
.hs.active .dot{fill:#d8402c;stroke:rgba(255,255,255,.9);stroke-width:.75;transform:scale(1.45)}

/* accés per teclat: anell blanc, no la caixa blava del navegador */
.hs:focus-visible .ring{animation:none;fill:rgba(255,255,255,.9);transform:scale(1.5)}
.hs:focus-visible .dot{transform:scale(1.5)}

@keyframes pulse{0%{transform:scale(.55);opacity:.85}60%{transform:scale(2.1);opacity:0}100%{opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.26}50%{transform:scale(1.22);opacity:.16}}

/* etiqueta que segueix el punt */
.tip{position:fixed;z-index:34;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);color:#14130f;text-shadow:none;
  font-size:13px;padding:6px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  opacity:0;transform:translate(-50%,-4px) scale(.94);transform-origin:50% 120%;
  transition:opacity .22s var(--e-soft),transform .32s var(--e)}
.tip.on{opacity:1;transform:translate(-50%,-12px) scale(1)}
.tip i{font-style:normal;opacity:.4;font-size:12px}

/* ---------- fitxa de producte ---------- */
.panel{position:fixed;right:0;top:0;bottom:0;width:min(400px,90vw);z-index:40;
  background:var(--paper);color:var(--ink);text-shadow:none;
  padding:70px 32px 28px;transform:translateX(103%);
  transition:transform .55s var(--e),box-shadow .55s var(--e);
  display:flex;flex-direction:column;overflow:auto}
.panel.open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.28)}
.panel>*{opacity:0;transform:translateY(10px)}
.panel::before{opacity:1!important;transform:translateX(-50%)!important}
.panel.open>*{opacity:1;transform:none;transition:opacity .45s var(--e-soft) var(--d,0s),transform .55s var(--e) var(--d,0s)}
.panel-eyebrow{--d:.06s;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8a8578}
.panel h2{--d:.1s;margin:6px 0 0;font-size:31px;line-height:1.05;letter-spacing:-.028em}
.panel p{--d:.15s;margin:14px 0 0;font-weight:500;font-size:14.5px;line-height:1.58;color:#4a473f}
.specs{--d:.2s;margin:20px 0 0;padding:0;border-top:1px solid #e0dcd3}
.specs div{display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid #e0dcd3;font-size:13px}
.specs dt{color:#8a8578;font-weight:600;letter-spacing:.02em}
.specs dd{margin:0;font-weight:500;color:#33302a;text-align:right}
.panel-foot{--d:.26s;margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:14px}
.panel-price{font-size:21px;letter-spacing:-.01em}
.panel-x{position:absolute;top:20px;right:24px;font-size:26px;line-height:1;color:var(--ink);opacity:.45;
  transition:opacity .25s,transform .3s var(--e)}
.panel-x:hover{opacity:1;transform:rotate(90deg)}
.buy{background:var(--ink);color:#fff;text-shadow:none;padding:15px 18px;border-radius:3px;
  font-size:14px;transition:background .25s,transform .16s var(--e-soft)}
.buy:hover{background:#3a352c}
.buy:active{transform:scale(.98)}
.buy:disabled{background:#d5d1c8;color:#7d7a72;cursor:not-allowed;transform:none}

/* ---------- cistella ---------- */
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(400px,90vw);z-index:45;
  background:#14130f;color:#fff;text-shadow:none;padding:22px 26px 26px;
  transform:translateX(103%);transition:transform .55s var(--e);
  display:flex;flex-direction:column}
.drawer.open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.4)}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.drawer .panel-x{position:static;color:#fff}
.drawer-list{list-style:none;margin:16px 0 0;padding:0;flex:1;overflow:auto}
.drawer-list li{display:flex;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:500;font-size:14px;
  animation:slidein .45s var(--e) both}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}}
.drawer-list .nm{font-weight:600}
.drawer-list .rm{color:rgba(255,255,255,.4);font-size:12px}
.drawer-list .del{opacity:.4;font-size:18px;line-height:1;transition:opacity .2s,transform .25s var(--e)}
.drawer-list .del:hover{opacity:1;transform:rotate(90deg)}
.drawer-list .empty{border:0;color:rgba(255,255,255,.45);justify-content:flex-start}
.drawer-foot{padding-top:16px;display:flex;flex-direction:column;gap:14px}
.total{display:flex;justify-content:space-between;font-size:16px}
.drawer .buy{background:#fff;color:#14130f}
.drawer .buy:hover{background:#ddd8ce}

.scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--e-soft)}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- índex de la botiga ---------- */
.shop{position:fixed;inset:0;z-index:50;background:var(--paper);color:var(--ink);text-shadow:none;
  overflow:auto;padding:78px 6vw 90px;opacity:0;pointer-events:none;
  transform:translateY(12px);transition:opacity .4s var(--e-soft),transform .55s var(--e)}
.shop.open{opacity:1;pointer-events:auto;transform:none}
.shop h1{margin:0 0 6px;font-size:clamp(30px,5vw,58px);letter-spacing:-.035em}
.shop .sub{font-weight:500;color:#7d7a70;margin:0 0 40px;font-size:15px}
.shop section{margin-bottom:34px}
.shop h3{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8a8578}
.shop ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.shop li{position:relative;padding:16px 16px 18px;cursor:pointer;
  border-top:1px solid #dcd8cf;border-right:1px solid #dcd8cf;
  transition:background .25s var(--e-soft)}
.shop li::after{content:"→";position:absolute;right:16px;top:16px;opacity:0;
  transform:translateX(-6px);transition:opacity .25s,transform .35s var(--e)}
.shop li:hover{background:#fff}
.shop li:hover::after{opacity:.45;transform:none}
.shop .nm{display:block;font-size:16px;letter-spacing:-.012em;padding-right:22px}
.shop .pr{display:block;font-weight:500;color:#6d6a62;font-size:13.5px;margin-top:3px}
.shop .close{position:fixed;top:20px;right:5vw;font-size:30px;line-height:1;color:var(--ink);opacity:.55;z-index:51;
  transition:opacity .25s,transform .3s var(--e)}
.shop .close:hover{opacity:1;transform:rotate(90deg)}

/* ---------- telèfon ---------- */
@media (hover:none){
  .topbar button:hover::after{transform:scaleX(0)}
  .menu li:hover{padding-left:0;color:rgba(255,255,255,.32)}
  .menu li:hover::before{opacity:0}
  .menu li.on:hover{padding-left:20px;color:#fff}
  .menu li.on:hover::before{opacity:1}
  .shop li:hover{background:transparent}
}

@media (max-width:760px){
  .nav-left{gap:16px}
  .nav-left,.brand,.cart-btn{font-size:13px}
  .arrow-label{display:none}
  .arrow{padding:4px}
  .arrow .chev{width:40px;height:40px}
  .arrow-prev{left:calc(6px + env(safe-area-inset-left))}
  .arrow-next{right:calc(6px + env(safe-area-inset-right))}
  .tip{display:none}
  .roomname span{font-size:clamp(34px,11vw,58px)}
  .grain{opacity:.035}
}

/* vertical: la llista a baix a l'esquerra i les fletxes a la dreta, fora de
   l'escena, perquè el dit hi pugui lliscar sense topar-hi */
@media (max-width:760px) and (orientation:portrait){
  .menu{bottom:calc(20px + env(safe-area-inset-bottom))}
  .menu li{font-size:19px;line-height:1.24}
  .menu-foot{margin-top:10px}
  .stage.peek{filter:none;transform:none}
  .arrow{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));transform:none}
  .arrow-prev{left:auto;right:calc(68px + env(safe-area-inset-right))}
  .arrow-next{right:calc(16px + env(safe-area-inset-right))}
  .arrow-prev:hover .chev,.arrow-next:hover .chev{transform:none}
}

/* pantalles baixes (telèfon tombat): la llista passa a ser una fila */
@media (max-height:560px){
  .menu{left:0;right:0;bottom:0;
    padding:8px calc(14px + env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none;
    background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu ul{display:flex;gap:17px;width:auto}
  .menu li{font-size:15px;line-height:1.2;padding-left:0}
  .menu li:hover,.menu li.on{padding-left:0}
  .menu li::before{display:none}
  .menu-foot{margin-top:0;flex:none}
  .shuffle{padding:2px 8px;font-size:10.5px;white-space:nowrap}
  .arrow{top:auto;bottom:calc(58px + env(safe-area-inset-bottom));transform:none}
  .arrow-prev{left:auto;right:calc(64px + env(safe-area-inset-right))}
  .arrow-next{right:calc(14px + env(safe-area-inset-right))}
  .arrow:hover .chev{transform:none}
  .arrow-prev:hover .chev,.arrow-next:hover .chev{transform:none}
}

/* fitxa i cistella passen a ser safates inferiors */
@media (max-width:640px){
  .panel,.drawer{
    left:0;right:0;top:auto;bottom:0;width:auto;
    max-height:min(80vh,620px);border-radius:18px 18px 0 0;
    transform:translateY(103%);
    padding:30px 22px calc(22px + env(safe-area-inset-bottom))}
  .panel.open{transform:none;box-shadow:0 -18px 50px rgba(0,0,0,.34)}
  .drawer.open{transform:none;box-shadow:0 -18px 50px rgba(0,0,0,.45)}
  .panel::before,.drawer::before{content:"";position:absolute;top:10px;left:50%;
    transform:translateX(-50%);width:38px;height:4px;border-radius:2px;
    background:rgba(0,0,0,.16);opacity:1}
  .drawer::before{background:rgba(255,255,255,.25)}
  .panel{padding-top:26px}
  .panel h2{font-size:25px}
  .panel p{font-size:14px;line-height:1.5}
  .panel-x{top:16px;right:18px;font-size:24px}
  .specs{margin-top:16px}
  .specs div{padding:8px 0}
  .panel-foot{padding-top:20px;flex-direction:row;align-items:center;
    justify-content:space-between;gap:12px}
  .panel-foot .buy{flex:1;max-width:62%}
  .drawer-list{max-height:44vh}
  .shop{padding:66px 20px calc(50px + env(safe-area-inset-bottom))}
  .shop h1{font-size:32px}
  .shop .sub{margin-bottom:26px;font-size:14px}
  .shop ul{grid-template-columns:1fr}
  .shop li{border-right:0}
  .shop .close{right:20px;top:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}