/* ========================= */
/* Design tokens */
/* ========================= */

:root {
    --bg: #17171c;
    --bg-elevated: #1f1f27;
    --bg-input: #2a2a34;
    --bg-input-hover: #32323e;
    --border: #35353f;
    --text: #f1f1f6;
    --text-muted: #9797a6;

    --accent: #5b8cff;
    --accent-hover: #4a76e6;
    --accent-soft: rgba(91, 140, 255, 0.16);

    --danger: #ef5b5b;
    --danger-hover: #d94c4c;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);

    --sidebar-w: 280px;
    --strats-w: 380px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

    background:var(--bg);
    color:var(--text);
}

#app{
    display:flex;
    width:100vw;
    height:95%;
}

/* ========================= */
/* Sidebar brand */
/* ========================= */

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.sidebar-brand__logo{
    font-size:22px;
    line-height:1;
}

.sidebar-brand__name{
    font-size:17px;
    font-weight:700;
    letter-spacing:0.2px;
}

/* ========================= */
/* Sidebar sections */
/* ========================= */

.sidebar-section{
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px solid var(--border);
}

.sidebar-section:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}

.sidebar-section__title{
    display:block;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-muted);
    margin-bottom:10px;
}

/* ========================= */
/* Liste des troupes */
/* ========================= */

#troopList{

    display:flex;

    flex-direction:column;

    gap:6px;

    max-height:28vh;

    overflow-y:auto;

    padding-right:5px;

}

.troopButton{

    flex-shrink:0;

    width:100%;

    padding:10px 12px;

    border:1px solid transparent;

    border-radius:var(--radius-sm);

    background:var(--bg-input);

    color:var(--text);

    cursor:pointer;

    text-align:left;

    font-size:14px;

    transition:0.15s ease;

}

.troopButton:hover{

    background:var(--bg-input-hover);

}

.troopButton.selected{

    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--text);

}

/* ========================= */
/* Panel / grids */
/* ========================= */

.panel{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.panel label{

    font-size:12px;
    font-weight:600;
    color:var(--text-muted);

}

.placement-grid{
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr;
    gap:12px;
}

.panel-color{
    margin-top:12px;
}

.panel-color input[type="color"]{
    width:100%;
    height:38px;
    padding:3px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg-input);
    cursor:pointer;
}

/* ========================= */
/* Selected tower info */
/* ========================= */

.selected-info{
    margin-top:14px;
    padding:12px;
    border-radius:var(--radius);
    background:var(--bg-input);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.selected-info__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
}

.selected-info__label{
    color:var(--text-muted);
    font-weight:600;
}

.selected-info__value{
    font-weight:600;
}

/* ========================= */
/* Inputs */
/* ========================= */

select{

    width:100%;

    padding:8px 10px;

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    background:var(--bg-input);

    color:var(--text);

    font-size:14px;

}

.panel input{
    width:100%;
    padding:3px 3px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    height:100%;
}

select:focus,
input:focus{
    outline:none;
    border-color:var(--accent);
}

textarea{

    margin-top:10px;

    width:100%;

    height:150px;

    resize:none;

    padding:10px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:#15151b;

    color:#7de88a;

    font-family:Consolas, monospace;

    font-size:12px;

}

.json-area::placeholder{
    color:var(--text-muted);
}

/* ========================= */
/* Buttons */
/* ========================= */

button{

    padding:10px 14px;

    border:none;

    border-radius:var(--radius-sm);

    cursor:pointer;

    background:var(--bg-input);

    color:var(--text);

    font-size:13px;
    font-weight:600;

    transition:0.15s ease;

}

button:hover{

    background:var(--bg-input-hover);

}

button:active{

    transform:scale(0.97);

}

a{
    color:var(--accent);
}

.button-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.input-row{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.input-row input{
    flex:1;
    min-width:0;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg-input);
    color:var(--text);
    font-size:13px;
}

.input-row button{
    flex-shrink:0;
}

.btn{
    flex:1;
    min-width:100px;
}

.btn-primary{
    background:var(--accent);
    color:#0c1220;
}

.btn-primary:hover{
    background:var(--accent-hover);
}

.btn-ghost{
    background:transparent;
    border:1px solid var(--border);
}

.btn-ghost:hover{
    background:var(--bg-input);
}

.btn-danger{
    width:100%;
    margin-top:10px;
    background:transparent;
    border:1px solid var(--danger);
    color:var(--danger);
}

.btn-danger:hover{
    background:var(--danger);
    color:#1a0a0a;
}

/* ========================= */
/* Collaboration */
/* ========================= */

.collab-status{
    display:inline-block;
    padding:6px 10px;
    margin-bottom:10px;
    border-radius:999px;
    background:var(--bg-input);
    font-size:12px;
    font-weight:600;
    color:var(--text-muted);
}

/* ========================= */
/* Partie principale */
/* ========================= */

#main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    position:relative;

}

/* ========================= */
/* Barre du haut */
/* ========================= */

#topbar{

    flex-shrink:0;
    height:56px;

    margin-left: 64px;

    position:relative;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 15px;

    color:var(--text);

    background:var(--bg-elevated);
    border-bottom:1px solid var(--border);

}

.topbar__map{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:10px;
}

.topbar__map label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-muted);
}

.topbar__map select{
    width:auto;
    min-width:180px;
}

/* ========================= */
/* Canvas */
/* ========================= */

#gameCanvas{

    flex:1;

    display:block;

    background:#111;

    cursor:crosshair;
    width:100%;
    height:auto;

}

/* ========================= */
/* Scrollbar */
/* ========================= */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:5px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5a5a5a;

}

/* ========================= */
/* Recherche troupe */
/* ========================= */

#troopSearch{

    width:100%;

    padding:10px 12px;

    margin-bottom:12px;

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    background:var(--bg-input);

    color:var(--text);

    font-size:14px;

    outline:none;

    transition:0.2s;

}


#troopSearch::placeholder{

    color:var(--text-muted);

}


#troopSearch:focus{

    border-color:var(--accent);

    background:var(--bg-input-hover);

}

/* ========================= */
/* Floating canvas toolbar */
/* ========================= */

#canvasTools{

    position:absolute;

    top:60px;

    left:15px;

    z-index:10;

    display:flex;

    flex-direction:row;

    gap:6px;

    align-items:center;

    padding:6px;

    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:var(--shadow-sm);

}

/* ========================= */
/* Floating player filter (mirrors #canvasTools, right side) */
/* ========================= */

#canvasPlayerFilter{
    position:absolute;
    top:60px;
    right:15px;
    z-index:10;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:var(--shadow-sm);
}

#canvasPlayerFilter label{
    font-size:16px;
    line-height:1;
}

#canvasPlayerFilter select{
    width:auto;
    min-width:110px;
    padding:6px 8px;
}

/* ========================= */
/* Floating help button + panel (below #canvasPlayerFilter) */
/* ========================= */

#canvasHelp{
    position:absolute;
    top:112px;
    right:15px;
    z-index:10;
    display:flex;
    padding:6px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:var(--shadow-sm);
}

#helpPanel{
    position:absolute;
    top:166px;
    right:15px;
    z-index:15;
    width:300px;
    max-width:calc(100% - 30px);
    max-height:60vh;
    overflow-y:auto;
    padding:14px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

#helpPanel.panel-hidden{
    display:none;
}

#helpPanel h3{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-muted);
    margin-top:16px;
    margin-bottom:8px;
}

#helpPanel h3:first-of-type{
    margin-top:0;
}

#helpPanel ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
}

#helpPanel li{
    font-size:13px;
    line-height:1.5;
    color:var(--text);
}

#helpPanel kbd{
    display:inline-block;
    padding:1px 6px;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--bg-input);
    font-family:Consolas, monospace;
    font-size:11px;
}

.canvas-button{

    width:38px;

    height:38px;

    border-radius:50%;

    border:none;

    background:transparent;

    color:var(--text);

    font-size:18px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:0.2s;

}


.canvas-button:hover{

    background:var(--accent-soft);
    color:var(--accent);

}


.canvas-button:active{

    transform:scale(0.92);

}

.canvas-button.active{
    background:var(--accent);
    color:#0c1220;
}

/* Sépare visuellement le duo "couleur de zone" + "dessiner une zone" du reste des outils,
   pour qu'on comprenne au premier coup d'œil qu'ils vont ensemble. */
.canvas-divider{
    width:1px;
    height:22px;
    background:var(--border);
    margin:0 2px;
}

.canvas-tool-group{
    display:flex;
    align-items:center;
    gap:2px;
    padding:2px;
    border-radius:999px;
    background:var(--bg-input);
}

.canvas-button.active:hover{
    background:var(--accent-hover);
    color:#0c1220;
}

@keyframes canvas-button-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.canvas-button.spinning{
    animation: canvas-button-spin 1s linear infinite;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sélecteur de couleur de zone, habillé pour ressembler aux autres boutons de la toolbar. */
.canvas-color-swatch{
    padding:3px;
    border:1px solid var(--border);
    background:var(--bg-input);
    cursor:pointer;
}

.canvas-color-swatch::-webkit-color-swatch-wrapper{
    padding:0;
    border-radius:50%;
}

.canvas-color-swatch::-webkit-color-swatch{
    border:none;
    border-radius:50%;
}

.canvas-color-swatch::-moz-color-swatch{
    border:none;
    border-radius:50%;
}

/* ========================= */
/* Admin-only UI (path tracing tool + sidebar section) */
/* Hidden unless <body> carries .admin-mode — toggled at runtime by app.js's       */
/* resolveAdminMode() on index.html, or hardcoded directly in admin.html's markup. */
/* ========================= */

.admin-only{
    display:none;
}

body.admin-mode .sidebar-section.admin-only{
    display:block;
}

body.admin-mode .canvas-tool-group.admin-only{
    display:flex;
}

body.admin-mode .canvas-divider.admin-only{
    display:block;
}

body.admin-mode .canvas-button.admin-only{
    display:flex;
}

/* ========================= */
/* Text label input, positioned over the click point when placing a text label */
/* ========================= */

.text-label-input{
    position:absolute;
    z-index:20;
    transform:translate(-50%, -50%);
    width:140px;
    padding:4px 8px;
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    background:var(--bg-input);
    color:var(--text);
    font-size:13px;
    text-align:center;
    box-shadow:var(--shadow-sm);
}

.text-label-input:focus{
    outline:none;
}

/* ========================= */
/* Floating placement panel (bottom-left of the canvas) */
/* ========================= */

#placementPanel{

    position:absolute;

    left:15px;

    bottom:15px;

    z-index:10;

    width:260px;

    max-width:calc(100% - 30px);

    max-height:45vh;

    overflow-y:auto;

    padding:14px;

    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);

}

#placementPanel .placement-grid{
    margin-bottom:12px;
}

#placementPanel.panel-hidden{
    display:none;
}

/* ========================= */
/* Placement panel settings popup (opened via the ⚙️ button) */
/* ========================= */

#placementSettingsPanel{
    position:absolute;
    left:290px;
    bottom:15px;
    z-index:15;
    width:260px;
    max-width:calc(100% - 30px);
    max-height:45vh;
    overflow-y:auto;
    padding:14px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

#placementSettingsPanel.panel-hidden{
    display:none;
}

.settings-checkbox-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.settings-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    cursor:pointer;
}

/* ========================= */
/* Wave analysis popup (opened via the 📊 button) */
/* ========================= */

#analysisPanel{
    position:absolute;
    top:120px;
    left:50%;
    transform:translateX(-50%);
    z-index:15;
    width:480px;
    max-width:calc(100% - 30px);
    max-height:60vh;
    overflow-y:auto;
    padding:14px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

#analysisPanel.panel-hidden{
    display:none;
}

.analysis-results{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
}

.analysis-row{
    display:flex;
    flex-direction:column;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    background:var(--bg-input);
    font-size:13px;
}

.analysis-row__main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.analysis-row__verdict--killed{
    color:#00cc66;
    font-weight:700;
}

.analysis-row__verdict--survives{
    color:var(--danger);
    font-weight:700;
}

.analysis-row__defeat{
    margin-top:4px;
    color:var(--danger);
    font-size:12px;
}

.risk-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-left:8px;
}

.risk-badge--low{
    background:rgba(0, 204, 102, 0.16);
    color:#00cc66;
}

.risk-badge--medium{
    background:rgba(224, 160, 47, 0.16);
    color:#e0a02f;
}

.risk-badge--high{
    background:var(--danger-hover);
    color:#fff;
}

.wave-scan-block{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
}

.wave-scan-block--high{
    border-color:var(--danger);
}

.wave-scan-block__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
    font-weight:600;
}

.wave-scan-block__rows{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.floating-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.floating-panel-header__actions{
    display:flex;
    align-items:center;
    gap:4px;
}

.floating-panel-header .sidebar-section__title{
    margin-bottom:0;
}

.panel-close{
    flex-shrink:0;
    width:22px;
    height:22px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--text-muted);
    font-size:12px;
    border-radius:var(--radius-sm);
}

.panel-close:hover{
    background:var(--bg-input-hover);
    color:var(--text);
}

/* ========================= */
/* Off-canvas drawers (mobile-first: both panels start hidden off-screen) */
/* ========================= */

/* Hidden checkboxes driving the drawers */
#menu-toggle,
#menu-toggle2 {
    display: none;
}

/* Hamburger buttons */
.menu-btn {
    position: fixed;
    top: 5px;
    width: 160px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 100;
    transition: 0.2s ease;
}
.menu-btn2 {
    position: fixed;
    top: 5px;
    width: 180px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 100;
    transition: 0.2s ease;
}

.menu-btn { left: 16px; }
.menu-btn2 { right: 16px; }

.menu-btn:hover,
.menu-btn2:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* Left sidebar: primary tools (troop list, level/player/color, share/save/load, collab) */
#sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--bg-elevated);
    border-right:1px solid var(--border);
    color: var(--text);
    padding: 76px 18px 18px;
    overflow-y: auto;
    position: fixed;
    left: -300px;
    top: 0;
    z-index: 90;
    flex-shrink: 0;
    transition: left 0.3s ease, width 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}

/* Right panel: reference strategies (secondary content, stays an on-demand drawer at every size) */
#rightsidebar {
    width: var(--strats-w);
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-elevated);
    border-left:1px solid var(--border);
    color: var(--text);
    padding: 76px 20px 20px;
    overflow-y: auto;
    position: fixed;
    right: -400px;
    top: 0;
    z-index: 90;
    transition: right 0.3s ease;
}

.panel-header{
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}

#rightsidebar .panel-header__title{
    font-size:19px;
    font-weight:700;
    text-transform:none;
    letter-spacing:normal;
    color:var(--text);
    margin-top:0;
}

.panel-header__subtitle{
    margin-top:6px;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.5;
}

#rightsidebar h2{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-muted);
    margin-top:18px;
    margin-bottom:8px;
}

#rightsidebar h3{
    font-size:13px;
    color:var(--text);
    margin-top:14px;
    margin-bottom:6px;
}

/* Drawer open state */
#menu-toggle:checked ~ #sidebar {
    left: 0;
}

#menu-toggle2:checked ~ #rightsidebar {
    right: 0;
}

/* Click-outside-to-close backdrop, one per drawer */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 80;
}

#menu-toggle:checked ~ .overlay-left,
#menu-toggle2:checked ~ .overlay-right {
    display: block;
}

/* Mobile: no toggle button for the primary sidebar (it stays closed/unreachable there). */
@media ((max-width: 500px) and (orientation: portrait)) or ((max-height: 500px) and (orientation: landscape)) {
    .menu-btn {
        display: none;
    }
    .topbar__map{
        left: 10px;
    }
    #canvasPlayerFilter{
        right: 8px;
        padding:4px 8px;
    }
    #canvasPlayerFilter select{
        min-width: 90px;
    }
    #canvasTools {
        display: none;
    }
    #placementPanel {
        display: none;
    }
    #placementSettingsPanel {
        display: none;
    }
    #analysisPanel {
        display: none;
    }
    #canvasHelp {
        display: none;
    }
    #helpPanel {
        display: none;
    }
}

/* Desktop: the primary sidebar is docked and always visible, only the */
/* secondary strategies panel keeps working as an on-demand drawer.    */
@media (min-width: 900px) {
    .overlay-left {
        display: none !important;
    }

    #sidebar {
        position: static;
        left: 0;
        height: auto;
    }

    /* Sidebar is active/open by default on desktop; clicking the same */
    /* toggle button retracts it instead of opening an off-canvas drawer. */
    #menu-toggle:checked ~ #sidebar {
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        overflow: hidden;
    }

    #topbar {
        margin-left: 0;
    }

    #canvasTools {
        left: 15px;
    }

    #canvasPlayerFilter {
        right: 15px;
    }

    #canvasHelp {
        right: 15px;
    }

    #helpPanel {
        right: 15px;
    }
}

/* ========================= */
/* Community strategies panel */
/* ========================= */

.strat{

    margin-top:10px;

    border-radius:var(--radius);

    background:var(--bg-input);

    overflow:hidden;

}


.strat summary{

    padding:12px;

    cursor:pointer;

    font-weight:600;
    font-size:13px;

    list-style:none;

    user-select:none;

}


.strat summary::-webkit-details-marker{

    display:none;

}


.strat summary::before{

    content:"▶";

    margin-right:8px;

    color:var(--text-muted);

    transition:.2s;

}


.strat[open] summary::before{

    content:"▼";

}


.stratContent{

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    padding:0 12px 12px;

}


.gdoc,
.load{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 12px;

    border-radius:var(--radius-sm);

    color:var(--text);

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    transition:0.15s ease;

}

.gdoc{

    background:var(--bg-elevated);
    border:1px solid var(--border);

}

.load{

    background:var(--accent);
    color:#0c1220;

}

.gdoc:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.load:hover{
    background:var(--accent-hover);
}

.strategies-submit{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--border);
    text-align:center;
}

.strategies-submit a{
    display:inline-block;
    padding:10px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    color:var(--text);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:0.15s ease;
}

.strategies-submit a:hover{
    border-color:var(--accent);
    color:var(--accent);
}