/* Start page (index.html, "Let's get started": Map or Games) and the Games page (games.html).
   Hand-written, so it survives design re-exports. Both pages reuse the lobby's markup (main.lb, .lb-card …),
   so the storybook look in jatra-app.css ("Lobby (home page)" block) applies to them as it does to the lobby.
   This file holds the lobby's own layout (copied from Nepal Heritage Lobby.dc.html) and what differs per page. */
html,body{margin:0;min-height:100%;background:#1c110b;color:#f7f1e7;font:400 15px/1.5 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#f7f1e7}

/* ---------- Lobby layout: one screen at every size, header then the cards fill what is left ---------- */
.lb{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;gap:clamp(14px,3.2vh,32px);padding:clamp(68px,10vh,96px) clamp(16px,4vw,64px) clamp(26px,5vh,48px);background:#1c110b}
.lb-logo{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:5;display:flex;align-items:center;gap:10px;text-decoration:none}
.lb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lb-head h1{margin:12px 0 0}
.lb-intro{margin:12px 0 0;max-width:520px;text-wrap:pretty}
@media (max-height:720px){.lb-intro{display:none}}
.lb-cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lb-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;overflow:hidden;text-decoration:none;color:#f7f1e7;isolation:isolate;outline:0}
.lb-img{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transform-origin:50% 60%;animation:lb-drift 28s ease-in-out infinite alternate;will-change:transform}
.lb-card:nth-child(2) .lb-img{animation-delay:-9s;transform-origin:40% 50%}
.lb-card:nth-child(3) .lb-img{animation-delay:-18s;transform-origin:60% 45%}
.lb-card:nth-child(4) .lb-img{animation-delay:-4s;transform-origin:45% 55%}
.lb-card:nth-child(5) .lb-img{animation-delay:-13s;transform-origin:55% 50%}
.lb-card:nth-child(6) .lb-img{animation-delay:-22s;transform-origin:50% 45%}
@keyframes lb-drift{from{transform:scale(1.04) translate3d(-1.5%,1%,0)}to{transform:scale(1.18) translate3d(2%,-2%,0)}}
.lb-shade{position:absolute;inset:0;z-index:-1}
.lb-txt{display:flex;flex-direction:column;gap:8px}
.lb-txt h2{margin:0;text-wrap:balance}
.lb-go{position:absolute;display:grid;place-items:center;transition:color .25s,transform .25s,border-color .25s}
@media (max-height:540px){.lb-head .lb-count{display:none}}
@media (prefers-reduced-motion:reduce){.lb-img{animation:none}}

/* ---------- Start page: two big cards, Map and Games ---------- */
main.lb.st .lb-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,40px)}
/* Each card cross-fades through its pictures (index.html turns .on round every few seconds). */
main.lb.st .lb-img{opacity:0;transition:opacity 1.6s ease}
main.lb.st .lb-img.on{opacity:1}
/* A deeper shade at the foot than the lobby's: these cards carry a line of copy as well as the name. */
main.lb.st .lb-shade{background:
  linear-gradient(180deg,rgba(28,14,8,.35) 0%,rgba(28,14,8,0) 22%),
  radial-gradient(120% 60% at 12% 100%,rgba(74,38,20,.9) 0%,rgba(74,38,20,.5) 50%,rgba(74,38,20,0) 78%),
  linear-gradient(0deg,rgba(32,16,8,.88) 0%,rgba(32,16,8,.5) 30%,rgba(32,16,8,0) 55%)}
main.lb.st .lb-txt{padding:clamp(16px,2.6vw,40px)}
main.lb.st .lb-txt h2{font-size:clamp(20px,min(2.5vw,4.6vh),46px)}
main.lb.st .st-d{margin:.2em 0 0;max-width:26em;font:400 clamp(15px,1.3vw,22px)/1.35 "Caveat Brush",cursive;letter-spacing:.015em;color:#f6e8d0;text-shadow:0 2px 3px rgba(0,0,0,.7)}
/* The games, as a row of round badges in the Games card's top-left corner, level with the arrow badge on the
   right (same inset, same height, so their centres line up) and stopping short of it. */
main.lb.st .st-glyphs{position:absolute;top:clamp(10px,1.2vw,18px);left:clamp(10px,1.2vw,18px);right:calc(clamp(10px,1.2vw,18px) + clamp(38px,3.2vw,56px) + 10px);min-height:clamp(38px,3.2vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
main.lb.st .st-glyphs li{display:grid;place-items:center;width:clamp(30px,2.6vw,42px);height:clamp(30px,2.6vw,42px);border-radius:50%;border:2px solid #f1dcb6;background:rgba(28,14,8,.8);font-size:clamp(15px,1.3vw,21px);line-height:1;box-shadow:0 3px 8px rgba(0,0,0,.4)}

/* ---------- Games page: six game cards, three by two ---------- */
main.lb.gp .lb-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(12px,1.6vw,28px)}
main.lb.gp .lb-txt h2{font-size:clamp(15px,min(1.55vw,3.3vh),28px)}
main.lb.gp .lb-head{align-items:flex-end}
main.lb.gp .gp-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* Each card's badge: how many public rooms of that game have a free seat (games.html fills it from /api/rooms).
   Hidden until the first count arrives, so it never shows a made-up 0. */
main.lb.gp .gp-live{position:absolute;top:clamp(10px,1.2vw,18px);left:clamp(10px,1.2vw,18px);display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;border:2px solid #f1dcb6;background:rgba(28,14,8,.82);font:400 clamp(12px,.95vw,16px)/1 "Chewy",cursive;letter-spacing:.03em;color:rgba(251,236,208,.78);box-shadow:0 3px 8px rgba(0,0,0,.4);opacity:0;transition:opacity .4s}
main.lb.gp .gp-live.ready{opacity:1}
main.lb.gp .gp-live b{font-weight:400;font-size:1.2em;color:#fbecd0}
main.lb.gp .gp-live.on{color:#fbecd0}
main.lb.gp .gp-live.on b{color:#f2b636}
main.lb.gp .gp-dot{flex:none;width:.62em;height:.62em;border-radius:50%;background:rgba(251,236,208,.35)}
main.lb.gp .gp-live.on .gp-dot{background:#7bd36a;animation:gp-pulse 1.8s ease-out infinite}
@keyframes gp-pulse{0%{box-shadow:0 0 0 0 rgba(123,211,106,.55)}70%,100%{box-shadow:0 0 0 .55em rgba(123,211,106,0)}}
@media (prefers-reduced-motion:reduce){main.lb.gp .gp-live.on .gp-dot{animation:none}}
/* "Play with others": opens jatra-games.js openRooms() (public rooms on the left, private rooms on the right). */
main.lb.gp .gp-rooms{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:clamp(38px,3vw,48px);padding:0 18px 0 14px;border-radius:999px;border:2.5px solid #f1dcb6;background:#b8302a;color:#fff6e6;font:400 clamp(15px,1.2vw,20px)/1 "Chewy",cursive;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.45);transition:background .15s,border-color .15s}
main.lb.gp .gp-rooms svg{width:1.15em;height:1.15em}
main.lb.gp .gp-rooms:hover{background:#c93a33;border-color:#f2b636}
main.lb.gp .gp-rooms:focus-visible{outline:2px solid #f2b636;outline-offset:3px}

/* Tablets: the games two by three. */
@media (max-width:1100px) and (min-width:641px) and (min-height:541px){
  main.lb.gp .lb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.lb.gp .lb-txt h2{font-size:clamp(15px,min(2.4vw,3vh),26px)}
}
/* Short screens and phones in landscape: compact header, cards keep to one screen. */
@media (max-height:540px){
  main.lb.st .lb-txt,main.lb.gp .lb-txt{padding:10px 12px 12px}
  main.lb.st .lb-txt h2{font-size:clamp(15px,min(2.4vw,4.6vh),24px)}
  main.lb.st .st-d{font-size:14px}
  main.lb.st .st-glyphs li{width:28px;height:28px;font-size:14px;border-width:1.5px}
  main.lb.gp .lb-txt h2{font-size:clamp(12px,min(1.6vw,3.4vh),17px)}
  main.lb.gp .gp-live{font-size:11px;padding:4px 9px 4px 7px;border-width:1.5px}
  main.lb.gp .gp-rooms{height:34px;font-size:14px;padding:0 13px 0 10px;border-width:2px}
  main.lb.gp .gp-side{gap:0}
  main.lb.gp .lb-cards{gap:8px}
}
/* Phones in portrait: still one screen, never a scroll (the page height is fixed in jatra-app.css, "Phones
   upright"). Start page: the two cards one above the other, sharing what the header leaves. Games page: the six
   games two by three, with "Play with others" and the "6 games" count side by side above them. */
@media (max-width:640px) and (orientation:portrait){
  main.lb.st .lb-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
  main.lb.st .lb-txt{padding:12px 14px 14px}
  main.lb.st .lb-txt h2{font-size:17px}
  main.lb.st .st-d{font-size:15px;line-height:1.25}
  main.lb.st .st-glyphs{gap:6px}
  main.lb.st .st-glyphs li{width:28px;height:28px;font-size:14px;border-width:1.5px}
  main.lb.gp .lb-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px}
  main.lb.gp .lb-txt{padding:8px 10px 10px}
  main.lb.gp .lb-txt h2{font-size:12.5px}
  main.lb.gp .lb-txt h2::first-line{font-size:1.55em}
  main.lb.gp .gp-side{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;width:100%}
  main.lb.gp .gp-side .lb-count{margin:0;white-space:nowrap}
  main.lb.gp .gp-rooms{height:40px;padding:0 15px 0 12px;font-size:16px;white-space:nowrap}
  main.lb.gp .gp-live{top:7px;left:7px;gap:5px;padding:3px 8px 3px 6px;border-width:1.5px;font-size:11px}
  main.lb.gp .lb-go{top:7px;right:7px;width:30px;height:30px;border-width:2px}
}
/* Shorter phones: the start page's cards drop their line of copy so the names and badges keep their room. */
@media (max-width:640px) and (orientation:portrait) and (max-height:740px){
  main.lb.st .st-d{display:none}
}