/* Tideglass title screen. Scoped so the combat HUD retains its own design. */
#screen {
  --landing-ink:#09151c; --landing-ivory:#f3ead7; --landing-gold:#d9bc83; --landing-muted:#b6c5c8; --landing-line:#72858055;
  position:absolute; inset:0; width:100%; height:100%; padding:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  overflow:auto; overscroll-behavior:contain; isolation:isolate; background:var(--landing-ink); color:var(--landing-ivory); text-align:left; scrollbar-color:#71817b #09151c;
}
#screen [hidden] { display:none!important; }
#screen .landing-art { position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(90deg,rgba(5,15,22,.79),rgba(5,15,22,.4) 35%,rgba(5,15,22,0) 66%),linear-gradient(0deg,rgba(5,15,22,.8),transparent 35%),url('./assets/landing/tideglass-coast.webp'); background-size:cover; background-position:center; }
#screen .landing-header { display:flex; align-items:center; justify-content:space-between; padding:22px clamp(24px,5vw,88px); position:relative; z-index:3; gap:24px; flex:none; background:linear-gradient(#07131cad,transparent); }
#screen .landing-wordmark { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.15em; text-decoration:none; color:var(--landing-ivory); }
#screen .landing-wordmark b { font-weight:400; color:var(--landing-gold); margin-left:4px; }
#screen .landing-sigil { font:500 32px/.9 'Cormorant Garamond',Georgia,serif; color:var(--landing-gold); border-bottom:1px solid var(--landing-gold); padding:0 4px 3px; }
#screen .landing-help { position:relative; }
#screen .landing-help summary { display:flex; align-items:center; gap:28px; min-height:44px; cursor:pointer; list-style:none; font-size:14px; color:var(--landing-ivory); }
#screen .landing-help summary::-webkit-details-marker { display:none; }
#screen .landing-help summary > span { font-size:22px; font-weight:400; }
#screen .landing-help[open] summary > span { transform:rotate(45deg); }
#screen .landing-help-content { position:absolute; right:0; top:52px; width:360px; max-height:calc(100dvh - 140px); overflow:auto; padding:24px; background:#0c1c24; border:1px solid var(--landing-line); box-shadow:0 16px 48px #03090db3; }
#screen .landing-help-content h2 { margin:0 0 12px; font-size:28px; }
#screen .landing-help-content p { font-size:14px; line-height:1.6; color:var(--landing-muted); }
#screen .landing-help-content dl { margin:20px 0; font-size:12px; line-height:1.5; }
#screen .landing-help-content dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--landing-line); }
#screen .landing-help-content dd { margin:0; text-align:right; color:var(--landing-muted); }
#screen .intro { flex:1 0 auto; width:100%; max-width:none; margin:0; padding:16px clamp(24px,7.2vw,120px) 24px; text-align:left; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
#screen .landing-story { max-width:600px; }
#screen .landing-footer { padding-top:12px; padding-bottom:16px; }
#screen .landing-kicker { display:flex; align-items:center; gap:12px; color:var(--landing-gold); font-size:12px; letter-spacing:.17em; font-weight:600; line-height:1.5; }
#screen .landing-kicker > span { width:28px; height:1px; background:var(--landing-gold); }
#screen .intro h1 { font:500 clamp(62px,7vw,104px)/.79 'Cormorant Garamond',Georgia,serif; letter-spacing:-.045em; margin:26px 0 20px; color:var(--landing-ivory); text-shadow:0 4px 24px #07121950; }
#screen .intro h1 > span { display:block; font-size:.66em; line-height:1; letter-spacing:.08em; margin-top:9px; color:var(--landing-gold); }
#screen .subtitle { margin:0 0 12px; font:500 25px/1.25 'Cormorant Garamond',Georgia,serif; letter-spacing:0; color:var(--landing-ivory); }
#screen .landing-description { font-size:14px; line-height:1.7; color:var(--landing-muted); margin:0 0 24px; }
#screen #lobby-panel,#screen #results-panel { width:min(100%,420px); max-width:none; padding:0; border:0; border-radius:0; margin:0; clip-path:none; box-shadow:none; background:none; }
#screen .lobby-form { margin:0 0 20px; text-align:left; }
#screen .hunter-name-label,#screen .school-label { display:block; font:600 12px/1.5 Manrope,Arial,sans-serif; letter-spacing:.1em; color:var(--landing-muted); margin:0 0 8px; }
#screen input { width:100%; max-width:none; margin:0; min-width:0; min-height:48px; border:1px solid var(--landing-line); border-radius:0; background:#0b1b23d9; color:var(--landing-ivory); padding:12px 15px; font:400 16px/1.4 Manrope,Arial,sans-serif; user-select:text; box-shadow:none; }
#screen input::placeholder { color:var(--landing-muted); }
#screen #hunter-name { margin-bottom:20px; }
#screen .school-select { display:flex; width:100%; gap:0; padding:0; margin:0; border:1px solid var(--landing-line); background:#0b1b23d9; }
#screen button { box-shadow:none; clip-path:none; border-radius:0; min-height:44px; font:600 14px/1.3 Manrope,Arial,sans-serif; letter-spacing:0; transition:background 150ms ease,color 150ms ease,border-color 150ms ease; }
#screen .school-option { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; background:transparent; color:var(--landing-muted); border:0; border-bottom:2px solid transparent; min-height:50px; margin:0; }
#screen .school-option + .school-option { border-left:1px solid var(--landing-line); }
#screen .school-option.active { background:#233536; border-bottom-color:var(--landing-gold); color:var(--landing-ivory); }
#screen .school-option .hud-icon { width:22px; height:22px; flex:none; filter:none; }
#screen #school-description { margin:10px 0 0; font-size:12px; color:var(--landing-muted); line-height:1.5; min-height:18px; }
#screen .lobby-actions { display:flex; flex-direction:column; gap:0; align-items:stretch; margin:0; }
#screen .landing-primary,#screen #btn-create-room,#screen #btn-start-match { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:56px; border:1px solid var(--landing-gold); background:var(--landing-gold); color:#152025; padding:15px 20px; font-size:16px; font-weight:700; }
#screen .landing-primary:hover:not(:disabled) { background:#edd3a2; border-color:#edd3a2; }
#screen .landing-primary > span:last-child:not(:first-child) { font-size:22px; font-weight:400; }
#screen .landing-action-note { margin:10px 0 8px; font-size:12px; color:var(--landing-muted); text-align:center; }
#screen .landing-text-button { background:transparent; border:0; color:var(--landing-ivory); padding:10px 0; text-align:left; align-self:flex-start; }
#screen #btn-open-join { align-self:center; display:flex; align-items:center; gap:24px; }
#screen .landing-text-button:hover { color:var(--landing-gold); background:transparent; }
#screen button:hover:not(.landing-primary):not(.landing-text-button):not(:disabled) { background:#283c40; color:var(--landing-ivory); }
#screen :is(button,a,summary,input):focus-visible { outline:2px solid var(--landing-gold); outline-offset:4px; }
#screen button:disabled { opacity:.5; cursor:not-allowed; }
#screen #btn-back-create { margin-bottom:16px; }
#screen .join-box { width:100%; gap:8px; }
#screen .join-box input { flex:1; width:0; }
#screen .join-box button { flex:none; min-height:48px; background:var(--landing-gold); color:#152025; border:1px solid var(--landing-gold); }
#screen #public-rooms { margin:24px 0 0; padding-top:16px; border-top:1px solid var(--landing-line); }
#screen .rooms-heading h2 { font:500 25px/1.2 'Cormorant Garamond',Georgia,serif; color:var(--landing-ivory); }
#screen #rooms-refresh { padding:8px 0 8px 12px; background:none; border:0; color:var(--landing-muted); font-size:12px; }
#screen #rooms-status { font-size:12px; line-height:1.6; color:var(--landing-muted); margin:8px 0 0; }
#screen #rooms-list { max-height:190px; margin-top:8px; }
#screen #rooms-list li { border-color:var(--landing-line); }
#screen #rooms-list button { background:#13282f; border:1px solid var(--landing-line); }
#screen #room-info h2,#screen #results-panel h2 { font:500 38px/1.1 'Cormorant Garamond',Georgia,serif; letter-spacing:-.025em; margin:10px 0 24px; }
#screen .room-pill { display:flex; justify-content:space-between; align-items:center; width:100%; border-radius:0; padding:0 0 20px; margin:0; background:none; gap:12px; font-size:12px; color:var(--landing-muted); }
#screen #room-code { display:block; font-size:22px; line-height:1.5; letter-spacing:.04em; color:var(--landing-ivory); user-select:all; overflow-wrap:anywhere; }
#screen #btn-copy-invite { flex:none; font-size:12px; background:transparent; border:1px solid var(--landing-line); padding:10px 12px; }
#screen .lobby-roster { background:none; border:0; border-top:1px solid var(--landing-line); border-radius:0; padding:0; max-height:220px; margin:0 0 24px; }
#screen .roster-item { min-height:54px; align-items:center; gap:16px; font-size:14px; border-bottom:1px solid var(--landing-line); }
#screen .roster-item > span:first-child { overflow-wrap:anywhere; min-width:0; }
#screen .roster-item > span:last-child { flex:none; font-size:12px; }
#screen .roster-host { display:inline-block; font-size:10px; color:var(--landing-gold); border:1px solid var(--landing-line); padding:2px 4px; margin-left:6px; vertical-align:middle; }
#screen .lobby-room-buttons { gap:12px; justify-content:stretch; align-items:stretch; }
#screen #btn-toggle-ready { background:#162d33; border:1px solid var(--landing-line); flex:1; padding:12px; }
#screen .lobby-room-buttons #btn-start-match { flex:2; width:auto; font-size:14px; justify-content:center; }
#screen #btn-leave-lobby { margin-top:12px; color:var(--landing-muted); font-size:12px; }
#screen #loadstatus { margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--landing-muted); max-width:420px; overflow-wrap:anywhere; }
#screen #loadstatus:empty { display:none; }
#screen .landing-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px clamp(24px,5vw,88px) 24px; font-size:12px; color:var(--landing-muted); flex:none; }
#screen .landing-edition { display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.06em; }
#screen .landing-edition i { width:5px; height:5px; background:var(--landing-gold); border-radius:50%; }
#screen .landing-match-note { font-size:12px; letter-spacing:.08em; }
#screen .landing-match-note > span { padding:0 10px; color:var(--landing-gold); }
#screen .landing-footer a { color:var(--landing-muted); text-decoration:none; padding:10px 0; }
#screen .landing-footer a:hover { color:var(--landing-ivory); }
body.landing-room #screen #hunter-setup { display:none; }
body:not(.playing):not(.landing-room) .social-hud { display:none; }
body:not(.playing).landing-room .social-hud { left:auto; right:24px; bottom:90px; }
body:not(.playing).landing-room .social-dock { display:flex; gap:8px; width:auto; }
body:not(.playing).landing-room :is(.social-bubble,.social-voice-access,.social-mic-access) { min-height:44px; height:44px; width:auto; flex:1; border-radius:0; background:#0c1c24; font-size:12px; }
body.showing-results #screen .intro { padding:50px clamp(24px,7.2vw,120px); }
body.showing-results #screen #results-panel { width:min(100%,600px); }
#screen #results-summary { font-size:18px; margin-bottom:24px; }
#screen #results-scoreboard { max-height:40dvh; overflow:auto; margin-bottom:24px; }
#screen #results-scoreboard .board-row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; font-size:14px; border-bottom:1px solid var(--landing-line); }
@media(min-width:1000px) and (max-height:850px) {
  #screen .landing-header { padding-top:18px; padding-bottom:12px; }
  #screen .intro { padding-top:15px; padding-bottom:20px; }
  #screen .intro h1 { font-size:82px; margin-top:24px; margin-bottom:20px; }
  #screen .landing-description { margin-bottom:22px; }
  #screen .landing-footer { padding-top:8px; padding-bottom:16px; }
}
@media(max-width:1000px) {
  #screen .landing-art { background-position:62% center; }
  #screen .landing-match-note { display:none; }
  #screen .intro { padding-left:40px; padding-right:40px; }
}
@media(max-width:600px) {
  #screen .landing-art { background-size:auto 560px; background-position:64% top; background-repeat:no-repeat; background-image:linear-gradient(0deg,#09151c 0%,rgba(9,21,28,.15) 65%),url('./assets/landing/tideglass-coast.webp'); }
  #screen .landing-header { padding:16px 22px; gap:12px; }
  #screen .landing-wordmark { gap:8px; font-size:10px; letter-spacing:.1em; }
  #screen .landing-sigil { font-size:26px; }
  #screen .landing-help summary { font-size:12px; gap:12px; }
  #screen .landing-help-content { position:fixed; top:74px; left:20px; right:20px; width:auto; max-height:calc(100dvh - 100px); }
  #screen .intro { padding:48px 24px 24px; justify-content:flex-start; }
  #screen .landing-story { width:100%; }
  #screen .landing-kicker { font-size:12px; letter-spacing:.06em; gap:8px; }
  #screen .landing-kicker > span { width:18px; }
  #screen .intro h1 { font-size:clamp(54px,14.6vw,82px); margin:24px 0 20px; }
  #screen .subtitle { font-size:23px; }
  #screen .landing-description { font-size:14px; margin:0 0 34px; }
  #screen #lobby-panel { width:100%; }
  #screen .school-option { padding:10px 8px; }
  #screen .landing-footer { padding:16px 24px max(20px,env(safe-area-inset-bottom)); gap:12px; align-items:center; }
  #screen .landing-edition { font-size:12px; letter-spacing:0; }
  #screen .landing-footer a { font-size:12px; }
  #screen #loadstatus { margin-top:12px; }
  body.landing-room #screen .landing-description { display:none; }
  body.landing-room #screen .intro { padding-top:28px; padding-bottom:100px; }
  body.landing-room #screen #lobby-panel { margin-top:28px; }
  body:not(.playing).landing-room .social-hud { bottom:12px; left:24px; right:24px; width:calc(100% - 48px); }
  body.showing-results #screen .intro { padding:40px 24px; }
  #screen #results-scoreboard .board-row { flex-direction:column; gap:5px; }
}
@media(prefers-reduced-motion:reduce) { #screen *,#screen *::before,#screen *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

/* Living coast: the supplied painting supplies the teal, ink and sunset gold. */
#screen .landing-art { background-image:url('./assets/landing/tideglass-coast.webp'); }
#screen .landing-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,15,22,.83),rgba(5,15,22,.43) 35%,rgba(5,15,22,0) 68%),linear-gradient(0deg,rgba(5,15,22,.8),transparent 35%); }
#landing-video { width:100%; height:100%; display:block; object-fit:cover; object-position:center; opacity:0; transition:opacity 500ms ease; }
#landing-video.is-ready { opacity:1; }
#screen .landing-header-actions { display:flex; align-items:center; gap:32px; }
#screen #landing-motion-toggle { display:flex; align-items:center; gap:8px; padding:8px 0; border:0; color:var(--landing-muted); background:transparent; font-size:12px; font-weight:400; }
#screen #landing-motion-toggle[hidden] { display:none; }
#screen #landing-motion-toggle:hover { color:var(--landing-ivory); background:transparent; }
#landing-motion-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
#landing-motion-toggle .motion-play,#landing-motion-toggle[data-paused="true"] .motion-pause { display:none; }
#landing-motion-toggle[data-paused="true"] .motion-play { display:block; }
#screen .landing-story { animation:coast-arrive 500ms cubic-bezier(.23,1,.32,1) both; }
#screen #lobby-panel { animation:coast-arrive 500ms 90ms cubic-bezier(.23,1,.32,1) both; }
#screen .landing-primary > span:last-child { transition:transform 150ms ease; }
#screen .landing-primary:hover > span:last-child { transform:translate(2px,-2px); }
#screen .school-option { transition:background 150ms ease,border-color 150ms ease,color 150ms ease; }
#screen .school-option[data-school="storm"].active { border-bottom-color:#c3d7ea; background:#26323d; }
#screen .school-option[data-school="frost"].active { border-bottom-color:#9fdbd8; background:#193839; }
@keyframes coast-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { #landing-video { object-position:62% center; } }
@media(max-width:600px) {
  #screen .landing-art { height:560px; background-image:url('./assets/landing/tideglass-coast.webp'); background-position:64% top; }
  #screen .landing-art::after { background:linear-gradient(0deg,#09151c 0%,rgba(9,21,28,.15) 65%),linear-gradient(90deg,rgba(5,15,22,.38),transparent 85%); }
  #landing-video { object-position:64% top; }
  #screen .landing-header-actions { gap:18px; }
  #screen #landing-motion-toggle span { display:none; }
  #screen #landing-motion-toggle { width:44px; justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  #landing-video { display:none; }
  #screen .landing-primary:hover > span:last-child { transform:none; }
}

/* Attribution belongs only to the public landing, never party, match or results. */
#screen .landing-maker { position:fixed; right:24px; bottom:max(20px,env(safe-area-inset-bottom)); z-index:5; line-height:0; }
#screen .landing-footer { padding-bottom:76px; }
body:is(.landing-room,.playing,.showing-results) #screen .landing-maker { display:none; }
@media(max-width:600px) {
  #screen .landing-maker { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); }
}