:root{
    --cream:#FBF3E0;
    --gold:#D9A521;
    --gold-deep:#B8860B;
    --gold-bright:#F4C752;
    --brown:#3E2A1B;
    --brown-mid:#6B4226;
    --brown-soft:#8a6a4a;
    --teal:#2F6F62;
    --teal-glow:#48baa4;
    --red-flag:#B23A2E;
    --green-flag:#3F7D45;
    --orange:#E8621C;
    --orange-soft:#FBEBDF;
    --shadow: 0 12px 32px rgba(28,18,10,0.28);
    --shadow-lg: 0 24px 60px rgba(10,6,3,0.45);
    --glass-brd: rgba(251,243,224,.16);
    /* liquid glass tokens */
    --glass-blur-lg: blur(22px) saturate(170%);
    --glass-blur-md: blur(16px) saturate(160%);
    --glass-blur-sm: blur(10px) saturate(150%);
    --glass-fill-dark: linear-gradient(135deg, rgba(62,42,27,.72), rgba(62,42,27,.5));
    --glass-fill-light: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.38));
    --glass-brd-light: rgba(255,255,255,.55);
    --glass-brd-dark: rgba(251,243,224,.32);
    --glass-sheen: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px -14px rgba(62,42,27,.3);
    --grid-line-dark: rgba(217,165,33,.06);
    --grid-line-light: rgba(62,42,27,.055);
    --font-display:'Baloo 2', sans-serif;
    --font-body:'Work Sans', sans-serif;
    --font-script:'Caveat', cursive;
    --font-mono:'Space Grotesk', sans-serif;
    --ease-out:cubic-bezier(.16,.84,.36,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--brown);
    color:var(--brown);
    min-height:100vh;
    -webkit-tap-highlight-color:transparent;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:var(--font-display);}
  button, input, select{font-family:inherit;}
  button{cursor:pointer;}
  a{color:inherit;}
  :focus-visible{outline:3px solid var(--teal-glow); outline-offset:2px;}
  ::selection{background:var(--gold); color:var(--brown);}

  /* ---------- perspective stage for 3D screen transitions ---------- */
  #app{perspective:1400px; perspective-origin:50% 50%;}
  .screen{
    display:none; min-height:100vh; position:relative;
    transform-style:preserve-3d; will-change:transform, opacity;
  }
  .screen.active{display:flex; flex-direction:column;}
  .screen.enter-3d{animation:screenEnter .62s var(--ease-out) both;}
  .screen.leave-3d{animation:screenLeave .42s var(--ease-in-out) both;}
  @keyframes screenEnter{
    0%{opacity:0; transform:rotateY(-8deg) translateZ(-120px) translateX(26px) scale(.97);}
    100%{opacity:1; transform:rotateY(0) translateZ(0) translateX(0) scale(1);}
  }
  @keyframes screenLeave{
    0%{opacity:1; transform:rotateY(0) translateZ(0) scale(1);}
    100%{opacity:0; transform:rotateY(8deg) translateZ(-160px) translateX(-24px) scale(.96);}
  }
  @media (prefers-reduced-motion: reduce){
    .screen.enter-3d, .screen.leave-3d{animation:none !important;}
  }

  /* ---------- HOME ---------- */
  #screen-home{
    background:
      linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px),
      radial-gradient(circle at 50% -10%, #2c1c11 0%, #17100a 65%),
      var(--brown);
    background-size:42px 42px, 42px 42px, cover, cover;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:48px 20px 36px;
    position:relative;
    overflow:hidden;
  }
  .aurora{
    position:absolute; inset:-20%; z-index:0; pointer-events:none;
    background:
      radial-gradient(38% 30% at 22% 18%, rgba(217,165,33,.20), transparent 70%),
      radial-gradient(30% 26% at 82% 12%, rgba(47,111,98,.28), transparent 70%),
      radial-gradient(45% 35% at 60% 90%, rgba(232,98,28,.10), transparent 70%);
    animation:auroraDrift 16s ease-in-out infinite alternate;
    filter:blur(6px);
  }
  @keyframes auroraDrift{
    0%{ transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(-2%, 3%, 0) scale(1.08); }
  }
  #bubble-canvas{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.75;}
  .home-inner{max-width:420px; width:100%; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2;}

  .logo-stage{perspective:900px; margin-bottom:6px;}
  .logo-3d{
    width:200px; height:auto; max-height:120px; object-fit:contain;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(217,165,33,.28));
    animation:logoFloat 6s var(--ease-in-out) infinite;
    transform-style:preserve-3d;
  }
  @keyframes logoFloat{
    0%,100%{ transform:translateY(0) rotateY(0deg) rotateX(0deg); }
    25%{ transform:translateY(-7px) rotateY(8deg) rotateX(2deg); }
    50%{ transform:translateY(0) rotateY(0deg) rotateX(-1deg); }
    75%{ transform:translateY(6px) rotateY(-8deg) rotateX(2deg); }
  }
  .home-title{
    color:var(--cream);
    font-size:2.15rem;
    letter-spacing:.08em;
    margin:18px 0 2px;
    font-weight:800;
    background:linear-gradient(100deg, var(--cream) 20%, var(--gold-bright) 45%, var(--cream) 70%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shineText 5s ease-in-out infinite;
    text-shadow:0 2px 24px rgba(217,165,33,.25);
  }
  @keyframes shineText{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  .home-sub{
    font-family:var(--font-script);
    color:var(--gold);
    font-size:1.4rem;
    margin:0 0 26px;
    opacity:0;
    animation:fadeUp .7s var(--ease-out) .35s forwards;
  }
  .home-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal-glow);
    background:linear-gradient(135deg, rgba(72,186,164,.18), rgba(72,186,164,.05));
    backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
    border:1px solid rgba(72,186,164,.4);
    padding:5px 12px; border-radius:999px; margin-bottom:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
    opacity:0; animation:fadeUp .7s var(--ease-out) .2s forwards;
  }
  .home-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--teal-glow); box-shadow:0 0 8px var(--teal-glow); animation:pulseDot 1.8s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.35;}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

  .home-buttons{display:flex; flex-direction:column; gap:14px; width:100%; max-width:320px; perspective:800px;}
  .tile-btn{
    background:linear-gradient(135deg, rgba(251,243,224,.88), rgba(251,243,224,.58));
    backdrop-filter:var(--glass-blur-md); -webkit-backdrop-filter:var(--glass-blur-md);
    color:var(--brown);
    border:1px solid var(--glass-brd-light);
    border-radius:18px;
    padding:16px 20px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.08rem;
    letter-spacing:.03em;
    box-shadow:var(--shadow), var(--glass-sheen);
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:transform .12s var(--ease-out), box-shadow .25s ease, background .25s ease;
    position:relative; overflow:hidden;
    transform-style:preserve-3d; will-change:transform;
    opacity:0; animation:tileIn .6s var(--ease-out) forwards;
  }
  .tile-btn::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 26%);
  }
  .home-buttons .tile-btn:nth-child(1){animation-delay:.45s;}
  .home-buttons .tile-btn:nth-child(2){animation-delay:.56s;}
  .home-buttons .tile-btn:nth-child(3){animation-delay:.67s;}
  @keyframes tileIn{from{opacity:0; transform:translateY(16px) rotateX(-12deg);} to{opacity:1; transform:translateY(0) rotateX(0);}}
  .tile-btn::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
    background-size:250% 100%; background-position:150% 0; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .tile-btn:hover::before{opacity:1; animation:sheen 1.1s ease forwards;}
  @keyframes sheen{from{background-position:150% 0;} to{background-position:-50% 0;}}
  .tile-btn:hover{box-shadow:0 20px 40px rgba(0,0,0,0.45);}
  .tile-btn:active{transform:translateY(1px) scale(.98) !important; transition:transform .08s ease;}
  .tile-btn.gold{
    background:linear-gradient(160deg, rgba(244,199,82,.88), rgba(217,165,33,.72) 55%, rgba(184,134,11,.68));
    border-color:rgba(255,255,255,.6);
    color:var(--brown);
  }
  .tile-btn .icon{font-size:1.2rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));}
  @media (hover:none){ .tile-btn{transform:none !important;} }
  .home-foot{color:var(--brown-soft); font-size:.72rem; margin-top:36px; letter-spacing:.06em; opacity:0; animation:fadeUp .7s var(--ease-out) .85s forwards;}

  /* ---------- shared inner-page header ---------- */
  .app-header{
    background:var(--glass-fill-dark);
    backdrop-filter:var(--glass-blur-lg);
    -webkit-backdrop-filter:var(--glass-blur-lg);
    color:var(--cream);
    padding:14px 18px;
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:20;
    border-bottom:1px solid var(--glass-brd-dark);
    box-shadow:0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18);
  }
  .app-header::before{
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    opacity:.7; pointer-events:none;
  }
  .app-header .mini-logo{
    width:38px; height:38px; flex-shrink:0; object-fit:contain;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
    animation:logoSpin 9s linear infinite; transform-style:preserve-3d;
  }
  @keyframes logoSpin{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(360deg);}
  }
  @media (prefers-reduced-motion: reduce){ .app-header .mini-logo{animation:none;} .logo-3d{animation:none;} }
  .app-header .titles{flex:1; min-width:0;}
  .app-header .titles h1{margin:0; font-size:1.05rem; line-height:1.15;}
  .app-header .titles span{font-size:.72rem; color:var(--gold); display:block;}
  .back-link{
    background:linear-gradient(135deg, rgba(251,243,224,.16), rgba(251,243,224,.04));
    backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
    border:1.5px solid rgba(251,243,224,.35);
    color:var(--cream); border-radius:10px; padding:7px 12px; font-size:.82rem;
    white-space:nowrap; transition:all .18s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  }
  .back-link:hover{border-color:var(--gold); color:var(--gold); background:rgba(217,165,33,.14); transform:translateY(-1px);}

  /* diet filter dropdown, sits in the menu screen's top bar */
  .diet-select{
    background:linear-gradient(135deg, rgba(251,243,224,.22), rgba(251,243,224,.08));
    backdrop-filter:var(--glass-blur-sm);
    -webkit-backdrop-filter:var(--glass-blur-sm);
    color:var(--cream);
    border:1.5px solid rgba(251,243,224,.4);
    border-radius:10px;
    padding:6px 8px;
    font-size:.8rem;
    flex-shrink:0;
    max-width:92px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
    transition:border-color .18s ease, background .18s ease;
  }
  .diet-select:hover{border-color:var(--gold); background:linear-gradient(135deg, rgba(251,243,224,.3), rgba(251,243,224,.12));}
  .diet-select option{color:var(--brown); background:var(--cream);}

  .page-body{
    flex:1; display:flex; flex-direction:column;
    background:
      linear-gradient(var(--grid-line-light) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px),
      var(--cream);
    background-size:36px 36px, 36px 36px, cover;
  }

  /* ---------- MENU (view-only, no price / availability shown) ---------- */
  #screen-menu .page-body{padding-bottom:32px;}
  .cat-tabs{
    position:relative;
    display:flex; gap:8px; overflow-x:auto; padding:16px 16px 10px;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .cat-tabs::-webkit-scrollbar{display:none;}
  .cat-tab{
    flex-shrink:0;
    background:linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.32));
    backdrop-filter:var(--glass-blur-md); -webkit-backdrop-filter:var(--glass-blur-md);
    border:1.5px solid rgba(255,255,255,.6); color:var(--brown-mid);
    padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
    position:relative; z-index:2;
    box-shadow:0 4px 14px rgba(62,42,27,.07), inset 0 1px 0 rgba(255,255,255,.7);
    transition:color .25s ease, border-color .25s ease, transform .15s ease, background .25s ease;
  }
  .cat-tab:hover{transform:translateY(-1px); border-color:var(--gold);}
  .cat-tab.active{
    background:linear-gradient(135deg, rgba(62,42,27,.92), rgba(62,42,27,.76));
    color:var(--cream); border-color:rgba(62,42,27,.9);
    box-shadow:0 6px 18px rgba(62,42,27,.35), inset 0 1px 0 rgba(255,255,255,.16);
  }
  .item-list{padding:4px 16px 20px; display:flex; flex-direction:column; gap:12px; perspective:1000px;}
  .menu-item{
    background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
    backdrop-filter:blur(3px) saturate(180%) brightness(1.06);
    -webkit-backdrop-filter:blur(3px) saturate(180%) brightness(1.06);
    border-radius:18px; padding:14px 16px;
    display:flex; align-items:flex-start; gap:12px;
    box-shadow:
      0 10px 26px rgba(62,42,27,.12),
      inset 0 1.5px 0 rgba(255,255,255,.9),
      inset 0 -1.5px 0 rgba(62,42,27,.14),
      inset 1.5px 0 0 rgba(255,255,255,.4),
      inset -1.5px 0 0 rgba(62,42,27,.08);
    border:1.5px solid rgba(255,255,255,.55);
    opacity:0; transform:translate(var(--slide-x, 0px), 26px);
    transition:transform .6s var(--ease-out), box-shadow .3s ease, opacity .6s ease, border-color .3s ease, background .3s ease;
    transform-style:preserve-3d; will-change:transform, opacity;
    position:relative; overflow:hidden;
  }
  @supports (backdrop-filter: url(#liquidGlassRefraction)){
    .menu-item{
      backdrop-filter:url(#liquidGlassRefraction) blur(1.5px) saturate(180%) brightness(1.06);
    }
  }
  .menu-item::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 76%, rgba(255,255,255,.2) 100%);
    mix-blend-mode:overlay;
  }
  .menu-item.slide-left{--slide-x:-72px;}
  .menu-item.slide-right{--slide-x:72px;}
  .menu-item.revealed{opacity:1; transform:translate(0,0);}
  @media (hover:hover){
    .menu-item:hover{
      transform:translateY(-5px) perspective(700px) rotateX(1.4deg);
      box-shadow:
        0 20px 38px rgba(62,42,27,.2),
        inset 0 1.5px 0 rgba(255,255,255,.95),
        inset 0 -1.5px 0 rgba(62,42,27,.16),
        inset 1.5px 0 0 rgba(255,255,255,.45),
        inset -1.5px 0 0 rgba(62,42,27,.1);
      border-color:rgba(217,165,33,.5);
    }
  }
  /* Chef's special — tinted clear glass, still transparent */
  .menu-item.chef-special{
    background:linear-gradient(135deg, rgba(232,98,28,.12), rgba(255,255,255,.03));
    border-color:rgba(232,98,28,.55);
    box-shadow:
      0 10px 26px rgba(62,42,27,.12),
      inset 0 1.5px 0 rgba(255,255,255,.9),
      inset 0 -1.5px 0 rgba(232,98,28,.22),
      inset 1.5px 0 0 rgba(255,255,255,.4),
      inset -1.5px 0 0 rgba(232,98,28,.14);
  }
  .menu-item.chef-special::after{
    content:""; }
  .veg-dot{
    width:14px; height:14px; border:2px solid var(--green-flag); border-radius:3px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:5px;
  }
  .veg-dot.non-veg{border-color:var(--red-flag);}
  .veg-dot::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--green-flag);}
  .veg-dot.non-veg::after{background:var(--red-flag);}
  .dish-img-wrap{width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--cream); box-shadow:inset 0 0 0 1px rgba(62,42,27,.06);}
  .dish-img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out);}
  .menu-item:hover .dish-img{transform:scale(1.12) rotate(1deg);}
  .item-info{flex:1; min-width:0;}
  .item-info .name-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .item-info h3{margin:0; font-size:.98rem; font-family:var(--font-body); font-weight:700;}
  .item-info p{margin:3px 0 0; font-size:.8rem; color:var(--brown-soft); line-height:1.3;}
  .chef-tag{
    font-size:.66rem; background:linear-gradient(100deg, var(--orange), #ff8a45, var(--orange)); background-size:220% 100%;
    color:#fff; padding:2px 8px;
    border-radius:999px; font-weight:700; white-space:nowrap;
    animation:shineText 3.2s ease-in-out infinite;
  }
  .star-btn{
    background:none; border:none; font-size:1.35rem; line-height:1; color:#d9cba3;
    flex-shrink:0; padding:2px 2px; align-self:flex-start; transition:transform .12s ease, color .12s ease;
  }
  .star-btn:hover{transform:scale(1.12);}
  .star-btn.active{color:var(--gold-deep);}
  .star-btn.pop{animation:starPop .45s var(--ease-out);}
  @keyframes starPop{
    0%{transform:scale(1);}
    35%{transform:scale(1.55) rotate(-12deg);}
    65%{transform:scale(.9) rotate(6deg);}
    100%{transform:scale(1) rotate(0);}
  }
  .empty-note{padding:32px 16px; text-align:center; color:var(--brown-soft); font-size:.9rem;}

  /* ---------- RESERVATION ---------- */
  #screen-reservation .page-body{align-items:center; padding:36px 20px 60px; text-align:center;}
  .phone-card{
    background:var(--glass-fill-light);
    backdrop-filter:var(--glass-blur-md); -webkit-backdrop-filter:var(--glass-blur-md);
    border:1.5px solid rgba(255,255,255,.55);
    border-radius:16px; padding:16px 18px; width:100%; max-width:380px;
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
    box-shadow:0 4px 14px rgba(62,42,27,.08), inset 0 1px 0 rgba(255,255,255,.55); text-decoration:none;
    position:relative; overflow:hidden;
    transition:transform .18s var(--ease-out), box-shadow .25s ease, background .25s ease;
  }
  .phone-card:hover{transform:translateY(-3px) scale(1.01); box-shadow:0 16px 30px rgba(62,42,27,.16);}
  .phone-card:active{transform:translateY(0) scale(.98);}
  .phone-card .pc-left{display:flex; align-items:center; gap:12px; text-align:left;}
  .phone-card .pc-icon{
    width:40px; height:40px; border-radius:50%; background:linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color:var(--brown);
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
    box-shadow:0 4px 10px rgba(217,165,33,.4);
  }
  .phone-card .pc-num{font-weight:700; font-size:1.02rem; color:var(--brown);}
  .phone-card .pc-tag{font-size:.74rem; color:var(--brown-soft);}
  .phone-card .pc-arrow{color:var(--gold-deep); font-size:1.2rem; transition:transform .18s ease;}
  .phone-card:hover .pc-arrow{transform:translateX(4px);}
  .ripple{position:absolute; border-radius:50%; background:rgba(217,165,33,.35); transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;}
  @keyframes rippleAnim{to{transform:scale(3.2); opacity:0;}}

  /* ---------- Ambient fish, swims across the whole page every so often ---------- */
  #ambient-fish-wrap{
    position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:50;
  }
  .ambient-fish{
    position:absolute; top:64%; left:0; width:64px; height:64px;
    opacity:0;
    filter:drop-shadow(0 10px 12px rgba(23,16,10,.4));
    animation:ambientFishSwim 58s ease-in-out infinite;
    animation-delay:5s;
  }
  @keyframes ambientFishSwim{
    0%{ transform:translateX(-20vw) translateY(0) rotate(0deg); opacity:0; }
    1%{ opacity:1; }
    5%{ transform:translateX(15vw) translateY(-22px) rotate(-4deg); }
    8%{ transform:translateX(40vw) translateY(10px) rotate(3deg); }
    11%{ transform:translateX(65vw) translateY(-16px) rotate(-3deg); }
    14%{ transform:translateX(90vw) translateY(6px) rotate(2deg); opacity:1; }
    15.5%{ transform:translateX(120vw) translateY(0) rotate(0deg); opacity:0; }
    100%{ transform:translateX(120vw) translateY(0) rotate(0deg); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ #ambient-fish-wrap{display:none;} }

  /* ---------- Custom loader shown while the menu screen is opening ---------- */
  #menu-loading-overlay{
    position:fixed; inset:0; z-index:1000;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:radial-gradient(circle at 50% 38%, rgba(44,28,17,.97), rgba(17,11,7,.99) 72%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease;
  }
  #menu-loading-overlay.active{opacity:1; visibility:visible; pointer-events:auto;}
  #menu-loading-overlay.fade-out{opacity:0;}
  #menu-loading-overlay .loader{position:relative; width:220px; height:220px;}
  #menu-loading-overlay .loader .circle{
    position:absolute; inset:12px; border-radius:50%;
    background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(180,224,255,.4) 42%, rgba(50,108,168,.4) 100%);
    border:5px solid rgba(255,255,255,.85);
    box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 0 28px rgba(255,255,255,.55);
    overflow:hidden; z-index:1;
    animation:loaderBob 3.2s ease-in-out infinite;
  }
  #menu-loading-overlay .loader .circle-top{
    position:absolute; top:20px; left:38px; width:72px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.6); filter:blur(3px); transform:rotate(-18deg);
    z-index:3; pointer-events:none;
  }
  #menu-loading-overlay .loader .cap{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    width:54px; height:24px; border-radius:10px 10px 4px 4px;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    box-shadow:0 6px 10px rgba(0,0,0,.4); z-index:2;
  }
  #menu-loading-overlay .loader .shadow-top{
    position:absolute; top:12px; left:12px; right:12px; height:40%;
    border-radius:50% 50% 0 0/100% 100% 0 0;
    background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
    z-index:2; pointer-events:none;
  }
  #menu-loading-overlay .loader .fish{
    position:absolute; inset:0; margin:auto; width:150px; height:150px; z-index:2;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
    animation:loaderFishSwim 2.6s ease-in-out infinite;
  }
  @keyframes loaderBob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  @keyframes loaderFishSwim{
    0%,100%{ transform:translateX(-20px) rotate(-5deg); }
    50%{ transform:translateX(20px) rotate(5deg); }
  }
  #menu-loading-overlay .loader-caption{
    color:var(--gold); font-family:var(--font-display); font-size:1.05rem; letter-spacing:.03em;
    opacity:0; animation:fadeUp .6s var(--ease-out) .2s forwards;
  }
  #menu-loading-overlay .shadow-bottom{
    position:fixed; left:0; right:0; bottom:0; height:120px;
    background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
    z-index:0; pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){
    #menu-loading-overlay .loader .circle, #menu-loading-overlay .loader .fish{animation:none;}
  }

  @media (min-width:700px){
    .item-list{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  }

  .custom-footer {
  width: 100%;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  box-sizing: border-box;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-link-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--gold, #D9A521);
  transition: opacity 0.2s ease;
}

.footer-link-item:hover {
  opacity: 0.8;
}

.footer-icon {
  font-size: 0.95rem;
}

.footer-text {
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream, #FBF3E0);
}

.footer-dot {
  color: var(--gold, #D9A521);
  font-size: 1rem;
  user-select: none;
}

.footer-mid {
  margin-top: 2px;
}

.footer-bottom {
  margin-top: 4px;
}

.footer-credit {
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(251, 243, 224, 0.45);
  margin: 0;
}