html,body { background:#0a0618; margin:0; }
body { overflow:hidden; }
:focus-visible { outline:2px solid #c4b5fd; outline-offset:5px; }
/* Shared behavior fixes. Original visual rules live in desktop.css / mobile.css. */
#app { min-height:100dvh; }
:where(button,input,textarea) { font-family:inherit; }
a { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:wait; opacity:.6; }
.filing-pending { color:inherit; font-size:inherit; }
.qrcode-placeholder img { width:100%; height:100%; object-fit:contain; }
.toast { position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); z-index:3000; max-width:min(90vw,520px); width:max-content; padding:13px 20px; background:rgba(25,15,46,.97); border:1px solid rgba(196,181,253,.4); border-radius:12px; color:#fff; font-size:14px; line-height:1.6; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.load-error { position:fixed; inset:0 0 auto; padding:20px; background:#24143c; z-index:9999; }
.modal-overlay:not(.active), .drawer:not(.active) { visibility:hidden; }
.modal-overlay.active, .drawer.active { visibility:visible; }
/* Download entry points are temporarily hidden on both layouts. */
#app .nav-cta-wrapper,
#app .hero-buttons,
#app .cta-buttons,
#app .drawer-download,
#app .bottom-download-bar { display:none; }
/* Temporarily hide guild application links while keeping the form available. */
#app .guild-entry { display:none; }
/* Desktop: keep the prototype unchanged where it fits. */
@media (min-width:769px) {
  .hero-video-placeholder { background-image:url(/assets/home-gathering.png); }
  #main-view, .page-view, #guild-view { height:100dvh; }
  #guild-view { overflow-y:auto; }
  .fp-section { height:100dvh; }
  #about .footer-links .filing-pending { font-size:12px; color:rgba(255,255,255,.3); }
  .nav-cta-wrapper:focus-within .nav-cta-qrcode { opacity:1; visibility:visible; }
  .download-btn-wrapper:focus-within .download-qrcode { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
}
/* A short desktop window needs space beneath the fixed navigation, not clipping. */
@media (min-width:769px) and (max-height:820px) {
  #main-view { scroll-snap-type:y proximity; }
  .section.fp-section {
    height:auto;
    min-height:100dvh;
    padding-top:96px;
    padding-bottom:48px;
  }
  .section.fp-section .feature-block { flex-shrink:0; }
  .hero.fp-section { height:auto; min-height:100dvh; }
  .hero-content-bottom { padding-top:96px; }
}
/* Scale only the decorative phone previews; keep real page text at its own size. */
@media (min-width:769px) and (max-height:740px) {
  .section .phone-mockup { height:522px; }
  .section .phone-frame { transform:scale(.9); flex-shrink:0; }
}
@media (min-width:769px) and (max-height:660px) {
  .section .phone-mockup { height:452.4px; }
  .section .phone-frame { transform:scale(.78); }
}
/* The source footer is absolutely centered: switch to flow before it overlaps. */
@media (min-width:769px) and (max-height:980px) {
  #about.footer { min-height:100dvh; overflow:visible; }
  #about .footer-cta {
    position:relative;
    inset:auto;
    transform:none;
    flex:1 0 auto;
    justify-content:center;
    padding:88px 48px 40px;
  }
  #about .download-app-icon { margin-bottom:12px; }
  #about .footer-content-wrapper { margin-top:0; }
}
@media (min-width:769px) and (max-height:800px) {
  #about .footer-cta { padding:88px 32px 32px; gap:16px; }
  #about .download-app-icon img { width:112px; height:112px; border-radius:24px; }
  #about .footer-content-wrapper { padding:32px 32px 24px; }
  #about .footer-content { margin-bottom:24px; }
  #about .footer-bottom { padding-top:20px; gap:10px; }
}
/* Compact desktop widths retain PC composition without squeezing the navigation. */
@media (min-width:769px) and (max-width:1100px) {
  .navbar { padding-left:24px; padding-right:24px; gap:24px; }
  .navbar > .logo, .navbar .nav-cta-wrapper { flex-shrink:0; }
  .navbar .logo, .navbar .nav-links a, .navbar .nav-cta { white-space:nowrap; }
  .navbar .nav-links { gap:clamp(16px,2.2vw,24px); }
  .navbar .nav-links a { font-size:16px; }
  .section { padding-left:32px; padding-right:48px; }
  .feature-block { width:100%; gap:32px; }
  .phone-mockup { flex:0 0 280px; min-width:280px; }
  .feature-content { min-width:0; }
  .page-container { padding:56px 32px; }
  .page-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
  .page-contact-grid { gap:24px; }
  .page-contact-info, .page-job-info { min-width:0; overflow-wrap:anywhere; }
  .guild-form-wrapper { padding:32px; }
}
@media (max-width:768px) {
  html:not(.ready) #app { visibility:hidden; }
  .device-frame { height:100dvh; }
  .navbar { padding-top:env(safe-area-inset-top); height:calc(56px + env(safe-area-inset-top)); }
  .bottom-download-bar { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .page-view, .guild-view { padding-top:calc(56px + env(safe-area-inset-top)); }
  .page-content, .guild-container { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .drawer { padding-top:calc(32px + env(safe-area-inset-top)); padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
  .drawer { overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
  .drawer-nav { flex-shrink:0; }
  .drawer-overlay { touch-action:none; overscroll-behavior:none; }
  #app.drawer-open #mainView,
  #app.drawer-open .page-view,
  #app.drawer-open .guild-view { overflow-y:hidden; touch-action:none; overscroll-behavior:none; }
  .fp-section { min-height:100%; height:auto; }
  .hero-section { min-height:100%; }
  .feature-section { min-height:100%; padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
  .download-section { min-height:100%; padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
  .form-input, .form-textarea { font-size:16px; min-width:0; }
  .form-checkbox label { min-width:0; }
  .contact-value { overflow-wrap:anywhere; }
  .modal { max-height:calc(100dvh - 48px); overflow-y:auto; }
  .fp-nav-dot::before { content:''; position:absolute; inset:-6px -12px; }
  .fp-nav-dot { position:relative; }
  .guild-code-btn { flex-shrink:0; }
}
@media (max-width:768px) and (max-height:650px) {
  #mainView { scroll-snap-type:y proximity; }
  .hero-section { padding-top:90px; padding-bottom:100px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

@media (max-width:768px) and (max-height:799px) {
  .feature-section { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
}