/* Área do Aluno — estilo-mapa.css: a carta a nanquim sobre a mesa, o medalhão de Atenas, a trilha, os marcadores
   (trancada, liberada, enviada), o topo e a faixa de prazo. --u = largura do palco / 1000 (escala dos tamanhos). */

.tela-mapa { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 540px; padding: 0 var(--gutter); overflow: hidden; }

/* ---------- Topo e faixa de prazo ---------- */
.mapa-topo { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px 6px; }
.marca { display: flex; align-items: center; gap: 12px; font: 600 11px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); min-width: 0; }
.marca b { color: var(--on-dark); font-weight: 700; }
.marca .sep { color: var(--gold); }
.tile-mini { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #FAF6EE; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.tile-mini svg { width: 24px; height: 24px; }
.quem { display: flex; align-items: center; gap: 14px; flex: none; }
.quem-nome { font: italic 500 20px/1 var(--display); color: var(--gold-soft); }
.mapa-faixa {
  justify-self: center; display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 16px; padding: 9px 18px; border-radius: 999px;
  background: rgba(13, 23, 39, .6); border: 1px solid rgba(198, 167, 94, .45); color: var(--on-dark);
  font: 600 11px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.mapa-faixa svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.mapa-faixa.encerrada { border-color: rgba(225, 120, 100, .5); }
.mapa-veu { position: fixed; inset: 0; z-index: 40; background: var(--navy-deep); opacity: 0; pointer-events: none; }

/* ---------- A carta ---------- */
.mapa-area { position: relative; display: grid; place-items: center; min-height: 0; }
.mapa-moldura { position: relative; transform: rotate(-.6deg); }
.mapa-palco {
  position: relative; border-radius: 3px; --u: 1;
  background-color: var(--parchment);
  background-image: var(--papel-manchas), var(--papel-grao), radial-gradient(120% 90% at 40% 30%, #F3E7C8 0%, var(--parchment) 55%, #D8BF8F 100%);
  background-size: 560px 560px, 240px 240px, 100% 100%;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(59, 42, 26, .45), inset 0 0 110px rgba(122, 82, 36, .48), inset 0 0 24px rgba(122, 82, 36, .3);
}
.mapa-palco::before { /* filete duplo da carta */
  content: ""; position: absolute; inset: 1.2%; z-index: 3; pointer-events: none;
  border: 1.5px solid rgba(59, 42, 26, .55); box-shadow: inset 0 0 0 4px rgba(234, 219, 184, .35), inset 0 0 0 5px rgba(59, 42, 26, .35);
}
.mapa-palco.sobrevoando { will-change: transform; }
.carta-svg { position: absolute; overflow: hidden; }
.c-terra { fill: #e3cc9c; fill-opacity: .92; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; filter: url(#f-tinta); }
.c-agua1 { fill: none; stroke: rgba(91, 58, 34, .22); stroke-width: 7; }
.c-agua2 { fill: none; stroke: rgba(91, 58, 34, .11); stroke-width: 17; }
.c-agua3 { fill: none; stroke: rgba(91, 58, 34, .05); stroke-width: 30; }
.c-ondas { fill: none; stroke: rgba(91, 58, 34, .34); stroke-width: 1.3; stroke-linecap: round; }
.sobre-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* cenário apagado, montes, cidades e textos */
.cenario { opacity: .6; }
.cenario path, .cenario circle { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.cenario .g-monte, .cenario .g-elmo, .cenario .g-cavalo, .cenario .g-casco { fill: rgba(214, 190, 142, .7); }
.cenario .g-vela { fill: rgba(242, 233, 216, .8); }
.cenario .g-neve { stroke: #fff8e8; stroke-width: 2.2; }
.cenario .g-hach { stroke-width: .9; opacity: .7; }
.cenario .g-crista, .cenario .g-machado { fill: rgba(106, 27, 27, .25); }
.c-rotulo { font: italic 600 19px/1 var(--display); fill: var(--ink); text-anchor: middle; stroke: none; }
.g-montinho { fill: rgba(214, 190, 142, .65); stroke: rgba(59, 42, 26, .6); stroke-width: 1.2; stroke-linejoin: round; }
.cidade circle { fill: var(--ink); }
.cidade .anel { fill: none; stroke: var(--gold-dark); stroke-width: 2; }
.cidade.destaque circle:first-child { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.cidade text { font: 600 21px/1 var(--display); fill: var(--ink); paint-order: stroke; stroke: rgba(234, 219, 184, .85); stroke-width: 4px; }
.cidade.destaque text { font-size: 25px; letter-spacing: .04em; }
.t-mar { font: italic 500 30px/1 var(--display); fill: rgba(91, 58, 34, .7); letter-spacing: .14em; text-anchor: middle; }
.t-regiao { font: 600 17px/1 var(--display); fill: rgba(91, 58, 34, .55); letter-spacing: .32em; text-transform: uppercase; text-anchor: middle; }
.rosa-ventos .rv-anel { fill: rgba(242, 233, 216, .55); stroke: var(--ink); stroke-width: 1.4; }
.rosa-ventos .rv-anel.fino { fill: none; stroke-width: .8; }
.rosa-ventos .rv-tique { stroke: var(--ink); stroke-width: 1; }
.rosa-ventos .rv-ponta { stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.rosa-ventos .rv-ponta.clara { fill: #f1e2b6; } .rosa-ventos .rv-ponta.escura { fill: var(--gold); }
.rosa-ventos .rv-centro { fill: var(--burgundy); stroke: var(--ink); stroke-width: 1; }
.rosa-ventos .rv-letra { font: 700 18px/1 var(--display); fill: var(--ink); text-anchor: middle; }

/* trilha: pontilhada dourada (o caminho), o ouro contínuo (o que já foi enviado) e o fio até o medalhão */
.trilha-base { fill: none; stroke: #c9a24c; stroke-width: 4.6; stroke-linecap: round; stroke-dasharray: .1 12.5; }
.trilha-sombra { fill: none; stroke: rgba(59, 42, 26, .55); stroke-width: 7.4; stroke-linecap: round; stroke-dasharray: .1 12.5; }
.trilha-ouro { fill: none; stroke: #e0bd62; stroke-width: 5.2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(246, 222, 150, .95)); }
.fio { fill: none; stroke: var(--gold-dark); stroke-width: 2.2; stroke-dasharray: 3 7; }
.fio-ouro { stroke-width: 3; }
.mascara { fill: none; stroke: #fff; stroke-width: 70; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ---------- O medalhão de Atenas ---------- */
.medalhao { position: absolute; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 12px 20px rgba(59, 42, 26, .5)); }
.medalhao-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.med-fundo { fill: #ead9b1; stroke: rgba(59, 42, 26, .55); stroke-width: 1.4; }
.med-mar { fill: #d8c49a; }
.med-onda { fill: none; stroke: rgba(59, 42, 26, .35); stroke-width: 1.1; stroke-linecap: round; }
.med-costa { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.med-porto { fill: #d8c49a; stroke: var(--ink); stroke-width: 1.2; }
.med-muro { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.med-muro.tracejado { stroke-dasharray: 5 3; stroke-width: 1.4; fill: none; }
.med-muro.fraco { opacity: .45; }
.med-rotulo-muro { font: italic 600 11.5px/1 var(--display); fill: var(--ink); letter-spacing: .08em; }
.med-cidade { fill: rgba(214, 190, 142, .45); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 9 2.5; stroke-linejoin: round; }
.med-rocha { fill: #cdb27e; stroke: var(--ink); stroke-width: 1.3; }
.med-rocha.fraca { opacity: .5; }
.med-hach { stroke: rgba(59, 42, 26, .6); stroke-width: 1; }
.med-templo path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.med-praca { fill: rgba(225, 201, 138, .35); stroke: rgba(59, 42, 26, .6); stroke-width: 1; stroke-dasharray: 3 2; }
.med-stoa { stroke: var(--gold-dark); stroke-width: 2.4; }
.med-rotulo { font: italic 600 13px/1 var(--display); fill: var(--ink); text-anchor: middle; }
.med-rotulo.fraco { opacity: .5; font-size: 11px; }
.med-rotulo.mar { font-size: 14px; fill: rgba(59, 42, 26, .62); letter-spacing: .1em; }
.med-aro { fill: none; stroke: var(--gold-dark); stroke-width: 2; }
.med-aro.fino { stroke: var(--ink); stroke-width: .8; opacity: .55; }
.med-folha { fill: #c9a752; stroke: rgba(59, 42, 26, .7); stroke-width: .7; }
.med-brilho { animation: brilha-agora 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brilha-agora { 50% { opacity: .55; transform: scale(.88); } }
.medalhao .trilha-base { stroke-width: 3.4; stroke-dasharray: .1 9; }
.medalhao .trilha-ouro { stroke-width: 3.8; }
.faixa-atenas {
  position: absolute; left: 50%; bottom: -1.5%; transform: translateX(-50%); padding: 3px 18px 4px; z-index: 3;
  background: var(--parchment-light); border: 1px solid rgba(134, 103, 31, .8); box-shadow: 0 3px 8px rgba(59, 42, 26, .35), inset 0 0 0 2px var(--parchment-light), inset 0 0 0 3px rgba(198, 167, 94, .55);
  font: 700 clamp(11px, calc(var(--u) * 14px), 16px)/1.2 var(--display); letter-spacing: .38em; text-transform: uppercase; color: var(--ink); padding-left: calc(18px + .38em);
}

/* ---------- Marcadores ---------- */
.marco-mapa {
  --tam: clamp(34px, calc(var(--u) * 37px), 50px);
  position: absolute; z-index: 4; width: var(--tam); height: var(--tam); transform: translate(-50%, -50%); padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #8a6a2b; color: var(--ink);
  background: radial-gradient(circle at 34% 30%, #fff1c2 0%, #e2c374 45%, #b28d3e 100%);
  box-shadow: 0 3px 8px rgba(59, 42, 26, .5), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(91, 58, 34, .35);
  transition: transform .2s, box-shadow .2s;
}
.medalhao .marco-mapa { --tam: clamp(28px, calc(var(--u) * 31px), 42px); }
.marco-mapa .num { font: 700 calc(var(--tam) * .5)/1 var(--display); letter-spacing: .02em; margin-top: -1px; }
.marco-mapa:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
@media (hover: hover) { .marco-mapa:not([data-estado="trancada"]):hover { transform: translate(-50%, -50%) scale(1.08); } }
.marco-mapa .cadeado, .marco-mapa .louro { position: absolute; pointer-events: none; }
.marco-mapa .cadeado { display: none; right: -7px; bottom: -6px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--parchment-light); border: 1px solid rgba(59, 42, 26, .55); color: var(--ink); }
.marco-mapa .cadeado .ic { width: 13px; height: 13px; }
.marco-mapa .louro { display: none; inset: -38%; color: #8a6a2b; }
.marco-mapa .louro .ic { width: 100%; height: 100%; }
.marco-mapa[data-estado="trancada"] { cursor: default; background: rgba(242, 233, 216, .9); border: 1.5px dashed rgba(91, 58, 34, .6); color: rgba(59, 42, 26, .55); box-shadow: 0 2px 5px rgba(59, 42, 26, .25); }
.marco-mapa[data-estado="trancada"] .cadeado { display: grid; }
.marco-mapa[data-estado="liberada"]::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(240, 210, 130, .95); pointer-events: none;
  animation: pulsa 2.6s ease-out infinite;
}
.marco-mapa[data-estado="liberada"] { box-shadow: 0 0 0 4px rgba(246, 222, 150, .45), 0 0 22px 6px rgba(246, 222, 150, .55), 0 3px 8px rgba(59, 42, 26, .5); }
@keyframes pulsa { from { transform: scale(.92); opacity: .95; } to { transform: scale(1.75); opacity: 0; } }
.marco-mapa[data-estado="enviada"] .louro { display: block; }
.marco-mapa.destino { --tam: clamp(38px, calc(var(--u) * 42px), 56px); }
.marco-mapa.destino .portico { width: 72%; height: 72%; }
.marco-mapa.destino .portico path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marco-mapa.destino[data-estado="trancada"] { border-style: solid; color: rgba(59, 42, 26, .62); }

.rotulo-marco { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; color: var(--ink); text-align: center; text-shadow: 0 0 3px rgba(242, 233, 216, .95), 0 0 6px rgba(242, 233, 216, .8); }
.rotulo-marco b { display: block; font: 700 clamp(14px, calc(var(--u) * 19px), 25px)/1.1 var(--display); letter-spacing: .02em; }
.rotulo-marco i { display: block; font: italic 500 clamp(12.5px, calc(var(--u) * 15.5px), 20px)/1.25 var(--display); color: #5b4630; }
.rotulo-marco.lado-esq { transform: translate(calc(-100% - clamp(26px, calc(var(--u) * 30px), 40px)), -50%); text-align: right; }
.rotulo-marco.lado-baixo { transform: translate(-50%, 22px); }
.rotulo-marco.no-medalhao { transform: translate(-50%, -50%); }
.rotulo-marco.no-medalhao b { font-size: clamp(12.5px, calc(var(--u) * 15.5px), 21px); }
.rotulo-marco.no-medalhao i { font-size: clamp(11px, calc(var(--u) * 12.5px), 17px); }
.rotulo-marco[data-estado="trancada"] { opacity: .66; }

.cartela {
  position: absolute; z-index: 3; transform: translate(0, -50%); padding: 10px 24px 12px; text-align: center; color: var(--ink);
  background: rgba(242, 233, 216, .92); border: 1px solid rgba(134, 103, 31, .75);
  box-shadow: 0 4px 12px rgba(59, 42, 26, .3), inset 0 0 0 3px rgba(242, 233, 216, 1), inset 0 0 0 4px rgba(198, 167, 94, .6);
}
.cartela-olho { display: block; font: 600 clamp(9px, calc(var(--u) * 10px), 12px)/1.3 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); }
.cartela b { display: block; font: 600 clamp(24px, calc(var(--u) * 34px), 44px)/1 var(--display); letter-spacing: .06em; }
.cartela-sub { display: block; font: italic 500 clamp(12px, calc(var(--u) * 14px), 18px)/1.3 var(--display); color: #5b4630; }

/* ---------- Celular: medalhão em cima, carta embaixo ---------- */
@media (max-width: 760px) {
  .tela-mapa { padding: 0 10px; min-height: 0; }
  .mapa-topo { padding: 10px 2px 4px; }
  .marca .sep, .marca .sub { display: none; }
  .quem-nome { font-size: 17px; }
  .mapa-moldura { transform: none; }
  .mapa-palco::before { inset: 1.6%; }
  .marco-mapa { --tam: 32px; }
  .medalhao .marco-mapa { --tam: 28px; }
  .marco-mapa.destino { --tam: 36px; }
  .rotulo-marco b { font-size: 15px; }
  .rotulo-marco i { font-size: 13px; }
  .rotulo-marco.no-medalhao b { font-size: 13px; }
  .rotulo-marco.no-medalhao i { font-size: 11.5px; }
  .faixa-atenas { font-size: 11px; }
  .mapa-faixa { margin: 6px 0 12px; padding: 8px 14px; font-size: 10px; letter-spacing: .1em; }
}

/* ---------- Ajustes depois das primeiras capturas ---------- */
.tela-mapa .mapa-topo, .tela-mapa .mapa-faixa { transition: opacity .6s ease; }
.tela-mapa.sobrevoo .mapa-topo, .tela-mapa.sobrevoo .mapa-faixa { opacity: 0; }
.rotulo-marco { padding: 4px 12px 5px; border-radius: 4px; background: radial-gradient(ellipse at center, rgba(242, 233, 216, .94) 50%, rgba(242, 233, 216, .55) 75%, rgba(242, 233, 216, 0) 100%); }
.med-mar { fill: #efe3c5; }
.med-onda { stroke: rgba(59, 42, 26, .32); }
.med-porto { fill: #efe3c5; }
.med-casa { fill: rgba(91, 58, 34, .22); stroke: rgba(59, 42, 26, .35); stroke-width: .6; }
.med-cidade { fill: rgba(234, 214, 168, .55); stroke-width: 1.6; stroke-dasharray: 10 2; }
.fio { stroke: #cfa84f; stroke-width: 2.6; stroke-dasharray: none; stroke-linecap: round; }
.fio-sombra { fill: none; stroke: rgba(59, 42, 26, .45); stroke-width: 4.6; stroke-linecap: round; }
.marco-mapa.destino::before {
  content: ""; position: absolute; inset: -95%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(240, 205, 120, .55) 30%, rgba(225, 201, 138, 0) 68%);
  animation: aura 4.5s ease-in-out infinite;
}
@keyframes aura { 50% { transform: scale(.86); opacity: .75; } }
.marco-mapa.destino[data-estado="trancada"] { background: radial-gradient(circle at 34% 30%, #fff6d8 0%, #ecd697 60%, #cfae63 100%); border: 1.5px solid rgba(134, 103, 31, .8); color: #7a5c1c; }

/* ---------- Fases II e III "aguardando a equipe": trancada à vista, mas com a ampulheta (não é recusa: depende da equipe) ---------- */
.marco-mapa .ampulheta { display: none; position: absolute; right: -8px; bottom: -7px; width: 21px; height: 21px; place-items: center; border-radius: 50%; pointer-events: none; background: var(--navy); border: 1px solid rgba(225, 201, 138, .9); color: var(--gold-soft); box-shadow: 0 2px 4px rgba(13, 23, 39, .4); }
.marco-mapa .ampulheta .ic { width: 13px; height: 13px; }
.marco-mapa[data-estado="aguardando"] {
  background: radial-gradient(circle at 34% 30%, #fff6dc 0%, #eedcaa 58%, #d4b674 100%); border: 1.5px dashed rgba(134, 103, 31, .9); color: rgba(59, 42, 26, .62);
  box-shadow: 0 0 0 3px rgba(242, 233, 216, .6), 0 2px 6px rgba(59, 42, 26, .3);
}
.marco-mapa[data-estado="aguardando"] .ampulheta { display: grid; }
.rotulo-marco .aguarda { display: none; }
.rotulo-marco[data-estado="aguardando"] .lema { display: none; }
.rotulo-marco[data-estado="aguardando"] .aguarda { display: block; color: var(--burgundy); }