/* --- LAYOUT --- */
body{
    font-family: "Comic Sans MS", cursive, sans-serif;
    background:#f3f9ff;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
  }
  #app{
    max-width:900px;
    width:100%;
    padding:20px;
    box-sizing:border-box;
  }
  h1{
    text-align:center;
    color:#ff6b00;
    margin-top:0;
  }
  
  #playArea{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0;
  }
  .column{
    flex:1;
    text-align:center;
  }
  .label{
    font-weight:bold;
    margin-bottom:10px;
  }
  
  /* --- NUMBER BUTTONS --- */
  .numberBtn{
    width:48px;
    height:48px;
    margin:6px;
    border:none;
    border-radius:50%;
    font-size:20px;
    color:#fff;
    cursor:pointer;
    transition:transform 0.2s;
  }
  .numberBtn:hover{transform:scale(1.1);}
  
  /* --- FUNCTION MACHINE PIPE --- */
  #machine{
    width:180px;
    height:120px;
    background:#b3e5fc;
    border:6px solid #0288d1;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  #pipe{
    width:50px;
    height:50px;
  }
  .block{
    width:50px;
    height:50px;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    color:#fff;
    position:absolute;
    left:-60px; /* start outside on the left */
    top:35px;
  }
  
  /* Animation: slide through machine */
  @keyframes travel{
    0%{left:-60px;}
    45%{left:65px;} /* centre of machine */
    55%{left:65px;} /* pause */
    100%{left:290px;} /* out to output column */
  }
  
  /* --- OUTPUT --- */
  #outputDisplay{
    min-height:50px;
    font-size:40px;
    font-weight:bold;
    color:#ff5722;
  }
  
  /* --- TABLE --- */
  #attemptTable{
    width:100%;
    border-collapse:collapse;
    margin:15px 0;
  }
  #attemptTable th, #attemptTable td{
    border:2px solid #0288d1;
    padding:8px;
    text-align:center;
    font-size:20px;
  }
  #attemptTable th{
    background:#4fc3f7;
    color:#004c8c;
  }
  
  /* --- STUDENT ANSWER SECTION --- */
  #studentAnswer {
    background: #e1f5fe;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
  }
  
  #studentAnswer p {
    font-weight: bold;
    margin-top: 0;
    color: #0277bd;
  }
  
  #functionGuess {
    padding: 8px 12px;
    font-size: 16px;
    border: 2px solid #4fc3f7;
    border-radius: 6px;
    margin-right: 10px;
    width: 150px;
  }
  
  #checkAnswerBtn {
    background: #ff9800;
    border: none;
    color: white;
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  
  #checkAnswerBtn:hover {
    background: #f57c00;
  }
  
  #feedbackMessage {
    margin-top: 10px;
    font-weight: bold;
    min-height: 24px;
  }
  
  #feedbackMessage.correct {
    color: #4caf50;
  }
  
  #feedbackMessage.incorrect {
    color: #f44336;
  }
  
  #scoreDisplay {
    font-weight: bold;
    color: #0277bd;
    margin-top: 10px;
    font-size: 18px;
  }
  
  /* --- CONTROL BUTTONS --- */
  #controls{
    text-align:center;
    margin:15px 0 10px 0;
  }
  #controls button{
    background:#8bc34a;
    border:none;
    color:#fff;
    padding:10px 20px;
    font-size:18px;
    margin:0 10px;
    border-radius:8px;
    cursor:pointer;
    transition:background 0.3s;
  }
  #controls button:hover{background:#689f38;}
  
  /* More resources section - Added as requested */
  #moreResources {
    background: #e8f5e9;
    padding: 10px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
  }
  
  #moreResources p {
    margin: 0;
    color: #2e7d32;
  }
  
  #moreResources a {
    color: #00695c;
    font-weight: bold;
    text-decoration: none;
  }
  
  #moreResources a:hover {
    text-decoration: underline;
  }
  
  /* Footer */
  #credit{
    text-align:center;
    font-size:12px;
    color:#888;
    margin-bottom:5px;
  }
  
  #credit a {
    color: #888;
    text-decoration: none;
  }
  
  #credit a:hover {
    text-decoration: underline;
  }