/*body {color: black; background-color: #ffffff; margin: 0px}*/

.score
{
	width: 100%;
}
.done	{color: black; background-color:#8ffe8f;}
.wrongdone	{color: black; background-color:red;}
.todo	{color: white; background-color:green; font-weight: normal; text-decoration: blink;}
.future	{color: gray; font-weight: normal; }

.prompt {margin: 1ex 1ex 1ex 1ex}

.board	{color: #308040; background-color: #101020; font-family: monospace;
	font-size: large; letter-spacing: 1ex; width: 28ex;
	margin: 1ex 1ex 1ex 1ex; padding: 1ex 1ex 1ex 1ex;}
.row1	{padding: 0 0 0 0;}
.row2	{padding: 0 0 0 0.3ex;}
.row3	{padding: 0 0 0 0.9ex;}
/*.pressed {color: red; text-decoration: line-through}*/
.pressed
{
	display: block;
	color: #aaa;
	font: bold 9pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 5px;
	background: #ff2d2d;
	-moz-border-radius: 4px;
	/*border-radius: 4px;*/
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;
	
}
.silent	{color: #308040;}
.target	{color: #ffff30;}

.echo {color: gray; margin-top: -30px; margin-bottom: 10px}

.count {color:black; margin: 1ex 1ex 0ex 1ex}
.accuracy {color: black; margin: 0ex 1ex 0ex 1ex}
.speed {color: black; margin: 0ex 1ex 1ex 1ex}

.button	{
	width: 100%;
	height: 50px;
	}

.instructions {padding: 0 0 0 0; font-size: small}
.legal {padding: 3ex 0 0 0; font-size: x-small; font-style:italic}

/*]]>*/
 

/*----------------------------------Table -------------------------------------------------*/
table
{
	margin-bottom: -10px;
	border-collapse: collapse;
	 border: 1px solid #38678f;
  background: white;
  table-layout: fixed;
}

th {
  background: steelblue;
  font-weight: lighter;
  text-shadow: 0 1px 0 #38678f;
  color: white;
  border: 1px;
  /*box-shadow: inset 0px 1px 2px #568ebd;*/
 
}

td{
text-align: center;
 
}
#circle1{
text-align: center;
}
table#special 
{
	 height: 35px;
	 width: 35px;
	 margin-bottom: 4px;
	 margin-top: -40px;
	 margin-left: 125px;
	 table-layout: fixed;
	 border: 0px solid #38678f;
	 background: inherit;
	 border-radius: 10px;
	  
	 color: white;
	 }
#circle
{
    /*font-size: 18px;*/
    color: white;
	background: #059652;
	/*height: 100%;*/
	/*width: 100%;*/
	/*border-radius: 80px;*/
}
#circle2
{
     color: white;
    /*font-size: 18px;*/
	background: #df1529;
	/*height: 100%;*/
	/*width: 100%;*/
	/*border-radius: 80px;*/
}
.final_result
{
	margin-top: 100px;
	
}
.pp
{
	text-align: center;
	font-size: 1em; 
	color:black; 
	width: 801px; 
	border: 1px solid #CCCFD1; 
	margin: 15px auto 0;
	margin-left: 120px;
	border-radius: 10px;
}
/*-----------------------------------Keyboard css-----------------------------------------------*/
.hide-keyboard
{
	text-align: center;
	font-size: 2em; 
	height: 80px; 
	width: 801px; 
	background: #d5d9dc;
	border: 1px solid #CCCFD1; 
	margin: 10px auto 0;
	margin-bottom: -9px;
	border-radius: 10px;
	float: left;
	margin-left: 40px;
	-webkit-box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	-moz-box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
		 
}
#keyboard{
	
	margin: 0px auto 0;
	width: 794px;
	height: 310px; 
	position: absolute;
	/*background:	#d5d9dc  url('keyboard-background.jpg') repeat-x;*/
	/*-moz-border-radius-topleft: 7px 21px;*/
	/*-moz-border-radius-topright: 7px 21px;*/
	/*-moz-border-radius-bottomright: 10px;*/
	/*-moz-border-radius-bottomleft: 10px;*/
	/*border-top-left-radius: 7px 21px;*/
	/*border-top-right-radius: 7px 21px;*/
	/*border-bottom-right-radius: 10px;*/
	/*border-bottom-left-radius: 10px;*/
	/*padding: 0px 0 0 10px;*/
	/*-webkit-box-shadow:  */
	/*	inset 0 0 8px #bbb,*/
	/*	0 1px 0 #aaa,*/
	/*	0 4px 0 #bbb,*/
	/*	0 10px 30px #ddd;*/
	/*-moz-box-shadow:  */
	/*	inset 0 0 8px #bbb,*/
	/*	0 1px 0 #aaa,*/
	/*	0 4px 0 #bbb,*/
	/*	0 10px 30px #ddd;*/
	/*box-shadow:  */
	/*	inset 0 0 8px #bbb,*/
	/*	0 1px 0 #aaa,*/
	/*	0 4px 0 #bbb,*/
	/*	0 10px 30px #ddd;*/
		float: left;
	/*margin-left: 40px;*/
		}

#infoi {
	
	margin: 10px auto 0;
	width: 794px;
	height: 314px;
	position: absolute;
	padding: 50px 0 0 10px;
	float: left;
	/*margin-left: 40px;*/
	opacity: 0.2;
	
		}

 #infoi {
    z-index: 1;
    background-color: transparent;
    padding-bottom: 50px;
  
}


.key{
	display: block;
	color: #aaa;
	font: bold 9pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 5px;
	background: #eff0f2;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;}

.key:active, .keydown {
	color: #888;
	background: #ebeced;
	margin: 7px 5px 3px;
	-webkit-box-shadow:
		inset 0 0 25px #ddd,
		0 0 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	border-top: 1px solid #eee;}
	
.active_key
	{
	display: block;
	color: #888;
	font: bold 9pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 7px 5px 3px;
	background: #43f739;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow:
		inset 0 0 25px #ddd,
		0 0 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	border-top: 1px solid #eee;
	text-shadow: 0px 1px 0px #f5f5f5;
	
	}
	
span
	{
		color: black;
		
	}
.fn span {
	display: block;
	margin: 14px 5px 0 0;
	text-align: right;
	font: bold 6pt arial;
	text-transform: uppercase;}
#esc {
	margin: 6px 15px 0 0;
	font-size: 7.5pt;
	text-transform: lowercase;}


#numbers li a span {
	display: block;}
	
#numbers li a b {
	margin: 3px 0 3px;
	display: block;}

#numbers li .alt b {display: block;margin: 0 0 3px;}

#numbers li #delete span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 7.5pt;
	text-transform: lowercase;}
	
#qwerty li a span {
	display: block;
	margin: 13px 0 0;
	text-transform: uppercase;}
	
#qwerty li #tab span {
	text-align: left;
	margin: 23px 0 0 10px;
	font-size: 7.5pt;
	text-transform: lowercase;}	

#qwerty li .alt b {display: block; margin: 3px 0 0;}
#qwerty li .alt span {margin: 2px 0 0;}


#asdfg li a span {
	display: block;
	margin: 13px 0 0;
	text-transform: uppercase;}

#asdfg li .alt span {margin: 0; text-transform: lowercase;}
#asdfg li .alt b {display: block; margin: 3px 0 0;}
#asdfg li #caps b {
	display: block;
	background: #999;
	width: 4px;
	height: 4px;
	border-radius: 10px;
	margin: 9px 0 0 10px;
	-webkit-box-shadow: inset 0 1px 0 #666;
	-moz-box-shadow:inset 0 1px 0 #666;
	box-shadow:inset 0 1px 0 #666;}
#asdfg li #caps span {
	text-align: left;
	margin: 10px 0 0 10px;
	font-size: 7.5pt;}
#asdfg li #enter span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 7.5pt;}


#zxcvb li a span {
	display: block;
	margin: 13px 0 0;
	text-transform: uppercase;}
#zxcvb li .shiftleft span {
	text-align: left;
	margin: 23px 0 0 10px;
	font-size: 7.5pt;
	text-transform: lowercase;}
#zxcvb li .shiftright span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 7.5pt;
	text-transform: lowercase;
	
	
	}
#zxcvb li .alt b {display: block;margin: 4px 0 0;}
#zxcvb li .alt span {margin: 0;}

	
#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {
	display: block;
	text-align: left;
	margin: 31px 0 0 8px;
	font-size: 7.5pt;
	text-transform: lowercase;}

#bottomrow li #optionright span, #bottomrow li #commandright span {
	display: block;
	text-align: right;
	margin: 31px 8px 0 0;
	font-size: 7.5pt;
	text-transform: lowercase;}

#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {
	display: block;
	margin: 9px 0 0;}

.fn {height: 26px; width: 46px;}
#delete {width: 72px;}
#tab {width: 72px;}
#caps {width: 85px;}
#enter {width: 85px;}
.shiftleft, .shiftright {width: 112px;}
#fn, #control, .option, .command, #code32 {height: 49px;}

#control {width: 56px;}
.option {width: 46px;}
.command {width: 67px;}
#code32 {width: 226px;}
#pattern
{
    font-size: 18px;
}

#left img, #up img, #down img, #right img {border: none;}
ul ol {list-style-type: none;}
#down {height: 23px;}
#up, #left, #right {height: 24px;}
#left, #right {margin: 30px 5px 5px;}
#left:active, #right:active {margin: 32px 5px 3px;}
#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
#up:active {margin: 8px 5px -2px;}
#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
#down:Active {margin: 3px 5px 4px;}

ul, ol {padding: 0px; margin: 0;}
	
/* Micro Clearfix by Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack */
        /* For modern browsers */
        .cf:before, .cf:after {content:""; display:table;}
        .cf:after {clear:both;}

        /* For IE 6/7 (trigger hasLayout) */
        .cf {zoom:1;}
        
        .cf > ul {list-style-type: none; width: 784px; margin: 0 auto;}
		.cf > li {list-style-type: none; float: left;}
		
		


    /* container spacing */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    padding: 25px;
}

/* base card */
.stat-card {
    position: relative;
    border-radius: 16px;
    padding: 18px 20px;

    color: #fff;
    overflow: hidden;

    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);

    box-shadow: 
        0 8px 25px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}

/* glow hover */
.stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 12px 30px rgba(0,0,0,0.35),
        0 0 12px rgba(255,255,255,0.15);
}

/* label */
.stat-card span {
    font-size: 12px;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* value */
.stat-card strong {
    font-size: 26px;
    margin-top: 6px;
    display: block;
    font-weight: 700;
}

/* subtle shine effect */
.stat-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transform: skewX(-20deg);
}

/* ================= COLORS ================= */

/* pattern */
.pattern {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* typed */
.typed {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* mistakes */
.mistake {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* speed */
.speed {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* progress */
.progress-card {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* status */
.status {
    background: linear-gradient(135deg, #111827, #000000);
    text-align: center;
}

/* ================= PROGRESS BAR ================= */

.progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    margin-top: 12px;
    overflow: hidden;
}

#accuracyBar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 6px;
    transition: width 1s ease;
}

/* ================= SECTION TITLES (NEW) ================= */

.section-title {
    grid-column: 1/-1;
    font-weight: 600;
    font-size: 14px;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: -5px;
}

#pattern span{
    display:inline-block;
    padding:5px;
    margin:2px;
    border-radius:4px;
}
.done{background:#d1fae5;}
.todo{background:#2563eb;color:#fff;}
.future{color:#aaa;}

.keybox {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;
    margin: 4px;
    padding: 0 8px;

    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;

    font-weight: 600;
    font-size: 20px;
    color: #111827;

    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    user-select: none;
}

/* hover effect */
.keybox:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.12);
}

/* active press effect */
.keybox:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* typed correct */
.keybox.done {
    background: #22c55e;
    color: #ffffff;
    border-color: #16a34a;
}

/* current key */
.keybox.todo {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* upcoming */
.keybox.future {
    background: #f3f4f6;
    color: #6b7280;
}

/* optional: incorrect key */
.keybox.error {
    background: #ef4444;
    color: #ffffff;
    border-color: #dc2626;
}
.wrong_key{
    background:#ef4444 !important;
    color:#fff;
}

.press_down{
    transform:translateY(2px);
    box-shadow:0 1px 0 #999 !important;
}
.key{
    transition:all 0.1s ease;
}