/* Ray Studio Games — a dark, layered gallery for independent worlds. */
@font-face{font-family:Ray Sans;src:url('/assets/fonts/nunito-cyrillic.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Ray Sans;src:url('/assets/fonts/nunito-latin.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Ray Display;src:url('/assets/fonts/dela-cyrillic.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Ray Display;src:url('/assets/fonts/dela-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:dark;--paper:#11141c;--ink:#f4f3ed;--muted:#c2c6d0;--line:#ffffff29;--accent:#d0e39a;--font:Ray Sans,"Segoe UI",Arial,sans-serif}
body{background:#11141c;color:var(--ink)}
.site-shell{position:relative;z-index:1;max-width:1510px;padding:0 64px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e1f3a8;outline-offset:5px}
::selection{background:#d5eca2;color:#161c18}
.skip-link{z-index:20;background:#d7eaa8;color:#131a16;border-radius:5px;font-weight:800}

.site-header{height:104px;border-color:#ffffff2c}
.brand{font-size:24px;font-weight:900;letter-spacing:-1.2px}
.brand-symbol{color:#d5eba4;width:43px;height:43px}
.brand-sub{color:#b8c1b0;font-size:9px;letter-spacing:5px}
.main-nav{gap:3px;padding:4px;border:1px solid #ffffff2b;border-radius:999px;background:#ffffff0a;font-size:13px;font-weight:800}
.main-nav a{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:999px;color:#d7dae0;transition:color .2s,background .2s}
.main-nav a:first-child{background:#d0e39a17;color:#eef6df}
.main-nav a:hover{color:#e1f1b3;background:#ffffff18}
.main-nav span{color:#cbd7b5;font-size:10px}
.nav-active:after{display:none}
.header-note{font-size:10px;color:#c4c5d2}
.status-dot{background:#cbe09b;box-shadow:0 0 10px #cbe09b8c}
.header-right{gap:16px}
.language-switch{border-color:#ffffff38;background:#1a1e2bb8;padding:3px}
.language-switch a{color:#cbd0d9;font-size:10px;font-weight:800;padding:8px}
.language-switch a[aria-current=page]{background:#eeeef0;color:#191c25}
.language-switch a:hover:not([aria-current=page]){background:#ffffff16}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid #ffffff38;border-radius:6px;background:#1a1e2bb8;color:#d8dce2;font:700 10px var(--font);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.motion-toggle[hidden]{display:none}.motion-toggle:hover{border-color:#d0e39a;background:#262c30;color:#f2f8d9}.motion-toggle-icon{font-size:12px;line-height:1;color:#d0e39a}.motion-toggle-text{white-space:nowrap}.motion-toggle-short{display:none;white-space:nowrap}

.hero{grid-template-columns:1.35fr 1fr;min-height:0;padding:27px 0 32px;gap:32px}
.hero:before{background:none}
.hero-copy{position:relative;padding:0 0 3px}
.eyebrow{font-size:10px;letter-spacing:1.7px;color:#d4e6ab;font-weight:800;margin-bottom:22px}
.tiny-cross{color:#d8eea7;font-size:21px}
.hero h1{font-family:Ray Sans,"Segoe UI",sans-serif;font-weight:900;font-size:clamp(50px,5.35vw,76px);line-height:1.02;letter-spacing:-3.6px;color:#f8f7f2}
.hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#d0e59e;letter-spacing:-3.7px}
.hero-bottom{margin-top:26px;gap:19px}
.hero-bottom p{font-size:14px;color:#c6c9d2;line-height:1.6}
.explore-link{width:40px;height:40px;color:#eef5dd;border-color:#ffffff55;background:#ffffff08}
.explore-link:hover{background:#d7eaaa;color:#182018;border-color:#d7eaaa}

.world-preview{max-width:447px;width:100%;padding:8px 13px 14px;border:1px solid #ffffff24;border-radius:15px;background:linear-gradient(155deg,#272b3ba8,#191d29d9);box-shadow:0 20px 60px #05081150, inset 0 1px #ffffff0d}
.world-preview:focus-within{border-color:#d8e7ad80}
.world-stage{height:190px;margin:-2px -4px 0}
.stage-cross,.stage-coordinate{color:#ced6d8;opacity:.7}
.world-controls{padding:4px 10px 2px}
.preview-topline{color:#c4ccd4;font-size:10px;letter-spacing:1.25px;margin-bottom:11px}
.preview-topline #preview-index{white-space:nowrap;flex:0 0 auto}
.preview-tabs{gap:7px}
.preview-tabs button{color:#d9d9e1;border-color:#ffffff38;background:#ffffff09;font-size:10px;font-weight:800;padding:9px 13px;letter-spacing:.8px}
.preview-tabs button:hover{color:#fff;border-color:#ffffff90;background:#ffffff16}
.preview-tabs button[aria-pressed=true]{background:#d2e6a1;color:#1e281a;border-color:#d2e6a1}
.world-preview[data-world=oddfriends] .preview-tabs button[aria-pressed=true]{background:#d8c5f4;color:#272036;border-color:#d8c5f4}
.preview-bottom{margin-top:13px;min-height:35px}
.preview-info{color:#e0e0e3;font-size:11px;letter-spacing:.2px;gap:5px}
.preview-info #preview-facts{color:#b7bbc6;font-size:10px}
.preview-bottom>a{padding:9px 11px;border-radius:6px;background:#d8eaa9;color:#1c261b;font-size:11px;font-weight:900;gap:12px;transition:transform .2s,background .2s}
.world-preview[data-world=oddfriends] .preview-bottom>a{background:#dac9f4;color:#29213a}
.preview-bottom>a:hover{transform:translateY(-2px);background:#e8f6c5}
.preview-bottom>a>span{font-size:16px}
.surprise-button{color:#d2c9e1;background:#ffffff0a;border-color:#ffffff35;font-size:10px;font-weight:700;padding:7px 10px}
.surprise-button span{color:#d5b9f3}.surprise-button:hover{background:#bda8e535;color:#fff;border-color:#c6afde}
.phase-world-frame{background:#2a392f;border-color:#a9bd8b}.phase-world-frame--back{background:#373044;border-color:#9889b4}
.phase-world-image{border-color:#d9e6bf;box-shadow:0 15px 32px #030608a8}
.odd-world-card{background:#443653;border-color:#be9ed7}.odd-world-card--back{background:#39433a;border-color:#a3b99a}
.odd-world-image{border-color:#f2e5d9;box-shadow:0 15px 32px #080610a8}

.section-heading{border-color:#ffffff38;padding:31px 0 26px}
.section-heading>div{gap:18px;align-items:baseline}
.section-index{font-size:10px;color:#d3e6a8;letter-spacing:1px}
.section-heading h2{font-family:Ray Display,Ray Sans,sans-serif;font-size:clamp(22px,2.5vw,31px);font-weight:400;letter-spacing:-.7px;color:#f5f4ee}
.section-note{font-size:10px;color:#c4cad0;letter-spacing:1.2px}
.section-note:before{background:#d1e5a2;box-shadow:0 0 0 4px #d1e5a21f,0 0 12px #d1e5a290}
.games-grid{gap:24px;align-items:start}
.game-card{display:flex;flex-direction:column;padding:9px;background:linear-gradient(150deg,#292b3ab8,#181b26ed);border:1px solid #ffffff27;border-radius:14px;box-shadow:0 18px 50px #0709143b;transition:border-color .25s,box-shadow .25s}
.game-card:hover,.game-card:focus-within{border-color:#dbe7ba70;box-shadow:0 24px 55px #0508116b}
.game-card--oddfriends:hover,.game-card--oddfriends:focus-within{border-color:#d8c6ed99}
.game-cover{border-radius:9px;box-shadow:0 9px 24px #05070d66}
.game-cover:hover{box-shadow:0 16px 32px #05070d99}
.game-info{padding:20px 13px 5px}
.game-heading h3{font-family:Ray Display,Ray Sans,sans-serif;font-size:clamp(19px,1.8vw,24px);font-weight:400;letter-spacing:-.7px;line-height:1.2}
.play-button{border:1px solid #d5eaa7;background:#d5eaa7;color:#1a2518;font-size:12px;font-weight:900;min-width:105px;border-radius:6px;padding:12px 15px}
.play-button:hover{color:#162116;background:#ecf8cb;border-color:#ecf8cb}
.game-card--oddfriends .play-button{background:#d8c7ef;border-color:#d8c7ef;color:#2b2438}
.game-card--oddfriends .play-button:hover{background:#eee0ff;border-color:#eee0ff;color:#241b30}
.game-tagline{font-size:13px;color:#eff2e9;font-weight:900;margin-top:14px}
.game-description{color:#bec4ce;font-size:14px;line-height:1.7;max-width:100%;margin-top:10px}
.game-tags{gap:7px;margin-top:15px}
.game-tags span,.game-card--phase .game-tags span,.game-card--oddfriends .game-tags span{font-family:Ray Sans,sans-serif;font-size:10px;font-weight:800;letter-spacing:.1px;padding:5px 9px;border-color:#ffffff26;border-radius:4px;color:#d5d9e0;background:#ffffff09}
.game-card--phase .game-tags span{color:#dbeabb;border-color:#cee29b40;background:#cee29b10}
.game-card--oddfriends .game-tags span{color:#e3d7f0;border-color:#d1b6e940;background:#d1b6e910}
.game-details{border-color:#ffffff2a;margin-top:19px}
.game-details summary{color:#c4c9d3;font-size:12px;font-weight:800;padding:14px 0}
.game-details summary:hover{color:#fff}.game-details summary>span{color:#d2e5a9;font-size:21px}
.game-details>div{color:#c8cdd5;font-size:13px;line-height:1.7;padding-bottom:14px}
.game-details li::marker{color:#cbe098}
.catalog-note{color:#c3c8ce;font-size:11px;margin-top:32px;letter-spacing:.1px}

.studio-section{margin-top:57px;padding:36px 31px;border:1px solid #d5d0f13a;background:radial-gradient(ellipse at 91% 25%,#7b5caa39,transparent 34%),radial-gradient(ellipse at 8% 100%,#7b985a2e,transparent 36%),#1c202bdb;border-radius:14px;box-shadow:0 15px 44px #06081138}
.studio-section:before,.studio-section:after{border-color:#d6c5ed40}
.studio-sign svg{color:#cbe3a3}.studio-sign span{color:#d5dbe0;font-size:9px}
.studio-copy h2{font-family:Ray Sans,sans-serif;color:#f7f6f1;font-size:28px;font-weight:900;letter-spacing:-.9px}
.studio-copy p{font-size:13px;color:#c2c7d0}
.back-to-games{color:#f4f8e9;border-color:#ffffff50;background:#ffffff09}
.back-to-games:hover{color:#182018;background:#d5eaa7;border-color:#d5eaa7}
.site-footer{color:#bbc0c9;font-size:11px;padding:27px 0 32px}
.site-footer a{font-size:10px;color:#c8cdd4}.site-footer a:hover{color:#e6f5c2}.footer-center{color:#c4bed3}

@media(min-width:1440px){.site-shell{padding:0 80px}.hero h1{font-size:76px}.hero{padding:27px 0 32px}}
@media(max-width:1100px){.hero{grid-template-columns:1.25fr 1fr;gap:24px}.hero h1{font-size:5.5vw;letter-spacing:-2.8px}.world-preview{padding:7px 10px 12px}.world-stage{height:200px}.header-note{display:none}}
@media(max-width:800px) and (min-width:701px){.hero{min-height:355px}.hero h1{font-size:5.6vw}.world-stage{height:170px}.preview-info{font-size:9px}.motion-toggle-text{display:none}.motion-toggle{min-width:36px;justify-content:center}}
@media(max-width:700px){
  .site-shell{padding:0 22px}.site-header{height:83px;gap:12px}.brand{font-size:20px}.brand-symbol{width:34px;height:34px}.brand-sub{font-size:7px;letter-spacing:4.6px}
  .main-nav{gap:2px;padding:3px;margin-left:auto;margin-right:4px}.main-nav a{font-size:11px;padding:8px 10px}.header-right{gap:7px}.motion-toggle{min-width:35px;min-height:34px;padding:6px 8px;justify-content:center}.motion-toggle-text{display:none}.motion-toggle-short{display:inline;font-size:9px}.language-switch a{font-size:9px;padding:7px}
  .hero{grid-template-columns:1fr;min-height:0;padding:29px 0 30px;gap:15px}.hero .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:17px}.hero h1{font-size:clamp(37px,8.7vw,57px);letter-spacing:-2px;line-height:1.08}.hero h1 em{letter-spacing:-2.2px}.hero-bottom{margin-top:15px}.hero-bottom p{font-size:12px}.explore-link{width:34px;height:34px}
  .world-preview{display:grid;grid-template-columns:1.08fr 1fr;gap:6px;align-items:center;max-width:none;padding:10px 12px 11px}.world-stage{height:150px;margin:-4px -12px}.world-controls{padding:0 0 0 3px}.preview-topline{font-size:7px;letter-spacing:.7px;margin-bottom:9px}.preview-tabs button{font-size:9px;padding:8px 9px}.preview-bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:9px}.preview-info{font-size:8px}.preview-info #preview-facts{font-size:7px}.preview-bottom>a{font-size:10px;padding:7px 10px}.surprise-button{font-size:9px;margin-top:7px;padding:7px 9px}
  .section-heading{padding:23px 0 20px}.section-heading h2{font-size:21px;letter-spacing:-.4px}.section-note{font-size:8px;gap:7px;letter-spacing:.3px}.section-note:before{width:4px;height:4px}.games-grid{gap:18px}.game-card{padding:8px;border-radius:12px}.game-info{padding:17px 10px 3px}.game-heading h3{font-size:21px}.game-description{font-size:13px}.game-tagline{font-size:12px}.game-details summary{font-size:11px}.game-tags span,.game-card--phase .game-tags span,.game-card--oddfriends .game-tags span{font-size:10px}.catalog-note{font-size:10px;margin-top:26px}
  .studio-section{margin-top:40px;padding:25px 21px}.studio-sign span{font-size:8px}.studio-copy h2{font-size:23px}.studio-copy p{font-size:12px}.site-footer{font-size:10px;padding:23px 0}.site-footer a{font-size:9px}
}
@media(max-width:560px){.site-header{height:auto;display:grid;grid-template-columns:1fr auto;gap:9px;padding:16px 0 13px}.brand{grid-column:1;grid-row:1;font-size:18px}.brand-symbol{width:30px;height:30px}.header-right{grid-column:2;grid-row:1}.main-nav{grid-column:1/-1;grid-row:2;width:max-content;max-width:100%;margin:0;gap:2px}.main-nav a{padding:7px 10px}.nav-active:after{display:none}}
@media(max-width:440px){.hero{padding-top:26px}.hero h1{font-size:clamp(34px,9vw,43px);letter-spacing:-2px}.world-stage{height:138px}.preview-tabs button{font-size:8px;padding:8px 7px}.preview-info{font-size:7px}.preview-info #preview-facts{font-size:7px}.surprise-button{font-size:8px;padding:7px}.section-heading h2{font-size:19px}.section-note{font-size:7px}}
@media(max-width:360px){.site-shell{padding:0 16px}.brand{font-size:16px;gap:6px;letter-spacing:-.8px}.brand>span{white-space:nowrap}.brand-sub{font-size:6px;letter-spacing:4px}.hero h1{font-size:32px;letter-spacing:-1.6px}.preview-topline{gap:5px}.preview-topline>span:first-child{font-size:6px;letter-spacing:0;white-space:nowrap}}

/* In-page preferences control motion; without JavaScript, respect the browser setting. */
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="full"]){scroll-behavior:auto}
  html:not([data-motion="full"]) *,html:not([data-motion="full"]) *:before,html:not([data-motion="full"]) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html:not([data-motion="full"]) .motion-ready [data-reveal]{opacity:1;transform:none}
  html:not([data-motion="full"]) .game-cover,html:not([data-motion="full"]) .world-stage-inner{transform:none!important}
  html:not([data-motion="full"])::view-transition-old(root),html:not([data-motion="full"])::view-transition-new(root){animation-duration:0s}
}
html[data-motion="reduced"]{scroll-behavior:auto}
html[data-motion="reduced"] *,html[data-motion="reduced"] *:before,html[data-motion="reduced"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="reduced"] .motion-ready [data-reveal]{opacity:1;transform:none}
html[data-motion="reduced"] .game-cover,html[data-motion="reduced"] .world-stage-inner{transform:none!important}
html[data-motion="reduced"]::view-transition-old(root),html[data-motion="reduced"]::view-transition-new(root){animation-duration:0s}