* { box-sizing: border-box; }
:root {
  --ink:#49351f; --muted:#786a58; --paper:#fffdf8; --line:#e4d6bf;
  --blue:#dceefe; --blue-strong:#347fb4; --green:#def3e6; --green-strong:#43865e;
  --yellow:#fff0bd; --yellow-strong:#a77718; --accent:#815f31;
}
html, body { margin:0; min-height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--ink); background:linear-gradient(#f7f0e4,#ead7b4);
}
button { font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:4px solid #1677c8; outline-offset:3px; }
.app-shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:14px 20px 22px; }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; }
.brand { margin:0; font-size:13px; font-weight:800; letter-spacing:.08em; color:#745737; }
.topbar h1 { margin:2px 0 0; font-size:25px; }
.small-button,.secondary-button {
  border:2px solid #b99b72; background:#fffaf0; border-radius:13px; padding:10px 18px; font-weight:800;
}
.screen { display:none; }
.screen.active { display:block; }
.hidden { display:none !important; }
.panel {
  background:rgba(255,253,248,.96); border:2px solid #decdb4; border-radius:24px;
  box-shadow:0 8px 22px rgba(82,57,25,.09);
}
.title-panel { padding:22px 28px 26px; text-align:center; }
.subject-label { margin:0; font-size:14px; font-weight:800; color:#77552e; }
.title-panel h2,.setting-panel h2,.result-panel h2 { margin:6px 0; font-size:28px; }
.lead { margin:4px 0 18px; color:var(--muted); }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mode-card {
  min-height:300px; border:3px solid transparent; border-radius:22px; padding:22px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  cursor:pointer; transition:.15s transform,.15s box-shadow;
}
.mode-card:active { transform:scale(.98); }
.mode-card:hover { box-shadow:0 8px 18px rgba(50,40,20,.12); }
.mode-card.elapsed { background:var(--blue); border-color:#9bc5e5; }
.mode-card.target { background:var(--green); border-color:#9bcfae; }
.mode-card.practice { background:var(--yellow); border-color:#e3c46d; }
.mode-name { font-size:22px; font-weight:900; }
.mode-description { font-size:15px; line-height:1.6; color:#5e554a; }
.mode-visual { min-height:112px; display:flex; align-items:center; justify-content:center; gap:12px; }
.mode-arrow { font-weight:900; font-size:22px; }
.challenge-mark {
  width:110px; height:110px; min-height:110px; border-radius:50%; background:#fff9df;
  border:8px solid #d5a832; font-size:54px; font-weight:900;
}
.mini-clock {
  position:relative; width:90px; height:90px; border:6px solid #4a6680; border-radius:50%; background:#fff;
}
.mini-clock::before,.mini-clock i {
  content:""; position:absolute; left:50%; bottom:50%; width:4px; border-radius:4px;
  background:#35495d; transform-origin:bottom;
}
.mini-clock::before { height:27px; transform:translateX(-50%) rotate(25deg); }
.mini-clock i { height:34px; transform:translateX(-50%) rotate(135deg); }
.mini-clock.late::before { transform:translateX(-50%) rotate(105deg); }
.setting-panel { width:min(900px,100%); margin:auto; padding:26px 30px; }
.step-heading { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.step-heading h2,.step-heading p { margin:0; }
.step-heading p { color:var(--muted); margin-top:3px; }
.step-number {
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%;
  background:#75552d; color:#fff; font-size:23px; font-weight:900;
}
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.choice-card {
  min-height:150px; padding:18px 12px; border:3px solid #dac8ad; border-radius:18px;
  background:#fff; display:flex; flex-direction:column; gap:8px; align-items:center; cursor:pointer;
}
.choice-card strong { font-size:20px; }
.choice-card span { color:var(--muted); font-size:14px; }
.choice-card em { margin-top:auto; font-style:normal; font-size:23px; font-weight:900; }
.choice-card.selected { border-color:#3a82b6; background:#e9f5ff; box-shadow:0 0 0 3px rgba(58,130,182,.15); }
.sub-setting { margin-top:18px; text-align:center; }
.sub-setting h3 { margin:0 0 9px; }
.segmented { display:inline-flex; padding:4px; gap:4px; border-radius:13px; background:#eadfce; }
.segmented button { border:0; background:transparent; border-radius:10px; padding:9px 18px; font-weight:800; }
.segmented button.selected { background:#fff; box-shadow:0 2px 6px rgba(50,30,10,.12); }
.primary-button {
  border:0; border-radius:15px; background:#72542f; color:#fff; padding:13px 28px;
  font-weight:900; font-size:18px; box-shadow:0 4px 0 #4e371e; cursor:pointer;
}
.primary-button:disabled { opacity:.35; box-shadow:none; cursor:not-allowed; }
.setting-panel > .primary-button { display:block; min-width:220px; margin:22px auto 0; }
.play-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr); gap:17px; }
.problem-panel,.answer-panel {
  background:rgba(255,253,248,.97); border:2px solid #decdb4; border-radius:22px; padding:17px;
}
.problem-topline { display:flex; justify-content:space-between; gap:10px; font-weight:900; }
#progressText { background:#efe2cc; border-radius:999px; padding:6px 12px; }
#modeBadge { color:#695136; }
#questionText { margin:12px 6px 7px; text-align:center; font-size:22px; line-height:1.45; min-height:62px; }
.clock-area { min-height:230px; display:flex; align-items:center; justify-content:center; gap:24px; }
.clock-card { text-align:center; }
.clock-card p { margin:4px 0; font-weight:900; }
.clock-card canvas { width:190px; height:190px; max-height:31vh; }
.between-arrow { font-size:34px; font-weight:900; }
.hint-toggle {
  display:block; margin:3px auto 0; border:2px solid #b99b72; border-radius:13px;
  background:#fff8eb; padding:9px 17px; font-weight:900;
}
.hint-panel { margin-top:11px; padding:12px; border-radius:15px; background:#f3eadc; }
.hint-head { display:flex; justify-content:space-between; align-items:center; }
.hint-head button { border:1px solid #ad9575; background:#fff; border-radius:9px; padding:6px 10px; }
.hint-clock-row { display:flex; justify-content:center; align-items:center; gap:10px; }
.hint-clock-row canvas { width:150px; height:150px; }
.hint-buttons { display:flex; flex-direction:column; gap:8px; }
.hint-buttons button { min-width:75px; border:1px solid #bca27f; background:#fff; border-radius:10px; padding:8px 6px; font-weight:800; }
.hint-panel p { margin:3px 0 0; text-align:center; font-size:13px; color:var(--muted); }
.answer-panel { display:flex; flex-direction:column; justify-content:center; align-items:stretch; }
.answer-label { text-align:center; margin:0 0 10px; font-size:18px; font-weight:900; }
.answer-ampm { margin:0 auto 13px; }
.value-control {
  display:grid; grid-template-columns:55px 58px minmax(70px,1fr) 58px; align-items:center; gap:8px;
  margin:7px 0; padding:10px; background:#f5ede1; border-radius:16px;
}
.minute-control { grid-template-columns:45px 1fr 72px 1fr; }
.unit-name { font-weight:900; text-align:center; }
.value-control strong {
  min-height:61px; display:grid; place-items:center; border-radius:13px; background:#fff;
  border:2px solid #dfcdb3; font-size:31px;
}
.value-control button {
  min-height:50px; border:0; border-radius:12px; background:#d9eafb; font-weight:900; font-size:19px;
}
.adjust-pair { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.minute-control .adjust-pair button { padding:0; font-size:15px; }
.feedback { min-height:47px; margin:10px 0 4px; display:grid; place-items:center; text-align:center; font-weight:900; }
.feedback.correct { color:#287047; }
.feedback.wrong { color:#a33c2e; }
.answer-panel .primary-button { width:100%; }
.result-panel { width:min(650px,100%); margin:55px auto; padding:35px; text-align:center; }
.result-panel h2 { font-size:34px; }
.result-actions { display:flex; justify-content:center; gap:12px; margin-top:24px; }

@media (max-width: 820px), (max-height: 650px) {
  .app-shell { padding:8px 12px 14px; }
  .topbar { height:56px; }
  .topbar h1 { font-size:20px; }
  .title-panel { padding:13px 18px 17px; }
  .title-panel h2 { font-size:24px; }
  .mode-card { min-height:220px; padding:12px; }
  .mode-visual { min-height:85px; }
  .mini-clock { width:70px; height:70px; }
  .challenge-mark { width:82px; height:82px; min-height:82px; font-size:40px; border-width:6px; }
  .mode-name { font-size:18px; }
  .mode-description { font-size:13px; }
  .play-layout { grid-template-columns:minmax(0,1.45fr) minmax(285px,.75fr); }
  .problem-panel,.answer-panel { padding:11px; }
  #questionText { font-size:18px; min-height:49px; margin:7px 4px; }
  .clock-area { min-height:180px; }
  .clock-card canvas { width:155px; height:155px; }
  .hint-clock-row canvas { width:120px; height:120px; }
}
@media (max-width: 650px) {
  .mode-grid,.choice-grid,.play-layout { grid-template-columns:1fr; }
  .mode-card { min-height:190px; }
  .play-layout { gap:10px; }
  .clock-area { gap:8px; }
  .clock-card canvas { width:135px; height:135px; }
}