/* v3 (2026-10-26): one SVG per picture (js/fraction-visuals-v2.js). No bitmap
   crops or overlay grids, so nothing can drift out of alignment. */
.fraction-art{position:relative;width:min(100%,340px);max-width:100%;margin:8px auto;display:block}
.fraction-art .fraction-svg{display:block;width:100%;height:auto;max-height:170px;filter:drop-shadow(0 3px 5px rgba(40,77,116,.10))}
.question .fraction-art .fraction-svg{max-height:160px}
.fraction-art-interactive .fraction-part{cursor:pointer;-webkit-tap-highlight-color:transparent;transform-box:fill-box;transform-origin:50% 50%}
/* Lorek animation (2026-10-26): CSS beats the SVG presentation attributes, so the
   drawing is made once and only .selected toggles. Fill fades like paint, the part
   pops, the tick springs in, and a soft ring pulses from the part's outline. */
.fraction-art-interactive .fraction-face{fill:var(--off);stroke:#8b7a63;stroke-width:1.6px;transition:fill .32s ease,stroke .32s ease,stroke-width .2s ease}
.fraction-art-interactive .selected .fraction-face{fill:var(--on);stroke:var(--edge);stroke-width:2.4px}
.fraction-art-interactive .fp-side{fill:var(--off-side);transition:fill .32s ease}
.fraction-art-interactive .selected .fp-side{fill:var(--on-side)}
.fraction-art-interactive .fp-lip{fill:var(--off-lip);transition:fill .32s ease}
.fraction-art-interactive .selected .fp-lip{fill:var(--on-lip)}
.fraction-art-interactive .fraction-band{fill:var(--off-side);transition:fill .32s ease}
.fraction-art-interactive .fraction-band.selected{fill:var(--on-side)}
.fraction-art-interactive .fp-deco{stroke:#e9e0cf;transition:stroke .32s ease}
.fraction-art-interactive .selected .fp-deco{stroke:var(--deco-on)}
.fraction-art-interactive .fraction-tick{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0) rotate(-40deg);opacity:0;transition:transform .38s cubic-bezier(.2,1.7,.4,1),opacity .14s ease}
.fraction-art-interactive .selected .fraction-tick{transform:scale(1) rotate(0);opacity:1}
.fraction-art-interactive .fraction-part.fp-pop{animation:fpPop .42s cubic-bezier(.2,1.5,.4,1)}
.fraction-art-interactive .fraction-part.fp-unpop{animation:fpUnpop .26s ease-out}
.fraction-art-interactive .fraction-part.fp-pop .fraction-face{animation:fpRing .55s ease-out}
.fraction-art-interactive .fraction-part:active .fraction-face{filter:brightness(.95)}
@keyframes fpPop{0%{transform:scale(1)}35%{transform:scale(1.07) translateY(-3px)}100%{transform:scale(1)}}
@keyframes fpUnpop{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes fpRing{0%{filter:drop-shadow(0 0 0 rgba(255,214,90,.0))}30%{filter:drop-shadow(0 0 7px rgba(255,214,90,.95))}100%{filter:drop-shadow(0 0 0 rgba(255,214,90,0))}}
@media (prefers-reduced-motion:reduce){.fraction-art-interactive .fraction-part,.fraction-art-interactive .fraction-part *{animation:none!important;transition:none!important}}
/* Accessible buttons stay in the DOM (keyboard + screen reader) but the picture is the touch target. */
.fraction-piece-buttons{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fraction-piece-buttons:focus-within{position:static;width:auto;height:auto;clip:auto;clip-path:none;display:flex;gap:6px;justify-content:center;margin:4px auto}
.d1-fraction-answer{color:#173456}
.d1-fraction-answer p{margin:7px auto;line-height:1.35}
.d1-fraction-answer>p:first-child{font-size:14px;margin:2px auto 4px;line-height:1.25}
.d1-fraction-answer>p:first-child strong{display:block}
.d1-fraction-answer>small{display:block;font-size:11px;line-height:1.25;margin:0 auto 4px;color:#536b84}
.d1-fraction-answer .fraction-art-interactive{width:min(100%,320px);margin:2px auto 4px}
.d1-fraction-answer .fraction-art-interactive .fraction-svg{max-height:150px}
.d1-fraction-answer>p[aria-live]{font-size:12px;margin:3px auto}
.d1-fraction-answer .ans{min-height:44px;padding:9px 18px;border:2px solid #e5b943;border-radius:12px;background:#fff8e8;color:#173456;font-weight:800;cursor:pointer}


/* The mobile Segel card is narrower than the normal battle question card.
   Keep picture prompts inside it even when source artwork has a loose canvas. */
#segelQuestion,#segelQuestion .segelPrompt{min-width:0;max-width:100%}
#segelQuestion{overflow-x:hidden}
#segelQuestion .fraction-art{width:min(100%,320px);max-width:100%;margin:4px auto}
#segelQuestion .fraction-art .fraction-svg{max-height:142px}
#segelQuestion.hasFractionVisual{overflow-y:auto}
#segelQuestion.hasFractionVisual .segelPrompt{display:block}

/* Lorek questions repeat the instruction inside the touch panel. Reclaim the
   question slot so the picture, equal parts, status and Semak stay visible on
   short phones instead of creating a second scroll area. */
.segelCard:has(#segelAnswers .d1-fraction-answer) .question{display:none}
.segelCard:has(#segelAnswers .d1-fraction-answer) .answers{min-height:0;overflow:hidden;display:block}
.segelCard:has(#segelAnswers .d1-fraction-answer) .d1-fraction-answer{max-width:100%;padding:0 4px}
.segelCard:has(#segelAnswers .d1-fraction-answer) .d1-fraction-answer .fraction-art-interactive{width:min(100%,300px)}
.segelCard:has(#segelAnswers .d1-fraction-answer) .d1-fraction-answer .fraction-art-interactive .fraction-svg{max-height:140px}
.segelCard:has(#segelQuestion.hasFractionVisual) .question{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto}
@media(max-height:680px){
  .segelCard:has(#segelQuestion.hasFractionVisual) .question{flex:1 0 auto;min-height:96px;overflow-y:visible}
}

@media (orientation:portrait) and (max-height:600px){#segelQuestion .fraction-art .fraction-svg,.d1-fraction-answer .fraction-art-interactive .fraction-svg{max-height:104px}}