/* DrawGuess: lightweight sketch-party finishing layer */
:root {
  --dg-ink: #40321d;
  --dg-muted: #8b7958;
  --dg-paper: #fffdf6;
  --dg-line: rgba(127, 99, 39, .14);
  --dg-violet: #7562d9;
  --dg-aqua: #48b9b0;
  --dg-gold: #e8b43e;
}

/* Account gate: a game invitation, not a dashboard form. */
#auth-screen {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 14% 18%, rgba(255, 211, 105, .36), transparent 28%),
    radial-gradient(ellipse at 86% 78%, rgba(74, 199, 183, .28), transparent 30%),
    radial-gradient(ellipse at 78% 12%, rgba(154, 129, 255, .34), transparent 34%),
    linear-gradient(138deg, #28224d, #51417c 52%, #315f69) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#auth-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.75) .8px, transparent .8px);
  background-size: 24px 24px;
}
.auth-card {
  position: relative;
  isolation: isolate;
  width: min(440px, 100%);
  max-height: min(780px, calc(100dvh - 40px));
  overflow-y: auto;
  padding: clamp(22px, 5vw, 34px);
  gap: 15px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 30px;
  color: var(--dg-ink);
  background: linear-gradient(155deg, rgba(255,255,250,.96), rgba(249,241,218,.94));
  box-shadow: 0 34px 90px rgba(13, 10, 36, .38), inset 0 1px rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  animation: dgAuthIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.auth-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, #e9b53b, #f08c75 48%, #55bfb3 100%);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  color: #5945ae !important;
  font-family: 'Lalezar', 'Baloo Bhaijaan 2', sans-serif;
  font-size: 34px !important;
  letter-spacing: -.6px !important;
}
.auth-brand img { width: 48px; height: 48px; border-radius: 15px; object-fit: contain; }
.auth-brand .brand-fallback { display: none; }
.auth-brand .brand-wordmark { color: #5945ae !important; }
.auth-card h1 { color: #45351e; font-size: clamp(22px, 5vw, 27px); line-height: 1.45; }
.auth-card p { color: #8b7958 !important; }
#auth-form { gap: 13px; }
#auth-form label { gap: 7px; color: #6e572c; font-size: 13px; }
#auth-form input {
  min-height: 49px;
  padding: 11px 14px;
  border: 1px solid #e4d6b6;
  border-radius: 14px;
  background: rgba(255,255,255,.78) !important;
  color: #40321d;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#auth-form input:focus {
  border-color: #8d78e6 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(141,120,230,.14) !important;
}
#auth-error { min-height: 20px; color: #b34a43 !important; font-weight: 700; }
#auth-submit {
  min-height: 52px;
  border: 0;
  border-radius: 15px;
  color: #fff !important;
  background: linear-gradient(110deg, #6f5bd4, #8772e2 56%, #4eada8) !important;
  box-shadow: 0 10px 22px rgba(91,77,185,.24) !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#auth-submit:hover { filter: brightness(1.05); box-shadow: 0 13px 26px rgba(91,77,185,.28) !important; }
#auth-submit:active { transform: translateY(1px) scale(.985); }
#auth-submit:disabled { opacity: .65; }
#auth-switch {
  justify-self: center;
  color: #6653bd;
  border-radius: 12px;
  padding: 10px 14px;
}
#auth-switch:focus-visible, #auth-submit:focus-visible, #auth-form input:focus-visible {
  outline: 3px solid rgba(101,82,199,.32);
  outline-offset: 2px;
}
.auth-card > small { color: #9a8969 !important; }

/* Make the board feel like a sheet of drawing paper. */
#game { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
#top {
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow: 0 12px 26px rgba(121,91,31,.10), inset 0 1px rgba(255,255,255,.35) !important;
}
#stage {
  isolation: isolate;
  background-color: #fffefa !important;
  background-image:
    radial-gradient(rgba(182,153,92,.16) .7px, transparent .8px),
    linear-gradient(rgba(238,226,195,.12) 1px, transparent 1px);
  background-size: 18px 18px, 100% 32px;
  border: 7px solid #fff !important;
  outline: 1px solid rgba(180,147,74,.18);
  box-shadow: 0 8px 18px rgba(87,65,25,.08), 0 22px 44px rgba(87,65,25,.10) !important;
}
#stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.20), transparent 34%, rgba(248,239,213,.10));
}
#stage canvas { z-index: 1; }
#stage .ov { z-index: 2; }
#tools {
  gap: 9px 13px !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow: 0 9px 22px rgba(113,85,29,.08) !important;
}
#tools .tb, #tools .sw { transition: transform .13s ease, box-shadow .13s ease, background .16s ease; }
#tools .tb:active { transform: scale(.94); }
#tools .tb:focus-visible, #tools .sw:focus-visible, #tabs button:focus-visible {
  outline: 3px solid rgba(117,98,217,.35);
  outline-offset: 2px;
}
#players, #chatbox { box-shadow: 0 9px 22px rgba(113,85,29,.07) !important; }
#plist { overscroll-behavior: contain; }
#msgs { overscroll-behavior: contain; }
#msgs .m { overflow-wrap: anywhere; }
#timer { font-variant-numeric: tabular-nums; }
#timer.low { animation: none !important; box-shadow: 0 0 0 3px rgba(191,76,59,.12); }

/* Account action stays in the profile, away from the play controls. */
.dg-logout-btn {
  justify-self: start;
  min-height: 42px;
  margin-top: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(186,82,73,.25);
  border-radius: 13px;
  color: #a64e45;
  background: rgba(255,244,239,.8);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.dg-logout-btn:hover { background: #ffebe5; }
.dg-logout-btn:active { transform: scale(.98); }
.dg-logout-btn:disabled { opacity: .6; }

button { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  #tools .tb:hover { transform: translateY(-1px); }
}
@media (max-width: 820px) {
  #game {
    min-height: 100dvh;
    padding-inline: 8px !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  #stage { border-width: 5px !important; border-radius: 16px !important; }
  #tools { padding: 9px !important; gap: 8px !important; }
  #tools .tb { min-height: 42px; padding-inline: 10px; }
  #chatbox #cin { padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  #ci { min-width: 0; }
  #report-open { bottom: calc(12px + env(safe-area-inset-bottom)); }
  #bg .sh { opacity: .2; filter: blur(42px); }
  #mnav, .pnl, #top, #players, #chatbox, #tools { -webkit-backdrop-filter: blur(9px) saturate(120%); backdrop-filter: blur(9px) saturate(120%); }
}
@media (max-width: 380px) {
  .auth-card { padding: 20px 17px; border-radius: 24px; }
  .auth-brand { font-size: 30px !important; }
  #tools .tb span { font-size: 11px; }
}
@keyframes dgAuthIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .auth-card { animation: none !important; }
  #auth-form input, #auth-submit, #auth-switch, #tools .tb, #tools .sw, .dg-logout-btn { transition: none !important; }
}