/* Skin: docs/mockups/wp3-redesign-v2.html — "hot game, sober money".
GAME = column hues everywhere (ball, board, chips, daubs share them →
color IS the lookup system). MONEY = white tabular figures, never a game
hue, never animated. Danger red only on destructive actions. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
background: #12141c; color: #eef1f7;
font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans Ethiopic", sans-serif;
font-size: 15px; overscroll-behavior: none;
}
.app { height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* column hues */
.hB { --h: #3f8cff; } .hI { --h: #8f6bff; } .hN { --h: #e552b8; }
.hG { --h: #2ec06a; } .hO { --h: #ff8a2a; }
/* ---- status / toast ---- */
.reconnect {
background: #ffc94d; color: #12141c; font-size: 12.5px; font-weight: 700;
text-align: center; padding: 6px 0;
}
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
background: #232839; border: 1px solid #2b3141; color: #eef1f7;
font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 10px;
white-space: nowrap; z-index: 10;
}
/* ---- stats bar ---- */
.stats { display: flex; gap: 6px; padding: 10px 12px 8px; }
.stat {
flex: 1; background: #1b1f2b; border: 1px solid #2b3141; border-radius: 9px;
padding: 6px 8px; min-width: 0;
}
.stat .l { font-size: 10px; color: #98a0b0; white-space: nowrap; }
.stat .v { font-size: 14px; font-weight: 700; margin-top: 1px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.stat.timer .v { color: #ffc94d; font-size: 16px; }
/* ---- selection ---- */
.selgrid {
flex: 1; overflow-y: auto; padding: 4px 12px;
display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-content: start;
}
.cartela {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
background: #1b1f2b; border: 1px solid #2b3141; border-radius: 9px;
font-size: 15px; font-weight: 600; color: #eef1f7; cursor: pointer; user-select: none;
}
.cartela.taken { background: #171a24; border-color: #171a24; color: #454c5c; cursor: default; }
.cartela.mine {
background: #2ec06a; border-color: #2ec06a; color: #071209; font-weight: 800;
box-shadow: 0 0 14px rgba(46, 192, 106, .45);
}
.selfoot { padding: 10px 12px 12px; border-top: 1px solid #2b3141; }
.selfoot .pot { display: flex; justify-content: space-between; font-size: 13px; color: #98a0b0; }
.selfoot .pot b { color: #eef1f7; font-weight: 700; }
.confirm {
margin-top: 10px; padding: 14px 0; text-align: center; border-radius: 11px;
background: #2ec06a; color: #071209; font-size: 16px; font-weight: 800; cursor: pointer;
}
.confirm.dim { background: #232839; color: #98a0b0; cursor: default; }
.confirm small { display: block; font-size: 11px; font-weight: 600; opacity: .78; margin-top: 1px; }
/* ---- live game ---- */
.game { flex: 1; display: flex; gap: 8px; padding: 4px 12px 10px; min-height: 0; }
.boardcol {
width: 152px; flex-shrink: 0; background: #1b1f2b; border: 1px solid #2b3141;
border-radius: 12px; padding: 8px 7px; display: flex; flex-direction: column;
}
.bhead { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 5px; }
.bhead div {
text-align: center; font-size: 12px; font-weight: 800; color: #fff; padding: 3px 0;
border-radius: 5px; background: var(--h);
}
.bgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; flex: 1; }
.bgrid .n {
display: flex; align-items: center; justify-content: center;
font-size: 11.5px; color: #454c5c; border-radius: 5px; font-weight: 600;
}
.bgrid .n.hit { color: #fff; background: color-mix(in srgb, var(--h) 38%, #12141c); }
.bgrid .n.now {
background: var(--h); color: #fff; font-weight: 800;
box-shadow: 0 0 10px var(--h);
}
.playcol { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.callrow { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.ball {
width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
background: var(--h); color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-weight: 800; font-size: 21px; line-height: 1;
box-shadow: 0 0 16px var(--h);
}
.ball.wait { background: #232839; box-shadow: none; color: #454c5c; }
.ball small { font-size: 10px; font-weight: 800; opacity: .85; }
.recent { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.rchip {
font-size: 11px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 6px;
background: color-mix(in srgb, var(--h) 55%, #12141c);
}
.autorow {
display: flex; align-items: center; justify-content: space-between;
background: #1b1f2b; border: 1px solid #2b3141; border-radius: 9px;
padding: 8px 10px; margin-bottom: 8px; font-size: 13px;
}
.toggle { width: 40px; height: 22px; border-radius: 11px; background: #2b3141; position: relative; cursor: pointer; }
.toggle::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #454c5c;
}
.toggle.on { background: #2ec06a; }
.toggle.on::after { left: auto; right: 2px; background: #071209; }
.cards {
display: flex; flex-direction: column; gap: 8px;
overflow-y: auto; min-height: 0; /* >1 cartela: stack scrolls, BINGO stays put */
}
.cardbox { background: #1b1f2b; border: 1px solid #2b3141; border-radius: 12px; padding: 8px; flex-shrink: 0; }
.cardbox.nearmiss { border-color: #ffc94d; box-shadow: 0 0 16px rgba(255, 201, 77, .35); }
.cardbox.dqbox { border-color: #ff5d5d; opacity: .8; }
.nearbadge {
text-align: center; font-size: 11.5px; font-weight: 800; color: #12141c;
background: #ffc94d; border-radius: 6px; padding: 3px 0; margin-bottom: 6px;
letter-spacing: .03em;
}
.nearbadge.dq { background: #ff5d5d; color: #fff; }
.chead { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
.chead div {
text-align: center; font-size: 12px; font-weight: 800; color: #fff;
border-radius: 5px; padding: 2px 0; background: var(--h);
}
.cgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cgrid .c {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
background: #232839; border-radius: 8px; font-size: 16px; font-weight: 700; color: #eef1f7;
cursor: pointer; user-select: none;
}
.cgrid .c.daub { background: var(--h); color: #fff; font-weight: 800; border-radius: 50%; }
.cgrid .c.free { background: #2b3141; color: #98a0b0; font-size: 10px; font-weight: 800; cursor: default; }
.cardno { text-align: center; font-size: 11.5px; color: #98a0b0; padding: 6px 0 0; }
.cardno b { color: #eef1f7; }
.bingo {
margin-top: 10px; padding: 15px 0; text-align: center; border-radius: 12px;
font-size: 17px; font-weight: 800; letter-spacing: .02em;
background: #232839; color: #454c5c; cursor: default; user-select: none;
}
.bingo.armed {
background: linear-gradient(180deg, #ffd76b, #ffb52e); color: #12141c;
box-shadow: 0 0 22px rgba(255, 190, 60, .5); cursor: pointer;
}
.bingo small { display: block; font-size: 10.5px; font-weight: 600; margin-top: 1px; }
/* ---- winner / settle ---- */
.winwrap {
flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 20px;
overflow-y: auto;
background:
radial-gradient(ellipse 120% 55% at 50% -5%, rgba(255, 181, 46, .22), transparent 60%),
#12141c;
}
.confetti { text-align: center; font-size: 20px; letter-spacing: 8px; margin-bottom: 6px; }
.winbox {
background: #1b1f2b; border: 1px solid #3a3423; border-radius: 16px; padding: 22px 16px 16px;
text-align: center;
}
.winbox .crown {
width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 50%;
background: linear-gradient(180deg, #ffd76b, #ffb52e);
display: flex; align-items: center; justify-content: center; font-size: 32px;
box-shadow: 0 0 26px rgba(255, 190, 60, .55);
}
.winbox h3 { font-size: 26px; font-weight: 800; color: #ffc94d; letter-spacing: .03em; }
.winbox .who { font-size: 14px; color: #eef1f7; margin: 4px 0 14px; }
.winbox .who b { font-weight: 700; }
.wincard { background: #12141c; border: 1px solid #2b3141; border-radius: 12px; padding: 10px; }
.wincard .t { font-size: 12.5px; color: #98a0b0; margin-bottom: 8px; }
.wincard .t b { color: #eef1f7; }
.wincard .cgrid .c { cursor: default; }
.wincard .cgrid .c.winline { outline: 2px solid #ffc94d; outline-offset: -2px; }
/* receipt: deliberately the ONE quiet zone on the screen */
.receipt {
margin-top: 12px; background: #12141c; border: 1px solid #2b3141; border-radius: 10px;
padding: 8px 10px 10px;
}
.payline { display: flex; justify-content: space-between; padding: 4px 2px; font-size: 13px; color: #98a0b0; }
.payline b { color: #eef1f7; font-weight: 700; }
.payline.total { border-top: 1px solid #2b3141; margin-top: 6px; padding-top: 9px; }
.payline.total b { font-size: 17px; }
.verify { font-size: 10.5px; color: #98a0b0; margin-top: 10px; text-align: left; }
.nextin {
margin-top: 14px; padding: 10px 0; border-radius: 9px;
background: #232839; font-size: 12.5px; color: #98a0b0;
}
/* ---- bottom nav ---- */
.nav { display: flex; border-top: 1px solid #2b3141; background: #1b1f2b; padding: 8px 0 10px; }
.nav div { flex: 1; text-align: center; font-size: 11.5px; color: #98a0b0; cursor: pointer; user-select: none; }
.nav div.on { color: #eef1f7; font-weight: 600; }
.nav .ic { display: block; font-size: 17px; margin-bottom: 2px; }
/* ---- lobby ---- */
.lobbyhead { padding: 18px 16px 6px; }
.lobbyhead h2 { font-size: 20px; font-weight: 800; }
.lobbyhead .sub { font-size: 12.5px; color: #98a0b0; margin-top: 2px; }
.tiers { flex: 1; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.tier {
display: flex; align-items: center; gap: 12px; padding: 14px 14px;
background: #1b1f2b; border: 1px solid #2b3141; border-radius: 14px; cursor: pointer;
}
.tstake { width: 64px; text-align: center; flex-shrink: 0; }
.tstake b { display: block; font-size: 24px; font-weight: 800; }
.tstake small { font-size: 10px; color: #98a0b0; font-weight: 700; letter-spacing: .06em; }
.tmid { flex: 1; min-width: 0; }
.tpot { font-size: 14.5px; font-weight: 700; }
.tsub { font-size: 12px; color: #98a0b0; margin-top: 2px; }
.tgo {
min-width: 74px; text-align: center; padding: 8px 6px; border-radius: 10px;
background: #232839; color: #98a0b0; font-size: 11px;
}
.tgo.open { background: #2ec06a; color: #071209; font-weight: 800; }
.tgo.open span { display: block; font-size: 16px; }
.tgo.open small { font-size: 10px; letter-spacing: .05em; }
.empty { text-align: center; color: #98a0b0; font-size: 13px; padding: 24px 0; }
/* ---- wallet ---- */
.wallet { flex: 1; overflow-y: auto; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wallet .stats { padding: 0; }
.stat .v.big { font-size: 17px; }
.wbox { background: #1b1f2b; border: 1px solid #2b3141; border-radius: 12px; padding: 12px; }
.wtitle { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.wsub { font-size: 12px; color: #98a0b0; line-height: 1.45; margin-bottom: 10px; }
.wsub b { color: #eef1f7; }
.wform { display: flex; gap: 8px; }
.wform input {
flex: 1; min-width: 0; background: #12141c; border: 1px solid #2b3141; border-radius: 9px;
color: #eef1f7; font-size: 14px; padding: 10px 10px; outline: none;
font-variant-numeric: tabular-nums;
}
.wform input:focus { border-color: #3f8cff; }
.wbtn {
padding: 10px 16px; border-radius: 9px; background: #2ec06a; color: #071209;
font-size: 13.5px; font-weight: 800; cursor: pointer; user-select: none; flex-shrink: 0;
display: flex; align-items: center;
}
.hlist { display: flex; flex-direction: column; }
.hrow {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 2px; border-top: 1px solid #232839; font-size: 13.5px;
}
.hrow:first-child { border-top: none; }
.hmain small { display: block; color: #98a0b0; font-size: 11px; margin-top: 1px; }
.hamt b { font-weight: 700; }
.hamt .pos { color: #2ec06a; }
.hstatus { font-size: 11px; color: #ffc94d; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}