@font-face{font-family:Fredoka;src:url('fonts/Fredoka.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
body[data-design="5"]{--display:Fredoka,'Trebuchet MS',sans-serif}
/* The lettering is a steady paper silhouette on the same grid in every island. */
.wordmark-lettering,.wordmark-accent{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:600;font-variation-settings:'wdth' 100;letter-spacing:0;fill:#322c54;stroke:#fffaf0;stroke-width:6px;stroke-linejoin:round;paint-order:stroke fill}
#app .card{border:3px solid #322c54;box-shadow:0 0 0 3px #fffaf0;border-radius:18px}
#app .card:is(:hover,:active,.is-selecting){box-shadow:0 0 0 3px #fffaf0}
#app .card::after{inset:6px;border-radius:10px}
#app .card .card-picture{flex-basis:73%;height:73%;padding:26px 14px 0}
#app .card .card-wordmark{flex-basis:27%;height:27%;padding:0 22px 14px}
#app .card .card-picture>svg{display:block;width:100%;height:100%;overflow:hidden}
#app .card .card-number{top:12px;left:12px;background:#fffaf0;border:2px solid #322c54;color:#322c54;border-radius:6px;z-index:1}
#app .played{background:#fffaf0;color:#322c54;border:2px solid #322c54;border-radius:6px}
.market h1,.teddy-heading h1{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:600;letter-spacing:-.015em;-webkit-text-stroke:5px #fffaf0;paint-order:stroke fill}
.teddy-guide h2{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:600;letter-spacing:0;line-height:1.14}
.paper-experience{--scene-fill:var(--party-yellow)}
.paper-experience[data-category="Build"],.paper-experience[data-category="Move"]{--scene-fill:var(--party-teal)}
.paper-experience[data-category="Make"],.paper-experience[data-category="Music"]{--scene-fill:var(--party-pink)}
.paper-experience .teddy-world{background:var(--scene-fill)}
.paper-experience .teddy-guide{background:#fffaf0}
.paper-experience .teddy-chapters li>span{background:#fffaf0}
.paper-experience .teddy-chapters [aria-current]>span{background:var(--party-pink)}
.paper-experience .teddy-chapters li{color:#51476f}
.paper-materials{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;margin:24px 0 0}
.paper-materials li{font-size:14px;line-height:1.35;display:flex;align-items:center;gap:10px}
.paper-materials li::before{content:'';flex:none;width:12px;height:12px;background:var(--party-teal);border:2px solid #322c54;border-radius:50%}
#app .paper-steps .action-button{font-size:12px;white-space:normal}
.paper-awards{display:grid;gap:12px}
.paper-round-timer{margin-top:20px}
.paper-round-timer .teddy-timer-popover{position:static;display:grid;grid-template-columns:1fr 1fr;background:var(--party-yellow);width:100%;padding:16px;gap:10px}
.paper-round-timer .timer,.paper-round-timer p{grid-column:1/-1}
.paper-round-timer .teddy-timer-popover p{margin:0}
#app .paper-round-timer .action-button{--button-width:100%;font-size:12px}
body[data-design="5"] #host-dialog{background:#fffaf0;border:3px solid #322c54;box-shadow:0 0 0 5px #fffaf0;border-radius:18px}
body[data-design="5"] #host-dialog h2,body[data-design="5"] #host-dialog h3{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:600;letter-spacing:0}
body[data-design="5"] .summer-avatar{box-shadow:0 0 0 3px #fffaf0}
@media(max-height:800px) and (min-width:900px){
 #app .card .card-picture{flex-basis:65%;width:65%;height:100%;padding:25px 0 12px 12px}
 #app .card .card-wordmark{flex-basis:35%;width:35%;height:100%;padding:12px 16px 12px 0}
 .paper-round-timer{margin-top:14px}.paper-round-timer .teddy-timer-popover{padding:12px}.paper-round-timer .timer{font-size:34px}
}
@media(max-aspect-ratio:4/3) and (min-width:651px){
 .paper-experience .teddy-guide{gap:26px;padding:24px 30px}
 .paper-experience .teddy-primary{width:240px}
 .paper-materials{flex-direction:row;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
 .paper-steps{flex-wrap:wrap}
 .paper-round-timer .teddy-timer-popover{grid-template-columns:auto minmax(120px,1fr) 145px 145px;align-items:center}
 .paper-round-timer .timer,.paper-round-timer p{grid-column:auto}
}
@media(max-width:650px){
 #app .card .card-picture{flex-basis:72%;height:72%;padding:23px 8px 0}
 #app .card .card-wordmark{flex-basis:28%;height:28%;padding:0 16px 10px}
 .game-grid{grid-auto-rows:330px}
 .market h1{-webkit-text-stroke:3px #fffaf0;font-size:31px}
 .paper-experience .teddy-scene-slot{height:210px}
 .paper-experience .teddy-guide{padding:22px}
 .paper-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .paper-steps .action-button{--button-width:100%;font-size:12px}
 .paper-experience .teddy-primary{width:100%}
 .paper-experience .teddy-heading h1{font-size:28px}
 .paper-materials{margin-top:18px}
}

@media(min-width:1100px){
 .filters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
 #app .filters .action-button{--button-width:100%}
}
/* Celebration stays around the paper islands, leaving the demonstration readable. */
.game-grid,.teddy-world{position:relative;z-index:9}
#app .paper-awards [data-winner="1"]{background:var(--party-teal)}
#app .paper-awards [data-winner="2"]{background:var(--party-pink)}
#app .paper-awards [data-winner="tie"]{background:var(--party-yellow)}
/* A finished demonstration remains available to inspect. Again is the restart. */
#app .paper-experience:has([data-scene-ended="true"]) .teddy-picture-tools [data-action="motion"]{display:none}