/* =========================================================
   GLOBAL RESET & BASE
========================================================= */

*{
    box-sizing:border-box;
}
body{
    background:#1b1b1b;
    color:white;
    font-family: "Segoe UI", Arial, sans-serif;
    text-align:center;
    overflow-x:auto;
}

/* =========================================================
   MAP
========================================================= */

#map{
    width:1600px;
    height:1000px;
    margin:0;
    position:relative;

    background:
            linear-gradient(#333 1px, transparent 1px),
            linear-gradient(90deg,#333 1px, transparent 1px);

    background-size:40px 40px;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
}

.map-area{
    width:1600px;
}

/* =========================================================
   CASTLES
========================================================= */

.castle{
    width:65px;
    height:65px;
    background:orange;
    border-radius:6px;
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:3;
}

.castle-name{
    font-size:11px;
    line-height:12px;
    font-weight:600;
    font-family:"Segoe UI", Arial, sans-serif;
    color:inherit;
    margin-bottom:3px;
}

.castle-power{
    font-size:14px;
    font-weight:bold;
    color:inherit;
    margin-top:2px;
    text-shadow:0 1px 1px rgba(0,0,0,0.35);
}

.castle,
.player{
    box-shadow:
            inset 0 0 6px rgba(255,255,255,0.25),
            inset 0 0 2px rgba(0,0,0,0.35);
}

.castle-trap{
    width:8px;
    height:8px;
    border-radius:50%;
    margin-top:2px;
}

.castle[data-trap="M"] .castle-trap{ background:#43a047; }
.castle[data-trap="E"] .castle-trap{ background: #1a1c1e; }
.castle[data-trap="F"] .castle-trap{ background:#1e88e5; }

.castle{
    position:absolute;
}

/* =========================================================
   MAP OBJECTS (TRAPS / BANNERS / HQ)
========================================================= */

.trap{
    width:112px;
    height:112px;
    background: #cc0000;
    border-radius:10px;
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4;
}

.banner{
    width:26px;
    height:26px;
    background: #f8364a;
    border:2px solid black;
    border-radius:50%;
    box-sizing:border-box;
    position:absolute;
    cursor:grab;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    z-index:2;
    user-select:none;
}

.castle,.trap,.plainshq{
    cursor:grab;
    user-select:none;
}

.castle:active,
.trap:active,
.plainshq:active{
    cursor:grabbing;
}

.plainshq{
    width:112px;
    height:112px;
    background:#2f6ad9;
    border-radius:10px;
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4;
}

.hq-label{
    font-size:14px;
    font-weight:bold;
    color:white;
    text-align:center;
    pointer-events:none;
}

.dragging{
    opacity:0.7;
}

/* =========================================================
   TOOLBAR / LAYOUT
========================================================= */

.toolbar-container{
    width:1600px;
    margin-bottom:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
}

.toolbar-group{
    display:flex;
    gap:10px;
    align-items:center;
}

.toolbar-group{
    padding-right:15px;
}

.toolbar-group input[type="file"]{
    height:36px;
}

.toolbar{
    margin:20px auto;
    width:1600px;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
}

.toolbar button,
.toolbar input[type="file"]{
    height:36px;
    display:flex;
    align-items:center;
}

.toolbar-wrapper{
    width:1860px;
    margin:20px auto;
}

.layout{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    min-width:1900px;
}

/* =========================================================
   PLAYER PANEL
========================================================= */

.player-panel{
    width:240px;
    display:flex;
    flex-direction:column;
}

.player-header{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

.player-header button{
    height:36px;
}

#playerList{
    width:260px;
    border:1px solid #333;
    padding:10px;
    height:1000px;
    overflow-y:auto;
}

/* =========================================================
   PLAYER ITEMS
========================================================= */

.player{
    display:flex;
    background:#2c2c2c;
    align-items:stretch;
    margin-bottom:6px;
    cursor:pointer;
}

.player:hover{
    filter:brightness(1.30);
}

.player.active{
    background:#2e7d32;
}

.player-name{
    font-weight:600;
}

.player:hover .player-name{
    color: #1c1c1c;
}

.player.level-low:hover .player-name,
.player.level-very-low:hover .player-name,
.player.level-poor:hover .player-name{
    color: #000000;
}

.player .edit{
    width:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid #333;
    background:#3a3a3a;
    color:#ddd;
    cursor:pointer;
    opacity:0.8;
}

.player .edit:hover{
    background:#2e7d32;
    opacity:1;
}

.player-info{
    display:flex;
    gap:10px;
    flex:1;
    align-items:center;
    padding:6px;
}

.player-power{
    margin-left:auto;
    text-align:right;
    width:60px;
    opacity:0.9;
    font-weight:600;
}

/* =========================================================
   POWER LEVELS
========================================================= */

.player.level-exceptional,
.castle.level-exceptional{ background:#d35400; color:white; }

.player.level-very-high,
.castle.level-very-high{ background:#e67e00; color:white; }

.player.level-high,
.castle.level-high{ background:#f39c12; color:white; }

.player.level-medium,
.castle.level-medium{ background:#f5b041; color:#222; }

.player.level-low,
.castle.level-low{ background:#f8c471; color:#222; }

.player.level-very-low,
.castle.level-very-low{ background:#fad7a0; color:#222; }

.player.level-poor,
.castle.level-poor{ background:#fdebd0; color:#222; }

/* =========================================================
   ACTIVE STATES
========================================================= */

.player.active{
    background:#2e7d32;
}

.castle.active{
    background:#2e7d32;
    color:white;
}

.castle.active .castle-name{
    color:white;
}

/* =========================================================
   BUTTONS / INPUTS
========================================================= */

button{
    background:#2c2c2c;
    color:white;
    border:1px solid #444;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

button:hover{
    background:#2e7d32;
    border-color:#4caf50;
}

input[type="file"]::file-selector-button{
    background:#2c2c2c;
    color:white;
    border:1px solid #444;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    margin-right:8px;
}

input[type="file"]::file-selector-button:hover{
    background:#3a3a3a;
}

input[type="file"]:hover::file-selector-button{
    background:#2e7d32;
    border-color:#4caf50;
}

.zoom-btn{
    background:#444;
    color:white;
    border:1px solid #666;
    padding:4px 8px;
    cursor:pointer;
}

.zoom-btn.active{
    background:#2e7d32;
    border-color:#4caf50;
}

/* =========================================================
   INTERACTION STATES
========================================================= */

.drag-preview{
    outline:2px dashed rgba(255,200,0,0.6);
}

/* =========================================================
   DIALOG / MODAL
========================================================= */

.trap-select{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:6px;
}

.trap-select button{
    width:32px;
    height:28px;
    padding:0;
    font-weight:600;
    margin-right: 10px;
}

.trap-select button.active{
    background:#2e7d32;
    border-color:#4caf50;
}

dialog{
    border:none;
    border-radius:10px;
    padding:20px;
    background:#2c2c2c;
    color:white;
}

dialog::backdrop{
    background:rgba(0,0,0,0.5);
}

dialog label{
    display:block;
    margin:10px 0;
}

dialog input{
    width:100%;
    padding:6px;
    border-radius:6px;
    border:1px solid #444;
    background:#1b1b1b;
    color:white;
    margin-top:6px;
}

.dialog-buttons{
    margin-top:15px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

/* =========================================================
   EXPORT MODE
========================================================= */

.export-mode .castle,
.export-mode .player{
    box-shadow: none !important;
}

.export-mode .castle{
    border:1px solid rgba(255,255,255,0.3);
}