/* SAMJHOTA — shared NNP look. Maroon #7B1113, golds #B8860B/#E8C568, cream #FDF8EC. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Kalam:wght@400;700&family=Courier+Prime&display=swap');

:root {
  --maroon: #7B1113; --maroon-deep: #4a0a0c; --dark: #20050A;
  --gold: #B8860B; --gold-bright: #E8C568; --cream: #FDF8EC; --ink: #2b1a12;
  --ok: #3e7a3e; --warn: #b06a00; --bad: #a02020;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--dark); color: var(--cream);
  font-family: 'Kalam', cursive; min-height: 100vh;
  background-image: radial-gradient(ellipse at 50% -10%, #43101455, transparent 60%);
}
h1, h2, h3, .display { font-family: 'Cinzel', serif; letter-spacing: 1px; }
.mono { font-family: 'Courier Prime', monospace; }
.gold { color: var(--gold-bright); }
.muted { opacity: .65; }
button {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  color: var(--cream); border: 1px solid var(--gold);
  border-radius: 10px; padding: 10px 16px; font-size: 15px; cursor: pointer;
}
button:disabled { opacity: .35; cursor: default; }
button.ghost { background: transparent; border-color: #b8860b66; }
button.danger { background: linear-gradient(180deg, #8a1a1a, #4a0a0a); }
button.small { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
input, select {
  font-family: 'Courier Prime', monospace; font-size: 16px;
  background: #14030580; color: var(--cream);
  border: 1px solid #b8860b88; border-radius: 8px; padding: 10px 12px; width: 100%;
}
.card {
  background: linear-gradient(180deg, #2a090cdd, #1a0507ee);
  border: 1px solid #b8860b55; border-radius: 14px; padding: 14px; margin: 10px 0;
}
.card.hot { border-color: var(--gold-bright); box-shadow: 0 0 18px #e8c56822; }
.pill {
  display: inline-block; border: 1px solid #b8860b88; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; margin: 2px;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
.big { font-size: 26px; }
.divider { border-top: 1px solid #b8860b44; margin: 12px 0; }
.res-icon { width: 26px; height: 26px; vertical-align: -7px; }
.mood-icon { width: 22px; height: 22px; vertical-align: -5px; border-radius: 50%; }
.lamp-on::before { content: '●'; color: #6fce6f; margin-right: 6px; }
.lamp-risk::before { content: '◐'; color: var(--gold-bright); margin-right: 6px; }
.lamp-lost::before { content: '○'; color: #888; margin-right: 6px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px;
  background: var(--maroon-deep); border: 1px solid var(--gold);
  padding: 10px 18px; border-radius: 12px; z-index: 60; max-width: 92vw;
  animation: fadein .2s;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.overlay {
  position: fixed; inset: 0; background: #000000cc; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay .card { max-width: 480px; width: 100%; max-height: 86vh; overflow-y: auto; }
.timer { font-family: 'Courier Prime', monospace; font-size: 22px; color: var(--gold-bright); }
.banner {
  background: linear-gradient(90deg, transparent, #7b111388, transparent);
  text-align: center; padding: 8px; font-family: 'Cinzel', serif; letter-spacing: 2px;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #b8860b66; border-radius: 3px; }

/* 20 Jul playtest fixes */
.rlbl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: .75; margin-right: 2px; }
.proj { font-size: 13px; font-family: 'Courier Prime', monospace; padding: 4px 2px; }
.proj .after-bad { color: #ff9c9c; }
button.dice-sel { background: var(--gold); color: #1a0507; border-color: var(--gold-bright); font-weight: 700; }

.timer.urgent { color: #ff6b6b !important; animation: urgentpulse 1s infinite; }
@keyframes urgentpulse { 50% { opacity: .45; } }

#toast { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#toast .toast { transition: opacity .4s; }

.banner-war { background: #7B1113 !important; border-color: #ff6b6b !important;
  animation: urgentpulse 1.4s infinite; font-weight: 700; }