:root{
  /* Brown-themed palette */
  --bg-1: #1b1209;        /* darkest background */
  --bg-2: #2b1f14;        /* panel background */
  --panel:#3b2b20;
  --accent:#d9b08c;       /* warm tan accent */
  --muted:#bda08a;        /* muted brown text */
  /* responsive cell size: scales between 36px and 44px depending on viewport */
  --cell-size: clamp(36px, 2.8vw, 44px);
  --cell-gap:6px;
  --white:#f6efe6;        /* off-white for letters */
  --correct:#9dd3a8;      /* greenish for correct */
  --incorrect:#ffb4b4;    /* light red for incorrect */
  --highlight:rgba(217,176,140,0.10); /* highlight tint */
  --layout-controls-width: 360px; /* width for the right-hand controls column */
  --content-max-width: 1120px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-1) 0%, #2a1b12 60%);font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;color:var(--white);-webkit-font-smoothing:antialiased}
.wrap{
  max-width:var(--content-max-width);
  margin:28px auto;
  padding:18px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  box-shadow:0 12px 40px rgba(12,6,3,0.7);
}

/* Header: balanced spacing and wrapping on small screens */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.02);
  flex-wrap:wrap; /* allows meta to drop on smaller widths */
}
.title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0; /* allow text to truncate if needed */
}
.title-wrap > div{min-width:0}
.logo{
  width:64px;
  height:64px;
  display:block;
  object-fit:contain;
  border-radius:8px;
  background:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
h1{margin:0;font-size:20px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead{margin:4px 0 0 0;color:var(--muted);font-size:13px;max-width:720px;white-space:normal}
.small{font-size:12px}

/* Meta column on the right of the header
   - margin-left:auto ensures the meta block is pushed to the right
   - align-items:flex-end and text-align:right align author & timer to the right */
.meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  justify-content:center;
  flex:0 0 auto;
  text-align:right;
  margin-left:auto;
}
.timer{margin-top:4px;font-size:13px;color:var(--muted);background:rgba(0,0,0,0.18);padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}

/* Main layout: grid with a content column and controls column */
.layout{
  display:grid;
  grid-template-columns: 1fr var(--layout-controls-width);
  gap:18px;
  align-items:start;
}

/* Board: keep grid centered inside the panel and allow toolbar to span full width */
.board{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  padding:18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.2);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

/* Center the grid inside the board and allow it to scale with --cell-size */
.grid{
  display:grid;
  grid-template-columns: repeat(15, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  gap:var(--cell-gap);
  background:transparent;
  justify-content:center; /* center the grid within the board */
  width: max-content; /* avoid stretching to fill the container */
  margin: 0 auto;
}
.cell{
  width:var(--cell-size);
  height:var(--cell-size);
  background:#3a2d24; /* card brown */
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.cell.black{
  background:#24170f;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.6);
  border:0;
}
.cell input{
  all:unset;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:700;color:var(--white);font-size:18px;
  letter-spacing:1px;cursor:text;
}
.cell input:focus{outline:2px solid rgba(217,176,140,0.18);border-radius:4px}
.num{
  position:absolute;left:6px;top:6px;font-size:10px;color:var(--muted)
}

/* states */
.cell.highlight{background:var(--highlight)}
.cell.correct{background:linear-gradient(180deg, rgba(157,211,168,0.08), rgba(157,211,168,0.02))}
.cell.incorrect input{color:var(--incorrect)}
.cell.correct input{color:var(--correct)}

/* controls area on the right */
.controls{
  background:rgba(29,20,15,0.6);
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.18);
  width:100%;
  max-width:var(--layout-controls-width);
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.controls h2{margin:0 0 4px 0;color:var(--accent);font-size:14px}
.clue-list{display:flex;flex-direction:column;gap:6px;max-height: calc(100vh - 320px);overflow:auto;padding-right:6px}
.clue{padding:8px;border-radius:6px;background:transparent;color:var(--white);font-size:13px;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}
.clue:hover{background:rgba(217,176,140,0.05);cursor:pointer;border:1px solid rgba(217,176,140,0.06)}
.clue small{color:var(--muted);font-size:12px}

/* toolbar layout improvements */
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:0;justify-content:center}
button.btn{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,#6b4b35,#4f3526);color:var(--accent);border:1px solid rgba(0,0,0,0.18);cursor:pointer;font-weight:700}
button.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted)}
.toolbar{margin-top:0;display:flex;flex-direction:column;gap:8px;width:100%}
.hintline{font-size:13px;color:var(--muted);margin-top:6px;text-align:center}

/* legend and misc */
.legend{display:flex;gap:8px;align-items:center;margin-top:6px;color:var(--muted);font-size:13px}
.key{display:inline-block;width:18px;height:14px;border-radius:4px}
.key.correct{background:linear-gradient(180deg,#cfeedf,#9dd3a8)}
.key.incorrect{background:linear-gradient(180deg,#ffb4b4,#ff8b8b)}
.key.highlight{background:var(--highlight);border-radius:4px;width:18px;height:14px;border:1px solid rgba(217,176,140,0.10)}

/* footer */
footer{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}

/* responsiveness: switch to single column, increase spacing, keep things usable */
@media(max-width:880px){
  .layout{grid-template-columns:1fr;gap:14px}
  .controls{order:2}
  .board{order:1}
  .title-wrap{align-items:flex-start}
  .site-header{flex-direction:column;align-items:flex-start;gap:12px}
  /* keep author & timer aligned to the right even when stacked */
  .meta{flex-direction:column;align-items:flex-end;text-align:right;width:100%}
  .lead{max-width:100%}
  .btns{justify-content:flex-start}
  .hintline{text-align:left}
}