:root{
    --jade-deep:#0A2E2A;
    --jade-felt:#0F6B54;
    --ivory:#FFFBF2;
    --ivory-dim:#FFE9C7;
    --bamboo:#1FAE7E;
    --gold:#FFB627;
    --vermillion:#FF4D4D;
    --turquoise:#2FE6C4;
    --violet:#8B5CF6;
    --ink:#161F1B;
    --ink-soft:#4E5A54;
    --radius-tile:14px;
    font-size:16px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body{
    margin:0;
    font-family:'Source Sans Pro', 'IBM Plex Sans', system-ui, sans-serif;
    background:
      radial-gradient(circle at 15% 15%, rgba(47,230,196,0.35) 0%, transparent 40%),
      radial-gradient(circle at 85% 20%, rgba(255,182,39,0.25) 0%, transparent 45%),
      radial-gradient(circle at 30% 90%, rgba(255,77,77,0.2) 0%, transparent 40%),
      linear-gradient(135deg, #0A2E2A, #0F6B54 50%, #0A2E2A);
    background-size:200% 200%, 200% 200%, 200% 200%, 300% 300%;
    animation:bgshift 18s ease-in-out infinite;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px 12px;
    position:relative;
    overflow-x:hidden;
  }
  @keyframes bgshift{
    0%{background-position:0% 0%, 100% 0%, 0% 100%, 0% 0%;}
    50%{background-position:30% 40%, 70% 30%, 40% 70%, 100% 100%;}
    100%{background-position:0% 0%, 100% 0%, 0% 100%, 0% 0%;}
  }
  .drift{
    position:fixed; pointer-events:none; z-index:0; opacity:0.55;
    font-size:26px; filter:saturate(1.3);
    animation:drift 14s ease-in-out infinite;
  }
  @keyframes drift{
    0%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-26px) rotate(8deg);}
    100%{transform:translateY(0) rotate(0deg);}
  }
  .brand-wrap{
    text-align:center;
    margin-bottom:16px;
  }
  .brand-name{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }
  .brand-copyright{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:0.5px;
    color:rgba(243,236,218,0.45);
    margin-top:16px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  h1,h2,h3{font-family:'Fraunces', 'Iowan Old Style', Georgia, serif; margin:0; letter-spacing:0.2px;}
  .phone{
    width:390px; max-width:100%;
    height:820px; max-height:92vh;
    background:var(--ivory);
    border-radius:38px;
    box-shadow:0 30px 70px rgba(0,0,0,0.45), 0 0 0 10px #0c1e1a, 0 0 0 11px #3a5a4f;
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120px; height:22px; background:#0c1e1a; border-radius:0 0 16px 16px; z-index:50;
  }
  .screen{
    flex:1; overflow-y:auto; padding:38px 18px 14px;
    display:none;
    animation:fadein 0.3s cubic-bezier(.22,1,.36,1);
    position:relative; z-index:1;
  }
  .screen.active{display:block;}
  .screen.splash-screen.active{display:flex !important;}
  @keyframes fadein{from{opacity:0; transform:translateY(14px) scale(0.99);} to{opacity:1; transform:translateY(0) scale(1);}}

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--bamboo); font-weight:600; margin-bottom:4px; display:block;
  }
  .top-title{font-size:26px; color:var(--ink); margin-bottom:18px;}

  /* Tile card */
  .tile-card{
    background:#fff;
    border:1px solid #ecdfc0;
    border-left:4px solid var(--turquoise);
    border-radius:var(--radius-tile);
    padding:14px 16px;
    margin-bottom:12px;
    box-shadow:0 2px 0 #ecdfc0, 0 6px 16px rgba(15,107,84,0.1);
    position:relative;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
    animation:cardIn .35s ease backwards;
  }
  .tile-card:nth-of-type(1){animation-delay:0.03s;}
  .tile-card:nth-of-type(2){animation-delay:0.09s;}
  .tile-card:nth-of-type(3){animation-delay:0.15s;}
  @keyframes cardIn{from{opacity:0; transform:translateY(10px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}
  .tile-card:has(.pip.full){border-left-color:var(--vermillion);}
  .tile-card:active{transform:scale(0.97);}
  .tile-card:hover{box-shadow:0 4px 0 #ecdfc0, 0 10px 22px rgba(15,107,84,0.16); transform:translateY(-1px);}
  .tile-card .row{display:flex; justify-content:space-between; align-items:flex-start;}
  .tile-card .when{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
  .tile-card .name{font-family:'Fraunces', Georgia, serif; font-size:18px; margin:4px 0 6px; color:var(--ink);}
  .tile-card .meta{font-size:13px; color:var(--ink-soft);}
  .pip{
    font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px;
    font-family:'IBM Plex Mono',monospace;
  }
  .pip.open{background:linear-gradient(135deg,#d5f7ec,#b6f0dd); color:#0a7a58; animation:pulseGlow 2s ease-in-out infinite;}
  @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(31,174,126,0.35);} 50%{box-shadow:0 0 0 5px rgba(31,174,126,0);}}
  .pip.full{background:linear-gradient(135deg,#ffe1de,#ffcac5); color:var(--vermillion);}
  .pip.waitlist{background:linear-gradient(135deg,#fff0cf,#ffe4a3); color:#8a5a00;}

  .seat-dots{display:flex; gap:5px; margin-top:10px;}
  .seat-dot{width:9px; height:9px; border-radius:2px; background:var(--ivory-dim); border:1px solid #e6c98a; transition:transform .2s ease;}
  .seat-dot.filled{background:linear-gradient(135deg,var(--bamboo),var(--turquoise)); border-color:var(--bamboo);}

  /* bottom nav */
  .tabbar{
    display:flex; border-top:1px solid #ecdfc0; background:#fffdf7; position:relative;
  }
  .tab{
    flex:1; text-align:center; padding:10px 0 16px; cursor:pointer; position:relative;
    color:var(--ink-soft); font-size:11px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.5px;
    transition:color .2s ease;
  }
  .tab .icon{font-size:20px; display:block; margin-bottom:2px; transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .tab.active{color:var(--jade-felt); font-weight:700;}
  .tab.active .icon{transform:translateY(-3px) scale(1.15);}
  .tab.active::before{
    content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%);
    width:28px; height:28px; border-radius:50%;
    background:radial-gradient(circle, rgba(31,174,126,0.16), transparent 70%);
  }

  .btn{
    display:inline-block; width:100%; text-align:center;
    background:linear-gradient(135deg, var(--jade-felt), #0a4d3d); color:var(--ivory);
    border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:600;
    cursor:pointer; font-family:inherit; margin-top:8px;
    box-shadow:0 6px 16px rgba(15,107,84,0.35);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .btn:active{transform:scale(0.97); filter:brightness(1.05);}
  .btn.secondary{background:transparent; color:var(--jade-felt); border:1.5px solid var(--jade-felt); box-shadow:none;}
  .btn.gold{background:linear-gradient(135deg, var(--gold), #ff9a3d); color:#3a2205; box-shadow:0 6px 18px rgba(255,182,39,0.45);}
  .btn.small{width:auto; padding:9px 16px; font-size:13px; margin-top:0;}

  .back-row{display:flex; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer;}
  .back-row .arrow{font-size:20px; color:var(--ink);}
  .back-row span.label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); letter-spacing:0.5px;}

  /* seat table (signature element) */
  .table-wrap{
    background:radial-gradient(circle at 50% 30%, #12876a, #0a4d3d 75%);
    border-radius:20px;
    padding:30px 16px;
    margin:6px 0 18px;
    position:relative;
    box-shadow:inset 0 0 0 6px #0d5c48, 0 10px 26px rgba(10,77,61,0.4);
    overflow:hidden;
  }
  .table-wrap::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(47,230,196,0.25), transparent 55%);
    pointer-events:none;
  }
  .table-grid{
    position:relative;
    width:220px; height:220px; margin:0 auto;
  }
  .table-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:78px; height:78px; border-radius:10px;
    background:var(--ivory);
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); text-align:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,182,39,0.3);
    letter-spacing:0.5px;
  }
  .seat{
    position:absolute; width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    background:rgba(255,255,255,0.1); border:2px dashed rgba(255,255,255,0.45);
    color:rgba(255,255,255,0.75); font-size:11px; text-align:center; cursor:pointer;
    transition:all .2s ease;
  }
  .seat.filled{
    background:linear-gradient(135deg,var(--ivory),#ffe9c7); border:2px solid var(--gold); color:var(--ink); font-weight:700;
    box-shadow:0 0 0 4px rgba(255,182,39,0.25), 0 4px 10px rgba(0,0,0,0.25);
  }
  .seat.just-claimed{animation:seatGlowPulse .6s ease-out;}
  @keyframes seatGlowPulse{
    0%{box-shadow:0 0 0 0 rgba(255,182,39,0.8), 0 4px 10px rgba(0,0,0,0.25);}
    100%{box-shadow:0 0 0 14px rgba(255,182,39,0), 0 4px 10px rgba(0,0,0,0.25);}
  }
  .seat.you{box-shadow:0 0 0 4px var(--gold), 0 0 18px rgba(255,182,39,0.6);}
  .seat .wind{position:absolute; top:-18px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold); letter-spacing:1px;}
  .seat.n{top:0; left:50%; transform:translateX(-50%);}
  .seat.e{top:50%; right:0; transform:translateY(-50%);}
  .seat.s{bottom:0; left:50%; transform:translateX(-50%);}
  .seat.w{top:50%; left:0; transform:translateY(-50%);}

  .waitlist-strip{
    display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;
  }
  .wchip{
    background:#faf1dc; color:#8a6a1f; border-radius:20px; padding:5px 12px;
    font-size:12px; font-family:'IBM Plex Mono',monospace;
  }

  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.5px;}
  .field input, .field select, .field textarea{
    width:100%; padding:11px 12px; border:1.5px solid #e3dbc4; border-radius:10px;
    font-family:inherit; font-size:14px; background:#fff; color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold); border-color:transparent;}

  .divider{height:1px; background:#e3dbc4; margin:18px 0;}

  .group-card{
    display:flex; align-items:center; gap:12px; padding:12px; background:#fff;
    border:1px solid #e3dbc4; border-radius:14px; margin-bottom:10px; cursor:pointer;
  }
  .group-avatar{
    width:44px; height:44px; border-radius:10px; background:var(--bamboo); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:16px; font-weight:700; flex-shrink:0;
  }
  .avatar-row{display:flex; margin-top:2px;}
  .mini-avatar{
    width:22px; height:22px; border-radius:50%; background:var(--ivory-dim); border:2px solid #fff;
    margin-left:-6px; font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-weight:700;
  }
  .mini-avatar:first-child{margin-left:0;}

  .toast{
    position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--ivory); padding:10px 18px; border-radius:20px;
    font-size:13px; opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:60; white-space:nowrap;
  }
  .toast.show{opacity:1;}

  .empty-state{text-align:center; padding:40px 10px; color:var(--ink-soft);}
  .empty-state .glyph{font-size:36px; margin-bottom:10px; display:block;}

  .stepper{display:flex; gap:6px; margin-bottom:18px;}
  .stepper .dot{flex:1; height:3px; background:#e3dbc4; border-radius:3px;}
  .stepper .dot.done{background:var(--jade-felt);}

  /* ============ SPLASH ============ */
  .splash-screen{
    padding:0 !important; margin:0; overflow:hidden !important;
    flex-direction:column; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 20%, rgba(47,230,196,0.35), transparent 55%),
      radial-gradient(circle at 75% 75%, rgba(255,182,39,0.3), transparent 50%),
      radial-gradient(circle at 20% 85%, rgba(255,77,77,0.25), transparent 50%),
      linear-gradient(160deg, #0A2E2A 0%, #0F6B54 55%, #0A2E2A 100%);
    background-size:180% 180%;
    animation:splashBg 6s ease-in-out infinite;
    cursor:pointer;
  }
  @keyframes splashBg{
    0%,100%{background-position:0% 0%;}
    50%{background-position:100% 100%;}
  }

  .splash-stage{
    position:absolute; inset:0;
    perspective:900px;
    display:flex; align-items:center; justify-content:center;
  }
  .tile3d{
    position:absolute; top:50%; left:50%;
    width:52px; height:68px;
    background:linear-gradient(160deg, #FFFBF2, #FFE9C7);
    border-radius:8px;
    box-shadow:0 0 0 2px rgba(255,182,39,0.5), 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.8);
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px; padding:6px;
    transform-style:preserve-3d;
    animation:tileFly var(--dur,5s) cubic-bezier(.3,.1,.4,1) infinite;
    animation-delay:var(--delay,0s);
    will-change:transform, opacity;
  }
  @keyframes tileFly{
    0%{
      transform:translate3d(calc(-50% + var(--sx)), calc(-50% + var(--sy)), -700px) rotateX(15deg) rotateY(-40deg) rotateZ(-10deg) scale(0.35);
      opacity:0;
    }
    12%{opacity:1;}
    78%{opacity:1;}
    100%{
      transform:translate3d(calc(-50% + var(--ex)), calc(-50% + var(--ey)), 500px) rotateX(360deg) rotateY(220deg) rotateZ(140deg) scale(1.7);
      opacity:0;
    }
  }
  .tile3d.char{
    font-family:'Fraunces', Georgia, serif; font-size:26px; font-weight:700; color:var(--bamboo);
  }
  .tile3d.char.red{color:var(--vermillion);}
  .tile3d.char.green{color:#1FAE7E;}
  .pip-dot{width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #4dc9ff, #1560c9);}
  .tile3d.bam i{
    display:block; width:6px; height:38px; border-radius:3px;
    background:linear-gradient(180deg, #3fae5a, #1e7a3a);
  }

  .splash-content{
    position:relative; z-index:2; text-align:center; padding:0 30px;
    animation:splashContentIn 1s cubic-bezier(.22,1,.36,1) both; animation-delay:0.15s;
  }
  @keyframes splashContentIn{
    from{opacity:0; transform:translateY(18px) scale(0.94);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  .splash-mark{
    font-family:'Fraunces', Georgia, serif; font-weight:800; font-size:42px; color:var(--ivory);
    letter-spacing:0.5px;
    text-shadow:0 0 30px rgba(255,182,39,0.55), 0 4px 20px rgba(0,0,0,0.4);
    animation:markGlow 2.4s ease-in-out infinite;
  }
  @keyframes markGlow{
    0%,100%{text-shadow:0 0 26px rgba(255,182,39,0.45), 0 4px 20px rgba(0,0,0,0.4);}
    50%{text-shadow:0 0 44px rgba(47,230,196,0.6), 0 4px 20px rgba(0,0,0,0.4);}
  }
  .splash-tagline{
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:1.2px; color:var(--turquoise);
    margin-top:10px; text-transform:uppercase;
  }
  .splash-sub{
    font-size:12.5px; color:rgba(255,251,242,0.55); margin-top:20px;
  }

  .splash-progress{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    width:140px; height:4px; border-radius:4px; background:rgba(255,255,255,0.15);
    overflow:hidden; z-index:2;
  }
  .splash-progress-fill{
    height:100%; width:0%; border-radius:4px;
    background:linear-gradient(90deg, var(--turquoise), var(--gold));
    animation:splashFill 10s linear forwards;
  }
  @keyframes splashFill{ from{width:0%;} to{width:100%;} }
  .splash-skip{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase;
    color:rgba(255,251,242,0.4); z-index:2;
  }

/* ============ REAL MOBILE DEVICES ============
   On an actual phone the fake phone-frame bezel/notch just looks like
   a black border around the real content, since the device already
   has its own screen edge. Strip the chrome and let the app fill the
   viewport edge-to-edge; the desktop "phone mockup" look is only for
   viewing this on a laptop/desktop browser. */
@media (max-width: 480px){
  body{
    padding:0; margin:0;
    align-items:stretch; justify-content:stretch;
    min-height:100vh; min-height:100dvh;
  }
  .drift, .brand-wrap, .brand-copyright{display:none;}
  .phone{
    width:100%; max-width:none;
    height:100vh; height:100dvh; max-height:none;
    border-radius:0;
    box-shadow:none;
  }
  .notch{display:none;}
  .screen{padding-top:calc(20px + env(safe-area-inset-top));}
  .tabbar{padding-bottom:env(safe-area-inset-bottom);}
}