/* =====================================
   WEBP TOOL
===================================== */

/* ------------------------
   WEBP TOOL
------------------------- */

.webp-tool-page{
  padding-top:78px;
}

.webp-drop-zone{
  display:block;
  text-align:center;
  color:var(--ink);
}

.webp-select-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:22px;
}

.webp-big-text{
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  font-size:42px;
  font-weight:900;
  line-height:1.25;
}

.webp-sub-text{
  font-family:"Press Start 2P","DotGothic16",monospace;
  font-size:13px;
  color:var(--orange);
}

.webp-file-name{
  max-width:100%;
  border:0;
  padding:0;
  font-size:13px;
  word-break:break-all;
  background:transparent;
  font-family:"DotGothic16","IBM Plex Mono",monospace;
  color:#111;
}

.webp-side{
  font-family:"DotGothic16","IBM Plex Mono",monospace;
  text-align:center;
}

.webp-side-title{
  font-size:16px;
  margin-bottom:8px;
}

.webp-mode{
  display:block;
  width:100%;
  border:3px solid #111;
  background:#fff;
  margin-top:8px;
  padding:6px 2px;
  color:#111;
  font-size:14px;
}

.webp-mode.active{
  color:var(--orange);
}

.webp-range{
  width:100%;
  margin:14px 0;
  accent-color:var(--orange);
}

.webp-name-input{
  width:100%;
  border:3px solid #111;
  background:#fff;
  padding:10px;
  font-family:"IBM Plex Mono","Noto Sans JP",monospace;
  font-size:16px;
  margin-bottom:12px;
}

#webpConvert,
.webp-download{
  display:inline-block;
  margin-top:8px;
  border:3px solid #111;
  background:#fff;
  padding:6px 10px;
  color:#111;
  text-decoration:none;
  font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
  font-size:12px;
}

.webp-download{
  margin-left:8px;
  color:var(--orange);
}
.webp-status .game-text{
    font-size:14px;
    line-height:1.4;
}
.webp-engineer{
    position:absolute;
    right:-8px;
    bottom:220px;
    width:145px;
    z-index:30;

    image-rendering:pixelated;

    pointer-events:none;
    user-select:none;
}
.webp-engineer{
    position:absolute;
    right:-8px;
    bottom:230px;
    width:145px;
    z-index:30;
}
.webp-preview{
  max-width:100%;
  max-height:240px;
  object-fit:contain;
  margin-bottom:6px;
  image-rendering:auto;
}
.webp-select-inner{
  position:relative;
}

.webp-preview-info{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  z-index:5;

  border:2px solid #111;
  background:rgba(255,255,255,.86);
  padding:6px 8px;

  font-family:"DotGothic16","IBM Plex Mono",monospace;
  font-size:12px;
  line-height:1.25;
  text-align:left;
}

.toast{
    position:fixed;

    left:50%;
    bottom:26px;

    transform:translate(-50%,12px);

    padding:10px 18px;

    background:#ff7433;
    color:#111;

    border:4px solid #111;

    font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
    font-size:12px;

    box-shadow:5px 5px 0 #111;

    opacity:0;

    transition:.25s;

    z-index:9999;

    pointer-events:none;
}

.toast.show{

    opacity:1;

    transform:translate(-50%,0);

}