/* CSGOTUNE · slim theme layer: original blue palette, compact flat buttons, clash-style reel + battle board.
   Layout (left menu, right chat, header) is NOT touched here. To go back to the old look, delete the <link> to theme.css in index.html. */
:root{
  --panel:#121724;--panel2:#171d2c;--panel3:#1d2536;--line:#1f2840;--line2:#2b3752;
  --ice:#7fd6ff;--ice2:#b6ecff;--iced:#3aa7dd;--on-ice:#06141d;--gold:#f2c35b;
}

/* ---- compact flat controls (no fat buttons) ---- */
.btn{border-radius:5px;padding:7px 14px;font-size:12.5px;font-weight:700;background:#232c3d;border:1px solid #2f3a50;box-shadow:none;gap:6px;min-height:0;transition:background .15s,border-color .15s}
.btn:not(.primary):not(.bad):hover{background:#2a3548;border-color:#3b4862}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.primary,.brow .btn.primary,.brow .b-act .btn.primary{background:var(--ice);background-image:none;color:var(--on-ice);border:1px solid var(--ice);box-shadow:none}
.btn.primary:not(:disabled):hover{filter:none;background:var(--ice2);border-color:var(--ice2)}
.btn.primary:disabled{filter:none;background:#232c3d;border-color:#2f3a50;color:#5d6b84}
.btn.bad.ghost{color:#ff9b9b;border-color:#7a2330}
.icon-btn{border-radius:5px;width:32px;height:32px}
.chip,.tabs button,.filters button{border-radius:4px;padding:6px 12px;font-size:12.5px;font-weight:700;box-shadow:none}
.chip.on,.tabs button.on,.filters button.on{background:rgba(127,214,255,.14);border-color:var(--ice);color:var(--ice2)}
input,select,textarea{border-radius:5px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ice);box-shadow:0 0 0 2px rgba(127,214,255,.14)}
.modal-box{border-radius:10px}
.brow .btn{padding:7px 16px}
.brow .b-state{top:8px;right:14px}
.b-cost,.b-cost *{white-space:nowrap}
.ribbon{background:var(--ice);color:var(--on-ice)}

/* ---- language switch must not sit on the chat's send button ---- */
@media(min-width:821px){#cx-lang{left:16px!important;right:auto!important;bottom:16px!important}}
.ctBubble{display:none!important}
#cx-lang button.on{background:var(--ice);color:var(--on-ice)}

/* ---- our overlay pieces (free battles / passwords) ---- */
.fb-tags{margin-left:6px}.fb-tag{font-size:10px!important;padding:4px 7px;vertical-align:middle}
.fb-tag.house{background:rgba(127,214,255,.12);color:var(--ice2);border:1px solid rgba(127,214,255,.4)}
.fb-line.on i.fb-sw{background:rgba(127,214,255,.25);border-color:var(--ice)}.fb-line.on i.fb-sw:after{background:var(--ice)}
.fb-scale b{background:rgba(127,214,255,.14);border-color:var(--ice);color:var(--ice2)}.fb-more input[type=range]{accent-color:var(--ice)}
.fb-btn{background:var(--ice);color:var(--on-ice);border-radius:5px}.fb-btn.sec{background:var(--panel3);color:var(--text);border:1px solid var(--line2)}
.fb-sum b,.fb-cost b{color:var(--gold)}

/* ---- empty-state text must never be squeezed into a narrow column ---- */
.mrec>.mut:only-child,.table-wrap .mut:only-child{display:block!important;border:0!important;background:none!important;width:100%;min-width:0;white-space:normal;word-break:normal;padding:16px 6px;text-align:left}
.mrec:has(>.mut:only-child){display:block}

/* ===== battle reel, clash style: flat dark lane, dimmed neighbours, picture left + name/price right, hairline selector ===== */
.reel{container-type:inline-size;background:linear-gradient(180deg,#0b0f18,#0d121d 50%,#0b0f18);border:1px solid var(--line2);border-radius:12px;box-shadow:inset 0 0 50px rgba(0,0,0,.55)}
.reel:before,.reel:after{height:112px!important;z-index:2}
.reel:before{background:linear-gradient(#0b0f18f2 30%,#0b0f1800)}.reel:after{background:linear-gradient(#0b0f1800,#0b0f18f2 70%)}
.reel .tin{max-width:none;width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:0 10px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;grid-template-areas:"a n" "a v";align-items:center;column-gap:8px;height:100%}
.reel .tin:after,.reel .tin:before{display:none!important}
.reel .tart{grid-area:a;width:100%!important;min-width:0;overflow:hidden!important;height:var(--ah,64px);display:grid;place-items:center;overflow:visible;position:relative;justify-self:center}
.reel .tart:before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(127,214,255,.22),transparent 75%);z-index:0}
.reel .tart>*{position:relative;z-index:1}
.reel .tart .wi,.reel .tart .wicon,.reel .tart img,.reel .tart .art{height:var(--ah,64px)!important;width:100%!important;max-width:100%!important;object-fit:contain}
.reel .tn{grid-area:n;align-self:end;display:block!important;font-size:11px;line-height:1.25;color:#8d98b0;max-width:100%;white-space:normal;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;padding:0;margin:0}
.reel .tv{grid-area:v;align-self:start;font:700 13px Space Grotesk,Inter,sans-serif;color:#e8f4ff;line-height:1.3;text-align:left;margin:0}
.reel .mark{border:0;background:rgba(127,214,255,.06);box-shadow:inset 0 0 0 2px var(--ice),0 0 18px rgba(127,214,255,.28);z-index:1;border-radius:8px;margin:0 4px}
.reel .mark:before,.reel .mark:after{margin-top:-8px;border-width:8px;filter:drop-shadow(0 0 5px rgba(127,214,255,.7))}
@media(min-width:821px){
  .reel{height:354px}.tile{height:118px;padding:0}.mark{top:118px;height:118px}.reel .tart{--ah:56px}
}
@media(max-width:820px){
  .reel .tart{--ah:42px}.reel .tin{grid-template-columns:1fr;grid-template-areas:"a" "v";grid-template-rows:1fr auto;padding:2px 4px}.reel .tn{display:none!important}.reel .tv{text-align:center;font-size:12px}
}
.tile.land .tin{animation:land .7s ease-out}
.tile.land .tart:before{background:radial-gradient(closest-side,rgba(127,214,255,.5),transparent 78%)}
.tile.land .tn{color:#cfe6ff}

/* ===== battle room, clash style: one dark board, columns split by hairlines, winner column green ===== */
@media(min-width:821px){
  .arena{gap:0;background:#0d121c;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
  .arena .rcol{background:none;border:0;border-radius:0;border-left:1px solid #1c2536;padding:14px 12px}
  .arena .rcol:first-child{border-left:0}
  .arena .rcol[style*=--tc]{border-top:3px solid var(--tc)}
  .arena .rcol .reel{background:none;border:0;box-shadow:none}
  .arena .rcol .reel:before{background:linear-gradient(#0d121cf5 30%,#0d121c00)}
  .arena .rcol .reel:after{background:linear-gradient(#0d121c00,#0d121cf5 70%)}
  .arena .rcol.win{background:linear-gradient(180deg,rgba(35,160,95,.30),rgba(35,160,95,.10));box-shadow:none;border-color:#1c2536}
  .arena .rcol.lose{opacity:.5}
}



/* ---- chat is always docked on the right (desktop); no open/close ---- */
@media(min-width:1101px){
  .app .layout,.app.chat-closed .layout{display:grid!important;grid-template-columns:220px minmax(0,1fr) 300px!important}
  .app .chat,.app.chat-closed .chat,.app.chat-drawer .chat{display:flex!important;position:sticky!important;right:auto!important;top:var(--toph)!important;width:auto!important;height:calc(100vh - var(--toph))!important;box-shadow:none!important}
  .header .chat-btn{display:none!important}
}

/* narrow columns (3+ players per row): big centred picture + price, no cramped text, no side arrows */
@container (max-width:230px){
  .reel .tin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;grid-template-areas:"a" "n" "v";row-gap:2px;padding:4px 8px;justify-items:center}
  .reel .tart{--ah:46px;width:100%!important}
  .reel .tart:before{display:none}
  .reel .tn{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;text-align:center;align-self:end;font-size:10px;line-height:1.15;color:#9aa8c2;max-width:100%}
  .reel .tv{text-align:center;align-self:start;font-size:12.5px}
  .reel .mark:before,.reel .mark:after{display:none!important}
}


.arena .rcol .tag,.arena .rcol [class*=team]{white-space:nowrap}
.arena .rcol[style*=--tc]>*:first-child:not(.reel){white-space:nowrap}

/* gold-drop teaser: the gem stays ice-blue (was yellow) */
.bigem{background:linear-gradient(135deg,var(--ice2),var(--iced))!important;filter:drop-shadow(0 0 8px rgba(127,214,255,.7))}
.reel .tile.mystery .tin{background:none!important;border:0!important;animation:none!important;box-shadow:none!important}
.reel .tile .tin.gold,.reel .tile.mystery .tin.gold{background:radial-gradient(circle closest-side,transparent calc(100% - 2px),rgba(127,214,255,.65) calc(100% - 2px),rgba(127,214,255,.65) 100%,transparent 100%) center/84px 84px no-repeat,radial-gradient(circle closest-side,rgba(127,214,255,.30),transparent 100%) center/84px 84px no-repeat!important;border:0!important;box-shadow:none!important}

/* won-item chips in narrow columns: picture + (shortened) name + price, nothing hidden but the rarity line */
.wonlist{container-type:inline-size}
.wonlist .wcard .wt{min-width:0}
@container (max-width:200px){
  .wonlist .wcard{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"a t" "a v";column-gap:6px;row-gap:0;padding:5px 8px;align-items:center}
  .wonlist .wcard .wa{grid-area:a}
  .wonlist .wcard .wt{grid-area:t}
  .wonlist .wcard .wv{grid-area:v;justify-self:start}
  .wonlist .wcard .wt small{display:none}
  .wonlist .wcard .wt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;font-size:10.5px;line-height:1.15}
}



/* polish: winner ribbon not clipped, text keeps clear of the selector arrows */
@media(min-width:821px){.arena{padding-top:14px;overflow:visible}.arena .rcol:first-child{border-top-left-radius:0}}
.reel .tin{padding-left:18px;padding-right:14px}


/* gold-drop gem: always dead centre of the frame, in every layout */
.reel .tin.gold{display:flex!important;align-items:center;justify-content:center;padding:0!important;grid-template-columns:none}
.reel .tin.gold .bigem{margin:0;flex:0 0 auto}

/* =====================================================================
   BATTLE BOARD — clash.gg layout (from the reference video)
   one dark board · grid of cells split by hairlines · player chip top-left ·
   vertical reel, neighbours faded, no frame · item sits in a ring ·
   after the stop the picture moves left and name + price appear on the right
   ===================================================================== */
@media(min-width:821px){
  .arena{--bd:#12161d;--hl:#1d232d;position:relative;display:grid!important;grid-template-columns:repeat(var(--n),minmax(0,1fr))!important;gap:0!important;padding:0!important;overflow:hidden!important;background:var(--bd)!important;border:1px solid #1a2029!important;border-radius:10px!important;box-shadow:none!important}
  .arena[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .arena[data-n="5"],.arena[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .arena[data-n="7"],.arena[data-n="8"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .arena .rcol,.arena .rcol.win,.arena .rcol.lose{position:relative;display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;opacity:1!important;min-width:0}
  .arena .rcol{border-right:1px solid var(--hl)!important;border-bottom:1px solid var(--hl)!important}
  .arena[data-n="3"] .rcol:nth-child(3n),.arena[data-n="2"] .rcol:nth-child(2n),.arena[data-n="1"] .rcol,.arena[data-n="4"] .rcol:nth-child(2n),.arena[data-n="6"] .rcol:nth-child(3n),.arena[data-n="5"] .rcol:nth-child(3n),.arena[data-n="8"] .rcol:nth-child(4n),.arena[data-n="7"] .rcol:nth-child(4n){border-right:0!important}
  .arena[data-n="2"] .rcol,.arena[data-n="3"] .rcol,.arena[data-n="1"] .rcol{border-bottom:0!important}
  .arena[data-n="4"] .rcol:nth-child(n+3),.arena[data-n="6"] .rcol:nth-child(n+4),.arena[data-n="5"] .rcol:nth-child(n+4),.arena[data-n="8"] .rcol:nth-child(n+5),.arena[data-n="7"] .rcol:nth-child(n+5){border-bottom:0!important}
  .arena .rcol.lose .reel{opacity:.55}
  .arena .rcol.win{background:linear-gradient(180deg,rgba(40,170,100,.22),rgba(40,170,100,.06))!important}
  /* top row: avatar + name, amount pill, team tag */
  .arena .rtop{grid-area:1/1;position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 0 0 12px;margin:0;background:none;border:0}
  .arena .rtop .avatar{width:32px;height:32px;border-radius:50%;background:#1a2029;border:1px solid #2a323f}
  .arena .rtop .rn{min-width:0;max-width:110px}.arena .rtop .rn b{font-size:12px;font-weight:700;color:#cdd6e4}
  .arena .rtot{grid-area:1/2;justify-self:start;align-self:start;position:relative;z-index:5;margin:12px 0 0 6px;padding:5px 9px;border-radius:5px;background:#1a2029;font:700 12.5px Space Grotesk,Inter,sans-serif!important;color:#fff!important;width:auto;line-height:1.2}
  .arena .tlabel{grid-area:1/3;justify-self:end;align-self:start;position:relative;z-index:5;margin:12px 12px 0 0;padding:3px 8px;font-size:9px;letter-spacing:.08em;border-radius:4px;transform:none;left:auto;top:auto}
  .arena .rcol .ribbon{z-index:6}
  /* reel fills the whole cell */
  .arena .reel{grid-area:1/1/3/4;position:relative;z-index:1;height:300px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;container-type:inline-size}
  .arena .reel:before,.arena .reel:after{height:104px!important;z-index:2}
  .arena .reel:before{background:linear-gradient(#12161df0 25%,#12161d00)!important}
  .arena .reel:after{background:linear-gradient(#12161d00,#12161df0 75%)!important}
  .arena .reel .tile{height:100px!important;padding:0!important}
  .arena .reel .mark{top:100px!important;height:100px!important;background:none!important;box-shadow:none!important;border:0!important;margin:0}
  .arena .reel .mark:before,.arena .reel .mark:after{display:none!important}
  .arena .wonlist{grid-area:3/1/4/4;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 10px;position:relative;z-index:3}
  .arena .wonlist .wcard{flex:1 1 90px;min-width:0}
}

/* the item: picture inside a ring, centred; text only on the landed tile */
@container (min-width:231px){
  .reel .tin{display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;grid-template-areas:"a n" "a v"!important;justify-content:center!important;align-content:center!important;align-items:center;column-gap:0!important;row-gap:2px;padding:0 10px!important;height:100%;background:none!important;border:0!important}
  .reel .tart{--ah:56px;width:92px!important;height:92px!important;border-radius:50%;display:grid;place-items:center;position:relative;overflow:visible!important;background:radial-gradient(closest-side,rgba(255,255,255,.04),transparent 75%)}
  .reel .tart:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--rc) 55%,#ffffff 30%);opacity:.5;background:none!important;z-index:0}
  .reel .tart>*{position:relative;z-index:1}
  .reel .tart .wi,.reel .tart .wicon,.reel .tart img,.reel .tart .art{height:auto!important;width:66px!important;max-width:66px!important;max-height:56px!important;object-fit:contain}
  .reel .tn,.reel .tv{display:none!important}
  .reel .tile.land .tn,.reel .tile.land .tv{display:block!important;margin-left:16px;text-align:left!important}
  .reel .tile.land .tn{align-self:end;font-size:12px;line-height:1.25;color:#e7edf7;font-weight:700;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;max-width:130px}
  .reel .tile.land .tv{align-self:start;font-size:12.5px;color:#cfd8e6}
  .reel .tile.land .tart:before{opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--rc) 45%,transparent)}
}
@media(min-width:821px){
  .arena .wonlist{gap:5px;padding:4px 10px 10px}
  .arena .wonlist .wcard{flex:0 0 auto;display:flex!important;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:5px;background:#171c24;border:1px solid #232b37;border-left-width:3px}
  .arena .wonlist .wcard .wt{display:none!important}
  .arena .wonlist .wcard .wa{width:30px;height:22px}
  .arena .wonlist .wcard .wv{font-size:11.5px}
}
@container (min-width:231px){.reel .tart{width:84px!important;height:84px!important}}
@media(min-width:821px){.arena .wonlist .wcard{width:auto!important;flex:0 0 auto!important;grid-template-columns:none!important}}
@media(min-width:821px){
  .arena .wonlist{flex-direction:row!important;align-items:center}
  .arena .rcol .ribbon{top:8px!important;left:50%;z-index:7}
}
@media(min-width:821px){
  .arena .rcol .ribbon{top:42px!important;left:auto!important;right:12px!important;transform:none!important}
  .arena .rcol.win{background:rgba(40,170,100,.13)!important}
}
@container (max-width:230px){
  .reel .tin{grid-template-rows:auto auto auto!important;grid-template-areas:"a" "n" "v"!important;grid-template-columns:minmax(0,1fr)!important;height:100%}
  .reel .tn{grid-area:n!important}.reel .tv{grid-area:v!important}.reel .tart{grid-area:a!important}
}
@container (max-width:230px){
  .reel .tin{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .reel .tart{flex:0 0 auto}.reel .tn{flex:0 0 auto;width:100%}.reel .tv{flex:0 0 auto}
}
@media(max-width:820px){
  .reel .tin{gap:0}
  .reel .tn{display:none!important}
  .reel .tart,.reel .tart .wi,.reel .tart .wicon,.reel .tart img{height:42px!important}
  .reel .tv{font-size:12px}
}

/* ===== MOBILE board: no sideways scrolling, 2 cells per row, same look as desktop ===== */
@media(max-width:820px){
  .arena{--bd:#12161d;--hl:#1d232d;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:hidden!important;gap:0!important;padding:0!important;background:var(--bd)!important;border:1px solid #1a2029!important;border-radius:10px!important;scroll-snap-type:none!important}
  .arena[data-n="1"]{grid-template-columns:1fr!important}
  .arena .rcol,.arena .rcol.win,.arena .rcol.lose{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;opacity:1!important;min-width:0;width:auto!important;border-right:1px solid var(--hl)!important;border-bottom:1px solid var(--hl)!important}
  .arena .rcol:nth-child(2n){border-right:0!important}
  .arena[data-n="1"] .rcol{border-right:0!important}
  .arena .rcol.win{background:rgba(40,170,100,.13)!important}
  .arena .rcol.lose .reel{opacity:.55}
  .arena .tlabel{display:none!important}
  .arena .rtop{grid-area:1/1;position:relative;z-index:5;display:flex;align-items:center;gap:6px;padding:8px 0 0 8px;margin:0;background:none;border:0;min-width:0}
  .arena .rtop .avatar{width:26px;height:26px;border-radius:50%;flex:0 0 auto}
  .arena .rtop .rn{min-width:0}.arena .rtop .rn b{font-size:11.5px;font-weight:700}
  .arena .rtot{grid-area:1/2;position:relative;z-index:5;margin:9px 8px 0 4px;padding:3px 7px;border-radius:5px;background:#1a2029;font:700 11.5px Space Grotesk,Inter,sans-serif!important;color:#fff!important;width:auto;line-height:1.2;align-self:start}
  .arena .reel{grid-area:1/1/3/3;position:relative;z-index:1;height:228px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
  .arena .reel:before,.arena .reel:after{height:76px!important}
  .arena .reel:before{background:linear-gradient(#12161df0 25%,#12161d00)!important}.arena .reel:after{background:linear-gradient(#12161d00,#12161df0 75%)!important}
  .arena .reel .tile{height:76px!important;padding:0!important}
  .arena .reel .mark{top:76px!important;height:76px!important;background:none!important;box-shadow:none!important;border:0!important;margin:0}
  .arena .reel .mark:before,.arena .reel .mark:after{display:none!important}
  .arena .reel .tin{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0!important;background:none!important;border:0!important}
  .arena .reel .tart{width:56px!important;height:44px!important;border-radius:0;background:none;overflow:visible!important}
  .arena .reel .tart:before{display:none!important}
  .arena .reel .tart .wi,.arena .reel .tart .wicon,.arena .reel .tart img{height:40px!important;width:auto!important;max-width:56px!important}
  .arena .reel .tn{display:none!important}
  .arena .reel .tv{display:block!important;font-size:11.5px;color:#cfd8e6;text-align:center}
  .arena .reel .tile.land .tv{color:#fff;font-weight:700}
  .arena .wonlist{grid-area:3/1/4/3;display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:4px;padding:2px 6px 8px;position:relative;z-index:3}
  .arena .wonlist .wcard{display:flex!important;width:auto!important;flex:0 0 auto!important;grid-template-columns:none!important;align-items:center;gap:4px;padding:2px 6px 2px 3px;border-radius:5px;background:#171c24;border:1px solid #232b37;border-left-width:3px}
  .arena .wonlist .wcard .wt{display:none!important}
  .arena .wonlist .wcard .wa{width:26px;height:20px}
  .arena .wonlist .wcard .wv{font-size:10.5px}
  .arena .rcol .ribbon{top:36px!important;left:auto!important;right:6px!important;transform:none!important;font-size:10px;padding:2px 8px}
}
@media(max-width:820px){
  .arena .rtop{flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;flex-wrap:nowrap!important}
  .arena .rtop .rn{flex:1 1 auto;display:block}
  .arena .rtop .rn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:72px}
  .arena .rtop .avatar .dia,.arena .rtop .avatar svg{display:none}
  .arena .reel .tin>*{align-self:center!important;justify-self:center!important;margin:0!important;width:auto;text-align:center!important}
  .arena .reel .tv{align-self:center!important}
}

/* no little gem badge under the player avatars (bots included) */
.arena .rtop .dia,.arena .rcol .avatar .dia,.arena .rcol .avatar .bdia,.arena .rcol .avatar i.bdia,.arena .rtop .bdia{display:none!important}
@media(max-width:820px){.reel .tile.mystery .tin.gold{background-size:60px 60px,60px 60px!important}}
/* gold gem keeps its own size on every layout (mobile rules had collapsed it to width:auto) */
.arena .reel .tin.gold .bigem,.reel .tile.mystery .tin.gold .bigem{width:34px!important;height:44px!important;flex:0 0 auto!important;align-self:center!important;margin:0!important;display:block}
@media(max-width:820px){.arena .reel .tin.gold .bigem,.reel .tile.mystery .tin.gold .bigem{width:28px!important;height:36px!important}}

@media(min-width:1101px){.chat .chat-x{display:none!important}}

/* ===== rarity glow: every item sits in a ring + halo in its rarity colour (consumer … covert … gold) ===== */
@container (min-width:231px){
  .reel .tart{background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 24%,transparent),transparent 82%)!important}
  .reel .tart:before{opacity:.95!important;border:2px solid var(--rc)!important;box-shadow:0 0 14px color-mix(in srgb,var(--rc) 55%,transparent),inset 0 0 16px color-mix(in srgb,var(--rc) 28%,transparent)!important}
  .reel .tile.land .tart:before{box-shadow:0 0 28px color-mix(in srgb,var(--rc) 80%,transparent),inset 0 0 22px color-mix(in srgb,var(--rc) 35%,transparent)!important}
  .reel .tile.land .tart{background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 38%,transparent),transparent 85%)!important}
}
@media(max-width:820px){
  .arena .reel .tart{background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 40%,transparent),transparent 88%)!important}
  .arena .reel .tart img,.arena .reel .tart .wi,.arena .reel .tart .wicon{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--rc) 85%,transparent))}
  .arena .reel .tile.land .tart{background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 60%,transparent),transparent 92%)!important}
}

/* no gem badge on bot avatars anywhere (lobby, reels, chat) */
i.bdia,.avatar .bdia,.avatar.hasbot .bdia{display:none!important}

/* landed tile: keep ring + name inside the cell, even in medium-width cells */
@container (min-width:231px){
  .reel .tile.land .tin{justify-content:safe center!important;padding:0 14px!important}
  .reel .tile.land .tn{max-width:min(130px,calc(100cqw - 84px - 16px - 32px))!important}
  .reel .tile.land .tn,.reel .tile.land .tv{margin-left:12px!important}
}
@container (min-width:231px) and (max-width:290px){.reel .tile.land .tart{width:70px!important;height:70px!important}.reel .tile.land .tn{max-width:calc(100cqw - 70px - 12px - 28px)!important}}

/* ===== v20: no rectangular artefacts in the reels — everything follows the round item mask ===== */
/* the landing pulse used to draw a 2px rarity box around the whole cell (= coloured lines above/below the row): pulse the ring instead */
.reel .tile.land .tin{animation:none!important;box-shadow:none!important;outline:0!important}
@keyframes ringpulse{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.reel .tile.land .tart{animation:ringpulse .7s ease-out}
/* the gold flash was a full-size yellow rectangle: keep the normal fade, no flash */
.reel.flash:after{background:linear-gradient(#12161d00,#12161df0 75%)!important;animation:none!important;opacity:1!important;height:104px!important}
@media(max-width:820px){.reel.flash:after{height:76px!important}}
/* glow stays inside its cell */
@container (min-width:231px){
  .reel .tart:before{box-shadow:0 0 8px color-mix(in srgb,var(--rc) 50%,transparent),inset 0 0 12px color-mix(in srgb,var(--rc) 25%,transparent)!important}
  .reel .tile.land .tart:before{box-shadow:0 0 10px color-mix(in srgb,var(--rc) 75%,transparent),inset 0 0 18px color-mix(in srgb,var(--rc) 35%,transparent)!important}
}
.reel .tile .tin{overflow:hidden}
/* items without a picture: a rarity-coloured gem instead of a grey square */
.reel .tart .ph{width:46px!important;height:46px!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;clip-path:polygon(50% 0,100% 36%,50% 100%,0 36%);background:linear-gradient(145deg,color-mix(in srgb,var(--rc,#8d98b0) 70%,#fff),var(--rc,#8d98b0))!important;opacity:.9}
.wonlist .ph,.wcard .ph{border-radius:50%!important}
/* top neighbour fades out before it can reach the name chip */
@media(min-width:821px){.arena .rcol .reel:before{background:linear-gradient(#12161d 0,#12161df5 40%,#12161d00)!important}}
@media(max-width:820px){.arena .reel:before{background:linear-gradient(#12161d 0,#12161df5 35%,#12161d00)!important}}
/* narrow cells: only the landed item shows its name and price, neighbours are just pictures */
@container (max-width:230px){.reel .tile:not(.land) .tn,.reel .tile:not(.land) .tv{visibility:hidden}}
@container (max-width:230px){.reel .tile .tv{width:100%;text-align:center!important}}