@font-face { font-family: Bravura; src: url('landscape/vendor/bravura.woff2') format('woff2'); font-display: block; }
* { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #f0ece6; font-family: Arial, sans-serif; color: #2a2018; }
    button { font: inherit; }
    #app { position: absolute; top: 50%; left: 50%; width: 800px; height: 600px; overflow: hidden; background: #faf8f5; transform: translate(-50%, -50%); transform-origin: center; }
    #app > * { position: absolute; }
    #top-bar { top: 0; left: 0; width: 800px; height: 35px; padding: 2px 8px; background: #fff; z-index: 2; }
    #top-bar img { display: block; height: 30px; }
    #title-bar { top: 35px; left: 0; width: 800px; height: 65px; background: #891253; z-index: 2; }
    h1 { position: absolute; left: 100px; top: 13px; margin: 0; color: white; font-size: 30px; line-height: 39px; }
    #btn-info { position: absolute; right: 14px; top: 7px; width: 50px; height: 50px; border: 0; border-radius: 50%; background: #8e24aa; color: #fff; font: italic bold 28px Georgia, serif; cursor: pointer; }
    #profile-col { position: absolute; right: 74px; top: 5px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 3; }
    #profile-chip, #btn-mi-progreso { border: 0; border-radius: 14px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }
    #profile-chip { display: flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
    #profile-chip span { max-width: 125px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    #btn-mi-progreso { padding: 3px 9px; font-size: 11px; }
    #challenge-progress { top: 107px; left: 0; width: 800px; height: 27px; display: flex; justify-content: center; gap: 7px; }
    .challenge-chip { min-width: 120px; padding: 5px 9px; border: 1px solid #d7d1cb; border-radius: 15px; background: #fff; text-align: center; color: #6b6055; font-size: 12px; font-weight: 700; }
    .challenge-chip.current { border-color: #3b6fd4; background: #eef2fa; color: #315dab; }
    .challenge-chip.done { border-color: #91d5af; background: #effaf3; color: #1c794a; }
    #rounds { top: 138px; left: 0; width: 800px; height: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; }
    .round-dot { width: 16px; height: 16px; border-radius: 50%; background: #ded8d2; }
    .round-dot.current { box-shadow: 0 0 0 3px #b7c9ec; }
    .round-dot.correct { background: #34c785; }
    .round-dot.incorrect { background: #ef4565; }
    #prompt { top: 160px; left: 25px; width: 750px; text-align: center; font-size: 18px; font-weight: 700; }
    #choices { top: 190px; left: 20px; width: 760px; height: 205px; display: flex; gap: 16px; }
    .choice { position: relative; width: 372px; height: 205px; padding: 8px; border: 2px solid #ddd5cd; border-radius: 18px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
    .choice:hover:not(:disabled) { border-color: #3b6fd4; transform: translateY(-2px); }
    .choice:disabled { cursor: default; }
    .choice:focus-visible, #btn-listen:focus-visible, #btn-next:focus-visible, .btn-review:focus-visible, #btn-info:focus-visible { outline: 3px solid #3b6fd4; outline-offset: 3px; }
    .choice.correct { border-color: #23975d; background: #effaf3; }
    .choice.incorrect { border-color: #dc3b59; background: #fff0f2; }
    .choice-label { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background: #eef2fa; color: #3b62b0; font-size: 17px; font-weight: 700; }
    .score { width: 340px; height: 150px; margin: 4px auto 0; overflow: hidden; pointer-events: none; }
    .score svg { display: block; }
    .difference-ring { fill: none; stroke: #e07828; stroke-width: 3; }
    .playback-cursor { fill: rgba(59, 111, 212, .24); stroke: #3b6fd4; stroke-width: 1.5; pointer-events: none; }
    #listen-area { top: 416px; left: 0; width: 800px; text-align: center; }
    #btn-listen, #btn-next { border: 0; border-radius: 26px; background: #ff6b35; color: #fff; font-size: 19px; font-weight: 700; padding: 13px 29px; cursor: pointer; }
    #btn-listen:disabled { opacity: .55; cursor: wait; }
    #btn-next { display: none; padding: 10px 24px; font-size: 16px; }
    #feedback { min-height: 27px; margin: 15px 20px 0; font-size: 17px; font-weight: 700; }
    #feedback.ok { color: #187b4c; }
    #feedback.ko { color: #c92f4d; }
    #feedback.neutral { color: #6b6055; }
    #review-area { display: none; margin: 8px auto 10px; }
    #review-hint { margin: 0 0 8px; color: #5a4f44; font-size: 14px; }
    #review-buttons { display: flex; justify-content: center; gap: 12px; }
    .btn-review { border: 1px solid #b7c9ec; border-radius: 20px; background: #eef2fa; color: #315dab; font-size: 15px; font-weight: 700; padding: 7px 18px; cursor: pointer; }
    .btn-review:disabled { opacity: .6; cursor: wait; }
    #entry { top: 100px; left: 0; width: 800px; height: 500px; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 90px; background: #faf8f5; text-align: center; transition: opacity .35s; }
    #entry.oculto { opacity: 0; pointer-events: none; }
    #entry h2 { margin: 0; font-size: 30px; }
    #entry p { margin: 0; font-size: 18px; line-height: 1.5; color: #5a4f44; }
    #btn-start, #btn-retry, #btn-repeat-game { border: 0; border-radius: 25px; padding: 12px 29px; background: #ff6b35; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
    #challenge-result, #final-modal, #progreso-modal { inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(42,32,24,.55); }
    #challenge-result.visible, #final-modal.visible, #progreso-modal.visible { display: flex; }
    #challenge-card { width: 660px; padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,.25); }
    #challenge-card h2 { margin: 0 0 15px; font-size: 20px; color: #891253; }
    #challenge-main { display: flex; align-items: center; gap: 20px; }
    #result-sol { width: 160px; height: 180px; object-fit: contain; }
    #result-bubble { position: relative; flex: 1; min-height: 130px; padding: 25px 22px; border: 2px solid #d9c9df; border-radius: 22px; background: #fbf5fd; text-align: center; }
    #result-bubble::before { content: ''; position: absolute; right: -12px; top: 55px; width: 18px; height: 18px; transform: rotate(45deg); border-right: 2px solid #d9c9df; border-top: 2px solid #d9c9df; background: #fbf5fd; }
    #result-score { font-size: 25px; font-weight: 800; }
    #result-message { margin-top: 7px; font-size: 18px; line-height: 1.35; }
    #challenge-summary { display: flex; justify-content: center; gap: 6px; margin: 16px 0; }
    .summary-chip { padding: 6px 10px; border-radius: 14px; background: #eef2fa; font-size: 12px; font-weight: 700; color: #315dab; }
    .summary-chip.empty { background: #f2eeea; color: #999088; }
    #challenge-actions { display: flex; justify-content: center; gap: 12px; }
    #btn-next-challenge { border: 0; border-radius: 22px; padding: 11px 23px; background: #3b6fd4; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
    #modal-fin-card { width: 520px; border-radius: 16px; background: #f7f3ee; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.3); }
    #fin-body { padding: 23px 25px; }
    #fin-body h2 { margin: 0 0 5px; font-size: 25px; }
    #final-total { margin: 0 0 15px; color: #5a4f44; font-size: 17px; }
    #final-list { display: grid; gap: 7px; margin-bottom: 18px; }
    .final-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 9px; background: #fff; font-size: 15px; }
    #btn-repeat-game { font-size: 16px; }
    #progreso-modal { z-index: 70; }
    #progreso-card { width: 390px; padding: 21px 23px; border-radius: 18px; background: #f7f3ee; }
    #progreso-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 19px; font-weight: 700; }
    #progreso-card-x, #info-close { cursor: pointer; }
    #progreso-card-x { border: 0; background: none; color: #777; font-size: 23px; }
    #progreso-lista { display: grid; gap: 7px; }
    .progreso-row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 14px; }
    #btn-borrar-progreso { width: 100%; margin-top: 15px; padding: 12px 0 0; border: 0; border-top: 1px solid #d7d1cb; background: none; color: #c0392b; text-align: left; font-size: 13px; cursor: pointer; }
    #profile-modal { position: absolute; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
    #profile-modal.visible { display: flex; }
    #profile-modal-box { width: 320px; padding: 25px; border-radius: 18px; background: #fff; text-align: center; }
    #profile-modal-box .pm-msg { margin: 0 0 15px; font-size: 16px; line-height: 1.4; }
    #profile-input { width: 100%; padding: 10px; border: 2px solid #d7d1cb; border-radius: 9px; font-size: 16px; }
    #profile-btn-ok { width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 10px; background: #ff6b35; color: #fff; font-weight: 700; cursor: pointer; }
    #profile-btn-skip { margin-top: 10px; border: 0; background: none; color: #666; cursor: pointer; }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
    #info-panel { inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
    #info-panel.visible { display: flex; }
    #info-card { width: 530px; padding: 22px 26px; border-radius: 18px; background: #f7f3ee; font-size: 17px; line-height: 1.45; }
    #info-card h2 { margin: 0 0 12px; font-size: 22px; }
    #info-card p { margin: 0 0 14px; }
    #info-close { border: 0; border-radius: 18px; background: #3b6fd4; color: #fff; padding: 8px 18px; cursor: pointer; }