/* Mycra Meet — Dr. Craig Coenen's calm, professional aesthetic.
   Blues + whites + greys. Georgia serif. Musical motifs. Elderly-friendly. */

:root {
  --bg: #F0F4F8;
  --bg2: #E2E8F0;
  --bg3: #CBD5E1;
  --fg: #1E293B;
  --fg2: #556477;
  --fg3: #5E6D80;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: rgba(37, 99, 235, 0.08);
  --accent-soft: rgba(37, 99, 235, 0.15);
  --success: #178A42;
  --success-soft: rgba(23, 138, 66, 0.12);
  --warning: #D97706;
  --danger: #DC2626;
  --card-bg: #FFFFFF;
  --border: #CBD5E1;
  --border-light: #E2E8F0;
  --shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10);
  --radius: 16px;
  --radius-sm: 10px;
  --serif: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--sans);background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;font-size:16px;
  /* Safe areas for notch / home indicator / Dynamic Island */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
button{cursor:pointer;border:none;font-family:var(--sans);font-size:16px;
  /* Apple HIG: 44px minimum touch target */
  min-height:44px;min-width:44px;
}

/* ── Skip link (screen reader navigation) ── */
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;padding:12px 24px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:16px;font-weight:600;z-index:9999;
  text-decoration:none;
  transition:top 0.2s ease;
}
.skip-link:focus{top:0}

/* ── Screen reader only (visually hidden) ── */
.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;
}

/* ── Focus styles (WCAG 2.1 AA — visible focus indicators) ── */
*:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
/* Control bar buttons — light blue focus ring on dark background */
.ctrl:focus-visible{
  outline:3px solid #60A5FA;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(96,165,250,0.25);
}
.ctrl.end:focus-visible{
  outline-color:#FCA5A5;
  box-shadow:0 0 0 6px rgba(252,165,165,0.25);
}
/* Primary / action buttons */
.big-btn:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(37,99,235,0.2);
}
/* Utility buttons in dark contexts */
.chat-close:focus-visible,
.clippy-dismiss:focus-visible,
.copy-btn:focus-visible{
  outline:3px solid #60A5FA;
  outline-offset:2px;
}
/* Text inputs — use border glow instead of outline */
.lobby-input:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,0.25);
}
.chat-input:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,0.25);
}
/* Return-link is now a button — reset its appearance */
button.return-link{
  background:none;border:none;font-size:16px;color:var(--fg2);
  margin-top:10px;display:inline-flex;align-items:center;
  text-decoration:underline;cursor:pointer;
  font-family:var(--sans);min-height:44px;
}

/* ── Reduced motion preference ── */
@media(prefers-reduced-motion:reduce){
  *,.screen,.clippy{animation:none!important;transition:none!important}
}

.screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:1rem}
.screen.active{display:flex}

/* ── Lobby ── */
#lobby{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(148,163,184,0.06) 0%, transparent 60%),
    var(--bg);
}
.lobby-card{
  width:100%;max-width:none;
  background:var(--card-bg);
  border:1px solid var(--border-light);
  border-radius:16px;padding:1.25rem;text-align:center;
  box-shadow:var(--shadow-lg);
}
.lobby-brand{color:var(--accent);font-family:var(--serif);font-size:16px;letter-spacing:0.08em;margin-bottom:8px;font-style:italic}
.lobby-card h1{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin-bottom:10px;color:var(--fg);line-height:1.3}
.lobby-card p{color:var(--fg2);font-size:16px;margin-bottom:1.25rem;line-height:1.7}
.lobby-input{
  width:100%;padding:16px 18px;
  background:var(--bg);border:2px solid var(--border);
  border-radius:var(--radius-sm);color:var(--fg);font-size:18px;
  outline:none;margin-bottom:14px;text-align:center;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.lobby-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,62,107,0.1)}
.lobby-privacy{margin-top:1.2rem;font-size:16px;color:var(--fg3)}
.return-banner{
  margin-bottom:1.5rem;padding:16px;
  background:var(--accent-light);border:1px solid rgba(44,62,107,0.15);
  border-radius:var(--radius-sm);font-size:16px;
}
.return-banner strong{color:var(--accent)}
.return-link{font-size:16px;color:var(--fg2);margin-top:10px;display:block;text-decoration:underline;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}

/* ── Buttons ── */
.big-btn{
  width:100%;padding:14px;border-radius:var(--radius-sm);
  font-size:16px;font-weight:600;min-height:50px;
  transition:all 0.2s ease;
}
.big-btn.primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(44,62,107,0.25)}
.big-btn.primary:hover{background:var(--accent-hover);box-shadow:0 4px 16px rgba(44,62,107,0.3);transform:translateY(-1px)}
.big-btn.success{background:var(--success);color:#fff;box-shadow:0 2px 8px rgba(23,138,66,0.25)}
.big-btn.success:hover{background:#126E35;transform:translateY(-1px)}
.big-btn.outline{background:var(--card-bg);color:var(--fg2);border:2px solid var(--border)}
.big-btn.outline:hover{border-color:var(--fg2);background:var(--bg)}
.big-btn:disabled{opacity:0.5;cursor:default;transform:none}
.btn-row{display:flex;flex-direction:column;gap:12px}

/* ── Wizard ── */
.wizard-card{width:100%;max-width:none;text-align:center}
.wizard-step{font-size:16px;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.12em;font-family:var(--serif)}
.wizard-card h2{font-family:var(--serif);font-size:1.35rem;font-weight:400;margin-bottom:10px;color:var(--fg)}
.wizard-card p{color:var(--fg2);font-size:16px;margin-bottom:1.25rem;line-height:1.6}

/* Wizard art — inline SVG illustrations */
.wizard-art{width:80px;height:80px;margin:0 auto 1rem;opacity:0.7}
.wizard-art svg{width:100%;height:100%}

.preview-box{
  width:100%;aspect-ratio:4/3;background:#1E293B;
  border-radius:var(--radius);overflow:hidden;position:relative;margin-bottom:1.5rem;
  box-shadow:var(--shadow);
}
.preview-box video{width:100%;height:100%;object-fit:cover}
.mic-meter{height:14px;background:var(--bg3);border-radius:7px;margin-bottom:1.5rem;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}
.mic-meter-bar{height:100%;background:linear-gradient(90deg, var(--success), #1EA34E);border-radius:7px;width:0%;transition:width 60ms}
.help-box{
  margin-top:1.25rem;padding:14px 16px;
  background:var(--accent-light);border:1px solid rgba(37,99,235,0.2);
  border-radius:var(--radius-sm);text-align:left;font-size:16px;line-height:1.7;display:none;
}
.help-box.show{display:block}
.help-box strong{color:var(--warning)}

/* ── Room (stays dark for video contrast) ── */
#room{padding:0;background:#111}
#room.active{display:flex;flex-direction:column;height:100vh;height:100dvh}
.room-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));background:#1a1a1a;border-bottom:1px solid rgba(255,255,255,0.08);flex-wrap:wrap;gap:8px}
.room-header-left{display:flex;align-items:center;gap:10px}
.room-dot{width:10px;height:10px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 6px rgba(39,174,96,0.4)}
.room-dot.warning{background:var(--warning);box-shadow:0 0 6px rgba(230,126,34,0.4)}
.room-dot.error{background:var(--danger);box-shadow:0 0 6px rgba(192,57,43,0.4)}
.room-status{font-size:16px;color:#9ca3af}
.room-name{font-size:16px;font-weight:600;color:#f5f5f5;font-family:var(--serif)}
.room-header-right{display:flex;align-items:center;gap:10px}
.copy-btn{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#252525;border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#9ca3af;font-size:16px;transition:all 0.2s;min-height:44px}
.copy-btn:hover{border-color:#666;color:#fff}
.copy-btn svg{width:16px;height:16px;fill:currentColor}
.copy-btn.copied{color:var(--success);border-color:var(--success)}
.p-count{font-size:16px;color:#9ca3af;display:flex;align-items:center;gap:4px;min-height:44px}
.p-count svg{width:18px;height:18px;fill:currentColor}
.room-body{display:flex;flex:1;min-height:0}
.videos{flex:1;display:grid;gap:4px;padding:4px;background:#000;min-height:0}
.videos.single{grid-template-columns:1fr}
/* Mobile-first: single column for two-up video */
.videos.two{grid-template-columns:1fr}
.videos.grid-2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.videos.grid-3x3{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto}
.video-tile{position:relative;border-radius:10px;overflow:hidden;background:#111}
.video-tile video{width:100%;height:100%;object-fit:cover}
.video-label{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);padding:5px 12px;border-radius:6px;font-size:16px;color:#fff}
.peer-away{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1a;gap:16px;text-align:center;padding:2rem}
.peer-away .pulse{width:64px;height:64px;border-radius:50%;background:var(--accent);animation:pulse 2.5s ease-in-out infinite}
.peer-away p{font-size:18px;color:#9ca3af;max-width:280px;line-height:1.6;font-family:var(--serif)}
@keyframes pulse{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* ── Controls ── */
.controls{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;padding-bottom:calc(12px + env(safe-area-inset-bottom));padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right));background:#1a1a1a;border-top:1px solid rgba(255,255,255,0.08)}
.ctrl{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#2a2a2a;border:1px solid rgba(255,255,255,0.1);color:#fff;
  transition:all 0.2s ease;
}
.ctrl:hover{background:#3a3a3a;transform:scale(1.05)}
.ctrl svg{width:22px;height:22px;fill:currentColor}
.ctrl.off{background:rgba(192,57,43,0.15);border-color:var(--danger);color:var(--danger)}
.ctrl.end{background:var(--danger);border-color:var(--danger);color:#fff;width:58px;height:50px;border-radius:25px}
.ctrl.end:hover{background:#a93226;transform:scale(1.05)}
.ctrl-label{font-size:14px;color:#a1a1aa;text-align:center;margin-top:4px}
.ctrl-wrap{display:flex;flex-direction:column;align-items:center}
.ctrl-divider{width:1px;height:30px;background:rgba(255,255,255,0.08);margin:0 4px}

/* ── Chat ── */
/* Mobile-first: chat is fullscreen overlay on phone */
.chat-panel{display:none;position:fixed;inset:0;width:100%;z-index:10;background:#1a1a1a;border-left:none;flex-direction:column}
.chat-panel.open{display:flex}
.chat-header{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center}
.chat-header h3{font-size:18px;font-weight:600;color:#f5f5f5}
.chat-close{background:none;color:#a1a1aa;padding:8px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.chat-close svg{width:24px;height:24px;fill:currentColor}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.chat-msg{background:#252525;padding:10px 14px;border-radius:12px;font-size:16px;max-width:85%;line-height:1.5;color:#f5f5f5}
.chat-msg.mine{align-self:flex-end;background:var(--accent);color:#fff}
.chat-msg .sender{font-size:16px;color:#a1a1aa;margin-bottom:3px}
.chat-msg.mine .sender{color:rgba(255,255,255,0.7)}
.chat-input-wrap{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,0.08);display:flex;gap:8px}
.chat-input{flex:1;padding:12px 14px;background:#252525;border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#f5f5f5;font-size:16px;outline:none}
.chat-input:focus{border-color:var(--accent)}
.chat-send{padding:12px 18px;background:var(--accent);border-radius:10px;color:#fff;font-size:16px;font-weight:500}

/* ── Captions ── */
.captions-overlay{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  max-width:92%;width:max-content;padding:10px 16px;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  border-radius:10px;color:#fff;font-size:18px;line-height:1.5;
  text-align:center;pointer-events:none;z-index:5;
  opacity:0;transition:opacity 0.3s ease;
}
.captions-overlay.visible{opacity:1}
.room-body{position:relative}
.ctrl.cc-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Clippy ── */
.clippy{
  position:fixed;bottom:80px;right:12px;left:12px;max-width:none;
  background:var(--card-bg);border:1px solid var(--accent);
  border-radius:var(--radius);padding:16px 18px;
  font-size:16px;line-height:1.6;color:var(--fg);
  box-shadow:var(--shadow-lg);z-index:100;display:none;
  animation:slideUp 0.4s ease;
  margin-bottom:env(safe-area-inset-bottom);
}
.clippy.show{display:block}
.clippy-dismiss{float:right;background:none;color:var(--fg3);font-size:16px;padding:8px;margin-left:8px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.clippy-msg{font-weight:600;display:block;margin-bottom:4px}
.clippy-hint{font-size:14px;color:var(--fg2);display:block;margin-bottom:6px}
.clippy-action{
  display:inline-block;background:var(--accent-light);color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:8px 16px;font-size:14px;font-weight:500;
  cursor:pointer;min-height:44px;margin-top:4px;
}
.clippy-action:hover{background:var(--accent);color:#fff}

/* ── Musical Note Backgrounds ── */
/* Each screen gets progressively more complex note patterns */

/* Lobby: sparse whole notes + treble clef — calm, inviting */
#lobby::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%232563EB' fill-opacity='1'%3E%3Cellipse cx='60' cy='80' rx='12' ry='9'/%3E%3Cellipse cx='320' cy='120' rx='12' ry='9'/%3E%3Cellipse cx='180' cy='300' rx='12' ry='9'/%3E%3Cpath d='M200 40 c0-20 30-30 30-10 c0 25-30 50-30 80 v60 c-15 12-35 8-30-8 c5-16 30-12 30 4 v-126z' fill='none' stroke='%232563EB' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:400px 400px;
}
#lobby{position:relative;overflow:hidden}
#lobby>.lobby-card{position:relative;z-index:1}

/* Wizard Camera (Step 1): quarter notes scattered */
#wiz-cam{position:relative;overflow:hidden}
#wiz-cam::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='%232563EB'%3E%3Cellipse cx='80' cy='100' rx='11' ry='8'/%3E%3Cline x1='91' y1='100' x2='91' y2='40' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='350' cy='200' rx='11' ry='8'/%3E%3Cline x1='361' y1='200' x2='361' y2='140' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='200' cy='380' rx='11' ry='8'/%3E%3Cline x1='211' y1='380' x2='211' y2='320' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='430' cy='420' rx='11' ry='8'/%3E%3Cline x1='441' y1='420' x2='441' y2='360' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='120' cy='320' rx='11' ry='8' transform='rotate(-15 120 320)'/%3E%3Cline x1='131' y1='320' x2='131' y2='260' stroke='%232563EB' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:500px 500px;
}
#wiz-cam>.wizard-card{position:relative;z-index:1}

/* Wizard Speaker (Step 2): eighth notes — beamed pairs */
#wiz-speaker{position:relative;overflow:hidden}
#wiz-speaker::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='%232563EB'%3E%3Cellipse cx='70' cy='140' rx='10' ry='7'/%3E%3Cline x1='80' y1='140' x2='80' y2='80' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='110' cy='130' rx='10' ry='7'/%3E%3Cline x1='120' y1='130' x2='120' y2='70' stroke='%232563EB' stroke-width='2.5'/%3E%3Cline x1='80' y1='80' x2='120' y2='70' stroke='%232563EB' stroke-width='3'/%3E%3Cellipse cx='300' cy='300' rx='10' ry='7'/%3E%3Cline x1='310' y1='300' x2='310' y2='240' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='340' cy='290' rx='10' ry='7'/%3E%3Cline x1='350' y1='290' x2='350' y2='230' stroke='%232563EB' stroke-width='2.5'/%3E%3Cline x1='310' y1='240' x2='350' y2='230' stroke='%232563EB' stroke-width='3'/%3E%3Cellipse cx='420' cy='100' rx='10' ry='7'/%3E%3Cline x1='430' y1='100' x2='430' y2='40' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='460' cy='90' rx='10' ry='7'/%3E%3Cline x1='470' y1='90' x2='470' y2='30' stroke='%232563EB' stroke-width='2.5'/%3E%3Cline x1='430' y1='40' x2='470' y2='30' stroke='%232563EB' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:500px 500px;
}
#wiz-speaker>.wizard-card{position:relative;z-index:1}

/* Wizard Mic (Step 3): sixteenth notes — denser, more energetic */
#wiz-mic{position:relative;overflow:hidden}
#wiz-mic::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='%232563EB'%3E%3Cellipse cx='60' cy='120' rx='9' ry='6.5'/%3E%3Cline x1='69' y1='120' x2='69' y2='65' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M69 65 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cpath d='M69 75 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='250' cy='350' rx='9' ry='6.5'/%3E%3Cline x1='259' y1='350' x2='259' y2='295' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M259 295 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cpath d='M259 305 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='400' cy='180' rx='9' ry='6.5'/%3E%3Cline x1='409' y1='180' x2='409' y2='125' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M409 125 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cpath d='M409 135 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='150' cy='60' rx='9' ry='6.5'/%3E%3Cline x1='159' y1='60' x2='159' y2='5' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M159 5 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cpath d='M159 15 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='350' cy='440' rx='9' ry='6.5'/%3E%3Cline x1='359' y1='440' x2='359' y2='385' stroke='%232563EB' stroke-width='2'/%3E%3Cpath d='M359 385 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:500px 500px;
}
#wiz-mic>.wizard-card{position:relative;z-index:1}

/* Wizard Ready: full melody — treble clef + mixed notes, celebratory */
#wiz-ready{position:relative;overflow:hidden}
#wiz-ready::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='%232563EB'%3E%3Cpath d='M100 100 c0-20 30-30 30-10 c0 25-30 50-30 80 v60 c-15 12-35 8-30-8 c5-16 30-12 30 4 v-126z' fill='none' stroke='%232563EB' stroke-width='2'/%3E%3Cellipse cx='250' cy='150' rx='11' ry='8'/%3E%3Cline x1='261' y1='150' x2='261' y2='90' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='290' cy='140' rx='11' ry='8'/%3E%3Cline x1='301' y1='140' x2='301' y2='80' stroke='%232563EB' stroke-width='2.5'/%3E%3Cline x1='261' y1='90' x2='301' y2='80' stroke='%232563EB' stroke-width='3'/%3E%3Cellipse cx='450' cy='250' rx='12' ry='9'/%3E%3Cellipse cx='500' cy='350' rx='10' ry='7'/%3E%3Cline x1='510' y1='350' x2='510' y2='290' stroke='%232563EB' stroke-width='2.5'/%3E%3Cpath d='M510 290 c15 3 15 15 0 18' fill='none' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='180' cy='450' rx='11' ry='8'/%3E%3Cline x1='191' y1='450' x2='191' y2='390' stroke='%232563EB' stroke-width='2.5'/%3E%3Cellipse cx='220' cy='440' rx='11' ry='8'/%3E%3Cline x1='231' y1='440' x2='231' y2='380' stroke='%232563EB' stroke-width='2.5'/%3E%3Cline x1='191' y1='390' x2='231' y2='380' stroke='%232563EB' stroke-width='3'/%3E%3Cellipse cx='380' cy='500' rx='12' ry='9'/%3E%3Cellipse cx='50' cy='350' rx='10' ry='7'/%3E%3Cline x1='60' y1='350' x2='60' y2='290' stroke='%232563EB' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:600px 600px;
}
#wiz-ready>.wizard-card{position:relative;z-index:1}

/* ── Transitions ── */
.screen{animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Mobile-first
   Base: phone (<640px)
   Tablet: >=640px
   Desktop: >=1024px
   ══════════════════════════════════════════════════ */

/* ── Tablet (640px+) ── */
@media(min-width:640px){
  body{font-size:18px}
  button{font-size:18px}
  .screen{padding:1.5rem}

  /* Lobby: constrain card width, restore larger padding */
  .lobby-card{max-width:480px;padding:2.5rem;border-radius:20px}
  .lobby-card h1{font-size:1.7rem}
  .lobby-card p{margin-bottom:1.5rem}

  /* Wizard: constrain card, restore spacing */
  .wizard-card{max-width:560px}
  .wizard-card h2{font-size:1.5rem}
  .wizard-card p{margin-bottom:1.5rem}

  /* Buttons: full size */
  .big-btn{padding:18px;font-size:18px;min-height:56px}

  /* Room: side-by-side video on tablet */
  .videos.two{grid-template-columns:1fr 1fr}
  .room-header{padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));flex-wrap:nowrap}
  .room-name{font-size:18px}

  /* Controls: larger on tablet */
  .controls{gap:10px;padding:16px}
  .ctrl{width:56px;height:56px}
  .ctrl.end{width:64px;height:56px;border-radius:28px}
  .ctrl svg{width:24px;height:24px}
  .ctrl-divider{height:36px;margin:0 6px}

  /* Captions: narrower max-width */
  .captions-overlay{max-width:80%;bottom:80px}

  /* Clippy: constrain on tablet */
  .clippy{left:auto;max-width:360px;right:20px;bottom:80px}

  /* Help box */
  .help-box{margin-top:1.5rem;padding:16px 18px}
}

/* ── Desktop (1024px+) ── */
@media(min-width:1024px){
  /* Chat: sidebar instead of fullscreen overlay */
  .chat-panel{position:static;width:340px;border-left:1px solid rgba(255,255,255,0.08);z-index:auto}
  .chat-header{padding-top:14px}
  .chat-input-wrap{padding-bottom:12px}

  /* Lobby: slightly more generous */
  .lobby-card{max-width:520px}

  /* Wizard: wider card */
  .wizard-card{max-width:600px}

  /* Clippy: wider on desktop */
  .clippy{max-width:400px}
}

/* ── Landscape (phone in landscape) ── */
@media(orientation:landscape) and (max-height:500px){
  .screen{padding:0.75rem;justify-content:center}
  .lobby-card{padding:1rem;max-width:420px}
  .lobby-card h1{font-size:1.3rem;margin-bottom:6px}
  .lobby-card p{font-size:16px;margin-bottom:0.75rem}
  .lobby-art-img{width:60px!important;height:60px!important}
  .wizard-card{max-width:480px}
  .wizard-art{width:48px;height:48px;margin-bottom:0.5rem}
  .preview-box{aspect-ratio:16/9;max-height:30vh}
  .controls{padding:8px;gap:6px}
  .ctrl{width:44px;height:44px}
  .ctrl.end{width:52px;height:44px;border-radius:22px}
  .ctrl svg{width:20px;height:20px}
  .ctrl-label{font-size:12px;margin-top:2px}
  .room-header{padding:8px 12px}
}

/* ── iPad landscape specific ── */
@media(min-width:1024px) and (orientation:landscape) and (hover:none){
  .lobby-card{max-width:500px}
  .videos.two{grid-template-columns:1fr 1fr}
}

/* ── Touch device enhancements ── */
@media(hover:none) and (pointer:coarse){
  /* Ensure all interactive elements meet 44px touch target */
  .copy-btn{min-height:44px;min-width:44px}
  .chat-close{min-height:44px;min-width:44px}
  .ctrl{min-height:44px;min-width:44px}
  .clippy-dismiss{min-height:44px;min-width:44px}
  .return-link{min-height:44px}
  /* Larger hit areas for wizard buttons */
  .big-btn{min-height:50px}
  /* Disable hover transforms on touch (no ghost taps) */
  .ctrl:hover{transform:none}
  .big-btn.primary:hover{transform:none}
  .big-btn.success:hover{transform:none}
  .copy-btn:hover{color:#9ca3af}
}