/* Chiến Thú Tool — styled like the game: purple ribbons, cream panels with a dark outline and a hard drop
   shadow, chunky yellow/green buttons, sand board tiles, gold cards for evolved Tatari. */
:root {
  /* damped mass-spring curves x(t) = 1 - e^(-ζωt)(cos ω_d t + ζω/ω_d sin ω_d t), sampled for CSS linear():
     bouncy ζ=.45 ω=22, snappy ζ=.62 ω=26, soft ζ=.8 ω=18 — each lasts until it settles (≈4.6/ζω) */
  --spring-bouncy: linear(0, 0.030, 0.110, 0.226, 0.362, 0.508, 0.652, 0.787, 0.906, 1.007, 1.086, 1.144, 1.182, 1.201, 1.205, 1.196, 1.178, 1.153, 1.124, 1.094, 1.065, 1.038, 1.014, 0.994, 0.979, 0.968, 0.961, 0.958, 0.958, 0.960, 0.965, 0.970, 0.976, 0.982, 0.988, 0.993, 0.998, 1.002, 1.005, 1.007, 1);
  --spring-snappy: linear(0, 0.016, 0.059, 0.122, 0.198, 0.284, 0.374, 0.465, 0.553, 0.637, 0.715, 0.786, 0.848, 0.903, 0.949, 0.987, 1.018, 1.042, 1.060, 1.072, 1.079, 1.083, 1.083, 1.081, 1.077, 1.071, 1.064, 1.057, 1.049, 1.042, 1.034, 1.028, 1.021, 1.016, 1.011, 1.006, 1.003, 1.000, 0.998, 0.996, 1);
  --spring-soft: linear(0, 0.010, 0.035, 0.074, 0.121, 0.175, 0.233, 0.294, 0.354, 0.415, 0.473, 0.530, 0.583, 0.633, 0.680, 0.723, 0.762, 0.798, 0.829, 0.858, 0.883, 0.906, 0.925, 0.942, 0.956, 0.968, 0.979, 0.987, 0.994, 1.000, 1.005, 1.008, 1.011, 1.013, 1.014, 1.015, 1.015, 1.015, 1.015, 1.014, 1);
  --t-bouncy: 465ms; --t-snappy: 285ms; --t-soft: 320ms;
  --outline: #2a1b52; --purple: #7350e0; --purple-2: #5a3bc4; --purple-dark: #3b2486;
  --cream: #fffaf0; --cream-2: #f6eedc; --ink: #2a1b52; --muted: #7b6f98;
  --yellow: #ffd43b; --yellow-d: #e2a40a; --green: #7ed957; --green-d: #3f9c2c; --red: #ff6159; --red-d: #c23a32;
  --sand: #f5dda6; --sand-2: #ecce8e;
  --water: #3d8bff; --fire: #ff5148; --grass: #3cc35c; --rock: #b07a3a; --lightning: #f2b705;
  --good: #3fae3a; --bad: #e5413a; --warn: #f0a400;
  --r: 16px;
}
* { box-sizing: border-box; }
html { background: var(--purple-dark); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 500 15px/1.4 "Baloo 2", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 20% 0, #8c6cf0 0, transparent 45%), radial-gradient(circle at 90% 100%, #5f3fd0 0, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px), var(--purple-2); }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }
.err { color: var(--bad); font-weight: 700; min-height: 1em; }
.hint { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* outlined game text */
.ribbon, .brand span, .mode-h b, nav button, .summary .stat b {
  -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; text-shadow: 0 2px 0 var(--outline);
}

/* ---------------------------------------------------------------- buttons */
.btn { font: 800 15px "Baloo 2", system-ui, sans-serif; color: #fff; border: 3px solid var(--outline); border-radius: 14px;
  padding: 4px 16px 6px; cursor: pointer; background: var(--purple); box-shadow: inset 0 -5px 0 var(--purple-dark), 0 3px 0 var(--outline);
  -webkit-text-stroke: 3.5px var(--outline); paint-order: stroke fill; text-shadow: 0 2px 0 var(--outline);
  transition: transform var(--t-snappy) var(--spring-snappy), filter .15s; will-change: transform; }
.btn:hover:not(:disabled) { transform: translateY(-1px) scale(1.03); }
/* pressing is a short push (ease-out); the release springs back with the snappy spring above */
.btn:active:not(:disabled) { transform: translateY(2px) scale(.96); transition-duration: 70ms; transition-timing-function: ease-out;
  box-shadow: inset 0 -3px 0 var(--purple-dark), 0 1px 0 var(--outline); }
.btn:disabled { filter: grayscale(.8) brightness(.9); cursor: not-allowed; }
.btn.yellow { background: var(--yellow); color: #fff; box-shadow: inset 0 -5px 0 var(--yellow-d), 0 3px 0 var(--outline); }
.btn.green { background: var(--green); box-shadow: inset 0 -5px 0 var(--green-d), 0 3px 0 var(--outline); }
.btn.red { background: var(--red); box-shadow: inset 0 -5px 0 var(--red-d), 0 3px 0 var(--outline); }
.btn.small { -webkit-text-stroke-width: 3px; font-size: 13px; padding: 1px 10px 3px; border-radius: 11px; border-width: 2px; }
.btn.big { font-size: 20px; padding: 6px 28px 9px; }
input, select { font: 600 14px "Baloo 2", system-ui, sans-serif; color: var(--ink); background: #fff; border: 2px solid var(--outline);
  border-radius: 10px; padding: 3px 9px; outline: none; }
input:focus, select:focus { box-shadow: 0 0 0 3px var(--yellow); }
input[type=number] { width: 58px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--purple); vertical-align: -3px; }

/* ---------------------------------------------------------------- panels */
.panel { background: var(--cream); border: 3px solid var(--outline); border-radius: var(--r); box-shadow: 0 5px 0 var(--outline);
  overflow: hidden; min-width: 0; }
.ribbon { display: flex; align-items: center; gap: 8px; background: linear-gradient(var(--purple), var(--purple-2));
  color: #fff; font-weight: 800; font-size: 18px; padding: 5px 12px 7px; border-bottom: 3px solid var(--outline); }
.ribbon .btn, .ribbon .pill:last-child { margin-left: auto; }
.ribbon .pill + .btn { margin-left: 6px; }
.body { padding: 12px; }
.pill { font-size: 12px; font-weight: 700; padding: 0 9px; border-radius: 99px; background: rgba(255,255,255,.22); text-shadow: none; -webkit-text-stroke: 0;
  border: 2px solid rgba(42,27,82,.5); }
.pill.run { background: var(--green); color: #fff; border-color: var(--outline); }
.narrow { max-width: 620px; }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: min(400px, 100%); text-align: center; }
.login-box .ribbon { justify-content: center; font-size: 24px; }
.login-box .mascot { width: 96px; height: 96px; margin-top: -4px; }
.login-box .key-row { display: flex; gap: 6px; align-items: center; margin: 8px 0 14px; }
.login-box input { flex: 1; min-width: 0; text-align: center; font-size: 15px; }

/* ---------------------------------------------------------------- header + nav */
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px 4px; max-width: 1240px; margin: 0 auto; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 800; font-size: 24px; }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 var(--outline)); }
.who { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-st { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); color: #fff; font-weight: 700; font-size: 13px;
  padding: 2px 10px; border-radius: 99px; border: 2px solid rgba(0,0,0,.25); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--outline); }
.dot.on { background: var(--green); }
nav { display: flex; gap: 8px; padding: 8px 16px 12px; max-width: 1240px; margin: 0 auto; overflow-x: auto; }
nav button { font: 800 15px "Baloo 2", system-ui, sans-serif; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 6px;
  background: linear-gradient(#6b4bd5, #4f33b5); border: 3px solid var(--outline); border-radius: 14px; padding: 3px 14px 5px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 3px 0 var(--outline); white-space: nowrap; }
nav button i { font-style: normal; text-shadow: none; -webkit-text-stroke: 0; }
nav button.on { background: linear-gradient(#ffe066, var(--yellow)); box-shadow: inset 0 -4px 0 var(--yellow-d), 0 3px 0 var(--outline); }
main { padding: 4px 16px 32px; max-width: 1240px; margin: 0 auto; }

/* ---------------------------------------------------------------- control */
.feat { display: grid; grid-template-columns: 312px 1fr; gap: 16px; align-items: start; }
.screen-panel { padding-bottom: 8px; }
.screen { margin: 10px auto 6px; width: 288px; aspect-ratio: 9/16; background: #1c1236; border: 3px solid var(--outline); border-radius: 14px;
  overflow: hidden; position: relative; }
.screen img { width: 100%; height: 100%; display: block; cursor: crosshair; }
#frame-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #b9aee0; text-align: center; padding: 20px; }
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.summary { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.summary .stat { display: flex; flex-direction: column; }
.summary .stat b { font-size: 26px; line-height: 1; color: var(--yellow); }
.summary .stat span { font-size: 12px; color: var(--muted); font-weight: 700; }
.summary .recent { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.summary .recent i { font-style: normal; font-size: 12px; font-weight: 800; padding: 0 7px; border-radius: 8px; color: #fff;
  border: 2px solid var(--outline); }
.summary .recent i.w { background: var(--green); } .summary .recent i.l { background: var(--red); }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mode { background: var(--cream); border: 3px solid var(--outline); border-radius: var(--r); box-shadow: 0 5px 0 var(--outline);
  padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.mode-h { display: flex; align-items: center; gap: 6px; }
.mode-h img { width: 40px; height: 40px; margin: -4px 0; }
.mode-h b { color: #fff; font-size: 18px; font-weight: 800; }
.mode p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.3; min-height: 32px; }
.mode .opts { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; min-height: 30px; align-items: center; }
.mode .go { margin-top: auto; }
#log { margin: 0; height: 230px; overflow: auto; padding: 10px 12px; background: #1d1438; color: #e9e3ff;
  font: 12.5px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

/* ---------------------------------------------------------------- board */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 8px; border-radius: 14px;
  background: #d9b46a; border: 3px solid var(--outline); }
.board .lane-h { text-align: center; font-size: 12px; font-weight: 800; color: var(--outline); }
.board .enemy { display: flex; justify-content: center; gap: 3px; min-height: 22px; background: rgba(255,255,255,.55); border-radius: 10px; padding: 2px; }
.lane-bad { color: #fff !important; background: var(--red); border-radius: 8px; }
.el { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid var(--outline); }
.el.Water { background: var(--water); } .el.Fire { background: var(--fire); } .el.Grass { background: var(--grass); }
.el.Rock { background: var(--rock); } .el.Lightning { background: var(--lightning); } .el.none { background: #9aa58a; }
.cell { aspect-ratio: 1; background: var(--sand); border-radius: 10px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; overflow: hidden; border: 3px solid transparent; }
.board .cell:nth-child(2n) { background: var(--sand-2); }
.cell img { width: 80%; height: 70%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(42,27,82,.35)); }
.cell span { font-size: 10.5px; font-weight: 800; text-align: center; line-height: 1.1; padding: 0 2px; color: var(--outline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cell.have { border-color: var(--green); } .cell.sub { border-color: var(--warn); } .cell.missing { border-color: var(--red); opacity: .6; }

/* ---------------------------------------------------------------- Tatari cards (like the in-game list) */
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.filters input { width: 150px; margin-left: auto; }
.elbtn { font: 800 13px "Baloo 2", system-ui, sans-serif; color: var(--outline); background: #fff; border: 2px solid var(--outline);
  border-radius: 99px; padding: 1px 11px 2px; cursor: pointer; }
.elbtn small { opacity: .65; }
.elbtn.on { color: #fff; } .elbtn.all.on { background: var(--purple); } .elbtn.Water.on { background: var(--water); }
.elbtn.Fire.on { background: var(--fire); } .elbtn.Grass.on { background: var(--grass); } .elbtn.Rock.on { background: var(--rock); }
.elbtn.Lightning.on { background: var(--lightning); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.tcard { position: relative; border: 3px solid var(--outline); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--outline);
  background: linear-gradient(160deg, #9b7cf2, #6e4fd6); color: #fff; text-align: center; will-change: transform;
  animation: pop-in var(--t-bouncy) var(--spring-bouncy) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
.tcard.gold { background: linear-gradient(160deg, #ffe27a, #f5b324); }
.tcard .art { height: 96px; display: grid; place-items: center; }
.tcard .art img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(42,27,82,.35)); }
.tcard .elb { position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--outline); font-size: 0; }
.elb.Water { background: var(--water); } .elb.Fire { background: var(--fire); } .elb.Grass { background: var(--grass); }
.elb.Rock { background: var(--rock); } .elb.Lightning { background: var(--lightning); }
.tcard .tier { position: absolute; top: 5px; right: 5px; font-size: 12px; font-weight: 800; padding: 0 7px; border-radius: 8px;
  background: var(--outline); color: #fff; }
.tcard .n { font-weight: 800; font-size: 14px; line-height: 1.1; padding: 0 4px;
  -webkit-text-stroke: 3.5px var(--outline); paint-order: stroke fill; text-shadow: 0 2px 0 var(--outline); }
.tcard .s { font-size: 11px; font-weight: 700; opacity: .95; }
.tcard .stars { background: rgba(42,27,82,.78); color: #ffcf3a; font-size: 12px; letter-spacing: 1px; margin-top: 4px; padding: 1px 0; }
.tcard .stars span { color: rgba(255,255,255,.22); }
.tcard .stats { display: flex; justify-content: space-around; background: var(--cream); color: var(--outline); font-size: 11.5px;
  font-weight: 800; padding: 2px 2px 3px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- log */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.table-wrap { max-height: 560px; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; background: var(--cream-2); font-size: 13px; text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--outline); }
td { padding: 5px 10px; border-bottom: 1px solid #e7dcc4; font-weight: 700; font-size: 14px; }
tbody tr { cursor: pointer; } tbody tr:hover { background: #fff3cf; } tbody tr.on { background: var(--yellow); }
.win { color: var(--good); } .lose { color: var(--bad); }

/* ---------------------------------------------------------------- advisor */
.adv-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-weight: 700; }
.picker { position: relative; }
.picker input { width: 230px; }
.sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 2px solid var(--outline); border-radius: 10px;
  z-index: 4; max-height: 260px; overflow: auto; }
.sugg:empty { display: none; }
.sugg div { padding: 4px 9px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.sugg div:hover { background: #fff3cf; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chips:empty { display: none; }
.chip { background: #fff; border: 2px solid var(--outline); border-radius: 99px; padding: 0 2px 0 10px; font-size: 13px; font-weight: 700; }
.chip button { border: none; background: transparent; font-weight: 800; cursor: pointer; color: var(--red); }
#adv-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 16px; }
#adv-out .legend, #adv-out .get { grid-column: 1 / -1; }
.legend { display: flex; gap: 14px; font-size: 13px; font-weight: 700; color: #fff; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 3px solid; margin-right: 4px; vertical-align: -2px; background: var(--sand); }

@media (max-width: 1000px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .feat, .split, .cur-wrap { grid-template-columns: 1fr !important; }
  .brand { font-size: 20px; }
  .filters input { margin-left: 0; }
  #adv-out { grid-template-columns: 1fr; }
}
.getlist { display: flex; flex-wrap: wrap; gap: 12px; }
.getlist span { display: flex; flex-direction: column; align-items: center; width: 84px; text-align: center; }
.getlist img { width: 60px; height: 60px; object-fit: contain; }
.getlist b { font-size: 13px; line-height: 1.1; } .getlist small { color: var(--muted); font-weight: 700; }
#roster-scan-st { margin-left: auto; }
.ribbon .pill.hidden + .btn { margin-left: auto; }

/* ---------------------------------------------------------------- motion (spring physics) */
nav button { transition: transform var(--t-snappy) var(--spring-snappy); }
nav button:hover { transform: translateY(-2px); }
nav button:active { transform: translateY(2px) scale(.95); transition-duration: 70ms; transition-timing-function: ease-out; }
nav button.on { animation: tab-on var(--t-bouncy) var(--spring-bouncy); }
.tab:not(.hidden) { animation: tab-in var(--t-soft) var(--spring-soft) both; }
.mode { transition: box-shadow .2s; will-change: transform; }
.cell img, .summary .recent i, .getlist span { animation: pop-in var(--t-bouncy) var(--spring-bouncy) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
.pill.run { animation: breathe 1.6s ease-in-out infinite; }
.dot.on { animation: breathe 2s ease-in-out infinite; }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tab-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tab-on { from { transform: scale(.88); } to { transform: none; } }
@keyframes breathe { 50% { filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- per-mode tabs */
nav button img { width: 26px; height: 26px; margin: -4px 0; filter: drop-shadow(0 2px 0 var(--outline)); }
.chip-st.job { padding-right: 4px; }
.chip-st.job.run { background: var(--green); border-color: var(--outline); }
.chip-st.job .btn { margin-left: 4px; }
.opts-inline { display: inline-flex; gap: 10px; margin-left: auto; font-size: 13px; font-weight: 800;
  -webkit-text-stroke: 3px var(--outline); }
.opts-inline input { -webkit-text-stroke: 0; margin-left: 4px; }
.opts-inline + .btn { margin-left: 8px; }
.cur-wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 14px; align-items: start; }
.cur-info p { margin: 0 0 8px; font-size: 13.5px; }
.howto p { margin: 0 0 8px; }
#shared { display: none; }
@media (max-width: 1150px) { .cur-wrap { grid-template-columns: 1fr; } .cur-board-max, #cur-board { max-width: 460px; } }
/* ---------------------------------------------------------------- upgrade advice (under the screen, after losses) */
.leftcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.upg .ribbon { background: linear-gradient(#ff8a5b, #f0603c); }
.upg-why { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.upg-item { display: flex; gap: 10px; padding: 8px 0; border-top: 2px dashed #e7dcc4; animation: pop-in var(--t-bouncy) var(--spring-bouncy) backwards;
  animation-delay: calc(var(--i, 0) * 60ms); }
.upg-item:first-child { border-top: 0; padding-top: 0; }
.upg-art { display: flex; align-items: center; flex: none; }
.upg-art img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(42,27,82,.3)); }
.upg-art .arrow { font-size: 14px; color: var(--muted); margin: 0 1px; }
.upg-txt { font-size: 13px; line-height: 1.3; min-width: 0; }
.upg-txt b { display: block; font-size: 14px; }
.upg-txt .tag { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; padding: 0 7px; border-radius: 6px;
  border: 2px solid var(--outline); margin-bottom: 2px; }
.upg-item.evolve .tag { background: var(--purple); } .upg-item.stars .tag { background: var(--warn); } .upg-item.get .tag { background: var(--green); }
.upg-txt .need { font-weight: 800; color: var(--red-d); }
.upg-txt ul { margin: 3px 0 0; padding-left: 16px; color: var(--ink); }

/* owner's maintenance announcement (admin.py maintenance on) */
.notice { max-width: 1208px; margin: 0 auto 6px; padding: 6px 14px; border-radius: 12px; background: var(--yellow);
  color: var(--outline); font-weight: 800; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
@media (min-width: 1240px) { .notice { margin-inline: auto; } }
@media (max-width: 1240px) { .notice { margin-inline: 16px; } }