body.printshop-game { background:#edf7f4; color:#405d65; }
body.printshop-game .site-header,body.printshop-game > footer { display:none; }
body.printshop-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.fp-shell { min-height:100dvh; padding:7px 0 20px; }.fp-shell * { box-sizing:border-box; letter-spacing:0; }
.fp-shell h1,.fp-shell h2,.fp-shell h3,.fp-shell p { margin-top:0; }.fp-shell h2:focus { outline:none; }
.fp-shell button,.fp-shell .button,.fp-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.35; border-radius:6px; }.fp-shell button { cursor:pointer; }.fp-shell button:disabled { cursor:default; }.fp-shell button:focus-visible,.fp-shell input:focus-visible,.fp-shell a:focus-visible,.fp-shell summary:focus-visible { outline:3px solid #a487bc; outline-offset:3px; }
.fp-shell .fp-primary { padding:10px 17px; background:#448e93; color:white; border:2px solid #33787e; box-shadow:0 3px 0 #32676f; font-size:18px; font-weight:750; }.fp-primary:hover { background:#397d83; }.fp-shell .fp-primary:disabled { box-shadow:none; background:#d5e2de; border-color:#afc4c1; color:#667f80; }
.fp-shell .fp-secondary { padding:9px 13px; background:#fffdf3; border:2px solid #b8cbc5; color:#4a7074; font-size:16px; }.fp-shell .fp-secondary:disabled { opacity:.55; }
.fp-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; align-items:center; gap:10px; min-height:65px; padding-bottom:7px; }.fp-toolbar h1 { font-family:inherit; font-size:19px; margin:0 0 3px; line-height:1.25; }.fp-toolbar span { font-size:13px; }.fp-toolbar .fp-back { padding:8px; color:#79384b; font-size:14px; white-space:nowrap; }.fp-toolbar .fp-sound { padding:0; font-size:23px; }.fp-motion { display:flex; align-items:center; min-width:48px; min-height:48px; font-size:13px; gap:5px; }.fp-motion input { width:22px; height:22px; accent-color:#448e93; }
.fp-intro { text-align:center; }.fp-intro > span { display:block; margin:15px 0 8px; color:#9a7875; font-weight:700; }.fp-intro h2 { font-size:36px; margin:0 0 12px; color:#54868a; }.fp-intro p { font-size:19px; line-height:1.5; max-width:830px; margin:0 auto 16px; }.fp-cover-image { display:block; width:100%; height:auto; }.fp-intro > .fp-cover-image { max-height:420px; object-fit:contain; margin:20px auto 12px; }.card-art .fp-cover-image { width:100%; height:100%; object-fit:cover; background:#ecdbc5; }.fp-intro .fp-intro-note { font-size:15px; }
.fp-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:5px 0 8px; min-height:37px; }.fp-heading > span { font-size:16px; font-weight:700; color:#9e7c72; }.fp-heading h2 { font-family:inherit; font-size:23px; margin:0; color:#4d8185; }
.fp-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; min-height:446px; }.fp-table,.fp-page { min-width:0; }.fp-mini-scene { height:125px; display:grid; grid-template-columns:1fr 140px; align-items:center; gap:5px; }.fp-mini-press { height:110px; }.fp-mini-press .fp-press { height:110px; width:100%; }
.fp-illustration { position:relative; min-width:0; width:100%; height:125px; }.fp-story-character { position:absolute; width:40%; height:100%; inset:0 auto 0 0; z-index:1; display:flex; justify-content:center; align-items:end; }.fp-story-character > svg { height:100%; max-width:100%; }.fp-props { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
.fp-card-heading { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin:4px 0 7px; color:#78908e; }.fp-card-heading > span:first-child { font-weight:750; color:#507d7f; }.fp-tray { display:grid; gap:7px; align-content:start; min-height:292px; }.fp-shell .fp-card { display:block; min-height:64px; width:100%; text-align:left; padding:8px 12px; background:#fffdf2; border:2px solid #c9cec1; border-radius:6px; font-size:18px; line-height:1.35; color:#405d65; box-shadow:0 2px 0 #d9ded2; touch-action:manipulation; }.fp-card[draggable="true"] { cursor:grab; }.fp-card[draggable="true"]:active { cursor:grabbing; }.fp-card:hover:not(:disabled) { border-color:#82aab0; }.fp-shell .fp-selected { border-color:#508f9d!important; outline:3px solid #82bac6; outline-offset:1px; box-shadow:0 0 0 5px #fff9de; }.fp-card:disabled { opacity:1; }.fp-tray-empty { display:flex; align-items:center; justify-content:center; min-height:240px; padding:20px; border:2px dashed #bdd2c9; border-radius:6px; font-size:17px; color:#79958e; }
.fp-page { padding:10px 13px 12px 19px; background:#fffdf3; border:2px solid #d4cfba; border-left:7px solid #e6b495; border-radius:6px; box-shadow:0 4px 0 #d8dbcf; }.fp-page-heading { display:flex; justify-content:space-between; font-size:12px; font-weight:750; color:#a28a71; line-height:1.3; margin-bottom:6px; }.fp-part { border-top:1px solid #e6dfcc; padding-top:3px; }.fp-part-heading { display:flex; align-items:center; justify-content:space-between; height:30px; }.fp-part-heading > span { font-size:14px; font-weight:750; color:#5f7978; }.fp-shell .fp-info { width:48px; height:48px; position:relative; z-index:1; border:0; background:transparent; color:#6f9395; font-size:18px; font-weight:750; padding:0; }.fp-info:hover { color:#9a748c; }.fp-shell .fp-slot { display:block; width:100%; text-align:left; border:2px solid transparent; border-radius:4px; background:#f5f5eb; min-height:58px; padding:6px 10px; font-size:17px; line-height:1.35; color:#405d65; margin:0 0 5px; }.fp-filled .fp-slot { background:#fffdf3; border-color:#ddd9c8; }.fp-slot:disabled { opacity:1; }.fp-empty-slot { color:#9ba69e; font-size:15px; }.fp-target .fp-slot { border-style:dashed; border-color:#91b2b6; }.fp-part-focus .fp-part-heading > span { text-decoration:underline; text-decoration-color:#d7ac67; text-underline-offset:4px; }
.fp-feedback { display:flex; gap:13px; align-items:center; min-height:100px; margin:10px 0 7px; padding:7px 13px; border-left:4px solid #d6b891; border-radius:4px; background:#fbf9ee; font-size:17px; line-height:1.4; }.fp-editor-portrait { width:65px; height:80px; flex:none; }.fp-editor-portrait .fp-fox { width:100%; height:100%; }.fp-feedback strong { display:block; font-size:13px; color:#a2817e; margin-bottom:3px; }.fp-controls { display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:57px; }.fp-tools { display:flex; gap:10px; }.fp-wait { color:#6c9290; font-size:18px; }
.fp-help { width:min(660px,calc(100% - 26px)); max-height:90dvh; padding:22px; border:2px solid #a9c2bf; border-radius:8px; background:#fffdf2; color:#405d65; font-size:18px; line-height:1.5; }.fp-help::backdrop { background:#405d6555; }.fp-help h2 { font-size:25px; }
.fp-finish { text-align:center; }.fp-finish h2 { font-size:31px; color:#4d8185; margin:16px 0 10px; }.fp-finish > p { font-size:19px; }.fp-celebration { display:grid; grid-template-columns:150px 210px 230px; justify-content:center; align-items:center; gap:14px; margin:18px 0; }.fp-celebration > svg { width:100%; height:auto; }.fp-book-cover { border:3px solid #739f9e; border-left:12px solid #5a8789; border-radius:6px; min-height:260px; padding:18px 12px 8px; box-shadow:5px 5px 0 #dde2d1; }.fp-book-cover > span { font-size:20px; line-height:1.3; font-weight:750; display:block; }.fp-book-cover > svg { width:110px; height:140px; }.fp-cover-0 { background:#c1dfd3; color:#43696c; }.fp-cover-1 { background:#f0c2b0; color:#7f5d5b; }.fp-cover-2 { background:#d7c4e4; color:#706080; }.fp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }.fp-stats > div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid #c5d6cd; border-radius:6px; background:#fffdf2; }.fp-stats strong { font-size:28px; color:#4f9597; }.fp-stats span { font-size:14px; }.fp-finish-actions { display:flex; justify-content:center; gap:12px; margin:16px 0; }.fp-finish details { text-align:left; border-top:1px solid #bdd2c9; padding:9px 0; font-size:18px; line-height:1.5; }.fp-finish summary { cursor:pointer; padding:10px 0; font-weight:750; }.fp-bonus-options { display:flex; gap:10px; }.fp-bonus-feedback { min-height:54px; margin:10px 0; }
.fp-bound-book { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:16px 0; border:2px solid #b8bfae; border-radius:7px; box-shadow:0 5px 0 #cfd9ca; min-height:370px; background:#fffdf2; }.fp-book-picture { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 18px; border-right:8px double #bbbfac; }.fp-book-picture .fp-illustration { height:210px; }.fp-book-picture > span { font-size:13px; margin:12px 0; }.fp-book-text { padding:20px; min-width:0; }.fp-part-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.fp-part-tabs button { padding:8px; border:2px solid #c7cec2; background:#fffdf2; color:#577c7d; font-size:16px; }.fp-part-tabs button[aria-selected="true"] { background:#e1eee4; border-color:#6d9b9a; font-weight:750; }.fp-fragment { padding:18px 0; min-height:200px; }.fp-fragment h3 { font-size:19px; color:#61908e; margin:0 0 12px; }.fp-fragment p { font-size:21px; line-height:1.45; margin-bottom:20px; }.fp-fragment > span { font-size:14px; color:#8b9487; }.fp-book-navigation { display:flex; justify-content:center; gap:12px; align-items:center; font-size:16px; }.fp-covers { display:flex; justify-content:center; gap:20px; padding:15px; margin:20px 0; border:0; border-top:1px solid #bdd2c9; }.fp-covers legend { margin:auto; padding:0 10px; font-size:15px; }.fp-covers label { display:flex; gap:7px; align-items:center; min-height:48px; font-size:15px; cursor:pointer; }.fp-covers input { width:22px; height:22px; accent-color:#4a9296; }.fp-cover-swatch { display:block; width:25px; height:30px; border:1px solid #9caea5; border-radius:3px; }
@keyframes fp-press-roll { 50% { transform:translateY(3px); } }
@keyframes fp-paper-print { from { transform:translateY(-20px); opacity:.1; } to { transform:translateY(0); opacity:1; } }
@keyframes fp-illustration-live { 0% { transform:translate(0,0); } 45% { transform:translate(20px,-8px); } 100% { transform:translate(0,0); } }
.phase-printing .fp-rollers { animation:fp-press-roll .35s ease-in-out 6; }.phase-printing .fp-sheet { animation:fp-paper-print 1.2s ease both; }.phase-printing .fp-lever { transform-origin:285px 119px; animation:fp-press-roll .7s ease 3; }.fp-animated .fp-moving-items { animation:fp-illustration-live 2.2s ease both; }.fp-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .fp-shell { padding-top:3px; }.fp-toolbar { min-height:60px; }.fp-mini-scene { height:105px; }.fp-mini-press,.fp-mini-press .fp-press { height:95px; }.fp-mini-scene .fp-illustration { height:105px; }.fp-editor { min-height:426px; }.fp-feedback { min-height:94px; margin-top:8px; } }
@media (max-width:1000px) { .fp-editor { gap:12px; }.fp-page { padding-left:12px; padding-right:9px; }.fp-shell .fp-card { font-size:17px; }.fp-shell .fp-slot { font-size:16px; }.fp-mini-scene { grid-template-columns:1fr 100px; }.fp-mini-press,.fp-mini-press .fp-press { height:90px; }.fp-toolbar { grid-template-columns:auto 1fr auto 48px; }.fp-motion { grid-column:1/-1; justify-self:end; }.fp-celebration { grid-template-columns:120px 190px 170px; } }
@media (max-width:760px) { .fp-editor { grid-template-columns:1fr; gap:14px; min-height:0; }.fp-tray { grid-template-columns:1fr 1fr; min-height:0; gap:9px; }.fp-shell .fp-card { min-height:95px; font-size:17px; }.fp-tray-empty { min-height:80px; grid-column:1/-1; }.fp-mini-scene { height:100px; grid-template-columns:1fr 140px; }.fp-mini-scene .fp-illustration { height:100px; }.fp-page { padding:10px 12px 12px 16px; }.fp-shell .fp-slot { min-height:57px; font-size:17px; }.fp-feedback { min-height:130px; font-size:17px; }.fp-heading { align-items:start; flex-direction:column; gap:4px; }.fp-heading h2 { font-size:23px; }.fp-heading > span { font-size:14px; }.fp-controls { flex-wrap:wrap; }.fp-bound-book { grid-template-columns:1fr; }.fp-book-picture { border-right:0; border-bottom:6px double #bbbfac; padding:15px; }.fp-book-picture .fp-illustration { height:155px; }.fp-fragment { min-height:185px; }.fp-book-navigation { flex-wrap:wrap; }.fp-celebration { grid-template-columns:105px 180px; }.fp-celebration > .fp-press { display:none; } }
@media (max-width:600px) { body.printshop-game #app { width:calc(100% - 14px); }.fp-toolbar { grid-template-columns:1fr auto 48px; gap:7px; min-height:0; }.fp-toolbar > div { grid-column:1/3; grid-row:1; }.fp-toolbar h1 { font-size:19px; }.fp-toolbar .fp-back { grid-row:2; }.fp-toolbar [data-fp-action="help"] { grid-row:2; grid-column:2; }.fp-toolbar .fp-sound { grid-row:2; grid-column:3; }.fp-motion { grid-row:1; grid-column:3; justify-self:center; justify-content:center; flex-direction:column; font-size:10px; margin:0; }.fp-motion input { width:26px; height:26px; }.fp-shell .fp-card { padding:8px; font-size:16px; min-height:110px; }.fp-mini-scene { height:85px; grid-template-columns:1fr 100px; }.fp-mini-scene .fp-illustration,.fp-mini-press,.fp-mini-press .fp-press { height:85px; }.fp-heading h2 { font-size:22px; }.fp-page { padding-left:9px; padding-right:7px; border-left-width:5px; }.fp-slot { margin-bottom:6px; }.fp-feedback { padding:8px; gap:8px; min-height:150px; }.fp-editor-portrait { width:48px; height:64px; }.fp-controls { gap:12px; }.fp-controls > .fp-primary { width:100%; }.fp-tools { flex-wrap:wrap; }.fp-intro h2 { font-size:31px; }.fp-intro p { font-size:17px; }.fp-intro .fp-intro-note { font-size:14px; }.fp-finish h2 { font-size:28px; }.fp-finish > p { font-size:17px; }.fp-stats { grid-template-columns:1fr; gap:8px; }.fp-stats > div { flex-direction:row; gap:12px; align-items:center; text-align:left; }.fp-stats strong { min-width:35px; }.fp-finish-actions { flex-direction:column; }.fp-bonus-options { flex-wrap:wrap; }.fp-finish details { font-size:17px; }.fp-celebration { grid-template-columns:95px 170px; gap:5px; }.fp-book-cover { min-height:240px; }.fp-book-cover > span { font-size:18px; }.fp-book-text { padding:13px; }.fp-fragment p { font-size:20px; }.fp-covers { flex-wrap:wrap; gap:5px 15px; padding:10px 0; }.fp-covers label { font-size:13px; }.fp-cover-swatch { width:20px; height:26px; } }
@media (prefers-reduced-motion:reduce) { .fp-shell * { animation:none!important; transition:none!important; } }
.fp-part { position:relative; padding-right:50px; }.fp-part-heading { padding-right:0; }.fp-shell .fp-info { position:absolute; right:0; top:12px; }.fp-selection-summary { display:none; }
.fp-dragging { opacity:.65; outline:3px dashed #6a9ca5; outline-offset:2px; }
.fp-story-character > svg { height:calc(100% - 24px); transform-origin:50% 92%; }
.fp-arm-left { transform-box:fill-box; transform-origin:100% 0; }.fp-arm-right { transform-box:fill-box; transform-origin:0 2px; }
@keyframes fp-character-hop { 0%,100% { transform:translateY(0) scale(1,1); } 15%,85% { transform:translateY(0) scale(1.07,.92); } 45%,55% { transform:translateY(-18px) scale(.97,1.03); } }
@keyframes fp-character-dance { 0%,100% { transform:translateX(0) rotate(0); } 25% { transform:translateX(-7px) rotate(-8deg); } 75% { transform:translateX(7px) rotate(8deg); } }
@keyframes fp-clap-left { 0%,100% { transform:rotate(-15deg); } 45%,60% { transform:rotate(-150deg); } }
@keyframes fp-clap-right { 0%,100% { transform:rotate(15deg); } 45%,60% { transform:rotate(160deg); } }
@keyframes fp-dance-arm-left { 0%,100% { transform:rotate(5deg); } 50% { transform:rotate(55deg); } }
@keyframes fp-dance-arm-right { 0%,100% { transform:rotate(-55deg); } 50% { transform:rotate(-5deg); } }
@keyframes fp-dance-foot { 0%,50%,100% { transform:translateY(0); } 25% { transform:translateY(-6px); } }
.fp-animated.fp-hop .fp-story-character > svg { animation:fp-character-hop .55s ease-in-out 4 both; }
.fp-animated.fp-dance .fp-story-character > svg { animation:fp-character-dance .55s ease-in-out 4 both; }
.fp-animated.fp-dance .fp-arm-left { animation:fp-dance-arm-left .55s ease-in-out 4 both; }.fp-animated.fp-dance .fp-arm-right { animation:fp-dance-arm-right .55s ease-in-out 4 both; }
.fp-animated.fp-dance .fp-foot-left { animation:fp-dance-foot .55s ease-in-out 4 both; }.fp-animated.fp-dance .fp-foot-right { animation:fp-dance-foot .55s ease-in-out -.275s 4 both; }
.fp-animated.fp-clap .fp-arm-left { animation:fp-clap-left .55s ease-in-out 4 both; }.fp-animated.fp-clap .fp-arm-right { animation:fp-clap-right .55s ease-in-out 4 both; }
@media (max-width:760px) { .fp-selection-summary { display:flex; flex-direction:column; gap:4px; position:sticky; top:5px; z-index:5; background:#fffdf2; border:2px solid #6599a3; border-radius:6px; padding:9px 12px; box-shadow:0 3px 0 #c4d4ce; font-size:16px; line-height:1.35; }.fp-selection-summary strong { font-size:12px; color:#5a929a; } }