/* extra5.css: loads after everything else. Back arrow, Mines on phones, live stats window, live bet table under the games, trade links. */

/* ---------------- back arrow (every page but the home page) ---------------- */
.backbar{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:8px 14px 8px 10px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13.5px;line-height:1;text-decoration:none;cursor:pointer;transition:color .12s,border-color .12s,transform .12s}
.backbar:hover{color:var(--text);border-color:var(--line2)}
.backbar:active{transform:scale(.97)}
.backbar svg{width:16px;height:16px;transform:scaleX(-1);flex:none}
@media (max-width:860px){.backbar{margin-bottom:8px;padding:9px 14px 9px 10px}}

/* ---------------- Mines: gems and mines draw at the same size on every phone ---------------- */
/* The icon used to be sized in percent of a box whose own height came from aspect-ratio. Some phone browsers cannot resolve that and draw the
   gem and the mine tiny. Now the icon is positioned inside the tile (absolute), which every browser understands. */
.tile{position:relative}
.tile .face{position:absolute;inset:0;width:auto;height:auto;display:block}
.tile .face svg{position:absolute;left:20%;top:20%;width:60%;height:60%;display:block;margin:0}
@media (max-width:860px){
  .mines-wrap{padding:12px 6px}
  .mines-board{padding:10px}
  .mines-grid{gap:6px}
  .tile{border-radius:11px}
  .tile .face svg{left:18%;top:18%;width:64%;height:64%}
  .mines-info .stat{min-width:0;flex:1}
}

/* ---------------- live stats window ---------------- */
@media (min-width:861px){
  .st-h{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
  .statspanel.dragging{opacity:.96;box-shadow:0 30px 70px rgba(0,0,0,.7)}
  .statspanel.dragging .st-h{cursor:grabbing}
}
.st-since{margin-top:8px;text-align:center}
/* on a phone it is part of the page, between the board and the controls (the script puts it there) */
.statspanel.inline{position:static;order:1;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;border-radius:16px;box-shadow:none;animation:none;left:auto;right:auto;bottom:auto;top:auto}
.upg>.statspanel.inline{order:1}
body.chat-open .statspanel.inline{right:auto}

/* ---------------- live bets (home page and under every game) ---------------- */
.gfeed{margin-top:6px}
.gfeed .sec-h{margin-top:22px}
.feedtbl .cu{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
@media (max-width:560px){
  .feedcard{padding:12px 10px}
  .feedtbl th,.feedtbl td{padding:9px 5px;font-size:12.5px;white-space:nowrap}
  .feedtbl .gtag .gn{display:none}
  .feedtbl .cu{max-width:84px}
  .feedtbl .gtag{gap:0}
}

/* ---------------- Steam trade links (the + / - manager) ---------------- */
.tl-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.tl-row.def{border-color:rgba(34,229,140,.5)}
.tl-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.tl-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tl-main small{flex-basis:100%;word-break:break-all}
.tl-acts{display:flex;align-items:center;gap:6px;flex:none}
.tl-minus{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--red);font-size:24px;line-height:1;font-weight:800;cursor:pointer;display:grid;place-items:center;padding:0}
.tl-minus:hover{background:rgba(255,77,106,.12)}
.tl-minus.sure{width:auto;padding:0 12px;font-size:13px;background:var(--red);color:#fff;border-color:var(--red)}
.tl-plus b{font-size:18px;line-height:1;margin-right:4px}
@media (max-width:480px){.tl-row{flex-wrap:wrap}.tl-acts{width:100%;justify-content:flex-end}}
/* ---------------- big numbers stay inside their boxes (a win of $100,000.00 or more) ---------------- */
.winburst{max-width:96%}
.winburst b,.winburst small{max-width:100%}
.upg-won{max-width:100%;box-sizing:border-box;min-width:0}
.upg-won>div{min-width:0}
.upg-won b{overflow-wrap:anywhere;font-size:clamp(14px,4.6vw,20px)}
.upg-won small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sub b,#cfRes,#cfRes b,#kres,#kres b{overflow-wrap:anywhere}
.stat b,.big-stat,.statbox b,.upg-win .big{overflow-wrap:anywhere;max-width:100%}
.feedtbl td,.feedtbl th{white-space:nowrap}
.feedtbl td:last-child{max-width:34vw;overflow:hidden;text-overflow:ellipsis}

/* ---------------- notes on the deposit / withdraw pages: bonus offer, wagering left, e-mail confirmation ---------------- */
.bonusnote{display:grid;gap:10px;margin:0 0 14px}
.bonusnote .bn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.bonusnote .bn>svg{width:22px;height:22px;flex:none;color:var(--accent)}
.bonusnote .bn>div{flex:1;min-width:0}
.bonusnote .bn b{display:block;font-size:14.5px}
.bonusnote .bn span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.bonusnote .bn.gift{border-color:var(--accent);background:linear-gradient(90deg,rgba(34,229,140,.12),transparent 70%),var(--panel)}
.bonusnote .bn.warn{border-color:#c9922e}.bonusnote .bn.warn>svg{color:#f0b13a}
@media (max-width:560px){.bonusnote .bn{flex-wrap:wrap}.bonusnote .bn .btn{width:100%}}
.bonusnote .bn-facts{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.bonusnote .bn-facts li{font-size:12px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.bonusnote .bn-ends{color:var(--accent)!important;font-weight:700}
.auth .bonusnote{margin:0 0 16px;text-align:left}
.bonusnote .bn span b{display:inline;font-size:inherit;color:var(--text)}