.family-page{max-width:1280px;margin:auto}.shell:has(.family-page){display:block;max-width:1420px}.shell:has(.family-page)>.sidebar{display:none}.family-topbar{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}.family-heading{padding:30px;background:linear-gradient(115deg,#eaf5f3,#f1edf8);border:1px solid #d7e5de;border-radius:24px}.family-heading h1{font-size:39px;margin:8px 0;color:#245a50}.family-heading h1 small{font-size:25px;margin-inline-start:15px;color:#697d87;font-weight:500}.family-heading p{font-size:14px;line-height:1.9;color:#667b75}.family-source-note{font-size:11px;color:#7d7791}.family-report{border:1px solid #dce7dd;background:#f1f6ee;padding:22px;border-radius:21px;margin:23px 0}.family-report-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.family-report-title h2{font-size:22px;margin:0 0 17px}.family-report-title small{font-size:10px;color:#7f8d79}.family-counters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.family-counters>div{border:1px solid #e3eadd;background:#fffef9;padding:15px 7px;border-radius:15px;text-align:center}.family-counters span{display:block;font-size:23px}.family-counters strong{display:block;font-size:27px;color:#285b47;margin:6px 0}.family-counters small{display:block;font-size:10px;color:#6d7c66}.family-report>p{font-size:10px;color:#7c8973;line-height:1.8;margin:13px 0 0}.family-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}.family-card{border:1px solid #dce5de;border-radius:23px;overflow:hidden;background:#fffefb;min-width:0}.family-image{position:relative;aspect-ratio:3/2;background:#edf3ee}.family-image img{display:block;width:100%;height:100%;object-fit:contain}.family-number{position:absolute;top:15px;right:15px;background:#2c8b9f;border:3px solid #e6f8ff;color:white;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px}.family-status{position:absolute;bottom:13px;right:15px;background:#fffef4ee;padding:6px 13px;border-radius:22px;font-size:11px;color:#657c65}.family-card-content{padding:21px}.family-title{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:18px}.family-title h2{font-size:23px;margin:0;color:#285748}.family-title small{font-size:12px;color:#83928d;text-align:left}.family-dialogue{display:grid;gap:14px}.family-bubble{position:relative;background:#f1f7ed;border:1px solid #d9e7cf;border-radius:16px 5px 16px 16px;padding:12px 16px;margin-inline-end:22px}.family-bubble.role-1{background:#f4f0f9;border-color:#e3d9f0;border-radius:5px 16px 16px 16px;margin-inline-end:0;margin-inline-start:22px}.family-bubble-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.family-bubble-head b{font-size:11px;color:#6c8266}.family-bubble.role-1 .family-bubble-head b{color:#8b78a0}.family-line-sound{background:none;border:0;border-radius:50%;cursor:pointer;font-size:14px;padding:4px}.family-line-sound:hover{background:#ffffffaa}.family-bubble p{font:700 21px/1.9 Cairo;margin:5px 0;color:#315c4a}.family-bubble.role-1 p{color:#57486d}.family-bubble small{display:block;text-align:left;font-size:12px;line-height:1.7;color:#7c8981}.family-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px;padding-top:15px;border-top:1px solid #e7ece1}.family-actions button{background:#edf4e9;border:1px solid #dce6d3;border-radius:11px;padding:11px 4px;font:600 12px Cairo;color:#446447;cursor:pointer}.family-actions button:hover{background:#deedd5}.family-legend{display:flex;gap:19px;flex-wrap:wrap;font-size:11px;color:#75806b;margin:20px 0}.family-card.excellent{border:2px solid #67ac81}.family-card.excellent .family-status{background:#e4f5e3;color:#2a6b42}.family-card.very-good{border:2px solid #6c9dc7}.family-card.very-good .family-status{background:#e3f0ff;color:#32678f}.family-card.good{border:2px solid #d7a458}.family-card.good .family-status{background:#fff1d7;color:#9b691f}.family-card.weak{border:2px solid #ce8d83}.family-card.weak .family-status{background:#ffebe5;color:#a45047}.family-end{padding:25px;text-align:center;margin-top:26px;background:#eef3ea;border-radius:18px;color:#75816d}.family-end b{color:#486b4a}.family-end p{font-size:12px;line-height:1.9}.family-map-detail{padding:18px}.family-map-detail img{width:100%;aspect-ratio:3/2;object-fit:contain;border-radius:15px}.family-map-detail p{font-size:12px;line-height:1.9;color:#74826a}.family-archive-icon{font-size:55px;display:block;text-align:center;margin:20px}.family-city-pilot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px;border-radius:19px;background:linear-gradient(110deg,#e6f1e1,#f1edf8);margin:20px 0}.family-city-pilot p{font-size:12px;color:#738169;margin-bottom:0}.family-city-pilot b{font-size:20px;color:#3d644b}.city-stats{display:none!important}.family-pending{max-width:650px;margin:40px auto;padding:40px;text-align:center;background:#f3f5ed;border:1px solid #e0e7d8;border-radius:24px}.family-pending>span{font-size:58px}.family-pending>p{line-height:2;color:#708065;margin:20px 0}.family-pending .btn{margin:6px}.family-report-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:25px 0}.family-report-cards button{overflow:hidden;border:1px solid #dae5d5;border-radius:17px;background:white;padding:0 0 20px;cursor:pointer;font-family:Cairo;color:#3c674a}.family-report-cards img{width:100%;aspect-ratio:3/2;object-fit:contain;display:block}.family-report-cards b,.family-report-cards span{display:block;margin:12px 5px 0}.family-report-cards span{font-size:11px}.family-report-cards .excellent{border:2px solid #67ac81}dialog:has(.family-modal){max-width:800px;width:calc(100% - 26px);padding:0;border-radius:23px;max-height:92vh}.family-modal-image{aspect-ratio:3/2;background:#f0f5ec}.family-modal-image img{width:100%;height:100%;object-fit:contain}.family-modal-content{padding:23px}.family-modal-content h2{font-size:25px;color:#2d5a43;margin-top:0}.family-modal-tabs{display:flex;gap:10px;background:#edf3e7;padding:6px;border-radius:13px;margin:18px 0}.family-modal-tabs button{flex:1;background:none;border:0;border-radius:10px;padding:10px;font:700 13px Cairo;color:#6c8061;cursor:pointer}.family-modal-tabs .active{background:#fffef8;color:#315e3e}.family-activity-start,.family-activity-finish{text-align:center;padding:20px 0}.family-activity-start>span,.family-activity-finish>span{font-size:55px}.family-activity-start p{color:#829076;font-size:13px}.family-activity-finish .btn{margin:5px}.family-activity-finish.excellent{color:#278551}.family-activity-finish.very-good{color:#3281bd}.family-activity-finish.good{color:#b57114}.family-activity-finish.weak{color:#bd524c}.family-choices{display:grid;gap:13px;margin:24px 0}.family-choices button{background:#f4f7e9;border:2px solid #dce7c9;padding:17px;border-radius:14px;font:700 19px Cairo;color:#46643b;cursor:pointer}.family-choices button:hover{background:#e7f0d3;border-color:#9eb87d}.family-activity h3{font-size:24px;line-height:1.9}.family-modal-content label{display:block;font-size:12px;margin:15px 0 8px}.family-modal-content select,.family-modal-content textarea{width:100%;border:1px solid #d5e0cd;border-radius:11px;padding:10px;font:16px Cairo;box-sizing:border-box}.family-speech-target{font-size:25px;line-height:2;color:#335f45}.family-note{font-size:11px;color:#8a947e;line-height:1.9}.family-modal-content #family-speech-feedback{padding:14px;color:#637959;font-size:13px}@media(max-width:1000px){.family-counters{grid-template-columns:repeat(3,1fr)}.family-card-grid{gap:18px}.family-card-content{padding:16px}.family-bubble p{font-size:19px}}@media(max-width:650px){.family-card-grid{grid-template-columns:1fr}.family-heading{padding:22px}.family-heading h1{font-size:31px}.family-heading h1 small{font-size:20px}.family-heading p{font-size:12px}.family-card-content{padding:18px}.family-bubble p{font-size:21px}.family-counters{gap:7px}.family-counters>div{padding:11px 4px}.family-counters strong{font-size:23px}.family-counters small{font-size:9px}.family-report{padding:14px}.family-report-title h2{font-size:20px}.family-card-grid{gap:24px}.family-topbar{gap:6px}.family-topbar .btn{font-size:11px}.family-report-cards{grid-template-columns:repeat(2,1fr)}.family-city-pilot{align-items:start;flex-direction:column}.family-bubble{margin-inline-end:14px}.family-bubble.role-1{margin-inline-start:14px}.family-title h2{font-size:23px}.family-title small{font-size:11px}.family-actions button{font-size:11px}.family-modal-content{padding:17px}.family-legend{gap:12px}.family-pending{padding:25px}.shell:has(.family-page)>.content{padding:15px}}
/* Dialogue is visually inside each cartoon, beside its speakers. */
.comic-card-heading{padding:17px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.comic-card-heading .family-title{margin:0;display:block}.comic-card-heading .family-title h2{font-size:21px}.comic-card-heading .family-title small{display:block;text-align:start;margin-top:4px}.comic-number{display:inline-grid;place-items:center;background:#2b8ba1;color:white;border-radius:50%;width:28px;height:28px;font-size:14px;margin-inline-end:7px}.comic-status{font-size:10px;color:#75816e;background:#eef4e8;border-radius:20px;padding:6px 10px;white-space:nowrap}.comic-status.excellent{color:#2c7546;background:#e2f4df}.comic-status.very-good{color:#2a6e9c;background:#e4f1fb}.comic-status.good{color:#9a6722;background:#fff0d3}.comic-status.weak{color:#ad5446;background:#ffebe5}.family-comic{position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;container-type:inline-size;background:#f7f2e8;direction:ltr}.family-comic>img{display:block;width:100%;height:100%;object-fit:fill}.family-comic .comic-dialogue{position:absolute;inset:0;display:block;pointer-events:none}.family-comic .comic-speech{position:absolute;top:4%;right:3%;left:auto;bottom:auto;width:45%;box-sizing:border-box;padding:9px 11px;margin:0;border:2px solid #7773a0;border-radius:15px;background:#fffffff5;pointer-events:auto;box-shadow:0 2px 0 #7773a01a;direction:rtl}.family-comic .comic-speech.speech-1{left:3%;right:auto;background:#fffffff5}.family-comic .comic-speech.speech-2{top:auto;bottom:3%;right:7%;left:auto;width:86%;background:#fffffff5}.family-comic .comic-speech .family-bubble-head{min-height:16px;margin-bottom:2px}.family-comic .comic-speech .family-bubble-head b{font-size:clamp(9px,1.7cqw,11px);color:#58786b}.family-comic .comic-speech.role-1 .family-bubble-head b{color:#957394}.family-comic .comic-speech p{font-size:clamp(14px,3.35cqw,22px);font-weight:700;line-height:1.55;margin:2px 0 4px;color:#2e4f45;text-align:center;overflow-wrap:normal}.family-comic .comic-speech small{font-size:clamp(11px,2.2cqw,14px);line-height:1.45;text-align:center;color:#b04e77}.family-comic .comic-speech .family-line-sound{padding:0;font-size:clamp(11px,2cqw,13px)}.comic-speech::after{content:'';position:absolute;bottom:-19px;right:22%;border-top:19px solid #7773a0;border-left:7px solid transparent;border-right:7px solid transparent}.comic-speech::before{content:'';position:absolute;bottom:-14px;right:calc(22% + 2px);border-top:15px solid white;border-left:5px solid transparent;border-right:5px solid transparent;z-index:1}.comic-speech.speech-1::after{left:22%;right:auto}.comic-speech.speech-1::before{left:calc(22% + 2px);right:auto}.comic-speech.speech-2::after{top:-19px;bottom:auto;right:20%;border-top:0;border-bottom:19px solid #7773a0}.comic-speech.speech-2::before{top:-14px;bottom:auto;right:calc(20% + 2px);border-top:0;border-bottom:15px solid white}.comic-card-footer{padding:12px 17px 17px}.comic-card-footer .family-actions{margin-top:0;padding-top:0;border:0}.family-modal>.family-comic{max-height:none}.family-report-cards img{aspect-ratio:4/5;object-fit:contain}.family-map-detail img{aspect-ratio:4/5;max-height:320px;object-fit:contain}@media(max-width:650px){.comic-card-heading{padding:13px 14px 10px}.comic-card-heading .family-title h2{font-size:20px}.family-comic .comic-speech{padding:7px 8px;border-radius:12px;top:3%;right:2%;width:46%}.family-comic .comic-speech.speech-1{left:2%}.family-comic .comic-speech.speech-2{right:5%;width:90%;bottom:2%}.comic-card-footer{padding:12px}.comic-status{font-size:9px;padding:5px 7px}.family-comic .comic-speech .family-bubble-head b{font-size:9px}}
.family-comic.comic-morning .speech-0{top:1%;padding-top:5px;padding-bottom:5px}
.family-card-grid{max-width:1024px;margin-inline:auto}.family-comic .comic-speech small{font-size:clamp(13px,2.65cqw,16px)}.family-comic .comic-speech .family-bubble-head b{font-size:clamp(12px,2.5cqw,15px)}.card-score{font-size:12px;white-space:nowrap;color:#925d14;background:#fff2cf;padding:6px 9px;border-radius:15px}.comic-card-heading{flex-wrap:wrap}.comic-card-heading .family-title{flex:1;min-width:160px}.platform-score{background:#fff1bd;color:#76500c;border:1px solid #dfbd60;border-radius:22px;padding:6px 12px;font:700 14px Cairo;white-space:nowrap;cursor:pointer}.family-game-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.family-game-picker button{display:grid;gap:8px;justify-items:center;border:1px solid #d2dfcd;border-radius:18px;background:#f2f8ed;padding:22px;font:16px Cairo;cursor:pointer}.family-game-picker span{font-size:35px}.linked-card{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:15px}.live-game-score{position:sticky;top:82px;z-index:15;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff4cd;border:2px solid #e2bd4d;border-radius:15px;padding:12px 18px;margin-bottom:15px}.live-game-score b{font-size:22px}.live-game-score small{font-size:11px}.live-game-score progress{width:120px;accent-color:#2f9375}.live-game-score:empty{display:none}.hive-hud>span:nth-child(2){display:none}@media(max-width:650px){.apphead{flex-wrap:wrap}.platform-score{font-size:12px;padding:4px 9px}.family-card-grid{width:92%}.family-comic .comic-speech .family-bubble-head b{font-size:12px}.family-comic .comic-speech small{font-size:13px}.family-comic .comic-speech{padding:5px 6px}.family-game-picker{gap:10px}.live-game-score{top:145px}.live-game-score b{font-size:18px}}
@media(prefers-reduced-motion:no-preference){.live-game-score span b{display:inline-block;animation:score-glow .4s ease-out}@keyframes score-glow{from{transform:scale(1.4);color:#d19000}to{transform:scale(1)}}}
@media(max-width:650px){.family-comic>img{position:absolute;top:14%;left:0;width:100%;height:100%}.comic-card-heading .family-title{min-width:145px}.comic-card-heading{gap:6px}.comic-status{margin-inline-start:auto}}