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

:root{font-family:Nunito,Arial,sans-serif;color:#092b62;background:#bce8ff;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 20%,#dcf6ff 0%,#a9ddfc 48%,#bceaff 100%)}
.page-shell{max-width:1180px;min-height:100vh;margin:auto;padding:0 20px;background:radial-gradient(ellipse at 50% 6%,rgba(255,255,255,.45),transparent 45%)}
.site-header{height:118px;display:flex;align-items:center;gap:26px;padding:10px 35px}
.brand-mark{width:80px;height:70px;flex:none;color:#092b62}
.brand-mark svg{width:100%;height:100%}
.brand-divider{height:64px;border-left:2px solid #092b62}
.site-header h1{margin:0;font-size:clamp(17px,3vw,34px);line-height:1;font-weight:900;letter-spacing:-.025em;white-space:nowrap}
.featured{position:relative;isolation:isolate;height:405px;overflow:hidden;border:2px solid rgba(255,255,255,.85);border-radius:36px;box-shadow:0 8px 20px rgba(33,126,182,.22);background:#e7f5ff}
.featured-art{position:absolute;inset:0;z-index:-1;background-image:url('assets/castle-optimized.jpg');background-size:cover;background-position:center}
.featured:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.93),rgba(255,255,255,.54) 34%,transparent 58%)}
.week-badge{position:absolute;right:15px;top:14px;padding:5px 24px;border-radius:18px;background:linear-gradient(#ffdfaa,#ffb754);color:#092b62;font-size:25px;font-weight:900;box-shadow:inset 0 1px 1px white}
.featured-copy{position:absolute;left:35px;top:62px;width:47%}
.featured-copy h2{margin:0;font-size:clamp(42px,5.9vw,66px);line-height:.79;letter-spacing:-.035em;font-weight:900}
.featured-copy p{margin:17px 0 0;font-size:clamp(21px,2.65vw,30px);line-height:1.08;color:#101a78;font-weight:600}
.online-count{position:absolute;top:253px;left:0;white-space:nowrap;padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.45);font-size:clamp(20px,2.7vw,30px);color:#3c538e}
.play-button{display:flex;align-items:center;justify-content:center;gap:.25em;min-height:78px;border:2px solid #79c624;border-bottom-color:#146600;border-radius:30px;background:linear-gradient(#a6e54a 0%,#59c30d 45%,#31a600 100%);box-shadow:inset 0 3px 2px rgba(255,255,255,.85),inset 0 -5px 2px rgba(0,89,0,.25),0 5px 2px #164e08,0 8px 8px rgba(0,0,0,.18);color:white;text-decoration:none;text-shadow:0 3px 2px rgba(0,0,0,.6);font-family:inherit;font-size:clamp(33px,4.1vw,47px);line-height:1;font-weight:900;transition:transform .15s,filter .15s}
.play-button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.play-button:active{transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 2px 2px #164e08}
.play-button:focus-visible{outline:4px solid #092b62;outline-offset:4px}
.play-button:disabled{cursor:default;filter:grayscale(.65);opacity:.75;font-size:clamp(24px,3vw,34px)}
.play-button:disabled:hover{filter:none;transform:none}
.play-button span{font-family:Arial,sans-serif;font-size:.95em}
.featured-button{position:absolute;right:13px;bottom:16px;width:38%}
.games{padding-top:24px}
.section-title{display:flex;align-items:center;gap:25px;margin:0 17px 18px;font-size:clamp(33px,4.65vw,51px);line-height:1.15;letter-spacing:-.035em;font-weight:900}
.title-spark{position:relative;width:33px;height:46px;flex:none}
.title-spark:before,.title-spark:after{content:"";position:absolute;width:25px;height:5px;border-radius:5px;background:#ff9a25;transform:rotate(-39deg);top:8px;left:0}
.title-spark:after{transform:rotate(8deg);top:24px;left:7px}
.title-spark{background:linear-gradient(32deg,transparent 9px,#ff9a25 9px,#ff9a25 14px,transparent 14px) left bottom/28px 17px no-repeat}
.game-list{display:grid;gap:18px}
.game-card{display:grid;grid-template-columns:264px minmax(0,1fr) auto;grid-template-rows:1fr 77px;column-gap:22px;min-height:239px;padding:12px 15px 15px 17px;border:1.5px solid rgba(255,255,255,.94);border-radius:34px;background:linear-gradient(110deg,rgba(255,255,255,.76),rgba(255,255,255,.66));box-shadow:0 6px 12px rgba(46,130,183,.18),inset 0 0 25px rgba(255,255,255,.42)}
.game-art{position:relative;grid-row:1/3;min-width:0;height:211px}
.game-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:32px}
.rating{position:absolute;right:10px;top:10px;padding:3px 10px;border:1px solid rgba(255,255,255,.9);border-radius:16px;background:linear-gradient(#ffe892,#ffbd36);box-shadow:0 2px 6px rgba(31,48,65,.28);color:#092b62;font-size:18px;font-weight:900;line-height:1.2;white-space:nowrap}
.game-details{grid-column:2;grid-row:1;min-width:0}
.game-details h3{margin:0;font-size:clamp(36px,4.45vw,50px);line-height:1.06;letter-spacing:-.03em;font-weight:900}
.game-details p{margin:2px 0;font-size:clamp(20px,2.7vw,29px);line-height:1.12;color:#101a78;font-weight:600}
.player-count{grid-column:3;grid-row:1;white-space:nowrap;padding-top:3px;font-size:clamp(20px,2.45vw,27px);line-height:1.2;color:#607aba;font-weight:700}
.game-card .play-button{grid-column:2/4;grid-row:2;min-height:73px}
.catalog-intro{max-width:920px;margin:28px auto 0;padding:18px 24px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.55)}
.catalog-intro h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);line-height:1.15}
.catalog-intro p{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.45;color:#142e6c}
.site-footer{position:relative;isolation:isolate;min-height:145px;display:flex;align-items:flex-start;justify-content:center;padding-top:30px;color:#0b16bc;font-size:23px;text-align:center}
.site-footer:before{content:"";position:absolute;z-index:-1;inset:0 -20px;background:url('assets/castle-optimized.jpg') center 78%/cover no-repeat;opacity:.34;mask-image:linear-gradient(transparent 4%,#000 100%)}
.footer-gamepad{position:absolute;right:9%;font-size:45px;transform:rotate(-15deg);filter:drop-shadow(2px 4px 2px rgba(0,71,147,.25))}
@media(max-width:900px){.game-card{grid-template-columns:26% minmax(0,1fr) auto;column-gap:18px}.game-art{height:100%;max-height:211px}.game-details h3{font-size:clamp(32px,4.5vw,42px)}.player-count{font-size:20px}.game-details p{font-size:clamp(18px,2.5vw,24px)}}
@media(max-width:700px){.page-shell{padding:0 14px}.site-header{height:100px;padding:8px 10px;gap:16px}.brand-mark{width:66px}.brand-divider{height:55px}.featured{height:445px;border-radius:28px}.featured-art{background-position:60% center}.featured:after{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.55) 38%,transparent 70%)}.week-badge{font-size:17px;padding:5px 15px}.featured-copy{top:78px;left:24px;width:80%}.featured-copy h2{font-size:clamp(39px,8vw,53px)}.featured-copy p{font-size:clamp(19px,4vw,25px);max-width:350px}.online-count{top:215px;font-size:18px}.featured-button{left:20px;right:20px;bottom:18px;width:auto;min-height:64px;font-size:34px}.section-title{margin-left:6px;font-size:clamp(29px,6vw,42px)}.game-card{grid-template-columns:124px minmax(0,1fr);grid-template-rows:auto 60px;min-height:190px;padding:12px;column-gap:14px;row-gap:10px;border-radius:26px}.game-art{grid-column:1;grid-row:1;width:124px;height:124px;max-height:none}.game-art img{border-radius:22px}.rating{right:5px;top:5px;padding:2px 6px;font-size:12px}.game-details{grid-column:2;grid-row:1;padding-top:18px}.game-details h3{font-size:clamp(24px,5vw,34px);white-space:normal}.game-details p{font-size:clamp(15px,3vw,20px)}.player-count{grid-column:2;grid-row:1;justify-self:start;padding:0;font-size:15px}.game-card .play-button{grid-column:1/3;grid-row:2;min-height:56px;border-radius:22px;font-size:30px}.site-footer{font-size:17px;min-height:120px}.footer-gamepad{font-size:30px}}
@media(max-width:390px){.page-shell{padding:0 10px}.site-header{height:86px;gap:10px}.brand-mark{width:56px}.brand-divider{height:47px}.site-header h1{font-size:17px}.featured{height:420px}.week-badge{font-size:13px}.featured-copy{top:79px;left:20px}.featured-copy h2{font-size:39px}.featured-copy p{font-size:19px}.online-count{top:196px;font-size:16px}.section-title{font-size:28px;gap:8px}.game-card{grid-template-columns:100px minmax(0,1fr);min-height:170px}.game-art{width:100px;height:105px}.game-details{padding-top:18px}.game-details h3{font-size:24px}.game-details p{font-size:15px}.player-count{font-size:13px}.game-card .play-button{font-size:27px}}
@media(max-width:700px){.catalog-intro{margin-top:20px;padding:16px}}
