/* --- Lobster, self-hosted (no third-party requests) --- */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lobster-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lobster-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2000s look: fixed 800x600 frame, boxed, tiled background --- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background-color: #2b0f3a;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 50% 0%, #5a2170 0%, #2b0f3a 70%);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  color: #170a1f;
  padding: 14px;
}

/* 800x600 site frame, centred; scales down on narrow screens */
.frame {
  width: 800px;
  min-height: 600px;
  margin: 0 auto;
  background: #fdf6e3;
  border: 3px ridge #b9a04d;
  box-shadow: 0 0 0 2px #241033, 6px 6px 0 rgba(0,0,0,.45);
}

/* --- header: Lobster, big and shiny --- */
.masthead {
  padding: 16px 10px 10px;
  text-align: center;
  background:
    repeating-linear-gradient(90deg, #123 0 12px, #223 12px 24px);
  border-bottom: 3px double #b9a04d;
}

.logo {
  font-family: 'Lobster', cursive;
  font-weight: 400;
  font-size: 58px;
  line-height: 1.05;
  margin: 0;
  color: #ffe37a;
  text-shadow:
    0 0 6px #fff2a8,
    2px 2px 0 #7a2f8f,
    4px 4px 0 #2b0f3a;
  letter-spacing: 1px;
  word-break: break-word;
}

.rainbow {
  height: 8px;
  margin: 0;
  border: 0;
  background: repeating-linear-gradient(90deg,
    #f00 0 20px, #f80 20px 40px, #fd0 40px 60px,
    #0b0 60px 80px, #06c 80px 100px, #63c 100px 120px);
  animation: slide 3s linear infinite;
}
@keyframes slide { to { background-position: 120px 0; } }

.content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* --- babushka + signature --- */
.babushka-block {
  text-align: center;
  background: #fffdf5;
  border: 2px groove #b9a04d;
  padding: 10px;
  width: 100%;
  max-width: 460px;
}

.babushka {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 2px solid #333;
  box-shadow: 3px 3px 0 #6b4b8a;
}

.zabava {
  font-family: 'Lobster', cursive;
  font-size: 46px;
  margin: 8px 0 0;
  color: #c0392b;
  text-shadow: 2px 2px 0 #ffd86b, 3px 3px 0 rgba(0,0,0,.25);
}

/* --- tetris --- */
.game-block {
  width: 100%;
  max-width: 460px;
  background: #fffdf5;
  border: 2px groove #b9a04d;
  padding: 10px;
  text-align: center;
}

.game-title {
  font-family: 'Lobster', cursive;
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 8px;
  color: #2b6b3f;
  text-shadow: 2px 2px 0 #ffe37a;
}

.game-shell {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  background: #221033;
  padding: 8px;
  border: 3px inset #7a2f8f;
}

#field {
  display: block;
  background: #0d0817;
  border: 2px inset #8f7ad0;
  image-rendering: pixelated;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 118px;
  text-align: left;
}

.panel {
  background: #fdf6e3;
  border: 2px outset #b9a04d;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b4b8a;
}

.panel-value {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  color: #170a1f;
}

#next {
  display: block;
  margin: 0 auto;
  background: #0d0817;
  border: 2px inset #8f7ad0;
  image-rendering: pixelated;
}

.btn {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 4px;
  cursor: pointer;
  color: #170a1f;
  background: linear-gradient(#fff8d8, #d9c477);
  border: 2px outset #b9a04d;
}
.btn:active { border-style: inset; }

.controls {
  font-size: 11px;
  color: #4a3a2a;
  margin: 10px 0 0;
  line-height: 1.9;
}
.controls b {
  background: #221033;
  color: #ffe37a;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

/* --- footer --- */
.basement {
  background: #221033;
  color: #e8d9f5;
  text-align: center;
  padding: 10px;
  border-top: 3px double #b9a04d;
  font-size: 11px;
}
.basement p { margin: 4px 0; }
.counter {
  font-family: 'Courier New', monospace;
  background: #000;
  color: #3f3;
  padding: 1px 6px;
  border: 1px solid #666;
}
.badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.badge {
  background: linear-gradient(#ffe37a, #d9a83a);
  color: #3a2408;
  border: 1px outset #fff2a8;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
}

@media (max-width: 840px) {
  body { padding: 6px; }
  .frame { width: 100%; min-height: 0; }
  .logo { font-size: 34px; }
  .zabava { font-size: 34px; }
  .game-shell { flex-wrap: wrap; }
  .side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .panel { flex: 1 1 60px; }
}