/* Play: the hub, the arcade shelves, the game screen and overlays, the Collection door, station cards and the pack.
   Works in both looks; the playful look and the app themes only change the tokens. */
.hub-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.hub-lv { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 10%, transparent); }
.hub-lv svg { width: 28px; height: 32px; }
.hub-lv b { font: 800 .86rem/1 var(--play, inherit); }
.hub-lv .pl-bar { width: 54px; margin: 0; }
.hub-pill { font-size: .78rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--tile); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 10%, transparent); }
.hub-pill--coin { background: color-mix(in srgb, #ffc20e 30%, var(--tile)); }
.hub-pill--btn { margin-left: auto; background: var(--ink); color: var(--tile, #fff); cursor: pointer; }

.today-card { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; margin: 0 0 10px; padding: 14px; border-radius: 20px; border: 0; background: var(--tile); color: var(--ink); box-shadow: 0 4px 0 var(--edge, rgba(0,0,0,.12)), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); font: inherit; }
.today-card__row { cursor: pointer; display: flex; align-items: center; gap: 12px; }
.today-card__row b { display: block; font-size: .98rem; }
.today-card__row small { display: block; font-size: .78rem; }
.today-flame { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font: 800 1.2rem/1 var(--play, inherit); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.today-flame.is-on { background: var(--orange, #e2541c); color: #fff; }
.today-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.today-q li { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.today-q li i { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent); }
.today-q li.is-done i { background: #2e9e5b; box-shadow: none; }
.today-q li.is-done span { text-decoration: line-through; opacity: .7; }
.today-q small { margin-left: auto; font-weight: 700; }
.today-card--game { flex-direction: row; align-items: center; cursor: pointer; }
.today-card--game .grow { display: flex; flex-direction: column; gap: 2px; }
.today-card--game small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, inherit); }
.today-card--game b { font: 800 1.12rem/1.1 var(--play, inherit); }
.today-card--game span:not(.gtile2__art) { font-size: .84rem; }
.today-card--game .gtile2__art { width: 58px; height: 58px; flex: none; }
.today-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge, rgba(0,0,0,.12)), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }

.shelf-h { margin: 18px 0 8px; font: 800 1rem/1.2 var(--play, inherit); }
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 38%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.gtile2 { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 18px; border: 0; background: color-mix(in srgb, var(--gc, var(--orange)) 14%, var(--tile)); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--gc, var(--orange)) 35%, var(--edge, #ccc)); transition: transform .12s; }
.gtile2:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--gc, var(--orange)) 35%, var(--edge, #ccc)); }
.gtile2__art { display: block; width: 52px; height: 52px; }
.gtile2__art svg { width: 100%; height: 100%; }
.gtile2 b { font: 800 .95rem/1.15 var(--play, inherit); }
.gtile2 small { font-size: .74rem; line-height: 1.25; color: var(--ink-soft, inherit); }
.gtile2__tag { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: .62rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.coll-door { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 18px 0 10px; padding: 14px; border-radius: 20px; border: 0; font: inherit; color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 18%, var(--tile)), color-mix(in srgb, #7b3fd1 14%, var(--tile))); box-shadow: 0 4px 0 var(--edge, rgba(0,0,0,.12)); cursor: pointer; }
.coll-door b { display: block; font: 800 1.05rem/1.2 var(--play, inherit); }
.coll-door small { display: block; font-size: .8rem; margin-top: 2px; }
.coll-door__cards { position: relative; width: 56px; height: 60px; flex: none; }
.coll-door__cards i { position: absolute; inset: 4px 10px; border-radius: 8px; background: var(--tile); box-shadow: 0 0 0 2px var(--ink); transform: rotate(calc((var(--i) - 1) * 12deg)) translateX(calc((var(--i) - 1) * 6px)); }
.coll-door__cards i:nth-child(2) { background: var(--orange); }
.hub-rules { margin-top: 6px; }

.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.coll-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 18px; border: 0; text-align: left; font: inherit; color: var(--ink); background: color-mix(in srgb, var(--tc) 12%, var(--tile)); box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 30%, var(--edge, #ccc)); cursor: pointer; }
.coll-tile__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--tc); color: #fff; }
.coll-tile__ic svg { width: 18px; height: 18px; }
.coll-tile b { font-size: .88rem; line-height: 1.2; }
.coll-tile small { font-size: .74rem; }

/* the game screen */
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.game-best { font-size: .82rem; }
.seg2 { display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seg2 button { border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; color: var(--ink); }
.seg2 button[aria-pressed="true"] { background: var(--tile); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.game-host { position: relative; min-height: 380px; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, var(--tile)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent); user-select: none; -webkit-user-select: none; }
.game-host:has(.arc-cv) { height: var(--gh, min(64vh, 600px)); }
.arc-cv { display: block; touch-action: none; }
.game-info { margin-top: 12px; font-size: .88rem; }
.game-info summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.arc-mis { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.arc-mis li { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .84rem; display: flex; gap: 6px; align-items: center; }
.arc-mis li small { margin-left: auto; font-weight: 700; }
.arc-mis li.is-done { text-decoration: line-through; opacity: .65; }
.arc-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 28%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: arcIn .22s ease-out; z-index: 5; }
.arc-over__card, .arc-over--pause { width: min(340px, 100%); text-align: center; padding: 18px; border-radius: 22px; background: var(--tile); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.arc-over--pause { position: absolute; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.arc-over--pause b { font: 800 1.3rem/1.1 var(--play, inherit); }
.arc-over--pause p { margin: 0; font-size: .9rem; }
.arc-score { font: 800 3.2rem/1 var(--play, inherit); }
.arc-best { font-size: .82rem; font-weight: 700; }
.arc-over__card p { margin: 2px 0; font-size: .9rem; }
.arc-bar { font-weight: 800; color: #b26b00; font-size: .9rem; min-height: 1em; }
.arc-over__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
@keyframes arcIn { from { opacity: 0; } to { opacity: 1; } }
.arc-over__card { animation: arcPop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes arcPop { from { transform: scale(.86); } to { transform: none; } }

/* Stasyondle */
.sdl { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; }
.sdl-head, .sdl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sdl-head span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: center; color: var(--ink-soft, inherit); }
.sdl-row { display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(6px); transition: .3s; }
.sdl-row.is-in { opacity: 1; transform: none; }
.sdl-name { font-size: .86rem; }
.sdl-t { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 4px; border-radius: 12px; background: var(--c); color: #fff; text-align: center; line-height: 1.1; }
.sdl-t b { font-size: .8rem; }
.sdl-t small { font-size: 1rem; font-weight: 800; color: #fff !important; }
.sdl-row.is-win .sdl-t { animation: sdlWin .5s calc(var(--n, 0) * 80ms) both; }
@keyframes sdlWin { 50% { transform: scale(1.12); } }
.sdl-in { position: relative; }
.sdl-empty { display: grid; gap: 8px; }
.sdl-slot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sdl-slot i { height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent); }
.sdl-in input { width: 100%; }
.sdl-sug { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sdl-sug button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 0; font: inherit; text-align: left; background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 12%, transparent); }
.sdl-clue { margin: 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, #ffc20e 25%, var(--tile)); color: var(--ink) !important; }

/* Kulay Match */
.kul { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.kul-hud { display: flex; align-items: center; gap: 10px; }
.kul-score { font: 800 1.6rem/1 var(--play, inherit); }
.kul-time { font-weight: 800; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.kul-time.is-low { background: #c8282e; color: #fff; }
.kul-combo { margin-left: auto; font-weight: 800; font-size: .86rem; }
.kul-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 7px; }
.kul-c { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; perspective: 600px; cursor: pointer; font: inherit; }
.kul-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .32s cubic-bezier(.3,1.3,.5,1); }
.kul-c.is-up .kul-in, .kul-c.is-done .kul-in { transform: rotateY(180deg); }
.kul-back, .kul-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; text-align: center; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); }
.kul-back { background: repeating-linear-gradient(45deg, var(--orange) 0 8px, color-mix(in srgb, var(--orange) 75%, #fff) 8px 16px); }
.kul-face { transform: rotateY(180deg); background: var(--c); color: var(--ci); }
.kul-face b { font-size: clamp(.6rem, 2.6vw, .82rem); line-height: 1.1; }
.kul-face small { font-size: .6rem; color: inherit !important; opacity: .85; }
.kul-c.is-done { animation: kulDone .4s ease-out forwards; }
@keyframes kulDone { 50% { transform: scale(1.08); } to { opacity: .35; } }

/* Sungka */
.sgk { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.sgk-msg { margin: 0; min-height: 2.4em; font-weight: 700; text-align: center; }
.sgk-board { margin-top: 8px; display: grid; grid-template-columns: 46px 1fr 46px; grid-template-rows: 1fr 1fr; gap: 6px; padding: 10px 8px; border-radius: 40px; background: linear-gradient(#a8743f, #8a5a2b); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 4px 0 #5e3a17; }
.sgk-head { grid-row: 1 / 3; border-radius: 22px; background: #5e3a17; box-shadow: inset 0 3px 8px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #ffe9c7; position: relative; }
.sgk-head--ai { grid-column: 1; } .sgk-head--me { grid-column: 3; }
.sgk-row { grid-column: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 3px 0; }
.sgk-row--ai { grid-row: 1; } .sgk-row--me { grid-row: 2; }
.sgk-h { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: #5e3a17; box-shadow: inset 0 3px 6px rgba(0,0,0,.45); color: #ffe9c7; font: inherit; display: grid; place-items: center; transition: transform .1s, box-shadow .2s; }
.sgk-row--me .sgk-h:not(:disabled) { cursor: pointer; box-shadow: inset 0 3px 6px rgba(0,0,0,.45), 0 0 0 2.5px #ffd36b; }
.sgk-h.is-hot, .sgk-head.is-hot { transform: scale(1.12); box-shadow: inset 0 3px 6px rgba(0,0,0,.45), 0 0 0 3px #fff; }
.sgk-h b { position: absolute; z-index: 1; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; font-size: .66rem; font-weight: 800; background: #ffe9c7; color: #3a2410; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.sgk-head b { position: relative; z-index: 1; font-weight: 800; text-shadow: 0 1px 2px #000; }
.sgk-head b { font-size: 1rem; }
.sgk-dots { position: absolute; inset: 0; }
.sgk-dots i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #f6ead7; box-shadow: 0 1px 0 rgba(0,0,0,.4); transform: rotate(var(--a)) translateX(var(--r)); }
.sgk-help { text-align: center; }

/* station cards */
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 8px; }
.scard { position: relative; aspect-ratio: 5 / 7; border: 0; padding: 0; font: inherit; color: var(--ink); background: none; perspective: 900px; cursor: pointer; text-align: left; }
.scard.is-locked, .scard--set { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 14px; background: var(--tile); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lc) 45%, transparent); overflow: hidden; }
.scard__no { font-size: .62rem; font-weight: 800; letter-spacing: .05em; color: var(--ink-soft, inherit); }
.scard__img { display: block; flex: 1; min-height: 70px; border-radius: 9px; background: color-mix(in srgb, var(--lc) 30%, var(--tile)) center / cover no-repeat; }
.scard__img { position: relative; background-color: var(--lc); }
.scard.is-locked .scard__img { filter: grayscale(.85) brightness(1.05); opacity: .62; }
.scard.is-locked .scard__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lc); opacity: .18; }
.scard__lock { font-size: .64rem; font-weight: 800; color: var(--ink-soft, inherit); }
.scard b { font-size: .8rem; line-height: 1.15; }
.scard__clue { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: .66rem; padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--lc) 16%, var(--tile)); align-self: flex-start; }
.scard__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.2,.5,1); }
.scard.is-flip .scard__in { transform: rotateY(180deg); }
.scard__front, .scard__back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--tile); overflow: hidden; }
.scard__back { transform: rotateY(180deg); background: color-mix(in srgb, var(--lc) 14%, var(--tile)); font-size: .7rem; }
.scard__back dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 4px 0; }
.scard__back dt { font-weight: 800; } .scard__back dd { margin: 0; }
.scard__r { font-style: normal; font-size: .62rem; font-weight: 800; }
.scard.f-bronze .scard__front { box-shadow: inset 0 0 0 3px #b0723b, inset 0 0 0 5px var(--tile), inset 0 0 0 6px var(--lc); }
.scard.f-silver .scard__front { box-shadow: inset 0 0 0 3px #a9b3bd, inset 0 0 0 5px var(--tile), inset 0 0 0 6px var(--lc); background: linear-gradient(160deg, #fff, #eef1f4); }
.scard.f-gold .scard__front { box-shadow: inset 0 0 0 3px #d4a017, inset 0 0 0 5px #fff4c7, inset 0 0 0 6px var(--lc); background: linear-gradient(160deg, #fffaf0, #fff0c2); }
.scard.f-holo .scard__front { box-shadow: inset 0 0 0 3px transparent; background: linear-gradient(var(--tile), var(--tile)) padding-box, linear-gradient(120deg, #ff5ea8, #ffd36b, #5ef0c8, #6aa8ff, #c07bff) border-box; border: 3px solid transparent; }
.scard.f-holo .scard__front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(160,220,255,.35) 52%, transparent 65%); background-size: 250% 100%; animation: holo 3.2s linear infinite; mix-blend-mode: overlay; pointer-events: none; }
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.scard__img.is-own::after { content: "Your photo"; position: absolute; }
.scard--set { cursor: default; background: color-mix(in srgb, var(--lc) 10%, var(--tile)); }
.scard--set.is-done { box-shadow: inset 0 0 0 3px #d4a017; }
.scard__set { flex: 1; display: grid; place-items: center; }
.scard__set svg { width: 64px; height: 76px; }
.scard--set:not(.is-done) .scard__set { opacity: .35; filter: grayscale(1); }
.cards-credit { font-size: .72rem; margin-top: 8px; }

/* the pack: a ticket envelope that tears open into the new card */
.pack-pop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(10, 8, 20, .55); opacity: 0; transition: opacity .25s; }
.pack-pop.is-on { opacity: 1; }
.pack-pop__env { grid-area: 1 / 1; position: relative; width: 190px; height: 250px; border-radius: 18px; border: 0; background: repeating-linear-gradient(-45deg, var(--lc) 0 14px, color-mix(in srgb, var(--lc) 80%, #fff) 14px 28px); box-shadow: 0 0 0 4px #fff, 0 18px 50px rgba(0,0,0,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; cursor: pointer; animation: packWob 1.4s ease-in-out infinite; }
.pack-pop__env b { font: 800 1.4rem/1 var(--play, inherit); letter-spacing: .06em; padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.35); }
.pack-pop__env small { font-weight: 700; color: #fff !important; }
.pack-pop__flap { position: absolute; top: 0; left: 0; right: 0; height: 52px; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.25); border-bottom: 3px dashed rgba(255,255,255,.8); }
@keyframes packWob { 50% { transform: rotate(-3deg) scale(1.03); } }
.pack-pop__card { grid-area: 1 / 1; width: 170px; grid-template-columns: 1fr; opacity: 0; transform: scale(.4) rotate(-10deg); transition: .5s cubic-bezier(.2,1.5,.4,1) .15s; pointer-events: none; }
.pack-pop.is-open .pack-pop__env { animation: packOut .45s forwards; pointer-events: none; }
.pack-pop.is-open .pack-pop__card { opacity: 1; transform: none; pointer-events: auto; }
@keyframes packOut { to { transform: translateY(-60px) scale(1.2); opacity: 0; } }
.pack-pop__ok { grid-area: 1 / 1; align-self: end; margin-bottom: 14vh; }
@media (prefers-reduced-motion: reduce) { .pack-pop__env, .scard.f-holo .scard__front::after { animation: none; } .kul-in, .scard__in { transition: none; } }

/* the mascot that peeks from the screen edge when the panel is hidden (playful look) */

/* Bayad Po */
.bay { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 12px; }
.bay-hud, .l48-hud, .hula-hud { display: flex; align-items: center; gap: 10px; }
.bay-score, .l48-score, .hula-score { font: 800 1.6rem/1 var(--play, inherit); }
.bay-time { font-weight: 800; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); } .bay-time.is-low { background: #c8282e; color: #fff; }
.bay-combo, .l48-top, .hula-round { margin-left: auto; font-weight: 800; font-size: .86rem; }
.bay-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--tile); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 10%, transparent); }
.bay-card.is-in { animation: bayIn .3s cubic-bezier(.2,1.4,.4,1); } @keyframes bayIn { from { transform: translateX(30px); opacity: 0; } }
.bay-m { width: 52px; height: 62px; flex: none; }
.bay-say { display: flex; flex-direction: column; gap: 2px; } .bay-say b { font-size: 1.05rem; } .bay-math { font-weight: 800; font-size: 1.1rem; }
.bay-flash { position: absolute; right: 12px; top: 8px; font-weight: 800; color: #c8282e; animation: bayF .9s ease-out forwards; } .bay-flash.is-good { color: #16884a; }
@keyframes bayF { to { transform: translateY(-22px); opacity: 0; } }
.bay-tray { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, #ffc20e 22%, var(--tile)); } .bay-tray b { font: 800 1.5rem/1 var(--play, inherit); margin-right: auto; }
.bay-clear { border: 0; background: var(--tile); color: var(--ink); font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.bay-coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bay-c { aspect-ratio: 1; border-radius: 50%; border: 0; font: 800 1rem/1 inherit; color: #3a2a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #e6b422 70%); box-shadow: 0 4px 0 #a07a10, inset 0 0 0 3px rgba(255,255,255,.4); cursor: pointer; }
.bay-c.is-bill { border-radius: 10px; aspect-ratio: 1.1; background: linear-gradient(135deg, #b8e0c2, #6cbf84); color: #0f3d1f; box-shadow: 0 4px 0 #3c7a50; }
.bay-c:active, .bay-c.is-pop { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 #a07a10; }
/* Riles */
.ril { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.ril-hud { display: flex; align-items: baseline; gap: 10px; } .ril-hud b { font-size: 1rem; }
.ril-wrap { position: relative; display: grid; grid-template-columns: 26px 1fr 26px; align-items: stretch; }
.ril-grid { grid-column: 2; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, #8a6a45 40%, var(--tile)); }
.ril-t { aspect-ratio: 1; border: 0; padding: 0; border-radius: 8px; background: color-mix(in srgb, #8a6a45 18%, var(--tile)); cursor: pointer; overflow: hidden; }
.ril-t svg { width: 100%; height: 100%; display: block; transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
.ril-ties rect { fill: #8a5a2b; } .ril-rail { stroke: #5b6470; stroke-width: 4; fill: none; }
.ril-t.is-lit { background: color-mix(in srgb, #ffc20e 40%, var(--tile)); } .ril-t.is-lit .ril-rail { stroke: var(--orange); }
.ril-end { grid-row: 1; position: relative; } .ril-end--a { grid-column: 1; } .ril-end--b { grid-column: 3; }
.ril-end span { position: absolute; left: 0; right: 0; top: calc((var(--r) + .5) / var(--rows, 6) * 100% - 30px); height: 60px; display: grid; place-items: center; writing-mode: vertical-rl; font-size: .62rem; font-weight: 800; border-radius: 8px; background: var(--orange); color: #fff; }
.ril-wrap.is-win .ril-t.is-lit { animation: rilWin .5s ease-out; } @keyframes rilWin { 50% { transform: scale(1.08); } }
/* Linya 2048 */
.l48 { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.l48-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 14%, var(--tile)); touch-action: none; aspect-ratio: 1; }
.l48-board > i { border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, var(--tile)); }
.l48-tiles { position: absolute; inset: 8px; }
.l48-t { --s: calc((100% - 24px) / 4); position: absolute; width: calc((100% - 24px) / 4); height: calc((100% - 24px) / 4); left: calc(var(--c) * ((100% - 24px) / 4 + 8px)); top: calc(var(--r) * ((100% - 24px) / 4 + 8px)); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: left .12s, top .12s; color: #121212; background: #f3e9d7; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.l48-t b { font: 800 clamp(.68rem, 3.4vw, .95rem)/1.05 var(--play, inherit); } .l48-t small { font-size: .62rem; font-weight: 700; color: inherit !important; opacity: .7; }
.l48-t[data-lv="1"] { background: #f7d9a8; } .l48-t[data-lv="2"] { background: #b8e0c2; } .l48-t[data-lv="3"] { background: #ffc20e; } .l48-t[data-lv="4"] { background: #6cc0b8; } .l48-t[data-lv="5"] { background: #f28c38; color: #fff; } .l48-t[data-lv="6"] { background: #1f6feb; color: #fff; } .l48-t[data-lv="7"] { background: #7b3fd1; color: #fff; } .l48-t[data-lv="8"] { background: #1E8C45; color: #fff; } .l48-t[data-lv="9"] { background: #e8b400; } .l48-t[data-lv="10"], .l48-t[data-lv="11"] { background: #e4002b; color: #fff; box-shadow: 0 0 16px rgba(228,0,43,.5); }
.l48-t.is-new { animation: l48New .18s ease-out; } .l48-t.is-merge { animation: l48Pop .2s ease-out; } .l48-t.is-gone { opacity: 0; transition: opacity .1s .08s, left .12s, top .12s; }
@keyframes l48New { from { transform: scale(.3); } } @keyframes l48Pop { 50% { transform: scale(1.15); } }
/* Hula Oras */
.hula { padding: 14px; min-height: 380px; display: flex; flex-direction: column; gap: 12px; }
.hula-q { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 12px; border-radius: 16px; background: var(--tile); } .hula-q b { font-size: 1.2rem; }
.hula-line { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--lc); color: #fff; margin-bottom: 4px; }
.hula-dia i { display: flex; justify-content: space-between; align-items: center; height: 18px; margin: 0 6px; background: linear-gradient(var(--lc), var(--lc)) center / 100% 4px no-repeat; }
.hula-dia s { width: 8px; height: 8px; border-radius: 50%; background: var(--tile); box-shadow: 0 0 0 2px var(--lc); } .hula-dia s.is-mid { background: var(--lc); } .hula-dia s.is-end { width: 14px; height: 14px; background: var(--orange); box-shadow: 0 0 0 2px var(--ink); }
.hula-in { display: flex; flex-direction: column; align-items: center; gap: 6px; } .hula-v { font: 800 2rem/1 var(--play, inherit); } .hula-in input { width: 100%; accent-color: var(--orange); }
.hula-res { min-height: 2.4em; text-align: center; margin: 0; }

/* Sakay Pass and Barkada Cup */
.hub-pill.is-ready { background: var(--orange); color: #fff; }
.pass-top { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: var(--tile); margin-bottom: 12px; } .pass-top b { font: 800 2rem/1 var(--play, inherit); }
.pass { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pass li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pass li b { display: block; font-size: .88rem; } .pass li small { font-size: .74rem; }
.pass-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pass li.is-ready { background: color-mix(in srgb, var(--orange) 14%, var(--tile)); box-shadow: inset 0 0 0 2px var(--orange); } .pass li.is-ready .pass-n { background: var(--orange); color: #fff; }
.pass li.is-got { opacity: .65; } .pass li.is-got .pass-n { background: #2e9e5b; color: #fff; } .pass-ok { font-weight: 800; }
.btn--sm { padding: 6px 12px; font-size: .82rem; }
.cup-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.cup-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); } .cup-list li.is-me { box-shadow: inset 0 0 0 2px var(--orange); }
.cup-list b { flex: 1; } .cup-n { font-weight: 800; width: 22px; } .cup-list .num { font-weight: 800; }

/* Saan 'To */
.saan { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.saan-hud, .tyc-top { display: flex; align-items: center; gap: 10px; } .saan-score { font: 800 1.6rem/1 var(--play, inherit); } .saan-round { margin-left: auto; font-weight: 800; font-size: .86rem; }
.saan-pic { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, var(--tile)); display: grid; place-items: center; }
.saan-img { position: absolute; inset: -20px; background: center / cover no-repeat; transform: scale(1.06); }
.saan-clue { position: relative; padding: 16px; text-align: center; font-weight: 700; font-size: 1.05rem; }
.saan-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0,0,0,.2); } .saan-bar > i { display: block; height: 100%; background: var(--orange); }
.saan-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .saan-opts .btn { min-height: 52px; font-size: .9rem; }
.saan-opts .btn.is-right { background: #2e9e5b !important; color: #fff !important; } .saan-opts .btn.is-wrong { background: #c8282e !important; color: #fff !important; }
.saan-credit { font-size: .66rem; }
/* Linya Tycoon */
.tyc { padding: 14px; min-height: 380px; display: flex; flex-direction: column; gap: 12px; }
.tyc-cash { font: 800 2rem/1 var(--play, inherit); } .tyc-rate { margin-left: auto; font-size: .8rem; font-weight: 700; text-align: right; }
.tyc-line { position: relative; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--tile)); overflow: hidden; }
.tyc-line > i { position: absolute; left: 14px; right: 14px; top: 26px; height: 4px; background: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.tyc-line s { width: 12px; height: 12px; border-radius: 50%; background: var(--tile); box-shadow: 0 0 0 2.5px var(--ink); }
.tyc-line > b { position: absolute; top: 12px; left: 0; width: var(--w); height: 12px; border-radius: 4px; background: var(--orange); animation: tycRun 6s linear infinite; animation-delay: var(--d); }
@keyframes tycRun { 0% { left: 8px; } 50% { left: calc(100% - 50px); } 100% { left: 8px; } }
.tyc-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tyc-b { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 16px; border: 0; text-align: left; font: inherit; color: var(--ink); background: var(--tile); box-shadow: 0 3px 0 var(--edge, rgba(0,0,0,.12)), inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 10%, transparent); cursor: pointer; }
.tyc-b:disabled { opacity: .5; } .tyc-b.is-hint:not(:disabled) { box-shadow: 0 3px 0 var(--edge, rgba(0,0,0,.12)), inset 0 0 0 2.5px var(--orange); }
.tyc-b small { font-size: .72rem; } .tyc-lv { font-size: .7rem; font-weight: 800; } .tyc-cost { position: absolute; top: 10px; right: 10px; font-style: normal; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #ffc20e 35%, var(--tile)); }

/* Sakay Tayo */
.sky { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.sky-setup { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 10px; text-align: center; } .sky-n { display: flex; gap: 10px; } .sky-n .btn { min-width: 64px; font-size: 1.2rem; }
.sky-turn { font-weight: 700; } .sky-turn b { padding: 2px 10px; border-radius: 999px; background: var(--pc); color: #fff; }
.sky-board { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.sky-board li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: .84rem; }
.sky-board li i { width: 12px; height: 12px; border-radius: 50%; background: var(--tile); box-shadow: 0 0 0 3px var(--lc); flex: none; }
.sky-board li.ev-rush { background: color-mix(in srgb, #c8282e 12%, transparent); } .sky-board li.ev-kind { background: color-mix(in srgb, #2e9e5b 14%, transparent); } .sky-board li.ev-transfer { background: color-mix(in srgb, #1f6feb 12%, transparent); }
.sky-board em { margin-left: auto; display: flex; gap: 3px; font-style: normal; } .sky-board em b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pc); color: #fff; font-size: .7rem; animation: l48New .2s; }
.sky-ctl { display: flex; align-items: center; gap: 12px; } .sky-die { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font: 800 1.6rem/1 var(--play, inherit); background: var(--tile); box-shadow: inset 0 0 0 2.5px var(--ink); } .sky-roll { flex: 1; }
.sky-msg { margin: 0; min-height: 2.6em; }
/* Quiz Rush */
.qr { padding: 12px; min-height: 380px; display: flex; flex-direction: column; gap: 12px; }
.qr-q { padding: 14px; border-radius: 16px; background: var(--tile); min-height: 80px; } .qr-q b { font-size: 1.02rem; line-height: 1.35; }
.qr-a { display: grid; gap: 8px; } .qr-a .btn { text-align: left; justify-content: flex-start; min-height: 48px; }
.qr-a .btn.is-right { background: #2e9e5b !important; color: #fff !important; } .qr-a .btn.is-wrong { background: #c8282e !important; color: #fff !important; }
.qr-why { margin: 0; min-height: 2.4em; }
.sheet.is-locked .sheet__handle { opacity: .25; } .game-host { overscroll-behavior: contain; touch-action: manipulation; } .game-host .arc-cv { touch-action: none; }

/* the Collection banner at the top of Play */
.coll-ban { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 0 0 12px; padding: 14px 14px 14px 10px; border-radius: 22px; border: 0; font: inherit; color: var(--on-orange, #fff); cursor: pointer;
  background: linear-gradient(120deg, var(--orange), color-mix(in srgb, var(--orange) 55%, #7b3fd1)); box-shadow: 0 5px 0 color-mix(in srgb, var(--orange), #000 35%), 0 10px 24px rgba(0,0,0,.14); }
.coll-ban:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--orange), #000 35%); }
.coll-ban b { display: block; font: 800 1.2rem/1.15 var(--play, inherit); color: var(--on-orange, #fff); }
.coll-ban small { display: block; font-size: .8rem; color: var(--on-orange, #fff) !important; opacity: .92; margin-top: 2px; }
.coll-ban__fan { position: relative; flex: none; width: 74px; height: 72px; }
.coll-ban__fan i { position: absolute; left: 14px; top: 4px; width: 44px; height: 62px; border-radius: 8px; background: var(--lc) center / cover; box-shadow: 0 0 0 2.5px #fff, 0 4px 8px rgba(0,0,0,.25); transform: rotate(calc((var(--i) - 1) * 14deg)) translateX(calc((var(--i) - 1) * 10px)); }
.coll-ban__fan i:nth-child(2) { z-index: 1; }
.coll-ban__new { flex: none; font-style: normal; font-weight: 800; font-size: .78rem; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--orange); animation: collPulse 1.6s ease-in-out infinite; }
.coll-ban__go { font-size: 2rem; line-height: 1; opacity: .9; }
@keyframes collPulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .coll-ban__new { animation: none; } }
.arc-over__m { width: 64px; height: 78px; margin: -46px auto 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation: arcHop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes arcHop { from { transform: translateY(16px) scale(.8); } }
.arc-over__card { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .arc-over__m { animation: none; } }
.arc-ask { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 18px; } .arc-ask svg { width: 70px; height: 86px; } .arc-ask b { font: 800 1.15rem/1.2 var(--play, inherit); } .arc-ask p { margin: 0; font-size: .9rem; } .arc-ask .btn { min-width: 160px; }
.sky-setup hr { width: 100%; border: 0; border-top: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); margin: 6px 0; }
.sky-setup .me-in { width: 100%; max-width: 280px; } .sky-join { display: flex; gap: 8px; width: 100%; max-width: 280px; } .sky-join .me-in { flex: 1; text-transform: uppercase; letter-spacing: .1em; }
.sky-room { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; text-align: center; }
.sky-code-big { font: 800 2.4rem/1 var(--play, inherit); letter-spacing: .18em; padding: 8px 16px; border-radius: 14px; background: var(--tile); box-shadow: inset 0 0 0 2px var(--ink); user-select: all; }
.sky-players { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 260px; } .sky-players li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sky-players b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pc); color: #fff; font-size: .74rem; }

/* Pasada check-in, first-week journey and the weekly recap (Home) */
.pz { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--orange) 9%, var(--tile, #fff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 25%, transparent); }
.pz b { display: block; font-size: .92rem; } .pz small { display: block; font-size: .78rem; margin-top: 2px; }
.pz-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pz-l { border: 0; font: inherit; font-size: .8rem; font-weight: 800; padding: 7px 12px; border-radius: 999px; background: var(--lc); color: var(--lf, #fff); box-shadow: 0 3px 0 color-mix(in srgb, var(--lc), #000 35%); cursor: pointer; }
.pz-l:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--lc), #000 35%); }
.pz-ring { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(var(--orange) calc(var(--p) * 360deg), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.pz-ring b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: .74rem; font-weight: 800; }
.pz-goal { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .pz-goal span { display: flex; gap: 6px; flex-wrap: wrap; }
.jr { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.jr b { display: block; font-size: .86rem; } .jr small { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jr-dots { display: grid; grid-template-columns: repeat(7, 7px); gap: 3px; flex: none; } .jr-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 15%, transparent); } .jr-dots i.is-open { box-shadow: inset 0 0 0 2px var(--orange); background: none; } .jr-dots i.is-done { background: var(--orange); }
.jr-x { border: 0; background: none; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; padding: 4px; cursor: pointer; }
.recap { padding: 14px; } .recap__top { display: flex; align-items: center; gap: 10px; } .recap__top svg { width: 44px; height: 54px; flex: none; } .recap__top b { display: block; font: 800 1.05rem/1.2 var(--play, inherit); } .recap__top small { display: block; font-size: .74rem; font-weight: 700; }
.recap__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 8px; } .recap__grid span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); } .recap__grid b { font: 800 1.3rem/1 var(--play, inherit); } .recap__grid small { font-size: .68rem; text-align: center; }

/* ---------- progress wave (v48): near-finish nudges, punch cards, card variants, ride quests ---------- */
.nf { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin: 8px 0 0; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--lc) 45%, var(--edge, #0002)); background: color-mix(in srgb, var(--lc) 10%, var(--tile, #fff)); color: var(--ink); font: inherit; cursor: pointer; }
.nf b { display: block; font-size: 14px; } .nf small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.nf-bar, .punch__bar { position: relative; flex: none; width: 54px; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.nf-bar i, .punch__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--lc); }
.nf-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--lc) 12%, var(--tile, #fff)); border-left: 4px solid var(--lc); }
.punch { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; } .punch__bar { width: 120px; } .punch small { color: var(--ink-soft); font-size: 12px; }
.punch.is-near small { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .punch.is-near .punch__bar i, .nf-bar i { animation: nf-pulse 1.8s ease-in-out infinite; } }
@keyframes nf-pulse { 50% { filter: brightness(1.25); } }
/* time-of-day card variants */
.scard__img { position: relative; }
.scard.tod-m .scard__img::after, .scard.tod-s .scard__img::after, .scard.tod-n .scard__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.scard.tod-m .scard__img::after { background: linear-gradient(180deg, #ffe7a855, transparent 60%); }
.scard.tod-s .scard__img::after { background: linear-gradient(180deg, #ff8a5c66, #b0408044); mix-blend-mode: normal; }
.scard.tod-n .scard__img::after { background: radial-gradient(1.2px 1.2px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 14%, #fff, transparent), radial-gradient(1.4px 1.4px at 85% 34%, #fff, transparent), linear-gradient(180deg, #14205acc, #14205a55); }
.scard__tod { position: absolute; z-index: 1; right: 4px; bottom: 4px; display: flex; gap: 3px; }
.scard__tod i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #0004; }
.scard__tod .t-m { background: #ffd447; } .scard__tod .t-s { background: #ff7a45; } .scard__tod .t-n { background: #2a3a8f; }
/* ride quests, Beat the ETA and window sights */
.rq { margin: 12px 0; padding: 12px; border-radius: 16px; background: var(--tile, #fff); border: 1.5px solid var(--edge, #0002); }
.rq .pc-h { margin: 0 0 8px; font-size: 15px; }
.rq-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.rq-list li { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rq-list li.is-done { opacity: .65; } .rq-list li.is-done b { text-decoration: line-through; }
.rq-list small, .rq-eta small { color: var(--ink-soft); font-size: 12px; }
.rq-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-eta { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; }
.ws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.ws-c { min-height: 54px; padding: 6px; border-radius: 12px; border: 1.5px dashed var(--edge, #0003); background: transparent; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; }
.ws-c.is-on { border-style: solid; border-color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent); font-weight: 700; }

/* ---------- together wave (v49): line pulse, community goal, Sabay streak, birthdays, Wrapped, personality ---------- */
.lpulse { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--lc) 9%, var(--tile, #fff)); border: 1.5px solid color-mix(in srgb, var(--lc) 35%, var(--edge, #0002)); }
.lpulse b { display: block; font-size: 14px; } .lpulse small { color: var(--ink-soft); font-size: 12px; }
.lpulse__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) { .lpulse__dot { animation: lp-beat 1.6s ease-out infinite; } }
@keyframes lp-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.lpulse .chip.is-on, .fun .lpulse .chip.is-on { background: var(--lc); color: #fff; border-color: transparent; opacity: 1; }
.kgoal .row, .sabay .row { display: flex; align-items: center; gap: 10px; }
.kgoal small, .sabay small, .bday small { display: block; color: var(--ink-soft); font-size: 12px; }
.kgoal b, .sabay b, .bday b { display: block; }
.kgoal__stk { width: 46px; height: 46px; flex: none; } .kgoal__stk svg { width: 100%; height: 100%; }
.kgoal__bar { display: block; position: relative; height: 12px; margin: 10px 0 6px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.kgoal__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(90deg, #1E8C45, #8bc34a); }
.sabay__n { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--on-orange, #fff); font-size: 22px; font-weight: 800; }
.sabay__wk { display: flex; gap: 6px; margin-top: 4px; } .sabay__wk i { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 9px; border: 1.5px dashed var(--edge, #0003); color: var(--ink-soft); }
.sabay__wk i.on { border-style: solid; border-color: #1E8C45; color: #1E8C45; font-weight: 700; }
.bday { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--lc); background: color-mix(in srgb, var(--lc) 10%, var(--tile, #fff)); }
.bday .stk { width: 44px; height: 44px; flex: none; } .bday .stk svg { width: 100%; height: 100%; }
.scard.is-bday { outline: 3px dashed #ff5b8a; outline-offset: 2px; }
.wrap-cta { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 8px 0 0; padding: 12px; border-radius: 16px; border: 0; color: #fff; font: inherit; cursor: pointer; background: linear-gradient(135deg, #e2541c, #7A3E98); }
.wrap-cta small, .wrap-cta span span { display: block; opacity: .9; font-size: 12px; } .wrap-cta b { display: block; font-size: 16px; }
.wrap-cta__m { width: 52px; height: 52px; flex: none; } .wrap-cta__m svg { width: 100%; height: 100%; }
.wr { position: relative; height: min(62vh, 520px); border-radius: 22px; overflow: hidden; cursor: pointer; user-select: none; }
.wr-s { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 28px; color: #fff; background: var(--wc); opacity: 0; transition: opacity .3s; }
.wr-s.is-on { opacity: 1; } .wr-s > small { font-size: 16px; font-weight: 700; opacity: .9; color: #fff; } .wr-s span { font-size: 17px; color: #fff; }
.wr-big { font-size: 84px; line-height: 1; font-weight: 900; } .wr-big small { font-size: 32px; } .wr-mid { font-size: 38px; line-height: 1.1; font-weight: 900; }
.wr .pbadge { width: 72px; height: 72px; }
.wr-dots { position: absolute; top: 10px; left: 14px; right: 14px; display: flex; gap: 4px; } .wr-dots i { flex: 1; height: 4px; border-radius: 2px; background: #fff6; } .wr-dots i.on { background: #fff; }
.wr-m { position: absolute; right: 12px; bottom: 8px; width: 84px; height: 96px; } .wr-m svg { width: 100%; height: 100%; }
.persona { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border-radius: 16px; background: var(--tile, #fff); border: 1.5px solid var(--edge, #0002); }
.persona small, .persona span span { display: block; font-size: 12px; color: var(--ink-soft); } .persona b { display: block; font-size: 16px; }
.pbadge { width: 46px; height: 46px; flex: none; }

/* ---------- Silip (v51): short-lived photos ---------- */
.silip { margin: 12px 0; padding: 12px; border-radius: 16px; background: var(--tile, #fff); border: 1.5px solid var(--edge, #0002); }
.silip__h { display: flex; align-items: center; gap: 10px; } .silip__h b { display: block; } .silip__h small { display: block; color: var(--ink-soft); font-size: 12px; }
.silip__cam svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; }
.silip__row { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: none; }
.silip__t { flex: none; display: flex; flex-direction: column; justify-content: flex-end; width: 84px; height: 104px; padding: 8px; border: 0; border-radius: 14px; text-align: left; color: #fff; font: inherit; cursor: pointer; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tc) 60%, #fff), var(--tc)); box-shadow: 0 0 0 2.5px var(--orange); }
.silip__t.is-seen { box-shadow: 0 0 0 2px var(--edge, #0003); opacity: .85; }
.silip__t i { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #fff; }
.silip__t b { font-size: 12.5px; line-height: 1.15; text-shadow: 0 1px 2px #0006; } .silip__t small { font-size: 11px; opacity: .92; }
.silip-view { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #000e; color: #fff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.silip-view canvas { max-width: calc(100vw - 24px); border-radius: 14px; pointer-events: none; }
.silip-view__top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.silip-view__top b { flex: 1; } .silip-view__x { background: #fff2; color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.silip-view__ring { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#fff var(--p, 100%), #fff3 0); }
.silip-view.is-on .silip-view__ring { animation: silip-ring var(--s) linear forwards; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes silip-ring { to { --p: 0%; } }
.silip-view__rep { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); background: none; border: 1.5px solid #fff8; color: #fff; padding: 8px 16px; border-radius: 999px; font: inherit; cursor: pointer; }
.cam { position: fixed; inset: 0; z-index: 9000; background: #000; color: #fff; display: flex; flex-direction: column; }
.cam video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.cam__note { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px; margin: 0; padding: 8px 12px; border-radius: 12px; background: #0009; font-size: 13px; }
.cam__bar { display: flex; align-items: center; justify-content: space-around; padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); }
.cam__x, .cam__flip { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff2; color: #fff; font-size: 24px; cursor: pointer; }
.cam__shot { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #fff; background: #fff3; cursor: pointer; }
.cam__shot:active { background: #fff; }
.cam__review { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: var(--paper); color: var(--ink); }
.cam__status { margin: auto; text-align: center; font-weight: 700; }
.cam__canvas { width: 100%; border-radius: 14px; } .cam__faces { color: var(--ink-soft); }
.cam__review .btns { display: flex; gap: 8px; }
.icon--silip { position: relative; color: var(--ink); }
.icon__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5372b; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.lbl--silip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 3px 3px; border-radius: 999px; background: #e5372b; color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px #0004; }
.lbl--silip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.lbl--silip svg { width: 13px; height: 13px; fill: none; stroke: #e5372b; stroke-width: 2.4; }
.lbl--silip b { font-size: 11px; }
.silip-snap { display: grid; gap: 6px; margin-bottom: 12px; }
.silip-snap__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 1.05rem; }
.silip-snap__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.silip-st { margin: 6px 0 12px; } .silip-st .silip__row { margin-top: 6px; }

/* ---------- v54: sideways rows show there's more (the next item peeks at the edge, with a soft fade) ---------- */
.shelf { grid-auto-columns: minmax(118px, calc((100% - 14px) / 2.35)); }
.shelf, .silip__row, .atp, .trophies, .topts, .chat-stks, .chat-phrases { margin-right: -16px; padding-right: 30px; scroll-padding-left: 2px; }
.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.is-more.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 34px), transparent); }
.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px); mask-image: linear-gradient(90deg, transparent, #000 22px); }