/* ===== BASE STYLES ===== */
/* Variables, reset, body, app structure, ad banner */

:root {
  --bg-main: #22b8dc;
  --bg-darker: #1ea8cc;
  --header-top: #1a9ab8;
  --header-bottom: #0d7a8a;

  --tile-yellow: #f9c74f;
  --tile-orange: #f0a020;
  --tile-shadow: #c47f10;

  --ice-light: #b8f0f8;
  --ice-dark: #8ae0ec;
  --ice-shadow: rgba(0,80,100,0.15);

  --text-shadow: rgba(0,50,70,0.25);
  --pip-color: #1a1a2e;

  --btn-white: #ffffff;
  --btn-shadow: #c8c8d0;
  --btn-purple: #8b7b98;
  --btn-purple-dark: #6b5878;

  --rolls-badge: #f5a623;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, #1a9ab8 0%, #22b8dc 50%, #2ec8ec 100%);
  height: 100vh;
  height: 100dvh;
  position: relative;
}

/* Background particles for desktop side borders */
.bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  animation: floatBgParticle 25s infinite ease-in-out;
}

@keyframes floatBgParticle {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-80px) rotate(180deg); opacity: 0.5; }
}

.app-wrapper {
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.app {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
  overflow: hidden;
  min-height: 0; /* Important for flex children overflow */
}

/* ===== AD BANNER ===== */
.ad-banner {
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}