/* Gravemate paints its own surfaces only. The site background, header, logo,
   wrapper and footer stay owned by cryptic.css — see cc-minigame-standard.md,
   "Backgrounds". Nothing in this file touches body or html. */

:root {
  --gm-line: #00c7d1;
  --gm-soft: rgba(0, 199, 209, .32);
  --gm-text: #d8f7f9;
  --gm-muted: #7fa8ae;
  --gm-bone: #ded6c0;
  --gm-gold: #d8b45a;
  --gm-crimson: #ff6870;
  --gm-panel: rgba(5, 14, 18, .93);
  --gm-deep: rgba(2, 7, 10, .96);
}

/* The hidden attribute is only display:none in the UA stylesheet, and several
   classes below set display. Without this guard every one of them would stay
   on screen while the JavaScript believed it was hidden. */
[hidden] { display: none !important; }

.gm-shell { position: relative; max-width: 1240px; margin: 0 auto; }

.gm-tagline {
  margin: -4px 0 18px; text-align: center; font-family: Cinzel, Georgia, serif;
  letter-spacing: .24em; text-transform: uppercase; font-size: .74rem;
  color: rgba(0, 199, 209, .72);
}

.game-info {
  max-width: 960px; margin: 0 auto 18px; padding: 12px 16px;
  border: 1px solid var(--gm-line); border-radius: 10px; background: var(--gm-panel);
  box-shadow: 0 0 16px rgba(0, 255, 255, .13);
}
.game-info h3 { margin: 0 0 8px; color: #00dfe8; }
.game-info ul { margin: 0; padding-left: 20px; text-align: left; }

/* --- shared controls ----------------------------------------------------- */

.gm-shell .gm-btn {
  font-family: Cinzel, Georgia, serif; font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gm-text); padding: 9px 16px;
  border: 1px solid var(--gm-line); border-radius: 7px;
  background: linear-gradient(rgba(0, 199, 209, .18), rgba(0, 0, 0, .4)), #0a171d;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.gm-shell .gm-btn:hover,
.gm-shell .gm-btn:focus-visible {
  border-color: #00ffff; color: #fff; box-shadow: 0 0 15px rgba(0, 223, 232, .42);
}
.gm-shell .gm-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.gm-shell .gm-btn--primary {
  background: linear-gradient(rgba(0, 223, 232, .34), rgba(0, 0, 0, .35)), #08222a;
}
.gm-shell .gm-btn--danger { border-color: rgba(255, 122, 122, .7); color: #ffd9d9; }
.gm-shell .gm-btn--big { padding: 13px 40px; font-size: .96rem; letter-spacing: .16em; }
.gm-shell .gm-btn--tiny { padding: 4px 10px; font-size: .68rem; }

.gm-shell input[type="text"] {
  font-family: Georgia, serif; color: var(--gm-text); background: rgba(3, 11, 15, .94);
  border: 1px solid var(--gm-soft); border-radius: 6px; padding: 8px 11px;
}
.gm-shell input[type="text"]:focus {
  outline: none; border-color: #00dfe8; box-shadow: 0 0 12px rgba(0, 223, 232, .25);
}

.gm-message { min-height: 1.4em; margin: 12px 0 0; color: var(--gm-gold); font-size: .9rem; }
.gm-message.is-bad { color: var(--gm-crimson); }

/* --- lobby --------------------------------------------------------------- */

.gm-lobby { position: relative; }

.gm-wordmark {
  display: block; width: min(420px, 78%); height: auto; margin: 4px auto 20px;
  image-rendering: pixelated;
}

.gm-modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 980px; margin: 0 auto 20px;
}
.gm-shell .gm-plaque {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 12px; border: 1px solid var(--gm-soft); border-radius: 12px;
  background: var(--gm-deep); color: var(--gm-muted);
  font-family: Cinzel, Georgia, serif; transition: border-color .15s, box-shadow .15s;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.gm-plaque img {
  width: 100%; max-width: 192px; height: auto; image-rendering: pixelated;
  border-radius: 6px; opacity: .72; transition: opacity .15s;
}
.gm-plaque strong {
  font-size: .94rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-text);
}
.gm-plaque span { font-size: .72rem; letter-spacing: .06em; }
.gm-shell .gm-plaque:hover,
.gm-shell .gm-plaque:focus-visible { border-color: var(--gm-line); }
.gm-shell .gm-plaque:hover img { opacity: .95; }
.gm-shell .gm-plaque.is-active {
  border-color: #00ffff; box-shadow: 0 0 22px rgba(0, 223, 232, .3);
  background: linear-gradient(rgba(0, 199, 209, .13), rgba(0, 0, 0, .5)), var(--gm-deep);
}
.gm-plaque.is-active img { opacity: 1; }

/* The hall: the lobby art is the panel, not a background behind grey boxes. */
.gm-hall {
  position: relative; max-width: 980px; margin: 0 auto; border: 1px solid var(--gm-soft);
  border-radius: 14px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, .6) inset;
}
.gm-hall-art {
  display: block; width: 100%; aspect-ratio: 320 / 180;
  background: url('../images/lobby-hall.png') center / cover no-repeat #070a0d;
  image-rendering: pixelated;
}
.gm-hall--quiet .gm-hall-art { filter: brightness(.55) saturate(.8); }

/* The five niches in lobby-hall.png run from 14% to 62% of the art's height,
   with a plinth just below. This band is sized to sit inside them — an
   earlier pass anchored the portraits to the top and they floated on the wall
   above the arches. Sizing is by height so the row tracks the art at any
   width, and the columns match the arch spacing (every 64 of 320 authored). */
/* Each niche in lobby-hall.png is 44 authored pixels wide inside a 64-pixel
   column, its arch runs from 14% to 60% of the art's height, and there is a
   plinth at the bottom. The portrait is therefore sized by WIDTH to the arch
   opening and anchored to the plinth, so it reads as a bust standing in the
   niche. Sizing it by height instead filled every arch edge to edge and hid
   the hall the portraits are supposed to be standing in. */
.gm-niches {
  position: absolute; inset: 14% 0 40%; display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.gm-niches li { display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.gm-shell .gm-niche {
  display: block; width: 66%; max-height: 100%; padding: 0; border: 0;
  background: none; line-height: 0; filter: brightness(.62) saturate(.7);
  transition: filter .18s, transform .18s;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.gm-niche img {
  width: 100%; height: auto; max-height: 100%; object-fit: contain;
  image-rendering: pixelated;
}
.gm-shell .gm-niche:hover,
.gm-shell .gm-niche:focus-visible { filter: brightness(.95); transform: translateY(-3px); }
.gm-shell .gm-niche.is-active {
  filter: brightness(1.12) drop-shadow(0 0 12px rgba(0, 223, 232, .75));
  transform: translateY(-6px);
}

.gm-blurb {
  max-width: 760px; margin: 14px auto 0; min-height: 2.4em;
  font-family: Cinzel, Georgia, serif; font-size: .88rem; color: var(--gm-bone);
  letter-spacing: .04em;
}

/* Share the Slab / Send a Summons sit on top of the dimmed hall */
.gm-hotseat, .gm-summons {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 4vw, 54px); padding: 4%;
}
.gm-side-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 16px; border: 1px solid var(--gm-soft); border-radius: 12px;
  background: rgba(3, 9, 12, .82);
}
.gm-side-card img { width: 56px; height: 56px; image-rendering: pixelated; }
.gm-side-card label, .gm-field-label {
  font-family: Cinzel, Georgia, serif; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gm-muted);
}
.gm-side-card input { width: 148px; text-align: center; }
.gm-versus { font-size: 1.7rem; color: var(--gm-line); }

.gm-scroll {
  flex: 1 1 0; max-width: 320px; padding: 16px 18px; border: 1px solid var(--gm-soft);
  border-radius: 12px; background: rgba(3, 9, 12, .86);
}
.gm-scroll h3 {
  margin: 0 0 8px; color: #00dfe8; font-size: .96rem; letter-spacing: .12em;
  text-transform: uppercase;
}
.gm-scroll p { margin: 0 0 12px; font-size: .8rem; color: var(--gm-muted); }
.gm-code-row { display: flex; gap: 8px; }
.gm-code-row input {
  flex: 1 1 auto; width: 100%; text-transform: uppercase; letter-spacing: .28em;
  text-align: center; font-family: Cinzel, Georgia, serif;
}

.gm-start {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 14px 26px; max-width: 980px; margin: 20px auto 0; padding: 16px 20px;
  border: 1px solid var(--gm-soft); border-radius: 12px; background: var(--gm-panel);
}
.gm-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.gm-field label { font-family: Cinzel, Georgia, serif; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gm-muted); }
.gm-field input { width: 190px; }
.gm-side-pick { display: flex; gap: 6px; }
.gm-shell .gm-side-pick button {
  padding: 8px 14px; border: 1px solid var(--gm-soft); border-radius: 6px;
  background: rgba(3, 11, 15, .9); color: var(--gm-muted);
  font-family: Cinzel, Georgia, serif; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.gm-shell .gm-side-pick button.is-active {
  border-color: #00ffff; color: #fff; background: rgba(0, 199, 209, .2);
}

/* --- table --------------------------------------------------------------- */

.gm-table {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px;
  align-items: start; text-align: left;
}

.gm-crypt {
  position: relative; padding: 14px; border: 1px solid var(--gm-soft); border-radius: 14px;
  background: linear-gradient(rgba(3, 8, 11, .82), rgba(2, 6, 8, .92)),
              url('../images/crypt-backdrop.png') center / cover no-repeat #06090c;
  image-rendering: pixelated;
}

.gm-board-wrap { position: relative; width: 100%; max-width: 660px; margin: 10px auto; }
#board {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
  border-radius: 8px; touch-action: none;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.gm-rail { display: flex; justify-content: center; }
.gm-player {
  display: flex; align-items: center; gap: 12px; width: min(660px, 100%);
  padding: 8px 14px; border: 1px solid var(--gm-soft); border-radius: 10px;
  background: rgba(2, 8, 11, .82);
}
.gm-player.is-turn { border-color: #00ffff; box-shadow: 0 0 16px rgba(0, 223, 232, .28); }
.gm-avatar {
  width: 42px; height: auto; max-height: 58px; object-fit: contain;
  image-rendering: pixelated; flex: 0 0 auto;
}
.gm-player strong {
  display: block; font-family: Cinzel, Georgia, serif; font-size: .92rem;
  letter-spacing: .08em; color: var(--gm-text);
}
.gm-taken { display: block; min-height: 22px; line-height: 0; }
.gm-taken img {
  width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle;
  margin-right: -4px; opacity: .85;
}
.gm-edge {
  margin-left: auto; font-family: Cinzel, Georgia, serif; font-size: .9rem;
  color: var(--gm-gold);
}

/* three drifting soul-lights while the dead are thinking */
.gm-thinking {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  display: flex; gap: 9px; pointer-events: none;
}
.gm-thinking span {
  width: 9px; height: 9px; border-radius: 50%; background: #8cfffc;
  box-shadow: 0 0 12px rgba(0, 223, 232, .9);
  animation: gm-float 1.05s ease-in-out infinite;
}
.gm-thinking span:nth-child(2) { animation-delay: .16s; }
.gm-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes gm-float {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50% { transform: translateY(-9px); opacity: 1; }
}

.gm-sidebar {
  padding: 16px; border: 1px solid var(--gm-soft); border-radius: 14px;
  background: var(--gm-panel);
}
.gm-status {
  margin: 0 0 12px; min-height: 2.6em; font-family: Cinzel, Georgia, serif;
  font-size: .92rem; color: var(--gm-text); letter-spacing: .04em;
}
.gm-status.is-check { color: var(--gm-crimson); }
.gm-status.is-win { color: #8cfffc; }

.gm-roomcode {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 10px;
  border: 1px solid rgba(216, 180, 90, .45); border-radius: 8px;
  background: rgba(216, 180, 90, .08);
}
.gm-roomcode span {
  font-family: Cinzel, Georgia, serif; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gm-muted);
}
.gm-roomcode code {
  font-family: Cinzel, Georgia, serif; font-size: 1.05rem; letter-spacing: .3em;
  color: var(--gm-gold);
}

.gm-roll-title {
  margin: 0 0 8px; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gm-muted); border-bottom: 1px solid var(--gm-soft); padding-bottom: 6px;
}
.gm-roll {
  margin: 0 0 14px; padding: 0 0 0 6px; list-style: none; max-height: 340px;
  overflow-y: auto; font-family: Georgia, serif; font-size: .88rem;
}
.gm-roll li { display: flex; gap: 8px; padding: 2px 4px; border-radius: 4px; }
.gm-roll li:nth-child(odd) { background: rgba(0, 199, 209, .05); }
.gm-roll .gm-no { width: 2.2em; color: var(--gm-muted); text-align: right; flex: 0 0 auto; }
.gm-roll .gm-ply { flex: 1 1 0; color: var(--gm-bone); }
.gm-roll .gm-ply.gm-void { color: #9fbcc6; }
.gm-roll-empty { color: var(--gm-muted); font-style: italic; }

.gm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-actions .gm-btn { flex: 1 1 44%; }

/* --- modals -------------------------------------------------------------- */

.gm-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(0, 0, 0, .74);
}
.gm-modal-box {
  max-width: 420px; padding: 24px 28px; border: 1px solid var(--gm-line);
  border-radius: 14px; background: var(--gm-deep); text-align: center;
  box-shadow: 0 0 34px rgba(0, 223, 232, .28);
}
.gm-modal-box h3 {
  margin: 0 0 10px; color: #00dfe8; letter-spacing: .14em; text-transform: uppercase;
}
.gm-modal-box p { margin: 0 0 18px; color: var(--gm-bone); font-size: .92rem; }
.gm-modal-actions { display: flex; gap: 10px; justify-content: center; }
.gm-promo-row { display: flex; gap: 10px; justify-content: center; }
.gm-shell .gm-promo {
  padding: 6px; border: 1px solid var(--gm-soft); border-radius: 8px; line-height: 0;
  background: rgba(0, 0, 0, .4);
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.gm-promo img { width: 56px; height: 56px; image-rendering: pixelated; }
.gm-shell .gm-promo:hover,
.gm-shell .gm-promo:focus-visible {
  border-color: #00ffff; box-shadow: 0 0 14px rgba(0, 223, 232, .45);
}

/* --- leaderboard --------------------------------------------------------- */

.gm-divider {
  max-width: 960px; margin: 34px auto 22px; border: 0;
  border-top: 1px solid rgba(0, 199, 209, .28);
}
.leaderboard { max-width: 780px; margin: 0 auto 10px; }
.leaderboard h2 {
  margin: 0 0 14px; color: #00dfe8; font-size: 1.06rem; letter-spacing: .14em;
  text-transform: uppercase;
}
#lbTable {
  width: 100%; border-collapse: collapse; border: 1px solid #008b8b;
  font-family: Georgia, serif; font-size: .9rem;
}
#lbTable th, #lbTable td { border: 1px solid #008b8b; padding: 7px 10px; text-align: left; }
#lbTable th {
  background: rgba(0, 204, 204, .14); color: #aefefe; font-family: Cinzel, Georgia, serif;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
#lbTable td { color: var(--gm-bone); }
#lbTable .empty-cell { color: var(--gm-muted); font-style: italic; text-align: center; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .gm-table { grid-template-columns: 1fr; }
  .gm-sidebar { max-width: 660px; margin: 0 auto; width: 100%; }
  .gm-roll { max-height: 210px; }
}

@media (max-width: 760px) {
  .gm-modes { grid-template-columns: 1fr; gap: 10px; }
  .gm-plaque { flex-direction: row; gap: 12px; text-align: left; align-items: center; }
  .gm-plaque img { width: 84px; }
  .gm-plaque > div { flex: 1 1 auto; }
  .gm-niches { inset: 4% 0 8%; }
  .gm-hotseat, .gm-summons { gap: 10px; padding: 2%; }
  .gm-side-card { padding: 8px 10px; }
  .gm-side-card img { width: 34px; height: 34px; }
  .gm-side-card input { width: 108px; }
  .gm-scroll { padding: 10px 12px; }
  .gm-scroll p { display: none; }
  .gm-field input { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-thinking span { animation: none; opacity: .8; }
  .gm-shell .gm-niche,
  .gm-shell .gm-plaque { transition: none; }
}