body{height:100dvh;overflow:hidden}.phone{height:calc(100dvh - 48px);min-height:0;display:flex;flex-direction:column;overflow:hidden}.game-header{padding:8px 12px;min-height:62px;gap:5px;flex-shrink:0}.game-header h1{font-size:19px;flex:1;margin:0;white-space:nowrap}.game-header button,.metrics button{background:#e3f5f9;border-radius:12px;min-width:40px;min-height:44px;font-weight:800;color:#005fc4}#setup{display:flex;flex:1;min-height:0;flex-direction:column}.setup-content{overflow:auto;padding:12px 20px;flex:1}.banner{display:block;width:100%;aspect-ratio:2;object-fit:cover;border-radius:20px;background:#e3f5f9}.intro{text-align:center;font-size:14px;font-weight:700}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;font-size:13px;font-weight:700}.picker-trigger{max-width:65%}input[role=switch]{width:42px;height:25px;accent-color:#005fc4}.rules-note{font-size:12px;line-height:1.6;color:#765e4d}.record{text-align:center;font-size:12px;color:#005fc4}footer{padding:12px 20px max(14px,env(safe-area-inset-bottom));border-top:1px solid #ede2d2;background:#fff9ee}.primary{width:100%;min-height:48px}#play{padding:12px 16px;display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}.scores{display:flex;gap:5px}.player{flex:1;min-width:0;text-align:center;border:2px solid #e7ded0;border-radius:14px;padding:5px 2px;background:#fffdf8;font-size:11px}.player b,.player small{display:block}.player b{font-size:14px}.player.active{border-color:var(--player-color);background:#e3f5f9}.player.eliminated{opacity:.5;filter:grayscale(1)}.metrics{display:flex;align-items:center;justify-content:space-between;font-size:13px}.metrics button{min-height:34px}#timer{display:flex;gap:10px;align-items:center;font-size:13px}progress{flex:1;min-width:0;height:12px;accent-color:#005fc4}#turn{font-size:12px;font-weight:700;text-align:center;min-height:18px;margin:0}.board-stage{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}.board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(var(--rows,3),1fr);gap:8px;width:min(100cqw,calc(100cqh * 4 / var(--rows,3)));height:min(100cqh,calc(100cqw * var(--rows,3) / 4))}.card{position:relative;border:2px solid #0078a5;border-radius:15px;background:#dff7f9;box-shadow:0 3px 0 #acdce2;min-width:0;min-height:0;padding:0;font-size:clamp(24px,7vw,42px);transition:transform .18s,background .18s;color:#006487}.card.closed{background:repeating-linear-gradient(45deg,#dcf5f8,#dcf5f8 8px,#d2eff3 8px,#d2eff3 16px)}.card.open{background:#fff;transform:rotateY(0)}.card.matched{background:#fff;border-color:#79a657;box-shadow:0 3px 0 #c9dfb5}.card.matched:after{content:'✓';position:absolute;right:4px;bottom:1px;color:#426526;font-size:13px}.card:disabled{opacity:1;cursor:default}.companion{height:95px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px}.companion img{width:85px;height:95px;object-fit:contain}.companion p{font-size:13px;max-width:210px;padding:12px;border-radius:15px;background:#fff0cf}.companion[data-reaction=celebrating] img{animation:bounce .6s}.star{font-size:48px}#result{text-align:center;padding:20px;overflow:auto}#result h2{color:#005fc4;font-size:28px}#result>img{height:160px;width:140px;object-fit:contain}#summary{font-size:14px;line-height:1.8;margin:14px 0}#configure,#modal-no{min-height:44px;background:transparent;color:#005fc4;width:100%;margin-top:8px}dialog{max-width:380px}dialog p{line-height:1.7;font-size:14px}button:focus-visible,a:focus-visible{outline:3px solid #a52759;outline-offset:3px}[hidden]{display:none!important}@keyframes bounce{50%{transform:translateY(-8px) rotate(3deg)}}@media(max-width:520px){.phone{height:100dvh}.game-header{padding-top:max(8px,env(safe-area-inset-top))}#play{padding-bottom:max(10px,env(safe-area-inset-bottom))}}@media(max-height:650px){.companion{height:65px}.companion img{height:65px;width:60px}#play{gap:5px;padding-top:6px}.player{padding:2px}.board{gap:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.game-header #back{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;min-height:44px;background:#e3f5f9;border-radius:12px}.game-header #back img{width:25px;height:25px}.game-header h1{font-size:clamp(14px,4.2vw,19px)}.game-header button{min-width:34px}.card.open{animation:reveal-card .18s ease-out}@keyframes reveal-card{from{transform:rotateY(65deg)}to{transform:rotateY(0)}}
/* Visual configuration, following the Jogo da Velha choice cards. */
.visual-field{border:0;padding:0;margin:16px 0}.visual-field legend,.visual-field h2{font-size:13px;font-weight:800;margin:0 0 9px;padding:0}.option-cards{display:flex;gap:7px}.option-cards button{flex:1;min-width:0;border:2px solid #e8ddce;border-radius:14px;background:#fffdf8;padding:10px 3px;color:#654733;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:78px}.option-cards button>span:not(.mini-board){font-size:26px}.option-cards strong{font-size:12px}.option-cards small{font-size:11px}.option-cards button[aria-pressed=true],.color-option[aria-pressed=true]{border-color:#005fc4;background:#e3f5f9;color:#005fc4;box-shadow:0 3px 0 #b9dce5}.mini-board{display:grid;grid-template-columns:repeat(4,7px);grid-auto-rows:7px;gap:3px;height:47px;align-content:center}.mini-board i{border:1px solid #73a9bc;background:#bce2e9;border-radius:2px}.board-options button{gap:3px;padding:8px 2px}.color-option{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #e8ddce;border-radius:15px;background:#fffdf8;color:#654733;text-align:left;min-height:68px}.color-option strong,.color-option small{display:block}.color-option strong{font-size:13px}.color-option small{font-size:11px;margin-top:4px}.color-samples{display:flex;align-items:center;padding-left:4px}.color-samples i{width:17px;height:27px;border-radius:5px;background:#ffc8d8;transform:rotate(-12deg);border:1px solid #cb8b9e}.color-samples i:nth-child(2){background:#c6eab5;transform:rotate(0);margin-left:-5px;border-color:#8fac7f}.color-samples i:nth-child(3){background:#fbe4a1;transform:rotate(12deg);margin-left:-5px;border-color:#c2a969}.toggle-mark{margin-left:auto;font-size:22px}.select-settings{margin-top:18px;padding-top:4px;border-top:1px solid #e8ddce}.avatar-line{display:flex;gap:6px;flex-wrap:nowrap}.avatar-line button{flex:1;min-width:0;border:2px solid #e8ddce;background:#fffdf8;border-radius:14px;padding:9px 2px;display:flex;flex-direction:column;align-items:center;gap:4px}.avatar-line button>span{font-size:29px}.avatar-line strong{font-size:10px;white-space:nowrap}.avatar-line small{font-size:10px;color:#005fc4}#avatar-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}#avatar-options button{min-height:48px;font-size:28px;background:#fff9ee;border:2px solid #e8ddce;border-radius:12px}#avatar-options button[aria-pressed=true]{border-color:#005fc4;background:#e3f5f9}#avatar-options button:disabled{opacity:.25}.record-card{display:flex;align-items:center;justify-content:center;gap:17px;background:#fff0cf;border:1px solid #e9d29b;border-radius:18px;padding:14px;margin:14px 0 4px}.record-card>span{font-size:39px}.record-card div{display:flex;flex-direction:column;gap:3px}.record-card small{font-size:10px;font-weight:800;letter-spacing:1px;color:#806028}.record-card strong{font-size:27px;color:#755222;line-height:1.2}.record-card div>span{font-size:10px;color:#806028}.banner{max-height:165px;object-fit:cover}.intro{font-size:12px;margin:10px 0}.setup-content{padding-top:10px}.secondary-button,#configure{display:flex;align-items:center;justify-content:center;width:100%;min-height:49px;border:2px solid #b9dfe3;background:#e3f5f9;color:#005fc4;border-radius:14px;font-size:14px;font-weight:800;box-shadow:0 3px 0 #c5e6e8;margin-top:10px}
/* Portraits and prominent scores, kept compact for four players. */
.scores .player{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 5px;border-radius:18px}.player img{height:66px;width:50px;object-fit:contain}.player .score-avatar{font-size:34px}.player-info>strong{font-size:12px;display:block}.player-score{display:flex;align-items:baseline;justify-content:center;gap:5px}.player-score b{font-size:29px;line-height:1.1}.player-score>span{font-size:10px}.player .turn-label{font-size:9px;min-height:11px;font-weight:800;color:#005fc4}.scores[data-players="1"] .player{max-width:230px;margin:auto;gap:18px;width:100%}.scores[data-players="3"] .player,.scores[data-players="4"] .player{flex-direction:column;gap:2px;padding:4px 1px}.scores[data-players="4"] .player-info>strong{font-size:10px}.scores[data-players="3"] .score-avatar,.scores[data-players="4"] .score-avatar{font-size:25px}.scores[data-players="3"] .player-score b,.scores[data-players="4"] .player-score b{font-size:23px}.companion{height:160px;gap:4px}.companion img{height:160px;width:125px}.companion p{max-width:190px}
/* Results emphasize the achievement, followed by small stat tiles. */
#result{padding:16px 20px 24px}#result>.star{font-size:30px}#result h2{font-size:27px;margin:7px 0}#result>img{height:175px;width:150px}#summary{margin:4px 0 18px;line-height:1.3}.result-time{background:#e3f5f9;border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:5px}.result-time>small{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#005fc4}.result-time>strong{font-size:40px;color:#005fc4;line-height:1.1}.result-time>span{font-size:12px}.result-time progress{width:85%;flex:auto;height:8px;margin-top:3px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.result-stat{display:flex;flex-direction:column;gap:4px;align-items:center;padding:9px 2px;background:#fff;border:1px solid #e8ddce;border-radius:12px}.result-stat>span{font-size:21px}.result-stat strong{font-size:18px}.result-stat small{font-size:9px;color:#765e4d}.result-best{background:#fff0cf;border-radius:12px;padding:12px;font-size:12px;display:flex;justify-content:center;align-items:center;gap:12px}.result-best strong{font-size:19px}.raw-time{display:block;font-size:10px;margin-top:8px;color:#765e4d}.result-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}.result-player{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid #e8ddce;border-radius:17px;background:#fffdf8;padding:12px 7px}.result-player.winner{border-color:#d6af4b;background:#fff0cf}.result-player img{height:75px;width:60px;object-fit:contain}.result-player>.score-avatar{font-size:42px}.result-player>strong{font-size:13px}.result-player>b{font-size:32px;color:#005fc4}.result-player>b small{font-size:12px}.result-player>span:not(.score-avatar),.result-player>small{font-size:11px}.result-player.eliminated{opacity:.55;filter:grayscale(1)}.difficulty-badge{font-size:12px;background:#e3f5f9;padding:9px;border-radius:10px}
@media(max-height:740px){.companion,.companion img{height:125px}.companion img{width:100px}.player img{height:54px;width:40px}#result>img{height:135px}#result h2{font-size:24px}.result-time>strong{font-size:34px}}
@media(max-height:620px){#play{overflow:auto}.board-stage{flex:1 0 250px;min-height:250px}.companion,.companion img{height:115px}}
.mode-summary{margin:10px 0 0;padding:0 2px;min-height:32px}.memory-options button>span{font-size:21px!important;white-space:nowrap;letter-spacing:-3px}.memory-options small{font-size:10px}.count-options button>span{font-size:30px!important;font-weight:900;line-height:1.1}.count-options button{min-height:70px}.game-header .share-button svg{width:21px;height:21px}.game-header .share-button{display:flex;align-items:center;justify-content:center;flex-shrink:0}.game-header h1{min-width:0}@media(max-width:380px){.game-header{gap:3px;padding-left:8px;padding-right:8px}.game-header h1{font-size:14px}.game-header button{min-width:30px;width:30px}.game-header #back{width:30px}}
/* The active player's outline carries the challenge clock. */
.scores{padding:4px;overflow:visible}.scores .player{position:relative;isolation:isolate}.scores .player.active{animation:player-glow 3.2s ease-in-out infinite}.player-clock{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;padding:3px;background:conic-gradient(from 0deg,var(--player-color) var(--clock-progress),#d5e4e7 var(--clock-progress));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}.scores .player.timed{border-color:transparent}.scores.motion-paused .player.active{animation-play-state:paused}.player .turn-label{white-space:nowrap;font-variant-numeric:tabular-nums}@keyframes player-glow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--player-color) 10%,transparent),0 0 6px color-mix(in srgb,var(--player-color) 8%,transparent)}50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--player-color) 20%,transparent),0 0 14px color-mix(in srgb,var(--player-color) 24%,transparent)}}@media(prefers-reduced-motion:reduce){.scores .player.active{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--player-color) 20%,transparent)}}

/* The app shell is also a main element; do not inherit the hub content padding. */
main.shell.phone{padding:0}
@media(max-width:520px){main.shell.phone{width:100%;max-width:none;margin:0;border:0;border-radius:0;height:100dvh}}

/* Full-width standings; each pair is worth one point. */
.result-ranking{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:0;width:100%;border-top:1px solid #e8ddce}
.ranking-row{display:grid;grid-template-columns:32px 48px minmax(0,1fr) 49px;align-items:center;gap:9px;padding:13px 7px;border-bottom:1px solid #e8ddce;text-align:left;min-height:78px}
.ranking-row.winner{background:#fff0cf}.ranking-row.eliminated{opacity:.55;filter:grayscale(1)}
.ranking-place{font-size:21px;font-weight:900;color:#806028;text-align:center}
.ranking-avatar{display:flex;align-items:center;justify-content:center}.ranking-avatar img{width:42px;height:58px;object-fit:contain}.ranking-avatar .score-avatar{font-size:34px}
.ranking-name{display:flex;flex-direction:column;gap:4px;min-width:0}.ranking-name strong{font-size:14px}.ranking-name small{font-size:11px;color:#765e4d}
.ranking-points{text-align:center;display:flex;flex-direction:column;gap:2px}.ranking-points b{font-size:29px;color:#005fc4}.ranking-points small{font-size:10px;color:#765e4d}
@media(max-width:360px){.ranking-row{grid-template-columns:27px 38px minmax(0,1fr) 42px;gap:6px;padding-inline:3px}.ranking-name strong{font-size:12px}.ranking-avatar .score-avatar{font-size:29px}}

.result-portraits{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:10px auto;max-width:100%}.result-portraits img{width:140px;height:140px;object-fit:contain}.result-portraits figure{margin:0;min-width:90px}.result-portraits .winner-avatar{display:block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:64px;line-height:1.3}.result-portraits figcaption{font-size:13px;font-weight:800;color:#005fc4}