* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background-color: #333; overscroll-behavior: none; }
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin: 0; padding: 0; font: normal 1rem sans-serif; background-color: #333; color: #fff; }

a { text-decoration: none; color: #fff; }
a:visited { color: #fff; }
button.action { width: 130px; margin: 0 10px; padding: 10px 20px; background: #ff0000; color: #fff; border-radius: 8px; border: none; cursor: pointer; }
li { list-style: none; }
input { padding: 10px; font-size: 1.2rem; border: 1px solid #ccc; border-radius: 10px; }

header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #ff4400aa; color: #fff; line-height: 1.5rem; }
footer { width: 100%; display: flex; justify-content: center; padding: 0px; color: #fff; }
footer p { margin: 1rem; padding: 0; line-height: 1rem; }
status { color: #ff4; }
main { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center; /*max-width: 480px;*/ width: 100%; }
hbox { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
vbox { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
 
.hidden { display: none; }

.apptitle  { width: 100%; font-size: 1.5rem; }
.apptitle img { width: 20px; }
.cartera   { width: 100%; text-align: right; font-size: 1.2rem; }
.cartera a { color: #fff; cursor: pointer; }
.cartera a:visited { color: #fff; }
.cartera img { margin-left: 4px; width: 16px; }

view { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; align-items: center; max-width: 480px; width: 100%; background: url(media/bg.jpg) top center no-repeat; color: #333; }
board { display: flex; flex-direction: row; justify-content: center;  width: 100%; max-width: 440px; width: 100%; }
info { display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px; font-size: 1rem; font-weight: bold; color: #f00; background-color: #ff440022; text-transform: uppercase; }
sound { margin-top: 32px; cursor: pointer; }
sound img { opacity: 0.4; }
ballpot { display: flex; width: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 10px; font-size: 1rem; font-weight: bold; color: #f00; background-color: #ff440022; text-transform: uppercase; }
jackpot { display: block; width: 100%; padding: 10px; text-align: center; font-size: 1rem; font-weight: bold; color: #f00; /*background-color: #ff0022dd;*/ }
jackpot big { font-size: 1.5rem; }
prize   { display: block; width: 100%; text-align: center; font-size: 1.2rem; font-weight: bold; color: #f20; }
balls { display: flex; margin: 0 5px; }
balls p { width: 36px; height: 36px; margin: 4px; text-align: center; font-family: monospace; font-size: 0.9rem; line-height: 2.2rem; border-radius: 18px; border: 1px solid #ff000044; background: #ffffff44; }
balls p x { color: red;}
ball  { width: 64px; height: 64px; /*margin-left: 15px;*/ text-align: center; border: 4px solid #ff000044; border-radius: 64px; background-color: #fff; font-size: 2rem; }
ball p { margin: 0; padding: 0; }
ball .letter { margin-top: 5px; font-size: 0.8rem; font-weight: bold; color: #f00; }
ball .number { font-size: 2rem; }
last { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; margin-right: 10px; }
pips { display: block; border: 1px solid #f40; border-radius: 40px; padding: 2px 20px; cursor: pointer; }

control  { margin-top: 20px; font-size: 1rem; color: #fff; }

buybar { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; margin: 10px 0; padding: 0 20px; }
buybar hbox { margin: 10px 0; }
buybar button { width: 100%; margin: 0 5px; padding: 10px; background-color: #888; color: #fff; border-radius: 8px; border: none; cursor: pointer; }
buybar button.selected { background-color: #f00; }

total { font-size: 1.5rem; font-weight: bold; }

botbar { display: flex; justify-content: space-between; width: 100%; max-width: 480px; margin: 20px 0; padding: 0 20px; }
botbar button { width: 130px; padding: 10px 20px; background: #ff000088; color: #fff; border-radius: 8px; border: none; }


/* BINGO CARDS */

panels {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
/*  touch-action: pan-x;*/
  min-height: 100dvh;
/*  max-height: 100dvh;*/
  height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

panels { scrollbar-width: none; }
panels { -ms-overflow-style: none; }
panels::-webkit-scrollbar { display: none; }

panel {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

panel:nth-child(1) { background-color: #064; }
panel:nth-child(2) { background-color: #fff; }
panel:nth-child(3) { background-color: #357; }

cards {
  position: relative;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100dvh;
  scroll-snap-type: y mandatory;
}

cards { scrollbar-width: none; }
cards { -ms-overflow-style: none; }
cards::-webkit-scrollbar { display: none; }


card { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; align-items: center; max-width: 480px; width: 100%; background: url(media/bg.jpg) top center no-repeat; color: #333; }
.nobg { background: none; }

#game view {
  grid-area: story;
  user-select: none;
  touch-action: manipulation;
  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  height: 100dvh;
}

#game card {
  grid-area: story;
  user-select: none;
  touch-action: manipulation;
  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  height: 100dvh;
}

cards card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-size: cover;
  background-image: url('media/bg.jpg'), linear-gradient(to top, lch(98 0 0), lch(90 0 0));
}

table.card { width: 90%; margin: 0 20px; }
table.card th { font-size: 3rem; font-weight: bold; }
table.card td { min-width: 20%; width: 20%; height: auto; padding: 10px 0; font-size: 1.5rem; font-weight: bold; text-align: center; border: 4px solid #ff000033; border-radius: 10px }
table.card td.mark { background-color: #ffff0088; }


/* BOARD */

picks { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100dvh; margin: 0; padding: 20px; background-color: rgba(0, 0, 0, .5); background: url(media/boardbg.jpg) top center no-repeat; background-size: cover; }
picks table { width: 100%; padding: 30px; color: rgba(255,255,255,.2); text-align: center; font-size: 1.2rem; background-color: #00000088; border-radius: 10px; }
picks table th { width: 20%; height: auto; padding: 2px; color: #FFF; text-align: center; font-size: 1.5rem; }
picks table td { width: 20%; height: auto; padding: 2px; text-align: center; }
picks table td.lit { color: #FF8; }
pick   { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 64px; height: 64px; text-align: center; background: url(media/ball.png) top center no-repeat; background-size: 64px 64px; }
count  { display: inline-block; width: 100%; color: #CCC; margin: 8px 0; padding: 4px 0; font-size: 1rem; font-weight: bold; border-radius: 8px; background-color: #046; text-align:center; }
letter { display: inline-block; width: 30px; margin: -2px 0 0 0; color: #000; font-size: 1.0em; }
number { display: inline-block; width: 30px; margin-top: -4px; color: #000; font-size: 1.5em; font-weight: bold; }


/* CHATBOX */

chattop  { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 10px; color: #fff; background-color: #0b0e0a; }
chattop button { padding: 5px 20px; color: #fff; background: transparent; border: 1px solid #ffffff44; border-radius: 8px; font-size: 1rem; cursor: pointer; }
chatbox  { overflow-y: scroll; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100dvh; padding: 10px; color: #fff; background: url(media/chatbg.jpg) top center no-repeat; background-size: cover; }
chatbox li { list-style: none; width: 100%; }
chatbox li p { max-width: 85%; margin: 5px 0; padding: 10px 15px; text-align: left; background-color: #054; border-radius: 8px; }
chatbox li p name  { display: block; font-weight: bold; font-size: 0.9rem; }
chatbox li.left p  { float: left; text-align: left; background-color: #054; }
chatbox li.right p { float: right; text-align: right; background-color: #045; }
chatbox li.left p name  { color: #6ca; }
chatbox li.right p name { color: #8be; }
chatbox li p name.admin { color: #ff4; }
chatline { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; padding: 10px; }
chatline input { display: flex; flex-grow: 1; height: 44px; padding: 10px; border-radius: 8px; border: 1px solid #060; font-size: 1.2rem; }
chatline button { width: 44px; height: 44px; margin-left: 5px; border-radius: 8px; border: none; background-color: #0c8; }
chatline button img { margin: 3px 0 0 3px; }

chatbox { scrollbar-width: none; }
chatbox { -ms-overflow-style: none; }
chatbox::-webkit-scrollbar { display: none; }

/* BUYFORM */

#buyform { display: flex; }
cards { display: none; }


modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
modal content { background-color: #ffffff33; padding: 20px; border-radius: 8px; border: 1px solid #ffffff33; max-width: 500px; text-align: center; }
modal button { display: block; width: 100%; margin: 10px 0; padding: 8px 20px; background-color: #00880066; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
modal button.closeModal { float: right; width: 16px; height: 16px; margin: -10px -10px 20px 0; padding: 0; border-radius: 40px; border: none; background-color: transparent; }

/* SLIDE */
/*
#content { transition: transform 0.5s ease; }
.hidden-left { transform: translateX(-100%); }
.hidden-right { transform: translateX(100%); }


panels { transition: scrollLeft 2s ease-out; }
.slide { transition: transform 0.5s ease; }
.slide-up { transform: translateY(-100%); }
.slide-down { transform: translateY(0); }
.slide-left { transform: translateX(-100%); }
.slide-right { transform: translateX(100%); }
.slidein { animation-duration: 2s; animation-name: slidein; }
@keyframes slidein { from { scrollLeft: 0; } to { scrollLeft: 480px; } }
*/