/* 关联文件: chapter1.html, chapter1_script.js */
body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    font-family: sans-serif; /* Use a common sans-serif font */
    line-height: 1.6; /* 全局默认行高 */
}

p {
    text-indent: 1em;   /*  首行缩进2字符 */
    font-size: 16px;    /* 设置基准字体大小 */
    margin-bottom: 1.3em;  /* 添加段落下方间距 */
    line-height: 1.8;      /* 增加行高 */
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 确保最后一个段落不会有多余的下边距 */
p:last-child {
    margin-bottom: 0;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}
h5{
    text-indent: 4em;   /*  首行缩进2字符 */
    color: #02784d;
    margin-bottom: 1.1em;  /* 添加段落下方间距 */
    line-height: 1.5; 
    margin-top: 1.1em;     
}

h3{
    text-indent: 2em;   /*  首行缩进2字符 */
    margin-bottom: 0.5em;  /* 添加段落下方间距 */
    line-height: 1.5;     
}
h1, h2 {
    text-align: center; /* Center headings */
}
.with-dot::before {
    content: "● ";
    color: #337ab7;
  }
/* 关键字样式：绿色斜体 */
.keyword {
    color: #3fa46a;
    font-style: italic;
}
/* 函数名样式：蓝紫色 */
.func {
    color: #5b03b4;
}
/* 自定义函数名样式：橙色 */
.funcname {
    color: #e6a23c;
}
/* 括号样式：黄色 */
.paren {
    color: #ffd700;
}
/* 注释样式：灰色斜体 */
.comment {
    color: #888;
    font-style: italic;
}
/* 代码块整体样式：白色背景、圆角、等宽字体 */
/* 类名样式：蓝色加粗 */
.classname {
    color: #337ab7;
    font-weight: bold;
}
pre {
    background: #ffffff;
    padding: 0 1px 0 1px; /* 减小上下内边距 */
    border-radius: 1px;
    font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
    font-size: 15px;
    line-height: 1.3; /* 减小行高 */
    margin: 4px 0; /* 进一步减小上下外边距 */
}
/* Style for the div containing World and Goal canvases */
.world-goal-container {
    display: flex;
    justify-content: center; /* Center children horizontally in the flex container */
    margin-bottom: 20px; /* Add some space below */
}

.world-container, .goal-container {
    margin: 0 10px; /* Add smaller margin between world and goal */
    text-align: center; /* Center the titles above canvases */
    position: relative; /* Add relative positioning for absolute child elements */
    padding: 0; /* Remove padding as canvas-with-coords will handle positioning */
}

.canvas-with-coords {
    position: relative; /* Set canvas container to relative for absolute positioning of coords */
    /* Adjust padding here to make space for coordinates */
    padding: 5px; /* Small padding around the canvas */
    padding-top: 25px; /* More space on top for potential title/label if needed */
    padding-left: 30px; /* More space on the left for vertical coords */
    padding-bottom: 30px; /* More space on the bottom for horizontal coords */
    display: inline-block; /* Make container size fit content */
}

canvas {
    border: 2px solid black;
    display: block;
    width: 240px;
    height: 240px;
    position: relative;
    z-index: 1;
}

#controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

#controls button {
    margin: 0 5px 8px 5px;
    padding: 10px 18px;
    font-size: 16px;
    min-width: 90px;
    border-radius: 6px;
    background-color: #4285f4; /* Google蓝色 */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#controls button:hover {
    background-color: #3367d6; /* 深一点的蓝色，悬停效果 */
}

#controls button:disabled {
    background-color: #cccccc; /* 禁用状态为灰色 */
    color: #666666;
    cursor: not-allowed;
}

/* 为不同功能的按钮设置不同的颜色 */
#controls button[onclick="toggleTextDescriptions()"] {
    background-color: #34a853; /* Google绿色 */
}

#controls button[onclick="toggleTextDescriptions()"]:hover {
    background-color: #2d9144; /* 深一点的绿色 */
}

#controls button[onclick="move()"] {
    background-color: #4285f4; /* Google蓝色 */
}

#controls button[onclick="move()"]:hover {
    background-color: #3367d6; /* 深一点的蓝色 */
}

#controls button[onclick="turn_left()"] {
    background-color: #fbbc05; /* Google黄色 */
   
}

#controls button[onclick="turn_left()"]:hover {
    background-color: #f09a00; /* 深一点的黄色 */
}

#controls button[onclick="pick_beeper()"] {
    background-color: #ea4335; /* Google红色 */
}

#controls button[onclick="pick_beeper()"]:hover {
    background-color: #d33828; /* 深一点的红色 */
}

#controls button[onclick="put_beeper()"] {
    background-color: #9c27b0; /* 紫色 */
}

#controls button[onclick="put_beeper()"]:hover {
    background-color: #7b1fa2; /* 深一点的紫色 */
}

#controls button[onclick="resetWorld()"] {
    background-color: #ff6d00; /* 橙色 */
}

#controls button[onclick="resetWorld()"]:hover {
    background-color: #e65100; /* 深一点的橙色 */
}

#textDescriptions {
    display: none; /* Initially hidden */
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #f9f9f9;
    max-width: 600px; /* Limit width for better readability */
}

#codeHistory {
    margin: 10px 0;
}

#karelCode {
    background-color: #282c34;
    color: #abb2bf;
    padding: 10px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}

#textDescriptions button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#textDescriptions button:hover {
    background-color: #45a049;
}

#goalMessage {
    color: green;
    font-weight: bold;
    margin-top: 10px;
    min-height: 1em; /* Reserve space to prevent layout shifts */
    text-align: center; /* Center the goal message */
}

/* Styles for Vertical Coordinates Container */
.vertical-coords {
    position: absolute;
    top: 25px; /* Align with the top padding of .canvas-with-coords */
    left: 0; /* Position to the left edge of .canvas-with-coords */
    width: 30px; /* Width for the vertical numbers */
    height: 200px; /* Match canvas height */
    display: block;
    font-weight: bold;
    color: navy;
    z-index: 0; /* Ensure coords are below canvas */
    /* Optional: Add a border or background for debugging positioning */
    /* border: 1px dashed red; */
}

.vertical-coords span {
    position: absolute;
    left: 50%; /* Center horizontally within the 30px width */
    transform: translateX(-50%);
    /* Position vertically based on the canvas grid lines */
}

.vertical-coords span:nth-child(1) { /* '2' */
    /* Align with the horizontal grid line at 100px from canvas top, position above it */
    top: calc(50px - 0.5em - 5px); /* 100px (grid line) - 0.5em (center text) - 5px (small offset above line) */
}

.vertical-coords span:nth-child(2) { /* '1' */
    /* Align with the bottom edge of the canvas (200px from top), position above it slightly */
     top: calc(150px - 0.5em - 5px); /* 200px (bottom edge) - 0.5em (center text) - 5px (small offset above line) */
}

/* Styles for Horizontal Coordinates Container */
.horizontal-coords {
    position: absolute;
    bottom: 0; /* Position to the bottom edge of .canvas-with-coords */
    left: 15px; /* Align with the left padding of .canvas-with-coords */
    width: 200px; /* Match canvas width */
    height: 30px; /* Height for the horizontal numbers */
    display: block;
    font-weight: bold;
    color: navy;
    z-index: 0; /* Ensure coords are below canvas */
     /* Optional: Add a border or background for debugging positioning */
    /* border: 1px dashed blue; */
}

.horizontal-coords span {
     position: absolute;
    top: 50%; /* Center vertically within the 30px height */
    transform: translateY(-50%);
    /* Position horizontally based on the canvas grid lines */
}

.horizontal-coords span:nth-child(1) { /* '1' */
    /* Align with the vertical grid line at 100px from canvas left, position left of it */
    left: calc(60px - 0.5em - 5px); /* 100px (grid line) - 0.5em (center text) - 5px (small offset left of line) */
}

.horizontal-coords span:nth-child(2) { /* '2' */
    /* Align with the right edge of the canvas (200px from left), position left of it slightly */
    left: calc(160px - 0.5em - 5px); /* 200px (right edge) - 0.5em (center text) - 5px (small offset left of line) */
}

/* Adjust padding for .world-goal-container if needed */
.world-goal-container {
    display: flex;
    justify-content: center; /* Center children horizontally in the flex container */
    margin-bottom: 20px; /* Add some space below */
    /* padding-left: 20px; /* Add padding to the left for vertical coordinates */
    /* padding-bottom: 20px; /* Add padding to the bottom for horizontal coordinates */
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    text-align: center;
    background-color: #f2f2f2;
}

.container {
    max-width: 800px; /* Maximum width of the content */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0 20px; /* Add padding on the left and right */
}

@media (max-width: 768px) {
    .world-goal-container {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
    }

    .world-container, .goal-container {
        margin: 10px 0; /* Add margin between stacked items */
    }

    canvas {
        width: 180px;
        height: 180px;
    }

    /* Adjust padding and coordinate positioning if necessary */
    /* based on the smaller canvas size */
    .canvas-with-coords {
         padding: 5px; 
         padding-top: 22px; 
         padding-left: 28px; 
         padding-bottom: 28px; 
    }

    .vertical-coords {
        top: 22px; /* Align with top padding */
        left: 0;
        width: 28px;
        height: 180px; /* Match canvas height */
    }

     .vertical-coords span:nth-child(1) { /* '2' */
        top: calc(90px - 0.5em - 5px); /* 90px (mid-point for 180px canvas) - 0.5em - 5px */
    }

    .vertical-coords span:nth-child(2) { /* '1' */
        top: calc(180px - 0.5em - 5px); /* 180px (bottom edge) - 0.5em - 5px */
    }

    .horizontal-coords {
        bottom: 0;
        left: 28px; /* Align with left padding */
        width: 180px; /* Match canvas width */
        height: 28px;
    }

    .horizontal-coords span:nth-child(1) { /* '1' */
        left: calc(90px - 0.5em - 5px); /* 90px (mid-point for 180px canvas) - 0.5em - 5px */
    }

    .horizontal-coords span:nth-child(2) { /* '2' */
        left: calc(180px - 0.5em - 5px); /* 180px (right edge) - 0.5em - 5px */
    }

    #textDescriptions {
        max-width: 90%; /* Adjust max-width for smaller screens */
    }

}

@media (max-width: 600px) {
    #controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #controls button {
        width: 100%;
        min-width: unset;
        font-size: 18px;
        margin: 0 0 10px 0;
        padding: 14px 0;
        border-radius: 8px;
    }
}

.karel-btn {
    padding: 6px 0;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    color: #fff;
    margin: 0 auto;
    min-width: 140px;
    width: 140px;
    height: 38px;
    display: block;
    cursor: default;
    font-family: inherit;
    font-weight: normal;
    box-shadow: none;
    outline: none;
    text-align: center;
}
.karel-move { background: #4285f4; }
.karel-turn { background: #fbbc05; color: #fff; }
.karel-pick { background: #ea4335; }
.karel-put  { background: #9c27b0; }

.karel-layout {
    display: flex;
    align-items: flex-start;
}

.karel-sidenav {
    width: 220px;
    min-width: 180px;
    background: #fff;
    border-right: 1px solid #eee;
    padding: 0 0 24px 0;
    height: 100vh;
    position: sticky;
    top: 0;
}

.karel-sidenav-header {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #337ab7;
    font-weight: bold;
    margin-left: 24px;
    margin-bottom: 8px;
}

.karel-home-icon svg {
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
}

.karel-title {
    font-size: 1.5rem;
    color: #337ab7;
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-top: 7px;
}

.karel-sidenav hr {
    margin: 16px 0 16px 24px;
    border: none;
    border-top: 1px solid #eee;
    width: 80%;
}

.karel-sidenav-list {
    list-style: none;
    padding: 0 0 0 24px;
    margin: 0;
}

.karel-sidenav-list li {
    margin-bottom: 18px;
}

.karel-sidenav-list a {
    color: #337ab7;
    text-decoration: none;
    font-size: 1.15rem;
    transition: color 0.2s;
}

.karel-sidenav-list a:hover {
    color: #23527c;
    text-decoration: underline;
}

.karel-main-content {
    flex: 1;
    padding: 0 32px 32px 32px;
}

/* self参数样式：灰蓝色 */
.selfparam {
    color: #5a8ca4;
}