/* Paciência do Globalito — estilos. Cor da área: #0e7490 (mesa verde-azulada). */
body.pc-body {
  background:
    radial-gradient(ellipse at 20% 0%, #1d95b3 0, transparent 55%),
    repeating-linear-gradient(45deg, #ffffff0a 0 2px, transparent 2px 12px),
    #0e7490;
  background-attachment: fixed;
  min-height: 100vh;
}
.pc { max-width: 1000px; margin: 0 auto; padding: 8px max(8px, env(safe-area-inset-right)) 28px max(8px, env(safe-area-inset-left)); }
.pc h1, .pc h2 { overflow-wrap: anywhere; }
@media (min-width: 480px) { .pc { padding-left: 16px; padding-right: 16px; } }

/* ----- tela inicial ----- */
.pc-start { margin: 10px auto 0; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-start__img { width: 96px; height: auto; max-height: 130px; object-fit: contain; }
.pc-lead { font-size: 18px; font-weight: 700; margin: 0; max-width: 34ch; }
.pc-modes { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; grid-template-columns: 1fr; }
.pc-modes legend { font-weight: 900; font-size: 17px; padding: 0; margin: 0 auto 6px; }
@media (min-width: 560px) { .pc-modes { grid-template-columns: 1fr 1fr; } .pc-modes legend { grid-column: 1 / -1; } }
.pc-mode { position: relative; }
.pc-mode input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.pc-mode label { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px; border: 3px solid var(--navy); border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 4px 0 var(--navy); pointer-events: none; }
.pc-mode__t { font-weight: 900; font-size: 20px; }
.pc-mode__d { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink-soft); }
.pc-mode__b { font-weight: 800; font-size: 14px; color: #0b5d74; }
.pc-mode input:checked + label { background: #0e7490; color: #fff; }
.pc-mode input:checked + label .pc-mode__d, .pc-mode input:checked + label .pc-mode__b { color: #fff; }
.pc-mode input:focus-visible + label { outline: 4px solid var(--blue); outline-offset: 3px; }
.pc-steps { margin: 4px 0 8px; padding-left: 22px; text-align: left; font-size: 16px; font-weight: 700; display: grid; gap: 5px; }
.pc-steps--left { font-size: 16px; font-weight: 600; }
.pc-start__btns, .pc-dlg__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ----- cabeçalho do jogo ----- */
.pc-hud { display: flex; align-items: stretch; gap: 8px; margin: 2px 0 8px; }
.pc-guide { flex: 1 1 0; align-items: center; min-width: 0; }
.pc-guide .m-guide__img { width: 44px; height: 44px; }
.pc-guide .m-guide__bubble { margin: 0; flex: 1; font-size: 15px; min-height: 48px; display: flex; align-items: center; padding: 6px 12px; line-height: 1.25; }
.pc-guide .m-guide__bubble::before { bottom: auto; top: 50%; margin-top: -8px; }
.pc-moves { flex: none; margin: 0; min-height: 44px; padding: 4px 12px; background: #fff; border: 3px solid var(--navy); border-radius: 14px; font-weight: 800; font-size: 15px; color: var(--navy); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pc-moves__m { color: #0b5d74; }
.pc-moves b { font-variant-numeric: tabular-nums; font-size: 19px; }

/* ----- mesa ----- */
.pc-mesa { --n: 7; --gap: 4px; --cw: 45px; --ch: 64px; width: 100%; }
.pc-top, .pc-tab { display: grid; grid-template-columns: repeat(var(--n), var(--cw)); column-gap: var(--gap); justify-content: center; align-items: start; }
.pc-top { margin-bottom: calc(var(--gap) * 2 + 6px); }
.pc-col { position: relative; width: var(--cw); min-height: var(--ch); }

.card, .slot { display: block; width: var(--cw); height: var(--ch); padding: 0; margin: 0; border-radius: calc(var(--cw) * .13); }
.pc-col .card, .pc-col .slot { position: absolute; left: 0; }
.pc-top .card, .pc-top .slot { position: relative; }

.card { --cardbg: #fff; border: 2px solid #17345f; background: #fff; color: var(--c); box-shadow: 0 2px 0 #06223f66; overflow: hidden; text-align: left; font-family: var(--font); }
.card.s0 { --c: #d6336c; --ink: #bf2260; } .card.s1 { --c: #e8890c; --ink: #a85500; }
.card.s2 { --c: #0b2b58; --ink: #0b2b58; } .card.s3 { --c: #0e7490; --ink: #0a5a71; }
.card.g0 { background: #fffaf7; --cardbg: #fffaf7; } .card.g1 { background: #f6fbfe; --cardbg: #f6fbfe; }
.card__c { position: absolute; left: 4%; top: 2px; display: flex; align-items: center; gap: 1px; line-height: 1; font-weight: 900; font-size: max(14px, calc(var(--cw) * .3)); color: var(--ink); pointer-events: none; }
.card__c .ico { width: max(12px, calc(var(--cw) * .27)); height: max(12px, calc(var(--cw) * .27)); flex: none; color: var(--c); }
.card__pip { position: absolute; left: 50%; top: 61%; width: 48%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--c); pointer-events: none; }
.card__star { position: absolute; right: 2px; top: 2px; width: max(12px, calc(var(--cw) * .25)); height: max(12px, calc(var(--cw) * .25)); pointer-events: none; }
button.card { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* costas das cartas: azul com círculo de listras de luz */
.card.down { background: #0b3f9e; border-color: #fff; box-shadow: 0 2px 0 #06223f88, inset 0 0 0 2px #0b2b58; }
.card__back { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: repeating-conic-gradient(from 0deg, #5ae8f6 0 12deg, #0b2b58 12deg 24deg); }
.card__back::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: #fff; }
.badge { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); min-width: 22px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 900; font-size: 13px; line-height: 18px; text-align: center; border: 2px solid var(--navy); pointer-events: none; }

/* espaços vazios */
.slot { --cardbg: #1b8aa6; border: 3px dashed #ffffff88; background: #ffffff14; color: #ffffffcc; display: grid; place-items: center; position: relative; cursor: pointer; font-weight: 900; font-size: max(16px, calc(var(--cw) * .36)); }
.slot svg { width: 46%; height: auto; aspect-ratio: 1; opacity: .75; }
.slot--found svg { opacity: .55; }
.slot--col { flex-direction: column; gap: 2px; }
.slot--col .card__star { position: static; width: 38%; height: auto; aspect-ratio: 1; }
.slot--col span { font-size: max(15px, calc(var(--cw) * .32)); }

/* estados */
.card.sel, .pc-col .card.sel { transform: translateY(-5px); outline: 4px solid #ffda62; outline-offset: -1px; z-index: 20; box-shadow: 0 7px 10px #00000055, 0 0 14px #ffda62; }
.dest { outline: 4px dashed #8cf5b4; outline-offset: -2px; box-shadow: 0 0 0 4px #8cf5b455, 0 0 16px #8cf5b4; }
.hintsrc, .hintdst { outline: 4px solid #ff922b; outline-offset: -1px; box-shadow: 0 0 0 4px #ff922b55, 0 0 16px #ff922b; animation: pcHint .7s ease-in-out infinite alternate; }
.hintsrc.sel { outline-color: #ffda62; }
@keyframes pcHint { from { filter: brightness(1); } to { filter: brightness(1.15); } }
.pc-mesa button:focus-visible, .pc-mesa .card:focus-visible { outline: 4px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 7px #0b2b58; z-index: 30; border-radius: calc(var(--cw) * .13); }
.found-done { box-shadow: 0 0 0 3px #ffda62, 0 0 14px #ffda62; }
.bump { animation: pcBump .35s ease both; }
@keyframes pcBump { 0% { transform: scale(.8); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ----- botões ----- */
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

/* ----- cartãozinho de curiosidade ----- */
.pc-fato { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 460px); display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 3px solid var(--navy); border-radius: 16px; box-shadow: 0 6px 0 #061f3e, 0 10px 24px #0006; animation: m-pop .3s ease both; }
.pc-fato img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.pc-fato p { margin: 0; flex: 1; font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--navy); }
.pc-fato .m-btn { flex: none; padding: 6px 12px; min-height: 44px; }

/* ----- diálogos ----- */
.pc-dlg { width: min(92vw, 480px); max-height: 92vh; padding: 0; border: 4px solid var(--navy); border-radius: 22px; background: var(--paper); color: var(--navy); box-shadow: 0 8px 0 #061f3e; overflow: auto; }
.pc-dlg::backdrop { background: rgba(8, 36, 69, .6); }
.pc-dlg__in { padding: 18px 20px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-dlg__in h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.pc-dlg__in p { margin: 0; font-size: 17px; font-weight: 700; }
.pc-dlg__img { width: 72px; height: auto; max-height: 96px; object-fit: contain; }
.pc-note { font-size: 15px !important; font-weight: 600 !important; color: var(--ink-soft); }
.pc-badge { background: #e1f7f1; border: 3px solid #16a085; border-radius: 12px; padding: 8px 12px; color: #0b5d4d; }
.pc-stars span { font-size: 40px; line-height: 1; }
.pc-stars .on { color: #f5b400; text-shadow: 0 2px 0 #b07d00; }
.pc-stars .off { color: #9aa9b8; opacity: .55; }

@media (max-width: 400px) {
  .pc-lead, .pc-steps { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hintsrc, .hintdst, .bump, .pc-fato { animation: none !important; }
}
.pc-rm .hintsrc, .pc-rm .hintdst, .pc-rm .bump, .pc-rm .pc-fato { animation: none !important; }
@media (max-height: 720px) {
  .pc-dlg__img { width: 56px; max-height: 76px; }
  .pc-dlg__in { gap: 6px; padding-top: 14px; }
}