/* Rad des Schicksals and the daily login bonus (ui/fortune.js, ui/wheel.js) */

/* ---------- tabs at the left edge under the Discord link (#edge, game.css) ---------- */
/* 30 px like the Discord tab: the timer of the bonus ("23:59:59") keeps 2 px to the edge of the screen */
.edge-tab { position: relative; width: 30px; padding: 2px; }
.edge-tab .et-ic { position: relative; display: flex; align-items: center; justify-content: center; height: 18px; }
.edge-tab .et-ic img { display: block; width: 16px; height: 16px; }
.edge-tab:hover .et-ic img { filter: brightness(1.25); }
.edge-tab.locked .et-ic img { filter: grayscale(.8) brightness(.7); }
.edge-tab .et-time { height: 8px; margin-bottom: 1px; font-size: 6px; line-height: 8px; text-align: center;
  color: var(--dim); white-space: nowrap; overflow: hidden; }
.edge-tab.ready .et-time { color: var(--gold); }
/* something to do: a red stud with a white "!" on the icon, only while it is so (like the hints of the menu bar) */
.et-dot { display: none; position: absolute; right: 0; top: 0; width: 7px; height: 7px; background: #d23a2c;
  box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 #ff8a78, inset 0 -1px 0 #8a1c14; }
.et-dot::before { content: ''; position: absolute; left: 3px; top: 1px; width: 1px; height: 3px; background: #fff; }
.et-dot::after { content: ''; position: absolute; left: 3px; top: 5px; width: 1px; height: 1px; background: #fff; }
.edge-tab.ready .et-dot { display: block; }
.edge-tab.ready { animation: et-ready 1.2s ease-in-out infinite; }
@keyframes et-ready {
  0%, 100% { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px #ffd24a, inset 0 0 0 2px var(--edge), 0 2px 0 1px rgba(0, 0, 0, .45); }
  50% { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze), inset 0 0 0 2px var(--edge), 0 2px 0 1px rgba(0, 0, 0, .45); }
}
/* "Rad bereit!" next to the tab until the window is opened; a stepped arrow points at the tab */
.et-bubble { position: absolute; left: 35px; top: 5px; height: 11px; padding: 0 4px; line-height: 11px; font-size: 7px; white-space: nowrap;
  color: #fff6dc; text-shadow: 1px 1px 0 var(--ink); background: linear-gradient(#c08c3c, #8c5f24);
  box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 #f6d27c, inset 0 -1px 0 #5a3c14; pointer-events: none; animation: et-bob 1s steps(1) infinite; }
.et-bubble::before { content: ''; position: absolute; left: -3px; top: 2px; width: 2px; height: 7px; background: #a8762e; }
.et-bubble::after { content: ''; position: absolute; left: -5px; top: 4px; width: 2px; height: 3px; background: #a8762e; }
@keyframes et-bob { 0% { transform: translateX(0); } 50% { transform: translateX(1px); } }

/* ---------- the wheel ---------- */
#wheel .win-body { padding: 5px; }
.wh-stage { display: flex; justify-content: center; }
.wh-cv { display: block; }
.wh-status { min-height: 10px; margin: 3px 0 2px; font-size: 8px; line-height: 10px; text-align: center; }
.wh-result { margin-top: 4px; }
.wh-opts { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.wh-opt { display: flex; align-items: center; gap: 4px; font-size: 7px; line-height: 8px; color: var(--dim); }
.wh-opt input { flex: none; }
.wh-opt span { min-width: 0; }

/* ---------- the login bonus: one card per day, seven in a row ---------- */
#daily .win-body { padding: 5px; }
.dl-head { margin-bottom: 4px; font-size: 8px; line-height: 9px; }
.dl-head .dim, .dl-head .red { margin-top: 1px; font-size: 7px; line-height: 8px; }
.dl-grid { display: grid; grid-template-columns: repeat(7, 26px); gap: 2px; }
.dl-card { position: relative; height: 36px; display: flex; flex-direction: column; align-items: center; padding-top: 1px;
  background: #15100d; box-shadow: inset 0 0 0 1px #33281d; }
.dl-num { font-size: 7px; line-height: 8px; color: var(--dim); }
.dl-card .cd-ic { margin: 1px 0; }
.dl-amt { font-size: 6px; line-height: 7px; letter-spacing: .5px; white-space: nowrap; }
.dl-card.done .cd-ic img { opacity: .4; }
.dl-card.done .dl-num { color: var(--green); }
.dl-tick { position: absolute; left: 7px; top: 10px; width: 12px; height: 12px; background: var(--ic-tick) 0 0 / 12px 12px no-repeat; }
.dl-card.today { background: #2a2018; animation: dl-today 1.2s ease-in-out infinite; }
.dl-card.today .dl-num { color: var(--gold); }
@keyframes dl-today { 0%, 100% { box-shadow: inset 0 0 0 1px #ffd24a; } 50% { box-shadow: inset 0 0 0 1px #6a5222; } }
.dl-card.next { box-shadow: inset 0 0 0 1px var(--bronze); }
.dl-card.pop { animation: dl-pop .4s steps(2) 1; }
@keyframes dl-pop { 0% { transform: translateY(-2px); } 100% { transform: none; } }
.dl-box { margin-top: 5px; }
.dl-btns { margin-top: 5px; }
.dl-btns .btn { min-width: 120px; }
.dl-hide { margin-top: 5px; }