/* ============================================================
   杭州探索録
   武林夜市
============================================================ */


/* ============================================================
   RESET
============================================================ */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;

  min-height: 100%;

}


html {

  background: #08070b;

}


body {

  padding: 22px;

  display: flex;

  justify-content: center;

  color: #f6ead6;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    "Microsoft YaHei",
    system-ui,
    sans-serif;

  background:

    radial-gradient(
      circle at 50% 0%,
      #35233d 0%,
      #17121d 42%,
      #08070b 100%
    );

}



/* ============================================================
   GAME
============================================================ */

.game-shell {

  width: min(
    1120px,
    100%
  );

}



/* ============================================================
   HEADER
============================================================ */

.game-header {

  display: flex;

  justify-content: space-between;

  align-items: end;

  padding: 0 5px 12px;

}


.eyebrow {

  margin: 0 0 3px;

  color: #d3a65f;

  font-size: 11px;

  letter-spacing: .28em;

}


.game-header h1 {

  margin: 0;

  color: #fff0cf;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Microsoft YaHei",
    serif;

  font-size: clamp(
    27px,
    4vw,
    40px
  );

  letter-spacing: .15em;

}


.header-right {

  display: flex;

  gap: 17px;

  color: #a89b89;

  font-size: 11px;

}


#rankHeader {

  color: #e1bc78;

}


#areaHeader {

  color: #c39a60;

}


#collectionHeader {

  color: #e3b35f;

}



/* ============================================================
   GAME FRAME
============================================================ */

.game-frame {

  position: relative;

  width: 100%;

  overflow: hidden;

  background: #08070b;

  border: 3px solid #705235;

  outline: 2px solid #171018;

  box-shadow:

    0 18px 55px
    rgba(0,0,0,.62),

    inset 0 0 0 1px
    #a47a49;

}


canvas {

  display: block;

  width: 100%;

  height: auto;

  background: #141019;

  image-rendering: pixelated;

}



/* ============================================================
   FOOTER
============================================================ */

.game-footer {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 18px;

  padding: 12px 4px;

  color: #9f927f;

  font-size: 12px;

}


.footer-location {

  margin-left: auto;

  color: #cba66c;

}



/* ============================================================
   KEY
============================================================ */

.key {

  display: inline-flex;

  min-width: 27px;

  height: 25px;

  padding: 0 6px;

  margin-right: 3px;

  justify-content: center;

  align-items: center;

  background: #201b22;

  border: 1px solid #655240;

  border-radius: 3px;

  color: #e8c887;

  font-size: 11px;

  font-weight: 700;

}



/* ============================================================
   HIDDEN
============================================================ */

.hidden {

  display: none !important;

}



/* ============================================================
   AREA
============================================================ */

.area-banner {

  position: absolute;

  top: 42px;

  left: 50%;

  min-width: 330px;

  padding: 14px 30px 15px;

  transform: translateX(-50%);

  text-align: center;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(15,12,17,.93) 15%,
      rgba(15,12,17,.96) 85%,
      transparent
    );

  border-top:
    1px solid
    rgba(216,173,98,.38);

  border-bottom:
    1px solid
    rgba(216,173,98,.38);

  z-index: 40;

}


.area-banner small {

  display: block;

  margin-bottom: 3px;

  color: #a78b63;

  font-size: 9px;

  letter-spacing: .4em;

}


.area-banner strong {

  display: block;

  color: #f4dca8;

  font-family:
    "Yu Mincho",
    serif;

  font-size: 23px;

  letter-spacing: .14em;

}


.area-banner span {

  display: block;

  margin-top: 4px;

  color: #968b80;

  font-size: 10px;

}



/* ============================================================
   INTERACTION
============================================================ */

.interaction-hint {

  position: absolute;

  left: 50%;

  bottom: 26px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 7px 12px;

  background:
    rgba(13,11,16,.9);

  border:
    1px solid
    #73583c;

  border-radius: 4px;

  color: #e9d6b4;

  font-size: 12px;

  z-index: 45;

}



/* ============================================================
   DIALOGUE
============================================================ */

.dialogue-box {

  position: absolute;

  left: 4%;

  right: 4%;

  bottom: 24px;

  min-height: 128px;

  display: flex;

  padding: 14px 18px;

  gap: 16px;

  background:

    linear-gradient(
      180deg,
      rgba(31,25,31,.98),
      rgba(14,12,17,.98)
    );

  border:
    2px solid
    #866643;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.55);

  z-index: 100;

}


.portrait {

  flex: 0 0 82px;

  display: flex;

  align-items: center;

  justify-content: center;

}


#portraitFace {

  width: 70px;

  height: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #76552f;

  border:
    2px solid
    #b68b56;

  color: #fff0d0;

  font-size: 25px;

}


.dialogue-content {

  position: relative;

  flex: 1;

  padding-bottom: 20px;

}


.speaker-name {

  margin-bottom: 7px;

  color: #e5b86f;

  font-weight: 700;

  font-size: 14px;

}


.dialogue-text {

  color: #f4ead9;

  font-size: 15px;

  line-height: 1.8;

}


.dialogue-footer {

  position: absolute;

  right: 0;

  bottom: 0;

  color: #817568;

  font-size: 10px;

}



/* ============================================================
   WORD GET
============================================================ */

.word-get {

  position: absolute;

  left: 50%;

  top: 50%;

  width: min(
    430px,
    calc(100% - 40px)
  );

  padding: 30px;

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

  text-align: center;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(155,99,47,.24),
      transparent 55%
    ),

    linear-gradient(
      180deg,
      #241a1b,
      #100d12
    );

  border:
    2px solid
    #a67a43;

  box-shadow:
    0 18px 60px
    rgba(0,0,0,.72);

  z-index: 200;

}


.word-get-label {

  color: #d59e54;

  font-size: 11px;

  letter-spacing: .28em;

}


.word-get-chinese {

  margin-top: 14px;

  color: #ffe0a2;

  font-size: 43px;

  font-weight: 700;

}


.word-get-pinyin {

  margin-top: 4px;

  color: #c7aa79;

  font-size: 15px;

}


.word-get-meaning {

  margin-top: 13px;

  color: #eee3d1;

  font-size: 15px;

}


.word-get-category {

  margin-top: 11px;

  color: #9c8e7c;

  font-size: 11px;

}


.word-get-progress {

  margin-top: 18px;

  color: #c69a59;

  font-size: 11px;

}


.word-get-close {

  margin-top: 20px;

  color: #776d63;

  font-size: 10px;

}



/* ============================================================
   RANK UP
============================================================ */

.rank-up-panel {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    rgba(5,5,8,.82);

  text-align: center;

  z-index: 250;

}


.rank-small {

  color: #ad8d58;

  font-size: 10px;

  letter-spacing: .35em;

}


.rank-title {

  margin-top: 9px;

  color: #d7b06e;

  font-size: 15px;

}


.new-rank-name {

  margin-top: 15px;

  color: #ffe3a5;

  font-size: 36px;

}


.rank-close {

  margin-top: 26px;

  color: #81766b;

  font-size: 10px;

}



/* ============================================================
   COMPLETION
============================================================ */

.completion-panel {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:
    rgba(4,5,8,.93);

  z-index: 300;

}


.completion-glow {

  position: absolute;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(190,130,54,.18),
      transparent 65%
    );

}


.completion-content {

  position: relative;

  width: min(
    600px,
    90%
  );

  text-align: center;

}


.completion-small {

  color: #9c8058;

  font-size: 10px;

  letter-spacing: .34em;

}


.completion-content h2 {

  margin: 13px 0 3px;

  color: #f8d99a;

  font-size: 36px;

}


.completion-cn {

  color: #b99862;

}


.completion-count {

  margin-top: 14px;

  color: #fff0c8;

  font-size: 24px;

}


.completion-divider {

  width: 100px;

  height: 1px;

  margin: 18px auto;

  background: #755c3d;

}


.completion-content p {

  color: #cfc3b2;

  line-height: 1.9;

  font-size: 13px;

}


.completion-title-label {

  margin-top: 18px;

  color: #8d7d69;

  font-size: 10px;

}


.completion-title-name {

  margin-top: 5px;

  color: #e9c77e;

  font-size: 25px;

}


.completion-unlock {

  margin-top: 20px;

  color: #ba9a67;

  font-size: 11px;

}


.completion-close {

  margin-top: 23px;

  color: #706860;

  font-size: 10px;

}



/* ============================================================
   LIBRARY
============================================================ */

.library-panel {

  position: absolute;

  inset: 0;

  padding: 24px;

  background:
    rgba(6,6,10,.96);

  z-index: 400;

}


.library-window {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  padding: 22px;

  background:

    linear-gradient(
      180deg,
      #1d181d,
      #0e0c11
    );

  border:
    1px solid
    #73583b;

}


.library-top {

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

}


.library-eyebrow {

  color: #9c7d52;

  font-size: 9px;

  letter-spacing: .3em;

}


.library-top h2 {

  margin: 5px 0 4px;

  color: #f0d29b;

}


.library-top p {

  margin: 3px 0;

  color: #9d8f7b;

  font-size: 11px;

}


.library-controls {

  color: #81766a;

  font-size: 10px;

}


.library-tabs {

  display: flex;

  gap: 7px;

  margin-top: 16px;

  padding-bottom: 12px;

  overflow-x: auto;

  border-bottom:
    1px solid
    #463829;

}


.library-body {

  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(220px,.8fr)
    minmax(0,1.4fr);

  gap: 18px;

  padding-top: 16px;

}


.library-list {

  overflow-y: auto;

  padding-right: 8px;

}


.library-detail {

  overflow-y: auto;

  padding: 18px;

  background:
    rgba(255,255,255,.018);

  border:
    1px solid
    #3d332b;

}



/* ============================================================
   FADE
============================================================ */

.fade-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0;

  background: #050508;

  transition:
    opacity .45s ease;

  z-index: 1000;

}


.fade-layer.active {

  opacity: 1;

}



/* ============================================================
   NEW TITLE SCREEN
============================================================ */

.new-title-screen {

  position: fixed;

  inset: 0;

  z-index: 50000;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: #040711;

  opacity: 1;

  visibility: visible;

  transition:
    opacity .9s ease,
    visibility .9s ease;

}


.new-title-screen.hide {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



/* ============================================================
   BLURRED BACKGROUND
============================================================ */

.new-title-bg {

  position: absolute;

  inset: -60px;

  background-image:
    url("assets/title/wulin-title.png");

  background-size: cover;

  background-position: center;

  filter:
    blur(30px)
    brightness(.4)
    saturate(.9);

  transform:
    scale(1.14);

}


.new-title-dark {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 50% 45%,
      transparent 20%,
      rgba(2,4,10,.3) 60%,
      rgba(1,2,6,.82) 100%
    );

}



/* ============================================================
   TITLE ART
============================================================ */

.new-title-art-wrap {

  position: relative;

  height: min(
    94vh,
    900px
  );

  max-width: 94vw;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #050812;

  border:
    1px solid
    rgba(225,183,101,.45);

  box-shadow:

    0 35px 100px
    rgba(0,0,0,.8),

    0 0 50px
    rgba(202,129,51,.08);

}


.new-title-art {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  user-select: none;

}


.new-title-art-shade {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      transparent 0%,
      transparent 51%,
      rgba(3,4,9,.05) 59%,
      rgba(3,4,9,.78) 100%
    );

}



/* ============================================================
   MENU
============================================================ */

.new-title-menu {

  position: absolute;

  z-index: 10;

  left: 50%;

  bottom: 3%;

  width: min(
    500px,
    86%
  );

  transform:
    translateX(-50%);

  padding:
    12px 20px 11px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(5,7,13,.88) 12%,
      rgba(5,7,13,.96) 50%,
      rgba(5,7,13,.88) 88%,
      transparent
    );

}


.new-title-menu-head {

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 10px;

  margin-bottom: 4px;

}


.new-title-menu-head span {

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(220,174,92,.55)
    );

}


.new-title-menu-head span:last-child {

  transform:
    scaleX(-1);

}


.new-title-menu-head small {

  color:
    rgba(224,188,120,.7);

  font-size: 8px;

  letter-spacing: .3em;

}



/* ============================================================
   OPTION
============================================================ */

.new-title-option {

  position: relative;

  width: 100%;

  min-height: 58px;

  display: grid;

  grid-template-columns:
    24px 160px 1fr;

  align-items: center;

  gap: 6px;

  padding: 5px 10px;

  border: 0;

  outline: 0;

  background: transparent;

  color: #afa596;

  cursor: pointer;

  text-align: left;

  font-family:
    inherit;

}


.new-title-option::before {

  content: "";

  position: absolute;

  inset: 2px 0;

  opacity: 0;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(128,28,25,.38) 17%,
      rgba(128,28,25,.62) 50%,
      rgba(128,28,25,.38) 83%,
      transparent
    );

  border-top:
    1px solid
    rgba(239,184,88,.2);

  border-bottom:
    1px solid
    rgba(239,184,88,.2);

  transition:
    opacity .18s;

}


.new-title-option.selected::before {

  opacity: 1;

}


.new-title-arrow {

  position: relative;

  z-index: 2;

  opacity: 0;

  color: #ffd27d;

  transform:
    translateX(-6px);

  transition:
    .18s;

}


.new-title-option.selected
.new-title-arrow {

  opacity: 1;

  transform:
    translateX(0);

}


.new-title-option-text {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

}


.new-title-option-text strong {

  color: #d6c5a8;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 17px;

  letter-spacing: .08em;

}


.new-title-option-text small {

  margin-top: 2px;

  color: #736b62;

  font-size: 7px;

  letter-spacing: .2em;

}


.new-title-description {

  position: relative;

  z-index: 2;

  color: #82796d;

  font-size: 9px;

}


.new-title-option.selected
.new-title-option-text strong {

  color: #ffe0a0;

  text-shadow:
    0 0 10px
    rgba(255,175,70,.3);

}


.new-title-option.selected
.new-title-option-text small {

  color: #c99e5d;

}


.new-title-option.selected
.new-title-description {

  color: #c2aa82;

}



/* ============================================================
   CONTROLS
============================================================ */

.new-title-controls {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 7px;

  color: #746d64;

  font-size: 8px;

}


.new-title-controls span {

  padding: 2px 5px;

  color: #b09261;

  border:
    1px solid
    rgba(181,145,87,.32);

  background:
    rgba(0,0,0,.3);

}



/* ============================================================
   LOCATION
============================================================ */

.new-title-location {

  position: absolute;

  left: 16px;

  bottom: 10px;

  color:
    rgba(231,198,139,.48);

  font-size: 7px;

  letter-spacing: .15em;

}


.new-title-location small {

  display: block;

  margin-top: 2px;

  color:
    rgba(190,177,156,.3);

  font-size: 6px;

}



/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:800px){

  body {

    padding: 10px;

  }


  .game-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

  }


  .header-right {

    flex-wrap: wrap;

    gap: 7px 13px;

  }


  .new-title-art-wrap {

    width: min(
      100vw,
      100vh
    );

    height: auto;

    max-width: 100vw;

  }


  .new-title-menu {

    width: 92%;

  }


  .new-title-option {

    grid-template-columns:
      20px 145px 1fr;

  }


  .new-title-option-text strong {

    font-size: 14px;

  }


  .new-title-description {

    font-size: 8px;

  }


  .new-title-location {

    display: none;

  }

}


@media(max-height:650px){

  .new-title-art-wrap {

    height: 98vh;

  }


  .new-title-option {

    min-height: 45px;

  }


  .new-title-controls {

    display: none;

  }

}