/* --------------  GLOBAL LOOK -------------- */
:root {
  --bg:           #716c6c;   /* page background */ 
  --frame-bg:     #2a2a2a;   /* keyboard frame */
  --key-bg:       #333;
  --key-border:   #444;
  --key-text:     #f5f5f5;

  --press-bg:     #5d5c5e;   
  --press-shadow: #000000b4; 
}

* { box-sizing: border-box; }

/* Page */
body {
  background: var(--bg);
  margin: 0;
  padding: 40px;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--key-text);
}

/* --------------  TOGGLE BUTTONS -------------- */
#layout-buttons {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

#layout-buttons button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  transition: transform .2s;
}
#layout-buttons button:hover { transform: scale(1.06); }

/* --------------  KEYBOARD FRAME -------------- */
#keyboard {
  display: flex;
  gap: 48px;               /* space between main + num‑pad blocks */
  background: var(--frame-bg);
  padding: 32px;
  border-radius: 18px;
  box-shadow: 0 0 24px #00000088;
  flex-wrap: wrap;         /* keeps blocks side‑by‑side, wraps on small screens */
}

/* Blocks */
#main-block{
  display: flex;
  flex-direction: column;
  gap: 10px;               /* verical row spacing */
}

/* Row */
.row {
  display: flex;
  gap: 8px;                /* horizontal key spacing */
}

/* --------------  KEY STYLE -------------- */
.key{
  background: var(--key-bg);
  color: var(--key-text);
  border: 1px solid var(--key-border);
  border-radius: 6px;
  min-width: 46px;         /* base size */
  height: 46px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: all .15s ease;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35);
}

/* Empty placeholder ( "" in layout ) → invisible spacer */
.key:empty {
  visibility: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* --------------  PRESSED EFFECT -------------- */
.key.pressed {
  background: var(--press-bg);
  color: #fff;
  box-shadow:
    0 3px 14px var(--press-shadow),
    inset 0 0 6px #ffffff33;
  transform: translateY(1px) scale(0.97);
  border-color: var(--press-bg);
}

/* --------------  SPECIAL WIDTHS -------------- */
/* Wider keys in both layouts */
.key[data-code="Backspace"]  { min-width: 90px; }
.key[data-code="Tab"]        { min-width: 87px; }
.key[data-code="CapsLock"]   { min-width: 100px; }
.key[data-code="Enter"],
.key[data-code="Return"]     { min-width: 86px; }
.key[data-code="ShiftLeft"],
.key[data-code="ShiftRight"] { min-width: 122px; }
.key[data-code="ControlLeft"],
.key[data-code="ControlRight"],
.key[data-code="AltLeft"],
.key[data-code="AltRight"],
.key[data-code="WinLeft"],
.key[data-code="WinRight"],
.key[data-code="MetaLeft"],
.key[data-code="MetaRight"]  { min-width: 72px; }
.key[data-code="Space"]      { min-width: 391px; }
/* .key[data-code="SpaceS"]      { min-width: 310px; } */
/* .key[data-code="EscapeS"]      { min-width: 90px; } */
.key[data-code="Delete"]      { min-width: 90px; }

/* Numpad 0 double‑width */
.key[data-code="Numpad0"]    { min-width: 98px; }


/* --------------  RESPONSIVE TWEAK -------------- */
@media (max-width: 900px) {
  #keyboard { gap: 24px; padding: 24px; }
  .key      { min-width: 40px; height: 40px; font-size: 13px; }
  .key[data-code="Space"] { min-width: 220px; }
}

/* Juggads */

#num-pad {
  display: grid;
  grid-template-rows: repeat(6, 55px);
}

.key[data-code="NumpadEnter"] {
  grid-row: span 2;
  height: calc(46px * 2 + 8px);
  line-height: calc(46px * 2 + 8px);
}

.key[data-code="NumpadAdd"] {
  grid-row: span 2;
  height: calc(46px * 2 + 8px);
  line-height: calc(46px * 2 + 8px);
}

body[data-layout="mac"] .key[data-code="Space"]  { min-width: 310px; }
body[data-layout="mac"] .key[data-code="Escape"] { min-width: 120px;  }
body[data-layout="mac"] .key[data-code="F12"] { min-width: 64px;}

/* #layout-buttons button {
  background: transparent; 
  border: none;
  cursor: pointer;
  user-select: none;
  padding: 6px;
  transition: transform .25s ease, box-shadow .25s ease;
} */

#layout-buttons button:hover,
#layout-buttons button:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 12px #19191aaa;
}