.board-art-frame {
    /* Recorta o mesmo asset para deixar apenas uma lâmina fina da moldura original. */
    inset: -38%;
    width: 176%;
    height: 176%;
}

.board-final-grass { z-index: -6; object-fit: cover; }

.trail-stage {
    position: absolute;
    left: 15.6%;
    top: -1%;
    width: 68.5%;
    aspect-ratio: 1407 / 1012;
    z-index: 2;
}

.trail-stage > .board-final-trail {
    inset: 0;
    width: 100%;
    height: 100%;
}

.board-final-trail { z-index: 1; object-fit: fill; pointer-events: none; }
.board-final-title {
    inset: auto;
    left: 50%;
    top: 42.3%;
    width: 35.2%;
    height: auto;
    z-index: 2;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    animation: reseba-title-breathe 4.8s ease-in-out infinite;
    transform-origin: 50% 50%;
    transition: transform .38s ease, filter .38s ease;
}

.board-final-geysiara {
    --guardian-facing: 1;
    position: absolute;
    left: 3.8%;
    top: 5%;
    width: 10.6%;
    height: auto;
    z-index: 5;
    object-fit: contain;
    filter: drop-shadow(0 8px 6px rgba(25, 12, 4, .42));
    animation: reseba-guardian-idle 4.8s ease-in-out infinite;
    transform-origin: 50% 100%;
}

.board-final-geysiara.pose-transition {
    animation: guardian-pose-change 1.1s ease, reseba-guardian-idle 4.8s ease-in-out 1.1s infinite;
}

.board-final-geysiara:hover {
    filter: drop-shadow(0 0 18px rgba(255, 239, 113, .95)) drop-shadow(0 8px 6px rgba(25, 12, 4, .42));
    animation: guardian-hover-glitch .72s steps(2, end) infinite;
}

.board-final-title:hover,
.board-final-title.title-celebrate:hover {
    z-index: 12;
    animation: none !important;
    transform: translate(-50%, -50%) scale(1.5);
    filter: drop-shadow(0 0 22px rgba(255, 231, 104, .88))
        drop-shadow(0 0 42px rgba(84, 255, 128, .38));
}

@keyframes guardian-hover-glitch {
    0%, 100% { transform: translateX(0) scaleX(1); }
    34% { transform: translateX(2px) scaleX(1); }
    67% { transform: translateX(-2px) scaleX(1); }
}

.board-final-title.title-celebrate {
    animation: title-celebrate 1.4s ease, reseba-title-breathe 4.8s ease-in-out 1.4s infinite;
}

@keyframes guardian-pose-change {
    0% { opacity: .25; transform: translateX(-8px) rotate(-2deg) scaleX(var(--guardian-facing)) scale(.96); }
    55% { opacity: 1; transform: translateX(5px) rotate(2deg) scaleX(var(--guardian-facing)) scale(1.05); }
    100% { transform: translateX(0) rotate(0) scaleX(var(--guardian-facing)) scale(1); }
}

@keyframes title-celebrate {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    45% { transform: translate(-50%, -50%) scale(1.3) rotate(-2deg); filter: drop-shadow(0 0 22px #ffe66a); }
    70% { transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
}

.player-base {
    position: absolute;
    left: 2.1%;
    top: 74.5%;
    width: 27.5%;
    height: 16.5%;
    z-index: 8;
    display: block;
    pointer-events: none;
}

.base-player {
    position: absolute;
    left: var(--base-x);
    top: var(--base-y);
    bottom: auto;
    width: clamp(32px, 3.8vw, 64px);
    margin: 0;
    text-align: center;
    animation: reseba-base-pet 3.2s ease-in-out infinite;
    transform-origin: 50% 100%;
    transform: translateX(-50%) scale(var(--base-scale));
}

.base-player-popular {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 5px);
    z-index: 2;
    width: max-content;
    max-width: 110px;
    padding: 2px 5px;
    border-radius: 6px 6px 2px 2px;
    background: rgba(6, 28, 18, .9);
    color: #fff;
    font-size: clamp(.44rem, .66vw, .7rem);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 1px #000;
    transform: translateX(-50%);
}

.base-player img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 4px rgba(0,0,0,.38));
}

.base-player figcaption {
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: max-content;
    max-width: 118px;
    padding: 1px 4px;
    border-radius: 5px;
    background: rgba(6, 28, 18, .84);
    color: #bfe8b3;
    font-size: clamp(.34rem, .5vw, .55rem);
    font-weight: 800;
    line-height: 1.05;
    text-shadow: 0 1px 1px #000;
    transform: translateX(-50%);
}

.base-player figcaption small {
    display: block;
    overflow: hidden;
    max-width: 112px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-player.is-current-turn {
    z-index: 12;
    filter: drop-shadow(0 0 6px #fff6a6) drop-shadow(0 0 12px #5cff80);
    animation: reseba-base-current 1.1s ease-in-out infinite;
}

.base-player.is-finished {
    filter: drop-shadow(0 0 8px #ffd95c);
}

.base-player.is-advancing {
    animation: reseba-base-advance .7s ease-in-out 4;
}

.base-player.is-aura-gain {
    animation: reseba-base-aura .65s ease-in-out 4;
}

@keyframes reseba-base-current {
    0%, 100% { transform: translateX(-50%) scale(var(--base-scale)) translateY(0); }
    50% { transform: translateX(-50%) scale(calc(var(--base-scale) * 1.08)) translateY(-6px); }
}

@keyframes reseba-base-advance {
    0%, 100% { transform: translateX(-50%) scale(var(--base-scale)) translateY(0) rotate(0); }
    50% { transform: translateX(-50%) scale(calc(var(--base-scale) * 1.16)) translateY(-11px) rotate(3deg); }
}

@keyframes reseba-base-aura {
    0%, 100% { transform: translateX(-50%) scale(var(--base-scale)); filter: drop-shadow(0 0 2px #ffe36d); }
    50% { transform: translateX(-50%) scale(calc(var(--base-scale) * 1.22)); filter: drop-shadow(0 0 13px #ffe36d) drop-shadow(0 0 22px #54ff80); }
}

.base-player:nth-child(2) { animation-delay: -.8s; }
.base-player:nth-child(3) { animation-delay: -1.6s; }
.base-player:nth-child(4) { animation-delay: -2.4s; }

@keyframes reseba-guardian-idle {
    0%, 100% { transform: translateY(0) rotate(-.35deg) scaleX(var(--guardian-facing)); }
    50% { transform: translateY(-5px) rotate(.35deg) scaleX(var(--guardian-facing)); }
}

.winner-podium {
    position: absolute;
    left: 1.2%;
    top: 57%;
    width: 16%;
    min-height: 15%;
    z-index: 7;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 2px;
    padding: 22px 5px 5px;
    border-radius: 18px 18px 7px 7px;
    background: linear-gradient(180deg, rgba(255, 224, 109, .94), rgba(121, 62, 20, .96));
    box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.32);
}

.winner-podium[hidden] { display: none; }
.winner-podium > strong {
    position: absolute;
    top: 4px;
    color: #44210b;
    font: 800 clamp(.55rem, .8vw, .8rem)/1 "Outfit", sans-serif;
}
.podium-player {
    width: 23%;
    margin: 0;
    text-align: center;
    animation: reseba-base-pet 2.8s ease-in-out infinite;
    --base-scale: 1;
}
.podium-player img { width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(0,0,0,.38)); }
.podium-player figcaption {
    overflow: hidden;
    color: #fff9d7;
    font: 800 clamp(.35rem, .46vw, .55rem)/1 "Outfit", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-player.rank-1 { width: 29%; transform: translateY(-9px); }

.first-run-tour {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}
.first-run-tour[hidden] { display: none; }
.tour-focus-ring {
    position: fixed;
    border: 3px solid #ffe66d;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(5, 20, 13, .48), 0 0 24px 6px rgba(255, 230, 109, .8);
    transition: inset .25s ease, width .25s ease, height .25s ease;
}
.tour-bubble {
    position: fixed;
    width: min(330px, calc(100vw - 24px));
    padding: 14px;
    border: 2px solid rgba(255, 229, 137, .88);
    border-radius: 16px;
    background: rgba(15, 54, 35, .96);
    box-shadow: 0 12px 32px rgba(0,0,0,.48);
    color: #fff8d2;
    pointer-events: auto;
}
.tour-bubble h2 { margin: 4px 0 6px; font-size: 1.08rem; }
.tour-bubble p { margin: 0 0 10px; font-size: .9rem; line-height: 1.35; }
.tour-bubble small { color: #ffd76a; font-weight: 800; }
.tour-actions { display: flex; justify-content: space-between; gap: 8px; }
.tour-actions .btn { min-height: 36px; }
.tour-target { position: relative; z-index: 10001 !important; }

@keyframes reseba-base-pet {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(var(--base-scale)); }
    48% { transform: translateX(-50%) translateY(-4px) scale(calc(var(--base-scale) * 1.015), calc(var(--base-scale) * .985)); }
    55% { transform: translateX(-50%) translateY(-1px) scale(calc(var(--base-scale) * .99), calc(var(--base-scale) * 1.01)); }
}

.board-route-guide { stroke: transparent; stroke-width: 2; }

.board-art-forest {
    opacity: 0.33;
}

#board-path-svg {
    z-index: 1;
}

.house-cards-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.board-center-badge {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
    display: none;
    gap: 3px;
    min-width: 170px;
    padding: 10px 16px;
    border: 2px solid #b9853e;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(32, 76, 50, .92), rgba(14, 42, 27, .92));
    box-shadow: 0 0 0 3px rgba(251, 225, 146, .28), 0 8px 22px rgba(0,0,0,.32);
    color: #fff2ba;
    text-align: center;
    text-shadow: 1px 2px 0 #122a1d;
    pointer-events: none;
}

.board-center-badge strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 2.2vw, 1.8rem);
    letter-spacing: .18em;
}

.board-center-badge span {
    color: #b7df9c;
    font-size: clamp(.52rem, .8vw, .76rem);
    font-weight: 700;
}

.house-card {
    position: absolute;
    width: 7.25%;
    height: 9.8%;
    min-height: 0;
    padding: 5px 3px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #183325;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    text-align: left;
    transform: translate(-50%, -50%);
    transform-origin: 50% 80%;
    transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.house-card:hover,
.house-card:focus-visible {
    z-index: 10;
    outline: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 241, 207, .17);
    -webkit-backdrop-filter: blur(4px) saturate(1.12);
    backdrop-filter: blur(4px) saturate(1.12);
    box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 7px 18px rgba(45,24,8,.18);
    transform: translate(-50%, -50%) scale(1.08);
}

.house-card img {
    position: absolute;
    inset: 2px auto 2px 1px;
    width: 20px;
    height: 25px;
    object-fit: contain;
    opacity: 0.78;
}

.house-number {
    position: absolute;
    top: -4px;
    left: 5px;
    display: none;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #174b32;
    font-size: 0.72rem;
    font-weight: 800;
}

.house-card img + .house-number {
    left: 7px;
}

.house-copy {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue RESEBA", "Arial Narrow", sans-serif;
    text-shadow: none;
    overflow: hidden;
}

.house-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #28140a;
    font-family: "Bebas Neue RESEBA", "Arial Narrow", sans-serif;
    font-size: clamp(0.72rem, 1.16vw, 1.18rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: .012em;
    -webkit-text-stroke: .2px #8b5a34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.house-impact-word {
    color: #7b2f16;
    font-family: "Bebas Neue RESEBA", "Arial Narrow", sans-serif;
    font-size: clamp(.42rem, .62vw, .68rem);
    line-height: .85;
    letter-spacing: .045em;
}

.house-detail-panel {
    position: absolute;
    z-index: 40;
    top: 7%;
    right: 2%;
    width: min(36%, 510px);
    max-height: 86%;
    overflow: hidden;
    color: #123d2a;
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(246,255,247,.97), rgba(218,239,225,.93));
    -webkit-backdrop-filter: blur(22px) saturate(1.45);
    backdrop-filter: blur(22px) saturate(1.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 24px 60px rgba(9,42,27,.32);
    animation: house-detail-in var(--r13-house-focus-ms, 340ms) cubic-bezier(.2,.8,.2,1) both;
}

.house-detail-panel[hidden] { display: none; }
.house-detail-panel > header { display:flex; align-items:center; gap:12px; padding:18px 20px 10px; }
.house-detail-panel h2 { flex:1; margin:0; font-size:clamp(1.25rem,2vw,2rem); }
.house-detail-panel header button { width:44px; height:44px; border:0; border-radius:50%; background:rgba(19,76,50,.14); color:#123d2a; font-size:1.8rem; cursor:pointer; }
.house-detail-body { max-height:calc(86vh - 78px); overflow:auto; padding:0 20px 22px; }
.house-detail-impact { display:inline-block; margin:0 0 8px; padding:5px 10px; border-radius:999px; color:#fff; background:#1b6a46; font-weight:900; letter-spacing:.08em; }
.house-detail-lead { margin:.2rem 0 1rem; font-size:clamp(1rem,1.35vw,1.3rem); font-weight:800; }
.house-detail-row { margin:.7rem 0; padding:.7rem .85rem; border-radius:16px; background:rgba(255,255,255,.76); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.house-detail-row h3 { margin:0 0 .25rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:#8a4b15; }
.house-detail-row p { margin:0; line-height:1.36; }
.detail-micro-id { display:inline-block; margin-right:.45rem; padding:.08rem .25rem; border-radius:999px; background:rgba(20,78,51,.12); color:#2a7652; font-size:.42rem; letter-spacing:.02em; vertical-align:middle; opacity:.82; }
.house-detail-answer { margin:.7rem 0; padding:.75rem .9rem; border-radius:16px; background:rgba(255,244,198,.65); }
.house-detail-answer summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:900; }
.house-detail-status { opacity:.72; font-size:.76rem; }
.house-question-actions { margin: .8rem 0; padding: .85rem; border-radius: 18px; background: rgba(255,255,255,.72); }
.house-question-actions h3 { margin: 0 0 .55rem; color: #8a4b15; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.house-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.house-choice { min-height: 52px; border: 2px solid rgba(27,106,70,.35); border-radius: 14px; background: linear-gradient(145deg,#2a9d68,#176343); color: #fff; font: inherit; font-weight: 900; cursor: pointer; padding: .65rem; }
.house-choice:disabled { cursor: default; opacity: .72; filter: saturate(.72); transform: none; }
.house-choice:hover, .house-choice:focus-visible { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 18px rgba(15,75,46,.25); }
.house-choice-help { background: linear-gradient(145deg,#d18a31,#a54d18); }
.house-choice-feedback { margin: .6rem 0 0; font-size: .88rem; font-weight: 800; color: #20583e; }
.house-choice-feedback.is-selected { animation: choice-feedback-in .24s ease both; }
.house-choice-consequence { margin: .45rem 0 0; font-size: .82rem; line-height: 1.28; color: #5b351d; }
@keyframes choice-feedback-in { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* A casa permanece legível e compacta; o conteúdo longo vive no Liquid Glass. */
.house-card .house-copy strong,
.house-card .house-copy small,
.house-card .house-copy .house-instruction { display: none; }
.house-card:hover .house-copy strong,
.house-card:focus-visible .house-copy strong,
.house-card:hover .house-copy small,
.house-card:focus-visible .house-copy small { display: block; }
.house-card:hover .house-copy .house-instruction,
.house-card:focus-visible .house-copy .house-instruction { display: -webkit-box; }
.house-card .house-impact-word { display: block; font-size: clamp(.56rem, .78vw, .86rem); line-height: .95; }
.house-card:hover, .house-card:focus-visible { z-index: 80; }

/* Um único painel de conteúdo evita a colisão observada entre balão e detalhe. */
body.house-detail-open #house-alert,
body.house-detail-open #house-spotlight { visibility: hidden; pointer-events: none; }

@media (max-aspect-ratio: 1.15/1) and (min-width: 769px) {
    .game-main { grid-template-columns: 1fr; overflow: auto; }
    .board-wrapper { min-height: min(76vh, 760px); aspect-ratio: 1.15 / 1; }
    .sidebar-controls { order: 2; max-height: none; }
    .player-base { left: 2.5%; top: 80%; width: 36%; height: 14%; }
    .house-detail-panel { top: 4%; right: 3%; width: min(52%, 520px); max-height: 88%; }
}

@media (max-width: 700px) {
    .house-question-actions { padding: .7rem; }
    .house-choice-grid { grid-template-columns: 1fr; }
    .house-detail-panel { z-index: 220; }
    .player-base { left: 2%; top: 79%; width: 46%; height: 15%; }
    .base-player { width: clamp(28px, 8vw, 48px); }
}
@keyframes house-detail-in { from { opacity:0; transform:translateX(30px) scale(.94); } to { opacity:1; transform:none; } }

@media (max-width: 700px) {
    html, body { overflow-x: hidden; }
    .house-detail-panel { position:fixed; z-index:120; top:auto; left:0; right:0; bottom:0; width:100%; max-height:90vh; border-radius:28px 28px 0 0; }
    .house-detail-body { max-height:calc(90vh - 78px); }
}

@media (prefers-reduced-motion: reduce) {
    .house-detail-panel, .house-card { animation:none !important; transition:none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .house-detail-panel { background:#edf7ef; }
}

.house-copy small {
    color: #674224;
    font-family: "Bebas Neue RESEBA", "Arial Narrow", sans-serif;
    font-size: clamp(0.48rem, 0.72vw, 0.76rem);
    font-weight: 400;
    text-transform: uppercase;
}

.house-instruction {
    display: -webkit-box;
    overflow: hidden;
    color: #321b0d;
    font-family: "Bebas Neue RESEBA", "Arial Narrow", sans-serif;
    font-size: clamp(0.53rem, 0.82vw, 0.84rem);
    font-weight: 400;
    line-height: .94;
    -webkit-text-stroke: .12px #8b5a34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Cada pedra recebe uma escala de texto conforme o conteúdo. As casas 7, 18 e
   37 são as referências visuais aprovadas e permanecem no tamanho-base. */
.house-fit-roomy .house-copy strong {
    font-size: clamp(.78rem, 1.26vw, 1.28rem);
}

.house-fit-roomy .house-copy small,
.house-fit-roomy .house-instruction {
    font-size: clamp(.54rem, .86vw, .88rem);
}

.house-fit-compact .house-copy strong {
    font-size: clamp(.61rem, .93vw, .96rem);
    line-height: .9;
}

.house-fit-compact .house-copy small,
.house-fit-compact .house-instruction {
    font-size: clamp(.44rem, .67vw, .69rem);
    line-height: .91;
}

.house-fit-reduced .house-copy strong {
    font-size: clamp(.52rem, .79vw, .82rem);
    line-height: .88;
}

.house-fit-reduced .house-copy small,
.house-fit-reduced .house-instruction {
    font-size: clamp(.38rem, .56vw, .59rem);
    line-height: .87;
}

.house-fit-tight .house-copy strong,
.house-fit-narrow .house-copy strong {
    font-size: clamp(.54rem, .8vw, .84rem);
    line-height: .88;
}

.house-fit-tight .house-copy small,
.house-fit-tight .house-instruction,
.house-fit-narrow .house-copy small,
.house-fit-narrow .house-instruction {
    font-size: clamp(.39rem, .57vw, .61rem);
    line-height: .88;
}

/* Casas 17–27: o texto curto precisa ficar no miolo da pedra, sem pender
   para a borda mesmo quando a palavra de impacto ocupa duas linhas. */
.house-card:is([data-house-id="17"], [data-house-id="18"], [data-house-id="19"],
    [data-house-id="20"], [data-house-id="21"], [data-house-id="22"],
    [data-house-id="23"], [data-house-id="24"], [data-house-id="25"],
    [data-house-id="26"], [data-house-id="27"]) .house-copy {
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.house-card:is([data-house-id="17"], [data-house-id="18"], [data-house-id="19"],
    [data-house-id="20"], [data-house-id="21"], [data-house-id="22"],
    [data-house-id="23"], [data-house-id="24"], [data-house-id="25"],
    [data-house-id="26"], [data-house-id="27"]) .house-impact-word {
    width: 100%;
    text-align: center;
}

.house-fit-narrow {
    width: 6.45%;
    height: 8.9%;
}

.house-card[data-house-id="15"] {
    width: 6.75%;
    height: 9.15%;
    margin-left: 1.15%;
}

.house-card[data-house-id="37"] {
    width: 6.25%;
    height: 8.2%;
}

.house-card[data-house-id="37"] .house-copy {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(78%, 24%);
}

.house-card[data-house-id="37"] .house-copy strong {
    font-size: clamp(.64rem, .86vw, .94rem);
    line-height: .9;
}

.house-card[data-house-id="37"] .house-copy small,
.house-card[data-house-id="37"] .house-instruction {
    font-size: clamp(.42rem, .55vw, .6rem);
    line-height: .88;
}

.house-card[data-house-id="38"] {
    width: 5.9%;
    height: 7.7%;
    margin-top: -1.25%;
}

.house-card:hover,
.house-card:focus-visible {
    width: 15%;
    height: 19%;
    padding: 9px 8px;
}

.house-card:hover .house-copy strong,
.house-card:focus-visible .house-copy strong {
    font-size: clamp(1rem, 1.72vw, 1.65rem);
}

.house-card:hover .house-copy small,
.house-card:focus-visible .house-copy small,
.house-card:hover .house-instruction,
.house-card:focus-visible .house-instruction {
    font-size: clamp(.74rem, 1.12vw, 1.05rem);
    -webkit-line-clamp: 4;
}

.house-bonus {
    border-color: #d6a400;
    background: linear-gradient(145deg, #fff8bd, #e8d56c);
    animation: house-idle-bonus 2.5s ease-in-out infinite;
}

.house-challenge {
    border-color: #b3382f;
    background: linear-gradient(145deg, #ffe5dd, #e8a28e);
    animation: house-idle-challenge 3s ease-in-out infinite;
}

/* A trilha PNG já contém pedras, cores e molduras. O HTML fornece somente
   texto acessível, número e interação; nunca uma segunda caixa por cima. */
.house-card.house-bonus,
.house-card.house-challenge,
.house-card.house-decision,
.house-card.house-finish,
.house-card.house-start {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* O vidro líquido é apenas interação, sem contorno, e vale para qualquer tipo
   de casa. Ele vem depois dos resets das pedras especiais para não desaparecer. */
.house-card:hover,
.house-card:focus-visible,
.house-card.house-bonus:hover,
.house-card.house-challenge:hover,
.house-card.house-decision:hover,
.house-card.house-finish:hover,
.house-card.house-start:hover {
    border: 0;
    background: rgba(255, 241, 207, .2);
    -webkit-backdrop-filter: blur(5px) saturate(1.14);
    backdrop-filter: blur(5px) saturate(1.14);
    box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 7px 18px rgba(45,24,8,.18);
}

.house-card.house-bonus .house-copy strong,
.house-card.house-bonus .house-instruction,
.house-card.house-challenge .house-copy strong,
.house-card.house-challenge .house-instruction,
.house-card.house-decision .house-copy strong,
.house-card.house-decision .house-instruction {
    color: #f5f5e6;
    -webkit-text-stroke: .42px #1e0f05;
    text-shadow: 0 1px 1px rgba(30, 15, 5, .58);
}

.house-card.house-bonus { animation: house-idle-bonus 2.8s ease-in-out infinite; }
.house-card.house-challenge { animation: house-idle-challenge 3.2s ease-in-out infinite; }

.house-start,
.house-finish {
    border-color: #f4f0cf;
    box-shadow: 0 0 0 3px #2d7e50, 0 5px 12px rgba(0, 0, 0, 0.3);
}

.house-card::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(79, 54, 24, .22);
    border-radius: 8px;
    pointer-events: none;
    display: none;
}

.house-bonus::after { border-style: dashed; border-color: #9a7600; }
.house-challenge::after { border-width: 2px; border-color: #a4332d; }
.house-decision::after { border-style: dotted; border-color: #205bb6; }
.house-finish::after { border-width: 2px; border-color: #8b5a18; box-shadow: 0 0 10px rgba(255,218,93,.7); }

.house-finish {
    background: linear-gradient(145deg, #fff4ae, #e8ad35);
    animation: house-idle-finish 2s ease-in-out infinite;
}

.house-card.is-occupied {
    animation: house-occupied-glow 2.4s ease-in-out infinite;
    box-shadow: none;
}

.house-card.is-landed[data-landing="bonus"] {
    animation: house-land-bonus 700ms ease both;
}

.house-card.is-landed[data-landing="challenge"] {
    animation: house-land-challenge 620ms ease both;
}

.house-card.is-landed:not([data-landing="bonus"]):not([data-landing="challenge"]) {
    animation: house-land-normal 560ms ease both;
}

.pawn-sprite {
    width: 104px;
    height: 126px;
    margin-left: -52px;
    margin-top: -116px;
    z-index: 7;
}

.pawn-geysiara-final {
    object-fit: contain;
    transform: translateY(5px) scale(1.28);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 5px 4px rgba(0,0,0,.38));
}

.pawn-sprite[class*="pawn-variant-"] .pawn-tree:not(.pawn-tree-special) {
    filter: hue-rotate(var(--pawn-hue, 0deg)) saturate(1.05);
}

.pawn-variant-1 { --pawn-hue: 22deg; }
.pawn-variant-2 { --pawn-hue: 46deg; }
.pawn-variant-3 { --pawn-hue: 78deg; }
.pawn-variant-4 { --pawn-hue: 110deg; }
.pawn-variant-5 { --pawn-hue: 148deg; }
.pawn-variant-6 { --pawn-hue: 188deg; }
.pawn-variant-7 { --pawn-hue: 252deg; }

.pawn-sprite.is-stacked {
    width: 68px;
    height: 82px;
    margin-left: -34px;
    margin-top: -71px;
}

.pawn-cluster {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
}

.pawn-sprite.pawn-cluster {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    font-size: 0.85rem;
}

@keyframes house-idle-bonus {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 222, 72, 0.8)); }
}

@keyframes house-idle-challenge {
    0%, 92%, 100% { transform: translate(-50%, -50%) rotate(0); }
    95% { transform: translate(-50%, -50%) rotate(-1.5deg); }
    98% { transform: translate(-50%, -50%) rotate(1.5deg); }
}

@keyframes house-idle-finish {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.35) drop-shadow(0 0 8px #fff1a1); }
}

@keyframes house-occupied-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.14) drop-shadow(0 0 7px rgba(126, 255, 157, .82)); }
}

@keyframes reseba-title-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 4px 3px rgba(25, 12, 4, .28)); }
    50% { transform: translate(-50%, -50%) scale(1.025); filter: drop-shadow(0 8px 8px rgba(255, 205, 77, .32)); }
}

.guardian-speech {
    position: absolute;
    z-index: 8;
    left: 13.5%;
    top: 8%;
    display: none;
    width: min(255px, 22%);
    padding: 10px 13px;
    border-radius: 18px 18px 18px 4px;
    background: #fff8da;
    color: #2b190e;
    border: 1px solid rgba(103, 66, 36, .2);
    box-shadow: 0 8px 22px rgba(28, 14, 6, .34);
    font-size: clamp(.68rem, 1vw, .95rem);
    font-weight: 700;
    line-height: 1.18;
    pointer-events: none;
}

.guardian-speech.is-visible {
    display: block;
    animation: guardian-speech-in 7.8s ease both;
}

.board-final-geysiara { transform-origin: 50% 92%; transition: transform .28s ease, filter .28s ease; cursor: pointer; }
.board-final-geysiara:hover, .board-final-geysiara:focus-visible { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255,231,123,.9)) drop-shadow(0 0 24px rgba(75,255,156,.45)); outline: none; }
.board-final-title { transition: transform .3s ease, filter .3s ease; }
.board-final-title:hover, .board-final-title:focus-visible { transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 22px rgba(255,214,69,.58)); z-index: 95; }

@keyframes guardian-speech-in {
    0% { opacity: 0; transform: translate(-12px, 8px) scale(.85); }
    10%, 82% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes house-land-normal {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.24); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes house-land-bonus {
    0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    50% { transform: translate(-50%, -50%) scale(1.34) rotate(2deg); filter: brightness(1.45); }
    100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@keyframes house-land-challenge {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    25% { transform: translate(-50%, -50%) translateX(-7px); }
    50% { transform: translate(-50%, -50%) translateX(7px); }
    75% { transform: translate(-50%, -50%) translateX(-4px); }
}

@media (max-width: 900px) {
    .house-card {
        width: 7.25%;
        height: 9.8%;
    }

    .house-card.house-fit-narrow {
        width: 6.45%;
        height: 8.9%;
    }

    .pawn-sprite {
        width: 92px;
        height: 112px;
        margin-left: -46px;
        margin-top: -102px;
    }

    .pawn-sprite.pawn-cluster {
        width: 44px;
        height: 44px;
        margin-left: -22px;
        margin-top: -22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .house-card {
        animation: none !important;
    }
    .board-final-geysiara,
    .base-player {
        animation: none !important;
    }
}

.youtube-music-player {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 2px;
    border: 0;
    opacity: .01;
    pointer-events: none;
}

/* R13.8 — a arte da trilha nunca pode ser esticada em telas móveis.
   O PNG canônico mede 1407×1012. As regras antigas definiam width e height
   simultaneamente em alguns breakpoints (e usavam object-fit: fill),
   achatando a trilha em retrato e em janelas quase quadradas. */
.trail-stage {
    inset: auto;
    left: 15.6%;
    top: -1%;
    width: 68.5%;
    height: auto;
    aspect-ratio: 1407 / 1012;
}

.trail-stage > .board-final-trail,
.board-final-trail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1360px), (max-aspect-ratio: 4 / 3) {
    .trail-stage {
        inset: auto;
        left: -7%;
        top: -6%;
        width: 114%;
        /* O board-37 também usa 1407:1012 neste breakpoint; usar a mesma
           escala em ambos os eixos mantém o PNG matematicamente proporcional. */
        height: 114%;
        aspect-ratio: 1407 / 1012;
    }
}

@media (max-aspect-ratio: 1.15 / 1) and (min-width: 769px) {
    .trail-stage {
        inset: auto;
        left: -11%;
        top: -10%;
        width: 122%;
        height: 122%;
        aspect-ratio: 1407 / 1012;
    }
}

/* Telefones: a composição inteira precisa caber no quadro. Não recortar nem
   ampliar além da viewport; 100% em ambos os eixos é seguro porque o board-37
   usa a mesma razão canônica 1407:1012 nesses breakpoints. */
@media (max-width: 900px) {
    .trail-stage {
        inset: auto;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: 1407 / 1012;
    }
}