/* デフォルト（ライトモード） */
:root {
    --bg-main: #f3e6c9;

    --btn-bg: #fbf6ea;
    --btn-border: #d8c6a6;
    --btn-text: #4a3a2a;

    --bg-card: #e8d6b3;

    --text-main: #4a3a2a;
    --text-sub: #6a5741;

    --accent: #d28b00;

    --card-border: #cdb990;

    --tag-bg: #e2cfa7;
    --tag-border: #c8b48a;
    --tag-text: #4a3a2a;

    --icon-bg: #f7eed9;
    --igon-border: #cdb990;
    --bodey-text: #5a4a36; /* 本文用 */
}

/* ダークモード */
body.dark {
    --bg-main: #2b2b2b;

    --btn-bg: #3a3a3a;
    --btn-border: #505050;
    --btn-text: #ffffff;

    --bg-card: #3a3a3a;

    --text-main: #ffffff;
    --text-sub: #cfcfcf;

    --accent: #4a90e2;

    --card-border: #505050;

    --tag-bg: #2f2f2f;
    --tag-border: #505050;
    --tag-text: #dddddd;

    --icon-bg: #1f1f1f;
    --igon-border: #4a4a4a;
    --bodey-text: #d6d6d6; /* 本文用 */
}

/* テーマトグル */
.theme-switch{
  display:flex;
  align-items:center;
  gap:6px;
}

#themeToggle{
  position:relative;
  width:48px;
  height:24px;
  border-radius:999px;
  border:none;
  background:#cfc3a6;
  cursor:pointer;
}

#themeToggle::before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:white;
  transition:transform .2s ease;
}

body.dark #themeToggle{
  background:#4a5aa3;
}

body.dark #themeToggle::before{
  transform:translateX(24px);
}



body{
    background: var(--bg-main);
    color: var(--text-main);
}

/* ジョブボタン */
.job-icon{
  width:40px;
  height:40px;
  display:block;
}

.job{
  border:none;
  padding: 2px;
  background:none;
  transition:transform 0.15s;
}

.job:hover{
  transform:scale(1.1);
}
.job:focus{
  outline:none;
}

/* 押すと光る */

.job.active-tank {
  background: #2196f3;   /* 青 */
  color: white;
  border-color: #0f416b;
}

.job.active-healer {
  background: #4caf50;   /* 緑 */
  color: white;
  border-color: #2f5f30;
}

.job.active-dps {
  background: #e98f8f;   /* 赤 */
  color: white;
  border-color: #862a2a;
}

/* レベルスライダー */
#statusBar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

/* レベルスライダー初期状態 */
#statusBar[hidden] {
    display: none;
}

/* レベル */
#lv {
    width:150px;
}

/* 選んだジョブ */
#currentJob {
    font-size: 18px;
    font-weight: bold;
}

/* スキルリスト */
#skillList{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* カード本体 */
.skill-card{
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-main);
}

/* 上段レイアウト */
.skill-top{
    display: flex;
    align-items: center;
    gap: 10px;
}

.skill-top-right{
    margin-left: auto;
    font-size: 12px;
    color: var(--text-sub);
    opacity:0.9;
}

.skill-rigth-wrap{
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.skill-duration{
    font-size: 14px;
    opacity: 0.9;
}

.time-wrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.time-item {
    font-size: 14px;
    opacity: 0.85;
}


/* アイコン枠（画像後で） */
.skill-icon{
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--icon-bg);
    border: 1px solid var(--icon-border);
    flex: 0 0 auto;
}

/* スキル名 */
.skill-name{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

/* タグ */
.skill-tags{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.tag{
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    color: var(--tag-text);
}

/* 本文 */
.skill-body{
    white-space: pre-line;
    margin-top: 10px;
    color: var(--body-text);
    font-size: 14px;
    line-height: 1.4;
}

.skill-req{
    white-space: pre-line;
    margin-top: 6px;
    color: var(--body-text);
    font-size: 12px;
    line-height: 1.4;
}

/* スキル注意点 */
.skill-notes {
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9a4d00;
}

body.dark .skill-notes {
  color: #ffb347;
}

a{
    color:#b48a2f;
}

body.dark a{
    color:#e6c86b;
}

/* フッター */
.alchemy-footer{
    text-align:center;
    font-size:12px;
    color:#b48a2f;
    margin-top:40px;
    padding:20px 0;

    background:linear-gradient(
        180deg,
        rgba(210,190,140,0.35),
        rgba(190,170,120,0.25)
    );

    border-top:1px solid rgba(180,150,90,0.2);
    border-bottom:1px solid rgba(180,150,90,0.2);
}

/* ダークモード */
body.dark .alchemy-footer{
    color: #c9a24a;
    text-shadow:
        0 0 5px rgba(201,162,74,0.5),
        0 0 10px rgba(201,162,74,0.3);

    background: linear-gradient(
        180deg,
        rgba(120,95,35,0.45),
        rgba(70,50,15,0.35)
    );

    border-top: 1px solid rgba(255,215,0,0.25);
    border-bottom: 1px solid rgba(255,215,0,0.25);
}

.alchemy-footer span{
    display:inline-block;
    transition: transform 0.2s;
}

.alchemy-footer:hover{
    text-shadow:
        0 0 6px rgba(201,162,74,0.3),
        0 0 12px rgba(201,162,74,0.15);
}

body.dark .alchemy-footer:hover{
    text-shadow:
        0 0 10px rgba(201,162,74,0.9),
        0 0 20px rgba(201,162,74,0.6);
}

.alchemy-footer span:hover{
    transform: scale(1.2);
}

.alchemy-icon{
    display:inline-block;
    animation: alchemyBubble 3s ease-in-out infinite;
}

@keyframes alchemyBubble{
    0% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0px); }
}

.kofi-icon{
    display:inline-block;
    transition: transform 0.3s ease;
}

.kofi-icon:hover{
    transform: rotate(-35deg) translateY(-3px) scale(1.1);
}

.alchemy-footer a{
  color: #c9a24a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.alchemy-footer a:hover{
  text-shadow: 0 0 8px rgba(255,215,120,0.8);
}

.feedback{
    text-align: center;
    font-size: 12px;
    color:#c9a24a;
    margin-top: 40px;
    padding: 20px 0;
    opacity:0.8;
}

.feedback a{
    text-align: center;
    font-size: 12px;
    color:#c9a24a;
    margin-top: 40px;
    padding: 20px 0;
    opacity:0.8;
    text-decoration:underline;
}

.feedback a:hover{
  opacity:0.7;
}

.feedback{
    margin-top:40px;
    padding:20px 0;

    background: rgba(120, 95, 35, 0.35);

    border-top:1px solid rgba(255,215,0,0.4);
    border-bottom:1px solid rgba(255,215,0,0.4);

    text-align:center;
}


select {
    background: #e8d8b5;          /* 紙っぽい色 */
    color: #5a3e1b;               /* 濃い茶（文字） */
    border: 1px solid #b88a3b;    /* 真鍮枠 */

    padding: 6px 28px 6px 10px;
    border-radius: 8px;
    font-size: 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(0,0,0,0.15),
        inset 0 1px 2px rgba(255,255,255,0.2);
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

.select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #b88a3b; /* 真鍮 */
    pointer-events: none;
    font-size: 10px;
}

select:hover {
    box-shadow:
        0 0 5px rgba(184,138,59,0.5),
        inset 0 0 5px rgba(184,138,59,0.25);
        background: #f2e6c9; /* 少し明るく */
}

select:focus {
    outline: none;
    box-shadow:
        0 0 6px rgba(184,138,59,0.7),
        inset 0 0 6px rgba(184,138,59,0.3);
}

/* ダーク用 */
body.dark select {
    background: #111;
    color: #c9a24a;
    border: 1px solid #c9a24a;

    box-shadow:
        0 0 5px rgba(201,162,74,0.3),
        inset 0 0 5px rgba(201,162,74,0.2);
}

body.dark .select-wrapper::after {
    color: #c9a24a;
}

body.dark select:hover {
    box-shadow:
        0 0 8px rgba(201,162,74,0.6),
        inset 0 0 8px rgba(201,162,74,0.3);
}

.ultimate-buttons {
    margin-bottom: 10px;
}

.ultimate-buttons button {
    background: #e8d8b5;
    color: #5a3e1b;
    border: 1px solid #b88a3b;
    border-radius: 6px;
    padding: 4px 10px;
    margin-right: 6px;
    font-size: 12px;
    cursor: pointer;
}

.ultimate-buttons button:hover {
    background: #f2e6c9;
}

.ultimate-buttons button.active {
    background: #b88a3b;
    color: #fff;
}

/* ダーク */
body.dark .ultimate-buttons button {
    background: #111;
    color: #c9a24a;
    border: 1px solid #c9a24a;
}

body.dark .ultimate-buttons button:hover {
    box-shadow: 0 0 6px rgba(201,162,74,0.6);
}