/* ==========================================================================
   chessbet
   --------------------------------------------------------------------------
   One scale for type, one for space, one for radius. Every value below comes
   from those three; nothing is a number picked to make a single screen look
   right. The accent is warm on purpose - it belongs to the same family as the
   board's cream and brown, so the chrome and the game read as one thing rather
   than a blue app with a wooden board dropped into the middle of it.
   ========================================================================== */

:root{
  /* ground and surfaces */
  --bg:#0E1116;
  --surface:#161A21;
  --raised:#1D232B;
  --line:#2A323C;
  --line-soft:#212832;

  /* ink */
  --ink:#E8ECF2;
  --ink-dim:#96A1B0;
  --ink-faint:#6B7684;

  /* accent: warm, so it sits with the board rather than against it */
  --accent:#D8A44B;
  --accent-hi:#E9B85E;
  --on-accent:#1A1206;

  /* outcomes. never the accent, never each other */
  --win:#4FBF8B;
  --loss:#E06A6A;

  /* board */
  --lt:#F0D9B5; --dk:#B58863;
  --last:rgba(216,164,75,.45);
  --selc:rgba(216,164,75,.30);
  --dot:rgba(24,28,20,.34);

  /* type scale */
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:28px;

  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* radius */
  --r-sm:6px; --r-md:10px; --r-full:999px;

  /* control heights: one standard, one for the primary action and inputs */
  --ctl:10px; --ctl-lg:12px;

  --board:440px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

[data-board="brown"] { --lt:#F0D9B5; --dk:#B58863; }
[data-board="blue"]  { --lt:#DEE3E6; --dk:#788A94; }
[data-board="green"] { --lt:#EEEED2; --dk:#769656; }
[data-board="grey"]  { --lt:#DCDCDC; --dk:#8F8F8F; }
[data-board="walnut"]{ --lt:#E5C99B; --dk:#8B5A34; }
[data-board="ink"]   { --lt:#C6CDD6; --dk:#3D4854; }

*{box-sizing:border-box}
/* `hidden` is only display:none in the UA sheet, which any id selector beats.
   Nothing below may out-rank it: a hidden element stays hidden at every width. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:var(--t-md)/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100dvh;display:flex;justify-content:center;
  padding:var(--s5) var(--s3) var(--s6);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.w{width:100%;max-width:560px}
.w,.card,.page{min-width:0}
svg,img{max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- masthead */
.brand{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.brand h1{margin:0;font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em}
.brand .dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--accent)}
.badge{
  margin-left:auto;font:500 var(--t-xs)/1 var(--mono);color:var(--ink-faint);
  border:1px solid var(--line);padding:var(--s1) var(--ctl);border-radius:var(--r-full);
}

/* a queue runs whatever page you are on, so say so from all of them */
.queued{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  background:rgba(216,164,75,.09);border:1px solid rgba(216,164,75,.35);
  font-size:var(--t-sm);font-weight:600;color:var(--accent);
}
.pulse{
  width:7px;height:7px;flex:none;border-radius:var(--r-full);background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------------------------------------------------------------- nav */
nav{display:flex;gap:2px;margin-bottom:var(--s4);border-bottom:1px solid var(--line)}
nav button{
  background:none;border:0;color:var(--ink-faint);cursor:pointer;
  padding:var(--ctl) var(--s3);font:inherit;font-size:var(--t-sm);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
nav button:hover{color:var(--ink-dim)}
nav button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

/* ---------------------------------------------------------------- surfaces */
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s3);
}
h3{
  margin:0 0 var(--s3);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.fine{font-size:var(--t-sm);color:var(--ink-dim);margin:0 0 var(--s3);line-height:1.55}
.lnk{
  background:none;border:0;padding:0;color:var(--ink-dim);cursor:pointer;
  font:inherit;font-size:var(--t-sm);text-decoration:underline;text-underline-offset:2px;
}
.lnk:hover{color:var(--ink)}

/* ---------------------------------------------------------------- forms */
label{
  display:block;margin:0 0 var(--s2);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
label .val{text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500}
input[type=email],input[type=password],input[type=text],input:not([type]){
  width:100%;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--ctl-lg) var(--s3);font:inherit;margin-bottom:var(--s3);
}
input::placeholder{color:var(--ink-faint)}
input:focus{outline:none;border-color:var(--accent)}
input[type=range]{width:100%;margin:0 0 var(--s4);accent-color:var(--accent);background:none}
button.go{
  width:100%;background:var(--accent);color:var(--on-accent);border:0;
  border-radius:var(--r-sm);padding:var(--ctl-lg);font:inherit;font-weight:600;cursor:pointer;
}
button.go:hover:not(:disabled){background:var(--accent-hi)}
button.go:disabled{opacity:.4;cursor:default}
.msg{margin:var(--s3) 0 0;font-size:var(--t-sm);color:var(--ink-dim);min-height:1.2em}
.msg.bad{color:var(--loss)} .msg.ok{color:var(--win)}

.tabs{display:flex;gap:2px;margin-bottom:var(--s4);background:var(--bg);
  padding:3px;border-radius:var(--r-sm)}
.tabs button{
  flex:1;background:none;border:0;color:var(--ink-faint);cursor:pointer;
  padding:var(--ctl);border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);
}
.tabs button[aria-selected="true"]{background:var(--raised);color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- identity */
.prow{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.av{
  width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-weight:700;font-size:var(--t-lg);
}
.pname{font-weight:600;font-size:var(--t-md);line-height:1.25}
.psub{font-size:var(--t-sm);color:var(--ink-faint)}
.pbalw{margin-left:auto;text-align:right}
.ballbl{font-size:var(--t-xs);color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:2px}
.bal{font:600 var(--t-2xl)/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ratings are reference, not headline */
.perfs{display:flex;gap:var(--s2);flex-wrap:wrap}
.perf{
  flex:1 1 96px;background:var(--raised);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);
}
.pl{font-size:var(--t-xs);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em}
.pr{font:600 var(--t-lg)/1.3 var(--mono);font-variant-numeric:tabular-nums}
.pq{color:var(--accent);font-size:var(--t-sm)}
.pg{font-size:var(--t-xs);color:var(--ink-faint)}

/* ---------------------------------------------------------------- tables */
.tier{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--raised);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--s3);margin-bottom:var(--s2);
}
.tier.q{border-color:var(--accent);background:rgba(216,164,75,.07)}
.tinfo{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1}
.tclock{
  flex:none;font:600 var(--t-sm)/1 var(--mono);color:var(--ink-dim);
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--ctl);
}
.tier.q .tclock{color:var(--accent);border-color:var(--accent)}
.tier .nm{font-weight:600;font-size:var(--t-md);font-variant-numeric:tabular-nums}
.perftag{
  margin-left:var(--s1);font:500 var(--t-xs)/1 var(--mono);color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;
}
.tier .cl{font-size:var(--t-xs);color:var(--ink-faint);margin-top:2px}
.tier button{
  flex:none;background:var(--accent);color:var(--on-accent);border:0;
  border-radius:var(--r-sm);padding:var(--ctl) var(--s4);
  font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;white-space:nowrap;
}
.tier button:hover:not(:disabled){background:var(--accent-hi)}
.tier button.cancel{background:none;color:var(--ink-dim);border:1px solid var(--line)}
.tier button:disabled{opacity:.3;cursor:default}

/* ---------------------------------------------------------------- board */
.board{
  display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;
  width:100%;max-width:min(var(--board),100%,72dvh);margin:var(--s3) auto;
  border-radius:var(--r-sm);overflow:hidden;
  user-select:none;touch-action:manipulation;
}
.sq{position:relative;cursor:pointer;container-type:inline-size}
.sq.l{background:var(--lt)} .sq.d{background:var(--dk)}
.sq.last::before{content:"";position:absolute;inset:0;background:var(--last)}
.sq.sel::before{content:"";position:absolute;inset:0;background:var(--selc);
  box-shadow:inset 0 0 0 3px var(--accent)}
.sq.chk::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,rgba(224,106,106,.95) 12%,rgba(200,40,40,.5) 44%,transparent 70%)}
.pc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.sq.dot::after{
  content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;
  transform:translate(-50%,-50%);border-radius:var(--r-full);background:var(--dot);z-index:1;
}
.sq.cap::after{content:"";position:absolute;inset:6%;border-radius:var(--r-full);
  border:.34em solid var(--dot);z-index:1}
.cr,.cf{
  position:absolute;font-family:var(--mono);font-weight:600;
  font-size:clamp(7px,15cqw,11px);line-height:1;opacity:.55;z-index:3;
}
.cr{top:.2em;left:.26em} .cf{bottom:.2em;right:.28em}
.sq.l .cr,.sq.l .cf{color:var(--dk)} .sq.d .cr,.sq.d .cf{color:var(--lt)}
.nocoords .cr,.nocoords .cf{display:none}
.nohl .sq.last::before{display:none}
.nodots .sq.dot::after,.nodots .sq.cap::after{display:none}

/* ---------------------------------------------------------------- game */
.pbar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);border:1px solid transparent;
}
.pbar.active{border-color:var(--accent);background:rgba(216,164,75,.08)}
.pbar .pn{font-weight:600;font-size:var(--t-md);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pbar .ps{font-size:var(--t-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.clk{
  margin-left:auto;flex:none;font:600 var(--t-xl)/1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink-dim);
}
.pbar.active .clk{color:var(--ink)}
.clk.low{color:var(--loss)}

.acts{display:flex;gap:var(--s2);margin-top:var(--s3)}
.acts button{
  flex:1;background:var(--raised);border:1px solid var(--line);color:var(--ink-dim);
  border-radius:var(--r-sm);padding:var(--ctl);font:inherit;font-size:var(--t-sm);cursor:pointer;
}
.acts button:hover{color:var(--ink);border-color:var(--ink-faint)}
.acts button.pending{border-color:var(--accent);color:var(--accent)}

/* one question at a time, answered on the page */
.prompt{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);
  background:rgba(216,164,75,.08);border:1px solid rgba(216,164,75,.4);
  border-radius:var(--r-sm);padding:var(--s3);
}
.prompt .ptext{flex:1;min-width:160px;font-size:var(--t-sm);font-weight:600}
.prompt .pbtns{display:flex;gap:var(--s2);margin-left:auto}
.prompt button{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-sm);padding:var(--ctl) var(--s4);
  font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
}
.prompt button:hover{border-color:var(--ink-faint)}
.prompt button.accept{background:var(--win);border-color:var(--win);color:#06150E}
.prompt button.danger{background:var(--loss);border-color:var(--loss);color:#1B0707}

.gameover{
  margin-top:var(--s3);padding:var(--s4);text-align:center;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
}
.gameover.w{border-color:var(--win)} .gameover.l{border-color:var(--loss)}
.gameover .r{font-size:var(--t-xl);font-weight:600;margin-bottom:2px}
.gameover.w .r{color:var(--win)} .gameover.l .r{color:var(--loss)}
.gameover .d{font:var(--t-sm)/1.4 var(--mono);color:var(--ink-faint);text-transform:capitalize}

/* ---------------------------------------------------------------- history */
.hrow{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:var(--r-sm);
}
.hrow:hover{background:var(--raised)}
.hrow:last-child{border-bottom:0}
.tag{
  flex:none;min-width:54px;text-align:center;padding:var(--s1) var(--s2);border-radius:var(--r-sm);
  font:600 var(--t-xs)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;
}
.tag.win{background:rgba(79,191,139,.15);color:var(--win)}
.tag.loss{background:rgba(224,106,106,.15);color:var(--loss)}
.tag.drew{background:var(--raised);color:var(--ink-faint)}
.hopp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-sm)}
.htier{flex:none;font:var(--t-xs)/1 var(--mono);color:var(--ink-faint)}
.hgo{flex:none;color:var(--ink-faint)}

/* ---------------------------------------------------------------- settings */
.boardprev{pointer-events:none;margin-bottom:var(--s4)}
.boardprev .board{margin-top:0}

.swatches{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.sw{
  width:46px;height:46px;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid var(--line);border-radius:var(--r-sm);background:none;
  display:grid;grid-template-columns:1fr 1fr;
}
.sw:hover{border-color:var(--ink-faint)}
.sw[aria-pressed="true"]{border-color:var(--accent)}
.sw i{display:block;height:21px}

.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:var(--s2);margin-bottom:var(--s2)}
.pcsw{
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  padding:var(--s2) var(--s1);cursor:pointer;min-width:0;
  border:2px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--lt) 0 50%,var(--dk) 50% 100%);
  font:inherit;font-size:var(--t-xs);color:var(--ink);
}
.pcsw:hover{border-color:var(--ink-faint)}
.pcsw[aria-pressed="true"]{border-color:var(--accent)}
.pcprev{width:40px;height:40px;display:block}
.pcsw span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--surface);border-radius:var(--r-sm);padding:2px 6px;
}

.toggles{display:grid;gap:var(--s2)}

/* settings are staged and finalised, so the commit lives with the page rather
   than inside one of the two groups it applies to */
.savebar{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
}
.savebar .msg{margin:0;flex:1;min-width:120px}
.savebar .go{width:auto;min-width:120px}
.tg{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--raised);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:var(--s3);
}
.tg span{font-size:var(--t-sm)}
.tg button{
  flex:none;min-width:58px;padding:6px var(--s3);cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-faint);
  border-radius:var(--r-full);font:inherit;font-size:var(--t-xs);font-weight:600;
}
.tg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------------------------------------------------------------- replay */
.revhead{margin-bottom:var(--s3)}
.revhead .rt{font-size:var(--t-lg);font-weight:600}
.revhead .rs{font-size:var(--t-sm);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.revnav{display:flex;gap:var(--s2);margin-bottom:var(--s3)}
.revnav button{
  flex:1;background:var(--raised);border:1px solid var(--line);color:var(--ink-dim);
  border-radius:var(--r-sm);padding:var(--ctl);font:inherit;cursor:pointer;
}
.revnav button:hover{color:var(--ink);border-color:var(--ink-faint)}
.movelist{
  display:flex;flex-wrap:wrap;gap:2px;font:var(--t-sm)/1 var(--mono);
  max-height:200px;overflow-y:auto;margin-bottom:var(--s3);
}
.movelist .no{color:var(--ink-faint);padding:6px 2px 6px var(--s2)}
.movelist .mv{padding:6px var(--s2);border-radius:var(--r-sm);cursor:pointer}
.movelist .mv:hover{background:var(--raised)}
.movelist .mv[aria-current="true"]{background:var(--accent);color:var(--on-accent);font-weight:700}
.movelist .mv small{color:var(--ink-faint);margin-left:5px}
.movelist .mv[aria-current="true"] small{color:var(--on-accent);opacity:.7}
.revmeta{border-top:1px solid var(--line-soft);padding-top:var(--s3);font-size:var(--t-sm)}
.revmeta div{display:flex;justify-content:space-between;gap:var(--s3);padding:3px 0}
.revmeta span{color:var(--ink-faint)}
.revmeta b{font-weight:600;text-align:right}

/* ---------------------------------------------------------------- terms */
.terms h4{margin:var(--s5) 0 var(--s2);font-size:var(--t-md);font-weight:600}
.terms h4:first-of-type{margin-top:0}
.terms p,.terms li{font-size:var(--t-sm);color:var(--ink-dim);line-height:1.65;margin:0 0 var(--s3)}
.terms ul{margin:0 0 var(--s3);padding-left:var(--s4)}
.terms li{margin-bottom:var(--s2)}
.terms b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- footer */
.foot{
  margin-top:var(--s4);font-size:var(--t-xs);color:var(--ink-faint);
  display:flex;gap:var(--s3);justify-content:center;align-items:center;flex-wrap:wrap;
}
.foot .lnk{font-size:var(--t-xs)}
.attr{margin:var(--s2) 0 0;text-align:center;font-size:var(--t-xs);
  color:var(--ink-faint);opacity:.6}

/* ==========================================================================
   screens
   ========================================================================== */
@media (min-width: 940px){
  .w{max-width:900px}

  /* Two columns only where the halves are genuinely different things: your
     standing on the left, the tables on the right; the board preview beside the
     controls that change it. */
  #page-play:not([hidden]),#page-settings:not([hidden]){
    display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3);align-items:start;
  }
  #page-settings .savebar{grid-column:1 / -1}

  /* Forms and prose are read straight down, and a line of text stops being
     readable long before 900px. These stay one column at a sane measure. */
  #page-account,#page-games,#page-terms{
    max-width:660px;margin-inline:auto;
  }
  .terms p,.terms li{max-width:68ch}
}

@media (min-width: 1200px){
  .w{max-width:1080px}
  #page-review .card{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
    gap:0 var(--s5);align-items:start;
  }
  #page-review .card > .lnk,#page-review .revhead{grid-column:1 / -1}
  #page-review .board{grid-column:1;grid-row:3}
  #page-review .revnav{grid-column:1;grid-row:4}
  #page-review .movelist{grid-column:2;grid-row:3;max-height:none}
  #page-review .revmeta{grid-column:2;grid-row:4;border-top:0;padding-top:0}
}

@media (max-width: 560px){
  body{padding:var(--s4) var(--s2) var(--s5)}
  .card{padding:var(--s3)}
  nav button{padding:var(--ctl) var(--s2);font-size:var(--t-xs)}
  .bal{font-size:var(--t-xl)}
  .av{width:36px;height:36px}
  .perf{flex:1 1 84px;padding:var(--s2)}
  .pr{font-size:var(--t-md)}
  .clk{font-size:var(--t-lg)}
  .prompt .pbtns{width:100%}
  .prompt .pbtns button{flex:1}
  .pieces{grid-template-columns:repeat(3,1fr)}
  .terms h4{margin-top:var(--s4)}
}

@media (max-width: 380px){
  .tier{flex-wrap:wrap}
  .tier button{width:100%}
  .prow{flex-wrap:wrap}
  .pbalw{width:100%;margin-left:0;text-align:left}
  .pieces{grid-template-columns:repeat(2,1fr)}
}

/* a phone on its side, or a short laptop */
@media (max-height: 600px) and (min-width: 720px){
  #page-game .card{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
    gap:0 var(--s4);align-items:start;
  }
  #page-game .board{grid-row:1 / span 5;grid-column:1;
    max-width:min(var(--board),84dvh);margin-top:0}
  #page-game .pbar,#page-game .acts,#page-game .prompt,
  #page-game .gameover,#page-game .msg{grid-column:2}
}

@media (hover: none){
  nav button{padding:14px var(--s3)}
  .acts button,.revnav button,.prompt button,.tier button{padding:14px}
  .hrow{padding:var(--s4) var(--s2)}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}