:root {--games-ink:#20283f;--games-muted:#596174;--games-paper:#fffdf7;--games-lime:#d9f369;--games-green:#236845;--games-coral:#ed675d;--games-lavender:#ece9ff;--games-blue:#405aa5;--games-line:#dfe2e8;} body:has(main.game-guide) {margin:0;background:#f7f6f2;color:var(--games-ink);font-family:Arial,Helvetica,sans-serif;} body:has(main.game-guide) .gaming-hero {position:relative;z-index:1;background-color:#4658a6;} .game-guide {overflow:visible;} .game-guide *,.game-guide *::before,.game-guide *::after {box-sizing:border-box;} .game-guide section {margin:0;padding:clamp(3.5rem,7vw,7rem) clamp(1.1rem,4vw,3.5rem);} .guide-inner {position:relative;width:min(1160px,100%);margin-inline:auto;} .guide-intro {padding-top:clamp(4rem,8vw,7.5rem)!important;padding-bottom:clamp(4rem,7vw,6rem)!important;background:#f2f1ff;} .guide-intro__grid {display:grid;grid-template-columns:1fr .88fr;align-items:center;gap:clamp(2.5rem,6vw,6rem);min-height:450px;} .guide-intro__copy {position:relative;z-index:1;} .guide-kicker {margin:0 0 .9rem;color:#5e6882;font-size:.74rem;font-weight:800;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;} .guide-intro h1 {max-width:680px;margin:0;color:#252b4b;font-size:clamp(3rem,6.6vw,6rem);font-weight:800;letter-spacing:-.065em;line-height:.98;} .guide-lede {max-width:570px;margin:1.5rem 0 1.8rem;color:#525a70;font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.7;} .guide-button {display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:1.2rem;padding:.8rem 1.35rem;border:0;border-radius:999px;color:white;font-size:.95rem;font-weight:750;line-height:1.3;text-decoration:none;transition:transform .2s ease,filter .2s ease;} .guide-button:hover {transform:translateY(-2px);filter:brightness(1.08);} .guide-button:focus-visible,.guide-text-link:focus-visible {outline:3px solid #f3a950;outline-offset:4px;} .guide-button--green {background-color:#236845;} .guide-button--coral {background-color:#c94d47;cursor:pointer;} .guide-button--navy {background-color:#27345f;} .guide-intro__art {position:relative;margin:0;padding:16px;border:1px solid rgba(42,48,82,.1);border-radius:32px;background:#fff;box-shadow:0 24px 55px rgba(51,50,104,.16);transform:rotate(2deg);} .guide-screen {display:block;width:100%;aspect-ratio:1.12;border-radius:22px;object-fit:cover;} .guide-intro__art figcaption {padding:13px 8px 2px;color:#657087;font-size:.8rem;line-height:1.5;} .guide-intro__orbit {position:absolute;right:-32px;bottom:13%;padding:.8rem 1rem;border:3px solid #fff;border-radius:999px;background:#d9f369;color:#27345f;font-size:.62rem;font-weight:900;letter-spacing:.09em;transform:rotate(-7deg);} .guide-section--paper {background:var(--games-paper);} .guide-section--ink {background:#252e4c;color:#fff;} .guide-section--mint {background:#e6f2d5;} .guide-section--blue {background:#405aa5;color:#fff;} .guide-section--lavender {background:#ece9ff;} .guide-heading {max-width:760px;margin:0 0 2.5rem;} .guide-heading h2,.guide-closing__inner h2 {margin:0;color:#252b4b;font-size:clamp(2rem,4.2vw,3.8rem);font-weight:800;letter-spacing:-.05em;line-height:1.05;} .guide-heading > p:not(.guide-kicker),.guide-closing__inner > div > p:not(.guide-kicker) {max-width:690px;margin:1rem 0 0;color:var(--games-muted);font-size:1rem;line-height:1.75;} .guide-heading--light h2 {color:#fff;} .guide-heading--light > p:not(.guide-kicker) {color:#e2e6f1;} .guide-heading--light .guide-kicker {color:#d9f369;} .genre-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;} .genre-card {min-height:255px;padding:1.45rem;border:1px solid rgba(37,43,75,.08);border-radius:22px;background:#f2f1ff;} .genre-card--violet {background:#eeeaff;}.genre-card--blue {background:#e4edff;}.genre-card--gold {background:#fff1cb;}.genre-card--coral {background:#ffe5de;} .genre-card__number {display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:#fff;color:#49577d;font-size:.75rem;font-weight:800;} .genre-card h3 {margin:1.45rem 0 .55rem;color:#27304d;font-size:1.2rem;line-height:1.2;} .genre-card p {margin:0;color:#586078;font-size:.9rem;line-height:1.6;} .genre-card__tag {display:inline-block;margin-top:1.15rem;color:#46558d;font-size:.72rem;font-weight:800;letter-spacing:.03em;} .guide-two-col {display:grid;grid-template-columns:.85fr 1.15fr;align-items:start;gap:clamp(2.5rem,8vw,8rem);} .guide-two-col .guide-heading {margin:0;} .rhythm-list {border-top:1px solid rgba(255,255,255,.22);} .rhythm-item {display:grid;grid-template-columns:145px 1fr;gap:1rem;padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.22);} .rhythm-item > span {padding-top:.25rem;color:#d9f369;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;} .rhythm-item h3 {margin:0;color:#fff;font-size:1.16rem;}.rhythm-item p {margin:.45rem 0 0;color:#dce1ee;font-size:.91rem;line-height:1.6;} .title-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;} .title-card {overflow:hidden;border:1px solid #e4e3e1;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(38,44,75,.06);} .title-card__art {display:block;width:100%;aspect-ratio:1.4;background:#e8e7f2;object-fit:cover;} .title-card > div:not(.title-card__art) {padding:1.2rem 1.25rem 1.35rem;}.title-card .guide-kicker {margin-bottom:.5rem;font-size:.64rem;}.title-card h3 {margin:0;color:#292f4d;font-size:1.25rem;}.title-card p:last-child {margin:.65rem 0 0;color:#62697a;font-size:.88rem;line-height:1.6;} .tool-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;} .tool-steps li {min-height:200px;padding:1.35rem;border:1px solid rgba(41,66,39,.11);border-radius:18px;background:rgba(255,255,255,.74);} .tool-steps li > span {display:block;margin-bottom:1.5rem;color:#537c37;font-size:.78rem;font-weight:850;} .tool-steps h3 {margin:0;color:#273b32;font-size:1.08rem;}.tool-steps p {margin:.6rem 0 0;color:#56645b;font-size:.86rem;line-height:1.6;} .check-list {display:grid;gap:1rem;margin:0;padding:0;list-style:none;} .check-list li {display:grid;grid-template-columns:36px 1fr;gap:.9rem;align-items:start;padding:1rem 1.1rem;border:1px solid #e6e5df;border-radius:15px;background:#fff;} .check-list li > span {display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#e5f3d5;color:#356b3a;font-weight:900;} .check-list h3 {margin:.1rem 0 0;color:#2c3450;font-size:1rem;}.check-list p {margin:.35rem 0 0;color:#646b7b;font-size:.86rem;line-height:1.55;} .device-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;} .device-card {min-height:215px;padding:1.5rem;border:1px solid rgba(255,255,255,.2);border-radius:19px;background:rgba(20,34,85,.26);} .device-card .bi {color:#d9f369;font-size:1.7rem;}.device-card h3 {margin:1rem 0 .45rem;color:#fff;font-size:1.2rem;}.device-card p {margin:0;color:#e3e8f4;font-size:.88rem;line-height:1.65;} .guide-collection-layout {display:grid;grid-template-columns:.55fr 1fr;align-items:center;gap:clamp(2rem,8vw,8rem);} .guide-collection-layout .guide-heading {margin:0;} .collection-mark {display:grid;width:min(290px,70vw);aspect-ratio:1;place-items:center;position:relative;margin:auto;border-radius:44% 56% 58% 42% / 43% 41% 59% 57%;background:#d9f369;color:#27345f;font-size:8rem;font-weight:900;letter-spacing:-.12em;transform:rotate(-8deg);} .collection-mark span:last-child {position:absolute;right:12%;bottom:13%;display:grid;width:68px;height:68px;place-items:center;border:7px solid #ece9ff;border-radius:50%;background:#ed675d;color:white;font-size:2.2rem;} .guide-text-link {display:inline-flex;gap:.8rem;margin-top:1.2rem;color:#344579;font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px;} .first-play-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;} .first-play-card {display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;min-height:245px;border:1px solid #e2e1dc;border-radius:20px;background:#fff;} .first-play-card__art {width:100%;height:100%;min-height:245px;object-fit:cover;} .first-play-card > div {align-self:center;padding:1.25rem;}.first-play-card h3 {margin:0;color:#29314e;font-size:1.1rem;line-height:1.25;}.first-play-card p {margin:.65rem 0 0;color:#626a7a;font-size:.88rem;line-height:1.6;} .guide-contact-layout {display:grid;grid-template-columns:.78fr 1fr;gap:clamp(2.5rem,8vw,8rem);align-items:start;}.guide-contact-layout .guide-heading {margin:0;} .guide-form {display:grid;gap:.45rem;padding:1.5rem;border-radius:21px;background:#fff;color:#292f4d;} .guide-form label {margin-top:.5rem;font-size:.85rem;font-weight:750;} .guide-form input,.guide-form textarea {width:100%;min-height:48px;padding:.75rem .85rem;border:1px solid #cdd2df;border-radius:10px;background:#fff;color:#252b43;font:inherit;} .guide-form textarea {min-height:115px;resize:vertical;} .guide-form input:focus,.guide-form textarea:focus {outline:3px solid #d9e5ff;border-color:#5368aa;} .guide-form .is-invalid {border-color:#c34742;background:#fffafa;} .guide-error {min-height:1.1rem;color:#ae302d;font-size:.77rem;} .guide-form__note {margin:.35rem 0 .7rem;color:#646b7b;font-size:.76rem;line-height:1.5;} .guide-form__status {min-height:1.2rem;margin:0;color:#9e302c;font-size:.83rem;} .guide-closing {background:#d9f369;} .guide-closing__inner {display:flex;align-items:center;justify-content:space-between;gap:2rem;} .guide-closing__inner > div {max-width:700px;}.guide-closing__inner h2 {color:#293957;}.guide-closing__inner > div > p:not(.guide-kicker) {color:#46563d;} .game-guide .guide-section__reveal {opacity:1;transform:none;} html[data-scroll-reveal="enabled"] .game-guide .guide-section__reveal[data-reveal="pending"] {opacity:.82;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;} .game-guide .guide-section__reveal[data-reveal="settled"] {opacity:1;transform:translateY(0);} @media (max-width:900px) {.genre-grid,.tool-steps {grid-template-columns:repeat(2,minmax(0,1fr));} .guide-intro__grid {grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:2rem;} .guide-intro__orbit {right:0;} .guide-two-col,.guide-contact-layout {grid-template-columns:1fr;gap:2.4rem;} .guide-two-col .guide-heading,.guide-contact-layout .guide-heading {max-width:680px;} .title-gallery {gap:.75rem;}.title-card > div:not(.title-card__art) {padding:1rem;} .first-play-card {grid-template-columns:1fr;}.first-play-card__art {height:180px;min-height:0;}.first-play-card > div {padding:1rem;}} @media (max-width:620px) {.game-guide section {padding:3.7rem 1.1rem;} .guide-intro {padding-top:3.1rem!important;}.guide-intro__grid {grid-template-columns:1fr;gap:2rem;} .guide-intro h1 {font-size:clamp(3rem,15vw,4.6rem);}.guide-intro__art {width:min(420px,92%);margin:0 auto;transform:rotate(1deg);}.guide-intro__orbit {right:-15px;} .genre-grid,.title-gallery,.device-grid,.tool-steps,.first-play-grid {grid-template-columns:1fr;} .genre-card {min-height:0;}.genre-card h3 {margin-top:1rem;} .rhythm-item {grid-template-columns:1fr;gap:.45rem;} .guide-collection-layout {grid-template-columns:1fr;gap:2rem;}.collection-mark {width:180px;font-size:5.5rem;}.collection-mark span:last-child {width:53px;height:53px;border-width:5px;font-size:1.7rem;} .guide-closing__inner {align-items:flex-start;flex-direction:column;}.guide-button {width:100%;} .guide-form {padding:1.15rem;}.guide-heading h2,.guide-closing__inner h2 {font-size:2.25rem;}} @media (prefers-reduced-motion:reduce) {.game-guide *,.game-guide *::before,.game-guide *::after {scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;} .game-guide .guide-section__reveal {opacity:1;transform:none;}} .game-guide .guide-section {isolation:isolate;} .guide-section--closing {background:#d9f369;} .device-card .bi-display,.device-card .bi-tablet,.device-card .bi-phone {display:inline-block;min-width:1.7rem;} .guide-screen {display:grid;grid-template-columns:1.2fr repeat(2,1fr);grid-template-rows:32px 1.1fr 1fr 1fr;gap:10px;width:100%;aspect-ratio:1.12;padding:15px;overflow:hidden;border-radius:22px;background:linear-gradient(145deg,#343c72,#8075c5 55%,#ef9ca6);} .guide-screen__top {grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:0 7px;border-radius:8px;background:rgba(255,255,255,.9);} .guide-screen__top i {display:block;width:8px;height:8px;border-radius:50%;background:#e77b79;}.guide-screen__top i:nth-child(2) {background:#e8c95a;}.guide-screen__top i:nth-child(3) {background:#7db782;} .guide-screen__feature {grid-row:2/5;border-radius:12px;background:radial-gradient(circle at 68% 25%,#f4cf78 0 10%,transparent 11%),linear-gradient(155deg,#f6a25d 0 28%,#b15a9c 29% 58%,#424d9c 59%);box-shadow:inset 0 -35px 0 rgba(35,38,89,.22);} .guide-screen__tile {border-radius:11px;background:linear-gradient(145deg,#d9f369 0 28%,#7db782 29% 55%,#fff4d7 56%);}.guide-screen__tile:nth-last-child(2) {background:linear-gradient(145deg,#f3aa69,#f5d779 54%,#e77b79);}.guide-screen__tile:last-child {background:linear-gradient(145deg,#72b1d0,#9185cf 58%,#ed99ac);} .title-card__art {display:grid;place-items:center;aspect-ratio:1.4;color:rgba(255,255,255,.88);font-size:clamp(3rem,6vw,5rem);font-weight:900;letter-spacing:-.09em;} .title-card__art--city {background:linear-gradient(150deg,#93c7bf,#487798 52%,#f0cc82);}.title-card__art--fantasy {background:radial-gradient(circle at 65% 35%,#ec9d98 0 9%,transparent 10%),linear-gradient(145deg,#393e78,#855a9d 60%,#e58b7c);}.title-card__art--village {background:radial-gradient(circle at 25% 65%,#f5d882 0 13%,transparent 14%),linear-gradient(150deg,#aad589,#588d72 56%,#eac77b);} .first-play-card__art {position:relative;display:grid;min-height:245px;place-items:center;overflow:hidden;} .first-play-card__art::before,.first-play-card__art::after {position:absolute;width:150px;height:150px;border:22px solid rgba(255,255,255,.24);border-radius:50%;content:"";} .first-play-card__art::before {top:-55px;left:-35px;}.first-play-card__art::after {right:-55px;bottom:-65px;width:190px;height:190px;} .first-play-card__art span {z-index:1;display:grid;width:82px;height:82px;place-items:center;border:5px solid rgba(255,255,255,.78);border-radius:23px;background:#fff8;color:white;font-size:2rem;font-weight:900;transform:rotate(-8deg);} .first-play-card__art--start {background:linear-gradient(140deg,#efb35e,#bd6785 54%,#454d91);}.first-play-card__art--controls {background:linear-gradient(140deg,#6979bf,#9b73ad 54%,#f0a581);} @media (max-width:900px) {.first-play-card__art {min-height:190px;}} @media (max-width:620px) {.first-play-card__art {height:180px;min-height:0;}} body:has(main.game-guide) .consent-banner:not([hidden]) {position:fixed;z-index:20;right:clamp(1rem,3vw,2rem);bottom:1rem;left:clamp(1rem,3vw,2rem);display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem 2rem;max-width:1100px;margin-inline:auto;padding:1.2rem 1.4rem;border:1px solid #d9dce5;border-radius:18px;background:#fff;color:#252b43;box-shadow:0 16px 55px #18204345;font-family:Arial,Helvetica,sans-serif;} body:has(main.game-guide) .consent-copy h2 {margin:0;color:#27304d;font-size:1.05rem;} body:has(main.game-guide) .consent-copy p {margin:.4rem 0 0;color:#62697a;font-size:.85rem;line-height:1.5;} body:has(main.game-guide) .consent-actions {display:flex;flex-wrap:wrap;gap:.55rem;} body:has(main.game-guide) .consent-button {min-height:42px;padding:.65rem .9rem;border:1px solid #344371;border-radius:999px;background-color:#fff;color:#26345e;font:700 .78rem Arial,Helvetica,sans-serif;cursor:pointer;} body:has(main.game-guide) .consent-button-primary {border-color:#236845;background-color:#236845;color:#fff;} body:has(main.game-guide) .consent-button-quiet {border-color:#d2d6e1;background-color:#eef0f6;color:#29324f;} body:has(main.game-guide) .consent-preferences {grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:1rem;} body:has(main.game-guide) .consent-preferences[hidden],body:has(main.game-guide) .consent-actions[hidden] {display:none;} body:has(main.game-guide) .consent-preferences h3 {margin:0 auto 0 0;color:#27304d;font-size:.95rem;} body:has(main.game-guide) .consent-preferences label {display:flex;align-items:center;gap:.45rem;color:#4f566a;font-size:.8rem;} body:has(main.game-guide) .consent-preferences input {accent-color:#236845;} body:has(main.game-guide) .consent-reopen {min-height:40px;padding:.5rem .9rem;border:1px solid #d9dce5;border-radius:999px;background-color:#fff;color:#29324f;cursor:pointer;} @media (max-width:700px) {body:has(main.game-guide) .consent-banner:not([hidden]) {grid-template-columns:1fr;max-height:min(75vh,440px);overflow:auto;} body:has(main.game-guide) .consent-actions {display:grid;grid-template-columns:1fr;} body:has(main.game-guide) .consent-preferences {align-items:flex-start;flex-direction:column;}}
