/*==================================================
KRAKKEMAT LIVENOTATIE
Standalone mobiele versie
==================================================*/

*{
box-sizing:border-box;
}

html,
body{
margin:0;
padding:0;
width:100%;
min-height:100%;
}

html{
background:#d8dceb;
}

body{
font-family:"Jura",Arial,sans-serif;
background:#d8dceb;
color:#3f455f;
-webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:transparent;
}


/*==================================================
APP
==================================================*/

.km-live-app{
width:100%;
min-height:100vh;
min-height:100dvh;
display:flex;
justify-content:center;
}

.km-live-registration{
width:100%;
max-width:520px;
min-height:100vh;
min-height:100dvh;
padding:
max(18px,env(safe-area-inset-top))
18px
max(22px,env(safe-area-inset-bottom));
}


/*==================================================
STARTSCHERM
==================================================*/

.km-live-start{
width:100%;
}

.km-live-welcome-card,
.km-live-card{
width:100%;
background:#fff;
border-radius:20px;
padding:24px 20px;
box-shadow:0 7px 22px rgba(63,69,95,.12);
}

.km-live-welcome-card{
text-align:center;
}

.km-live-welcome-icon{
display:block;
width:88px;
height:88px;
object-fit:contain;
margin:0 auto 16px;
}

.km-live-welcome-card h1,
.km-live-card h2{
margin:0 0 18px;
font-size:25px;
font-weight:700;
color:#3f455f;
}

.km-live-welcome-card p{
margin:14px 0;
font-size:15px;
line-height:1.55;
}

.km-live-battery-tip{
font-size:14px !important;
opacity:.82;
}


/*==================================================
WELKOMST EIGENSCHAPPEN
==================================================*/

.km-live-welcome-grid{
display:grid;
grid-template-columns:1fr;
gap:9px;
margin:22px 0;
}

.km-live-welcome-grid > div{
padding:11px 12px;
background:#eef0f7;
border-radius:10px;
font-size:14px;
font-weight:600;
}


/*==================================================
KAART
==================================================*/

.km-live-card{
margin-top:0;
}

.km-live-card h2{
text-align:center;
}




/*==================================================
KEUZE GEBRUIK
==================================================*/

.km-live-mode-card h2{
margin-bottom:20px;
}

.km-live-mode-option{
display:block;
width:100%;
margin:0 0 14px;
padding:18px 16px;
border:1px solid #b8bed1;
border-radius:14px;
background:#eef0f7;
color:#3f455f;
font-family:inherit;
text-align:left;
cursor:pointer;
touch-action:manipulation;
}

.km-live-mode-option:last-child{
margin-bottom:0;
}

.km-live-mode-option strong{
display:block;
margin-bottom:7px;
font-size:17px;
font-weight:700;
}

.km-live-mode-option span{
display:block;
font-size:14px;
line-height:1.45;
font-weight:500;
}

.km-live-mode-option:active{
transform:scale(.99);
}



.km-live-mode-settings{
margin-top:20px;
padding-top:18px;
border-top:1px solid #d6d9e5;
}

.km-live-mode-settings .km-live-toggle:last-child{
margin-bottom:0;
}


/*==================================================
VELDEN
==================================================*/

.km-field{
margin-bottom:20px;
}

.km-field > label{
display:block;
margin-bottom:7px;
font-size:14px;
font-weight:700;
}

.km-field select{
display:block;
width:100%;
height:50px;
padding:0 44px 0 14px;
border:1px solid #b8bed1;
border-radius:12px;
background-color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b526f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
background-size:16px 16px;
color:#3f455f;
font-family:inherit;
font-size:16px;
outline:none;
appearance:none;
-webkit-appearance:none;
}

.km-field select:focus{
border-color:#4b526f;
box-shadow:0 0 0 3px rgba(75,82,111,.12);
}


/*==================================================
RONDES
==================================================*/

.km-live-round-buttons{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
}

.km-live-round-btn{
height:42px;
border:1px solid #b8bed1;
border-radius:9px;
background:#eef0f7;
color:#3f455f;
font-family:inherit;
font-size:15px;
font-weight:700;
cursor:pointer;
touch-action:manipulation;
}

.km-live-round-btn.km-selected{
background:#4b526f;
border-color:#4b526f;
color:#fff;
}

/*==================================================
VRIJ SPEL / GEEN RONDE
==================================================*/

.km-live-freeplay-field{
margin-top:-6px;
margin-bottom:22px;
}

.km-live-freeplay-field .km-live-toggle{
margin:0;
padding:12px 14px;
gap:16px;

border:1px solid #b8bed1;
border-radius:11px;

background:#eef0f7;
}

.km-live-freeplay-field .km-live-toggle span{
font-size:14px;
font-weight:700;
 margin-left:10px !important;
}
.km-live-freeplay-field input[type="checkbox"]{
  transform: translateY(3px);
}

/* rondeknoppen uitgeschakeld */

.km-live-round-btn:disabled{
opacity:.38;
cursor:default;
}


/*==================================================
OPTIES
==================================================*/

.km-live-options{
margin:24px 0;
padding:5px 0;
}

.km-live-toggle{
display:flex;
align-items:center;
gap:11px;
padding:11px 0;
font-size:15px;
font-weight:600;
cursor:pointer;
}

.km-live-toggle input{
width:20px;
height:20px;
margin:0;
accent-color:#4b526f;
}


/*==================================================
HOOFDKNOP
==================================================*/

.km-live-main-btn{
display:block;
width:100%;
min-height:52px;
margin-top:18px;
padding:13px 18px;
border:0;
border-radius:13px;
background:#4b526f;
color:#fff;
font-family:inherit;
font-size:16px;
font-weight:700;
cursor:pointer;
touch-action:manipulation;
}

.km-live-main-btn:active{
transform:scale(.985);
}

.km-live-main-btn:disabled{
opacity:.42;
cursor:default;
transform:none;
}


/*==================================================
MELDINGEN
==================================================*/

.km-live-message{
min-height:22px;
margin-top:14px;
text-align:center;
font-size:14px;
font-weight:600;
line-height:1.4;
}


/*==================================================
LIVE SCHERM
==================================================*/

.km-live-board-screen{
width:100%;
}


/*==================================================
SPELERS BOVEN / ONDER HET BORD
==================================================*/

.km-live-player{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
min-height:44px;
padding:8px 12px;
border:2px solid transparent;
border-radius:11px;
background:#eef0f7;
font-size:16px;
font-weight:700;
transition:
border-color .15s ease,
background .15s ease;
}

.km-live-player-top{
margin:0 0 16px;
}

.km-live-player-bottom{
margin:16px 0 0;
}

.km-live-player.km-live-active{
border-color:#4b526f;
background:#fff;
}

.km-live-player-name{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.km-live-color-icon{
width:18px;
height:18px;
object-fit:contain;
flex:0 0 18px;
}


/*==================================================
ACTIEKNOPPEN
==================================================*/

.km-live-actions{
display:flex;
justify-content:center;
gap:14px;
margin:10px 0 24px;
}

.km-live-icon-btn{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
padding:0;
border:0;
border-radius:50%;
background:#4b526f;
color:#fff;
cursor:pointer;
touch-action:manipulation;
}

.km-live-icon-btn:active{
transform:scale(.94);
}

.km-live-btn-icon{
width:25px;
height:25px;
object-fit:contain;
}

.km-live-btn-svg{
width:25px;
height:25px;
}


/*==================================================
SCHAAKBORD
==================================================*/

.km-live-board{
display:grid;
grid-template-columns:repeat(8,1fr);
width:100%;
max-width:500px;
aspect-ratio:1/1;
margin:0 auto;
border:2px solid #3f455f;
border-radius:4px;
overflow:hidden;
touch-action:manipulation;
user-select:none;
-webkit-user-select:none;
}

.km-live-square{
position:relative;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/1;
}

.km-live-square.light{
background:#e7e8ef;
}

.km-live-square.dark{
background:#949bb7;
}

.km-live-piece{
display:block;
width:88%;
height:88%;
object-fit:contain;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}

.km-live-square.selected::after{
content:"";
position:absolute;
inset:4px;
border:3px solid rgba(63,69,95,.9);
border-radius:5px;
pointer-events:none;
}

.km-live-square.legal::before{
content:"";
position:absolute;
z-index:2;
width:22%;
height:22%;
border-radius:50%;
background:rgba(63,69,95,.55);
pointer-events:none;
}

.km-live-square.legal:has(.km-live-piece)::before{
width:auto;
height:auto;
inset:4px;
border:3px solid rgba(63,69,95,.6);
background:transparent;
}


/*==================================================
EINDSCHERM
==================================================*/

.km-live-end-screen{
width:100%;
padding-top:18px;
}

.km-live-result-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
margin:24px 0 28px;
}

.km-live-result-btn{
min-height:52px;
padding:10px 5px;
border:1px solid #b8bed1;
border-radius:11px;
background:#eef0f7;
color:#3f455f;
font-family:inherit;
font-size:17px;
font-weight:700;
cursor:pointer;
touch-action:manipulation;
}

.km-live-result-btn.km-selected{
background:#4b526f;
border-color:#4b526f;
color:#fff;
}

.km-live-end-choice{
margin-top:10px;
}

.km-live-home-btn{
display:block;
min-width:150px;
min-height:46px;
margin:18px auto 0;
padding:10px 18px;
border:1px solid #b8bed1;
border-radius:11px;
background:#eef0f7;
color:#4b526f;
font-family:inherit;
font-size:15px;
font-weight:700;
cursor:pointer;
touch-action:manipulation;
}

.km-live-home-btn:active{
transform:scale(.985);
}


/*==================================================
DONKERE MODUS
==================================================*/

.km-live-registration.km-live-dark{
background:#17191f;
color:#eceef5;
}

body:has(.km-live-registration.km-live-dark),
html:has(.km-live-registration.km-live-dark){
background:#17191f;
}

.km-live-dark .km-live-welcome-card,
.km-live-dark .km-live-card{
background:#242730;
color:#eceef5;
box-shadow:none;
}

.km-live-dark .km-live-welcome-card h1,
.km-live-dark .km-live-card h2{
color:#fff;
}

.km-live-dark .km-live-welcome-grid > div{
background:#303440;
}


.km-live-dark .km-live-mode-option{
background:#303440;
border-color:#555b6e;
color:#eceef5;
}

.km-live-dark .km-field select{
background-color:#303440;
border-color:#555b6e;
color:#fff;
}

.km-live-dark .km-live-round-btn{
background:#303440;
border-color:#555b6e;
color:#eceef5;
}

.km-live-dark .km-live-round-btn.km-selected{
background:#949bb7;
border-color:#949bb7;
color:#17191f;
}
.km-live-dark .km-live-freeplay-field .km-live-toggle{
background:#303440;
border-color:#555b6e;
color:#eceef5;
}

.km-live-dark .km-live-round-btn:disabled{
opacity:.30;
}
.km-live-dark .km-live-player{
background:#303440;
color:#eceef5;
}

.km-live-dark .km-live-player.km-live-active{
background:#414655;
border-color:#c7ccdf;
}

.km-live-dark .km-live-icon-btn,
.km-live-dark .km-live-main-btn{
background:#949bb7;
color:#17191f;
}

.km-live-dark .km-live-result-btn{
background:#303440;
border-color:#555b6e;
color:#eceef5;
}

.km-live-dark .km-live-result-btn.km-selected{
background:#949bb7;
border-color:#949bb7;
color:#17191f;
}

.km-live-dark .km-live-home-btn{
background:#303440;
border-color:#555b6e;
color:#c7ccdf;
}


/*==================================================
KLEINE GSM-SCHERMEN
==================================================*/

@media(max-width:380px){

.km-live-registration{
padding-left:12px;
padding-right:12px;
}

.km-live-welcome-card,
.km-live-card{
padding-left:16px;
padding-right:16px;
}

.km-live-round-buttons{
gap:6px;
}

.km-live-round-btn{
height:39px;
}

.km-live-actions{
gap:11px;
}

.km-live-icon-btn{
width:48px;
height:48px;
}

}


/*==================================================
GROTERE SCHERMEN
==================================================*/

@media(min-width:700px){

.km-live-registration{
padding-top:30px;
padding-bottom:30px;
}

}