*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 70% 0,var(--ui-raised),var(--ui-bg) 65%);min-height:100dvh}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:var(--ui-text);border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:12px;padding:9px 17px;transition:background .15s,transform .15s}button:hover{background:var(--ui-raised)}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent);font-weight:700}a{color:var(--ui-accent-soft)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}.topbar{height:70px;display:flex;align-items:center;gap:20px;padding:10px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--ui-border)}.back{display:flex;color:var(--ui-text)}.logo{width:100px;height:44px;object-fit:contain}.edition{font-size:11px;letter-spacing:3px;color:var(--ui-muted)}.language{margin-left:auto;display:flex;gap:4px}.language button{font-size:12px;padding:7px 11px}.language button[aria-pressed=true]{background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent)}.tabs{display:flex;gap:8px;max-width:1200px;margin:20px auto 0;padding:0 24px}.tabs button{border:none;background:transparent;color:var(--ui-muted);border-radius:0;border-bottom:2px solid transparent}.tabs button[aria-current=true]{color:var(--ui-text);border-bottom-color:var(--ui-accent)}main{max-width:1200px;padding:24px;margin:auto}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(25px,3vw,40px);letter-spacing:-1px;margin-bottom:8px}h2{font-size:22px}.muted{color:var(--ui-muted)}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--ui-accent)}.intro{margin-bottom:26px}.starter-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.starter-tile{position:relative;display:flex;align-items:center;gap:24px;padding:26px;border:1px solid var(--ui-border);border-radius:24px;background:linear-gradient(135deg,var(--ui-raised),var(--ui-surface));overflow:hidden}.starter-tile.chosen{border-color:var(--ui-accent)}.hero-card{width:145px;aspect-ratio:5/7;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(0 14px 14px #0008)}.starter-copy{flex:1;min-width:0}.starter-copy h2{margin:8px 0}.starter-copy p{font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.chosen-label{color:var(--ui-accent-soft);font-size:12px;font-weight:700}.active-summary{margin-top:24px;border:1px solid var(--ui-border);border-radius:18px;padding:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.active-summary p{margin:0}.notice{font-size:12px;color:var(--ui-muted);margin-top:22px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}input,select{border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:10px;padding:9px 12px}input[type=search]{flex:1;min-width:140px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px}.card-cell{min-width:0;position:relative}.card-open{display:block;padding:0;border:0;background:none!important;width:100%;text-align:left}.card-open img{width:100%;aspect-ratio:5/7;object-fit:contain;border-radius:7px;transition:transform .15s}.card-open:hover img{transform:translateY(-4px)}.card-caption{display:block;font-size:12px;margin-top:5px;min-height:36px}.card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ui-muted)}.counter{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:4px;background:var(--ui-surface);border-radius:10px}.counter button{border:0;padding:4px 13px;font-size:21px}.counter output{font-weight:700}.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.deck-entry{padding:20px;border-radius:18px;background:var(--ui-surface);border:1px solid var(--ui-border)}.deck-entry h2{font-size:18px;margin:8px 0}.deck-entry p{font-size:12px}.deck-entry .actions button{font-size:12px}.editor-head{position:sticky;top:0;z-index:5;background:var(--ui-bg);padding:14px 0;border-bottom:1px solid var(--ui-border);margin-bottom:18px}.editor-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.editor-line input{flex:1;min-width:150px}.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin:12px 0 5px}.stats strong{color:var(--ui-accent-soft)}.errors{color:var(--ui-accent-soft);font-size:12px;margin:10px 0 0}.valid{font-size:12px;color:var(--ui-text);margin:10px 0 0}.source-link{font-size:12px}.empty{padding:30px;text-align:center;color:var(--ui-muted)}dialog{color:var(--ui-text);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:20px;padding:0;width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}.dialog-head{position:sticky;top:0;z-index:2;background:var(--ui-surface);display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--ui-border)}.dialog-head span{font-size:10px;letter-spacing:2px;color:var(--ui-muted)}.close{font-size:25px;line-height:1;padding:3px 10px}.detail-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px}.detail-image{width:100%;object-fit:contain;align-self:start}.detail-grid h2{font-size:21px;margin:6px 0}.detail-stats{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;margin:16px 0}.detail-stats b{display:block;font-size:17px}.skill{white-space:pre-wrap;line-height:1.75;font-size:14px}.detail-note{font-size:11px;color:var(--ui-muted)}.glossary{font-size:12px;color:var(--ui-muted);margin-top:18px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ui-text);color:var(--ui-bg);padding:10px 20px;border-radius:12px;z-index:30;display:none}@media(max-width:900px){.topbar{height:54px;gap:12px}.logo{height:36px;width:85px}.tabs{margin-top:8px;padding:0 16px}.tabs button{padding:6px 12px}main{padding:16px}.starter-grid{gap:14px}.starter-tile{gap:15px;padding:18px;border-radius:18px}.hero-card{width:100px}.starter-copy h2{font-size:18px}.starter-copy button{font-size:12px;padding:7px 10px}.intro{margin-bottom:16px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}.detail-grid{grid-template-columns:170px 1fr;gap:18px;padding:18px}.editor-head{padding:10px 0}.editor-line button{padding:7px 12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep the featured card separate from the full-width collection card buttons. */
[hidden]{display:none!important}.play-entry .actions{flex-shrink:0}.play-entry .actions button{min-height:44px}
.starter-tile .hero-card{width:145px;flex:0 0 145px}
.header-right #devmode-launch{font-size:12px;padding:8px 12px;border:1px solid #d49a22;border-radius:8px;color:#ffe1a1;background:#4a3515;font-weight:700;cursor:pointer}
.workspace-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 14px;border:1px solid var(--ui-border);border-radius:10px;color:var(--ui-text);background:var(--ui-raised);font-weight:700}
.workspace-back:hover{border-color:var(--ui-accent);background:var(--ui-surface)}
.shop-menu .workspace-back{margin:0 auto 0 0;white-space:nowrap}
@media(max-width:900px){.starter-tile .hero-card{width:100px;flex-basis:100px}}


/* Portrait is a normal playable layout, including lobby and dialogs. */
@media(max-width:600px) and (orientation:portrait){
  .topbar{gap:9px;padding-inline:12px}.edition{font-size:9px;letter-spacing:1px}
  .tabs{gap:0;padding-inline:12px}.tabs button{flex:1;font-size:12px;padding:9px 5px}
  .starter-grid{grid-template-columns:1fr}.starter-tile{padding:16px;gap:16px}
  .play-entry{padding:16px;gap:12px;flex-wrap:wrap}.play-entry button{width:100%;padding:12px}
  .active-summary{padding:16px}.card-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:16px}
  .dialog-head{padding:10px 12px;gap:6px}.dialog-head span{letter-spacing:1px}
  .detail-grid{grid-template-columns:1fr;padding:14px;gap:14px}.detail-image{width:150px;justify-self:center}
  .printed-info{min-width:0}.room-form{padding:18px}.room-form select{width:100%;min-width:0}
}

.pending-call-card{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px;border:1px solid #83cce566;border-radius:12px;background:#102638}.pending-call-card button{padding:0;flex:none;background:transparent;border:0}.pending-call-card img{display:block;width:78px;height:114px;object-fit:contain}.pending-call-card span{font-size:12px;line-height:1.6}.pending-call-card strong{display:block;color:#ffe1a8;font-size:14px}.pending-call-card small{display:block;color:#afcce1}

.trigger-source.has-call-preview{display:block}.pending-call-card{width:100%;min-width:0}.pending-call-card span{min-width:0;overflow-wrap:anywhere}
/* Card album (2026-10-16): cards not owned yet stay visible in grey so the collection can be completed. */
.card-cell.unowned .foil-card img{filter:grayscale(1) brightness(.5) contrast(.9)}.card-cell.unowned .card-caption,.card-cell.unowned .card-meta{opacity:.55}.card-cell.unowned .owned-note{color:#8fa3b8}.card-cell.unowned .foil-shine{display:none}
.album-progress{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 14px;padding:10px 14px;border:1px solid #2d5b86;border-radius:10px;background:#0c1d33;overflow:hidden}.album-progress>span{position:relative;z-index:1}.album-progress>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1f4f8066,#3aa86b55);transition:width .4s ease}
.album-filters{margin-top:-6px}.album-more{grid-column:1/-1;justify-self:center;margin:8px 0;padding:10px 22px}

/* =============================================================
   DEDICATED FULLSCREEN VANGUARD LOGIN / REGISTER LANDING PORTAL
   ============================================================= */
body.login-required {
  background: radial-gradient(circle at 50% 15%, #183358 0%, #0d1a2d 45%, #050a14 100%) !important;
  color: #f0f6ff !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.login-required .topbar,
body.login-required .topbar {
  display: none !important;
}

html.login-required .tabs,
body.login-required .tabs {
  display: none !important;
}

body.login-required #account-dialog {
  display: none !important;
}

body.login-required #cfv-restart-banner {
  display: none !important;
}

body.login-required main#content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vanguard-login-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.login-backdrop-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    radial-gradient(circle at 20% 30%, rgba(70, 140, 255, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180, 80, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(20, 80, 160, 0.10) 0%, transparent 60%);
  z-index: 1;
}

.login-backdrop-glow::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(50, 130, 240, 0.06) 0%, transparent 70%);
  animation: rotateGlow 30s linear infinite;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.login-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  width: 170px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(60, 150, 255, 0.5));
  margin-bottom: 6px;
}

.login-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}

.vanguard-tag {
  background: linear-gradient(135deg, #1f4f85, #112946);
  border: 1px solid rgba(100, 180, 255, 0.45);
  color: #cce7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.server-status-pill {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: pulseDot 2s infinite ease-in-out;
}

.login-lang-switch {
  display: inline-flex;
  gap: 2px;
  background: rgba(10, 22, 38, 0.8);
  border: 1px solid rgba(80, 140, 210, 0.3);
  border-radius: 16px;
  padding: 2px;
}

.login-lang-switch button {
  border: none;
  background: transparent;
  color: #7d9cb8;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.login-lang-switch button.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

.login-heading {
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffff;
  margin: 4px 0 2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.login-subheading {
  font-size: 13.5px;
  color: #9cb8d6;
  margin: 0;
  line-height: 1.5;
}

.login-card {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(160deg, rgba(22, 42, 68, 0.94) 0%, rgba(12, 23, 40, 0.98) 100%);
  border: 1px solid rgba(110, 185, 255, 0.35);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 40px rgba(45, 115, 215, 0.15);
  padding: 26px 24px;
  backdrop-filter: blur(16px);
}

.auth-tabs {
  display: flex;
  gap: 6px;
  background: rgba(7, 15, 26, 0.65);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 20px;
  border: 1px solid rgba(70, 130, 195, 0.2);
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #83a5c7;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.auth-tab:hover {
  color: #ffffff;
}

.auth-tab.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(147, 197, 253, 0.4);
}

.standalone-auth-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #b0cbe8;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.field-input-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(8, 17, 30, 0.85);
  border: 1px solid rgba(80, 140, 205, 0.3);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-input-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.4);
}

.field-input-box svg {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 18px;
  stroke: #6088b3;
  pointer-events: none;
}

.field-input-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 14.5px;
  padding: 11px 14px 11px 40px;
  border-radius: 12px;
  box-sizing: border-box;
}

.field-input-box input::placeholder {
  color: #4f6a87;
}

.perk-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  color: #fef3c7;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.perk-icon {
  font-size: 17px;
  flex-shrink: 0;
}

.standalone-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 15px;
  line-height: 1.4;
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.standalone-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #60a5fa;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.standalone-submit-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.55);
}

.standalone-submit-btn:active {
  transform: scale(0.98);
}

.standalone-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.standalone-submit-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.login-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.feature-item {
  background: rgba(14, 27, 47, 0.75);
  border: 1px solid rgba(70, 130, 195, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
}

.feature-icon {
  font-size: 18px;
}

.feature-content h3 {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.feature-content p {
  font-size: 11px;
  color: #8dafcb;
  margin: 3px 0 0;
  line-height: 1.35;
}

.login-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.login-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a5b4fc;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 20px;
  transition: all 0.15s;
}

.login-discord-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #ffffff;
}

.login-discord-btn svg {
  width: 16px;
  height: 16px;
}

.vanguard-version-pill {
  font-size: 11px;
  color: #5c7899;
}

@media (max-width: 600px) {
  .login-features {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .login-card {
    padding: 20px 16px;
  }
  .login-brand .login-logo {
    width: 140px;
  }
}