:root{color-scheme:dark;--title:"Dela Gothic One","Arial Black",sans-serif;--body:"Zen Kaku Gothic New",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#0d1427;color:#edf6ff;font-family:var(--body);font-weight:700}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% -6%,#1b3659 0,transparent 52%),linear-gradient(90deg,#5b648c0c 1px,transparent 1px),linear-gradient(#5b648c0c 1px,transparent 1px);background-size:auto,52px 52px,52px 52px}
a{text-decoration:none}.shell{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,52px)}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:25px 0;border-bottom:1px solid #4154716b}
.brand{font:23px var(--title);letter-spacing:-.03em;color:#55e1dd}.brand>span{color:#ff8298}.brand b{color:#fff;font-size:17px;letter-spacing:.025em}
.header-hint{font-size:10px;letter-spacing:.18em;color:#95b0c9}.header-hint i{color:#55e1dd;font-style:normal}
.hero{text-align:center;padding:clamp(45px,6vw,82px) 0 55px}.badge{font-size:11px;letter-spacing:.18em;color:#59e4db;border:1px solid #54e9e54d;background:#51e3dc12;border-radius:6px;display:inline-block;padding:8px 15px}
.badge-dot{background:#55e4dd;width:6px;height:6px;display:inline-block;border-radius:100%;margin:0 8px;box-shadow:0 0 14px #5effe6}
h1,h2,h3{font-family:var(--title)}h1{font-size:clamp(37px,7vw,78px);line-height:1.4;letter-spacing:-.045em;margin:15px 0 8px}
h1 em{font-style:normal;background:linear-gradient(110deg,#48dee4,#8be5b7,#f7c575,#ff7b9e);color:transparent;background-clip:text}
.hero p{font-size:clamp(13px,1.4vw,17px);color:#a9bfd8;line-height:2;margin:0}
.section-heading>span{font-size:11px;color:#74dde4;letter-spacing:.18em}
.section-heading h2{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;font-size:clamp(23px,3vw,32px);margin:8px 0 22px}
.section-heading small{font:11px var(--body);letter-spacing:.08em;color:#829eb9}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.game-card{overflow:hidden;background:#18243a;border-radius:12px;border:1px solid #4c6381;transition:transform .2s,border-color .2s}
.game-card:hover{transform:translateY(-4px);border-color:#63cdd8}
.art{height:250px;position:relative;overflow:hidden;isolation:isolate}
.art-type{position:absolute;left:22px;bottom:18px;z-index:4;color:#fff;background:#10273bb8;border:1px solid #b9edfc67;border-radius:4px;padding:7px 10px;font:10px var(--body);letter-spacing:.16em}
.scene-oars{background:linear-gradient(185deg,#58bac4,#8bcecc 51%,#225f87 52%,#13456d)}
.scene-oars::before{content:"";position:absolute;width:60%;height:70%;background:#429c95;clip-path:polygon(0 100%,30% 10%,53% 50%,70% 0,100% 100%);left:-7%;bottom:38%;opacity:.9}
.sun{position:absolute;right:22%;top:20%;border-radius:50%;width:85px;height:85px;background:#ffdc94;box-shadow:0 0 75px #ffd78b}
.cloud{position:absolute;left:18%;top:14%;height:20px;width:130px;border-radius:50%;background:#d8fff4a6;filter:blur(18px)}
.boat{position:absolute;top:44%;left:50%;transform:translateX(-50%);font-size:100px;filter:drop-shadow(0 15px 10px #0b3f5588)}
.water{position:absolute;left:-20%;bottom:-26%;width:140%;height:73%;border-radius:50% 50% 0 0;background:repeating-linear-gradient(174deg,#2e9dbe 0 7px,#267da5 8px 24px);opacity:.73;transform:rotate(7deg)}
.scene-shout{background:radial-gradient(circle at 50% 46%,#7a367f 0,#49255e 35%,#1d2447 76%,#18233a)}
.sound-orb{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%) rotate(-6deg);width:145px;height:145px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fceec1,#ff6c97 45%,#a3329b 80%);font:55px var(--title);color:#fff;box-shadow:0 0 60px #ff6d9e86,0 0 115px #b785ee48;z-index:2}
.sound-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fb9adf70;border-radius:50%;width:245px;height:205px;box-shadow:0 0 17px #ef76bc55}.r2{width:355px;height:300px;border-color:#fb9adf40}.r3{width:470px;height:420px;border-color:#ffb2ef25}
.game-info{padding:24px}.genre{color:#87a7c4;font-size:11px;letter-spacing:.08em}.genre-dot{display:inline-block;width:5px;height:5px;background:#5cdddf;border-radius:50%;margin:0 8px;vertical-align:middle}
.game-info h3{font-size:clamp(20px,2.7vw,28px);margin:8px 0}.game-info p{min-height:53px;color:#aabcda;font-size:13px;line-height:1.8;margin:7px 0 18px}
.game-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.game-foot>span{font-size:12px;color:#cbd7e6}
.game-foot .ds-button{font-size:12px;font-weight:900;min-height:44px;border-radius:8px;background:#4fdddd;color:#0b3141;border:0}.game-foot .ds-button:hover{background:#76f5e3}
.more{margin:43px 0 65px;border:1px dashed #4d6080;border-radius:12px;text-align:center;padding:35px;color:#a6bbd4;background:#1c2c452f}
.more>span{font-size:23px;color:#78dfe1}.more strong{display:block;color:#d6e8f4;font-size:14px}.more p{margin:4px 0;font-size:12px}
footer{display:flex;justify-content:space-between;border-top:1px solid #4e628044;padding:24px 0 32px;color:#8296b2;font-size:10px;letter-spacing:.15em}
@media(max-width:690px){.header-hint{font-size:8px}.site-head{padding:17px 0}.hero{padding:43px 0 39px}.cards{grid-template-columns:1fr;gap:15px}.art{height:215px}.game-info{padding:18px}.game-info p{min-height:0}.game-foot .ds-button{font-size:11px;padding:8px}footer span{display:none}}
@media(prefers-reduced-motion:reduce){.game-card{transition:none}}