/* ============================================================
   FARDAN RASYA HAFIST — pixel RPG portfolio
   Plain CSS. No frameworks.
   ============================================================ */

:root{
  --bg:        #070a11;
  --bg-2:      #0d1420;
  --bg-3:      #131c2c;
  --ink:       #e8f1ff;
  --ink-dim:   #93a4c0;
  --ink-faint: #5d6c86;

  --cyan:   #6fe3ff;
  --green:  #9ee84a;
  --orange: #ffb347;
  --purple: #c792ea;
  --gold:   #ffd93d;
  --blue:   #6cb2ff;
  --pink:   #ff6b9d;
  --red:    #ff5f5f;

  --accent: var(--cyan);

  --pix: 'Press Start 2P', 'Courier New', monospace;
  --term: 'VT323', 'Consolas', monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--term);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

body.doc-open{ overflow:auto; }

.hidden{ display:none !important; }

/* ------------------------------------------------------------
   Canvas stage
   ------------------------------------------------------------ */
#stage{
  position:fixed; inset:0;
  overflow:hidden;
  background:#04060b;
}
#game{
  position:absolute; top:0; left:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
}

/* ------------------------------------------------------------
   CRT overlay
   ------------------------------------------------------------ */
#crt{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:900;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.00) 0px,
      rgba(0,0,0,.00) 2px,
      rgba(0,0,0,.22) 3px,
      rgba(0,0,0,.22) 4px
    );
  mix-blend-mode:multiply;
}
#crt::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,.35) 78%,
    rgba(0,0,0,.75) 100%);
  mix-blend-mode:normal;
}
#crt::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(255,0,80,.035), rgba(0,255,200,.02) 50%, rgba(80,120,255,.035));
  animation:flick 5.5s steps(30) infinite;
}
@keyframes flick{
  0%,100%{ opacity:.5 }
  47%{ opacity:.72 }
  48%{ opacity:.35 }
  49%{ opacity:.7 }
}
body.no-crt #crt{ display:none; }

/* ------------------------------------------------------------
   HUD
   ------------------------------------------------------------ */
#hud{
  position:fixed; top:0; left:0; right:0;
  z-index:400;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,11,.92) 0%, rgba(4,6,11,.55) 65%, rgba(4,6,11,0) 100%);
}
.hud-left{ min-width:0; }
.hud-name{
  font-family:var(--pix);
  font-size:11px;
  letter-spacing:.5px;
  color:var(--ink);
  text-shadow:0 2px 0 #000, 0 0 14px rgba(111,227,255,.4);
}
.hud-sub{
  font-family:var(--pix);
  font-size:7px;
  color:var(--cyan);
  margin-top:6px;
  opacity:.85;
}
.hud-bar-row{
  display:flex; align-items:center; gap:7px;
  margin-top:9px;
  font-family:var(--pix); font-size:8px; color:var(--gold);
}
.hud-tag{ color:var(--ink-faint); }
.bar{
  width:130px; height:10px;
  background:#101827;
  border:2px solid #2b3a55;
  position:relative;
  overflow:hidden;
}
.bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow:0 0 10px rgba(158,232,74,.55);
  transition:width .5s cubic-bezier(.2,.9,.3,1);
}
.hud-right{ text-align:right; display:flex; flex-direction:column; gap:8px; }
.hud-stat{
  font-family:var(--pix); font-size:8px;
  color:var(--ink-dim);
  white-space:nowrap;
}
.hud-stat span{ color:var(--ink); }
.hud-stat .ico{ color:var(--gold); margin-right:5px; }
.hud-stat .ico.shard{ color:var(--purple); }

/* ------------------------------------------------------------
   Minimap
   ------------------------------------------------------------ */
#minimap-wrap{
  position:fixed; right:16px; bottom:16px;
  z-index:400;
  padding:8px 8px 6px;
  background:rgba(7,10,17,.86);
  border:2px solid #2b3a55;
  box-shadow:0 0 0 2px #04060b, 0 6px 24px rgba(0,0,0,.6);
  pointer-events:none;
}
#minimap{ display:block; image-rendering:pixelated; }
/* on touch devices the on-screen buttons own the bottom corners */
body.touch-mode #minimap-wrap{
  top:auto; bottom:auto;
  top:96px; right:12px;
  transform-origin:top right;
}
.mm-label{
  font-family:var(--pix); font-size:6px;
  color:var(--ink-faint);
  text-align:center; margin-top:5px; letter-spacing:2px;
}

/* ------------------------------------------------------------
   Key hint strip
   ------------------------------------------------------------ */
#keyhint{
  position:fixed; left:16px; bottom:16px;
  z-index:400;
  display:flex; flex-wrap:wrap; gap:14px;
  font-family:var(--pix); font-size:7px;
  color:var(--ink-faint);
  pointer-events:none;
  max-width:46vw;
}
#keyhint b{ color:var(--cyan); font-weight:400; }

/* ------------------------------------------------------------
   Interact prompt
   ------------------------------------------------------------ */
#prompt{
  position:fixed; left:50%; bottom:88px;
  transform:translateX(-50%);
  z-index:410;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:rgba(7,10,17,.94);
  border:2px solid var(--cyan);
  box-shadow:0 0 0 2px #04060b, 0 0 22px rgba(111,227,255,.32);
  font-family:var(--pix); font-size:9px;
  color:var(--ink);
  animation:bob 1.6s ease-in-out infinite;
  pointer-events:none;
  white-space:nowrap;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,-5px) } }
.key{
  display:inline-block;
  min-width:20px; padding:4px 5px;
  background:var(--cyan); color:#04060b;
  font-family:var(--pix); font-size:8px;
  text-align:center;
  box-shadow:0 2px 0 #2b7f96;
}

/* ------------------------------------------------------------
   Toasts
   ------------------------------------------------------------ */
#toast-area{
  position:fixed; top:96px; left:50%;
  transform:translateX(-50%);
  z-index:420;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
  width:min(92vw, 520px);
}
.toast{
  font-family:var(--pix); font-size:8px;
  line-height:1.7;
  padding:11px 18px;
  background:rgba(7,10,17,.95);
  border-left:5px solid var(--accent);
  box-shadow:0 0 0 2px #04060b, 0 8px 26px rgba(0,0,0,.6);
  color:var(--ink);
  animation:toastin .4s ease-out, toastout .5s ease-in forwards;
  animation-delay:0s, 2.6s;
  text-align:center;
}
.toast .t-kick{ color:var(--accent); display:block; font-size:7px; margin-bottom:6px; letter-spacing:1px; }
@keyframes toastin{ from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:none } }
@keyframes toastout{ to{ opacity:0; transform:translateY(-10px) } }

/* ------------------------------------------------------------
   Screens & modals
   ------------------------------------------------------------ */
.screen{
  position:fixed; inset:0;
  z-index:600;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal{
  background:rgba(4,6,11,.82);
  backdrop-filter:blur(2px);
  animation:fadein .18s ease-out;
}
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }

.pixel-box{
  background:var(--bg-2);
  border:3px solid var(--accent);
  outline:3px solid #04060b;
  box-shadow:
    0 0 0 6px rgba(111,227,255,.10),
    0 18px 60px rgba(0,0,0,.75);
  position:relative;
}
.pixel-box::before,
.pixel-box::after{
  content:'';
  position:absolute;
  width:9px; height:9px;
  background:var(--accent);
}
.pixel-box::before{ top:-3px; left:-3px; }
.pixel-box::after{ bottom:-3px; right:-3px; }

.panel-box{
  width:min(780px, 100%);
  max-height:min(84vh, 760px);
  display:flex; flex-direction:column;
  animation:popin .22s cubic-bezier(.2,1.2,.4,1);
}
.panel-box.narrow{ width:min(560px, 100%); }
@keyframes popin{ from{ opacity:0; transform:translateY(18px) scale(.97) } to{ opacity:1; transform:none } }

.panel-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:20px 22px 16px;
  border-bottom:2px solid #22304a;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.panel-kicker{
  font-family:var(--pix); font-size:7px;
  color:var(--accent); letter-spacing:2px;
  margin-bottom:10px;
}
.panel-head h2{
  font-family:var(--pix);
  font-size:14px; line-height:1.5;
  margin:0; color:var(--ink);
  text-shadow:0 2px 0 #000;
}
.panel-head h2.big{ font-size:17px; }
.panel-sub{
  font-size:19px; color:var(--ink-dim);
  margin-top:9px; line-height:1.25;
}
.closebtn{
  flex:none;
  width:34px; height:34px;
  background:transparent;
  border:2px solid #2b3a55;
  color:var(--ink-dim);
  font-size:15px; cursor:pointer;
  font-family:var(--pix);
  transition:.15s;
}
.closebtn:hover{ border-color:var(--red); color:var(--red); background:rgba(255,95,95,.1); }

.panel-body{
  padding:22px;
  overflow-y:auto;
  font-size:20px;
  line-height:1.5;
  color:var(--ink-dim);
  scrollbar-width:thin;
  scrollbar-color:var(--accent) var(--bg-2);
}
.panel-body::-webkit-scrollbar{ width:10px; }
.panel-body::-webkit-scrollbar-track{ background:#0a101a; }
.panel-body::-webkit-scrollbar-thumb{ background:var(--accent); }
.panel-body.center{ text-align:center; }

.panel-foot{
  padding:12px 22px;
  border-top:2px solid #22304a;
  font-family:var(--pix); font-size:7px;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:9px;
}

/* ---- panel content blocks ---- */
.blk + .blk{ margin-top:22px; }
.blk h3{
  font-family:var(--pix); font-size:9px;
  color:var(--ink); margin:0 0 12px;
  letter-spacing:.5px;
}
.blk p{ margin:0 0 10px; }
.blk p:last-child{ margin-bottom:0; }

ul.bul{ list-style:none; margin:0; padding:0; }
ul.bul li{
  position:relative;
  padding-left:22px;
  margin-bottom:11px;
}
ul.bul li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:8px; height:8px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
ul.bul li b{ color:var(--ink); font-weight:400; }

.meta-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:16px;
}
.chip{
  font-family:var(--pix); font-size:7px;
  padding:7px 9px;
  background:#101827;
  border:2px solid #2b3a55;
  color:var(--ink-dim);
}
.chip.hot{ border-color:var(--accent); color:var(--accent); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--pix); font-size:7px;
  padding:8px 10px;
  background:#101827;
  border:2px solid var(--accent);
  color:var(--accent);
  opacity:.92;
}

/* stat bars */
.stat{ margin-bottom:14px; }
.stat-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--pix); font-size:8px;
  color:var(--ink); margin-bottom:7px;
}
.stat-top em{ font-style:normal; color:var(--ink-faint); font-size:7px; }
.stat-bar{
  height:14px; background:#101827;
  border:2px solid #2b3a55;
  display:flex; gap:2px; padding:2px;
}
.stat-bar span{
  flex:1;
  background:#1b2740;
}
.stat-bar span.on{
  background:var(--accent);
  box-shadow:0 0 7px var(--accent);
}

/* timeline entries */
.entry{
  border-left:3px solid #22304a;
  padding-left:18px;
  margin-bottom:24px;
  position:relative;
}
.entry:last-child{ margin-bottom:0; }
.entry::before{
  content:'';
  position:absolute; left:-8px; top:6px;
  width:13px; height:13px;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.entry h4{
  font-family:var(--pix); font-size:10px;
  color:var(--ink); margin:0 0 8px; line-height:1.5;
}
.entry .when{
  font-family:var(--pix); font-size:7px;
  color:var(--accent);
  margin-bottom:12px;
}

/* link buttons */
.linkgrid{ display:flex; flex-direction:column; gap:12px; }
a.linkbtn{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px;
  background:#101827;
  border:2px solid #2b3a55;
  color:var(--ink);
  text-decoration:none;
  font-size:19px;
  transition:.15s;
}
a.linkbtn:hover{
  border-color:var(--accent);
  background:rgba(111,227,255,.09);
  transform:translateX(5px);
}
a.linkbtn .lb-ico{
  font-family:var(--pix); font-size:12px;
  color:var(--accent);
  width:26px; text-align:center; flex:none;
}
a.linkbtn .lb-txt{ min-width:0; }
a.linkbtn .lb-txt b{
  display:block;
  font-family:var(--pix); font-size:8px;
  font-weight:400; margin-bottom:6px;
}
a.linkbtn .lb-txt span{ color:var(--ink-faint); font-size:17px; word-break:break-all; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.pbtn{
  font-family:var(--pix); font-size:9px;
  padding:15px 20px;
  background:var(--accent);
  color:#04060b;
  border:none;
  outline:3px solid #04060b;
  box-shadow:0 5px 0 #2b7f96, 0 5px 0 3px #04060b;
  cursor:pointer;
  letter-spacing:.5px;
  transition:transform .08s, box-shadow .08s;
}
.pbtn:hover{ filter:brightness(1.12); }
.pbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 #2b7f96, 0 1px 0 3px #04060b; }
.pbtn.ghost{
  background:transparent;
  color:var(--ink-dim);
  outline:3px solid #2b3a55;
  box-shadow:none;
}
.pbtn.ghost:hover{ color:var(--cyan); outline-color:var(--cyan); }
.pbtn.danger{ background:#3a1b22; color:var(--red); outline-color:#04060b; box-shadow:0 5px 0 #1d0d11, 0 5px 0 3px #04060b; }

.menu-grid{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.menu-grid .pbtn{ text-align:left; }
.menu-grid .pbtn.ghost{
  background:#101827;
  color:var(--ink);
  outline:3px solid #2b3a55;
  box-shadow:0 4px 0 #070b12, 0 4px 0 3px #04060b;
}
.menu-grid .pbtn.ghost:hover{ color:var(--cyan); outline-color:var(--cyan); background:#16233a; }
.menu-grid .pbtn.ghost:active{ transform:translateY(3px); box-shadow:0 1px 0 #070b12, 0 1px 0 3px #04060b; }

.controls-list h3{
  font-family:var(--pix); font-size:8px;
  color:var(--accent); margin:0 0 14px; letter-spacing:2px;
}
.controls-list ul{ list-style:none; margin:0; padding:0; }
.controls-list li{ margin-bottom:9px; }
.controls-list b{
  font-family:var(--pix); font-size:7px;
  color:var(--ink); font-weight:400;
  background:#101827; border:2px solid #2b3a55;
  padding:4px 6px; margin-right:5px;
}

/* ------------------------------------------------------------
   Title screen
   ------------------------------------------------------------ */
#title{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(111,227,255,.10), transparent 60%),
    linear-gradient(180deg, #070a11, #04060b);
  flex-direction:column;
  z-index:700;
}
.title-inner{
  text-align:center;
  max-width:720px;
  width:100%;
}
.boot{
  font-family:var(--term);
  font-size:18px;
  color:var(--green);
  text-align:left;
  min-height:118px;
  margin-bottom:24px;
  white-space:pre-wrap;
  line-height:1.35;
  text-shadow:0 0 10px rgba(158,232,74,.45);
}
.boot .cur{ animation:blink .9s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

.title-art{ opacity:0; transition:opacity .6s .1s; }
.title-art.show{ opacity:1; }
.title-sub{
  font-family:var(--pix); font-size:8px;
  color:var(--cyan); letter-spacing:5px;
  margin-bottom:20px;
}
.title-main{
  font-family:var(--pix);
  font-size:clamp(20px, 5.4vw, 42px);
  line-height:1.45;
  margin:0 0 20px;
  color:var(--ink);
  text-shadow:
    0 4px 0 #04060b,
    4px 4px 0 rgba(255,107,157,.55),
    -4px 4px 0 rgba(111,227,255,.55),
    0 0 40px rgba(111,227,255,.30);
}
.title-main span{ color:var(--gold); }
.title-role{
  font-family:var(--pix); font-size:8px;
  color:var(--ink-dim); line-height:1.9;
  margin-bottom:38px;
}
.title-cta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; transition:opacity .5s .5s;
}
.title-cta.show{ opacity:1; }
#start-btn{ animation:pulse 1.9s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.3) } }
.title-help{
  margin-top:30px;
  font-size:19px; color:var(--ink-faint);
  opacity:0; transition:opacity .5s .7s;
}
.title-help.show{ opacity:1; }

/* ------------------------------------------------------------
   Ending
   ------------------------------------------------------------ */
.ending-badge{
  font-size:52px; color:var(--gold);
  text-shadow:0 0 30px rgba(255,217,61,.65);
  margin-bottom:14px;
  animation:spin 4s linear infinite;
}
@keyframes spin{ 0%{ transform:rotate(0) scale(1) } 50%{ transform:rotate(180deg) scale(1.14) } 100%{ transform:rotate(360deg) scale(1) } }
.ending-copy{ max-width:520px; margin:18px auto 24px; }
.ending-stats{
  display:flex; justify-content:center; gap:32px; flex-wrap:wrap;
  margin-bottom:26px;
}
.ending-stats div{ font-family:var(--pix); font-size:8px; color:var(--ink-faint); line-height:2.2; }
.ending-stats div b{ display:block; font-size:16px; color:var(--gold); font-weight:400; }
.ending-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.ending-links a{
  font-family:var(--pix); font-size:8px;
  padding:12px 14px;
  border:2px solid var(--accent);
  color:var(--accent); text-decoration:none;
  transition:.15s;
}
.ending-links a:hover{ background:var(--accent); color:#04060b; }

/* ------------------------------------------------------------
   Plain CV mode
   ------------------------------------------------------------ */
.doc{
  position:fixed; inset:0;
  z-index:800;
  background:#070a11;
  overflow-y:auto;
  display:block;
  padding:0;
}
.doc-inner{
  max-width:820px;
  margin:0 auto;
  padding:64px 26px 140px;
  font-size:20px;
  line-height:1.55;
  color:var(--ink-dim);
}
.doc-inner h1{
  font-family:var(--pix); font-size:clamp(15px,3.4vw,22px);
  color:var(--ink); margin:0 0 16px; line-height:1.5;
}
.doc-inner .doc-contact{
  font-size:19px; color:var(--cyan);
  padding-bottom:26px; margin-bottom:34px;
  border-bottom:2px solid #22304a;
}
.doc-inner .doc-contact a{ color:var(--cyan); }
.doc-inner h2{
  font-family:var(--pix); font-size:10px;
  color:var(--gold); letter-spacing:2px;
  margin:44px 0 20px;
  padding-bottom:12px;
  border-bottom:2px solid #22304a;
}
.doc-inner h3{
  font-family:var(--pix); font-size:9px;
  color:var(--ink); margin:0 0 8px; line-height:1.6;
}
.doc-inner .when{ font-family:var(--pix); font-size:7px; color:var(--cyan); margin-bottom:12px; }
.doc-inner .entry{ border-left:3px solid #22304a; }
.floatbtn{
  position:fixed; left:50%; bottom:26px;
  transform:translateX(-50%);
  z-index:820;
}
.floatbtn:active{ transform:translate(-50%,4px); }

.noscript{
  padding:60px 26px; max-width:700px; margin:0 auto;
  font-size:20px; color:var(--ink-dim);
}
.noscript h1{ font-family:var(--pix); font-size:18px; color:var(--ink); }
.noscript a{ color:var(--cyan); }

/* ------------------------------------------------------------
   Touch controls
   ------------------------------------------------------------ */
#touch{
  position:fixed; inset:auto 0 0 0;
  z-index:450;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 20px 24px;
  pointer-events:none;
}
#touch .dpad{
  position:relative;
  width:156px; height:156px;
  pointer-events:auto;
}
.dbtn, .abtn{
  position:absolute;
  background:rgba(19,28,44,.88);
  border:2px solid #3a4d70;
  color:var(--cyan);
  font-size:17px;
  font-family:var(--pix);
  cursor:pointer;
  user-select:none;
  touch-action:none;
}
.dbtn{ width:52px; height:52px; }
.dbtn:active, .abtn:active{ background:var(--cyan); color:#04060b; }
.dbtn.up   { left:52px; top:0; }
.dbtn.down { left:52px; top:104px; }
.dbtn.left { left:0; top:52px; }
.dbtn.right{ left:104px; top:52px; }

#touch .abtns{
  position:relative;
  width:130px; height:130px;
  pointer-events:auto;
}
.abtn{ width:76px; height:76px; border-radius:50%; right:0; bottom:0; font-size:15px; }
.abtn.small{ width:52px; height:52px; right:84px; bottom:12px; font-size:11px; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 860px){
  body.touch-mode #minimap-wrap{ top:88px; }
  body.touch-mode #toast-area{ top:206px; }
  .hud-name{ font-size:9px; }
  .hud-sub{ font-size:6px; }
  .bar{ width:96px; }
  .hud-stat{ font-size:7px; }
  #keyhint{ display:none !important; }
  #minimap-wrap{ transform:scale(.8); transform-origin:bottom right; }
  #prompt{ bottom:196px; font-size:8px; }
  .panel-head h2{ font-size:11px; }
  .panel-body{ font-size:19px; padding:18px; }
  .screen{ padding:12px; }
  .panel-box{ max-height:88vh; }
  .title-main{ text-shadow:0 3px 0 #04060b, 3px 3px 0 rgba(255,107,157,.5), -3px 3px 0 rgba(111,227,255,.5); }
  .boot{ font-size:16px; min-height:100px; }
}
@media (max-width: 520px){
  #minimap-wrap{ transform:scale(.68); }
  .title-role{ font-size:7px; }
  .title-sub{ letter-spacing:3px; font-size:7px; }
  .pbtn{ font-size:8px; padding:13px 15px; }
  #touch .dpad{ width:140px; height:140px; }
  .dbtn{ width:46px; height:46px; }
  .dbtn.up{ left:47px; top:0 } .dbtn.down{ left:47px; top:94px }
  .dbtn.left{ left:0; top:47px } .dbtn.right{ left:94px; top:47px }
}

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