#content {
    justify-content: center;
    display: grid !important;
    --arcana-radius-pill: 4px;
    --arcana-radius-card: 10px;
    --arcana-icon-sm: 40px;
    --arcana-icon-md: 48px;
    --arcana-icon-lg: 56px;
    --arcana-badge-check-size: 18px;
    --arcana-owned-mark-size: 16px;
    --arcana-color-success: #4caf50;
    --arcana-color-info: #007bff;
    --arcana-color-accent: #7a5ba6;
    --arcana-color-danger: #a33;
    --arcana-overlay-bg: rgba(0, 0, 0, .6);
}

.arcana-toolbar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.arcana-level-group {
    display: inline-flex;
    border: 1px solid var(--color-bg2);
    border-radius: 16px;
    overflow: hidden;
}
.arcana-level-btn {
    padding: 6px 16px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: background .15s, opacity .15s;
}
.arcana-level-btn + .arcana-level-btn {
    border-left: 1px solid var(--color-bg2);
}
.arcana-level-btn:hover {
    opacity: .85;
}
.arcana-level-btn.active {
    background: #b38c44;
    color: var(--color-text);
    opacity: 1;
    font-weight: bold;
}
.arcana-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    width: 100%;
}
@media screen and (max-width: 1024px) and (pointer: coarse) {
    .arcana-grid {
        grid-template-columns: repeat(350px, 1fr);
    }
}
.arcana-card {
    background: var(--color-bg);
    border: 1px solid var(--color-bg2);
    border-radius: var(--arcana-radius-card);
    padding: 12px 14px;
    text-align: left;
}
.arcana-icons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin: 6px 0 10px;
}
.arcana-icons img {
    width: var(--arcana-icon-sm);
    height: var(--arcana-icon-sm);
    object-fit: cover;
    background: var(--color-bg2);
    pointer-events: all;
}
.arcana-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.arcana-active-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--arcana-radius-pill);
    background: var(--arcana-color-success);
    color: #fff;
}
.arcana-card-inactive {
    opacity: .45;
    filter: grayscale(70%);
}
.arcana-row-inactive {
    opacity: .45;
    filter: grayscale(70%);
}
.arcana-meta {
    list-style: none;
    margin: 0 0 0px 0;
    padding: 8px 0;
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--color-bg2);
}
.arcana-meta li {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
}
.arcana-meta .meta-label {
    color: var(--color-text);
    opacity: .65;
}
.arcana-meta .meta-value {
    font-weight: bold;
}
.arcana-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.arcana-stats li {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    padding-top: 4px;
}
.arcana-stats .stat-label {
    color: var(--color-text);
    opacity: .75;
}
.arcana-stats .stat-value {
    color: var(--arcana-color-success);
    font-weight: bold;
    white-space: nowrap;
}
.arcana-empty, .arcana-error {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text);
    opacity: .6;
    padding: 40px 0;
}
.arcana-table {
    width: 95%;
    border-collapse: collapse;
    background: var(--color-bg);
    font-size: 1.3rem;
}
.arcana-table th, .arcana-table td {
    border: 1px solid var(--color-bg2);
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
}
.arcana-table th {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: bold;
    white-space: nowrap;
}
.arcana-table td.col-icons {
    white-space: nowrap;
}
.arcana-table td.col-icons .arcana-icons img {
    width: var(--arcana-icon-md);
    height: var(--arcana-icon-md);
    pointer-events: all;
}
.table-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.table-stats-list li {
    white-space: nowrap;
}
.table-stats-list .stat-label {
    color: var(--color-text);
}
.table-stats-list .stat-value {
    color: var(--arcana-color-success);
    font-weight: bold;
}

.char-icon {
    cursor: pointer;
    transition: outline .15s, transform .1s;
    border-radius: 4px;
}
.char-icon:hover {
    transform: scale(1.08);
}
.char-icon-active {
    outline: 3px solid #b38c44;
    outline-offset: -2px;
}

.arcana-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.arcana-select,
.arcana-text-input {
    padding: 6px 12px;
    border-radius: var(--arcana-radius-pill);
    border: 1px solid var(--color-bg2);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.1rem;
}
.arcana-select:focus,
.arcana-text-input:focus {
    outline: none;
    border-color: var(--link-base);
}
.arcana-text-input {
    min-width: 180px;
}

.arcana-filter-chip {
    display: none;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 1.1rem;
}
.arcana-filter-chip.visible {
    display: flex;
}
.arcana-filter-chip img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    vertical-align: middle;
}
.arcana-filter-chip .chip-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg);
    border: 1px solid #b38c44;
    border-radius: var(--arcana-radius-pill);
    padding: 4px 8px 4px 10px;
}
.arcana-filter-chip .chip-clear {
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-text);
    opacity: .7;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 4px;
}
.arcana-filter-chip .chip-clear:hover {
    opacity: 1;
}

.arcana-segmented {
    display: inline-flex;
    border: 1px solid var(--color-bg2);
    border-radius: 16px;
    overflow: hidden;
}
.arcana-segment {
    padding: 6px 18px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: background .15s, opacity .15s;
}
.arcana-segment + .arcana-segment {
    border-left: 1px solid var(--color-bg2);
}
.arcana-segment:hover {
    opacity: .85;
}
.arcana-segment.active {
    background: #b38c44;
    color: var(--color-text);
    opacity: 1;
    font-weight: bold;
}

.arcana-char-picker-label {
    text-align: center;
    font-size: 1.1rem;
    opacity: .7;
    margin-bottom: 6px;
}
.arcana-char-picker {
    background: linear-gradient(color-mix(in srgb, #fff, transparent 15%), color-mix(in srgb, var(--color-bg), transparent 100%)), url(assets/NormalBackground.webp) center / cover no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid var(--color-bg2);
    border-radius: var(--arcana-radius-card);
}
.char-picker-item {
    position: relative;
    width: var(--arcana-icon-md);
    height: var(--arcana-icon-md);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: transform .1s;
}
.char-picker-item:hover {
    transform: scale(1.08);
}
.char-picker-item img {
    width: var(--arcana-icon-md);
    height: var(--arcana-icon-md);
    border-radius: 4px;
    object-fit: cover;
}
.char-picker-check {
    display: none;
    position: absolute;
    top: 30px;
    right: 2px;
    width: 16px !important;
    height: 16px !important;
    z-index: 2;
}
.char-picker-item.selected img {
    outline-offset: -2px;
}
.char-picker-item.selected .char-picker-check {
    display: block;
}
.char-picker-all {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg2);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}
.char-picker-all.selected {
    background: #b38c44;
    color: var(--color-text);
}

.dp-section {
    background: linear-gradient(color-mix(in srgb, #fff, transparent 15%), color-mix(in srgb, var(--color-bg), transparent 100%)), url(assets/NormalBackground.webp) center / cover no-repeat;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 16px;
    border: 1px solid var(--color-bg2);
    border-radius: var(--arcana-radius-card);
    padding: 12px 14px;
}
.dp-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 1.3rem;
    font-weight: bold;
}
.dp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}
.dp-select, .dp-input {
    width: 180px;
    padding: 8px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 4px;
    border: 1px solid var(--color-bg2);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.3rem;
}
#preset-detail-level-row .dp-input {
    width: 90px;
}
#preset-detail-level-row .dp-input:disabled {
    opacity: 0.5;
    background: var(--color-bg2);
}
.dp-btn {
    padding: 5px 14px;
    border-radius: var(--arcana-radius-pill);
    border: 1px solid var(--color-bg2);
    background: var(--color-bg2);
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
}
.dp-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.dp-btn-gold { width: 200px; padding: 6px 16px; font-size: 1.2rem; background: #b38c44; color: #fff; font-weight: bold; border-color: #b38c44; }
.dp-btn-blue { width: 200px; padding: 6px 16px; font-size: 1.2rem; background: var(--arcana-color-info); color: #fff; border-color: var(--arcana-color-info); }
.dp-btn-purple { width: 200px; padding: 6px 16px; font-size: 1.2rem; background: var(--arcana-color-accent); color: #fff; border-color: var(--arcana-color-accent); }
.dp-btn-danger { background: var(--arcana-color-danger); color: #fff; border-color: var(--arcana-color-danger); }
.dp-btn.active { background: #b38c44; color: #fff; border-color: #b38c44; font-weight: bold; }
.dp-cooldown-note {
    font-size: 0.85rem;
    opacity: .7;
}
.dp-status-note {
    font-size: 0.9rem;
    min-height: 1.2em;
    text-align: center;
    margin-top: 6px;
}

/* ---- 共有コード機能 UI (StatusSimulation.js の共有コード管理と同じ見た目) ---- */
.sim-mgr-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--arcana-overlay-bg);
    z-index: 2000;
}
.sim-mgr-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--modal-w, 480px);
    max-width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-bg2);
    border-radius: 8px;
    padding: 20px;
    z-index: 2001;
    color: var(--color-text);
}
.u-tac { text-align: center; }
.u-tac-mb15 { text-align: center; margin-bottom: 15px; }
.u-tac-mt15 { text-align: center; margin-top: 15px; }
.u-mb12 { margin-bottom: 12px; }
.u-status-tac-mt6 {
    text-align: center;
    font-size: .8rem;
    margin-top: 6px;
    min-height: 1em;
}
.u-empty-note-gray {
    display: none;
    text-align: center;
    color: var(--color-text);
    opacity: .6;
    margin-bottom: 10px;
}
.u-w40 { width: 40px !important; height: 40px !important; }

.sim-flex-gap10-mb10-h60-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.el-wrapper {
    position: relative;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .1s;
}
.el-wrapper:hover {
    transform: scale(1.08);
}
.el-wrapper img.u-w40 {
    display: block;
    border-radius: 4px;
    object-fit: cover;
}
.el-wrapper .check-mark {
    display: none;
    position: absolute;
    top: 25px;
    right: -2px;
    width: 24px !important;
    height: 24px !important;
    z-index: 2;
}
.el-wrapper.selected .check-mark {
    display: block;
}

.sim-selected-bg-panel-visible {
    background: var(--color-selected-bg);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
}
.sim-flex-gap6-wrap-center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.sim-flex-col-gap8-mb10 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.sim-input-plain {
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-bg2);
    font-size: 1rem;
}
.sim-input-w150 { flex: 1 1 100px; min-width: 80px; width: 150px; }
.sim-input-w130-upper { width: 130px; text-transform: uppercase; }
.sim-input-code-200-upper {
    width: 200px;
    max-width: 100%;
    padding: 8px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sim-mgr-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--color-selected-bg);
    padding: 8px;
    border-radius: 6px;
}
.sim-mgr-item-memo { flex: 1 1 80px; min-width: 60px; word-break: break-all; }
.sim-mgr-item-code { font-family: monospace; letter-spacing: 1px; }
.sim-mgr-item-status { font-size: .75rem; width: 100%; min-height: 1em; }
.close-btn {
    padding: 7px 24px;
    border: none;
    background-color: #666;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s;
}
.close-btn:hover { background-color: #555; }
.close-btn-purple { background-color: var(--arcana-color-accent); }
.close-btn-blue { background-color: var(--arcana-color-info); }
.close-btn-green-sm-14 {
    background-color: var(--arcana-color-success);
    width: auto;
    padding: 5px 14px;
    font-size: .8rem;
}
.close-btn-red-sm {
    background-color: var(--arcana-color-danger);
    width: auto;
    padding: 4px 10px;
    font-size: .75rem;
}
.close-btn-gold-sm {
    background-color: #b38c44;
    color: #000;
    width: auto;
    padding: 4px 10px;
    font-size: .75rem;
}
.close-btn-gray-w18 {
    background-color: #888;
    width: auto;
    padding: 6px 18px;
}

.dp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--arcana-overlay-bg);
    z-index: 1000;
}
.dp-modal {
    display: none;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-bg2);
    border-radius: 12px;
    padding: 16px 18px;
    z-index: 1001;
}
.dp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dp-modal-title {
    font-size: 1.4rem;
    font-weight: bold;
}

.dp-preset-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--color-bg2);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.dp-preset-row input[type="text"] {
    flex: 1 1 100px;
    min-width: 80px;
    background: transparent;
    border: 1px solid var(--color-bg2);
    border-radius: 4px;
    padding: 4px 6px;
    color: inherit;
}
/* プリセット一覧の行内ボタン(使用中にする/キャラ編集/削除)は、
   StatusSimulation.js のプリセット管理行に合わせて小型・可変幅にする。
   .dp-btn-gold / .dp-btn-blue の固定 width:200px を行内では無効化し、
   3つのボタンが1行に収まってレイアウトが崩れないようにする。 */
.dp-preset-row .dp-btn {
    width: auto;
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 0.75rem;
}
.dp-badge-active {
    font-size: .75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #b38c44;
    color: #000;
    flex-shrink: 0;
}
.dp-count-note {
    font-size: .75rem;
    opacity: .7;
    flex-shrink: 0;
}

.dp-chara-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--color-bg2);
    border-radius: 8px;
    margin-top: 10px;
}
.dp-chara-item {
    position: relative;
    width: var(--arcana-icon-lg);
    height: var(--arcana-icon-lg);
    cursor: pointer;
    border-radius: 4px;
}
.dp-chara-item img {
    width: var(--arcana-icon-lg);
    height: var(--arcana-icon-lg);
    border-radius: 4px;
    display: block;
    transition: filter .15s, opacity .15s;
}
.dp-chara-item.unowned img {
    filter: grayscale(1);
    opacity: .45;
}
.dp-chara-item.selected {
    outline: 2px solid #b38c44;
    outline-offset: 2px;
}
.dp-chara-owned-mark {
    position: absolute;
    top: 38px;
    right: 2px;
    width: 16px !important;
    height: 16px !important;
    z-index: 2;
}
.dp-detail-settings {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--color-bg2);
    border-radius: 8px;
}
.dp-detail-settings img {
    width: var(--arcana-icon-lg);
    height: var(--arcana-icon-lg);
    border-radius: 4px;
}
.dp-detail-settings .dp-name {
    font-size: 1.2rem;
    font-weight: bold;
    flex: 1 1 auto;
}