/* Pisse Coin Arcade - always yellow, flowy, drippy. Shared across the lobby
   and every game page. */
:root {
  --yellow-bright: #fff176;
  --yellow-gold: #ffd600;
  --yellow-deep: #f57f17;
  --bg-dark: #0d0a00;
  --bg-panel: #1a1400;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Avoids a horizontal scrollbar ever appearing on narrow phones if any
     child briefly overflows (decorative drips, shake-jittered canvas, etc). */
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  background: radial-gradient(ellipse at top, #2b2200 0%, var(--bg-dark) 60%);
  color: var(--yellow-bright);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  /* Prevents the classic mobile-Safari "rubber band" bounce from fighting
     with in-game swipe/tap input near the screen edges. */
  overscroll-behavior: none;
}

/* Decorative droplets dripping down from the top of every page. */
.drip-row {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.drip {
  position: absolute;
  top: 0;
  width: 6px;
  height: 18px;
  background: linear-gradient(180deg, var(--yellow-gold), transparent);
  border-radius: 0 0 50% 50%;
  animation: drip-fall linear infinite;
  opacity: 0.8;
}

@keyframes drip-fall {
  0% { transform: translateY(-20px) scaleY(0.6); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.6; }
  100% { transform: translateY(100vh) scaleY(1.4); opacity: 0; }
}

h1, h2 {
  color: var(--yellow-gold);
  text-shadow: 0 0 12px rgba(255, 214, 0, 0.6);
}

a {
  color: inherit;
}

button, .btn {
  font: inherit;
  cursor: pointer;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-deep));
  color: #1a1400;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255, 214, 0, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(255, 214, 0, 0.8);
}

button:active, .btn:active {
  transform: translateY(0);
}

.panel {
  background: var(--bg-panel);
  border: 1px solid rgba(255, 214, 0, 0.3);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 214, 0, 0.15);
  padding: 16px;
  position: relative;
  z-index: 2;
}

.wallet-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.wallet-modal {
  background: var(--bg-panel);
  border: 2px solid var(--yellow-gold);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(255, 214, 0, 0.5);
  padding: 24px;
  width: min(360px, 90vw);
  text-align: center;
}

.wallet-modal input {
  width: 100%;
  padding: 10px;
  margin: 12px 0;
  border-radius: 6px;
  border: 1px solid var(--yellow-deep);
  background: #000;
  color: var(--yellow-bright);
  font-family: monospace;
}

.wallet-modal-error {
  color: #ff5252;
  font-size: 0.85em;
  min-height: 1.2em;
}

.wallet-status {
  position: fixed;
  top: 8px;
  right: 12px;
  font-size: 0.8em;
  color: var(--yellow-gold);
  z-index: 5;
}

.wallet-status button {
  padding: 4px 10px;
  font-size: 0.85em;
  margin-left: 6px;
}

/* Game pages: a fluid wrapper the canvas scales inside, capped at its
   design width on larger screens. Put max-width: inherit-from-inline-style
   per-page (400px for Snake, 300px for Tetris) via an inline style on
   #wrapper, since the two games have different native aspect ratios. */
.game-wrapper {
  width: 100%;
  margin: 20px auto;
  padding: 0 12px;
  position: relative;
  z-index: 2;
}

.game-canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none; /* the canvas itself never needs page-scroll/zoom gestures */
}

/* Only shown on touch-primary devices (no hover, coarse pointer) - desktop
   mouse+keyboard users get a clean board with no extra clutter. */
.touch-controls {
  display: none;
  margin-top: 12px;
  user-select: none;
}

@media (hover: none) and (pointer: coarse) {
  .touch-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

.touch-controls button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.4em;
  padding: 0;
  touch-action: manipulation;
}

.touch-controls .dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 8px;
  justify-content: center;
}

.touch-controls .dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.touch-controls .dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.touch-controls .dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.touch-controls .dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }

.touch-controls .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.touch-controls .action-buttons button {
  border-radius: 12px;
  width: auto;
  height: 48px;
  padding: 0 16px;
  font-size: 1em;
}