/* QQ农场·取码站
   清新田园·明亮插画 —— 全部手绘 CSS/SVG,零图片零字体依赖。 */

* { box-sizing: border-box; }

:root {
  --grass:   #6fbe42;   /* 前景草 */
  --grass-d: #58a62f;   /* 深草 */
  --sky-t:   #bfe8ff;   /* 天顶 */
  --sky-b:   #eaf9ff;   /* 地平 */
  --roof:    #e2574c;   /* 瓦红 */
  --wood:    #7a5a34;   /* 木棕 */
  --wood-d:  #5c421f;
  --cream:   #fdf4dc;   /* 告示板奶油底 */
  --cream-l: #fffaf0;
  --ink:     #4a3c28;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  color: #5c421f;
  background: var(--sky-t);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ================= 田园场景 ================= */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--sky-t) 0%, var(--sky-b) 62%, #d8f2c6 62.5%, #b9e795 100%);
}

/* ---- 太阳 ---- */
.sun {
  position: absolute;
  top: 5vh;
  right: 9vw;
  width: clamp(52px, 8vw, 92px);
  height: clamp(52px, 8vw, 92px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, #fff3c4 0%, #ffe08a 42%, #ffd35c 72%, #f7bd3e 100%);
  box-shadow: 0 0 0 12px rgba(255, 224, 138, .16),
              0 0 0 26px rgba(255, 224, 138, .10),
              0 0 42px rgba(255, 205, 90, .55);
  animation: sun-halo 6s ease-in-out infinite;
}
@keyframes sun-halo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* ---- 云(错速横漂) ---- */
.cloud {
  position: absolute;
  display: block;
  width: 128px;
  height: 34px;
  border-radius: 24px;
  background: #fff;
  opacity: .92;
  filter: drop-shadow(0 2px 2px rgba(90, 130, 160, .12));
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  bottom: 2px;
  background: inherit;
  border-radius: 50%;
}
.cloud::before { width: 46px; height: 46px; left: 26px; }
.cloud::after  { width: 34px; height: 34px; right: 26px; bottom: 8px; }

.c1 { top: 12vh;  left: -160px; animation: drift 70s linear infinite; }
.c2 { top: 26vh;  left: -260px; transform: scale(.72); opacity: .8;
      animation: drift 100s linear infinite; animation-delay: -22s; }
.c3 { top: 6vh;   left: -200px; transform: scale(.5);  opacity: .66;
      animation: drift 130s linear infinite; animation-delay: -50s; }
@keyframes drift {
  to { transform: translateX(calc(100vw + 340px)); }
}
.c2, .c3 { will-change: transform; }

/* ---- 绿丘 ---- */
.hill {
  position: absolute;
  bottom: 16vh;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
}
.hill.h1 {
  left: -12vw;
  width: 70vw; height: 34vh;
  background: linear-gradient(#c3eaa0, #9edc74);
  opacity: .95;
}
.hill.h2 {
  right: -16vw;
  width: 78vw; height: 44vh;
  background: linear-gradient(#b6e697, #8fd464);
}

/* ---- 左:农舍 + 树 ---- */
.deco.left {
  position: absolute;
  left: 3vw; bottom: 21vh;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.house { animation: bob 7s ease-in-out infinite; }
.tree  { animation: bob 8.6s ease-in-out infinite .8s; }

/* ---- 右:风车 ---- */
.deco.right {
  position: absolute;
  right: 3vw; bottom: 21.5vh;
}
.blades { animation: spin 7s linear infinite; transform-origin: 60px 32px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 房/树/风车 轻柔呼吸 */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---- 前景:草地带 + 田垄 + 作物行 + 栅栏 ---- */
.field {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15vh;
  background: linear-gradient(var(--grass) 0%, var(--grass-d) 100%);
}
.rows {
  position: absolute;
  inset: 0 0 34px 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 46px,
      rgba(70, 120, 40, .20) 46px 50px,
      transparent 50px 96px,
      rgba(70, 120, 40, .20) 96px 100px,
      transparent 100px 152px,
      rgba(70, 120, 40, .26) 152px 154px,
      transparent 154px 208px
    );
}
/* 秧苗 */
.crops {
  position: absolute;
  left: 0; right: 0; bottom: 42px;
  height: 22px;
  background:
    radial-gradient(ellipse 4px 9px at 10px 18px, #3f7d22 52%, transparent 56%),
    radial-gradient(ellipse 4px 9px at 92px 16px, #3f7d22 52%, transparent 56%),
    radial-gradient(ellipse 4px 9px at 178px 19px, #3f7d22 52%, transparent 56%),
    radial-gradient(ellipse 4px 9px at 262px 16px, #3f7d22 52%, transparent 56%),
    radial-gradient(ellipse 4px 9px at 356px 18px, #3f7d22 52%, transparent 56%);
  background-repeat: repeat-x;
  background-size: 400px 22px;
}
/* 栅栏 */
.fence {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  border-top: 3px solid #e2b468;
  background:
    linear-gradient(transparent 8px, rgba(124, 86, 40, .85) 8px 10px, transparent 10px 20px,
                    rgba(124, 86, 40, .85) 20px 22px, transparent 22px);
  box-shadow: 0 -2px 0 #f2cd8a;
}
.fence::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0 38px,
      #7a5226 38px 46px, transparent 46px 88px);
  /* 圆桩粗横档:叠加两条浅色顶光,给出木质感 */
}
.fence::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0 40px,
      rgba(255, 235, 200, .45) 40px 42px, transparent 42px 88px);
}

/* ================= 内容层 ================= */
.wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 18px 6vh;
}

/* ---- 告示板:木框奶油底 ---- */
.board {
  width: min(560px, 94vw);
  background: linear-gradient(180deg, var(--cream-l), var(--cream) 60%, #f7e9c8);
  border-radius: 14px;
  padding: 30px 34px 28px;
  border: 2px solid #8a6633;
  box-shadow:
    0 0 0 6px rgba(122, 90, 52, .10),
    0 0 0 7px #a97c3f,          /* 内木框 */
    inset 0 0 0 3px #f5e6bd,
    0 18px 42px rgba(74, 52, 20, .30),
    0 3px 0 rgba(255, 246, 220, .6) inset;
  position: relative;
}
/* 木框四角钉 */
.board::before, .board::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cf9b4e, #8a6633 72%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.35);
}
.board::before { top: 9px; left: 12px; }
.board::after  { bottom: 9px; right: 12px; }
/* 右下再补一颗(用 :has 支持不佳,直接多写一层结构没必要)——用边框小圆装饰代替 */
.board .pin { display: none; }

/* ---- 品牌标题 ---- */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.brand h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #5c421f;
}
.brand h1 span {
  font-weight: 400;
  color: #a07a43;
  font-size: 19px;
}
.logo {
  display: block;
  filter: drop-shadow(0 2px 0 rgba(122, 90, 52, .25));
}

/* ---- 通用排版 ---- */
.lead {
  margin: 0 0 16px;
  font-size: 18px;
  color: #5c421f;
  text-align: center;
  line-height: 1.5;
}
.lead.sub { margin-bottom: 14px; }
.hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: #9a7a48;
  text-align: center;
  line-height: 1.6;
}
.hint b { color: #7a5a34; font-weight: 700; }

/* ---- 输入行 ---- */
.fieldrow {
  display: flex;
  gap: 10px;
}
.input {
  flex: 1;
  min-width: 0;
  border: 2px solid #d9c08a;
  border-radius: 10px;
  background: #fffdf4;
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: #4a3c28;
  outline: none;
  box-shadow: inset 0 2px 3px rgba(122, 90, 52, .10);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #cbb27f; }
.input:focus {
  border-color: var(--grass);
  box-shadow: inset 0 2px 3px rgba(122, 90, 52, .10), 0 0 0 3px rgba(111, 190, 66, .20);
}

/* ---- 按钮 ---- */
.btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #7bc94f, #5fae2e 55%, #54a028);
  color: #fff;
  text-shadow: 0 1px 1px rgba(38, 88, 10, .35);
  box-shadow: 0 3px 0 #3f7d22, 0 5px 10px rgba(63, 125, 34, .28);
  transition: transform .08s, box-shadow .08s, filter .15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.05); }
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3f7d22, 0 3px 6px rgba(63, 125, 34, .25);
}
.btn:disabled { filter: grayscale(.45) brightness(.92); cursor: wait; }

.btn.ghost {
  background: linear-gradient(180deg, #fdf4dc, #f2e3bd);
  color: #7a5a34;
  text-shadow: none;
  box-shadow: 0 2px 0 #d9bd85, 0 4px 8px rgba(122, 90, 52, .16);
  border: 1px solid #e6d0a2;
}
.btn.ghost:active { box-shadow: 0 0 0 #d9bd85; }
.btn.small { padding: 8px 16px; font-size: 14px; font-weight: 600; }

.btnrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  color: #a07a43;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: #5c421f; }

/* ---- 视图切换(淡入上浮) ---- */
.view[hidden] { display: none; }
.view:not([hidden]) { animation: rise .32s ease-out; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 启动态:转动的太阳/麦粒 ---- */
.spinner {
  width: 54px; height: 54px;
  margin: 6px auto 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, #ffe89a, #ffcf4e 70%);
  box-shadow: 0 0 0 6px rgba(255, 216, 122, .28), 0 0 26px rgba(255, 205, 90, .5);
  position: relative;
  animation: sun-halo 1.1s ease-in-out infinite;
}
/* 麦穗式缺口,让它转起来更像丰收在动 */
.spinner::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 22deg, rgba(143, 92, 30, .85) 22deg 30deg, transparent 30deg 52deg,
      rgba(143, 92, 30, .85) 52deg 60deg, transparent 60deg 82deg,
      rgba(143, 92, 30, .85) 82deg 90deg, transparent 90deg 112deg,
      rgba(143, 92, 30, .85) 112deg 120deg, transparent 120deg 142deg,
      rgba(143, 92, 30, .85) 142deg 150deg, transparent 150deg 172deg,
      rgba(143, 92, 30, .85) 172deg 180deg, transparent 180deg 202deg,
      rgba(143, 92, 30, .85) 202deg 210deg, transparent 210deg 232deg,
      rgba(143, 92, 30, .85) 232deg 240deg, transparent 240deg 262deg,
      rgba(143, 92, 30, .85) 262deg 270deg, transparent 270deg 292deg,
      rgba(143, 92, 30, .85) 292deg 300deg, transparent 300deg 322deg,
      rgba(143, 92, 30, .85) 322deg 330deg, transparent 330deg 352deg,
      rgba(143, 92, 30, .85) 352deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 60%);
  mask: radial-gradient(circle, transparent 0 60%, #000 60%);
  animation: spin .9s linear infinite;
}

/* ---- 出码态 ---- */
.qr-wrap { display: flex; flex-direction: column; align-items: center; margin: 4px 0 18px; }
.qr-frame {
  position: relative;
  width: 218px; height: 218px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #e0c890;
  box-shadow: 0 4px 0 rgba(122, 90, 52, .18), 0 10px 24px rgba(74, 52, 20, .16);
}
.qr-frame img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 四角扫描标线(农具铜色) */
.corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid #4f8f2a;
  opacity: 0;
}
.corner.tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.corner.tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.corner.bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.corner.br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.qr-frame.scan .corner { animation: corner-in .5s .1s forwards; }
.qr-frame.scan .corner.br, .qr-frame.scan .corner.bl { animation: corner-in .5s .25s forwards; }
@keyframes corner-in {
  to { opacity: 1; }
}
.qr-time { font-size: 12.5px; color: #9a7a48; margin-top: 12px; }
.qr-time b { color: #7a5a34; font-variant-numeric: tabular-nums; }

/* ---- code 态 ---- */
.okbar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: rgba(95, 174, 46, .14);
  border: 1px solid rgba(95, 174, 46, .35);
  color: #4a8a1f;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  left: 50%; transform: translateX(-50%);
  width: fit-content;
}
.okbar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #5fae2e;
  box-shadow: 0 0 0 3px rgba(95, 174, 46, .2);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .75; }
}
.code-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  background: #fff8e4;
  border: 2px dashed #cfaa5f;
  border-radius: 12px;
  padding: 12px 10px 12px 18px;
  box-shadow: inset 0 1px 4px rgba(122, 90, 52, .08);
}
#code-text {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(17px, 4.6vw, 23px);
  font-weight: 800;
  letter-spacing: .5px;
  color: #3f7d22;
  word-break: break-all;
  line-height: 1.35;
  user-select: all;
}
.copy {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #7bc94f, #5fae2e);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 2px 0 #3f7d22;
  flex-shrink: 0;
  white-space: nowrap;
}
.copy:active { transform: translateY(1px); box-shadow: 0 1px 0 #3f7d22; }
.copy.done { background: linear-gradient(180deg, #9ad06e, #6fbe42); }

.acct-box {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #fff8e4;
  border: 1px solid #e0c890;
  border-radius: 10px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #7a5a34;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow: auto;
}

/* ---- 脚注 & toast ---- */
.foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(74, 60, 40, .75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  background: rgba(60, 46, 22, .92);
  color: #fdf4dc;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  animation: toast-up .25s ease-out;
}
.toast[hidden] { display: none; }
@keyframes toast-up {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ================= 响应式 ================= */
@media (max-width: 520px) {
  .board { padding: 24px 18px 22px; }
  .brand h1 { font-size: 22px; }
  .brand h1 span { font-size: 16px; }
  .deco.left { left: 2vw; transform: scale(.8); transform-origin: bottom left; }
  .deco.right { right: 2vw; transform: scale(.8); transform-origin: bottom right; }
  .field { height: 12vh; }
}
@media (max-height: 660px) {
  .deco.left, .deco.right { transform: scale(.62); }
  .deco.left { transform-origin: bottom left; }
  .deco.right { transform-origin: bottom right; }
  .board { padding-top: 20px; padding-bottom: 18px; }
  .brand { margin-bottom: 14px; }
}

/* 减小动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .sun, .cloud, .blades, .house, .tree, .spinner, .spinner::before { animation: none !important; }
  .view:not([hidden]) { animation: none; }
}