css/viewport.css - main - romazherebtsov/tictactoe

css/viewport.css
155 строк2 KB
Roma
[Spec Kit] Implement tic-tac-toe hacker game
07 май 2026, 14:55
07 май 2026, 14:5537aa231
/* ── Viewport Mode: Mobile (≤420px equivalent) ── */
.viewport-mobile {
  font-size: 14px;
}

.viewport-mobile body {
  padding: 0.8rem 0.5rem;
}

.viewport-mobile .container {
  max-width: 360px;
  gap: 1rem;
}

.viewport-mobile .title {
  font-size: 1.3rem;
}

.viewport-mobile .subtitle {
  font-size: 0.65rem;
}

.viewport-mobile .board {
  --cell-size: 88px;
}

.viewport-mobile .cell {
  font-size: 2rem;
}

.viewport-mobile .viewport-nav {
  gap: 0.25rem;
}

.viewport-mobile .viewport-btn {
  font-size: 0.58rem;
  padding: 0.25rem 0.4rem;
}

.viewport-mobile .diff-btn {
  font-size: 0.62rem;
  padding: 0.45rem 0.15rem;
}

.viewport-mobile .score-value {
  font-size: 1.4rem;
}

.viewport-mobile .score-label {
  font-size: 0.55rem;
}

.viewport-mobile .result-message {
  font-size: 0.9rem;
}

.viewport-mobile .btn-primary {
  font-size: 0.72rem;
  padding: 0.4rem 1rem;
}

/* ── Viewport Mode: Tablet (≤768px equivalent) ── */
.viewport-tablet {
  font-size: 16px;
}

.viewport-tablet body {
  padding: 1.5rem 1rem;
}

.viewport-tablet .container {
  max-width: 460px;
}

.viewport-tablet .board {
  --cell-size: 100px;
}

.viewport-tablet .cell {
  font-size: 2.3rem;
}

/* ── Viewport Mode: TV (≥1440px, large screen) ── */
.viewport-tv {
  font-size: 22px;
}

.viewport-tv body {
  padding: 3rem 2rem;
}

.viewport-tv .container {
  max-width: 680px;
  gap: 2rem;
}

.viewport-tv .title {
  font-size: 3rem;
  text-shadow: 0 0 24px rgba(0,255,65,0.7);
}

.viewport-tv .subtitle {
  font-size: 1rem;
  margin-top: 0.6rem;
}

.viewport-tv .board {
  --cell-size: 148px;
  --board-gap: 8px;
  box-shadow: 0 0 40px rgba(0,255,65,0.14);
}

.viewport-tv .cell {
  font-size: 3.5rem;
}

.viewport-tv .diff-btn {
  font-size: 0.85rem;
  padding: 0.65rem 0.5rem;
}

.viewport-tv .viewport-btn {
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
}

.viewport-tv .score-value {
  font-size: 2.5rem;
}

.viewport-tv .score-label {
  font-size: 0.75rem;
}

.viewport-tv .result-message {
  font-size: 1.5rem;
}

.viewport-tv .btn-primary {
  font-size: 1rem;
  padding: 0.7rem 2.5rem;
}

.viewport-tv .footer {
  font-size: 0.75rem;
}

/* ── Viewport Mode: Desktop (≤1280px, default) ── */
.viewport-desktop {
  font-size: 16px;
}

.viewport-desktop .container {
  max-width: 520px;
}