/* Elementos de interface no estilo Tiny Swords (papel, fitas e botões), usados no menu inicial
   e na janela de Opções. As imagens em assets/ui/ são recortes de 9 partes dos "UI Elements"
   do pacote: o CSS estica só o meio e mantém os cantos. */

.papel {
    border-style: solid;
    border-width: 44px 52px 45px 52px;
    border-image: url('../assets/ui/paper.png') 44 52 45 52 fill / 44px 52px 45px 52px;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    color: #3d2f22;
}

.fita {
    position: relative;
    display: block;
    width: fit-content;
    min-width: 200px;
    margin: -34px auto 14px;
    padding: 0 6px;
    height: 62px;
    line-height: 54px;
    border-style: solid;
    border-width: 0 59px;
    border-image: url('../assets/ui/fita_azul.png') 0 97 0 98 fill / 0 59px 0 59px;
    image-rendering: pixelated;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .5px;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 0 #1d4a63, 0 0 6px rgba(0, 0, 0, .25);
}

.btn-ts {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; min-height: 52px; padding: 0 6px;
    border-style: solid;
    border-width: 0;
    border-image: url('../assets/ui/btn_azul.png') 47 45 47 45 fill / 24px 23px 24px 23px;
    background: none;
    color: #fff; font: inherit; font-size: 18px; font-weight: 800; letter-spacing: .3px;
    text-decoration: none; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}
.btn-ts:hover { filter: brightness(1.08); }
.btn-ts:active { border-image: url('../assets/ui/btn_azul_press.png') 36 50 49 50 fill / 24px 23px 24px 23px; padding-top: 5px; }
.btn-ts.vermelho { border-image: url('../assets/ui/btn_vermelho.png') 47 45 47 45 fill / 24px 23px 24px 23px; }
.btn-ts.vermelho:active { border-image: url('../assets/ui/btn_vermelho_press.png') 36 50 49 50 fill / 24px 23px 24px 23px; }
.btn-ts.grande { min-width: 230px; min-height: 64px; font-size: 24px; }
.btn-ts:focus-visible { outline: 3px solid #ffd86b; outline-offset: 2px; }

/* ---------- janela de Opções ---------- */
.op-modal {
    position: fixed; inset: 0; z-index: 45;
    display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(10, 12, 20, .55);
}
.op-modal.show { display: flex; }
.op-box { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; font-size: 15px; }
.op-box .fita { margin-top: 0; }  /* dentro da caixa com rolagem a fita não pode sair para cima */
.op-linha { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 10px; margin: 10px 0; text-align: left; font-weight: 700; }
.op-linha select { grid-column: 2 / 4; }
.op-valor { text-align: right; font-variant-numeric: tabular-nums; }
.op-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-weight: 700; text-align: left; cursor: pointer; }
.op-check input { width: 20px; height: 20px; accent-color: #3f8fd6; }
.op-nota { margin: 6px 0 14px; font-size: 13px; color: #6b5844; }
.op-box input[type=range] { width: 100%; accent-color: #3f8fd6; height: 28px; }
.op-box select {
    font: inherit; font-weight: 700; color: #3d2f22; padding: 6px 8px;
    background: #f3e7c9; border: 2px solid #8a6a45; border-radius: 6px;
}
@media (max-height: 560px) {
    .papel { border-width: 22px 26px; border-image-width: 22px 26px; }
    .fita { height: 48px; line-height: 42px; font-size: 20px; border-width: 0 46px; border-image-width: 0 46px; min-width: 150px; }
    .op-box { font-size: 13px; }
    .op-linha { margin: 4px 0; }
    .op-nota { margin-bottom: 8px; }
}