:root{font-family:Nunito,system-ui,"Noto Sans",sans-serif;font-size:16px;color:#f4eacf;background:#1a1c2c}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;height:100dvh;overflow:hidden}button,select{font:inherit;min-width:44px;min-height:44px;padding:.4rem .65rem;border:2px solid #947b91;border-radius:.45rem;color:#1a1c2c;background:#fff1cf;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere}button:disabled{opacity:.45;cursor:default}button.primary{background:#ffcd75;border-color:#ef7d57}button.selected{border-color:#ef7d57;background:#ffe0a5;box-shadow:inset 0 0 0 1px #b13e53}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #41a6f6;outline-offset:2px}h1,h2,h3,p{margin:0}h1{font-size:1.55rem;line-height:1.15}h2{font-size:1.15rem}h3{font-size:1rem}p{line-height:1.42}#app{height:100%;position:relative;overflow:hidden;background:radial-gradient(ellipse at top,#333047,#1a1c2c)}#game-view{height:100%;display:flex;flex-direction:column;gap:.25rem;padding:.4rem;min-height:0;min-width:0}#game-header{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex:none;min-width:0}#game-header>div{min-width:0}#picture-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}#progress{font-size:.8rem;color:#d9c09b}#pause-game{width:44px;padding:0;flex:none}#palette{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:.3rem;flex:none;min-width:0;overflow-x:auto;padding:.2rem 0;scrollbar-width:thin}#palette button{display:flex;align-items:center;justify-content:center;gap:.3rem;min-width:44px;padding:.15rem .3rem;overflow-wrap:normal}#palette i{width:.85rem;height:.85rem;display:block;flex:none;border:1px solid #1a1c2c}#palette span{display:flex;flex-direction:column;align-items:center;font-weight:900;line-height:1.05}#palette small{font-size:.65rem;font-weight:600;margin-top:.15rem}#canvas-holder{flex:1;min-height:80px;min-width:0;overflow:hidden;background:#23263b;border:2px solid #6c596f;border-radius:.35rem;display:flex;align-items:center;justify-content:center}#field{display:block;touch-action:none;user-select:none;max-width:100%;max-height:100%;image-rendering:pixelated}#caption{min-height:1.1em;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d9c09b;flex:none}#game-actions{display:flex;gap:.3rem;flex:none;overflow-x:auto;min-width:0;padding:.1rem 0;scrollbar-width:thin}#game-actions button{flex:1;white-space:nowrap;font-size:.85rem;min-width:44px}#panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.5rem;background:#1a1c2ce8;z-index:5}#panel-card{background:#fff1cf;color:#1a1c2c;border:3px solid #947b91;box-shadow:0 7px 0 #5d275d,0 12px 35px #0005;border-radius:.55rem;padding:.8rem;max-width:min(76rem,100%);width:max-content;min-width:0;max-height:calc(100dvh - 1.3rem);overflow:auto;overflow-wrap:anywhere}#panel-title{margin-bottom:.6rem}#panel-body{display:flex;flex-direction:column;gap:.6rem;min-width:0}#panel-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;position:sticky;bottom:-.8rem;padding:.65rem 0 .05rem;background:#fff1cff5;margin-top:.6rem;z-index:2}.hero{width:100%;max-width:38rem;max-height:40dvh;object-fit:contain;align-self:center;image-rendering:pixelated}.tagline{font-weight:900;font-size:1.05rem}.stats{display:flex;gap:.5rem 1rem;flex-wrap:wrap;font-weight:900}.muted{color:#685b68}.warning{color:#814132;background:#f7d7ac;padding:.55rem;border:1px solid #c8875b;border-radius:.35rem}.badge{color:#6e3864;font-weight:900}.filters{display:flex;gap:.4rem;flex-wrap:wrap}.filters label{display:flex;gap:.2rem;flex-direction:column;flex:1;min-width:min(9rem,100%);font-size:.8rem}.filters select{max-width:100%;min-width:0}.picture-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}.picture-card{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:.5rem;border:1px solid #b8a7a8;border-radius:.4rem;background:#eadebc}.picture-card canvas{width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border-radius:.15rem}.picture-card p{font-size:.8rem}.picture-card h3{flex:1}.picture-card button{width:100%}.section{display:flex;flex-direction:column;gap:.5rem}.collect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.collect-card{display:flex;flex-direction:column;gap:.4rem;border:1px solid #b8a7a8;border-radius:.4rem;background:#eadebc;padding:.6rem;min-width:0}.collect-card img{width:100%;height:8rem;object-fit:contain;image-rendering:pixelated}.collect-card p{font-size:.8rem}.frame-swatch{height:3.5rem;border:8px solid #5d275d;background:#1a1c2c}.setting{display:flex;gap:.5rem;justify-content:space-between;align-items:center;min-width:0}.setting>span{min-width:0;flex:1}.setting select{max-width:66%;min-width:0}.result-art{width:min(18rem,100%);height:auto;aspect-ratio:1;image-rendering:pixelated;align-self:center}.curator{width:7rem;height:5.5rem;align-self:center;image-rendering:pixelated;flex:none}.keepsake{width:100%;max-width:13rem;height:8rem;object-fit:contain;align-self:center;image-rendering:pixelated}#notice{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);z-index:9;width:max-content;max-width:calc(100% - 1rem);padding:.5rem .7rem;border:2px solid #ffcd75;border-radius:.35rem;background:#5d275d;color:#fff1cf;pointer-events:none;font-size:.85rem;overflow-wrap:anywhere}.less-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.large-text #palette{display:flex;flex-wrap:nowrap}.large-text #palette button{min-width:3rem;flex:1 0 3rem}.large-text #game-actions button{flex:1 0 auto}.large-text #picture-title{font-size:.8rem}.large-text #progress{font-size:.65rem}.large-text #caption{font-size:.55rem}.large-text #game-actions button{font-size:.7rem}@media(max-width:700px){#palette{grid-template-columns:repeat(4,minmax(44px,1fr))}.picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{max-height:32dvh}#panel-card{padding:.6rem}#panel-actions{bottom:-.6rem}.filters label{min-width:min(7rem,100%)}}@media(max-height:450px){#game-view{gap:.18rem;padding:.3rem}#palette{display:flex;flex-wrap:nowrap}#palette button{min-width:3rem;flex:1 0 3rem}#game-actions button{flex:1 0 auto}#picture-title{font-size:.85rem}#progress{font-size:.7rem}#caption{display:none}.hero{max-height:31dvh}.curator{width:5rem;height:3.7rem}.collect-card img{height:6rem}}@media(max-width:360px){.collect-grid{grid-template-columns:1fr}#panel-card{width:100%}}
