/* SHIMENAWA — moldura de MMO clássico por cima do tema de pergaminho */
#title{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,214,140,.28), transparent 42%),
    linear-gradient(180deg, rgba(18,28,48,.2), rgba(18,10,16,.55));
}
.title-box{
  background: linear-gradient(#4a3424, #2a1c14 70%, #1c120e);
  border: 4px solid #f0d48a;
  box-shadow: inset 0 0 0 3px #6a4424, inset 0 0 0 6px #c9a15a, 0 10px 0 #120c10;
  padding: 16px 22px 18px;
  max-width: 96vw;
}
.tagline{ background: transparent; color: #ffe7b0; text-shadow: 0 2px 0 #1b120c; }
.title-foot{ background: transparent; color: #f0e2c8; }
#create{ background: rgba(16,10,18,.72); }
.create-box, .win-like{
  background:
    linear-gradient(#f7efd8, #efe2c4);
  border: 3px solid #3a2414;
  box-shadow: inset 0 0 0 2px #e7c98a, inset 0 0 0 4px #8a5a28, 4px 4px 0 rgba(18,10,16,.45);
}
.win-title{
  background: linear-gradient(#8a5a2c, #5c3818);
  color: #fff6d8;
  border-bottom: 3px solid #3a2414;
  text-shadow: 1px 1px 0 #2a160c;
  letter-spacing: .3px;
}
.win-title .x{ background: #c44832; color: #fff; }
#hud, .win, #tip{
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
#basic, #mini, #chat, #hotbar, .win.win-like{
  background: rgba(16, 14, 24, 0.78);
  color: #f6edd8;
  border: 1px solid #e6c36a;
  box-shadow: inset 0 0 0 1px #5c4324, 0 0 0 1px #120c10;
}
#basic{ width: 248px; }
.b-name b{ color: #fff6d8; font-size: 16px; }
.b-name span{ color: #f0d48a; }
#basic .lbl, #basic .b-foot{ color: #e7d7b8; }
.pbar{ height: 12px; border: 1px solid #e6c36a; background: #1a1420; box-shadow: none; }
.pbar em{ line-height: 11px; font-size: 11px; }
#mini{ background: rgba(16, 14, 24, 0.78); }
.mini-title, .mini-coord{ color: #f6edd8; font-size: 13px; }
#hotbar{
  background: rgba(16, 14, 24, 0.82);
  border: 1px solid #e6c36a;
  box-shadow: inset 0 0 0 1px #5c4324;
  padding: 4px;
  gap: 3px;
}
.hs{
  width: 40px; height: 40px;
  background: rgba(255, 248, 230, 0.92);
  border: 1px solid #e6c36a;
  box-shadow: inset 0 0 0 1px #8a5a28;
}
.hs canvas{ left: 4px; top: 4px; }
.hs .k{ color: #fff6d8; text-shadow: 1px 1px 0 #2a160c; font-size: 10px; }
#chat{
  width: min(420px, 46vw);
  background: rgba(16, 14, 24, 0.78);
  border: 1px solid #e6c36a;
  box-shadow: inset 0 0 0 1px #5c4324;
}
#chat-log{ font-size: 13px; }
#chat-in{ background: rgba(10, 8, 16, 0.9); border: 1px solid #e6c36a; color: #fff6d8; }
.win.win-like .win-title{
  background: rgba(42, 28, 16, 0.92);
  border-bottom: 1px solid #e6c36a;
}
.win .body, .win .infoline, .win .dlg .txt{ color: #f6edd8; }
.win .sect, .win .dlg .who{ color: #f0d48a; border-color: #6a5438; }
.win .cell, .win .slot{ background: rgba(255, 248, 230, 0.94); border-width: 1px; color: #2a1e1a; }
.win .tabs button{ border-width: 1px; }
.cell, .slot{
  background: linear-gradient(#fffaf0, #f0e0c0);
  box-shadow: inset 0 0 0 1px #e7c98a;
}
#preview{
  background:
    linear-gradient(#8ec8ea, #8ec8ea 42%, #7cb35a 42%, #6aa24c 100%);
  box-shadow: inset 0 0 0 2px #3a2414;
}
#eq-prev{
  background: linear-gradient(#8ec8ea 0 46%, #7cb35a 46% 100%);
}
.btn{
  border-color: #3a2414;
  box-shadow: inset -2px -2px 0 #a87420, inset 2px 2px 0 #fff3c4, 2px 2px 0 #1b120c;
}
@media (max-width: 720px){
  #basic{ width: min(262px, calc(100vw - 16px)); }
  #chat{ width: min(420px, calc(100vw - 16px)); }
  .create-body{ flex-direction: column; }
  .create-left{ width: auto; }
  #hotbar{ max-width: calc(100vw - 12px); overflow-x: auto; }
}