@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
     /*  --deep: #07111f;
      --ocean: #0c2340;
      --mid: #163d6a;
      --surf: #2870a8;
      --foam: #7dcce8;
      --pale: #c8e8f5;
      --cream: #ede9df;
      --sand: #c9bc99;
      --amber: #dfa040;
      --orange-let: #f7d3c4;
      --orange-bg: #ff4d00cc; */
      --line: rgba(125, 204, 232, 0.12);
      --line-h: rgba(125, 204, 232, 0.32);

      --color_fondo:#002234;
      --bradius: 10px;
    }

    html {
      font-size: 19px;
      font-family: 'Saira Condensed', sans-serif;
    }

    body {
      /* background: var(--color_fondo); */
      color: #ffffff;
      background-color: transparent;
      font-family: 'Saira Condensed', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Wrapper */
    .wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      /* padding: 0 20px 80px; */
    }

    /* Header */
 /*    header {
      padding: 48px 0 36px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 44px;
      text-align: center;
    }

    .eyebrow {
      font-family: 'Saira Condensed', sans-serif;
      font-size: 9px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--foam);
      opacity: 0.5;
      margin-bottom: 16px;
    }

    header h1 {
      font-size: clamp(1.75rem, 5.5vw, 2.8rem);
      text-shadow: 0 0 60px rgba(125, 204, 232, 0.18);
    }

    header h1 em {
      font-style: italic;
      color: var(--foam);
    }

    .header-desc {
      margin-top: 12px;
      font-size: 19px;
      margin-inline: auto;
    } */

    /* Card (question screen) */
    .card {
      /* background: linear-gradient(155deg, rgba(86, 156, 236, 0.329) 0%, rgba(6, 15, 26, 0.52) 100%); */
      /* border: 1px solid var(--line); */
      background: linear-gradient(155deg, rgba(179, 226, 248, 0.329) 0%, rgba(10, 92, 129, 0.329) 50%);
      border-radius: 7px;
      overflow: hidden;
      position: relative;
      animation: fadeSoft 0.28s ease-out both;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      /* background: linear-gradient(90deg, transparent, var(--foam), transparent); */
      opacity: 0.18;
      pointer-events: none;
    }

    @keyframes fadeSoft {
      from {
        opacity: 0;
        transform: scale(0.992);
        filter: blur(2px);
      }

      to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
    }

    .card-header {
      padding: 1rem;
      /* border-bottom: 1px solid var(--line); */
    }

    .question {
      color: #ffffff;
      font-size: 36px;
      line-height: 1.1;
      text-align: center;
    }

    /* Options grid  */
    .options {
      display: grid;
      gap: 0.5rem;
      padding: 0rem 1rem 1.5rem 1rem
    }

    .options[data-count="2"] {
      grid-template-columns: 1fr 1fr;
    }

    .options[data-count="3"],
    .options[data-count="4"],
    .options[data-count="5"],
    .options[data-count="6"],
    .options[data-count="7"] {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    @media (max-width: 540px) {
      .options[data-count="3"] {
        grid-template-columns: 1fr;
      }

      .options[data-count="2"] {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 380px) {
      .options {
        grid-template-columns: 1fr !important;
      }
    }

    /* Single option tile */
    .opt {
      display: flex;
      flex-direction: column;
    /*   border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line); */
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background 0.2s;
      border-radius: 10px;
    }

    .opt:nth-child(even) {
      border-right: none;
    }

    .options[data-count="3"] .opt:nth-child(3n) {
      border-right: none;
    }

    .options[data-count="3"] .opt {
      /* border-right: 1px solid var(--line); */
    }

    .options[data-count="3"] .opt:last-child {
      border-right: none;
    }

    /* accent line on hover */
    .opt::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(125, 204, 232, 0.0);
      transition: background 0.18s;
      pointer-events: none;
    }

    .opt:hover::after {
      background: rgba(125, 204, 232, 0.06);
    }

    .opt:focus-visible {
      outline: 2px solid var(--foam);
      outline-offset: -2px;
    }

    /* image area — always shows, clips gracefully for any ratio */
    .opt-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
     /*  background: rgba(0, 0, 0, 0.3); */
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* For 2-option layout, taller images look better */
    .options[data-count="2"] .opt-img {
      aspect-ratio: 3 / 2;
    }

    .opt-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* never crops, handles any ratio */
      object-position: center;
      padding: 1rem;
      opacity: 0.82;
      transition: opacity 0.2s, transform 0.3s;
      display: block;
    }

    .opt:hover .opt-img img {
      opacity: 1;
      transform: scale(1.04);
    }

    /* placeholder */
    .opt-img-ph {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .opt-img-ph svg {
      width: 36px;
      height: 36px;
      opacity: 0.12;
    }

    /* label strip */
    .opt-label {
      padding: 0.5rem;
      /* border-top: 1px solid var(--line); */
      flex: 1;
      transition: color 0.18s;
      font-size: 22px;
      line-height: 1.3;
      text-align: center;
    }

    .opt:hover .opt-label {
      color: var(--orange-let);
      background-color: var(--orange-bg);
    }

    /* Nav row */
    .nav-row {
      display: flex;
      gap: 12px;
      padding: 1rem;
      border-top: 1px solid var(--line);
    }

    .btn {
      font-family: 'Saira Condensed', sans-serif;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 9px 18px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.18s;
      border: 1px solid;
      line-height: 1;
    }

    .btn-back {
      background: rgba(125, 204, 232, 0.397);
      border-color: rgba(125, 204, 232, 0.16);
      color: #eefaff;
     /*  opacity: 0.6; */
    }

    .btn-back:hover:not(:disabled) {
      opacity: 1;
      border-color: var(--foam);
      background: rgba(125, 204, 232, 0.09);
    }

    .btn-back:disabled {
      opacity: 0.2;
      cursor: not-allowed;
    }

    .btn-restart {
      background: #ce452734;
      border-color: #ce452738;
      color: var(--orange-let);
    }

    .btn-restart:hover {
      background: #ce452773;
      border-color:var(--orange-bg);
      color: #fcd6c2;
    }

    /* Result card */
    .result-card {
      background: linear-gradient(155deg, rgba(179, 226, 248, 0.329) 0%, rgba(10, 92, 129, 0.329) 50%);
      /* border: 1px solid var(--line); */
      border-radius: 10px;
      overflow: hidden;
      animation: fadeSoft 0.32s ease-out both;
      position: relative;
    }

    .result-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
     /*  background: linear-gradient(90deg, transparent, var(--amber), transparent); */
      opacity: 0.3;
      pointer-events: none;
    }

    .result-body {
      padding: 1rem;
      /* border-bottom: 1px solid var(--line); */
    }

    .result-badge {
      display: inline-block;
      font-family: 'Saira Condensed', sans-serif;
      font-size: 9px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--amber);
      background: rgba(223, 160, 64, 0.09);
      border: 1px solid rgba(223, 160, 64, 0.2);
      padding: 3px 11px;
      border-radius: 2px;
      margin-bottom: 16px;
    }

    .result-title {
      font-size: 38px;
      line-height: 1.1;
      color: #ff7e62;
      margin-bottom: 14px;
    }

    .result-desc {
      font-size: 19px;
      color: var(--orange-let);
      border-left: 2px solid rgba(125, 204, 232, 0.575);
      padding-left: 15px;
    }

    /* image block — shown after text */
    .result-illo {
      width: 100%;
      /* no fixed aspect-ratio: image drives its own height */
      overflow: hidden;
      background: rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .result-illo a {
      display: block;
      width: 100%;
      text-decoration: none;
    }

    .result-illo img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 50vh;
      object-fit: contain;
      object-position: center;
      opacity: 0.9;
      transition: opacity 0.25s, transform 0.35s;
      padding: 1rem;
    }

    .result-illo a:hover img {
      opacity: 1;
    }

    /* "ver máis" chip overlay on hover */
    .illo-chip {
      position: absolute;
      bottom: 12px;
      right: 14px;
      font-family: 'Saira Condensed', sans-serif;
      font-size: 10px;
      text-transform: uppercase;
      color: var(--foam);
      background: rgba(7, 17, 31, 0.72);
      border: 1px solid rgba(125, 204, 232, 0.25);
      padding: 4px 10px;
      border-radius: 2px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .result-illo a:hover~.illo-chip,
    .result-illo:hover .illo-chip {
      opacity: 1;
    }

    /* no-image placeholder */
    .result-illo-ph {
      width: 100%;
      padding: 40px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.06;
      font-size: 5rem;
      user-select: none;
    }

    /* bottom nav */
    .result-nav {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding: 1rem;
      /* border-top: 1px solid var(--line); */
    }

    /* Small screens */
    @media (max-width: 480px) {
      .card-header {
        padding: 22px 18px 18px;
      }

      .nav-row,
      .result-nav {
        padding: 16px 18px 18px;
      }

      .result-body {
        padding: 24px 18px 20px;
      }

      .opt-label {
        padding: 8px 10px 10px;
      }
    }