/* Hoop Shot 3D - street-court poster look: thick navy outlines, flat bright colours, hard offset shadows */
@font-face { font-family: "PP Display"; src: url(../assets/fonts/bungee-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Text"; src: url(../assets/fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PP Text"; src: url(../assets/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }

:root {
  --navy: #1d2b53; --cream: #fff6e3; --paper: #fffdf6; --orange: #ff8a1f; --yellow: #ffd23f; --pink: #ff5d8f; --teal: #1fb5a8; --purple: #7a45e8; --blue: #3fa7ff; --coral: #ff6b57; --green: #4cc86a;
  --wc: #ff8a1f; --ol: 0.16em; --sh: 0.2em;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffd9a0; overscroll-behavior: none; }
body { font-family: "PP Text", "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; color: var(--navy); font-weight: 600; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; overflow: hidden; font-size: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg, #ffcf8a 0, #ffcf8a 3.2em, #ffd89c 3.2em, #ffd89c 6.4em); }
#app::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(150,80,10,.07) 0, rgba(150,80,10,.07) 1px, transparent 1px, transparent 6.4em); }
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible { outline: 0.18em solid var(--navy); outline-offset: 0.12em; }
.screen { position: absolute; inset: 0; display: none; z-index: 1; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.active { display: flex; flex-direction: column; z-index: 2; animation: scr .32s cubic-bezier(.2,.9,.3,1); }
@keyframes scr { from { opacity: 0; transform: translateY(.8em) scale(.985); } }
h1, h2 { margin: 0; font-family: "PP Display", "Arial Black", Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }

/* ---- shared pieces ---- */
.rb { width: 2.7em; height: 2.7em; border-radius: 50%; border: var(--ol) solid var(--navy); box-shadow: 0 .16em 0 var(--navy); display: grid; place-items: center; flex: none; transition: transform .1s; }
.rb img { width: 52%; height: 52%; }
.rb:active, .nb:active, .tl:active, .btn:active, .playb:active { transform: translateY(.14em); box-shadow: 0 .02em 0 var(--navy); }
.c-blue { background: var(--blue); } .c-purple { background: var(--purple); } .c-orange { background: var(--orange); } .c-pink { background: var(--pink); } .c-teal { background: var(--teal); } .c-yellow { background: var(--yellow); } .c-coral { background: var(--coral); }
.pill { display: flex; align-items: center; gap: .3em; min-width: 3.6em; height: 2.2em; padding: 0 .8em; border-radius: 1.2em; background: var(--paper); border: var(--ol) solid var(--navy); box-shadow: 0 .14em 0 var(--navy); font-weight: 800; font-size: 1em; justify-content: center; }
.pill .star { width: 1.15em; height: 1.15em; }
.star { width: 1.3em; height: 1.3em; flex: none; }
.star.on { fill: var(--yellow); stroke: var(--navy); stroke-width: 1.7; stroke-linejoin: round; }
.star.off { fill: rgba(29,43,83,.14); stroke: rgba(29,43,83,.28); stroke-width: 1.4; stroke-linejoin: round; }
.star.xl { width: 3.4em; height: 3.4em; transform: scale(.4); opacity: .25; transition: transform .35s cubic-bezier(.3,1.8,.5,1), opacity .2s; }
.star.xl.shine, .big-stars .star.off { transform: scale(1); opacity: 1; }
.star.xl.on:not(.shine) { transform: scale(.4); }
.bar { display: block; height: .9em; border-radius: .6em; background: rgba(29,43,83,.15); border: .12em solid var(--navy); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--wc); transition: width .4s; }

/* ---- loading ---- */
.loading { align-items: center; justify-content: center; gap: 1.1em; }
.load-ball { width: 5em; height: 5em; border-radius: 50%; background: var(--orange); border: var(--ol) solid var(--navy); position: relative; box-shadow: 0 .3em 0 var(--navy); animation: lb .7s ease-in-out infinite alternate; overflow: hidden; }
.load-ball::before, .load-ball::after { content: ""; position: absolute; background: var(--navy); }
.load-ball::before { left: 50%; top: 0; bottom: 0; width: .16em; margin-left: -.08em; } .load-ball::after { top: 50%; left: 0; right: 0; height: .16em; margin-top: -.08em; }
.load-ball i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 1.1em 0 0 -.9em var(--navy), inset -1.1em 0 0 -.9em var(--navy); }
@keyframes lb { from { transform: translateY(0); } to { transform: translateY(-1.1em); } }
.load-title { font-family: "PP Display", Impact, sans-serif; font-size: 2.6em; color: var(--navy); text-shadow: .06em .06em 0 #fff; }
.load-title b { color: var(--orange); font-weight: 400; }
.load-bar { width: 12em; height: 1em; border-radius: .7em; background: var(--paper); border: var(--ol) solid var(--navy); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .25s; }

/* ---- menu ---- */
.m-corner { position: absolute; top: calc(.9em + env(safe-area-inset-top)); right: calc(.9em + env(safe-area-inset-right)); display: flex; gap: .7em; z-index: 5; }
.m-hero { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }
.m-hero::before { content: ""; position: absolute; left: 50%; top: 42%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.42) 0 7deg, rgba(255,255,255,0) 7deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 58%); mask-image: radial-gradient(circle, #000 12%, transparent 58%); animation: rays 90s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-stage { z-index: 1; }
.hero-stage { position: absolute; inset: 0; }
.hero-stage canvas, .stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.m-info { flex: none; display: flex; flex-direction: column; align-items: center; gap: .9em; padding: .3em 1.2em 1.1em; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: .9; text-transform: uppercase; position: relative; }
.logo .l1 { font-size: 3.1em; color: var(--paper); -webkit-text-stroke: .09em var(--navy); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--navy), 0 .17em 0 var(--orange); letter-spacing: .03em; }
.logo { margin-bottom: .5em; }
.logo .l2 { position: absolute; right: -.3em; bottom: -.75em; font-size: 1.5em; padding: .12em .45em .05em; background: var(--pink); color: #fff; border: .12em solid var(--navy); border-radius: .35em; transform: rotate(-7deg); box-shadow: 0 .12em 0 var(--navy); }
.playb { display: flex; align-items: center; gap: .9em; margin-top: .8em; padding: .55em 1.9em .55em .6em; background: var(--orange); border: var(--ol) solid var(--navy); border-radius: 2em; box-shadow: 0 .26em 0 var(--navy); min-width: 15em; transition: transform .1s; }
.pl-ic { width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--paper); border: .14em solid var(--navy); display: grid; place-items: center; }
.pl-ic img { width: 55%; height: 55%; filter: invert(1) brightness(.2) sepia(1) hue-rotate(190deg) saturate(3); margin-left: .12em; }
.pl-t { display: flex; flex-direction: column; text-align: left; line-height: 1; }
.pl-t b { font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 1.7em; color: #fff; text-shadow: 0 .06em 0 var(--navy); -webkit-text-stroke: .04em var(--navy); paint-order: stroke fill; letter-spacing: .03em; }
.pl-t small { font-size: .95em; font-weight: 700; color: var(--navy); margin-top: .25em; }
.m-row { display: flex; gap: .7em; }
.nb { position: relative; width: 4.6em; padding: .55em 0 .5em; border: var(--ol) solid var(--navy); border-radius: 1.1em; box-shadow: 0 .2em 0 var(--navy); display: flex; flex-direction: column; align-items: center; gap: .25em; transition: transform .1s; }
.nb img { width: 1.7em; height: 1.7em; } .nb span { font-weight: 800; font-size: .92em; color: #fff; text-shadow: 0 .07em 0 rgba(29,43,83,.7); }
.nb .dot { position: absolute; top: -.4em; right: -.4em; width: 1em; height: 1em; border-radius: 50%; background: var(--yellow); border: .14em solid var(--navy); display: none; }
.nb .dot.on { display: block; animation: blink 1s infinite alternate; } @keyframes blink { to { transform: scale(1.25); } }
.m-prog { display: flex; align-items: center; gap: .8em; font-weight: 800; font-size: .95em; }
.m-prog .bar { width: 7em; } .m-prog .star { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.m-prog #menuStats { display: flex; align-items: center; gap: .3em; white-space: nowrap; }

/* ---- level picker & shop heads ---- */
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .9em 1em .4em; }
.station { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em; min-width: 0; }
.st-t { text-align: center; min-width: 0; line-height: 1.05; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: .9em; box-shadow: 0 .16em 0 var(--navy); padding: .35em 1em .3em; border-bottom: .5em solid var(--wc); }
.st-t h2 { font-size: 1.35em; text-transform: uppercase; white-space: nowrap; } .st-t small { display: block; font-weight: 700; font-size: .85em; opacity: .75; white-space: nowrap; margin-top: .15em; }
.arr { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--paper); border: var(--ol) solid var(--navy); box-shadow: 0 .12em 0 var(--navy); display: grid; place-items: center; }
.arr img { width: 55%; filter: invert(1) brightness(.2) sepia(1) hue-rotate(190deg) saturate(3); }
.v-dots { display: flex; justify-content: center; gap: .6em; padding: .1em 0 .5em; }
.v-dots button { width: 1em; height: 1em; border-radius: 50%; background: var(--dc); border: .13em solid var(--navy); opacity: .55; } .v-dots button.on { opacity: 1; transform: scale(1.3); }
.wall { flex: 1 1 0; min-height: 0; display: flex; padding: 0 1em; }
.lv-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: .9em; padding-bottom: .4em; }
.lc { position: relative; display: flex; flex-direction: column; align-items: center; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: 1em; box-shadow: 0 .22em 0 var(--navy); padding: .4em .4em .35em; min-height: 0; overflow: hidden; transition: transform .1s; }
.lc:active { transform: translateY(.15em); box-shadow: 0 .05em 0 var(--navy); }
.lc.current { background: #fff3c4; outline: .18em dashed var(--wc); outline-offset: .12em; animation: cur 1.2s ease-in-out infinite alternate; } @keyframes cur { to { transform: scale(1.03); } }
.lc .art-w { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; border-radius: .6em; background: linear-gradient(#cfeaff, #f4fbff); overflow: hidden; border: .1em solid rgba(29,43,83,.2); }
.lc .art { width: 100%; height: 100%; }
.lc .no { position: absolute; top: .25em; left: .25em; min-width: 1.8em; height: 1.8em; padding: 0 .3em; border-radius: .9em; background: var(--wc); color: #fff; border: .13em solid var(--navy); font-family: "PP Display", Impact, sans-serif; font-size: 1.05em; display: grid; place-items: center; text-shadow: 0 .05em 0 var(--navy); }
.lc .fst { display: flex; gap: .05em; margin-top: .3em; height: 1.3em; } .lc .fst .star { width: 1.3em; height: 1.3em; }
.lc .goal { position: absolute; top: .3em; right: .3em; font-size: .8em; font-weight: 800; background: rgba(255,255,255,.9); padding: .1em .5em; border-radius: .6em; border: .1em solid var(--navy); }
.lc.locked { background: #e8e1d2; } .lc.locked .art-w { background: #d9d1c0; } .lockbox { display: grid; place-items: center; } .lockbox img { width: 2.2em; filter: invert(1) brightness(.3) sepia(1) hue-rotate(190deg) saturate(2); opacity: .55; }
.lv-sub { margin: 0; padding: .3em 1em .8em; text-align: center; font-weight: 700; opacity: .8; font-size: .95em; }

/* ---- shop ---- */
.shop-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .8em; padding: .2em 1em 1em; }
.shop-show { flex: none; display: flex; align-items: center; justify-content: center; gap: 1em; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: 1.2em; box-shadow: 0 .22em 0 var(--navy); padding: .6em; }
.shop-show img { width: 7em; height: 7em; animation: bob 1.4s ease-in-out infinite alternate; } @keyframes bob { to { transform: translateY(-.4em) rotate(8deg); } }
.shop-show b { font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 1.7em; }
.shop-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .7em; }
.bs { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: 1em; box-shadow: 0 .2em 0 var(--navy); min-height: 0; padding: .3em; }
.bs img { width: 58%; max-height: 62%; object-fit: contain; } .bs span { font-weight: 800; font-size: .88em; } .bs.sel { background: #fff3c4; outline: .18em solid var(--orange); outline-offset: .1em; }
.bs.locked img { filter: grayscale(1) opacity(.45); } .bs i { font-style: normal; font-size: .8em; font-weight: 800; display: flex; align-items: center; gap: .2em; } .bs .cost .star { width: 1em; height: 1em; } .bs .tick { color: #0b8a4a; }

/* ---- game ---- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .8em 1em .3em; gap: .6em; }
.top-r { justify-self: end; } .top > .rb:first-child { justify-self: start; }
.ticket { position: relative; text-align: center; line-height: 1.05; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: .5em; box-shadow: 0 .16em 0 var(--navy); padding: .35em 1.5em .3em; border-left: .5em solid var(--wc); border-right: .5em solid var(--wc); }
.ticket b { display: block; font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 1.3em; text-transform: uppercase; white-space: nowrap; } .ticket span { font-weight: 700; font-size: .85em; opacity: .75; white-space: nowrap; }
.info { display: flex; justify-content: center; gap: .7em; padding: .2em 1em .5em; }
.chip { display: flex; flex-direction: column; align-items: center; min-width: 5.4em; padding: .2em .9em .25em; background: var(--navy); color: #fff; border-radius: .7em; border: .14em solid var(--navy); box-shadow: 0 .14em 0 rgba(29,43,83,.35); line-height: 1.05; }
.chip small { font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.chip b { font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 1.5em; letter-spacing: .04em; } .chip b em { font-style: normal; font-size: .65em; opacity: .75; }
.chip.big { background: var(--wc); border-color: var(--navy); } .chip.big small { color: #fff; }
.chip.lives b { display: flex; gap: .15em; height: 1.4em; align-items: center; } .heart { width: .95em; height: .95em; background: var(--pink); transform: rotate(-45deg); position: relative; border-radius: .15em; display: inline-block; }
.heart::before, .heart::after { content: ""; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: 50%; } .heart::before { top: -50%; left: 0; } .heart::after { left: 50%; top: 0; } .heart.off { background: rgba(255,255,255,.25); }
.play { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .6em; padding: 0 .8em .8em; }
.stage { position: relative; flex: 1 1 0; min-height: 0; border-radius: 1.3em; overflow: hidden; border: var(--ol) solid var(--navy); box-shadow: 0 .24em 0 var(--navy); background: #cfeaff; }
.tools { flex: none; display: flex; justify-content: center; gap: .9em; }
.tl { display: flex; align-items: center; gap: .5em; padding: .45em 1.2em .45em .8em; border: var(--ol) solid var(--navy); border-radius: 1.6em; box-shadow: 0 .2em 0 var(--navy); font-weight: 800; transition: transform .1s; }
.tl img { width: 1.5em; height: 1.5em; } .tl span { color: #fff; text-shadow: 0 .07em 0 rgba(29,43,83,.7); } .tl.c-yellow span { color: var(--navy); text-shadow: none; } .tl.c-yellow img { filter: invert(1) brightness(.2) sepia(1) hue-rotate(190deg) saturate(3); }
.pop { position: absolute; left: 50%; top: 28%; transform: translate(-50%, 0); font-family: "PP Display", Impact, sans-serif; font-size: 3.2em; white-space: nowrap; opacity: 0; pointer-events: none; color: #fff; -webkit-text-stroke: .08em var(--navy); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--navy); z-index: 3; }
.pop.good { color: var(--yellow); } .pop.bad { color: #fff; font-size: 2.2em; }
.pop.show { animation: popin 1.1s cubic-bezier(.2,1.5,.4,1) both; } @keyframes popin { 0% { opacity: 0; transform: translate(-50%, .6em) scale(.4) rotate(-6deg); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(2deg); } 70% { opacity: 1; transform: translate(-50%, -.3em) scale(1); } 100% { opacity: 0; transform: translate(-50%, -1em) scale(1); } }
.windtag { position: absolute; left: .7em; top: .7em; display: none; align-items: center; gap: .4em; padding: .2em .7em .2em .5em; background: rgba(255,255,255,.92); border: .14em solid var(--navy); border-radius: 1em; font-weight: 800; font-size: .95em; z-index: 3; }
.windtag.on { display: flex; } .windtag svg { width: 2em; height: 1em; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .windtag.l svg { transform: scaleX(-1); }
.windtag.on svg { animation: wnd .8s ease-in-out infinite alternate; } @keyframes wnd { to { transform: translateX(.3em); } } .windtag.l.on svg { animation-name: wndl; } @keyframes wndl { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(.3em); } }

/* ---- modals ---- */
.modal-back { position: absolute; inset: 0; z-index: 20; background: rgba(29,43,83,.45); display: grid; place-items: center; padding: 1em; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: min(24em, 100%); max-height: 100%; overflow: auto; background: var(--paper); border: var(--ol) solid var(--navy); border-radius: 1.4em; box-shadow: 0 .35em 0 var(--navy); padding: 1.2em 1.2em 1.1em; text-align: center; animation: modalin .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes modalin { from { transform: scale(.7); opacity: 0; } }
.mh { margin: -1.2em -1.2em .9em; padding: .55em 1em .45em; background: var(--wc); border-bottom: var(--ol) solid var(--navy); border-radius: 1.1em 1.1em 0 0; } .mh h2 { color: #fff; font-size: 1.6em; text-transform: uppercase; -webkit-text-stroke: .07em var(--navy); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--navy); }
.mh.good { background: var(--green); } .mh.bad { background: var(--coral); }
.mp { margin: .5em 0 .9em; font-weight: 700; font-size: 1.05em; line-height: 1.3; } .mp small { opacity: .75; }
.big-stars { display: flex; justify-content: center; gap: .15em; margin: .3em 0; } .big-score { margin: .2em 0; } .big-score small { display: block; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; } .big-score b { font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 4.2em; color: var(--orange); -webkit-text-stroke: .04em var(--navy); line-height: 1; }
.newb { color: var(--pink); font-weight: 800; }
.btns { display: flex; gap: .7em; justify-content: center; flex-wrap: wrap; }
.btn { padding: .55em 1.3em; border: var(--ol) solid var(--navy); border-radius: 1.6em; box-shadow: 0 .2em 0 var(--navy); font-family: "PP Display", Impact, sans-serif; font-size: 1.1em; letter-spacing: .03em; color: #fff; text-shadow: 0 .07em 0 rgba(29,43,83,.75); transition: transform .1s; flex: 1 1 auto; }
.b-orange { background: var(--orange); } .b-blue { background: var(--blue); } .b-yellow { background: var(--yellow); color: var(--navy); text-shadow: none; }
.help { list-style: none; margin: 0 0 1em; padding: 0; text-align: left; display: flex; flex-direction: column; gap: .6em; } .help li { display: flex; gap: .7em; align-items: center; line-height: 1.2; }
.hn { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--orange); border: .13em solid var(--navy); color: #fff; font-family: "PP Display", Impact, sans-serif; display: grid; place-items: center; }
.set { display: flex; flex-direction: column; gap: .6em; margin-bottom: 1em; }
.tg { display: flex; align-items: center; gap: .7em; padding: .5em .8em; border: .14em solid var(--navy); border-radius: 1em; background: #fff; font-weight: 800; } .tg img { width: 1.5em; height: 1.5em; background: var(--navy); border-radius: .4em; padding: .2em; } .tg span { flex: 1; text-align: left; }
.sw { width: 2.8em; height: 1.5em; border-radius: 1em; background: #cfd3de; border: .13em solid var(--navy); position: relative; transition: background .2s; } .sw::after { content: ""; position: absolute; top: .1em; left: .12em; width: 1em; height: 1em; border-radius: 50%; background: #fff; border: .1em solid var(--navy); transition: transform .2s; } .tg.on .sw { background: var(--green); } .tg.on .sw::after { transform: translateX(1.2em); }
.linkb { margin-top: .9em; font-weight: 700; text-decoration: underline; opacity: .7; font-size: .9em; }
.dcard { display: flex; align-items: center; gap: .9em; text-align: left; background: #fff3c4; border: .14em solid var(--navy); border-radius: 1em; padding: .6em .8em; } .dd { flex: none; width: 3.6em; text-align: center; background: var(--paper); border: .14em solid var(--navy); border-radius: .7em; overflow: hidden; line-height: 1; } .dd small { display: block; background: var(--pink); color: #fff; font-weight: 800; padding: .25em 0; font-size: .8em; text-transform: uppercase; } .dd b { display: block; font-family: "PP Display", Impact, sans-serif; font-weight: 400; font-size: 1.8em; padding: .15em 0 .1em; }
.dinfo { display: flex; flex-direction: column; gap: .2em; font-weight: 700; } .dinfo b { font-size: 1.1em; } .tags { display: flex; gap: .3em; flex-wrap: wrap; } .tags i { font-style: normal; font-size: .8em; background: var(--navy); color: #fff; border-radius: .6em; padding: .05em .6em; }
.dstat { display: flex; justify-content: space-between; align-items: center; margin: .8em .2em 1em; font-weight: 700; } .dstat > div:first-child { display: flex; gap: .1em; } .streak { display: flex; align-items: center; gap: .3em; } .streak img { width: 1.4em; filter: invert(48%) sepia(80%) saturate(2400%) hue-rotate(345deg); }
#toast { position: absolute; left: 50%; bottom: 1.4em; transform: translate(-50%, 2em); background: var(--navy); color: #fff; padding: .5em 1.2em; border-radius: 2em; font-weight: 700; opacity: 0; pointer-events: none; z-index: 30; transition: .25s; max-width: 92%; text-align: center; } #toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: absolute; top: -5%; z-index: 40; pointer-events: none; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(var(--rot)); } }

/* ---- landscape ---- */
@media (orientation: landscape) {
  .menu.active { flex-direction: row; align-items: stretch; }
  .m-hero { flex: 1.15 1 0; } .m-info { flex: 1 1 0; justify-content: center; padding: 1em 2em 1em 0; }
  .m-corner { right: auto; left: calc(.9em + env(safe-area-inset-left)); }
  .lv-grid { grid-template-columns: repeat(4, 1fr); }
  .shop-body { flex-direction: row; } .shop-show { flex-direction: column; flex: 0 0 30%; justify-content: center; } .shop-grid { grid-template-columns: repeat(4, 1fr); }
  .play { flex-direction: row; } .tools { flex-direction: column; justify-content: center; gap: .9em; } .tl { min-width: 7em; }
  .top { padding-bottom: .1em; } .info { position: absolute; top: .85em; left: 4.8em; padding: 0; z-index: 2; gap: .5em; } .info .chip { min-width: 4.6em; padding: .1em .7em .15em; } .info .chip b { font-size: 1.25em; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .logo .l1 { font-size: 2em; } .logo .l2 { font-size: 1.15em; bottom: -.6em; } .logo { margin-bottom: .4em; } .playb { margin-top: .2em; min-width: 13em; padding: .35em 1.5em .35em .45em; } .m-info { gap: .5em; } .nb { padding: .35em 0; } .nb img { width: 1.4em; height: 1.4em; }
  .lv-head { padding: .5em 1em .2em; } .lv-sub { padding-bottom: .4em; } .v-dots { display: none; }
  .shop-show img { width: 4em; height: 4em; } .modal { padding: .8em; } .mh { margin: -.8em -.8em .6em; } .big-stars .star { width: 2.4em; height: 2.4em; }
}
@media (max-width: 440px) and (orientation: portrait) { .st-t { padding: .3em .7em .25em; } .st-t h2 { font-size: 1.1em; } .st-t small { font-size: .72em; } .station { gap: .3em; } .lv-head { gap: .5em; padding: .8em .7em .4em; } }
@media (max-width: 380px) and (orientation: portrait) { .logo .l1 { font-size: 2.6em; } .st-t { padding: .3em .6em .25em; } .st-t h2 { font-size: 1.05em; } .st-t small { font-size: .7em; } .arr { width: 1.7em; height: 1.7em; } .station { gap: .3em; } .lv-head { gap: .4em; padding: .8em .6em .4em; } .pill { min-width: 3em; padding: 0 .5em; } .nb { width: 4em; } .m-row { gap: .5em; } .ticket { padding: .3em 1em; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; } }

/* ---- first-time swipe guide ---- */
.guide { position: absolute; z-index: 4; display: none; pointer-events: none; transform: translate(-50%, -100%); margin-top: -2.6em; flex-direction: column; align-items: center; gap: .3em; }
.guide.on { display: flex; }
.guide svg { width: 2.6em; height: 4.2em; overflow: visible; animation: swp 1.5s cubic-bezier(.5,0,.3,1) infinite; }
.guide .trail { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 var(--navy)); opacity: .9; }
.guide .tip { fill: var(--yellow); stroke: var(--navy); stroke-width: 3.5; }
.guide b { background: var(--navy); color: #fff; padding: .2em .8em; border-radius: 1em; font-size: .95em; white-space: nowrap; }
@keyframes swp { 0% { transform: translateY(1.4em); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(calc(var(--dy, 120px) * -.25)); opacity: 0; } }
button, .lc, .bs { transition: transform .12s, box-shadow .12s, filter .12s; }
@media (hover: hover) { .nb:hover, .tl:hover, .rb:hover, .btn:hover, .playb:hover, .lc:not(.locked):hover, .bs:hover { filter: brightness(1.07); transform: translateY(-.1em); } }
/* v1.0.1: soft edge where the menu sunburst meets the title panel on wide screens */
@media (orientation: landscape) {
  .m-hero { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
}