/* Colosseum 3D viewer. Everything is scoped to .c3d so it can sit inside any page. */
.c3d {
  --c3d-brand: #93451D;
  --c3d-ink: #262626;
  --c3d-ink-soft: #6b625a;
  --c3d-paper: #FFFCF7;
  --c3d-card: rgba(255, 252, 247, 0.84);
  --c3d-line: rgba(38, 38, 38, 0.12);
  --c3d-serif: Georgia, 'Times New Roman', serif;
  --c3d-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  height: min(86vh, 860px);
  min-height: 520px;
  border-radius: 18px;
  background: var(--c3d-paper);
  color: var(--c3d-ink);
  font-family: var(--c3d-sans);
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
.c3d *, .c3d *::before, .c3d *::after { box-sizing: border-box; }
.c3d.c3d--full { position: fixed; inset: 0; height: auto; min-height: 0; border-radius: 0; }
.c3d:fullscreen { height: 100vh; border-radius: 0; }

.c3d .bg { position: absolute; inset: 0; transition: opacity 1.6s ease; pointer-events: none; }
.c3d .bg-paper { background: radial-gradient(120% 90% at 50% 40%, #fdfaf4 0%, #f1ebe0 70%, #e7dfd1 100%); }
.c3d .bg-paper::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(147, 69, 29, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 69, 29, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.c3d .bg-sky { opacity: 0; background: linear-gradient(180deg, #8fb4d6 0%, #bcd3e4 38%, #e7e6df 72%, #efe4d2 100%); }
.c3d:not([data-sky="paper"]) .bg-sky { opacity: 1; }
.c3d:not([data-sky="paper"]) .bg-paper { opacity: 0; }
.c3d[data-sky="golden"] .bg-sky { background: linear-gradient(180deg, #92adc8 0%, #c9cfcf 40%, #ecd9b8 76%, #e6c99d 100%); }
.c3d[data-sky="overcast"] .bg-sky { background: linear-gradient(180deg, #a9b2bc 0%, #c8ccd0 45%, #dcdad3 78%, #d8d1c3 100%); }
.c3d[data-sky="dusk"] .bg-sky { background: linear-gradient(180deg, #5f6d8f 0%, #9a96a6 38%, #d9a988 74%, #e2b48a 100%); }
.c3d[data-sky="day"] .bg-sky { background: linear-gradient(180deg, #a7bfd3 0%, #cad8e2 40%, #e9e7e1 75%, #ece4d6 100%); }
.c3d .bg-night { opacity: 0; background: radial-gradient(120% 80% at 50% 85%, #2b2f45 0%, #151a2c 45%, #0a0d18 100%); }
.c3d.night .bg-night { opacity: 1; }
.c3d.night .brand, .c3d.night .hint { color: #efe6d8; }
.c3d.night .kicker, .c3d.night .sub { color: #b9b0a4; }
.c3d.night .brand h1 em, .c3d.night .brand .c3d-title em, .c3d.night .num, .c3d.night .cdate { color: #e6a36f; }
.c3d.night .caption { background: rgba(20, 22, 34, .62); color: #efe6d8; }
.c3d.night .ctext { color: #ddd3c5; }

.c3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.c3d canvas:active { cursor: grabbing; }

.c3d .brand { position: absolute; top: 22px; left: 24px; pointer-events: none; max-width: calc(100% - 200px); }
.c3d .kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c3d-ink-soft); }
.c3d .c3d-title { font-family: var(--c3d-serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 6px 0 0; letter-spacing: -.01em; }
.c3d .c3d-title em { color: var(--c3d-brand); }
.c3d .sub { margin-top: 6px; font-size: 12px; color: var(--c3d-ink-soft); }

.c3d .tools { position: absolute; top: 22px; right: 22px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--c3d-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--c3d-line) inset, 0 6px 20px rgba(60, 40, 20, .08); z-index: 2; }
.c3d .tools button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--c3d-ink); padding: 0; }
.c3d .tools button:hover { background: rgba(147, 69, 29, .08); }
.c3d .tools button.on { background: var(--c3d-ink); color: var(--c3d-paper); }
.c3d .tools button[hidden] { display: none; }
.c3d .tools svg, .c3d .play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.c3d .caption { position: absolute; left: 20px; bottom: 104px; display: flex; gap: 14px; align-items: flex-start; max-width: 400px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--c3d-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--c3d-line) inset, 0 8px 24px rgba(60, 40, 20, .08); pointer-events: none; transition: opacity .45s ease, transform .45s ease; z-index: 1; }
.c3d .caption.out { opacity: 0; transform: translateY(6px); }
.c3d .num { font-family: var(--c3d-serif); font-style: italic; font-size: 42px; line-height: .9; color: var(--c3d-brand); }
.c3d .ctitle { font-family: var(--c3d-serif); font-size: 18px; }
.c3d .cdate { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3d-brand); margin-top: 3px; }
.c3d .ctext { font-family: var(--c3d-serif); font-size: 14px; line-height: 1.5; color: #3d3833; margin: 8px 0 0; }

.c3d .bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 18px; background: var(--c3d-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--c3d-line) inset, 0 10px 30px rgba(60, 40, 20, .12); width: min(1040px, calc(100% - 32px)); z-index: 2; }
.c3d .play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c3d-ink); color: var(--c3d-paper); display: grid; place-items: center; cursor: pointer; padding: 0; }
.c3d .play .i-play { display: none; }
.c3d .play.paused .i-play { display: block; fill: currentColor; stroke: none; }
.c3d .play.paused .i-pause { display: none; }
.c3d .steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 2px; flex: 1; margin: 0; padding: 0; }
.c3d .steps li { margin: 0; padding: 0; }
.c3d .steps li::before { content: none; }
.c3d .steps button { width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px 9px; border-radius: 10px; cursor: pointer; color: var(--c3d-ink-soft); font: inherit; position: relative; }
.c3d .steps button:hover { background: rgba(147, 69, 29, .06); }
/* Chapter numbers only on phones, where they replace the labels. */
.c3d .steps .n { display: none; font-size: 10px; letter-spacing: .12em; }
.c3d .steps .l { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3d .steps .p { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c3d-line); overflow: hidden; }
.c3d .steps .p i { display: block; height: 100%; width: 0; background: var(--c3d-brand); }
.c3d .steps button.done .p i { width: 100%; }
/* The current chapter is a brand-coloured pill; its progress bar turns white so autoplay stays readable. */
.c3d .steps button.active { color: #fff; background: var(--c3d-brand); }
.c3d .steps button.active:hover { background: #7c3917; }
.c3d .steps button.active .l { font-weight: 600; }
.c3d .steps button.active .p { background: rgba(255, 255, 255, .35); }
.c3d .steps button.active .p i { background: #fff; }
.c3d .steps button:focus { outline: none; }
.c3d .steps button:focus-visible { outline: 2px solid var(--c3d-brand); outline-offset: 2px; }

.c3d .hint { position: absolute; right: 24px; bottom: 104px; font-size: 11px; color: var(--c3d-ink-soft); pointer-events: none; transition: opacity 1s; }
.c3d .hint.gone { opacity: 0; }
.c3d .loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--c3d-serif); font-style: italic; font-size: 18px; color: var(--c3d-brand); background: var(--c3d-paper); transition: opacity .8s ease; z-index: 5; text-align: center; padding: 24px; }
.c3d .loading.done { opacity: 0; pointer-events: none; }

/* Poster shown until the model is started (always on small screens and data-saver). */
.c3d .c3d-poster { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: #e9e1d2 center / cover no-repeat; }
.c3d .c3d-poster[hidden] { display: none; }
.c3d .c3d-start { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 22px; background: var(--c3d-ink); color: var(--c3d-paper); font: 600 16px var(--c3d-sans); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.c3d .c3d-start small { font-weight: 400; opacity: .75; }

/* Ticket layer, today chapter. */
.c3d .c3d-tickets { position: absolute; top: 76px; right: 22px; width: 290px; padding: 12px; border-radius: 16px; background: var(--c3d-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--c3d-line) inset, 0 8px 24px rgba(60, 40, 20, .1); z-index: 2; user-select: text; -webkit-user-select: text; }
.c3d .c3d-tickets[hidden] { display: none; }
.c3d .c3d-tickets-title { font: 600 13px var(--c3d-sans); margin-bottom: 8px; }
.c3d .c3d-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.c3d .c3d-chips button { width: auto; border: 1px solid var(--c3d-line); background: #fff; border-radius: 999px; padding: 6px 10px; font: 12px var(--c3d-sans); color: var(--c3d-ink); cursor: pointer; }
.c3d .c3d-chips button.on { background: var(--c3d-brand); border-color: var(--c3d-brand); color: #fff; }
.c3d .c3d-chips .sn, .c3d .c3d-chips .pr { display: none; }
.c3d .c3d-ticket-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c3d-line); font-size: 13px; line-height: 1.45; }
.c3d .c3d-ticket-card[hidden] { display: none; }
.c3d .c3d-ticket-card p { margin: 4px 0 6px; color: #3d3833; }
.c3d .c3d-price { font-weight: 600; margin-bottom: 8px; }
.c3d .c3d-zones { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-weight: 600; color: var(--c3d-ink); }
.c3d .c3d-zones::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 0 3px rgba(255, 181, 71, .3); }
.c3d .c3d-cta { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--c3d-ink); color: var(--c3d-paper); text-decoration: none; font-weight: 600; }

/* Hotspot card. */
.c3d .c3d-card { position: absolute; left: 20px; bottom: 104px; width: min(380px, calc(100% - 40px)); padding: 14px 16px 14px 56px; border-radius: 16px; background: var(--c3d-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(60, 40, 20, .14); z-index: 3; user-select: text; -webkit-user-select: text; }
.c3d .c3d-card[hidden] { display: none; }
.c3d .c3d-card-n { position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--c3d-brand); color: #fff; display: grid; place-items: center; font: 700 15px var(--c3d-serif); }
.c3d .c3d-card h3 { font: 400 17px var(--c3d-serif); margin: 2px 24px 6px 0; }
.c3d .c3d-card p { font: 14px/1.5 var(--c3d-serif); margin: 0; color: #3d3833; }
.c3d .c3d-card-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--c3d-ink-soft); }
.c3d.card-open .caption { opacity: 0; }

@media (max-width: 1000px) {
  .c3d .steps .l { font-size: 11.5px; }
  .c3d .steps button { padding: 7px 5px 9px; }
}
@media (max-width: 720px) {
  .c3d { height: min(78vh, 640px); min-height: 460px; border-radius: 14px; }
  .c3d .brand { top: 14px; left: 14px; max-width: calc(100% - 150px); }
  .c3d .c3d-title { font-size: 22px; }
  .c3d .tools { top: 12px; right: 10px; }
  .c3d .tools button { width: 30px; height: 30px; }
  .c3d .caption { left: 10px; right: 10px; bottom: 82px; max-width: none; }
  .c3d .num { font-size: 32px; }
  .c3d .ctext { font-size: 13px; }
  .c3d .bar { bottom: 10px; padding: 6px; gap: 6px; }
  .c3d .play { width: 38px; height: 38px; }
  .c3d .steps .l { display: none; }
  .c3d .steps .n { display: block; font-size: 12px; text-align: center; }
  .c3d .hint { display: none; }
  /* Phones: one scrolling row of chips and one line of result, so the model stays in view. */
  .c3d .c3d-tickets { top: auto; bottom: 82px; left: 10px; right: 10px; width: auto; padding: 8px 0; }
  .c3d .c3d-tickets-title { margin: 0 12px 6px; font-size: 12px; }
  .c3d .c3d-chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .c3d .c3d-chips::-webkit-scrollbar { display: none; }
  .c3d .c3d-chips button { flex: none; white-space: nowrap; padding: 7px 11px; font-size: 13px; }
  .c3d .c3d-chips .n { display: none; }
  .c3d .c3d-chips .sn { display: inline; }
  .c3d .c3d-chips .pr { display: inline; margin-left: 6px; font-weight: 600; }
  .c3d .c3d-ticket-card { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding-top: 8px; }
  .c3d .c3d-ticket-card[hidden] { display: none; }
  .c3d .c3d-ticket-card > strong, .c3d .c3d-ticket-card > p, .c3d .c3d-ticket-card .c3d-price { display: none; }
  .c3d .c3d-zones { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; }
  .c3d .c3d-cta { flex: none; padding: 9px 14px; font-size: 13px; }
  .c3d.tickets-open .caption { display: none; }
  .c3d .c3d-card { left: 10px; bottom: 82px; }
}