/* Guest homepage: join panel beside the map, compact login, two-step sign-up, category previews,
   a chat that sizes to its content, and the games strip. Loaded after portal.css and community.css. */

.entry-hero{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:15px;align-items:start;margin:14px 0 16px}
.entry-column{display:grid;gap:12px;align-content:start}

.join-panel{border:1px solid #cfdfe9;border-radius:6px;background:linear-gradient(#fff,#f2f8fc);padding:18px 18px 20px;box-shadow:0 2px 10px #1f5f8c14}
.join-panel h1{font-size:27px;line-height:1.15;font-weight:900;color:#b52a36;margin:0 0 8px;letter-spacing:-.4px;text-wrap:balance}
.join-lead{font-size:15px;line-height:1.55;color:#34434d;margin:0 0 15px}
.join-points{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:11px}
.join-points li{display:flex;gap:11px;align-items:center;font-size:14px;color:#3f5664;line-height:1.35}
.join-points b{display:block;color:#1f5f8c;font-size:15px}
.ui-icon{width:32px;height:32px;flex:none}
.join-free{margin:0 0 14px;padding:8px 10px;background:#eef7e6;border:1px solid #cfe2bd;border-radius:4px;color:#335d22;font-size:14px;font-weight:700}
.join-cta{width:100%;font-size:17px!important;font-weight:800!important;padding:11px 16px!important;border-radius:5px!important}
#auth.register-mode .join-panel{display:none}

/* Login card: compact by default, a full form while signing up. */
.auth-card{padding:14px 16px}
.auth-card h2{font-size:15px;color:#1f5f8c}
.auth-card label{display:grid;grid-template-columns:minmax(76px,max-content) minmax(0,1fr);align-items:center;gap:8px;margin:6px 0;font-size:13px;white-space:nowrap}
.auth-card label input{max-width:none;width:100%;min-height:32px;padding:5px 8px}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.auth-card .form-actions .primary,.auth-card #verify-submit{font-size:14px;padding:6px 18px;width:auto}
#auth.register-mode .auth-card{padding:18px}
#auth.register-mode .auth-card h2{font-size:19px;margin-bottom:10px}
#auth.register-mode .auth-card label{display:block;margin:10px 0}
#auth.register-mode .auth-card label input,#auth.register-mode .auth-card select,#auth.register-mode .auth-card textarea{margin-top:4px}
/* Step visibility beats the register-mode label layout above. */
#auth-form[data-step="2"] .step1-field,#auth-form[data-step="2"] .step-one{display:none!important}
#auth-form:not([data-step="2"]) .step-two{display:none!important}
.step-two small{font-weight:normal;color:#4a5a66}
.turnstile-box{margin:12px 0 4px;min-height:0}

/* Live password checklist (step 1). */
.rule-list{list-style:none;margin:2px 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13px;color:#4a5a66}
.rule-list li{position:relative;padding-inline-start:20px;line-height:1.5}
.rule-list li::before{content:'';position:absolute;inset-inline-start:0;top:4px;width:12px;height:12px;border-radius:50%;border:1.5px solid #9fb2bf;background:#fff;transition:background .15s,border-color .15s}
.rule-list li.ok{color:#2f6a1f}
.rule-list li.ok::before{background:#5f9a3a;border-color:#4d8530}
.rule-list li.ok::after{content:'';position:absolute;inset-inline-start:5px;top:6px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Category / place preview for guests: an inline card under the navigation, not a modal. */
.guest-preview{margin:12px 0;border:1px solid #cfdfe9;border-radius:6px;background:linear-gradient(#fff,#f4f9fc);padding:14px 16px;display:flex;gap:16px;align-items:center;box-shadow:0 3px 12px #1f5f8c1f;animation:preview-in .22s cubic-bezier(.16,1,.3,1)}
@keyframes preview-in{from{opacity:.35;transform:translateY(-6px)}}
.preview-body{flex:1;min-width:0}
.guest-preview h2{font-size:19px;color:#1f5f8c;margin:0 0 4px}
.guest-preview p{margin:0;font-size:15px;color:#34434d;line-height:1.5}
.preview-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.preview-actions .primary{font-size:15px;padding:8px 18px}
.icon-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;background:#fff;border:1px solid #c5d4de;color:#3a4f5c;flex:none}
.icon-close svg{width:16px;height:16px}
#portal-nav button[aria-expanded="true"]{background:#e3f3fc;color:#1f5f8c}

/* Chat for guests: as tall as its messages, with honest signs of life above it. */
.guest-chat .city-social-layout{margin:0 0 4px}
.guest-chat .city-social-layout .feed-list,.guest-chat .feed-list{height:auto;min-height:0;max-height:320px}
.city-pulse{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:#2f5d3a;min-height:21px}
.city-pulse:empty{display:none}
.city-pulse i{width:9px;height:9px;border-radius:50%;background:#5f9a3a;box-shadow:0 0 0 3px #5f9a3a33;flex:none}
.feed-title .ui-icon{width:22px;height:22px}

/* Games strip under the chat. */
.games-strip{margin:16px 0;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
.games-strip .panel-heading{border-top-color:#3f8fc4}
.games-strip .panel-heading span{display:flex;align-items:center;gap:8px}
.games-strip .panel-heading .ui-icon{width:24px;height:24px}
.games-row{display:grid;grid-auto-flow:column;grid-auto-columns:158px;gap:12px;overflow-x:auto;padding:12px 12px 10px;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:thin}
.map-legend{color:#4a5a66!important;font-size:13px!important}
.feed-title h3{color:#4d6a2a}
.game-card{display:flex;flex-direction:column;gap:6px;align-items:stretch;background:#fff;border:1px solid #dbe5ec;border-radius:5px;padding:6px 6px 8px;text-align:center;scroll-snap-align:start;color:#34434d;transition:border-color .15s,box-shadow .15s}
.game-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block;background:#eef4f8}
.game-card b{font-size:14px;color:#1f5f8c;line-height:1.25}
.game-card small{font-size:12px;color:#5b6e7b;direction:ltr}
.game-card:hover:not(:disabled){border-color:#2a6f9e;background:#fff;box-shadow:0 3px 10px #1f5f8c22}
.games-note{font-size:12px;color:#4a5a66;padding:0 12px 10px;margin:0}

dialog.game-player{border:0;padding:0;border-radius:8px;width:min(980px,96vw);max-width:96vw;max-height:94vh;background:#0f1c26;color:#fff;box-shadow:0 18px 50px #000a;overflow:hidden}
dialog.game-player::backdrop{background:#0b1620d9}
.player-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px 8px 14px;background:linear-gradient(#2f7bb0,#1f5f8c)}
.player-head h2{margin:0;font-size:17px;color:#fff}
.player-head .icon-close{background:#ffffff1f;border-color:#ffffff55;color:#fff}
.player-frame{position:relative;width:100%;aspect-ratio:var(--ratio,4/3);max-height:calc(94vh - 52px);margin:auto;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player-note{margin:0;padding:6px 14px 8px;font-size:12px;color:#c9d8e2;background:#0f1c26}

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

/* Two columns only where the map is wide enough for its place labels not to collide. */
@media(max-width:980px){
  .entry-hero{grid-template-columns:1fr}
}
@media(max-width:820px){
  .join-panel h1{font-size:24px}
  .guest-preview{flex-wrap:wrap}
}
@media(max-width:560px){
  .rule-list{grid-template-columns:1fr}
  .auth-card label{grid-template-columns:1fr;gap:3px}
  .games-row{grid-auto-columns:138px}
  dialog.game-player{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}
}