/* FoxHunt3D v4.7.0 — vapaa pelitila, END-podi ja Siipiportti-siirtoverkko */

.free-mode-row {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 12px;
}

.free-mode-row > label,
.free-mode-summary {
  min-width: 0;
}

.free-mode-summary {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(104, 226, 255, .18);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(104, 226, 255, .075), rgba(198, 166, 255, .045));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.free-mode-summary strong {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#transitHintPanel {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 9px 13px;
  border: 1px solid rgba(104, 226, 255, .38);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(5, 19, 31, .86), rgba(27, 18, 47, .8));
  box-shadow: 0 12px 38px rgba(0, 0, 0, .26), 0 0 24px rgba(104, 226, 255, .09);
  color: var(--ink);
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(9px);
  transition: opacity 120ms ease, transform 120ms ease;
}

#transitHintPanel.hidden {
  display: block !important;
  opacity: 0;
  transform: translate(-50%, 10px);
  visibility: hidden;
}

#transitHintPanel strong {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#transitHintPanel span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 780;
}

.free-transit-overlay,
.free-end-overlay {
  z-index: 70;
}

.free-transit-card {
  width: min(1040px, 96vw);
  overflow: hidden;
}

.free-transit-header,
.free-end-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.free-transit-header h2,
.free-end-header h2 {
  margin: 4px 0 5px;
  font-size: clamp(28px, 5vw, 44px);
}

.free-transit-header p,
.free-end-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.free-transit-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  color: var(--ink);
  font-size: 25px;
  cursor: pointer;
}

.free-transit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 14px;
  min-height: 390px;
}

.free-transit-map {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(104,226,255,.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(104,226,255,.08) 0 9%, transparent 10%),
    radial-gradient(ellipse at center, transparent 0 53%, rgba(198,166,255,.08) 54% 55%, transparent 56%),
    linear-gradient(145deg, rgba(4,18,29,.98), rgba(16,11,29,.96));
  box-shadow: inset 0 0 45px rgba(0,0,0,.34);
}

.free-transit-map::before,
.free-transit-map::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
}

.free-transit-map::before {
  inset: 10% 7%;
  border-radius: 47%;
}

.free-transit-map::after {
  inset: 25% 20%;
  border-color: rgba(104,226,255,.12);
  border-radius: 42%;
}

.transit-map-axis-x,
.transit-map-axis-z {
  position: absolute;
  pointer-events: none;
  background: rgba(255,255,255,.055);
}

.transit-map-axis-x { left: 5%; right: 5%; top: 50%; height: 1px; }
.transit-map-axis-z { top: 5%; bottom: 5%; left: 50%; width: 1px; }

.transit-map-arena {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 20%;
  height: 20%;
  border: 1px solid rgba(255,209,102,.35);
  border-radius: 30%;
  background: rgba(255,209,102,.045);
  display: grid;
  place-items: center;
  color: rgba(255,242,170,.72);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.transit-map-pin {
  position: absolute;
  z-index: 3;
  min-width: 52px;
  min-height: 38px;
  padding: 6px 8px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(104,226,255,.52);
  border-radius: 14px;
  background: rgba(12,37,52,.9);
  color: #dffaff;
  box-shadow: 0 0 0 4px rgba(104,226,255,.06), 0 0 22px rgba(104,226,255,.18);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}

.transit-map-pin.air {
  border-color: rgba(198,166,255,.7);
  background: rgba(41,25,66,.92);
  box-shadow: 0 0 0 4px rgba(198,166,255,.08), 0 0 24px rgba(198,166,255,.22);
}

.transit-map-pin.current {
  border-color: var(--gold);
  background: rgba(87,65,20,.92);
  color: #fff5c2;
  box-shadow: 0 0 0 5px rgba(255,209,102,.11), 0 0 28px rgba(255,209,102,.24);
  cursor: default;
}

.transit-map-pin:not(.current):active {
  transform: translate(-50%, -50%) scale(.96);
}

.free-transit-destinations {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.free-transit-destinations > header {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.free-transit-destinations > header strong {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.free-transit-destinations > header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.free-transit-list {
  min-height: 0;
  overflow-y: auto;
  padding: 9px;
  display: grid;
  gap: 8px;
}

.free-transit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.free-transit-homebase {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(101,230,255,.24);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(10,32,49,.88), rgba(5,14,25,.96));
  color: #eff8ff;
  font-weight: 850;
  letter-spacing: .04em;
  cursor: pointer;
}

.free-transit-homebase:hover,
.free-transit-homebase:focus-visible {
  border-color: rgba(101,230,255,.55);
  background: linear-gradient(145deg, rgba(19,52,77,.92), rgba(7,18,31,.97));
}

.transit-map-source {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,209,102,.72);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,209,102,.08), 0 0 18px rgba(255,209,102,.18);
  pointer-events: none;
}

.free-transit-destination {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.free-transit-destination:hover,
.free-transit-destination:focus-visible {
  border-color: rgba(104,226,255,.48);
  background: rgba(104,226,255,.09);
}

.free-transit-destination i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(104,226,255,.42);
  border-radius: 50%;
  color: var(--cyan);
  font-style: normal;
  font-weight: 900;
}

.free-transit-destination.air i {
  border-color: rgba(198,166,255,.55);
  color: #d9c7ff;
}

.free-transit-destination strong,
.free-transit-destination small {
  display: block;
}

.free-transit-destination small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.free-transit-destination b {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.free-transit-status {
  min-height: 21px;
  padding: 9px 13px 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.free-transit-status.error { color: #ffc9c9; }

.free-end-card {
  width: min(660px, 94vw);
  text-align: center;
}

.free-end-symbol {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 14px;
  border: 2px solid rgba(255,93,93,.58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,93,93,.2), rgba(62,12,24,.3));
  box-shadow: 0 0 38px rgba(255,93,93,.2);
  color: #ffdada;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .08em;
}

.free-end-warning {
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid rgba(255,209,102,.25);
  border-radius: 12px;
  background: rgba(255,209,102,.06);
  color: #ffeeb0;
  font-size: 12px;
  line-height: 1.48;
}

#transitFlash {
  position: absolute;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.96) 0 4%, rgba(104,226,255,.75) 18%, rgba(198,166,255,.4) 44%, transparent 72%);
  transition: opacity 200ms ease;
}

#transitFlash.active {
  animation: transit-flash 760ms ease-out forwards;
}

@keyframes transit-flash {
  0% { opacity: 0; }
  13% { opacity: .95; }
  42% { opacity: .38; }
  100% { opacity: 0; }
}

body.free-mode-active #timerText {
  color: var(--cyan);
  font-weight: 900;
}

body.transit-dialog-open #mobileControls,
body.free-end-dialog-open #mobileControls {
  pointer-events: none;
  opacity: .18;
}

@media (max-width: 820px) {
  .free-mode-row { grid-template-columns: 1fr; }
  .free-transit-layout { grid-template-columns: 1fr; min-height: 0; }
  .free-transit-map { min-height: 330px; }
  .free-transit-destinations { max-height: 260px; }
}

@media (max-width: 620px) {
  #transitHintPanel {
    bottom: 8px;
    width: calc(100vw - 16px);
    padding: 7px 10px;
  }
  #transitHintPanel span { font-size: 10px; }
  .free-transit-card { padding: 14px; }
  .free-transit-header { margin-bottom: 10px; }
  .free-transit-map { min-height: 280px; }
  .transit-map-pin { min-width: 38px; min-height: 34px; padding: 4px 6px; font-size: 8px; }
  .free-transit-actions { flex-direction: column; }
  .free-transit-homebase { width: 100%; }
}

@media (max-height: 470px) and (orientation: landscape) {
  .free-transit-overlay,
  .free-end-overlay { padding: 4px; align-items: stretch; }
  .free-transit-card,
  .free-end-card { width: 100%; max-height: calc(100vh - 8px); border-radius: 12px; }
  .free-transit-card { padding: 11px; }
  .free-transit-header h2 { font-size: 25px; }
  .free-transit-header p { font-size: 10px; }
  .free-transit-layout { grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr); min-height: 0; height: calc(100vh - 116px); }
  .free-transit-map { min-height: 0; }
  .free-transit-destinations { max-height: none; }
  .free-end-symbol { width: 58px; height: 58px; margin-bottom: 7px; font-size: 16px; }
  .free-end-header h2 { font-size: 26px; }
  .free-end-warning { margin: 8px 0; padding: 8px; }
}

/* Pysyvä urasivu: vapaan maailman tilastot. */
.free-world-career-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--meta-line, rgba(255,255,255,.14));
}
.free-world-career-section .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.free-world-career-section .section-heading h3 {
  margin: 2px 0 0;
  font-size: 17px;
}
.free-world-career-section .section-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}
.free-world-career-section .career-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.free-world-career-section .career-summary-grid > div {
  padding: 11px;
  border: 1px solid var(--meta-line, rgba(255,255,255,.14));
  border-radius: 11px;
  background: rgba(255,255,255,.045);
}
.free-world-career-section .career-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.free-world-career-section .career-summary-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: 18px;
}
@media (max-width: 820px) {
  .free-world-career-section .section-heading { align-items: flex-start; flex-direction: column; }
  .free-world-career-section .section-heading p { text-align: left; }
  .free-world-career-section .career-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}