/* =============================================================
   비밀의 석판 — 스타일
   ============================================================= */

:root{
  --void:      #06080c;
  --void-2:    #0b0e14;
  --stone:     #171a21;
  --stone-hi:  #232733;
  --stone-lo:  #0e1116;
  --edge:      rgba(216,178,106,.22);
  --gold:      #d8b26a;
  --gold-soft: #f0d9a6;
  --gold-dim:  rgba(216,178,106,.45);
  --cyan:      #6fd4e0;
  --ink:       #cdd2dc;
  --ink-dim:   #767d8d;
  --danger:    #e0776f;

  --serif: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  --display: 'Cinzel', var(--serif);

  --ease: cubic-bezier(.22,.75,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* ── 배경 연출 ─────────────────────────────────────────────── */

.veil{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(216,178,106,.10), transparent 60%),
    radial-gradient(90%  70% at 15% 110%, rgba(111,212,224,.07), transparent 62%),
    radial-gradient(70%  60% at 88% 20%,  rgba(120,90,180,.06),  transparent 60%),
    linear-gradient(180deg, var(--void-2), var(--void) 55%, #04060a);
}
.veil::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.72) 100%);
}

.dust{ position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dust i{
  position: absolute; display: block;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: drift linear infinite;
}
@keyframes drift{
  0%   { transform: translate3d(0, 12vh, 0) scale(.6); opacity: 0; }
  12%  { opacity: .55; }
  85%  { opacity: .25; }
  100% { transform: translate3d(var(--dx, 20px), -110vh, 0) scale(1.1); opacity: 0; }
}

/* ── 화면 전환 ─────────────────────────────────────────────── */

.screen{
  position: relative; z-index: 2;
  display: none;
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 56px) 20px;
  flex-direction: column; align-items: center; justify-content: center;
}
.screen.is-active{ display: flex; animation: screenIn .9s var(--ease) both; }
@keyframes screenIn{
  from{ opacity: 0; transform: translateY(14px) scale(.99); filter: blur(6px); }
  to  { opacity: 1; transform: none; filter: none; }
}

/* ── 인트로 ────────────────────────────────────────────────── */

.intro-inner{ max-width: 620px; text-align: center; }

.intro-eyebrow{
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: .42em; text-indent: .42em;
  color: var(--gold-dim); text-transform: uppercase;
}

.intro-title{
  margin: 0;
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 700; line-height: 1.15; letter-spacing: .04em;
  color: #f4efe4;
  text-shadow: 0 0 34px rgba(216,178,106,.28), 0 0 90px rgba(216,178,106,.12);
}
.rule{
  width: 130px; height: 1px; margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  position: relative;
}
.rule::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  transform: rotate(45deg); background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}

.intro-lead{
  margin: 0 0 14px;
  font-size: clamp(15px, 3.4vw, 17px);
  color: var(--ink); opacity: .9;
}
.intro-lead--dim{ color: var(--ink-dim); font-size: 14.5px; }

.intro-foot{
  margin: 30px 0 0;
  font-size: 12.5px; letter-spacing: .1em;
  color: rgba(111,212,224,.55);
}

/* ── 버튼 ──────────────────────────────────────────────────── */

.btn{
  position: relative;
  font-family: var(--serif); font-size: 15.5px; letter-spacing: .16em;
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(216,178,106,.14), rgba(216,178,106,.05));
  border: 1px solid var(--edge);
  padding: 15px 38px;
  cursor: pointer;
  transition: color .35s, border-color .35s, box-shadow .45s, transform .2s;
}
.btn:hover{
  color: #fff7e6;
  border-color: rgba(216,178,106,.6);
  box-shadow: 0 0 26px rgba(216,178,106,.22), inset 0 0 22px rgba(216,178,106,.10);
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

.btn--play{ margin-top: 34px; padding: 17px 52px; font-size: 16.5px; }
.btn--play::before, .btn--play::after{
  content: ""; position: absolute; width: 7px; height: 7px;
  border: 1px solid var(--gold); opacity: .7;
}
.btn--play::before{ top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.btn--play::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

.btn--ghost{ padding: 12px 30px; font-size: 14px; }

/* ── 보드 ──────────────────────────────────────────────────── */

.board-head{ text-align: center; margin-bottom: clamp(20px, 4vh, 34px); }

.board-title{
  margin: 0 0 16px;
  font-size: clamp(17px, 4vw, 21px); font-weight: 400;
  letter-spacing: .5em; text-indent: .5em;
  color: var(--gold-soft); opacity: .85;
}

.progress{ display: flex; align-items: center; gap: 14px; justify-content: center; }
.progress-bar{
  width: clamp(140px, 40vw, 220px); height: 2px;
  background: rgba(255,255,255,.09); overflow: hidden;
}
.progress-bar i{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  box-shadow: 0 0 12px var(--gold);
  transition: width .9s var(--ease);
}
.progress-count{
  font-family: var(--display); font-size: 13px;
  letter-spacing: .18em; color: var(--ink-dim);
}
.progress-count b{ color: var(--gold); font-weight: 600; }

.key-badge{
  margin: 12px 0 0;
  font-size: 12.5px; letter-spacing: .14em;
  color: rgba(111,212,224,.55);
}
.key-badge b{ color: var(--cyan); font-weight: 400; }

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);   /* 행 높이를 균등하게 고정 */
  gap: clamp(8px, 2.2vw, 16px);
  width: min(92vw, 500px, 56vh);
  aspect-ratio: 1;
}

/* ── 석판 ──────────────────────────────────────────────────── */

.tile{
  position: relative;
  perspective: 1000px;
  background: none; border: 0; padding: 0;
  overflow: visible;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: tileRise .7s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes tileRise{
  from{ opacity: 0; transform: translateY(18px) scale(.94); }
  to  { opacity: 1; transform: none; }
}
.tile:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 4px; }

.tile-inner{
  display: block;                    /* span 이므로 반드시 필요 */
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease);
}
.tile.is-solved .tile-inner{ transform: rotateY(180deg); }

.face{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

/* 앞면 — 봉인된 석판 */
.face--front{
  background:
    radial-gradient(80% 60% at 50% 22%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(158deg, var(--stone-hi), var(--stone) 46%, var(--stone-lo));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -14px 26px rgba(0,0,0,.5),
    0 12px 26px rgba(0,0,0,.45);
  transition: box-shadow .45s, border-color .45s, transform .45s;
}
.tile:hover .face--front{
  border-color: rgba(216,178,106,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 34px rgba(216,178,106,.12),
    0 16px 34px rgba(0,0,0,.5),
    0 0 26px rgba(216,178,106,.14);
}

.face--front .numeral{
  font-family: var(--display);
  font-size: clamp(19px, 5.2vw, 27px);
  letter-spacing: .06em;
  color: rgba(216,178,106,.62);
  text-shadow: 0 0 16px rgba(216,178,106,.3);
  transition: color .45s, text-shadow .45s;
}
.tile:hover .face--front .numeral{
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(216,178,106,.65);
}

.face--front .seal{
  position: absolute; inset: 9px;
  border: 1px solid rgba(216,178,106,.13);
}
.face--front .seal::before, .face--front .seal::after{
  content: ""; position: absolute; width: 6px; height: 6px;
  border: 1px solid rgba(216,178,106,.3);
}
.face--front .seal::before{ top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.face--front .seal::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* 뒷면 — 문양의 조각 */
.face--back{
  transform: rotateY(180deg);
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(216,178,106,.10), transparent 72%),
    linear-gradient(158deg, #0f1319, #090c11);
  border-color: rgba(216,178,106,.28);
  box-shadow: inset 0 0 30px rgba(216,178,106,.10), 0 10px 24px rgba(0,0,0,.5);
}
.face--back svg{ width: 100%; height: 100%; display: block; }
.face--back .frag{
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(216,178,106,.75));
}
.face--back .mark{ fill: rgba(216,178,106,.4); }
.face--back .decoy{
  fill: none;
  stroke: rgba(216,178,106,.3);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* 완료 시 — 문양만 석판에서 떨어져 나간다. 빈 석판은 그 자리에 남는다. */
.grid.is-lifted .face--back .frag{
  opacity: 0;
  transition: opacity .3s ease;
}
.grid.is-lifted .face--back{
  transition: box-shadow 1.6s ease, border-color 1.6s ease;
  box-shadow: inset 0 0 30px rgba(216,178,106,.03), 0 10px 24px rgba(0,0,0,.5);
  border-color: rgba(216,178,106,.08);
}

.board-foot{
  margin: clamp(20px, 4vh, 32px) 0 0;
  font-size: 13.5px; letter-spacing: .12em; color: var(--ink-dim);
  text-align: center; min-height: 1.75em;
  transition: color .4s;
}
.board-foot.is-alert{ color: var(--gold); }

.reset-link{
  margin-top: 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 11.5px; letter-spacing: .14em;
  color: rgba(255,255,255,.16); transition: color .3s;
}
.reset-link:hover{ color: var(--danger); }
.reset-link.is-armed{ color: var(--danger); }

/* ── 모달 ──────────────────────────────────────────────────── */

.modal{
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden]{ display: none; }

.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(3,5,8,.86);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: fadeIn .4s ease both;
}
@keyframes fadeIn{ from{ opacity: 0 } to{ opacity: 1 } }

.modal-card{
  position: relative;
  width: min(560px, 100%);
  max-height: 88dvh; overflow-y: auto;
  padding: clamp(26px, 5vw, 40px);
  background: linear-gradient(160deg, #14171e, #0a0d12);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  animation: cardIn .55s var(--ease) both;
}
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(22px) scale(.96); }
  to  { opacity: 1; transform: none; }
}
.modal-card.is-wrong{ animation: shake .5s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0) }
  15%{ transform: translateX(-11px) } 30%{ transform: translateX(9px) }
  45%{ transform: translateX(-7px) }  60%{ transform: translateX(5px) }
  80%{ transform: translateX(-2px) }
}
.modal-card.is-right{
  border-color: rgba(216,178,106,.75);
  box-shadow: 0 0 70px rgba(216,178,106,.3), inset 0 0 50px rgba(216,178,106,.09);
  transition: border-color .4s, box-shadow .4s;
}

.modal-x{
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 8px;
  color: rgba(255,255,255,.28); transition: color .3s;
}
.modal-x:hover{ color: var(--gold); }

.q-name{
  margin: 0;
  font-family: var(--display); font-size: 12.5px;
  letter-spacing: .26em; color: var(--gold); text-transform: uppercase;
}
.q-rule{
  height: 1px; margin: 16px 0 22px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}

.q-body{
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(14.5px, 3.4vw, 16px);
  line-height: 1.95;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 각인이 화면보다 넓으면 문단이 아니라 이 상자만 옆으로 움직인다 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,178,106,.3) transparent;
}
.q-body::-webkit-scrollbar{ height: 3px; }
.q-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); }
.q-body::-webkit-scrollbar-thumb{ background: rgba(216,178,106,.3); }

/* 석판에 새겨진 각인 — 세로셈·수열·암호문의 자릿수를 맞춘다.
   white-space:pre 로 묶어 두는 것이 중요하다. 각인이 접히면
   격자의 칸이 어긋나고, 줄을 세어 푸는 문제에서는 한 줄이
   두 줄로 보여 답 자체가 달라진다. */
.q-body .mono{
  font-family: 'Consolas', 'D2Coding', 'Menlo', ui-monospace, monospace;
  font-size: .95em;
  letter-spacing: .04em;
  color: var(--gold-soft);
  white-space: pre;
  overflow-wrap: normal;
}

/* 좁은 화면에서 각인이 잘리는 일을 줄인다.
   먼저 모달 여백을 죄어 폭을 벌고, 그래도 모자랄 때만 글씨를 줄인다. */
@media (max-width: 430px){
  .q-body .mono{ font-size: .88em; letter-spacing: .01em; }
}
@media (max-width: 400px){
  .modal{ padding: 14px; }
  .modal-card{ padding: 22px; }
  .q-body .mono{ font-size: .84em; letter-spacing: 0; }
}
@media (max-width: 350px){
  .q-body .mono{ font-size: .76em; }
}

.q-form{ display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap; }

.q-input{
  flex: 1 1 auto; min-width: 0;
  padding: 14px 16px;
  font-family: var(--serif); font-size: 16px; letter-spacing: .04em;
  color: var(--gold-soft);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.11);
  transition: border-color .3s, box-shadow .3s;
}
.q-input::placeholder{ color: rgba(255,255,255,.2); letter-spacing: .1em; }
.q-input:focus{
  outline: none;
  border-color: rgba(216,178,106,.55);
  box-shadow: 0 0 0 3px rgba(216,178,106,.10);
}

.btn--submit{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 14px 26px; font-size: 14.5px;
}

/* 좁은 화면에서는 버튼을 죄어 입력칸의 폭을 벌어 준다 */
@media (max-width: 430px){
  .btn--submit{ padding: 14px 18px; letter-spacing: .1em; }
}

.q-msg{
  margin: 16px 0 0; min-height: 1.7em;
  font-size: 14px; letter-spacing: .06em;
}
.q-msg.is-wrong{ color: var(--danger); }
.q-msg.is-right{ color: var(--gold); }

.q-hint{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); }
.hint-toggle{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em;
  color: rgba(111,212,224,.6); transition: color .3s;
}
.hint-toggle:hover{ color: var(--cyan); }
.hint-text{
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.85;
  color: var(--ink-dim); word-break: keep-all;
  animation: fadeIn .45s ease both;
}

/* ── 만능 열쇠 ─────────────────────────────────────────────── */

.q-key{ margin-top: 14px; }
.q-key[hidden]{ display: none; }

.key-btn{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em;
  color: rgba(255,255,255,.28);
  transition: color .3s;
}
.key-btn:hover{ color: var(--cyan); }
.key-btn .key-left{ opacity: .7; }

.key-none{
  margin: 0; font-size: 12.5px; letter-spacing: .12em;
  color: rgba(255,255,255,.18);
}

.key-confirm{
  margin-top: 12px; padding: 14px 16px;
  border: 1px solid rgba(111,212,224,.22);
  background: rgba(111,212,224,.04);
  animation: fadeIn .35s ease both;
}
.key-confirm[hidden]{ display: none; }

.key-warn{
  margin: 0 0 14px; font-size: 13px; line-height: 1.8;
  color: var(--ink-dim); word-break: keep-all;
}

.key-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.key-yes, .key-no{
  flex: 1 1 auto;
  padding: 10px 18px; cursor: pointer;
  font-family: var(--serif); font-size: 13px; letter-spacing: .12em;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ink-dim);
  transition: color .3s, border-color .3s, background .3s;
}
.key-yes{ color: rgba(111,212,224,.8); border-color: rgba(111,212,224,.35); }
.key-yes:hover{ color: #eafcff; border-color: var(--cyan); background: rgba(111,212,224,.10); }
.key-no:hover{ color: var(--ink); border-color: rgba(255,255,255,.3); }
.key-yes:focus-visible, .key-no:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── 피날레 ────────────────────────────────────────────────── */

.finale{
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 2vh, 18px);
  padding: 24px;
}
.finale[hidden]{ display: none; }

/* 처음엔 투명해서 보드가 그대로 비친다 — 조각이 모이기 시작하면 방이 어두워진다 */
.finale::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 70% at 50% 45%, rgba(11,14,20,.88), rgba(4,6,10,.985) 70%);
  opacity: 0;
  transition: opacity 1.8s ease;
}
.finale.is-assembled::before{ opacity: 1; }

.finale-svg{
  width: min(78vw, 46vh); height: min(78vw, 46vh);
  overflow: visible;
}

/* 조각: 석판 뒷면 자리(--tx/--ty/--rot/--s) → 0 위의 제자리.
   변수가 없으면 이미 제자리이므로, 위치를 못 재도 그림은 깨지지 않는다. */
.finale-svg .piece{
  transform:
    translate(var(--tx, 0px), var(--ty, 0px))
    rotate(var(--rot, 0deg))
    scale(var(--s, 1));
  transform-origin: 300px 300px;   /* JS 가 조각마다 제 무게중심으로 덮어쓴다 */
  transform-box: view-box;
  opacity: 0;
  transition:
    transform 2.2s cubic-bezier(.6,.02,.16,1),
    opacity .45s ease;
}
/* 자리를 잡는 첫 프레임 — 전환 없이 석판 위에 그대로 얹는다 */
.finale.is-placing .finale-svg .piece{ transition: none; }

.finale.is-lifted .finale-svg .piece{ opacity: 1; }
.finale.is-assembled .finale-svg .piece{
  transform: translate(0px, 0px) rotate(0deg) scale(1);
}

.finale-svg .piece path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(216,178,106,.6));
  transition: stroke-width 1.2s var(--ease), stroke .9s, filter 1.2s;
}
/* 합쳐진 뒤엔 조각이 완성된 0에 완전히 가려진다.
   조각마다 큰 블러를 돌리면 저사양 휴대폰에서 끊기므로 글로우는 0 하나만 담당한다. */
.finale.is-fused .finale-svg .piece path{
  stroke-width: 30;
  stroke: var(--gold-soft);
  filter: none;
}

/* 완성된 0 (조각이 합쳐진 뒤 이음매를 메운다) */
.finale-svg .zero-solid{
  fill: none; stroke: var(--gold-soft); stroke-width: 30;
  opacity: 0;
  filter: drop-shadow(0 0 26px rgba(216,178,106,.8))
          drop-shadow(0 0 80px rgba(216,178,106,.35));
  transition: opacity 1.4s ease;
}
.finale.is-fused .finale-svg .zero-solid{ opacity: 1; }

.finale-svg .halo{
  fill: none; stroke: var(--gold); stroke-width: 1;
  opacity: 0; transform-origin: 300px 300px; transform-box: view-box;
}
.finale.is-fused .finale-svg .halo{ animation: halo 2.6s ease-out .3s both; }
@keyframes halo{
  0%  { opacity: .8; transform: scale(1); }
  100%{ opacity: 0;  transform: scale(1.9); }
}

.finale-copy{ text-align: center; opacity: 0; transition: opacity 1.2s ease .2s; }
.finale.is-revealed .finale-copy{ opacity: 1; }

.finale-kicker{
  margin: 0 0 10px; font-size: 12.5px; letter-spacing: .3em;
  color: var(--ink-dim);
}
.finale-title{
  margin: 0 0 10px;
  font-size: clamp(20px, 5vw, 26px); font-weight: 400;
  letter-spacing: .34em; text-indent: .34em; color: var(--gold-soft);
}
.finale-note{
  margin: 0 0 26px; font-size: 14px; color: var(--ink-dim); word-break: keep-all;
}

/* ── 접근성 / 대응 ─────────────────────────────────────────── */

@media (max-width: 345px){
  .q-form{ flex-direction: column; }
  .btn--submit{ width: 100%; padding: 14px 26px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .dust{ display: none; }
}