/* Rating details and result comparison use the existing dark / mint palette. */
.rating-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;margin:0 0 20px;padding:20px 23px;border:1px solid #a8e7cc45;border-radius:12px;background:linear-gradient(110deg,#213a35,#162629);color:var(--text)}
.rating-card>span:first-child{min-width:0;display:grid;gap:7px;margin-right:auto}
.rating-label{font-size:13px;font-weight:550}
.rating-card small{color:var(--muted);font-size:11px}
.rating-card strong{white-space:nowrap;flex-shrink:0;font-size:32px;font-weight:550;color:var(--accent);font-variant-numeric:tabular-nums}
.rating-question{border:1px solid #7ba08d80;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:12px;color:var(--accent);flex-shrink:0}
.rating-card:hover{border-color:var(--accent)}
.rating-popover{position:fixed;z-index:42;padding:20px;border:1px solid #55726c;border-radius:14px;box-shadow:0 15px 45px #0008;background:#1c2e30;color:var(--text);font-size:12px;line-height:1.65;overflow:auto;overscroll-behavior:contain}
.rating-popover h2{font-size:17px;margin:0 24px 12px 0;font-weight:600;color:var(--accent)}
.rating-popover p{margin:10px 0}
#rating-snapshot,#rating-current{font-size:11px;color:#accac0}
#stats-screen .stat-cards{margin-top:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
#stats-screen .stat-card{min-width:0}
#stats-count{overflow-wrap:anywhere}
#rank-progress{line-height:1.6}
.comparison-toggle{position:absolute;inset:0 0 0 var(--field-divider,50%);border:0;padding:0;background:transparent;border-radius:0 12px 12px 0;z-index:1;cursor:pointer;touch-action:manipulation}
.comparison-toggle:focus-visible{outline:1px solid #e8b779;outline-offset:-5px}
.grid-toggle{flex-shrink:0}
.grid-toggle.is-muted .mute-slash{display:block}
/* A playful size comparison: the foreground subjects share a visual baseline, not a real-world scale. */
.home-screen .hero-art{height:510px;min-width:0;align-self:center}
.home-screen .hero-art .art-halo{border-style:solid;opacity:.45;animation:none;top:45px;width:340px;height:340px;left:calc(50% - 170px)}
.home-screen .preview-tower,.home-screen .preview-giraffe,.home-screen .preview-lunar-module,.home-screen .preview-mriya{position:absolute;object-fit:contain;object-position:bottom;transition:left .65s,right .65s,bottom .65s,width .65s,height .65s;filter:drop-shadow(0 14px 17px #0006)}
.home-screen .preview-tower{height:77%;width:52%;left:-2%;bottom:8%;z-index:2;opacity:.85}
.home-screen .preview-giraffe{height:57%;width:36%;left:35%;bottom:7%;z-index:3}
.home-screen .preview-lunar-module{height:67%;width:77%;right:-5%;bottom:7%;z-index:1}
.home-screen .preview-mriya{height:17%;width:65%;left:26%;top:15%;z-index:0;object-position:center;opacity:.95}
.home-screen .preview-scale{position:absolute;inset:17% 2% 10% 0;border-top:1px dashed #90aaa934;border-bottom:1px solid #90aaa92b}
.home-screen .preview-scale:before,.home-screen .preview-scale:after{content:"";position:absolute;top:-5px;bottom:-5px;width:1px;background:repeating-linear-gradient(#90aaa94d 0 3px,transparent 3px 8px)}
.home-screen .preview-scale:before{left:0}.home-screen .preview-scale:after{right:0}
.home-screen .art-base{bottom:7%}
@media(min-width:761px) and (max-width:1050px){
 .home-screen .hero-art{height:440px}
 .home-screen .preview-tower{height:77%;left:-5%}
 .home-screen .preview-giraffe{left:30%;height:52%}
 .home-screen .preview-lunar-module{right:-4%;height:65%;width:83%}
 .home-screen .preview-mriya{top:17%;width:67%}
}
@media(max-width:760px){
 .home-screen{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-content:start;gap:14px 0;padding:22px 0 32px;min-height:calc(100dvh - 64px)}
 .home-screen .hero-copy{display:contents}
 .home-screen .hero-copy h1{grid-column:1;grid-row:1;align-self:center;font-size:clamp(58px,16vw,94px);line-height:.94;letter-spacing:-4px;margin:0;z-index:2}
 .home-screen .hero-art{position:relative;grid-column:2;grid-row:1;top:auto;right:auto;width:100%;height:290px;margin:0;opacity:1;mask-image:none;z-index:1}
 .home-screen .hero-copy h2,.home-screen .intro,.home-screen .hero-play,.home-screen .secondary-actions,.home-screen .rules-panel{grid-column:1/-1;max-width:none;width:100%;margin:0}
 .home-screen .hero-copy h2{font-size:20px;margin:0}
 .home-screen .intro{font-size:13px;margin:0 0 5px}
 .home-screen .hero-play{min-height:55px}
 .home-screen .secondary-actions{margin:0}
 .home-screen .rules-panel{margin:0}
 .home-screen .preview-tower{height:76%;width:66%;left:-14%;bottom:8%}
 .home-screen .preview-giraffe{height:53%;width:49%;left:22%;bottom:4%;z-index:3}
 .home-screen .preview-lunar-module{height:67%;width:105%;right:-7%;bottom:5%;z-index:1}
 .home-screen .preview-mriya{height:15%;width:77%;left:19%;top:27%;z-index:0}
 .home-screen .hero-art .art-halo{width:180px;height:220px;left:calc(50% - 90px);top:30px}
 .home-screen .art-grid{inset:24px 0 35px}
 .home-screen .preview-scale{inset:12% 0 8% -7%}
}
@media(max-width:360px){
 .header,.header-right,body[data-screen="game"] .header-right{gap:4px}
 .grid-toggle{width:30px;padding:6px}
 .music-player{width:90px}
 .track-controls .audio-toggle{width:30px}
 #sound-toggle{width:32px;padding:6px}
 .language select{font-size:10px;max-width:96px;padding-left:4px;padding-right:18px}
 .home-screen .hero-art{height:252px}
 .home-screen .hero-copy h1{font-size:58px}
 .rating-card{padding:18px 14px;gap:12px}
 .rating-card strong{font-size:clamp(20px,6vw,27px)}
}
@media(max-height:540px) and (min-width:761px){
 .home-screen .hero-art{height:340px}
}
@media(prefers-reduced-motion:reduce){
 .home-screen .hero-art *{animation:none!important;transition:none!important}
}
body[data-paused="true"] .home-screen *,body[data-paused="true"] .home-screen:before{animation-play-state:paused!important}

/* Text follows its language; the left reference/right answer geometry stays fixed. */
.header,.header-right,.game-top,.object-headings,.board-wrap,.music-player,.hero-art,.home-screen{direction:ltr}
html[lang="ur"] .hero-copy{direction:rtl}
.object-heading h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.7em;line-height:1.35}
.genre-chip{max-width:100%;min-width:0;overflow-wrap:anywhere}
.genre-chip span{min-width:0}
.primary{max-width:100%;white-space:normal}
html[lang="ur"] .hero-copy,html[lang="ur"] .how-card,html[lang="ur"] .settings-screen,html[lang="ur"] .statistics-screen{line-height:1.7}
html[lang="ur"] .hero-copy h1,.brand{direction:ltr}
html[lang="ur"] .eyebrow,html[lang="hi"] .eyebrow,html[lang="bn"] .eyebrow,html[lang="th"] .eyebrow{letter-spacing:0}
html[lang="ur"] .object-heading h2,html[lang="hi"] .object-heading h2,html[lang="bn"] .object-heading h2,html[lang="th"] .object-heading h2{line-height:1.5;max-height:3em}
.language select{max-width:145px}
.zoom-controls{direction:ltr}
.achievement-gallery,.stats-heading,.legend-summary{direction:ltr}
html[lang="ur"] .achievement-name,html[lang="ur"] .legend-tooltip{direction:rtl}

.home-screen:before{left:0;right:0}

@media(min-width:761px) and (max-width:1000px){
 body[data-screen="game"] .header{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:47px 29px;height:80px;column-gap:8px;row-gap:0}
 body[data-screen="game"] .brand{grid-row:1;grid-column:1}
 body[data-screen="game"] .header-right{grid-row:1;grid-column:2;justify-self:end}
 body[data-screen="game"] .game-top{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;width:100%;gap:6px}
 body[data-screen="game"] .game-top #menu{justify-self:start;min-height:26px;padding:0}
 body[data-screen="game"] .round-label{position:static;transform:none;grid-column:2}
 body[data-screen="game"] .timer{grid-column:3;justify-self:end}
}