@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@700;900&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; overscroll-behavior: none; background: #1c1d20; }

#app {
  max-width: 440px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #1c1d20;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  color: #fff; overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
div::-webkit-scrollbar { height: 0; width: 0; display: none; }

/* paper/metal backdrop band */
.band { position: relative; padding: 12px 10px 16px; }
.bandScroll {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.notch {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 12px;
  background: inherit;
  clip-path: polygon(0 0,42% 0,46% 100%,54% 100%,58% 0,100% 0,100% 100%,0 100%);
  filter: brightness(.85);
}

.cell { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 auto; width: 92px; }
.cellTitle { font-size: 14px; font-weight: 600; margin-bottom: 6px; text-shadow: 0 1px 2px #0006; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.circle { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.cellSub { font-size: 13px; margin-top: 6px; font-weight: 500; text-shadow: 0 1px 2px #0006; }
.cellSubBase { font-size: 11px; margin-top: 1px; font-weight: 600; color: #ffe08a; opacity: .85; }

/* income coin: matte gold with liquid fill */
.incomeCircle { background: #5a4012; border: 2px solid #c97a0c; box-shadow: 0 4px 8px #000a, inset 0 0 14px #00000088; transition: opacity .3s, filter .3s; }
.circle.dim, .expCircle.dim { opacity: 0.4; filter: grayscale(0.55) brightness(0.75); }
.circle.dim .incomeChar, .circle.dim .militaryChar { opacity: 0.55; }
.incomeFill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg,#ffd34d,#e8930f); transition: height .55s cubic-bezier(.34,1.4,.6,1); z-index: 1; }
.incomeFillTop { position: absolute; top: -3px; left: 0; right: 0; height: 6px; background: rgba(255,255,255,.35); border-radius: 50%; filter: blur(1px); }
.incomeChar { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #3a2408; font-weight: 900; font-size: 32px; font-family: 'Noto Serif SC','SimHei',serif; letter-spacing: -1px; text-shadow: 0 1px 1px #ffe9a880, 0 -1px 1px #00000055; }

/* account medallion: domed metal, tinted per rank, glossy */
.militaryChar { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-weight: 900; font-size: 30px; font-family: 'Noto Serif SC','SimHei',serif; letter-spacing: -1px; text-shadow: 0 1px 1px rgba(255,255,255,.45), 0 -1px 2px rgba(0,0,0,.55); }
.gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 60% 38% at 42% 24%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 40%, transparent 70%), radial-gradient(circle at 50% 115%, rgba(0,0,0,.45) 0%, transparent 55%); }

.cellImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 1; }
.militaryCharImg { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 30px; font-family: 'Noto Serif SC',serif; text-shadow: 0 2px 4px #000, 0 0 6px #000c; }
.addCircle { background: #ffffff22; border: 1px dashed #ffffff55; display: grid; place-items: center; font-size: 34px; font-weight: 300; line-height: 1; cursor: pointer; }

/* expenses: wood game-button look */
.expGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding-top: 6px; align-content: start; overflow-y: auto; max-height: 100%; touch-action: pan-y; }
.expCell { display: flex; flex-direction: column; align-items: center; }
.expName { font-size: 12px; font-weight: 600; color: #dadada; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px; }
.expCircle {
  position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; transition: transform .12s, box-shadow .12s; cursor: pointer;
  background:
    radial-gradient(circle at 50% 30%, #c08a4e 0%, #a9703a 42%, #7c4d22 100%),
    repeating-linear-gradient(0deg, rgba(90,55,20,.30) 0px, rgba(90,55,20,.30) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(255,225,180,.10) 0px, rgba(255,225,180,.10) 1px, transparent 1px, transparent 9px);
  background-blend-mode: normal, multiply, screen;
  border: 3px solid #5a3a1c;
  box-shadow: 0 4px 6px #000a, inset 0 3px 5px rgba(255,225,180,.4), inset 0 -6px 10px rgba(60,35,12,.7), inset 0 0 0 2px rgba(120,77,34,.6);
}
.expFill { position: absolute; left: 0; right: 0; bottom: 0; transition: height .45s cubic-bezier(.34,1.4,.6,1); z-index: 1; opacity: .55; }
.expGlyph { position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.expAmt { font-size: 11px; margin-top: 4px; font-weight: 600; display: flex; gap: 1px; }

/* troop strength strip */
.strengthBar { display: flex; background: linear-gradient(180deg,#23251f,#1a1c16); border-top: 1px solid #3a3f22; border-bottom: 2px solid #3a3f22; padding: 8px 0; }
.strengthBlock { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.strengthNum { font-size: 19px; font-weight: 800; color: #e6e2cf; letter-spacing: .5px; }
.strengthLbl { font-size: 10px; color: #9a9c86; letter-spacing: 2px; }

/* bottom bar */
.bottomBar { position: relative; background: linear-gradient(180deg,#2c2d30,#212225); border-top: 3px solid #d9b22e; padding: 14px 10px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.barRow { display: flex; align-items: center; gap: 4px; }
.iconBtn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; cursor: pointer; }
.barLbl { font-size: 10px; color: #9a9a9a; }
.track { position: relative; height: 12px; border-radius: 6px; background: #4a4b4e; }
.trackFill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg,#e0622e,#9bbb35 60%,#cdd44a); transition: width .4s; }
.trackFillInc { background: linear-gradient(90deg,#3f7a2e,#6fbf3f 60%,#9bd96a); }
.trackKnob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 1px 3px #000a; }
.trackLabels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 4px; }

/* drag ghost */
.ghost { position: fixed; transform: translate(-50%,-50%); z-index: 200; pointer-events: none; }
.ghostCoin { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px; box-shadow: 0 6px 16px #000a; }

/* modals */
.modalWrap { position: fixed; inset: 0; background: #000000aa; z-index: 300; display: grid; place-items: center; padding: 24px; }
.modal { width: 100%; max-width: 320px; background: #26282c; border: 1px solid #3a3d42; border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px #000b; max-height: 86vh; overflow-y: auto; }
.modalTitle { font-size: 18px; font-weight: 800; text-align: center; }
.modalSub { font-size: 13px; color: #aaadb2; text-align: center; margin-top: 4px; margin-bottom: 16px; }
.inputRow { display: flex; align-items: center; background: #1a1b1e; border: 1px solid #3a3d42; border-radius: 10px; padding: 10px 14px; }

/* numpad — iOS-style circular */
.npWrap { background: transparent; border: none; margin-bottom: 0; }
.npDisplay { display: flex; align-items: center; padding: 10px 14px; min-height: 54px; gap: 6px; background: #1a1b1e; border: 1px solid #3a3d42; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s; }
.npWrap.multi .npDisplay { opacity: 0.55; }
.npWrap.multi .npDisplay.active { opacity: 1; border-color: #f2b933; box-shadow: 0 0 0 1px #f2b933 inset; }
.npLbl { font-size: 12px; color: #8b8e94; font-weight: 600; flex: 0 0 auto; margin-right: 4px; }
.npDisplay.rateRow { padding: 6px 10px; min-height: 0; margin-bottom: 4px; gap: 4px; }
.cropVP { width: 260px; height: 260px; max-width: 100%; border-radius: 50%; overflow: hidden; position: relative; background: #000; margin: 12px auto; touch-action: none; box-shadow: 0 0 0 2px #f2b933, 0 8px 20px #0008; cursor: grab; }
.cropVP:active { cursor: grabbing; }
.cropVP img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; max-height: none; }
.npWrap.multi .npDisplay.active .npLbl { color: #f2b933; }
.npFld { pointer-events: none; text-align: right; overflow-x: auto; white-space: nowrap; text-overflow: clip; scrollbar-width: none; }
.npFld::-webkit-scrollbar { display: none; }
.numpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; background: transparent; padding: 2px 0; }
.npBtn { aspect-ratio: 1 / 1; background: #3a3a3c; color: #fff; font-size: 22px; font-weight: 500; display: grid; place-items: center; border-radius: 50%; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: filter .08s; }
.npBtn:active { filter: brightness(1.4); }
.npOp { color: #fff; background: #f2b933; font-size: 24px; font-weight: 600; }
.npOp:active { filter: brightness(1.15); }
.npEq { color: #3a2a08; background: #f2b933; font-size: 24px; font-weight: 800; }
.npEq:active { filter: brightness(1.15); }
.npUtil { color: #1a1a1a; background: #a5a5a5; font-size: 18px; font-weight: 500; }
.npUtil:active { filter: brightness(1.15); }
.npBksp { font-size: 18px; }

/* stats modal */
.statCards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.statCard { background: #1e2024; border: 1px solid #2a2d32; border-radius: 10px; padding: 10px 12px; }
.statCardVal { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.statCardLbl { font-size: 10px; color: #666; margin-top: 3px; letter-spacing: 1px; text-transform: uppercase; }
.statCardSub { font-size: 11px; color: #888; margin-top: 2px; }
.statSection { font-size: 11px; color: #888; letter-spacing: 2px; text-transform: uppercase; margin: 14px 0 8px; border-bottom: 1px solid #2a2d32; padding-bottom: 6px; }
.statRow { margin-bottom: 10px; }
.statRowName { font-size: 13px; font-weight: 600; color: #cfcfcf; }
.statRowMeta { display: flex; align-items: baseline; gap: 2px; font-size: 13px; margin: 3px 0 4px; }
.statPct { margin-left: auto; font-weight: 700; font-size: 12px; }
.statBarTrack { height: 6px; background: #2a2d32; border-radius: 3px; overflow: visible; position: relative; }
.statBarTrack.empty { background: transparent; border: none; height: 6px; }
.statBarFill { height: 100%; border-radius: 3px; transition: width .35s, background .35s; position: relative; }
.smoke { position: absolute; top: -3px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(200,200,200,0.7), rgba(120,120,120,0) 70%); pointer-events: none; opacity: 0; filter: blur(1.2px); animation: smokeRise 1.8s ease-out infinite; }
.smoke.s2 { right: -7px; animation-delay: 0.55s; width: 5px; height: 5px; }
.smoke.s3 { right: 3px; animation-delay: 1.15s; width: 7px; height: 7px; }
@keyframes smokeRise {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { transform: translate(-2px, -16px) scale(2.4); opacity: 0; }
}
.circle.dropHover, .expCircle.dropHover { transform: scale(1.12); box-shadow: 0 0 0 3px #ffe08a, 0 0 18px 4px #ffe08a99, 0 6px 12px #000b; animation: dropPulse .6s ease-in-out infinite alternate; }
@keyframes wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.wiggle { animation: wiggle 0.22s ease-in-out infinite; }
.wiggle.reorderHover { outline: 3px solid #ffe08a; outline-offset: 3px; }
.delBadge { position: absolute; z-index: 30; width: 22px; height: 22px; border-radius: 50%; background: #d8472f; color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px #000a, inset 0 1px 0 #ffffff55; border: 1.5px solid #fff; cursor: pointer; -webkit-user-select: none; user-select: none; animation: delBadgePop .15s ease-out; }
.delBadge:active { transform: scale(0.88); }
@keyframes delBadgePop { from { transform: scale(0); } to { transform: scale(1); } }
.dragging { opacity: 0.25 !important; }
@keyframes dropPulse { from { box-shadow: 0 0 0 3px #ffe08a, 0 0 14px 3px #ffe08a88, 0 6px 12px #000b; } to { box-shadow: 0 0 0 4px #fff3c4, 0 0 24px 6px #ffe08acc, 0 6px 12px #000b; } }
.smokeBig { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(220,220,220,0.75), rgba(110,110,110,0) 70%); pointer-events: none; opacity: 0; filter: blur(2.5px); animation: smokeRiseBig 2.4s ease-out infinite; z-index: 5; }
.smokeBig.s1 { margin-left: -14px; animation-delay: 0s; }
.smokeBig.s2 { margin-left: 0px;  animation-delay: 0.6s; width: 12px; height: 12px; }
.smokeBig.s3 { margin-left: -22px; animation-delay: 1.2s; width: 16px; height: 16px; }
.smokeBig.s4 { margin-left: 6px;   animation-delay: 1.8s; width: 11px; height: 11px; }
@keyframes smokeRiseBig {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.55; }
  100% { transform: translate(-4px, -42px) scale(2.6); opacity: 0; }
}
.statRankBadge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; font-family: 'Noto Serif SC',serif; flex: 0 0 auto; }

/* backup list */
.bkRow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #2a2c30; }
.bkRow:last-child { border-bottom: none; }
.bkInfo { flex: 1; min-width: 0; }
.bkName { font-size: 14px; font-weight: 600; color: #ffe08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkTime { font-size: 11px; color: #666; margin-top: 2px; }
.dollar { font-size: 24px; font-weight: 700; color: #f2b933; margin-right: 6px; }
input.fld { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 26px; font-weight: 700; width: 100%; }
input.txt { width: 100%; background: transparent; border: 1px solid #3a3d42; border-radius: 10px; color: #fff; font-size: 17px; padding: 11px 14px; margin-bottom: 10px; outline: none; }
.modalBtns { display: flex; gap: 10px; position: sticky; bottom: -22px; margin: 16px -22px -22px; padding: 14px 22px 22px; background: #26282c; border-top: 1px solid #3a3d42; border-radius: 0 0 16px 16px; z-index: 5; }
.btn { flex: 1; padding: 14px 0; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid #444; background: transparent; color: #bbb; }
.btnOk { border: none; background: #f2b933; color: #3a2a08; font-weight: 800; }
.btnDel { color: #e2675a; border-color: #5a2a25; }
.currGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; margin-bottom: 4px; }
.currBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 10px; border: 1.5px solid #3a3d42; background: transparent; color: #cfcfcf; cursor: pointer; }
.currBtn.sel { border-color: #f2b933; background: #f2b93322; color: #ffe08a; }
.rateRow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rateRow input { flex: 1; background: #1a1b1e; border: 1px solid #3a3d42; border-radius: 8px; color: #fff; font-size: 15px; padding: 8px 10px; outline: none; }

.toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); max-width: 88vw; text-align: center; background: #000000ee; color: #ffe08a; padding: 11px 18px; border-radius: 20px; font-size: 14px; font-weight: 700; z-index: 9999; border: 1px solid #ffe08a55; box-shadow: 0 6px 24px #000a; }

@keyframes shk { 0%,100% { transform: scale(1.1) translateX(0); } 25% { transform: scale(1.1) translateX(-2px); } 75% { transform: scale(1.1) translateX(2px); } }
.shake { animation: shk .25s ease-in-out infinite; }
button:active { transform: scale(.95); }