@font-face { font-family: 'Hushy'; src: url('assets/fonts/Hushy.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mardoto'; src: url('assets/fonts/Mardoto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --u: min(52.8vw, 29.5svh); /* njësia e shkallës: gjerësia e butonit në faqen kryesore (poster 9:16) */
  --red: #d73739;
  --red-deep: #b82a2d;
  --cream: #f9eecc;
  --ink: #3b1110;
  --display: 'Hushy', 'Bowlby One', 'Arial Black', sans-serif;
  --body: 'Mardoto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--red); color: var(--cream);
  font-family: var(--body); -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
.view { animation: vfade .18s ease-out; }
@keyframes vfade { from { opacity: 0; } }
.view { max-width: 560px; margin: 0 auto; padding: 0 21px 110px; min-height: 100svh; }
#home.view { max-width: none; height: auto; min-height: 100svh; }
a { color: inherit; }

/* --- Faqja kryesore --- */
/* Faqja kryesore = poster 9:16 si te foto e miratuar. --w = gjerësia e butonit; poster-i përshtatet në gjerësi (52.8vw) dhe në lartësi (29.5svh) */
#home { --w: var(--u); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; max-width: none; overflow-x: clip; overflow-y: visible; }
.brand { display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * .03); padding-top: calc(var(--w) * .16 + max(0px, 100svh - var(--w) * 3.39) * .3); margin-bottom: calc(var(--w) * .114); }
.brand-mark { width: calc(var(--w) * .21); height: auto; }
.brand-word { width: calc(var(--w) * .54); height: auto; }
.home-nav { width: var(--w); display: flex; flex-direction: column; gap: calc(var(--w) * .075); }
.home-nav a {
  display: grid; place-items: center; text-align: center; text-decoration: none;
  min-height: calc(var(--w) * .265); padding: calc(var(--w) * .03) calc(var(--w) * .05); border-radius: calc(var(--w) * .1);
  background: var(--cream); color: #d51f23;
  font-weight: 700; -webkit-text-stroke: .5px currentColor; font-size: calc(var(--w) * .083); text-transform: uppercase; line-height: 1.12;
  transition: transform .12s;
}
.home-nav a:active { transform: scale(.97); }
.home-bottom { position: relative; width: min(100vw, calc(var(--w) * 1.78)); flex: none; margin-top: 0; padding: calc(var(--w) * .09) calc(var(--w) * .1) calc(var(--w) * .25); overflow: visible; }
.mascot-wrap { position: relative; width: 100%; aspect-ratio: 442.94 / 605.58; transform: translateX(calc(var(--w) * -.05)); /* pak majtas, që krahu i mascot-it të mos prekë ikonën e rrotës */ }
.mascot-wrap img, .mascot-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot-wrap svg { overflow: visible; }
.arc-text {
  font-family: var(--display); font-size: 44px; fill: var(--cream);
  stroke: none;
}

/* --- Faqja e menusë --- */
.menu-head { position: relative; padding: 21px 0 8px; }
.back {
  display: inline-block; font-weight: 700; font-size: 14px; text-decoration: none;
  background: rgba(0,0,0,.14); padding: 8px 14px; border-radius: 999px;
}
.mascot-small { position: absolute; right: 0; top: 20px; width: 112px; }
.menu-title { margin: 34px 0 0; font-family: var(--display); font-size: min(14.13vw, 76px); line-height: .95; color: var(--cream); text-transform: uppercase; }
.menu-sub { max-width: calc(100% - 110px); margin: 8px 0 0; font-size: min(6.37vw, 32px); font-weight: 700; -webkit-text-stroke: .5px currentColor; text-transform: uppercase; letter-spacing: .02em; }

.chips {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto;
  margin: 13px -21px 8px; padding: 13px 21px; background: var(--red);
  scrollbar-width: none; box-shadow: 0 6px 10px -8px rgba(0,0,0,.35);
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 8px 13px; border-radius: 999px; background: rgba(0,0,0,.15); white-space: nowrap;
}
.chips a.on { background: var(--cream); color: var(--red); }

.sec { padding-top: 34px; scroll-margin-top: 62px; }
.sec h2 { margin: 0; font-family: var(--display); font-size: min(7.44vw, 40px); line-height: 1; text-transform: uppercase; color: var(--cream); }
.sec .sub { margin: 2px 0 0; font-family: var(--display); font-size: 22px; opacity: .9; text-transform: lowercase; }
.items { list-style: none; margin: 13px 0 0; padding: 0; }
.items li { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; padding: 8px 0; }
.items .n { font-weight: 500; font-size: min(4vw, 20px); line-height: 1.25; }
.items .d { display: block; margin-top: 2px; font-style: italic; font-weight: 400; font-size: min(3.23vw, 16px); opacity: .82; line-height: 1.3; }
.items .p { flex: none; font-weight: 500; font-size: min(4.08vw, 20px); white-space: nowrap; }

.order { margin-top: 55px; padding: 21px; border-radius: 21px; background: rgba(0,0,0,.16); text-align: center; }
.order p { margin: 0 0 8px; font-weight: 500; }
.phone { display: inline-block; font-weight: 900; font-size: 24px; text-decoration: none; margin-bottom: 14px; }
.wa {
  display: block; text-decoration: none; background: var(--cream); color: var(--red); font-weight: 900;
  min-height: 55px; display: grid; place-items: center; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}

/* --- Rrota (butoni lundrues + dritarja) --- */
.wheel-fab {
  position: fixed; z-index: 20; right: max(calc(var(--u) * .06), env(safe-area-inset-right)); bottom: max(calc(var(--u) * .06), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .025); padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wf-wheel { position: relative; width: clamp(46px, calc(var(--u) * .27), 78px); height: clamp(46px, calc(var(--u) * .27), 78px); border-radius: 50%; box-shadow: 0 0 0 3px var(--cream), 0 6px 14px rgba(0,0,0,.3); animation: wig 3.4s ease-in-out infinite; will-change: transform; }
.wheel-open .wf-wheel { animation-play-state: paused; }
.wf-wheel svg { display: block; width: 100%; height: 100%; }
.wf-tag { box-shadow: 0 4px 10px rgba(0,0,0,.25); background: var(--cream); color: #d51f23; border-radius: 999px; padding: .28em .85em; font-weight: 700; font-size: clamp(10.5px, calc(var(--u) * .055), 14px); line-height: 1.2; white-space: nowrap; }
.wf-badge {
  position: absolute; top: -6px; right: -6px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #a32024; color: var(--cream); font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--cream);
}
.wheel-fab.done .wf-wheel { animation: none; }
.wheel-fab.done .wf-badge { display: none; }
.wf-bubble, .wf-prize {
  position: fixed; z-index: 21; right: max(calc(var(--u) * .06), env(safe-area-inset-right)); bottom: calc(max(calc(var(--u) * .06), env(safe-area-inset-bottom)) + clamp(46px, calc(var(--u) * .27), 78px) + clamp(10.5px, calc(var(--u) * .055), 14px) * 1.9 + calc(var(--u) * .025) + 14px);
  background: var(--cream); color: #391301; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.25); animation: bubble-in .35s cubic-bezier(.2,1.4,.4,1);
}
.wf-bubble:after, .wf-prize:after { content: ''; position: absolute; right: 30px; bottom: -6px; width: 12px; height: 12px; background: var(--cream); transform: rotate(45deg); }
.wf-prize { background: #f9eecc; color: #391301; border: 0; text-align: left; font-family: inherit; cursor: pointer; line-height: 1.2; }
.wf-prize:after { background: #f9eecc; }
.wf-prize .t { display: block; font: 400 11px/1 var(--display); letter-spacing: .06em; color: #a32024; }
.wf-prize .n { display: block; margin-top: 4px; font-weight: 700; font-size: 13px; color: #d51f23; }
.wf-prize .c { font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes wig { 0%, 68%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg) scale(1.1); } 82% { transform: rotate(11deg) scale(1.1); } 90% { transform: rotate(-4deg); } }

.wheel-modal { position: fixed; inset: 0; z-index: 50; background: rgba(20,4,4,.78); display: grid; place-items: center; padding: 12px; }
.wheel-box { position: relative; width: min(480px, 100%); height: min(780px, 100%); }
.wheel-box iframe { width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
.wheel-close {
  position: absolute; z-index: 2; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; color: #1a1a1a; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce) {
  .wf-wheel, .wf-bubble, .wf-prize { animation: none; }
}

/* Madhësi/stil të veçantë sipas menusë (si te web-i aktual) */
#menu[data-r="pasticeri"] .menu-sub { font-size: min(4.8vw, 24px); }
#menu[data-r="pasticeri"] .sec h2 { font-size: min(8.7vw, 44px); }
#menu[data-r="pizza"] .items .n { text-transform: uppercase; font-weight: 700; font-size: min(4.1vw, 20px); }
#menu[data-r="pizza"] .items .p { font-weight: 700; font-size: min(4.08vw, 20px); }
.order .phone { font-size: min(5vw, 24px); }
#menu[data-r="pizza"] .items .d { text-transform: none; font-weight: 400; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }