/* Existing art-club palette, clear type and regular rectangular cards. */
html body.cb-minigame .cb-play-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas: 'sidebar main';
  align-items: start;
  gap: 24px;
  width: calc(100% - 64px);
  max-width: var(--cb-content-width);
  margin: 30px auto 0;
}
.cb-play-main { grid-area: main; min-width: 0; }
.cb-play-sidebar { grid-area: sidebar; display: grid; gap: 24px; min-width: 0; }
.cb-player-card, .cb-play-side-section, .cb-play-about {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--cb-shadow);
}
.cb-player-card { padding: 12px 12px 0; overflow: hidden; }
.cb-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f0ecff;
  container-type: inline-size;
}
.cb-player-stage[data-orientation='portrait'] { height: min(70svh, 680px); aspect-ratio: auto; }
.cb-player-frame-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cb-player-frame-host iframe { display: block; flex: none; width: 100%; height: 100%; border: 0; background: #fff9eb; transform-origin: center; }
.cb-player-stage[data-orientation='portrait'] iframe { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
.cb-player-status { position: absolute; inset: 0; display: grid; place-items: center; background: #fff4d8 url('/static/image/fast/loading-art-friends-v8-e334646ef658-960.webp') center/cover no-repeat; }
.cb-player-status-copy { position: relative; display: grid; justify-items: center; gap: 18px; width: 100%; padding: 24px; box-sizing: border-box; text-align: center; }
.cb-game-loading-art { position: relative; width: clamp(140px, 25cqw, 240px); aspect-ratio: 1; }
.cb-game-loading-art > img { display: block; width: 100%; height: auto; animation: cb-controller-float 2.4s ease-in-out infinite; }
.cb-game-button-glow { position: absolute; right: 20%; top: 39%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff7dc; animation: cb-controller-tap 1.2s ease-in-out infinite; pointer-events: none; }
.cb-game-spark { position: absolute; width: 26px; height: 26px; animation: cb-game-spark 1.8s ease-in-out infinite; }
.cb-game-spark-one { left: -5%; top: 14%; }
.cb-game-spark-two { right: -6%; bottom: 12%; width: 18px; height: 18px; animation-delay: .6s; }
html body.cb-minigame .cb-game-loading-title { max-width: 26ch; color: #5130b8; font-size: 20px !important; font-weight: 600; line-height: 1.35; }
.cb-player-progress { width: min(300px, 75cqw); }
.cb-player-progress-track { height: 16px; padding: 3px; box-sizing: border-box; border: 2px solid #6550e8; border-radius: 8px; overflow: hidden; background: #fff9eb; }
.cb-player-progress-scan { display: block; width: 42%; height: 100%; border-radius: 4px; background: #6550e8; box-shadow: inset -12px 0 #43d9a3; animation: cb-game-connecting 1.8s ease-in-out infinite; }
.cb-player-progress-caption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; color: #5130b8; line-height: 1.3; }
.cb-game-loading-dots { display: flex; gap: 4px; }
.cb-game-loading-dots i { width: 5px; height: 5px; border-radius: 50%; background: #6550e8; animation: cb-game-spark 1.2s ease-in-out infinite; }
.cb-game-loading-dots i:nth-child(2) { animation-delay: .2s; }
.cb-game-loading-dots i:nth-child(3) { animation-delay: .4s; }
.cb-player-status[data-state='error'] .cb-player-progress { display: none; }
.cb-player-status[data-state='error'] :is(.cb-game-loading-art > img,.cb-game-spark,.cb-game-button-glow) { animation-play-state: paused; }
.cb-player-status-copy p { margin: 0; }
.cb-player-message { display: none; max-width: 30ch; color: #5130b8; }
.cb-player-status[data-state='error'] .cb-player-message { display: block; }
.cb-player-recovery { display: none; }
.cb-player-status[data-state='error'] .cb-player-recovery {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: max-content;
  max-width: min(340px, 100%);
  box-sizing: border-box;
  padding: 18px 22px;
  border-radius: 16px;
  background: #fff9eb;
}
.cb-player-status[data-state='error'] .cb-player-recovery .cb-player-message {
  max-width: 26ch;
  color: #5130b8;
  font-size: 18px;
  line-height: 1.4;
  text-wrap: balance;
}
.cb-player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; }
.cb-player-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-player-name > .cb-icon { flex: none; width: 36px; height: 36px; }
.cb-player-name h1 { margin: 0; overflow-wrap: anywhere; }
.cb-player-actions { display: flex; gap: 8px; flex: none; }
.cb-player-actions button, .cb-player-retry {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: #e8dfff;
  color: #5130b8;
  cursor: pointer;
  transition: background .2s;
}
.cb-player-actions .cb-icon { width: 24px; height: 24px; }
.cb-player-actions button:hover { background: #d5c3ff; }
.cb-player-mobile-fullscreen {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: #fff9eb;
  color: #5130b8;
  cursor: pointer;
}
.cb-player-mobile-fullscreen:hover { background: #d5c3ff; }
.cb-player-mobile-fullscreen:active { background: #ffe17d; }
.cb-fullscreen-exit { display: none; }
.cb-player-mobile-fullscreen[aria-pressed='true'] .cb-fullscreen-enter { display: none; }
.cb-player-mobile-fullscreen[aria-pressed='true'] .cb-fullscreen-exit { display: inline; }
.cb-player-retry { padding-inline: 22px; background: #5130b8; color: #fff; }
.cb-player-retry:hover { background: #6446d9; }
html body.cb-minigame [hidden] { display: none !important; }
.cb-player-noscript { padding: 0 16px 16px; color: #5130b8; }
.cb-play-ad { width: 100%; min-width: 0; margin: 24px 0; text-align: center; }
.cb-play-ad-label { margin-bottom: 8px; color: #68616f; font-size: 12px; line-height: 1.4; }
.cb-play-ad > .adsbygoogle { display: block; width: 100%; min-height: 250px; }
.cb-play-ad.is-filled > .adsbygoogle { min-height: 0; }
.cb-play-ad:has(> .adsbygoogle[data-ad-status='unfilled']) { display: none; }
.cb-play-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cb-play-heading > .cb-icon { width: 26px; height: 26px; flex: none; }
.cb-play-heading h2 { margin: 0; }
.cb-play-side-section { padding: 16px; }
.cb-play-side-section .cb-play-heading { align-items: flex-start; gap: 6px; }
.cb-play-side-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cb-play-side-pick, .cb-play-pick, .cb-play-video { border-radius: 18px; display: flex; flex-direction: column; min-width: 0; gap: 8px; color: #302b32; text-decoration: none; }
.cb-play-side-pick img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #b8f2d8; }
.cb-play-side-pick > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; font-weight: 600; }
.cb-play-side-pick:hover span, .cb-play-video:hover > span, .cb-play-pick:hover > span { color: #5130b8; }
.cb-play-videos { display: grid; gap: 20px; }
.cb-play-video-media { position: relative; overflow: hidden; border-radius: 8px; background: #b8f2d8; aspect-ratio: 16 / 9; }
.cb-play-video-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-play-duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: #302b32; color: #fff; line-height: 1.3; }
.cb-play-video > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 1.4; }
.cb-play-more { margin-top: 30px; }
.cb-play-more-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cb-play-pick { position: relative; aspect-ratio: auto; box-sizing: border-box; gap: 0; padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--cb-shadow); transition: transform .2s; }
.cb-play-pick-media { flex: none; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #fff9eb; }
.cb-play-pick-media > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: inherit; }
.cb-play-pick > span { position: static; display: block; box-sizing: border-box; width: 100%; min-height: 0; padding: 5px 4px 0; background: transparent; font-weight: 600; line-height: 1.4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-play-pick:hover { transform: translateY(-3px); }
.cb-play-about { margin-top: 30px; padding: 24px; }
.cb-play-about h2 { margin: 0 0 12px; }
.cb-play-about p { max-width: 70ch; margin: 0 0 18px; line-height: 1.65; white-space: pre-line; }
.cb-play-tagline { font-weight: 600; color: #5130b8; }
.cb-play-controls { display: flex; align-items: flex-start; gap: 14px; padding: 20px; margin-top: 24px; border-radius: 8px; background: #eaf6ef; }
.cb-play-controls > .cb-icon { flex: none; width: 30px; height: 30px; }
.cb-play-controls p { margin-bottom: 0; }
.cb-play-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #5130b8; font-weight: 600; text-decoration: none; }
.cb-play-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.cb-play-back .cb-icon { width: 26px; height: 26px; }
html.cb-minigame-expanded, body.cb-minigame-expanded { overflow: hidden; }
.cb-player-card:is(:fullscreen,.cb-is-fullscreen) { display: flex; flex-direction: column; padding: 12px; border-radius: 0; background: #fff9eb; box-shadow: none; }
.cb-player-card.cb-is-fullscreen { position: fixed; inset: 0; z-index: 100000; width: 100%; height: 100dvh; box-sizing: border-box; }
.cb-player-card:is(:fullscreen,.cb-is-fullscreen) .cb-player-stage { flex: 1; min-height: 0; height: auto; aspect-ratio: auto; }
.cb-player-card:is(:fullscreen,.cb-is-fullscreen) .cb-player-toolbar { flex: none; }
.cb-player-card:is(:fullscreen,.cb-is-fullscreen) .cb-player-stage:not([data-orientation='portrait']) iframe { width: 100%; }
/* Keep the phone's exit control when fullscreen or rotation widens the viewport. */
html body.cb-minigame .cb-player-card.cb-mobile-fullscreen:is(:fullscreen,.cb-is-fullscreen) { padding: 0; }
html body.cb-minigame .cb-player-card.cb-mobile-fullscreen:is(:fullscreen,.cb-is-fullscreen) > .cb-player-stage { width: 100%; height: 100%; flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 0; }
html body.cb-minigame .cb-player-card.cb-mobile-fullscreen .cb-player-toolbar { display: none; }
html body.cb-minigame .cb-player-card.cb-mobile-fullscreen .cb-player-mobile-fullscreen { display: grid; }

@media (max-width: 1100px) {
  html body.cb-minigame .cb-play-layout { grid-template-columns: 228px minmax(0, 1fr); gap: 20px; }
  .cb-play-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 900px) {
  html body.cb-minigame .cb-play-layout { width: calc(100% - 40px); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main' 'sidebar'; gap: 30px; margin-top: 24px; }
  .cb-play-sidebar { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cb-play-side-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cb-player-stage[data-orientation='portrait'] { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  html body.cb-minigame .cb-play-layout { width: calc(100% - 28px); margin-top: 20px; }
  .cb-player-card { padding: 8px 8px 0; }
  .cb-player-stage[data-orientation='portrait'] { height: auto; aspect-ratio: 16 / 9; }
  .cb-player-stage[data-orientation='portrait'] iframe { width: 100%; }
  .cb-player-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 12px 4px; }
  .cb-player-actions { align-self: flex-end; }
  .cb-play-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cb-play-sidebar { grid-template-columns: minmax(0, 1fr); }
  .cb-play-about { padding: 20px; }
  .cb-play-controls { padding: 16px; gap: 10px; }
  .cb-player-message { max-width: 26ch; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-game-loading-art > img,.cb-game-button-glow,.cb-game-spark,.cb-player-progress-scan,.cb-game-loading-dots i { animation: none; }
  .cb-game-button-glow { opacity: 0; }
  .cb-player-progress-scan { width: 50%; }
  .cb-play-pick, .cb-player-actions button, .cb-player-retry { transition: none; }
  .cb-play-pick:hover { transform: none; }
}
@media (hover: none) { .cb-play-pick:hover { transform: none; } }

@keyframes cb-controller-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes cb-controller-tap { 0%,100% { opacity: 0; transform: scale(.7); } 45% { opacity: .7; transform: scale(1.15); } }
@keyframes cb-game-spark { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cb-game-connecting { 0% { transform: translateX(-110%); } 100% { transform: translateX(350%); } }

/* Restore the original adventure-world loader and indeterminate connection bar. */
html body.cb-minigame .cb-player-status {
  background: #fff4d8 url('/static/image/fast/loading-world-97792e9f636f-1280.webp') center/cover no-repeat;
}
html body.cb-minigame .cb-player-status-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5cqi, 14px);
  width: 100%;
  height: 100%;
  padding: 16px;
  container-type: inline-size;
}
html body.cb-minigame .cb-player-progress {
  position: static;
  width: min(300px, 65cqi);
  height: auto;
  overflow: visible;
  clip-path: none;
  flex: none;
}
html body.cb-minigame .cb-player-status .cb-game-loading-art { width: clamp(72px, 22cqi, 200px); flex: none; }
html body.cb-minigame .cb-player-status .cb-game-loading-title { margin: 0; max-width: none; font-size: clamp(13px, 2.5cqi, 20px) !important; }
html body.cb-minigame .cb-player-progress-track { height: clamp(10px, 1.8cqi, 16px); padding: 2px; }
html body.cb-minigame .cb-player-progress-caption { margin-top: 6px; font-size: clamp(12px, 2cqi, 16px); }
html body.cb-minigame .cb-player-message { color: #633bbd; }
html body.cb-minigame .cb-player-status[data-state='error'] :is(.cb-game-loading-art, .cb-game-loading-title, .cb-player-progress) { display: none; }
html body.cb-minigame .cb-play-pick > span { text-align: left; }
html body.cb-minigame .cb-play-drawing-media { aspect-ratio: 16 / 9; border-radius: var(--cb-card-media-radius); }
html body.cb-minigame .cb-play-side-pick .cb-play-drawing-media > img { height: 100%; border-radius: inherit; background: transparent; }

@media (max-width: 767px) {
  /* Phone play is an edge-to-edge landscape canvas, with no title/action bar. */
  html body.cb-minigame .cb-play-layout { width: 100%; margin-top: 0; }
  html body.cb-minigame .cb-play-main > .cb-player-card { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html body.cb-minigame .cb-player-stage,
  html body.cb-minigame .cb-player-stage[data-orientation='portrait'] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  html body.cb-minigame .cb-play-main > .cb-player-card > .cb-player-stage { border-radius: 0; }
  html body.cb-minigame .cb-player-toolbar { display: none; }
  html body.cb-minigame .cb-player-mobile-fullscreen { display: grid; }
  html body.cb-minigame .cb-player-card:is(:fullscreen,.cb-is-fullscreen) { padding: 0; }
  html body.cb-minigame .cb-player-card:is(:fullscreen,.cb-is-fullscreen) > .cb-player-stage { width: 100%; height: 100%; flex: 1; aspect-ratio: auto; border-radius: 0; }
  html body.cb-minigame .cb-play-more,
  html body.cb-minigame .cb-play-about,
  html body.cb-minigame .cb-play-sidebar { margin-inline: 14px; }
  html body.cb-minigame .cb-play-ad { width: calc(100% - 28px); margin-inline: 14px; }
  html body.cb-minigame .cb-player-status-copy { gap: 6px; padding: 10px; }
  html body.cb-minigame .cb-player-status .cb-atelier-art { width: clamp(110px, 35cqi, 190px); }
  html body.cb-minigame .cb-player-status .cb-loading-word { --cb-loading-size: clamp(24px, 7cqi, 40px); }
}