:root {
    --cardAspectRatio: calc(3.5/2.5);
    --cardHeightMobile: 45vh;
    --rewardDeckColor: #94403a;
    --challengeDeckColor: #46568a;
    --rewardDeckColorLight: #ffaaaa;
    --challengeDeckColorLight: #aaaaff;   
    --cardWidthMobile: 78vw;
    --bg: #f6f7f9;
    --panel: #ffffff;
    --text: #1f2933;
    --muted: #667085;
    --line: #d9dee5;
    --primary: #2457a6;
    --primary-dark: #1b447f;
    --danger: #b42318;
    --warning: #b54708;
    --success: #027a48;
    --info: #175cd3;
    --radius: 12px;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .area {
    text-align:center
  }

  .hidden {
    display: none !important;
  }
  
  .hiddenNoToggle {
  	display: none !important;
  }
  
  .discarded {
  	position: fixed;
  	bottom: -50vh;
  }

#teamName {
	position: fixed;
	top: 0;
	right: 0px;
	font-size: 1em;
	margin: 0px;
}

#screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: rgba(0,0,0,0.85);

    opacity: 0;
    visibility: hidden;
	pointer-events: none;
    transition:
        opacity 500ms ease-in-out,
        visibility 0s linear 500ms;
}

#screen.visible {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 500ms ease-in-out,
        visibility 0s;
}

  .message {
    padding: 5vh 5vw;
    border-radius: 1vw;
    border: solid 1px black;
    background: rgba(0,0,0,0.1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #shelf {
    top: 0;
  }

  #rewardHand {
    bottom: 1vh;
  }

  #challengeHand {
    top: 1vh;
  }



  .challengeCard {
    background: var(--challengeDeckColorLight);
  }

  .rewardCard {
    background: var(--rewardDeckColorLight);
  }


  .card {
    display: inline-block;
    border-radius: 10px;
    border: solid 1px black;
    /*color: white;*/
    /*flex-shrink: 0;*/
    transition: scale 250ms ease, width 250ms ease,height 250ms ease, transform 250ms ease;
  }
  
 .rewardStack {
 	margin-right: 2vw;
   box-shadow:
    3px 3px 0px 0px var(--rewardDeckColor),   
    3px 3px 0px 2px black,   
    6px 6px 0px 0px var(--rewardDeckColor),   
    6px 6px 0px 2px black,  
    9px 9px 0px 0px var(--rewardDeckColor),  
    9px 9px 0px 2px black,  
    12px 12px 0px 0px var(--rewardDeckColor);  
    12px 12px 0px 2px black, 
 }
  
.challengeStack {
 	margin-right: 2vw;
      box-shadow:
    3px 3px 0px 0px var(--challengeDeckColor),  
    3px 3px 0px 2px black,   
    6px 6px 0px 0px var(--challengeDeckColor),   
    6px 6px 0px 2px black,  
    9px 9px 0px 0px var(--challengeDeckColor),   
    9px 9px 0px 2px black,  
    12px 12px 0px 0px var(--challengeDeckColor);  
    12px 12px 0px 2px black, 
}
  
 .rewardBack {
  background-image: url('https://www.peteandjoyce.com/JetLag/images/reward-back.png');
  background-size: cover;       /* Scales the image to completely fill the container */
  background-position: center;  /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from tiling */
  background-color: var(--rewardDeckColor);
  background-blend-mode: multiply;  
  }
  
  .challengeBack{
    background-image: url('https://www.peteandjoyce.com/JetLag/images/challenge-back.png');
    background-size: cover;       /* Scales the image to completely fill the container */
  background-position: center;  /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from tiling */
  background-color: var(--challengeDeckColor);
  background-blend-mode: multiply;

  }
  
 
.cardContainer {
  container-type: inline-size; 
	display: block;
	width: 100%;
	height: 100%;
	/*position: relative;*/
    overflow-x: hidden;
    overflow-y: hidden;
}

/*
.cardContainer .shownCard {
	position: static;
}
*/

.cardButtonArea {
	width: 100%;
	height: 10%;
	margin: auto;
	text-align: center;
}
.cardDecoration {
	width: 60%;
	height: 25%;
	margin: auto;
	text-align: center;
    font-size: 25cqw;
}
.logoImage {
  height: 100%;
}

.cardContainer .cardTitle {
	width: 90%;
	height: 15%;
	margin: auto;
	text-align: center;
  font-size: 8cqw;
  text-transform: uppercase;
}
.cardContainer .cardDescription {
	width: 90%;
	height: 40%;
	margin: auto;
	text-align: center;
  font-size: 5cqw;
}

.cardBottom {
	display: flex;
	margin: auto;
	text-align: center;
    height: 12%;
    
  justify-content: space-between; /* Spreads the 3 columns evenly */
  align-items: center;    
}
.leftSpacer {
	background: #aaa;
	height: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px white solid;
	margin: 3cqw;
	text-align: center;
	line-height: 1em;
	font-size: 10cqw;
	color: white;
	font-family: serif;
    visibility: hidden; /* Invisible, but still occupies layout space */
}


.cardValue{
	margin: auto;
	text-align: center;

    border-radius: 50%;
    height: 100%;
    aspect-ratio: 1;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    font-size: 15cqw;
    margin-top: -10px;
}

.cardInfoButton {
	background: #aaa;
	height: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px white solid;
	margin: 3cqw;
	text-align: center;
	line-height: 1em;
	font-size: 10cqw;
	color: white;
	font-family: serif;
	margin-bottom: 8px;
  	align-self: flex-end; /* Latches to the bottom right */
}




  #challengeHand .shownCard , #rewardHand .shownCard, body > .shownCard {
    z-index: 50;
    border: solid 2px black;
  }



  .cardButton {
   font-size: 0.7em;
   /*background: rgba(255,255,255,0.5 );*/
   width: 50%;
  }
  .placeholder {
    /*background: rgba(128,128,0,0.5);*/
    visibility: hidden;
    display: none;
  }
  
  .invisible {
    visibility: hidden;
  }

 #stagingMessage {
	position: absolute;
	bottom: calc(3*var(--cardHeightMobile)/2);
	margin-bottom: 40px;
	left: 0vw;
	width: 100vw;
	font-size: 3em;
	text-align: center;
	/*background: rgba(255,255,255,0.9);*/
  }

  .invert{
  filter: invert(1)
  }

  /* ----------------------------------------------------------
     Laptop / LARGE-SCREEN LAYOUT
     ---------------------------------------------------------- */


@media (min-width: 700px) {


  #stagingHand {
    position: fixed;
    height: 100vh;
	width: 100vw;
    /*background: rgba(222,222,222,0.5);*/
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    z-index: 10;
    top: 50vh;
	transform: translateY(calc(-15vw/2 * var(--cardAspectRatio)));
  }
  
  .card {
    width: 15vw;
    height: calc(15vw * var(--cardAspectRatio));
  }

  .shownCard {
    transform:
        translate(var(--move-x, 0px), var(--move-y, 0px))
        scale(calc(90vh / 20vw));
    z-index: 50;
  }
 
  .challengeCard {
    margin-right: var(--offset, 1vw);
  }

  .rewardCard {
    margin-right: var(--offset, 1vw);
  }
 
 #stagingHand .challengeCard, #stagingHand .rewardCard {
 	margin-right: 1vw;
 }

}



  /* ----------------------------------------------------------
     PHONE / SMALL-SCREEN LAYOUT
     ---------------------------------------------------------- */

  @media (max-width: 700px) {

  #challengeHand, #rewardHand, #discardHand  {
    display: flex;
    justify-content: flex-start;
    width: 100vw;
    max-width: 100vw;
    overflow-x: auto;
    /*overflow-y: hidden;*/
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    gap: 3vw;
    padding-left: 11vw;
    padding-right: 11vw;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: calc((50vh - var(--cardHeightMobile))/4);
  }

#stagingHand  {
    position: fixed;
    height: 100vh;
    /*background: rgba(222,222,222,0.5);*/
    z-index: 10;
    top: calc(1.2*var(--cardHeightMobile)/2);

    display: flex;
    justify-content: flex-start;
    width: 100vw;
    max-width: 100vw;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    gap: 3vw;
    padding-left: 11vw;
    padding-right: 11vw;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  
  .clipped {
	overflow-x: auto;
  	overflow-y: hidden;
  }
  
  .placeholder {
    display: none !important;
  }

 .card {
    height: var(--cardHeightMobile);
    width: calc(var(--cardHeightMobile)/var(--cardAspectRatio));

    flex: 0 0 calc(var(--cardHeightMobile)/var(--cardAspectRatio));
    /*    flex: 0 0 var(--cardWidthMobile) ;*/
    scroll-snap-align: center;
    scroll-snap-stop: always;

    display: flex;
    gap: 3vw;
    align-items: top;
    justify-content: center;

    font-size: 10cqw;
    transition: scale 0ms ease, width 0ms ease,height 0ms ease, transform 0ms ease;

  }
  


  .buttonContainer{
    width: calc(var(--cardHeightMobile)/var(--cardAspectRatio));
  }
  
    .shownCard {
    position: fixed;
    top: calc((99vh - min(98vh, 98vw*var(--cardAspectRatio)))/2);
    left: calc((99vw - min(98vw, 98vh/var(--cardAspectRatio)))/2);
    width: calc(min(98vw, 98vh/var(--cardAspectRatio)));
    height: calc(min(98vh, 98vw*var(--cardAspectRatio)));
    max-height: 100vh;
    max-width: 100vw;
    aspect-ratio: var(--cardAspectRatio);
	transform: translate(var(--move-x, 0px), var(--move-y, 0px))
	
  }
  #stagingMessage {
	font-size: 2em;
  }

}

#returnToLobbyButton{
    position: fixed;
    top: 0px;
    left: 0px;
}


.privateChallengeCard { outline: 3px solid gold; outline-offset: -3px; }
.attentionNotice, .cursePresentation {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 8vw;
  color: white; font-size: clamp(1.5rem, 6vw, 3rem); font-weight: bold;
  background: rgba(0,0,0,0.72); cursor: pointer;
}
.attentionNotice::after { content: "Tap to continue"; display:block; margin-top: 1.5rem; font-size: .45em; font-weight: normal; }
.cursePresentationCard { margin: 0 !important; }
.cursePresentationMessage { margin-bottom: 1rem; }
/* The curse bar sits above ordinary hand cards, but an enlarged card must
   remain fully interactive above the bar. Attention/curse presentation
   overlays stay higher still at z-index 10000. */
.curseBars { position: fixed; z-index: 9000; top:0; left:0; right:0; display:flex; flex-direction:column; pointer-events:none; }
.curseBar { min-height:42px; background:#b00020; color:white; display:flex; gap:.5rem; align-items:center; padding:.35rem .5rem; box-sizing:border-box; pointer-events:auto; }
.shownCard { z-index: 9500 !important; }
.curseBar span { flex:1; font-weight:bold; }
.curseBar button { padding:.3rem .6rem; }

#discardArea { margin-top: 105vh; padding: 1rem 0 4rem; }
#discardHand { display:flex; flex-wrap:wrap; justify-content:center; gap:1vw; }
#discardHand .card { margin:0; }