html, .fullscreen {

    /*font-size:62.5%; */
    font-size:86%;
  }

:root {
  --font-pirates: pirates, Georgia, serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-pirates);
}

.titolo {
  font-family: var(--font-pirates);
}

#header .titolo,
#button_bar .titolo {
  font-size: 2rem;
  line-height: 1.1;
}


@font-face {
  font-family: pirates;
  src: url(/temi/pirati/pirates_of_the_caraibean_font.ttf);
  font-display: block; /* Fix flickering */
}



/* ---------------------------------- PAGINA ENIGMA ----------------------------------------*/

body {
  background-color: #c9a86e;
  background-image: url(/temi/pirati/map_bg_sand-v2.webp);
}

#button_bar .titolo {
  font-weight: normal;
}

#header .enigma_corrente_titolo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  min-width: 0;
  height: 44px;
  max-height: 44px;
  margin: 0 6px;
  padding: 2px 8px;
  overflow: hidden;
  font-size: clamp(1.55rem, 5vw, 2.4rem);
  line-height: 1;
  color: #fff0bd;
  background:
    repeating-linear-gradient(3deg, rgba(255,255,255,.035) 0 2px, rgba(45,20,8,.08) 2px 4px),
    linear-gradient(180deg, #80502b 0%, #4c2917 52%, #6b3f20 100%);
  border: 2px solid #3b2112;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(222,173,85,.65), inset 0 2px 5px rgba(255,220,145,.2), 0 2px 3px rgba(35,18,7,.35);
  text-shadow: 0 2px 1px #241005;
}

/* Materiali diversi rendono Zaino e Aiuti riconoscibili a colpo d'occhio. */
#tools.userbar_panel {
  color: #2d1709;
  background:
    repeating-linear-gradient(0deg, rgba(91,52,20,.07) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #d9b873 0%, #bc8d48 100%);
  border-color: #745024;
  box-shadow: inset 0 1px 0 rgba(255,240,188,.65), inset 0 -2px 5px rgba(88,49,17,.16);
}

#hints.userbar_panel {
  color: #fff1c4;
  background:
    repeating-linear-gradient(2deg, rgba(255,255,255,.035) 0 2px, rgba(62,25,6,.05) 2px 5px),
    linear-gradient(180deg, #a96324 0%, #7c3f18 100%);
  border-color: #4f2913;
  box-shadow: inset 0 1px 0 rgba(255,205,112,.45), inset 0 -2px 5px rgba(50,20,5,.24);
  text-shadow: 0 1px 1px #3b1908;
}

#tools .testo {
  font-size: 1.5rem;
  font-weight:normal;
}

#hints .testo {
  font-size: 1.5rem;
  font-weight:normal;
}

#wallet .testo {
  font-size: 1.5rem;
  font-weight:normal;
}



/* ----------------------------------------- MESSAGGI ----------------------------------------- */

.dl_messaggio {

  font-size:1.8rem;
  box-sizing: border-box;
  border: clamp(28px, 8vmin, 48px) solid transparent;
  border-image-source: url('/images/pergamena-dialog-v2.png');
  border-image-slice: 150 110 150 110 fill;
  border-image-repeat: round;

  background-color: transparent;
  background-image: none;
}

.dl_messaggio .titolo {
  font-size: 2.3rem;
  line-height: 1.1;
}

.dl_messaggio.dl_acquisto {
  height: auto;
  min-height: 240px;
  max-height: 72%;
  border-width: clamp(18px, 6vmin, 32px);
}

.dl_messaggio.dl_acquisto .titolo,
.dl_messaggio.dl_acquisto .testo,
.dl_messaggio.dl_acquisto .bottoni {
  flex-grow: 0;
}

.dl_messaggio.dl_acquisto .testo {
  padding: 8px 4px;
  font-size: clamp(1.45rem, 5.5vw, 1.8rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dl_messaggio:focus,
.dl_messaggio:focus-visible {
  outline: none;
}


.dl_messaggio .image {

  padding: 0;
  border-radius: 15%;
  /*border: 6px solid white;
  background-color: lightGray;*/

}



.dl_messaggio .bottone_no {


  font-size: 1.6rem;
  border-radius: 5px;
  background-color: none;
}

.dl_messaggio .bottone_si {


  font-size: 1.6rem;
  border-radius: 5px;
  background-color: none;
}



/*------------------------------    CHAT ----------------------- */


.dl_chat {
  border: clamp(28px, 8vmin, 45px) solid transparent;
  border-image-source: url('/images/pergamena-dialog-v2.png');
  border-image-slice: 150 110 150 110 fill;
  border-image-repeat: round;
  background-color: transparent;
}