/* === shop pictures (transparent PNG, fitted to the card) === */
.icard .ia{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden}
.icard .ia .wi-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
/* === Mines: the board used the same class as the "LIVE" badge (.live = flex, letter-spacing, green) which squashed the 5x5 grid === */
.mboard.live{display:block;font:inherit;letter-spacing:normal;color:inherit;gap:0;flex:none}
.mboard .mgrid{width:100%}
.mboard>*:not(.mgrid){display:block;text-align:center;margin-top:12px;font-size:14px}
.mtile{min-height:0}
/* Latest games rows: keep them on one tidy line on small screens */
@media(max-width:560px){.mines{grid-template-columns:minmax(0,1fr)!important}.mboard{padding:10px}.mgrid{gap:6px;max-width:100%}.mtile{border-radius:10px}}
/* === mobile polish (all pages) === */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
@media(max-width:820px){
  .tbl{font-size:12px}.table-wrap,.panel.flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .igrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  h1{font-size:24px}.page-head h1{font-size:24px}
  .toasts{left:8px;right:8px;max-width:none}
  button,.btn,.tab,select,input{min-height:40px}
  .modal,.dialog{max-width:calc(100vw - 16px)!important}
}
@media(max-width:420px){.igrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* language switch + extra nav link */
#cx-lang{position:fixed;z-index:60;right:10px;bottom:76px;display:flex;gap:2px;background:#0f1524ee;border:1px solid #232c42;border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
#cx-lang button{all:unset;cursor:pointer;font:700 11px/1 Inter,system-ui,sans-serif;color:#8b96b0;padding:7px 9px;border-radius:999px;min-height:0!important}
#cx-lang button.on{background:#7fd6ff;color:#06101c}
@media(min-width:821px){#cx-lang{bottom:14px}}
.mtile .gm{display:block;height:auto}
.mtile.mine svg{display:block}
/* === Case battle reel: cards no longer stretch across a wide 1v1 panel, fades are lighter so the winning card is clearly visible === */
.reel .tin{max-width:320px;margin-left:auto;margin-right:auto}
.reel:before,.reel:after{height:40px!important}
.reel .tart{width:70%}
.reel .tart .art,.reel .tart img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.reel .mark{border-radius:8px}
@media(max-width:820px){.reel .tin{max-width:100%}}

/* === fixes: state classes that collided with global utility classes === */
/* Empty seats ("?" circles) picked up the ".empty" message-box padding (40px 16px) and turned into tall ovals */
.avatar.empty{padding:0!important;text-align:initial}
.seat.empty{text-align:left}
/* A battle row / board marked "live" picked up the green LIVE-badge styles (tiny bold letter-spaced green text, a pulsing ring on every <i>) */
.brow.live{font:inherit;letter-spacing:normal;color:inherit;flex:none}
.brow.live i,.mboard.live i{animation:none!important}
.mboard.live .mtile i.gm{box-shadow:none}
/* plain dark background: no diagonal stripe pattern */
body:before{background:radial-gradient(900px 500px at 85% -10%,rgba(127,214,255,.06),transparent 70%)!important}

/* cx-lang-mobile-fix: on phones the language switch was drawn over the footer text; make it small and keep it clear of the bottom bar */
@media(max-width:820px){#cx-lang{transform:scale(.78);transform-origin:right bottom;right:6px!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;opacity:.92}}

/* ---- free battles / passwords ---- */
.fb-cost{font-size:13px;color:#aab4cc}.fb-cost b{color:#f2c35b}
.fb-back{position:fixed;inset:0;z-index:100000;background:rgba(5,8,14,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.fb-dlg{width:100%;max-width:460px;background:#121826;border:1px solid #232c42;border-radius:16px;padding:20px;color:#e6ebf5;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fb-dlg h3{margin:0 0 6px;font-size:20px}.fb-dim{color:#8b96b0;margin:6px 0}.fb-dim.sm,.sm.fb-bad{font-size:12.5px}.fb-bad{color:#f87171}
.fb-tbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}.fb-tbl th{font-weight:600;color:#8b96b0;text-align:left;font-size:12px;padding:6px 4px;border-bottom:1px solid #232c42}.fb-tbl td{padding:8px 4px;border-bottom:1px solid #1b2236}.fb-tbl .r{text-align:right;white-space:nowrap}.fb-tbl .b{font-weight:700;color:#f2c35b}
.fb-sum{display:flex;justify-content:space-between;align-items:center;padding:12px;margin:10px 0;border-radius:12px;background:#171d2c;border:1px solid #232c42}.fb-sum b{font-size:24px;color:#f2c35b}
.fb-act{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}.fb-btn{background:#7fd6ff;color:#06141d;border:0;border-radius:10px;padding:11px 18px;font:700 14px inherit;cursor:pointer}.fb-btn.sec{background:#1a2238;color:#e6ebf5;border:1px solid #2a3552}.fb-btn[disabled]{opacity:.45;cursor:not-allowed}
.fb-tags{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}.fb-tag{font:700 10.5px/1 inherit;letter-spacing:.8px;padding:4px 7px;border-radius:6px;white-space:nowrap}
.fb-tag.free{background:#10301f;color:#4ade80;border:1px solid #1f5a39}.fb-tag.house{background:#14303d;color:#7fd6ff;border:1px solid #2a6a86}.fb-tag.lock{background:#2a2414;color:#ffc65c;border:1px solid #5a4a22}
h1 .fb-tags .fb-tag,h2 .fb-tags .fb-tag{font-size:10.5px;padding:4px 7px}h1 .fb-tags,h2 .fb-tags{font-size:0;vertical-align:middle}
.btn.bad.ghost{color:#ff9b9b;border-color:#7a2330}
.wq{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0 4px}.wq img{width:168px;height:168px;border-radius:12px;background:#fff;padding:0;image-rendering:pixelated}.wq small{color:#8b96b0}

.fb-in{width:100%;background:#0a0d14;color:#e6ebf5;border:1px solid #2a3552;border-radius:10px;padding:10px 12px;font:inherit;box-sizing:border-box}.fb-in:focus{outline:0;border-color:#7fd6ff}
.fb-box{margin:14px 0;border:1px solid #232c42;border-radius:14px;background:#0f1522;overflow:hidden}
.fb-head{padding:10px 14px;font:700 13px/1 inherit;letter-spacing:1px;text-transform:uppercase;color:#7fd6ff;border-bottom:1px solid #232c42;background:#121a2b}
.fb-rowc{border-bottom:1px solid #1b2236}.fb-rowc:last-child{border-bottom:0}
.fb-line{display:flex;gap:12px;align-items:center;padding:13px 14px;cursor:pointer;user-select:none;flex-wrap:wrap}.fb-line:hover{background:#121a2b}
.fb-nm{font-weight:700;font-size:15px}.fb-line small{color:#8b96b0;font-size:12px;flex:1 1 180px}
i.fb-sw{display:inline-block;width:44px;height:24px;border-radius:14px;background:#1d2538;border:1px solid #2f3a58;position:relative;flex:none;transition:background .15s}
i.fb-sw:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#8b96b0;transition:transform .15s,background .15s}
.fb-line.on i.fb-sw{background:#14303d;border-color:#7fd6ff}.fb-line.on i.fb-sw:after{transform:translateX(20px);background:#7fd6ff}
.fb-more{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px}
.fb-more input[type=range]{width:100%;accent-color:#7fd6ff;margin:6px 0 0}
.fb-scale{display:flex;justify-content:space-between;align-items:center;color:#8b96b0;font-size:12px}.fb-scale span{padding:5px 9px;border:1px solid #232c42;border-radius:8px;background:#0a0d14}.fb-scale b{color:#e6ebf5;padding:5px 12px;border:1px solid #2a6a86;border-radius:8px;background:#14303d}
.fb-cost{font-size:13px;color:#aab4cc;line-height:1.55}.fb-cost b{color:#f2c35b}

.wq-time input[type=datetime-local]{width:100%;color-scheme:dark}

/* sidebar: last items must scroll above the floating language switch */
.side{padding-bottom:64px!important}
.side .mi svg{flex:none}