*{box-sizing:border-box}body{margin:0;background:#f4f5f6;color:#102b43;font-family:Arial,sans-serif}main{max-width:1140px;margin:32px auto;display:flex;gap:32px;align-items:flex-start;padding:0 20px}aside{width:260px;flex-shrink:0;padding-top:8px}h1{font-size:25px;margin:0 0 14px}p{font-size:15px;line-height:1.6}fieldset{border:0;padding:0;margin:24px 0}legend{font-weight:bold;font-size:14px;margin-bottom:10px}#picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{background:white;border:2px solid #d7dde2;border-radius:10px;padding:5px;color:inherit;cursor:pointer}.choice[aria-pressed=true]{border-color:#102b43;background:#e3f2fa}.choice img{width:100%;height:76px;object-fit:contain}.choice span{display:block;font-size:12px;margin:3px}select{display:block;margin-top:8px;width:100%;padding:10px;border:1px solid #c4ccd3;border-radius:6px;background:white;color:inherit}.select-label{font-size:14px;font-weight:bold}#reset,#demo{display:block;margin-top:12px;border:1px solid #bac6cf;border-radius:6px;padding:11px;width:100%;background:white;color:inherit;cursor:pointer}small{display:block;color:#5d6b76;line-height:1.5}#status{font-size:13px;min-height:22px}.card{width:min(100%,720px);padding:14px 14px 20px;border-radius:12px;background:#83bfdf;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}header{height:142px;display:flex;align-items:center;justify-content:center}.logo{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-size:clamp(45px,7vw,83px);font-weight:bold;letter-spacing:-5px;color:#102b43;transform:rotate(-2deg)}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));aspect-ratio:1;border:0;background:transparent;gap:1px}.cell{border:0;margin:0;padding:5px;background:white;color:#102b43;position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:'Arial Narrow',Arial,sans-serif;font-stretch:condensed;font-size:clamp(10px,1.6vw,18px);line-height:1.2;touch-action:pan-y}.phrase{position:relative;z-index:0;pointer-events:none}.sticker{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;z-index:1;pointer-events:none;opacity:1;transition:opacity 80ms linear}.peeking .sticker{opacity:.1}.free{padding:0;cursor:default}.portrait{position:absolute;inset:0;background-image:url('assets/cards-reference.jpg');background-size:1100%;background-position:21.85% 25.8%}.free-label{position:absolute;bottom:0;left:0;right:0;background:#102b43;color:white;font-weight:bold;font-size:clamp(9px,1.4vw,16px);padding:4px 0}.cell:focus-visible{outline:3px solid #e75298;outline-offset:-4px}@media(max-width:760px){main{margin:16px auto;flex-direction:column;gap:18px;padding:0 10px}aside{width:100%;padding:0}h1{font-size:22px}aside p{margin:8px 0;font-size:14px}fieldset{margin:12px 0}#picker{grid-template-columns:repeat(4,1fr)}.choice img{height:55px}.select-label,#reset,#demo{display:inline-block;width:auto;vertical-align:bottom;margin-right:8px}.select-label select{padding:8px}small{margin-top:10px}#status{margin:8px 0}.card{align-self:center;padding:9px 9px 15px}header{height:100px}.logo{font-size:60px}.cell{font-size:clamp(9px,2.6vw,17px)}.free-label{font-size:10px}}
.grid{grid-template-rows:repeat(5,minmax(0,1fr))}.portrait{background-image:url('free-space-candidates/originals/jd-1.jpg');background-size:cover;background-position:center}

.sticker{filter:drop-shadow(0 2px 2px rgb(16 43 67 / 28%)) drop-shadow(0 1px 1px rgb(16 43 67 / 12%))}

.sticker{filter:drop-shadow(var(--shadow-x,0px) var(--shadow-y,2px) var(--shadow-blur,2px) rgb(16 43 67 / var(--shadow-strength,.28)))}
.tuning{margin-top:22px}.adjustment{margin:0 0 16px}.adjustment label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}.slider-row{display:flex;align-items:center;gap:8px}.slider-row input[type=range]{flex:1;min-width:0;accent-color:#102b43}.slider-row input[type=number]{width:64px;padding:7px 4px 7px 8px;border:1px solid #bac6cf;border-radius:5px;background:white;color:#102b43}.slider-row span{font-size:12px;width:18px}.hint{font-size:12px;line-height:1.5;color:#5d6b76}#save-defaults{width:100%;padding:11px;border:0;border-radius:6px;background:#102b43;color:white;font-weight:600;cursor:pointer}#save-status{font-size:12px;min-height:18px}

.cell:nth-child(1){border-top-left-radius:12px}.cell:nth-child(5){border-top-right-radius:12px}.cell:nth-child(21){border-bottom-left-radius:12px}.cell:nth-child(25){border-bottom-right-radius:12px}

.tuning{border-top:1px solid #d7dde2;margin:0;padding:14px 0}.tuning summary{font-weight:600;font-size:14px;cursor:pointer}.section-body{padding-top:18px}.card{background:var(--cardColor,#83bfdf);border-radius:var(--cardRadius,12px)}.grid{gap:var(--gap,1px)}.cell{background:var(--squareColor,#fff)}.cell.marked{background:var(--markedBackground,#fff)}.cell:nth-child(1){border-top-left-radius:var(--squareRadius,12px)}.cell:nth-child(5){border-top-right-radius:var(--squareRadius,12px)}.cell:nth-child(21){border-bottom-left-radius:var(--squareRadius,12px)}.cell:nth-child(25){border-bottom-right-radius:var(--squareRadius,12px)}.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin:14px 0}.color-row input{width:48px;height:32px;padding:2px;border:1px solid #bac6cf;border-radius:5px;background:white;cursor:pointer}#save-defaults{margin-top:10px}

.cell.marked .phrase{opacity:var(--markedTextOpacity,1)}

.scrubs-logo{width:62%;height:auto;max-height:125px;color:var(--logoColor,#009c97);pointer-events:none}.peeking .cell.marked .phrase{opacity:1}@media(max-width:760px){.scrubs-logo{max-height:85px}}

.palette{margin:18px 0;padding:0}.palette legend{font-size:13px;font-weight:600;margin-bottom:10px}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.swatch{padding:6px 4px;border:2px solid transparent;border-radius:7px;background:#fff;color:#102b43;font:11px Arial,sans-serif;cursor:pointer}.swatch[aria-pressed=true]{border-color:#102b43}.swatch-color{display:block;height:30px;margin-bottom:6px;border-radius:4px}.swatch:focus-visible{outline:2px solid #102b43;outline-offset:2px}

.logo-shadow{opacity:var(--logoShadowOpacity,1)}

.scrubs-logo{transform:translate(var(--logoX,0px),var(--logoY,0px))}

.animation-label{font-size:14px;font-weight:600}#replay-animation{margin-top:8px;width:100%;padding:9px;border:1px solid #bac6cf;border-radius:6px;background:white;color:#102b43;cursor:pointer}#animation-note:empty{display:none}

.smoke-puff{position:absolute;inset:10%;pointer-events:none;z-index:3}
.smoke-puff img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}

[hidden]{display:none!important}
body.onboarding-active{background:#83bfdf}
#onboarding{min-height:100svh;min-height:100dvh;max-width:600px;margin:auto;padding: max(36px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:64px}
#welcome-logo{display:flex;justify-content:center}
#welcome-logo .scrubs-logo{width:min(100%,360px);height:auto;margin:0;transform:none}
#welcome-form{flex:1;display:flex;flex-direction:column;gap:24px}
.name-field label{display:block;font-size:18px;font-weight:700;margin-bottom:12px}
#first-name{width:100%;font:inherit;font-size:18px;padding:16px;border:1px solid #557e96;border-radius:10px;background:white;color:#102b43}
#first-name:focus-visible{outline:3px solid #102b43;outline-offset:3px}
#welcome-next{margin-top:0;width:100%;min-height:54px;padding:16px;border:0;border-radius:10px;background:#102b43;color:white;font:inherit;font-weight:700;font-size:18px;cursor:pointer}

#welcome-next:disabled{opacity:.4;cursor:default}

/* Mobile onboarding: blue identity header and grouped content. */
body.onboarding-active{background:#f2f2f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#onboarding{max-width:none;padding:0;gap:0}
#welcome-logo{background:#83bfdf;padding:calc(32px + env(safe-area-inset-top)) 24px 32px}
#welcome-logo .scrubs-logo{width:min(78vw,320px);max-height:none}
#welcome-form{width:100%;max-width:600px;align-self:center;padding:28px 20px calc(24px + env(safe-area-inset-bottom));gap:16px}
.name-field{background:#fff;padding:24px;border-radius:28px}
.name-field label{font-size:17px;font-weight:600;margin-bottom:14px}
#first-name{background:#f2f2f7;border:0;border-radius:14px;padding:16px;font-size:17px}
#first-name:focus-visible{outline:2px solid #008cff;outline-offset:2px}
#welcome-next{background:#008cff;border-radius:999px;font-weight:600;font-size:17px;min-height:56px}
#welcome-next:disabled{opacity:1;background:#dce8f4;color:#7892aa}

body.customizing{background:#f2f2f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#customize{max-width:520px;min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.custom-nav{display:flex;align-items:center;gap:12px;padding:14px 0}.custom-nav h1{font-size:19px;margin:0}.custom-nav button{border:0;border-radius:50%;width:40px;height:40px;background:white;color:#008cff;font-size:30px}
#card-preview{display:flex;justify-content:center;flex:0 0 auto;align-items:flex-start;min-height:0;padding-top:4px}
#card-preview .card{width:min(100%,calc((100svh - 300px)*.84));padding:8px 8px 12px}
#card-preview header{height:66px}#card-preview .scrubs-logo{max-height:56px}
#card-preview .cell{font-size:clamp(8px,2.2vw,12px);padding:3px;line-height:1.15}#card-preview .grid{gap:calc(var(--gap,4px)*.65)}
.custom-panel{background:white;border-radius:28px;padding:14px 12px;min-height:140px}.custom-tabs{display:flex;gap:3px}.custom-tabs button{flex:1;border:0;border-radius:999px;background:none;padding:10px 3px;font:inherit;font-size:13px;color:#536270}.custom-tabs button[aria-selected=true]{background:#e7f3ff;color:#0079df;font-weight:600}
.custom-choices{display:flex;gap:10px;overflow-x:auto;padding:14px 3px 2px}.custom-choices button{flex-shrink:0;cursor:pointer}.custom-color{width:42px;height:42px;border:3px solid white;border-radius:50%;outline:1px solid #dce1e6}.custom-choices [aria-pressed=true]{outline:2px solid #008cff}
.custom-image{width:75px;padding:4px;border:0;border-radius:12px;background:#f2f2f7;font:inherit;font-size:10px;color:#102b43}.custom-image img{width:100%;height:50px;object-fit:contain}.custom-image span{display:block}
#custom-options p{font-size:13px;margin:12px 0 8px}.shuffle-button{border:0;border-radius:999px;background:#e7f3ff;color:#0079df;padding:10px 20px;font:inherit;font-weight:600}
.primary-pill{margin-top:auto;min-height:52px;width:100%;border:0;border-radius:999px;background:#008cff;color:white;font:inherit;font-weight:600;font-size:17px;cursor:pointer}
.portrait{background-image:var(--freeImage,url('free-space-candidates/originals/jd-1.jpg'))}
/* Keep the page fixed horizontally while option strips scroll locally. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
#customize{width:100%;min-width:0}
.custom-panel,#custom-options{min-width:0;max-width:100%}
.custom-choices:has(.custom-color){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;overflow:visible;padding:18px 3px 5px;align-items:center}
.custom-choices .custom-color{width:100%;height:auto;aspect-ratio:1;min-width:0;border-radius:50%}
.custom-nav button{display:grid;place-items:center;padding:0;line-height:1}
.custom-nav button svg{display:block;width:20px;height:20px}
body.onboarding-active,body.customizing{touch-action:pan-y;position:relative;overflow-x:clip}
html{overflow-x:clip}
.custom-choices:not(:has(.custom-color)){touch-action:pan-x pan-y;overscroll-behavior-x:contain}
/* Explicit viewport bounds prevent Safari flex intrinsic widths widening screens. */
#onboarding{width:100vw;max-width:100vw;min-width:0;margin:0;box-sizing:border-box}
#welcome-logo{width:100%;min-width:0;box-sizing:border-box}
#welcome-form{width:min(100vw,600px);min-width:0;box-sizing:border-box}
.name-field,#first-name,#welcome-next{min-width:0;box-sizing:border-box;max-width:100%}
#customize{width:min(100vw,520px);max-width:100vw;box-sizing:border-box}
#customize>*{min-width:0;box-sizing:border-box}
#card-preview{width:100%;max-width:100%}
#card-preview .card{flex-shrink:1;min-width:0;max-width:100%;box-sizing:border-box}
.custom-tabs button{min-width:0}

/* Reflow to Safari's visible width, including an already-zoomed viewport. */
body.onboarding-active,body.customizing{width:var(--visible-page-width,100%);max-width:100%;margin:0 auto}
#onboarding{width:100%;max-width:100%}
#welcome-form{width:100%;max-width:600px}
#customize{width:100%;max-width:520px}
html{width:var(--visible-page-width,100%);max-width:100%}
body.onboarding-active,body.customizing{margin:0}
/* Leave room for customization options and the bottom action on shorter phones. */
@media(max-height:760px){#card-preview .card{width:min(100%,calc((100svh - 340px)*.84))}}

/* Compact the setup screen and reserve space above Safari's floating toolbar. */
#customize{min-height:var(--visible-page-height,100dvh);gap:10px}
.custom-nav{padding:8px 0}
#card-preview{padding-top:0;margin-top:-4px}
.custom-panel{padding-top:10px;padding-bottom:10px;min-height:132px}
#custom-done{flex-shrink:0}
@supports(-webkit-touch-callout:none){#customize{padding-bottom:max(64px,env(safe-area-inset-bottom))}}

/* Keep the compact action inside the bottom options panel. */
#customize{height:var(--visible-page-height,100dvh);min-height:0}
.custom-nav,.custom-panel{flex-shrink:0}
#card-preview{flex:1;container-type:size;align-items:flex-start;margin-top:0}
#card-preview .card{width:min(100%,calc(100cqh - 70px))}
.custom-panel{margin-top:auto}
#custom-done{display:block;min-height:44px;margin-top:10px;font-size:16px}

.custom-nav{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:0}
.custom-nav h1{text-align:center}
#custom-step-title{font-size:16px;text-align:center;margin:2px 0 0;font-weight:600}

/* Every setup step reserves the same space so the preview never reflows. */
.custom-panel{height:200px;display:flex;flex-direction:column}
#custom-options{flex:1;min-height:0}
#custom-done{margin-top:10px}

/* Demo sticker choices scroll inside the fixed bottom panel. */
.custom-panel.sticker-step #custom-options{overflow-y:auto;overscroll-behavior-y:contain;margin-top:8px;padding:3px}
.sticker-demo-grid.custom-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;overflow:visible}
.sticker-demo-grid .custom-image{width:100%;min-width:0;padding:8px;font-size:13px}
.sticker-demo-grid .custom-image img{height:96px;width:100%;object-fit:contain}
/* The sticker list flows with the page, with Next after all eight choices. */
#customize:has(.sticker-step){height:auto;min-height:var(--visible-page-height,100dvh)}
#customize:has(.sticker-step) #card-preview{flex:none;container-type:normal;height:max(0px,calc(var(--visible-page-height,100dvh) - 276px - var(--setup-bottom-clearance,16px) - env(safe-area-inset-top)))}
#customize:has(.sticker-step) #card-preview .card{width:min(100%,calc(var(--visible-page-height,100dvh) - 346px - var(--setup-bottom-clearance,16px) - env(safe-area-inset-top)))}
.custom-panel.sticker-step{height:auto;margin-top:0}
.custom-panel.sticker-step #custom-options{flex:none;overflow:visible}

@supports(-webkit-touch-callout:none){#customize{--setup-bottom-clearance:max(64px,env(safe-area-inset-bottom))}}
/* Selection panels follow the actual preview rather than the viewport bottom. */
#customize{height:auto;min-height:var(--visible-page-height,100dvh);gap:12px}
#customize #card-preview{flex:none;container-type:normal;height:auto}
#customize #card-preview .card{width:min(100%,calc(var(--visible-page-height,100dvh) - 350px - var(--setup-bottom-clearance,16px) - env(safe-area-inset-top)))}
#customize .custom-panel{height:auto;margin-top:0}
#customize #custom-options{flex:none}
#customize:has(.sticker-step) #card-preview{height:auto}
#customize:has(.sticker-step) #card-preview .card{width:min(100%,calc(var(--visible-page-height,100dvh) - 350px - var(--setup-bottom-clearance,16px) - env(safe-area-inset-top)))}

#custom-step-description{font-size:13px;line-height:1.4;color:#5d6b76;text-align:center;margin:6px 0 4px}

.sacred-heart-free{display:block;width:92%;height:92%;object-fit:contain;pointer-events:none}
/* Match the marked-square background behind the free-space emblem. */
#card .cell.free{background:var(--markedBackground,#fff)}

.secondary-back{display:block;width:100%;min-height:40px;margin-top:6px;border:0;border-radius:999px;background:#f2f2f7;color:#0079df;font:inherit;font-size:16px;font-weight:600;cursor:pointer;flex-shrink:0}

/* Apple-inspired comparison: typography, rhythm, and action hierarchy. */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1d1d1f;background:#f5f5f7}
body.onboarding-active,body.customizing{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f5f7}
.custom-nav h1{font-size:20px;font-weight:600;letter-spacing:-.4px}
#custom-progress{margin:4px 0 0;text-align:center;font-size:12px;line-height:1.3;color:#6e6e73;font-weight:500}
.custom-panel{padding:20px 16px;border-radius:28px}
#custom-step-title{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.4px;margin:0}
#custom-step-description{font-size:15px;line-height:1.45;color:#6e6e73;margin:8px 0 16px}
.primary-pill,#custom-done,#welcome-next{background:#0071e3;font-weight:500;min-height:48px;font-size:17px}
.secondary-back{background:#f5f5f7;color:#0066cc;font-weight:500;min-height:44px;margin-top:10px;font-size:17px}
.custom-nav button{color:#0071e3}
.sticker-demo-grid.custom-choices{gap:12px}
.sticker-demo-grid .custom-image{position:relative;border-radius:18px;background:#f5f5f7;padding:12px}
.sticker-demo-grid .custom-image img{height:108px}
.custom-choices [aria-pressed=true]{outline:2px solid #0071e3}
.sticker-demo-grid .custom-image[aria-pressed=true]::after{content:'✓';position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#0071e3;color:white;font-size:14px;font-weight:600}
.shuffle-button{color:#0066cc;background:#f5f5f7;min-height:44px;font-weight:500}
/* Clear title hierarchy and outlined secondary actions. */
.custom-nav h1{font-size:22px}
#custom-step-title{font-size:20px}
.secondary-back{background:transparent;box-shadow:inset 0 0 0 1px #0071e3;color:#0071e3}
/* Interaction states for mouse, touch, and keyboard. */
#custom-done,#welcome-next,.secondary-back,.shuffle-button,.custom-nav button,.custom-image,.custom-color{transition:background-color 140ms ease,box-shadow 140ms ease,transform 100ms ease}
@media(hover:hover) and (pointer:fine){
 #custom-done:not(:disabled):hover,#welcome-next:not(:disabled):hover{background:#0077ed}
 .secondary-back:hover{background:#eaf3fc}
 .shuffle-button:hover,.custom-nav button:hover{background:#e8e8ed}
 .custom-image:hover{background:#e8e8ed}
 .custom-color:hover{box-shadow:0 0 0 3px #e2e9f0}
}
#custom-done:not(:disabled):active,#welcome-next:not(:disabled):active{background:#0062c4;transform:scale(.985)}
.secondary-back:active{background:#dcecff;transform:scale(.985)}
.shuffle-button:active,.custom-nav button:active,.custom-image:active{background:#dedee4;transform:scale(.98)}
.custom-color:active{transform:scale(.95)}
button:focus-visible{outline:3px solid #0071e3;outline-offset:4px}
@media(prefers-reduced-motion:reduce){button{transition:none!important}button:active{transform:none!important}}

#reset-dialog{box-sizing:border-box;width:calc(100% - 40px);max-width:360px;border:0;border-radius:28px;padding:24px;background:white;color:#1d1d1f;box-shadow:0 16px 60px #0003;text-align:center}
#reset-dialog::backdrop{background:rgb(0 0 0 / .35)}
#reset-title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px}
#reset-description{font-size:15px;line-height:1.45;color:#6e6e73;margin:12px 0 20px}
#reset-confirm{width:100%;border:0;border-radius:999px;color:white;cursor:pointer}
@media(hover:hover) and (pointer:fine){#reset-confirm:hover{background:#0077ed}}
#reset-confirm:active{background:#0062c4}

#custom-options .shuffle-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;background:transparent;box-shadow:inset 0 0 0 1px #0071e3;color:#0071e3;font-size:17px}
.shuffle-button svg{width:20px;height:20px;flex:none}
.phrase-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(hover:hover) and (pointer:fine){#custom-options .shuffle-button:hover{background:#eaf3fc}}


#custom-options>.shuffle-button{margin-bottom:0}
#phrase-dialog{box-sizing:border-box;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:#f5f5f7;color:#1d1d1f}
.phrase-picker-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 20px 16px;background:#f5f5f7}
.phrase-picker-header h2{font-size:22px;margin:0}
#phrase-picker-close{width:auto;margin:0;padding:0 18px;background:transparent;box-shadow:none}
#phrase-list{padding:0 20px calc(24px + env(safe-area-inset-bottom));display:grid;gap:8px}
#phrase-list button{border:0;border-radius:16px;padding:16px;text-align:left;background:white;color:#1d1d1f;font:inherit;font-size:16px;line-height:1.4;cursor:pointer}
#phrase-list button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #0071e3;color:#0071e3}
.editing-phrases #card{touch-action:none}
.swap-source{opacity:.45}.swap-target{outline:3px solid #0071e3;outline-offset:-3px}
.phrase-drag-ghost{position:fixed;z-index:10;pointer-events:none;transform:translate(-50%,-50%);width:100px;min-height:70px;display:grid;place-items:center;padding:10px;border-radius:12px;background:white;color:#1d1d1f;box-shadow:0 8px 28px #0004;font-size:13px;text-align:center}

#phrase-undo{position:fixed;z-index:20;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);box-sizing:border-box;width:calc(100% - 40px);max-width:260px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:white;border-radius:20px;box-shadow:0 4px 24px #0002;color:#1d1d1f;font-size:15px}
#phrase-undo[hidden]{display:none}
#phrase-undo-button{border:0;background:transparent;color:#0071e3;font:inherit;font-weight:600;min-height:36px;padding:0 8px;cursor:pointer}
@media(hover:hover) and (pointer:fine){#phrase-undo-button:hover{color:#0077ed}}
#phrase-undo-button:active{color:#0062c4}

#custom-step-description{white-space:pre-line}

#custom-done:disabled{background:#dce8f4;color:#7892aa;cursor:default;transform:none}

body.playing{width:var(--visible-page-width,100%);max-width:100%;overflow-x:clip;background:#f5f5f7}
#play-screen{max-width:520px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
#live-card{display:flex;justify-content:center;margin-top:12px}
#live-card .card{width:100%;padding:8px 8px 12px}
#live-card .card header{height:90px}
#live-card .scrubs-logo{width:72%;max-height:76px}
#live-card .cell{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(9px,2.5vw,13px);text-align:center}
.play-instructions{text-align:center;color:#6e6e73;font-size:14px;line-height:1.5;margin:18px 0 0}

.live-actions{max-width:400px;margin:20px auto 0;text-align:center}
#join-live,#view-players{min-height:48px;margin:0}
#invite-players{margin-top:12px;padding:10px 16px;border:0;background:transparent;color:#0071e3;font:inherit;font-size:15px;cursor:pointer}
#live-status{font-size:13px;color:#6e6e73;overflow-wrap:anywhere}
#players-dialog{width:calc(100% - 40px);max-width:380px;border:0;border-radius:28px;padding:24px;color:#1d1d1f;background:white}
#players-dialog::backdrop{background:#0005}
#players-title{font-size:22px;margin:0 0 16px;text-align:center}
#players-list p{padding:12px 0;margin:0;border-bottom:1px solid #eee;font-size:15px}

@media print{.sticker[data-mole-placed]{content:url('assets/sticker-turk-talking-mole-rest-frame-3.png')}}

.live-actions{max-width:none;margin:24px 0 0;text-align:left}
.together-heading{display:flex;align-items:center;gap:8px;margin-bottom:16px}
#together-title{font-size:16px;margin:0;font-weight:600}
#connection-indicator{font-size:11px;color:#398b57}
#connection-indicator::before{content:'●';margin-right:4px;font-size:8px}
#invite-players{margin:0 0 0 auto;padding:8px 10px;font-size:13px;border-radius:999px;box-shadow:inset 0 0 0 1px #0071e3}
.live-player-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.live-player-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none}
.live-player-avatar img{width:42px;height:42px;object-fit:contain}
.live-player-detail{min-width:0;flex:1}
.live-player-detail strong{display:block;font-size:14px;overflow-wrap:anywhere}
.live-player-progress{display:flex;align-items:center;gap:12px;margin-top:7px}
.live-player-progress progress{flex:1;min-width:0;height:4px;border:0;border-radius:99px;overflow:hidden;appearance:none;background:#dce4df}
.live-player-progress progress::-webkit-progress-bar{background:#dce4df}
.live-player-progress progress::-webkit-progress-value{background:#398b57}
.live-player-progress progress::-moz-progress-bar{background:#398b57}
.live-player-progress span{font-size:11px;color:#6e6e73;white-space:nowrap}

.live-actions.solo #together-title,.live-actions.solo #connection-indicator,.live-actions.solo #players-list,.live-actions.solo #live-status{display:none}
.live-actions.solo .together-heading{justify-content:center}
.live-actions.solo #invite-players{margin:0}
#connection-indicator.connecting{color:#0071e3;display:inline-flex;align-items:center;gap:5px}
#connection-indicator.connecting::before{content:'';display:inline-block;width:10px;height:10px;box-sizing:border-box;border:1.5px solid #0071e340;border-top-color:#0071e3;border-radius:50%;margin:0;animation:connection-spin .8s linear infinite}
@keyframes connection-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#connection-indicator.connecting::before{animation:none}}

#play-screen{position:relative}
#game-settings-menu{position:absolute;right:16px;top:calc(60px + env(safe-area-inset-top));z-index:5;width:180px;padding:4px;background:white;border-radius:14px;box-shadow:0 6px 28px #0002}
#game-settings-menu button{display:block;width:100%;padding:10px 12px;border:0;background:transparent;text-align:left;font:inherit;font-size:13px;color:#0071e3;border-radius:10px;cursor:pointer}
#game-settings-menu button:hover{background:#f5f5f7}
#game-sticker-dialog,#game-warning-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:420px;max-height:85dvh;border:0;border-radius:28px;padding:24px;background:white;color:#1d1d1f}
#game-sticker-dialog::backdrop,#game-warning-dialog::backdrop{background:#0005}
#game-sticker-title,#game-warning-title{font-size:22px;text-align:center;margin:0 0 18px}
#game-warning-description{text-align:center;font-size:15px;line-height:1.45;color:#6e6e73;margin:0 0 20px}
#game-sticker-options{margin:0}
.game-modal-actions{position:sticky;z-index:2;bottom:-24px;background:white;padding:16px 24px 24px;margin:0 -24px -24px;box-shadow:0 0 0 2px white}
#game-sticker-save,#game-warning-confirm{width:100%;border:0;border-radius:999px;color:white;cursor:pointer}

/* The settings circle unfolds horizontally, then vertically. */
#settings-card{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top));z-index:5;width:40px;height:40px;border-radius:20px;background:white;overflow:hidden;transition:height 180ms ease,width 180ms ease 180ms,box-shadow 180ms ease}
#settings-card.open{width:210px;height:164px;box-shadow:0 6px 28px #0002;transition:width 180ms ease,height 180ms ease 180ms,box-shadow 180ms ease}
.settings-card-heading{height:40px;display:flex;align-items:center;width:210px}
#play-settings{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;padding:0;background:white;color:#0071e3;cursor:pointer}
#play-settings svg{width:20px;height:20px}
#settings-card-title{font-size:15px;font-weight:600;color:#1d1d1f;opacity:0;transition:opacity 100ms ease}
#settings-card.open #settings-card-title{opacity:1;transition-delay:140ms}
#settings-card #game-settings-menu{position:static;width:210px;padding:2px 6px 6px;border-radius:0;background:transparent;box-shadow:none;opacity:0;visibility:hidden;transition:opacity 100ms ease,visibility 0s 180ms}
#settings-card.open #game-settings-menu{opacity:1;visibility:visible;transition:opacity 140ms ease 220ms,visibility 0s}
#settings-card #game-settings-menu button{padding:10px 12px}
@media(prefers-reduced-motion:reduce){#settings-card,#settings-card.open,#settings-card-title,#settings-card.open #settings-card-title,#settings-card #game-settings-menu,#settings-card.open #game-settings-menu{transition:none}}

#play-settings{transition:color 180ms ease}
#settings-card.open #play-settings{color:#1d1d1f}
#settings-card-close{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;padding:0;border:0;background:transparent;color:#0071e3;cursor:pointer;opacity:0;visibility:hidden;transition:opacity 80ms ease,visibility 0s 80ms}
#settings-card-close svg{width:18px;height:18px}
#settings-card.open #settings-card-close{opacity:1;visibility:visible;transition:opacity 120ms ease 360ms,visibility 0s 360ms}
@media(prefers-reduced-motion:reduce){#play-settings,#settings-card-close,#settings-card.open #settings-card-close{transition:none}}

#play-settings svg{transform:rotate(0deg);transition:transform 180ms ease 180ms}
#settings-card.open #play-settings svg{transform:rotate(-360deg);transition:transform 180ms ease}
@media(prefers-reduced-motion:reduce){#play-settings svg,#settings-card.open #play-settings svg{transform:none;transition:none}}

/* Give the rolling header time to finish before revealing the menu. */
#settings-card{transition:height 260ms ease,width 600ms ease 260ms,box-shadow 180ms ease}
#settings-card.open{transition:width 600ms ease,height 260ms ease 600ms,box-shadow 180ms ease}
#play-settings svg{transition:transform 600ms ease 260ms}
#settings-card.open #play-settings svg{transition:transform 600ms ease}
#settings-card.open #settings-card-title{transition-delay:450ms}
#settings-card.open #game-settings-menu{transition:opacity 180ms ease 650ms,visibility 0s 600ms}
#settings-card.open #settings-card-close{transition:opacity 120ms ease 860ms,visibility 0s 860ms}
@media(prefers-reduced-motion:reduce){#settings-card,#settings-card.open,#play-settings svg,#settings-card.open #play-settings svg,#settings-card.open #settings-card-title,#settings-card.open #game-settings-menu,#settings-card.open #settings-card-close{transition:none}}

#settings-card #game-settings-menu{padding:2px 0 6px}
#settings-card #game-settings-menu button{width:100%;padding:10px 18px;border-radius:0}
#settings-card.open .settings-card-heading{cursor:pointer}

#game-color-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 20px;padding:3px;overflow:visible}
#game-color-options .custom-color{width:100%;height:auto;min-width:0;aspect-ratio:1;border-radius:50%;padding:0}

#game-sticker-title:focus{outline:none}

#invite-players{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#invite-players svg{width:16px;height:16px;flex:none}

button.live-player-avatar{border:0;padding:0;cursor:pointer}

button.live-player-avatar{position:relative}
.live-player-avatar .avatar-gear{position:absolute;width:24px;height:24px;color:white;opacity:0;pointer-events:none;transition:opacity 100ms ease}
button.live-player-avatar img{transition:opacity 100ms ease}
button.live-player-avatar.show-gear img{opacity:0}
button.live-player-avatar.show-gear .avatar-gear{opacity:1}
@media(hover:hover) and (pointer:fine){button.live-player-avatar:hover img{opacity:0}button.live-player-avatar:hover .avatar-gear{opacity:1}}
@media(prefers-reduced-motion:reduce){button.live-player-avatar img,.live-player-avatar .avatar-gear{transition:none}}

#player-search{display:flex;align-items:center;justify-content:center;gap:6px;color:#0071e3;font-size:12px;margin:10px 0}
#player-search[hidden]{display:none}
.player-search-spinner{width:11px;height:11px;border:1.5px solid #0071e340;border-top-color:#0071e3;border-radius:50%;animation:connection-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.player-search-spinner{animation:none}}

#player-search{color:#a8a8ad}

#live-card{margin-top:0}
#live-card .card{position:relative}
#live-card #settings-card{top:10px;right:10px}

#live-card #play-settings{color:var(--cardColor,#83bfdf)}
#live-card #settings-card.open #play-settings{color:#1d1d1f}

/* Alternate closed settings treatment, transitioning to the white menu. */
#live-card #settings-card{background:color-mix(in srgb,var(--logo-shadow-color,#000c0c) 15%,transparent);transition:height 260ms ease,width 600ms ease 260ms,box-shadow 180ms ease,background-color 600ms ease 260ms}
#live-card #play-settings{background:transparent;color:white;transition:color 600ms ease}
#live-card #settings-card.open{background:white;transition:width 600ms ease,height 260ms ease 600ms,box-shadow 180ms ease,background-color 600ms ease}
#live-card #settings-card.open #play-settings{color:#1d1d1f}
@media(prefers-reduced-motion:reduce){#live-card #settings-card,#live-card #settings-card.open,#live-card #play-settings{transition:none}}

#live-card #settings-card:not(.open) #play-settings svg{opacity:.75}
#live-card #settings-card.open #play-settings svg{opacity:1}

#settings-card.open{height:204px}
body.expanded-card-view #play-screen{max-width:none;padding-top:0}
body.expanded-card-view #live-card{margin-left:-16px;margin-right:-16px}
body.expanded-card-view #live-card .card{border-radius:0;width:100%;max-width:none}
body.expanded-card-view #live-card .card header{height:var(--expanded-header-height,66px)}
body.expanded-card-view #live-card .scrubs-logo{width:var(--expanded-logo-width);max-height:76px;flex-shrink:0}
body.expanded-card-view #live-card .cell{font-size:clamp(11px,3vw,15px)}

html.expanded-card-view{background:#f5f5f7}
@media(min-width:601px){[data-game-action="view"]{display:none}#settings-card.open{height:164px}}

/* A real fixed edge element gives Safari a separate top color source. */
body.playing.expanded-card-view{min-height:100lvh;background:#f5f5f7}
body.expanded-card-view #play-screen{background:#f5f5f7}
#safari-top-color{display:none}
@supports(-webkit-touch-callout:none){
 @media(max-width:600px) and (hover:none) and (pointer:coarse){
  body.onboarding-active #safari-top-color,body.playing.expanded-card-view #safari-top-color{display:block;position:fixed;top:0;left:0;right:0;height:12px;background:var(--active-card-color,#83bfdf);background-clip:text;-webkit-background-clip:text;pointer-events:none;z-index:1}
  body.onboarding-active #safari-top-color{background-color:#83bfdf}
 }
}


/* Approved win celebration, layered above the current card without changing it. */
#win-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:transparent;overflow:hidden;color:white}
#win-dialog[open]{display:grid;place-items:center}
#win-dialog::backdrop{background:#10202dba;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#win-confetti,#win-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#win-rain{overflow:hidden}
.win-celebration{position:relative;z-index:2;text-align:center;padding:24px;max-width:100%;animation:win-entrance .4s ease-out}
#win-avatar{width:clamp(190px,45vw,260px);height:clamp(190px,45vw,260px);border-radius:50%;box-shadow:0 12px 50px #0003;display:grid;place-items:center;margin:auto}
#win-sticker{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 5px 3px #0003)}
#win-title{font-size:clamp(48px,10vw,72px);line-height:1.1;letter-spacing:-2px;margin:24px 0 28px;overflow-wrap:anywhere;color:white}
#win-dismiss{background:white;color:#102b43;font:600 15px Arial;border:0;border-radius:24px;padding:14px 24px;min-height:44px;cursor:pointer}
#win-dismiss:focus-visible{outline:3px solid #008cff;outline-offset:4px}
#win-countdown{font-size:13px;color:#ffffffb3;margin:16px 0 0}
.win-sad-drop{position:absolute;top:-110px;animation:win-sad-fall 3.6s linear both}
@keyframes win-sad-fall{from{transform:translateY(0) rotate(-12deg);opacity:0}10%{opacity:1}85%{opacity:1}to{transform:translateY(calc(100dvh + 220px)) rotate(15deg);opacity:0}}
@keyframes win-entrance{from{opacity:0;transform:scale(.85) translateY(15px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.win-celebration{animation:none}}
@media(max-height:560px){#win-avatar{width:140px;height:140px}#win-title{font-size:40px;margin:12px 0 16px}.win-celebration{padding:12px}}

#win-dialog[open] #win-sticker{transform-origin:center;animation:win-sticker-dance 1.2s ease-in-out infinite}
@keyframes win-sticker-dance{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@media(prefers-reduced-motion:reduce){#win-dialog[open] #win-sticker{animation:none}}

/* No focus rings anywhere in the flow; keep the picker's selection styling. */
:focus,:focus-visible{outline:none!important}
.custom-color:focus{outline:1px solid #dce1e6!important}
.custom-choices [aria-pressed=true]:focus{outline:2px solid #0071e3!important}

.app-version{margin:28px 0 0;text-align:center;color:#c5c5ca;font-size:10px;line-height:1.5;font-weight:400}

#welcome-version{margin:auto 0 0;padding-top:24px}

#app-version{position:fixed;left:16px;right:16px;bottom:calc(8px + env(safe-area-inset-bottom));margin:0;pointer-events:none}
#play-screen{padding-bottom:calc(44px + env(safe-area-inset-bottom))}