/* ================= 构成主义 · 与 decimal-practice 统一 ================= */
:root{
  --red:#E13B2E; --red-d:#C02A1F;
  --black:#171717;
  --paper:#F2ECDD; --white:#FFFDF4;
  --line:rgba(23,23,23,.14);
  --f-display:"Arial Black","Microsoft YaHei",sans-serif;
  --f-body:"Microsoft YaHei","PingFang SC",-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important;}
html,body{min-height:100%;}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--black);
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}
/* 网格纸背景 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 79px,var(--line) 79px 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,var(--line) 79px 80px);
}
/* 太阳放射（右上） */
.sun{
  position:fixed;top:-70px;right:-70px;width:300px;height:300px;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(225,59,46,.16) 0deg 5deg, transparent 5deg 11deg);
}
.sun::after{
  content:"";position:absolute;inset:36%;background:var(--red);
  border:4px solid var(--black);
}
/* 红楔（左下） */
.wedge{
  position:fixed;left:-30px;bottom:-30px;width:280px;height:280px;z-index:0;pointer-events:none;
  clip-path:polygon(0 100%,100% 100%,0 0);background:var(--red);opacity:.9;
}
/* 水印符号 */
.bgmark{position:fixed;z-index:0;pointer-events:none;font-family:var(--f-display);color:rgba(23,23,23,.055);line-height:1;user-select:none;}
.bgmark.m1{top:6%;right:14%;font-size:clamp(120px,20vw,280px);}
.bgmark.m2{bottom:4%;left:10%;font-size:clamp(100px,16vw,230px);}
.bgmark.m3{top:52%;left:56%;font-size:clamp(70px,11vw,150px);color:rgba(225,59,46,.05);}

button{font-family:inherit;cursor:pointer;color:inherit;}
input,select{font-family:inherit;}
.hidden{display:none!important;}

main{position:relative;z-index:1;}
.shell{width:min(760px,calc(100% - 24px));margin:0 auto;padding:18px 0 30px;}

/* ── 顶部 ─────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--black);color:#fff;padding:11px 16px;margin-bottom:16px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand-mark{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  background:var(--red);border:3px solid #fff;color:#fff;
  font:900 18px/1 var(--f-display);letter-spacing:-1px;
  transform:rotate(-3deg);
}
h1{margin:0;font:900 clamp(20px,4.5vw,26px)/1.1 var(--f-display);letter-spacing:.06em;white-space:nowrap;}
.brand p{margin:3px 0 0;color:#ffb3a8;font-size:12px;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-actions{display:flex;gap:7px;flex:0 0 auto;}
.round-button{
  background:var(--white);color:var(--black);border:3px solid var(--black);
  padding:7px 13px;cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.06em;
  box-shadow:3px 3px 0 rgba(0,0,0,.25);transition:transform .05s,box-shadow .05s;
}
.round-button:hover{background:#eee6cf;}
.round-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.25);}

/* ── 进度条 ───────────────────────────── */
.progress-track{height:22px;border:3px solid var(--black);background:var(--white);position:relative;overflow:hidden;}
.progress-fill{height:100%;width:0;background:var(--red);transition:width .25s;}
.progress-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 14px;flex-wrap:wrap;}
.progress-label{color:#6d685a;font-size:13px;font-weight:700;letter-spacing:.1em;white-space:nowrap;}
.filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.filter{
  border:3px solid var(--black);background:var(--white);padding:5px 11px;cursor:pointer;
  color:#6d685a;font-size:12px;font-weight:800;letter-spacing:.05em;
  box-shadow:3px 3px 0 rgba(0,0,0,.2);
}
.filter.active{background:var(--red);color:#fff;}
.filter:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.2);}
.sound-select-wrap{display:flex;align-items:center;gap:5px;color:#6d685a;font-size:12px;font-weight:700;}
.sound-select-wrap select{
  border:3px solid var(--black);background:var(--white);padding:5px 22px 5px 8px;font-size:12px;font-weight:700;
}

/* ── 主卡片 ───────────────────────────── */
.quiz-card{
  min-height:460px;padding:20px 26px 16px;background:var(--white);
  border:3px solid var(--black);box-shadow:7px 7px 0 rgba(23,23,23,.18);
  display:flex;flex-direction:column;
}
.card-heading{display:flex;justify-content:space-between;align-items:center;color:#6d685a;font-size:13px;font-weight:800;letter-spacing:.12em;}
.category-tag{background:var(--black);color:#fff;padding:4px 10px;font-size:11px;letter-spacing:.1em;transform:skewX(-6deg);}
.question-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.word-prompt{text-align:center;}
.word-title{margin:0;font:900 clamp(52px,11vw,88px)/1.05 var(--f-display);letter-spacing:.02em;}
.word-ipa{margin:16px 0 0;color:var(--red);font:800 clamp(28px,5.5vw,40px)/1.2 var(--f-display);letter-spacing:.04em;}
.word-meaning{
  display:inline-block;margin:20px 0 0;padding:9px 24px;
  background:var(--paper);color:var(--black);font-size:19px;font-weight:800;letter-spacing:.1em;
  border:3px solid var(--black);box-shadow:4px 4px 0 rgba(23,23,23,.18);
}
.listen-button{
  display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--red);
  cursor:pointer;padding:12px 18px;font-weight:800;font-size:15px;margin-top:16px;letter-spacing:.08em;
}
.listen-button:hover{text-decoration:underline;}
.listen-button.playing .speaker{animation:pulse .65s infinite alternate;}
.speaker{
  display:grid;place-items:center;width:34px;height:34px;
  border:3px solid currentColor;font-size:11px;padding-left:2px;background:var(--white);
}
@keyframes pulse{to{transform:scale(1.12);}}

.session-line{
  display:flex;align-items:center;justify-content:space-between;
  border-top:3px solid var(--black);padding-top:12px;color:#6d685a;font-size:13px;font-weight:700;
}
.session-line strong{color:var(--red);font-size:16px;}
.session-line button{border:0;background:transparent;cursor:pointer;color:#6d685a;text-decoration:underline;font-size:12px;font-weight:700;}

/* ── 底部操作 ─────────────────────────── */
.actions{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;margin-top:14px;}
.action-button{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:68px;
  border:3px solid var(--black);cursor:pointer;color:#fff;
  transition:transform .05s,box-shadow .05s;
}
.action-button:hover{filter:brightness(.95);}
.action-button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--black);}
.action-button span{font-size:18px;font-weight:900;letter-spacing:.06em;}
.action-button small{opacity:.8;font-weight:700;font-size:12px;letter-spacing:.08em;}
.unsure{background:var(--black);box-shadow:5px 5px 0 rgba(23,23,23,.25);}
.correct{background:var(--red);box-shadow:5px 5px 0 rgba(23,23,23,.25);}

/* ── 设置卡 ───────────────────────────── */
.setup-card{
  min-height:400px;padding:26px 28px;background:var(--white);
  border:3px solid var(--black);box-shadow:7px 7px 0 rgba(23,23,23,.18);
  display:flex;flex-direction:column;
}
.setup-title{
  margin:0 0 4px;font:900 27px/1.2 var(--f-display);text-align:center;letter-spacing:.1em;
}
.setup-title::after{content:"";display:block;width:64px;height:5px;background:var(--red);margin:10px auto 0;}
.setup-hint{margin:12px 0 24px;color:#6d685a;font-size:13px;text-align:center;letter-spacing:.08em;font-weight:700;}
.setup-block{margin-bottom:24px;}
.setup-block h3{
  display:inline-block;margin:0 0 12px;font-size:13px;color:#fff;letter-spacing:.18em;
  background:var(--black);padding:5px 12px;transform:skewX(-6deg);font-weight:800;
}
.count-options{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.count-option{
  border:3px solid var(--black);background:var(--white);padding:9px 20px;cursor:pointer;
  font-size:15px;font-weight:900;box-shadow:4px 4px 0 rgba(23,23,23,.18);
  transition:transform .05s,box-shadow .05s;
}
.count-option:hover{background:#eee6cf;}
.count-option:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,23,23,.18);}
.count-option.active{background:var(--red);color:#fff;}
.count-input{
  width:90px;border:3px solid var(--black);background:var(--white);padding:8px 12px;
  font-size:15px;font-weight:800;text-align:center;
}
.count-input:focus{outline:none;border-color:var(--red);}
.source-options{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.source-option{
  border:3px solid var(--black);background:var(--white);padding:8px 16px;cursor:pointer;
  font-size:13px;font-weight:900;box-shadow:4px 4px 0 rgba(23,23,23,.18);
  transition:transform .05s,box-shadow .05s;
}
.source-option:hover{background:#eee6cf;}
.source-option:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,23,23,.18);}
.source-option small{display:block;color:#8a8678;font-size:10px;font-weight:700;letter-spacing:.06em;}
.source-option.active{background:var(--black);color:#fff;box-shadow:4px 4px 0 var(--red);}
.source-option.active small{color:#ffb3a8;}
.start-button{
  margin-top:auto;border:3px solid var(--black);background:var(--red);color:#fff;
  padding:15px;font-size:19px;font-weight:900;letter-spacing:.3em;cursor:pointer;
  box-shadow:6px 6px 0 rgba(23,23,23,.25);transition:transform .05s,box-shadow .05s;
}
.start-button:hover{background:var(--red-d);}
.start-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(23,23,23,.25);}
.start-button.ghost{background:var(--paper);color:var(--black);}

/* ── 结算卡 ───────────────────────────── */
.result-card{
  min-height:400px;padding:26px 28px;background:var(--white);
  border:3px solid var(--black);box-shadow:7px 7px 0 rgba(23,23,23,.18);
}
.result-title{
  display:inline-block;margin:0 0 22px;background:var(--black);color:#fff;
  font:900 24px/1.2 var(--f-display);letter-spacing:.22em;padding:12px 26px;
  transform:skewX(-6deg);box-shadow:6px 6px 0 var(--red);
}
.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.result-stats > div{
  background:var(--white);border:3px solid var(--black);padding:14px 6px;text-align:center;
  box-shadow:5px 5px 0 rgba(23,23,23,.16);
}
.result-stats strong{display:block;font:900 26px/1.1 var(--f-display);}
.result-stats .result-ok strong{color:var(--red);}
.result-stats .result-bad strong{color:var(--red);}
.result-stats span{color:#8a8678;font-size:11px;letter-spacing:.22em;font-weight:800;}
.result-sub{margin:0 0 12px;font-size:14px;font-weight:900;letter-spacing:.1em;}
.result-sub small{color:#8a8678;font-weight:700;font-size:11px;}
.result-wrong{display:grid;gap:8px;}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;}
.result-actions .start-button{margin-top:0;}

/* ── 最近5次轮次 ──────────────────────── */
.round-item{display:grid;grid-template-columns:92px 1fr 64px;align-items:center;gap:10px;padding:8px 4px;border-bottom:3px solid var(--line);}
.round-item:last-child{border-bottom:0;}
.round-list{display:grid;gap:4px;}
.round-time{font-size:11px;color:#8a8678;font-weight:700;white-space:nowrap;}
.round-bar{height:14px;background:var(--paper);border:2px solid var(--black);overflow:hidden;}
.round-bar i{display:block;height:100%;background:var(--red);}
.round-num{font-size:12px;color:var(--black);font-weight:900;white-space:nowrap;}

/* ── 抽屉 & 弹层 ──────────────────────── */
.backdrop{position:fixed;inset:0;background:rgba(23,23,23,.5);z-index:50;display:flex;justify-content:flex-end;opacity:0;transition:opacity .2s;}
.backdrop.open{opacity:1;}
.drawer{
  width:min(420px,92vw);height:100%;background:var(--white);
  border-left:4px solid var(--black);box-shadow:-12px 0 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s;
}
.backdrop.open .drawer{transform:translateX(0);}
.drawer-head,.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black);color:#fff;padding:16px 18px 14px;
}
.drawer-head h2,.modal-head h2{margin:0;font:900 18px/1.2 var(--f-display);letter-spacing:.12em;}
.modal-head h2 small{display:block;margin-top:3px;color:#ffb3a8;font-size:11px;font-weight:700;letter-spacing:.06em;}
.drawer-close{
  border:3px solid #fff;background:transparent;color:#fff;width:34px;height:34px;
  cursor:pointer;font-size:14px;font-weight:900;
}
.drawer-close:hover{background:var(--red);border-color:var(--red);}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px 28px;}

.phoneme-group-name{margin:16px 0 8px;color:#6d685a;font-size:12px;font-weight:900;letter-spacing:.18em;}
.phoneme-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.phoneme-cell{
  border:3px solid var(--black);background:var(--white);padding:9px 2px;cursor:pointer;
  font:900 17px/1 var(--f-display);text-align:center;
  box-shadow:3px 3px 0 rgba(23,23,23,.15);transition:transform .05s;
}
.phoneme-cell:hover{background:var(--paper);}
.phoneme-cell:active{transform:translate(2px,2px) scale(.96);box-shadow:1px 1px 0 rgba(23,23,23,.15);}

.ps-tips{margin-top:22px;border-top:4px solid var(--black);padding-top:18px;display:grid;gap:12px;}
.ps-tip{
  display:flex;gap:12px;background:var(--paper);border:3px solid var(--black);
  padding:13px 14px;box-shadow:4px 4px 0 rgba(23,23,23,.15);
}
.ps-mark{
  flex:0 0 auto;align-self:flex-start;margin-top:1px;padding:4px 8px;
  background:var(--red);color:#fff;font:900 12px/1 var(--f-display);letter-spacing:.1em;
}
.ps-tip p{margin:0;font-size:13px;line-height:1.7;}
.ps-tip strong{color:var(--red);}

/* ── 报告弹层 ─────────────────────────── */
.backdrop.modal-backdrop{justify-content:center;align-items:center;padding:16px;}
.modal{
  width:min(560px,100%);max-height:88vh;background:var(--white);
  border:4px solid var(--black);box-shadow:10px 10px 0 rgba(0,0,0,.3);
  display:flex;flex-direction:column;transform:scale(.96);transition:transform .2s;
}
.backdrop.open .modal{transform:scale(1);}
.modal-body{flex:1;overflow-y:auto;padding:18px 22px 26px;}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.report-grid > div{
  background:var(--white);border:3px solid var(--black);padding:12px 8px;text-align:center;
  box-shadow:4px 4px 0 rgba(23,23,23,.14);
}
.report-grid strong{display:block;font:900 24px/1.1 var(--f-display);}
.report-grid span{color:#8a8678;font-size:11px;letter-spacing:.2em;font-weight:800;}
.report-sub{margin:22px 0 10px;font-size:14px;font-weight:900;letter-spacing:.1em;}
.report-sub small{color:#8a8678;font-weight:700;font-size:11px;}
.days-chart{display:flex;align-items:flex-end;gap:8px;height:100px;border-bottom:3px solid var(--black);padding-bottom:4px;}
.day-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:100%;}
.day-bar{width:100%;max-width:32px;background:var(--red);border:2px solid var(--black);min-height:3px;}
.day-count{font-size:10px;color:#8a8678;font-weight:700;}
.day-label{font-size:10px;color:#8a8678;font-weight:700;}
.weak-list,.review-list{display:grid;gap:8px;}
.weak-item{
  display:grid;grid-template-columns:56px 1fr 76px;align-items:center;gap:8px;
  border:3px solid var(--black);background:var(--white);padding:8px 10px;cursor:pointer;text-align:left;
  box-shadow:3px 3px 0 rgba(23,23,23,.12);transition:transform .05s;
}
.weak-item:hover{background:var(--paper);}
.weak-item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,23,23,.12);}
.weak-sym{font:900 15px/1 var(--f-display);color:var(--red);}
.weak-bar{height:14px;background:var(--paper);border:2px solid var(--black);overflow:hidden;}
.weak-bar i{display:block;height:100%;background:var(--red);}
.weak-num{font-size:11px;color:#8a8678;font-weight:700;white-space:nowrap;}
.review-item{
  display:flex;align-items:center;gap:9px;
  border:3px solid var(--black);background:var(--white);padding:8px 11px;cursor:pointer;text-align:left;
  box-shadow:3px 3px 0 rgba(23,23,23,.12);transition:transform .05s;
}
.review-item:hover{background:var(--paper);}
.review-item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,23,23,.12);}
.review-word{font:900 14px/1 var(--f-display);}
.review-sound{color:#6d685a;font:800 12px/1 var(--f-display);}
.review-badge{
  margin-left:auto;font-size:10px;color:#fff;background:var(--red);
  padding:3px 8px;font-weight:800;letter-spacing:.05em;
}
.empty-note{margin:0;color:#8a8678;font-size:12px;font-weight:700;letter-spacing:.06em;}
.clear-btn{
  display:block;margin:22px auto 0;border:3px solid var(--black);background:var(--white);
  color:#6d685a;padding:9px 18px;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.1em;
  box-shadow:4px 4px 0 rgba(23,23,23,.15);transition:transform .05s;
}
.clear-btn:hover{background:var(--paper);}
.clear-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,23,23,.15);}
.report-offline{margin:0;color:var(--red);font-size:12px;line-height:1.6;font-weight:700;}

/* ── PIN 弹层 ─────────────────────────── */
.pin-modal{width:min(380px,100%);}
.pin-hint{margin:0 0 18px;color:#6d685a;font-size:12px;line-height:1.7;font-weight:700;}
.pin-input{
  width:100%;border:4px solid var(--black);background:var(--white);padding:13px 16px;
  font-size:22px;letter-spacing:.4em;text-align:center;font-weight:900;
}
.pin-input:focus{outline:none;border-color:var(--red);}
.pin-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:18px;}
.pin-actions .start-button{padding:13px;font-size:15px;letter-spacing:.15em;}

/* ── toast ────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--black);color:#fff;padding:11px 20px;opacity:0;pointer-events:none;
  transition:.2s;font-size:13px;font-weight:700;letter-spacing:.06em;z-index:99;
  border:3px solid #fff;box-shadow:5px 5px 0 rgba(0,0,0,.3);
}
.toast.show{opacity:1;transform:translate(-50%,0);}

@media (max-width: 660px){
  .shell{width:min(100% - 16px,760px);padding-top:10px;}
  .brand p{display:none;}
  .brand-mark{width:38px;height:38px;}
  .top-actions .round-button{padding:6px 9px;font-size:12px;border-width:2px;}
  .quiz-card{min-height:420px;padding:16px 16px 14px;box-shadow:5px 5px 0 rgba(23,23,23,.18);}
  .setup-card,.result-card{min-height:380px;padding:22px 18px;box-shadow:5px 5px 0 rgba(23,23,23,.18);}
  .result-stats{grid-template-columns:repeat(2,1fr);gap:9px;}
  .word-title{font-size:54px;}
  .word-ipa{font-size:30px;}
  .word-meaning{font-size:17px;padding:7px 18px;}
  .actions{grid-template-columns:1fr 1.4fr;}
  .action-button{min-height:64px;border-width:3px;}
  .action-button span{font-size:16px;}
  .action-button small{font-size:10px;}
  .phoneme-grid{grid-template-columns:repeat(5,1fr);}
  .topbar{padding:10px 12px;}
}