:root {
    --blue:#1768c8;
    --navy:#17385f;
    --gold:#c9983c;
    --cream:#fffaf0;
    --line:#e6d6b7;
    --text:#29425f;
    --muted:#74879b
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    font-family:Kanit, sans-serif;
    color:var(--text);
    background:#f7fbff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23dceeff'/%3E%3C/svg%3E")
}
a {
    text-decoration:none;
    color:inherit
}
.wrap {
    max-width:1280px;
    margin:auto;
    padding:0 24px
}
.topbar {
    height:74px;
    background:rgba(255, 255, 255, .96);
    border-bottom:1px solid #dce9f5;
    position:sticky;
    top:0;
    z-index:30;
    box-shadow:0 5px 20px #5d91bd18
}
.nav {
    height:100%;
    display:flex;
    align-items:center
}
.brand {
    display:flex;
    align-items:center;
    gap:9px;
    margin-right:42px
}
.brand-wings {
    width:52px;
    height:52px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:19px;
    color:white;
    background:linear-gradient(#61b7ff, #2672c9);
    border:4px solid #fff;
    outline:2px solid #e4b650;
    box-shadow:0 5px 14px #2367a938
}
.brand b {
    display:block;
    color:#24538c;
    letter-spacing:1px
}
.brand small {
    font-size:10px;
    color:#9b7b40;
    letter-spacing:2px
}
.nav nav {
    display:flex;
    height:100%
}
.nav nav a {
    padding:16px 22px 8px;
    text-align:center;
    font-weight:600;
    color:#39516d;
    border-left:1px solid #edf1f5
}
.nav nav a:hover {
    background:#eef8ff;
    color:#1671d4
}
.nav nav small {
    display:block;
    font-size:10px;
    font-weight:400;
    color:#99a8b7
}
.admin-link {
    margin-left:auto;
    background:linear-gradient(#f7d982, #c89532);
    padding:10px 22px;
    border-radius:22px;
    color:#65420c;
    font-weight:600;
    box-shadow:inset 0 1px #fff
}
.hero {
    min-height:365px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, #bfe9ff 0, #e9f7ff 58%, #fff9df 100%)
}
.hero:before {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:145px;
    background:linear-gradient(150deg, transparent 40%, #8fcf8a55 41%, #8fcf8a55 55%, transparent 56%), linear-gradient(25deg, transparent 40%, #6eaf6b44 41%, #6eaf6b44 58%, transparent 59%);
    background-size:420px 145px, 530px 145px
}
.hero-clouds {
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 10% 25%, #fff 0 8%, transparent 9%), radial-gradient(ellipse at 80% 18%, #fff9 0 10%, transparent 11%), radial-gradient(ellipse at 55% 35%, #fff8 0 8%, transparent 9%);
    opacity:.7
}
.hero-layout {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:220px 1fr 220px;
    align-items:center;
    min-height:365px
}
.hero-center {
    text-align:center;
    max-width:700px;
    margin:auto
}
.eyebrow {
    display:inline-block;
    font-size:11px;
    letter-spacing:2px;
    color:#9b6d22;
    background:#fff9e9;
    border:1px solid #e8c984;
    border-radius:20px;
    padding:7px 14px;
    font-weight:700
}
.hero h1 {
    font-family:'Kanit', sans-serif;
    font-size:45px;
    line-height:1.12;
    margin:14px 0 8px;
    color:#31557f
}
.hero h1 span {
    font-size:40px;
    color:#2b6bb1;
    text-shadow:0 2px white
}
.hero p {
    margin:0 auto 20px;
    color:#607a95;
    font-size:14px
}
.searchbox {
    height:52px;
    background:white;
    border:1px solid #e2c88f;
    border-radius:28px;
    display:flex;
    padding:5px 6px 5px 18px;
    box-shadow:0 12px 30px #4278a52b
}
.searchbox input {
    border:0;
    outline:0;
    flex:1;
    font-family:inherit;
    font-size:14px
}
.searchbox button {
    border:0;
    border-radius:21px;
    background:linear-gradient(#65b9f1, #277fd0);
    color:white;
    font-family:inherit;
    font-weight:600;
    padding:0 25px
}
.hero-character {
    font-family:serif;
    font-size:130px;
    color:#ffffff80;
    text-shadow:0 8px 25px #2d73aa44
}
.left-char {
    transform:rotate(-12deg)
}
.right-char {
    text-align:right
}
.portal-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 280px;
    gap:22px;
    margin-top:-10px;
    position:relative;
    z-index:5
}
.category-cards {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px
}
.category {
    height:230px;
    border-radius:14px;
    overflow:hidden;
    border:3px solid #fff;
    outline:1px solid #dfc69a;
    box-shadow:0 8px 20px #466c8b28;
    background:white;
    display:flex;
    flex-direction:column
}
.category .art {
    height:115px;
    display:grid;
    place-items:center;
    font-size:70px;
    background:linear-gradient(#eaf8ff, #fff4d9)
}
.category-copy {
    flex:1;
    text-align:center;
    color:white;
    padding:10px 8px
}
.category-copy h2 {
    font-family:'Kanit', sans-serif;
    font-size:17px;
    margin:0
}
.category-copy p {
    font-size:12px;
    margin:4px 0 8px;
    opacity:.95
}
.category-copy span {
    font-size:11px
}
.category.blue .category-copy {
    background:linear-gradient(#1c5e9f, #154477)
}
.category.green .category-copy {
    background:linear-gradient(#4e813b, #2d5d2d)
}
.category.cyan .category-copy {
    background:linear-gradient(#2189a6, #14627c)
}
.category.red .category-copy {
    background:linear-gradient(#a94837, #792d25)
}
.panel {
    background:#fffdf8;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 8px 24px #4d75901c;
    padding:15px
}
.two-col {
    display:grid;
    grid-template-columns:1.35fr .75fr;
    gap:18px;
    margin-top:20px
}
.ribbon {
    display:inline-block;
    background:linear-gradient(#4b8dc5, #286496);
    color:white;
    padding:8px 22px;
    border-radius:6px 6px 12px 6px;
    font-family:'Kanit', sans-serif;
    font-weight:700;
    box-shadow:0 3px #d3a34e
}
.map-art {
    height:310px;
    margin-top:10px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    background:radial-gradient(ellipse at 40% 45%, #8dcf69 0 25%, transparent 26%), radial-gradient(ellipse at 70% 35%, #72bd62 0 20%, transparent 21%), radial-gradient(ellipse at 62% 70%, #78bd61 0 25%, transparent 26%), linear-gradient(#74c7e6, #2384b5);
    box-shadow:inset 0 0 30px #165f7f66
}
.map-art:after {
    content:"";
    position:absolute;
    inset:0;
    background:repeating-radial-gradient(circle at 40% 40%, transparent 0 14px, #fff1 15px 16px)
}
.marker {
    position:absolute;
    z-index:2;
    background:#fffdf3;
    border:2px solid #d5a64d;
    border-radius:18px;
    padding:5px 12px;
    font-size:12px;
    font-weight:600;
    box-shadow:0 3px 8px #0002
}
.m-prontera {
    left:12%;
    top:55%
}
.m-geffen {
    left:30%;
    top:35%
}
.m-alde {
    left:58%;
    top:30%
}
.m-juno {
    right:10%;
    top:43%
}
.map-button {
    float:right;
    margin-top:10px;
    background:#fff4d7;
    border:1px solid #d7b66f;
    padding:8px 16px;
    border-radius:18px;
    font-size:12px
}
.panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #eee2cd;
    padding-bottom:9px;
    margin-bottom:8px
}
.panel-head h3 {
    font-family:'Kanit', sans-serif;
    font-size:15px;
    margin:0;
    color:#40526b
}
.panel-head a {
    font-size:11px;
    color:#326aa5
}
.monster-row {
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:10px;
    align-items:center;
    padding:9px 3px;
    border-bottom:1px solid #f1e7d6
}
.monster-row img, .fake-monster {
    width:48px;
    height:48px;
    object-fit:contain
}
.fake-monster {
    display:grid;
    place-items:center;
    font-size:34px
}
.monster-row b {
    display:block;
    font-size:13px
}
.monster-row small {
    display:block;
    font-size:10px;
    color:#8190a1;
    line-height:1.4
}
.popular {
    margin-top:18px
}
.popular-grid {
    display:grid;
    grid-template-columns:repeat(6, 1fr)
}
.popular-grid a {
    text-align:center;
    padding:10px;
    border-right:1px solid #eee5d6
}
.item-icon {
    height:55px;
    display:grid;
    place-items:center;
    font-size:35px
}
.item-icon img {
    max-height:50px;
    max-width:50px
}
.popular-grid b {
    display:block;
    font-size:11px
}
.popular-grid small {
    font-size:9px;
    color:#8998a8
}
.sidebar {
    display:flex;
    flex-direction:column;
    gap:14px
}
.status-box>b {
    display:block;
    color:#3c5f81;
    font-size:18px
}
.status-box small {
    display:block;
    color:#8493a2
}
.online {
    font-size:11px;
    color:#35a65c;
    font-weight:700
}
.search-link {
    display:block;
    border:1px solid #e9dfcf;
    border-radius:7px;
    padding:8px 10px;
    margin:7px 0;
    background:#fff;
    font-size:12px
}
.update p {
    display:grid;
    grid-template-columns:38px 1fr;
    margin:9px 0
}
.update i {
    grid-row:1/3;
    font-size:9px;
    background:#e85c4f;
    color:white;
    height:19px;
    padding:3px;
    text-align:center;
    border-radius:4px;
    margin-right:6px
}
.update b {
    font-size:11px
}
.update small {
    font-size:9px;
    color:#8b98a6
}
.page-hero {
    padding:38px 0 20px
}
.page-hero h1 {
    font-family:'Kanit', sans-serif;
    font-size:36px;
    margin:8px 0
}
.filters {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:16px
}
.filter {
    background:white;
    border:1px solid #d9c69e;
    border-radius:20px;
    padding:7px 15px;
    font-size:12px
}
.cards {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    padding-bottom:40px
}
.card {
    background:#fffdf8;
    border:1px solid #dfc99f;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 7px 18px #3b64811c
}
.thumb {
    height:150px;
    display:grid;
    place-items:center;
    background:linear-gradient(#e8f7ff, #fff7df)
}
.thumb img {
    max-width:90%;
    max-height:135px;
    object-fit:contain
}
.card-body {
    padding:14px
}
.card-body h3 {
    font-family:'Kanit', sans-serif;
    margin:8px 0 5px
}
.meta {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    font-size:10px;
    color:#7c8b9b
}
.badge {
    display:inline-block;
    padding:3px 8px;
    border-radius:12px;
    font-size:9px;
    font-weight:700
}
.badge-open, .badge-available {
    background:#ddf5e7;
    color:#278051
}
.badge-locked {
    background:#eee;
    color:#777
}
.badge-custom {
    background:#efe3ff;
    color:#7446aa
}
.badge-official {
    background:#e1f1ff;
    color:#2875aa
}
.badge-event {
    background:#ffe0dc;
    color:#c44032
}
.detail {
    display:grid;
    grid-template-columns:330px 1fr;
    gap:24px;
    padding-top:40px;
    padding-bottom:50px
}
.visual {
    background:linear-gradient(#e7f7ff, #fff7dd);
    border:1px solid #dfc99f;
    border-radius:18px;
    min-height:330px;
    display:grid;
    place-items:center
}
.visual img {
    max-width:90%;
    max-height:310px
}
.detail .panel {
    margin-bottom:15px
}
.detail h1 {
    font-family:'Kanit', sans-serif;
    margin:8px 0
}
.statgrid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px
}
.stat {
    background:#f7fbff;
    border:1px solid #e1eaf0;
    border-radius:10px;
    padding:12px
}
.stat span {
    display:block;
    font-size:9px;
    color:#8a9aaa
}
.stat b {
    font-size:15px
}
.table {
    width:100%;
    border-collapse:collapse;
    font-size:12px
}
.table th, .table td {
    text-align:left;
    padding:10px;
    border-bottom:1px solid #eee
}
.table th {
    color:#7b8a99
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:#42b56b;
    border-radius:50%;
    margin-right:5px
}
.muted {
    color:#8191a1
}
footer {
    margin-top:40px;
    background:#173b67;
    color:#d8e8fa
}
.footer-sky {
    height:45px;
    background:linear-gradient(155deg, transparent 45%, #173b67 46%) 0 0/180px 45px repeat-x
}
.footer-inner {
    display:flex;
    justify-content:space-between;
    padding-top:16px;
    padding-bottom:22px;
    font-size:11px
}
@media(max-width:1000px) {
    .portal-layout {
        grid-template-columns:1fr
    }
    .sidebar {
        display:grid;
        grid-template-columns:repeat(3, 1fr)
    }
    .category-cards {
        grid-template-columns:repeat(2, 1fr)
    }
    .hero-layout {
        grid-template-columns:1fr
    }
    .hero-character {
        display:none
    }
    .cards {
        grid-template-columns:repeat(3, 1fr)
    }
}
@media(max-width:700px) {
    .wrap {
        padding:0 14px
    }
    .nav nav {
        display:none
    }
    .topbar {
        height:64px
    }
    .hero {
        min-height:330px
    }
    .hero h1 {
        font-size:32px
    }
    .hero h1 span {
        font-size:29px
    }
    .hero-layout {
        min-height:330px
    }
    .category-cards {
        grid-template-columns:1fr 1fr
    }
    .category {
        height:205px
    }
    .category .art {
        height:95px
    }
    .two-col {
        grid-template-columns:1fr
    }
    .sidebar {
        grid-template-columns:1fr
    }
    .popular-grid {
        grid-template-columns:repeat(3, 1fr)
    }
    .cards {
        grid-template-columns:repeat(2, 1fr)
    }
    .detail {
        grid-template-columns:1fr
    }
    .statgrid {
        grid-template-columns:repeat(2, 1fr)
    }
}
/* Theme artwork pack */
.hero {
    background-image:linear-gradient(90deg, rgba(236, 248, 255, .86), rgba(255, 250, 224, .68)), url('../images/theme/hero-bg.jpg');
    background-size:cover;
    background-position:center
}
.hero:before {
    display:none
}
.hero-clouds {
    opacity:.3
}
.hero-art {
    position:absolute;
    bottom:0;
    z-index:1;
    pointer-events:none;
    object-fit:contain
}
.hero-art-left {
    left:max(0px, calc(50% - 720px));
    height:355px;
    max-width:390px
}
.hero-art-right {
    right:max(0px, calc(50% - 700px));
    height:340px;
    max-width:300px
}
.hero-center {
    position:relative;
    z-index:3;
    background:rgba(255, 255, 255, .18);
    backdrop-filter:blur(1px);
    padding:12px 18px;
    border-radius:26px
}
.category .art {
    overflow:hidden;
    padding:0;
    background:#edf8ff
}
.category .art img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease
}
.category:hover .art img {
    transform:scale(1.045)
}
.map-art-image {
    background:#dff3ff
}
.map-art-image:after {
    display:none
}
.map-art-image>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.footer-sky {
    height:80px;
    background:url('../images/theme/footer-bg.jpg') center bottom/cover no-repeat
}
.sidebar:after {
    content:"";
    display:block;
    height:110px;
    background:url('../images/theme/poring-decoration.png') right bottom/contain no-repeat;
    opacity:.95
}
.world-preview {
    overflow:hidden
}
.world-preview .ribbon {
    position:relative;
    z-index:3
}
.category {
    transition:transform .2s ease, box-shadow .2s ease
}
.category:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 28px #466c8b35
}
@media(max-width:1000px) {
    .hero-art-left {
        opacity:.55;
        left:-80px
    }
    .hero-art-right {
        opacity:.55;
        right:-55px
    }
}
@media(max-width:700px) {
    .hero-art {
        opacity:.28
    }
    .hero-art-left {
        left:-130px
    }
    .hero-art-right {
        right:-90px
    }
    .hero-center {
        padding:8px
    }
    .category .art img {
        object-fit:cover
    }
}
/* Production V1 typography: one font family across the whole site */
html, body, button, input, select, textarea, table, * {
    font-family:'Kanit', Tahoma, sans-serif!important
}
.hero h1, .hero h1 span, .category-copy h2, .ribbon, .panel-head h3, .page-hero h1, .card-body h3, .detail h1 {
    font-family:'Kanit', Tahoma, sans-serif!important
}
.badge-closed {
    background:#eceff3;
    color:#7b8794
}
.compact {
    max-width:620px;
    margin-top:16px
}
.scriptbox {
    white-space:pre-wrap;
    background:#f7fbff;
    border:1px solid #e3ebf2;
    border-radius:10px;
    padding:14px;
    max-height:360px;
    overflow:auto;
    font-size:12px
}
.world-stage {
    position:relative;
    min-height:650px;
    overflow:hidden;
    border-radius:14px;
    background:#cceaff
}
.world-stage>img {
    width:100%;
    height:100%;
    min-height:650px;
    object-fit:cover;
    display:block
}
.world-marker {
    position:absolute;
    transform:translate(-50%, -50%);
    z-index:4;
    background:#fffdf5;
    border:2px solid #d0a349;
    border-radius:18px;
    padding:5px 10px 5px 25px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 5px 12px #27486238
}
.world-marker span {
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
    width:13px;
    height:13px;
    border-radius:50%;
    background:#2f87d0;
    border:3px solid white;
    box-shadow:0 0 0 1px #b8862c
}
.world-marker:hover {
    z-index:8;
    transform:translate(-50%, -50%) scale(1.08)
}
.world-marker.large {
    font-size:13px;
    padding:7px 13px 7px 29px
}
.interactive-world .world-marker {
    font-size:10px
}
.full-world-panel {
    padding:10px
}
.world-title {
    text-align:center
}
.map-list-section {
    margin-top:24px
}
.map-cards {
    padding-top:12px
}
.map-visual {
    min-height:410px
}
.map-visual img {
    width:100%;
    height:100%;
    object-fit:cover;
    max-height:none
}
.admin-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    padding-bottom:50px
}
.admin-card {
    background:#fffdf8;
    border:1px solid #dfc99f;
    border-radius:14px;
    padding:20px;
    box-shadow:0 7px 18px #3b64811c
}
.btn {
    display:inline-block;
    border:0;
    border-radius:20px;
    background:linear-gradient(#65b9f1, #277fd0);
    color:white;
    padding:9px 18px;
    font-weight:600;
    cursor:pointer
}
.input, .admin-map-table input, .admin-map-table select {
    width:100%;
    border:1px solid #d8dfe6;
    border-radius:8px;
    padding:9px;
    background:white
}
.login-panel, .import-panel {
    max-width:680px;
    margin-bottom:60px
}
.login-panel label, .import-panel label {
    display:block;
    margin:12px 0 6px;
    font-weight:600
}
.checkbox {
    font-weight:400!important
}
.success {
    background:#e3f7ea;
    border:1px solid #9fd8b4;
    color:#26764a;
    padding:12px;
    border-radius:10px;
    margin-bottom:15px
}
.error {
    background:#ffe7e4;
    border:1px solid #eeb3ac;
    color:#a53c31;
    padding:12px;
    border-radius:10px
}
.wide {
    max-width:1600px
}
.table-scroll {
    overflow:auto
}
.admin-map-table {
    min-width:1200px
}
.admin-map-table .tiny {
    width:80px
}
.sticky-save {
    position:sticky;
    bottom:20px;
    margin:16px 0 40px;
    box-shadow:0 8px 25px #1f5b9270
}
.search-results {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    padding-bottom:50px
}
.result-row {
    display:flex;
    justify-content:space-between;
    padding:10px 5px;
    border-bottom:1px solid #eee3d3;
    font-size:12px
}
.result-row span {
    color:#8292a2
}
@media(max-width:1000px) {
    .world-stage, .world-stage>img {
        min-height:480px
    }
    .admin-grid, .search-results {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:700px) {
    .world-stage, .world-stage>img {
        min-height:330px
    }
    .world-marker {
        font-size:8px;
        padding:4px 6px 4px 19px
    }
    .world-marker span {
        width:9px;
        height:9px;
        left:5px
    }
    .admin-grid, .search-results {
        grid-template-columns:1fr
    }
}
/* V1.1 Map visual editor */
.map-editor-layout {
    display:grid;
    grid-template-columns:330px minmax(0, 1fr);
    gap:18px;
    align-items:start;
    margin-bottom:20px
}
.map-editor-sidebar {
    padding:14px;
    position:sticky;
    top:90px;
    max-height:760px;
    display:flex;
    flex-direction:column
}
.map-editor-help {
    display:grid;
    gap:3px;
    padding:11px 12px;
    margin:10px 0;
    background:#eef8ff;
    border:1px solid #d6e9f7;
    border-radius:10px;
    font-size:11px;
    color:#58718a
}
.map-editor-help b {
    color:#28577f;
    margin-bottom:2px
}
.map-picker-list {
    overflow:auto;
    min-height:260px;
    padding-right:4px
}
.map-picker-item {
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    text-align:left;
    border:1px solid #e5dfd2;
    background:#fff;
    border-radius:10px;
    padding:9px 10px;
    margin:6px 0;
    cursor:pointer;
    color:#334d68
}
.map-picker-item:hover, .map-picker-item.selected {
    border-color:#4f9bd4;
    background:#eef8ff;
    box-shadow:0 3px 10px #4c86ae1c
}
.map-picker-item b {
    display:block;
    font-size:12px
}
.map-picker-item small {
    display:block;
    color:#8795a4;
    font-size:9px
}
.map-picker-item em {
    font-style:normal;
    font-size:9px;
    color:#9aa7b1;
    white-space:nowrap
}
.map-picker-item.has-point em {
    color:#2b9a60
}
.visual-map-editor-panel {
    padding:12px
}
.visual-map-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:4px 4px 12px
}
.visual-map-toolbar small {
    display:block;
    color:#8291a0;
    font-size:10px
}
.visual-map-toolbar b {
    font-size:17px;
    color:#244c76
}
.visual-map-actions {
    display:flex;
    gap:8px
}
.btn-secondary {
    background:linear-gradient(#67bdf4, #2c82cf)
}
.btn-secondary.active {
    background:linear-gradient(#f0bd50, #c88a20);
    box-shadow:0 0 0 4px #ffd97744
}
.btn-danger-soft {
    background:#fff1ef;
    color:#b14b40;
    border:1px solid #e9b5ae
}
.visual-map-note {
    padding:8px 12px;
    margin-bottom:8px;
    background:#fff8e8;
    border:1px dashed #e2bd6f;
    border-radius:8px;
    color:#775d2b;
    font-size:11px
}
.admin-world-stage {
    position:relative;
    overflow:hidden;
    border-radius:13px;
    background:#d7efff;
    min-height:620px;
    user-select:none;
    cursor:crosshair;
    border:1px solid #c6dce9
}
.admin-world-stage>img {
    width:100%;
    height:620px;
    object-fit:cover;
    display:block;
    pointer-events:none
}
.admin-world-marker {
    position:absolute;
    transform:translate(-50%, -50%);
    z-index:4;
    border:0;
    background:#fffdf5;
    border:2px solid #d0a349;
    border-radius:18px;
    padding:5px 10px 5px 25px;
    font-family:inherit;
    color:#29425f;
    font-size:10px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 5px 12px #27486245;
    cursor:grab
}
.admin-world-marker:active, .dragging-map-marker .admin-world-marker.selected {
    cursor:grabbing
}
.admin-world-marker span {
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
    width:13px;
    height:13px;
    border-radius:50%;
    background:#2f87d0;
    border:3px solid white;
    box-shadow:0 0 0 1px #b8862c
}
.admin-world-marker.selected {
    z-index:10;
    border-color:#268ee2;
    box-shadow:0 0 0 5px #2e9bef36, 0 7px 18px #244c7350
}
.coordinate-readout {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 3px 0
}
.coordinate-readout>span {
    background:#eef8ff;
    border:1px solid #d5e9f7;
    border-radius:14px;
    padding:5px 10px;
    font-size:11px
}
.coordinate-readout small {
    margin-left:auto;
    color:#8191a1
}
.map-settings-panel {
    margin-top:18px
}
.coordinate-cell {
    min-width:190px
}
.coordinate-label {
    display:inline-block;
    font-size:10px;
    color:#59738d;
    margin-right:6px
}
.mini-place-btn {
    border:1px solid #c9dcea;
    background:#eef8ff;
    color:#2e6c9e;
    border-radius:13px;
    padding:4px 8px;
    font-family:inherit;
    font-size:9px;
    cursor:pointer
}
.mini-place-btn:hover {
    background:#dff2ff
}
.thumb img[src*="image.php"] {
    image-rendering:auto
}
@media(max-width:1050px) {
    .map-editor-layout {
        grid-template-columns:1fr
    }
    .map-editor-sidebar {
        position:static;
        max-height:none
    }
    .map-picker-list {
        max-height:300px
    }
    .admin-world-stage, .admin-world-stage>img {
        min-height:480px;
        height:480px
    }
}
@media(max-width:700px) {
    .visual-map-toolbar {
        align-items:flex-start;
        flex-direction:column
    }
    .visual-map-actions {
        width:100%
    }
    .visual-map-actions .btn {
        flex:1;
        padding:8px 10px;
        font-size:11px
    }
    .admin-world-stage, .admin-world-stage>img {
        min-height:340px;
        height:340px
    }
    .admin-world-marker {
        font-size:8px;
        padding:4px 7px 4px 18px
    }
    .admin-world-marker span {
        width:9px;
        height:9px;
        left:5px
    }
    .coordinate-readout {
        flex-wrap:wrap
    }
    .coordinate-readout small {
        width:100%;
        margin:0
    }
}
/* v1.2 World Map: public page is map-first, not a card grid */
.compact-world-title {
    padding-bottom:18px
}
.public-world-only {
    padding:16px
}
.interactive-world-stage {
    min-height:560px;
    border-radius:20px;
    overflow:hidden;
    background:#dff3ff;
    box-shadow:inset 0 0 0 1px rgba(173, 126, 35, .22)
}
.interactive-world-stage>img {
    width:100%;
    height:100%;
    min-height:560px;
    object-fit:cover;
    display:block
}
.world-map-help {
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    padding:16px
}
.world-map-help>div {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255, 255, 255, .75);
    border:1px solid rgba(210, 166, 76, .25)
}
.world-map-help span {
    font-size:13px;
    opacity:.72
}
.empty-state {
    padding:22px;
    text-align:center
}
@media(max-width:900px) {
    .interactive-world-stage, .interactive-world-stage>img {
        min-height:360px
    }
    .world-map-help {
        grid-template-columns:1fr
    }
}
/* v1.3 Asset Manager */
.asset-admin-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
.asset-upload-form {
    display:grid;
    gap:10px
}
.asset-upload-form label {
    font-weight:700;
    font-size:13px
}
.asset-upload-form input[type=file] {
    padding:10px;
    background:#fff
}
.asset-test-panel {
    margin-top:18px;
    padding:18px
}
.asset-preview-controls {
    display:flex;
    gap:10px;
    align-items:center
}
.asset-preview-controls select {
    min-width:130px;
    padding:10px;
    border:1px solid #e7cf9a;
    border-radius:10px
}
.asset-preview-box {
    margin-top:16px;
    min-height:220px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg, #edfaff, #fff8e7);
    border:1px dashed #dcc48e;
    border-radius:14px
}
.asset-preview-box img {
    max-width:100%;
    max-height:360px;
    object-fit:contain
}
.error {
    background:#fff0f0;
    border:1px solid #e9a6a6;
    color:#a52b2b;
    padding:12px 16px;
    border-radius:12px
}
.success {
    background:#ecfff4;
    border:1px solid #9ed7b6;
    color:#176b3a;
    padding:12px 16px;
    border-radius:12px
}
@media(max-width:800px) {
    .asset-admin-grid {
        grid-template-columns:1fr
    }
    .asset-preview-controls {
        align-items:stretch;
        flex-direction:column
    }
}
/* V1.5 public map architecture */
html, body, button, input, select, textarea, table, h1, h2, h3, h4, h5, h6, a, span, div, p, b, strong, small, label {
    font-family:'Kanit', Tahoma, sans-serif!important
}
.public-world-map-panel {
    padding:18px;
    margin-bottom:45px
}
.public-world-map-panel .interactive-world-stage {
    aspect-ratio:16/9;
    min-height:0
}
.public-world-map-panel .interactive-world-stage>img {
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover
}
.world-toggle {
    white-space:nowrap;
    font-size:12px
}
.world-toggle input {
    vertical-align:middle
}
@media(max-width:800px) {
    .public-world-map-panel .interactive-world-stage {
        aspect-ratio:auto;
        min-height:360px
    }
    .public-world-map-panel .interactive-world-stage>img {
        min-height:360px
    }
}
/* V1.6 World Map minimap markers */
.world-marker-card {
    position:absolute;
    transform:translate(-50%, -50%);
    display:flex!important;
    align-items:center;
    gap:8px;
    min-width:118px;
    max-width:190px;
    padding:5px 10px 5px 5px!important;
    background:rgba(255, 255, 255, .96)!important;
    border:2px solid #e5b44c!important;
    border-radius:999px!important;
    box-shadow:0 6px 18px rgba(42, 69, 98, .22)!important;
    color:#173b66!important;
    text-decoration:none!important;
    z-index:5;
}
.world-marker-card:hover {
    z-index:20;
    transform:translate(-50%, -50%) scale(1.06);
    box-shadow:0 10px 24px rgba(42, 69, 98, .30)!important;
}
.world-marker-thumb {
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(180deg, #e8f7ff, #fff6db);
    border:2px solid #7bb7e7;
    display:flex;
    align-items:center;
    justify-content:center;
}
.world-marker-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.world-marker-thumb.no-image:before {
    content:'🗺';
    font-size:24px;
}
.world-marker-name {
    font-weight:700;
    font-size:13px;
    line-height:1.15;
    white-space:nowrap;
}
@media(max-width:800px) {
    .world-marker-card {
        min-width:auto;
        max-width:140px;
        gap:5px;
        padding:3px 7px 3px 3px!important;
    }
    .world-marker-thumb {
        width:40px;
        height:40px;
        min-width:40px;
    }
    .world-marker-name {
        font-size:11px
    }
}
/* V1.7 marker sizing */
.world-marker-card {
    --marker-scale:.55;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    padding:3px 7px 3px 3px!important;
    gap:5px!important;
    transform:translate(-50%, -50%) scale(var(--marker-scale))!important;
    transform-origin:center center;
}
.world-marker-card:hover {
    transform:translate(-50%, -50%) scale(calc(var(--marker-scale) * 1.08))!important;
}
.world-marker-thumb {
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    border-radius:10px!important;
    border:2px solid #7bb7e7!important;
}
.world-marker-name {
    font-size:16px!important;
    padding-right:4px;
}
@media(max-width:800px) {
    .world-marker-card {
        --marker-scale:.45
    }
}
.map-preview-editor-body {
    display:grid;
    grid-template-columns:340px 1fr;
    gap:24px;
    align-items:center;
    padding:20px
}
.map-preview-card {
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    background:#fff;
    border:2px solid #e7c26a;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(37, 64, 92, .12);
    transform-origin:left center;
    transition:.15s
}
.map-preview-thumb {
    width:140px;
    height:110px;
    border-radius:12px;
    overflow:hidden;
    background:#eef7fb
}
.map-preview-thumb img {
    width:100%;
    height:100%;
    object-fit:cover
}
.map-preview-controls input[type=range] {
    width:100%;
    max-width:420px
}
@media(max-width:800px) {
    .map-preview-editor-body {
        grid-template-columns:1fr
    }
    .map-preview-card {
        transform:none!important
    }
}
/* V1.8 reliable map editor */
.map-save-state {
    display:block;
    margin-top:4px;
    font-size:11px;
    color:#718097
}
.map-save-state.pending, .map-save-state.saving {
    color:#bd7b09
}
.map-save-state.saved {
    color:#16874c;
    font-weight:700
}
.map-save-state.error {
    color:#c93434;
    font-weight:700
}
.map-preview-editor-panel {
    position:relative;
    overflow:visible
}
.map-preview-card {
    transform-origin:left center!important;
    transition:transform .15s ease;
}
.map-preview-thumb {
    background:repeating-conic-gradient(#eef3f7 0 25%, #fff 0 50%) 50%/20px 20px;
}
.map-preview-thumb img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain!important
}
.admin-world-marker.preview-marker {
    overflow:visible;
}
/* V1.9 Admin World Map image markers */
.admin-world-marker-image {
    --marker-scale:.55;
    display:flex!important;
    align-items:center;
    gap:6px;
    padding:4px 8px 4px 4px!important;
    min-width:0!important;
    width:auto!important;
    border-radius:12px!important;
    transform:translate(-50%, -50%) scale(var(--marker-scale))!important;
    transform-origin:center center;
    background:rgba(255, 255, 255, .97)!important;
    border:2px solid #e5b44c!important;
    box-shadow:0 6px 18px rgba(29, 58, 89, .24)!important;
    overflow:visible!important;
}
.admin-world-marker-image:hover, .admin-world-marker-image.selected {
    z-index:50!important;
    transform:translate(-50%, -50%) scale(calc(var(--marker-scale) * 1.08))!important;
}
.admin-marker-thumb {
    width:86px;
    height:70px;
    min-width:86px;
    overflow:hidden;
    border-radius:8px;
    background:#eef6fb;
    border:2px solid #78b9e7;
    display:block!important;
}
.admin-marker-thumb img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:#fff;
}
.admin-world-marker-image b {
    font-size:15px!important;
    line-height:1.1;
    white-space:nowrap;
    color:#173b66;
}
.map-preview-thumb img {
    object-fit:contain!important;
    background:#fff;
}
.public-ok {
    color:#159447!important;
    font-weight:800!important
}
.public-off {
    color:#8a96a5!important
}
.map-editor-help hr {
    border:0;
    border-top:1px solid #cfe0ec;
    margin:8px 0
}
/* V2.1 - image-only map markers: same visual in Home / Public / Admin */
.world-map-image-marker, .home-map-image-marker, .public-style-map-marker {
    --marker-scale:.55;
    position:absolute;
    transform:translate(-50%, -50%) scale(var(--marker-scale))!important;
    transform-origin:center center;
    z-index:5;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
    cursor:pointer;
    overflow:visible!important;
}
.world-map-image-marker:hover, .home-map-image-marker:hover, .public-style-map-marker:hover, .public-style-map-marker.selected {
    z-index:50!important;
    transform:translate(-50%, -50%) scale(calc(var(--marker-scale) * 1.08))!important;
}
.world-map-image-frame {
    display:block!important;
    width:118px;
    height:92px;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    border:2px solid rgba(255, 255, 255, .96);
    outline:2px solid #e4b44b;
    box-shadow:0 5px 16px rgba(22, 54, 85, .25);
}
.world-map-image-frame img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:rgba(255, 255, 255, .94);
}
.world-map-hover-name, .home-map-hover-name {
    position:absolute;
    left:50%;
    bottom:calc(100% + 9px);
    transform:translateX(-50%) translateY(4px);
    display:block;
    padding:7px 11px;
    white-space:nowrap;
    border-radius:9px;
    background:rgba(20, 49, 81, .94);
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    box-shadow:0 5px 16px rgba(0, 0, 0, .22);
    transition:.14s ease;
}
.world-map-image-marker:hover .world-map-hover-name, .home-map-image-marker:hover .home-map-hover-name, .public-style-map-marker:hover .world-map-hover-name, .public-style-map-marker.selected .world-map-hover-name {
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
/* Homepage markers slightly more compact, still image-only */
.home-map-image-frame {
    width:96px;
    height:74px;
}
/* Remove legacy marker label visuals inside admin */
.admin-world-marker.public-style-map-marker {
    width:auto!important;
    min-width:0!important;
}
/* Admin must preview exactly public marker dimensions */
.admin-world-stage .world-map-image-frame {
    width:118px;
    height:92px;
}
@media(max-width:800px) {
    .world-map-image-frame {
        width:92px;
        height:72px
    }
    .home-map-image-frame {
        width:74px;
        height:58px
    }
    .world-map-hover-name, .home-map-hover-name {
        font-size:11px!important
    }
}
/* V2.2 Map visual cleanup */
/* 1) Homepage world map: much smaller minimap thumbnails */
.home-map-image-marker {
    --marker-scale:.34!important;
}
.home-map-image-frame {
    width:78px!important;
    height:58px!important;
    border-radius:5px!important;
    border:0!important;
    outline:0!important;
    box-shadow:0 3px 9px rgba(20, 50, 80, .18)!important;
    background:transparent!important;
}
.home-map-image-frame img {
    object-fit:contain!important;
    background:transparent!important;
}
/* 2) Public world map: image only, no white card / gold frame */
.world-map-image-marker {
    background:transparent!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    padding:0!important;
}
.world-map-image-marker .world-map-image-frame {
    width:118px;
    height:92px;
    border:0!important;
    outline:0!important;
    border-radius:3px!important;
    box-shadow:0 4px 12px rgba(15, 41, 67, .22)!important;
    background:transparent!important;
}
.world-map-image-marker .world-map-image-frame img {
    width:100%;
    height:100%;
    object-fit:contain!important;
    background:transparent!important;
}
/* 3) Admin: use the exact same square minimap thumbnail style as public */
.public-style-map-marker {
    background:transparent!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    padding:0!important;
}
.public-style-map-marker .world-map-image-frame {
    width:118px!important;
    height:92px!important;
    border:0!important;
    outline:0!important;
    border-radius:3px!important;
    box-shadow:0 4px 12px rgba(15, 41, 67, .22)!important;
    background:transparent!important;
}
.public-style-map-marker .world-map-image-frame img {
    object-fit:contain!important;
    background:transparent!important;
}
/* Remove legacy circular admin thumbnail rules */
.admin-marker-thumb {
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
}
/* 4) Map view: keep preview completely inside its frame */
.map-view-image, .map-preview, .map-detail-image, .map-hero-image, .detail-map-image, .map-view .thumb, .map-detail .thumb {
    overflow:hidden!important;
}
.map-view-image img, .map-preview img, .map-detail-image img, .map-hero-image img, .detail-map-image img, .map-view .thumb img, .map-detail .thumb img {
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
}
/* Generic protection for detail/card map images */
.detail-hero .thumb img, .detail-card .thumb img, .panel .map-image img {
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
}
@media(max-width:800px) {
    .home-map-image-marker {
        --marker-scale:.28!important
    }
    .world-map-image-marker .world-map-image-frame, .public-style-map-marker .world-map-image-frame {
        width:92px!important;
        height:70px!important;
    }
}
/* V2.3 Map View — inspired by original DB layout, using current fantasy theme */
.map-view-page {
    padding-top:32px;
    padding-bottom:56px;
}
.map-view-grid {
    display:grid;
    grid-template-columns:330px minmax(0, 1fr);
    gap:24px;
    align-items:start;
}
.map-info-card {
    background:#fffdf8;
    border:1px solid #e8d4a6;
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 28px rgba(38, 72, 105, .08);
}
.map-image-box {
    width:100%;
    background:transparent;
    border:0;
    border-radius:10px;
    overflow:hidden;
}
.map-image-box img {
    display:block;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
}
.map-name-chip {
    width:max-content;
    max-width:92%;
    margin:-7px auto 14px;
    position:relative;
    z-index:2;
    padding:5px 12px;
    border-radius:8px;
    background:#188fd2;
    color:#fff;
    font-size:13px;
    line-height:1;
    text-align:center;
    box-shadow:0 4px 10px rgba(20, 91, 138, .18);
}
.map-info-summary {
    padding:10px 4px 2px;
}
.map-info-summary h1 {
    margin:8px 0 7px;
    font-size:24px;
    line-height:1.2;
}
.map-info-meta {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.map-info-meta span {
    padding:5px 9px;
    border-radius:999px;
    background:#eef7fb;
    color:#56728b;
    font-size:11px;
}
.map-monster-panel {
    margin:0;
    overflow:hidden;
}
.map-monster-head {
    padding:20px 24px 14px;
}
.map-monster-head h2 {
    margin:0 0 4px;
    font-size:20px;
}
.map-monster-head span {
    font-size:12px;
    color:#7890a6;
}
.map-monster-table {
    width:100%;
}
.map-monster-table th {
    white-space:nowrap;
}
.map-monster-table td, .map-monster-table th {
    vertical-align:middle;
}
.map-mob-name {
    display:flex;
    align-items:center;
    gap:12px;
    color:#173b66;
    text-decoration:none;
    min-width:180px;
}
.map-mob-name:hover strong {
    color:#168fd4;
}
.map-mob-thumb {
    width:52px;
    height:52px;
    min-width:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:transparent;
}
.map-mob-thumb img {
    max-width:100%;
    max-height:100%;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
    display:block;
}
.level-pill {
    display:inline-flex;
    min-width:58px;
    justify-content:center;
    padding:7px 10px;
    border-radius:8px;
    background:#dff9f4;
    color:#00a98b;
    font-weight:700;
}
.map-detail-btn {
    padding:8px 14px!important;
    min-width:92px;
    text-align:center;
    border-radius:8px!important;
}
@media(max-width:1050px) {
    .map-view-grid {
        grid-template-columns:280px minmax(0, 1fr)
    }
}
@media(max-width:820px) {
    .map-view-grid {
        grid-template-columns:1fr
    }
    .map-info-card {
        max-width:420px;
        margin:0 auto;
        width:100%
    }
    .map-monster-panel {
        width:100%
    }
}
/* V2.4 - hard-fix homepage World Map thumbnails */
.map-art-image.interactive-world {
    position:relative!important;
    overflow:hidden!important;
}
.home-map-marker-v24 {
    --marker-scale:1!important;
    position:absolute!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    transform:translate(-50%, -50%)!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    z-index:4!important;
}
.home-map-marker-v24:hover {
    z-index:30!important;
    transform:translate(-50%, -50%) scale(1.18)!important;
}
.home-map-frame-v24 {
    display:block!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    border:0!important;
    outline:0!important;
    border-radius:4px!important;
    overflow:hidden!important;
    background:transparent!important;
    box-shadow:0 2px 6px rgba(16, 43, 71, .22)!important;
}
.home-map-frame-v24 img {
    display:block!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    object-fit:cover!important;
    object-position:center!important;
    background:transparent!important;
}
.home-map-marker-v24 .home-map-hover-name {
    bottom:calc(100% + 5px)!important;
    font-size:10px!important;
    padding:5px 7px!important;
}
@media(max-width:800px) {
    .home-map-marker-v24, .home-map-frame-v24, .home-map-frame-v24 img {
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
        max-width:34px!important;
    }
}
/* Drop item icon */
.drop-item-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:inherit;
    text-decoration:none;
}
.drop-item-link:hover {
    color:#168fd4;
}
.drop-item-icon {
    width:36px;
    height:36px;
    min-width:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.drop-item-icon img {
    display:block;
    max-width:32px;
    max-height:32px;
    width:auto;
    height:auto;
    object-fit:contain;
}
/* V3.0 Item detail / translation / monster stats */
.item-detail-visual img {
    max-width:100%;
    height:auto;
    object-fit:contain
}
.translated-bonus-list {
    display:grid;
    gap:8px;
    padding:8px 0 14px
}
.translated-bonus {
    padding:9px 12px;
    border-radius:9px;
    background:rgba(236, 248, 246, .72);
    color:#244b61;
    font-weight:600
}
.raw-script-details {
    margin-top:10px
}
.raw-script-details summary {
    cursor:pointer;
    font-weight:700;
    color:#287ca7;
    padding:8px 0
}
.monster-attributes {
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
    margin-top:14px
}
.monster-attributes>div {
    text-align:center;
    padding:10px 6px;
    border-radius:10px;
    background:#f4fafb;
    border:1px solid rgba(60, 120, 150, .12)
}
.monster-attributes span {
    display:block;
    font-size:11px;
    color:#70879a
}
.monster-attributes b {
    display:block;
    font-size:18px;
    color:#173d67;
    margin-top:2px
}
@media(max-width:700px) {
    .monster-attributes {
        grid-template-columns:repeat(3, 1fr)
    }
}
/* V3.1 FINAL HERO CLEANUP
   - Single hero-bg only
   - No left/right artwork
   - No green/white translucent background behind headline/search
*/
.hero {
    position:relative!important;
    background-image:url('../images/theme/hero-bg.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    overflow:hidden!important;
}
.hero-art, .hero-art-left, .hero-art-right {
    display:none!important;
}
.hero-layout {
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
    background-color:transparent!important;
}
.hero-center {
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    border:0!important;
}
.hero::before, .hero::after, .hero-layout::before, .hero-layout::after, .hero-center::before, .hero-center::after {
    content:none!important;
    display:none!important;
    background:none!important;
    background-color:transparent!important;
    background-image:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
}
.hero-center h1, .hero-center h1 span, .hero-center p, .hero-center .eyebrow {
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    text-shadow:none!important;
}
/* Search control keeps only its own white input/button UI */
.hero .searchbox {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
.unsupported-bonus {
    background:#fff4e5!important;
    color:#a46613!important;
    font-weight:600;
}
/* V3.3 Header logo cleanup */
.brand.brand-logo {
    display:flex!important;
    align-items:center!important;
    margin-right:34px!important;
    padding:0!important;
    height:100%!important;
}
.brand.brand-logo img {
    display:block!important;
    width:auto!important;
    height:58px!important;
    max-width:235px!important;
    object-fit:contain!important;
    object-position:left center!important;
}
.brand.brand-logo .brand-wings, .brand.brand-logo span {
    display:none!important;
}
/* Admin link intentionally hidden from public header */
.admin-link {
    display:none!important;
}
@media(max-width:900px) {
    .brand.brand-logo {
        margin-right:14px!important;
    }
    .brand.brand-logo img {
        height:50px!important;
        max-width:185px!important;
    }
}
.monster-load-more-wrap {
    display:flex;
    justify-content:center;
    padding:26px 0 10px
}
.monster-load-more {
    min-width:180px;
    text-align:center;
    font-weight:700
}
/* V4.0 Import Center */
.import-dropzone {
    display:flex;
    min-height:190px;
    border:2px dashed #9db9ca;
    border-radius:18px;
    background:rgba(239, 248, 252, .72);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    text-align:center;
    cursor:pointer;
    padding:28px;
    transition:.2s ease
}
.import-dropzone:hover, .import-dropzone.is-dragging {
    border-color:#2d83ad;
    background:#e6f5fb;
    transform:translateY(-1px)
}
.import-dropzone strong {
    font-size:22px
}
.import-dropzone span {
    color:#647c89
}
.import-dropzone input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none
}
.selected-files {
    display:grid;
    gap:8px;
    margin:16px 0
}
.selected-files>div {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:10px 13px;
    border:1px solid #d9e6ec;
    border-radius:10px;
    background:#fff
}
.selected-files span {
    color:#6b7e88
}
.import-result-list {
    display:grid;
    gap:8px;
    padding:14px
}
.import-result-row {
    display:grid;
    grid-template-columns:minmax(220px, 1fr) repeat(4, auto);
    gap:16px;
    align-items:center;
    padding:11px 13px;
    border:1px solid #dfe9ee;
    border-radius:10px;
    background:#fff
}
@media(max-width:760px) {
    .import-result-row {
        grid-template-columns:1fr 1fr
    }
    .import-result-row b {
        grid-column:1/-1
    }
}

/* Import Center V3 */
.import-log-card {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.import-log-card:first-child {
    border-top: 0;
}

.import-result-row {
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-small {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1;
}

.import-error-details {
    padding: 0 16px 16px;
}

.import-error-item {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 107, 107, 0.32);
    border-radius: 10px;
    background: rgba(255, 74, 74, 0.08);
}

.import-error-item > div {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.import-error-item span {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 11px;
}

.import-error-item code {
    display: block;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: inherit;
}

.import-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.76);
    text-align: center;
    color: #fff;
}


/* World Map V2 — fixed layout from the reference database */
.wm2-panel{overflow:visible}.wm2-scroll{overflow:auto;padding:18px}.wm2-stage{position:relative;width:960px;height:790px;margin:0 auto;border-radius:24px;background-image:url('../images/theme/worldmap-preview.png');background-repeat:no-repeat;background-position:center;background-size:100% 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.wm2-stage:before{content:"";position:absolute;inset:18px;border:1px dashed rgba(255,255,255,.08);border-radius:18px;pointer-events:none}.wm2-node{position:absolute;top:var(--wm-top);left:var(--wm-left);width:48px;height:48px;z-index:2;transform:translateZ(0)}.wm2-node img{width:48px;height:48px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.3);box-shadow:0 6px 18px rgba(0,0,0,.34);transition:.18s ease}.wm2-node:hover{z-index:20}.wm2-node:hover img{transform:translateY(-4px) scale(1.16);box-shadow:0 12px 28px rgba(0,0,0,.5)}.wm2-tip{position:absolute;left:50%;bottom:58px;min-width:210px;padding:10px 12px;border-radius:10px;background:rgba(15,18,25,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translate(-50%,7px);transition:.15s ease;color:#fff}.wm2-tip b,.wm2-tip small{display:block}.wm2-tip small{margin-top:3px;color:rgba(255,255,255,.65);font-size:11px}.wm2-node:hover .wm2-tip{opacity:1;transform:translate(-50%,0)}
.wm2-dungeon-panel{margin-top:24px}.wm2-dungeon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px}.wm2-dungeon-card{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025)}.wm2-dungeon-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.wm2-dungeon-head h4{margin:0}.wm2-dungeon-head span{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.07)}.wm2-floor-list{display:grid;gap:8px}.wm2-floor{display:flex;align-items:center;gap:12px;padding:9px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid transparent;transition:.16s ease}.wm2-floor:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.055)}.wm2-floor img{width:50px;height:50px;object-fit:cover;border-radius:10px}.wm2-floor span,.wm2-floor b,.wm2-floor small{display:block;min-width:0}.wm2-floor small{margin-top:3px;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-admin-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 180px;gap:12px;padding:16px}.block-muted{display:block;margin-top:4px;color:var(--muted);font-weight:400}.wm-status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700}.wm-status-pill.is-open{background:rgba(58,194,125,.14);color:#72e0a7;border:1px solid rgba(58,194,125,.3)}.wm-status-pill.is-closed{background:rgba(255,96,96,.11);color:#ff9292;border:1px solid rgba(255,96,96,.25)}
@media(max-width:900px){.wm2-dungeon-grid{grid-template-columns:1fr}}@media(max-width:620px){.wm-admin-toolbar{grid-template-columns:1fr}.wm2-dungeon-grid{padding:12px}.wm2-dungeon-card{padding:12px}}


/* Item script: disabled capabilities */
.disabled-script-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #dfc58e;
}
.disabled-script-title {
    margin-bottom: 10px;
    font-weight: 800;
    color: #9b6411;
}
.disabled-bonus {
    opacity: .78;
    background: #f7f4ee !important;
    color: #806f58 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.disabled-badge {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8e1d5;
    color: #7a6650;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    vertical-align: middle;
}