:root {
    color-scheme: dark;
    --hc-cream: #f7f0dc;
    --hc-muted: #c0c7c1;
    --hc-gold: #edc987;
    --hc-shadow: 0 22px 70px rgba(3, 10, 15, .42);
    --hc-panel: rgba(15, 28, 34, .76);
    --hc-line: rgba(245, 239, 218, .17);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--hc-cream); background: #14242a; font: 500 14px/1.45 "DM Sans", system-ui, sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #fff3bf; outline-offset: 3px; }
.hc-app { position: relative; width: 100vw; height: 100dvh; min-height: 580px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, #799087 0%, #50645b 28%, #263b3c 59%, #15282e 100%); }
.hc-app.hc-parent-blocked { display: grid; place-items: center; overflow: auto; padding: 24px; }
.hc-parent-block-message { width: min(520px, 100%); padding: clamp(24px, 6vw, 44px); border: 1px solid rgba(247,227,180,.3); border-radius: 24px; color: #f7efd8; background: rgba(13,31,34,.88); box-shadow: 0 25px 80px rgba(0,0,0,.35); text-align: center; }
.hc-parent-block-message > span { display: block; margin-bottom: 12px; color: #ffe8b0; font-size: 32px; }
.hc-parent-block-message h1 { margin: 0 0 12px; color: #fff1d0; font-family: Marcellus, Georgia, serif; font-size: clamp(28px, 6vw, 42px); font-weight: 400; }
.hc-parent-block-message > p:not(.hc-kicker) { margin: 0 0 22px; color: rgba(243,239,224,.73); font-size: 13px; line-height: 1.6; }
.hc-online-parent-notice { margin: -5px 0 12px; color: #edcf91; font-size: 8px; line-height: 1.5; }
.hc-world { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hc-vignette { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 18, 23, .56) 0%, transparent 25%, transparent 56%, rgba(7, 17, 21, .28) 73%, rgba(7, 17, 21, .68) 100%), radial-gradient(ellipse at center, transparent 54%, rgba(3, 11, 15, .26) 100%); }
.hc-topbar { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px; gap: 16px; }
.hc-brand { display: inline-flex; align-items: center; justify-self: start; gap: 11px; color: white; text-decoration: none; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.hc-brand-seal { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(247, 227, 180, .66); border-radius: 50%; color: #ffe8b0; background: linear-gradient(145deg, rgba(188, 150, 88, .54), rgba(38, 76, 68, .75)); box-shadow: inset 0 1px 7px rgba(255,255,255,.12), 0 3px 20px rgba(0,0,0,.22); font-size: 19px; }
.hc-brand span:last-child { display: grid; gap: 1px; }
.hc-brand small, .hc-event-heading small, .hc-journey-label, .hc-hud small, .hc-turn-summary small, .hc-stat small { color: rgba(245, 238, 213, .72); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.hc-brand strong { font-family: Marcellus, Georgia, serif; font-size: 19px; font-weight: 400; letter-spacing: .01em; }
.hc-journey-label { display: grid; grid-template-columns: 7px auto; align-items: center; justify-self: center; gap: 2px 8px; text-align: center; color: #fff3d1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hc-journey-label small { grid-column: 2; color: rgba(246, 238, 211, .7); font-size: 8px; letter-spacing: .12em; }
.hc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #eacb8a; box-shadow: 0 0 10px #ffdd9a; }
.hc-top-actions { display: flex; justify-self: end; gap: 8px; }
.hc-icon-button { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(245, 238, 218, .22); border-radius: 50%; color: #fff5d9; background: rgba(14, 28, 34, .48); box-shadow: 0 3px 12px rgba(0,0,0,.12); backdrop-filter: blur(14px); cursor: pointer; transition: background .18s, transform .18s; }
.hc-icon-button[hidden] { display: none !important; }
.hc-icon-button:hover { transform: translateY(-2px); background: rgba(44, 66, 65, .78); }
.hc-icon-button[aria-pressed="false"] { color: #c6c9c0; opacity: .75; }
.hc-hud { position: absolute; z-index: 2; top: 91px; left: max(22px, env(safe-area-inset-left)); display: grid; gap: 12px; width: min(294px, 31vw); padding: 13px 15px 14px; border: 1px solid var(--hc-line); border-radius: 16px; background: linear-gradient(140deg, rgba(17, 31, 35, .78), rgba(16, 34, 36, .46)); box-shadow: 0 10px 35px rgba(4, 12, 15, .18); backdrop-filter: blur(18px); }
.hc-current-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc-player-glow, .hc-turn-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(244, 216, 158, .45); border-radius: 50%; color: #f7d99e; background: radial-gradient(circle at 32% 25%, rgba(242, 218, 166, .4), rgba(170, 125, 60, .2) 40%, rgba(17, 37, 41, .72)); box-shadow: 0 0 20px rgba(233, 194, 118, .11); font-size: 16px; }
.hc-current-player div, .hc-turn-summary div { display: grid; min-width: 0; }
.hc-current-player strong { overflow: hidden; color: #fff8e9; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hc-hud-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 10px; border-top: 1px solid rgba(244,239,218,.1); }
.hc-sanctuary-progress { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 5px 8px; width: 100%; padding: 8px 9px 9px; overflow: hidden; border: 1px solid rgba(236, 207, 143, .3); border-radius: 11px; color: #fff3d4; background: linear-gradient(120deg, rgba(174, 131, 68, .2), rgba(34, 62, 57, .4)); text-align: left; cursor: pointer; }
.hc-sanctuary-progress[hidden] { display: none !important; }
.hc-sanctuary-icon { display: grid; grid-row: span 2; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(239, 207, 143, .37); border-radius: 9px; color: #f0d092; background: rgba(20, 34, 34, .44); font-size: 17px; }
.hc-sanctuary-copy { display: grid; min-width: 0; gap: 1px; }
.hc-sanctuary-copy small { color: rgba(239, 210, 157, .78) !important; font-size: 6px !important; letter-spacing: .14em !important; }
.hc-sanctuary-copy strong { overflow: hidden; color: #fff0c9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hc-sanctuary-copy > span { overflow: hidden; color: rgba(242, 236, 218, .67); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.hc-sanctuary-count { color: #f0d092; font-size: 9px; font-variant-numeric: tabular-nums; }
.hc-sanctuary-progress-bar { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(13, 25, 27, .55); }
.hc-sanctuary-progress-bar > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #88b994, #ead08e); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
.hc-sanctuary-progress:hover { border-color: rgba(246, 218, 158, .58); background: linear-gradient(120deg, rgba(174, 131, 68, .29), rgba(34, 62, 57, .52)); }
.hc-stat { display: grid; gap: 2px; padding-left: 11px; border-left: 1px solid rgba(244,239,218,.12); }
.hc-stat:first-child { padding-left: 0; border: 0; }
.hc-stat strong { color: #fff3d4; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-stat strong i { color: rgba(245, 238, 213, .61); font-size: 10px; font-style: normal; font-weight: 500; }
.hc-crown-stat strong { color: #f1cf84; }
.hc-seal-progress { margin-top: 1px; color: rgba(239, 218, 174, .72) !important; font-size: 7px !important; letter-spacing: .015em !important; white-space: nowrap; }
.hc-event-board { position: absolute; z-index: 2; top: 91px; right: max(22px, env(safe-area-inset-right)); display: flex; flex-direction: column; width: min(278px, 27vw); max-height: min(43vh, 410px); overflow: hidden; border: 1px solid var(--hc-line); border-radius: 16px; background: linear-gradient(150deg, rgba(18, 32, 36, .79), rgba(15, 28, 34, .56)); box-shadow: 0 10px 35px rgba(4, 12, 15, .18); backdrop-filter: blur(18px); }
.hc-event-heading { display: grid; grid-template-columns: 26px 1fr 7px; align-items: center; gap: 9px; padding: 12px 13px 10px; border-bottom: 1px solid rgba(244,239,218,.12); }
.hc-broadcast-mark { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(234, 203, 138, .36); border-radius: 50%; color: #edd394; font-size: 13px; }
.hc-event-heading div { display: grid; }
.hc-event-heading strong { color: #fff7e5; font-size: 11px; font-weight: 700; }
.hc-event-pulse { width: 6px; height: 6px; border-radius: 50%; background: #91c19e; box-shadow: 0 0 9px rgba(145,193,158,.7); }
.hc-event-board ol { display: grid; gap: 8px; overflow: auto; margin: 0; padding: 10px 13px 13px; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(233,211,162,.32) transparent; }
.hc-event-board li { position: relative; padding-left: 13px; color: rgba(248, 242, 224, .87); font-size: 10px; line-height: 1.44; animation: hc-event-in .3s ease both; }
.hc-event-board li::before { position: absolute; top: .47em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--event-color, #dfc080); content: ""; }
.hc-event-board li time { display: block; margin-top: 2px; color: rgba(239, 227, 193, .5); font-size: 8px; letter-spacing: .05em; }
@keyframes hc-event-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.hc-camera-caption { position: absolute; z-index: 2; left: 50%; bottom: 112px; display: flex; align-items: center; gap: 10px; max-width: min(70vw, 520px); color: rgba(255, 247, 226, .84); font-family: Marcellus, Georgia, serif; font-size: 15px; text-align: center; text-shadow: 0 3px 16px #071214; transform: translateX(-50%); pointer-events: none; }
.hc-caption-rule { width: 30px; height: 1px; flex: 0 0 auto; background: linear-gradient(90deg, transparent, rgba(237,201,135,.8)); }
.hc-caption-rule::after { display: block; width: 30px; height: 1px; background: linear-gradient(90deg, rgba(237,201,135,.8), transparent); content: ""; transform: translateX(calc(min(70vw, 520px) - 30px)); }
.hc-controls { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 18px; padding: 12px 15px 12px 18px; border: 1px solid rgba(246, 237, 212, .18); border-radius: 19px; background: linear-gradient(115deg, rgba(15, 28, 33, .83), rgba(18, 36, 40, .69)); box-shadow: var(--hc-shadow); backdrop-filter: blur(18px); }
.hc-turn-summary { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hc-turn-avatar { width: 40px; height: 40px; color: #f6dfa9; }
.hc-turn-summary strong { overflow: hidden; color: #fff5dd; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hc-control-actions { display: flex; align-items: center; gap: 9px; }
.hc-primary-button, .hc-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 17px; border: 1px solid rgba(255, 242, 209, .55); border-radius: 999px; color: #2d342b; background: linear-gradient(110deg, #f1d79e, #dfbb78); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 6px 17px rgba(0,0,0,.18); font-size: 12px; font-weight: 800; cursor: pointer; transition: filter .16s, transform .16s, box-shadow .16s; }
.hc-primary-button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 10px 24px rgba(0,0,0,.24); }
.hc-primary-button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .62; }
.hc-die-icon { font-size: 18px; line-height: 1; }
.hc-button-arrow { margin-left: 5px; font-size: 17px; font-weight: 500; }
.hc-secondary-button { min-height: 40px; padding: 0 15px; border-color: rgba(246,239,220,.2); color: #f5efdf; background: rgba(255,255,255,.06); box-shadow: none; }
.hc-setup-layer, .hc-card-layer { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; overflow: auto; padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); background: linear-gradient(115deg, rgba(7, 17, 22, .58), rgba(12, 24, 28, .36)); backdrop-filter: blur(7px); }
.hc-card-layer.hc-safety-review-open { z-index: 20; }
.hc-setup-layer[hidden], .hc-card-layer[hidden] { display: none; }
.hc-setup-card { display: grid; grid-template-columns: minmax(190px, .73fr) minmax(420px, 1.18fr); width: min(820px, 100%); min-height: min(650px, calc(100dvh - 44px)); overflow: hidden; border: 1px solid rgba(255,246,219,.29); border-radius: 25px; background: #183039; box-shadow: 0 32px 100px rgba(0,0,0,.46); animation: hc-rise .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hc-rise { from { opacity: 0; transform: translateY(13px) scale(.99); } to { opacity: 1; transform: none; } }
.hc-setup-art { position: relative; min-height: 100%; overflow: hidden; background: linear-gradient(180deg, #a9ad99 0%, #9d9576 31%, #626a52 53%, #34473e 79%, #183039 100%); }
.hc-setup-art::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,246,219,.65) .8px, transparent 1.5px); background-size: 58px 58px; content: ""; opacity: .24; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.hc-setup-sun { position: absolute; top: 17%; left: 50%; width: 105px; height: 105px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fff3cf, #edcc8f 37%, rgba(233,196,125,.46) 66%, transparent 70%); box-shadow: 0 0 65px rgba(241,207,141,.44); transform: translateX(-50%); }
.hc-setup-hills { position: absolute; right: -14%; bottom: 16%; left: -20%; height: 42%; border-radius: 50% 50% 0 0; background: linear-gradient(145deg, #707654, #384d42 68%); transform: rotate(-9deg); box-shadow: 0 -28px 50px rgba(53,67,48,.16); }
.hc-setup-hills::after { position: absolute; right: -8%; bottom: -1%; left: 12%; height: 87%; border-radius: 50% 50% 0 0; background: linear-gradient(125deg, #b29a69, #4e684c 62%); content: ""; transform: rotate(12deg); }
.hc-setup-road { position: absolute; z-index: 1; right: -30%; bottom: -28%; left: -13%; height: 60%; border: 18px solid rgba(220, 190, 133, .76); border-bottom: 0; border-radius: 50% 50% 0 0; filter: drop-shadow(0 -2px 8px rgba(255,239,192,.27)); transform: rotate(14deg); }
.hc-setup-road::after { position: absolute; top: 4px; left: 9%; width: 100%; height: 100%; border: 1px dashed rgba(97,76,50,.5); border-bottom: 0; border-radius: 50% 50% 0 0; content: ""; }
.hc-setup-star { position: absolute; z-index: 2; top: 48%; left: 49%; color: #fff3ca; font-size: 26px; text-shadow: 0 0 20px #ffe5a2; }
.hc-setup-content { align-self: center; padding: clamp(25px, 4vw, 39px) clamp(22px, 4vw, 39px); }
.hc-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #e2c88f; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.hc-kicker span { width: 5px; height: 5px; border-radius: 50%; background: #efce8c; box-shadow: 0 0 9px #efce8c; }
.hc-setup-content h1 { margin: 0; max-width: 490px; color: #fff7e7; font: 400 clamp(31px, 4vw, 43px)/1.05 Marcellus, Georgia, serif; letter-spacing: -.015em; }
.hc-setup-content h1 em { color: #e4c68a; font-style: normal; }
.hc-setup-lede { max-width: 480px; margin: 13px 0 20px; color: rgba(243,239,224,.73); font-size: 11px; line-height: 1.7; }
.hc-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-setup-field { display: grid; gap: 5px; min-width: 0; }
.hc-setup-field label, .hc-avatar-select > span { color: rgba(249,244,229,.78); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.hc-field-hint { color: rgba(238,232,212,.58); font-size: 8px; line-height: 1.4; }
.hc-trail-summary { min-height: 34px; padding: 8px 10px; border: 1px solid rgba(235,209,155,.13); border-radius: 9px; color: rgba(246,236,210,.76); background: rgba(238,209,148,.055); font-size: 8px; line-height: 1.5; }
.hc-setup-field input, .hc-setup-field select, .hc-card-dialog select, .hc-card-dialog input[type="text"] { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(240,233,212,.16); border-radius: 9px; color: #fff5db; background: rgba(255,255,255,.065); font-size: 10px; }
.hc-setup-field select option, .hc-card-dialog select option { color: #243439; background: #f6f0dd; }
.hc-wide { grid-column: 1 / -1; }
#moreNames { display: grid; grid-template-columns: 1fr; gap: 8px; }
#moreNames:empty { display: none; }
.hc-setup-player-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hc-avatar-select { display: grid; gap: 7px; margin-top: 13px; }
#avatarOptions { display: flex; gap: 8px; }
.hc-avatar-choice { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(244,239,219,.2); border-radius: 50%; color: var(--avatar, #e2c88f); background: color-mix(in srgb, var(--avatar, #e2c88f) 18%, #20383a); font-size: 14px; cursor: pointer; }
.hc-avatar-choice[aria-pressed="true"] { border-color: #f0d595; box-shadow: 0 0 0 2px rgba(240,213,149,.18), 0 0 15px color-mix(in srgb, var(--avatar, #e2c88f) 40%, transparent); }
.hc-setup-note { display: flex; gap: 8px; margin: 15px 0 12px; padding: 8px 10px; border: 1px solid rgba(237,208,147,.12); border-radius: 10px; background: rgba(237,208,147,.055); }
.hc-setup-note span { flex: 0 0 auto; color: #e4c68a; }
.hc-setup-note p { margin: 0; color: rgba(237,235,219,.65); font-size: 8px; line-height: 1.5; }
.hc-begin-button { width: 100%; min-height: 43px; }
.hc-back-link { display: inline-block; margin-top: 12px; color: rgba(238,232,211,.64); font-size: 9px; text-decoration: none; }
.hc-back-link:hover { color: #fff1ca; }
.hc-card-layer { z-index: 10; background: rgba(5, 13, 16, .63); backdrop-filter: blur(8px); }
.hc-card-dialog { position: relative; width: min(470px, 100%); max-height: min(700px, calc(100dvh - 38px)); overflow: auto; padding: 30px; border: 1px solid rgba(247,237,210,.28); border-radius: 22px; color: #f8f2df; background: radial-gradient(ellipse at 90% 0%, rgba(216,185,128,.12), transparent 40%), linear-gradient(145deg, #213b3e, #152b32 74%); box-shadow: 0 32px 90px rgba(0,0,0,.5); animation: hc-rise .25s ease both; }
.hc-modal-close { position: absolute; top: 13px; right: 14px; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(244,239,220,.16); border-radius: 50%; color: #e6ddc5; background: rgba(255,255,255,.06); font-size: 19px; cursor: pointer; }
.hc-card-dialog h2 { margin: 6px 24px 9px 0; color: #fff5df; font: 400 27px/1.13 Marcellus, Georgia, serif; }
.hc-card-dialog p { color: rgba(242,237,218,.75); font-size: 11px; line-height: 1.62; }
.hc-card-eyebrow { display: flex; align-items: center; gap: 7px; color: #dfc187; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.hc-card-emblem { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 0 13px; border: 1px solid color-mix(in srgb, var(--suit-color, #dfc187) 58%, transparent); border-radius: 50%; color: var(--suit-color, #dfc187); background: color-mix(in srgb, var(--suit-color, #dfc187) 12%, #192e33); box-shadow: 0 0 22px color-mix(in srgb, var(--suit-color, #dfc187) 14%, transparent); font-size: 20px; }
.hc-card-reference { display: inline-flex; margin-top: 7px; padding: 5px 8px; border: 1px solid rgba(241,220,170,.15); border-radius: 999px; color: #e5cd94 !important; background: rgba(238,218,172,.06); font-size: 9px !important; font-weight: 700; }
.hc-card-verse { margin: 15px 0 12px; padding: 12px 14px; border-left: 2px solid #d5b77c; color: #fff3d8; background: rgba(238,224,189,.055); font-family: Marcellus, Georgia, serif; font-size: 16px; line-height: 1.6; }
.hc-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.hc-answer-button, .hc-choice-button { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(245,238,218,.15); border-radius: 11px; color: #f9f4e5; background: rgba(255,255,255,.065); font-size: 10px; font-weight: 700; text-align: left; cursor: pointer; transition: border .15s, background .15s, transform .15s; }
.hc-answer-button:hover, .hc-choice-button:hover { border-color: rgba(240,212,153,.6); background: rgba(220,193,135,.12); transform: translateY(-1px); }
.hc-card-actions { display: grid; gap: 8px; margin-top: 16px; }
.hc-card-actions .hc-primary-button { width: 100%; min-height: 43px; }
.hc-quiet-button { min-height: 37px; padding: 7px; border: 0; color: rgba(243,237,219,.61); background: transparent; font-size: 9px; cursor: pointer; }
.hc-quiet-button:hover { color: #fff0cb; }
.hc-mic-note { margin: 10px 0 0 !important; color: rgba(230,226,210,.53) !important; font-size: 8px !important; }
.hc-speech-status { min-height: 20px; margin: 7px 0 0 !important; color: #efd18f !important; font-size: 10px !important; }
.hc-player-targets { display: grid; gap: 8px; margin-top: 12px; }
.hc-player-target { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid rgba(245,238,218,.13); border-radius: 10px; background: rgba(255,255,255,.045); }
.hc-player-target strong { color: #fbf4df; font-size: 10px; }
.hc-player-target small { display: block; color: rgba(240,234,213,.57); font-size: 8px; }
.hc-player-target button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(239,211,151,.31); border-radius: 999px; color: #efd8a5; background: rgba(236,208,150,.08); font-size: 8px; font-weight: 700; cursor: pointer; }
.hc-player-target-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.hc-player-target-actions [data-kick-seat] { border-color: rgba(187, 112, 91, .42); color: #f2c1ad; background: rgba(155, 72, 58, .12); }
.hc-review-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#cardContent .hc-review-options .hc-choice-button { min-height: 40px; padding: 8px 10px; font-size: 10px; line-height: 1.35; }
#cardContent .hc-review-options .hc-choice-button:disabled { cursor: not-allowed; opacity: .58; }
#cardContent .hc-safety-report-button, #cardContent .hc-safety-kick-button { min-height: 39px; padding: 8px 12px; border: 1px solid rgba(156, 86, 59, .46); border-radius: 11px; color: #713f30; background: linear-gradient(180deg, rgba(255,247,229,.76), rgba(230,205,169,.65)); font-size: 10px; font-weight: 800; cursor: pointer; }
#cardContent .hc-safety-report-button:disabled, #cardContent .hc-safety-kick-button:disabled { cursor: not-allowed; opacity: .58; }
#cardContent .hc-host-safety-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#cardContent .hc-report-feedback { padding: 8px 10px; border-left: 3px solid #aa8753; background: rgba(170,135,83,.1); font-size: 10px; }
.hc-sanctuary-detail-progress { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 9px; padding: 10px 12px; border: 1px solid rgba(113, 89, 54, .2); border-radius: 10px; background: rgba(255,255,255,.32); }
.hc-sanctuary-detail-progress strong { white-space: nowrap; }
.hc-sanctuary-detail-progress span { color: #716047; text-align: right; }
.hc-sanctuary-material-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hc-sanctuary-material { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 8px; border: 1px solid rgba(112,88,55,.18); border-radius: 9px; background: rgba(255,255,255,.32); }
.hc-sanctuary-material > span { color: #8b7042; font-size: 15px; }
.hc-sanctuary-material strong, .hc-sanctuary-material b { font-size: 9px; }
.hc-sanctuary-material b { color: #526b50; font-variant-numeric: tabular-nums; }
.hc-sanctuary-complete-note { padding: 9px 10px; border: 1px solid rgba(88,126,81,.28); border-radius: 9px; color: #36513b !important; background: rgba(116,156,105,.13); font-weight: 750; }
.hc-sanctuary-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; }
.hc-sanctuary-tier { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 7px; border: 1px solid rgba(112,88,55,.18); border-radius: 8px; color: #746750; background: rgba(255,255,255,.25); font-size: 8px; font-weight: 750; line-height: 1.25; }
.hc-sanctuary-tier b { display: grid; flex: 0 0 17px; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff4dc; background: #948065; font-size: 8px; }
.hc-sanctuary-tier.is-complete { border-color: rgba(82,123,77,.36); color: #36513b; background: rgba(116,156,105,.13); }
.hc-sanctuary-tier.is-complete b { color: #f6f0df; background: #587d55; }
.hc-sanctuary-visit-scene { position: relative; height: 164px; margin: 4px 0 12px; overflow: hidden; border: 1px solid rgba(124,91,55,.27); border-radius: 14px; background: radial-gradient(ellipse at 50% 79%, rgba(255,231,165,.92), transparent 30%), linear-gradient(180deg, #d6e2d8 0%, #ede1bd 53%, #ba9c6c 100%); box-shadow: inset 0 -24px 35px rgba(79,58,38,.2); }
.hc-sanctuary-arch { position: absolute; left: 20%; right: 20%; top: 9px; bottom: -25px; border: 11px solid #e2d1aa; border-bottom: 0; border-radius: 55% 55% 0 0 / 45% 45% 0 0; background: linear-gradient(180deg, rgba(255,246,211,.48), rgba(124,98,67,.1)); box-shadow: 0 0 0 5px rgba(125,93,57,.13), inset 0 0 28px rgba(255,255,255,.56); }
.hc-sanctuary-window { position: absolute; top: 54px; width: 19px; height: 39px; border: 3px solid #ede0be; border-radius: 50% 50% 4px 4px; background: linear-gradient(180deg, #c4e2d7, #eacb87); box-shadow: 0 0 16px rgba(255,235,171,.8); }
.hc-sanctuary-window-left { left: 29%; }
.hc-sanctuary-window-right { right: 29%; }
.hc-sanctuary-pillar { position: absolute; top: 35px; bottom: 22px; width: 14px; border: 2px solid rgba(117,91,57,.26); border-radius: 7px 7px 2px 2px; background: linear-gradient(90deg, #baa77f, #fff0ce 48%, #b5a077); box-shadow: 0 4px 9px rgba(66,49,31,.17); }
.hc-sanctuary-pillar-left { left: 24%; }
.hc-sanctuary-pillar-right { right: 24%; }
.hc-sanctuary-altar { position: absolute; left: 40%; right: 40%; bottom: 22px; height: 22px; border: 2px solid rgba(106,73,43,.35); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #d8c399, #99764e); box-shadow: 0 8px 14px rgba(58,43,28,.22); }
.hc-sanctuary-lamp { position: absolute; left: 50%; top: 39px; color: #fff2be; font-size: 23px; text-shadow: 0 0 7px #fff, 0 0 20px #ffd36e, 0 0 34px #ffbd56; transform: translateX(-50%); animation: hc-sanctuary-glow 2.2s ease-in-out infinite alternate; }
.hc-sanctuary-scene-caption { position: absolute; right: 10px; bottom: 7px; left: 10px; color: #fff9e8; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-align: center; text-shadow: 0 1px 5px #403629; text-transform: uppercase; }
@keyframes hc-sanctuary-glow { from { opacity: .76; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.hc-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.hc-guide-grid article { position: relative; min-height: 116px; padding: 13px 12px 10px; border: 1px solid rgba(240,235,216,.12); border-radius: 13px; background: rgba(255,255,255,.04); }
.hc-guide-grid article b { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 9px; border-radius: 50%; color: #253439; background: #dfc58d; font-size: 10px; }
.hc-guide-grid article strong { display: block; color: #fbf3dc; font-size: 10px; }
.hc-guide-grid article p { margin: 5px 0 0; font-size: 9px; }
.hc-color-legend { display: flex; flex-wrap: wrap; gap: 7px 13px; padding: 12px 0; border-top: 1px solid rgba(240,235,216,.12); border-bottom: 1px solid rgba(240,235,216,.12); }
.hc-color-legend span { display: inline-flex; align-items: center; gap: 6px; color: rgba(243,237,219,.77); font-size: 8px; }
.hc-color-legend i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 7px currentColor; }
.hc-indigo { color: #a794e7; background: #a794e7; }.hc-amber { color: #e8b964; background: #e8b964; }.hc-blue { color: #79aee8; background: #79aee8; }.hc-olive { color: #a9b978; background: #a9b978; }.hc-red { color: #d7796d; background: #d7796d; }.hc-green { color: #75af8a; background: #75af8a; }
.hc-guide-foot { margin: 12px 0 16px !important; font-size: 8px !important; }
.hc-help-dialog > .hc-primary-button { width: 100%; }
.hc-toast { position: absolute; z-index: 12; bottom: 112px; left: 50%; max-width: min(90vw, 440px); padding: 10px 15px; border: 1px solid rgba(246,235,204,.2); border-radius: 999px; color: #fff3d4; background: rgba(13,27,31,.9); box-shadow: 0 9px 24px rgba(0,0,0,.3); font-size: 10px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; }
.hc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hc-loading { position: absolute; z-index: 20; inset: 0; display: grid; align-content: center; justify-items: center; gap: 9px; color: #f7f0dc; background: radial-gradient(ellipse at 50% 35%, #526c62, #1b3034 71%); transition: opacity .55s ease, visibility .55s; }
.hc-loading.is-gone { visibility: hidden; opacity: 0; pointer-events: none; }
.hc-loading-mark { color: #eed194; font-size: 40px; animation: hc-breathe 1.8s ease-in-out infinite alternate; }
.hc-loading strong { font: 400 23px Marcellus, Georgia, serif; }
.hc-loading span { color: rgba(241,235,215,.68); font-size: 10px; }
@keyframes hc-breathe { to { opacity: .5; transform: scale(.9); } }
.hc-no-webgl .hc-loading { display: none; }
.hc-no-webgl .hc-app::after { position: absolute; z-index: 1; inset: 30% 10%; display: grid; place-items: center; border: 1px solid rgba(246,236,209,.2); border-radius: 25px; color: #faefd3; background: rgba(20,41,43,.8); content: "This device cannot open the 3D journey. Try a newer browser with WebGL enabled."; font-family: Marcellus, Georgia, serif; font-size: 21px; text-align: center; }
body.hc-no-webgl .hc-topbar, body.hc-no-webgl .hc-hud, body.hc-no-webgl .hc-event-board, body.hc-no-webgl .hc-controls, body.hc-no-webgl .hc-camera-caption { display: none; }
@media (max-width: 900px) {
    .hc-event-board { width: 245px; }
    .hc-hud { width: 266px; }
}
@media (max-width: 700px) {
    .hc-app { min-height: 560px; }
    .hc-topbar { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); grid-template-columns: 1fr auto; gap: 8px; }
    .hc-brand-seal { width: 34px; height: 34px; font-size: 16px; }
    .hc-brand small { font-size: 7px; }.hc-brand strong { font-size: 15px; }
    .hc-journey-label { display: none; }
    .hc-top-actions { gap: 5px; }
    .hc-icon-button { width: 33px; height: 33px; font-size: 12px; }
    .hc-hud { top: 60px; left: 12px; width: min(235px, calc(100vw - 24px)); gap: 8px; padding: 9px 11px 10px; border-radius: 13px; }
    .hc-player-glow { width: 30px; height: 30px; }
    .hc-current-player strong { font-size: 11px; }
    .hc-stat strong { font-size: 12px; }
    .hc-event-board { top: auto; right: 12px; bottom: max(158px, calc(148px + env(safe-area-inset-bottom))); width: min(205px, 48vw); max-height: 132px; border-radius: 12px; }
    .hc-event-heading { grid-template-columns: 21px 1fr 6px; gap: 6px; padding: 8px 9px 7px; }
    .hc-broadcast-mark { width: 21px; height: 21px; font-size: 10px; }
    .hc-event-heading small { font-size: 7px; }.hc-event-heading strong { font-size: 9px; }
    .hc-event-board ol { gap: 5px; padding: 7px 9px 9px; }.hc-event-board li { font-size: 8px; }
    .hc-event-board li time { font-size: 7px; }
    .hc-camera-caption { bottom: 93px; max-width: 60vw; font-size: 11px; }
    .hc-caption-rule { width: 17px; }.hc-caption-rule::after { width: 17px; transform: translateX(calc(min(60vw, 520px) - 17px)); }
    .hc-controls { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; min-height: 61px; gap: 8px; padding: 8px 9px 8px 11px; border-radius: 15px; }
    .hc-turn-avatar { width: 33px; height: 33px; }.hc-turn-summary { gap: 8px; }
    .hc-turn-summary small { font-size: 7px; }.hc-turn-summary strong { max-width: 36vw; font-size: 10px; }
    .hc-primary-button { min-height: 40px; gap: 6px; padding: 0 11px; font-size: 10px; }.hc-secondary-button { min-height: 35px; padding: 0 10px; font-size: 9px; }
    .hc-die-icon { font-size: 15px; }.hc-button-arrow { margin-left: 1px; font-size: 14px; }
    .hc-setup-layer { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
    .hc-setup-card { display: block; width: min(440px, 100%); min-height: 0; max-height: calc(100dvh - 20px); overflow: auto; border-radius: 19px; }
    .hc-setup-art { min-height: 92px; height: 92px; }
    .hc-setup-sun { top: -7px; width: 75px; height: 75px; }.hc-setup-hills { bottom: -12%; height: 76%; }.hc-setup-road { bottom: -48%; left: 22%; height: 103%; border-width: 11px; }.hc-setup-star { top: 40%; left: 51%; font-size: 17px; }
    .hc-setup-content { padding: 19px 19px 17px; }.hc-kicker { margin-bottom: 8px; font-size: 7px; }
    .hc-setup-content h1 { max-width: 380px; font-size: clamp(27px, 8vw, 34px); }.hc-setup-lede { margin: 8px 0 12px; font-size: 9px; }
    .hc-setup-grid { gap: 8px; }.hc-setup-field { gap: 3px; }.hc-setup-field input, .hc-setup-field select { min-height: 32px; padding: 6px 8px; font-size: 9px; }
    .hc-field-hint, .hc-trail-summary { font-size: 7px; }
    .hc-setup-field label, .hc-avatar-select > span { font-size: 8px; }.hc-avatar-select { margin-top: 9px; gap: 5px; }.hc-avatar-choice { width: 29px; height: 29px; }
    .hc-setup-note { margin: 10px 0 9px; padding: 7px 8px; }.hc-setup-note p { font-size: 7px; }
    .hc-begin-button { min-height: 39px; }.hc-back-link { margin-top: 9px; }
}
@media (max-width: 390px) {
    .hc-hud { width: 215px; }
    .hc-hud-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-event-board { width: 44vw; }
    .hc-turn-summary strong { max-width: 30vw; }
    .hc-controls { gap: 5px; }.hc-control-actions { gap: 4px; }
    .hc-primary-button { gap: 5px; padding: 0 8px; }
    .hc-stat { padding-left: 7px; }
}

/* Online rooms use a dedicated, scrollable gathering dialog. */
body.hc-online-modal-open { overflow: hidden; }
.hc-online-modal-layer { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.hc-online-modal-layer[hidden] { display: none !important; }
.hc-online-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 13, 16, .78); backdrop-filter: blur(15px); animation: hc-online-fade .18s ease-out both; }
.hc-online-dialog { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(760px, 100%); max-height: min(88dvh, 870px); overflow: hidden; border: 1px solid rgba(240, 213, 158, .38); border-radius: 25px; color: #f8f2df; background: radial-gradient(circle at 90% 0%, rgba(170, 130, 71, .19), transparent 34%), linear-gradient(145deg, #213a3d 0%, #142a31 57%, #112229 100%); box-shadow: 0 34px 110px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.07); animation: hc-online-rise .24s cubic-bezier(.2,.8,.2,1) both; }
.hc-online-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 25px 28px 19px; border-bottom: 1px solid rgba(244, 232, 201, .12); background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 75%); }
.hc-online-dialog-heading { min-width: 0; }
.hc-online-modal-eyebrow { display: block; color: #dfbd7c; font-size: 9px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.hc-online-dialog-heading h2 { margin: 6px 0 5px; color: #fff4d8; font: 400 clamp(24px, 4vw, 34px)/1.12 Marcellus, Georgia, serif; letter-spacing: -.02em; }
.hc-online-dialog-heading p { max-width: 520px; margin: 0; color: rgba(237, 233, 217, .7); font-size: 11px; line-height: 1.55; }
.hc-online-modal-close { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid rgba(239,229,203,.2); border-radius: 12px; color: #f2e9cf; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 700; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.hc-online-modal-close:hover { transform: translateY(-1px); border-color: rgba(241, 207, 139, .5); background: rgba(255,255,255,.1); }
.hc-online-modal-close span:first-child { color: #dfbd7c; font-size: 15px; }
.hc-online-modal-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(231,204,151,.32) transparent; }
.hc-public-rooms { display: grid; gap: 13px; padding: 17px 24px 23px; }
.hc-public-rooms[hidden], .hc-online-lobby[hidden] { display: none !important; }
.hc-room-browser-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 2px 3px; }
.hc-room-browser-toolbar > div { display: grid; gap: 3px; }
.hc-room-browser-toolbar strong { color: #fff1cc; font-size: 12px; }
.hc-room-browser-toolbar small { color: rgba(234,229,210,.58); font-size: 9px; }
.hc-room-refresh { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(234,213,171,.2); border-radius: 10px; color: #f2e3c1; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 700; cursor: pointer; }
.hc-room-refresh:hover:not(:disabled) { border-color: rgba(240,198,119,.55); background: rgba(228,187,110,.12); }
.hc-room-refresh:disabled { opacity: .55; cursor: wait; }
.hc-room-list { display: grid; gap: 11px; }
.hc-room-card { position: relative; display: grid; gap: 13px; padding: 16px 17px 13px; border: 1px solid rgba(237,226,197,.16); border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.027)); box-shadow: 0 10px 25px rgba(0,0,0,.11); transition: transform .17s, border-color .17s, background .17s; }
.hc-room-card:hover { transform: translateY(-2px); border-color: rgba(239,201,127,.4); background: linear-gradient(135deg, rgba(238,202,136,.1), rgba(255,255,255,.035)); }
.hc-room-card.is-match { border-color: rgba(171,205,154,.34); background: linear-gradient(135deg, rgba(143,185,132,.105), rgba(255,255,255,.03)); }
.hc-room-card-topline, .hc-room-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px 12px; }
.hc-room-fit, .hc-room-waiting, .hc-room-open-state, .hc-room-player-count { display: inline-flex; align-items: center; gap: 7px; color: rgba(239,235,219,.68); font-size: 9px; font-weight: 650; }
.hc-room-fit { color: #f0c683; }
.hc-room-fit.is-match { color: #c7dfa9; }
.hc-room-fit i, .hc-room-waiting i, .hc-room-open-state i, .hc-lobby-live-pill i, .hc-lobby-presence i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #a9c98c; box-shadow: 0 0 10px rgba(169,201,140,.5); }
.hc-room-waiting i { background: #d8b66d; box-shadow: none; }
.hc-room-card-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hc-room-card-main h3 { margin: 0; color: #fff1ce; font: 400 20px/1.15 Marcellus, Georgia, serif; }
.hc-room-card-main p { margin: 5px 0 0; color: rgba(238,231,210,.63); font-size: 10px; }
.hc-room-card-main p span { padding-inline: 3px; color: #ddb96c; }
.hc-room-join { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; min-width: 92px; min-height: 39px; padding: 0 13px; border: 1px solid rgba(244,212,145,.48); border-radius: 12px; color: #2e3029; background: linear-gradient(135deg, #f0d798, #d7b46e); box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.55); font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .16s, filter .16s; }
.hc-room-join:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hc-room-join span { font-size: 15px; }
.hc-room-card-details { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-room-detail-chip { padding: 5px 8px; border: 1px solid rgba(240,232,211,.105); border-radius: 8px; color: rgba(239,233,213,.75); background: rgba(9,20,23,.23); font-size: 8px; }
.hc-room-detail-chip.is-primary { border-color: rgba(216,188,126,.21); color: #f3dfaf; }
.hc-room-player-count { color: #f3e8ce; }
.hc-room-player-count > span { color: #d8bb7a; font-size: 14px; }
.hc-room-open-state { color: #bbd4a6; }
.hc-room-empty, .hc-room-loading { display: grid; justify-items: center; gap: 9px; min-height: 235px; align-content: center; padding: 30px 18px; border: 1px dashed rgba(239,225,190,.2); border-radius: 17px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(210,178,112,.09), transparent 62%); }
.hc-room-empty > span { color: #e6c983; font-size: 28px; }
.hc-room-empty strong, .hc-room-loading strong { color: #fff0cb; font: 400 19px Marcellus, Georgia, serif; }
.hc-room-empty p, .hc-room-loading small { max-width: 390px; margin: 0 0 4px; color: rgba(235,231,212,.68); font-size: 10px; line-height: 1.6; }
.hc-room-empty .hc-primary-button, .hc-room-empty .hc-secondary-button { min-height: 39px; margin-top: 5px; font-size: 10px; }
.hc-room-spinner { width: 25px; height: 25px; border: 2px solid rgba(238,219,176,.22); border-top-color: #e5c47e; border-radius: 50%; animation: hc-online-spin .8s linear infinite; }
.hc-online-lobby { display: grid; gap: 17px; padding: 20px 26px 23px; }
.hc-lobby-banner { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hc-lobby-emblem { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(233,197,124,.36); border-radius: 15px; color: #f0d18f; background: radial-gradient(circle, rgba(229,195,126,.23), rgba(213,173,99,.06)); box-shadow: 0 0 24px rgba(223,188,112,.1), inset 0 1px rgba(255,255,255,.13); font-size: 22px; }
.hc-lobby-heading { display: grid; min-width: 0; gap: 4px; }
.hc-lobby-heading strong { color: #fff0cb; font: 400 clamp(17px, 3vw, 22px)/1.15 Marcellus, Georgia, serif; }
.hc-lobby-live-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 10px; border: 1px solid rgba(166,208,142,.21); border-radius: 999px; color: #c7dfb0; background: rgba(114,160,96,.09); font-size: 8px; font-weight: 750; white-space: nowrap; }
.hc-lobby-live-pill.is-away { border-color: rgba(220,176,112,.22); color: #e7c98d; background: rgba(185,133,63,.08); }
.hc-lobby-live-pill.is-away i { background: #daa85c; box-shadow: none; }
.hc-lobby-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.hc-lobby-stats > div { display: grid; gap: 5px; min-height: 64px; align-content: center; padding: 10px 13px; border: 1px solid rgba(237,226,197,.12); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); }
.hc-lobby-stats small { color: rgba(226,213,183,.55); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.hc-lobby-stats strong { color: #fff0cb; font-size: 14px; font-variant-numeric: tabular-nums; }
.hc-lobby-details, .hc-lobby-people, .hc-lobby-activity { display: grid; gap: 9px; }
.hc-online-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hc-online-section-heading > span { color: #f8ebcd; font-size: 11px; font-weight: 750; }
.hc-online-section-heading > small { color: rgba(228,223,203,.49); font-size: 8px; text-align: right; }
.hc-lobby-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-lobby-detail-chip { padding: 6px 9px; border: 1px solid rgba(238,226,194,.13); border-radius: 9px; color: #e8e0c9; background: rgba(255,255,255,.04); font-size: 8px; }
.hc-lobby-detail-chip.is-difficulty { border-color: rgba(234,198,127,.27); color: #f1d697; background: rgba(197,156,82,.09); }
.hc-invite-share { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(229,194,122,.24); border-radius: 15px; background: linear-gradient(135deg, rgba(197,157,86,.12), rgba(255,255,255,.035)); }
.hc-invite-share > div:first-child { display: grid; gap: 4px; }
.hc-invite-share > div:first-child strong { color: #fff0c8; font: 400 16px Marcellus, Georgia, serif; }
.hc-invite-share > div:first-child small { color: rgba(239,230,207,.62); font-size: 9px; }
.hc-invite-link-row { display: flex; gap: 8px; }
.hc-invite-link-row input { min-width: 0; flex: 1; padding: 0 11px; border: 1px solid rgba(242,230,203,.16); border-radius: 10px; color: #f8ebcc; background: rgba(4,15,19,.34); font-size: 10px; }
.hc-invite-link-row .hc-secondary-button { min-height: 38px; padding-inline: 12px; font-size: 9px; }
.hc-invite-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(238,229,205,.66); font-size: 9px; }
.hc-invite-code-row strong { color: #f4d78f; font: 800 15px/1 DM Sans, sans-serif; letter-spacing: .2em; }
.hc-lobby-roster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; max-height: 188px; overflow: auto; margin: 0; padding: 0 3px 1px 0; list-style: none; }
.hc-lobby-roster li { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(238,228,202,.12); border-radius: 12px; color: #f4ecd5; background: rgba(255,255,255,.04); }
.hc-lobby-person-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--person-color) 50%, transparent); border-radius: 11px; color: var(--person-color); background: color-mix(in srgb, var(--person-color) 12%, transparent); font-size: 17px; }
.hc-lobby-person-copy { display: grid; min-width: 0; gap: 3px; }
.hc-lobby-person-copy strong { overflow: hidden; color: #fff0cd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hc-lobby-person-copy small { overflow: hidden; color: rgba(231,225,204,.53); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.hc-lobby-presence { display: inline-flex; align-items: center; gap: 5px; color: rgba(228,222,203,.56); font-size: 7px; white-space: nowrap; }
.hc-lobby-presence i { width: 6px; height: 6px; flex-basis: 6px; }
.hc-lobby-presence.is-away i { background: #d9a55b; box-shadow: none; }
.hc-lobby-presence.is-offline { color: #e0a18e; }
.hc-lobby-presence.is-offline i { background: #d7796d; box-shadow: 0 0 8px rgba(215,121,109,.36); }
.hc-roster-quit-note { margin: 12px 0 0 !important; padding: 8px 10px; border: 1px solid rgba(201,151,111,.22); border-radius: 9px; color: #72583f !important; background: rgba(169,117,76,.08); font-size: 9px !important; }
.hc-lobby-empty { grid-column: 1 / -1; display: block !important; padding: 15px !important; color: rgba(238,229,207,.61) !important; font-size: 9px !important; text-align: center; }
.hc-lobby-activity ol { display: grid; gap: 5px; max-height: 104px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.hc-lobby-activity li { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 5px 8px; border-radius: 8px; color: rgba(238,231,210,.73); background: rgba(255,255,255,.027); font-size: 8px; }
.hc-activity-mark { color: #dcbf7a; }
.hc-lobby-activity time { color: rgba(226,217,192,.43); font-size: 7px; white-space: nowrap; }
.hc-online-privacy { display: flex; gap: 7px; align-items: center; margin: 0; padding-top: 9px; border-top: 1px solid rgba(240,229,202,.1); color: rgba(230,225,205,.5); font-size: 8px; }
.hc-online-privacy span { color: #dabd78; }
.hc-online-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 24px max(15px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(242,229,198,.13); background: rgba(4,14,18,.24); }
.hc-online-dialog-footer[hidden] { display: none !important; }
.hc-lobby-footer-copy { max-width: 340px; color: rgba(233,227,207,.61); font-size: 9px; line-height: 1.5; }
.hc-online-dialog-footer .hc-online-actions { display: flex; flex: 0 0 auto; gap: 9px; align-items: center; }
.hc-online-dialog-footer .hc-primary-button, .hc-online-dialog-footer .hc-quiet-button { min-height: 40px; padding-inline: 15px; font-size: 9px; }
.hc-online-dialog-footer .hc-primary-button { display: inline-flex; align-items: center; gap: 11px; box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.44); }
.hc-online-dialog-footer .hc-primary-button:disabled { filter: grayscale(.4); opacity: .56; cursor: not-allowed; }
.hc-online-dialog-footer .hc-primary-button[hidden] { display: none !important; }
.hc-mode-switch { gap: 8px; padding: 5px; border-color: rgba(231,208,164,.2); border-radius: 15px; background: rgba(5,15,18,.46); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.hc-mode-switch button { position: relative; min-height: 54px; padding: 9px 11px 9px 37px; border-radius: 11px; }
.hc-mode-switch button::before { position: absolute; top: 50%; left: 11px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid rgba(238,216,171,.18); border-radius: 7px; color: #e2c57e; background: rgba(255,255,255,.04); content: '✧'; font-size: 11px; transform: translateY(-50%); }
.hc-mode-switch button[data-game-mode="local"]::before { content: '⌂'; }
.hc-mode-switch button[data-game-mode="online"]::before { content: '◎'; }
.hc-mode-switch button[aria-pressed="true"] { border-color: rgba(235,199,129,.43); background: linear-gradient(135deg, rgba(184,145,79,.23), rgba(55,92,82,.4)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 5px 15px rgba(0,0,0,.12); }
.hc-mode-switch strong { color: #fff1d0; font-size: 10px; }
.hc-mode-switch small { font-size: 8px; }
.hc-online-panel { gap: 11px; padding: 13px; border-color: rgba(219,192,136,.24); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(218,184,112,.09), transparent 38%), linear-gradient(145deg, rgba(14,31,35,.93), rgba(18,38,39,.8)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.hc-online-mode { gap: 7px; padding: 4px; border: 1px solid rgba(239,231,211,.12); border-radius: 12px; background: rgba(4,14,17,.36); }
.hc-online-mode button { min-height: 37px; border-color: transparent; border-radius: 9px; color: rgba(237,230,210,.67); font-size: 9px; transition: background .15s, border-color .15s, color .15s; }
.hc-online-mode button[aria-pressed="true"] { border-color: rgba(235,199,129,.32); color: #fff0c9; background: linear-gradient(135deg, rgba(196,156,87,.2), rgba(255,255,255,.055)); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.hc-online-copy { color: rgba(237,231,213,.74); font-size: 9px; line-height: 1.55; }
.hc-resume-room { display: grid; gap: 8px; padding: 10px 11px; border: 1px solid rgba(231,190,123,.3); border-radius: 11px; background: rgba(186,135,70,.09); }
.hc-resume-room[hidden] { display: none !important; }
.hc-resume-room p { margin: 0; color: #f0dfbd; font-size: 9px; line-height: 1.45; }
.hc-resume-room .hc-secondary-button { justify-content: center; min-height: 36px; border-color: rgba(232,199,144,.34); color: #fff0d0; background: rgba(231,193,125,.1); font-size: 9px; }
.hc-online-launchers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hc-online-launchers .hc-secondary-button { justify-content: center; min-height: 40px; border-color: rgba(230,204,151,.28); border-radius: 11px; color: #f6e8c7; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); font-size: 9px; font-weight: 750; transition: transform .15s, background .15s, border-color .15s; }
.hc-online-launchers .hc-secondary-button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(237,198,125,.54); background: rgba(210,170,96,.13); }
.hc-online-join { padding-top: 9px; border-top: 1px solid rgba(243,231,201,.1); }
.hc-online-join > label { color: rgba(249,244,229,.78); font-size: 9px; }
.hc-online-join input { border-color: rgba(240,218,174,.22); border-radius: 10px; font-size: 10px; letter-spacing: .12em; }
.hc-online-join .hc-secondary-button { min-height: 38px; padding-inline: 13px; border-color: rgba(230,204,151,.28); border-radius: 10px; font-size: 9px; }
.hc-online-privacy { padding-top: 7px; font-size: 8px; }
.hc-online-modal-close:focus-visible, .hc-room-refresh:focus-visible, .hc-room-join:focus-visible, .hc-online-launchers button:focus-visible, .hc-online-mode button:focus-visible { outline: 2px solid #f2d58e; outline-offset: 3px; }
@keyframes hc-online-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-online-rise { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hc-online-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
    .hc-online-modal-layer { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .hc-online-dialog { width: 100%; max-height: 92dvh; border-radius: 20px; }
    .hc-online-dialog-header { gap: 10px; padding: 19px 16px 14px; }
    .hc-online-dialog-heading h2 { font-size: 25px; }
    .hc-online-dialog-heading p { max-width: 270px; font-size: 9px; }
    .hc-online-modal-eyebrow { font-size: 8px; }
    .hc-online-modal-close { min-height: 34px; gap: 5px; padding: 0 9px; font-size: 8px; }
    .hc-public-rooms { gap: 10px; padding: 12px 12px 16px; }
    .hc-room-card { gap: 11px; padding: 12px; border-radius: 14px; }
    .hc-room-card-main { gap: 8px; }
    .hc-room-card-main h3 { font-size: 17px; }
    .hc-room-card-main p { font-size: 9px; }
    .hc-room-join { min-width: 74px; min-height: 36px; gap: 6px; padding-inline: 9px; font-size: 9px; }
    .hc-room-fit, .hc-room-waiting, .hc-room-open-state, .hc-room-player-count { font-size: 8px; }
    .hc-room-detail-chip { padding: 4px 6px; font-size: 7px; }
    .hc-online-lobby { gap: 13px; padding: 14px 13px 17px; }
    .hc-lobby-emblem { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; font-size: 18px; }
    .hc-lobby-live-pill { gap: 5px; padding: 6px 7px; font-size: 7px; }
    .hc-lobby-stats { gap: 6px; }
    .hc-lobby-stats > div { min-height: 56px; padding: 8px; border-radius: 11px; }
    .hc-lobby-stats small { font-size: 7px; }
    .hc-lobby-stats strong { font-size: 12px; }
    .hc-online-section-heading > span { font-size: 10px; }
    .hc-online-section-heading > small { font-size: 7px; }
    .hc-lobby-roster { grid-template-columns: 1fr; max-height: 162px; }
    .hc-lobby-roster li { grid-template-columns: 31px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
    .hc-lobby-person-avatar { width: 29px; height: 29px; }
    .hc-online-dialog-footer { align-items: stretch; gap: 9px; padding: 11px 13px max(11px, env(safe-area-inset-bottom)); }
    .hc-lobby-footer-copy { align-self: center; font-size: 8px; }
    .hc-online-dialog-footer .hc-online-actions { gap: 6px; }
    .hc-online-dialog-footer .hc-primary-button, .hc-online-dialog-footer .hc-quiet-button { min-height: 37px; padding-inline: 10px; font-size: 8px; }
    .hc-mode-switch button { min-height: 48px; padding-left: 33px; }
    .hc-mode-switch button::before { left: 9px; }
    .hc-online-launchers .hc-secondary-button { min-height: 37px; padding-inline: 7px; font-size: 8px; }
}
@media (max-width: 390px) {
    .hc-room-card-topline { align-items: flex-start; flex-direction: column; }
    .hc-room-waiting { position: absolute; top: 13px; right: 12px; }
    .hc-room-fit { padding-right: 79px; }
    .hc-room-card-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
    .hc-lobby-live-pill { max-width: 103px; white-space: normal; }
    .hc-lobby-stats > div { padding-inline: 6px; }
    .hc-lobby-stats strong { font-size: 10px; }
    .hc-online-dialog-footer { flex-direction: column; }
    .hc-online-dialog-footer .hc-online-actions { justify-content: flex-end; }
    .hc-online-launchers { grid-template-columns: 1fr; }
}
@media (max-width: 430px) and (min-width: 391px) {
    .hc-topbar { right: 9px; left: 9px; gap: 4px; }
    .hc-brand { gap: 7px; }
    .hc-brand-seal { width: 29px; height: 29px; }
    .hc-brand small { font-size: 6.5px; }
    .hc-brand strong { font-size: 14px; }
    .hc-top-actions { gap: 2px; }
    .hc-icon-button { width: 29px; height: 29px; font-size: 10px; }
}

/* Turn, pile, and challenge clocks share one accessible progress treatment. */
.hc-turn-clock { display: grid; flex: 0 1 190px; gap: 6px; min-width: 112px; max-width: 190px; }
.hc-turn-clock[hidden] { display: none; }
.hc-turn-clock-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(245,238,213,.66); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.hc-turn-clock-label strong { overflow: hidden; color: #f4dfae; font-size: 8px; font-weight: 700; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.hc-progress-track { position: relative; display: block; width: 100%; height: 7px; overflow: hidden; border: 1px solid rgba(255,246,222,.2); border-radius: 999px; background: rgba(24,36,34,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.hc-progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #83b886 0%, #d5c27d 58%, #d78470 100%); box-shadow: 0 0 10px rgba(229,201,131,.25); transform: scaleX(1); transform-origin: left center; transition: transform .85s linear; }
.hc-deck-timer { height: 5px; margin: 0 0 8px; }
.hc-card-timer { display: grid; gap: 7px; margin-top: 17px; color: #746447; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.hc-card-timer .hc-progress-track { height: 6px; border-color: rgba(92,76,47,.18); background: rgba(104,86,54,.15); }
.hc-card-timer-fill { background: linear-gradient(90deg, #54826a, #b59859 68%, #aa5548); }

/* Cards read as physical parchment pieces held in a dark leather frame. */
#cardDialog { width: min(510px, 100%); padding: 11px; border: 1px solid rgba(246,222,171,.55); border-radius: 25px; background: linear-gradient(145deg, #57472f, #231f1a 75%); box-shadow: 0 32px 90px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.2); }
#cardContent { position: relative; overflow: hidden; padding: 25px 24px 22px; border: 1px solid rgba(116,88,48,.46); border-radius: 17px; color: #463d2f; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.78), transparent 53%), radial-gradient(circle at 14% 75%, rgba(174,137,74,.13), transparent 35%), linear-gradient(135deg, #f4e8c9, #e9d9b1 54%, #f3e8ca); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), inset 0 0 28px rgba(104,77,40,.12), 0 3px 8px rgba(10,14,12,.22); }
#cardContent::before { position: absolute; inset: 8px; border: 1px solid rgba(126,98,57,.22); border-radius: 11px; content: ""; pointer-events: none; }
#cardContent > * { position: relative; }
#cardContent h2 { color: #352f26; text-shadow: 0 1px rgba(255,255,255,.55); }
#cardContent p { color: #625541; }
#cardContent strong { color: #3f372a; }
#cardContent .hc-card-eyebrow { color: #82683f; }
#cardContent .hc-card-reference { border-color: rgba(119,93,54,.25); color: #715a35 !important; background: rgba(119,93,54,.075); }
#cardContent .hc-card-verse { border-left-color: #9a7940; color: #423829; background: rgba(123,94,50,.09); }
#cardContent .hc-choice-button, #cardContent .hc-answer-button { border-color: rgba(112,88,55,.26); color: #393429; background: linear-gradient(180deg, rgba(255,255,255,.67), rgba(218,200,161,.56)); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 2px 5px rgba(76,58,31,.09); }
#cardContent .hc-choice-button:hover, #cardContent .hc-answer-button:hover { border-color: rgba(122,91,44,.62); background: linear-gradient(180deg, #fff5dc, #dfc995); }
#cardContent .hc-player-target { border-color: rgba(112,88,55,.2); background: rgba(255,255,255,.34); }
#cardContent .hc-player-target strong { color: #3c3428; }
#cardContent .hc-player-target small, #cardContent .hc-mic-note { color: #766a53 !important; }
#cardContent .hc-player-target button { min-height: 35px; padding: 7px 10px; border: 1px solid #24464c; color: #fff8e8; background: #315961; box-shadow: 0 2px 5px rgba(36,52,43,.2); font-size: 9px; font-weight: 800; }
#cardContent .hc-player-target button:hover { border-color: #183d42; color: #fff; background: #244a50; }
#cardContent .hc-player-target button:disabled { border-color: #68716a; color: #fff; background: #68716a; opacity: 1; }
#cardContent .hc-speech-status { min-height: 0; padding: 8px 10px; border: 1px solid rgba(70,101,66,.24); border-radius: 8px; color: #354b33 !important; background: rgba(100,139,87,.16); font-size: 10px !important; font-weight: 750; }
#cardContent .hc-card-timer { color: #796748; }
#cardContent .hc-quiet-button { color: #756344; }
#cardContent .hc-card-emblem { box-shadow: inset 0 1px rgba(255,255,255,.7), 0 4px 9px rgba(81,62,32,.13); }

/* Landmark vignettes keep the 3D journey moving while giving each Gospel scene a moment. */
.hc-cinematic-layer { position: absolute; z-index: 18; inset: 0; display: grid; place-items: center; overflow: hidden; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: #121b1b; }
.hc-cinematic-layer[hidden] { display: none; }
.hc-cinematic-stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #768e91 0%, #d0b88e 50%, #4b5948 100%); animation: hc-cinema-in .65s ease both; }
.hc-cinematic-sky, .hc-cinematic-distant, .hc-cinematic-land, .hc-cinematic-water { position: absolute; pointer-events: none; }
.hc-cinematic-sky { inset: 0; background: radial-gradient(circle at 73% 28%, rgba(255,239,193,.8), transparent 8%), linear-gradient(180deg, rgba(22,41,48,.2), transparent 44%); }
.hc-cinematic-sun { position: absolute; top: 17%; right: 19%; width: clamp(70px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 39%, #fff5d7, #f4d99c 46%, rgba(248,211,139,.1) 72%, transparent 74%); filter: drop-shadow(0 0 60px rgba(255,219,151,.44)); animation: hc-cinema-sunrise 4.8s ease both; }
.hc-cinematic-distant { right: -10%; bottom: 22%; left: -10%; height: 48%; border-radius: 50% 48% 0 0; background: linear-gradient(160deg, #738270, #42594c 68%, #303d37); transform: rotate(-4deg); box-shadow: 0 -25px 65px rgba(40,57,48,.24); }
.hc-cinematic-land { right: -16%; bottom: -33%; left: -12%; height: 65%; border-radius: 50% 48% 0 0; background: linear-gradient(155deg, rgba(182,153,105,.88), #6c7655 49%, #283e38); transform: rotate(5deg); }
.hc-cinematic-water { right: -7%; bottom: 0; left: 43%; height: 36%; border-top: 1px solid rgba(239,226,190,.4); background: repeating-linear-gradient(178deg, rgba(208,231,213,.16) 0 1px, transparent 2px 18px), linear-gradient(180deg, #587f7d, #263d43); opacity: .88; transform: perspective(380px) rotateX(16deg); transform-origin: bottom; }
.hc-cinematic-figures { position: absolute; z-index: 2; right: 13%; bottom: 20%; left: 13%; height: 43%; pointer-events: none; }
.hc-cinematic-figure { position: absolute; bottom: 0; width: clamp(35px, 5vw, 69px); height: 64%; border-radius: 38% 38% 8% 8%; background: linear-gradient(90deg, rgba(36,42,36,.78), rgba(71,72,58,.9) 48%, rgba(34,39,35,.92)); clip-path: polygon(34% 0, 65% 0, 74% 18%, 83% 28%, 100% 100%, 0 100%, 18% 31%, 28% 18%); filter: drop-shadow(0 7px 16px rgba(14,19,17,.3)); animation: hc-figure-rise 4.8s ease both; }
.hc-cinematic-figure::before { position: absolute; top: -21%; left: 30%; width: 41%; aspect-ratio: 1; border-radius: 50%; background: #544b3b; box-shadow: 0 -4px 0 4px rgba(49,45,37,.58); content: ""; }
.hc-figure-one { left: 20%; height: 61%; }
.hc-figure-two { right: 19%; height: 72%; transform: scale(1.08); }
.hc-cinematic-prop { position: absolute; right: 39%; bottom: 0; left: 39%; height: 16%; border-radius: 50%; background: linear-gradient(180deg, #7d735a, #353d38); box-shadow: 0 9px 24px rgba(13,19,17,.25); }
.hc-cinematic-symbol { position: absolute; z-index: 2; top: 16%; left: 13%; display: grid; place-items: center; width: clamp(58px, 8vw, 104px); aspect-ratio: 1; border: 1px solid rgba(255,246,220,.65); border-radius: 50%; color: #fff0c6; background: radial-gradient(circle at 35% 24%, rgba(255,255,255,.65), rgba(241,210,151,.22) 28%, rgba(35,49,42,.24) 72%, rgba(17,31,31,.3)); box-shadow: inset 0 0 30px rgba(255,245,218,.18), 0 25px 80px rgba(8,17,16,.25), 0 0 90px rgba(251,225,166,.28); font-size: clamp(26px, 4vw, 48px); text-shadow: 0 4px 25px rgba(55,45,31,.48); animation: hc-cinema-symbol 4.8s cubic-bezier(.18,.7,.22,1) both; }
.hc-cinematic-copy { position: absolute; z-index: 3; right: 18px; bottom: 15%; left: 18px; display: grid; justify-items: center; text-align: center; text-shadow: 0 3px 24px rgba(6,16,17,.72); animation: hc-cinema-copy .7s .2s ease both; }
.hc-cinematic-copy > span { color: #f1d39a; font-size: 9px; font-weight: 800; letter-spacing: .23em; }
.hc-cinematic-copy h2 { max-width: 900px; margin: 9px 0; color: #fff7e3; font: 400 clamp(35px, 7vw, 76px)/1.05 Marcellus, Georgia, serif; }
.hc-cinematic-copy p { max-width: 640px; margin: 0; color: rgba(255,247,227,.87); font: 400 clamp(12px, 1.6vw, 17px)/1.6 Marcellus, Georgia, serif; }
.hc-cinematic-skip { position: absolute; z-index: 4; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 17px; border: 1px solid rgba(255,247,227,.5); border-radius: 999px; color: #fff5df; background: rgba(16,31,32,.5); backdrop-filter: blur(10px); font-size: 10px; font-weight: 800; cursor: pointer; }
.hc-cinematic-grain { position: absolute; z-index: 5; inset: 0; background-image: radial-gradient(rgba(255,244,218,.3) .6px, transparent .8px); background-size: 4px 4px; opacity: .07; mix-blend-mode: soft-light; pointer-events: none; }
.hc-cinematic-stage[data-scene="galilee"] { background: linear-gradient(180deg, #7e9fa4, #d6c093 51%, #415448); }
.hc-cinematic-stage[data-scene="wilderness"] { background: linear-gradient(180deg, #796b61, #e1ad70 48%, #79513a); }
.hc-cinematic-stage[data-scene="wilderness"] .hc-cinematic-distant { background: linear-gradient(160deg, #bd8a5d, #86583b 68%, #4b3d31); }
.hc-cinematic-stage[data-scene="wilderness"] .hc-cinematic-land { background: linear-gradient(160deg, #d4a66f, #9b6844 52%, #574332); }
.hc-cinematic-stage[data-scene="wilderness"] .hc-cinematic-water { display: none; }
.hc-cinematic-stage[data-scene="wilderness"] .hc-figure-two { display: none; }
.hc-cinematic-stage[data-scene="wilderness"] .hc-cinematic-prop { right: 32%; left: 48%; height: 44%; border-radius: 58% 58% 14% 14%; background: linear-gradient(135deg, #b78b60, #72523d 58%, #3e3930); clip-path: polygon(15% 100%, 4% 55%, 24% 17%, 42% 31%, 59% 0, 82% 33%, 100% 100%); }
.hc-cinematic-stage[data-scene="wilderness"] .hc-figure-one { left: 23%; height: 47%; }
.hc-cinematic-stage[data-scene="sychar"] { background: linear-gradient(180deg, #8ca09a, #d6c397 51%, #48574a); }
.hc-cinematic-stage[data-scene="sychar"] .hc-cinematic-symbol { border-radius: 42% 42% 50% 50%; }
.hc-cinematic-stage[data-scene="sychar"] .hc-cinematic-prop { right: 43%; left: 43%; height: 29%; border: 8px solid #8b785a; border-bottom-width: 12px; border-radius: 50% 50% 22% 22%; background: radial-gradient(ellipse, #243b3a 0 34%, #71908a 36% 45%, #927b5c 48% 100%); box-shadow: 0 6px 18px rgba(21,33,29,.4); }
.hc-cinematic-stage[data-scene="sychar"] .hc-figure-one { left: 22%; }
.hc-cinematic-stage[data-scene="sychar"] .hc-figure-two { right: 22%; }
.hc-cinematic-stage[data-scene="jerusalem"] { background: linear-gradient(180deg, #9a7d70, #deba91 51%, #544b41); }
.hc-cinematic-stage[data-scene="jerusalem"] .hc-cinematic-distant { height: 56%; background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(226,207,166,.42) 8.3% 9%, transparent 9.4% 15%), linear-gradient(160deg, #b7a080, #6c6050 69%, #353b36); }
.hc-cinematic-stage[data-scene="jerusalem"] .hc-cinematic-prop { right: 24%; left: 24%; height: 39%; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(90deg, #88765f 0 12%, #4b4940 12.5% 13.2%, #9a876b 14% 24%); box-shadow: inset 0 18px 0 rgba(215,193,156,.65), 0 -12px 0 rgba(70,61,50,.3); }
.hc-cinematic-stage[data-scene="jerusalem"] .hc-cinematic-figure { bottom: 2%; height: 31%; }
.hc-cinematic-stage[data-scene="empty-tomb"] { background: linear-gradient(180deg, #91a9a3, #f0d7a8 53%, #56674e); }
.hc-cinematic-stage[data-scene="empty-tomb"] .hc-cinematic-symbol { color: #fff7de; background: radial-gradient(circle at 50% 50%, rgba(255,249,224,.94), rgba(236,215,170,.39) 43%, rgba(61,76,61,.14) 73%); }
.hc-cinematic-stage[data-scene="empty-tomb"] .hc-cinematic-water { display: none; }
.hc-cinematic-stage[data-scene="empty-tomb"] .hc-cinematic-prop { right: 36%; left: 36%; height: 36%; border: 0; border-radius: 48% 48% 10% 10%; background: radial-gradient(ellipse at 53% 55%, #080c0d 0 24%, transparent 26%), linear-gradient(145deg, #786f5b, #484b42 68%, #252e2b); }
.hc-cinematic-stage[data-scene="empty-tomb"] .hc-cinematic-figure-two { display: none; }
.hc-cinematic-stage[data-scene="empty-tomb"] .hc-cinematic-figure-one { left: 23%; height: 48%; }
@keyframes hc-cinema-in { from { opacity: .25; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes hc-cinema-sunrise { from { opacity: .2; transform: translateY(18px) scale(.83); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hc-cinema-symbol { 0% { opacity: 0; transform: translateY(18px) scale(.78); } 35% { opacity: 1; transform: translateY(0) scale(1.04); } 100% { opacity: .94; transform: translateY(-5px) scale(1); } }
@keyframes hc-cinema-copy { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hc-figure-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: .9; transform: translateY(0); } }

@media (max-width: 700px) {
    .hc-app.has-turn-clock .hc-camera-caption { bottom: 148px; }
    .hc-turn-clock { position: absolute; right: 0; bottom: calc(100% + 7px); left: 0; display: grid; max-width: none; min-width: 0; padding: 7px 10px 8px; border: 1px solid rgba(246,237,212,.17); border-radius: 11px; background: rgba(15,28,33,.8); box-shadow: 0 5px 20px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
    .hc-turn-clock[hidden] { display: none; }
    .hc-turn-clock-label { font-size: 6px; }
    .hc-turn-clock-label strong { font-size: 7px; }
    .hc-progress-track { height: 6px; }
    .hc-deck-timer { height: 4px; }
    #cardDialog { padding: 8px; }
    #cardContent { padding: 20px 17px 18px; }
    .hc-cinematic-copy { bottom: 18%; }
    .hc-cinematic-copy h2 { max-width: 90vw; font-size: clamp(34px, 10vw, 58px); }
    .hc-cinematic-copy p { max-width: 88vw; }
}
@media (max-height: 700px) and (min-width: 701px) {
    .hc-setup-card { min-height: calc(100dvh - 28px); }
    .hc-setup-content { padding-top: 22px; padding-bottom: 22px; }
    .hc-setup-lede { margin: 9px 0 12px; }
    .hc-setup-note { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.hc-hud { width: min(340px, 34vw); }
.hc-hud-stats { grid-template-columns: 1.15fr .7fr 1fr 1.1fr; }
.hc-trait-caption { overflow: hidden; color: rgba(232, 220, 190, .62); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.hc-setup-content { max-height: calc(100dvh - 38px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(231,204,151,.3) transparent; }
.hc-setup-toggle { display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 7px 10px; border: 1px solid rgba(240,233,212,.14); border-radius: 9px; background: rgba(255,255,255,.045); cursor: pointer; }
.hc-setup-toggle input { accent-color: #dfc187; }
.hc-setup-toggle span { display: grid; gap: 2px; }
.hc-setup-toggle strong { color: #fff1d0; font-size: 9px; }
.hc-setup-toggle small { color: rgba(237,235,219,.58); font-size: 8px; }
.hc-selected-trait { margin: 7px 0 0; color: #e4c98f; font-size: 8px; }
.hc-card-stacks { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right)); bottom: 104px; left: max(20px, env(safe-area-inset-left)); padding: 8px 11px 9px; border: 1px solid rgba(246,237,212,.16); border-radius: 14px; background: rgba(13,26,30,.75); box-shadow: 0 12px 32px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.hc-card-stacks[hidden] { display: none; }
.hc-stack-instructions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #fff2d0; font-size: 9px; }
.hc-stack-instructions span { color: #eed194; font-variant-numeric: tabular-nums; }
.hc-stack-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.hc-deck-button { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 36px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--deck-color) 43%, transparent); border-radius: 10px; color: #fff4df; background: color-mix(in srgb, var(--deck-color) 13%, rgba(255,255,255,.04)); font-size: 9px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .14s, background .14s, opacity .14s; }
.hc-deck-button:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb, var(--deck-color) 27%, rgba(255,255,255,.05)); }
.hc-deck-button:disabled { cursor: not-allowed; opacity: .28; }
.hc-deck-button[aria-current="true"] { outline: 1px solid var(--deck-color); box-shadow: 0 0 12px color-mix(in srgb, var(--deck-color) 30%, transparent); }
.hc-deck-icon { color: var(--deck-color); font-size: 14px; }
.hc-deck-count { margin-left: auto; color: rgba(255,245,225,.59); font-size: 8px; font-variant-numeric: tabular-nums; }
.hc-card-timer { display: flex; align-items: center; gap: 8px; margin: 13px 0 0; color: #efd293; font-size: 9px; }
.hc-card-timer-track { height: 4px; flex: 1; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.13); }
.hc-card-timer-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #a9c590, #ebcb81); transform-origin: left; }
.hc-pause-layer { position: absolute; z-index: 16; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,16,19,.68); backdrop-filter: blur(10px); }
.hc-pause-layer[hidden] { display: none; }
.hc-host-wait-layer { position: absolute; z-index: 17; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); background: rgba(7,16,19,.76); backdrop-filter: blur(12px); }
.hc-host-wait-layer[hidden] { display: none; }
.hc-host-wait-countdown { display: grid; gap: 9px; margin: 0 0 18px; color: #e6c985; text-align: left; }
.hc-host-wait-countdown .hc-progress-track { width: 100%; height: 9px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.hc-host-wait-countdown .hc-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b1ca99,#e5c276); transform-origin: left; transition: transform .2s linear; }
.hc-host-wait-countdown strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.hc-host-wait-layer .hc-choice-button { width: 100%; }
.hc-pause-card { width: min(400px,100%); padding: 32px; border: 1px solid rgba(247,237,210,.28); border-radius: 22px; color: #f8f2df; background: linear-gradient(145deg,#213b3e,#152b32 74%); box-shadow: 0 32px 90px rgba(0,0,0,.5); text-align: center; }
.hc-pause-card h2 { margin: 6px 0 9px; color: #fff5df; font: 400 30px/1.13 Marcellus,Georgia,serif; }
.hc-pause-card p:not(.hc-kicker) { margin: 0 0 20px; color: rgba(242,237,218,.75); font-size: 11px; line-height: 1.6; }
.hc-pause-card .hc-primary-button { width: 100%; }
@media (max-width: 900px) {
    .hc-hud { width: min(310px, 38vw); }
    .hc-stack-row { gap: 5px; }
    .hc-deck-button { padding: 5px 6px; font-size: 8px; }
}
@media (max-width: 700px) {
    .hc-hud { width: min(268px, calc(100vw - 24px)); }
    .hc-hud-stats { grid-template-columns: 1.1fr .7fr .9fr 1.1fr; }
    .hc-card-stacks { right: 9px; bottom: 99px; left: 9px; padding: 6px 7px; }
    .hc-stack-row { grid-template-columns: repeat(6, minmax(48px, 1fr)); overflow-x: auto; }
    .hc-deck-button { justify-content: center; min-height: 32px; padding: 5px; }
    .hc-deck-button .hc-deck-label { display: none; }
    .hc-deck-icon { font-size: 15px; }
    .hc-deck-count { margin-left: 2px; }
    .hc-setup-content { max-height: none; overflow: visible; }
}
@media (max-width: 390px) {
    .hc-hud { width: 248px; }
    .hc-hud-stats { gap: 2px; }
    .hc-stat { padding-left: 5px; }
    .hc-stat strong { font-size: 11px; }
    .hc-stack-row { grid-template-columns: repeat(6, minmax(42px,1fr)); }
}

/* Keep the complete journey UI inside compact phone viewports. */
.hc-app { min-height: 0; }
.hc-app:fullscreen { width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; }
.hc-app.is-fullscreen-fallback { position: fixed !important; z-index: 999999; inset: 0; width: 100vw; height: 100dvh; min-height: 0; }
@media (max-width: 700px) {
    .hc-app { min-height: 0; }
    .hc-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "summary actions" "clock clock"; align-items: center; min-height: 0; gap: 5px 8px; padding: 7px 8px; }
    .hc-turn-summary { grid-area: summary; }
    .hc-control-actions { grid-area: actions; gap: 5px; }
    .hc-turn-clock,
    .hc-turn-clock:not([hidden]) { position: static; grid-area: clock; display: grid; width: 100%; max-width: none; min-width: 0; gap: 3px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
    .hc-turn-clock[hidden] { display: none; }
    .hc-turn-clock-label { font-size: 6px; }
    .hc-turn-clock-label strong { font-size: 7px; }
    .hc-turn-clock .hc-progress-track { height: 5px; }
    .hc-camera-caption { right: 12px; bottom: calc(114px + env(safe-area-inset-bottom)); left: auto; width: min(62vw, 280px); max-width: none; justify-content: flex-end; gap: 6px; font-size: 10px; text-align: right; transform: none; }
    .hc-caption-rule { width: 14px; }
    .hc-caption-rule::after { width: 14px; transform: translateX(calc(min(62vw, 280px) - 14px)); }
    .hc-event-board { top: 166px; right: 11px; bottom: auto; width: min(205px, 48vw); max-height: clamp(76px, 14vh, 104px); }
    .hc-event-heading { padding: 6px 8px; }
    .hc-event-board ol { gap: 4px; padding: 5px 8px 7px; }
    .hc-event-board li { font-size: 8px; line-height: 1.35; }
    .hc-event-board li time { margin-top: 1px; }
    .hc-card-stacks { bottom: calc(103px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
    .hc-topbar { right: 9px; left: 9px; gap: 6px; }
    .hc-brand { gap: 7px; }
    .hc-brand-seal { width: 30px; height: 30px; }
    .hc-brand small { font-size: 6px; }
    .hc-brand strong { font-size: 13px; }
    .hc-top-actions { gap: 3px; }
    .hc-icon-button { width: 28px; height: 28px; font-size: 11px; }
    .hc-hud { width: min(230px, calc(100vw - 24px)); }
    .hc-event-board { width: min(166px, 46vw); }
    .hc-controls { right: 8px; left: 8px; gap: 4px 6px; padding: 6px; }
    .hc-turn-avatar { width: 29px; height: 29px; }
    .hc-turn-summary { gap: 6px; }
    .hc-turn-summary strong { max-width: 28vw; font-size: 9px; }
    .hc-primary-button { min-height: 42px; gap: 4px; padding: 0 7px; font-size: 9px; }
    .hc-secondary-button { min-height: 36px; padding: 0 7px; font-size: 8px; }
}
@media (max-width: 340px) {
    .hc-topbar { right: 6px; left: 6px; gap: 3px; }
    .hc-brand { gap: 5px; }
    .hc-brand-seal { width: 24px; height: 24px; font-size: 12px; }
    .hc-brand small { font-size: 5px; letter-spacing: .07em; }
    .hc-brand strong { font-size: 11px; }
    .hc-top-actions { gap: 1px; }
    .hc-icon-button { width: 24px; height: 24px; font-size: 10px; }
    .hc-hud { left: 8px; width: min(204px, calc(100vw - 16px)); padding: 7px 8px; }
    .hc-event-board { right: 8px; width: min(145px, 45vw); }
    .hc-controls { right: 6px; left: 6px; gap: 3px 4px; padding: 5px; }
    .hc-turn-avatar { width: 26px; height: 26px; }
    .hc-turn-summary { gap: 5px; }
    .hc-turn-summary strong { max-width: 27vw; font-size: 8px; }
    .hc-primary-button { min-height: 40px; gap: 3px; padding: 0 6px; font-size: 8px; }
    .hc-secondary-button { min-height: 34px; padding: 0 5px; font-size: 7px; }
}
@media (max-width: 700px) {
    .hc-sanctuary-progress { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 4px 7px; padding: 6px 7px 7px; }
    .hc-sanctuary-icon { width: 25px; height: 25px; }
    .hc-sanctuary-copy strong { font-size: 8px; }
    .hc-sanctuary-copy > span { font-size: 6px; }
    .hc-review-options { grid-template-columns: 1fr; }
    #cardContent .hc-review-options .hc-choice-button { min-height: 36px; }
    #cardContent .hc-player-target-actions { gap: 4px; }
    #cardContent .hc-player-target-actions button { padding-inline: 7px; font-size: 8px; }
    .hc-event-board { top: 215px; }
}
@media (max-height: 560px) and (max-width: 700px) {
    .hc-hud { top: 53px; gap: 4px; padding-block: 5px; }
    .hc-event-board { top: 190px; }
}
@media (max-height: 560px) and (max-width: 700px) {
    .hc-hud { top: 53px; gap: 5px; padding-block: 6px; }
    .hc-event-board { top: 190px; max-height: 72px; }
    .hc-camera-caption { bottom: calc(108px + env(safe-area-inset-bottom)); }
    .hc-controls { bottom: max(5px, env(safe-area-inset-bottom)); }
}

.hc-cinematic-gates { position: absolute; z-index: 2; right: 0; bottom: 12%; left: 0; width: min(78vw, 900px); height: 60%; margin-inline: auto; filter: drop-shadow(0 18px 32px rgba(85, 67, 31, .38)); }
.hc-gate-light { position: absolute; bottom: 0; left: 50%; width: 76%; height: 100%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 93%, rgba(255,255,240,.98), rgba(255,235,178,.7) 24%, rgba(255,225,164,.18) 56%, transparent 73%); filter: blur(9px); transform: translateX(-50%); animation: hc-gate-glow 4.8s ease-in-out infinite alternate; }
.hc-gate-opening { position: absolute; z-index: 1; bottom: 0; left: 50%; width: 43%; height: 88%; border: clamp(10px, 2vw, 24px) solid #f5dc9e; border-bottom: 0; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(255,255,235,.88), rgba(255,239,188,.54) 52%, rgba(255,255,227,.88)); box-shadow: inset 0 0 42px rgba(255,255,242,.86), 0 0 35px rgba(255,238,189,.78); transform: translateX(-50%); }
.hc-gate-arch { position: absolute; z-index: 2; bottom: 69%; left: 23%; width: 54%; height: 31%; border: clamp(10px, 2vw, 24px) solid #ffe8b1; border-bottom: 0; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(255,250,224,.86), rgba(236,205,137,.72)); box-shadow: inset 0 6px 18px rgba(255,255,240,.88), 0 0 18px rgba(255,235,183,.68); }
.hc-gate-tower { position: absolute; z-index: 3; bottom: 0; width: 17%; height: 74%; border: 1px solid rgba(255,247,213,.86); background: repeating-linear-gradient(180deg, rgba(255,248,216,.96) 0 16%, rgba(219,184,112,.85) 16.5% 18%, rgba(255,235,185,.96) 19% 38%); box-shadow: inset -9px 0 15px rgba(142,102,46,.15), inset 9px 0 13px rgba(255,255,239,.9), 0 0 26px rgba(255,233,169,.45); }
.hc-gate-tower-left { left: 9%; border-radius: 7px 7px 0 0; }
.hc-gate-tower-right { right: 9%; border-radius: 7px 7px 0 0; }
.hc-cinematic-clouds { position: absolute; z-index: 3; right: -12%; bottom: -8%; left: -12%; height: 40%; pointer-events: none; }
.hc-cinematic-clouds span { position: absolute; bottom: -24%; width: 74%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse at 50% 17%, rgba(255,255,242,.96), rgba(255,246,222,.84) 44%, rgba(226,211,183,.2) 72%, transparent 75%); filter: blur(3px); box-shadow: 0 -18px 55px rgba(255,252,230,.48); animation: hc-cloud-arrive 5.5s ease-in-out infinite alternate; }
.hc-cinematic-clouds span:nth-child(2) { right: -6%; bottom: -38%; width: 62%; height: 90%; animation-delay: -1.8s; }
.hc-cinematic-clouds span:nth-child(3) { left: 18%; bottom: -48%; width: 68%; height: 98%; animation-delay: -3.1s; }
.hc-cinematic-stage[data-scene="celestial"] { background: radial-gradient(ellipse at 50% 54%, #fff9e7 0%, #f9e8bd 23%, #d8d4c1 55%, #748e91 100%); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-sky { background: radial-gradient(ellipse at 50% 48%, rgba(255,255,248,.98) 0 8%, rgba(255,246,216,.82) 20%, rgba(255,229,177,.4) 41%, transparent 67%), linear-gradient(180deg, rgba(255,251,230,.54), transparent 65%); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-sun { top: 1%; right: 50%; width: clamp(170px, 30vw, 380px); background: radial-gradient(circle, rgba(255,255,250,.98) 0 13%, rgba(255,244,208,.9) 36%, rgba(255,225,159,.36) 65%, transparent 74%); filter: drop-shadow(0 0 68px rgba(255,235,172,.88)); transform: translateX(50%); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-distant { bottom: 10%; height: 52%; background: linear-gradient(180deg, rgba(255,248,224,.68), rgba(202,208,189,.54) 64%, rgba(132,163,150,.22)); box-shadow: 0 -12px 58px rgba(255,248,225,.64); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-land { bottom: -38%; height: 65%; background: radial-gradient(ellipse at 50% 0%, rgba(255,249,223,.96), rgba(232,222,190,.84) 35%, rgba(173,190,171,.8) 76%, #84988a); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-water,
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-figures { display: none; }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-symbol { top: 14%; left: 12%; color: #fffaf0; border-color: rgba(255,249,220,.88); background: radial-gradient(circle, rgba(255,255,246,.94), rgba(239,215,161,.3) 64%, transparent 76%); box-shadow: 0 0 75px rgba(255,241,201,.86); }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy { bottom: 17%; }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy > span { color: #667443; text-shadow: none; }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy h2 { color: #3f4d2c; text-shadow: none; }
.hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy p { color: #4d5839; text-shadow: none; }
.hc-earned-badge { display: flex; align-items: center; gap: 12px; margin: 15px 0; padding: 12px 14px; border: 1px solid rgba(167,128,64,.48); border-radius: 14px; background: linear-gradient(110deg, rgba(246,224,170,.67), rgba(255,250,231,.68)); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 7px 20px rgba(101,74,36,.1); }
.hc-earned-badge > span { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(150,110,45,.54); border-radius: 50%; color: #9b702f; background: radial-gradient(circle at 32% 24%, #fffdf1, #e9c77f 62%, #b28743); box-shadow: 0 3px 12px rgba(122,89,42,.19); font-size: 22px; }
.hc-earned-badge div { display: grid; gap: 2px; }
.hc-earned-badge small { color: #8d6a37; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.hc-earned-badge strong { color: #433722 !important; font: 700 17px/1.2 Marcellus, Georgia, serif; }
.hc-earned-badge p { margin: 2px 0 0 !important; color: #6c5c42 !important; font-size: 9px !important; }
@keyframes hc-gate-glow { to { opacity: .73; transform: translateX(-50%) scale(1.08); } }
@keyframes hc-cloud-arrive { to { transform: translate3d(0, -7px, 0) scale(1.025); } }
@media (max-width: 700px) {
    .hc-cinematic-gates { bottom: 17%; width: min(96vw, 650px); height: 47%; }
    .hc-cinematic-clouds { height: 32%; }
    .hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy { right: 12px; bottom: 20%; left: 12px; }
    .hc-cinematic-stage[data-scene="celestial"] .hc-cinematic-copy h2 { font-size: clamp(30px, 8vw, 50px); }
    .hc-earned-badge { gap: 8px; padding: 10px; }
    .hc-earned-badge > span { flex-basis: 36px; width: 36px; height: 36px; }
    .hc-earned-badge strong { font-size: 15px; }
}

/* Keep narrative captions readable against both bright and dark scene art. */
.hc-cinematic-copy {
    max-width: min(760px, calc(100vw - 36px));
    margin-inline: auto;
    padding: 16px 24px;
    border: 1px solid rgba(91, 106, 58, .48);
    border-radius: 18px;
    background: rgba(230, 231, 205, .55);
    box-shadow: 0 10px 28px rgba(20, 30, 26, .16), inset 0 1px rgba(255, 255, 255, .42);
    color: #3f4d2c;
    text-shadow: none;
    backdrop-filter: blur(3px);
}
.hc-cinematic-copy > span { color: #667443; text-shadow: none; }
.hc-cinematic-copy h2 { color: #3f4d2c; text-shadow: none; }
.hc-cinematic-copy p { color: #4d5839; text-shadow: none; }
@media (max-width: 700px) {
    .hc-cinematic-copy { right: 12px; left: 12px; max-width: none; padding: 13px 15px; border-radius: 14px; }
    .hc-cinematic-copy p { max-width: 88vw; }
}
/* The six pile choices use the same raised, framed card design on desktop and mobile. */
.hc-card-stacks { right: auto; left: 50%; width: min(1000px, calc(100vw - 48px)); transform: translateX(-50%); }
.hc-stack-row { gap: 8px; }
.hc-deck-button { display: flex; min-height: 100px; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 6px; border: 2px solid color-mix(in srgb, var(--deck-color) 78%, #fff2d2); border-radius: 13px 13px 10px 10px; color: #28333a; background: linear-gradient(145deg, color-mix(in srgb, var(--deck-color) 26%, #fff9e9), color-mix(in srgb, var(--deck-color) 13%, #d9d2c0)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 5px 12px rgba(0,0,0,.23); text-align: center; }
.hc-deck-button[aria-current="true"] { outline: 2px solid #fff1be; outline-offset: 1px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.36), 0 0 14px color-mix(in srgb, var(--deck-color) 42%, transparent); }
.hc-deck-button:disabled { opacity: .48; }
.hc-deck-icon { font-size: 22px; line-height: 1; }
.hc-deck-button .hc-deck-label { display: block; max-width: 100%; overflow: hidden; color: #30332c; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.hc-deck-count { margin: 0; color: #625b4c; font-size: 9px; line-height: 1; }

/* Optional board color mix controls. */
.hc-space-mix { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid rgba(235,209,155,.16); border-radius: 10px; background: rgba(238,209,148,.045); }
.hc-space-mix[hidden] { display: none; }
.hc-space-mix > p { margin: 0; color: rgba(246,236,210,.75); font-size: 8px; line-height: 1.45; }
.hc-space-mix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hc-space-share { display: grid; gap: 4px; min-width: 0; padding: 6px 7px; border: 1px solid color-mix(in srgb, var(--suit-color) 28%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--suit-color) 7%, rgba(255,255,255,.02)); }
.hc-space-share > span { display: flex; align-items: center; gap: 5px; min-width: 0; color: #f8f0dc; font-size: 8px; font-weight: 700; }
.hc-space-share i { color: var(--suit-color); font-size: 12px; font-style: normal; }
.hc-space-share output { margin-left: auto; color: #f2d390; font-variant-numeric: tabular-nums; }
.hc-space-share input[type="range"] { width: 100%; height: 13px; min-height: 13px; margin: 0; padding: 0; accent-color: var(--suit-color); cursor: pointer; }

/* Phone layouts keep the game controls clear of the system navigation area. */
@media (max-width: 700px) {
    .hc-event-board { top: 205px; right: 11px; bottom: auto; width: min(205px, 48vw); max-height: clamp(76px, 14vh, 104px); }
    .hc-controls { bottom: max(52px, calc(env(safe-area-inset-bottom) + 18px)); }
    .hc-card-stacks { right: 9px; bottom: calc(150px + max(env(safe-area-inset-bottom), 12px)); left: 9px; width: auto; padding: 7px 8px 8px; transform: none; }
    .hc-camera-caption { bottom: calc(140px + max(env(safe-area-inset-bottom), 12px)); }
    .hc-stack-instructions { margin-bottom: 7px; font-size: 8px; }
    .hc-stack-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; overflow: visible; }
    .hc-deck-button { position: relative; display: flex; min-height: 66px; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 2px; border: 2px solid color-mix(in srgb, var(--deck-color) 78%, #fff2d2); border-radius: 10px 10px 8px 8px; color: #28333a; background: linear-gradient(145deg, color-mix(in srgb, var(--deck-color) 26%, #fff9e9), color-mix(in srgb, var(--deck-color) 13%, #d9d2c0)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 4px 9px rgba(0,0,0,.23); text-align: center; }
    .hc-deck-button[aria-current="true"] { outline: 2px solid #fff1be; outline-offset: 1px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.36), 0 0 12px color-mix(in srgb, var(--deck-color) 42%, transparent); }
    .hc-deck-button:disabled { opacity: .48; }
    .hc-deck-icon { font-size: 18px; line-height: 1; }
    .hc-deck-button .hc-deck-label { display: block; max-width: 100%; overflow: hidden; color: #30332c; font-size: 7px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
    .hc-deck-count { margin: 0; color: #625b4c; font-size: 7px; line-height: 1; }
    .hc-setup-layer { place-items: start center; padding: 8px 10px max(30px, env(safe-area-inset-bottom)); }
    .hc-setup-card { max-height: calc(100dvh - 38px); overflow: auto; overscroll-behavior: contain; }
    .hc-setup-art { height: 58px; min-height: 58px; }
    .hc-setup-sun { top: -25px; width: 66px; height: 66px; }
    .hc-setup-hills { bottom: -29%; height: 80%; }
    .hc-setup-road { bottom: -83%; height: 135%; border-width: 8px; }
    .hc-setup-star { top: 27%; font-size: 14px; }
    .hc-setup-content { padding: 13px 16px 14px; }
    .hc-kicker { margin-bottom: 5px; font-size: 6px; }
    .hc-setup-content h1 { font-size: clamp(24px, 7vw, 30px); line-height: 1.02; }
    .hc-setup-lede { margin: 6px 0 8px; font-size: 8px; line-height: 1.45; }
    .hc-setup-grid { gap: 6px; }
    .hc-setup-field { gap: 2px; }
    .hc-setup-field input, .hc-setup-field select { min-height: 30px; padding: 5px 7px; font-size: 8px; }
    .hc-field-hint, .hc-trail-summary { font-size: 6.5px; }
    .hc-trail-summary { min-height: 0; padding: 6px 7px; line-height: 1.4; }
    .hc-setup-toggle { min-height: 32px; padding: 5px 8px; }
    .hc-setup-toggle strong { font-size: 8px; }
    .hc-setup-toggle small { font-size: 7px; }
    .hc-avatar-select { gap: 4px; margin-top: 7px; }
    .hc-avatar-select > span { font-size: 7px; }
    .hc-avatar-choice { width: 27px; height: 27px; }
    .hc-selected-trait { margin: 4px 0 0; font-size: 7px; }
    .hc-setup-note { margin: 7px 0 5px; padding: 6px 7px; }
    .hc-setup-note p { font-size: 6.5px; line-height: 1.35; }
    .hc-begin-button { position: sticky; z-index: 2; bottom: 0; min-height: 38px; margin-top: 5px; box-shadow: 0 -7px 0 4px #183039, inset 0 1px rgba(255,255,255,.55), 0 6px 17px rgba(0,0,0,.18); }
    .hc-back-link { margin: 7px 0 0; }
    .hc-space-mix { gap: 5px; padding: 6px 7px; }
    .hc-space-mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .hc-space-share { gap: 2px; padding: 4px 5px; }
    .hc-space-share > span { gap: 4px; font-size: 7px; }
    .hc-space-share i { font-size: 10px; }
    .hc-space-share input[type="range"] { height: 18px; min-height: 18px; }
    .hc-card-layer { padding: max(10px, env(safe-area-inset-top)) 10px max(30px, env(safe-area-inset-bottom)); }
    #cardDialog { width: min(510px, 100%); max-height: calc(100dvh - 48px); padding: 7px; border: 3px solid #d7bd87; border-radius: 21px; background: linear-gradient(145deg, #765d38, #32291c 78%); box-shadow: 0 22px 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,248,222,.36); }
    #cardContent { padding: 20px 16px 17px; border: 2px solid rgba(116,88,48,.62); }
    #cardContent .hc-player-target button { min-height: 35px; padding: 7px 10px; border: 1px solid #24464c; color: #fff6e4; background: #315961; font-size: 9px; }
    #cardContent .hc-player-target button:disabled { border-color: #514732; color: #fff2cf; background: #66583b; opacity: 1; }
    #cardContent .hc-player-target small, #cardContent .hc-mic-note { color: #5c503a !important; font-size: 9px !important; }
    #cardContent .hc-speech-status { min-height: 0; padding: 7px 9px; border: 1px solid rgba(70,101,66,.24); border-radius: 8px; color: #354b33 !important; background: rgba(100,139,87,.16); font-size: 10px !important; font-weight: 700; }
}
@media (max-width: 700px) {
    .hc-app:fullscreen .hc-hud, .hc-app.is-fullscreen-fallback .hc-hud { top: max(60px, calc(env(safe-area-inset-top) + 48px)); }
    .hc-app:fullscreen .hc-event-board, .hc-app.is-fullscreen-fallback .hc-event-board { top: max(205px, calc(env(safe-area-inset-top) + 205px)); }
    .hc-app:fullscreen .hc-controls, .hc-app.is-fullscreen-fallback .hc-controls { bottom: max(28px, env(safe-area-inset-bottom)); }
    .hc-app:fullscreen .hc-card-stacks, .hc-app.is-fullscreen-fallback .hc-card-stacks { bottom: calc(126px + max(env(safe-area-inset-bottom), 12px)); }
    .hc-app:fullscreen .hc-camera-caption, .hc-app.is-fullscreen-fallback .hc-camera-caption { bottom: calc(114px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
    .hc-event-board { top: 232px; width: min(166px, 46vw); }
    .hc-app:fullscreen .hc-event-board, .hc-app.is-fullscreen-fallback .hc-event-board { top: max(232px, calc(env(safe-area-inset-top) + 220px)); }
    .hc-controls { right: 8px; left: 8px; }
    .hc-card-stacks { right: 7px; left: 7px; }
    .hc-stack-row { gap: 3px; }
    .hc-deck-button { min-height: 62px; padding-inline: 1px; }
    .hc-setup-layer { padding-right: 7px; padding-left: 7px; }
    .hc-setup-content { padding-right: 13px; padding-left: 13px; }
}
@media (max-height: 620px) and (max-width: 700px) {
    .hc-hud { top: 53px; gap: 5px; padding-block: 6px; }
    .hc-event-board { top: 170px; max-height: 60px; }
    .hc-app:fullscreen .hc-event-board, .hc-app.is-fullscreen-fallback .hc-event-board { top: max(170px, calc(env(safe-area-inset-top) + 150px)); max-height: 60px; }
    .hc-controls { bottom: max(52px, calc(env(safe-area-inset-bottom) + 18px)); }
    .hc-card-stacks { bottom: calc(150px + max(env(safe-area-inset-bottom), 12px)); }
    .hc-setup-layer { padding-top: 5px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .hc-setup-card { max-height: calc(100dvh - 25px); }
    .hc-setup-content { padding-top: 10px; padding-bottom: 10px; }
    .hc-setup-art { height: 42px; min-height: 42px; }
}

/* Online room setup */
.hc-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 12px; padding: 4px; border: 1px solid rgba(245,239,218,.12); border-radius: 13px; background: rgba(8,19,23,.4); }
.hc-mode-switch button { display: grid; gap: 2px; min-height: 48px; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; color: rgba(246,239,221,.7); background: transparent; text-align: left; cursor: pointer; }
.hc-mode-switch button[aria-pressed="true"] { border-color: rgba(237,201,135,.38); color: #fff1cc; background: linear-gradient(135deg, rgba(184,145,79,.21), rgba(55,92,82,.33)); }
.hc-mode-switch strong { font-size: 10px; }
.hc-mode-switch small { color: rgba(237,231,210,.56); font-size: 8px; }
.hc-online-panel { display: grid; gap: 9px; margin: 0 0 12px; padding: 11px; border: 1px solid rgba(220,197,146,.19); border-radius: 13px; background: linear-gradient(145deg, rgba(14,31,35,.9), rgba(18,38,39,.75)); }
.hc-online-panel[hidden], .hc-public-rooms[hidden], .hc-online-lobby[hidden] { display: none; }
.hc-begin-button[hidden], .hc-setup-grid [hidden], #moreNames[hidden], .hc-setup-note[hidden], .hc-online-actions[hidden], .hc-online-join[hidden], .hc-invite-share[hidden] { display: none !important; }
.hc-online-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc-online-mode button { min-height: 34px; padding: 6px; border: 1px solid rgba(239,231,211,.16); border-radius: 9px; color: rgba(245,238,218,.68); background: rgba(255,255,255,.035); font-size: 8px; font-weight: 700; cursor: pointer; }
.hc-online-mode button[aria-pressed="true"] { border-color: rgba(235,199,129,.5); color: #fff0c9; background: rgba(196,156,87,.16); }
.hc-online-copy, .hc-online-privacy { margin: 0; color: rgba(235,232,215,.66); font-size: 8px; line-height: 1.5; }
.hc-online-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hc-online-actions .hc-secondary-button, .hc-online-actions .hc-primary-button { min-height: 36px; font-size: 9px; }
.hc-online-join { display: grid; gap: 5px; }
.hc-online-join > label, .hc-invite-share > label { color: rgba(249,244,229,.78); font-size: 8px; font-weight: 700; }
.hc-online-join > div, .hc-invite-share > div { display: flex; gap: 6px; }
.hc-online-join input, .hc-invite-share input { flex: 1; min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid rgba(240,233,212,.16); border-radius: 9px; color: #fff5db; background: rgba(255,255,255,.065); font-size: 9px; }
.hc-invite-share input { color: #e8d6a9; }
.hc-public-rooms { display: grid; gap: 6px; max-height: 176px; overflow: auto; }
.hc-room-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 9px; padding: 8px; border: 1px solid rgba(240,232,210,.13); border-radius: 9px; background: rgba(255,255,255,.045); }
.hc-room-card strong { color: #fff1ca; font-size: 9px; }
.hc-room-card small { color: rgba(234,230,213,.63); font-size: 7px; }
.hc-room-card button { grid-column: 2; grid-row: 1 / span 2; min-height: 31px; padding-inline: 10px; font-size: 8px; }
.hc-online-lobby { display: grid; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(241,232,209,.12); }
.hc-lobby-heading { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.hc-lobby-heading strong { color: #fff0c7; font: 400 14px Marcellus, Georgia, serif; }
.hc-lobby-heading span, .hc-invite-share small { color: rgba(231,227,210,.58); font-size: 7px; }
.hc-lobby-settings { color: rgba(233,224,201,.62); font-size: 7px; }
.hc-invite-share { display: grid; gap: 5px; }
.hc-lobby-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: 110px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.hc-lobby-roster li { padding: 6px 7px; border: 1px solid rgba(241,232,209,.11); border-radius: 8px; color: #f5ebcf; background: rgba(255,255,255,.04); font-size: 8px; }
.hc-lobby-roster li small { display: block; margin-top: 2px; color: rgba(232,226,209,.54); font-size: 7px; }
.hc-online-privacy { padding-top: 3px; border-top: 1px solid rgba(241,232,209,.1); }
@media (max-width: 700px) {
    .hc-mode-switch { gap: 4px; margin-bottom: 8px; }
    .hc-mode-switch button { min-height: 38px; padding: 5px 7px; }
    .hc-mode-switch strong { font-size: 8px; }
    .hc-mode-switch small { font-size: 6px; }
    .hc-online-panel { gap: 6px; margin-bottom: 8px; padding: 7px; }
    .hc-online-mode button { min-height: 30px; font-size: 7px; }
    .hc-online-copy, .hc-online-privacy { font-size: 6.5px; }
    .hc-online-actions { gap: 5px; }
    .hc-online-actions .hc-secondary-button, .hc-online-actions .hc-primary-button { min-height: 31px; padding-inline: 8px; font-size: 7px; }
    .hc-online-join > label, .hc-invite-share > label { font-size: 7px; }
    .hc-online-join input, .hc-invite-share input { min-height: 31px; padding: 5px 7px; font-size: 7px; }
    .hc-lobby-heading strong { font-size: 11px; }
}

/* Online overlay overrides keep the final room controls above legacy setup rules. */
.hc-online-panel { gap: 11px; padding: 13px; border: 1px solid rgba(219,192,136,.24); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(218,184,112,.09), transparent 38%), linear-gradient(145deg, rgba(14,31,35,.93), rgba(18,38,39,.8)); }
.hc-mode-switch { gap: 8px; padding: 5px; border-color: rgba(231,208,164,.2); border-radius: 15px; background: rgba(5,15,18,.46); }
.hc-mode-switch button { min-height: 54px; padding: 9px 11px 9px 37px; border-radius: 11px; }
.hc-mode-switch strong { color: #fff1d0; font-size: 10px; }
.hc-mode-switch small { color: rgba(237,231,210,.68); font-size: 8px; }
.hc-online-mode { gap: 7px; padding: 4px; border: 1px solid rgba(239,231,211,.12); border-radius: 12px; background: rgba(4,14,17,.36); }
.hc-online-mode button { min-height: 37px; border-color: transparent; border-radius: 9px; color: rgba(237,230,210,.67); font-size: 9px; }
.hc-online-mode button[aria-pressed="true"] { border-color: rgba(235,199,129,.32); color: #fff0c9; background: linear-gradient(135deg, rgba(196,156,87,.2), rgba(255,255,255,.055)); }
.hc-online-copy { color: rgba(237,231,213,.74); font-size: 9px; line-height: 1.55; }
.hc-online-launchers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hc-online-launchers .hc-secondary-button { justify-content: center; min-height: 40px; border-color: rgba(230,204,151,.28); border-radius: 11px; color: #f6e8c7; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); font-size: 9px; font-weight: 750; }
.hc-online-join { gap: 6px; padding-top: 9px; border-top: 1px solid rgba(243,231,201,.1); }
.hc-online-join > label { color: rgba(249,244,229,.78); font-size: 9px; }
.hc-online-join input { min-height: 38px; border-color: rgba(240,218,174,.22); border-radius: 10px; font-size: 10px; letter-spacing: .12em; }
.hc-online-join .hc-secondary-button { min-height: 38px; padding-inline: 13px; border-radius: 10px; font-size: 9px; }
.hc-public-rooms { display: grid; gap: 13px; max-height: none; overflow: visible; padding: 17px 24px 23px; }
.hc-room-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 13px; padding: 16px 17px 13px; border-radius: 17px; }
.hc-room-card button { grid-column: auto; grid-row: auto; min-height: 39px; padding-inline: 13px; font-size: 10px; }
.hc-online-lobby { display: grid; gap: 17px; padding: 20px 26px 23px; border: 0; }
.hc-lobby-heading { display: grid; justify-content: initial; align-items: initial; gap: 4px; }
.hc-lobby-heading strong { color: #fff0cb; font: 400 clamp(17px, 3vw, 22px)/1.15 Marcellus, Georgia, serif; }
.hc-lobby-heading .hc-online-modal-eyebrow { color: #dfbd7c; font-size: 9px; }
.hc-lobby-roster { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; max-height: 188px; padding: 0 3px 1px 0; }
.hc-lobby-roster li { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(238,228,202,.12); border-radius: 12px; font-size: 9px; }
.hc-lobby-roster li small { margin-top: 0; font-size: 7px; }
.hc-invite-share { gap: 10px; padding: 14px; }
.hc-invite-share > div { display: flex; gap: 8px; }
.hc-invite-share > div:first-child { display: grid; gap: 4px; }
.hc-invite-share > div:first-child strong { color: #fff0c8; font: 400 16px Marcellus, Georgia, serif; }
.hc-invite-share > div:first-child small { color: rgba(239,230,207,.62); font-size: 9px; }
.hc-invite-link-row { display: flex; gap: 8px; }
.hc-invite-link-row input { min-height: 38px; padding-inline: 11px; border: 1px solid rgba(242,230,203,.16); border-radius: 10px; color: #f8ebcc; background: rgba(4,15,19,.34); font-size: 10px; letter-spacing: normal; }
.hc-invite-link-row .hc-secondary-button { min-height: 38px; padding-inline: 12px; font-size: 9px; }
.hc-online-privacy { display: flex; gap: 7px; align-items: center; padding-top: 9px; border-top: 1px solid rgba(240,229,202,.1); color: rgba(230,225,205,.5); font-size: 8px; }
.hc-online-dialog-footer .hc-online-actions { display: flex; flex: 0 0 auto; gap: 9px; align-items: center; }
.hc-online-dialog-footer .hc-primary-button, .hc-online-dialog-footer .hc-quiet-button { min-height: 40px; padding-inline: 15px; font-size: 9px; }
.hc-online-dialog-footer .hc-primary-button { display: inline-flex; align-items: center; gap: 11px; }
.hc-online-dialog-footer .hc-primary-button[hidden] { display: none !important; }
.hc-room-list { display: grid; gap: 11px; }
.hc-room-card-topline, .hc-room-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px 12px; }
.hc-room-card-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hc-room-card-main h3 { margin: 0; color: #fff1ce; font: 400 20px/1.15 Marcellus, Georgia, serif; }
.hc-room-card-main p { margin: 5px 0 0; color: rgba(238,231,210,.63); font-size: 10px; }
.hc-room-card-details { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-room-detail-chip { padding: 5px 8px; border: 1px solid rgba(240,232,211,.105); border-radius: 8px; color: rgba(239,233,213,.75); background: rgba(9,20,23,.23); font-size: 8px; }
.hc-room-card-footer { align-items: center; }
@media (max-width: 700px) {
    .hc-mode-switch { gap: 5px; margin-bottom: 9px; }
    .hc-mode-switch button { min-height: 46px; padding: 7px 7px 7px 33px; }
    .hc-mode-switch strong { font-size: 9px; }
    .hc-mode-switch small { font-size: 7px; }
    .hc-online-panel { gap: 8px; margin-bottom: 9px; padding: 9px; }
    .hc-online-mode button { min-height: 34px; font-size: 8px; }
    .hc-online-copy { font-size: 8px; }
    .hc-online-launchers { gap: 6px; }
    .hc-online-launchers .hc-secondary-button { min-height: 36px; padding-inline: 7px; font-size: 8px; }
    .hc-online-join > label { font-size: 8px; }
    .hc-online-join input { min-height: 34px; padding: 5px 7px; font-size: 9px; }
    .hc-online-join .hc-secondary-button { min-height: 34px; padding-inline: 10px; font-size: 8px; }
    .hc-online-dialog { width: 100%; max-height: 92dvh; border-radius: 20px; }
    .hc-online-dialog-header { gap: 10px; padding: 19px 16px 14px; }
    .hc-online-dialog-heading h2 { font-size: 25px; }
    .hc-online-dialog-heading p { max-width: 270px; font-size: 9px; }
    .hc-online-modal-eyebrow { font-size: 8px; }
    .hc-online-modal-close { min-height: 34px; gap: 5px; padding: 0 9px; font-size: 8px; }
    .hc-public-rooms { gap: 10px; padding: 12px 12px 16px; }
    .hc-room-card { gap: 11px; padding: 12px; border-radius: 14px; }
    .hc-room-card-main { gap: 8px; }
    .hc-room-card-main h3 { font-size: 17px; }
    .hc-room-card-main p { font-size: 9px; }
    .hc-room-card button { min-height: 36px; padding-inline: 9px; font-size: 9px; }
    .hc-online-lobby { gap: 13px; padding: 14px 13px 17px; }
    .hc-lobby-roster { grid-template-columns: 1fr; max-height: 162px; }
    .hc-lobby-roster li { grid-template-columns: 31px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
    .hc-online-dialog-footer { align-items: stretch; gap: 9px; padding: 11px 13px max(11px, env(safe-area-inset-bottom)); }
    .hc-online-dialog-footer .hc-online-actions { gap: 6px; }
    .hc-online-dialog-footer .hc-primary-button, .hc-online-dialog-footer .hc-quiet-button { min-height: 37px; padding-inline: 10px; font-size: 8px; }
}
@media (max-width: 390px) {
    .hc-online-launchers { grid-template-columns: 1fr; }
    .hc-room-card-topline { align-items: flex-start; flex-direction: column; }
    .hc-room-card-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
    .hc-online-dialog-footer { flex-direction: column; }
    .hc-online-dialog-footer .hc-online-actions { justify-content: flex-end; }
}

@media (max-width: 700px) and (min-height: 701px) {
    .hc-event-board { top: clamp(258px, 33vh, 288px); }
    .hc-app:fullscreen .hc-event-board,
    .hc-app.is-fullscreen-fallback .hc-event-board { top: max(258px, calc(env(safe-area-inset-top) + 242px)); }
}