/* Small chapters keep their width and get a much shorter, square silhouette. */
.chapter:not(.chapter-featured) .chapter-tab,.chapter.chosen:not(.chapter-featured) .chapter-tab{height:clamp(176px,23vw,290px);min-height:0;grid-template-rows:14px 64px 1fr;gap:7px;padding:15px 15px 22px}
.chapter:not(.chapter-featured) .chapter-art,.chapter.chosen:not(.chapter-featured) .chapter-art{height:64px;width:94px}
.chapter:not(.chapter-featured) .chapter-name b,.chapter.chosen:not(.chapter-featured) .chapter-name b{font-size:clamp(19px,2.5vw,27px);line-height:1.12}
.chapter:not(.chapter-featured) .chapter-name small{display:none}
.chapter:not(.chapter-featured) .chapter-symbol{font-size:17px;bottom:7px;right:12px}
/* Match the wide photo window; keep definitions inside this same footprint. */
.chapter-stack{--wide-chapter-height:212px}
.chapter-featured .chapter-tab,.chapter-featured.chosen .chapter-tab{height:var(--wide-chapter-height);min-height:var(--wide-chapter-height)}
.word-magic-card{grid-column:1/-1;position:relative;display:grid;grid-template-rows:minmax(0,1fr);border-radius:25px;padding:18px 22px;background:radial-gradient(ellipse at 90% 10%,#f5d78b77,transparent 65%),#eee4cd;color:#73586b;overflow:hidden;min-width:0;border:1px solid #dacbab;height:calc(var(--wide-chapter-height) + 2px)}
.magic-list{display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;height:100%;min-width:0;min-height:0}
.magic-heading{margin:0;font-family:inherit;font-weight:inherit;text-align:left;text-transform:none}
.magic-jump{display:flex;flex-direction:column;align-self:center;align-items:center;gap:2px;min-width:0;min-height:0}
.magic-content{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;column-gap:15px;height:100%;min-height:0}
.magic-words{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));height:min(100%,130px);align-self:center;min-width:0;min-height:0}
.magic-word{display:flex;align-items:center;padding:0 5px 0 0;min-width:0;min-height:0;width:100%;border:0;background:transparent;border-radius:0;text-align:left;color:#735568}
.word-magic-card .magic-word{min-height:0!important}
.magic-word span{display:block;max-width:100%;font:18px/1.1 Georgia,serif;overflow-wrap:anywhere;min-width:0}
.magic-word:hover span{text-decoration:underline;text-decoration-color:#bc7fa5;text-underline-offset:4px}
.magic-word:focus-visible,.magic-spring:focus-visible,.magic-back:focus-visible{outline:2px solid #a77493;outline-offset:2px;border-radius:5px}
.magic-spring{align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;padding:0;border:0;background:transparent;color:#88627b;min-height:0;border-radius:15px}
.magic-spring svg{width:140px;max-width:100%;height:130px;display:block;overflow:visible}
.magic-spring>span{font:11px/1.3 Georgia,serif;text-align:center;white-space:normal}
.spring-coil{transform-origin:70px 105px}.spring-cap{transform-origin:70px 105px}
.magic-spring:active .spring-coil{transform:scaleY(.65)}.magic-spring:active .spring-cap{transform:translateY(25px)}
.magic-spring:disabled{opacity:.55;cursor:wait}
.magic-drawn .spring-coil{animation:spring-release .65s ease-out}.magic-drawn .spring-cap{animation:cap-release .65s ease-out}
.magic-drawn .magic-word{animation:word-appear .35s ease-out both}.magic-drawn .magic-word:nth-child(2n){animation-delay:.06s}
.magic-placeholder{height:11px;width:65%;align-self:center;background:#cbb5a644;border-radius:8px}
.magic-error{position:absolute;bottom:5px;left:20px;right:20px;font-size:9px;line-height:1.15;text-align:center;color:#895071}
.magic-meaning{grid-column:1/-1;display:flex;flex-direction:column;height:100%;min-height:0;gap:5px}
.magic-back{align-self:flex-start;padding:0;min-height:22px;background:transparent;border:0;color:#87637c;font-size:11px}
.word-magic-card .magic-back{min-height:22px!important}
.magic-meaning h2{font:24px/1.1 Georgia,serif;margin:0;overflow-wrap:anywhere;flex:none}
.magic-definition{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:5px}
.magic-definition p{font:15px/1.4 Georgia,serif;margin:0 0 8px}.magic-definition i{font-size:11px;color:#98778c}
.magic-meaning>small{font-size:8px;line-height:1.3;color:#957b83;flex:none}.magic-meaning a{color:inherit;text-underline-offset:2px}
@keyframes word-appear{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes spring-release{0%{transform:scaleY(.65)}35%{transform:scaleY(1.15)}60%{transform:scaleY(.9)}100%{transform:none}}
@keyframes cap-release{0%{transform:translateY(25px)}35%{transform:translateY(-10px)}60%{transform:translateY(6px)}100%{transform:none}}
@media(max-width:700px){.chapter-stack{--wide-chapter-height:180px}.chapter:not(.chapter-featured) .chapter-tab,.chapter.chosen:not(.chapter-featured) .chapter-tab{height:183px;grid-template-rows:12px 57px 1fr;padding:13px 12px 21px;gap:6px}.chapter:not(.chapter-featured) .chapter-art,.chapter.chosen:not(.chapter-featured) .chapter-art{height:57px;width:82px}.chapter:not(.chapter-featured) .chapter-name b,.chapter.chosen:not(.chapter-featured) .chapter-name b{font-size:20px}.word-magic-card{padding:12px 18px}.magic-words{height:min(100%,110px)}.magic-content{grid-template-columns:minmax(0,1fr) 125px;column-gap:12px}.magic-word span{font-size:16px}.magic-spring svg{height:109px;width:118px}.magic-spring>span{font-size:10px}.magic-meaning h2{font-size:22px}.magic-definition p{font-size:14px}}
@media(max-width:360px){.chapter-stack{--wide-chapter-height:172px}.chapter:not(.chapter-featured) .chapter-tab,.chapter.chosen:not(.chapter-featured) .chapter-tab{height:172px;grid-template-rows:11px 52px 1fr;padding:12px 10px 19px;gap:6px}.chapter:not(.chapter-featured) .chapter-art,.chapter.chosen:not(.chapter-featured) .chapter-art{height:52px;width:76px}.chapter:not(.chapter-featured) .chapter-name b,.chapter.chosen:not(.chapter-featured) .chapter-name b{font-size:18px}.word-magic-card{padding:12px 16px}.magic-words{height:min(100%,105px)}.magic-content{grid-template-columns:minmax(0,1fr) 105px;column-gap:9px}.magic-word span{font-size:15px}.magic-spring svg{height:100px;width:105px}.magic-spring>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.magic-drawn .magic-word,.magic-drawn .spring-coil,.magic-drawn .spring-cap{animation:none}.magic-spring:active .spring-coil,.magic-spring:active .spring-cap{transform:none}}
