:root { --bg:#101114; --surface:#1a1c21; --surface-2:#22252c; --line:#30333c; --text:#f5f3ef; --muted:#a4a7ae; --red:#e74b4b; --red-soft:#ff7373; --cream:#fff4ea; --shadow:0 22px 60px #00000038; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 10% 0%,#3a2735 0,transparent 30rem),radial-gradient(circle at 100% 90%,#1b3940 0,transparent 33rem),repeating-linear-gradient(45deg,#ffffff03 0 1px,transparent 1px 12px),var(--bg); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100% - 32px,850px); margin:auto; padding:24px 0 54px; }
.news-ticker { width:100%; display:flex; align-items:center; gap:10px; overflow:hidden; margin:-35px 0 32px; padding:9px 13px; border:1px solid #3b3340; border-radius:11px; color:#cac9d0; background:linear-gradient(90deg,#20202a,#17191d); text-align:left; font-size:.8rem; } .news-ticker:hover { border-color:var(--red-soft); color:#fff1ef; } .news-ticker-label { flex:none; padding:3px 7px; border-radius:999px; color:#29191b; background:var(--red-soft); font-size:.66rem; font-weight:800; letter-spacing:.08em; } #newsTickerText { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.news-layout { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr); gap:18px; align-items:start; } .news-list { display:grid; gap:10px; } .news-card { position:relative; display:grid; gap:6px; padding:15px; overflow:hidden; border:1px solid var(--line); border-left:3px solid var(--news-accent); border-radius:14px; color:var(--text); background:#1a1c21; text-align:left; } .news-card:hover,.news-card.selected { border-color:var(--news-accent); background:#21232a; } .news-card small,.news-card span { color:var(--muted); font-size:.76rem; } .news-card strong { font-size:.95rem; } .news-article { min-height:420px; padding:25px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(140deg,#202229,#17191d); } .news-category { display:inline-block; padding:4px 8px; border-radius:999px; color:#101116; background:var(--news-accent); font-size:.7rem; font-weight:800; } .news-date { margin:12px 0 4px; color:var(--muted); font-size:.82rem; } .news-article h2 { margin:0; font-size:clamp(1.5rem,3vw,2.1rem); } .news-body { max-width:62ch; line-height:1.7; color:#d6d5d9; } .news-reactions,.news-comments { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); } .news-reactions strong,.news-comments strong { display:block; margin-bottom:10px; } .news-reactions > div { display:flex; flex-wrap:wrap; gap:8px; } .reaction-button { padding:8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:#16181d; font-size:.82rem; } .reaction-button.selected,.reaction-button:hover { border-color:var(--red-soft); color:#fff0ee; background:#3c2529; } .news-comments > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .news-comments small { color:var(--muted); font-size:.74rem; } #newsCommentForm { display:flex; gap:8px; margin:12px 0; } #newsCommentForm input { min-width:0; flex:1; padding:10px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:#14161b; } .news-comment-list { display:grid; gap:8px; } .news-comment-list p { display:grid; gap:3px; margin:0; padding:10px 12px; border-radius:10px; color:#d6d5da; background:#181a20; font-size:.88rem; } .news-comment-list p strong { margin:0; color:#f1d6cb; font-size:.76rem; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:55px; } .brand { border:0; padding:0; color:var(--text); background:none; display:flex; gap:11px; align-items:center; font-size:1rem; font-weight:700; } .brand-mark { display:grid; place-items:center; overflow:hidden; width:34px; height:34px; border:2px solid var(--red-soft); border-radius:50%; background:#202a34; box-shadow:0 0 16px #e74b4b55; } .brand-mark img { width:100%; height:100%; object-fit:cover; } .version,.pill,.furigana-toggle { color:#c5c6cc; border:1px solid var(--line); border-radius:999px; padding:5px 10px; font-size:.76rem; } .furigana-toggle { margin-left:auto; margin-right:10px; background:transparent; } .furigana-toggle:hover { color:var(--text); border-color:var(--red-soft); } .notification-button { display:grid; place-items:center; width:31px; height:31px; margin-right:10px; border:1px solid var(--line); border-radius:50%; color:var(--cream); background:var(--surface); font-size:1rem; } .notification-button:hover { border-color:var(--red-soft); color:var(--red-soft); }
.screen { display:none; } .screen.active { display:block; animation:appear .32s ease both; } @keyframes appear { from { opacity:0; transform:translateY(9px) } to { opacity:1; transform:translateY(0) } }
.profile-menu { position:relative; } .profile-button { display:flex; align-items:center; gap:8px; padding:3px 9px 3px 3px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:var(--surface); } .profile-button:hover,.profile-button[aria-expanded="true"] { border-color:var(--red-soft); } .profile-button span:first-child { display:grid; place-items:center; overflow:hidden; width:27px; height:27px; border-radius:50%; color:#201516; background:var(--cream); } .profile-button span:first-child img { width:100%; height:100%; object-fit:cover; } .profile-button span:nth-child(2) { font-size:.82rem; font-weight:700; } .profile-chevron { color:var(--muted); font-size:.9rem; } .profile-dropdown { position:absolute; z-index:12; top:calc(100% + 8px); right:0; min-width:172px; padding:6px; border:1px solid #5f4b50; border-radius:12px; background:#202129; box-shadow:var(--shadow); } .profile-dropdown button { display:block; width:100%; padding:10px 11px; border:0; border-radius:8px; color:var(--text); text-align:left; background:transparent; } .profile-dropdown button:hover { background:#34262b; color:var(--cream); }
.account-steps { display:grid; grid-template-columns:28px 1fr 28px 1fr 28px; align-items:center; gap:7px; margin-bottom:8px; } .account-steps span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#17191d; font-size:.8rem; font-weight:800; } .account-steps span.active { color:#26191b; border-color:var(--red-soft); background:var(--red-soft); } .account-steps i { height:2px; background:var(--line); } .wizard-step { display:grid; gap:13px; } .wizard-step h2 { margin:0; font-size:1.45rem; } .wizard-step small { color:var(--muted); line-height:1.45; }
.create-profile.customize-profile-form { max-width:640px; } .customize-profile-form > span { margin-top:7px; }
.profile-hero { margin-bottom:32px; text-align:center; } .profile-hero .intro { margin-right:auto; margin-left:auto; } .profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:700px; margin:auto; } .profile-card { position:relative; min-height:150px; padding:15px 10px; display:flex; flex-direction:column; align-items:center; border:0; border-radius:17px; color:var(--text); background:transparent; } .profile-card:hover .profile-avatar { transform:translateY(-4px) scale(1.02); outline:2px solid var(--red-soft); } .profile-avatar { display:grid; place-items:center; overflow:hidden; width:92px; height:92px; border-radius:22px; color:#1d1717; background:var(--cream); transition:transform .18s,outline .18s; } .profile-avatar img { width:100%; height:100%; object-fit:cover; } .profile-card strong { margin-top:11px; font-size:.95rem; } .profile-card small { margin-top:4px; color:var(--muted); } .add-profile .profile-avatar { color:var(--muted); border:1px dashed #626671; background:transparent; font-family:"DM Sans",sans-serif; font-size:2.2rem; } .create-profile { max-width:430px; margin:29px auto 0; padding:22px; display:grid; gap:11px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .create-profile label,.create-profile > span { font-size:.9rem; font-weight:700; } .create-profile input { width:100%; padding:13px; border:1px solid var(--line); border-radius:10px; color:var(--text); outline:none; background:#17191d; } .create-profile input:focus { border-color:var(--red-soft); } .profile-level-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .profile-level-choice button { padding:9px 5px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:#17191d; } .profile-level-choice button.selected { color:#231718; border-color:var(--red-soft); background:var(--red-soft); font-weight:700; } .profile-form-actions { display:flex; justify-content:flex-end; align-items:center; gap:11px; margin-top:4px; }
.avatar-choices { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; } .avatar-choice { aspect-ratio:1; overflow:hidden; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:10px; background:#17191d; } .avatar-choice img { width:100%; height:100%; object-fit:cover; } .avatar-choice.selected { border-color:var(--red-soft); outline:2px solid var(--red-soft); }
.avatar-choice,.cover-choice { position:relative; } .cosmetic-lock { position:absolute; z-index:3; right:6px; bottom:6px; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; background:rgba(12,13,18,.83); box-shadow:0 2px 7px rgba(0,0,0,.35); font-size:.76rem; } .avatar-choice.locked,.cover-choice.locked { cursor:not-allowed; opacity:.55; filter:saturate(.6); } .avatar-choice.locked::after,.cover-choice.locked::after { position:absolute; z-index:2; inset:0; content:""; background:rgba(8,9,12,.28); } .avatar-choice.locked .cosmetic-lock,.cover-choice.locked .cosmetic-lock { z-index:4; } .avatar-choice:disabled,.cover-choice:disabled { pointer-events:auto; }
.avatar-frame.frame-lotus,.avatar-frame.frame-calligraphy,.avatar-frame.frame-kitsune,.avatar-frame.frame-starlight { position:relative; isolation:isolate; overflow:visible; }
.avatar-frame.frame-lotus { border-color:#f4d2ff; background:linear-gradient(135deg,#583d79,#e7a8cd); box-shadow:0 0 0 2px #2e253b,0 0 15px #df9cda; } .avatar-frame.frame-lotus::before { content:""; position:absolute; z-index:-1; inset:-7px; border-radius:50%; background:repeating-conic-gradient(from 12deg,#ffd7f0 0 6deg,#a875ba 7deg 16deg,#54376a 17deg 26deg); filter:blur(.4px); animation:lotus-spin 8s linear infinite; }
.avatar-frame.frame-calligraphy { border-color:#93c4ed; background:linear-gradient(135deg,#101d36,#395d88); box-shadow:0 0 0 2px #111723,0 0 16px #426f9d; } .avatar-frame.frame-calligraphy::before { content:""; position:absolute; z-index:-1; inset:-6px; border-radius:50%; border:2px dashed #9dd7ff; transform:rotate(-13deg); opacity:.86; } .avatar-frame.frame-calligraphy::after { content:"〆"; position:absolute; z-index:2; right:-10px; bottom:-9px; color:#c2e9ff; font-size:.62rem; text-shadow:0 0 8px #5daee2; }
.avatar-frame.frame-kitsune { border-color:#ffd885; background:linear-gradient(135deg,#5e241c,#df7440); box-shadow:0 0 0 2px #3a1b19,0 0 17px #ec8b39; } .avatar-frame.frame-kitsune::before { content:""; position:absolute; z-index:-1; inset:-8px; border-radius:50%; background:conic-gradient(#fff2b2,#f0882f,#8b2e20,#ffd85c,#fff2b2); filter:blur(1px); animation:kitsune-flare 2.2s ease-in-out infinite alternate; }
.avatar-frame.frame-starlight { border-color:#d8d6ff; background:#27254d; box-shadow:0 0 0 2px #19172e,0 0 18px #7779e8; } .avatar-frame.frame-starlight::before { content:"✦  ·  ✧"; position:absolute; z-index:2; inset:-13px; color:#fff5cc; font-size:.58rem; letter-spacing:.35rem; text-shadow:0 0 8px #b6c3ff; animation:starlight-twinkle 1.55s ease-in-out infinite alternate; }
@keyframes lotus-spin { to { transform:rotate(360deg); } } @keyframes kitsune-flare { to { transform:scale(1.11) rotate(14deg); opacity:.55; } } @keyframes starlight-twinkle { to { transform:scale(1.09) rotate(8deg); opacity:.45; } } @media (prefers-reduced-motion:reduce) { .avatar-frame.frame-lotus::before,.avatar-frame.frame-kitsune::before,.avatar-frame.frame-starlight::before { animation:none; } }
.frame-choices { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; } .frame-choice { display:grid; place-items:center; aspect-ratio:1; padding:5px; border:1px solid var(--line); border-radius:10px; background:#17191d; } .frame-choice.selected { border-color:var(--red-soft); outline:2px solid var(--red-soft); } .avatar-frame { display:grid; place-items:center; padding:3px; border:3px solid #d4d6db; border-radius:50%; background:#202229; box-shadow:0 0 0 2px #17191d; } .avatar-frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .frame-default { border-color:#d4d6db; } .frame-crimson { border-color:#ff6973; box-shadow:0 0 0 2px #4e222a,0 0 15px #a73c4b; } .frame-sakura { border-color:#ffc0d8; box-shadow:0 0 0 2px #513142,0 0 14px #d66898; } .frame-wave { border-color:#77d4ff; box-shadow:0 0 0 2px #233c52,0 0 14px #398fc2; } .frame-gold { border-color:#f7cd88; box-shadow:0 0 0 2px #5a4320,0 0 14px #c79235; } .frame-choice .avatar-frame { width:100%; height:100%; } .profile-avatar.avatar-frame { padding:4px; border-radius:22px; } .profile-button #profileBadge.avatar-frame { padding:2px; border-width:2px; border-radius:50%; background:#202229; } .profile-button #profileBadge.avatar-frame img { border-radius:inherit; } 
.cover-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .cover-choice { position:relative; min-height:72px; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:10px; background-color:#17191d; background-position:center; background-size:cover; } .cover-choice::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(9,10,14,.62),rgba(9,10,14,.12)); } .cover-choice span { position:relative; z-index:1; display:block; padding:10px; color:#fff; text-align:left; text-shadow:0 1px 5px #000; font-size:.78rem; font-weight:700; } .cover-choice.selected { border-color:var(--red-soft); outline:2px solid var(--red-soft); }
.profile-avatar-stack { display:grid; justify-items:center; gap:8px; } .profile-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; min-height:0; } .profile-socials:empty { display:none; } .profile-socials a { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(12,13,18,.54); font-size:.78rem; text-decoration:none; } .profile-socials a:hover { border-color:var(--red-soft); color:var(--cream); transform:translateY(-1px); } .settings-socials { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .settings-socials label { display:grid; gap:5px; color:var(--muted); font-size:.8rem; } .settings-socials input { width:100%; min-width:0; padding:9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#17191d; }
.hero { margin:0 0 33px; } .eyebrow { margin:0 0 9px; color:var(--red-soft); letter-spacing:.11em; text-transform:uppercase; font-size:.75rem; font-weight:700; } h1 { margin:0; font-size:clamp(2.25rem,6vw,4.45rem); letter-spacing:-.065em; line-height:1.02; } h1 em { color:var(--red-soft); font-style:normal; } .intro { max-width:430px; margin:19px 0 0; color:var(--muted); line-height:1.55; }
.neko-welcome { display:flex; align-items:center; justify-content:space-between; gap:22px; } .neko-welcome > img { width:154px; height:154px; flex:none; object-fit:cover; border:2px solid var(--cream); border-radius:38% 62% 56% 44%; box-shadow:0 12px 35px #0007,0 0 26px #e74b4b44; animation:neko-idle 3.4s ease-in-out infinite; } .neko-welcome .text-button { margin-top:15px; padding:0; color:var(--cream); } .about-neko { display:flex; align-items:center; gap:35px; max-width:760px; margin:40px auto; padding:28px; border:1px solid #72545a; border-radius:24px; background:linear-gradient(135deg,#252129,#16262b); } .about-neko > img { width:190px; height:190px; object-fit:cover; border:3px solid var(--cream); border-radius:50%; box-shadow:0 0 28px #e74b4b55; } .about-neko .primary-button { margin-top:20px; }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .category-card { min-height:134px; padding:21px; text-align:left; display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:linear-gradient(145deg,#202229,#181a1f); transition:transform .18s, border-color .18s, background .18s; } .category-card:hover { transform:translateY(-3px); border-color:#6d4448; background:#252229; } .category-icon { display:grid; place-items:center; flex:none; width:45px; height:45px; border-radius:13px; color:#20191a; background:var(--cream); font-family:"Noto Sans JP",sans-serif; font-size:1.25rem; font-weight:700; } .category-copy { display:grid; gap:5px; } .category-copy strong { font-size:1.1rem; } .category-copy small { color:var(--muted); } .arrow { margin-left:auto; color:var(--red-soft); font-size:1.5rem; } .muted-card { opacity:.6; } .home-message { min-height:22px; margin:21px 0 0; color:var(--muted); }
.level-header { margin:22px 0 28px; } .level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; } .level-card { min-height:220px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:18px; color:var(--text); text-align:left; background:linear-gradient(145deg,#202229,#181a1f); transition:transform .18s,border-color .18s; } .level-card:hover { transform:translateY(-3px); border-color:var(--red-soft); } .level-card strong { margin:17px 0 10px; font-size:1.35rem; } .level-card small { min-height:60px; color:var(--muted); line-height:1.45; } .level-card > span:last-child { margin-top:auto; color:var(--red-soft); font-size:.9rem; font-weight:700; } .level-tag { display:grid; place-items:center; width:34px; height:28px; border-radius:8px; color:#201516; background:var(--cream); font-size:.78rem; font-weight:700; }
.statistics-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:18px; } .stat-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,#202229,#181a1f); } .stat-card small { display:block; color:var(--muted); } .stat-card strong { display:block; margin-top:9px; color:var(--cream); font-size:1.7rem; letter-spacing:-.04em; } .statistics-panel { margin-top:15px; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--surface); } .statistics-panel h2 { margin:0 0 16px; font-size:1.1rem; } .category-stats,.session-history { display:grid; gap:10px; } .category-stat,.history-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:11px; background:#17191d; } .category-stat strong { min-width:92px; } .category-stat small,.history-row small { color:var(--muted); } .stat-bar { height:8px; flex:1; overflow:hidden; border-radius:9px; background:#30333c; } .stat-bar > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),#ff9b79); } .history-score { margin-left:auto; color:#b9e7ba; font-weight:700; } .empty-stats { margin:0; color:var(--muted); }
.exercise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; } .exercise-card { min-height:215px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#202229,#181a1f); transition:transform .18s,border-color .18s; } .exercise-card:hover { transform:translateY(-3px); border-color:var(--red-soft); } .exercise-card > span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#201516; background:var(--cream); font-family:"Noto Sans JP",sans-serif; font-weight:700; } .exercise-card strong { margin:17px 0 10px; font-size:1.13rem; } .exercise-card small { color:var(--muted); line-height:1.5; }
.quiz-meta { display:flex; gap:12px; align-items:center; margin-bottom:14px; } .back-link,.text-button { border:0; color:var(--muted); background:transparent; padding:6px 0; } .back-link:hover,.text-button:hover { color:var(--text); } .question-count { margin-left:auto; color:var(--muted); font-size:.88rem; } .progress-track { height:6px; overflow:hidden; margin-bottom:27px; border-radius:20px; background:var(--surface-2); } .progress-bar { width:10%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),#ff9b79); transition:width .3s ease; }
.question-card { padding:clamp(24px,6vw,52px); border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,#202229,#181a1f); box-shadow:var(--shadow); } .question-instruction { margin:0 0 16px; color:var(--muted); } .question-text { margin:0 0 34px; font-family:"Noto Sans JP",sans-serif; font-size:clamp(1.65rem,5vw,2.45rem); line-height:1.45; font-weight:600; } .answer-area { display:grid; gap:11px; margin-bottom:15px; } .option { width:100%; padding:15px 17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:var(--surface); text-align:left; transition:border .17s,background .17s; } .option:hover,.option.selected { border-color:var(--red-soft); background:#322326; } .option-key { display:grid; place-items:center; width:25px; height:25px; border:1px solid #565964; border-radius:8px; color:var(--muted); font-size:.77rem; } .text-answer { width:100%; padding:15px 17px; border:1px solid var(--line); border-radius:13px; color:var(--text); outline:none; background:var(--surface); } .text-answer:focus { border-color:var(--red-soft); } .validation-message { min-height:23px; margin:5px 0 12px; color:#ffaaa5; font-size:.9rem; } rt { color:var(--red-soft); font-size:.43em; font-weight:600; } .conjugation-table { width:100%; border-collapse:collapse; margin-bottom:8px; font-family:"Noto Sans JP",sans-serif; font-size:.94rem; } .conjugation-table th,.conjugation-table td { padding:10px 7px; border-bottom:1px solid var(--line); text-align:left; } .conjugation-table th { color:var(--muted); font-family:"DM Sans",sans-serif; font-size:.75rem; } .conjugation-table input { width:100%; min-width:84px; padding:9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#17191d; outline:none; } .conjugation-table input:focus { border-color:var(--red-soft); }
.media-area:empty { display:none; } .oral-clip { position:relative; min-height:162px; margin:-9px 0 25px; padding:20px; overflow:hidden; display:flex; align-items:center; gap:18px; border:1px solid #5d4a4b; border-radius:16px; background:linear-gradient(135deg,#3a252a,#1d3032); } .oral-clip::after { content:""; position:absolute; inset:0; opacity:.35; background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 3px 4px); pointer-events:none; } .oral-scene { z-index:1; font-size:4.2rem; animation:float 2.4s ease-in-out infinite; } .oral-copy { z-index:1; flex:1; } .oral-copy span { color:var(--muted); font-size:.78rem; } .oral-copy p { margin:8px 0 14px; font-family:"Noto Sans JP",sans-serif; font-size:1.12rem; } .play-clip { z-index:1; padding:9px 12px; border:1px solid var(--red-soft); border-radius:10px; color:#2a1819; background:var(--red-soft); font-weight:700; } @keyframes float { 50% { transform:translateY(-7px) rotate(3deg); } }
.drag-hint { margin:0; color:var(--muted); font-size:.88rem; } .particle-bank { display:flex; flex-wrap:wrap; gap:10px; } .particle-chip { min-width:54px; padding:10px 14px; border:1px solid #775054; border-radius:11px; color:var(--text); background:#2d2023; font-family:"Noto Sans JP",sans-serif; font-size:1.05rem; } .particle-chip:hover,.particle-chip.selected { border-color:var(--red-soft); background:#493035; } .particle-slot { display:inline-grid; place-items:center; vertical-align:middle; min-width:88px; height:39px; margin:0 5px; border:1px dashed var(--red-soft); border-radius:9px; color:var(--red-soft); background:#2c1f22; font-family:"DM Sans",sans-serif; font-size:.72rem; } .particle-slot.filled { border-style:solid; color:#201516; background:var(--cream); font-family:"Noto Sans JP",sans-serif; font-size:1.04rem; }
.primary-button,.secondary-button { min-height:48px; border-radius:13px; padding:0 20px; border:1px solid transparent; font-weight:700; } .primary-button { color:#241819; background:var(--red-soft); } .primary-button:hover { background:#ff9999; } .secondary-button { color:var(--text); border-color:var(--line); background:var(--surface-2); } .secondary-button:hover { border-color:#777b85; }
.results-summary { text-align:center; padding:18px 0 34px; } .results-summary h1 { font-size:2.35rem; letter-spacing:-.05em; } .score { margin:16px 0 5px; display:flex; justify-content:center; align-items:baseline; gap:9px; font-weight:700; } .score span:first-child { color:var(--red-soft); font-size:5rem; letter-spacing:-.08em; } .score span:last-child { color:var(--muted); font-size:1.2rem; } .score-message { margin:0; color:var(--cream); font-size:1.1rem; } .results-details { margin-top:13px; display:flex; justify-content:center; gap:17px; color:var(--muted); font-size:.9rem; }
.errors-section { padding:25px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#1e2027,#181a20); } .section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .section-heading h2 { margin:0; font-size:1.25rem; } .errors-list { display:grid; gap:13px; } .error-card { position:relative; overflow:hidden; padding:19px; border:1px solid #353842; border-radius:16px; background:#17191f; } .error-card::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--red-soft); } .error-question { margin:0 0 15px; padding-left:4px; font-family:"Noto Sans JP",sans-serif; font-size:1.06rem; line-height:1.55; overflow-wrap:anywhere; } .error-card dl { display:grid; grid-template-columns:minmax(108px,max-content) minmax(0,1fr); gap:9px 14px; margin:0; font-size:.91rem; } .error-card dt { color:var(--muted); } .error-card dd { min-width:0; margin:0; overflow-wrap:anywhere; word-break:break-word; } .error-card .correct { color:#a8dfab; } .explanation { margin:16px 0 0; padding:14px 0 0 4px; border-top:1px solid var(--line); color:#c8c9ce; font-size:.9rem; line-height:1.6; overflow-wrap:anywhere; word-break:break-word; } .no-errors { margin:0; color:#b9e7ba; }
.result-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:11px; margin:24px auto 0; } .result-actions .text-button { width:100%; }
.toast { position:fixed; z-index:9; right:22px; bottom:22px; max-width:330px; padding:13px 16px; border:1px solid #6e5052; border-radius:12px; color:var(--text); background:#272025; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .22s,transform .22s; } .toast.visible { opacity:1; transform:translateY(0); }
.neko-sensei { position:fixed; z-index:8; right:18px; bottom:15px; display:flex; align-items:flex-end; gap:9px; } .neko-sensei img { width:96px; height:96px; object-fit:cover; border:2px solid var(--cream); border-radius:50%; box-shadow:0 10px 28px #0007; transform-origin:50% 90%; animation:neko-idle 3.4s ease-in-out infinite; } .neko-bubble { max-width:220px; padding:12px 14px; border:1px solid #74595d; border-radius:16px 16px 3px 16px; color:var(--cream); background:#202a34; box-shadow:var(--shadow); font-size:.88rem; line-height:1.35; animation:neko-bubble 4.5s ease-in-out infinite; } .neko-sensei > button { position:absolute; top:-8px; right:0; z-index:2; width:22px; height:22px; border:0; border-radius:50%; color:var(--text); background:#57343a; } .neko-sensei.hidden { display:none; } .neko-sensei.react img { animation:neko-react .6s ease 2; } .neko-sensei.react .neko-bubble { border-color:var(--red-soft); } @keyframes neko-idle { 0%,100% { transform:translateY(0) rotate(-1deg) scale(1); } 50% { transform:translateY(-7px) rotate(1deg) scale(1.025); } } @keyframes neko-bubble { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } } @keyframes neko-react { 0%,100% { transform:translateY(0) rotate(0) scale(1); } 35% { transform:translateY(-16px) rotate(-6deg) scale(1.1); } 70% { transform:translateY(-4px) rotate(5deg) scale(.98); } }
.neko-sensei.no-float img,.neko-sensei.no-float .neko-bubble { animation:none; }
.profile-cover { position:relative; min-height:272px; overflow:hidden; display:flex; align-items:flex-end; margin:15px 0 27px; border:1px solid #54464b; border-radius:22px; background-color:#202229; background-position:center; background-size:cover; box-shadow:var(--shadow); } .profile-cover-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,13,18,.92) 0%,rgba(12,13,18,.57) 46%,rgba(12,13,18,.12) 100%),linear-gradient(0deg,rgba(10,11,15,.75),transparent 65%); } .profile-cover-content { position:relative; z-index:1; display:flex; align-items:flex-end; gap:18px; width:100%; padding:24px; } .profile-cover .avatar-frame { flex:none; width:108px; height:108px; border-radius:27px; } .profile-cover .avatar-frame img { width:100%; height:100%; border-radius:20px; } .profile-cover h1 { font-size:2.7rem; } .profile-cover .intro { margin:6px 0 0; color:#d7d7dc; } .profile-cover .eyebrow { margin-bottom:5px; } .goal-card { display:grid; grid-template-columns:1fr 1.3fr auto; gap:18px; align-items:center; padding:19px; border:1px solid #74595d; border-radius:17px; background:linear-gradient(135deg,#2d2532,#1b2c32); } .goal-card small { display:block; margin-top:5px; color:var(--muted); } .goal-progress { height:10px; overflow:hidden; border-radius:10px; background:#172027; } .goal-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff7373,#f7cd88); } .goal-buttons { display:flex; gap:6px; } .goal-buttons button { padding:7px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#17191d; } .goal-buttons button.selected { color:#241819; border-color:var(--red-soft); background:var(--red-soft); font-weight:700; } .achievements { display:flex; flex-wrap:wrap; gap:9px; } .achievement { padding:10px 12px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:#17191d; font-size:.85rem; } .achievement.unlocked { color:#efe4bf; border-color:#8e7041; background:#312b20; }
.cover-effects { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; } .cover-effects i { display:none; position:absolute; } .cover-night .cover-cloud { display:block; width:42%; height:28%; border-radius:50%; background:rgba(207,224,237,.12); filter:blur(20px); } .cover-night .cloud-one { top:16%; left:-26%; animation:cover-drift 19s linear infinite; } .cover-night .cloud-two { top:41%; left:-42%; opacity:.7; animation:cover-drift 27s linear infinite -8s; } .cover-sakura .cover-petal { display:block; width:10px; height:7px; border-radius:80% 10% 80% 10%; background:#ffd1df; box-shadow:0 0 8px rgba(255,190,214,.7); animation:petal-fall 8s linear infinite; } .cover-sakura .petal-one { left:42%; top:-12%; animation-delay:-1s; } .cover-sakura .petal-two { left:65%; top:-8%; animation-delay:-4s; animation-duration:10s; } .cover-sakura .petal-three { left:81%; top:-18%; animation-delay:-6s; animation-duration:7s; } .cover-sakura .petal-four { left:55%; top:-15%; animation-delay:-2s; animation-duration:12s; } .cover-wave .cover-wave { display:block; right:-15%; left:-15%; height:42px; border-top:2px solid rgba(190,241,255,.55); border-radius:50%; opacity:.7; animation:wave-sway 6s ease-in-out infinite; } .cover-wave .wave-one { bottom:24%; } .cover-wave .wave-two { bottom:13%; opacity:.45; animation-delay:-3s; } .cover-study .cover-lantern-glow { display:block; right:10%; bottom:15%; width:110px; height:110px; border-radius:50%; background:rgba(255,182,83,.28); filter:blur(20px); animation:lantern-glow 3.2s ease-in-out infinite; } .profile-cover.animations-off .cover-effects { display:none; } @keyframes cover-drift { from { transform:translateX(0) } to { transform:translateX(360%) } } @keyframes petal-fall { from { transform:translate(0,-20px) rotate(0deg); opacity:0 } 10% { opacity:.9 } to { transform:translate(120px,330px) rotate(310deg); opacity:0 } } @keyframes wave-sway { 0%,100% { transform:translateX(-2%) scaleX(.94) } 50% { transform:translateX(3%) scaleX(1.06) } } @keyframes lantern-glow { 0%,100% { opacity:.35; transform:scale(.9) } 50% { opacity:.8; transform:scale(1.08) } } @media (prefers-reduced-motion:reduce) { .cover-effects i { animation:none !important; } }
.settings-panel { display:grid; gap:18px; } .setting-group { display:grid; gap:9px; padding-bottom:16px; border-bottom:1px solid var(--line); } .setting-group:last-child { padding:0; border:0; } .setting-group strong { color:var(--cream); } .setting-group label { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#d2d3d7; font-size:.92rem; } .setting-group label input { accent-color:var(--red-soft); } .setting-group select { padding:6px 9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#17191d; } .setting-group small { color:var(--muted); font-size:.8rem; }
@media (max-width:680px) { .news-layout { grid-template-columns:1fr; } .news-article { min-height:0; } .level-grid,.exercise-grid { grid-template-columns:1fr; } .statistics-cards { grid-template-columns:repeat(2,1fr); } .profile-grid { grid-template-columns:repeat(3,1fr); } .level-card,.exercise-card { min-height:150px; } .level-card small { min-height:auto; } } @media (max-width:580px) { .app-shell { width:min(100% - 24px,850px); } .topbar { margin-bottom:38px; } .news-ticker { margin:-24px 0 27px; } .news-comments > div:first-child { align-items:flex-start; flex-direction:column; gap:3px; } #newsCommentForm { align-items:stretch; flex-direction:column; } .version { display:none; } .furigana-toggle { margin-left:auto; } .profile-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .profile-avatar { width:82px; height:82px; } .cover-choices { grid-template-columns:1fr; } .profile-cover { min-height:310px; } .profile-cover-content { align-items:flex-start; flex-direction:column; gap:13px; padding:18px; } .profile-cover h1 { font-size:2.25rem; } .category-grid { grid-template-columns:1fr; } .category-card { min-height:105px; } .quiz-meta { flex-wrap:wrap; } .question-count { margin-left:auto; } .question-card { border-radius:18px; } .errors-section { padding:17px; } .score span:first-child { font-size:4.3rem; } }
@media (max-width:580px) { .neko-welcome,.about-neko { flex-direction:column; align-items:flex-start; } .neko-welcome > img { width:120px; height:120px; align-self:flex-end; margin-top:-75px; } .about-neko { gap:20px; margin:22px 0; padding:20px; } .about-neko > img { width:135px; height:135px; align-self:center; } }
.exam-setup-panel { display:grid; gap:18px; } .exam-setup-panel h2 { margin:0; font-size:1.05rem; } .compact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .compact-grid .level-card { min-height:150px; padding:16px; } .exam-categories { display:flex; flex-wrap:wrap; gap:10px; } .exam-categories label, .exam-options label { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--muted); } .exam-categories input { accent-color:var(--red); } .exam-options { display:flex; flex-wrap:wrap; gap:12px; } .exam-options select { color:var(--text); background:var(--panel); border:0; font:inherit; } .exam-timer { color:#ffcbcb; border-color:#79474b; font-variant-numeric:tabular-nums; } @media (max-width:680px) { .compact-grid { grid-template-columns:1fr; } }
.avatar-frame.frame-orb-mist,.avatar-frame.frame-orb-solar,.avatar-frame.frame-orb-test { position:relative; overflow:visible; isolation:isolate; } .avatar-frame.frame-orb-mist::before,.avatar-frame.frame-orb-solar::before,.avatar-frame.frame-orb-test::before { content:""; position:absolute; z-index:-1; inset:-9px; border-radius:50%; animation:orb-spin 5.5s linear infinite; } .avatar-frame.frame-orb-mist::before { background:conic-gradient(from 20deg,#98f8ff,#7067ff,#f6b7ff,#68e7c4,#98f8ff); filter:blur(2px); box-shadow:0 0 14px #738bff,0 0 27px #6ff0ce; } .avatar-frame.frame-orb-solar::before { background:conic-gradient(#fff0a2,#ff9b24,#ffdf68,#ed542a,#fff0a2); filter:blur(2px); box-shadow:0 0 14px #ff9d2c,0 0 28px #ff6a2b; animation-duration:3.3s; } .avatar-frame.frame-orb-test::before { background:conic-gradient(#d2b6ff,#8b5cf6,#5eead4,#8b5cf6,#d2b6ff); filter:blur(2px); box-shadow:0 0 14px #a78bfa,0 0 30px #5eead4; animation-duration:4.2s; } .avatar-frame.frame-orb-mist::after,.avatar-frame.frame-orb-solar::after,.avatar-frame.frame-orb-test::after { content:"✦  ·  ✦"; position:absolute; z-index:-1; inset:-18px; display:grid; place-items:start center; color:white; font-size:.72rem; text-shadow:0 0 7px currentColor; animation:orb-pulse 1.8s ease-in-out infinite alternate; pointer-events:none; } @keyframes orb-spin { to { transform:rotate(360deg); } } @keyframes orb-pulse { to { transform:scale(1.08); opacity:.48; } }
body.season-back-to-school { --red:#e18632; --red-soft:#ffc066; --cream:#fff1ca; background:radial-gradient(circle at 13% 2%,#3d3353 0,transparent 32%),linear-gradient(135deg,#171b2a,#15171c 64%,#222113); } body.season-back-to-school::before { content:"✎  ノート  ·  あたらしい学期  ·  ✎"; position:fixed; z-index:-1; top:78px; left:0; right:0; color:rgba(255,232,167,.07); text-align:center; font:700 clamp(1rem,3vw,2rem) 'Noto Sans JP',sans-serif; letter-spacing:.18em; pointer-events:none; } body.season-back-to-school .hero { border-color:rgba(255,192,102,.34); background:linear-gradient(115deg,rgba(53,48,77,.88),rgba(26,32,42,.93)); } body.season-back-to-school .category-icon { background:#fff0c7; }
@media (prefers-reduced-motion:reduce) { .avatar-frame.frame-orb-mist::before,.avatar-frame.frame-orb-solar::before,.avatar-frame.frame-orb-mist::after,.avatar-frame.frame-orb-solar::after { animation:none; } }
.reward-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; } .reward-panel h2 { margin:3px 0 7px; } .reward-panel .eyebrow { margin:0; } .loot-box-stage { min-height:390px; display:grid; place-items:center; gap:18px; padding:38px 20px; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 50% 39%,rgba(118,98,239,.24),transparent 31%),linear-gradient(150deg,#212332,#17191f); overflow:hidden; } .loot-box { position:relative; width:190px; height:178px; border:0; background:transparent; color:#fff4d2; perspective:600px; cursor:pointer; transition:transform .2s; } .loot-box:not(:disabled):hover { transform:translateY(-6px) scale(1.03); } .loot-box:disabled { cursor:default; opacity:.55; } .loot-box-glow { position:absolute; inset:-48px; border-radius:50%; background:radial-gradient(circle,rgba(255,207,100,.65),rgba(145,102,255,.28) 35%,transparent 68%); filter:blur(5px); animation:loot-glow 1.8s ease-in-out infinite alternate; } .loot-box-lid,.loot-box-body { position:absolute; left:17px; right:17px; display:grid; place-items:center; font-family:'Noto Sans JP',sans-serif; font-weight:700; text-shadow:0 2px 0 #604129; box-shadow:inset 0 0 0 2px rgba(255,241,187,.55),0 12px 20px rgba(0,0,0,.35); } .loot-box-lid { top:19px; height:68px; z-index:2; border-radius:16px 16px 8px 8px; font-size:2rem; background:linear-gradient(135deg,#f8c467,#bd6d42); transform-origin:bottom; } .loot-box-body { top:81px; height:79px; border-radius:7px 7px 17px 17px; font-size:2.35rem; background:linear-gradient(135deg,#a95d45,#673047); } .loot-box.opening { animation:loot-shake .72s ease-in-out; } .loot-box.opening .loot-box-lid { animation:loot-lid .72s cubic-bezier(.2,.8,.2,1) forwards; } .loot-box.opening .loot-box-glow { animation:loot-flash .72s ease-out forwards; } .loot-reveal { max-width:370px; text-align:center; animation:reveal-in .45s ease-out both; } .loot-reveal-icon { display:grid; place-items:center; width:65px; height:65px; margin:0 auto 10px; border-radius:50%; color:#fff4d3; font-size:2rem; background:radial-gradient(circle,#7257d9,#1d254a); box-shadow:0 0 24px #8c76ef; } .loot-reveal h2 { margin:4px 0 7px; color:var(--cream); } .loot-reveal p:last-child { margin:0; color:var(--muted); } @keyframes loot-glow { to { transform:scale(1.13); opacity:.72; } } @keyframes loot-shake { 20%,60% { transform:translateX(-10px) rotate(-3deg); } 40%,80% { transform:translateX(10px) rotate(3deg); } } @keyframes loot-lid { 58% { transform:rotateX(-118deg) translateY(-7px); opacity:1; } 100% { transform:rotateX(-125deg) translateY(-45px); opacity:0; } } @keyframes loot-flash { 55% { transform:scale(2.1); opacity:1; } 100% { transform:scale(2.5); opacity:0; } } @keyframes reveal-in { from { transform:translateY(12px) scale(.94); opacity:0; } to { transform:none; opacity:1; } } @media (max-width:580px) { .reward-panel { align-items:flex-start; flex-direction:column; } } @media (prefers-reduced-motion:reduce) { .loot-box-glow,.loot-box.opening,.loot-box.opening .loot-box-lid,.loot-box.opening .loot-box-glow,.loot-reveal { animation:none; } }
.reward-notification { display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; color:#23191a; background:#ff7379; font-size:.68rem; font-weight:800; line-height:1; box-shadow:0 0 0 2px #17191d; animation:reward-badge .9s ease-in-out infinite alternate; } .rarity-badge { display:inline-block; padding:5px 9px; margin:1px 0 3px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .rarity-legendary { color:#fff0bf; background:linear-gradient(90deg,#8458ea,#e8aa3f,#ffef9b,#8458ea); background-size:230% 100%; box-shadow:0 0 15px rgba(229,168,63,.45); animation:rarity-shimmer 2.2s linear infinite; } .rarity-seasonal { color:#ffe8b1; background:#655043; } @keyframes reward-badge { to { transform:scale(1.12); box-shadow:0 0 0 2px #17191d,0 0 11px #ff777c; } } @keyframes rarity-shimmer { to { background-position:230% 0; } } @media (prefers-reduced-motion:reduce) { .reward-notification,.rarity-legendary { animation:none; } }
.profile-dropdown #menuRewardCount { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 4px; border-radius:999px; color:#24191a; background:#ff7379; font-size:.67rem; font-weight:800; } .reward-code-panel { display:grid; gap:12px; } .reward-code-panel h2,.reward-code-panel p { margin:0; } .reward-code-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .reward-code-actions .text-answer { flex:1 1 210px; } .qr-scanner { display:grid; gap:10px; max-width:440px; padding:12px; border:1px dashed #73675f; border-radius:14px; background:#15171c; } .qr-scanner video { width:100%; border-radius:10px; background:#050607; aspect-ratio:4/3; object-fit:cover; }
.admin-reward-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px; border:1px solid rgba(255,191,96,.42); border-radius:13px; color:#ffe4a8; background:linear-gradient(110deg,rgba(95,57,31,.4),rgba(44,31,66,.36)); } .admin-reward-tools strong::before { content:"⚙ "; }
/* Coffre cérémoniel : nouveau modèle, massif et inspiré d’un coffret japonais laqué. */
.loot-box { width:246px !important; height:205px !important; perspective:1400px !important; } .chest-3d { inset:0 -21px -13px !important; transform:rotateX(-17deg) rotateY(-31deg) scale(1) !important; } .loot-box:not(:disabled):hover .chest-3d { transform:rotateX(-14deg) rotateY(-23deg) translateY(-7px) scale(1.03) !important; } .chest-lid,.chest-body { left:34px !important; right:34px !important; } .chest-lid { top:19px !important; height:79px !important; } .chest-body { top:92px !important; height:102px !important; } .lid-front { border:4px solid #e4b25f !important; border-radius:42px 42px 11px 11px !important; background:repeating-linear-gradient(90deg,rgba(255,220,142,.12) 0 5px,transparent 5px 25px),linear-gradient(145deg,#a82634,#641f36 48%,#30162f) !important; box-shadow:inset 0 12px 18px rgba(255,217,141,.18),inset 0 -16px 20px rgba(15,5,18,.4),0 16px 20px rgba(0,0,0,.5) !important; } .body-front { border:4px solid #dca852 !important; border-radius:11px 11px 21px 21px !important; background:repeating-linear-gradient(90deg,rgba(255,225,151,.12) 0 5px,transparent 5px 26px),linear-gradient(145deg,#8e2739,#4a1d35 55%,#26132b) !important; box-shadow:inset 0 12px 18px rgba(255,214,127,.12),inset 0 -20px 22px rgba(11,4,15,.42),0 17px 22px rgba(0,0,0,.58) !important; } .lid-front::before,.body-front::before { content:""; position:absolute; left:19%; right:19%; height:8px; border-top:2px solid rgba(255,231,164,.9); border-bottom:2px solid rgba(75,23,34,.8); background:linear-gradient(90deg,#8e5628,#f4cf7a,#8e5628); box-shadow:0 3px 7px rgba(0,0,0,.35); } .lid-front::before { top:23px; } .body-front::before { top:44px; } .lid-front::after { content:"✦"; position:absolute; top:15px; left:50%; width:36px; height:36px; transform:translateX(-50%); display:grid; place-items:center; border:2px solid #ffdc88; border-radius:50%; color:#7c2231; background:radial-gradient(circle,#ffe5a0,#c17b35); box-shadow:0 0 12px rgba(255,211,111,.65); text-shadow:none; } .lid-top,.body-top { height:58px !important; border:3px solid #dba854 !important; background:repeating-linear-gradient(90deg,#b94642 0 22px,#7a2439 22px 28px),linear-gradient(#e0ad5e,#78253b) !important; } .lid-side,.body-side { right:-60px !important; width:60px !important; border:3px solid #c48a43 !important; background:repeating-linear-gradient(0deg,#59203a 0 18px,#35172d 18px 24px),linear-gradient(90deg,#8e273b,#32152a) !important; box-shadow:inset 14px 0 17px rgba(0,0,0,.36) !important; } .chest-lock { top:-14px !important; width:37px !important; height:37px !important; transform:translateX(-50%) translateZ(22px) !important; border:3px solid #ffe19b !important; border-radius:9px !important; color:#722332 !important; background:radial-gradient(circle at 35% 30%,#ffe8a6,#d48b37 66%,#8b4926) !important; box-shadow:0 0 15px #ffd675,0 5px 8px rgba(0,0,0,.35) !important; font-size:.78rem !important; } .loot-beam { width:70px !important; height:190px !important; bottom:64px !important; }
/* Coffre illustré : une vraie silhouette 3D remplace l'ancien faux volume CSS. */
.loot-box.loot-chest-asset { width:min(340px,86vw) !important; height:245px !important; padding:0 !important; border:0 !important; background:transparent !important; perspective:none !important; transform-style:flat !important; overflow:visible !important; filter:drop-shadow(0 17px 18px rgba(0,0,0,.45)) !important; }
.loot-chest-art { position:relative; z-index:2; display:block; width:100%; height:100%; perspective:820px; filter:drop-shadow(0 0 0 transparent); transition:filter .35s ease; }
.loot-chest-art img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.loot-chest-body { position:absolute; inset:0; clip-path:inset(42% 0 0 0); }
.loot-chest-lid-art { position:absolute; z-index:3; inset:0 0 auto; height:44%; overflow:hidden; transform-origin:50% 99%; transform-style:preserve-3d; animation:chest-asset-idle 3.8s ease-in-out infinite; }
.loot-chest-lid-art img { position:absolute; inset:0; width:100%; height:245px; max-width:none; }
.loot-box.loot-chest-asset:not(:disabled):hover .loot-chest-art { filter:drop-shadow(0 0 20px rgba(255,203,104,.38)); }
.loot-box.loot-chest-asset .loot-beam { z-index:1 !important; bottom:34px !important; width:180px !important; height:240px !important; }
.loot-box.loot-chest-asset.opening { animation:none !important; }
.loot-box.loot-chest-asset.opening .loot-chest-lid-art { animation:chest-lid-art-open 3.2s cubic-bezier(.18,.82,.22,1) both !important; }
.loot-box.loot-chest-asset.opening .loot-chest-body { animation:chest-body-art-open 3.2s cubic-bezier(.18,.82,.22,1) both !important; }
.loot-box.loot-chest-asset.opening .loot-beam { animation:chest-asset-beam 3.2s ease-out both !important; }
#lootBoxStage[data-rarity="common"] .loot-box.loot-chest-asset.opening .loot-chest-lid-art,#lootBoxStage[data-rarity="common"] .loot-box.loot-chest-asset.opening .loot-chest-body,#lootBoxStage[data-rarity="common"] .loot-box.loot-chest-asset.opening .loot-beam { animation-duration:.9s !important; } #lootBoxStage[data-rarity="rare"] .loot-box.loot-chest-asset.opening .loot-chest-lid-art,#lootBoxStage[data-rarity="rare"] .loot-box.loot-chest-asset.opening .loot-chest-body,#lootBoxStage[data-rarity="rare"] .loot-box.loot-chest-asset.opening .loot-beam { animation-duration:1.5s !important; } #lootBoxStage[data-rarity="epic"] .loot-box.loot-chest-asset.opening .loot-chest-lid-art,#lootBoxStage[data-rarity="epic"] .loot-box.loot-chest-asset.opening .loot-chest-body,#lootBoxStage[data-rarity="epic"] .loot-box.loot-chest-asset.opening .loot-beam { animation-duration:2.3s !important; } #lootBoxStage[data-rarity="legendary"] .loot-box.loot-chest-asset.opening .loot-chest-lid-art,#lootBoxStage[data-rarity="legendary"] .loot-box.loot-chest-asset.opening .loot-chest-body,#lootBoxStage[data-rarity="legendary"] .loot-box.loot-chest-asset.opening .loot-beam { animation-duration:3.2s !important; }
@keyframes chest-asset-idle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } } @keyframes chest-lid-art-open { 0%,20% { transform:translateY(0) rotateX(0deg); } 30%,42% { transform:translateX(-8px) rotate(-2deg); } 36%,48% { transform:translateX(9px) rotate(2deg); } 67% { transform:translateY(-1px) rotateX(0deg); } 79% { transform:translateY(-9px) rotateX(-48deg); filter:brightness(1.16) saturate(1.25); } 100% { transform:translateY(-54px) rotateX(-112deg); opacity:.06; filter:brightness(1.75) saturate(1.45); } } @keyframes chest-body-art-open { 0%,68% { transform:translateY(0) scale(1); filter:brightness(1); } 82% { transform:translateY(2px) scale(1.025); filter:brightness(1.25) saturate(1.2); } 100% { transform:translateY(4px) scale(1.035); filter:brightness(1.6) saturate(1.35); } } @keyframes chest-asset-beam { 0%,68% { opacity:0; transform:translateX(-50%) scaleY(.08); } 82% { opacity:1; transform:translateX(-50%) scaleY(1); } 100% { opacity:0; transform:translateX(-50%) scaleY(1.35); } }
@media (prefers-reduced-motion:reduce) { .loot-chest-lid-art,.loot-box.loot-chest-asset.opening .loot-chest-lid-art,.loot-box.loot-chest-asset.opening .loot-chest-body,.loot-box.loot-chest-asset.opening .loot-beam { animation:none !important; } }

.loot-box { perspective:1200px !important; } .chest-3d { inset:5px -9px -5px !important; transform:rotateX(-15deg) rotateY(-29deg) scale(1.02) !important; } .loot-box:not(:disabled):hover .chest-3d { transform:rotateX(-13deg) rotateY(-20deg) translateY(-6px) scale(1.05) !important; } .chest-lid,.chest-body { left:20px !important; right:20px !important; } .chest-lid { top:18px !important; } .chest-body { top:82px !important; height:88px !important; } .lid-top,.body-top { height:43px !important; } .lid-side,.body-side { right:-48px !important; width:48px !important; background:linear-gradient(90deg,#8f4055,#4a233f) !important; box-shadow:inset 10px 0 15px rgba(0,0,0,.24) !important; } .chest-lock { transform:translateX(-50%) translateZ(15px) !important; width:30px !important; height:30px !important; } .loot-box.opening .chest-3d { animation:chest-thick-suspense 3.05s ease-in-out both !important; } @keyframes chest-thick-suspense { 0%,20% { transform:rotateX(-15deg) rotateY(-29deg) scale(1.02); } 35%,55% { transform:rotateX(-12deg) rotateY(-29deg) translateX(-8px) scale(1.03); } 45%,65% { transform:rotateX(-12deg) rotateY(-29deg) translateX(10px) scale(1.04); } 82% { transform:rotateX(-15deg) rotateY(-8deg) scale(1.11); } 100% { transform:rotateX(-15deg) rotateY(-8deg) scale(1.06); } }
.loot-box { perspective:1200px; } .chest-3d { inset:5px -9px -5px; transform:rotateX(-15deg) rotateY(-29deg) scale(1.02); } .loot-box:not(:disabled):hover .chest-3d { transform:rotateX(-13deg) rotateY(-20deg) translateY(-6px) scale(1.05); } .chest-lid,.chest-body { left:20px; right:20px; } .chest-lid { top:18px; } .chest-body { top:82px; height:88px; } .lid-top,.body-top { height:43px; } .lid-side,.body-side { right:-48px; width:48px; background:linear-gradient(90deg,#8f4055,#4a233f); box-shadow:inset 10px 0 15px rgba(0,0,0,.24); } .chest-lock { transform:translateX(-50%) translateZ(15px); width:30px; height:30px; } @keyframes chest-3d-suspense { 0%,20% { transform:rotateX(-15deg) rotateY(-29deg) scale(1.02); } 35%,55% { transform:rotateX(-12deg) rotateY(-29deg) translateX(-8px) scale(1.03); } 45%,65% { transform:rotateX(-12deg) rotateY(-29deg) translateX(10px) scale(1.04); } 82% { transform:rotateX(-15deg) rotateY(-8deg) scale(1.11); } 100% { transform:rotateX(-15deg) rotateY(-8deg) scale(1.06); } }
.frame-choice { position:relative; overflow:visible; } .frame-choice.locked { cursor:not-allowed; opacity:.58; filter:saturate(.55); } .frame-choice.locked::after { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; background:rgba(8,9,12,.38); } .frame-choice .cosmetic-lock { z-index:4; right:-5px; bottom:-5px; width:27px; height:27px; font-size:.82rem; }
.loot-box-stage { position:relative; isolation:isolate; background-image:linear-gradient(180deg,rgba(10,11,18,.35),rgba(12,12,19,.82)),radial-gradient(circle at 50% 39%,rgba(118,98,239,.3),transparent 31%),url('assets/covers/cover-night.png'); background-position:center; background-size:cover; } .loot-box-stage::before { content:""; position:absolute; z-index:-1; inset:0; background:repeating-linear-gradient(120deg,transparent 0 42px,rgba(255,230,170,.045) 43px 44px); } .loot-box-stage::after { content:"✦   ✦   ✦"; position:absolute; z-index:-1; top:22px; left:0; right:0; color:rgba(255,232,170,.38); text-align:center; letter-spacing:5rem; font-size:1.15rem; text-shadow:0 0 12px #f0bb74; }
#lootBoxStage[data-rarity="common"] { --loot-color:#a5aab7; } #lootBoxStage[data-rarity="rare"] { --loot-color:#55aaf7; } #lootBoxStage[data-rarity="epic"] { --loot-color:#b278f5; } #lootBoxStage[data-rarity="legendary"] { --loot-color:#ffd267; } #lootBoxStage[data-rarity] .loot-box-glow { background:radial-gradient(circle,color-mix(in srgb,var(--loot-color) 78%,white),color-mix(in srgb,var(--loot-color) 35%,transparent) 35%,transparent 68%); } #lootBoxStage[data-rarity] .loot-box { filter:drop-shadow(0 0 14px var(--loot-color)); } #lootBoxStage[data-rarity="common"] .loot-box.opening,#lootBoxStage[data-rarity="common"] .loot-box.opening .loot-box-lid,#lootBoxStage[data-rarity="common"] .loot-box.opening .loot-box-glow { animation-duration:.9s; } #lootBoxStage[data-rarity="rare"] .loot-box.opening,#lootBoxStage[data-rarity="rare"] .loot-box.opening .loot-box-lid,#lootBoxStage[data-rarity="rare"] .loot-box.opening .loot-box-glow { animation-duration:1.5s; } #lootBoxStage[data-rarity="epic"] .loot-box.opening,#lootBoxStage[data-rarity="epic"] .loot-box.opening .loot-box-lid,#lootBoxStage[data-rarity="epic"] .loot-box.opening .loot-box-glow { animation-duration:2.3s; } #lootBoxStage[data-rarity="legendary"] .loot-box.opening,#lootBoxStage[data-rarity="legendary"] .loot-box.opening .loot-box-lid,#lootBoxStage[data-rarity="legendary"] .loot-box.opening .loot-box-glow { animation-duration:3.2s; } .rarity-common { color:#d9dce5; background:#4f5564; } .rarity-rare { color:#d8efff; background:#286eb4; box-shadow:0 0 13px rgba(79,167,255,.35); } .rarity-epic { color:#f1dcff; background:#7040a7; box-shadow:0 0 14px rgba(178,120,245,.4); }
.avatar-frame.frame-orb-test::before { inset:-11px; background:radial-gradient(circle,rgba(20,22,48,.95) 0 52%,transparent 53%),repeating-conic-gradient(from 8deg,#d8b364 0 4deg,#37265c 5deg 12deg,#182744 13deg 19deg); filter:none; box-shadow:0 0 0 2px #f3d387,0 0 0 5px #31234d,0 0 16px #e8bd66,0 0 30px #7963ba; animation:dojo-orbit 7s linear infinite; } .avatar-frame.frame-orb-test::after { content:"⛩"; z-index:3; inset:-17px; color:#f6d985; font-size:.7rem; opacity:.9; text-shadow:0 0 8px #e7b24e; animation:dojo-emblem 2.6s ease-in-out infinite alternate; } @keyframes dojo-orbit { to { transform:rotate(360deg); } } @keyframes dojo-emblem { to { transform:translateY(-3px) scale(1.12); opacity:.55; } } @media (prefers-reduced-motion:reduce) { .avatar-frame.frame-orb-test::before,.avatar-frame.frame-orb-test::after { animation:none; } }
.loot-box { perspective:900px; transform-style:preserve-3d; } .loot-box .loot-box-glow { display:none; } .chest-3d { position:absolute; inset:12px 9px 5px; display:block; transform-style:preserve-3d; transform:rotateX(-10deg) rotateY(-18deg); transition:transform .45s ease; } .loot-box:not(:disabled):hover .chest-3d { transform:rotateX(-8deg) rotateY(-8deg) translateY(-5px); } .chest-lid,.chest-body { position:absolute; left:18px; right:18px; transform-style:preserve-3d; } .chest-lid { top:16px; height:67px; transform-origin:center bottom; z-index:3; } .chest-body { top:78px; height:83px; } .chest-lid i,.chest-body i { position:absolute; display:grid; place-items:center; font-style:normal; box-sizing:border-box; } .lid-front,.body-front { inset:0; border:2px solid rgba(255,231,156,.7); color:#fff0bf; text-shadow:0 2px 0 #60342c; box-shadow:inset 0 0 19px rgba(255,212,117,.2),0 8px 15px rgba(0,0,0,.33); backface-visibility:hidden; } .lid-front { border-radius:16px 16px 7px 7px; font-size:2rem; background:linear-gradient(135deg,#ffcf75,#bd6941 50%,#76384a); } .body-front { border-radius:6px 6px 17px 17px; font-size:2.3rem; background:linear-gradient(135deg,#bd704e,#6f3150 58%,#3a203e); } .lid-top,.body-top { left:0; right:0; height:28px; transform-origin:top; transform:rotateX(90deg) translateZ(0); background:linear-gradient(90deg,#ffd98b,#9a4f46,#573047); border:2px solid rgba(255,231,156,.45); } .lid-top { top:0; border-radius:15px 15px 0 0; } .body-top { top:0; } .lid-side,.body-side { top:0; right:-28px; width:28px; height:100%; transform-origin:left; transform:rotateY(90deg); background:linear-gradient(#783651,#3f203d); border:2px solid rgba(255,213,132,.35); } .chest-lock { z-index:4; left:50%; top:-8px; width:28px; height:28px; transform:translateX(-50%) translateZ(8px); border:2px solid #ffe4a1; border-radius:8px; color:#6a3943; background:#f2b94e; box-shadow:0 0 9px #ffd46e; font-size:.65rem; } .loot-beam { position:absolute; z-index:1; left:50%; bottom:54px; width:35px; height:160px; opacity:0; transform:translateX(-50%) scaleY(.15); transform-origin:bottom; clip-path:polygon(30% 100%,70% 100%,100% 0,0 0); background:linear-gradient(to top,rgba(255,230,139,.15),rgba(255,251,212,.86),transparent); filter:blur(2px); } .loot-box.opening .chest-3d { animation:chest-3d-suspense 3.05s ease-in-out both; } .loot-box.opening .chest-lid { animation:chest-3d-lid 3.05s cubic-bezier(.2,.8,.2,1) forwards; } .loot-box.opening .loot-beam { animation:chest-beam 3.05s ease-out forwards; } @keyframes chest-3d-suspense { 0%,20% { transform:rotateX(-10deg) rotateY(-18deg); } 35%,55% { transform:rotateX(-8deg) rotateY(-18deg) translateX(-7px); } 45%,65% { transform:rotateX(-8deg) rotateY(-18deg) translateX(8px); } 82% { transform:rotateX(-12deg) rotateY(-4deg) scale(1.08); } 100% { transform:rotateX(-12deg) rotateY(-4deg) scale(1.04); } } @keyframes chest-3d-lid { 0%,72% { transform:rotateX(0deg); } 88% { transform:rotateX(-105deg) translateY(-8px); } 100% { transform:rotateX(-118deg) translateY(-24px); opacity:.15; } } @keyframes chest-beam { 0%,70% { opacity:0; transform:translateX(-50%) scaleY(.12); } 88% { opacity:1; transform:translateX(-50%) scaleY(1); } 100% { opacity:0; transform:translateX(-50%) scaleY(1.25); } } #lootBoxStage[data-rarity="common"] .loot-box.opening .chest-3d,#lootBoxStage[data-rarity="common"] .loot-box.opening .chest-lid,#lootBoxStage[data-rarity="common"] .loot-box.opening .loot-beam { animation-duration:.9s; } #lootBoxStage[data-rarity="rare"] .loot-box.opening .chest-3d,#lootBoxStage[data-rarity="rare"] .loot-box.opening .chest-lid,#lootBoxStage[data-rarity="rare"] .loot-box.opening .loot-beam { animation-duration:1.5s; } #lootBoxStage[data-rarity="epic"] .loot-box.opening .chest-3d,#lootBoxStage[data-rarity="epic"] .loot-box.opening .chest-lid,#lootBoxStage[data-rarity="epic"] .loot-box.opening .loot-beam { animation-duration:2.3s; } #lootBoxStage[data-rarity="legendary"] .loot-box.opening .chest-3d,#lootBoxStage[data-rarity="legendary"] .loot-box.opening .chest-lid,#lootBoxStage[data-rarity="legendary"] .loot-box.opening .loot-beam { animation-duration:3.2s; } @media (prefers-reduced-motion:reduce) { .loot-box.opening .chest-3d,.loot-box.opening .chest-lid,.loot-box.opening .loot-beam { animation:none; } }
#lootBoxScreen { position:relative; isolation:isolate; padding:22px; border-radius:28px; overflow:hidden; background:radial-gradient(circle at 77% 15%,rgba(195,139,255,.16),transparent 30%),radial-gradient(circle at 15% 74%,rgba(255,189,76,.13),transparent 29%),linear-gradient(135deg,rgba(27,23,45,.72),rgba(17,20,29,.72)); } #lootBoxScreen::before,#lootBoxScreen::after { content:"✦"; position:absolute; z-index:-1; color:rgba(255,235,173,.22); font-size:clamp(4rem,12vw,10rem); filter:drop-shadow(0 0 18px #8f72de); animation:atelier-star 5s ease-in-out infinite alternate; } #lootBoxScreen::before { top:11%; right:5%; } #lootBoxScreen::after { bottom:7%; left:4%; font-size:clamp(3rem,8vw,7rem); animation-delay:-2s; } .loot-box.opening { animation:loot-suspense 3.05s cubic-bezier(.22,.61,.36,1) both; } .loot-box.opening .loot-box-lid { animation:loot-lid-suspense 3.05s cubic-bezier(.2,.8,.2,1) forwards; } .loot-box.opening .loot-box-glow { animation:loot-flash-suspense 3.05s ease-out forwards; } @keyframes loot-suspense { 0%,20% { transform:translateY(0) scale(1); } 27%,33% { transform:translateX(-5px) rotate(-2deg); } 39%,45% { transform:translateX(6px) rotate(2deg); } 50%,58% { transform:translateX(-9px) rotate(-3deg) scale(1.02); } 65%,73% { transform:translateX(10px) rotate(3deg) scale(1.04); } 82% { transform:scale(1.08); } 100% { transform:scale(1.02); } } @keyframes loot-lid-suspense { 0%,73% { transform:rotateX(0); opacity:1; } 88% { transform:rotateX(-112deg) translateY(-17px); opacity:1; } 100% { transform:rotateX(-125deg) translateY(-48px); opacity:0; } } @keyframes loot-flash-suspense { 0%,70% { transform:scale(.8); opacity:.28; } 84% { transform:scale(1.3); opacity:1; } 100% { transform:scale(2.7); opacity:0; } } @keyframes atelier-star { to { transform:translateY(-20px) rotate(18deg); opacity:.52; } } @media (prefers-reduced-motion:reduce) { #lootBoxScreen::before,#lootBoxScreen::after,.loot-box.opening,.loot-box.opening .loot-box-lid,.loot-box.opening .loot-box-glow { animation:none; } }