/* Note re media queries: Our bootstrap breakpoints are: sm: 550px, md: 768px, lg: 992px, xl: 1200px */
/* And max-width MUST be one less than the breakpoint (or it cause problem) */


#play-grid, #play-grid-with-commentary {
	background-color: green;
}


#play-header-block {
    grid-area: header;
    justify-self: stretch;
}

#play-footer-block {
    grid-area: footer;
    justify-self: stretch;
}

#play-top-left-block {
    grid-area: topleft;
    display: none;
    justify-self: start;
}


#play-tricks-won-lost {
    margin-top: 14px;
    margin-left: 10px;
    width: 140px;

}

#play-tricks-won-ns {
    border-radius: 5px; 
    background-color:#3D84E5; 
    border: solid 5px #F8F8F8; 
    font-size: 2rem; 
    color: white;
    text-align: center;
    height: 75px; 
    width: 56px; 
    line-height: 1.9; 
}

#play-tricks-won-ew {
    border-radius: 5px; 
    background-color:#3D84E5; 
    border: solid 5px #F8F8F8; 
    font-size: 2rem; 
    color: white;
    text-align: center;
    height: 55px; 
    width: 75px; 
    line-height: 1.3;  
}

.cardback-outer {
    border: solid 1px #000;
    border-radius: 6px;     
}

#play-north-block {
    grid-area: north;
	align-self: start;
    /* long suit overlap in front of play area. Must be on outer North block*/
    z-index: 1;
}

#play-north-block-small {
    display: flex ;
    margin-top: 2px;
}

#play-north-block-large {
   /* top margin allows us to have negative margin vertical card spacer on all cards */
   margin-top: 80px;
   display: none ;	
}


#play-south-block {
    grid-area: south;
	align-self: end;
}

#play-south-block-small {
    display: flex ;
    margin-bottom: 2px;
}
 
#play-south-block-large {
    display: none;
    /* this compensates for negative margin card spacer. Using rem help keeps it centers for scaled version in grid with commentary */
    margin-left: 3rem;
}

#play-west-block {
   grid-area: west;
   display: flex;
   justify-self: stretch;
   visibility:hidden;
}

#play-west-block-small {
   /* help center it vertically */
    margin-top: -2px;
}

#play-west-block-large {
   /* top margin allows us to have negative margin vertical suit spacer on all suit.  Avoid problem when last card from top suit is removed in js */
   margin-top: 85px;
   /* left margin allows us to have negative margin card spacer on all cards.  Avoid problem when first card in suit is removed in js */
   margin-left: 65px;
   display: none ;
}

#play-east-block {
    grid-area: east;
    display: flex;
    justify-self: stretch;
    visibility:hidden;
}

#play-east-block-small {
    /* help center it vertically */
    margin-top: -2px;
}

#play-east-block-large {
   /* top margin allows us to have negative margin vertical suit spacer on all suit.  Avoid problem when last card from top suit is removed in js */
   margin-top: 85px;
   /* left margin allows us to have negative margin card spacer on all cards.  Avoid problem when first card in suit is removed in js */
   margin-left: 95px;
   display: none;
}


#play-commentary-block {
    grid-area: commentary;
    justify-self: end;
}	

/* this is hack to get small gap at end of commentary so they know they have finished scrolling.
All other solutions.. padding etc result in the whitespace being removed presumably by overflow: auto */
#commentary-end {
    line-height: .1;
}
	
#play-auction {
    grid-area: auction;
    display: none;
    justify-self: end;
}

#play-area {
    grid-area: playarea;
    align-self: end;
}

#play-area-block-small {
   /* this to to enable the abolute positioning of the cards which worked better than any other layour medthod
   for purpose of aligning the block */
   position: relative;
   width: 120px;
   height: 130px;
   background-color: #a7d1df;  
   border: solid 2px #333;
}

#played-card-w-small {
    position:absolute; 
    top: 35px;
    left: 5px;
}

#played-card-n-small {
    position:absolute; 
    top: 5px; 
    left: 35px;
}
#played-card-e-small {
    position:absolute; 
    top: 35px; 
    left: 65px;
}
#played-card-s-small {
    position:absolute; 
    top: 65px; 
    left: 35px;
}

#play-area-block-large {
   display: none;
    box-sizing: border-box;
   /* this to to enable the abolute positioning of the cards which worked better than any other layour medthod
   for purpose of aligning the block */
   position: relative;
   width: 162px;
   height: 166px;
   background-color: #d8d8d8;  
   border: solid 2px #333;
   margin-bottom: 6px;
}

#played-card-w {
    position:absolute; 
    top: 26px;
    left: 5px;
}

#played-card-n {
    position:absolute; 
    top: 3px; 
    left: 41px;
}
#played-card-e{
    position:absolute; 
    top: 26px; 
    left: 74px;
}
#played-card-s {
    position:absolute; 
    top: 49px; 
    left: 41px;
}

#northtoplay-arrow-s, #southtoplay-arrow-s, #westtoplay-arrow-s, #easttoplay-arrow-s {
    color: #d8d8d8;
    position:absolute; 
    font-size: 2rem;
}

#northtoplay-arrow-s {
    top: -23px;
    left: 43px;

}

#southtoplay-arrow-s {
    bottom: -23px; 
    left: 43px;
}

#westtoplay-arrow-s {
    top: 50px;
    left: -23px;
}

#easttoplay-arrow-s {
    top: 50px;
    right: -23px;
}

#play-commentary-block {
        display: none;
    }

#play-grid-with-commentary #play-commentary-block {
    display:block;
    overflow: auto;
}

#commentary-body {
    padding-top: 0;
}

/* fix vertical alignment problem */
#show-auction-dd-container {
   display: flex;
   border: solid 1px white;
   border-radius: 0px; 
   line-height: 1.3; 
   padding: 0;
}

/* fake dropdown button */
#showauctionbtn {
    color: white;
    font-size: 1.1rem;
    padding: 2px 2px 0px 2px;
}

#play-contract {
    background-color: #ddd;
}

#play-contract h5 {
    padding-top: 2px; 
    padding-bottom: 5px; 
    margin-bottom: 0;
}

#play-defend-button {
    border: none;
    background: none;
    outline: none;
}

#result-box-small {
    background-color: #fff; 
    height: 100%;
}

#result-box-small h5 {
    margin-top: 12px;
    margin-bottom: 18px;
}

#result-box-large {
    background-color: white; 
    width: 80%; 
    margin-top: 22px;
    padding-bottom: 12px;
}

#result-box-large h5 {
    padding: 8px; 
    margin-bottom: 6px;
}

#result-line {
    background-color: #ccc;  
    padding-top: 3px; 
    border: solid 3px white;
}

#claimall {
    width: 50px;
}

#bar-item-level {
    display: none;
}

/* make it the same for both with and without commentary */
#top-bar-handno {
     padding: 0 5px 0 5px;
}

/* override bootstrap padding to avoid overflow on smallest phones when Level is shown */
#play-grid-with-commentary #bar-item-tricks-won, 
#play-grid-with-commentary #top-bar-contract2  {
    padding: 0 5px 0 5px;
}

/* tweak padding so buttons don't overflow on ipad portrait. Bottom padding fixes vertical alignment */
#moreoptions-dropdown {
    padding: 0px 5px 1px 9px;
}

/* tweak padding so form button lines up with other buttons */
#printhandbtn {
   padding: 2px 0px 0px 11px;
}

#auction-modal .modal-dialog {
    width: 199px;
}

#auction-modal .modal-body {
    padding: 0;
}

/* these buttons are visuals only and do not operate as buttons, so prevent bs default styling if clicked */
#help-modal .modal-body button {
    pointer-events: none;
}

/* ======================================== CARD SPACERS AND DUPLICATED CARD =============================*/
.card-suit-spacer {
   /* this overrides the version in app.css 
    larger right margin allows us to have negative card spacer on all cards including first in suit
    this is required when we remove the first card is suit in the js*/
	margin-right: 40px;
}

.dummy-suit-spacer {
    margin-right: 95px;
}

.card-v-spacer {
margin-top: -81px;
}
.card-v-suit-spacer {
	margin-left: 10px;
}

.card-ew-spacer {
	margin-left: -60px;
}
.card-ew-suit-spacer {
    margin-top: -60px;
    /* giving it a height means the suits don't move upwards when one becomes void */
    height: 110px;
}

.play-duplicated-card {
    /* must be set to important or css is not actioned when large index card css is added */
    display: none !important;
}

.scard:disabled {
    /* This prevents the card numbers changing to grey when cards are disabled */
     color: black;
}

.played-card {
    /* this class is just used for targetting played cards in the js to hide them at end of trick */
}

.delay-card {
    /* must be set to important or css is not actioned when large index card css is added */
    display: none !important;
}

.showme-box {
    width: 222px; 
    padding: 0 10px 0 10px
}

.info-icons button {
    cursor: default !important;
    margin-right: 8px;
    margin-bottom: 5px;
}

.info-row {
    display: flex;
}

.info-col {
    flex: 50%;
}

.won-trick-info {
    padding-right: 10px;
}

/* lighten modal backdrow (default is .5)*/
.modal-backdrop.show {
    opacity: .35;
}
/* Override bootstrap color for custom radio (it otherwise defaults to primary)
/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: #777;
}
    
/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:  0 0 1px #fff, 0 0 0 0.2rem #ddd;
}    
.custom-radio .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #666;
    background-color: #666;
}
/* ================================ DROP UP MENUS IN FOOTER BAR =============================*/
#play-footer-block .dropdown-menu {
    background-color:#0066CC; opacity: 0.95;
}

#play-footer-block .dropdown-menu button {
    color: white;
}

#play-footer-block .dropdown-menu .claim-tricks button {
    width: 50px;
    padding: 4px 10px 4px 10px;
    text-align: center;
}

#play-footer-block .dropdown-menu button:hover {
    background-color: #004D99;
}
/* ------------------------- end Drop up menus in footer bar --------------------------*/
  


/* =================================================DEFAULT LAYOUT PHONE SIZE =========================*/	
/* note there is no 'non-grid' fallback for very old phones */

@supports (grid-area: auto)	 {
/* mobile phones including wide ones  */

    #play-grid {
		margin: auto;
		display: grid;
		justify-items: center;
		grid-template-rows: 30px 19% minmax(42%, 135px) auto 30px;		
		grid-template-columns: 40%  20% 40%;
		grid-template-areas:
			 "header header header"
			 "north north north"
			 "west playarea east"
			 "south south south"
			 "footer footer footer";
	}
    
   #play-grid-with-commentary {
      margin: auto;
      display: grid;
      justify-items: center;

      /* 20% instead of 19% (without commentary) prevents E/W moving up and down */
      grid-template-rows: 30px 20% minmax(42%, 135px) auto 30px;
	  grid-template-columns: 27% 18% 27% 28%;
      grid-template-areas:
       "header header header header"
       "north north north commentary"
       "west playarea east commentary"
       "south south south commentary"
       "footer footer footer footer";
    }
    
 }   /* end of supports grid area auto
   
/* ==============================  SET VIEWPORT HEIGHTS FOR PHONES =========================*/
/* all  short devices  */ 
@media only screen and  (max-height: 499px) and (max-width: 799px)   {
	#play-grid  {
		height: 100vh;
	}
    #play-grid-with-commentary  {
		height: 100vh;
	}
}

/* this is to cater for iPhone X which has white/black link which overlays bottom of screen */
@media only screen and (max-height: 499px) and (min-width: 800px)  {
	#play-grid  {
		height: 97.5vh;
	}
    #play-grid-with-commentary  {
		height: 97.5vh;
	}
}

/* Scale the Play Area. Scale N/S cards (main grid only) for very short phones e.g. Iphone5 */
@media only screen and (max-height: 350px)  {
    /* Scale the small cards */
	#play-grid #play-north-block-small {
        transform: scale(.9);
        transform-origin: top;
    } 
    
	#play-grid #play-south-block-small {
        transform: scale(.9);
        transform-origin: bottom;
    }    
    
    #play-area-block-small {
        transform: scale(.9);
        transform-origin: bottom;
    }
    
}

/* Scale the N/S cards for commentary page on phones less than 800px. Scale using  on veiwport width */
@media only screen and  (max-height: 499px) and (max-width: 799px)   {
	#play-grid-with-commentary #play-north-block-small .scard, #play-grid-with-commentary #play-south-block-small .scard {
		font-family: 'arial';
		background-color: white;
		border: solid 1px #ccc;
		border-radius: 4px;
		text-align: center;
		height: 7.5vw;
		width: 4.5vw;
		font-size: 3.5vw;
		line-height: 100%;
	}
}

/* =============================  ADDITIONAL CHANGES FOR PHONES  ===================*/
@media only screen and (max-height: 499px)  { /* iPhone6 is 667 */
    
    /* =============================== SCALE THE E/W CARDS  ===================*/
    /* Only scale the E/W small cards when height < 500px otherwise they get oversized on computer if rezise window to narrow and long */

    #play-west-block-small .scard, #play-east-block-small .scard {
        font-family: 'arial';
        border: solid 1px #ccc;
        border-radius: 3px;
        text-align: center;
        height: 11vh;
        width: 6vh;
        font-size: 5vh;
        line-height: 90%;
        padding-top: 1px;
        margin: 0 1px 2px 0;
    }

    .scard-ew-suit-spacer {
         height: 11vh;
    }
    
    /* Margins to position the East and West blocks */
    #play-west-block-small {
        margin-left: 7vw;
    }

    #play-east-block-small {
        margin-left: 14vw;
    }

    #play-grid-with-commentary #play-west-block-small {
        margin-left: 2vw;
        z-index: 1;
    }

    #play-grid-with-commentary	#play-east-block-small {
       margin-left: 4vw ;	
       z-index: 1;
    } 

}

/* ========================== TABLET PORTRAIT MODE ==============================================*/
/* Deliver large cards version of the display for all devices taller than 499px. 768px is tablet portrait mode.  Everything narrower than this will have scaling applied in seperate media query below this one */
@media only screen and (min-height: 500px)  {
	@supports (grid-area: auto)	 {
        

        /* both grids are the same, we just hide the commentary for main grid */
        #play-grid, #play-grid-with-commentary {
		margin: auto;
		display: grid;
		justify-items: center;

		grid-template-rows: 30px 130px 310px 120px  30px auto;
		grid-template-columns: 30% 40% 30%;
		grid-template-areas:
			 "header header header"
			 "topleft north auction"
			 "west playarea east"
			 "south south south"
             "footer footer footer"
             "commentary commentary commentary";
		}   
       
	}
    /* don't show the things only needed for phone in the header */
    #bar-item-tricks-label, #bar-item-tricks-won, #show-auction-dd-container {
        display: none;
    }
    
    #play-top-left-block {
        display: block;
    }
    
    #play-auction {
        display: block;
    }
    
    #play-area-block-small {
        display: none;
    }

    #play-area-block-large  {
        display: block;
    }

    
    #play-grid #play-commentary-block {
          display: none;
     }

    #play-grid-with-commentary #play-commentary-block {
           display: block;
           height: 280px;
     }
    
    #commentary-body {
        padding: 6px 20px 6px 12px;
    }
    
	#play-south-block-large {
	   display: flex ;		
	}

	#play-south-block-small {
	   display: none ;		
	}
	
	#play-north-block-large {
	   display: flex ;
	}

	#play-north-block-small {
	   display: none ;		
	}

	#play-west-block-large {
	   display: flex ;
	}

	#play-west-block-small {
	   display: none ;		
	}	
    
    #play-east-block-large {
	   display: flex ;
	}

	#play-east-block-small {
	   display: none ;		
	}
    
    #northtoplay-arrow-l, #southtoplay-arrow-l, #westtoplay-arrow-l, #easttoplay-arrow-l {
        color: #d8d8d8;
        position:absolute; 
        font-size: 2.3rem;
    }
    
    #northtoplay-arrow-l {
        top: -25px;
        left: 64px;
    }    

    #southtoplay-arrow-l {
        bottom: -25px; 
        left: 64px;
    }
    
    #westtoplay-arrow-l {
        top: 60px;
        left: -25px;
    }    

    #easttoplay-arrow-l {
        top: 60px; 
        right: -25px;
    }    
 
}

/* same layout as table portrait mode but content scaled down */
@media only screen and (max-width: 767px) and (min-height: 500px) {
    #play-grid, #play-grid-with-commentary {
		grid-template-rows: 30px 220px 150px 30px  30px auto;
    }
    /* scale all blocks between the header and footer */
    #play-top-left-block, #play-north-block,  #play-area {
        transform: scale(.7);
        transform-origin: top;
    }
    
    #play-auction {
        transform: scale(.75);
        transform-origin: top right;
    }
    
    #play-south-block {
        transform: scale(.7);
        transform-origin: bottom;
    }
    
    #play-west-block, #play-east-block {
        transform: scale(.7);
        transform-origin: top;
        margin-top: -120px;
    }
    
}
    		
/* ============================================ computer and landscape mode tablets ===================================	*/
@media only screen and (min-width: 992px) and (min-height: 500px) {
	@supports (grid-area: auto)	 {
		#play-grid {
            margin: auto;
            display: grid;
            justify-items: center;
            grid-template-rows: 30px  130px  312px 110px 32px; 
		    grid-template-columns: 30% 40% 30%;
            grid-template-areas:
			 "header header header"
			 "topleft north auction"
			 "west playarea east"
			 "south south south"
			 "footer footer footer";
		}

        #play-grid-with-commentary {
            margin: auto;
            display: grid;
            justify-items: center;
            grid-template-rows: 30px  130px  312px 110px 32px;
            grid-template-columns: 24% 24% 24% 28%;
            grid-template-areas:
			 "header header header header"
			 "topleft north auction commentary"
			 "west playarea east commentary"
			 "south south south commentary"
			 "footer footer footer footer";
		}
      
	}
    
    #top-bar-handno {
         padding: 0 10px 0 10px;
    }    
    #play-auction {
        margin-right: 2px;
    } 
 
	#play-west-block-large {
       margin-left: 160px;
    }
    
    #play-east-block-large {
       margin-left: 60px;
    }
    
    #play-top-left-block {
       justify-self: center;
    }
    
    #play-grid-with-commentary #play-top-left-block {
        justify-self: start;
        margin-left: 10px;
    }
    #play-grid-with-commentary #play-commentary-block {
           display: block;
           height: 100%;
    }
    
    #play-grid-with-commentary  #commentary-card {
        /* made fixed width to solve wierd issue with play-grid-with-commentary taking space from the sidebars when the commentary card took the available width */
        width: 270px;
    }
    
	#play-grid-with-commentary #play-west-block-large {
       margin-left: 60px;
    }
    
    #play-grid-with-commentary #play-east-block-large {
       margin-left: 100px;
    }
    
     #play-grid-with-commentary #play-auction {
        transform: scale(.9);
        transform-origin: top right;
    }

	#play-grid #play-commentary-block {
         display:none;
	}	
    
    #commentary-body {
        padding: 6px 6px 6px 6px;
    }

    #play-grid-with-commentary .pcard {
        transform: scale(.9)
    }
    
    #play-grid-with-commentary .card-spacer {
        margin-left: -47px;
    }

    
    #play-grid-with-commentary .card-suit-spacer {
        margin-right: 30px;
    }
    
    #play-grid-with-commentary .card-v-spacer {
        margin-top: -83px;
    }

    #play-grid-with-commentary .card-v-suit-spacer {
        margin-left: 0px;
    }    
    
    #play-grid-with-commentary .dummy-suit-spacer {
        margin-right: 80px;
    }
    
   

}
    
/* ============================  FALL BACK FOR DEVICES THAT DON'T SUPPORT GRID -=================== 
note we are only doing fall back for tablets and larger, not phones  */
@supports not (grid-area: auto)	 {
    
   #bar-item-tricks-label, #bar-item-tricks-won, #show-auction-dd-container,  #settingsbutton {
      display: none !important;
   }

    #play-top-left-block {
        float: left;
    }
    
    #play-north-block {
        float: left;
        margin-left: 130px;
        margin-right: 120px;
        height: 130px;
    }
    
    #play-auction {
        /* doesn't need or work WITH float! */
    }
    
    #play-west-block {
        clear: left;
        float: left;
        margin-top: 30px;
    }
    
   #play-area {
        float: left;
        margin-left: 130px;
        margin-right: 140px;
        margin-top: 140px;
        margin-bottom: 5px;
   }
    
    #play-east-block {
        /* doesn't need or work WITH float! */
        margin-top: 30px;
    }    
    #play-south-block {
        clear: left;
        margin-left: 130px;
        margin-right: 130px;
    }
    
    
    #play-grid-with-commentary #play-west-block {
        margin-top: 0;
    }
    
    #play-grid-with-commentary #play-east-block {
        margin-top: 0;
    }

    #play-grid-with-commentary  #play-area {
        margin-top: 55px;
        margin-left: 243px;
        margin-bottom: 0;
        height: 170px;
    }
    
    #play-grid-with-commentary #play-commentary-block {
           height: 150px;
           overflow: auto;
     }    
    
    .card-ew-suit-spacer {
        margin-top: -85px;
    }

}