/* A small collection drawer keeps daily progress out of the play area. */
.daily-mugs{box-sizing:border-box;position:relative;width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;padding:6px 0;color:#111;flex:none;flex-wrap:wrap}
.daily-haul{position:relative;z-index:12;max-width:100%}
.daily-haul summary{display:flex;align-items:center;gap:10px;min-height:44px;list-style:none;cursor:pointer;padding:7px 12px;border:1px solid #bcb6a8;border-radius:6px;background:#fffdf6;box-shadow:0 2px 0 #1111;font:18px/1.1 Anton,Impact,sans-serif;user-select:none}
.daily-haul summary::-webkit-details-marker{display:none}
.daily-haul summary:hover,.daily-haul[open] summary{border-color:#111}
.daily-haul summary b{font:700 12px/1.2 'Courier Prime',monospace;padding:4px 6px;background:#ffd400;border-radius:3px}
.haul-icon{flex:none}
.haul-chevron{font:18px/1 Arial,sans-serif;margin-left:2px;transform-origin:center;transition:transform .15s}
.daily-haul[open] .haul-chevron{transform:rotate(180deg)}
.daily-haul-panel{box-sizing:border-box;position:absolute;top:calc(100% + 8px);left:0;width:min(360px,calc(100vw - 32px));padding:14px;background:#fffdf6;border:2px solid #111;box-shadow:5px 5px 0 #111;max-height:min(520px,65dvh);overflow:auto;overscroll-behavior:contain}
.daily-haul-panel header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 10px;border-bottom:1px solid #d6d1c5}
.daily-haul-panel header strong{font:19px/1.2 Anton,Impact,sans-serif}
.daily-haul-panel header>span{font:11px/1.3 Arimo,Arial,sans-serif;color:#666}
.daily-mugs-grid{display:flex;flex-direction:column;padding:5px 0}
.daily-mugs-grid a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:3px 5px;color:#111;text-decoration:none;border-radius:3px}
.daily-mugs-grid a:hover{background:#ffd40026}
.daily-mugs-grid img{display:block;width:36px;height:36px;object-fit:contain}
.daily-mugs-grid span{font:13px/1.2 Arimo,Arial,sans-serif}
.daily-mugs-grid small{font:11px/1.2 'Courier Prime',monospace;color:#777}
.daily-mugs-grid small[data-material=diamond]{color:#235775}.daily-mugs-grid small[data-material=gold]{color:#775709}.daily-mugs-grid small[data-material=silver]{color:#525968}.daily-mugs-grid small[data-material=bronze]{color:#8d5029}.daily-mugs-grid small[data-material=coal]{color:#111}
.haul-collection-link{display:block;border-top:1px solid #d6d1c5;padding:12px 0 13px;color:#111;font:11px/1.3 'Courier Prime',monospace;text-underline-offset:3px}
.haul-archive-link{display:block;padding-top:12px;color:#555;font:11px/1.3 'Courier Prime',monospace;text-underline-offset:3px}
.daily-mugs-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.daily-mugs-actions a,.daily-mugs-actions button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 14px;border:2px solid #111;border-radius:2px;background:#fffdf6;color:#111;box-shadow:3px 3px 0 #111;font:700 11px/1.2 'Courier Prime',monospace;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.daily-mugs-actions button{background:#ffd400}
.daily-mugs-actions a:hover,.daily-mugs-actions button:hover{background:#ffe15a;color:#111;text-decoration:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #111}
.daily-mugs-actions a:active,.daily-mugs-actions button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
.daily-mugs-actions .daily-mugs-profile{color:#111}
.daily-mugs a:focus-visible,.daily-mugs button:focus-visible,.daily-haul summary:focus-visible{outline:2px solid #111;outline-offset:3px}
.daily-mugs textarea{flex-basis:100%;width:100%;min-height:210px;padding:12px;background:#fffdf6;color:#111;border:1px solid #111}
#miniMugTray{max-width:1192px;width:calc(100% - 48px);margin:4px auto 0}
@media(max-width:540px){
 /* One row on a phone: the haul, Share and Profile sat 15px too wide for 375
    and the actions dropped to a second line. The width comes back out of
    padding and gaps rather than the labels, so nothing is renamed or cramped
    to the point of looking squeezed. Below ~340px it still wraps, which is
    the right fallback. */
 .daily-mugs{gap:6px;margin-bottom:8px;flex-wrap:wrap}
 .daily-haul summary{gap:5px;padding:7px 7px;font-size:15px}
 .daily-haul summary b{font-size:10px;padding:3px 4px}
 .haul-icon{width:18px;height:18px}
 .daily-mugs-actions{gap:6px}
 .daily-mugs-actions a,.daily-mugs-actions button{min-height:40px;padding:7px 8px;font-size:10px;box-shadow:2px 2px 0 #111}
 #miniMugTray{width:calc(100% - 24px);margin-bottom:0}
 #miniMugTray .daily-mugs-actions{gap:8px}
}
@media(prefers-reduced-motion:reduce){.haul-chevron,.daily-mugs-actions a,.daily-mugs-actions button{transition:none}}

/* The games hub presents the whole day's collection in the former referral slot. */
.games-feature-stack{grid-auto-rows:auto}
.daily-mugs-showcase{display:grid;grid-template-columns:1fr auto;gap:18px;margin:0;padding:24px 30px;border:3px solid #111;background:#fffdf6;box-shadow:6px 6px 0 #111}
.daily-mugs-heading h2{margin:0;font:36px/1.1 Anton,Impact,sans-serif;text-transform:uppercase}
.daily-mugs-heading p{margin:6px 0 0;font:12px/1.3 'Courier Prime',monospace;color:#666}
.daily-mugs-showcase .daily-mugs-actions{grid-column:2;grid-row:1}
.daily-mugs-showcase .daily-mugs-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--mug-count,8),minmax(0,1fr));gap:10px;padding:14px 0 0;border-top:1px solid #d6d1c5}
.daily-mugs-showcase .daily-mugs-grid a{display:flex;flex-direction:column;gap:6px;text-align:center;padding:6px 2px}
.daily-mugs-showcase .daily-mugs-grid img{width:100%;max-width:112px;height:clamp(64px,8vw,94px)}
.daily-mugs-showcase .daily-mugs-grid span{font-size:12px;font-weight:700}
.daily-mugs-showcase textarea{grid-column:1/-1}
@media(max-width:700px){
 .daily-mugs-showcase{padding:18px;gap:14px}
 .daily-mugs-heading h2{font-size:28px}
 /* Half the list per row: eight games read as two clean rows of four. */
 .daily-mugs-showcase .daily-mugs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px}
 .daily-mugs-showcase .daily-mugs-grid img{height:70px}
 .daily-mugs-showcase .daily-mugs-actions{gap:10px}
}
@media(max-width:420px){
 .daily-mugs-showcase{grid-template-columns:1fr}
 .daily-mugs-showcase .daily-mugs-actions{grid-column:1;grid-row:3;margin:0;justify-content:space-between;border-top:1px solid #d6d1c5;padding-top:4px}
 /* Still four across on the narrowest phones, so it stays two rows. */
 .daily-mugs-showcase .daily-mugs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 4px}
 .daily-mugs-showcase .daily-mugs-grid span{font-size:10px}
 .daily-mugs-showcase .daily-mugs-grid small{font-size:9px}
}