/* the online character select (js/online/lobby.js + online/charsel.js), mockup A "campfire circle" (the user's pick
   2026-10-18) and the delete window of mockup E. Sizes in --u = one pixel of the 1536x1024 mockup. */
.cs-root {
  --u: min(calc(100vw / 1536), calc(100vh / 1024));
  position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #0d0b1a; outline: none;
  font: 400 calc(18 * var(--u)) / 1.4 'Mitr', sans-serif; color: var(--ink); user-select: none;
}
.cs-root[hidden], .cs-root [hidden] { display: none !important; } /* (.kw-btn's inline-flex would beat [hidden]) */
.cs-root button { font-family: 'Mitr', sans-serif; }
.cs-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.cs-logo { position: absolute; left: calc(56 * var(--u)); top: calc(22 * var(--u)); width: calc(318 * var(--u)); pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45)); }

/* the account chip (top right) */
.cs-acct {
  position: absolute; right: calc(22 * var(--u)); top: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u)); background: #f7efdc;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); box-shadow: 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.3);
}
.cs-acct-name { font-size: calc(18 * var(--u)); line-height: 1.3; }
.cs-acct-name b { font-weight: 600; }
.cs-srv { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; opacity: 0.85; }
.cs-srv i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #3fcf62; border: calc(3 * var(--u)) solid var(--ink); }
.cs-acct-btns { display: flex; gap: calc(8 * var(--u)); }
.cs-acct .kw-btn { height: calc(40 * var(--u)); font-size: calc(16 * var(--u)); padding: 0 calc(14 * var(--u)); }

.cs-msg { position: absolute; left: 50%; top: calc(30 * var(--u)); transform: translateX(-50%); max-width: calc(620 * var(--u)); }
.cs-msg[hidden] { display: none; }
.cs-msg.bad { background: linear-gradient(#5a2433, #3a1622); }
.cs-msg.bad .i { background: linear-gradient(#ff9d9d, #e0525e); }

/* the name plates over the heroes (anchored by their bottom centre) */
.cs-plates { position: absolute; inset: 0; pointer-events: none; }
.cs-plate {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; text-align: center; white-space: nowrap;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); overflow: hidden; background: #f7efdc;
  box-shadow: 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.35); transition: transform 0.15s;
}
.cs-plate:not(.empty) { min-width: calc(150 * var(--u)); }
.cs-plate-n { position: relative; padding: calc(4 * var(--u)) calc(30 * var(--u)) calc(2 * var(--u)); font: 600 calc(24 * var(--u)) / 1.25 'Mitr', sans-serif; }
.cs-plate:not(.empty) .cs-plate-n::before, .cs-plate:not(.empty) .cs-plate-n::after {
  content: ''; position: absolute; top: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(-6 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4f8ff, #7fb4e6); border: calc(3 * var(--u)) solid var(--ink);
}
.cs-plate-n::before { left: calc(9 * var(--u)); }
.cs-plate-n::after { right: calc(9 * var(--u)); }
.cs-plate-s { padding: calc(3 * var(--u)) calc(16 * var(--u)) calc(5 * var(--u)); background: linear-gradient(#272b47, #1b1e33); color: #eef0ff;
  font: 500 calc(15 * var(--u)) / 1.3 'Mitr', sans-serif; border-top: calc(3 * var(--u)) solid var(--ink); }
.cs-plate:not(.on):not(.empty) { transform: translate(-50%, -100%) scale(0.86); transform-origin: 50% 100%; filter: brightness(0.86); }
.cs-plate.on { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8, 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.35), 0 0 calc(22 * var(--u)) rgba(255, 210, 110, 0.55); }
.cs-plate.empty { transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); border: 0; background: none; box-shadow: none; overflow: visible; }
.cs-plate.empty.cs-bylog { gap: calc(118 * var(--u)); } /* (not .log: the HUD's combat log rule in style.css) */
.cs-plate.empty .cs-plate-n {
  padding: calc(3 * var(--u)) calc(30 * var(--u)); font-size: calc(19 * var(--u)); font-weight: 500; background: #f7efdc;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.35);
}
.cs-plate.empty .cs-plate-n::before, .cs-plate.empty .cs-plate-n::after {
  content: ''; position: absolute; top: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4f8ff, #7fb4e6); border: calc(3 * var(--u)) solid var(--ink);
}
.cs-plate.empty .kw-btn { height: calc(54 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(20 * var(--u)); }
.cs-plate.empty.on .cs-plate-n { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.35); }

/* the picked hero's card (right) */
.cs-card { position: absolute; right: calc(22 * var(--u)); top: calc(178 * var(--u)); width: calc(460 * var(--u)); }
.cs-card[hidden] { display: none; }
.cs-card .kw-title { height: calc(52 * var(--u)); font-size: calc(30 * var(--u)); }
.cs-card .kw-title::after {
  content: ''; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u));
  margin-top: calc(-8 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4f8ff, #9fb6cf); border: calc(3 * var(--u)) solid var(--ink);
}
.cs-card-body { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.cs-card-top { display: flex; gap: calc(16 * var(--u)); align-items: stretch; }
.cs-port { flex: none; width: calc(170 * var(--u)); height: calc(200 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid #d4c6a6;
  background: radial-gradient(ellipse at 50% 70%, #f6ecd6, #e6d8b8); display: grid; place-items: center; overflow: hidden; }
.cs-port canvas { width: 100%; height: 100%; }
.cs-facts { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); min-width: 0; }
.cs-lv { font: 600 calc(22 * var(--u)) / 1.25 'Mitr', sans-serif; }
.cs-sub { font-size: calc(17 * var(--u)); opacity: 0.75; margin-bottom: calc(6 * var(--u)); }
.cs-fact { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; }
.cs-fact img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); object-fit: contain; flex: none; }
.cs-gear { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(8 * var(--u)); }
.cs-gear[hidden] { display: none; }
.cs-gslot { aspect-ratio: 1; border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #e9dfc8;
  box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.12); display: grid; place-items: center; overflow: hidden; }
.cs-gslot canvas { width: 86%; height: 86%; }
.cs-gslot.none { background: #e6dcc4; border-style: dashed; border-color: #b9aa88; box-shadow: none; }
.cs-card.empty .cs-port { background: radial-gradient(ellipse at 50% 70%, #f1e7d1, #ddd0b3); }

/* the bar (bottom centre): ลบตัวละคร · เข้าเล่น · ตัวละคร n / 3 */
.cs-bar { position: absolute; left: 50%; bottom: calc(92 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(28 * var(--u)); }
.cs-play { height: calc(86 * var(--u)); min-width: calc(300 * var(--u)); padding: 0 calc(30 * var(--u)); border-width: calc(5 * var(--u));
  border-radius: calc(22 * var(--u)); font: 700 calc(42 * var(--u)) / 1 'Mitr', sans-serif;
  box-shadow: inset 0 calc(-6 * var(--u)) 0 rgba(0, 0, 0, 0.16), 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.35), 0 0 calc(30 * var(--u)) rgba(255, 210, 100, 0.35); }
.cs-delbtn { height: calc(54 * var(--u)); min-width: calc(190 * var(--u)); background: linear-gradient(#d65f68, #a8394a); font-size: calc(19 * var(--u)); }
.cs-delbtn img { height: calc(28 * var(--u)); width: auto; margin-right: calc(4 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.25)); }
.cs-delbtn[hidden] { display: none; }
.cs-count { height: calc(54 * var(--u)); display: flex; align-items: center; padding: 0 calc(30 * var(--u)); background: #f7efdc; white-space: nowrap;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); font: 500 calc(19 * var(--u)) / 1 'Mitr', sans-serif;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.cs-count:empty { display: none; }
.cs-hint { position: absolute; left: 50%; bottom: calc(44 * var(--u)); transform: translateX(-50%); white-space: nowrap; color: #fff;
  font: 500 calc(18 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill; }
.cs-offline { position: absolute; left: calc(22 * var(--u)); bottom: calc(18 * var(--u)); color: #cfd8ff; font-size: calc(15 * var(--u)); opacity: 0.8; }
/* the copyright line, bottom right (an upright phone: centred under the account chip) */
.cs-copy { position: absolute; right: calc(22 * var(--u)); bottom: calc(18 * var(--u)); pointer-events: none; white-space: nowrap;
  font: 400 max(10px, calc(14 * var(--u))) / 1 'Mitr', sans-serif; color: rgba(236, 228, 255, 0.75);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* the K windows over it: logging in, deleting */
.cs-modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(10, 8, 24, 0.62); }
.cs-modal[hidden] { display: none; }
.cs-form { width: calc(540 * var(--u)); }
.cs-form-body { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); }
.cs-form-sub { font-size: calc(17 * var(--u)); opacity: 0.8; }
.cs-form input, .cs-del-in {
  box-sizing: border-box; width: 100%; height: calc(54 * var(--u)); padding: 0 calc(16 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(14 * var(--u)); background: #fffaf0; color: var(--ink); font: 500 calc(20 * var(--u)) / 1 'Mitr', sans-serif; outline: none;
}
.cs-form input:focus, .cs-del-in:focus { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8; }
.cs-form input[hidden] { display: none; }
.cs-form-btns { display: flex; gap: calc(10 * var(--u)); }
.cs-form-btns .kw-btn { flex: 1; height: calc(50 * var(--u)); font-size: calc(19 * var(--u)); }
.cs-err { min-height: calc(20 * var(--u)); color: #c63a48; font-size: calc(16 * var(--u)); font-weight: 500; }
.cs-err:empty { min-height: 0; }

.cs-delwin { width: calc(1030 * var(--u)); }
.cs-redtitle { background: linear-gradient(#ff9f73, #e2503f); height: calc(56 * var(--u)); }
.cs-del-body { display: grid; grid-template-columns: calc(390 * var(--u)) 1fr; gap: calc(24 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); }
.cs-del-port { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-radius: calc(18 * var(--u));
  border: calc(3 * var(--u)) solid #d4c6a6; background: radial-gradient(ellipse at 50% 72%, #fbf4e4, #eadcbf); padding-bottom: calc(14 * var(--u)); }
.cs-del-port canvas { width: calc(300 * var(--u)); height: calc(400 * var(--u)); }
.cs-del-cap { font-size: calc(17 * var(--u)); font-weight: 500; text-align: center; padding: 0 calc(10 * var(--u)); }
.cs-del-r { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.cs-del-q { font: 600 calc(24 * var(--u)) / 1.3 'Mitr', sans-serif; }
.cs-del-q b { color: #c63a48; }
.cs-del-lost { padding: calc(12 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.cs-del-h { font-weight: 600; font-size: calc(20 * var(--u)); }
.cs-del-row { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: calc(19 * var(--u)); padding-left: calc(12 * var(--u)); }
.cs-del-row img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); object-fit: contain; flex: none; }
.cs-del-kept { margin-top: calc(4 * var(--u)); padding-top: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid #3a4170; color: #8ff08a; font-weight: 500; font-size: calc(18 * var(--u)); }
.cs-del-kept.warn { color: #ffb36b; }
.cs-del-l { font-weight: 600; font-size: calc(19 * var(--u)); margin-top: calc(4 * var(--u)); }
.cs-del-field { position: relative; }
.cs-del-field.ok .cs-del-in { border-color: #c63a48; box-shadow: 0 0 0 calc(3 * var(--u)) #ff9d9d; }
.cs-del-ghost { position: absolute; right: calc(18 * var(--u)); top: 50%; transform: translateY(-50%); color: #a39b8c; font-size: calc(19 * var(--u)); pointer-events: none; }
.cs-del-ghost[hidden] { display: none; }
.cs-del-btns { display: flex; gap: calc(14 * var(--u)); justify-content: flex-end; }
.cs-del-btns .kw-btn { width: calc(250 * var(--u)); height: calc(56 * var(--u)); font-size: calc(21 * var(--u)); }

/* a short landscape screen (a phone on its side): one unit per 1/720 of the height, the hint and logo smaller */
@media (orientation: landscape) and (max-height: 560px) {
  .cs-root { --u: min(calc(100vh / 720), calc(100vw / 1300)); }
  .cs-hint { display: none; }
  .cs-bar { bottom: calc(26 * var(--u)); }
  .cs-card { top: calc(122 * var(--u)); }
  .cs-logo { width: calc(240 * var(--u)); top: calc(12 * var(--u)); }
  .cs-offline { display: none; }
  .cs-copy-x { display: none; }
}
/* an upright phone: the camp is a band on top (online/charsel.js fits the heroes into it), the card and the bar below */
@media (max-aspect-ratio: 9/10) {
  .cs-root { --u: calc(100vw / 600); }
  .cs-logo { left: 50%; transform: translateX(-50%); width: calc(250 * var(--u)); top: calc(14 * var(--u)); }
  .cs-acct { right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: calc(30 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)); }
  .cs-card { right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: calc(268 * var(--u)); width: calc(560 * var(--u)); }
  .cs-bar { bottom: calc(168 * var(--u)); gap: calc(14 * var(--u)); } /* (card, bar and account chip 20 higher: the copyright line under them) */
  .cs-play { min-width: calc(220 * var(--u)); height: calc(76 * var(--u)); font-size: calc(36 * var(--u)); }
  .cs-delbtn { min-width: 0; padding: 0 calc(14 * var(--u)); }
  .cs-count { padding: 0 calc(16 * var(--u)); }
  .cs-hint, .cs-offline, .cs-acct-x { display: none; }
  .cs-copy { right: 50%; transform: translateX(50%); bottom: calc(6 * var(--u)); font-size: 10px; }
  .cs-msg { top: auto; bottom: calc(118 * var(--u)); }
  .cs-delwin { width: calc(580 * var(--u)); }
  .cs-del-body { grid-template-columns: 1fr; }
  .cs-del-port { flex-direction: row; justify-content: center; gap: calc(10 * var(--u)); padding: 0 calc(10 * var(--u)) 0 0; }
  .cs-del-port canvas { width: calc(120 * var(--u)); height: calc(160 * var(--u)); }
  .cs-del-btns .kw-btn { flex: 1; width: auto; }
}

/* the key window (KEY_ONLY, the beta's only way in; lobby.js keyScreen): over the empty camp */
.cs-root.keyed .cs-bar, .cs-root.keyed .cs-hint, .cs-root.keyed .cs-card, .cs-root.keyed .cs-plates { display: none; }
.cs-keybox { background: rgba(10, 8, 24, 0.38); }
.cs-keywin { width: calc(640 * var(--u)); }
.cs-key-body { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); }
.cs-key-sub { font-size: calc(18 * var(--u)); opacity: 0.8; text-align: center; }
.cs-key-l { font-weight: 600; font-size: calc(19 * var(--u)); margin-top: calc(6 * var(--u)); }
.cs-key-in {
  box-sizing: border-box; width: 100%; height: calc(66 * var(--u)); padding: 0 calc(14 * var(--u)); text-align: center;
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(16 * var(--u)); background: #fffaf0; color: var(--ink); outline: none;
  font: 600 calc(28 * var(--u)) / 1 'Baloo 2', 'Mitr', monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.cs-key-in::placeholder { color: #c4b9a2; letter-spacing: 0.08em; }
.cs-key-in:focus { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8; }
.cs-key-meta { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); opacity: 0.75; }
.cs-key-n { font-weight: 600; white-space: nowrap; }
.cs-key-n.ok { color: #2f9e4a; opacity: 1; }
.cs-key-go { height: calc(64 * var(--u)); font-size: calc(26 * var(--u)); margin-top: calc(4 * var(--u)); }
.cs-key-foot { font-size: calc(14 * var(--u)); opacity: 0.65; text-align: center; }
@media (max-aspect-ratio: 9/10) { .cs-keywin { width: calc(570 * var(--u)); } .cs-key-meta { flex-direction: column; gap: calc(2 * var(--u)); } }
.cs-key-srv { font-size: calc(15 * var(--u)); text-align: center; opacity: 0.75; }
.cs-key-srv b { font-weight: 600; }
.cs-key-warn { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #ffe1d6; border: calc(3 * var(--u)) solid #e2503f;
  color: #8e2a1f; font-size: calc(15 * var(--u)); font-weight: 500; text-align: center; }