game-title {
  font-family: 'Racing Sans One';
  font-size:  160%;
  color: white;
}

h1 {
  font-family: 'Verdana';
  color: white;
}
h2 {
  font-family: 'Verdana';
  color: white;
  font-size:  100%;
}
h3 {
  font-family: 'Verdana';
  color: white;
  font-size:  80%;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited, a:active {
  color: pink;
  background-color: transparent;
}
a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

@keyframes breathingGlow {
  0%, 100% {
    box-shadow: 0 0 10px var(--glow-color);
  }
  50% {
    box-shadow: 0 0 25px var(--glow-color);
  }
}

.button, .button:link, .button:visited {
  border: 5px solid rgb(0, 0, 0);
  --glow-color: rgba(216, 212, 241, 0.3);
  background-color: rgb(216, 212, 241);
  color: black;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-family: 'Arial';
  font-size: 48px;
  margin: 10px;
  cursor: pointer;
  table-layout: fixed;
  border-collapse: collapse;
  width: 440px;
  transition: all 0.3s ease;
  border-radius: 10px;
}
.button:hover {
  background-color: rgb(177, 177, 234);
  --glow-color: rgba(177, 177, 234, 0.8);
  animation: breathingGlow 2.5s ease-in-out infinite;
  transition: filter 0.5s ease, box-shadow 0.5s ease;
}
.button:active {
  background-color: rgb(170, 170, 243);
}

.buttonSmall, .buttonSmall:link, .buttonSmall:visited {
  border: 5px solid rgb(0, 0, 0);
  background-color: rgb(216, 212, 241);
  color: black;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Arial';
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  table-layout: fixed;
  border-collapse: collapse;
  width: 130px;
  border-radius: 10px;
}
.buttonSmall:hover {
  background-color: rgb(177, 177, 234);
}
.buttonSmall:active {
  background-color: rgb(170, 170, 243);
}

.buttonEvenSmaller, .buttonEvenSmaller:link, .buttonEvenSmaller:visited {
  border: 5px solid rgb(0, 0, 0);
  background-color: rgb(216, 212, 241);
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Arial';
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  table-layout: fixed;
  border-collapse: collapse;
  width: 130px;
  border-radius: 10px;
}
.buttonEvenSmaller:hover {
  background-color: rgb(177, 177, 234);
}
.buttonEvenSmaller:active {
  background-color: rgb(153, 153, 234);
}

.buttonEvenSmallerCrimped, .buttonEvenSmallerCrimped:link, .buttonEvenSmallerCrimped:visited {
  border: 4px solid rgb(0, 0, 0);
  background-color: rgb(216, 212, 241);
  color: black;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Arial';
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  table-layout: fixed;
  border-collapse: collapse;
  width: 6%;
  margin-top: -1px;
  border-radius: 10px;
}
.buttonEvenSmallerCrimped:hover {
  background-color: rgb(177, 177, 234);
}
.buttonEvenSmallerCrimped:active {
  background-color: purple;
}

.profile-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  justify-content: center;
}
#profilePic {
  width: 20vw;
  max-width: 120px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.thumbnail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.thumbnail-option {
  display: inline-block;
  cursor: pointer;
}
.thumbnail-option img {
  width: 20vw;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}
.thumbnail-option input[type="radio"] {
  display: none;
}
.thumbnail-option input[type="radio"]:checked + img {
  border-color: blue;
}

.champion {
  border: 6px solid black;
  font-family: 'Times New Roman', sans-serif;
  color: #000000;
}
.action {
  background-color: #ffac64;
  color: #000000;
  text-shadow: none;
}
.equipment {
  background-color: #ffff89;
  color: #000000;
}
.obelisk {
  background-color: #c1cfff;
  color: #000000;
}
.rush {
  background-color: #b5ffe0;
  color: #000000;
}
.reflex {
  background-color: #c77fff;
  color: #000000;
}

.cryptbound {
  background-color: #a9ffb6;
}
.frontier {
  background-color: #ffc965;
}
.clockwork {
  background-color: #a099ff;
}
.vivisect {
  background-color: #ff6886;
}
.noble {
  background-color: #bc85ff;
}
.righteous {
  background-color: #ff607a;
}
.radiant {
  background-color: #fff94c;
}
.nightveil {
  background-color: #9077e5;
}
.valiant {
  background-color: #807cff;
}
.chrome {
  background-color: #bababa;
}
.crescendo {
  background-color: #ff83c3;
}
.cinemonster {
  background-color: #ff5e3e;
}
.driftmarked {
  background-color: #00cdc3;
}
.honed {
  background-color: #9c9c9c;
}
.oldblood {
  background-color: #f15a5a;
}
.hellfire {
  background-color: #ff993a;
}
.enlightened {
  background-color: #ffde58;
}
.arcanum {
  background-color: #ba6af0;
}
.dealt {
  background-color: #90ff95;
}
.frenzied {
  background-color: #f02c2c;
}
.gallant {
  background-color: #5dea4a;
}
.verdant {
  background-color: #97ff68;
}
.foretold {
  background-color: #ceff6b;
}

.token {
  background-color: #eaeaea;
  color: #000000;
}
.token.champion .card-name,
.token.champion .card-cost,
.token.champion .card-text {
  text-shadow: none;
}
.token-name {
  font-weight: bold;
  color: black;
  cursor: alias;
  text-shadow:
    0px    -0.2px 0.3px rgba(255, 255, 255, 0.65),
   -0.5px  0.5px  0.4px rgba(255, 255, 255, 0.65),
    0.5px  0.5px  0.4px rgba(255, 255, 255, 0.65),
    0px    1px    0.4px rgba(255, 255, 255, 0.65),
    0px    0.3px  0.4px rgba(255, 255, 255, 0.65);
  display: inline-block;
  text-align: center;
}

.totem {
  background-color: #eaeaea;
  color: #000000;
}
.totem .card-name {
  text-shadow: none;
}
.totem .card-text {
  text-shadow: none;
}

#token-tooltip {
  position: absolute;
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 8px;
  pointer-events: none;
  z-index: 1000;
  display: none;
  max-width: 350px;
  word-wrap: break-word;
}

.keyword {
  font-weight: bold;
  color: black;
  cursor: alias;
  text-shadow:
    0px    -0.2px 0.3px rgba(255, 255, 255, 0.65),
   -0.5px  0.5px  0.4px rgba(255, 255, 255, 0.65),
    0.5px  0.5px  0.4px rgba(255, 255, 255, 0.65),
    0px    1px    0.4px rgba(255, 255, 255, 0.65),
    0px    0.3px  0.4px rgba(255, 255, 255, 0.65);
}

.card-name {
  width: 100%;
  height: 1.8em; /* limit height */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  font-weight: bold;
  box-sizing: border-box;
  white-space: nowrap;
  position: relative;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
  font-size: 0.92em;
}
.card-name span {
  display: inline-block;
  font-size: 1.5em;
  max-width: 100%;
  transform-origin: left center;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
}

#viewing-window .scaled-card .card-name {
  max-width: 100%;
}

.card-cost {
  font-size: 0.715em;      /* Base font size */
  padding-top: 4px;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
  text-align: left !important;
  display: block !important;
  width: 100%;
}

.basic-cost .card-cost {
  font-size: 0.9em !important;
}

.card-condition {
  font-size: 0.8em;      /* Base font size */
  padding-top: 4px;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
  text-align: left !important;
  display: block !important;
  width: 100%;
}

.card-image {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  background-color: #ddd;
  margin-bottom: 4px;
  border: 3px solid black;
  overflow: hidden;
}

.card-image img.card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card-tags {
  width: 100%;
  background-color: black;
  color: white;
  padding: 4px;
  text-align: center;
  font-weight: bold;
}

.card-tags span {
  background-color: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.card-text {
  list-style-type: none;
  width: 100%;            /* Match the width of the card name */
  max-height: 16em;       /* Limit the height of the text box (adjustable) */
  overflow: hidden;
  margin-top: 2px;       /* Reduced top margin to bring text closer to the name */
  display: flex;
  flex-direction: column;
  text-align: left;
  box-sizing: border-box;
  flex-grow: 1; /* Allow the text content to take up space without affecting the bottom bar */
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black;
  padding-bottom: 60px !important;
}

.card-text .line-gap{
  display:block;      /* force a real break            */
  height:4px;         /* ≈ half a blank line at 16 px  */
  line-height:0;      /* keep the baseline tight       */
}

.card:not(.champion) .card-text{
  padding-bottom: 0 !important;
}

.champion .card-text {
  text-shadow: none;
}
.champion .card-name {
  text-shadow: none;
}
.champion .card-cost {
  text-shadow: none;
}
.champion .card-condition {
  text-shadow: none;
}
.action .card-text {
  text-shadow: none;
}
.action .card-name {
  text-shadow: none;
}
.action .card-cost {
  text-shadow: none;
}
.action .card-condition {
  text-shadow: none;
}
.equipment .card-text {
  text-shadow: none;
}
.equipment .card-name {
  text-shadow: none;
}
.equipment .card-cost {
  text-shadow: none;
}
.equipment .card-condition {
  text-shadow: none;
}
.obelisk .card-text {
  text-shadow: none;
}
.obelisk .card-name {
  text-shadow: none;
}
.obelisk .card-cost {
  text-shadow: none;
}
.obelisk .card-condition {
  text-shadow: none;
}
.rush .card-text {
  text-shadow: none;
}
.rush .card-name {
  text-shadow: none;
}
.rush .card-cost {
  text-shadow: none;
}
.rush .card-condition {
  text-shadow: none;
}
.reflex .card-text {
  text-shadow: none;
}
.reflex .card-name {
  text-shadow: none;
}
.reflex .card-cost {
  text-shadow: none;
}
.reflex .card-condition {
  text-shadow: none;
}

.card-text .effect {
  margin-bottom: 4px;     /* Adjust margin between effects */
}
.card-text .keyword {
  margin-bottom: 4px;     /* Adjust margin between keywords */
}

.card {
  width: 240px;
  height: 420px;
  padding: 2px 8px;
  margin: 16px;
  border: 3px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;  /* Ensure that the .bottom-bar is positioned relative to the card */
  overflow: visible;
  z-index: 1;
  background-blend-mode: overlay;
  border-radius: 4px;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://geimon-app-833627ba44e0.herokuapp.com/Public/Images/Site Assets/noise.png'); /* Make sure this path is correct */
  background-repeat: repeat;
  opacity: 0.05; /* tweak this for more or less texture */
  z-index: 0;
  pointer-events: none;
}
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://geimon-app-833627ba44e0.herokuapp.com/Public/Images/Site Assets/paper-fiber.png'); /* optional additional texture */
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .card {
      width: calc(50% - 32px); /* Cards take up 50% of the container width on medium screens */
  }
}

@media (max-width: 480px) {
  .card {
      width: calc(100% - 32px); /* Cards take up 100% of the container width on small screens */
  }
}

.hover-menu {
  font-family: Arial, sans-serif;
  border-radius: 4px;
  z-index: 550000 !important;
}

.bottom-bar {
  width: 70%;                  /* Reduced width */
  height: 28px;
  display: flex;
  position: absolute;
  bottom: 5px;                /* Moves the bar up from the very bottom of the card */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally within the card */
  background-color: #000000;
  color: white;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid #000000;
}
.bottom-bar .damage,
.bottom-bar .life {
  width: 50%;
  display: flex;
  align-items: center;         /* Vertically center the numbers */
  justify-content: center;     /* Horizontally center the numbers */
  text-align: center;
  font-size: 1.2em;            /* Adjust font size */
  font-weight: bold;
  padding: 0;
}
.bottom-bar .damage {
  background-color: #ff0000;
  clip-path: polygon(0 0, 100% 0, 98.5% 100%, 0 100%);
}
.bottom-bar .life {
  background-color: #6057ff;
  clip-path: polygon(1.5% 0, 100% 0, 100% 100%, 0% 100%);
}
.bottom-bar .damageThreshold {
    font-size: 32px; /* Make larger */
    font-weight: bold;
    background-color: rgb(173, 240, 255);
    color: rgb(0, 0, 0);
    padding: 0px 6px 6px 8px;
    border-radius: 4px;
    line-height: 30px;
    text-shadow: none;
}

.tooltip {
  position: absolute;
  background-color: black;
  color: white;
  border: 1px solid white;
  padding: 8px;
  pointer-events: none;
  z-index: 1000;
  display: none;
  max-width: 350px; /* Set the maximum width */
  word-wrap: break-word; /* Wrap long words */
  white-space: pre-line;
}

.empty-deck-message {
  color: white;
  font-size: 1.5em;
  text-align: center;
  margin-top: 20px;
}

.viewing-window {
  width: 300px;
  height: 460px;
  background-color: #2f2f2f;
  margin-right: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 0 10px black;
  position: fixed;
  top: 565px;              /* vertically center, optional */
  left: 20px;
  transform: translateY(-50%);  /* vertically center, optional */
  z-index: 10;           /* make sure it stays above background layers */
}
.viewing-window .scaled-card {
  transform: scale(1);
  transform-origin: top left;
  pointer-events: none;
}

.menu-list {
  list-style-type: none;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-item {
  width: 700px;
  margin-bottom: -8px;
  font-family: 'Racing Sans One', sans-serif;
  background-color: #c7c7c7;
  border: 8px solid #000000;
  color: #000000;
  padding: 10px 20px;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  flex-grow: 1;
  margin: -8px 8px; /* spacing between buttons */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.7rem, 2vw, 4rem);
  max-width: 100%;
}
.menu-item:hover {
  background-color: #949494;
}

.deck-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.left-btn, .right-btn, .copy-btn, .export-btn {
  width: 50px;
  height: 50px;
  border: 8px solid #000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 1.5em;
  cursor: pointer;
  user-select: none;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: background-color 0.3s;
}

.left-btn {
background-color: #0055ff;
}
.left-btn:hover {
background-color: #003bb5;
}

.right-btn {
background-color: #ff0000;
}
.right-btn:hover {
background-color: #cc0000;
}

.export-btn {
background-color: #ffb300;
margin-right: 5px;
}
.export-btn:hover {
background-color: #c7a003;
}

.copy-btn {
background-color: #60fff4;
margin-right: 5px;
}
.copy-btn:hover {
background-color: #29c7bd;
}

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0.3;
    z-index: -2;
    pointer-events: none;
}

.profile-wrapper {
  position: relative;
  width: 100%;
  height: 220px; /* slightly taller than the profile image height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px; /* optional: controls offset space */
  gap: 15%;
}
.profile-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.thumbnail {
  height: 200px;
  width: auto;
  object-fit: cover;
}
.zone-overlay,
.sleeve-overlay {
  height: 200px;
  object-fit: cover;
  overflow: hidden;
  pointer-events: none;
  border: 2px solid black;
  transform: translateX(-50%);
}
.zone-overlay {
  aspect-ratio: 2 / 1;
}
.sleeve-overlay {
  width: 120px;
}
.crop-info {
  text-align: center;
  color: white;
  margin-top: 10px;
  text-shadow: 2px 2px 4px black;
}

#player-side,
#opponent-side {
    position: absolute;
    width: 90%;
    height: 50vh; /* half viewport height */
    overflow: visible; /* allow flash to expand outside */
}
#player-side {
    bottom: 20px;
}
#opponent-side {
    top: 20px;
}

.life-flash {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    left: 60%;
    transform: translateX(-60%) scale(0);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.life-flash.active {
    transform: translateX(-60%) scale(4);
    opacity: 0.5;
}
.life-flash.damage {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, transparent 80%);
}
.life-flash.heal {
    background: radial-gradient(circle, rgba(0, 136, 255, 0.8) 0%, transparent 80%);
}
.life-flash.top {
    top: 0;
}
.life-flash.bottom {
    bottom: 0;
}

.card.selected {
  outline: 4px solid yellow;
}

.swing-animation {
  animation: swingOut 1s ease-in-out forwards;
}

@keyframes swingOut {
  0% { transform: scale(0.3) translateY(0); }
  50% { transform: scale(0.3) translateY(-120px); }
  100% { transform: scale(0.3) translateY(0); }
}

@keyframes cardDrawSlide {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.path-step-indicator {
  animation: flashStep 0.5s ease-out;
}

@keyframes flashStep {
  0% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

#playerChampionsBox,
#opponentChampionsBox {
  pointer-events: auto !important;
  z-index: 101000 !important;   /* beats the 100300 inline value */
}

#playerChampionsBox > div:not(:first-child) {
  flex-shrink: 0 !important;
  margin-left: -195px !important;
}

#playerFaceDownBox > div {
  flex-shrink: 0 !important;
  margin-left: -230px !important;
}

#playerArsenalBox > div:not(:first-child) {
  flex-shrink: 0 !important;
  margin-left: -195px !important;
}

#playerFaceDownArsenalBox > div {
  flex-shrink: 0 !important;
  margin-left: -220px !important;
}
#playerFaceDownArsenalBox .sleeve-overlay {
  transform: none !important;
}

#opponentChampionsBox .card {
  transform: rotate(180deg) scale(1);
  transform-origin: center center;
}

#opponentFaceDownBox > div {
  flex-shrink: 0 !important;
  margin-left: -172.5px !important;
  transform: rotate(90deg) scale(0.3) !important;
}
#opponentFaceDownBox .sleeve-overlay {
  transform: rotate(180deg) !important;
}

#opponentFaceDownArsenalBox > div {
  flex-shrink: 0 !important;
  margin-left: -200px !important;
  transform: rotate(180deg) scale(0.3) !important;
}
#opponentFaceDownArsenalBox .sleeve-overlay {
  transform: rotate(180deg) !important;
}

#playerReserveBox {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    flex-start;
  align-content:  flex-start;
  overflow:       visible;
}
#playerReserveBox > .card {
  flex-shrink: 0 !important;
}
#playerReserveBox > div {
  transform: scale(0.25) !important;
  transform-origin: top center !important;
}

#opponentReserveBox{
  display:        flex;
  flex-wrap:      wrap;          /* let it break into rows               */
  align-items:    flex-end;      /* start each row from the BOTTOM edge  */
  align-content:  flex-end;      /* push completed rows downwards        */
  overflow:       visible;
}
#opponentReserveBox>.card{
  flex-shrink: 0 !important;
}
#opponentReserveBox>div{
  transform: rotate(180deg) scale(0.25) !important;
  transform-origin: bottom center !important;  /* pivot from new “top”   */
}

#life-adjust-box {
  position: fixed;
  top: calc( (600px + 320px) / 2 ); /* halfway between your two life windows */
  left: calc( (1960px + 1960px) / 2 ); /* or whatever x-coordinate fits between them */
  transform: translate(-50%, -50%);
  background: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 100500;
  text-align: center;
  font-family: sans-serif;
}
#life-adjust-box .life-adjust-buttons {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
}
#life-adjust-box input {
  width: 80px;
  margin-bottom: 8px;
  text-align: center;
}
#life-adjust-box button {
  cursor: pointer;
}
#life-adjust-box button.active {
  background-color: #007acc;
  color: white;
}

#viewing-window .counter-overlay {
  display: none !important;
}

.revealed-card{
  outline:3px solid yellow !important;
}

.target-highlight{
    outline: 8px solid red !important;
    box-shadow: 0 0 12px red !important;
}

.revealed-card.target-highlight {
    outline: 8px solid red !important;
    box-shadow: 0 0 12px red !important;
}

@keyframes deckShuffle {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-8px) rotate(-2deg); }
  50%  { transform: translateX(8px)  rotate(2deg); }
  75%  { transform: translateX(-8px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.shuffle-animation {
  animation: deckShuffle 0.6s ease-in-out;
}

#totem-bubble {
    position: absolute;
    top: 10px;
    left: 1417px;
    background-color: goldenrod;
    color: black;
    padding: 5px 15px 15px 15px;
    border-radius: 10px;
    width: 440px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    z-index: 200000; /* keep it above other elements */
}
#totem-bubble #totem-title {
    font-size: 1em;
    margin-bottom: 0px;
}
#totem-bubble #totem-text {
    font-size: 0.75em;
    font-weight: normal;
}