/* Tapri Tycoon: a city board (canvas) with a building card under it. Body colours come from the city. */

body.game {
  --bg-top: #d9481c;
  --bg-bottom: #a8234a;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .17);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  transition: background .6s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* ---------- Till (top) ---------- */
.subhud.tt-tillbar { padding: 0 14px 6px; }
.tt-till { display: grid; justify-items: center; gap: 2px; }
.tt-till.pop .tt-coinrow { animation: ttpop .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ttpop { 40% { transform: scale(1.07); } }
.tt-coinrow { display: flex; align-items: center; gap: 8px; }
.tt-coin-ic { width: 30px; height: 30px; flex: none; display: inline-block; }
.tt-coin-ic svg { width: 100%; height: 100%; }
.tt-coins { font: 700 clamp(28px, 8.6vw, 38px)/1.05 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.tt-subrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.tt-ips { padding: 2px 12px; border-radius: 999px; background: var(--hud-chip); font-variant-numeric: tabular-nums; }
.tt-stars {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px 2px 8px; border-radius: 999px; border: 0;
  background: var(--hud-chip); color: inherit; font-weight: 800; min-height: 28px;
}
.tt-star-ic { width: 20px; height: 20px; display: inline-block; flex: none; }
.tt-star-ic svg { width: 100%; height: 100%; }
body.tt-rush .tt-coins { color: #ffe27a; }

/* ---------- Tools (bottom) ---------- */
.boosters.tt-tools { gap: 8px; padding-top: 6px; }
.tt-tool { min-width: 0; flex: 1 1 0; max-width: 110px; min-height: 58px; padding: 6px 4px 5px; gap: 0; }
.tt-tool-ic { width: 24px; height: 24px; display: block; }
.tt-tool-ic svg { width: 24px; height: 24px; }
.tt-tool-l { font-size: 12.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tt-tool-s { font-size: 11.5px; font-weight: 700; opacity: .85; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-t-mode .tt-tool-s { font-size: 14px; font-weight: 800; opacity: 1; }
.tt-tool.ready { background: rgba(255, 216, 74, .3); box-shadow: 0 0 0 2px #ffe27a inset; animation: ttglow 1.6s ease-in-out infinite; }
.tt-t-rush.on { background: #ffd84a; color: var(--ink); animation: ttrush .6s ease-in-out infinite alternate; }
@keyframes ttrush { to { transform: scale(1.04); } }
.tt-tool[aria-disabled="true"] { opacity: .6; }

/* ---------- Effects, banner, tutorial ---------- */
.tt-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.hand.tt-hand { position: fixed; z-index: 300; width: 46px; height: 46px; margin: -4px 0 0 -16px; }
.tt-banner {
  position: absolute; z-index: 6; left: 50%; top: 34%; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; width: max-content;
  max-width: calc(100% - 32px); padding: 10px 20px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #ffd25a, #f2a33d); color: #5e1f12; border: 3px solid #fff4e0;
  font: 700 clamp(18px, 5vw, 26px)/1.15 var(--display); box-shadow: 0 12px 30px -10px rgba(60, 20, 0, .55);
}
.tt-banner.show { animation: ttbanner 2.2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes ttbanner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-3deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
  22%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(.96); }
}

/* ---------- Modals ---------- */
.tt-modal .end-kicker { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--chili); }
.tt-modal .actions { display: grid; gap: 10px; }
.tt-away-line { font-size: 17px; font-weight: 600; }
.tt-away-amt { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tt-away-amt .tt-coin-ic { width: 44px; height: 44px; animation: ttspin 1.2s ease-in-out infinite; }
@keyframes ttspin { 50% { transform: rotateY(180deg); } }
.tt-away-amt b { font: 700 clamp(38px, 12vw, 52px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-away-note { font-size: 14px; }
.tt-collect { font-size: 20px; padding: 14px 22px; }
.tt-citystrip { position: relative; height: 84px; width: 100%; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: none; }
.tt-citystrip svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tt-cc-bar.tt-big { height: 12px; background: var(--line); }
.tt-need { font-size: 14px; font-weight: 600; }
.tt-gain { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; color: var(--mint) !important; font-size: 17px; }
.tt-gain .tt-star-ic { width: 24px; height: 24px; }

.tt-away-spend { font-weight: 800; color: var(--mint) !important; font-size: 16px; margin-top: -4px; }
.tt-away-amt.done b { animation: ttamt .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ttamt { from { transform: scale(1.18); } to { transform: none; } }

/* ---------- Stage: board + building card ---------- */
.stage.tt-stage { display: flex; flex-direction: column; overscroll-behavior: none; }
.tt-boardwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tt-boardwrap canvas.tt-board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; border-radius: 18px 18px 0 0; }
.tt-boardwrap .coach-line { top: auto; bottom: 10px; }
.tt-boardwrap { margin: 0 max(8px, env(safe-area-inset-left, 0px)); max-width: 560px; align-self: stretch; }
@media (min-width: 576px) { .tt-boardwrap { margin-inline: auto; width: 560px; } }

/* Goal strip */
.tt-quest {
  position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 10px 4px 8px; border: 0; border-radius: 14px; text-align: left;
  background: rgba(255, 250, 241, .94); color: var(--ink); box-shadow: 0 3px 0 rgba(60, 25, 5, .18);
}
.tt-q-ic { font-size: 18px; flex: none; }
.tt-q-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tt-q-text { font-size: 13.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-q-bar { display: block; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tt-q-bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.tt-q-prog { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tt-quest.done { background: #fff3c4; box-shadow: 0 3px 0 #c99a2e, 0 0 0 2px #f2b33d inset; animation: ttglow 1.4s ease-in-out infinite; }
.tt-quest.done .tt-q-prog { color: #fff; background: var(--mint); padding: 4px 10px; border-radius: 10px; }

/* Event card */
.tt-evcard {
  position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 6px; padding: 8px 10px 9px;
  border-radius: 16px; background: #2b1d14; color: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  animation: ttevin .35s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes ttevin { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.tt-evcard[data-kind="fire"].live { background: #b93a12; animation: ttevin .35s cubic-bezier(.2, 1.5, .4, 1), ttpulse .8s ease-in-out infinite alternate; }
@keyframes ttpulse { to { box-shadow: 0 0 0 4px rgba(255, 140, 26, .55), 0 6px 18px -6px rgba(0, 0, 0, .5); } }
.tt-evcard[data-kind="fest"].live { background: linear-gradient(90deg, #d6409f, #f2a33d); }
.tt-evcard[data-kind="vip"] { background: linear-gradient(90deg, #6c4bd8, #d6409f); }
.tt-evcard[data-kind="rain"].live { background: #2f5f8f; }
.tt-evcard[data-kind="audit"].live { background: #3d5a80; }
.tt-ev-top { display: flex; gap: 10px; align-items: center; }
.tt-ev-ic { font-size: 26px; line-height: 1; flex: none; }
.tt-ev-text { display: grid; min-width: 0; line-height: 1.25; }
.tt-ev-text b { font-size: 15.5px; font-weight: 800; }
.tt-ev-text span { font-size: 13px; font-weight: 600; opacity: .92; }
.tt-ev-timer { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.tt-ev-timer i { display: block; height: 100%; background: #ffd84a; transform-origin: left; }
.tt-ev-btns { display: flex; gap: 8px; }
.tt-ev-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; border: 0; border-radius: 12px; padding: 4px 8px; font-weight: 800; font-size: 14.5px;
  background: #ffd84a; color: #2b1d14; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); line-height: 1.2;
}
.tt-ev-btn.alt { background: #fff; }
.tt-ev-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }

/* Building card */
.tt-panel {
  flex: none; position: relative; z-index: 2; display: grid; gap: 6px; padding: 10px 12px 12px;
  margin: 0 max(8px, env(safe-area-inset-left, 0px)); border-radius: 0 0 20px 20px; background: var(--paper); color: var(--ink);
  box-shadow: 0 -2px 0 rgba(60, 25, 5, .08), 0 5px 0 rgba(60, 25, 5, .22);
}
@media (min-width: 576px) { .tt-panel { margin-inline: auto; width: 560px; } }
.tt-p-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tt-p-name { font-size: 18px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-p-lv { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tt-p-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.tt-p-chips:empty { display: none; }
.tt-chip { padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 800; line-height: 1.55; background: #efe2cc; color: var(--ink-soft); white-space: nowrap; }
.tt-chip-good { background: #d8f0e2; color: #1f6b4f; }
.tt-chip-foot { background: #dbe7fb; color: #2a59a8; }
.tt-chip-sup { background: #f3ead9; color: #7a5a2a; }
.tt-chip-need { background: transparent; border: 1.5px dashed #cdb99b; color: #9b8670; }
.tt-chip-bad { background: #fde0d6; color: #b93a12; }
.tt-p-note { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.tt-panel[data-kind="shop"] .tt-p-note { color: #b93a12; font-weight: 800; }

.tt-bar {
  position: relative; height: 26px; border-radius: 999px; background: #efe2cc; overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(60, 25, 5, .08);
}
.tt-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(180deg, #ffd25a, #f2b33d); will-change: transform; }
.tt-bar.fast .tt-fill { background: repeating-linear-gradient(-45deg, #ffd25a 0 10px, #f2b33d 10px 20px); background-size: 28px 28px; animation: ttstripe .5s linear infinite; }
@keyframes ttstripe { to { background-position: 28px 0; } }
.tt-rev, .tt-time { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.tt-rev { left: 12px; color: var(--ink); }
.tt-time { right: 10px; color: var(--ink-soft); font-size: 13px; }
.tt-ms { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.2; }
.tt-ms-bar { width: 46px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; flex: none; }
.tt-ms-bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); transition: transform .3s; }

.tt-actions { display: flex; gap: 8px; }
.tt-btn {
  flex: 1 1 0; min-width: 0; min-height: 50px; padding: 4px 8px; border: 0; border-radius: 14px;
  display: grid; place-content: center; text-align: center; line-height: 1.1; touch-action: manipulation;
  background: #eadcc4; color: #8d7a68; box-shadow: 0 4px 0 #cdb99b; transition: transform .07s, box-shadow .07s, background .2s, color .2s;
}
.tt-btn span { font-size: 12.5px; font-weight: 800; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-btn b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-btn.tt-mv { flex: 0 0 64px; justify-items: center; color: var(--ink-soft); }
.tt-btn.tt-mv svg { width: 22px; height: 22px; }
.tt-buy.can { background: var(--mint); color: #fff; box-shadow: 0 4px 0 #1f6b4f; animation: ttglow 1.8s ease-in-out infinite; }
.tt-buy.can.life { background: var(--chili); box-shadow: 0 4px 0 var(--chili-2); }
.tt-mgr.can { background: #3d7be0; color: #fff; box-shadow: 0 4px 0 #2a59a8; animation: ttglow 1.8s ease-in-out infinite; }
.tt-mgr.done { background: #e3eefc; color: #2a59a8; box-shadow: 0 4px 0 #b9cdee; }
.tt-btn:disabled { opacity: .8; }
@keyframes ttglow { 50% { filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 230, 140, .7)); } }
.tt-btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.tt-btn.nope, .tt-b-buy.nope, .btn.nope { animation: ttnope .35s; }
@keyframes ttnope { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
body.tt-moving .tt-actions { opacity: .45; pointer-events: none; }

/* Guided start: only the button being taught works */
body.tt-tutlock .tt-tool, body.tt-tutlock .tt-quest { pointer-events: none; opacity: .45; animation: none; }
body.tt-tutlock .tt-actions .tt-btn { pointer-events: none; opacity: .4; animation: none; }
body[data-tut="5"] .tt-actions .tt-buy, body[data-tut="6"] .tt-actions .tt-mgr { pointer-events: auto; opacity: 1; animation: ttring 1.1s ease-in-out infinite; }
@keyframes ttring { 50% { box-shadow: 0 0 0 5px rgba(255, 216, 74, .95), 0 4px 0 rgba(0, 0, 0, .2); } }
body[data-tut="3"] .tt-b-row:not(.fac) .tt-b-buy { animation: ttring 1.1s ease-in-out infinite; }

/* Sheets: build / safety */
.tt-buildsheet h2 { margin-bottom: 2px; }
.tt-b-list { display: grid; gap: 8px; text-align: left; }
.tt-b-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #f6ead6; }
.tt-b-row.fac { background: #e9f2e2; }
.tt-b-img { width: 64px; height: 54px; flex: none; }
.tt-u-ic { width: 44px; text-align: center; font-size: 28px; flex: none; }
.tt-b-info { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.tt-b-info b { font-size: 16px; color: var(--ink); }
.tt-b-info small { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.tt-b-buy {
  flex: none; min-width: 84px; min-height: 46px; padding: 4px 10px; border: 0; border-radius: 12px; font-weight: 800; font-size: 15px;
  background: #eadcc4; color: #8d7a68; box-shadow: 0 3px 0 #cdb99b; font-variant-numeric: tabular-nums;
}
.tt-b-buy.can { background: var(--mint); color: #fff; box-shadow: 0 3px 0 #1f6b4f; }
.tt-b-buy.own { background: transparent; box-shadow: none; color: var(--mint); }
.tt-b-soon { font-size: 13.5px; font-weight: 700; margin-top: 8px; }
.tt-help { text-align: left; padding-left: 20px; display: grid; gap: 8px; color: var(--ink); font-size: 15px; line-height: 1.4; margin: 6px 0 14px; }
.tt-double { margin-top: 2px; }
.btn[aria-disabled="true"] { opacity: .5; }

/* Short phones: a slimmer card */
@media (max-height: 700px) {
  .tt-panel { gap: 4px; padding: 8px 10px 10px; }
  .tt-btn { min-height: 46px; }
  .tt-ms { display: none; }
  .tt-p-name { font-size: 16.5px; }
  .tt-bar { height: 22px; }
  .tt-tool { min-height: 50px; }
  .tt-coins { font-size: 26px; }
}

/* City strip (Naya Shehar sheet) */
.tt-sky { background: linear-gradient(180deg, var(--sky1, #ffcf7a), var(--sky2, #ff8a5c) 82%, #4a3a35 82%); }
.tt-sil-s { fill: none; }
.tt-sil-hole { fill: rgba(255, 220, 160, .55); stroke: none; }
.tt-cc-bar { display: block; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .22); overflow: hidden; }
.tt-cc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd25a, #7dc36b); transform-origin: left; transform: scaleX(0); transition: transform .4s; }

/* Wide screens: the building card sits beside the board */
@media (min-width: 900px) {
  .stage.tt-stage { flex-direction: row; justify-content: center; gap: 14px; padding: 0 14px 6px; }
  .tt-boardwrap, .tt-panel { margin: 0; }
  .tt-boardwrap { flex: 0 1 560px; width: auto; }
  .tt-boardwrap canvas.tt-board { border-radius: 18px; }
  .tt-panel { flex: 0 0 340px; width: 340px; align-self: flex-start; border-radius: 20px; }
}