:root {
  --bg: #d9e0e5;
  --grid: #a7b2ba;
  --cell1: #f9fbfc;
  --cell2: #d8dee2;
  --tile1: #f4e5b6;
  --tile2: #dccb92;
  --tileBorder: #b9ab77;
  --orange1: #f5a524;
  --orange2: #e28f0b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #e9edf0, #cfd7dc);
  color: #24333d;
}
.km-shell { max-width: 900px; margin: 0 auto; padding: 10px; }
.km-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.km-top a { text-decoration: none; color: #0f6f86; font-weight: 700; }
.km-top h1 { margin: 0; font-size: 1.25rem; }

.km-board-wrap {
  border: 1px solid #99a5ae;
  border-radius: 8px;
  padding: 6px;
  background: #b9c4cc;
  overflow: auto;
}
.km-board {
  display: grid;
  grid-template-columns: repeat(15, 36px);
  grid-template-rows: repeat(15, 36px);
  gap: 2px;
  min-width: max-content;
}
.km-cell {
  width: 36px;
  height: 36px;
  border: 1px solid var(--grid);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--cell1), var(--cell2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 700;
  color: #56626b;
}
.km-cell.active { box-shadow: inset 0 0 0 3px #1f95b7; }
.km-cell.b2 { background: linear-gradient(180deg, #d8f4ff, #a9dced); }
.km-cell.b3 { background: linear-gradient(180deg, #eadcff, #c8b3ef); }
.km-cell.w2 { background: linear-gradient(180deg, #dcf4dc, #b2dfb2); }
.km-cell.w3 { background: linear-gradient(180deg, #ffd8d8, #f1abab); }
.km-cell .tag { font-size: 11px; font-weight: 700; }

.km-tile {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--tileBorder);
  background: linear-gradient(180deg, var(--tile1), var(--tile2));
  color: #4c3f20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  position: relative;
}
.km-tile small {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 9px;
}

.km-bottom {
  margin-top: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--orange1), var(--orange2));
  padding: 8px;
  display: grid;
  grid-template-columns: 100px 1fr 190px;
  gap: 8px;
  align-items: center;
}
.km-left {
  background: rgba(255,255,255,.9);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.km-left span { font-size: 12px; display: block; }
.km-left strong { font-size: 24px; display: block; }

.km-rack { display: flex; gap: 6px; flex-wrap: wrap; }
.km-rack .km-tile { cursor: pointer; width: 36px; height: 36px; }
.km-rack .km-tile.sel { outline: 3px solid #1a8bad; }

.km-actions { display: flex; gap: 6px; }
.km-actions button {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  background: #fff7e7;
  color: #6d4300;
}
.km-status { margin: 8px 0 2px; font-weight: 700; }

@media (max-width: 820px) {
  .km-bottom { grid-template-columns: 1fr; }
  .km-actions { justify-content: flex-start; }
}
.km-cell.word-ok .km-tile {
  outline: 3px solid #2bb673;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(43, 182, 115, 0.25) inset;
}
.km-scorebar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin:6px 0 10px}
.km-userbox{background:#eef4f7;border:1px solid #9fb2bf;border-radius:10px;padding:8px 12px;text-align:center;font-weight:700}
.km-userbox span{display:block;font-size:12px;opacity:.8}
.km-userbox strong{font-size:24px}
.km-turn{display:flex;align-items:center;justify-content:center;min-width:170px}
.card-like{margin-top:14px;background:#f3f8fb;border:1px solid #b8c9d3;border-radius:12px;padding:12px}
.km-info h2{margin:0 0 8px;font-size:1.1rem}
.km-info p{margin:0 0 10px}
.km-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.km-info-grid article{background:#fff;border:1px solid #c9d9e2;border-radius:10px;padding:8px}
.km-info-grid h3{margin:0 0 5px;font-size:.96rem}
.km-info-grid p{margin:0;font-size:.9rem;line-height:1.35}
.km-info-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.km-info-cta a{display:inline-block;text-decoration:none;font-weight:700;border-radius:8px;padding:8px 10px;border:1px solid #9ec2d0;background:#fff;color:#114f67}
.km-board-wrap{background:linear-gradient(180deg,#cfe7f2,#b8d8e7);border-color:#7fa9bb}
.km-cell{border-radius:8px;background:linear-gradient(180deg,#f5fafc,#d9e4ea)}
.km-cell.b2{background:linear-gradient(180deg,#c8f2ff,#90d9ef)}
.km-cell.b3{background:linear-gradient(180deg,#e5d6ff,#bea8e7)}
.km-cell.w2{background:linear-gradient(180deg,#d6f2d8,#9fd5a7)}
.km-cell.w3{background:linear-gradient(180deg,#ffd6dd,#f3a8b8)}
.km-cell .tag{font-size:10px;letter-spacing:.2px}
.km-top h1{letter-spacing:.2px}
.km-board-wrap{display:flex;justify-content:center;align-items:flex-start;min-height:auto}
.km-board{margin:0 auto}
.km-bottom{grid-template-columns:140px 1fr auto}
@media (max-width:1100px){.km-bottom{grid-template-columns:1fr}}