/* ===== 诗趣 · 水墨雅致国风主题 ===== */
:root{
  /* 宣纸与墨 */
  --paper:      #F5F0E6;   /* 宣纸底 */
  --paper-2:    #ECE3D2;   /* 旧纸/卡面 */
  --paper-3:    #FBF7EF;   /* 亮纸 */
  --ink:        #2B2B2B;   /* 墨色 */
  --ink-2:      #4A4A4A;
  --ink-soft:   #6E6A60;   /* 淡墨/说明 */
  /* 点缀色 */
  --cinnabar:   #B23A2E;   /* 朱砂（印章/重点） */
  --cinnabar-2: #C75B4A;   /* 朱砂浅 */
  --gold:       #B8860B;   /* 泥金（得分） */
  --jade:       #2E7D5B;   /* 青绿（正确） */
  --jade-soft:  #DCEFE4;
  --mist:       #A8B8A0;   /* 远山淡青 */
  /* 线条与影子 */
  --line:       rgba(43,43,43,.14);
  --line-2:     rgba(43,43,43,.08);
  --shadow:     0 10px 30px rgba(43,43,43,.10);
  --shadow-s:   0 4px 12px rgba(43,43,43,.08);
  --radius:     10px;
  /* 字体（优先系统楷/宋，逐级回退；不依赖外部字体以保证离线可用） */
  --kai:  "Kaiti SC","STKaiti","KaiTi","楷体","Songti SC","SimSun",serif;
  --song: "Songti SC","STSong","SimSun","宋体",serif;
  --sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 50% -8%, #FBF6EC 0%, transparent 55%),
    linear-gradient(165deg,#F7F1E6 0%, #EFE7D4 100%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
/* 宣纸纤维纹理（极淡，纯 CSS 噪声感） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(43,43,43,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(43,43,43,.018) 0 1px, transparent 1px 3px);
}
/* 远山淡影（固定底部，水墨氛围） */
.ink-mountains{
  position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:0;pointer-events:none;
  opacity:.16;
}
.ink-mountains svg{width:100%;height:100%;display:block;}
/* 落瓣层 */
#petals{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.petal{position:absolute;top:-24px;width:12px;height:12px;opacity:.7;
  background:radial-gradient(circle at 30% 30%, #F3C9C0, var(--cinnabar-2));
  border-radius:60% 0 60% 0;animation:fall linear infinite;}
@keyframes fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0;}
  10%{opacity:.75;}
  100%{transform:translateY(110vh) translateX(40px) rotate(420deg);opacity:.2;}
}
.app{max-width:560px;margin:0 auto;padding:0 16px 40px;position:relative;z-index:2;}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 8px;}
.brand{font-family:var(--kai);font-size:24px;font-weight:800;color:var(--ink);letter-spacing:3px;}
.brand .dot{color:var(--cinnabar);}
.topbar .right{display:flex;align-items:center;gap:10px;}
.tagline{font-size:13px;color:var(--ink-soft);white-space:nowrap;}
.mute{
  border:1px solid var(--line);background:var(--paper-3);color:var(--ink-soft);
  width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;
  box-shadow:var(--shadow-s);transition:.15s;flex:none;
}
.mute:hover{border-color:var(--ink-soft);color:var(--ink);}

/* 屏幕切换 */
.screen{display:none;}
.screen.active{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 首页 hero */
.hero{text-align:center;padding:14px 0 8px;position:relative;}
.hero-cat{font-size:44px;animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hero h1{font-family:var(--kai);font-size:clamp(26px,8vw,32px);margin:6px 0 4px;color:var(--ink);letter-spacing:4px;font-weight:800;}
.hero .sub{display:inline-block;margin-top:2px;padding:2px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink-soft);background:rgba(255,255,255,.4);}
.hero p{margin:10px 0 0;color:var(--ink-soft);font-size:14px;}

/* 模式卡片（诗签/宣纸卡） */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.mode-card{
  background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;box-shadow:var(--shadow);cursor:pointer;
  transition:.18s transform,.18s box-shadow,.18s border-color;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-height:118px;
}
.mode-card::after{content:"";position:absolute;inset:6px;border:1px solid var(--line-2);border-radius:6px;pointer-events:none;}
.mode-card:hover{transform:translateY(-4px);border-color:var(--ink-soft);box-shadow:0 14px 30px rgba(43,43,43,.14);}
.mode-card:active{transform:translateY(-1px);}
.mode-card .emoji{font-size:34px;}
.mode-card .name{font-family:var(--kai);font-size:18px;font-weight:800;color:var(--ink);letter-spacing:2px;}
.mode-card .desc{font-size:12px;color:var(--ink-soft);line-height:1.5;min-height:34px;}
.mode-card .go{
  align-self:flex-start;margin-top:4px;font-size:13px;font-weight:700;color:var(--paper-3);
  background:var(--ink);padding:6px 14px;border-radius:999px;letter-spacing:1px;
}
.mode-card .best-tag{position:absolute;top:10px;right:12px;font-size:11px;color:var(--cinnabar);background:var(--paper);border:1px solid var(--line);padding:2px 8px;border-radius:999px;}

.foot{text-align:center;font-size:11px;color:var(--ink-soft);margin-top:26px;opacity:.85;}

/* 游戏页头部 */
.game-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.back{
  border:1px solid var(--line);background:var(--paper-3);color:var(--ink);font-weight:700;
  padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-s);cursor:pointer;font-size:14px;min-height:40px;flex:none;
}
.back:hover{border-color:var(--ink-soft);}
.game-title{flex:1;font-family:var(--kai);font-size:18px;font-weight:800;color:var(--ink);text-align:center;letter-spacing:2px;}
.best{font-size:12px;color:var(--ink-soft);min-width:64px;text-align:right;}

/* 通用统计/进度 */
.stat{font-size:14px;color:var(--ink-soft);margin:6px 0;}
.stat b{color:var(--cinnabar);font-family:var(--kai);font-size:18px;}
.progress{height:6px;background:var(--paper-2);border-radius:999px;overflow:hidden;margin:6px 0 14px;border:1px solid var(--line-2);}
.progress .bar{height:100%;background:linear-gradient(90deg,var(--ink),var(--mist));transition:width .3s;}

/* 诗词展示框（宣纸卷） */
.poem-box{
  background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 18px;text-align:center;margin:8px 0;position:relative;
  animation:scrollIn .5s cubic-bezier(.2,.7,.3,1);
  overflow-wrap:anywhere;word-break:break-word;
}
@keyframes scrollIn{
  0%{opacity:0;transform:scaleX(.92);filter:blur(2px);}
  60%{opacity:1;}
  100%{opacity:1;transform:scaleX(1);filter:none;}
}
.poem-box .line{font-family:var(--kai);font-size:clamp(18px,5.4vw,23px);line-height:1.95;color:var(--ink);letter-spacing:1px;word-break:break-word;}
.poem-box .line.blank{color:var(--cinnabar);letter-spacing:clamp(3px,2vw,8px);font-weight:700;}
.qline{font-family:var(--kai);font-size:clamp(19px,5.5vw,24px);color:var(--ink);margin-top:8px;line-height:1.7;word-break:break-word;}
.hint{text-align:center;color:var(--ink-soft);font-size:13px;margin:10px 0;}

/* 选项按钮（诗签）—— 点击区≥44px */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.opt{
  font-family:var(--kai);font-size:clamp(15px,4.4vw,18px);color:var(--ink);
  background:var(--paper-3);border:1px solid var(--line);border-radius:12px;
  padding:14px 10px;cursor:pointer;transition:.15s;line-height:1.5;position:relative;
  box-shadow:var(--shadow-s);min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;
  overflow-wrap:anywhere;word-break:break-word;
}
.opt:hover:not(:disabled){background:var(--paper);border-color:var(--ink-soft);}
.opt.correct{background:var(--jade-soft);border-color:var(--jade);color:#1c5a3e;}
.opt.wrong{background:#F7E4DF;border-color:var(--cinnabar);color:#8a2c22;}
.opt:disabled{cursor:default;}

/* 朱砂印章（答对盖章；错时标“误”） */
.seal{
  position:absolute;top:-10px;right:-8px;width:30px;height:30px;line-height:30px;
  font-family:var(--kai);font-weight:800;font-size:15px;color:#fff;background:var(--cinnabar);
  border-radius:6px;transform:rotate(-8deg) scale(1.4);opacity:0;
  box-shadow:0 2px 6px rgba(178,58,46,.4);animation:stamp .4s ease forwards;z-index:2;
}
.seal.wrong{background:var(--ink-soft);}
@keyframes stamp{to{opacity:1;transform:rotate(-8deg) scale(1);}}

/* 反馈条 */
.fb{margin-top:14px;text-align:center;font-size:14px;min-height:22px;font-weight:600;}
.fb.ok{color:var(--jade);}
.fb.no{color:var(--cinnabar);}

/* 飞花令 / 接龙 输入区 */
.fh-keyword{text-align:center;font-size:16px;color:var(--ink-soft);margin-bottom:6px;}
.fh-keyword .kw{
  display:inline-block;font-family:var(--kai);font-size:clamp(22px,6vw,28px);color:var(--paper-3);
  background:var(--ink);width:clamp(42px,12vw,52px);height:clamp(42px,12vw,52px);line-height:clamp(42px,12vw,52px);border-radius:12px;margin:0 4px;
  box-shadow:var(--shadow-s);vertical-align:middle;position:relative;
}
.fh-keyword .kw::after{content:"";position:absolute;inset:4px;border:1px solid rgba(245,240,230,.4);border-radius:8px;}
.fh-timer{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:12px;}
.fh-timer b{color:var(--cinnabar);font-family:var(--kai);font-size:18px;}
.fh-input{display:flex;gap:8px;margin:10px 0;}
.fh-input input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:16px;font-family:var(--kai);outline:none;background:var(--paper-3);color:var(--ink);min-height:44px;
}
.fh-input input:focus{border-color:var(--ink-soft);box-shadow:0 0 0 3px rgba(43,43,43,.06);}
.fh-input button,.fh-actions button{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-3);font-weight:700;
  font-size:15px;padding:0 16px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow-s);white-space:nowrap;min-height:44px;
}
.fh-input button:hover,.fh-actions button:hover{background:#1c1c1c;}
.fh-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.fh-actions button{background:var(--paper-3);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-size:13px;padding:8px 14px;}
.fh-actions button:hover{border-color:var(--ink-soft);background:var(--paper);}

/* 飞花令已说列表 */
.fh-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:200px;overflow:auto;}
.fh-list .row{background:var(--paper-3);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-family:var(--kai);font-size:clamp(14px,4vw,16px);color:var(--ink);box-shadow:var(--shadow-s);animation:pop .25s ease;word-break:break-word;}
.fh-list .row.example{color:var(--ink-soft);background:var(--paper-2);border-style:dashed;}
@keyframes pop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}

/* 接龙历史 */
.chain-head{text-align:center;font-size:16px;color:var(--ink-soft);font-family:var(--kai);letter-spacing:2px;}
.chain-stat{text-align:center;font-size:14px;color:var(--ink-soft);margin:6px 0 10px;}
.chain-stat .kw{font-family:var(--kai);font-size:22px;color:var(--cinnabar);font-weight:800;}
.chain-stat b{color:var(--cinnabar);font-family:var(--kai);font-size:18px;}
.chain-list{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto;margin:8px 0;}
.chain-list .row{background:var(--paper-3);border:1px solid var(--line-2);border-left:3px solid var(--mist);border-radius:10px;padding:9px 12px;font-family:var(--kai);font-size:clamp(15px,4.2vw,17px);color:var(--ink);box-shadow:var(--shadow-s);animation:pop .25s ease;word-break:break-word;}
.chain-list .row.sys{background:var(--paper-2);border-left-color:var(--ink);}
.chain-list .row .who{font-size:11px;color:var(--cinnabar);margin-right:6px;}

/* 结果弹窗（宣纸卷轴） */
.modal-mask{
  position:fixed;inset:0;background:rgba(43,43,43,.5);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
  animation:fade .25s ease;
}
.modal-mask.show{display:flex;}
.modal{
  background:var(--paper-3);border:1px solid var(--line);border-radius:18px;padding:30px 24px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 22px 55px rgba(0,0,0,.28);animation:pop .3s ease;position:relative;
}
.modal::after{content:"";position:absolute;inset:8px;border:1px solid var(--line-2);border-radius:12px;pointer-events:none;}
.modal .big{font-size:clamp(40px,12vw,52px);}
.modal h2{margin:6px 0 4px;color:var(--ink);font-family:var(--kai);font-size:clamp(20px,6vw,24px);letter-spacing:3px;font-weight:800;}
.modal p{color:var(--ink-soft);font-size:15px;margin:6px 0;line-height:1.6;}
.modal p b{color:var(--cinnabar);font-family:var(--kai);font-size:20px;}
.modal .seal-big{
  position:absolute;top:18px;right:18px;width:46px;height:46px;line-height:46px;
  font-family:var(--kai);font-weight:800;font-size:20px;color:#fff;background:var(--cinnabar);
  border-radius:8px;transform:rotate(-10deg);box-shadow:0 3px 8px rgba(178,58,46,.4);opacity:.92;
}
.modal .mbtns{display:flex;gap:10px;margin-top:18px;}
.modal .mbtns button{flex:1;border:1px solid var(--ink);border-radius:12px;padding:12px;font-size:15px;font-weight:700;cursor:pointer;background:var(--ink);color:var(--paper-3);min-height:46px;}
.modal .mbtns .home{background:var(--paper-3);color:var(--ink);border:1px solid var(--line);}

/* ===== 手机端适配 ===== */
/* 平板/大屏手机横屏 */
@media (max-width:480px){
  .app{padding:0 12px 32px;}
  .fh-input{gap:6px;}
  .fh-input button{padding:0 14px;}
}
/* 主流手机竖屏 */
@media (max-width:420px){
  .mode-grid{gap:10px;}
  .opts{gap:8px;}
  .poem-box{padding:18px 12px;}
  .modal{padding:26px 18px;}
}
/* 小屏手机（如 iPhone SE / 360 系） */
@media (max-width:380px){
  .app{padding:0 10px 28px;}
  .mode-card{padding:14px 10px;min-height:108px;}
  .mode-card .desc{min-height:auto;}
  .poem-box{padding:16px 10px;}
  .modal{padding:24px 16px;}
  .topbar{padding:14px 2px 6px;}
}
/* 极窄屏 */
@media (max-width:340px){
  .mode-grid{gap:8px;}
  .tagline{display:none;}
  .game-title{font-size:16px;}
  .hero h1{letter-spacing:2px;}
}
/* 横屏矮高度时收起落瓣强度，避免遮挡 */
@media (max-height:480px){
  #petals{display:none;}
}