:root{
  --black:#000;
  --white:#fff;
  --green:#00ff66;
  --pink:#ff2bd6;
  --muted: rgba(255,255,255,.75);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family: Arial, Helvetica, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  font-size:18px;
}

.wrap{width:100%; max-width:none; min-height:calc(100vh - 56px); display:flex; justify-content:center;}

.card{width:100%; min-height:100vh; border:1px solid var(--white); padding:38px 40px 32px; overflow-x:hidden;}

.header{text-align:center; margin-bottom:18px;}

.titleRow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
}

h1{margin:0; font-size:76px; font-weight:700; color:var(--green); letter-spacing:-1px; line-height:.95;}

.titleRobot{
  width:112px;
  height:auto;
  flex:0 0 auto;
  object-fit:contain;
}

.titleRobot.hidden{display:none;}

.subtitle{margin-top:8px; font-size:17px; font-style:italic;}

.small{margin-top:10px; font-size:13px; color:var(--muted);}

.kbd{border:1px solid var(--white); padding:2px 6px; font-size:11px; display:inline-block;}

.good{color:var(--green);}
.bad{color:var(--pink);}

.stats{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin:16px 0 6px; font-size:16px;}
.pill strong{font-weight:700;}

.panel{max-width:720px; margin:0 auto;}

.block{margin:0 0 12px;}

.label{
  font-size:14px;
  margin-bottom:6px;
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:left;
}

.qText{font-size:25px; margin:0; line-height:1.25; text-align:left;}
.aiText{font-size:20px; margin:0; line-height:1.4; text-align:left;}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.actions.center{justify-content:center;}

button{
  background:var(--black);
  color:var(--white);
  border:1px solid var(--white);
  padding:12px 20px;
  cursor:pointer;
  font-size:15px;
  transition:background .15s ease, color .15s ease;
  min-width:170px;
}

button:hover{background:var(--white); color:var(--black);}
button:disabled{opacity:.45; cursor:not-allowed;}

.btnPrimary{border-color:var(--green); color:var(--green);}
.btnPrimary:hover{background:var(--green); color:var(--black);}

.btnCorrect{border-color:var(--green); color:var(--green);}
.btnCorrect:hover{background:var(--green); color:var(--black);}

.btnIncorrect{border-color:var(--pink); color:var(--pink);}
.btnIncorrect:hover{background:var(--pink); color:var(--black);}

.btnNext,.btnRestart{min-width:150px;}

.reveal{border-top:1px solid rgba(255,255,255,.7); padding-top:10px; margin-top:12px; font-size:17px;}

.resultArea{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:12px;
}

.resultArea .reveal{
  flex:1 1 auto;
  margin-top:0;
}

.resultLine{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}

.chip{margin-right:10px; font-size:18px; line-height:1.2;}
.chip.ok{color:var(--green);}
.chip.bad{color:var(--pink);}

.explain{margin:4px 0 0; line-height:1.3; color:var(--muted); font-size:16px;}
.source{margin:2px 0 0; line-height:1.25; color:var(--muted); font-size:14px; word-break:break-word;}

.gameRobotWrap{
  flex:0 0 150px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:150px;
  padding-top:6px;
}

.gameRobot{
  width:150px;
  height:auto;
  object-fit:contain;
}

.screen{display:none;}
.screen.active{display:block;}

.startCopy{text-align:center; margin:20px auto 26px; max-width:780px; line-height:1.6; font-size:18px;}

.siteFooter{
  width:100%;
  padding:10px 24px 14px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

@media (max-width: 900px){
  body{
    font-size:17px;
  }

  .card{
    padding:28px 24px 24px;
  }

  .titleRow{
    gap:12px;
  }

  h1{
    font-size:60px;
  }

  .titleRobot{
    width:88px;
  }

  .panel{
    max-width:100%;
  }

  .resultArea{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:8px;
  }

  .gameRobotWrap{
    flex-basis:auto;
    min-height:0;
    padding-top:0;
  }

  .gameRobot{
    width:120px;
  }
}

@media (max-width: 640px){
  body{
    font-size:16px;
  }

  .wrap{
    min-height:auto;
    padding:0 8px 10px;
    align-items:flex-start;
  }

  .card{
    min-height:auto;
    padding:18px 14px 16px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }

  .header{
    margin-bottom:12px;
  }

  .titleRow{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  h1{
    font-size:clamp(34px, 13vw, 48px);
    line-height:1.05;
    text-align:center;
  }

  .titleRobot{
    width:64px;
  }

  .subtitle{
    font-size:14px;
    line-height:1.45;
    margin-top:6px;
  }

  .small{
    font-size:12px;
    line-height:1.5;
    margin-top:8px;
  }

  .stats{
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin:12px 0 10px;
    font-size:14px;
  }

  .pill{
    width:100%;
    text-align:center;
  }

  .label{
    font-size:12px;
    margin-bottom:4px;
  }

  .qText{
    font-size:20px;
    line-height:1.35;
  }

  .aiText{
    font-size:17px;
    line-height:1.45;
  }

  .actions{
    gap:8px;
  }

  .actions.center{
    justify-content:stretch;
  }

  button{
    width:100%;
    min-width:0;
    padding:12px 14px;
    font-size:14px;
  }

  .btnNext,.btnRestart{
    min-width:0;
  }

  .resultArea{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:10px;
    margin-top:14px;
  }

  .resultLine{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .chip{
    display:inline-block;
    margin-right:0;
    margin-bottom:8px;
    font-size:15px;
  }

  .explain{
    font-size:15px;
    line-height:1.45;
  }

  .source{
    font-size:13px;
    line-height:1.4;
  }

  .gameRobotWrap{
    width:100%;
    justify-content:center;
  }

  .gameRobot{
    width:92px;
  }

  .startCopy{
    margin:14px auto 20px;
    font-size:16px;
    line-height:1.55;
    max-width:100%;
  }

  .siteFooter{
    padding:10px 14px 14px;
    font-size:12px;
  }
}