/* User-selected desktop compositions; compact screens retain the shared layout. */
.preview-side{display:contents}.result-best{display:none}
.friend-result[hidden]{display:none!important}
.friend-result img{object-fit:contain}
@media(min-width:1000px) and (min-height:600px){

 #startScreen .modal-frame{width:880px;max-width:90%;padding:24px 28px 28px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px 26px;}
 #startScreen .overhang-badge{position:static;grid-column:1/-1;justify-self:end;margin:0;}
 #startScreen .start-top-row{grid-column:1/-1;margin:0 0 0 62px;gap:16px;align-items:center;}
 #startScreen .modal-title-start{font-size:25px;}
 #startScreen .jump-guide-box{grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;background:#EAF3F7;border:1.5px solid #79A9BE;border-radius:8px;padding:12px;margin:0;}
 #startScreen .jump-guide-box svg{width:100%;height:auto!important;min-width:0;background:#FFFDF9;border:1px solid #79A9BE;border-radius:5px;}
 #startScreen .preview-side{grid-column:2;border-left:1px solid #d9cebd;padding-left:24px;display:flex;flex-direction:column;gap:22px;}
 #startScreen #openingProgress{display:block;background:none;border:0;padding:0;margin:0;font-size:15px;}
 #startScreen .first-collection{align-items:flex-start;gap:10px;padding:0;}
 #startScreen .coin-mini{width:25px;height:25px;flex-shrink:0;margin-top:2px;}
 #startScreen .detail{font-size:13px;line-height:1.45;margin-top:4px;}
 #startScreen .modal-bottom-row{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:0;}
 #startScreen .difficulty-options{width:100%;gap:6px;}
 #startScreen .difficulty-options label{min-width:0;flex:1;min-height:48px;}
 #startScreen .difficulty-options legend{text-align:left;margin-bottom:8px;font-size:13px;}
 #startScreen #startBtn{width:100%;height:50px;justify-content:center;}
 
#endScreen .modal-frame{width:880px;max-width:90%;padding:24px 28px 28px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px 26px;}
#endScreen .overhang-badge{position:static;grid-column:1/-1;justify-self:end;margin:0;}
#endScreen .victory-stars-inline-bar{grid-column:1/-1;margin:0 0 0 62px;display:flex;justify-content:space-between;align-items:center;}
#endScreen .modal-title-victory{font-size:25px;margin:0;}
#endScreen .stars-comment-pill{display:none;}
#endScreen .star-badge{width:38px;height:38px;font-size:24px;}
#endScreen .star-badge.s2{width:44px;height:44px;font-size:28px;}
#endScreen .victory-items-grid{grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;background:#EAF3F7;border:1.5px solid #79A9BE;border-radius:8px;padding:12px;margin:0;}
#endScreen .item-card,#endScreen .rare-card.collected{background:#FFFDF9;border:1px solid #79A9BE;border-radius:5px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:20px 12px;text-align:center;}
#endScreen .item-icon-box{width:76px;height:76px;background:transparent;border:0;box-shadow:none;}
#endScreen .reward-art{width:64px;height:64px;max-width:none;max-height:none;object-fit:contain;}
#endScreen .item-val{font:700 34px var(--courier);}
#endScreen .item-total{font-size:20px;}
#endScreen .item-meta{gap:6px;}
#endScreen .item-lbl{font-size:14px;}
#endScreen #resultRareStatus{font-size:13px;color:#4f7044;}
#endScreen .preview-side{grid-column:2;border-left:1px solid #d9cebd;padding-left:24px;display:flex;flex-direction:column;gap:12px;}
.preview-best{display:flex;flex-direction:column;gap:3px;font:600 14px var(--sans);}.preview-best strong{font:700 30px var(--courier)}.preview-best small{font-size:18px;color:#666}.best-before{font-size:12px;color:#666;}
#endScreen .wallet-strip{font-size:13px;padding:8px 10px;margin:0;gap:6px;}
#endScreen .wallet-strip strong{font-size:25px;}
#endScreen .wallet-note{font-size:12px;line-height:1.4;margin:0;}
#endScreen .modal-bottom-row{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px;margin-top:4px;}
#endScreen .modal-bottom-row>div{display:flex;width:100%;}
#endScreen #nextStageBtn,#endScreen #restartBtn{width:100%;height:46px;justify-content:center;}
#endScreen #restartBtn{background:#FFF7EB;flex:1;}
#endScreen #mapBtn{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;height:46px;background:#FFF7EB;border:2px solid #262523;border-radius:5px;opacity:.45;cursor:default;font:600 14px var(--sans);}
#endScreen .save-scope{font-size:10px;margin:0;text-align:center;}

#startScreen .modal-frame,#endScreen .modal-frame{max-width:90%;}
#startScreen .progress-study .remaining{margin:8px 0;padding:6px;font-size:12px;}
#startScreen .progress-study .track{margin:8px 0;}
#endScreen .result-best{display:flex;flex-direction:column;gap:3px;font:600 14px var(--sans)}
#endScreen .result-best strong{font:700 28px var(--courier)}
#endScreen .result-best small{font:500 12px var(--sans)}
#endScreen .victory-items-grid:has(.friend-result:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr));}
#endScreen .friend-result .reward-art{width:104px;height:104px;}
#endScreen .friend-result .item-val{font-size:21px;}
#endScreen .victory-items-grid:has(.friend-result:not([hidden])) .item-val{font-size:26px;}
#endScreen .victory-items-grid:has(.friend-result:not([hidden])) .friend-result .item-val{font-size:21px;}
#endScreen .victory-items-grid:has(.friend-result:not([hidden])) .item-card{padding:12px 8px;}
#endScreen .stars-comment-pill{display:block;font-size:11px;}
}
#friendScreen .modal-frame{width:460px;max-width:92%;padding:24px;gap:14px;}
.friend-portrait-panel{margin-top:16px;background:#EAF3F7;border:1.5px solid #79A9BE;border-radius:8px;padding:12px;}
.friend-white{height:205px;background:#FFFDF9;border:1px solid #79A9BE;border-radius:5px;display:flex;justify-content:center;align-items:center;position:relative;}
.friend-white>img{width:250px;height:205px;object-fit:contain;image-rendering:pixelated;}
.friend-heart{position:absolute;top:26px;right:55px;width:24px;height:22px;}
.friend-copy{text-align:center;font:500 15px var(--sans);}
.friend-copy h2{font:700 30px var(--courier);margin:0;}
.friend-copy p{margin:8px 0 0;}
.friend-actions{display:flex;gap:10px;}
.friend-actions button{flex:1;min-height:46px;font:600 14px var(--sans);justify-content:center;}
.friend-video{border:2px solid #262523;background:#FFF7EB;border-radius:5px;color:#262523;}
.friend-video:disabled{opacity:.45;}
@media(max-height:599px) and (orientation:landscape){
#friendScreen .modal-frame{width:620px;display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:10px 18px;}
#friendScreen .friend-portrait-panel{grid-row:1/3;margin:0;}
#friendScreen .friend-white{height:140px;}
#friendScreen .friend-white>img{width:170px;height:140px;}
#friendScreen .friend-copy{align-self:end;}
#friendScreen .friend-copy h2{font-size:24px;}
#friendScreen .friend-copy p{font-size:12px;}
#friendScreen .friend-actions{align-self:start;}
#friendScreen .friend-actions button{font-size:12px;padding:6px;}
#friendScreen .friend-heart{right:18px;top:12px;width:18px;}
#endScreen .victory-items-grid:has(.friend-result:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr));}
#endScreen .friend-result .item-val{font-size:13px;}
#endScreen .friend-result .item-lbl{font-size:10px;}
}
/* Shared rows keep portraits, values and captions aligned despite optional detail. */
@media(min-width:1000px) and (min-height:600px){
 #endScreen .item-card,#endScreen .rare-card.collected{display:grid;grid-template-rows:104px 94px;align-content:center;justify-items:center;gap:12px;}
 #endScreen .item-icon-box{width:104px;height:104px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
 #endScreen .item-meta{width:100%;height:94px;display:grid;grid-template-rows:36px 22px 24px;gap:6px;align-items:center;justify-items:center;}
 #endScreen .item-val{line-height:1.15;}
 #endScreen .item-lbl{line-height:1.2;}
 #endScreen .previous-best{margin:0;}
}

/* Selected v16 friend introduction. Fixed heart anchor, independent of image bounds. */

#friendScreen .modal-frame{width:410px;max-width:92%;display:flex;flex-direction:column;align-items:center;padding:38px 28px 24px;gap:16px;}
#friendScreen .friend-portrait-panel{width:190px;height:155px;margin:20px 0 0;padding:0;background:#EAF3F7;border:2px solid #79A9BE;border-radius:50% 50% 42% 42%;position:relative;}
#friendScreen .friend-white{width:100%;height:100%;display:flex;position:relative;border:0;background:transparent;padding:0;overflow:visible;}
#friendScreen .friend-white>img{position:absolute;width:340px;height:290px;max-width:none;left:50%;top:50%;transform:translate(-50%,-56%);object-fit:contain;}
#friendScreen .friend-heart{width:25px;height:23px;left:auto;right:-28px;top:-4px;transform:rotate(0);}
#friendScreen .friend-copy{text-align:center;padding:0;margin:0;align-self:auto;}
#friendScreen .friend-copy h2{font-size:32px;}
#friendScreen .friend-copy p{font-size:15px;line-height:1.5;margin-top:9px;}
#friendScreen .friend-actions{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;}
#friendScreen .friend-actions .primary-action-btn{width:220px;min-width:0;flex:none;min-height:48px;justify-content:center;order:0;}
#friendScreen .friend-actions .friend-video{order:1;width:48px;height:48px;min-width:48px;flex:none;display:flex;align-items:center;justify-content:center;padding:0;}
@media(max-height:599px){#friendScreen .modal-frame{width:510px;padding:20px 24px 16px;display:grid;grid-template-columns:180px 1fr;gap:14px 20px;}#friendScreen .friend-portrait-panel{grid-row:1/3;width:155px;height:150px;margin:10px 0 0;justify-self:center;}#friendScreen .friend-white>img{width:270px;height:250px;}#friendScreen .friend-copy{align-self:end;}#friendScreen .friend-copy h2{font-size:26px;}#friendScreen .friend-copy p{font-size:13px;}#friendScreen .friend-actions{align-self:start;}#friendScreen .friend-actions .primary-action-btn{width:155px;font-size:14px;}#friendScreen .friend-heart{right:-22px;top:-7px;width:22px;}}

@media(min-height:600px){#friendScreen .modal-frame{width:430px;padding:42px 24px 24px;gap:18px;}#friendScreen .meet-heading{font:700 28px var(--courier);margin:0;text-align:center;}#friendScreen .friend-portrait-panel{margin:12px 0 0;}#friendScreen .friend-copy p{margin:0;font-size:19px;line-height:1.45;font-weight:500;}#friendScreen .friend-actions{margin-top:0;}}
@media(max-height:599px){#friendScreen .meet-heading{display:none}}
@media(min-height:600px){#friendScreen .friend-copy h2{display:none}}