:root {
  --u: 2px;
  --fs: 1;
  --fu: calc(var(--u) * var(--fs));
  --ink: #23201c;
  --paper: #f5fdf0;
  --green: #99ff6d;
  --cash: #a1fb68;
  --gold: #f6ff99;
  --red: #f16373;
  --o: calc(var(--u) * 1);
  --outline: var(--o) 0 var(--ink), calc(-1 * var(--o)) 0 var(--ink), 0 var(--o) var(--ink), 0 calc(-1 * var(--o)) var(--ink),
             var(--o) var(--o) var(--ink), calc(-1 * var(--o)) calc(-1 * var(--o)) var(--ink), var(--o) calc(-1 * var(--o)) var(--ink), calc(-1 * var(--o)) var(--o) var(--ink);
  --reach: 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #14120f; overflow: hidden; color: #fff; font-family: 'Pixelify Sans', monospace; font-variant-ligatures: none; user-select: none; -webkit-font-smoothing: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.center { text-align: center; }
.pos { color: var(--green); }
.neg { color: var(--red); }

#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(640 * var(--u)); height: calc(360 * var(--u)); overflow: hidden; background: #a08b52; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; cursor: none; }
#stage.panel-open #game { cursor: default; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(20,14,6,0.45) 100%); }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 15; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--fu) * 16); text-shadow: var(--outline); background: #a08b52; z-index: 50; }

/* ---------- cursor ---------- */
#cursor { position: absolute; z-index: 30; pointer-events: none; display: none; }
#cursor.on { display: block; }
#stage.panel-open #cursor { display: none; }
#cursor .dot { position: absolute; width: calc(var(--u) * 4); height: calc(var(--u) * 4); left: calc(var(--u) * -2); top: calc(var(--u) * -2); background: #fff; border: var(--u) solid var(--ink); border-radius: 50%; }
#cursor .ring { position: absolute; --r: max(calc(var(--reach) * var(--u)), calc(var(--u) * 7)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); border: var(--u) solid rgba(255,255,255,0.75); border-radius: 50%; opacity: 0; }
#cursor.tap .ring { animation: tapRing 0.25s ease-out; }
@keyframes tapRing { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.15); } }

/* ---------- HUD shared ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: calc(var(--u) * 5); left: calc(var(--u) * 8); display: flex; gap: calc(var(--u) * 10); align-items: flex-start; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.pill { background: #7d7e76; border-radius: calc(var(--u) * 10); box-shadow: 0 calc(var(--u) * 3) 0 #4d4e48; display: flex; align-items: center; border: 0; }
#moneyWrap { position: relative; }
#moneyPill { padding: calc(var(--u) * 2) calc(var(--u) * 10); min-width: calc(var(--u) * 92); justify-content: flex-end; gap: calc(var(--u) * 4); font-size: calc(var(--fu) * 16); font-weight: 700; text-shadow: var(--outline); }
#moneyPill .tag { margin-right: auto; font-size: calc(var(--fu) * 7); padding: 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,0.25); text-shadow: none; }
#moneyPill.run { background: #8d7b3a; box-shadow: 0 calc(var(--u) * 3) 0 #5c4f22; }
#moneyPill.run .tag { color: #ffe08a; }
#moneyPill.bank .tag { color: #a9e6ff; }
#moneyPill .dollar { color: var(--gold); }
#income { position: absolute; top: calc(var(--u) * 24); right: calc(var(--u) * 6); display: flex; flex-direction: column; align-items: flex-end; font-size: calc(var(--fu) * 11); font-weight: 700; color: var(--cash); text-shadow: var(--outline); pointer-events: none; }
#income div { animation: incomeIn 1.6s ease-out forwards; }
#income div.neg { color: var(--red); }
@keyframes incomeIn { 0% { transform: translateX(calc(var(--u) * -6)) scale(1.3); opacity: 1; } 15% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#toolbar { padding: calc(var(--u) * 1) calc(var(--u) * 8); gap: calc(var(--u) * 7); }
#toolbar button { position: relative; background: none; border: 0; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 6); }
#toolbar button.active { background: rgba(255,255,255,0.18); }
#toolbar button:hover .ico { transform: translateY(calc(var(--u) * -1)); }
.ico { display: block; width: calc(var(--u) * 24); height: calc(var(--u) * 22); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
.badge { position: absolute; right: calc(var(--u) * -4); top: calc(var(--u) * -3); background: var(--red); color: #fff; font-size: calc(var(--fu) * 8); border-radius: calc(var(--u) * 5); padding: 0 calc(var(--u) * 3); text-shadow: none; border: var(--u) solid var(--ink); display: none; }
.badge.on { display: block; }
.bump { animation: bump 0.25s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

#leftdock { position: absolute; left: calc(var(--u) * 6); bottom: calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 4); align-items: flex-start; }
.widget { background: #7d7e76; border: 0; border-radius: calc(var(--u) * 6); box-shadow: 0 calc(var(--u) * 2) 0 #4d4e48; padding: calc(var(--u) * 3) calc(var(--u) * 8); font-size: calc(var(--fu) * 9); font-weight: 700; text-shadow: var(--outline); display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; }
.widget .lbl { color: var(--gold); }
#freeBtn { flex-wrap: wrap; width: calc(var(--u) * 100); row-gap: calc(var(--u) * 2); }
#freeBtn .lbl { color: var(--green); }
#freeBtn .bar { flex-basis: 100%; height: calc(var(--u) * 3); background: #4d4e48; border-radius: var(--u); overflow: hidden; }
#freeBtn .bar i { display: block; height: 100%; background: var(--green); }
#openerW[data-status="broke"] { background: #b0584f; }
#openerW[data-status="break"] { opacity: 0.8; }
#sleeveW .lbl { color: #ffb36b; }
#queueW.full { background: #b0584f; }
#sleeveW.out { background: #6a5550; }
.mini, .btn { background: var(--paper); color: var(--ink); border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 2) 0 var(--ink); font-weight: 700; text-shadow: none; }
.mini { font-size: calc(var(--fu) * 8); padding: 0 calc(var(--u) * 4); }
.btn { font-size: calc(var(--fu) * 9); padding: calc(var(--u) * 2) calc(var(--u) * 7); }
.btn:active:not(:disabled), .mini:active:not(:disabled) { transform: translateY(calc(var(--u) * 2)); box-shadow: none; }
.btn.poor { background: #c9c3b8; color: #a3392f; }
.btn.danger { background: #f3b0a8; }
.btn.big { font-size: calc(var(--fu) * 11); }
.btn.go { background: var(--green); font-size: calc(var(--fu) * 11); }
.btn:disabled, .mini:disabled { opacity: 0.45; cursor: default; }
.shake { animation: shake 0.3s; }
@keyframes shake { 20%, 60% { transform: translateX(calc(var(--u) * -3)); } 40%, 80% { transform: translateX(calc(var(--u) * 3)); } }

#hint { position: absolute; left: 50%; bottom: calc(var(--u) * 10); transform: translateX(-50%); font-size: calc(var(--fu) * 11); text-shadow: var(--outline); opacity: 0; transition: opacity 0.4s; pointer-events: none !important; white-space: nowrap; }
#hint.show { opacity: 1; animation: hintBob 1.2s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translate(-50%, calc(var(--u) * -3)); } }
#toasts { position: absolute; left: 50%; top: calc(var(--u) * 42); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); z-index: 35; pointer-events: none; }
.toast { background: #3b3a36; border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 3) calc(var(--u) * 8); font-size: calc(var(--fu) * 9); text-shadow: var(--outline); animation: toastIn 0.3s ease-out; transition: opacity 0.5s, transform 0.5s; white-space: nowrap; }
.toast.gem { background: #8a6d1f; } .toast.mint { background: #2d6b65; }
.toast.out { opacity: 0; transform: translateY(calc(var(--u) * -10)); }
@keyframes toastIn { from { transform: translateY(calc(var(--u) * -14)); opacity: 0; } }

/* ---------- home HUD ---------- */
#rankPill { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 10); flex-direction: column; align-items: stretch; gap: calc(var(--u) * 2); font-size: calc(var(--fu) * 9); font-weight: 700; text-shadow: var(--outline); min-width: calc(var(--u) * 120); }
.xpbar { height: calc(var(--u) * 3); background: #4d4e48; border-radius: var(--u); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: #ffd66b; }
#openAllW .go { color: var(--green); margin-left: calc(var(--u) * 4); }
#openAllW.empty { opacity: 0.6; }
#runBtn { position: absolute; right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); background: #e8603c; border: calc(var(--u) * 2) solid var(--ink); border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 4) 0 var(--ink); padding: calc(var(--u) * 6) calc(var(--u) * 16); display: flex; flex-direction: column; align-items: center; text-shadow: var(--outline); animation: runPulse 1.6s ease-in-out infinite; }
#runBtn .t1 { font-size: calc(var(--fu) * 18); font-weight: 700; }
#runBtn .t2 { font-size: calc(var(--fu) * 8); color: #ffe0c8; }
#runBtn:active { transform: translateY(calc(var(--u) * 3)); box-shadow: 0 calc(var(--u) * 1) 0 var(--ink); }
@keyframes runPulse { 50% { transform: scale(1.04); } }

/* ---------- run HUD ---------- */
#dayBox { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 5); width: calc(var(--u) * 170); background: #3b3a36; border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 6); font-size: calc(var(--fu) * 9); text-shadow: var(--outline); box-shadow: 0 calc(var(--u) * 3) 0 rgba(0,0,0,0.35); }
#dayBox .d1, #dayBox .d2 { display: flex; align-items: baseline; gap: calc(var(--u) * 5); }
#dayBox .d1 b { font-size: calc(var(--fu) * 13); }
#modTag { flex: 1; font-size: calc(var(--fu) * 7); color: #ffd6a0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#dayT { font-size: calc(var(--fu) * 12); font-weight: 700; }
#dayBox .tbar, #dayBox .cbar { height: calc(var(--u) * 3); background: #1f1e1b; border-radius: var(--u); overflow: hidden; margin: calc(var(--u) * 2) 0; }
#dayBox .tbar i { display: block; height: 100%; background: #9fd0ff; }
#dayBox .cbar i { display: block; height: 100%; background: var(--red); transition: width 0.2s; }
#dayBox.ok .cbar i { background: var(--green); }
#dayBox .d2 b { font-size: calc(var(--fu) * 11); }
#rentState { margin-left: auto; color: var(--red); font-weight: 700; }
#dayBox.ok #rentState { color: var(--green); }
#dayBox.urgent { animation: urgent 0.6s ease-in-out infinite; }
@keyframes urgent { 50% { background: #7a2a2a; } }
#tray { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * 62); bottom: calc(var(--u) * 8); width: calc(var(--u) * 100); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.tray-h { font-size: calc(var(--fu) * 8); font-weight: 700; color: #ffb36b; text-shadow: var(--outline); text-align: center; }
#trayList { display: flex; flex-direction: column; gap: calc(var(--u) * 3); flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#tray.compact .tray-item { padding: var(--u) calc(var(--u) * 2); }
#tray.compact .tray-card .card-img { width: calc(var(--u) * 20); height: calc(var(--u) * 28); }
#tray.compact .tray-info { flex-direction: row; flex-wrap: wrap; align-content: center; gap: calc(var(--u) * 2); }
#tray.compact .tray-info .tv { flex-basis: 100%; }
#tray.compact .tray-info .tr { display: none; }
#tray.compact .tray-info .mini { flex: 1; }
.tray-item { display: flex; gap: calc(var(--u) * 4); background: rgba(35,32,28,0.78); border: var(--u) solid var(--rc); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 2); animation: trayIn 0.3s cubic-bezier(.3,1.6,.5,1); }
@keyframes trayIn { from { transform: translateX(calc(var(--u) * 40)); opacity: 0; } }
.tray-card { background: none; border: 0; padding: 0; }
.tray-card .card-img { width: calc(var(--u) * 32); height: calc(var(--u) * 44); }
.tray-info { display: flex; flex-direction: column; gap: calc(var(--u) * 2); flex: 1; min-width: 0; }
.tray-info .tv { font-size: calc(var(--fu) * 10); font-weight: 700; color: var(--gold); text-shadow: var(--outline); }
.tray-info .tr { font-size: calc(var(--fu) * 6); color: var(--rc); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; }
.tray-info .mini { font-size: calc(var(--fu) * 7); padding: calc(var(--u) * 1) 0; }
.tray-info .mini.sleeve { background: #ffb36b; }
.tray-empty { font-size: calc(var(--fu) * 7); opacity: 0.85; text-shadow: var(--outline); text-align: center; line-height: 1.4; padding: calc(var(--u) * 4); background: rgba(35,32,28,0.4); border-radius: calc(var(--u) * 5); }

/* ---------- run extras: boss, buffs, charms ---------- */
#moneyPill.tick { animation: tick 0.15s ease-out; }
@keyframes tick { 50% { transform: scale(1.06); } }
#dayBox.boss { background: #4a1f24; border-color: #f16373; }
#bossTag { font-size: calc(var(--fu) * 7); color: #ffb3a8; font-weight: 700; letter-spacing: calc(var(--u) * 0.3); }
#buffs { display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; margin-top: calc(var(--u) * 2); }
.buff { font-size: calc(var(--fu) * 7); font-weight: 700; padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 3); background: #ffd66b; color: var(--ink); text-shadow: none; animation: buffPulse 0.6s ease-in-out infinite; }
.buff.lucky { background: #8ff7ff; }
@keyframes buffPulse { 50% { filter: brightness(1.3); } }
#charms { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 34); display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; max-width: calc(var(--u) * 300); pointer-events: auto; }
.charm-chip { font-size: calc(var(--fu) * 7); font-weight: 700; padding: calc(var(--u) * 1) calc(var(--u) * 5); border-radius: calc(var(--u) * 4); background: #2f3150; border: var(--u) solid #c9a2ff; color: #e8d8ff; text-shadow: var(--outline); cursor: help; }
.charm-row { display: flex; gap: calc(var(--u) * 4); justify-content: center; flex-wrap: wrap; margin: calc(var(--u) * 4) 0; }
.charm-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 100), 1fr)); gap: calc(var(--u) * 6); margin: calc(var(--u) * 4) 0; }
.charm-card { position: relative; background: #2f3150; border: calc(var(--u) * 2) solid #c9a2ff; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 3); text-align: left; text-shadow: var(--outline); box-shadow: 0 calc(var(--u) * 3) 0 var(--ink); transition: transform 0.12s; }
.charm-card:hover { transform: translateY(calc(var(--u) * -3)) rotate(-1deg); background: #3c3f66; }
.charm-card b { font-size: calc(var(--fu) * 11); color: #e8d8ff; }
.charm-card span { font-size: calc(var(--fu) * 8); line-height: 1.35; }
.charm-card em, .offer .tier em { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 3); font-style: normal; font-size: calc(var(--fu) * 7); color: var(--green); }
.boss-reward { background: rgba(241, 99, 115, 0.15); border: var(--u) solid #f16373; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 6); margin: calc(var(--u) * 4) 0; text-align: center; }
.boss-reward h3 { margin: 0 0 calc(var(--u) * 2) !important; color: #ffb3a8; font-size: calc(var(--fu) * 10) !important; }
.boss-reward .charm-pick { margin: calc(var(--u) * 2) 0; }
.boss-reward .charm-card { padding: calc(var(--u) * 3) calc(var(--u) * 5); gap: calc(var(--u) * 1); }
.boss-reward .charm-card b { font-size: calc(var(--fu) * 9); }
.boss-reward .charm-card span { font-size: calc(var(--fu) * 7); }
.night h2 { margin-bottom: calc(var(--u) * 3) !important; }
.night h3 { margin: calc(var(--u) * 4) 0 calc(var(--u) * 3) !important; }
.night .offer { padding: calc(var(--u) * 4); gap: calc(var(--u) * 2); }
.night .offer .ds { min-height: calc(var(--u) * 16); }
.night .night-row { margin-top: calc(var(--u) * 5); }
.tier-pick { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 8); }
.tier-name { display: flex; flex-direction: column; align-items: center; min-width: calc(var(--u) * 110); }
.tier-name b { font-size: calc(var(--fu) * 15); color: #ffb36b; }
.tier-name span { font-size: calc(var(--fu) * 8); color: var(--green); }
.tier-rules { margin: calc(var(--u) * 3) auto 0; padding-left: calc(var(--u) * 14); max-width: calc(var(--u) * 300); font-size: calc(var(--fu) * 8); }
.tier-chip { display: inline-block; padding: 0 calc(var(--u) * 4); margin-right: calc(var(--u) * 2); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,0.3); opacity: 0.5; }
.tier-chip.on { background: #ffb36b; color: var(--ink); text-shadow: none; opacity: 1; }
.unlock-line { color: #ffb36b; font-weight: 700; }
.achs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
.ach { background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 6); display: flex; flex-direction: column; opacity: 0.6; }
.ach.on { opacity: 1; background: rgba(161, 251, 104, 0.18); border-left: calc(var(--u) * 3) solid var(--green); }
.ach b { font-size: calc(var(--fu) * 9); }
.ach span { font-size: calc(var(--fu) * 7); }
.ach em { font-style: normal; font-size: calc(var(--fu) * 7); color: #ffd66b; }
.ach-chip { font-size: calc(var(--fu) * 8); font-weight: 700; padding: calc(var(--u) * 1) calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: #2d5a2a; border: var(--u) solid var(--green); }
.perks.unlocks { grid-template-columns: 1fr; }
.up-row.charm { border-left: calc(var(--u) * 3) solid #c9a2ff; }
.day-bar.boss span { color: #ffb3a8; }
.toast.boss { background: #6b2630; }
.wavy.banner.boss span { animation: wave 0.7s ease-in-out infinite; color: #ff6b7a; }
.stamp { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-8deg); font-size: calc(var(--fu) * 40); font-weight: 700; color: #ff5a6a;
  border: calc(var(--u) * 4) solid #ff5a6a; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 2) calc(var(--u) * 14); text-shadow: var(--outline);
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--ink), inset 0 0 0 calc(var(--u) * 2) var(--ink); animation: stampIn 1.25s ease-out forwards; white-space: nowrap; }
.stamp.paid { color: var(--green); border-color: var(--green); }
@keyframes stampIn { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(3); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-8deg) scale(0.92); opacity: 1; }
  26% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }

/* ---------- floating juice text ---------- */
.ft.crit { font-size: calc(var(--fu) * 17); color: #ffd66b; animation: critPop 0.8s ease-out forwards; }
@keyframes critPop { 0% { transform: translate(-50%, -50%) scale(2.2) rotate(-6deg); } 20% { transform: translate(-50%, -70%) scale(1) rotate(3deg); } 100% { transform: translate(-50%, -230%) rotate(0); opacity: 0; } }
.ft { position: absolute; transform: translate(-50%, -50%); font-weight: 700; white-space: nowrap; text-shadow: var(--outline); pointer-events: none; }
.ft.dmg { font-size: calc(var(--fu) * 13); color: #fff; animation: rise 0.65s ease-out forwards; }
.ft.dmg.auto { font-size: calc(var(--fu) * 9); opacity: 0.8; }
.ft.cash { font-size: calc(var(--fu) * 9); color: var(--cash); animation: rise 0.9s ease-out forwards; }
.ft.callout { font-size: calc(var(--fu) * 13); animation: pop 1.1s ease-out forwards; }
.ft.new-small { font-size: calc(var(--fu) * 11); color: var(--green); animation: pop 0.8s ease-out forwards; }
.ft.tag-missing { font-size: calc(var(--fu) * 8); color: #ffb3f0; animation: pop 1s ease-out forwards; }
.ft.triple { font-size: calc(var(--fu) * 20); color: #ffb36b; animation: pop 1.2s ease-out forwards; }
@keyframes rise { 0% { transform: translate(-50%, -50%) scale(1.5); } 20% { transform: translate(-50%, -80%) scale(1); } 100% { transform: translate(-50%, -260%); opacity: 0; } }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0.3); } 20% { transform: translate(-50%, -60%) scale(1.25) rotate(-4deg); } 35% { transform: translate(-50%, -60%) scale(1) rotate(2deg); } 85% { opacity: 1; } 100% { transform: translate(-50%, -140%); opacity: 0; } }

.wavy { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 700; text-shadow: var(--outline); pointer-events: none; animation: popIn 0.3s cubic-bezier(.3,1.8,.5,1) both; }
.wavy span { display: inline-block; animation: wave 0.7s ease-in-out infinite, hue 1.2s linear infinite; animation-delay: calc(var(--i) * -0.08s), calc(var(--i) * -0.1s); }
@keyframes wave { 50% { transform: translateY(calc(var(--u) * -4)); } }
@keyframes hue { 0% { color: #99ff6d; } 33% { color: #6dfff0; } 66% { color: #8fa8ff; } 100% { color: #99ff6d; } }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(0); } }
.wavy.new-big { font-size: calc(var(--fu) * 26); }
.wavy.new-big span { animation: wave 0.7s ease-in-out infinite; color: var(--green); }
.wavy.new-big.hit span { animation: wave 0.7s ease-in-out infinite, hue 1.2s linear infinite; }
.wavy.value-big { font-size: calc(var(--fu) * 16); }
.new-name { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--fu) * 11); font-weight: 700; text-shadow: var(--outline); animation: popIn 0.3s both; white-space: nowrap; }
.wavy.banner { left: 50%; top: 42%; font-size: calc(var(--fu) * 36); animation: popIn 0.35s cubic-bezier(.3,1.8,.5,1) both, fadeOut 0.4s 1.4s forwards; }
.wavy.banner.gold span { animation: wave 0.7s ease-in-out infinite; color: #ffd66b; }
@keyframes fadeOut { to { opacity: 0; } }
.rainbow-text { animation: hue 1.2s linear infinite; }
.coin { position: absolute; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #ffd66b; box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #b8862b, 0 0 0 var(--u) var(--ink); transform: translate(-50%, -50%); pointer-events: none; }
.hand { position: absolute; width: calc(var(--u) * 14); height: calc(var(--u) * 14); transform: translate(-50%, -50%); border: calc(var(--u) * 2) solid #ffd66b; border-radius: 50%; animation: handPulse 0.35s ease-out forwards; }
@keyframes handPulse { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }
body.calm .wavy span { animation: none !important; }
body.calm .ft { animation-duration: 0.9s; }
body.calm #dayBox.urgent, body.calm #runBtn { animation: none; }

/* ---------- panels ---------- */
#panel { position: absolute; left: calc(var(--u) * 40); right: calc(var(--u) * 40); top: calc(var(--u) * 42); bottom: calc(var(--u) * 10); border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 4) 0 rgba(0,0,0,0.35); padding: calc(var(--u) * 8) calc(var(--u) * 14); display: flex; flex-direction: column; z-index: 20; animation: panelIn 0.18s ease-out; font-size: calc(var(--fu) * 9); text-shadow: var(--outline); }
@keyframes panelIn { from { transform: translateY(calc(var(--u) * 14)) scale(0.97); opacity: 0; } }
.theme-shop { background: #6d925e; } .theme-binder { background: #546c86; } .theme-grading { background: #4f9a93; }
.theme-upgrades { background: #814382; } .theme-settings { background: #6b6963; } .theme-dupes { background: #9a8754; }
.theme-packs { background: #74874c; } .theme-collector { background: #9a7a26; }
#panel h2 { margin: 0 0 calc(var(--u) * 6); text-align: center; font-size: calc(var(--fu) * 17); }
#panel h3, .modal-box h3 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); font-size: calc(var(--fu) * 11); }
#panel .x { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 6); background: none; border: 0; font-size: calc(var(--fu) * 13); text-shadow: var(--outline); }
.scroll { flex: 1; overflow-y: auto; padding-right: calc(var(--u) * 4); }
.scroll::-webkit-scrollbar { width: calc(var(--u) * 5); }
.scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: calc(var(--u) * 3); }
.note { opacity: 0.95; line-height: 1.4; margin: calc(var(--u) * 3) 0; }
.dim { opacity: 0.75; }
.empty { text-align: center; opacity: 0.8; margin-top: calc(var(--u) * 20); }
.card-img, .pack-img { image-rendering: pixelated; display: block; }
.card-img { width: calc(var(--u) * 64); height: calc(var(--u) * 88); }

.shop-grid { display: flex; gap: calc(var(--u) * 10); flex-wrap: wrap; justify-content: center; }
.shop-item { width: calc(var(--u) * 128); background: rgba(0,0,0,0.12); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 6); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); text-align: center; }
.shop-item .pack-img { width: calc(var(--u) * 60); height: calc(var(--u) * 84); transition: transform 0.15s; }
.shop-item:hover .pack-img { transform: rotate(-6deg) scale(1.06); }
.shop-item.locked .pack-img, .shop-item.none .pack-img { filter: grayscale(0.85) brightness(0.7); }
.shop-item .nm { font-size: calc(var(--fu) * 11); font-weight: 700; }
.shop-item .count { font-size: calc(var(--fu) * 14); color: var(--gold); font-weight: 700; }
.shop-item .blurb { opacity: 0.9; min-height: calc(var(--u) * 22); }
.lock { color: #ffd6a0; }
.queued { color: var(--gold); }
.buy-row { display: flex; gap: calc(var(--u) * 5); flex-wrap: wrap; justify-content: center; margin: calc(var(--u) * 4) 0; }

.progress { position: relative; height: calc(var(--u) * 12); background: #3f3f3f; border-radius: calc(var(--u) * 6); overflow: hidden; margin: 0 calc(var(--u) * 20) calc(var(--u) * 4); }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--red); }
.progress.xp i { background: #ffd66b; }
.progress span { position: relative; display: block; text-align: center; font-size: calc(var(--fu) * 9); line-height: calc(var(--u) * 12); }
.rar-row { display: flex; gap: calc(var(--u) * 5); justify-content: center; flex-wrap: wrap; margin-bottom: calc(var(--u) * 6); font-size: calc(var(--fu) * 7); }
.type-chip { padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,0.25); border: var(--u) solid var(--tc); }
.type-chip.done { background: var(--tc); }
.binder-grid { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--u) * 64)); gap: calc(var(--u) * 6); justify-content: center; }
.slot { position: relative; background: none; border: 0; padding: 0; transition: transform 0.12s; }
.slot:hover { transform: translateY(calc(var(--u) * -3)) rotate(-2deg); }
.slot .cnt { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2); font-size: calc(var(--fu) * 8); background: var(--ink); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 2); }

.bar-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 6); gap: calc(var(--u) * 8); }
.dupe-row, .up-row, .job { display: flex; align-items: center; gap: calc(var(--u) * 8); background: rgba(0,0,0,0.12); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); }
.dupe-row .mini-card { background: none; border: 0; padding: 0; }
.dupe-row .card-img, .job .card-img { width: calc(var(--u) * 32); height: calc(var(--u) * 44); }
.dupe-row .info, .up-row .info, .job .info { flex: 1; }
.nm { font-weight: 700; font-size: calc(var(--fu) * 10); }
.sub { opacity: 0.9; }
.r { font-size: calc(var(--fu) * 8); }
.acts { display: flex; gap: calc(var(--u) * 4); }
.btn.grade { background: #bdf5ee; }
.lv { color: var(--gold); font-size: calc(var(--fu) * 8); }
.done { color: var(--gold); font-weight: 700; }

.tiers { display: flex; gap: calc(var(--u) * 8); flex-wrap: wrap; justify-content: center; }
.tier { background: rgba(0,0,0,0.15); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 6); }
.pbar { height: calc(var(--u) * 5); background: rgba(0,0,0,0.3); border-radius: calc(var(--u) * 3); overflow: hidden; margin: calc(var(--u) * 2) 0; }
.pbar i { display: block; height: 100%; width: 0; background: #8ff7e0; }
.vault { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--u) * 84)); gap: calc(var(--u) * 10); justify-content: center; }
.slab-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.slab { width: calc(var(--u) * 80); background: linear-gradient(135deg, rgba(235,245,255,0.55), rgba(190,210,230,0.35)); border: calc(var(--u) * 2) solid #d9e6f2; border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * 3) 0 rgba(0,0,0,0.35), inset 0 0 0 var(--u) rgba(255,255,255,0.6); cursor: pointer; text-shadow: none; transition: transform 0.12s; }
.slab:hover { transform: translateY(calc(var(--u) * -3)); }
.slab .label { background: #f4f1ea; color: var(--ink); border: var(--u) solid #c0392b; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 3); }
.slab .l1 { display: flex; justify-content: space-between; font-size: calc(var(--fu) * 7); color: #c0392b; font-weight: 700; }
.slab .l1 b { font-size: calc(var(--fu) * 12); color: var(--ink); line-height: 1; }
.slab .l2 { font-size: calc(var(--fu) * 7); font-weight: 700; white-space: nowrap; overflow: hidden; }
.slab .l3 { font-size: calc(var(--fu) * 6); opacity: 0.8; }
.slab .win { display: grid; place-items: center; background: rgba(255,255,255,0.25); padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); }
.slab.g10 { border-color: #ffd66b; box-shadow: 0 calc(var(--u) * 3) 0 rgba(0,0,0,0.35), 0 0 calc(var(--u) * 8) #ffd66b; }
.slab.g10 .label { border-color: #d4a017; background: #fff6d6; }

.type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 5); }
.type-cell { background: rgba(0,0,0,0.2); border-left: calc(var(--u) * 3) solid var(--tc); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 5); display: flex; flex-direction: column; }
.type-cell span { font-size: calc(var(--fu) * 8); }
.type-cell em { font-style: normal; font-size: calc(var(--fu) * 6); opacity: 0.8; }
.type-cell .pbar i { background: var(--tc); }
.type-cell.done { background: rgba(255,214,107,0.25); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
.perk { background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 6); opacity: 0.55; }
.perk.on { opacity: 1; background: rgba(255,214,107,0.25); }
.perk b { color: var(--gold); margin-right: calc(var(--u) * 4); }
.hists { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.hist { display: grid; grid-template-columns: 2fr 1.2fr 2fr 1fr; gap: calc(var(--u) * 6); background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 6); }
.hist.evicted b, .hist.abandoned b { color: #ffb3a8; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 4); }
.stat { background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3); display: flex; flex-direction: column; align-items: center; }
.stat span { font-size: calc(var(--fu) * 7); opacity: 0.85; }
.stat b { font-size: calc(var(--fu) * 11); color: var(--gold); }

.toggle { display: block; width: 100%; text-align: left; background: rgba(0,0,0,0.15); border: 0; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 5) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); font-size: calc(var(--fu) * 10); text-shadow: var(--outline); }
.toggle b { display: inline-block; width: calc(var(--u) * 26); color: var(--red); }
.toggle.on b { color: var(--green); }
.toggle span { display: block; font-size: calc(var(--fu) * 8); opacity: 0.85; margin-left: calc(var(--u) * 26); }
#saveBox { width: 100%; height: calc(var(--u) * 34); font-family: monospace; font-size: calc(var(--fu) * 6); background: rgba(0,0,0,0.25); color: #fff; border: var(--u) solid var(--ink); border-radius: calc(var(--u) * 4); }

/* ---------- modal ---------- */
#modal { position: absolute; inset: 0; background: rgba(10,8,5,0.62); display: grid; place-items: center; z-index: 40; text-shadow: var(--outline); font-size: calc(var(--fu) * 9); }
.modal-box { background: #4b4a45; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 4) 0 rgba(0,0,0,0.4); max-width: calc(var(--u) * 470); max-height: calc(var(--u) * 340); overflow-y: auto; animation: panelIn 0.18s ease-out; }
.modal-box.wide { width: calc(var(--u) * 470); }
.modal-box h2 { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--fu) * 16); text-align: center; }
.modal-box p { margin: calc(var(--u) * 3) 0; }
.card-detail, .slab-detail { display: flex; gap: calc(var(--u) * 14); align-items: flex-start; }
.card-detail h2, .slab-detail h2 { text-align: left; }
.big-card .card-img { width: calc(var(--u) * 128); height: calc(var(--u) * 176); }
.big-card .art-hd { width: calc(var(--u) * 128); border-radius: calc(var(--u) * 4); }
.big-card.holo { animation: holoGlow 2s linear infinite; border-radius: calc(var(--u) * 4); }
@keyframes holoGlow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--u) * 4) #8ff7ff); } 50% { filter: drop-shadow(0 0 calc(var(--u) * 4) #ff9de2); } }
.detail { min-width: calc(var(--u) * 170); }
.tags { display: flex; gap: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 4); }
.tags span { background: rgba(0,0,0,0.3); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 4); }
.atk b { float: right; }
.flavor { font-style: italic; opacity: 0.9; }
.grade-ask .row { display: flex; gap: calc(var(--u) * 10); align-items: center; margin-bottom: calc(var(--u) * 6); }
.tier-btn { font-size: calc(var(--fu) * 10); }
.subs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); margin: calc(var(--u) * 6) 0; }
.sub-g { background: rgba(0,0,0,0.25); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 6); display: flex; justify-content: space-between; }
.sub-g b { color: var(--gold); }
.slab-detail .slab { width: calc(var(--u) * 110); }
.slab-detail .slab .card-img { width: calc(var(--u) * 96); height: calc(var(--u) * 132); }

/* run start / night / summary */
.how { background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); line-height: 1.35; }
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 100), 1fr)); gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); }
.mod-card { background: #2f3150; border: calc(var(--u) * 2) solid #ffd66b; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 4); text-align: left; text-shadow: var(--outline); box-shadow: 0 calc(var(--u) * 3) 0 var(--ink); transition: transform 0.12s; }
.mod-card:hover { transform: translateY(calc(var(--u) * -3)) rotate(-1deg); background: #3c3f66; }
.mod-card b { font-size: calc(var(--fu) * 11); color: #ffd66b; }
.mod-card.locked { opacity: 0.5; border-style: dashed; cursor: default; }
.mod-card.locked:hover { transform: none; background: #2f3150; }
.mod-card span { font-size: calc(var(--fu) * 8); line-height: 1.35; }
.modal-box.wide:has(.night) { background: #2f3150; }
.ledger { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); justify-content: center; background: rgba(0,0,0,0.25); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4); }
.ledger b { color: var(--gold); }
.ledger b.neg { color: var(--red); } .ledger b.pos { color: var(--green); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 100), 1fr)); gap: calc(var(--u) * 6); }
.offer { background: #24263f; border: calc(var(--u) * 2) solid var(--tc); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 3); align-items: center; text-align: center; box-shadow: 0 calc(var(--u) * 3) 0 var(--ink); }
.offer .tier { background: var(--tc); color: var(--ink); text-shadow: none; font-size: calc(var(--fu) * 6); padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 3); }
.offer .nm { font-size: calc(var(--fu) * 11); }
.offer .ds { font-size: calc(var(--fu) * 8); min-height: calc(var(--u) * 22); line-height: 1.3; }
.offer .own { font-size: calc(var(--fu) * 7); color: var(--gold); }
.offer.sold { opacity: 0.55; }
.night-row { display: flex; gap: calc(var(--u) * 10); align-items: center; justify-content: center; margin-top: calc(var(--u) * 8); flex-wrap: wrap; }
.night-row.big .btn { font-size: calc(var(--fu) * 11); padding: calc(var(--u) * 4) calc(var(--u) * 10); }
.btn.retire { background: #ffd66b; }
.forecast b { color: var(--gold); }
.sum-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.sleeved { display: flex; gap: calc(var(--u) * 4); flex-wrap: wrap; }
.sleeved .card-img { width: calc(var(--u) * 48); height: calc(var(--u) * 66); }
.rewards { display: flex; gap: calc(var(--u) * 8); flex-wrap: wrap; }
.rw { display: flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--fu) * 14); color: var(--gold); }
.rw .pack-img { width: calc(var(--u) * 30); height: calc(var(--u) * 42); }
.legend { font-size: calc(var(--fu) * 7); font-weight: 400; margin-left: calc(var(--u) * 6); }
.curve { display: flex; gap: calc(var(--u) * 3); height: calc(var(--u) * 44); background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 3); }
.day-bar { flex: 1; position: relative; height: 100%; max-width: calc(var(--u) * 26); }
.day-bar i { position: absolute; bottom: 0; left: 18%; right: 18%; background: var(--green); border-radius: var(--u) var(--u) 0 0; }
.day-bar.bad i { background: #8a8a8a; }
.day-bar em { position: absolute; left: 0; right: 0; height: calc(var(--u) * 1.5); background: #ff5a6a; }
.day-bar span { position: absolute; top: 0; left: 0; right: 0; font-size: calc(var(--fu) * 6); text-align: center; }
.summary > .btn, .pause .btn, .run-start > .btn { display: block; margin: calc(var(--u) * 8) auto 0; }

/* ======================= v0.4: home game, modes, settings, help ======================= */
#toolbar { gap: calc(var(--u) * 5); }
.ico { width: calc(var(--u) * 22); height: calc(var(--u) * 20); }
.theme-display { background: #6a5480; } .theme-workshop { background: #7d6450; } .theme-help { background: #4f6278; }

/* tooltips */
#tip { position: absolute; z-index: 60; max-width: calc(var(--u) * 190); background: #23201c; color: #fff; border: calc(var(--u) * 1) solid #f5fdf0; border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 5); font-size: calc(var(--fu) * 8); line-height: 1.35; text-shadow: none; pointer-events: none; opacity: 0; transition: opacity 0.12s; white-space: pre-line; }
#tip.on { opacity: 1; }

/* pixel art icons (icons.js) */
.art { display: inline-block; width: calc(var(--u) * 14); height: calc(var(--u) * 14); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; vertical-align: middle; flex-shrink: 0; }
.art.sm { width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin-right: calc(var(--u) * 2); }
.art.noart { display: none; }

/* tabs, segmented buttons, filters */
.tabs { display: flex; gap: calc(var(--u) * 3); justify-content: center; margin: 0 0 calc(var(--u) * 6); flex-wrap: wrap; }
.tab { background: rgba(0,0,0,0.22); border: calc(var(--u) * 1) solid transparent; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 2) calc(var(--u) * 8); font-size: calc(var(--fu) * 9); font-weight: 700; text-shadow: var(--outline); display: inline-flex; align-items: center; gap: calc(var(--u) * 2); }
.tab:hover { background: rgba(0,0,0,0.34); }
.tab.on { background: var(--paper); color: var(--ink); text-shadow: none; border-color: var(--ink); box-shadow: 0 calc(var(--u) * 2) 0 var(--ink); }
.tab.locked { opacity: 0.45; }
.seg { display: inline-flex; background: rgba(0,0,0,0.25); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 1); gap: calc(var(--u) * 1); flex-shrink: 0; }
.seg button { background: none; border: 0; border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 5); font-size: calc(var(--fu) * 8); font-weight: 700; text-shadow: var(--outline); line-height: calc(var(--u) * 12); }
.seg button.on { background: var(--paper); color: var(--ink); text-shadow: none; }
.filters { display: flex; justify-content: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); flex-wrap: wrap; }
button.type-chip { font-size: calc(var(--fu) * 7); font-weight: 700; text-shadow: var(--outline); line-height: calc(var(--u) * 11); }
.type-chip.sel { box-shadow: 0 0 0 calc(var(--u) * 1) #fff; }
.buy-row.left { justify-content: flex-start; }
.small { font-size: calc(var(--fu) * 7); }

/* binder badges */
.slot .mstar { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 9); height: calc(var(--u) * 9); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 60%, 80% 100%, 50% 78%, 20% 100%, 28% 60%, 0 38%, 37% 35%); }
.mstar.m1 { background: #e0975a; } .mstar.m2 { background: #e8eef2; } .mstar.m3 { background: #ffd66b; }
.slot .bestg, .gchip { background: #f4f1ea; color: var(--ink); border: calc(var(--u) * 1) solid #c0392b; border-radius: calc(var(--u) * 2); text-shadow: none; font-weight: 700; }
.slot .bestg { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 2); font-size: calc(var(--fu) * 8); padding: 0 calc(var(--u) * 2); }
.bestg.g10, .gchip.g10 { border-color: #d4a017; background: #fff6d6; }
.gchip { display: grid; place-items: center; min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); font-size: calc(var(--fu) * 10); border-radius: calc(var(--u) * 4); }

/* set registry */
.progress.reg i { background: #8ff7e0; }
.progress.reg em { position: absolute; top: 0; bottom: 0; width: calc(var(--u) * 1); background: rgba(255,255,255,0.45); }
.progress.reg em.on { background: var(--gold); }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, calc(var(--u) * 34)); gap: calc(var(--u) * 3); justify-content: center; }
.reg-cell { background: rgba(0,0,0,0.25); border: calc(var(--u) * 1) solid rgba(255,255,255,0.15); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1); display: flex; flex-direction: column; align-items: center; font-size: calc(var(--fu) * 6); text-shadow: var(--outline); }
.reg-cell b { font-size: calc(var(--fu) * 12); line-height: 1.1; }
.reg-cell.missing { opacity: 0.45; }
.reg-cell.g7 { background: rgba(201,230,160,0.3); } .reg-cell.g8 { background: rgba(143,224,143,0.35); }
.reg-cell.g9 { background: rgba(143,247,224,0.35); border-color: #8ff7e0; } .reg-cell.g10 { background: rgba(255,214,107,0.4); border-color: #ffd66b; }

/* settings */
.slider { display: flex; align-items: center; gap: calc(var(--u) * 8); background: rgba(0,0,0,0.15); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); font-size: calc(var(--fu) * 10); }
.slider span { width: calc(var(--u) * 90); }
.slider input { flex: 1; accent-color: #99ff6d; cursor: pointer; }
.slider output { width: calc(var(--u) * 30); text-align: right; color: var(--gold); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); background: rgba(0,0,0,0.15); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); font-size: calc(var(--fu) * 10); }
.setrow em { display: block; font-style: normal; font-size: calc(var(--fu) * 8); opacity: 0.85; }
.keys { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.keys div { display: flex; gap: calc(var(--u) * 8); align-items: center; }
kbd { background: var(--paper); color: var(--ink); text-shadow: none; border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 4); font-family: inherit; min-width: calc(var(--u) * 80); text-align: center; box-shadow: 0 calc(var(--u) * 1) 0 var(--ink); font-size: calc(var(--fu) * 8); }
.backs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); justify-content: center; }
.back-pick { background: rgba(0,0,0,0.2); border: calc(var(--u) * 2) solid transparent; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 3); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--fu) * 7); text-shadow: var(--outline); }
.back-pick img, .back-img { width: calc(var(--u) * 32); height: calc(var(--u) * 44); image-rendering: pixelated; display: block; }
.back-pick.on { border-color: var(--green); }
.back-pick.locked img { filter: grayscale(1) brightness(0.5); }
.confirm { max-width: calc(var(--u) * 300); text-align: center; }
.confirm > p:first-child { font-size: calc(var(--fu) * 10); line-height: 1.4; }

/* help & odds */
.help ul { margin: calc(var(--u) * 2) 0; padding-left: calc(var(--u) * 14); }
.help li { margin-bottom: calc(var(--u) * 2); line-height: 1.35; }
.flow { display: flex; align-items: stretch; gap: calc(var(--u) * 3); margin: calc(var(--u) * 4) 0; }
.flow-step { flex: 1; background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.flow-step b { color: var(--gold); font-size: calc(var(--fu) * 10); }
.flow-step span { font-size: calc(var(--fu) * 8); line-height: 1.35; }
.flow-arrow { align-self: center; font-style: normal; font-size: calc(var(--fu) * 16); color: var(--gold); }
.odds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); }
.odds-card { background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 6); }
.odds-head { display: flex; gap: calc(var(--u) * 6); align-items: center; margin-bottom: calc(var(--u) * 3); }
.odds-head .pack-img { width: calc(var(--u) * 24); height: calc(var(--u) * 34); }
.odds-head div { display: flex; flex-direction: column; font-size: calc(var(--fu) * 7); }
.odds-head div > b { font-size: calc(var(--fu) * 9); }
table.odds { width: 100%; border-collapse: collapse; font-size: calc(var(--fu) * 8); }
table.odds th { text-align: left; color: var(--gold); font-weight: 700; padding: calc(var(--u) * 1) calc(var(--u) * 3); }
table.odds td { padding: calc(var(--u) * 1) calc(var(--u) * 3); border-top: calc(var(--u) * 1) solid rgba(255,255,255,0.12); }
table.odds.subs-t td { text-align: center; border: 0; background: rgba(0,0,0,0.2); }
table.odds tr.on td { color: var(--green); }
.obar { display: inline-block; width: calc(var(--u) * 60); height: calc(var(--u) * 5); background: rgba(0,0,0,0.35); border-radius: calc(var(--u) * 2); overflow: hidden; margin-right: calc(var(--u) * 5); vertical-align: middle; }
.obar i { display: block; height: 100%; background: #8ff7e0; }
.stats.four { grid-template-columns: repeat(4, 1fr); }

/* home: goals, till, auto-ripper */
#goals { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 32); display: flex; flex-direction: column; gap: calc(var(--u) * 2); align-items: flex-start; max-width: calc(var(--u) * 175); }
.goals-h { font-size: calc(var(--fu) * 7); font-weight: 700; color: var(--gold); text-shadow: var(--outline); }
.goal { background: rgba(35,32,28,0.72); border: calc(var(--u) * 1) solid rgba(255,255,255,0.15); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 1) calc(var(--u) * 5); font-size: calc(var(--fu) * 8); font-weight: 700; text-align: left; text-shadow: var(--outline); }
.goal::before { content: '\203A  '; color: var(--green); }
.goal:hover { background: rgba(70,64,55,0.92); border-color: var(--green); }
#tillW { flex-wrap: wrap; width: calc(var(--u) * 122); row-gap: calc(var(--u) * 2); }
#tillW .lbl { color: #ffb3f0; }
#tillW .rate { margin-left: auto; font-size: calc(var(--fu) * 7); color: var(--cash); }
#tillW .bar { flex-basis: 100%; height: calc(var(--u) * 3); background: #4d4e48; border-radius: calc(var(--u) * 1); overflow: hidden; }
#tillW .bar i { display: block; height: 100%; background: #ffb3f0; }
#tillW.full { background: #8a6d1f; animation: buffPulse 1s ease-in-out infinite; }
#ripW .lbl { color: #f3c08a; }
#ripW.off { opacity: 0.75; }

/* dupes with loupe */
.copies { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
.copy { background: rgba(0,0,0,0.3); border: calc(var(--u) * 1) solid rgba(255,255,255,0.25); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 4); font-size: calc(var(--fu) * 7); text-shadow: var(--outline); }
.copy:hover { border-color: #8ff7e0; }
.readout b { color: var(--gold); }
.sub-g.unk b { opacity: 0.5; }
.sub-g em { font-style: normal; font-size: calc(var(--fu) * 7); color: var(--green); margin-left: auto; padding-left: calc(var(--u) * 4); }

/* vault & display case */
.slab { position: relative; }
.slab.shown { border-color: #ffb3f0; }
.shown-star { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * -6); font-style: normal; color: #ffb3f0; font-size: calc(var(--fu) * 11); text-shadow: var(--outline); }
.slab-inc { color: var(--cash); font-size: calc(var(--fu) * 8); font-weight: 700; }
.slab.empty-slot, .slab.locked-slot { height: calc(var(--u) * 126); display: grid; place-items: center; border-style: dashed; color: #fff; text-shadow: var(--outline); font-size: calc(var(--fu) * 9); background: rgba(0,0,0,0.15); cursor: default; opacity: 0.6; }
.slab.locked-slot { font-size: calc(var(--fu) * 22); cursor: pointer; font-family: inherit; }
.slab.locked-slot:hover { opacity: 0.9; }
.dupe-row.slim { padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.till-box { background: rgba(0,0,0,0.25); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); }
.till-box > div:first-child { display: flex; align-items: baseline; gap: calc(var(--u) * 6); }
.till-box .lbl { color: #ffb3f0; font-weight: 700; }
#tillBig { font-size: calc(var(--fu) * 18); color: var(--gold); }
.pbar.till i { background: #ffb3f0; }
.till-row { display: flex; align-items: center; gap: calc(var(--u) * 10); justify-content: space-between; }
.bar-row h3 { margin: calc(var(--u) * 4) 0 !important; }

/* workshop */
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); }
.ws-col h3 { margin-top: 0 !important; text-align: center; }
.ws-item { display: flex; gap: calc(var(--u) * 5); align-items: center; background: rgba(0,0,0,0.18); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 5); margin-bottom: calc(var(--u) * 4); }
.ws-item .info { flex: 1; min-width: 0; }
.ws-item .nm { font-size: calc(var(--fu) * 9); }
.ws-item .sub { font-size: calc(var(--fu) * 7); line-height: 1.3; }
.ws-item .btn { font-size: calc(var(--fu) * 8); padding: calc(var(--u) * 1) calc(var(--u) * 4); }
.ws-item .art { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.ws-item.maxed { opacity: 0.7; }
.ws-item .lvl { font-size: calc(var(--fu) * 7); color: var(--gold); }
.pips { display: flex; gap: calc(var(--u) * 1); margin: calc(var(--u) * 1) 0; flex-wrap: wrap; }
.pips i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: rgba(0,0,0,0.4); border-radius: calc(var(--u) * 1); }
.pips i.on { background: var(--gold); }

/* collector: challenges */
.chal { display: flex; gap: calc(var(--u) * 8); align-items: center; background: rgba(0,0,0,0.18); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); }
.chal .info { flex: 1; }
.chal.done { box-shadow: inset calc(var(--u) * 3) 0 0 var(--green); }
.chal.sel { box-shadow: 0 0 0 calc(var(--u) * 1) var(--gold); }
.chal-list { max-height: calc(var(--u) * 200); overflow-y: auto; padding-right: calc(var(--u) * 4); }

/* run start, supplies, daily */
.supplies { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 4); }
.supply { background: #2f3150; border: calc(var(--u) * 2) solid #8ff7e0; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 3) calc(var(--u) * 5); display: flex; flex-direction: column; gap: calc(var(--u) * 1); text-align: left; text-shadow: var(--outline); font-size: calc(var(--fu) * 7); opacity: 0.85; line-height: 1.3; }
.supply b { font-size: calc(var(--fu) * 9); color: #8ff7e0; }
.supply em { font-style: normal; color: var(--gold); }
.supply.on { background: #2d5a52; opacity: 1; box-shadow: 0 0 0 calc(var(--u) * 1) var(--green); }
.supply.locked { opacity: 0.4; border-style: dashed; }
.daily-box { background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin: calc(var(--u) * 4) 0; }
.mods.two { grid-template-columns: 1fr 1fr; margin-bottom: calc(var(--u) * 4); }
.mod-card.static { cursor: default; }
.mod-card.static:hover { transform: none; background: #2f3150; }
.mod-card.charmish { border-color: #c9a2ff; }
.mod-card.charmish b { color: #e8d8ff; }
.mod-card .art, .charm-card .art, .offer .art { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.up-row .art { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.charm-chip { display: inline-flex; align-items: center; }

/* run HUD extras */
#dayBox.zen { background: #2d4a3a; border-color: #8ff7e0; }
#dayBox.zen .d1 .mini { margin-left: auto; }
.tray-acts { display: flex; gap: calc(var(--u) * 2); }
.tray-acts .mini { flex: 1; font-size: calc(var(--fu) * 7); padding: calc(var(--u) * 1) 0; }
.tray-acts .mini.sleeve { background: #ffb36b; }
.tray-item.best { box-shadow: 0 0 0 calc(var(--u) * 1) #ffb36b; }
#autoW .lbl { color: #9fd0ff; }
.toggle-mini { background: rgba(0,0,0,0.25); border: calc(var(--u) * 1) solid rgba(255,255,255,0.3); border-radius: calc(var(--u) * 4); font-size: calc(var(--fu) * 7); font-weight: 700; padding: calc(var(--u) * 1) calc(var(--u) * 6); text-shadow: var(--outline); }
.toggle-mini.on { background: #2d6b65; border-color: var(--green); }
body.calm #tillW.full { animation: none; }

/* Landlord portrait */
.art.portrait.face { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex-shrink: 0; }
.with-face { display: flex; align-items: center; gap: calc(var(--u) * 6); text-align: left; }
.toast.with-face { white-space: normal; max-width: calc(var(--u) * 260); }
#dayBox .boss-face { position: absolute; left: calc(var(--u) * -30); top: calc(var(--u) * 2); width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
#dayBox { position: absolute; }
.supply-row { display: flex; gap: calc(var(--u) * 4); align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: calc(var(--u) * 6); }
.supply-row .lbl { align-self: center; font-size: calc(var(--fu) * 8); font-weight: 700; color: #8ff7e0; cursor: help; }
.supply-row .supply { flex-direction: row; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 5); }
.short-how { justify-content: center; background: rgba(0,0,0,0.2); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.art.portrait.small-face { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

/* ======================= v0.5: progression, modes hub, pack rail, juice, mobile ======================= */
.theme-bank { background: #4f7349; }
button.pill { border: 0; font-family: inherit; color: inherit; cursor: pointer; }
#moneyPill { position: relative; }
.goalbar { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 1); height: calc(var(--u) * 2); background: rgba(0,0,0,0.35); border-radius: calc(var(--u) * 1); overflow: hidden; }
.goalbar b { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.3s steps(6); }
.goalbar.done b { background: var(--gold); animation: buffPulse 0.8s ease-in-out infinite; }

/* ---- juice: pixel confetti, pops, hops, cascades ---- */
.px { position: absolute; width: calc(var(--u) * 2); height: calc(var(--u) * 2); pointer-events: none; z-index: 45; box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(35,32,28,0.6); }
.pop { animation: popScale 0.3s steps(4, end); }
@keyframes popScale { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes icoHop { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(calc(var(--u) * -2.5)) rotate(-8deg); } 70% { transform: translateY(calc(var(--u) * -1)) rotate(4deg); } }
@keyframes icoNudge { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } }
@keyframes spinIn { from { transform: rotate(-200deg) scale(0.2); } to { transform: none; } }
@keyframes riseIn { from { transform: translateY(calc(var(--u) * 6)); opacity: 0; } }
@keyframes readyGlow { 0%, 100% { box-shadow: 0 calc(var(--u) * 2) 0 #4d4e48, 0 0 0 0 rgba(153,255,109,0); } 50% { box-shadow: 0 calc(var(--u) * 2) 0 #4d4e48, 0 0 0 calc(var(--u) * 2) rgba(153,255,109,0.55); } }
@keyframes shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes badgeIn { from { transform: scale(0); } 60% { transform: scale(1.35); } }
#toolbar button:hover .ico { transform: none; animation: icoHop 0.45s steps(4, end); }
#toolbar button:active .ico { transform: scale(0.85); }
#toolbar button:has(.badge.on):not(.locked) .ico { animation: icoNudge 3s steps(2, end) infinite; }
#toolbar button:hover:has(.badge.on) .ico { animation: icoHop 0.45s steps(4, end); }
.badge.on { animation: badgeIn 0.3s steps(4, end); }
.ws-item:hover .art, .mod-card:hover .art, .offer:hover .art, .charm-card:hover .art, .ach:hover .art, .sink:hover .art, .mode-card:hover h3 .art, .contract:hover .art, .flow-step:hover .art { animation: icoHop 0.45s steps(4, end); }
.toast .art { animation: spinIn 0.5s steps(6, end); }
.toast.ach { background: #6b5420; border-color: var(--gold); position: relative; overflow: hidden; }
.toast.ach::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: shine 1.1s 0.2s steps(10, end) both; }
.toast.unlock { background: #2d5a2a; border-color: var(--green); }
#panel.fresh .cascade > * { animation: riseIn 0.3s steps(5, end) both; animation-delay: calc(var(--i, 0) * 35ms); }
.btn:hover:not(:disabled), .mini:hover:not(:disabled) { filter: brightness(1.08); }
.btn:hover:not(:disabled) { transform: translateY(calc(var(--u) * -1)); box-shadow: 0 calc(var(--u) * 3) 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(calc(var(--u) * 2)); box-shadow: none; }
#moneyPill.tick .dollar { display: inline-block; animation: icoHop 0.3s steps(3, end); }
#openAllW.ready, .mode-btn.ready { animation: readyGlow 1.4s steps(6, end) infinite; }
.modal-box.still { animation: none; }
.unlocked { animation: popScale 0.4s steps(4, end) 3; }
body.calm .px, body.calm .cascade > *, body.calm .toast .art, body.calm .toast.ach::after, body.calm #openAllW.ready, body.calm .mode-btn.ready, body.calm #toolbar .ico { animation: none !important; }

/* ---- toolbar locks ---- */
#toolbar button.locked .ico { filter: grayscale(1) brightness(0.55); }
.lock-pip { display: none; position: absolute; right: calc(var(--u) * -1); bottom: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 5); background: #ffd66b; border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 1); }
.lock-pip::before { content: ''; position: absolute; left: calc(var(--u) * 0.5); top: calc(var(--u) * -4); width: calc(var(--u) * 3); height: calc(var(--u) * 3); border: calc(var(--u) * 1) solid var(--ink); border-bottom: 0; border-radius: calc(var(--u) * 2) calc(var(--u) * 2) 0 0; }
#toolbar button.locked .lock-pip { display: block; }

/* ---- rank pill & home run cluster ---- */
#rankNext { font-size: calc(var(--fu) * 6); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 150); }
#runCluster { position: absolute; right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 4); }
#runCluster #runBtn { position: static; }
.mode-row { display: flex; gap: calc(var(--u) * 4); }
.mode-btn { flex: 1; background: #3b3a36; border: calc(var(--u) * 1) solid var(--ink); border-radius: calc(var(--u) * 5); font-size: calc(var(--fu) * 8); font-weight: 700; padding: calc(var(--u) * 2) calc(var(--u) * 5); text-shadow: var(--outline); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); box-shadow: 0 calc(var(--u) * 2) 0 #4d4e48; white-space: nowrap; }
.mode-btn:hover { background: #4b4a45; }
.mode-btn.ready { background: #2d6b65; border-color: var(--green); }
.mode-btn.locked { opacity: 0.6; }

/* ---- locked pages ---- */
.locked-page { text-align: center; padding: calc(var(--u) * 20); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.locked-page .art { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.locked-page h3 { margin: 0 !important; }

/* ---- bank ---- */
.bank-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 6); }
.bank-big { background: rgba(0,0,0,0.25); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 8); display: flex; flex-direction: column; }
.bank-big b { font-size: calc(var(--fu) * 15); color: var(--gold); }
.lbl { font-size: calc(var(--fu) * 7); font-weight: 700; color: #cbffad; letter-spacing: calc(var(--u) * 0.3); }
.goal-card { background: rgba(0,0,0,0.25); border: calc(var(--u) * 1) solid var(--green); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 8); display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.goal-card > div:first-child { display: flex; align-items: baseline; gap: calc(var(--u) * 6); }
.goal-card b { font-size: calc(var(--fu) * 11); }
.goal-card.empty { border-style: dashed; opacity: 0.85; }
.pbar.savebar i { background: var(--green); }
.sinks { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 4); }
.sink { background: rgba(0,0,0,0.22); border: calc(var(--u) * 1) solid rgba(255,255,255,0.15); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 5); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2); text-align: left; text-shadow: var(--outline); font-size: calc(var(--fu) * 7); line-height: 1.3; position: relative; }
.sink b { font-size: calc(var(--fu) * 9); }
.sink:hover:not(:disabled) { background: rgba(0,0,0,0.35); border-color: var(--green); }
.sink.locked { opacity: 0.5; }
.sink em { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 3); font-style: normal; color: #ffd6a0; font-size: calc(var(--fu) * 6); }
.ledger-row { display: grid; grid-template-columns: calc(var(--u) * 70) 1fr calc(var(--u) * 50); gap: calc(var(--u) * 5); align-items: center; font-size: calc(var(--fu) * 8); margin-bottom: calc(var(--u) * 2); }
.ledger-row b { text-align: right; color: var(--cash); }
.ledger-row.out b { color: #ffb3a8; }
.ledger-row.out .obar i { background: #ffb3a8; }
.stats.six { grid-template-columns: repeat(6, 1fr); }

/* ---- rank road ---- */
.road-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: calc(var(--u) * 8); align-items: center; background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 8); }
.road-head .progress { margin: calc(var(--u) * 3) 0 0; }
.road-next { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); align-items: center; }
.road-row { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 2); background: rgba(0,0,0,0.12); opacity: 0.7; }
.road-row.done { opacity: 1; background: rgba(161,251,104,0.12); }
.road-row.current { opacity: 1; background: rgba(255,214,107,0.22); box-shadow: inset calc(var(--u) * 3) 0 0 var(--gold); }
.road-n { min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); display: grid; place-items: center; background: var(--ink); border-radius: calc(var(--u) * 4); font-weight: 700; font-size: calc(var(--fu) * 9); color: var(--gold); }
.road-items { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); flex: 1; }
.road-ok { color: var(--green); }
.road-chip { display: inline-flex; align-items: center; font-size: calc(var(--fu) * 7); padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,0.28); white-space: nowrap; line-height: calc(var(--u) * 12); }
.road-chip.big { background: #8a6d1f; color: #fff6d6; font-weight: 700; }
.road-chip.feature { background: #2d6b65; color: #dffff8; font-weight: 700; }
.road-chip.packs { color: #ffe08a; }
.road-chip.bank { color: var(--cash); }
.road-chip.back, .road-chip.felt, .road-chip.title { color: #ffb3f0; }
.road-chip.item { color: #c9d4ff; }
.road-chip.challenge { color: #ffb36b; }
.road-chip.done { color: var(--green); }

/* ---- achievements ---- */
.seg.wrap { flex-wrap: wrap; justify-content: center; }
.achs { grid-template-columns: 1fr 1fr; }
.ach { flex-direction: row; gap: calc(var(--u) * 5); align-items: flex-start; }
.ach .art { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin-top: calc(var(--u) * 1); }
.ach-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ach .pbar { margin: calc(var(--u) * 2) 0 0; height: calc(var(--u) * 3); }
.ach .pbar i { background: var(--gold); }
.ach-prog { font-size: calc(var(--fu) * 6); opacity: 0.85; }
.ach.secret { opacity: 0.45; }

/* ---- contracts ---- */
.contracts { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.contract { display: flex; align-items: center; gap: calc(var(--u) * 8); background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 8); border: calc(var(--u) * 1) solid rgba(255,255,255,0.12); }
.contract .art { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.contract .info { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.contract .info b { font-size: calc(var(--fu) * 10); }
.contract .pbar i { background: var(--green); }
.contract-rw { font-size: calc(var(--fu) * 8); color: var(--cash); text-align: right; min-width: calc(var(--u) * 50); }
.contract.done { border-color: var(--green); background: rgba(161,251,104,0.15); }
.contract-bonus { display: flex; align-items: center; gap: calc(var(--u) * 6); justify-content: center; margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 6); border: calc(var(--u) * 1) dashed rgba(255,255,255,0.3); }
.contract-bonus.on { border: calc(var(--u) * 1) solid var(--gold); background: rgba(255,214,107,0.2); }

/* ---- cosmetics ---- */
.swatch { display: block; width: calc(var(--u) * 32); height: calc(var(--u) * 22); border: calc(var(--u) * 1) solid var(--ink); background: repeating-linear-gradient(45deg, var(--b) 0 calc(var(--u) * 3), var(--k) calc(var(--u) * 3) calc(var(--u) * 4)); }
.back-pick.locked .swatch { filter: grayscale(1) brightness(0.5); }

/* ---- pins ---- */
.mini.pin { font-size: calc(var(--fu) * 6); padding: 0 calc(var(--u) * 2); background: #d8d4ca; }
.mini.pin.on { background: var(--green); }
.ws-buy { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 2); }

/* ---- workshop: four branches ---- */
.ws-grid.four { grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 5); }
.ws-grid.four .ws-item { padding: calc(var(--u) * 3) calc(var(--u) * 4); gap: calc(var(--u) * 3); }
.ws-grid.four .ws-item .art { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.ws-col.locked { opacity: 0.55; }
.ws-note { font-size: calc(var(--fu) * 7); text-align: center; margin: calc(var(--u) * -3) 0 calc(var(--u) * 4); opacity: 0.85; }

/* ---- modes hub & new run ---- */
.sub-title { margin-top: calc(var(--u) * -3) !important; }
.modal-box h2 .art.sm { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin-right: calc(var(--u) * 4); }
.mode-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(var(--u) * 6); }
.mode-card { background: rgba(0,0,0,0.22); border: calc(var(--u) * 1) solid rgba(255,255,255,0.15); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); }
.mode-card h3 { margin: 0 0 calc(var(--u) * 3) !important; display: flex; align-items: center; gap: calc(var(--u) * 4); }
.mode-card h3 .art { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.mode-card h3 em { font-style: normal; font-size: calc(var(--fu) * 8); color: #ffd6a0; margin-left: auto; }
.mode-card.locked { opacity: 0.6; border-style: dashed; }
.mode-card.focus { border-color: var(--gold); box-shadow: 0 0 0 calc(var(--u) * 1) var(--gold); }
.mode-card .daily-box { background: none; padding: 0; margin: 0; }
.chal.locked { opacity: 0.5; }
.lock-tag { font-size: calc(var(--fu) * 7); font-weight: 700; color: #ffd6a0; background: rgba(0,0,0,0.35); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1) calc(var(--u) * 4); white-space: nowrap; }
.extra-modes { display: flex; gap: calc(var(--u) * 4); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: calc(var(--u) * 6); font-size: calc(var(--fu) * 8); }
.mode-link { background: rgba(0,0,0,0.25); border: calc(var(--u) * 1) solid rgba(255,255,255,0.2); border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 1) calc(var(--u) * 5); font-size: calc(var(--fu) * 8); font-weight: 700; text-shadow: var(--outline); display: inline-flex; align-items: center; }
.mode-link:hover { border-color: var(--gold); }
.mode-link.locked { opacity: 0.55; }

/* ---- run summary progress ---- */
.sum-progress { background: rgba(0,0,0,0.22); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-top: calc(var(--u) * 6); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.rank-line .progress { margin: calc(var(--u) * 2) 0 0; }
.next-line { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); align-items: center; }

/* ---- pack rail (buy without leaving the table) ---- */
#packRail { position: absolute; left: 50%; bottom: calc(var(--u) * 5); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 4); align-items: flex-end; }
#packRail.night { opacity: 0.4; pointer-events: none; }
.rail-pack { position: relative; width: calc(var(--u) * 42); height: calc(var(--u) * 52); background: rgba(35,32,28,0.75); border: calc(var(--u) * 1) solid rgba(255,255,255,0.2); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 2); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 1); box-shadow: 0 calc(var(--u) * 2) 0 rgba(0,0,0,0.45); text-shadow: var(--outline); }
.rail-pack .pack-img { width: calc(var(--u) * 22); height: calc(var(--u) * 31); transition: transform 0.1s steps(2); }
.rail-pack:hover .pack-img { transform: rotate(-8deg) translateY(calc(var(--u) * -2)); }
.rail-pack:active { transform: translateY(calc(var(--u) * 1)) scale(0.95); }
.rp-price { font-size: calc(var(--fu) * 8); font-weight: 700; color: var(--cash); line-height: 1; }
.rail-pack.poor .rp-price { color: var(--red); }
.rail-pack.poor .pack-img { filter: brightness(0.75); }
.rp-q { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 1); font-size: calc(var(--fu) * 7); background: var(--ink); border-radius: calc(var(--u) * 3); padding: 0 calc(var(--u) * 2); color: var(--gold); text-shadow: none; }
.rp-q:empty { display: none; }
.rp-key { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 1); font-style: normal; font-size: calc(var(--fu) * 6); opacity: 0.7; }
.rp-lock { font-size: calc(var(--fu) * 7); color: #ffd6a0; line-height: 1; }
.rail-pack.locked .pack-img { filter: grayscale(1) brightness(0.5); }
.rail-pack.locked .rp-price { display: none; }
.rail-pack.auto { border-color: var(--green); box-shadow: 0 0 0 calc(var(--u) * 1) var(--green), 0 calc(var(--u) * 2) 0 rgba(0,0,0,0.45); }
.rail-auto { height: calc(var(--u) * 52); width: calc(var(--u) * 30); background: rgba(35,32,28,0.75); border: calc(var(--u) * 1) solid rgba(255,255,255,0.2); border-radius: calc(var(--u) * 5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); font-size: calc(var(--fu) * 7); text-shadow: var(--outline); }
.rail-auto b { font-size: calc(var(--fu) * 8); color: #9fd0ff; }
.rail-auto.on { background: #2d6b65; border-color: var(--green); }
.rail-hint { position: absolute; left: 0; right: 0; top: calc(var(--u) * -8); text-align: center; font-size: calc(var(--fu) * 6); opacity: 0.7; text-shadow: var(--outline); pointer-events: none; white-space: nowrap; }
#hud:has(#packRail) #hint { bottom: calc(var(--u) * 64); }

/* ---- mobile ---- */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#stage { touch-action: none; }
#panel .scroll, .modal-box, .chal-list, #trayList { touch-action: pan-y; }
#rotate { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: #14120f; color: #fff; text-align: center; font-size: 18px; padding: 24px; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid #fff; border-radius: 8px; margin: 0 auto 18px; animation: tilt 1.6s steps(8) infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
#rotate button { margin-top: 18px; font: inherit; font-size: 15px; padding: 8px 16px; border-radius: 8px; border: 2px solid #fff; background: none; color: #fff; }
@media (orientation: portrait) and (pointer: coarse) { body:not(.portrait-ok) #rotate { display: grid; } }
@media (pointer: coarse) {
  #cursor { display: none !important; }
  .mini { min-height: calc(var(--u) * 12); }
  .btn { min-height: calc(var(--u) * 15); }
  #toolbar { gap: calc(var(--u) * 3); }
  #toolbar button { padding: calc(var(--u) * 3); }
  .seg button { line-height: calc(var(--u) * 15); }
}
@supports (padding: max(0px)) {
  #topbar { left: max(calc(var(--u) * 8), env(safe-area-inset-left)); }
  #rankPill { right: max(calc(var(--u) * 8), env(safe-area-inset-right)); }
}
.toast { white-space: normal; max-width: calc(var(--u) * 320); text-align: center; line-height: 1.35; }
.mini.close-early { margin-left: auto; background: var(--green); font-size: calc(var(--fu) * 7); animation: buffPulse 1.2s ease-in-out infinite; }
body.calm .mini.close-early { animation: none; }
@media (pointer: coarse) {
  .ws-grid.four { grid-template-columns: 1fr 1fr; }
  .sinks { grid-template-columns: repeat(3, 1fr); }
  .rail-pack { width: calc(var(--u) * 46); height: calc(var(--u) * 56); }
  .rail-auto { height: calc(var(--u) * 56); }
}