/* Galactic Scavengers — shared space theme (Uranus palette) */
:root {
  --bg: #040915;
  --bg2: #0a1630;
  --panel: rgba(12, 28, 58, 0.72);
  --panel-2: rgba(20, 44, 84, 0.72);
  --line: rgba(140, 232, 240, 0.18);
  --line-2: rgba(140, 232, 240, 0.35);
  --text: #eaf8ff;
  --muted: #94b6cc;
  --uranus: #7fe3ea;
  --uranus-2: #4cc3cf;
  --accent: #b5f4ff;
  --gold: #ffd66e;
  --silver: #d6e2ee;
  --bronze: #e6a46b;
  --good: #5ef0a6;
  --bad: #ff6b8a;
  --warn: #ffb547;
  --violet: #a79bff;
  --radius: 18px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: 'IBM Plex Sans Thai', 'Sarabun', system-ui, sans-serif;
  --font-head: 'Kanit', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-num: 'Orbitron', 'Kanit', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.gold { color: var(--gold); }
.hidden { display: none !important; }

/* ---------- space backdrop ---------- */
.space {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, rgba(76, 195, 207, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 90%, rgba(120, 90, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #040915 0%, #071331 55%, #040915 100%);
}
.stars, .stars2, .stars3 {
  position: absolute; inset: -50%;
  background-repeat: repeat;
  animation: drift 240s linear infinite;
}
.stars {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #cfefff, transparent),
    radial-gradient(1px 1px at 200px 160px, #fff, transparent),
    radial-gradient(1px 1px at 60px 210px, #bfe9ff, transparent),
    radial-gradient(1px 1px at 260px 40px, #fff, transparent);
  background-size: 300px 260px; opacity: 0.7;
}
.stars2 {
  background-image:
    radial-gradient(1.5px 1.5px at 50px 90px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 330px 220px, #d9f6ff, transparent),
    radial-gradient(1.5px 1.5px at 180px 300px, #fff, transparent);
  background-size: 420px 380px; opacity: 0.55; animation-duration: 360s;
}
.stars3 {
  background-image:
    radial-gradient(2px 2px at 140px 120px, #fff, transparent),
    radial-gradient(2px 2px at 460px 380px, #9ff0ff, transparent);
  background-size: 620px 520px; opacity: 0.8; animation: drift 520s linear infinite, twinkle 5s ease-in-out infinite;
}
@keyframes drift { to { transform: translate3d(-300px, -150px, 0); } }
@keyframes twinkle { 50% { opacity: 0.35; } }

/* Uranus: pale cyan, featureless, rings nearly vertical (98° axial tilt) */
.uranus {
  position: fixed; z-index: -1; pointer-events: none;
  width: var(--size, 520px); height: var(--size, 520px);
  right: var(--right, -140px); top: var(--top, -120px);
}
.uranus .ball {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at 40% 38%, #d9fbff 0%, #a6eef3 22%, #6fd5df 48%, #2f97a8 72%, #0d3d4d 100%);
  box-shadow: 0 0 80px rgba(127, 227, 234, 0.35), inset -40px -30px 80px rgba(0, 20, 40, 0.65);
}
.uranus .band {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0.25;
  background: repeating-linear-gradient(8deg, transparent 0 18%, rgba(255, 255, 255, 0.25) 18% 19%, transparent 19% 31%);
  mix-blend-mode: soft-light;
}
.uranus .ring {
  position: absolute; left: 50%; top: 50%;
  width: 34%; height: 165%;
  transform: translate(-50%, -50%) rotate(14deg);
  border-radius: 50%;
  border: 3px solid rgba(190, 245, 255, 0.55);
  box-shadow: 0 0 0 7px rgba(140, 220, 235, 0.12), 0 0 0 13px rgba(140, 220, 235, 0.07);
}
.uranus .ring.back { clip-path: inset(0 0 50% 0); z-index: -1; }
.uranus .ring.front { clip-path: inset(50% 0 0 0); }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.panel-head h2, .panel-head h3 { display: flex; align-items: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(127, 227, 234, 0.08);
  font-size: 0.9em; white-space: nowrap;
}
.chip.gold { border-color: rgba(255, 214, 110, 0.5); background: rgba(255, 214, 110, 0.1); }
.chip.bad { border-color: rgba(255, 107, 138, 0.5); background: rgba(255, 107, 138, 0.1); }
.chip.good { border-color: rgba(94, 240, 166, 0.5); background: rgba(94, 240, 166, 0.1); }
.chip.violet { border-color: rgba(167, 155, 255, 0.5); background: rgba(167, 155, 255, 0.12); color: #d7d1ff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border-radius: 14px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(127, 227, 234, 0.18), rgba(127, 227, 234, 0.06));
  font-family: var(--font-head); font-weight: 500; font-size: 1.05rem;
  cursor: pointer; transition: transform 0.08s, filter 0.15s, opacity 0.15s;
  user-select: none; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #8ff0f5, #3fb9c7); color: #032430; border-color: transparent; font-weight: 600; }
.btn.gold { background: linear-gradient(180deg, #ffe08f, #f0b23a); color: #3a2400; border-color: transparent; font-weight: 600; }
.btn.danger { background: linear-gradient(180deg, rgba(255, 107, 138, 0.35), rgba(255, 107, 138, 0.15)); border-color: rgba(255, 107, 138, 0.6); }
.btn.good { background: linear-gradient(180deg, rgba(94, 240, 166, 0.4), rgba(94, 240, 166, 0.15)); border-color: rgba(94, 240, 166, 0.6); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 0.95rem; border-radius: 10px; }
.btn.block { width: 100%; }

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(4, 12, 30, 0.7); outline: none;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--uranus); box-shadow: 0 0 0 3px rgba(127, 227, 234, 0.2); }
label { display: block; font-size: 0.92rem; color: var(--muted); margin: 10px 0 6px; }

/* ---------- toast ---------- */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; width: min(92vw, 520px); }
.toast {
  padding: 14px 18px; border-radius: 14px; font-size: 1.05rem;
  background: rgba(10, 24, 50, 0.95); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  animation: toast-in 0.25s ease-out;
}
.toast.bad { border-color: rgba(255, 107, 138, 0.7); }
.toast.good { border-color: rgba(94, 240, 166, 0.7); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 6, 18, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade 0.2s;
}
.modal { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; }
@keyframes fade { from { opacity: 0; } }

.logo { font-family: var(--font-num); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(90deg, #e7fdff, var(--uranus) 50%, #a79bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- dice (3D) ---------- */
.dice-stage { perspective: 900px; display: grid; place-items: center; height: 220px; }
.dice {
  width: 140px; height: 140px; position: relative; transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(0.16, 0.9, 0.25, 1);
}
.dice.idle { animation: dice-float 3s ease-in-out infinite; }
@keyframes dice-float { 50% { transform: rotateX(-20deg) rotateY(30deg) translateY(-10px); } }
.dice .face {
  position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(145deg, #f6feff, #bfeef3);
  border: 2px solid #8fdde6; box-shadow: inset 0 0 18px rgba(0, 80, 100, 0.25);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 18px;
}
.dice .pip { width: 24px; height: 24px; border-radius: 50%; background: #0b3542; place-self: center; box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.5); }
.dice .f1 { transform: rotateY(0deg) translateZ(70px); }
.dice .f2 { transform: rotateY(90deg) translateZ(70px); }
.dice .f3 { transform: rotateX(90deg) translateZ(70px); }
.dice .f4 { transform: rotateX(-90deg) translateZ(70px); }
.dice .f5 { transform: rotateY(-90deg) translateZ(70px); }
.dice .f6 { transform: rotateY(180deg) translateZ(70px); }

/* ---------- misc ---------- */
.grid { display: grid; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.blink { animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.tool-icon { font-size: 1.8em; line-height: 1; }
.up { color: var(--bad); }
.down { color: var(--good); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: #0b1a36; }
table.data td.r, table.data th.r { text-align: right; }
.bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--uranus-2), var(--uranus)); }
.confetti { position: fixed; top: -20px; width: 10px; height: 16px; z-index: 900; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }
.fs-btn { position: fixed; left: 12px; bottom: 12px; z-index: 700; opacity: 0.85; }
.fs-btn.on { opacity: 0.25; }
.fs-btn.on:hover { opacity: 0.9; }