/* Trekey 共通スタイル（1ファイル・自己完結・外部フォント不使用） */
:root{
  --bg:#FFF8E1;        /* 暖色背景 */
  --card:#ffffff;
  --ink:#3a3226;       /* 本文（やや茶系の黒） */
  --sub:#8a7f6c;       /* 補足テキスト */
  --accent:#f5820a;    /* アクセント1色（みかん色） */
  --accent-d:#d96c00;
  --accent-l:#ffe6c2;
  --line:#efe3c8;      /* 罫線 */
  --good:#2e9e5b;
  --bad:#e05252;
  --radius:16px;
  --maxw:920px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);line-height:1.8;
  font-family:"Yu Gothic","游ゴシック体",YuGothic,"Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  font-size:17px;
}
a{color:var(--accent-d)}
a:hover{color:var(--accent)}
img{max-width:100%}

/* ---- ヘッダー ---- */
.site-header{background:var(--card);border-bottom:3px solid var(--accent-l);position:relative}
.site-header .bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:22px}
.brand .logo{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;font-size:20px}
.brand .brand-logo{height:46px;width:auto;display:block}
.brand .tag{font-size:12px;color:var(--sub);font-weight:600;margin-left:2px;align-self:flex-end;padding-bottom:6px}
.site-nav{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.site-nav a{color:var(--ink);font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap}
.site-nav a:hover{color:var(--accent-d)}
.burger{display:none;margin-left:auto;font-size:22px;background:#fff;border:2px solid var(--accent-l);border-radius:10px;padding:4px 12px;color:var(--accent-d);cursor:pointer}
.burger-panel{display:none;position:absolute;right:14px;top:100%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 26px rgba(120,90,20,.18);min-width:200px;padding:8px;z-index:60}
.burger-panel.open{display:block}
.burger-panel a{display:block;padding:11px 12px;color:var(--ink);text-decoration:none;border-radius:8px;font-weight:700;font-size:15px}
.burger-panel a:hover{background:var(--accent-l)}
@media (max-width:820px){.site-nav{display:none}.burger{display:block}}

/* ---- レイアウト ---- */
main{max-width:var(--maxw);margin:0 auto;padding:22px 18px 60px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px;font-size:13px;color:var(--sub)}
.breadcrumb a{color:var(--accent-d);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:#cbb98f}
h1{font-size:28px;line-height:1.35;margin:6px 0 14px}
h2{font-size:21px;margin:34px 0 12px;border-left:6px solid var(--accent);padding-left:12px}
h3{font-size:17px;margin:22px 0 8px}
.lead{font-size:18px;color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:18px 0}
.note{color:var(--sub);font-size:14px}
.center{text-align:center}

/* ---- ボタン ---- */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:13px 26px;font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 var(--accent-d)}
.btn:hover{background:var(--accent-d);color:#fff}
.btn.sub{background:#fff;color:var(--accent-d);border:2px solid var(--accent-l);box-shadow:none}
.btn.sub:hover{background:var(--accent-l)}
.btn:disabled{background:#e8c79b;box-shadow:none;cursor:default}

/* ---- 学年グリッド ---- */
.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
@media (max-width:560px){.grade-grid{grid-template-columns:repeat(2,1fr)}}
.grade-card{background:var(--card);border:2px solid var(--accent-l);border-radius:var(--radius);padding:18px 10px;text-align:center;text-decoration:none;color:var(--ink);font-weight:800;transition:transform .08s}
.grade-card:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--ink)}
.grade-card .num{display:block;font-size:34px;color:var(--accent-d);line-height:1.1}
.grade-card .lb{font-size:14px;color:var(--sub);font-weight:700}

/* ---- 注意バナー（スマホ物理キーボード推奨） ---- */
.kbd-notice{background:var(--accent-l);border:1px solid #f2cf98;border-radius:12px;padding:12px 16px;margin:16px 0;font-size:14px;color:#7a5a1e}

/* ---- フォーム ---- */
label{display:block;font-weight:700;font-size:14px;margin:16px 0 6px}
input,textarea,select{width:100%;font-size:16px;padding:11px 12px;border:1px solid #e0d2ac;border-radius:10px;font-family:inherit;background:#fff;color:var(--ink)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
#msg{margin-top:16px;font-weight:700;min-height:24px}
#msg.ok{color:var(--good)}#msg.ng{color:var(--bad)}

/* ---- フッター ---- */
.site-footer{background:#fff4d6;border-top:3px solid var(--accent-l);color:var(--sub);font-size:14px;margin-top:30px}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:26px 18px}
.site-footer .links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.site-footer a{color:var(--accent-d);text-decoration:none;font-weight:700}
.site-footer a:hover{text-decoration:underline}
.site-footer .copy{border-top:1px solid var(--line);padding-top:12px;color:#a99a78;font-size:13px}

/* ================= play.html ================= */
.play-wrap{max-width:760px;margin:0 auto}
.play-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;margin:16px 0}
.disp-t{font-size:30px;font-weight:800;line-height:1.5;min-height:1.5em}
.disp-k{font-size:20px;color:var(--sub);margin-top:8px;letter-spacing:.04em}
.disp-r{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-size:22px;margin-top:14px;letter-spacing:.05em;word-break:break-all}
.disp-r .done{color:var(--accent-d);font-weight:700}
.disp-r .cur{background:var(--accent);color:#fff;border-radius:4px;padding:0 2px}
.disp-r .rest{color:#c9b892}
.play-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--sub);margin:10px 2px}
.progress{height:10px;background:var(--accent-l);border-radius:6px;overflow:hidden;margin:8px 0}
.progress > i{display:block;height:100%;background:var(--accent);width:0}
.flash-bad{animation:shake .25s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.result-num{font-size:44px;font-weight:800;color:var(--accent-d);line-height:1.1}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
@media (max-width:520px){.result-grid{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center}
.stat .lb{font-size:13px;color:var(--sub)}
.toggle-row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0;font-size:14px}
.seg{display:inline-flex;border:2px solid var(--accent-l);border-radius:10px;overflow:hidden}
.seg a{padding:7px 16px;text-decoration:none;color:var(--accent-d);font-weight:700;background:#fff}
.seg a.on{background:var(--accent);color:#fff}

/* ================= わくわくアップデート (v0.2.0) ================= */
/* --- コンボ表示 --- */
.combo-wrap{display:inline-flex;align-items:baseline;gap:4px;font-weight:800;color:var(--accent-d)}
.combo-wrap .combo-num{font-size:16px}
.combo-pop{animation:comboPop .4s ease-out}
@keyframes comboPop{0%{transform:scale(1)}30%{transform:scale(1.5);color:var(--good)}100%{transform:scale(1)}}
.combo-milestone{display:inline-block;margin-left:8px;color:var(--good);font-weight:800;opacity:0}
.combo-milestone.show{animation:milestone 1s ease-out}
@keyframes milestone{0%{opacity:0;transform:translateY(6px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* --- おと（音）トグル --- */
.sound-toggle{display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--accent-l);border-radius:10px;padding:6px 12px;font-weight:800;font-size:14px;color:var(--accent-d);cursor:pointer}
.sound-toggle:hover{background:var(--accent-l)}
.sound-toggle[aria-pressed="false"]{color:var(--sub);border-color:var(--line)}

/* --- ランク称号 --- */
.rank-badge{display:inline-flex;align-items:center;gap:10px;background:var(--accent-l);border:2px solid var(--accent);border-radius:14px;padding:12px 20px;margin:4px auto;font-weight:800}
.rank-badge .rank-emoji{font-size:34px;line-height:1}
.rank-badge .rank-name{font-size:20px;color:var(--accent-d)}
.stars{font-size:30px;letter-spacing:6px;margin:8px 0;color:#e8c15a}
.stars .off{color:#e4d9be}

/* --- 自己ベスト更新バナー --- */
.best-banner{background:linear-gradient(90deg,var(--accent),#ffb347);color:#fff;font-weight:800;font-size:20px;border-radius:14px;padding:14px 18px;margin:14px 0;text-align:center;box-shadow:0 4px 0 var(--accent-d)}

/* --- 宝箱オープン --- */
.chest-box{text-align:center;margin:18px 0}
.chest-emoji{font-size:64px;line-height:1;cursor:pointer;user-select:none;display:inline-block;transition:transform .1s}
.chest-emoji:hover{transform:scale(1.08)}
.chest-emoji.shake{animation:chestShake .5s}
@keyframes chestShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(6deg)}}
.chest-hint{font-size:14px;color:var(--sub);margin-top:6px}
.treasure-pop{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.treasure-pop .got{font-size:52px;line-height:1;animation:treasureJump .6s ease-out}
@keyframes treasureJump{0%{transform:translateY(30px) scale(.3);opacity:0}60%{transform:translateY(-10px) scale(1.2);opacity:1}100%{transform:translateY(0) scale(1)}}
.treasure-note{font-weight:800;color:var(--accent-d);margin-top:8px}

/* --- コレクション画面 (/treasure) --- */
.collection-progress{text-align:center;font-size:22px;font-weight:800;color:var(--accent-d);margin:8px 0 20px}
.collection-progress .of{color:var(--sub);font-size:16px}
.tcat{margin:26px 0}
.tcat h2{margin-bottom:12px}
.tgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:560px){.tgrid{grid-template-columns:repeat(4,1fr)}}
.tcell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--card);border:2px solid var(--accent-l);border-radius:14px;font-size:30px}
.tcell.locked{color:#d8cba8;background:#faf3e0;border-color:var(--line)}
.tcell .count{position:absolute;right:4px;bottom:2px;font-size:11px;font-weight:800;color:var(--sub)}
.tcell .starred{position:absolute;right:4px;top:2px;font-size:13px}

/* --- トップ「きみのきろく」ミニカード --- */
.record-card{background:var(--card);border:2px solid var(--accent-l);border-radius:var(--radius);padding:16px 20px;margin:18px 0}
.record-card h3{margin:0 0 10px;font-size:16px;color:var(--accent-d)}
.record-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-around;text-align:center}
.record-row .item .big{font-size:24px;font-weight:800;color:var(--accent-d);line-height:1.2}
.record-row .item .lb{font-size:13px;color:var(--sub)}
.hero-chest{font-size:40px;margin-left:6px}

/* ================= ローマ字表 ================= */
.romaji-table{width:100%;border-collapse:collapse;margin:14px 0;background:#fff}
.romaji-table th,.romaji-table td{border:1px solid var(--line);padding:8px 6px;text-align:center;font-size:15px}
.romaji-table th{background:var(--accent-l);color:#7a5a1e}
.romaji-table .kana{font-weight:800;font-size:17px}
.romaji-table .roma{font-family:Consolas,monospace;color:var(--accent-d)}
.hp-keys{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:14px 0}
.hp-keys .key{border:2px solid var(--line);border-radius:8px;text-align:center;padding:10px 0;font-family:Consolas,monospace;font-weight:700;background:#fff}
.hp-keys .key.home{background:var(--accent-l);border-color:var(--accent)}
.hand-note{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.hand-note span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px}

/* ================= 印刷 ================= */
@media print{
  :root{--bg:#fff}
  body{background:#fff;font-size:12px;line-height:1.5;color:#000}
  .site-header,.site-footer,.breadcrumb,.no-print{display:none !important}
  main{max-width:none;padding:0}
  h1{font-size:20px;margin:0 0 8px}
  h2{font-size:15px;margin:12px 0 6px;border-left:4px solid #999}
  .card{border:1px solid #bbb;box-shadow:none;padding:10px 12px;margin:8px 0;break-inside:avoid}
  .romaji-table th,.romaji-table td{padding:3px 4px;font-size:11px}
  .romaji-table th{background:#eee;color:#000}
  .romaji-table .roma{color:#000}
  .hp-keys .key.home{background:#eee}
  a{color:#000;text-decoration:none}
  @page{size:A4 portrait;margin:12mm}
}