/* Softer contrast and roomier live controls, without changing the embed size. */
.yearly-frame{opacity:.48}
.yearly-interior{right:5%;background:#191919;color:#dedad6}
.yearly-header{gap:14px;padding-right:4px}
.yearly-header h1{color:#d6c9ac;font-size:clamp(24px,3.3cqw,36px)}
.yearly-header nav{flex:none}.yearly-header nav button{font-size:16px;color:#cec6d8}
.yearly-header nav button[aria-pressed=true]{background:#aaa0b8;border-color:#aaa0b8;color:#211e27}
.yearly-tools{flex:none;gap:14px}.yearly-tools .pixel-icon{flex:none;display:grid;place-items:center;overflow:visible}
.yearly-tools .pixel-icon img{display:block;width:100%;height:100%;object-fit:contain}
.yearly-tools .pixel-icon[aria-pressed=true]{outline-color:#a69abb}
.yearly-body h2{color:#dedad6}
.yearly-body .eyebrow,.yearly-body .quiet{font-size:15px;color:#b8afc3}
.setup-home>div>p:not(.eyebrow){font-size:18px;color:#bdb7c3}
.setup-home .setup-choice{background:#28232e;border-color:#665e70;color:#d8d3dd}
.setup-home .setup-choice strong{color:#d6c9ac;font-size:23px}
.setup-home .setup-choice span{font-size:16px;line-height:1.4}
.setup-home-footer button{font-size:16px;color:#c6bcd4}
.period-bar h2{font-size:clamp(17px,2cqw,23px)}
.yearly-body .period-bar button,.month-badge{color:#d6c9ac}
.overview-grid .overview-month{color:#d8d3dd}
.overview-grid .current-month{border-color:#a69abb;background:#a69abb16;color:#d3c7e2}
.overview-label{font-size:clamp(13px,1.6cqw,18px)}
.overview-name{font-size:clamp(11px,1.25cqw,14px)}
.month-explanation h3{color:#d6c9ac}
.month-summary{font-size:clamp(16px,1.9cqw,21px);color:#d8d1df}
.meaning-pages ul{font-size:clamp(15px,1.8cqw,20px)}
.meaning-footer,.meaning-footer button,.month-card span,.month-badge{font-size:14px}
.yearly-shell button:focus-visible{outline-color:#b9a8ce}
dialog:not(.widget-menu) .year-draw-copy,dialog:not(.widget-menu) .year-reversals,dialog:not(.widget-menu) .storage-copy{font-size:16px}
@container(max-width:760px){.yearly-header{gap:9px}.yearly-header nav button{font-size:14px;padding:7px}.yearly-header h1{font-size:25px}.yearly-tools{gap:9px}.setup-home .setup-choice strong{font-size:20px}.setup-home .setup-choice span,.setup-home>div>p:not(.eyebrow){font-size:15px}.setup-home-footer button,.yearly-body .quiet,.yearly-body .eyebrow{font-size:13px}.setup-home .setup-choice{padding:12px;gap:8px}.setup-home .setup-choices{margin:8px 0}}
@container(max-height:440px){.setup-home{gap:3px}.setup-home .setup-choice .choice-icon{width:42px;height:42px}.setup-home .setup-choice{padding:8px}.setup-home .setup-choice strong{font-size:18px}.setup-home .setup-choice span{font-size:13px}.setup-home>div>p:not(.eyebrow){margin:6px 0}.setup-home .eyebrow{margin-bottom:5px}.setup-home .setup-choices{margin:6px 0}.overview-name{font-size:11px}.overview-label{font-size:13px}}


/* Let the shuffle circle the draw window without covering its controls. */
.year-draw:has(.year-shuffle-stage[aria-label]){position:relative;isolation:isolate;height:clamp(320px,65dvh,480px)}
.year-draw .year-shuffle-stage[aria-label]{position:absolute;inset:0;height:100%;z-index:-1;pointer-events:none}
.year-draw:has(.year-shuffle-stage[aria-label])>.back-button{position:relative;z-index:30}
.year-draw .year-shuffle-controls{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(360px,82%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 24px;background:#24202d;border:1px solid #8d819e;box-shadow:4px 4px 0 #100e16;text-align:center}
dialog .year-shuffle-controls .year-draw-copy{margin:0;color:#f1edf6;font-size:17px;line-height:1.45}
.year-shuffle-controls .year-draw-actions{margin:0}
.year-shuffle-controls .year-draw-actions button{font-size:16px}
dialog .year-shuffle-controls .storage-copy{margin:0;color:#d3cadf;font-size:14px;line-height:1.45}
.year-shuffle-stage{transform-style:flat;perspective:none}
.year-motion-card{will-change:transform;backface-visibility:hidden;z-index:auto;transition:none!important;animation:none!important}

/* User-supplied card back: preserve its colors and the existing card box. */
.supplied-back{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
#app .back img.supplied-card-art,.back img.supplied-card-art,.year-card-back img.supplied-card-art{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:fill;filter:none!important;border-radius:0;pointer-events:none}

/* Same soft printed-foil finish and hand-spread deck as Daily Tarot. */
.supplied-back::after{content:"";position:absolute;inset:4% 5%;border-radius:7% / 4%;pointer-events:none;background:linear-gradient(var(--foil-angle,125deg),transparent 12%,#a9e8ff18 28%,#f1c0ff30 39%,#ffffff65 47%,#d2fff133 53%,#fff0b221 64%,transparent 82%);background-size:230% 230%;background-position:45% 50%;opacity:.65;box-shadow:inset 0 0 0 1px #ffffff25}
.year-ready .supplied-back::after{animation:year-card-foil 8s ease-in-out infinite alternate}
.year-ready .year-start-card:nth-child(2) .supplied-back::after{animation-delay:-2.6s}
.year-ready .year-start-card:nth-child(3) .supplied-back::after{animation-delay:-5.2s}
.year-deck-card:hover .supplied-back::after,.year-deck-card:focus-visible .supplied-back::after{background-position:65% 45%;opacity:.82}
@keyframes year-card-foil{from{background-position:25% 40%;opacity:.4}to{background-position:70% 60%;opacity:.75}}
.year-deck{display:flex;gap:0;align-items:center;padding:30px 16px 26px;min-height:170px;overflow-y:hidden}
dialog .year-deck-card{position:relative;flex:0 0 68px;transform:translateY(var(--lift,0px)) rotate(var(--tilt,0deg));margin-right:var(--overlap,-35px);transition:transform .18s ease-out}
dialog .year-deck-card:last-child{margin-right:0}
dialog .year-deck-card:hover,dialog .year-deck-card:focus-visible{transform:translateY(calc(var(--lift,0px) - 8px)) rotate(var(--tilt,0deg));z-index:2}
@media(prefers-reduced-motion:reduce){.supplied-back::after{animation:none!important}dialog .year-deck-card{transition:none!important}}

/* A visible Start label matches the other widgets. */
.yearly-tools .start-button{flex:none;background:#d2cbd9;color:#24202d;border:2px solid;border-color:#eeeaf2 #645c6c #645c6c #eeeaf2;box-shadow:2px 2px 0 #100e16;padding:7px 14px;font-size:16px;line-height:1.2;white-space:nowrap}
.yearly-tools .start-button:active{border-color:#645c6c #eeeaf2 #eeeaf2 #645c6c;box-shadow:none}
@container(max-width:760px){.yearly-tools .start-button{font-size:14px;padding:7px 10px}}