/* ExtremePlay web - pieces of the game's own UI: buttons, server list entry, Edit Server Info screen,
   inventory + item tooltip, chat, advancement toast, written book page. */

/* ---------- game button ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 22px;
  font-family: var(--f-pixel); font-size: 22px; letter-spacing: 0.02em; color: var(--mc-white); text-decoration: none; cursor: pointer;
  text-shadow: 2px 2px 0 #3F3F3F; background: var(--btn); border: 2px solid #000;
  box-shadow: inset 2px 2px 0 var(--btn-hi), inset -2px -3px 0 var(--btn-lo); }
.btn:hover:not(:disabled) { border-color: var(--mc-white); }
.btn:active:not(:disabled) { box-shadow: inset 2px 2px 0 var(--btn-lo), inset -2px -2px 0 var(--btn-hi); }
.btn:disabled { cursor: default; color: #A0A0A0; text-shadow: none; background: #2C2C2C; box-shadow: none; }
.btn.discord { background: var(--discord); box-shadow: inset 2px 2px 0 #8E97FF, inset -2px -3px 0 #3640A8; }
.btn canvas { width: 20px; height: 20px; }
/* server list entry, as the game draws it */
.entry { width: min(640px, 100%); display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 8px; background: rgba(0, 0, 0, 0.62); border: 2px solid #808080; }
.entry img { width: 64px; height: 64px; display: block; }
.entry .name { font-family: var(--f-pixel); font-size: 22px; color: var(--mc-white); line-height: 1.2; }
.entry .motd { font-family: var(--f-pixel); font-size: 20px; letter-spacing: 0.02em; line-height: 1.35; min-width: 0; }
.entry .motd .l2 { color: var(--mc-gray); display: block; min-height: 1.35em; transition: opacity 0.25s; }
.entry .side { display: grid; justify-items: end; gap: 4px; font-family: var(--f-pixel); font-size: 19px; color: var(--mc-gray); white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 1px; height: 14px; }
.bars i { width: 3px; background: #2F2F2F; }
.bars i:nth-child(1) { height: 4px; }
.bars i:nth-child(2) { height: 6px; }
.bars i:nth-child(3) { height: 8px; }
.bars i:nth-child(4) { height: 11px; }
.bars i:nth-child(5) { height: 14px; }
.bars.ok i { background: var(--mc-green); }
.bars.ping i.on { background: var(--mc-green); }
.screen { position: relative; background-color: #3B2A1E; background-size: 64px 64px; image-rendering: pixelated; border: 2px solid #000; padding: 22px clamp(14px, 3vw, 28px) 24px; display: grid; gap: 14px; }
.screen::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.screen > * { position: relative; }
.screen .title { text-align: center; font-size: 22px; color: var(--mc-white); }
.field { display: grid; gap: 6px; }
.field .lbl { font-family: var(--f-pixel); font-size: 19px; color: #A0A0A0; }
.field .box { font-family: var(--f-pixel); font-size: 21px; letter-spacing: 0.02em; color: #E0E0E0; background: #000; border: 2px solid #A0A0A0; padding: 7px 10px; min-height: 40px; overflow-wrap: anywhere; }
.field .box.soon { color: #6F6F6F; }
.screen .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.screen .btn { width: 100%; font-size: 20px; }
.inventory { background: var(--gui); border: 2px solid #000; box-shadow: inset 3px 3px 0 var(--gui-hi), inset -3px -3px 0 var(--gui-lo); padding: 12px 14px 16px; width: 100%; max-width: 470px; }
.inventory .gt { font-family: var(--f-pixel); font-size: 20px; color: var(--gui-text); margin: 0 0 6px 2px; }
.slots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.slots + .slots { margin-top: 10px; }
.slot { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--slot); border: 0; padding: 0; margin: 0; cursor: pointer;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 var(--gui-hi); display: grid; place-items: center; }
.slot:disabled { cursor: default; }
.slot canvas { width: 72%; height: 72%; }
.slot:hover:not(:disabled)::after, .slot[aria-pressed="true"]::after { content: ""; position: absolute; inset: 2px; background: rgba(255, 255, 255, 0.45); }
.slot:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.slot .n { position: absolute; right: 3px; bottom: 0; font-family: var(--f-pixel); font-size: clamp(14px, 3vw, 19px); color: #fff; text-shadow: 2px 2px 0 #3F3F3F; line-height: 1; z-index: 1; }
.tooltip { background: var(--tip-bg); color: var(--mc-gray); font-family: var(--f-pixel); font-size: 21px; letter-spacing: 0.02em; line-height: 1.3; padding: 10px 14px 12px;
  border: 2px solid var(--tip-a); border-bottom-color: var(--tip-b); border-right-color: color-mix(in srgb, var(--tip-a) 50%, var(--tip-b));
  border-left-color: color-mix(in srgb, var(--tip-a) 75%, var(--tip-b)); outline: 2px solid var(--tip-bg); max-width: 520px; }
.tooltip .t { font-size: 25px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); margin-bottom: 4px; }
.tooltip p { margin: 0; }
.tooltip .c { color: var(--mc-dgray); margin-top: 8px; }
.chat { display: grid; gap: 2px; font-family: var(--f-pixel); font-size: 20px; letter-spacing: 0.02em; line-height: 1.25; min-width: 0; }
.chat .line { background: rgba(0, 0, 0, 0.5); padding: 2px 8px; text-shadow: 2px 2px 0 #3F3F3F; overflow-wrap: anywhere; }
.chat .input { background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: #E0E0E0; margin-top: 6px; }
.toast { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; background: #212121; border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #5A5A5A, inset -2px -2px 0 #141414; padding: 12px 14px; }
.toast canvas { width: 40px; height: 40px; margin-top: 2px; }
.toast .h { font-family: var(--f-pixel); font-size: 19px; color: var(--mc-yellow); }
.toast .t { font-family: var(--f-pixel); font-size: 25px; letter-spacing: 0.02em; color: var(--mc-white); line-height: 1.25; }
.toast p { margin: 6px 0 0; color: #C9C2BF; font-size: 16px; }
.rank .ico { width: 64px; height: 64px; background: var(--slot); box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 var(--gui-hi); display: grid; place-items: center; border: 2px solid #000; }
.rank .ico canvas { width: 46px; height: 46px; }
.page { background: var(--page); color: var(--page-ink); border: 3px solid var(--page-edge); padding: 22px clamp(16px, 3vw, 28px) 26px; font-family: var(--f-pixel); font-size: 22px; letter-spacing: 0.02em; line-height: 1.3; min-width: 0; }
.page + .page { border-left-width: 1px; }
@media (max-width: 760px) { .page + .page { border-left-width: 3px; border-top-width: 1px; } }
.page .pn { text-align: right; font-size: 18px; color: #7A6440; margin-bottom: 10px; }
.page ol { margin: 0; padding-left: 1.6em; display: grid; gap: 12px; }
.page li::marker { color: #8B0000; }
.page .cmd { color: #1E3F8F; }