/* Win Go's own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): the globe and
   its tube on one canvas (static/wingo.js), the bets as cells on the stage (the numbers with their colour bars, Green /
   Violet / Red, Small / Big), the chip row under them, the chips on a cell as a gold tag. */

.wg-stage { position: relative; flex: 1; min-height: 470px; }
.wg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wg-bets { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; }
.wg-row { display: grid; gap: 6px; }
.wg-nums { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.wg-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-size { grid-template-columns: 1fr 1fr; }
.wg-tools { display: flex; gap: 6px; justify-content: center; }
.wg-c { height: 48px; --base: var(--cell); --hi: var(--cell-hi); --fill: var(--base); -webkit-touch-callout: none; }
.wg-nums .wg-c { height: 60px; }
.wg-size .wg-c { height: 42px; }
.wg-c.wg-gr { --base: #118a57; --hi: #16a067; } .wg-c.wg-rd { --base: #b4283b; --hi: #c9384c; } .wg-c.wg-vi { --base: #5d43a6; --hi: #6d52b9; }
.wg-c:not(.rev):hover, .wg-c.wave { --fill: var(--hi); --lnc: var(--gold-line); }
.wg-c:not(.rev):active { transform: scale(.95); }
.wg-c > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wg-c > i b { font: 600 15px/1 var(--f-ui); color: var(--ink); transition: transform .16s var(--e-out); }
.wg-nums .wg-c > i b { font: 800 22px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.wg-c > i small { font: 600 13px/1 var(--f-num); color: rgb(238 242 251 / .72); font-variant-numeric: tabular-nums; }
.wg-size .wg-c > i { flex-direction: row; gap: 8px; }
.wg-size .wg-c > i small { color: var(--ink-2); }
.wg-bar { position: absolute; left: 9px; right: 9px; bottom: 8px; height: 3px; display: flex; gap: 2px; }
.wg-bar u { flex: 1; text-decoration: none; }
.wg-k-green { background: #118a57; } .wg-k-red { background: #b4283b; } .wg-k-violet { background: #6d52b9; }
.wg-tag { --k: 4px; position: absolute; top: 5px; right: 5px; z-index: 2; min-width: 22px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font: 800 13px/1 var(--f-num); font-style: normal; pointer-events: none;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); transition: opacity .2s, background-color .2s; }
.wg-tag.won { background: var(--win); color: #04210f; }
.wg-tag.lost { opacity: .35; }
.wg-nums .wg-tag { top: auto; bottom: 13px; left: 0; right: 0; margin: 0 auto; width: max-content; }
.wg-nums .wg-c.has > i b { transform: translateY(-12px); }
.wg-cols .wg-c.has > i, .wg-size .wg-c.has > i { padding-right: 30px; }
.wg-c.hit { --lnc: var(--ivory); }
.wg-c.won { --lnc: var(--win); }
.wg-c.lost { --lnc: rgb(255 77 103 / .6); }
.wg-c.gold { --lnc: var(--gold-hi); animation: wg-stamp .3s var(--e-settle); }
@keyframes wg-stamp { 50% { transform: scale(1.08); } }
.wg-bets.busy .wg-c, .gm.autoplaying .wg-c { cursor: default; }
.wg-bets.busy .wg-c:not(.rev):hover, .gm.autoplaying .wg-c:not(.rev):hover { --fill: var(--base); --lnc: transparent; transform: none; }
.wg-chip { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; height: 34px; min-width: 52px; padding: 0 10px; border: 0;
  background: var(--lnc); color: var(--ink-2); font: 700 15px var(--f-num); cursor: pointer;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color var(--t-hover), transform var(--t-press); }
.wg-chip::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .6px) 0, 100% 0, 100% calc(100% - var(--k) + .6px), calc(100% - var(--k) + .6px) 100%, 0 100%, 0 calc(var(--k) - .6px)); }
.wg-chip:hover { --fill: var(--cell-hi); color: var(--ink); }
.wg-chip:active { transform: scale(.95); }
.wg-chip.on { --lnc: var(--gold-line); color: var(--gold); }
.gm.autoplaying .wg-chip, .wg-bets.busy .wg-chip { cursor: default; }
/* the history chips: each past draw in its colour (a violet number with a violet underline) */
.gm-recent .gm-pill.wg-p-g, .gm-recent .gm-pill.wg-p-gv { color: #2cc47a; }
.gm-recent .gm-pill.wg-p-r, .gm-recent .gm-pill.wg-p-rv { color: #ee5a6e; }
.gm-recent .gm-pill.wg-p-gv, .gm-recent .gm-pill.wg-p-rv { box-shadow: inset 0 -2px 0 #6d52b9; }

@media (max-width: 899px) {
  .gm[data-game="wingo"] .gm-play { min-height: 0; }
  .wg-stage { min-height: 500px; }
  .wg-nums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wg-c, .wg-nums .wg-c { height: 44px; }
  .wg-nums .wg-tag { top: 4px; right: 4px; bottom: auto; left: auto; margin: 0; }
  .wg-nums .wg-c.has > i b { transform: translateX(-11px); }
  .wg-bar { bottom: 6px; }
  .wg-chip { height: 32px; min-width: 0; flex: 1; }
}

/* Instant | 30 s, and in periods the clock beside it: the period's id, the time left, betting open / closed; in the
   lock, two big gold numerals over the globe count its last seconds */
.wg-top { position: absolute; top: 8px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.wg-mode { display: flex; gap: 4px; }
.wg-mode .gm-sec { --k: 6px; --fill: var(--stage); min-width: 0; height: 32px; padding: 0 12px; font-size: 13px; color: var(--ink-2); }
.wg-mode .gm-sec[aria-pressed="true"] { --lnc: var(--gold); color: var(--gold); }
.gm.autoplaying .wg-mode .gm-sec, .gm.playing .wg-mode .gm-sec { pointer-events: none; opacity: .5; }
.wg-clock { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; text-align: right; }
.wg-clock[hidden] { display: none; }
.wg-pid { grid-column: 1; font: 500 12px var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wg-secs { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 800 26px/1 var(--f-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.wg-clock em { grid-column: 1; grid-row: 2; font: 600 12px var(--f-ui); font-style: normal; color: var(--win); }
.wg-clock.locked em { color: var(--loss); }
.wg-clock.locked .wg-secs { color: var(--gold); }
.wg-big { position: absolute; z-index: 2; transform: translate(-50%, -50%); font: 900 112px/1 var(--f-num); color: var(--gold);
  font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 6px 24px rgb(0 0 0 / .6); }
.wg-big[hidden] { display: none; }
@media (max-width: 899px) {
  .wg-top { gap: 8px; right: 8px; }
  .wg-mode .gm-sec { height: 30px; padding: 0 9px; }
  .wg-secs { font-size: 22px; }
  .wg-pid { font-size: 11px; }
  .wg-big { font-size: 84px; }
}