/* extras.css — Esgrima Bíblica, Pódio Final, Roteiro do Professor */

/* ---------- Esgrima ---------- */
.ex-esg, .ex-pod { position: relative; height: 100%; overflow: hidden; }
.ex-esg-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 1.2rem 1.5rem 1.6rem; text-align: center; }
.ex-esg-head h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); margin: .2rem 0 .4rem; }
.ex-esg-rules { margin: 0 auto; max-width: 52ch; color: var(--cream-dim); font-size: 1.1rem; }
.ex-esg-card { width: min(56rem, 100%); padding: 1.4rem 1.6rem 1.6rem; display: grid; gap: 1rem; justify-items: center; background: linear-gradient(180deg, rgba(45,25,64,.92), rgba(23,13,34,.92)); border-color: rgba(246,185,59,.4); }
.ex-esg-round { font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--gold); }
.ex-esg-ref { font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 8.5vw, 7.5rem); line-height: 1.05; letter-spacing: .02em; color: var(--cream); min-height: 1.1em; text-wrap: balance; }
.ex-esg-ref.is-hidden { color: rgba(255,244,224,.25); letter-spacing: .3em; }
.ex-esg-ref.is-count { color: var(--gold-2); animation: exCount .65s ease; }
.ex-esg-ref.is-live { background: linear-gradient(180deg, #fff1c4, var(--gold-2) 40%, var(--gold) 75%, #c9831b); -webkit-background-clip: text; background-clip: text; color: transparent; animation: popIn .45s cubic-bezier(.2,1.5,.4,1); }
.ex-esg-ref.is-won { color: var(--tc); }
@keyframes exCount { from { transform: scale(1.8); opacity: 0; } 40% { opacity: 1; } }
.ex-esg-timer { width: min(30rem, 100%); }
.ex-esg-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; min-height: 4.5rem; max-width: 64rem; }
.ex-esg-actions .btn-team { font-size: 1.25rem; }
.ex-esg-msg { flex-basis: 100%; margin: 0; font-weight: 900; font-size: 1.3rem; color: var(--tc, var(--gold-2)); }

/* ---------- Pódio ---------- */
.ex-pod .bg-photo::after { background: radial-gradient(ellipse at 50% 30%, rgba(23,13,34,.55), rgba(23,13,34,.92) 70%); }
.ex-pod-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1rem 1.5rem 1.4rem; text-align: center; }
.ex-pod-title { font-size: clamp(2rem, 4.4vw, 3.8rem); margin: 0; }
.ex-pod-stage { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.8rem, 2.5vw, 2.4rem); min-height: calc(min(30vh, 15rem) + 10.5rem); width: min(60rem, 100%); margin-top: .6rem; }
.ex-pod-col { flex: 1; max-width: 17rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ex-pod-who { display: grid; justify-items: center; gap: .15rem; padding-bottom: .7rem; opacity: 0; transform: translateY(1.5rem) scale(.8); transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.5,.4,1); }
.ex-pod-col.shown .ex-pod-who { opacity: 1; transform: none; }
.ex-pod-crown { font-size: 2.2rem; line-height: 1; opacity: 0; transform: translateY(.6rem); transition: all .5s ease .5s; }
.ex-pod-col.champ .ex-pod-crown { opacity: 1; transform: none; }
.ex-pod-emo { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; filter: drop-shadow(0 .5rem 1rem rgba(0,0,0,.5)); }
.ex-pod-col.champ .ex-pod-emo { animation: exBounce 1.2s ease-in-out infinite; }
@keyframes exBounce { 50% { transform: translateY(-.5rem) scale(1.06); } }
.ex-pod-name { font-weight: 1000; font-size: 1.3rem; color: var(--cream); }
.ex-pod-pts { font-weight: 800; color: var(--cream-dim); }
.ex-pod-pts b { font-size: 1.8rem; color: var(--tc); font-variant-numeric: tabular-nums; }
.ex-pod-block { flex: none; width: 100%; height: 0; border-radius: 1rem 1rem 0 0; display: grid; place-items: start center; padding-top: .6rem; overflow: hidden; background: linear-gradient(180deg, var(--tc), var(--tcd)); box-shadow: inset 0 .4rem 0 rgba(255,255,255,.25), 0 1rem 2.4rem rgba(0,0,0,.45); transition: height .9s cubic-bezier(.2,1.2,.4,1); }
.ex-pod-block span { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; color: var(--tink); }
.ex-pod-col.shown.r1 .ex-pod-block { height: min(30vh, 15rem); }
.ex-pod-col.shown.r2 .ex-pod-block { height: min(20vh, 10rem); }
.ex-pod-col.shown.r3 .ex-pod-block { height: min(13vh, 6.5rem); }
.ex-pod-col.champ .ex-pod-block { box-shadow: inset 0 .4rem 0 rgba(255,255,255,.3), 0 0 3rem color-mix(in srgb, var(--tc) 60%, transparent); }
.ex-pod-msg { margin: .4rem 0 0; font-weight: 900; font-size: 1.35rem; color: var(--gold-2); max-width: 50ch; text-wrap: balance; }
.ex-pod-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .4rem; }
.ex-pod-note { margin: 0; color: var(--cream-dim); }

/* ---------- Roteiro ---------- */
.ex-rot { max-width: 76rem; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2.4rem) 3rem; display: grid; gap: 1.8rem; }
.ex-rot-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin: .3rem 0 .4rem; }
.ex-rot-lede { margin: 0; font-size: 1.15rem; color: var(--cream-dim); }
.ex-rot-tools { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.ex-rot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ex-rot-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-rot-box { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem 1.3rem; min-width: 0; }
.ex-rot-box h2, .ex-rot-h2 { margin: 0 0 .6rem; font-family: var(--f-display); font-weight: 800; letter-spacing: .04em; color: var(--gold-2); font-size: 1.25rem; }
.ex-rot-h2 { font-size: 1.5rem; }
.ex-rot-box ul, .ex-rot-box ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-weight: 600; line-height: 1.4; }
.ex-rot-table { display: grid; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.ex-rot-row { display: grid; grid-template-columns: 7.5rem 15rem 1fr; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface); border-top: 1px solid var(--line); align-items: start; }
.ex-rot-row:first-child { border-top: 0; }
.ex-rot-row:nth-child(even) { background: rgba(45,25,64,.7); }
.ex-rot-time { font-weight: 1000; color: var(--gold); font-variant-numeric: tabular-nums; }
.ex-rot-what b { display: block; font-weight: 900; }
.ex-rot-what small { display: block; color: var(--cream-dim); font-weight: 800; margin-top: .15rem; }
.ex-rot-how { font-weight: 600; line-height: 1.45; min-width: 0; }
.ex-rot-note { margin: .8rem 0 0; color: var(--cream-dim); }
.ex-rot-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ex-rot-idea { display: grid; gap: .25rem; padding: .9rem 1.1rem; border-radius: .9rem; background: var(--surface); border: 1px solid var(--line); }
.ex-rot-idea b { color: var(--gold-2); font-weight: 900; }
.ex-rot-idea span { font-weight: 600; line-height: 1.4; color: var(--cream); }
.ex-rot-keys li { line-height: 1.8; }
@media (max-width: 900px) {
  .ex-rot-grid, .ex-rot-grid.two, .ex-rot-ideas { grid-template-columns: 1fr; }
  .ex-rot-row { grid-template-columns: 1fr; gap: .3rem; }
}

@media print {
  body { overflow: visible; height: auto; background: #fff; color: #111; }
  .topbar, .toast-area, #confetti, .ex-rot-tools { display: none !important; }
  #app, #screen { display: block; height: auto; overflow: visible; }
  .ex-rot { padding: 0; gap: 1rem; max-width: none; }
  .ex-rot .gold-text { color: #4d2380; -webkit-text-fill-color: #4d2380; background: none; }
  .ex-rot-box, .ex-rot-row, .ex-rot-idea, .ex-rot-table { background: #fff !important; color: #111; border-color: #bbb; break-inside: avoid; }
  .ex-rot-box h2, .ex-rot-h2, .ex-rot-idea b, .ex-rot-time { color: #4d2380; }
  .ex-rot-what small, .ex-rot-lede, .ex-rot-note, .eyebrow { color: #444; }
  .ex-rot-idea span, .ex-rot-how { color: #111; }
  kbd { border-color: #999; background: #f3f3f3; color: #111; }
}