:root {
  --tile-size: 3rem;
  --tile-gap: 0.45rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--rux-color-background, #0a0f1a);
  color: var(--rux-color-text, #e6eefc);
}

.gsb-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  padding: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

.panel rux-card { width: 100%; }

.card-content {
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.status-line {
  margin-bottom: 0.75rem;
  opacity: 0.92;
}

/* Definition box */
.definition {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.04);
  line-height: 1.35;
  opacity: 0.95;
}
.definition .word {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.definition .def { opacity: 0.92; }

/* Grid */
.grid {
  display: grid;
  grid-template-rows: repeat(6, var(--tile-size));
  gap: var(--tile-gap);
  margin-bottom: 1rem;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(5, var(--tile-size));
  gap: var(--tile-gap);
}

.cell {
  width: var(--tile-size);
  height: var(--tile-size);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  user-select: none;
  background: rgba(255,255,255,0.03);
}

.cell.correct { background: rgba(0, 210, 106, 0.25); border-color: rgba(0, 210, 106, 0.65); }
.cell.present { background: rgba(255, 181, 71, 0.22); border-color: rgba(255, 181, 71, 0.60); }
.cell.absent  { background: rgba(106, 118, 140, 0.18); border-color: rgba(106, 118, 140, 0.55); }

/* Input row */
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}

/* On-screen keyboard container */
.keyboard { display: grid; gap: 0.4rem; }
.kb-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.kb-row { display: flex; gap: 0.35rem; justify-content: center; flex-wrap: nowrap; }

/* Visual keyboard using rux-button */
.kb-row rux-button.keybtn { min-width: 2.25rem; }
.kb-row rux-button.keybtn::part(button) {
  padding: 0.35rem 0.5rem;
  border-width: 1px;
}

.kb-row rux-button.keybtn.correct::part(button) { background: rgba(0, 210, 106, 0.25); border-color: rgba(0, 210, 106, 0.65); }
.kb-row rux-button.keybtn.present::part(button) { background: rgba(255, 181, 71, 0.22); border-color: rgba(255, 181, 71, 0.60); }
.kb-row rux-button.keybtn.absent::part(button)  { opacity: 0.55; }

/* Right panel */
.muted { opacity: 0.9; }
.small { font-size: 0.9rem; opacity: 0.86; }

.chip {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.25rem;
  margin-right: 0.35rem;
  vertical-align: -2px;
  border: 1px solid rgba(255,255,255,0.15);
}
.chip.correct { background: rgba(0, 210, 106, 0.25); border-color: rgba(0, 210, 106, 0.65); }
.chip.present { background: rgba(255, 181, 71, 0.22); border-color: rgba(255, 181, 71, 0.60); }
.chip.absent  { background: rgba(106, 118, 140, 0.18); border-color: rgba(106, 118, 140, 0.55); }

/* Toast / notification placement (bottom-right) */
.toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast-host rux-notification { pointer-events: auto; }

/* Try to make the notification border feel lighter */
rux-notification::part(container) {
  border-width: 1px !important;
}