/* Entrance showcase (/showcase/) — full-screen venue presentation for a door
   screen or tablet, landscape or portrait.

   Every size is a multiple of --u = 1% of the CONTENT box's shorter side (set
   by showcase.js). vw/vh would follow the physical screen, which is wrong when
   the page rotates itself (?rotate=90) and makes portrait text ~45 % smaller
   than landscape on the same 32" panel. The .landscape / .portrait class on
   #app picks the layout (auto from the aspect, or forced by the shop). */

:root{
  --ink:#0b0b0d; --ink-2:#15121a; --ink-3:#1d1922;
  --gold:#d4af37; --gold-lt:#f4dd8e; --gold-dk:#a97f2f;
  --ivory:#f6f1e4; --muted:#b8b0a0;
  --line:rgba(212,175,55,.22); --glass:rgba(10,10,12,.62);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; width:100%; height:100%; overflow:hidden; background:var(--ink); color:var(--ivory);
  font-family:var(--sans); user-select:none; -webkit-user-select:none; }
img{ -webkit-user-drag:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

.sc-app{ --u:1vmin; --cols:4; position:fixed; left:0; top:0; width:100vw; height:100vh;
  transform-origin:0 0; overflow:hidden; font-size:calc(var(--u)*2.1); }

/* ── boot ── */
.sc-boot{ position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:calc(var(--u)*3); background:radial-gradient(70% 60% at 50% 40%,#1c1710,var(--ink));
  transition:opacity .8s ease; }
.sc-boot.done{ opacity:0; pointer-events:none; }
.sc-boot-logo{ max-width:60%; max-height:calc(var(--u)*16); object-fit:contain; }
.sc-boot-logo:not([src]),.sc-logo:not([src]){ visibility:hidden; }
.sc-boot-name{ font-family:var(--serif); font-size:calc(var(--u)*7); color:var(--gold-lt); text-align:center; }
.sc-boot-bar{ width:calc(var(--u)*40); height:calc(var(--u)*.5); border-radius:9px; background:rgba(255,255,255,.12); overflow:hidden; }
.sc-boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt)); transition:width .3s; }
.sc-boot-txt{ font-size:calc(var(--u)*1.9); color:var(--muted); letter-spacing:.04em; }

/* ── attract ── */
.sc-attract{ position:absolute; inset:0; z-index:10; cursor:pointer; }
.sc-hero-stack,.sc-hero{ position:absolute; inset:0; }
.sc-hero{ opacity:0; transition:opacity 1.2s ease; background:#000; }
.sc-hero.on{ opacity:1; }
.sc-hero img,.sc-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* a video whose shape differs from the box (a landscape clip on a portrait
   32" panel) is shown whole, over a soft stretched copy of itself (.sc-vbg, a
   tiny canvas the browser upscales — no blur filter for cheap boxes to run) */
.sc-vbg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; display:block; }
.sc-hero.sc-fit video,.sc-dmedia.sc-fit video{ object-fit:contain; }
.sc-hero img{ transform:scale(1.05); }
.sc-hero.on img{ animation:sc-ken 11s ease-out forwards; }
@keyframes sc-ken{ from{ transform:scale(1.05) translate(0,0); } to{ transform:scale(1.16) translate(-1.6%,-1.2%); } }
.sc-hero-fb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:calc(var(--u)*6);
  background:radial-gradient(60% 70% at 50% 40%,#2a2114,var(--ink)); font-family:var(--serif);
  font-size:calc(var(--u)*8); color:var(--gold-dk); text-align:center; }
.sc-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,13,.62) 0%,transparent 22%,transparent 42%,rgba(11,11,13,.9) 100%); }
.sc-top{ position:absolute; top:0; left:0; right:0; z-index:4; display:flex; justify-content:space-between;
  align-items:flex-start; gap:calc(var(--u)*2); padding:calc(var(--u)*3) calc(var(--u)*3.4); }
.sc-brand{ display:flex; flex-direction:column; font-family:var(--serif); font-size:calc(var(--u)*4.2);
  text-shadow:0 2px 18px rgba(0,0,0,.6); min-width:0; }
.sc-brand small{ font-family:var(--sans); font-size:.38em; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:.4em; }
.sc-logo{ height:calc(var(--u)*9); width:auto; max-width:46vw; max-width:calc(var(--u)*60); object-fit:contain;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6)); }
.sc-tools{ display:flex; gap:calc(var(--u)*1.2); }
.sc-btn{ flex:none; width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:50%; border:1px solid rgba(212,175,55,.45);
  background:var(--glass); color:var(--gold-lt); display:inline-flex; align-items:center; justify-content:center;
  font-size:calc(var(--u)*2.3); font-weight:700; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sc-btn:active,.sc-pbtn:active,.sc-tab:active,.sc-arrow:active{ transform:scale(.94); }
.sc-lang{ font-size:calc(var(--u)*1.8); letter-spacing:.06em; }

.sc-cap{ position:absolute; z-index:3; left:0; bottom:0; padding:calc(var(--u)*4.4) calc(var(--u)*4.4) calc(var(--u)*7); }
.sc-kicker{ font-size:calc(var(--u)*1.9); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); min-height:1.2em; }
.sc-title{ margin:calc(var(--u)*.8) 0 0; font-family:var(--serif); font-weight:600; line-height:1.03;
  font-size:calc(var(--u)*8.2); text-shadow:0 3px 26px rgba(0,0,0,.7); max-width:15ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sc-price-pill{ display:inline-block; margin-top:calc(var(--u)*1.8); padding:calc(var(--u)*.7) calc(var(--u)*2.2);
  border-radius:999px; background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:#1a1204;
  font-weight:800; font-size:calc(var(--u)*3.2); font-variant-numeric:tabular-nums; }
.sc-price-pill:empty{ display:none; }
.sc-promo{ margin:calc(var(--u)*2) 0 0; font-size:calc(var(--u)*2.6); font-style:italic; opacity:.92;
  min-height:1.4em; transition:opacity .5s; max-width:42ch; }

.sc-qr{ z-index:4; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*.8);
  padding:calc(var(--u)*1.2); background:var(--glass); border:1px solid rgba(244,221,142,.35);
  border-radius:calc(var(--u)*1.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sc-qr img{ width:calc(var(--u)*15); height:auto; border-radius:calc(var(--u)*.6); background:#fff; padding:calc(var(--u)*.5); }
.sc-qr span{ font-size:calc(var(--u)*1.55); text-align:center; line-height:1.15; max-width:calc(var(--u)*16); }
.sc-attract .sc-qr{ position:absolute; right:calc(var(--u)*3.4); bottom:calc(var(--u)*7); }

.sc-cta{ position:absolute; z-index:4; left:50%; bottom:calc(var(--u)*2.4); transform:translateX(-50%);
  display:flex; align-items:center; gap:calc(var(--u)*1.2); white-space:nowrap;
  padding:calc(var(--u)*1.1) calc(var(--u)*2.6); border-radius:999px; background:var(--glass);
  border:1px solid rgba(212,175,55,.5); color:var(--gold-lt); font-size:calc(var(--u)*1.9);
  letter-spacing:.18em; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sc-cta-dot{ width:calc(var(--u)*1.2); height:calc(var(--u)*1.2); border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(212,175,55,.7); animation:sc-pulse 2s ease-out infinite; }
@keyframes sc-pulse{ 0%{ box-shadow:0 0 0 0 rgba(212,175,55,.7); } 100%{ box-shadow:0 0 0 calc(var(--u)*2) rgba(212,175,55,0); } }
.sc-progress{ position:absolute; z-index:4; left:0; right:0; bottom:0; height:calc(var(--u)*.45); background:rgba(255,255,255,.08); }
.sc-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt)); }

/* portrait attract: caption across the lower third, QR under the top bar */
.portrait .sc-cap{ right:0; padding-bottom:calc(var(--u)*11); }
.portrait .sc-title{ font-size:calc(var(--u)*10); max-width:none; }
.portrait .sc-kicker{ font-size:calc(var(--u)*2.3); }
.portrait .sc-price-pill{ font-size:calc(var(--u)*4); }
.portrait .sc-promo{ font-size:calc(var(--u)*3.1); max-width:none; }
.portrait .sc-attract .sc-qr{ top:calc(var(--u)*14); bottom:auto; }
.portrait .sc-attract .sc-qr img{ width:calc(var(--u)*19); }
.portrait .sc-attract .sc-qr span{ font-size:calc(var(--u)*1.9); max-width:calc(var(--u)*20); }
.portrait .sc-cta{ bottom:calc(var(--u)*4); font-size:calc(var(--u)*2.4); }
.portrait .sc-logo{ height:calc(var(--u)*11); }

/* ── browse ── */
.sc-browse{ position:absolute; inset:0; z-index:20; display:none; flex-direction:column; background:var(--ink); }
.sc-browse.show{ display:flex; }
.sc-bhead{ flex:none; display:flex; align-items:center; gap:calc(var(--u)*1.4);
  padding:calc(var(--u)*1.6) calc(var(--u)*2.8); border-bottom:1px solid var(--line); }
.sc-brand-sm{ font-size:calc(var(--u)*3); }
.sc-brand-sm .sc-logo{ height:calc(var(--u)*5.6); }
.sc-spacer{ flex:1; }
.sc-qr-sm{ flex-direction:row; padding:calc(var(--u)*.6) calc(var(--u)*1.2) calc(var(--u)*.6) calc(var(--u)*.6); }
.sc-qr-sm img{ width:calc(var(--u)*7.5); }
.sc-qr-sm span{ font-size:calc(var(--u)*1.4); max-width:calc(var(--u)*11); text-align:left; }
.sc-tabs{ flex:none; display:flex; gap:calc(var(--u)*1); overflow-x:auto; padding:calc(var(--u)*1.4) calc(var(--u)*2.8);
  border-bottom:1px solid rgba(212,175,55,.14); scrollbar-width:none; }
.sc-tabs::-webkit-scrollbar{ display:none; }
.portrait .sc-tabs{ flex-wrap:wrap; max-height:calc(var(--u)*16); overflow-y:auto; }
.sc-tab{ flex:none; padding:calc(var(--u)*1) calc(var(--u)*2.2); border-radius:999px; border:1px solid rgba(212,175,55,.32);
  background:transparent; color:var(--muted); font-size:calc(var(--u)*2); font-weight:600; white-space:nowrap; cursor:pointer; }
.sc-tab.on{ background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:#1a1204; border-color:transparent; }
.sc-pages-wrap{ flex:1; position:relative; overflow:hidden; }
.sc-pages{ display:flex; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; }
.sc-page{ flex:0 0 100%; height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  touch-action:var(--pan,pan-y);
  padding:calc(var(--u)*2.4) calc(var(--u)*8) calc(var(--u)*4); }
.portrait .sc-page{ padding:calc(var(--u)*2.4) calc(var(--u)*2.8) calc(var(--u)*6); }
.sc-page h2{ margin:0 0 calc(var(--u)*2.2); font-family:var(--serif); font-size:calc(var(--u)*4.4); color:var(--gold-lt); }
.sc-grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:calc(var(--u)*1.8); }
.sc-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  background:var(--ink-2); border:1px solid rgba(212,175,55,.16); border-radius:calc(var(--u)*1.6);
  transition:transform .15s,border-color .15s; }
.sc-card:active{ transform:scale(.97); border-color:rgba(212,175,55,.55); }
.sc-card-media{ position:relative; aspect-ratio:4/3; background:#1b1710; overflow:hidden; }
.sc-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s; }
.sc-card-media img.in{ opacity:1; }
.sc-card-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:calc(var(--u)*1.6);
  text-align:center; font-family:var(--serif); font-size:calc(var(--u)*2.4); color:var(--gold-dk);
  background:radial-gradient(70% 80% at 50% 40%,#2a2114,#14100b); }
.sc-play{ position:absolute; right:calc(var(--u)*1); bottom:calc(var(--u)*1); width:calc(var(--u)*4.2); height:calc(var(--u)*4.2);
  border-radius:50%; background:var(--glass); border:1px solid rgba(244,221,142,.5); color:var(--gold-lt);
  display:flex; align-items:center; justify-content:center; font-size:calc(var(--u)*1.8); }
.sc-card-body{ flex:1; display:flex; flex-direction:column; gap:calc(var(--u)*.6); padding:calc(var(--u)*1.3) calc(var(--u)*1.5) calc(var(--u)*1.6); }
.sc-card-name{ font-family:var(--serif); font-size:calc(var(--u)*2.4); line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-card-desc{ font-size:calc(var(--u)*1.55); color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-card-price{ margin-top:auto; padding-top:calc(var(--u)*.4); font-weight:800; color:var(--gold-lt);
  font-size:calc(var(--u)*2.3); font-variant-numeric:tabular-nums; }
.sc-card-price small,.sc-dprice small{ font-size:.62em; font-weight:600; color:var(--muted); margin-left:.3em; }
.portrait .sc-card-name{ font-size:calc(var(--u)*2.9); }
.portrait .sc-card-desc{ font-size:calc(var(--u)*1.9); }
.portrait .sc-card-price{ font-size:calc(var(--u)*2.8); }
.sc-soldout .sc-card-media{ filter:grayscale(.85) brightness(.5); }
.sc-badge{ position:absolute; z-index:2; top:calc(var(--u)*1); left:calc(var(--u)*1); padding:calc(var(--u)*.4) calc(var(--u)*1);
  border-radius:calc(var(--u)*.6); background:#8a1c1c; color:#fff; font-size:calc(var(--u)*1.3); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; }
.sc-arrow{ position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:calc(var(--u)*6.4); height:calc(var(--u)*6.4);
  border-radius:50%; border:1px solid rgba(212,175,55,.45); background:var(--glass); color:var(--gold-lt);
  display:flex; align-items:center; justify-content:center; font-size:calc(var(--u)*3.6); line-height:1; cursor:pointer; }
.sc-prev{ left:calc(var(--u)*1); } .sc-next{ right:calc(var(--u)*1); }
.portrait .sc-arrow{ top:auto; bottom:calc(var(--u)*2); transform:none; }
.portrait .sc-prev{ left:calc(var(--u)*2.8); } .portrait .sc-next{ right:calc(var(--u)*2.8); }

/* ── detail ── */
.sc-detail{ position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(6,6,8,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sc-detail.show{ display:flex; }
.sc-dbox{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; width:min(92%,calc(var(--u)*165)); max-height:88%;
  overflow:hidden; background:var(--ink-2); border:1px solid rgba(212,175,55,.3); border-radius:calc(var(--u)*2.4);
  box-shadow:0 30px 90px rgba(0,0,0,.6); }
.sc-dmedia{ position:relative; min-height:calc(var(--u)*40); background:#120f0a; }
.sc-dmedia img,.sc-dmedia video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sc-dmedia{ overflow:hidden; }
.sc-dinfo{ display:flex; flex-direction:column; gap:calc(var(--u)*1.6); padding:calc(var(--u)*4); overflow-y:auto; }
.sc-dinfo h2{ margin:0; font-family:var(--serif); font-size:calc(var(--u)*5.2); line-height:1.05; }
.sc-dprice{ font-size:calc(var(--u)*3.8); font-weight:800; color:var(--gold-lt); font-variant-numeric:tabular-nums; }
.sc-ddesc{ margin:0; font-size:calc(var(--u)*2.3); line-height:1.5; opacity:.92; }
.sc-dpair{ margin:0; font-style:italic; color:var(--gold); font-size:calc(var(--u)*2); }
.sc-dpair:empty,.sc-ddesc:empty{ display:none; }
.sc-chips{ display:flex; flex-wrap:wrap; gap:calc(var(--u)*.8); }
.sc-chip{ font-size:calc(var(--u)*1.4); letter-spacing:.05em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(212,175,55,.38); border-radius:999px; padding:calc(var(--u)*.35) calc(var(--u)*1.3); }
.sc-dactions{ margin-top:auto; display:flex; gap:calc(var(--u)*1.2); }
.sc-pbtn{ display:inline-flex; align-items:center; gap:calc(var(--u)*1); padding:calc(var(--u)*1.4) calc(var(--u)*2.8);
  border-radius:999px; border:0; background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:#1a1204;
  font-weight:800; font-size:calc(var(--u)*2.2); cursor:pointer; }
.sc-dclose{ position:absolute; z-index:3; top:calc(var(--u)*1.6); right:calc(var(--u)*1.6); }
.portrait .sc-dbox{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); width:92%; max-height:90%; }
.portrait .sc-dmedia{ aspect-ratio:4/3; min-height:0; }
.portrait .sc-dinfo h2{ font-size:calc(var(--u)*6.6); }
.portrait .sc-dprice{ font-size:calc(var(--u)*4.6); }
.portrait .sc-ddesc{ font-size:calc(var(--u)*2.9); }
.portrait .sc-pbtn{ font-size:calc(var(--u)*2.8); }

/* ── browse: the wall (menu style «wall») ──
   One endless wall of dishes. The focused category is the middle row, bigger
   and squarer; the others stay a dimmer wall of circles around it. Every tile
   is placed by showcase.js with a transform, so sizes here are the tile's
   full size (--ws) and the script scales it down. */
.wallmode .sc-tabs,.wallmode .sc-pages-wrap{ display:none; }
.sc-wall{ flex:1; position:relative; overflow:hidden; touch-action:none; contain:strict; cursor:grab;
  background:radial-gradient(70% 55% at 50% 45%,#221b12,var(--ink)); }
.sc-wt{ position:absolute; left:0; top:0; width:var(--ws); height:var(--ws); margin:calc(var(--ws)/-2) 0 0 calc(var(--ws)/-2);
  border-radius:50%; overflow:hidden; background:#1b1710; will-change:transform,opacity; }
.sc-wt::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(var(--u)*.35) var(--ring); pointer-events:none; }
.sc-wt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sc-wt img:not([src]){ visibility:hidden; }
.sc-wt-nm{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12%; text-align:center;
  font-family:var(--serif); font-size:calc(var(--u)*2.2); line-height:1.15; color:var(--gold-lt);
  background:radial-gradient(70% 80% at 50% 40%,#2a2114,#14100b); }
.sc-wt.hot{ border-radius:16%; }
.sc-wt.focus{ border-radius:14%; box-shadow:0 0 0 calc(var(--u)*.45) var(--ring),0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.8); }
.sc-wt.out img{ filter:grayscale(.85) brightness(.55); }
.sc-wall-band{ position:absolute; left:0; right:0; top:0; height:var(--bh); margin-top:calc(var(--bh)/-2); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035) 20%,rgba(255,255,255,.035) 80%,transparent);
  border-top:1px solid rgba(212,175,55,.12); border-bottom:1px solid rgba(212,175,55,.12); }
.sc-wall-tag{ position:absolute; left:0; top:0; z-index:900; padding:calc(var(--u)*.45) calc(var(--u)*1.4); border-radius:999px;
  font-weight:800; font-size:calc(var(--u)*1.7); color:#1a1204; white-space:nowrap; pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,.5); }
.sc-wall-tag.big{ z-index:1050; font-family:var(--serif); font-size:calc(var(--u)*6.4); padding:calc(var(--u)*.4) calc(var(--u)*2.8); }
.sc-wall-info{ position:absolute; z-index:1100; left:50%; top:0; transform:translateX(-50%); max-width:86%; text-align:center; pointer-events:none;
  padding:calc(var(--u)*1.4) calc(var(--u)*3.4); border-radius:calc(var(--u)*2.6); background:rgba(10,10,12,.88);
  border:1px solid rgba(212,175,55,.35); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.sc-wall-info[hidden]{ display:none; }
.sc-wall-info h3{ margin:0; font-family:var(--serif); font-weight:600; font-size:calc(var(--u)*5); line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-wall-info p{ margin:calc(var(--u)*.5) 0 0; color:var(--muted); font-size:calc(var(--u)*2.3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-wall-price{ display:inline-block; margin-top:calc(var(--u)*.8); padding:calc(var(--u)*.45) calc(var(--u)*2); border-radius:999px;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:#1a1204; font-weight:800; font-size:calc(var(--u)*3.6);
  font-variant-numeric:tabular-nums; }
.sc-wall-price small{ font-size:.62em; font-weight:600; margin-left:.3em; }
.sc-wall-price:empty{ display:none; }
.sc-wall-legend{ position:absolute; z-index:1200; left:50%; bottom:calc(var(--u)*2); transform:translateX(-50%); max-width:calc(100% - var(--u)*18);
  display:flex; gap:calc(var(--u)*.6); overflow-x:auto; scrollbar-width:none; padding:calc(var(--u)*.7) calc(var(--u)*1);
  border-radius:999px; background:rgba(10,10,12,.85); border:1px solid rgba(212,175,55,.25); }
.sc-wall-legend::-webkit-scrollbar{ display:none; }
.sc-wall-legend button{ flex:none; display:flex; align-items:center; gap:calc(var(--u)*.6); padding:calc(var(--u)*.55) calc(var(--u)*1.3);
  border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:calc(var(--u)*1.7); font-weight:700; white-space:nowrap; cursor:pointer; }
.sc-wall-legend button i{ width:calc(var(--u)*1.3); height:calc(var(--u)*1.3); border-radius:50%; background:var(--ring); }
.sc-wall-legend button.on{ background:var(--ring); color:#1a1204; }
.sc-wall-legend button.on i{ background:#1a1204; }
.portrait .sc-wall-info h3{ font-size:calc(var(--u)*6); }
.portrait .sc-wall-info p{ font-size:calc(var(--u)*2.8); }
.portrait .sc-wall-price{ font-size:calc(var(--u)*4.2); }
.portrait .sc-wall-legend button{ font-size:calc(var(--u)*2); }

/* ── misc ── */
.sc-full{ position:absolute; z-index:70; left:calc(var(--u)*2); bottom:calc(var(--u)*2); width:calc(var(--u)*5); height:calc(var(--u)*5);
  border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.45); color:#fff;
  font-size:calc(var(--u)*2.2); line-height:1; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.sc-off{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; text-align:center; padding:2rem; }
.sc-off .sc-brand{ align-items:center; font-size:clamp(1.6rem,5vw,3rem); }
.sc-off .sc-logo{ height:clamp(3rem,10vmin,6rem); max-width:80vw; }
.sc-off p{ color:var(--muted); max-width:32ch; }

@media (prefers-reduced-motion:reduce){
  .sc-hero.on img{ animation:none; } .sc-cta-dot{ animation:none; } .sc-pages{ transition:none; }
  .sc-hero{ transition:opacity .3s; }
}

/* weather + programme chip, dish badges (owner 13/10) */
.sc-wx{ display:inline-flex; align-items:center; padding:calc(var(--u)*.5) calc(var(--u)*1.4); border-radius:999px;
        background:rgba(0,0,0,.35); color:#fff; font-size:calc(var(--u)*1.7); font-weight:700; white-space:nowrap;
        backdrop-filter:blur(6px); }
.sc-wx[hidden]{ display:none; }
.sc-tags{ position:absolute; z-index:2; top:calc(var(--u)*1); right:calc(var(--u)*1); display:flex; flex-direction:column; gap:calc(var(--u)*.4); align-items:flex-end; }
.sc-tags-inline{ position:static; display:inline-flex; flex-direction:row; flex-wrap:wrap; vertical-align:middle; gap:calc(var(--u)*.4); }
.sc-tag{ padding:calc(var(--u)*.3) calc(var(--u)*.9); border-radius:999px; font-size:calc(var(--u)*1.25); font-weight:800;
         background:rgba(255,255,255,.92); color:#2b2118; white-space:nowrap; letter-spacing:0; text-transform:none; }
.sc-tag-pick{ background:var(--gold, #e8b53a); color:#231a05; }
.sc-tag-hot{ background:#ff6b3d; color:#fff; }

/* ⚙ settings from the display (Manager PIN) */
.sc-gear{ opacity:.5; }
.sc-gear:hover, .sc-gear:focus{ opacity:1; }
.sc-set{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
         background:rgba(5,6,10,.78); backdrop-filter:blur(6px); padding:16px; }
.sc-set[hidden]{ display:none; }
.sc-set-box{ background:#15161c; color:#f3efe6; border:1px solid rgba(255,255,255,.12); border-radius:20px;
             width:min(640px,100%); max-height:calc(100% - 32px); display:flex; flex-direction:column; overflow:hidden;
             font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.sc-set-box header{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.sc-set-box header h2{ flex:1; margin:0; font-size:20px; }
.sc-pin{ padding:18px; text-align:center; }
.sc-pin-lbl{ color:#b9b3a6; font-size:15px; }
.sc-pin-dots{ font-size:34px; letter-spacing:.4em; min-height:48px; }
.sc-pin-msg{ color:#f2a541; min-height:20px; font-size:14px; margin-bottom:6px; }
.sc-pin-keys{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:300px; margin:0 auto; }
.sc-pin-keys button{ height:62px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
                     color:#fff; font-size:24px; cursor:pointer; }
.sc-form{ overflow:auto; padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.sc-form[hidden]{ display:none; }
.sc-form h3{ margin:8px 0 0; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold, #e8b53a); }
.sc-form label{ display:flex; flex-direction:column; gap:6px; color:#cfc8ba; }
.sc-form label.chk{ flex-direction:row; align-items:center; gap:10px; color:#f3efe6; }
.sc-form input[type=checkbox]{ width:22px; height:22px; flex:none; }
.sc-form input[type=number], .sc-form select, .sc-form textarea{ background:rgba(255,255,255,.07); color:#fff;
       border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:10px; font-size:16px; width:100%; box-sizing:border-box; }
.sc-form select option{ color:#000; }
.sc-form textarea{ min-height:84px; resize:vertical; }
.sc-form .row2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.sc-form .note{ color:#9a9488; font-size:13px; }
.sc-form .acts{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; align-items:center; position:sticky; bottom:-18px;
                background:#15161c; padding:10px 0 2px; }
.sc-form .acts .msg{ flex:1; color:#f2a541; font-size:14px; }
.sc-form button{ border:0; border-radius:12px; padding:12px 18px; font-weight:800; font-size:15px; cursor:pointer; }
.sc-form .pri{ background:var(--gold, #e8b53a); color:#231a05; }
.sc-form .sec{ background:rgba(255,255,255,.1); color:#fff; }
@media (max-width:520px){ .sc-form .row2{ grid-template-columns:minmax(0,1fr); } }

/* language picker: every language the menu is translated into (owner 13/10) */
.sc-langs{ position:fixed; inset:0; z-index:180; display:flex; align-items:center; justify-content:center; background:rgba(5,6,10,.7);
           backdrop-filter:blur(6px); padding:16px; }
.sc-langs[hidden]{ display:none; }
.sc-langs-box{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; width:min(680px, 100%);
               max-height:calc(100% - 32px); overflow:auto; padding:18px; border-radius:20px; background:#15161c;
               border:1px solid rgba(255,255,255,.12); }
.sc-langs-box button{ padding:16px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
                      color:#f3efe6; font-size:18px; font-weight:700; cursor:pointer; }
.sc-langs-box button.on{ background:var(--gold, #e8b53a); color:#231a05; border-color:transparent; }
.sc-app.rtl .sc-card-name, .sc-app.rtl .sc-card-desc, .sc-app.rtl .sc-page h2, .sc-app.rtl .sc-title, .sc-app.rtl .sc-kicker,
.sc-app.rtl .sc-promo, .sc-app.rtl .sc-tabs > *, .sc-app.rtl #dName, .sc-app.rtl #dDesc, .sc-app.rtl #dPair, .sc-app.rtl #wName,
.sc-app.rtl #wDesc, .sc-app.rtl .sc-cta, .sc-app.rtl .sc-qr span, .sc-app.rtl .sc-wt-nm{ unicode-bidi:plaintext; }