@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=ZCOOL+KuaiLe&display=swap');

:root {
  --ink: #22475a;
  --muted: #6d8b91;
  --cream: #fffaf0;
  --sky: #73d5ee;
  --green: #54c985;
  --green-dark: #259961;
  --orange: #ffb84e;
  --coral: #ff786b;
  --pink: #ff7fa3;
  --blue: #58a9e8;
  --purple: #8e7de2;
  --shadow: 0 8px 0 rgba(41, 112, 94, .13), 0 14px 28px rgba(43, 102, 103, .13);
  font-family: Nunito, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #b1ebf5; }
body { min-height: 100dvh; margin: 0; overflow-x: hidden; background: #b1ebf5 url('./assets/train-valley-bg.webp') center top / cover fixed no-repeat; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 4px solid #fff; box-shadow: 0 0 0 7px #217fa7; }

.app { width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; padding-bottom: calc(82px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(112, 216, 240, .82) 0, rgba(222, 250, 239, .9) 220px, rgba(246, 255, 235, .96) 62%, rgba(255, 250, 235, .98) 100%); box-shadow: 0 0 45px rgba(32, 88, 101, .2); overflow: hidden; }

.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.profile { min-width: 0; display: flex; align-items: center; gap: 9px; }
.conductor { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 3px solid #fff; border-radius: 17px; background: linear-gradient(150deg, #ffdb72, #ff9975); font-size: 27px; box-shadow: 0 5px 0 rgba(38, 108, 118, .15); transform: rotate(-2deg); }
.profile small, .profile strong { display: block; white-space: nowrap; }
.profile small { color: #437b8b; font-size: 9px; font-weight: 900; }
.profile strong { color: #1d5367; font-family: "ZCOOL KuaiLe", Nunito, sans-serif; font-size: 20px; letter-spacing: .03em; }
.currencies { display: flex; align-items: center; gap: 5px; }
.currency { height: 35px; min-width: 56px; display: flex; align-items: center; gap: 3px; padding: 0 8px; border: 2px solid rgba(255,255,255,.85); border-radius: 13px; background: rgba(255,255,255,.78); box-shadow: 0 4px 0 rgba(34, 95, 105, .1); }
.currency span { font-size: 15px; }
.currency b { font-size: 12px; }
.currency i { max-width: 25px; overflow: hidden; color: #4a8891; font-size: 7px; font-style: normal; white-space: nowrap; }
.icon-button { width: 36px; height: 36px; position: relative; display: grid; place-items: center; border: 2px solid #fff; border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 4px 0 rgba(34, 95, 105, .12); font-weight: 900; cursor: pointer; }
.icon-button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(34, 95, 105, .12); }
.sound { overflow: hidden; background: #ffe28a; }
.sound > i { margin-left: -9px; font-size: 16px; font-style: normal; }
.sound-bars { height: 15px; position: absolute; right: 5px; bottom: 8px; display: flex; align-items: end; gap: 2px; }
.sound-bars b { width: 2px; height: 6px; border-radius: 2px; background: #8a6630; }
.sound.is-on .sound-bars b { animation: musicBounce .75s ease-in-out infinite alternate; }
.sound.is-on .sound-bars b:nth-child(2) { height: 12px; animation-delay: -.35s; }
.sound.is-on .sound-bars b:nth-child(3) { height: 9px; animation-delay: -.15s; }
.sound:not(.is-on)::after { content: ''; width: 24px; height: 3px; position: absolute; border-radius: 2px; background: #cf6b5b; transform: rotate(-45deg); }

.game-stage { padding: 0 10px 14px; }
.journey-card { height: 72px; display: grid; grid-template-columns: 54px 1fr 55px; align-items: center; gap: 9px; padding: 7px 9px; border: 3px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.85); box-shadow: var(--shadow); }
.level-avatar { width: 52px; height: 52px; display: grid; align-content: center; border: 0; border-radius: 18px; background: linear-gradient(145deg, #ffcf57, #ff8e6f); color: #fff; text-shadow: 0 2px 0 rgba(128,65,43,.2); box-shadow: inset 0 -5px 0 rgba(176,79,48,.16); cursor: pointer; }
.level-avatar small { font-size: 7px; line-height: 1; }
.level-avatar strong { margin-top: -2px; font-size: 26px; line-height: 1; }
.journey-copy { min-width: 0; }
.journey-copy > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 7px; margin-bottom: 8px; }
.journey-copy span { font-size: 12px; font-weight: 900; }
.journey-copy b { color: #4f8188; font-size: 9px; white-space: nowrap; }
.progress { height: 15px; position: relative; border: 3px solid #e9e7cc; border-radius: 9px; background: #f2f0df; box-shadow: inset 0 2px 2px rgba(66,88,62,.1); }
.progress i { width: 0; height: 100%; display: block; border-radius: 7px; background: linear-gradient(90deg, #66d38b, #a3df66); transition: width .4s cubic-bezier(.34,1.56,.64,1); }
.progress span { width: 20px; height: 20px; position: absolute; top: 50%; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #dbddcd; color: #fff; font-size: 11px; transform: translate(-50%, -50%); transition: .3s; }
.progress span:nth-of-type(1) { left: 34%; }
.progress span:nth-of-type(2) { left: 67%; }
.progress span:nth-of-type(3) { left: 100%; }
.progress span.is-earned { background: #ffc83f; transform: translate(-50%, -50%) scale(1.18) rotate(10deg); }
.daily-button { height: 53px; display: grid; place-items: center; gap: 0; border: 0; border-radius: 17px; background: #e8f6ea; cursor: pointer; }
.daily-button span { font-size: 23px; line-height: 1; }
.daily-button small { color: #4b8a71; font-size: 8px; font-weight: 900; }

.shinkansen-route { margin-top: 10px; padding: 9px 10px 10px; border: 1px solid rgba(255,255,255,.82); border-radius: 21px; background: rgba(255,252,240,.84); box-shadow: 0 7px 19px rgba(54,105,91,.1), inset 0 1px 0 rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.route-caption { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 0 2px 7px; }
.route-caption small, .route-caption b { display: block; }
.route-caption small { color: #4c9a77; font-size: 6px; font-weight: 900; letter-spacing: .18em; }
.route-caption b { margin-top: -1px; font-size: 11px; }
.route-caption > span { padding: 3px 7px; border-radius: 8px; background: #fff0c8; color: #a66c2b; font-size: 7px; font-weight: 900; }
.station-track { position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 3px 1px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.station-track::-webkit-scrollbar { display: none; }
.station-track::before { content: ''; height: 3px; position: absolute; z-index: 0; right: 25px; left: 25px; top: 20px; border-radius: 3px; background: linear-gradient(90deg, #6bc994, #7dcbb6, #e0dfc8); }
.station-stop { min-width: 61px; position: relative; z-index: 1; display: grid; justify-items: center; gap: 1px; padding: 0 3px; border: 0; background: transparent; scroll-snap-align: center; cursor: pointer; }
.station-stop i { width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #e8eadb; color: #80918b; font-size: 15px; font-style: normal; font-weight: 900; box-shadow: 0 3px 0 rgba(53,112,82,.12); transition: .22s cubic-bezier(.34,1.56,.64,1); }
.station-stop b { max-width: 58px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.station-stop small { color: #99a49a; font-size: 5px; font-weight: 900; }
.station-stop.is-current i { background: linear-gradient(145deg, #ffcf58, #ff8c66); color: #fff; box-shadow: 0 0 0 4px rgba(255,202,80,.2), 0 4px 0 rgba(187,99,55,.15); transform: scale(1.08); animation: stationPulse 1.8s ease-in-out infinite; }
.station-stop.is-current b { color: #d56f45; }
.station-stop.is-complete i { background: #57c484; color: #fff; }
.station-stop.is-locked { opacity: .48; filter: grayscale(.45); }
.station-stop:hover i { transform: translateY(-2px) scale(1.06); }

.orders-panel { margin-top: 12px; padding: 10px 10px 12px; border: 3px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,253,242,.87); box-shadow: 0 7px 0 rgba(51,116,83,.12); }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 7px; }
.section-heading small { color: var(--coral); font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.section-heading h2 { margin: -2px 0 0; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 17px; font-weight: 500; }
.section-heading > span { padding: 4px 8px; border-radius: 9px; background: #eef6df; color: #5d8a58; font-size: 8px; font-weight: 900; }
.service-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; padding: 4px; border-radius: 15px; background: rgba(225,234,211,.65); }
.service-button { --service: #58a9e8; min-width: 0; height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 5px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #71837b; cursor: pointer; transition: .18s cubic-bezier(.34,1.56,.64,1); }
.service-button.nozomi { --service: #f36f76; }
.service-button.hikari { --service: #58a9e8; }
.service-button.kodama { --service: #58bd7b; }
.service-button > i { width: 19px; height: 8px; position: relative; flex: 0 0 auto; border-radius: 8px 10px 4px 4px; background: var(--service); transform: skewX(-15deg); }
.service-button > i::after { content: ''; width: 5px; height: 5px; position: absolute; right: 2px; bottom: -4px; border: 2px solid #fff; border-radius: 50%; background: #566e75; box-shadow: -10px 0 0 -1px #566e75, -10px 0 0 1px #fff; }
.service-button span, .service-button b, .service-button small { min-width: 0; display: block; }
.service-button b { font-size: 8px; white-space: nowrap; }
.service-button small { overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.service-button.is-active { border-color: color-mix(in srgb, var(--service) 50%, #fff); background: #fff; color: var(--service); box-shadow: 0 3px 8px rgba(63,104,88,.11), inset 0 -2px 0 color-mix(in srgb, var(--service) 16%, transparent); transform: translateY(-1px); }
.service-button:disabled { cursor: not-allowed; opacity: .28; filter: grayscale(1); }
.service-button.needs-attention { animation: serviceAttention .32s ease-in-out 3 alternate; }
.orders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.order-card { min-width: 0; height: 94px; position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 4px; padding: 6px; overflow: hidden; border: 2px solid #eadfc9; border-bottom-width: 5px; border-radius: 17px; background: #fffefa; cursor: pointer; transition: .18s; }
.order-card.is-ready { border-color: #73d18a; background: #f5fff0; animation: readyPulse 1.3s ease-in-out infinite; }
.order-card.needs-service { border-color: #9fc6df; background: #f4fbff; }
.order-card:active { transform: translateY(3px); border-bottom-width: 2px; }
.order-train { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; background: var(--train-light); color: var(--train); font-size: 21px; box-shadow: inset 0 -4px 0 rgba(28,75,79,.08); }
.order-card div { min-width: 0; }
.order-card b, .order-card small { display: block; }
.order-card b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-card small { margin-top: 3px; color: #db8b3f; font-size: 8px; font-weight: 900; }
.passenger-badge { width: 22px; height: 22px; position: absolute; z-index: 4; right: -6px; top: -7px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 8px; background: #fff2c8; font-size: 11px; box-shadow: 0 2px 5px rgba(60,91,75,.15); }
.order-fare { display: flex; align-items: center; justify-content: space-between; gap: 3px; margin-top: 5px; }
.order-fare i { padding: 2px 4px; border-radius: 5px; color: #fff; font-size: 5px; font-style: normal; font-weight: 900; white-space: nowrap; }
.order-fare i.nozomi { background: #f36f76; }
.order-fare i.hikari { background: #58a9e8; }
.order-fare i.kodama { background: #58bd7b; }
.order-fare em { color: #c87a32; font-size: 6px; font-style: normal; font-weight: 900; white-space: nowrap; }
.ready-label { position: absolute; right: -20px; top: 5px; padding: 2px 20px; background: #4fca7c; color: #fff; font-size: 6px; font-weight: 900; transform: rotate(42deg); }
.booking-bridge { display: grid; grid-template-columns: 43px 1fr 76px; align-items: center; gap: 8px; margin-top: 9px; padding: 8px; border: 1px solid rgba(82,158,115,.28); border-radius: 17px; background: linear-gradient(135deg, rgba(236,250,219,.96), rgba(255,246,205,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.booking-icon { width: 41px; height: 41px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 14px; background: #fff4cf; font-size: 22px; box-shadow: 0 3px 8px rgba(70,112,77,.1); }
.booking-copy { min-width: 0; }
.booking-copy small, .booking-copy b, .booking-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-copy small { color: #d57c49; font-size: 5px; font-weight: 900; letter-spacing: .05em; }
.booking-copy b { margin-top: 2px; font-size: 10px; }
.booking-copy em { margin-top: 2px; color: #758a7c; font-size: 6px; font-style: normal; }
.booking-bridge > button { height: 39px; display: grid; place-items: center; align-content: center; border: 0; border-bottom: 4px solid #2b9862; border-radius: 12px; background: #55c681; color: #fff; cursor: pointer; }
.booking-bridge > button:active { transform: translateY(2px); border-bottom-width: 2px; }
.booking-bridge > button b, .booking-bridge > button small { display: block; }
.booking-bridge > button b { font-size: 8px; }
.booking-bridge > button small { margin-top: 1px; font-size: 5px; opacity: .82; }
.side-guide { display: none; }

.board-shell { position: relative; margin-top: 12px; padding: 9px 8px 10px; border: 3px solid rgba(255,255,255,.82); border-radius: 28px; background: rgba(247,255,225,.78); box-shadow: var(--shadow); }
.board-topline { height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.station-sign { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.station-sign span { font-size: 17px; }
.board-topline p { margin: 0; padding: 4px 7px; border-radius: 8px; background: #fff4c9; color: #a26d26; font-size: 8px; font-weight: 900; }
.board { aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 4px solid #a9cb84; border-radius: 24px; background: rgba(174, 222, 121, .76); box-shadow: inset 0 5px 12px rgba(47,110,58,.14), inset 0 -5px 0 rgba(69,129,58,.11); touch-action: none; }
.cell { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.43); border-radius: 17px; background: rgba(255,255,255,.27); }
.cell::after { content: ''; width: 68%; height: 12%; position: absolute; bottom: 7%; border-radius: 50%; background: rgba(41,102,55,.09); }
.cell.is-blocked { border-color: rgba(112,104,80,.16); background: rgba(180,169,131,.42); }
.cell.is-blocked::before { content: '🪨'; position: relative; z-index: 1; font-size: clamp(25px, 8vw, 43px); filter: saturate(.65); text-shadow: 0 3px 0 rgba(255,255,255,.4); }
.cell.drop-target { border-color: #fff; background: rgba(255,255,255,.66); transform: scale(.96); }
.cell.merge-target { border-color: #ffd351; background: rgba(255,241,156,.68); animation: targetGlow .65s ease-in-out infinite alternate; }

.train-piece { --train: #f06f62; --train-dark: #c9544c; --train-light: #ffd1bd; width: 100%; height: 100%; position: relative; z-index: 2; display: grid; place-items: center; padding: 3px; border: 0; background: transparent; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .18s; }
.train-piece:active { cursor: grabbing; }
.train-piece.is-selected { transform: translateY(-5px) scale(1.07); filter: drop-shadow(0 5px 0 rgba(255,255,255,.7)); }
.train-piece.is-dragging { opacity: .42; transform: scale(.9); }
.train-piece.is-new .train-art { animation: trainPop .45s cubic-bezier(.34,1.56,.64,1); }
.train-piece.is-merging .train-art { animation: mergeSpin .45s cubic-bezier(.34,1.56,.64,1); }
.train-level { width: 20px; height: 17px; position: absolute; z-index: 4; top: -1px; right: -1px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 7px; background: #ffc84c; color: #7e5420; font-size: 8px; font-weight: 900; box-shadow: 0 2px 0 rgba(59,99,61,.14); }
.train-name { position: absolute; z-index: 4; bottom: -1px; padding: 1px 4px; border-radius: 6px; background: rgba(255,255,255,.84); color: var(--train-dark); font-size: clamp(5px, 1.7vw, 8px); font-weight: 900; white-space: nowrap; }
.train-art { width: 88%; aspect-ratio: 1.22; position: relative; display: block; filter: drop-shadow(0 5px 0 rgba(39,99,57,.16)); }
.train-art .cab { width: 66%; height: 57%; position: absolute; z-index: 1; left: 22%; top: 18%; border: 3px solid var(--train-dark); border-radius: 18px 18px 13px 13px; background: var(--train); box-shadow: inset 0 -6px 0 rgba(107,50,46,.1), inset 4px 0 0 rgba(255,255,255,.13); }
.train-art .cab > b { width: 25%; height: 22%; position: absolute; top: 14%; border: 2px solid var(--train-dark); border-radius: 4px; background: #c9f3f4; }
.train-art .cab > b:first-child { left: 15%; }
.train-art .cab > b:last-child { right: 15%; }
.train-art .chimney { width: 17%; height: 24%; position: absolute; z-index: 0; left: 18%; top: 5%; border: 2px solid var(--train-dark); border-radius: 5px 5px 2px 2px; background: var(--train); }
.train-art .chimney::before { content: ''; width: 145%; height: 30%; position: absolute; left: -22%; top: -15%; border-radius: 5px; background: var(--train-dark); }
.train-art .face { width: 51%; height: 32%; position: absolute; z-index: 2; left: 29%; top: 44%; border: 2px solid var(--train-dark); border-radius: 50% 50% 38% 38%; background: var(--train-light); }
.train-art .face b { width: 8%; aspect-ratio: 1; position: absolute; top: 28%; border-radius: 50%; background: #294958; }
.train-art .face b:first-child { left: 26%; }
.train-art .face b:nth-child(2) { right: 26%; }
.train-art .face em { width: 23%; height: 13%; position: absolute; left: 39%; top: 57%; border-bottom: 2px solid #784b4e; border-radius: 50%; }
.train-art .bumper { width: 87%; height: 15%; position: absolute; z-index: 3; left: 7%; top: 69%; border: 2px solid var(--train-dark); border-radius: 7px; background: var(--train); }
.train-art .wheel { width: 22%; aspect-ratio: 1; position: absolute; z-index: 0; top: 72%; border: 3px solid #355661; border-radius: 50%; background: #f9f1cf; box-shadow: inset 0 0 0 3px #7b9aa0; }
.train-art .wheel.one { left: 18%; }
.train-art .wheel.two { right: 14%; }
.train-piece.level-2 { --train: #ef9d3f; --train-dark: #c66f28; --train-light: #ffe3a7; }
.train-piece.level-3 { --train: #54be7d; --train-dark: #278c5a; --train-light: #c9f2bf; }
.train-piece.level-4 { --train: #4aa6de; --train-dark: #2874b4; --train-light: #c7eff4; }
.train-piece.level-5 { --train: #8d7bdc; --train-dark: #5d52ad; --train-light: #e4d8ff; }
.train-piece.level-6 { --train: #ed78a5; --train-dark: #be4f7d; --train-light: #ffe0ec; }
.train-piece.level-7 { --train: #edb72f; --train-dark: #b9791c; --train-light: #fff1ad; }
.train-piece.level-6 .cab, .train-piece.level-7 .cab { box-shadow: inset 0 -6px 0 rgba(107,50,46,.08), inset 4px 0 0 rgba(255,255,255,.18), 0 0 10px rgba(255,229,107,.7); }
.board-tip { position: absolute; left: 50%; bottom: 20px; z-index: 10; display: flex; align-items: center; gap: 4px; padding: 7px 11px; border: 2px solid #fff; border-radius: 12px; background: rgba(34,71,90,.88); color: #fff; font-size: 8px; font-weight: 900; white-space: nowrap; box-shadow: 0 5px 10px rgba(34,71,90,.2); transform: translateX(-50%); animation: tipFloat 1.5s ease-in-out infinite; transition: opacity .25s; }
.board-tip.is-hidden { opacity: 0; pointer-events: none; }

.depot { height: 76px; display: grid; grid-template-columns: 58px 1fr 54px; align-items: center; gap: 7px; margin-top: 10px; padding: 7px; border: 3px solid #fff; border-radius: 23px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.next-preview, .storage-button { height: 57px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 17px; background: #edf6e5; }
.next-preview small, .storage-button small { color: #69856a; font-size: 7px; font-weight: 900; }
.mini-train { width: 29px; height: 27px; display: grid; place-items: center; border: 2px solid #d0534d; border-radius: 10px 10px 7px 7px; background: #f27668; color: #fff; font-size: 9px; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(132,57,51,.12); }
.storage-button { cursor: pointer; }
.storage-button span { font-size: 22px; line-height: 1; }
.generator { height: 58px; display: grid; grid-template-columns: 47px 1fr auto; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border: 0; border-bottom: 5px solid #d36635; border-radius: 19px; background: linear-gradient(145deg, #ffbd4d, #f48747); color: #fff; text-align: left; text-shadow: 0 2px 0 rgba(129,69,36,.17); cursor: pointer; }
.generator:active { transform: translateY(3px); border-bottom-width: 2px; }
.generator:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .65; }
.generator > span:nth-child(2) strong, .generator > span:nth-child(2) small { display: block; }
.generator strong { font-size: 13px; }
.generator small { font-size: 7px; opacity: .9; }
.generator em { padding: 4px 6px; border-radius: 9px; background: rgba(121,62,28,.17); font-size: 9px; font-style: normal; font-weight: 900; }
.generator-icon { width: 45px; height: 45px; position: relative; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); border-radius: 15px; background: rgba(255,255,255,.2); }
.generator-icon b { position: relative; z-index: 1; font-size: 25px; }
.generator-icon i { position: absolute; inset: 4px; border: 2px dashed rgba(255,255,255,.5); border-radius: 12px; animation: spin 8s linear infinite; }
.mobile-generate { display: none; }

.bottom-nav { height: calc(69px + env(safe-area-inset-bottom)); position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 3px; padding: 6px max(12px, calc((100vw - 520px) / 2 + 12px)) env(safe-area-inset-bottom); border-top: 2px solid rgba(228,215,185,.85); background: rgba(255,253,245,.96); box-shadow: 0 -7px 18px rgba(58,91,80,.1); backdrop-filter: blur(12px); }
.bottom-nav button { width: 96px; position: relative; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; border-radius: 17px; background: transparent; color: #83978d; cursor: pointer; }
.bottom-nav button span { font-size: 22px; filter: grayscale(.5); transition: .2s; }
.bottom-nav button b { font-size: 8px; }
.bottom-nav button.is-active { background: #e9f7db; color: #3b8d61; }
.bottom-nav button.is-active span { filter: none; transform: translateY(-2px) scale(1.08); }
.bottom-nav button i { width: 7px; height: 7px; position: absolute; right: 27px; top: 7px; display: none; border: 2px solid #fff; border-radius: 50%; background: var(--coral); }
.bottom-nav button i.is-visible { display: block; }

.toast { max-width: calc(100vw - 30px); position: fixed; z-index: 100; left: 50%; top: calc(82px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 7px; padding: 10px 17px; border: 3px solid #fff; border-radius: 16px; background: #315b67; color: #fff; font-size: 11px; box-shadow: 0 7px 16px rgba(33,70,77,.25); opacity: 0; pointer-events: none; transform: translate(-50%, -20px) scale(.9); transition: .25s cubic-bezier(.34,1.56,.64,1); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast span { font-size: 18px; }

.game-dialog { width: min(420px, calc(100% - 28px)); max-height: min(680px, 84dvh); padding: 0; overflow: auto; border: 4px solid #fff; border-radius: 28px; background: #fffdf4; color: var(--ink); box-shadow: 0 18px 70px rgba(34,71,90,.32); }
.game-dialog::backdrop { background: rgba(34,71,90,.48); backdrop-filter: blur(5px); }
.dialog-close { width: 35px; height: 35px; position: sticky; z-index: 2; left: calc(100% - 45px); top: 10px; display: grid; place-items: center; margin-bottom: -35px; border: 0; border-radius: 12px; background: #edf2e5; font-size: 23px; font-weight: 900; cursor: pointer; }
.dialog-body { padding: 23px 19px 20px; }
.dialog-kicker { margin: 0; color: var(--coral); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.dialog-body h2 { margin: 3px 0 8px; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 27px; font-weight: 500; }
.dialog-body > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.help-steps { display: grid; gap: 8px; margin-top: 17px; }
.help-steps article { display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #f3f7e9; }
.help-steps span { font-size: 26px; text-align: center; }
.help-steps b, .help-steps small { display: block; }
.help-steps b { font-size: 11px; }
.help-steps small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.dialog-action { width: 100%; height: 49px; margin-top: 16px; border: 0; border-bottom: 5px solid #2d9c65; border-radius: 16px; background: #56c983; color: #fff; font-weight: 900; cursor: pointer; }
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }
.collection-item { min-height: 93px; display: grid; grid-template-columns: 55px 1fr; align-items: center; gap: 7px; padding: 8px; border: 2px solid #e7e5d5; border-radius: 17px; background: #fff; }
.collection-item.is-locked { filter: grayscale(1); opacity: .45; }
.collection-item .order-train { width: 53px; height: 53px; font-size: 27px; }
.collection-item b, .collection-item small { display: block; }
.collection-item b { font-size: 10px; }
.collection-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.route-list { display: grid; gap: 10px; margin-top: 17px; }
.route-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 2px solid #e7e5d5; border-radius: 17px; background: #fff; }
.route-item.is-current { border-color: #66ca86; background: #f3ffef; }
.route-item.is-locked { opacity: .52; }
.route-item > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: #e7f3de; font-size: 19px; }
.route-item b, .route-item small { display: block; }
.route-item b { font-size: 10px; }
.route-item small { color: var(--muted); font-size: 8px; }
.route-item em { color: #e5a62f; font-size: 11px; font-style: normal; letter-spacing: -2px; }
.station-detail .station-hero { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 13px; margin: 8px 0 12px; padding: 13px; border-radius: 20px; background: linear-gradient(145deg, #e7f7dc, #fff3cd); }
.station-hero > span { width: 70px; height: 70px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 23px; background: rgba(255,255,255,.72); font-size: 38px; box-shadow: 0 5px 0 rgba(66,111,78,.09); }
.station-hero small, .station-hero b { display: block; }
.station-hero small { color: #4c9a77; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.station-hero h2 { margin: 0; }
.station-hero b { color: #d87b48; font-size: 9px; }
.travel-card { margin-top: 13px; padding: 12px; border: 1px solid #eadfca; border-radius: 16px; background: #fff; }
.travel-card small, .travel-card strong { display: block; }
.travel-card small { color: #e28757; font-size: 7px; font-weight: 900; }
.travel-card strong { margin-top: 3px; font-size: 11px; line-height: 1.5; }
.station-services { margin-top: 9px; padding: 10px 11px; border-radius: 15px; background: #f1f6ec; }
.station-services > small { display: block; margin-bottom: 5px; color: #7a9181; font-size: 7px; font-weight: 900; }
.station-services > div { display: flex; flex-wrap: wrap; gap: 5px; }
.station-services span { padding: 4px 7px; border-radius: 8px; color: #fff; font-size: 7px; font-weight: 900; }
.station-services .nozomi { background: #f36f76; }
.station-services .hikari { background: #58a9e8; }
.station-services .kodama { background: #58bd7b; }
.stamp-card { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; margin-top: 9px; padding: 10px; border: 2px dashed #dccfb6; border-radius: 16px; background: #faf7eb; }
.stamp-card > span { width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid #d9cfb8; border-radius: 50%; color: #a9a18e; font-size: 23px; font-weight: 900; transform: rotate(-7deg); }
.stamp-card.is-stamped { border-color: #74c88e; background: #f1fae9; }
.stamp-card.is-stamped > span { border-color: #51b876; background: rgba(81,184,118,.1); color: #44a66b; }
.stamp-card small, .stamp-card b, .stamp-card p { display: block; margin: 0; }
.stamp-card small { color: #8e9e8d; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.stamp-card b { font-size: 10px; }
.stamp-card p { margin-top: 2px; color: #8b9285; font-size: 7px; }
.settings-actions { display: grid; gap: 8px; margin-top: 17px; }
.settings-actions button { height: 46px; border: 2px solid #e7e4d2; border-radius: 14px; background: #fff; font-weight: 900; cursor: pointer; }
.settings-actions .danger { color: #ca5c55; background: #fff0ed; }
.build-heading { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; margin-top: 7px; }
.build-heading > span { width: 60px; height: 60px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 20px; background: linear-gradient(145deg, #e2f6d5, #fff1c9); font-size: 31px; box-shadow: 0 5px 0 rgba(65,112,77,.1); }
.build-heading small, .build-heading h2, .build-heading p { display: block; margin: 0; }
.build-heading small { color: #4c9a77; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.build-heading h2 { font-size: 23px; }
.build-heading p { color: #dd834e; font-size: 8px; font-weight: 900; }
.build-heading > strong { align-self: start; padding: 5px 7px; border-radius: 9px; background: #fff0c7; color: #a96d27; font-size: 9px; white-space: nowrap; }
.build-progress { height: 10px; margin: 12px 0 8px; overflow: hidden; border: 2px solid #e4e3cf; border-radius: 7px; background: #f0efdf; }
.build-progress i { height: 100%; display: block; border-radius: 5px; background: linear-gradient(90deg, #55c482, #a2dd66); transition: width .35s ease; }
.build-detail > p { font-size: 9px; }
.facility-list { display: grid; gap: 8px; margin-top: 13px; }
.facility-card { display: grid; grid-template-columns: 48px 1fr 60px; align-items: center; gap: 9px; padding: 9px; border: 1px solid #e6dfca; border-bottom: 3px solid #ddd2ba; border-radius: 17px; background: #fff; }
.facility-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #eef6df; font-size: 24px; }
.facility-copy { min-width: 0; }
.facility-copy small, .facility-copy b, .facility-copy p, .facility-copy em { display: block; margin: 0; }
.facility-copy small { color: #dc8553; font-size: 6px; font-weight: 900; }
.facility-copy b { font-size: 11px; }
.facility-copy p { margin-top: 2px; overflow: hidden; color: #85938b; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.facility-copy em { margin-top: 3px; color: #4b9870; font-size: 7px; font-style: normal; font-weight: 900; }
.facility-pips { display: flex; gap: 3px; margin-top: 4px; }
.facility-pips i { width: 16px; height: 4px; border-radius: 3px; background: #e2e4d7; }
.facility-pips i.is-filled { background: #62c887; }
.facility-card > button { height: 34px; padding: 0 5px; border: 0; border-bottom: 3px solid #d2753c; border-radius: 11px; background: #f5a253; color: #fff; font-size: 8px; font-weight: 900; cursor: pointer; }
.facility-card > button:disabled { border-bottom-color: #c7c7ba; background: #deded3; color: #92968d; cursor: not-allowed; }
.facility-card.is-maxed { border-color: #9dd5ad; background: #f4fff0; }
.settings-link { width: 100%; height: 40px; margin-top: 10px; border: 1px solid #dedbca; border-radius: 13px; background: #f6f4e9; color: #71817a; font-size: 9px; font-weight: 900; cursor: pointer; }
.booking-hero { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 12px; border-radius: 20px; background: linear-gradient(145deg, #e8f8dc, #fff0c7); }
.booking-hero > span { width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 21px; background: rgba(255,255,255,.76); font-size: 34px; box-shadow: 0 5px 0 rgba(65,112,77,.1); }
.booking-hero small, .booking-hero h2, .booking-hero b { display: block; margin: 0; }
.booking-hero small { color: #4c9a77; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.booking-hero h2 { margin-top: 2px; font-size: 24px; }
.booking-hero b { color: #d67d49; font-size: 9px; }
.booking-params { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 5px; margin-top: 14px; }
.booking-params span { padding: 9px; border: 1px solid #e3dfca; border-radius: 13px; background: #fff; color: #829087; font-size: 7px; }
.booking-params span b { display: block; margin-top: 2px; color: #355f63; font-size: 10px; }
.booking-params i { color: #53af7b; font-size: 16px; font-style: normal; text-align: center; }
.integration-note { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; border-radius: 15px; background: #eef7e8; }
.integration-note > span { font-size: 23px; text-align: center; }
.integration-note p, .integration-note b, .integration-note small { display: block; margin: 0; }
.integration-note b { font-size: 9px; }
.integration-note small { margin-top: 2px; color: #788b80; font-size: 7px; line-height: 1.45; }

.level-up { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 20px; overflow: hidden; background: rgba(70,178,153,.74); opacity: 0; pointer-events: none; transition: .35s; }
.level-up.is-visible { opacity: 1; pointer-events: auto; }
.level-rays { width: 650px; height: 650px; position: absolute; background: repeating-conic-gradient(rgba(255,255,255,.24) 0 12deg, transparent 12deg 24deg); animation: spin 18s linear infinite; }
.level-card { width: min(360px, 94vw); position: relative; display: grid; justify-items: center; padding: 74px 23px 23px; border: 5px solid #fff; border-radius: 30px; background: #fffcef; box-shadow: 0 18px 0 rgba(45,117,88,.22), 0 30px 70px rgba(35,79,73,.26); transform: translateY(25px) scale(.82); transition: .5s cubic-bezier(.34,1.56,.64,1); }
.level-up.is-visible .level-card { transform: none; }
.celebrate-train { width: 115px; height: 115px; position: absolute; top: -58px; display: grid; place-items: center; border: 7px solid #fff; border-radius: 39px; background: linear-gradient(145deg,#ffd95f,#ff8a65); font-size: 66px; box-shadow: 0 9px 0 rgba(48,99,80,.13); animation: celebrateBounce 1.2s ease-in-out infinite; }
.level-card > small { color: #f1875f; font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.level-card h2 { margin: 6px 0; font-family: "ZCOOL KuaiLe", sans-serif; font-size: 28px; font-weight: 500; }
.big-stars { color: #ffc53d; font-size: 34px; letter-spacing: 3px; text-shadow: 0 3px 0 #e18a2e; }
.level-card p { margin: 9px 0 17px; color: var(--muted); font-size: 11px; }
.level-card button { width: 100%; height: 52px; border: 0; border-bottom: 5px solid #248e5a; border-radius: 17px; background: #4fc781; color: #fff; font-weight: 900; cursor: pointer; }
.level-card button span { margin-left: 6px; }

.spark { width: 8px; height: 8px; position: fixed; z-index: 120; pointer-events: none; border-radius: 50%; background: var(--spark-color, #ffd34e); box-shadow: 0 0 0 3px rgba(255,255,255,.7); animation: sparkle .7s ease-out forwards; }

/* 2026 visual refresh: softer toy-town surfaces and tactile drag feedback. */
.app { background: linear-gradient(180deg, rgba(112, 216, 240, .72) 0, rgba(222, 250, 239, .88) 205px, rgba(250, 255, 237, .95) 60%, rgba(255, 250, 235, .98) 100%); }
.topbar { min-height: 72px; padding-bottom: 7px; }
.conductor { border-width: 2px; background: linear-gradient(145deg, #ffe78a, #ff9b78); box-shadow: 0 4px 12px rgba(36,94,102,.14), inset 0 1px 0 rgba(255,255,255,.75); }
.currency, .icon-button { border-width: 1px; box-shadow: 0 4px 12px rgba(34,95,105,.1), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(10px); }
.journey-card, .orders-panel, .board-shell, .depot { border: 1px solid rgba(255,255,255,.82); box-shadow: 0 9px 24px rgba(54,105,91,.12), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(11px); }
.journey-card { background: rgba(255,255,250,.83); }
.level-avatar { box-shadow: inset 0 -5px 0 rgba(176,79,48,.12), 0 5px 12px rgba(233,126,77,.18); }
.orders-panel { margin-top: 10px; background: rgba(255,252,240,.82); }
.section-heading > span { border: 1px solid rgba(111,160,94,.14); background: rgba(235,246,219,.9); }
.orders { gap: 7px; }
.order-card { height: 94px; grid-template-columns: 45px 1fr; border: 1px solid #eadfc9; border-bottom: 3px solid #e2d5bd; background: linear-gradient(150deg, rgba(255,255,255,.97), rgba(255,250,235,.9)); box-shadow: 0 4px 10px rgba(69,104,74,.06); }
.order-card.is-ready { border-color: #69ca85; border-bottom-color: #4fb873; }
.order-train { overflow: visible; background: linear-gradient(145deg, var(--train-light), #fff); box-shadow: inset 0 -4px 0 rgba(28,75,79,.06), 0 4px 9px rgba(57,105,83,.1); }
.order-mini { width: 31px; height: 25px; position: relative; display: block; border: 2px solid var(--train); border-radius: 9px 9px 7px 7px; background: var(--train); box-shadow: inset 0 -5px 0 rgba(43,75,79,.09); }
.order-mini::before { content: ''; width: 8px; height: 8px; position: absolute; left: 3px; top: -7px; border-radius: 3px 3px 1px 1px; background: var(--train); box-shadow: 0 -2px 0 color-mix(in srgb, var(--train) 78%, #555); }
.order-mini::after { content: ''; width: 35px; height: 5px; position: absolute; left: -4px; bottom: -4px; border-radius: 4px; background: color-mix(in srgb, var(--train) 72%, #555); }
.order-mini b { width: 7px; height: 7px; position: absolute; left: 6px; top: 5px; border: 1px solid rgba(34,71,90,.35); border-radius: 2px; background: #d9f7f5; box-shadow: 11px 0 0 #d9f7f5, 11px 0 0 1px rgba(34,71,90,.35); }
.order-mini em::before, .order-mini em::after { content: ''; width: 7px; height: 7px; position: absolute; z-index: 2; bottom: -6px; border: 2px solid #385963; border-radius: 50%; background: #fff1c9; }
.order-mini em::before { left: 3px; }
.order-mini em::after { right: 2px; }
.board-shell { margin-top: 10px; padding: 8px 7px 9px; border-radius: 25px; background: linear-gradient(150deg, rgba(255,252,233,.9), rgba(238,249,218,.91)); }
.board-topline { height: 38px; padding: 0 6px; }
.station-sign { padding: 4px 8px 4px 5px; border-radius: 11px; background: rgba(255,255,255,.63); }
.board-topline p { padding: 5px 9px; border: 1px solid rgba(227,174,71,.16); background: rgba(255,243,195,.83); }
.board { gap: 5px; padding: 7px; border: 0; border-radius: 21px; background: linear-gradient(145deg, rgba(128,183,100,.95), rgba(164,210,113,.96)); box-shadow: inset 0 5px 12px rgba(43,92,49,.18), inset 0 -4px 0 rgba(59,116,52,.12), 0 2px 0 rgba(255,255,255,.9); }
.cell { overflow: visible; border: 1px solid rgba(255,255,255,.48); border-radius: 15px; background: linear-gradient(145deg, rgba(226,248,190,.82), rgba(198,231,155,.74)); box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 1px 0 rgba(66,117,57,.09); transition: background .14s ease, box-shadow .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1), border-color .14s ease; }
.cell:not(.is-blocked)::before { content: ''; width: 76%; height: 12px; position: absolute; z-index: 0; left: 12%; bottom: 9%; border-top: 3px solid rgba(101,91,74,.24); border-bottom: 3px solid rgba(101,91,74,.24); background: repeating-linear-gradient(90deg, rgba(118,89,67,.31) 0 3px, transparent 3px 10px); opacity: .62; }
.cell::after { width: 58%; height: 9%; bottom: 16%; background: rgba(41,102,55,.11); filter: blur(1px); }
.cell.is-blocked { border-color: rgba(111,104,82,.18); background: linear-gradient(145deg, rgba(169,173,120,.76), rgba(147,158,105,.67)); box-shadow: inset 0 4px 8px rgba(79,89,56,.13); }
.train-piece { transition: transform .2s cubic-bezier(.22,1.35,.36,1), opacity .15s ease, filter .15s ease; }
.train-piece:hover .train-art { transform: translateY(-2px); }
.train-piece.is-selected { transform: translateY(-5px) scale(1.045); filter: drop-shadow(0 7px 0 rgba(255,255,255,.68)); }
.train-piece.is-selected .train-art { animation: selectedBob .9s ease-in-out infinite; }
.train-piece.is-dragging { opacity: .12; transform: scale(.84); filter: saturate(.6); }
.train-art { width: 91%; filter: drop-shadow(0 5px 0 rgba(39,99,57,.14)) drop-shadow(0 5px 8px rgba(36,79,55,.08)); transition: transform .18s ease; }
.drag-ghost { width: 70px; height: 70px; position: fixed; z-index: 300; left: 0; top: 0; margin: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 11px rgba(35,76,69,.24)) drop-shadow(0 4px 0 rgba(255,255,255,.75)); transition: filter .13s ease; }
.drag-ghost .train-art { transform: translateY(-3px); }
.drag-ghost.is-magnetized { filter: drop-shadow(0 0 11px rgba(255,214,69,.9)) drop-shadow(0 14px 11px rgba(35,76,69,.22)); }
.drag-ghost.is-magnetized .train-art { animation: magnetWiggle .35s ease-in-out infinite alternate; }
.drag-ghost.is-landing, .drag-ghost.is-returning { pointer-events: none; transition: transform .14s cubic-bezier(.2,.9,.3,1.15), opacity .14s ease; }
.drag-ghost.is-returning { transition-duration: .18s; }
.board.is-drag-active .cell { filter: saturate(.88); }
.board.is-drag-active .cell.is-drop-preview { border-color: #fff; background: linear-gradient(145deg, #efffd4, #d9f5ae); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 0 0 3px rgba(121,202,111,.32); transform: scale(.96); filter: none; }
.board.is-drag-active .cell.is-merge-preview { z-index: 3; border-color: #ffe57b; background: linear-gradient(145deg, #fff7bd, #e7ef9c); box-shadow: inset 0 0 0 3px rgba(255,255,255,.65), 0 0 0 4px rgba(255,207,65,.45), 0 0 20px rgba(255,215,74,.55); transform: scale(1.055); filter: none; animation: magneticCell .48s ease-in-out infinite alternate; }
.board.is-drag-active .cell.is-invalid-preview { border-color: rgba(220,99,84,.55); background: rgba(228,157,132,.5); animation: invalidNudge .18s ease-in-out 2; }
.depot { background: rgba(255,252,241,.88); }
.generator { border-bottom-width: 4px; background: linear-gradient(135deg, #ffbb4e, #ef8149); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 5px 12px rgba(213,103,48,.18); transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease; }
.generator:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 7px 17px rgba(213,103,48,.25); transform: translateY(-1px); }
.bottom-nav { border-top-color: rgba(226,212,176,.55); background: rgba(255,252,242,.9); box-shadow: 0 -8px 22px rgba(58,91,80,.09); }
.bottom-nav button.is-active { background: linear-gradient(145deg, #eef9dd, #e2f3d3); box-shadow: inset 0 1px 0 #fff; }

@keyframes musicBounce { to { transform: scaleY(.35); } }
@keyframes readyPulse { 50% { border-color: #3fc970; box-shadow: 0 0 0 4px rgba(96,210,126,.13), 0 5px 10px rgba(66,165,95,.14); } }
@keyframes targetGlow { to { box-shadow: inset 0 0 0 4px rgba(255,211,81,.6); } }
@keyframes trainPop { 0% { transform: scale(.2) rotate(-18deg); } 75% { transform: scale(1.15) rotate(4deg); } }
@keyframes mergeSpin { 35% { transform: scale(.35) rotate(25deg); } 80% { transform: scale(1.2) rotate(-5deg); } }
@keyframes tipFloat { 50% { transform: translate(-50%, -4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes celebrateBounce { 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes sparkle { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3) rotate(180deg); } }
@keyframes selectedBob { 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes magnetWiggle { to { transform: translateY(-4px) rotate(2deg) scale(1.03); } }
@keyframes magneticCell { to { transform: scale(1.075); box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 0 0 5px rgba(255,207,65,.38), 0 0 25px rgba(255,215,74,.7); } }
@keyframes invalidNudge { 50% { transform: translateX(2px); } }
@keyframes stationPulse { 50% { box-shadow: 0 0 0 7px rgba(255,202,80,.1), 0 5px 0 rgba(187,99,55,.14); } }
@keyframes serviceAttention { to { border-color: var(--service); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--service) 22%, transparent); transform: translateY(-2px); } }

@media (min-width: 521px) {
  body { padding: 18px 0 0; }
  .app { min-height: calc(100dvh - 18px); border-radius: 34px 34px 0 0; }
  .bottom-nav { left: 50%; width: 520px; transform: translateX(-50%); border-radius: 22px 22px 0 0; }
}

@media (min-width: 900px) {
  body { padding: 22px 0 34px; }
  .app { width: min(calc(100% - 44px), 940px); min-height: 0; margin: 0 auto; padding-bottom: 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 36px; box-shadow: 0 24px 70px rgba(31,83,88,.22); }
  .topbar { padding-right: 20px; padding-left: 20px; }
  .game-stage { display: grid; grid-template-columns: minmax(270px, .82fr) minmax(470px, 1.42fr); grid-template-rows: auto auto auto 78px; gap: 12px; padding: 0 14px 14px; }
  .journey-card { grid-column: 1 / -1; }
  .shinkansen-route { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .station-track { justify-content: center; }
  .orders-panel { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; align-self: stretch; margin-top: 0; padding: 14px 12px; }
  .orders { grid-template-columns: 1fr; gap: 10px; }
  .order-card { height: 96px; grid-template-columns: 58px 1fr; padding: 8px; }
  .order-train { width: 52px; height: 52px; }
  .order-card b { font-size: 11px; }
  .order-card small { font-size: 9px; }
  .side-guide { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; margin-top: auto; padding: 13px; border: 1px dashed rgba(78,151,103,.26); border-radius: 18px; background: linear-gradient(145deg, rgba(237,250,218,.78), rgba(255,253,230,.78)); }
  .side-guide > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.72); font-size: 27px; box-shadow: inset 0 -4px 0 rgba(68,125,77,.08); }
  .side-guide small, .side-guide b, .side-guide p { display: block; margin: 0; }
  .side-guide small { color: #e68856; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
  .side-guide b { margin-top: 2px; font-size: 12px; }
  .side-guide p { margin-top: 3px; color: #738b80; font-size: 8px; line-height: 1.45; }
  .board-shell { grid-column: 2; grid-row: 3 / span 2; margin-top: 0; }
  .depot { grid-column: 1; grid-row: 4; align-self: end; margin-top: 0; }
  .bottom-nav { width: min(620px, calc(100% - 40px)); height: 66px; position: sticky; left: auto; bottom: 14px; margin: 0 auto; padding: 6px 12px; border: 1px solid rgba(228,215,185,.78); border-radius: 22px; transform: none; }
  .bottom-nav button { width: 120px; }
}

@media (max-width: 520px) {
  html { scroll-padding-bottom: calc(135px + env(safe-area-inset-bottom)); }
  body { padding: 0; overscroll-behavior-y: contain; }
  .app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 58px; padding: calc(7px + env(safe-area-inset-top)) 10px 6px; }
  .conductor { width: 42px; height: 42px; border-radius: 14px; font-size: 23px; }
  .profile { gap: 7px; }
  .profile small { display: none; }
  .profile strong { font-size: 18px; }
  .currency { height: 32px; min-width: 52px; padding: 0 7px; border-radius: 11px; }
  .icon-button { width: 33px; height: 33px; border-radius: 11px; }
  .game-stage { padding: 0 7px 10px; }
  .journey-card { height: 61px; grid-template-columns: 44px 1fr 47px; gap: 7px; padding: 6px 7px; border-radius: 18px; }
  .level-avatar { width: 43px; height: 43px; border-radius: 14px; }
  .level-avatar strong { font-size: 21px; }
  .journey-copy > div:first-child { margin-bottom: 6px; }
  .journey-copy span { max-width: 155px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .progress { height: 12px; border-width: 2px; }
  .progress span { width: 17px; height: 17px; font-size: 8px; }
  .daily-button { height: 45px; border-radius: 14px; }
  .daily-button span { font-size: 19px; }
  .shinkansen-route { margin-top: 7px; padding: 6px 7px 7px; border-radius: 17px; }
  .route-caption { padding-bottom: 4px; }
  .route-caption small { display: none; }
  .route-caption b { font-size: 10px; }
  .route-caption > span { font-size: 6px; }
  .station-track { gap: 2px; }
  .station-track::before { top: 16px; }
  .station-stop { min-width: 52px; padding: 0 2px; }
  .station-stop i { width: 29px; height: 29px; border-width: 2px; font-size: 12px; }
  .station-stop b { font-size: 6px; }
  .station-stop small { font-size: 4px; }
  .orders-panel { margin-top: 7px; padding: 7px 7px 8px; border-radius: 19px; }
  .section-heading { padding-bottom: 4px; }
  .section-heading h2 { font-size: 15px; }
  .section-heading small { font-size: 6px; }
  .section-heading > span { padding: 3px 6px; font-size: 6px; }
  .service-selector { gap: 3px; margin-bottom: 6px; padding: 3px; border-radius: 12px; }
  .service-button { height: 37px; gap: 4px; padding: 3px; border-radius: 9px; }
  .service-button > i { width: 16px; height: 7px; }
  .service-button b { font-size: 7px; }
  .service-button small { font-size: 4px; }
  .orders { display: flex; gap: 7px; overflow-x: auto; margin-right: -7px; padding: 1px 7px 4px 1px; scroll-padding-left: 1px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .orders::-webkit-scrollbar { display: none; }
  .order-card { height: 87px; flex: 0 0 184px; grid-template-columns: 43px 1fr; padding: 5px; border-radius: 14px; scroll-snap-align: start; }
  .order-card b { font-size: 8px; }
  .order-card small { font-size: 7px; }
  .order-train { width: 41px; height: 41px; }
  .order-fare { margin-top: 3px; }
  .order-fare i, .order-fare em { font-size: 5px; }
  .booking-bridge { grid-template-columns: 38px 1fr 70px; gap: 6px; margin-top: 5px; padding: 6px; border-radius: 14px; }
  .booking-icon { width: 36px; height: 36px; border-radius: 12px; font-size: 19px; }
  .booking-copy b { font-size: 9px; }
  .booking-copy em { font-size: 5px; }
  .booking-bridge > button { height: 36px; border-radius: 10px; }
  .board-shell { margin-top: 7px; padding: 6px; border-radius: 22px; }
  .board-topline { height: 32px; }
  .station-sign { padding: 3px 6px 3px 4px; font-size: 10px; }
  .station-sign span { font-size: 14px; }
  .board-topline p { padding: 4px 6px; font-size: 6px; }
  .board { gap: 3px; padding: 5px; border-radius: 18px; }
  .cell { border-radius: 12px; }
  .board-tip { bottom: 13px; padding: 6px 9px; font-size: 7px; }
  .depot { margin-top: 7px; }
  .mobile-generate { width: 59px; height: 59px; position: fixed; z-index: 45; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); display: grid; place-items: center; align-content: center; padding: 3px; border: 3px solid #fff; border-bottom: 6px solid #d56937; border-radius: 21px; background: linear-gradient(145deg, #ffc857, #f38349); color: #fff; text-shadow: 0 1px 0 rgba(115,61,31,.25); box-shadow: 0 8px 18px rgba(129,76,42,.24); cursor: pointer; transition: .16s cubic-bezier(.34,1.56,.64,1); }
  .mobile-generate:active { bottom: calc(69px + env(safe-area-inset-bottom)); border-bottom-width: 3px; transform: scale(.94); }
  .mobile-generate:disabled { filter: grayscale(.65); opacity: .55; }
  .mobile-generate.is-drag-hidden { opacity: 0; pointer-events: none; transform: translateY(18px) scale(.72); }
  .mobile-generate span { font-size: 23px; line-height: 1; }
  .mobile-generate b { font-size: 7px; line-height: 1; }
  .mobile-generate small { position: absolute; right: -4px; top: -6px; padding: 3px 5px; border: 2px solid #fff; border-radius: 8px; background: #6abf72; font-size: 6px; font-weight: 900; }
  .bottom-nav { height: calc(62px + env(safe-area-inset-bottom)); padding-top: 4px; }
  .bottom-nav button { width: 82px; border-radius: 14px; }
  .bottom-nav button span { font-size: 19px; }
  .bottom-nav button b { font-size: 7px; }
}

@media (max-width: 390px) {
  .topbar { padding-right: 9px; padding-left: 9px; }
  .profile small { display: none; }
  .profile strong { font-size: 18px; }
  .conductor { width: 42px; height: 42px; font-size: 23px; }
  .currency { min-width: 50px; padding: 0 6px; }
  .currency i, #helpButton { display: none; }
  .game-stage { padding-right: 6px; padding-left: 6px; }
  .orders-panel { padding-right: 6px; padding-left: 6px; }
  .order-card { grid-template-columns: 39px 1fr; height: 86px; flex-basis: 176px; padding: 4px; }
  .order-train { width: 37px; height: 37px; }
  .board { gap: 3px; padding: 4px; }
  .cell { border-radius: 13px; }
  .train-art { width: 94%; }
  .train-name { font-size: 6px; }
}

/* Safari on iPhone does not expose the Vibration API. These brief visual and
   audio cues make important taps feel physical without changing game rules. */
html.uses-visual-haptics button:active {
  transform: translateY(4px) scale(.96);
  filter: saturate(1.08) brightness(.98);
}

html.uses-visual-haptics .ios-impact-light {
  transform-origin: center;
  animation: iosImpactLight .34s cubic-bezier(.2, 1.5, .35, 1) both;
}

html.uses-visual-haptics .ios-impact-medium {
  transform-origin: center;
  animation: iosImpactMedium .34s cubic-bezier(.18, 1.65, .32, 1) both;
}

html.uses-visual-haptics .ios-impact-strong {
  transform-origin: center;
  animation: iosImpactStrong .44s cubic-bezier(.16, 1.75, .3, 1) both;
}

.ios-touch-flash {
  --flash-size: 72px;
  width: 12px;
  height: 12px;
  position: fixed;
  z-index: 520;
  left: 50%;
  top: 50%;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 18%, rgba(255,224,105,.82) 25%, rgba(255,194,77,.12) 68%, transparent 70%);
  box-shadow: 0 0 0 4px rgba(255,215,91,.34), 0 0 24px rgba(255,229,125,.9);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.18);
  animation: iosTouchFlash .5s ease-out both;
}

.ios-touch-flash.is-medium { --flash-size: 92px; }
.ios-touch-flash.is-strong { --flash-size: 126px; border-width: 4px; }

.ios-screen-flash {
  position: fixed;
  z-index: 510;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.42), rgba(255,224,126,.17) 42%, transparent 76%);
  opacity: 0;
  pointer-events: none;
  animation: iosScreenFlash .34s ease-out both;
}

@keyframes iosImpactLight {
  0% { transform: translateY(2px) scale(.96); filter: brightness(1.08); }
  48% { transform: translateY(-2px) scale(1.055); }
  72% { transform: translateY(1px) scale(.985); }
  100% { transform: none; filter: none; }
}

@keyframes iosImpactMedium {
  0% { transform: translateY(4px) scale(.91); filter: brightness(1.13) saturate(1.18); }
  43% { transform: translateY(-4px) scale(1.105) rotate(-1deg); }
  68% { transform: translateY(1px) scale(.97) rotate(.6deg); }
  84% { transform: translateY(-1px) scale(1.025); }
  100% { transform: none; filter: none; }
}

@keyframes iosImpactStrong {
  0% { transform: translateY(6px) scale(.84); filter: brightness(1.2) saturate(1.25); }
  34% { transform: translateY(-6px) scale(1.15) rotate(-1.5deg); }
  56% { transform: translateY(2px) scale(.95) rotate(1deg); }
  73% { transform: translateY(-2px) scale(1.065) rotate(-.4deg); }
  88% { transform: translateY(1px) scale(.985); }
  100% { transform: none; filter: none; }
}

@keyframes iosTouchFlash {
  0% { width: 12px; height: 12px; opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  16% { opacity: 1; }
  100% { width: var(--flash-size); height: var(--flash-size); opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes iosScreenFlash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}