/* Playground skin for the real 2017 play page: a slim top bar, and the game filling the rest of the
   window. Ruffle letterboxes the 760x480 stage inside the player, so the player itself just takes all
   the space below the bar. The page's own Drupal chrome (header, billboards, footer) is hidden. */
:root { --pg-bar: 40px; --cp-blue: #0B5DB8; --cp-navy: #06213F; --cp-gold: #FFCC00; }
html, body { margin: 0 !important; padding: 0 !important; height: 100% !important; overflow: hidden !important;
  background: radial-gradient(ellipse at 50% 40%, #1a6fc4 0%, #0b4a94 45%, var(--cp-navy) 100%) fixed !important; }
#page, main#content { background: transparent !important; }
#section-header, #section-footer, #billboards, #actions, #region-page-top, #region-page-bottom,
#affiliate-header, #banner { display: none !important; }

/* the client: swfobject's <object id="cp_flash">, polyfilled by Ruffle into <ruffle-object id="cp_flash"> */
#cp_flash, .disney_land_clubpenguin_player {
  position: fixed !important; top: var(--pg-bar) !important; left: 0; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: calc(100% - var(--pg-bar)) !important; margin: 0 !important;
  z-index: 1; outline: none; }
#cp_flash:fullscreen { top: 0 !important; height: 100% !important; background: var(--cp-navy); }

#pg-bar { position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: var(--pg-bar); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--cp-blue); color: #fff; border-bottom: 3px solid var(--cp-gold);
  font: 15px/1 "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif; user-select: none; }
#pg-bar a, #pg-bar button { color: #fff; text-decoration: none; background: rgba(255,255,255,.14); border: 0;
  border-radius: 999px; padding: 6px 13px; font: inherit; cursor: pointer; white-space: nowrap; }
#pg-bar a:hover, #pg-bar button:hover { background: rgba(255,255,255,.28); }
#pg-title { font-weight: 700; white-space: nowrap; }
#pg-title b { color: var(--cp-gold); }
#pg-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; white-space: nowrap; }
#pg-status i { width: 9px; height: 9px; border-radius: 50%; background: #9bb; display: inline-block; }
#pg-status.on i { background: #3ddc5b; box-shadow: 0 0 6px #3ddc5b; }
#pg-status.off i { background: #ff5a4f; }
#pg-spacer { flex: 1; }
@media (max-width: 560px) { #pg-status em, #pg-title b { display: none; } }