/* 旅行青蛙 · 样式（全部变量化，零外部字体 / 图片 / 网络请求）
 * 布局：#app 纵向 flex → #stage（画布 + DOM 覆盖层） + #nav（底部导航）
 * 面板：桌面居中卡片（max-width 560px），移动端底部抽屉（transform 过渡）
 */

:root{
  /* 配色：米纸 / 木色 / 草绿 */
  --paper:      #f6efdc;
  --paper-2:    #efe4c8;
  --wood:       #b98a52;
  --wood-d:     #8a6132;
  --grass:      #6cb84f;
  --grass-d:    #4e8b3a;
  --ink:        #4a3b28;
  --ink-2:      #7a6a52;
  --gold:       #e8c25c;
  --red:        #e05a4a;
  --blue:       #5f9fd8;
  --pink:       #f2a6b8;

  /* 面板 */
  --panel-bg:     rgba(44,36,26,.94);
  --panel-bg-2:   rgba(58,48,35,.96);
  --panel-line:   rgba(255,255,255,.10);
  --panel-fg:     #f3ead3;
  --panel-fg-dim: rgba(243,234,211,.62);

  /* 形状 */
  --r:      16px;
  --r-s:    10px;
  --r-xs:   8px;
  --sh:     0 10px 30px rgba(30,20,10,.35);
  --sh-s:   0 3px 10px rgba(30,20,10,.22);

  /* 尺寸 */
  --tap:    44px;
  --speed:  .22s;

  /* 安全区 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #e0d3ae;
  color: var(--ink);
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#app{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
}

#stage{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #e0d3ae;
}

#c{
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}

#ui{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ui > .hud,
#ui > .status,
#ui > .modal{ pointer-events: auto; }
.toasts{ pointer-events: none; }

/* ---------------- 顶部 HUD ---------------- */
.hud{
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}
.hud-chips{ display: flex; gap: 8px; }
.chip{
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
  font-size: 15px; font-weight: 700;
  line-height: 1;
}
.chip canvas{ display: block; }
.chip b{ font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }

.hud-btns{ display: flex; gap: 6px; }
.ibtn{
  height: 36px; min-width: 52px; padding: 0 10px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-s);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ibtn:active{ transform: translateY(1px); }

/* ---------------- 左下状态卡 ---------------- */
.status{
  position: absolute;
  left: 12px; bottom: 12px;
  width: 176px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
}
.st-title{ font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.st-row{ display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.st-lab{ font-size: 11px; color: var(--panel-fg-dim); width: 26px; flex: 0 0 auto; }
.bar{
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  overflow: hidden;
}
.bar-i{
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  will-change: transform;
  transition: transform .25s linear;
}
.b-mood{ background: linear-gradient(90deg,#f2a6b8,#f28aa0); }
.b-stam{ background: linear-gradient(90deg,#9fd07a,#6cb84f); }
.fps{
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--panel-fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Toast ---------------- */
.toasts{
  position: absolute;
  top: 54px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast{
  max-width: min(78%, 380px);
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--sh-s);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 600;
  text-align: center;
  animation: pop .22s ease-out;
  transition: opacity .3s linear, transform .3s ease-out;
}
@keyframes pop{
  from{ transform: translateY(-8px) scale(.96); opacity: 0; }
  to{ transform: none; opacity: 1; }
}
.t-info{ border-left: 4px solid var(--blue); }
.t-rare{ border-left: 4px solid var(--gold); background: rgba(72,54,20,.95); }
.t-mail{ border-left: 4px solid var(--pink); }
.t-buy { border-left: 4px solid var(--grass); }
.t-go  { border-left: 4px solid #8fc46a; }
.t-home{ border-left: 4px solid var(--gold); }
.t-snail{ border-left: 4px solid #c9604f; }
.t-tip { border-left: 4px solid #9aa4b0; }
.t-ach { border-left: 4px solid var(--gold); background: rgba(84,62,20,.96); }

/* ---------------- 面板（覆盖层） ---------------- */
#ui > .overlay{ pointer-events: none; }
#ui > .overlay.open{ pointer-events: auto; }

.overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--speed) ease;
}
.overlay.open{ opacity: 1; }
.mask{
  position: absolute;
  inset: 0;
  background: rgba(24,16,8,.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.panel{
  position: relative;
  width: min(560px, calc(100% - 24px));
  max-height: min(76%, 620px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  color: var(--panel-fg);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform var(--speed) ease;
  will-change: transform;
}
.overlay.open .panel{ transform: none; }

.p-head{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-bg-2);
}
.p-title{ margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.p-close{
  height: 34px; min-width: 58px; padding: 0 12px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--panel-fg);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.p-tabs{
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 10px 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab{
  height: 36px; padding: 0 14px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--panel-fg-dim);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tab.on{ background: var(--wood); border-color: var(--wood); color: #2f2618; }

.p-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px 18px;
  touch-action: pan-y;
}

/* ---------------- 通用内容块 ---------------- */
.sec{
  margin: 14px 0 8px;
  font-size: 12px; font-weight: 800;
  color: var(--panel-fg-dim);
  letter-spacing: 1px;
}
.note{
  margin: 12px 0 6px;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.07);
  font-size: 13px; font-weight: 600;
}
.tip{ margin: 10px 2px 0; font-size: 12px; line-height: 1.7; color: var(--panel-fg-dim); }
.empty{
  padding: 46px 10px; text-align: center;
  font-size: 13px; line-height: 1.8; color: var(--panel-fg-dim);
}
.danger{ background: var(--red); border-color: var(--red); color: #fff; }

.btn{
  height: 38px; min-width: 64px; padding: 0 14px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--wood);
  color: #2f2618;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn.ghost{ background: rgba(255,255,255,.10); color: var(--panel-fg); }
.btn.sm{ height: 30px; min-width: 48px; padding: 0 10px; font-size: 12px; }
.btn.big{ height: var(--tap); min-width: 132px; font-size: 15px; }
.btn.off, .btn:disabled{ opacity: .42; cursor: not-allowed; }
.btn.seg{ min-width: 52px; padding: 0 8px; }
.btn.seg.on{ background: var(--gold); }
.btn:active:not(:disabled){ transform: translateY(1px); }

/* ---------------- 行囊 ---------------- */
.slots{ display: flex; gap: 10px; flex-wrap: wrap; }
.slot{
  flex: 1 1 96px;
  max-width: 152px;
  min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px;
  border-radius: var(--r-s);
  border: 1px dashed rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  color: var(--panel-fg);
  cursor: pointer;
}
.slot.filled{ border-style: solid; background: rgba(232,194,92,.12); border-color: rgba(232,194,92,.45); }
.slot .s-ph{ font-size: 26px; line-height: 1; color: var(--panel-fg-dim); }
.slot .s-n{ font-size: 12px; font-weight: 700; }
.slot .s-x{ font-size: 11px; color: var(--panel-fg-dim); }
.slot canvas{ display: block; }

.picker{
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--r-s);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--panel-line);
}
.pk-h{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; margin-bottom: 8px;
}
.plist{ display: flex; flex-direction: column; gap: 6px; }
.prow{
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px 10px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  color: var(--panel-fg);
  text-align: left;
  cursor: pointer;
}
.prow:active{ border-color: var(--wood); }
.prow .p-m{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prow .p-m b{ font-size: 13px; }
.prow .p-m em{ font-size: 11px; font-style: normal; color: var(--panel-fg-dim); line-height: 1.5; }
.prow .p-n{ font-size: 12px; color: var(--panel-fg-dim); }
.prow .p-add{
  flex: 0 0 auto; padding: 5px 10px;
  border-radius: 999px; background: var(--wood); color: #2f2618;
  font-size: 12px; font-weight: 800;
}
.s-ic{ display: inline-flex; flex: 0 0 auto; }
.s-ic canvas{ display: block; }

/* ---------------- 商店 ---------------- */
.glist{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.goods{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
}
.goods .g-ic{ flex: 0 0 auto; }
.goods canvas{ display: block; }
.g-m{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-m b{ font-size: 14px; display: flex; align-items: center; gap: 8px; }
.g-own{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); }
.g-m em{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); line-height: 1.6; }
.g-a{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.g-c{ font-size: 14px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.b-buy{ height: 34px; min-width: 62px; }

.lot{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 4px; }
.lot-n{ font-size: 14px; }
.lot-n b{ color: var(--gold); font-size: 20px; }
.lot-res{ font-size: 13px; color: var(--panel-fg-dim); text-align: center; }
.lot-pool{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lp{
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  font-size: 11px; color: var(--panel-fg-dim);
}

/* ---------------- 信件 ---------------- */
.mlist{ display: flex; flex-direction: column; gap: 8px; }
.mrow{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 76px; padding: 8px 12px 8px 8px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
  color: var(--panel-fg);
  text-align: left;
  cursor: pointer;
}
.mrow.unread{ border-color: rgba(232,194,92,.5); background: rgba(232,194,92,.10); }
.mrow .m-pc canvas, .m-sh canvas{ display: block; border-radius: var(--r-xs); }
.m-pc{ flex: 0 0 auto; line-height: 0; }
.m-pc canvas{ width: 112px; height: auto; }
.m-sh{
  flex: 0 0 auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); background: rgba(0,0,0,.22);
}
.m-m{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-m b{ font-size: 13px; }
.m-m em{
  font-style: normal; font-size: 11px; color: var(--panel-fg-dim);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dot{
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* ---------------- 图鉴 ---------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.cell{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--panel-line);
}
.cell .c-img{ line-height: 0; }
.cell .c-img canvas{ display: block; width: 100%; height: auto; border-radius: var(--r-xs); }
.cell .c-q{
  width: 100%; aspect-ratio: 268 / 186;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(0,0,0,.28);
  color: var(--panel-fg-dim);
  font-size: 24px; font-weight: 800;
}
.cell.lock{ opacity: .68; }
.cell .c-n{ font-size: 11px; text-align: center; color: var(--panel-fg); line-height: 1.4; }

/* ---------------- 成就 ---------------- */
.alist{ display: flex; flex-direction: column; gap: 8px; }
.arow{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line);
  opacity: .55;
}
.arow.on{ opacity: 1; border-color: rgba(232,194,92,.45); background: rgba(232,194,92,.10); }
.a-ic{ flex: 0 0 auto; }
.a-ic canvas{ display: block; }
.a-m{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-m b{ font-size: 13px; }
.a-m em{ font-style: normal; font-size: 11px; color: var(--panel-fg-dim); line-height: 1.5; }
.a-st{ flex: 0 0 auto; font-size: 11px; color: var(--panel-fg-dim); }

/* ---------------- 设置 ---------------- */
.setlist{ display: flex; flex-direction: column; gap: 8px; }
.srow{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 8px 12px;
  border-radius: var(--r-s);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--panel-line);
}
.s-l{ font-size: 14px; font-weight: 600; }
.s-r{ display: flex; gap: 6px; align-items: center; }
.s-val{ font-size: 12px; color: var(--panel-fg-dim); }
.tips{ margin: 8px 0 0; padding-left: 20px; }
.tips li{ font-size: 12px; line-height: 1.9; color: var(--panel-fg-dim); }

/* ---------------- 弹层（明信片 / 喂食） ---------------- */
#ui > .modal{ pointer-events: none; opacity: 0; transition: opacity var(--speed) ease; }
#ui > .modal.open{ pointer-events: auto; opacity: 1; }
.modal{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,10,4,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mbox{
  width: min(560px, calc(100% - 28px));
  max-height: min(84%, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh);
  color: var(--ink);
  transform: scale(.96);
  transition: transform var(--speed) ease;
}
.modal.open .mbox{ transform: none; }
.mbox-in{ display: flex; flex-direction: column; gap: 10px; }
.mbox h4{ margin: 2px 0; font-size: 16px; }
.pc-big{ line-height: 0; }
.pc-big canvas{ display: block; width: 100%; height: auto; border-radius: var(--r-xs); background: #fdf8ec; }
.pc-text{
  margin: 4px 2px 0;
  font-size: 14px; line-height: 1.9; color: var(--ink-2);
  padding: 10px 12px;
  border-radius: var(--r-xs);
  background: var(--paper-2);
}
.mail-big{ display: flex; justify-content: center; }
.sv-row{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sv-i{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sv-i em{ font-style: normal; font-size: 11px; color: var(--ink-2); }
.mbox-act{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.mbox .btn.ghost{ background: rgba(0,0,0,.08); color: var(--ink); }
.mbox .tip{ color: var(--ink-2); }
.mbox .plist .prow{ background: rgba(0,0,0,.05); color: var(--ink); }
.mbox .prow .p-m em{ color: var(--ink-2); }
.mbox .prow .p-n{ color: var(--ink-2); }

/* ---------------- 底部导航 ---------------- */
#nav{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 4px 4px calc(4px + var(--safe-b));
  background: var(--panel-bg);
  border-top: 1px solid var(--panel-line);
}
.navb{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-xs);
  background: transparent;
  color: var(--panel-fg-dim);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.navb.on{ background: rgba(255,255,255,.10); color: var(--gold); }
.navb:active{ background: rgba(255,255,255,.14); }
.navb .dot{
  position: absolute; top: 6px; right: 50%;
  margin-right: -18px;
  box-shadow: 0 0 0 2px rgba(44,36,26,.9);
}

/* ---------------- 加载 / 错误 ---------------- */
#loading{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#f6efdc,#e0d3ae);
  z-index: 60;
  transition: opacity .3s ease;
}
#loading.done{ opacity: 0; pointer-events: none; }
.ld-card{ width: min(320px, 78vw); text-align: center; }
.ld-title{
  font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: 4px; margin-bottom: 6px;
}
.ld-sub{ font-size: 12px; color: var(--ink-2); margin-bottom: 16px; }
.ld-bar{
  height: 10px; border-radius: 999px;
  background: rgba(90,70,40,.16);
  overflow: hidden;
}
.ld-bar i{
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--grass), var(--grass-d));
  transition: width .12s linear;
}
.ld-num{ margin-top: 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

#fatal{
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: #2b2419;
  color: #f3ead3;
  font-size: 14px; line-height: 1.9;
  white-space: pre-wrap;
  text-align: center;
}
#fatal[hidden]{ display: none; }

/* ---------------- 移动端：面板改为底部抽屉 ---------------- */
@media (max-width: 640px){
  .overlay{ align-items: flex-end; }
  .panel{
    width: 100%;
    max-width: none;
    max-height: 78%;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    transform: translateY(102%);
  }
  .status{ width: 168px; padding: 8px 10px; }
  .chip{ height: 34px; padding: 0 10px; font-size: 14px; }
  .ibtn{ min-width: 46px; padding: 0 8px; font-size: 12px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .toasts{ top: 52px; }
  .slot{ min-height: 96px; }
  .navb{ font-size: 11px; }
}

@media (max-height: 460px){
  .status{ bottom: 8px; }
  .hud{ padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}