/* eltable.css — ตารางธาตุ (js/eltable.js), mockup A (assets/gen/nightcamp_el_a_raw.png): the 10 x 10 table on the left,
   the dark card on the right, three tip cards along the bottom. The window's look is css/kui.css.
   Measured on the mockup (1536 x 1024, window 1274 x 923): 1 mockup px = 1.05u. Table 839 x 625 (header row 78, first
   column 79, cells 76 x 52.5), card 387 x 649, tips 161 high. */
#eltable .et-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
#eltable .et-win { width: calc(1338 * var(--u)); }
#eltable .kw-title { height: calc(66 * var(--u)); font-size: calc(36 * var(--u)); font-family: 'Mitr', sans-serif; font-weight: 600; }
#eltable .kw-x { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.et-body {
  display: grid; grid-template-columns: calc(881 * var(--u)) calc(406 * var(--u)); grid-template-rows: calc(681 * var(--u)) auto;
  column-gap: calc(14 * var(--u)); row-gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(13 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
}

/* ---------------- the table ---------------- */
.et-table {
  position: relative; align-self: start; height: calc(656 * var(--u)); box-sizing: border-box; display: grid;
  grid-template-columns: calc(83 * var(--u)) repeat(10, minmax(0, 1fr)); grid-template-rows: calc(82 * var(--u)) repeat(10, minmax(0, 1fr));
  background: #fbf4e6; border: calc(3 * var(--u)) solid #d6c6a3; border-radius: calc(16 * var(--u)); overflow: hidden;
}
.et-table > * { box-sizing: border-box; border-right: calc(2 * var(--u)) solid #e6d9bc; border-bottom: calc(2 * var(--u)) solid #e6d9bc; }
.et-corner { position: relative; background: #f3e8d0 linear-gradient(to top right, transparent calc(50% - 1px), #dccdae calc(50% - 1px), #dccdae calc(50% + 1px), transparent calc(50% + 1px)); }
.et-corner small { position: absolute; font: 500 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #8a7d63; white-space: nowrap; }
.et-corner .t { right: calc(6 * var(--u)); top: calc(8 * var(--u)); }
.et-corner .b { left: calc(7 * var(--u)); bottom: calc(8 * var(--u)); }
.et-h {
  position: relative; display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer; background: #f3e8d0;
  border-top: 0; border-left: 0; border-radius: 0; font: inherit;
}
.et-h img:not(.et-me) { width: calc(61 * var(--u)); height: calc(61 * var(--u)); transition: transform 0.12s; }
.et-rh img:not(.et-me) { width: calc(47 * var(--u)); height: calc(47 * var(--u)); }
.et-h:hover img:not(.et-me) { transform: scale(1.08); }
.et-h.sel { background: linear-gradient(#ffd767, #f5b935); }
/* the hero's own elements: a small sword on the weapon's row, a shield on the armor's column */
.et-me { position: absolute; width: calc(26 * var(--u)); height: calc(26 * var(--u)); right: calc(2 * var(--u)); bottom: calc(1 * var(--u)); filter: drop-shadow(0 calc(1 * var(--u)) 0 var(--ink)); }
.et-me[hidden] { display: none; }
.et-c {
  display: grid; place-items: center; cursor: pointer; background: #fbf4e6;
  font: 800 calc(25 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #2b2f52;
}
.et-c.up2 { color: #1d7f2b; }
.et-c.up { color: #3c9a47; }
.et-c.down { color: #d22f40; }
.et-c.none { color: #8b8296; background: #e7dfd0; }
.et-c.hv { background: #fff4d6; }
.et-c.sel { background: #fde9ad; }
.et-c.sel.hv { background: #fde19a; }
.et-c.none.sel { background: #ecd9a3; }
/* the gold outline over the picked row / column (absolute, so it never takes a grid cell) and the picked cell */
.et-sel, .et-pin { position: absolute; inset: 0; pointer-events: none; border: 0; box-sizing: border-box; }
.et-sel { z-index: 2; border: calc(3 * var(--u)) solid #eab43a; border-radius: calc(10 * var(--u)); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(42, 36, 53, 0.25); }
.et-pin { z-index: 3; inset: calc(-2 * var(--u)); border: calc(4 * var(--u)) solid #f29b1b; border-radius: calc(9 * var(--u)); box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 180, 50, 0.85); }

/* ---------------- the dark card ---------------- */
.et-card {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #4ea4ea;
}
.et-head { flex: none; display: flex; align-items: center; gap: calc(16 * var(--u)); }
.et-big { flex: none; width: calc(118 * var(--u)); height: calc(118 * var(--u)); filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35)); }
.et-head h3 { margin: 0 0 calc(4 * var(--u)); font: 600 calc(36 * var(--u)) / 1.1 'Mitr', sans-serif; color: #fff; }
.et-head h3 small { display: block; margin-top: calc(2 * var(--u)); font: 400 calc(15 * var(--u)) / 1.2 'Mitr', sans-serif; color: #8fd0ff; }
.et-head p { margin: 0; font: 400 calc(17 * var(--u)) / 1.42 'Mitr', sans-serif; color: #c9cfee; }
.et-card p.src { flex: none; margin: calc(10 * var(--u)) 0 0; font: 400 calc(16 * var(--u)) / 1.4 'Mitr', sans-serif; color: #ffd98a; }
.et-note { flex: none; margin: calc(8 * var(--u)) 0 0; padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: 999px; align-self: flex-start;
  background: rgba(255, 255, 255, 0.08); font: 500 calc(15 * var(--u)) / 1.5 'Mitr', sans-serif; color: #eef0ff; }
.et-note.up2, .et-note.up { color: #8ff08a; } .et-note.down { color: #ff8f9c; } .et-note.none { color: #b9b2c6; } .et-note.me { color: #ffd873; }
.et-card hr { flex: none; width: 100%; margin: calc(10 * var(--u)) 0 calc(8 * var(--u)); border: 0; border-top: calc(2 * var(--u)) solid #444b78; }
.et-card h5 { flex: none; margin: 0; font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; color: #8fd0ff; }
.et-card h5 small { font-size: calc(14 * var(--u)); font-weight: 400; color: #bcd9f2; }
.et-mons { flex: 1 1 auto; min-height: calc(96 * var(--u)); display: flex; align-items: stretch; justify-content: space-around; gap: calc(8 * var(--u)); padding-top: calc(6 * var(--u)); }
.et-mons figure { margin: 0; flex: 0 1 calc(150 * var(--u)); min-width: 0; display: flex; flex-direction: column; align-items: center; }
.et-mons figure span { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.et-mons figure img { max-width: 100%; max-height: calc(160 * var(--u)); height: 100%; object-fit: contain; filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35)); }
.et-mons figcaption { flex: none; max-width: 100%; margin-top: calc(4 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 calc(16 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff; }
.et-more { align-self: center; flex: none; padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: #3a4170; border: calc(2 * var(--u)) solid #5e68a8;
  font: 500 calc(14 * var(--u)) / 1.5 'Mitr', sans-serif; font-style: normal; color: #dfe4ff; white-space: nowrap; }
.et-nil { align-self: center; font: 400 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; font-style: normal; color: #9aa1c8; }
.et-box { flex: none; margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u));
  background: #151a30; border: calc(2 * var(--u)) solid #3b4369; }
.et-box h6 { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0 0 calc(6 * var(--u)); font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; }
.et-box h6 i { font-style: normal; font-size: calc(16 * var(--u)); }
.et-box.up h6 { color: #7fe08d; }
.et-box.down h6 { color: #ff7f95; }
.et-box > div { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(12 * var(--u)); }
.et-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font: 600 calc(17 * var(--u)) / 1.2 'Mitr', sans-serif; color: #fff; white-space: nowrap; }
.et-chip img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.et-chip b { font: 800 calc(16 * var(--u)) / 1 'Baloo 2', sans-serif; }
.et-chip b.up2, .et-chip b.up { color: #8ff08a; } .et-chip b.down { color: #ff8f9c; } .et-chip b.none { color: #9c95ad; }

/* ---------------- the three tips ---------------- */
.et-tips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(13 * var(--u)); height: calc(169 * var(--u)); }
.et-tip { display: flex; gap: calc(14 * var(--u)); min-width: 0; box-sizing: border-box; padding: calc(13 * var(--u)) calc(16 * var(--u)); overflow: hidden;
  background: #fbf3e3; border: calc(3 * var(--u)) solid #3b3550; border-radius: calc(16 * var(--u)); }
.et-tip .n { flex: none; display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(#a6dcff, #4c9ce6); border: calc(4 * var(--u)) solid var(--ink); color: #fff;
  font: 800 calc(26 * var(--u)) / 1 'Baloo 2', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.et-tip > div { min-width: 0; }
.et-tip h4 { margin: calc(3 * var(--u)) 0 calc(3 * var(--u)); font: 600 calc(26 * var(--u)) / 1.2 'Mitr', sans-serif; color: #2b2f52; }
.et-tip p { margin: 0; font: 400 calc(18 * var(--u)) / 1.42 'Mitr', sans-serif; color: #45416a; }
.et-tip ul { margin: 0; padding: 0; list-style: none; }
.et-tip li { display: flex; align-items: baseline; gap: calc(10 * var(--u)); font: 400 calc(17 * var(--u)) / 1.38 'Mitr', sans-serif; color: #45416a; white-space: nowrap; }
.et-tip li b { flex: none; width: calc(40 * var(--u)); font: 800 calc(20 * var(--u)) / 1.2 'Baloo 2', sans-serif; color: #2b2f52; }
.et-tip li b.up2 { color: #1d7f2b; } .et-tip li b.down { color: #d22f40; } .et-tip li b.none { color: #8b8296; }

/* ---------------- the ways in: the target frame's element, the tray button ---------------- */
#hud #tel.et-link, #hud #teff.et-link { pointer-events: auto; cursor: pointer; }
#hud #tel.et-link:hover { filter: brightness(1.15) drop-shadow(0 0 calc(4 * var(--u)) #ffd873); }
#hud #teff.et-link:hover { text-decoration: underline; }
#hud .et-mbtn b { font-family: 'Mitr', sans-serif; font-weight: 600; font-size: calc(11 * var(--u)); }
#statwin [data-card="wel"], #statwin [data-card="ael"] { cursor: pointer; }

/* ---------------- a phone held upright (html.mob-port): a sheet, the table across the width, then the card, then the tips ---------------- */
html.mob-port #eltable .et-wrap {
  position: fixed; inset: 0; transform: none !important; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.mob-port .et-body { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); }
html.mob-port .et-table { height: calc(520 * var(--u)); grid-template-columns: calc(44 * var(--u)) repeat(10, minmax(0, 1fr)); grid-template-rows: calc(48 * var(--u)) repeat(10, minmax(0, 1fr)); }
html.mob-port .et-h img:not(.et-me) { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
html.mob-port .et-rh img:not(.et-me) { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
html.mob-port .et-me { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
html.mob-port .et-c { font-size: calc(17 * var(--u)); }
html.mob-port .et-corner small { font-size: calc(10 * var(--u)); }
html.mob-port .et-card { height: auto; }
html.mob-port .et-mons { min-height: calc(130 * var(--u)); }
html.mob-port .et-tips { display: flex; flex-direction: column; height: auto; }
html.mob-port .et-tip li { white-space: normal; }