/* Drift's tactile character cards. Shared frame, art direction and interaction rules. */
.home-stage{display:flex;flex-direction:column;align-items:center;flex:1;min-height:140px;width:100%;position:relative}.home-menu{width:100%;position:relative;z-index:2}.home-stage .home-art{flex:1;max-height:none;min-height:80px}.home-stage .generated-brand{flex:none}.mode-card .modebar{gap:9px}.modebar button{min-height:108px;display:flex;flex-direction:column;gap:0;padding:9px 4px 10px;border-radius:18px;background:linear-gradient(150deg,#fffdf8 0%,#f3ede4 65%,#e7dfd4);border:1px solid #c6bdae;box-shadow:inset 0 2px 0 #ffffff, inset 0 -2px 0 #d1c6b766,0 4px 0 #b6aa9b,0 6px 12px #6e665418;text-shadow:none;overflow:visible;transition:transform .14s,box-shadow .18s,border-color .2s,background .2s}.modebar button.active{background:linear-gradient(150deg,#fffdf1,#f9ecc8);border-color:#d5b65f;box-shadow:inset 0 2px 0 #ffffff, inset 0 -2px 0 #d2ac4d22,0 4px 0 #b89c57,0 0 0 2px #fff8d980,0 8px 16px #99732918;color:#67522d}.mode-character{display:block;order:1;width:66px;height:60px;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 2px #50402b22);margin-top:-3px;transition:filter .2s}.modebar button>span.mode-name{order:2;font-size:14px;font-weight:900;line-height:1.2;color:#504c53;margin-top:2px}.mode-subtitle{order:3;font:600 8px/1.3 DriftRounded,system-ui,sans-serif!important;color:#978b79!important;margin:3px 0 0!important;letter-spacing:0}.modebar button.active .mode-name{color:#6b5327}.modebar button.active:after{content:'✓';right:6px;top:6px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font:900 9px/1 DriftRounded,sans-serif;color:#fff;background:#b49542;box-shadow:inset 0 1px #f9d98c;border-radius:50%;z-index:2}.modebar button:not(.active):after{display:none}.home-start{min-height:60px;border-radius:17px;box-shadow:inset 0 2px #c1f6dc, inset 0 -3px #0b704d50,0 5px 0 #145d43,0 9px 15px #104f3438}.home-bottom button{min-height:46px}.home-top .icon-button{min-width:42px;min-height:42px}.home-top .best-pill{min-height:42px}.mode-description{margin:12px 0}.mode-card .ribbon{letter-spacing:.3px}.desktop-help,.desktop-session{display:none}.home-screen.generated-background{width:100%;min-width:0}.home-menu .home-note{display:table;margin:12px auto 0}.home-menu .home-bottom{width:100%}
/* Button depression is explicit for pointer, touch and keyboard activations. */
button{position:relative;--tap-x:50%;--tap-y:50%;-webkit-tap-highlight-color:transparent}.home-screen button.is-pressed,.home-screen button:active{transform:translateY(3px) scale(.975)!important;filter:brightness(.96)}.modebar button.is-pressed,.modebar button:active{box-shadow:inset 0 1px #fff9,0 1px 0 #b6aa9b,0 2px 4px #6e665418}.modebar button.active.is-pressed{box-shadow:inset 0 1px #fff9,0 1px 0 #b89c57,0 0 0 2px #fff8d980}.press-wave{position:absolute;left:var(--tap-x);top:var(--tap-y);width:15px;height:15px;border-radius:50%;pointer-events:none;z-index:5;background:radial-gradient(circle,#fff9 0%,#fff3 40%,transparent 70%);animation:drift-press-wave .45s ease-out forwards}.modebar .press-wave{max-width:none!important;margin:0!important;display:block!important}.home-screen:not(.hidden),.app:not(.hidden){animation:screen-arrive .24s ease-out}.home-start:focus-visible,.modebar button:focus-visible{outline:3px solid #fff;outline-offset:5px}
@keyframes drift-press-wave{from{transform:translate(-50%,-50%) scale(.1);opacity:.7}to{transform:translate(-50%,-50%) scale(11);opacity:0}}@keyframes screen-arrive{from{opacity:.3;translate:0 5px}to{opacity:1;translate:0 0}}
/* Wide phones and portrait tablets get a larger stage and balanced menu. */
@media(min-width:600px) and (max-aspect-ratio:6/5){.home-screen.generated-background{max-width:none;padding:25px clamp(40px,10vw,130px) 25px;background-size:cover;background-position:center 44%}.home-top{max-width:680px;align-self:center}.home-menu{max-width:590px;align-self:center}.home-logo-image{width:min(85%,470px);max-height:20dvh}.home-stage{min-height:230px}.mode-card .modebar{gap:15px}.modebar button{min-height:135px;padding:11px 10px}.mode-character{width:88px;height:82px}.modebar button>span.mode-name{font-size:18px}.mode-subtitle{font-size:10px!important}.mode-description{font-size:13px;min-height:34px}.home-start{min-height:69px;font-size:26px}.home-bottom button{min-height:54px;font-size:14px}.utility-icon{width:25px;height:25px}.mode-card .ribbon{font-size:21px;top:-23px;padding:9px}.generated-background .mode-card{padding:34px 22px 22px;border-radius:29px}.home-note{font-size:11px}.home-top .best-pill b{font-size:23px}.home-top .best-pill span{font-size:10px}}
/* Landscape composition for PC, landscape tablets and rotated phones. */
@media(min-width:700px) and (min-aspect-ratio:6/5){.home-screen.generated-background{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);grid-template-rows:54px minmax(0,1fr);column-gap:clamp(25px,5vw,100px);max-width:none;padding:24px clamp(28px,5vw,100px) 28px;background:#3fb6ed;isolation:isolate}.home-screen.generated-background:before{content:'';position:absolute;inset:-35px;z-index:-3;background:url('assets/home-background.webp') center 48%/cover;filter:blur(22px);opacity:.4;pointer-events:none}.home-top{grid-column:1/-1;grid-row:1;max-width:none;align-self:start}.home-stage{grid-column:1;grid-row:2;align-self:stretch;min-height:0;display:flex;justify-content:flex-start;padding-top:18px;isolation:isolate}.home-stage:before{content:'';position:absolute;inset:-20px -45px -60px -100px;z-index:-1;background:url('assets/home-background.webp') center 48%/cover;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 76%,transparent);pointer-events:none}.home-stage .generated-brand{width:100%;margin-top:1vh;min-height:90px}.home-logo-image{width:min(95%,470px);max-height:23dvh}.home-stage .home-art{width:100%;min-height:0}.home-menu{grid-column:2;grid-row:2;align-self:center;max-width:440px;justify-self:center;margin-top:5px}.generated-background .mode-card{padding:36px 20px 24px;border-radius:28px;box-shadow:inset 0 1px #fff,0 5px #3d8aab,0 17px 45px #0c548943}.mode-card .ribbon{font-size:21px;left:25%;right:25%;padding:9px 10px;top:-23px}.modebar button{min-height:126px;padding:10px 5px}.mode-character{width:81px;height:76px}.modebar button>span.mode-name{font-size:16px}.mode-subtitle{font-size:9px!important}.mode-description{font-size:12px;min-height:40px;margin:15px 0}.home-start{min-height:65px;font-size:25px}.home-bottom{margin-top:23px}.home-bottom button{font-size:13px;min-height:51px}.home-menu .home-note{font-size:10px;margin-top:16px}.home-top .best-pill b{font-size:22px}.home-top .best-pill span{font-size:10px}.home-top .icon-button{width:44px;height:44px}.app header{max-width:1100px}.app{grid-template-rows:48px minmax(0,1fr) 48px;gap:6px;padding:7px 12px}.board{width:min(100%,calc((100dvh - 122px)/2));height:100%}.side{height:48px;max-width:520px}.app .pad{width:min(100%,calc((100dvh - 122px)/2))}.hint{bottom:63px}.game-heading{font-size:12px}.stats{font-size:25px}}
@media(min-width:1100px) and (min-aspect-ratio:6/5){.desktop-help,.desktop-session{display:block;position:absolute;top:50%;transform:translateY(-50%);color:#e6f8ff;font-family:DriftRounded,system-ui,sans-serif}.desktop-help{right:calc(50% + (100dvh - 122px)/4 + 36px);width:215px}.desktop-session{left:calc(50% + (100dvh - 122px)/4 + 36px);width:190px}.desktop-kicker{font-size:10px;letter-spacing:2px;color:#c2edff;font-weight:800}.desktop-help h2,.desktop-session h2{font-size:27px;line-height:1.2;letter-spacing:-.5px;margin:12px 0 23px;text-shadow:0 2px #056db155}.desktop-help dl{display:grid;gap:11px;margin:0}.desktop-help dl div{display:flex;gap:12px;align-items:center}.desktop-help dt{width:67px;border:1px solid #9ce5ff88;background:#076ab350;border-radius:9px;text-align:center;padding:6px;font-size:13px;font-weight:800;box-shadow:0 2px #086aaa}.desktop-help dd{margin:0;font-size:13px;font-weight:700}.desktop-help p,.desktop-session p{font-size:12px;color:#c6edff;line-height:1.7;margin-top:22px}.session-stat{background:#0c66a74d;border:1px solid #81d8ff66;border-radius:18px;padding:17px}.session-stat span{display:block;letter-spacing:1.3px;font-size:8px}.session-stat b{font-size:30px;display:block;margin-top:5px}}
@media(max-height:650px) and (min-width:700px) and (min-aspect-ratio:6/5){.home-screen.generated-background{padding:12px 28px 14px;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:40px minmax(0,1fr);column-gap:25px}.home-top .icon-button{width:36px;height:36px;min-width:36px;min-height:36px}.home-top .best-pill{min-height:34px}.home-top .best-pill b{font-size:18px}.home-stage{padding-top:5px}.home-logo-image{max-height:24dvh;width:min(94%,340px)}.generated-background .mode-card{padding:23px 14px 15px}.mode-card .ribbon{font-size:16px;padding:6px 10px;top:-17px}.modebar button{min-height:85px;padding:4px 3px 8px}.mode-character{width:54px;height:48px}.modebar button>span.mode-name{font-size:12px}.mode-subtitle{font-size:7px!important;margin-top:2px!important}.mode-description{font-size:10px;min-height:24px;margin:9px 0}.home-start{min-height:46px;font-size:20px;padding:9px}.home-bottom{margin-top:14px;gap:10px}.home-bottom button{min-height:36px;font-size:10px;padding:6px}.utility-icon{width:19px;height:19px}.home-menu .home-note{margin-top:9px;font-size:8px}.desktop-help,.desktop-session{display:none}}
@media(max-width:599px) and (max-height:750px){.modebar button{min-height:93px;padding:7px 3px}.mode-character{width:57px;height:51px}.modebar button>span.mode-name{font-size:12px}.mode-subtitle{font-size:7px!important}.generated-background .mode-card{padding:24px 12px 14px}.mode-description{margin:9px 0;font-size:10px;min-height:24px}.home-start{min-height:51px;font-size:20px}.home-stage{min-height:105px}.home-stage .home-art{min-height:30px}.home-bottom button{min-height:40px}.home-top .best-pill,.home-top .icon-button{min-height:36px}.home-logo-image{max-height:17dvh}.home-bottom{margin-top:14px}}
@media(max-width:350px){.home-screen{padding-inline:15px}.mode-card .modebar{gap:6px}.modebar button>span.mode-name{font-size:12px}.mode-subtitle{font-size:6.5px!important}.mode-character{width:52px;height:49px}.side{gap:4px}.side button,.hud-next{padding:0 4px}.side .label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.home-screen:not(.hidden),.app:not(.hidden),.press-wave{animation:none!important}.press-wave{display:none}.home-screen button.is-pressed{transform:translateY(2px)!important}}

.home-video{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none;z-index:0}.home-screen.mobile-video{isolation:isolate;background:#45b7ef url('assets/home-mobile-poster.webp') center top/cover no-repeat}.mobile-video .home-video{display:block}.mobile-video .home-top,.mobile-video .home-stage,.mobile-video .home-menu{z-index:2}.mobile-video .generated-brand{visibility:hidden}.mobile-video .home-stage:before,.home-screen.mobile-video:before{display:none}.record-modes{display:flex;gap:8px;margin:16px 0}.record-modes button{flex:1;padding:10px 4px;border:1px solid #a4cbd9;background:#e7f3fa;color:#487084;border-radius:12px;font:800 12px DriftRounded,system-ui,sans-serif}.record-modes button.active{background:#8660cc;color:white;border-color:#6945af;box-shadow:0 3px #63429c}#personalModal .records{margin:22px 0}#personalModal .records b{font-size:20px}#personalModal{font-family:DriftRounded,system-ui,sans-serif}

#gameRestart{display:flex;align-items:center;justify-content:center}.app header .icons{gap:5px}#restartModal{font-family:DriftRounded,system-ui,sans-serif;padding:24px;max-width:390px}#restartModal h2{margin:0 0 12px;font-size:23px}#restartMessage{font-size:14px;line-height:1.6;margin:0 0 24px}.restart-actions{display:flex;gap:12px}.restart-actions button{flex:1;padding:13px 8px;font-size:13px}@media(max-width:380px){.app header{gap:5px}.app header .icon-button{width:32px;min-width:32px}.game-heading{font-size:9px}.app .score{font-size:22px}}

.home-screen.desktop-video{isolation:isolate;background:#45b7ef url('assets/home-desktop-poster.webp') center top/cover no-repeat}.desktop-video .home-video{display:block;object-position:center top}.desktop-video .home-top,.desktop-video .home-stage,.desktop-video .home-menu{z-index:2}.desktop-video .generated-brand{visibility:hidden}.desktop-video .home-stage:before,.home-screen.desktop-video:before{display:none}
.home-privacy-link{display:block;text-align:center;font:700 10px DriftRounded,system-ui;color:#14577d;margin:7px auto 0;text-decoration:underline}.sponsor-card{margin-top:16px;background:#fff9eeed;border:1px solid #bfdae1;border-radius:17px;padding:14px;color:#365061;font-family:DriftRounded,system-ui}.sponsor-label{font-size:8px;letter-spacing:1.4px;font-weight:900;color:#788778}.sponsor-content{display:flex;gap:11px;align-items:center;margin:8px 0}.sponsor-content img{width:42px;height:42px;object-fit:contain}.sponsor-content b{font-size:13px}.sponsor-content p{font-size:10px;margin:3px 0}.sponsor-actions{display:flex;gap:15px;align-items:center}.sponsor-actions button{background:#29785c;color:white;border-radius:8px;padding:8px 12px;font-size:11px}.sponsor-actions a{font-size:10px;color:#276c86}#sponsorArea:not(:empty){max-height:180px;overflow:auto}@media(max-height:750px){#sponsorArea:not(:empty){max-height:110px}.sponsor-card{margin-top:9px;padding:9px}.sponsor-content{margin:3px 0}.sponsor-content p{display:none}}

@media(max-width:699px){.home-screen.generated-background{background-image:url('assets/home-mobile-poster.webp')}.generated-background .generated-brand{visibility:hidden}}
@media(min-width:700px) and (min-aspect-ratio:6/5){.home-screen.generated-background{background-image:url('assets/home-desktop-poster.webp')}.generated-background .generated-brand{visibility:hidden}.home-screen.generated-background:before,.generated-background .home-stage:before{display:none}}

.home-legal-links{display:flex;align-items:center;justify-content:center;gap:8px;margin:7px auto 0;font:700 10px DriftRounded,system-ui;color:#16577b}.home-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}.home-legal-links a:focus-visible{outline:2px solid white;outline-offset:4px}