:root {
    --teal: #2ab0b2;
    --teal-dark: #178b8e;
    --plum: #4a2144;
    --purple: #785471;
    --gold: #c89a34;
    --ink: #211b21;
    --muted: #776b75;
    --line: rgba(73, 44, 68, .14);
    --paper: #fffefd;
    --shadow: 0 20px 65px rgba(67, 38, 61, .16);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* ---------------- Entry page ---------------- */
.sonia-entry-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff url('sonia-foundation-bg.jpg') center/cover no-repeat fixed;
}
.sonia-entry-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(205px, 25vh, 285px) 24px clamp(105px, 14vh, 165px);
}
.sonia-welcome-card {
    width: min(720px, 94vw);
    padding: 30px 38px 32px;
    text-align: center;
    background: rgba(255,255,255,.91);
    border: 1px solid rgba(97, 61, 89, .13);
    border-radius: 26px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.sonia-kicker, .eyebrow {
    margin: 0 0 8px;
    color: var(--teal-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.sonia-welcome-card h1 {
    margin: 0;
    color: #2a2329;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.08;
}
.sonia-welcome-card h1 span { color: var(--plum); }
.sonia-welcome-copy { margin: 13px auto 0; max-width: 540px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.landscape-hint {
    width: min(590px, 100%);
    margin: 20px auto 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border: 1px solid rgba(42, 176, 178, .24);
    border-radius: 14px;
    background: rgba(238, 252, 251, .9);
    color: #286466;
}
.rotate-device-icon {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    border-radius: 50%; background: rgba(42,176,178,.12);
    color: var(--teal-dark); font-size: 23px; font-weight: 700;
}
.landscape-hint strong { display: block; font-size: 12px; }
.landscape-hint small { display: block; margin-top: 3px; color: #678486; font-size: 10px; line-height: 1.45; }
.sonia-entry-form { width: min(590px, 100%); margin: 17px auto 0; text-align: left; }
.sonia-entry-form > label, .admin-form label, .join-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #584b55; }
.entry-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
input, textarea {
    width: 100%;
    border: 1px solid rgba(77,55,73,.18);
    border-radius: 12px;
    padding: 12px 13px;
    outline: none;
    background: rgba(255,255,255,.96);
    color: #282128;
    transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(42,176,178,.12); }
.sonia-enter-button, .sonia-send-button, .primary-button {
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(42,176,178,.23);
    transition: transform .16s ease, opacity .16s ease;
}
.sonia-enter-button { min-height: 46px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; white-space: nowrap; }
.sonia-send-button { padding: 10px 17px; }
.primary-button { padding: 12px 16px; }
.sonia-enter-button:hover, .sonia-send-button:hover, .primary-button:hover { transform: translateY(-1px); }
.sonia-enter-button:disabled, .sonia-send-button:disabled, .primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.form-error { margin-top: 9px; padding: 9px 11px; border-radius: 9px; background: #fff0f2; color: #a02e3a; font-size: 11px; }
.entry-status { min-height: 16px; margin: 7px 0 0; text-align: center; color: #688081; font-size: 10px; }

/* ---------------- Hall ---------------- */
.sonia-hall-page { height: 100vh; height: 100dvh; overflow: hidden; background: #fff; }
.sonia-hall {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #fff url('sonia-foundation-bg.jpg') center/cover no-repeat;
}
.hall-stream-frame {
    position: absolute;
    top: clamp(168px, 19vh, 215px);
    right: clamp(42px, 4.8vw, 95px);
    bottom: clamp(88px, 11.5vh, 135px);
    left: clamp(42px, 4.8vw, 95px);
    overflow: hidden;
    background: #090909;
    border: 1px solid rgba(82, 48, 74, .18);
    border-radius: 17px;
    box-shadow: 0 18px 55px rgba(59, 32, 54, .22);
}
.hall-stream { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.stream-not-configured { width: 100%; height: 100%; display: grid; place-items: center; color: #ddd; background: #111; font-size: 14px; }
.hall-top-controls {
    position: absolute;
    z-index: 30;
    top: max(13px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    left: max(14px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.hall-top-right { display: flex; gap: 8px; pointer-events: auto; }
.hall-control-button {
    pointer-events: auto;
    min-height: 39px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(70,47,66,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #412f3d;
    box-shadow: 0 9px 24px rgba(53,30,49,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}
.hall-control-button:hover { border-color: rgba(42,176,178,.4); }
.hall-count { min-width: 21px; height: 21px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--teal); color: #fff; font-size: 9px; }
.hall-reactions {
    position: absolute;
    z-index: 31;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(69,45,64,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 11px 30px rgba(52,28,48,.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.reaction-caption { padding-left: 7px; color: #806f7c; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hall-reaction-btn { width: 39px; height: 39px; border: 0; border-radius: 50%; background: transparent; font-size: 21px; cursor: pointer; transition: transform .14s ease, background .14s ease; }
.hall-reaction-btn:hover { transform: translateY(-2px) scale(1.08); background: rgba(118,80,111,.08); }
.hall-reaction-btn:active { transform: scale(.9); }
.reaction-layer { position: absolute; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
.floating-reaction {
    position: absolute;
    bottom: -65px;
    font-size: clamp(34px, 4vw, 54px);
    animation: floatUp 3.3s cubic-bezier(.16,.67,.3,1) forwards;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
}
@keyframes floatUp {
    0% { transform: translate(0,0) scale(var(--scale,1)); opacity: 0; }
    10% { opacity: 1; }
    72% { opacity: 1; }
    100% { transform: translate(var(--drift,0), -78vh) scale(calc(var(--scale,1) * 1.12)); opacity: 0; }
}

/* Comments drawer: hidden by default */
.comments-backdrop { position: absolute; inset: 0; z-index: 38; background: rgba(25,16,23,.2); opacity: 0; transition: opacity .22s ease; }
.comments-backdrop.is-visible { opacity: 1; }
.hall-comments-panel {
    position: absolute;
    z-index: 40;
    top: 0; right: 0;
    width: min(390px, 92vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    background: rgba(255,255,255,.985);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 58px rgba(53,31,49,.18);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .27s cubic-bezier(.2,.72,.25,1), visibility .27s;
}
.hall-comments-panel.is-open { transform: translateX(0); visibility: visible; }
.hall-comments-header { padding: 20px 19px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.hall-comments-header .sonia-kicker { margin-bottom: 4px; }
.hall-comments-header h2 { margin: 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; }
.hall-comments-header small { display: block; margin-top: 3px; color: #8d7e8a; font-size: 10px; }
.comments-close { width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #66535f; font-size: 23px; line-height: 1; cursor: pointer; }
.comments-list { flex: 1; min-height: 0; overflow-y: auto; }
.hall-comments-list { padding: 9px 15px; }
.comment-item { display: flex; gap: 9px; padding: 10px 1px; }
.comment-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,var(--teal),#8fcac7); color: #fff; font-size: 10px; font-weight: 800; }
.comment-body { min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 7px; }
.comment-meta strong { color: #382b35; font-size: 12px; }
.comment-meta small { color: #a0929e; font-size: 9px; }
.comment-body p { margin: 4px 0 0; color: #655764; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.empty-state { padding: 34px 10px; text-align: center; color: #998a96; font-size: 11px; }
.comment-form { padding: 13px; border-top: 1px solid var(--line); }
.hall-comment-form { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
.comment-form textarea { min-height: 78px; resize: none; }
.comment-form-footer { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-form-footer small { color: #9b8d98; font-size: 9px; }

/* Orientation gate */
.rotate-gate {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.rotate-gate[hidden] { display: none; }
.rotate-card { width: min(420px,94vw); text-align: center; }
.rotate-card h2 { margin: 4px 0 8px; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 400; }
.rotate-card p:not(.sonia-kicker) { margin: 0 auto 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.rotate-visual { margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--teal-dark); font-size: 31px; }
.rotate-action { margin: 0 auto; }
.continue-anyway { display: block; margin: 11px auto 0; border: 0; background: transparent; color: #8d7d89; font-size: 10px; text-decoration: underline; cursor: pointer; }
.app-toast { position: absolute; z-index: 100; left: 50%; bottom: 78px; transform: translate(-50%, 16px); padding: 9px 13px; border-radius: 999px; background: rgba(47,33,44,.92); color: #fff; font-size: 10px; opacity: 0; visibility: hidden; transition: .2s ease; }
.app-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------------- Admin ---------------- */
.login-page { min-height: 100vh; background: #f7f5f7; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 26px; }
.login-card { width: min(450px,100%); padding: 34px; border-radius: 22px; background: #fff; border: 1px solid #e9e3e8; box-shadow: var(--shadow); }
.brand-mark { width: fit-content; padding: 7px 11px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.brand-mark.dark { background: var(--plum); }
.login-card h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 39px; font-weight: 400; }
.muted { color: #7e707b; line-height: 1.55; font-size: 13px; }
.join-form { display: grid; gap: 9px; margin-top: 22px; }
.admin-page { min-height: 100vh; background: #f5f4f6; color: #2c252b; }
.admin-topbar { min-height: 68px; padding: 0 23px; display: flex; align-items: center; justify-content: space-between; background: #332431; color: #fff; }
.admin-topbar .eyebrow { margin: 0 0 2px; color: #bfaebe; }
.admin-topbar nav { display: flex; gap: 8px; }
.admin-topbar nav a { padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; text-decoration: none; color: #f4eef3; font-size: 11px; }
.admin-shell { width: min(1220px,calc(100% - 28px)); margin: 26px auto; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 17px; }
.stat-card { padding: 18px; border: 1px solid #e8e2e7; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(66,39,61,.05); }
.stat-card span { display: block; margin-bottom: 7px; color: #877887; font-size: 10px; }
.stat-card strong { color: var(--plum); font-size: 28px; }
.admin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 17px; }
.admin-card { padding: 19px; border: 1px solid #e8e2e7; border-radius: 16px; background: #fff; box-shadow: 0 7px 22px rgba(66,39,61,.05); }
.section-heading h2 { margin: 0 0 18px; font-size: 20px; }
.admin-form { display: grid; gap: 9px; }
.admin-form small { margin-top: -3px; color: #8d818b; font-size: 10px; line-height: 1.4; }
.switch-row { display: flex !important; align-items: center; gap: 9px; padding: 6px 0; }
.switch-row input { width: 17px; height: 17px; }
.admin-comments { max-height: 620px; overflow: auto; }
.admin-comment { margin-bottom: 9px; padding: 12px; border: 1px solid #ece7eb; border-radius: 11px; }
.admin-comment.is-hidden { opacity: .55; background: #faf8fa; }
.admin-comment > div:first-child { display: flex; justify-content: space-between; gap: 9px; }
.admin-comment small { color: #9b8e98; font-size: 9px; }
.admin-comment p { margin: 7px 0; color: #5a4d57; font-size: 12px; line-height: 1.45; }
.admin-actions { display: flex; gap: 7px; }
.admin-actions form { margin: 0; }
.ghost-button, .danger-button { padding: 6px 9px; border: 1px solid #e4dce2; border-radius: 8px; background: #fff; color: #5d4d59; font-size: 10px; font-weight: 700; cursor: pointer; }
.danger-button { color: #aa3039; background: #fff8f8; border-color: #f0d2d5; }
.notice { margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; font-size: 11px; }
.notice.success { background: #e9f8f2; color: #147851; }
.notice.error { background: #fff0ee; color: #a42820; }
.danger-zone { margin-top: 13px; padding-top: 13px; border-top: 1px solid #ece6eb; }
.system-status { margin-top: 16px; padding-top: 13px; border-top: 1px solid #ece6eb; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #81737e; font-size: 10px; }
.system-status strong { color: #4a3c47; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #b94b55; }
.status-dot.ok { background: #2ca471; }

@media (max-width: 980px) {
    .admin-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px) {
    .sonia-entry-page { background-attachment: scroll; }
    .sonia-entry-shell { place-items: start center; padding: 155px 14px 55px; }
    .sonia-welcome-card { padding: 24px 18px 25px; border-radius: 20px; }
    .sonia-welcome-card h1 { font-size: clamp(28px, 8vw, 38px); }
    .entry-row { grid-template-columns: 1fr; }
    .sonia-enter-button { width: 100%; }
    .landscape-hint { align-items: flex-start; }
    .hall-stream-frame { top: 78px; right: 11px; bottom: 57px; left: 11px; border-radius: 10px; }
    .control-label { display: none; }
    .hall-control-button { min-width: 40px; min-height: 40px; padding: 7px; }
    .hall-count { position: absolute; transform: translate(12px,-12px); }
    .reaction-caption { display: none; }
    .hall-reactions { padding: 4px; }
    .hall-reaction-btn { width: 36px; height: 36px; font-size: 20px; }
    .admin-topbar { padding: 13px; align-items: flex-start; gap: 10px; }
    .admin-topbar nav { flex-direction: column; align-items: flex-end; }
}

@media (max-height: 600px) and (orientation: landscape) {
    .hall-stream-frame { top: 72px; right: 36px; bottom: 48px; left: 36px; }
    .hall-top-controls { top: 6px; }
    .hall-reactions { bottom: 5px; }
    .hall-reaction-btn { width: 34px; height: 34px; font-size: 19px; }
}

/* ==================== v4 layout corrections ==================== */
/* Keep the supplied 16:9 creative anchored to the top in the hall.
   `cover` crops the logo on extra-wide mobile screens; width-based sizing does not. */
.sonia-hall-page {
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: 100svh;
    overflow: hidden;
    background: #fff;
}
.sonia-hall {
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: 100svh;
    background-color: #fff;
    background-image: url('sonia-foundation-bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

/* The logo in the supplied artwork ends at about 25% of artwork height.
   The player is placed below that logo and is always exactly 16:9. */
.hall-stream-frame {
    top: clamp(210px, calc(14.05vw + 16px), 315px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(92vw, 118dvh);
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateX(-50%);
    border-radius: clamp(12px, 1.1vw, 18px);
}
.hall-stream {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* Controls stay inside browser + device safe areas. */
.hall-top-controls {
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
}
.hall-reactions {
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 5px 7px;
    gap: 3px;
}
.hall-reaction-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
}
.reaction-caption { display: none !important; }

/* New manual-rotation animation. No browser promise to force orientation. */
.rotate-gate {
    position: fixed;
    inset: 0;
    min-height: var(--app-height, 100dvh);
    padding:
        max(24px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    background: rgba(255,255,255,.985);
    overflow-y: auto;
}
.rotate-card {
    width: min(430px, 94vw);
    margin: auto;
}
.rotate-animation {
    width: 180px;
    height: 128px;
    margin: 0 auto 8px;
}
.rotate-device-svg { width: 100%; height: 100%; overflow: visible; }
.rotate-phone-body,
.rotate-phone-speaker,
.rotate-phone-home,
.rotate-arrow-path,
.rotate-arrow-head {
    fill: none;
    stroke: var(--teal-dark);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rotate-phone-home { fill: var(--teal-dark); stroke: none; }
.rotate-phone-speaker { stroke-width: 3; }
.rotate-arrow-path { opacity: .35; stroke-width: 3; }
.rotate-arrow-head { fill: var(--teal-dark); stroke-width: 2; opacity: .7; }
.rotate-phone-group {
    transform-box: fill-box;
    transform-origin: center;
    animation: soniaPhoneRotate 2.35s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes soniaPhoneRotate {
    0%, 22% { transform: rotate(0deg); }
    52%, 78% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}
.rotate-landscape-badge {
    width: fit-content;
    margin: 2px auto 14px;
    padding: 7px 11px;
    border: 1px solid rgba(42,176,178,.24);
    border-radius: 999px;
    background: rgba(42,176,178,.08);
    color: var(--teal-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}
.rotate-card p:not(.sonia-kicker) { max-width: 340px; }

/* The homepage no longer contains a landscape instruction. */
.sonia-entry-form { margin-top: 22px; }

/* Compact landscape UI for phones / short browser viewports. */
@media (orientation: landscape) and (max-height: 650px) {
    .sonia-hall {
        background-position: center top;
        background-size: 100% auto;
    }
    .hall-stream-frame {
        top: clamp(104px, calc(14.05vw + 8px), 220px);
        width: min(88vw, 102dvh);
        border-radius: 10px;
    }
    .hall-top-controls {
        top: max(5px, env(safe-area-inset-top));
        left: max(7px, env(safe-area-inset-left));
        right: max(7px, env(safe-area-inset-right));
    }
    .hall-control-button {
        min-width: 38px;
        min-height: 38px;
        padding: 7px 9px;
        gap: 4px;
        font-size: 10px;
    }
    .control-label { display: none; }
    .hall-count {
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 8px;
    }
    .hall-reactions {
        bottom: max(4px, env(safe-area-inset-bottom));
        padding: 2px 5px;
    }
    .hall-reaction-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .app-toast { bottom: 48px; }
}

/* Portrait hall is allowed only after user explicitly skips the rotate guide. */
@media (orientation: portrait) and (max-width: 900px) {
    .sonia-hall {
        background-size: auto 100%;
        background-position: center top;
    }
    .hall-stream-frame {
        top: 108px;
        width: min(94vw, 74dvh);
        max-width: 94vw;
    }
    .hall-top-controls {
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
    }
    .control-label { display: none; }
    .hall-control-button { min-width: 40px; min-height: 40px; padding: 7px; }
    .hall-reactions { bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
    .sonia-entry-shell { padding-top: 145px; }
    .sonia-welcome-card { width: min(94vw, 560px); }
    .landscape-hint { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rotate-phone-group { animation: none; transform: rotate(90deg); }
    .floating-reaction { animation-duration: .01ms; }
}

/* ==================== v5 viewport + fullscreen fix ==================== */
/*
   The hall is a viewport app, not a normal scrolling page. Keeping it fixed
   to the visual viewport prevents the browser/body background from becoming
   visible below the reaction controls when browser chrome or fullscreen size
   changes.
*/
html:has(body.sonia-hall-page),
body.sonia-hall-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #f5eef4;
}

body.sonia-hall-page {
    position: fixed;
    inset: 0;
}

body.sonia-hall-page .sonia-hall {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: var(--app-height, 100dvh);
    min-height: 0;
    max-height: none;
    overflow: hidden;
    isolation: isolate;
    background-color: #f5eef4;
    /* Full creative preserves the logo; the lower crop continues the artwork
       when the viewport is taller than the original 16:9 creative. */
    background-image:
        url('sonia-foundation-bg.jpg'),
        url('sonia-foundation-bottom.jpg'),
        linear-gradient(180deg, #fff 0%, #fff 56%, #f5eef4 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center top, center bottom, center;
    background-size: 100% auto, 100% auto, cover;
}

/* Fullscreen the hall itself. Never leave an uncovered root/body region. */
body.sonia-hall-page .sonia-hall:fullscreen,
body.sonia-hall-page .sonia-hall:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #f5eef4 !important;
}

/* Give the browser's fullscreen canvas a non-white fallback as well. */
body.sonia-hall-page .sonia-hall:fullscreen::backdrop,
body.sonia-hall-page .sonia-hall:-webkit-full-screen::backdrop {
    background: #f5eef4;
}

/* On short/wide screens the original image already exceeds viewport height,
   so one uncropped, top-anchored copy is sufficient and keeps the logo whole. */
@media (orientation: landscape) and (max-height: 650px) {
    body.sonia-hall-page .sonia-hall {
        background-image: url('sonia-foundation-bg.jpg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
        background-color: #f5eef4;
    }
}

/* Portrait mode uses height-based artwork so no blank lower region can occur. */
@media (orientation: portrait) and (max-width: 900px) {
    body.sonia-hall-page .sonia-hall {
        background-image: url('sonia-foundation-bg.jpg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 100%;
        background-color: #f5eef4;
    }
}

/* Explicit root height fallback for browsers without :has(). */
html { height: 100%; }

/* ==================== v6 mobile composition fix ==================== */
/*
   Portrait phones must never size the 16:9 artwork by viewport height.
   Doing that enlarges the centered foundation logo until the card/player
   cuts through it.  Keep a complete, centered top composition instead and
   use the lower artwork as a separate bottom continuation.
*/
@media (orientation: portrait) and (max-width: 900px) {
    body.sonia-entry-page {
        min-height: 100dvh;
        background-color: #fff;
        background-image:
            url('sonia-foundation-bg.jpg'),
            url('sonia-foundation-bottom.jpg'),
            linear-gradient(180deg, #fff 0%, #fff 72%, #f7f0f6 100%);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: center top, center bottom, center;
        background-size: 235% auto, 100% auto, cover;
        background-attachment: scroll;
    }

    body.sonia-entry-page .sonia-entry-shell {
        min-height: 100dvh;
        place-items: start center;
        padding:
            clamp(235px, 50vw, 320px)
            14px
            clamp(105px, 18vh, 190px);
    }

    body.sonia-hall-page .sonia-hall {
        background-color: #fff;
        background-image:
            url('sonia-foundation-bg.jpg'),
            url('sonia-foundation-bottom.jpg'),
            linear-gradient(180deg, #fff 0%, #fff 72%, #f7f0f6 100%);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: center top, center bottom, center;
        background-size: 185% auto, 100% auto, cover;
    }

    /* Create a real left-side utility gutter and keep the player 16:9. */
    body.sonia-hall-page .hall-stream-frame {
        top: clamp(145px, 30vw, 190px);
        left: calc(50% + 24px);
        right: auto;
        bottom: auto;
        width: min(calc(100vw - 74px), 76dvh);
        max-width: calc(100vw - 74px);
        height: auto;
        aspect-ratio: 16 / 9;
        transform: translateX(-50%);
    }

    /* Reactions live in the empty left gutter instead of covering the video. */
    body.sonia-hall-page .hall-reactions {
        left: max(7px, env(safe-area-inset-left));
        right: auto;
        top: clamp(235px, 55vw, 330px);
        bottom: auto;
        transform: translateY(-50%);
        flex-direction: column;
        padding: 5px 3px;
        gap: 1px;
        border-radius: 999px;
    }

    body.sonia-hall-page .hall-reaction-btn {
        width: 38px;
        height: 38px;
        font-size: 21px;
    }
}

/* Mobile landscape: use the unused left side as a vertical reaction rail.
   Player remains centered within the remaining visual area and stays 16:9. */
@media (orientation: landscape) and (max-height: 650px) and (max-width: 1400px) {
    body.sonia-hall-page .hall-stream-frame {
        left: calc(50% + 24px);
        width: min(88vw, 102dvh);
        transform: translateX(-50%);
    }

    body.sonia-hall-page .hall-reactions {
        left: max(8px, env(safe-area-inset-left));
        right: auto;
        top: 54%;
        bottom: auto;
        transform: translateY(-50%);
        flex-direction: column;
        padding: 4px 3px;
        gap: 0;
        border-radius: 999px;
    }

    body.sonia-hall-page .hall-reaction-btn {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }
}

/* Extra-small phones: retain usable gutters without shrinking controls too far. */
@media (orientation: portrait) and (max-width: 420px) {
    body.sonia-entry-page {
        background-size: 250% auto, 115% auto, cover;
    }

    body.sonia-entry-page .sonia-entry-shell {
        padding-top: 225px;
    }

    body.sonia-hall-page .sonia-hall {
        background-size: 195% auto, 115% auto, cover;
    }

    body.sonia-hall-page .hall-stream-frame {
        top: 145px;
        left: calc(50% + 22px);
        width: calc(100vw - 70px);
        max-width: calc(100vw - 70px);
    }

    body.sonia-hall-page .hall-reactions {
        left: max(5px, env(safe-area-inset-left));
        top: 235px;
    }

    body.sonia-hall-page .hall-reaction-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* ==================== v7 comments placement ==================== */
/*
   The top-right slot is reserved for Fullscreen. Comments now live as a
   floating bottom-right control and open as a bottom-right conversation card.
*/
body.sonia-hall-page .hall-comments-toggle {
    position: absolute;
    z-index: 36;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
}

/* The fullscreen control now occupies the old comments position at top-right. */
body.sonia-hall-page .hall-top-right {
    margin-left: auto;
}

/* Floating comments card instead of a full-height right drawer. */
body.sonia-hall-page .hall-comments-panel {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 62px));
    width: min(390px, calc(100vw - 28px));
    height: min(610px, calc(var(--app-height, 100dvh) - 96px));
    max-height: calc(var(--app-height, 100dvh) - 96px);
    padding-top: 0;
    border: 1px solid rgba(70,47,66,.14);
    border-radius: 20px;
    box-shadow: 0 20px 65px rgba(53,31,49,.22);
    transform: translateY(22px) scale(.985);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition:
        transform .24s cubic-bezier(.2,.72,.25,1),
        opacity .2s ease,
        visibility .24s;
}

body.sonia-hall-page .hall-comments-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Keep the dim layer below the floating controls so Comments can always be closed. */
body.sonia-hall-page .comments-backdrop {
    z-index: 34;
}
body.sonia-hall-page .hall-comments-toggle,
body.sonia-hall-page .hall-top-controls {
    z-index: 36;
}
body.sonia-hall-page .hall-comments-panel {
    z-index: 40;
}

/* Mobile: compact bottom-right comment button and a bottom-right sheet/card. */
@media (max-width: 720px) {
    body.sonia-hall-page .hall-comments-toggle {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        min-width: 42px;
        min-height: 42px;
        padding: 7px 9px;
    }

    body.sonia-hall-page .hall-comments-panel {
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px));
        width: auto;
        height: min(66dvh, calc(var(--app-height, 100dvh) - 88px));
        max-height: calc(var(--app-height, 100dvh) - 88px);
        border-radius: 18px;
        transform-origin: bottom right;
    }
}

/* Short landscape phones: leave room for browser chrome and the reaction rail. */
@media (orientation: landscape) and (max-height: 650px) {
    body.sonia-hall-page .hall-comments-toggle {
        right: max(7px, env(safe-area-inset-right));
        bottom: max(6px, env(safe-area-inset-bottom));
    }

    body.sonia-hall-page .hall-comments-panel {
        left: auto;
        right: max(7px, env(safe-area-inset-right));
        bottom: max(54px, calc(env(safe-area-inset-bottom) + 50px));
        width: min(360px, 52vw);
        height: min(78dvh, calc(var(--app-height, 100dvh) - 68px));
        max-height: calc(var(--app-height, 100dvh) - 68px);
        border-radius: 15px;
    }
}

/* ==================== v8 full-page reactions + care artwork ==================== */
/* Reaction animation belongs to the complete hall, not to the 16:9 iframe. */
body.sonia-hall-page .hall-reaction-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 28;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

body.sonia-hall-page .floating-reaction {
    position: absolute;
    bottom: 4%;
    width: auto;
    height: auto;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: soniaFullPageReaction var(--reaction-duration, 4.5s) cubic-bezier(.16,.67,.28,1) forwards;
    filter: drop-shadow(0 9px 11px rgba(37,22,33,.24));
}

body.sonia-hall-page .floating-reaction-care {
    width: clamp(42px, 4.8vw, 68px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 7px 20px rgba(56,34,50,.18);
}

body.sonia-hall-page .floating-reaction-care img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    user-select: none;
    -webkit-user-drag: none;
}

body.sonia-hall-page .care-reaction-btn {
    padding: 3px;
    display: grid;
    place-items: center;
}

body.sonia-hall-page .care-reaction-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes soniaFullPageReaction {
    0% {
        transform: translate3d(0, 24px, 0) scale(calc(var(--scale, 1) * .82));
        opacity: 0;
    }
    8% { opacity: 1; }
    72% { opacity: .98; }
    100% {
        transform: translate3d(var(--drift, 0), -112vh, 0) scale(calc(var(--scale, 1) * 1.14));
        opacity: 0;
    }
}

/* Keep animated reactions below interactive controls and the comment card. */
body.sonia-hall-page .hall-top-controls,
body.sonia-hall-page .hall-comments-toggle,
body.sonia-hall-page .hall-reactions { z-index: 36; }
body.sonia-hall-page .comments-backdrop { z-index: 38; }
body.sonia-hall-page .hall-comments-panel { z-index: 40; }

@media (max-width: 720px) {
    body.sonia-hall-page .care-reaction-btn { padding: 3px; }
    body.sonia-hall-page .floating-reaction-care { width: clamp(38px, 11vw, 54px); }
}

@media (prefers-reduced-motion: reduce) {
    body.sonia-hall-page .floating-reaction {
        animation: none !important;
        opacity: .92;
        transform: scale(var(--scale, 1));
    }
}