/* Portalship studio home page */
.grad { background: linear-gradient(100deg, var(--sea), var(--accent) 55%, #8a5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bit { transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)); height: 20px; }
.float { animation: bob 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.hub-hero { padding-top: clamp(120px, 15vw, 190px); padding-bottom: clamp(50px, 8vw, 90px); overflow: hidden; }
.hub-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.hub-hero h1 { margin-bottom: 22px; }
.hub-hero .lead { margin-bottom: 30px; }
.hub-art { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.big-boat { width: min(380px, 70%); }
.big-boat img { width: 100%; display: block; transform-origin: 50% 92%; animation: hubrock 5.4s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .12)); }
@media (prefers-color-scheme: dark) { .big-boat img { filter: invert(1) drop-shadow(0 18px 18px rgba(0, 0, 0, .3)); } }
@keyframes hubrock { 0%, 100% { transform: rotate(-2deg) translateY(2px); } 50% { transform: rotate(2deg) translateY(-10px); } }
@media (max-width: 820px) { .hub-hero .wrap { grid-template-columns: 1fr; } .hub-art { min-height: 260px; } }

/* game tiles: one per game, each links to that game's own page */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 44px; }
.tile { display: flex; flex-direction: column; background: var(--card); border-radius: 36px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 1px 0 var(--line); transition: transform .4s, box-shadow .4s; min-height: 100%; }
a.tile:hover { transform: translateY(-8px); box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .5); }
.tile-shot { height: 280px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 30px; background: linear-gradient(var(--bg2), var(--card)); }
.tile-shot .phone { --w: 210px; transition: transform .5s; }
a.tile:hover .tile-shot .phone { transform: translateY(-10px); }
.tile-copy { padding: 22px 28px 30px; }
.tile .tag { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.tile h3 { font-size: 1.8rem; letter-spacing: -.025em; margin-bottom: 6px; }
.tile p { color: var(--muted); margin: 0 0 12px; }
.tile .more { font-weight: 700; color: var(--accent); }
.tile.soon { background: transparent; border: 2px dashed var(--line); box-shadow: none; justify-content: center; }
.tile.soon .tile-copy { padding: 40px 30px; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 40px; }
.principles b { display: block; font-size: 1.3rem; letter-spacing: -.015em; margin-bottom: 6px; }
.principles p { color: var(--muted); margin: 0; }
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; gap: 22px; } }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: 20px; } }