@charset "utf-8";

/* =========================================================
   1. 全站主題變數
   把常用顏色與字型先命名，後面可用 var(...) 重複使用。
   ========================================================= */
:root {
    --ink:#493821;
    --gold:#d5b76c;
    --paper:#eddfb9;
    --serif:Georgia,"Noto Serif TC","PMingLiU",serif
}

/* =========================================================
   2. 全站基本設定
   ========================================================= */
* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:20px;
}

/* 頁面本體：背景色、文字色、預設字型與行高 */
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.6 Arial,"Microsoft JhengHei",sans-serif
}

button,input,select {
    font:inherit
}

button {
    cursor:pointer;
    color:inherit;
}

a {
    color:inherit;
    text-decoration:none;
}

/* =========================================================
   3. 鍵盤操作與無障礙
   focus-visible 讓鍵盤使用者看得到目前焦點位置。
   ========================================================= */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid #1685bd;
    outline-offset:4px;
}

[hidden] {
    display:none!important
}

.skip {
    position:fixed;
    left:15px;
    top:-100px;
    z-index:20;
    background:white;
    padding:10px
}

.skip:focus {
    top:10px;
}

/* =========================================================
   4. 導覽列與 Logo
   注意：檔案後半段還會再次寫 .navbar，後寫的規則會覆蓋部分設定。
   ========================================================= */
.navbar {
    position:absolute;
    z-index:2;
    top:18px;
    left:2%;
    width:96%;
    height:76px;
    padding:0 26px;
    display:flex;
    align-items:center;
    gap:40px;
    background:linear-gradient(100deg,#17252df5,#252822f5);
    border:1px solid #9a814b66;
    border-radius:4px;
    box-shadow:0 8px 25px #0005;
    color:#eee3c8
}

.logo {
    display:flex;
    align-items:center;
    gap:12px;
    font:700 24px/1.2 var(--serif);
    letter-spacing:2px;
    white-space:nowrap
}

.logo small {
    display:block;
    font:10px/2 Arial;
    letter-spacing:3px;
    color:#baa376
}

.logo b {
    font:44px Georgia;
    color:#e5bb67
}

.navbar nav {
    display:flex;
    gap:30px;
    height:100%;
    align-items:center
}

.navbar nav a {
    font-weight:bold;
    height:100%;
    display:flex;
    align-items:center;
    border-bottom:3px solid transparent
}

.navbar nav a:hover,.navbar nav a.active {
    color:#f5d388;
    border-bottom-color:#d1ae64
}

.nav-cta {
    margin-left:auto;
    border:1px solid #b99b57;
    padding:9px 20px;
    color:#ecd4a2;
    font-weight:bold
}

.nav-account {
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:bold;
    color:#d9c9a0;
    padding:6px 4px;
    border-bottom:3px solid transparent
}

.nav-account:before {
    content:"☉";
    font-size:13px;
    color:#b99b57
}

.nav-account:hover,.nav-account.active {
    color:#f5d388;
    border-bottom-color:#d1ae64
}

.nav-account.is-signed-in:before {
    content:"✦";
    color:#f5d388
}

/* =========================================================
   5. Hero / 首頁主視覺區
   ========================================================= */
.hero {
    position:relative;
    min-height:420px;
    background:#142e3d;
    color:#f7ebcd;
    border-bottom:5px ridge #c5a163;
    overflow:hidden
}

.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(#0e29365c,#14283399),url("banner/01.jpg") center 43%/cover;
    opacity:.52
}

.hero-content {
    position:relative;
    text-align:center;
    padding:115px 20px 85px
}

.eyebrow {
    font:11px Arial;
    letter-spacing:5px;
    color:#d3bd8d;
    margin:0
}

.hero-gem {
    display:block;
    font:56px/1 var(--serif);
    color:#f5d38b;
    margin:7px auto 0
}

.hero h1 {
    font:700 44px/1.2 var(--serif);
    letter-spacing:8px;
    margin:4px 0 8px;
    text-shadow:0 3px 6px #000
}

.hero-content>p:not(.eyebrow) {
    margin:8px 0 20px;
    color:#e3dfd3;
    font-size:14px;
    letter-spacing:2px
}

.gold-button {
    display:inline-block;
    background:linear-gradient(#f5e1a5,#c9a85d);
    border:1px solid #a5813b;
    box-shadow:inset 0 0 0 3px #e7ca84,0 3px 8px #0003;
    border-radius:3px;
    padding:9px 27px;
    color:#382813;
    font-weight:bold
}

.gold-button:hover {
    filter:brightness(1.08)
}

.collection-tabs {
    position:absolute;
    bottom:0;
    left:max(4%,calc((100% - 1280px)/2));
    display:flex;
    gap:7px
}

.collection-tabs button {
    background:linear-gradient(#323d3f,#17242b);
    border:1px solid #a48b56;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    color:#baa77f;
    padding:11px 22px;
    font:24px var(--serif)
}

.collection-tabs button span {
    font:700 16px "Microsoft JhengHei",sans-serif;
    margin-left:7px
}

.collection-tabs button.selected {
    background:linear-gradient(#ecd59a,#bca16a);
    color:#392e1f;
    padding-top:16px;
    margin-top:-5px
}

/* =========================================================
   6. 篩選列、搜尋欄、按鈕
   ========================================================= */
.filter-bar {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:21px 3%;
    background:linear-gradient(#8a282d,#61171c);
    border-top:2px solid #b24839;
    border-bottom:5px ridge #b08d52;
    box-shadow:0 4px 10px #60441e33
}

select,.filter-button {
    background:linear-gradient(#efe2b9,#c9b88d);
    border:2px solid #94733f;
    border-radius:22px;
    box-shadow:0 0 0 2px #341616,0 0 0 4px #b28a4b;
    padding:7px 20px 7px 15px;
    font-size:14px;
    color:#56442a;
    min-height:40px
}

.filter-bar>select {
    min-width:145px
}

.filter-button {
    white-space:nowrap;
    padding:7px 18px
}

.mana-filter {
    display:flex;
    justify-content:center;
    gap:3px;
    flex:1;
    max-width:450px;
    padding:6px 8px;
    background:#271b20;
    border:2px solid #baa060;
    border-radius:26px;
    box-shadow:0 0 0 2px #3c1016
}

.mana-filter button {
    width:30px;
    height:32px;
    flex-shrink:0;
    border:1px solid #5e97bb;
    border-radius:8px;
    background:linear-gradient(140deg,#6299bf,#113559 58%,#071829);
    font:bold 19px Georgia;
    color:#f0f6ff;
    text-shadow:0 2px #000;
    box-shadow:inset 0 0 0 2px #182735;
    transform:rotate(-3deg)
}

.mana-filter button:last-child {
    font-size:14px
}

.mana-filter button:hover {
    filter:brightness(1.3)
}

.mana-filter button.selected {
    border-color:#ffe49c;
    background:linear-gradient(#e5c574,#8b592b);
    box-shadow:0 0 12px #f8d271
}

.search-wrap {
    position:relative;
    flex:1;
    max-width:230px;
    min-width:140px
}

.search-wrap input {
    width:100%;
    min-height:42px;
    background:#391419;
    border:2px solid #baa060;
    border-radius:25px;
    color:#ffefd3;
    padding:7px 35px 7px 16px
}

.search-wrap input::placeholder {
    color:#c3a68c
}

.search-wrap span {
    position:absolute;
    right:12px;
    top:0;
    font-size:29px;
    color:#e6c06c;
    pointer-events:none
}

.extra-filters {
    display:flex;
    justify-content:center;
    gap:28px;
    padding:20px;
    background:#dfcda5;
    border-bottom:1px solid #b39a6b
}

.extra-filters input {
    width:70px;
    background:#fff8e7;
    border:1px solid #9c8456;
    border-radius:4px;
    padding:5px;
    margin-left:8px
}

.text-button {
    border:0;
    background:none;
    text-decoration:underline
}

/* =========================================================
   7. 主要內容區、卡片列表、分頁、頁尾
   ========================================================= */
main {
    min-height:620px;
    background:radial-gradient(ellipse at 10% 40%,#fff4d54d,transparent 55%),radial-gradient(ellipse at 85% 30%,#c5a57130,transparent 60%),var(--paper)
}

.library-inner {
    max-width:1320px;
    margin:auto;
    padding:35px 40px 65px
}

.results-toolbar {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    font-size:14px;
    color:#786443
}

.results-toolbar p {
    margin:0
}

.results-toolbar strong {
    color:#4a3620
}

.view-controls {
    display:flex;
    align-items:center;
    gap:26px
}

.view-controls select {
    box-shadow:inset 0 0 0 2px #f6eac8;
    border-width:1px;
    margin-left:7px
}

.view-switch {
    display:flex;
    border:1px solid #94733f;
    padding:3px;
    border-radius:22px;
    background:#c8b383
}

.view-switch button {
    border:0;
    background:transparent;
    border-radius:18px;
    font-size:23px;
    line-height:30px;
    width:38px;
    padding:0;
    color:#7a653c
}

.view-switch button.selected {
    background:#fff0b8;
    color:#382b1c;
    box-shadow:0 1px 4px #70572c55
}

.section-title {
    display:flex;
    align-items:center;
    gap:24px;
    margin:30px 0
}

.section-title span {
    flex:1;
    height:5px;
    border-top:1px solid #b59a64;
    border-bottom:1px solid #b59a6455
}

.section-title h2 {
    font:700 23px var(--serif);
    padding:9px 40px;
    border:1px solid #aa8a50;
    outline:3px double #b99d6777;
    outline-offset:3px;
    margin:0;
    letter-spacing:3px;
    white-space:nowrap
}

.cards-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:32px 28px;
    align-items:start
}

.card {
    border:0;
    background:none;
    padding:0;
    display:block;
    width:100%;
    text-align:center;
    transition:transform .2s;
    min-width:0
}

.card:hover {
    transform:translateY(-8px)
}

.card:hover .card-art {
    filter:drop-shadow(0 8px 9px #67502988)
}

.card-art {
    position:relative;
    width:100%;
    aspect-ratio:2/3;
    filter:drop-shadow(0 5px 5px #67502944)
}

.card-art img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:8px
}

.card-name {
    position:absolute;
    top:56.5%;
    left:12%;
    width:76%;
    color:#f8e8b9;
    font:700 clamp(12px,1.2vw,18px)/1.3 var(--serif);
    text-shadow:0 2px 2px #000;
    white-space:nowrap
}

.card-ability {
    position:absolute;
    top:64%;
    left:14%;
    width:72%;
    height:17%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e6ddc5;
    font:clamp(10px,.85vw,13px)/1.6 "Microsoft JhengHei",sans-serif;
    text-shadow:0 1px 3px #000
}

.card-caption {
    padding:10px 0 0
}

.card-caption h3 {
    font:700 17px var(--serif);
    margin:0 0 3px
}

.card-caption p {
    font-size:12px;
    color:#77613f;
    margin:0
}

.list-description {
    display:none
}

.cards-grid.list {
    grid-template-columns:1fr;
    gap:12px
}

.list .card {
    display:flex;
    align-items:center;
    text-align:left;
    border:1px solid #c3a879;
    background:#ffffff25;
    padding:12px 22px;
    gap:25px;
    border-radius:4px
}

.list .card:hover {
    transform:none;
    background:#fff8de88
}

.list .card-art {
    width:90px;
    flex-shrink:0
}

.list .card-caption {
    width:200px;
    padding:0
}

.list .list-description {
    display:block;
    flex:1;
    font-size:14px
}

.pagination {
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin-top:40px
}

.pagination button {
    border:1px solid #b1935b;
    background:#e4d1a5;
    border-radius:4px;
    min-width:40px;
    padding:7px 12px
}

.pagination button.selected {
    background:#623126;
    color:#ffe9ad;
    border-color:#623126
}

.pagination button:disabled {
    opacity:.4;
    cursor:default
}

.empty {
    text-align:center;
    padding:55px 10px
}

.empty h3 {
    font:24px var(--serif)
}

footer {
    text-align:center;
    padding:40px 20px;
    background:#17262d;
    color:#adad9c;
    border-top:4px ridge #b99757
}

.footer-brand {
    font:700 24px var(--serif);
    color:#ddc389
}

footer p {
    font-size:14px;
    letter-spacing:2px
}

footer small {
    font-size:12px;
    color:#a5a798
}

/* =========================================================
   8. 卡片詳細資料彈出視窗
   ========================================================= */
dialog {
    background:linear-gradient(135deg,#ede0bd,#d2bc8c);
    border:3px solid #ac8a4b;
    border-radius:10px;
    color:var(--ink);
    width:min(800px,92vw);
    max-height:90vh;
    padding:35px;
    box-shadow:0 25px 100px #0008
}

dialog::backdrop {
    background:#08131bd9;
    backdrop-filter:blur(5px)
}

.close-detail {
    position:absolute;
    right:12px;
    top:8px;
    border:0;
    background:none;
    font-size:32px;
    z-index:1
}

#detail-content {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    align-items:center
}

.detail-art .card-name {
    font-size:23px
}

.detail-art .card-ability {
    font-size:15px
}

.detail-copy h2 {
    font:700 30px var(--serif);
    margin:8px 0
}

.detail-copy .subtitle {
    color:#877049
}

.stats {
    display:flex;
    gap:10px;
    margin:24px 0
}

.stats span {
    background:#f4e7c5;
    padding:8px 12px;
    border:1px solid #b99a61;
    border-radius:3px;
    font-size:14px
}

.detail-copy h3 {
    font-size:16px;
    margin-bottom:5px
}

.detail-copy p {
    font-size:14px
}

.detail-copy .collection {
    letter-spacing:3px;
    font-size:12px;
    color:#866b36
}

/* =========================================================
   9. 第一組 RWD 響應式設定
   依螢幕寬度調整欄數、字級、導覽列與篩選區。
   ========================================================= */
@media(min-width:1500px) {
    .card-name {
        font-size:18px
    }

    .card-ability {
        font-size:13px
    }

}

@media(max-width:1150px) {
    .filter-bar {
        flex-wrap:wrap;
        gap:15px
    }

    .mana-filter {
        order:5;
        flex-basis:100%;
        max-width:none
    }

    .navbar {
        gap:25px
    }

    .cards-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }

    .card-name {
        font-size:16px
    }

    .card-ability {
        font-size:12px
    }

}

@media(max-width:800px) {
    .navbar {
        padding:0 16px;
        gap:20px;
        height:65px
    }

    .logo {
        font-size:20px
    }

    .logo b {
        font-size:32px
    }

    .navbar nav {
        gap:15px;
        font-size:14px
    }

    .nav-cta {
        display:none
    }

    .hero {
        min-height:390px
    }

    .hero-content {
        padding-top:110px
    }

    .collection-tabs {
        left:3%;
        right:3%;
        gap:4px
    }

    .collection-tabs button {
        padding:12px 10px;
        flex:1;
        font-size:18px
    }

    .collection-tabs button span {
        font-size:14px;
        margin-left:3px
    }

    .library-inner {
        padding:25px 24px 45px
    }

    .results-toolbar {
        align-items:flex-start
    }

    .view-controls {
        gap:12px
    }

    .view-controls label {
        font-size:0
    }

    .view-controls select {
        font-size:14px
    }

    .cards-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:25px 18px
    }

    .card-name {
        font-size:14px
    }

    .card-ability {
        font-size:10px
    }

    .filter-bar>select {
        flex:1;
        min-width:140px
    }

    .search-wrap {
        max-width:none
    }

    .section-title h2 {
        font-size:20px;
        padding:7px 25px
    }

    .extra-filters {
        flex-wrap:wrap;
        gap:15px
    }

}

@media(max-width:540px) {
    .navbar {
        top:10px
    }

    .navbar nav a:last-child {
        display:none
    }

    .logo {
        font-size:18px
    }

    .logo small {
        font-size:8px;
        letter-spacing:2px
    }

    .navbar nav {
        margin-left:auto;
        gap:13px
    }

    .hero h1 {
        font-size:38px
    }

    .hero-content>p:not(.eyebrow) {
        font-size:12px
    }

    .collection-tabs button {
        font-size:0;
        padding:14px 3px
    }

    .collection-tabs button span {
        font-size:13px;
        margin:0
    }

    .filter-bar {
        padding:18px 16px;
        gap:13px
    }

    .filter-bar>select {
        min-width:40%
    }

    .search-wrap {
        flex-basis:60%;
        min-width:0
    }

    .mana-filter {
        gap:3px;
        padding:6px 3px
    }

    .mana-filter button {
        width:25px;
        height:29px;
        font-size:17px
    }

    .mana-filter button:last-child {
        font-size:12px
    }

    .library-inner {
        padding:25px 16px 40px
    }

    .results-toolbar {
        flex-wrap:wrap;
        gap:12px
    }

    .view-controls {
        width:100%;
        justify-content:space-between
    }

    .view-controls label {
        font-size:13px
    }

    .view-controls select {
        margin-left:0
    }

    .cards-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 13px
    }

    .card-name {
        font-size:13px
    }

    .card-ability {
        font-size:10px;
        line-height:1.4
    }

    .section-title {
        gap:16px
    }

    .section-title h2 {
        font-size:18px
    }

    .list .card {
        gap:15px;
        padding:10px
    }

    .list .card-caption {
        width:auto
    }

    .list .list-description {
        display:none
    }

    #detail-content {
        grid-template-columns:1fr;
        gap:20px
    }

    .detail-art {
        width:230px;
        max-width:100%;
        margin:auto
    }

    .detail-art .card-name {
        font-size:18px
    }

    .detail-art .card-ability {
        font-size:12px
    }

    .detail-copy h2 {
        font-size:26px
    }

    dialog {
        padding:30px 24px
    }

    .stats {
        margin:14px 0
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    .card {
        transition:none
    }

}

/* =========================================================
   10. 輪播圖版本的覆寫設定
   這一段是後來新增的，因此會覆蓋前面同名選擇器。
   例如：.navbar、.hero。
   ========================================================= */
/* Compact, edge-to-edge carousel. Images crop centrally to fill the banner. */

.navbar {
    position:relative;
    top:auto;
    left:auto;
    width:96%;
    margin:18px auto
}

.hero {
    min-height:0;
    background:#14232b;
    overflow:hidden
}

.hero:before {
    display:none
}

.banner-carousel {
    position:relative;
    width:100%;
    margin:0
}

.banner-slides {
    position:relative;
    height:auto;
    aspect-ratio:1672 / 941;
    overflow:hidden
}

.banner-slide {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    opacity:0;
    transition:opacity .65s ease;
    pointer-events:none
}

.banner-slide.is-active {
    opacity:1
}

.banner-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:60px;
    border:1px solid #d5b76c88;
    border-radius:4px;
    background:#101c25b3;
    color:#f5dfab;
    font:42px/1 Georgia;
    box-shadow:0 3px 12px #0004
}

.banner-arrow:hover {
    background:#101c25ed
}

.banner-arrow.prev {
    left:18px
}

.banner-arrow.next {
    right:18px
}

.banner-controls {
    position:relative;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:8px;
    background:linear-gradient(transparent,#14232be6);
    color:#e5d3ac;
    font-size:14px
}

.banner-dots {
    display:none;
    gap:5px
}

.banner-dots button {
    position:relative;
    width:30px;
    height:30px;
    border:0;
    background:transparent;
    padding:0
}

.banner-dots button:after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    left:10px;
    top:10px;
    border:1px solid #d5b76c;
    border-radius:50%;
    background:transparent
}

.banner-dots button.selected:after {
    background:#f2d38b;
    box-shadow:0 0 8px #d5b76c88
}

#banner-play {
    background:transparent;
    border:1px solid #a48b56;
    border-radius:4px;
    padding:4px 12px;
    color:#edddb8;
    min-height:32px
}

.hero .collection-tabs {
    position:relative;
    left:auto;
    right:auto;
    max-width:1280px;
    margin:0 auto;
    padding:0 20px
}

@media(max-width:540px) {
    .navbar {
        margin:10px auto
    }

    .banner-arrow {
        width:32px;
        height:44px;
        font-size:32px
    }

    .banner-arrow.prev {
        left:7px
    }

    .banner-arrow.next {
        right:7px
    }

    .banner-controls {
        padding:8px;
        gap:12px
    }

    .hero .collection-tabs {
        padding:0 10px
    }

}

@media(prefers-reduced-motion:reduce) {
    .banner-slide {
        transition:none
    }

}

/* =========================================================
   11. 卡片文字區的新版設定
   這一段再次覆蓋 .card-art、.card-name、.card-ability、.cards-grid。
   所以實際畫面以這裡的設定為主。
   ========================================================= */
/* Clean card frames: full rules occupy the uninterrupted lower panel. */

.card-art {
    container-type:inline-size
}

.card-art .card-name {
    top:var(--name-y,57.3%);
    left:var(--name-x,50%);
    width:var(--name-width,74%);
    height:var(--name-height,6%);
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--name-font,6cqw); /* 6cqw = 容器寬度的 6% */
    line-height:1.1;
    color:var(--name-color,#f8e8b9);
    text-align:center;
    white-space:nowrap;
    text-shadow:0 1px 2px #0008
}

.card-art .card-ability {
    top:var(--rules-top,64%);
    left:12%;
    width:76%;
    height:var(--rules-height,23%);
    display:block;
    padding:0;
    white-space:normal;
    font-size:4.8cqw;
    line-height:1.2;
    text-align:left;
    color:#fff0d5;
    text-shadow:0 1px 2px #000
}

/* Invisible float shapes reserve the lower corners for badges and ornaments. */

.rules-exclusion {
    display:block;
    width:var(--rules-inset,24%);
    height:100%;
    shape-outside:polygon(0 var(--rules-notch,55%),100% var(--rules-notch,55%),100% 100%,0 100%);
    pointer-events:none
}

.rules-exclusion.left {
    float:left
}

.rules-exclusion.right {
    float:right
}

.rule-block {
    display:block;
    margin:0 0 .25em
}

.rule-block:last-child {
    margin-bottom:0
}

.rule-block strong {
    display:block;
    color:#f5d593;
    line-height:1.2;
    margin:0
}

.rule-block>span {
    display:block;
    white-space:pre-line;
    overflow-wrap:anywhere;
    line-break:strict
}

.cards-grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:22px
}

@media(max-width:1000px) {
    .cards-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px
    }

}

@media(max-width:600px) {
    .cards-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:400px;
        margin-inline:auto
    }

    .detail-art {
        width:100%;
        max-width:360px
    }

}

.cards-grid.list {
    grid-template-columns:1fr;
    max-width:none
}

/* 條列檢視的縮圖故意保留名稱／技能文字疊字（跟卡牌庫格狀檢視一樣），
   在 90px 縮圖下文字會很小、不一定看得清楚，但至少卡面不會是空白的卡框。 */

/* Language control and locale-specific typography; keep the user's grid layout. */
.language-picker{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}
.language-picker select{box-shadow:none;min-height:36px;border:1px solid #ae9358;border-radius:4px;padding:5px 8px;background:#233039;color:#f4e5c3;max-width:140px}
.language-picker option{background:#233039;color:#f4e5c3}
.navbar .nav-cta{margin-left:0}
.card-art:lang(en) .card-ability{font-family:Arial,sans-serif;overflow-wrap:normal}
.card-art:lang(ja) .card-ability{font-family:"Yu Gothic","Meiryo",sans-serif}
.card-art:lang(ko) .card-ability{font-family:"Malgun Gothic",sans-serif}
.card-art:lang(ja) .card-name{font-family:"Yu Mincho","MS Mincho",serif}
.card-art:lang(ko) .card-name{font-family:"Malgun Gothic",sans-serif}
.detail-copy{min-width:0}.detail-copy .stats{flex-wrap:wrap}
@media(max-width:1100px){.navbar{gap:18px;padding-inline:16px}.navbar nav{gap:16px}.navbar .nav-cta{display:none}.language-picker>span{display:none}}
@media(max-width:700px){.navbar{height:auto;min-height:65px;flex-wrap:wrap;padding-block:10px;gap:10px 16px}.navbar nav{order:3;width:100%;justify-content:center;margin:0;height:auto}.navbar nav a{padding:3px 8px}.language-picker{margin-left:auto}.language-picker select{max-width:125px}.collection-tabs button{min-width:0}.collection-tabs button span{white-space:normal}.results-toolbar{flex-wrap:wrap}.view-controls{max-width:100%}.filter-bar>select{max-width:100%}}

/* =========================================================
   12. 卡牌載入動畫
   卡牌畫面組裝完成前顯示的簡單載入動畫，呼應品牌的 ✦ 標誌與金色主題。
   完成後 library-results 會淡入取代這個區塊（見 app.js 尾端）。
   ========================================================= */
.cards-loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:120px 0;
    color:var(--ink)
}

.cards-loading .loading-mark {
    font:44px Georgia,serif;
    color:#e5bb67;
    text-shadow:0 2px 4px #67502944;
    animation:loading-pulse 1.4s ease-in-out infinite
}

.cards-loading p {
    margin:0;
    font:700 13px/1 var(--serif);
    letter-spacing:3px;
    color:#8a734a
}

@keyframes loading-pulse {
    0%,100% { transform:scale(1) rotate(0deg); opacity:.5 }
    50% { transform:scale(1.3) rotate(180deg); opacity:1 }
}

.library-results {
    animation:library-fade-in .3s ease
}

@keyframes library-fade-in {
    from { opacity:0 }
    to { opacity:1 }
}

@media (prefers-reduced-motion:reduce) {
    .cards-loading .loading-mark { animation:none }
    .library-results { animation:none }
}

/* =========================================================
   13. 卡包商城
   示意用商城，不含真實金流。內容由 shop.js 插入，這裡只負責外觀。
   ========================================================= */
.shop {
    background:radial-gradient(ellipse at 15% 20%,#fff4d54d,transparent 55%),radial-gradient(ellipse at 85% 80%,#c5a57130,transparent 60%),var(--paper);
    border-top:2px solid #b59a64
}

.shop-inner {
    max-width:1320px;
    margin:auto;
    padding:45px 40px 70px
}

.shop-intro {
    max-width:640px;
    margin:0 auto 34px;
    text-align:center;
    color:#6b5738;
    font-size:14px;
    line-height:1.7
}

.shop-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
}

.shop-card {
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(180deg,#fff8e2,#f1e2b8);
    border:1px solid #b59a64;
    border-radius:10px;
    padding:22px;
    text-align:center;
    box-shadow:0 6px 18px #67502922
}

.shop-thumbs {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:6px
}

.shop-thumbs img {
    width:84px;
    aspect-ratio:2/3;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #a5813b;
    box-shadow:0 4px 10px #67502944
}

.shop-card-title {
    font:700 17px var(--serif);
    margin:4px 0 0;
    color:var(--ink)
}

.shop-card-desc {
    font-size:12px;
    color:#77613f;
    margin:0 0 6px
}

.shop-card-footer {
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:12px;
    border-top:1px dashed #c9ad74
}

.shop-price {
    font:700 21px var(--serif);
    color:#8a5a1f
}

.shop-buy {
    font-size:13px;
    padding:8px 18px
}

.shop-toast {
    position:fixed;
    left:50%;
    bottom:28px;
    z-index:50;
    background:#17252df5;
    color:#f4e5c3;
    border:1px solid #b99b57;
    padding:12px 22px;
    border-radius:6px;
    font-size:14px;
    box-shadow:0 10px 30px #0006;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,12px);
    transition:opacity .25s ease,transform .25s ease
}

.shop-toast.is-visible {
    opacity:1;
    transform:translate(-50%,0)
}

@media(max-width:820px) {
    .shop-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:560px) {
    .shop-grid {
        grid-template-columns:1fr
    }

    .shop-inner {
        padding:35px 20px 50px
    }
}

@media (prefers-reduced-motion:reduce) {
    .shop-toast { transition:none }
}

/* 導覽列多了「商城」連結後，窄螢幕讓連結自動換行，避免超出導覽列 */
@media(max-width:700px) {
    .navbar nav {
        flex-wrap:wrap;
        row-gap:4px
    }
}

/* =========================================================
   14. 商城組合包詳細資料彈出視窗
   點開組合包卡片後顯示的大圖＋文字資料彈出視窗，結構比照第 8 段的
   單張卡牌詳情彈出視窗，改為左右並排顯示組合包內的兩張卡牌。
   ========================================================= */
.shop-card-open {
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    border:0;
    background:none;
    padding:0;
    margin:0;
    font:inherit;
    color:inherit;
    text-align:center;
    cursor:pointer
}

.shop-card-open:hover .shop-thumbs img,
.shop-card-open:focus-visible .shop-thumbs img {
    box-shadow:0 6px 16px #67502966
}

#shop-detail {
    width:min(920px,94vw)
}

.shop-detail-header {
    text-align:center;
    margin-bottom:26px
}

.shop-detail-header .collection {
    letter-spacing:3px;
    font-size:12px;
    color:#866b36
}

.shop-detail-header h2 {
    font:700 28px var(--serif);
    margin:8px 0
}

.shop-detail-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.shop-detail-card {
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0
}

.shop-detail-card .detail-art {
    width:100%;
    max-width:240px;
    margin:0 auto
}

.shop-detail-card .detail-copy {
    min-width:0
}

.shop-detail-card-name {
    font:700 18px var(--serif);
    color:var(--ink);
    margin:4px 0 0
}

.shop-detail-card .stats {
    flex-wrap:wrap;
    margin:14px 0
}

.shop-detail-footer {
    margin-top:28px;
    padding-top:18px;
    border-top:1px dashed #c9ad74;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px
}

.shop-detail-footer .shop-price {
    font-size:24px
}

@media(max-width:800px) {
    .shop-detail-cards {
        grid-template-columns:1fr;
        gap:22px
    }

    .shop-detail-card .detail-art {
        max-width:220px
    }
}

/* =========================================================
   15. 帳號註冊頁面（register.html）
   後端是 Cloudflare Pages Functions + D1，這裡只負責外觀；
   表單文字與驗證訊息由 register.js 依語言即時填入。
   ========================================================= */
.register {
    min-height:calc(100vh - 260px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:56px 20px 80px
}

.register-card {
    width:100%;
    max-width:480px;
    background:linear-gradient(180deg,#fff8e2,#f1e2b8);
    border:1px solid #b59a64;
    border-radius:10px;
    padding:38px 36px 42px;
    box-shadow:0 10px 30px #67502922
}

.register .section-title {
    margin:0 0 18px
}

.register .section-title h1 {
    font:700 22px var(--serif);
    padding:9px 34px;
    border:1px solid #aa8a50;
    outline:3px double #b99d6777;
    outline-offset:3px;
    margin:0;
    letter-spacing:3px;
    white-space:nowrap
}

.register-intro {
    text-align:center;
    font-size:14px;
    line-height:1.7;
    color:#6b5738;
    margin:0 0 30px
}

.field {
    margin-bottom:20px
}

.field label {
    display:block;
    font-weight:700;
    font-size:14px;
    margin-bottom:7px;
    color:var(--ink)
}

.field input {
    width:100%;
    background:#fffaf0;
    border:2px solid #94733f;
    border-radius:6px;
    box-shadow:inset 0 1px 3px #67502922;
    padding:10px 14px;
    font-size:15px;
    color:#3a2c16;
    min-height:44px
}

.field input:focus {
    outline:2px solid #a5813b;
    outline-offset:1px
}

.field-hint {
    font-size:12px;
    color:#8a7550;
    margin:6px 0 0
}

.field-message {
    font-size:12px;
    margin:6px 0 0;
    min-height:15px
}

.field-message[data-tone="error"] {
    color:#9c3b2c
}

.field-message[data-tone="success"] {
    color:#3c7a4b
}

.field-message[data-tone="pending"] {
    color:#8a7550
}

.password-strength {
    display:flex;
    gap:5px;
    margin:9px 0 0
}

.password-strength span {
    flex:1;
    height:5px;
    border-radius:3px;
    background:#d8c69a
}

.password-strength[data-score="1"] span:nth-child(1) {
    background:#b5502f
}

.password-strength[data-score="2"] span:nth-child(1),
.password-strength[data-score="2"] span:nth-child(2) {
    background:#b08a2e
}

.password-strength[data-score="3"] span {
    background:#3c7a4b
}

.form-message {
    text-align:center;
    font-size:14px;
    min-height:18px;
    margin:4px 0 18px
}

.form-message[data-tone="error"] {
    color:#9c3b2c
}

.form-message[data-tone="success"] {
    color:#3c7a4b
}

.register-submit {
    width:100%;
    text-align:center;
    font-size:15px;
    padding:12px 20px
}

.register-submit:disabled {
    opacity:.6;
    cursor:default
}

.register-signed-in {
    text-align:center;
    padding:10px 0 4px
}

.register-signed-in p {
    font-size:15px;
    line-height:1.7;
    margin:0 0 22px
}

.register-signed-in-actions {
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap
}

.ghost-button {
    background:none;
    border:1px solid #94733f;
    border-radius:3px;
    padding:9px 24px;
    color:#6b5738;
    font-weight:bold
}

.ghost-button:hover {
    background:#94733f11
}

@media(max-width:540px) {
    .register-card {
        padding:30px 22px 34px
    }
}