/* Reference layout in 1284-unit coordinates, scaled together without scrolling.
   The supplied WEBP is an intact atlas: CSS selects the original icon artwork. */
body:not(.menu-open) #game{padding-top:0;background:linear-gradient(#dce5ec,#dbe6ed 200px,#caeef8 65%,#9fd0ef)}
/* Leave breathing room below the banner, including the board focus outline. */
#game>.tip{margin-bottom:14px}
#hud{position:relative;height:var(--hud-height,145px);width:calc(100% + 32px);margin-left:-16px;flex:none;z-index:2}
#hud .hud-layout{position:absolute;left:50%;top:0;width:1284px;height:440px;transform:translateX(-50%) scale(var(--hud-scale,.33));transform-origin:top center}
#hud .hud-row,#hud .progress-row,#hud .tools,#hud .level-label{display:contents}
#hud #pause-button,#hud #restart-button{position:absolute;padding:0;border:0;border-radius:0;box-shadow:none;opacity:1;background-image:url('./assets/hud-reference.webp');background-size:1284px 472px;background-repeat:no-repeat;filter:none}
#hud #pause-button{left:42px;top:166px;width:116px;height:116px;background-position:-42px -166px}
/* Display only the illustrated button, clipping its surrounding asset canvas. */
#hud #restart-button{left:181px;top:169px;width:116px;height:110px;border:2px solid #347fbc;border-radius:36px;background:#3c9fed url('./assets/buttons/restart.webp') -38px -39px / 192px 192px no-repeat;background-origin:border-box;box-shadow:0 3px 3px #536b7566;overflow:hidden;transition:opacity .12s,filter .12s,transform .1s}
#hud #pause-button :is(svg,img.button-icon){display:none}
#hud #restart-button:disabled{opacity:.48;filter:saturate(.45);cursor:default}
#hud #pause-button:active,#hud #restart-button:active:not(:disabled){box-shadow:none!important;transform:translateY(3px)}
#hud #level-number{position:absolute;left:494px;top:175px;width:296px;height:98px;min-width:0;padding:0 9px;display:flex;justify-content:center;align-items:center;border:3px solid #347eb8;border-radius:36px;background:linear-gradient(#51afe8,#3e8ed9);box-shadow:0 3px 3px #51677265;color:#fff;font-size:50px;line-height:1;letter-spacing:0;white-space:nowrap;text-shadow:0 3px 2px #2e678c}
#hud #timer-pill{position:absolute;left:494px;top:293px;width:298px;height:98px;padding:0 15px 0 78px;border:3px solid #327bab;border-radius:41px;background:#4aa7e0;box-shadow:0 3px 2px #556f8744;gap:0;color:#fff}
#hud #timer-pill::before{content:'';position:absolute;inset:8px 10px;border-radius:29px;background:linear-gradient(#397fd3,#3275ca);pointer-events:none}
#hud .hud-stopwatch{position:absolute;left:-13px;top:-19px;width:102px;height:119px;background:url('./assets/hud-reference.webp') -484px -277px / 1284px 472px no-repeat;z-index:1}
#hud #timer{position:relative;display:block;flex:1;text-align:center;font-size:57px;line-height:1;letter-spacing:-1px;text-shadow:0 3px 2px #245284;font-variant-numeric:tabular-nums}
#hud #timer-pill.urgent::before{background:linear-gradient(#c54b69,#a73253)}
#hud #timer-pill.urgent{color:#fff}
#hud #hud-coins{position:absolute;left:922px;top:175px;width:315px;height:97px;min-width:0;padding:0 15px 0 126px;border:2px solid #adb1ce;border-radius:38px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#fff 0%,#f7f5fc 22%,#d4cee5 73%);box-shadow:0 4px 3px #5c687466;gap:0;color:#893c20;text-shadow:none}
/* Keep only the coin and plus silhouettes: the atlas's rectangular patch
   contains an old counter edge that must not cover the live counter face. */
#hud .hud-coin-art{position:absolute;left:-8px;top:-7px;width:140px;height:121px;background:url('./assets/hud-reference.webp') -916px -170px / 1284px 472px no-repeat;clip-path:path('M 111 54 A 53 51 0 1 1 5 54 A 53 51 0 1 1 111 54 Z M 130 87 A 31 31 0 1 1 68 87 A 31 31 0 1 1 130 87 Z');pointer-events:none}
#hud #coins{position:relative;max-width:100%;font-size:50px;line-height:1;letter-spacing:-1px;white-space:nowrap}
#hud #hud-coins:active{transform:translateY(3px);box-shadow:0 1px 2px #5c687466!important}
#hud #level-name,#hud #rescue-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#hud #time-track{display:none}