/* ── Shared game look: Word Skill and Gramma Ana (#280, #315) ──────────
   Tokens, icons, icon buttons, the timer ring and the owner-colored tile.
   Both game pages load this one copy. One "act now" color (Gramma Ana
   blue); gold means something good happened; coral means trouble; violet
   marks Gramma Ana's moves and Judge Gramma. */
:root {
  --ws-blue: #355bb8;
  --ws-gold: #e0a526;
  --ws-gold-light: #f2c14e;
  --ws-coral: #d0533f;
  --ws-ground: #f1f4f9;
  --ws-ink: #1c2333;
  --ws-muted: #5b6478;
  --ws-line: #dfe4ed;
  --ws-navy: #24345a;
  --ws-violet: #7c3aed;
}

.ws-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.ws-icon-star { color: var(--ws-gold); }

.ws-icon-btn {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 12px; background: #fff; border: 1px solid #d8dee9; color: #3c4660; cursor: pointer;
}
.ws-icon-btn .ws-icon { width: 20px; height: 20px; }
.ws-icon-btn:hover:not(:disabled) { border-color: var(--ws-blue); color: var(--ws-blue); }
.ws-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Timer ring (D6): coral and pulsing in the last 10 seconds. */
.ws-ring { position: relative; width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; }
.ws-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ws-ring .track { stroke: var(--ws-line); }
.ws-ring .arc { stroke: var(--ws-blue); transition: stroke-dashoffset 1s linear; }
.ws-ring .t { position: relative; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ws-ink); }
.ws-ring.urgent .arc { stroke: var(--ws-coral); }
.ws-ring.urgent .t { color: var(--ws-coral); }
.ws-ring.urgent { animation: ws-pulse-scale 1s ease-in-out infinite; }
.ws-ring.frozen .arc { stroke: #94a3b8; }
.ws-ring.frozen .t { color: #64748b; }
@keyframes ws-pulse { 50% { opacity: 0.45; transform: scale(0.85); } }
@keyframes ws-pulse-scale { 50% { transform: scale(1.07); } }

/* ── The Gramma Ana tile (T1b, D7b) ──
   One rule: the owner's color comes in as --c and the face, bevel and
   shadow are mixed from it, so every player's color gets the same shape.
   --t sets the size. No point values. Unused letters are maple, since
   nobody owns them yet. */
.gt {
  --t: 30px; --c: #efd095; --gt-ink: #3a2510;
  position: relative; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: var(--t); height: calc(var(--t) * 1.06);
  border-radius: calc(var(--t) * 0.2);
  background-color: var(--c);
  background-image: linear-gradient(color-mix(in srgb, var(--c) 72%, #fff), var(--c));
  box-shadow: inset 0 calc(var(--t) * -0.09) 0 color-mix(in srgb, var(--c) 62%, #000), 0 1px 2px rgba(20, 20, 40, 0.25);
  color: var(--gt-ink);
  font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--t) * 0.52); line-height: 1;
  user-select: none; -webkit-user-select: none;
}
.gt.dark { --gt-ink: #fff; }
.gt.maple {
  background-image: linear-gradient(#f9e6bd, #efd095);
  box-shadow: inset 0 calc(var(--t) * -0.09) 0 #c99a55, 0 1px 2px rgba(70, 45, 10, 0.25);
}
/* A letter the word's latest steal added (T3): an asterisk at the top right. */
.gt.add::after {
  content: "*"; position: absolute; top: calc(var(--t) * 0.03); right: calc(var(--t) * 0.09);
  font-size: calc(var(--t) * 0.42); font-weight: 800; line-height: 1; color: var(--gt-ink);
}
/* A letter you've put in your word, grayed where it came from. */
.gt.used { filter: grayscale(1); opacity: 0.38; box-shadow: none; }
/* Gramma Ana's pick while she plays. */
.gt.gramma {
  box-shadow: inset 0 calc(var(--t) * -0.09) 0 color-mix(in srgb, var(--c) 62%, #000), 0 0 0 2px #fff, 0 0 0 4px var(--ws-violet), 0 2px 8px rgba(124, 58, 237, 0.45);
}
.gt.maple.gramma {
  box-shadow: inset 0 calc(var(--t) * -0.09) 0 #c99a55, 0 0 0 2px #fff, 0 0 0 4px var(--ws-violet), 0 2px 8px rgba(124, 58, 237, 0.45);
}