/* Hanafuda Flip!! (flip.iroi.ro): the game's own look, from its palette (Hanafuda.cs in nami): red #E60012, ink #111111,
   cream #F7F3E8, purple #5B3A8C, yellow #FFE100, oak table #D9B489. The deck, riders and shots are sprites of the game's art. */
body{margin:0;background:#2e2d2d}
[hidden]{display:none!important}
a{color:#111}a:hover{color:#E60012}
.page{font-family:"Shippori Mincho",serif;color:#111;background:#2e2d2d}
.disp{font-family:"Dela Gothic One",sans-serif;letter-spacing:.02em}
.sea{background-color:#2e2d2d;background-image:
radial-gradient(circle at 100% 150%,#2e2d2d 24%,#4a4846 24%,#4a4846 28%,#2e2d2d 28%,#2e2d2d 36%,#4a4846 36%,#4a4846 40%,transparent 40%,transparent),
radial-gradient(circle at 0 150%,#2e2d2d 24%,#4a4846 24%,#4a4846 28%,#2e2d2d 28%,#2e2d2d 36%,#4a4846 36%,#4a4846 40%,transparent 40%,transparent),
radial-gradient(circle at 50% 100%,#4a4846 10%,#2e2d2d 10%,#2e2d2d 23%,#4a4846 23%,#4a4846 30%,#2e2d2d 30%,#2e2d2d 43%,#4a4846 43%,#4a4846 50%,#2e2d2d 50%,#2e2d2d 63%,#4a4846 63%,#4a4846 71%,transparent 71%,transparent),
radial-gradient(circle at 100% 50%,#4a4846 5%,#2e2d2d 5%,#2e2d2d 15%,#4a4846 15%,#4a4846 20%,#2e2d2d 20%,#2e2d2d 29%,#4a4846 29%,#4a4846 34%,#2e2d2d 34%,#2e2d2d 44%,#4a4846 44%,#4a4846 49%,transparent 49%,transparent),
radial-gradient(circle at 0 50%,#4a4846 5%,#2e2d2d 5%,#2e2d2d 15%,#4a4846 15%,#4a4846 20%,#2e2d2d 20%,#2e2d2d 29%,#4a4846 29%,#4a4846 34%,#2e2d2d 34%,#2e2d2d 44%,#4a4846 44%,#4a4846 49%,transparent 49%,transparent);
background-size:72px 36px}
.back{background-color:#c4000f;background-image:
radial-gradient(circle at 100% 150%,#c4000f 24%,#e8334a 24%,#e8334a 28%,#c4000f 28%,#c4000f 36%,#e8334a 36%,#e8334a 40%,transparent 40%,transparent),
radial-gradient(circle at 0 150%,#c4000f 24%,#e8334a 24%,#e8334a 28%,#c4000f 28%,#c4000f 36%,#e8334a 36%,#e8334a 40%,transparent 40%,transparent),
radial-gradient(circle at 50% 100%,#e8334a 10%,#c4000f 10%,#c4000f 23%,#e8334a 23%,#e8334a 30%,#c4000f 30%,#c4000f 43%,#e8334a 43%,#e8334a 50%,#c4000f 50%,#c4000f 63%,#e8334a 63%,#e8334a 71%,transparent 71%,transparent),
radial-gradient(circle at 100% 50%,#e8334a 5%,#c4000f 5%,#c4000f 15%,#e8334a 15%,#e8334a 20%,#c4000f 20%,#c4000f 29%,#e8334a 29%,#e8334a 34%,#c4000f 34%,#c4000f 44%,#e8334a 44%,#e8334a 49%,transparent 49%,transparent),
radial-gradient(circle at 0 50%,#e8334a 5%,#c4000f 5%,#c4000f 15%,#e8334a 15%,#e8334a 20%,#c4000f 20%,#c4000f 29%,#e8334a 29%,#e8334a 34%,#c4000f 34%,#c4000f 44%,#e8334a 44%,#e8334a 49%,transparent 49%,transparent);
background-size:40px 20px}
.wood{background-color:#D9B489;background-image:repeating-linear-gradient(90deg,rgba(120,78,40,.10) 0 2px,transparent 2px 38px),repeating-linear-gradient(0deg,rgba(120,78,40,.18) 0 3px,transparent 3px 260px)}
.dots{background-color:#F7F3E8;background-image:radial-gradient(#111 1.1px,transparent 1.3px);background-size:22px 22px}
.deck{background-image:url(/assets/images/flip/deck.webp);background-size:1200% 400%;background-repeat:no-repeat}
.riders{background-image:url(/assets/images/flip/riders.webp);background-size:1400% 100%;background-repeat:no-repeat}
.shots{background-image:url(/assets/images/flip/shots.webp);background-size:500% 100%;background-repeat:no-repeat}
.packart{background-image:url(/assets/images/flip/pack.webp);background-size:cover}
.icon{background-image:url(/assets/images/flip/icon.png);background-size:cover}
.studio{background-image:url(/assets/images/flip/iroiro.png);background-size:cover}
.hcard{aspect-ratio:33/54;border:3px solid #111;border-radius:10px;box-shadow:4px 5px 0 #111;overflow:hidden;position:relative;box-sizing:border-box}
.tag{display:inline-block;background:#F7F3E8;border:3px solid #111;box-shadow:4px 4px 0 #111;padding:8px 16px;font-family:"Dela Gothic One",sans-serif;color:#111}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border:3px solid #111;box-shadow:5px 5px 0 #111;font-family:"Dela Gothic One",sans-serif;font-size:18px;text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #111}
.btn-red{background:#E60012;color:#F7F3E8}.btn-red:hover{color:#FFE100}
.btn-cream{background:#F7F3E8;color:#111}.btn-cream:hover{color:#E60012}
.lift{transition:transform .18s ease}.lift:hover{transform:translateY(-8px) rotate(-1.5deg)}
.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.95;background:linear-gradient(115deg,transparent 22%,rgba(255,80,170,.7) 32%,rgba(255,235,60,.7) 40%,rgba(80,255,190,.7) 48%,rgba(255,255,255,.95) 52%,rgba(80,190,255,.7) 58%,rgba(190,100,255,.7) 66%,transparent 78%);background-size:280% 280%}
.holo-run{animation:sheen 3.2s linear infinite}
@keyframes sheen{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.swell{animation:swell 6s linear infinite}
@keyframes swell{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.spin-back-a{animation:spinBackA .7s cubic-bezier(.3,.1,.3,1)}.spin-back-b{animation:spinBackB .7s cubic-bezier(.3,.1,.3,1)}
.spin-front-a{animation:spinFrontA .7s cubic-bezier(.3,.1,.3,1)}.spin-front-b{animation:spinFrontB .7s cubic-bezier(.3,.1,.3,1)}
@keyframes spinBackA{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-120px) rotate(-200deg)}100%{transform:translateY(0) rotate(-360deg)}}
@keyframes spinBackB{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-120px) rotate(-200deg)}100%{transform:translateY(0) rotate(-360deg)}}
@keyframes spinFrontA{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-120px) rotate(200deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes spinFrontB{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-120px) rotate(200deg)}100%{transform:translateY(0) rotate(360deg)}}
.pop-a{animation:popA .9s ease-out both}.pop-b{animation:popB .9s ease-out both}
@keyframes popA{0%{transform:scale(.4) rotate(-6deg);opacity:0}25%{transform:scale(1.12) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes popB{0%{transform:scale(.4) rotate(-6deg);opacity:0}25%{transform:scale(1.12) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.flipper{perspective:900px;cursor:pointer;background:none;border:0;padding:0}
.flip-in{transition:transform .5s cubic-bezier(.3,.1,.2,1);transform-style:preserve-3d;position:relative;width:100%;height:100%}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.faceup{transform:rotateY(180deg)}
.tear-in{animation:tearIn .5s ease-out both}
@keyframes tearIn{0%{transform:translateY(40px) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.coins span{width:36px!important;height:36px!important;flex:none;font-family:"Shippori Mincho",serif!important;font-weight:800;font-size:16px!important;line-height:1}
/* A phone: the nav runs left to right under the brand, and the flip cards sit under the hero card. */
@media (max-width: 640px){
.nav-links{justify-content:flex-start!important;padding-right:0!important;gap:6px 16px!important}
.nav-links a{font-size:13px!important}
.stage{grid-template-columns:1fr 1fr!important;justify-items:center}
.stage-card{grid-column:1 / 3!important;width:min(76vw,300px)!important}
#flip-back{grid-column:1!important;grid-row:2!important;justify-self:end}
#flip-front{grid-column:2!important;grid-row:2!important;justify-self:start}
.stage-hint{grid-row:3!important;grid-column:1 / 3!important}
}
@media (prefers-reduced-motion: reduce){.bob,.swell,.holo-run{animation:none}}