/* The daily missions page (ภารกิจรายวัน, Content.open('daily'), js/content.js dailyPage; 2026-10-18) drawn like the quest
   board (css/mqboard.css): dark obsidian rows with gold, a state chip on each row, the goal with its progress, the reward
   things on their own tier's MIR4 plate, gold as a chip. Row states as the board's: claimable = the brightest (gold
   frame), under way / not begun = as drawn, claimed = calm grey under a ✓ stamp, locked = dark with the lock. Dimmed by
   colour, not opacity. Own colours on every piece, so the book skins (css/booklight.css, css/bookcontrast.css) leave it as it
   is. No soft halos round text: at most a crisp 1px ring. */
#content .dy-board { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid rgba(217, 164, 67, 0.35);
  background: radial-gradient(ellipse 90% 70% at 50% 40%, #1f1d24 0%, #161519 70%, #0f0e12 100%); color: #f2ead6; font-family: 'Mali', sans-serif; }
#content .dy-board button { font-family: 'Mali', sans-serif; }

/* ---- the strip: claimed x/y and its track ---- */
#content .dy-strip { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(217, 164, 67, 0.22); border-radius: 6px; background: linear-gradient(#1e1c22, #17161b); }
#content .dy-strip > b { flex: none; font: 700 14px Mali, sans-serif; color: #f2dfae; white-space: nowrap; }
/* (2026-10-19, the user: "เพิ่มปุ่มรับรางวัลทั้งหมดด้วย"): รับทั้งหมด at the end of the strip */
#content .dy-strip .dy-all { flex: none; margin-left: 2px; min-height: 30px; padding: 0 12px; white-space: nowrap; }
#content .dy-track { position: relative; display: block; flex: 1; min-width: 40px; height: 10px; border-radius: 5px; background: #0b0a0e; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#content .dy-track > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #b8862e, #f2c66a); transition: width 0.3s; }

/* ---- the state chips (the board's .mb-st) ---- */
#content .dy-st { display: inline-block; font: 700 11px/18px Fredoka, Mali, sans-serif; font-style: normal; padding: 0 8px; border-radius: 9px; white-space: nowrap; }
#content .dy-st.done { color: #9be38a; background: rgba(139, 227, 123, 0.14); }
#content .dy-st.can { color: #10230b; background: #8be37b; }
#content .dy-st.now { color: #1c1408; background: #f2c66a; }
#content .dy-st.open { color: #cfc4ad; background: rgba(255, 255, 255, 0.09); }
#content .dy-st.lock { color: #a39a86; background: rgba(255, 255, 255, 0.07); }

/* ---- the rows ---- */
#content .dy-rows { display: flex; flex-direction: column; gap: 4px; }
#content .dy-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'c1 c4' 'c3 c4'; align-items: center; gap: 6px 10px;
  padding: 9px 12px 9px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: linear-gradient(90deg, #22212a, #1b1a21); overflow: hidden; }
#content .dy-c1 { grid-area: c1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
#content .dy-c1 > b { font: 700 15px/1.3 Mali, sans-serif; color: #f4ead2; }
#content .dy-c1 > small { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font: 500 12.5px/1.35 Mali, sans-serif; color: #9d9586; }
#content .dy-goal { display: inline-flex; align-items: center; gap: 8px; }
#content .dy-bar { display: inline-block; width: 110px; height: 7px; border-radius: 4px; background: #0b0a0e; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); overflow: hidden; }
#content .dy-bar b { display: block; height: 100%; background: linear-gradient(90deg, #b8862e, #f2c66a); }
#content .dy-prog { font: 700 12.5px Fredoka, Mali, sans-serif; color: #e6d3a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
#content .dy-prog.ok { color: #8fcf7f; }
#content .dy-note { color: #9d9586; }
#content .dy-why { color: #e8a36a; }
#content .dy-c3 { grid-area: c3; position: relative; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
#content .dy-c4 { grid-area: c4; display: flex; justify-content: flex-end; }

/* the reward things: MIR4 plates in the thing's own tier colour (the board's .mb-slot) */
#content .dy-slots { display: flex; flex-wrap: wrap; gap: 5px; }
#content .dy-slot { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9%; cursor: pointer;
  background: url(../assets/ui_slot_mir4/slot_g0.png) center / 100% 100% no-repeat; }
#content .dy-slot.g1 { background-image: url(../assets/ui_slot_mir4/slot_g1.png); }
#content .dy-slot.g2 { background-image: url(../assets/ui_slot_mir4/slot_g2.png); }
#content .dy-slot.g3 { background-image: url(../assets/ui_slot_mir4/slot_g3.png); }
#content .dy-slot.g4 { background-image: url(../assets/ui_slot_mir4/slot_g4.png); }
#content .dy-slot.g5 { background-image: url(../assets/ui_slot_mir4/slot_g5.png); }
#content .dy-slot img { width: 72%; height: 72%; object-fit: contain; }
#content .dy-slot b { position: absolute; right: 3px; bottom: 0; font: 700 11.5px Fredoka, sans-serif; color: #fff; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
#content .dy-slot:hover, #content .dy-slot:focus-visible { filter: brightness(1.15); outline: none; }
/* gold as a chip like the money at the top (the board's .mb-chip) */
#content .dy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#content .dy-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 4px; border-radius: 4px; background: #0a090c; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); white-space: nowrap; cursor: pointer; }
#content .dy-chip img { width: 16px; height: 16px; object-fit: contain; }
#content .dy-chip em { font: 700 12.5px Fredoka, Mali, sans-serif; font-style: normal; color: #ffd95a; font-variant-numeric: tabular-nums; }
#content .dy-chip:hover { filter: brightness(1.15); }

/* the buttons (the board's .mb-btn) */
#content .dy-btn { min-width: 96px; height: 40px; padding: 0 14px; border: 1px solid #6b5a3a; border-radius: 4px; cursor: pointer; background: linear-gradient(#2c2620, #1d1914); color: #e6d3a3;
  font: 700 14px Mali, sans-serif; white-space: nowrap; text-shadow: none; box-shadow: none; }
#content .dy-btn:hover:not([disabled]) { filter: brightness(1.15); }
#content .dy-btn.take { border-color: #e0b452; color: #1c1408; background: linear-gradient(#f2c66a, #c9932e); }
#content .dy-btn.go.on { border-color: #9be38a; color: #fff; background: linear-gradient(#5aa84a, #2f7426); }
#content .dy-btn.lock { border-color: rgba(255, 255, 255, 0.12); color: #8f8775; background: #17161b; cursor: help; }
#content .dy-btn[disabled] { border-color: rgba(255, 255, 255, 0.12); color: #9a9284; background: #1a191e; cursor: default; }
#content .dy-donel { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(139, 227, 123, 0.1); color: #8fcf7f; font: 700 13.5px Mali, sans-serif; white-space: nowrap; }

/* row states: claimable the brightest, claimed calm and grey with a ✓ stamp over its slots, locked dark */
#content .dy-row.ready { border-color: rgba(217, 164, 67, 0.65); background: linear-gradient(90deg, #2c2717, #1f1c18 55%, #1b1a21); box-shadow: inset 3px 0 0 #f2c66a; }
#content .dy-row.ready .dy-c1 > b { color: #fff6dc; }
#content .dy-row.ready .dy-c1 > small { color: #d6ccb6; }
#content .dy-row.run { box-shadow: inset 3px 0 0 #8be37b; border-color: rgba(139, 227, 123, 0.55); }
#content .dy-row.done { background: #141317; border-color: rgba(255, 255, 255, 0.05); }
#content .dy-row.done .dy-c1 > b { color: #9a9284; font-weight: 600; }
#content .dy-row.done .dy-c1 > small, #content .dy-row.done .dy-prog, #content .dy-row.done .dy-note { color: #8a8271; }
#content .dy-row.done .dy-bar b { background: #5f6b57; }
#content .dy-row.done .dy-slot { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
#content .dy-row.done .dy-chip { filter: grayscale(1); opacity: 0.6; }
#content .dy-row.done .dy-c3::after { content: '✓'; position: absolute; left: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; box-sizing: border-box; border: 2px solid #6fbf62; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 24, 12, 0.78); color: #8be37b; font: 800 20px/1 Fredoka, sans-serif; transform: rotate(-14deg); pointer-events: none; }
#content .dy-row.lock { background: #111014; border-color: rgba(255, 255, 255, 0.04); }
#content .dy-row.lock .dy-c1 > b { color: #8a8273; }
#content .dy-row.lock .dy-c1 > small { color: #807868; }
#content .dy-row.lock .dy-slot { filter: grayscale(0.55) brightness(0.6); }
#content .dy-row.lock .dy-chip { filter: grayscale(0.6) brightness(0.75); }

/* ---- the right page: the head, the bonus chest, the daily dungeon ---- */
#content .dy-side { gap: 8px; }
#content .dy-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 2px; }
#content .dy-head img { width: 40px; height: 40px; object-fit: contain; }
#content .dy-head b { display: block; font: 700 17px Mali, sans-serif; color: #f2dfae; }
#content .dy-head small { display: block; font: 500 12.5px Mali, sans-serif; color: #a39a86; }
#content .dy-bonus { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid rgba(217, 164, 67, 0.3); border-radius: 6px; background: linear-gradient(#1e1c22, #17161b); }
#content .dy-bh { display: flex; align-items: center; gap: 12px; }
#content .dy-bh > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
#content .dy-bh b { font: 700 15.5px Mali, sans-serif; color: #f4ead2; }
#content .dy-bh small { flex-basis: 100%; font: 500 12.5px/1.35 Mali, sans-serif; color: #9d9586; }
#content .dy-chest { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
#content .dy-chest img { position: relative; width: 56px; height: 56px; object-fit: contain; filter: grayscale(0.55) brightness(0.75); }
#content .dy-bonus .dy-track { flex: none; }
#content .dy-bonus .dy-c3 { gap: 6px 8px; }
#content .dy-bgo { display: flex; justify-content: flex-end; }
#content .dy-bgo .dy-btn { min-width: 150px; }
#content .dy-bonus.ready { border-color: rgba(217, 164, 67, 0.7); background: linear-gradient(#2c2717, #1f1c18); box-shadow: inset 3px 0 0 #f2c66a; }
#content .dy-bonus.ready .dy-chest img { filter: none; animation: dyBob 1.1s ease-in-out infinite; }
#content .dy-bonus.ready .dy-chest::before { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 110, 0.55), rgba(255, 214, 110, 0)); animation: dyGlow 1.4s ease-in-out infinite; pointer-events: none; }
#content .dy-bonus.done { background: #141317; border-color: rgba(255, 255, 255, 0.06); }
#content .dy-bonus.done .dy-bh b { color: #9a9284; }
#content .dy-bonus.done .dy-track > b { background: #5f6b57; }
#content .dy-bonus.done .dy-chest img { filter: grayscale(0.2) brightness(0.9); opacity: 0.85; }
#content .dy-bonus.done .dy-slot { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
#content .dy-bonus.done .dy-chip { filter: grayscale(1); opacity: 0.6; }
#content .dy-bonus.done .dy-c3::after { content: '✓'; position: absolute; left: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; box-sizing: border-box; border: 2px solid #6fbf62; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 24, 12, 0.78); color: #8be37b; font: 800 20px/1 Fredoka, sans-serif; transform: rotate(-14deg); pointer-events: none; }
@keyframes dyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes dyGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#content .dy-dg { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: linear-gradient(90deg, #22212a, #1b1a21); }
#content .dy-dg img { width: 32px; height: 32px; object-fit: contain; }
#content .dy-dg b { display: block; font: 600 13.5px Mali, sans-serif; color: #e6d3a3; }
#content .dy-dg small { display: block; font: 500 12px Mali, sans-serif; color: #a39a86; }

@media (prefers-reduced-motion: reduce) { #content .dy-bonus.ready .dy-chest img, #content .dy-bonus.ready .dy-chest::before { animation: none; } }