/*==================================================
  KANJIMINE QUEST – 共通スタイル
  マインクラフト風ドット UI / ゲーミフィケーション部品
==================================================*/

/*------------------------------------
  RESET
------------------------------------*/
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-jp);
  color:#fff;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;}

/*------------------------------------
  動画背景（index.htmlのみ）
------------------------------------*/
.video-bg{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}

/*------------------------------------
  レイアウト共通
------------------------------------*/
.container{max-width:900px;margin:auto;padding:20px;color:#fff;text-shadow:2px 2px 4px #000;}

/*------------------------------------
  ブロック風ボタン（立体ベベル）
------------------------------------*/
.btn{
  display:block;
  position:relative;
  font-family:var(--font-jp);
  font-size:15px;
  background:#5aa832;
  color:#fff;
  padding:14px 20px;
  text-align:center;
  margin:12px auto;
  width:280px;
  max-width:92vw;
  cursor:pointer;
  text-decoration:none;
  border:3px solid #1d1d1d;
  /* 内側ベベルでブロックらしい立体感 */
  box-shadow:
    inset  3px  3px 0 rgba(255,255,255,.45),
    inset -3px -3px 0 rgba(0,0,0,.40),
    0 5px 0 #2f5d1c,
    0 7px 8px rgba(0,0,0,.45);
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
  transition:background .12s, transform .06s, box-shadow .06s;
}
.btn:hover{background:#6cc93c;}
.btn:active{
  transform:translateY(4px);
  box-shadow:
    inset  3px  3px 0 rgba(255,255,255,.35),
    inset -3px -3px 0 rgba(0,0,0,.45),
    0 1px 0 #2f5d1c,
    0 2px 4px rgba(0,0,0,.4);
}
.btn:focus-visible{outline:3px solid #ffd83d;outline-offset:2px;}

/* 黄色（重要アクション）・青（サブ）バリエーション */
.btn.btn-gold{background:#d8a12a;box-shadow:inset 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 0 rgba(0,0,0,.4),0 5px 0 #8a6413,0 7px 8px rgba(0,0,0,.45);}
.btn.btn-gold:hover{background:#eab435;}
.btn.btn-blue{background:#3f7cc4;box-shadow:inset 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 0 rgba(0,0,0,.4),0 5px 0 #24507f,0 7px 8px rgba(0,0,0,.45);}
.btn.btn-blue:hover{background:#4e91dc;}

/*------------------------------------
  テーブル & カード
------------------------------------*/
.card{
  background:rgba(0,0,0,.62);
  padding:20px;
  border:3px solid #1d1d1d;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.5);
  border-radius:10px;
  margin-bottom:20px;
}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border:2px solid #fff;font-size:13px}
th{font-family:var(--font-pixel);font-size:10px;background:rgba(255,255,255,.12)}
@media (max-width:600px){
 th,td{font-size:11px;padding:7px}
 th{font-size:8px}
}

/*------------------------------------
  テストページ（設問）
------------------------------------*/
.question{margin:18px 0}
.answers label{
  display:flex;align-items:center;margin:7px 0;gap:10px;
  padding:9px 11px;
  background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.22);
  border-radius:7px;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .06s;
}
.answers label:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.answers label:active{transform:scale(.99)}
.answers label:has(input:checked){
  background:rgba(255,216,61,.20);
  border-color:#ffd83d;
}
.answers input[type=radio]{transform:scale(1.4);accent-color:#5aa832;flex:none}
.explanation{margin-top:6px;font-size:13px;color:#ffff99;display:none}

/* 採点結果（アニメーション付き） */
.correct{
  background:rgba(60,190,70,.32)!important;
  border-color:#6cc93c!important;
  animation:pop .34s ease-out both;
}
.wrong{
  background:rgba(220,60,60,.30)!important;
  border-color:#e05a5a!important;
  animation:shake .34s ease-in-out both;
}

/*------------------------------------
  上のツールバー（もどるリンク・スコア・音ボタン）
  ★ position:fixed を使わず「ふつうの流れ」に置くので、
    どの画面サイズでも ほかのボタンと絶対に重ならない。
------------------------------------*/
.topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:10px 12px;
}
.topbar-left,.topbar-right{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.topbar-right{margin-left:auto}
.topbar .back-link{font-size:12px;color:#fff;text-decoration:underline;white-space:nowrap}

/* 四角いアイコンボタン（音のオン/オフ など） */
.icon-btn{
  width:42px;height:42px;padding:0;
  font-size:20px;line-height:1;cursor:pointer;
  border:3px solid #1d1d1d;border-radius:8px;
  background:rgba(0,0,0,.55);color:#fff;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.2), 0 3px 0 rgba(0,0,0,.4);
  flex:none;
}
.icon-btn:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 rgba(255,255,255,.2)}

/* 音楽パネル（♪ + 音量スライダー） */
.audio-panel{
  display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.55);
  border:3px solid #1d1d1d;border-radius:8px;
  padding:5px 9px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18);
}
.bgm-note{font-size:16px;line-height:1;color:#7a7a7a;transition:color .3s}
.bgm-note.on{color:#ffd83d;animation:note-bounce 1.1s ease-in-out infinite}
@keyframes note-bounce{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-4px) rotate(6deg)}
}
#bgmVol{
  -webkit-appearance:none;appearance:none;
  width:76px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#6cc93c,#ffd83d);
  border:2px solid #1d1d1d;cursor:pointer;
}
#bgmVol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:18px;border-radius:3px;
  background:#e8e8e8;border:2px solid #1d1d1d;cursor:pointer;
}
#bgmVol::-moz-range-thumb{
  width:14px;height:18px;border-radius:3px;
  background:#e8e8e8;border:2px solid #1d1d1d;cursor:pointer;
}
@media (max-width:480px){
  #bgmVol{width:56px}
  .audio-panel{padding:4px 7px;gap:5px}
}

/*------------------------------------
  スコア表示（バッジ + 時間へんかんボタン）
------------------------------------*/
.score-badge-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.score-badge{
  background:rgba(0,0,0,.72);
  color:#fff;
  padding:9px 14px;
  border:3px solid #1d1d1d;
  font-family:var(--font-jp);
  font-size:14px;
  line-height:1.2;
  margin:0;
  border-radius:6px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.2), 0 0 6px rgba(0,0,0,.5);
}
.score-badge b{color:#ffd83d;font-size:17px}

#resetScoreBtn{
  background:#43a047;
  color:#fff;
  border:3px solid #1d1d1d;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
  border-radius:6px;
  font-family:var(--font-jp);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.3), 0 3px 0 #2b6b2e;
  transition:background .2s, transform .08s;
  white-space:nowrap;
  text-align:center;
}
#resetScoreBtn:hover{background:#4fb955;}
#resetScoreBtn:active{transform:translateY(3px);box-shadow:inset 2px 2px 0 rgba(255,255,255,.25), 0 0 0 #2b6b2e;}

#conversionMsg{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.82);
  color:#fff;
  padding:14px 22px;
  border:3px solid #ffd83d;
  border-radius:10px;
  font-size:14px;
  line-height:1.5;
  max-width:90%;
  text-align:center;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
  font-family:var(--font-jp);
}
#conversionMsg.show{opacity:1;}

@media (max-width:640px){
  .topbar{padding:8px 10px;gap:8px}
  .score-badge-wrap{gap:6px;}
  .score-badge{padding:6px 9px;font-size:11px;}
  .score-badge b{font-size:14px}
  #resetScoreBtn{font-size:10px;padding:5px 8px;}
  .icon-btn{width:38px;height:38px;font-size:17px}
  #conversionMsg{font-size:12px;padding:12px 18px;}
}
/* とてもせまい画面では、上のツールバーを2段にして重なりを防ぐ */
@media (max-width:380px){
  .topbar{justify-content:center}
  .topbar-right{margin-left:0}
}
/* せまい画面では 各ページの枠のよはくを小さくして 横スクロールを防ぐ
   （body を付けて、ページ内の <style> より強くしている） */
@media (max-width:640px){
  body .wrap{margin:14px auto;padding:14px;border-radius:10px}
  body .container{padding:14px}
}

/*------------------------------------
  背景画像 (test.html 系)
------------------------------------*/
body.test-bg{background:url('../media/minecraft1.jpg') center/cover fixed;}
body.test-bg::before{      /* 文字を読みやすくする暗幕 */
  content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:-1;
}

/*------------------------------------
  ホームメニュー
------------------------------------*/
.home-menu{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 70px);   /* 上のツールバーのぶんを引く */
  text-align:center;
  padding:20px 12px 40px;
}
.mc-title {
  font-family:var(--font-pixel);
  font-size: 42px;
  color: #cfcfcf;
  letter-spacing: 1.5px;
  line-height: 1.25;
  text-align: center;
  text-shadow:
    2px 2px 0 #555555,
    4px 4px 0 #2e2e2e,
    8px 8px 0 #000000;
  animation:bob 3.4s ease-in-out infinite;
}
@media (max-width:600px) {
  .mc-title {font-size: 24px;}
}
.home-menu .btn{ width:300px; }

/*==================================================
  ゲーミフィケーション部品
==================================================*/

/*---------- レベル / XP バー ----------*/
.hud{
  width:100%;              /* 親のはばに合わせる（vw だと はみ出す） */
  max-width:520px;
  margin:18px auto 6px;
  background:rgba(0,0,0,.6);
  border:3px solid #1d1d1d;
  border-radius:10px;
  padding:12px 14px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.5);
}
.hud-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.hud-level{font-family:var(--font-pixel);font-size:13px;color:#ffd83d;text-shadow:2px 2px 0 #000}
.xp-bar{
  position:relative;height:18px;margin-top:9px;
  background:#26241f;border:3px solid #1d1d1d;border-radius:4px;overflow:hidden;
}
.xp-fill{
  height:100%;width:0;
  background:repeating-linear-gradient(90deg,#7ee04a 0 8px,#66c93c 8px 16px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35);
  transition:width .9s cubic-bezier(.2,.8,.2,1);
}
.xp-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.5px;text-shadow:1px 1px 0 #000;
}

/*---------- バッジ ----------*/
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:11px}
.badge{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.28);
  border-radius:6px;padding:5px 9px;font-size:11px;
}
.badge .ico{font-size:15px;line-height:1}
.badge.on{background:rgba(255,216,61,.22);border-color:#ffd83d;color:#fff}
.badge.off{opacity:.45;filter:grayscale(1)}

/*---------- ステージ選択マップ ----------*/
.stage-map{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:12px;
  margin:18px auto 6px;
  width:100%;              /* 親のはばに合わせる（vw だと はみ出す） */
  max-width:660px;
}
@media (max-width:640px){
  .stage-map{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px}
  .stage-node .no{font-size:15px}
  .stage-node .sub{font-size:9px}
}
@media (max-width:360px){
  .stage-map{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:7px}
}
.stage-node{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1/1;
  border:3px solid #1d1d1d;
  border-radius:8px;
  text-decoration:none;color:#fff;
  font-family:var(--font-jp);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.25), inset -3px -3px 0 rgba(0,0,0,.35), 0 5px 10px rgba(0,0,0,.45);
  transition:transform .1s;
  overflow:hidden;
}
.stage-node .no{font-family:var(--font-pixel);font-size:17px;text-shadow:2px 2px 0 #000}
.stage-node .sub{font-size:10px;margin-top:5px;opacity:.95}
.stage-node .mark{font-size:22px;line-height:1;margin-bottom:2px}

/* クリア済み：草ブロック */
.stage-node.cleared{
  background:linear-gradient(#6abe30 0 26%,#7c4a2d 26% 100%);
}
.stage-node.cleared .sub{color:#fff8c9}
/* 挑戦中：光るダイヤ風 */
.stage-node.current{
  background:linear-gradient(#4fd3d9 0 30%,#2f8f96 30% 100%);
  animation:pulse 1.5s ease-in-out infinite;
}
/* 未開放：岩盤 */
.stage-node.locked{
  background:repeating-linear-gradient(45deg,#3a3a3a 0 8px,#2c2c2c 8px 16px);
  color:#9a9a9a;cursor:not-allowed;
}
.stage-node:not(.locked):hover{transform:translateY(-3px) scale(1.03)}
.stage-node:not(.locked):active{transform:translateY(1px) scale(.99)}

/* イベント回（仲間がふえる回） */
.stage-node.is-event{border-color:#ffd83d}
.stage-node .ev{
  position:absolute;top:2px;right:5px;
  font-size:14px;color:#ffd83d;text-shadow:1px 1px 0 #000;
}

/*---------- クイズ進行バー / ハート ----------*/
.quiz-hud{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  background:rgba(0,0,0,.82);
  border:3px solid #1d1d1d;border-radius:8px;
  padding:9px 12px;margin:0 0 14px;
  backdrop-filter:blur(3px);
}
.quiz-hud .label{font-size:11px;white-space:nowrap;font-family:var(--font-pixel)}
.prog{flex:1;height:16px;background:#26241f;border:3px solid #1d1d1d;border-radius:4px;overflow:hidden}
.prog-fill{
  height:100%;width:0;
  background:repeating-linear-gradient(90deg,#ffd83d 0 8px,#e8bf28 8px 16px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4);
  transition:width .3s ease-out;
}
.hearts{font-size:16px;letter-spacing:2px;white-space:nowrap;transition:transform .1s}
.hearts .lost{opacity:.28;filter:grayscale(1);transition:opacity .25s, filter .25s}
/* ライフが1つ減るときの演出 */
.hearts .breaking{animation:heart-break .5s ease-out both}
.hearts.shaking{animation:shake .4s ease-in-out both}
@keyframes heart-break{
  0%{opacity:1;filter:none;transform:scale(1)}
  25%{opacity:1;filter:none;transform:scale(1.5)}
  60%{opacity:.7;filter:grayscale(.5)}
  100%{opacity:.28;filter:grayscale(1);transform:scale(1)}
}

/* ざんねん（もう一度ちょうせん） */
.retry-box{
  max-width:460px;margin:16px auto;padding:14px 18px;text-align:center;
  background:linear-gradient(rgba(255,120,120,.18),rgba(0,0,0,.55));
  border:3px solid #e05a5a;border-radius:12px;
  animation:pop .45s ease-out both;
}
.retry-head{font-family:var(--font-pixel);font-size:16px;color:#ff9a9a;text-shadow:2px 2px 0 #000;margin-bottom:8px}
.retry-txt{font-size:13px;line-height:1.8}
.retry-txt b{color:#ffd83d}

/*---------- きょうの漢字 ----------*/
.kanji-head{font-family:var(--font-pixel);font-size:11px;margin:16px 0 8px;color:#ffe28a;text-shadow:2px 2px 0 #000}
.kanji-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.kanji-strip .k{
  background:linear-gradient(#8f8f8f,#6f6f6f);
  border:3px solid #1d1d1d;border-radius:7px;
  padding:7px 9px;text-align:center;min-width:66px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.3);
}
.kanji-strip .k .c{font-size:27px;line-height:1.1;font-family:var(--font-jp);text-shadow:2px 2px 0 rgba(0,0,0,.55)}
.kanji-strip .k .r{font-size:10px;color:#eaffff;margin-top:3px}
.kanji-strip .k .m{font-size:10px;color:#fff3c4;margin-top:1px}
.kanji-strip .k .grade{display:block;font-size:9px;color:#c6ffb0;margin-top:2px}

/*---------- 仲間（なかま） ----------*/
.mate-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 4px}
.mate{
  width:88px;padding:9px 6px;text-align:center;
  border:3px solid #1d1d1d;border-radius:9px;
  background:linear-gradient(#6f8fbf,#48618c);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.4);
}
.mate .ico{font-size:32px;line-height:1.1}
.mate .nm{font-size:10px;margin-top:5px;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.mate.locked{
  background:repeating-linear-gradient(45deg,#3a3a3a 0 8px,#2c2c2c 8px 16px);
  color:#8f8f8f;
}
.mate.locked .ico{color:#6a6a6a}

/* 仲間ゲットの演出 */
.mate-get{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin:14px auto;padding:14px 18px;max-width:420px;
  background:linear-gradient(rgba(255,216,61,.22),rgba(0,0,0,.55));
  border:3px solid #ffd83d;border-radius:12px;
  animation:pop .55s ease-out both;
}
.mate-get .big{font-size:46px;line-height:1;animation:bob 1.8s ease-in-out infinite}
.mate-get .txt{text-align:left;font-size:13px;line-height:1.65}
.mate-get .txt b{color:#ffd83d;font-size:16px}

/*---------- 漢字図鑑 ----------*/
.dex-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:10px;margin-top:14px;
}
.dex-cell{
  aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:3px solid #1d1d1d;border-radius:7px;
  background:linear-gradient(#8f8f8f,#6b6b6b);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.32), inset -2px -2px 0 rgba(0,0,0,.3);
  cursor:pointer;transition:transform .1s;
}
.dex-cell:hover{transform:translateY(-2px) scale(1.04)}
.dex-cell .c{font-size:30px;line-height:1;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.dex-cell .g{font-size:9px;margin-top:4px;color:#e9ffd9}
.dex-cell.locked{
  background:repeating-linear-gradient(45deg,#3a3a3a 0 8px,#2c2c2c 8px 16px);
  color:#787878;cursor:default;
}
.dex-cell.locked .c{color:#5c5c5c;text-shadow:none}
.dex-cell.locked:hover{transform:none}
/* まだゲームに出ていない漢字（これからのステージ） */
.dex-cell.soon{
  background:#1b1b1b;border-color:#2a2a2a;color:#4d4d4d;cursor:default;
  box-shadow:none;
}
.dex-cell.soon .c{color:#4d4d4d;text-shadow:none}
.dex-cell.soon .g{color:#3f3f3f}
.dex-cell.soon:hover{transform:none}
.dex-info{
  margin-top:14px;min-height:52px;
  background:rgba(0,0,0,.55);border:3px solid #1d1d1d;border-radius:8px;
  padding:11px 13px;font-size:13px;line-height:1.6;
}
.dex-info .big{font-size:26px;margin-right:8px;vertical-align:-3px}

/*---------- 結果バナー / 紙ふぶき ----------*/
.result-banner{
  font-family:var(--font-pixel);
  text-align:center;font-size:24px;color:#ffd83d;
  text-shadow:3px 3px 0 #7a5300, 6px 6px 0 #000;
  margin:16px 0 4px;
  animation:pop .5s ease-out both;
}
@media (max-width:600px){ .result-banner{font-size:16px} }

.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti{
  position:absolute;width:10px;height:10px;
  animation:confetti-fall linear forwards;
}
.spark{
  position:absolute;width:7px;height:7px;background:#ffd83d;
  animation:spark-out .55s ease-out forwards;
}

/*---------- 汎用アニメーション ----------*/
@keyframes pop{
  0%{transform:scale(.82);opacity:.4}
  55%{transform:scale(1.07)}
  100%{transform:scale(1);opacity:1}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@keyframes pulse{
  0%,100%{box-shadow:inset 3px 3px 0 rgba(255,255,255,.25), inset -3px -3px 0 rgba(0,0,0,.35), 0 0 0 rgba(79,211,217,.7), 0 5px 10px rgba(0,0,0,.45)}
  50%{box-shadow:inset 3px 3px 0 rgba(255,255,255,.25), inset -3px -3px 0 rgba(0,0,0,.35), 0 0 18px rgba(79,211,217,.95), 0 5px 10px rgba(0,0,0,.45)}
}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:.9}
}
@keyframes spark-out{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}