/* Let the title screen grow with its content instead of clipping at viewport height. */
.game-shell:has(#menu:not(.hidden)){
 height:auto;
 min-height:calc(100svh - 160px);
 max-height:none;
}
.game-shell:has(#menu:not(.hidden))>canvas{position:absolute;inset:0}
#menu.title-screen{
 position:relative;
 inset:auto;
 min-height:inherit;
 display:grid;
 grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
 grid-template-rows:1fr auto;
 align-items:center;
 gap:32px 24px;
 padding:36px 5.5% 24px;
}
#menu .intro{grid-column:1;grid-row:1;align-self:center;width:100%;max-width:650px;margin:0}
#menu .intro h1{font-size:clamp(46px,5.5vw,82px);margin:16px 0;line-height:1.05}
#menu .intro p{margin:18px 0;max-width:440px}
#menu .title-rule{margin-top:18px}
#menu .title-actions{gap:12px}
#menu .menu-controls{flex-wrap:wrap;margin-top:20px;gap:12px}
#menu .record:empty{display:none}
#menu .gold-callout{position:static;grid-column:2;grid-row:1;align-self:end;justify-self:end;margin:0 0 18px;max-width:100%}
#menu .title-stats{position:static;grid-column:1/-1;grid-row:2;align-self:end;margin:0;gap:28px;padding-top:22px;flex-wrap:wrap}
#menu .title-stats>div{min-width:0}
@media(min-width:761px) and (max-height:750px){
 #menu.title-screen{padding-top:24px;gap:24px}
 #menu .intro h1{font-size:clamp(42px,4.6vw,62px);margin:12px 0}
 #menu .intro p{font-size:19px;line-height:1.3;margin:14px 0}
 #menu .title-rule{margin-top:12px}
 #menu .hero-contract{margin-top:9px;padding:6px 12px}
 #menu .title-actions .primary{padding:12px 16px;min-width:230px}
 #menu .menu-controls{margin-top:16px}
 #menu .title-stats{padding-top:16px}
}
@media(max-width:760px){
 .game-shell:has(#menu:not(.hidden)){min-height:calc(100svh - 147px)}
 #menu.title-screen{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;padding:30px 5% 24px;gap:32px}
 #menu .intro{max-width:none;text-align:center}
 #menu .intro h1{font-size:clamp(34px,10.5vw,61px);margin:18px 0}
 #menu .intro p{margin:18px auto;max-width:295px;font-size:20px}
 #menu .title-rule{margin:18px auto 0}
 #menu .gold-callout{display:none}
 #menu .title-stats{grid-column:1;gap:10px;flex-wrap:nowrap;justify-content:space-between}
 #menu .title-stats p{display:none}
 #menu .menu-controls{justify-content:center}
}

/* Keep full published addresses readable on narrow screens. */
.hero-contract-status{min-width:0;overflow-wrap:anywhere;user-select:all;font:13px/1.6 monospace}.hero-contract-label,.hero-contract-spark{flex-shrink:0}
.rewards-facts>div{min-width:0}.rewards-facts #rewardContract{font:13px/1.6 monospace;overflow-wrap:anywhere;user-select:all}