@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

:root{--navy:#082d69;--blue:#0755a7;--sky:#8adfff;--gold:#ffc532;--cream:#fff9e8;--green:#58c83d;--green-dark:#258d29;--ink:#102c57}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:#77c9f4}
body{margin:0;min-height:100svh;color:var(--ink);font-family:Fredoka,system-ui,sans-serif;background:
  linear-gradient(180deg,#7cd4ff22 0,#fff0 65%),
  url('assets/plaza-background.webp') center top/cover fixed no-repeat}
body:after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffff10 0,#ffffff08 48%,#0a522a2b 100%)}
button,a{font:inherit}a:focus-visible,button:focus-visible{outline:4px solid #fff;outline-offset:3px}
.app{width:min(100%,720px);min-height:100svh;margin:auto;padding:10px 14px 28px;display:flex;flex-direction:column}
.hero{text-align:center}
.hero-logo{display:block;width:min(62vw,320px);height:auto;margin:0 auto -10px;filter:drop-shadow(0 7px 4px #17435a55)}
.hero-copy{width:min(92%,520px);margin:0 auto 18px;color:#123766;font-size:clamp(.95rem,2.7vw,1.08rem);font-weight:600;line-height:1.35;text-shadow:0 1px #fff}
.games{display:grid;gap:18px}
.game-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:21px 19px 18px;border:4px solid white;border-radius:25px;background:linear-gradient(180deg,#fffdf2,#fff0c8);color:var(--ink);text-decoration:none;box-shadow:0 0 0 5px var(--navy),0 7px 0 5px #03336d,0 14px 24px #194b605f;overflow:hidden}
.game-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:8px;background:linear-gradient(90deg,#2cb6ff,#ffd647,#7fd340,#a861e7,#ff5c5c)}
.game-card.featured{padding-top:28px;box-shadow:0 0 0 5px #07509e,0 8px 0 5px #f0a51d,0 16px 28px #194b6066}
.card-copy{position:relative;z-index:1;min-width:0;height:100%;display:flex;flex-direction:column}.eyebrow{display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;color:#94600a;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.eyebrow:before{content:"★";color:#eea500}.game-card h2{margin:0;color:#064f9e;font-size:clamp(1.65rem,6vw,2.35rem);line-height:1;text-transform:uppercase;text-shadow:0 2px white}
.game-card p{max-width:430px;margin:9px 0 12px;color:#355172;font-size:.94rem;line-height:1.35}
.facts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.fact{padding:5px 9px;border:1px solid #e4bd67;border-radius:999px;background:#fff8df;color:#73510c;font-size:.72rem;font-weight:700}
.play-button{display:block;min-width:178px;margin-top:auto;padding:12px 18px;border:2px solid #c9ff9d;border-radius:16px;background:linear-gradient(#73df49,#43ad2f);color:#fff;text-align:center;font-weight:700;text-transform:uppercase;box-shadow:0 4px 0 var(--green-dark);text-shadow:0 2px #267522}
.tile-art{display:grid;grid-template-columns:repeat(3,42px);gap:5px;transform:rotate(-2deg)}
.tile{display:grid;place-items:center;width:42px;height:44px;border:2px solid #fff;border-radius:10px;color:#fff;font-size:1.22rem;font-weight:700;text-shadow:0 2px #0006;box-shadow:0 3px 0 #083f87,0 4px 8px #12385b50}
.tile:nth-child(5n+1){background:linear-gradient(#ffd746,#f4a613)}.tile:nth-child(5n+2){background:linear-gradient(#78db55,#35a443)}.tile:nth-child(5n+3){background:linear-gradient(#ee6b80,#cb2a4b)}.tile:nth-child(5n+4){background:linear-gradient(#79d8ff,#1788d4)}.tile:nth-child(5n){background:linear-gradient(#b77aef,#7541c5)}
.tile.dim{background:linear-gradient(#d9eaff,#8cc7ef);color:#174b7c}.tile.arrow{background:transparent;border:0;color:#07509e;box-shadow:none;font-size:1.5rem}
.coming-soon{margin:25px 3px 0;padding:15px 18px;border:2px solid #fff8dc;border-radius:18px;background:#073f79d9;color:#fff;text-align:center;box-shadow:0 5px 0 #062c57}.coming-soon b{display:block;color:#ffdc52}.coming-soon span{font-size:.84rem;color:#dbeeff}
.site-footer{margin-top:auto!important;color:#163e5e!important;text-shadow:0 1px #fff}.site-footer a,.site-footer button{color:#0a477c!important;font-weight:700!important}
@media(max-width:530px){.app{padding-inline:11px}.hero-logo{width:min(78vw,280px);margin:0 auto -6px}.game-card{grid-template-columns:1fr;padding:24px 16px 17px}.tile-art{position:absolute;right:12px;top:54px;grid-template-columns:repeat(3,34px);opacity:.96}.tile{width:34px;height:36px;font-size:1rem}.game-card h2{max-width:58%}.game-card p{margin-top:56px;padding-right:0}.play-button{width:100%}}
@media(min-width:760px){.app{padding-top:18px}.games{grid-template-columns:1.08fr .92fr;align-items:stretch}.game-card{grid-template-columns:1fr;min-height:350px}.tile-art{position:absolute;right:18px;top:68px;grid-template-columns:repeat(3,36px);gap:4px}.tile-art .tile{width:36px;height:38px;font-size:1.05rem}.game-card h2{max-width:55%}.game-card p{margin-top:38px}.facts{margin-bottom:18px}}