body.mosaics::before{background-image:linear-gradient(170deg,#0b14229e,var(--base) 86%),url('assets/observatorio.webp')}
.mosaics .intro-art{background-image:url('assets/observatorio.webp')}
.mosaics .intro-art{background-position:57% center}
.mosaic-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.36fr);align-items:start;gap:15px}
.mosaic-tray{min-width:0;padding:clamp(12px,2vw,24px);background:radial-gradient(ellipse at 50% 25%,#3852587d,transparent 71%),linear-gradient(160deg,#213c46,#152832)}
.mosaic-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px 8px}
.pairs-hud{display:grid;gap:1px;text-align:right;color:var(--soft);font-size:.76rem}
.pairs-hud strong{font:1.8rem/1 var(--heading);color:var(--ink);font-variant-numeric:tabular-nums}
.board-area{min-width:0;padding:14px 7px 9px;display:grid;place-items:center;border-top:1px solid #a1c8c12b;border-bottom:1px solid #a1c8c12b;background:radial-gradient(ellipse,#11283280,#0b202b4d);border-radius:11px}
.porcelain-board{position:relative;isolation:isolate;--rise:clamp(2px,.48vw,5px);width:100%;max-width:var(--board-max,650px);margin:0 0 3px;transition:opacity .3s}
.porcelain-board::after{content:'';display:block;padding-top:var(--board-ratio,100%);pointer-events:none}
.porcelain-board.arranging{animation:porcelain-rearrange .92s both}
.porcelain-board.cleared{min-height:180px}.porcelain-board.cleared::after{display:none}
.porcelain-board.cleared::before{content:'';position:absolute;top:20%;right:0;bottom:20%;left:0;background:url('../../assets/ui/nils.webp') center/auto 100% no-repeat;animation:porcelain-rearrange 1.45s both}
.porcelain{
 position:absolute;display:grid;place-items:center;padding:0;border:1px solid #ede6c5;border-radius:16% 17% 19% 18%/12% 12% 16% 16%;isolation:isolate;
 color:#486e6a;box-shadow:0 2px 0 #79a299,0 4px 0 #477972,1px 5px 6px #091922d1,inset 0 0 0 2px #bca88f41;
 background:radial-gradient(ellipse at 32% 15%,#fffdf0,#f2ead7 55%,#d3d4be 95%);transform:translate(calc(var(--layer)*var(--rise)),calc(-1*var(--layer)*var(--rise)));
 transition:filter .25s,box-shadow .35s,outline-color .3s,background .3s
}
.porcelain::before{content:'';position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:1px solid #9db1a687;border-radius:15% 15% 18% 18%;pointer-events:none}
.porcelain::after{content:'';position:absolute;top:11%;right:11%;bottom:11%;left:11%;background:radial-gradient(circle at 5% 5%,#b99d67 0 1px,transparent 1.6px),radial-gradient(circle at 95% 5%,#b99d67 0 1px,transparent 1.6px),radial-gradient(circle at 5% 95%,#b99d67 0 1px,transparent 1.6px),radial-gradient(circle at 95% 95%,#b99d67 0 1px,transparent 1.6px);pointer-events:none}
.porcelain img{width:76%;height:80%;object-fit:contain;filter:drop-shadow(0 1px 1px #5b453746);pointer-events:none}
.porcelain[aria-disabled=true]{background:linear-gradient(145deg,#e3e4cd,#aebdb3);border-color:#c1c9b1;cursor:default}
.porcelain[aria-disabled=true] img{opacity:.58;filter:saturate(.65)}
.porcelain:not([aria-disabled=true]):hover{border-color:#fff8db;filter:brightness(1.12)}
.porcelain[aria-pressed=true]{outline:2px solid #fff6d1;outline-offset:1px;box-shadow:0 0 16px #d7ffdbba,inset 0 0 0 2px #d4ba83,0 4px 0 #588b7c;animation:porcelain-select .46s both}
.porcelain.hinted{background:radial-gradient(ellipse,#fff6d2 25%,var(--pair,#aed8c6));outline:2px solid var(--pair,#c3e6d2);outline-offset:0;animation:porcelain-hint 1.2s ease-in-out infinite alternate}
.porcelain.removing{pointer-events:none;animation:porcelain-match .72s cubic-bezier(.3,.55,.47,1) both}
.porcelain.invalid{animation:porcelain-wrong .34s both}
.mosaic-status{padding:10px 3px 1px;min-height:48px;font-size:.89rem;color:var(--soft)}
.end-actions{justify-content:center}
.nils-panel{padding:18px;display:grid;gap:13px}
.nils-heading{display:flex;align-items:center;gap:7px}
.nils-heading img{width:48px;height:57px;object-fit:contain}
.nils-heading h2{font-size:1.6rem}
.powers{display:grid;gap:7px}
.power-button{display:grid;grid-template-columns:29px minmax(0,1fr) auto;min-height:57px;gap:8px;align-items:center;padding:7px 10px;border-radius:18px 6px 18px 6px;text-align:left}
.power-button .icon{width:24px;height:24px;color:var(--accent)}
.power-button .power-cost{display:flex;gap:3px;align-items:center;font-size:.72rem;color:var(--shimmer)}
.power-cost .icon{width:13px;height:13px;color:inherit}
@keyframes porcelain-select{50%{filter:brightness(1.19)}}
@keyframes porcelain-hint{from{box-shadow:0 2px 0 #82aaa1,0 0 3px #fcf9cc}to{box-shadow:0 2px 0 #7caa9f,0 0 16px var(--pair,#c3e6d2)}}
@keyframes porcelain-match{0%{filter:brightness(1.17);opacity:1}45%{filter:brightness(1.38);opacity:1;scale:1.1}100%{filter:brightness(1.38);opacity:0;scale:.83}}
@keyframes porcelain-wrong{45%{box-shadow:inset 0 0 0 3px #bc746b,0 2px 7px #c06b56}}
@keyframes porcelain-rearrange{0%{opacity:.3;filter:brightness(1.32)}100%{opacity:1;filter:brightness(1)}}
@media(max-width:840px){
 .mosaic-layout{grid-template-columns:minmax(0,1fr);gap:9px}
 .nils-panel{padding:12px}
 .powers{grid-template-columns:repeat(4,minmax(0,1fr))}
 .power-button{grid-template-columns:22px minmax(0,1fr) auto;gap:4px;font-size:.78rem}
}
@media(max-width:600px){
 .mosaic-tray{padding:10px 8px}
 .board-area{padding:11px 7px 7px 1px}
 .porcelain-board{--rise:2.5px}
 .powers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mosaic-status{font-size:.82rem}
 .power-button{min-height:48px}
}
@media(max-width:360px){.power-button{grid-template-columns:18px minmax(0,1fr) auto;padding:7px 5px;font-size:.73rem}.power-button .icon{width:18px;height:18px}.power-cost .icon{width:11px;height:11px}}

@media(max-width:460px){
 .mosaics .heading-commands #help{width:44px;padding:6px;gap:0;font-size:0}
 .mosaics .heading-commands #help .icon{display:block;width:18px;height:18px}
}

/* Porcelanas sobre a mesa do observatório. */
body.mosaics::before{background-image:linear-gradient(0deg,#102220,transparent 70%),url('assets/observatorio.webp')}
.mosaics #difficulty{padding:3px;border-radius:21px;border:1px solid #d9c6a557;background:#0d1b1c9e}
.mosaics #difficulty .charm{min-height:43px;border-color:transparent;background:transparent;border-radius:18px;box-shadow:none;padding-inline:11px}
.mosaics #difficulty .charm[aria-pressed=true]{border-color:#ebd8a8;background:linear-gradient(145deg,#f0e6bf,#a9c0a4);color:#192925}
.mosaic-layout{grid-template-columns:minmax(0,1fr) minmax(225px,.36fr);gap:17px}
.mosaic-tray.lunar-panel{
 background:linear-gradient(150deg,#324b3d,#192e27 47%,#142723);border-color:#afba8e8f;border-radius:30px 30px 14px 14px;
 padding:clamp(13px,2.2vw,25px);box-shadow:0 18px 42px #07151396
}
.mosaic-tray.lunar-panel::before{top:5px;right:5px;bottom:5px;left:5px;border-radius:25px 25px 10px 10px;opacity:.42}
.mosaic-hud{padding:0 2px 13px}
.mosaic-hud h2{font-size:clamp(1.7rem,3.2vw,2.45rem);color:#fff1cf}
.mosaic-hud .eyebrow{display:inline-block;color:#d7deb6;margin-bottom:2px}
.pairs-hud{grid-template-columns:auto auto;align-items:center;column-gap:10px}
.pairs-hud strong{
 display:grid;place-items:center;min-width:44px;height:38px;padding:0 8px;border-radius:50%;border:1px solid #dcd0a16a;
 background:#142921a3;color:#fff2ce;font-size:1.35rem
}
.board-area{
 border-radius:18px;padding:18px 11px 13px;min-height:160px;border:1px solid #091813;
 background:radial-gradient(ellipse at 46% 38%,#2c483d 0,#172d27 72%,#10221d);
 box-shadow:inset 0 2px 14px #091510c9,inset 0 0 0 3px #b3b58b19
}
.porcelain{
 background:url('assets/porcelana.webp') center/100% 100% no-repeat;border:0;border-radius:14%;
 box-shadow:0 2px 3px #060e0c95;transition:filter .23s,outline-color .23s,box-shadow .23s;overflow:visible
}
.porcelain::before,.porcelain::after{display:none}
.porcelain img{width:70%;height:73%;margin-top:-8%;object-fit:contain;filter:drop-shadow(0 1px 1px #43361c55)}
.porcelain[aria-disabled=true]{background:url('assets/porcelana.webp') center/100% 100% no-repeat;filter:brightness(.76) saturate(.78)}
.porcelain[aria-disabled=true] img{opacity:.84;filter:none}
.porcelain[aria-pressed=true]{outline:2px solid #ffe8a5;outline-offset:0;box-shadow:0 0 11px #f4d78ab0}
.porcelain.hinted{background:url('assets/porcelana.webp') center/100% 100% no-repeat}
.mosaic-status{padding:11px 3px 2px;min-height:41px}
.nils-panel.lunar-panel{background:linear-gradient(158deg,#344e3f,#192e28 64%);border-color:#afba8e7a;border-radius:25px 25px 13px 13px}
.nils-panel.lunar-panel::before{opacity:.28}
.nils-heading img{width:52px;height:63px}
.nils-heading h2{color:#fff1cf;font-size:1.66rem}
.power-button{
 border-radius:23px 23px 10px 10px;border-color:#c8c19472;background:linear-gradient(154deg,#405a49,#243c31);box-shadow:inset 0 0 0 2px #f4e2b10d;
}
.power-button>.icon{padding:3px;width:28px;height:28px;border:1px solid #d8c9996e;border-radius:50%;background:#1b3227;color:#e8d6a0}
.power-cost{border-radius:20px;background:#1a3027;padding:3px 5px}
@media(max-width:840px){
 .mosaic-layout{grid-template-columns:minmax(0,1fr);gap:9px}
}
@media(max-width:600px){
 .mosaic-tray.lunar-panel{padding:10px 7px;border-radius:24px 24px 12px 12px}
 .mosaic-hud{padding:2px 6px 9px}
 .pairs-hud{column-gap:4px;font-size:.72rem}
 .pairs-hud strong{min-width:33px;height:31px;font-size:1.2rem}
 .board-area{padding:12px 7px 8px 3px}
 .power-button{grid-template-columns:24px minmax(0,1fr) auto}
 .power-button>.icon{width:23px;height:23px;padding:2px}
 .power-cost{padding:2px 3px}
}
@media(max-width:360px){
 .power-button{font-size:.72rem;padding-inline:4px;grid-template-columns:19px minmax(0,1fr) auto}
 .power-button>.icon{width:18px;height:18px}
 .mosaics #difficulty .charm{padding-inline:7px}
}
.power-sigil{width:29px;height:29px;object-fit:contain;filter:drop-shadow(0 2px 2px #0e1b15a6)}
@media(max-width:600px){.power-sigil{width:24px;height:24px}}
@media(max-width:360px){.power-sigil{width:19px;height:19px}}
@media(max-width:380px){
 .mosaics main.shell{padding-left:5px;padding-right:5px}
 .mosaic-tray.lunar-panel{padding-left:4px;padding-right:4px}
 .board-area{padding-left:1px;padding-right:5px}
 .mosaics .heading-commands #restart{width:44px;font-size:0;gap:0;padding:0}
 .mosaics .heading-commands #restart .icon{display:block}
}

/* A arte fica inteiramente dentro da face da porcelana, inclusive peças verticais. */
.porcelain img{position:absolute;left:15%;top:10%;width:70%;height:72%;max-width:70%;max-height:72%;min-width:0;min-height:0;margin:0;object-fit:contain;object-position:center;}