/* Candy Swap Train - styles. Sizes use rem/em from #app so everything scales with the screen. */
@font-face { font-family: "CT Display"; src: url(../assets/fonts/lilita-one-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CT Text"; src: url(../assets/fonts/fredoka-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "CT Text"; src: url(../assets/fonts/fredoka-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #2b2d5e; --cream: #fff8e6; --sky1: #7fcfff; --sky2: #e4f7ff; --grass: #6ad36e; --grass2: #43b85a;
  --red: #ff5d73; --orange: #ffa62b; --yellow: #ffd93d; --green: #3cc46a; --blue: #3a7bff; --purple: #9b5de5;
  --wc: #ff9f1c;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky1); overscroll-behavior: none; }
body { font-family: "CT Text", "Trebuchet MS", system-ui, sans-serif; font-weight: 600; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
img { -webkit-user-drag: none; }
#app { position: fixed; inset: 0; overflow: hidden; font-size: clamp(12px, calc(1.7vmin + 8px), 30px); }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; }

/* ---------- shared buttons ---------- */
.c-red { --b1: #ff7d8e; --b2: #e8334f; --bd: #a81530; }
.c-orange { --b1: #ffc05a; --b2: #f08a0c; --bd: #b25f00; }
.c-yellow { --b1: #ffe66b; --b2: #f5b800; --bd: #b98600; }
.c-green { --b1: #6fe08b; --b2: #26aa55; --bd: #187a3b; }
.c-blue { --b1: #6fb1ff; --b2: #2f66e0; --bd: #1c3fa6; }
.c-purple { --b1: #c295ff; --b2: #8248d8; --bd: #5a2aa0; }
.rb, .nb, .tbtn, .dk, .playb {
  background: linear-gradient(180deg, var(--b1), var(--b2)); border: .14em solid var(--ink);
  box-shadow: 0 .26em 0 var(--bd), 0 .34em .5em rgba(43, 45, 94, .28); transition: transform .08s, box-shadow .08s;
}
.rb:active, .nb:active, .tbtn:active, .dk:active, .playb:active { transform: translateY(.2em); box-shadow: 0 .06em 0 var(--bd); }
.rb { width: 3.1rem; height: 3.1rem; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 1rem; flex: none; }
.rb img { width: 62%; height: 62%; }
.tbtn { font-family: "CT Display"; font-weight: 400; font-size: 1.15rem; color: #fff; text-shadow: 0 .09em 0 var(--bd); padding: .55em 1.1em; border-radius: 1.4em; min-width: 5.4rem; }
.tbtn.small { font-size: .9rem; padding: .4em .9em; min-width: 0; }
.star { width: 1.1em; height: 1.1em; }
.star.on { fill: #ffd93d; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; }
.star.off { fill: rgba(43, 45, 94, .16); stroke: rgba(43, 45, 94, .35); stroke-width: 1.2; stroke-linejoin: round; }

/* ---------- loading ---------- */
.loading { background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.loading.active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; }
.load-train { position: relative; width: min(78vw, 22rem); height: 6.6rem; animation: bob .9s ease-in-out infinite; }
.load-train .lt-e { position: absolute; left: 0; bottom: 0; width: 50%; }
.lt-w { position: absolute; bottom: 0; width: 27%; }
.lt-w img { display: block; width: 100%; }
.lt-w img:first-child { position: absolute; left: 32%; width: 36%; bottom: 70%; z-index: 0; }
.lt-w img:last-child { position: relative; z-index: 1; }
.lt-w.w0 { left: 49%; } .lt-w.w1 { left: 74%; }
.load-title { font-family: "CT Display"; font-size: 2.2rem; color: #fff; text-shadow: 0 .06em 0 var(--ink), .05em 0 0 var(--ink), -.05em 0 0 var(--ink), 0 -.05em 0 var(--ink); letter-spacing: .02em; }
.load-bar { width: min(60vw, 16rem); height: 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .7); border: .12rem solid var(--ink); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, #ff5d73 0 .7rem, #ffd93d .7rem 1.4rem); transition: width .2s; }
@keyframes bob { 50% { transform: translateY(-.35rem); } }

/* ---------- MENU ---------- */
.menu { background: linear-gradient(180deg, #6fc8ff 0%, #b9e8ff 52%, #e9f9ff 70%); }
.sky { position: absolute; inset: 0; overflow: hidden; }
.sun { position: absolute; right: 8%; top: 5%; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: radial-gradient(circle, #fff7a8 0 38%, #ffe14d 40% 62%, rgba(255, 225, 77, 0) 64%); box-shadow: 0 0 3rem 1.2rem rgba(255, 238, 120, .55); }
.cloud { position: absolute; height: 2.2rem; width: 6.4rem; border-radius: 2rem; background: #fff; opacity: .95; animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 2.8rem; height: 2.8rem; left: 1rem; top: -1.3rem; }
.cloud::after { width: 2.1rem; height: 2.1rem; right: 1.1rem; top: -.9rem; }
.cloud.c1 { top: 9%; left: -10rem; }
.cloud.c2 { top: 26%; left: -10rem; animation-duration: 85s; animation-delay: -30s; transform: scale(.75); }
.cloud.c3 { top: 17%; left: -10rem; animation-duration: 110s; animation-delay: -70s; transform: scale(1.2); }
@keyframes drift { to { margin-left: calc(100vw + 20rem); } }
.bunting { position: absolute; left: 0; right: 0; top: 0; height: 3.4rem; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'><path d='M0 6 Q150 26 300 6' fill='none' stroke='%232b2d5e' stroke-width='3'/><g stroke='%232b2d5e' stroke-width='3' stroke-linejoin='round'><path d='M12 11 L48 17 L28 48Z' fill='%23ff5d73'/><path d='M72 17 L108 20 L90 50Z' fill='%23ffd93d'/><path d='M132 20 L168 20 L150 52Z' fill='%2346c45a'/><path d='M192 20 L228 17 L210 50Z' fill='%233a7bff'/><path d='M252 17 L288 11 L270 48Z' fill='%23ff7ac6'/></g></svg>") 0 0 / 15rem 3rem repeat-x; opacity: .95; }
.lolli { position: absolute; width: 3.4rem; height: 9rem; bottom: 24%; --a: #ff5d73; --b: #fff; }
.lolli::before { content: ""; position: absolute; left: 0; top: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: .16rem solid var(--ink); background: repeating-conic-gradient(from 0deg, var(--a) 0 30deg, var(--b) 30deg 60deg); box-shadow: inset -.3rem -.3rem 0 rgba(43, 45, 94, .12); }
.lolli::after { content: ""; position: absolute; left: 1.4rem; top: 3.3rem; width: .6rem; height: 6rem; background: #fff; border: .12rem solid var(--ink); border-radius: .3rem; }
.lolli.l1 { left: 6%; --a: #ff5d73; transform: rotate(-6deg); }
.lolli.l2 { left: 17%; bottom: 22%; --a: #9b5de5; transform: scale(.75) rotate(5deg); }
.lolli.l3 { right: 8%; --a: #ffa62b; transform: rotate(7deg); }
.lolli.l4 { right: 20%; bottom: 21%; --a: #2ccfd8; transform: scale(.7) rotate(-5deg); }
.hill { position: absolute; left: -10%; right: -10%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill.h1 { bottom: 0; height: 34%; background: linear-gradient(180deg, #7ee17f, var(--grass2)); transform: translateX(14%); }
.hill.h2 { bottom: 0; height: 26%; background: linear-gradient(180deg, #62d26a, #3aa850); transform: translateX(-16%); }

.m-center { position: absolute; left: 0; right: 0; top: 0; bottom: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 0 1rem; z-index: 2; }
.logo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-family: "CT Display"; font-weight: 400; }
.logo .l1 { display: flex; align-items: flex-end; font-size: clamp(2.6rem, 11vmin + .8rem, 6.4rem); line-height: 1; }
.logo .l1 b { width: .32em; }
.logo .l1 i { font-style: normal; display: inline-block; color: var(--lc); text-shadow: 0 .07em 0 var(--ld), .045em 0 0 var(--ink), -.045em 0 0 var(--ink), 0 -.045em 0 var(--ink), .035em .035em 0 var(--ink), -.035em .035em 0 var(--ink), .035em -.035em 0 var(--ink), -.035em -.035em 0 var(--ink), 0 .13em 0 var(--ink); transform: rotate(var(--r)) translateY(var(--y)); animation: wob 2.4s ease-in-out infinite; animation-delay: var(--d); }
.logo .l1 i:nth-child(1) { --lc: #ff5d73; --ld: #b81d3a; --r: -6deg; --y: .02em; --d: 0s; }
.logo .l1 i:nth-child(2) { --lc: #ffa62b; --ld: #b86a00; --r: 3deg; --y: -.03em; --d: .15s; }
.logo .l1 i:nth-child(3) { --lc: #ffd93d; --ld: #b98d00; --r: -3deg; --y: .02em; --d: .3s; }
.logo .l1 i:nth-child(4) { --lc: #46c45a; --ld: #1b832f; --r: 4deg; --y: -.02em; --d: .45s; }
.logo .l1 i:nth-child(5) { --lc: #3a7bff; --ld: #1a43b8; --r: -4deg; --y: .02em; --d: .6s; }
.logo .l1 i:nth-child(7) { --lc: #9b5de5; --ld: #5f2ca8; --r: 5deg; --y: -.02em; --d: .75s; }
.logo .l1 i:nth-child(8) { --lc: #ff7ac6; --ld: #c4378b; --r: -3deg; --y: .03em; --d: .9s; }
.logo .l1 i:nth-child(9) { --lc: #ff5d73; --ld: #b81d3a; --r: 4deg; --y: -.02em; --d: 1.05s; }
.logo .l1 i:nth-child(10) { --lc: #ffa62b; --ld: #b86a00; --r: -5deg; --y: .02em; --d: 1.2s; }
@keyframes wob { 50% { transform: rotate(var(--r)) translateY(calc(var(--y) - .06em)); } }
.logo .l2 { font-size: clamp(1.4rem, 5.6vmin + .5rem, 2.8rem); }
.logo .l2 em { font-style: normal; display: block; padding: .08em .9em .02em; color: #fff; letter-spacing: .22em; text-indent: .22em; background: linear-gradient(180deg, #ff7d8e, #e8334f); border: .1em solid var(--ink); border-radius: .5em; box-shadow: 0 .12em 0 #a81530, 0 .2em .4em rgba(43, 45, 94, .3); text-shadow: 0 .06em 0 #a81530; position: relative; }
.logo .l2 em::before, .logo .l2 em::after { content: ""; position: absolute; top: 50%; width: .5em; height: .5em; margin-top: -.25em; background: radial-gradient(circle, #fff 0 30%, #ffd93d 32%); border-radius: 50%; border: .07em solid var(--ink); }
.logo .l2 em::before { left: .25em; } .logo .l2 em::after { right: .25em; }

.playb { display: flex; align-items: center; gap: .9rem; padding: .55rem 1.7rem .55rem .6rem; border-radius: 4rem; --b1: #7be88f; --b2: #25a954; --bd: #167a3a; animation: pulse 1.8s ease-in-out infinite; min-width: 14rem; }
.playb .pl-ic { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff; border: .12rem solid var(--ink); display: grid; place-items: center; flex: none; }
.playb .pl-ic img { width: 56%; margin-left: 8%; filter: none; }
.playb .pl-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.playb .pl-t b { font-family: "CT Display"; font-weight: 400; font-size: 2.1rem; color: #fff; text-shadow: 0 .07em 0 #167a3a; }
.playb .pl-t small { font-size: .95rem; color: #eaffef; font-weight: 600; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.playb:active { animation: none; }
.m-row { display: flex; gap: .8rem; }
.nb { width: 5.2rem; height: 5rem; border-radius: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: 0; }
.nb img { width: 2.1rem; height: 2.1rem; }
.nb span { font-family: "CT Text", sans-serif; font-weight: 600; font-size: .95rem; color: #fff; text-shadow: 0 1px 0 var(--bd), 0 2px 0 var(--bd); }
.m-prog { white-space: nowrap; display: flex; align-items: center; gap: .7rem; background: rgba(255, 255, 255, .78); border: .12rem solid var(--ink); border-radius: 2rem; padding: .35rem .9rem; font-size: .9rem; }
.m-prog .bar { width: 5.5rem; height: .6rem; border-radius: .6rem; background: rgba(43, 45, 94, .18); overflow: hidden; }
.m-prog .bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: .6rem; }
.m-prog .star { width: 1em; height: 1em; vertical-align: -.15em; }

.m-track { position: absolute; left: 0; right: 0; bottom: 6%; height: 7.5rem; z-index: 1; overflow: hidden; pointer-events: none; }
.m-rail { position: absolute; left: 0; right: 0; bottom: 0; height: .9rem; background: repeating-linear-gradient(90deg, #8a6a4a 0 .8rem, transparent .8rem 1.8rem) 0 .35rem / 100% .55rem no-repeat, linear-gradient(#7a6aa8, #7a6aa8) 0 0 / 100% .22rem no-repeat; }
.m-train { position: absolute; bottom: .28rem; display: flex; align-items: flex-end; gap: .2rem; white-space: nowrap; animation: chug 15s linear infinite; left: 100%; }
.mt-e { height: 6rem; }
.mt-w { position: relative; width: 4.6rem; height: 4.3rem; }
.mt-w .wb { position: absolute; inset: 0; width: 100%; z-index: 1; }
.mt-w .cg { position: absolute; width: 1.7rem; bottom: 2.95rem; z-index: 0; }
.mt-w .cg:nth-child(1) { left: .45rem; } .mt-w .cg:nth-child(2) { left: 2.45rem; }
.mt-w .wb { animation: jig .5s ease-in-out infinite; }
@keyframes chug { to { left: -48rem; } }
@keyframes jig { 50% { transform: translateY(-.12rem); } }

/* ---------- LEVELS ---------- */
.levels { background: linear-gradient(180deg, #8dd5ff 0%, #d9f4ff 40%, #c9f2c0 100%); }
.levels.active { display: flex; flex-direction: column; align-items: center; padding: .8rem .8rem .6rem; gap: .5rem; }
.lv-head { width: 100%; max-width: 46rem; display: flex; align-items: center; gap: .6rem; }
.station { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem; background: linear-gradient(180deg, #fff8e6, #ffe9b8); border: .14rem solid var(--ink); border-radius: 1.1rem; box-shadow: 0 .24rem 0 #c79a3e; padding: .25rem .35rem; }
.station .st-t { flex: 1; min-width: 0; overflow: hidden; text-align: center; line-height: 1.1; }
.station h2 { margin: 0; font-family: "CT Display"; font-weight: 400; font-size: 1.15rem; color: var(--wc); text-shadow: 0 .05em 0 rgba(43, 45, 94, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station small { display: block; font-size: .8rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arr { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: .1rem solid var(--ink); background: #fff; padding: 0; display: grid; place-items: center; flex: none; }
.arr img { width: 55%; }
.arr:disabled { opacity: .3; }
.pill { display: flex; align-items: center; gap: .3rem; background: #fff; border: .14rem solid var(--ink); border-radius: 2rem; padding: .3rem .75rem; font-family: "CT Display"; font-size: 1.2rem; box-shadow: 0 .2rem 0 rgba(43, 45, 94, .35); }
.pill .star { width: 1.3rem; height: 1.3rem; }
.v-dots { display: flex; gap: .55rem; }
.v-dots button { width: .85rem; height: .85rem; border-radius: 50%; border: .12rem solid var(--ink); background: rgba(255, 255, 255, .7); padding: 0; }
.v-dots button.on { background: var(--wc); width: 1.5rem; border-radius: 1rem; }
.line-map { flex: 1; min-height: 0; width: 100%; max-width: 46rem; display: flex; align-items: center; justify-content: center; }
.lv-grid { --s: 4rem; display: grid; grid-template-columns: repeat(var(--cols), auto); grid-template-rows: repeat(var(--rows), auto); gap: 0; justify-content: center; align-content: space-evenly; width: 100%; height: 100%; justify-items: center; align-items: center; }
.tk { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: none; border: 0; padding: 0; width: calc(var(--s) * 1.12); }
.tk::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--s) * .06); height: .28rem; background: #7a6aa8; border-radius: .2rem; z-index: -1; }
.tst { display: flex; gap: 0; height: calc(var(--s) * .26); }
.tst .star { width: calc(var(--s) * .26); height: calc(var(--s) * .26); }
.tw { position: relative; width: var(--s); height: calc(var(--s) * .93); margin-top: calc(var(--s) * .2); }
.tw .wb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.tw .cg { position: absolute; width: 30%; bottom: 76%; z-index: 0; }
.tw .cg.a { left: 17%; } .tw .cg.b { left: 53%; }
.tw b { position: absolute; left: 0; right: 0; top: 33%; z-index: 2; text-align: center; font-family: "CT Display"; font-weight: 400; font-size: calc(var(--s) * .4); line-height: 1; color: #fff; text-shadow: 0 .06em 0 var(--ink), .05em 0 0 var(--ink), -.05em 0 0 var(--ink), 0 -.05em 0 var(--ink); }
.tw .lk { width: 45%; filter: none; }
.tk.locked .wb { filter: grayscale(1) brightness(1.1) opacity(.7); }
.tk.locked b { top: 30%; }
.tk.current .tw { animation: hop 1s ease-in-out infinite; }
.tk:active .tw { transform: scale(.94); }
@keyframes hop { 50% { transform: translateY(-.35rem); } }
.lv-sub { margin: 0; font-size: .9rem; opacity: .8; }

/* ---------- GAME ---------- */
.game { background: linear-gradient(180deg, #7fcfff 0%, #cdefff 38%, #bdeeb4 74%, #8fdc8a 100%); }
.game::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -6%; height: 22%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, rgba(126, 225, 127, .85), rgba(67, 184, 90, .9)); z-index: 0; pointer-events: none; }
.game > * { position: relative; z-index: 1; }
.game.active { display: flex; flex-direction: column; padding: .7rem .8rem .8rem; gap: .55rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.top { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "lv tk gr" "info info info"; align-items: center; gap: .5rem .6rem; flex: none; }
.top > .rb:first-child { grid-area: lv; }
.top-r { display: contents; }
.top-r > .rb { grid-area: gr; }
.info { grid-area: info; display: flex; gap: .6rem; justify-content: center; }
.play { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.ticket { grid-area: tk; min-width: 0; text-align: center; line-height: 1.05; background: linear-gradient(180deg, #fff8e6, #ffe9b8); border: .14rem solid var(--ink); border-radius: .9rem; padding: .35rem .5rem; box-shadow: 0 .24rem 0 #c79a3e; }
.ticket b { display: block; font-family: "CT Display"; font-weight: 400; font-size: 1.4rem; }
.ticket span { font-size: .8rem; color: var(--wc); font-weight: 600; filter: brightness(.8); }
.chip { display: flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .88); border: .13rem solid var(--ink); border-radius: 1rem; padding: .25rem .8rem; box-shadow: 0 .18rem 0 rgba(43, 45, 94, .3); white-space: nowrap; }
.chip small { font-size: .85rem; line-height: 1.1; font-weight: 600; }
.chip b { font-family: "CT Display"; font-weight: 400; font-size: 1.5rem; line-height: 1; min-width: 1.6ch; text-align: center; }
.gs { display: flex; }
.gs .star { width: 1.35rem; height: 1.35rem; }

.scene { flex: 1; min-height: 0; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.yard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; font-size: var(--s, 40px); width: 100%; }
.row { width: 100%; display: flex; align-items: flex-end; justify-content: center; padding: .42em .3em .22em; position: relative; }
.row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .26em; background: repeating-linear-gradient(90deg, #8a6a4a 0 .2em, transparent .2em .55em) 0 .07em / 100% .2em no-repeat, linear-gradient(#7a6aa8, #7a6aa8) 0 0 / 100% .09em no-repeat; }
.wg { position: relative; width: 1.34em; height: calc(var(--cap) * 1em + .74em); margin: 0 .12em; padding: 0; border: 0; background: none; font-size: 1em; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1); flex: none; }
.wg .bed { position: absolute; left: 0; right: 0; top: 0; bottom: .4em; border: .1em solid var(--wc); border-top: 0; border-radius: 0 0 .26em .26em; background: linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, .62)); box-shadow: 0 0 0 .05em var(--ink), inset 0 0 0 .05em var(--ink); }
.wg .bed { background-image: repeating-linear-gradient(to top, transparent 0 calc(1em - 2px), rgba(43, 45, 94, .1) calc(1em - 2px) 1em), linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, .62)); background-position: 0 -.04em, 0 0; background-size: 100% calc(var(--cap) * 1em), 100% 100%; background-repeat: no-repeat; }
.wg .bed::before, .wg .bed::after { content: ""; position: absolute; top: -.06em; width: .26em; height: .13em; background: var(--wc); border: .05em solid var(--ink); border-radius: .1em; }
.wg .bed::before { left: -.18em; } .wg .bed::after { right: -.18em; }
.wg .ch { position: absolute; left: -.07em; right: -.07em; bottom: .13em; height: .3em; background: var(--wc); border: .06em solid var(--ink); border-radius: .12em; }
.wg .wh { position: absolute; bottom: 0; width: .36em; height: .36em; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 22%, #ffd93d 24%); border: .06em solid var(--ink); }
.wg .wh.a { left: .12em; } .wg .wh.b { right: .12em; }
.cd { position: absolute; left: 50%; width: .74em; height: .74em; margin-left: -.37em; bottom: calc(.2em + var(--i) * 1em); pointer-events: none; transition: transform .15s; }
.wg.sel { transform: translateY(-.34em); }
.wg.sel .bed { box-shadow: 0 0 0 .05em var(--ink), inset 0 0 0 .05em var(--ink), 0 0 .5em .18em #fff, 0 0 1em .3em rgba(255, 217, 61, .85); }
.wg.sel .cd:last-child { transform: translateY(-.08em) scale(1.06); }
.wg.ok .bed { animation: okpulse 1s ease-in-out infinite; }
@keyframes okpulse { 50% { box-shadow: 0 0 0 .05em var(--ink), inset 0 0 0 .05em var(--ink), 0 0 .4em .12em rgba(60, 196, 106, .9); } }
.wg.hfrom { animation: hnt .7s ease-in-out infinite; }
.wg.hto .bed { box-shadow: 0 0 0 .05em var(--ink), inset 0 0 0 .05em var(--ink), 0 0 .5em .2em #fff, 0 0 1em .35em rgba(255, 93, 115, .9); }
@keyframes hnt { 50% { transform: translateY(-.3em); } }
.wg.full .bed { background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 248, 200, .85)); }
.wg.full .bed::before { background: #ffd93d; } .wg.full .bed::after { background: #ffd93d; }
.wg.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-.1em); } 75% { transform: translateX(.1em); } }
.cd.pop { animation: popin .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes popin { 0% { transform: scale(.4) rotate(-20deg); } 100% { transform: scale(1); } }
.flyer { position: fixed; z-index: 50; pointer-events: none; will-change: transform; filter: drop-shadow(0 .15rem .2rem rgba(43, 45, 94, .35)); }

.dock { flex: none; display: flex; justify-content: center; gap: .7rem; }
.dk { position: relative; width: 5.1rem; height: 4.9rem; border-radius: 1.2rem; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.dk img { width: 2.5rem; height: 2.5rem; }
.dk span { font-family: "CT Text", sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: #fff; text-shadow: 0 1px 0 var(--bd), 0 2px 0 var(--bd); }
.dk em { position: absolute; top: -.45rem; right: -.35rem; min-width: 1.4rem; height: 1.4rem; border-radius: 1rem; background: #fff; border: .12rem solid var(--ink); font-style: normal; font-family: "CT Display"; font-size: .9rem; display: grid; place-items: center; color: var(--ink); }
.dk:disabled { filter: grayscale(.8) brightness(1.05); opacity: .6; transform: none; box-shadow: 0 .16em 0 var(--bd); }

/* landscape / desktop: header across the top (levels | title | moves + settings), the yard in the middle, tools right beside it */
@media (min-aspect-ratio: 5/4) {
  .game.active { padding: .8rem 1.2rem 1rem; gap: .8rem; }
  .top { grid-template-columns: 1fr auto 1fr; grid-template-areas: "lv tk r"; }
  .top-r { display: flex; grid-area: r; justify-self: end; align-items: center; gap: .7rem; }
  .top-r > .rb { grid-area: auto; }
  .top > .rb:first-child { justify-self: start; }
  .info { grid-area: auto; }
  .ticket { min-width: 13rem; }
  .play { flex-direction: row; align-items: stretch; justify-content: center; gap: 1.2rem; }
  .scene { flex: 0 1 62rem; }
  .dock { flex-direction: column; justify-content: center; align-items: center; gap: .9rem; }
  .dk { width: 5.2rem; height: 5rem; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 460px) {
  .game.active { padding: .5rem .8rem .6rem; gap: .4rem; }
  .rb { width: 2.6rem; height: 2.6rem; }
  .play { gap: .6rem; }
  .dock { gap: .5rem; } .dk { width: 4.4rem; height: 3.7rem; border-radius: 1rem; } .dk img { width: 1.8rem; height: 1.8rem; } .dk span { font-size: .72rem; }
  .ticket { min-width: 9rem; padding: .2rem .5rem; } .ticket b { font-size: 1.15rem; } .ticket span { font-size: .7rem; }
  .goal small { display: none; }
  .chip { padding: .15rem .6rem; } .chip b { font-size: 1.2rem; } .gs .star { width: 1.1rem; height: 1.1rem; }
}
@media (min-aspect-ratio: 5/4) and (max-width: 860px) { .goal small { display: none; } }

/* levels / menu in landscape */
@media (min-aspect-ratio: 5/4) {
  .m-center { bottom: 24%; gap: .8rem; }
  .m-track { bottom: 3%; }
  .hill.h1 { height: 26%; } .hill.h2 { height: 18%; }
  .levels.active { padding-top: .6rem; }
}
@media (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .m-track { height: 11rem; } .m-train { transform-origin: left bottom; transform: scale(1.45); animation-name: chug2; }
}
@media (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .playb { min-width: 17rem; } .playb .pl-ic { width: 4.2rem; height: 4.2rem; } .playb .pl-t b { font-size: 2.5rem; }
  .nb { width: 6.2rem; height: 5.8rem; } .nb img { width: 2.5rem; height: 2.5rem; } .nb span { font-size: 1.1rem; }
  .m-center { gap: 1.1rem; }
}
@keyframes chug2 { to { left: -70rem; } }
@media (max-height: 460px) and (min-aspect-ratio: 5/4) {
  .m-center { bottom: 22%; gap: .4rem; top: .2rem; }
  .logo .l1 { font-size: 2.6rem; } .logo .l2 { font-size: 1.2rem; }
  .playb { min-width: 0; padding: .3rem 1.2rem .3rem .4rem; } .playb .pl-ic { width: 2.6rem; height: 2.6rem; } .playb .pl-t b { font-size: 1.5rem; }
  .nb { width: 4rem; height: 3.5rem; } .nb img { width: 1.5rem; height: 1.5rem; } .nb span { font-size: .75rem; }
  .m-prog { display: none; }
  .m-track { height: 5rem; } .mt-e { height: 4rem; } .mt-w { width: 3.1rem; height: 2.9rem; } .mt-w .cg { width: 1.2rem; bottom: 2.1rem; } .mt-w .cg:nth-child(1) { left: .3rem; } .mt-w .cg:nth-child(2) { left: 1.6rem; }
  .sun { width: 4rem; height: 4rem; }
}

@media (max-width: 380px) {
  .logo .l1 { font-size: 2.3rem; } .logo .l2 { font-size: 1.2rem; }
  .station small { display: none; } .arr { display: none; } .station { justify-content: center; } .pill { padding: .25rem .55rem; font-size: 1rem; } .lv-head { gap: .4rem; }
  .m-prog { font-size: .8rem; padding: .3rem .7rem; } .m-prog .bar { width: 3.5rem; }
  .modal-btns .tbtn { min-width: 0; padding: .5em .85em; font-size: 1rem; }
  .chip.goal small { font-size: .72rem; }
}
/* ---------- polish: screen fade, hover, keyboard focus, victory drive-off ---------- */
.screen.active { animation: scr .3s ease-out; }
@keyframes scr { from { opacity: 0; } }
button:focus-visible { outline: .2rem solid #fff; outline-offset: .12rem; box-shadow: 0 0 0 .38rem var(--ink); }
@media (hover: hover) {
  .rb:hover, .nb:hover, .tbtn:hover, .dk:hover:not(:disabled), .playb:hover { filter: brightness(1.07); }
  .rb:hover, .nb:hover, .dk:hover:not(:disabled), .tbtn:hover { transform: translateY(-.1em); }
  .rb:active, .nb:active, .dk:active, .tbtn:active { transform: translateY(.2em); }
  .wg:hover:not(.sel) { transform: translateY(-.1em); }
  .tk:not(.locked):hover .tw { transform: translateY(-.25rem); }
  .arr:hover:not(:disabled), .v-dots button:hover { filter: brightness(.95); transform: scale(1.08); }
}
.tw, .arr { transition: transform .15s; }
.yard.go .row { animation: drive 1s cubic-bezier(.5, 0, .9, .6) forwards; }
.yard.go .row:nth-child(2) { animation-delay: .12s; } .yard.go .row:nth-child(3) { animation-delay: .24s; }
.yard.go .wg { pointer-events: none; }
@keyframes drive { 0% { transform: translateX(0); } 18% { transform: translateX(-.5em); } 100% { transform: translateX(125vw); } }

/* ---------- modal / toast / confetti ---------- */
#modalRoot { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.modal-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43, 45, 94, .45); pointer-events: auto; animation: fade .2s; padding: 1rem; }
.modal { width: min(92vw, 24rem); max-height: 92%; overflow: auto; background: linear-gradient(180deg, #fffdf2, var(--cream)); border: .17rem solid var(--ink); border-radius: 1.6rem; box-shadow: 0 .4rem 0 #c79a3e, 0 1rem 2rem rgba(43, 45, 94, .4); padding: 1rem 1.1rem 1.1rem; text-align: center; animation: pop .3s cubic-bezier(.3, 1.5, .5, 1); }
.modal h2 { margin: 0 0 .5rem; font-family: "CT Display"; font-weight: 400; font-size: 1.9rem; color: var(--wc); text-shadow: 0 .05em 0 rgba(43, 45, 94, .35); }
.modal-body { text-align: left; }
.modal-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
.about { margin: .7rem 0 0; font-size: .75rem; opacity: .6; }
.hint-t { font-size: .8rem; opacity: .7; margin: .1rem 0 .4rem; }
.row-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-bottom: .1rem dashed rgba(43, 45, 94, .2); font-size: 1.05rem; }
.row-toggle > span { display: flex; align-items: center; gap: .6rem; }
.row-toggle img { width: 1.8rem; height: 1.8rem; background: var(--b2, #3a7bff); border-radius: .5rem; padding: .15rem; border: .09rem solid var(--ink); }
.switch { width: 3.3rem; height: 1.9rem; border-radius: 2rem; border: .13rem solid var(--ink); background: #c9c9d9; position: relative; padding: 0; transition: background .15s; flex: none; }
.switch::after { content: ""; position: absolute; top: .13rem; left: .13rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; border: .1rem solid var(--ink); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(1.4rem); }
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.how li { display: flex; align-items: center; gap: .7rem; font-size: 1rem; line-height: 1.25; }
.chip-i { flex: none; width: 2.8rem; height: 2.8rem; border-radius: .9rem; background: #e4f4ff; border: .1rem solid var(--ink); display: grid; place-items: center; }
.chip-i img { width: 72%; height: 72%; }
.win-train { display: flex; justify-content: center; align-items: flex-end; margin: 0 0 .7rem; height: 4.2rem; }
.win-train img { height: 100%; }
.win-train img:last-child { height: 74%; margin-left: .2rem; }
.win-stars { display: flex; justify-content: center; gap: .3rem; margin: .1rem 0 .3rem; }
.win-stars .star.big { width: 3.6rem; height: 3.6rem; }
.win-stars .star.big.on { animation: starin .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.win-stars .star.big.s2 { animation-delay: .25s; } .win-stars .star.big.s3 { animation-delay: .5s; }
.win-stars .star.big:nth-child(2) { margin-top: -.5rem; }
@keyframes starin { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1); } }
.win-sub { margin: 0; font-size: 1.05rem; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
#toast { position: absolute; left: 50%; top: 5.2rem; transform: translate(-50%, -1rem); background: var(--ink); color: #fff; padding: .6rem 1.1rem; border-radius: 1.5rem; font-size: 1rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: absolute; top: -20px; z-index: 35; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .cloud, .m-train, .playb, .logo .l1 i, .tk.current .tw, .mt-w .wb { animation: none !important; } .m-train { left: 40%; } }