/* Art direction: foil, depth, and the rhythm of a hand being dealt. */
.hero{grid-template-columns: .95fr 1.05fr;gap:28px;padding-top:70px}.hero-copy{padding-top:20px}.hero .lead{line-height:1.65}.motion-hero{position:relative;background:#142f28;color:#f3f1e7;border-radius:22px;min-width:0;align-self:start;overflow:hidden;box-shadow:0 24px 50px #17352c20;border:1px solid #2f4b3e;margin-bottom:55px}.motion-top{height:52px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}.motion-top>span{font-size:8px;letter-spacing:2px;display:flex;gap:9px;align-items:center}.motion-top i{width:5px;height:5px;background:#dbeaac;border-radius:50%}.motion-top button{color:#dbeaac;background:#ffffff09;border:1px solid #ffffff20;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:12px}.motion-stage{height:410px;position:relative;perspective:1000px;isolation:isolate}.arena-rings{position:absolute;width:380px;height:380px;border:1px solid #c4d7ac18;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%);box-shadow:0 0 0 50px #c4d7ac06,0 0 0 100px #c4d7ac03;background:radial-gradient(ellipse,#8ea6642c,transparent 68%)}.stage-word{position:absolute;left:24px;top:10px;font:800 clamp(65px,6.8vw,96px)/1 Manrope,sans-serif;letter-spacing:-6px;color:#dbeaac10}.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}.motion-hero[data-chapter="0"] .rip-scene,.motion-hero[data-chapter="1"] .deck-scene,.motion-hero[data-chapter="2"] .clash-scene{opacity:1;visibility:visible}.collectible{border-radius:15px;overflow:hidden;border:1px solid #e1e6c144;background:#0d211c;box-shadow:0 25px 28px #051b2780}.collectible>img{width:100%;height:100%;object-fit:cover}.collectible>div{position:absolute;bottom:0;left:0;right:0;padding:45px 16px 18px;background:linear-gradient(transparent,#081d18e8 40%,#081d18);display:flex;flex-direction:column;gap:6px;color:#f3f1e7}.collectible>div>span{font-size:8px;letter-spacing:1.5px;color:#dbeaac}.collectible strong{font-family:Manrope,sans-serif;font-size:17px;letter-spacing:-.5px}.hero-reveal{position:absolute;width:175px;height:260px;left:calc(50% - 87px);top:54px;opacity:0;transform:translateY(70px) scale(.83)}.hero-wrapper{position:absolute;width:214px;height:321px;left:calc(50% - 107px);top:25px;filter:drop-shadow(0 18px 20px #061e2990)}.hero-wrapper img{width:100%;height:100%;object-fit:cover}.wrapper-top{clip-path:polygon(0 0,100% 0,100% 22%,91% 21%,83% 24%,74% 21%,66% 24%,56% 22%,46% 25%,35% 22%,22% 24%,12% 21%,0 24%)}.wrapper-bottom{clip-path:polygon(0 24%,12% 21%,22% 24%,35% 22%,46% 25%,56% 22%,66% 24%,74% 21%,83% 24%,91% 21%,100% 22%,100% 100%,0 100%)}.scene-note{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:11px;color:#c3cdb6}.reveal-burst{position:absolute;width:210px;height:210px;top:80px;left:calc(50% - 105px);border:1px solid #dfedaf;opacity:0;border-radius:50%;z-index:-1}.chapter-controls{display:flex;border-top:1px solid #bdccac24;margin:0 20px;padding-bottom:6px}.chapter-controls button{position:relative;flex:1;padding:18px 8px;background:none;border:0;color:#abb9a5;text-align:left;cursor:pointer;font-size:11px}.chapter-controls span{font-size:8px;margin-right:8px;opacity:.6}.chapter-controls button[aria-pressed=true]{color:#dbeaac}.chapter-controls i{position:absolute;left:0;right:16px;bottom:5px;height:2px;transform-origin:left;background:#dbeaac;transform:scaleX(0)}.chapter-controls button[aria-pressed=true] i{animation:chapter-progress 5s linear both}.hero-deck{position:absolute;inset:0}.deck-tile{position:absolute;width:110px;height:164px;left:calc(50% - 55px);top:72px;border-radius:10px;overflow:hidden;border:1px solid #dce6c577;box-shadow:0 15px 24px #041c22aa;transform:translate(0,110px) rotate(0);opacity:0}.deck-tile img{width:100%;height:100%;object-fit:cover}.deck-tile:after{content:attr(data-symbol);position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#081d19);color:#e6efc1;padding:20px 12px 12px;font-size:21px}.deck-score{position:absolute;top:318px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:2px}.deck-score i{font-style:normal;padding:0 10px;color:#809b67}.duel-card{width:154px;height:229px;position:absolute;top:55px}.duel-paper{left:calc(50% - 166px);transform:translateX(-180px) rotate(-18deg);opacity:0}.duel-rock{right:calc(50% - 166px);transform:translateX(180px) rotate(18deg);opacity:0}.versus{position:absolute;left:calc(50% - 16px);top:146px;font:800 22px Manrope,sans-serif;color:#dbeaac;z-index:3}.clash-result{position:absolute;left:0;right:0;top:319px;text-align:center;font-size:10px;letter-spacing:1.6px;color:#dbeaac;opacity:0}.motion-hero.running[data-chapter="0"] .wrapper-top{animation:foil-top 5s both}.motion-hero.running[data-chapter="0"] .wrapper-bottom{animation:foil-bottom 5s both}.motion-hero.running[data-chapter="0"] .hero-reveal{animation:card-pull 5s both}.motion-hero.running[data-chapter="0"] .reveal-burst{animation:burst 5s both}.motion-hero.running[data-chapter="1"] .deck-tile{animation:deck-deal .8s cubic-bezier(.17,.8,.27,1.18) both;animation-delay:calc(var(--i)*65ms)}.motion-hero.running[data-chapter="2"] .duel-paper{animation:paper-clash 5s both}.motion-hero.running[data-chapter="2"] .duel-rock{animation:rock-clash 5s both}.motion-hero.running[data-chapter="2"] .clash-result{animation:result-in 5s both}.motion-paused *,.motion-paused *:after,.motion-paused *:before{animation-play-state:paused!important}.pack-playground{min-width:0;align-self:center;width:100%;max-width:490px}.pack-select{display:flex;justify-content:center;gap:8px;position:relative;z-index:2}.pack-select button{padding:11px 15px;border:1px solid #a9bf9350;border-radius:24px;color:#bacdb0;background:transparent;font-size:11px;cursor:pointer;min-height:44px}.pack-select button[aria-pressed=true]{color:#17352c;background:#dbeaac;border-color:#dbeaac}.pack-table{position:relative;height:390px;perspective:1000px}.pack-halo{position:absolute;inset:12% 0;background:radial-gradient(ellipse,#5b815855,transparent 68%)}.demo-wrapper{position:absolute;width:210px;height:315px;left:calc(50% - 105px);top:20px;filter:drop-shadow(0 20px 18px #051c2788);transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s}.demo-wrapper img{width:100%;height:100%;object-fit:cover}.demo-top{clip-path:polygon(0 0,100% 0,100% 21%,90% 23%,77% 20%,64% 24%,53% 21%,40% 24%,25% 21%,13% 24%,0 21%)}.demo-bottom{clip-path:polygon(0 21%,13% 24%,25% 21%,40% 24%,53% 21%,64% 24%,77% 20%,90% 23%,100% 21%,100% 100%,0 100%)}.tear-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:2px;color:#c1d4b7}.pull-card{position:absolute;width:190px;height:285px;left:calc(50% - 95px);top:42px;transform:translateY(40px) scale(.85) rotateY(-35deg);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s}.pull-card strong{font-size:27px}.pull-card small{color:#c5d1b4;font-size:11px}.pack-playground[data-state="revealed"] .demo-top{transform:translate(90px,-100px) rotate(24deg);opacity:0}.pack-playground[data-state="revealed"] .demo-bottom{transform:translate(-25px,130px) rotate(-12deg);opacity:0}.pack-playground[data-state="revealed"] .pull-card{opacity:1;transform:translateY(-6px) scale(1) rotateY(0);transition-delay:.2s}.pack-playground[data-state="revealed"] .tear-hint{opacity:0}.rip-trigger{background:#dbeaac;color:#17352c;border:0;border-radius:10px;font-weight:700;font-size:13px;padding:17px 22px;width:100%;cursor:pointer;display:flex;justify-content:space-between;min-height:50px;transition:transform .18s}.rip-trigger:hover{transform:translateY(-3px)}.rip-trigger:active{transform:scale(.98)}.pull-status{color:#dbeaac;text-align:center;font-size:12px;margin:18px 0 9px;min-height:18px}.demo-disclaimer{text-align:center;color:#a9bc9c;font-size:9px;line-height:1.6}.rip-copy .pack-explainer{font-size:12px!important}.practice-demo{background:#e9ecdd;border:1px solid #d8dec8;border-radius:18px;margin-top:55px;padding:32px;overflow:hidden}.practice-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.practice-heading .eyebrow{margin-bottom:12px}.practice-heading h3{font-size:30px;letter-spacing:-1.2px;margin-bottom:0}.preview-label{border:1px solid #c5ceb6;padding:9px 12px;border-radius:20px;font-size:8px;letter-spacing:1.4px;white-space:nowrap}.practice-arena{display:flex;align-items:center;gap:32px;justify-content:center;padding:40px 0 28px;min-height:225px}.opponent-card{border-radius:12px;border:1px solid #aebf91;background:repeating-linear-gradient(45deg,#17352c,#17352c 5px,#1b3b30 5px,#1b3b30 6px);color:#dbeaac;width:100px;height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:0 12px 18px #17352c24;transform:rotate(8deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.opponent-card>span{font-size:21px;font-weight:800;letter-spacing:-1.8px}.opponent-card>span>span{color:#92a757}.opponent-card small{font-size:6px;letter-spacing:.8px}.round-copy{width:270px}.round-label{font-size:8px;letter-spacing:1.5px;color:#65794e}.round-title{font:800 27px/1.25 Manrope,sans-serif;margin:10px 0;letter-spacing:-1px}.round-detail{font-size:12px;line-height:1.7;color:#67735d;margin:0}.practice-hand{display:flex;gap:15px;max-width:570px;margin:auto;justify-content:center;perspective:900px}.practice-hand button{padding:0;position:relative;width:165px;height:210px;overflow:hidden;border-radius:12px;border:2px solid transparent;background:#17352c;color:#f3f1e7;cursor:pointer;box-shadow:0 12px 22px #17352c20;transform:translateY(0) rotate(var(--tilt));transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,border-color .25s}.practice-hand button:nth-child(1){--tilt:-6deg}.practice-hand button:nth-child(2){--tilt:0deg}.practice-hand button:nth-child(3){--tilt:6deg}.practice-hand img{width:100%;height:100%;object-fit:cover}.practice-hand button>span{position:absolute;bottom:0;left:0;right:0;text-align:left;padding:35px 13px 15px;background:linear-gradient(transparent,#0b2119 50%);font-size:15px;font-weight:700}.practice-hand small{display:block;font-size:9px;font-weight:400;color:#bacbb0;margin-top:6px}.practice-hand button:hover:not(:disabled),.practice-hand button:focus-visible{transform:translateY(-15px) rotate(0);border-color:#829653}.practice-hand button.selected{transform:translateY(-18px) rotate(0) scale(1.05);border-color:#8ba14e;opacity:1!important}.practice-demo[data-state="result"] .practice-hand button:not(.selected){opacity:.48}.practice-demo[data-state="result"] .opponent-card{transform:rotate(0)}.practice-demo[data-state="result"] .opponent-card>span{font-size:38px}.practice-demo[data-state="result"] .opponent-card small{font-size:9px}.practice-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;min-height:40px}.practice-footer p{font-size:10px;line-height:1.6;color:#66725e;margin:0}.practice-footer button{border:0;background:#17352c;color:#dbeaac;padding:12px 16px;border-radius:8px;font-size:11px;cursor:pointer;white-space:nowrap}.create-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:70px}.create-section>p{font-size:15px;color:var(--muted);line-height:1.8;align-self:end;margin:0}.create-section h2{font-size:41px}.hero-foot{width:100%;margin-top:0}.rip-section{gap:75px}.no-motion .hero-wrapper{display:none}.no-motion .hero-reveal{opacity:1;transform:none}.no-motion .deck-tile{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}.no-motion .duel-paper{opacity:1;transform:rotate(-7deg)}.no-motion .duel-rock{opacity:1;transform:rotate(7deg)}.no-motion .clash-result{opacity:1}.no-motion .chapter-controls i{animation:none!important;transform:scaleX(1)}
@keyframes chapter-progress{to{transform:scaleX(1)}}
@keyframes foil-top{0%,14%{transform:translate(0,0) rotate(0);opacity:1}24%,100%{transform:translate(70px,-110px) rotate(24deg);opacity:0}}
@keyframes foil-bottom{0%,17%{transform:translate(0,0);opacity:1}37%,100%{transform:translate(-25px,150px) rotate(-16deg);opacity:0}}
@keyframes card-pull{0%,17%{opacity:0;transform:translateY(70px) scale(.83) rotateY(-25deg)}38%{opacity:1;transform:translateY(-8px) scale(1.03) rotateY(0)}50%,100%{opacity:1;transform:translateY(0) scale(1) rotateY(0)}}
@keyframes burst{0%,18%{opacity:0;transform:scale(.5)}23%{opacity:.5}44%,100%{opacity:0;transform:scale(1.9)}}
@keyframes deck-deal{to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@keyframes paper-clash{0%{opacity:0;transform:translateX(-180px) rotate(-18deg)}18%,30%{opacity:1;transform:translateX(0) rotate(-7deg)}39%{transform:translateX(26px) rotate(2deg) scale(1.05)}50%,100%{opacity:1;transform:translate(5px,-10px) rotate(-6deg) scale(1.08)}}
@keyframes rock-clash{0%{opacity:0;transform:translateX(180px) rotate(18deg)}18%,30%{opacity:1;transform:translateX(0) rotate(7deg)}39%{transform:translateX(-16px) rotate(-4deg)}54%,100%{opacity:.45;transform:translate(20px,15px) rotate(13deg) scale(.95)}}
@keyframes result-in{0%,40%{opacity:0;transform:translateY(12px)}55%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.hero{gap:22px;padding-top:45px;grid-template-columns:1fr 1fr}.motion-stage{height:370px}.hero-reveal{top:32px}.hero-wrapper{top:0}.hero-deck{transform:scale(.85);transform-origin:50% 40%}.deck-score,.clash-result{top:295px}.duel-card{width:130px;height:198px;top:60px}.duel-paper{left:calc(50% - 137px)}.duel-rock{right:calc(50% - 137px)}.rip-section{gap:32px}.scene-note{font-size:9px}.hero h1{font-size:48px}.create-section{gap:35px}}
@media(max-width:760px){.hero{display:flex;padding-top:34px;gap:0}.hero-copy{padding-top:0}.hero h1{font-size:clamp(43px,10.6vw,66px)}.hero .lead{font-size:15px}.hero .eyebrow{font-size:8px}.hero-actions .button{font-size:10px}.motion-hero{width:100%;margin:28px 0 32px;border-radius:17px}.motion-top{height:43px;padding:0 16px}.motion-stage{height:340px}.stage-word{font-size:77px}.hero-wrapper{height:283px;width:189px;left:calc(50% - 94px);top:3px}.hero-reveal{width:161px;height:240px;left:calc(50% - 80px);top:19px}.scene-note{bottom:16px;font-size:10px}.hero-deck{transform:scale(.78);transform-origin:50% 15%}.deck-score{top:269px}.duel-card{top:36px}.versus{top:122px}.clash-result{top:269px;font-size:9px}.chapter-controls{margin:0 14px}.chapter-controls button{font-size:10px;padding:16px 7px}.rip-section{gap:35px;flex-direction:column-reverse;padding-top:58px}.pack-playground{max-width:430px}.pack-table{height:364px}.pack-select button{flex:1;padding:10px}.demo-wrapper{height:294px;width:196px;left:calc(50% - 98px)}.pull-card{height:270px;width:180px;left:calc(50% - 90px);top:36px}.practice-demo{padding:24px 17px;margin-top:30px;border-radius:14px}.practice-heading{display:block}.practice-heading h3{font-size:26px}.preview-label{display:inline-block;font-size:7px;margin-top:16px}.practice-arena{gap:20px;padding:28px 0;min-height:193px}.opponent-card{min-width:78px;width:78px;height:116px}.round-copy{width:auto;max-width:200px}.round-title{font-size:21px}.round-detail{font-size:10px}.round-label{font-size:7px}.practice-hand{gap:9px}.practice-hand button{height:166px;min-width:0;flex:1}.practice-hand button>span{font-size:12px;padding:28px 8px 12px}.practice-hand small{font-size:8px}.practice-footer{flex-wrap:wrap}.practice-footer p{font-size:9px}.create-section{grid-template-columns:1fr;gap:24px}.create-section h2{font-size:35px}.create-section>p{font-size:13px}.hero-foot{gap:18px}}
@media(prefers-reduced-motion:reduce){.motion-stage *{animation:none!important;transition:none!important}.hero-wrapper{display:none}.hero-reveal{opacity:1;transform:none}.deck-tile{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}.duel-paper{opacity:1;transform:rotate(-7deg)}.duel-rock{opacity:1;transform:rotate(7deg)}.clash-result{opacity:1}.chapter-controls i{animation:none!important;transform:scaleX(1)}}