.colors-app { max-width:760px; }
.colors-app svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.colors-welcome { display:grid; justify-items:center; gap:4px; padding:8px 0 2px; text-align:center; }
.colors-welcome h1 { margin:4px 0 0; font-size:clamp(28px,8vw,48px); letter-spacing:.08em; }
.colors-welcome p { margin:0; color:var(--muted); font-size:15px; }
.colors-rainbow { display:flex; align-items:end; justify-content:center; width:132px; height:112px; padding:14px; overflow:hidden; border-radius:30px; background:var(--panel); box-shadow:0 12px 30px #6d64b52c; transform:rotate(-2deg); }
.colors-rainbow i { display:block; width:14px; height:calc(42px + var(--rainbow-step, 0px)); margin:0 -1px; border-radius:12px 12px 3px 3px; background:var(--rainbow-color); }
.colors-rainbow i:nth-child(1),.colors-rainbow i:nth-child(7) { height:50px; }
.colors-rainbow i:nth-child(2),.colors-rainbow i:nth-child(6) { height:66px; }
.colors-rainbow i:nth-child(3),.colors-rainbow i:nth-child(5) { height:78px; }
.colors-rainbow i:nth-child(4) { height:84px; }
.colors-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(100%,560px); margin:0 auto; }
.family-games .colors-tile { display:block; width:100%; min-height:0; padding:0; aspect-ratio:1; color:var(--color-ink); border-color:#fff5; border-radius:30px; background:var(--color); box-shadow:0 9px 22px #3520441c; }
.family-games .colors-tile:hover:not(:disabled) { color:var(--color-ink); border-color:#fff5; background:var(--color); }
.colors-tile:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc((100% - 12px) / 2); }
.colors-card-screen { position:fixed; z-index:30; inset:0; width:100%; max-width:none; height:100dvh; margin:0; padding:0; gap:0; overflow:hidden; }
.family-games .colors-full-card { display:grid; justify-items:center; align-content:center; gap:24px; width:100%; height:100%; padding:max(90px,calc(76px + env(safe-area-inset-top))) 20px max(42px,env(safe-area-inset-bottom)); color:var(--color-ink); border:0; background:var(--color); }
.family-games .colors-full-card:hover:not(:disabled) { color:var(--color-ink); border-color:transparent; background:var(--color); }
.colors-full-card > span { font:900 clamp(110px,40vw,250px)/.8 system-ui; text-shadow:0 5px 20px #0002; }
.colors-full-card > strong { max-width:100%; font-size:clamp(38px,11vw,78px); line-height:1; text-align:center; overflow-wrap:anywhere; text-shadow:0 3px 14px #0002; }
.colors-full-card > i { display:grid; place-items:center; width:66px; height:66px; border-radius:50%; color:var(--color-ink); background:#fff4; }
.colors-full-card svg { width:34px; height:34px; }
body.colors-card-open { overflow:hidden; }
@media(min-width:700px) { .colors-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:700px; } .colors-tile:last-child:nth-child(odd) { width:calc((100% - 24px) / 3); } }
@media(max-width:380px) { .colors-grid { gap:9px; } .family-games .colors-tile { border-radius:24px; } }