/* CuteDressUp Play Next. Rows reuse the theme's classes; these rules only add what the theme does not have. */

/* The plugin's wrappers take no room of their own, so the rows sit in the theme's layout like its own rows. */
.cdu-rows, .cdu-personal { display: contents; }
.cdu-head .arrowcommon, [data-cdu-scroll] { cursor: pointer; }

/* Rows and games taken out by the no-repeat rule (kept in the page, so the script can bring them back). */
.cdu-off, .cdu-dup, .cdu-move[hidden] { display: none !important; }

/* Labels on cards (NEW, HOT, UPDATED, Game of the Day) and the countdown beside a season row's title */
.cdu-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2; padding: 3px 7px; border-radius: 999px;
  background: #ff3d7f; color: #fff; font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.cdu-b-hot { background: #ff7a00; }
.cdu-b-up { background: #4f6bff; }
.cdu-b-gotd { top: 10px; left: 10px; padding: 5px 11px; font-size: 12px; background: linear-gradient(135deg, #ff5fa2, #a48eff); }
.cdu-gotd img { object-fit: cover; }
.cdu-count {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: #ffe3f0; color: #d6246e;
  font-size: 13px; font-weight: 800; line-height: 1.3; vertical-align: middle; white-space: nowrap; text-transform: none;
}
.cdu-count::after { content: attr(data-cdu-count); }
@media (max-width: 600px) {
  .cdu-count { margin-left: 6px; padding: 2px 7px; font-size: 11px; }
  .cdu-badge { top: 4px; left: 4px; padding: 2px 5px; font-size: 9px; }
  .cdu-b-gotd { top: 6px; left: 6px; padding: 3px 8px; font-size: 10px; }
}

/* "Play next" button beside the game's full-screen button: strong pink with white text, a white play disc, and a
   ring that pulses a few times after the page opens (transform/opacity only, so it costs no layout or paint) */
.cdu-next-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 0 0; padding: 9px 18px 9px 9px;
  border: 2px solid #fff; border-radius: 999px; background: linear-gradient(135deg, #e3176f, #c2188f 55%, #8e24c4);
  color: #fff !important; font-weight: 900; font-size: 16px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25); cursor: pointer; text-decoration: none !important; vertical-align: middle;
  box-shadow: 0 4px 14px rgba(227, 23, 111, .45), 0 1px 3px rgba(0, 0, 0, .2); -webkit-user-select: none; user-select: none;
}
.cdu-next-btn > span {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px;
  padding-left: 2px; border-radius: 50%; background: #fff; color: #d3166f; font-size: 11px; text-shadow: none;
}
.cdu-next-btn::after {
  content: ''; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; border: 3px solid #e3176f;
  border-radius: inherit; opacity: 0; pointer-events: none; animation: cdu-ring 2.2s ease-out 1s 5;
}
@keyframes cdu-ring { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(1.12, 1.4); opacity: 0; } }
.cdu-next-btn:hover { filter: brightness(1.1); }
.cdu-next-btn:focus-visible { outline: 3px solid #7964ca; outline-offset: 3px; }
@media (max-width: 600px) {
  .cdu-next-btn { gap: 6px; margin: 0 6px 0 0; padding: 6px 12px 6px 6px; font-size: 14px; }
  .cdu-next-btn > span { width: 20px; height: 20px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .cdu-next-btn::after { animation: none; } }

/* "Play next" screen over the game */
.cdu-ov {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 50; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(32, 6, 48, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  container-type: size; font-family: inherit; color: #fff; animation: cdu-fade .25s ease-out;
}
.cdu-ov[hidden] { display: none; }
.cdu-ov * { box-sizing: border-box; }
.cdu-ov-box {
  position: relative; width: 100%; max-width: 760px; max-width: min(760px, calc((100cqh - 150px) * 1.76 + 20px));
  max-height: 100%; display: flex; flex-direction: column; gap: 12px; overflow: auto; scrollbar-width: none;
}
.cdu-ov-head { text-align: center; padding: 0 44px; }
.cdu-ov-title { font-size: 28px; font-weight: 800; line-height: 1.15; }
.cdu-ov-sub { font-size: 15px; opacity: .85; margin-top: 3px; }
.cdu-ov-x {
  position: absolute; top: 0; right: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer;
}
.cdu-ov-x:hover { background: rgba(255, 255, 255, .28); }
.cdu-ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cdu-ov-card {
  position: relative; display: block; overflow: hidden; border-radius: 12px; background: #50136c; color: #fff !important;
  text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .15s;
}
.cdu-ov-card:hover, .cdu-ov-card:focus-visible { transform: scale(1.03); outline: 3px solid #ff5fa2; outline-offset: 0; }
.cdu-ov-img { display: block; aspect-ratio: 250 / 142; }
.cdu-ov-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cdu-ov-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 12px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent);
}
.cdu-ov-big { grid-column: span 2; grid-row: span 2; }
.cdu-ov-big .cdu-ov-img { aspect-ratio: auto; height: 100%; }
.cdu-ov-big .cdu-ov-name { font-size: 18px; padding: 34px 12px 10px; }
.cdu-ov-play {
  position: absolute; top: 10px; left: 10px; padding: 6px 12px; border-radius: 999px; background: #ff5fa2; color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.cdu-ov-keep {
  align-self: center; padding: 7px 18px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px;
  background: transparent; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cdu-ov-keep:hover { background: rgba(255, 255, 255, .12); }
@keyframes cdu-fade { from { opacity: 0; } to { opacity: 1; } }

/* Short game frames (phones, small windows): one swipeable strip */
@container (max-height: 400px) {
  .cdu-ov-box { max-width: 100%; gap: 8px; }
  .cdu-ov-grid { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .cdu-ov-card { flex: 0 0 auto; width: min(190px, 40cqw); scroll-snap-align: start; }
  .cdu-ov-big { width: min(240px, 52cqw); }
  .cdu-ov-big .cdu-ov-img { aspect-ratio: 250 / 142; height: auto; }
  .cdu-ov-big .cdu-ov-name { font-size: 13px; padding: 18px 8px 6px; }
  .cdu-ov-title { font-size: 20px; }
  .cdu-ov-sub { font-size: 13px; }
}
@container (max-height: 300px) {
  .cdu-ov { padding: 8px; }
  .cdu-ov-title { font-size: 16px; }
  .cdu-ov-sub { display: none; }
  .cdu-ov-x { width: 28px; height: 28px; font-size: 20px; line-height: 28px; }
  .cdu-ov-card { width: min(150px, 40cqw); }
  .cdu-ov-big { width: min(170px, 46cqw); }
  .cdu-ov-play { top: 6px; left: 6px; padding: 4px 8px; font-size: 11px; }
  .cdu-ov-keep { padding: 4px 12px; font-size: 12px; }
}