/* Extra UI: damage panel, trial menu/HUD/result, settings panel, photo mode toolbar.  Matches the HUD look in style.css. */
.er-ui { font-family: "Trebuchet MS", "Segoe UI", sans-serif; color: #fff7de; text-shadow: 0 1px 3px #000a; box-sizing: border-box; }
.er-ui * { box-sizing: border-box; }
.er-ui[hidden], .er-ui .hidden { display: none !important; }
body.photo-hide-ui #hud, body.photo-hide-ui #gamehud, body.photo-hide-ui .er-ui:not(.er-photo-bar) { display: none !important; }
.er-btn { background: #fff2; color: #fff7de; border: 1px solid #fff4; border-radius: 10px; padding: 4px 11px; font: 12px "Trebuchet MS", sans-serif; cursor: pointer; }
.er-btn:hover { background: #fff4; } .er-btn:disabled { opacity: .4; cursor: default; }
.er-btn.go { background: #b9531f; border-color: #ffb36b; } .er-btn.go:hover { background: #d4662c; }
.er-panel { background: #000c; border: 1px solid #fff2; border-radius: 12px; padding: 12px 16px; pointer-events: auto; }
.er-panel h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; }

/* damage panel */
.er-dmg { position: fixed; right: 20px; top: 120px; width: 230px; z-index: 6; font-size: 12px; pointer-events: none; }
.er-dmg .er-panel { padding: 9px 12px; }
.er-dmg h3 { font-size: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.er-dmg .row { display: flex; justify-content: space-between; margin: 2px 0; } .er-dmg .row b { color: #ffd34d; font-weight: bold; }
.er-dmg .big { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.1; }
.er-dmg .els { margin-top: 6px; border-top: 1px solid #fff2; padding-top: 5px; }
.er-dmg .el { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .er-dmg .el i { display: block; height: 6px; border-radius: 3px; min-width: 2px; }
.er-dmg .el span { width: 38px; opacity: .85; } .er-dmg .el em { font-style: normal; margin-left: auto; }
.er-dmg .foot { margin-top: 6px; opacity: .6; font-size: 10px; }
.c-fire { background: #ff9a4a; } .c-water { background: #5fc8ff; } .c-earth { background: #d3a35e; } .c-wind { background: #aef0cf; } .c-none { background: #ddd; }

/* trial hud + prompt */
.er-trialhud { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: 360px; text-align: center; z-index: 6; pointer-events: none; }
.er-trialhud .tn { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; }
.er-trialhud .tt { font-size: 42px; font-weight: 900; line-height: 1.05; } .er-trialhud .tt.low { color: #ff7a5a; }
.er-trialhud .to { font-size: 14px; margin-top: 2px; } .er-trialhud .tp { font-size: 15px; font-weight: bold; color: #ffd34d; margin-top: 2px; }
.er-trialhud .cdn { font-size: 72px; font-weight: 900; color: #ffd34d; }
.er-prompt { position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%); background: #000a; border: 1px solid #fff4; border-radius: 16px; padding: 6px 16px; font-size: 14px; z-index: 6; pointer-events: none; }
.er-prompt b { color: #ffd34d; }
.er-flabel { position: fixed; left: 0; top: 0; z-index: 4; font-weight: 900; font-size: 15px; letter-spacing: 2px; pointer-events: none; will-change: transform; white-space: nowrap; padding: 1px 8px; border-radius: 8px; background: #0008; }

/* modal cards (trial menu, result, settings) */
.er-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 8; pointer-events: none; }
.er-modal > .er-panel { width: min(520px, 94vw); max-height: 86vh; overflow-y: auto; pointer-events: auto; background: #0b130fee; border-color: #fff3; box-shadow: 0 8px 40px #000a; }
.er-modal h2 { margin: 0 0 6px; font-weight: normal; letter-spacing: 3px; text-transform: uppercase; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.er-trial { border: 1px solid #fff2; border-radius: 10px; padding: 8px 10px; margin: 8px 0; display: flex; gap: 10px; align-items: center; background: #fff1; }
.er-trial .tx { flex: 1; } .er-trial .tx b { font-size: 14px; letter-spacing: 1px; } .er-trial .tx p { margin: 2px 0 0; font-size: 12px; opacity: .8; } .er-trial .tx small { display: block; margin-top: 3px; color: #ffd34d; font-size: 11px; }
.er-result .big { font-size: 38px; font-weight: 900; letter-spacing: 3px; text-align: center; margin: 4px 0; } .er-result .big.win { color: #9fffb0; } .er-result .big.lose { color: #ff7a5a; }
.er-result p { text-align: center; margin: 4px 0; font-size: 14px; } .er-result .rw { color: #ffd34d; }
.er-note { font-size: 11px; opacity: .65; margin-top: 6px; }

/* settings panel */
.er-settings .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 7px 0; font-size: 13px; }
.er-settings .row small { display: block; opacity: .6; font-size: 10px; }
.er-settings input[type=range] { width: 150px; accent-color: #ff9a3c; cursor: pointer; }
.er-settings input[type=checkbox] { width: 18px; height: 18px; accent-color: #ff9a3c; cursor: pointer; }
.er-settings select { background: #fff2; color: #fff7de; border: 1px solid #fff3; border-radius: 8px; padding: 3px 6px; font: 12px "Trebuchet MS", sans-serif; } .er-settings select option { color: #111; }
.er-settings .keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; margin-top: 6px; } .er-settings .keys b { color: #ffd34d; white-space: nowrap; }
.er-settings hr { border: 0; border-top: 1px solid #fff2; margin: 10px 0; }
#gearbtn { background: #0008; color: #fff7de; border: 1px solid #fff3; border-radius: 14px; padding: 5px 10px; font: 13px "Trebuchet MS", sans-serif; cursor: pointer; margin-right: 4px; }
#gearbtn:hover { background: #000b; }

/* photo mode */
.er-photo-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9; background: #000b; border: 1px solid #fff3; border-radius: 16px; padding: 7px 12px; font-size: 12px; pointer-events: auto; opacity: .35; transition: opacity .25s; }
.er-photo-bar:hover, .er-photo-bar:focus-within { opacity: 1; }
.er-photo-bar input[type=range] { width: 110px; accent-color: #ff9a3c; }
.er-photo-bar .hint { opacity: .7; font-size: 11px; max-width: 220px; line-height: 1.2; }
.er-photo-bar .er-btn { white-space: nowrap; } .er-photo-bar label { white-space: nowrap; }