/* ═══════════════════════════════════════════════════════════════════
   ARCADE GAMES – stylesheet
   Colors: Yellow #FFDD00 | Black #000 | Pink #E31C79
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Exo+2:wght@400;700&display=swap');

:root {
  --arc-yellow : #FFDD00;
  --arc-black  : #000000;
  --arc-pink   : #E31C79;
  --arc-white  : #ffffff;
  --arc-gray   : #1a1a1a;
  --arc-gray2  : #2c2c2c;
  --arc-font   : 'Press Start 2P', monospace;
  --arc-font2  : 'Exo 2', sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.arcade-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 16px;
  padding        : 24px 16px;
  background     : var(--arc-black);
  border         : 3px solid var(--arc-yellow);
  border-radius  : 0;
  max-width      : 520px;
  margin         : 0 auto;
  font-family    : var(--arc-font);
}

/* ── Game container ────────────────────────────────────────────── */
.arcade-game-container {
  position       : relative;
  width          : 100%;
  max-width      : 480px;
  background     : var(--arc-black);
  border         : 2px solid var(--arc-yellow);
  border-radius  : 0;
  overflow       : hidden;
  line-height    : 0;
}

/* ── Header bar ────────────────────────────────────────────────── */
.arcade-header {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 12px;
  background      : var(--arc-gray);
  border-bottom   : 2px solid var(--arc-yellow);
  flex-wrap       : wrap;
  gap             : 20px;
}
.arcade-title {
  font-family : var(--arc-font);
  font-size   : 10px;
  color       : var(--arc-yellow);
  letter-spacing: 1px;
}
.arcade-score-display,
.arcade-hiscore-display {
  font-family : var(--arc-font);
  font-size   : 9px;
  color       : var(--arc-white);
}
.arcade-score-display strong { color: var(--arc-yellow); }
.arcade-hiscore-display strong { color: var(--arc-pink); }

/* ── Canvas ─────────────────────────────────────────────────────── */
#snakeCanvas {
  display    : block;
  width      : 100%;
  height     : auto;
  image-rendering: pixelated;
}

/* ── Overlay ─────────────────────────────────────────────────────── */
.arcade-overlay {
  position        : absolute;
  inset           : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : rgba(0,0,0,.88);
  z-index         : 10;
}
.arcade-overlay-box {
  text-align : center;
  padding    : 28px 10px;
  max-width  : 320px;
  width      : 90%;
}
.arcade-overlay-title {
  font-family : var(--arc-font);
  font-size   : 22px;
  color       : var(--arc-pink) !important;
  margin      : 0 0 8px;
  animation   : arcadePulse 1.4s ease-in-out infinite;
}
.arcade-overlay-sub {
  font-family : var(--arc-font2);
  font-size   : 14px;
  color       : #ccc;
  margin      : 0 0 20px;
}
.arcade-controls-info {
  font-family : var(--arc-font2);
  font-size   : 12px;
  color       : var(--arc-yellow);
  margin-bottom: 20px;
  opacity     : .75;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.arcade-btn {
  display         : inline-block;
  padding         : 10px 24px;
  background      : var(--arc-yellow);
  color           : var(--arc-black);
  font-family     : var(--arc-font);
  font-size       : 10px;
  letter-spacing  : 1px;
  border          : none;
  border-radius   : 0;
  cursor          : pointer;
  transition      : background .15s, transform .1s, box-shadow .15s;
  box-shadow      : 0 4px 0 #b39800;
  margin-top      : 10px;
}
.arcade-btn:hover {
  background  : #ffe833;
  box-shadow  : 0 4px 16px rgba(255,221,0,.5);
}
.arcade-btn:active {
  transform   : translateY(2px);
  box-shadow  : 0 2px 0 #b39800;
}
.arcade-btn--secondary {
  background : transparent;
  color      : var(--arc-yellow);
  border     : 2px solid var(--arc-yellow);
  box-shadow : none;
}
.arcade-btn--secondary:hover {
  background : rgba(255,221,0,.1);
  box-shadow : none;
}
.arcade-btn--sm {
  padding   : 6px 14px;
  font-size : 8px;
}

/* ── Form ─────────────────────────────────────────────────────────── */
.arcade-form {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  margin-bottom  : 12px;
  text-align     : left;
}
.arcade-label {
  font-family : var(--arc-font2);
  font-size   : 11px;
  color       : var(--arc-yellow);
  font-weight : 700;
}
.arcade-input {
  padding         : 8px 12px;
  background      : var(--arc-gray2);
  border          : 2px solid var(--arc-yellow);
  border-radius   : 4px;
  color           : var(--arc-white);
  font-family     : var(--arc-font2);
  font-size       : 13px;
  outline         : none;
  transition      : border-color .2s, box-shadow .2s;
  width           : 100%;
  box-sizing      : border-box;
}
.arcade-input:focus {
  border-color : var(--arc-pink);
  box-shadow   : 0 0 8px rgba(227,28,121,.4);
}
.arcade-form-note {
  font-family : var(--arc-font2);
  font-size   : 10px;
  color       : #888;
  margin      : 0;
}
.arcade-msg {
  font-family : var(--arc-font2);
  font-size   : 12px;
  color       : var(--arc-pink);
  min-height  : 16px;
  margin      : 4px 0 0;
  text-align  : center;
}
.arcade-msg.success { color: #4cff91; }

/* ── D-Pad mobile controls ──────────────────────────────────────── */
.arcade-dpad {
  display               : grid;
  grid-template-columns : repeat(3, 52px);
  grid-template-rows    : repeat(3, 52px);
  gap                   : 4px;
}
/* hide on desktop, show on touch devices via media query */
@media (hover: hover) and (pointer: fine) {
  .arcade-dpad { display: none; }
}
.dpad-btn {
  background    : var(--arc-gray2);
  border        : 2px solid var(--arc-yellow);
  border-radius : 6px;
  color         : var(--arc-yellow);
  font-size     : 20px;
  cursor        : pointer;
  user-select   : none;
  -webkit-tap-highlight-color: transparent;
  transition    : background .1s;
  display       : flex;
  align-items   : center;
  justify-content: center;
}
.dpad-btn:active { background: var(--arc-yellow); color: var(--arc-black); }
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center{ grid-column: 2; grid-row: 2; background: transparent; border-color: transparent; cursor: default; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

/* ── Leaderboard ──────────────────────────────────────────────────── */
.arcade-leaderboard-wrap {
  max-width  : 480px;
}
.arcade-lb-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  width           : 100%;
  margin-bottom   : 12px;
}
.arcade-lb-title {
  font-family : var(--arc-font);
  font-size   : 10px;
  color       : var(--arc-yellow);
}
.arcade-lb-body {
  width : 100%;
}
.arcade-lb-loading {
  font-family : var(--arc-font2);
  color       : #888;
  text-align  : center;
  padding     : 20px 0;
}
.arcade-lb-table {
  width           : 100%;
  border-collapse : collapse;
  font-family     : var(--arc-font2);
  font-size       : 13px;
}
.arcade-lb-table th {
  background  : var(--arc-gray2);
  color       : var(--arc-yellow);
  padding     : 8px 10px;
  text-align  : left;
  font-size   : 10px;
  font-family : var(--arc-font);
  border-bottom: 2px solid var(--arc-yellow);
}
.arcade-lb-table td {
  padding      : 8px 10px;
  color        : var(--arc-white);
  border-bottom: 1px solid var(--arc-gray2);
}
.arcade-lb-table tr:first-child td { color: var(--arc-yellow); font-weight: 700; }
.arcade-lb-table tr:nth-child(2) td { color: #ccc; }
.arcade-lb-table tr:nth-child(3) td { color: #aaa; }
.arcade-lb-table .lb-rank { color: var(--arc-pink); font-weight: 700; width: 36px; }
.arcade-lb-table .lb-score { color: var(--arc-yellow); font-weight: 700; }
.arcade-lb-empty {
  text-align  : center;
  padding     : 24px;
  color       : #666;
  font-family : var(--arc-font2);
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes arcadePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .arcade-wrap { padding: 16px 10px; }
  .arcade-overlay-title { font-size: 16px; }
  .arcade-btn { font-size: 9px; padding: 9px 18px; }
	.izstreli-btn {align-self: stretch;}
}

/* ── Breakout mobile controls ───────────────────────────────────── */
.arcade-breakout-controls {
  display : flex;
  gap     : 12px;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .arcade-breakout-controls { display: none; }
}
.arcade-breakout-controls .arcade-btn {
  min-width : 80px;
}

/* ── Tetris layout ──────────────────────────────────────────────── */
.arcade-tetris-layout {
  display     : flex;
  gap         : 12px;
  width       : 100%;
  align-items : flex-start;
}
.arcade-tetris-layout .arcade-game-container {
  flex      : 0 0 auto;
  width     : auto;
  max-width : none;
  min-width : 0;
}
.arcade-tetris-side {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  padding-top    : 0;
  flex           : 1;
  min-width      : 0;
}
.arcade-tetris-next-box {
  border          : 2px solid var(--arc-yellow);
  padding         : 8px 4px;
  background      : var(--arc-black);
  width           : 100%;
  box-sizing      : border-box;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
}
.arcade-tetris-next-box canvas {
  display : block;
  width   : 50% !important;
  height  : auto !important;
}
.arcade-tetris-label {
  font-family : var(--arc-font);
  font-size   : 6px;
  color       : var(--arc-yellow);
  margin      : 0 0 4px;
  text-align  : center;
}
.arcade-tetris-stats {
  border     : 2px solid var(--arc-yellow);
  padding    : 6px 4px;
  background : var(--arc-gray);
  text-align : center;
  width      : 100%;
  box-sizing : border-box;
}
.arcade-tetris-stat {
  font-family : var(--arc-font);
  font-size   : 11px;
  color       : var(--arc-white);
  margin      : 0 0 6px;
}

/* ── Tetris mobile controls ─────────────────────────────────────── */
.arcade-tetris-controls {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  width          : 100%;
  max-width      : 320px;
}
.arcade-tetris-ctrl-row {
  display         : flex;
  gap             : 8px;
  justify-content : center;
}
.arcade-tetris-ctrl-btn {
  min-width   : 72px;
  padding     : 10px 8px;
  font-size   : 9px;
}
@media (hover: hover) and (pointer: fine) {
  .arcade-tetris-controls { display: none; }
}
.arcade-tetris-header {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  padding        : 8px 6px;
  background     : var(--arc-gray);
  border         : 2px solid var(--arc-yellow);
  width          : 100%;
  box-sizing     : border-box;
}
.arcade-tetris-header .arcade-title,
.arcade-tetris-header .arcade-score-display,
.arcade-tetris-header .arcade-hiscore-display {
  font-size : 7px;
}
.arcade-tetris-side {
  padding-top : 0;
}

.arcade-tetris-controls-info {
  border     : 2px solid var(--arc-yellow);
  padding    : 8px 6px;
  background : var(--arc-black);
  width      : 100%;
  box-sizing : border-box;
}
.arcade-tetris-ctrl-text {
  font-family : var(--arc-font2);
  font-size   : 10px;
  color       : var(--arc-white);
  margin      : 3px 0;
  opacity     : 0.7;
}
@media (hover: none) and (pointer: coarse) {
  .arcade-tetris-controls-info { display: none; }
}

.header-tetris{
	width: 100%;
	border: 2px solid var(--arc-yellow);
}

/* ── Checkbox ─────────────────────────────────────────────────────── */
.arcade-checkbox-label {
  display     : flex;
  align-items : flex-start;
  gap         : 10px;
  cursor      : pointer;
  margin-top  : 4px;
}

.arcade-checkbox-label input[type="checkbox"] {
  appearance        : none;
  -webkit-appearance: none;
  width             : 16px;
  height            : 16px;
  min-width         : 16px;
  border            : 2px solid var(--arc-yellow);
  background        : var(--arc-gray2);
  border-radius     : 3px;
  cursor            : pointer;
  margin-top        : 2px;
  transition        : background .15s, border-color .15s;
}

.arcade-checkbox-label input[type="checkbox"]:checked {
  background   : var(--arc-yellow);
  border-color : var(--arc-yellow);
  background-image   : url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 10px 8px;
}

.arcade-checkbox-label input[type="checkbox"]:focus {
  outline    : none;
  box-shadow : 0 0 8px rgba(255, 221, 0, 0.4);
}

.arcade-checkbox-label span {
  font-family : var(--arc-font2);
  font-size   : 9px;
  color       : var(--arc-white);
  line-height : 1.2;
}

.end-game-btn{
	padding: 9px !important;
	background-color: var(--arc-yellow) !important;
	color: var(--arc-black) !important;
}