/* Home: all coloring games. v9 */
#home{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:calc(14px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom));touch-action:pan-y}
#hGrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.hcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 10px 26px rgba(60,40,140,.12),0 0 0 1px rgba(124,92,255,.08);min-height:56px;transition:transform .15s}
.hcard:active{transform:scale(.97)}
@media (hover:hover){.hcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(60,40,140,.2),0 0 0 3px #ffd1ea}}
.hcard .hp{aspect-ratio:4/3;background:#f4f1ff center/cover no-repeat;display:block}
.hcard .ht{padding:9px 12px 12px;display:flex;flex-direction:column;gap:2px}
.hcard b{font-size:16px;font-weight:900;line-height:1.15}
.hcard small{font-size:12.5px;font-weight:700;opacity:.62;line-height:1.25}
.hcard .new{position:absolute;top:8px;left:8px;background:linear-gradient(90deg,#7c5cff,#ff4fa3);color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:3px 9px;letter-spacing:.5px}
.homebtn{width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(60,40,140,.13);color:var(--ink);flex:0 0 auto;text-decoration:none;margin-right:10px}
.homebtn svg{width:26px;height:26px}
.phead .logo{min-width:0}
@media (min-width:700px){#hGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}.hcard b{font-size:18px}.hcard small{font-size:13.5px}}
@media (max-width:480px){.dmode .phead h1{font-size:26px}.dmode .phead .sub{letter-spacing:1px;font-size:11px}.homebtn{width:56px;height:56px;margin-right:8px}}