* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

/* ---------- crosshair ---------- */
#cross { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 10; }
.ch { position: absolute; left: 50%; top: 50%; background: #fff; box-shadow: 0 0 2px #000; }
.ch[data-ax="x"] { width: 8px; height: 2px; margin-left: -4px; margin-top: -1px; }
.ch[data-ax="y"] { width: 2px; height: 8px; margin-left: -1px; margin-top: -4px; }
#dot { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; background: var(--accent); }

/* ---------- layar masuk ---------- */
#hint { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(6,10,12,.80), rgba(6,10,12,.96)); }
#hint .card { text-align: center; max-width: 620px; padding: 0 28px; background: none; border: none; }
#hint .card h1 { font-family: var(--display); font-size: 76px; font-weight: 700; letter-spacing: 9px;
  color: var(--accent); line-height: 1; }
.sub { margin-top: 6px; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--dim); }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 34px 0 26px;
  font-size: 14px; color: var(--dim); }
kbd { display: inline-block; min-width: 22px; padding: 3px 6px; margin-right: 3px;
  font: 600 11px/1 var(--body); text-align: center; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; }
.tip { font-size: 14px; line-height: 1.65; color: var(--dim); border-left: 2px solid var(--accent-2);
  padding-left: 16px; text-align: left; }
.tip em { color: var(--accent-2); font-style: normal; font-weight: 600; }
.go { margin-top: 30px; font-family: var(--display); font-size: 24px; letter-spacing: 5px;
  color: var(--text); text-transform: uppercase; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

/* ============================================================
   HUD — dibangun oleh js/ui/hud.js.
   Semua teksnya datang dari js/theme.js; nol istilah bertema di sini.
   ============================================================ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: var(--body); }
/* Scrim: HUD harus terbaca di atas lantai terang MAUPUN bayangan gelap.
   Tanpa ini, teks tipis di tepi bawah praktis lenyap saat siang. */
/* z-index -1, BUKAN "position: relative" pada anak-anaknya. Versi
   pertama memakai `#hud > * { position: relative }` untuk menaikkan
   isinya di atas scrim -- dan itu MENIMPA position:absolute setiap
   elemen HUD, menjatuhkan semuanya ke pojok kiri atas.
   #hud sendiri punya z-index 10, jadi -1 tetap terkurung di dalamnya. */
#hud::before { content: ''; position: absolute; inset: auto 0 0 0; height: 190px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,8,10,.62) 62%, rgba(4,8,10,.80)); }
#hud::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 130px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,10,.62), transparent); }
#hud button { pointer-events: auto; }

.hud-top { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-mid { display: flex; align-items: center; gap: 16px; }
.sc { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; min-width: 44px; }
.sc.atk { color: var(--text); text-align: right; }
.sc.def { color: var(--dim); text-align: left; }
.clockbox { background: rgba(6,10,12,.78); border: 1px solid var(--line); padding: 5px 16px 2px; border-radius: 3px; }
.timer { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: 2px; color: var(--text); }
.timer.fuse { color: var(--fuse); animation: fuseBeat 1s steps(2) infinite; }
@keyframes fuseBeat { 50% { opacity: .55 } }
.phase { margin-top: 5px; font-size: 11px; letter-spacing: 4px; color: var(--dim); text-transform: uppercase; }

.hud-team { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.dot { width: 34px; height: 4px; background: linear-gradient(90deg, var(--defend) var(--hp,100%), rgba(255,255,255,.12) 0); border-radius: 2px; }
.dot.me { height: 6px; margin-top: -1px; }
.dot.dead { background: rgba(255,255,255,.10); }

/* ---------- minimap ---------- */
/* Kiri atas: tempat yang sudah dicari mata pemain di seluruh genre. */
.hud-mm { position: absolute; top: 18px; left: 22px; }
.mmap { position: relative; background: rgba(6,10,12,.66); border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; box-shadow: 0 6px 26px rgba(0,0,0,.5); }
.mmap canvas { display: block; }

.hud-feed { position: absolute; top: 16px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fi { display: flex; align-items: center; gap: 8px; font-size: 13px; background: rgba(6,10,12,.72);
  border: 1px solid var(--line); padding: 4px 10px; border-radius: 3px; }
.fi.mine { border-color: var(--accent); }
.fi b { font-weight: 600; } .fi b.atk { color: var(--attack); } .fi b.def { color: var(--defend); }
.fi i { font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--dim); }

/* ---------- bilah bawah ----------
   Vital dan kemampuan menyatu di tengah; inventaris di kanan. Yang
   menentukan hidup-mati dekat dengan garis pandang, bukan di sudut. */
.hud-bottom { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 30px; }

.hud-l { position: relative; display: flex; align-items: baseline; gap: 10px; padding-bottom: 11px; }
.hud-l b { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--text); text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.hud-l b.low { color: var(--danger); }
.armor { font-size: 17px; color: var(--accent-2); font-weight: 600; }
/* Bilah tipis di bawah angka: angka saja terlalu lambat dibaca saat
   sedang ditembaki -- panjang bisa dinilai tanpa membaca. */
.hpbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.12); display: block; }
.hpbar u { display: block; height: 100%; background: var(--text); text-decoration: none;
  transition: width .12s linear; }
.hpbar.low u { background: var(--danger); }

.hud-r { position: absolute; right: 42px; bottom: 26px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.hud-r b { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--accent); text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.hud-r b.dim { opacity: .35; }
.lbl { font-size: 12px; letter-spacing: 3px; color: #a9bbbf; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.money { font-size: 13px; letter-spacing: 1px; color: var(--accent); }

/* ---------- slot kemampuan ----------
   Kotak berposisi TETAP, bukan daftar yang menyusut. Slot kosong
   diredupkan supaya jari bisa menghafal letaknya. */
.hud-kit { display: flex; gap: 6px; align-items: flex-end; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px;
  padding: 7px 8px 6px; background: rgba(6,10,12,.62); border: 1px solid var(--line);
  border-radius: 3px; font-style: normal; transition: opacity .14s, border-color .14s; }
.slot b { display: grid; place-items: center; min-width: 17px; height: 17px;
  font: 700 11.5px/1 var(--body); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 2px; color: var(--text); }
.slot span { font-size: 10.5px; letter-spacing: 1.4px; color: #9fb0b4; white-space: nowrap; }
.slot em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent-2); }
.slot.out { opacity: .32; }
.slot.ult.ready { opacity: 1; border-color: var(--accent);
  box-shadow: 0 0 20px rgba(201,162,74,.26); }
.slot.ult.ready b { border-color: var(--accent); background: var(--accent); color: #0a0f10; }
.slot.ult.ready em { color: var(--accent); letter-spacing: 1px; }

.hud-act { position: absolute; left: 50%; bottom: 33%; transform: translateX(-50%); width: 280px;
  text-align: center; transition: opacity .12s; }
.hud-act span { display: block; font-family: var(--display); font-size: 21px; letter-spacing: 5px; margin-bottom: 6px; }
.hud-act i { display: block; height: 4px; background: var(--accent); width: 0; }
.hud-act.plant span { color: var(--fuse); } .hud-act.plant i { background: var(--fuse); }
.hud-act.douse span { color: var(--defend); } .hud-act.douse i { background: var(--defend); }

.banner { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); text-align: center;
  opacity: 0; transition: opacity .25s; }
.banner.on { opacity: 1; }
.banner b { display: block; font-family: var(--display); font-size: 62px; letter-spacing: 7px; line-height: 1; }
.banner b.w { color: var(--accent-2); } .banner b.l { color: var(--danger); }
.banner span { font-size: 12px; letter-spacing: 4px; color: var(--dim); }

/* ---------- menu beli ---------- */
.buy { position: absolute; inset: 0; display: none; place-items: center; background: rgba(6,10,12,.42); }
.buy.on { display: grid; }
.buy-in { pointer-events: auto; background: rgba(14,20,23,.94); border: 1px solid var(--line);
  padding: 22px 26px 20px; border-radius: 4px; min-width: 520px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.buy-h { display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.buy-h h3 { font-family: var(--display); font-size: 25px; letter-spacing: 5px; color: var(--accent); }
/* Kredit besar: setiap keputusan di layar ini bergantung padanya. */
.buy-cash b { font-family: var(--display); font-size: 29px; color: var(--text); line-height: 1; }
.buy-cash span { font-size: 11px; letter-spacing: 2px; color: var(--dim); margin-left: 5px; }
.cols { display: flex; gap: 22px; }
.col { flex: 1; min-width: 148px; }
.col h4 { font-size: 11.5px; letter-spacing: 3px; color: var(--dim); margin-bottom: 8px; }
.item { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 5px; padding: 8px 11px;
  background: rgba(20,28,32,.8); border: 1px solid var(--line); border-radius: 3px; color: var(--text);
  font-family: var(--body); font-size: 13px; cursor: pointer; transition: border-color .12s, opacity .12s, transform .12s; }
.item:hover { border-color: var(--accent); transform: translateX(2px); }
.item kbd { display: grid; place-items: center; min-width: 16px; height: 16px; flex: 0 0 auto;
  font: 700 10.5px/1 var(--body); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 2px; color: var(--dim); }
.item span { flex: 1; text-align: left; letter-spacing: 1px; }
.item i { font-style: normal; color: var(--accent); font-size: 12px; }
.item.own { border-color: var(--accent-2); } .item.own i { color: var(--accent-2); }
.item.poor { opacity: .32; cursor: not-allowed; }
.item.poor:hover { border-color: var(--line); transform: none; }
.buy .hint { margin-top: 15px; font-size: 11px; color: var(--dim); }
.buy .hint kbd { font: 600 11.5px/1 var(--body); padding: 2px 4px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 2px; }

/* ---------- papan skor ----------
   Dua blok tim, bukan satu tabel campur: dibaca sambil menahan Tab
   setengah detik, jadi "siapa kawan" harus terbaca tanpa dipikir. */
.board { position: absolute; inset: 0; display: none; place-items: center; background: rgba(6,10,12,.86); }
.board.on { display: grid; }
.bd-in { pointer-events: auto; width: min(94vw, 1060px); }
.bd-top { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 16px; }
.bd-top b { font-family: var(--display); font-size: 52px; line-height: 1; color: var(--text); min-width: 66px; text-align: center; }
.bd-top span { font-size: 11px; letter-spacing: 4px; color: var(--dim); }
.bd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bd-side { background: rgba(14,20,23,.86); border: 1px solid var(--line); border-top: 2px solid var(--line);
  border-radius: 3px; padding: 13px 15px 9px; }
.bd-side.atk { border-top-color: var(--attack); } .bd-side.def { border-top-color: var(--defend); }
.bd-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.bd-h b { font-family: var(--display); font-size: 15px; letter-spacing: 4px; color: var(--dim); }
.bd-side.atk .bd-h b { color: var(--attack); } .bd-side.def .bd-h b { color: var(--defend); }
.bd-h i { font-style: normal; font-family: var(--display); font-size: 25px; color: var(--text); }
.board table { border-collapse: collapse; width: 100%; font-size: 13px; }
.board th { font-size: 10.5px; letter-spacing: 2px; color: var(--dim); text-align: right;
  padding: 4px 8px; border-bottom: 1px solid var(--line); font-weight: 600; }
.board th:first-child { text-align: left; }
.board td { padding: 6px 8px; text-align: right; }
.board td:first-child { text-align: left; letter-spacing: .5px; }
/* Nama agen di atas nama pemain: itu yang menentukan apa yang bisa
   mereka lakukan ronde depan, bukan siapa namanya. */
.bd-ag { display: block; font-size: 10.5px; letter-spacing: 2px; color: var(--dim); }
.board tr.me { background: rgba(201,162,74,.11); }
.board tr.me td:first-child { color: var(--accent); }
.board tr.dead { opacity: .40; }
@media (max-width: 860px) { .bd-cols { grid-template-columns: 1fr; } }

/* ============================================================
   LOBBY — dibangun oleh js/ui/lobby.js.
   ============================================================ */
#shell { position: fixed; inset: 0; z-index: 30; overflow-y: auto; }
.lobby { min-height: 100%; position: relative; isolation: isolate; background: var(--bg); }
.lobby::before { content: ''; position: fixed; inset: -4%; z-index: -2;
  background: url('../assets/portraits/lobby-bg.jpg') center 30% / cover no-repeat;
  filter: blur(3px) saturate(.45) brightness(.30); }
.lobby::after { content: ''; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(ellipse at 18% -10%, rgba(74,158,143,.16), transparent 58%),
  radial-gradient(ellipse at 92% 108%, rgba(201,162,74,.13), transparent 52%),
  linear-gradient(180deg, rgba(6,10,12,.80) 0%, rgba(6,10,12,.90) 55%, rgba(6,10,12,.96) 100%); }
.lb-top, .lb-body { position: relative; z-index: 1; }

.lb-top { display: flex; align-items: center; gap: 26px; padding: 0 30px; height: 66px;
  border-bottom: 1px solid var(--line); background: rgba(6,10,12,.82); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 3; }
.lb-brand { font-family: var(--display); font-size: 30px; letter-spacing: 6px; color: var(--accent); }
.lb-tabs { display: flex; gap: 4px; flex: 1; }
.lb-tabs button { background: none; border: none; color: var(--dim); font-family: var(--display);
  font-size: 21px; letter-spacing: 3px; padding: 8px 15px 4px; cursor: pointer; border-bottom: 2px solid transparent; }
.lb-tabs button:hover { color: var(--text); }
.lb-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.lb-me { text-align: right; }
.lb-me b { display: block; font-size: 15px; letter-spacing: 1px; }
.lb-me span { font-size: 11px; letter-spacing: 1px; color: var(--accent); }

.lb-body { padding: 26px 30px 30px; }
/* Tab PLAY mengisi tinggi viewport. Versi pertama meninggalkan 60%
   layar kosong karena tiga kartu setara berdesak di pita atas. */
.lb-play { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 20px;
  height: calc(100vh - 66px - 56px); min-height: 460px; max-width: 1480px; margin: 0 auto; }
.lb-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; min-height: 0; }
.lb-side .card { overflow-y: auto; }

/* Panel mode: seni agen memenuhi kanan, teks dan aksi di kiri. */
.hero-card { position: relative; overflow: hidden; border: 1px solid var(--line);
  border-radius: 4px; background: rgba(12,18,21,.86); isolation: isolate; }
.hc-art { position: absolute; inset: 0 0 0 28%; z-index: 0;
  background-size: cover; background-position: 58% 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.hero-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,15,17,.96) 0%, rgba(10,15,17,.86) 34%, transparent 66%),
    linear-gradient(0deg, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 46%); }
.hc-body { position: relative; z-index: 2; max-width: 520px; padding: 42px 40px;
  display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hc-kicker { font-size: 11px; letter-spacing: 4px; color: var(--dim); }
.hc-body h2 { font-family: var(--display); font-size: clamp(38px, 4.4vw, 62px); letter-spacing: 7px;
  line-height: 1; color: var(--text); margin: 8px 0 14px; }
.hc-sub { font-size: 14px; line-height: 1.7; color: var(--dim); max-width: 430px; }
.hc-cta { display: flex; gap: 12px; margin-top: 30px; }
.hc-cta button { padding: 16px 38px; border-radius: 3px; font-family: var(--display);
  font-size: 23px; letter-spacing: 5px; cursor: pointer; transition: filter .12s, transform .08s; }
.hc-cta .play { background: var(--accent); border: 1px solid var(--accent); color: #0a0f10; font-weight: 700;
  box-shadow: 0 0 38px rgba(201,162,74,.22); margin-top: 0; }
.hc-cta .playnet { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.hc-cta .playnet:hover { background: var(--accent); color: #0a0f10; }
.hc-cta button:active { transform: scale(.985); }
.hc-note { margin-top: 16px; font-size: 12px; color: var(--dim); max-width: 400px; line-height: 1.6; }
/* Spirit terakhir: kehadiran karakter di menu, bukan layar kosong. */
.hc-spirit { position: absolute; right: 30px; bottom: 26px; z-index: 2; text-align: right; }
.hc-spirit span { display: block; font-size: 10.5px; letter-spacing: 3px; color: var(--dim); }
.hc-spirit b { display: block; font-family: var(--display); font-size: 31px; letter-spacing: 5px; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hc-spirit i { font-style: normal; font-size: 11.5px; letter-spacing: 3px; color: var(--dim); }

@media (max-width: 1020px) {
  .lb-play { grid-template-columns: 1fr; height: auto; }
  .hc-art { inset: 0 0 0 40%; opacity: .5; }
  .hc-body { max-width: none; padding: 30px 24px; }
}
.lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; }
.lb-grid.two { grid-template-columns: repeat(2, 1fr); }
.lb-grid.one { grid-template-columns: 1fr; max-width: 760px; }
@media (max-width: 900px) { .lb-grid, .lb-grid.two { grid-template-columns: 1fr; } }

.card { background: rgba(14,20,23,.80); border: 1px solid var(--line); border-radius: 4px;
  padding: 20px 22px; backdrop-filter: blur(9px); box-shadow: 0 8px 34px rgba(0,0,0,.34); }
.card h3 { font-family: var(--display); font-size: 21px; letter-spacing: 3px; color: var(--accent); margin-bottom: 12px; }
#hint .card .sub, .card .sub { font-size: 13px; line-height: 1.6; color: var(--dim); margin-bottom: 14px; }
.hint { font-size: 12px; line-height: 1.6; color: var(--dim); margin-top: 12px; }

.tier { text-align: center; padding: 16px 0 12px; }
.tier b { display: block; font-family: var(--display); font-size: 36px; letter-spacing: 4px; color: var(--c, var(--text)); line-height: 1; }
.tier span { font-size: 12px; letter-spacing: 4px; color: var(--dim); }
.tier.unranked b { color: var(--dim); }
.rrbar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.rrbar i { display: block; height: 100%; background: var(--accent); }
.rrtxt { font-size: 12px; color: var(--dim); margin-top: 7px; text-align: center; }

.ms { margin-bottom: 11px; }
.ms span { display: block; font-size: 13px; margin-bottom: 5px; }
.ms.done span { color: var(--accent-2); text-decoration: line-through; opacity: .65; }
.msbar { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.msbar i { display: block; height: 100%; background: var(--accent-2); }
.msn { font-style: normal; font-size: 11px; color: var(--dim); }

.startcard { display: flex; flex-direction: column; }
.play, .go, .claimbtn, .back2 { margin-top: auto; padding: 14px; background: var(--accent); border: none;
  border-radius: 3px; color: #0a0f10; font-family: var(--display); font-size: 24px; letter-spacing: 5px; cursor: pointer; }
.play:hover, .go:hover, .claimbtn:hover, .back2:hover { filter: brightness(1.12); }
#hint .go { cursor: pointer; user-select: none; transition: filter .12s, transform .08s; }
#hint .go:active { transform: scale(.985); filter: brightness(.94); }
/* Kartu mulai punya dua tujuan: bot lokal (solid) dan server langsung
   (garis luar). Bedanya sengaja terlihat -- online menyambung ke mesin
   lain dan tidak selalu tersedia. */
.startcard .row { margin-top: auto; }
.startcard .row .play, .startcard .row .playnet { flex: 1; margin-top: 0; font-size: 20px; letter-spacing: 3px; }
.playnet { padding: 14px; border: 1px solid var(--accent); border-radius: 3px; background: transparent;
  color: var(--accent); font-family: var(--display); cursor: pointer; }
.playnet:hover { background: var(--accent); color: #0a0f10; }
.claimbtn:disabled { opacity: .3; cursor: not-allowed; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.stats div b { display: block; font-family: var(--display); font-size: 26px; color: var(--text); line-height: 1; }
.stats div span { font-size: 11.5px; letter-spacing: 2px; color: var(--dim); }

.hist { max-height: 340px; overflow-y: auto; }
.hrow { display: grid; grid-template-columns: 74px 52px 1fr 66px; align-items: center; gap: 8px;
  padding: 8px 10px; border-left: 2px solid var(--line); margin-bottom: 4px; font-size: 13px; background: rgba(255,255,255,.02); }
.hrow.w { border-left-color: var(--accent-2); } .hrow.l { border-left-color: var(--danger); }
.hrow b { font-size: 11px; letter-spacing: 1px; } .hrow.w b { color: var(--accent-2); } .hrow.l b { color: var(--danger); }
.hrow i, .hrow em { font-style: normal; color: var(--dim); font-size: 12px; }
.hrow em { text-align: right; } .hrow em.up { color: var(--accent-2); } .hrow em.down { color: var(--danger); }

.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skin { padding: 16px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: var(--body); cursor: pointer; text-align: left; }
.skin:hover { border-color: var(--accent); }
.skin span { display: block; font-size: 13px; letter-spacing: 1px; margin-bottom: 4px; }
.skin i { font-style: normal; font-size: 11px; color: var(--accent); }
.skin.own { border-color: var(--accent-2); } .skin.own i { color: var(--accent-2); }
.skin.poor { opacity: .35; cursor: not-allowed; }

.savebox { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  color: var(--dim); font: 11px/1.5 ui-monospace, monospace; padding: 9px; resize: vertical; }
.row { display: flex; gap: 9px; margin-top: 10px; align-items: center; }
.copy, .importbtn, .back { flex: 1; padding: 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 3px; color: var(--text); font-family: var(--body); font-size: 12px; letter-spacing: 2px; cursor: pointer; }
.copy:hover, .importbtn:hover, .back:hover { border-color: var(--accent); }
.set { display: grid; grid-template-columns: 1fr 140px 46px; align-items: center; gap: 10px;
  font-size: 13px; margin-bottom: 12px; color: var(--dim); }
.set input { width: 100%; } .sv { color: var(--accent); font-size: 13px; text-align: right; }

/* ---------- klaim identitas ---------- */
.claim { max-width: 470px; margin: 12vh auto; text-align: center; padding: 0 24px; }
.claim h1 { font-family: var(--display); font-size: 68px; letter-spacing: 9px; color: var(--accent); line-height: 1; }
.claim .sub { font-size: 12px; letter-spacing: 3px; color: var(--dim); margin: 6px 0 40px; }
.claim h2 { font-family: var(--display); font-size: 25px; letter-spacing: 4px; margin-bottom: 6px; }
.claim .row { justify-content: center; margin: 18px 0; }
.nameinput { flex: 1; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; color: var(--text); font-family: var(--display); font-size: 26px; letter-spacing: 3px; }
.nameinput:focus { outline: none; border-color: var(--accent); }
.tagpreview { font-family: var(--display); font-size: 26px; color: var(--dim); }
.claim .claimbtn { width: 100%; }

/* ---------- pilih agen ---------- */
.pick { max-width: 1060px; margin: 7vh auto; padding: 0 24px; text-align: center; }
.pick h2 { font-family: var(--display); font-size: 36px; letter-spacing: 7px; margin-bottom: 22px; }
.agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.ag { padding: 20px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c);
  border-radius: 3px; color: var(--text); font-family: var(--body); cursor: pointer; text-align: left; }
.ag:hover { background: var(--panel-2); }
.ag.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.ag b { display: block; font-family: var(--display); font-size: 25px; letter-spacing: 3px; color: var(--c); line-height: 1.1; }
.ag span { display: block; font-size: 11.5px; letter-spacing: 3px; color: var(--dim); margin: 3px 0 12px; }
.ag i { display: block; font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.7; }
.pick .row { max-width: 430px; margin: 26px auto 0; }

/* ---------- hasil ---------- */
.results { max-width: 620px; margin: 13vh auto; text-align: center; padding: 0 24px; }
.verdict { display: block; font-family: var(--display); font-size: 76px; letter-spacing: 9px; line-height: 1; }
.verdict.w { color: var(--accent-2); } .verdict.l { color: var(--danger); }
.bigscore { font-family: var(--display); font-size: 42px; letter-spacing: 5px; color: var(--dim); margin-bottom: 34px; }
.gains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.gains div b { display: block; font-family: var(--display); font-size: 31px; color: var(--accent); line-height: 1; }
.gains div b.up { color: var(--accent-2); } .gains div b.down { color: var(--danger); }
.gains div span { font-size: 11.5px; letter-spacing: 2px; color: var(--dim); }
.levelup { font-family: var(--display); font-size: 21px; letter-spacing: 4px; color: var(--accent-2); margin-bottom: 8px; }
.msdone { font-size: 13px; color: var(--accent-2); margin-bottom: 20px; }
.results .back2 { width: 100%; }

/* ---------- kit: gear & kemampuan ---------- */

/* ============================================================
   PILIH AGEN -- 3D
   Kanvas SATU LAYAR PENUH di belakang; panel mengambang di atasnya.
   Itu yang memberi latar berlapis ruang untuk terbaca, dan pola yang
   dipakai game sejenis: karakter di tengah, informasi di tepi.
   ============================================================ */
.pick3 { position: fixed; inset: 0; background: var(--bg); }
.pick-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* Gelap di tepi, bening di tengah: panel terbaca, karakter tidak tertutup. */
.pk-ui { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  padding: 26px 32px 22px;
  background:
    linear-gradient(90deg, rgba(4,8,10,.92) 0%, rgba(4,8,10,.45) 22%, transparent 36%,
                           transparent 64%, rgba(4,8,10,.45) 78%, rgba(4,8,10,.92) 100%),
    linear-gradient(180deg, rgba(4,8,10,.85) 0%, transparent 18%,
                            transparent 76%, rgba(4,8,10,.90) 100%); }

.pk-head { text-align: center; flex: 0 0 auto; }
.pk-head h2 { font-family: var(--display); font-size: 34px; letter-spacing: 8px; color: var(--text); line-height: 1; }
.pk-sub { margin-top: 7px; font-size: 12px; color: var(--dim); max-width: 620px; margin-inline: auto; line-height: 1.6; }

.pk-grid { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 26px; margin-top: 18px; align-items: stretch; }

/* ---------- kiri: roster ---------- */
.pk-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 6px;
  align-content: start; }
.pk-role { font-family: var(--display); font-size: 11px; letter-spacing: 4px; color: var(--dim);
  margin: 14px 0 5px; }
.pk-role:first-child { margin-top: 0; }
.pk-ag { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 12px; flex: 0 0 auto;
  background: rgba(14,20,23,.78); border: 1px solid var(--line); border-left: 3px solid transparent;
  border-radius: 2px; cursor: pointer; text-align: left;
  backdrop-filter: blur(7px); transition: background .14s, border-color .14s, transform .14s; }
.pk-ag:hover { background: rgba(20,28,32,.88); border-left-color: color-mix(in srgb, var(--c) 55%, transparent);
  transform: translateX(3px); }
.pk-ag.on { background: rgba(20,28,32,.94); border-left-color: var(--c); transform: translateX(3px); }
.pk-ag img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 22%;
  border-radius: 2px; flex: 0 0 auto; filter: grayscale(.6) brightness(.72) contrast(1.05);
  transition: filter .18s; }
.pk-ag:hover img, .pk-ag.on img { filter: grayscale(0) brightness(1) contrast(1.05); }
.pk-ag b { font-family: var(--display); font-size: 19px; letter-spacing: 3px; color: var(--text); }
.pk-ag.on b { color: var(--c); }

/* ---------- tengah: nama saja; karakter digambar kanvas di belakang ---------- */
.pk-stage { position: relative; min-height: 0; pointer-events: none; }
.pk-name { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.pk-name b { font-family: var(--display); font-size: 62px; letter-spacing: 10px; color: var(--c);
  line-height: 1; text-shadow: 0 0 44px color-mix(in srgb, var(--c) 45%, transparent),
                               0 2px 18px rgba(0,0,0,.85); }

/* ---------- kanan: kemampuan ---------- */
.pk-info { overflow-y: auto; display: flex; flex-direction: column; gap: 11px; align-content: start; }
.pk-role-big { font-family: var(--display); font-size: 13px; letter-spacing: 5px; color: var(--c);
  padding-bottom: 9px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.pk-card { background: rgba(14,20,23,.80); border: 1px solid var(--line); border-radius: 2px;
  padding: 13px 15px; backdrop-filter: blur(7px); flex: 0 0 auto; }
.pk-k { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pk-k kbd { font-family: var(--display); font-size: 13px; min-width: 24px; height: 24px; display: grid;
  place-items: center; background: var(--c); color: #0a0f10; border-radius: 2px; font-weight: 700; }
.pk-k b { font-family: var(--display); font-size: 19px; letter-spacing: 3px; color: var(--text); }
.pk-k em { font-style: normal; font-size: 11px; color: var(--dim); }
.pk-price { margin-left: auto; font-size: 11px; letter-spacing: 1px; color: var(--accent); }
.pk-stat { margin-top: 8px; font-size: 12px; color: var(--accent-2); letter-spacing: .4px; }
.pk-flavor { margin-top: 5px; font-size: 12px; color: var(--dim); line-height: 1.65; }

/* ---------- bawah ---------- */
.pk-foot { flex: 0 0 auto; display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.pk-back, .pk-go { padding: 13px 44px; border-radius: 2px; font-family: var(--display);
  font-size: 21px; letter-spacing: 5px; cursor: pointer; border: 1px solid var(--line); }
.pk-back { background: rgba(14,20,23,.7); color: var(--dim); }
.pk-back:hover { color: var(--text); border-color: var(--dim); }
.pk-go { background: var(--c); border-color: var(--c); color: #0a0f10; font-weight: 700;
  box-shadow: 0 0 34px color-mix(in srgb, var(--c) 32%, transparent); }
.pk-go:hover { filter: brightness(1.12); }

@media (max-width: 1040px) {
  .pk-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(150px, 1fr) auto; }
  .pk-list { flex-direction: row; overflow-x: auto; }
  .pk-role { display: none; }
  .pk-name b { font-size: 38px; letter-spacing: 6px; }
  .pk-ui { padding: 18px 16px 16px; }
}


/* ---------- panduan tombol di dalam permainan ----------
   Overlay pembuka hanya tampil sekali. Setelah itu tidak ada apa pun
   yang memberi tahu tombolnya -- pemain pertama yang mencobanya
   melaporkannya persis begitu. */
.hud-help { position: absolute; left: 22px; top: 182px; opacity: 0; transform: translateX(-8px);
  transition: opacity .18s, transform .18s; pointer-events: none; }
.hud-help.on { opacity: 1; transform: none; }
.hh-in { background: rgba(6,10,12,.80); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px; backdrop-filter: blur(8px); width: 236px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.hh-in h4 { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-size: 12px; letter-spacing: 4px; color: var(--accent);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.hh-in h4 i { font-style: normal; font-size: 10.5px; letter-spacing: 1px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 5px; }
.hh-in > div { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.hh-in kbd { flex: 0 0 74px; font: 600 10.5px/1.5 var(--body); letter-spacing: 1px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px;
  padding: 3px 5px; text-align: center; }
.hh-in span { font-size: 11px; color: var(--dim); letter-spacing: .3px; }
.hh-in p { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.6; color: var(--dim); }
.hh-in em { font-style: normal; color: var(--accent-2); font-weight: 600; }

/* ---------- baris instruksi ----------
   Selalu menyebut tindakan BERIKUTNYA dan tombolnya. Sebelum ini yang
   tertulis di atas layar hanya nama tim ("BOARDERS") -- kata benda
   bertema, bukan perintah, dan pemain baru tidak tahu harus ke mana. */
.hud-task { margin-top: 7px; font-size: 13px; letter-spacing: .4px; color: #c3d2d5;
  text-shadow: 0 1px 8px rgba(0,0,0,.95); white-space: nowrap; }
.hud-task b { color: var(--accent); font-weight: 700; }
/* A emas, B teal -- sama dengan penanda dunia dan minimap. */
.hud-task b.a { color: #d8a83c; } .hud-task b.b { color: #3fb8a0; }
.hud-task kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  margin-left: 6px; font: 700 11.5px/1 var(--body); color: #0a0f10; background: var(--accent);
  border-radius: 2px; padding: 0 4px; vertical-align: middle; }

/* ---------- penanda dunia ---------- */
.hud-marks { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center;
  gap: 2px; font-style: normal; text-shadow: 0 2px 10px rgba(0,0,0,.95); }
.mk b { font-family: var(--display); font-size: 15px; letter-spacing: 3px; line-height: 1;
  color: var(--accent); }
.mk span { font-size: 11.5px; letter-spacing: 1px; color: #b3c2c5; }
.mk.site b { color: var(--accent); }
.mk.keg b { color: var(--fuse, #e0893f); }
.mk.fuse b { color: var(--fuse, #e0893f); animation: mkBeat 1s steps(2) infinite; }
@keyframes mkBeat { 50% { opacity: .45 } }
/* Di luar layar: diredupkan dan diberi cincin supaya tidak tertukar
   dengan penanda yang benar-benar terlihat. */
.mk.edge { opacity: .62; }
.mk.edge b { font-size: 13px; }
.mk.edge::before { content: ''; position: absolute; inset: -9px -13px; border: 1px solid currentColor;
  border-radius: 20px; opacity: .35; color: var(--accent); }

/* ============================================================
   BAHASA VISUAL — mengikuti VALORANT, tema kita.
   Dipilih karena mekaniknya identik: 5v5, agen berperan, fase beli,
   objektif yang dipasang. UI-nya memang dirancang untuk informasi
   yang persis sama.

   Empat aturan yang membuatnya terbaca sebagai game, bukan halaman web:
     1. TIDAK ADA sudut membulat. Semua panel dipotong miring.
     2. Kontras ekstrem: panel nyaris hitam, aksen menyala penuh.
     3. Display font berat dengan tracking lebar untuk SETIAP angka.
     4. Blok aksen tegas di tepi, bukan garis tipis mengelilingi.
   ============================================================ */

/* Sudut potong: bentuk tanda tangan genre ini. */
.card, .pk-card, .buy-in, .bd-side, .hh-in, .mmap, .slot, .item,
.hero-card, .pk-ag, .clockbox, .fi {
  border-radius: 0 !important;
}
.card, .pk-card, .buy-in, .bd-side, .hh-in, .hero-card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px,
                     100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.slot, .item, .pk-ag, .mmap {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px,
                     100% 100%, 7px 100%, 0 calc(100% - 7px));
}

/* Tombol: parallelogram miring, bukan persegi. */
.play, .playnet, .pk-go, .pk-back, .claimbtn, .back2, .hc-cta button {
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* Tipografi: semua angka penting memakai display font, berat penuh. */
.sc, .timer, .hud-l b, .hud-r b, .bd-top b, .bd-h i, .buy-cash b,
.tier b, .verdict, .bigscore, .gains div b, .pk-name b, .hc-body h2 {
  font-family: var(--display); font-weight: 900; font-variant-numeric: tabular-nums;
}
.lb-brand, .lb-tabs button, .pk-head h2, .card h3, .pk-card .pk-k b,
.buy-h h3, .bd-h b, .hh-in h4, .col h4, .pk-role, .pk-role-big {
  font-weight: 800;
}

/* Kontras: panel lebih gelap, garis lebih tegas, aksen menyala. */
:root {
  --panel:   #0b1114;
  --panel-2: #121a1e;
  --line:    #24343a;
}
.card, .pk-card, .buy-in, .bd-side, .hh-in { background: rgba(9,14,17,.93); }

/* Blok aksen di tepi kiri, bukan garis tipis mengelilingi. */
.card, .buy-in, .bd-side, .hh-in { position: relative; }
.card::before, .buy-in::before, .hh-in::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 34%; width: 3px;
  background: var(--accent); }
.bd-side.atk::before, .bd-side.def::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 34%; width: 3px; }
.bd-side.atk::before { background: var(--attack); }
.bd-side.def::before { background: var(--defend); }

/* Lencana tombol: blok penuh, bukan kotak berbingkai. */
.slot b, .hh-in kbd, .item kbd, .hud-task kbd {
  background: var(--accent); color: #060a0c; border-color: var(--accent);
  font-weight: 700; border-radius: 0; }
.slot.out b { background: #2a3a40; color: #7f9499; border-color: #2a3a40; }

/* Timer dan skor: blok padat, chevron di sisi. */
.clockbox { background: #060a0c; border: none; padding: 6px 20px 3px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.timer { font-size: 38px; letter-spacing: 1px; }
.sc { font-size: 46px; }
.sc.atk { color: var(--attack); } .sc.def { color: var(--defend); }

/* Fase: pita aksen padat. */
.phase { display: inline-block; margin-top: 6px; padding: 3px 14px 2px;
  background: var(--accent); color: #060a0c; font-family: var(--display);
  font-weight: 800; font-size: 13px; letter-spacing: 5px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.phase:empty { display: none; }

/* Killfeed: blok padat bertepi warna tim. */
.fi { background: rgba(6,10,12,.88); border: none; border-left: 3px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.fi.mine { border-left-color: var(--accent); }


/* ---------- pilih agen: bentuk yang sama dengan sisa permainan ---------- */
.pk-ag, .pk-card, .pk-go, .pk-back { border-radius: 0 !important; }
.pk-go, .pk-back { clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
.pk-card { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px,
                              100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.pk-ag { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px,
                            100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.pk-k kbd { border-radius: 0; font-weight: 800; }
.pk-name b { font-weight: 900; }
.pk-head h2 { font-weight: 900; }

/* ============================================================
   MOBILE
   Lobby dan layar pilih harus tetap bisa dipakai di layar sempit.
   Permainannya sendiri butuh papan ketik dan tetikus -- itu
   dikatakan terus terang lewat #touchgate, bukan dibiarkan pemain
   mengunduh 27 MB lalu menemukan dirinya tidak bisa bergerak.
   ============================================================ */
@media (max-width: 720px) {
  /* Nav: bisa digeser, tidak memotong tab. Sebelumnya THE HOLD dan
     CREW hilang sepenuhnya di luar layar. */
  .lb-top { gap: 12px; padding: 0 14px; height: 56px; }
  .lb-brand { font-size: 21px; letter-spacing: 3px; flex: 0 0 auto; }
  .lb-tabs { overflow-x: auto; scrollbar-width: none; gap: 0; flex: 1 1 auto; min-width: 0; }
  .lb-tabs::-webkit-scrollbar { display: none; }
  .lb-tabs button { font-size: 15px; letter-spacing: 2px; padding: 8px 10px 4px; white-space: nowrap; }
  .lb-me { flex: 0 0 auto; }
  .lb-me b { font-size: 12px; }
  .lb-me span { font-size: 10.5px; }

  .lb-body { padding: 14px; }
  .lb-play { grid-template-columns: 1fr; height: auto; gap: 14px; }

  /* Seni agen jadi LATAR penuh kartu, bukan kolom kanan -- di lebar
     ini kolom kanan menabrak tombol dan teks. */
  .hero-card { min-height: 380px; }
  .hc-art { inset: 0; opacity: .38;
    -webkit-mask-image: none; mask-image: none; background-position: 60% 12%; }
  .hero-card::after { background:
    linear-gradient(180deg, rgba(10,15,17,.82) 0%, rgba(10,15,17,.55) 40%, rgba(10,15,17,.95) 100%); }
  .hc-body { max-width: none; padding: 22px 18px; }
  .hc-body h2 { font-size: 40px; letter-spacing: 4px; }
  .hc-sub { font-size: 13px; max-width: none; }
  .hc-cta { flex-direction: column; gap: 9px; }
  .hc-cta button { width: 100%; font-size: 19px; padding: 14px 0; }
  .hc-spirit { position: static; text-align: left; margin-top: 16px; }
  .hc-spirit b { font-size: 21px; letter-spacing: 3px; }
  .hc-note { font-size: 11px; max-width: none; }

  .lb-side { grid-template-rows: auto auto; }
  .lb-side .card { overflow: visible; }
  .tier b { font-size: 28px; }
}

/* ---------- gerbang sentuh ---------- */
#touchgate { position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
  padding: 24px; background: var(--bg); }
#touchgate.on { display: grid; }
.tg-in { max-width: 420px; text-align: center; }
.tg-in h2 { font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: 6px;
  color: var(--accent); line-height: 1; margin-bottom: 12px; }
.tg-in p { font-size: 14px; line-height: 1.7; color: var(--dim); margin-bottom: 8px; }
.tg-in .tg-note { font-size: 12px; color: var(--dim); opacity: .8; margin-top: 18px; }
.tg-in a { display: inline-block; margin-top: 18px; padding: 13px 30px; background: var(--accent);
  color: #0a0f10; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 4px;
  text-decoration: none; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.tg-in button { margin-top: 12px; display: block; width: 100%; background: none; border: none;
  color: var(--dim); font-family: var(--body); font-size: 12px; letter-spacing: 2px;
  text-decoration: underline; cursor: pointer; }