.trophy-case{background:radial-gradient(ellipse at top,#59432455,transparent 70%),var(--card,#14223a)}
.warmup-player{width:100%;aspect-ratio:16/9;display:grid;place-items:center;background:#060d19;border-radius:14px;overflow:hidden;margin:16px 0}.warmup-player iframe{width:100%;height:100%;border:0}.warmup-step{display:flex;align-items:flex-start;gap:12px;padding:12px;border-bottom:1px solid #8393a544}.warmup-step input{width:24px;height:24px;flex-shrink:0}.warmup-step span{white-space:pre-wrap;overflow-wrap:anywhere}
#pocket-page-navigation{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;justify-content:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#0b1525f5;border-top:1px solid #8b9ab066;box-shadow:0 -4px 20px #0005;backdrop-filter:blur(12px)}
#pocket-page-navigation button{min-height:46px;flex:1;max-width:210px;font-weight:700;font-size:16px;white-space:nowrap}
#pocket-page-navigation button:disabled{opacity:.4;cursor:default}
#app-shell main{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
@media print{#pocket-page-navigation{display:none!important}}
.trophy-slot[data-trophy-category]{cursor:pointer;color:inherit;font:inherit;width:100%}.trophy-slot[data-trophy-category]:hover{border-color:#ffe4a0;background:#3a302e}.trophy-slot[data-trophy-category]:focus-visible{outline:3px solid #ffe4a0;outline-offset:4px}.trophy-slot .trophy-open{display:block;margin-top:12px;color:#ffe4a0;font-size:.9rem}
.trophy-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin:24px 0}
.trophy-slot{text-align:center;padding:20px 10px;border:1px solid #b78a3c66;border-bottom:6px solid #a77b31;border-radius:16px;background:#07101f77}
.trophy-slot h3{font-size:1.1rem;margin:14px 0 8px}.trophy-slot p{font-size:.85rem}.trophy-slot.unearned{border-color:#73809455}
.trophy-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:124px;flex-shrink:0;clip-path:polygon(50% 0,95% 17%,95% 70%,75% 88%,50% 100%,25% 88%,5% 70%,5% 17%);background:linear-gradient(135deg,#fff0af,#dba840 45%,#8d5c11);color:#382303;text-shadow:0 1px #fff9;filter:drop-shadow(0 4px 8px #0008)}
.trophy-badge b{font-size:26px;line-height:1.4}.trophy-badge small{font-size:9px;font-weight:800;letter-spacing:1px}.trophy-badge.locked{background:linear-gradient(135deg,#6f7d91,#334052);color:#d4deeb;text-shadow:none}
.earned-trophy{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #94a3b844;break-inside:avoid}.earned-trophy h3{margin:0 0 8px}.earned-trophy p{margin:5px 0;overflow-wrap:anywhere}.earned-trophy .trophy-badge{width:86px;height:100px}.earned-trophy .trophy-badge b{font-size:21px}.earned-trophy .trophy-badge small{font-size:7px}.night-trophies{padding:18px 0}.night-trophies .earned-trophy{color:inherit}.trophy-awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
@media(max-width:420px){.trophy-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trophy-slot{padding:14px 6px}.earned-trophy{gap:12px}}

/* Milestone colors are shared with the exported JPEG shields. */
.trophy-badge:not(.locked){background:linear-gradient(135deg,var(--badge-light),var(--badge-accent) 65%,var(--badge-light));color:var(--badge-ink);text-shadow:0 1px #ffffff70}
.achievement-celebration{bottom:calc(88px + env(safe-area-inset-bottom));width:min(420px,calc(100vw - 32px));border:1px solid #ffe49d;background:linear-gradient(125deg,#142c48f5,#352040fa);padding:23px 18px;box-shadow:0 0 35px #c080ff44,0 16px 45px #0009}
.achievement-celebration>strong{color:#ffe49d;font-size:clamp(23px,6vw,34px);line-height:1.15}
.achievement-celebration>span{color:#edf5ff;font-size:12px;letter-spacing:.4px;line-height:1.55}
.celebration-badges{display:flex;justify-content:center;gap:14px;margin-top:13px;position:relative}
.celebration-badges .trophy-badge{width:65px;height:74px}.celebration-badges .trophy-badge b{font-size:17px}.celebration-badges .trophy-badge small{font-size:5px;letter-spacing:.4px}
@media(prefers-reduced-motion:no-preference){.achievement-celebration{animation:celebration-banner 3.4s ease both}.celebration-badges .trophy-badge{animation:badge-arrival .5s ease-out both}.celebration-badges .trophy-badge:nth-child(2){animation-delay:.1s}.celebration-badges .trophy-badge:nth-child(3){animation-delay:.2s}}
@keyframes badge-arrival{from{opacity:0;transform:translateY(12px) scale(.65) rotate(-8deg)}to{opacity:1;transform:none}}

/* One finite entrance. The playing class is absent when animations are off. */
.title-spotlights{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.45}
.title-spotlights i{position:absolute;top:-80px;left:4%;width:48%;height:760px;background:linear-gradient(180deg,#67eaff22,transparent);clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);transform-origin:50% 0;transform:rotate(-24deg)}
.title-spotlights i+i{left:48%;background:linear-gradient(180deg,#ff5d9b22,transparent);transform:rotate(24deg)}
.title-content{position:relative;z-index:1}
#title-screen .title-bowling{width:min(100%,580px)}
#title-screen .title-eyebrow{display:inline-block;border:1px solid #90e8ff55;border-radius:99px;padding:9px 16px;background:#10283b99;letter-spacing:3px}
@media(prefers-reduced-motion:no-preference){
 .playing-strike .title-spotlights i{animation:entrance-spotlight 3.8s ease-out both}
 .playing-strike .title-spotlights i+i{animation-name:entrance-spotlight-right}
 .playing-strike .title-pocket{animation:title-letter-arrival .8s cubic-bezier(.2,.8,.3,1) both}
 .playing-strike .title-lanes-word{animation:title-letter-arrival .8s .14s cubic-bezier(.2,.8,.3,1) both}
 .playing-strike #enter-app{animation:entrance-button-glow 4.8s ease both}
}
@keyframes entrance-spotlight{0%{transform:rotate(-55deg);opacity:0}30%{opacity:1}65%{transform:rotate(18deg)}100%{transform:rotate(-24deg);opacity:.5}}
@keyframes entrance-spotlight-right{0%{transform:rotate(55deg);opacity:0}30%{opacity:1}65%{transform:rotate(-18deg)}100%{transform:rotate(24deg);opacity:.5}}
@keyframes title-letter-arrival{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes entrance-button-glow{0%,100%{filter:none}53%,74%{filter:drop-shadow(0 0 14px #ff4a89aa)}}
@media(max-width:650px){#title-screen .title-bowling{max-width:400px}#title-screen .title-eyebrow{letter-spacing:1.5px;font-size:10px}.title-spotlights i{height:620px}}
@media(max-height:700px){#title-screen .title-bowling{max-width:310px}}
@media(prefers-reduced-motion:reduce){#title-screen *, .achievement-celebration *{animation:none!important;transition:none!important}.title-spotlights{opacity:.2}}

/* Large scores and tier colors stay legible at phone sharing size. */
.recap-paper .recap-brand{font-size:13px;padding:20px 18px;border:0;border-left:5px solid #f74a82;background:#101b35;color:#e7f5ff;letter-spacing:1.2px;border-radius:6px}
.recap-paper[data-recap-theme=clean] .recap-brand{background:#edf3fa;color:#142740}
.recap-paper>h2{font-size:clamp(26px,5vw,38px);line-height:1.15;overflow-wrap:anywhere}
.recap-paper .recap-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;background:transparent;gap:10px;margin:22px 0}
.recap-paper .recap-summary>span{padding:15px 12px;background:#ffe6ef;color:#9f174b;border-top:4px solid #cf3568;font-size:12px;text-transform:uppercase;font-weight:800;border-radius:6px}
.recap-paper .recap-summary>span:nth-child(2){background:#e0f6fc;color:#075f75;border-color:#2daac3}
.recap-paper .recap-summary>span:nth-child(3){background:#fff1cc;color:#7b4b00;border-color:#d7a442}
.recap-paper .recap-summary b{font-size:clamp(24px,5vw,46px);line-height:1.25;font-variant-numeric:tabular-nums;margin-top:8px}
.recap-paper .recap-game>.stat-heading{padding:14px 16px;background:#101b35;color:white;border-radius:7px;align-items:center}
.recap-paper .recap-game>.stat-heading h3{font-size:17px;margin:0}
.recap-paper .recap-game>.stat-heading .game-score,.recap-paper .recap-game>.stat-heading .score-200{font-size:clamp(30px,7vw,52px);font-weight:900!important;line-height:1;color:white}
.recap-paper .recap-game>.stat-heading .score-200{color:#ffd677!important;text-decoration:none}
.recap-paper .earned-trophy{border:1px solid #d5dfeb;border-radius:10px;padding:14px;background:#f4f7fc;color:#142740}
.recap-paper .night-trophies>h3{font-size:22px}
@media(max-width:420px){.recap-paper .recap-summary{gap:6px}.recap-paper .recap-summary>span{padding:11px 7px;font-size:10px}.recap-paper .recap-brand{font-size:10px;padding:16px 12px}.recap-paper .trophy-awards{grid-template-columns:minmax(0,1fr)}}
@media print{.title-spotlights,.achievement-celebration{display:none!important}.recap-paper{-webkit-print-color-adjust:exact;print-color-adjust:exact}.recap-paper .recap-game>.stat-heading .score-200{color:#ffd677!important}}

/* The expanded collection stays grouped and readable on phones. */
.trophy-group{margin-top:28px;padding-top:18px;border-top:1px solid #8096b64a}.trophy-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.trophy-group-heading h2{margin:0;font-size:22px}.trophy-group-heading>span{font-size:12px;color:#c6d7ee}.trophy-rules{margin:20px 0}.trophy-rules p{line-height:1.65}.trophy-badge b{font-size:22px}.earned-trophy .trophy-badge b{font-size:18px}.celebration-badges .trophy-badge b{font-size:13px}.trophy-slot h3{overflow-wrap:anywhere}.trophy-slot p{line-height:1.5}#trophy-more{margin-top:18px;min-height:46px}

/* Individual vector emblems: transparent silhouettes, shared with JPEG recaps. */
.trophy-badge.trophy-art{clip-path:none;background:none;color:inherit;text-shadow:none;width:132px;height:132px;filter:drop-shadow(0 5px 3px #0006)}
.trophy-art svg{display:block;width:100%;height:100%;overflow:visible}
.trophy-badge.trophy-art.locked{background:none;filter:grayscale(.85);opacity:.48}
.earned-trophy .trophy-art{width:90px;height:90px}
.celebration-badges .trophy-art{width:76px;height:76px}
@media(max-width:420px){.trophy-badge.trophy-art{width:112px;height:112px}.earned-trophy .trophy-art{width:80px;height:80px}.celebration-badges .trophy-art{width:70px;height:70px}}

.trophy-tile{display:flex;flex-direction:column;gap:9px;min-width:0}.trophy-tile>.trophy-slot{flex:1}.trophy-preview{min-height:44px;padding:10px 8px;border:1px solid #d4b66b;background:#142632;color:#ffe4a0;font:inherit;font-size:.85rem;border-radius:10px;cursor:pointer}.trophy-preview:hover{background:#293d48}.trophy-preview:focus-visible{outline:3px solid #ffe4a0;outline-offset:3px}
/* Trophy-specific finite scenes. Reduced motion keeps a readable static tableau. */
.trophy-performance{flex:1;min-width:0;max-width:160px;color:var(--motion-light)}
.trophy-scene{height:72px;position:relative;display:flex;justify-content:center;align-items:center;gap:3px;overflow:hidden}
.trophy-scene i{display:block;font:800 16px/1 Arial,sans-serif;color:var(--motion-light);font-style:normal;position:relative;min-width:8px}
.motion-pin{display:block;margin:auto;width:7px;height:18px;border-radius:50% 50% 35% 35%;background:linear-gradient(#fff 30%,#ef5478 31% 45%,#fff 46%);box-shadow:0 -5px 0 -1px #fff}
.motion-split .trophy-scene i{position:absolute;left:calc(50% + var(--px));top:calc(6px + var(--py));font-size:9px;transform:translateX(-50%)}
.motion-perfect .trophy-scene i{position:absolute;left:calc(50% - 6px);top:28px;transform:rotate(var(--angle)) translateY(-25px);font-size:12px}
.motion-front .trophy-scene,.motion-spare .trophy-scene{gap:2px}.motion-front .trophy-scene i,.motion-spare .trophy-scene i{font-size:12px}
.motion-stairs .trophy-scene i,.motion-one-step .trophy-scene i{padding:8px 4px;background:var(--motion-accent);color:#102632;transform:translateY(calc(18px - var(--i)*16px))}
.motion-match .trophy-scene i,.motion-club .trophy-scene i{border:1px solid var(--motion-accent);padding:7px 4px}
.motion-clean .trophy-scene i{border-bottom:2px solid var(--motion-accent);padding:6px}
.motion-odometer .trophy-scene i{font-size:13px}.motion-odometer .trophy-scene i:last-child{font-size:20px}
@media(prefers-reduced-motion:no-preference){
.trophy-performance .trophy-scene i{animation-duration:var(--motion-speed);animation-delay:var(--delay);animation-fill-mode:both;animation-timing-function:ease-out}
.motion-cup .trophy-scene i{animation-name:motion-crown}.motion-cup .trophy-art{animation:motion-lift 1.2s both}
.motion-perfect .trophy-scene i{animation-name:motion-orbit;animation-duration:2.6s}.motion-perfect .trophy-art{animation:motion-glory 2.7s both}
.motion-medal .trophy-scene i{animation-name:motion-medal}.motion-medal .trophy-art{animation:motion-swing 1.4s both}
.motion-split .trophy-scene i{animation-name:motion-scatter;animation-duration:2.6s}
.motion-break .trophy-scene i{animation-name:motion-break}
.motion-collect .trophy-scene i{animation-name:motion-collect}
.motion-turkey .trophy-scene i{animation-name:motion-peck}.motion-turkey .trophy-art{animation:motion-waddle 1.8s both}
.motion-strike .trophy-scene i{animation-name:motion-strike}
.motion-front .trophy-scene i{animation-name:motion-front}
.motion-finish .trophy-scene i{animation-name:motion-finish}
.motion-close .trophy-scene i{animation-name:motion-close}
.motion-clean .trophy-scene i{animation-name:motion-wipe}
.motion-spare .trophy-scene i{animation-name:motion-slash}
.motion-target .trophy-scene i{animation-name:motion-target}
.motion-left-pin .trophy-scene i{animation-name:motion-left}
.motion-right-pin .trophy-scene i{animation-name:motion-right}
.motion-streak .trophy-scene i{animation-name:motion-link}
.motion-stairs .trophy-scene i{animation-name:motion-step}
.motion-one-step .trophy-scene i{animation-name:motion-one}
.motion-match .trophy-scene i{animation-name:motion-match}
.motion-alternate .trophy-scene i{animation-name:motion-flip}
.motion-rise .trophy-scene i{animation-name:motion-rise}
.motion-balance .trophy-scene i{animation-name:motion-balance}
.motion-average .trophy-scene i{animation-name:motion-average}
.motion-launch .trophy-scene i{animation-name:motion-launch}
.motion-rebound .trophy-scene i{animation-name:motion-rebound}
.motion-club .trophy-scene i{animation-name:motion-stamp}
.motion-odometer .trophy-scene i{animation-name:motion-roll}
}
@keyframes motion-crown{0%{opacity:0;transform:translateY(-45px) rotate(-90deg)}70%{transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes motion-lift{from{transform:translateY(30px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-orbit{0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.1)}45%,100%{opacity:1;transform:rotate(calc(var(--angle) + 360deg)) translateY(-25px)}}
@keyframes motion-glory{0%{filter:brightness(1);transform:scale(.6)}45%{filter:brightness(1.7);transform:scale(1.15)}100%{filter:brightness(1);transform:none}}
@keyframes motion-medal{from{transform:translateY(-40px) rotateY(180deg);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-swing{0%{transform:rotate(-25deg)}40%{transform:rotate(15deg)}75%{transform:rotate(-7deg)}100%{transform:none}}
@keyframes motion-scatter{0%,25%{opacity:1;transform:translateX(-50%)}70%,100%{opacity:0;transform:translate(var(--dx),35px) rotate(100deg)}}
@keyframes motion-break{0%{transform:scale(0)}45%{transform:scale(1.4)}100%{transform:translateX(calc(var(--i)*12px - 12px))}}
@keyframes motion-collect{from{transform:translate(calc(var(--i)*45px - 45px),-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-peck{0%{transform:translateY(-25px);opacity:0}40%{transform:translateY(8px) rotate(15deg)}70%{transform:translateY(-6px)}100%{transform:none;opacity:1}}
@keyframes motion-waddle{0%,100%{transform:none}25%{transform:rotate(-12deg) translateX(-5px)}50%{transform:rotate(12deg) translateX(5px)}75%{transform:rotate(-6deg)}}
@keyframes motion-strike{from{transform:translateX(-60px) scale(2);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-front{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes motion-finish{0%{transform:translateX(-70px);opacity:0}65%{transform:translateX(8px) skewX(-15deg)}100%{transform:none;opacity:1}}
@keyframes motion-close{0%{transform:rotateX(90deg) scale(.3);opacity:0}70%{transform:scale(1.4)}100%{transform:none;opacity:1}}
@keyframes motion-wipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}to{clip-path:inset(0);transform:none}}
@keyframes motion-slash{from{transform:translate(-10px,20px);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-target{from{transform:scale(2.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes motion-left{from{transform:translateX(75px) rotate(90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-right{from{transform:translateX(-75px) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-link{from{transform:translateX(calc(var(--i)*-25px + 25px)) scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-step{from{transform:translateY(45px);opacity:0}to{transform:translateY(calc(18px - var(--i)*16px));opacity:1}}
@keyframes motion-one{0%{transform:translateY(35px);opacity:0}50%{transform:translateY(calc(30px - var(--i)*16px))}100%{transform:translateY(calc(18px - var(--i)*16px));opacity:1}}
@keyframes motion-match{from{transform:translateY(calc(var(--i)*30px - 30px));opacity:0}to{transform:none;opacity:1}}
@keyframes motion-flip{from{transform:rotateY(180deg);opacity:0}to{transform:rotateY(0);opacity:1}}
@keyframes motion-rise{from{transform:translate(-20px,30px);opacity:0}to{transform:translateY(calc(12px - var(--i)*12px));opacity:1}}
@keyframes motion-balance{0%{transform:translateY(calc(var(--i)*24px - 24px))}45%{transform:translateY(calc(var(--i)*-12px + 12px))}100%{transform:none}}
@keyframes motion-average{from{transform:translateY(35px);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-launch{0%{transform:translateY(60px) scale(.4);opacity:0}70%{transform:translateY(-10px) scale(1.2)}100%{transform:none;opacity:1}}
@keyframes motion-rebound{0%{transform:translate(-30px,-20px);opacity:0}40%{transform:translate(-15px,25px) scale(.7)}100%{transform:none;opacity:1}}
@keyframes motion-stamp{from{transform:scale(2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes motion-roll{from{transform:translateY(50px) rotateX(90deg);opacity:0}to{transform:none;opacity:1}}

/* Keep all five page controls visible with comfortable phone tap targets. */
#pocket-page-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,150px));gap:8px}
#pocket-page-navigation button{max-width:none;min-width:0}
@media(max-width:600px){
 #pocket-page-navigation{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
 #pocket-page-navigation button{grid-column:span 2;font-size:14px;padding:8px 5px;min-height:44px}
 #pocket-page-navigation #pocket-page-top,#pocket-page-navigation #pocket-page-bottom{grid-column:span 3}
 #app-shell main{padding-bottom:calc(152px + env(safe-area-inset-bottom))}
 .achievement-celebration{bottom:calc(126px + env(safe-area-inset-bottom))}
}
@media print{#pocket-page-navigation{display:none!important}}

#fs-crop{display:block;width:100%;height:auto;max-height:none;touch-action:none;background:#152632;border:1px solid #73899b;margin:12px 0}.fs-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fs-controls label{min-width:0}.fs-controls input,.fs-controls select{width:100%}.fs-review-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;border-bottom:1px solid #8393a555;padding:12px 0}.fs-review-row small{grid-column:1/-1}.fs-review-row input[type=checkbox],#fs-confirm,#fs-invert{width:22px;min-height:22px;vertical-align:middle}.fs-controls input[type=range]{min-height:36px}