@import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;500;600;700&family=DM+Mono:wght@500&display=swap');

:root {
  --paper: #f6f0e7;
  --paper-deep: #eee5d9;
  --ink: #202827;
  --muted: #7a817b;
  --green: #174b3d;
  --green-2: #236957;
  --mint: #d6ead7;
  --orange: #ec7244;
  --yellow: #f5bf52;
  --line: rgba(32, 40, 39, 0.12);
  --shadow: 0 18px 42px rgba(53, 48, 37, 0.1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #dfd8cb; }
body { color: var(--ink); font-family: Changa, system-ui, sans-serif; }
button { border: 0; color: inherit; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.app-shell { position: relative; margin: 0 auto; min-height: 100svh; max-width: 520px; overflow: hidden; background: var(--paper); perspective: 1000px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.brand-mark { display: flex; align-items: center; gap: 9px; padding: 0; background: transparent; text-align: right; font-size: 16px; font-weight: 700; }
.brand-dot { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: var(--green); color: var(--yellow); font-size: 19px; transform: rotate(-8deg); }
.brand-copy { display: grid; gap: 1px; }.brand-copy small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1; }.brand-copy strong { max-width: 112px; overflow: hidden; color: var(--green); font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }.edit-name { margin-right: 2px; color: var(--orange); font-size: 10px; font-weight: 600; }
.balance { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.42); font-family: 'DM Mono', monospace; font-size: 12px; direction: ltr; }
.balance b { display: inline-flex; align-items: baseline; gap: 4px; color: var(--green); }.balance b small { font-family: Changa, sans-serif; font-size: 10px; }

.view { padding: 4px 20px 112px; animation: appear .35s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.eyebrow { margin: 16px 0 4px; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
h1, h2, h3, p { margin: 0; }
h1 { max-width: 390px; color: var(--green); font-size: clamp(30px, 8.5vw, 43px); line-height: 1.25; }
.game-title { font-size: clamp(28px, 7.5vw, 38px); }
h2 { color: var(--green); font-size: 24px; line-height: 1.35; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 28px 0 13px; }
.section-head p { color: var(--muted); font-size: 12px; }

.hero { position: relative; min-height: 250px; margin-top: 22px; padding: 24px; overflow: hidden; border-radius: 29px; background: var(--green); box-shadow: var(--shadow); }
.hero::before, .hero::after { position: absolute; content: ''; border-radius: 50%; background: rgba(237, 194, 83, .16); }
.hero::before { width: 220px; height: 220px; left: -85px; bottom: -108px; }
.hero::after { width: 150px; height: 150px; top: -82px; right: 44px; }
.hero-copy { position: relative; z-index: 1; max-width: 230px; }
.hero-copy h1 { font-size: 29px; }
.hero .eyebrow { color: var(--yellow); }
.hero h1 { color: var(--paper); }
.hero p { margin-top: 12px; color: rgba(246,240,231,.7); font-size: 13px; line-height: 1.9; }
.hero-plate { position: absolute; bottom: 11px; left: 12px; width: 170px; height: 170px; border: 14px solid rgba(246,240,231,.93); border-radius: 50%; background: #d58d3f; box-shadow: 0 8px 0 rgba(0,0,0,.15), inset 0 0 0 9px rgba(132,69,28,.2); }
.hero-plate::before { position: absolute; inset: 25px; content: ''; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f4bd54 0 12%, transparent 13%), radial-gradient(circle at 67% 30%, #aa4530 0 13%, transparent 14%), radial-gradient(circle at 40% 68%, #f0db85 0 17%, transparent 18%), radial-gradient(circle at 76% 68%, #5b7d47 0 13%, transparent 14%), #d97936; }
.hero-spark { position: absolute; z-index: 2; left: 160px; top: 32px; color: var(--yellow); font-size: 20px; transform: rotate(15deg); }

.dashboard { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 25px; background: #fffaf4; box-shadow: var(--shadow); }
.dashboard-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.dashboard-head strong { display: block; color: var(--green); font-size: 18px; }.dashboard-head p { margin-top: 2px; color: var(--muted); font-size: 11px; }.month-badge { padding: 7px 10px; border-radius: 11px; background: var(--mint); color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.summary-copy { margin-top: 17px; color: var(--ink); font-size: 14px; line-height: 2.05; }.summary-copy strong { color: var(--green); font-weight: 700; }
.daily-news { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--green); color: var(--paper); box-shadow: 0 7px 0 #0d3026, 0 18px 35px rgba(23,75,61,.14); }.news-heading { display: flex; align-items: center; gap: 10px; }.news-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: var(--yellow); font-size: 22px; }.news-heading h2 { color: var(--paper); font-size: 18px; }.news-heading small { display: block; margin-top: 1px; color: rgba(246,240,231,.62); font-size: 10px; }.daily-news > p { margin-top: 15px; color: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.95; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }.stat-card { min-height: 103px; padding: 13px; border-radius: 17px; background: var(--paper-deep); }.stat-card.highlight { background: var(--green); color: var(--paper); }.stat-label { display: block; margin-bottom: 11px; color: var(--muted); font-size: 10px; }.stat-card.highlight .stat-label { color: rgba(246,240,231,.64); }.stat-card strong { display: block; color: var(--green); font-family: 'DM Mono', Changa, sans-serif; font-size: 18px; line-height: 1.3; }.stat-card.highlight strong { color: var(--yellow); }.stat-card strong small { font-family: Changa, sans-serif; font-size: 10px; }.stat-detail { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }.stat-card.highlight .stat-detail { color: rgba(246,240,231,.64); }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-card { min-height: 112px; padding: 15px; text-align: right; border: 1px solid var(--line); border-radius: 21px; background: #fffaf4; transition: transform .2s, border-color .2s; }
.quick-card:not(.locked):active { transform: scale(.97); }
.quick-card .icon { display: grid; width: 35px; height: 35px; margin-bottom: 12px; place-items: center; border-radius: 12px; background: var(--mint); color: var(--green); font-size: 19px; }
.quick-card h3 { font-size: 15px; }
.quick-card p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.quick-card.locked { opacity: .52; cursor: not-allowed; }
.lock { float: left; color: var(--muted); font-size: 13px; }

.bottom-nav { position: fixed; z-index: 20; right: 50%; bottom: 0; display: grid; width: min(100%, 520px); grid-template-columns: repeat(5, 1fr); padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(250,246,239,.94); backdrop-filter: blur(16px); transform: translateX(50%); }
.nav-item { display: grid; gap: 2px; place-items: center; padding: 5px 0; background: transparent; color: var(--muted); font-size: 10px; }
.nav-item .nav-icon { display: grid; width: 28px; height: 26px; place-items: center; font-size: 19px; }
.nav-item.active { color: var(--green); font-weight: 700; }
.nav-item.active .nav-icon { transform: translateY(-2px); }
.nav-item.locked { opacity: .48; }

.car-card { position: relative; min-height: 220px; margin-top: 22px; overflow: hidden; border-radius: 28px; background: #bed4cb; }
.car-card::before { position: absolute; right: -20%; bottom: -30px; width: 145%; height: 105px; content: ''; border-radius: 50%; background: #8eb6a6; transform: rotate(-5deg); }
.car-sun { position: absolute; top: 24px; left: 28px; width: 48px; height: 48px; border-radius: 50%; background: #f4bf59; box-shadow: 0 0 0 12px rgba(244,191,89,.2); }
.car { position: absolute; z-index: 1; right: 50%; bottom: 37px; width: 230px; height: 82px; border-radius: 30px 42px 15px 15px; background: var(--orange); box-shadow: inset -8px -10px rgba(154,57,31,.19), 0 12px 0 rgba(37,70,57,.15); transform: translateX(50%); }
.car::before { position: absolute; top: -36px; right: 38px; width: 114px; height: 46px; content: ''; border-radius: 60px 55px 5px 5px; background: var(--orange); }
.car::after { position: absolute; top: -26px; right: 51px; width: 80px; height: 25px; content: ''; border-radius: 20px 27px 3px 3px; background: #6eaa9e; border: 4px solid var(--orange); }
.wheel { position: absolute; bottom: -15px; width: 38px; height: 38px; border: 9px solid var(--ink); border-radius: 50%; background: #a2a69c; }
.wheel.one { right: 30px; }.wheel.two { left: 30px; }
.car-label { position: absolute; z-index: 2; right: 17px; top: 12px; color: var(--paper); font-size: 11px; font-weight: 700; }
.route-title { margin: 24px 0 14px; font-size: 16px; font-weight: 700; }
.route-grid { display: grid; gap: 12px; }
.route-button { display: flex; align-items: center; gap: 15px; width: 100%; padding: 15px; text-align: right; border: 1px solid var(--line); border-radius: 19px; background: #fffaf4; }
.route-button:active { transform: scale(.985); }
.route-button .route-icon { display: grid; width: 47px; height: 47px; flex: 0 0 auto; place-items: center; border-radius: 15px; background: var(--mint); font-size: 24px; }
.route-button.market .route-icon { background: #f9dc9d; }.route-button strong { display: block; color: var(--green); font-size: 15px; }.route-button small { color: var(--muted); font-size: 11px; }
.arrow { margin-right: auto; color: var(--orange); font-size: 21px; }

.market-switch { display: flex; gap: 8px; padding: 5px; margin-top: 20px; overflow-x: auto; border-radius: 16px; background: var(--paper-deep); scrollbar-width: none; }.market-switch::-webkit-scrollbar { display: none; }
.market-tab, .availability-toggle { flex: 0 0 auto; min-width: 112px; padding: 10px 8px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; }.market-tab.active { background: #fffaf4; color: var(--green); font-weight: 700; box-shadow: 0 3px 12px rgba(42,49,41,.06); }.availability-toggle { min-width: 124px; color: var(--orange); font-weight: 700; }.availability-toggle.active { background: var(--green); color: var(--paper); box-shadow: 0 3px 12px rgba(42,49,41,.12); }
.market-banner { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px; border-radius: 20px; background: var(--green); color: var(--paper); }.market-banner .market-icon { font-size: 32px; }.market-banner strong { display: block; font-size: 17px; }.market-banner p { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 11px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.product { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: 21px; background: #fffaf4; text-align: right; }.product:active { transform: scale(.97); }.product-emoji { display: grid; height: 82px; place-items: center; margin-bottom: 10px; border-radius: 15px; background: #f3e7d5; font-size: 45px; }.product h3 { font-size: 14px; }.product p { margin-top: 2px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; direction: rtl; }.product .buy-hint { display: block; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line); color: var(--orange); font-size: 10px; font-weight: 700; }.stock { position: absolute; top: 23px; left: 12px; padding: 3px 6px; border-radius: 8px; background: var(--green); color: white; font-family: 'DM Mono', monospace; font-size: 9px; direction: ltr; }

.locked-page { display: grid; min-height: 65vh; place-items: center; text-align: center; }.locked-page .big-lock { display: grid; width: 75px; height: 75px; margin: 0 auto 18px; place-items: center; border-radius: 25px; background: var(--paper-deep); font-size: 34px; }.locked-page p { max-width: 245px; margin: 8px auto; color: var(--muted); font-size: 13px; line-height: 1.8; }

.travel-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; background: #102f27; color: var(--paper); animation: fade-in .25s ease both; }.travel-inner { width: min(85%, 350px); text-align: center; }.travel-road { position: relative; height: 100px; margin-bottom: 25px; overflow: hidden; border-radius: 18px; background: linear-gradient(#a1c6b3 0 47%, #4d7668 48% 100%); }.travel-road::after { position: absolute; right: 0; bottom: 17px; width: 100%; height: 5px; content: ''; background: repeating-linear-gradient(90deg, transparent 0 35px, #f5d878 35px 70px); }.travel-car { position: absolute; z-index: 2; right: 50%; bottom: 23px; width: 85px; height: 32px; border-radius: 16px 20px 5px 5px; background: var(--orange); transform: translateX(50%); }.travel-overlay.moving .travel-car { animation: drive 2.2s ease-in-out infinite alternate; }.travel-car::before { position: absolute; right: 16px; top: -14px; width: 40px; height: 17px; content: ''; border-radius: 14px 13px 0 0; background: var(--orange); }.travel-car::after { position: absolute; right: 23px; top: -9px; width: 25px; height: 8px; content: ''; border-radius: 5px; background: #86b9ad; }.travel-copy { font-size: 18px; }.travel-sub { margin-top: 7px; color: rgba(255,255,255,.6); font-size: 12px; }.countdown { display: grid; width: 64px; height: 64px; margin: 23px auto 0; place-items: center; border: 2px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-family: 'DM Mono', monospace; font-size: 22px; }
@keyframes drive { from { transform: translateX(calc(50% + 125px)); } to { transform: translateX(calc(50% - 125px)); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.toast { position: fixed; z-index: 70; right: 50%; bottom: 91px; width: max-content; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 14px; background: var(--ink); color: white; font-size: 12px; box-shadow: var(--shadow); transform: translateX(50%); animation: toast-in .25s ease both; }.toast.out { animation: toast-out .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(50%, 10px); } to { opacity: 1; transform: translate(50%, 0); } } @keyframes toast-out { to { opacity: 0; transform: translate(50%, 10px); } }
.dialog-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(16,47,39,.72); }.purchase-dialog { position: relative; width: min(100%, 380px); max-height: calc(100svh - 36px); overflow-y: auto; padding: 25px 21px 21px; border-radius: 25px; background: var(--paper); box-shadow: 0 24px 70px rgba(0,0,0,.25); }.dialog-close { position: absolute; top: 12px; left: 12px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--paper-deep); color: var(--green); font-size: 23px; line-height: 1; }.dialog-icon { display: grid; width: 60px; height: 60px; margin-bottom: 14px; place-items: center; border-radius: 18px; background: #f3e7d5; font-size: 35px; }.purchase-dialog h2 { font-size: 22px; }.purchase-dialog > p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.8; }.purchase-dialog label { display: block; margin-top: 19px; color: var(--green); font-size: 12px; font-weight: 700; }.purchase-dialog input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fffaf4; color: var(--ink); font: 600 17px 'DM Mono', monospace; direction: ltr; }.dialog-total { color: var(--green) !important; font-weight: 700; }.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }.dialog-actions button { padding: 12px; border-radius: 13px; font-size: 13px; font-weight: 700; }.dialog-secondary { background: var(--paper-deep); color: var(--green); }.dialog-primary { background: var(--green); color: var(--paper); }.purchase-dialog form { display: none; }
@media (min-width: 600px) { .app-shell { min-height: 880px; margin-top: 20px; border-radius: 32px; box-shadow: 0 20px 65px rgba(34,32,24,.13); } .bottom-nav { bottom: 20px; border-radius: 22px; } }

/* Launch layer and vertical navigation */
body { background: radial-gradient(circle at 15% 15%, #f9cf75 0 2%, transparent 3%), linear-gradient(135deg, #d9d1c2, #c8d7ca); }
.app-shell { isolation: isolate; background: linear-gradient(180deg, #fffaf3 0%, var(--paper) 42%, #f0e6d9 100%); }
.game-world { position: relative; min-height: 100svh; opacity: .06; transform: scale(.975); filter: blur(5px); pointer-events: none; transition: opacity .55s ease, transform .75s cubic-bezier(.2,.9,.2,1), filter .65s ease; }
.game-world.revealed { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.game-world.revealed .topbar { animation: slide-down .55s .08s both cubic-bezier(.2,.9,.2,1); }
.game-title { direction: rtl; text-align: right; letter-spacing: -.045em; animation: title-pop .7s .12s both cubic-bezier(.2,1.35,.3,1); }
.title-kicker { margin-top: 18px; color: var(--orange); direction: rtl; font: 700 11px Changa, sans-serif; letter-spacing: .03em; animation: fade-up .55s .06s both; }
.game-world.revealed .dashboard { animation: card-pop .65s .22s both cubic-bezier(.2,.9,.2,1); }
.game-world.revealed .section-head { animation: fade-up .55s .32s both; }
.dashboard { position: relative; overflow: hidden; transform: translateZ(0); box-shadow: 0 7px 0 #d9ccbb, 0 18px 35px rgba(53,48,37,.12); }
.dashboard::after { position: absolute; right: -22px; top: -34px; width: 100px; height: 100px; content: '✦'; color: rgba(236,114,68,.18); font: 52px/100px Georgia, serif; transform: rotate(18deg); animation: twinkle 2.5s infinite ease-in-out; }
.main-menu { display: grid; gap: 11px; margin: 0 20px 34px; }
.main-menu .nav-item { position: relative; display: grid; grid-template-columns: 48px 1fr 22px; align-items: center; width: 100%; min-height: 63px; padding: 8px 15px 8px 11px; border: 1px solid rgba(32,40,39,.1); border-radius: 19px; background: linear-gradient(145deg, #fffdf9, #f1e5d6); box-shadow: 0 8px 0 #d8cabb, 0 18px 25px rgba(53,48,37,.08), inset 0 1px 0 rgba(255,255,255,.95); color: var(--green); text-align: right; font-size: 15px; font-weight: 700; transform: perspective(700px) rotateX(0deg) translateZ(0); transform-style: preserve-3d; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.main-menu .nav-item.active { border-color: transparent; background: linear-gradient(145deg, #236957, #123f33); color: var(--paper); box-shadow: 0 9px 0 #0d3026, 0 19px 30px rgba(23,75,61,.2), inset 0 1px 0 rgba(255,255,255,.18); }
.main-menu .nav-item.locked { opacity: .58; }
.main-menu .nav-item:hover { transform: perspective(700px) rotateX(5deg) translateY(-4px) translateZ(5px); box-shadow: 0 12px 0 #d8cabb, 0 24px 30px rgba(53,48,37,.12), inset 0 1px 0 rgba(255,255,255,.95); }
.main-menu .nav-item:active { transform: perspective(700px) rotateX(0deg) translateY(5px) scale(.985); box-shadow: 0 3px 0 #d8cabb; }
.main-menu .nav-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--mint); color: var(--green); font-size: 22px; }
.main-menu .nav-item.active .nav-icon { background: rgba(246,240,231,.15); color: var(--yellow); }
.main-menu .nav-item:nth-child(1) { animation: menu-rise .58s .38s both cubic-bezier(.2,1.3,.3,1); }
.main-menu .nav-item:nth-child(2) { animation: menu-rise .58s .47s both cubic-bezier(.2,1.3,.3,1); }
.main-menu .nav-item:nth-child(3) { animation: menu-rise .58s .56s both cubic-bezier(.2,1.3,.3,1); }
.main-menu .nav-item:nth-child(4) { animation: menu-rise .58s .65s both cubic-bezier(.2,1.3,.3,1); }
.main-menu .nav-item:nth-child(5) { animation: menu-rise .58s .74s both cubic-bezier(.2,1.3,.3,1); }
.view { padding-bottom: 30px; }
.eyebrow, .route-title, .market-switch, .market-banner, .product-grid, .locked-page { animation: fade-up .45s both; }
.route-button, .product, .market-tab { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.route-button, .product, .market-banner, .car-card { transform-style: preserve-3d; box-shadow: 0 7px 0 #d8cabb, 0 16px 25px rgba(53,48,37,.08), inset 0 1px 0 rgba(255,255,255,.85); }
.route-button:hover, .product:hover { border-color: rgba(236,114,68,.45); box-shadow: 0 11px 0 #d8cabb, 0 22px 28px rgba(53,48,37,.12); transform: perspective(700px) rotateX(4deg) translateY(-3px); }
.market-banner { box-shadow: 0 8px 0 #10372d, 0 18px 28px rgba(23,75,61,.16), inset 0 1px 0 rgba(255,255,255,.15); }
.car-card { box-shadow: 0 8px 0 #7ba18f, 0 18px 28px rgba(53,48,37,.14), inset 0 1px 0 rgba(255,255,255,.5); transform: perspective(900px) rotateX(2deg); }

.intro-screen { position: absolute; z-index: 100; inset: 0; display: grid; min-height: 100svh; place-items: center; overflow: hidden; background: #f4bd54; color: var(--green); animation: intro-in .5s ease both; }
.intro-screen::before { position: absolute; inset: 0; content: ''; opacity: .65; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.16) 19px 20px, transparent 21px 42px); transform: translateX(-30%); animation: scan 8s linear infinite; }
.intro-noise { position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(rgba(32,40,39,.7) .7px, transparent .8px); background-size: 7px 7px; mix-blend-mode: multiply; }
.intro-orbit { position: absolute; border: 2px solid rgba(23,75,61,.2); border-radius: 50%; animation: orbit 12s linear infinite; }
.orbit-one { width: 360px; height: 360px; right: -150px; top: -75px; }
.orbit-two { width: 230px; height: 230px; left: -120px; bottom: -60px; animation-direction: reverse; animation-duration: 9s; }
.intro-content { position: relative; z-index: 1; width: min(86%, 400px); padding: 28px 22px 26px; border: 2px solid rgba(23,75,61,.22); border-radius: 31px; background: linear-gradient(145deg, rgba(255,253,247,.96), rgba(241,229,214,.92)); box-shadow: 0 16px 0 rgba(23,75,61,.2), 0 30px 70px rgba(23,75,61,.2), inset 0 1px 0 rgba(255,255,255,.9); text-align: center; direction: rtl; transform-style: preserve-3d; animation: intro-card .75s .15s both cubic-bezier(.15,1.2,.3,1); }
.intro-stamp { display: inline-block; padding: 6px 9px; border-radius: 8px; background: var(--green); color: var(--yellow); font: 700 10px Changa, sans-serif; letter-spacing: .02em; transform: rotate(-2deg); animation: stamp-wiggle 3s 1s infinite ease-in-out; }
.intro-emoji { margin: 13px auto 3px; font-size: 54px; line-height: 1; filter: drop-shadow(0 7px 0 rgba(23,75,61,.14)); animation: burger-bounce 1.7s infinite ease-in-out; }
.intro-mini { color: var(--orange); font: 700 11px Changa, sans-serif; letter-spacing: .04em; }
.intro-content h1 { margin-top: 6px; color: var(--green); font: 700 clamp(27px, 7vw, 39px)/1.15 Changa, sans-serif; letter-spacing: -.05em; }
.intro-content h1 span { color: var(--orange); }
.intro-restaurant { margin: 16px auto 0; direction: rtl; color: var(--green); font-size: 15px; font-weight: 700; }
.intro-saying { margin: 15px 0 19px; color: var(--muted); font: 600 15px/1.6 Changa, sans-serif; transform: rotate(-1deg); }
.intro-start { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 15px 16px; border-radius: 16px; background: var(--green); color: var(--paper); font: 700 16px Changa, sans-serif; box-shadow: 0 7px 0 #0d3026; transition: transform .15s ease, box-shadow .15s ease; }
.intro-start span { color: var(--yellow); animation: twinkle 1.1s infinite ease-in-out; }
.intro-start:hover { transform: translateY(-2px) rotate(-.5deg); }
.intro-start:active { transform: translateY(5px); box-shadow: 0 2px 0 #0d3026; }
.intro-dont { margin-top: 13px; padding: 4px 8px; background: transparent; color: var(--muted); font: 500 11px Changa, sans-serif; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 4px; }
.intro-dont:hover { color: var(--orange); }

@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-card { from { opacity: 0; transform: translateY(35px) rotate(3deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes menu-rise { from { opacity: 0; transform: translateY(22px) scale(.92) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes title-pop { from { opacity: 0; transform: translateX(-22px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(18px) rotate(.8deg); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes burger-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes stamp-wiggle { 0%, 90%, 100% { transform: rotate(-2deg); } 94% { transform: rotate(3deg) scale(1.05); } 97% { transform: rotate(-4deg); } }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: rotate(18deg) scale(.9); } 50% { opacity: 1; transform: rotate(-8deg) scale(1.12); } }
@keyframes scan { to { transform: translateX(30%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Minimal monochrome mode */
:root {
  --paper: #fff;
  --paper-deep: #f1f1f1;
  --ink: #000;
  --muted: #555;
  --green: #000;
  --green-2: #000;
  --mint: #f1f1f1;
  --orange: #000;
  --yellow: #fff;
  --line: #000;
  --shadow: none;
}
html, body { background: #000; color: #000; }
.app-shell { background: #fff; perspective: none; }
.topbar { border-bottom: 1px solid #000; }
.brand-dot { border-radius: 0; background: #000; color: #fff; transform: none; }
.brand-copy strong, .edit-name, .balance b { color: #000; }
.balance { border: 0; border-right: 1px solid #000; border-radius: 0; background: transparent; }
.view { padding-bottom: 32px; }
.section-screen .view { padding-bottom: 120px; }
.title-kicker { color: #000; }
.game-title, h2, .dashboard-head strong, .route-button strong, .product h3 { color: #000; }
.dashboard { border: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; border-radius: 0; background: transparent; box-shadow: none; }
.dashboard::after { display: none; }
.main-menu { gap: 0; margin: 15px 20px 35px; }
.main-menu .nav-item { min-height: 65px; border: 0; border-bottom: 1px solid #000; border-radius: 0; background: #fff; box-shadow: none; color: #000; transform: none; transition: background .15s ease, color .15s ease, padding .15s ease; }
.main-menu .nav-item::after { display: none; content: none; }
.main-menu .nav-item.active { background: #000; color: #fff; box-shadow: none; }
.main-menu .nav-item:hover, .main-menu .nav-item:active { transform: none; box-shadow: none; padding-right: 20px; }
.main-menu .nav-item.locked { opacity: .5; }
.main-menu .nav-item.locked::after { display: none; content: none; }
.main-menu .nav-icon, .main-menu .nav-item.active .nav-icon { width: auto; height: auto; border-radius: 0; background: transparent; color: inherit; font-size: 19px; }
.bottom-nav { right: 50%; border-top: 1px solid #000; border-radius: 0; background: #fff; box-shadow: none; backdrop-filter: none; }
.bottom-nav .nav-item { border-radius: 0; background: transparent; color: #000; }
.bottom-nav .nav-item.active { background: #000; color: #fff; }
.bottom-nav .nav-item .nav-icon { color: inherit; }
.route-button, .product, .market-banner, .car-card { border-radius: 0; box-shadow: none; transform: none; }
.route-button { background: #fff; border-color: #000; }
.route-button:hover, .product:hover { box-shadow: none; transform: none; }
.route-button .route-icon, .product-emoji { border-radius: 0; background: #f1f1f1; filter: grayscale(1); }
.market-switch { border-radius: 0; background: #f1f1f1; }
.market-tab, .availability-toggle { border-radius: 0; }
.market-tab.active { background: #000; color: #fff; box-shadow: none; }
.availability-toggle.active { background: #000; color: #fff; box-shadow: none; }
.market-banner { background: #000; color: #fff; }
.market-banner p { color: #fff; }
.stock { border-radius: 0; background: #000; color: #fff; }
.car-card { background: #f1f1f1; }
.car-card::before { background: #d8d8d8; }
.car-sun { background: #000; box-shadow: none; }
.car, .car::before { background: #000; box-shadow: none; }
.car::after { background: #fff; border-color: #000; }
.wheel { border-color: #000; background: #fff; }
.travel-overlay { background: #fff; color: #000; }
.travel-road { background: #fff; border: 1px solid #000; }
.travel-road::after { background: repeating-linear-gradient(90deg, transparent 0 35px, #000 35px 70px); }
.travel-car, .travel-car::before { background: #000; }
.travel-car::after { background: #fff; }
.countdown { border-color: #000; color: #000; }
.intro-screen { background: #fff; color: #000; }
.intro-screen::before, .intro-noise, .intro-orbit, .intro-emoji { display: none; }
.intro-content { width: min(90%, 430px); padding: 25px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: fade-up .5s ease both; }
.intro-stamp { border-radius: 0; background: #000; color: #fff; transform: none; animation: none; }
.intro-content h1, .intro-content h1 span, .intro-restaurant, .intro-mini, .intro-saying { color: #000; }
.intro-start { border-radius: 0; background: #000; color: #fff; box-shadow: none; }
.intro-start:hover, .intro-start:active { transform: none; box-shadow: none; }
.intro-dont { color: #000; text-decoration: none; }
.toast { border-radius: 0; background: #000; color: #fff; box-shadow: none; }
.dialog-backdrop { background: rgba(0,0,0,.8); }
.purchase-dialog { border-radius: 0; background: #fff; box-shadow: none; }
.dialog-close, .dialog-secondary, .dialog-primary, .dialog-icon, .purchase-dialog input { border-radius: 0; }
.dialog-close, .dialog-secondary, .dialog-icon { background: #f1f1f1; color: #000; }
.dialog-primary { background: #000; color: #fff; }
.purchase-dialog form { display: block; }
.product-emoji, .market-icon, .route-icon { filter: grayscale(1); }

/* Tactile feedback and shared dialog surface */
button:active:not(:disabled) { filter: brightness(.96) saturate(1.08); }
.click-mark { position: fixed; z-index: 220; pointer-events: none; color: #ec7244; font: 700 22px/1 Georgia, serif; text-shadow: 0 2px 0 rgba(23,75,61,.12); transform: translate(-50%, -50%) rotate(var(--mark-angle)) scale(var(--mark-scale)); animation: click-mark-pop .52s cubic-bezier(.2,.8,.2,1) both; }
.dialog-backdrop { background: radial-gradient(circle at 50% 35%, rgba(245,191,82,.18), transparent 38%), rgba(16,47,39,.76); backdrop-filter: blur(8px); }
.purchase-dialog { overflow: hidden; border: 1px solid rgba(23,75,61,.14); background: linear-gradient(145deg, #fffdf9 0%, #f3e7d7 100%); box-shadow: 0 17px 0 rgba(13,48,38,.18), 0 28px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.92); }
.purchase-dialog::before { position: absolute; right: -34px; top: -46px; width: 142px; height: 142px; content: '✦'; color: rgba(236,114,68,.16); font: 76px/142px Georgia, serif; transform: rotate(17deg); pointer-events: none; }
.purchase-dialog h2, .purchase-dialog > p, .purchase-dialog form { position: relative; z-index: 1; }
.purchase-dialog h2 { color: var(--green); }
.purchase-dialog > p { color: var(--muted); }
.dialog-close { z-index: 2; background: #f7d995; color: var(--green); box-shadow: 0 3px 0 rgba(23,75,61,.16); }
.dialog-icon { background: var(--mint); box-shadow: 0 5px 0 rgba(23,75,61,.14); }
.rename-icon { color: var(--orange); font-size: 30px; }
.purchase-dialog input { border-color: rgba(23,75,61,.2); background: rgba(255,255,255,.72); }
.dialog-secondary { background: #eadfce; color: var(--green); }
.dialog-primary { background: linear-gradient(145deg, #236957, #123f33); color: var(--paper); box-shadow: 0 4px 0 #0d3026; }
.dialog-actions button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(13,48,38,.35); }
@keyframes click-mark-pop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--mark-angle)) scale(.35); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 17px)) rotate(calc(var(--mark-angle) + 12deg)) scale(var(--mark-scale)); } }

/* Recipes and kitchen */
.page-note { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.recipe-grid { display: grid; gap: 12px; margin-top: 20px; }
.recipe-card { display: grid; grid-template-columns: 62px 1fr 22px; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-align: right; box-shadow: 0 5px 0 #ddd5ca; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.recipe-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 8px 0 #ddd5ca; }
.weird-recipe-button { display: grid; grid-template-columns: 35px 1fr 20px; grid-template-rows: auto auto; align-items: center; gap: 0 10px; width: 100%; margin-top: 16px; padding: 13px; border: 1px dashed var(--orange); border-radius: 17px; background: transparent; text-align: right; }.weird-recipe-button > span { grid-row: 1 / 3; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: #f7d995; color: var(--orange); font-size: 20px; }.weird-recipe-button strong { color: var(--ink); font-size: 13px; }.weird-recipe-button small { color: var(--muted); font-size: 9px; }.weird-recipe-button b { grid-column: 3; grid-row: 1 / 3; color: var(--orange); font-size: 20px; }.custom-recipe-card { border-right: 4px solid var(--orange); }
.recipe-art, .detail-emoji, .stock-dish-emoji { display: grid; place-items: center; border-radius: 16px; background: var(--paper-deep); font-size: 35px; }
.recipe-art { width: 62px; height: 62px; }
.recipe-copy { display: grid; gap: 3px; min-width: 0; }
.recipe-copy strong { color: var(--ink); font-size: 16px; }
.recipe-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; }
.recipe-copy em { color: var(--orange); font-size: 10px; font-style: normal; font-weight: 700; }
.recipe-arrow, .primary-wide span { color: var(--orange); font-size: 20px; }
.back-link { margin-top: 14px; padding: 3px 0; background: transparent; color: var(--muted); font-size: 12px; }
.recipe-detail-hero { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.detail-emoji { flex: 0 0 84px; width: 84px; height: 84px; font-size: 47px; }
.recipe-detail-hero h2 { margin-top: 1px; }
.recipe-detail-hero p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.prep-card, .ingredients-card, .ingredient-picker, .kitchen-bowl { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 5px 0 #ddd5ca; }
.prep-card { border-right: 4px solid var(--orange); }
.prep-card h3, .card-title h3 { color: var(--ink); font-size: 15px; }
.prep-card p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 2; }
.card-title, .bowl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title span, .bowl-top span { color: var(--orange); font-size: 10px; font-weight: 700; }
.recipe-ingredient-list { display: grid; gap: 7px; margin-top: 12px; }
.recipe-ingredient { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; }
.recipe-ingredient span { font-size: 18px; }.recipe-ingredient b { color: var(--orange); font-size: 10px; }
.additions-card { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 5px 0 #ddd5ca; }.addition-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.addition-list span { padding: 6px 9px; border-radius: 10px; background: var(--paper-deep); color: var(--ink); font-size: 11px; }
.primary-wide { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 18px; padding: 13px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; box-shadow: 0 5px 0 #777; }
.primary-wide:active { transform: translateY(3px); box-shadow: 0 2px 0 #777; }
.kitchen-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.small-outline { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-size: 10px; }
.kitchen-step-prompt { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 0 9px; margin-top: 18px; padding: 12px; border-right: 4px solid var(--orange); background: var(--paper-deep); }.kitchen-step-prompt span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--orange); color: var(--paper); font-weight: 700; }.kitchen-step-prompt strong { font-size: 13px; }.kitchen-step-prompt small { color: var(--muted); font-size: 10px; }.selected-vessel { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-deep); }.selected-vessel > span { font-size: 25px; }.selected-vessel strong { flex: 1; font-size: 12px; }
.kitchen-empty { padding-top: 75px; text-align: center; }.kitchen-empty .kitchen-icon { font-size: 52px; }.kitchen-empty .eyebrow { margin-top: 15px; }.kitchen-empty p { margin: 8px auto 0; max-width: 300px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.kitchen-empty .primary-wide { max-width: 260px; margin: 19px auto 0; }
.vessel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.vessel-card { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 9px; min-height: 82px; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); text-align: right; box-shadow: 0 4px 0 #ddd5ca; }
.vessel-card.selected { border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }.vessel-card.recommended::after { position: absolute; left: 8px; top: 7px; content: '✓'; color: var(--orange); font-weight: 700; }.vessel-card strong { font-size: 14px; }.vessel-card small { color: var(--muted); font-size: 9px; }.vessel-card em { grid-column: 1 / -1; color: var(--orange); font-size: 9px; font-style: normal; font-weight: 700; }.vessel-icon { grid-row: 1 / 3; display: grid; place-items: center; height: 42px; border-radius: 12px; background: var(--paper-deep); font-size: 31px; }.pan-icon { transform: rotate(-8deg); }
.kitchen-bowl { min-height: 124px; background: repeating-linear-gradient(135deg, var(--paper) 0 13px, var(--paper-deep) 14px 15px); }.bowl-ingredients { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 65px; margin-top: 11px; }.bowl-placeholder { width: 100%; color: var(--muted); font-size: 11px; text-align: center; }.added-ingredient { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 11px; }.added-ingredient span { font-size: 18px; }.added-ingredient small { color: var(--orange); font-size: 9px; }
.ingredient-picker { padding-bottom: 12px; }.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }.picker-item { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 0 5px; min-height: 56px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); text-align: right; }.picker-item.needed { border-right: 3px solid var(--orange); }.picker-item.wild { opacity: .65; }.picker-item:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .38; }.picker-emoji { grid-row: 1 / 3; font-size: 19px; }.picker-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.picker-item small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.appliance-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; padding-bottom: 13px; }.appliance-button { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 2px 6px; min-height: 70px; padding: 9px; border-radius: 13px; background: var(--ink); color: var(--paper); text-align: right; box-shadow: 0 5px 0 #777; }.appliance-button span { grid-row: 1 / 3; font-size: 21px; }.appliance-button strong { font-size: 10px; line-height: 1.35; }.appliance-button small { color: #bbb; font-size: 8px; }.appliance-button:disabled { cursor: not-allowed; background: var(--paper-deep); color: var(--muted); box-shadow: none; opacity: .55; }.appliance-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #777; }
.cooking-banner { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--ink); color: var(--paper); }.cooking-banner > div:nth-child(2) { display: grid; gap: 2px; flex: 1; }.cooking-banner strong { font-size: 12px; }.cooking-banner small { color: #bbb; font-size: 9px; }.heat-spinner { animation: heat-pulse .8s infinite alternate; color: var(--orange); font-size: 25px; }.cooking-clock { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #777; border-radius: 50%; font: 12px 'DM Mono', monospace; }.stock-grid { display: grid; gap: 10px; margin-top: 18px; }.stock-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: 0 4px 0 #ddd5ca; }.stock-dish-emoji { width: 52px; height: 52px; font-size: 29px; }.stock-card strong { font-size: 13px; }.stock-card p { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.55; }.stock-count { align-self: start; color: var(--orange); font: 700 12px 'DM Mono', monospace; direction: ltr; }.weird-dish { border-right: 4px solid var(--orange); }.empty-stock { padding: 28px 14px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); font-size: 12px; text-align: center; }
.customer-empty { padding: 62px 10px; text-align: center; }.customer-empty .customer-icon { display: grid; width: 76px; height: 76px; margin: 0 auto 18px; place-items: center; border-radius: 24px; background: var(--mint); color: var(--green); font-size: 38px; }.customer-empty p { max-width: 270px; margin: 9px auto 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.customer-empty .primary-wide { max-width: 260px; margin-right: auto; margin-left: auto; }.customer-order-card { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 21px; background: #fffaf4; box-shadow: 0 7px 0 #d8cabb, 0 16px 25px rgba(53,48,37,.08); }.customer-avatar { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border-radius: 17px; background: #f9dc9d; font-size: 29px; }.customer-copy { min-width: 0; }.customer-copy strong { display: block; color: var(--green); font-size: 14px; }.customer-copy p { margin-top: 7px; font-size: 13px; }.customer-copy p b { color: var(--orange); }.customer-copy .order-addition-line { margin-top: 2px; color: var(--muted); font-size: 11px; }.customer-copy small { display: block; margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.6; }.customer-actions, .serve-actions { display: grid; gap: 10px; margin-top: 18px; }.customer-actions .small-outline, .serve-actions .small-outline { width: 100%; padding: 12px; }.serve-plate { display: grid; justify-items: center; gap: 5px; margin-top: 20px; padding: 20px 15px; border-radius: 22px; background: var(--green); color: var(--paper); box-shadow: 0 7px 0 #0d3026; text-align: center; }.serve-plate > span { font-size: 54px; }.serve-plate strong { font-size: 15px; }.serve-plate small { color: rgba(246,240,231,.66); font-size: 10px; }.order-additions { margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }.order-addition { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line); }.order-addition:first-of-type { margin-top: 10px; }.order-addition > span { font-size: 24px; }.order-addition > div { display: grid; flex: 1; gap: 2px; }.order-addition strong { font-size: 12px; }.order-addition small { color: var(--muted); font-size: 9px; }.addition-done { color: var(--green); font-size: 18px; }.primary-wide:disabled, .small-outline:disabled { cursor: not-allowed; opacity: .4; }
.addition-options { display: grid; gap: 8px; margin-top: 17px; }.addition-option { display: flex !important; align-items: center; gap: 9px; margin-top: 0 !important; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fffaf4; }.addition-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }.addition-option span { font-size: 20px; }.addition-option strong { font-size: 12px; }
@keyframes heat-pulse { from { transform: translateY(2px) scale(.9); opacity: .6; } to { transform: translateY(-2px) scale(1.08); opacity: 1; } }
@media (max-width: 370px) { .picker-grid { grid-template-columns: 1fr; }.recipe-card { grid-template-columns: 53px 1fr 16px; gap: 8px; }.recipe-art { width: 53px; height: 53px; }.appliance-button { grid-template-columns: 1fr; }.appliance-button span { grid-row: auto; } }