/* Desenho de cada aspeto: peças, colunas, botões e painéis. As cores vêm de aparencia.js, como variáveis. */
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(fontes/fredoka-600.woff2) format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-weight: 400; font-display: swap; src: url(fontes/dm-serif-display-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-display: swap; src: url(fontes/cormorant-garamond-300.woff2) format('woff2'); }

/* Peças. O tamanho das sombras acompanha o tamanho da peça (1em = a peça). */
.peca, .verso { border-radius: 50%; }
.peca svg { width: 62%; height: 62%; position: relative; fill: var(--g); color: var(--g); }
.peca svg.tema { width: 70%; height: 70%; }
.peca svg.traco { fill: none; stroke: var(--g); stroke-width: 1.8; stroke-linejoin: round; }
.amostra { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none; width: 1em; height: 1em; }

.peca.esmalte, .peca.noite { background: radial-gradient(circle at 35% 28%, var(--cl) 0, var(--c) 52%, var(--cd) 100%); box-shadow: 0 .08em .16em var(--sombra, rgba(0, 0, 0, .3)); }
.peca.esmalte::after, .peca.noite::after { content: ''; position: absolute; inset: 7% 50% 72% 14%; border-radius: 50%; background: #fff; opacity: .55; transform: rotate(-32deg); }
.peca.esmalte svg, .peca.noite svg { filter: drop-shadow(0 .03em 0 rgba(0, 0, 0, .25)); }
.verso.esmalte, .verso.noite { background: radial-gradient(circle at 35% 28%, var(--vl) 0, var(--vb) 52%, var(--vd) 100%); box-shadow: 0 .08em .16em var(--sombra); }

.peca.azulejo { background: radial-gradient(circle at 35% 28%, #fff 0, #FBF8F0 58%, #DCD8CC 100%); box-shadow: inset 0 0 0 .04em var(--a), inset 0 0 0 .072em #fff, inset 0 0 0 .083em color-mix(in srgb, var(--a) 40%, transparent), 0 .055em .085em rgba(20, 40, 90, .3); }
.peca.azulejo svg { width: 60%; height: 60%; }
.verso.azulejo { background: radial-gradient(circle at 35% 28%, var(--al) 0, var(--a) 58%, var(--ad) 100%); box-shadow: 0 .055em .085em var(--sombra); }
.verso .rosa { width: 58%; height: 58%; fill: #fff; opacity: .3; }

.peca.abaco { background: radial-gradient(circle at 34% 28%, #6A6A70 0, #2B2B2F 30%, #121214 70%, #000 100%); box-shadow: 0 .055em .11em rgba(0, 0, 0, .35); }
.verso.abaco { background: radial-gradient(circle at 34% 28%, #fff 0, #E8E5DD 55%, #CCC8BC 100%); box-shadow: 0 .04em .085em rgba(0, 0, 0, .22); }
.peca.abaco svg.tema { width: 66%; height: 66%; }
.peca .num { color: var(--g); font-family: var(--fonte); font-weight: var(--peso); position: relative; line-height: 1; font-size: .46em; font-variant-numeric: lining-nums; }
.peca svg.mini { position: absolute; right: 9%; bottom: 9%; width: 26%; height: 26%; opacity: .85; }
.peca.joker-ok { --g: #2b2f3d; }

/* Colunas */
.tube { background: var(--tubo); box-shadow: inset 0 2px 5px var(--tubo-sombra); border-radius: calc(var(--s) / 2 + 6px); }
.quadro { position: absolute; pointer-events: none; display: none; }
html[data-aspeto="azulejo"] .quadro { display: block; background: #fff; border-radius: 18px; box-shadow: 0 0 0 2px var(--a), 0 0 0 4px #fff, 0 0 0 5px var(--a); }
html[data-aspeto="azulejo"] .tube { box-shadow: none; }
html[data-aspeto="abaco"] .quadro { display: block; border-top: 2px solid #1A1A1A; border-bottom: 2px solid #1A1A1A; }
html[data-aspeto="abaco"] .tube { background: linear-gradient(#1A1A1A, #1A1A1A) center / 1.5px 100% no-repeat; box-shadow: none; border-radius: 0; }

/* Botões redondos */
.r { position: relative; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--botao-texto); background: radial-gradient(circle at 35% 28%, var(--bl) 0, var(--bb) 52%, var(--bd) 100%); box-shadow: 0 3px 6px var(--sombra); flex: none; }
.ico { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-aspeto="azulejo"] .r { background: radial-gradient(circle at 35% 28%, #fff 0, #FBF8F0 58%, #DCD8CC 100%); box-shadow: inset 0 0 0 2px var(--a), inset 0 0 0 4px #fff, inset 0 0 0 5px color-mix(in srgb, var(--a) 40%, transparent), 0 2px 4px var(--sombra); }
html[data-aspeto="abaco"] .r { background: none; box-shadow: none; border: 1px solid #1A1A1A; }
.r[data-n]::after { content: attr(data-n); position: absolute; right: -3px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--acento); color: #fff; font: 600 11px/18px system-ui, sans-serif; text-align: center; }
html[data-aspeto="noite"] .r[data-n]::after { color: #1A1206; }

/* Disco grande dos painéis */
.disco { width: 168px; height: 168px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; font: var(--peso) 84px/1 var(--fonte); font-variant-numeric: lining-nums; color: #fff; }
html[data-aspeto="esmalte"] .disco, html[data-aspeto="noite"] .disco { background: radial-gradient(circle at 35% 28%, var(--dl) 0, var(--db) 52%, var(--dd) 100%); box-shadow: 0 8px 16px var(--sombra); }
html[data-aspeto="esmalte"] .disco::after, html[data-aspeto="noite"] .disco::after { content: ''; position: absolute; left: 30px; top: 20px; width: 42px; height: 21px; border-radius: 50%; background: #fff; opacity: .55; transform: rotate(-32deg); }
html[data-aspeto="azulejo"] .disco { width: 172px; height: 172px; color: var(--a); background: radial-gradient(circle at 35% 28%, #fff 0, #FBF8F0 58%, #DCD8CC 100%); box-shadow: inset 0 0 0 5px var(--a), inset 0 0 0 11px #fff, inset 0 0 0 13px var(--a), 0 8px 16px rgba(20, 40, 90, .28); }
html[data-aspeto="abaco"] .disco { width: auto; height: auto; font-size: 150px; line-height: .9; color: #1A1A1A; }

.contas { display: flex; gap: 8px; }
.conta { width: 15px; height: 15px; border-radius: 50%; background: var(--tubo); box-shadow: inset 0 0 0 1.5px var(--linha); }
.conta.on { background: var(--acento); box-shadow: none; }
html[data-aspeto="abaco"] .contas { width: 232px; gap: 4px; background: linear-gradient(#1A1A1A, #1A1A1A) center / 100% 1.5px no-repeat; }
html[data-aspeto="abaco"] .conta { width: 26px; height: 26px; background: radial-gradient(circle at 34% 28%, #fff 0, #E8E5DD 55%, #CCC8BC 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); margin-left: auto; }
html[data-aspeto="abaco"] .conta.on { background: radial-gradient(circle at 34% 28%, #6A6A70 0, #2B2B2F 30%, #121214 70%, #000 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); margin-left: 0; }

button.jogar { width: 76px; height: 76px; border: none; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 35% 28%, #8CEBC3 0, #2FBF84 52%, #0F7A50 100%); box-shadow: 0 8px 16px var(--sombra); }
html[data-aspeto="azulejo"] button.jogar { background: radial-gradient(circle at 35% 28%, var(--al) 0, var(--a) 58%, var(--ad) 100%); }
html[data-aspeto="abaco"] button.jogar { color: var(--ouro); background: radial-gradient(circle at 34% 28%, #6A6A70 0, #2B2B2F 30%, #121214 70%, #000 100%); }

/* Roda da sorte: prato e aro de cada aspeto */
html[data-aspeto="esmalte"], html[data-aspeto="noite"] { --roda-aro: radial-gradient(circle at 35% 28%, var(--dl) 0, var(--db) 52%, var(--dd) 100%); }
html[data-aspeto="esmalte"] { --roda-a: #FFFBF6; --roda-b: color-mix(in srgb, var(--acento) 13%, #FFFBF6); }
html[data-aspeto="noite"] { --roda-a: var(--cartao); --roda-b: color-mix(in srgb, var(--acento) 12%, var(--cartao)); }
html[data-aspeto="azulejo"] { --roda-a: #fff; --roda-b: color-mix(in srgb, var(--a) 11%, #fff); --roda-aro: radial-gradient(circle at 35% 28%, var(--al) 0, var(--a) 58%, var(--ad) 100%); }
html[data-aspeto="abaco"] { --roda-a: #FAF9F6; --roda-b: #ECE8DF; --roda-aro: radial-gradient(circle at 34% 28%, #6A6A70 0, #2B2B2F 30%, #121214 70%, #000 100%); }
html[data-aspeto="abaco"] .miolo { color: var(--ouro); }
.rotulo.azar.abaco { box-shadow: 0 0 0 2px var(--bad); }