#village-game[data-game=paint]>header{position:sticky;top:0;z-index:4;background:#123832;padding:10px 62px 10px 18px;min-height:64px}
#village-game[data-game=paint] .vg-host{flex-basis:44px;height:44px}
#village-game[data-game=paint] h2{font-size:24px}
#village-game[data-game=paint] .vg-close{top:8px;min-width:48px;min-height:48px}
#village-game[data-game=paint] .vg-mix-flow{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;margin:10px auto;color:#ffe7a0;overflow:hidden}
#village-game[data-game=paint] .vg-mix-flow i{display:block;width:38px;height:38px;flex:none;border:3px solid #cfb878;border-radius:50%;background:var(--pigment);box-shadow:inset 0 -5px 8px #0003}
#village-game[data-game=paint] .vg-mix-flow b{font-size:22px}
#village-game[data-game=paint] .vg-mixing .vg-flow-first{animation:vg-colour-pour .7s ease both;--shift:48px}
#village-game[data-game=paint] .vg-mixing .vg-flow-second{animation:vg-colour-pour .7s ease both;--shift:-20px}
#village-game[data-game=paint] .vg-mixing .vg-flow-result{animation:vg-colour-result 1.05s ease both}
#village-game[data-game=paint] .vg-help{text-align:left;margin:12px auto 0;max-width:450px}
#village-game[data-game=paint] .vg-help summary{padding:10px;min-height:44px;cursor:pointer}
@keyframes vg-colour-pour{0%{transform:translateX(0)}60%{transform:translateX(var(--shift)) scale(.75)}100%{transform:translateX(0)}}
@keyframes vg-colour-result{0%,35%{opacity:.15;transform:scale(.5)}75%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@media(max-height:520px){
 #village-game[data-game=paint]>header{padding:4px 62px 4px 14px;min-height:52px;gap:10px}
 #village-game[data-game=paint]>header small{display:none}
 #village-game[data-game=paint] .vg-host{flex-basis:36px;height:36px}
 #village-game[data-game=paint] .vg-close{top:2px}
 #village-game[data-game=paint]>main{padding:8px 14px}
 #village-game[data-game=paint]>main:has(.vg-paint-target){display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:center}
 #village-game[data-game=paint] p{margin:3px 0;font-size:12px}
 #village-game[data-game=paint] .vg-swatch{height:44px;width:100px;margin:10px auto}
 #village-game[data-game=paint] .vg-pigments button{min-height:48px;padding:4px 8px;font-size:13px}
 #village-game[data-game=paint] .vg-pigments i{width:20px;height:20px;margin:0 auto 3px}
 #village-game[data-game=paint] .vg-mix-flow{min-height:32px;margin:5px auto;gap:9px}
 #village-game[data-game=paint] .vg-mix-flow i{width:27px;height:27px}
 #village-game[data-game=paint] .vg-feedback{min-height:16px;font-size:11px}
 #village-game[data-game=paint] [data-mix]{min-height:44px;padding:6px 14px}
 #village-game[data-game=paint]>footer{display:none}
 #village-game[data-game=paint] .vg-short-rule{margin:4px;font-size:20px}
 #village-game[data-game=paint] .vg-result{padding:4px}
 #village-game[data-game=paint] .vg-result>span{font-size:28px}
 #village-game[data-game=paint] .vg-result h3{font-size:22px;margin:5px}
}
@media(prefers-reduced-motion:reduce){#village-game[data-game=paint] .vg-mixing i{animation:none!important}}
#village-game[data-game=paint]>header>div:not(.vg-host){flex:1;text-align:left;min-width:0}
#village-game[data-game=paint]>main{min-height:0!important;height:auto!important;margin:0!important}
@media(max-height:520px){#village-game[data-game=paint]>main:has(.vg-paint-target){align-content:start;grid-template-rows:auto}#village-game[data-game=paint] .vg-paint-actions{min-width:0}}