:root {

    --color-background: #181818;
    --color-surface: #1B1B1B;

    --color-primary: #F68B1F;       /* laranja */
    --color-primary-light: #FFB55A;

    --color-text: #F5F5F5;
    --color-text-secondary: #A0A0A0;
	
	--color-dialog-background: #FAFAFA;

	--color-dialog-text: #202020;
	--color-dialog-text-secondary: #707070;

	--color-dialog-title: #F68B1F;

    --color-border: #2D2D2D;
	
	--color-primary-hover: #E57A0A;
	
	--cell-highlight-color: var(--color-primary);

    --radius: 12px;
	--max-width: 600px;
	--spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;

    --shadow:
        0 2px 8px rgba(0,0,0,.08);
	
	--value-color: #F68B1F;         /* números preenchidos */
    --value-color-locked: #111111;
    --value-color-wrong: #D84343;
    --value-color-highlight-bg: #F68B1F;
	
	--value-size: clamp(10px, 7.5vw, 40px);
	--value-size-animation: clamp(15px, 10vw, 40px);
	
	--notes-color: #AAAAAA; 			/*cor padrão da anotação*/
	--notes-color-highlight: #000000;	/*cor da anotação quando em destaque*/
	--annotation-size: clamp(6px, 1.9vw, 14px);
	
	--cage-size: clamp(6px, 1.8vw, 11px);
	
	--counter-size: 8px;
	--divider:#555;
	
	/*Backgrounds para células*/
	/* REMOVIDO. AGORA FICA NO CONFIG
	--bg-white: #FFFFFF;
	--bg-blue: #D6EAF8;
	--bg-green: #D5F5E3;
	--bg-yellow: #FFF9C4;
	--bg-red: #FADBD8;
	--bg-purple: #E8DAEF;
	--bg-orange: #FFD8A8;
	*/
	/*Backgrounds não usados no jogo, mas pode ser útil pra pixel art*/
	/*
	--bg-black: #333333;
	--bg-gray: #AAAAAA;
	*/
	
	--danger: #FF7272;
	
	
	

}


* {
    box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

#grid,
#grid * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
	
}

html {
    height: 100%;
	-webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
	display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
	
	height: 100svh;
    overflow: hidden;
	
}

header {
    text-align: center;
	gap: 0px;
}

header h1 {
	font-size: clamp(20px, 5vw, 28px);
    margin-top: var(--spacing-l);
    margin-bottom: 0px;
	user-select: none;
}
#jonakashima{
	font-size: clamp(8px, 2vw, 12px);
	color: var(--color-text-secondary);
	margin-bottom: var(--spacing-s);
}

#btnPauseGame {
    position: fixed;

    top: 10px;
    right: 10px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #222;
    color: var(--color-primary);

    font-size: 18px;

    box-shadow:
        0 4px 14px rgba(0,0,0,.18);

    cursor: pointer;

    transition:
        transform .15s,
        box-shadow .2s,
        background .2s;

    z-index: 500;
}

#btnPauseGame:hover {
    transform: scale(1.06);
    background: rgba(246,139,31,.28);
}

#btnPauseGame:active {
    transform: scale(.95);
}



main {
	display: flex;
    flex-direction: column;
    flex: 1;
	
    min-height: 0;
    max-width: var(--max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    /*gap: var(--spacing-m);*/
	padding: 0 var(--spacing-s);
		
}

#grid {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	aspect-ratio: 1; 
	gap: 0px;
	border: 3px solid black;
	
	width: min(98vw, 600px);
	align-self: center;
	touch-action: none;
	
	flex-shrink: 0;
}


.cell {
	display: grid;			/*grid para sobrepor os divs internos na mesma posição*/
	aspect-ratio: 1; 		/*quadrado*/
	position: relative;
	
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}

/* borda direita dos blocos */
.cell:nth-child(3n):not(:nth-child(9n)) {
    border-right: 3px solid black;
}

/* borda inferior dos blocos */
.cell:nth-child(n + 19):nth-child(-n + 27),
.cell:nth-child(n + 46):nth-child(-n + 54) {
    border-bottom: 3px solid black;
}

.cell-highlight,
.cell-cage-sum,
.cell-cage,
.cell-notes-container,
.cell-value {
	grid-area: 1 / 1;			/*se sobrepoem */
}



/*
================================================
VALOR DE CÉLULA
================================================
*/

.cell-value {
	display: flex;
	align-items: center;		/*centraliza na vertical*/
	justify-content: center;	/*centraliza na horizontal*/
	
	font-size: var(--value-size);
	color: var(--value-color);
	user-select: none;
	
	
}


.cell-value-locked {
	color: var(--value-color-locked);	
}

.cell-value-wrong {
	color: 	var(--value-color-wrong);
}

.cell-value-hightlight {
	font-weight: 600;
	
}

.cell-highlight{
	visibility: hidden;
	background: var(--cell-highlight-color);
    opacity:.30;
	z-index:10;
}




/*
================================================
ANNOTATIONS 
================================================
*/

.cell-notes-container{
		
	display: grid;
	grid-template-columns: auto auto auto;
	margin: var(--spacing-s);
	
	
	
	color: var(--notes-color);
	font-size: var(--annotation-size);
	font-weight: 500;
	/*
	background:red;
	opacity:0.2;*/
}

.cell-notes{
	display: flex;
	width: 100%;
	align-items: center;		/*centraliza na vertical*/
	justify-content: center;	/*centraliza na horizontal*/
	
	visibility: hidden;
	user-select: none;
	transform: scale(1.20);
	transition: transform .12s;
	
	min-width: 0;
    min-height: 0;
    line-height: 1;
}

.cell-notes-highlight{
	font-weight: 700;
	color: var(--notes-color-highlight);
	background: var(--value-color-highlight-bg);  /*se quiser destacar notes com cor */
	/*border: 1px solid var(--value-color-highlight-bg);*/
	transform: scale(1.40);
	z-index:10;
	
}




/*
================================================
CAGES 
================================================
*/
.cell-cage{
	margin: var(--spacing-xxs);
	border: 1px dashed black;
	visibility: hidden;
}

.cell-cage-sum{
	font-size: var(--cage-size);
	
	font-weight: 700;
	visibility: hidden;
	
	color: var(--color-text);
	background: var(--color-primary);
	border: 1px solid black;
	
	position: absolute;
    top: 1px;
    left: 1px;

    padding: 0 1px;
    width: fit-content;
    height: fit-content;
	border-radius: 2px;
    line-height: 1;
    z-index: 50;
	user-select: none;
}

.cell-cage-merge-top {
	margin-top: 0px;
	border-top: 0px;
}
.cell-cage-merge-bottom {
	margin-bottom: 0px;
	border-bottom: 0px;
}
.cell-cage-merge-left {
	margin-left: 0px;
	border-left: 0px;
}
.cell-cage-merge-right {
	margin-right: 0px;
	border-right: 0px;
}

/*
================================================
BOTÕES 
================================================
*/
#numberButtons {
	display:grid;
    grid-template-columns:repeat(9,1fr);
    gap:4px;
	user-select: none;	
	margin-top: var(--spacing-s);
	margin-bottom: var(--spacing-m);
}

#controlButtons {
	/*width: 100px;*/
	display: grid;
	grid-template-columns:repeat(8,1fr);
    gap:4px;
	user-select: none;	
	text-align: center;
	color: var(--color-text-secondary);
	font-size: 10px;
	
}



#controlButtons button,
.number-button {
    position: relative;

    border: 0;
    border-radius: 14px;

    background:#222;

    /*font-size: var(--value-size);*/
	font-size: clamp(14px, 8vw, 24px);
    font-weight: 600;

    color:white;

	/**/
    aspect-ratio: 1;

    transition:
        background .15s,
        color .15s,
        transform .12s,
        opacity .2s;
}
#controlButtons div{
	font-size: clamp(3px, 2vw, 10px);
}

.number-button:hover {
    background: rgba(246,139,31,.28);
}

#controlButtons button.selected,
.number-button.selected {
    background:var(--color-primary);
    color:white;
    transform: scale(1.03);
}


.number-button.notes {
	font-weight: 200;
}

/*
.number-button::after {
    content: "×2";

    position: absolute;

    right: 6px;
    bottom: 4px;

    font-size: 10px;
    opacity: .7;
}
*/

.number-counter {
    position: absolute;

    right: 5px;
    bottom: 2px;

    font-size: var(--counter-size);
    color: gray;

    pointer-events: none;
}

#controlButtons button.disabled,
.number-button.disabled {
    color: #b8b8b8;
    opacity: .45;
    pointer-events: none;
}


.counter {
	text-align: center;
	font-size: var(--counter-size);
	color: var(--color-text-secondary);
}


/* ================================================
   COLOR MODE BUTTON
   ================================================ */

#btnColorMode {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    align-items: center;
    justify-items: center;

    padding: 0;
    overflow: hidden;

    cursor: pointer;
}

#btnColorMode > span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;
    pointer-events: none;
}

#btnColorMode .color-prev,
#btnColorMode .color-next {
    font-size: clamp(18px, 7vw, 24px);
    font-weight: 400;
    opacity: .8;
}

#btnColorMode .color-current {
    width: 90%;
    height: 40%;
    /*aspect-ratio: 1;*/
    border-radius: 50%;

    background: #555;

    transition:
        background .15s,
        transform .12s;
}

#btnColorMode.selected .color-current {
    transform: scale(1.15);
}


/*
================================================
PAUSE DIALOG 
================================================
*/

#pauseDialog {
    width: min(500px, 92vw);
    height: min(720px, 90svh);
    border: none;
    border-radius: 26px;
    padding: 30px;
    background: var(--color-dialog-background);

    box-shadow:
        0 20px 80px rgba(0,0,0,.35);
}

#pauseDialog.hidden{
	display: none;
}

#pauseDialog[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pauseDialog::backdrop {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(5px);
}

#pauseMsg {
    font-size: 34px;
    font-weight: 700;

    color: var(--color-dialog-title);

    margin-bottom: 20px;

    user-select: none;
}

#pauseImg {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    font-size: clamp(160px, 38vw, 320px);

    user-select: none;

    line-height: 1;
	animation: duckFloat 2.5s ease-in-out infinite;
}

@keyframes duckFloat {

    0%,100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(3deg);
    }
}

#btnResumeGame {
    width: 100%;

    border: none;
    border-radius: 14px;

    padding: 14px;

    background: var(--color-primary);
    color: white;

    font-size: 25px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .15s,
        transform .12s;
}

#btnResumeGame:hover {
    background: var(--color-primary-hover);
}

#btnResumeGame:active {
    transform: scale(.98);
}

#pauseImg{
    font-size: clamp(120px,28vw,220px);
}

#pauseDialogTime{
    font-size: clamp(25px,9vw,50px);
    font-weight:700;
    color: var(--color-dialog-title);
    margin-bottom:28px;
    font-variant-numeric: tabular-nums;
}

/*
================================================
STATISTICS DIALOG
================================================
*/

#statisticsDialog * {
    min-width: 0;
}

#statisticsDialog{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);
    backdrop-filter: blur(3px);

    opacity:0;
    pointer-events:none;

    transition:opacity .18s;
	
    overflow-y: auto;
	

    z-index:5000;
}

#statisticsDialog.show{
    opacity:1;
    pointer-events:auto;
}

.statistics-card{

    width:min(560px,95vw);

    background: var(--color-dialog-background);

    border-radius:18px;

    padding:22px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);

    display:flex;
    flex-direction:column;
    gap:18px;
}

#statisticsTable{

    width:100%;

    border-collapse:collapse;

    font-size:clamp(10px,3vw,14px);
}

#statisticsTable th{

    padding:10px;

    color: var(--color-dialog-title);

    font-weight:700;

    border-bottom:2px solid var(--color-border);
}

#statisticsTable td{

    padding:10px;

    text-align:center;

    border-bottom:1px solid #eeeeee;
}

#statisticsTable td:first-child{

    text-align:left;

    font-weight:600;

    color: var(--color-dialog-text-secondary);

    white-space:nowrap;
}

#statisticsTable tbody tr:hover{

    background:#f8f8f8;
}

.statisticsFooter{

    display:flex;
    justify-content:flex-end;
}

.statisticsFooter .dialogButton{

    width:140px;
}

/* ==========================================
   CONFIRM DIALOG
========================================== */

#confirmDialog {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);

    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;

    z-index: 5000;
}

#confirmDialog.show {
    opacity: 1;
    pointer-events: auto;
}

#confirmDialog > div {
    width: min(360px, 90vw);

    background: var(--color-dialog-background);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);
}

#confirmDialogMsg {
    padding: 28px 24px;

    text-align: center;

    font-size: 18px;
    line-height: 1.5;

    color: var(--color-dialog-text);
}

#confirmDialogButtons {
    display: flex;

    border-top: 1px solid var(--color-border);
}

.dialogButton {
    flex: 1;

    padding: 18px;

    text-align: center;

    cursor: pointer;
    user-select: none;

    font-weight: 600;

    transition: background .15s;
}

.dialogButton:hover {
    background: rgba(246,139,31,.12);
}

.dialogButton:active {
    background: rgba(246,139,31,.22);
}

.dialogButton + .dialogButton {
    border-left: 1px solid var(--color-border);
}

#confirmDialogCancel {
    color: var(--color-dialog-text-secondary);
}

#confirmDialogConfirm {
    color: var(--color-dialog-title);
}
/* ==========================================
   NEW GAME DIALOG
========================================== */

#newGameDialog {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);

    opacity: 0;
    pointer-events: none;

    transition: opacity .18s;

    z-index: 5000;
}

#newGameDialog.show {
    opacity: 1;
    pointer-events: auto;
}

.newGame-card {
    width: min(380px, 90vw);

    background: var(--color-dialog-background);
    border-radius: 18px;

    padding: 22px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

#newGameButtons {
    display: grid;
    gap: 10px;
}

.copyDialogButton,
.newGameDialogButton {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 52px;

    border-radius: 12px;

    background: var(--color-primary);
    color: white;

    font-size: 18px;
    font-weight: 600;

    cursor: pointer;
    user-select: none;

    transition:
        background .15s,
        transform .12s;
}

.copyDialogButton:hover,
.newGameDialogButton:hover {
    background: var(--color-primary-hover);
}

.copyDialogButton:active,
.newGameDialogButton:active {
    transform: scale(.98);
}

#newGameCustom {
    /*display: flex;
    gap: 10px;*/
	display: grid;
	grid-template-columns: auto 120px;

    margin-top: 6px;
}

#newGameCustom.hidden {
	display: none;
}


#txtCustomGame {
    flex: 1;

    height: 52px;
	width: 95%;
    border: 1px solid var(--color-border);
    border-radius: 12px;


    font-size: 18px;
    text-align: center;

    outline: none;
}

#txtCustomGame:focus {
    border-color: var(--color-primary);
}

#lblCustomGameCharCount {
	color: var(--color-dialog-text-secondary);
	font-size: 11px;
	margin: var(--spacing-xs);
	text-align: center;
	user-select: none;
}
#lblCustomGameCharCount.warning {
	color: red;
	
}

#btnNewGameCustom {
    min-width: 110px;
}
.dialogTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dialog-title);

    margin-bottom: 6px;
}

/* ---- Seletor entre classic e killer no new game ----*/
.selector{
    display:flex;
    background:#ececec;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:12px;
}

.selector input{
    display:none;
}

.selector label{
    flex:1;
    padding:10px;
    text-align:center;
    cursor:pointer;
    font-weight:600;
    color:var(--color-dialog-text-secondary);
    transition:.15s;
}

.selector input:checked + label{
    background:var(--color-primary);
    color:white;
}

/*
================================================
VICTORY DIALOG
================================================
*/
#copyDialog,
#victoryDialog{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);

    opacity:0;
    pointer-events:none;

    transition:opacity .18s;

    z-index:5000;
}
#copyDialog.show,
#victoryDialog.show{

    opacity:1;
    pointer-events:auto;
}

.copy-card,
.victory-card{

    width:min(380px,90vw);

    background: var(--color-dialog-background);

    border-radius:20px;

    padding:26px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);

    display:flex;
    flex-direction:column;
    gap:18px;
}

#victoryTitle{

    text-align:center;

    font-size:28px;
    font-weight:700;

    color: var(--color-dialog-title);
}

#victoryTime{

    text-align:center;

    font-size:54px;
    font-weight:700;

    color: var(--color-dialog-text);

    font-variant-numeric:tabular-nums;
}

#victoryBestTime{

    text-align:center;

    font-size:18px;
    font-weight:700;

    color:#F9A825;
}

#victoryStatistics{

    border-top:1px solid var(--color-border);

    padding-top:16px;

    display:flex;
    flex-direction:column;
    gap:10px;
}
#victoryStatistics.hidden{
	display: none;
}

#victoryDifficulty{

    text-align:center;

    font-size:20px;
    font-weight:700;

    color: var(--color-dialog-title);

    margin-bottom:4px;
}

.victoryStatRow{

    display:flex;
    justify-content:space-between;

    font-size:16px;
}

.victoryStatRow span:first-child{

    color: var(--color-dialog-text-secondary);
}

.victoryStatRow span:last-child{
	color: var(--color-dialog-text);
    font-weight:600;
}

#btnVictoryNewGame{

    margin-top:6px;
}

#btnCancelLoading.hidden,
#btnNewGameMainScreen.hidden{
	display: none;
}


/*
================================================
Message 
================================================
*/
#message{
    position:fixed;
    top:32px;
    left:50%;
    transform:translate(-50%,-20px);
    padding:10px 18px;
    border-radius:999px;
    background:var(--color-primary);
    color:white;
    font-weight:bold;
    opacity:0;
    pointer-events:none;
    transition:.25s;
	z-index: 200;
	
	text-align:center;
}

#message.show{
    opacity:1;
    transform:translate(-50%,0);
}

/*
================================================
ANIMAÇÃO POP DA CÉLULA
================================================
*/
@keyframes complete-pop {	
	0%   { transform: scale(1); border: 1px solid black; z-index: 30; }
	40%  { transform: scale(1.10); border: 1px solid black; z-index: 50; font-weight: 600; background: var(--color-primary); }
	100% { transform: scale(1); border: 1px solid black; z-index: 30; }
	
		
	/*Rodar
	0% {
		transform: scale(1) rotate(0deg);
		border: 1px solid black;
	}

	50% {
		transform: scale(1.18) rotate(180deg);
		border: 1px solid black;
	}

	100% {
		transform: scale(1) rotate(360deg);
		border: 1px solid black;
	}*/
	
}

@keyframes victory-pop {
	0%   { transform: scale(1); border: 1px solid black; z-index: 20;}
	40%  { transform: scale(1.22);border: 1px solid black; z-index: 50; font-weight: 600; background: var(--color-primary);}
	65%  { transform: scale(0.9); border: 1px solid black; z-index: 20;}
	85%  { transform: scale(1.10); border: 1px solid black; z-index: 30; font-weight: 600; background: var(--color-primary);}
	100% { transform: scale(1); border: 1px solid black; z-index: 20;}
}



/*
================================================
MENU 
================================================
*/

.menu-container {
    position: fixed;

    top: var(--spacing-xs);
    left: var(--spacing-xs);
	z-index: 1000;
}


.icon-button {
    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: transparent;
    color: var(--color-primary);

    font-size: 26px;
    cursor: pointer;
}

.icon-button:active {
    background: rgba(255,255,255,.15);
}

.popup-menu {
    position: absolute;

    top: 46px;
    left: var(--spacing-s);

    min-width: 190px;

    background: #2a2a2a;
    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(0,0,0,.35);

    overflow: hidden;

    z-index: 1000;
}

.popup-item {
    display: block;

    width: 100%;

    padding: 14px 18px;

    border: none;
    background: none;

    color: white;
    text-align: left;

    font-size: 16px;
}

.popup-item:active {
    background: rgba(255,255,255,.10);
}

.popup-item.danger {
    color: var(--danger);
}

.hidden {
    display: none;
}


/*
================================================
PAINEL KILLER SUDOKALC
================================================
*/

#combinations-panel,
#killer-sudokalc-panel {
	/*position: absolute;
    left: 0;
    right: 0;
	
	bottom: 0;
	border-top: 1px solid #444;
	background: #111;
	*/

	width: 100%;
    height: 220px;       /*ajuste à vontade */
  
    overflow: hidden;
	
}

#combinations-panel.hidden,
#killer-sudokalc-panel.hidden {
	display:none;
}

#combinator-frame,
#killer-sudokalc-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

#panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:280px;
    background: black; /*var(--background);*/
    border-radius:20px 20px 0 0;
    transform:translateY(calc(100% - 28px));
    transition:.25s;
    border-top:1px solid var(--divider);
    box-shadow:0 -8px 30px rgba(0,0,0,.5);
	z-index: 200;
	
	padding-left: var(--spacing-m);
	padding-right: var(--spacing-m);
	text-align:center;
}


#panel.open{
    transform:translateY(0);
}

#panelHandle{
    width:80px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0px auto;
    cursor:pointer;
}
#panelHandle::before{
    content:"";
    width:54px;
    height:6px;
    border-radius:999px;
	
    background:linear-gradient(
        to bottom,
        #999,
        #666
    );
	border:1px solid var(--divider);
    box-shadow:0 -8px 30px rgba(0,0,0,.5);
}

#panel.hidden{
	display: none;
}
#toolSelector{
	display:flex;
    align-items:center;
    justify-content:center;
	
	font-size: 14px;
	max-width: var(--max-width);
	margin:var(--spacing-s) auto;
}
#toolSelector label{
    flex:1;
    padding:var(--spacing-xs);
    text-align:center;
    cursor:pointer;
    font-weight:600;
    color:var(--color-primary);
	background:var(--color-background);
    transition:.15s;
}

#toolSelector input:checked + label{
    background:var(--color-primary);
    color:white;
}



/*
#panel-top {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-right: var(--spacing-m);
	padding-left: var(--spacing-m);
	padding-bottom: var(--spacing-xs);
	padding-top: var(--spacing-s);
}

#panel-top .left{
	display: flex; 
	flex-direction: row;
	gap: var(--spacing-l);
}*/


/*
================================================
GERAL 
================================================
*/

.visible{
	visibility: visible;
}

/* REMOVIDO. AGORA FICA NO CONFIG
.bg-white {
	background: var(--bg-white);
}

.bg-blue {
	background: var(--bg-blue);
}

.bg-green {
	background: var(--bg-green);
}

.bg-yellow {
	background: var(--bg-yellow);
}

.bg-red {
	background: var(--bg-red);	
}

.bg-purple{
	background: var(--bg-purple);
}

.bg-orange{
	background: var(--bg-orange);
}
.bg-black{
	background: var(--bg-black);
}
.bg-gray{
	background: var(--bg-gray);
}
*/

.copy-card,
.statistics-card,
.newGame-card,
.victory-card,
#pauseDialog {
    color: var(--color-dialog-text);
}

#copyObs {
	font-size: 12px;
	color: var(--color-dialog-text-secondary);
	text-align:center;
}


footer {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-right: var(--spacing-m);
	padding-left: var(--spacing-m);
	padding-bottom: var(--spacing-xs);
	
	max-width: var(--max-width);
    width: 100%;
	margin-left: auto;
    margin-right: auto;
}

footer .left{
	display: flex; 
	flex-direction: row;
	gap: var(--spacing-l);
	
}


#status {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	
	max-width: var(--max-width);
	margin-bottom: var(--spacing-xs);
}

#timer{
	text-align: right;
	grid-area: 1/3;
}

#stepCountDisplay {
	text-align: center;
	grid-area: 1/2;
}

#difficultyLevelDisplay,
#timer,
#stepCountDisplay,
#version {
	display: inline-block;
    color: var(--color-primary);
    font-size:10px;
	user-select: none;
}

#version {
	text-align: right;
	grid-area: 1/3;
}



/* DEBUG */
/*
#grid { background: pink; }
.cell-value { background: orange;}
.cell-notes { background: dodgerblue; }
.cell-notes-container { background: red; opacity: 0.4;}
main { background: yellow; }
body {background: orange;}
#timer {background: orange;}
#stepCountDisplay { background: yellow; }
*/