/* One short visual example sits above the introduction's existing copy. */
.stage-combat .encounter-rule{bottom:auto;top:calc((100dvh - var(--ad-space)) * .65);width:min(370px,calc(100vw - 28px));transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px 10px;background:radial-gradient(ellipse,#09110ce8 15%,#09110c88 58%,transparent 77%)}
.stage-combat .intro-rule .encounter-rule{animation:lesson-arrives .45s ease both}
.encounter-rule .enemy-lesson{display:block;width:min(288px,100%);height:auto;aspect-ratio:192/66;padding:0;margin:0 0 2px;border:0;box-shadow:none;background:none;cursor:pointer;touch-action:manipulation}
.enemy-lesson canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.enemy-lesson:focus-visible{outline:1px solid #c9b27a;outline-offset:3px;border-radius:3px}
.stage-combat .encounter-rule>span{font-size:22px;line-height:1.2}
.stage-combat .encounter-rule p{font-size:14px;line-height:1.4;margin:0;max-width:310px}
.stage-combat .encounter-rule .intro-ready{min-height:40px;padding:11px 16px;margin:3px 0 0;font-size:10px;letter-spacing:1.5px}
@keyframes lesson-arrives{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}

/* The permanent combat hint is gone. Gold and time share a clear, taller row. */
.stage-combat .combat .combat-foot{grid-template-rows:29px var(--board-height) 32px auto}
.stage-combat .combat .turn-clock{grid-row:3;align-self:center;height:24px;font-size:6px;max-width:calc(100% - 164px)}
.stage-combat .combat .turn-clock b{font-size:16px}
.stage-combat .combat .combat-controls{grid-row:4}
.stage-combat .combat .rune-board-controls .combat-purse{bottom:-27px}
.stage-combat .combat .combat-purse b{font-size:11px}
@media(max-height:650px){
 .stage-combat .combat .combat-foot{grid-template-rows:25px var(--board-height) 30px auto}
 .stage-combat .combat .turn-clock{font-size:5px}
 .stage-combat .combat .rune-board-controls .combat-purse{bottom:-26px}
 .stage-combat .encounter-rule>span{font-size:20px}
 .encounter-rule .enemy-lesson{width:264px;max-width:100%}
 .stage-combat .encounter-rule p{font-size:13px}
}
@media(orientation:landscape) and (max-height:500px){
 .stage-combat .encounter-rule{left:69%;top:calc((100dvh - var(--ad-space)) * .54);width:min(340px,53vw);gap:4px}
 .encounter-rule .enemy-lesson{width:240px}
 .stage-combat .encounter-rule>span{font-size:18px}
 .stage-combat .encounter-rule .intro-ready{min-height:34px;padding:8px 14px}
 .stage-combat .combat .combat-foot{display:contents}
 .stage-combat .combat .turn-clock{grid-row:2;max-width:100%}
 .stage-combat .combat .combat-controls{grid-row:3/5}
 .stage-combat .combat .rune-board-controls .combat-purse{bottom:-20px}
}
@media(prefers-reduced-motion:reduce){.stage-combat .intro-rule .encounter-rule{animation:none}}