/* ---------- Theme ---------- */
:root{
  --bg:#412434; --fg:#eee; --mut:#aaa; --card:#1b1b1b;
  --g:#538d4e; --y:#b59f3b; --x:#c5c5c9;

  /* layout vars */
  --tile:48px;         /* desktop tile size */
  --gap:8px;           /* grid gap inside a board */
  --k-gap:6px;         /* keyboard row gap */
  --page-pad:12px;     /* main’s horizontal padding (see <main>) */
  --boards-gap:16px;   /* gap between the two boards */
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--fg)}
main{max-width:900px;margin:24px auto;padding:0 var(--page-pad)}
.hidden{display:none}
h1,h2,h3{margin:8px 0}
.row{display:flex;gap:8px;align-items:center;margin:8px 0}
input{padding:8px 10px;background:#000;color:var(--fg);border:1px solid #333;border-radius:8px}
button{padding:8px 12px;background:#2d2d2d;color:var(--fg);border:1px solid #444;border-radius:8px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.msg{color:var(--mut);min-height:20px}

/* ---------- Top UI ---------- */
.topbar{display:flex;justify-content:space-between;background:var(--card);padding:10px 12px;border-radius:10px;margin:12px 0}
.panel{background:var(--card);padding:12px;border-radius:10px;margin:12px 0}

/* ---------- Boards layout ---------- */
.boards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--boards-gap);
  align-items:start;
  width:100%;
}
.board{min-width:0}
.grid{display:grid;grid-template-rows:repeat(6,1fr);gap:var(--gap);padding-top:4px;overflow:hidden}

/* ---------- Tiles ---------- */
.rowTiles{display:grid;grid-template-columns:repeat(5,var(--tile));gap:var(--gap)}
.tile{
  width:var(--tile);height:var(--tile);
  border-radius:6px;background:#222;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:20px;border:1px solid #333;
}
.tile.g{background:var(--g);border-color:var(--g)}
.tile.y{background:var(--y);border-color:var(--y)}
.tile.x{background:var(--x);border-color:var(--x)}
.tile.cursor{outline:2px solid #666}
.tile.ghost{background:#222;border:1px dashed #555}

.result{display:flex;gap:24px}

/* ---------- Keyboard (now below boards) ---------- */
.kb{user-select:none;margin-top:12px;display:grid;gap:var(--k-gap);max-width:100%}
.kbrow{display:flex;gap:var(--k-gap);justify-content:center;width:100%}
.key{
  box-sizing:border-box;
  flex:0 0 auto;
  width:calc((100% - (9 * var(--k-gap)))/10); /* 10 keys across the row */
  padding:clamp(8px,2.2vw,12px) 0;
  border-radius:6px;background:#2a2a2a;border:1px solid #3a3a3a;font-weight:700;text-align:center;cursor:pointer
}
.key.wide{width:calc(1.5 * ((100% - (9 * var(--k-gap)))/10))} /* ENTER/⌫ */
.key.disabled{opacity:.5;cursor:default}
.key.kg{background:var(--g);border-color:var(--g)}
.key.ky{background:var(--y);border-color:var(--y)}
.key.kx{background:var(--x);border-color:var(--x)}
.key:active{transform:translateY(1px)}

/* ---------- Mobile fit: both boards and full-width keyboard ---------- */
/* On phones, set tile size from viewport width minus page padding and board gap. */
@media (max-width:640px){
  :root{
    /* Two boards side-by-side: 10 tiles + 9 intra-board gaps + 1 inter-board gap + 2 page paddings */
    --tile: calc(
      (100vw - (2 * var(--page-pad)) - var(--boards-gap) - (9 * var(--gap))) / 10
    );
    --gap:6px;
    --k-gap:4px;
  }
}

/* ---------- Hidden IME input ---------- */
#mobileIme{
  position:absolute;left:-9999px;top:-9999px;
  width:1px;height:1px;opacity:0;border:0;padding:0;margin:0
}

#rematchBtn {
  display:none;
  margin:20px auto;
  padding:10px 20px;
  background:var(--g);
  border:none;
  border-radius:8px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
}
#rematchBtn.hidden { display:none; }