:root {
  --bg: #fbf2d5;          /* 页面主背景，米黄色 */
  --panel: #fff9e5;       /* 内容面板/卡片背景，更浅的米黄 */
  --border: #c58f39;      /* 边框色，明亮复古金棕色 */
  --text: #3c2e10;        /* 主文字，深棕色 */
  --accent: #60b8ba;      /* 主按钮高亮，湖蓝绿 */
  --accent2: #e45a33;     /* 副高亮，砖红色 */
  --button-text: #fff9e5; /* 按钮字色 */
}


  * { box-sizing: border-box; max-width:100%; }
  html, body {
    margin:0; padding:0;
    overflow-x:hidden;   /* 核心：全局禁止横向滚动 */
    font-family:'Press Start 2P',monospace;
    background:var(--bg);
    color:var(--text);
    font-size:12px;
  }
  header {
    padding:8px;
    border-bottom:3px solid var(--border);
    background:var(--panel);
    text-align:center;
  }
  header h1 { margin:0; font-size:14px; }
  main {
    display:grid;
    grid-template-columns:320px 1fr;
    gap:8px;
    padding:8px;
    max-width:100%;    /* 避免被撑开 */
    overflow-x:hidden; /* 防止子元素撑开 */
  }
  @media(max-width:960px){main{grid-template-columns:1fr;}}
  .card {
    background:var(--panel);
    border:3px solid var(--border);
    padding:8px;
    max-width:100%;
    overflow:hidden;   /* 防止 canvas 溢出 */
  }
  label { display:block; margin:6px 0 4px; }
  select,input[type="number"],input[type="range"]{
    width:100%;
    padding:6px 4px;
    background:#fff9e5; color:var(--text);
    border:2px solid var(--border);
    font-family:'Press Start 2P',monospace;
  }
  input[type="color"]{width:32px;height:28px;border:2px solid var(--border);background:#fff9e5;}
 .drop {
  border: 3px dashed var(--accent2); /* 更亮的砖红色 */
  background-color: #fffbe7;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 6px #f7eac2;
}
.drop label {
  cursor: pointer;
}


.drop:hover {
  background-color: #fff2c8;
  border-color: var(--accent);
  box-shadow: 0 0 12px #ffe9b0;
  transform: scale(1.01);
}
  .drop.drag { border-color:var(--accent);color:var(--accent);}
  .canvas-row {
    display:flex;
    gap:8px;
    flex:1;
    flex-wrap:wrap;    /* 防止超宽时换行 */
    max-width:100%;
    justify-content:space-between;
  }
  canvas {
    flex:1;
    min-width:0;         /* 核心：防止 Flex 溢出 */
    width:100%;
    height:auto;
    image-rendering:pixelated;
    background:#faecd1;
    border:3px solid var(--border);
    max-width: 49%;      /* 每个 Canvas 最大占父容器一半 */
  }
  @media(max-width:960px){
    canvas{max-width:100%;}
  }
  .actions {display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
  button {
     background: var(--accent);
  color: var(--button-text);
  border: 3px solid var(--border);
    font-family:'Press Start 2P',monospace;padding:6px 8px;cursor:pointer;
  }
  button.primary{background: var(--accent2);}
  #palettePreview{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0;}
  #palettePreview .sw{width:14px;height:14px;border:1px solid #000;}
  .row{display:flex;align-items:center;gap:4px;}
  /* Custom colors */
  #colorList .color-item{display:flex;align-items:center;gap:4px;margin:4px 0;}
  #colorList .remove{background:#fff9e5;color:var(--text);border:2px solid var(--border);cursor:pointer;padding:0 4px;}
  /* Modal */
  .modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:999;}
  .modal.active{display:flex;}
  .modal .panel{background:var(--panel);border:3px solid var(--border);padding:8px;width:min(400px,90vw);}
  .modal h3{margin:0 0 8px;}
  #lospecPreview{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;}
  #lospecPreview .sw{width:14px;height:14px;border:1px solid #000;}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.hero {
  background: #fffbe7;  /* 更淡的米色 */
  padding: 48px 0 32px 0;
  text-align: center;
  border-bottom: 3px solid #c58f39;
}

.hero h1 {
  font-family: 'Press Start 2P', monospace;
  color: #e45a33;       /* 砖红高亮 */
  font-size: 24px;
  margin: 0 0 14px 0;
  letter-spacing: 1px;
}

.hero-desc {
  color: #60b8ba;       /* 湖蓝副色 */
  font-size: 1.1rem;
  margin: 32px 0 32px 0;
  letter-spacing: 1px;
line-height: 1.5;
}

.hero-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.hero-img {
  width: 480px;         /* 按需要调整 */
  max-width: 80vw;
  image-rendering: pixelated;
  border: 4px solid #c58f39;
  background: #fff9e5;
  border-radius: 10px;
  box-shadow: 0 8px 0 #c58f39, 0 0 16px #ffe7ae77;
  Margin: 30px;
}

.hero-params {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text);
  margin-top: 8px;
  opacity: 0.85;
}


.faq-section {
  margin: 48px auto 0 auto;
  max-width: 800px;
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 0 #f7d98c33;
  padding: 32px 24px;
}
.faq-section h2 {
  font-size: 26px;
  color: var(--accent2, #e45a33);
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
  letter-spacing: 1px;
}
.faq-block { margin-bottom: 28px; }
.faq-block h3 {
  margin: 0 0 7px 0;
  
  font-size: 22px;
  letter-spacing: 1px;
}
.faq-block div {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.7;
}
@media (max-width: 700px) {
  .faq-section { padding: 18px 5vw; }
  .faq-block h3 { font-size: 0.95rem; }
  .faq-block div { font-size: 0.98rem; }
}

.faq-section, .faq-section * {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

.lospec-link {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text);
  text-align: left;
}

.lospec-link a {
  display: inline-block;
  margin-top: 6px;
  font-weight: bold;
  text-decoration: underline;
  color: var(--accent);
  transition: color 0.2s ease;
}

.lospec-link a:hover {
  color: var(--accent2);
}

.site-header {
  text-align: center;
  padding: 20px 0;
}

.logo-link {
  display: inline-block;
}

.logo-img {
  height: 30px;
  width: auto;
}

.site-footer {
  text-align: center;
  font-size: 14px;
  color: var(--text);
  background-color: var(--background);
  border-top: 1px solid var(--border);
  padding: 16px;
  margin-top: 40px;
  font-family: inherit;
}