/* Ember OT widgets. Neutral parchment styling that sits well in tibiacom and kathrine. */
.ember-box { background: #f1e0c6; border: 1px solid #a68a5c; border-radius: 4px; padding: 10px 14px; margin: 0 0 12px; color: #3b2a14; }
.ember-box h2 { margin: 4px 0 8px; font-size: 17px; color: #5a2800; }
.ember-small { font-size: 11px; color: #6b5636; }
.ember-sr, .ember-trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ember-dev { border-left: 4px solid #c2410c; background: linear-gradient(135deg, #fbe9d0, #f1e0c6); }
.ember-dev-badge { display: inline-block; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: #c2410c; border-radius: 10px; padding: 2px 9px; }
.ember-waitlist { background: #fff8ec; border: 1px solid #d4b98a; border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
.ember-waitlist > b { display: block; font-size: 14px; color: #5a2800; }

.ember-nl { margin: 6px 0 0; }
.ember-nl-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ember-nl input[type=email] { flex: 1; min-width: 180px; padding: 6px 8px; border: 1px solid #a68a5c; border-radius: 3px; font-size: 13px; }
.ember-nl button, .ember-box button { background: #c2410c; color: #fff; border: 1px solid #7c2d12; border-radius: 3px; padding: 6px 14px; font-weight: bold; cursor: pointer; font-size: 13px; }
.ember-nl button:hover, .ember-box button:hover { background: #9a3412; }
.ember-nl button[disabled] { opacity: .7; cursor: progress; }
.ember-nl-msg { display: block; min-height: 14px; margin-top: 4px; font-size: 12px; }
.ember-nl-msg.is-error { color: #b91c1c; }
.ember-nl-done { background: #e7f6e7; border: 1px solid #5aa95a; border-radius: 3px; padding: 8px 10px; color: #1e4d1e; }

.ember-captcha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ember-captcha img { border: 1px solid #a68a5c; border-radius: 3px; }
.ember-captcha input { font-family: Consolas, monospace; font-size: 16px; letter-spacing: 4px; text-transform: uppercase; }
.ember-suggest { margin-left: 8px; font-size: 11px; }

.ember-table td { vertical-align: top; }
.ember-value { font-weight: bold; color: #5a2800; }
.ember-num td { text-align: right; } .ember-num td:first-child { text-align: left; }
.ember-hp { color: #b91c1c; font-weight: bold; } .ember-mana { color: #1d4ed8; font-weight: bold; } .ember-cap { color: #8a6100; font-weight: bold; }
.ember-bar { display: inline-block; width: 60%; height: 8px; background: #e5d3b3; border: 1px solid #b89b6c; border-radius: 4px; vertical-align: middle; overflow: hidden; margin-right: 6px; }
.ember-bar span { display: block; height: 100%; background: linear-gradient(90deg, #9a3412, #f59e0b); }
.ember-conduct li, .ember-notes li { margin-bottom: 6px; }

.ember-ok { background: #e7f6e7; border-color: #5aa95a; color: #1e4d1e; }
.ember-err { background: #fde8e8; border-color: #c25b5b; color: #7f1d1d; }
.ember-balance { float: right; text-align: right; background: #fff8ec; border: 1px solid #d4b98a; border-radius: 4px; padding: 6px 12px; margin: 0 0 8px 12px; }
.ember-balance span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #6b5636; }
.ember-balance b { font-size: 20px; color: #5a2800; }
.ember-sandbox { clear: both; background: #fbe9d0; border: 1px dashed #c2410c; border-radius: 4px; padding: 8px 10px; margin-top: 6px; }
.ember-packages { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.ember-package { flex: 1 1 110px; cursor: pointer; }
.ember-package > input { position: absolute; opacity: 0; }
.ember-package > span { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px 6px; background: #fff8ec; border: 2px solid #d4b98a; border-radius: 6px; text-align: center; }
.ember-package b { font-size: 20px; color: #5a2800; }
.ember-package small { font-size: 11px; color: #6b5636; }
.ember-package em { font-style: normal; font-size: 11px; font-weight: bold; color: #15803d; }
.ember-package strong { margin-top: 4px; font-size: 14px; color: #3b2a14; }
.ember-package input[type=number] { width: 80px; padding: 2px 4px; text-align: center; }
.ember-package:hover > span { border-color: #c2410c; }
.ember-package > input:checked + span { border-color: #c2410c; background: #fbe9d0; box-shadow: 0 0 0 2px rgba(194, 65, 12, .25); }
.ember-package > input:focus-visible + span { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.ember-donate button { background: #c2410c; color: #fff; border: 1px solid #7c2d12; border-radius: 3px; padding: 7px 16px; font-weight: bold; cursor: pointer; font-size: 13px; }
.ember-donate button:hover { background: #9a3412; }