@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap');

:root{
  --km-dark:#3f455f;
  --km-main:#4b526f;
  --km-soft:#949bb7;
  --km-bg1:#d8dceb;
  --km-bg2:#c7ccdf;
}

*{
  box-sizing:border-box;
}

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

body{
  padding:32px 20px;
  font-family:'Jura',sans-serif;
  color:var(--km-dark);

  background:
    linear-gradient(
      rgba(62,65,71,.47),
      rgba(62,65,71,.47)
    ),
    url("https://api.krakkemat.be/media/algemeen/krakkemat-achtergrond.jpg")
    center center / cover fixed no-repeat;

  background-color:#3e4147;
}

.km-pgn-tool{

max-width:1000px;

margin:0 auto;

padding:40px;

border-radius:24px;

background:
linear-gradient(
135deg,
rgba(216,220,235,.96),
rgba(199,204,223,.92)
);

box-shadow:
inset 0 1px 1px rgba(255,255,255,.55),
0 18px 40px rgba(20,25,45,.18);

}

.km-pgn-tool h1{

margin:0;

text-align:center;

font-size:42px;

letter-spacing:.12em;

color:#3f455f;

text-shadow:
0 1px 0 rgba(255,255,255,.65),
0 3px 8px rgba(75,82,111,.22);

}



.km-pgn-tool h2{

margin:8px 0 12px;

text-align:center;

font-size:26px;

color:#6f7690;

text-shadow:
0 1px 0 rgba(255,255,255,.45);

}



.km-tool-logo-link{

display:flex;

justify-content:center;

margin:0 auto 10px;

text-decoration:none;

}



.km-tool-logo{

width:56px;

height:56px;

object-fit:contain;

display:block;

opacity:.92;

transition:.18s ease;

}



.km-tool-logo-link:hover .km-tool-logo{

transform:translateY(-1px);

opacity:1;

}



.km-pgn-intro{

text-align:center;

margin:0 0 30px;

}



.km-pgn-form{

padding:22px;

margin:0 0 32px;

border-radius:16px;

background:rgba(255,255,255,.22);

border:1px solid rgba(75,82,111,.14);

}



.km-pgn-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}



.km-pgn-tool label{

font-weight:700;

font-size:14px;

color:#3f455f;

}



.km-pgn-tool input,
.km-pgn-tool select,
.km-pgn-tool textarea{

width:100%;

box-sizing:border-box;

margin-top:6px;

padding:13px 14px;

border-radius:16px;

border:1px solid rgba(75,82,111,.18);

background:rgba(255,255,255,.34);

color:#3f455f;

font-family:'Jura',sans-serif;

font-size:15px;

}



.km-pgn-full{

grid-column:1 / -1;

}
.km-viewer-body{

display:grid;

grid-template-columns:
minmax(430px,1.25fr)
minmax(260px,.75fr);

gap:18px;

align-items:stretch;

}



.viewer-board-panel{

padding:0;

position:sticky;

top:20px;

align-self:start;

background:none;

border-radius:18px;

}



.board-wrap{

width:100%;

aspect-ratio:1/1;

border-radius:12px;

overflow:hidden;

background:#3f455f;

position:relative;

padding:12px;

box-sizing:border-box;

box-shadow:

inset 0 1px 0 rgba(255,255,255,.08),

0 8px 18px rgba(45,55,95,.12);

}



.viewer-board{

width:100%;

height:100%;

display:grid;

grid-template-columns:repeat(8,1fr);

grid-template-rows:repeat(8,1fr);

overflow:hidden;

border-radius:4px;

}



.board-ranks{

position:absolute;

left:3px;

top:14px;

bottom:14px;

display:grid;

grid-template-rows:repeat(8,1fr);

align-items:center;

justify-items:center;

color:#ffffff;

font-size:10px;

font-weight:700;

font-family:'Jura',sans-serif;

z-index:3;

}



.board-files{

position:absolute;

left:12px;

right:12px;

bottom:1px;

display:grid;

grid-template-columns:repeat(8,1fr);

text-align:center;

color:#ffffff;

font-size:10px;

font-weight:700;

font-family:'Jura',sans-serif;

z-index:3;

}



.square{

position:relative;

display:flex;

align-items:center;

justify-content:center;

user-select:none;

cursor:pointer;

}



.light{

background:#edf0fa;

}



.dark{

background:#8f99ba;

}



.square.selected{

outline:3px solid rgba(75,82,111,.45);

outline-offset:-3px;

}



.square.legal:after{

content:"";

width:22%;

height:22%;

border-radius:50%;

background:rgba(63,69,95,.32);

}



.piece-img{

width:86%;

height:86%;

object-fit:contain;

pointer-events:none;

filter:
drop-shadow(0 2px 2px rgba(20,25,45,.35));

transition:transform .18s ease;

}



.viewer-moves-panel{

display:flex;

flex-direction:column;

padding:0;

overflow:hidden;

max-width:340px;

min-height:520px;

height:auto;

border-radius:18px;

background:rgba(255,255,255,.18);

}



.game-summary{

padding:22px 24px 16px;

border-bottom:1px solid rgba(120,130,165,.18);

}



.players-line{

display:grid;

grid-template-columns:1fr auto 1fr;

gap:10px;

align-items:center;

color:#263056;

font-size:.95rem;

font-weight:700;

}



.players-line span:first-child{

text-align:left;

}



.players-line span:last-child{

text-align:right;

}



.dash{

color:rgba(38,48,86,.65);

}



.viewer-eventline{

margin-top:12px;

color:#5064a8;

font-size:.82rem;

line-height:1.5;

}



.viewer-score{

color:#3f455f;

font-weight:700;

white-space:nowrap;

}



.viewer-moves{

flex:1;

min-height:280px;

max-height:500px;

overflow-y:auto;

padding:20px 24px;

color:#182244;

line-height:2;

font-size:.92rem;

background:rgba(255,255,255,.18);

}



.move-row{

display:grid;

grid-template-columns:34px 1fr 1fr;

gap:12px;

align-items:center;

margin-bottom:5px;

}



.move-number{

color:rgba(32,42,75,.55);

font-weight:700;

}



.move{

display:inline-block;

padding:3px 9px;

border-radius:8px;

cursor:pointer;

font-weight:650;

}



.move:hover{

background:rgba(75,82,111,.08);

}



.move.active{

background:rgba(75,82,111,.18);

color:#1f2949;

}
.result-line{

margin-top:16px;

padding:12px 18px;

border-radius:10px;

background:rgba(170,174,218,.22);

color:#263056;

font-weight:700;

}



.viewer-controls{

display:flex;

justify-content:center;

gap:10px;

padding:18px 16px 22px;

border-top:1px solid rgba(120,130,165,.18);

background:rgba(255,255,255,.18);

}



.viewer-controls button,
.km-pgn-btn{

min-height:42px;

padding:0 22px;

border-radius:16px;

border:1px solid rgba(75,82,111,.18);

background:#4b526f;

color:#d8dceb;

font-family:'Jura',sans-serif;

font-weight:700;

cursor:pointer;

box-shadow:

0 7px 14px rgba(45,55,95,.16),

inset 0 1px 0 rgba(255,255,255,.45);

}



.viewer-controls button{

width:52px;

height:40px;

padding:0;

font-size:1.2rem;

}



.viewer-extra-controls{

display:flex;

justify-content:center;

gap:10px;

padding:0 16px 20px;

background:rgba(255,255,255,.18);

}



.viewer-extra-controls button,
.viewer-reset-control button{

min-height:36px;

padding:0 16px;

border-radius:14px;

border:1px solid rgba(75,82,111,.18);

background:#d8dceb;

color:#3f455f;

font-family:'Jura',sans-serif;

font-weight:700;

cursor:pointer;

}



.viewer-reset-control{

display:flex;

justify-content:center;

padding:0 16px 20px;

background:rgba(255,255,255,.18);

}



.km-pgn-btn.secondary{

background:#d8dceb;

color:#3f455f;

}



.km-pgn-actions{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:22px;

justify-content:center;

}



.km-pgn-help{

position:relative;

display:flex;

align-items:center;

min-width:28px;

min-height:28px;

}



.km-pgn-help-dot{

width:28px;

height:28px;

min-width:28px;

min-height:28px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#4b526f;

color:#d8dceb;

font-weight:700;

border:1px solid rgba(63,69,95,.35);

cursor:help;

}



.km-pgn-help-box{

display:none;

position:absolute;

left:0;

bottom:42px;

width:340px;

z-index:50;

padding:18px 20px;

border-radius:16px;

background:rgba(244,246,251,.96);

border:1px solid rgba(75,82,111,.18);

box-shadow:0 18px 38px rgba(63,69,95,.22);

color:#3f455f;

font-size:13px;

line-height:1.55;

text-align:left;

}



.km-pgn-help:hover .km-pgn-help-box{

display:block;

}



.km-pgn-btn.copied{

transform:scale(.96);

background:#949bb7;

color:#f4f6fb;

}



.km-pgn-btn.is-saving{

opacity:.7;

cursor:wait;

}



.km-pgn-btn.is-saved{

background:#949bb7;

color:#f4f6fb;

}



.km-pgn-output{

margin-top:22px;

padding:18px 22px;

border-radius:16px;

background:rgba(255,255,255,.28);

border:1px solid rgba(75,82,111,.14);

white-space:pre-wrap;

overflow-x:auto;

font-family:Consolas,"Courier New",monospace;

font-size:13px;

line-height:1.65;

color:#3f455f;

text-align:left;

}



.km-pgn-output.is-success,
.km-pgn-output.is-error{

font-family:'Jura',sans-serif;

font-weight:700;

text-align:center;

}



.km-pgn-output.is-error{

color:#7b3440;

}



.km-pgn-import{

min-height:140px;

}



.pgn-import-divider{

display:flex;

align-items:center;

gap:14px;

margin:14px 0 0;

}



.pgn-import-divider::before,
.pgn-import-divider::after{

content:"";

height:1px;

flex:1;

background:rgba(75,82,111,.18);

}



.pgn-import-divider span{

font-size:11px;

font-weight:700;

letter-spacing:.10em;

text-transform:uppercase;

color:#6f7690;

}



.pgn-import-help{

margin-top:-4px;

text-align:center;

font-size:12px;

line-height:1.45;

font-weight:500;

color:#6f7690;

}



.pgn-import-help strong{

color:#4b526f;

font-weight:700;

}



.km-pgn-recent{

margin-top:28px;

padding:22px;

border-radius:16px;

background:rgba(255,255,255,.22);

border:1px solid rgba(75,82,111,.14);

}



.km-pgn-recent h3{

margin:0;

text-align:center;

font-size:20px;

color:#3f455f;

}



.km-pgn-recent-note{

margin:6px 0 18px;

text-align:center;

font-size:13px;

color:#6f7690;

}



.km-pgn-recent-list{

display:flex;

flex-direction:column;

gap:10px;

}



.km-pgn-recent-row{

display:grid;

grid-template-columns:110px 1fr auto;

gap:14px;

align-items:center;

padding:12px 14px;

border-radius:12px;

background:rgba(255,255,255,.28);

border:1px solid rgba(75,82,111,.10);

}



.km-pgn-recent-date{

font-size:12px;

color:#6f7690;

}



.km-pgn-recent-game{

font-weight:700;

color:#3f455f;

}



.km-pgn-recent-result{

font-weight:700;

color:#3f455f;

white-space:nowrap;

}



.km-pgn-recent-empty{

padding:16px;

text-align:center;

font-size:13px;

color:#6f7690;

}



@media(max-width:900px){

.km-viewer-body{

grid-template-columns:1fr;

}


.viewer-moves-panel{

max-width:none;

}

}



@media(max-width:768px){

.km-pgn-grid{

grid-template-columns:1fr;

}

}



@media(max-width:620px){

.km-pgn-recent-row{

grid-template-columns:1fr auto;

}


.km-pgn-recent-date{

grid-column:1 / -1;

}

}



@media(max-width:520px){

.km-pgn-tool{

padding:34px 16px 38px;

}


.km-pgn-tool h1{

font-size:32px;

letter-spacing:.055em;

white-space:nowrap;

}


.km-pgn-tool h2{

font-size:22px;

}


.km-tool-logo{

width:50px;

height:50px;

}

}