/* ============================================================
   atoms-app テーマ層（近未来グラス×ネオン×HUD / ライト・ダーク）
   style.css の後に読み込み、児童向け画面を再スキンする。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes baspin{to{--ba:360deg}}
@keyframes atmspin{to{transform:rotate(360deg)}}
@keyframes atmsheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

:root,[data-theme="light"]{
  --bg:radial-gradient(120% 90% at 50% -10%,#e7f1ff,#eef0ff 45%,#f1ecff 100%);
  --ink:#1d2a52;--ink2:#3a4a72;
  --glass-bg:rgba(255,255,255,.44);--glass-bd:rgba(255,255,255,.95);
  --glass-sh:0 18px 40px -12px rgba(50,60,130,.32),0 2px 0 rgba(255,255,255,.55) inset;
  --hud:rgba(64,96,200,.45);--radar-line:rgba(64,96,200,.10);--radar-ring:rgba(64,96,200,.20);--radar-glow:rgba(31,184,214,.12);
  --orb1:#ffc4e6;--orb2:#bfeaff;--orb3:#d9c8ff;
  --line:rgba(80,90,160,.14);--track:rgba(80,90,160,.20);
  --cyan:#1fb8d6;--vio:#7b5cff;--mag:#ff5fae;--gold:#f0a92b;
  --scr:#ff7a3c;--mc:#22c281;--htm:#3b9bff;
  --chip-surface:rgba(255,255,255,.72);
  --lv-ink:#0a6f85;--credit-ink:#8a5600;--xp-green:#2e7d16;
  --chip-ink:#5230c9;--chip-bg:linear-gradient(90deg,rgba(123,92,255,.16),rgba(255,95,174,.14));
  --credit-bg:linear-gradient(135deg,rgba(240,169,43,.20),rgba(255,95,174,.12));--credit-bd:rgba(240,169,43,.45);
  --field-bg:rgba(255,255,255,.6);
  /* 旧変数の再マップ（既存CSS互換） */
  --primary:#5b6ef5;--card-bg:var(--glass-bg);--text:var(--ink);--text-light:var(--ink2);
  --shadow:var(--glass-sh);--radius:20px;
}
[data-theme="dark"]{
  --bg:radial-gradient(120% 80% at 82% -10%,#2a1163,rgba(42,17,99,0) 55%),radial-gradient(100% 70% at 0% 0%,#0c2c6b,rgba(12,44,107,0) 52%),linear-gradient(160deg,#140a37,#070a1f);
  --ink:#eaf1ff;--ink2:#c2cdec;
  --glass-bg:rgba(255,255,255,.07);--glass-bd:rgba(255,255,255,.20);
  --glass-sh:0 18px 44px -12px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.18) inset;
  --hud:rgba(120,165,255,.42);--radar-line:rgba(120,165,255,.12);--radar-ring:rgba(120,165,255,.24);--radar-glow:rgba(61,240,255,.14);
  --orb1:#ff4ecd;--orb2:#3df0ff;--orb3:#8a6bff;
  --line:rgba(255,255,255,.1);--track:rgba(255,255,255,.20);
  --cyan:#3df0ff;--vio:#9a7bff;--mag:#ff6fd5;--gold:#ffd23c;
  --scr:#ff8a4c;--mc:#4dffa1;--htm:#56b8ff;
  --chip-surface:rgba(255,255,255,.10);
  --lv-ink:#8df3ff;--credit-ink:#ffd989;--xp-green:#9bff6a;
  --chip-ink:#e3d6ff;--chip-bg:linear-gradient(90deg,rgba(138,107,255,.40),rgba(255,78,205,.26));
  --credit-bg:linear-gradient(135deg,rgba(255,210,60,.22),rgba(255,78,205,.14));--credit-bd:rgba(255,210,60,.5);
  --field-bg:rgba(255,255,255,.08);
  --text:var(--ink);--text-light:var(--ink2);--card-bg:var(--glass-bg);--shadow:var(--glass-sh);
}

/* ---- ベース ---- */
body{
  font-family:'DotGothic16','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:var(--bg)!important;background-attachment:fixed;color:var(--ink);
  min-height:100vh;letter-spacing:.3px;
}
h1,h2,h3,h4{ -webkit-text-stroke:.4px currentColor; }

/* ---- 背景シーン（レーダー同心円＋オーブ＋HUD） ---- */
.app-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.app-scene .lyr{position:absolute;inset:-40px;transition:transform .25s ease-out;will-change:transform}
.app-scene .radar{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--radar-glow),transparent 36%),repeating-radial-gradient(circle at 50% 30%,transparent 0 40px,var(--radar-line) 40px 41px);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 82%);-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 82%);opacity:.8}
.app-scene .radar:before{content:"";position:absolute;left:50%;top:30%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;border:1px solid var(--radar-ring)}
.app-scene .radar:after{content:"";position:absolute;left:50%;top:30%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;border:1px solid var(--radar-ring)}
.app-scene .orb{position:absolute;border-radius:50%;filter:blur(55px);opacity:.5}
.app-scene .o1{width:280px;height:280px;background:var(--orb1);top:-40px;right:6%}
.app-scene .o2{width:320px;height:320px;background:var(--orb2);top:34%;left:-100px}
.app-scene .o3{width:210px;height:210px;background:var(--orb3);top:66%;right:-60px}
.app-scene .hud{position:absolute;inset:18px}
.app-scene .br{position:absolute;width:30px;height:30px;border:2px solid var(--hud)}
.app-scene .br.tl{top:0;left:0;border-right:0;border-bottom:0}.app-scene .br.tr{top:0;right:0;border-left:0;border-bottom:0}
.app-scene .br.bl{bottom:0;left:0;border-right:0;border-top:0}.app-scene .br.brr{bottom:0;right:0;border-left:0;border-top:0}
/* コンテンツをシーンより前面に */
.navbar,.container,.modal-overlay,.celebrate-overlay,.reward-toast,#intro-overlay{position:relative;z-index:5}
.navbar{z-index:50}

/* ---- ガラス ユーティリティ ---- */
.glass,.card,.stat-card,.task-item{
  background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;border-radius:20px!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--glass-sh)!important;
}
.card:hover{transform:translateY(-3px)}

/* ---- ナビゲーション ---- */
.navbar{
  background:var(--glass-bg)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-bd);box-shadow:0 6px 24px -12px rgba(50,60,130,.4);
}
.navbar-brand{color:transparent!important;background:linear-gradient(90deg,var(--cyan),var(--vio),var(--mag));-webkit-background-clip:text;background-clip:text;letter-spacing:2px}
.navbar-brand .brand-icon{-webkit-text-fill-color:initial}
.navbar-user{color:var(--ink2)}
.navbar-user strong{color:var(--ink)}
.navbar-link{color:var(--ink)!important}
.navbar-link:hover{background:var(--glass-bg)!important;color:var(--cyan)!important}
.navbar-link.active{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}
/* テーマ切替ボタン */
.theme-toggle{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;cursor:pointer;
  background:var(--glass-bg);border:1px solid var(--glass-bd);color:var(--ink);font-size:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s;
}
.theme-toggle:hover{transform:translateY(-2px)}

/* ---- 見出し ---- */
.page-header h2,.mypage-section-title{color:var(--ink)}
.page-header p{color:var(--ink2)}

/* ---- ボタン ---- */
.btn{letter-spacing:.5px}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}
.btn-success{background:linear-gradient(135deg,var(--mc),var(--cyan))!important;color:#062}
.btn-secondary{background:var(--glass-bg)!important;color:var(--ink)!important;border:1px solid var(--glass-bd)}
.btn-scratch{background:linear-gradient(135deg,var(--scr),var(--gold))!important;color:#fff!important}
.btn-minecraft{background:linear-gradient(135deg,var(--mc),var(--cyan))!important;color:#043!important}
.btn-html{background:linear-gradient(135deg,var(--htm),var(--vio))!important;color:#fff!important}
.btn-external{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}

/* ---- 進捗バー（発光） ---- */
.progress-bar-wrap{background:var(--track)!important}
.progress-bar-fill{box-shadow:0 0 8px var(--cyan)}

/* ---- コースカード（course_list / mypage 共通の色つきカード） ---- */
.course-card,.course-list-card{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;color:var(--ink)!important;box-shadow:var(--glass-sh)!important}
.course-card h3,.course-list-titlebox h3{color:var(--ink)!important;-webkit-text-stroke:.3px currentColor}
.course-card p,.course-list-titlebox p{color:var(--ink2)!important;opacity:1}
.course-card .progress-info{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)}
.course-icon-img{width:66px;height:66px;object-fit:contain;display:block;margin-bottom:16px;filter:drop-shadow(0 3px 6px rgba(50,60,130,.25))}
.course-list-icon-img{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px rgba(50,60,130,.25))}
.course-ic{filter:drop-shadow(0 2px 3px rgba(50,60,130,.2));margin-right:2px}

/* ---- テーブル（進捗一覧等） ---- */
table{background:var(--glass-bg)!important;border:1px solid var(--glass-bd);box-shadow:var(--glass-sh)!important}
th{background:transparent!important;color:var(--ink2)!important}
td{color:var(--ink)}
th,td{border-bottom:1px solid var(--line)!important}
tr:hover td{background:var(--glass-bg)!important}

/* ---- バッジ ---- */
.badge-success{background:rgba(34,194,129,.18)!important;color:var(--mc)!important}
.badge-warning{background:rgba(240,169,43,.18)!important;color:var(--gold)!important}
.badge-primary{background:var(--chip-bg)!important;color:var(--chip-ink)!important}

/* ---- フォーム ---- */
.form-group input,.form-group select,.form-group textarea{background:var(--field-bg)!important;border:1px solid var(--glass-bd)!important;color:var(--ink)!important}
.form-group label{color:var(--ink)}

/* ---- メトリクス ---- */
.stat-num{color:var(--cyan)}
.stat-label{color:var(--ink2)}

/* ---- ログインページ（シーンを活かす） ---- */
.login-page{background:var(--bg)!important}
.login-wrap{background:var(--glass-bg)!important;border:1px solid var(--glass-bd);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-sh)!important}
.login-logo h1{color:var(--ink)}
.login-hint{color:var(--ink2)}

/* ============================================================
   mypage 専用 再スキン
   ============================================================ */
.mypage-hero{
  background:var(--glass-bg)!important;color:var(--ink)!important;
  border:1px solid var(--glass-bd);box-shadow:var(--glass-sh)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  position:relative;overflow:hidden;border-radius:24px;
}
.mypage-hero::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1.6px;
  background:conic-gradient(from var(--ba),var(--cyan),var(--vio),var(--mag),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;animation:baspin 5s linear infinite;pointer-events:none;
}
.mypage-hero>*{position:relative;z-index:1}
.hero-greeting{color:var(--ink)}
.hero-title-line{
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;
  background:var(--chip-bg);border:1px solid rgba(123,92,255,.3);width:auto;
}
.hero-title-name{color:var(--chip-ink)}
.hero-level-box{background:var(--chip-surface)!important;border:2px solid var(--cyan);box-shadow:0 0 0 3px rgba(31,184,214,.12)}
.hero-credit-badge{background:var(--credit-bg)!important;border:1px solid var(--credit-bd)}
.hero-level-label,.hero-credit-label{color:var(--ink2)!important;opacity:1}
.hero-level-num{color:var(--lv-ink)!important;-webkit-text-stroke:.4px currentColor}
.hero-credit-num{color:var(--credit-ink)!important;-webkit-text-stroke:.4px currentColor}
.hero-xp{background:var(--chip-surface)!important}
.hero-xp-info,.hero-xp-numbers{color:var(--ink)}
.hero-xp-bar{background:var(--track)!important}
.hero-xp-fill{box-shadow:0 0 12px var(--gold)}
.avatar-frame{border:3px solid var(--cyan)!important;box-shadow:0 0 0 4px rgba(31,184,214,.14),0 6px 18px rgba(31,184,214,.25)!important;background:var(--chip-surface)!important}
.btn-avatar,.btn-avatar-sub{background:var(--glass-bg)!important;color:var(--ink)!important;border:1px solid var(--glass-bd)}
.avatar-msg{color:var(--ink2)!important;text-shadow:none}

.mypage-section-title{color:var(--ink);letter-spacing:1px}

/* おしらせ */
.notice-card{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;border-left:3px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important}
.notice-card.unread{border-left-color:var(--mag)!important}
.notice-title{color:var(--ink)!important}
.notice-body{color:var(--ink)!important}
.notice-date{color:var(--ink2)!important}
.notice-new,.notice-unread-badge{background:var(--mag)!important;color:#fff!important}
.notice-read-btn{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}
.notice-empty{background:var(--glass-bg)!important;border:1px solid var(--glass-bd);color:var(--ink2)!important;box-shadow:var(--glass-sh)!important}
.notice-history-link{color:var(--cyan)!important}

/* 直近クリア */
.recent-item{border-bottom:1px solid var(--line)!important}
.recent-title{color:var(--ink)}
.recent-meta{color:var(--ink2)}
.recent-xp{background:var(--track)!important;color:var(--xp-green)!important;-webkit-text-stroke:.3px currentColor}

/* アカウントメモ */
.ext-card{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important}
.ext-card-head{border-bottom:1px solid var(--line)!important}
.ext-empty{color:var(--ink2)!important}
.ext-label{color:var(--ink2)!important}
.ext-value{background:var(--field-bg)!important;border:1px solid var(--glass-bd)!important;color:var(--ink)!important}
.ext-btn{background:var(--glass-bg)!important;color:var(--ink)!important;border:1px solid var(--glass-bd)}
.ext-btn:hover{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}

/* 修了証タブ */
.cert-tab-btn{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;color:var(--ink2)!important}
.cert-tab-btn.active{background:var(--glass-bg)!important;border-color:var(--cyan)!important;color:var(--ink)!important;box-shadow:0 0 0 3px rgba(31,184,214,.16)!important}
.cert-tab-count{background:var(--gold)!important;color:#3a2400!important}
.cert-tab-btn:not(.active) .cert-tab-count{background:var(--ink2)!important;color:#fff!important}
/* 修了証カードは固定の明色背景 → 文字は常に濃色（ライトと同じ）。紫/橙は白のまま */
.cert-card{color:#1d2a52!important}
.cert-course,.cert-master{color:#fff!important}

/* モーダル */
.modal-box{background:var(--glass-bg)!important;border:1px solid var(--glass-bd);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--glass-sh)!important}
.modal-title{color:var(--ink)}
.modal-desc{color:var(--ink2)!important}
.preset-card{background:var(--field-bg)!important}
.btn-modal-close{background:var(--glass-bg)!important;color:var(--ink)!important;border:1px solid var(--glass-bd)}

/* ============================================================
   ダーク対応ポリッシュ（白カード・薄い文字の是正）
   ============================================================ */
/* レベル/クレジットのラベル視認性 */
.hero-level-label,.hero-credit-label{color:var(--ink)!important;opacity:.85}

/* 課題一覧 quest_list */
.course-tabs{background:var(--glass-bg)!important;border:1px solid var(--glass-bd);box-shadow:var(--glass-sh)!important}
.course-tab{color:var(--ink2)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.2}
.course-tab .course-ic{margin-right:0}
.course-tab.active{background:linear-gradient(135deg,var(--cyan),var(--vio))!important;color:#fff!important}
.quest-card{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important}
.quest-card a{color:var(--ink)!important;background:transparent!important}
.quest-card.done a{background:transparent!important}
.quest-num{background:var(--chip-surface)!important;color:var(--ink)!important}
.stage-mini-bar{background:var(--track)!important}
.stage-subtitle,.stage-count,.chev{color:var(--ink2)!important}
.xp-tag,.num-pill{background:rgba(240,169,43,.20)!important;color:var(--gold)!important}

/* 課題詳細 quest_detail */
.quest-detail-head{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.qd-title{color:var(--ink)}
.qd-breadcrumb{color:var(--ink2)}
.external-link-card{background:var(--glass-bg)!important;border-left-color:var(--cyan)!important}
.hint-accordion{background:var(--glass-bg)!important;border-color:var(--glass-bd)!important}
.hint-accordion summary{color:var(--ink)!important}
.hint-accordion summary:hover{background:var(--glass-bg)!important}
.hint-accordion-arrow{color:var(--ink2)!important}
.hint-accordion-body{background:transparent!important;color:var(--ink)!important;border-top-color:var(--line)!important}

/* ヒントボックス（共通） */
.hint-box{background:var(--glass-bg)!important;color:var(--ink)!important;border-left-color:var(--gold)!important}
.hint-box strong{color:var(--gold)!important}

/* 課題HTML quest_html（CodeMirror・プレビューiframeは既定のまま） */
.html-pane{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important}
.stage-pill{background:var(--glass-bg)!important;color:var(--ink2)!important;border:1px solid var(--glass-bd)}
.quest-desc{background:var(--glass-bg)!important;color:var(--ink)!important;border:1px solid var(--glass-bd)}
.hint-body{background:var(--glass-bg)!important;color:var(--ink)!important}
.clear-action{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;box-shadow:var(--glass-sh)!important}
.hint-ok{color:var(--xp-green)!important}
.hint-info{color:var(--gold)!important}

/* ストア store */
.store-card,.store-filter-btn{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;color:var(--ink)!important}

@media(prefers-reduced-motion:reduce){
  .app-scene .lyr{transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}