/* 不動産タイピング
   深いネイビー＋ゴールド。見出しと出題は明朝、UIはゴシック。 */

:root{
  --bg:#0b1017;
  --bg2:#0f1620;
  --panel:#131c27;
  --panel2:#18222f;
  --line:rgba(201,162,74,.18);
  --line2:rgba(233,230,223,.10);
  --gold:#c9a24a;
  --gold-l:#e3c47c;
  --ink:#eae7df;
  --muted:#93a0b0;
  --warn:#d98070;
  --ok:#8fbf9a;
  --serif:"Noto Serif JP",'Yu Mincho','Hiragino Mincho ProN',serif;
  --sans:"Noto Sans JP",'Yu Gothic UI','Hiragino Sans',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;color:var(--ink);
  font-family:var(--sans);font-weight:400;
  line-height:1.8;letter-spacing:.04em;
  overflow-wrap:anywhere;line-break:strict;
  -webkit-text-size-adjust:100%;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(201,162,74,.10) 0%, transparent 60%),
    radial-gradient(700px 400px at 5% 10%, rgba(80,120,170,.10) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
}

.hidden{display:none !important}

/* ---------- ヘッダー ---------- */
.site-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  max-width:1000px;margin:0 auto;padding:16px 20px;
  border-bottom:1px solid var(--line2);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:30px;height:28px;display:block;flex:none}
.brand-mark svg{width:30px;height:28px;display:block}
.brand-text{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.14em;white-space:nowrap}
.head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hd-user{font-weight:500;font-size:14px}
.hd-score{font-size:13px;color:var(--gold-l);letter-spacing:.08em;white-space:nowrap}

.screen{display:none;max-width:1000px;margin:0 auto;padding:26px 20px 60px}
.screen.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 部品 ---------- */
.btn{
  font:inherit;font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.08em;
  cursor:pointer;color:var(--ink);background:transparent;
  border:1px solid var(--line2);border-radius:2px;padding:10px 20px;
  transition:border-color .2s, color .2s, background .2s;
}
.btn:hover{border-color:var(--gold);color:var(--gold-l)}
.btn-quiet{border-color:transparent;color:var(--muted);padding:8px 12px}
.btn-quiet:hover{color:var(--gold-l)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border-color:var(--gold);color:#17202b;font-weight:700;
}
.btn-gold:hover{color:#17202b;filter:brightness(1.06)}
.btn-gold:disabled{opacity:.5;cursor:default}
.btn-wide{width:100%;padding:14px}
.btn-start{display:block;width:100%;max-width:340px;margin:30px auto 0;padding:16px;font-size:16px;letter-spacing:.2em}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2);border-top:1px solid var(--line);
  padding:22px 24px;margin:18px 0;
}
.panel.dim{opacity:.7}
.sec-title{
  font-family:var(--serif);font-size:15px;font-weight:600;
  letter-spacing:.2em;margin:0 0 16px;color:var(--gold-l);
}
.hint{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.7}

.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font:inherit;font-size:14px;letter-spacing:.06em;cursor:pointer;
  background:transparent;color:var(--muted);
  border:1px solid var(--line2);border-radius:2px;padding:9px 20px;
  transition:.2s;
}
.chip:hover{border-color:var(--gold);color:var(--gold-l)}
.chip.active{background:rgba(201,162,74,.14);border-color:var(--gold);color:var(--gold-l)}

.switch{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer;padding:8px 4px}
.switch input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer}

/* ---------- トップ ---------- */
.hero{padding:30px 0 10px;text-align:center}
.hero-kicker{font-size:11px;letter-spacing:.44em;color:var(--gold);margin:0 0 14px}
.hero-title{
  font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.5;
  letter-spacing:.08em;margin:0 0 18px;
}
.hero-lead{font-size:14px;color:var(--muted);line-height:2;margin:0}

.auth-card{
  max-width:460px;margin:34px auto 0;padding:26px 28px 28px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2);border-top:2px solid var(--gold);
}
.tabs{display:flex;gap:0;margin:-4px 0 22px;border-bottom:1px solid var(--line2)}
.tab{
  font:inherit;font-size:14px;letter-spacing:.1em;cursor:pointer;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);padding:10px 18px;margin-bottom:-1px;
}
.tab.active{color:var(--gold-l);border-bottom-color:var(--gold)}

.field{display:block;margin-bottom:20px}
.field-label{display:block;font-size:12px;letter-spacing:.14em;color:var(--gold-l);margin-bottom:8px}
.field input{
  width:100%;font:inherit;font-size:17px;letter-spacing:.1em;
  background:#0b1119;color:var(--ink);
  border:1px solid var(--line2);border-radius:2px;padding:12px 14px;outline:none;
}
.field input:focus{border-color:var(--gold)}
#inPin{letter-spacing:.6em;font-size:20px}
.field-help{display:block;font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.75}
.field-help.warn{color:#d9b58a}
.field-help b{color:var(--gold-l);font-weight:700}

.auth-note{min-height:22px;margin:4px 0 12px;font-size:13px}
.auth-note.ng{color:var(--warn)}
.auth-note.ok{color:var(--muted)}
.auth-sub{font-size:11.5px;color:var(--muted);text-align:center;margin:14px 0 0}

.teaser{max-width:760px;margin:46px auto 0}
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line2)}
.teaser-grid>div{background:var(--bg2);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.teaser-grid b{font-family:var(--serif);font-size:13px;letter-spacing:.16em;color:var(--gold)}
.teaser-grid span{font-size:13px;color:var(--muted);line-height:1.8}

/* ---------- このサイトについて ---------- */
.about{max-width:760px;margin:44px auto 0;padding:26px 28px;border-top:1px solid var(--line)}
.about p{font-size:14px;line-height:2.1;color:var(--muted);margin:0 0 16px}
.about-list{
  display:grid;grid-template-columns:auto 1fr;gap:10px 22px;
  margin:22px 0 0;font-size:13.5px;
}
.about-list dt{color:var(--gold);letter-spacing:.12em;font-size:12px;padding-top:2px}
.about-list dd{margin:0;color:var(--ink)}
.about-list a{color:var(--gold-l)}
.foot-credit{margin-top:8px !important;letter-spacing:.1em}

/* ---------- レベル ---------- */
.level-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.lv-btn{
  font:inherit;font-family:var(--serif);font-size:22px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--muted);
  border:1px solid var(--line2);border-radius:2px;padding:16px 0;
  transition:.2s;
}
.lv-btn:hover{border-color:var(--gold);color:var(--gold-l)}
.lv-btn.active{background:rgba(201,162,74,.14);border-color:var(--gold);color:var(--gold-l)}
.lv-btn.lv-hard{border-style:dashed}
.level-desc{margin:16px 0 0;font-size:13.5px;color:var(--muted);letter-spacing:.08em}

/* ---------- ゲーム ---------- */
.hud{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hud-item{
  display:flex;flex-direction:column;align-items:center;min-width:72px;
  border:1px solid var(--line2);padding:7px 12px;background:rgba(255,255,255,.02);
}
.hud-label{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.hud-value{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.2}
.hud-value.warn{color:var(--warn)}
.hud .btn-quiet{margin-left:auto}

.timer-track{height:3px;background:rgba(255,255,255,.07);margin:16px 0 0}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .1s linear}

.stage{
  position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2);border-top:1px solid var(--line);
  padding:28px 26px 10px;margin:18px 0;text-align:center;min-height:260px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;
}
.stage.shake{animation:shake .2s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.stage.clear{border-top-color:var(--gold)}

.word-cat{font-size:11px;letter-spacing:.24em;color:var(--gold)}
.word-ruby{font-size:16px;letter-spacing:.14em;color:var(--muted)}
.word{
  font-family:var(--serif);font-size:42px;font-weight:600;
  letter-spacing:.1em;line-height:1.55;
}
.word-long{font-size:26px;letter-spacing:.06em}
.k-done{color:#5d6b7c}
.k-todo{color:var(--ink)}
.word-ruby .k-todo{color:var(--muted)}

.romaji{
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:22px;letter-spacing:.14em;margin-top:2px;
}
.r-done{color:#4d5a6b}
.r-cur{color:#17202b;background:var(--gold-l);padding:2px 7px;border-radius:2px}
.r-rest{color:var(--muted)}

/* ---------- 走路 ---------- */
.lane{position:relative;height:86px;margin:6px 4px 0}
.lane-road{
  position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent);
}
.lane-road::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(233,230,223,.10) 0 10px,transparent 10px 22px);
}
.walker{position:absolute;left:0;bottom:9px;line-height:0;will-change:transform}
.walker .rn{display:block;overflow:visible;animation:bob .34s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(-1deg)}}

.rn-leg{transform-box:fill-box;transform-origin:50% 8%;animation:stride .34s ease-in-out infinite}
.rn-leg.b{animation-delay:-.17s}
@keyframes stride{0%,100%{transform:rotate(34deg)}50%{transform:rotate(-34deg)}}

.rn-arm{transform-box:fill-box;transform-origin:50% 10%;animation:swing .34s ease-in-out infinite}
.rn-arm.a{animation-delay:-.17s}
@keyframes swing{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(26deg)}}

.rn-head{transform-box:fill-box;transform-origin:50% 100%;animation:nod .68s ease-in-out infinite}
@keyframes nod{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

.walker.arrive .rn{animation:arrive .4s ease-out}
.walker.arrive .rn-leg,.walker.arrive .rn-arm,.walker.arrive .rn-head{animation:none}
@keyframes arrive{0%{transform:translateY(0)}45%{transform:translateY(-16px)}100%{transform:translateY(0)}}

.goal{position:absolute;right:0;bottom:7px;line-height:0;opacity:.92}
.goal svg{display:block}

.timeout-toast{
  position:absolute;left:50%;top:32%;transform:translateX(-50%);z-index:4;
  font-family:var(--serif);font-size:18px;letter-spacing:.2em;
  color:var(--warn);border:1px solid var(--warn);padding:8px 22px;background:rgba(12,17,24,.9);
  animation:toast .8s ease-out;
}
@keyframes toast{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px)}}

.ime-warn{
  text-align:center;font-size:13px;color:#d9b58a;
  border:1px solid rgba(201,162,74,.3);padding:12px;margin:16px auto;max-width:620px;
}

/* ---------- キーボード ---------- */
.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;user-select:none;margin-top:6px}
.kb-row{display:flex;gap:6px}
.kb-row-1{margin-left:18px}
.kb-row-2{margin-left:38px}
.kb-key{
  position:relative;width:52px;height:46px;border-radius:2px;
  background:#16202c;border:1px solid rgba(233,230,223,.09);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.06em;color:#7f8c9c;
  transition:.08s;
}
.kb-space{width:280px;font-size:11px}
.kb-home::after{
  content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:14px;height:1px;background:rgba(201,162,74,.65);
}
.kb-key.kb-next{
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border-color:var(--gold);color:#17202b;font-weight:700;
  box-shadow:0 0 0 1px rgba(201,162,74,.35), 0 0 18px rgba(201,162,74,.22);
}
.kb-key.kb-hit{background:#263a2c;border-color:#4d7a58;color:#cfe6d5}
.kb-key.kb-miss{background:#3a2426;border-color:#7a4d50;color:#e6cfd0}

/* ---------- カウントダウン ---------- */
.countdown{
  position:fixed;inset:0;z-index:30;background:rgba(9,13,19,.94);
  display:flex;align-items:center;justify-content:center;
}
.countdown span{
  font-family:var(--serif);font-size:84px;font-weight:600;letter-spacing:.2em;
  color:var(--gold-l);animation:cd .65s ease-out infinite;
}
@keyframes cd{0%{opacity:.25;transform:scale(.9)}40%{opacity:1;transform:scale(1)}100%{opacity:.7}}

/* ---------- 結果 ---------- */
.result-card{
  max-width:640px;margin:20px auto;padding:34px 30px 30px;text-align:center;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line2);border-top:2px solid var(--gold);
}
.result-kicker{font-size:11px;letter-spacing:.44em;color:var(--gold);margin:0 0 16px}
.result-score{font-family:var(--serif);font-size:62px;font-weight:600;line-height:1;color:var(--gold-l)}
.result-score small{font-size:18px;color:var(--muted);margin-left:8px;letter-spacing:.14em}
.result-title{font-size:14px;color:var(--muted);margin:14px 0 0;min-height:22px}

.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);margin:26px 0 0}
.result-grid>div{background:var(--bg2);padding:14px 6px;display:flex;flex-direction:column;gap:4px}
.rl{font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.rv{font-family:var(--serif);font-size:23px;font-weight:600}

.total-band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);
  margin:18px 0 0;border:1px solid var(--line);
}
.total-band>div{background:rgba(201,162,74,.07);padding:14px 6px;display:flex;flex-direction:column;gap:4px}
.tl{font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.tv{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold-l)}

.save-note{font-size:12px;color:var(--muted);margin:18px 0 0}
.weak-note{font-size:13px;color:#d9b58a;margin:6px 0 0;letter-spacing:.1em}

/* ---------- ランキング ---------- */
.rank-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rank-head .sec-title{margin-bottom:0}
.rank-body{margin-top:18px;overflow-x:auto}
.rank-table{width:100%;border-collapse:collapse;font-size:14px}
.rank-table th{
  text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--muted);
  padding:8px 12px;border-bottom:1px solid var(--line2);
}
.rank-table td{padding:13px 12px;border-bottom:1px solid rgba(233,230,223,.06)}
.rank-table td.strong{font-family:var(--serif);font-size:17px;color:var(--gold-l)}
.rank-table tr.me td{background:rgba(201,162,74,.09)}
.my-rank{margin:20px 0 0;font-size:13px;color:var(--gold-l);letter-spacing:.06em}

/* ---------- フッター ---------- */
.site-foot{
  max-width:1000px;margin:0 auto;padding:22px 20px 34px;
  border-top:1px solid var(--line2);
}
.site-foot p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.9}

/* ---------- 小さい画面 ---------- */
@media (max-width:760px){
  .hero-title{font-size:27px}
  .word{font-size:30px}
  .word-long{font-size:20px}
  .romaji{font-size:17px}
  .kb-key{width:8.2vw;height:40px;font-size:11px}
  .kb-space{width:44vw}
  .kb-row-1{margin-left:4vw}.kb-row-2{margin-left:8vw}
  .level-row{grid-template-columns:repeat(3,1fr)}
  .result-grid{grid-template-columns:repeat(2,1fr)}
  .result-score{font-size:46px}
  .hud-item{min-width:60px;padding:5px 8px}
  .hud-value{font-size:19px}
  .brand-text{font-size:16px}
  .panel{padding:18px 16px}
}