/* 偏差値バトル（ranktest）— C案：白×フラット */
:root{
  --bg:#FFFFFF;--surface:#F5F6F8;--surface2:#F2F4F6;--line:#ECEEF1;--line2:#E3E6EA;
  --ink:#20242A;--sub:#8B9199;--accent:#2BB3A3;--green:#7DBE4E;--green-ink:#5FA83A;--ok-ink:#3E7F22;
  --coral:#EF5A5F;--amber:#F5B935;--silver:#B8BEC6;--bronze:#D9A066;--line-green:#06C755;
  --jp:'Zen Kaku Gothic New',system-ui,-apple-system,'Hiragino Sans',sans-serif;
  --num:'Outfit','Zen Kaku Gothic New',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--jp);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a{color:var(--ink)}
button{font:inherit;color:inherit}
svg path,svg line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.rt-shell{max-width:430px;min-height:100vh;min-height:100svh;margin:0 auto;display:flex;flex-direction:column;
  padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}
.rt-push{margin-top:auto;padding-top:24px}
.rt-stack{display:flex;flex-direction:column;gap:10px}
.rt-center{text-align:center}
.rt-muted{color:var(--sub)}
.rt-ink{color:var(--ink)}
.rt-accent{color:var(--accent)}
.rt-ng{color:var(--coral)}
.rt-small{font-size:13px}
.rt-num{font-family:var(--num);font-weight:600}
.rt-mt-sm{margin-top:8px}.rt-mt-md{margin-top:22px}.rt-gap-lg{height:24px}
.rt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rt-bg-accent{background:var(--accent)}.rt-bg-green{background:var(--green)}.rt-bg-amber{background:var(--amber)}.rt-bg-coral{background:var(--coral)}

.rt-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rt-brand{font-size:17px;font-weight:700;letter-spacing:.04em}
.rt-h1{font-size:30px;font-weight:700;line-height:1.3;margin:2px 0}
.rt-h2{font-size:26px;font-weight:700;line-height:1.35;margin:4px 0 0}
.rt-h3{font-size:15px;font-weight:700}
.rt-back{font-size:14px;color:var(--sub);text-decoration:none;align-self:flex-start;padding:4px 0}
.rt-divider{border:0;height:1px;background:var(--line);margin:24px 0;width:100%}
.rt-error{color:var(--coral);font-weight:700;font-size:14px;margin:16px 0 0}
.rt-note{background:var(--surface);border-radius:16px;padding:12px 14px;font-size:12px;line-height:1.7;color:var(--sub);margin:0}
.rt-note b{color:var(--ink)}
.rt-foot{text-align:center;font-size:12px;color:var(--sub);margin:28px 0 0}

/* ボタン */
.rt-btn{display:block;width:100%;text-align:center;text-decoration:none;border:0;cursor:pointer;
  background:var(--ink);color:#FFF;font-size:16px;font-weight:700;padding:17px;border-radius:999px}
.rt-btn:disabled{opacity:.35;cursor:default}
.rt-btn--accent{background:var(--accent)}
.rt-btn--green{background:var(--green)}
.rt-btn--line{background:var(--line-green);font-size:15px}
.rt-btn--ghost{background:#FFF;color:var(--ink);border:1.5px solid var(--line2);font-size:14px;padding:14px}
.rt-btn--small{width:auto;display:inline-block;font-size:15px;padding:14px 28px}
.rt-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rt-btn:focus-visible,.rt-choice:focus-visible,.rt-circle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ホーム */
.rt-invite{display:flex;flex-direction:column;gap:4px;margin-top:36px}
.rt-invite__line{font-size:18px;font-weight:700}
.rt-invite__line .rt-num{font-size:22px}
.rt-exam{display:flex;flex-direction:column;gap:6px}
.rt-resume{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;
  background:var(--surface);border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.6}
.rt-resume__arrow{font-size:20px}
.rt-circles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
.rt-circle{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.rt-circle__dot{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;transition:transform .12s}
.rt-circle:active .rt-circle__dot{transform:scale(.94)}
.rt-circle__label{font-size:15px;font-weight:700}
.rt-circle__sub{font-size:12px;color:var(--sub);margin-top:-6px}
.rt-circle.is-off{cursor:default}
.rt-circle.is-off .rt-circle__dot{background:var(--surface2);color:#C9CED4}

/* フォーム */
.rt-form{display:flex;flex-direction:column;flex:1}
.rt-field{display:flex;flex-direction:column;gap:8px;margin:24px 0 0;border:0;padding:0;min-width:0}
.rt-label{font-size:13px;font-weight:700;color:var(--sub);padding:0}
.rt-input{width:100%;height:54px;border-radius:16px;border:1.5px solid var(--line2);background:#FFF;color:var(--ink);
  font:700 17px var(--jp);padding:0 16px;appearance:none;-webkit-appearance:none}
.rt-input:focus{outline:0;border-color:var(--accent)}
.rt-inputwrap{position:relative;display:block}
.rt-inputwrap .rt-input{padding-right:56px}
.rt-count{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--sub);font-weight:500}
.rt-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238B9199' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;font-size:16px}
.rt-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;background:var(--surface2);border-radius:999px;padding:4px}
.rt-seg__opt{position:relative;display:block;text-align:center;text-decoration:none;cursor:pointer}
.rt-seg__opt input{position:absolute;opacity:0;inset:0;margin:0}
.rt-seg__opt span{display:block;font-size:15px;font-weight:700;border-radius:999px;padding:11px 0;color:var(--sub)}
.rt-seg__opt input:checked+span,.rt-seg__opt.is-on span{background:#FFF;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.rt-seg__opt input:focus-visible+span{outline:2px solid var(--accent)}
.rt-seg__opt.is-disabled span{color:#C9CED4;cursor:default}

/* 準備 */
.rt-rules{list-style:none;margin:14px 0 0;padding:0}
.rt-rules li{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid #F0F1F3}
.rt-rules__icon{width:40px;height:40px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rt-rules b{display:block;font-size:15px}
.rt-rules small{display:block;font-size:12px;color:var(--sub)}

/* 問題 */
.rt-qhead{display:flex;justify-content:space-between;align-items:center}
.rt-qhead>*{flex:1}
.rt-qhead__n{color:var(--ink);font-size:20px}
.rt-ring{position:relative;flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center}
.rt-ring svg{position:absolute;inset:0}
.rt-ring circle{fill:none;stroke-width:4}
.rt-ring__bg{stroke:var(--line)}
.rt-ring__fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:113.1 113.1;transform:rotate(-90deg);transform-origin:23px 23px;transition:stroke-dasharray .25s linear}
.rt-ring.is-low .rt-ring__fg{stroke:var(--coral)}
.rt-ring.is-done .rt-ring__fg{display:none}
.rt-ring__sec{font-size:16px}
.rt-combo{text-align:right;font-size:13px;font-weight:700;color:var(--sub)}
.rt-combo.is-on{color:var(--green-ink)}
.rt-progress{height:3px;background:var(--line);border-radius:999px;margin-top:14px}
.rt-progress div{height:3px;background:var(--ink);border-radius:999px}
.rt-stem{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.rt-stem__text{font-size:22px;font-weight:700;line-height:1.6;margin:0;overflow-wrap:anywhere}
.rt-listen{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rt-play{width:100px;height:100px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.rt-play path{fill:#FFF;stroke:none}
.rt-play:disabled{opacity:.35}
.rt-play.is-playing{animation:rt-pulse 1s ease-in-out infinite}
@keyframes rt-pulse{50%{transform:scale(.95)}}
.rt-answer{margin-top:32px}
.rt-choices{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.rt-answer .rt-choices{margin-top:0}
.rt-choice{width:100%;min-height:58px;border-radius:29px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#FFF;color:var(--ink);border:1.5px solid var(--line2);font-size:17px;font-weight:700;text-align:left;cursor:pointer;line-height:1.4}
button.rt-choice:active{background:var(--surface)}
.rt-choice svg{flex-shrink:0}
.rt-choice svg path{stroke-width:2.6}
.rt-choice.is-ok{background:var(--green);color:#FFF;border-color:var(--green);animation:rt-pop .28s ease-out}
.rt-choice.is-okline{color:var(--ok-ink);border:2px solid var(--green)}
.rt-choice.is-okline svg{color:var(--green-ink)}
.rt-choice.is-ng{background:var(--coral);color:#FFF;border-color:var(--coral);animation:rt-shake .3s ease-out}
.rt-choice.is-dim{opacity:.4}
@keyframes rt-pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes rt-shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.rt-spell{display:flex;gap:10px}
.rt-spell__input{flex:1;height:58px;font:500 24px var(--num);letter-spacing:.04em;border-color:var(--accent)}
.rt-spell__go{width:58px;height:58px;flex-shrink:0;border-radius:50%;border:0;background:var(--ink);color:#FFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.rt-spell__go path{stroke-width:2.4}
.rt-answer>.rt-small{display:block;margin-top:8px}
.rt-spellres{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.rt-spellres__row{display:flex;flex-direction:column;gap:2px;border-radius:16px;padding:12px 16px;border:1.5px solid var(--line2)}
.rt-spellres__row .rt-num{font-size:22px}
.rt-spellres__row.is-ok{border-color:var(--green)}.rt-spellres__row.is-ok .rt-num{color:var(--ok-ink)}
.rt-spellres__row.is-ng{border-color:var(--coral)}.rt-spellres__row.is-ng .rt-num{color:var(--coral)}
.rt-explain{margin-top:22px;background:var(--surface);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.7}
.rt-feedback{display:flex;justify-content:space-between;align-items:center}
.rt-feedback__word{font-size:20px;font-weight:700}
.rt-feedback__word.is-ok{color:var(--green-ink)}.rt-feedback__word.is-ng{color:var(--coral)}

/* 結果 */
.rt-score{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:2px}
.rt-score__big{font-size:92px;line-height:1;letter-spacing:-.02em}
.rt-tag{margin-top:10px;font-size:12px;font-weight:700;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:4px 12px}
.rt-curve{width:100%;height:auto;margin-top:20px;display:block}
.rt-curve__area{fill:var(--surface2);stroke:none!important}
.rt-curve__line{stroke:#C9CED4!important;stroke-width:1.5!important}
.rt-curve__mark{stroke:var(--accent)!important;stroke-width:2!important}
.rt-curve__dot{fill:var(--accent)}
.rt-curve+p{margin:6px 0 0}
.rt-stats{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.rt-stats>div{display:flex;flex-direction:column;gap:2px}
.rt-stats>div+div{border-left:1px solid var(--line)}
.rt-stats__v{font-size:22px}
.rt-stats__v small{font-size:14px;color:var(--sub);font-weight:500}
.rt-goal{text-align:center;font-size:13px;font-weight:700;margin:10px 0 0}
.rt-stats+p{margin:10px 0 0}
.rt-weak{margin-top:20px;border-top:1px solid var(--line)}
.rt-weak__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}
.rt-weak__row>span:first-child{display:flex;flex-direction:column;gap:2px;font-size:15px}
.rt-weak__row .rt-ng{flex-shrink:0}

/* ランキング */
.rt-rank{list-style:none;margin:20px 0 0;padding:0}
.rt-rank__row{display:flex;align-items:center;gap:14px;height:50px;padding:0 10px;border-bottom:1px solid #F0F1F3}
.rt-rank__row.is-me{background:var(--surface);border-radius:14px;border-bottom:0}
.rt-medal{width:30px;height:30px;border-radius:50%;color:#FFF;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rt-medal--1{background:var(--amber)}.rt-medal--2{background:var(--silver)}.rt-medal--3{background:var(--bronze)}
.rt-rank__n{width:30px;text-align:center;font-weight:500;color:var(--sub);flex-shrink:0}
.rt-rank__name{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rt-rank__v{margin-left:auto;font-size:16px;flex-shrink:0}
.rt-rank__v small{font-size:12px;color:var(--sub);font-weight:500}
.rt-rank__gap{text-align:center;color:var(--sub);font-size:13px;padding:6px 0}
.rt-empty{padding:40px 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}