/* gwar.css — ศึกชิงกองไฟ's screens (js/gwar_ui.js): the war bar on top (scores, the five fires, the time), the kill feed,
   the respawn choice, the scoreboard (Tab), the results and the war board at the camp's gate, in the K look (cream
   body, sky-blue title, chunky navy outline). Sizes in --u like the rest of the HUD. */
#gwr-bar { position: absolute; left: 50%; top: calc(8 * var(--u)); transform: translateX(-50%); z-index: 23; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); font: 600 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; color: #fff4dc; }
#gwr-bar[hidden] { display: none; }
#gwr-bar .gwr-row { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u));
  background: #f7efdc; color: var(--ink); border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #74b6ec, 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
#gwr-bar .gwr-team { display: flex; flex-direction: column; align-items: center; min-width: calc(150 * var(--u)); max-width: calc(200 * var(--u)); }
#gwr-bar .gwr-team b { font: 800 calc(22 * var(--u)) / 1.1 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gwr-bar .gwr-team .role { font-weight: 700; color: #5b5470; }
#gwr-bar .gwr-team.hold { background: rgba(255, 210, 122, 0.5); border-radius: calc(12 * var(--u)); }
#gwr-bar .gwr-team.b b { color: #6cbcff; } #gwr-bar .gwr-team.r b { color: #ff7466; }
#gwr-bar .gwr-team small { font-size: calc(14 * var(--u)); max-width: calc(140 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gwr-bar .gwr-team.mine .role::after { content: ' (Chúng tôi)'; color: #3b8fdc; }
#gwr-bar .gwr-fires { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); }
#gwr-bar .gwr-f { position: relative; width: calc(48 * var(--u)); height: calc(54 * var(--u)); display: flex; align-items: flex-end; justify-content: center;
  border-radius: calc(12 * var(--u)); background: #2f2940; border: calc(3 * var(--u)) solid var(--ink); }
#gwr-bar .gwr-f.great { width: calc(62 * var(--u)); height: calc(66 * var(--u)); }
#gwr-bar .gwr-f.b { background: #2c4d7a; box-shadow: 0 0 0 calc(3 * var(--u)) #6cbcff; } #gwr-bar .gwr-f.r { background: #6e2f33; box-shadow: 0 0 0 calc(3 * var(--u)) #ff7466; }
#gwr-bar .gwr-f img { width: 86%; margin-bottom: calc(6 * var(--u)); }
#gwr-bar .gwr-f i { position: absolute; left: calc(4 * var(--u)); right: calc(4 * var(--u)); bottom: calc(3 * var(--u)); height: calc(4 * var(--u)); border-radius: 9px; background: #1a1626; overflow: hidden; }
#gwr-bar .gwr-f i u { display: block; height: 100%; background: #ffd27a; }
#gwr-bar .gwr-f.b i u { background: #6cbcff; } #gwr-bar .gwr-f.r i u { background: #ff7466; }
#gwr-bar .gwr-f.hit { animation: gwPulse 0.6s ease-in-out infinite alternate; }
@keyframes gwPulse { to { transform: translateY(calc(-3 * var(--u))) scale(1.06); } }
#gwr-bar .gwr-sub { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(14 * var(--u)); border-radius: 99px;
  background: rgba(22, 18, 40, 0.86); border: calc(3 * var(--u)) solid #74b6ec; font-size: calc(16 * var(--u)); white-space: nowrap; }
#gwr-bar .gwr-sub img { height: calc(22 * var(--u)); vertical-align: middle; }
#gwr-bar .gwr-sub .t { color: #ffd27a; min-width: calc(54 * var(--u)); text-align: center; }
#gwr-bar .gwr-sub button { pointer-events: auto; font: 600 calc(14 * var(--u)) 'Mitr', sans-serif; padding: 0 calc(10 * var(--u)); border-radius: 99px;
  background: #b9b3c6; color: var(--ink); border: calc(2 * var(--u)) solid var(--ink); cursor: pointer; }
#gwr-feed { position: absolute; left: 50%; top: calc(160 * var(--u)); transform: translateX(-50%); z-index: 22; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; gap: calc(3 * var(--u)); font: 600 calc(16 * var(--u)) / 1.25 'Mitr', sans-serif; }
#gwr-feed div { padding: calc(1 * var(--u)) calc(10 * var(--u)); border-radius: 99px; background: rgba(22, 18, 40, 0.72); color: #fff4dc; transition: opacity 0.6s; }
#gwr-feed div.b { color: #9fd3ff; } #gwr-feed div.r { color: #ffaa9f; }
#gwr-big { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 24; pointer-events: none; text-align: center; color: #fff4dc;
  font: 700 calc(76 * var(--u)) / 1.1 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) #2a1d3a; paint-order: stroke; opacity: 0; transition: opacity 0.25s; }
#gwr-big small { display: block; font-size: calc(26 * var(--u)); -webkit-text-stroke: calc(2 * var(--u)) #2a1d3a; }
#gwr-big.show { opacity: 1; }
#gwr-dead { position: absolute; left: 50%; bottom: calc(190 * var(--u)); transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column; align-items: center;
  gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); background: #f7efdc; color: var(--ink); border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(20 * var(--u)); box-shadow: inset 0 0 0 calc(3 * var(--u)) #74b6ec, 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, 0.35); font: 600 calc(18 * var(--u)) 'Mitr', sans-serif; }
#gwr-dead[hidden] { display: none; }
#gwr-dead b { font-size: calc(26 * var(--u)); }
#gwr-dead .gwr-sp { display: flex; gap: calc(8 * var(--u)); flex-wrap: wrap; justify-content: center; }
#gwr-dead button { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 600 calc(16 * var(--u)) 'Mitr', sans-serif; padding: calc(4 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #e9e1cc; color: var(--ink); cursor: pointer; }
#gwr-dead button img { height: calc(26 * var(--u)); }
#gwr-dead button.on { background: #7fcaf8; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
#gwr-dead button:disabled { opacity: 0.45; cursor: default; }
/* windows: the scoreboard, the results, the war board */
.gwr-win { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; box-sizing: border-box; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(14, 12, 30, 0.45); }
.gwr-win[hidden] { display: none; }
.gwr-win.peek { background: none; pointer-events: none; }
.gwr-win .card { position: relative; box-sizing: border-box; width: min(96vw, calc(980 * var(--u))); max-height: 94vh; overflow-y: auto; padding: 0 0 calc(18 * var(--u));
  background: #f7efdc; color: var(--ink); border: calc(5 * var(--u)) solid var(--ink); border-radius: calc(24 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #74b6ec, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); font: 400 calc(18 * var(--u)) / 1.45 'Mitr', sans-serif; }
.gwr-win .ptitle { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(58 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(24 * var(--u));
  background: linear-gradient(#7fcaf8, #3b8fdc); border-bottom: calc(4 * var(--u)) solid var(--ink); border-radius: calc(19 * var(--u)) calc(19 * var(--u)) 0 0;
  font: 800 calc(28 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.gwr-win .ptitle span { margin-right: auto; }
.gwr-win .ptitle button { font: 700 calc(22 * var(--u)) 'Mitr', sans-serif; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  background: #ffd27a; border: calc(3 * var(--u)) solid var(--ink); color: var(--ink); -webkit-text-stroke: 0; cursor: pointer; }
.gwr-body { padding: calc(14 * var(--u)) calc(22 * var(--u)) 0; }
.gwr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(14 * var(--u)); }
.gwr-card { min-width: 0; overflow: hidden; border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); background: #fff9ec; }
.gwr-card.b { background: #dcecff; } .gwr-card.r { background: #ffe1dc; }
.gwr-card h3 { margin: 0 0 calc(6 * var(--u)); font: 700 calc(22 * var(--u)) 'Mitr', sans-serif; }
.gwr-card.b h3 { color: #2f6db0; } .gwr-card.r h3 { color: #b0443f; }
.gwr-table { width: 100%; border-collapse: collapse; font-size: calc(15 * var(--u)); }
.gwr-table th { text-align: left; font-weight: 600; color: #5b5470; border-bottom: calc(2 * var(--u)) solid rgba(42, 36, 53, 0.25); }
.gwr-table td, .gwr-table th { padding: calc(2 * var(--u)) calc(6 * var(--u)); white-space: nowrap; }
.gwr-table td.n { text-align: right; } .gwr-table tr.me td { font-weight: 700; background: rgba(255, 210, 122, 0.45); }
.gwr-rules { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)) calc(14 * var(--u)); margin: calc(10 * var(--u)) 0; font-size: calc(16 * var(--u)); }
.gwr-rules div { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.gwr-rules img { height: calc(30 * var(--u)); }
.gwr-status { display: inline-block; padding: calc(2 * var(--u)) calc(14 * var(--u)); border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #c9c2d6; font-weight: 600; }
.gwr-status.open { background: #9be37a; }
.gwr-btns { display: flex; gap: calc(12 * var(--u)); justify-content: center; margin-top: calc(14 * var(--u)); }
.gwr-btns button { font: 700 calc(22 * var(--u)) 'Mitr', sans-serif; padding: calc(6 * var(--u)) calc(28 * var(--u)); border-radius: calc(16 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); background: #ffd27a; color: var(--ink); cursor: pointer; box-shadow: 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.gwr-btns button.grey { background: #c9c2d6; }
.gwr-btns button:disabled { opacity: 0.5; cursor: default; }
.gwr-note { margin-top: calc(8 * var(--u)); color: #6a6280; font-size: calc(15 * var(--u)); text-align: center; }
.gwr-result { text-align: center; margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); }
.gwr-result b { display: block; font: 800 calc(44 * var(--u)) / 1.1 'Baloo 2', 'Mitr', sans-serif; -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill; }
.gwr-result b.b { color: #6cbcff; } .gwr-result b.r { color: #ff7466; } .gwr-result b.d { color: #fff4dc; }
.gwr-mine { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); font-weight: 600; }
.gwr-mine img { height: calc(44 * var(--u)); }
/* the war board: the four lands */
.gwr-win .card.wide { width: min(97vw, calc(1240 * var(--u))); }
.gwr-zones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.gwr-zone { display: flex; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); background: #fff9ec; }
.gwr-zone.mine { background: #e7f3ff; box-shadow: 0 0 0 calc(3 * var(--u)) #74b6ec; }
.gwr-zone img { width: calc(190 * var(--u)); height: calc(127 * var(--u)); object-fit: cover; border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); flex: none; }
.gwr-zt { display: flex; flex-direction: column; gap: calc(1 * var(--u)); font-size: calc(15 * var(--u)); min-width: 0; }
.gwr-zt h3 { margin: 0; font: 700 calc(21 * var(--u)) 'Mitr', sans-serif; }
.gwr-zt small { color: #6a6280; font-size: calc(13 * var(--u)); }
.gwr-zt .gwr-live { color: #b0443f; font-weight: 600; }
.gwr-zb { margin-top: auto; }
.gwr-zb button { font: 700 calc(16 * var(--u)) 'Mitr', sans-serif; padding: calc(3 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #ffd27a; color: var(--ink); cursor: pointer; }
.gwr-zb button.grey { background: #c9c2d6; } .gwr-zb button:disabled { opacity: 0.55; cursor: default; }
/* the guide's spirit steps aside on a war land */
body.gwr-on #journey { display: none !important; }
.gwr-zt .gwr-none { color: #8a8299; font-style: italic; }